/* Sun & Moon Souk skin on the shared game shell: glazed zellige and pierced brass at a night market. A fountain
   courtyard under an arcade of plaster horseshoe arches with hanging lanterns (or a night market of awnings and lantern
   strings), the Dawn Merge over a medina's flat roofs at dawn; the Moon board (cool glazed tile) under a plaster arch,
   the Sun board (warm glazed tile) over its reflection, the divider between them with a brass beam that lights only on a
   Mirror Win, a plaster HUD band split by a brass rosette, a tall pierced lantern for the spin button and the arch-merge
   veil of the Dawn Merge. Theme tokens (--glaze, --night, --brass, --ink, --muted, --plaster*, --plate*, --name-*,
   --sky-*, --wall*, --floor, --glow, --dawn-*, --roof, --ridge, --vig, --veil*, --tile-*, --sp-*) come from skin.js
   themeMap: dark presets get light ink on dark plates, the light preset (Saffron Rooftop) dark ink on light plates
   (≥ 4.5:1 either way). The brass (--brass) is decoration and the beam, never body text. Animated: transform, opacity.
   Redesign 2026-10-16 (art bible pages/art-direction.md): one warm key light (the lanterns, top left) and a cool
   moonlit rim (--rim) on the far side; the scene in depth (far medina through the arches → the arcade with carved rims
   lit by its lanterns → the tiled floor), a light behind the boards, a vignette and one static grain; the plaster
   frame bevelled, the glazed windows recessed (shadow from above, a light lip below), quiet tile joints; win cells lit
   by a brass ring, the rest dimmed by opacity (no CSS filter on the cells); HUD labels in sentence case. */
:root{
  --glaze:#2FB39A; --night:#00214C; --brass:#C6821B;
  --ink:#FBF4E4; --muted:#D6CCB8; --plaster:#D3C6AE; --plaster-lo:#9E8E74; --plaster-edge:#00142E;
  --plate:#001430; --plate-edge:#8A6024; --name-bg:#001229; --name-ink:#FBF4E4;
  --sky-top:#001026; --sky-low:#03304F; --wall:#001734; --wall-lo:#000F22; --floor:#073A54; --glow:#E8C27E;
  --dawn-top:#001A3D; --dawn-low:#D78E66; --roof:#000D1E; --ridge:#001634; --vig:rgba(0,0,0,.4);
  --veil:#0A4560; --veil-hi:#6BCAB9;
  --tile-moon:#0D3449; --tile-moon-lo:#061B30; --tile-sun:#36233B; --tile-sun-lo:#1B0F25; --tile-dawn:#26264A; --tile-dawn-lo:#0E1531;
  --sp-hi:#E0B271; --sp:#C6821B; --sp-edge:#000A17; --sp-glow:#FFE7A0;
  /* derived: the lantern's shaded face, the far medina, the moonlit rim */
  --sp-lo:color-mix(in srgb,var(--sp) 52%,var(--sp-edge));
  --far:color-mix(in srgb,var(--sky-low) 62%,var(--wall));
  --rim:#A9C6F2;
  --display:"Aref Ruqaa",Georgia,serif; --ui:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:10px; --radius-sm:7px; --line:color-mix(in srgb,var(--plate-edge) 70%,transparent); --panel-border:var(--plate-edge);
  --hud-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate) 86%,var(--glaze)),var(--plate));
  --ibtn-bg:linear-gradient(180deg,color-mix(in srgb,var(--plate) 80%,var(--glaze)),var(--plate)); --ibtn-ink:var(--ink);
  /* the shell's busy ring is round: the lantern flickers instead; the card light is the lanterns' */
  --spin-ring:transparent; --veil-light:color-mix(in srgb,var(--glow) 18%,transparent);
  /* the two-board board (shared twin.css): glazed tile windows (one tile per cell, quiet joints, a glaze sheen and the
     light of each board's sky: moonlight from above, lantern light from below), a plaster surround, the divider */
  --joints:linear-gradient(90deg,rgba(0,0,0,.2) 0 1px,color-mix(in srgb,#FFFFFF 5%,transparent) 1px 2px,transparent 2px) 0 0/var(--cell) 100%,linear-gradient(180deg,rgba(0,0,0,.2) 0 1px,color-mix(in srgb,#FFFFFF 5%,transparent) 1px 2px,transparent 2px) 0 0/100% var(--cell);
  --sheen:linear-gradient(155deg,color-mix(in srgb,#FFFFFF 6%,transparent) 0 22%,transparent 46%);
  --tw-upper-bg:var(--joints),var(--sheen),radial-gradient(120% 90% at 32% 0,color-mix(in srgb,#9FC8FF 16%,transparent),transparent 62%),linear-gradient(180deg,var(--tile-moon),var(--tile-moon-lo));
  --tw-lower-bg:var(--joints),var(--sheen),radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,#FFC97A 17%,transparent),transparent 62%),linear-gradient(0deg,var(--tile-sun),var(--tile-sun-lo));
  --tw-tall-bg:var(--joints),var(--sheen),radial-gradient(110% 60% at 50% 100%,color-mix(in srgb,#FFB38A 16%,transparent),transparent 62%),linear-gradient(180deg,var(--tile-dawn-lo),var(--tile-dawn));
  --window-radius:5px; --reel-sep:transparent;
  --tw-frame:radial-gradient(130% 80% at 18% 0,color-mix(in srgb,#FFF8E8 30%,transparent),transparent 60%),linear-gradient(180deg,var(--plaster),var(--plaster-lo));
  --tw-name-bg:var(--name-bg); --tw-name-ink:var(--name-ink);
  --tw-div-bg:linear-gradient(180deg,var(--plaster-lo),var(--plaster) 40%,var(--plaster-lo));
  --tw-beam:linear-gradient(90deg,transparent,var(--brass) 14%,#FFF1C8 50%,var(--brass) 86%,transparent);
  --tw-x-bg:#FFF1C8; --tw-x-ink:#24160A; --tw-win-ring:#FFF1C8; --win-glow:color-mix(in srgb,#FFD98A 75%,transparent); --tease-glow:#FFD98A;
  --focus:#FFF1C8;
  color-scheme:var(--scheme,dark);
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: the fountain courtyard (default), the night market, the medina at dawn (the Dawn Merge, or chosen);
   silhouettes are masks from skin.js. Depth: the far medina through the arches (light, low contrast) → the arcade wall
   and its carved rims lit by the lanterns → the tiled floor (nearest). Only the lantern light breathes (slowly). */
.scene{background:var(--sky-top)}
/* the scene shown fades in at once; a scene put away fades out, then stops being painted (visibility, after the fade) */
.scene .court,.scene .market,.scene .dawn{transition:opacity 1.2s ease,visibility 0s}
.scene .court>i,.scene .market>i,.scene .dawn>i:not(.sun){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}
.scene .court{background:radial-gradient(48% 34% at 84% 6%,color-mix(in srgb,#CFE0FF 12%,transparent),transparent 72%),linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 72%)}
.scene .court .far{background:linear-gradient(180deg,var(--far),color-mix(in srgb,var(--far) 70%,var(--wall-lo)));-webkit-mask-image:var(--sm-far);mask-image:var(--sm-far)}
.scene .court .farlit{background:color-mix(in srgb,var(--glow) 45%,transparent);-webkit-mask-image:var(--sm-farlit);mask-image:var(--sm-farlit)}
.scene .court .floor{-webkit-mask:none;mask:none;top:78%;
  background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--glaze) 10%,transparent) 0 2px,transparent 2px 22px),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--brass) 9%,transparent) 0 2px,transparent 2px 22px),linear-gradient(180deg,var(--floor),var(--wall-lo))}
.scene .court .arcade{background:linear-gradient(180deg,var(--wall),var(--wall-lo));-webkit-mask-image:var(--sm-arcade);mask-image:var(--sm-arcade)}
.scene .court .archrim{background:linear-gradient(180deg,color-mix(in srgb,var(--plaster) 26%,var(--wall)) 40%,color-mix(in srgb,var(--plaster) 8%,var(--wall-lo)) 80%);-webkit-mask-image:var(--sm-archrim);mask-image:var(--sm-archrim)}
.scene .court .parapet{background:var(--wall);-webkit-mask-image:var(--sm-parapet);mask-image:var(--sm-parapet)}
.scene .court .lamps{background:var(--glow);opacity:.5;-webkit-mask-image:var(--sm-lamps);mask-image:var(--sm-lamps);animation:sm-breathe 6s ease-in-out infinite alternate}
.scene .court .lampbody{background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 35%,var(--wall)) 0 44%,color-mix(in srgb,var(--glow) 70%,#FFF1C8) 47%,var(--glow) 56%);-webkit-mask-image:var(--sm-lampbody);mask-image:var(--sm-lampbody)}
.scene .court .fountain{background:linear-gradient(180deg,color-mix(in srgb,var(--glaze) 26%,var(--wall)),var(--wall-lo));-webkit-mask-image:var(--sm-fountain);mask-image:var(--sm-fountain)}
.scene .market{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s;background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-low) 80%)}
.scene .market .strings{background:var(--glow);opacity:.9;-webkit-mask-image:var(--sm-strings);mask-image:var(--sm-strings);-webkit-mask-position:center top;mask-position:center top;animation:sm-glow 5s ease-in-out infinite alternate}
.scene .market .stalls{background:linear-gradient(180deg,color-mix(in srgb,var(--brass) 26%,var(--wall)),var(--wall-lo) 40%);-webkit-mask-image:var(--sm-stalls);mask-image:var(--sm-stalls)}
.scene .dawn{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s;background:linear-gradient(180deg,var(--dawn-top) 0,color-mix(in srgb,var(--dawn-top) 45%,var(--dawn-low)) 55%,var(--dawn-low) 82%)}
.scene .dawn .sun{position:absolute;left:50%;top:64%;width:30vmin;height:30vmin;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,#FFE7A0 55%,transparent) 0 30%,color-mix(in srgb,#FFE7A0 16%,transparent) 55%,transparent 70%)}
.scene .dawn .ridge{background:var(--ridge);-webkit-mask-image:var(--sm-ridge);mask-image:var(--sm-ridge)}
.scene .dawn .roofs{background:linear-gradient(180deg,color-mix(in srgb,var(--roof) 82%,var(--dawn-low)),var(--roof) 30%);-webkit-mask-image:var(--sm-roofs);mask-image:var(--sm-roofs)}
/* the lanterns' light behind the boards (separates them from the wall), then the vignette; one static grain on top */
.scene .vignette{background:radial-gradient(36% 44% at 50% 44%,color-mix(in srgb,var(--glow) 15%,transparent),transparent 72%),radial-gradient(ellipse at 50% 46%,transparent 46%,var(--vig) 100%)}
.scene .grain{background:var(--sm-grain) 0 0/160px 160px;opacity:.07;pointer-events:none}
body.bg-night-market .scene .market,body.bg-medina-rooftop-dawn .scene .dawn{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
body.bg-night-market .scene .court,body.bg-medina-rooftop-dawn .scene .court{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
/* the Dawn Merge plays at dawn over the roofs, whatever the base background */
body.fs .scene .dawn{opacity:1;visibility:visible;transition:opacity 1.2s ease,visibility 0s}
body.fs .scene .court,body.fs .scene .market{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s linear 1.2s}
/* portrait screens: the band between the boards and the Buy bar would show a slice of the middle arch (its straight
   jambs, one lit window, the fountain stem). The courtyard floor comes forward instead, from just under the boards, with
   a soft edge and the lanterns' light pooled on it; the far windows and the fountain are left out */
@media (max-aspect-ratio:4/5){
  .scene .court{isolation:isolate}
  .scene .court .floor{top:61%;z-index:1;-webkit-mask:linear-gradient(180deg,transparent,#000 44px);mask:linear-gradient(180deg,transparent,#000 44px);
    background:radial-gradient(70% 42% at 50% 6%,color-mix(in srgb,var(--glow) 13%,transparent),transparent 72%),repeating-linear-gradient(45deg,color-mix(in srgb,var(--glaze) 6%,transparent) 0 2px,transparent 2px 40px),repeating-linear-gradient(-45deg,color-mix(in srgb,var(--brass) 5%,transparent) 0 2px,transparent 2px 40px),linear-gradient(180deg,var(--floor),var(--wall-lo))}
  .scene .court .farlit,.scene .court .fountain{display:none}
}
/* a scene put away keeps no animation running */
body.fs .scene .court .lamps,body.bg-night-market .scene .court .lamps,body.bg-medina-rooftop-dawn .scene .court .lamps,body:not(.bg-night-market) .scene .market .strings,body.fs .scene .market .strings{animation:none}
@keyframes sm-breathe{from{opacity:.38}to{opacity:.6}}
@keyframes sm-glow{from{opacity:.7}to{opacity:.95}}
/* the shell's governed screen flash (retriggers, big-win tiers): a faint lantern glow, never white (peaks ≈ 15 %) */
.flash{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--glow) 22%,transparent),color-mix(in srgb,var(--glaze) 8%,transparent) 45%,transparent 75%)}

/* ---- title and round buttons (the title is centred by the shell: two buttons on each side) */
.logo h1{font-family:var(--display);font-weight:700;letter-spacing:.02em;font-size:clamp(22px,3.5vw,44px);line-height:1.05;color:var(--primary-hi);
  text-shadow:0 2px 0 color-mix(in srgb,var(--plate) 80%,transparent),0 0 18px color-mix(in srgb,var(--glow) 28%,transparent)}
@media (max-width:860px),(max-aspect-ratio:4/5){.logo h1{font-size:clamp(22px,5vw,36px)}}
/* phones: the full name fits between the button groups (Aref Ruqaa runs wide; the shell fits it down to 14 px) */
@media (max-width:400px){.logo h1{font-size:clamp(17px,5.6vw,22px);letter-spacing:0}}
.ibtn{border:1px solid var(--plate-edge);border-radius:50% 50% 8px 8px;box-shadow:0 2px 6px rgba(0,0,0,.35),inset 0 1px 0 color-mix(in srgb,#FFFFFF 10%,transparent)}
.ibtn:hover{border-color:var(--brass)}

/* ---- the frame: plaster horseshoe arches over the Moon board and under the Sun board (variant "arches"); in the Dawn
   Merge the two arches meet round the tall board. "clean": a thin plaster rim. Plaster bevel: a light edge toward the
   lanterns (top left), a dark one away from them, one contact shadow under each board. */
.souk-frame{padding:calc(var(--cell)*.12) 8px 4px;gap:6px}
.twin .tw-b{box-shadow:inset 1.5px 1.5px 0 color-mix(in srgb,#FFFFFF 42%,transparent),inset -1.5px -2px 0 rgba(0,0,0,.3),0 0 0 1px var(--plaster-edge),0 16px 34px rgba(0,0,0,.45)}
/* the window is recessed into the plaster: shadow from above, a light lip below, a dark edge on the left */
.twin .tw-win{box-shadow:inset 0 calc(var(--cell)*.16) calc(var(--cell)*.18) calc(var(--cell)*-.08) rgba(0,0,0,.55),inset 0 -1px 0 color-mix(in srgb,#FFFFFF 18%,transparent),inset 1px 0 0 rgba(0,0,0,.3)}
.twin .tw-b[data-b="0"]{border-radius:calc(var(--cell)*.5) calc(var(--cell)*.5) 4px 4px}
.twin .tw-b[data-b="1"]{border-radius:4px 4px calc(var(--cell)*.5) calc(var(--cell)*.5)}
.twin .tw-b.tall{border-radius:calc(var(--cell)*.5)}
.twin .tw-b[data-b="0"]::before,.twin .tw-b[data-b="1"]::after,.twin .tw-b.tall::before,.twin .tw-b.tall::after,
.twin .tw-b[data-b="0"]::after,.twin .tw-b[data-b="1"]::before{content:"";position:absolute;left:-2%;right:-2%;height:calc(var(--cell)*.42);pointer-events:none}
.twin .tw-b[data-b="0"]::before,.twin .tw-b[data-b="1"]::after,.twin .tw-b.tall::before,.twin .tw-b.tall::after{
  background:linear-gradient(180deg,color-mix(in srgb,#FFF8E8 45%,var(--plaster)),var(--plaster) 30%,var(--plaster-lo));-webkit-mask:var(--sm-crest) 0 0/100% 100% no-repeat;mask:var(--sm-crest) 0 0/100% 100% no-repeat}
/* the crest's brass inlay line (the boards' free pseudo-element; none on the tall board) */
.twin .tw-b[data-b="0"]::after,.twin .tw-b[data-b="1"]::before{background:linear-gradient(90deg,var(--brass),#FFF1C8 30%,var(--brass) 60%,color-mix(in srgb,var(--brass) 60%,#000));-webkit-mask:var(--sm-crestline) 0 0/100% 100% no-repeat;mask:var(--sm-crestline) 0 0/100% 100% no-repeat;opacity:.85}
.twin .tw-b[data-b="0"]::before,.twin .tw-b[data-b="0"]::after,.twin .tw-b.tall::before{top:calc(var(--cell)*-.12)}
.twin .tw-b[data-b="1"]::after,.twin .tw-b[data-b="1"]::before,.twin .tw-b.tall::after{bottom:calc(var(--cell)*-.12);transform:scaleY(-1)}
body[data-variant="clean"] .twin .tw-b::before,body[data-variant="clean"] .twin .tw-b::after{display:none}
body[data-variant="clean"] .twin .tw-b{--tw-frame:color-mix(in srgb,var(--plaster) 18%,transparent);border-radius:6px}
/* the name plaques: enamel set in brass; a silver disc for the Moon, a rayed brass disc for the Sun (shape tells them
   apart, not colour) */
.twin .tw-name{font-family:var(--display);letter-spacing:.03em;background:linear-gradient(180deg,color-mix(in srgb,var(--name-bg) 84%,var(--glaze)),var(--name-bg));
  border:1.5px solid color-mix(in srgb,var(--brass) 75%,#FFF1C8);box-shadow:0 2px 6px rgba(0,0,0,.45),inset 0 1px 0 color-mix(in srgb,#FFFFFF 16%,transparent)}
.twin .tw-b[data-name="moon"] .tw-glyph{background:radial-gradient(circle at 36% 34%,#FFFFFF,#CBD8EA 55%,#7D93B2);box-shadow:inset -2px -2px 0 rgba(0,0,0,.18)}
.twin .tw-b[data-name="sun"] .tw-glyph{border-radius:0;background:radial-gradient(circle,#FFE7A0 0 32%,#E8A33D 33% 44%,transparent 45%),repeating-conic-gradient(#F2C46A 0 12deg,transparent 12deg 30deg);
  -webkit-mask:radial-gradient(circle,#000 0 70%,transparent 71%);mask:radial-gradient(circle,#000 0 70%,transparent 71%)}
/* the divider between the boards: a plaster band with a brass inlay; the beam and "Mirror Win ×2" only when mirrored */
.twin .tw-div{box-shadow:inset 0 1.5px 0 color-mix(in srgb,#FFFFFF 40%,transparent),inset 0 -1.5px 0 rgba(0,0,0,.35)}
.twin .tw-div::before{content:"";position:absolute;left:8%;right:8%;top:50%;height:3px;transform:translateY(-50%);
  background:linear-gradient(180deg,#FFF1C8,var(--brass) 55%,color-mix(in srgb,var(--brass) 55%,#000));opacity:.8}
.twin .tw-div.lit{box-shadow:inset 0 1.5px 0 color-mix(in srgb,#FFFFFF 40%,transparent),0 0 18px color-mix(in srgb,var(--glow) 60%,transparent)}
.twin .tw-x{font-family:var(--ui);font-weight:700;letter-spacing:.04em;border:1.5px solid var(--plate-edge)}
/* wins: the winning tile lit by a brass ring with lantern light inside it; the others dimmed by opacity (no CSS
   filter on the cells); the lines fine and fading in */
/* the symbols take 92 % of the cell (shared default 88 %): with their own padding they fill 76-86 % (art bible §5.4.5) */
.twin .sym{width:92%;height:92%;transition:transform .2s,opacity var(--t-base,220ms) var(--ease-std,ease)}
.twin .cell.win .sym{filter:none}
.twin .cell.dim .sym{filter:none;opacity:.42}
.twin .cell.win::after{inset:4%;border-radius:calc(var(--cell)*.14);border:1.5px solid color-mix(in srgb,#FFF1C8 88%,transparent);
  box-shadow:inset 0 0 calc(var(--cell)*.24) color-mix(in srgb,var(--glow) 42%,transparent),0 0 10px color-mix(in srgb,var(--glow) 40%,transparent);animation:sm-ring .3s var(--ease-out,ease-out) both}
.twin svg.tw-lines polyline{animation:sm-fade .3s var(--ease-out,ease-out) both}
/* the paytable's line diagrams: the light line tints keep a dark edge (the light preset's panel is pale) */
.tw-mini .g i.on{box-shadow:inset 0 0 0 1px rgba(36,22,10,.45)}
.twin svg.tw-lines polyline:nth-child(odd){stroke-width:10px;stroke-opacity:.22}
.twin svg.tw-lines polyline:nth-child(even){stroke-width:3.5px}
@keyframes sm-ring{from{opacity:0;transform:scale(.94)}}
@keyframes sm-fade{from{opacity:0}}
.board,.message{position:relative;z-index:1}
.message{font-family:var(--ui);font-weight:500;letter-spacing:.01em;color:var(--ink);max-width:100%;padding:3px 14px;border-radius:999px;background:color-mix(in srgb,var(--plate) 90%,transparent);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .35em}
.message:empty{background:none}
.message b{color:var(--primary-hi)}

/* ---- the Dawn Merge bar (main.js fsBar): a plaster plaque over the tall board */
.fsbar{gap:14px;padding:5px 16px;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--plate) 84%,var(--glaze)),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);flex-wrap:wrap;justify-content:center;row-gap:2px}
.fsbar .fs-name{font-family:var(--display);font-weight:700;color:var(--primary-hi)}
.fsbar b{color:var(--primary-hi)}
.fsbar .fs-mult{padding:0 .5em;border-radius:999px;background:#FFF1C8;color:#24160A;font-weight:700}

/* ---- HUD "centre-divider": the shell's bar as a plaster-edged band split by a brass rosette at its centre */
.hud{position:relative;border:1.5px solid var(--plate-edge);box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 color-mix(in srgb,#FFFFFF 12%,transparent);border-radius:14px}
.hud::before{content:"";position:absolute;left:50%;top:0;width:26px;height:26px;transform:translate(-50%,-55%);pointer-events:none;background:var(--brass);-webkit-mask:var(--sm-rosette) center/contain no-repeat;mask:var(--sm-rosette) center/contain no-repeat}
.hud::after{content:"";position:absolute;left:50%;top:18%;bottom:18%;width:1.5px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brass) 60%,transparent),transparent);pointer-events:none}
@media (max-width:860px),(max-aspect-ratio:4/5){.hud::after{top:8%;bottom:8%}
  /* phones: the Buy row sits right above the HUD; a little headroom and a smaller, lower rosette keep it clear of Buy */
  .hud{margin-top:10px}.hud::before{width:22px;height:22px;transform:translate(-50%,-50%)}}
/* short landscape: the HUD is a single column, so a centre divider would run through its numbers; the rosette stays */
@media (max-height:540px) and (min-aspect-ratio:3/2){.hud::after{display:none}.hud::before{width:26px;height:26px;transform:translate(-50%,-55%)}}
/* labels in sentence case, quiet (art bible §3.2); values in tabular figures (the shell) */
.meter span{font-family:var(--ui);font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--muted)}
.meter b{font-family:var(--ui);font-weight:700;color:var(--ink)}.meter.win b{color:var(--primary-hi)}
.hud .meter.win.at-zero b{color:var(--muted)}
.meter small{color:var(--muted)}
.demo{background:#FFF1C8;color:#24160A}
.pm,.auto{background:var(--ibtn-bg);border:1px solid var(--plate-edge);color:var(--ink)}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--brass)}
.auto span{background:#FFF1C8;color:#24160A}
/* the tall pierced lantern: drawn by the SVG (skin.js, its own contact shadow), which fills the button; its light
   flickers softly while busy (opacity) */
.spin{width:calc(var(--s)*.84);height:var(--s);border-radius:40% 40% 18% 18%;background:none;box-shadow:none}
.spin svg{width:100%;height:100%}
.spin .ln-light{transition:opacity .2s}
.spin.busy .ln-light{animation:sm-flicker 1.4s ease-in-out infinite alternate}
@keyframes sm-flicker{from{opacity:1}to{opacity:.6}}
.side .tablet{background:var(--hud-bg);border:1.5px solid var(--plate-edge);color:var(--ink);box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 color-mix(in srgb,#FFFFFF 12%,transparent)}
.tablet .th{font-family:var(--display);color:var(--primary-hi)}
.tablet small{color:var(--muted)}
/* wide screens: the buy tablet stands beside the boards as a horseshoe-arched plaque */
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud-side-tablets .side.left{align-items:flex-end}
  .hud-side-tablets .side .tablet{width:min(100%,196px);border-radius:50% 50% 12px 12px/46px 46px 12px 12px;padding:28px 14px 16px;gap:6px}
  .hud-side-tablets .side .tablet .th{font-size:19px;line-height:1.15}
}

/* ---- panels, paytable and overlays */
.panel{color:var(--ink)}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:700;letter-spacing:.02em}
.panel h2,.panel h3{color:var(--primary-hi)}
.panel h4.sub{margin:14px 0 8px;font-size:16px;color:var(--muted)}
.panel .lead{color:var(--muted)}
.panel details.fs-lines{margin-top:14px}
.panel details.fs-lines summary{cursor:pointer;font-weight:700;color:var(--primary-hi);margin-bottom:8px}
.btn{font-family:var(--display);font-weight:700;border-radius:999px}
.ptc{background:color-mix(in srgb,var(--plate) 55%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:8px;background:linear-gradient(180deg,var(--tile-moon),var(--tile-moon-lo));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--plaster) 30%,transparent),inset 0 8px 10px -6px rgba(0,0,0,.5)}
.special .symbox{position:relative;width:96px;height:96px;--cell:96px}
.special p{margin:0 0 6px}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.ladder{border-collapse:collapse;font-size:15px}.ladder td{padding:2px 14px 2px 0}.ladder td:last-child{font-weight:800}
.ovcard h2{color:var(--primary-hi);font-size:clamp(38px,7.4vw,92px);text-wrap:balance;text-shadow:0 0 18px color-mix(in srgb,var(--glow) 35%,transparent)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}

/* ---- the Dawn Merge veil: two leaves of glazed tile close from the arches toward the divider while a brass rosette
   turns and grows; mid-tone (never white); transform and opacity only */
.soukveil{position:fixed;inset:0;z-index:36;pointer-events:none;display:none}
.soukveil.show{display:block}
.soukveil .leaf{position:absolute;left:0;right:0;height:51%;will-change:transform;background:radial-gradient(70% 90% at 50% 100%,color-mix(in srgb,var(--glow) 16%,transparent),transparent 70%),var(--veil)}
.soukveil .leaf::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--veil-hi) 30%,transparent);-webkit-mask:var(--sm-veiltile) 0 0/64px 64px repeat;mask:var(--sm-veiltile) 0 0/64px 64px repeat}
.soukveil .leaf.t{top:0;border-bottom:3px solid var(--brass);box-shadow:0 2px 0 color-mix(in srgb,#FFF1C8 50%,transparent)}
.soukveil .leaf.t::before{-webkit-mask-position:0 100%;mask-position:0 100%}
.soukveil .leaf.b{bottom:0;border-top:3px solid var(--brass);box-shadow:0 -2px 0 color-mix(in srgb,#000 35%,transparent);background:radial-gradient(70% 90% at 50% 0,color-mix(in srgb,var(--glow) 16%,transparent),transparent 70%),var(--veil)}
.soukveil .rose{position:absolute;left:50%;top:50%;width:min(56vmin,380px);aspect-ratio:1;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity;
  background:linear-gradient(150deg,#FFF1C8,var(--brass) 45%,color-mix(in srgb,var(--brass) 55%,#000));-webkit-mask:var(--sm-rosette) center/contain no-repeat;mask:var(--sm-rosette) center/contain no-repeat}
.soukveil.calm .rose{opacity:.75}

/* ---- big wins: lantern glints and brass bell sparks rise from below and fade */
.souk-glints{position:fixed;inset:0;z-index:39;pointer-events:none;overflow:hidden}
.souk-glints .gl{position:absolute;left:var(--x);bottom:-30px;width:calc(12px*var(--s));height:calc(18px*var(--s));opacity:0;border-radius:45% 45% 30% 30%;
  background:radial-gradient(circle at 50% 60%,#FFF1C8,#F2C46A 45%,color-mix(in srgb,#E8A33D 0%,transparent) 72%);animation:sm-rise 3.2s ease-out var(--d) forwards}
.souk-glints .gl.bell{border-radius:50% 50% 20% 20%;background:radial-gradient(circle at 40% 35%,#FFF6DE,#E8A33D 55%,#7A4A10)}
@keyframes sm-rise{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),-70vh)}}

/* ---- reduced motion: nothing sways or turns; the lantern glows and the busy lantern hold still */
@media (prefers-reduced-motion:reduce){
  .scene .court .lamps,.scene .market .strings,.spin.busy .ln-light{animation:none}
  .twin .cell.win::after,.twin svg.tw-lines polyline{animation:none}
  .souk-glints{display:none}
}
body.still .scene .court .lamps,body.still .scene .market .strings,body.still .spin.busy .ln-light{animation:none}