/* Monte Rouge — a belle-époque salon lit by gas: burgundy damask, a gilt dado rail and two gas sconces; a lacquered
   single-zero wheel; green baize printed in ivory; clay chips with spotted edges; the croupier's porcelain marker; a
   gilt-framed mirror bar for the HUD and a croupier's rake for the main button. Colours of text come from skin.js
   themeMap (4.5:1 on every ground).
   Art direction (docs/design-system/reelhaven/pages/art-direction.md §4–§5): one key light — the lamp over the table,
   straight above — so every object is lit on its top edge and drops its shadow downward; materials instead of
   outlines: lacquer, gilt, mahogany, baize, porcelain, clay. Playfair Display is self-hosted in its upright cut only,
   so nothing here asks for italic (the browser's slanted Playfair looked cheap and pushed the title's ink right of its
   axis). Motion: transform / opacity only, the shell's tokens, exits faster than entrances. */
:root{
  --display:"Playfair Display",Georgia,serif; --ui:"Lato",system-ui,sans-serif;
  --wood:#5A1F12; --wood-hi:#7A2E18; --wood-lo:#3A120A; --gold:#C9A35A; --gold-hi:#E7CEA8; --gold-lo:#7A5626;
  --lac-red:#A8141F; --lac-black:#17100F; --lac-green:#1A6F19; --ivory:#F4EBDD; --ivory-hi:#FFFBF2; --ivory-lo:#C9B796; --lamp-ink:#FFE9C2;
  --wall:var(--bg); --damask:var(--bg2); --gilt:var(--gold); --felt:#145A14; --felt-hi:#1A6A1A; --felt-ink:#F6ECD8; --felt-line:rgba(246,236,216,.5);
  --prim-radius:8px 8px 26px 26px / 8px 8px 14px 14px; --radius:14px;
  --lamp:rgba(246,213,142,.11); --room-vignette:.46;
  --sheen:inset 0 1px 0 rgb(255 240 215 / .26),inset 0 -7px 9px -7px rgb(0 0 0 / .5);
}
body[data-variant="ebony"]{--wood:#241A17;--wood-hi:#3B2C27;--wood-lo:#120C0A}

/* ---- the salon behind everything: the wall lit from above, a damask that shows at the room's edges and fades behind
   the table, the sconces and their halos, the gilt dado rail over the mahogany wainscot, one grain layer. Static. ---- */
.scene .mr-wall{background:linear-gradient(180deg,var(--wall-hi,var(--wall)),var(--wall) 34%,var(--wall-lo,var(--wall)))}
.scene .mr-damask{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg fill-opacity='.16'%3E%3Cpath d='M60 16c9 14 15 26 15 38 0 14-8 22-15 30-7-8-15-16-15-30 0-12 6-24 15-38Z'/%3E%3Cpath d='M60 90c14-2 30 4 32 18-8-4-16-4-22 0 6 6 6 16-2 22-2-10-6-16-8-20-2 4-6 10-8 20-8-6-8-16-2-22-6-4-14-4-22 0 2-14 18-20 32-18Z'/%3E%3Ccircle cx='60' cy='8' r='3'/%3E%3Cpath d='M60 138c5 6 6 12 0 18-6-6-5-12 0-18Z'/%3E%3Cpath d='M0 58c7 9 9 16 0 26-9-10-7-17 0-26ZM120 58c7 9 9 16 0 26-9-10-7-17 0-26Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/120px 160px;
  -webkit-mask-image:radial-gradient(ellipse 64% 60% at 50% 44%,transparent 30%,#000 90%);mask-image:radial-gradient(ellipse 64% 60% at 50% 44%,transparent 30%,#000 90%)}
.scene .mr-glow{background:radial-gradient(ellipse 7% 18% at 3.7% 17%,rgb(255 226 160 / .26),transparent),radial-gradient(ellipse 7% 18% at 96.3% 17%,rgb(255 226 160 / .26),transparent),
  radial-gradient(circle at 3.7% 19%,rgb(246 213 142 / .12),transparent 26%),radial-gradient(circle at 96.3% 19%,rgb(246 213 142 / .12),transparent 26%)}
.scene .mr-sconces{background:var(--sconce) left 1.5% top 14%/56px 112px no-repeat,var(--sconce) right 1.5% top 14%/56px 112px no-repeat}
.scene .mr-wainscot{top:auto;height:15%;background:linear-gradient(var(--gold-hi),var(--gold-hi)) top/100% 1px no-repeat,linear-gradient(var(--gold),var(--gold-lo)) top 1px left 0/100% 3px no-repeat,
  linear-gradient(rgb(0 0 0 / .5),transparent) top 4px left 0/100% 12px no-repeat,linear-gradient(transparent 22px,rgb(255 228 190 / .07) 22px 23px,rgb(0 0 0 / .3) 23px 25px,transparent 25px),
  linear-gradient(180deg,color-mix(in srgb,var(--wood) 70%,var(--wall)),color-mix(in srgb,var(--wood-lo) 75%,#000))}
.scene .mr-grain{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px;opacity:.07;mix-blend-mode:overlay}
body.bg-plain .scene .mr-damask,body.bg-plain .scene>.mr-sconces,body.bg-plain .scene>.mr-glow{display:none}
@media (max-width:700px){.scene .mr-sconces,.scene .mr-glow{display:none}}

/* ---- header: the title in upright Playfair, gilt with an engraved lower edge ---- */
.logo h1{color:var(--gilt);font-weight:700;font-style:normal;letter-spacing:.01em;font-variant-numeric:lining-nums;text-shadow:0 1px 0 rgb(0 0 0 / .5)}
.ibtn{border-color:color-mix(in srgb,var(--gilt) 55%,transparent)}

/* ---- the board fills the stage: the wheel beside, above or (phones) over the table ---- */
.table-game .frame{max-width:1240px}
.table-game .board.tboard{flex:1 1 0;align-items:stretch;min-height:0}
.tcontrols{max-width:1240px}
.mr{position:relative;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;gap:28px}
.mr[data-wheel="top"]{flex-direction:column;gap:10px}
.mr-wheelbox{flex:none;display:flex;flex-direction:column;align-items:center;gap:12px}
/* the wheel comes up over the table for the spin (phones): in 260 ms, away in 140 ms (main.js waits 280 ms each way) */
.mr[data-wheel="overlay"] .mr-wheelbox{position:absolute;inset:0 0 calc(-1 * var(--ov-below,0px));z-index:6;justify-content:center;
  background:radial-gradient(closest-side circle at 50% 46%,color-mix(in srgb,var(--wall) 80%,transparent),color-mix(in srgb,var(--wall) 92%,#000) 140%);
  opacity:0;visibility:hidden;transform:scale(.96);transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in),visibility 0s var(--t-fast)}
.mr[data-wheel="overlay"].wheel-up .mr-wheelbox{opacity:1;visibility:visible;transform:none;transition:opacity 220ms var(--ease-out),transform 260ms var(--ease-out)}
.mr[data-wheel="overlay"].ov-row .mr-plaque-res{position:absolute;top:50%;left:calc(50% + var(--wheel) / 2 + 18px);transform:translateY(-50%)}
.mr-tablewrap{flex:0 1 auto;min-width:0;max-height:100%;display:flex;justify-content:center}
/* a table taller than the board scrolls inside its own frame (phones upright; short boards lengthwise) */
.mr.scrolls .mr-tablewrap{align-self:stretch;align-items:flex-start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gilt) transparent;padding-bottom:4px}
.mr[data-orient="v"] .mr-tablewrap{flex:1 1 auto;padding:2px 0 8px}
/* more of the table below: a short fade and a lacquered chevron badge at the board's foot until the table is scrolled to its end */
.mr.scrolls::before,.mr.scrolls::after{content:"";position:absolute;pointer-events:none;z-index:5;transition:opacity var(--t-base) var(--ease-std)}
.mr.scrolls::after{left:0;right:0;bottom:0;height:14px;background:linear-gradient(transparent,color-mix(in srgb,var(--wall) 75%,transparent))}
.mr.scrolls::before{left:50%;bottom:5px;width:28px;height:28px;margin-left:-14px;border-radius:50%;z-index:6;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23E7CEA8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat,var(--lac-black);
  box-shadow:0 0 0 1.5px var(--gold),inset 0 1px 0 rgb(255 240 215 / .2),0 3px 8px rgba(0,0,0,.55)}
.mr.scrolls.at-end::before,.mr.scrolls.at-end::after{opacity:0}
.mr.wheel-up::before,.mr.wheel-up::after{opacity:0}
/* the table's mahogany rail: lit on its top edge, a bevel falling into shade below, a contact shadow on the floor */
.mr-table{flex:none;padding:9px;background:linear-gradient(180deg,var(--wood-hi),var(--wood) 38%,var(--wood-lo));
  border-radius:calc((100% - 18px) / 14 + 9px) 22px 22px calc((100% - 18px) / 14 + 9px) / 50% 22px 22px 50%;
  box-shadow:inset 0 1px 0 rgb(255 226 190 / .3),inset 0 -2px 0 rgb(0 0 0 / .35),0 0 0 1px rgb(0 0 0 / .5),0 4px 10px rgb(0 0 0 / .3),0 22px 40px -12px rgb(0 0 0 / .65)}
.mr[data-orient="v"] .mr-table{border-radius:28px}

/* ---- the wheel (wheel.js): bowl, rotor, the lamp's light, the ball — gradients take the skin's colours ---- */
.mr-wheel{position:relative;width:var(--wheel,300px);aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 1px rgb(0 0 0 / .45),0 5px 10px rgb(0 0 0 / .35),0 24px 46px -12px rgb(0 0 0 / .7)}
.mr-w{position:absolute;inset:0;border-radius:50%}
.mr-w>svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.mr-w-rotor{transform-origin:50% 50%}
.mr-w-ball{position:absolute;left:50%;top:50%;width:calc(100% * 10 / 208);aspect-ratio:1;pointer-events:none}
.mr-w-ball svg{display:block;width:100%;height:100%}
.mr-w.turning .mr-w-rotor,.mr-w.turning .mr-w-ball{will-change:transform}
.mr-w stop.wh{stop-color:var(--wood-hi)}.mr-w stop.wm{stop-color:var(--wood)}.mr-w stop.wl{stop-color:var(--wood-lo)}
.mr-w stop.gh{stop-color:var(--gold-hi)}.mr-w stop.gm{stop-color:var(--gold)}.mr-w stop.gl{stop-color:var(--gold-lo)}
.mr-w stop.k{stop-color:#000}.mr-w stop.lw{stop-color:var(--lamp-ink)}
.mr-w stop.iv0{stop-color:var(--ivory-hi)}.mr-w stop.iv1{stop-color:var(--ivory)}.mr-w stop.iv2{stop-color:var(--ivory-lo)}
.mr-rim-edge{fill:rgb(0 0 0 / .55)}
.mr-inlay{stroke:var(--gold);stroke-width:.7;stroke-opacity:.7}
.mr-sheen{fill:none;stroke:var(--lamp-ink);stroke-opacity:.2;stroke-width:2.8;stroke-linecap:round}.mr-sheen.lo{stroke-opacity:.06}
.mr-dia-hi{fill:var(--gold-hi)}.mr-dia-lo{fill:var(--gold-lo)}
.mr-rotor-rim{fill:var(--gold)}
.p-red{fill:var(--lac-red)}.p-black{fill:var(--lac-black)}.p-green{fill:var(--lac-green)}
.mr-pocket-shade{stroke:#000;stroke-opacity:.42;stroke-width:12.8}
.mr-numring{stroke:var(--gold);stroke-width:.7}
.mr-seps{fill:none;stroke:var(--gold);stroke-opacity:.6;stroke-width:.45}
.mr-frets{fill:none;stroke:var(--gold-hi);stroke-width:1.05;stroke-linecap:round}
.mr-nums text{fill:#F6ECD8;font-family:var(--display);font-weight:700;font-size:6.7px;font-variant-numeric:lining-nums;text-anchor:middle;dominant-baseline:central}
.mr-cone{fill:var(--wood)}.mr-veneer{fill:var(--wood-hi);fill-opacity:.7}
.mr-cone-ring{stroke:var(--gold);stroke-width:.9}
.mr-cone-in{fill:color-mix(in srgb,var(--wood) 78%,#000)}
.mr-arm{fill:var(--gold)}.mr-arm-hi{fill:var(--gold-hi)}.mr-knob,.mr-boss{fill:var(--gold)}.mr-knob-hi{fill:#FFF6DE}
.mr-gap{stroke:#000;stroke-opacity:.5;stroke-width:1.5}
.mr-glint{fill:none;stroke:var(--lamp-ink);stroke-opacity:.3;stroke-width:1.4;stroke-linecap:round}
.mr-ball-hl{fill:#fff;opacity:.9}
.mr-hit{fill:rgb(246 213 142 / .16);stroke:#F6D58E;stroke-width:1.6;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}
.landed .mr-hit{opacity:1}

/* the result plaque under the wheel: lacquer in the number's colour, a gilt frame, lit on its top edge */
.mr-plaque-res{--pc:var(--lac-black);min-width:150px;min-height:44px;padding:4px 18px;border-radius:8px;display:flex;align-items:baseline;justify-content:center;gap:10px;
  color:#F6ECD8;background:var(--pc);
  box-shadow:inset 0 1px 0 rgb(255 240 215 / .3),inset 0 0 0 1.5px var(--gold),inset 0 0 0 3.5px color-mix(in srgb,var(--pc) 70%,#000),inset 0 0 0 4.5px color-mix(in srgb,var(--gold) 60%,transparent),
    inset 0 -14px 16px -14px rgb(0 0 0 / .5),0 2px 0 var(--gold-lo),0 10px 18px -6px rgb(0 0 0 / .6);
  visibility:hidden;opacity:0;translate:0 6px;transition:opacity var(--t-fast) var(--ease-in),translate var(--t-fast) var(--ease-in),visibility 0s var(--t-fast)}
.mr-plaque-res.on{visibility:visible;opacity:1;translate:none;transition:opacity var(--t-base) var(--ease-out),translate var(--t-slow) var(--ease-out)}
.mr-plaque-res.red{--pc:var(--lac-red)}.mr-plaque-res.green{--pc:var(--lac-green)}
.mr-plaque-res b{font-family:var(--display);font-size:30px;font-weight:700;line-height:1.2;font-variant-numeric:lining-nums}
.mr-plaque-res span{font-family:var(--display);font-size:17px;letter-spacing:.04em}

/* ---- the baize: a 4 px weave, the lamp's pool in the middle, edges a third darker, the rail's shadow on the cloth;
   a gilt fillet between cloth and rail ---- */
.mr-felt{position:relative;background-color:var(--felt);
  background-image:radial-gradient(ellipse 70% 90% at 50% 30%,rgb(255 233 194 / .09),transparent 70%),radial-gradient(ellipse 120% 140% at 50% 36%,transparent 48%,rgb(0 0 0 / .32)),url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cpath d='M0 0h2v2H0zM2 2h2v2H2z' fill-opacity='.1'/%3E%3C/svg%3E");
  background-size:auto,auto,4px 4px;
  border-radius:calc(100% / 14) 14px 14px calc(100% / 14) / 50% 14px 14px 50%;overflow:visible;--chip:clamp(20px,3.2vmin,30px);
  box-shadow:0 0 0 1.5px var(--gold-lo),0 0 0 2.5px var(--gold),0 0 0 4px rgb(0 0 0 / .35),inset 0 8px 10px -6px rgb(0 0 0 / .5)}
.mr[data-orient="v"] .mr-felt{border-radius:20px}
.mr-cell,.mr-out{position:absolute;display:grid;place-items:center;padding:0;margin:0;border:0;background:transparent;color:var(--felt-ink);
  box-shadow:inset 0 0 0 .75px var(--felt-line);border-radius:0;transition:background-color var(--t-fast) var(--ease-std)}
/* the numbers: enamel plaques inlaid in the cloth (lacquer lit on the top edge, falling into shade below) */
.mr-cell span{display:grid;place-items:center;width:min(78%,52px);height:min(66%,38px);border-radius:5px;font-family:var(--display);font-weight:700;
  font-size:clamp(14px,1.45vw,19px);line-height:1;color:#F6ECD8;font-variant-numeric:lining-nums;
  box-shadow:inset 0 1px 0 rgb(255 240 215 / .28),inset 0 10px 12px -10px rgb(255 240 215 / .2),inset 0 -8px 10px -8px rgb(0 0 0 / .5),0 1px 0 rgb(0 0 0 / .35)}
.mr-cell.n-red span{background:var(--lac-red)}.mr-cell.n-black span{background:var(--lac-black)}
.mr-cell.mr-zero{border-radius:100% 0 0 100% / 50% 0 0 50%}
.mr-cell.mr-zero span{background:color-mix(in srgb,var(--lac-green) 70%,#000);width:min(64%,46px);height:min(44%,72px);border-radius:7px;font-size:clamp(17px,1.8vw,24px)}
.mr[data-orient="v"] .mr-cell.mr-zero{border-radius:20px 20px 0 0}
.mr[data-orient="v"] .mr-cell.mr-zero span{width:min(40%,84px);height:min(66%,36px)}
.mr-out span{font-family:var(--display);font-weight:700;font-size:clamp(14px,1.35vw,18px);letter-spacing:.03em;font-variant-numeric:lining-nums;white-space:nowrap}
.mr-out.o-column span{font-size:clamp(12px,1.05vw,15px)}
.mr-lozenge{width:min(60%,52px);height:min(56%,26px);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:var(--gold-hi)}
.mr-lozenge::after{content:"";display:block;width:100%;height:100%;clip-path:polygon(50% 9%,91% 50%,50% 91%,9% 50%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--lac-red) 78%,#fff),var(--lac-red) 45%,color-mix(in srgb,var(--lac-red) 70%,#000))}
.o-black .mr-lozenge::after{background:linear-gradient(180deg,#3E302B,var(--lac-black) 48%,#000)}
/* a chip on an outside box sits at its far end (felt.js chipAt) and the label steps the other way, so it stays readable */
.mr-out>*{transition:transform var(--t-fast) var(--ease-out)}
.mr-felt[data-orient="h"] .mr-out.has-chip:not(.o-column)>*,.mr-felt[data-orient="v"] .mr-out.o-column.has-chip>*{transform:translateX(calc(var(--chip) * -.5))}
.mr-felt[data-orient="h"] .mr-out.o-column.has-chip>*,.mr-felt[data-orient="v"] .mr-out.has-chip:not(.o-column)>*{transform:translateY(calc(var(--chip) * -.5))}
.mr-cell:focus-visible,.mr-out:focus-visible{outline:3px solid var(--felt-ink);outline-offset:-4px;z-index:2}
.mr-cell.cover,.mr-out.cover{background:var(--felt-hi);box-shadow:inset 0 0 0 2.5px #F6D58E}
.mr-cell.hit{background:color-mix(in srgb,var(--felt) 70%,#F6D58E);box-shadow:inset 0 0 0 3px #F6D58E}
/* the winning number: a gilt ring settles onto it once (scale + opacity) */
.mr-cell.hit::after{content:"";position:absolute;inset:3px;border-radius:5px;pointer-events:none;box-shadow:0 0 0 2px #F6D58E,0 0 16px 2px rgb(246 213 142 / .5);animation:mr-ring 640ms var(--ease-out) both}
.mr-out.hit{box-shadow:inset 0 0 0 .75px var(--felt-line),inset 0 0 0 3px color-mix(in srgb,#F6D58E 55%,transparent)}
@media (hover:hover) and (pointer:fine){.mr-cell:hover,.mr-out:hover{background:var(--felt-hi)}}
.mr.busy .mr-felt{cursor:progress}
.mr.busy .mr-cell,.mr.busy .mr-out,.mr.busy .mr-hot{pointer-events:none}

/* the lines and corners between numbers: a fine pointer only (touch uses the bet-type selector) */
.mr-hot{position:absolute;display:none;z-index:3;transform:translate(-50%,-50%);border-radius:8px;cursor:pointer}
@media (hover:hover) and (pointer:fine){.mr-hot{display:block}.mr-hot:hover{background:rgba(246,213,142,.35);box-shadow:0 0 0 1.5px #F6D58E}}

/* ---- chips (clay: an inlay, a fine ring, six edge spots, a lit top, the chip's own edge below and a contact shadow),
   payouts and the croupier's porcelain marker ---- */
.mr-chips{position:absolute;inset:0;pointer-events:none;z-index:4}
.mr-chip{--cc:#F1E6D2;--spot:#F6ECD8;--edge:color-mix(in srgb,var(--cc) 55%,#000);
  position:absolute;width:var(--chip);height:var(--chip);transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle closest-side,var(--cc) 0 58%,var(--spot) 60% 65%,transparent 67%),repeating-conic-gradient(from 10deg,var(--spot) 0 18deg,var(--cc) 18deg 60deg);
  color:#F6ECD8;box-shadow:inset 0 1px 1px rgb(255 255 255 / .4),inset 0 -1.5px 1px rgb(0 0 0 / .3),0 1.5px 0 var(--edge),0 3px 5px rgb(0 0 0 / .5);
  font:800 max(10px,calc(var(--chip) * .4))/1 var(--ui);font-variant-numeric:lining-nums tabular-nums;
  transition:opacity var(--t-base) var(--ease-std);animation:mr-drop 200ms var(--ease-out)}
.mr-chip b{font-weight:800;text-shadow:0 1px 0 rgb(0 0 0 / .35)}
.mr-chip.c1{--cc:#F1E6D2;--spot:#8E2A1E;color:#2A1408}.mr-chip.c1 b{text-shadow:none}
.mr-chip.c2{--cc:#9C3F58}.mr-chip.c5{--cc:var(--lac-red)}.mr-chip.c10{--cc:#1F3A6B}
.mr-chip.c20{--cc:#2E6B57}.mr-chip.c50{--cc:#8A5A12}.mr-chip.c100{--cc:#1D1716;--spot:var(--gold);--edge:#000}
.mr-chip.won{z-index:2;box-shadow:inset 0 1px 1px rgb(255 255 255 / .4),inset 0 -1.5px 1px rgb(0 0 0 / .3),0 1.5px 0 var(--edge),0 0 0 2.5px #F6D58E,0 0 12px rgb(246 213 142 / .7)}
.mr-chip.lost{opacity:.38;filter:saturate(.4)}
.mr-pay{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-3px);padding:1px 6px;border-radius:6px;background:var(--ivory-hi);color:#2A1408;
  font:800 12px/1.3 var(--ui);font-style:normal;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;
  box-shadow:0 0 0 1px var(--gold),0 2px 4px rgb(0 0 0 / .45);animation:mr-rise 320ms var(--ease-out)}
.mr-dolly{position:absolute;display:none;z-index:5;width:calc(var(--chip) * 1.15);height:calc(var(--chip) * 1.15);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 42% 34%,var(--ivory-hi),var(--ivory) 45%,var(--ivory-lo));pointer-events:none;
  box-shadow:0 0 0 2px var(--gold),0 0 0 3px var(--gold-lo),0 2px 0 3px color-mix(in srgb,var(--gold-lo) 70%,#000),0 8px 12px rgb(0 0 0 / .5)}
.mr-dolly i{position:absolute;inset:27%;border-radius:50%;background:radial-gradient(circle at 40% 32%,#FFF6DE,var(--gold) 45%,var(--gold-lo));box-shadow:0 1px 1px rgb(0 0 0 / .4)}
.mr-dolly.on{display:block;animation:mr-dolly 460ms var(--ease-back)}
@keyframes mr-drop{from{transform:translate(-50%,-80%) scale(1.12);opacity:0}}
@keyframes mr-rise{from{transform:translate(-50%,6px);opacity:0}}
@keyframes mr-dolly{from{transform:translate(-50%,-140%) scale(1.25);opacity:0}}
@keyframes mr-ring{from{opacity:0;transform:scale(1.25)}}

/* the list of choices (split, street, corner, line) */
.mr-pick{position:absolute;z-index:8;max-width:min(330px,96%);padding:8px 50px 10px 10px;border-radius:12px;background:var(--panel-bg);color:var(--ink);
  border:1.5px solid var(--gilt);box-shadow:inset 0 1px 0 rgb(255 236 200 / .12),0 14px 30px rgb(0 0 0 / .55);animation:mr-pick var(--t-base) var(--ease-out)}
.mr-pick p{margin:0 0 6px;font:700 14px/1.3 var(--ui)}
.mr-pick-list{display:flex;flex-wrap:wrap;gap:6px}
.mr-pick-list button{min-height:44px;min-width:64px;padding:0 10px;border-radius:9px;border:1px solid var(--felt-line);background:var(--felt);color:var(--felt-ink);
  font:700 15px/1 var(--display);font-variant-numeric:lining-nums;white-space:nowrap;box-shadow:var(--sheen)}
.mr-pick-list button:hover,.mr-pick-list button:focus-visible{background:var(--felt-hi);box-shadow:inset 0 0 0 2px #F6D58E}
.mr-pick-x{position:absolute;top:2px;right:2px;width:44px;height:44px;border:0;background:none;color:var(--ink);font-size:24px;line-height:1;border-radius:9px}
@keyframes mr-pick{from{opacity:0;transform:translateY(6px)}}

/* ---- the controls under the table: bet type and chip tools ---- */
.tcontrols{gap:8px 12px}
.mr-modes{display:flex;flex:0 1 auto;border-radius:12px;overflow:hidden;border:1.5px solid var(--line);box-shadow:0 6px 14px -8px rgb(0 0 0 / .6)}
.mr-modes button{flex:1 1 0;min-height:44px;min-width:58px;padding:0 12px;border:0;border-left:1px solid var(--line);background:var(--ibtn-bg);color:var(--ink);font:700 14px/1 var(--ui);white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease-std),color var(--t-fast) var(--ease-std)}
.mr-modes button:first-child{border-left:0}
.mr-modes button[aria-pressed="true"]{background:var(--felt);color:var(--felt-ink);box-shadow:inset 0 1px 0 rgb(255 240 215 / .18),inset 0 -3px 0 #F6D58E}
.mr-modes button[aria-disabled="true"]{opacity:.6}
.mr-tools{display:flex;gap:8px}
.mr-tools button{min-height:44px;min-width:44px;padding:0 12px;display:flex;align-items:center;gap:6px;border-radius:12px;border:1.5px solid var(--line);background:var(--ibtn-bg);color:var(--ink);font:700 14px/1 var(--ui);
  transition:border-color var(--t-fast) var(--ease-std),transform var(--t-press) var(--ease-out),opacity var(--t-fast) var(--ease-std)}
.mr-tools button:active:not(:disabled){transform:translateY(1px)}
.mr-tools button svg{width:20px;height:20px;flex:none;color:var(--gilt)}
.mr-tools button:disabled{opacity:.45}
.mr-modes button:hover:not([aria-pressed="true"]),.mr-tools button:hover:not(:disabled){border-color:var(--gilt)}
@media (max-width:720px){.mr-modes{flex:1 1 100%}.mr-tools{flex:1 1 100%;justify-content:center}.mr-tools button{flex:1 1 0;justify-content:center}}
@media (max-width:360px){.mr-modes button{padding:0 4px;min-width:0;font-size:13px}}

/* ---- HUD: a gilt-framed salon mirror, lit along its top edge ---- */
.hud.thud{border:1.5px solid var(--gilt);border-radius:16px;
  box-shadow:inset 0 1px 0 rgb(255 236 200 / .16),inset 0 0 0 3px color-mix(in srgb,var(--wall) 60%,transparent),inset 0 0 0 4px color-mix(in srgb,var(--gilt) 55%,transparent),0 14px 28px -8px rgb(0 0 0 / .6)}
.meter span{color:var(--muted)}
.meter b{color:var(--ink);font-family:var(--display);font-variant-numeric:lining-nums tabular-nums}
.meter.win b{color:var(--gilt)}
.pm{border-color:color-mix(in srgb,var(--gilt) 55%,transparent)}
/* the main button: the croupier's rake — a mahogany head bar over an ivory blade lit from above, its cane rising behind */
.spin.tprim{position:relative;background:var(--ivory);color:var(--wood-lo);border:2px solid var(--gold);font-family:var(--display);font-weight:700;
  box-shadow:inset 0 6px 0 var(--wood),inset 0 7px 0 var(--gold),inset 0 8px 0 rgb(255 255 255 / .6),inset 0 -12px 14px -12px rgb(90 31 18 / .45),0 2px 0 var(--gold-lo),0 12px 22px -10px rgb(0 0 0 / .7)}
.spin.tprim:active:not(:disabled){box-shadow:inset 0 6px 0 var(--wood),inset 0 7px 0 var(--gold),inset 0 3px 8px rgb(0 0 0 / .22),0 1px 0 var(--gold-lo),0 4px 8px -4px rgb(0 0 0 / .6)}
.spin.tprim::after{content:"";position:absolute;bottom:100%;left:50%;width:6px;height:7px;transform:translateX(-50%);border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,var(--wood-lo),var(--wood-hi) 45%,var(--wood-lo));box-shadow:0 0 0 1px var(--gold-lo)}
.spin.tprim span{padding-top:3px}

/* ---- results strip: the last numbers as lacquer tiles (the colour is the information; a win is ringed in gilt) ---- */
.tstrip li{font-family:var(--display);font-weight:700;font-variant-numeric:lining-nums tabular-nums;color:#F6ECD8;border-color:rgb(246 236 216 / .3);box-shadow:var(--sheen)}
.tstrip li[title^="Red"]{background:var(--lac-red)}
.tstrip li[title^="Black"]{background:var(--lac-black)}
.tstrip li[title^="Green"]{background:var(--lac-green)}
.tstrip li.won{color:#F6ECD8;box-shadow:0 0 0 2px #F6D58E,var(--sheen)}
.tstrip li.none{background:var(--strip-bg);color:var(--muted);font-family:var(--ui);box-shadow:none}

/* the message under the table */
.message{color:var(--ink)}
.message b{color:var(--gilt)}
/* "No more bets." comes in an <i>: Lato is self-hosted upright only, so the call is set quieter instead of slanted */
.message i{font-style:normal;color:var(--muted)}
.mr-num{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 6px;margin-right:4px;border-radius:6px;color:#F6ECD8;font-family:var(--display);
  font-variant-numeric:lining-nums;background:var(--lac-black);box-shadow:inset 0 1px 0 rgb(255 240 215 / .25),0 0 0 1px rgb(231 206 168 / .35)}
.mr-num.red{background:var(--lac-red)}.mr-num.green{background:var(--lac-green)}

/* rules panel */
.mr-pays{width:100%;border-collapse:collapse;margin:8px 0 6px;font-size:15px}
.mr-pays th,.mr-pays td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line)}
.mr-pays thead th{color:var(--muted);font-size:13px;font-weight:700}
.mr-pays tbody th{font-family:var(--display)}
.mr-pays td:last-child{text-align:right;font-weight:800;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* big wins: lacquered plaques with a gilt edge, lit across their face as they tumble */
#mrPlaques{position:fixed;inset:0;z-index:42;pointer-events:none;overflow:hidden;perspective:700px}
.mr-plaque{position:absolute;left:0;top:0;border-radius:4px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 72%,#fff),var(--c) 32%,color-mix(in srgb,var(--c) 66%,#000));
  box-shadow:inset 0 0 0 1.5px #E7CEA8,inset 0 0 0 3.5px color-mix(in srgb,var(--c) 70%,#000),inset 0 0 0 4.5px rgb(231 206 168 / .6)}
.overlay.bigwin h2{letter-spacing:.01em}

/* narrow screens */
@media (max-width:400px){
  .mr-tools button{padding:0 8px}
  .mr-plaque-res b{font-size:26px}
}
@media (max-width:339px){.mr-tools button span{display:none}}
/* a phone held sideways or a short window: the HUD on one slimmer row, the bet types and tools on one row, and no results
   strip (the plaque, the marker and the message show the number; the history keeps every spin), so the table keeps its height */
@media (max-height:520px) and (orientation:landscape){
  .tstrip{display:none}
  .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"}
  .table-game .spin.tprim{height:48px}
  .mr-modes{flex:0 1 auto}.mr-tools{flex:0 0 auto}.mr-tools button{flex:none}
}
@media (max-height:520px) 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}
  .table-game .spin.tprim{min-width:104px}
  .mr-tools button{padding:0 10px}.mr-tools button span{display:none}
}
/* reduced motion (system setting, or the shell's body.still): end states at once */
@media (prefers-reduced-motion:reduce){
  .mr-out>*,.mr-plaque-res,.mr-plaque-res.on,.mr-hit,.mr-chip{transition:none}
  .mr-chip,.mr-pay,.mr-dolly.on,.mr-cell.hit::after,.mr-pick{animation:none}
  .mr[data-wheel="overlay"] .mr-wheelbox,.mr[data-wheel="overlay"].wheel-up .mr-wheelbox{transform:none;transition:opacity .01s,visibility 0s}
}
body.still .mr-chip,body.still .mr-pay,body.still .mr-dolly.on,body.still .mr-cell.hit::after,body.still .mr-pick{animation:none}
body.still .mr-out>*,body.still .mr-plaque-res,body.still .mr-hit{transition:none}