/* Throne of Rime skin on the shared game shell: translucent carved ice under one light — moonlight from a high window in
   the upper left of the hall (lit faces, bevels and edges on that side everywhere; the violet aurora rim on the other).
   An ice hall of faceted pillars under a rib vault with an empty throne far away (or frozen peaks under a slow aurora), the frosted grid in a thin ice rim with a crown arc
   over it and a burst of ice shards from its lower left corner, faceted ice plates for the balance and the win, a faceted
   rhombus spin button with a frost bloom, the Whiteout counter at the crown's apex, a pale whiteout with a frozen sun in
   the free spins and the edge-creep frost between them. Theme tokens (--frost, --night, --violet, --ink, --muted,
   --gloss, --plate*, --ice*, --sky*, --veil*, --haze, --sun, --snow, --vig, --sp-*) come from skin.js themeMap: dark
   presets get light ink on dark plates, the light preset (Rime Silver) dark ink on light plates (≥ 4.5:1 either way).
   The accent (--violet) is decoration only, never text. Animated properties: transform and opacity only. */
:root{
  --frost:#BDEEFF; --night:#0A1E33; --violet:#7E3FF3; --navy:#0B2440;
  --ink:#F2F9FF; --muted:#BFD3E4; --gloss:#D1F3FF; --plate:#071526; --plate-edge:#5A7C96;
  --ice:#1E3A52; --ice-lo:#08172A; --ice-deep:#06111C;
  --sky-top:#06111C; --sky-low:#1C3449; --far:#284560; --near:#08182A;
  --veil:#436178; --veil-line:#D7F5FF; --haze:#3E5F77; --sun:#D7F5FF; --snow:rgba(255,255,255,.7); --vig:rgba(0,0,0,.38);
  --sp-hi:#E5F8FF; --sp:#BDEEFF; --sp-mid:#89ABC2; --sp-lo:#5A7C96; --sp-edge:#071526; --sp-rim:#FFFFFF; --sp-ink:#071526;
  --display:"Julius Sans One","Jost",system-ui,sans-serif; --ui:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:6px; --radius-sm:4px; --line:color-mix(in srgb,var(--plate-edge) 75%,transparent); --panel-border:var(--plate-edge);
  --hud-bg:radial-gradient(60% 40% at 50% 0,color-mix(in srgb,var(--frost) 16%,transparent),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--plate) 88%,var(--frost)),var(--plate));
  --ibtn-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate) 78%,var(--frost)),var(--plate)); --ibtn-ink:var(--gloss);
  --corner-bg:linear-gradient(160deg,color-mix(in srgb,var(--plate) 82%,var(--frost)) 0 18%,color-mix(in srgb,var(--plate) 94%,transparent) 18%);
  /* the cells board: a matte ice tile per cell over the frosted window */
  --window-bg:radial-gradient(circle at 28% 20%,color-mix(in srgb,#FFFFFF 6%,transparent),transparent 60%) 0 0/var(--cell) var(--cell),
    linear-gradient(180deg,color-mix(in srgb,var(--frost) 16%,transparent) 1px,transparent 1px) 0 0/var(--cell) var(--cell),
    linear-gradient(90deg,color-mix(in srgb,var(--frost) 10%,transparent) 1px,transparent 1px) 0 0/var(--cell) var(--cell),
    linear-gradient(180deg,var(--ice),var(--ice-lo));
  --window-radius:4px; --reel-sep:rgba(0,0,0,.3); --sym-size:92%; --cluster-radius:12%;
  --spin-ring:transparent; /* the rhombus has its own busy sign: the star turns */
  --win-ring:var(--gloss); --win-glow:color-mix(in srgb,var(--frost) 70%,transparent); --hot-ring:var(--violet); --land-ring:var(--frost);
  --tease-glow:color-mix(in srgb,var(--violet) 70%,var(--frost)); --fs-ring:color-mix(in srgb,var(--frost) 55%,transparent);
  --fall-ease:cubic-bezier(.55,.085,.68,.53);
  --badge-bg:rgba(6,22,40,.84); --badge-ink:#FFFFFF; --float-ink:#FFFFFF; --float-stroke:var(--navy);
  /* the frozen-wild presenter: dark strips with white digits on every preset */
  --frz-strip:rgba(6,22,40,.84); --frz-ink:#FFFFFF; --frz-pip:#EAF8FF; --frz-pip-edge:#BDEBFF; --frz-pip-off:transparent;
  --frz-carry:color-mix(in srgb,var(--violet) 40%,#FFFFFF); --frz-hatch:rgba(11,36,64,.5); --frz-frost:color-mix(in srgb,var(--frost) 85%,#FFFFFF);
  --frz-bloom:color-mix(in srgb,var(--frost) 60%,transparent); --frz-crack:var(--navy); --frz-meter-ink:#FFFFFF; --frz-meter-bg:rgba(6,22,40,.84);
  --frz-face-bg:var(--window-bg); /* a resumed carry: the wild on its own ice tile */
  --focus:var(--gloss);
  color-scheme:var(--scheme,dark);
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: the ice hall (default), the frozen peaks, the whiteout of the free spins; silhouettes are masks from
   skin.js. Only the snow, the aurora and the breath fog move (slowly), and the layers fade. */
.scene{background:var(--sky-top)}
.scene .hall,.scene .peaks{transition:opacity .8s}
.scene .hall{background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 62%,var(--far) 100%)}
.scene .hall>i,.scene .peaks>i.far,.scene .peaks>i.near,.scene .fringe{position:absolute;inset:0;-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}
/* far: the window (the light source), the vault ribs and the throne in the haze — low contrast, close to the sky */
.scene .hall .window{background:linear-gradient(180deg,color-mix(in srgb,var(--sun) 60%,var(--far)),color-mix(in srgb,var(--frost) 22%,var(--far)) 70%,var(--far));opacity:.5;-webkit-mask-image:var(--tr-window);mask-image:var(--tr-window)}
.scene .hall .ribs{background:color-mix(in srgb,var(--frost) 14%,transparent);-webkit-mask-image:var(--tr-ribs);mask-image:var(--tr-ribs)}
.scene .hall .throne{opacity:.38;background:linear-gradient(90deg,color-mix(in srgb,var(--far) 55%,var(--frost)),color-mix(in srgb,var(--far) 80%,var(--frost)));-webkit-mask-image:var(--tr-throne);mask-image:var(--tr-throne)}
.scene .hall .shaft{background:var(--sun);opacity:.1;-webkit-mask-image:var(--tr-shaft);mask-image:var(--tr-shaft)}
/* mid: faceted pillars, lighter toward the vault; the face toward the window lit, the other in shade */
.scene .hall .pillars{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 70%,var(--near)) 0,var(--near) 65%);-webkit-mask-image:var(--tr-pillars);mask-image:var(--tr-pillars)}
.scene .hall .pl{background:linear-gradient(180deg,color-mix(in srgb,var(--frost) 30%,var(--far)) 10%,color-mix(in srgb,var(--frost) 12%,var(--near)) 80%);-webkit-mask-image:var(--tr-pillar-lit);mask-image:var(--tr-pillar-lit)}
.scene .hall .ps{background:color-mix(in srgb,var(--near) 60%,#000);opacity:.6;-webkit-mask-image:var(--tr-pillar-shade);mask-image:var(--tr-pillar-shade)}
/* the polished floor: the shaft's pool of light and a faint sheen, no lines behind the frame */
.scene .hall .floor{top:70%;background:radial-gradient(38% 60% at 38% 22%,color-mix(in srgb,var(--sun) 11%,transparent),transparent 70%),linear-gradient(180deg,transparent,color-mix(in srgb,var(--frost) 8%,transparent) 14%,transparent 70%)}
/* the light behind the grid, a little toward the window; the near fringe of icicles at the top corners (darkest) */
.scene .glow{background:radial-gradient(40% 44% at 47% 44%,color-mix(in srgb,var(--frost) 15%,transparent),transparent 72%)}
.scene .fringe{opacity:.85;background:linear-gradient(180deg,color-mix(in srgb,var(--near) 60%,#000),color-mix(in srgb,var(--near) 85%,var(--far)));-webkit-mask-image:var(--tr-fringe);mask-image:var(--tr-fringe);-webkit-mask-position:center top;mask-position:center top}
.scene .grain{background:var(--tr-grain) 0 0/160px 160px;opacity:.06;mix-blend-mode:overlay}
.scene .peaks{opacity:0;background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 75%)}
.scene .peaks .aurora{position:absolute;left:-10%;right:-10%;top:4%;height:46%;opacity:.55;will-change:transform,opacity;
  background:linear-gradient(100deg,transparent 12%,color-mix(in srgb,var(--violet) 30%,transparent) 30%,color-mix(in srgb,var(--frost) 26%,transparent) 48%,transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%,#000 60%,transparent);mask-image:linear-gradient(180deg,transparent,#000 35%,#000 60%,transparent);animation:tr-aurora 16s ease-in-out infinite alternate}
.scene .peaks .aurora.a2{top:12%;height:34%;opacity:.4;transform:scaleX(-1);animation-duration:22s;animation-direction:alternate-reverse}
.scene .peaks .far{background:linear-gradient(180deg,color-mix(in srgb,var(--far) 70%,var(--frost)),var(--far) 45%);-webkit-mask-image:var(--tr-peaks-far);mask-image:var(--tr-peaks-far)}
.scene .peaks .near{background:linear-gradient(180deg,color-mix(in srgb,var(--near) 75%,var(--frost)),var(--near) 30%);-webkit-mask-image:var(--tr-peaks-near);mask-image:var(--tr-peaks-near)}
body.bg-aurora-peaks .scene .peaks{opacity:1}
body.bg-aurora-peaks .scene .hall{opacity:0}
/* the whiteout of the free spins: a mid-tone haze (never white) rising from below and a pale frozen sun; it fades in
   over 1.2 s, so the screen's brightness changes slowly. The edge-creep (skin.js) starts it with the frost (tr-white)
   and starts its fade-out with the thaw (tr-thaw), so it has settled before the frost opens */
.scene .whiteout{opacity:0;transition:opacity 1.2s ease}
body.fs:not(.tr-thaw) .scene .whiteout,body.tr-white .scene .whiteout{opacity:1}
.scene .whiteout .mist{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 16%,color-mix(in srgb,var(--haze) 70%,transparent) 42%,var(--haze) 72%,color-mix(in srgb,var(--haze) 88%,var(--sky-top)) 100%)}
.scene .whiteout .sun{position:absolute;left:50%;top:30%;width:38vmin;height:38vmin;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--sun) 38%,transparent) 0 28%,color-mix(in srgb,var(--sun) 14%,transparent) 52%,transparent 70%);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--sun) 22%,transparent)}
.scene .snow>i{position:absolute;left:0;right:0;top:-240px;bottom:0;will-change:transform;
  background:radial-gradient(circle at 12% 18%,var(--snow) 0 1.3px,transparent 2px),radial-gradient(circle at 47% 64%,var(--snow) 0 1px,transparent 1.7px),radial-gradient(circle at 78% 33%,var(--snow) 0 1.5px,transparent 2.2px),radial-gradient(circle at 63% 88%,var(--snow) 0 1px,transparent 1.6px);
  background-size:240px 240px;opacity:.55;animation:tr-snow 26s linear infinite}
.scene .snow>i.s2{top:-180px;background-size:180px 180px;opacity:.35;animation-duration:34s}
.scene .vignette{background:radial-gradient(ellipse at 50% 46%,transparent 45%,var(--vig) 100%)}
/* the shell's governed screen flash (retriggers, big-win tiers): a faint frost tint, never white (peaks ≈ 15 %) */
.flash{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--frost) 20%,transparent),color-mix(in srgb,var(--violet) 8%,transparent) 45%,transparent 75%)}
@keyframes tr-aurora{from{transform:translateX(-3%);opacity:.4}to{transform:translateX(3%);opacity:.62}}
@keyframes tr-snow{to{transform:translateY(240px)}}

/* ---- title and round buttons */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.14em;color:var(--primary);text-shadow:0 1px 1px color-mix(in srgb,var(--night) 70%,transparent),0 0 18px color-mix(in srgb,var(--frost) 26%,transparent)}
.ibtn{border:1px solid var(--plate-edge);border-radius:6px;box-shadow:inset 1px 1px 0 color-mix(in srgb,#FFFFFF 14%,transparent),0 2px 6px rgba(0,0,0,.35)}
.ibtn:hover{border-color:var(--gloss)}

/* ---- the frame: a thin ice rim round the grid, the crown arc over it and the shard burst from its lower left corner
   (variant "shards"); "clean" keeps the rim and the crown. The decoration (.rime) lies exactly over the grid (its size
   from skin.js onConfig), behind it; padding in px and cells: the board measures its area for its --cell. */
.frame{--fpt:calc(var(--cell)*.32 + 10px);padding:var(--fpt) 16px 10px;gap:18px}
.rime{position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--tr-cols,6));height:calc(var(--cell)*var(--tr-rows,5));transform:translateX(-50%);pointer-events:none}
.rime .rim{position:absolute;inset:-12px;border-radius:12px;
  background:linear-gradient(135deg,color-mix(in srgb,#FFFFFF 34%,transparent),transparent 26%,transparent 72%,color-mix(in srgb,var(--violet) 16%,transparent)),
    linear-gradient(180deg,color-mix(in srgb,var(--frost) 40%,var(--night)),color-mix(in srgb,var(--frost) 18%,var(--night)) 55%,color-mix(in srgb,var(--frost) 28%,var(--night)));
  box-shadow:inset 1.5px 1.5px 0 color-mix(in srgb,#FFFFFF 55%,transparent),inset -1.5px -1.5px 0 rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--plate-edge) 70%,transparent),0 24px 48px rgba(0,0,0,.5)}
.rime .rim::after{content:"";position:absolute;inset:11px;border-radius:5px;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 1.5px 0 1px color-mix(in srgb,#FFFFFF 22%,transparent)}
.rime .crown{position:absolute;left:-3%;width:106%;bottom:calc(100% + 6px);height:calc(var(--cell)*.3);overflow:visible}
.rime .crown .arc{fill:color-mix(in srgb,var(--frost) 24%,transparent);stroke:color-mix(in srgb,var(--frost) 50%,transparent);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.rime .crown .facet{fill:color-mix(in srgb,#FFFFFF 35%,transparent)}
.rime .crown .facet.lo{fill:color-mix(in srgb,var(--frost) 30%,transparent)}
.rime .burst{position:absolute;width:calc(var(--cell)*2.4);height:calc(var(--cell)*2.4);left:calc(var(--cell)*-0.567);top:calc(100% - var(--cell)*1.833);overflow:visible}
/* each shard in two halves: toward the light (.hl) and away from it (.hs); tints a/b/c; no outline, a lit ridge */
.rime .burst .hl{fill:color-mix(in srgb,var(--frost) 70%,#FFFFFF)}
.rime .burst .hs{fill:color-mix(in srgb,var(--frost) 42%,var(--night))}
.rime .burst .b.hl{fill:color-mix(in srgb,var(--frost) 55%,transparent)}.rime .burst .b.hs{fill:color-mix(in srgb,var(--frost) 26%,transparent)}
.rime .burst .c.hl{fill:color-mix(in srgb,var(--violet) 22%,var(--frost))}.rime .burst .c.hs{fill:color-mix(in srgb,var(--violet) 38%,var(--night))}
.rime .burst .cut{fill:none;stroke:#FFFFFF;stroke-width:.9;stroke-opacity:.7}
.board,.message{position:relative;z-index:1}
body[data-variant="clean"] .rime .burst{display:none}
body[data-variant="clean"] .rime .rim{inset:-5px;background:none;box-shadow:inset 1px 1px 0 color-mix(in srgb,#FFFFFF 50%,transparent),inset 0 0 0 1.5px color-mix(in srgb,var(--frost) 45%,transparent),0 0 0 1px var(--plate-edge),0 18px 40px rgba(0,0,0,.45)}
body[data-variant="clean"] .rime .rim::after{display:none}

/* ---- the grid: recessed under the frame (a static shadow into the top of the niche, a pale lip at its foot), and a
   breath of fog in two corners over the cells (static paint, its opacity breathes slowly) ---- */
.cells-board::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--window-radius);
  box-shadow:inset 0 18px 16px -12px rgba(0,0,0,.55),inset 14px 0 14px -14px rgba(0,0,0,.35),inset 0 -1px 0 color-mix(in srgb,var(--frost) 30%,transparent)}
.cells-board::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--window-radius);opacity:.5;will-change:opacity;
  background:radial-gradient(120% 55% at 0 100%,color-mix(in srgb,var(--frost) 22%,transparent),transparent 62%),radial-gradient(90% 45% at 100% 0,color-mix(in srgb,var(--frost) 15%,transparent),transparent 60%);
  animation:tr-breath 7s ease-in-out infinite alternate}
@keyframes tr-breath{from{opacity:.32}to{opacity:.6}}
.message{font-family:var(--ui);font-weight:500;font-size:15px;color:var(--ink);max-width:100%;padding:2px 10px;background:none;text-shadow:0 1px 3px color-mix(in srgb,var(--night) 85%,transparent);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em}
.message b{color:var(--gloss)}
.message .tag{color:var(--muted)}

/* ---- the Whiteout bar: the crown's apex (a faceted plate pointing down at the crown): the spin, the ice held of the limit
   (pips), the total won */
.fsbar{position:relative;gap:16px;padding:5px 16px;border-radius:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--plate) 82%,var(--frost)),var(--plate));border:1.5px solid var(--plate-edge);
  color:var(--ink);font-family:var(--ui);font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.fsbar::before{content:"";position:absolute;left:50%;bottom:-8px;width:13px;height:13px;transform:translateX(-50%) rotate(45deg);background:var(--plate);border-right:1.5px solid var(--plate-edge);border-bottom:1.5px solid var(--plate-edge)}
.fsbar b{color:var(--gloss)}
.fsbar .fs-ice{display:flex;align-items:center;gap:6px}
.fsbar .fs-ice small{font-size:13px;font-weight:600;color:var(--muted)}
.fsbar .pips{display:flex;gap:3px}
.fsbar .pip{display:block;width:8px;height:8px;transform:rotate(45deg);border:1.5px solid var(--gloss);opacity:.6}
.fsbar .pip.on{background:var(--gloss);opacity:1}
.fsbar .fs-ice.full b{text-decoration:underline;text-underline-offset:3px}

/* ---- HUD "corners" (wide screens): balance and win as faceted ice plates high on either side, the bet plate low on
   the left; phones keep the shell's two-row bar, frosted with a crown edge */
.hud{border:1px solid var(--plate-edge);box-shadow:inset 1px 1px 0 color-mix(in srgb,#FFFFFF 10%,transparent),0 6px 18px rgba(0,0,0,.35);border-radius:6px}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-corners .hud>.bal,.hud-corners .hud>.win,.hud-corners .betctl{border:1px solid var(--plate-edge);border-radius:0;box-shadow:inset 1px 1px 0 color-mix(in srgb,#FFFFFF 14%,transparent),0 6px 16px rgba(0,0,0,.35);
    clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px)}
  .hud-corners .hud>.bal,.hud-corners .hud>.win{padding:10px 20px 9px}
}
.meter span{font-family:var(--ui);font-weight:600;color:var(--muted)}
.meter b{font-family:var(--ui);font-weight:600;color:var(--ink)}.meter.win b{color:var(--gloss)}
.meter small{color:var(--muted)}
.demo{background:var(--gloss);color:var(--plate)}
.pm,.auto{background:var(--ibtn-bg);border:1px solid var(--plate-edge);color:var(--gloss);box-shadow:inset 1px 1px 0 color-mix(in srgb,#FFFFFF 12%,transparent)}
.pm{border-radius:4px}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gloss)}
.auto span{background:var(--gloss);color:var(--plate)}
/* the faceted rhombus: drawn by the SVG (skin.js), which fills the button; the busy star turns, a press blooms (180 ms) */
.spin{width:calc(var(--s)*1.04);height:calc(var(--s)*1.04);border-radius:24%;background:none;box-shadow:none;color:var(--sp-ink);filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.spin svg{width:100%;height:100%}
.spin .rh-star{transform-box:view-box;transform-origin:50% 50%}
.spin.busy .rh-star{animation:tr-turn 2.4s linear infinite}
.spin::after{content:"";position:absolute;inset:-8%;border-radius:50%;opacity:0;pointer-events:none;background:radial-gradient(circle,color-mix(in srgb,var(--frost) 55%,transparent) 0 30%,transparent 68%)}
.spin.kick::after{animation:tr-bloom .18s ease-out}
.spin:disabled{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)) brightness(.7) saturate(.6)}
@keyframes tr-turn{to{transform:rotate(360deg)}}
@keyframes tr-bloom{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.25)}}
.side .tablet{background:linear-gradient(180deg,color-mix(in srgb,var(--plate) 86%,var(--frost)),var(--plate));border:1px solid var(--plate-edge);border-radius:4px;color:var(--ink);box-shadow:inset 1px 1px 0 color-mix(in srgb,#FFFFFF 12%,transparent),0 6px 14px rgba(0,0,0,.3)}
.tablet .th{font-family:var(--display);font-weight:400;letter-spacing:.06em;color:var(--gloss)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays */
.panel{color:var(--ink)}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.06em}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.06em;border-radius:4px}
.ptc{background:color-mix(in srgb,var(--plate) 55%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:6px;background:linear-gradient(180deg,var(--ice),var(--ice-lo));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--frost) 30%,transparent)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.special p{margin:0 0 6px}
.tr-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--muted)}
.tr-legend>span{display:flex;align-items:center;gap:8px}
.tr-legend .pp{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;background:var(--frz-strip)}
.tr-legend .pp i{display:block;width:9px;height:9px;border:1.5px solid var(--frz-pip-edge);background:var(--frz-pip)}
.tr-legend .pp i.d{transform:rotate(45deg)}
.tr-legend .pp i.o{border-radius:50%;width:8px;height:8px;background:var(--frz-carry);border-color:var(--frz-carry)}
.ovcard h2{color:var(--primary);text-shadow:0 0 18px color-mix(in srgb,var(--frost) 35%,transparent)}
.overlay.bigwin.t2 h2{text-shadow:0 0 22px color-mix(in srgb,var(--violet) 45%,transparent)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}

/* ---- the edge-creep veil: five rings of frost per half fade in from the screen edges inward (each a radial mask with
   a hole that shrinks), fronds grow on the outermost ring, a crack line runs down the middle and the halves break
   apart. Mid-tone frost (never white); transform and opacity only. */
.rimeveil{position:fixed;inset:0;z-index:36;pointer-events:none;display:none}
.rimeveil.show{display:block}
.rimeveil .half{position:absolute;inset:0;will-change:transform,opacity}
.rimeveil .half.l{clip-path:polygon(0 0,52% 0,47% 14%,54% 30%,48% 46%,53% 62%,46% 80%,51% 100%,0 100%)}
.rimeveil .half.r{clip-path:polygon(52% 0,100% 0,100% 100%,51% 100%,46% 80%,53% 62%,48% 46%,54% 30%,47% 14%)}
.rimeveil .ring{position:absolute;inset:0;opacity:0;
  background:repeating-linear-gradient(62deg,color-mix(in srgb,#FFFFFF 6%,transparent) 0 2px,transparent 2px 11px),radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--veil) 86%,#FFFFFF),var(--veil) 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,transparent calc(var(--r) - 10%),#000 var(--r));mask-image:radial-gradient(ellipse at 50% 50%,transparent calc(var(--r) - 10%),#000 var(--r))}
.rimeveil .ring[data-k="0"]::after{content:"";position:absolute;inset:0;background:var(--veil-line);opacity:.4;-webkit-mask:var(--tr-fronds) 0 0/100% 100% no-repeat;mask:var(--tr-fronds) 0 0/100% 100% no-repeat}
.rimeveil.calm .ring{opacity:1}
.rimeveil .crack{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.rimeveil .crack path{fill:none;stroke:var(--veil-line);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}

/* ---- big wins: ice shards and snowflakes fall (shapes that fade, never a light) */
.rime-fall{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.rime-fall>i{position:absolute;left:var(--x);top:-8vh;opacity:0;will-change:transform,opacity;animation:tr-fall 3s cubic-bezier(.45,.05,.6,1) var(--d) forwards}
.rime-fall .shard{width:calc(15px*var(--s));height:calc(30px*var(--s));background:linear-gradient(160deg,#FFFFFF,color-mix(in srgb,var(--frost) 70%,#7FB4FF));clip-path:polygon(50% 0,100% 32%,62% 100%,18% 68%)}
.rime-fall .flake{width:calc(20px*var(--s));height:calc(20px*var(--s));background:#FFFFFF;-webkit-mask:var(--tr-flake) center/contain no-repeat;mask:var(--tr-flake) center/contain no-repeat}
@keyframes tr-fall{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}12%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),104vh) rotate(calc(var(--r) + 200deg))}}

/* ---- reduced motion: no snowfall, no aurora drift, no breathing fog, no turning star or bloom, no falling shards;
   shell.css caps every other animation */
body.still .scene .snow>i,body.still .scene .peaks .aurora,body.still .cells-board::after,body.still .spin.busy .rh-star,body.still .spin.kick::after{animation:none}
body.still .rime-fall{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .snow>i,.scene .peaks .aurora,.cells-board::after,.spin.busy .rh-star,.spin.kick::after{animation:none!important}
  .rime-fall{display:none}
  .scene .whiteout{transition-duration:.12s}
}

/* ---- phones: a lower crown, thin side padding and a smaller burst, so six columns of ≈ 53 px fit in 344 px */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:calc(var(--cell)*.26 + 8px);padding:var(--fpt) 8px 6px;gap:12px}
  .rime .rim{inset:-7px;border-radius:9px}
  .rime .rim::after{inset:6px;border-radius:4px}
  .rime .burst{width:calc(var(--cell)*1.7);height:calc(var(--cell)*1.7);left:calc(var(--cell)*-0.402);top:calc(100% - var(--cell)*1.298)}
  .rime .crown{height:calc(var(--cell)*.24);bottom:calc(100% + 4px)}
  .hud{background:var(--hud-bg)}
  /* the title fits its slot between the round buttons on phones (≈ 159 of 164 px at 360, 182 of 192 at 412) */
  .logo h1{letter-spacing:.06em;font-size:clamp(15px,4.8vw,30px)}
}
@media (max-width:400px){
  .fsbar{gap:8px;padding:4px 9px;font-size:13px}
  .fsbar .pips{display:none}
  .message{font-size:14px;padding:2px 10px}
}