html{background:#05020c}
body.kz-game-page{
  --game-scene:url("../assets/kingdoms/scenes/scene-neon.jpg");
  --game-crystal:url("../assets/kingdoms/crystals/neon.jpg");
  background:
    linear-gradient(180deg,rgba(4,2,12,.72),rgba(3,1,9,.94)),
    var(--game-scene) center/cover fixed !important;
}
body.kz-game-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 50% 18%,rgba(157,92,255,.18),transparent 42%);
  background-size:18px 18px,18px 18px,100% 100%;
  mix-blend-mode:screen;opacity:.52;
}
body.kz-game-page>*{position:relative;z-index:1}
body.kz-game-page .top-bar{
  background:linear-gradient(90deg,rgba(5,2,14,.92),rgba(10,5,24,.76)) !important;
  border-bottom:1px solid rgba(255,92,240,.26) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.34),0 0 24px rgba(157,92,255,.14);
}
/* The top-bar's background is always this same dark gradient regardless
   of theme (see above), but its links use color:var(--mist), which
   correctly darkens for [data-theme="light"] everywhere else on the
   page -- except here, where the backdrop never lightens to match,
   producing dark-gray text on a near-black bar. Pin the top-bar links to
   the same light gray they use in every other theme, since the bar
   itself doesn't change either. */
[data-theme="light"] body.kz-game-page .top-bar a{color:#8B90A8 !important}
body.kz-game-page .title-h{
  color:#fff !important;text-shadow:0 0 18px var(--neon),0 2px 0 #12051d;
  letter-spacing:.08em;
}
body.kz-game-page .title-sub{color:#e7dcff !important;max-width:760px;line-height:1.55}
/* Bright scene themes need a readable title halo without changing the
   dark arcade panels underneath. */
[data-theme="light"] body.kz-game-page .title-h,
[data-theme="zephyr"] body.kz-game-page .title-h,
[data-theme="makoto"] body.kz-game-page .title-h{
  text-shadow:0 2px 14px rgba(20,10,0,.65),0 0 18px var(--neon),0 2px 0 #12051d !important;
}
[data-theme="light"] body.kz-game-page .title-sub,
[data-theme="zephyr"] body.kz-game-page .title-sub,
[data-theme="makoto"] body.kz-game-page .title-sub{
  text-shadow:0 2px 12px rgba(20,10,0,.6),0 0 8px rgba(20,10,0,.4) !important;
}
body.kz-game-page .screen{background:linear-gradient(180deg,rgba(7,3,17,.14),rgba(2,1,8,.64))}
body.kz-game-page #level-select{
  background:
    linear-gradient(180deg,rgba(5,2,13,.88),rgba(5,2,13,.66)),
    var(--game-crystal) center/cover;
  border:1px solid rgba(255,92,240,.18);border-radius:8px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.62),0 0 28px rgba(157,92,255,.14);
  margin:10px auto 18px;
}
body.kz-game-page .lvl-btn{
  border-radius:8px !important;
  background:linear-gradient(180deg,rgba(19,9,35,.88),rgba(8,3,18,.9)) !important;
  border-color:rgba(255,92,240,.24) !important;
  box-shadow:inset 0 0 18px rgba(157,92,255,.09);
}
body.kz-game-page .lvl-btn.current,
body.kz-game-page .lvl-btn:hover:not(:disabled){
  border-color:var(--neon) !important;box-shadow:0 0 20px rgba(157,92,255,.28),inset 0 0 18px rgba(255,255,255,.05);
}
body.kz-game-page #game-ui{
  max-width:min(980px,100vw) !important;
  background:linear-gradient(180deg,rgba(5,2,13,.3),rgba(5,2,13,.66));
}
body.kz-game-page .screen{
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
body.kz-game-page .top-bar a img{
  content:url("../assets/logo-k-mark.png");
}
body.kz-game-page .top-bar a{
  font-family:"Cinzel","Unbounded",serif !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.kz-game-page canvas{
  /* Was width:100%;height:100%: several games (snake, crush, chroma, breaker,
     stacker, guard, keeper, blade...) compute a square (or otherwise fixed-
     ratio) canvas.width/height independent of their container's actual
     shape, then rely on CSS to just display it at that size. Forcing 100%/
     100% of a non-square flex container stretched their square bitmaps into
     a non-square box -- every grid cell, sprite, and hitbox rendered
     squashed. width/height:auto with a max-width/max-height cap displays
     each canvas at its own intrinsic resolution (no distortion) while still
     filling the container exactly for games that size c.width/height to
     literally match their container (flap, ascend, runner, shmup), since
     those two values are already equal in that case -- same visual result
     for them, fixed for everyone else. */
  width:auto;height:auto;max-width:100%;max-height:100%;display:block;touch-action:none;
  background:
    radial-gradient(circle at 50% 18%,rgba(157,92,255,.18),transparent 38%),
    linear-gradient(180deg,rgba(5,3,18,.5),rgba(5,2,13,.9)) !important;
  image-rendering:pixelated;
  box-shadow:inset 0 0 80px rgba(0,0,0,.5);
}
body.kz-game-page .hud div,
body.kz-game-page .hud button{
  background:rgba(7,3,18,.76) !important;
  border-color:rgba(255,92,240,.24) !important;
  box-shadow:0 0 18px rgba(157,92,255,.12);
  border-radius:8px !important;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#f6f0ff !important;
}
body.kz-game-page #pause-btn,
body.kz-game-page .hud button[onclick*="Pause"],
body.kz-game-page .hud button[onclick*="pause"],
body.kz-game-page button[onclick*="togglePause"]{
  font-size:0 !important;
}
body.kz-game-page #pause-btn::before,
body.kz-game-page .hud button[onclick*="Pause"]::before,
body.kz-game-page .hud button[onclick*="pause"]::before,
body.kz-game-page button[onclick*="togglePause"]::before{
  content:"PAUSE";
  font-size:11px;
  letter-spacing:.12em;
  font-weight:800;
}
body.kz-game-page .btn,
body.kz-game-page .lvl-btn{
  min-height:44px;
  touch-action:manipulation;
}
body.kz-game-page .hint{
  color:#d9cbff !important;text-shadow:0 0 10px rgba(157,92,255,.55);
}
body.kz-game-page #overlay{
  background:linear-gradient(180deg,rgba(6,2,15,.94),rgba(3,1,9,.98)) !important;
}
body.kz-game-crush{--game-scene:url("../assets/kingdoms/scenes/crystals.jpg");--game-crystal:url("../assets/kingdoms/crystals/solaris.jpg");--neon:#ff5cf0}
body.kz-game-breaker{--game-scene:url("../assets/kingdoms/scenes/scene-terra.jpg");--game-crystal:url("../assets/kingdoms/crystals/terra.jpg");--neon:#43e97b}
body.kz-game-runner{--game-scene:url("../assets/kingdoms/scenes/scene-zephyr.jpg");--game-crystal:url("../assets/kingdoms/crystals/zephyr.jpg");--neon:#54b8ff}
body.kz-game-stacker{--game-scene:url("../assets/kingdoms/scenes/scene-lumen.jpg");--game-crystal:url("../assets/kingdoms/crystals/lumen.jpg");--neon:#ffe27a}
[data-theme="neon"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-neon.jpg");--game-crystal:url("../assets/kingdoms/crystals/neon.jpg");--neon:#ff5cf0}
[data-theme="ignis"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-ignis.jpg");--game-crystal:url("../assets/kingdoms/crystals/ignis.jpg");--neon:#ff6f2e}
[data-theme="aquor"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-aquor.jpg");--game-crystal:url("../assets/kingdoms/crystals/aquor.jpg");--neon:#78beff}
[data-theme="terra"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-terra.jpg");--game-crystal:url("../assets/kingdoms/crystals/terra.jpg");--neon:#9bcc3f}
[data-theme="zephyr"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-zephyr.jpg");--game-crystal:url("../assets/kingdoms/crystals/zephyr.jpg");--neon:#cdffe4}
[data-theme="light"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-lumen.jpg");--game-crystal:url("../assets/kingdoms/crystals/lumen.jpg");--neon:#c08f19}
[data-theme="nox"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-nox.jpg");--game-crystal:url("../assets/kingdoms/crystals/nox.jpg");--neon:#a855f7}
[data-theme="solaris"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-solaris.jpg");--game-crystal:url("../assets/kingdoms/crystals/solaris.jpg");--neon:#5f7cff}
[data-theme="moon"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-moon.jpg");--game-crystal:url("../assets/kingdoms/crystals/moon.jpg");--neon:#d2d6e0}
[data-theme="kyuchome"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-kyuchome.jpg");--game-crystal:url("../assets/kingdoms/crystals/kyuchome.jpg");--neon:#e8c27e}
[data-theme="makoto"] body.kz-game-page{--game-scene:url("../assets/kingdoms/scenes/scene-makoto.jpg");--game-crystal:url("../assets/kingdoms/crystals/makoto.jpg");--neon:#bee196}
@media(max-width:720px){
  body.kz-game-page .top-bar{padding:8px 10px !important}
  body.kz-game-page .title-h{font-size:clamp(19px,6vw,28px) !important}
  body.kz-game-page #level-select{margin-inline:10px;width:calc(100% - 20px) !important}
  body.kz-game-page .hud{gap:6px;padding:8px;max-width:100%}
  body.kz-game-page .hud div,
  body.kz-game-page .hud button{font-size:12px;padding:6px 10px}
  body.kz-game-page .wrap-c{padding:6px 8px 12px}
}