html,body.game-page{height:100%;overflow:hidden;background:var(--c-bg);overscroll-behavior:none;touch-action:none;overflow-x:hidden}.game-page{display:flex;flex-direction:column;height:100dvh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.game-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--c-bg-alt);border-bottom:1px solid var(--c-border)}.game-header .brand-mark{width:28px;height:28px}.hud{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap}.hud-stat{background:var(--c-surface);border:1px solid var(--c-border);border-radius:10px;padding:6px 10px;display:inline-flex;flex-direction:column;min-width:64px;text-align:center}.hud-label{font-size:.68rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.1em}.hud-value{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.05rem;font-family:var(--font-mono)}.header-actions{display:flex;gap:var(--space-2)}.game-main{flex:1;min-height:0;display:grid;grid-template-rows:1fr auto;gap:var(--space-3);padding:var(--space-3);align-items:stretch;justify-items:stretch;touch-action:none}.playfield{position:relative;display:grid;place-items:center;background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;min-height:0;aspect-ratio:1 / 1;width:100%;max-width:min(100%,calc(100dvh - 240px));max-height:100%;margin:0 auto}#game-canvas{display:block;width:100%;height:100%;touch-action:none}.tray{background:var(--c-bg-alt);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--space-2);height:clamp(96px,18dvh,160px)}#tray-canvas{width:100%;height:100%;touch-action:none}.game-overlay{position:absolute;inset:0;display:grid;place-items:center;background:#0b1020d9;backdrop-filter:blur(6px);z-index:20}.game-overlay[hidden]{display:none}.game-overlay .panel{background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--radius-lg);padding:var(--space-6);max-width:400px;width:calc(100% - 32px);text-align:center;box-shadow:var(--shadow-lg)}.game-overlay h2{margin:0 0 var(--space-3)}.game-overlay .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);margin:var(--space-4) 0}.game-overlay .stat{background:var(--c-bg-alt);border-radius:var(--radius);padding:var(--space-3)}.game-overlay .stat-label{display:block;color:var(--c-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}.game-overlay .stat-value{display:block;font:700 1.5rem var(--font-mono);margin-top:4px}.confirm-place{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));pointer-events:none;background:linear-gradient(to top,#0b1020f0,#0b1020d9 55%,#0b102000)}.confirm-place.confirm-place--top{bottom:auto;top:0;padding:calc(var(--space-3) + env(safe-area-inset-top)) var(--space-3) var(--space-3);background:linear-gradient(to bottom,#0b1020f0,#0b1020d9 55%,#0b102000)}.confirm-place[hidden]{display:none}.confirm-panel{pointer-events:auto;background:var(--c-surface);border:2px solid var(--c-border-strong);border-radius:var(--radius-lg);padding:var(--space-5);max-width:640px;width:100%;margin:0 auto;text-align:center;box-shadow:var(--shadow-lg);isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none;animation:confirm-slide-in .18s ease-out}.confirm-place--top .confirm-panel{animation:confirm-slide-in-top .18s ease-out}@keyframes confirm-slide-in{0%{transform:translateY(20px);opacity:.5}to{transform:translateY(0);opacity:1}}@keyframes confirm-slide-in-top{0%{transform:translateY(-20px);opacity:.5}to{transform:translateY(0);opacity:1}}.confirm-panel h2{font-size:clamp(1.6rem,4vw,2.1rem);margin:0 0 var(--space-3);letter-spacing:-.01em}.confirm-panel .confirm-msg{font-size:clamp(1rem,2.5vw,1.15rem);color:var(--c-muted);margin:0 0 var(--space-5)}.confirm-actions{display:grid;gap:var(--space-3)}@media (min-width: 520px){.confirm-actions{grid-template-columns:1fr 1fr}}.btn-xl{min-height:64px;padding:16px 24px;font-size:clamp(1.05rem,2.4vw,1.2rem);font-weight:700;border-radius:14px;width:100%}.btn-xl[disabled]{opacity:.5;cursor:not-allowed}.btn-cancel{background:transparent;border:0;color:var(--c-muted);text-decoration:underline;margin-top:var(--space-4);font-size:.95rem;cursor:pointer;min-height:var(--tap-min)}.btn-cancel:hover{color:var(--c-text)}.drawer{position:fixed;inset:0;z-index:100}.drawer[hidden]{display:none}.drawer-scrim{position:absolute;inset:0;width:100%;height:100%;background:#0b1020b3;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:0;padding:0;cursor:pointer;z-index:1}.drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--c-bg-alt);border-left:1px solid var(--c-border);display:flex;flex-direction:column;padding:env(safe-area-inset-top) var(--space-4) env(safe-area-inset-bottom);animation:slide-in .18s ease-out;z-index:2;isolation:isolate;backdrop-filter:none;-webkit-backdrop-filter:none}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) 0;border-bottom:1px solid var(--c-border)}.drawer-header h2{margin:0;font-size:1.2rem}.drawer-body{flex:1;overflow:auto;padding:var(--space-4) 0;display:grid;gap:var(--space-5)}.setting{border:0;padding:0;margin:0}.setting legend{font-weight:700;padding:0;margin-bottom:var(--space-2)}.setting .hint{color:var(--c-muted);font-size:.85rem;margin:var(--space-2) 0 0}.setting .row{display:flex;align-items:center;gap:var(--space-3);padding:10px 0;min-height:var(--tap-min);cursor:pointer}.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:4px;gap:4px}.seg label{display:flex;align-items:center;justify-content:center;min-height:var(--tap-min);border-radius:8px;cursor:pointer;text-align:center;font-size:.9rem;color:var(--c-muted)}.seg input{position:absolute;opacity:0;pointer-events:none}.seg label:has(input:checked){background:var(--c-accent);color:#04121f;font-weight:700}.drawer-actions{padding:var(--space-3) 0;display:grid;gap:var(--space-3)}.drawer-actions .btn{width:100%}.btn-danger{background:transparent;border:1px solid var(--c-warn);color:var(--c-warn)}.btn-danger:hover{background:var(--c-warn);color:#fff;border-color:var(--c-warn)}.drawer-links{display:flex;gap:var(--space-4);flex-wrap:wrap;border-top:1px solid var(--c-border);padding:var(--space-4) 0}@media (max-width: 480px){.game-header{grid-template-columns:auto auto;grid-template-areas:"brand actions" "hud   hud";gap:var(--space-2)}.game-header .brand{grid-area:brand}.game-header .header-actions{grid-area:actions}.game-header .hud{grid-area:hud}}@media (min-width: 900px) and (orientation: landscape){.game-main{grid-template-rows:1fr;grid-template-columns:1fr clamp(220px,22vw,320px);gap:var(--space-4)}.playfield{max-width:100%}.tray{height:100%}}