/* Riviera Baccarat — a deco salon privé above the night promenade. The room is the admin's background taken down to plum
   lacquer, with three arched windows on the sea at night (skin.js scene). One lamp hangs over the table: the table
   shell's warm light pool, the lit lip of the table's rail, the soft reflection on the black lacquer, the brass inlay
   brightest under it, the cards' and chips' top edges. Black lacquer (or Macassar ebony) with a double brass inlay, the
   dealer's cut-out and a shell fan; ivory card stock with lacquer backs; Player sapphire, Banker coral, Tie jade; a
   stepped brass plaque for Deal and a double gilt rail for the HUD. Lettering printed on the table is Poiret One in the
   bet's colour; text on the table is ivory or gilt on lacquer (≥ 7:1); text off the table takes its colours from
   skin.js themeMap (≥ 4.6:1 on every ground). Motion: transform / opacity only; reduced motion keeps the end states. */
:root{
  --display:"Poiret One",Georgia,serif; --ui:"Lato",system-ui,sans-serif;
  --lacquer:#121016; --lacquer-hi:#1E1A24; --lacquer-lo:#08070A;
  --gold:#CDA552; --gold-hi:#F3DC9A; --gold-lo:#7C5E26;
  --rail-hi:#4A4250; --rail:#0F0D12; --rail-lo:#030204;
  --bed-hi:#231D2A; --bed:#110E15; --bed-lo:#07060A; --gloss:#FFE6BC;
  --plq-hi:#221C28; --plq:#15121A; --plq-lo:#0A080D;
  --ivory:#F6EEDF; --ivory-dim:#CFC6B4;
  --p:#9DBBFF; --p-bg:#2F5BD3; --b:#FF9488; --b-bg:#B8322B; --t:#86E0B6; --t-bg:#187A4F;
  --prim-radius:0; --radius:6px; --radius-sm:5px;
}
body[data-variant="macassar"]{--lacquer:#1E120C;--lacquer-hi:#2C1B12;--lacquer-lo:#0E0805;
  --rail-hi:#6A4A34;--rail:#24160E;--rail-lo:#0A0603;--bed-hi:#33221A;--bed:#1C120C;--bed-lo:#0D0805;--plq-hi:#2E1F16;--plq:#20150E;--plq-lo:#120B07}

/* ---- the scene (skin.js): the room, the windows and the view, all static ---- */
.scene{background:var(--wall,var(--bg))}
.scene .rb-scene{width:100%;height:100%}
.s-wall{stop-color:var(--wall)}.s-wall2{stop-color:var(--wall2)}
.s-sky-hi{stop-color:var(--sky-hi)}.s-sky-lo{stop-color:var(--sky-lo)}.s-sea-hi{stop-color:var(--sea-hi)}.s-sea-lo{stop-color:var(--sea-lo)}.s-moon{stop-color:var(--moon)}
.rb-stars{fill:var(--moon);opacity:.32}
.rb-moon{fill:var(--moon);opacity:.88}
.rb-coast{fill:var(--coast)}
.rb-glow{fill:var(--lights);opacity:.1}
.rb-lamps{fill:var(--lights);opacity:.72}
.rb-moonpath{fill:none;stroke:var(--moon);stroke-width:2.5;stroke-linecap:round;opacity:.13}
.rb-parapet{fill:var(--parapet)}
.rb-parapet-lip{fill:none;stroke:var(--moon);stroke-width:2;opacity:.14}
.rb-sash{fill:none;stroke:var(--frame);stroke-width:18}
.rb-muntin{fill:none;stroke:var(--frame);stroke-width:7}
.rb-sash-line{fill:none;stroke:var(--frame-line);stroke-width:1.5;opacity:.42}
.rb-wainscot{fill:var(--wall2)}
.rb-dado{fill:none;stroke:var(--frame-line);stroke-width:2;opacity:.45}
body.bg-plain .rb-view,body.bg-plain .rb-sash,body.bg-plain .rb-muntin,body.bg-plain .rb-sash-line{display:none}

/* ---- header, HUD (a double gilt rail), the main button (a stepped brass plaque) ---- */
.logo h1{font-family:var(--display);font-weight:400;color:var(--gilt);letter-spacing:.06em;-webkit-text-stroke:.6px currentColor;text-shadow:0 1px 0 rgb(0 0 0 / .5)}
.ibtn{width:44px;height:44px;border-color:color-mix(in srgb,var(--gilt) 45%,transparent);box-shadow:inset 0 1px 0 rgb(255 243 220 / .08),0 2px 6px rgb(0 0 0 / .3)}
.pm{width:44px;height:44px;border-radius:3px}
.hud{border:0;border-radius:4px;background:var(--hud-bg);
  box-shadow:inset 0 2px 0 color-mix(in srgb,var(--hud-rail) 70%,var(--gilt)),inset 0 -2px 0 color-mix(in srgb,var(--hud-rail) 75%,transparent),inset 0 5px 0 var(--hud-bg),inset 0 -5px 0 var(--hud-bg),inset 0 6px 0 var(--line),inset 0 -6px 0 var(--line),0 -1px 0 rgb(0 0 0 / .35),0 14px 30px rgb(0 0 0 / .45)}
.meter span{white-space:nowrap}
.meter b.num{font-family:var(--ui);font-weight:900}
.spin.tprim{background:none;box-shadow:none;color:var(--plaque-ink);isolation:isolate;font-family:var(--display);font-weight:400;letter-spacing:.12em;text-transform:uppercase;font-size:clamp(19px,1.9vw,23px);-webkit-text-stroke:.7px currentColor}
.spin.tprim::before,.spin.tprim::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--plaque) 58%,#fff) 0%,var(--plaque) 34%,color-mix(in srgb,var(--plaque) 84%,#000) 74%,color-mix(in srgb,var(--plaque) 90%,#fff) 100%);
  clip-path:polygon(0 12px,6px 12px,6px 6px,12px 6px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 12px),0 calc(100% - 12px))}
.spin.tprim::after{inset:5px;background:none;border:1px solid color-mix(in srgb,var(--plaque-ink) 40%,transparent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35);clip-path:none}
.spin.tprim::before{filter:drop-shadow(0 6px 10px rgb(0 0 0 / .45))}
.tact{border-radius:3px}
.table-game .message:not(:empty){background:var(--msg-bg);border-radius:3px;padding:3px 14px;box-shadow:inset 0 0 0 1px var(--line)}
.table-game .message b{color:var(--gilt)}
.tstrip li{border-radius:3px;font-family:var(--ui)}

/* ---- the board fills the stage ---- */
.table-game .frame{max-width:1120px}
.table-game .board.tboard{flex:1 1 0;align-items:stretch;min-height:0}
.tcontrols{max-width:1120px}
.rb{position:relative;width:100%;height:100%;min-height:0;display:flex;justify-content:center;color:var(--ivory)}
.rb-table{position:relative;flex:1 1 auto;max-width:1060px;min-width:0;display:flex;flex-direction:column;padding:0 var(--pad) 18px}
.rb-shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 26px rgb(0 0 0 / .5))}
/* the table: the rail, the bed under the lamp, its gloss, the rail's lit lip, the brass inlay, the shell fan */
.s-rail-hi{stop-color:var(--rail-hi)}.s-rail{stop-color:var(--rail)}.s-rail-lo{stop-color:var(--rail-lo)}
.s-bed-hi{stop-color:var(--bed-hi)}.s-bed{stop-color:var(--bed)}.s-bed-lo{stop-color:var(--bed-lo)}.s-gloss{stop-color:var(--gloss)}
.s-gold-hi{stop-color:var(--gold-hi)}.s-gold{stop-color:var(--gold)}.s-gold-lo{stop-color:var(--gold-lo)}
.s-plq-hi{stop-color:var(--plq-hi)}.s-plq{stop-color:var(--plq)}.s-plq-lo{stop-color:var(--plq-lo)}
.rb-lacquer{fill:url(#rbRail)}
.rb-bed{fill:url(#rbBed)}
.rb-gloss{fill:url(#rbGloss)}
.rb-rim{fill:none;stroke:url(#rbRim);stroke-width:2;vector-effect:non-scaling-stroke}
.rb-inlay{fill:none;stroke:url(#rbBrass);stroke-width:1.8;vector-effect:non-scaling-stroke}
.rb-inlay.thin{stroke:var(--gold-lo);stroke-width:1}
.rb-fan-leaf{fill:var(--gold);opacity:.05}
.rb-fan{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.4}
.rb-fan.rim{opacity:.62}
body[data-variant="macassar"] .rb-lacquer{fill:url(#rbGrain)}
.rb-grain-bg{fill:var(--rail)}.rb-grain{fill:none;stroke:#3E2718;stroke-width:5;opacity:.75}
.rb-table>:not(.rb-shape){position:relative}

/* the dealer's side: bead road (left), shell fan (centre), discard and shoe (right) — inlaid in the lacquer */
.rb-top{flex:none;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:8px}
.rb-road{margin:0;padding:5px;justify-content:start;display:grid;grid-template-rows:repeat(6,var(--dot));grid-auto-flow:column;grid-auto-columns:var(--dot);gap:2px;
  max-width:calc(100% - var(--cw) * 1.8 - 30px);height:calc(var(--dot) * 6 + 22px);border:1px solid var(--gold-lo);border-radius:3px;overflow:hidden;
  background:linear-gradient(180deg,#050407,var(--lacquer-lo) 40%,#0E0B11);box-shadow:inset 0 2px 5px rgb(0 0 0 / .7),0 1px 0 rgb(255 243 220 / .07)}
.rb[data-road="off"] .rb-road{display:none}
.rb-road i{display:grid;font-style:normal;place-items:center;border-radius:50%;font:900 calc(var(--dot) * .6)/1 var(--ui);color:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-lo) 28%,transparent)}
.rb-road i[class]{box-shadow:inset 0 -1px 1px rgb(0 0 0 / .35),0 1px 1px rgb(0 0 0 / .5)}
.rb-road i.player{background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--p-bg) 84%,#fff),var(--p-bg) 48%,color-mix(in srgb,var(--p-bg) 78%,#000))}
.rb-road i.banker{background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--b-bg) 84%,#fff),var(--b-bg) 48%,color-mix(in srgb,var(--b-bg) 78%,#000))}
.rb-road i.tie{background:radial-gradient(circle at 38% 30%,color-mix(in srgb,var(--t-bg) 84%,#fff),var(--t-bg) 48%,color-mix(in srgb,var(--t-bg) 78%,#000))}
.rb-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.rb-discard{width:calc(var(--cw) * .62);height:calc(var(--cw) * .36);min-width:26px;min-height:16px;border:1px solid var(--gold-lo);border-radius:2px;display:grid;place-items:center;
  background:linear-gradient(180deg,#050407,#16121A);box-shadow:inset 0 2px 3px rgb(0 0 0 / .65),0 1px 0 rgb(255 243 220 / .08)}
.rb-discard i{width:70%;height:2px;background:linear-gradient(90deg,transparent,var(--gold-lo) 20%,var(--gold-lo) 80%,transparent)}
.rb-shoe{position:relative;width:calc(var(--cw) * .9);height:calc(var(--cw) * .56);min-width:36px;min-height:22px;max-height:calc(var(--top) - 10px);
  background:linear-gradient(180deg,var(--rail-hi),var(--lacquer-hi) 18%,var(--lacquer) 70%,var(--lacquer-lo));border:1.5px solid var(--gold);border-radius:3px 3px 3px 12px;overflow:hidden;
  box-shadow:inset 0 1px 0 rgb(255 243 220 / .22),0 5px 10px rgb(0 0 0 / .5)}
.rb-shoe-card{position:absolute;left:10%;bottom:12%;width:50%;height:62%;border-radius:2px;background:linear-gradient(160deg,#2A2330,#0C0A0F 70%);border:1px solid var(--gold);transform:skewX(-14deg);transition:transform var(--t-base) var(--ease-out)}
.rb-shoe.give .rb-shoe-card{transform:skewX(-14deg) translateX(-18%)}
.rb-shoe-gate{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,var(--gold-hi),var(--gold) 45%,var(--gold-lo));transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--t-base) var(--ease-out)}
.rb-shoe.closed .rb-shoe-gate{transform:none}

/* the hands */
.rb-hands{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:0}
.rb-hand{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.rb-hand header{height:var(--head);display:flex;align-items:center;gap:12px}
.rb-hand[data-side="banker"] header{flex-direction:row-reverse}
.rb-hname{margin:0;font:400 clamp(17px,2vw,24px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;-webkit-text-stroke:.55px currentColor}
.rb-hand[data-side="player"] .rb-hname{color:var(--p)}.rb-hand[data-side="banker"] .rb-hname{color:var(--b)}
.rb-medal{width:calc(var(--head) - 6px);height:calc(var(--head) - 6px);border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 28%,#2C2533,var(--lacquer) 62%,var(--lacquer-lo));
  box-shadow:0 0 0 1.5px var(--gold),0 0 0 4px var(--rail),0 0 0 5px var(--gold-lo),0 4px 8px 4px rgb(0 0 0 / .45),inset 0 1px 0 rgb(255 243 220 / .16);transition:box-shadow var(--t-slow) var(--ease-std)}
.rb-medal b{font:400 calc(var(--head) * .56)/1 var(--display);color:var(--ivory);-webkit-text-stroke:.7px currentColor;font-variant-numeric:tabular-nums}
.rb-cards{position:relative;width:var(--hw);height:var(--hh)}
.rb-hl{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.rb-hand[data-side="banker"] .rb-hl{align-items:flex-start}
.rb-nat{margin:0;padding:1px 7px;border-radius:2px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1A1208;font:800 11px/15px var(--ui);letter-spacing:.04em}
.rb-nat[hidden]{display:none}
.rb-div{flex:none;width:var(--mid);align-self:stretch;display:grid;place-items:center}
.rb-div i{width:1px;height:70%;background:linear-gradient(transparent,var(--gold-lo) 20%,var(--gold) 50%,var(--gold-lo) 80%,transparent)}
.rb-hand.won .rb-medal{box-shadow:0 0 0 2px var(--gold-hi),0 0 0 5px var(--rail),0 0 0 6.5px var(--gold-hi),0 0 20px 2px color-mix(in srgb,var(--gold-hi) 50%,transparent),inset 0 1px 0 rgb(255 243 220 / .2);animation:rb-pop 460ms var(--ease-out)}
.rb-hand.won .rb-medal b{color:var(--gold-hi)}
.rb-hand.tie .rb-medal{box-shadow:0 0 0 2px var(--t),0 0 0 5px var(--rail),0 0 0 6.5px var(--t),0 0 16px color-mix(in srgb,var(--t) 40%,transparent);animation:rb-pop 460ms var(--ease-out)}
.rb-hand.lost .rb-card{opacity:.7}
.rb-hand.lost .rb-medal b{color:var(--ivory-dim)}
@keyframes rb-pop{40%{transform:scale(1.1)}}

/* the card boxes printed on the table, then the cards: lacquer back, ivory card stock; third cards lie sideways */
.rb-slot{position:absolute;width:var(--cw);height:calc(var(--cw) * 1.4);border:1px solid color-mix(in srgb,var(--gold-lo) 75%,transparent);border-radius:calc(var(--cw) * .08);background:color-mix(in srgb,var(--gold) 3%,transparent)}
.rb-slot.sideways{transform:rotate(90deg);border-style:dashed;background:none}
.rb-card{position:absolute;width:var(--cw);height:calc(var(--cw) * 1.4);perspective:700px;z-index:1;transition:opacity var(--t-slow) var(--ease-std)}
.rb-turn{width:100%;height:100%}
.rb-card.sideways .rb-turn{transform:rotate(90deg)}
.rb-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.rb-flip.up{transform:rotateY(180deg)}
.rb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:calc(var(--cw) * .075);box-shadow:0 1px 1px rgb(0 0 0 / .45),0 5px 12px -2px rgb(0 0 0 / .6)}
.rb-front{transform:rotateY(180deg)}
.rb-face svg{display:block;width:100%;height:100%}

/* the verdict line: the table's printed legend, then the coup's result */
.rb-verdict{flex:none;height:var(--verdict);display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;overflow:hidden;
  font:700 clamp(12px,1.3vw,14px)/1 var(--ui);letter-spacing:.03em;color:var(--ivory-dim)}
.rb-verdict>i{width:7px;height:7px;flex:none;background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo));transform:rotate(45deg)}
.rb-verdict.res b{font:400 clamp(22px,2.8vw,32px)/1 var(--display);letter-spacing:.08em;color:var(--gold-hi);-webkit-text-stroke:.7px currentColor}
.rb-verdict.res.player b{color:var(--p)}.rb-verdict.res.banker b{color:var(--b)}.rb-verdict.res.tie b{color:var(--t)}
.rb-verdict.res span{font-size:clamp(13px,1.4vw,16px);color:var(--ivory);font-variant-numeric:tabular-nums}
.rb[data-narrow="1"] .rb-verdict em{display:none}
.rb-verdict em{font-style:normal;padding:2px 8px;border-radius:2px;background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#1A1208;font-size:12px;font-weight:800}
.rb[data-narrow="1"] .rb-verdict{gap:7px}
.rb[data-narrow="1"] .rb-verdict.res b{font-size:21px}

/* the bet plaques: lacquer panels with a brass edge, an engraved line in the bet's colour, a lit top lip */
.rb-spots{flex:none;height:var(--spots);display:grid;grid-template-columns:1fr .74fr 1fr;gap:clamp(6px,1.4vw,14px);padding:0 clamp(8px,3%,40px)}
.rb-spot{position:relative;min-width:0;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border:0;background:none;color:var(--ivory);font-family:var(--ui);cursor:pointer;
  transition:transform var(--t-press) var(--ease-out)}
.rb-spot:active:not([aria-disabled="true"]){transform:translateY(1px)}
.rb-spot:focus-visible{outline:3px solid var(--ivory);outline-offset:2px}
.rb-plq{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rb-plq path{fill:url(#rbPlq);stroke:url(#rbPlqLine);stroke-width:1.5;vector-effect:non-scaling-stroke}
.rb-plq path.in{fill:none;stroke-width:1;opacity:.75;transition:opacity var(--t-base) var(--ease-std)}
.rb-plq path.lip{fill:none;stroke:#FFF3DC;stroke-width:1;opacity:.16}
.rb-spot[data-spot="player"] .rb-plq .in{stroke:var(--p)}.rb-spot[data-spot="banker"] .rb-plq .in{stroke:var(--b)}.rb-spot[data-spot="tie"] .rb-plq .in{stroke:var(--t)}
.rb-spot>:not(svg){position:relative}
.rb-name{font:400 clamp(16px,1.9vw,22px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;-webkit-text-stroke:.55px currentColor}
.rb-spot[data-spot="player"] .rb-name{color:var(--p)}.rb-spot[data-spot="banker"] .rb-name{color:var(--b)}.rb-spot[data-spot="tie"] .rb-name{color:var(--t)}
.rb-spot small{order:1;font-size:12px;font-weight:700;color:var(--ivory-dim);white-space:nowrap}
.rb-spot.won small,.rb-spot.push small{display:none}
.rb-stack{order:2;display:flex;align-items:center;gap:5px;min-height:20px}
.rb-stack:empty{display:none}
.rb-chip{display:block;width:20px;height:20px;border-radius:50%;box-shadow:0 1.5px 0 rgb(0 0 0 / .55),0 3px 0 rgb(0 0 0 / .3),0 4px 6px rgb(0 0 0 / .35)}
.rb-chip svg{display:block;width:100%;height:100%}
.rb-stack b{font:900 13px/1 var(--ui);color:var(--ivory);font-variant-numeric:tabular-nums}
/* narrow tables: a plaque is 68 px high and may hold the name, the pay and the chips at once */
.rb[data-narrow="1"] .rb-spot{padding:4px;gap:3px}
.rb[data-narrow="1"] .rb-name{font-size:15px}
.rb[data-narrow="0"] .rb-chip{width:26px;height:26px}
.rb[data-narrow="0"] .rb-stack b{font-size:15px}
.rb-spot:hover:not([aria-disabled="true"]) .rb-plq path:not(.in):not(.lip){stroke:var(--gold-hi)}
.rb-spot:hover:not([aria-disabled="true"]) .rb-plq path.in{opacity:1}
.rb.busy .rb-spot{cursor:default}
.rb-spot.hit .rb-plq .in{stroke:var(--gold-hi);opacity:1;stroke-width:1.6}
.rb-spot.won .rb-plq path:not(.in):not(.lip){stroke:var(--gold-hi);stroke-width:2.6}
.rb-spot.won,.rb-spot.push{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--gold-hi) 38%,transparent))}
.rb-spot.lost .rb-chip{opacity:.4;filter:grayscale(1)}
.rb-spot.lost .rb-stack b{text-decoration:line-through;color:var(--ivory-dim)}
.rb-pay{order:1;padding:1px 8px;border-radius:2px;background:linear-gradient(180deg,var(--gold-hi),#E8C46E);color:#1A1208;font:900 12px/16px var(--ui);white-space:nowrap;font-variant-numeric:tabular-nums}
.rb-spot.push .rb-pay{background:var(--t);font-size:11px;letter-spacing:.02em}

/* the tools under the table: quiet, outlined */
.rb-tools{display:flex;gap:8px;justify-content:center}
.rb-tools button{min-height:44px;min-width:88px;display:flex;align-items:center;justify-content:center;gap:7px;padding:6px 16px;border-radius:3px;border:1px solid var(--line);background:var(--ibtn-bg);color:var(--ibtn-ink);font:700 15px/1 var(--ui);letter-spacing:.02em;
  transition:border-color var(--t-fast) var(--ease-std),transform var(--t-press) var(--ease-out),opacity var(--t-fast) var(--ease-std)}
.rb-tools button:hover:not(:disabled){border-color:var(--gilt)}
.rb-tools button:active:not(:disabled){transform:translateY(1px)}
.rb-tools button svg{width:18px;height:18px}
.rb-tools button:disabled{opacity:.45}
@media (max-width:400px){
  .rb-tools button{min-width:0;padding:6px 12px}
  .spin.tprim{min-width:96px;padding:0 12px}
  .auto{width:48px;height:48px}
  .meter span{font-size:12px}
}
@media (max-width:340px){
  .spin.tprim{min-width:84px;padding:0 8px;font-size:17px;letter-spacing:.08em}
  .auto{width:44px;height:44px}
}

/* compact board (phones on their side, the same query as main.js COMPACT): no dealer's band or verdict line, each hand's
   name over its point beside the cards, tools in the row of plaques. A plaque keeps two lines (name, then its chips or
   its pay; the coup's result replaces the chips until the next deal). Around the board the shell gets slimmer: the HUD
   on one row and, below 340 px of height, no results strip (the history keeps every coup), so the cards keep a readable
   size at 568 × 320. */
.rb[data-compact="1"] .rb-top,.rb[data-compact="1"] .rb-verdict{display:none}
.rb[data-compact="1"] .rb-table{padding-top:12px;padding-bottom:8px}
.rb[data-compact="1"] .rb-hand{flex-direction:row;gap:10px}
.rb[data-compact="1"] .rb-hand[data-side="banker"]{flex-direction:row-reverse}
.rb[data-compact="1"] .rb-hand header{height:auto;flex-direction:column;gap:4px}
.rb[data-compact="1"] .rb-hl{align-items:center}
.rb[data-compact="1"] .rb-nat{display:none}
.rb[data-compact="1"] .rb-hname{font-size:16px}
.rb[data-compact="1"] .rb-spots{grid-template-columns:1fr .74fr 1fr auto;padding:0 6%}
.rb[data-compact="1"] .rb-spot{overflow:hidden}
.rb[data-compact="1"] .rb-spot.on small,.rb[data-compact="1"] .rb-spot.won .rb-stack,.rb[data-compact="1"] .rb-spot.push .rb-stack{display:none}
.rb-spots .rb-tools{gap:6px;align-items:center}
.rb-spots .rb-tools button{min-width:44px;padding:0 10px}
.rb-spots .rb-tools span{display:none}
@media (max-height:340px) and (min-aspect-ratio:3/2){.table-game .tstrip{display:none}}
@media (max-height:520px) and (min-aspect-ratio:3/2){
  .hud.thud{grid-template-columns:1fr auto 1fr auto;grid-template-areas:"acts acts acts acts" "bal bet win spin";padding-top:8px;padding-bottom:8px;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"}
  .hud.thud>.win{text-align:right}
  .table-game .spin.tprim{height:48px}
}
@media (max-height:520px) and (min-aspect-ratio:3/2) and (max-width:700px){
  .hud.thud{column-gap:6px;padding-left:8px;padding-right:8px}
  .meter span{font-size:12px}
  .betctl{gap:6px}.betctl .meter{min-width:64px}
  .auto{width:44px;height:44px}
  .table-game .spin.tprim{min-width:92px;padding:0 10px}
}

/* the rules panel */
.rb-pays{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:15px}
.rb-pays caption{text-align:left;font-weight:800;padding:6px 0;color:var(--ink)}
.rb-pays th,.rb-pays td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.rb-pays thead th{font-size:13px;color:var(--muted);font-weight:700}

/* big wins: deco sparkles */
#rbSparks{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.rb-spark{position:absolute;left:0;top:0;background:var(--c);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}

/* reduced motion (system setting, or the shell's body.still): end states only */
body.still .rb-hand.won .rb-medal,body.still .rb-hand.tie .rb-medal{animation:none}
body.still .rb-shoe-card,body.still .rb-shoe-gate,body.still .rb-card{transition:none}
@media (prefers-reduced-motion:reduce){
  .rb-hand.won .rb-medal,.rb-hand.tie .rb-medal{animation:none}
  .rb-shoe-card,.rb-shoe-gate,.rb-card{transition:none}
}