/* Gap Rider — Red Dog in a rodeo tack room. Layout comes from the table shell (shell.css, table.css); this file restyles
   it by tokens (js/skin.js themeMap, text colours checked against their grounds there) and draws the game's own parts.
   Art direction (docs/design-system/reelhaven/pages/art-direction.md §4–5): one lamp over the table (key light from
   above, a little to the left: lit top edges and left faces, shade below and right), real materials — pine with grain
   for the gate, the shoe and the fence posts; tooled saddle leather for the table; letterpress card stock for the cards,
   the hanging sign, the pay tags and the stamp; clay chips; turquoise inlay for the gap; forged iron round the main
   button. The room behind is a dark plank wall (static layers, nothing animates there). Colour only where it carries
   the state of the hand: the gap, a win, a loss. Text sits on solid colours (lighting is inset shadow, not a gradient
   under the text) so every contrast is checked. Motion: transform and opacity only. */
:root{--display:"Holtwood One SC",Georgia,serif;--ui:"Fira Sans",system-ui,sans-serif;--radius:10px;--radius-sm:7px;
  --prim-radius:14px 14px 999px 999px / 14px 14px 70% 70%;
  --leather:#6E3B1F;--leather-lo:#4A2512;--leather-deep:#2E170B;--stitch:#D8BC86;
  --wood:#8A5A2E;--wood-hi:#B07A45;--wood-lo:#553517;--rope:#D8BC86;--rope-lo:#8E6C3A;
  --sign:#F2E2C2;--sign-ink:#2A1A12;--cream:#F4E6CB;--brass:#D9A441;--red:#A62E1D;--stock:#F6EAD3;--card-ink:#2A1A12;
  --iron:#3A3E41;--iron-lo:#1E2123;--iron-hi:#A9B1B6;--chip:#A62E1D;--chip-lo:#5E1A10;
  /* pine, lit from the left: fine grain over the board's own light-to-shade */
  --pine-v:repeating-linear-gradient(90deg,transparent 0 3px,rgb(40 20 6 / .16) 3px 4px,transparent 4px 9px,rgb(40 20 6 / .1) 9px 10px,transparent 10px 15px),linear-gradient(90deg,var(--wood-hi) 0,var(--wood) 42%,var(--wood-lo) 100%);
  --pine-h:repeating-linear-gradient(180deg,transparent 0 2px,rgb(40 20 6 / .15) 2px 3px,transparent 3px 6px),linear-gradient(180deg,var(--wood-hi) 0,var(--wood) 45%,var(--wood-lo) 100%);
  --grain-img: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");
  --pebble-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .03 0 0 0 0 0 0 0 0 1 -.42'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:var(--scheme,dark)}
body{background:var(--bg)}
.logo h1{font-weight:400;letter-spacing:.03em;text-shadow:0 2px 0 rgb(0 0 0 / .28)}
.panel h2,.ovcard h2{font-weight:400;letter-spacing:.03em}
/* the wood-type face is wide: the big-win titles and panel titles a size down (panel titles clear of the close button) */
.ovcard h2{font-size:clamp(32px,6.4vw,84px);overflow-wrap:normal}
.overlay.bigwin.t1 h2{font-size:clamp(36px,7.4vw,98px)}.overlay.bigwin.t2 h2{font-size:clamp(40px,8.4vw,112px)}
.panel h2{font-size:clamp(21px,3.2vw,34px);padding-right:52px}
.panel h3{font-family:var(--display);font-weight:400;font-size:clamp(17px,2.2vw,22px);letter-spacing:.02em}

/* ---- the room: a barn wall of vertical boards (a board centred behind the table), the lamp's pool and the dark corners
   come from table.css (--lamp, --room-vignette), one fine grain over all of it ---- */
.gr-wall{background-color:var(--plank);
  background-image:linear-gradient(90deg,var(--seam) 0 2px,var(--plank-hi) 2px 3px,transparent 3px),
    linear-gradient(90deg,rgb(0 0 0 / .1) 0 96px,transparent 96px 192px,rgb(255 236 210 / .035) 192px),
    linear-gradient(90deg,transparent 0 11px,rgb(0 0 0 / .07) 11px 12px,transparent 12px 29px,rgb(0 0 0 / .05) 29px 30px,transparent 30px 61px,rgb(0 0 0 / .06) 61px 62px,transparent 62px),
    linear-gradient(180deg,rgb(0 0 0 / var(--wall-shade,.3)),transparent 30%,transparent 66%,rgb(0 0 0 / calc(var(--wall-shade,.3) * 1.15)));
  background-size:96px 100%,288px 100%,96px 100%,100% 100%;background-position:calc(50% - 48px) 0,calc(50% - 144px) 0,calc(50% - 48px) 0,0 0}
.gr-grain{background:var(--grain-img) 0 0/160px;opacity:var(--grain-o,.06)}

/* ---- the board: a pine rodeo gate around a saddle-leather table ---- */
.table-game .board.tboard{flex:1 1 auto;min-height:0}
.gr-arena{--cw:96px;--ch:calc(var(--cw) * 1.4);--post:14px;--pad:12px;--vgap:10px;--lantern:132px;width:min(100%,calc(var(--cw) * 4.9 + 48px));height:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:center}
.gr-arena.narrow{--post:9px;--pad:8px}
/* the lamp that lights the table, hanging on its rope in the room above the gate — only where a tall screen leaves that
   room (main.js layout() sets .lamp when ≥ 120 px are free): a tin barn lantern, its glass lit from the flame, a warm
   pool round it. Static: one background, no animation. */
.gr-arena.lamp::before{content:"";flex:1 1 0;min-height:0;margin-bottom:-4px;pointer-events:none;
  background:radial-gradient(circle 170px at 50% calc(100% - min(100%,var(--lantern)) * .49),rgb(255 196 120 / .26),rgb(255 170 90 / .09) 34%,transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 600'%3E%3Cdefs%3E%3ClinearGradient id='m' x2='1'%3E%3Cstop offset='0' stop-color='%236E6862'/%3E%3Cstop offset='.24' stop-color='%23BDB6AC'/%3E%3Cstop offset='.55' stop-color='%2357514B'/%3E%3Cstop offset='1' stop-color='%2326221F'/%3E%3C/linearGradient%3E%3CradialGradient id='g' cx='.5' cy='.5' r='.62'%3E%3Cstop offset='0' stop-color='%23FFF4D2'/%3E%3Cstop offset='.32' stop-color='%23FFC870'/%3E%3Cstop offset='.7' stop-color='%23D97A2C'/%3E%3Cstop offset='1' stop-color='%237A3410'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M30 0V478' stroke='%231C120B' stroke-width='2.2'/%3E%3Cg transform='translate(0 470)'%3E%3Ccircle cx='30' cy='8' r='4' fill='none' stroke='%234B4440' stroke-width='2.2'/%3E%3Cpath d='M16 30Q30 4 44 30' fill='none' stroke='%234B4440' stroke-width='2.2'/%3E%3Cpath d='M26 16h8v9h-8z' fill='url(%23m)'/%3E%3Cpath d='M22 25h16l7 12H15z' fill='url(%23m)'/%3E%3Cpath d='M17 37h26v4H17z' fill='url(%23m)'/%3E%3Cpath d='M18 41C10 56 10 78 18 92h24c8-14 8-36 0-51z' fill='url(%23g)'/%3E%3Cpath d='M30 51c4 8 5 16 0 22-5-6-4-14 0-22z' fill='%23FFFBEA'/%3E%3Cpath d='M22 41.5v50M30 41v51M38 41.5v50M13.5 66q16.5 5 33 0' fill='none' stroke='%233A3330' stroke-width='1.5' stroke-opacity='.85'/%3E%3Cpath d='M18.5 47C14.5 58 14.5 74 19.5 86' fill='none' stroke='%23FFF8E6' stroke-opacity='.55' stroke-width='1.4'/%3E%3Cpath d='M15 92h30c4 0 6 3 6 7v7c0 4-3 6-7 6H16c-4 0-7-2-7-6v-7c0-4 2-7 6-7z' fill='url(%23m)'/%3E%3Cpath d='M13 96h34' stroke='%23E8E2D8' stroke-opacity='.35' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat 50% 100% / auto calc(min(100%,var(--lantern)) * 4.615)}
.gr-gate{position:relative;width:100%;padding:0 calc(var(--post) + 3px) 4px;display:flex;flex-direction:column}
/* the two gate posts: pine, a cap, two iron hinge straps, a cast shadow */
.gr-gate::before,.gr-gate::after{content:"";position:absolute;top:0;bottom:0;width:var(--post);border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,transparent 18%,var(--iron) 18% calc(18% + 7px),transparent calc(18% + 7px) 74%,var(--iron) 74% calc(74% + 7px),transparent calc(74% + 7px)),var(--pine-v);
  box-shadow:inset 0 0 0 1px rgb(30 14 4 / .5),inset 0 3px 0 rgb(255 226 180 / .18),0 12px 18px -8px rgb(0 0 0 / .65)}
.gr-gate::before{left:0}.gr-gate::after{right:0}
/* the top rail and the sign that hangs from it on two twisted ropes */
.gr-top{position:relative;display:flex;justify-content:center;padding-top:16px;min-height:44px}
.gr-top::before{content:"";position:absolute;left:calc(-3px - var(--post));right:calc(-3px - var(--post));top:3px;height:12px;border-radius:3px;background:var(--pine-h);
  box-shadow:inset 0 0 0 1px rgb(30 14 4 / .45),inset 0 1px 0 rgb(255 226 180 / .22),0 7px 10px -5px rgb(0 0 0 / .6)}
.gr-sign{--rule:rgb(42 26 18 / .5);position:relative;z-index:1;min-width:min(56%,320px);max-width:72%;padding:5px 16px 6px;border-radius:4px;background:var(--sign);color:var(--sign-ink);
  text-align:center;transform-origin:50% -14px;
  box-shadow:inset 0 0 0 1px rgb(90 56 25 / .45),inset 0 0 0 4px var(--sign),inset 0 0 0 5px var(--rule),inset 0 -3px 6px -2px rgb(120 80 30 / .22),0 1px 0 rgb(255 255 255 / .12),0 12px 16px -8px rgb(0 0 0 / .7)}
.gr-sign::before,.gr-sign::after{content:"";position:absolute;top:-14px;width:3px;height:14px;border-radius:2px;
  background:repeating-linear-gradient(-55deg,var(--rope) 0 2px,var(--rope-lo) 2px 3.4px)}
.gr-sign::before{left:16%}.gr-sign::after{right:16%}
.gr-sign-main,.gr-sign-sub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gr-sign-main{font-family:var(--display);font-weight:400;font-size:clamp(14px,calc(var(--cw) * .13),23px);line-height:1.25;letter-spacing:.02em}
.gr-sign-sub{min-height:1.25em;font-size:clamp(12px,calc(var(--cw) * .088),16px);font-weight:600;line-height:1.25}
.gr-sign[data-tone="open"]{--rule:var(--gap-deep)}
.gr-sign[data-tone="win"]{--rule:var(--gap-deep);box-shadow:inset 0 0 0 1px rgb(90 56 25 / .45),inset 0 0 0 3px var(--sign),inset 0 0 0 6px var(--rule),inset 0 -3px 6px -2px rgb(120 80 30 / .22),0 12px 16px -8px rgb(0 0 0 / .7)}
.gr-sign[data-tone="win"] .gr-sign-main{color:var(--gap-deep)}
.gr-sign[data-tone="lose"]{--rule:var(--red-ink)}
.gr-sign[data-tone="lose"] .gr-sign-main{color:var(--red-ink)}
/* the shoe: a pine box with an iron band on the top rail, a card back showing */
.gr-shoe{position:absolute;right:calc(var(--post) * -1 + 2px);top:-3px;z-index:2;width:max(34px,calc(var(--cw) * .44));aspect-ratio:1/1.05;border-radius:4px 4px 3px 3px;
  background:var(--pine-h);box-shadow:inset 0 -6px 0 var(--iron),inset 0 -7px 0 rgb(255 255 255 / .08),inset 0 0 0 1px rgb(30 14 4 / .6),0 10px 14px -6px rgb(0 0 0 / .7);overflow:hidden}
.gr-shoe i{position:absolute;left:16%;right:14%;top:-18%;bottom:30%;border-radius:4px;background:center/100% 100% no-repeat;transform:rotate(-9deg);box-shadow:0 3px 4px rgb(0 0 0 / .45)}

/* the table: tooled saddle leather, lit by the lamp from above (a warm pool, darker edges), a pebbled grain, a rolled
   edge and saddle stitching inside it */
.gr-leather{position:relative;margin-top:6px;padding:var(--pad);border-radius:18px;background-color:var(--leather);
  background-image:radial-gradient(ellipse 80% 62% at 46% 16%,rgb(255 196 140 / .17),transparent 70%),radial-gradient(ellipse 115% 100% at 50% 40%,transparent 56%,rgb(18 7 2 / .5) 100%),var(--pebble-img);
  background-size:auto,auto,120px;
  box-shadow:inset 0 1px 0 rgb(255 214 170 / .2),inset 0 0 0 1px rgb(20 8 2 / .6),inset 0 0 0 3px rgb(140 82 46 / .35),inset 0 -12px 20px -12px rgb(0 0 0 / .55),0 2px 0 var(--leather-deep),0 28px 40px -18px rgb(0 0 0 / .85);
  display:flex;flex-direction:column;align-items:center;gap:var(--vgap)}
/* saddle stitching in a tooled groove */
.gr-leather::before{content:"";position:absolute;inset:7px;border:1.5px dashed color-mix(in srgb,var(--stitch) 62%,transparent);border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 2px rgb(30 12 4 / .18),inset 0 0 0 2px rgb(30 12 4 / .18)}
.gr-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--gap) 55%,transparent),transparent 66%)}
.gr-leather.won .gr-glow{opacity:.32}

/* ---- the three card spots (pressed into the leather) and the cards ---- */
.gr-row{display:grid;grid-template-columns:repeat(3,var(--cw));gap:calc(var(--cw) * .17);justify-content:center}
.gr-slot{position:relative;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .09);background:rgb(20 8 2 / .16);
  box-shadow:inset 0 2px 5px rgb(0 0 0 / .45),inset 0 -1px 0 rgb(255 214 170 / .1),0 1px 0 rgb(255 214 170 / .07),inset 0 0 0 1px color-mix(in srgb,var(--stitch) 18%,transparent)}
.gr-slot.mid{box-shadow:inset 0 2px 5px rgb(0 0 0 / .45),inset 0 -1px 0 rgb(255 214 170 / .1),0 1px 0 rgb(255 214 170 / .07),inset 0 0 0 1.5px color-mix(in srgb,var(--gap-leather) 45%,transparent)}
.gr-slot.mid::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:calc(var(--cw) * .5);color:var(--gap-leather);opacity:0;transition:opacity var(--t-base,220ms) var(--ease-std,ease)}
.gr-arena.decide .gr-slot.mid{box-shadow:inset 0 2px 5px rgb(0 0 0 / .45),inset 0 0 0 2px var(--gap-leather),0 0 22px -4px color-mix(in srgb,var(--gap) 60%,transparent)}
.gr-arena.decide .gr-slot.mid::after{opacity:1;animation:gr-wait 1.6s var(--ease-std,ease) .4s infinite alternate}
@keyframes gr-wait{to{opacity:.55}}
.gr-card{position:absolute;inset:0;perspective:800px}
.gr-flip{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
.gr-card.up .gr-flip{transform:none}
.gr-face,.gr-back{position:absolute;inset:0;border-radius:calc(var(--cw) * .09);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* card stock: a warm centre where the lamp falls, older edges, a lit top edge, a contact shadow on the leather */
.gr-face{overflow:hidden;background:var(--stock) radial-gradient(130% 95% at 36% 22%,#FCF6EA 0,var(--stock) 52%,#E6D1AC 100%);color:var(--card-ink);
  box-shadow:inset 0 0 0 1px rgb(122 90 48 / .4),inset 0 1px 0 rgb(255 255 255 / .8),0 1px 1px rgb(30 12 4 / .45),0 9px 14px -6px rgb(20 8 2 / .7)}
.gr-card.red .gr-face{color:var(--red)}
.gr-back{transform:rotateY(180deg);background:var(--card-back) center/100% 100% no-repeat;box-shadow:inset 0 1px 0 rgb(255 214 170 / .25),0 1px 1px rgb(30 12 4 / .45),0 9px 14px -6px rgb(20 8 2 / .7)}
/* the wood-type indices; "10" set tighter and smaller so it clears the pip column */
.gr-ix{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--display);font-size:max(11px,calc(var(--cw) * .17))}
.gr-ix b{font-weight:400;letter-spacing:-.04em}
.gr-ix.two b{font-size:.78em;letter-spacing:-.1em;margin-right:.08em}
.gr-ix.tl{left:6%;top:4.5%}.gr-ix.br{right:6%;bottom:4.5%;transform:rotate(180deg)}
.gr-ix svg{width:max(8px,calc(var(--cw) * .12));height:max(8px,calc(var(--cw) * .12));margin-top:.14em;fill:currentColor}
/* the pips, printed (2 … 10 in their real layouts, the Ace in a rope ring): one SVG over the whole face */
.gr-pips{position:absolute;inset:0;width:100%;height:100%;fill:currentColor}
/* court cards: an engraved cartouche — a double rule, a fine hatch fading to clean stock behind the letter */
.gr-court{position:absolute;inset:14% 27%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4%;
  border:max(3px,calc(var(--cw) * .036)) double color-mix(in srgb,currentColor 62%,transparent);border-radius:calc(var(--cw) * .03);
  background:radial-gradient(closest-side,var(--stock) 38%,transparent 100%),repeating-linear-gradient(135deg,color-mix(in srgb,currentColor 14%,transparent) 0 1px,transparent 1px 3.5px)}
.gr-big{position:relative;font-family:var(--display);font-size:calc(var(--cw) * .34);line-height:.9}
.gr-pip{position:relative;width:calc(var(--cw) * .2);height:calc(var(--cw) * .2);fill:currentColor}

/* ---- the rank rail: 2 … A stamped into a leather strap; the gate ranks are pine (the posts), the gap is turquoise inlay,
   the rider (a star) marks the third card in brass when it rode through, red when it missed ---- */
.gr-rail{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:3px;width:min(100%,calc(var(--cw) * 3.7));margin:0;padding:0;list-style:none}
.gr-rail li{position:relative;height:clamp(22px,calc(var(--cw) * .27),32px);display:grid;place-items:center;border-radius:3px;background:var(--leather-lo);color:var(--stitch-ink);
  box-shadow:inset 0 1px 3px rgb(0 0 0 / .5),0 1px 0 rgb(255 214 170 / .09);transition:background-color var(--t-fast,140ms) var(--ease-std,ease),color var(--t-fast,140ms) var(--ease-std,ease)}
.gr-rail b{font-size:clamp(11px,calc(var(--cw) * .125),15px);font-weight:700}
.gr-rail li.gate{background:var(--wood);color:#FFF4E0;box-shadow:inset 0 1px 0 rgb(255 226 180 / .35),inset 0 -2px 0 var(--wood-lo),0 2px 3px rgb(0 0 0 / .35)}
.gr-rail li.gap{background:var(--gap-leather);color:var(--gap-leather-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .38),inset 0 -2px 0 rgb(0 0 0 / .2),0 0 0 1px rgb(20 8 2 / .5)}
.gr-rail li.rider.hit{background:var(--brass);color:#2A1A12;box-shadow:inset 0 1px 0 rgb(255 246 210 / .6),inset 0 -2px 0 rgb(90 60 16 / .5),0 0 0 2px var(--cream)}
.gr-rail li.rider.miss{background:var(--red);color:var(--cream);box-shadow:inset 0 1px 0 rgb(255 220 200 / .3),inset 0 -2px 0 rgb(60 10 4 / .4),0 0 0 2px var(--cream)}
.gr-rail li.rider::after{content:"";position:absolute;left:50%;top:-12px;width:12px;height:12px;transform:translateX(-50%);background:var(--cream);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---- the betting spots: the bet, and the raise spot (the Raise button while a hand waits); clay chips with edge spots ---- */
.gr-bets{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.gr-spot{display:flex;align-items:center;gap:8px;min-height:44px;min-width:96px;padding:4px 14px 4px 5px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--stitch) 40%,transparent);
  background:rgb(20 8 2 / .14);color:var(--stitch-ink);font:inherit;box-shadow:inset 0 2px 4px rgb(0 0 0 / .35),0 1px 0 rgb(255 214 170 / .08)}
.gr-spot span{font-size:14px;font-weight:600;letter-spacing:.01em}
.gr-spot .gr-amt{display:grid;place-items:center;min-width:36px;height:36px;padding:0 4px;border-radius:999px;border:4px dashed var(--cream);color:#2A1A12;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,linear-gradient(var(--chip),var(--chip)) border-box;box-shadow:0 2px 0 var(--chip-lo),0 4px 6px rgb(0 0 0 / .45)}
.gr-spot .gr-amt:empty{display:none}
.gr-spot.raise{padding-left:14px;transition:background-color var(--t-fast,140ms) var(--ease-std,ease),border-color var(--t-fast,140ms) var(--ease-std,ease),transform var(--t-press,90ms) var(--ease-out,ease-out)}
.gr-spot.raise.placed{padding-left:5px;border-color:color-mix(in srgb,var(--brass) 80%,transparent)}
.gr-spot.raise.live{padding-left:5px;border-color:transparent;background:var(--gap);color:var(--gap-ink);cursor:pointer;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .42),inset 0 -3px 0 rgb(0 0 0 / .18),0 2px 0 color-mix(in srgb,var(--gap) 45%,#000),0 10px 16px -8px rgb(0 0 0 / .7)}
.gr-spot.raise.live:hover:not(:disabled){filter:brightness(1.07)}
.gr-spot.raise.live:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 2px 4px rgb(0 0 0 / .25),0 1px 0 color-mix(in srgb,var(--gap) 45%,#000)}
.gr-spot.raise.live:disabled{opacity:.55;cursor:default}
.gr-spot.raise:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---- the stamp over the middle card: a letterpress tag, inked in the result's colour, double rule ---- */
.gr-stamp{--stamp:var(--sign-ink);position:absolute;left:50%;top:calc(var(--pad) + var(--ch) * .8);z-index:5;transform:translate(-50%,-50%) rotate(-8deg);pointer-events:none;
  padding:.24em .62em .18em;border-radius:4px;background:var(--sign);color:var(--stamp);font-family:var(--display);font-size:max(14px,calc(var(--cw) * .2));line-height:1.1;letter-spacing:.06em;
  box-shadow:inset 0 0 0 2px var(--stamp),inset 0 0 0 4px var(--sign),inset 0 0 0 5px var(--stamp),0 2px 0 rgb(120 80 30 / .45),0 12px 16px -8px rgb(0 0 0 / .75)}
.gr-stamp[data-kind="in"]{--stamp:var(--gap-deep)}
.gr-stamp[data-kind="out"]{--stamp:var(--red-ink)}
.gr-stamp[data-kind="trips"]{--stamp:var(--trips-ink)}

/* ---- the pay ladder (#controls): one row of letterpress tags under a "Spread" caption; the current spread's tag lights ---- */
.gr-pays{display:flex;align-items:center;justify-content:center;gap:8px}
.gr-cap{font-size:13px;font-weight:600;color:var(--ink)}
.gr-ladder{display:flex;gap:6px;justify-content:center;margin:0;padding:0;list-style:none}
.gr-ladder li.trips{margin-left:8px}
.gr-ladder li{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;padding:4px 8px 5px;border-radius:4px;background:var(--sign);color:var(--sign-ink);
  box-shadow:inset 0 0 0 1px rgb(90 56 25 / .45),inset 0 -2px 4px -1px rgb(120 80 30 / .2),0 6px 10px -6px rgb(0 0 0 / .7);transition:background-color var(--t-fast,140ms) var(--ease-std,ease),color var(--t-fast,140ms) var(--ease-std,ease)}
.gr-ladder span{font-size:12px;font-weight:600;white-space:nowrap}
.gr-ladder b{font-family:var(--display);font-weight:400;font-size:15px;line-height:1.15}
.gr-ladder li.on{background:var(--gap);color:var(--gap-ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .42),inset 0 -2px 0 rgb(0 0 0 / .18),0 6px 12px -6px rgb(0 0 0 / .7)}

/* ---- the corral-fence HUD (dark pine rails between two posts) and the forged horseshoe round the main button ---- */
.hud.thud{position:relative;background-color:var(--hud-bg);border:0;border-radius:6px;
  background-image:repeating-linear-gradient(180deg,transparent 0 5px,rgb(0 0 0 / .1) 5px 6px,transparent 6px 13px),linear-gradient(180deg,rgb(255 220 170 / .06),transparent 40%,rgb(0 0 0 / .2));
  box-shadow:inset 0 1px 0 rgb(255 220 170 / .14),inset 0 0 0 1px rgb(0 0 0 / .45),0 2px 0 #1C1009,0 16px 26px -12px rgb(0 0 0 / .75)}
.hud.thud::before,.hud.thud::after{content:"";position:absolute;top:-8px;bottom:-8px;width:10px;border-radius:3px 3px 2px 2px;
  background:radial-gradient(circle at 50% 22%,var(--iron-hi) 0 1.3px,var(--iron-lo) 1.6px 2.4px,transparent 2.8px),radial-gradient(circle at 50% 78%,var(--iron-hi) 0 1.3px,var(--iron-lo) 1.6px 2.4px,transparent 2.8px),var(--pine-v);
  box-shadow:inset 0 0 0 1px rgb(30 14 4 / .5),inset 0 2px 0 rgb(255 226 180 / .2),0 8px 12px -6px rgb(0 0 0 / .6)}
.hud.thud::before{left:-5px}.hud.thud::after{right:-5px}
.thud .meter span{color:var(--rail-muted)}
.thud .meter b{color:var(--rail-ink)}
.thud .meter.win b{color:var(--rail-win)}
.hud.thud .meter.win.at-zero b{color:var(--rail-muted)}
.thud .meter small{color:var(--rail-muted)}
.thud .pm{background:var(--wood-lo);color:var(--cream);border-color:var(--wood);box-shadow:inset 0 1px 0 rgb(255 226 180 / .18)}
.tact{background:var(--tact-bg);color:var(--tact-ink);border-color:rgb(90 56 25 / .6);box-shadow:inset 0 -2px 3px -1px rgb(120 80 30 / .22),0 4px 8px -4px rgb(0 0 0 / .6)}
.spin.tprim{position:relative;background:var(--accent);color:var(--on-accent);border:0;font-weight:400;letter-spacing:.06em;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .45),inset 0 -4px 0 rgb(0 0 0 / .16),0 0 0 4px var(--iron),0 0 0 5px var(--iron-lo),0 3px 0 5px var(--iron-lo),0 16px 22px -8px rgb(0 0 0 / .75)}
/* the nails of the shoe: six heads in the iron, lit from above */
.spin.tprim::before{content:"";position:absolute;inset:-4px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 1.6% 26%,var(--iron-hi) 0 1.3px,transparent 1.9px),radial-gradient(circle at 4.2% 55%,var(--iron-hi) 0 1.3px,transparent 1.9px),
    radial-gradient(circle at 16% 82%,var(--iron-hi) 0 1.3px,transparent 1.9px),radial-gradient(circle at 98.4% 26%,var(--iron-hi) 0 1.3px,transparent 1.9px),
    radial-gradient(circle at 95.8% 55%,var(--iron-hi) 0 1.3px,transparent 1.9px),radial-gradient(circle at 84% 82%,var(--iron-hi) 0 1.3px,transparent 1.9px)}
.spin.tprim:active:not(:disabled){transform:translateY(2px);box-shadow:inset 0 3px 6px rgb(0 0 0 / .25),0 0 0 4px var(--iron),0 0 0 5px var(--iron-lo),0 1px 0 5px var(--iron-lo),0 6px 10px -6px rgb(0 0 0 / .6)}

/* ---- the rules panel's pay table ---- */
.gr-paytab{width:100%;border-collapse:collapse;margin:4px 0 14px}
.gr-paytab th,.gr-paytab td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:left;font-weight:600}
.gr-paytab td{text-align:right;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---- narrow screens ---- */
@media (max-width:520px){
  .gr-top{min-height:44px;padding-top:15px}
  .gr-sign{padding:4px 12px 5px;min-width:62%;max-width:78%}
  .gr-pays{gap:6px}
  .gr-cap{font-size:12px}
  .gr-ladder{gap:4px}
  .gr-ladder li{min-width:42px;padding:3px 5px 4px}
  .gr-ladder li.trips{margin-left:4px}
  .gr-ladder span{font-size:12px}
  .gr-ladder b{font-size:14px}
  .gr-bets{gap:8px}
  .gr-spot{min-width:84px;padding-right:10px}
}
/* tall phones: the table sits low, near the thumb; the lamp hangs in the room above it */
@media (max-aspect-ratio:3/4){.gr-arena{justify-content:flex-end;padding-bottom:4px}}
@media (max-height:560px){.gr-top{min-height:40px;padding-top:13px}.gr-sign-sub{font-size:12px}.gr-pays{display:none}}
/* a short, wide board (phones held sideways; main.js layout() sets .wide): a wide, low gate. The sign reads on one line
   across a wider plaque, the rank rail and the betting spots stand in a column beside the cards, so the gate is the
   sign's rail and one row of cards tall and fits under the title. */
.gr-arena.wide{--pad:10px;width:min(100%,calc(var(--cw) * 3.34 + 380px))}
.gr-arena.wide .gr-top{min-height:0;padding-top:12px}
.gr-arena.wide .gr-sign{display:flex;align-items:baseline;justify-content:center;min-width:min(64%,380px);max-width:calc(100% - 2 * max(34px,var(--cw) * .44) + 8px);padding:5px 18px 6px}
.gr-arena.wide .gr-sign-sub{min-height:0;margin-left:10px;padding-left:10px;border-left:1.5px solid var(--rule)}
.gr-arena.wide .gr-sign-sub:empty{display:none}
.gr-arena.wide .gr-leather{display:grid;grid-template-columns:auto 300px;grid-template-rows:1fr auto auto 1fr;gap:0 20px;align-items:center;justify-content:center}
.gr-arena.wide .gr-row{grid-column:1;grid-row:1 / -1}
.gr-arena.wide .gr-rail{grid-column:2;grid-row:2;width:100%}
.gr-arena.wide .gr-bets{grid-column:2;grid-row:3;margin-top:var(--vgap);flex-wrap:nowrap}
/* the stamp over the middle card, as on the tall table: the row is centred in the leather */
.gr-arena.wide .gr-stamp{left:calc(var(--pad) + var(--cw) * 1.67);top:calc(50% + var(--ch) * .3)}
body.still .gr-arena.decide .gr-slot.mid::after{animation:none}
@media (prefers-reduced-motion:reduce){.gr-sign,.gr-rail li,.gr-ladder li,.gr-spot.raise,.gr-slot.mid::after{transition:none}.gr-arena.decide .gr-slot.mid::after{animation:none}}