/* ---------------- fonts (self-hosted, offline; see www/fonts/OFL-*.txt) ------ */
@font-face{font-family:'Blinker';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/Blinker-Regular.woff2') format('woff2');}
@font-face{font-family:'Blinker';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/Blinker-SemiBold.woff2') format('woff2');}
@font-face{font-family:'Blinker';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/Blinker-Bold.woff2') format('woff2');}
@font-face{font-family:'Nova Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/NovaMono-Regular.woff2') format('woff2');}

:root{
  --void0:#07071a; --void1:#0d0b26; --brass:#c9962e; --brass-d:#7a5218;
  --cyan:#3fe0ff; --cyan-soft:#22e0e8; --white:#fff7e0;
  --panel-bg:rgba(14,16,42,0.88); --panel-border:rgba(201,150,46,0.55);
  --glass:rgba(34,224,232,0.10);
  --font-ui:'Blinker','Segoe UI',system-ui,sans-serif;
  --font-display:'Nova Mono','Blinker',ui-monospace,monospace;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --banner-reserve:0px;
}
html.has-banner-ad{--banner-reserve:58px;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#07071a;
  font-family:var(--font-ui);color:var(--white);
  user-select:none;-webkit-user-select:none;touch-action:manipulation;}
/* form controls don't inherit font-family by default — force it. */
button,input,select,textarea{font-family:inherit;}
/* Nova Mono for titles + numeric readouts (monospace = aligned counters). */
.game-title,.panel-title,.brief-level,
.hud-title,.hud-chip-text,.tray-count,.level-num{font-family:var(--font-display);}
.hud-chip-text,.tray-count,.level-num,.level-meta,.brief-obj-count{font-variant-numeric:tabular-nums;}
#game{position:fixed;inset:0;width:100%;height:100%;display:block;}
#ui{position:fixed;inset:0;pointer-events:none;z-index:10;}
#ui button, #ui input{pointer-events:auto;}

#boot-error{position:fixed;inset:0;z-index:10010;display:none;align-items:center;
  justify-content:center;background:rgba(20,2,10,.96);padding:24px;}
.boot-error-inner{max-width:90%;}
.boot-error-title{color:#ff5f7a;font-size:26px;font-weight:700;letter-spacing:4px;margin-bottom:12px;}
.boot-error-msg{color:#ffd0d8;font-size:12px;white-space:pre-wrap;
  background:rgba(0,0,0,.4);padding:12px;border-radius:8px;max-height:60vh;overflow:auto;}

/* ---------------- HUD ---------------- */
.hud{position:absolute;inset:0;pointer-events:none;}
.hud.hidden{display:none;}
.hud-top{position:absolute;top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 12px);
  right:calc(var(--safe-r) + 12px);display:flex;align-items:center;justify-content:space-between;gap:10px;}
.hud-top-l{min-width:0;flex:1 1 auto;}
.hud-title-row{display:flex;align-items:center;gap:6px;min-width:0;}
.hud-title{font-size:16px;font-weight:700;color:var(--white);text-shadow:0 0 10px rgba(63,224,255,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.hud-objective{font-size:12px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;}
.hud-chip{position:relative;height:34px;min-width:66px;border-radius:17px;
  display:flex;align-items:center;justify-content:center;padding:0 14px;
  background:var(--panel-bg);border:1px solid var(--panel-border);overflow:hidden;flex:none;}
.hud-chip-fill{position:absolute;left:0;top:0;bottom:0;width:0%;
  background:linear-gradient(90deg,rgba(34,224,232,.35),rgba(255,247,224,.4));transition:width .35s;}
.hud-chip-text{position:relative;font-size:15px;font-weight:700;color:var(--white);}
.hud-metrics{display:flex;align-items:center;gap:7px;flex:none;}
.hud-moves-chip{min-width:88px;border-color:rgba(63,224,255,.42);background:rgba(34,224,232,.07);}
.hud-moves-chip .hud-chip-text{font-size:12px;letter-spacing:.4px;}
.hud-moves-chip.warning{border-color:rgba(255,190,63,.85);background:rgba(255,162,45,.12);box-shadow:0 0 14px rgba(255,162,45,.12);}
.hud-moves-chip.empty{border-color:rgba(255,86,112,.9);background:rgba(255,55,88,.13);}

.hud-hint{position:absolute;top:24%;left:50%;transform:translateX(-50%);
  max-width:82vw;text-align:center;font-size:13px;padding:10px 16px;border-radius:12px;
  background:var(--panel-bg);border:1px solid var(--panel-border);color:var(--white);
  box-shadow:0 0 24px rgba(63,224,255,.2);}
.hud-hint.hidden{display:none;}

.hud-bottom{position:absolute;left:calc(var(--safe-l) + 12px);right:calc(var(--safe-r) + 12px);
  bottom:calc(var(--safe-b) + var(--banner-reserve) + 12px);display:flex;align-items:flex-end;justify-content:flex-start;gap:10px;}
.tray{display:flex;gap:10px;flex-wrap:wrap;}
.tray-slot{position:relative;width:80px;height:80px;border:none;background:transparent;
  background-size:cover;background-position:center;border-radius:16px;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .12s, box-shadow .12s;}
.tray-slot img{width:64px;height:64px;pointer-events:none;}
.tray-slot .tray-count{position:absolute;right:4px;bottom:2px;font-size:13px;font-weight:700;
  color:var(--white);text-shadow:0 1px 3px #000;}
.tray-slot.selected{box-shadow:0 0 0 3px var(--cyan),0 0 20px rgba(63,224,255,.6);transform:translateY(-3px);}
.tray-slot.empty{opacity:.32;filter:grayscale(.4);}
.tray-slot:active{transform:scale(.94);}

.hud-title-actions{display:flex;gap:5px;flex:none;}
.act-btn{width:96px;height:96px;border-radius:22px;border:1px solid var(--panel-border);
  background:var(--panel-bg);display:flex;align-items:center;justify-content:center;padding:0;
  cursor:pointer;transition:transform .1s,box-shadow .1s;}
.act-btn img{width:52px;height:52px;pointer-events:none;}
.act-btn.text-act{font-family:var(--font-display);font-size:36px;font-weight:700;color:var(--cyan);
  text-shadow:0 0 14px rgba(63,224,255,.65);}
.act-btn:active{transform:scale(.92);box-shadow:0 0 18px rgba(63,224,255,.5);}
.act-btn:disabled{opacity:.35;}
.hud-title-actions .act-btn{width:36px;height:36px;border-radius:11px;}
.hud-title-actions .act-btn img{width:22px;height:22px;}
.hud-title-actions .act-btn.text-act{font-size:21px;}
@media (max-width:430px){
  .hud-top{align-items:flex-start;}
  .hud-metrics{flex-direction:column;align-items:stretch;gap:4px;}
  .hud-chip{height:28px;min-width:76px;padding:0 10px;}
  .hud-chip-text{font-size:13px;}
  .hud-moves-chip .hud-chip-text{font-size:10px;}
  .act-btn{width:64px;height:64px;border-radius:16px;}
  .act-btn img{width:42px;height:42px;}
  .act-btn.text-act{font-size:30px;}
  .hud-title-actions{gap:4px;}
  .hud-title-actions .act-btn{width:34px;height:34px;border-radius:10px;}
  .hud-title-actions .act-btn img{width:21px;height:21px;}
  .hud-title-actions .act-btn.text-act{font-size:20px;}
  .tray-slot{width:70px;height:70px;}
  .tray-slot img{width:54px;height:54px;}
}

/* ---------------- screens ---------------- */
.screen{position:absolute;inset:0;z-index:20;display:flex;padding:24px;
  padding-top:calc(var(--safe-t) + 24px);padding-bottom:calc(var(--safe-b) + 24px);
  overflow-y:auto;pointer-events:auto;}
.screen.center{align-items:center;justify-content:center;}
.screen.dim{background:rgba(5,4,16,.72);}
.panel{width:min(440px,92vw);max-height:calc(100vh - 48px);overflow-y:auto;overflow-x:hidden;
  background:var(--panel-bg);border:1.5px solid var(--panel-border);border-radius:22px;
  padding:26px 22px;display:flex;flex-direction:column;align-items:stretch;gap:14px;
  box-shadow:0 0 50px rgba(20,10,40,.7),inset 0 0 40px rgba(34,224,232,.05);
  position:relative;isolation:isolate;}
.panel{scrollbar-width:none;}
.panel::-webkit-scrollbar{width:0;height:0;display:none;}
.panel>*{position:relative;z-index:1;}
html[data-visual-quality="high"] .panel::before{content:"";position:absolute;z-index:0;
  left:-18%;right:-18%;top:-34px;height:70px;pointer-events:none;opacity:.78;
  background:conic-gradient(from 98deg at 50% 100%,transparent 0 23%,rgba(47,107,255,.22) 27%,rgba(34,224,232,.24) 31%,rgba(255,247,224,.28) 35%,rgba(255,210,30,.18) 39%,rgba(232,56,200,.22) 44%,transparent 50%);
  filter:blur(9px);}
html[data-visual-quality="high"] .panel::after{content:"";position:absolute;z-index:0;
  inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(118deg,rgba(47,107,255,.08),transparent 31%,rgba(255,255,255,.055) 48%,transparent 63%,rgba(232,56,200,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(232,56,200,.12);}
.game-title{margin:0;text-align:center;font-size:40px;letter-spacing:9px;color:var(--white);
  text-shadow:0 0 30px rgba(63,224,255,.5);}
html[data-visual-quality="high"] .game-title{
  background:linear-gradient(96deg,#b9f8ff 3%,#ffffff 21%,#ffd75a 40%,#ff65d5 59%,#7f8cff 77%,#b9f8ff 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(63,224,255,.32));}
.game-sub{margin:0 0 6px;text-align:center;font-size:13px;opacity:.65;letter-spacing:1px;}
.panel-title{margin:0 0 4px;text-align:center;font-size:24px;letter-spacing:2px;color:var(--white);}
.panel-title.solved{color:var(--cyan);text-shadow:0 0 24px rgba(63,224,255,.6);}

.menu-btn{width:100%;padding:15px 20px;border-radius:14px;font-size:17px;font-weight:600;
  letter-spacing:1px;color:var(--white);cursor:pointer;
  background:linear-gradient(180deg,rgba(34,224,232,.10),rgba(14,16,42,.6));
  border:1px solid var(--panel-border);transition:transform .1s,box-shadow .1s;}
.menu-btn.primary{background:linear-gradient(180deg,rgba(63,224,255,.28),rgba(201,150,46,.18));
  border-color:var(--cyan);}
html[data-visual-quality="high"] .menu-btn.primary{
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),transparent 42%),
    linear-gradient(105deg,rgba(47,107,255,.24),rgba(34,224,232,.24) 34%,rgba(255,210,30,.17) 60%,rgba(232,56,200,.22));
  border-color:rgba(171,246,255,.9);
  box-shadow:0 0 24px rgba(63,224,255,.12),inset 0 0 18px rgba(255,255,255,.045);}
html[data-visual-quality="low"] .panel,
html[data-visual-quality="low"] .menu-btn{box-shadow:none;}
.menu-btn:active{transform:scale(.97);box-shadow:0 0 22px rgba(63,224,255,.4);}
.menu-btn.ad-free{position:relative;overflow:hidden;display:grid;grid-template-columns:35px 1fr 18px;align-items:center;gap:10px;padding:12px 14px;text-align:left;border-color:rgba(255,213,90,.82);background:linear-gradient(108deg,rgba(47,107,255,.2),rgba(34,224,232,.16) 34%,rgba(255,210,30,.17) 62%,rgba(232,56,200,.2));box-shadow:0 0 24px rgba(255,210,30,.1),inset 0 0 18px rgba(255,255,255,.035);animation:adFreePulse 2.8s ease-in-out infinite;}
.menu-btn.ad-free:before{content:"";position:absolute;top:-80%;bottom:-80%;width:32%;left:-42%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);animation:adFreeSweep 3.6s ease-in-out infinite;pointer-events:none;}
.menu-btn.ad-free.active{border-color:rgba(63,224,255,.68);animation:none;}
.menu-btn.ad-free.active:before{display:none;}
.ad-free-gem{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff4a8;background:radial-gradient(circle,rgba(255,247,224,.28),rgba(255,210,30,.08));border:1px solid rgba(255,226,112,.42);font-size:20px;text-shadow:0 0 12px rgba(255,226,112,.85);}
.ad-free-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}.ad-free-copy strong{font-size:14px;letter-spacing:.7px;}.ad-free-copy small{font-size:10px;font-weight:400;letter-spacing:.3px;color:rgba(255,247,224,.61);}.ad-free-arrow{font-size:21px;color:rgba(255,247,224,.55);}
@keyframes adFreeSweep{0%,58%{left:-42%}82%,100%{left:118%}}
@keyframes adFreePulse{0%,100%{box-shadow:0 0 18px rgba(255,210,30,.08)}50%{box-shadow:0 0 30px rgba(63,224,255,.17)}}
@media(prefers-reduced-motion:reduce){.menu-btn.ad-free,.menu-btn.ad-free:before{animation:none;}}

.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:6px 0;
  max-height:60vh;overflow-y:auto;padding:2px;scrollbar-width:thin;}
.level-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;
  border-radius:12px;background:rgba(34,224,232,.07);border:1px solid var(--panel-border);
  cursor:pointer;color:var(--white);transition:transform .1s;min-height:70px;justify-content:center;}
.level-cell:active{transform:scale(.96);}
.level-cell.locked{opacity:.4;filter:grayscale(.5);cursor:default;}
.level-num{font-size:22px;font-weight:700;color:var(--cyan);line-height:1;}
.level-cell-name{font-size:10px;text-align:center;opacity:.85;line-height:1.15;}
.level-meta{font-size:9px;opacity:.6;}

.brief-level{text-align:center;font-size:13px;letter-spacing:2px;color:var(--cyan);opacity:.85;}
.brief-objs{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin:8px 0;}
.brief-obj{display:flex;flex-direction:column;align-items:center;gap:3px;}
.brief-obj img{width:56px;height:56px;}
.brief-obj-name{font-size:12px;opacity:.85;}
.brief-obj-count{font-size:16px;font-weight:700;color:var(--white);}
.brief-goal{margin:0;text-align:center;font-size:14px;opacity:.8;line-height:1.4;}
.move-limit-note{align-self:center;padding:7px 13px;border:1px solid rgba(63,224,255,.32);border-radius:999px;background:rgba(63,224,255,.07);color:rgba(185,248,255,.82);font-family:var(--font-display);font-size:11px;letter-spacing:.8px;}
.moves-out-panel{border-color:rgba(255,162,45,.68);}
.moves-out-flare{width:76px;height:76px;margin:0 auto 2px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,102,122,.8);background:radial-gradient(circle,rgba(255,90,112,.18),rgba(255,55,88,.035));box-shadow:0 0 34px rgba(255,75,105,.16);color:#ff8da1;font:700 34px/1 var(--font-display);}
.menu-btn.reward-moves{border-color:#ffd75a;background:linear-gradient(105deg,rgba(47,107,255,.3),rgba(34,224,232,.2),rgba(255,210,30,.28),rgba(232,56,200,.22));box-shadow:0 0 27px rgba(255,210,30,.13);}
.moves-out-message{min-height:17px;text-align:center;color:#ff9caf;font-size:11px;line-height:1.35;}
.moves-out-used{margin:0;text-align:center;color:rgba(255,247,224,.5);font-size:11px;}

.star-row{display:flex;justify-content:center;gap:8px;}
.star-row img{width:48px;height:48px;filter:drop-shadow(0 0 14px rgba(255,210,30,.6));}

.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:6px 2px;}
.settings-row-stacked{align-items:center;}
.settings-copy{min-width:0;display:flex;flex-direction:column;gap:2px;}
.settings-label{font-size:15px;opacity:.9;}
.settings-hint{font-size:11px;line-height:1.25;color:rgba(255,247,224,.5);}
.toggle-btn{min-width:70px;padding:10px 18px;border-radius:12px;font-weight:700;font-size:15px;
  color:var(--white);background:linear-gradient(180deg,rgba(63,224,255,.28),rgba(14,16,42,.6));
  border:1px solid var(--cyan);cursor:pointer;}
.toggle-btn.off{background:linear-gradient(180deg,rgba(120,120,140,.2),rgba(14,16,42,.6));
  border-color:rgba(160,160,180,.5);color:#b8b8c8;}
.quality-btn{min-width:82px;font-family:var(--font-display);letter-spacing:1px;}
.quality-btn:disabled{opacity:.6;cursor:wait;}
.vol-slider{flex:1;max-width:180px;accent-color:var(--cyan-soft);}
.settings-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.settings-links .menu-btn{padding:12px 10px;font-size:15px;}
.settings-links a.menu-btn{text-decoration:none;}
.settings-links .settings-ad-free{grid-column:1/-1;padding:12px 14px;}

/* ---------------- help ---------------- */
.help-panel{width:min(500px,94vw);gap:12px;padding:20px 18px;}
.help-count{text-align:center;font-family:var(--font-display);font-size:12px;color:var(--cyan);opacity:.85;}
.help-copy{margin:0;text-align:center;font-size:14px;line-height:1.35;opacity:.86;}
.help-nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.help-nav .menu-btn:disabled{opacity:.35;pointer-events:none;}
.help-dots{display:flex;justify-content:center;gap:7px;margin:2px 0;}
.help-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,247,224,.25);}
.help-dot.active{background:var(--cyan);box-shadow:0 0 10px rgba(63,224,255,.7);}
.mini-board{height:230px;border:1px solid rgba(201,150,46,.45);border-radius:12px;
  background:rgba(3,5,18,.38);overflow:hidden;}
.mini-board svg{display:block;width:100%;height:100%;}
.mini-floor{opacity:.72;}
.mini-sprite{filter:drop-shadow(0 0 9px rgba(63,224,255,.28));}
.mini-emitter-glow{opacity:.34;filter:drop-shadow(0 0 11px currentColor);}
.mini-beam{fill:none;stroke-linecap:round;stroke-linejoin:round;}
.mini-beam.glow{stroke-width:20;opacity:.38;filter:drop-shadow(0 0 8px currentColor);}
.mini-beam.core{stroke-width:7;opacity:.96;}
.b-R{stroke:#f01818;color:#f01818;}
.b-G{stroke:#17c964;color:#17c964;}
.b-B{stroke:#2f6bff;color:#2f6bff;}
.b-Y{stroke:#ffd21e;color:#ffd21e;}
.b-C{stroke:#22e0e8;color:#22e0e8;}
.b-M{stroke:#e838c8;color:#e838c8;}
.b-W{stroke:#fff7e0;color:#fff7e0;}
.mini-label,.mini-mirror{font-family:var(--font-display);font-weight:700;text-anchor:middle;fill:#fff7e0;pointer-events:none;}
.mini-label{font-size:24px;}
.mini-mirror{font-size:44px;fill:#3fe0ff;}
.c-red{fill:#f01818;color:#f01818;}
.c-green{fill:#17c964;color:#17c964;}
.c-blue{fill:#2f6bff;color:#2f6bff;}
.c-yellow{fill:#ffd21e;color:#ffd21e;}
.c-cyan{fill:#22e0e8;color:#22e0e8;}
.c-magenta{fill:#e838c8;color:#e838c8;}
.c-white{fill:#fff7e0;color:#fff7e0;}
.mix-table{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;padding:8px;
  border:1px solid rgba(255,247,224,.12);border-radius:10px;background:rgba(255,255,255,.035);}
.mix-row{display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:6px;font-size:12px;}
.mix-swatch{width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px currentColor;}
.mix-name{font-weight:600;}
.mix-recipe{font-family:var(--font-display);opacity:.75;}
@media (max-width:430px){
  .mini-board{height:190px;}
  .mix-table{grid-template-columns:1fr;}
}
@media (max-width:340px){
  .settings-links{grid-template-columns:1fr;}
}