:root{--bg:#f4f2ec;--surface:#fff;--text:#1d1f1e;--muted:#6b706d;--border:#d9d6cc;--accent:#1f6b4a;--accent-text:#fff;--win:#b3261e;--plus:#1f6b4a;--minus:#b3261e;--felt:#1f5c42;--felt-text:#e8f1ec;--tile-face:#fbf8ef;--tile-edge:#c9c2ad;--tile-back:#2f6f9f;--tile-w:clamp(18px, 3.3vw, 40px);--tile-h:calc(var(--tile-w) * 1.36);--tile-w-small:clamp(13px, 2.1vw, 26px);--tile-h-small:calc(var(--tile-w-small) * 1.36);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121514;--surface:#1d2120;--text:#e7ebe9;--muted:#9aa3a0;--border:#2f3533;--accent:#3fa37a;--accent-text:#08130e;--felt:#173f2f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#121514;--surface:#1d2120;--text:#e7ebe9;--muted:#9aa3a0;--border:#2f3533;--accent:#3fa37a;--accent-text:#08130e;--felt:#173f2f;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;font-size:15px}h1,h2{margin:0 0 8px;font-size:1.15rem}.muted{color:var(--muted)}.error{color:var(--win)}.center-message{height:100%;color:var(--muted);place-items:center;display:grid}.button{border:1px solid var(--border);background:var(--surface);min-height:36px;color:var(--text);font:inherit;cursor:pointer;border-radius:8px;padding:6px 14px}.button:disabled{opacity:.5;cursor:default}.button--primary,.button--on{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}.button--win{background:var(--win);border-color:var(--win);color:#fff;font-weight:700}.link-button{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;text-decoration:underline}.field{gap:4px;display:grid}input,select,textarea{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:8px}.stack{gap:12px;display:grid}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.check{align-items:center;gap:4px;display:inline-flex}.panel-page{place-items:start center;min-height:100%;padding:24px 16px;display:grid}.panel{border:1px solid var(--border);background:var(--surface);border-radius:12px;width:min(560px,100%);padding:20px}.player-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;display:grid}.invite{gap:8px;display:grid}.invite__code{letter-spacing:.2em;font-size:2rem;font-weight:700}.list{margin:0;padding-left:20px}.app{flex-direction:column;height:100%;display:flex}.topbar{border-bottom:1px solid var(--border);background:var(--surface);align-items:center;gap:12px;padding:4px 12px;font-size:.85rem;display:flex}.topbar__title{font-weight:700}.topbar__me{margin-left:auto}.conn--open{color:var(--plus)}.conn--connecting,.conn--closed{color:var(--win)}.toast{background:var(--win);color:#fff;justify-content:center;gap:12px;padding:6px 12px;display:flex}.lobby-page{justify-items:center;gap:16px;padding:16px;display:grid;overflow:auto}.seats{gap:8px;margin:12px 0;padding:0;list-style:none;display:grid}.seats__item{align-items:center;gap:12px;min-height:40px;display:flex}.seats__pos{width:3em;color:var(--muted)}.tile{width:var(--tile-w);height:var(--tile-h);border:1px solid var(--tile-edge);background:var(--tile-face);color:#1d1f1e;font:inherit;font-size:calc(var(--tile-w) * .5);vertical-align:bottom;-webkit-user-select:none;user-select:none;border-bottom-width:3px;border-radius:4px;flex-direction:column;justify-content:center;align-items:center;margin:0 1px;padding:0;line-height:1.05;display:inline-flex}.tile--small{width:var(--tile-w-small);height:var(--tile-h-small);font-size:calc(var(--tile-w-small) * .5);border-bottom-width:2px}.tile--sideways{margin:0 calc(var(--tile-w-small) * .18);transform:rotate(90deg)}.tile--selectable{cursor:pointer}.tile--selectable:hover{transform:translateY(-6px)}.tile--highlight{box-shadow:0 0 0 2px var(--accent)}.tile--red .tile__num,.tile--red .tile__suit{color:#d1261b}.tile--red{background:#fff1ee}.tile--gold{background:#fff4cf}.tile__suit{font-size:.75em}.tile__suit--m{color:#b3261e}.tile__suit--p{color:#1c5fa0}.tile__suit--s{color:#1f7a4a}.tile__honor{font-size:1.15em;font-weight:700}.tile__honor--6{color:#1f7a4a}.tile__honor--7{color:#b3261e}.tile__honor--5{border:2px solid #1c5fa0;border-radius:2px;width:60%;height:50%}.board{background:var(--felt);color:var(--felt-text);flex:1;grid-template:"left top right""left center right"minmax(0,1fr)"bottom bottom bottom"/minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:6px;padding:6px;display:grid;position:relative;overflow:hidden}.seat{border-radius:8px;flex-direction:column;gap:4px;min-width:0;padding:4px;display:flex}.seat--active{box-shadow:inset 0 0 0 2px #f2c94c}.seat--top{grid-area:top}.seat--left{grid-area:left}.seat--right{grid-area:right}.seat--bottom{grid-area:center;justify-content:flex-end}.seat__info{flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;display:flex}.seat__name{font-weight:700}.seat__hand{flex-wrap:wrap;align-items:flex-end;gap:1px;display:flex}.river{grid-template-columns:repeat(6, var(--tile-w-small));align-content:start;gap:2px 3px;display:grid}.wind{background:#ffffff26;border-radius:4px;place-items:center;width:1.5em;height:1.5em;font-weight:700;display:inline-grid}.wind--dealer{color:#1d1f1e;background:#f2c94c}.badge{background:var(--win);color:#fff;border-radius:999px;padding:1px 6px;font-size:.75rem}.badge--soft{background:#fff3}.center{background:#00000040;border-radius:10px;grid-area:center;place-self:start center;justify-items:center;gap:4px;padding:6px 12px;font-size:.85rem;display:grid}.center .muted,.seat .muted{color:#e8f1ecb3}.center__round{font-weight:700}.center__dora{align-items:center;gap:4px;display:flex}.drawn{margin-left:calc(var(--tile-w) * .4)}.melds{gap:6px;margin-left:auto;display:inline-flex}.meld{align-items:flex-end;display:inline-flex}.my-area{grid-area:bottom;gap:4px;display:grid}.my-area__info{align-items:center;gap:8px;font-size:.85rem;display:flex}.hand{min-height:calc(var(--tile-h) + 8px);align-items:flex-end;padding-top:8px;display:flex}.actions{flex-wrap:wrap;align-items:center;gap:6px;min-height:36px;display:flex}.hint{color:#e8f1eccc;font-size:.85rem}.overlay{background:#00000073;place-items:center;padding:16px;display:grid;position:fixed;inset:0;overflow:auto}.result{gap:12px;max-height:100%;display:grid;overflow:auto}.result__hand{flex-wrap:wrap;align-items:flex-end;gap:2px;display:flex}.yaku-list{gap:2px;margin:0;padding:0;list-style:none;display:grid}.yaku-list li{justify-content:space-between;display:flex}.result__summary{margin:0;font-weight:700}.deltas{border-collapse:collapse;width:100%}.deltas th,.deltas td{border-bottom:1px solid var(--border);text-align:right;padding:4px 6px}.deltas th:first-child,.deltas td:nth-child(2){text-align:left}.plus{color:var(--plus)}.minus{color:var(--minus)}@media (height<=480px){.topbar{padding:2px 8px}.board{gap:2px;padding:2px 6px}.seat__info{font-size:.75rem}}.table3d{background:#10241b;flex:1;min-height:0;position:relative}.table3d canvas{touch-action:none}.table3d__bottom{pointer-events:none;color:var(--felt-text);position:absolute;inset:0}.table3d__bottom .actions{right:12px;bottom:calc(26% + env(safe-area-inset-bottom));pointer-events:auto;flex-direction:column;align-items:flex-end;position:absolute}.table3d__bottom .actions .button{min-width:6.5em;box-shadow:0 2px 8px #00000059}.table3d__me{left:12px;bottom:calc(8px + env(safe-area-inset-bottom));cursor:pointer;pointer-events:auto;-webkit-user-select:none;user-select:none;background:#00000080;border-radius:999px;align-items:center;gap:8px;padding:3px 10px;font-size:.85rem;display:flex;position:absolute}.table3d__status{bottom:calc(8px + env(safe-area-inset-bottom));color:#e8f1ec;text-align:center;pointer-events:none;background:#00000080;border-radius:999px;max-width:calc(100% - 200px);padding:3px 12px;font-size:.8rem;position:absolute;left:50%;transform:translate(-50%)}.table3d__status:empty{display:none}.center3d{color:#e8f1ec;white-space:nowrap;pointer-events:none;-webkit-user-select:none;user-select:none;background:#00000073;border-radius:8px;justify-items:start;gap:2px;min-width:7.5em;padding:6px 10px;font-size:.8rem;display:grid;position:absolute;top:8px;left:8px}.center3d__round{font-size:.95rem;font-weight:700}.plate3d{will-change:transform;color:#e8f1ec;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:#00000080;border-radius:999px;align-items:center;gap:6px;padding:3px 8px;font-size:.8rem;display:flex;position:absolute;top:0;left:0}.plate3d__diff{color:#7fe3ff}.plate3d--active{box-shadow:0 0 0 2px #f2c94c}.result__buttons{background:var(--surface);padding-top:8px;position:sticky;bottom:0}.meld__stack{flex-direction:column;align-items:center;display:inline-flex}.table3d__status--spectator{bottom:calc(44px + env(safe-area-inset-bottom))}.topbar__color{align-items:center;gap:4px;display:inline-flex}.topbar__color select{padding:2px 4px;font-size:.8rem}.tile{border-color:#d8d1bd;border-bottom:3px solid var(--tile-back,#1f5fbf);background:#f7f4ea;position:relative;overflow:hidden}.tile--small{border-bottom-width:2px}.tile__face{background-repeat:no-repeat;position:absolute;inset:0}.tile--back{background:var(--tile-back,#1f5fbf);border-color:color-mix(in srgb, var(--tile-back,#1f5fbf) 70%, black)}.tile--red,.tile--gold{background:#f7f4ea}.catalog{color:#f3f7f4;background:#1f5c42;min-height:100%;padding:24px}.catalog h1{font-size:1.4rem}.catalog__row h2{margin:20px 0 10px;font-size:1rem}.catalog__tiles{flex-wrap:wrap;gap:14px;display:flex}.catalog__tile{justify-items:center;gap:6px;margin:0;font-size:.8rem;display:grid}.catalog__face{background:#f7f4ea;border:1px solid #d8d1bd;border-radius:8px;width:84px;height:114px;display:block;position:relative;overflow:hidden;box-shadow:0 3px #c9c2ad,0 6px 10px #00000059}.catalog__back{border-color:#00000040;box-shadow:0 6px 10px #00000059}.catalog__side{border:1px solid #0003;border-radius:8px;width:64px;height:114px;display:block;box-shadow:0 6px 10px #00000059}.callout3d{will-change:transform;pointer-events:none;position:absolute;top:0;left:0}.callout3d__text{color:#fff4d6;white-space:nowrap;-webkit-text-stroke:1.5px #fff4d6;text-shadow:0 0 14px #ffaa3cd9,0 2px 4px #000c;background:#0a0c0e9e;border-radius:12px;padding:.05em .45em .1em;font-family:Yuji Boku,Zen Kaku Gothic New,sans-serif;font-size:clamp(2rem,7vh,3.6rem);font-weight:700;line-height:1.2;animation:1.4s ease-out forwards callout-pop;display:block}@keyframes callout-pop{0%{opacity:0;transform:scale(1.8)}12%{opacity:1;transform:scale(.95)}20%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:scale(1.05)}}.result-peek{z-index:20;position:fixed;top:56px;right:12px;box-shadow:0 2px 8px #0006}.result__dora{flex-wrap:wrap;align-items:center;gap:4px 14px;margin:6px 0;font-size:.85rem;display:flex}.result__dora>span{align-items:center;gap:3px;display:inline-flex}