:root { --controls-bottom:max(24px, calc(env(safe-area-inset-bottom) + 12px)); color-scheme: dark; font-family: 'Avenir Next', Avenir, system-ui, sans-serif; background:#667775; color:#faf9f1; }
* { box-sizing:border-box; }
body { margin:0; }
main { position:relative; height:100svh; min-height:480px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 50% 49%, #81918a 0%, #6b7c77 36%, #60716e 78%); }
#cube { position:absolute; inset:0; touch-action:none; cursor:grab; outline:none; }
#cube:active { cursor:grabbing; }
#cube:focus-visible { outline:2px solid #f8edd1; outline-offset:-8px; }
#cube canvas { display:block; width:100%; height:100%; touch-action:none; }
#brand { position:absolute; top:max(28px, env(safe-area-inset-top)); left:80px; right:80px; margin:0; text-align:center; font-size:18px; font-weight:650; pointer-events:none; }
.hud { position:absolute; top:calc(max(28px, env(safe-area-inset-top)) + 42px); left:16px; right:16px; text-align:center; pointer-events:none; }
#puzzle-title { margin:0 0 5px; font-size:16px; font-weight:650; color:#d4ddd3; letter-spacing:.2px; }
h1 { margin:0; font-size:clamp(32px,5.5vw,46px); line-height:1.15; font-weight:750; letter-spacing:-1px; text-shadow:0 2px 0 #34454118; }
.status-slot { margin-top:12px; min-height:22px; display:grid; align-items:center; }
#move-dots { display:flex; justify-content:center; gap:8px; }
#move-dots span { width:7px; height:7px; border-radius:50%; background:#f1eee4; transition:background .16s; }
#move-dots span.used { background:#3f55524d; }
#status { margin:0; font-size:clamp(11px,3vw,14px); font-weight:600; line-height:1.5; }
#status:empty { display:none; }
main[data-phase=solved] h1 { color:#e8f3ce; }
main[data-phase=failed] h1 { color:#ffded1; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-height:600px) {
  #brand { top:max(12px, env(safe-area-inset-top)); }
  .hud { top:calc(max(12px, env(safe-area-inset-top)) + 30px); }
  .hud h1 { font-size:32px; }
  .status-slot { margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) { #move-dots span { transition:none; } }

#utilities { position:absolute; bottom:var(--controls-bottom); left:50%; transform:translateX(-50%); display:flex; gap:12px; }
.utility { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:60px; height:60px; border:1px solid #f5f3e738; border-radius:18px; background:#ffffff09; color:#f5f3e7; font:inherit; cursor:pointer; touch-action:manipulation; }
.utility span { font-size:11px; }
.utility:hover:enabled { background:#ffffff1c; border-color:#f5f3e77a; }
.utility:disabled { opacity:.3; cursor:default; }
.utility:focus-visible { outline:2px solid #f8edd1; outline-offset:4px; }

[hidden] { display:none !important; }
#settings, #levels { position:absolute; top:max(28px, env(safe-area-inset-top)); right:24px; }
#levels { right:auto; left:24px; }
dialog { max-height:calc(100svh - 40px); overflow:auto; width:min(340px, calc(100% - 40px)); border:1px solid #e7ecdc55; border-radius:24px; padding:24px; color:#faf9f1; background:#526760; box-shadow:0 18px 70px #18262055; }
dialog::backdrop { background:#18262066; }
dialog h2 { margin:0 0 24px; font-size:24px; }
.sound-option { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; cursor:pointer; }
.sound-option input { width:24px; height:24px; accent-color:#d7e7b6; }
#settings-note { font-size:12px; line-height:1.5; }
#settings-note:empty { display:none; }
#settings-done, #levels-done, #levels-retry, #levels-more, #levels-continue { margin-top:24px; width:100%; min-height:44px; border:1px solid #e7ecdc55; border-radius:12px; background:#ffffff12; color:inherit; font:inherit; cursor:pointer; }
dialog button:focus-visible, .sound-option input:focus-visible { outline:2px solid #f8edd1; outline-offset:4px; }
#hint-panel p:empty { display:none; }
#hint-balance, #hint-answer { color:#e5f2cb; font-weight:600; }
#hint-detail, #hint-status, #hint-request { font-size:13px; line-height:1.5; }
#hint-options { display:grid; gap:10px; }
#hint-panel button { width:100%; min-height:44px; border:1px solid #e7ecdc55; border-radius:12px; background:#ffffff12; color:inherit; font:inherit; cursor:pointer; padding:12px; touch-action:manipulation; }
#hint-options button { text-align:left; }
#hint-options strong, #hint-options span { display:block; }
#hint-options strong { font-size:14px; }
#hint-options span { font-size:12px; margin-top:5px; color:#d4ddd3; }
#hint-panel button:disabled { opacity:.5; cursor:default; }
#hint-done, #hint-retry, #hint-cancel { margin-top:12px; }
@media (max-width:480px) { #settings, #levels { top:max(18px, env(safe-area-inset-top)); right:12px; width:48px; height:48px; border-radius:14px; } #settings span, #levels span { font-size:9px; } #levels { left:12px; right:auto; } }

#levels-panel { width:min(460px, calc(100% - 32px)); }
.levels-heading { position:sticky; top:-24px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:-24px -24px 12px; padding:16px 24px; background:#526760; border-bottom:1px solid #e7ecdc22; }
#levels-panel h2 { margin:0; }
#levels-panel #levels-done { margin:0; width:auto; padding:0 14px; font-size:13px; }
#levels-summary { margin:8px 0; color:#dce8c7; }
#levels-next { color:#d4ddd3; font-size:13px; line-height:1.5; }
#levels-continue { margin-top:4px; background:#dce8c722; }
#levels-list { margin-top:24px; }
#levels-list section + section { margin-top:24px; border-top:1px solid #e7ecdc22; padding-top:20px; }
#levels-list h3 { margin:0; font-size:20px; }
#levels-list p { font-size:12px; color:#d4ddd3; margin:6px 0 12px; }
.level-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.level-grid button { min-height:64px; border:1px solid #e7ecdc44; border-radius:12px; background:#ffffff0a; color:inherit; cursor:pointer; font:inherit; touch-action:manipulation; }
.level-grid strong { display:block; font-size:16px; }
.level-grid span { display:block; font-size:10px; margin-top:4px; }
.level-grid button[data-status=completed] { color:#e5f2cb; background:#dce8c713; }
.level-grid button[aria-current] { border:2px solid #e2eec8; background:#dce8c726; }
.level-grid button:disabled { cursor:default; }
.level-grid button[data-status=locked] { border-color:#e7ecdc22; color:#c2ccc5; background:#293d3526; }
.level-grid button:hover:enabled { background:#ffffff24; }
@media (max-width:350px) { .level-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }