/* Pirate's Fortune skin on the shared game shell — a LIGHT theme: a navigator's chart table under one lantern.
   Art direction (docs/design-system/reelhaven/pages/art-direction.md): one key light from the top left (the lantern's
   pool on the chart; the corners fall into the table's shadow), a carved oak stern with a brass bead round a recessed
   parchment window, quiet oak line markers, a ship's-wheel spin key lit by the same lamp, the captain's log as the HUD.
   The Lantern Respins move to dusk at anchor; the spyglass iris (with its brass lens ring) carries the change.
   Animation: transform / opacity only (the iris sweeps one custom property for .45 s); reduced motion stops it all. */
:root{
  --ink-navy:#1F3A4D; --parch:#E3C79A; --teal:#2A9D8F; --parch-lo:#C9A56C; --parch-hi:#F2E4C6; --navy-hi:#4E6575;
  --oak:#5C3315; --oak-lo:#2A1606; --brass:#C9A040; --brass-hi:#F2D58A; --brass-lo:#4A3510; --lamp:#FFE7A6;
  --ink:#24180C; --muted:#5E4A33;
  --display:"Pirata One",Georgia,serif; --ui:"Signika",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--ink-navy) 35%,transparent); --radius:10px; --radius-sm:7px;
  --panel-bg:linear-gradient(180deg,var(--parch-hi),var(--parch)); --panel-border:color-mix(in srgb,var(--ink-navy) 45%,transparent);
  --hud-bg:linear-gradient(90deg,var(--parch-lo) 0,var(--parch-hi) 6%,var(--parch-hi) 48.6%,var(--parch-lo) 50%,var(--parch-hi) 51.4%,var(--parch-hi) 94%,var(--parch-lo) 100%);
  --ibtn-bg:linear-gradient(180deg,var(--parch-hi),var(--parch)); --ibtn-ink:var(--ink-navy);
  --btn-bg:radial-gradient(circle at 36% 30%,#7A5230 0,#45280F 52%,#22120A 100%); --btn-ink:#F2D58A;
  --window-bg:radial-gradient(78% 88% at 42% 38%,#F9EFD8,#ECD8AE 60%,#CFAE78); --window-radius:4px; --reel-sep:rgba(58,36,18,.16);
  --win-glow:#E2B04E; --win-radius:8px; --focus:var(--ink-navy); --lantern-glass:rgba(255,231,166,.25);
  --peg-bg:#3A2010; --peg-ink:#F2E4C6; --spin-ring:#8A6418;
  --lock-bg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid meet'%3E%3Cg fill='none' stroke='%23C9A56C' stroke-opacity='.1' stroke-width='1'%3E%3Ccircle cx='100' cy='60' r='44'/%3E%3Ccircle cx='100' cy='60' r='36' stroke-dasharray='2 4'/%3E%3Cpath d='M100 10l7 43 43 7-43 7-7 43-7-43-43-7 43-7zM0 60h200M100 0v120M30 0l140 120M170 0 30 120'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat,linear-gradient(180deg,rgba(18,40,56,.97),rgba(9,22,32,.98));
  --lock-cell:rgba(201,165,108,.16); --coin-ink:#FFF8E6; --coin-stroke:#3A2304;
  --veil-light:rgba(255,231,166,.35); --ov-plate:color-mix(in srgb,var(--parch-hi) 82%,transparent); --ov-plate-line:rgba(58,36,18,.35);
  color-scheme:light;
}
body{background:var(--bg)}

/* ---- scene: the sea chart (default) — vellum, the engraved chart, the lantern's pool of light, the table's shadow in
   the corners, one grain layer. Other backgrounds: the captain's cabin, a moonlit harbour; the respins: dusk at anchor */
.scene .chart{background:
  radial-gradient(ellipse at 46% 44%,transparent 54%,rgba(42,22,8,.22) 76%,rgba(26,13,4,.5) 100%),
  radial-gradient(58% 52% at 34% 30%,rgba(255,244,214,.6),rgba(255,244,214,0) 72%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%231F3A4D'%3E%3Cpath d='M250 720L2150 720M250 720L2005 1447M250 720L1594 2064M250 720L977 2475M250 720L250 2620M250 720L-477 2475M250 720L-1094 2064M250 720L-1505 1447M250 720L-1650 720M250 720L-1505 -7M250 720L-1094 -624M250 720L-477 -1035M250 720L250 -1180M250 720L977 -1035M250 720L1594 -624M250 720L2005 -7M1380 210L3280 210M1380 210L3135 937M1380 210L2724 1554M1380 210L2107 1965M1380 210L1380 2110M1380 210L653 1965M1380 210L36 1554M1380 210L-375 937M1380 210L-520 210M1380 210L-375 -517M1380 210L36 -1134M1380 210L653 -1545M1380 210L1380 -1690M1380 210L2107 -1545M1380 210L2724 -1134M1380 210L3135 -517' stroke-opacity='.055' stroke-width='1.5'/%3E%3Cpath d='M-20 690c90-30 150 20 230-10s120-90 210-60 110 70 190 40 90-60 170-30' stroke-opacity='.34' stroke-width='3'/%3E%3Cpath d='M-20 690c90-30 150 20 230-10s120-90 210-60 110 70 190 40 90-60 170-30' transform='translate(0 14)' stroke-opacity='.16' stroke-width='2'/%3E%3Cpath d='M-20 690c90-30 150 20 230-10s120-90 210-60 110 70 190 40 90-60 170-30' transform='translate(0 28)' stroke-opacity='.08' stroke-width='2'/%3E%3Cpath d='M1080 -20c10 60 70 90 140 80s110 40 170 30 120-50 230-30' stroke-opacity='.3' stroke-width='3'/%3E%3Cpath d='M1080 -20c10 60 70 90 140 80s110 40 170 30 120-50 230-30' transform='translate(0 14)' stroke-opacity='.15' stroke-width='2'/%3E%3Cpath d='M1080 -20c10 60 70 90 140 80s110 40 170 30 120-50 230-30' transform='translate(0 28)' stroke-opacity='.07' stroke-width='2'/%3E%3Cg stroke-opacity='.12' stroke-width='2'%3E%3Ccircle cx='1380' cy='210' r='118'/%3E%3Ccircle cx='1380' cy='210' r='96' stroke-dasharray='4 9'/%3E%3Cpath d='M1380 70l18 122 122 18-122 18-18 122-18-122-122-18 122-18zM1380 210l70-70M1380 210l70 70M1380 210l-70 70M1380 210l-70-70'/%3E%3C/g%3E%3Cg stroke-opacity='.11' stroke-width='2'%3E%3Ccircle cx='250' cy='720' r='70'/%3E%3Cpath d='M250 630l12 78 78 12-78 12-12 78-12-78-78-12 78-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat,
  radial-gradient(120% 95% at 40% 36%,var(--parch-hi),var(--parch) 56%,var(--parch-lo))}
.scene .grain{background: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") 0 0/160px 160px;opacity:.08;mix-blend-mode:overlay}
.scene .cabin,.scene .harbor,.scene .beach{opacity:0;transition:opacity .9s var(--ease-std)}
.scene .cabin{background:
  radial-gradient(ellipse at 50% 46%,transparent 40%,rgba(14,7,2,.6) 100%),
  repeating-linear-gradient(90deg,rgba(255,214,160,.06) 0 2px,transparent 2px 122px),
  repeating-linear-gradient(90deg,#5E3A1C 0 60px,#563318 60px 120px,#2A160A 120px 124px),#4A2A12}
.scene .cabin .beam{position:absolute;left:0;right:0;top:6vh;height:5vh;background:linear-gradient(180deg,#6A4422,#3A2210 70%,#24140A);box-shadow:0 8px 18px rgba(0,0,0,.45)}
.scene .cabin .swing{position:absolute;left:10vw;top:8vh;width:34vw;height:46vh;transform-origin:50% 0;background:radial-gradient(closest-side,rgba(255,214,140,.5),rgba(255,214,140,0));animation:pf-swing 6s ease-in-out infinite alternate}
body.bg-cabin .scene .cabin{opacity:1}
/* the moon (--mx/--my) stands in the sky the board leaves free: above it on tall screens, beside it on wide ones. Its
   path on the water (::before) is a column of ruled glints under it that fades out at every edge (a mask, static) */
.scene .harbor{--mx:76%;--my:20vh;background:
  radial-gradient(7vh 7vh at var(--mx) var(--my),#FFF6DC 0 55%,rgba(255,246,220,.3) 70%,rgba(255,246,220,0) 100%),
  radial-gradient(30vh 22vh at var(--mx) calc(var(--my) + 2vh),rgba(255,246,220,.25),rgba(255,246,220,0)),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232E4456'/%3E%3Cstop offset='1' stop-color='%234E5E68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 200V122c80-10 140-62 230-60s120 40 190 36 90-30 150-26c50 4 80 40 140 128zM960 200c40-60 80-80 130-84 40-4 60-30 100-40 30-8 46-22 52-22v-10h14v10h20v-6h12v6c40 6 90 40 150 50s80 8 118 10V200z' fill='url(%23h)'/%3E%3C/svg%3E") 0 32vh/100% 16vh no-repeat,
  linear-gradient(180deg,#B5C2CA 0%,#9AABB6 34vh,#7F94A2 47vh,#3E5666 48vh,#2A4250 70vh,#1C3040 100vh)}
.scene .harbor::before,.scene .beach::before{content:"";position:absolute;bottom:0;
  -webkit-mask-image:radial-gradient(50% 100% at 50% 0,#000 15%,transparent 100%);mask-image:radial-gradient(50% 100% at 50% 0,#000 15%,transparent 100%)}
.scene .harbor::before{left:calc(var(--mx) - 9vh);width:18vh;top:48vh;background:repeating-linear-gradient(180deg,rgba(255,246,220,.2) 0 2px,transparent 2px 9px)}
@media (min-aspect-ratio:5/4){.scene .harbor{--mx:93%;--my:25vh}}
body.bg-harbor .scene .harbor{opacity:1}
/* the respins: dusk at anchor — the sun just under a far headland, the light low behind the board. --hz is the
   horizon: on tall, narrow screens it sits under the board, so the land and the glow show below it, not in slivers */
.scene .beach{--hz:63.6vh;background:
  radial-gradient(46% 26% at 50% calc(var(--hz) - 3vh),rgba(255,196,120,.5),rgba(255,196,120,0) 72%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%232E4456'/%3E%3Cstop offset='1' stop-color='%234E5E68'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 200V122c80-10 140-62 230-60s120 40 190 36 90-30 150-26c50 4 80 40 140 128zM960 200c40-60 80-80 130-84 40-4 60-30 100-40 30-8 46-22 52-22v-10h14v10h20v-6h12v6c40 6 90 40 150 50s80 8 118 10V200z' fill='url(%23h)'/%3E%3C/svg%3E") 0 calc(var(--hz) - 14vh)/100% 14vh no-repeat,
  linear-gradient(180deg,#14283A 0,#2C4458 calc(var(--hz) - 31.6vh),#9A6E58 calc(var(--hz) - 7.6vh),#D99A62 calc(var(--hz) - .2vh),#35606C var(--hz),#1E4054 calc(var(--hz) + 16vh),#0F2232 100vh)}
.scene .beach::before{left:28%;right:28%;top:var(--hz);background:repeating-linear-gradient(180deg,rgba(255,206,140,.16) 0 2px,transparent 2px 11px)}
@media (max-aspect-ratio:4/5){.scene .beach{--hz:73vh}}
body.fs .scene .beach{opacity:1}
@keyframes pf-swing{from{transform:rotate(-.7deg)}to{transform:rotate(.7deg)}}

/* ---- title: printed in the chart's navy ink, a hair of light under it (the lantern on the paper) */
.logo h1{font-weight:400;letter-spacing:.03em;color:var(--ink-navy);text-shadow:0 1px 0 rgba(255,246,222,.75)}
body.fs .logo h1,body.bg-cabin .logo h1{color:var(--parch-hi);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.ibtn{border-color:color-mix(in srgb,var(--ink-navy) 40%,transparent);color:var(--ink-navy);box-shadow:inset 0 1px 0 rgba(255,250,236,.7),0 2px 4px rgba(26,13,4,.22)}
.ibtn:hover{border-color:var(--ink-navy)}
/* keyboard focus: the navy ink ring on the light chart and the harbour sky; parchment light where the scene behind a
   control is dark (the dusk of the respins and the cabin's wood behind the header, the cabin and the harbour's sea
   behind the buy panel) */
body.fs .top,body.bg-cabin .top,body.bg-cabin .side,body.bg-harbor .side{--focus:var(--parch-hi)}

/* ---- the ship's stern: carved oak lit from the top left (bevel), one shadow under it, a brass bead round the window
   panel, two lit stern windows and two hanging lanterns (outside the board box) */
.frame{position:relative;padding:calc(var(--cell)*.18)}
.stern{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:16px 16px 28px 28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231E0E04' stroke-opacity='.22' stroke-width='1.6'%3E%3Cpath d='M0 8C90 5 160 11 250 6.5S370 11 400 8'/%3E%3Cpath d='M0 26.5C90 21.5 160 31.5 250 24S370 31.5 400 26.5'/%3E%3Cpath d='M0 45C90 38 160 52 250 41.5S370 52 400 45'/%3E%3Cpath d='M0 63.5C90 54.5 160 72.5 250 59S370 72.5 400 63.5'/%3E%3Cpath d='M0 82C90 79 160 85 250 80.5S370 85 400 82'/%3E%3Cpath d='M0 100.5C90 95.5 160 105.5 250 98S370 105.5 400 100.5'/%3E%3Cpath d='M0 119C90 112 160 126 250 115.5S370 126 400 119'/%3E%3Cpath d='M0 137.5C90 128.5 160 146.5 250 133S370 146.5 400 137.5'/%3E%3Cpath d='M0 156C90 153 160 159 250 154.5S370 159 400 156'/%3E%3Cpath d='M0 174.5C90 169.5 160 179.5 250 172S370 179.5 400 174.5'/%3E%3Cpath d='M0 193C90 186 160 200 250 189.5S370 200 400 193'/%3E%3Cpath d='M0 211.5C90 202.5 160 220.5 250 207S370 220.5 400 211.5'/%3E%3Cpath d='M0 230C90 227 160 233 250 228.5S370 233 400 230'/%3E%3Cpath d='M0 248.5C90 243.5 160 253.5 250 246S370 253.5 400 248.5'/%3E%3Cpath d='M0 267C90 260 160 274 250 263.5S370 274 400 267'/%3E%3Cpath d='M0 285.5C90 276.5 160 294.5 250 281S370 294.5 400 285.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FFD9A0' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 18C120 22 220 14 400 20'/%3E%3Cpath d='M0 55C120 59 220 51 400 57'/%3E%3Cpath d='M0 92C120 96 220 88 400 94'/%3E%3Cpath d='M0 129C120 133 220 125 400 131'/%3E%3Cpath d='M0 166C120 170 220 162 400 168'/%3E%3Cpath d='M0 203C120 207 220 199 400 205'/%3E%3Cpath d='M0 240C120 244 220 236 400 242'/%3E%3Cpath d='M0 277C120 281 220 273 400 279'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,linear-gradient(158deg,#A06838 0%,#74431F 34%,#52300F 66%,#2E1808 100%);
  box-shadow:inset 2px 2px 0 rgba(255,214,160,.32),inset -2px -2px 0 rgba(10,4,0,.5),inset 0 0 0 4px rgba(26,13,4,.35),0 18px 38px rgba(26,13,4,.42),0 3px 8px rgba(26,13,4,.3)}
/* the windows rise .62 cell over the frame when the room above it allows (--room, measured by skin.js); with less
   room they rise only into it (3 px clear of the title row) and shrink, sitting lower on the rail, so the title stays whole;
   on big cells they never rise past the rail's top (they would float over it) */
.stern{--lift:clamp(0px,calc(var(--room,999px) - 3px),min(calc(var(--cell)*.62),calc(var(--cell)*.5 + 12px)));--winh:min(calc(var(--cell)*.5),max(calc(var(--cell)*.3),calc(var(--lift) + var(--cell)*.1)))}
.stern .rail{position:absolute;left:4%;right:4%;top:calc(-1*clamp(0px,calc(var(--room,999px) - 3px),12px));height:15px;border-radius:7px;
  background:linear-gradient(180deg,#C8925A,#8A5530 55%,#5C3315);box-shadow:inset 0 1px 0 rgba(255,226,180,.55),0 3px 4px rgba(26,13,4,.4)}
.stern .rail::before,.stern .rail::after{content:"";position:absolute;top:-2px;width:14px;height:19px;border-radius:5px;background:linear-gradient(160deg,#FFF0B8,#C9A040 45%,#4A3510)}
.stern .rail::before{left:-4px}.stern .rail::after{right:-4px}
.stern .win{position:absolute;top:calc(-1*var(--lift));width:calc(var(--winh)*1.24);height:var(--winh);border-radius:44% 44% 5px 5px;
  background:linear-gradient(90deg,transparent 46%,#3A2210 46% 54%,transparent 54%),linear-gradient(180deg,transparent 50%,#3A2210 50% 57%,transparent 57%),
    radial-gradient(90% 100% at 50% 78%,#FFF1C4,#F2B861 55%,#9A5A1E);
  box-shadow:inset 0 0 0 3px #3A2412,inset 0 0 0 4.5px #B98A4E,inset 0 6px 8px rgba(58,36,18,.45),0 0 18px rgba(255,190,100,.32)}
.stern .win.l{left:18%}.stern .win.r{right:18%}
/* the lanterns hang from the frame's upper corners and sway as a pendulum (≤ .7°); their glow is static */
.stern .hang{position:absolute;top:calc(var(--cell)*.04);width:calc(var(--cell)*.3);height:calc(var(--cell)*.48);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 64'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23FFF0B8'/%3E%3Cstop offset='.35' stop-color='%23C9A040'/%3E%3Cstop offset='.6' stop-color='%234A3510'/%3E%3Cstop offset='1' stop-color='%23A88430'/%3E%3C/linearGradient%3E%3CradialGradient id='g' cx='.5' cy='.62' r='.6'%3E%3Cstop offset='0' stop-color='%23FFF6D0'/%3E%3Cstop offset='.35' stop-color='%23FFC866'/%3E%3Cstop offset='1' stop-color='%23B8641E'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='5' r='3.4' fill='none' stroke='%233A2410' stroke-width='2'/%3E%3Cpath d='M11 18 20 9l9 9z' fill='url(%23b)'/%3E%3Crect x='9' y='17' width='22' height='4' rx='1' fill='url(%23b)'/%3E%3Cpath d='M10.5 21h19l1.5 24h-22z' fill='url(%23g)'/%3E%3Cpath d='M20 30c4 4 3 9 0 11-3-2-4-7 0-11z' fill='%23FFFBEA'/%3E%3Cpath d='M14.5 21v24M25.5 21v24' stroke='%233A2410' stroke-width='1.6'/%3E%3Cpath d='M12 24h2' stroke='%23FFF6D8' stroke-width='1' stroke-opacity='.7'/%3E%3Crect x='8' y='44' width='24' height='5' rx='1.4' fill='url(%23b)'/%3E%3Cpath d='M13 49h14l-3 5h-8z' fill='%234A3510'/%3E%3C/svg%3E") center/contain no-repeat;
  transform-origin:50% 4%;animation:pf-swing 4.2s ease-in-out infinite alternate}
.stern .hang::before{content:"";position:absolute;left:-90%;right:-90%;top:-30%;bottom:-40%;background:radial-gradient(closest-side at 50% 58%,rgba(255,214,140,.45),rgba(255,214,140,0));z-index:-1}
.stern .hang.l{left:calc(var(--cell)*-.36)}.stern .hang.r{right:calc(var(--cell)*-.36);animation-delay:-2.1s}
.stern .rope{position:absolute;inset:calc(var(--cell)*.08);border-radius:10px 10px 20px 20px;border:2px solid #B88E3A;
  box-shadow:inset 1px 1px 0 rgba(255,240,184,.45),inset -1px -1px 0 rgba(58,40,10,.55),0 1px 0 rgba(255,226,180,.18),0 -1px 0 rgba(10,4,0,.4)}
body.fs .stern .hang::before{background:radial-gradient(closest-side at 50% 58%,rgba(255,214,140,.7),rgba(255,214,140,0))}
.board{position:relative;z-index:1}
body[data-variant="clean"] .stern{background:linear-gradient(158deg,#74431F,#3E2210);box-shadow:0 14px 30px rgba(26,13,4,.35)}
body[data-variant="clean"] .stern .rail,body[data-variant="clean"] .stern .win,body[data-variant="clean"] .stern .hang,body[data-variant="clean"] .stern .rope{display:none}

/* ---- the reel window: parchment set into the stern — recessed (the lamp above throws a shadow into the niche, a light
   lip at the bottom), a faint wind rose under the symbols */
.reels-board .window{box-shadow:inset 0 14px 16px -10px rgba(40,20,6,.5),inset 0 0 18px rgba(58,36,18,.28),inset 0 -1px 0 rgba(255,246,222,.7),0 0 0 2px #2A1606,0 0 0 3.5px #B88E3A,0 0 0 4.5px #4A3510}
.reels-board .window::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%231F3A4D'%3E%3Ccircle cx='50' cy='50' r='34'/%3E%3Ccircle cx='50' cy='50' r='28' stroke-dasharray='1.5 3'/%3E%3Cpath d='M50 8l5 37 37 5-37 5-5 37-5-37-37-5 37-5z'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
/* win: a gilt frame with lamp light inside; the other symbols step back with opacity (no filter) */
.reels-board .cell.win::after{border-color:#B8862E;box-shadow:0 0 14px rgba(226,176,78,.55),inset 0 0 14px rgba(255,214,140,.4)}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
/* line markers: oak plates in the frame's colour with parchment numbers; the line's colour only as the 3 px bar */
.reels-board .peg{border-color:rgba(10,4,0,.5)}
.reels-board .peg.on,.reels-board .peg:focus-visible{color:#FFF8E6}
.reels-board .peg:focus-visible{outline-color:var(--brass-hi)}
/* the demo tag and the autoplay count: parchment on navy (the accent is decoration only, never under text) */
.demo,.auto span{background:var(--ink-navy);color:var(--parch-hi)}
/* panel subheads in the chart's navy ink: the shell's lighter primary-hi falls under 3:1 on the parchment */
.panel h3{color:var(--ink-navy)}
/* paytable cards and line diagrams: lighter vellum on the parchment panel (the shell's dark wash reads as dirt here) */
.ptc,.mini{background:rgba(255,250,236,.5);border-color:rgba(58,36,18,.24)}
.mini .g i{background:rgba(31,58,77,.12)}
/* the overlays (feature intro / summary, big wins): a denser parchment veil at the centre, so their text never sits on
   the reels' art at under 4.5:1; a little lamp light behind the title */
.overlay{background:radial-gradient(46% 34% at 50% 44%,var(--veil-light),transparent),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--bg) 90%,transparent),color-mix(in srgb,var(--bg) 92%,#000) 75%)}
.ovcard h2{font-weight:400;letter-spacing:.01em;text-shadow:0 2px 0 rgba(255,246,222,.6)}
.ovcard p{color:var(--ink)}
/* coins in the hold: lamp light behind the gold (static); a collected coin brightens it — no filter on the cells */
.hold-board .cell.coin .sym::before,.hold-board .lcell .sym.coin::before{content:"";position:absolute;inset:-4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,140,.38),rgba(255,214,140,0));transition:opacity var(--t-base) var(--ease-std)}
.hold-board .lcell .sym.coin::before{background:radial-gradient(closest-side,rgba(255,214,140,.5),rgba(255,214,140,0))}
.hold-board .lcell.collect .sym{filter:none}
.hold-board .lcell.collect .sym.coin::before{background:radial-gradient(closest-side,rgba(255,236,180,.95),rgba(255,214,140,0))}
.hold-board .lcell{box-shadow:inset 0 0 0 .5px var(--lock-cell)}
/* the feature bar: three lanterns over the reels */
.fsbar{background:linear-gradient(180deg,var(--parch-hi),var(--parch));border-color:rgba(58,36,18,.55);color:var(--ink);box-shadow:0 4px 10px rgba(26,13,4,.3)}
.fsbar b{color:var(--ink-navy)}
.fsbar .lanterns{display:flex;gap:6px;align-items:center}.fsbar .lanterns .lit{margin-left:4px}
.fsbar .lantern{width:22px;height:32px;color:#3A2412}
.fsbar .lantern .flame{fill:#9A8A70;opacity:.35;transition:opacity var(--t-base) var(--ease-std)}
.fsbar .lantern.on .flame{fill:#E2702A;opacity:1}
.fsbar .lantern.on{--lantern-glass:rgba(255,214,140,.75);filter:drop-shadow(0 0 5px rgba(255,170,60,.75))}
.fsbar .lantern.relit{animation:pf-relight .6s var(--ease-out)}.fsbar .lantern.out .flame{animation:pf-snuff .5s var(--ease-in)}
@keyframes pf-relight{0%{transform:scale(1.3)}100%{transform:none}}
@keyframes pf-snuff{0%{opacity:1}100%{opacity:.35}}
/* the captain's log: an open book as the bottom bar */
.hud{border:1.5px solid #5C3315;box-shadow:inset 0 1px 0 rgba(255,250,236,.7),0 8px 20px rgba(26,13,4,.32)}
.meter span{color:var(--muted)}.meter b{color:var(--ink)}.meter.win b{color:var(--ink-navy)}
.pm{background:var(--parch-hi);color:var(--ink-navy);border:2px solid var(--ink-navy)}
.auto{background:var(--parch-hi);color:var(--ink-navy);border:2px solid var(--ink-navy)}
/* the ship's wheel: a brass bezel on dark oak; the lamp's sheen (::after) stays put while the wheel turns a quarter */
.spin{box-shadow:0 0 0 3px #C9A040,0 0 0 4.5px #4A3510,0 10px 20px rgba(26,13,4,.45)}
.spin::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,240,210,.3),rgba(255,240,210,0) 46%),radial-gradient(circle at 74% 82%,rgba(10,4,0,.32),rgba(10,4,0,0) 52%);box-shadow:inset 2px 2px 1px rgba(255,220,170,.25),inset -2px -3px 2px rgba(0,0,0,.35)}
.spin svg{width:74%;height:74%;transition:transform .55s cubic-bezier(.3,1.25,.5,1)}
.spin.kick svg{transform:translate(-50%,-50%) rotate(90deg)}
.message{color:var(--ink)}.message b{color:var(--ink-navy)}
/* the message sits under the reels on the stern (which, positioned, would paint over it): it stands above the stern,
   on a parchment label that keeps its dark ink readable on the wood (≥ 4.5:1) */
.message{position:relative;z-index:1}
.message span+b.num{margin-left:.3em}
.message:not(:empty){padding:1px 12px;border-radius:4px;background:linear-gradient(180deg,var(--parch-hi),var(--parch));box-shadow:inset 0 0 0 1px rgba(58,36,18,.55),0 1px 3px rgba(26,13,4,.4)}
.side .tablet{min-height:44px;background:linear-gradient(180deg,var(--parch-hi),var(--parch));border:1.5px solid color-mix(in srgb,var(--ink-navy) 70%,transparent);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,250,236,.7),0 3px 8px rgba(26,13,4,.25)}
/* no buying in the respins: the panel steps out (its place is kept, so nothing moves) rather than sit half-transparent
   on the dark sea */
body.fs .side .tablet{visibility:hidden}
/* the spyglass iris into and out of the respins: a closing and opening lens with a brass ring (no flash) */
.iris{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%,transparent 0,transparent var(--r,0%),#3A2808 calc(var(--r,0%) + .3%),#E8C468 calc(var(--r,0%) + 1%),#8A6418 calc(var(--r,0%) + 1.9%),#0E2030 calc(var(--r,0%) + 2.8%))}
@property --r{syntax:'<percentage>';inherits:false;initial-value:0%}
.iris.close{opacity:1;animation:pf-iris-in .45s var(--ease-in) forwards}
.iris.open{opacity:1;animation:pf-iris-out .45s var(--ease-out) forwards}
@keyframes pf-iris-in{from{--r:80%}to{--r:0%}}
@keyframes pf-iris-out{from{--r:0%}to{--r:80%}}
.stern.tight .hang{visibility:hidden;animation:none}.stern.crowded .win{display:none}
body.still .stern .hang,body.still .scene .cabin .swing,body.still .fsbar .lantern,body.still .fsbar .lantern .flame{animation:none}
@media (prefers-reduced-motion:reduce){.stern .hang,.scene .cabin .swing,.iris,.fsbar .lantern,.fsbar .lantern .flame{animation:none!important}.iris{opacity:0!important}}
@media (max-width:400px){.frame{padding:calc(var(--cell)*.12)}.stern .win,.stern .hang{display:none}.fsbar{gap:10px;padding:4px 10px;font-size:13px}.fsbar .cannons{display:none}
  /* keep the −/+ bet keys at the shell's size on small phones: a tighter per-line sub-label stops the bet meter from squeezing them */
  #mBetSub{font-size:10.5px;line-height:1.1;display:block}.pm{flex-shrink:0}}