:root{color-scheme:dark;--felt-hi: #2c5a8c;--felt: #183a63;--felt-lo: #0c1f3a;--ink: #eef2f7;--ink-dim: #a9b8cc;--panel: rgba(6, 14, 28, .62);--lcd: #ffcf5a;--lcd-dim: #7d6a3a;--tile-face: #f6f1e6;--tile-side: #1f8a78;--tile-back: #1b7a6b;--tile-back-hi: #32a892;--gold: #f5c542;--plus: #7fe3a5;--minus: #ff8f8f;--win: #e2452f;--call: #2d74d6;--riichi: #ef8a1c;--font-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;--font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;--font-num: "Chakra Petch", "Zen Kaku Gothic New", ui-monospace, monospace;--C: 26cqw}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--felt-lo);color:var(--ink);font-family:var(--font-ui)}.app{min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding-block:8px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}.board{position:relative;flex:none;container-type:size;border-radius:1.6cqw;overflow:clip;background:radial-gradient(ellipse at 50% 45%,var(--felt-hi) 0%,var(--felt) 45%,var(--felt-lo) 100%);box-shadow:inset 0 0 6cqw #0000008c;font-size:max(11px,1.7cqw)}.board:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px);pointer-events:none}.num{font-family:var(--font-num);font-variant-numeric:tabular-nums}.plus{color:var(--plus)}.minus{color:var(--minus)}.panel-label{font-size:.8em;letter-spacing:.08em;color:var(--ink-dim)}.table{position:absolute;top:0;right:0;bottom:0;left:0;container-type:inline-size}.board.landscape .table{inset:auto;top:1.5cqh;left:50%;width:84cqh;height:84cqh;transform:translate(-50%)}.tile{--w: 6cqw;position:relative;display:inline-block;flex:none;width:var(--w);height:calc(var(--w) * 4 / 3);padding:0;margin:0;border:0;background:none;font:inherit;color:inherit}.tile.sz-hand{--w: 6cqw}.tile.sz-river{--w: 4.2cqw}.tile.sz-meld{--w: 4.4cqw}.tile.sz-opp{--w: 3.1cqw}.tile.sz-mini{--w: 2.9cqw}.tile-body{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--w) * .13);background:var(--tile-face);box-shadow:0 calc(var(--w) * .1) 0 0 var(--tile-side),0 calc(var(--w) * .14) calc(var(--w) * .12) #00000073}.tile-body img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;user-select:none}.tile-face{transform:scale(.92)}.tile.back .tile-body{background:linear-gradient(160deg,var(--tile-back-hi),var(--tile-back) 60%);box-shadow:0 calc(var(--w) * .1) 0 0 var(--tile-face),0 calc(var(--w) * .14) calc(var(--w) * .12) #00000073}.tile.sideways{width:calc(var(--w) * 4 / 3);height:var(--w)}.tile.sideways .tile-body img{inset:auto;left:50%;top:50%;width:calc(var(--w) * 3 / 4);height:var(--w);transform:translate(-50%,-50%) rotate(90deg) scale(1.333)}.tile.sideways .tile-body img.tile-face{transform:translate(-50%,-50%) rotate(90deg) scale(1.226)}.tile.clickable{cursor:pointer;transition:transform .1s ease-out}.tile.clickable:focus-visible{transform:translateY(-1.4cqw);outline:none}@media(hover:hover){.tile.clickable:hover{transform:translateY(-1.4cqw)}.board.landscape .tile.clickable:hover{transform:translateY(-2cqh)}}.tile.clickable:focus-visible .tile-body{box-shadow:0 0 0 2px var(--gold),0 calc(var(--w) * .1) 0 0 var(--tile-side)}.tile.highlight .tile-body{box-shadow:0 0 0 .35cqw var(--gold),0 calc(var(--w) * .1) 0 0 var(--tile-side)}.tile.dim .tile-body{filter:brightness(.55);opacity:.45}.tile.tsumogiri .tile-body{filter:brightness(.72) saturate(.7)}.tile.last .tile-body{animation:lastPulse 1s ease-in-out infinite alternate}@keyframes lastPulse{to{box-shadow:0 0 0 .35cqw var(--win),0 calc(var(--w) * .1) 0 0 var(--tile-side)}}@media(prefers-reduced-motion:reduce){.tile.last .tile-body{animation:none;box-shadow:0 0 0 .35cqw var(--win)}.tile.clickable{transition:none}}.dora-panel{position:absolute;top:10cqw;right:2cqw;display:flex;align-items:center;gap:1cqw;padding:.8cqw 1.4cqw 1.2cqw;background:var(--panel);border-radius:1cqw}.dora-tiles{display:flex;gap:.3cqw}.corner-left{position:absolute;top:2cqw;left:2cqw;display:flex;flex-direction:column;align-items:flex-start;gap:1cqw;z-index:4}.toggles{display:flex;flex-wrap:wrap;gap:.6cqw;max-width:46cqw}.toggle{font-family:var(--font-ui);font-weight:700;font-size:max(10px,1.45cqw);color:var(--ink-dim);background:var(--panel);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.5cqw 1.3cqw;cursor:pointer}.toggle.on{color:#2a1c00;background:var(--gold);border-color:var(--gold)}.toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.shugi-panel{min-width:17cqw;padding:.8cqw 1.2cqw;background:var(--panel);border-radius:1cqw;display:grid;gap:.2cqw;font-size:max(10px,1.5cqw)}.shugi-row{display:flex;justify-content:space-between;gap:1.5cqw}.shugi-row b{font-family:var(--font-num)}.center-box{position:absolute;left:calc(50cqw - var(--C) / 2);top:calc(50cqw - var(--C) / 2);width:var(--C);height:var(--C);border-radius:1.4cqw;background:linear-gradient(160deg,#1d2430,#0b0f16);box-shadow:0 .6cqw 2cqw #0009,inset 0 0 0 .25cqw #2b3442;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6cqw;z-index:2}.cb-round{font-family:var(--font-display);font-weight:800;font-size:3.6cqw;letter-spacing:.06em}.cb-sticks{display:flex;gap:2cqw;font-family:var(--font-num);font-size:1.7cqw;color:var(--ink-dim)}.cb-sticks span{display:flex;align-items:center;gap:.5cqw}.stick{display:inline-block;width:2.6cqw;height:.6cqw;border-radius:.3cqw;background:var(--ink);position:relative}.stick.thousand:after{content:"";position:absolute;left:50%;top:50%;width:.45cqw;height:.45cqw;margin:-.225cqw;border-radius:50%;background:var(--win)}.stick.hundred{background:repeating-linear-gradient(90deg,var(--ink) 0 .3cqw,#1d2430 .3cqw .5cqw)}.cb-wall{font-family:var(--font-num);font-size:1.6cqw;color:var(--lcd)}.cb-seat{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:.8cqw;white-space:nowrap}.cb-seat.bottom{transform:translate(-50%,-50%) translateY(calc(var(--C) / 2 - 2.2cqw))}.cb-seat.right{transform:translate(-50%,-50%) rotate(-90deg) translateY(calc(var(--C) / 2 - 2.2cqw))}.cb-seat.left{transform:translate(-50%,-50%) rotate(90deg) translateY(calc(var(--C) / 2 - 2.2cqw))}.cb-seat.top{transform:translate(-50%,-50%) rotate(180deg) translateY(calc(var(--C) / 2 - 2.2cqw))}.cb-wind{font-family:var(--font-display);font-weight:800;font-size:1.9cqw;color:var(--ink-dim)}.cb-wind.dealer{color:var(--win)}.cb-score{font-family:var(--font-num);font-size:2.1cqw;color:var(--lcd-dim);font-variant-numeric:tabular-nums}.cb-seat.active .cb-score{color:var(--lcd);text-shadow:0 0 1cqw rgba(255,207,90,.6)}.cb-seat.active:after{content:"";position:absolute;left:0;right:0;bottom:-.6cqw;height:.3cqw;border-radius:.2cqw;background:var(--lcd)}.seat-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1}.seat-layer.right{transform:rotate(-90deg)}.seat-layer.left{transform:rotate(90deg)}.seat-layer.top{transform:rotate(180deg)}.riichi-stick{position:absolute;left:44cqw;top:calc(50cqw + var(--C) / 2 + .5cqw);width:12cqw;height:.9cqw;border-radius:.45cqw;background:var(--ink);box-shadow:0 .2cqw .4cqw #00000080}.riichi-stick:after{content:"";position:absolute;left:50%;top:50%;width:.6cqw;height:.6cqw;margin:-.3cqw;border-radius:50%;background:var(--win)}.river{position:absolute;left:calc(50cqw - var(--C) / 2);top:calc(50cqw + var(--C) / 2 + 2cqw);display:flex;flex-direction:column;gap:.5cqw}.river-row{display:flex;align-items:flex-end}.flowers{position:absolute;left:calc(50cqw + var(--C) / 2 + 1.2cqw);top:calc(50cqw + var(--C) / 2 + 2cqw);display:flex;gap:.3cqw}.opp-hand{position:absolute;bottom:1.8cqw;left:30cqw;display:flex;align-items:flex-end;gap:1.2cqw}.opp-tiles{display:flex;gap:.15cqw}.nameplate{position:absolute;bottom:7.6cqw;left:30cqw;display:flex;align-items:center;gap:1cqw;font-size:max(10px,1.6cqw);color:var(--ink-dim)}.nameplate.active{color:var(--lcd)}.riichi-tag{font-size:.85em;color:#fff;background:var(--riichi);padding:.1em .6em;border-radius:1em}.melds{display:flex;gap:.8cqw;align-items:flex-end}.meld{display:flex;align-items:flex-end;gap:.1cqw}.my-hand{position:absolute;left:2.5cqw;right:2.5cqw;bottom:1.6cqw;display:flex;align-items:flex-end;justify-content:space-between;gap:1.5cqw;z-index:3}.my-tiles{display:flex;align-items:flex-end;gap:.15cqw}.draw-gap{display:inline-block;width:1.4cqw;flex:none}.action-bar{position:absolute;right:3cqw;bottom:12cqw;display:flex;gap:1.2cqw;z-index:4}.status-line{position:absolute;left:3cqw;bottom:12.5cqw;display:flex;align-items:center;gap:1.2cqw;font-size:max(11px,1.6cqw);color:var(--ink-dim);z-index:4}.furiten{color:var(--minus);margin-left:.6em}.abtn{font-family:var(--font-ui);font-weight:900;font-size:max(13px,2.3cqw);letter-spacing:.06em;color:#fff;border:0;border-radius:999px;padding:.9cqw 2.8cqw;min-height:34px;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;background:linear-gradient(180deg,#5b6878,#36404d);box-shadow:0 .4cqw #00000073,inset 0 1px #ffffff59;text-shadow:0 1px 2px rgba(0,0,0,.4)}.abtn small{font-size:.7em;font-weight:700}.abtn:hover{filter:brightness(1.1)}.abtn:active{transform:translateY(.3cqw);box-shadow:0 .1cqw #00000073}.abtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.abtn.win{background:linear-gradient(180deg,#ff7a52,var(--win))}.abtn.call{background:linear-gradient(180deg,#5aa2ff,var(--call))}.abtn.riichi{background:linear-gradient(180deg,#ffb24d,var(--riichi))}.abtn.riichi.on{background:linear-gradient(180deg,#8a96a8,#566173)}.abtn.skip{background:linear-gradient(180deg,#6b7686,#434d5b)}.abtn.next{background:linear-gradient(180deg,#ffd56a,#e0a720);color:#2a1c00;text-shadow:none;margin-top:1.6cqw}.modal-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:3cqw;background:#03081099}.modal{width:min(78cqw,100%);max-height:100%;overflow:auto;padding:2.4cqw 3cqw;border-radius:1.6cqw;background:linear-gradient(170deg,#1c2b42,#0e1726);box-shadow:0 1cqw 4cqw #0009,inset 0 0 0 1px #ffffff14;text-align:center}.modal h2{font-family:var(--font-display);font-weight:800;font-size:max(18px,3cqw);margin:0 0 1cqw;letter-spacing:.06em}.win-detail{text-align:left;padding-block:1.4cqw;border-bottom:1px solid rgba(255,255,255,.1);display:grid;gap:1cqw}.win-title{font-size:max(13px,1.9cqw)}.win-title b{color:var(--gold)}.win-hand{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.15cqw;padding-bottom:.6cqw}.win-hand .meld{margin-left:1cqw}.ura{display:flex;align-items:center;gap:.5cqw}.yaku{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:4px 24px}.yaku li{display:flex;justify-content:space-between;gap:1em;white-space:nowrap}.yaku li span:last-child{font-family:var(--font-num);color:var(--ink-dim)}.win-total{display:flex;flex-wrap:wrap;gap:.6em 2.4cqw;align-items:baseline}.win-total .limit{font-family:var(--font-display);font-weight:800;font-size:max(16px,2.6cqw);color:var(--gold)}.win-total .points{font-family:var(--font-num);font-size:max(16px,2.6cqw);font-weight:700}.win-total .chips{color:var(--ink-dim)}.draw{display:grid;gap:.4cqw;padding-block:1cqw}.delta{margin:1.4cqw auto 0;border-collapse:collapse;font-size:max(12px,1.8cqw)}.delta td,.delta th{padding:.4cqw 1.6cqw}.delta td.num{text-align:right}.delta .chips{color:var(--ink-dim)}.delta th{font-weight:500;color:var(--ink-dim);font-size:.85em}.final .rank{font-family:var(--font-display);font-weight:800;color:var(--gold)}.note{font-size:max(10px,1.4cqw);color:var(--ink-dim)}.board.landscape .my-hand{left:2cqw;right:2cqw;bottom:1.5cqh;gap:3cqw}.board.landscape .my-hand .tile.sz-hand{--w: min(8.6cqh, 5.2cqw)}.board.landscape .my-hand .tile.sz-meld{--w: min(6.4cqh, 3.8cqw)}.board.landscape .tile.clickable:focus-visible{transform:translateY(-2cqh)}.board.landscape .action-bar{bottom:16.5cqh;right:2cqw}.board.landscape .status-line{bottom:17cqh;left:2cqw}.board.landscape .corner-left{top:2cqh;left:2cqw}.board.landscape .toggles{flex-direction:column;align-items:flex-start;max-width:none}.board.landscape .dora-panel{top:2cqh;right:2cqw}.board.landscape .dora-panel .tile.sz-mini{--w: min(5cqh, 2.6cqw)}.board.landscape .modal{width:min(130cqh,100%)}.board.landscape .modal .tile.sz-meld{--w: min(6cqh, 3.2cqw)}.board.landscape .modal .tile.sz-mini{--w: min(5cqh, 2.6cqw)}.clock{position:absolute;left:50%;bottom:12.5cqw;transform:translate(-50%);display:flex;align-items:baseline;gap:.4em;padding:.3em 1em;border-radius:999px;background:var(--panel);font-family:var(--font-num);font-variant-numeric:tabular-nums;z-index:4}.clock b{font-size:max(18px,2.8cqw);color:var(--lcd)}.clock span{font-size:max(12px,1.7cqw);color:var(--ink-dim)}.clock.reserve b{color:var(--ink-dim)}.clock.reserve span{color:var(--lcd);font-size:max(16px,2.4cqw)}.clock.low span{color:var(--minus)}.board.landscape .clock{bottom:16.5cqh}.opp-draw-gap{display:inline-block;width:1cqw;flex:none}.ghost{display:inline-flex;animation:ghostLeave .6s ease-out forwards}@keyframes ghostLeave{to{transform:translateY(-140%);opacity:0}}.shout{position:absolute;z-index:6;transform:translate(-50%,-50%);font-family:var(--font-display);font-weight:800;font-size:8cqw;letter-spacing:.08em;color:#fff;white-space:nowrap;pointer-events:none;animation:shoutIn 1.1s ease-out forwards}.shout.bottom{left:50%;top:77%}.shout.right{left:78%;top:50%}.shout.top{left:50%;top:23%}.shout.left{left:22%;top:50%}.shout.riichi{text-shadow:0 0 1.2cqw var(--riichi),0 0 3cqw var(--riichi),0 .4cqw 0 #6b3500}.shout.call{text-shadow:0 0 1.2cqw var(--call),0 0 3cqw var(--call),0 .4cqw 0 #0d2f63}.shout.win{text-shadow:0 0 1.2cqw var(--win),0 0 3cqw var(--win),0 .4cqw 0 #5e130a}@keyframes shoutIn{0%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}@media(prefers-reduced-motion:reduce){.shout{animation:shoutFade 1.1s linear forwards}.ghost{animation-duration:.2s}}@keyframes shoutFade{0%,85%{opacity:1}to{opacity:0}}.tile.selected{transform:translateY(-1.6cqw)}.board.landscape .tile.selected{transform:translateY(-2.4cqh)}.offline-tag{font-size:.85em;color:#fff;background:#6b7686;padding:.1em .6em;border-radius:1em}.screen{min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding-block:32px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));background:radial-gradient(ellipse at 50% 20%,var(--felt-hi) 0%,var(--felt) 45%,var(--felt-lo) 100%)}.panel{width:min(520px,100%);display:flex;flex-direction:column;gap:16px}.logo{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:.12em;margin:8px 0 0;text-align:center}.muted{color:var(--ink-dim);margin:0}.center{text-align:center}.link{font:inherit;color:var(--lcd);background:none;border:0;padding:0 4px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.notice{margin:0;padding:10px 14px;border-radius:10px;background:#e2452f2e;border:1px solid rgba(226,69,47,.5);display:flex;justify-content:space-between;gap:12px}.menu{display:grid;gap:12px}.menu-item{font:inherit;color:var(--ink);text-align:left;display:flex;flex-direction:column;gap:2px;padding:16px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:var(--panel);cursor:pointer}.menu-item b{font-family:var(--font-display);font-size:22px;letter-spacing:.08em}.menu-item small{color:var(--ink-dim)}.menu-item.primary{border-color:var(--gold);box-shadow:inset 4px 0 0 var(--gold)}.menu-item:disabled{opacity:.45;cursor:default}.menu-item:not(:disabled):hover{background:#060e1ccc}.menu-item:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.screen-head{display:flex;align-items:baseline;gap:12px}.screen-head h2{margin:0;font-family:var(--font-display);font-size:26px;letter-spacing:.08em}.card{display:flex;flex-direction:column;gap:14px;padding:18px;border-radius:14px;background:var(--panel)}.card h3{margin:0;font-size:17px}.segmented{display:grid;gap:6px}.seg-label{font-size:13px;color:var(--ink-dim);letter-spacing:.06em}.seg-options{display:flex;flex-wrap:wrap;gap:6px}.seg-options button{font:inherit;flex:1 1 0;min-width:84px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--ink);cursor:pointer}.seg-options button small{color:var(--ink-dim);font-size:12px}.seg-options button.on{background:var(--gold);border-color:var(--gold);color:#2a1c00;font-weight:700}.seg-options button.on small{color:#5a4200}.seg-options button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.abtn.wide{width:100%;justify-content:center;margin-top:0}.abtn:disabled{opacity:.45;cursor:default;filter:none}.field{display:grid;gap:6px}.field span{font-size:13px;color:var(--ink-dim)}.field input,.join input{font:inherit;font-size:18px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#0000004d;color:var(--ink);min-width:0}.join{display:flex;gap:10px}.join input{flex:1;font-family:var(--font-num);letter-spacing:.3em}.room-code{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;border-radius:14px;background:var(--panel)}.room-code b{font-family:var(--font-num);font-size:44px;letter-spacing:.25em;color:var(--lcd)}.seats{list-style:none;margin:0;padding:0;display:grid;gap:8px}.seat{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:var(--panel);font-size:17px}.seat.empty{color:var(--ink-dim);border:1px dashed rgba(255,255,255,.25);background:transparent}.tag{font-size:12px;margin-left:8px;padding:1px 8px;border-radius:999px;background:#ffffff24;font-weight:700}.tag.host{background:var(--gold);color:#2a1c00}.tag.cpu{background:var(--call)}.lobby-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.slot-placeholder{visibility:hidden}.shout.flower{text-shadow:0 0 1.2cqw #d6408a,0 0 3cqw #d6408a,0 .4cqw 0 #5e0f36}.flowers .tile{animation:flowerIn .5s ease-out}@keyframes flowerIn{0%{transform:translateY(-1.5cqw) scale(1.4);opacity:0}to{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){.flowers .tile{animation:none}}.abtn.next small{margin-left:.5em;font-family:var(--font-num);opacity:.7}.reveal-in{animation:revealIn .3s ease-out}@keyframes revealIn{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:none}}.total-in{animation:totalIn .45s cubic-bezier(.2,1.4,.4,1)}@keyframes totalIn{0%{opacity:0;transform:scale(1.4)}to{opacity:1;transform:none}}.flip-in{display:inline-flex;animation:flipIn .45s ease-out}@keyframes flipIn{0%{transform:rotateY(90deg)}to{transform:none}}.yaku li.ura-hit span{color:var(--gold);font-weight:700}.yaku li.ura-miss span{color:var(--ink-dim)}@media(prefers-reduced-motion:reduce){.reveal-in,.total-in,.flip-in{animation:none}}