/* =========================================================================
   Cup Night Tote — styles
   Two skins live here:
   - .console  : operator laptop UI (dense, functional, light)
   - .display  : big-screen tote board (dark, huge, readable across a room)
   ========================================================================= */

:root {
  --green:   #1b2a5e;
  --green-d: #12204a;
  --gold:    #d81f2a;
  --gold-d:  #a4161a;
  --ink:     #16233f;
  --paper:   #f6f7f5;
  --line:    #d8ddd6;
  --red:     #c0392b;
  --blue:    #1f5f8b;
  --ok:      #1e874b;
  --warn:    #b8860b;
  --muted:   #6b7280;
  --brewly-blue: #a9cce3; --brewly-cream: #f7ecd0; --brewly-brown: #3d1e0c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

/* ============================ OPERATOR CONSOLE =========================== */

.console { max-width: 1180px; margin: 0 auto; padding: 12px 16px 60px; }

.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg, var(--green), var(--green-d));
  color: #fff; padding: 10px 14px; border-radius: 10px; margin-bottom: 12px;
}
.topbar .brand { display:flex; align-items:center; gap:10px; font-weight: 800; font-size: 18px; letter-spacing: .3px; }
.topbar .brand small { display: block; font-weight: 500; opacity: .85; font-size: 11px; }
.topbar .spacer { flex: 1; }
.topbar input[type="text"] {
  border: 0; border-radius: 6px; padding: 6px 9px; font-size: 14px; min-width: 200px;
}
.topbar label { font-size: 12px; opacity: .9; }
.topbar .takeout { display: flex; align-items: center; gap: 6px; }
.topbar .takeout input { width: 58px; border:0; border-radius:6px; padding:6px; }

.btn {
  border: 1px solid rgba(0,0,0,.15); background: #fff; color: var(--ink);
  padding: 7px 12px; border-radius: 7px; font-size: 13px; font-weight: 600;
}
.btn:hover { background: #f0f0ee; }
.btn.gold  { background: var(--gold); border-color: var(--gold-d); }
.btn.gold:hover { background: #e23744; }
.btn.green { background: var(--green); color:#fff; border-color: var(--green-d); }
.btn.green:hover { background: #26408f; }
.btn.red   { background: var(--red); color:#fff; border-color:#922; }
.btn.ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn.ghost:hover { background: rgba(255,255,255,.12); }
.btn.sm { padding: 4px 8px; font-size: 12px; }
.btn.pct { background:#fff; color:var(--ink); border-color:var(--line); }
.btn.pct:hover { background:#eef1f8; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin-bottom: 14px; flex-wrap: wrap; }
.tabs button {
  border: 0; background: transparent; padding: 9px 14px; font-size: 14px; font-weight: 700;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tabs button.active { color: var(--green); border-bottom-color: var(--gold); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin-bottom: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 16px; }
.card h3 { margin: 14px 0 6px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing:.5px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field label { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing:.4px; }
.field input, .field select {
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 14px; background:#fff;
}
.field.grow { flex: 1; min-width: 140px; }

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); }
table.grid th { font-size: 11px; text-transform: uppercase; letter-spacing:.4px; color: var(--muted); }
table.grid tr.scr td { opacity: .45; text-decoration: line-through; }
table.grid input.odds { width: 74px; }
table.grid input.name { width: 100%; min-width: 120px; }
table.grid td.num { font-weight: 800; text-align: center; }

.pill { display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing:.4px; }
.pill.upcoming { background:#eef; color:#446; }
.pill.open { background:#e6f6ec; color: var(--ok); }
.pill.closed { background:#fdeecf; color: var(--warn); }
.pill.resulted { background:#eee; color:#555; }

.silk { display:inline-block; width:18px; height:18px; border-radius:4px; border:1px solid rgba(0,0,0,.25); vertical-align:middle; }

.hint { font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); }
.right { text-align: right; }
.mono { font-variant-numeric: tabular-nums; }
.big-div { font-weight: 800; color: var(--green); }
.warnbox { background:#fff6e6; border:1px solid #f0d18a; color:#7a5a00; padding:8px 10px; border-radius:7px; font-size:13px; }
.okbox   { background:#eaf7ef; border:1px solid #b7e0c6; color:#155f38; padding:8px 10px; border-radius:7px; font-size:13px; }

.ticket {
  border: 1px dashed #bbb; border-radius: 8px; padding: 10px; background:#fffef7; font-size: 13px;
}
.ticket .tno { font-weight: 800; font-size: 15px; }

.selgrid { display:flex; gap:6px; flex-wrap: wrap; margin: 6px 0; }
.selgrid button {
  border:1px solid var(--line); background:#fff; border-radius:6px; min-width:38px; padding:6px 8px;
  font-weight:800; font-size:14px;
}
.selgrid button.pick { background: var(--green); color:#fff; border-color: var(--green-d); }
.selgrid button.pick[data-rank]::after { content: attr(data-rank); display:block; font-size:9px; font-weight:700; opacity:.9; }
.selgrid button:disabled { opacity:.3; }

.legbox { border:1px solid var(--line); border-radius:8px; padding:8px; margin-bottom:8px; }
.legbox h4 { margin:0 0 4px; font-size:13px; }

.summary-tiles { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tile { border:1px solid var(--line); border-radius:9px; padding:12px; background:#fff; }
.tile .k { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:700; }
.tile .v { font-size:24px; font-weight:800; margin-top:2px; }
.tile.pos .v { color: var(--ok); }
.tile.neg .v { color: var(--red); }

/* ============================ BIG-SCREEN DISPLAY ======================== */

.display {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #24408f 0%, transparent 60%),
    linear-gradient(180deg, #14224e, #0a1330 70%);
  color: #fff;
  padding: 2vh 3vw;
  font-variant-numeric: tabular-nums;
}
.display .dhead { display:flex; align-items:center; gap:1.6vw; border-bottom: 2px solid rgba(216,31,42,.55); padding-bottom: 1vh; margin-bottom: 1.6vh; white-space:nowrap; }
.display .dhead .meet { font-size: 2.6vh; font-weight: 800; color: var(--gold); letter-spacing:.5px; }
.display .dhead .rno  { font-size: 4vh; font-weight: 900; background:var(--gold); color:#fff; border-radius:1vh; padding:.2vh 1.2vh; }
.display .dhead .rname{ font-size: 3vh; font-weight:700; opacity: .95; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.display .dhead .rname b { color:#ffe08a; }
.display .dhead .spacer { flex:1; }
.display .dhead .status { display:inline-flex; align-items:center; gap:.8vh; font-size:2.1vh; font-weight:800; letter-spacing:.5px; padding:.7vh 1.6vh .7vh 1.2vh; border-radius:999px; white-space:nowrap; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25); }
.display .dhead .status i { width:1.4vh; height:1.4vh; border-radius:50%; background:#8a8; box-shadow:0 0 0 0 rgba(0,0,0,0); }
.display .dhead .status.open i { background:#3ddc6a; animation: livedot 1.4s ease-out infinite; }
@keyframes livedot { 0% { box-shadow:0 0 0 0 rgba(61,220,106,.7); } 100% { box-shadow:0 0 0 1.2vh rgba(61,220,106,0); } }
.display .dhead .status.closed i { background:#f4b400; }
.display .dhead .status.resulted i { background:#aaa; }
.display .status.open { border-color:rgba(61,220,106,.6); color:#dfffe8; }
.display .status.closed { border-color:rgba(244,180,0,.7); color:#ffe9a8; }
.display .status.resulted { opacity:.8; }
.display .status.upcoming { opacity:.8; }

.display table.board { width:100%; border-collapse: collapse; }
.display table.board th {
  font-size: 2.0vh; text-transform: uppercase; letter-spacing:.6px; color: var(--gold);
  text-align:left; padding: .8vh 1vw; border-bottom: 2px solid rgba(255,255,255,.25);
}
.display table.board { --rf: 3vh; }
.display table.board td { font-size: var(--rf); padding: calc(var(--rf) * .15) 1vw; border-bottom: 1px solid rgba(255,255,255,.12); white-space:nowrap; }
.display table.board td.hcell { overflow:hidden; text-overflow:ellipsis; max-width:44vw; }
.display .bsilk { width: calc(var(--rf) * 1.4); height: calc(var(--rf) * 1.4); margin: calc(var(--rf) * -.15) 0; vertical-align:middle; margin-right:.8vw; filter: drop-shadow(0 .2vh .4vh rgba(0,0,0,.5)); }
.display table.board td.num { font-weight: 900; text-align:center; width: 6vh; }
.display table.board td.win { font-weight: 900; color: var(--gold); text-align:right; width: 12vw; }
.display table.board td.plc { font-weight: 800; text-align:right; width: 10vw; opacity:.92; }
.display table.board tr.scr td { opacity:.4; text-decoration: line-through; }
.display table.board td.dform { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: calc(var(--rf) * .8); font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,.82); white-space:nowrap; width: 12vw; }
.display table.board td.flucs { font-size: calc(var(--rf) * .72); letter-spacing:.3px; white-space:nowrap; }
.display .flucs .opened { color: rgba(255,255,255,.45); }
.display .flucs .mid { color: rgba(255,255,255,.6); }
.display .flucs .cur { font-weight: 800; }
.display .flucs .cur.in  { color: #59d98a; }   /* firming */
.display .flucs .cur.out { color: #ff8a80; }   /* drifting */
.display .flucs .cur.flat { color: #fff; }
.display .dhead .jump { font-size: 2.6vh; font-weight: 800; color: var(--gold); margin-right: 1.5vw; }
.display .dhead .jump #jumpclock { font-variant-numeric: tabular-nums; }
.display .dsilk { display:inline-block; width:3vh; height:3vh; border-radius:5px; border:1px solid rgba(255,255,255,.4); vertical-align:middle; margin-right:1vh; }
.display .hname { font-weight:700; }
.display .hjock { font-size: calc(var(--rf, 3vh) * .68); opacity:.7; }

.display .exotics { margin-top:1.6vh; display:flex; gap:1vw; flex-wrap:wrap; }
.display .exotics .chip { background: rgba(255,255,255,.1); border:1px solid rgba(216,31,42,.4); border-radius:10px; padding:.7vh 1.4vw; font-size:2vh; font-weight:700; }
.display .exotics .chip b { color: var(--gold); }

.display .results { margin-top:1vh; }
.display .results .podium { display:flex; gap:2vw; margin-bottom:2.5vh; }
.display .results .pod { background: rgba(255,255,255,.08); border-radius:12px; padding:1.5vh 2vw; text-align:center; flex:1; }
.display .results .pod .pos { font-size:2.2vh; color:var(--gold); font-weight:800; }
.display .results .pod .h { font-size:3.4vh; font-weight:800; margin:.4vh 0; }
.display .results .pod .n { font-size:5vh; font-weight:900; color:var(--gold); }
.display .results .divs { display:grid; grid-template-columns: repeat(auto-fit,minmax(20vw,1fr)); gap:1.5vh; }
.display .results .dv { background: rgba(0,0,0,.25); border-radius:10px; padding:1.4vh 1.6vw; }
.display .results .dv .t { font-size:2.0vh; color:var(--gold); text-transform:uppercase; letter-spacing:.5px; }
.display .results .dv .v { font-size:3.6vh; font-weight:900; }

.display .welcome { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:80vh; text-align:center; }
.display .welcome h1 { font-size: 9vh; color: var(--gold); margin:.2em 0; letter-spacing:1px; }
.display .welcome p { font-size: 3.2vh; opacity:.9; }

.display .foot { position: fixed; bottom: 1vh; right: 2vw; font-size:1.8vh; opacity:.5; }

/* View switch button on console */
.viewswitch { position: fixed; bottom: 14px; right: 14px; z-index: 5; }

/* ============================ PUNTER PHONE ============================== */
/* Phone reuses the console skin but with bigger touch targets. */
.phone { max-width: 560px; padding: 8px 10px 40px; }
.phone .topbar { border-radius: 8px; }
.phone .tabs button { flex: 1; padding: 12px 2px; font-size: 14px; min-width: 0; white-space: nowrap; }
@media (max-width: 420px) { .phone .tabs button { font-size: 12.5px; } }
.phone .selgrid button { min-width: 46px; padding: 12px 10px; font-size: 17px; }
.phone .field input, .phone .field select { padding: 10px; font-size: 16px; }
.phone table.grid td, .phone table.grid th { padding: 8px 6px; }
.phone .card { padding: 12px; }
@media (max-width: 480px) {
  .phone .selgrid button { min-width: 44px; }
}

/* ===================== PMBC crest + Brewly race sponsor ================== */
.topbar .crest { height:38px; width:auto;  }
.topbar .brand small { display:block; font-weight:500; opacity:.85; font-size:11px; }
.display .dhead .crest { height:7vh; width:auto; margin-right:.6vw; }
.display .welcome .crest { height:24vh; width:auto; margin-bottom:2vh; }
.display .sponsor {
  display:flex; align-items:center; gap:1.4vw; margin:0 0 2vh;
  background:var(--brewly-blue); border:3px solid var(--brewly-cream); border-radius:16px;
  padding:1.2vh 1.8vw; width:fit-content; box-shadow:0 4px 18px rgba(0,0,0,.28);
}
.display .sponsor .lbl { color:var(--brewly-brown); font-size:2vh; font-weight:900; text-transform:uppercase; letter-spacing:1px; }
.display .sponsor .cup { background:var(--brewly-cream); border-radius:12px; padding:.8vh 1.1vw; display:flex; }
.display .sponsor .cup img { height:6.5vh; width:auto; display:block; }

/* The Overlay (R7) — ink ground, lime accent, per their brand rules (lime only on dark) */
.display .sponsor.sp-overlay { background:#14161a; border-color:#c6f24e; }
.display .sponsor.sp-overlay .lbl { color:#c6f24e; }
.display .sponsor.sp-overlay .cup { background:transparent; padding:0; }
.display .sponsor.sp-overlay .cup img { height:7.5vh; }
.bookbody .bspon.sp-overlay, .phone .bspon.sp-overlay { background:#14161a; color:#c6f24e; }

/* Phone: account tab */
.phone .acctiles { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 10px; }
.phone .acctiles > div { background:#fff; border-radius:10px; padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); display:grid; grid-template-columns:auto 1fr; column-gap:6px; align-items:baseline; }
.phone .acctiles small { grid-column:1/-1; text-transform:uppercase; letter-spacing:.5px; font-weight:800; color:var(--muted); font-size:11px; margin-bottom:2px; }
.phone .acctiles b { font-family:ui-monospace,Consolas,monospace; font-size:16px; }
.phone .acctiles span { font-size:12px; color:var(--muted); }
.phone .pos { color:var(--ok); font-weight:800; }
.phone .arow { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:14px; padding:7px 0; border-bottom:1px solid #eee; }
.phone .arow > .mono { white-space:nowrap; text-align:right; font-family:inherit; font-size:14px; }
.phone .arow > .mono b { font-family:ui-monospace,Consolas,monospace; }
.phone details.card > summary { cursor:pointer; padding:2px 0; }

.phone .arow.tap { cursor:pointer; }
.phone .arow.tap:active { background:#f3f5fa; }
.phone .arow .chev { color:var(--muted); font-size:18px; margin-left:4px; }

/* Jockey Challenge: proper radio choices */
.phone .jpick tbody tr.jrow { cursor:pointer; }
.phone .jpick tbody tr.jrow.on { background:#eaf0ff; }
.phone .jpick tbody tr.jrow.on td { font-weight:800; }
.phone .jradio { display:inline-block; width:22px; height:22px; border-radius:50%; border:2px solid #9aa3b5; background:#fff; vertical-align:middle; position:relative; }
.phone .jrow.on .jradio { border-color:var(--green); }
.phone .jrow.on .jradio::after { content:''; position:absolute; inset:4px; border-radius:50%; background:var(--green); }

/* Races tab: tap-a-price buttons */
.phone .pbtn { min-width:58px; padding:7px 6px; border-radius:8px; border:1.5px solid var(--green); background:#fff; color:var(--green); font-family:ui-monospace,Consolas,monospace; font-weight:800; font-size:14px; cursor:pointer; }
.phone .pbtn:active { background:var(--green); color:#fff; }

/* Bet slip (bottom sheet) */
.slipbg { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; display:flex; align-items:flex-end; justify-content:center; }
.slip { background:#fff; width:100%; max-width:560px; border-radius:16px 16px 0 0; padding:12px 16px 18px; box-shadow:0 -8px 30px rgba(0,0,0,.3); animation:slipup .18s ease-out; }
@keyframes slipup { from { transform:translateY(40%); opacity:.4; } to { transform:none; opacity:1; } }
.slip .sliphead { display:flex; justify-content:space-between; align-items:center; font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:13px; color:var(--muted); }
.slip .slipx { border:0; background:none; font-size:20px; cursor:pointer; color:var(--muted); }
.slip .sliphorse { display:flex; gap:10px; align-items:center; margin:6px 0 12px; font-size:17px; }
.slip .sliptype { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.slip .sliptype button { padding:10px; border-radius:10px; border:2px solid #d5dae4; background:#fff; font-size:15px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.slip .sliptype button b { font-family:ui-monospace,Consolas,monospace; font-size:20px; }
.slip .sliptype button small { color:var(--muted); font-size:11px; }
.slip .sliptype button.on { border-color:var(--green); background:var(--green); color:#fff; }
.slip .sliptype button.on small { color:rgba(255,255,255,.8); }
.slip .slipstake { display:flex; align-items:center; border:2px solid #d5dae4; border-radius:10px; padding:0 12px; margin:4px 0 8px; }
.slip .slipstake span { font-size:22px; font-weight:800; color:var(--muted); }
.slip .slipstake input { border:0; outline:0; font-size:24px; font-weight:800; padding:10px 6px; width:100%; font-family:ui-monospace,Consolas,monospace; background:transparent; }
.slip .slipquick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px; }
.slip .slipquick button { padding:9px 0; border-radius:8px; border:1.5px solid #d5dae4; background:#f6f7fb; font-weight:800; cursor:pointer; }
.slip .slipquick button.on { border-color:var(--green); background:#eaf0ff; }
.slip .slipret { display:flex; justify-content:space-between; align-items:baseline; background:#f3f5fa; border-radius:10px; padding:12px; font-size:15px; }
.slip .slipret b { font-size:22px; font-family:ui-monospace,Consolas,monospace; color:var(--ok); }
.slip .slipgo { width:100%; padding:14px; font-size:17px; }

/* Phone: collapsible ownership section */
.phone details.ownsec > summary { list-style:none; cursor:pointer; position:relative; padding-right:26px; }
.phone details.ownsec > summary::-webkit-details-marker { display:none; }
.phone details.ownsec > summary::after { content:'▾'; position:absolute; right:2px; top:4px; font-size:18px; color:var(--muted); transition:transform .15s; }
.phone details.ownsec[open] > summary::after { transform:rotate(180deg); }
.phone details.ownsec .ost { font-size:17px; font-weight:800; }
.phone details.ownsec .osub { font-size:13px; color:var(--muted); margin-top:2px; }
.phone details.ownsec .osub b { color:var(--ink); }
.phone details.ownsec .osub b.oyou { color:var(--ok); }
.phone details.ownsec[open] > summary { margin-bottom:6px; padding-bottom:8px; border-bottom:1px solid #eee; }
.phone .opay { margin-top:12px; }
.phone .opay h4 { margin:0 0 4px; font-size:14px; }
.phone .opay tr.me td { background:#eaf7ef; font-weight:800; }

/* Horse popup: ownership box */
.hownbox { background:#f6f8fc; border-radius:10px; padding:8px 12px; margin-top:10px; }
.hownbox h3 { margin:4px 0; }
.hownbox .tpos { background:var(--gold); color:#fff; font-weight:800; font-size:12px; padding:2px 7px; border-radius:6px; }

/* Book leaderboards */
.lb tr.me td { background:#eaf7ef; font-weight:800; }

/* In-app sheets (buy, name your horse, warnings) */
.slip .shbody { margin-bottom:8px; }
.slip .shmsg { font-size:15px; line-height:1.4; margin:6px 0 10px; }
.slip .shbig { font-size:28px; }
.slip .shprizes { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.slip .shprizes span { background:#eaf0ff; border-radius:999px; padding:4px 10px; font-size:13px; }
.slip .shbtns { display:flex; gap:8px; margin-top:6px; }
.slip .shbtns .btn { flex:1; padding:13px; font-size:16px; }
.slip .shbtns .slipgo { flex:2; width:auto; }

/* Exotics: Box / By place */
.phone .pmode { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:10px 0 4px; }
.phone .pmode button { padding:9px 6px; border-radius:10px; border:2px solid #d5dae4; background:#fff; font-weight:800; font-size:15px; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.phone .pmode button small { font-weight:500; font-size:11px; color:var(--muted); }
.phone .pmode button.on { border-color:var(--green); background:var(--green); color:#fff; }
.phone .pmode button.on small { color:rgba(255,255,255,.8); }
.phone .posrow { display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-top:1px solid #eee; }
.phone .posrow .poslbl { min-width:38px; font-weight:900; color:var(--green); padding-top:10px; }
.phone .posrow .selgrid { margin:0; flex:1; }

/* Phone: syndicate card */
.phone details.synd { border:2px solid var(--green); }
.phone details.synd .ost { color:var(--green); }

/* Sort bar + jockey/trainer links */
.sorth { cursor:pointer; user-select:none; white-space:nowrap; text-decoration:underline dotted; text-underline-offset:3px; }
.sorth.on { color:var(--gold) !important; text-decoration:none; }
.bookbody .bhead { display:flex; align-items:center; gap:10px; padding:6px 4px; border-bottom:2px solid var(--line); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.bookbody .bhead .bh-num { width:28px; }
.bookbody .bhead .bh-horse { flex:1; padding-left:40px; }
.bookbody .bhead .bh-odds { min-width:44px; text-align:right; }
.plink { color:var(--green); font-weight:700; border-bottom:1px dotted currentColor; cursor:pointer; }
.pjt { font-size:12px; color:var(--muted); margin-top:2px; }

/* slip pieces reused outside the slip (syndicate card, jockey popup) */
.phone .synd .slipret, .tticket .slipret { display:flex; justify-content:space-between; align-items:baseline; gap:10px; background:#f3f5fa; border-radius:10px; padding:10px 12px; font-size:14px; }
.tticket .slipret b { font-family:ui-monospace,Consolas,monospace; font-size:18px; color:var(--green); }
.phone .synd .slipquick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.phone .synd .slipquick button { padding:10px 0; border-radius:8px; border:2px solid var(--green); background:#fff; color:var(--green); font-weight:800; font-size:15px; cursor:pointer; }
.phone .synd .slipquick button:active { background:var(--green); color:#fff; }

/* odds beside a horse in the buy-a-horse list */
.oodds { font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:800; color:var(--green); background:#eef1f8; border-radius:6px; padding:1px 6px; margin-left:4px; white-space:nowrap; }

/* Exotic pick buttons: number + win odds as a guide */
.phone .exb .selgrid button { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.05; min-width:52px; padding:6px 4px; }
.phone .exb .selgrid button small { font-size:10.5px; font-weight:700; opacity:.7; font-family:ui-monospace,Consolas,monospace; margin-top:2px; }
.phone .exb .selgrid button.pick small { opacity:.9; }
/* Brewly app icon is a square tile */
img[src="brewly-icon.png"] { border-radius:6px; }

/* phone: premiership tables one above the other (jockeys have an Odds column) */
.phone .bookbody .premgrid { display:block; }
.phone .premgrid > div { margin-bottom:12px; }
.phone table.prem td.lsub, .phone table.prem th { white-space:nowrap; }

/* MATT MANIA — big screen takeover */
.display .mania { min-height:92vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2.4vh; border-radius:24px;
  background:radial-gradient(circle at 50% 40%, #ff3b3b 0%, #b0101a 45%, #3a0610 100%); color:#fff; animation:mmpulse 1.2s ease-in-out infinite alternate; }
@keyframes mmpulse { from { box-shadow:0 0 40px rgba(255,200,0,.25) inset; } to { box-shadow:0 0 140px rgba(255,200,0,.6) inset; } }
.display .mania .mmtitle { font-size:13vh; font-weight:900; letter-spacing:.6vw; line-height:1; text-shadow:0 .6vh 0 #000, 0 0 4vh #ffd400; animation:mmshake .25s linear infinite; }
@keyframes mmshake { 0% { transform:rotate(-1.2deg) scale(1); } 50% { transform:rotate(1.2deg) scale(1.03); } 100% { transform:rotate(-1.2deg) scale(1); } }
.display .mania .mmsub { font-size:3.2vh; font-weight:700; opacity:.95; }
.display .mania .mmbig { font-size:24vh; font-weight:900; font-variant-numeric:tabular-nums; color:#ffd400; text-shadow:0 1vh 0 #000; line-height:1; }
.display .mania .mmhorse { display:flex; align-items:center; gap:2vw; background:rgba(0,0,0,.35); padding:2vh 3vw; border-radius:18px; }
.display .mania .mmsilk { height:12vh; width:auto; }
.display .mania .mmname { font-size:6.5vh; font-weight:900; text-align:left; }
.display .mania .mmrace { font-size:3vh; opacity:.85; text-align:left; }
.display .mania .mmprice { display:flex; align-items:center; gap:3vw; }
.display .mania .mmprice s { font-size:7vh; opacity:.6; font-weight:800; }
.display .mania .mmprice b { font-size:20vh; color:#ffd400; text-shadow:0 1vh 0 #000; line-height:1; font-variant-numeric:tabular-nums; }
.display .mania .mmends { font-size:4.5vh; font-weight:900; background:#000; padding:1vh 2.5vw; border-radius:999px; }
/* MATT MANIA — phone banner */
.phone .mmbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; padding:10px 12px; border-radius:12px; color:#fff; font-size:14px;
  background:linear-gradient(90deg, #d81f2a, #ff5a1f); box-shadow:0 4px 16px rgba(216,31,42,.4); animation:mmpulse2 1s ease-in-out infinite alternate; }
@keyframes mmpulse2 { from { transform:scale(1); } to { transform:scale(1.015); } }
.phone .mmbar s { opacity:.7; }
.phone .mmbar .mmp { font-size:20px; color:#ffe14d; font-family:ui-monospace,Consolas,monospace; }
.phone .mmbar .mmsmall { font-size:12px; opacity:.9; margin-top:2px; }
.phone .mmbar .mmgo { background:#ffe14d; color:#3a0610; border:0; border-radius:10px; padding:10px 14px; font-weight:900; font-size:15px; cursor:pointer; white-space:nowrap; }
.phone .mmbar .mmdone { font-weight:900; white-space:nowrap; }
.mmcard { border:2px solid #d81f2a; }
.mmcard .mmgobtn { font-size:22px; padding:14px 28px; background:#d81f2a; border-color:#d81f2a; animation:mmpulse2 .8s ease-in-out infinite alternate; }

/* Ticket modal */
.tticket { background:#fff; border-radius:14px; width:100%; max-width:420px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.35); }
.tticket .tthead { display:flex; justify-content:space-between; align-items:center; background:var(--green); color:#fff; padding:14px 16px; border-bottom:3px dashed rgba(255,255,255,.5); }
.tticket .tthead small { display:block; font-size:11px; letter-spacing:1px; text-transform:uppercase; opacity:.8; }
.tticket .tthead b { font-size:20px; }
.tticket .tstat { font-weight:900; font-size:13px; text-transform:uppercase; letter-spacing:.5px; padding:5px 10px; border-radius:999px; background:#fff; color:var(--green); }
.tticket .tstat.won { background:#2e9d5b; color:#fff; }
.tticket .tstat.lost { background:#ccd; color:#444; }
.tticket .tstat.refund { background:#f2c94c; color:#333; }
.tticket .ttbody { padding:14px 16px 6px; }
.tticket .ttwhat { font-size:18px; font-weight:800; }
.tticket .tttype { color:var(--muted); font-size:13px; margin-bottom:8px; }
.tticket ul { list-style:none; margin:6px 0 10px; padding:0; }
.tticket li { padding:5px 0; border-bottom:1px solid #eee; font-size:15px; }
.tticket .tpos { background:var(--gold); color:#fff; font-weight:800; font-size:11px; padding:2px 6px; border-radius:6px; margin-left:4px; }
.tticket .tleg { margin-top:6px; }
.tticket .tlegh { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.tticket .ttnums { width:100%; border-collapse:collapse; margin-top:6px; font-size:15px; }
.tticket .ttnums td { padding:6px 0; border-bottom:1px solid #eee; }
.tticket .ttnums td:last-child { text-align:right; font-family:ui-monospace,Consolas,monospace; font-weight:700; }
.tticket .ttnums tr.tot td { font-size:18px; font-weight:900; border-bottom:0; padding-top:10px; }
.tticket .ttfoot { color:var(--muted); font-size:12px; margin:10px 0 6px; text-align:center; }

/* Phone: owners naming their horse */
.phone .pname { margin-top:10px; padding-top:8px; border-top:1px dashed #ccd; }
.phone .pname h3 { margin:0 0 6px; font-size:15px; }
.phone .pname .prow { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #eee; }

/* Sponsor mini badge: Brewly look by default, The Overlay in ink */
.smini { display:inline-flex; align-items:center; background:var(--brewly-cream); border-radius:8px; padding:.4vh .6vw; vertical-align:middle; }
.smini img { height:3.2vh; width:auto; display:block; }
.smini.sp-overlay { background:#14161a; border:2px solid #c6f24e; }
.display .upnext .upspon { align-self:center; }
.display .upnext .upspon .smini img { height:4.2vh; }
.display .rchip .smini { margin-top:.8vh; }
.display .rchip .smini img { height:2.6vh; }

/* Book-total row under the odds columns */
table.grid tfoot td { border-top:2px solid var(--ink); border-bottom:0; padding-top:9px; background:#fafbf9; }

/* Bigger jump countdown on the board */
.display .dhead .jump { display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1; white-space:nowrap; color:#fff; }
.display .dhead .jump small { font-size:1.8vh; font-weight:700; letter-spacing:1px; text-transform:uppercase; opacity:.7; margin-bottom:.4vh; }
.display .dhead .jump #jumpclock { font-size:4.2vh; font-weight:900; color:#ffe08a; letter-spacing:1px; }

/* Ownership on the big-screen board */
.display .ownbar { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:.8vh 1.8vw; margin-bottom:1.2vh; font-size:2.4vh; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display .ownbar b { color:var(--gold); }
.display .howner { font-size: calc(var(--rf, 3vh) * .72); color:#ffe08a; opacity:.95; font-weight:700; margin-left:.6vw; }
.display .howner::before { content:'🎟️ '; }

/* Home-screen ownership guide */
.display .welcome h1 { font-size:7vh; margin:.3vh 0; }
.display .welcome .sub { font-size:2.8vh; font-weight:700; margin:.4vh 0 1vh; }
.display .welcome .prizes { font-size:2.8vh; margin-top:1.6vh; }
.display .welcome .ownguide { margin:1.5vh auto 0; border-collapse:collapse; font-size:2.2vh; max-width:94vw; }
.display .welcome .ownguide th { color:var(--gold); text-transform:uppercase; font-size:1.6vh; letter-spacing:.5px; padding:.5vh 1.2vw; text-align:left; border-bottom:2px solid rgba(255,255,255,.28); }
.display .welcome .ownguide td { padding:.7vh 1.2vw; border-bottom:1px solid rgba(255,255,255,.12); text-align:left; }
.display .welcome .ownguide .rn { font-weight:900; color:var(--gold); }
.display .welcome .ownguide .rn2 { font-weight:700; white-space:nowrap; }
.display .welcome .ownguide .jt { color:rgba(255,255,255,.55); font-weight:500; margin-left:.4vw; font-size:1.8vh; }
.display .welcome .ownguide .how { opacity:.92; }
.display .welcome .ownguide .sp { color:#ffe08a; font-weight:700; white-space:nowrap; }

.display .welcome .ownguide .jt2 { color:#ffe08a; font-weight:800; white-space:nowrap; }
.display .welcome .legend { font-size:1.9vh; opacity:.75; max-width:88vw; margin:1.4vh auto 0; }

/* Big-bets ticker + leaderboards (big screen) */
.display .ticker { margin-top:3vh; background:rgba(0,0,0,.5); border-top:2px solid var(--gold); border-bottom:2px solid var(--gold); overflow:hidden; white-space:nowrap; height:5.6vh; display:flex; align-items:center; }
.display .ticker-track { display:inline-block; white-space:nowrap; padding-left:100%; animation:tk 45s linear infinite; font-size:2.6vh; font-weight:700; }
.display .ticker .tk-item { margin:0 1vw; }
.display .ticker .tk-item b { color:var(--gold); }
.display .ticker .tk-r { color:rgba(255,255,255,.6); font-weight:500; }
.display .ticker .tk-who { color:#ffe08a; }
.display .ticker .tk-sep { opacity:.4; margin:0 .5vw; }
@keyframes tk { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.display .upnext { background: linear-gradient(90deg, rgba(216,31,42,.28), rgba(255,255,255,.06)); border:1px solid rgba(216,31,42,.5); border-radius:16px; padding:1.8vh 2.2vw; margin:1vh 0 1vh; }
.display .upnext .uptop { display:flex; align-items:baseline; gap:1.4vw; }
.display .upnext .uplabel { font-size:2.2vh; font-weight:900; letter-spacing:2px; color:var(--gold); }
.display .upnext .uprno { font-size:3.6vh; font-weight:900; }
.display .upnext .upname { font-size:3vh; font-weight:700; }
.display .upnext .spacer { flex:1; }
.display .upnext .upjumps { font-size:2.4vh; font-weight:800; opacity:.85; margin-right:1vw; }
.display .upnext .upclk { font-size:3.6vh; font-weight:900; color:var(--gold); font-variant-numeric:tabular-nums; }
.display .upnext .upmeta { display:flex; align-items:center; gap:2vw; margin-top:1.2vh; flex-wrap:wrap; }
.display .upnext .upown { font-size:2.4vh; font-weight:700; }
.display .upnext .upmkt { display:flex; gap:1.6vw; flex-wrap:wrap; }
.display .upnext .upr { font-size:2.4vh; }
.display .upnext .upr .uprn { font-weight:900; color:var(--gold); }
.display .upnext .upr b { color:var(--gold); margin-left:.4vw; }
.display .leaders { display:flex; gap:3vw; justify-content:center; margin-top:3vh; flex-wrap:wrap; }
.display .lboard { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); border-radius:16px; padding:2vh 2.5vw; min-width:34vw; }
.display .lboard h2 { color:var(--gold); font-size:4vh; margin:0 0 1.5vh; }
.display .lboard table { width:100%; border-collapse:collapse; font-size:3.4vh; }
.display .lboard td { padding:1vh .8vw; border-bottom:1px solid rgba(255,255,255,.12); }
.display .lboard .lrank { color:var(--gold); font-weight:900; width:3vw; }
.display .lboard .lname { font-weight:700; }
.display .lboard .lval { text-align:right; font-weight:900; color:#59d98a; }
.display .lboard .lempty { text-align:center; opacity:.6; }

/* ============================ ONLINE RACE BOOK =========================== */
.book { max-width: 640px; }
.book .bhead { display:flex; align-items:center; gap:12px; background:var(--green); color:#fff; border-radius:10px; padding:12px 14px; margin-bottom:6px; }
.book .bhead .crest { height:44px; width:auto;  }
.book .bhead h1 { font-size:20px; margin:0; line-height:1.1; }
.book .bhead .sub { font-size:12px; opacity:.85; }
.book .bhead .next { margin-left:auto; text-align:right; font-size:11px; opacity:.95; }
.book .bhead .next b { display:block; font-size:18px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.bnav { position:sticky; top:0; z-index:5; background:var(--paper); padding:8px 0; display:flex; gap:6px; overflow-x:auto; border-bottom:1px solid var(--line); margin-bottom:10px; -webkit-overflow-scrolling:touch; }
.bnav button { flex:0 0 auto; padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:700; font-size:13px; }
.bnav button.resulted { opacity:.55; }
.bnav button.open { border-color:var(--ok); color:var(--ok); }
.bnav button.active { background:var(--green); color:#fff; border-color:var(--green); }
.bookbody .rstrip { display:flex; gap:6px; overflow-x:auto; padding:2px 0 8px; -webkit-overflow-scrolling:touch; }
.bookbody .rstrip button { flex:0 0 auto; min-width:52px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; font-weight:800; font-size:14px; line-height:1.1; }
.bookbody .rstrip button small { display:block; font-weight:600; font-size:10px; color:var(--muted); }
.bookbody .rstrip button.resulted { opacity:.55; }
.bookbody .rstrip button.next { border-color:var(--gold); color:var(--gold); }
.bookbody .rstrip button.active { background:var(--green); color:#fff; border-color:var(--green); }
.bookbody .rstrip button.active small { color:rgba(255,255,255,.8); }
.bookbody .rpager { display:flex; justify-content:space-between; gap:8px; margin:4px 0 8px; }
.bookbody .srow { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); cursor:pointer; }
.bookbody .srow:last-child { border-bottom:0; }
.bookbody .srow.next { background:#fff4f4; margin:0 -6px; padding:10px; border-radius:8px; }
.bookbody .srow.resulted { opacity:.6; }
.bookbody .sno { flex:0 0 auto; width:48px; text-align:center; font-weight:900; font-size:16px; color:var(--gold); line-height:1.05; }
.bookbody .sno small { display:block; font-size:10px; font-weight:600; color:var(--muted); }
.bookbody .smain { flex:1; min-width:0; }
.bookbody .smain b { font-size:15px; }
.bookbody .slogo { height:16px; width:auto; vertical-align:middle; margin-left:4px; }
.bookbody .sst { flex:0 0 auto; display:flex; align-items:center; gap:6px; }
.bookbody .chev { font-size:22px; color:var(--muted); }
.bookbody .step { display:flex; gap:10px; margin:8px 0; }
.bookbody .step .stp { flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--gold); color:#fff; font-weight:900; display:grid; place-items:center; font-size:14px; }
.bookbody .step b { font-size:14px; }
.bookbody .step p { margin:2px 0 0; font-size:13px; line-height:1.45; }
.bookbody details.bet { border:1px solid var(--line); border-radius:8px; padding:0 10px; margin:6px 0; background:#fff; }
.bookbody details.bet summary { cursor:pointer; padding:9px 0; list-style:none; display:flex; flex-direction:column; gap:1px; position:relative; padding-right:22px; }
.bookbody details.bet summary::-webkit-details-marker { display:none; }
.bookbody details.bet summary::after { content:"+"; position:absolute; right:2px; top:6px; font-size:20px; font-weight:800; color:var(--muted); }
.bookbody details.bet[open] summary::after { content:"–"; }
.bookbody details.bet summary b { font-size:15px; }
.bookbody details.bet summary span { font-size:12.5px; color:var(--muted); }
.bookbody details.bet p { font-size:13px; line-height:1.45; margin:0 0 8px; }
.bookbody details.bet p.ex { background:#eef1f8; border-left:3px solid var(--green); padding:6px 8px; border-radius:4px; }
.bookbody .rcard .rhead { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.bookbody .rcard .rhead h2 { margin:0; font-size:17px; }
.bookbody .rno { background:var(--gold); color:#fff; border-radius:6px; padding:2px 8px; font-weight:800; }
.bookbody .own { background:#eef1f8; border-left:4px solid var(--green); padding:8px 10px; border-radius:6px; font-size:13px; margin:8px 0 4px; }
.bookbody .own .hint { margin-top:3px; }
.bookbody .bspon, .phone .bspon { display:flex; align-items:center; gap:10px; background:var(--brewly-cream); border-radius:6px; padding:6px 10px; margin-top:8px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--brewly-brown); }
.bookbody .bspon img, .phone .bspon img { height:36px !important; }
.phone .bspon img { height:28px; width:auto; }
.bookbody .brow { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line); cursor:pointer; }
.bookbody .brow:last-child { border-bottom:0; }
.bookbody .brow.scr { opacity:.45; }
.bookbody .brow.scr .bname { text-decoration:line-through; }
.bookbody .bnum { width:24px; text-align:center; font-weight:800; font-size:16px; flex:0 0 auto; }
.bookbody .brow .silkimg { width:34px; height:34px; flex:0 0 auto; }
.bookbody .bmain { flex:1; min-width:0; }
.bookbody .bname { font-weight:700; font-size:15px; }
.bookbody .bown { display:inline-block; font-weight:600; font-size:12px; color:var(--gold); margin-left:6px; }
.bookbody .bmeta { font-size:12px; color:var(--muted); margin-top:2px; }
.bookbody .bodds { text-align:right; min-width:54px; flex:0 0 auto; }
.bookbody .bodds b { font-size:17px; font-family: ui-monospace, Menlo, Consolas, monospace; }
.bookbody .bodds small { display:block; font-size:11px; color:var(--muted); }
.bookbody .bpos { background:var(--ok); color:#fff; font-size:11px; padding:1px 6px; border-radius:4px; margin-left:6px; vertical-align:middle; }
.bookbody table.sched td, .bookbody table.sched th { padding:5px 6px; font-size:12px; }
.bookbody #bk-how p { font-size:13px; line-height:1.45; margin:4px 0 8px; }

/* premiership tables (book + big screen) */
.bookbody .premgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:480px) { .bookbody .premgrid { grid-template-columns:1fr; } }
.bookbody table.prem td, .bookbody table.prem th { padding:4px 6px; font-size:12px; }
.bookbody table.prem .lrank { font-weight:800; width:22px; }
.bookbody table.prem .lval { font-weight:800; text-align:right; }
.bookbody table.prem .lsub { color:var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.display .lboard table.prem th { font-size:1.4vh; text-transform:uppercase; opacity:.6; text-align:left; padding:0 .6vw; }
.display .lboard table.prem .lsub { opacity:.6; font-size:2vh; font-family: ui-monospace, Menlo, Consolas, monospace; padding-left:1vw; }

/* four leaderboards on one screen */
.display .leaders.four { gap:2vh 2vw; margin-top:2vh; }
.display .leaders.four .lboard { min-width:40vw; padding:1.4vh 2vw; }
.display .leaders.four .lboard h2 { font-size:3.2vh; margin-bottom:.8vh; }
.display .leaders.four .lboard table { font-size:2.7vh; }
.display .leaders.four .lboard td { padding:.6vh .8vw; }
.display .lboard .lval.neg { color:#ff7b7b; }

/* phone: balance chip in the topbar */
.phone .topbar .pbal { background:var(--gold); color:#fff; border-radius:10px; padding:4px 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-weight:800; font-size:18px; text-align:right; cursor:pointer; }
.phone .topbar .pbal small { display:block; font-family: inherit; font-weight:500; font-size:10px; opacity:.85; letter-spacing:1px; text-transform:uppercase; }


/* ===================== Big-screen welcome (fun version) ================== */
.display .welcome.fun { position:relative; min-height:auto; justify-content:flex-start; gap:1.6vh; padding-bottom:1vh; overflow:hidden; }
.display .welcome.fun::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background: repeating-linear-gradient(-30deg, #fff 0 2vh, transparent 2vh 9vh);
  background-size: 200% 200%; animation: drift 40s linear infinite;
}
@keyframes drift { from { background-position: 0 0; } to { background-position: 60vw 0; } }
.display .welcome.fun > * { position:relative; z-index:1; }
.display .welcome.fun .wtitle { display:flex; align-items:center; gap:2vw; text-align:left; }
.display .welcome.fun .crest { height:15vh; margin:0; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-1.2vh) rotate(2deg); } }
.display .welcome.fun h1 {
  font-size:9vh; margin:0; line-height:1; letter-spacing:2px; text-transform:uppercase; font-weight:900;
  background: linear-gradient(90deg, #ff5a63, #fff 35%, #ff5a63 50%, #fff 65%, #ff5a63);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shine 6s linear infinite;
}
@keyframes shine { from { background-position: 0% 0; } to { background-position: -300% 0; } }
.display .welcome.fun .sub { font-size:2.8vh; margin:.6vh 0 0; opacity:.9; font-weight:700; letter-spacing:.5px; }
.display .welcome.fun .hype { position:relative; height:5.2vh; width:100%; }
.display .welcome.fun .hl {
  position:absolute; left:0; right:0; top:0; font-size:3.8vh; font-weight:900; font-style:italic; color:#ffe08a;
  opacity:0; animation: hype 30s linear infinite;
}
@keyframes hype {
  0% { opacity:0; transform: translateY(1.5vh); } 2% { opacity:1; transform:none; }
  14.5% { opacity:1; } 16.67% { opacity:0; transform: translateY(-1.5vh); } 100% { opacity:0; }
}
.display .welcome.fun .tiles { display:grid; grid-template-columns: 1.1fr 1.3fr .9fr; gap:1.6vw; width:94vw; }
.display .welcome.fun .tile {
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.18); border-radius:2vh; padding:2.4vh 1.6vw; text-align:left;
  display:flex; flex-direction:column; justify-content:center; gap:.8vh;
}
.display .welcome.fun .tile.clock { border-color: rgba(216,31,42,.75); background: linear-gradient(160deg, rgba(216,31,42,.35), rgba(216,31,42,.08)); align-items:center; text-align:center; }
.display .welcome.fun .tl { font-size:2.2vh; text-transform:uppercase; letter-spacing:1.5px; color:#ffe08a; font-weight:800; }
.display .welcome.fun .big { font-size:13vh; font-weight:900; line-height:1; color:#fff; letter-spacing:1px; text-shadow:0 .6vh 2vh rgba(0,0,0,.5); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.display .welcome.fun .tsub { font-size:2.8vh; font-weight:700; }
.display .welcome.fun .tsub b { color:#ffe08a; }
.display .welcome.fun .tfoot { font-size:1.9vh; opacity:.7; }
.display .welcome.fun .geton ol { list-style:none; margin:0; padding:0; font-size:3.2vh; font-weight:600; display:flex; flex-direction:column; gap:1vh; }
.display .welcome.fun .geton .stp { display:inline-grid; place-items:center; width:4vh; height:4vh; border-radius:50%; background:var(--gold); color:#fff; font-weight:900; font-size:2.4vh; margin-right:.6vw; }
.display .welcome.fun .geton .url { color:#7fd1ff; font-family: ui-monospace, Menlo, monospace; font-size:2.8vh; word-break:break-all; }
.display .welcome.fun .prizes .pz { font-size:3.3vh; }
.display .welcome.fun .prizes .pz b { color:#fff; }
.display .welcome.fun .rchips { display:grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap:.8vw; width:94vw; }
.display .welcome.fun .rchip { background:rgba(0,0,0,.28); border:2px solid rgba(255,255,255,.14); border-radius:1.4vh; padding:1.2vh .8vw; text-align:left; min-height:13vh; min-width:0; overflow:hidden; }
.display .welcome.fun .rchip.next { border-color:var(--gold); background:rgba(216,31,42,.22); animation: glow 1.6s ease-in-out infinite; }
@keyframes glow { 0%,100% { box-shadow:0 0 0 0 rgba(216,31,42,.0); } 50% { box-shadow:0 0 2.5vh .3vh rgba(216,31,42,.6); } }
.display .welcome.fun .rchip.done { opacity:.45; }
.display .welcome.fun .rc-top { display:flex; justify-content:space-between; align-items:baseline; }
.display .welcome.fun .rc-n { font-size:2.8vh; font-weight:900; color:#ffe08a; }
.display .welcome.fun .rc-t { font-size:1.9vh; font-weight:700; opacity:.85; }
.display .welcome.fun .rc-name { font-size:2.1vh; font-weight:800; line-height:1.15; margin:.4vh 0; }
.display .welcome.fun .rc-how { font-size:1.8vh; opacity:.75; }
.display .welcome.fun .parade { width:100vw; margin-left:-3vw; overflow:hidden; background:rgba(0,0,0,.25); border-top:2px solid rgba(255,255,255,.12); border-bottom:2px solid rgba(255,255,255,.12); padding:.8vh 0; }
.display .welcome.fun .parade-track { display:inline-flex; white-space:nowrap; animation: tk 160s linear infinite; }
.display .welcome.fun .pr { display:inline-flex; flex-direction:column; align-items:center; gap:.2vh; margin:0 1.1vw; animation: trot .55s ease-in-out infinite alternate; }
@keyframes trot { from { transform: translateY(0); } to { transform: translateY(-.7vh); } }
.display .welcome.fun .psilk { width:8.5vh; height:8.5vh; filter: drop-shadow(0 .4vh .6vh rgba(0,0,0,.5)); }
.display .welcome.fun .pn { font-size:1.8vh; font-weight:700; opacity:.85; max-width:9vw; overflow:hidden; text-overflow:ellipsis; }
.display .welcome.fun + .ticker { margin-top:1vh; }

/* sweep ticket chips on the operator Ownership card */
.tchips { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 6px; }
.tchip { background:#eef1f8; border:1px solid var(--line); border-radius:999px; padding:2px 8px; font-size:12px; }
.tchip.ph { background:#e6f4ea; border-color:#bfe3c8; }
.tchip a { cursor:pointer; color:var(--red); margin-left:4px; font-weight:800; }
.phone .ownc table.grid td { padding:6px 4px; }

/* ===================== Phone sign-in landing ============================ */
.pgate {
  position:fixed; inset:0; overflow:auto; z-index:20; color:#fff; padding:24px 18px 30px; text-align:center;
  background:
    radial-gradient(900px 500px at 50% -10%, #24408f 0%, transparent 60%),
    linear-gradient(180deg, #14224e, #0a1330 70%);
  -webkit-overflow-scrolling:touch;
}
.pgate::before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.03;
  background: repeating-linear-gradient(-30deg, #fff 0 14px, transparent 14px 60px);
  background-size:200% 200%; animation: drift 40s linear infinite;
}
.pgate > * { position:relative; }
.pgate .ghead { margin-top:6px; }
.pgate .crest { height:96px; width:auto; animation: bob 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.pgate h1 {
  font-size:46px; line-height:.95; margin:10px 0 6px; letter-spacing:1px; text-transform:uppercase; font-weight:900;
  background: linear-gradient(90deg, #ff5a63, #fff 35%, #ff5a63 50%, #fff 65%, #ff5a63);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shine 6s linear infinite;
}
.pgate .gsub { font-size:15px; font-weight:700; opacity:.9; letter-spacing:.5px; }
.pgate .gstrip { display:flex; justify-content:center; gap:6px; margin:16px -18px 12px; overflow:hidden; }
.pgate .gs { display:inline-block; animation: trot .55s ease-in-out infinite alternate; }
.pgate .gsilk { width:36px; height:36px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.pgate .gclock { background:rgba(216,31,42,.25); border:2px solid rgba(216,31,42,.7); border-radius:14px; padding:8px 12px; margin:0 auto 14px; max-width:360px; }
.pgate .gclock .gl { display:block; font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:#ffe08a; font-weight:800; }
.pgate .gclock b { display:block; font-size:38px; font-weight:900; line-height:1.05; font-variant-numeric: tabular-nums; }
.pgate .gcard { background:#fff; color:var(--ink, #1b1f2a); border-radius:18px; padding:18px 16px 14px; max-width:420px; margin:0 auto; text-align:left; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.pgate .gtitle { font-size:22px; font-weight:900; color:var(--green); margin-bottom:4px; }
.pgate .ghint { font-size:13px; color:var(--muted); line-height:1.4; margin-bottom:10px; }
.pgate .field { margin-top:10px; }
.pgate .field input { width:100%; padding:13px 12px; font-size:18px; border:2px solid var(--line); border-radius:10px; box-sizing:border-box; }
.pgate .field input:focus { border-color:var(--green); outline:none; }
.pgate .gbtn { width:100%; margin-top:14px; padding:15px; font-size:18px; font-weight:900; color:#fff; background:var(--gold); border:0; border-radius:12px; letter-spacing:.5px; box-shadow:0 6px 0 var(--gold-d); }
.pgate .gbtn:active { transform:translateY(3px); box-shadow:0 3px 0 var(--gold-d); }
.pgate .gbtn:disabled { opacity:.6; box-shadow:none; }
.pgate .gperk { margin-top:12px; background:#eef1f8; border-left:4px solid var(--green); border-radius:8px; padding:8px 10px; font-size:14px; }
.pgate .gfoot { margin-top:18px; font-size:13px; opacity:.7; font-weight:700; }
.pgate .warnbox { margin:8px 0; }

/* prizes + multi tags on the big screen */
.display .upnext .upown b { color:#ffe08a; }
.display .upnext .upmulti { display:flex; flex-wrap:wrap; gap:.6vw; margin:.6vh 0; }
.display .mtag { display:inline-block; background:rgba(0,0,0,.3); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:.3vh 1vw; font-size:2.2vh; font-weight:700; }
.display .mtag.first { border-color:#ffe08a; background:rgba(255,224,138,.16); }
.display .mtag b { color:#ffe08a; }
.display .multibar { display:flex; flex-wrap:wrap; gap:.6vw; margin:-1vh 0 1.6vh; }
.display .multibar { margin:-.4vh 0 1.2vh; }
.display .usilk { width:4vh; height:4vh; flex:0 0 auto; vertical-align:middle; margin-right:.4vw; }
.display .dhead .meet { display:none; }
.display .leaders-head .meet, .display .dhead.lh .meet { display:inline; }

/* every-ride list in the book's Premiership view */
.bookbody .rideh { margin:14px 0 4px; font-size:14px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.bookbody details.rides { border:1px solid var(--line); border-radius:8px; padding:0 10px; margin:5px 0; background:#fff; }
.bookbody details.rides summary { list-style:none; cursor:pointer; padding:8px 0; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.bookbody details.rides summary::-webkit-details-marker { display:none; }
.bookbody details.rides .rname { font-weight:800; font-size:15px; }
.bookbody details.rides .rmeta { font-size:12px; color:var(--muted); white-space:nowrap; }
.bookbody details.rides .rmeta b { color:var(--green); }
.bookbody .ridelist { display:flex; flex-wrap:wrap; gap:6px; padding:0 0 10px; }
.bookbody .ride { background:#eef1f8; border-radius:999px; padding:4px 10px; font-size:12.5px; cursor:pointer; }
.bookbody .ride .rr { font-weight:800; color:var(--gold); margin-right:2px; }
.bookbody .ride .mono { font-weight:700; }
.bookbody .ride.scr { opacity:.5; text-decoration:line-through; }
.bookbody .ride .rpos { color:var(--ok); margin-left:4px; }

/* simple how-it-works steps */
.bookbody .hstep { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.bookbody .hstep:last-of-type { border-bottom:0; }
.bookbody .hico { font-size:30px; line-height:1; width:40px; text-align:center; flex:0 0 auto; }
.bookbody .hh { font-size:17px; font-weight:900; color:var(--green); display:flex; align-items:center; gap:8px; }
.bookbody .hn { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--gold); color:#fff; font-size:12px; font-weight:900; }
.bookbody .hp { font-size:14px; line-height:1.45; margin-top:2px; }
.phone .intro { background:#fff8e6; border-color:#f1d48a; }
.phone .intro ol { margin:8px 0 6px; padding-left:22px; font-size:14.5px; line-height:1.5; }
.phone .intro li { margin:4px 0; }
.pgate .ghint a { color:var(--green); font-weight:700; }
.pgate code { background:#eef1f8; padding:1px 5px; border-radius:4px; }

/* Home screen fills the whole big screen now the silks parade is gone */
.display .welcome.fun { min-height:calc(100vh - 4vh); }
.display .welcome.fun .tiles { flex:1 1 auto; align-items:stretch; }
.display .welcome.fun .tile { justify-content:center; }
.display .welcome.fun .big { font-size:17vh; }
.display .welcome.fun .tl { font-size:2.6vh; }
.display .welcome.fun .tsub { font-size:3.4vh; }
.display .welcome.fun .geton ol { font-size:3.8vh; gap:2vh; }
.display .welcome.fun .prizes .pz { font-size:4vh; margin:.6vh 0; }
.display .welcome.fun .rchips { flex:0 0 auto; }
.display .welcome.fun .rchip { min-height:20vh; padding:1.8vh 1vw; display:flex; flex-direction:column; gap:.6vh; }
.display .welcome.fun .rc-n { font-size:3.4vh; }
.display .welcome.fun .rc-t { font-size:2.4vh; }
.display .welcome.fun .rc-name { font-size:2.6vh; }
.display .welcome.fun .rc-how { font-size:2vh; }
.display .welcome.fun .rchip .smini { align-self:flex-start; margin-top:auto; }
.display .welcome.fun .rchip .smini img { height:3.4vh; }
.display .welcome.fun .prizes .pz { font-size:3.6vh; white-space:nowrap; }

/* MATT MANIA: the countdown is a calm teaser; GO (live) is the full red blow-out */
.display .mania.pre { background:linear-gradient(160deg, #13204a 0%, #0b1430 100%); border:2px solid rgba(216,31,42,.55); animation:none; box-shadow:0 0 6vh rgba(216,31,42,.18) inset; gap:2vh; }
.display .mania.pre .mmtitle { font-size:8vh; letter-spacing:.4vw; color:#fff; text-shadow:0 .4vh 0 rgba(0,0,0,.6); animation:none; }
.display .mania.pre .mmtitle::before { content:'🔥 '; }
.display .mania.pre .mmsub { font-size:2.8vh; opacity:.8; }
.display .mania.pre .mmbig { font-size:17vh; color:#ffd400; text-shadow:0 .6vh 0 rgba(0,0,0,.5); }
.display .mania.live .mmtitle { font-size:16vh; }
.display .mania.live .mmprice b { font-size:26vh; }
.display .mania.live .mmname { font-size:7.5vh; }
.display .mania.live .mmends { font-size:5.5vh; }
.display .mania.live { gap:1.4vh; padding:2vh 0; }
.display .mania.live .mmtitle { font-size:13.5vh; white-space:nowrap; }
.display .mania.live .mmprice b { font-size:24vh; }
.display .mania.live .mmprice s { font-size:8vh; }
.display .mania.live .mmhorse { padding:1.4vh 3vw; }
.display .mania.live .mmsilk { height:10vh; }
.display .mania.live .mmends { font-size:5vh; }

/* Phone: syndicate card (buy buttons always showing) */
.phone .syndc { border:2px solid var(--green); }
.phone .syndc .ost { font-size:17px; font-weight:800; color:var(--green); }
.phone .syndc .osub { font-size:13px; color:var(--muted); margin-top:2px; }
.phone .syndc .osub b { color:var(--ink); }
.phone .syndc .osub b.oyou { color:var(--ok); }
.phone .syndc .slipquick { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.phone .syndc .slipquick button { padding:9px 0; border-radius:8px; border:2px solid var(--green); background:var(--green); color:#fff; font-weight:800; font-size:15px; cursor:pointer; line-height:1.15; }
.phone .syndc .slipquick button small { font-weight:600; opacity:.85; font-size:12px; }
.phone .syndc .synddet { margin-top:8px; }
.phone .syndc .synddet > summary { cursor:pointer; color:var(--green); font-weight:700; font-size:13px; list-style:none; }
.phone .syndc .synddet > summary::-webkit-details-marker { display:none; }
.phone .syndc .slipret { display:flex; justify-content:space-between; align-items:baseline; background:#f3f5fa; border-radius:10px; padding:10px 12px; font-size:14px; }
/* Phone: one scrolling strip of Card · R1–R8 · Help */
.phone .rchips2 { display:flex; gap:6px; overflow-x:auto; padding:10px 0 8px; margin:0 -2px; scrollbar-width:none; }
.phone .rchips2::-webkit-scrollbar { display:none; }
.phone .rchips2 button { flex:0 0 auto; min-width:54px; padding:8px 10px; border-radius:10px; border:1.5px solid #d5dae4; background:#fff; font-weight:900; font-size:15px; cursor:pointer; display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.phone .rchips2 button small { font-size:10.5px; font-weight:700; color:var(--muted); }
.phone .rchips2 button.pick { background:var(--green); border-color:var(--green); color:#fff; }
.phone .rchips2 button.pick small { color:rgba(255,255,255,.8); }

/* Big screen: sponsored races wear their sponsor's colours — The Brewly Cup blue, The Overlay Stakes ink + lime */
.display .dcard.sp-brewlyicon { background:linear-gradient(160deg, #3d8ef0 0%, #1f5fbf 100%); border-radius:2vh; padding:1.6vh 1.6vw; margin:-1vh -1vw; box-shadow:0 0 0 .4vh rgba(255,255,255,.25) inset; }
.display .dcard.sp-brewlyicon .dhead { border-bottom-color:rgba(255,255,255,.6); }
.display .dcard.sp-brewlyicon .dhead .rno { background:#fff; color:#1f5fbf; }
.display .dcard.sp-brewlyicon table.board th { color:#fff; border-bottom-color:rgba(255,255,255,.5); }
.display .dcard.sp-brewlyicon table.board td.win { color:#ffe14d; }
.display .dcard.sp-brewlyicon table.board td { border-bottom-color:rgba(255,255,255,.18); }
.display .dcard.sp-overlay { background:#14161a; border-radius:2vh; padding:1.6vh 1.6vw; margin:-1vh -1vw; box-shadow:0 0 0 .4vh #c6f24e inset; }
.display .dcard.sp-overlay .dhead { border-bottom-color:#c6f24e; }
.display .dcard.sp-overlay .dhead .rno { background:#c6f24e; color:#14161a; }
.display .dcard.sp-overlay .dhead .rname b, .display .dcard.sp-overlay .dhead .meet { color:#c6f24e; }
.display .dcard.sp-overlay table.board th { color:#c6f24e; border-bottom-color:rgba(198,242,78,.5); }
.display .dcard.sp-overlay table.board td.win { color:#c6f24e; }
.display .welcome.fun .rchip.sp-brewlyicon { background:linear-gradient(160deg, #3d8ef0, #1f5fbf); border-color:#9cc8ff; }
.display .welcome.fun .rchip.sp-brewlyicon .rc-n { color:#fff; }
.display .welcome.fun .rchip.sp-overlay { background:#14161a; border-color:#c6f24e; }
.display .welcome.fun .rchip.sp-overlay .rc-n, .display .welcome.fun .rchip.sp-overlay .rc-t { color:#c6f24e; }

.phone .syndc > summary { list-style:none; cursor:pointer; position:relative; padding-right:26px; }
.phone .syndc > summary::-webkit-details-marker { display:none; }
.phone .syndc > summary::after { content:'▾'; position:absolute; right:2px; top:2px; font-size:18px; color:var(--muted); transition:transform .15s; }
.phone .syndc[open] > summary::after { transform:rotate(180deg); }
.phone .syndc .slipquick { grid-template-columns:repeat(3,1fr); }

.phone .topbar .phelp { width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.7); background:transparent; color:#fff; font-weight:900; font-size:18px; cursor:pointer; margin-right:8px; flex:0 0 auto; }

/* Operator: fold a race card away */
.card.folded > *:not(:first-child) { display:none !important; }
.card.folded { padding-bottom:10px; }
.foldbtn { border:1px solid var(--line); background:#fff; border-radius:6px; width:28px; height:28px; margin-right:8px; cursor:pointer; font-size:14px; vertical-align:middle; }
.foldname { margin-right:8px; }
.foldbar { margin:4px 0 8px; font-size:13px; }
.foldbar a { cursor:pointer; color:var(--green); font-weight:700; text-decoration:underline; }

/* Operator tab bar: main tabs left, reference tabs after a divider in a quieter style */
.tabs .tabdiv { width:2px; align-self:stretch; background:var(--line); margin:6px 8px; }
.tabs button.minor { opacity:.65; font-weight:600; }
.tabs button.minor.active { opacity:1; }

.phone .rcond { font-size:13px; color:var(--muted); font-weight:700; margin:-4px 0 6px; }

/* Operator runsheet */
.runsheet td { vertical-align:middle; padding:8px 8px; }
.runsheet td.rst { font-weight:800; width:70px; white-space:nowrap; }
.runsheet td.rsst { width:110px; white-space:nowrap; font-weight:800; text-align:center; }
.runsheet tr.rsbig td { font-size:15px; }
.runsheet tr.rsdone td { opacity:.45; }
.runsheet tr.rsdone td.rsst { color:var(--ok); opacity:1; }
.runsheet tr.rsnext td { background:#fff6d6; }
.runsheet tr.rsnext td.rsst { color:#c0392b; }
.runsheet tr.rslate td.rsst { color:#c0392b; }

.console .tabs button { padding-left:10px; padding-right:10px; }
.console .tabs { flex-wrap:nowrap; overflow-x:auto; }

/* Big screen: sweep draw show */
.display .dshow { min-height:92vh; display:flex; flex-direction:column; align-items:center; gap:1.6vh; padding:2vh 2vw; border-radius:2vh;
  background:radial-gradient(circle at 50% 30%, #23366e 0%, #121d40 60%, #0a1128 100%); box-shadow:0 0 0 .4vh rgba(255,224,138,.35) inset; }
.display .dshow.sp-brewlyicon { background:radial-gradient(circle at 50% 30%, #4a9eff 0%, #1f5fbf 70%); }
.display .dshow.sp-overlay { background:radial-gradient(circle at 50% 30%, #2a2e36 0%, #14161a 70%); box-shadow:0 0 0 .4vh #c6f24e inset; }
.display .dshow .dstitle { font-size:9vh; font-weight:900; letter-spacing:.4vw; color:#ffe08a; text-shadow:0 .6vh 0 rgba(0,0,0,.5); }
.display .dshow.sp-overlay .dstitle { color:#c6f24e; }
.display .dshow .dsrace { font-size:2.8vh; opacity:.9; }
.display .dshow .dsstage { min-height:26vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2vh; }
.display .dshow .dsname { font-size:9vh; font-weight:900; color:#fff; animation:dspop .35s ease-out; }
.display .dshow .dshorse { display:flex; align-items:center; gap:1.6vw; font-size:6vh; font-weight:900; padding:1.4vh 2.4vw; border-radius:1.6vh; background:rgba(0,0,0,.35); }
.display .dshow .dshorse.spin { color:rgba(255,255,255,.75); filter:blur(.6px); min-width:50vw; justify-content:center; }
.display .dshow .dshorse.land { background:#ffd400; color:#1a1a1a; animation:dsland .45s cubic-bezier(.2,1.6,.4,1); box-shadow:0 0 6vh rgba(255,212,0,.6); }
.display .dshow .dshorse b { font-family:ui-monospace,Consolas,monospace; font-size:5vh; opacity:.8; }
.display .dshow .dssilk { height:9vh; width:auto; }
.display .dshow .dsboard { display:grid; grid-template-columns:repeat(auto-fill, minmax(17vw, 1fr)); gap:1vh 1vw; width:100%; align-content:start; }
.display .dshow .dscell { display:flex; align-items:center; gap:.8vw; background:rgba(255,255,255,.08); border-radius:1vh; padding:.8vh .8vw; }
.display .dshow .dscell.fresh { background:rgba(255,212,0,.25); animation:dspop .4s ease-out; }
.display .dshow .dscell b { display:block; font-size:2.4vh; }
.display .dshow .dscell small { font-size:1.9vh; opacity:.8; }
.display .dshow .dsmini { height:4.5vh; width:auto; }
@keyframes dspop { from { transform:scale(.6); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes dsland { 0% { transform:scale(.4) rotate(-6deg); } 100% { transform:scale(1) rotate(0); } }

.updbar { position:fixed; top:0; left:0; right:0; z-index:60; background:#d81f2a; color:#fff; padding:10px 16px; font-weight:800; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.3); }
.updbar .btn { margin-left:8px; }
.updbar .hint { color:rgba(255,255,255,.85); font-weight:600; }

.display .dshow .dshat { width:100%; background:rgba(0,0,0,.25); border-radius:1.2vh; padding:1vh 1vw; }
.display .dshow .dshatl { font-size:2vh; font-weight:900; text-transform:uppercase; letter-spacing:.2vw; color:#ffe08a; margin-bottom:.6vh; }
.display .dshow.sp-overlay .dshatl { color:#c6f24e; }
.display .dshow .dshatrow { display:flex; flex-wrap:wrap; gap:.6vh .6vw; }
.display .dshow .dshc { display:inline-flex; align-items:center; gap:.5vw; background:rgba(255,255,255,.1); border-radius:999px; padding:.3vh 1vw .3vh .4vw; font-size:2.1vh; font-weight:700; }
.display .dshow .dshc .dsmini { height:3.4vh; }
.display .dshow .dshc b { font-family:ui-monospace,Consolas,monospace; color:#ffd400; }
.display .dshow .dsstage { min-height:22vh; }

.viewswitch .dsnext { font-size:17px; padding:10px 18px; animation:mmpulse2 .9s ease-in-out infinite alternate; }

/* Draw show: horse list with owner column */
.display .dshow { gap:1.2vh; }
.display .dshow .dstitle { font-size:7vh; }
.display .dshow .dsstage { min-height:15vh; gap:1vh; flex-direction:row; flex-wrap:wrap; }
.display .dshow .dsname { font-size:6.5vh; }
.display .dshow .dshorse { font-size:4.4vh; padding:1vh 1.8vw; }
.display .dshow .dshorse b { font-size:3.6vh; }
.display .dshow .dssilk { height:6.5vh; }
.display .dshow .dslist { width:100%; display:grid; grid-template-columns:1fr; gap:1.4vw; }
.display .dshow .dslist.two { grid-template-columns:1fr 1fr; }
.display .dshow .dshdr, .display .dshow .dsrow { display:grid; grid-template-columns:4.6vh 4vh 1fr 8vh 1.25fr; align-items:center; gap:.8vw; padding:.55vh .8vw; }
.display .dshow .dshdr { font-size:1.8vh; font-weight:900; text-transform:uppercase; letter-spacing:.15vw; color:#ffe08a; border-bottom:2px solid rgba(255,255,255,.2); }
.display .dshow.sp-overlay .dshdr { color:#c6f24e; }
.display .dshow .dsrow { font-size:2.7vh; border-bottom:1px solid rgba(255,255,255,.1); }
.display .dshow .dsrow .dsn { font-weight:900; text-align:center; }
.display .dshow .dsrow .dsh { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display .dshow .dsrow .dso { font-family:ui-monospace,Consolas,monospace; font-weight:800; color:#ffd400; text-align:right; }
.display .dshow .dsrow .dsw { font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display .dshow .dsrow .dsq { opacity:.35; }
.display .dshow .dsrow.owned .dsw { color:#9ff0b4; }
.display .dshow .dsrow.fresh { background:rgba(255,212,0,.28); border-radius:.8vh; animation:dspop .5s ease-out; }
.display .dshow .dsrow.fresh .dsw { color:#ffd400; }
.display .dshow .dsmini { height:4vh; }

/* Operator: auction console */
.aucard { border:2px solid #d81f2a; }
.aucard .aulots { display:flex; flex-wrap:wrap; gap:6px; }
.aucard .aulots .ausold { opacity:.55; }
/* Big screen: auction / calcutta */
.display .auction { min-height:92vh; display:flex; flex-direction:column; gap:1.6vh; padding:2vh 2vw; border-radius:2vh;
  background:radial-gradient(circle at 30% 30%, #2a3c78 0%, #121d40 65%, #0a1128 100%); box-shadow:0 0 0 .4vh rgba(216,31,42,.45) inset; }
.display .auction .autitle { font-size:5.5vh; font-weight:900; letter-spacing:.3vw; color:#ffe08a; text-align:center; }
.display .auction .aubody { flex:1; display:grid; grid-template-columns:1.25fr 1fr; gap:2vw; }
.display .auction .aulot { position:relative; display:flex; flex-direction:column; justify-content:center; gap:3vh; padding:3vh 2.4vw; border-radius:2vh; background:rgba(0,0,0,.3); overflow:hidden; }
.display .auction .aulot.wait { align-items:center; }
.display .auction .auwait { font-size:6vh; font-weight:900; opacity:.75; }
.display .auction .aulbl { font-size:2.6vh; font-weight:900; letter-spacing:.4vw; color:#ffd400; }
.display .auction .auhorse { display:flex; align-items:center; gap:2vw; }
.display .auction .ausilk { height:14vh; width:auto; }
.display .auction .auname { font-size:7vh; font-weight:900; line-height:1.05; }
.display .auction .aumeta { font-size:2.6vh; opacity:.85; margin-top:1vh; }
.display .auction .aubid { display:flex; flex-direction:column; align-items:flex-start; gap:.4vh; }
.display .auction .aubid small { font-size:2.4vh; font-weight:900; letter-spacing:.3vw; opacity:.8; }
.display .auction .aubid b { font-size:15vh; line-height:1; color:#ffd400; text-shadow:0 .8vh 0 rgba(0,0,0,.5); font-variant-numeric:tabular-nums; }
.display .auction .aubid span { font-size:4.6vh; font-weight:900; }
.display .auction .aubanner { position:absolute; right:2vw; top:2vh; font-size:5.5vh; font-weight:900; padding:1vh 2vw; border-radius:1.4vh; transform:rotate(4deg); animation:dspop .3s ease-out; }
.display .auction .aubanner.once { background:#ffd400; color:#1a1a1a; }
.display .auction .aubanner.twice { background:#ff8a00; color:#1a1a1a; animation:dspop .3s ease-out, mmshake .2s linear infinite .3s; }
.display .auction .aubanner.sold { background:#d81f2a; color:#fff; font-size:9vh; top:auto; bottom:3vh; animation:dsland .5s cubic-bezier(.2,1.6,.4,1); box-shadow:0 0 6vh rgba(216,31,42,.7); }
.display .auction .aulot.sold { box-shadow:0 0 0 .5vh #d81f2a inset; }
.display .auction .auside { display:flex; flex-direction:column; gap:.4vh; }
.display .auction .aupool { font-size:2.6vh; margin-bottom:.8vh; }
.display .auction .aupool b { color:#ffd400; }
.display .auction .aurow { display:grid; grid-template-columns:4.4vh 3.6vh 1fr 7vh 1.3fr; align-items:center; gap:.6vw; font-size:2.4vh; padding:.4vh .6vw; border-bottom:1px solid rgba(255,255,255,.08); }
.display .auction .aurow .aun { font-weight:900; text-align:center; }
.display .auction .aurow .auh { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display .auction .aurow .auo { font-family:ui-monospace,Consolas,monospace; color:#ffd400; text-align:right; }
.display .auction .aurow .aup { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:800; }
.display .auction .aurow .aup em { font-style:normal; color:#9ff0b4; font-weight:700; }
.display .auction .aurow.on { background:rgba(255,212,0,.25); border-radius:.8vh; }
.display .auction .aurow.sold .auh { opacity:.8; }

/* Big screen: Dutch auction */
.display .auction.dutch .dusub { text-align:center; font-size:2.8vh; }
.display .auction.dutch .dusub b { color:#ffd400; }
.display .auction.dutch .dulist { display:grid; grid-template-columns:1fr 1fr; gap:1.6vw; }
.display .auction.dutch .durow { display:grid; grid-template-columns:4.6vh 3.6vh 1fr 7vh 1.2fr; align-items:center; gap:.6vw; font-size:2.9vh; padding:.7vh .6vw; border-bottom:1px solid rgba(255,255,255,.1); }
.display .auction.dutch .durow .dup { font-size:4vh; color:#ffd400; font-variant-numeric:tabular-nums; }
.display .auction.dutch .durow .dur { text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.display .auction.dutch .durow.sold { opacity:.7; }
.display .auction.dutch .durow .dusold { color:#ff6b6b; font-weight:900; }
.display .auction.dutch .durow em { font-style:normal; color:#9ff0b4; font-weight:800; }
.display .auction.sp-overlay { background:radial-gradient(circle at 30% 30%, #2a2e36 0%, #14161a 70%); box-shadow:0 0 0 .4vh #c6f24e inset; }
.display .auction.sp-overlay .autitle, .display .auction.sp-overlay .dup, .display .auction.sp-overlay .dusub b { color:#c6f24e !important; }

.display .auction.dutch .dutop { display:flex; align-items:center; justify-content:center; gap:3vw; }
.display .auction.dutch .duqr { display:flex; flex-direction:column; align-items:center; gap:.4vh; background:#fff; color:#111; border-radius:1.2vh; padding:.8vh; }
.display .auction.dutch .duqr svg { width:16vh; height:16vh; display:block; }
.display .auction.dutch .duqr span { font-size:1.9vh; font-weight:900; }

/* Dutch auction: drop countdown + hits */
.display .auction.dutch .ducount { font-size:7vh; font-weight:900; color:#fff; background:#d81f2a; padding:1vh 3vw; border-radius:1.6vh; animation:mmpulse2 .5s ease-in-out infinite alternate; box-shadow:0 0 6vh rgba(216,31,42,.6); }
.display .auction.dutch .ducount b { color:#ffe14d; font-size:9vh; font-variant-numeric:tabular-nums; }
.display .auction.dutch.counting .durow:not(.sold) { animation:mmshake .35s linear infinite; }
.display .auction.dutch .durow.hit { background:rgba(216,31,42,.32); border-radius:.8vh; animation:dspop .45s ease-out; }
.display .auction.dutch .durow.bighit { background:rgba(255,90,31,.55); box-shadow:0 0 3vh rgba(255,90,31,.7); }
.display .auction.dutch .dudown { color:#ff9b9b; font-weight:900; font-size:2.6vh; }
.display .auction.dutch .dudown.big { color:#fff; background:#ff5a1f; padding:.2vh .8vw; border-radius:.8vh; display:inline-block; animation:mmshake .25s linear infinite; }
.display .auction.dutch .bigtxt { color:#ff5a1f !important; }
.viewswitch .dsnext[disabled] { opacity:.5; animation:none; }
.dudropbtn { font-size:16px; padding:10px 16px; }

/* Dutch top row: drop panel · payouts table · QR */
.display .auction.dutch .dutop { display:grid; grid-template-columns:1.6fr 1fr auto; gap:1.6vw; align-items:stretch; justify-content:stretch; }
.display .auction.dutch .dudrop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6vh; text-align:center; background:rgba(0,0,0,.35); border:.3vh solid rgba(255,255,255,.15); border-radius:1.6vh; padding:1.2vh 1vw; }
.display .auction.dutch .dudrop .ddl { font-size:3vh; font-weight:900; letter-spacing:.3vw; color:#ffe08a; }
.display .auction.dutch .dudrop .ddt { font-size:3.6vh; font-weight:900; }
.display .auction.dutch .dudrop .ddt b { color:#ffd400; font-size:5vh; }
.display .auction.dutch .dudrop .ddh { font-size:2.2vh; opacity:.8; }
.display .auction.dutch .dudrop.counting { background:#d81f2a; border-color:#ffe14d; animation:mmpulse2 .5s ease-in-out infinite alternate; box-shadow:0 0 6vh rgba(216,31,42,.6); }
.display .auction.dutch .dudrop.counting .ddl { color:#fff; font-size:3.6vh; }
.display .auction.dutch .dudrop.counting .ddn { font-size:13vh; font-weight:900; line-height:1; color:#ffe14d; text-shadow:0 .8vh 0 rgba(0,0,0,.4); font-variant-numeric:tabular-nums; }
.display .pztable { width:100%; border-collapse:collapse; background:rgba(0,0,0,.35); border-radius:1.6vh; overflow:hidden; }
.display .pztable th { font-size:2.4vh; font-weight:900; letter-spacing:.2vw; color:#ffe08a; text-align:left; padding:1vh 1vw .6vh; }
.display .pztable td { font-size:3vh; font-weight:800; padding:.5vh 1vw; border-top:1px solid rgba(255,255,255,.1); }
.display .pztable td:last-child { text-align:right; color:#ffd400; font-variant-numeric:tabular-nums; }
.display .auction.sp-overlay .pztable th, .display .auction.sp-overlay .pztable td:last-child { color:#c6f24e; }
.display .auction .aupool { font-size:inherit; }
/* no shaking on the Dutch auction prices (countdown or big drops) */
.display .auction.dutch.counting .durow:not(.sold) { animation:none; }
.display .auction.dutch .dudown.big { animation:none; }

.display .auction.dutch .durow .dur { overflow:visible; }
.display .auction.dutch .durow .dubig { display:inline-block; font-size:1.9vh; font-weight:900; color:#fff; background:#ff5a1f; padding:.1vh .6vw; border-radius:.6vh; vertical-align:middle; margin-left:.4vw; }

/* 🎡 Price Boost */
.slip .bwtoggle { width:100%; margin:10px 0 0; padding:10px; border-radius:10px; border:2px dashed #ff5a1f; background:#fff4ec; color:#c2410c; font-weight:900; font-size:15px; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
.slip .bwtoggle small { font-weight:600; font-size:11px; opacity:.8; }
.slip .bwtoggle.on { background:#ff5a1f; color:#fff; border-style:solid; }
.slip.bwheel { text-align:center; }
.bwwrap { position:relative; width:260px; height:260px; margin:6px auto 4px; }
.bwptr { position:absolute; top:-6px; left:50%; transform:translateX(-50%); font-size:30px; color:#1b2a5e; z-index:2; text-shadow:0 2px 0 #fff; }
.bwspin { width:260px; height:260px; transition:transform 4.2s cubic-bezier(.15,.85,.2,1); }
.bwsvg { width:100%; height:100%; filter:drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.bwres { font-size:15px; margin:6px 0 10px; }
.bwres .bwbig { font-size:44px; font-weight:900; color:#ff5a1f; line-height:1; animation:dspop .4s ease-out; }
.bwres b { font-size:18px; color:var(--ok); }
.phone .bwchip { margin-top:10px; padding:8px 12px; border-radius:10px; background:#fff4ec; border:1.5px solid #ffb78a; color:#c2410c; font-weight:800; font-size:14px; }
.phone .bwchip b { font-size:18px; }
.phone .bwchip small { display:block; font-weight:600; font-size:11.5px; color:#9a3412; margin-top:2px; }

/* Dutch: ordinary drops aren't highlighted (every horse drops); BIG DROPS still glow */
.display .auction.dutch .durow.hit:not(.bighit) { background:transparent; box-shadow:none; animation:none; }
.phone .livechip { display:inline-block; vertical-align:middle; margin-left:6px; background:#2e9d5b; color:#fff; font-size:12px; font-weight:900; letter-spacing:.5px; padding:3px 9px; border-radius:999px; animation:mmpulse2 .9s ease-in-out infinite alternate; }
.phone details.ownsec:has(.livechip) { border:2px solid #2e9d5b; }

.slip .bwstop { font-size:20px; padding:16px; animation:mmpulse2 .6s ease-in-out infinite alternate; }

.bwres .bwbig.huge { font-size:58px; color:#7c3aed; text-shadow:0 0 18px rgba(124,58,237,.45); }

.phone .bwchip .bwbuy { float:right; background:#ff5a1f; color:#fff; border-color:#ff5a1f; margin-left:8px; }
/* Dutch: last drop in its own small column, well clear of the price */
.display .auction.dutch .durow { grid-template-columns:4.6vh 3.6vh 1fr 7vh 9vh 1fr; }
.display .auction.dutch .durow .dud { font-size:2vh; font-weight:800; color:#ff8a8a; text-align:center; background:rgba(216,31,42,.18); border-radius:.6vh; padding:.2vh 0; }
.display .auction.dutch .durow .dud:empty { background:transparent; }

/* Dutch: column titles + more room between odds / last drop / price */
.display .auction.dutch .durow { grid-template-columns:4.6vh 3.6vh 1fr 7.5vh 10vh 11vh; gap:0 1.4vw; }
.display .auction.dutch .durow .auo { text-align:right; }
.display .auction.dutch .durow .dud { margin-left:1vw; }
.display .auction.dutch .durow .dur { text-align:right; }
.display .auction.dutch .durow.duhdr { font-size:1.7vh; font-weight:900; text-transform:uppercase; letter-spacing:.15vw; color:#c6f24e; border-bottom:2px solid rgba(255,255,255,.2); padding-bottom:.6vh; opacity:1; }
.display .auction.dutch .durow.duhdr span:nth-child(4) { text-align:right; }
.display .auction.dutch .durow.duhdr span:nth-child(5) { text-align:center; margin-left:1vw; }
.display .auction.dutch .durow.duhdr span:nth-child(6) { text-align:right; }

.display .auction.dutch .durow .dur.wide { grid-column:span 2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:2.4vh; }
.display .auction.dutch .durow .dur.wide .dusold { font-size:2.4vh; }

/* Dutch: sold rows stack "SOLD $25" over the owner's name, and nothing can spill past its column */
.display .auction.dutch .durow > * { min-width:0; }
.display .auction.dutch .dulist > div { overflow:hidden; }
.display .auction.dutch .durow .dur.wide { display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; }
.display .auction.dutch .durow .dur.wide .dusold { font-size:2.2vh; }
.display .auction.dutch .durow .dur.wide em { font-size:2vh; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.aucard .auinc { display:flex; flex-wrap:wrap; gap:6px; }
.aucard .auinc .btn:not(.sm) { min-width:60px; font-size:18px; font-weight:900; padding:10px 12px; background:#1b2a5e; color:#fff; border-color:#1b2a5e; }

/* Home screen: QR to the phone app (race book, betting, owning) */
.display .welcome.fun .geton { position:relative; }
.display .welcome.fun .geton .gqr { float:right; margin:0 0 1vh 1.2vw; background:#fff; border-radius:1.2vh; padding:.8vh; display:flex; flex-direction:column; align-items:center; }
.display .welcome.fun .geton .gqr svg { width:17vh; height:17vh; display:block; }
.display .welcome.fun .geton .gqr span { color:#111; font-size:1.8vh; font-weight:900; }
/* QR beside the steps, not on top of them */
.display .welcome.fun .tile.geton { display:grid; grid-template-columns:auto 1fr; column-gap:1.4vw; align-content:center; }
.display .welcome.fun .tile.geton .tl { grid-column:1 / -1; }
.display .welcome.fun .tile.geton .gqr { float:none; margin:0; grid-row:2 / span 2; align-self:center; }
.display .welcome.fun .tile.geton .gqr svg { width:15vh; height:15vh; }
.display .welcome.fun .tile.geton ol { font-size:2.9vh; gap:1.2vh; }
.display .welcome.fun .tile.geton .url { font-size:2.2vh; }
.display .welcome.fun .tile.geton .tfoot { grid-column:2; }

/* home screen: the QR tile must never push the page wider than the screen */
.display .welcome.fun .tiles > .tile { min-width:0; }
.display .welcome.fun .tile.geton { grid-template-columns:auto minmax(0, 1fr); }
.display .welcome.fun .tile.geton ol, .display .welcome.fun .tile.geton .url { min-width:0; overflow-wrap:anywhere; }
.display .welcome.fun { max-width:100vw; overflow-x:hidden; }

.display .welcome.fun .big { font-size:min(17vh, 7.2vw); }
.display .welcome.fun .tile.clock { min-width:0; overflow:hidden; }

/* home prizes tile: prize value under the title */
.display .welcome.fun .prizes .pz small { display:block; font-size:.55em; opacity:.8; white-space:normal; font-weight:600; margin-left:1.4em; }

/* results: free drink for the winning owner */
.display .results .drinkwin { background:#ffd400; color:#1b2a5e; border-radius:1.4vh; padding:1.2vh 1.6vw; font-size:3vh; font-weight:800; margin:-1vh 0 2.5vh; display:inline-block; }

/* ===================== Operator console clean-up (Oct 2026) ===================== */
.console { padding-bottom: 110px; }
.console .tabs { position: sticky; top: 0; z-index: 6; background: var(--paper); padding-top: 4px; }
.console .card { border-radius: 12px; padding: 16px 18px; border-color: #e3e6ee; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.console .card h2 { font-size: 17px; line-height: 1.3; }
.console .hint { line-height: 1.55; }
.console .okbox, .console .warnbox, .console .infobox { margin: 12px 0; padding: 10px 14px; border-radius: 8px; line-height: 1.5; font-size: 13px; }
.infobox { background: #f2f5fb; border: 1px solid #d9e0ef; color: var(--ink); }
.console .btn { border-radius: 8px; }
.console .btn.gold { color: #fff; }
.btn.sel { background: var(--green); color: #fff; border-color: var(--green-d); }
.btn.go { background: var(--ok); color: #fff; border-color: #17703d; }
.btn.go:hover { background: #17703d; }
.console .pill { padding: 3px 9px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.pill.upcoming { background: #e7effa; color: #1f5f8b; }
.pill.resulted { background: #eceef3; color: #4b5470; }
.pos { color: #1e874b; font-weight: 700; }
.neg { color: #b42318; font-weight: 700; }

/* Silks: jersey shape everywhere */
.silkimg { width: 26px; height: 26px; vertical-align: middle; flex: 0 0 auto; }
.silkimg.big { width: 34px; height: 34px; }
.silkimg.xl { width: 44px; height: 44px; }

/* Card headers: title + meta on the left, chips + actions on the right; the whole header folds */
.rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rhead .rtitle { flex: 1 1 260px; min-width: 0; }
.rhead h2 { margin: 0 !important; user-select: none; -webkit-user-select: none; }
.rmeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; color: var(--muted); }
.ractions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.foldhead { cursor: pointer; }
.foldbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid #d9e0ef; background: #f2f5fb; color: var(--green);
  font-size: 15px; margin-right: 4px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .15s; }
.foldhead:hover .foldbtn { background: #e3e9f6; }
.card.folded .foldbtn { transform: rotate(-90deg); }
.card.folded { padding-bottom: 16px; }
.foldbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
.hchip { display: inline-block; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #f2f5fb; color: var(--ink); white-space: nowrap; }
.hchip.bad { background: #fdecea; color: #b42318; }
.hchip.good { background: #e8f6ee; color: #1e874b; }
.mmcard { border: 1px solid #e3e6ee; border-left: 5px solid #d81f2a; }

/* Risk strip: taken / worst / best for the club */
.riskbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 14px 0 12px; }
.riskbar .rk { border: 1px solid #e3e6ee; border-radius: 10px; padding: 10px 14px; background: #fafbfd; }
.riskbar .rk span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.riskbar .rk b { display: block; font-size: 15px; margin-top: 4px; }
.riskbar .rk.bad { background: #fef3f2; border-color: #f6c9c4; }
.riskbar .rk.bad b { color: #b42318; }
.riskbar .rk.good { background: #effaf3; border-color: #bfe5cd; }
.riskbar .rk.good b { color: #1e874b; }
table.grid tr.worst td { background: #fef3f2; }
table.grid th.right, table.grid td.right { text-align: right; }

/* Odds steppers */
.ostepper { display: inline-flex; align-items: center; gap: 3px; }
.ostep { width: 26px; height: 28px; border: 1px solid #d9e0ef; background: #f2f5fb; color: var(--green); border-radius: 6px; font-weight: 800; font-size: 15px; line-height: 1; padding: 0; }
.ostep:hover { background: #e3e9f6; }
.ostep:active { background: var(--green); color: #fff; }
table.grid input.odds { width: 64px; text-align: center; border: 1px solid var(--line); border-radius: 6px; padding: 5px 4px; }
table.grid input.odds.pinned { border: 2px solid #c0392b; font-weight: 800; }
.oauto { cursor: pointer; font-size: 11px; color: #1f5f8b; border-bottom: 1px dotted #1f5f8b; margin-left: 4px; }

/* Results payouts */
.paybox h3 { margin: 16px 0 6px; }
.paybox tfoot td { border-top: 2px solid var(--ink); border-bottom: 0; }

/* Secret peek tooltip (operator only, while held) */
.peektip { position: absolute; z-index: 60; background: #16233f; color: #fff; font-size: 12px; line-height: 1.5; padding: 8px 12px; border-radius: 8px; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Bottom control bar: docked, full width, never covers content */
.console .viewswitch { left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 12px;
  background: rgba(255,255,255,.97); border-top: 1px solid #e3e6ee; box-shadow: 0 -4px 14px rgba(16,24,40,.07); }

/* Runsheet: one size, tick boxes */
.runsheet td { font-size: 14px !important; padding: 9px 8px; }
.runsheet td.rsck { width: 34px; text-align: center; }
.runsheet td.rsck input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--ok); }
.runsheet td.rstag { width: 64px; color: var(--muted); font-weight: 700; font-size: 12px !important; text-transform: uppercase; letter-spacing: .4px; }
.runsheet td.rsst { font-size: 13px !important; }
.runsheet tr.rsdone td { opacity: .5; }
.runsheet tr.rsdone td.rsck { opacity: 1; }
.runsheet td.rst { font-variant-numeric: tabular-nums; font-weight: 700; width: 74px; white-space: nowrap; }
.runsheet td.right .btn { white-space: nowrap; }
.runsheet td.rsst { width: 90px; }

/* ---- Console clean-up, round 2 ---- */
/* one typeface: numbers line up with tabular figures instead of a monospace font */
.console .mono { font-family: inherit; font-variant-numeric: tabular-nums; }
.console table.grid { font-size: 13.5px; }
.console table.grid th { font-weight: 700; letter-spacing: .5px; }
.console table.grid td { vertical-align: middle; }
.console .card h3 { font-size: 12px; letter-spacing: .6px; margin: 18px 0 8px; }

/* meeting name: reads as a title, edits on click */
.console .topbar input#meetName { background: transparent; color: #fff; border: 1px solid transparent; font-weight: 600; min-width: 220px; }
.console .topbar input#meetName:hover, .console .topbar input#meetName:focus { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); outline: none; }

/* tabs */
.console .tabs button { font-size: 14px; }
.tbadge { display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: #d81f2a; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

/* bottom bar groups */
.console .viewswitch { align-items: center; }
.vslab { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 0 2px 0 6px; }
.vsdiv { width: 1px; align-self: stretch; background: #e3e6ee; margin: 2px 6px; }
.console .viewswitch .btn { padding: 7px 12px; }

/* race edit row tucked into a disclosure */
details.redit { margin: 4px 0 10px; }
details.redit > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); list-style: none; display: inline-block; padding: 4px 0; }
details.redit > summary::-webkit-details-marker { display: none; }
details.redit > summary::before { content: '✎ '; }
details.redit[open] > summary { color: var(--green); }
.oro { font-weight: 700; padding: 0 6px; }

/* ownership tab: lighter rename boxes, ticket chips */
.console table.grid input.name { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 5px 8px; font-size: 13.5px; }
.console table.grid input.name:hover { border-color: var(--line); background: #fff; }
.console table.grid input.name:focus { border-color: var(--green); background: #fff; outline: none; }
.console textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13.5px; }
.console .tchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.btn.closebet { border-color: #d81f2a; color: #b42318; background: #fff; }
.btn.closebet:hover { background: #fef3f2; }
.viewswitch .btn small { font-weight: 600; opacity: .8; margin-left: 4px; }
/* big-screen flucs: opened › moves › now, arrows between */
.display .flucs .farr { opacity: .4; margin: 0 .35em; }
.display .flucs .opened { color: rgba(255,255,255,.55); }
.display .flucs .mid { color: rgba(255,255,255,.7); }
.display table.board td.wfirm .wdir, .display table.board td.wdrift .wdir { font-size: .55em; margin-right: .3em; vertical-align: .15em; }
.display table.board td.wfirm { color: #59d98a; }
.display table.board td.wdrift { color: #ff8a80; }
.peektip table { border-collapse: collapse; }
.peektip td { padding: 1px 6px 1px 0; }
.peektip td:last-child { padding-left: 14px; text-align: right; }
.peektip .pp { color: #7ee2a1; } .peektip .pn { color: #ff9d94; }
.peektip .ptot { margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.2); }
.slipchg { margin: 8px 0 2px; padding: 9px 12px; border-radius: 8px; font-size: 14px; text-align: center; }
.slipchg.down { background: #fff4e5; border: 1px solid #f3c27a; color: #8a4b00; }
.slipchg.up { background: #e8f6ee; border: 1px solid #bfe5cd; color: #17703d; }
.resbox { margin: 12px 0 14px; padding: 12px 14px; border: 1px solid #d9e0ef; border-radius: 10px; background: #f7f9fd; }
.resbox h3 { margin: 0 0 8px !important; }

/* ===== Photo finish (big screen) ===== */
.display .photo { position: relative; min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; text-align: center; }
.display .photo .pflash { position: fixed; inset: 0; background: #fff; pointer-events: none; animation: pflash 3.2s ease-out 1; opacity: 0; z-index: 5; }
.display .photo.prev .pflash { animation: pflash 1.4s ease-out 1; }
@keyframes pflash { 0% { opacity: .95; } 12% { opacity: 0; } 18% { opacity: .7; } 30% { opacity: 0; } 100% { opacity: 0; } }
.display .photo .ptitle { font-size: 14vh; font-weight: 900; letter-spacing: 1.4vw; line-height: 1; color: #fff; text-shadow: 0 .6vh 0 #000, 0 0 5vh rgba(255,255,255,.35); }
.display .photo.prev .ptitle { font-size: 8vh; color: #ffd400; }
.display .photo .psub { font-size: 3.6vh; font-weight: 700; opacity: .9; }
.display .photo .psub b { color: #ffd400; }
.display .pprint { position: relative; width: 82vw; padding: 2vh 0; border-radius: 1.2vh; overflow: hidden;
  background: repeating-linear-gradient(90deg, #e9e4d6 0 .35vw, #ddd7c6 .35vw .7vw); box-shadow: 0 2vh 5vh rgba(0,0,0,.5), inset 0 0 6vh rgba(0,0,0,.25); }
.display .pprint .pline { position: absolute; top: 0; bottom: 0; left: 70%; width: .35vw; background: #d81f2a; box-shadow: 0 0 1.5vh rgba(216,31,42,.7); z-index: 2; }
.display .pprint .pscan { position: absolute; top: 0; bottom: 0; width: 6vw; left: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: pscan 2.2s ease-in-out infinite alternate; z-index: 3; }
@keyframes pscan { from { left: 52%; } to { left: 82%; } }
.display .plane { position: relative; height: 13vh; border-bottom: .3vh dashed rgba(0,0,0,.15); }
.display .plane:last-child { border-bottom: 0; }
.display .prunner { position: absolute; top: 50%; transform: translate(-100%, -50%); display: flex; align-items: center; gap: .6vw; transition: left 1.6s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.display .prunner.pjig { animation: pjig 1.1s ease-in-out infinite alternate; }
@keyframes pjig { from { margin-left: -1.2vw; } to { margin-left: 1.2vw; } }
.display .prunner .psilk { height: 11vh; width: auto; filter: drop-shadow(0 .6vh .6vh rgba(0,0,0,.4)); }
.display .prunner .pnum { font-size: 5vh; font-weight: 900; color: #16233f; background: #fff; border: .4vh solid #16233f; border-radius: 1vh; padding: 0 1.2vh; }
.display .plane .pname { position: absolute; left: 1.5vw; top: 50%; transform: translateY(-50%); font-size: 3.4vh; font-weight: 800; color: #16233f; opacity: .8; }
.display .plane.pwin { background: rgba(255,212,0,.28); }
.display .plane.pwin .pname { opacity: 1; }
.display .plane.plose { opacity: .65; }
.display .photo .pwait { font-size: 3.6vh; font-weight: 700; opacity: .9; }
.display .photo .pdots i { font-style: normal; animation: pdot 1.2s infinite; opacity: .2; }
.display .photo .pdots i:nth-child(2) { animation-delay: .2s; } .display .photo .pdots i:nth-child(3) { animation-delay: .4s; }
@keyframes pdot { 50% { opacity: 1; } }
.display .photo .pbanner { font-size: 6vh; font-weight: 900; color: #16233f; background: #ffd400; padding: 1.4vh 3vw; border-radius: 1.4vh; box-shadow: 0 1vh 0 #000; animation: pbanner .6s cubic-bezier(.2,1.4,.4,1) 1.2s both; }
@keyframes pbanner { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* operator photo panel */
.photobox { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #d9e0ef; }
.photobox .phrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.photobox .phrow .hint { margin: 0 2px 0 6px; }
.photobox .phlive { color: #b42318; margin-right: 6px; }

/* ===== Big-screen result board ===== */
.display .rboard { margin-top: 2vh; }
.display .rboard table { width: 100%; border-collapse: collapse; }
.display .rboard th { font-size: 2.2vh; color: #d81f2a; text-transform: uppercase; letter-spacing: .15vw; text-align: left; padding: 0 1.2vw 1vh; border-bottom: .3vh solid rgba(255,255,255,.25); }
.display .rboard th:nth-child(4), .display .rboard th:nth-child(5) { text-align: right; }
.display .rboard td { padding: 1.6vh 1.2vw; border-bottom: .2vh solid rgba(255,255,255,.12); vertical-align: middle; }
.display .rboard .rpos { font-size: 4.2vh; font-weight: 900; color: #ffd400; width: 9vw; }
.display .rboard .rnum { font-size: 6vh; font-weight: 900; width: 7vw; }
.display .rboard td.rhorse { white-space: nowrap; }
.display .rboard td.rhorse > svg, .display .rboard td.rhorse > div { display: inline-block; vertical-align: middle; }
.display .rboard td.rhorse > svg { margin-right: 1.4vw; }
.display .rboard .rsilk { height: 8vh; width: auto; flex: 0 0 auto; filter: drop-shadow(0 .4vh .6vh rgba(0,0,0,.5)); }
.display .rboard .rname { font-size: 5vh; font-weight: 900; line-height: 1.05; }
.display .rboard .rown { font-size: 2.4vh; opacity: .75; font-weight: 600; margin-top: .3vh; }
.display .rboard .rdiv { font-size: 6vh; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; width: 14vw; }
.display .rboard tr.rr1 td { background: rgba(255,212,0,.10); }
.display .rboard tr.rr1 .rdiv { color: #ffd400; }
.display .rboard tr.rr4 td { opacity: .8; }
.display .rboard tr.rr4 .rname, .display .rboard tr.rr4 .rnum { font-size: 4vh; }
.display .rexs { display: flex; gap: 1.2vw; flex-wrap: wrap; margin-top: 2.4vh; }
.display .rex { background: rgba(0,0,0,.28); border-radius: 1.2vh; padding: 1.2vh 1.6vw; display: flex; gap: 1.2vw; align-items: baseline; }
.display .rex span { font-size: 2.2vh; color: #ffd400; text-transform: uppercase; letter-spacing: .1vw; font-weight: 800; }
.display .rex b { font-size: 3.6vh; }
.display .rboard .drinkwin { margin: 2.4vh 0 0; }
.display .rfoot { margin-top: 1.6vh; font-size: 2vh; opacity: .6; }
/* photo row on the results board */
.display .rboard tr.rphoto td { background: rgba(216,31,42,.16); border-top: .3vh solid #d81f2a; border-bottom: .3vh solid #d81f2a; }
.display .rboard tr.rphoto .rpos { line-height: 1.25; }
.display .phcell { display: flex; align-items: center; gap: 1.6vw; flex-wrap: wrap; }
.display .phtag { font-size: 5vh; font-weight: 900; letter-spacing: .5vw; color: #fff; background: #d81f2a; padding: .4vh 1.6vw; border-radius: 1vh; animation: phpulse 1s ease-in-out infinite alternate; }
@keyframes phpulse { from { box-shadow: 0 0 0 0 rgba(216,31,42,.8); } to { box-shadow: 0 0 3vh 1vh rgba(216,31,42,.25); } }
.display .phchip { display: inline-flex; align-items: center; gap: .8vw; font-size: 4vh; font-weight: 800; }
.display .phchip b { font-size: 5vh; }
.display .phv { font-size: 3vh; opacity: .6; font-weight: 800; }
.display .status.phstat { background: #d81f2a; color: #fff; animation: phpulse 1s ease-in-out infinite alternate; }
.display .rboard tr.rphwin td { background: rgba(255,212,0,.18); }
.display .rboard tr.rphwin .rown { color: #ffd400; opacity: 1; font-weight: 800; }

/* ===== Public polish (Oct 2026) ===== */
/* phone top bar: one tidy row */
.phone .topbar { flex-wrap: nowrap; gap: 8px; padding: 10px 12px; }
.phone .topbar .brand { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.15; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone .topbar .brand small { display: block; font-size: 12px; font-weight: 600; opacity: .8; }
.phone .topbar .spacer { display: none; }
.phone .topbar .pbal { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 17px; padding: 4px 12px; line-height: 1.1; flex: 0 0 auto; cursor: pointer; }
.phone .topbar .phelp { width: 32px; height: 32px; font-size: 16px; margin-right: 0; flex: 0 0 auto; }
/* phone race table */
.phone .prow { padding-top: 9px; padding-bottom: 9px; }
.phone a.phorse { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); text-decoration: none; }
.phone a.phorse .silkimg { width: 30px; height: 30px; }
.phone a.phorse span { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.phone .pjt { margin: 2px 0 0 38px; font-size: 12px; line-height: 1.3; }
.phone .pjt .plink { color: var(--muted); font-weight: 600; border-bottom: 0; }
.phone .pbtn { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 15px; min-width: 60px; }
.phone .mono { font-family: inherit; font-variant-numeric: tabular-nums; }
/* exotics pool picker: even 2-column grid */
.phone .selgrid.poolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.phone .selgrid.poolgrid button { min-width: 0; font-size: 14.5px; padding: 12px 8px; }
/* big screen */
.display table.board td.win { color: #fff; }
.display .welcome.fun .geton .url { display: block; margin: .6vh 0 0; font-family: inherit; font-weight: 800; font-size: 2.6vh; word-break: normal; overflow-wrap: anywhere; color: #7fd1ff; }
.display .welcome.fun .tile.geton .url { font-size: 2.6vh; }
.display .rboard { min-height: 70vh; display: flex; flex-direction: column; }
.display .rboard .rnext { margin-top: auto; padding-top: 2vh; }
.display .welcome.fun .tile.clock .tjump { opacity: .8; font-size: .85em; margin-top: .3vh; }
/* exotics race chips: one row of 8 */
.phone .selgrid.racegrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.phone .selgrid.racegrid button { min-width: 0; padding: 10px 0; font-size: 14px; }
.phone .selgrid button small, .phone .exb { font-family: inherit; font-variant-numeric: tabular-nums; }
.phone table.grid td, .phone table.grid th { padding: 8px 4px; }
.phone table.grid td.num { width: 22px; padding-left: 0; padding-right: 2px; font-size: 14px; }
.phone .pbtn { min-width: 52px; padding: 8px 4px; }
.phone a.phorse { gap: 6px; }
.phone a.phorse .silkimg { width: 26px; height: 26px; }
.phone .pjt { margin-left: 32px; }
details.morebox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
details.morebox > summary { cursor: pointer; font-weight: 800; color: var(--green); font-size: 14px; padding: 6px 0; }
/* one typeface on the big screen too (form figures keep their spaced look) */
.display .lboard table.prem .lsub, .display .dshow .dshorse b, .display .dshow .dshc b, .display .dshow .dsrow .dso, .display .auction .aurow .auo, .display .mono { font-family: inherit; font-variant-numeric: tabular-nums; }

/* ===== Phone first-time welcome ===== */
.pwel { position: fixed; inset: 0; z-index: 90; background: rgba(12,20,45,.72); display: flex; align-items: flex-end; justify-content: center; animation: pwin .25s ease-out; }
.pwel.out { opacity: 0; transition: opacity .25s; }
@keyframes pwin { from { opacity: 0; } to { opacity: 1; } }
.pwbox { width: 100%; max-width: 520px; background: #fff; border-radius: 20px 20px 0 0; padding: 14px 0 calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.3); animation: pwup .35s cubic-bezier(.2,.9,.3,1); }
@keyframes pwup { from { transform: translateY(30%); } to { transform: none; } }
.pwtop { display: flex; justify-content: space-between; align-items: center; padding: 0 18px 4px; font-weight: 800; color: var(--green); font-size: 15px; }
.pwskip { border: 0; background: none; color: var(--muted); font-weight: 700; font-size: 14px; padding: 6px; }
.pwtrack { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pwtrack::-webkit-scrollbar { display: none; }
.pwcard { flex: 0 0 100%; scroll-snap-align: start; padding: 8px 22px 6px; box-sizing: border-box; }
.pwcard .pwicon { font-size: 44px; line-height: 1; height: 56px; display: flex; align-items: center; }
.pwcard .pwicon img { height: 54px; width: auto; border-radius: 8px; }
.pwcard h2 { margin: 6px 0 12px; font-size: 24px; color: var(--ink); }
.pwrow { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid #eef0f4; font-size: 15px; line-height: 1.4; }
.pwrow .pwk { font-weight: 800; color: var(--green); }
.pwrow .pwv { color: var(--ink); }
.pwfoot { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f2f5fb; font-size: 14px; line-height: 1.45; color: var(--ink); }
.pwdots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 10px; }
.pwdots i { width: 8px; height: 8px; border-radius: 50%; background: #d4d9e4; cursor: pointer; transition: all .2s; }
.pwdots i.on { width: 22px; border-radius: 4px; background: var(--gold); }
.pwnav { display: flex; justify-content: space-between; gap: 10px; padding: 0 18px; }
.pwnav .btn { flex: 1; padding: 13px; font-size: 16px; font-weight: 800; border-radius: 12px; }
.pwnav .pwback { flex: 0 0 34%; }
.phone .pwagain { width: 100%; margin: 0 0 10px; padding: 11px; font-weight: 800; }

/* ===== Winner congratulations (big screen) ===== */
.display .congrats { position: relative; min-height: 86vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2vh; overflow: hidden; }
.display .cgconf { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.display .cgconf i { position: absolute; top: -4vh; width: 1vw; height: 2vh; border-radius: .2vw; opacity: .9; animation-name: cgfall; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes cgfall { from { transform: translateY(0) rotate(0); } to { transform: translateY(110vh) rotate(720deg); } }
.display .congrats > *:not(.cgconf) { position: relative; z-index: 1; }
.display .cgtop { font-size: 11vh; font-weight: 900; color: #ffd400; letter-spacing: .3vw; line-height: 1; text-shadow: 0 .8vh 0 #000, 0 0 5vh rgba(255,212,0,.45); animation: cgpop .7s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes cgpop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.display .cghorse { display: flex; align-items: center; gap: 2.4vw; background: rgba(0,0,0,.3); padding: 2vh 3vw; border-radius: 2vh; animation: cgpop .7s .25s cubic-bezier(.2,1.5,.4,1) both; }
.display .cgsilk { height: 18vh; width: auto; filter: drop-shadow(0 1vh 1.4vh rgba(0,0,0,.55)); }
.display .cghn { font-size: 8vh; font-weight: 900; line-height: 1.05; text-align: left; }
.display .cghn span { display: inline-block; background: #fff; color: #16233f; border-radius: 1vh; padding: 0 1.4vh; margin-right: 1.4vw; font-size: .8em; }
.display .cgrace { font-size: 3.4vh; font-weight: 700; opacity: .85; text-align: left; margin-top: .6vh; }
.display .cglbl { font-size: 2.6vh; font-weight: 800; text-transform: uppercase; letter-spacing: .3vw; color: #ffd400; margin-top: 1vh; }
.display .cgown { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2vh 3vw; max-width: 86vw; animation: cgpop .6s .5s ease-out both; }
.display .cgown .cgname { font-size: 6vh; font-weight: 900; }
.display .cgown .cgamt { color: #59d98a; font-size: .75em; margin-left: .6vw; }
.display .cgown .cgsub { flex-basis: 100%; font-size: 3vh; opacity: .85; }
.display .cgdrink { margin-top: 1.4vh; background: #ffd400; color: #1b2a5e; border-radius: 1.4vh; padding: 1.2vh 2vw; font-size: 3.2vh; font-weight: 900; }
/* phone banner for winning owners */
.pcongrats { margin: 8px 0; padding: 12px 14px; border-radius: 12px; background: linear-gradient(90deg, #ffd400, #ffe873); color: #1b2a5e; font-size: 15px; line-height: 1.4; box-shadow: 0 4px 14px rgba(255,212,0,.35); }

/* ===== Small-phone + one-typeface pass ===== */
.phone .acctiles b, .phone .arow > .mono b, .slip .sliptype button b, .slip .slipstake input, .slip .slipret b, .tticket .slipret b, .oodds,
.phone .exb .selgrid button small, .phone .mmbar .mmp, .tticket .ttnums td:last-child, .book .bhead .next b, .bookbody .bodds b,
.bookbody table.prem .lsub, .phone .topbar .pbal { font-family: inherit; font-variant-numeric: tabular-nums; }
.runswrap { overflow-x: auto; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
table.grid.runs { font-size: 12.5px; min-width: 380px; }
table.grid.runs td, table.grid.runs th { padding: 6px 5px; white-space: nowrap; }
@media (max-width: 380px) {
  .phone .tabs button { font-size: 13px; }
  .phone a.phorse span { font-size: 14.5px; }
  .phone .pbtn { min-width: 46px; padding: 8px 2px; font-size: 14px; }
  .phone .pjt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
  .phone .card { padding-left: 12px; padding-right: 12px; }
}
/* phone: your interest in a runner */
.phone tr.pmine td { background: #fffbea; }
.phone .ptags { display: flex; gap: 4px; flex-wrap: wrap; margin: 3px 0 0 32px; }
.phone .ptag { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--green); color: #fff; }
.phone .ptag.own { background: var(--gold); }
.display .upnext .upr b { color: #ffd400; }
.display .upnext .upclk { color: #ffd400; }
/* phone: sticky next-race strip */
.phone .pnext { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; border-radius: 12px;
  background: #16233f; color: #fff; font-size: 14px; line-height: 1.3; cursor: pointer; box-shadow: 0 4px 12px rgba(22,35,63,.25); }
.phone .pnext .pntxt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone .pnext .pntxt b[data-pncd] { color: #ffd400; font-variant-numeric: tabular-nums; }
.phone .pnext .pngo { flex: 0 0 auto; background: #ffd400; color: #16233f; font-weight: 900; border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.phone .pnext.hot { background: #d81f2a; animation: pnpulse 1s ease-in-out infinite alternate; }
.phone .pnext.hot .pntxt b[data-pncd] { color: #fff; }
.phone .pnext.run { background: #4b5470; }
@keyframes pnpulse { from { box-shadow: 0 0 0 0 rgba(216,31,42,.5); } to { box-shadow: 0 0 0 6px rgba(216,31,42,0); } }
.phone .pnext .pnclk { flex: 0 0 auto; font-weight: 900; color: #ffd400; font-variant-numeric: tabular-nums; }
.phone .pnext.hot .pnclk { color: #fff; }
.phone .pnext.run .pnclk { color: #fff; font-weight: 700; opacity: .85; }
/* phone top-up + send money */
.slip.topup .tuhead { font-size: 22px; font-weight: 900; text-align: center; margin: 6px 0 4px; color: var(--ink); }
.slip .slipquick button.on { background: var(--green); color: #fff; }
.slip .slipgo.short { background: var(--gold); border-color: var(--gold-d); }
.phone details.psend { margin-top: 12px; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
.phone details.psend > summary { cursor: pointer; font-weight: 800; color: var(--green); font-size: 15px; text-align: center; }

/* ===== Big screen: view change fade + finale ===== */
.display.vfade > *:not(.ticker) { animation: vfade .6s ease-out; }
@keyframes vfade { from { opacity: 0; transform: translateY(1.2vh); } to { opacity: 1; transform: none; } }
.display .finale { position: relative; min-height: 86vh; display: flex; flex-direction: column; justify-content: center; gap: 3vh; }
.display .finale > *:not(.cgconf) { position: relative; z-index: 1; }
.display .fnhead { display: flex; align-items: center; justify-content: center; gap: 2vw; }
.display .fnhead .crest { height: 15vh; width: auto;  }
.display .fntitle { font-size: 10vh; font-weight: 900; line-height: 1; color: #ffd400; text-shadow: 0 .7vh 0 #000; }
.display .fnthanks { font-size: 3.4vh; font-weight: 700; margin-top: 1vh; opacity: .9; }
.display .fngrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6vw; }
.display .fntile { background: rgba(0,0,0,.3); border: .2vh solid rgba(255,255,255,.15); border-radius: 2vh; padding: 2.4vh 1.6vw; text-align: center; animation: cgpop .6s cubic-bezier(.2,1.4,.4,1) both; }
.display .fntile:nth-child(2) { animation-delay: .15s; } .display .fntile:nth-child(3) { animation-delay: .3s; } .display .fntile:nth-child(4) { animation-delay: .45s; }
.display .fnt { font-size: 2.4vh; font-weight: 800; text-transform: uppercase; letter-spacing: .2vw; color: #ffd400; }
.display .fnwin { font-size: 5vh; font-weight: 900; margin-top: 1.4vh; line-height: 1.1; }
.display .fnnone { opacity: .4; }
.display .fnsub { font-size: 3.2vh; font-weight: 800; color: #59d98a; margin-top: .8vh; }
.display .fnrest { font-size: 2.1vh; opacity: .75; margin-top: 1.2vh; }
.display .fnfoot { text-align: center; font-size: 2.6vh; opacity: .8; }
/* phone account: balance card */
.phone .abal { text-align: center; }
.phone .abal .ablab { font-size: 13px; color: var(--muted); font-weight: 700; }
.phone .abal .abig { font-size: 46px; font-weight: 900; color: var(--green); line-height: 1.1; font-variant-numeric: tabular-nums; }
.phone .abal .afree { font-size: 13px; color: var(--muted); margin-top: 2px; }
.phone .abal .aacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.phone .abal .aacts .btn { padding: 12px; font-size: 16px; font-weight: 800; border-radius: 12px; }
.phone .abal .psendbox { text-align: left; }
.phone .abal .bwchip { margin-top: 12px; }
.phone .acctbottom { text-align: center; margin: 6px 0 24px; }
/* phone sign-in: tonight */
.pgate .gtonight { margin: 14px auto 0; max-width: 420px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; padding: 14px 16px; color: #fff; }
.pgate .gtonight .gtt { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #ffd400; margin-bottom: 6px; }
.pgate .gtonight .gtr { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14px; line-height: 1.35; border-top: 1px solid rgba(255,255,255,.08); }
.pgate .gtonight .gtr:first-of-type { border-top: 0; }
.pgate .gtonight .gtr span { flex: 0 0 22px; text-align: center; }
.pgate .gtonight .gbook { display: block; margin-top: 8px; text-align: center; color: #7fd1ff; font-weight: 800; font-size: 14px; text-decoration: none; }
/* operator: next step on each race header */
.nstep { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #eef2fb; color: var(--green); white-space: nowrap; border: 0; }
.nstep.hot { background: #d81f2a; color: #fff; animation: pnpulse 1s ease-in-out infinite alternate; }
.nstep.warn { background: #fdeecf; color: #8a5a00; cursor: pointer; }
.nstep.warn:hover { background: #f9e0aa; }
.nstep.done { background: #e8f6ee; color: #1e874b; }
/* restore dialog */
.rbg { position: fixed; inset: 0; z-index: 80; background: rgba(12,20,45,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rbox { background: #fff; border-radius: 14px; width: 100%; max-width: 560px; padding: 18px 20px; box-shadow: 0 20px 50px rgba(0,0,0,.3); max-height: 90vh; overflow: auto; }
.rbox .rhead2 { display: flex; justify-content: space-between; align-items: center; font-size: 17px; margin-bottom: 6px; }
.rbox .rrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #eef0f4; }

/* operator: who's in this race */
.whoin{margin:8px 0;padding:6px 10px;border:1px solid #e3e6ee;border-radius:8px;background:#fafbfd}
.whoin summary{cursor:pointer}

/* Group / Listed race badges (big screen race boxes, race card, Up Next) */
.gbadge { display:inline-block; font-size:.62em; font-weight:900; line-height:1; padding:.22em .4em; margin:0 .45em; border-radius:.3em; vertical-align:.18em; letter-spacing:.02em; color:#1b1b1b; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset; }
.gbadge.g1 { background:linear-gradient(180deg,#ffe27a,#d4a017); }
.gbadge.g2 { background:linear-gradient(180deg,#f4f6f8,#aeb6bf); }
.gbadge.g3 { background:linear-gradient(180deg,#f0b27a,#b8732e); }
.gbadge.l  { background:#fff; color:#1b2a5e; }
.display .rname .gbadge, .display .upname .gbadge { margin-left:0; }

/* phone: (i) on each race's ownership section */
.phone .oinfo { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:6px; border-radius:50%; border:1.5px solid var(--navy, #1b2a5e); background:#fff; color:var(--navy, #1b2a5e); font:italic 800 13px Georgia, serif; vertical-align:2px; padding:0; cursor:pointer; }
.oinfol { margin:4px 0 12px 18px; padding:0; line-height:1.45; }
.oinfol li { margin-bottom:6px; }

/* operator: links & QR panel */
.linkrow { display:flex; gap:14px; align-items:flex-start; padding:10px 0; border-top:1px solid #eceef3; }
.linkqr { flex:0 0 96px; width:96px; }
.linkqr svg { width:96px; height:96px; display:block; }

/* real photo-finish print at Reveal (picked on the desk, never hosted) */
.display .photo .pprint.preal { background: #000; padding: 0; display: flex; justify-content: center; height: auto; }
.display .photo .pprint.preal img { max-height: 58vh; max-width: 100%; display: block; animation: preal .7s ease-out both; }
@keyframes preal { from { filter: brightness(3) saturate(0); } to { filter: none; } }

/* horse popup: the umpire's mounting-yard verdict */
.yard { margin: 12px 0 4px; padding: 10px 14px; background: #fff7d6; border-left: 5px solid #d81f2a; border-radius: 8px; }
.yard .yh { font-size: 12px; font-weight: 800; color: #1b2a5e; text-transform: uppercase; letter-spacing: .04em; }
.yard .yt { font-size: 16px; font-style: italic; color: #1b2a5e; margin-top: 4px; line-height: 1.35; }

/* practice meeting banner (?meet=practice) and the phones' "desk closed" notice */
.practicebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: repeating-linear-gradient(45deg, #ffd400, #ffd400 14px, #1b1b1b 14px, #1b1b1b 28px); color: #fff; font: 900 15px "Segoe UI", Arial; text-align: center; padding: 6px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.deskoff { position: fixed; left: 10px; right: 10px; top: 10px; z-index: 9998; background: #1b2a5e; color: #fff; border: 2px solid #ffd400; border-radius: 10px; padding: 10px 14px; font: 700 14px "Segoe UI", Arial; box-shadow: 0 6px 18px rgba(0,0,0,.35); text-align: center; }