/* Pixel Power-Up skin on the shared game shell: 24 × 24 pixel art (one key light from the top left) in a pocket game
   console drawn as a real object. The console is the one bold thing: moulded plastic lit from the top left, a recessed
   screen in a dark bezel, a backlit LCD dot matrix, and on wide screens a D-pad in its well, two convex face buttons, a
   speaker grille and a power LED. The scene stays quiet behind it: a pixel world at dusk (banded sky, a moon high on the
   left, strata clouds, far mountains, stepped mesas with moonlit edges, a dark ledge), an arcade hall or, in Stage 2, a
   boss castle over pixel lava. The title stands on the sky without a plate; an arcade score bar below (the shell's
   "bar" layout, decorated); a convex "A" face button; stepped motion everywhere. Theme tokens (--night, --violet,
   --violet-ink, --neon, --plate, --shell, --lcd, --sky-1 …) come from skin.js themeMap; cream and muted are fixed light
   inks. Every text stands on the night, a plate or the LCD in a light ink, or on the button face / neon in night ink
   (≥ 4.5:1 in every preset, both ends of the button face's gradient under the letter included). */
:root{
  --night:#06121A; --violet:#9C82FF; --violet-ink:#B7A6FF; --neon:#39FF6A; --bg:#06121A;
  --plate:#1A1F3A; --plate-hi:#232650; --plate-lo:#040B10;
  --shell:#6E58CC; --shell-hi:#A391FF; --shell-lo:#503E94;
  --lcd:#0A2A23; --lcd-dot:#0F4433; --lcd-alt:#121838; --lcd-dot-alt:#24245E; --lcd-off:#08191C; --lcd-off-dot:#0C2A23; --bezel:#131B31;
  --sky-1:#131B31; --sky-2:#1D2141; --sky-3:#272953; --sky-4:#523E62; --sky-5:#724D66; --sky-star:#D9D0FF; --moon:#B9ABE8;
  --far:#201F40; --mesa:#11192D; --mesa-lit:#383960; --near:#040C11;
  --btn-ink:#06121A; --cream:#F4F6FF; --ink:var(--cream); --muted:#C3C8DE;
  --display:"Press Start 2P","Courier New",monospace; --ui:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --radius:4px; --radius-sm:3px; --line:color-mix(in srgb,var(--violet) 55%,transparent);
  /* a pixel border: hard 2 px steps, no blur */
  --px:2px; --px-edge:0 0 0 var(--px) var(--plate-lo),0 0 0 calc(var(--px)*2) color-mix(in srgb,var(--violet) 60%,var(--night));
  --panel-bg:linear-gradient(180deg,var(--plate-hi),var(--plate) 40%,var(--night)); --panel-border:color-mix(in srgb,var(--violet) 60%,transparent);
  --hud-bg:linear-gradient(180deg,var(--plate-hi),var(--plate) 55%);
  --ibtn-bg:var(--plate); --ibtn-ink:var(--cream);
  /* the button face: --btn-top / --btn-low from themeMap (the violet lifted until night ink clears 4.5:1 on the lower tone too) */
  --btn-top:#9C82FF; --btn-low:#816ED6;
  --btn-bg:linear-gradient(180deg,var(--btn-top) 0 60%,var(--btn-low) 60%);
  /* the console's dark plastic (D-pad) and its convex face buttons */
  --dpad:color-mix(in srgb,var(--night) 74%,var(--shell)); --dpad-hi:color-mix(in srgb,var(--dpad) 62%,var(--shell-hi)); --dpad-lo:color-mix(in srgb,var(--dpad) 60%,#000);
  --fb:color-mix(in srgb,var(--neon) 70%,var(--night));
  --window-radius:2px; --reel-sep:rgba(255,255,255,.035); --sym-size:94%; --cluster-radius:0;
  --win-ring:var(--neon); --win-glow:color-mix(in srgb,var(--neon) 55%,transparent); --hot-ring:var(--violet); --land-ring:var(--neon); --tease-glow:var(--neon);
  --fs-ring:color-mix(in srgb,#FF8A1F 60%,transparent); --fall-ease:steps(6,end);
  --badge-bg:var(--night); --badge-ink:var(--cream); --float-ink:#FFFFFF; --float-stroke:var(--night);
  --focus:var(--neon);
  /* the win card: a faint violet light behind the tier word, the amount on an LCD readout */
  --veil-light:color-mix(in srgb,var(--violet) 18%,transparent); --ov-plate:var(--lcd); --ov-plate-line:color-mix(in srgb,var(--neon) 35%,transparent);
  /* the presenters' parts in the theme: the level meter (present-rows) and the lives (present-lives) share one band */
  --rw-bg:var(--plate-lo); --rw-ink:var(--cream); --rw-label:var(--neon); --rw-pip:color-mix(in srgb,var(--cream) 22%,var(--plate-lo)); --rw-pip-on:var(--neon); --rw-pip-ring:var(--cream);
  --rw-edge:var(--neon); --rw-font:var(--display); --rw-ease:steps(4,end); --rw-sky-bg:var(--lcd-off);
  --lf-bg:var(--plate-lo); --lf-heart:#FF5A6E; --lf-empty:color-mix(in srgb,var(--cream) 45%,var(--plate-lo)); --lf-flag:var(--neon); --lf-flag-off:color-mix(in srgb,var(--cream) 30%,var(--plate-lo));
  --lf-ease:steps(4,end); --lf-mark:#FF5A6E; --lf-mark-pc:var(--neon);
  color-scheme:dark;
}
body{background:var(--bg)}

/* ---- scene: the pixel world at dusk (default), the arcade hall and the boss castle (Stage 2, or chosen). Silhouettes
   are masks from skin.js (pixel rects on one 320 × 180 grid); only the clouds drift (in steps), the cabinet screens
   breathe (≈ 0.4 Hz) and the lava bubbles rise (in steps); the scenes swap with a stepped fade. ---- */
.scene .pw,.scene .hall,.scene .castle{transition:opacity .6s steps(4,end)}
.scene .pw i,.scene .hall i,.scene .castle i{position:absolute;inset:0;display:block}
/* the sky in flat bands, darkening upward from a warm horizon (pixel art: no smooth gradient) */
.pw .sky{background:linear-gradient(180deg,var(--night) 0 14%,var(--sky-1) 14% 28%,var(--sky-2) 28% 42%,var(--sky-3) 42% 54%,var(--sky-4) 54% 63%,var(--sky-5) 63%)}
.pw .stars{background:var(--sky-star);opacity:.7;-webkit-mask:var(--pp-stars) center top/cover no-repeat;mask:var(--pp-stars) center top/cover no-repeat}
/* the moon (the key light's source, high on the left): a pale disc, darker craters, a faint two-step halo */
.pw .halo{background:var(--moon);opacity:.05;-webkit-mask:var(--pp-halo) center top/cover no-repeat;mask:var(--pp-halo) center top/cover no-repeat}
.pw .moon{background:var(--moon);-webkit-mask:var(--pp-moon) center top/cover no-repeat;mask:var(--pp-moon) center top/cover no-repeat}
.pw .craters{background:color-mix(in srgb,var(--moon) 80%,var(--sky-3));-webkit-mask:var(--pp-craters) center top/cover no-repeat;mask:var(--pp-craters) center top/cover no-repeat}
.pw .clouds{background:color-mix(in srgb,var(--sky-5) 60%,var(--moon));opacity:.3;-webkit-mask:var(--pp-clouds) center top/cover no-repeat;mask:var(--pp-clouds) center top/cover no-repeat;
  animation:pp-drift 48s steps(48,end) infinite alternate}
.pw .far{background:var(--far);-webkit-mask:var(--pp-far) center bottom/cover no-repeat;mask:var(--pp-far) center bottom/cover no-repeat}
/* light behind the console: separates it from the scene (a light, so a smooth falloff) */
.pw .glow{background:radial-gradient(36% 42% at 50% 50%,color-mix(in srgb,var(--violet) 20%,transparent),transparent)}
.pw .mesas{background:var(--mesa);-webkit-mask:var(--pp-mesas) center bottom/cover no-repeat;mask:var(--pp-mesas) center bottom/cover no-repeat}
.pw .mesa-lit{background:var(--mesa-lit);-webkit-mask:var(--pp-mesa-lit) center bottom/cover no-repeat;mask:var(--pp-mesa-lit) center bottom/cover no-repeat}
.pw .near{background:var(--near);-webkit-mask:var(--pp-near) center bottom/cover no-repeat;mask:var(--pp-near) center bottom/cover no-repeat}
@keyframes pp-drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.scene .hall,.scene .castle{opacity:0}
.hall .wall{background:repeating-linear-gradient(90deg,transparent 0 6vh,rgba(255,255,255,.03) 6vh calc(6vh + 2px)),linear-gradient(180deg,var(--night),var(--plate) 70%,var(--night) 70%)}
.hall .neon{background:var(--violet);opacity:.6;-webkit-mask:var(--pp-neon) center top/cover no-repeat;mask:var(--pp-neon) center top/cover no-repeat}
.hall .cabs{background:linear-gradient(180deg,var(--shell-lo),var(--plate-lo) 60%);-webkit-mask:var(--pp-cabs) center bottom/cover no-repeat;mask:var(--pp-cabs) center bottom/cover no-repeat}
.hall .screens{background:linear-gradient(180deg,var(--neon),color-mix(in srgb,var(--neon) 40%,var(--violet)));-webkit-mask:var(--pp-screens) center bottom/cover no-repeat;mask:var(--pp-screens) center bottom/cover no-repeat;
  opacity:.45;animation:pp-breathe 2.6s steps(3,end) infinite alternate}
.scene .hall i.floor{top:auto;height:12%;background:repeating-conic-gradient(var(--plate-lo) 0 25%,var(--plate) 0 50%) 0 0/4vh 4vh}
@keyframes pp-breathe{from{opacity:.38}to{opacity:.52}}
body.bg-arcade-hall .scene .pw{opacity:0}
body.bg-arcade-hall .scene .hall{opacity:1}
/* the boss castle: a dark red sky in bands, the keep and its towers (lit from below by the lava), lit windows, a lava sea
   with rising bubbles */
.castle .sky{background:linear-gradient(180deg,#0E0408 0 22%,#22070F 22% 44%,#3A0D17 44% 62%,#5A1714 62%)}
.castle .keep{background:linear-gradient(0deg,#4A1418,#1C0910 28%,#10050A 60%);-webkit-mask:var(--pp-castle) center bottom/cover no-repeat;mask:var(--pp-castle) center bottom/cover no-repeat}
.castle .lit{background:#FFA636;opacity:.55;-webkit-mask:var(--pp-windows) center bottom/cover no-repeat;mask:var(--pp-windows) center bottom/cover no-repeat;animation:pp-breathe 3.2s steps(3,end) infinite alternate}
.castle .lava{background:linear-gradient(180deg,#FFE07A 0 2%,#FFA636 2% 5%,#EE5E1C 5% 10%,#A82420 10%);-webkit-mask:var(--pp-lava) center bottom/cover no-repeat;mask:var(--pp-lava) center bottom/cover no-repeat}
.scene .castle i.bubbles{top:auto;height:20%}
.castle .bubbles b{position:absolute;bottom:0;width:1.2vh;height:1.2vh;background:#FFA636;opacity:0;animation:pp-bubble 4.8s steps(8,end) infinite}
.castle .bubbles b:nth-child(1){left:12%}.castle .bubbles b:nth-child(2){left:31%;animation-delay:1.1s}.castle .bubbles b:nth-child(3){left:52%;animation-delay:2.3s}
.castle .bubbles b:nth-child(4){left:71%;animation-delay:.6s}.castle .bubbles b:nth-child(5){left:88%;animation-delay:3.1s}
@keyframes pp-bubble{0%{opacity:0;transform:translateY(0)}20%{opacity:.85}100%{opacity:0;transform:translateY(-9vh)}}
body.bg-boss-castle .scene .pw,body.fs .scene .pw,body.fs .scene .hall{opacity:0}
body.bg-boss-castle .scene .castle,body.fs .scene .castle{opacity:1}
.scene .vignette{background:radial-gradient(ellipse at 50% 46%,transparent 52%,rgba(3,5,12,.55) 100%)}

/* ---- the title: the pixel face standing on the sky, no plate; a two-step extrusion straight down (symmetric, so the
   glyphs stay centred over the board) ---- */
.logo{padding:0;background:none;box-shadow:none}
.logo h1{font-family:var(--display);font-weight:400;font-size:clamp(16px,2.2vw,26px);line-height:1.3;letter-spacing:.02em;color:var(--violet-ink);text-shadow:0 2px 0 var(--shell-lo),0 4px 0 var(--plate-lo)}
.ibtn,.pm,.auto{border:0;border-radius:2px;box-shadow:var(--px-edge)}
.ibtn:hover,.pm:hover:not(:disabled),.auto:hover{filter:brightness(1.15)}

/* ---- the HUD: an arcade score bar ("1P BALANCE", "BET", "WIN" in the pixel face over the values) ---- */
.hud{border:0;border-radius:2px;box-shadow:var(--px-edge),0 8px 0 rgba(0,0,0,.35)}
.meter span{font-family:var(--display);font-size:9px;font-weight:400;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--neon)}
.meter.bal>span::before{content:"1P";content:"1P" / "";display:inline-block;margin-right:6px;padding:1px 3px;background:var(--neon);color:var(--night)}
.meter b{font-weight:600}
.meter.win b{color:var(--neon)}
.meter small{color:var(--muted)}
/* the demo badge stays at the shell's 10 px: the UI face on the square pixel plate (the pixel face would need 8 px to fit) */
.demo{border-radius:0;font-family:var(--ui);font-weight:600;font-size:10px;letter-spacing:.04em;padding:1px 4px}
/* the "A" face button: convex, lit from the top left like the symbols (a small highlight, the face, a darker lower
   side), seated in the console's dark ring with a hard lip; the engraved letter in night ink */
.spin{background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--btn-top) 55%,#fff) 0 9%,var(--btn-top) 30%,var(--btn-low) 70%,color-mix(in srgb,var(--btn-low) 72%,var(--night)) 94%);
  box-shadow:0 0 0 3px var(--plate-lo),0 0 0 5px color-mix(in srgb,var(--violet) 55%,var(--night)),0 6px 0 3px rgba(0,0,0,.4)}
.spin svg{width:46%;height:46%;shape-rendering:crispEdges}
.spin:active:not(:disabled){transform:translateY(3px)}
.auto{border-radius:50%}
.tablet{border:0;border-radius:2px;background:var(--plate);box-shadow:var(--px-edge)}
.tablet .th{font-family:var(--display);font-size:11px;font-weight:400;line-height:1.4;color:var(--violet-ink)}
.tablet .price{font-weight:600;color:var(--cream)}
.tablet small{color:var(--muted)}
.tablet[aria-pressed="true"]{box-shadow:0 0 0 var(--px) var(--plate-lo),0 0 0 calc(var(--px)*2) var(--neon)}

/* ---- the console (variant "handheld"): moulded plastic round the screen, lit from the top left (a sheen, a light
   upper edge, a darker lower bevel, a parting line, one soft shadow under it); on wide screens a D-pad in its well, two
   convex face buttons, a slotted speaker grille and a power LED beside it. Padding in cell units: the board's --cell
   leaves room for it (cells.js layout); the controls hang outside the frame on wide screens only. No logo, no brand. ---- */
.frame{isolation:isolate;padding:calc(var(--cell)*.16) calc(var(--cell)*.2) calc(var(--cell)*.14);gap:6px}
.board,.message{position:relative;z-index:1}
.pp-shell{position:absolute;inset:0;z-index:0;pointer-events:none}
.pp-shell i,.pp-shell b{position:absolute;display:block}
.pp-shell .body{inset:0;border-radius:calc(var(--cell)*.14) calc(var(--cell)*.14) calc(var(--cell)*.4) calc(var(--cell)*.14);
  background:radial-gradient(90% 70% at 16% 0%,color-mix(in srgb,var(--shell-hi) 45%,transparent),transparent 62%),linear-gradient(180deg,var(--shell),color-mix(in srgb,var(--shell) 78%,var(--shell-lo)));
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--shell-hi) 85%,transparent),inset 2px 0 0 color-mix(in srgb,var(--shell-hi) 40%,transparent),
    inset 0 -5px 0 color-mix(in srgb,var(--shell-lo) 80%,transparent),inset -3px 0 0 color-mix(in srgb,var(--shell-lo) 45%,transparent),
    0 0 0 2px var(--plate-lo),0 10px 0 rgba(0,0,0,.28),0 30px 60px -10px rgba(0,0,0,.55)}
.pp-shell .dpad,.pp-shell .fb,.pp-shell .grille,.pp-shell .led{display:none}
.pp-shell .led{left:calc(var(--cell)*.08);top:calc(var(--cell)*.06);width:6px;height:6px;background:var(--neon);box-shadow:0 0 0 2px var(--plate-lo),0 0 8px 2px color-mix(in srgb,var(--neon) 45%,transparent)}
@media (min-width:861px) and (min-aspect-ratio:5/4){
  .pp-shell .body{left:calc(var(--cell)*-1.5);right:calc(var(--cell)*-1.5)}
  .pp-shell .dpad,.pp-shell .fb,.pp-shell .grille,.pp-shell .led{display:block}
  .pp-shell .led{left:calc(var(--cell)*-1.25)}
  /* the D-pad: a cross of dark plastic (the arms' ends lit toward the key light, dark away from it, a dimple in the
     middle) seated in a round well (an inner shadow at its top, a light lip at its bottom) */
  .pp-shell .dpad{left:calc(var(--cell)*-1.42);top:calc(50% - var(--cell)*.64);width:calc(var(--cell)*1.28);height:calc(var(--cell)*1.28);border-radius:50%;
    background:radial-gradient(circle,rgba(0,0,0,.42) 0 7%,transparent 8%),
      linear-gradient(180deg,var(--dpad-hi) 0 10%,var(--dpad) 10% 88%,var(--dpad-lo) 88%) 50% 50%/26% 76% no-repeat,
      linear-gradient(90deg,var(--dpad-hi) 0 10%,var(--dpad) 10% 88%,var(--dpad-lo) 88%) 50% 50%/76% 26% no-repeat,
      color-mix(in srgb,var(--shell-lo) 40%,var(--shell));
    box-shadow:inset 0 3px 4px rgba(0,0,0,.32),0 1px 0 color-mix(in srgb,var(--shell-hi) 60%,transparent)}
  .pp-shell .dpad b{display:none}
  /* the two face buttons on a slant: convex, a small highlight toward the light, in a ring of the body's darker plastic */
  .pp-shell .fb{width:calc(var(--cell)*.52);height:calc(var(--cell)*.52);border-radius:50%;
    background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--fb) 50%,#fff) 0 12%,var(--fb) 38%,color-mix(in srgb,var(--fb) 60%,var(--night)) 100%);
    box-shadow:0 0 0 calc(var(--cell)*.05) color-mix(in srgb,var(--shell-lo) 70%,var(--shell)),0 3px 0 calc(var(--cell)*.05) rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.35)}
  .pp-shell .fb.a{right:calc(var(--cell)*-.62);top:calc(50% - var(--cell)*.62)}
  .pp-shell .fb.b{right:calc(var(--cell)*-1.28);top:calc(50% - var(--cell)*.18)}
  /* the speaker grille: slanted slots, each with a light lower lip */
  .pp-shell .grille{right:calc(var(--cell)*-1.3);bottom:calc(var(--cell)*.3);width:calc(var(--cell)*1.1);height:calc(var(--cell)*.6);border-radius:3px;
    background:repeating-linear-gradient(135deg,transparent 0 5px,var(--shell-lo) 5px 8px,color-mix(in srgb,var(--shell-hi) 55%,transparent) 8px 9px)}
}
body[data-variant="clean"] .pp-shell .body{border-radius:2px;left:0;right:0;background:var(--plate);box-shadow:var(--px-edge)}
body[data-variant="clean"] .pp-shell .dpad,body[data-variant="clean"] .pp-shell .fb,body[data-variant="clean"] .pp-shell .grille,body[data-variant="clean"] .pp-shell .led{display:none}
/* the message line: a small status LCD under the screen (unlit glass, recessed: a shadow at its top, a light lip under it) */
.message{display:flex;align-items:center;justify-content:center;gap:.4em;flex-wrap:wrap;padding:2px 10px;border-radius:2px;background:color-mix(in srgb,var(--lcd-off) 60%,var(--night));color:var(--cream);font-weight:600;
  box-shadow:inset 0 2px 0 rgba(0,0,0,.45),0 1px 0 color-mix(in srgb,var(--shell-hi) 50%,transparent)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--neon)}
.message .tag{font-family:var(--display);font-size:clamp(8px,1vw,11px);font-weight:400;line-height:1.6;color:var(--neon);text-transform:uppercase}

/* ---- the screen: a recessed LCD in a dark bezel (a light lip under it); the glass is lit from behind, a little more
   toward the top left, with a fine dot grid (12 dots a cell, so the unlit rows continue it) and a static reflection.
   A winning cascade swaps its palette for two frames (skin.js palettePresenter: hue, about the same brightness) ---- */
.cells-board{--dot:calc(var(--cell)/12);--lcd-now:var(--lcd);--lcd-dot-now:var(--lcd-dot)}
.cells-board.pal{--lcd-now:var(--lcd-alt);--lcd-dot-now:var(--lcd-dot-alt)}
.cells-board .cs-field{background:linear-gradient(112deg,transparent 0 56%,rgba(255,255,255,.03) 56% 64%,transparent 64% 69%,rgba(255,255,255,.02) 69% 71%,transparent 71%),
    radial-gradient(circle,var(--lcd-dot-now) 0 30%,transparent 34%) 0 0/var(--dot) var(--dot),
    radial-gradient(120% 90% at 18% 0%,color-mix(in srgb,var(--neon) 8%,transparent),transparent 62%),var(--lcd-now);
  box-shadow:inset 0 calc(var(--cell)*.14) calc(var(--cell)*.18) calc(var(--cell)*-.1) rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.45),
    0 0 0 calc(var(--cell)*.07) var(--bezel),0 2px 0 calc(var(--cell)*.07) color-mix(in srgb,var(--shell-hi) 55%,var(--shell))}
.cells-board.feature .cs-field{box-shadow:inset 0 0 0 2px var(--fs-ring),inset 0 calc(var(--cell)*.14) calc(var(--cell)*.18) calc(var(--cell)*-.1) rgba(0,0,0,.55),
    0 0 0 calc(var(--cell)*.07) var(--bezel),0 2px 0 calc(var(--cell)*.07) color-mix(in srgb,var(--shell-hi) 55%,var(--shell))}
.cells-board .sym img{image-rendering:pixelated}
/* a closed row: the same LCD unlit (darker glass, a dimmer dot grid in step with the lit rows), filling its whole cell
   so the closed rows read as one piece */
.cells-board .sym.s-sky{position:absolute;inset:-3.2%;width:auto;height:auto;background:radial-gradient(circle,var(--lcd-off-dot) 0 30%,transparent 34%) 0 0/var(--dot,6px) var(--dot,6px),var(--lcd-off)}
.cells-board .sym.s-sky .sky-px{display:none}
/* the level-up block: the opening row turns into lit blocks (bevelled toward the light) with an engraved arrow */
.cells-board .sym.s-unlock svg{display:block;width:100%;height:100%}
.s-unlock .u-b{fill:var(--neon)}
.s-unlock .u-h{fill:color-mix(in srgb,var(--neon) 55%,#fff)}
.s-unlock .u-e{fill:color-mix(in srgb,var(--neon) 55%,var(--night))}
.s-unlock .u-l{fill:color-mix(in srgb,var(--neon) 50%,#fff)}
.s-unlock .u-a{fill:var(--night)}
/* wins: four pixel corner brackets round the cell (a game's cursor) over a faint wash of the LCD's light, the symbol a
   step larger; popped cells dissolve in three steps (a touch of LCD ghosting) instead of growing away */
.cells-board .cell.win::before{inset:5%;border:0;border-radius:0;box-shadow:none;--b:max(2px,calc(var(--cell)*.05));--l:28%;
  background:linear-gradient(var(--neon) 0 0) 0 0/var(--l) var(--b),linear-gradient(var(--neon) 0 0) 0 0/var(--b) var(--l),
    linear-gradient(var(--neon) 0 0) 100% 0/var(--l) var(--b),linear-gradient(var(--neon) 0 0) 100% 0/var(--b) var(--l),
    linear-gradient(var(--neon) 0 0) 0 100%/var(--l) var(--b),linear-gradient(var(--neon) 0 0) 0 100%/var(--b) var(--l),
    linear-gradient(var(--neon) 0 0) 100% 100%/var(--l) var(--b),linear-gradient(var(--neon) 0 0) 100% 100%/var(--b) var(--l),
    color-mix(in srgb,var(--neon) 9%,transparent);
  background-repeat:no-repeat;animation-timing-function:steps(2,end)}
.cells-board .cell.pop .face,.cells-board .cell.pop .badge{transform:none;transition:opacity var(--cs-pop,.26s) steps(3,end)}
.cells-board .cell.recode .face{animation-timing-function:steps(4,end)}
.cells-board .cell.land .face{animation-timing-function:steps(3,end)}
.cells-board .cell.land::after{border-radius:0}
.cells-board .cs-float{font-family:var(--display);font-weight:400;font-size:calc(var(--cell)*.22);-webkit-text-stroke:calc(var(--cell)*.035) var(--night);text-shadow:0 calc(var(--cell)*.04) 0 var(--night);animation-timing-function:steps(8,end)}
.cells-board .cs-float.rwf{color:var(--neon);font-size:calc(var(--cell)*.3)}
.cells-board .cs-float.rwf-top{margin-top:calc(var(--cell)*.42);font-size:calc(var(--cell)*.2);color:#FFD45A}
.cells-board .cs-float.lff{font-size:calc(var(--cell)*.24)}
.cells-board .cs-float.lff-up{color:#FF8256}.cells-board .cs-float.lff-pc{color:var(--neon)}.cells-board .cs-float.lff-cp{color:var(--neon)}.cells-board .cs-float.lff-lost{color:#FF5A6E}
/* the band above the field: the level meter (left) and, in Stage 2, the hearts (right) share it; small LCD readouts */
.cells-board{--lf-h:var(--rw-h);--lf-gap:var(--rw-gap)}
.cells-board .l-rows-strip>.rws,.cells-board .l-lives-strip>.lfs{border-radius:2px;box-shadow:inset 0 2px 0 rgba(0,0,0,.4),0 0 0 2px color-mix(in srgb,var(--violet) 40%,var(--night))}
.cells-board .rw-n{font-weight:400;color:var(--cream)}
.cells-board .rw-pip{width:calc(var(--rw-h)*.32);height:calc(var(--rw-h)*.32)}

/* ---- the Stage 2 bar: the stage name in the pixel face, the spin (of at most the cap), the total won ---- */
.fsbar{border:0;border-radius:2px;gap:14px;padding:5px 14px;background:var(--plate-lo);box-shadow:0 0 0 2px #FF8A1F;color:var(--cream);font-weight:600}
.fsbar .s2{font-family:var(--display);font-weight:400;font-size:clamp(9px,1.1vw,13px);color:#FFB020;text-transform:uppercase}
.fsbar b{color:var(--neon)}
.fsbar small{color:var(--muted);font-weight:400}

/* ---- overlays, panels and buttons: titles in the pixel face (it runs wide: smaller sizes), texts in the UI face ---- */
.ovcard h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,7vw,72px);line-height:1.15;color:var(--violet-ink);text-shadow:0 4px 0 var(--shell-lo),0 8px 0 var(--plate-lo)}
.overlay.bigwin.t1 h2{font-size:clamp(26px,7.6vw,80px)} .overlay.bigwin.t2 h2{font-size:clamp(24px,7.2vw,84px);color:var(--neon)}
.ovamt{font-family:var(--ui);color:var(--neon)}
.ovamt:not(:empty){border-radius:2px;box-shadow:inset 0 0 0 1px var(--ov-plate-line),inset 0 3px 0 rgba(0,0,0,.35)}
.ovcard p{color:var(--cream)}
.btn{border-radius:2px;font-family:var(--display);font-weight:400;font-size:clamp(12px,1.4vw,16px);padding:14px 24px;box-shadow:0 0 0 3px var(--plate-lo),0 6px 0 3px rgba(0,0,0,.4)}
.panel{border-radius:2px;border-width:2px}
.panel h2{font-family:var(--display);font-weight:400;font-size:clamp(16px,2.4vw,26px);line-height:1.3;color:var(--violet-ink)}
.panel h3{font-family:var(--display);font-weight:400;font-size:clamp(11px,1.4vw,15px);line-height:1.5;color:var(--neon)}
.panel .lead,.panel small{color:var(--muted)}
.ptc{border-radius:2px;background:var(--plate-lo)}
.ptc .symbox,.symbox{position:relative;background:var(--lcd);box-shadow:inset 0 0 0 2px var(--plate-lo),inset 0 4px 6px -2px rgba(0,0,0,.5)}
.ptc .symbox .sym,.symbox .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;image-rendering:pixelated}
.symbox .sym.s-sky{position:absolute;inset:0}
.ptc h4{font-weight:600}
.special{grid-template-columns:70px 1fr}
.special .symbox{width:70px;height:70px;--cell:70px}
.special p{margin:0}
.levels{list-style:none;padding:0;margin:8px 0;display:grid;gap:6px}
.levels li{display:flex;align-items:center;gap:10px}
.levels .lvn{flex:none;display:grid;place-items:center;width:28px;height:28px;font-family:var(--display);font-size:11px;background:var(--neon);color:var(--night)}
.levels .bars{flex:none;display:flex;flex-direction:column-reverse;gap:2px;width:30px}
.levels .bars i{display:block;height:3px;background:color-mix(in srgb,var(--cream) 22%,var(--plate-lo))}
.levels .bars i.on{background:var(--neon)}
.stage2{padding-left:20px}
.chips button,.tog,.linkrow{border-radius:2px}
.screen h2{font-family:var(--display);font-weight:400;font-size:clamp(16px,3vw,30px);line-height:1.3}

/* ---- the stage card: diamonds wipe across in steps, the card title shows, the diamonds clear (skin.js stageCard) ---- */
.pp-wipe{position:fixed;inset:0;z-index:45;pointer-events:none;display:none;overflow:hidden}
.pp-wipe.show{display:block}
.pp-wipe .dias{position:absolute;inset:0}
.pp-wipe .dias i{position:absolute;display:block;background:var(--plate-lo);box-shadow:inset 0 0 0 3px color-mix(in srgb,#FF8A1F 50%,var(--plate-lo));transform:rotate(45deg) scale(0)}
.pp-wipe .card{position:absolute;left:50%;top:50%;translate:-50% -50%;padding:.9em 1.2em;font-family:var(--display);font-size:clamp(22px,6vw,64px);line-height:1;white-space:nowrap;color:#FFB020;
  background:var(--plate-lo);box-shadow:0 0 0 4px #FF8A1F,0 0 0 8px var(--plate-lo);text-shadow:0 4px 0 #6A1A16;opacity:0}
.pp-wipe.still{background:var(--plate-lo);opacity:0}
.pp-wipe.still .dias{display:none}
/* big wins: octagonal pixel coins (a light upper left, a darker lower right, a struck slot) and four-point stars
   tumbling down in steps */
.pp-coins{position:fixed;inset:0;z-index:42;pointer-events:none;overflow:hidden}
.pp-coins i{position:absolute;left:var(--x);top:-6vh;width:calc(3.2vh*var(--s));height:calc(3.2vh*var(--s));
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:linear-gradient(#B0641C 0 0) 50% 50%/16% 50% no-repeat,#FFD45A;box-shadow:inset -.5vh -.5vh 0 #E39E2C,inset .45vh .45vh 0 #FFF5BF;
  animation:pp-coin 3.2s steps(16,end) var(--d) forwards}
.pp-coins i.star{clip-path:none;box-shadow:none;width:calc(2.6vh*var(--s));height:calc(2.6vh*var(--s));
  background:linear-gradient(#FFF5BF 0 0) 50% 0/34% 100% no-repeat,linear-gradient(#FFF5BF 0 0) 0 50%/100% 34% no-repeat}
@keyframes pp-coin{0%{transform:translate(0,0) scaleX(1)}25%{transform:translate(calc(var(--dx)*.25),28vh) scaleX(.3)}50%{transform:translate(calc(var(--dx)*.5),56vh) scaleX(1)}
  75%{transform:translate(calc(var(--dx)*.75),84vh) scaleX(.3)}100%{transform:translate(var(--dx),112vh) scaleX(1)}}

/* ---- phones (the shell's two-row thumb-zone HUD): a slimmer body, the title in one line where it fits (no tracking:
   the pixel face already carries its own gap); the 360 px phone keeps every label on one line ---- */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:calc(var(--cell)*.1) calc(var(--cell)*.16) calc(var(--cell)*.1)}
  .pp-shell .body{border-radius:calc(var(--cell)*.12)}
  .logo h1{font-size:16px;letter-spacing:0}
  .meter span{font-size:9px;letter-spacing:.03em}
  .fsbar{gap:10px;padding:4px 10px;font-size:14px}
}
/* phones: the name does not keep one line between the button groups at a legible size (16 px needs ≈ 444 px of screen),
   so it stacks as a two-line logo inside the header's own row ("Pixel" over "Power-Up": the width holds the first
   word alone, never a break after the hyphen); no second header row, so the board keeps its height */
@media (max-width:520px){
  .logo h1{white-space:normal;max-width:9em;font-size:15px;line-height:1.25}
}
@media (max-width:400px){
  .tablet .th{font-size:9px}
  .meter.bal>span::before{margin-right:4px}
  .fsbar{gap:8px;font-size:13px}
}

/* ---- reduced motion: nothing drifts, breathes, bubbles or tumbles; the window keeps one palette ---- */
body.still .pw .clouds,body.still .hall .screens,body.still .castle .lit,body.still .castle .bubbles b{animation:none}
body.still .pp-coins{display:none}
body.still .cells-board.pal{--lcd-now:var(--lcd);--lcd-dot-now:var(--lcd-dot)}
@media (prefers-reduced-motion:reduce){
  .pw .clouds,.hall .screens,.castle .lit,.castle .bubbles b{animation:none}
  .pp-coins{display:none}
  .cells-board.pal{--lcd-now:var(--lcd);--lcd-dot-now:var(--lcd-dot)}
}