/* The shell every game on the site wears (casino/web/gamepage.py, static/game.js), in the Inlay design language (the
   approved game board): one frame (the header over a panel on the left and the stage on the right; on phones the stage,
   the gold button right under it, then the panel), cut corners (top-left and bottom-right) on every plate, cell and
   button, one gold fill for the money action, gold hairlines for the risk steps and for what is selected, the plate and
   the history chips as the only readout. Under the game: open sections divided by space and full-width rules. A game's
   own parts are in its own stylesheet (static/<game>.css); the shared cell primitive (.gm-cell) is here. */

/* the board's number face: Big Shoulders Display (SIL OFL, assets/fonts/BigShouldersDisplay-OFL.txt), local files only */
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShoulders-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/BigShouldersDisplay-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

.gm, .gm-below {
  --shell: #060b1a; --panel: #0f1931; --stage: #0a1227; --well: #050a18;
  --cell: #1a2850; --cell-hi: #23356a; --cell-dn: #141f40;
  --ink: #eef2fb; --ink-2: #97a4c6; --ink-3: #5d6b92;
  --gold: #f2b94a; --gold-hi: #ffc95f; --gold-lo: #dba237; --gold-line: #d8a548; --on-gold: #241600;
  --ivory: #f3ead6; --win: #1ee27f; --loss: #ff4d67; --back: #b9c5e3;
  --f-ui: "Outfit", system-ui, sans-serif; --f-num: "Big Shoulders Display", "Big Shoulders", "Outfit", sans-serif;
  --t-hover: 120ms; --t-press: 80ms; --t-reveal: 180ms; --t-plate: 160ms;
  --e-out: cubic-bezier(.2, .8, .2, 1); --e-settle: cubic-bezier(.3, 1.45, .5, 1);
}

/* ---------- the frame ---------- */
.gm { --k: 10px; display: flex; flex-direction: column; margin: 8px 0 28px; color: var(--ink); font-family: var(--f-ui);
  /* every game the same height: the window's (from 600 to 1000 px); a game taller than that scales down to fit (game.js fit) */
  height: clamp(600px, calc(100vh - 110px), 1000px);
  background: var(--panel); border-radius: 16px; overflow: hidden; }
.gm button { font-family: var(--f-ui); }
.gm-head { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 50px; padding: 0 18px; }
.gm-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 15px/1 var(--f-ui); }
/* a lockup in the title (shell.title: an emblem beside the name) */
.gm-title.gm-lockup { display: inline-flex; align-items: center; gap: 8px; }
.gm-title.gm-lockup > :is(canvas, svg, img) { flex: none; }
.gm-hr { display: flex; align-items: center; gap: 8px; flex: none; }
.gm-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 288px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.gm-panel { min-height: 0; min-width: 0; overflow-y: auto; scrollbar-width: thin; padding: 6px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.gm-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 12px 12px 0; }
.gm-stage { --heat: 0; position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--stage); border-radius: 14px; overflow: hidden; }
.gm-stage::after { content: ""; position: absolute; inset: 0; z-index: 9; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / var(--heat)); transition: box-shadow .35s var(--e-out); }
.gm-play { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.gm-slot { display: none; }
.gm-pslot { margin-top: 4px; }

@media (max-width: 899px) {
  .gm { height: auto; }
  .gm-head { padding: 0 14px; }
  .gm-body { display: flex; flex-direction: column; }
  .gm-main { order: 1; padding: 0 10px; }
  .gm-panel { order: 2; overflow: visible; padding: 16px 16px 20px; }
  .gm-slot { display: block; padding-top: 10px; }
  .gm-slot .gm-actw { margin: 0; }
  .gm-play { min-height: 320px; }
}

/* ---------- the header: Turbo, sound, settings, Fair play ---------- */
.gm-turbo, .gm-sound, .gm-gear { --k: 6px; --fill: var(--panel); --lnc: rgb(151 164 198 / .32); position: relative; isolation: isolate; height: 28px;
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 8px; border: 0; background: var(--lnc); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  color: var(--ink-2); font: 600 13px/1 var(--f-ui); cursor: pointer; transition: transform var(--t-press) var(--e-out); }
.gm-turbo::after, .gm-sound::after, .gm-gear::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px));
  transition: background-color var(--t-hover) var(--e-out); }
.gm-sound, .gm-gear { width: 30px; padding: 0; justify-content: center; }
.gm-turbo:hover, .gm-sound:hover, .gm-gear:hover, .gm-gear[aria-expanded="true"] { --fill: var(--cell); color: var(--ink); }
.gm-turbo:active, .gm-sound:active, .gm-gear:active { transform: scale(.95); }
.gm-turbo svg, .gm-sound svg, .gm-gear svg { width: 16px; height: 16px; overflow: visible; flex: none; }
.gm-turbo path { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; transition: stroke var(--t-hover), fill var(--t-hover); }
.gm-turbo[aria-pressed="true"] { --lnc: var(--gold-line); color: var(--ink); }
.gm-turbo[aria-pressed="true"] path { stroke: var(--gold); fill: rgb(242 185 74 / .18); }
.gm-sound svg, .gm-gear svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm-sound .spk { fill: rgb(151 164 198 / .18); stroke: currentColor; stroke-width: 2; }
.gm-sound .off { display: none; }
.gm-sound[aria-pressed="true"] .wave { display: none; } .gm-sound[aria-pressed="true"] .off { display: inline; }
.gm-fair { margin-left: 4px; color: var(--ink-2); font: 500 13px/1 var(--f-ui); text-decoration: none; white-space: nowrap; }
.gm-fair:hover { color: var(--ink); }
.gm-gearw { position: relative; display: inline-flex; }
@media (max-width: 420px) { .gm-hr { gap: 6px; } .gm-fair { margin-left: 2px; } }

/* the settings menu (under the gear): animation speed, sound, volume, hotkeys */
.gm-menu { position: absolute; right: -6px; top: calc(100% + 8px); z-index: 30; display: grid; gap: 14px; width: 280px; padding: 16px;
  border-radius: 14px; background: var(--panel); box-shadow: 0 0 0 1px rgb(151 164 198 / .22), 0 18px 40px rgb(3 6 16 / .7);
  animation: gm-menu-in .18s var(--e-out); }
.gm-menu[hidden] { display: none; }
.gm-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; }
.gm-menu-col { flex-direction: column; align-items: stretch; gap: 8px; }
.gm-menu-note { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45; font-weight: 500; }
.gm-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 10px; background: var(--well); }
.gm-seg button { min-height: 34px; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font: 600 13px var(--f-ui); cursor: pointer; }
.gm-seg button:hover { color: var(--ink); }
.gm-seg button[aria-pressed="true"] { background: var(--cell); color: var(--ink); }
.gm-switch { position: relative; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: var(--well);
  box-shadow: inset 0 0 0 1px rgb(151 164 198 / .3); cursor: pointer; transition: background .15s ease; }
.gm-switch i { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-2); transition: translate .15s ease, background .15s ease; }
.gm-switch[aria-checked="true"] { background: var(--gold); box-shadow: none; }
.gm-switch[aria-checked="true"] i { translate: 18px 0; background: var(--on-gold); }
.gm-menu input[type="range"] { flex: 0 0 140px; width: 140px; height: auto; accent-color: var(--gold); }
@keyframes gm-menu-in { from { opacity: 0; translate: 0 -6px; } }

/* ---------- the panel ---------- */
.gm-modes { display: flex; padding: 4px; height: 44px; flex: none; border-radius: 10px; background: var(--well); }
.gm-modes[hidden] { display: none; }
.gm-modes button { flex: 1; border: 0; border-radius: 7px; background: none; color: var(--ink-2); font: 600 14px var(--f-ui); cursor: pointer;
  transition: background-color var(--t-hover) var(--e-out), color var(--t-hover); }
.gm-modes button:hover { color: var(--ink); }
.gm-modes button[aria-selected="true"] { background: var(--cell); color: var(--ink); }
.gm.autoplaying .gm-modes button[aria-selected="false"] { color: var(--ink-3); cursor: default; }
.gm-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 4px; }
.gm-label { color: var(--ink-2); font: 500 13px/1.2 var(--f-ui); }
.gm-amount, .gm-input { display: flex; align-items: center; gap: 8px; min-width: 0; height: 44px; padding: 0 6px 0 12px; border: 0;
  border-radius: 10px; background: var(--well); }
.gm-amount:focus-within, .gm-input:focus-within { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); }
.gm-amount output { flex: 1; font: 600 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; }
.gm-input > span, .gm-input .u { flex: none; color: var(--ink-3); font: 600 15px var(--f-ui); padding-right: 6px; }
.gm-input img, .gm-amount img { width: 16px; height: 16px; flex: none; }
.gm input, .gm-below input { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; height: 100%; padding: 0; margin: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--ink); font: 600 15px var(--f-ui); font-variant-numeric: tabular-nums; outline: none; }
.gm input::placeholder { color: var(--ink-3); opacity: 1; }
.gm input:disabled { color: var(--ink); -webkit-text-fill-color: var(--ink); opacity: 1; }
.gm-coin { width: 16px; height: 16px; flex: none; display: inline-block; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 3px #d39a32; }
/* the small cut buttons inside a field (½, 2×, ∞, Reset / Increase) */
.gm-amount button, .gm-input button { --k: 5px; flex: none; height: 32px; min-width: 38px; padding: 0 8px; border: 0; position: relative; isolation: isolate;
  --fill: var(--cell); --lnc: var(--fill); background: var(--lnc); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); color: var(--ink-2); font: 600 13px var(--f-ui); cursor: pointer;
  transition: background-color var(--t-hover), color var(--t-hover), transform var(--t-press); }
.gm-amount button::after, .gm-input button::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.gm-amount button:hover, .gm-input button:hover { --fill: var(--cell-hi); color: var(--ink); }
.gm-amount button:active, .gm-input button:active { transform: scale(.95); }
.gm-amount button:disabled, .gm-input button:disabled { opacity: .45; cursor: default; transform: none; }
/* chips: quick picks and true settings (mines, risk, rows) */
.gm-picks { display: flex; gap: 6px; }
.gm-picks button { --k: 6px; --fill: var(--cell); --lnc: var(--fill); position: relative; isolation: isolate; flex: 1; min-width: 0; height: 38px; padding: 0 6px;
  border: 0; background: var(--lnc); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); color: var(--ink-2); font: 600 14px var(--f-ui); cursor: pointer;
  transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.gm-picks button::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill); transition: background-color var(--t-hover);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.gm-picks button:hover { --fill: var(--cell-hi); color: var(--ink); }
.gm-picks button:active { transform: scale(.95); }
.gm-picks button[aria-pressed="true"] { --lnc: var(--gold-line); color: var(--ink); }
.gm-picks button:disabled { opacity: .5; cursor: default; transform: none; }
.gm-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gm-pair .gm-field { min-width: 0; }
/* read-only stats in the panel (dice: multiplier, target, chance) */
.gm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 0; }
.gm-stats div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gm-stats dt { color: var(--ink-2); font: 500 13px var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-stats dd { margin: 0; height: 40px; display: flex; align-items: center; padding: 0 10px; border-radius: 10px; background: var(--well);
  font: 700 19px/1 var(--f-num); font-variant-numeric: tabular-nums; }

/* Auto: number of bets, the profit, on win / on loss, the stops */
.gm-auto { display: flex; flex-direction: column; gap: 6px; }
.gm-auto[hidden] { display: none; }
.gm-auto .gm-label { white-space: nowrap; }
.gm-prof { height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: var(--well); overflow: hidden; white-space: nowrap;
  color: var(--ink-2); font: 700 22px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.gm-prof.up { color: var(--win); } .gm-prof.down { color: var(--loss); }
.gm-rule { padding-right: 12px; }
.gm-rule button[aria-pressed="true"] { --lnc: var(--gold-line); color: var(--ink); }
.gm-rule input { text-align: right; }
.gm-rule.reset input, .gm-rule.reset > span { opacity: .4; }
.gm.autoplaying .gm-auto .gm-input, .gm.autoplaying .gm-amount button, .gm.autoplaying .gm-picks { opacity: .5; pointer-events: none; }
.gm.autoplaying .gm-amount { pointer-events: none; }

/* ---------- the action: one gold button, hairline secondaries beside it ---------- */
.gm-actw { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gm-actrow { display: flex; gap: 8px; width: 100%; }
.gm-secs { display: contents; }
.gm .gm-go { --k: 10px; flex: 1 1 auto; min-width: 0; height: 52px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 0; clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  background: var(--gold); color: var(--on-gold); box-shadow: none; filter: none; font: 700 16px/1 var(--f-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out), opacity var(--t-hover); }
.gm .gm-go:hover { background: var(--gold-hi); color: var(--on-gold); filter: none; box-shadow: none; }
.gm .gm-go:active { background: var(--gold-lo); transform: scale(.98); }
.gm .gm-go:disabled { opacity: .38; cursor: default; background: var(--gold); color: var(--on-gold); transform: none; }
.gm-sec { --k: 10px; --fill: var(--panel); --lnc: rgb(216 165 72 / .55); position: relative; isolation: isolate; flex: 0 0 auto; min-width: 30%; height: 52px;
  padding: 0 18px; border: 0; background: var(--lnc); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); color: var(--gold); font: 600 15px/1 var(--f-ui); white-space: nowrap; cursor: pointer;
  transition: transform var(--t-press) var(--e-out); }
.gm-sec::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill); transition: background-color var(--t-hover);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.gm-sec:hover { --lnc: var(--gold-line); --fill: var(--cell); }
.gm-sec:active { transform: scale(.97); }
.gm-sec:disabled { opacity: .4; cursor: default; transform: none; }
.gm-slot .gm-sec { --fill: var(--panel); }
@media (max-width: 899px) { .gm .gm-go, .gm-sec { height: 56px; } }
.gm-login { --k: 10px; display: grid; place-items: center; height: 44px; background: var(--well); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); color: var(--ink-2);
  font: 600 14px var(--f-ui); text-decoration: none; }
.gm-login:hover { color: var(--ink); background: var(--cell); }
/* a short line beside the action ("Pick tiles on the board first"), and the shell's notes */
.gm-note { margin: 0; display: flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--ink); font: 500 13px/1.35 var(--f-ui); }
.gm-note::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--gold-line); clip-path: polygon(2px 0, 100% 0, 100% 6px, 6px 100%, 0 100%, 0 2px); }
.gm-note:empty { display: none; }
.gm-note.quiet { color: var(--ink-2); } .gm-note.quiet::before { background: var(--ink-3); }
.gm-note.bad::before { background: var(--loss); }
.gm-notes { display: grid; gap: 6px; }
.gm-notes:empty { display: none; }
.gm-help { margin: auto 0 0; padding-top: 8px; color: var(--ink-3); font: 500 13px/1.5 var(--f-ui); }
.gm-help a { color: var(--ink-2); }

/* ---------- the rail under the stage: the plate and the history chips ---------- */
.gm-rail { flex: none; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 10px; position: relative; z-index: 6; }
.gm-plate { --k: 8px; --fill: var(--well); --lnc: transparent; position: relative; isolation: isolate; flex: none; height: 44px; min-width: 150px; padding: 0 14px;
  display: flex; align-items: center; gap: 10px; overflow: hidden; background: var(--lnc); clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); transition: opacity .2s; }
.gm-plate::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.gm-plate b { position: relative; z-index: 3; font: 800 28px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.gm-plate span { position: relative; z-index: 3; font: 600 15px/1 var(--f-ui); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.gm-plate span i { font-style: normal; color: var(--ink-3); margin-left: 6px; }
.gm-plate.idle b { color: var(--ink-3); }
.gm-plate.live { --lnc: rgb(216 165 72 / calc(.22 + var(--heat, 0) * .78)); }
.gm-plate.is-win { --lnc: var(--win); } .gm-plate.is-win b { color: var(--win); } .gm-plate.is-win span { color: var(--ink); }
.gm-plate.is-loss { --lnc: rgb(255 77 103 / .7); } .gm-plate.is-loss b { color: var(--ink-3); } .gm-plate.is-loss span { color: var(--loss); }
.gm-plate.is-back { --lnc: var(--back); } .gm-plate.is-back b, .gm-plate.is-back span { color: var(--back); }
.gm-plate.old { opacity: .5; }
.gm-plate::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgb(30 226 127 / .28), transparent); }
.gm-plate.glint::before { animation: gm-glint .65s var(--e-out) .05s 1; }
@keyframes gm-glint { 0% { opacity: 1; transform: translateX(-110%); } 100% { opacity: 1; transform: translateX(280%); } }
.gm-recent { flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; overflow: hidden; }
.gm-recent .gm-pill { --k: 6px; flex: none; height: 28px; min-width: 0; padding: 0 9px; display: flex; align-items: center; border-radius: 0; clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  background: var(--cell); color: var(--ink-2); font: 700 15px/1 var(--f-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-recent .gm-pill.is-win { color: var(--win); } .gm-recent .gm-pill.is-loss { color: var(--ink-3); } .gm-recent .gm-pill.is-back { color: var(--back); }
@media (max-width: 420px) { .gm-plate { min-width: 128px; padding: 0 12px; } .gm-plate b { font-size: 26px; } .gm-plate span { font-size: 14px; } }

/* ---------- the win tiers on the stage (t3 10x+, t4 100x+): dim, a traced edge, the number, coins ---------- */
.gm-dim { position: absolute; inset: 0; z-index: 5; background: rgb(5 10 24 / 0); transition: background-color .25s var(--e-out); pointer-events: none; }
.gm-dim.on { background: rgb(5 10 24 / var(--gm-dim, .62)); pointer-events: auto; cursor: pointer; }  /* --gm-dim: hooks.bigAt(d, k).dim */
.gm-trace { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gm-trace rect { fill: none; stroke-width: 2; opacity: 0; }
.gm-big { position: absolute; left: 50%; top: 46%; z-index: 7; transform: translate(-50%, -50%); text-align: center; opacity: 0; transition: opacity .2s;
  pointer-events: none; white-space: nowrap; }
.gm-big.on { opacity: 1; }
.gm-big b { display: block; font: 900 104px/.95 var(--f-num); color: var(--win); font-variant-numeric: tabular-nums; }
.gm-big.t4 b { font-size: 132px; }
.gm-big span { display: block; margin-top: 6px; font: 700 26px/1.2 var(--f-ui); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .gm-big b { font-size: 68px; } .gm-big.t4 b { font-size: 84px; } .gm-big span { font-size: 20px; } }
.gm-fx { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }

/* ---------- the cell primitive: every tile, number, step and slot of a ported game ---------- */
.gm-cell { --k: 10px; --fill: var(--cell); --lnc: transparent; position: relative; border: 0; padding: 0; cursor: pointer; background: var(--fill); color: var(--ink);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .05);
  transition: background-color var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.gm-cell::before { content: ""; position: absolute; inset: 4px; background: var(--lnc); transition: background-color var(--t-hover) var(--e-out);
  clip-path: polygon(calc(var(--k) - 2.34px) 0, 100% 0, 100% calc(100% - calc(var(--k) - 2.34px)), calc(100% - calc(var(--k) - 2.34px)) 100%, 0 100%, 0 calc(var(--k) - 2.34px)); }
.gm-cell::after { content: ""; position: absolute; inset: 5.5px; background: var(--fill); transition: background-color var(--t-hover) var(--e-out);
  clip-path: polygon(calc(var(--k) - 3.22px) 0, 100% 0, 100% calc(100% - calc(var(--k) - 3.22px)), calc(100% - calc(var(--k) - 3.22px)) 100%, 0 100%, 0 calc(var(--k) - 3.22px)); }
.gm-cell > i { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-style: normal; pointer-events: none; }
.gm-cell > i svg { width: 52%; height: 52%; overflow: visible; }
.gm-cell:focus-visible { outline: 1.5px solid var(--gold-line); outline-offset: 2px; }
.gm-cell.live:not(.rev):hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.gm-cell.live:not(.rev):active { --fill: var(--cell-dn); --lnc: var(--gold-line); transform: scale(.95); }
.gm-cell.is-win { --fill: var(--well); --lnc: var(--win); cursor: default; }
.gm-cell.is-loss { --fill: #1c0a1a; --lnc: var(--loss); cursor: default; }
.gm-cell.is-back { --fill: var(--well); --lnc: var(--back); cursor: default; }
.gm-cell.ghost { cursor: default; }
.gm-cell.ghost > i { opacity: .45; }
.gm-cell.pick { --lnc: var(--gold-line); }

/* ---------- the suspense: the stage darkens at its edges as the moment nears (game.js tension) ---------- */
.gm-play::before { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(75% 70% at 50% 50%, transparent 45%, rgb(3 6 16 / .85) 100%); transition: opacity .25s ease; }
.gm.gm-tense .gm-play::before { opacity: calc(var(--gm-tension, 0) * .9); }

/* the game's own stage, scaled down as a whole when it is taller than the frame */
.gm-fit { display: flex; flex-direction: column; flex: 1; min-height: 0; transform-origin: 50% 0; }
.gm-fit > * { flex-shrink: 0; }
.gm-fit.gm-scaled { flex: none; }

/* coins thrown from a point of the stage (game.js burst), over the whole page */
.gm-coins { position: fixed; inset: 0; z-index: 60; width: 100vw; height: 100vh; pointer-events: none; }

/* Instant: the game's own CSS animations and transitions finish at once (its script skips its waits via shell.ms) */
.gm.gm-instant .gm-play *, .gm.gm-instant .gm-play *::before, .gm.gm-instant .gm-play *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
  transition-duration: 1ms !important; transition-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) { .gm-plate.glint::before { animation: none; } }

/* ---------- under the game: open sections on the page, divided by space and a full-width rule ---------- */
.gm-below { display: grid; margin: 8px 0 40px; }
.gm-section { min-width: 0; padding: 30px 0; border-top: 1px solid var(--line); }
.gm-below > .gm-section:first-child { border-top: 0; padding-top: 18px; }
.gm-section h2 { margin: 0; font-size: 18px; letter-spacing: 0; }
.gm-about-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.gm-about-head p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.gm-section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.gm-section-title span { color: var(--muted); font-size: 13px; }
.gm-section-title img { width: 20px; height: 20px; align-self: center; }
.gm-text p { max-width: 78ch; margin: 0 0 12px; color: var(--text-2); font-size: 15px; line-height: 1.65; }
.gm-muted { margin: 0; color: var(--muted); font-size: 14px; }
/* the game's own section beside fair play: two columns split by one rule */
.gm-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.gm-columns.one { grid-template-columns: 1fr; }
.gm-columns > .gm-section { border-top: 0; }
.gm-columns:not(.one) > .gm-section:first-child { padding-right: 36px; }
.gm-columns > .gm-section + .gm-section { padding-left: 36px; border-left: 1px solid var(--line); }
@media (max-width: 899px) {
  .gm-columns { grid-template-columns: 1fr; }
  .gm-columns:not(.one) > .gm-section:first-child { padding-right: 0; }
  .gm-columns > .gm-section + .gm-section { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* tabs as text, underlined, the way the site's other tabs are */
.gm-tabs { display: flex; gap: 4px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.gm-tabs button { padding: 10px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none;
  color: var(--text-2); font: 600 15px var(--font); cursor: pointer; }
.gm-tabs button:hover { color: var(--text); }
.gm-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* fair play: values as plain text; only the client seed is a field, because you type in it */
.gm-fairplay { display: flex; flex-direction: column; gap: 16px; }
.gm-fairplay .gm-section-title { margin-bottom: 0; }
.gm-seed { display: flex; flex-direction: column; gap: 6px; }
.gm-seed code, .gm-revealed code { font: 600 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; word-break: break-all; color: var(--text-2); }
.gm-seed-row { display: flex; justify-content: space-between; font-size: 14px; }
.gm-seed-row .gm-label { font-size: 13px; }
.gm-rotate { align-self: flex-start; min-height: 40px; }
.gm-seed-note { margin: 0; font-size: 13px; color: var(--text-2); }
.gm-seed-note[hidden], .gm-revealed[hidden] { display: none; }
.gm-seed-note.bad { color: var(--rose-ink); }
.gm-revealed > .gm-label { display: block; color: var(--text); }
.gm-revealed dl { display: grid; gap: 10px; margin: 10px 0 0; }
.gm-revealed dt { color: var(--muted); font-size: 12px; }
.gm-revealed dd { margin: 2px 0 0; }

/* the bets feed */
.gm-scroll { overflow-x: auto; }
.gm-feed { width: 100%; border-collapse: collapse; font-size: 14px; }
.gm-feed th { padding: 10px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font-size: 12px;
  font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.gm-feed td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.gm-feed th:first-child, .gm-feed td:first-child { padding-left: 0; }
.gm-feed th:last-child, .gm-feed td:last-child { padding-right: 0; }
.gm-feed .r { text-align: right; }
.gm-feed .up { color: var(--roll-win); font-weight: 700; } .gm-feed .down { color: var(--text-2); }
.gm-time { color: var(--muted); white-space: nowrap; }
.gm-empty { padding: 18px 0 !important; color: var(--muted); text-align: center; }
.gm-who { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.gm-who::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.gm-who.you { color: var(--accent); } .gm-who.you::before { background: var(--accent); }
.gm-who.bronze::before { background: #c27c46; } .gm-who.silver::before { background: #c4ccd8; } .gm-who.gold::before { background: #f2b94a; }
.gm-who.platinum::before { background: #8fe0e0; } .gm-who.diamond::before { background: #6fb6ff; } .gm-who.obsidian::before { background: #b48cff; }

@keyframes gm-in { from { opacity: 0; transform: translateX(-8px) scale(.8); } }
@keyframes gm-pop { from { transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .gm-recent .gm-pill:first-child, .gm-result .gm-result-n { animation: none !important; } }