/* Royal Carousel — the carousel under one lamp on the table shell: plum velvet hung in soft folds, the canopy wheel
   (gilt-hemmed valance, brass-socketed bulbs, enamelled panels with brass inlay, a mirror-mosaic hub, a polished brass
   rim and pointer), six fairground tickets as the bets, a ticket-strip HUD and a brass ring for the Spin button.
   Light (art bible §5.1, table shell §4): the lamp hangs top centre — lit top edges, shade and contact shadows below.
   Colours come from tokens (skin.js themeMap: dark or light ground); the panel paints are fixed (js/art.js), the
   wheel's gradients are js/art.js wheelDefs. Motion: transform and opacity only; no filter is ever animated. */
:root{--display:"Sancreek",Georgia,serif;--ui:"Red Hat Text",system-ui,sans-serif;--radius:12px;--radius-sm:9px;
  --brass:#C9A23A;--brass-hi:#F3D98A;--brass-lo:#6E5010;--hit-ink:#2A0C1D;
  /* polished brass on a CSS surface: the same ramp as the wheel's (highlight, local, the dark horizon, bounce) */
  --metal:linear-gradient(172deg,#FFF0B8 0,#C9A040 30%,#4A3510 48%,#C9A040 56%,#A88430 82%,#4A3510 100%);
  --metal-hover:linear-gradient(172deg,#FFF6D0 0,#D8B050 30%,#5A4214 48%,#D8B050 56%,#B89238 82%,#5A4214 100%);
  --lamp:color-mix(in srgb,#FFE2A8 11%,transparent);--room-vignette:.52;
  --panel-bg:var(--panel,var(--bg2));--hud-bg:var(--ticket,var(--bg2));--strip-bg:var(--ticket,var(--bg2));
  --tact-bg:var(--ticket,var(--bg2));--btn-bg:var(--ring-core,var(--primary));--btn-ink:var(--ring-ink,var(--bg))}
body{background:var(--bg)}

/* ---- the room: velvet in two overlapping rhythms of folds (so they never read as stripes), a fine pile of grain
   blended into it, the canopy's shade along the top. One static layer; the shell's lamp pool and vignette lie over it. */
.rc-velvet{background-color:var(--bg);
  background-image:linear-gradient(180deg,rgb(8 2 5 / .42),rgb(8 2 5 / 0) 24%),
    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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.32 0 0 0 .34 .32 0 0 0 .34 .32 0 0 0 .34 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg,rgb(8 2 5 / 0) 0,rgb(8 2 5 / .2) 70px,rgb(8 2 5 / 0) 151px),
    repeating-linear-gradient(90deg,var(--velvet-lo,var(--bg)) 0,var(--bg) 30px,var(--velvet-hi,var(--bg)) 52px,var(--bg) 70px,var(--velvet-lo,var(--bg)) 96px);
  background-size:auto,160px 160px,auto,auto;background-blend-mode:normal,soft-light,normal,normal}
.logo h1{font-weight:400;letter-spacing:.02em;text-shadow:var(--title-shadow,none)}

/* ---- the board: the wheel fills the board (layout() in main.js sets --w and the visible height) ---- */
.table-game .boardarea.tboardarea{flex:1 1 0}
.table-game .frame{flex:1 1 auto;min-height:0}
.rc{position:relative;flex:none;overflow:hidden;width:var(--w,400px);height:var(--w,400px);margin:0 auto}
/* the result line always paints over the wheel's layers (layout() keeps the wheel inside the board as well) */
.table-game .message{position:relative;z-index:1}
.rc-defs{position:absolute;width:0;height:0;overflow:hidden}
.rc-wheel{position:absolute;top:0;left:50%;width:var(--w,400px);height:var(--w,400px);margin-left:calc(var(--w,400px) / -2)}
.rc-wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rc-disc{will-change:transform;transform-origin:50% 50%}
.rc-lit{transform-origin:50% 50%;opacity:0}
.rc-ptr{transform-origin:50% 1.75%}
/* the canopy */
.rc-drop{fill:url(#rcDrop)}
.rc-valance{fill:url(#rcVal);stroke:url(#rcRim);stroke-width:1.5;stroke-linejoin:round}
.rc-valshade{fill:#06201F;fill-opacity:.22}
.rc-track{fill:none;stroke:#140409;stroke-opacity:.3;stroke-width:11}
.rc.crop{-webkit-mask:linear-gradient(#000 calc(100% - 26px),#0000);mask:linear-gradient(#000 calc(100% - 26px),#0000)}
/* the disc: mirror mosaic, enamelled boards, brass inlay, pegs */
/* the mirror mosaic reflects the fair: the lamp, the canopy's teal, a warm bulb, the dark of the tent */
.rc-mirror .t0{fill:color-mix(in srgb,var(--mirror-a,#CDE) 45%,#FFF8E6)}
.rc-mirror .t1{fill:var(--mirror-a,#CDE)}
.rc-mirror .t2{fill:color-mix(in srgb,var(--mirror-b,#577) 45%,var(--bulb,#FDE68A))}
.rc-mirror .t3{fill:var(--mirror-b,#577)}
.rc-mirror .t4{fill:color-mix(in srgb,var(--mirror-b,#577) 62%,#000)}
.rc-grout{fill:none;stroke:#FFFFFF;stroke-opacity:.3;stroke-width:.7}
.rc-grain{fill:none;stroke:#2A0C1D;stroke-opacity:.1;stroke-width:.6}
.rc-seam{fill:none;stroke:#140409;stroke-opacity:.34;stroke-width:2.8}
.rc-inlay{fill:none;stroke:var(--brass);stroke-width:.8}
.rc-band{fill:none;stroke:#140409;stroke-opacity:.36;stroke-width:2.8}
.rc-band-in{fill:none;stroke:var(--brass);stroke-width:1}
.rc-gilt{fill:none;stroke:var(--brass);stroke-width:.9;stroke-opacity:.9}
.rc-num{font-family:var(--display);font-size:18px;text-anchor:middle;dominant-baseline:central}
.rc-num.two{font-size:15.5px;letter-spacing:-.6px}
/* the landed panel: a dark keyline and a bright edge round it (no filter, no wash over the numeral, so the numeral keeps
   its 4.5:1 on its paint); it pulses by opacity */
.rc-hit .u{fill:none;stroke:var(--hit-ink);stroke-opacity:.78;stroke-width:6;stroke-linejoin:round}
.rc-hit .o{fill:none;stroke:#FFF6DA;stroke-width:2.6;stroke-linejoin:round}
.rc-lit.on{opacity:1;animation:rc-hit .55s ease-in-out 3}
@keyframes rc-hit{50%{opacity:.55}}
/* the front: brass rim and hub, lacquered cap, pointer */
.rc-rim-in{fill:none;stroke:#140409;stroke-opacity:.42;stroke-width:1.6}
.rc-rim{fill:none;stroke:url(#rcRim);stroke-width:7}
.rc-rim-out{fill:none;stroke:#140409;stroke-opacity:.5;stroke-width:1}
.rc-rim-hi{fill:none;stroke:#FFF6DA;stroke-opacity:.55;stroke-width:1;stroke-linecap:round}
.rc-hubring{fill:none;stroke:url(#rcM);stroke-width:4.6}
.rc-hubring-in{fill:none;stroke:#140409;stroke-opacity:.45;stroke-width:1}
.rc-cap{fill:url(#rcCap);stroke:url(#rcM);stroke-width:3}
.rc-cap-in{fill:none;stroke:var(--brass-hi);stroke-opacity:.22;stroke-width:.8}
.rc-ptr-shadow{fill:#0B0306;fill-opacity:.42}
.rc-ring{fill:none;stroke:url(#rcM);stroke-width:2.6}
.rc-fin{fill:url(#rcM);stroke:#4A3510;stroke-width:.9;stroke-linejoin:round}
.rc-glint{fill:none;stroke:#FFF6DA;stroke-opacity:.85;stroke-width:1.3;stroke-linecap:round}
/* canopy-light-chase: the bulbs are three layers, every third bulb in each; while the wheel runs they light in turn
   (a marquee running clockwise, as the wheel turns), a win runs them a little faster three times (each bulb blinks
   about twice a second, never three times), the Crown dims them all once.
   At rest every bulb burns. Opacity only: the chase is composited, nothing is repainted. */
.rc-lights{--cp:.48s;--cd:0}
.rc-lights.p1{--cd:-2}.rc-lights.p2{--cd:-1}
.rc.spinning .rc-lights{animation:rc-chase var(--cp) linear calc(var(--cp) * var(--cd) / 3) infinite}
.rc.end-win .rc-lights{--cp:.45s;animation:rc-chase var(--cp) linear calc(var(--cp) * var(--cd) / 3) 3}
.rc.end-crown .rc-lights{animation:rc-dim 1.6s ease-in-out 1}
@keyframes rc-chase{0%,26%{opacity:1}40%,88%{opacity:.14}100%{opacity:1}}
@keyframes rc-dim{30%,62%{opacity:.1}}

/* ---- the tickets: one per multiplier, card stock enamelled in its panel's paint (lit from above), a brass hairline,
   a punched notch each side and a stub for the chip; a contact shadow on the velvet ---- */
.tcontrols{padding:0 2px}
.rc-bets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) repeat(2,minmax(64px,72px));gap:8px;width:min(100%,940px);margin:0 auto}
.rc-tile{position:relative;isolation:isolate;min-height:62px;min-width:0;padding:6px 52px 6px 14px;border:0;border-radius:8px;background:none;color:var(--paint-ink);
  display:grid;grid-template-rows:auto auto;align-content:center;justify-items:start;gap:1px;text-align:left;
  filter:drop-shadow(0 2px 1.5px rgb(8 2 5 / .45));transition:transform var(--t-fast,140ms) var(--ease-out,ease-out)}
.rc-tile::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:8px;
  background:linear-gradient(180deg,rgb(255 255 255 / .13),rgb(255 255 255 / 0) 34%,rgb(0 0 0 / 0) 66%,rgb(0 0 0 / .1)),var(--paint);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brass) 85%,transparent),inset 0 -3px 0 var(--paint-deep);
  -webkit-mask:radial-gradient(circle 6px at 0 50%,#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 95%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 6px at 0 50%,#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 6px at 100% 50%,#0000 95%,#000) right/51% 100% no-repeat}
.rc-tile::after{content:"";position:absolute;top:10px;bottom:10px;right:44px;border-left:1.5px dashed var(--paint-ink);opacity:.35}
.rc-x{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);line-height:1}
.rc-odds{font-size:12.5px;font-weight:700;letter-spacing:.02em}
/* the chip: cream clay with six brass edge spots */
.rc-chip{position:absolute;right:6px;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;
  color:var(--hit-ink);background:radial-gradient(circle,#FFF6DA 0 62%,var(--brass-lo) 63% 66%,transparent 67%),repeating-conic-gradient(from 15deg,var(--brass) 0 26deg,#FFF6DA 26deg 60deg);
  box-shadow:0 0 0 1.5px var(--brass-lo),0 2px 3px rgb(8 2 5 / .45);font-variant-numeric:tabular-nums}
.rc-chip:empty{background:none;box-shadow:none;border:1.5px dashed var(--paint-ink);opacity:.4}
.rc-tile:hover:not(:disabled)::before{box-shadow:inset 0 0 0 2px var(--brass-hi),inset 0 -3px 0 var(--paint-deep)}
.rc-tile:active:not(:disabled){transform:translateY(1px)}
.rc-tile:disabled{cursor:default}
.rc-tile.won{transform:translateY(-3px);filter:drop-shadow(0 5px 5px rgb(8 2 5 / .5))}
.rc-tile.won::before{box-shadow:inset 0 0 0 2.5px var(--brass-hi),inset 0 0 14px rgb(255 240 184 / .5),inset 0 -3px 0 var(--paint-deep)}
.rc-tile.lost::before{filter:saturate(.5) brightness(.8)}
.rc-tile.lost .rc-chip{opacity:.55}
.rc-float{position:absolute;right:4px;top:-12px;z-index:1;padding:1px 8px;border-radius:6px;font-size:14px;font-weight:800;color:var(--primary);background:var(--ticket,var(--bg2));
  box-shadow:0 0 0 1px var(--brass),0 3px 6px rgb(8 2 5 / .4);white-space:nowrap;font-variant-numeric:tabular-nums;animation:rc-float .5s var(--ease-out,ease-out) both}
@keyframes rc-float{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.rc-tool{min-height:62px;min-width:0;padding:4px 6px;border-radius:8px;border:1px solid var(--line);background:var(--ticket,var(--bg2));color:var(--ink);display:grid;place-items:center;align-content:center;gap:2px;font-weight:700;font-size:13px;
  transition:border-color var(--t-fast,140ms) var(--ease-std,ease),transform var(--t-press,90ms) var(--ease-out,ease-out)}
.rc-tool svg{width:20px;height:20px}
.rc-tool:disabled{opacity:.5}
.rc-tool:hover:not(:disabled){border-color:var(--brass)}
.rc-tool:active:not(:disabled){transform:translateY(1px)}

/* ---- HUD: a strip of fairground ticket stock — a flat ground (its text contrast is measured on it), a brass double
   hairline, perforations between the meters and punched ends on wide screens ---- */
.hud.thud{position:relative;isolation:isolate;background:none;border:0}
.hud.thud::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--radius);background:var(--ticket,var(--bg2));
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--brass) 80%,transparent),inset 0 0 0 4px var(--ticket,var(--bg2)),inset 0 0 0 5px color-mix(in srgb,var(--brass) 38%,transparent),inset 0 6px 0 -5px rgb(255 240 184 / .14)}
.thud .meter b{font-weight:700}
.thud .meter small{font-size:12px}
@media (min-width:861px) and (min-aspect-ratio:4/5){
  .hud.thud::before{-webkit-mask:radial-gradient(circle 10px at 0 50%,#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,#0000 95%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle 10px at 0 50%,#0000 95%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% 50%,#0000 95%,#000) right/51% 100% no-repeat}
  .thud>.betctl,.thud>.win{border-left:1.5px dashed var(--line);padding-left:clamp(10px,2vw,26px)}
}

/* ---- the Spin button: the brass ring to grab — polished brass round a lacquered core, lit from above, a contact
   shadow; it presses down 2 px; while the wheel runs a highlight runs round the brass (a transform) ---- */
.spin.tprim{width:80px;height:80px;min-width:0;padding:0;border-radius:50%;border:6px solid transparent;
  background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--ring-core,var(--primary)) 84%,#fff) 0,var(--ring-core,var(--primary)) 56%,color-mix(in srgb,var(--ring-core,var(--primary)) 72%,#000) 100%) padding-box,var(--metal) border-box;
  color:var(--ring-ink,var(--bg));box-shadow:0 0 0 1px var(--brass-lo),inset 0 2px 5px rgb(8 2 5 / .55),0 3px 4px rgb(8 2 5 / .4),0 14px 24px -12px rgb(8 2 5 / .75);
  font-family:var(--display);font-weight:400;font-size:21px;letter-spacing:.03em}
.spin.tprim::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:6px solid transparent;border-top-color:rgb(255 248 220 / .75);opacity:0;pointer-events:none}
.spin.tprim.busy::after{opacity:1;animation:rc-grab .9s linear infinite}
.spin.tprim:hover:not(:disabled){filter:none;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--ring-core,var(--primary)) 80%,#fff) 0,var(--ring-core,var(--primary)) 56%,color-mix(in srgb,var(--ring-core,var(--primary)) 72%,#000) 100%) padding-box,var(--metal-hover) border-box}
.spin.tprim:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 1px var(--brass-lo),inset 0 3px 8px rgb(8 2 5 / .65),0 1px 2px rgb(8 2 5 / .4)}
@keyframes rc-grab{to{transform:rotate(360deg)}}
.tstrip li{border-radius:6px}

/* ---- rules panel: the pay table with the panel paints ---- */
.rc-tablewrap{margin:10px 0}
.rc-paytable{border-collapse:collapse;width:100%;font-size:15px}
.rc-paytable caption{text-align:left;color:var(--muted);font-size:13px;padding-bottom:6px}
.rc-paytable th,.rc-paytable td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:left}
.rc-paytable thead th{font-size:13px;font-weight:600;color:var(--muted)}
.rc-sw{display:inline-block;min-width:58px;padding:3px 8px;border-radius:6px;background:var(--paint);color:var(--paint-ink);font-family:var(--display);font-weight:400;font-size:17px;text-align:center;box-shadow:inset 0 0 0 1.5px var(--brass),inset 0 -2px 0 rgb(0 0 0 / .14)}

/* ---- big-win ribbons (skin.js): satin — dark at the folded edges, a sheen down the middle; the far ones dimmer ---- */
.rc-ribbon{position:fixed;top:0;z-index:42;width:20px;height:90px;pointer-events:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--rb) 60%,#000) 0,var(--rb) 30%,color-mix(in srgb,var(--rb) 58%,#fff) 50%,var(--rb) 68%,color-mix(in srgb,var(--rb) 55%,#000) 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 90'%3E%3Cpath d='M6.4 0L9.2 5L11.2 10L11.9 15L11.2 20L9.2 25L6.4 30L3.7 35L1.6 40L0.9 45L1.6 50L3.7 55L6.4 60L9.2 65L11.2 70L11.9 75L11.2 80L9.2 85L6.4 90L13.6 90L16.4 85L18.4 80L19.1 75L18.4 70L16.4 65L13.6 60L10.9 55L8.8 50L8.1 45L8.8 40L10.9 35L13.6 30L16.4 25L18.4 20L19.1 15L18.4 10L16.4 5L13.6 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 90'%3E%3Cpath d='M6.4 0L9.2 5L11.2 10L11.9 15L11.2 20L9.2 25L6.4 30L3.7 35L1.6 40L0.9 45L1.6 50L3.7 55L6.4 60L9.2 65L11.2 70L11.9 75L11.2 80L9.2 85L6.4 90L13.6 90L16.4 85L18.4 80L19.1 75L18.4 70L16.4 65L13.6 60L10.9 55L8.8 50L8.1 45L8.8 40L10.9 35L13.6 30L16.4 25L18.4 20L19.1 15L18.4 10L16.4 5L13.6 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.rc-ribbon.far{z-index:41;opacity:.6}

/* ---- below 1000 px: no stub, the chip is a badge on the ticket's corner; below 560 px two rows of four ---- */
@media (max-width:999px){
  .rc-bets{grid-template-columns:repeat(6,minmax(0,1fr)) repeat(2,minmax(56px,76px));gap:6px}
  .rc-tile{min-height:54px;padding:5px 6px;justify-items:center;text-align:center}
  .rc-tile::after{display:none}
  .rc-x{font-size:21px}
  .rc-odds{font-size:12px}
  .rc-chip{top:-7px;right:-4px;margin:0;width:26px;height:26px;font-size:11px;background:radial-gradient(circle,#FFF6DA 0 64%,var(--brass-lo) 65% 68%,transparent 69%),repeating-conic-gradient(from 15deg,var(--brass) 0 26deg,#FFF6DA 26deg 60deg)}
  .rc-chip:empty{display:none}
  .rc-tool{min-height:54px;font-size:12.5px}
  .rc-float{top:-16px;right:auto;left:50%;transform:translateX(-50%);animation:none}
}
@media (max-width:559px){.rc-bets{grid-template-columns:repeat(4,minmax(0,1fr))}.table-game .message{min-height:44px;line-height:1.3}}
@media (max-width:700px){.spin.tprim{width:70px;height:70px;font-size:19px;border-width:5px}.spin.tprim::after{inset:-5px;border-width:5px}}
@media (max-width:340px){
  .rc-x{font-size:19px}
  .rc-odds{font-size:11.5px}
  .spin.tprim{width:64px;height:64px;font-size:17px}
}
/* a short narrow screen (≤ 520 px tall, e.g. a 4-inch phone in Safari with its bars): no results strip and lower
   tickets, so the wheel keeps a readable size (the lit panel and the message line show the spin) */
@media (max-height:520px) and (max-width:559px){
  .tstrip{display:none}
  .rc-tile,.rc-tool{min-height:46px}
}
/* a phone held sideways (≤ 440 px tall): the HUD on one row and no results strip (the lit panel and the message line
   show the spin), the wheel on the left, the tickets in two rows of four on the right */
@media (max-height:440px) and (orientation:landscape){
  .hud.thud{grid-template-columns:1fr auto 1fr auto;grid-template-areas:"acts acts acts acts" "bal bet win spin";padding-top:6px;padding-bottom:6px;row-gap:0}
  body.lefty .hud.thud{grid-template-columns:auto 1fr auto 1fr;grid-template-areas:"acts acts acts acts" "spin bal bet win"}
  .tstrip{display:none}
  .table-game .stage.tstage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr);column-gap:12px;align-items:center}
  .table-game .boardarea.tboardarea{height:100%}
  .table-game .message{min-height:20px;font-size:14px;line-height:1.3}
  .tcontrols{margin:0;width:auto}
  .rc-bets{grid-template-columns:repeat(4,minmax(60px,74px));width:auto}
  .spin.tprim{width:60px;height:60px;font-size:17px}
}
/* a small phone sideways (≈ 568–700 px wide): the compact HUD of small phones, so the one-row HUD fits */
@media (max-height:440px) and (orientation:landscape) and (max-width:700px){
  .hud.thud{column-gap:8px;padding-left:10px;padding-right:10px}
  .betctl{gap:6px}.betctl .meter{min-width:64px}.pm{width:34px;height:34px;font-size:20px}
  .spinbox{gap:8px}.auto{width:46px;height:46px}.auto svg{width:21px;height:21px}
  .thud .meter b{font-size:17px}
}
/* reduced motion: bulbs burn steady, the landed panel is lit without pulsing, no running highlight, no lift */
body.still .rc .rc-lights,body.still .rc-lit.on,body.still .spin.tprim.busy::after,body.still .rc-float{animation:none}
@media (prefers-reduced-motion:reduce){
  .rc .rc-lights,.rc-lit.on,.spin.tprim.busy::after,.rc-float{animation:none!important}
  .rc-tile,.rc-tile:hover,.rc-tile.won{transition:none;transform:none}
}