/* KLONDAIRE © 2026 Mats (Matshio7) — Alle Rechte vorbehalten. Keine Lizenz: Nutzung, Kopieren, Verändern oder Weiterverwendung (auch von Teilen) ohne schriftliche Genehmigung untersagt. Siehe LICENSE. */
/* ============================================================
   NEON KLONDIKE  -  Retro Roguelike Solitaire
   Single self-contained file. No backend, no dependencies
   (other than the Google webfont). Designed mobile-first.
   Sections: PALETTE/BASE -> SCENES -> MENU -> GAME (core)
             -> ACHIEVEMENTS -> OPTIONS -> GAME OVER -> TOAST
   ============================================================ */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}   /* author rules (e.g. .mbtn display:flex) otherwise beat the UA [hidden] rule */
html,body{margin:0;min-height:100vh;font-family:'Press Start 2P',monospace;color:#dfeee6;-webkit-user-select:none;user-select:none;touch-action:manipulation}
html{background:#0a1a13}   /* dark fallback; the image lives on the animated #bgimg layer */
body{display:flex;justify-content:center;align-items:flex-start;padding:8px;padding-top:max(8px,env(safe-area-inset-top));background:transparent}

/* ---- shared palette + app frame ---- */
#app{
  --cw:46px;--ch:62px;--fanUp:-44px;--fanDn:-50px;
  --mint:#36e0a0;--gold:#ffd23f;--pink:#ff5b7f;--felt:#0e2c1d;--panel:#0a0f0b;
  width:100%;max-width:440px;position:relative;z-index:3;
  transform-origin:top center;   /* UI-scale (Options) applies transform:scale() here */
}

/* dynamic background — the image on its own oversized layer, slow Ken-Burns drift/pulse (keeps your image) */
#bgimg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:url('img/background.png') center center / cover no-repeat;
  animation:bgken 42s ease-in-out infinite;will-change:transform}
@keyframes bgken{
  0%{transform:scale(1.12) translate(0,0)}
  50%{transform:scale(1.2) translate(-2%,1.6%)}
  100%{transform:scale(1.12) translate(0,0)}}
/* solid colour tint layer between the image and the atmospheric fx */
#bgtint{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:overlay;background:rgba(54,224,160,.55);transition:background .3s}
/* atmospheric colour layer over the image: drifts, pulses & shifts hue */
#bgfx{position:fixed;inset:-12%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(45% 45% at 28% 32%, rgba(54,224,160,.20), transparent 70%),
    radial-gradient(50% 50% at 76% 70%, rgba(16,110,86,.24), transparent 72%),
    radial-gradient(42% 42% at 60% 18%, rgba(120,224,180,.12), transparent 75%);
  animation:bgatmo 24s ease-in-out infinite;will-change:transform,opacity,filter}
@keyframes bgatmo{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.65;filter:hue-rotate(0deg)}
  50%{transform:translate3d(1.5%,-1.5%,0) scale(1.12);opacity:1;filter:hue-rotate(-14deg)}
  100%{transform:translate3d(0,0,0) scale(1);opacity:.65;filter:hue-rotate(0deg)}}
@media(prefers-reduced-motion:reduce){#bgfx,#bgimg,#scanlines{animation:none}}
/* WebGL shader background canvas — hidden by default, shown when a shader is active */
#bggl{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:none;pointer-events:none}
body.bg-shader #bggl{display:block}
body.bg-shader #bgimg,body.bg-shader #bgfx,body.bg-shader #bgtint{display:none}
/* Energy save mode — freeze all background animations, kill atmospheric overlay */
body.energy-save #bgfx{display:none}
body.energy-save #bgimg{animation-play-state:paused}
body.energy-save #scanlines{animation:none}

/* global CRT scanline overlay (toggle in Options) — sibling of #app so app's scale transform can't trap it */
#scanlines{position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,var(--crt-opacity,0.3)) 2px 3px);
  animation:scanglitch 2.6s steps(2,end) infinite, scanroll .14s linear infinite}
#scanlines::after{content:'';position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.04) 60%,transparent 90%);
  animation:glitchbar 41s steps(3,end) infinite}
@keyframes scanroll{0%{background-position:0 0}100%{background-position:0 4px}}
@keyframes scanglitch{0%{opacity:1;transform:translateY(0)}50%{opacity:.55;transform:translateY(.5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes glitchbar{0%,97%{opacity:0;transform:translateX(0)}98%{opacity:1;transform:translateX(-8px)}99%{opacity:.5;transform:translateX(4px)}100%{opacity:0;transform:translateX(0)}}
body.crt-off #scanlines{display:none}
body.crt-off #stage::before{display:none}

/* ---- scene container (every screen is a framed neon panel) ---- */
.scene{background:var(--panel);border:2px solid #1c3a2b;border-radius:14px;padding:10px;
  box-shadow:0 0 22px color-mix(in srgb,var(--mint) 8%,transparent)}
.scene[hidden]{display:none !important}

/* shared headers / back buttons used by sub-screens */
.shead{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.shead .ht{flex:1;text-align:center;font-size:12px;color:var(--mint);letter-spacing:1px}
.iconbtn{font-family:'Press Start 2P',monospace;font-size:12px;width:34px;height:34px;
  border-radius:8px;border:1.5px solid #2c5a43;background:#0d2419;color:var(--mint);cursor:pointer;line-height:1}
.iconbtn:active{transform:scale(.95)}

/* =================== MENU =================== */
#scene-menu{min-height:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;padding:26px 16px 24px;position:relative;overflow:hidden}
.logo{text-align:center;font-size:22px;line-height:1.5;letter-spacing:2px;white-space:nowrap;color:var(--mint);
  text-shadow:0 0 8px color-mix(in srgb,var(--mint) 80%,transparent),0 0 18px color-mix(in srgb,var(--mint) 40%,transparent);animation:glow 2.4s ease-in-out infinite}
.logo .h{color:var(--pink);text-shadow:0 0 8px color-mix(in srgb,var(--pink) 80%,transparent)}
.logo .d{color:var(--gold);text-shadow:0 0 8px color-mix(in srgb,var(--gold) 80%,transparent)}
@keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
.tag{font-size:8px;color:#7fae98;letter-spacing:1px;text-align:center;margin-top:-8px}
.menu-btns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}
.mbtn{font-family:'Press Start 2P',monospace;font-size:12px;padding:15px 12px;border-radius:10px;
  border:2px solid #2c5a43;background:#0d2419;color:var(--mint);cursor:pointer;letter-spacing:1px;
  display:flex;align-items:center;gap:10px;justify-content:flex-start;transition:transform .05s,box-shadow .15s}
.mbtn:active{transform:scale(.98)}
.mbtn:hover{box-shadow:0 0 14px color-mix(in srgb,var(--mint) 35%,transparent)}
.mbtn .mi{font-size:13px;width:18px;text-align:center}
.mbtn.gold{border-color:#6b5410;color:var(--gold);background:#241d07}
.mbtn.gold:hover{box-shadow:0 0 14px color-mix(in srgb,var(--gold) 35%,transparent)}
.mbtn.danger{border-color:#5a2238;color:var(--pink);background:#240913}
.mbtn.danger:hover{box-shadow:0 0 14px color-mix(in srgb,var(--pink) 35%,transparent)}
.mbtn:disabled{opacity:.45;cursor:default;border-color:#2c4a3a;color:#4a6a5a;background:#0d2419}
.mbtn:disabled:hover{box-shadow:none}
.menu-foot{font-size:8px;color:#5f8f78;text-align:center;line-height:2;margin-top:4px}
.menu-foot b{color:var(--gold)}
.diff-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:9px;margin:0 2px;cursor:pointer;border:1.5px solid #2c5a43;background:#0d2419;color:#5f8f78;vertical-align:middle;line-height:1}
.diff-dot.diff-active{border-color:var(--gold);color:var(--gold);background:#241d07;box-shadow:0 0 6px rgba(255,210,63,.4)}
.diff-dot.diff-locked{opacity:.3;cursor:default;border-color:#1a3a2a;color:#2a4a3a}
.diff-dot:active{transform:scale(.92)}
.diff-desc{font-size:7px;color:#7fae98;line-height:1.6;margin-top:2px}
/* build version: pinned to the very bottom, intentionally near-invisible (dark on dark) */
.menu-build{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1.5px;color:#17261d;z-index:1;pointer-events:auto;user-select:none;cursor:default}
.menu-build.dev-active{color:var(--mint)}
.dev-panel{position:absolute;bottom:38px;left:0;right:0;display:flex;justify-content:center;z-index:3;padding:0 10px;pointer-events:none}
.dev-panel[hidden]{display:none}
.dev-panel .opt-reset{font-size:8px;padding:8px 12px;pointer-events:auto}
.menu-ios{position:absolute;bottom:4px;left:8px;z-index:3;font-family:'Press Start 2P',monospace;font-size:7px;letter-spacing:.5px;color:#3a6b54;background:none;border:none;cursor:pointer;padding:2px}
.menu-ios:hover{color:var(--mint)}
.menu-faq{position:absolute;bottom:4px;right:8px;z-index:3;font-family:'Press Start 2P',monospace;font-size:7px;letter-spacing:1px;color:#3a6b54;background:none;border:none;cursor:pointer;padding:2px}
.menu-faq:hover{color:var(--mint)}
.iostip{position:absolute;bottom:22px;left:8px;width:188px;background:#0e2418;border:1px solid #2c5a43;border-radius:8px;padding:10px 11px;font-size:8px;color:#bfe6d4;line-height:1.85;z-index:80;text-align:left;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.iostip b{color:var(--mint)}
/* FAQ scene */
.faq-desc{font-size:8px;color:#5f8f78;text-align:center;line-height:1.6;margin:-6px 0 12px}
.faq-list{display:flex;flex-direction:column;gap:6px;max-height:calc(100vh - 100px);overflow:auto;padding-right:2px;max-width:360px;margin:0 auto}
.faq-cat{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--mint);letter-spacing:1px;padding:10px 0 4px 2px;border-bottom:1px solid #244;margin-bottom:2px}
.faq-cat .svgi{font-size:12px;color:var(--gold)}
.faq-item{background:#0a1a13;border:1px solid #1c3a2b;border-radius:9px;padding:0;cursor:pointer;overflow:hidden;transition:border-color .2s,border-radius .2s}
.faq-item:hover{border-color:#2c5a43}
.faq-item.open{border-color:#6b5410}
.faq-q{font-size:8px;color:var(--gold);line-height:1.6;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.faq-q::after{content:'';display:inline-block;width:7px;height:7px;border-right:2px solid #5f8f78;border-bottom:2px solid #5f8f78;transform:rotate(-45deg);transition:transform .25s,margin .25s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg);margin-top:-4px}
.faq-a{font-size:8px;color:#bfe6d4;line-height:1.85;max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease;padding:0 12px}
.faq-item.open .faq-a{max-height:999px;padding:8px 12px 10px}
.faq-a span{display:block;padding:0 0 10px;border-top:1px solid #244;padding-top:8px;margin-top:0}
/* drifting suit glyphs in the menu background */
.drift{position:absolute;color:rgba(54,224,160,.08);font-size:40px;pointer-events:none;z-index:0;animation:drift 14s linear infinite}
@keyframes drift{0%{transform:translateY(110%) rotate(0)}100%{transform:translateY(-130%) rotate(40deg)}}
.menu-card{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.menu-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:72px} /* compact header band; modest centered gap around the name */
/* update post-it — sits on top of the menu, tilted, like a sticky note */
#postit{position:absolute;top:88px;right:-58px;width:144px;z-index:70;display:none;cursor:pointer;
  background:#f3e7a6;color:#2a2410;border-radius:3px 3px 0 0;padding:10px 10px 0;
  transform:rotate(4.5deg);box-shadow:0 8px 16px rgba(0,0,0,.55);
  font-family:'Press Start 2P',monospace;transition:transform .12s}
#postit:hover{transform:rotate(2deg) scale(1.03)}
#postit:active{transform:rotate(2deg) scale(.99)}
#postit::before{content:"";position:absolute;top:-8px;left:50%;width:54px;height:16px;
  transform:translateX(-50%) rotate(-3deg);background:rgba(214,200,120,.55);border:1px solid rgba(0,0,0,.12)}
#postit .pt-h{font-size:8px;color:#7a5c00;letter-spacing:.5px;margin-bottom:7px}
#postit ul{margin:0;padding-left:10px}
#postit li{font-size:7px;line-height:1.55;margin-bottom:4px;color:#2a2410;overflow-wrap:break-word;word-break:break-word}
#postit .pt-old{font-size:6px;color:#5c4e2a;margin-top:5px;border-top:1px dashed rgba(42,36,16,.3);padding-top:4px}
#postit .pt-more{margin-top:6px;border-top:1px dashed rgba(42,36,16,.5)}
#postit .pt-tear{font-size:7px;color:#7a5c00;text-align:center;line-height:1.4;padding:5px 0 6px}
#postit .pt-fringe{display:flex;gap:3px;height:14px;margin:0 -10px -14px}
#postit .pt-fringe span{flex:1;background:#f3e7a6;border-radius:0 0 2px 2px;box-shadow:0 2px 3px rgba(0,0,0,.3);cursor:pointer;transition:transform .1s}
#postit .pt-fringe span:hover{transform:translateY(3px)}
#postit .pt-fringe span.torn{animation:tearaway .7s ease forwards;pointer-events:none}
@keyframes tearaway{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translate(7px,48px) rotate(22deg);opacity:0}}
.pt-fortune{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);width:158px;background:#f3e7a6;color:#2a2410;font-family:'Press Start 2P',monospace;font-size:7px;line-height:1.55;text-align:center;padding:8px;border-radius:3px;box-shadow:0 5px 13px rgba(0,0,0,.55);z-index:80;pointer-events:none;animation:fortuneDrop 2.7s ease forwards}
@keyframes fortuneDrop{0%{opacity:0;transform:translate(-50%,-6px) rotate(-3deg)}12%{opacity:1}78%{opacity:1}100%{opacity:0;transform:translate(-50%,36px) rotate(5deg)}}
.pt-fortune.mean{color:#8a1f1f;box-shadow:0 5px 13px rgba(120,0,0,.45);animation-duration:3.4s}
@media (max-width:480px){#postit{right:-6px;top:88px}}   /* on phones keep the note on-panel so it isn't clipped */

/* second sticky — leaderboard reset info + roadmap (in-flow, below the menu card) */
#infonote{position:relative;width:100%;max-width:296px;margin:4px auto 2px;
  background:linear-gradient(165deg,#f7edb2,#efdd92);color:#2a2410;border-radius:3px;
  padding:14px 15px 13px;transform:rotate(-1.3deg);box-shadow:0 7px 15px rgba(0,0,0,.4);
  font-family:'Press Start 2P',monospace;text-align:left}
#infonote::before{content:"";position:absolute;top:-9px;left:50%;width:64px;height:17px;
  transform:translateX(-50%) rotate(2deg);background:rgba(127,174,152,.5);border:1px solid rgba(255,255,255,.2);box-shadow:0 2px 4px rgba(0,0,0,.25)}
#infonote .in-h{font-size:9px;color:#7a5c00;letter-spacing:.6px;margin-bottom:9px}
#infonote .in-p{font-size:7px;line-height:1.75;margin:0 0 7px;color:#2a2410;overflow-wrap:break-word;word-break:break-word}
#infonote .in-p b{color:#12100a}
#infonote .in-muted{color:#5c4e2a;margin-bottom:2px}
#infonote .in-road{margin-top:5px;border-top:1px dashed rgba(42,36,16,.4);padding-top:8px}
#infonote .in-road summary{font-size:8px;color:#7a5c00;letter-spacing:.5px;cursor:pointer;list-style:none;outline:none}
#infonote .in-road summary::-webkit-details-marker{display:none}
#infonote .in-road[open] summary{margin-bottom:3px}
#infonote .in-road ul{margin:7px 0 0;padding-left:12px}
#infonote .in-road li{font-size:7px;line-height:1.65;margin-bottom:5px;color:#2a2410;overflow-wrap:break-word;word-break:break-word}
#infonote .in-road li b{color:#12100a}
#infonote .in-road li i{color:#3f6a2a;font-style:normal}

/* =================== GAME (core, preserved) =================== */
#hud{display:flex;justify-content:space-between;align-items:flex-start;font-size:11px;line-height:1.5;margin-bottom:6px;gap:6px}
#hud .lbl{color:#5f8f78;font-size:9px}
#hud .val{font-size:12px}
#chips{color:var(--mint)} #chips.pulse{animation:pop .3s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35);color:#fff}100%{transform:scale(1)}}
#tgt{color:var(--gold)} #coins{color:var(--gold)} #ante{color:var(--pink)}
#multline{font-size:9px;color:#5f8f78;margin-top:3px}
#mult{color:var(--pink);font-size:11px}
#multtags{display:flex;gap:3px;justify-content:center;flex-wrap:wrap;margin-top:3px;min-height:16px}
.mtag{font-size:7px;padding:1px 4px;border-radius:3px;background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.2);color:var(--gold);transition:background .15s,transform .15s}
.mtag.mtag-hit{background:rgba(255,210,63,.4);transform:scale(1.15)}
#multtags.enginebar{margin:5px auto 0;max-width:380px}
.mtag-spec{background:rgba(54,224,160,.12);border-color:rgba(54,224,160,.35);color:var(--mint)}
.mtag-item{background:#0d2419;border:1px solid #2c5a43;color:var(--mint);cursor:pointer;font-family:inherit}
.mtag-item:active{transform:scale(.94)}
#bossstrip{font-size:8px;color:var(--pink);border:1px solid #5a2238;background:#240913;border-radius:6px;padding:5px 7px;margin-bottom:7px;line-height:1.7;text-align:center}
#bossstrip.hidden{display:none}
#nomovestrip{font-size:8px;color:var(--gold);border:1px solid #6a5212;background:#241c05;border-radius:6px;padding:6px 8px;margin-bottom:7px;line-height:1.6;text-align:center;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
#nomovestrip.hidden{display:none}
#nomovestrip button{font-family:inherit;font-size:8px;letter-spacing:.5px;color:#1a1205;background:var(--gold);border:none;border-radius:5px;padding:5px 10px;cursor:pointer}
#nomovestrip button:active{transform:translateY(1px)}
#stage{position:relative;background:var(--felt);border-radius:10px;padding:8px;min-height:62vh;border:1px solid #173a28;overflow:hidden}
#stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);border-radius:10px;z-index:50}
#board{position:relative;z-index:2}
#top{display:flex;align-items:flex-start;gap:4px;margin-bottom:10px}
.loading-pulse{animation:lpulse 1.1s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:.4}50%{opacity:1}}
.founds{display:flex;gap:4px}.spacer{flex:1}
.col{display:flex;flex-direction:column;align-items:center}
#tab{display:flex;gap:4px;justify-content:space-between}
.slot{width:var(--cw);height:var(--ch);border-radius:5px;border:1.5px dashed rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:calc(var(--cw)*0.3);color:rgba(255,255,255,.25)}
.card{width:var(--cw);height:var(--ch);border-radius:5px;position:relative;cursor:pointer;background:#f4f1e4;border:1px solid #20140a;font-family:'Press Start 2P',monospace}
.card .cn{position:absolute;top:3px;left:4px;font-size:calc(var(--cw)*0.22);line-height:1;display:flex;align-items:center;gap:1px}
.card .pip{position:absolute;bottom:3px;right:4px;font-size:calc(var(--cw)*0.40);line-height:1}
.card .pip .svgi{display:block}
.card.red{color:#d8332f}.card.blk{color:#16110a}
.four-color .s-2{color:#2266dd}.four-color .s-3{color:#33aa55}
.card.down{background:#13261c;border:1px solid var(--mint);background-image:repeating-linear-gradient(45deg,#163a29 0 6px,#0f2a1e 6px 12px)}
.card.spec{background:#f3e7a6;border:1px solid #6b5410;box-shadow:0 0 7px rgba(255,210,63,.6)}
.card.spec .cn,.card.spec .pip{color:#7a5c00}
.card.spec .pip{font-size:calc(var(--cw)*0.5)}
.card.sel{box-shadow:0 0 0 3px var(--gold);transform:translateY(-4px);z-index:99}
.fan{margin-top:var(--fanUp)}.fan.dn{margin-top:var(--fanDn)}
.scorepop{position:absolute;left:50%;top:36px;font-size:14px;color:var(--gold);z-index:70;pointer-events:none;animation:floatUp .8s ease forwards}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,8px)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-30px)}}
.btn{flex:1;font-family:'Press Start 2P',monospace;font-size:10px;padding:11px 4px;border-radius:8px;border:1.5px solid #2c5a43;background:#0d2419;color:var(--mint);cursor:pointer;line-height:1.4;word-break:break-word;hyphens:auto}
/* ---- inline SVG icon sizing ---- */
.svgi{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.svgi svg{width:1em;height:1em;display:block}
.iconbtn svg{width:17px;height:17px;display:block}
.iconbtn{display:flex;align-items:center;justify-content:center;padding:0}
.iconbtn.danger{border-color:#5a2238;color:var(--pink);background:#240913}
.iconbtn.ubtn{width:auto;min-width:34px;gap:3px;padding:0 8px}
.iconbtn.ubtn b{font-size:10px;color:var(--gold)}
.iconbtn.off{opacity:.38;pointer-events:none}
.mbtn .mi svg{width:15px;height:15px;display:block}
.mbtn .mi{display:inline-flex;align-items:center;justify-content:center}
.ach-ic svg{width:18px;height:18px;display:block;margin:0 auto}
/* ---- top control bar (replaces the old bottom bar) ---- */
#topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:2px 0 8px}
.tb-left{justify-self:start;display:flex;gap:6px}
.tb-right{justify-self:end;display:flex;gap:6px}
#recchip{justify-self:center;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:#7fae98}
#recchip .svgi{font-size:14px;color:var(--mint)}
#recchip b{color:var(--mint);font-size:12px}
#recchip.last .svgi,#recchip.last b{color:var(--pink)}
.reclast{color:var(--pink);font-size:8px;letter-spacing:.5px;animation:recblink 1s steps(2,start) infinite}
@keyframes recblink{50%{opacity:.45}}
/* tutorial coach + highlight glow */
.tut-glow{box-shadow:0 0 0 3px var(--gold),0 0 14px rgba(255,210,63,.7)!important;animation:tutpulse 1.1s ease-in-out infinite}
@keyframes tutpulse{50%{box-shadow:0 0 0 3px var(--gold),0 0 22px rgba(255,210,63,.95)!important}}
#hud.tutglow{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.tutbox{margin-top:8px;background:#15200a;border:1.5px solid color-mix(in srgb,var(--gold) 60%,#000);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:9px;align-items:center;text-align:center}
.tutbox[hidden]{display:none}
#tuttext{font-size:9px;color:#ffe8a8;line-height:1.85}
#tuttext b{color:var(--gold)}
.tuthint{font-size:8px;color:var(--gold);animation:recblink 1s steps(2,start) infinite}
.tut-skip{font-size:7px;color:color-mix(in srgb,var(--gold) 70%,#000);background:none;border:none;cursor:pointer;text-decoration:underline}
/* ---- in-game ITEMS panel (rendered in #overlay) ---- */
.items-list{display:flex;flex-direction:column;gap:7px;width:100%;max-width:360px;margin:0 auto}
.ideck{font-size:8px;color:var(--gold);border:1px solid #6b5410;background:#241d07;border-radius:8px;padding:9px 10px;text-align:left;line-height:1.7}
.ideck b{font-size:10px}
.iboss{font-size:8px;color:var(--pink);border:1px solid #5a2238;background:#240913;border-radius:8px;padding:9px 10px;text-align:left;line-height:1.7}
.ispec{font-size:8px;color:#caa53a;border:1px solid #6b5410;background:#1d1907;border-radius:8px;padding:9px 10px;text-align:left;line-height:1.7}
.ispec b{color:var(--gold)}
/* ---- patch-notes / news scene ---- */
#scene-news{min-height:calc(100vh - 20px)}
.news-list{display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 100px);overflow:auto;padding-right:2px;max-width:360px;margin:0 auto}
.patch{background:#0e2418;border:1px solid #244;border-radius:9px;padding:11px 12px}
.patch h4{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px;font-size:10px;color:var(--mint);letter-spacing:1px}
.patch h4 .dt{color:#5f8f78;font-size:8px}
.patch ul{margin:0;padding-left:14px}
.patch li{font-size:8px;color:#bfe6d4;line-height:1.9;margin-bottom:4px}
.btn:active{transform:scale(.97)}
.btn.gold{border-color:#6b5410;color:var(--gold);background:#241d07}
#overlay{position:absolute;inset:0;z-index:60;background:#070f0a;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;text-align:center;gap:12px;overflow:auto}
#overlay::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 2px 3px);border-radius:10px}
body.crt-off #overlay::before{display:none}
#overlay.hidden{display:none}
#overlay h3{font-size:15px;margin:0;line-height:1.5}
#overlay .sub{font-size:9px;color:#7fae98;line-height:1.9}
.shop{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px;margin:0 auto}
.perk{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#0e2418;border:1px solid #244;border-radius:8px;padding:8px 10px;text-align:left}
.perk.mlt{border-color:#5a2238}
.perk.spec{border-color:#6b5410;background:#1d1907}
.perk.spec .pn{color:var(--gold)}
.perk .pn{font-size:10px;color:var(--mint);line-height:1.5}
.perk.mlt .pn{color:var(--pink)}
.perk .pd{font-size:8px;color:#8fbfa6;line-height:1.7;margin-top:3px}
.perk .buy{font-size:10px;color:var(--gold);border:1.5px solid #6b5410;background:#241d07;border-radius:6px;padding:9px 10px;cursor:pointer;white-space:nowrap}
.perk .buy:disabled{opacity:.35}
/* v0.8.0: Boss-Vorschau + Raritäten + Verbrauchsgegenstände + Vouchers */
.bossprev{font-size:8px;color:var(--pink);background:#1a0a10;border:1px solid #5a2238;border-radius:7px;padding:7px 9px;margin-top:2px;line-height:1.6;text-align:center}
.perk.pr-s{border-color:#2f6bb0}
.perk.pr-s .pn{color:#8fd0ff}
.perk.pr-l{border-color:var(--gold);box-shadow:0 0 8px color-mix(in srgb,var(--gold) 30%,transparent)}
.perk.pr-l .pn{color:var(--gold)}
.perk.cons{border-color:#2c5a43;background:#0d2419}
.perk.cons .pn{color:var(--mint)}
.perk.vouch{border-color:#5a4a12;background:#191407}
.perk.vouch .pn{color:#e8c75a}
.owned{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:2px}
.tag-pill{font-size:8px;background:#241d07;color:var(--gold);border:1px solid #5a4a12;border-radius:5px;padding:4px 6px}
.tag-pill.m{background:#240913;color:var(--pink);border-color:#5a2238}
.perk.sel{border-color:var(--gold);box-shadow:0 0 7px rgba(228,196,80,.4)}
.perk.lock .pn{color:#7fae98}
.deck-aktiv{font-size:9px;color:var(--gold);border:1.5px solid #6b5410;background:#241d07;border-radius:6px;padding:9px 11px;white-space:nowrap}
#stage.shake{animation:shk .18s}
@keyframes shk{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){#stage.shake{animation:none}}
/* =================== ACHIEVEMENTS =================== */
#scene-ach{min-height:62vh}
.ach-prog{text-align:center;font-size:9px;color:#7fae98;margin-bottom:10px}
.ach-prog b{color:var(--gold)}
.ach-bar{height:8px;border-radius:5px;background:#0e2418;border:1px solid #244;overflow:hidden;margin:6px 0 12px}
.ach-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--gold));box-shadow:0 0 8px rgba(54,224,160,.5)}
.ach-grid{display:flex;flex-direction:column;gap:7px;max-height:54vh;overflow:auto;padding-right:2px;max-width:360px;margin:0 auto}
.ach{display:flex;align-items:center;gap:10px;border-radius:9px;padding:9px 10px;border:1px solid #244;background:#0e2418}
.ach.off{opacity:.5;filter:grayscale(.6)}
.ach.on{border-color:#6b5410;background:#15200a;box-shadow:0 0 10px rgba(255,210,63,.15)}
.ach-ic{font-size:18px;width:26px;text-align:center}
.ach-nm{font-size:10px;color:var(--mint);line-height:1.5}
.ach.on .ach-nm{color:var(--gold)}
.ach-ds{font-size:8px;color:#8fbfa6;line-height:1.7;margin-top:3px}

/* theme selector in options */
.theme-set{display:flex;flex-wrap:wrap;gap:6px}
.theme-btn{flex:1;min-width:60px;display:flex;flex-direction:column;align-items:center;gap:4px;font-family:'Press Start 2P',monospace;font-size:7px;padding:8px 4px;border-radius:8px;border:1.5px solid #2c5a43;background:#0d2419;color:#7fae98;cursor:pointer;line-height:1.4}
.theme-btn:hover{box-shadow:0 0 8px color-mix(in srgb,var(--mint) 30%,transparent)}
.theme-btn.theme-active{border-color:var(--gold);color:var(--gold);background:#241d07;box-shadow:0 0 8px rgba(255,210,63,.3)}
.theme-swatch{width:20px;height:12px;border-radius:3px;border:1px solid rgba(255,255,255,.15)}

/* foundation order selector */
.found-order{display:flex;gap:6px;justify-content:center}
.fo-suit{flex:1;display:flex;align-items:center;justify-content:center;height:42px;border-radius:8px;border:1.5px solid #2c5a43;background:#0d2419;color:#7fae98;cursor:pointer;font-size:18px;padding:0}
.fo-suit:hover{box-shadow:0 0 8px color-mix(in srgb,var(--mint) 30%,transparent)}
.fo-suit.fo-sel{border-color:var(--gold);color:var(--gold);background:#241d07;box-shadow:0 0 8px rgba(255,210,63,.3)}
.fo-suit svg{width:22px;height:22px}

/* =================== OPTIONS =================== */
#scene-opts{min-height:62vh}
.orow{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#0e2418;border:1px solid #244;border-radius:9px;padding:13px 12px;margin-bottom:9px}
.orow .ol{font-size:10px;color:var(--mint);line-height:1.6}
.orow .od{font-size:8px;color:#8fbfa6;margin-top:4px;line-height:1.7}
.tgl{font-family:'Press Start 2P',monospace;font-size:10px;min-width:62px;padding:11px 8px;border-radius:7px;border:1.5px solid #5a2238;background:#240913;color:var(--pink);cursor:pointer}
.tgl.on{border-color:#2c5a43;background:#0d2419;color:var(--mint)}
.tgl:active{transform:scale(.97)}
input.vol{-webkit-appearance:none;appearance:none;width:100%;height:18px;background:transparent;cursor:pointer;margin:0}
input.vol::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:var(--felt);border:1px solid #2c5a43}
input.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:3px;background:var(--mint);border:1px solid #0a0f0b;margin-top:-6px;box-shadow:0 0 6px rgba(54,224,160,.5)}
input.vol::-moz-range-track{height:6px;border-radius:4px;background:var(--felt);border:1px solid #2c5a43}
input.vol::-moz-range-thumb{width:15px;height:15px;border-radius:3px;background:var(--mint);border:1px solid #0a0f0b;box-shadow:0 0 6px rgba(54,224,160,.5)}
.opt-reset{font-family:'Press Start 2P',monospace;font-size:9px;width:100%;padding:12px;border-radius:8px;border:1.5px solid #5a2238;background:#1a0a10;color:var(--pink);cursor:pointer;margin-top:6px;line-height:1.6}
.opt-about{font-size:8px;color:#5f8f78;text-align:center;line-height:2;margin-top:14px}
/* ---- cloud save screen ---- */
.cloud-body{display:flex;flex-direction:column;gap:11px;max-width:360px;margin:0 auto}
.cloud-card{display:flex;flex-direction:column;align-items:flex-start;gap:9px;background:#0e2418;border:1px solid #244;border-radius:10px;padding:14px 13px}
.cl-lbl{font-size:9px;color:var(--gold);letter-spacing:.5px}
.cl-sub{font-size:8px;color:#8fbfa6;line-height:1.9}
.cl-warn{font-size:7px;color:#c98}
.cl-code{font-size:20px;color:var(--mint);letter-spacing:5px;background:#06120c;border:1.5px dashed #2c5a43;border-radius:8px;padding:11px 14px;width:100%;text-align:center;box-sizing:border-box}
.cloud-in{font-family:'Press Start 2P',monospace;font-size:12px;width:100%;box-sizing:border-box;padding:12px 11px;border-radius:8px;border:1.5px solid #2c5a43;background:#06120c;color:var(--mint);letter-spacing:2px;text-transform:uppercase}
.cloud-in::placeholder{color:#3f6b56;letter-spacing:1px}
.cloud-in:focus{outline:none;border-color:var(--gold)}
.cl-status{min-height:14px;font-size:8px;line-height:1.8;color:#8fbfa6;text-align:center;margin-top:2px}

/* ---- leaderboard / rangliste ---- */
.lb-toggle{display:flex;gap:6px;justify-content:center;margin:0 auto 10px;max-width:360px}
.lb-tab{flex:1;font-family:'Press Start 2P',monospace;font-size:9px;padding:10px 4px;border-radius:7px;border:1.5px solid #2c5a43;background:#0d2419;color:#7fae98;cursor:pointer;text-align:center;line-height:1.3}
.lb-tab:hover{box-shadow:0 0 10px color-mix(in srgb,var(--mint) 25%,transparent)}
.lb-tab.active{border-color:var(--gold);color:var(--gold);background:#241d07;box-shadow:0 0 8px rgba(255,210,63,.25)}
.lb-tab.active:hover{box-shadow:0 0 10px color-mix(in srgb,var(--gold) 35%,transparent)}
.lb-diff-toggle{display:flex;gap:4px;margin:0 auto 10px;max-width:360px;overflow-x:auto;padding-bottom:3px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.lb-diff-toggle .lb-tab{font-size:7px;padding:7px 6px;flex:0 0 auto}
.lb-body{display:flex;flex-direction:column;gap:6px;max-height:52vh;overflow:auto;padding:0 2px 2px;max-width:380px;margin:0 auto}
.lb-row{display:flex;align-items:center;gap:9px;background:#0e2418;border:1px solid #1c3a2b;border-radius:9px;padding:9px 11px;cursor:pointer;transition:border-color .15s}
.lb-row:active{transform:scale(.99)}
.lb-rank{min-width:24px;text-align:center;font-size:13px;font-weight:bold;color:#5f8f78}
.lb-1{border-color:#6b5410;background:#1a1607}
.lb-2{border-color:#3a4650}
.lb-3{border-color:#5a3a1e}
.lb-1 .lb-rank{color:var(--gold)}
.lb-2 .lb-rank{color:#cfd6dd}
.lb-3 .lb-rank{color:#cd7f32}
.lb-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left}
.lb-name{color:var(--mint);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-meta{font-size:7px;color:#7fae98;letter-spacing:.4px;line-height:1.6;word-break:break-word}
.lb-sc{display:flex;flex-direction:column;align-items:flex-end;gap:3px;white-space:nowrap}
.lb-ante{font-size:10px;color:var(--gold)}
.lb-chips{font-size:8px;color:#8fbfa6}
.lb-exp{color:#3a6b54;font-size:8px;margin-left:1px}
.lb-me{border-color:var(--mint);background:#102a1d;box-shadow:0 0 9px color-mix(in srgb,var(--mint) 22%,transparent)}
.lb-me .lb-name{color:#bfffe6}
.lb-det{font-size:8px;color:#8fbfa6;background:#0a1a13;border:1px solid #1c3a2b;border-top:none;border-radius:0 0 9px 9px;padding:7px 12px;margin:-5px 0 0;line-height:2;max-width:380px}
.lb-detk{color:var(--gold);font-size:7px;letter-spacing:.5px}

/* UI-size segmented control */
.scaleset{display:flex;gap:5px}
.scaleset.disabled{opacity:.4;pointer-events:none}
.sbtn{flex:1;font-family:'Press Start 2P',monospace;font-size:9px;padding:10px 2px;border-radius:7px;border:1.5px solid #2c5a43;background:#0d2419;color:#7fae98;cursor:pointer}
.sbtn.on{color:var(--mint);border-color:var(--mint);background:#10301f}
.sbtn:active{transform:scale(.96)}
/* subtle help affordance on HUD + in-game help panel */
#hud [title]{cursor:help}
/* help highlights + floating labels */
.hlp-glow{position:relative;z-index:5}
.hlp-glow-found{box-shadow:0 0 0 2px var(--mint),0 0 12px color-mix(in srgb,var(--mint) 60%,transparent)!important;border-radius:4px}
.hlp-glow-stock{box-shadow:0 0 0 2px var(--gold),0 0 12px color-mix(in srgb,var(--gold) 60%,transparent)!important;border-radius:4px}
.hlp-glow-tab{box-shadow:inset 0 0 0 2px var(--pink),0 0 14px color-mix(in srgb,var(--pink) 40%,transparent)!important;border-radius:6px}
.hlp-glow-hud{filter:brightness(1.3)}
/* floating labels between stage top and the board */
.hlp-label{font-size:8px;color:#bfe6d4;line-height:1.5;padding:5px 8px;margin:0 0 6px;background:rgba(0,0,0,.8);border-radius:5px;text-align:center}
.hlp-label b{color:var(--gold)}
.hlp-label-found{border-left:3px solid var(--mint)}
.hlp-label-stock{border-left:3px solid var(--gold)}
.hlp-label-tab{border-left:3px solid var(--pink)}
/* goal banner inside the stage */
.hlp-goal{position:absolute;bottom:42px;left:8px;right:8px;font-size:7px;color:#bfe6d4;text-align:center;padding:5px 8px;background:rgba(0,0,0,.75);border:1px solid #6b5410;border-radius:5px;line-height:1.5;z-index:40}
.hlp-goal b{color:var(--gold)}
.hlp-dismiss{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);z-index:45;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--pink);background:rgba(0,0,0,.8);color:var(--pink);font-size:12px;cursor:pointer;font-family:'Press Start 2P',monospace;line-height:0}
/* round-clear reward breakdown (stacked + readable) */
.rwd{display:flex;flex-direction:column;gap:6px;width:100%;max-width:280px;margin:2px auto 0}
.rwd .rr{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:9px;line-height:1.4}
.rwd .rr .rl{color:#9fc7b4;text-align:left}
.rwd .rr .rv{color:var(--mint);white-space:nowrap}
.rwd .rtot{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:3px;padding-top:8px;border-top:1px solid #2c5a43;font-size:11px;color:var(--gold)}

/* =================== GAME OVER =================== */
#scene-over{min-height:62vh;display:flex;flex-direction:column;gap:12px}
.go-title{text-align:center;font-size:18px;color:var(--pink);letter-spacing:2px;margin:6px 0 2px;
  text-shadow:0 0 10px color-mix(in srgb,var(--pink) 70%,transparent);animation:gofx .5s ease}
@keyframes gofx{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.go-sub{text-align:center;font-size:9px;color:#7fae98;line-height:1.9}
.go-records{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.rec{font-size:8px;color:var(--gold);background:#241d07;border:1px solid #6b5410;border-radius:6px;padding:5px 7px;
  animation:recpop .4s ease;line-height:1.5}
@keyframes recpop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.go-chartwrap{background:#0e2418;border:1px solid #244;border-radius:10px;padding:10px 10px 6px}
.go-chartlbl{font-size:8px;color:#5f8f78;margin-bottom:8px;text-align:center}
.go-chart{height:120px;position:relative;display:flex;align-items:flex-end;gap:4px;padding-top:6px}
.tline{position:absolute;left:0;right:0;bottom:71.4%;border-top:1px dashed rgba(255,210,63,.6);z-index:1}
.tline span{position:absolute;right:0;top:-10px;font-size:7px;color:var(--gold)}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0;z-index:2}
.bwrap{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
.bfill{width:78%;border-radius:3px 3px 0 0;min-height:3px;transition:height .5s ease}
.bfill.win{background:var(--mint);box-shadow:0 0 8px rgba(54,224,160,.6)}
.bfill.boss{background:var(--gold);box-shadow:0 0 8px rgba(255,210,63,.6)}
.bfill.fail{background:var(--pink);box-shadow:0 0 8px rgba(255,91,127,.6)}
.blab{font-size:7px;color:#7fae98;margin-top:4px}
.go-legend{display:flex;gap:10px;justify-content:center;font-size:7px;color:#7fae98;margin-top:8px}
.go-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:middle}
.go-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.gs{background:#0e2418;border:1px solid #244;border-radius:8px;padding:9px 10px}
.gs .k{font-size:8px;color:#5f8f78}
.gs .v{font-size:13px;color:var(--mint);margin-top:5px}
.go-achh{font-size:8px;color:var(--gold);text-align:center;margin:4px 0 2px;letter-spacing:1px}
.go-achbadges{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.go-btns{display:flex;gap:8px;margin-top:2px}

/* auto-clear button on the board */
.auto-clear{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;padding:10px 14px;border-radius:8px;border:1.5px solid #6b5410;background:#241d07;color:var(--gold);font-family:'Press Start 2P',monospace;font-size:10px;cursor:pointer;max-width:220px;animation:autopulse 1.6s ease-in-out infinite}
.auto-clear .svgi{font-size:13px}
.auto-clear:active{transform:scale(.97)}
@keyframes autopulse{0%,100%{box-shadow:0 0 6px rgba(255,210,63,.25)}50%{box-shadow:0 0 16px rgba(255,210,63,.55)}}

/* goodbye screen */
#scene-bye{min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:30px 18px}
#scene-bye .by{font-size:14px;color:var(--mint);line-height:1.8}
#scene-bye .bs{font-size:9px;color:#7fae98;line-height:1.9}