:root{--felt:#12573a;--felt-dark:#0f3d2a;--felt-light:#1a6b48;--ink:#f3f7f2;--muted:#b9d3c3;--card:#fffdf6;--card-ink:#1d2b24;--accent:#e8b730;--red:#d64541;--blue:#2f6fd6;--gutter:12px;--max:860px;--hand-w:min(54px, calc((min(100vw, var(--max)) - 2 * var(--gutter) - 14px) / 14.6));--river-w:min(40px, calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 9));--small-w:min(30px, calc((min(100vw, var(--max)) - 2 * var(--gutter)) / 16));--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:radial-gradient(ellipse at 50% 40%, var(--felt-light), var(--felt) 55%, var(--felt-dark));min-height:100%;color:var(--ink);-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;background-attachment:fixed;margin:0;font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,Yu Gothic UI,sans-serif}button{font:inherit}.tile{width:var(--w,var(--river-w));aspect-ratio:60/82;flex:none;line-height:0;display:inline-block;position:relative}.tile .tile-svg{width:100%;height:100%;display:block}.tile.side{width:calc(var(--w,var(--river-w)) * 82 / 60);aspect-ratio:82/60}.tile.side .tile-svg{width:73.1707%;height:136.667%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(90deg)}.tile.rv{--w:var(--river-w)}.tile.sm{--w:var(--small-w)}.tile.xs{--w:16px;vertical-align:middle;margin:0 1px}.tile.oh{--w:var(--small-w)}.tile.oh.draw{margin-left:6px}.tile.called{opacity:.38}.tile.last:after{content:"";border:2px solid var(--accent);border-radius:6px;animation:1.2s ease-in-out infinite pulse;position:absolute;inset:-2px}.tile.win-tile{filter:drop-shadow(0 0 4px var(--accent));margin-left:4px}@keyframes pulse{50%{opacity:.6}}.lobby{max-width:520px;padding:max(20px, env(safe-area-inset-top)) var(--gutter) 40px;margin:0 auto}.lobby h1{letter-spacing:.04em;align-items:center;gap:10px;margin:8px 0 6px;font-size:30px;display:flex}.lobby h1 small{color:var(--accent);align-self:flex-end;margin-left:4px;padding-bottom:6px;font-size:14px}.logo{filter:drop-shadow(0 3px 4px #00000059);width:40px;line-height:0;display:inline-block}.lead{color:var(--muted);margin:0 0 18px;line-height:1.6}.field{gap:6px;margin-bottom:14px;font-weight:600;display:grid}input{font:inherit;color:var(--ink);background:#00000040;border:1px solid #ffffff40;border-radius:12px;width:100%;min-width:0;padding:12px 14px;font-size:16px}input:focus{outline:2px solid var(--accent);outline-offset:1px}.card{background:#00000038;border:1px solid #ffffff1a;border-radius:16px;margin-bottom:14px;padding:16px}.card h2{margin:0 0 12px;font-size:16px}.card.center{text-align:center}.row{gap:10px;display:flex}.row>.btn{flex:1}.code-input{text-transform:uppercase;letter-spacing:.3em;text-align:center;font-weight:700}.rules summary{cursor:pointer;font-weight:700}.rules ul{color:var(--muted);margin:10px 0 0;padding-left:1.2em;font-size:14px;line-height:1.7}.room-code{letter-spacing:.18em;color:var(--accent);margin:0 0 4px;font-size:46px;font-weight:800}.muted{color:var(--muted);font-size:14px}.share{gap:8px;margin:16px 0;display:flex}.share input{font-size:14px}.stats{gap:10px;margin:0 0 14px;display:flex}.stat{color:var(--muted);white-space:nowrap;background:#00000038;border:1px solid #ffffff1a;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:6px;padding:10px 8px;font-size:14px;display:flex}.stat b{color:var(--ink);font-variant-numeric:tabular-nums;margin-left:2px;font-size:22px}.dot{border-radius:50%;width:8px;height:8px}.dot.playing{background:#ff7a59}.dot.waiting{background:#5fd38d;animation:1.6s infinite pulse}.hint{margin:-6px 0 12px}.btn small{opacity:.75;margin-top:2px;font-size:12px;font-weight:600;display:block}.searching{justify-content:center;gap:8px;margin:6px 0 12px;display:flex}.searching .logo{animation:1.2s ease-in-out infinite hop}.searching .logo:nth-child(2){animation-delay:.15s}.searching .logo:nth-child(3){animation-delay:.3s}@keyframes hop{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.players{margin:0 0 8px;padding:0;line-height:1.8;list-style:none}.btn{min-height:44px;color:var(--card-ink);cursor:pointer;touch-action:manipulation;white-space:nowrap;background:#e9efe9;border:0;border-radius:12px;padding:12px 16px;font-weight:700;transition:transform 80ms,filter .15s}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5}.btn.primary{background:var(--accent);color:#2b2200}.btn.big{width:100%;padding:14px 18px;font-size:17px}.btn.link{color:var(--muted);background:0 0;min-height:36px;margin-top:6px;text-decoration:underline}.btn.tiny{min-height:32px;padding:4px 12px}.btn.ghost{color:var(--ink);background:#ffffff1f}.btn.win{color:#3a2500;background:linear-gradient(#ffd54a,#f0a500);font-size:18px;animation:1s ease-in-out infinite alternate glow;box-shadow:0 0 0 3px #ffd54a59}.btn.call{background:var(--blue);color:#fff}.btn.riichi{background:var(--red);color:#fff}.btn.riichi.on{color:var(--red);background:#fff}.btn.pass{background:#ffffffd9}@keyframes glow{to{box-shadow:0 0 0 6px #ffd54a26}}.table{max-width:var(--max);min-height:100dvh;padding:max(6px, env(safe-area-inset-top)) var(--gutter) max(10px, env(safe-area-inset-bottom));-webkit-user-select:none;user-select:none;flex-direction:column;gap:6px;margin:0 auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:8px;font-size:14px;display:flex}.round{white-space:nowrap;font-size:16px;font-weight:800}.round small{color:var(--muted);margin-left:6px;font-weight:600}.chips{color:var(--muted);gap:10px;display:flex}.chips span{white-space:nowrap;background:#00000040;border-radius:999px;padding:3px 10px}@media (width<=480px){.chips{gap:4px;font-size:12px}.chips span{padding:3px 7px}.round small{margin-left:3px}}.player{background:#00000024;border:2px solid #0000;border-radius:14px;padding:6px 8px;transition:border-color .2s}.player.active{border-color:#e8b730bf}.pinfo{flex-wrap:wrap;align-items:center;gap:8px;min-height:26px;font-size:14px;display:flex}.pinfo b{text-overflow:ellipsis;white-space:nowrap;max-width:9em;overflow:hidden}.score{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}.wind{background:#ffffff2e;border-radius:6px;padding:1px 6px;font-size:12px;font-weight:800}.wind.dealer{background:var(--red)}.badge{border-radius:999px;padding:2px 8px;font-size:12px;font-weight:800}.badge.riichi{background:var(--red)}.badge.warn{background:#8a5a00}.badge.watch{background:#2f5f8a}.waits{color:var(--muted);align-items:center;gap:2px;font-size:13px;display:inline-flex}.opp-hand{flex-wrap:nowrap;align-items:flex-end;gap:1px;margin-top:4px;display:flex}.melds,.my-melds{align-items:flex-end;gap:6px;margin-left:auto;display:flex}.meld{align-items:flex-end;gap:1px;display:inline-flex}.board{min-height:calc(var(--river-w) * 82 / 60 * 4 + 60px);flex-direction:column;flex:1;justify-content:center;gap:8px;padding:6px 0;display:flex}.river{min-height:calc(var(--river-w) * 82 / 60 * 2 + 2px);grid-template-columns:repeat(8,auto);place-content:start center;align-items:end;gap:2px;display:grid}.opp-river{transform:rotate(180deg)}.center-info{text-align:center;min-height:28px;font-size:14px}.hint{color:var(--muted)}.hint.strong{color:var(--ink);font-weight:700}.actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;min-height:0;margin:4px 0;display:flex}.actions:empty{display:none}.actions .btn{min-width:72px}.my-melds:not(:empty){justify-content:flex-end;margin:4px 0}.hand{justify-content:center;align-items:flex-end;gap:1px;padding-top:12px;display:flex}.tile.ht{--w:var(--hand-w);cursor:pointer;touch-action:manipulation;transition:transform .12s,filter .12s}.tile.ht.draw{margin-left:calc(var(--hand-w) * .3)}.tile.ht.disabled{filter:brightness(.6)saturate(.6);cursor:default}.tile.ht.selected{filter:drop-shadow(0 4px 6px #00000073);transform:translateY(-10px)}@media (hover:hover){.tile.ht.playable:hover{transform:translateY(-8px)}}.riichi-mode .hand{background:#d6454126;border-radius:10px}.overlay{z-index:20;padding:var(--gutter);background:#0000008c;justify-content:center;align-items:flex-end;animation:.15s fade;display:flex;position:fixed;inset:0}.overlay.steady{animation:none}@media (width>=700px){.overlay{align-items:center}}.sheet{background:var(--card);color:var(--card-ink);padding:18px 16px calc(16px + env(safe-area-inset-bottom));text-align:center;border-radius:18px;width:100%;max-width:520px;max-height:calc(100dvh - 24px);overflow:auto;box-shadow:0 10px 40px #0006}.sheet h2,.sheet h3{margin:0 0 12px}.sheet .muted{color:#6c7a70}.sheet .btn.link{color:#556}.opts{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.opt{cursor:pointer;background:#fff;border:2px solid #d9d2bd;border-radius:12px;align-items:flex-end;gap:2px;min-height:44px;padding:10px;display:inline-flex}.opt small{margin-left:6px}.result h2.good{color:#b07800}.result h2.bad{color:#b23a36}.win-hand{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:1px;margin:8px 0;display:flex}.win-hand .gap{width:6px}.yaku{text-align:left;max-width:280px;margin:8px auto;padding:0;list-style:none}.yaku li{border-bottom:1px dashed #ddd3b8;justify-content:space-between;padding:3px 0;display:flex}.total{margin:10px 0;font-size:18px}.total b{color:#b23a36}.deltas{max-width:320px;margin:12px auto 16px}.delta{text-align:left;font-variant-numeric:tabular-nums;grid-template-columns:1fr auto auto;gap:12px;padding:6px 0;display:grid}.delta .plus{color:#1d7a3c;font-weight:700}.delta .minus{color:#b23a36;font-weight:700}.draw-row{margin-bottom:10px}.toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));color:#fff;z-index:40;text-align:center;background:#141414eb;border-radius:999px;max-width:calc(100vw - 32px);padding:10px 16px;font-size:14px;position:fixed;transform:translate(-50%)}.offline{color:#fff;z-index:40;background:#8a5a00;border-radius:999px;padding:6px 14px;font-size:13px;position:fixed;top:8px;left:50%;transform:translate(-50%)}@keyframes fade{0%{opacity:0}}@media (width>=900px){:root{--river-w:42px;--small-w:32px}}.sheet .tile.sm{--w:min(32px, calc((min(100vw, 520px) - 2 * var(--gutter) - 48px) / 15.5))}.switch-row{cursor:pointer;align-items:center;gap:12px;margin-top:14px;font-weight:600;line-height:1.4;display:flex;position:relative}.switch-row small{color:var(--muted);margin-top:2px;font-size:12px;font-weight:400;display:block}.switch-row input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.switch{background:#ffffff38;border-radius:14px;flex:none;width:46px;height:28px;transition:background .15s;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .15s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0006}.switch-row input:checked+.switch{background:#3fa86b}.switch-row input:checked+.switch:after{transform:translate(18px)}.switch-row input:focus-visible+.switch{outline:2px solid var(--accent);outline-offset:2px}.switch-row input:disabled+.switch{opacity:.45}.switch-row:has(input:disabled){cursor:default}.tools{z-index:25;flex:none;gap:6px;display:flex;position:relative}.chat-btn{position:relative}.chat-btn .unread{background:var(--red);color:#fff;border-radius:9px;min-width:18px;height:18px;padding:0 4px;font-size:11px;line-height:18px;display:none;position:absolute;top:-4px;right:-4px}.chat-btn.has-unread .unread{display:block}.sheet .switch{background:#c9d2cb}.sheet .switch-row{text-align:left;margin:10px 4px 14px}.menu-sheet{flex-direction:column;gap:10px;max-width:360px;display:flex}.menu-sheet .switch-row{margin:4px;padding:8px 4px}.sheet-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.sheet-head h2,.sheet-head h3{margin:0}.sheet .btn.ghost,.chat-panel .btn.ghost{color:var(--card-ink);background:#ece6d4}.clock{font-variant-numeric:tabular-nums;white-space:nowrap;background:#ffffff29;border-radius:10px;padding:2px 8px;font-size:12px;font-weight:800}.clock.bank{background:#e8b7304d}.clock.warn{background:var(--red);color:#fff;animation:1s infinite pulse}.clock.in-btn,.clock.in-btn.warn{color:inherit;font-size:inherit;background:0 0;padding:0;animation:none}.player{position:relative}.bubble{z-index:5;max-width:min(70%,320px);color:var(--card-ink);overflow-wrap:anywhere;pointer-events:none;background:#fff;border-radius:14px;padding:8px 12px;font-size:14px;font-weight:700;animation:.18s pop;position:absolute;right:10px;box-shadow:0 4px 14px #00000059}.player.opp .bubble{top:calc(100% - 6px)}.player.me .bubble{bottom:calc(100% - 6px)}@keyframes pop{0%{opacity:0;transform:scale(.8)}}.stamps,.quick-stamps{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.quick-stamps{max-width:420px;margin:4px auto 6px}.stamp{color:var(--card-ink);cursor:pointer;touch-action:manipulation;background:#fff;border:1px solid #e0d8c2;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:2px;min-height:52px;padding:6px 2px;font-size:11px;font-weight:700;display:flex}.stamp span{font-size:22px;line-height:1}.stamp:active{transform:scale(.94)}.chat-panel{top:calc(max(6px, env(safe-area-inset-top)) + 44px);right:max(8px, calc((100vw - var(--max)) / 2 + var(--gutter)));z-index:30;background:var(--card);width:min(100vw - 16px,340px);color:var(--card-ink);border-radius:14px;flex-direction:column;gap:6px;padding:8px 10px 10px;animation:.15s drop-in;display:flex;position:fixed;box-shadow:0 8px 26px #00000073}.chat-panel .sheet-head h3{font-size:14px}.chat-panel .btn.tiny{min-height:28px;padding:2px 10px}@keyframes drop-in{0%{opacity:0;translate:0 -10px}}.chat-log{flex-direction:column;flex:auto;gap:6px;min-height:60px;max-height:min(22dvh,200px);padding:4px 2px;display:flex;overflow-y:auto}.chat-log .empty{color:#6c7a70;text-align:center;margin:auto;font-size:13px}.chat-row{flex-direction:column;align-items:flex-start;max-width:85%;display:flex}.chat-row.mine{align-self:flex-end;align-items:flex-end}.chat-name{color:#6c7a70;margin:0 6px 1px;font-size:11px}.chat-body{overflow-wrap:anywhere;background:#ece6d4;border-radius:12px;padding:6px 10px;font-size:14px}.chat-row.mine .chat-body{background:#ffe7a3}.chat-row.is-stamp .chat-body{font-weight:700}.chat-form{gap:6px;display:flex}.chat-form input{min-width:0;color:var(--card-ink);background:#fff;border:1px solid #d9d2bd;border-radius:12px;flex:1;padding:8px 12px;font-size:16px}.chat-panel .watch-note{text-align:center;color:#6c7a70;margin:0;font-size:13px;display:none}.chat-panel.watching .stamps,.chat-panel.watching .chat-form{display:none}.chat-panel.watching .watch-note{display:block}.rules-btn{width:100%;color:var(--ink);background:#ffffff1f;border:1px solid #ffffff40;margin:0 0 12px}.rules-modal{z-index:35;align-items:center}.rules-sheet{text-align:left;flex-direction:column;max-width:640px;height:min(100%,760px);padding-bottom:12px;display:flex;overflow:hidden}.rules-tabs{background:#ece6d4;border-radius:12px;gap:4px;margin:12px 0 8px;padding:4px;display:flex}.tab{color:#556;cursor:pointer;background:0 0;border:0;border-radius:9px;flex:1;min-height:38px;padding:8px 4px;font-weight:700}.tab.on{color:var(--card-ink);background:#fff;box-shadow:0 1px 3px #00000026}.rules-body{-webkit-overflow-scrolling:touch;flex:1;padding:0 2px 8px;font-size:14px;line-height:1.7;overflow-y:auto}.rules-body h3{margin:16px 0 4px;font-size:16px}.rules-body ul{margin:4px 0;padding-left:1.2em}.rules-body .note{background:#fff4d0;border-radius:10px;margin:4px 0 8px;padding:8px 10px}.yaku-row{border-bottom:1px dashed #ddd3b8;padding:8px 0}.yaku-row p{margin:2px 0}.yaku-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;display:flex}.yaku-head b{font-size:15px}.han{color:#b07800;white-space:nowrap;font-size:12px;font-weight:700}.ex{flex-wrap:wrap;gap:6px;margin-top:4px;display:flex}.ex-group{display:inline-flex}.ex .tile.xs{--w:20px;margin:0}.points{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;margin:4px 0 10px}.points th,.points td{text-align:left;border-bottom:1px solid #e6dfc9;padding:6px 4px;font-size:13px}.points th{color:#6c7a70}.end-actions{flex-direction:column;gap:10px;margin-top:8px;display:flex}.chat-panel .stamps{scrollbar-width:thin;gap:5px;padding-bottom:2px;display:flex;overflow-x:auto}.chat-panel .stamp{flex-direction:row;flex:none;gap:4px;min-height:34px;padding:4px 8px;font-size:12px}.chat-panel .stamp span{font-size:16px}.chat-panel .chat-form input{padding:6px 10px}.chat-panel .chat-form .btn{min-height:38px;padding:6px 12px}.tile.dealing{animation:.26s ease-out both deal-in}@keyframes deal-in{0%{opacity:0;transform:translateY(-36px)scale(.7)}}.player.opp .tile.dealing{animation-name:deal-in-opp}@keyframes deal-in-opp{0%{opacity:0;transform:translateY(36px)scale(.7)}}.deal-banner{background:#00000059;border:1px solid #e8b73099;border-radius:16px;flex-direction:column;align-items:center;gap:2px;padding:12px 28px;animation:1.8s both deal-banner;display:inline-flex}.deal-banner b{letter-spacing:.08em;color:var(--accent);font-size:28px}.deal-banner span{font-size:14px;font-weight:700}.deal-banner small{color:var(--muted);font-size:13px}@keyframes deal-banner{0%{opacity:0;transform:scale(.85)}12%,80%{opacity:1;transform:none}to{opacity:0}}.waiting-push{text-align:left;margin:8px 0}.my-rooms{border:1px solid #e8b73099}.my-room{justify-content:space-between;align-items:center;gap:10px;padding:8px 0;display:flex}.my-room+.my-room{border-top:1px solid #ffffff1f}.my-room b{display:block}.my-room-actions{flex-shrink:0;align-items:center;gap:6px;display:flex}.my-room-actions .btn.small{color:var(--muted);padding:6px 10px;font-size:12px}.my-room small{color:var(--muted);font-size:12px}.push-note{margin:12px 0 0;font-size:13px}.modes{grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 10px;display:grid}.mode{min-height:84px;color:var(--ink);cursor:pointer;touch-action:manipulation;font:inherit;background:#00000038;border:2px solid #ffffff24;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;display:flex}.mode b{font-size:15px}.mode small{color:var(--muted);font-size:11px}.mode-icon{font-size:26px;line-height:1.1}.mode.on{border-color:var(--accent);background:#e8b73029}.mode.on small{color:var(--ink)}.mode:active{transform:scale(.97)}.mode-panel .stats{margin-bottom:12px}.sub-head{margin-top:18px!important}.lobby .rules-btn{margin-top:2px}.stamp.sent{color:#1d7a3c;background:#e3f5e9;border-color:#3fa86b;animation:.2s pop}.sheet-chat{flex-direction:column;gap:4px;max-width:420px;margin:6px auto;display:flex}.sheet-msg{overflow-wrap:anywhere;text-align:left;background:#ece6d4;border-radius:12px;align-self:flex-start;align-items:baseline;gap:6px;padding:4px 10px;font-size:14px;font-weight:700;animation:.18s pop;display:flex}.sheet-msg.mine{background:#ffe7a3;align-self:flex-end}.sheet-msg small{color:#6c7a70;white-space:nowrap;font-size:11px;font-weight:600}.seo-links{text-align:center;font-size:13px}.seo-links a{color:var(--muted)}