/* Glasshouse Bloom skin on the shared game shell (light theme): a hand-coloured botanical plate. A Victorian glasshouse
   at dawn (or a potting bench under a sash window), lit from the top-left by the low sun through the glass; a Wardian
   case round the reels (its glass roof catching that light is the one bold thing on the page), sage panes a value below
   the parchment so the petals read on them, a glass cloche as the spin button and a parchment plant label as the HUD.
   The theme tokens (--panel, --ink, --muted, --primary, --accent-ink, --glass, --pane, --iron, the scene colours, the
   marker plates) come from skin.js themeMap; iron, brass, glass and parchment are materials. Every text sits on a
   panel whose contrast skin.js guarantees. Animations move transform / opacity only; no filter on the cells. */
:root{
  --panel:#F9F7F1; --panel-hi:#FDFCFA; --glass:#E6EEE7; --pane:#C5D6CB; --ink:#1C2A21; --muted:#4F5A51; --accent-ink:#A8326A; --wash:#D94F8A;
  --btn-face:#2D6B4D; --root-ring:#5A4A2C; --sky-top:#F8EADB; --sky-low:#EDEFE3; --iron:#27543E; --leaf:#7DA088; --wood:#A07A55; --frond:#1E4431;
  --brass:#D9A845; --brass-hi:#F6DB8E; --brass-lo:#8A5E1A;
  --peg-bg:#416955; --peg-ink:#EEF2EA;
  --display:"Italiana",Georgia,serif; --ui:"Atkinson Hyperlegible",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--iron) 32%,transparent); --radius:12px; --radius-sm:8px;
  --panel-bg:linear-gradient(180deg,var(--panel-hi),var(--panel)); --panel-border:color-mix(in srgb,var(--iron) 38%,transparent);
  --hud-bg:var(--panel-hi);
  --ibtn-bg:var(--panel-hi); --ibtn-ink:var(--primary);
  /* the cloche: green glass lit from the top-left — a small sharp highlight, one curved reflection along the dome,
     the core shadow low on the right */
  --btn-bg:radial-gradient(30% 22% at 32% 22%,rgba(255,255,255,.66),rgba(255,255,255,0) 72%),
    radial-gradient(120% 96% at 72% 64%,transparent 55%,rgba(255,255,255,.24) 60%,transparent 66%),
    radial-gradient(70% 60% at 76% 94%,color-mix(in srgb,var(--btn-face) 52%,#000),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--btn-face) 76%,#fff),var(--btn-face) 52%,color-mix(in srgb,var(--btn-face) 74%,#000));
  /* the reel window: sage panes, lighter at the top where the light comes in, a few beads of condensation */
  --window-bg:radial-gradient(circle at 30% 30%,rgba(255,255,255,.5) 0 1.3px,color-mix(in srgb,var(--iron) 10%,transparent) 1.9px,transparent 2.5px) 0 0/61px 67px,
    linear-gradient(180deg,rgba(255,255,255,.34),transparent 28%,transparent 80%,color-mix(in srgb,var(--iron) 8%,transparent)),var(--pane);
  --window-radius:2px; --reel-sep:transparent; --win-glow:var(--wash); --win-radius:8px; --focus:var(--primary); --spin-blur:1px;
  --root-held:color-mix(in srgb,var(--pane) 55%,#fff); --can-hit:var(--accent-ink);
  --spin-ring:transparent; /* the dome is not round: the busy state dims the bell instead (below) */
  --veil-light:color-mix(in srgb,var(--wash) 16%,transparent);
  color-scheme:light;
}
body{background:var(--bg)}

/* scene, far to near: dawn sky (the sun low at the top-left), the glasshouse ribs in the haze, shelves of orchids, the
   light behind the case, palm fronds in shadow in the lower corners, then the plate's engraved corners and its grain.
   Silhouettes are masks from skin.js. Only the rain moves (transform) and fades (opacity). */
.scene .sky{background:radial-gradient(60% 52% at 12% 0%,rgba(255,226,186,.85),rgba(255,226,186,0) 70%),linear-gradient(170deg,var(--sky-top) 0%,color-mix(in srgb,var(--sky-low) 70%,var(--sky-top)) 45%,var(--sky-low) 80%)}
.scene .house,.scene .shelves,.scene .bench{-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 .6s}
.scene .house{background:linear-gradient(180deg,color-mix(in srgb,var(--iron) 70%,var(--sky-top)),var(--iron));opacity:.16;-webkit-mask-image:var(--gh-mask);mask-image:var(--gh-mask)}
.scene .shelves{background:linear-gradient(180deg,color-mix(in srgb,var(--leaf) 80%,var(--sky-top)),color-mix(in srgb,var(--leaf) 70%,var(--iron)));opacity:.46;-webkit-mask-image:var(--shelf-mask);mask-image:var(--shelf-mask)}
.scene .bench{background:linear-gradient(180deg,color-mix(in srgb,var(--wood) 80%,var(--sky-top)),color-mix(in srgb,var(--wood) 75%,var(--iron)));opacity:0;-webkit-mask-image:var(--bench-mask);mask-image:var(--bench-mask)}
body.bg-potting-bench .scene .bench{opacity:.5}
body.bg-potting-bench .scene .shelves{opacity:0}
body.bg-potting-bench .scene .house{opacity:.08}
/* the light behind the case, and a softer one behind the title (the ribs fade there, so the title reads on them) */
.scene .glow{background:radial-gradient(34% 64px at 50% 34px,rgba(255,251,240,.62),rgba(255,251,240,0) 100%),radial-gradient(44% 48% at 50% 46%,rgba(255,251,240,.72),rgba(255,251,240,0) 72%)}
.scene .fronds{background:linear-gradient(180deg,color-mix(in srgb,var(--frond) 72%,var(--sky-low)),var(--frond) 55%);opacity:.86;
  -webkit-mask-image:var(--frond-l),var(--frond-r);mask-image:var(--frond-l),var(--frond-r);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:left bottom,right bottom;mask-position:left bottom,right bottom;-webkit-mask-size:min(30vw,420px) auto,min(26vw,360px) auto;mask-size:min(30vw,420px) auto,min(26vw,360px) auto}
/* rain on the glass in grey light: a grey veil and two sheets of fine streaks running down */
.scene .rain{opacity:0;transition:opacity .8s;overflow:hidden;background:linear-gradient(180deg,rgba(104,122,134,.34),rgba(140,154,160,.24))}
.scene .rain i{position:absolute;left:0;right:0;top:-50%;height:150%;display:block;background:repeating-linear-gradient(100deg,transparent 0 14px,rgba(74,100,116,.3) 14px 15.5px,transparent 15.5px 31px);animation:gb-rain 1.6s linear infinite}
.scene .rain i+i{background:repeating-linear-gradient(98deg,transparent 0 23px,rgba(74,100,116,.22) 23px 24px,transparent 24px 47px);animation-duration:2.4s}
body.fs .scene .rain{opacity:1}
/* the engraving shades the plate's corners with hatching (a vignette drawn the engraver's way), over a soft darkening */
.scene .etch{background:repeating-linear-gradient(115deg,color-mix(in srgb,var(--iron) 16%,transparent) 0 1px,transparent 1px 5px),
  radial-gradient(ellipse 78% 72% at 50% 46%,transparent 56%,color-mix(in srgb,var(--iron) 26%,transparent) 100%);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 46%,transparent 48%,#000 100%);mask-image:radial-gradient(ellipse 78% 72% at 50% 46%,transparent 48%,#000 100%)}
.scene .grain{background:var(--grain) 0 0/160px 160px;opacity:.07;mix-blend-mode:overlay}
@keyframes gb-rain{from{transform:translateY(0)}to{transform:translateY(33.33%)}}

/* no screen flash and no shake: skin.js makes SCR.flash / SCR.sky / SCR.shake no-ops; these two rules are the fallback */
.flash{display:none!important}
#game{transform:none!important}

/* the title: an engraved plate caption, no box — the letters pressed into the paper (a pale lip under each stroke)
   and a brass hairline beneath, centred under the title */
.logo{position:relative}
.logo h1{font-weight:400;letter-spacing:.06em;color:color-mix(in srgb,var(--primary) 80%,var(--ink));text-shadow:0 1px 0 color-mix(in srgb,var(--panel-hi) 85%,transparent)}
.logo::after{content:"";position:absolute;left:50%;bottom:-2px;width:min(52%,230px);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brass-lo) 75%,transparent) 28%,color-mix(in srgb,var(--brass-lo) 75%,transparent) 72%,transparent)}
.ibtn,.pm,.auto{background:var(--panel-hi);color:var(--primary);border-color:color-mix(in srgb,var(--iron) 38%,transparent)}
.ibtn:hover,.pm:hover:not(:disabled),.auto:hover{border-color:var(--primary)}
.demo,.auto span{background:var(--accent-ink);color:var(--panel-hi)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 3px color-mix(in srgb,var(--wash) 45%,transparent)}
.screen{background:var(--bg)}.screen h2{color:var(--primary);font-weight:400}
.spinner{border-color:color-mix(in srgb,var(--primary) 20%,transparent);border-top-color:var(--primary)}
.btn{font-family:var(--ui);font-weight:700;box-shadow:0 6px 16px rgba(30,40,20,.22)}
.btn.ghost{background:var(--panel-hi);color:var(--primary)}
.toast{background:var(--panel-hi);color:var(--ink)}

/* the Wardian case: a gabled glass roof on iron ribs with a brass finial, iron posts and a plinth with brass feet,
   every part lit from the top-left (light edge up-left, dark edge down-right). The frame is its own stacking context,
   so the board and the message stay on top. */
.frame{isolation:isolate;padding:calc(min(var(--cell)*.6,70px) + 8px) min(calc(var(--cell)*.14),16px) calc(min(var(--cell)*.18,20px) + 4px)}
.wardian{position:absolute;inset:0;z-index:-1;pointer-events:none}
.wardian i{position:absolute;display:block}
.wardian .roof{left:0;right:0;top:4px;height:calc(min(var(--cell)*.6,70px) + 8px);clip-path:polygon(50% 0,100% 100%,0 100%);
  background:linear-gradient(100deg,color-mix(in srgb,var(--iron) 66%,#fff),var(--iron) 48%,color-mix(in srgb,var(--iron) 78%,#000))}
.wardian .roof::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 7px,calc(100% - 9px) calc(100% - 3px),9px calc(100% - 3px));
  background:linear-gradient(116deg,transparent 30%,rgba(255,255,255,.62) 35%,rgba(255,255,255,0) 41%),
    repeating-linear-gradient(90deg,transparent 0 calc(var(--cell)*.5 - 1.5px),color-mix(in srgb,var(--iron) 72%,transparent) calc(var(--cell)*.5 - 1.5px) calc(var(--cell)*.5)),
    linear-gradient(100deg,rgba(255,255,255,.94),color-mix(in srgb,var(--pane) 70%,#fff) 52%,color-mix(in srgb,var(--pane) 82%,var(--iron)))}
.wardian .finial{left:50%;top:-8px;width:14px;height:18px;transform:translateX(-50%);border-radius:50% 50% 40% 40%;
  background:radial-gradient(circle at 36% 30%,#FFF6D6 0 12%,var(--brass-hi) 22%,var(--brass) 48%,var(--brass-lo) 76%,#4A3410);box-shadow:1px 2px 2px rgba(30,30,10,.35)}
.wardian .plinth{left:-4px;right:-4px;bottom:0;height:calc(min(var(--cell)*.18,20px) + 4px);border-radius:3px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--iron) 72%,#fff),var(--iron) 40%,color-mix(in srgb,var(--iron) 68%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.22),0 16px 28px -8px rgba(24,36,26,.4)}
.wardian .plinth::before,.wardian .plinth::after{content:"";position:absolute;bottom:-6px;width:18px;height:8px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,var(--brass-hi),var(--brass) 40%,var(--brass-lo))}
.wardian .plinth::before{left:10px}.wardian .plinth::after{right:10px}
/* the case's iron rim round the reels (the line markers sit on it); the window is set into it, so the light from above
   casts a soft shadow into the top of the panes and leaves a pale lip at the bottom; thin glazing bars between reels */
#board.reels-board{padding:5px;border-radius:3px;background:linear-gradient(160deg,color-mix(in srgb,var(--iron) 80%,#fff),var(--iron) 36%,color-mix(in srgb,var(--iron) 76%,#000));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(0,0,0,.32),0 18px 34px -10px rgba(24,36,26,.45)}
.reels-board .window{box-shadow:inset 0 16px 14px -12px rgba(20,36,26,.5),inset 0 0 0 1px rgba(10,24,16,.22),inset 0 -1px 0 rgba(255,255,255,.6)}
.reels-board .reel+.reel{box-shadow:inset 1px 0 0 rgba(255,255,255,.42),inset 2px 0 0 color-mix(in srgb,var(--iron) 28%,transparent)}
/* variant "clean": no case, a thin iron rim */
body[data-variant="clean"] .frame{padding:6px 6px 4px}
body[data-variant="clean"] .wardian{display:none}
body[data-variant="clean"] #board.reels-board{padding:2px}

/* the message: a small parchment label under the reels */
.message{padding:1px 12px;border-radius:3px;background:var(--panel-hi);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),1px 2px 4px rgba(30,40,20,.12)}
.message:empty{background:none;box-shadow:none}
.message b{color:var(--primary)}

/* symbols on the panes: a soft settle when a reel stops (motion "unfurl": ease-out, no bounce), a slow sway for wins
   inside a pane lit from within, the others fall back to .45 */
.reels-board .cell.landed .sym{animation:gb-land .5s cubic-bezier(.16,.84,.3,1)}
.reels-board .cell.win .sym{animation:gb-sway .9s ease-in-out infinite alternate}
.reels-board .cell.win::after{border-color:var(--primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--panel-hi) 70%,transparent),0 0 14px color-mix(in srgb,var(--wash) 40%,transparent),inset 0 0 16px color-mix(in srgb,var(--panel-hi) 60%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.45}
.reels-board .reel.tease{box-shadow:inset 0 0 24px color-mix(in srgb,var(--wash) 55%,transparent)}
/* the line markers: quiet iron plates (--peg-bg / --peg-ink from skin.js), the line's colour as a bar along the bottom */
.reels-board .peg{border-color:rgba(255,255,255,.14);box-shadow:inset 0 -3px 0 var(--pc),inset 0 1px 0 rgba(255,255,255,.1)}
.reels-board .peg.on,.reels-board .peg:focus-visible{color:var(--peg-ink);box-shadow:inset 0 -3px 0 var(--pc),0 0 0 2px var(--panel-hi),0 0 0 4px var(--pc)}
@keyframes gb-land{from{transform:translateY(-6%)}to{transform:none}}
@keyframes gb-sway{from{transform:none}to{transform:scale(1.06) rotate(-2deg)}}

/* the Greenhouse Rain bar: a parchment label over the case */
.fsbar{flex-wrap:wrap;justify-content:center;gap:14px;background:var(--panel-hi);border-color:color-mix(in srgb,var(--iron) 40%,transparent);color:var(--ink)}
.fsbar b{color:var(--primary)}
.fsbar .fs-roots small{margin-right:5px;font-size:13px;font-weight:700;color:var(--muted)}

/* the HUD: a parchment plant label (string hole, a ruled inner border), labels in sentence case */
.hud{position:relative;background:var(--panel-hi);border-color:color-mix(in srgb,var(--iron) 42%,transparent);
  box-shadow:inset 0 0 0 4px var(--panel-hi),inset 0 0 0 5px color-mix(in srgb,var(--iron) 22%,transparent),2px 8px 18px rgba(30,40,20,.16)}
.hud::before{content:"";position:absolute;left:9px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--iron) 50%,transparent);background:var(--bg)}
.meter span{color:var(--muted)}
.meter b{color:var(--ink)}.meter.win b{color:var(--primary)}
.meter small{color:var(--muted)}
/* the spin button: a glass cloche on a brass rim, its contact shadow cast down-right; while the reels turn the bell
   dims (no ring: the dome is not round) */
.spin{border-radius:50% 50% 18% 18%/62% 62% 16% 16%;color:var(--btn-ink);box-shadow:0 4px 0 var(--brass-lo),0 4px 0 1px var(--brass),inset 0 -6px 10px -6px rgba(0,0,0,.3),6px 14px 22px -6px rgba(30,40,20,.34)}
.spin svg{width:46%;height:46%;transition:opacity var(--t-fast,140ms) var(--ease-std,ease)}
.spin.busy svg{opacity:.55}
.spin:disabled{filter:saturate(.45) opacity(.72)}

/* panels: parchment cards; the win and feature cards stand in a pale veil with a faint orchid light behind the title */
.overlay{background:radial-gradient(34% 26% at 50% 40%,color-mix(in srgb,var(--wash) 14%,transparent),transparent 72%),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--panel-hi) 88%,transparent),color-mix(in srgb,var(--bg) 96%,#fff) 75%)}
.ovcard h2{font-weight:400;color:var(--primary)}.ovamt{color:var(--ink)}
.overlay.bigwin.t2 h2{color:var(--accent-ink)}
.overlay .petal{position:absolute;top:-4%;left:var(--x);width:calc(18px*var(--s));height:calc(11px*var(--s));border-radius:70% 0 70% 0;opacity:0;pointer-events:none;
  background:linear-gradient(135deg,transparent 47%,rgba(178,62,118,.32) 50%,transparent 53%),linear-gradient(135deg,#FFF6F8,#F4B2CE 45%,#D97AA6);animation:gb-fall 2.9s var(--d) ease-in forwards}
@keyframes gb-fall{0%{opacity:0;transform:translateY(0) rotate(var(--r))}12%{opacity:.95}100%{opacity:0;transform:translateY(100vh) rotate(calc(var(--r) + 240deg))}}
.sheet{background:rgba(28,42,33,.45)}
.panel h2,.panel h3{font-weight:400}.panel h3{color:var(--primary-hi)}
.ptc{background:color-mix(in srgb,var(--panel-hi) 65%,var(--glass))}
.ptc .symbox,.special .symbox{background:var(--pane);border-radius:4px;box-shadow:inset 0 8px 8px -8px rgba(20,36,26,.4)}
.ptc h4{font-family:var(--ui)}
.mini{background:var(--panel-hi);color:var(--muted)}.mini .g i{background:color-mix(in srgb,var(--iron) 12%,transparent)}
.tog,.chips button{background:var(--panel-hi)}.chips button[aria-pressed="true"]{color:var(--panel-hi)}
table.hist .won{color:var(--primary)}

/* the condensation veil into and out of Greenhouse Rain: mist from the edges, then over the middle (skin.js) */
.mistfx{position:fixed;inset:0;z-index:45;pointer-events:none;display:none}
.mistfx.show{display:block}
.mistfx i{position:absolute;inset:0;display:block;opacity:0}
.mistfx .edge{background:radial-gradient(ellipse 68% 60% at 50% 50%,transparent 28%,color-mix(in srgb,var(--glass) 82%,transparent) 72%,color-mix(in srgb,var(--glass) 96%,transparent))}
.mistfx .full{background:radial-gradient(circle at 24% 32%,rgba(255,255,255,.7) 0 2px,transparent 3px) 0 0/43px 39px,radial-gradient(circle at 64% 70%,rgba(255,255,255,.6) 0 1.5px,transparent 2.5px) 9px 13px/57px 51px,color-mix(in srgb,var(--glass) 92%,transparent)}

/* phones: a thin rim and a low roof (64 px cells at 360 px); the HUD label keeps balance and win on top, the bet in the
   middle and the cloche across the full width, 64 px high, in the thumb zone */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{padding:calc(min(var(--cell)*.34,26px) + 6px) 8px 10px}
  .logo h1{letter-spacing:.03em}
  .logo::after{bottom:-1px}
  .wardian .plinth{height:10px}
  .wardian .plinth::before,.wardian .plinth::after{display:none}
  #board.reels-board{padding:2px}
  .reels-board .window{box-shadow:inset 0 12px 10px -10px rgba(20,36,26,.5),inset 0 0 0 1px rgba(10,24,16,.22),inset 0 -1px 0 rgba(255,255,255,.6)}
  .hud{grid-template-areas:"bal win" "bet bet" "spin spin";padding:8px 12px 10px 22px}
  .hud::before{top:16px;margin-top:0}
  .betctl{justify-self:center}
  .spinbox{justify-self:stretch;width:100%}
  .spin,.hud .spin{--s:64px;flex:1 1 auto;width:auto;height:64px;border-radius:40px 40px 14px 14px/34px 34px 14px 14px}
  .spin svg{width:auto;height:60%}
  body.lefty .hud{grid-template-areas:"win bal" "bet bet" "spin spin"}
  body.lefty .spinbox{justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .reels-board .cell.win .sym{animation:none}
  .spin svg{transition:none}
}