/* Shared look for the arcade games (night-arcade shell + glass cards + chunky buttons).
 * Each game sets its accent on :root:
 *   --accent-rgb: 167,139,250;  --btn-top:#c4b0ff; --btn-bot:#7d5cf5; --btn-edge:#4a30b8;
 *   --h1-shadow: <text-shadow list for the 3D title> */
:root{
  color-scheme:dark;
  --navy-deep:#0d0f2b; --navy-mid:#1a1f52; --navy-light:#252a6b;
  --blue:#2f6fed; --violet:#7d5cf5; --red:#ff5f5f; --green:#34d399; --gold:#ffd166; --coral:#ff8a5f;
  --ink:#eef0ff; --sub:#b4bbf0; --line:rgba(255,255,255,.14);
  --accent-rgb:167,139,250; --btn-top:#c4b0ff; --btn-bot:#7d5cf5; --btn-edge:#4a30b8;
  --h1-shadow:0 2px 0 #d9ccff,0 4px 0 #b9a5ff,0 6px 0 #8d72f5,0 8px 8px rgba(0,0,0,.35),0 14px 22px rgba(167,139,250,.35);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; min-height:100svh; color:var(--ink);
  font-family:'Inter',system-ui,'Segoe UI',Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 520px at 50% -8%, rgba(var(--accent-rgb),.22), transparent 60%),
    radial-gradient(800px 520px at 90% 35%, rgba(47,111,237,.2), transparent 65%),
    radial-gradient(ellipse at 50% -10%, var(--navy-light), var(--navy-deep) 62%);
  background-attachment:fixed;
  display:flex; flex-direction:column; align-items:center; padding:60px 16px 32px; overflow-x:hidden;
}
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.8;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff, transparent), radial-gradient(1px 1px at 22% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 37% 8%, #cfd6ff, transparent), radial-gradient(1px 1px at 52% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 66% 11%, #fff, transparent), radial-gradient(1px 1px at 81% 28%, #cfd6ff, transparent),
    radial-gradient(1.5px 1.5px at 93% 9%, #fff, transparent), radial-gradient(1px 1px at 14% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 31% 78%, #cfd6ff, transparent), radial-gradient(1px 1px at 47% 88%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 72% 70%, #fff, transparent), radial-gradient(1px 1px at 90% 84%, #cfd6ff, transparent);
}
.wrap{ position:relative; z-index:1; width:100%; max-width:760px; display:flex; flex-direction:column; align-items:center; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

.exit-btn{
  position:fixed; top:14px; left:14px; z-index:999; display:flex; align-items:center; gap:6px; min-height:44px;
  background:rgba(255,255,255,.1); color:var(--ink); text-decoration:none; font-weight:700; font-size:14px;
  padding:8px 16px; border-radius:22px; border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .2s, transform .15s;
}
@media (hover:hover) and (pointer:fine){ .exit-btn:hover{ background:rgba(255,255,255,.2); transform:translateY(-1px); } }
.mute-btn{
  position:fixed; top:14px; right:14px; z-index:999; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:20px;
  background:rgba(255,255,255,.1); color:var(--ink); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; transition:background .2s, transform .15s;
}
@media (hover:hover) and (pointer:fine){ .mute-btn:hover{ background:rgba(255,255,255,.2); transform:scale(1.06); } }

h1{
  text-align:center; margin:4px 0 6px; font-family:'Baloo 2',cursive; font-weight:800; letter-spacing:.5px;
  font-size:clamp(24px,6vw,40px); line-height:1.1; color:#fff; text-shadow:var(--h1-shadow);
}
.tagline{ text-align:center; margin:0 0 10px; font-weight:600; color:var(--sub); font-size:15px; }

/* stage: the framed area that holds each game's 3D scene */
.stage{ position:relative; width:100%; border-radius:22px; overflow:hidden; margin:2px 0 8px;
  border:1px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12); background:linear-gradient(#141a48,#0d0f2b 70%); }
.stage canvas.scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* setup card + form controls */
.setup{
  width:100%; max-width:480px; padding:24px; border-radius:24px; text-align:left;
  background:linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border:1px solid var(--line); box-shadow:0 24px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:riseIn .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes riseIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
.setup label, .setup .field-label{ display:block; margin:14px 0 6px; font-weight:700; font-size:14px; color:var(--sub); text-align:left; }
.setup select, .setup input[type="number"], .setup input[type="text"]{
  width:100%; min-height:48px; padding:10px 14px; border-radius:14px; border:1.5px solid var(--line);
  background:rgba(255,255,255,.08); color:var(--ink); font:600 16px 'Inter',sans-serif;
}
.setup select option{ color:#1c2230; background:#fff; }
.setup select:focus, .setup input:focus{ outline:none; border-color:rgb(var(--accent-rgb)); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.3); }
.segmented{ display:flex; gap:6px; padding:5px; border-radius:16px; background:rgba(255,255,255,.08); border:1.5px solid var(--line); }
.seg-btn{ flex:1; min-height:44px; padding:8px 4px; border-radius:12px; border:none; background:transparent; cursor:pointer; color:var(--sub);
  font:700 15px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center; gap:5px; transition:background .12s, color .12s; }
@media (hover:hover) and (pointer:fine){ .seg-btn:hover{ background:rgba(255,255,255,.08); } }
.seg-btn.active{ background:linear-gradient(180deg,var(--btn-top),var(--btn-bot)); color:#fff; box-shadow:0 3px 0 var(--btn-edge); }
.speed-row{ display:flex; align-items:center; justify-content:space-between; }
.speed-badge{ font:800 14px 'Baloo 2',cursive; color:var(--gold); background:rgba(255,255,255,.08); border:1.5px solid rgba(255,209,102,.5); border-radius:999px; padding:3px 12px; }
input[type="range"]{ width:100%; height:28px; accent-color:rgb(var(--accent-rgb)); }
.speed-labels{ display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; color:var(--sub); }
.setup .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:420px){ .setup .two-col{ grid-template-columns:1fr; } }

.big-btn{
  margin-top:22px; width:100%; min-height:58px; padding:12px; border:none; border-radius:18px; cursor:pointer;
  font:800 20px 'Baloo 2',cursive; letter-spacing:.3px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.2);
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot)); box-shadow:0 6px 0 var(--btn-edge), 0 14px 26px rgba(var(--accent-rgb),.4);
  transition:transform .1s, box-shadow .1s, filter .2s;
}
@media (hover:hover) and (pointer:fine){ .big-btn:hover{ filter:brightness(1.06); transform:translateY(-2px); } }
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--btn-edge), 0 6px 14px rgba(var(--accent-rgb),.4); }
.sound-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:18px; font-weight:600; min-height:44px; }
.sound-row input{ width:22px; height:22px; accent-color:rgb(var(--accent-rgb)); }
.setup .sound-row label{ margin:0; display:inline; color:inherit; font-size:inherit; }
.lb-box{ margin-top:18px; text-align:left; border-top:1px solid var(--line); padding-top:14px; }
.lb-head{ display:flex; justify-content:space-between; align-items:center; }
.lb-head button{ background:none; border:none; color:#ff9a9a; cursor:pointer; font-size:13px; text-decoration:underline; min-height:36px; padding:0 6px; }
.lb-row{ display:flex; justify-content:space-between; padding:5px 0; }
.lb-row b{ color:var(--gold); }
.lb-empty{ color:var(--sub); }

/* in-game HUD */
.game{ width:100%; display:none; text-align:center; }
.hud{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; flex-wrap:wrap; gap:8px; }
.pill{ position:relative; padding:8px 16px; border-radius:20px; font-weight:800; font-size:15px; background:rgba(255,255,255,.1); border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.pill span{ font-family:'Baloo 2',cursive; font-size:19px; }
.pill.bump{ animation:bump .45s ease; }
@keyframes bump{ 30%{ transform:scale(1.18); background:rgba(52,211,153,.35); } }
.pill.fire{ background:linear-gradient(135deg,rgba(255,138,95,.5),rgba(255,95,95,.35)); }
.pill.fire::after{ content:' 🔥'; }
.plus{ position:absolute; left:50%; top:-4px; font:800 20px 'Baloo 2',cursive; color:var(--gold); pointer-events:none; animation:floatUp 1s ease-out forwards; text-shadow:0 2px 6px rgba(0,0,0,.5); }
@keyframes floatUp{ from{ opacity:1; transform:translate(-50%,0) scale(.8); } to{ opacity:0; transform:translate(-50%,-38px) scale(1.3); } }
.progress{ height:8px; border-radius:6px; background:rgba(255,255,255,.12); overflow:hidden; margin:0 4px 6px; }
.progress i{ display:block; height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg,rgb(var(--accent-rgb)),var(--gold)); transform:scaleX(0); transform-origin:left center; transition:transform .3s cubic-bezier(.23,1,.32,1); }
.question-banner{
  font:800 clamp(26px,6vw,36px) 'Baloo 2',cursive; color:#fff; padding:10px 14px; border-radius:20px; margin:0 0 8px;
  background:linear-gradient(180deg,var(--btn-top),var(--btn-bot)); box-shadow:0 6px 0 var(--btn-edge), 0 14px 26px rgba(var(--accent-rgb),.35);
  text-shadow:0 2px 0 rgba(0,0,0,.22);
}
.status{ margin-top:10px; text-align:center; font-size:17px; min-height:26px; font-weight:700; color:var(--sub); }
.choice-btn{
  min-height:68px; padding:8px 0; font:800 32px 'Baloo 2',cursive; color:#fff; border:none; border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg,#5a8dff,#2f6fed 55%,#5a49e8); box-shadow:0 7px 0 #1e3f9e, 0 14px 22px rgba(47,111,237,.4); text-shadow:0 2px 0 rgba(0,0,0,.22);
  transition:transform .1s, box-shadow .1s, filter .15s;
}
@media (hover:hover) and (pointer:fine){ .choice-btn:hover:not(:disabled){ transform:translateY(-3px); filter:brightness(1.08); } }
.choice-btn:active:not(:disabled){ transform:translateY(5px); box-shadow:0 2px 0 #1e3f9e; }
.choice-btn.correct{ background:linear-gradient(180deg,#5eeab5,#34d399 60%,#1fae7b); box-shadow:0 7px 0 #14805a, 0 0 32px rgba(52,211,153,.7); animation:pop .5s ease; }
.choice-btn.wrong{ background:linear-gradient(180deg,#ff8a8a,#ff5f5f 60%,#e03e4a); box-shadow:0 7px 0 #a02a35; animation:wobble .5s ease; }
.choice-btn:disabled{ cursor:default; }
@keyframes pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.22) rotate(-3deg); } 70%{ transform:scale(.96) rotate(2deg); } 100%{ transform:scale(1); } }
@keyframes wobble{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-9px); } 40%{ transform:translateX(9px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(6px); } }

/* celebration banner */
.winner-banner{
  display:none; margin:8px auto 0; padding:20px 18px 18px; border-radius:26px; text-align:center; width:100%; max-width:640px;
  background:linear-gradient(160deg, rgba(255,209,102,.28), rgba(var(--accent-rgb),.18) 60%, rgba(125,92,245,.2));
  border:1.5px solid rgba(255,209,102,.6); box-shadow:0 0 0 6px rgba(255,209,102,.08), 0 24px 60px rgba(0,0,0,.4), 0 0 60px rgba(255,209,102,.25);
  animation:bannerIn .8s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes bannerIn{ from{ opacity:0; transform:translateY(40px) scale(.7) rotate(-3deg); } to{ opacity:1; transform:none; } }
.trophy{ display:inline-block; font-size:60px; line-height:1; animation:trophySpin 3.2s ease-in-out infinite; filter:drop-shadow(0 10px 14px rgba(0,0,0,.4)); }
@keyframes trophySpin{ 0%,100%{ transform:perspective(400px) rotateY(-28deg) translateY(0); } 50%{ transform:perspective(400px) rotateY(28deg) translateY(-8px); } }
.win-line{ font:800 clamp(22px,5.4vw,30px) 'Baloo 2',cursive; line-height:1.2; }
.stars{ display:flex; justify-content:center; gap:8px; margin:10px 0 4px; }
.stars span{ font-size:40px; line-height:1; filter:grayscale(1) opacity(.35); transform:scale(.4) rotate(-40deg); opacity:0; }
.stars span.on{ filter:drop-shadow(0 4px 10px rgba(255,209,102,.7)); animation:starIn .6s cubic-bezier(.2,1.6,.3,1) forwards; animation-delay:calc(var(--n) * 350ms + 700ms); }
.stars span.off{ opacity:1; transform:none; animation:none; }
@keyframes starIn{ from{ opacity:0; transform:scale(.2) rotate(-90deg); } to{ opacity:1; transform:scale(1) rotate(0); } }
.detail{ font-weight:700; color:var(--sub); font-size:16px; }
.newbest{ display:inline-block; margin-top:10px; padding:6px 16px; border-radius:20px; font-weight:800; color:#3b2a00; background:linear-gradient(90deg,#ffd166,#ffb547); animation:bump .9s ease 1.6s both; }
.restart-btn{ display:none; margin:18px auto 0; max-width:320px; }
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:900; pointer-events:none; }

@media (max-width:520px){ body{ padding-top:58px; } .hud{ gap:6px; } .pill{ padding:6px 12px; font-size:14px; } }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .stars span.on{ opacity:1; transform:none; }
}