/* =====================================================================
   GAME ZONE · "grown-up" look
   Sleeker type, calmer colours, fewer cartoon effects. Loaded last on the
   homepage and More Games. To go back to the old look, remove the line
   <link rel="stylesheet" href="assets/mature.css"> from those pages.
   ===================================================================== */
:root{
  --pink:#ff3d8b; --cyan:#3ad6ff; --violet:#8b7bff; --yellow:#ffcf4a;
  --card:#0d1428e8; --line:#1f2c4d; --dim:#93a1c2;
  --accent:linear-gradient(100deg,#3ad6ff 0%,#8b7bff 55%,#ff3d8b 100%);
}
body{font-family:Inter,system-ui,sans-serif;letter-spacing:-.005em}
.h2,#gzTitle,.panel h3,.gi h3,.appCard h3,.gotwTx b,.dcBody h3,.btn,.ghost,.cta{letter-spacing:-.02em}

/* Background: deeper, less candy */
#bg{opacity:.32;filter:saturate(.75)}
html.lite #bg{opacity:.25}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% -10%,transparent 40%,rgba(3,5,12,.55) 100%)}

/* ---------- Hero ---------- */
#gzTitle{font-size:clamp(64px,11.5vw,150px);line-height:.88;font-weight:700;text-transform:uppercase;letter-spacing:-.045em}
#gzTitle .w1 .ch{color:#f4f7ff;text-shadow:none}
#gzTitle .w2 .ch{color:transparent;background:linear-gradient(100deg,#3ad6ff,#8b7bff 50%,#ff3d8b);background-size:420% 100%;
  background-position:calc((var(--i) - 4) * 33.3%) 0;-webkit-background-clip:text;background-clip:text;text-shadow:none;
  filter:drop-shadow(0 0 22px rgba(139,123,255,.35))}
#gzTitle .w2 .ch i{display:none}                      /* no paint drips */
.go #gzTitle .ch{animation-name:riseIn;animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
@keyframes riseIn{from{opacity:0;transform:translateY(.35em);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
#gzTitle .ch.landed:hover{animation:none}
.lead{color:#a9b5d3}

/* Mascot: smaller and calmer, sleek speech bubble */
#mascot{width:min(210px,52vw)}
#mascotBody{animation-duration:4.5s}
.orbit{opacity:.45}
.ringGlow{opacity:.6}
.bubble{background:rgba(13,20,40,.92);color:#e9eeff;border:1px solid #2a3a66;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);font-weight:600;font-size:14px;backdrop-filter:blur(8px)}
.bubble::after{border-top-color:rgba(13,20,40,.92)}
.bubble .caret{background:var(--cyan)}

/* The tilted caution tapes are very "cartoon": hide them */
.tapes{display:none}

/* ---------- Buttons: flat, crisp ---------- */
.btn{border-radius:12px;font-weight:700;box-shadow:0 10px 26px -12px rgba(255,207,74,.55)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn:disabled{box-shadow:none}
.btn.pink{background:var(--accent);color:#fff;box-shadow:0 10px 30px -12px rgba(139,123,255,.75)}
.btn.pink:hover{filter:brightness(1.08)}
.btn.pink:active{box-shadow:0 4px 14px -8px rgba(139,123,255,.75)}
.btn.cyan{box-shadow:0 10px 26px -12px rgba(58,214,255,.7)}
.btn.cyan:active{box-shadow:none}
.btn.green{box-shadow:0 10px 26px -12px rgba(77,255,161,.6)}
.btn.green:active{box-shadow:none}
.ghost{border-width:1px;border-radius:12px;background:rgba(13,20,40,.55);font-weight:600}

/* ---------- Section titles: thin accent line instead of a paint stroke ---------- */
.h2{font-size:clamp(28px,3.8vw,42px);font-weight:700;padding-left:16px}
.h2::before{left:0;right:auto;top:.18em;bottom:.14em;width:4px;height:auto;border-radius:4px;background:var(--accent);opacity:1;transform:scaleY(0);transform-origin:50% 100%}
.in .h2::before,.h2.in::before{transform:scaleY(1)}

/* ---------- Cards ---------- */
.panel{border-color:var(--line);background:linear-gradient(180deg,rgba(18,27,52,.9),rgba(11,17,34,.9))}
.panel.glow::before{opacity:.55}
.game{border-width:1px;border-radius:18px}
.game:hover{box-shadow:0 30px 60px -28px color-mix(in srgb,var(--gc) 60%,transparent)}
.gi h3{color:#f4f7ff;font-size:24px}
.card{border-width:1px}
.mchip{border-width:1px}
.pill{border-width:1px}

/* Footer drips → simple gradient line */
.foot .drips{display:none}
.foot{border-top:1px solid var(--line)}
.foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);opacity:.7}

/* Toast: dark glass instead of yellow block */
#toast{background:rgba(13,20,40,.95);color:#eef3ff;border:1px solid #2a3a66;box-shadow:0 14px 34px -12px rgba(0,0,0,.7);backdrop-filter:blur(8px)}

/* Loader title */
#loader .lt{letter-spacing:-.03em}

/* More Games title, same style as the homepage */
#mTitle{font-size:clamp(50px,9vw,116px);line-height:.9;text-transform:uppercase;letter-spacing:-.045em}
#mTitle .w1 .ch{color:#f4f7ff;text-shadow:none}
#mTitle .w2 .ch{color:transparent;background:linear-gradient(100deg,#3ad6ff,#8b7bff 50%,#ff3d8b);background-size:500% 100%;
  background-position:calc((var(--i) - 4) * 25%) 0;-webkit-background-clip:text;background-clip:text;text-shadow:none}
.go #mTitle .ch{animation-name:riseIn;animation-duration:.8s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
#mTitle .ch.landed:hover{animation:none}

/* Phones: title first, a smaller Byte underneath */
@media (max-width:820px){
  .hero > div:first-child{order:1}
  .hero .stage{order:2;min-height:260px}
  #mascot{width:min(150px,40vw)}
  .bubble{font-size:13px}
}

/* ---------- Space background (assets/space.js) ---------- */
html[data-bg="space"] body{background:#04060f}
html[data-bg="space"] #bg{opacity:1;filter:none}
html[data-bg="space"] .grid-floor{display:none}
html[data-bg="space"] .grain{opacity:.025}
html[data-bg="space"] body::after{background:radial-gradient(ellipse at 50% 0%,transparent 55%,rgba(2,3,8,.45) 100%)}

/* Top bar: see-through when scrolled, so the black hole stays visible */
html[data-bg="space"] .top::before{background:rgba(5,8,20,.4);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}