/* Basalt Tides skin on the shared game shell: a North Atlantic causeway painted in watercolour. One key light — the
   bright overcast low in the sky to the upper left (in the Spring Tide, the full moon in the same place) — lights the
   symbols, the column tops, the frame, the spin button and the scene. The scene is four planes: a slate sky with long
   stratus, a far headland on the horizon, the sea with a path of light under the key light, and near basalt columns
   stepping down on both sides (or sea stacks); a vignette and one static grain layer finish it. The board is set into
   the top of the causeway: wet column tops with a bevel (hex.css), on a stepped platform whose front shows the columns'
   faces going down into foam. HUD "board-pods": the shell's base layout ("bar") with the balance, bet and win as
   hexagonal capsules; the respin counter is the fourth pod, on the board. Theme tokens (--cream, --slate, --coral and
   the basalt / sea / foam shades) come from skin.js themeMap. Every text is cream (or ink on cream) on a dark basalt or
   panel ground (≥ 4.5:1 in all three presets); the coral accent is decoration only. No flashes; only transform and
   opacity move. */
:root{
  --cream:#F4F1EA; --cream-lo:#B4B6B3; --slate:#55666F; --coral:#F08A4B;
  --basalt:#39474F; --basalt-hi:#6F7E86; --basalt-lo:#28343B; --deep:#2F3C44; --panel:#2C383F; --sea:#3D6B73; --sea-hi:#6E949A;
  --foam:#F8F7F2; --sky:#7D8D94; --moon:#FAF4E1; --paper:#F4F1EA; --inkd:#1D2930;
  --ink:var(--cream); --muted:#D2D8D9;
  --display:"Gloock","Iowan Old Style","Palatino Linotype",Georgia,serif; --ui:"Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:10px; --radius-sm:7px; --line:color-mix(in srgb,var(--cream) 34%,transparent);
  --panel-bg:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--sea)),var(--panel) 70%); --panel-border:var(--line);
  --hud-bg:none;
  --ibtn-bg:linear-gradient(180deg,color-mix(in srgb,var(--basalt) 88%,var(--cream)),var(--basalt-lo)); --ibtn-ink:var(--cream);
  --btn-bg:linear-gradient(180deg,var(--foam),var(--cream) 60%,#D9D4C6); --btn-ink:var(--inkd);
  --hz:62%; /* the horizon */
  /* a lace of foam (repeat-x) where the causeway meets the sea */
  --bt-lace:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6C10 2 16 9 28 5S46 2 58 7 78 9 90 4 110 3 120 6' fill='none' stroke='%23F8F7F2' stroke-width='1.6' stroke-opacity='.8'/%3E%3Cpath d='M0 9C14 7 22 11 36 9S58 7 70 10 96 11 120 9' fill='none' stroke='%23F8F7F2' stroke-width='1' stroke-opacity='.45'/%3E%3Cg fill='none' stroke='%23F8F7F2' stroke-opacity='.6' stroke-width='.8'%3E%3Ccircle cx='18' cy='4' r='1.4'/%3E%3Ccircle cx='51' cy='9' r='1.1'/%3E%3Ccircle cx='83' cy='3' r='1.3'/%3E%3Ccircle cx='104' cy='9' r='.9'/%3E%3C/g%3E%3C/svg%3E");
  /* basalt's small gas holes (vesicles): a static texture on the column tops and the platform */
  --bt-ves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%23000' fill-opacity='.12'%3E%3Ccircle cx='5' cy='7' r='.9'/%3E%3Ccircle cx='22' cy='4' r='.6'/%3E%3Ccircle cx='15' cy='19' r='1.1'/%3E%3Ccircle cx='30' cy='26' r='.7'/%3E%3Ccircle cx='8' cy='30' r='.6'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Ccircle cx='27' cy='12' r='.8'/%3E%3Ccircle cx='12' cy='26' r='.6'/%3E%3C/g%3E%3C/svg%3E");
  /* the board: wet basalt column tops — the sky's sheen on the upper left, darker to the lower right — on a bevelled
     rim (skin rule below); wins ring in cream with a sea-glass glow */
  --hex-top:radial-gradient(90% 70% at 30% 14%,rgba(222,232,234,.11),rgba(222,232,234,0) 62%),var(--bt-ves),linear-gradient(168deg,color-mix(in srgb,var(--basalt-hi) 50%,var(--basalt)),var(--basalt) 52%,var(--basalt-lo));
  --hex-rim:color-mix(in srgb,var(--basalt-lo) 70%,#000);
  --win-ring:var(--cream); --win-glow:rgba(191,227,208,.5); --hot-ring:var(--cream); --land-ring:var(--moon); --fs-ring:color-mix(in srgb,var(--moon) 45%,var(--basalt-lo));
  --void-ink:rgba(244,241,234,.85); --wave-foam:rgba(248,247,242,.1); --rise-ease:cubic-bezier(.3,.7,.35,1);
  --badge-bg:rgba(20,28,32,.85); --badge-ink:var(--cream); --float-ink:var(--cream); --float-stroke:var(--inkd);
  --lk-frame:color-mix(in srgb,var(--cream) 62%,transparent); --lk-outline:var(--cream); --lk-pod-bg:rgba(24,32,37,.88); --lk-pod-ink:var(--cream); --lk-pod-edge:color-mix(in srgb,var(--cream) 55%,transparent);
  --lk-slot:color-mix(in srgb,var(--cream) 60%,transparent);
  --sym-size:82%; --focus:var(--cream);
  /* shell tokens: no round busy ring round a hexagonal button (the wave runs instead); the light behind a win card's
     title is sea-glass, its amount sits on a slab of wet basalt */
  --spin-ring:transparent; --veil-light:color-mix(in srgb,var(--sea-hi) 34%,transparent);
  --ov-plate:linear-gradient(180deg,color-mix(in srgb,var(--basalt) 86%,var(--cream)),var(--basalt-lo)); --ov-plate-line:color-mix(in srgb,var(--cream) 30%,transparent);
  color-scheme:dark;
}
body{background:var(--slate)}

/* ---- scene: sky, far shore, sea, near columns (or sea stacks), vignette, grain. Silhouettes are masks from skin.js;
   only the swell moves (slowly, transform). The Spring Tide brings night and the full moon up where the key light is. */
.scene>div>i{position:absolute;inset:0;display:block}
.scene .sky{background:linear-gradient(180deg,color-mix(in srgb,var(--slate) 62%,var(--inkd)) 0%,var(--slate) calc(var(--hz)*.42),var(--sky) calc(var(--hz)*.88),color-mix(in srgb,var(--sky) 58%,var(--cream)) calc(var(--hz) - .5%),var(--sea) var(--hz),var(--deep) 100%)}
.scene .sky .lit{background:radial-gradient(70% 55% at 18% 8%,color-mix(in srgb,var(--cream) 22%,transparent),transparent 72%);transition:opacity .9s}
.scene .sky .clouds{bottom:calc(100% - var(--hz));background:var(--bt-clouds) center/100% 100% no-repeat;opacity:.36;transition:opacity .9s}
.scene .sky .moon{inset:auto;z-index:1;left:14%;top:10%;width:10vmin;height:10vmin;border-radius:50%;opacity:0;transition:opacity .9s;
  background:radial-gradient(28% 22% at 38% 40%,rgba(120,124,118,.28),transparent),radial-gradient(18% 16% at 64% 58%,rgba(120,124,118,.24),transparent),radial-gradient(14% 12% at 58% 30%,rgba(120,124,118,.2),transparent),
    radial-gradient(circle at 38% 34%,var(--moon),color-mix(in srgb,var(--moon) 82%,var(--sky)) 70%,color-mix(in srgb,var(--moon) 60%,var(--sky)));
  box-shadow:0 0 6vmin 1.4vmin rgba(250,244,225,.14),0 0 22vmin 6vmin rgba(250,244,225,.06)}
.scene .sky::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .9s;
  background:linear-gradient(180deg,color-mix(in srgb,var(--slate) 26%,var(--inkd)) 0%,color-mix(in srgb,var(--slate) 55%,var(--inkd)) calc(var(--hz)*.7),color-mix(in srgb,var(--sea-hi) 55%,var(--moon)) var(--hz),transparent var(--hz))}
.scene .far{top:auto;bottom:calc(100% - var(--hz));height:15vh;opacity:.9;
  background:linear-gradient(180deg,color-mix(in srgb,var(--sky) 52%,var(--slate)),color-mix(in srgb,var(--sky) 30%,var(--slate)));
  -webkit-mask:var(--bt-far) right bottom/auto 100% no-repeat;mask:var(--bt-far) right bottom/auto 100% no-repeat}
.scene .sea{top:var(--hz);bottom:-8vh;background:linear-gradient(180deg,color-mix(in srgb,var(--sea) 72%,var(--cream)),var(--sea) 12%,var(--deep) 100%);transition:transform .9s cubic-bezier(.4,0,.2,1)}
.scene .sea::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .9s;background:linear-gradient(180deg,color-mix(in srgb,var(--moon) 30%,transparent),rgba(10,16,22,.4) 30%,rgba(10,16,22,.5))}
.scene .sea .glint{inset:0 auto 0 8%;width:22%;background:radial-gradient(50% 75% at 50% 0,color-mix(in srgb,var(--cream) 20%,transparent),transparent);transition:opacity .9s}
.scene .sea .swell{inset:auto 0 auto -10%;width:120%;height:40px;background:color-mix(in srgb,var(--foam) 20%,transparent);
  -webkit-mask:var(--bt-swell) 0 0/400px 100% repeat-x;mask:var(--bt-swell) 0 0/400px 100% repeat-x;animation:bt-swell 18s ease-in-out infinite alternate}
.scene .sea .swell.s1{top:5%}.scene .sea .swell.s2{top:20%;opacity:.55;animation-duration:26s}
.scene .cw{top:auto;right:auto;width:min(40vw,560px);aspect-ratio:560/400;transition:opacity .8s}
.scene .cw.r{left:auto;right:0}
.scene .cw i{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.scene .cw .cf{background:linear-gradient(180deg,var(--basalt),var(--basalt-lo) 62%,var(--inkd))}
.scene .cw .lf{background:linear-gradient(180deg,color-mix(in srgb,var(--basalt-hi) 82%,var(--sky)),var(--basalt) 62%,var(--basalt-lo))}
.scene .cw .rf{background:linear-gradient(180deg,var(--basalt-lo),color-mix(in srgb,var(--inkd) 80%,#000))}
.scene .cw .cap{background:linear-gradient(160deg,color-mix(in srgb,var(--basalt-hi) 88%,var(--cream)),color-mix(in srgb,var(--basalt-hi) 60%,var(--basalt)))}
.scene .cw.l .cf{-webkit-mask-image:var(--bt-l-cf);mask-image:var(--bt-l-cf)}.scene .cw.l .lf{-webkit-mask-image:var(--bt-l-lf);mask-image:var(--bt-l-lf)}
.scene .cw.l .rf{-webkit-mask-image:var(--bt-l-rf);mask-image:var(--bt-l-rf)}.scene .cw.l .cap{-webkit-mask-image:var(--bt-l-cap);mask-image:var(--bt-l-cap)}
.scene .cw.r .cf{-webkit-mask-image:var(--bt-r-cf);mask-image:var(--bt-r-cf)}.scene .cw.r .lf{-webkit-mask-image:var(--bt-r-lf);mask-image:var(--bt-r-lf)}
.scene .cw.r .rf{-webkit-mask-image:var(--bt-r-rf);mask-image:var(--bt-r-rf)}.scene .cw.r .cap{-webkit-mask-image:var(--bt-r-cap);mask-image:var(--bt-r-cap)}
.scene .stacks{opacity:0;transition:opacity .8s;background:linear-gradient(180deg,var(--basalt),var(--basalt-lo) 70%,var(--inkd));
  -webkit-mask:var(--bt-stacks) center bottom/cover no-repeat;mask:var(--bt-stacks) center bottom/cover no-repeat}
.scene .stacks i{background:linear-gradient(180deg,color-mix(in srgb,var(--basalt-hi) 80%,var(--sky)),var(--basalt));-webkit-mask:var(--bt-stacks-lit) center bottom/cover no-repeat;mask:var(--bt-stacks-lit) center bottom/cover no-repeat}
body.bg-sea-stacks .scene .stacks{opacity:1}
body.bg-sea-stacks .scene .cw{opacity:0}
.scene .haze{background:radial-gradient(56% 46% at 50% 44%,color-mix(in srgb,var(--cream) 7%,transparent),transparent 72%),radial-gradient(ellipse at 50% 46%,transparent 46%,rgba(10,16,20,.52) 100%)}
.scene .grain{background:var(--bt-grain) 0 0/160px 160px;opacity:.07;pointer-events:none}
/* the Spring Tide: night falls, the full moon is up on the key light's side, its path lies on the sea, the tide rises */
body.fs .scene .sky::after,body.fs .scene .sky .moon,body.fs .scene .sea::after{opacity:1}
body.fs .scene .sky .lit{opacity:.35}
body.fs .scene .sky .clouds{opacity:.18}
body.fs .scene .sea{transform:translateY(-3vh)}
body.fs .scene .sea .glint{background:radial-gradient(45% 80% at 50% 0,color-mix(in srgb,var(--moon) 30%,transparent),transparent)}
@keyframes bt-swell{from{transform:translateX(0)}to{transform:translateX(5%)}}

/* ---- title and round buttons */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.01em;color:var(--cream);text-shadow:0 1px 1px rgba(8,13,16,.55),0 4px 16px rgba(8,13,16,.45)}
.ibtn{border:1px solid color-mix(in srgb,var(--cream) 40%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--cream) 18%,transparent),0 2px 6px rgba(0,0,0,.35)}
.ibtn:hover{border-color:var(--cream)}

/* ---- the board: column tops on a bevelled rim (light on the upper-left edges, dark on the lower right); in the Spring
   Tide the rims catch the moon. Win, hot, lock and feature rims keep the shared rules (they are more specific). */
.hex-board .cell::before{background:linear-gradient(150deg,color-mix(in srgb,var(--basalt-hi) 82%,var(--cream)) 0%,var(--basalt) 30%,var(--hex-rim) 62%,color-mix(in srgb,var(--hex-rim) 55%,#000) 100%)}
.hex-board.feature .cell:not(.win):not(.hot):not(.lk)::before{background:linear-gradient(150deg,color-mix(in srgb,var(--moon) 72%,transparent) 0%,var(--fs-ring) 40%,color-mix(in srgb,var(--basalt-lo) 60%,#000) 100%)}

/* ---- the frame "causeway-edge": the board is set into the top of the causeway — a stepped platform of wet basalt
   (bevelled, the sky's sheen on its upper left) whose front shows the columns' faces going down into a lace of foam.
   "clean": a thin slate frame. Padding in px: the board measures it. One large shadow under the platform. */
.frame{padding:12px 14px 8px;gap:6px}
.frame>.edge{position:absolute;inset:0;z-index:0;pointer-events:none;filter:drop-shadow(0 16px 28px rgba(6,10,13,.5))}
.frame>.edge .steps{position:absolute;inset:0;
  background:radial-gradient(110% 70% at 20% 0%,rgba(222,232,234,.1),transparent 60%),var(--bt-ves),linear-gradient(180deg,color-mix(in srgb,var(--basalt-lo) 80%,var(--sea)),color-mix(in srgb,var(--basalt-lo) 70%,var(--inkd)) 78%);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--cream) 22%,transparent),inset 2px 0 0 color-mix(in srgb,var(--cream) 10%,transparent),inset -2px -3px 0 rgba(6,10,13,.4);
  clip-path:polygon(0 8%,4% 8%,4% 3%,9% 3%,9% 0,91% 0,91% 3%,96% 3%,96% 8%,100% 8%,100% 92%,96% 92%,96% 97%,91% 97%,91% 100%,9% 100%,9% 97%,4% 97%,4% 92%,0 92%)}
.frame>.edge .face{position:absolute;left:9%;right:9%;top:100%;height:clamp(10px,2.6vh,22px);
  background:repeating-linear-gradient(90deg,transparent 0 41px,rgba(244,241,234,.09) 41px 42px,rgba(6,10,13,.3) 42px 44px),linear-gradient(180deg,var(--basalt-lo),color-mix(in srgb,var(--inkd) 80%,#000))}
.frame>.edge .foam{position:absolute;left:5%;right:5%;top:calc(100% + clamp(4px,2vh,16px));height:12px;opacity:.6;background:var(--bt-lace) 0 0/120px 100% repeat-x}
body[data-variant="clean"] .frame>.edge{filter:none}
body[data-variant="clean"] .frame>.edge .steps{clip-path:none;border-radius:var(--radius);background:color-mix(in srgb,var(--basalt-lo) 88%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
body[data-variant="clean"] .frame>.edge .face,body[data-variant="clean"] .frame>.edge .foam{display:none}
.board,.message{position:relative;z-index:1}
.hex-board.feature{--hex-top:radial-gradient(90% 70% at 30% 14%,rgba(250,244,225,.22),rgba(250,244,225,0) 62%),var(--bt-ves),linear-gradient(168deg,color-mix(in srgb,var(--basalt-hi) 86%,var(--moon)),var(--basalt) 56%,var(--basalt-lo))}
.sym{position:relative;width:100%;height:100%}
.sym img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.hex-board .cs-float{font-family:var(--display);font-weight:400}
.hex-board .lk-pod{font-family:var(--ui)}
/* the idle respin counter stays dimmed but readable: at .55 its small "/8" fell to 3.7:1 on phones (now ≥ 5:1) */
.hex-board .lk-count{opacity:.72}
.message{font-family:var(--ui);font-weight:700;color:var(--ink);text-shadow:0 1px 2px rgba(0,0,0,.75);max-width:100%;padding:0 6px}
.message b{color:var(--cream)}
.message .tag{color:var(--muted)}

/* ---- the Spring Tide bar: spin N of M, the Tide symbols (plain text), the total */
.fsbar{position:relative;z-index:2;background:linear-gradient(180deg,var(--panel),var(--basalt-lo));border:1px solid color-mix(in srgb,var(--moon) 50%,transparent);border-radius:var(--radius-sm);
  color:var(--ink);font-family:var(--ui);font-weight:700;padding:4px 14px;gap:14px;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--moon) 22%,transparent),0 4px 10px rgba(0,0,0,.35)}
.fsbar b{color:var(--cream)}
.fsbar .fsx{font-family:var(--ui);font-size:1em;font-weight:700;color:var(--moon)}

/* ---- HUD "board-pods" on the base layout: no panel; balance, bet and win as hexagonal capsules of wet basalt (a
   bevelled rim — light above, dark below — around a dark fill, both cut by the same capsule), the spin button a basalt
   column top */
.hud{background:none;border:0;box-shadow:none}
.hud>.meter.bal,.hud>.meter.win,.hud>.betctl{position:relative;isolation:isolate;padding:6px 26px}
.hud>.meter.bal::before,.hud>.meter.win::before,.hud>.betctl::before,.hud>.meter.bal::after,.hud>.meter.win::after,.hud>.betctl::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,16px 100%,0 50%)}
.hud>.meter.bal::before,.hud>.meter.win::before,.hud>.betctl::before{inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--cream) 58%,var(--basalt)),color-mix(in srgb,var(--cream) 22%,var(--basalt)) 50%,var(--basalt-lo))}
.hud>.meter.bal::after,.hud>.meter.win::after,.hud>.betctl::after{inset:1.5px;background:radial-gradient(120% 90% at 26% 0%,rgba(222,232,234,.1),transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--panel) 90%,var(--sea)),var(--basalt-lo));
  clip-path:polygon(15px 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,15px 100%,0 50%)}
.hud>.meter.win::before{background:linear-gradient(90deg,color-mix(in srgb,var(--cream) 40%,var(--basalt)),color-mix(in srgb,var(--cream) 80%,var(--sea-hi)))}
.hud>.meter.bal,.hud>.meter.win{justify-self:center;min-width:min(100%,200px);text-align:center}
.demo,.auto span{color:var(--on-accent,var(--inkd))}
.meter span{color:var(--muted);font-family:var(--ui);font-weight:600;font-size:13px}
.meter b{color:var(--ink);font-family:var(--ui);font-weight:700}
.meter small{color:var(--muted)}
.pm,.auto{background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--basalt-hi) 85%,var(--cream)),var(--basalt) 55%,var(--basalt-lo));color:var(--cream);border:1px solid color-mix(in srgb,var(--cream) 50%,transparent);box-shadow:0 2px 4px rgba(0,0,0,.45)}
.spin{background:none;box-shadow:none;border-radius:0;color:var(--btn-ink)}
.spin svg{left:0;top:0;width:100%;height:100%;transform:none;overflow:visible;filter:drop-shadow(0 6px 8px rgba(6,10,13,.5))}
.spin .wave{stroke-dasharray:60;stroke-dashoffset:0}
.spin.busy .wave{animation:bt-wave 1.3s ease-in-out infinite}
.spin:disabled svg{filter:saturate(.5) brightness(.85) drop-shadow(0 6px 8px rgba(6,10,13,.5))}
@keyframes bt-wave{0%{stroke-dashoffset:0}50%{stroke-dashoffset:60}100%{stroke-dashoffset:120}}
.side .tablet{background:linear-gradient(180deg,var(--panel),var(--basalt-lo));border:1px solid var(--line);color:var(--ink)}
.tablet .th{font-family:var(--display);font-weight:400;color:var(--cream)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays: the win word in the display face with a soft depth (no hard offset), the amount
   on a hexagonal slab of wet basalt like the HUD pods */
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.panel h3{color:var(--cream)}
.overlay{background:radial-gradient(44% 32% at 50% 42%,var(--veil-light),transparent),radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--deep) 88%,transparent),color-mix(in srgb,var(--inkd) 95%,#000) 80%)}
.ovcard h2{text-shadow:0 2px 2px rgba(8,13,16,.55),0 10px 32px rgba(8,13,16,.5)}
.ovamt:not(:empty){border-radius:0;padding:.06em .9em .12em;background:var(--ov-plate);
  clip-path:polygon(.55em 0,calc(100% - .55em) 0,100% 50%,calc(100% - .55em) 100%,.55em 100%,0 50%);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--cream) 30%,transparent),inset 0 -3px 0 rgba(6,10,13,.35)}
.btn{font-family:var(--ui);font-weight:700;border:1px solid color-mix(in srgb,var(--cream) 50%,transparent)}
.ptc,.chips button,.tog{background:color-mix(in srgb,#000 22%,var(--panel))}
.ptc .symbox,.special .symbox{position:relative;background:var(--hex-top);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.special .symbox{width:84px;height:96px;flex:none}
.ptc .sym,.special .sym{position:absolute;inset:11%;width:auto;height:auto}
.ptgrid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.ptc .symbox{width:64px;height:74px}
.ptc td:first-child{color:var(--muted);white-space:nowrap}

/* ---- the column rise (the Spring Tide transition): fourteen hexagonal basalt columns — a lit top, a lit, a middle
   and a shadow face — rise over the screen in a wave from the left and sink again; reduced motion: a cross-fade */
.tiderise{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden}
.tiderise.show{display:flex}
.tiderise i{--cw:calc(100vw / 14);flex:1 1 0;margin:0 -1px;transform:translateY(105%);
  background:var(--bt-cap) center top/100% calc(var(--cw)*.4) no-repeat,linear-gradient(180deg,transparent 50%,rgba(6,10,13,.5)),var(--bt-ves),
    linear-gradient(90deg,color-mix(in srgb,var(--basalt-hi) 82%,var(--sky)) 0 25%,var(--basalt) 25% 75%,var(--basalt-lo) 75% 100%);
  clip-path:polygon(0 calc(var(--cw)*.2),25% 0,75% 0,100% calc(var(--cw)*.2),100% 100%,0 100%)}
.tiderise i:nth-child(odd){margin-top:5vh}
.tiderise i:nth-child(3n){margin-top:9vh}
/* big wins: puffins cross high over the sea, their wings whirring (transform only) */
.flock{position:fixed;inset:0;z-index:31;pointer-events:none;overflow:hidden}
.puffin{position:absolute;left:-10vw;top:var(--y);width:calc(64px*var(--s));height:calc(48px*var(--s));animation:bt-fly var(--t) linear var(--d) forwards;opacity:0}
.puffin::before,.puffin::after{content:"";position:absolute;inset:0;background:var(--bt-puffin) center/contain no-repeat}
.puffin::after{background-image:var(--bt-wing);opacity:.9;transform-origin:44% 54%;animation:bt-flap .12s ease-in-out var(--f,0ms) infinite alternate}
@keyframes bt-fly{0%{opacity:0;transform:translateX(0) translateY(0)}8%{opacity:.95}50%{transform:translateX(60vw) translateY(-2vh)}92%{opacity:.95}100%{opacity:0;transform:translateX(122vw) translateY(1vh)}}
@keyframes bt-flap{to{transform:scaleY(-.4)}}

/* ---- reduced motion: a still scene, no swell, no wave on the spin button, no puffins, no slow cross-fades */
body.still .scene .sea .swell,body.still .spin.busy .wave{animation:none}
body.still .flock{display:none}
body.still .scene *,body.still .scene .sky::after,body.still .scene .sea::after{transition:none}
@media (prefers-reduced-motion:reduce){
  .scene .sea .swell,.spin.busy .wave{animation:none!important}
  .flock{display:none}
  .scene *,.scene .sky::after,.scene .sea::after{transition:none!important}
}

/* ---- phones (portrait 360 × 640): seven column tops of ≈ 46 px across 344 px; the horizon rises to the band above the
   board; the pods sit under the board in the shell's two-row dock, the spin in the thumb zone (mirrored for left-handed
   play) */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:8px 4px 6px;gap:4px}
  .frame>.edge .face{height:clamp(8px,1.6vh,14px)}
  .frame>.edge .foam{top:calc(100% + clamp(4px,1.3vh,10px));height:9px}
  .hud>.meter.bal,.hud>.meter.win,.hud>.betctl{padding:5px 18px}
  .hud>.meter.bal::before,.hud>.meter.win::before,.hud>.betctl::before,.hud>.meter.bal::after,.hud>.meter.win::after,.hud>.betctl::after{clip-path:polygon(11px 0,calc(100% - 11px) 0,100% 50%,calc(100% - 11px) 100%,11px 100%,0 50%)}
  .hud>.meter.bal,.hud>.meter.win{min-width:0;justify-self:stretch}
  .logo h1{font-size:clamp(16px,5vw,34px)}
  .puffin{width:calc(44px*var(--s));height:calc(33px*var(--s))}
}
@media (max-aspect-ratio:4/5){
  :root{--hz:27%}
  .scene .far{height:8vh}
  .scene .sky .moon{left:9%;top:11%;width:11vmin;height:11vmin}
  .scene .cw{display:none}
}
@media (max-width:400px){
  /* tighter capsules + bet meter so the bottom dock (bet -/+ , autoplay, SPIN) fits down to 320px without the
     column-top spin button clipping off the right edge; the hexagonal chamfer shrinks to match the padding */
  .hud>.meter.bal,.hud>.meter.win,.hud>.betctl{padding:4px 10px}
  .hud>.meter.bal::before,.hud>.meter.win::before,.hud>.betctl::before,.hud>.meter.bal::after,.hud>.meter.win::after,.hud>.betctl::after{clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 50%,calc(100% - 7px) 100%,7px 100%,0 50%)}
  .betctl .meter{min-width:52px}
  .fsbar{gap:8px;padding:3px 8px;font-size:13px}
  .message{font-size:14px}
}