/* Cosmic Forge skin on the shared game shell: molten cast metal in the void at the edge of a galaxy. A star forge (an
   anvil-shaped asteroid with glowing seams low on the right, a white star in two orbital rings high on the left, the
   galaxy's disc on the horizon) or a spiral nebula, and a supernova sky with slow shock rings in the Stellar Forge; the
   grid rests in an anvil cradle of bevelled iron (rim, a molten seam under the grid, two orbital rings, the message on
   the anvil's body) or a clean iron frame; the window is the void, recessed under the rim, with a static star field and
   a faint nebula glow; a cockpit console as the HUD (the shell's bar, the spin
   button in the middle of a raised arc on wide screens); the implosion into the free spins. Theme tokens (--molten,
   --void, --plasma, the iron and panel shades, --on-accent, --on-molten) come from skin.js themeMap. Every text stands
   on the void, a panel or the iron plate (≥ 4.5:1 in all three presets: Forge Orange, Pulsar Cyan, Dark Matter); the
   plasma accent is decoration, its light mix (--plasma-hi) the only accent ink. Everything that moves is transform or
   opacity (the 7 × 7 grid stays smooth); glows are static paint.
   One light model for the scene, the frame, the symbols (art.js) and the title: a cool key light of starlight from the
   top left (the white star in its orbits) and the forge's heat rising from below on the right. Metal is cold steel on
   its lit top and glows at its base; orange appears only where something is hot. */
:root{
  --molten:#FF6A1F; --molten-hi:#FFA97D; --molten-lo:#80350F; --void:#0A0A16; --tint:#0A0A16; --plasma:#8C6CFF; --plasma-hi:#BAA7FF;
  --iron:#3D404D; --iron-hi:#656975; --iron-lo:#15161E; --panel:#1C1D29; --panel-hi:#242734; --on-accent:#F3F1FA; --on-molten:#0B0A12;
  --ink:#F3F1FA; --muted:#BDB9D2; --cool:#DCE6FF;
  --display:"Michroma","Exo 2",system-ui,-apple-system,"Segoe UI",sans-serif; --ui:"Exo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:12px; --radius-sm:8px; --line:color-mix(in srgb,var(--iron-hi) 70%,transparent);
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--void) 78%); --panel-border:var(--iron-hi);
  --hud-bg:linear-gradient(180deg,var(--panel-hi),var(--iron-lo));
  --ibtn-bg:linear-gradient(180deg,var(--panel-hi),var(--iron-lo)); --ibtn-ink:var(--molten-hi);
  --btn-bg:linear-gradient(180deg,var(--molten-hi),var(--molten) 70%); --btn-ink:var(--on-molten);
  --snap:cubic-bezier(.62,0,.24,1.22);
  /* the window: the void seen through the anvil, a static star field, a faint nebula glow at its heart and the forge's
     warmth at its foot (static paint, a little lighter than the recess round it) */
  --window-bg:radial-gradient(1.2px 1.2px at 9% 14%,#FFF 50%,transparent 60%),radial-gradient(1px 1px at 27% 71%,#DDE4FF 50%,transparent 60%),
    radial-gradient(1.4px 1.4px at 44% 36%,#FFF4E0 50%,transparent 60%),radial-gradient(1px 1px at 63% 9%,#FFF 50%,transparent 60%),
    radial-gradient(1.2px 1.2px at 81% 58%,#DDE4FF 50%,transparent 60%),radial-gradient(1px 1px at 92% 86%,#FFF 50%,transparent 60%),
    radial-gradient(1px 1px at 16% 92%,#FFF4E0 50%,transparent 60%),radial-gradient(1.3px 1.3px at 71% 31%,#FFF 50%,transparent 60%),
    radial-gradient(1px 1px at 36% 54%,#C8D2FF 50%,transparent 60%),radial-gradient(1px 1px at 55% 79%,#FFF 50%,transparent 60%),
    radial-gradient(ellipse 70% 55% at 50% 44%,color-mix(in srgb,var(--void) 84%,var(--plasma)),transparent 80%),
    linear-gradient(180deg,color-mix(in srgb,var(--void) 92%,var(--cool)) 0%,var(--void) 55%,color-mix(in srgb,var(--void) 88%,var(--molten)) 100%);
  --window-radius:6px; --reel-sep:rgba(200,210,255,.045);
  --win-glow:var(--molten); --win-ring:var(--molten-hi); --land-ring:var(--plasma-hi); --tease-glow:var(--plasma); --fs-ring:var(--plasma);
  --cluster-radius:18%; --float-ink:var(--ink); --float-stroke:#0B0A12; --sym-size:92%; --focus:var(--molten-hi);
  --fall-ease:var(--snap);
  --spin-ring:transparent; /* the spin button's own orbit turns while a round plays */
  /* one static grain layer for the whole scene (art bible §5.5; never on cells) */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
body{background:var(--void)}

/* ---- scene: the star forge (default), the spiral nebula, the supernova sky (Stellar Forge). Silhouettes are masks from
   skin.js; the layers fade; only the shock rings of the supernova move, slowly (none with reduced motion). */
.scene{background:radial-gradient(70% 55% at 86% 108%,color-mix(in srgb,var(--molten) 15%,var(--void)),transparent 70%),
  radial-gradient(60% 50% at 16% 10%,color-mix(in srgb,var(--cool) 6%,transparent),transparent 70%),
  radial-gradient(130% 70% at 50% 108%,color-mix(in srgb,var(--tint) 45%,var(--void)),var(--void) 62%),var(--void)}
.scene>div>i{position:absolute;inset:0;display:block}
.scene .stars .far{opacity:.6;background:radial-gradient(1px 1px at 23px 41px,#FFF 50%,transparent 60%) 0 0/173px 173px,radial-gradient(1px 1px at 97px 13px,#DDE4FF 50%,transparent 60%) 0 0/173px 173px,
  radial-gradient(1px 1px at 141px 119px,#FFF4E0 50%,transparent 60%) 0 0/173px 173px,radial-gradient(1px 1px at 61px 151px,#FFF 50%,transparent 60%) 0 0/173px 173px}
.scene .stars .near{opacity:.8;background:radial-gradient(1.6px 1.6px at 51px 77px,#FFF 50%,transparent 60%) 0 0/311px 311px,radial-gradient(1.4px 1.4px at 233px 29px,#FFE9C8 50%,transparent 60%) 0 0/311px 311px,
  radial-gradient(1.8px 1.8px at 181px 251px,#DDE4FF 50%,transparent 60%) 0 0/311px 311px}
.scene .forge,.scene .nebula,.scene .nova{transition:opacity .8s}
.scene .forge .galaxy{background:radial-gradient(ellipse 85% 11% at 50% 74%,rgba(255,214,170,.16),transparent 70%),radial-gradient(ellipse 55% 4% at 50% 74%,rgba(255,240,224,.22),transparent 70%);transform:rotate(-7deg)}
.scene .forge .sun{inset:auto;left:15%;top:17%;width:22vmin;height:22vmin;margin:-11vmin 0 0 -11vmin;border-radius:50%;
  background:radial-gradient(circle,#FFFFFF 0 4%,color-mix(in srgb,var(--cool) 85%,transparent) 7%,color-mix(in srgb,var(--cool) 22%,transparent) 16%,color-mix(in srgb,var(--plasma) 8%,transparent) 34%,transparent 70%)}
/* the star's orbits: thin rings lit like everything else — starlight on their upper edge, heat on the lower */
.scene .forge .orb{inset:auto;left:15%;top:17%;width:44vmin;height:10vmin;margin:-5vmin 0 0 -22vmin;border-radius:50%;border:1px solid;
  border-color:color-mix(in srgb,var(--cool) 34%,transparent) color-mix(in srgb,var(--cool) 12%,transparent) color-mix(in srgb,var(--molten-hi) 26%,transparent) color-mix(in srgb,var(--cool) 16%,transparent);transform:rotate(-18deg)}
.scene .forge .orb.o2{width:28vmin;height:7vmin;margin:-3.5vmin 0 0 -14vmin;transform:rotate(24deg)}
.scene .forge .rock,.scene .forge .seams,.scene .nebula .spiral{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center bottom;mask-position:center bottom}
/* the rock: a midground silhouette, mirrored to the right and pushed a little below the frame; its face fades into the
   haze (the mask's alpha, skin.js), its body is a cool-lit iron gradient darkening downwards with the forge's heat at
   its foot; the heat on its face is a soft band, not a hard line */
.scene .forge .rock,.scene .forge .seams{transform:scaleX(-1) translateY(3%)}
.scene .forge .rock{background:radial-gradient(46% 26% at 30% 100%,color-mix(in srgb,var(--molten) 24%,#08080F),transparent 72%),
  linear-gradient(180deg,color-mix(in srgb,var(--iron-lo) 84%,var(--cool)) 64%,color-mix(in srgb,var(--iron-lo) 60%,var(--void)) 78%,#07070D 92%);opacity:.8;-webkit-mask-image:var(--cf-rock);mask-image:var(--cf-rock)}
.scene .forge .seams{background:linear-gradient(90deg,transparent,var(--molten) 30%,#FFC64A 55%,var(--molten) 80%,transparent);opacity:.6;-webkit-mask-image:var(--cf-seams);mask-image:var(--cf-seams)}
/* the forge's heat over the rock, and the light behind the board that lifts it off the sky */
.scene .forge .heat{background:radial-gradient(32% 26% at 76% 96%,color-mix(in srgb,var(--molten) 22%,transparent),transparent 70%)}
.scene .backlight{background:radial-gradient(34vmax 30vmax at 50% 42%,color-mix(in srgb,var(--plasma) 11%,transparent),transparent 70%),
  radial-gradient(40vmax 14vmax at 50% 74%,color-mix(in srgb,var(--molten) 9%,transparent),transparent 70%)}
.scene .grain{background:var(--grain) 0 0/160px 160px;opacity:.06;mix-blend-mode:overlay}
.scene .nebula{opacity:0}
.scene .nebula .cloud{background:radial-gradient(ellipse 50% 32% at 34% 40%,color-mix(in srgb,var(--plasma) 22%,transparent),transparent 70%),radial-gradient(ellipse 40% 30% at 70% 62%,rgba(232,106,216,.14),transparent 70%)}
.scene .nebula .spiral{-webkit-mask-image:var(--cf-spiral);mask-image:var(--cf-spiral);-webkit-mask-position:center;mask-position:center;opacity:.55;transform:rotate(-14deg) scale(1.05);
  background:radial-gradient(circle at 50% 50%,#FFE6F6 0,color-mix(in srgb,var(--plasma-hi) 80%,#E86AD8) 12%,color-mix(in srgb,var(--plasma) 70%,transparent) 34%,transparent 66%)}
.scene .nebula .heart{inset:auto;left:50%;top:50%;width:18vmin;height:18vmin;margin:-9vmin 0 0 -9vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,240,250,.55),transparent 70%)}
body.bg-nebula .scene .nebula{opacity:1}
body.bg-nebula .scene .forge{opacity:0}
/* the supernova sky of the Stellar Forge: a remnant over the grid and three shock rings that slowly widen */
.scene .nova{opacity:0}
.scene .nova .remnant{background:radial-gradient(circle at 50% 42%,rgba(255,244,224,.34) 0,color-mix(in srgb,var(--molten) 22%,transparent) 9vmin,color-mix(in srgb,var(--plasma) 18%,transparent) 28vmin,transparent 60vmin)}
.scene .nova .shock{inset:auto;left:50%;top:42%;width:80vmin;height:80vmin;margin:-40vmin 0 0 -40vmin;border-radius:50%;opacity:0;
  border:2px solid color-mix(in srgb,var(--molten-hi) 35%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--plasma) 25%,transparent)}
body.fs .scene .nova .shock{animation:cf-shock 12s linear infinite}
body.fs .scene .nova .shock.s2{animation-delay:-4s}body.fs .scene .nova .shock.s3{animation-delay:-8s}
body.fs .scene .nova{opacity:1}
body.fs .scene .forge,body.fs .scene .nebula{opacity:0}
.scene .haze{background:radial-gradient(ellipse 75% 70% at 50% 46%,transparent 52%,rgba(0,0,0,.5) 100%)}
@keyframes cf-shock{0%{opacity:0;transform:scale(.35)}15%{opacity:1}100%{opacity:0;transform:scale(1.5)}}

/* ---- title and round buttons */
/* the title is struck star-metal: starlit steel at the top of its letters, a dark horizon, then the forge's heat at
   their foot (background-clip text; --ink is the colour for tools and forced colours). The padding keeps the "g"
   inside the painted box; the shadows are static. */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.06em;line-height:1.1;padding:.04em .1em .14em;color:var(--ink);
  background:linear-gradient(180deg,#F7F9FF 14%,#CDD4E3 34%,#727B8F 49%,#B9C0CF 57%,#FFC88A 71%,var(--molten) 86%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.9)) drop-shadow(0 5px 12px color-mix(in srgb,var(--molten) 26%,transparent))}
@media (forced-colors:active){.logo h1{-webkit-text-fill-color:currentColor;background:none;filter:none}}
.ibtn{border:1.5px solid var(--iron-hi);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 6px rgba(0,0,0,.5)}
.ibtn:hover{border-color:var(--molten)}

/* ---- the frame "anvil-cradle": the grid on the face of an iron anvil — an iron rim with a molten seam round the grid,
   two orbital rings crossing behind it, the message on the anvil's body with its horn to the left. Padding in px: the
   board leaves 0.4 cell beside the 7 columns on a phone (≈ 18 px), so the rim stays inside 8 px a side. "clean": a thin
   iron frame and one seam, no rings, no anvil body. */
.frame{padding:9px 9px 4px;gap:5px}
.board{z-index:1}
.message{position:relative;z-index:1}
.cradle{position:absolute;inset:0;z-index:0;pointer-events:none}
.cradle>i{position:absolute;display:block}
.cradle .orbit{left:50%;top:44%;width:128%;height:30%;border-radius:50%;transform:translate(-50%,-50%) rotate(-11deg);border:1px solid;
  border-color:color-mix(in srgb,var(--cool) 30%,transparent) color-mix(in srgb,var(--cool) 10%,transparent) color-mix(in srgb,var(--molten-hi) 40%,transparent) color-mix(in srgb,var(--cool) 14%,transparent)}
.cradle .orbit.o2{width:118%;height:22%;top:52%;transform:translate(-50%,-50%) rotate(14deg);
  border-color:color-mix(in srgb,var(--plasma-hi) 34%,transparent) color-mix(in srgb,var(--plasma-hi) 10%,transparent) color-mix(in srgb,var(--molten-hi) 30%,transparent) color-mix(in srgb,var(--plasma-hi) 14%,transparent)}
body.fs .cradle .orbit{border-top-color:color-mix(in srgb,var(--plasma-hi) 55%,transparent)}
/* the rim: forged iron with a bevel — a starlit edge top left, a dark one bottom right — one shadow under it, and the
   forge's warmth on its underside */
.cells-board::before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:11px;pointer-events:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--iron-hi) 80%,var(--cool)) 0%,var(--iron) 16%,var(--iron-lo) 58%,color-mix(in srgb,var(--iron-lo) 70%,var(--molten)) 100%);
  box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--cool) 45%,transparent),inset -1px -1px 0 rgba(0,0,0,.65),0 0 0 1px #07070D,
    0 16px 34px rgba(0,0,0,.62),0 12px 30px -10px color-mix(in srgb,var(--molten) 45%,transparent)}
/* the molten seam along the anvil's face, under the grid only: the heat comes from below */
.cells-board::after{content:"";position:absolute;left:4%;right:4%;bottom:-4px;height:2px;z-index:-1;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--molten) 18%,#FFD27A 50%,var(--molten) 82%,transparent)}
/* the anvil's body: an iron plate under the grid that carries the message, a seam along its top, the horn to the left */
.frame .message{width:min(100%,calc(var(--cell)*5.6));min-height:30px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .35em;padding:3px 12px;border-radius:2px 2px 10px 10px;
  background:linear-gradient(180deg,var(--panel-hi),var(--iron-lo));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cool) 16%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--molten) 55%,transparent),inset 0 0 0 1px #0B0A12,0 6px 14px rgba(0,0,0,.5)}
.frame .message::before{content:"";position:absolute;right:100%;top:0;width:clamp(16px,calc(var(--cell)*.6),40px);height:72%;pointer-events:none;
  background:linear-gradient(180deg,var(--iron),var(--iron-lo));clip-path:polygon(0 0,100% 0,100% 100%,62% 52%);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cool) 30%,transparent)}
.message{font-family:var(--ui);font-weight:600;color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.message b{color:var(--molten-hi)}
.message .tag{color:var(--muted)}
body[data-variant="clean"] .cradle{display:none}
body[data-variant="clean"] .cells-board::before{inset:-4px;background:var(--iron-lo);box-shadow:inset 0 0 0 1px var(--iron-hi),0 10px 24px rgba(0,0,0,.55)}
body[data-variant="clean"] .cells-board::after{display:none}
body[data-variant="clean"] .frame .message{background:none;box-shadow:none;padding:0 6px}
body[data-variant="clean"] .frame .message::before{display:none}

/* ---- the grid: a winning cell gets a molten ring; a reforged cell (a Supernova refill, the Shift) blooms in with a snap;
   a Supernova Core has an iron contour; Slag stays matte and dim (it never wins); the Nebula shimmers when it lands */
.sym{position:relative;width:100%;height:100%}
.sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.cells-board .cs-field{box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.78),inset 0 -1px 0 color-mix(in srgb,var(--cool) 14%,transparent),inset 0 0 0 1px rgba(0,0,0,.85),inset 0 0 22px rgba(0,0,0,.45)}
.cells-board.feature .cs-field{box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.78),inset 0 0 0 2px color-mix(in srgb,var(--plasma) 80%,transparent),inset 0 0 22px rgba(0,0,0,.45)}
.cells-board .sym.blank{opacity:.8}
.cells-board .cell.win::before{border-width:1.5px;border-radius:var(--cluster-radius)}
.cells-board .cell.win .face{transform:scale(1.06)}
.cells-board .cell.recode .face{animation-name:cf-reforge;animation-timing-function:var(--snap)}
.cells-board .cell.pop .face{transform:scale(.4) rotate(18deg)}
@keyframes cf-reforge{0%{opacity:0;transform:scale(.6)}62%{opacity:1;transform:scale(1.05)}100%{opacity:1;transform:none}}
.cells-board .cs-float{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.cells-board .cs-float .cf-fl{color:var(--plasma-hi);font-size:.8em}
/* the Supernova / Shift presenter in this game's materials (present-area.css): molten area, plasma Shift */
.cells-board{--ac-hit:color-mix(in srgb,var(--molten) 24%,transparent);--ac-edge:var(--molten-hi);--ac-glow:color-mix(in srgb,var(--molten) 55%,transparent);--ac-glow-core:rgba(255,246,226,.92);
  --ac-wave:color-mix(in srgb,var(--molten-hi) 85%,transparent);--ac-prime:#FFE9C0;--ac-pulse:color-mix(in srgb,var(--molten) 72%,transparent);
  --ac-shift:var(--plasma-hi);--ac-shift-glow:color-mix(in srgb,var(--plasma) 55%,transparent);--ac-ease:var(--snap)}

/* ---- the HUD: a cockpit console of dark iron with a molten seam. On wide screens the spin button sits in the middle of a
   raised arc (balance and bet to its left, autoplay and win to its right); phones keep the shell's thumb-zone rows. */
.hud{position:relative;border:1px solid var(--iron-hi);border-radius:24px 24px 14px 14px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cool) 18%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--molten) 40%,transparent),inset 0 0 0 1px #0B0A12,0 -6px 18px rgba(0,0,0,.45)}
.demo,.auto span{color:var(--on-accent)}
.meter span{color:var(--muted);font-family:var(--ui);font-weight:600}
.meter b{color:var(--ink);font-family:var(--ui);font-weight:600}.meter.win b{color:var(--molten-hi)}
.meter small{color:var(--muted)}
.pm,.auto{background:radial-gradient(circle at 38% 30%,var(--panel-hi),var(--iron-lo) 70%);color:var(--molten-hi);border:1.5px solid var(--iron-hi);box-shadow:0 2px 5px rgba(0,0,0,.5)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .game.hud-bar .hud{grid-template-columns:minmax(0,1fr) 230px auto 230px minmax(0,1fr);grid-template-areas:"bal bet spin auto win";margin-top:14px}
  .game.hud-bar .hud>.bal{grid-area:bal}.game.hud-bar .hud>.betctl{grid-area:bet;justify-content:center}.game.hud-bar .hud>.win{grid-area:win;text-align:right}
  .game.hud-bar .hud>.spinbox{display:contents}
  .game.hud-bar .spin{grid-area:spin;margin:-14px 0 -4px}
  .game.hud-bar .auto{grid-area:auto;justify-self:start}
  body.lefty .game.hud-bar .hud{grid-template-areas:"bal auto spin bet win"}
  body.lefty .game.hud-bar .auto{justify-self:end}
  /* the raised arc behind the spin button, with a seam along its rim */
  .game.hud-bar .hud::before{content:"";position:absolute;left:50%;top:-20px;width:180px;height:70px;margin-left:-90px;z-index:-1;border-radius:90px 90px 0 0;pointer-events:none;
    background:linear-gradient(180deg,var(--panel-hi),var(--iron-lo));border:1.5px solid color-mix(in srgb,var(--molten) 45%,var(--iron-hi));border-bottom:0;
    box-shadow:inset 0 2px 0 color-mix(in srgb,var(--molten) 55%,transparent),0 -4px 16px color-mix(in srgb,var(--molten) 18%,transparent)}
}
/* the spin button: the Star Anvil in the well of a bevelled iron disc (skin.js) — starlit top-left edge, the heat only
   on its lower edge and in the foot of the well, in the theme's molten colours; a contact shadow down and to the right
   (the key light is top left). The orbit precesses and the embers flicker while a round plays (none with reduced motion) */
.spin{background:none;box-shadow:none;color:var(--molten)}
.spin svg{left:0;top:0;width:100%;height:100%;transform:none;overflow:visible;filter:drop-shadow(2px 5px 6px rgba(0,0,0,.62))}
.spin .m0{stop-color:var(--molten)}.spin .m1{stop-color:var(--molten-hi)}
.spin .orbit{transform-origin:50px 55px}
.spin .sparks circle{transform-box:fill-box;transform-origin:center}
.spin:hover:not(:disabled) svg{filter:drop-shadow(2px 5px 6px rgba(0,0,0,.62)) drop-shadow(0 0 8px color-mix(in srgb,var(--molten) 55%,transparent))}
.spin.busy .orbit{animation:cf-precess 2.2s linear infinite}
.spin.busy .sparks .sp1{animation:cf-twinkle .9s ease-in-out infinite alternate}
.spin.busy .sparks .sp2{animation:cf-twinkle .9s ease-in-out -.3s infinite alternate}
.spin.busy .sparks .sp3{animation:cf-twinkle .9s ease-in-out -.6s infinite alternate}
.spin.kick svg{animation:cf-kick .3s var(--snap)}
@keyframes cf-precess{to{transform:rotate(360deg)}}
@keyframes cf-twinkle{from{opacity:.25;transform:scale(.6)}to{opacity:1;transform:scale(1.1)}}
@keyframes cf-kick{0%{transform:scale(.9)}100%{transform:none}}
/* the buy: a quiet iron pill (a secondary control, art bible §3.2) — starlit top edge, a thin plasma line */
.side .tablet{background:linear-gradient(180deg,var(--panel-hi),var(--iron-lo));border:1px solid color-mix(in srgb,var(--plasma) 45%,var(--iron-hi));color:var(--ink);border-radius:999px;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cool) 16%,transparent),0 6px 14px rgba(0,0,0,.45)}
.tablet .th{font-family:var(--display);font-weight:400;font-size:15px;letter-spacing:.03em;color:var(--molten-hi)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}

/* ---- the Stellar Forge bar: spin N of M, the Forge Tier dial (an arc of one segment per tier over the digit, and the
   Shift chance of the tier), the total won */
body.fs .fsbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;width:min(100%,calc(var(--cell)*7 + 18px));box-sizing:border-box}
.fsbar{position:relative;z-index:2;gap:10px;padding:2px 14px;border-radius:999px;background:linear-gradient(180deg,var(--panel-hi),var(--iron-lo));
  border:1.5px solid color-mix(in srgb,var(--plasma) 65%,var(--iron-hi));box-shadow:0 4px 12px rgba(0,0,0,.45);color:var(--ink);font-family:var(--ui);font-weight:600}
.fsbar b{color:var(--molten-hi)}
.fsbar .fsl{display:flex;align-items:center;min-width:0}
/* the round total: a small "Won" caption over the amount (like the dial's "Tier"), so the amount alone needs the width —
   up to the maximum win at the highest bet it fits whole beside the dial on a 360 px phone (the clip is a last guard) */
.fsbar .fsr{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;text-align:right;white-space:nowrap;min-width:0;max-width:100%;overflow:hidden}
.fsbar .fsw{font-size:12px;color:var(--muted)}
.fsbar .fsr b{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cf-dial{display:inline-flex;align-items:center;gap:7px}
.cf-arc{position:relative;width:48px;height:30px;flex:none}
.cf-arc svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cf-arc .seg{fill:none;stroke:var(--iron);stroke-width:6;stroke-linecap:round}
.cf-arc .seg.on{stroke:var(--molten)}
.cf-arc .seg.now{stroke:var(--molten-hi)}
.cf-arc b{position:absolute;left:0;right:0;bottom:-1px;text-align:center;font:400 14px/1 var(--display);color:var(--ink)}
.cf-dial[data-tier="0"] .cf-arc b{color:var(--muted)}
.cf-dt{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap}
.cf-dt small{font-size:12px;color:var(--muted)}
.cf-odds{font-size:12px;color:var(--plasma-hi)}
.cf-dial.go .cf-arc{animation:cf-pop .42s var(--snap)}
@keyframes cf-pop{0%{transform:scale(1.35)}100%{transform:none}}

/* ---- panels, paytable and overlays */
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.02em}
.panel h2{font-size:clamp(22px,3.4vw,32px)}.panel h3{font-size:clamp(17px,2.4vw,21px);color:var(--molten-hi)}
/* the card's word (FORGED / STELLAR / GALACTIC, the feature's name) is struck from the same metal as the title; the
   gradient repeats per line (1lh tiles from the content box), so a two-line name is struck the same way on each line */
.ovcard h2{font-size:clamp(28px,6.6vw,86px);line-height:1.06;padding:.04em .08em .14em;color:var(--ink);
  background:linear-gradient(180deg,#FFFFFF 6%,#D3DAE8 26%,#747D91 44%,#C0C7D5 52%,#FFD199 68%,var(--molten) 88%) 0 0/100% 1lh repeat-y;background-origin:content-box;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.9)) drop-shadow(0 8px 22px color-mix(in srgb,var(--molten) 32%,transparent))}
@media (forced-colors:active){.ovcard h2{-webkit-text-fill-color:currentColor;background:none;filter:none}}
.overlay.bigwin.t1 h2{font-size:clamp(32px,7.6vw,100px)}.overlay.bigwin.t2 h2{font-size:clamp(36px,8.6vw,118px)}
.ovamt{font-family:var(--ui);font-weight:700;color:var(--ink)}
.ovcard p{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.04em;border:1.5px solid var(--molten-lo)}
.ptc,.chips button,.tog{background:color-mix(in srgb,#000 25%,var(--panel))}
.ptc .symbox,.special .symbox{border-radius:6px;background:var(--window-bg);box-shadow:inset 0 0 0 1.5px var(--iron-hi)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px;flex:none}
.ptc .sym,.special .sym{position:absolute;inset:6%;width:auto;height:auto}
.ptc td:first-child{color:var(--muted)}
.special.cf-shift{grid-template-columns:auto 1fr}
.cf-shiftpic{display:flex;align-items:center;gap:6px}
.cf-shiftpic .symbox{width:64px;height:64px;--cell:64px}
.cf-shiftpic b{font-size:22px;color:var(--plasma-hi)}
.cf-blastpic{display:grid;grid-template-columns:repeat(var(--c,7),11px);grid-auto-rows:11px;gap:2px;margin:8px 0 2px}
.cf-blastpic i{display:block;border-radius:2px;background:var(--iron)}
.cf-blastpic i.hit{background:color-mix(in srgb,var(--molten) 55%,var(--iron))}
.cf-blastpic i.core{background:var(--molten-hi);box-shadow:0 0 6px var(--molten)}
.cf-tiers{border-collapse:collapse;margin:4px 0 6px;font-size:15px}
.cf-tiers th{color:var(--muted);font-weight:600;text-align:left;padding:4px 14px 4px 0;border-bottom:1px solid var(--line)}
.cf-tiers td{padding:4px 14px 4px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent)}
.cf-tiers td:first-child{font-family:var(--display);color:var(--molten-hi)}

/* ---- the implosion (free-spin transition): a void that closes over the screen, starlight streaks that collapse into
   one point over the grid, one soft burst (its size is set by skin.js: at most a quarter of the viewport) and a thin
   shock ring. --cx / --cy = the grid's middle. */
.cf-warp{position:fixed;inset:0;z-index:36;pointer-events:none;display:none}
.cf-warp.show{display:block}
.cf-warp>i{position:absolute;display:block}
.cf-warp .veil{inset:0;opacity:0;background:radial-gradient(circle at var(--cx,50%) var(--cy,50%),color-mix(in srgb,var(--void) 72%,var(--plasma)) 0,var(--void) 34%,#000 100%)}
.cf-warp .streaks{left:var(--cx,50%);top:var(--cy,50%);width:190vmax;height:190vmax;border-radius:50%;opacity:0;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(255,238,214,.5) 0 .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 0 5%,#000 18%,transparent 58%);mask:radial-gradient(circle,transparent 0 5%,#000 18%,transparent 58%)}
.cf-warp .point{left:var(--cx,50%);top:var(--cy,50%);width:22vmin;height:22vmin;border-radius:50%;opacity:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,#FFFDF4 0 12%,color-mix(in srgb,var(--molten-hi) 80%,transparent) 30%,transparent 70%)}
.cf-warp .glow{left:var(--cx,50%);top:var(--cy,50%);width:40vmin;height:40vmin;border-radius:50%;opacity:0;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,250,236,.95) 0,color-mix(in srgb,var(--molten-hi) 70%,transparent) 28%,color-mix(in srgb,var(--plasma) 32%,transparent) 52%,transparent 70%)}
.cf-warp .ring{left:var(--cx,50%);top:var(--cy,50%);width:110vmin;height:110vmin;border-radius:50%;opacity:0;transform:translate(-50%,-50%);
  border:2px solid var(--molten-hi);box-shadow:0 0 16px color-mix(in srgb,var(--molten) 55%,transparent),inset 0 0 16px color-mix(in srgb,var(--plasma) 40%,transparent)}
/* big wins: orbital rings sweep round the amount and fade */
.cf-orbits{position:fixed;inset:0;z-index:31;pointer-events:none;overflow:hidden}
.cf-ring{position:absolute;left:50%;top:46%;width:min(88vw,780px);height:min(24vw,210px);border-radius:50%;opacity:0;
  border:2px solid color-mix(in srgb,var(--plasma-hi) 85%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--plasma) 50%,transparent),inset 0 0 14px color-mix(in srgb,var(--molten) 30%,transparent);
  transform:translate(-50%,-50%) rotate(var(--tilt,0deg)) scale(.4);animation:cf-orbit 2.4s cubic-bezier(.2,.7,.3,1) var(--d,0ms) forwards}
.cf-ring.r1{border-color:color-mix(in srgb,var(--molten-hi) 80%,transparent)}
@keyframes cf-orbit{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--tilt,0deg)) scale(.4)}20%{opacity:1}75%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--tilt,0deg) + 14deg)) scale(1.08)}}

/* ---- reduced motion: no turning orbit, twinkle or kick, still shock rings, no rings or streaks (skin.js plays none) */
body.still .spin.busy .orbit,body.still .spin.busy .sparks circle,body.still .spin.kick svg,body.still.fs .scene .nova .shock,body.still .cf-dial.go .cf-arc{animation:none}
body.still .scene .nova .shock{opacity:.5;transform:none}
body.still .scene .nova .shock.s2,body.still .scene .nova .shock.s3{display:none}
body.still .cf-orbits,body.still .cf-warp .streaks,body.still .cf-warp .point,body.still .cf-warp .glow,body.still .cf-warp .ring{display:none}
body.still .cells-board .cell.pop .face{transform:none}
@media (prefers-reduced-motion:reduce){
  .spin.busy .orbit,.spin.busy .sparks circle,.spin.kick svg,.scene .nova .shock,.cf-dial.go .cf-arc{animation:none!important}
  .scene .nova .shock{opacity:.5;transform:none}
  .scene .nova .shock.s2,.scene .nova .shock.s3{display:none}
  .cf-orbits,.cf-warp .streaks,.cf-warp .point,.cf-warp .glow,.cf-warp .ring{display:none}
  .cells-board .cell.recode .face{animation:cs-fade .12s linear}
  .cells-board .cell.pop .face{transform:none}
}

/* ---- phones: the rim inside 7 px a side so seven cells of ≈ 46 px fit in 344 px; a lower console arc; a compact bar */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:7px 7px 3px;gap:4px}
  .cells-board::before{inset:-5px}
  .cells-board::after{bottom:-3px;height:1.5px}
  /* the plate is the board's width and one line, so a long summary never widens or lifts the frame: the extra tags
     (cascades, Supernova, Shift) shrink to an ellipsis first; "maximum win reached" and the amount always show */
  .frame .message{width:calc(var(--cell)*7);max-width:100%;box-sizing:border-box;min-height:28px;padding:2px 10px;font-size:14px;flex-wrap:nowrap;white-space:nowrap}
  .frame .message>*{flex:none}
  .frame .message>.how{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .frame .message>.how:has(+ .cap){display:none} /* a capped round says so in full, without the extra tags */
  .frame .message::before{width:12px}
  .hud{border-radius:20px 20px 12px 12px}
  body.fs .fsbar{width:min(100%,calc(var(--cell)*7 + 12px))}
  body.fs .boardarea{gap:3px}
  .cradle .orbit{width:112%}.cradle .orbit.o2{width:106%}
}
/* portrait: the key-light star sits clear in the empty sky between the header and the board (on a 390 × 844 phone its
   centre is ≈ 97 px down, the board starts at ≈ 149 px), smaller, with its orbits; where the board starts right under
   the header (short phones) it simply stays behind the board */
@media (max-aspect-ratio:4/5){
  .scene .forge .sun,.scene .forge .orb{top:11.5%}
  .scene .forge .sun{width:18vmin;height:18vmin;margin:-9vmin 0 0 -9vmin}
  .scene .forge .orb{width:38vmin;height:8.6vmin;margin:-4.3vmin 0 0 -19vmin}
  .scene .forge .orb.o2{width:24vmin;height:6vmin;margin:-3vmin 0 0 -12vmin}
}
@media (max-width:400px){
  .logo h1{font-size:clamp(15px,4.6vw,19px);letter-spacing:.04em} /* the shell fits it between the button groups */
  .fsbar{gap:6px;padding:1px 8px;font-size:13px}
  .fsbar .fsr{line-height:1}
  .cf-arc{width:36px;height:22px}
  .cf-arc b{font-size:12px}
  .cf-dt small{font-size:11px}
  .frame .message>.how{display:none}
  .cf-dial{gap:4px}
  .cf-odds{font-size:11px}
  .meter span{font-size:12px}
}