:root{--bg:#f4f1ea;--card:#fff;--text:#1d1d1b;--muted:#6b6a66;--accent:#1f6f4a;--accent-text:#fff;--border:#d9d4c7;--danger:#b3261e;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#151614;--card:#22231f;--text:#ecebe6;--muted:#9b9a93;--accent:#3fa577;--accent-text:#0d130f;--border:#3a3b35;--danger:#f2867e;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);margin:0}body{-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,PingFang TC,Noto Sans TC,Microsoft JhengHei,sans-serif;font-size:16px}.page{max-width:480px;padding:max(24px, env(safe-area-inset-top)) 16px 32px;flex-direction:column;gap:12px;margin:0 auto;display:flex}.title{text-align:center;margin:16px 0;font-size:28px}h2{margin:0 0 8px;font-size:18px}button{font:inherit;border:1px solid var(--border);background:var(--card);min-height:44px;color:var(--text);border-radius:10px;padding:0 16px}button:disabled{opacity:.5}button.primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:600}button.link{color:var(--muted);background:0 0;border:none;text-decoration:underline}button.link.danger{color:var(--danger)}.field{flex-direction:column;gap:4px;display:flex}.field>span{color:var(--muted);font-size:14px}input:not([type]),input[type=text],input[type=number]{font:inherit;border:1px solid var(--border);background:var(--card);min-height:44px;color:var(--text);border-radius:10px;width:100%;padding:0 12px}input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent)}.divider{text-align:center;color:var(--muted)}.error{color:var(--danger);margin:0}.muted{color:var(--muted)}.center{text-align:center}.notice{text-align:center;background:var(--card);border-radius:12px;padding:16px}.room-head{justify-content:space-between;align-items:center;display:flex}.code{letter-spacing:4px;font-variant-numeric:tabular-nums;font-size:32px;font-weight:700}.seats{grid-template-columns:1fr 1fr;gap:8px;display:grid}.seat{background:var(--card);border:1px solid var(--border);overflow-wrap:anywhere;border-radius:12px;flex-wrap:wrap;align-items:center;gap:6px;min-height:56px;padding:8px 12px;display:flex}.seat.empty{background:0 0;border-style:dashed}.seat.me{border-color:var(--accent);border-width:2px}.tag{background:var(--accent);color:var(--accent-text);border-radius:6px;padding:2px 6px;font-size:12px}.tag.off{background:var(--muted)}.settings{background:var(--card);border:1px solid var(--border);border-radius:12px;flex-direction:column;gap:10px;padding:12px;display:flex}.amounts{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.row{justify-content:space-between;align-items:center;gap:12px;display:flex}.toggle>span{flex-direction:column;display:flex}.toggle small{font-size:12px}.segmented{gap:4px;display:flex}.segmented button{min-height:36px;padding:0 12px}.segmented button.on{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}button.kick{min-height:28px;margin-left:auto;padding:0 8px;font-size:13px}.grant-key{letter-spacing:2px;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all;font-size:18px}.tag.bot{background:var(--muted)}.add-bot{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.add-bot button{min-height:32px;padding:0 8px;font-size:13px}button.danger:not(.link){background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}.invite-ttl{justify-content:space-between;align-items:center;gap:8px;display:flex}.invite-ttl button{flex:none}.cover{text-align:center;color:#fff;background:radial-gradient(at 50% 35%,#2b8a5e 0%,#1f6f4a 45%,#0f3d29 100%);border-radius:20px;margin:4px 0 8px;padding:26px 12px 22px;box-shadow:inset 0 0 0 2px #f2c94c80,0 6px 18px #0003}.cover-tiles{justify-content:center;gap:6px;margin-bottom:18px;display:flex}.cover-tiles img{aspect-ratio:100/140;filter:drop-shadow(0 5px 6px #00000073);width:min(52px,13vw)}.cover-tiles img:first-child{transform:rotate(-9deg)translateY(8px)}.cover-tiles img:nth-child(2){transform:rotate(-4deg)translateY(2px)}.cover-tiles img:nth-child(4){transform:rotate(4deg)translateY(2px)}.cover-tiles img:nth-child(5){transform:rotate(9deg)translateY(8px)}.cover h1{letter-spacing:.16em;color:#f2c94c;text-shadow:0 2px #7a5a0c,0 6px 12px #00000073;margin:0;padding-left:.16em;font-size:min(48px,12vw);font-weight:900}.cover p{letter-spacing:.12em;opacity:.92;margin:10px 0 0;font-size:14px}:root{--felt:#1f6f4a;--felt-edge:#185a3c;--felt-text:#f3f6f1;--tile-bg:#fbfaf5;--tile-m:#c0392b;--tile-p:#1f5fa8;--turn:#f2c94c;--felt-line:#ffffff4d}@media (prefers-color-scheme:dark){:root{--felt:#164d34;--felt-edge:#10392a}}.table{background:var(--felt);color:var(--felt-text);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-user-select:none;user-select:none;display:flex;position:fixed;inset:0;overflow:hidden}.table-grid{--u:min(calc(100vw / 160), calc(100vh / 74), 6.5px);--tile-w:calc(var(--u) * 8.4);--tile-h:calc(var(--tile-w) * 1.4);--mini-w:calc(var(--u) * 4.4);--wall-t:calc(var(--u) * 3.2);--fs:max(10px, calc(var(--u) * 2.9));--fs-s:max(9px, calc(var(--u) * 2.4));--ring:max(2px, calc(var(--u) * .4));box-sizing:border-box;grid-template-columns:calc(var(--u) * 21) minmax(0, 1fr) calc(var(--u) * 21);grid-template-rows:calc(var(--u) * 7) minmax(0, 1fr) auto;gap:var(--u);min-width:0;min-height:0;padding:var(--u);font-size:var(--fs);flex:1;grid-template-areas:"top top top""left center right""me me me";line-height:1.2;display:grid}@supports (height:1dvh){.table-grid{--u:min(calc(100vw / 160), calc(100dvh / 74), 6.5px)}}.top-row{align-items:stretch;gap:var(--u);grid-area:top;min-width:0;display:flex}.tools-right{gap:var(--u);display:flex}.table button.tool{min-height:0;padding:0 calc(var(--u) * 1.8);font-size:var(--fs-s);white-space:nowrap;color:var(--felt-text);border-color:var(--felt-line);border-radius:calc(var(--u) * 1.5);background:0 0}.tseat{--mini-w:calc(var(--u) * 3.3);box-sizing:border-box;background:var(--felt-edge);border:var(--ring) solid transparent;border-radius:calc(var(--u) * 1.6);min-width:0;min-height:0;padding:calc(var(--u) * .5);position:relative;overflow:hidden}.tseat.active,.table-grid>.me.active{border-color:var(--turn)}.tseat.top{justify-content:safe center;align-items:center;gap:calc(var(--u) * 1.5);padding:0 var(--u);flex:1;display:flex}.tseat.left{grid-area:left}.tseat.right{grid-area:right}.tseat.left,.tseat.right{gap:calc(var(--u) * .6);flex-direction:column;display:flex}.seat-tiles{gap:calc(var(--u) * .8);min-width:0;min-height:0;display:flex}.tseat.top .seat-tiles{align-items:center;gap:calc(var(--u) * 1.5)}.tseat.left .seat-tiles,.tseat.right .seat-tiles{flex:1}.tseat.right .seat-tiles{flex-direction:row-reverse}.player-tag{align-items:center;gap:calc(var(--u) * .8);white-space:nowrap;min-width:0;display:flex}.tseat.left .player-tag,.tseat.right .player-tag{row-gap:calc(var(--u) * .4);flex-wrap:wrap}.player-tag .wind{color:var(--turn);font-weight:700}.player-tag .name{text-overflow:ellipsis;overflow:hidden}.player-tag .chips{font-size:var(--fs-s);opacity:.9;font-variant-numeric:tabular-nums}.player-tag .chips.plus{color:#7fe3a9}.player-tag .chips.minus{color:#ffb3ab}.table-grid .tag{font-size:var(--fs-s);padding:0 calc(var(--u) * .9);border-radius:calc(var(--u) * .9);line-height:1.25}.tag.dealer{background:var(--turn);color:#1d1d1b;font-weight:700;box-shadow:0 0 0 1px #00000040}.tag.ting{background:var(--tile-m);color:var(--tile-bg)}.backs{gap:calc(var(--u) * .25);flex:none;display:flex}.backs>i{box-sizing:border-box;background:linear-gradient(160deg, #2f77c4, var(--tile-p));border:1px solid #174a85;border-radius:15%}.tseat.top .backs>i{width:calc(var(--u) * 3);height:calc(var(--u) * 4.4)}.tseat.left .backs,.tseat.right .backs{width:calc(var(--u) * 4.2);flex-direction:column;min-height:0}.tseat.left .backs>i,.tseat.right .backs>i{flex:0 1 calc(var(--u) * 2.2);min-height:0}.exposed{align-content:flex-start;gap:calc(var(--u) * .6);flex-wrap:wrap;min-width:0;min-height:0;display:flex}.tseat.top .exposed{flex-wrap:nowrap;align-items:center}.melds,.flowers{gap:calc(var(--u) * .6);flex-wrap:wrap;display:flex}.flowers{gap:calc(var(--u) * .2)}.tseat.top .melds,.tseat.top .flowers{flex-wrap:nowrap}.meld{gap:1px;display:inline-flex}.tile{font:inherit;background:0 0;border:none;border-radius:7%/5%;flex-direction:column;flex:none;justify-content:center;align-items:center;min-height:0;margin:0;padding:0;line-height:1;display:inline-flex}.tile>img{pointer-events:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.tile.hand{width:var(--tile-w);height:var(--tile-h);transition:transform 80ms}.tile.mini{width:var(--mini-w);height:calc(var(--mini-w) * 1.4)}.tile.back{box-sizing:border-box;background:var(--tile-p);border:1px solid #174a85}.tile.selected{transform:translateY(calc(var(--u) * -1.6));box-shadow:0 0 0 var(--ring) var(--turn)}.tile.highlight{box-shadow:0 0 0 var(--ring) var(--turn)}.table-grid>.center{min-width:0;min-height:0;padding:calc(var(--wall-t) + var(--u) * .8);grid-area:center;position:relative}.felt{justify-content:center;align-items:stretch;gap:calc(var(--u) * 2);width:100%;height:100%;display:flex}.mid{flex-direction:column;align-items:center;min-width:0;min-height:0;display:flex}.slot{flex:none;justify-content:center;display:flex;position:relative}.slot.left,.slot.right{width:calc(var(--u) * 23.2);align-items:center}.slot.top,.slot.bottom{width:calc(var(--u) * 48);min-height:calc(var(--u) * 12.6)}.slot.top{align-items:flex-end}.slot.bottom{align-items:flex-start}.river{--gap:calc(var(--u) * .3);grid-template-columns:repeat(var(--cols), var(--mini-w));gap:var(--gap);display:grid}.slot.top .river{width:calc(var(--cols) * var(--mini-w) + (var(--cols) - 1) * var(--gap));flex-wrap:wrap-reverse;display:flex}.river.dense{--mini-w:calc(var(--u) * 3.4)}.hub{justify-content:center;align-items:center;gap:calc(var(--u) * .3);white-space:nowrap;text-align:center;flex-direction:column;flex:1;min-height:0;line-height:1.15;display:flex}.hub .round{font-weight:700}.dealer-line{margin-left:calc(var(--u) * 1.5);color:var(--turn)}.countdown{margin-left:calc(var(--u) * 1.2);font-variant-numeric:tabular-nums;opacity:.9}.countdown.urgent{color:var(--turn);font-weight:700}.hub .wall{justify-content:center;align-items:center;display:flex}.hub .wall .claim-tile{margin-left:calc(var(--u) * 2)}.claim-tile{--mini-w:calc(var(--u) * 3.4);align-items:center;gap:calc(var(--u) * 1.2);font-size:var(--fs-s);display:flex}.wall-ring{pointer-events:none;position:absolute;inset:0}.wall-side{justify-content:center;gap:calc(var(--u) * .2);display:flex;position:absolute}.wall-side.top,.wall-side.bottom{left:calc(var(--wall-t) + var(--u) * .8);right:calc(var(--wall-t) + var(--u) * .8);height:var(--wall-t)}.wall-side.left,.wall-side.right{top:calc(var(--wall-t) + var(--u) * .8);bottom:calc(var(--wall-t) + var(--u) * .8);width:var(--wall-t)}.wall-side.bottom{flex-direction:row-reverse;bottom:0}.wall-side.top{flex-direction:row;top:0}.wall-side.right{flex-direction:column;right:0}.wall-side.left{flex-direction:column-reverse;left:0}.wall-side>i{box-sizing:border-box;background:linear-gradient(160deg, #3a86d6, var(--tile-p));min-width:0;min-height:0;box-shadow:0 calc(var(--u) * .35) 0 #0f3a6e;border:1px solid #174a85;border-radius:14%}.wall-side.top>i,.wall-side.bottom>i,.wall-side.left>i,.wall-side.right>i{flex:0 1 calc(var(--u) * 2.4)}.wall-side>i.half{box-shadow:none;opacity:.6}.wall-side>i.empty{box-shadow:none;background:#00000024;border-color:#0000}.dice-roll{inset:calc(var(--wall-t) + var(--u) * .5);z-index:3;justify-content:center;align-items:center;gap:calc(var(--u) * 2);background:var(--felt);border-radius:calc(var(--u) * 2);flex-direction:column;display:flex;position:absolute}.dice{gap:calc(var(--u) * 2.5);display:flex}.die{--die:calc(var(--u) * 10);width:var(--die);height:var(--die);padding:calc(var(--die) * .14);box-sizing:border-box;background:linear-gradient(145deg,#fff,#e6e3da);border-radius:18%;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);display:grid;box-shadow:inset 0 -3px #c9c5b8,inset 0 0 0 1px #b9b5a8,0 3px 6px #00000059}.die>i{border-radius:50%;place-self:center;width:76%;height:76%}.die>i.pip{background:radial-gradient(circle at 35% 30%,#555,#111 70%)}.die.red>i.pip{background:radial-gradient(circle at 35% 30%,#ff6b5e,#c4161c 70%)}.die.one>i.pip{transform:scale(1.7)}.die.rolling{animation:.36s linear infinite die-tumble}.die.rolling:nth-child(2){animation-duration:.3s;animation-direction:reverse}.die.rolling:nth-child(3){animation-duration:.42s}@keyframes die-tumble{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-18%)rotate(180deg)}to{transform:translateY(0)rotate(360deg)}}.dice-result{color:var(--turn);text-align:center;font-weight:700}.win-mark{z-index:5;padding:calc(var(--u) * .5) calc(var(--u) * 2.5);border-radius:calc(var(--u) * 2.5);white-space:nowrap;pointer-events:none;background:#00000059;flex-direction:column;align-items:center;animation:.35s ease-out win-pop;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.win-mark span{font-size:calc(var(--u) * 13);color:#e53935;text-shadow:0 0 2px #fff,0 0 10px #fffc,0 4px 12px #00000080;font-weight:900;line-height:1.05}.win-mark small{font-size:calc(var(--u) * 3.6);color:#fff;font-weight:700}@keyframes win-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.win-mark.dealIn span,.win-mark.ting span,.win-mark.meld span{font-size:calc(var(--u) * 9)}.win-mark.dealIn span{color:#1d1d1b;text-shadow:0 0 2px #fff,0 0 12px #ffffffe6}.win-mark.ting,.win-mark.meld{background:#0003}.win-mark.ting span{color:var(--turn);text-shadow:0 0 2px #000,0 3px 10px #0009}.win-mark.meld span{color:#fff;text-shadow:0 2px #0000008c,0 0 14px #0009}.table-grid>.me{box-sizing:border-box;background:var(--felt-edge);border:var(--ring) solid transparent;border-radius:calc(var(--u) * 1.6);min-width:0;padding:calc(var(--u) * .4) var(--u) calc(var(--u) * .6);flex-direction:column;grid-area:me;display:flex;position:relative}.me-info{--mini-w:calc(var(--u) * 3.2);align-items:center;gap:calc(var(--u) * 1.5);height:calc(var(--u) * 5);white-space:nowrap;min-width:0;display:flex;overflow:hidden}.me-info .flowers{flex-wrap:nowrap}.hint{font-size:var(--fs-s);opacity:.9}.me-info .error{font-size:var(--fs-s);color:#ffd1cc}.waits,.ting-hints{align-items:center;gap:calc(var(--u) * 1.5);font-size:var(--fs-s);margin-left:auto;display:inline-flex}.waits .wait,.ting-hint{align-items:center;gap:calc(var(--u) * .4);display:inline-flex}.ting-hint{padding:0 calc(var(--u) * .8);border-radius:calc(var(--u) * 1.2);background:#ffffff1f}.waits small,.ting-hints small{opacity:.85}.me>.hand{justify-content:center;align-items:flex-end;gap:calc(var(--u) * .3);padding-top:calc(var(--u) * 2);display:flex}.me>.hand .drawn{margin-left:calc(var(--u) * 3);display:flex}.my-exposed{margin-right:calc(var(--u) * 2);padding:calc(var(--u) * .5) calc(var(--u) * .8);border-radius:calc(var(--u) * 1.2);background:#ffffff29;border:1px solid #ffffff59;align-self:flex-end;display:flex}.my-exposed .melds{flex-wrap:nowrap}.actions{left:0;right:0;bottom:calc(100% + var(--u) * .6);z-index:6;justify-content:center;align-items:flex-end;gap:calc(var(--u) * 1.5);pointer-events:none;display:flex;position:absolute}.table button.act{pointer-events:auto;justify-content:center;align-items:center;gap:calc(var(--u) * .8);min-height:calc(var(--u) * 8.5);min-width:calc(var(--u) * 13);padding:0 calc(var(--u) * 2.5);font-size:max(14px, calc(var(--u) * 3.8));white-space:nowrap;border-radius:calc(var(--u) * 2);font-weight:700;line-height:1;display:inline-flex;box-shadow:0 2px 8px #00000073}.table button.act.chi{padding:0 calc(var(--u) * 1.6)}.table button.act.win,.table button.act.on{background:var(--turn);color:#1d1d1b;border-color:var(--turn)}.overlay{--mini-w:min(26px, calc((100vw - 40px) / 30));z-index:10;background:#0000008c;justify-content:center;align-items:center;padding:8px;font-size:16px;line-height:normal;display:flex;position:fixed;inset:0}.summary{background:var(--card);color:var(--text);border-radius:12px;flex-direction:column;gap:8px;max-width:100%;max-height:100%;padding:10px 14px;display:flex;overflow:auto}.summary>*{flex-shrink:0}.summary p{margin:0}.summary h2,.summary h3{text-align:center;margin:0}.summary .tai{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 10px;display:flex}.summary .center{text-align:center}.summary table{border-collapse:collapse;width:100%}.summary td{border-top:1px solid var(--border);white-space:nowrap;padding:3px 4px}.summary th{opacity:.7;padding:0 4px;font-size:12px;font-weight:400}.summary tr.winner td{background:color-mix(in srgb, var(--turn) 22%, transparent)}.summary .who .tag{margin-left:4px;padding:1px 7px;font-size:13px}.summary .hand-row{flex-wrap:nowrap;gap:1px;display:flex}.summary .num{text-align:right;font-variant-numeric:tabular-nums}.summary .plus{color:var(--accent);font-weight:700}.summary .minus{color:var(--danger)}.rotate-hint{display:none}@media (orientation:portrait) and (width<=700px){.rotate-hint{z-index:20;background:var(--felt);color:var(--felt-text);justify-content:center;align-items:center;font-size:20px;font-weight:700;display:flex;position:fixed;inset:0}}html.table-locked,html.table-locked body{overscroll-behavior:none;touch-action:manipulation;position:fixed;inset:0;overflow:hidden}.table,.table *{touch-action:manipulation}.table{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.swap-status{--mini-w:calc(var(--u) * 3.4);justify-content:center;align-items:center;gap:calc(var(--u) * .8) calc(var(--u) * 2.4);font-size:var(--fs-s);flex-wrap:wrap;display:flex}.swap-status .swap-row{align-items:center;gap:calc(var(--u) * .5);display:inline-flex}.summary .hand-row{flex-wrap:wrap;align-items:center;gap:3px 8px}.summary .hand-row .flowers,.summary .hand-row .melds,.summary .hand-row .concealed{flex-wrap:nowrap;gap:1px;margin:0;display:inline-flex}.summary .hand-row .melds{gap:5px}.summary .hand-row .meld{gap:1px;display:inline-flex}.dice-mini{align-items:center;gap:calc(var(--u) * .6);margin-right:calc(var(--u) * 1.6);display:inline-flex}.dice-mini .die{--die:calc(var(--u) * 3.6);box-shadow:none;border-radius:22%}.dice-bonus{color:var(--turn);font-weight:700;font-size:var(--fs-s)}.dice-mini .dice-bonus{margin-left:calc(var(--u) * .8)}.summary .dice-double{color:#b3261e;font-weight:700}
