:root{color-scheme:dark;--bg:#101a18;--surface:#182522;--line:#30423c;--text:#eef2e8;--muted:#a6b8ac;--gold:#e6bc70;--green:#234f40;--red:#f0a095;font-family:Inter,system-ui,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button{cursor:pointer;touch-action:manipulation}button,select,a{-webkit-tap-highlight-color:transparent}button{border:0;color:inherit}button:disabled{cursor:default;opacity:.43}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button{transition:background .15s,transform .12s}button:active:not(:disabled){transform:translateY(1px)}a{color:var(--gold)}h1,h2,h3,p{margin:0}h1{font-size:1.4rem;font-weight:800;letter-spacing:.03em}h2{font-size:1.3rem}h3{font-size:.94rem}.site-header{max-width:1420px;margin:auto;padding:26px 36px 23px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center}.brand-mark{display:grid;place-items:center;width:38px;height:48px;border-radius:5px;background:#f2f0df;color:#b53c33;font-family:serif;font-size:29px;border-bottom:5px solid #cdb479;transform:rotate(-6deg)}.brand-en{display:block;margin-top:3px;font-size:.75rem;letter-spacing:.24em;color:var(--muted)}.header-actions{display:flex;align-items:center;gap:20px}.mode-label{font-size:.85rem;color:var(--muted)}.icon-button{background:transparent;border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-size:.86rem;white-space:nowrap}.icon-button:hover:not(:disabled){background:#283a32}.layout{max-width:1420px;padding:26px 36px 0;display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:26px;margin:auto}.game-column{min-width:0}.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px;font-size:.85rem}.table-label,.toolbar-controls{display:flex;align-items:center;gap:9px}.table-label{color:var(--muted)}.status-light{height:6px;width:6px;border-radius:50%;background:#829084}.status-light.live{background:#e6bc70;box-shadow:0 0 10px #e6bc7044}.separator{color:#52665a}select{background:#20332b;color:var(--text);border:1px solid var(--line);padding:7px 21px 7px 10px;border-radius:6px;font-size:.85rem}.toolbar-controls label{font-size:.8rem;color:var(--muted)}.table{height:460px;position:relative;border:1px solid #36604e;border-radius:16px;background:radial-gradient(ellipse at 50% 45%,#285c48 0%,#194835 50%,#173c2e 100%);box-shadow:0 12px 30px #0003,inset 0 0 0 7px #112d2355;overflow:hidden}.table:before{content:'';position:absolute;inset:22px;border:1px solid #bad2a510;border-radius:6px;pointer-events:none}.opponent{position:absolute;z-index:1;min-width:116px;padding:8px 12px;border-radius:7px;background:#10291fe0;border:1px solid #b6d0aa25}.opponent.north{top:14px;left:50%;transform:translateX(-50%)}.opponent.west{top:154px;left:15px}.opponent.east{top:154px;right:15px}.player-main{display:flex;align-items:center;gap:8px}.seat{display:inline-grid;place-items:center;font-size:.82rem;width:25px;height:25px;border-radius:50%;color:#d1ded1;background:#365b49}.seat.dealer{color:var(--gold);border:1px solid #b18d4c}.player-name{font-size:.8rem;color:#bfd0c0}.player-score{font:600 1.04rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.03em}.opponent-score-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:5px}.cpu-state{font-size:.75rem;color:#a9c2ad}.cpu-state.reach{color:var(--gold)}.small-melds{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px;max-width:160px}.small-melds .tile{width:17px;height:24px}.meld{display:inline-flex;gap:1px;margin-right:5px}.tile{display:inline-flex;position:relative;align-items:center;justify-content:center;border-radius:4px;background:#f6f3e7;border:1px solid #d6d8bb;border-bottom:3px solid #bba77b;box-shadow:0 1px 2px #0003;padding:0;flex-shrink:0;vertical-align:middle;user-select:none}.tile img{width:100%;height:100%;object-fit:contain;pointer-events:none}.river{position:absolute;display:grid;gap:3px;align-content:start;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5e8466 transparent;padding:3px;z-index:1}.river .tile{width:26px;height:35px;border-radius:3px;border-bottom-width:2px}.river .tile.called{opacity:.34}.river .tile.reach-tile{box-shadow:0 0 0 2px var(--gold)}.river .tile.latest{outline:2px solid #d1dda5;outline-offset:1px}.river-north{top:96px;left:50%;transform:translateX(-50%);grid-template-columns:repeat(6,26px);max-height:85px}.river-south{bottom:58px;left:50%;transform:translateX(-50%);grid-template-columns:repeat(6,26px);max-height:113px}.river-west{left:26px;top:248px;grid-template-columns:repeat(4,26px);max-height:143px}.river-east{right:26px;top:248px;grid-template-columns:repeat(4,26px);max-height:143px}.table-center{position:absolute;left:50%;top:46%;transform:translate(-50%,-30%);width:164px;text-align:center;color:#e4ead8}.round-label{font-weight:500;font-size:1.7rem;letter-spacing:.12em}.round-label small{font-size:.8rem;color:#bed0bc;letter-spacing:0;margin-left:7px}.wall-info{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:4px}.wall-info span{font-size:.78rem;color:#b1c7b0}.wall-info strong{font:400 2.6rem ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.1;color:var(--gold)}.wall-meter{height:3px;width:98px;background:#122a21;margin:9px auto 11px;border-radius:3px;overflow:hidden}.wall-meter div{height:100%;background:#d9b66b;transition:width .2s}.dora-line{display:flex;justify-content:center;align-items:center;gap:7px;font-size:.75rem;color:#b1c7b0}.dora-line .tile{width:23px;height:32px}.pot-line{font-size:.75rem;color:#c4d3bd;margin-top:4px}.table-self{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:11px;font-size:.85rem;white-space:nowrap}.table-self strong{font:500 1.2rem ui-monospace,monospace}.table-overlay{position:absolute;inset:0;z-index:3;background:#071b1166;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.table-overlay[hidden]{display:none}.start-card{text-align:center;border:1px solid #83936b77;background:#172b22f5;box-shadow:0 20px 70px #0005;border-radius:12px;padding:28px 35px;max-width:90%}.start-card h2{font-size:1.35rem;margin:12px 0 8px}.start-card p{font-size:.87rem;color:#bfcebc;line-height:1.8;margin-bottom:22px}.eyebrow{font-size:.75rem;letter-spacing:.18em;color:var(--gold);font-weight:600}.primary{background:var(--gold);color:#253020;font-weight:750;padding:13px 27px;border-radius:7px;box-shadow:inset 0 -2px 0 #ae844255}.primary:hover:not(:disabled){background:#f0cb87}.secondary{background:#263d31;border:1px solid #425f49;border-radius:7px;padding:10px 22px;font-weight:650}.secondary:hover:not(:disabled){background:#37533e}.hand-area{padding:19px 0 0}.hand-topline{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px;min-height:26px}.hand-status{font-size:.9rem;color:#e9eedf}.hand-status strong{color:var(--gold)}.muted{color:var(--muted);font-size:.79rem}.hand{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:4px;align-items:end;min-height:65px}.hand .tile{width:100%;height:auto;aspect-ratio:.69;max-height:78px;border-radius:5px;border-bottom-width:5px}.hand .tile:disabled{opacity:1}.hand .tile:not(:disabled):hover{transform:translateY(-5px);background:#fffceb;box-shadow:0 4px 14px #0003}.hand .tile.drawn{outline:2px solid var(--gold);outline-offset:1px;transform:translateY(-5px)}.hand .tile.denied{opacity:.36}.hand .tile.riichi-ok{outline:2px solid var(--gold);outline-offset:1px}.hand .tile.drawn:after{content:'Drawn';position:absolute;bottom:-20px;font-size:.75rem;color:var(--gold);white-space:nowrap}.your-melds{display:flex;justify-content:flex-end;gap:10px;min-height:14px;margin-top:9px}.your-melds:empty{margin-top:0}.your-melds .tile{width:31px;height:43px}.action-bar{margin-top:20px;display:flex;gap:10px;align-items:stretch}.draw-button{min-width:160px;flex:1;font-size:1.13rem;display:flex;align-items:center;justify-content:center;gap:16px}.draw-button small{font-size:.76rem;font-weight:500}.riichi-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.riichi-button span{font-size:.75rem;color:#a8bba8;font-weight:400}.riichi-button.armed{background:#e6bc70;color:#293220}.switch-label{display:flex;align-items:center;gap:10px;font-size:.85rem;padding:0 6px;cursor:pointer;white-space:nowrap}.switch-label small{display:block;font-size:.75rem;color:var(--muted);margin-top:5px}.switch-label input{position:absolute;opacity:0;width:36px;height:26px}.switch{display:inline-block;width:32px;height:19px;border-radius:20px;background:#41594a;position:relative;transition:background .15s}.switch:before{content:'';position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#cbd5c6;transition:transform .15s}.switch-label input:checked+.switch{background:var(--gold)}.switch-label input:checked+.switch:before{transform:translateX(13px);background:#28402e}.switch-label input:focus-visible+.switch{outline:3px solid var(--gold);outline-offset:3px}.hand-footer{display:flex;justify-content:space-between;margin-top:12px;font-size:.75rem;color:#a2b3a6}.recent-event{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;font-size:.85rem;color:#bbccba;min-height:46px}.reservation-panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;align-self:start;margin-top:50px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-heading h2{margin-top:7px}.panel-heading h2 span{display:inline-grid;place-items:center;background:#31493a;color:var(--gold);font:500 .85rem ui-monospace,monospace;width:25px;height:25px;border-radius:5px;vertical-align:middle;margin-left:5px}.text-button{background:none;color:var(--muted);font-size:.75rem;padding:8px 0}.text-button:hover{color:var(--gold)}.panel-description{font-size:.85rem;color:var(--muted);line-height:1.8;margin-top:17px}.reservation-state{font-size:.8rem;border:1px solid #465d45;border-radius:5px;padding:9px 10px;margin-top:14px;color:#d8e5cd;background:#25372b}.reservation-state.holding{border-color:#765f3e;background:#3c3423;color:#edcf9c}.active-reservations{display:flex;flex-direction:column;gap:5px;margin-top:12px}.active-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:#2d4534;border-radius:5px;font-size:.8rem}.active-item>span{display:flex;align-items:center;gap:8px}.active-item .tile{width:23px;height:32px}.active-item button{background:transparent;font-size:1.2rem;color:#c3d1bb;padding:5px 7px}.active-empty{font-size:.8rem;line-height:1.7;padding:6px 0;color:#98ac9c}.candidate-heading{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.filters{display:flex;gap:5px;margin-top:12px}.filters button{background:transparent;padding:7px 13px;border-radius:5px;color:var(--muted);font-size:.8rem}.filters button.selected{background:#334b3b;color:#f0efd8}.call-options{max-height:368px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#475d48 transparent;margin-top:11px;padding-right:2px}.call-option{display:flex;align-items:center;justify-content:space-between;gap:4px;border-bottom:1px solid #ffffff08;padding:11px 0}.call-target{display:flex;gap:8px;align-items:center}.call-target>.tile{width:29px;height:41px}.call-type{font-size:.75rem;color:#c1d0bd;display:flex;flex-direction:column;gap:4px}.call-type small{color:#91a892;font-size:.75rem}.call-meld{display:flex;gap:1px}.call-meld .tile{width:22px;height:32px}.reserve-button{font-size:.75rem;border:1px solid #556a4b;color:#d9dfca;background:transparent;border-radius:5px;padding:9px 11px;white-space:nowrap}.reserve-button.active{background:#e4bd70;color:#263222;border-color:#e4bd70}.reservation-note{font-size:.75rem;color:#9ab19e;line-height:1.85;margin-top:17px}.event-log{margin-top:20px;border-top:1px solid var(--line);padding-top:15px;color:var(--muted);font-size:.8rem}.event-log summary{cursor:pointer}.event-log ol{padding-left:22px;line-height:1.8;max-height:150px;overflow:auto}.site-footer{max-width:1420px;margin:22px auto 0;padding:18px 36px 25px;color:#819988;font-size:.75rem;display:flex;justify-content:space-between}.toast{position:fixed;top:18px;left:50%;transform:translate(-50%,-150%);z-index:10;background:#ececdb;color:#213228;box-shadow:0 6px 30px #0004;padding:14px 22px;border-radius:9px;opacity:0;transition:.2s;max-width:90vw;font-size:.95rem;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}dialog{color:var(--text);background:#17281f;border:1px solid #657555;border-radius:14px;padding:28px;width:min(680px,calc(100vw - 28px));max-height:90dvh;overflow-y:auto;box-shadow:0 30px 130px #0008}dialog::backdrop{background:#040d09bf;backdrop-filter:blur(5px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:23px}.dialog-header h2{margin-top:5px}.close-button{background:#2d4232;width:38px;height:38px;border-radius:50%;font-size:1.5rem}.rules-content{line-height:1.9;color:#c6d4bf}.rule-intro{font-size:1.35rem;color:#f0f0db;margin-bottom:12px;font-weight:700}.rules-content p{margin:12px 0;font-size:.93rem}.rules-content h3{margin-top:24px;font-size:1rem;color:var(--gold)}.rules-content ol{padding-left:25px;font-size:.93rem}.credits{font-size:.8rem;border-top:1px solid var(--line);margin-top:20px;padding-top:15px}.credits p{font-size:.8rem}.dialog-bottom{width:100%;margin-top:22px}.result-hero{text-align:center;padding:9px 0 22px}.result-hero h2{font-size:2.5rem;margin:12px 0 8px;font-weight:700;letter-spacing:.13em;color:var(--gold)}.result-hero p{color:#c6d5c0;font-size:.94rem}.result-points{font:500 2rem ui-monospace,monospace;margin-top:14px}.result-points small{font:400 .8rem system-ui;color:#bdcdb9}.result-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;padding:12px 0}.result-tiles .tile{width:31px;height:44px}.result-tiles .winning{outline:2px solid var(--gold)}.result-tiles .meld{margin-left:6px}.yaku-list{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:9px 0 20px}.yaku-list span{background:#2d4331;color:#dce7cf;font-size:.85rem;padding:5px 10px;border-radius:4px}.result-scores{border-top:1px solid var(--line);margin-top:12px}.result-row{display:grid;grid-template-columns:35px 1fr 80px 95px;align-items:center;gap:8px;padding:13px 5px;border-bottom:1px solid var(--line);font-size:.9rem}.result-row.you{color:var(--gold)}.result-row strong,.result-row .delta{font-family:ui-monospace,monospace;text-align:right}.delta.positive{color:#bbe3a2}.delta.negative{color:var(--red)}.result-buttons{display:flex;gap:10px;margin-top:24px}.result-buttons .primary{flex:1}.result-note{font-size:.8rem;color:var(--muted);line-height:1.7;margin:12px 0}.inspect-button{background:transparent;color:#c4d0ba;text-decoration:underline;padding:10px;font-size:.85rem}.result-rank{font-size:1.1rem;color:var(--gold);margin-top:12px}.no-options{font-size:.85rem;color:var(--muted);line-height:1.8;padding:20px 0}.no-options strong{display:block;color:#d6e0cd;font-weight:500;margin-bottom:7px}
@media(min-width:1400px){.table{height:510px}.opponent.west,.opponent.east{top:172px}.river-west,.river-east{top:270px}.river-north{top:105px;max-height:105px}.river-south{max-height:140px}}
@media(max-width:1100px){.layout{padding:22px;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.site-header{padding:22px}.reservation-panel{padding:18px}.table{height:445px}.opponent{min-width:103px;padding:8px}.opponent.west{left:10px}.opponent.east{right:10px}.river-west{left:15px;grid-template-columns:repeat(3,26px)}.river-east{right:15px;grid-template-columns:repeat(3,26px)}.draw-button{min-width:105px}.draw-button small{display:none}.switch-label{gap:6px}.table-center{width:132px}.call-meld .tile{width:19px;height:29px}.reserve-button{padding:8px}.site-footer{padding:18px 22px}}
@media(max-width:850px){.layout{grid-template-columns:1fr;max-width:730px;gap:0}.reservation-panel{margin-top:23px}.table{height:450px}.opponent.west{left:22px}.opponent.east{right:22px}.river-west{left:28px;grid-template-columns:repeat(4,26px)}.river-east{right:28px;grid-template-columns:repeat(4,26px)}.header-actions{gap:10px}.mode-label{display:none}.hand .tile{max-height:76px}.call-options{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;max-height:350px}.active-reservations{flex-flow:row wrap}.active-item{gap:15px}.candidate-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.filters{margin-top:0}.reservation-note{max-width:580px}.hand-footer{font-size:.8rem}.panel-description{font-size:.9rem}.reservation-state{font-size:.85rem}.site-footer{max-width:730px}}
@media(max-width:520px){.site-header{padding:16px;gap:10px}.brand{gap:10px}.brand-mark{width:30px;height:39px;font-size:24px;border-bottom-width:4px}.brand-en{font-size:.75rem;letter-spacing:.16em}h1{font-size:1.16rem}.desktop-text{display:none}.header-actions{gap:7px}.icon-button{padding:8px 10px;font-size:.77rem}.layout{padding:15px 12px 0}.table-toolbar{font-size:.76rem;gap:7px;margin-bottom:10px}.table-label{gap:6px}.toolbar-controls{gap:6px}.toolbar-controls label{display:none}select{font-size:.76rem;max-width:85px}.table{height:375px;border-radius:11px}.table:before{inset:12px}.opponent{min-width:90px;padding:7px 8px}.opponent.north{top:10px}.opponent.west{top:136px;left:8px}.opponent.east{top:136px;right:8px}.player-main{gap:6px}.seat{width:21px;height:21px;font-size:.75rem}.player-name{font-size:.75rem}.player-score{font-size:.89rem}.cpu-state{font-size:.75rem}.opponent-score-line{gap:4px}.river .tile{width:21px;height:29px;border-radius:2px}.river{gap:2px;padding:2px}.river-north{top:82px;grid-template-columns:repeat(6,21px);max-height:66px}.river-south{bottom:52px;grid-template-columns:repeat(6,21px);max-height:93px}.river-west{top:226px;left:10px;grid-template-columns:repeat(3,21px);max-height:112px}.river-east{top:226px;right:10px;grid-template-columns:repeat(3,21px);max-height:112px}.table-center{width:113px;top:44%;transform:translate(-50%,-10%)}.round-label{font-size:1.25rem}.round-label small{font-size:.75rem}.wall-info{gap:6px}.wall-info strong{font-size:1.9rem}.wall-info span{font-size:.75rem}.wall-meter{margin:6px auto;width:73px}.dora-line{font-size:.75rem;gap:5px}.dora-line .tile{width:19px;height:26px}.pot-line{font-size:.75rem}.table-self{font-size:.8rem;bottom:14px;gap:8px}.table-self strong{font-size:1.1rem}.small-melds{max-width:78px;gap:2px}.small-melds .tile{width:12px;height:17px}.small-melds .meld{margin-right:0}.hand-area{padding-top:15px}.hand-topline{margin-bottom:12px;gap:5px}.hand-status{font-size:.85rem}.muted{font-size:.75rem}.hand{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px 5px;padding:0 1px;min-height:123px}.hand .tile{aspect-ratio:.88;max-height:65px;border-radius:4px;border-bottom-width:4px}.hand .tile.drawn{transform:none}.hand .tile.drawn:after{content:''}.hand .tile img{max-width:86%}.your-melds{min-height:0;margin-top:9px}.your-melds:empty{margin:0}.your-melds .tile{width:26px;height:36px}.action-bar{margin-top:15px;gap:8px}.draw-button{min-width:90px;font-size:1.13rem;padding:15px 12px}.riichi-button{padding:8px 17px;font-size:.85rem}.switch-label{font-size:.76rem;padding:0 2px;gap:6px}.switch-label small{font-size:.75rem}.switch{width:28px;height:18px}.switch:before{width:12px;height:12px}.switch-label input:checked+.switch:before{transform:translateX(10px)}.hand-footer{font-size:.75rem;line-height:1.6}.keyboard-tip{display:none}.recent-event{font-size:.8rem;line-height:1.7;margin-top:13px;padding-top:11px}.reservation-panel{padding:20px 16px;margin-top:15px}.call-options{display:block;max-height:330px}.call-meld .tile{width:25px;height:35px}.call-target>.tile{width:31px;height:43px}.reserve-button{font-size:.82rem;padding:11px 17px}.call-type{font-size:.83rem}.call-type small{font-size:.75rem}.candidate-heading{display:block}.filters{margin-top:13px}.filters button{font-size:.84rem}.panel-description{font-size:.87rem}.reservation-note{font-size:.76rem}.active-item{gap:12px}.site-footer{padding:20px 15px;font-size:.75rem;gap:10px}.start-card{padding:24px 22px}.start-card h2{font-size:1.18rem}.start-card p{font-size:.8rem}.table-toolbar .icon-button{font-size:.75rem;padding:8px}.result-tiles .tile{width:27px;height:38px}.result-row{grid-template-columns:23px 1fr 69px 76px;gap:5px;font-size:.82rem}dialog{padding:23px 18px}.result-hero h2{font-size:2.1rem}.result-buttons{flex-direction:column}.result-hero{padding-bottom:10px}.rule-intro{font-size:1.2rem}.toast{font-size:.85rem;width:max-content;max-width:92vw;text-align:center}.rules-content{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.reserve-button,.filters button,.text-button{font-size:.875rem}.icon-button,select{min-height:36px}.hand-footer,.reservation-note{font-size:.8125rem}.call-type{font-size:.875rem}.table-toolbar{flex-wrap:wrap}.toolbar-controls{margin-left:auto}.table-self{max-width:95%}

.table{height:500px}.table-center{top:50%;transform:translate(-50%,-50%)}.table-center .round-label{font-size:1.4rem}.table-center .wall-info strong{font-size:2.2rem}.table-center .wall-meter{margin:6px auto}.table-dora{position:absolute;top:24px;left:24px;display:flex;align-items:center;gap:9px;color:#b7cbb4;font-size:.75rem}.table-dora .tile{width:26px;height:36px}.river-north{max-height:85px}
@media(max-width:850px){.table{height:480px}}
@media(max-width:520px){.table{height:400px}.table-center{top:52%}.table-center .round-label{font-size:1.25rem}.table-center .wall-info strong{font-size:1.9rem}.table-dora{top:22px;left:14px;flex-direction:column;gap:5px}.table-dora .tile{width:22px;height:31px}.river-north{max-height:66px}.river-south{max-height:64px}.river-west,.river-east{max-height:130px}.reserve-button{min-height:44px}.active-item button{min-width:40px;min-height:38px}.call-options .call-type small{font-size:.75rem}}
/* Hand-driven reservations share the draw/discard controls on every viewport. */
.layout{display:block;max-width:1060px}.game-column{width:100%}.hand-area{position:relative}.action-bar{display:grid;grid-template-columns:1.2fr 1fr 1fr}.reserve-hand-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:59px;padding:10px 12px;font-size:1rem;border-color:#97804f;color:#ead09c}.reserve-hand-button small{font-size:.75rem;font-weight:400;color:#b9c9b5}.reserve-hand-button.armed{background:var(--gold);color:#253020;border-color:var(--gold)}.reserve-hand-button.armed small{color:#45543d}.hand-preferences{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:13px 0 8px}.hand-preferences .switch-label{padding:0;font-size:.875rem}.hand-preferences .switch-label>span:last-child{display:flex;gap:9px;align-items:center}.hand-preferences .switch-label small{margin:0}.hand-preferences .reservation-state{margin:0;padding:0;border:0;background:transparent;color:var(--muted);font-size:.8125rem;text-align:right}.hand-preferences .reservation-state.holding{color:#ddc48d}.reservation-selection-hint{margin:5px 0 9px;font-size:.875rem;line-height:1.7;color:#eed08d}.reservation-selection-hint[hidden]{display:none}.hand.selecting-reservation{border-radius:7px;outline:1px solid #c8a76566;outline-offset:6px}.hand .tile.reservation-selected{outline:3px solid var(--gold);outline-offset:1px;transform:translateY(-5px);background:#fff1ca}.tile-selection-check{position:absolute;top:2px;right:2px;background:#b28229;color:#fff;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:14px;font-weight:800;pointer-events:none}.inline-reservations{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:9px;margin-top:8px;min-height:62px}.inline-reservation-heading{display:flex;flex-direction:column;flex-shrink:0;gap:1px;font-size:.8125rem;color:var(--muted)}.inline-reservation-heading strong{color:var(--gold);font-family:ui-monospace,monospace;font-weight:500}.inline-reservation-heading .text-button{font-size:.75rem;padding:3px 0;text-align:left}.inline-reservations .active-reservations{display:flex;flex-flow:row nowrap;align-items:center;gap:7px;margin:0;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#66754f transparent;padding:3px 1px 5px;min-width:0;max-width:100%;min-height:46px}.inline-reservations .active-item{flex-shrink:0;gap:5px;padding:3px 3px 3px 6px}.inline-reservations .active-item>span{gap:5px;white-space:nowrap}.inline-reservations .active-item button{min-width:34px;min-height:36px;padding:3px}.inline-reservations .active-empty{padding:0;font-size:.8125rem;line-height:1.6}.site-footer{max-width:1060px}.event-log{margin-top:12px;padding-top:12px}.hand-footer{margin-top:9px}
@media(max-width:850px){.layout{max-width:730px}.site-footer{max-width:730px}}
@media(max-width:520px){.action-bar{grid-template-columns:1.1fr .9fr 1.15fr;gap:7px}.action-bar .draw-button{min-width:0;padding:12px 6px}.action-bar .riichi-button{padding:9px 6px;font-size:.9375rem}.reserve-hand-button{padding:9px 5px;font-size:.9375rem;min-height:57px}.reserve-hand-button small{font-size:.75rem}.hand-preferences{align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px}.hand-preferences .switch-label>span:last-child{gap:5px}.hand-preferences .reservation-state{font-size:.75rem;text-align:left}.inline-reservations{gap:10px;padding-top:7px;margin-top:6px}.inline-reservations .active-item{font-size:.8125rem}.hand .tile.reservation-selected{transform:translateY(-3px)}.reservation-selection-hint{font-size:.8125rem;line-height:1.65}.tile-selection-check{width:18px;height:18px;font-size:12px}.hand-footer{font-size:.75rem}}
/* One clear timer beside the hand; updates do not replace tile buttons. */
.hand-meta{display:flex;align-items:center;gap:13px;flex-shrink:0}.action-timer{display:inline-flex;align-items:baseline;gap:5px;font-size:.875rem;color:#e9cc8c;white-space:nowrap;font-variant-numeric:tabular-nums}.action-timer strong{font:700 1.15rem ui-monospace,SFMono-Regular,Consolas,monospace;min-width:2.4ch}.action-timer.urgent{color:#ff9d8d}.action-timer[hidden],.action-time-track[hidden]{display:none}.action-time-track{height:3px;background:#2d4334;overflow:hidden;border-radius:2px;margin:-5px 0 13px}.action-time-track>div{height:100%;background:var(--gold);transition:width .1s linear}.action-time-track.urgent>div{background:#f48d7b}.opponent.in-riichi{border-color:#efb15e;background:#493226;box-shadow:0 0 0 2px #da9b493b}.opponent.in-riichi .cpu-state.reach{font-weight:800;color:#ffe6b1}.opponent.in-riichi .player-name{color:#ffdeb0}
/* Sideways declaration tiles get their own width, so adjacent tiles never overlap. */
.river{--river-w:26px;--river-h:35px;--river-gap:3px;--river-pad:6px;--river-columns:4;display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;gap:var(--river-gap);width:calc(var(--river-columns)*var(--river-w) + (var(--river-columns) - 1)*var(--river-gap) + var(--river-h) - var(--river-w) + var(--river-pad))}.river-north,.river-south{--river-columns:6}.river .river-slot{width:var(--river-w);height:var(--river-h);display:grid;place-items:center;flex:none}.river .river-slot.riichi-slot{width:var(--river-h)}.river .tile{width:var(--river-w);height:var(--river-h)}.river .tile.reach-tile{transform:rotate(90deg);box-shadow:0 0 0 1px #f3c578}.river .tile.reach-tile.called{opacity:.7}
@media(max-width:1100px){.river-west,.river-east{--river-columns:3}}
@media(max-width:850px){.river-west,.river-east{--river-columns:4}}
@media(max-width:520px){.hand-meta{gap:0}#draw-count{display:none}.hand-topline{min-height:30px}.hand-status{font-size:.8125rem;line-height:1.6;min-width:0}.action-timer{font-size:.8125rem;gap:4px}.action-timer strong{font-size:1.0625rem}.river{--river-w:21px;--river-h:29px;--river-gap:2px;--river-pad:4px}.river-west,.river-east{--river-columns:3}}
/* Online controls live above the existing table and open one compact lobby. */
[hidden]{display:none!important}.mode-toolbar{margin:0 0 15px}.online-entry{display:flex;align-items:center;gap:13px;width:100%;text-align:left;border:1px solid #6f7850;border-radius:9px;padding:13px 17px;background:linear-gradient(115deg,#304634,#20352d);color:#efdfb9;font-weight:700}.online-entry>span:nth-child(2){flex:1}.online-entry small{display:block;font-size:.75rem;font-weight:400;color:#aebeab;margin-top:4px}.online-entry-icon{font-size:1.45rem;color:var(--gold)}.online-entry:hover{background:#344d38}.online-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.8125rem;padding:4px 0 13px;color:#c5d5bd}#online-room-label{font:600 .75rem ui-monospace,monospace;letter-spacing:.08em;color:var(--gold)}#connection-label{flex:1;font-variant-numeric:tabular-nums}.online-strip .text-button{padding:5px 0}.connection-error #connection-label{color:#ffae96}#online-dialog{max-width:570px}.online-field{display:grid;gap:9px;font-size:.875rem;color:#c5d6c0;margin-bottom:24px}.online-field input,.join-row input{min-width:0;width:100%;background:#0f201a;border:1px solid #506447;color:#f4f2df;border-radius:7px;padding:12px 13px;font-size:1rem}.online-field input::placeholder,.join-row input::placeholder{color:#8fa58d}.online-mode-card{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:18px 0 13px;border-top:1px solid var(--line)}.online-mode-card h3{font-size:1.05rem;margin:7px 0}.online-mode-card p,.online-note{color:#aebeab;font-size:.8125rem;line-height:1.8}.online-mode-card .primary{flex-shrink:0;font-size:.875rem;padding:12px 18px}.join-row{display:flex;gap:9px;margin:0 0 22px}.join-row input{text-transform:uppercase;letter-spacing:.1em}.join-row input::placeholder{letter-spacing:normal}.join-row .secondary{padding:10px 20px}.random-card{padding-top:21px;margin-bottom:18px}.online-error{font-size:.875rem;line-height:1.7;color:#ffb7a5;background:#633c2838;border-radius:6px;padding:10px 12px;margin-bottom:16px}.online-error:empty{display:none}.room-code-block{display:grid;text-align:center;gap:9px;background:#0f2118;border:1px solid #485e40;border-radius:10px;padding:19px;margin:18px 0}.room-code-block>span{font-size:.8125rem;color:var(--muted)}.room-code-block strong{font:700 2rem ui-monospace,monospace;letter-spacing:.2em;color:var(--gold)}.room-copy-buttons{display:flex;gap:8px;justify-content:center;margin-top:4px}.room-copy-buttons button{font-size:.8125rem;padding:10px 14px}.lobby-seats{display:grid;gap:7px;margin:18px 0}.lobby-seat{display:flex;align-items:center;gap:12px;border:1px dashed #40573f;border-radius:7px;padding:11px 13px;color:#8fa58d}.lobby-seat.occupied{border-style:solid;background:#21382a;color:#eff0db}.lobby-seat>div{flex:1;min-width:0}.lobby-seat strong{display:block;font-size:.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lobby-seat small{display:block;margin-top:5px;color:#a9bea2;font-size:.75rem}.seat-dot{width:7px;height:7px;background:#53604b;border-radius:50%}.seat-dot.connected{background:#bad891}.lobby-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px}.lobby-actions .text-button{min-height:42px}.busy{pointer-events:none;opacity:.6}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.player-main{min-width:0}.player-name{max-width:125px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.result-row>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){.mode-toolbar{margin-bottom:12px}.online-entry{padding:11px 13px;font-size:.9rem}.online-entry small{font-size:.75rem}.online-mode-card{gap:10px;align-items:flex-start}.online-mode-card .primary{padding:11px 12px;font-size:.8125rem;align-self:center}.online-mode-card h3{font-size:1rem}.online-mode-card p{font-size:.75rem}.room-copy-buttons button{padding:10px;font-size:.8125rem}.player-name{max-width:66px}.opponent{max-width:124px}.online-strip{gap:8px;font-size:.75rem}.online-strip .text-button{font-size:.75rem}}
/* Final standings stay above the last hand's optional details. */
.result-column-labels{font-size:.8125rem;color:var(--muted);padding-top:10px;padding-bottom:10px}.result-column-labels>span:nth-last-child(-n+2){text-align:right}.final-hero{padding:4px 0 12px}.final-hero h2{font-size:1.35rem;letter-spacing:.06em;margin:10px 0 5px;color:var(--text)}.final-placement{font-size:1rem;color:#d8e4cd}.final-placement strong{font:700 2.5rem ui-monospace,monospace;color:var(--gold);vertical-align:baseline}.final-total{display:flex;align-items:baseline;justify-content:center;gap:13px;margin:10px 0 0}.final-total>span{font-size:.875rem;color:var(--muted)}.final-total>strong{font:650 2rem ui-monospace,monospace;letter-spacing:.02em}.final-total small{font:400 .875rem system-ui;margin-left:7px}.final-result .result-scores{margin-top:7px}.final-result .result-row.you{background:#ccb16a14}.final-result .result-row strong{font-size:1rem}.final-hand-details{border-bottom:1px solid var(--line);padding:13px 0;margin-top:4px}.final-hand-details summary{cursor:pointer;color:#baccb2;font-size:.875rem}.final-hand-details .result-points{text-align:center}.result-confirm-hint{font-size:.875rem;line-height:1.7;min-height:1.7em;text-align:center;color:var(--muted);margin:17px 0 0;font-variant-numeric:tabular-nums}.result-confirm-hint.waiting{color:#edd09a}.result-buttons{margin-top:12px}.result-buttons button:disabled{pointer-events:none;text-decoration:none}#result-title:focus-visible{outline:0}
@media(max-width:520px){.result-column-labels{font-size:.75rem}.final-result .result-row{grid-template-columns:30px minmax(0,1fr) 65px 83px;font-size:.875rem}.final-result .result-row strong{font-size:.95rem}.final-result .result-row.you{margin:0 -4px;padding-left:9px;padding-right:9px}.final-placement strong{font-size:2.3rem}.final-total>strong{font-size:1.9rem}.result-confirm-hint{font-size:.8125rem}.final-result .result-buttons{flex-direction:column-reverse}.final-result .result-buttons .inspect-button{padding:7px;min-height:36px}.final-result .result-buttons .primary{min-height:46px}}

.match-countdown{font-size:1rem;color:var(--gold);font-weight:650;line-height:1.7;border:1px solid #6c6b43;background:#3b3c262e;border-radius:7px;padding:12px 14px;margin:16px 0;font-variant-numeric:tabular-nums}