*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #1a1a2e;--color-table: #0f3460;--color-tile: #f5f0e8;--color-tile-selected: #ffe566;--color-tile-border: #8b7355;--color-man: #dc2626;--color-pin: #16a34a;--color-sou: #2563eb;--color-honor: #7c3aed;--color-text: #e8e8f0}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg);font-family:Noto Sans JP,system-ui,sans-serif;color:var(--color-text);touch-action:none}#app{position:relative;width:100vw;height:100dvh}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:100%;height:100%}#ui-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui-overlay>*{pointer-events:auto}.panel{position:absolute;background:#0f121cd1;border:1px solid rgba(255,255,255,.12);border-radius:12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 20px #00000073;color:var(--color-text)}.round-panel{top:16px;left:16px;padding:12px 18px;min-width:150px}.round-name{font-size:26px;font-weight:800;letter-spacing:1px}.round-sub{display:flex;gap:14px;margin:6px 0;font-size:14px}.counter{display:inline-flex;align-items:center;gap:4px}.chip{display:inline-block;width:14px;height:18px;border-radius:3px;vertical-align:middle}.chip.honba{background:linear-gradient(180deg,#e8e8f0 60%,#c33 60%)}.chip.kyotaku{background:#e8e8f0;position:relative}.chip.kyotaku:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;background:#c33;border-radius:50%;transform:translate(-50%,-50%)}.round-type{font-size:13px;opacity:.75;border-top:1px solid rgba(255,255,255,.12);padding-top:6px;margin-top:2px}.topbar{position:absolute;top:16px;right:16px;display:flex;gap:8px}.topbtn{pointer-events:auto;background:#0f121cd1;border:1px solid rgba(255,255,255,.14);color:var(--color-text);padding:9px 14px;border-radius:10px;font-size:14px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.topbtn:hover{background:#282e42e6}.seat{position:absolute;display:flex;align-items:center;gap:10px}.seat-avatar{width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#44506e,#222838);border:2px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 4px 12px #00000080;flex:0 0 auto}.seat-info{background:#0f121cd1;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:4px 10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center}.seat{flex-direction:column;gap:4px}.seat-name{font-size:12px;font-weight:600;white-space:nowrap;color:#e8eef7}.seat-score{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:2px}.seat-wind{background:#2f6b46;color:#fff;font-weight:800;border-radius:4px;padding:0 5px;font-size:12px}.seat-pts{font-weight:800;color:#ffe7a8;font-size:15px}.seat.dealer .seat-wind{background:#c0392b}.seat.active .seat-avatar{border-color:#ffd54a;box-shadow:0 0 16px #ffd54a}.seat.active .seat-pts{color:#ffd54a}.seat.riichi .seat-avatar{border-color:#ff6b6b}.seat-0{bottom:92px;left:24px}.seat-1{right:24px;top:40%}.seat-2{top:20px;left:50%;transform:translate(-50%)}.seat-3{left:24px;top:40%}.compass{position:absolute;top:50.5%;left:50%;transform:translate(-50%,-50%);width:124px;min-height:96px;padding:10px 8px;background:radial-gradient(circle at 50% 45%,#3c2818f5,#26180ef5);border:2px solid #caa86a;border-radius:12px;box-shadow:0 0 0 2px #ffffff2e,0 10px 32px #0000008c;display:flex;align-items:center;justify-content:center}.cmp-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.cmp-round{font-size:19px;font-weight:800;color:#fff}.cmp-honba{font-size:11px;color:#e8d6a8}.cmp-honba:empty{display:none}.cmp-draw{font-size:12px;color:#9fd0ff}.cmp-dice{font-size:18px;letter-spacing:3px;color:#fff}.cmp-kyotaku{font-size:10px;color:#d8cdb6;display:flex;align-items:center;gap:4px}.cmp-kyotaku b{color:#6ee787;font-size:12px}.kyotaku-slots{display:inline-flex;gap:2px}.kyotaku-stick{width:14px;height:5px;border-radius:3px;background:#e8e8f0;position:relative}.kyotaku-stick.on:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;background:#c33;border-radius:50%;transform:translate(-50%,-50%)}.toggle-bar{position:absolute;bottom:24px;left:24px;display:flex;gap:8px}.toggle{pointer-events:auto;background:#0f121cd1;border:1px solid rgba(255,255,255,.14);color:#aeb4c6;padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer}.toggle.on{background:#2f6b46;color:#fff;border-color:#43a06a}.waits-panel{bottom:24px;right:24px;padding:8px 14px;display:flex;align-items:center;gap:10px}.waits-label{font-size:13px;opacity:.8}.waits-tiles{display:flex;gap:4px}.mini-tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:24px;height:32px;background:#f5f0e8;border-radius:4px;border:1px solid #8b7355;font-weight:800;font-size:15px;line-height:1}.mini-tile small{font-size:8px;color:#555}.actions{position:absolute;right:24px;bottom:80px;display:flex;flex-direction:column;gap:10px;align-items:flex-end}.action-btn{pointer-events:auto;padding:14px 28px;font-size:19px;font-weight:700;border:none;border-radius:12px;cursor:pointer;color:#fff;box-shadow:0 4px 12px #0006;transition:transform .08s}.action-btn:active{transform:scale(.94)}.action-btn.win{background:linear-gradient(135deg,#f59e0b,#dc2626)}.action-btn.call{background:linear-gradient(135deg,#3b82f6,#2563eb)}.action-btn.skip{background:#505064d9}.status-line{position:absolute;bottom:240px;left:50%;transform:translate(-50%);background:#00000080;padding:6px 16px;border-radius:10px;font-size:14px;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-line:empty{display:none}.settings-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#141a28f5,#080a10fa);pointer-events:auto;z-index:10}.settings-card{background:#121622fa;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:20px 24px;width:min(460px,92vw);max-height:92vh;display:flex;flex-direction:column;gap:10px;box-shadow:0 12px 40px #0009}.settings-title{font-size:26px;font-weight:900;text-align:center;flex:none}.settings-sub{font-size:13px;opacity:.7;text-align:center;flex:none}.preset-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;flex:none}.preset-btn{pointer-events:auto;background:#2a3350;color:#e8e8f0;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer}.preset-btn:hover{background:#3a4670}.settings-rows{display:flex;flex-direction:column;gap:7px;margin:2px 0;flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:6px}.settings-section{font-size:11px;font-weight:800;letter-spacing:.06em;color:#8b93ab;margin-top:8px;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.08)}.settings-section:first-child{margin-top:0}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.settings-label{font-size:14px;color:#cfd3e0;display:inline-flex;align-items:center}.settings-info{pointer-events:auto;background:none;border:none;cursor:pointer;color:#6f86c9;font-size:13px;margin-left:5px;padding:0 2px;opacity:.7}.settings-info:hover,.settings-info.on{color:#9db6ff;opacity:1}.settings-desc{font-size:11.5px;line-height:1.45;color:#aab0c4;background:#6e86c91a;border-left:2px solid #4a5894;border-radius:6px;padding:6px 9px;margin:-2px 0 2px}.seg{display:inline-flex;border-radius:8px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}.seg-btn{pointer-events:auto;background:#ffffff0a;color:#aeb4c6;border:none;padding:6px 12px;font-size:13px;cursor:pointer}.seg-btn.on{background:#2f6b46;color:#fff}.settings-start{align-self:center;margin-top:4px;flex:none}.dbg-toggle{position:absolute;top:16px;left:50%;transform:translate(-50%);pointer-events:auto;background:#0f121cb3;border:1px solid rgba(255,255,255,.14);border-radius:8px;font-size:16px;padding:4px 8px;cursor:pointer;opacity:.5}.dbg-toggle:hover{opacity:1}.dbg-panel{position:absolute;top:56px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:6px;padding:10px;background:#0f121cf2;border:1px solid rgba(255,255,255,.18);border-radius:10px}.dbg-title{font-size:12px;opacity:.7;text-align:center}.dbg-btn{pointer-events:auto;background:#2a3350;color:#e8e8f0;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:8px 12px;font-size:13px;cursor:pointer;white-space:nowrap}.dbg-btn:hover{background:#3a4670}.deal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;pointer-events:none;background:radial-gradient(circle at center,#00000073,#00000026)}.deal-dice{font-size:84px;line-height:1;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.7);animation:deal-pop .3s ease-out}.deal-text{font-size:26px;font-weight:800;color:#ffd54a;text-shadow:0 2px 8px rgba(0,0,0,.7)}@keyframes deal-pop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto}.result-card{background:#121622f7;border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px 28px;min-width:420px;max-width:90vw;box-shadow:0 12px 40px #0009;display:flex;flex-direction:column;align-items:center;gap:14px}.result-title{font-size:24px;font-weight:800}.result-hand{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;align-items:center}.win-tile-wrap{margin-left:8px}.win-tile-wrap .mini-tile{box-shadow:0 0 0 2px #ffd54a}.result-melds{margin-left:10px;display:inline-flex;gap:3px;opacity:.85}.result-dora{display:flex;align-items:center;gap:6px;font-size:12px;color:#cfd3e0}.result-yaku{width:100%;display:flex;flex-direction:column;gap:3px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);padding:10px 0;margin:4px 0}.result-yaku-row{display:flex;justify-content:space-between;font-size:14px;padding:0 8px}.result-score{display:flex;align-items:baseline;gap:12px;font-size:18px}.result-rank{font-size:18px;font-weight:700;color:#cfd3e0}.result-pay{font-size:18px;font-weight:600;color:#e8e8f0}.result-points{font-size:30px;font-weight:900;color:#ffd54a;text-shadow:0 2px 6px rgba(0,0,0,.5);padding:0 2px}@media(max-width:720px){.result-card{min-width:0;width:92vw;padding:16px}.result-title{font-size:19px}.round-name{font-size:20px}.seat-avatar{width:44px;height:44px;font-size:24px}.seat-info{padding:3px 8px}.seat-name,.seat-wind{font-size:11px}.seat-pts{font-size:13px}.compass{width:92px;min-height:70px;padding:7px 6px}.cmp-center{gap:2px}.cmp-round{font-size:15px}.cmp-honba{font-size:9px}.cmp-draw{font-size:11px}.cmp-dice{display:none}.cmp-kyotaku{font-size:8px}.action-btn{padding:12px 20px;font-size:16px}.kyotaku-panel{left:150px}}