/* Arena of Laurels skin on the shared game shell: struck bronze in a travertine arena under a canvas velarium, lit by
   one sun from the top left that falls through the velarium's opening onto the sand behind the reels (art direction
   §5.1, §5.5). The sunlit arena (the far wall in haze: three tiers of arches, linen and Tyrian sails overhead, the sand)
   or the ludus courtyard (a colonnade, a training post, a weapon rack); in Champion's Duel the arena at night with
   torches. The reels sit in a recessed sand niche inside a bevelled bronze rim between two masts under a scalloped
   linen awning (variant "velarium"; "clean" keeps the rim); the title is the arena's dedication — a travertine slab
   with incised capitals filled with red-brown paint; the HUD is dark marble tablets; the HP banner of the duel hangs
   over the reels (boards/duel.css draws its structure; its colours are set here); the spin button is a bronze tabula
   ansata; the sand plume carries the way into and out of the duel; torn ribbons fall for big wins. Theme tokens
   (--bronze, --night, --tyr, --ink, --muted, --gold, --plate*, --sand*, --stone*, --arch, --sky*, --canvas*, --nsky*,
   --nstone, --torch, --plume-*, --medal*, --sp-*, --slab*) come from skin.js themeMap: dark presets get light ink on
   dark plates, the light preset (Travertine) dark ink on light plates, every text colour ≥ 4.5:1 on its plate. The
   accent (--tyr) is decoration only, never text. Animated properties: transform and opacity only; the one grain layer
   and every filter are static. */
:root{
  --bronze:#C7A27A; --night:#1C1A2E; --tyr:#8E3AA3;
  --ink:#F7EFE0; --muted:#D6C6AC; --gold:#C7A27A; --plate:#100F1B; --plate-hi:#2A2838; --plate-edge:#726055; --vein:rgba(255,240,215,.06);
  --sand-hi:#5F4A36; --sand-lo:#2E2218; --sand-floor:#83674C; --stone:#6E6064; --stone-lo:#403440; --arch:#130E17;
  --sky-top:#283651; --sky-low:#7D6460; --canvas:#7F6D68; --canvas-b:#4A2A50; --canvas-hi:#B2A08E; --canvas-lo:#53483F;
  --nsky-top:#0E0D17; --nsky-low:#2A2440; --nstone:#151423; --torch:#F0A040; --vig:rgba(0,0,0,.45);
  --plume-a:#7A6352; --plume-b:#5E4B42; --plume-c:#887056;
  --medal:#CBA884; --medal-ink:#1E150C; --medal-edge:#4F4031;
  --sp-hi:#E3D0BC; --sp:#C7A27A; --sp-lo:#776149; --sp-edge:#3C3024; --sp-rim:#EEE3D7; --sp-ink:#2B2219;
  --slab:#BBAD91; --slab-hi:#E2D8C2; --slab-lo:#9C8C70; --slab-edge:#4E3E2A; --slab-ink:#4E1C10;
  --sun:#FFE2A6;
  --display:"Forum","Cormorant SC",Georgia,serif; --ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:5px; --radius-sm:4px; --line:color-mix(in srgb,var(--plate-edge) 80%,transparent); --panel-border:var(--plate-edge);
  --hud-bg:linear-gradient(115deg,transparent 0 28%,var(--vein) 29% 30%,transparent 31% 63%,var(--vein) 64% 65.5%,transparent 66.5%),linear-gradient(180deg,var(--plate-hi),var(--plate));
  --ibtn-bg:linear-gradient(180deg,var(--plate-hi),var(--plate)); --ibtn-ink:var(--gold);
  /* the reels: one even sand niche (no tile per cell); the light falls in from the top, the niche is recessed (skin rule
     on .window), a faint grain of sand */
  --window-bg:radial-gradient(ellipse 70% 55% at 42% 0,color-mix(in srgb,var(--sun) 9%,transparent),transparent 70%),
    linear-gradient(180deg,var(--sand-hi),color-mix(in srgb,var(--sand-hi) 55%,var(--sand-lo)) 55%,var(--sand-lo));
  --window-radius:3px; --reel-sep:rgba(0,0,0,.26); --win-glow:color-mix(in srgb,var(--gold) 70%,transparent); --spin-blur:1.2px;
  --spin-ring:transparent; /* the tabula's own double arrow turns while busy */
  --win-radius:8px;
  --ov-plate:color-mix(in srgb,var(--plate) 84%,transparent); --ov-plate-line:color-mix(in srgb,var(--bronze) 50%,transparent); /* the amount on the cards: a dark marble plate with a bronze line */
  /* the duel board (boards/duel.css) */
  --dl-x-bg:#21160B; --dl-x-ink:#FFF0D2; --dl-x-edge:var(--bronze); --dl-dmg-ink:#FFE3A6; --dl-dmg-edge:#2A1205; /* themeMap: dark ink on a light halo on the light preset */
  --dl-hp:#E0603F; --dl-hp-lo:#8E2A1C; --dl-track:#1A100B; --dl-track-edge:var(--plate-edge);
  --dl-medal:var(--medal); --dl-medal-ink:var(--medal-ink); --dl-medal-edge:var(--medal-edge); --dl-now:var(--gold);
  --dl-medal-down:var(--plate-hi); --dl-medal-down-ink:var(--muted); --dl-medal-down-edge:var(--plate-edge); --dl-slash:var(--gold);
  --dl-dmg-shadow:0 2px 6px rgba(0,0,0,.55);
  --dl-ink:var(--ink); --dl-muted:var(--muted); --dl-gold:var(--gold);
  --focus:#E8D2B4;
  color-scheme:var(--scheme,dark);
}
body{background:var(--sky-top);font-family:var(--ui)}

/* ---- scene: far → near. The sky (warm haze low down), the sun through the velarium's opening (a static glow behind
   the reels and a pool of light on the sand), the far wall of the arena in atmospheric haze, the sails overhead (the
   nearest, darkest layer, partly off frame), the sand, one grain layer, the vignette. Silhouettes are masks from
   skin.js. Only the dust and the torches move (slowly); the layers cross-fade. */
.scene{background:linear-gradient(180deg,var(--sky-top) 0,color-mix(in srgb,var(--sky-top) 45%,var(--sky-low)) 34%,var(--sky-low) 62%,var(--sky-low))}
/* the sun through the velarium's opening, over the far wall: a soft beam from the top and a warm glow behind the reels */
.scene .light>i{position:absolute;inset:auto;left:50%;border-radius:50%;transform:translateX(-50%)}
.scene .light .beam{top:-30%;width:min(70vmin,760px);height:130%;background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) 13%,transparent),color-mix(in srgb,var(--sun) 5%,transparent) 60%,transparent)}
.scene .light .sun{top:50%;width:min(150vmin,1500px);height:min(100vmin,1000px);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,color-mix(in srgb,var(--sun) 22%,transparent),color-mix(in srgb,var(--sun) 8%,transparent) 50%,transparent)}
body.bg-ludus .scene .light{opacity:.7}
.scene .arena,.scene .ludus,.scene .night{transition:opacity 1.2s ease}
.scene .arena>i,.scene .ludus>i,.scene .night>.wall,.scene .night>.arches,.scene .night>.lit,.scene .night>.shade{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}
/* the far wall: travertine fading into the haze at its top; the openings are shade, not black, darkest under their
   heads, with the sun on their sills and right-hand jambs; engaged columns lit on the left; every cornice catches the sun
   and casts a band of shadow on the wall below it (masks from skin.js) */
.scene .arena .wall{background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 32% 68%,rgba(0,0,0,.3)),linear-gradient(180deg,color-mix(in srgb,var(--stone) 62%,var(--sky-low)),var(--stone) 26%,var(--stone-lo) 78%);-webkit-mask-image:var(--al-wall);mask-image:var(--al-wall)}
.scene .arena .arches{background:linear-gradient(180deg,color-mix(in srgb,var(--arch) 58%,var(--sky-low)),color-mix(in srgb,var(--arch) 82%,var(--stone-lo)) 60%,var(--arch));-webkit-mask-image:var(--al-arches);mask-image:var(--al-arches)}
.scene .arena .shade,.scene .night>.shade{background:color-mix(in srgb,var(--arch) 70%,#000);opacity:.7;-webkit-mask-image:var(--al-shade);mask-image:var(--al-shade)}
.scene .arena .lit{background:color-mix(in srgb,var(--stone) 50%,var(--sun));opacity:.5;-webkit-mask-image:var(--al-lit);mask-image:var(--al-lit)}
.scene .arena .cornice{background:linear-gradient(90deg,var(--stone-lo),color-mix(in srgb,var(--stone) 55%,#FFF0D2) 35% 65%,var(--stone-lo));opacity:.42;-webkit-mask-image:var(--al-cornice);mask-image:var(--al-cornice)}
/* the sails: linen lit through from above (two soft fold bands), the dyed ones deep Tyrian; the nearest layer */
.scene .arena .sails{-webkit-mask-position:center top;mask-position:center top}
.scene .arena .sails.a{background:linear-gradient(100deg,var(--canvas) 0,var(--canvas-hi) 20%,var(--canvas) 38%,color-mix(in srgb,var(--canvas) 72%,var(--stone-lo)) 60%,var(--canvas) 78%,color-mix(in srgb,var(--canvas) 70%,var(--stone-lo))),
  linear-gradient(180deg,transparent 40%,rgba(0,0,0,.18));background-blend-mode:normal,multiply;-webkit-mask-image:var(--al-sails-a);mask-image:var(--al-sails-a)}
.scene .arena .sails.b{background:linear-gradient(100deg,var(--canvas-b),color-mix(in srgb,var(--canvas-b) 76%,#E8B0F0) 24%,var(--canvas-b) 44%,color-mix(in srgb,var(--canvas-b) 70%,#000) 70%,var(--canvas-b));-webkit-mask-image:var(--al-sails-b);mask-image:var(--al-sails-b)}
/* the sand: raked in arcs round the arena's centre (a static furrow-and-ridge texture), the pool of light from the
   opening at its centre */
.scene .floor{top:auto;height:24%;background:radial-gradient(ellipse 50% 90% at 50% 8%,color-mix(in srgb,var(--sun) 34%,transparent),color-mix(in srgb,var(--sun) 10%,transparent) 50%,transparent 76%),
  linear-gradient(180deg,color-mix(in srgb,var(--sand-floor) 66%,var(--stone-lo)),var(--sand-floor) 26%,color-mix(in srgb,var(--sand-floor) 64%,#000))}
.scene .floor::before{content:"";position:absolute;inset:0;background:var(--al-rake) 50% 0/max(100%,1100px) 100% no-repeat}
body.fs .scene .floor::before{opacity:.55}
/* the ludus: a portico in mid tones (the back wall in shade, terracotta roof, stone columns lit on the left with a
   reflected band on the shadow side), the wooden post and spear rack with grain and contact shadows on the ground */
.scene .ludus{opacity:0;background:linear-gradient(180deg,transparent 0 60%,color-mix(in srgb,var(--stone-lo) 60%,transparent))}
.scene .ludus .back{background:linear-gradient(180deg,color-mix(in srgb,var(--arch) 72%,var(--stone-lo)),color-mix(in srgb,var(--arch) 40%,var(--stone-lo)));-webkit-mask-image:var(--al-back);mask-image:var(--al-back)}
.scene .ludus .roof{background:color-mix(in srgb,var(--arch) 74%,#8C4A2A);-webkit-mask-image:var(--al-roof);mask-image:var(--al-roof)}
.scene .ludus .cols{background:color-mix(in srgb,var(--stone) 70%,var(--stone-lo));-webkit-mask-image:var(--al-cols);mask-image:var(--al-cols)}
.scene .ludus .post{background:linear-gradient(180deg,#7A5634,#4A3018);-webkit-mask-image:var(--al-post);mask-image:var(--al-post)}
.scene .ludus .lit{background:color-mix(in srgb,var(--stone) 40%,var(--sun));-webkit-mask-image:var(--al-ludus-lit);mask-image:var(--al-ludus-lit)}
.scene .ludus .shade{background:color-mix(in srgb,var(--arch) 70%,#000);-webkit-mask-image:var(--al-ludus-shade);mask-image:var(--al-ludus-shade)}
body.bg-ludus .scene .ludus{opacity:1}
body.bg-ludus .scene .arena{opacity:0}
/* the night arena of the duel: it fades in over 1.2 s (behind the sand plume), torches flicker slowly on the wall */
.scene .night{opacity:0;background:linear-gradient(180deg,var(--nsky-top),var(--nsky-low) 62%)}
body.fs .scene .night{opacity:1}
.scene .night .stars{position:absolute;inset:0 0 50% 0;opacity:.55;background:radial-gradient(circle at 12% 30%,#FFF0D2 0 1px,transparent 1.6px),radial-gradient(circle at 47% 14%,#FFF0D2 0 1px,transparent 1.5px),radial-gradient(circle at 78% 36%,#FFF0D2 0 1.2px,transparent 1.8px),radial-gradient(circle at 63% 58%,#FFF0D2 0 .8px,transparent 1.4px);background-size:260px 200px}
.scene .night .wall{background:linear-gradient(180deg,color-mix(in srgb,var(--nstone) 70%,var(--torch)),var(--nstone) 30%);-webkit-mask-image:var(--al-wall);mask-image:var(--al-wall)}
.scene .night .arches{background:color-mix(in srgb,var(--nstone) 45%,#000);-webkit-mask-image:var(--al-arches);mask-image:var(--al-arches)}
.scene .night>.lit{background:color-mix(in srgb,var(--torch) 40%,var(--nstone));opacity:.4;-webkit-mask-image:var(--al-lit);mask-image:var(--al-lit)}
.scene .night .torch{position:absolute;inset:auto;top:50%;width:14vmin;height:14vmin;border-radius:50%;transform:translate(-50%,-50%);will-change:opacity;
  background:radial-gradient(circle,color-mix(in srgb,var(--torch) 75%,transparent) 0 9%,color-mix(in srgb,var(--torch) 24%,transparent) 36%,transparent 70%);animation:al-flicker 2.6s ease-in-out infinite alternate}
.scene .night .t1{left:10%}.scene .night .t2{left:32%;animation-delay:-.8s}.scene .night .t3{left:68%;animation-delay:-1.5s}.scene .night .t4{left:90%;animation-delay:-2.1s}
/* the sand at night: torchlight from the wall instead of the sun's pool (swapped while the sand plume covers the screen) */
body.fs .scene .floor{background:radial-gradient(ellipse 60% 70% at 50% 0,color-mix(in srgb,var(--torch) 12%,transparent),transparent 70%),
  linear-gradient(180deg,color-mix(in srgb,var(--sand-floor) 38%,var(--nstone)),color-mix(in srgb,var(--sand-floor) 30%,#000))}
body.fs .scene .arena{opacity:0}
body.fs .scene .ludus{opacity:0}
.scene .dust{background:radial-gradient(circle at 14% 22%,color-mix(in srgb,#F3D9A4 55%,transparent) 0 1.2px,transparent 2px),radial-gradient(circle at 58% 70%,color-mix(in srgb,#F3D9A4 45%,transparent) 0 1px,transparent 1.7px),radial-gradient(circle at 82% 38%,color-mix(in srgb,#F3D9A4 50%,transparent) 0 1.4px,transparent 2.1px);
  background-size:280px 220px;opacity:.42;will-change:transform;animation:al-dust 30s linear infinite}
/* one static grain layer for the whole scene (never on the cells) */
.scene .grain{opacity:.07;mix-blend-mode:overlay;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}
.scene .vignette{background:radial-gradient(ellipse 75% 70% at 50% 46%,transparent 48%,var(--vig) 100%)}
/* the shell's governed screen flash (big-win tiers): a faint sand tint, never white (peaks ≈ 15 %) */
.flash{background:radial-gradient(circle at 50% 55%,color-mix(in srgb,#F3D9A4 20%,transparent),color-mix(in srgb,var(--tyr) 8%,transparent) 45%,transparent 75%)}
@keyframes al-flicker{from{opacity:.75}to{opacity:1}}
@keyframes al-dust{to{transform:translate(60px,-220px)}}

/* ---- the title: the arena's dedication — a travertine slab with bevelled edges (lit top and left, shaded below),
   capitals cut into it and filled with red-brown paint (dark wall of the cut at the top, lit wall below). The slab
   is painted on the h1 symmetrically, so the shell's centring (title.js) holds; the tracking is balanced by the shell. */
.logo h1{font-family:var(--display);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--slab-ink);line-height:1;padding:.2em .62em .16em;border-radius:3px;
  background:linear-gradient(176deg,transparent 0 30%,rgba(110,84,50,.10) 31% 31.6%,transparent 32.4% 63%,rgba(110,84,50,.08) 63.6% 64.2%,transparent 65%),
    linear-gradient(180deg,var(--slab-hi),var(--slab) 46%,var(--slab-lo));
  box-shadow:inset 0 1px 0 rgba(255,250,236,.7),inset 1px 0 0 rgba(255,250,236,.35),inset -1px 0 0 rgba(70,48,24,.35),inset 0 -2px 0 rgba(70,48,24,.4),0 0 0 1px var(--slab-edge),0 6px 14px rgba(0,0,0,.42);
  text-shadow:0 1px 0 rgba(255,248,232,.55),0 -1px 0 rgba(40,18,8,.28)}
.ibtn{border:1px solid var(--plate-edge);border-radius:5px;box-shadow:inset 0 1px 0 rgba(255,240,215,.1),0 2px 6px rgba(0,0,0,.35)}
.ibtn:hover{border-color:var(--gold)}

/* ---- the frame: a bevelled bronze rim round a recessed sand niche, two masts with finials, a rope swag and the
   scalloped linen awning (variant "velarium"); "clean" keeps the rim. The decoration (.vel) lies exactly over the reels
   window (its size from skin.js onConfig), behind it; the top padding in cells is kept free by the board's layout. */
.frame{--fpt:calc(var(--cell)*.5 + 2px);padding:var(--fpt) 22px 8px;gap:8px}
.vel{position:absolute;z-index:0;left:50%;top:var(--fpt);width:calc(var(--cell)*var(--al-reels,6));height:calc(var(--cell)*var(--al-rows,4));transform:translateX(-50%);pointer-events:none}
.vel .rim{position:absolute;inset:-7px;border-radius:5px;
  background:linear-gradient(180deg,var(--sp-hi) 0,var(--bronze) 22%,color-mix(in srgb,var(--sp-lo) 70%,#000) 48%,var(--bronze) 58%,var(--sp-lo) 86%,color-mix(in srgb,var(--sp-lo) 60%,#000));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#FFF4DC 80%,transparent),inset 1px 0 0 color-mix(in srgb,#FFF4DC 40%,transparent),inset -1px 0 0 rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px var(--sp-edge),0 18px 36px rgba(0,0,0,.5)}
.vel .mast{position:absolute;top:calc(var(--cell)*-0.56);bottom:calc(var(--cell)*-0.12);width:9px;border-radius:3px;
  background:linear-gradient(90deg,#3A2410,#9A6838 34%,#D7A46C 48%,#7A4E26 70%,#3E2610);box-shadow:0 0 0 1px #21160B}
.vel .mast.l{left:-18px}.vel .mast.r{right:-18px}
.vel .mast b{position:absolute;left:50%;top:-12px;width:17px;height:17px;transform:translateX(-50%);border-radius:50% 50% 42% 42%;
  background:radial-gradient(circle at 34% 28%,#FFF0D2 0 8%,var(--sp-hi) 16%,var(--bronze) 46%,var(--sp-lo) 78%,color-mix(in srgb,var(--sp-lo) 80%,var(--sp-hi)));box-shadow:0 0 0 1px var(--sp-edge),0 3px 4px rgba(0,0,0,.35)}
.vel .ropes{position:absolute;left:-14px;width:calc(100% + 28px);top:calc(var(--cell)*-0.55);height:calc(var(--cell)*.12);overflow:visible}
.vel .ropes path{fill:none;stroke:#6E5232;stroke-width:1.6}
.vel .awning{position:absolute;left:-10px;width:calc(100% + 20px);bottom:calc(100% + 4px);height:calc(var(--cell)*.42);overflow:visible;filter:drop-shadow(0 4px 4px rgba(0,0,0,.35))}
.vel .awning .cloth{fill:url(#al-aw);stroke:var(--sp-edge);stroke-width:1.2;vector-effect:non-scaling-stroke}
.vel .awning .stripe{fill:var(--canvas-b);opacity:.92}
.vel .awning .hem{stroke:var(--bronze);stroke-width:2;vector-effect:non-scaling-stroke}
.vel .awning .bar{fill:var(--sp-lo);stroke:var(--sp-edge);stroke-width:1;vector-effect:non-scaling-stroke}
.board,.message{position:relative;z-index:1}
body[data-variant="clean"] .vel .mast,body[data-variant="clean"] .vel .ropes,body[data-variant="clean"] .vel .awning{display:none}
/* "clean": the same bevelled bronze rim, a little thinner (no masts, ropes or awning) */
body[data-variant="clean"] .vel .rim{inset:-6px}

/* ---- the reels in their sand niche: the rim casts a shadow in from the top, a lit lip along the bottom; reel joints
   are a dark line and a faint lit line. A winning cell gets a bronze ring; the rest step back (opacity, no filter). */
.reels-board .window{box-shadow:inset 0 16px 18px -8px rgba(0,0,0,.55),inset 0 -1px 0 color-mix(in srgb,var(--sun) 22%,transparent),inset 0 0 0 1px rgba(0,0,0,.5)}
.reels-board .reel{box-shadow:inset 1px 0 0 color-mix(in srgb,var(--sun) 6%,transparent)}
.reels-board .reel:first-child{box-shadow:none}
.reels-board .cell.win::after{border-color:var(--gold);box-shadow:0 0 12px var(--win-glow),inset 0 0 12px color-mix(in srgb,var(--win-glow) 28%,transparent)}
.reels-board .cell.dim .sym{filter:none;opacity:.42}
.reels-board .reel.tease{box-shadow:inset 0 0 26px color-mix(in srgb,var(--tyr) 70%,var(--gold))}
.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) 92%,transparent);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em}
.message:empty{background:none}
.message b{color:var(--gold)}

/* ---- the HP banner of the duel (a podium plate over the reels) */
.fsbar{position:relative;gap:12px;padding:6px 16px;border-radius:3px;background:linear-gradient(180deg,var(--plate-hi),var(--plate));border:1px solid var(--plate-edge);
  color:var(--ink);font-family:var(--ui);font-weight:500;box-shadow:inset 0 1px 0 rgba(255,240,215,.1),0 6px 14px rgba(0,0,0,.4);max-width:calc(100% - 4px)}
.fsbar b{color:var(--gold)}
.fsbar .dl-bar{width:100%}
@media (min-width:861px) and (min-aspect-ratio:4/5){.fsbar .dl-hp{min-width:clamp(160px,24vw,320px)}}

/* ---- HUD: dark marble tablets with a bevel; labels in sentence case (the shell's), values in tabular figures */
.hud{border:1px solid var(--plate-edge);box-shadow:inset 0 1px 0 rgba(255,240,215,.1),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.42);border-radius:4px}
.meter b{font-family:var(--ui);font-weight:700;color:var(--ink)}.meter.win b{color:var(--gold)}
.meter small{color:var(--muted)}
.demo{background:var(--gold);color:var(--plate)}
.pm,.auto{background:var(--ibtn-bg);border:1px solid var(--plate-edge);color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,240,215,.1)}
.pm{border-radius:4px}
.auto[aria-pressed="true"]{box-shadow:0 0 0 2px var(--gold)}
.auto span{background:var(--gold);color:var(--plate)}
/* the tabula ansata: drawn by the SVG (skin.js), which fills the button and carries its own contact shadow; the double
   arrow turns while busy, a press slams the tablet down and back (back-out, 220 ms) */
.spin{width:calc(var(--s)*1.45);height:calc(var(--s)*.95);border-radius:6px;background:none;box-shadow:none;color:var(--sp-ink)}
.spin svg{position:static;transform:none;width:100%;height:100%;display:block;overflow:visible}
.spin .ta-glyph{transform-box:view-box;transform-origin:70px 46px}
.spin.busy .ta-glyph{animation:al-turn 1.6s linear infinite}
.spin.kick{animation:al-slam .22s cubic-bezier(.3,1.5,.5,1)}
.spin:disabled{filter:brightness(.7) saturate(.6)}
@keyframes al-turn{to{transform:rotate(360deg)}}
@keyframes al-slam{0%{transform:scale(.9)}100%{transform:none}}
.side .tablet{background:linear-gradient(180deg,var(--plate-hi),var(--plate));border:1px solid var(--plate-edge);border-radius:4px;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,240,215,.1),0 4px 12px rgba(0,0,0,.35)}
.tablet .th{font-family:var(--display);font-weight:400;letter-spacing:.04em;color:var(--gold)}
.tablet .price{color:var(--ink)}
.tablet small{color:var(--muted)}

/* ---- panels, paytable and overlays */
.panel{color:var(--ink)}
.panel h2,.panel h3,.ovcard h2,.screen h2{font-family:var(--display);font-weight:400;letter-spacing:.06em}
.panel h2,.panel h3{color:var(--gold)}
.panel .lead{color:var(--muted)}
.btn{font-family:var(--display);font-weight:400;letter-spacing:.06em;border-radius:4px}
.ptc{background:color-mix(in srgb,var(--plate) 60%,transparent);border-color:var(--line)}
.ptc .symbox,.special .symbox{border-radius:4px;background:linear-gradient(180deg,var(--sand-hi),var(--sand-lo));box-shadow:inset 0 10px 12px -8px rgba(0,0,0,.5),inset 0 0 0 1px var(--sp-lo)}
.special{display:flex;gap:14px;align-items:flex-start}
.special .symbox{position:relative;flex:none;width:96px;height:96px;--cell:96px}
.ptc .sym,.special .sym{position:relative;width:100%;height:100%}
.symbox .sym img{position:absolute;inset:4%;width:92%;height:92%;pointer-events:none}
.special p{margin:0 0 6px}
.al-duel{border-collapse:collapse;margin:6px 0 8px;min-width:min(100%,420px)}
.al-duel th,.al-duel td{padding:5px 12px 5px 0;text-align:left;border-bottom:1px solid var(--line)}
.al-duel thead th{font-size:13px;color:var(--muted);font-weight:700}
.al-duel tbody th{font-weight:500;color:var(--ink);white-space:nowrap}
.al-medal{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;background:var(--medal);color:var(--medal-ink);border:2px solid var(--medal-edge);font:700 11px/1 var(--display)}
.ovcard h2{color:var(--gold);text-shadow:0 2px 18px rgba(0,0,0,.35)}
.overlay.bigwin.t2 h2{text-shadow:0 0 22px color-mix(in srgb,var(--tyr) 45%,transparent)}
.ovamt{color:var(--ink)}
.ovcard p{color:var(--muted)}
/* a denser veil at the centre than the shell's: the card's text over the reels stays ≥ 4.5:1 (titles ≥ 3:1); the sun's
   warmth sits behind the card's title, a vignette to the edges */
.overlay{background:radial-gradient(42% 30% at 50% 40%,color-mix(in srgb,var(--sun) 12%,transparent),transparent),
  radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--bg) 76%,transparent),color-mix(in srgb,var(--bg) 93%,#000) 75%)}

/* ---- the sand plume between the base game and the duel: five discs of sand (a swirl of mid tones, never white) rise
   from the arena floor (from the top on the way out), cover the screen, then the whole plume settles away */
.al-plume{position:fixed;inset:0;z-index:36;pointer-events:none;display:none;overflow:hidden}
.al-plume.show{display:block}
.al-plume .disc{position:absolute;left:50%;top:100%;border-radius:50%;transform:translate(-50%,-50%) scale(0);will-change:transform,opacity}
.al-plume.down .disc{top:0}
.al-plume .d0{width:240vmax;height:240vmax;background:conic-gradient(from 20deg,var(--plume-a),var(--plume-b),var(--plume-c),var(--plume-a),var(--plume-b),var(--plume-a))}
.al-plume .d1{width:180vmax;height:180vmax;background:conic-gradient(from 140deg,transparent,color-mix(in srgb,var(--plume-c) 70%,transparent),transparent 40%,color-mix(in srgb,var(--plume-b) 70%,transparent),transparent 80%)}
.al-plume .d2{width:130vmax;height:130vmax;background:conic-gradient(from 260deg,transparent,color-mix(in srgb,var(--plume-a) 80%,transparent),transparent 35%,color-mix(in srgb,var(--plume-c) 60%,transparent),transparent 75%)}
.al-plume .d3{width:84vmax;height:84vmax;background:radial-gradient(circle,transparent 40%,color-mix(in srgb,var(--plume-b) 60%,transparent) 62%,transparent 72%)}
.al-plume .d4{width:44vmax;height:44vmax;background:radial-gradient(circle,color-mix(in srgb,var(--plume-c) 60%,transparent),transparent 70%)}
.al-plume .grain{position:absolute;inset:0;opacity:.35;background:radial-gradient(circle at 30% 40%,rgba(0,0,0,.18) 0 1px,transparent 1.6px) 0 0/7px 7px,radial-gradient(circle at 70% 20%,color-mix(in srgb,#FFF0D2 18%,transparent) 0 1px,transparent 1.6px) 0 0/11px 11px}
.al-plume.calm .disc{transform:translate(-50%,-50%) scale(1)}

/* ---- big wins: torn ribbons of dyed cloth fall and twist from the top (shapes that fade, never a light) */
.al-ribbons{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.al-ribbons>i{position:absolute;left:var(--x);top:-10vh;width:calc(11px*var(--s));height:calc(56px*var(--s));opacity:0;will-change:transform,opacity;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 72%,#000),var(--c) 35%,color-mix(in srgb,var(--c) 70%,#FFF4DC) 55%,var(--c) 75%,color-mix(in srgb,var(--c) 70%,#000));clip-path:polygon(0 0,100% 5%,100% 92%,72% 100%,50% 90%,28% 100%,0 94%);
  animation:al-ribbon 3.4s cubic-bezier(.45,.05,.6,1) var(--d) forwards}
@keyframes al-ribbon{0%{opacity:0;transform:translate(0,0) rotate(var(--r))}10%{opacity:.95}50%{transform:translate(calc(var(--dx)*.5),55vh) rotate(calc(var(--r) + 140deg)) skewX(12deg)}100%{opacity:0;transform:translate(var(--dx),112vh) rotate(calc(var(--r) + 300deg)) skewX(-10deg)}}

/* ---- reduced motion: no dust drift, no torch flicker, no turning arrow or slam, no ribbons; shell.css caps every
   other animation */
body.still .scene .dust,body.still .scene .night .torch,body.still .spin.busy .ta-glyph,body.still .spin.kick{animation:none}
body.still .al-ribbons{display:none}
@media (prefers-reduced-motion:reduce){
  .scene .dust,.scene .night .torch,.spin.busy .ta-glyph,.spin.kick{animation:none!important}
  .al-ribbons{display:none}
  .scene .arena,.scene .ludus,.scene .night{transition-duration:.12s}
}

/* ---- phones: a lower awning, thin masts and side padding, so six columns of ≈ 54 px fit in 360 px; the far wall sits
   lower and smaller (it would otherwise fill the tall screen with giant arches) */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .frame{--fpt:calc(var(--cell)*.46 + 2px);padding:var(--fpt) 14px 6px;gap:6px}
  .vel .rim{inset:-5px;border-radius:4px}
  body[data-variant="clean"] .vel .rim{inset:-4px}
  .vel .mast{width:6px;top:calc(var(--cell)*-0.5)}.vel .mast.l{left:-12px}.vel .mast.r{right:-12px}
  .vel .mast b{width:12px;height:12px;top:-8px}
  .vel .ropes{left:-10px;width:calc(100% + 20px);top:calc(var(--cell)*-0.49)}
  .vel .awning{left:-7px;width:calc(100% + 14px);height:calc(var(--cell)*.38);bottom:calc(100% + 3px)}
  .hud{background:var(--hud-bg)}
  .logo h1{letter-spacing:.06em;font-size:clamp(15px,4.6vw,30px);padding:.24em .5em .18em}
  .fsbar{padding:5px 8px;gap:6px;width:calc(100% - 4px)}
  .tablet .th{letter-spacing:0}
}
@media (max-aspect-ratio:4/5){
  .scene .arena>i:not(.sails){-webkit-mask-size:auto 70%;mask-size:auto 70%;-webkit-mask-position:center -40%;mask-position:center -40%}
  .scene .night>.wall,.scene .night>.arches,.scene .night>.lit,.scene .night>.shade{-webkit-mask-size:auto 70%;mask-size:auto 70%;-webkit-mask-position:center -40%;mask-position:center -40%}
  .scene .arena .sails{-webkit-mask-size:auto 58%;mask-size:auto 58%}
  .scene .light .sun{top:40%}
  .scene .floor{height:45%;background:radial-gradient(ellipse 70% 40% at 50% 4%,color-mix(in srgb,var(--sun) 30%,transparent),color-mix(in srgb,var(--sun) 8%,transparent) 55%,transparent 80%),
    linear-gradient(180deg,color-mix(in srgb,var(--sand-floor) 66%,var(--stone-lo)),var(--sand-floor) 12%,color-mix(in srgb,var(--sand-floor) 60%,#000))}
}
@media (max-width:400px){
  .message{font-size:14px;padding:2px 10px}
  /* the Duel odds table: trim cell padding and size so its last column stays inside a ~320px paytable panel */
  .al-duel th,.al-duel td{padding:4px 6px 4px 0;font-size:13px}
  .al-medal{width:20px;height:20px;margin-right:6px}
}
/* very small phones (≤360px): the tabula ansata spin tablet (1.45×--s wide by default) and the autoplay disc make the
   HUD's right column too wide for the two-up bet/spin row, pushing the spin tablet and the win meter off the right edge.
   Trim the tablet and the autoplay footprint so the right column matches the balance column and the row fits ~320px. */
@media (max-width:360px){
  .spin{width:calc(var(--s)*1.04)}
  .spinbox{gap:6px}
  .auto{width:44px;height:44px}
}