/* ===========================================================================
   EUROPEAN BLACKJACK — the table. 2026-09-24, to briefs/european-blackjack.md:
   the approved Spanish 21 stylesheet, class for class (one name changed:
   s21 -> ebj), as the brief requires (§5: the same palette, felt, card
   backs, chips and components). Four hand places, as in Spanish 21 (this
   table also splits to four hands). There is no hole card: the dealer's
   second card is dealt face up when the dealer's turn begins.
   The Spanish 21 notes below describe the shared layout.
   =========================================================================== */
/* ===========================================================================
   SPANISH 21 — the table.
   Rebuilt 2026-09-23 to briefs/spanish-21.md on the approved Three Card
   Poker design (game.css byte-identical to Three Card Poker's) with its own
   colour identity (§6): petrol-teal felt, muted antique gold and warm ivory,
   navy/teal/gold card backs. The composition Ronan approved the same day:

     RULES &        DEALER  [A][▮][ ][ ]   total                     BALANCE
     SPECIAL 21s             ONE INSTRUCTION                          Last win / bet
     on the felt    HAND 1   HAND 2   HAND 3   HAND 4                 8 decks · no 10s
                    HIT  STAND  DOUBLE  SPLIT  SURRENDER  RESCUE      special 21 status
                    tip line                                           hint · count
                    chip rack  /  itemised result
   =========================================================================== */

:root{
  /* Movement timings (§39) — the controller reads these; reduced motion
     shortens every one of them and removes none. The round's PACE (how long
     a card stays before the game moves on, the hold before a result) is not
     here: it is the shared kit's (blackjack-round.js, Pace A), and reduced
     motion never shortens it. */
  --ebj-deal-ms: 220ms;
  --ebj-flip-ms: 240ms;
  --ebj-settle-ms: 320ms;

  /* §6: the Spanish 21 identity. The felt tokens are game.css's own
     category tokens, re-pointed, so the table and the card backs change
     together. */
  --table-bg:#0E3B45;          /* primary felt: deep petrol teal */
  --table-deep:#072128;
  --table-highlight:#1B5963;   /* secondary felt: a lighter teal, for depth only */
  --felt-2:#0A2E36;
  --ebj-gold: #c9a75e;         /* muted antique gold */
  --ebj-gold-bright: #e6cc8e;
  --ebj-gold-line: rgba(201,167,94,.38);
  --ebj-ivory: #f3ecdb;        /* warm ivory */
  --ebj-ink: #20180f;
  --ebj-red: #a4283a;
  --ebj-win: #6fd17f;          /* the shared status colours */
  --ebj-loss: #ff8f8f;
  --ebj-navy: #13233f;

  /* Two card rows share the height: the dealer and your hands. What is not
     a card is --ebj-fixed. The width holds four hands of two cards each. */
  --ebj-fixed: 474px;
  --ebj-left-w: 158px;
  --ebj-right-w: 170px;
  --ebj-sides: 470px;
  --card-h-v: calc((100vh - var(--ebj-fixed)) / 2);
  --card-h-v: calc((100dvh - var(--ebj-fixed)) / 2);
  --card-h-w: calc(((100vw - var(--ebj-sides)) / 4 - 26px) / 2 / 0.712);
  --card-h: clamp(62px, min(var(--card-h-v), var(--card-h-w)), 140px);
  --card-w: calc(var(--card-h) * 0.712);
  --card-gap: clamp(6px, calc(var(--card-h) * 0.08), 10px);
  --ebj-vgap: 6px;
  --ebj-band-h: 108px;
}
@media (prefers-reduced-motion: reduce){
  :root{
    --ebj-deal-ms: 1ms;
    --ebj-flip-ms: 1ms;
    --ebj-settle-ms: 1ms;
  }
  #ebjGame *, #ebjGame *::before, #ebjGame *::after{
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* ---- the frame -------------------------------------------------------------- */
html, body{ margin:0; height:100%; }
body{ background:#050403; overflow:hidden; padding:0; display:block; }
#ebjGame{
  max-width:none; width:100%;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  overflow:hidden; box-sizing:border-box;
  background: radial-gradient(at 50% 0%, #0b1416 0%, #050403 60%);
  color:var(--ebj-ivory);
  font-family: Inter, system-ui, sans-serif;
}
#ebjGame *, #ebjGame *::before, #ebjGame *::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

#ebjHeader{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:8px 14px 10px; width:100%;
}
#ebjHeader .wordmark{ display:flex; flex-direction:column; gap:3px; }
#ebjHeader .title{ font-family:Cinzel, serif; font-size:20px; font-weight:700; letter-spacing:1.2px; color:var(--ebj-gold-bright); text-shadow:0 1px 0 rgba(0,0,0,.4); }
#ebjSecondaryControls{ display:flex; gap:8px; }
#ebjGame .gold-icon-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-width:44px; height:44px; padding:0 8px;
  background:linear-gradient(155deg, #10191a, #070a0b);
  border:1px solid var(--ebj-gold-line); border-radius:12px;
  color:var(--ebj-gold); font-size:17px; cursor:pointer;
}
#ebjGame .gold-icon-btn .ico{ line-height:1; }
#ebjGame .gold-icon-btn .btn-label{ font-family:Inter, system-ui, sans-serif; font-size:8.5px; font-weight:700; letter-spacing:.68px; text-transform:uppercase; color:var(--ebj-gold); line-height:1; }
#ebjGame .gold-icon-btn:hover{ border-color:var(--ebj-gold); }

.table-wrap{ flex:1 1 auto; min-height:0; display:flex; padding:6px 12px 6px; max-width:none; width:100%; }
#ebjTable{ flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; position:relative; padding:2px 5px; }
/* The felt's inner gold line is 12px in (game.css); everything on the table
   keeps at least 6px clear of it (felt-line-sweep.js). */
#ebjTable .felt-surface{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; padding:18px 18px 18px; }
/* Table markings (§6): fine ivory and muted-gold lines, low prominence —
   an arc under the dealer, where a blackjack table prints its rules line. */
#ebjTable .felt-surface::after{
  content:""; position:absolute; left:18%; right:18%; top:34%; height:26%;
  border:1px solid rgba(243,236,219,.07); border-top:0; border-radius:0 0 50% 50% / 0 0 100% 100%;
  pointer-events:none;
}
#ebjGame footer{ flex:none; padding:1px 16px 4px; text-align:center; font-size:9px; line-height:1.3; color:var(--ebj-ivory); opacity:.5; }
#ebjGame footer .footer-short{ display:none; }
.rules-rg{ font-size:11.5px; line-height:1.45; opacity:.75; margin:4px 0 0; }

/* ---- the columns -------------------------------------------------------------- */
.ebj-layout{
  flex:1; min-height:0; position:relative; z-index:1;
  display:grid;
  grid-template-columns:var(--ebj-left-w) minmax(0,1fr) var(--ebj-right-w);
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"left centre right" "left band .";
  column-gap:clamp(14px, 2vw, 30px); row-gap:var(--ebj-vgap);
  padding:4px 0 2px;
}
.ebj-left{ grid-area:left; display:flex; align-items:center; min-width:0; }
.ebj-right{ grid-area:right; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:12px; min-width:0; }
.ebj-centre{ grid-area:centre; display:flex; flex-direction:column; align-items:stretch; justify-content:center; min-height:0; min-width:0; gap:var(--ebj-vgap); }
.ebj-centre > *{ flex:none; }
/* The band (chip rack, tips, result) sits in the centre column, centred under
   your hands (Ronan, 2026-09-24: "width is incorrect"; "Centre it"). */
.ebj-band{ grid-area:band; justify-self:center; }

/* ---- rules and the special 21 table, printed on the felt ---------------------- */
.ebj-paytables{ display:flex; flex-direction:column; gap:10px; opacity:.7; width:100%; }
.ebj-inline-rules ul{ margin:2px 0 0; padding-left:13px; }
.ebj-inline-rules li{ font-size:10px; line-height:13px; margin:0 0 1px; }
.pt-title{ font-family:Cinzel, serif; font-size:11px; letter-spacing:2.2px; text-transform:uppercase; color:var(--ebj-gold); padding-bottom:2px; border-bottom:1px solid rgba(201,167,94,.22); margin-bottom:2px; }
.pt-row{ display:flex; justify-content:space-between; gap:10px; font-size:10.5px; line-height:14px; }
.pt-row .mono{ font-family:"IBM Plex Mono", monospace; color:var(--ebj-gold-bright); }
.pt-foot{ font-size:9.5px; opacity:.75; margin-top:2px; line-height:1.3; }
body:not([data-ui-phase="betting"]) .ebj-paytables{ opacity:.45; }

/* ---- the right column ------------------------------------------------------------ */
.ebj-bank{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.ebj-bank label{ font-size:9.5px; letter-spacing:1.52px; text-transform:uppercase; opacity:.6; }
.ebj-bank-val{ font-family:"IBM Plex Mono", monospace; font-size:clamp(20px, 3vh, 28px); font-weight:800; color:var(--ebj-gold-bright); }
.ebj-rail{ display:flex; flex-direction:column; gap:2px; }
.ebj-rail .felt-stat{ display:flex; align-items:baseline; gap:8px; }
.ebj-rail label{ font-size:9.5px; letter-spacing:1.52px; text-transform:uppercase; opacity:.55; }
.ebj-rail .val{ font-size:14px; font-weight:600; opacity:.9; }
.ebj-rail .val.pos{ color:var(--ebj-win); }
.ebj-shoe{ font-size:10.5px; letter-spacing:.8px; text-transform:uppercase; opacity:.7; }
.ebj-shoe .mono{ font-family:"IBM Plex Mono", monospace; font-weight:800; color:var(--ebj-gold-bright); }
.ebj-shoe .mono.low{ color:#e0697a; }
.ebj-bonus-status{ font-size:11px; line-height:1.35; font-weight:700; color:var(--ebj-gold-bright); }
.ebj-bonus-status.void{ color:var(--ebj-ivory); opacity:.8; font-weight:600; }
.ebj-bonus-status:empty{ display:none; }
.ebj-hint{ font-size:11.5px; line-height:1.35; color:var(--ebj-gold-bright); width:100%; }
.ebj-hint:empty, .ebj-count:empty{ display:none; }
.ebj-count{ font-family:"IBM Plex Mono", monospace; font-size:11px; opacity:.8; }

/* ---- the dealer -------------------------------------------------------------------- */
.ebj-dealer{ display:flex; flex-direction:column; align-items:stretch; gap:3px; }
.ebj-seat-row{ display:flex; align-items:baseline; justify-content:center; gap:10px; height:18px; white-space:nowrap; }
.ebj-seat-label{ font-size:11px; letter-spacing:2.2px; text-transform:uppercase; opacity:.62; }
.ebj-total-pill{ font-family:Fraunces, serif; font-size:14px; line-height:18px; font-weight:700; color:var(--ebj-gold-bright); text-shadow:0 1px 2px rgba(0,0,0,.55); }
.ebj-total-pill:empty{ display:none; }

/* Cards sit in a row box of one card's height; the controller places them
   side by side while they fit, and overlaps them just enough when not. */
.ebj-cards{ position:relative; height:var(--card-h); width:100%; perspective:900px; }
.ebj-dealer-cards{ width:min(100%, calc(var(--card-w) * 6.2)); margin:0 auto; }
#ebjGame .ebj-cards .card{ position:absolute; top:0; width:var(--card-w); height:var(--card-h); margin:0; animation:none; opacity:1; transform:none; }

/* The card face: Three Card Poker's. The back: Spanish 21's own (§6). */
#ebjGame .card{
  border-radius:9px; overflow:hidden;
  font-family:Inter, sans-serif; font-weight:800; color:var(--ebj-ink);
  background:linear-gradient(155deg, #fffdf7, #f5efdf);
  box-shadow:0 5px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.9);
  transform-origin:50% 50%; backface-visibility:hidden;
}
#ebjGame .card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:linear-gradient(115deg, rgba(255,255,255,0) 32%, rgba(255,255,255,.5) 45%, rgba(255,255,255,0) 58%);
}
#ebjGame .card.red{ color:var(--ebj-red); }
#ebjGame .card .card-corner{ position:absolute; display:block; text-align:center; font-size:clamp(11px, calc(var(--card-h) * 0.14), 18px); line-height:1; }
#ebjGame .card .card-corner-top{ top:6%; left:7%; }
#ebjGame .card .card-corner-bottom{ bottom:6%; right:7%; transform:rotate(180deg); }
#ebjGame .card .card-centre-suit{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:clamp(20px, calc(var(--card-h) * 0.32), 42px); line-height:1.2; opacity:.92; }
/* A geometric back in navy, teal and restrained gold — clearly a card on
   the felt, never the felt's own colour (§6). */
#ebjGame .card.back{
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(60deg, rgba(201,167,94,0) 0 7px, rgba(201,167,94,.16) 7px 8px),
    repeating-linear-gradient(-60deg, rgba(201,167,94,0) 0 7px, rgba(201,167,94,.16) 7px 8px),
    linear-gradient(155deg, #1b3d5a, var(--ebj-navy));
  box-shadow:0 5px 12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 4px var(--ebj-navy), inset 0 0 0 5px #1d6a70, inset 0 0 0 7px var(--ebj-navy), inset 0 0 0 8px var(--ebj-gold);
}
#ebjGame .card.back::before{ display:none; }
#ebjGame .card.back::after{ content:"\25C6"; font-size:clamp(14px, calc(var(--card-h) * .18), 22px); color:var(--ebj-gold-bright); opacity:.85; }

/* ---- the one instruction ------------------------------------------------------------ */
.ebj-call{ font-family:Fraunces, serif; font-size:15px; letter-spacing:.8px; color:var(--ebj-ivory); height:20px; line-height:20px; text-align:center; white-space:nowrap; }

/* ---- your hands (§22): one wide place, then four fixed places ---------------------- */
.ebj-hands{ position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:10px; align-items:stretch; justify-items:center;
  height:calc(var(--card-h) + 44px); }
.ebj-hands[data-layout="grid"]{ grid-template-columns:repeat(4, minmax(0,1fr)); justify-items:stretch; }
.ebj-player-hand{
  position:relative; display:flex; flex-direction:column; gap:2px; min-width:0;
  width:100%; padding:3px 6px 3px; border-radius:12px;
  border:1px solid rgba(201,167,94,.16); background:rgba(0,0,0,.08);
  transition:border-color .2s, box-shadow .2s, opacity .2s, background .2s;
}
.ebj-hands[data-layout="single"] .ebj-player-hand{ width:min(100%, calc(var(--card-w) * 6 + 40px)); }
.ebj-player-hand.active{ border-color:var(--ebj-gold-bright); background:rgba(230,204,142,.07); box-shadow:0 0 0 1px var(--ebj-gold-bright), 0 0 18px rgba(230,204,142,.28); }
.ebj-player-hand.pending{ border-style:dashed; }
.ebj-player-hand.complete:not(.active){ opacity:.86; }
.ebj-hand-head, .ebj-hand-foot{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; height:16px; white-space:nowrap; min-width:0; }
.ebj-hand-name{ font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; opacity:.75; }
.ebj-hand-wager{ font-family:"IBM Plex Mono", monospace; font-size:11px; font-weight:700; color:var(--ebj-gold-bright); overflow:hidden; text-overflow:ellipsis; }
.ebj-hand-total{ font-family:Fraunces, serif; font-size:13.5px; font-weight:700; color:var(--ebj-gold-bright); }
.ebj-hand-status{ font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; opacity:.85; overflow:hidden; text-overflow:ellipsis; }
.ebj-hand-status.win{ color:var(--ebj-win); opacity:1; }
.ebj-hand-status.loss{ color:var(--ebj-loss); opacity:1; }
body[data-ui-phase="betting"] .ebj-player-hand{ display:none; }

/* The wager spot, shown while wagering, where your hand will be dealt. */
.ebj-bet-spot{ display:none; flex-direction:column; align-items:center; justify-content:center; gap:4px; align-self:center; }
body[data-ui-phase="betting"] .ebj-bet-spot{ display:flex; }
.ebj-bet-spot .bet-circle{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:clamp(64px, calc(var(--card-h) * .72), 92px); height:clamp(64px, calc(var(--card-h) * .72), 92px); border-radius:50%;
  min-width:0; padding:0;
  border:2px dashed var(--ebj-gold-line);
  background:radial-gradient(at 50% 30%, rgba(255,255,255,.05), rgba(0,0,0,.22));
}
.ebj-bet-spot.active .bet-circle{ border-style:solid; border-color:var(--ebj-gold); background:radial-gradient(at 50% 30%, rgba(230,204,142,.18), rgba(0,0,0,.28)); }
.ebj-bet-spot .current-bet-val{ font-family:"IBM Plex Mono", monospace; font-size:14px; font-weight:800; color:var(--ebj-gold-bright); }
.ebj-bet-spot .spot-label{ font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:1.7px; text-transform:uppercase; color:var(--ebj-gold); opacity:.9; }
.ebj-pile{ display:flex; align-items:center; justify-content:center; height:16px; }
.ebj-pile:empty{ display:none; }
.ebj-pile .pile-disc{ width:15px; height:15px; border-radius:50%; margin-left:-5px; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.5); }
.ebj-pile .pile-disc:first-child{ margin-left:0; }
.pile-disc.c5{ background:#2f8a42; } .pile-disc.c10{ background:#a8323f; } .pile-disc.c25{ background:#3464a5; }
.pile-disc.c50{ background:#7e48aa; } .pile-disc.c100{ background:#222; } .pile-disc.c500{ background:#d4a847; }

/* ---- the actions (§34): one height across the round ------------------------------- */
.ebj-actions{ display:flex; align-items:center; justify-content:center; height:48px; width:100%; }
.ebj-actions .action-row{ display:none; gap:8px; align-items:center; justify-content:center; width:100%; }
body[data-ui-phase="betting"] #betActions,
body[data-ui-phase="insurance"] #ebjInsurance,
body[data-ui-phase="player"] #ebjDecision,
body[data-ui-phase="settled"] #settleActions{ display:flex; }
#ebjGame .action{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:44px; padding:0 14px; min-width:0;
  font-family:Inter, sans-serif; font-size:14px; font-weight:800; letter-spacing:.45px; text-transform:uppercase;
  border-radius:14px; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 4px rgba(0,0,0,.25);
  transition:filter .15s, transform .15s;
}
#ebjGame .action::before{ content:""; position:absolute; left:0; right:0; top:0; height:44%; background:linear-gradient(rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events:none; }
#ebjGame .action:hover:not(:disabled){ filter:brightness(1.08); }
#ebjGame .action:active:not(:disabled){ transform:translateY(1px); }
#ebjGame .action:disabled{ opacity:.4; cursor:default; }
#ebjGame .btn-deal{ color:#150f05; background:linear-gradient(#e2c47c, #93763a); border:1px solid transparent; min-width:220px; }
#ebjGame .btn-hit{ color:#150f05; background:linear-gradient(#e2c47c, #93763a); border:1px solid var(--ebj-gold-bright); }
#ebjGame .btn-stand{ color:var(--ebj-ivory); background:linear-gradient(#1f6068, #0f3940); border:1px solid rgba(243,236,219,.55); }
#ebjGame .btn-extra, #ebjGame .btn-surrender{ color:var(--ebj-ivory); background:rgba(0,0,0,.28); border:1px solid rgba(243,236,219,.36); }
#ebjGame .btn-ghost{ color:var(--ebj-ivory); background:rgba(0,0,0,.28); border:1px solid var(--ebj-gold); }
#ebjGame .decision-btn{ flex:1 1 0; max-width:150px; padding:0 6px; }
#ebjGame .decision-btn.ebj-main{ flex:1.35 1 0; max-width:190px; font-size:15px; }
#ebjGame .decision-btn .db-label{ line-height:1.05; white-space:nowrap; }
#ebjGame .decision-btn .db-sub{ font-family:Inter, sans-serif; font-size:10px; font-weight:600; letter-spacing:.2px; text-transform:none; opacity:.8; line-height:1.1; white-space:nowrap; }
#ebjGame .decision-btn .db-sub.mono{ font-family:"IBM Plex Mono", monospace; font-weight:700; }
#ebjGame .decision-btn.unaffordable{ opacity:.55; filter:grayscale(.5); }
#ebjInsurance .decision-btn{ max-width:200px; }
#settleActions .action{ min-width:170px; }
#ebjGame .decision-btn.hinted::after{ content:"HINT"; display:none; position:absolute; top:2px; right:4px; font-size:7.5px; font-weight:800; letter-spacing:.6px; color:#150f05; background:var(--ebj-gold-bright); border-radius:4px; padding:0 3px; line-height:11px; }

/* ---- the note line: essential notice, or the optional tip ------------------------- */
.ebj-note-line{ position:relative; height:32px; width:100%; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ebj-notice, .ebj-tip{ font-size:11.5px; line-height:1.35; letter-spacing:.2px; max-width:760px; }
.ebj-notice{ color:#ffd8a8; font-weight:700; }
.ebj-notice:empty, .ebj-tip:empty{ display:none; }
.ebj-tip{ color:var(--ebj-ivory); opacity:.82; font-style:italic; }
.ebj-notice.on ~ .ebj-tip:not([data-tip="J"]){ display:none; }
.ebj-hint-line{ display:none; font-size:10.5px; line-height:14px; color:var(--ebj-gold-bright); opacity:.85; }
.ebj-hint-line:empty{ display:none !important; }

/* ---- the band: chip rack while wagering, the result after ------------------------- */
.ebj-band{ position:relative; width:100%; max-width:860px; height:var(--ebj-band-h); display:flex; align-items:stretch; justify-content:flex-start; }
#ebjWagerControls{ width:100%; display:none; align-items:center; justify-content:center; gap:12px; }
body[data-ui-phase="betting"] #ebjWagerControls{ display:flex; }
.chip-row{ display:flex; gap:10px; align-items:center; max-width:none; flex-wrap:nowrap; }
#ebjGame .chip{
  position:relative; width:48px; height:48px; min-height:48px; border-radius:50%; border:0; padding:0; cursor:pointer; flex:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 10px rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.1), inset 0 2px 3px rgba(255,255,255,.2), inset 0 -3px 5px rgba(0,0,0,.35);
}
#ebjGame .chip .chip-face{
  width:60%; height:60%; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono", monospace; font-size:13px; font-weight:800;
  background:radial-gradient(circle at 35% 28%, #fffdf6, #efe8d4 75%);
  box-shadow:0 0 0 5px var(--rim, #fff), 0 0 0 10px #fff, inset 0 1px 2px rgba(0,0,0,.2);
  color:var(--ink-c, #333);
}
/* Chip accents: the site's denominations, edged in Spanish 21's gold (§6). */
#ebjGame .chip.c5{ background:radial-gradient(circle at 35% 30%, #4caa5f, #1f6b2c); --rim:#4caa5f; --ink-c:#1f6b2c; }
#ebjGame .chip.c10{ background:radial-gradient(circle at 35% 30%, #d1545f, #7a1c2a); --rim:#d1545f; --ink-c:#7a1c2a; }
#ebjGame .chip.c25{ background:radial-gradient(circle at 35% 30%, #3f8f97, #16474d); --rim:#3f8f97; --ink-c:#16474d; }
#ebjGame .chip.c50{ background:radial-gradient(circle at 35% 30%, #a267d1, #5a2f80); --rim:#a267d1; --ink-c:#5a2f80; }
#ebjGame .chip.c100{ background:radial-gradient(circle at 35% 30%, #3a3a3a, #0d0d0d); --rim:#555; --ink-c:#111; }
#ebjGame .chip.c500{ background:radial-gradient(circle at 35% 30%, #e6cc8e, #a8883f); --rim:#e6cc8e; --ink-c:#6d5420; }
#ebjGame .chip.c100 .chip-face, #ebjGame .chip.c500 .chip-face{ font-size:11px; }
#ebjGame .chip:disabled{ opacity:.4; cursor:default; }
#ebjGame .chip.selected{ box-shadow:0 5px 10px rgba(0,0,0,.5), inset 0 0 0 3px var(--ebj-gold-bright), inset 0 0 8px rgba(230,204,142,.55); }
.rack-tools{ display:flex; gap:8px; align-items:center; }
#ebjGame .rack-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  height:44px; min-width:48px; padding:0 8px;
  color:var(--ebj-ivory); background:rgba(0,0,0,.26); border:1px solid rgba(230,204,142,.22); border-radius:9px; cursor:pointer;
}
#ebjGame .rack-btn .ico{ font-size:13px; line-height:1; }
#ebjGame .rack-btn .rack-label{ font-size:8.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
#ebjGame .rack-btn:disabled{ opacity:.4; cursor:default; }
.ebj-limits{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:0 2px; }
.ebj-limits label{ font-size:8.5px; letter-spacing:1px; text-transform:uppercase; opacity:.6; }
.ebj-limits .mono{ font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:700; color:var(--ebj-gold-bright); white-space:nowrap; }

/* The result (§30): Three Card Poker's strip, one row per hand, Insurance
   separately, then the dealer's result, the round and the closing balance. */
.ebj-settlement{
  display:flex; flex-direction:column; justify-content:center; gap:3px; width:100%; height:100%; overflow:hidden;
  font-size:11.5px; color:var(--ebj-ivory);
  background:rgba(0,0,0,.5); border:1px solid var(--ebj-gold-line); border-radius:12px;
  padding:5px 10px 6px;
  visibility:hidden; opacity:0; transform:translateY(6px);
  transition:opacity var(--ebj-settle-ms) ease-out, transform var(--ebj-settle-ms) ease-out;
}
body[data-ui-phase="betting"] .ebj-settlement{ display:none; }
body[data-ui-phase="settled"] .ebj-settlement{ visibility:visible; opacity:1; transform:none; }
.settlement-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.settlement-note{ font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ebj-gold-bright); background:rgba(0,0,0,.35); border-radius:6px; padding:2px 8px; white-space:nowrap; }
.settlement-dealer{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.st-hand{ font-family:Fraunces, serif; font-size:12px; font-weight:700; color:var(--ebj-gold-bright); }
.settlement-rows{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:3px 10px; }
.settlement-row{
  display:grid; grid-template-columns:78px auto auto minmax(0,1fr) auto auto; align-items:baseline; gap:7px;
  background:rgba(255,255,255,.05); border-radius:7px; padding:2px 6px; min-width:0;
}
.sr-label{ font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; white-space:nowrap; }
.sr-stake, .sr-returned{ font-family:"IBM Plex Mono", monospace; opacity:.88; }
.sr-result{ font-size:10px; font-weight:800; letter-spacing:.6px; border-radius:6px; padding:1px 7px; background:rgba(0,0,0,.4); }
/* One line per row, whatever its contents: the outcome tag's padding made
   rows 18px and pushed the totals out of the box. */
.settlement-row{ height:16px; align-items:center; }
.sr-label, .sr-stake, .sr-returned, .sr-rate, .sr-delta{ line-height:14px; }
.sr-result{ line-height:13px; padding:0 6px; }
.sr-result.win{ color:var(--ebj-win); } .sr-result.loss{ color:var(--ebj-loss); } .sr-result.push{ color:#e6dfcc; }
.sr-rate{ font-size:10.5px; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-delta{ font-family:"IBM Plex Mono", monospace; font-weight:800; }
.sr-delta.win, .st-val.win{ color:var(--ebj-win); }
.sr-delta.loss, .st-val.loss{ color:var(--ebj-loss); }
.settlement-totals{ display:flex; justify-content:flex-end; gap:20px; }
.settlement-total-row{ display:flex; align-items:baseline; gap:10px; }
.st-label{ font-size:10.5px; letter-spacing:.63px; text-transform:uppercase; opacity:.85; }
.st-val{ font-family:"IBM Plex Mono", monospace; font-size:13px; font-weight:800; }

/* ---- panels ------------------------------------------------------------------------ */
.panel-overlay{ position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.6); }
.panel-overlay.open{ display:flex; }
.panel-overlay .panel{
  width:min(480px, 100%); max-height:100%; overflow:auto;
  background:linear-gradient(155deg, rgba(10,22,24,.96), rgba(5,8,9,.97));
  border:1px solid var(--ebj-gold-line); border-radius:16px; padding:22px 24px;
  box-shadow:0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--ebj-ivory); font-family:Inter, system-ui, sans-serif;
}
.panel h2{ font-family:Cinzel, serif; font-size:20px; font-weight:700; color:var(--ebj-gold); margin:0 0 4px; }
.panel .sub{ font-family:"IBM Plex Mono", monospace; font-size:12px; color:#a2aaa6; margin:0 0 10px; }
.rules-list{ margin:0 0 10px; padding-left:18px; }
.rules-list li{ font-size:13.5px; line-height:1.55; margin-bottom:4px; }
.ebj-rules-tables{ margin:6px 0 12px; }
.panel-close{ display:block; width:100%; margin-top:10px; padding:10px; font-weight:700; color:var(--ebj-ivory); background:none; border:1px solid var(--ebj-gold-line); border-radius:999px; cursor:pointer; }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.switch{ position:relative; display:inline-block; width:40px; height:22px; flex:none; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; inset:0; background:rgba(255,255,255,.15); border-radius:20px; cursor:pointer; transition:background .2s; }
.slider::before{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:var(--ebj-ink); transition:transform .2s; }
.switch input:checked + .slider{ background:var(--ebj-gold); }
.switch input:checked + .slider::before{ transform:translateX(18px); }
.switch input:focus-visible + .slider{ outline:2px solid var(--ebj-gold-bright); outline-offset:2px; }

/* ===========================================================================
   NARROWER DESKTOPS: one result row per line, a taller band.
   =========================================================================== */
@media (min-width:680px) and (max-width:1199px){
  :root{ --ebj-fixed: 500px; --ebj-band-h: 132px; --ebj-left-w: 140px; --ebj-right-w: 150px; --ebj-sides: 420px; }
  /* One row per hand: two columns leave no room for every fact. */
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:1px; }
  .settlement-row{ padding:0 6px; line-height:14px; }
  /* The rack fits the centre column (the band is centred under the hands). */
  #ebjWagerControls{ gap:4px; }
  .chip-row{ gap:4px; }
  #ebjGame .chip{ width:44px; height:44px; min-height:44px; }
  .rack-tools{ gap:4px; }
  #ebjGame .rack-btn{ min-width:44px; padding:0 5px; }
  #ebjGame .decision-btn{ padding:0 4px; }
  #ebjGame .action{ font-size:12.5px; }
  #ebjGame .decision-btn.ebj-main{ font-size:13.5px; }
  /* SURRENDER is the longest label: with four hands in play the row is at
     its narrowest, so the smaller buttons drop their letter-spacing. */
  #ebjGame .decision-btn:not(.ebj-main) .db-label{ letter-spacing:0; }
  #ebjGame .decision-btn:not(.ebj-main){ padding:0 2px; }
}
/* SHORT DESKTOP WINDOWS: the furniture gives before the cards. */
@media (min-width:680px) and (max-height:640px) and (min-height:481px){
  :root{ --ebj-fixed: 436px; --ebj-vgap: 3px; --ebj-band-h: 98px; }
  #ebjHeader{ padding:4px 14px 5px; }
  #ebjGame .gold-icon-btn{ height:40px; }
  .ebj-paytables{ gap:5px; }
  .pt-title{ font-size:10px; letter-spacing:1.6px; padding-bottom:1px; margin-bottom:1px; }
  .pt-row{ font-size:9.5px; line-height:11.5px; }
  .ebj-inline-rules li{ font-size:9.5px; line-height:11.5px; }
  .ebj-actions{ height:46px; }
  .ebj-settlement{ padding:3px 8px 4px; gap:2px; }
  .settlement-row{ padding:1px 6px; }
  /* A8 (2026-10-07): four hands and Insurance needed 97px of a 96px box at
     1366x625 (battery §35); 2px between result rows, not 3px. */
  .settlement-rows{ gap:2px 10px; }
  #ebjGame footer{ padding:0 16px 2px; font-size:8.5px; }
}
@media (min-width:680px) and (max-width:1199px) and (max-height:640px) and (min-height:481px){
  :root{ --ebj-fixed: 460px; --ebj-band-h: 124px; }
  .ebj-settlement{ padding:2px 8px 3px; gap:1px; }
}
@media (min-width:680px) and (max-height:540px) and (min-height:481px){
  #ebjHeader{ padding:2px 14px 3px; }
  #ebjGame .gold-icon-btn{ height:38px; }
  #ebjTable .felt-surface{ padding-top:17px; padding-bottom:18px; }
  .ebj-layout{ padding:2px 0 0; }
  .ebj-dealer{ gap:1px; }
  .ebj-call{ height:18px; line-height:18px; font-size:14px; }
  .settlement-row{ height:15px; line-height:13px; }
  .settlement-rows{ gap:1px 10px; }
  .settlement-head, .settlement-totals{ line-height:14px; }
  .settlement-note{ padding:0 8px; line-height:14px; }
  :root{ --ebj-vgap: 2px; }
  .ebj-seat-row{ height:15px; }
  .ebj-hands{ gap:6px; height:calc(var(--card-h) + 35px); }
  .ebj-hand-head, .ebj-hand-foot{ height:13px; }
  .ebj-player-hand{ padding:2px 6px 1px; gap:1px; }
  .ebj-actions{ height:40px; }
  #ebjGame .action{ min-height:38px; }
  .ebj-note-line{ height:28px; }
  .pt-foot{ display:none; }
}

/* ===========================================================================
   PHONES HELD UPRIGHT (Ronan, 2026-09-23: fits at 360x640 and larger with no
   scrolling; 320x568 may scroll vertically). Top to bottom: title and the
   four labelled buttons; the balance and Last Win / Last Bet in the felt's
   corners; the dealer; the instruction; your hands (room for a 2x2 split
   from the start, so nothing moves when you split); the special 21 line;
   the actions; the tip; the chips or the result. The rules and the special
   21 table are in the Rules panel.
   =========================================================================== */
@media (max-width:679px) and (min-height:481px){
  :root{
    --ebj-fixed-p: 478px;
    --ebj-card-v: calc((100vh - var(--ebj-fixed-p)) / 3 * 0.712);
    --ebj-card-v: calc((100dvh - var(--ebj-fixed-p)) / 3 * 0.712);
    --card-gap: 5px;
    --card-w: clamp(44px, min(calc((100vw - 60px) / 4.6), var(--ebj-card-v)), 76px);
    --card-h: calc(var(--card-w) / 0.712);
    --ebj-vgap: 4px;
    --ebj-band-h: 120px;
  }
  body{ overflow-x:hidden; overflow-y:auto; }
  #ebjGame{ height:auto; min-height:100vh; min-height:100dvh; overflow:visible; }
  #ebjHeader{ flex-wrap:nowrap; gap:8px; padding:4px 10px; }
  #ebjHeader .title{ font-size:16px; line-height:20px; }
  #ebjSecondaryControls{ gap:6px; }
  #ebjGame .gold-icon-btn{ min-width:44px; height:44px; padding:0 4px; }
  .table-wrap{ padding:2px; }
  #ebjTable{ padding:2px 4px; }
  #ebjTable .felt-surface{ padding:2px 4px 8px; }
  #ebjTable .felt-surface::after{ display:none; }
  .table-wrap, #ebjTable, #ebjTable .felt-surface, .ebj-layout{ min-height:auto; }
  .ebj-layout{ flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:var(--ebj-vgap); padding:36px 4px 2px; }
  .ebj-left, .ebj-right, .ebj-centre{ display:contents; }
  .ebj-paytables, .ebj-hint, .ebj-count{ display:none; }
  .ebj-dealer{ order:1; } .ebj-call{ order:2; } .ebj-hands{ order:3; } .ebj-bonus-status{ order:4; }
  .ebj-actions{ order:5; } .ebj-note-line{ order:6; } .ebj-band{ order:7; }
  .ebj-rail{ position:absolute; top:18px; left:22px; flex-direction:row; gap:10px; }
  .ebj-rail label{ font-size:8.5px; letter-spacing:1px; }
  .ebj-rail .val{ font-size:12px; }
  .ebj-bank{ position:absolute; top:18px; right:22px; flex-direction:row; align-items:baseline; gap:6px; }
  .ebj-bank-val{ font-size:16px; }
  .ebj-shoe{ position:absolute; top:34px; left:22px; font-size:9px; }
  .ebj-dealer, .ebj-call, .ebj-hands, .ebj-actions, .ebj-note-line, .ebj-band{ flex:none; }
  .ebj-bonus-status, .ebj-bonus-status:empty{ display:block; flex:none; height:14px; font-size:10.5px; line-height:14px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* The dealer's label and total sit beside the dealer's cards: a line of
     their own cost the room the four-hand result needs. */
  .ebj-dealer{ flex-direction:row; align-items:center; gap:6px; }
  .ebj-seat-row{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; width:52px; height:auto; flex:none; }
  .ebj-seat-label{ font-size:9.5px; letter-spacing:1.4px; }
  .ebj-total-pill{ font-size:12.5px; line-height:15px; white-space:normal; }
  .ebj-dealer-cards{ flex:1 1 auto; width:auto; min-width:0; }
  .ebj-call{ font-size:13px; height:18px; line-height:18px; }
  .ebj-hands{ height:calc(2 * var(--card-h) + 76px); grid-template-rows:minmax(0,1fr); gap:6px; }
  .ebj-hand-total{ font-size:12px; line-height:13px; }
  #ebjGame .gold-icon-btn .btn-label{ letter-spacing:.2px; }
  .ebj-hand-head, .ebj-hand-foot{ height:13px; }
  .ebj-player-hand{ gap:1px; padding:1px 5px; }
  .ebj-hands[data-layout="grid"]{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(2, minmax(0,1fr)); }
  .ebj-hands[data-layout="single"] .ebj-player-hand{ align-self:center; }
  .ebj-player-hand{ padding:2px 5px; }
  .ebj-actions{ height:44px; }
  .ebj-actions .action-row{ gap:4px; flex-wrap:nowrap; }
  #ebjGame .action{ min-width:0; padding:0 2px; font-size:11px; letter-spacing:0; }
  #ebjGame .decision-btn, #ebjGame .decision-btn.ebj-main{ max-width:none; font-size:11px; }
  #ebjGame .decision-btn.btn-extra{ font-size:10px; }
  /* Equal widths on a phone: SURRENDER needs the room more than HIT does. */
  #ebjGame .decision-btn.ebj-main{ flex:1 1 0; }
  #ebjGame .decision-btn.btn-extra .db-label{ letter-spacing:-.2px; }
  #ebjGame .decision-btn .db-sub{ font-size:9px; letter-spacing:0; }
  #ebjGame .decision-btn.hinted::after{ display:block; }
  #ebjGame .btn-deal{ min-width:180px; }
  #settleActions .action{ min-width:0; flex:1 1 0; }
  .ebj-hint-line{ display:block; }
  .ebj-note-line{ height:30px; padding:0 8px; }
  .ebj-notice, .ebj-tip{ font-size:10.5px; line-height:14px; letter-spacing:0; }
  .ebj-band{ max-width:100%; padding:0 4px; justify-content:center; }
  #ebjWagerControls{ flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding-top:4px; }
  .chip-row{ gap:4px; }
  #ebjGame .chip{ width:44px; height:44px; min-height:44px; }
  .ebj-settlement{ padding:2px 6px; gap:1px; font-size:10.5px; justify-content:flex-start; }
  .settlement-note{ font-size:10px; line-height:12px; padding:1px 8px; }
  .st-hand{ font-size:11px; line-height:13px; }
  .st-label{ font-size:9px; letter-spacing:.3px; line-height:13px; white-space:nowrap; }
  .st-val{ font-size:11px; line-height:13px; }
  .settlement-totals{ justify-content:space-between; gap:8px; }
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:1px; }
  .settlement-row{ grid-template-columns:52px auto auto minmax(0,1fr) auto auto; gap:4px; padding:0 4px; line-height:14px; }
  .sr-label{ font-size:9.5px; letter-spacing:.2px; }
  .sr-result{ font-size:9px; padding:0 4px; }
  .sr-rate{ font-size:9.5px; }
  #ebjGame footer{ padding:2px 8px 4px; font-size:10px; line-height:13px; }
  #ebjGame footer .footer-full{ display:none; }
  #ebjGame footer .footer-short{ display:inline; }
}
/* 320 wide (below the approved minimum; it may scroll vertically). */
@media (max-width:359px) and (min-height:481px){
  :root{ --ebj-band-h: 150px; }
  /* Five actions do not fit one row at 320: two rows (it may scroll). */
  .ebj-actions{ height:92px; }
  body[data-ui-phase="player"] #ebjDecision{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; }
  .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  .settlement-dealer{ justify-content:space-between; }
  .settlement-totals{ flex-direction:column; gap:0; }
  .settlement-total-row{ justify-content:space-between; }
  .settlement-row{ grid-template-columns:48px minmax(0,1fr) auto auto; grid-template-areas:"l s s r" "rt rt ret d"; row-gap:0; }
  .sr-label{ grid-area:l; } .sr-stake{ grid-area:s; } .sr-result{ grid-area:r; justify-self:end; }
  .sr-rate{ grid-area:rt; } .sr-returned{ grid-area:ret; } .sr-delta{ grid-area:d; justify-self:end; }
}

/* ===========================================================================
   PHONES HELD SIDEWAYS, and any window 480px high or less (Four Card
   Poker's pattern): the dealer, the instruction and your hands on the left;
   the actions, the tip and the chips or the result on the right.
   =========================================================================== */
@media (max-height:480px){
  :root{
    --ebj-r-w: 214px;
    --ebj-fixed-l: 180px;
    --ebj-card-hv: calc((100vh - var(--ebj-fixed-l)) / 3);
    --ebj-card-hv: calc((100dvh - var(--ebj-fixed-l)) / 3);
    --card-gap: 5px;
    --card-w: clamp(44px, min(calc((100vw - var(--ebj-r-w) - 80px) / 4.6), calc(var(--ebj-card-hv) * 0.712)), 80px);
    --card-h: calc(var(--card-w) / 0.712);
    --ebj-vgap: 3px;
  }
  body{ overflow:hidden; }
  #ebjGame{ height:100vh; height:100dvh; overflow:hidden; }
  #ebjHeader{ flex-wrap:nowrap; justify-content:flex-start; gap:12px; padding:2px 150px 2px 10px; height:44px; }
  #ebjHeader .title{ font-size:15px; line-height:18px; white-space:nowrap; }
  #ebjSecondaryControls{ gap:4px; }
  #ebjGame .gold-icon-btn{ min-width:44px; height:40px; padding:0 4px; }
  .ebj-bank{ position:fixed; top:10px; right:14px; flex-direction:row; align-items:baseline; gap:6px; }
  .ebj-bank-val{ font-size:17px; }
  .table-wrap{ padding:0 4px 2px; }
  #ebjTable{ padding:2px 4px; }
  #ebjTable .felt-surface{ padding:2px 6px 6px; }
  #ebjTable .felt-surface::after{ display:none; }
  .ebj-layout{ display:flex; flex-direction:column; justify-content:center; gap:var(--ebj-vgap); padding:14px calc(var(--ebj-r-w) + 10px) 2px 6px; }
  .ebj-left, .ebj-right, .ebj-centre{ display:contents; }
  .ebj-paytables, .ebj-hint, .ebj-count{ display:none; }
  .ebj-dealer{ order:1; } .ebj-call{ order:2; } .ebj-hands{ order:3; } .ebj-bonus-status{ order:4; }
  .ebj-rail{ position:absolute; top:6px; left:12px; flex-direction:row; gap:10px; z-index:2; }
  .ebj-rail label{ font-size:8px; letter-spacing:.8px; }
  .ebj-rail .val{ font-size:11px; }
  .ebj-shoe{ position:absolute; top:6px; left:190px; font-size:8.5px; }
  .ebj-dealer, .ebj-call, .ebj-hands{ flex:none; }
  /* The special 21 line sits in the right column, above the chips / result
     box; the result's own row names the bonus once the round is settled. */
  .ebj-bonus-status, .ebj-bonus-status:empty{ display:block; position:absolute; right:3px; width:calc(var(--ebj-r-w) - 3px); top:calc(var(--ebj-r-act) + 60px); height:13px; font-size:10px; line-height:13px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  body[data-ui-phase="settled"] .ebj-bonus-status, body[data-ui-phase="settling"] .ebj-bonus-status, body[data-ui-phase="betting"] .ebj-bonus-status{ display:none; }
  .ebj-dealer{ flex-direction:row; align-items:center; gap:6px; }
  .ebj-seat-row{ flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; width:52px; height:auto; flex:none; }
  .ebj-seat-label{ font-size:9.5px; letter-spacing:1.4px; }
  .ebj-total-pill{ font-size:12px; line-height:15px; white-space:normal; }
  .ebj-dealer-cards{ flex:1 1 auto; width:auto; min-width:0; }
  .ebj-call{ font-size:13px; height:18px; line-height:18px; }
  .ebj-hands{ height:calc(2 * var(--card-h) + 72px); gap:4px; }
  .ebj-hand-total{ font-size:12px; line-height:13px; }
  .ebj-hands[data-layout="grid"]{ grid-template-columns:repeat(2, minmax(0,1fr)); grid-template-rows:repeat(2, minmax(0,1fr)); }
  .ebj-hands[data-layout="single"] .ebj-player-hand{ align-self:center; }
  .ebj-player-hand{ padding:1px 5px; }
  .ebj-hand-head, .ebj-hand-foot{ height:14px; }

  /* The right column, per phase. */
  body{ --ebj-r-act: 44px; }
  body[data-ui-phase="player"]{ --ebj-r-act: 140px; }
  body[data-ui-phase="insurance"]{ --ebj-r-act: 44px; }
  .ebj-actions, .ebj-note-line, .ebj-band{ position:absolute; right:3px; width:calc(var(--ebj-r-w) - 3px); max-width:none; padding:0; }
  .ebj-actions{ top:8px; height:var(--ebj-r-act); align-items:flex-start; }
  .ebj-actions .action-row{ width:100%; gap:4px; }
  body[data-ui-phase="player"] #ebjDecision{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  #ebjGame .action{ min-width:0; min-height:44px; padding:0 6px; font-size:12.5px; }
  #ebjGame .btn-deal{ min-width:0; flex:1 1 auto; }
  #ebjGame .decision-btn, #ebjGame .decision-btn.ebj-main{ max-width:none; font-size:12.5px; }
  #ebjGame .decision-btn .db-sub{ font-size:9.5px; }
  #ebjGame .decision-btn.hinted::after{ display:block; }
  #settleActions .action{ min-width:0; flex:1 1 0; font-size:12px; }
  .ebj-hint-line{ display:block; }
  .ebj-note-line{ top:calc(var(--ebj-r-act) + 12px); height:46px; align-items:flex-start; text-align:left; justify-content:flex-start; }
  .ebj-notice, .ebj-tip{ font-size:10.5px; line-height:14px; letter-spacing:0; }
  .ebj-band{ top:calc(var(--ebj-r-act) + 60px); bottom:8px; height:auto; }
  #ebjWagerControls{ flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; }
  .chip-row{ gap:4px; flex-wrap:wrap; justify-content:center; max-width:150px; }
  #ebjGame .chip{ width:44px; height:44px; min-height:44px; }
  .rack-tools{ gap:4px; flex-wrap:wrap; justify-content:center; }
  #ebjGame .rack-btn{ min-width:44px; height:40px; padding:0 4px; }
  .ebj-settlement{ padding:2px 6px; gap:1px; font-size:10.5px; justify-content:flex-start; }
  .settlement-head{ flex-direction:column; align-items:stretch; gap:0; }
  .settlement-note{ align-self:center; font-size:10px; line-height:12px; padding:1px 8px; }
  .settlement-dealer{ justify-content:space-between; }
  .st-hand{ font-size:10.5px; line-height:13px; }
  .settlement-totals{ flex-direction:column; gap:0; }
  .settlement-total-row{ justify-content:space-between; gap:6px; }
  .st-label{ font-size:9px; letter-spacing:.3px; line-height:13px; }
  .st-val{ font-size:11px; line-height:13px; }
  .settlement-rows{ grid-template-columns:minmax(0,1fr); gap:0; }
  .settlement-row{ grid-template-columns:50px minmax(0,1fr) auto auto; grid-template-areas:"l s s r" "rt rt ret d"; column-gap:6px; row-gap:0; padding:0 5px; line-height:13px; }
  .sr-label{ grid-area:l; font-size:9.5px; letter-spacing:.3px; }
  .sr-stake{ grid-area:s; }
  .sr-result{ grid-area:r; justify-self:end; font-size:9px; padding:0 4px; }
  .sr-rate{ grid-area:rt; font-size:9.5px; }
  .sr-returned{ grid-area:ret; }
  .sr-delta{ grid-area:d; justify-self:end; }
  #ebjGame footer{ padding:0 8px 2px; font-size:10px; line-height:13px; }
  #ebjGame footer .footer-full{ display:none; }
  #ebjGame footer .footer-short{ display:inline; }
}
@media (min-width:680px) and (max-width:1199px) and (max-height:540px) and (min-height:481px){
  :root{ --ebj-band-h: 116px; --ebj-fixed: 452px; }
}
/* 1200px wide and up, 481-489px high: the result band gives 8px so the dealer
   label keeps 6px clear of the felt's gold line (the cards are already at
   their 44px floor here). Measured by the spec at short-1200 (1200x481). */
@media (min-width:1200px) and (max-height:489px) and (min-height:481px){
  :root{ --ebj-band-h: 90px; }
}
/* Your hand is dealt into place 1 and never moves (Ronan, "Fixed place 1").
   Until a split its frame spans the row so a long hand can spread into the
   empty places ("Frame spans the row"); the controller keeps the first two
   cards where place 1 alone would hold them. */
.ebj-hands[data-layout="grid"] .ebj-player-hand.span-row{ grid-column:1 / -1; }

/* ===========================================================================
   Ronan's review, 2026-09-23 18:20.
   - "edging issue": a button's label never runs across its border; the
     header buttons grow to fit their labels.
   - "Centre circle, label above": the bet circle is centred on the table
     (your cards are then dealt into place 1); DEALER sits centred above the
     dealer's cards on upright phones as on desktop.
   - "Yes, phones too": everything on the felt keeps 6px inside its gold line
     (12px in) on phones, upright and sideways.
   =========================================================================== */
#ebjGame .gold-icon-btn{ width:min-content; }
.ebj-hands .ebj-bet-spot{ grid-column:1 / -1; grid-row:1 / -1; justify-self:center; align-self:center; }

@media (max-width:679px) and (min-height:481px){
  :root{
    --ebj-fixed-p: 506px;
    --card-w: clamp(44px, min(calc((100vw - 84px) / 4.6), var(--ebj-card-v)), 76px);
  }
  #ebjTable .felt-surface{ padding:4px 16px 16px; }
  .ebj-rail .felt-stat{ border:none; padding:0; }
  .ebj-rail{ left:6px; } .ebj-shoe{ left:6px; } .ebj-bank{ right:6px; }
  /* The dealer's line starts below the shoe line (it ends 44px down). */
  .ebj-layout{ padding-top:48px; }
  .ebj-dealer{ flex-direction:column; align-items:stretch; gap:2px; }
  .ebj-seat-row{ flex-direction:row; align-items:baseline; justify-content:center; gap:8px; width:auto; height:15px; }
  .ebj-total-pill{ white-space:nowrap; }
  .ebj-dealer-cards{ flex:none; width:min(100%, calc(var(--card-w) * 6.2)); margin:0 auto; }
}
@media (max-height:480px){
  :root{ --ebj-fixed-l: 200px; }
  #ebjTable .felt-surface{ padding:12px 15px 16px; }
  .ebj-rail .felt-stat{ border:none; padding:0; }
}
@media (max-width:679px) and (min-height:481px){
  /* HIT's "One more card" and the other small lines may take two lines
     rather than run past the button's edge. */
  #ebjGame .decision-btn .db-sub{ white-space:normal; line-height:1.05; }
}
@media (max-width:359px) and (min-height:481px){
  .table-wrap{ padding:2px 0; }
  #ebjTable{ padding:2px; }
  .ebj-layout{ padding-left:2px; padding-right:2px; }
  .chip-row{ gap:3px; }
  #ebjHeader{ gap:4px; padding:4px 6px; }
  #ebjSecondaryControls{ gap:3px; }
  #ebjGame .gold-icon-btn{ padding:0 3px; }
  #ebjGame .gold-icon-btn .btn-label{ letter-spacing:0; }
  .ebj-bank{ flex-direction:column; align-items:flex-end; gap:0; }
}
@media (max-width:359px) and (min-height:481px){
  .ebj-band{ padding:0; }
}
@media (max-width:399px) and (min-height:481px){
  #ebjGame .decision-btn.btn-extra{ font-size:9px; }
  #ebjGame .decision-btn.btn-extra .db-label{ letter-spacing:-.3px; }
}
@media (min-width:680px) and (max-width:1199px){
  #ebjGame .decision-btn:not(.ebj-main) .db-label{ letter-spacing:-.2px; }
}
@media (max-height:480px){
  #ebjHeader{ height:40px; }
  .ebj-hand-head, .ebj-hand-foot{ height:12px; }
  .ebj-call{ height:16px; line-height:16px; }
}
/* The shortest sideways phones: the gold line's margin comes out of the
   hands' own spacing, not the cards (already at their 44px floor). */
@media (max-height:400px){
  :root{ --ebj-vgap: 2px; }
  .ebj-hands{ height:calc(2 * var(--card-h) + 58px); gap:3px; }
  .ebj-player-hand{ padding:0 4px; gap:1px; }
  .ebj-hand-head, .ebj-hand-foot{ height:11px; }
  .ebj-call{ height:15px; line-height:15px; font-size:12.5px; }
}
/* Upright phones up to 700px high: the gold line's margin and DEALER above
   the cards come out of the spacing (the cards are at their 44px floor). */
@media (max-width:679px) and (min-height:481px) and (max-height:700px){
  :root{ --ebj-vgap: 3px; }
  .ebj-hands{ height:calc(2 * var(--card-h) + 62px); gap:4px; }
  .ebj-player-hand{ padding:0 5px; gap:1px; }
  .ebj-hand-head, .ebj-hand-foot{ height:11px; }
  .ebj-call{ height:16px; line-height:16px; }
  .ebj-note-line{ height:28px; }
}
@media (max-height:370px){
  .ebj-hands{ height:calc(2 * var(--card-h) + 56px); }
  .ebj-hand-head, .ebj-hand-foot{ height:10px; }
}
/* 640x360 and the like: Last Win / Last Bet and the shoe line sit to the
   left of the dealer's cards instead of above them. */
@media (max-height:370px){
  .ebj-layout{ padding-top:6px; }
  .ebj-rail{ top:6px; left:12px; }
  .ebj-shoe{ top:24px; left:12px; }
  .ebj-dealer{ padding-left:170px; }
}
@media (max-width:359px) and (min-height:481px){
  /* 320 may scroll: the table grows downward rather than up under the shoe line. */
  .ebj-layout{ justify-content:flex-start; }
}
@media (max-width:679px) and (min-height:481px){
  .ebj-rail{ top:14px; } .ebj-bank{ top:14px; } .ebj-shoe{ top:30px; }
  .ebj-layout{ padding-top:44px; }
}
@media (max-width:679px) and (min-height:481px) and (max-height:700px){
  :root{ --ebj-vgap: 2px; }
  .ebj-hands{ height:calc(2 * var(--card-h) + 58px); }
  .ebj-hand-head, .ebj-hand-foot{ height:10px; }
  .ebj-note-line{ height:26px; }
  .ebj-notice, .ebj-tip{ line-height:13px; }
}
/* Ronan, 2026-09-23 19:49 ("card goes text on hand, middle of suit not
   looking correct"): the centre suit is sized to the card, never larger than
   a third of its width, so the corner indices keep clear of it on a small
   card; and the hand's name, wager, total and status keep to their own
   rows, clear of the cards. */
/* A8 (2026-10-07): 32% of the width, not 40%. At 40% a heart sat 0.7-1.6px
   from the corners on phones, at 1366x625 and sideways; at 32% the gap is at
   least 2.4px at every size (measured, battery §10). */
#ebjGame .card .card-centre-suit{ font-size:clamp(12px, calc(var(--card-w) * 0.32), 42px); line-height:1; }
#ebjGame .card .card-corner{ font-size:clamp(9px, calc(var(--card-h) * 0.14), 18px); }
#ebjGame .card .card-corner, #ebjGame .card .card-centre-suit{ font-family:Inter, "Segoe UI Symbol", "Apple Symbols", "DejaVu Sans", sans-serif; font-variant-emoji:text; }
.ebj-hand-head, .ebj-hand-foot{ align-items:center; overflow:hidden; }
.ebj-hand-name, .ebj-hand-status{ line-height:1; }
.ebj-hand-total, .ebj-hand-wager{ line-height:1; }

/* ===========================================================================
   YOUR HANDS: CENTRED, SPREADING ON A SPLIT (Ronan, 2026-09-23 21:27,
   replacing "Fixed place 1": "should be centered spreading on a split").
   One hand sits centred under the dealer. A split spreads the hands evenly
   about the centre (the hands move once, with the split); once split, no
   hand moves while you play them. Desktop: 8 half-width tracks, each hand
   two of them. Phones and sideways: two across, a third centred below.
   =========================================================================== */
.ebj-hands[data-layout="grid"]{ grid-template-columns:repeat(8, minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
.ebj-hands[data-layout="grid"] .ebj-player-hand{ grid-row:1; }
.ebj-hands[data-layout="grid"] .ebj-player-hand.span-row{ grid-column:1 / -1; }
.ebj-hands[data-layout="grid"][data-count="2"] .ebj-player-hand[data-place="1"]{ grid-column:3 / 5; }
.ebj-hands[data-layout="grid"][data-count="2"] .ebj-player-hand[data-place="2"]{ grid-column:5 / 7; }
.ebj-hands[data-layout="grid"][data-count="3"] .ebj-player-hand[data-place="1"]{ grid-column:2 / 4; }
.ebj-hands[data-layout="grid"][data-count="3"] .ebj-player-hand[data-place="2"]{ grid-column:4 / 6; }
.ebj-hands[data-layout="grid"][data-count="3"] .ebj-player-hand[data-place="3"]{ grid-column:6 / 8; }
.ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="1"]{ grid-column:1 / 3; }
.ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="2"]{ grid-column:3 / 5; }
.ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="3"]{ grid-column:5 / 7; }
.ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="4"]{ grid-column:7 / 9; }
@media (max-width:679px), (max-height:480px){
  .ebj-hands[data-layout="grid"]{ grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:repeat(2, minmax(0,1fr)); }
  .ebj-hands[data-layout="grid"] .ebj-player-hand.span-row{ grid-column:1 / -1; grid-row:1 / -1; align-self:center; }
  .ebj-hands[data-layout="grid"][data-count="2"] .ebj-player-hand{ grid-row:1 / -1; align-self:center; }
  .ebj-hands[data-layout="grid"][data-count="2"] .ebj-player-hand[data-place="1"]{ grid-column:1 / 3; }
  .ebj-hands[data-layout="grid"][data-count="2"] .ebj-player-hand[data-place="2"]{ grid-column:3 / 5; }
  .ebj-hands[data-layout="grid"][data-count="3"] .ebj-player-hand[data-place="1"]{ grid-column:1 / 3; grid-row:1; }
  .ebj-hands[data-layout="grid"][data-count="3"] .ebj-player-hand[data-place="2"]{ grid-column:3 / 5; grid-row:1; }
  .ebj-hands[data-layout="grid"][data-count="3"] .ebj-player-hand[data-place="3"]{ grid-column:2 / 4; grid-row:2; }
  .ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="1"]{ grid-column:1 / 3; grid-row:1; }
  .ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="2"]{ grid-column:3 / 5; grid-row:1; }
  .ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="3"]{ grid-column:1 / 3; grid-row:2; }
  .ebj-hands[data-layout="grid"][data-count="4"] .ebj-player-hand[data-place="4"]{ grid-column:3 / 5; grid-row:2; }
}
/* The hand's name, wager, total and status sit inside its frame, never on
   the frame's border (Ronan's screenshot, 21:23: YOUR HAND on the line). */
/* A tip is read from the top of its line down: on a narrow screen a long tip
   runs into the empty space below (the chips or the result appear there only
   when the tip is short), never up into the buttons (Ronan's screenshot,
   2026-09-23 21:23: the Double tip ran into HIT and STAND). */
.ebj-note-line{ justify-content:flex-start; overflow:visible; }
.ebj-notice, .ebj-tip{ line-height:1.25; }
body[data-ui-phase="player"] .ebj-band, body[data-ui-phase="insurance"] .ebj-band, body[data-ui-phase="evenMoney"] .ebj-band,
body[data-ui-phase="dealing"] .ebj-band, body[data-ui-phase="dealer"] .ebj-band{ visibility:hidden; }
/* Phones and sideways: each label row as tall as its lettering, 2px inside the frame; the cards take what is left. */
@media (max-width:679px), (max-height:480px){ .ebj-player-hand{ padding-top:2px; padding-bottom:2px; gap:0; } .ebj-hand-head, .ebj-hand-foot{ height:11px; }
  #ebjGame .ebj-hand-name, #ebjGame .ebj-hand-status{ font-size:8.5px; line-height:1; } #ebjGame .ebj-hand-wager, #ebjGame .ebj-hand-total{ font-size:9px; line-height:1; }
  .ebj-hand-head{ align-items:flex-start; } .ebj-hand-foot{ align-items:flex-end; } }
/* Sideways: DEALER and the total sit beside the dealer's cards, so your
   hands take the same left offset — both centred on one line (Ronan,
   "centered spreading on a split"). */
@media (max-height:480px){
  .ebj-hands{ margin-left:58px; }
}
/* 640x360 and the like: the table is too short to give Last Win / Last Bet
   and the deck line their own space beside the dealer, so they move up into
   the header, beside the balance, and the dealer's cards and your hands share
   one centre line. */
@media (max-height:370px){
  .ebj-dealer{ padding-left:0; }
  .ebj-layout{ padding-top:7px; }
  .ebj-rail{ position:fixed; top:9px; left:130px; right:auto; z-index:6; flex-direction:row; gap:8px; }
  .ebj-rail .felt-stat{ gap:4px; }
  .ebj-shoe{ position:fixed; top:25px; left:130px; right:auto; z-index:6; font-size:8px; }
  #ebjHeader .title{ font-size:13px; line-height:15px; white-space:normal; max-width:110px; }
}

/* Phones: "European Blackjack" is longer than "Spanish 21": the title takes
   two lines beside the four buttons rather than pushing them off the screen
   (as Single Deck Blackjack). */
@media (max-width:679px) and (min-height:481px){
  #ebjHeader .wordmark{ flex:1 1 auto; min-width:0; }
  #ebjHeader .title{ white-space:normal; font-size:15px; line-height:18px; }
  #ebjSecondaryControls{ flex:none; }
}

/* The shortest sideways phones: "European Blackjack" wraps to two lines, so
   Last Win and Last Bet stack (one above the other) rather than run into the
   Rules button once the amounts grow; the shoe line sits under them. */
@media (max-height:370px){
  .ebj-rail{ flex-direction:column; gap:0; top:2px; }
  .ebj-rail .felt-stat{ height:12px; min-height:0; padding:0; line-height:12px; align-items:center; }
  .ebj-rail .felt-stat .val{ line-height:12px; }
  .ebj-shoe{ top:27px; line-height:10px; }
}