:root{--bg: #0b0f16;--panel: #111827;--text: #e5e7eb;--muted: #9ca3af;--accent: #22d3ee;--danger: #ef4444;--viewport-w: 100vw;--viewport-h: 100vh;--safe-top: env(safe-area-inset-top);--safe-right: env(safe-area-inset-right);--safe-bottom: env(safe-area-inset-bottom);--safe-left: env(safe-area-inset-left);--usable-w: calc(var(--viewport-w) - (var(--safe-left) + var(--safe-right)));--usable-h: calc(var(--viewport-h) - (var(--safe-top) + var(--safe-bottom)))}@supports (height: 100dvh){:root{--viewport-w: 100dvw;--viewport-h: 100dvh;--usable-w: calc(var(--viewport-w) - (var(--safe-left) + var(--safe-right)));--usable-h: calc(var(--viewport-h) - (var(--safe-top) + var(--safe-bottom)))}}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:16px system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}#app{width:100%;min-height:var(--viewport-h);display:flex;justify-content:center;align-items:center;position:relative}.table-shell{width:100%;height:100%;max-width:var(--viewport-w);max-height:var(--viewport-h);display:flex;align-items:center;justify-content:center;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);box-sizing:border-box}.table-frame{width:min(var(--usable-w),calc(var(--usable-h) * 16 / 9));height:min(var(--usable-h),calc(var(--usable-w) * 9 / 16));max-width:100%;max-height:100%;aspect-ratio:16 / 9;display:flex;position:relative}.table-frame>.table-grid{flex:1}.table-status{position:fixed;top:calc(var(--safe-top) + clamp(8px,2vh,16px));left:calc(var(--safe-left) + clamp(8px,2vw,18px));display:grid;gap:6px;padding:clamp(8px,1.8vh,12px) clamp(10px,2vw,14px);font-size:clamp(12px,1.7vh,14px);background:#111827eb;border-radius:14px;border:1px solid rgba(148,163,184,.2);box-shadow:0 10px 25px #00000059;z-index:5;min-width:clamp(150px,32vw,220px)}.status-main{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.status-round{font-weight:700;letter-spacing:1px;font-size:clamp(13px,1.8vh,15px);padding:4px 8px;border-radius:999px;background:#22d3ee29;color:var(--accent)}.status-pill{padding:4px 8px;border-radius:10px;background:#0f172ab3;border:1px solid rgba(148,163,184,.25);font-weight:600}.status-pill.dealer{max-width:clamp(90px,40vw,150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-actions{display:flex;flex-wrap:wrap;gap:6px}.status-btn{width:clamp(32px,6vw,40px);height:clamp(32px,6vw,40px);display:grid;place-items:center;font-weight:700;font-size:clamp(12px,1.8vh,14px);border-radius:10px;padding:0;border:1px solid #1f2937;background:#0f172acc;color:var(--text);transition:background .15s ease,border-color .15s ease,color .15s ease}.status-btn.primary{background:var(--accent);color:#03242a;border-color:transparent}.status-btn.primary:hover:not(:disabled){background:#27e6ff}.status-btn:hover:not(:disabled){background:#1e293bd9}.status-btn.danger{background:#7f1d1d4d;border-color:#ef444480;color:var(--danger)}.status-btn.danger:hover:not(:disabled){background:#7f1d1d73}.status-btn:disabled{opacity:.4;cursor:not-allowed}button{background:var(--panel);color:var(--text);border:1px solid #1f2937;border-radius:12px;padding:clamp(6px,1.8vh,12px) clamp(10px,3vw,16px);font-size:clamp(.8rem,1.9vh,1rem);font-weight:600;cursor:pointer;transition:background .15s ease,border-color .15s ease}button:disabled{opacity:.5;cursor:not-allowed}input,select{background:#0f172a;color:var(--text);border:1px solid #1f2937;border-radius:10px;padding:clamp(6px,1.6vh,10px)}.card{background:var(--panel);border:1px solid #1f2937;border-radius:16px;padding:12px}.grid{display:grid;gap:12px}.center{display:grid;place-items:center}.row{display:flex;gap:8px;align-items:center}.badge{padding:2px 8px;border-radius:999px;font-size:12px;background:#0f172a;border:1px solid #1f2937;color:var(--muted)}.big{font-size:18px}.h1{font-size:22px;font-weight:800}.h2{font-size:16px;font-weight:700;color:var(--muted)}.link{color:var(--accent);text-decoration:none}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:20}.modal .panel{width:min(560px,92vw);max-height:min(92vh,92vw);overflow-y:auto;display:flex;flex-direction:column;gap:16px}.warn{color:var(--danger)}.primary{background:var(--accent);color:#03242a;border-color:transparent}.primary:hover:not(:disabled){background:#27e6ff}.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:8px 12px}.ghost:hover:not(:disabled){color:var(--text)}.table-grid{display:grid;grid-template-columns:minmax(110px,1fr) minmax(280px,1.25fr) minmax(110px,1fr);grid-template-rows:minmax(0,auto) minmax(0,1fr) minmax(0,auto);grid-template-areas:". north ." "west . east" ". south .";gap:clamp(12px,2vw,20px);align-items:center;justify-items:center;width:100%;height:100%;max-width:100%;max-height:100%;padding:clamp(10px,2.5vh,22px);box-sizing:border-box}.seat{width:100%}.seat.north{grid-area:north}.seat.south{grid-area:south}.seat.east{grid-area:east}.seat.west{grid-area:west}.seat-card{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,2vh,14px);padding:clamp(12px,3vh,20px);text-align:center;min-width:clamp(130px,18vw,200px);transform-origin:center}.seat-card .seat-header{display:flex;align-items:center;justify-content:center;gap:6px}.seat-card .seat-wind{font-size:clamp(24px,6vh,32px);font-weight:800;letter-spacing:2px}.seat-card .dealer-flag{padding:2px 8px;border-radius:999px;font-size:clamp(10px,1.6vh,12px);font-weight:700;background:#22d3ee26;border:1px solid rgba(34,211,238,.4);color:var(--accent);text-transform:uppercase;letter-spacing:.05em}.seat-card .name{width:100%;text-align:center;font-size:clamp(14px,2.5vh,18px);font-weight:600;background:#0f172a;color:var(--text);border:1px solid #1f2937;border-radius:10px;padding:clamp(8px,1.8vh,10px)}.seat-card .points{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800}.seat-card .riichi,.seat-card .win{width:100%}.seat-card .riichi.active{background:#22d3ee33;border-color:var(--accent)}.seat-card .win{background:#22c55e26;border-color:#15803d;color:#86efac}.seat-card .win:hover{background:#22c55e40}.seat-card.north{transform:rotate(180deg)}.seat-card.east{transform:rotate(-90deg)}.seat-card.west{transform:rotate(90deg)}.seat-card.south{transform:rotate(0)}.history-list{display:flex;flex-direction:column;gap:12px}.history-row{display:flex;justify-content:space-between;gap:16px;padding:14px;border:1px solid #1f2937;border-radius:12px}.history-row .delta{display:grid;gap:4px;text-align:right;font-family:JetBrains Mono,Fira Mono,monospace}.history-row .detail{font-size:14px}.history-row .detail.subtle{color:var(--muted)}.settings{display:grid;gap:16px}.settings .field{display:grid;gap:4px}.settings .toggle{display:flex;gap:8px;align-items:center}.settings input[type=checkbox]{width:18px;height:18px}.hand-wizard{display:grid;gap:18px}.hand-wizard .result{display:flex;gap:16px;flex-wrap:wrap;border:none;padding:0;margin:0}.hand-wizard .result legend{font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-right:12px;color:var(--muted)}.hand-wizard .result label{display:flex;gap:6px;align-items:center}.hand-wizard .result label.disabled{opacity:.4}.hand-inputs{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}.hand-wizard .field{display:grid;gap:6px}.hand-wizard .draw-inputs{display:grid;gap:10px}.hand-wizard .draw-inputs .row{justify-content:flex-start}.hand-wizard .actions{display:flex;align-items:center;gap:12px}.hand-wizard .actions .spacer{flex:1}.hand-wizard .preview{display:grid;gap:10px}.hand-wizard .preview ul{margin:0;padding-left:18px}.hand-wizard .preview li{font-size:14px}.hand-wizard .delta-grid{display:grid;grid-template-columns:repeat(4,minmax(50px,1fr));gap:8px;text-align:center}.hand-wizard .delta-grid .label{display:block;color:var(--muted);font-size:12px;text-transform:uppercase}.hand-wizard .delta-grid .value{font-weight:700;font-size:16px}.panel-facing-north,.panel-facing-east,.panel-facing-west,.panel-facing-south{transform-origin:center}.panel-facing-north{transform:rotate(180deg)}.panel-facing-east{transform:rotate(-90deg)}.panel-facing-west{transform:rotate(90deg)}.panel-facing-south{transform:rotate(0)}@media (max-width: 840px){.seat-card.north,.seat-card.south,.seat-card.east,.seat-card.west{transform:rotate(0)}.hand-inputs{grid-template-columns:1fr}.hand-wizard .delta-grid{grid-template-columns:repeat(2,minmax(60px,1fr))}}@media (max-width: 840px) and (orientation: portrait){.table-grid{grid-template-columns:repeat(2,minmax(140px,1fr));grid-template-rows:repeat(3,auto);grid-template-areas:"north north" "west east" "south south";gap:clamp(10px,4vw,20px);padding:clamp(10px,4vw,20px)}}@media (orientation: landscape) and (max-width: 960px){.table-grid{grid-template-columns:minmax(110px,1fr) minmax(260px,1.15fr) minmax(110px,1fr);gap:clamp(10px,2vw,16px)}.seat-card{padding:clamp(12px,2.6vh,18px);gap:clamp(6px,2vh,12px)}.seat-card .name{font-size:clamp(13px,2.2vh,16px)}.seat-card .points{font-size:clamp(1.4rem,4vw,2.2rem)}}@media (orientation: landscape) and (max-height: 540px){body{font-size:14px}.table-grid{padding:clamp(10px,2vh,16px)}.table-status{top:calc(var(--safe-top) + clamp(4px,1.2vh,8px));left:calc(var(--safe-left) + clamp(4px,1.6vw,10px));gap:4px;padding:clamp(6px,1.4vh,10px) clamp(8px,1.8vw,12px);min-width:clamp(130px,32vw,180px)}.status-actions{gap:4px}.status-btn{width:clamp(26px,5vw,34px);height:clamp(26px,5vw,34px);font-size:clamp(11px,1.6vh,13px)}.seat-card{padding:clamp(8px,2vh,16px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"header name" "points points" "riichi win";align-items:center;gap:clamp(6px,1.6vh,10px)}.seat-card .seat-header{grid-area:header;justify-self:center}.seat-card .seat-wind{font-size:clamp(18px,6vh,24px)}.seat-card .name{grid-area:name}.seat-card .points{grid-area:points;font-size:clamp(1.15rem,4.4vh,1.8rem)}.seat-card .riichi{grid-area:riichi}.seat-card .win{grid-area:win}}