/* Game skin. Flat surfaces, no shadows; bet panel left, game right. */
:root {
  --bg: #0a1630;
  --panel: #0f1f3d;
  --surface: #152a52;
  --surface-2: #1c3566;
  --line: #24406f;
  --text: #f3f6fc;
  --muted: #9db0d3;
  --red: #e0243f;
  --red-hover: #f0374f;
  --blue: #2f6bff;
  --win: #22c55e;
  --loss: #ff5a6e;
  --pin: #3b5a94;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}


* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font-body);
  font-variant-numeric: tabular-nums;
}

button { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.muted { color: var(--muted); }

/* Header — standalone only; the site supplies name, balance and navigation when framed */
.top { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
/* Only the page header: the backgammon board also has cells called "top". */
.framed header.top { display: none; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand strong { font: 800 24px/1 var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; }
.tag { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
/* One row however many games there are: it scrolls sideways, and the current game is brought into view. */
.nav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--muted); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-weight: 500; white-space: nowrap; flex: none; }
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.me { display: flex; align-items: baseline; gap: 12px; }
.balance { font: 700 22px/1 var(--font-display); letter-spacing: 0.02em; }

.layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; padding: 16px; max-width: 1280px; margin: 0 auto; align-items: start; }

/* Bet panel */
.panel { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lbl { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--bg); border-radius: 8px; padding: 4px; }
.seg button { background: transparent; border: 0; border-radius: 6px; padding: 8px 6px; font-weight: 600; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
.seg button:disabled { opacity: 0.45; cursor: not-allowed; }

.amount, .field-row { display: flex; gap: 4px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 4px; }
.amount input, .field-row input[type="text"] {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text);
  font: 600 16px/1.2 var(--font-body); font-variant-numeric: tabular-nums; padding: 8px;
}
.amount button, .field-row button { background: var(--surface-2); border: 0; border-radius: 6px; padding: 0 12px; font-weight: 600; cursor: pointer; }
.amount button:hover:not(:disabled), .field-row button:hover { background: var(--line); }
.amount button:disabled { opacity: 0.4; cursor: not-allowed; }
.field-row .unit { align-self: center; padding: 0 8px; color: var(--muted); }
.field-row label { display: flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--muted); white-space: nowrap; }

.chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.chips button { background: var(--surface-2); border: 0; border-radius: 8px; padding: 7px 0; font-size: 12px; font-weight: 600; cursor: pointer; }
.chips button:hover { background: var(--line); }

.profiles { display: flex; flex-direction: column; gap: 4px; }
.profile { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; cursor: pointer; text-align: left; }
.profile span { color: var(--muted); font-size: 12px; }
.profile[aria-pressed="true"] { border-color: var(--blue); background: var(--surface-2); }

.hint { font-size: 12px; color: var(--muted); margin: 0; }
.cta { background: var(--red); color: #fff; border: 0; border-radius: 8px; height: 48px; width: 100%; font: 700 16px var(--font-body); cursor: pointer; margin-top: 4px; }
.cta:hover:not(:disabled) { background: var(--red-hover); }
.cta:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
.cta.cashout { background: var(--win); color: #04210f; }
.ghost { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 9px; cursor: pointer; }
.notice { min-height: 18px; margin: 0; font-size: 12px; color: var(--loss); }
.meta { margin: 0; font-size: 12px; color: var(--muted); }
.summary { margin: 0; font-weight: 600; min-height: 20px; }
.summary.win { color: var(--win); }
.summary.lose { color: var(--loss); }

/* Stage */
.stage { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.phase { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.bar { height: 4px; background: var(--surface); border-radius: 2px; overflow: hidden; margin-top: -6px; }
#bar-fill { height: 100%; width: 0; background: var(--blue); }
#scene { display: block; width: 100%; height: min(58vh, 520px); min-height: 340px; background: var(--panel); border-radius: 12px; }
/* Framed, the site sizes the iframe to our content: a height in vh would feed back on itself. */
.framed #scene { height: 480px; }

.history { display: flex; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.history span { font: 600 12px var(--font-body); padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.history span.hi { background: color-mix(in srgb, var(--win) 22%, var(--surface)); color: var(--win); }

.bets { background: var(--panel); border-radius: 12px; padding: 8px 10px; }
.bets-head, .players li { display: grid; grid-template-columns: minmax(0, 1.6fr) 0.8fr 1fr 0.9fr; gap: 10px; align-items: baseline; padding: 6px 6px; }
.bets-head { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.bets-head span:nth-child(n + 2), .players li span:nth-child(n + 2) { text-align: right; }
.players { list-style: none; margin: 0; padding: 0; }
.players li { border-radius: 6px; font-size: 13px; }
.players li.you { background: var(--surface); }
.players .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.players .bot { font-size: 10px; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 0 5px; margin-left: 6px; }
.players .res { color: var(--muted); }
.players li.won .res { color: var(--win); }
.players li.lost .res { color: var(--loss); }
.players li.top .who { color: var(--win); font-weight: 600; }
.players .pay.plus { color: var(--win); font-weight: 600; }
.players .empty { display: block; color: var(--muted); text-align: left; }

.fairness { background: var(--panel); border-radius: 12px; padding: 10px 14px; }
.fairness summary { cursor: pointer; font-weight: 600; }
.fair { margin: 10px 0 2px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; font-size: 12px; }
.fair dt { color: var(--muted); }
.fair dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }
.fair .ok { color: var(--win); }
.fair .bad { color: var(--loss); }

/* The Field */
.field { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: min(100%, 500px); margin: 0 auto; aspect-ratio: 1; }
.cell { position: relative; border: 2px solid transparent; border-radius: 8px; background: var(--surface-2); font: 800 26px/1 var(--font-display); cursor: pointer; transition: transform 0.25s, background 0.25s; }
.cell:hover:not(:disabled) { background: var(--line); }
.cell:disabled { cursor: default; }
.cell.picked { border-color: var(--blue); }
.cell.safe { background: color-mix(in srgb, var(--win) 22%, var(--surface)); }
.cell.mine { background: color-mix(in srgb, var(--loss) 38%, var(--surface)); color: #fff; }
.cell.mine.picked { border-color: var(--loss); }
.cell .heat { position: absolute; right: 6px; bottom: 4px; font: 500 11px var(--font-body); color: var(--muted); }
.field-meta { text-align: center; margin: 0; font-size: 12px; color: var(--muted); }

@media (max-width: 860px) {
  .nav { order: 3; flex-basis: 100%; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .stage { order: -1; }
  #scene { height: 44vh; min-height: 280px; }
  .framed #scene { height: 340px; }
}

/* The Tower */
.tower { display: flex; flex-direction: column; gap: 6px; width: min(100%, 520px); margin: 0 auto; }
.floor { display: grid; grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 92px; gap: 6px; align-items: center; }
.floor .no { font: 700 18px var(--font-display); color: var(--muted); text-align: center; }
.floor .alive { font-size: 12px; color: var(--muted); }
.floor.next .no { color: var(--text); }
.door { position: relative; height: 44px; border: 2px solid transparent; border-radius: 8px; background: var(--surface-2); font: 800 20px/1 var(--font-display); cursor: pointer; transition: background 0.25s; }
.door:hover:not(:disabled) { background: var(--line); }
.door:disabled { cursor: default; }
.door.picked { border-color: var(--blue); }
.door.safe { background: color-mix(in srgb, var(--win) 22%, var(--surface)); }
.door.trap { background: color-mix(in srgb, var(--loss) 38%, var(--surface)); color: #fff; }
.door.trap.picked { border-color: var(--loss); }
.door .heat { position: absolute; right: 6px; bottom: 3px; font: 500 11px var(--font-body); color: var(--muted); }
@media (max-width: 860px) { .floor { grid-template-columns: 22px repeat(3, minmax(0, 1fr)) 64px; } .door { height: 40px; } }

/* Tournament */
.showdown { background: var(--panel); border-radius: 12px; padding: 22px 20px 18px; text-align: center; }
.headline { font: 800 64px/1 var(--font-display); letter-spacing: 0.01em; }
.headline.dim { color: var(--muted); }
.subline { color: var(--muted); margin-top: 6px; min-height: 20px; }
.steps { list-style: none; display: flex; justify-content: center; gap: 6px; margin: 16px 0 0; padding: 0; }
.steps li { width: 34px; height: 6px; border-radius: 3px; background: var(--surface-2); }
.steps li.done { background: var(--blue); }
.steps li.now { background: var(--text); }
.standings .bets-head, .standings .players li { grid-template-columns: minmax(0, 1.5fr) 0.8fr 0.7fr 0.7fr 0.9fr; }
.standings .players .pts { font-weight: 600; }

/* Chess */
.board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, minmax(0, 1fr)); width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; border-radius: 8px; overflow: hidden; }
.sq { position: relative; border: 0; padding: 0; font-size: clamp(22px, 5.2vw, 44px); line-height: 1; cursor: default; display: grid; place-items: center; }
.sq.light { background: var(--muted); }
.sq.dark { background: var(--pin); }
.sq.mine { cursor: pointer; }
.sq.last { box-shadow: inset 0 0 0 4px rgba(243, 246, 252, 0.55); }
.sq.sel { box-shadow: inset 0 0 0 4px var(--blue); }
.sq.check { background: var(--loss); }
.sq.target { cursor: pointer; }
.sq.target::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(10, 22, 48, 0.45); }
.sq.target.capture::after { width: 86%; height: 86%; background: transparent; border: 4px solid rgba(10, 22, 48, 0.45); box-sizing: border-box; }
.sq .pc.w { color: #fff; text-shadow: 0 0 2px #0a1630, 0 1px 2px #0a1630; }
.sq .pc.b { color: #0a1630; }
.seat { display: flex; justify-content: space-between; align-items: center; width: min(100%, 520px); margin: 0 auto; }
.seat .who { font-weight: 600; }
.seat .clock { font: 800 28px/1 var(--font-display); background: var(--surface); border-radius: 8px; padding: 6px 12px; min-width: 92px; text-align: center; }
.seat.turn .clock { background: var(--text); color: var(--bg); }
.seat.low .clock { background: var(--loss); color: #fff; }
.moves { margin: 10px 0 2px; font: 13px/1.7 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; min-height: 22px; }

/* Backgammon */
.bg { display: grid; grid-template-columns: repeat(6, 1fr) 0.7fr repeat(6, 1fr) 0.9fr; grid-template-rows: 1fr 56px 1fr; gap: 3px; width: min(100%, 640px); aspect-ratio: 1.45; margin: 0 auto; background: var(--panel); border-radius: 12px; padding: 8px; }
.pt { position: relative; border: 0; padding: 2px 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 0; cursor: default; min-width: 0; }
.pt.bottom { flex-direction: column-reverse; }
.pt::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 92%); background: var(--surface-2); }
.pt.bottom::before { clip-path: polygon(50% 8%, 0 100%, 100% 100%); }
.pt.alt::before { background: var(--line); }
.pt.can, .slot.can { cursor: pointer; }
.pt.can::before { background: color-mix(in srgb, var(--blue) 45%, var(--surface-2)); }
.pt.sel::before { background: var(--blue); }
.pt.target::before, .slot.target { background: color-mix(in srgb, var(--win) 55%, var(--surface)); cursor: pointer; }
.ck { position: relative; width: min(78%, 34px); aspect-ratio: 1; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 11px var(--font-body); margin: -1px 0; }
.ck.w { background: #f3f6fc; color: #0a1630; box-shadow: inset 0 0 0 2px var(--muted); }
.ck.b { background: #0a1630; color: #f3f6fc; box-shadow: inset 0 0 0 2px var(--pin); }
.slot { border: 0; border-radius: 8px; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; color: var(--muted); padding: 2px; cursor: default; min-width: 0; }
.slot.bottom { flex-direction: column-reverse; }
.slot.sel { background: var(--blue); color: #fff; }
.bg-mid { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.die { width: 40px; height: 40px; border-radius: 8px; background: var(--text); color: var(--bg); display: grid; place-items: center; font: 800 26px/1 var(--font-display); }
.die.used { opacity: 0.3; }
.bg-note { color: var(--muted); font-size: 13px; }

/* Shown instead of the game when it may only be opened from the site */
.gate { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 24px; }
.gate strong { font: 800 34px/1.1 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.gate span { color: var(--muted); }

/* Ludo */
.ludo { display: block; width: min(100%, 560px); aspect-ratio: 1; margin: 0 auto; background: var(--panel); border-radius: 12px; cursor: default; }
.ludo.can { cursor: pointer; }
.ludo-seats { list-style: none; margin: 0 auto; padding: 0; width: min(100%, 560px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ludo-seats li { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 2px solid transparent; border-radius: 8px; padding: 8px 10px; min-width: 0; }
.ludo-seats li.turn { border-color: var(--text); }
.ludo-seats li.out { opacity: 0.45; }
.ludo-seats .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ludo-seats .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ludo-seats .clk { font: 700 18px var(--font-display); }
.ludo-seats .home { font-size: 12px; color: var(--muted); }

/* Dominoes */
.dom-table { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; width: min(100%, 720px); margin: 0 auto; }
.dom-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 62px; }
.dom-chain { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; align-items: center; min-height: 120px; background: var(--bg); border-radius: 8px; padding: 12px 8px; }
.dom-yard { text-align: center; font-size: 12px; color: var(--muted); }
.dom-ends { display: flex; gap: 8px; justify-content: center; }
.dom-ends button { background: var(--blue); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.tile { display: inline-flex; background: #f3f6fc; border-radius: 5px; border: 2px solid transparent; padding: 0; cursor: default; flex: none; }
.tile.v { flex-direction: column; }
.tile .half { width: 26px; height: 26px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 3px; }
.tile.h .half + .half { border-left: 1px solid var(--muted); }
.tile.v .half + .half { border-top: 1px solid var(--muted); }
.tile .half i { width: 5px; height: 5px; border-radius: 50%; background: #0a1630; place-self: center; visibility: hidden; }
.tile .half i.on { visibility: visible; }
.tile.back { background: var(--surface-2); width: 30px; height: 56px; }
.tile.can { cursor: pointer; border-color: var(--blue); }
.tile.sel { border-color: var(--win); transform: translateY(-4px); }
.tile.dim { opacity: 0.55; }

/* Rummy */
.rm-seats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rm-seat { background: var(--panel); border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 132px; border: 2px solid transparent; }
.rm-seat.turn { border-color: var(--blue); }
.rm-seat.out { opacity: 0.55; }
.rm-seat.you .who { color: var(--win); }
.rm-seat .who { font-weight: 600; font-size: 13px; }
.rm-seat .sub { font-size: 12px; color: var(--muted); }
.rm-seat .clock { font: 800 22px/1 var(--font-display); }
.rm-seat.low .clock { color: var(--loss); }
.rm-table { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; width: min(100%, 860px); margin: 0 auto; }
.rm-mid { display: flex; gap: 28px; justify-content: center; align-items: flex-end; background: var(--bg); border-radius: 8px; padding: 12px; min-height: 104px; }
.rm-pile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rm-note { text-align: center; font-size: 13px; color: var(--muted); margin: 0; min-height: 18px; }
.rm-hand { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; min-height: 86px; }
.rm-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rm-group .cards { display: flex; gap: 3px; }
.rm-group .lbl { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rm-group.meld .lbl { color: var(--win); }
.rm-actions { display: flex; gap: 10px; justify-content: center; }
.rm-actions button { width: auto; min-width: 140px; margin: 0; }
.rm-reveal { display: flex; flex-direction: column; gap: 10px; }
.rm-reveal .row { display: flex; flex-direction: column; gap: 4px; }
.rm-reveal .row > span { font-size: 12px; color: var(--muted); }
.rm-reveal .cards { display: flex; flex-wrap: wrap; gap: 3px; }
.card { width: 44px; height: 62px; border-radius: 6px; background: #f3f6fc; color: #0a1630; border: 2px solid transparent; padding: 3px 0 0; font: 700 17px/1.05 var(--font-body, Inter, system-ui, sans-serif); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: none; position: relative; cursor: default; }
.card.red { color: #d1203a; }
.card .s { font-size: 19px; }
.card.wild::after { content: "J"; position: absolute; top: 1px; right: 3px; font-size: 9px; font-weight: 800; color: var(--blue); }
.card.joker { font-size: 10px; letter-spacing: 0.04em; color: var(--blue); }
.card.back { background: repeating-linear-gradient(45deg, var(--line), var(--line) 5px, var(--panel) 5px, var(--panel) 10px); }
.card.sm { width: 32px; height: 46px; font-size: 13px; }
.card.sm .s { font-size: 14px; }
button.card.can { cursor: pointer; border-color: var(--blue); }
button.card.pick { cursor: pointer; }
.card.sel { border-color: var(--win); transform: translateY(-6px); }
.card.fin { box-shadow: 0 0 0 2px var(--win); }

/* Belot */
.bl-table { background: var(--panel); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 860px); margin: 0 auto; }
.bl-mid { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.bl-seat { background: var(--surface); border-radius: 10px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 128px; border: 2px solid transparent; }
.bl-seat.turn { border-color: var(--blue); }
.bl-seat.ours .who { color: var(--win); }
.bl-seat .who { font-weight: 600; font-size: 13px; }
.bl-seat .sub { font-size: 11px; color: var(--muted); }
.bl-seat .clock { font: 800 20px/1 var(--font-display); }
.bl-seat.low .clock { color: var(--loss); }
.bl-seat .call { font-size: 12px; font-weight: 600; min-height: 16px; }
.bl-felt { background: var(--bg); border-radius: 10px; flex: 1; max-width: 420px; min-height: 236px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px; }
.bl-contract { font-size: 13px; font-weight: 600; text-align: center; min-height: 18px; }
.bl-note { font-size: 12px; color: var(--muted); text-align: center; min-height: 16px; }
.bl-trick { position: relative; width: 190px; height: 164px; }
.bl-trick .card { position: absolute; }
.bl-trick .p0 { left: 73px; bottom: 0; }
.bl-trick .p1 { right: 6px; top: 51px; }
.bl-trick .p2 { left: 73px; top: 0; }
.bl-trick .p3 { left: 6px; top: 51px; }
.bl-trick .card.won { box-shadow: 0 0 0 2px var(--win); }
.bl-hand { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; min-height: 66px; }
.bl-hand .card.dim { opacity: 0.5; }
.bl-calls { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bl-calls button { background: var(--surface-2); color: var(--text); border: 0; border-radius: 8px; padding: 9px 14px; font: 600 14px var(--font-body); cursor: pointer; }
.bl-calls button.red { color: var(--loss); }
.bl-calls button.main { background: var(--blue); color: #fff; }
.bl-calls button:disabled { opacity: 0.35; cursor: default; }
.bl-score { font-size: 12px; display: grid; grid-template-columns: 1fr auto auto; gap: 2px 12px; }
.bl-score:empty { display: none; }
.bl-score .h { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; }
.bl-score .t { font-weight: 700; border-top: 1px solid var(--line); padding-top: 3px; }
.bl-score span:nth-child(3n + 2), .bl-score span:nth-child(3n) { text-align: right; }
.bl-calls[hidden] { display: none; }

/* Board duels: one grid, dressed per game */
.duel-board { display: grid; width: min(100%, 520px); margin: 0 auto; background: var(--panel); border-radius: 10px; overflow: hidden; }
.duel-board:empty { display: none; }
.duel-note { text-align: center; font: 700 16px var(--font-display); margin: 0; min-height: 20px; color: var(--muted); }
.duel-board .cell { position: relative; border: 0; padding: 0; background: transparent; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; cursor: default; }
.duel-board .cell.go { cursor: pointer; }
.duel-board .cell.go::after { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: var(--blue); opacity: 0.75; }
.duel-board .cell.go:has(.pc)::after { width: 88%; height: 88%; background: transparent; border: 3px solid var(--blue); box-sizing: border-box; opacity: 1; }
.duel-board .cell.picked .pc { outline: 3px solid var(--win); outline-offset: 1px; }
.duel-board .pc { width: 78%; height: 78%; border-radius: 50%; display: block; }
.duel-board .pc.a { background: #f3f6fc; box-shadow: inset 0 0 0 3px #b9c6dd; }
.duel-board .pc.b { background: #10151f; box-shadow: inset 0 0 0 3px #46536b; }
.duel-board .pc.king::after { content: "♛"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(14px, 4vw, 26px); color: #d19a1c; }
.seat[data-side]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; flex: none; order: -1; }
.seat[data-side] .who { margin-right: auto; }
.seat[data-side="a"]::before { background: #f3f6fc; box-shadow: inset 0 0 0 2px #b9c6dd; }
.seat[data-side="b"]::before { background: #10151f; box-shadow: inset 0 0 0 2px #46536b; }
.seat[data-side=""]::before { display: none; }

.g-checkers .cell.light { background: var(--muted); }
.g-checkers .cell.dark { background: var(--pin); }
.g-checkers .cell.last { box-shadow: inset 0 0 0 3px rgba(243, 246, 252, 0.5); }

.g-reversi { background: #1c6b4a; gap: 2px; padding: 2px; }
.g-reversi .cell { background: #238a5f; }
.g-reversi .pc.a { background: #10151f; box-shadow: none; }
.g-reversi .pc.b { background: #f3f6fc; box-shadow: none; }
.g-reversi .cell.last .pc { outline: 2px solid var(--loss); }
body[data-game="reversi"] .seat[data-side="a"]::before { background: #10151f; box-shadow: inset 0 0 0 2px #46536b; }
body[data-game="reversi"] .seat[data-side="b"]::before { background: #f3f6fc; box-shadow: inset 0 0 0 2px #b9c6dd; }

.g-connect4 { background: var(--blue); padding: 6px; gap: 4px; }
.g-connect4 .cell { background: var(--bg); border-radius: 50%; }
.g-connect4 .pc { width: 100%; height: 100%; }
.g-connect4 .pc.a, body[data-game="connect4"] .seat[data-side="a"]::before { background: #ff5a6e; box-shadow: none; }
.g-connect4 .pc.b, body[data-game="connect4"] .seat[data-side="b"]::before { background: #f2c14e; box-shadow: none; }
.g-connect4 .cell.last .pc { box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.7); }

.g-gomoku { background: #caa56a; width: min(100%, 600px); }
.g-gomoku .cell::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#6b5330, #6b5330) center / 100% 1px no-repeat, linear-gradient(#6b5330, #6b5330) center / 1px 100% no-repeat; }
.g-gomoku .pc { position: relative; width: 86%; height: 86%; }
.g-gomoku .pc.a { background: #10151f; box-shadow: none; }
.g-gomoku .pc.b { background: #f3f6fc; box-shadow: inset 0 0 0 1px #8a8f99; }
.g-gomoku .cell.go::after { opacity: 0; }
.g-gomoku .cell.go:hover::after { opacity: 0.8; width: 60%; height: 60%; }
.g-gomoku .cell.last .pc { outline: 2px solid var(--loss); }
body[data-game="gomoku"] .seat[data-side="a"]::before { background: #10151f; box-shadow: inset 0 0 0 2px #46536b; }
body[data-game="gomoku"] .seat[data-side="b"]::before { background: #f3f6fc; box-shadow: inset 0 0 0 2px #b9c6dd; }

.g-morris { background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cg fill='none' stroke='%239db0d3' stroke-width='0.06'%3E%3Crect x='0.5' y='0.5' width='6' height='6'/%3E%3Crect x='1.5' y='1.5' width='4' height='4'/%3E%3Crect x='2.5' y='2.5' width='2' height='2'/%3E%3Cpath d='M3.5 0.5v2M3.5 4.5v2M0.5 3.5h2M4.5 3.5h2'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; width: min(100%, 460px); }
.g-morris .cell.off { visibility: hidden; }
.g-morris .cell:not(.off)::before { content: ""; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: var(--muted); }
.g-morris .pc { position: relative; width: 66%; height: 66%; }
.g-morris .cell.last .pc { outline: 2px solid var(--loss); }

/* Tapa: a pinned checker under the stack that holds it */
.ck.pinned { outline: 2px solid var(--loss); outline-offset: -2px; opacity: 0.85; }

/* Santase */
.sn-opp { display: flex; gap: 3px; justify-content: center; min-height: 48px; }
.sn-mid { display: flex; gap: 14px; align-items: center; justify-content: center; width: 100%; }
.sn-stock { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 96px; }
.sn-pile { position: relative; width: 84px; height: 66px; }
.sn-pile .card { position: absolute; top: 0; }
.sn-pile .card.up { left: 34px; transform: rotate(90deg); }
.sn-pile .card.back { left: 0; }
.sn-trick { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 70px; }
.sn-trick .card.won { box-shadow: 0 0 0 2px var(--win); }
.sn-trick .card.theirs { transform: translateY(-8px); }
.sn-trick .card.mine { transform: translateY(8px); }

/* Auto-bet, session line, sound toggle, own rounds in the history */
.auto { display: flex; flex-direction: column; gap: 6px; }
.auto .chips button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--blue); }
.ghost.small { height: 32px; font-size: 12px; width: auto; padding: 0 12px; align-self: flex-start; }
.history span.mine { box-shadow: inset 0 0 0 2px var(--muted); }
.history span.mine.won { box-shadow: inset 0 0 0 2px var(--win); }
.history span.mine.lost { box-shadow: inset 0 0 0 2px var(--loss); }
.auto[hidden] { display: none; }

/* The Field: own picks as they open, quick picks, the verdict under the field */
.cell.picked.safe { border-color: var(--win); box-shadow: inset 0 0 0 2px var(--win); }
.cell.picked.mine { box-shadow: inset 0 0 0 3px var(--loss); animation: shake 0.35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .cell.picked.mine { animation: none; } }
#quick { grid-template-columns: repeat(4, 1fr); }
.field-meta.verdict { font: 800 22px var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.field-meta.verdict.win { color: var(--win); }
.field-meta.verdict.lose { color: var(--loss); }

/* Chess: the promotion picker */
.promo { display: flex; gap: 8px; justify-content: center; }
.promo[hidden] { display: none; }
.promo button { width: 56px; height: 56px; border: 2px solid var(--blue); border-radius: 8px; background: var(--pin); font-size: 36px; line-height: 1; cursor: pointer; }
.promo button.w { color: #fff; text-shadow: 0 0 2px #0a1630, 0 1px 2px #0a1630; }
.promo button.b { color: #0a1630; }

.die sup { font: 600 10px var(--font-body); margin-left: 1px; opacity: 0.7; }

/* A button waiting for its second click: the warning replaces the label */
.armed { font-size: 0 !important; border-color: var(--loss) !important; }
.armed::after { content: attr(data-confirm); font: 600 13px var(--font-body); color: var(--loss); }
/* Tabla: this player's home quarter */
.pt.home::after { content: ""; position: absolute; left: 12%; right: 12%; height: 3px; border-radius: 2px; background: var(--win); opacity: 0.7; }
.pt.top.home::after { top: 0; }
.pt.bottom.home::after { bottom: 0; }
.bg-way { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }

/* Instant games */
.big { display: grid; place-items: center; min-height: 300px; background: var(--panel); border-radius: 12px; text-align: center; padding: 24px; }
.big .num { font: 800 clamp(64px, 14vw, 132px)/1 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; }
.big .num.win { color: var(--win); }
.big .num.lose { color: var(--loss); }
.big .sub { color: var(--muted); margin-top: 8px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: var(--panel); border-radius: 12px; padding: 16px; max-width: 560px; width: 100%; margin: 0 auto; }
.grid5 button { aspect-ratio: 1; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text); font: 800 22px var(--font-display); cursor: pointer; }
.grid5 button:hover:not(:disabled) { background: var(--line); }
.grid5 button:disabled { cursor: default; }
.grid5 button.safe { background: color-mix(in srgb, var(--win) 30%, var(--surface)); color: var(--win); }
.grid5 button.mine { background: color-mix(in srgb, var(--loss) 22%, var(--surface)); color: var(--loss); }
.grid5 button.mine.hit { background: var(--loss); color: #fff; }
.grid5 button.dim { opacity: 0.45; }
.stat { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.stat b { color: var(--text); font-weight: 600; }

.panel-part { display: flex; flex-direction: column; gap: 10px; }
.panel-part[hidden] { display: none; }

/* Slot */
.jackpots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.jackpots div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 0; }
.jackpots span { display: block; font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.jackpots b { display: block; font: 800 22px/1.1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jackpots .grand b { color: #ff5a6e; } .jackpots .major b { color: #22c55e; } .jackpots .minor b { color: #5aa2ff; } .jackpots .mini b { color: #c084fc; }
.jackpots .won { border-color: var(--win); box-shadow: 0 0 0 2px var(--win) inset; }
/* A bet with bonus money does not play for the jackpots: the amounts stay, dimmed, and a line under them says so. */
.eg-jackpots.bonus-stake div { opacity: 0.42; filter: grayscale(0.7); }
#jackpot-note { margin: 6px 0 0; font: 700 12px var(--font-body); letter-spacing: 0.02em; color: var(--muted); text-align: center; }
#jackpot-note[hidden], .eg-jackpots[hidden] { display: none; }
@media (max-width: 640px) { .jackpots { grid-template-columns: repeat(2, 1fr); } }

/* Ember Fruits: auto play and the paytable */
.autoplay { display: flex; gap: 8px; margin-top: 8px; }
.autoplay button { flex: 1; }
.autoplay select { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; font: 600 14px var(--font-body); }
.paytable { background: var(--panel); border-radius: 12px; padding: 12px 16px; }
.paytable summary { cursor: pointer; font: 700 15px var(--font-body); }
.paytable h4 { margin: 18px 0 8px; font: 700 12px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.paytable .pays { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.paytable .pay { display: grid; grid-template-columns: 56px 1fr; gap: 4px 10px; align-items: center; background: #0a0d1a; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.paytable .pay img { width: 56px; height: 56px; object-fit: contain; }
.paytable .pay dl { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0; font: 600 13px var(--font-body); font-variant-numeric: tabular-nums; }
.paytable .pay dt { color: var(--muted); }
.paytable .pay dd { margin: 0; text-align: right; }
.paytable .pay p { grid-column: 1 / -1; margin: 2px 0 0; font: 400 12px/1.35 var(--font-body); color: var(--muted); }
.paytable .lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.paytable .line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 5px; background: #0a0d1a; border: 1px solid var(--line); border-radius: 6px; }
.paytable .line i { display: block; aspect-ratio: 1; border-radius: 2px; background: #1b2440; }
.paytable .line i.on { background: #ffb347; }
.paytable .rules { margin: 0; padding-left: 18px; font: 400 13px/1.5 var(--font-body); color: var(--muted); }
.paytable .rules li + li { margin-top: 6px; }

/* ───────────────────────── Ember Fruits: one cabinet ─────────────────────────
   Laid out the way the genre lays a cabinet out: the jackpots across the top; the reels in the middle with a rail on
   each side; under them balance · bets · win; a thin bar of tools at the foot. The colours are an operator's dark
   theme — black ground, graphite, one yellow signal — as variables, so another theme is a change of these lines. */
.ember-body { background: #000; }
.ember-page {
  --eg-bg: #000; --eg-panel: #0d0e11; --eg-row: #15171c; --eg-line: #24272f; --eg-text: #eef1f6; --eg-mute: #8d96a8;
  --eg-sig: #ffd21f; --eg-warm: #ffb347; --eg-bad: #ff6b81; --eg-win: #3ddc84;
  --eg-display: 'Big Shoulders Display', var(--font-display); --eg-sans: 'IBM Plex Sans', var(--font-body);
  display: block; padding: 12px; color: var(--eg-text); font-family: var(--eg-sans);
}
.framed .ember-page { padding: 0; }
.ember-body header.top { background: #0d0e11; border-bottom: 1px solid #24272f; }
.eg { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 0; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #2a1206 0%, #150a06 45%, #050506 100%); border: 1px solid #3a2a12; }
/* In a site's frame the page is exactly as tall as the frame, and says so: what it says must not follow from what it is given
   (ember.ts, where the reels are fitted). Anything that would stick out by a rounded pixel is cut, not reported. */
.framed .ember-body { height: 100vh; overflow: hidden; }
.framed .eg { border: 0; border-radius: 0; min-height: 100vh; }
.eg:fullscreen { max-width: none; border-radius: 0; justify-content: center; }
.eg:fullscreen #scene { height: calc(100vh - 190px); }

/* The top: the game's name at the left, then the four jackpots, the largest first. */
.eg-top { display: flex; gap: 10px; align-items: stretch; }
.eg-mark { width: 96px; flex: none; display: flex; flex-direction: column; justify-content: center; line-height: 0.86; transform: rotate(-4deg); }
.eg-mark b { font: 800 26px/0.9 var(--eg-display); letter-spacing: 0.02em; text-transform: uppercase; background: linear-gradient(#fff3a6, var(--eg-sig) 55%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eg-mark i { font: 800 18px/1 var(--eg-display); font-style: italic; letter-spacing: 0.06em; text-transform: uppercase; color: #ff6a3d; padding-left: 14px; }
.eg-jackpots { flex: 1; min-width: 0; display: grid; grid-template-columns: 1.25fr 1.1fr 1fr 1fr; gap: 8px; }
.eg-jackpots div { position: relative; min-width: 0; padding: 12px 10px 5px; border-radius: 6px; text-align: center; background: linear-gradient(#111318, #050506); border: 2px solid var(--tint); box-shadow: 0 0 12px -4px var(--tint), inset 0 0 14px -8px var(--tint); }
.eg-jackpots span { position: absolute; left: 50%; top: -3px; transform: translateX(-50%); padding: 0 8px; font: 800 15px/1 var(--eg-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tint); text-shadow: 0 1px 0 #000, 0 0 8px #000; background: #0a0a0c; border-radius: 0 0 6px 6px; }
.eg-jackpots b { display: block; font: 800 24px/1.1 var(--eg-display); font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-jackpots .grand { --tint: #ff3b4e; } .eg-jackpots .major { --tint: #2fd66f; } .eg-jackpots .minor { --tint: #3d8bff; } .eg-jackpots .mini { --tint: #b46bff; }
.eg-jackpots .filling b { font: 500 13px/1.9 var(--eg-sans); color: var(--eg-mute); letter-spacing: 0.04em; }
.eg-jackpots .won { box-shadow: 0 0 0 2px var(--eg-sig), 0 0 18px var(--tint); }

/* The middle: a rail, the reels, a rail. */
.eg-mid { display: flex; gap: 8px; align-items: stretch; min-height: 0; }
.eg-left { width: 96px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0 4px; }
.eg-lines { width: 62px; padding: 8px 0 7px; border-radius: 8px; text-align: center; background: linear-gradient(#2a2d36, #101216); border: 2px solid #b8860b; box-shadow: inset 0 0 0 1px #000; margin-top: auto; margin-bottom: auto; }
.eg-lines b { display: block; font: 800 30px/0.95 var(--eg-display); color: var(--eg-sig); }
.eg-lines span { display: block; font: 700 10px/1.25 var(--eg-sans); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; }
.eg-pile { position: relative; width: 92px; height: 64px; }
.eg-pile img { position: absolute; width: 54px; height: 54px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)); animation: eg-bob 3.6s ease-in-out infinite; }
.eg-pile img:nth-child(1) { left: 0; bottom: 0; } .eg-pile img:nth-child(2) { left: 36px; bottom: 2px; animation-delay: -1.2s; } .eg-pile img:nth-child(3) { left: 18px; bottom: 16px; animation-delay: -2.3s; }
@keyframes eg-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
.ember-page #scene { flex: 1; min-width: 0; width: auto; height: min(62vh, 580px); min-height: 300px; background: transparent; border-radius: 0; }
.framed .ember-page #scene { height: calc(100vh - 224px); min-height: 200px; }
.eg-side { width: 118px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.eg-spin { width: 108px; height: 108px; border-radius: 50%; border: 0; cursor: pointer; background: radial-gradient(circle at 35% 28%, #3a3d47, #0c0d10 70%); color: var(--eg-sig); font: 800 24px/1 var(--eg-display); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 0 3px #000, 0 0 0 6px var(--eg-sig), 0 8px 22px rgba(0, 0, 0, 0.7); transition: transform 0.08s ease, filter 0.15s ease; }
.eg-spin:hover:not(:disabled) { filter: brightness(1.25); }
.eg-spin:active:not(:disabled) { transform: scale(0.95) rotate(20deg); }
.eg-spin:disabled { color: var(--eg-mute); box-shadow: 0 0 0 3px #000, 0 0 0 6px #3a3d47; cursor: default; }
.eg-round { width: 64px; height: 64px; border-radius: 50%; border: 2px solid #5b5f6b; background: radial-gradient(circle at 35% 28%, #2c2f38, #0c0d10 70%); color: var(--eg-text); font: 700 11px/1.15 var(--eg-sans); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; padding: 0 6px; }
.eg-round:hover:not(:disabled) { border-color: var(--eg-sig); color: var(--eg-sig); }
.eg-round.on { border-color: var(--eg-sig); color: var(--eg-sig); }
.eg-round:disabled { color: var(--eg-mute); cursor: default; }
.eg-pill { min-width: 84px; padding: 4px 10px 5px; border-radius: 999px; border: 2px solid #5b5f6b; background: #0c0d10; color: var(--eg-text); font: 700 10px/1.2 var(--eg-sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.eg-pill i { font-style: normal; font-size: 11px; letter-spacing: -1px; color: #5b5f6b; }
.eg-pill.on { border-color: var(--eg-win); } .eg-pill.on i { color: var(--eg-win); }

/* The line that talks: one strip between the reels and the bar. */
.eg-say { margin: 0; height: 22px; text-align: center; font: 800 16px/22px var(--eg-display); letter-spacing: 0.08em; text-transform: uppercase; color: #d7dcea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-say.lit { color: var(--eg-sig); text-shadow: 0 0 10px rgba(255, 140, 30, 0.7); }
/* The respins left in the bonus: three lights that go out. */
.eg-lamp { display: inline-block; width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; vertical-align: -1px; background: #2a2440; box-shadow: inset 0 0 0 2px #4a3f6e; }
.eg-lamp.on { background: radial-gradient(circle at 35% 30%, #fff8c8, var(--eg-sig) 55%, #ff8a1f); box-shadow: 0 0 10px 2px rgba(255, 190, 40, 0.8); }

/* A jackpot takes the whole cabinet: the game is dimmed away behind a curtain in the level's colour. */
.eg { position: relative; }
.eg-takeover { --tint: var(--eg-sig); position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 42%, color-mix(in srgb, var(--tint) 62%, #000) 0%, color-mix(in srgb, var(--tint) 26%, #000) 55%, #05020c 100%); animation: eg-take-in 0.45s ease-out; }
.eg-takeover[hidden] { display: none; }
.eg-takeover canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eg-takeover p, .eg-takeover button { position: relative; margin: 0; }
.eg-take-level, .eg-take-word { font: 800 clamp(44px, 11vw, 132px)/0.88 var(--eg-display); letter-spacing: 0.03em; text-transform: uppercase; color: #fff;
  background: linear-gradient(#ffffff 8%, color-mix(in srgb, var(--tint) 45%, #fff) 46%, var(--tint) 54%, color-mix(in srgb, var(--tint) 60%, #000) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #1a0500) drop-shadow(0 5px 0 rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px color-mix(in srgb, var(--tint) 70%, transparent)); animation: eg-take-pop 0.7s cubic-bezier(0.2, 1.5, 0.4, 1) both, eg-take-beat 1.1s ease-in-out 0.7s infinite; }
.eg-take-word { font-size: clamp(30px, 7vw, 84px); background: linear-gradient(#fffbe0 10%, #ffd21f 50%, #ff8a1f 95%); -webkit-background-clip: text; background-clip: text; animation-delay: 0.12s, 0.82s; }
.eg-take-sum { margin-top: 10px !important; font: 800 clamp(36px, 8.5vw, 104px)/1 var(--eg-display); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 3px 0 #1a0500, 0 0 30px rgba(255, 210, 60, 0.75); }
.eg-take-back { margin-top: 18px !important; padding: 12px 28px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(#ffe66b, var(--eg-sig) 45%, #c99800); color: #111; font: 800 18px/1 var(--eg-display); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 6px 22px rgba(0, 0, 0, 0.5); }
.eg-take-back:hover { filter: brightness(1.08); }
.eg-take-note { min-height: 16px; font: 600 12px/1.3 var(--eg-sans); color: #fff; opacity: 0.85; }
@keyframes eg-take-in { from { opacity: 0; } }
@keyframes eg-take-pop { from { transform: scale(0.2); opacity: 0; } }
@keyframes eg-take-beat { 50% { transform: scale(1.045); } }

/* Balance · bets · win. A press on an amount is the bet and the spin in one. */
.eg-bar { display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr); gap: 12px; align-items: center; background: #000; margin: 0 -8px; padding: 7px 24px; }
.eg-read { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.eg-read b { font: 800 28px/1.05 var(--eg-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.eg-read span { font: 700 11px/1.3 var(--eg-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--eg-sig); }
.eg-read.win { align-items: flex-start; }
.eg-read.win.lit b { color: var(--eg-sig); }
.eg-bets { display: flex; gap: 6px; justify-content: center; }
.eg-bet { min-width: 84px; padding: 5px 10px 6px; border-radius: 7px; border: 1px solid #000; background: linear-gradient(#5d616c, #2b2e36 45%, #1a1c21); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 0 #000; }
.eg-bet b { font: 800 22px/1.05 var(--eg-display); font-variant-numeric: tabular-nums; }
.eg-bet span { font: 700 10px/1.1 var(--eg-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--eg-sig); }
.eg-bet.on { background: linear-gradient(#ffe66b, var(--eg-sig) 45%, #c99800); color: #111; }
.eg-bet.on span { color: #111; }
/* An amount that would reach into bonus money: it does not play for the jackpots, and its button says so before it is pressed. */
.eg-bet.no-jackpot { border-style: dashed; border-color: rgba(255, 255, 255, 0.45); }
.eg-bet.no-jackpot span::after { content: ' · no jackpot'; letter-spacing: 0.04em; text-transform: none; opacity: 0.85; }
.eg-bet:hover:not(:disabled) { filter: brightness(1.15); }
.eg-bet:active:not(:disabled) { transform: translateY(1px); }
.eg-bet:disabled { opacity: 0.5; cursor: default; }

/* The thin bar at the foot: the name, the time, what was won, the small tools. */
.eg-foot { display: flex; align-items: center; gap: 10px; min-height: 32px; margin: 0 -8px; padding: 0 12px; background: #0d0e11; border-top: 1px solid #24272f; }
.eg-name { font: 600 12px var(--eg-sans); color: var(--eg-text); white-space: nowrap; }
.eg-foot .summary, .eg-foot .notice, .eg-foot .meta { margin: 0; font: 500 12px/1.3 var(--eg-sans); color: var(--eg-mute); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eg-foot .summary.win { color: var(--eg-sig); } .eg-foot .notice { color: var(--eg-bad); }
.eg-grow { flex: 1; }
.eg-tool { min-width: 28px; height: 24px; padding: 0 7px; border-radius: 5px; border: 0; background: transparent; color: var(--eg-text); font: 700 13px var(--eg-sans); cursor: pointer; }
select.eg-tool { background: #15171c; border: 1px solid #24272f; font-size: 12px; }
.eg-tool:hover { color: var(--eg-sig); }

/* The paytable and the proof, over the game. */
.eg-sheet { width: min(920px, 94vw); max-height: 88vh; padding: 0; border: 1px solid #24272f; border-radius: 12px; background: #0d0e11; color: #eef1f6; }
.eg-sheet::backdrop { background: rgba(0, 0, 0, 0.7); }
.eg-sheet header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: #0d0e11; border-bottom: 1px solid #24272f; font: 800 18px 'Big Shoulders Display', var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
.eg-sheet .paytable, .eg-sheet .fair { margin: 0; padding: 14px; background: transparent; border-radius: 0; }
.eg-sheet .paytable .pay, .eg-sheet .paytable .line { background: #15171c; border-color: #24272f; }
.eg-sheet .paytable .line i.on { background: #ffd21f; }
.eg-sheet .paytable h4 { color: #ffd21f; }
.eg-sheet .eg-tool { border: 1px solid #24272f; }

/* Narrow: the rails fold away — the reels take the width; the buttons go in a row under them. */
@media (max-width: 760px) {
  .eg-mark, .eg-left { display: none; }
  .eg-jackpots { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .eg-jackpots div { padding: 11px 2px 3px; }
  .eg-jackpots span { font-size: 11px; padding: 0 5px; } .eg-jackpots b { font-size: 15px; }
  .eg-mid { flex-direction: column; gap: 6px; }
  .ember-page #scene { flex: none; width: 100%; height: 46vh; min-height: 260px; }
  .framed .ember-page #scene { height: calc(100vh - 326px); min-height: 180px; }
  .eg-side { width: auto; flex-direction: row; justify-content: center; gap: 14px; }
  .eg-spin { width: 84px; height: 84px; font-size: 20px; order: 2; }
  .eg-round { width: 54px; height: 54px; font-size: 10px; }
  #auto { order: 1; } #speed { order: 3; } #bet-set { order: 4; }
  .eg-bar { grid-template-columns: 1fr 1fr; padding: 6px 12px; gap: 6px 12px; }
  .eg-read { align-items: flex-start; } .eg-read.win { align-items: flex-end; }
  .eg-bets { grid-column: 1 / -1; grid-row: 2; }
  .eg-bet { flex: 1; min-width: 0; padding: 5px 2px; }
  .eg-bet b { font-size: 16px; } .eg-read b { font-size: 21px; }
  .eg-foot .meta, .eg-name { display: none; }
}

/* ── The four games against the house, in the cabinet of the slot: black, a gold edge, the same display face and the
   same gold button — and one colour per game for its light. docs/games/visual-bar-four.md ── */
.house {
  --accent: #ff8a2a; --gold: #ffd21f;
  --bg: #000; --panel: #0d0e11; --surface: #17191f; --surface-2: #262a33; --line: #2a2d36; --text: #eef1f6; --muted: #8d96a8;
  --blue: var(--accent); --red: var(--gold); --red-hover: #ffe04d; --win: #3ddc84;
  --font-display: 'Big Shoulders Display', "Barlow Condensed", "Arial Narrow", sans-serif;
  background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 13%, #000) 0%, #050506 58%, #000 100%) fixed;
}
.house.limbo { --accent: #a66bff; } .house.plinko { --accent: #22d3ee; } .house.mines { --accent: #34d399; }
.house header.top { background: #0d0e11; border-bottom: 1px solid #24272f; }
.house .brand strong { background: linear-gradient(#fff3a6, var(--gold) 55%, #ff8a1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.house .balance { color: var(--gold); }
.house .panel { background: linear-gradient(#111318, #0a0b0e); border: 1px solid #3a2a12; }
.house .lbl { letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--gold); }
.house .cta { height: 54px; border-radius: 999px; background: linear-gradient(#ffe66b, var(--gold) 45%, #c99800); color: #111; font: 800 20px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 0 0 3px #000, 0 0 0 5px #8a6a00, 0 6px 18px -6px color-mix(in srgb, var(--gold) 70%, transparent); }
.house .cta:hover:not(:disabled) { background: linear-gradient(#ffe66b, var(--gold) 45%, #c99800); filter: brightness(1.08); }
.house .cta:disabled { background: #1a1c22; color: var(--muted); box-shadow: 0 0 0 3px #000, 0 0 0 5px #2a2d36; }
.house .cta.cashout { background: linear-gradient(#8dffbb, #22c55e 50%, #0f8a3e); color: #04210f; box-shadow: 0 0 0 3px #000, 0 0 0 5px #0f8a3e, 0 0 22px rgba(61, 220, 132, 0.6); animation: house-pulse 0.9s ease-in-out infinite; }
@keyframes house-pulse { 50% { transform: scale(1.025); } }
.house #scene, .house .stage-box { background: #050506; border-radius: 12px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #b8860b, 0 0 34px -8px var(--accent); }
.house .bar { background: #17191f; } .house #bar-fill { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.house .phase { font: 800 18px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; }
.house .history span { font: 800 14px/1 var(--font-display); letter-spacing: 0.03em; padding: 5px 10px; background: #17191f; }
.house .history span.hi { background: color-mix(in srgb, var(--accent) 24%, #101116); color: color-mix(in srgb, var(--accent) 75%, #fff); }
.house .history span.top { background: linear-gradient(#ffe66b, var(--gold) 45%, #c99800); color: #111; }
.house .summary.win { color: var(--gold); }
.house .fairness, .house .bets { background: #0d0e11; border: 1px solid #24272f; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .house .cta.cashout { animation: none; } }

/* Mines: tiles of raised stone with a sheen passing over them; a gem rises out of a safe one; a mine cracks its tile. */
.mines-stage { position: relative; max-width: 560px; width: 100%; margin: 0 auto; }
.mines-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: 12px; }
.house .grid5 { background: #050506; box-shadow: 0 0 0 2px #000, 0 0 0 4px #b8860b, 0 0 34px -8px var(--accent); perspective: 900px; }
.house .grid5:has(button.hit) { animation: mines-shake 0.38s 1; }
.house .grid5 button { position: relative; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, #474d5e, #232732 60%, #171a22); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), inset 0 -5px 0 rgba(0, 0, 0, 0.45), 0 3px 0 #000; transition: transform 0.12s, filter 0.12s; }
.house .grid5 button:hover:not(:disabled) { background: linear-gradient(145deg, #5a6176, #2c313e 60%, #1c1f28); transform: translateY(-2px); filter: brightness(1.15); }
.house .grid5 button::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.26) 50%, transparent 64%); transform: translateX(-130%); animation: mines-sheen 7s linear infinite; }
.house .grid5 button::before { content: ''; position: absolute; inset: 14%; background: center / contain no-repeat; }
.house .grid5 button.safe { background: radial-gradient(circle at 50% 45%, #0f5f47, #062a20 75%); box-shadow: inset 0 0 0 2px #34d399, inset 0 0 18px rgba(52, 211, 153, 0.5); animation: mines-flip 0.28s ease-out; }
.house .grid5 button.safe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23d6fff0'/%3E%3Cstop offset='.45' stop-color='%2334d399'/%3E%3Cstop offset='1' stop-color='%23047857'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 6 88 36 50 94 12 36Z' fill='url(%23a)' stroke='%23022c22' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M12 36h76M50 6 34 36l16 58 16-58Z' fill='none' stroke='%23022c22' stroke-opacity='.45' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M50 6 34 36H12Z' fill='%23fff' fill-opacity='.45'/%3E%3C/svg%3E"); animation: mines-gem 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both; filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.8)); }
.house .grid5 button.mine { background: radial-gradient(circle at 50% 45%, #5a1420, #23070c 75%); box-shadow: inset 0 0 0 2px #ff5a6e; animation: mines-flip 0.28s ease-out; }
.house .grid5 button.mine::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23767c8c'/%3E%3Cstop offset='.5' stop-color='%23262a33'/%3E%3Cstop offset='1' stop-color='%23050506'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg stroke='%23050506' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M50 12v76M12 50h76M23 23l54 54M77 23 23 77'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='29' fill='url(%23a)' stroke='%23050506' stroke-width='5'/%3E%3Ccircle cx='50' cy='50' r='9' fill='%23ff3b4e'/%3E%3Ccircle cx='47' cy='47' r='3' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E"); }
.house .grid5 button.mine.shown { opacity: 0.8; }
.house .grid5 button.mine.hit { background: radial-gradient(circle at 50% 45%, #ff8a5a, #c81e3c 55%, #4a0812); box-shadow: inset 0 0 0 3px #fff3b0, 0 0 26px rgba(255, 90, 110, 0.9); animation: mines-boom 0.5s ease-out; }
.house .grid5 button.safe::after, .house .grid5 button.mine::after, .house .grid5 button.dim::after { display: none; }
.house .grid5 button.dim { opacity: 0.4; animation: mines-flip 0.28s ease-out; }
@keyframes mines-sheen { 0%, 78% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes mines-flip { from { transform: rotateY(90deg) scale(0.9); } }
@keyframes mines-gem { from { transform: translateY(30%) scale(0.2) rotate(-40deg); opacity: 0; } }
@keyframes mines-boom { 0% { transform: scale(0.7); filter: brightness(3); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes mines-shake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -3px); } 60% { transform: translate(-3px, -2px); } 80% { transform: translate(2px, 3px); } }
.house .grid5 button:nth-child(1)::after { animation-delay: 0.00s; }
.house .grid5 button:nth-child(2)::after { animation-delay: 0.16s; }
.house .grid5 button:nth-child(3)::after { animation-delay: 0.32s; }
.house .grid5 button:nth-child(4)::after { animation-delay: 0.48s; }
.house .grid5 button:nth-child(5)::after { animation-delay: 0.64s; }
.house .grid5 button:nth-child(6)::after { animation-delay: 0.16s; }
.house .grid5 button:nth-child(7)::after { animation-delay: 0.32s; }
.house .grid5 button:nth-child(8)::after { animation-delay: 0.48s; }
.house .grid5 button:nth-child(9)::after { animation-delay: 0.64s; }
.house .grid5 button:nth-child(10)::after { animation-delay: 0.80s; }
.house .grid5 button:nth-child(11)::after { animation-delay: 0.32s; }
.house .grid5 button:nth-child(12)::after { animation-delay: 0.48s; }
.house .grid5 button:nth-child(13)::after { animation-delay: 0.64s; }
.house .grid5 button:nth-child(14)::after { animation-delay: 0.80s; }
.house .grid5 button:nth-child(15)::after { animation-delay: 0.96s; }
.house .grid5 button:nth-child(16)::after { animation-delay: 0.48s; }
.house .grid5 button:nth-child(17)::after { animation-delay: 0.64s; }
.house .grid5 button:nth-child(18)::after { animation-delay: 0.80s; }
.house .grid5 button:nth-child(19)::after { animation-delay: 0.96s; }
.house .grid5 button:nth-child(20)::after { animation-delay: 1.12s; }
.house .grid5 button:nth-child(21)::after { animation-delay: 0.64s; }
.house .grid5 button:nth-child(22)::after { animation-delay: 0.80s; }
.house .grid5 button:nth-child(23)::after { animation-delay: 0.96s; }
.house .grid5 button:nth-child(24)::after { animation-delay: 1.12s; }
.house .grid5 button:nth-child(25)::after { animation-delay: 1.28s; }
@media (prefers-reduced-motion: reduce) { .house .grid5 button, .house .grid5 button::before, .house .grid5 button::after, .house .grid5 { animation: none !important; } }

/* Limbo: the number in a ring, on a field of the game's colour. Plinko's board is drawn whole on its canvas. */
.house .big { position: relative; overflow: hidden; min-height: min(56vh, 460px); background: #050506; box-shadow: 0 0 0 2px #000, 0 0 0 4px #b8860b, 0 0 34px -8px var(--accent); }
.house .big #scene { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; background: none; border-radius: 0; box-shadow: none; pointer-events: none; }
.house .big > div { position: relative; }
.house .big .num { font-size: clamp(56px, 12vw, 120px); color: #c9cedb; -webkit-text-stroke: 2px rgba(0, 0, 0, 0.6); paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.55); transition: transform 0.18s cubic-bezier(0.2, 1.6, 0.4, 1); }
.house .big .num.rolling { color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, 0.55), 0 0 26px var(--accent); }
.house .big .num.win { color: var(--gold); transform: scale(1.1); text-shadow: 0 4px 0 rgba(0, 0, 0, 0.55), 0 0 30px rgba(255, 190, 40, 0.8); }
.house .big .num.lose { color: #ff7a8a; transform: scale(0.96); }
.house .big .sub { font: 800 16px/1 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: #d7dcea; }
.house.plinko #scene { height: min(66vh, 600px); }
.house .big #scene.over { z-index: 2; }

/* On a narrow screen (QA-13): the button is right under the stage — the multiplier and the way out of the round are on
   one screen — and the amounts, the history, the players and the fairness panel come below it. The stage's own parts
   become rows of the page, so the bet panel can sit between the stage and what follows it. */
@media (max-width: 860px) {
  .house .layout { gap: 10px; }
  .house .stage { display: contents; }
  .house .stage > .phase, .house .stage > .bar, .house .stage > #scene, .house .stage > .big, .house .stage > .mines-stage { order: 1; }
  .house .panel { order: 2; }
  .house .stage > .history, .house .stage > .bets, .house .stage > .fairness { order: 3; }
  .house .panel > .cta, .house .panel-part > .cta { order: -1; margin-top: 0; }
  .house .panel > #cancel, .house .panel-part > #cancel2 { order: -1; }
  .house .stage > .bar { margin-top: -4px; }
  .house #scene, .framed .house #scene, .house.plinko #scene { height: min(42vh, 320px); min-height: 220px; }
  .house.plinko #scene { height: min(50vh, 400px); }
  .house.cosmic #scene { height: min(52vh, 420px); min-height: 280px; }
  .house .big { min-height: min(38vh, 280px); }
  .house .mines-stage { max-width: min(100%, 52vh); }
}
/* The slot's foot on a phone: a tool's words stay on one line, and a notice gets a row of its own instead of three letters. */
.eg-tool { white-space: nowrap; }
@media (max-width: 860px) {
  .eg-foot { flex-wrap: wrap; row-gap: 2px; padding-top: 2px; padding-bottom: 2px; }
  .eg-foot .notice:not(:empty), .eg-foot .summary:not(:empty) { flex-basis: 100%; white-space: normal; }
}

/* Rocket: what stands about the player's own money stays over the stage until it is closed. */
.own-matters { display: flex; flex-direction: column; gap: 6px; }
.own-matters[hidden] { display: none; }
.own-matters p { margin: 0; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; background: #17191f; border: 1px solid #3a3d47; }
.own-matters p.bad { background: #2a0d12; border-color: var(--loss); color: #ffd0d6; }
.own-matters p span { min-width: 0; overflow-wrap: anywhere; }
.own-matters button { flex: none; white-space: nowrap; }
@media (max-width: 860px) { .house .stage > .own-matters { order: 1; } .own-matters p { flex-direction: column; } }

/* ── Ember Fruits, second pass (08.10.2026): buttons that cannot be mistaken for one another, coins that live, and a
   cabinet that can sit inside a site's own scene. ── */
/* Spin: molten gold with a ring of light going round it. Skip (the same button while the reels run) cools to steel. */
.eg-spin { position: relative; isolation: isolate; width: 112px; height: 112px; color: #2a0f00; font-size: 27px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  background: radial-gradient(circle at 34% 26%, #fff7c2 0%, #ffd21f 34%, #ff9a1a 68%, #d9480f 100%);
  box-shadow: 0 0 0 3px #1a0700, 0 0 0 6px #ffd21f, 0 0 26px 6px rgba(255, 140, 30, 0.65), inset 0 -8px 14px rgba(120, 30, 0, 0.5), inset 0 6px 10px rgba(255, 255, 255, 0.55); animation: eg-spin-breathe 2.2s ease-in-out infinite; }
.eg-spin::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 62%, rgba(255, 240, 160, 0.95) 76%, #fff 80%, rgba(255, 150, 40, 0.9) 86%, transparent 94%); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); animation: eg-spin-ring 1.9s linear infinite; }
.eg-spin:hover:not(:disabled) { filter: brightness(1.12) saturate(1.1); }
.eg-spin:active:not(:disabled) { transform: scale(0.93) rotate(24deg); }
.eg-spin:disabled { color: #6b7180; text-shadow: none; background: radial-gradient(circle at 35% 28%, #3a3d47, #0c0d10 70%); box-shadow: 0 0 0 3px #000, 0 0 0 6px #3a3d47; animation: none; }
.eg-spin:disabled::before { display: none; }
@keyframes eg-spin-ring { to { transform: rotate(360deg); } }
@keyframes eg-spin-breathe { 50% { box-shadow: 0 0 0 3px #1a0700, 0 0 0 6px #ffe66b, 0 0 40px 12px rgba(255, 150, 40, 0.85), inset 0 -8px 14px rgba(120, 30, 0, 0.5), inset 0 6px 10px rgba(255, 255, 255, 0.55); } }
/* Auto: electric blue. Bet set: violet. Speed: a green pill that runs when it is on. Each its own colour, so the hand finds it without reading. */
#auto.eg-round { border: 0; color: #eaf6ff; background: radial-gradient(circle at 35% 26%, #9be2ff 0%, #2a8cff 45%, #0b2f8f 100%); box-shadow: 0 0 0 2px #000, 0 0 0 4px #4fb6ff, 0 0 16px rgba(60, 150, 255, 0.6), inset 0 -5px 8px rgba(0, 20, 80, 0.6), inset 0 4px 6px rgba(255, 255, 255, 0.45); font: 800 15px/1 var(--eg-display); letter-spacing: 0.08em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); transition: transform 0.08s; }
#auto.eg-round.on { background: radial-gradient(circle at 35% 26%, #fff 0%, #5cf0ff 40%, #0a7bd6 100%); color: #022; animation: eg-pulse 0.9s ease-in-out infinite; }
#bet-set.eg-round { border: 0; color: #f6ecff; background: radial-gradient(circle at 35% 26%, #e3b8ff 0%, #9a3dff 45%, #3a0a86 100%); box-shadow: 0 0 0 2px #000, 0 0 0 4px #c084fc, 0 0 16px rgba(170, 90, 255, 0.55), inset 0 -5px 8px rgba(40, 0, 90, 0.6), inset 0 4px 6px rgba(255, 255, 255, 0.4); font: 800 13px/1.05 var(--eg-display); letter-spacing: 0.06em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); transition: transform 0.08s; }
.eg-round:hover:not(:disabled) { filter: brightness(1.15); color: #fff; }
.eg-round:active:not(:disabled) { transform: scale(0.93); }
#auto.eg-round:disabled, #bet-set.eg-round:disabled { filter: grayscale(0.85) brightness(0.6); box-shadow: 0 0 0 2px #000, 0 0 0 4px #3a3d47; animation: none; }
.eg-pill { min-width: 92px; padding: 6px 12px 7px; border: 0; color: #eafff2; background: linear-gradient(#1f6b3f, #0a3a1f); box-shadow: 0 0 0 2px #000, 0 0 0 4px #2f9c5c, inset 0 3px 5px rgba(255, 255, 255, 0.25); font: 800 13px/1.1 var(--eg-display); letter-spacing: 0.12em; }
.eg-pill i { color: #7fd9a3; font-size: 12px; letter-spacing: 1px; }
.eg-pill.on { background: linear-gradient(#5dffa0, #17b85a); color: #02240f; box-shadow: 0 0 0 2px #000, 0 0 0 4px #7dffb0, 0 0 18px rgba(80, 255, 150, 0.7), inset 0 3px 5px rgba(255, 255, 255, 0.5); }
.eg-pill.on i { color: #02240f; animation: eg-run 0.5s linear infinite; }
@keyframes eg-run { from { transform: translateX(-4px); opacity: 0.4; } to { transform: translateX(4px); opacity: 1; } }
@keyframes eg-pulse { 50% { transform: scale(1.06); } }
/* The bets: the one in play burns. */
.eg-bet.on { box-shadow: 0 0 0 2px #000, 0 0 0 4px #ffe66b, 0 0 20px rgba(255, 190, 40, 0.75); animation: eg-pulse 1.4s ease-in-out infinite; }
/* The lines plate glows; the pile of coins is alive: each coin bobs, one turns on its edge, a light passes over them, sparks rise. */
.eg-lines { background: linear-gradient(#3b1a66, #150727); border-color: #ffd21f; box-shadow: inset 0 0 0 1px #000, 0 0 16px rgba(170, 90, 255, 0.5); }
.eg-pile { width: 96px; height: 96px; filter: drop-shadow(0 0 14px rgba(255, 170, 40, 0.55)); }
.eg-pile::before { content: ''; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 40, 0.75), transparent); animation: eg-ember-glow 1.6s ease-in-out infinite; }
.eg-pile::after { content: ''; position: absolute; left: 50%; bottom: 30px; width: 4px; height: 4px; border-radius: 50%; background: #ffe9a0; box-shadow: -22px 6px 0 -1px #ffb347, 18px 2px 0 0 #ffd21f, -8px -10px 0 -1px #fff, 26px -6px 0 -1px #ff8a2a; animation: eg-sparks 1.8s ease-out infinite; }
.eg-pile img { width: 58px; height: 58px; animation: eg-coin-bob 2.6s ease-in-out infinite; }
.eg-pile img:nth-child(1) { left: 0; bottom: 0; }
.eg-pile img:nth-child(2) { left: 38px; bottom: 3px; animation-delay: -0.9s; }
.eg-pile img:nth-child(3) { left: 19px; bottom: 26px; animation: eg-coin-flip 3.4s cubic-bezier(0.4, 0, 0.3, 1) infinite; }
@keyframes eg-coin-bob { 0%, 100% { transform: translateY(0) rotate(-5deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) brightness(1); } 50% { transform: translateY(-6px) rotate(5deg); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.6)) brightness(1.25); } }
@keyframes eg-coin-flip { 0%, 55%, 100% { transform: translateY(0) rotateY(0); } 65% { transform: translateY(-26px) rotateY(180deg) scale(1.08); } 78% { transform: translateY(-30px) rotateY(540deg) scale(1.12); filter: brightness(1.5); } 90% { transform: translateY(-4px) rotateY(720deg); } }
@keyframes eg-ember-glow { 50% { opacity: 0.45; transform: scaleX(0.8); } }
@keyframes eg-sparks { from { transform: translateY(8px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(-46px) scale(0.6); opacity: 0; } }
/* The mark breathes with the fire. */
.eg-mark b { animation: eg-mark-glow 2.8s ease-in-out infinite; }
@keyframes eg-mark-glow { 50% { filter: drop-shadow(0 0 10px rgba(255, 170, 40, 0.9)); } }

/* Inside a site that shows the jackpots itself (?jackpots=site): the game does not say them a second time. */
.eg-mark-rail { display: none; }
.eg.site-jackpots .eg-top { display: none; }
.eg.site-jackpots .eg-mark-rail { display: flex; width: auto; margin-top: 6px; }
.framed .ember-page .eg.site-jackpots #scene { height: calc(100vh - 158px); }
@media (max-width: 860px) { .framed .ember-page .eg.site-jackpots #scene { height: calc(100vh - 262px); } .eg.site-jackpots .eg-mark-rail { display: none; } }
/* Inside a site that brings its own scene behind the game (?backdrop=site): the cabinet's own surround steps back. */
html.site-backdrop, html.site-backdrop body.ember-body { background: transparent; }
html.site-backdrop .eg { background: linear-gradient(rgba(10, 4, 20, 0.35), rgba(10, 4, 20, 0.55)); border-color: transparent; }
html.site-backdrop .eg-foot, html.site-backdrop .eg-bar { background: rgba(8, 8, 12, 0.72); }

/* ── Tutti Frutti (14.10.2026, the owner's list): the game's new face. The cabinet keeps its layout; what changes is the
   mark, the four jackpots (one size, sums that roll), one coloured button among glass ones, and a full screen that stands
   in a night orchard with the two hostesses at its sides. ── */
.eg-logo { width: 150px; transform: none; justify-content: center; }
.eg-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); animation: tf-logo 3.2s ease-in-out infinite; }
@keyframes tf-logo { 50% { transform: scale(1.04) rotate(-1.5deg); filter: drop-shadow(0 0 14px rgba(255, 200, 60, 0.75)); } }
.eg-mark.eg-logo b, .eg-mark.eg-logo i { display: none; }
.eg.site-jackpots .eg-mark-rail.eg-logo { width: 92px; }
/* Under the mark: the lines in small print, not a plate. */
.eg-lines { width: auto; margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: 700 9px/1.2 var(--eg-sans); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 240, 200, 0.75); text-align: center; }
.eg-left { justify-content: flex-start; gap: 18px; }

/* The four jackpots are one size, whatever the level; only the colour says which is which. */
.eg-jackpots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eg-jackpots b { font-size: 24px; }

/* Spin: the one coloured thing on the right — a juicy disc with a ring of fruit light that turns, a shine that sweeps, a word that stands out. */
.eg-spin { width: 120px; height: 120px; font: 900 30px/1 var(--eg-display); letter-spacing: 0.1em; color: #fff;
  text-shadow: 0 2px 0 #8a1200, 0 0 12px rgba(255, 255, 255, 0.55), 0 0 2px #000;
  background: radial-gradient(circle at 32% 24%, #fff6c9 0%, #ffd23a 22%, #ff7a1a 52%, #e8203a 84%, #8f0f2a 100%);
  box-shadow: 0 0 0 3px #2a0300, 0 0 0 7px #ffe066, 0 0 34px 10px rgba(255, 110, 40, 0.7), inset 0 -10px 18px rgba(110, 0, 20, 0.55), inset 0 8px 12px rgba(255, 255, 255, 0.6);
  animation: eg-spin-breathe 2.2s ease-in-out infinite, tf-spin-bob 2.2s ease-in-out infinite; }
.eg-spin::before { inset: -13px; background: conic-gradient(from 0deg, #ff3b4e, #ffd21f, #3ddc84, #3d8bff, #b46bff, #ff3b4e); filter: blur(1px) saturate(1.3); -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 84%); mask: radial-gradient(closest-side, transparent 82%, #000 84%); animation: eg-spin-ring 2.4s linear infinite; }
.eg-spin::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 45%, transparent 60%) no-repeat; background-size: 250% 100%; animation: tf-shine 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes tf-shine { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } }
@keyframes tf-spin-bob { 50% { transform: translateY(-2px) scale(1.03); } }
.eg-spin:disabled::after { display: none; }
/* Narrow: four equal boxes must still show €10,000.00 whole, and Spin stays a circle in the button row. */
@media (max-width: 760px) {
  .eg-jackpots b { font-size: clamp(11px, 3.4vw, 18px); }
  .eg-spin { flex: none; width: 84px; height: 84px; font-size: 22px; }
}

/* Auto, Speed and Bet set: glass, like the jackpot boxes — they do their work and leave the colour to Spin. */
#auto.eg-round, #bet-set.eg-round, .eg-pill { color: #f4f6fb; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0.1));
  -webkit-backdrop-filter: blur(8px) saturate(1.3); backdrop-filter: blur(8px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 12px rgba(0, 0, 0, 0.25), 0 4px 14px rgba(0, 0, 0, 0.45); filter: none; animation: none; }
#auto.eg-round:hover:not(:disabled), #bet-set.eg-round:hover:not(:disabled), .eg-pill:hover { background: linear-gradient(160deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.1) 55%, rgba(255, 255, 255, 0.16)); }
#auto.eg-round.on, .eg-pill.on { border-color: rgba(255, 230, 120, 0.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 16px rgba(255, 210, 60, 0.55); color: #fff3b0; background: linear-gradient(160deg, rgba(255, 230, 120, 0.3), rgba(255, 255, 255, 0.06)); }
.eg-pill i, .eg-pill.on i { color: inherit; }
#auto.eg-round:disabled, #bet-set.eg-round:disabled { opacity: 0.45; filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* The coins on the left: each one turns on its edge in its own time and catches the light. */
.eg-pile img { animation: tf-coin 3s ease-in-out infinite; }
.eg-pile img:nth-child(2) { animation-delay: -1s; }
.eg-pile img:nth-child(3) { animation: tf-coin-flip 3.4s cubic-bezier(0.4, 0, 0.3, 1) infinite; }
@keyframes tf-coin { 0%, 100% { transform: translateY(0) rotateY(0); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.7)) brightness(1); } 40% { transform: translateY(-5px) rotateY(160deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6)) brightness(1.35); } 60% { transform: translateY(-5px) rotateY(200deg); } }
@keyframes tf-coin-flip { 0%, 50%, 100% { transform: translateY(0) rotateY(0); } 62% { transform: translateY(-30px) rotateY(360deg) scale(1.1); filter: brightness(1.5); } 80% { transform: translateY(-6px) rotateY(720deg); } }

/* Tutti Frutti moves always, whatever the system's "reduce motion" says (the owner's decision for every slot, 16.10.2026). */
/* Full screen: the orchard at night behind everything, the cabinet in the middle, a hostess at each side. */
.tf-scene { display: none; }
/* A site that makes its frame full screen: the page fills the screen, and the cabinet is laid out as if it were. */
.eg.tf-full { position: fixed; inset: 0; max-width: none; border-radius: 0; justify-content: center; overflow: hidden; }
.eg.tf-full #scene { height: calc(100vh - 190px); }
.eg:fullscreen, .eg.tf-full { background: #050a14 url(/art/ember/orchard.webp) center / cover no-repeat; border: 0; }
.eg:fullscreen .tf-scene, .eg.tf-full .tf-scene { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eg:fullscreen > :not(.tf-scene), .eg.tf-full > :not(.tf-scene) { position: relative; z-index: 1; width: min(1100px, 58vw); margin-left: auto; margin-right: auto; }
.eg:fullscreen .eg-top, .eg:fullscreen .eg-mid, .eg:fullscreen .eg-bar, .eg.tf-full .eg-top, .eg.tf-full .eg-mid, .eg.tf-full .eg-bar { background: rgba(5, 6, 12, 0.55); border-radius: 10px; }
/* A film fills only the margin beside the cabinet: narrower margins crop its sides, wider ones leave orchard at the outer edge. */
.tf-side { position: absolute; bottom: 0; height: 100vh; width: min(56.25vh, calc((100vw - min(1100px, 58vw)) / 2)); object-fit: cover; object-position: center top; }
.tf-left { left: max(0px, calc((100vw - min(1100px, 58vw)) / 2 - 56.25vh)); }
.tf-right { right: max(0px, calc((100vw - min(1100px, 58vw)) / 2 - 56.25vh)); }
/* Each film fades into the orchard on the side that faces the cabinet and at its foot. */
.tf-left { -webkit-mask: linear-gradient(to left, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 12%); -webkit-mask-composite: source-in; mask: linear-gradient(to left, transparent 0, #000 22%) intersect, linear-gradient(to top, transparent 0, #000 12%); }
.tf-right { -webkit-mask: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to top, transparent 0, #000 12%); -webkit-mask-composite: source-in; mask: linear-gradient(to right, transparent 0, #000 22%) intersect, linear-gradient(to top, transparent 0, #000 12%); }
@media (max-aspect-ratio: 4/3) { .tf-scene { display: none !important; } .eg:fullscreen > :not(.tf-scene), .eg.tf-full > :not(.tf-scene) { width: auto; } }

/* The fairness panel: the player's seed for the round to come, theirs to change before the bet. */
.fair input.seed { width: min(100%, 300px); padding: 3px 6px; margin-right: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.fair input.seed.bad { border-color: var(--loss); }

/* A demo table says what it is for as long as the page is open, in a frame too. */
.demo-strip { margin: 0 0 12px; padding: 8px 10px; border: 1px solid currentColor; border-radius: 8px; font-size: 13px; line-height: 1.3; opacity: 0.92; }
.demo-strip[hidden] { display: none; }
.demo-strip #demo-credits { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Cosmic Crash: the cockpit wants room — the window, the console and the hand under it. */
@media (min-width: 861px) { .house.cosmic #scene { height: min(66vh, 620px); } }
.house.cosmic #scene { background: #07080c; }