/* Larissa's Gamebox — shared game menu UI */
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;height:100dvh;overflow:hidden;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#fff;
  touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
#c{display:block;width:100%;height:100%;touch-action:none}

#ui{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s}
#ui.on,#ui.flex-on{display:flex;pointer-events:auto;opacity:1;visibility:visible}

.gb-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:var(--bg,#050010)}
.gb-bg::before{content:'';position:absolute;inset:-50%;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0deg,var(--glow1,rgba(255,45,154,.12)) 60deg,transparent 120deg,var(--glow2,rgba(0,240,255,.1)) 200deg,transparent 280deg);
  animation:gbSpin 18s linear infinite}
.gb-bg::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,var(--glow1,rgba(255,45,154,.18)),transparent 55%),
  radial-gradient(ellipse 50% 40% at 100% 80%,var(--glow2,rgba(0,240,255,.08)),transparent)}
@keyframes gbSpin{to{transform:rotate(360deg)}}

.gb-panel{width:min(400px,94vw);padding:1.65rem 1.35rem 1.45rem;text-align:center;position:relative;z-index:2;
  background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--border,rgba(255,255,255,.14));border-radius:22px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 60px var(--shadow,rgba(180,40,255,.15)),inset 0 1px 0 rgba(255,255,255,.1)}
.gb-panel::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent,#ff2d9a),transparent)}

.gb-ico{width:64px;height:64px;margin:0 auto .75rem;border-radius:18px;font-size:1.85rem;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--ico-bg,rgba(255,45,154,.15)),rgba(0,0,0,.3));
  border:1px solid var(--border,rgba(255,45,154,.3));box-shadow:0 8px 24px var(--shadow,rgba(180,40,255,.2))}
.gb-vibe{font-size:.58rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2,#ff9ec8);margin-bottom:.45rem}
.gb-logo{font-size:clamp(1.45rem,6.5vw,2rem);font-weight:900;letter-spacing:.12em;line-height:1.1;
  background:var(--logo-grad,linear-gradient(92deg,#ff2d9a,#c44dff 40%,#fff 55%,#00f0ff));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.gb-sub{color:rgba(210,190,255,.55);font-size:.78rem;line-height:1.65;margin:1rem 0 1rem}
.gb-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;margin-bottom:1rem}
.gb-tag{padding:.24rem .55rem;border-radius:999px;font-size:.58rem;font-weight:700;letter-spacing:.1em;
  background:rgba(255,255,255,.06);border:1px solid var(--border,rgba(255,255,255,.12));color:var(--accent2,#ddaaff)}
.gb-rec{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1rem;padding:.55rem .8rem;
  border-radius:12px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06)}
.gb-rec small{font-size:.52rem;font-weight:700;letter-spacing:.14em;color:rgba(180,160,220,.5)}
.gb-rec b{font-size:1.15rem;color:var(--accent,#00f0ff)}

.gb-btn{display:block;width:100%;padding:1rem;margin:.32rem 0;border:none;border-radius:13px;
  font-weight:800;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .12s,filter .12s;text-decoration:none}
.gb-btn:active{transform:scale(.96);filter:brightness(1.12)}
.gb-btn-pri{background:var(--btn-grad,linear-gradient(135deg,#ff2d9a,#7b2ff7 55%,#00d4ff));color:#fff;
  box-shadow:0 10px 36px var(--shadow,rgba(180,40,255,.4))}
.gb-btn-sec{background:rgba(255,255,255,.05);color:rgba(220,210,240,.85);border:1px solid rgba(255,255,255,.1)}
.gb-fail{font-size:1.35rem!important;-webkit-text-fill-color:var(--fail,#ff6b9d)!important;color:var(--fail,#ff6b9d)!important}

/* Zurück zur Gamebox — immer sichtbar */
.gb-back{position:fixed;top:calc(.45rem + env(safe-area-inset-top));left:max(.45rem,env(safe-area-inset-left));
  z-index:50;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);font-size:1.15rem;font-weight:800;line-height:1;text-decoration:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-tap-highlight-color:transparent;pointer-events:auto;
  box-shadow:0 4px 18px rgba(0,0,0,.35)}
.gb-back:active{transform:scale(.93);background:rgba(255,255,255,.12)}
body:has(.gb-back) #hud{padding-left:3.1rem}

/* HUD */
#hud{position:fixed;top:env(safe-area-inset-top);left:0;right:0;z-index:12;padding:.55rem .85rem;
  display:flex;justify-content:space-between;font-weight:800;font-size:.85rem;pointer-events:none}
#hud.hide{display:none}
#hud small{display:block;font-size:.48rem;letter-spacing:.12em;color:rgba(180,160,220,.5);font-weight:600}

/* Themes */
[data-theme="neon"]{--bg:#050010;--accent:#ff2d9a;--accent2:#ff9ec8;--border:rgba(255,45,154,.35);--shadow:rgba(180,40,255,.25);--glow1:rgba(255,45,154,.15);--glow2:rgba(0,240,255,.1);--ico-bg:rgba(255,45,154,.12);--logo-grad:linear-gradient(92deg,#ff2d9a,#c44dff 40%,#fff 55%,#00f0ff);--btn-grad:linear-gradient(135deg,#ff2d9a,#7b2ff7 55%,#00d4ff);--fail:#ff6b9d}
[data-theme="beat"]{--bg:#001520;--accent:#00f0ff;--accent2:#5cefff;--border:rgba(0,240,255,.35);--shadow:rgba(0,200,255,.2);--glow1:rgba(0,240,255,.12);--glow2:rgba(0,180,255,.08);--ico-bg:rgba(0,240,255,.1);--logo-grad:linear-gradient(92deg,#00b4d8,#00f0ff,#fff);--btn-grad:linear-gradient(135deg,#00b4d8,#00f0ff);--fail:#ff6b9d}
[data-theme="solar"]{--bg:#120008;--accent:#ffd60a;--accent2:#ffe566;--border:rgba(255,214,10,.35);--shadow:rgba(255,180,0,.2);--glow1:rgba(255,214,10,.12);--glow2:rgba(255,120,0,.08);--ico-bg:rgba(255,214,10,.1);--logo-grad:linear-gradient(92deg,#ffd60a,#ff9500,#fff8cc);--btn-grad:linear-gradient(135deg,#ffd60a,#ff9500);--fail:#ff6b9d}
[data-theme="cosmic"]{--bg:#0d0221;--accent:#b44dff;--accent2:#d9a0ff;--border:rgba(180,80,255,.35);--shadow:rgba(150,50,255,.25);--glow1:rgba(180,80,255,.14);--glow2:rgba(0,200,255,.08);--ico-bg:rgba(155,48,255,.12);--logo-grad:linear-gradient(92deg,#b44dff,#00e5ff);--btn-grad:linear-gradient(135deg,#9b30ff,#00b4d8);--fail:#ff6b9d}
[data-theme="aero"]{--bg:#020818;--accent:#00d4ff;--accent2:#66ddff;--border:rgba(0,180,255,.35);--shadow:rgba(0,120,255,.25);--glow1:rgba(0,180,255,.12);--glow2:rgba(0,100,255,.08);--ico-bg:rgba(0,180,255,.1);--logo-grad:linear-gradient(92deg,#00d4ff,#4d9fff,#fff);--btn-grad:linear-gradient(135deg,#0077ff,#00d4ff);--fail:#ff5588}
[data-theme="gem"]{--bg:#0a0018;--accent:#cc66ff;--accent2:#ddaaff;--border:rgba(200,80,255,.35);--shadow:rgba(150,0,255,.2);--glow1:rgba(200,80,255,.14);--glow2:rgba(255,68,170,.08);--ico-bg:rgba(200,80,255,.12);--logo-grad:linear-gradient(92deg,#ff44cc,#aa44ff,#00ffcc);--btn-grad:linear-gradient(135deg,#aa22ff,#ff44aa);--fail:#ff66aa}
[data-theme="dusk"]{--bg:#100008;--accent:#ff4466;--accent2:#ff8899;--border:rgba(255,60,100,.35);--shadow:rgba(200,30,60,.25);--glow1:rgba(255,60,100,.12);--glow2:rgba(200,0,50,.08);--ico-bg:rgba(255,60,100,.1);--logo-grad:linear-gradient(92deg,#ff2244,#ff6688,#ffccdd);--btn-grad:linear-gradient(135deg,#cc1133,#ff4466);--fail:#ff4466}
[data-theme="flip"]{--bg:#000818;--accent:#00ffcc;--accent2:#66ffdd;--border:rgba(0,255,200,.3);--shadow:rgba(0,200,180,.2);--glow1:rgba(0,255,200,.1);--glow2:rgba(68,170,255,.08);--ico-bg:rgba(0,255,200,.08);--logo-grad:linear-gradient(92deg,#00ffcc,#44aaff,#aaddff);--btn-grad:linear-gradient(135deg,#00aa88,#00ddff);--fail:#ff6688}