/* Abyssal Treasure skin on the shared game shell: an ocean trench in the dark, seen through a diving-bell porthole.
   Light: the last daylight comes from the surface (top left, cool), the deep glows cyan from below; the board sits in the
   brightest water. Scene in four layers: far water with depth haze and slow light shafts → mid trench walls (hazy, low
   contrast) → near rock (darkest, partly off screen) → vignette and one static grain layer; marine snow drifts through.
   A brass porthole (bevel lit top left, dark lower right, flush bolts and a manometer) round a recessed water-glass reel
   window with slow caustics; pearls in shell cups; porthole tablets at the sides; a nautilus spin button; a dive into the
   Treasure Dive. Theme tokens (--glow, --deep, --nacre, --ink, --muted, --surface…) come from skin.js themeMap; brass,
   water glass and pearl are materials (fixed colours, so their text keeps its contrast in every preset).
   Motion: sine drift, no bounce; only transform and opacity move; the board itself never drifts. */
:root{
  --glow:#71E9F4; --deep:#021218; --nacre:#F9B4D6; --glow-hi:#A1F1F8; --abyss-tint:#010709;
  --ink:#C9F7FB; --muted:#9EF0F8; --surface:#0A2127; --surface-hi:#102E35; --well:#010D11;
  --brass:#C9A15A; --brass-hi:#F6E2B0; --brass-mid:#D9B46C; --brass-lo:#7A5A26; --brass-dk:#3A2A10;
  --water-hi:#0F5262; --water:#08303B; --water-lo:#031820; --sine:cubic-bezier(.37,0,.63,1);
  --display:"Fraunces",Georgia,serif; --ui:"Figtree",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--glow) 32%,transparent); --radius:16px; --radius-sm:10px;
  --panel-bg:linear-gradient(180deg,var(--surface-hi),var(--surface)); --panel-border:color-mix(in srgb,var(--brass) 70%,transparent);
  --hud-bg:linear-gradient(180deg,var(--surface-hi),var(--surface));
  --ibtn-bg:var(--surface); --ibtn-ink:var(--ink);
  --btn-bg:linear-gradient(180deg,var(--brass-hi),var(--brass-mid) 50%,#B48A44); --btn-ink:#241806;
  /* the water glass: brighter where the surface light enters (top left), deeper towards the lower right */
  --window-bg:radial-gradient(130% 90% at 38% 0%,#11596A,var(--water) 46%,var(--water-lo) 100%); --window-radius:10px;
  --reel-sep:rgba(160,236,240,.07); --win-glow:#BFF4F7; --focus:var(--ink); --spin-blur:1px;
  --pearl-size:max(26px,50%); --pearl-pad:calc(var(--cell)*.04); --pearl-ripple:rgba(233,251,253,.8);
  --veil-light:color-mix(in srgb,var(--glow) 16%,transparent); --win-radius:50%;
  /* brass of the bell: metal ramp with its dark horizon below the middle (art direction §5.3) */
  --brass-face:linear-gradient(160deg,#F3DDA2 0%,#CDA65E 14%,#9C7834 40%,#5C421A 54%,#8C6A2E 70%,#C49C52 88%,#6A4C1C 100%);
}
body{background:var(--deep)}
/* the ambient motes (shell canvas) drift in front of the scene layers, like plankton in the lamp light */
.scene canvas#bgfx{z-index:1}
body[data-depth="1"]{--abyss:.5;--dep:1}body[data-depth="2"]{--abyss:.66;--dep:2}body[data-depth="3"]{--abyss:.8;--dep:3}

/* far water: the surface glow at the top, depth haze, and the brightest water behind the board (it separates the board
   from the scene). "trench-rays" (default): light shafts, hazy trench walls and near rock; "reef-ruins": columns and kelp
   on the floor. The dive: a darkening layer, deeper with every level. Static layers; only opacity and transform move. */
.scene .water{background:
  radial-gradient(46% 40% at 50% 46%,color-mix(in srgb,var(--glow) 13%,transparent),transparent 72%),
  radial-gradient(90% 55% at 42% -12%,color-mix(in srgb,var(--glow) 26%,var(--deep)),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--deep) 78%,var(--glow)) 0%,color-mix(in srgb,var(--deep) 90%,var(--glow)) 38%,var(--deep) 72%,color-mix(in srgb,var(--deep) 82%,#000) 100%)}
.scene .rays{overflow:hidden;transition:opacity 1s}
.scene .rays i{position:absolute;top:-10%;height:115%;transform-origin:50% 0;background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 20%,transparent),transparent 70%);
  animation:at-ray 14s var(--sine) infinite alternate;opacity:.45}
.scene .rays i:nth-child(1){left:14%;width:20vw;transform:rotate(16deg)}
.scene .rays i:nth-child(2){left:42%;width:9vw;transform:rotate(7deg);animation-delay:-5s}
.scene .rays i:nth-child(3){left:66%;width:15vw;transform:rotate(-4deg);animation-delay:-9s}
@keyframes at-ray{from{opacity:.25}to{opacity:.6}}
.scene .walls,.scene .rock,.scene .ruins,.scene .kelp{-webkit-mask-position:center bottom;mask-position:center bottom;-webkit-mask-size:cover;mask-size:cover;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity .8s}
/* mid plane: the trench walls in the haze (lighter and flatter towards the top, as far things are under water) */
.scene .walls{background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 70%,var(--glow)) 0%,color-mix(in srgb,var(--deep) 86%,var(--glow)) 45%,color-mix(in srgb,var(--deep) 92%,#000) 100%);
  -webkit-mask-image:var(--trench);mask-image:var(--trench);-webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:.9}
/* near plane: darker rock at the lower corners, partly off screen, with a cold rim where the deep glow touches it */
.scene .rock{background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 80%,#000),color-mix(in srgb,var(--deep) 55%,#000));
  -webkit-mask-image:var(--trench-near);mask-image:var(--trench-near);-webkit-mask-size:100% 100%;mask-size:100% 100%}
.scene .ruins,.scene .kelp{opacity:0}
.scene .ruins{background:linear-gradient(180deg,color-mix(in srgb,var(--deep) 66%,var(--glow)),color-mix(in srgb,var(--deep) 84%,var(--glow)));-webkit-mask-image:var(--ruins);mask-image:var(--ruins)}
.scene .kelp.far{background:color-mix(in srgb,var(--deep) 78%,var(--glow));-webkit-mask-image:var(--kelp-far);mask-image:var(--kelp-far)}
.scene .kelp.near{background:color-mix(in srgb,var(--deep) 88%,#000);-webkit-mask-image:var(--kelp-near);mask-image:var(--kelp-near);transform-origin:50% 100%;animation:at-sway 11s var(--sine) infinite alternate}
@keyframes at-sway{from{transform:skewX(-1deg)}to{transform:skewX(1deg)}}
body.bg-reef-ruins .scene .ruins,body.bg-reef-ruins .scene .kelp{opacity:1}
body.bg-reef-ruins .scene .walls,body.bg-reef-ruins .scene .rock{opacity:0}
body.bg-reef-ruins .scene .rays{opacity:.55}
.scene .snow{inset:-960px 0 0 0;background-size:240px 240px;animation:at-snow 90s linear infinite;
  background-image:radial-gradient(1.6px 1.6px at 12% 18%,color-mix(in srgb,var(--glow) 35%,#fff),transparent),radial-gradient(1.2px 1.2px at 46% 62%,color-mix(in srgb,var(--glow) 45%,#fff),transparent),
    radial-gradient(2px 2px at 78% 34%,color-mix(in srgb,var(--glow) 30%,#fff),transparent),radial-gradient(1px 1px at 64% 86%,color-mix(in srgb,var(--glow) 50%,#fff),transparent);opacity:.45}
@keyframes at-snow{to{transform:translate3d(0,960px,0)}}
/* vignette (35–55 % in the corners) and one static grain layer for the whole scene, never on cells */
.scene .vig{z-index:2;pointer-events:none;background:radial-gradient(120% 95% at 50% 44%,transparent 52%,color-mix(in srgb,var(--deep) 45%,transparent) 78%,color-mix(in srgb,var(--deep) 70%,#000) 100%)}
.scene .grain{z-index:2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-size:160px;
  background-image: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")}
.scene .abyss{opacity:0;transition:opacity 1.2s var(--sine);background:linear-gradient(180deg,color-mix(in srgb,var(--abyss-tint) 70%,transparent) 0%,var(--abyss-tint) 75%)}
body.fs .scene .abyss{opacity:var(--abyss,.35)}
body.fs .scene .rays{opacity:.4}
.abyss .motes{position:absolute;inset:0;animation:at-glow 9s var(--sine) infinite alternate;background-size:300px 260px;
  background-image:radial-gradient(2px 2px at 20% 30%,var(--nacre),transparent),radial-gradient(1.6px 1.6px at 70% 60%,var(--glow),transparent),radial-gradient(2.4px 2.4px at 45% 85%,var(--nacre),transparent)}
@keyframes at-glow{from{opacity:.25}to{opacity:.75}}

/* title: Fraunces in the pale light of the deep, a soft glow behind it (no plate) */
.logo h1{font-weight:600;letter-spacing:.02em;color:var(--glow-hi);
  text-shadow:0 0 22px color-mix(in srgb,var(--glow) 30%,transparent),0 2px 10px color-mix(in srgb,var(--deep) 85%,transparent)}
.ibtn{border-color:color-mix(in srgb,var(--brass) 50%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent)}.ibtn:hover{border-color:var(--brass-hi)}
.demo,.auto span{background:var(--glow);color:var(--deep)}
.screen{background:var(--deep)}
.spinner{border-color:color-mix(in srgb,var(--glow) 20%,transparent);border-top-color:var(--glow)}
/* the shell's governed flash, should one fire (big win): a faint aqua tint, never white */
.flash{background:radial-gradient(circle at 50% 45%,rgba(191,244,247,.2),rgba(191,244,247,.06) 45%,transparent 75%)}

/* the diving bell: a brass porthole round the board and the message — bevel lit from the top left, dark at the lower
   right, one soft drop shadow — with flush bolts and a manometer whose needle shows the dive's depth (behind the board:
   the frame is its own stacking context) */
.frame{isolation:isolate;--pad:min(calc(var(--cell)*.18),18px);--side:min(calc(var(--cell)*.2),22px);padding:var(--pad) var(--side) 6px}
.bell{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:calc(var(--pad) * 2.2);background:var(--brass-face);
  box-shadow:inset 1.5px 1.5px 0 rgba(255,244,210,.6),inset -2px -2px 0 rgba(36,22,4,.7),inset 0 0 0 1px rgba(36,22,4,.85),
    0 22px 48px rgba(0,0,0,.55),0 4px 10px rgba(0,0,0,.4)}
.bell i{position:absolute;display:block}
.bell .bolt{width:max(5px,calc(var(--pad)*.38));aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 30%,#FFF1C8,#C9A15A 42%,#5E431A 78%,#3A2A10);box-shadow:1px 1.5px 1.5px rgba(20,12,2,.6),-.5px -.5px 0 rgba(255,240,200,.4)}
.bell .bolt.t{top:calc(var(--pad)*.5);left:var(--p)}
.bell .bolt.b{top:calc(100% - 9px);left:var(--p)}
.bell .bolt.l{left:calc(var(--side)*.5);top:var(--p)}
.bell .bolt.r{left:calc(100% - var(--side)*.5);top:var(--p)}
.bell .dial{left:50%;top:calc(var(--pad)*-.45);width:max(16px,calc(var(--pad)*1.6));aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 40% 36%,#FBF8EE,#E6DFCC 52%,#BDB29A 56%,transparent 57%),radial-gradient(circle at 36% 30%,#FFF1C8,var(--brass) 45%,#4A3410 80%);
  box-shadow:1px 3px 5px rgba(0,0,0,.55),inset 0 0 0 1px rgba(36,22,4,.7)}
.bell .dial .needle{left:50%;top:50%;width:9%;height:38%;margin-left:-4.5%;border-radius:2px;background:#7E1C28;transform-origin:50% 0;
  transform:rotate(calc(120deg + var(--dep,0) * 40deg));transition:transform 1.2s var(--sine)}
/* a faint reflection across the glass, from the top-left light */
#board.reels-board::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:var(--window-radius);
  background:linear-gradient(128deg,rgba(255,255,255,.09),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 76%,rgba(134,243,234,.05))}
/* variant "clean": a thin brass line, no bolts, no dial */
body[data-variant="clean"] .frame{--pad:6px;--side:6px}
body[data-variant="clean"] .bell{background:none;box-shadow:inset 0 0 0 1.5px var(--brass),0 18px 40px rgba(0,0,0,.4);border-radius:16px}
body[data-variant="clean"] .bell .bolt,body[data-variant="clean"] .bell .dial{display:none}

/* the water-glass reel window: recessed (the light from above throws a shadow into the niche, a light lip below), two
   slow caustic nets drift over it (transform and opacity only) */
.reels-board .window{box-shadow:inset 0 16px 18px -8px rgba(0,8,12,.7),inset 0 0 0 1.5px #2A1E0A,inset 0 -1px 0 1.5px rgba(246,226,176,.28),inset 0 0 40px rgba(0,10,16,.35),
  -1.5px -1.5px 0 2.5px #3A2808,1.5px 1.5px 0 2.5px #E2C27C}
body[data-variant="clean"] .reels-board .window{box-shadow:inset 0 16px 18px -8px rgba(0,8,12,.7),inset 0 0 40px rgba(0,10,16,.35)}
.reels-board .window::before,.reels-board .window::after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
  background:var(--caustic) 0 0/240px 180px repeat;opacity:.07;animation:at-caustic 24s var(--sine) infinite alternate}
.reels-board .window::after{background-size:330px 248px;opacity:.04;animation-duration:31s;animation-direction:alternate-reverse}
@keyframes at-caustic{from{transform:translate3d(-3%,-2%,0) rotate(0)}to{transform:translate3d(3%,2%,0) rotate(2deg)}}
.reels-board .reels{position:relative;z-index:1}
.reels-board .cell.landed .sym{animation:at-settle .46s var(--sine)}
@keyframes at-settle{from{transform:translateY(-4%)}to{transform:none}}
/* a win: the specimen drifts up a little and back (no filter on the cell), inside a glass bubble lit from the top left */
.reels-board .cell.win .sym{animation:at-float 1.1s var(--sine) infinite alternate}
@keyframes at-float{from{transform:none}to{transform:translateY(-2.5%) scale(1.05)}}
.reels-board .cell.win::after{inset:4%;border-radius:50%;border:1.5px solid rgba(200,255,248,.8);
  background:radial-gradient(60% 60% at 30% 24%,rgba(255,255,255,.16),rgba(255,255,255,0) 60%),radial-gradient(closest-side,rgba(134,243,234,0) 70%,rgba(134,243,234,.16));
  box-shadow:0 0 10px rgba(134,243,234,.45),inset 0 0 10px rgba(134,243,234,.22)}
/* the others sink into the dark water (opacity, not a filter) */
.reels-board .cell.dim .sym{filter:none;opacity:.42}
/* the wild: art.js draws WILD on a plate at the foot of the anchor; this engraved brass plate lies over it (a little wider)
   so the word stays whole, crisp and readable at every cell size and with every admin font (light on dark; 52 px cells
   on a 360 px phone leave the plate about 35 px for the word) */
.sym.wild .tag{position:absolute;left:8%;right:8%;bottom:3%;z-index:1;padding:0 2px;border-radius:4px;
  background:linear-gradient(180deg,#0B3A40,#04232A);box-shadow:inset 0 0 0 1px #C9A15A,inset 0 2px 0 rgba(255,236,190,.22),0 1px 2px rgba(0,0,0,.5);
  color:#F2E6C8;font:600 max(9px,calc(var(--cell)*.12))/1.3 var(--display);letter-spacing:.08em;text-align:center;white-space:nowrap}

/* pearls (art.js draws the pearl, its shell and its rings): the value in figures on a dark pill over the shell. They sit
   in the top-right corner of the cell, clear of the WILD plate at the foot of the anchor. */
.ways-board .pearl{align-items:flex-start}
.ways-board .pearl.rip::after{bottom:auto;top:var(--pearl-pad)}
.pearlv{display:block}
.pearlv img,.pearlv .orb{position:absolute;inset:0;width:100%;height:100%}
.pearlv .orb{inset:22%;width:auto;height:auto;border-radius:50%;background:radial-gradient(circle at 34% 28%,#FFFFFF 0 14%,#F6EEF6 32%,#E2D6EA 62%,#BDB2CC 92%);box-shadow:0 0 0 1px #062028}
.pearlv b{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:0 .34em;border-radius:999px;background:#05222A;color:#F4ECF7;white-space:nowrap;
  font:800 max(10px,calc(var(--cell)*.14))/1.15 var(--ui);letter-spacing:-.02em;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px rgba(201,161,90,.75),0 1px 3px rgba(0,0,0,.5)}

/* the message: a small glass plate set into the brass under the reels */
.message{padding:2px 14px;border-radius:999px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--surface) 94%,transparent);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5),inset 0 0 0 1px rgba(36,22,4,.6),0 1px 0 rgba(255,240,200,.3)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--glow)}

/* the dive bar: dive count, the depth gauge (filled / hollow pips and words), the pearls in play, the total won */
.fsbar{background:var(--surface);border:1.5px solid color-mix(in srgb,var(--brass) 70%,transparent);border-radius:999px;color:var(--ink);gap:14px;padding:5px 16px;
  font-weight:600;flex-wrap:wrap;justify-content:center;row-gap:2px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.fsbar b{color:var(--glow)}
.fsbar .gauge{display:inline-flex;align-items:center;gap:6px}
.fsbar .gauge small{color:var(--muted);font-size:.86em;font-weight:600}
.fsbar .pips{display:inline-flex;gap:3px}
.fsbar .pips i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--glow)}
.fsbar .pips i.on{background:var(--glow)}

/* porthole tablets at the sides: the buy (left) and the pearls / depth gauge (right, wide screens) — glass in a brass
   ring, bevel lit from the top left */
.tablet{border:0;border-radius:22px;color:var(--ink);background:radial-gradient(120% 90% at 40% 0%,var(--surface-hi),var(--surface));
  box-shadow:inset 0 0 0 2px var(--brass-dk),inset 1px 1px 0 3px rgba(240,214,150,.75),inset -1px -1px 0 3px rgba(120,88,34,.9),inset 0 10px 16px -10px rgba(0,0,0,.6),0 12px 28px rgba(0,0,0,.42)}
.tablet::before{content:"";position:absolute;inset:8px;pointer-events:none;border-radius:16px;
  background:radial-gradient(circle at 4px 4px,var(--brass) 0 2.2px,transparent 2.7px),radial-gradient(circle at calc(100% - 4px) 4px,var(--brass) 0 2.2px,transparent 2.7px),
    radial-gradient(circle at 4px calc(100% - 4px),var(--brass) 0 2.2px,transparent 2.7px),radial-gradient(circle at calc(100% - 4px) calc(100% - 4px),var(--brass) 0 2.2px,transparent 2.7px)}
.side .tablet{position:relative}
.tablet .th{font-weight:600;color:var(--glow-hi)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}
.pearltab{padding:14px 12px}
.pearltab .chips{font-weight:800;font-size:18px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pearltab.deep .chips{font-size:14px}
.pearltab .lvl{font-size:15px}
.pearltab .vg{list-style:none;margin:4px 0;padding:0;display:flex;flex-direction:column;gap:3px;width:62%}
.pearltab .vg li{padding:1px 0;border:1.5px solid var(--line);border-radius:999px;text-align:center;font-weight:800;font-size:13px;color:var(--muted);transition:background var(--t-slow,360ms) var(--sine),color var(--t-slow,360ms)}
.pearltab .vg li.past{background:color-mix(in srgb,var(--glow) 18%,transparent);color:var(--ink)}
.pearltab .vg li.now{background:var(--glow);border-color:var(--glow);color:var(--deep)}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  /* the HUD: recessed glass capsules for the meters */
  .hud .meter.bal,.hud .meter.win,.betctl .meter{padding:4px 14px;border-radius:999px;background:var(--well);box-shadow:inset 0 2px 4px rgba(0,0,0,.45),inset 0 0 0 1px var(--line)}
}
.hud{border-color:color-mix(in srgb,var(--brass) 55%,transparent);box-shadow:0 10px 28px rgba(0,0,0,.4),inset 0 1px 0 color-mix(in srgb,var(--brass-hi) 22%,transparent)}
.meter.win b{color:var(--glow)}
.pm,.auto{border-color:color-mix(in srgb,var(--brass) 55%,transparent)}
.auto[aria-pressed="true"]{box-shadow:0 0 14px color-mix(in srgb,var(--glow) 60%,transparent)}

/* the spin button: a brass porthole (lit from the top left) with a nautilus behind the glass, one full turn per spin */
.spin{color:var(--brass-hi);--spin-ring:color-mix(in srgb,var(--glow) 80%,transparent);
  background:radial-gradient(circle at 40% 34%,rgba(120,220,230,.28),transparent 34%),
    radial-gradient(circle,#0C4A5A 0,var(--water) 30%,#042028 49%,rgba(0,0,0,.6) 50.5%,transparent 55%),
    linear-gradient(150deg,#FFF1C8 0%,#D9B46C 24%,#9C7834 46%,#5C421A 60%,#9C7834 78%,#C9A15A 100%);
  box-shadow:0 10px 22px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4),inset 0 0 0 2px var(--brass-dk),inset 1px 1px 0 3px rgba(255,236,190,.35)}
.spin svg{width:60%;height:60%;filter:none}
.spin.kick svg{animation:at-turn .9s var(--sine)}
@keyframes at-turn{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* overlays and panels: glass cards in a brass rim; big wins on a lighter plate (the shell's veil alone leaves the title
   under 4.5:1 on the light and coral presets; the plate keeps title, amount and skip text ≥ 5:1 on any backdrop) */
.ovcard{padding:26px clamp(18px,4vw,44px);border-radius:28px;background:radial-gradient(120% 100% at 40% 0%,var(--surface-hi),var(--surface));
  box-shadow:inset 0 0 0 2px var(--brass-dk),inset 1px 1px 0 5px rgba(232,200,130,.7),inset -1px -1px 0 5px rgba(120,88,34,.85),0 24px 60px rgba(0,0,0,.55)}
.overlay.bigwin .ovcard{background:color-mix(in srgb,var(--surface) 90%,transparent);box-shadow:inset 0 0 0 2px var(--brass-dk),inset 0 0 0 4px color-mix(in srgb,var(--brass) 50%,transparent),0 24px 60px rgba(0,0,0,.5)}
.ovcard h2{font-weight:600;color:var(--glow-hi);text-shadow:0 0 24px color-mix(in srgb,var(--glow) 35%,transparent);letter-spacing:-.01em}
/* the feature intro and summary: a calmer title than the big win (the card no longer fills the screen edge to edge) */
.overlay.intro .ovcard h2,.overlay.summary .ovcard h2{font-size:clamp(30px,7.4vw,92px);text-wrap:balance}
/* the big-win words (DEEP, ABYSSAL, LEVIATHAN in game.json) set in sentence case: Fraunces reads as a title, not a label */
.overlay.bigwin .ovcard h2{text-transform:lowercase}.overlay.bigwin .ovcard h2::first-letter{text-transform:uppercase}
.ovamt{color:var(--ink)}.ovcard p{color:var(--muted)}
.btn{font-weight:600;box-shadow:inset 0 0 0 1.5px var(--brass-dk),inset 0 1px 0 rgba(255,248,220,.6),0 8px 20px rgba(0,0,0,.45)}
.panel h2{font-weight:600}.panel h3{font-weight:600;color:var(--glow-hi)}
.ptc{background:var(--well)}
.ptc .symbox{border-radius:10px;background:var(--window-bg);box-shadow:inset 0 8px 10px -6px rgba(0,0,0,.6)}
.ptc .sym{position:absolute;inset:6%}
.ptc td small{font-weight:600;color:var(--muted);font-size:13px}
.pearlbox .pearlv{position:absolute;inset:6%}
.ladder{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:8px 0 0;list-style:none}
.ladder li{padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-weight:600}

/* the dive into and out of the Treasure Dive: three water layers pass the view (above the board, below the overlays;
   driven by skin.js), the first one carrying the caustic light of the shallows. The layers are taller than the screen
   so their soft edges never show while they cover it. */
.dive{position:fixed;inset:0;z-index:20;pointer-events:none;display:none;overflow:hidden}
.dive.show{display:block}
.dive .layer{position:absolute;left:0;right:0;top:-20%;height:140%;display:block;transform:translateY(100%)}
.dive .l1{background:var(--caustic) 0 0/300px 225px repeat,linear-gradient(180deg,transparent,rgba(40,130,150,.5) 14%,rgba(20,90,110,.6) 86%,transparent);background-blend-mode:soft-light,normal}
.dive .l2{background:linear-gradient(180deg,transparent,rgba(8,52,66,.85) 14%,rgba(5,34,44,.92) 86%,transparent)}
.dive .l3{background:linear-gradient(180deg,transparent,#03161D 14%,#010A0E 86%,transparent)}

/* phones: a slimmer bell; the dive bar may wrap; the title in one line */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .logo h1{letter-spacing:0;font-size:clamp(16px,4.7vw,30px)}
  .fsbar{gap:10px;padding:4px 12px;font-size:14px}
  .tablet::before{display:none}
  .scene .rays i:nth-child(1){width:34vw}.scene .rays i:nth-child(3){width:26vw}
}
@media (max-width:400px){.fsbar{gap:8px;padding:3px 10px;font-size:12.5px;line-height:1.25}.fsbar .pips i{width:8px;height:8px}}
/* reduced motion: no sway, no snow fall, no caustics, no spiral turn, no drift of the winners (ways.css stops ripples) */
body.still .scene .rays i,body.still .scene .kelp,body.still .scene .snow,body.still .abyss .motes,body.still .spin.kick svg,
body.still .reels-board .cell.win .sym,body.still .reels-board .cell.landed .sym{animation:none}
body.still .reels-board .window::before,body.still .reels-board .window::after{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .rays i,.scene .kelp,.scene .snow,.abyss .motes,.spin.kick svg,.reels-board .cell.win .sym,.reels-board .cell.landed .sym{animation:none!important}
  .reels-board .window::before,.reels-board .window::after{display:none}
  .scene .abyss,.scene .rays,.bell .dial .needle{transition-duration:.1s}
}