:root{--bg:#070b0d;--ln:#56666e;--tx:#f4e7c8;--mu:#aab6b9;--go:#e8bc57;--gr:#79d19b;--re:#e57676;--uiScale:1}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 30% -20%,#6a3d2430,transparent 42%),linear-gradient(#0a0f11,#040607);color:var(--tx);font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif}
button,input,textarea{font:inherit}
button{color:var(--tx);cursor:pointer}
.app{height:100vh;padding:calc(8px * var(--uiScale));display:grid;grid-template-rows:calc(44px * var(--uiScale)) minmax(0,1fr);gap:calc(6px * var(--uiScale))}
.top{display:grid;grid-template-columns:minmax(calc(210px * var(--uiScale)),1.45fr) repeat(5,minmax(calc(96px * var(--uiScale)),.64fr)) minmax(calc(250px * var(--uiScale)),.95fr);gap:calc(6px * var(--uiScale))}
.box,.machine,.betpanel,.overlay,.mcard{border:1px solid #49606a;background:#101517f5;border-radius:calc(12px * var(--uiScale))}
.brand{padding:calc(4px * var(--uiScale)) calc(10px * var(--uiScale));display:flex;flex-direction:column;justify-content:center}
.brand b{color:var(--go);font-size:calc(14px * var(--uiScale));letter-spacing:.14em}
.brand small,.lab{color:var(--mu)}
.stat{padding:calc(4px * var(--uiScale)) calc(8px * var(--uiScale));display:flex;flex-direction:column;justify-content:center}
.lab{text-transform:none;letter-spacing:.04em;font-size:calc(8px * var(--uiScale));line-height:1.05}
.val{font-size:calc(12px * var(--uiScale));font-weight:900;line-height:1.0}
.actions{padding:calc(4px * var(--uiScale));display:grid;grid-template-columns:repeat(4,1fr);gap:calc(4px * var(--uiScale))}
.btn,.tab,.horse,.buy,.mode,.mini{border:1px solid rgba(220,236,205,.20);background:linear-gradient(rgba(38,50,39,.74),rgba(18,25,20,.70));border-radius:calc(8px * var(--uiScale));padding:calc(6px * var(--uiScale))}
.btn:hover,.tab:hover,.horse:hover,.buy:hover,.mode:hover,.mini:hover{border-color:#9cb5be}
.btn:disabled,.buy:disabled{opacity:.45;cursor:not-allowed}
.main{position:relative;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(220px * var(--uiScale));gap:calc(6px * var(--uiScale))}
.machine{height:100%;overflow:hidden;display:grid;grid-template-rows:calc(38px * var(--uiScale)) minmax(0,1fr) calc(44px * var(--uiScale));min-width:0}
.head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(8px * var(--uiScale));padding:0 calc(10px * var(--uiScale));background:linear-gradient(180deg,#8d5d35,#55311f);border-bottom:1px solid #b98b5f}
.head h2{margin:0;font-size:calc(12px * var(--uiScale));letter-spacing:.02em;white-space:nowrap}
.head-nav{display:grid;grid-template-columns:repeat(3,calc(96px * var(--uiScale)));gap:calc(5px * var(--uiScale));justify-content:center}
.head-nav .tab{padding:calc(5px * var(--uiScale)) calc(4px * var(--uiScale));font-size:calc(9px * var(--uiScale))}
.race{min-height:0;padding:calc(6px * var(--uiScale));background:#0c130a;display:flex;align-items:center;justify-content:center;overflow:hidden}
.race canvas{display:block;width:100%;height:auto;max-height:100%;aspect-ratio:5/3;border:1px solid #708b4d;border-radius:calc(10px * var(--uiScale));background:#bcd791}
.foot{display:grid;grid-template-columns:1.55fr repeat(4,minmax(calc(84px * var(--uiScale)),.7fr));gap:calc(5px * var(--uiScale));padding:calc(4px * var(--uiScale));border-top:1px solid #4a5f68;background:#0d1315}
.fbox{border:1px solid #445a63;background:#091011;border-radius:calc(8px * var(--uiScale));padding:calc(4px * var(--uiScale)) calc(7px * var(--uiScale));overflow:hidden}
.fbox .lab{font-size:calc(7px * var(--uiScale))}
.fbox .val{font-size:calc(11px * var(--uiScale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.betpanel{height:100%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:calc(5px * var(--uiScale));padding:calc(6px * var(--uiScale));background:linear-gradient(rgba(15,22,16,.82),rgba(10,14,11,.76));min-width:0}
.read{border:1px solid rgba(220,236,205,.18);background:rgba(11,16,13,.55);border-radius:calc(8px * var(--uiScale));padding:calc(5px * var(--uiScale)) calc(6px * var(--uiScale));min-width:0}
.read .lab{font-size:calc(8px * var(--uiScale))}
.read .val{font-size:calc(11px * var(--uiScale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.panel-top{display:grid;grid-template-columns:1fr;gap:calc(5px * var(--uiScale))}
.panel-controls{display:grid;grid-template-columns:1fr 1fr;gap:calc(5px * var(--uiScale))}
.start{grid-column:1/-1;background:linear-gradient(#b58a26,#7f5e14);border-color:#e2c66a;color:#fff4c7;font-size:calc(14px * var(--uiScale));font-weight:950;padding:calc(7px * var(--uiScale))}
.horse-card,.slip-card,.reading-card{border:1px solid rgba(221,240,212,.16);border-radius:calc(10px * var(--uiScale));background:linear-gradient(rgba(24,32,25,.76),rgba(11,16,12,.64));padding:calc(6px * var(--uiScale))}
.horse-card h3,.slip-card h3,.reading-card h3,.card h3,.prestige h3{margin:0 0 calc(5px * var(--uiScale));font-size:calc(11px * var(--uiScale));color:#f2e7c9}
.horses{display:grid;gap:calc(3px * var(--uiScale));max-height:100%;overflow:auto;padding-right:calc(1px * var(--uiScale))}
.horse{min-height:calc(28px * var(--uiScale));padding:calc(3px * var(--uiScale)) calc(4px * var(--uiScale));display:grid;grid-template-columns:calc(18px * var(--uiScale)) minmax(0,1fr) auto;align-items:center;gap:calc(4px * var(--uiScale));text-align:left}
.horse.sel{border-color:var(--go);background:linear-gradient(rgba(82,71,26,.86),rgba(48,38,14,.8))}
.silk-icon{display:block;width:calc(16px * var(--uiScale));height:calc(20px * var(--uiScale));justify-self:center}
.hname{font-weight:850;font-size:calc(10px * var(--uiScale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{display:none}
.odds{color:var(--go);font-weight:900;font-size:calc(10px * var(--uiScale))}
.types{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(4px * var(--uiScale))}
.types .mode{padding:calc(5px * var(--uiScale)) calc(2px * var(--uiScale));font-size:calc(9px * var(--uiScale))}
.types .mode.active,.tab.active,.mode.active{color:var(--go);border-color:var(--go);background:linear-gradient(rgba(85,66,18,.90),rgba(42,31,8,.88))}
.stakes{display:grid;grid-template-columns:calc(32px * var(--uiScale)) 1fr calc(32px * var(--uiScale));gap:calc(4px * var(--uiScale));align-items:center;margin:calc(5px * var(--uiScale)) 0}
.stakeval{border:1px solid rgba(220,236,205,.18);background:rgba(8,12,9,.75);border-radius:calc(8px * var(--uiScale));padding:calc(6px * var(--uiScale)) calc(4px * var(--uiScale));text-align:center;font-weight:900;color:var(--go)}
.quickstakes{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(3px * var(--uiScale))}
.quickstakes .mode,.stakes .mode{padding:calc(5px * var(--uiScale)) calc(1px * var(--uiScale));font-size:calc(9px * var(--uiScale))}
.reading-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(4px * var(--uiScale))}
.ibox{border:1px solid #445a63;background:rgba(8,12,9,.6);border-radius:calc(7px * var(--uiScale));padding:calc(4px * var(--uiScale))}
.ibox .lab{font-size:calc(8px * var(--uiScale))}
.ibox .val{font-size:calc(10px * var(--uiScale))}
.meterh{display:flex;justify-content:space-between;font-size:calc(8px * var(--uiScale));color:var(--mu);margin:calc(5px * var(--uiScale)) 0 calc(3px * var(--uiScale))}
.meter{height:calc(9px * var(--uiScale));border:1px solid #445a63;background:#070b09;border-radius:999px;overflow:hidden}
.meter>div{height:100%;width:0;background:linear-gradient(90deg,#9f7427,#eed071)}
.overlay{position:absolute;top:calc(44px * var(--uiScale));left:calc(90px * var(--uiScale));right:calc(270px * var(--uiScale));bottom:calc(54px * var(--uiScale));display:none;grid-template-rows:calc(38px * var(--uiScale)) minmax(0,1fr);background:linear-gradient(rgba(10,15,11,.68),rgba(8,11,9,.60));backdrop-filter:blur(10px);z-index:6;overflow:hidden}
.overlay.show{display:grid}
.overlay-top{display:grid;grid-template-columns:1fr auto;gap:calc(8px * var(--uiScale));align-items:center;padding:calc(6px * var(--uiScale)) calc(10px * var(--uiScale));background:rgba(22,29,23,.68);border-bottom:1px solid rgba(220,236,205,.15)}
.overlay-title{font-weight:900;color:#f1e7cb;letter-spacing:.05em;font-size:calc(12px * var(--uiScale))}
.overlay-close{min-width:calc(34px * var(--uiScale));padding:calc(6px * var(--uiScale)) 0}
.overlay-body{min-height:0;overflow:auto;padding:calc(10px * var(--uiScale))}
.section{display:none}
.section.show{display:block}
.card,.up,.mile,.prestige{border:1px solid rgba(221,240,212,.16);border-radius:calc(10px * var(--uiScale));background:linear-gradient(rgba(24,32,25,.80),rgba(11,16,12,.70));padding:calc(9px * var(--uiScale));margin-bottom:calc(8px * var(--uiScale))}
.toolbar{display:grid;grid-template-columns:1fr auto;gap:calc(6px * var(--uiScale));margin-bottom:calc(8px * var(--uiScale))}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(4px * var(--uiScale))}
.buymodes{display:flex;gap:calc(4px * var(--uiScale))}
.cats .mode,.buymodes .mode{padding:calc(6px * var(--uiScale)) calc(6px * var(--uiScale));font-size:calc(10px * var(--uiScale))}
.upgrid{display:grid;grid-template-columns:1fr 1fr;gap:calc(7px * var(--uiScale))}
.up{margin:0;min-height:154px;display:flex;flex-direction:column}
.up.locked{opacity:.58;filter:saturate(.25)}
.up.maxed{border-color:var(--gr)}
.un{font-size:calc(14px * var(--uiScale));font-weight:900}
.ul{color:var(--go);font-size:calc(10px * var(--uiScale));margin-top:calc(2px * var(--uiScale))}
.ud{color:var(--mu);font-size:calc(11px * var(--uiScale));line-height:1.35;margin:calc(6px * var(--uiScale)) 0;flex:1}
.ue{color:#c1e3eb;font-size:calc(11px * var(--uiScale));margin-bottom:calc(5px * var(--uiScale))}
.uc{color:var(--go);font-weight:800;font-size:calc(11px * var(--uiScale));margin-bottom:calc(5px * var(--uiScale))}
.buy{width:100%;padding:calc(7px * var(--uiScale));font-weight:900}
.buy.ok{color:#fff0b6;border-color:var(--go)}
.lock{border:1px dashed #59686e;color:#aab5b8;border-radius:calc(6px * var(--uiScale));padding:calc(7px * var(--uiScale));text-align:center;font-size:calc(10px * var(--uiScale))}
.prestige{border-color:#7d6192;background:linear-gradient(rgba(52,41,62,.84),rgba(27,21,31,.76))}
.prestige p{color:#cabbd0;font-size:calc(11px * var(--uiScale));line-height:1.45}
#prestige{width:100%;border:1px solid #ae84c7;background:linear-gradient(#704f82,#463150);color:#f1e3f7;border-radius:calc(8px * var(--uiScale));padding:calc(10px * var(--uiScale));font-weight:900}
.stats,.info{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px * var(--uiScale))}
.log{min-height:calc(118px * var(--uiScale));border:1px solid #46565d;background:#070c0e;border-radius:calc(7px * var(--uiScale));padding:calc(8px * var(--uiScale));font-size:calc(11px * var(--uiScale));line-height:1.42}
.line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mile{display:grid;grid-template-columns:calc(24px * var(--uiScale)) 1fr auto;gap:calc(7px * var(--uiScale));align-items:center}
.mile.done{border-color:var(--gr)}
.mt{font-weight:850;font-size:calc(13px * var(--uiScale))}
.md{color:var(--mu);font-size:calc(10px * var(--uiScale))}
.toast{position:fixed;left:50%;bottom:calc(18px * var(--uiScale));transform:translateX(-50%) translateY(calc(28px * var(--uiScale)));opacity:0;pointer-events:none;border:1px solid var(--go);background:rgba(15,18,19,.97);color:var(--tx);border-radius:calc(8px * var(--uiScale));padding:calc(9px * var(--uiScale)) calc(14px * var(--uiScale));transition:.16s ease;z-index:30}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;z-index:40;display:none;place-items:center;padding:calc(18px * var(--uiScale));background:rgba(0,0,0,.76)}
.modal.show{display:grid}
.mcard{width:min(calc(620px * var(--uiScale)),100%);padding:calc(14px * var(--uiScale))}
.mcard h3{margin:0 0 8px}
textarea{width:100%;min-height:calc(170px * var(--uiScale));resize:vertical;background:#080c0e;color:var(--tx);border:1px solid var(--ln);border-radius:calc(7px * var(--uiScale));padding:calc(8px * var(--uiScale))}
.ma{display:flex;justify-content:flex-end;gap:calc(6px * var(--uiScale));margin-top:calc(8px * var(--uiScale))}
@media(max-width:1320px){.top{grid-template-columns:minmax(190px,1.2fr) repeat(3,minmax(90px,.68fr)) minmax(230px,1fr)}.optional{display:none}.main{grid-template-columns:minmax(0,1fr) 212px}.overlay{left:70px;right:228px}}
@media(max-width:1080px){html,body{overflow:auto}.app{height:auto;min-height:100vh}.top{grid-template-columns:1fr 1fr}.brand,.actions{grid-column:1/-1}.main{min-height:980px;grid-template-columns:1fr}.betpanel{height:auto}.overlay{left:60px;right:60px;top:120px;bottom:210px}.head{grid-template-columns:1fr}.head-nav{justify-content:start}}

/* === Seaside cabinet restyle === */
:root{
  --cabinetGreen:#243526;
  --cabinetGreen2:#162218;
  --cabinetBurgundy:#6a2624;
  --cabinetBurgundy2:#3e1717;
  --cabinetGold:#c59a4a;
  --cabinetGold2:#7f6025;
  --cabinetCream:#f2e3bd;
  --cabinetInk:#090c08;
}
html,body{
  background:
    radial-gradient(circle at 20% 0%, rgba(91,51,34,.28), transparent 30%),
    radial-gradient(circle at 80% 0%, rgba(73,89,46,.22), transparent 28%),
    linear-gradient(#132017,#070b08);
  color:var(--cabinetCream);
}
.box,.machine,.betpanel,.overlay,.mcard,
.horse-card,.slip-card,.reading-card,.card,.up,.mile,.prestige,.fbox{
  position:relative;
  border-color:var(--cabinetGold2) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 20%),
    linear-gradient(180deg, rgba(46,66,44,.98), rgba(20,30,21,.98)) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(251,229,166,.14),
    inset 0 0 0 calc(3px * var(--uiScale)) rgba(104,70,24,.92),
    inset 0 0 0 calc(5px * var(--uiScale)) rgba(28,39,24,.96),
    0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.35);
}
.box::before,.betpanel::before,.overlay::before,
.horse-card::before,.slip-card::before,.reading-card::before,
.card::before,.up::before,.prestige::before{
  content:"❦";
  position:absolute;
  top:calc(3px * var(--uiScale));
  left:calc(6px * var(--uiScale));
  font-size:calc(12px * var(--uiScale));
  color:rgba(234,202,121,.45);
  line-height:1;
  pointer-events:none;
}
.box::after,.betpanel::after,.overlay::after,
.horse-card::after,.slip-card::after,.reading-card::after,
.card::after,.up::after,.prestige::after{
  content:"❦";
  position:absolute;
  right:calc(6px * var(--uiScale));
  bottom:calc(3px * var(--uiScale));
  transform:rotate(180deg);
  font-size:calc(12px * var(--uiScale));
  color:rgba(234,202,121,.35);
  line-height:1;
  pointer-events:none;
}
.brand b,.head h2,.horse-card h3,.slip-card h3,.reading-card h3,.card h3,.prestige h3,.overlay-title{
  color:var(--cabinetCream) !important;
  text-shadow:
    0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.65),
    0 0 calc(4px * var(--uiScale)) rgba(0,0,0,.18);
  letter-spacing:.08em;
}
.brand small,.lab,.md,.ud{ color:#d3c3a0 !important; }

.head{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, var(--cabinetBurgundy), var(--cabinetBurgundy2)) !important;
  border-bottom-color:var(--cabinetGold) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(252,228,167,.16),
    inset 0 calc(-2px * var(--uiScale)) 0 rgba(58,17,16,.85);
}
.head-nav .tab,.tab,.btn,.buy,.mode,.mini{
  border-color:rgba(207,171,94,.82) !important;
  color:var(--cabinetCream) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #4f643f, #263522) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,239,193,.10),
    inset 0 calc(-1px * var(--uiScale)) 0 rgba(18,27,17,.8),
    0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.25);
  text-shadow:0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.6);
}
.types .mode.active,.tab.active,.mode.active,.buy.ok{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #8a6522, #5c4215) !important;
  color:#fff2cb !important;
  border-color:#e4c06d !important;
}
.start{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 25%),
    linear-gradient(180deg, #c59b40, #8e6318) !important;
  border-color:#f0d58a !important;
  color:#fff5d6 !important;
}
.panel-controls .btn{
  font-size:calc(10px * var(--uiScale)) !important;
  padding:calc(4px * var(--uiScale)) !important;
  min-height:calc(30px * var(--uiScale));
  line-height:1.1;
}
.panel-controls .start{
  font-size:calc(12px * var(--uiScale)) !important;
  min-height:calc(34px * var(--uiScale));
}
.read,.ibox,.stakeval,.log{
  border-color:rgba(201,159,77,.82) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(12,19,13,.95), rgba(6,10,6,.96)) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,227,154,.07);
}
.head-nav .tab{
  border-radius:calc(14px * var(--uiScale));
}
.overlay{
  background:
    linear-gradient(180deg, rgba(116,42,38,.96), rgba(92,31,30,.90) 48px, rgba(38,54,36,.97) 49px, rgba(19,28,20,.97)) !important;
  backdrop-filter:none !important;
}
.overlay-top{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #6f2a27, #431919) !important;
  border-bottom-color:#d0a85a !important;
}
.horse-card,.slip-card,.reading-card,.card,.up,.mile,.prestige{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #2e4330, #18231a) !important;
}
.fbox{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #213024, #111912) !important;
}
.horse{
  border-color:rgba(187,150,72,.65) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, rgba(36,51,35,.92), rgba(20,29,21,.92)) !important;
}
.horse.sel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #6f5420, #453113) !important;
}
.odds,.uc,.ul,.val,#prestige,.start,.buy{ text-shadow:0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.55); }
.meter{
  background:#0b110a !important;
  border-color:#8c6b30 !important;
}
.meter > div{
  background:linear-gradient(90deg,#90641d,#d4b463,#f0dd93) !important;
}


/* === Stronger seaside cabinet pass, with translucent overlays retained === */
:root{
  --cabinetBottle:#17351f;
  --cabinetBottleMid:#254a2d;
  --cabinetBottleDark:#0d1d11;
  --cabinetBurgundy:#702725;
  --cabinetBurgundyDark:#3e1415;
  --cabinetGold:#d0a85b;
  --cabinetGoldLight:#f0d78f;
  --cabinetCream:#f4e7c5;
}

/* Main painted cabinet surfaces */
.box,
.machine,
.betpanel,
.horse-card,
.slip-card,
.reading-card,
.card,
.up,
.mile,
.prestige,
.fbox{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 18%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, var(--cabinetBottleMid), var(--cabinetBottle) 54%, var(--cabinetBottleDark)) !important;
  border:calc(2px * var(--uiScale)) solid var(--cabinetGold) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,244,204,.28),
    inset 0 0 0 calc(4px * var(--uiScale)) rgba(95,66,24,.82),
    inset 0 0 0 calc(6px * var(--uiScale)) rgba(10,24,13,.94),
    0 calc(2px * var(--uiScale)) calc(5px * var(--uiScale)) rgba(0,0,0,.42) !important;
}

/* Stronger burgundy fascia */
.head{
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.03) 22%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #8b3733, var(--cabinetBurgundy), var(--cabinetBurgundyDark)) !important;
  border-bottom:calc(2px * var(--uiScale)) solid var(--cabinetGoldLight) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,241,198,.22),
    inset 0 calc(-3px * var(--uiScale)) 0 rgba(53,15,15,.8) !important;
}

/* Clearly painted signwritten labels */
.brand b,
.head h2,
.overlay-title,
.horse-card h3,
.slip-card h3,
.reading-card h3,
.card h3,
.prestige h3{
  color:var(--cabinetCream) !important;
  text-shadow:
    0 calc(2px * var(--uiScale)) 0 rgba(0,0,0,.72),
    calc(1px * var(--uiScale)) 0 0 rgba(112,45,30,.5),
    0 0 calc(4px * var(--uiScale)) rgba(255,235,175,.12) !important;
  letter-spacing:.10em !important;
}

/* Obvious gold beading on smaller panels */
.read,
.ibox,
.stakeval,
.log,
.horse{
  border:calc(1.5px * var(--uiScale)) solid #b88c3f !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,239,190,.15),
    0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.28) !important;
}

/* Painted gloss buttons, still compact */
.btn,
.tab,
.mode,
.buy,
.mini{
  background:
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.04) 28%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #426447, #29412e 60%, #17271b) !important;
  border:calc(1.5px * var(--uiScale)) solid #c29b50 !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,241,202,.13),
    inset 0 calc(-2px * var(--uiScale)) 0 rgba(8,18,10,.62),
    0 calc(1px * var(--uiScale)) calc(2px * var(--uiScale)) rgba(0,0,0,.3) !important;
  color:#f7ebcd !important;
}

/* Active controls in burgundy rather than modern amber */
.types .mode.active,
.tab.active,
.mode.active,
.buy.ok{
  background:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.03) 28%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #8b3935, #672522 60%, #3b1516) !important;
  border-color:var(--cabinetGoldLight) !important;
  color:#fff4d6 !important;
}

/* Start race as the showpiece brass/gold control */
.start{
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.07) 28%, rgba(255,255,255,0) 40%),
    linear-gradient(180deg, #d7b45d, #a77a26 60%, #755016) !important;
  border-color:#f5dea0 !important;
  color:#fff8df !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,249,223,.4),
    inset 0 calc(-3px * var(--uiScale)) 0 rgba(91,54,9,.6),
    0 calc(2px * var(--uiScale)) calc(4px * var(--uiScale)) rgba(0,0,0,.35) !important;
}

/* Compact auto and speed controls */
.panel-controls .btn{
  font-size:calc(9px * var(--uiScale)) !important;
  min-height:calc(27px * var(--uiScale)) !important;
  padding:calc(3px * var(--uiScale)) calc(4px * var(--uiScale)) !important;
}
.panel-controls .start{
  font-size:calc(11px * var(--uiScale)) !important;
  min-height:calc(31px * var(--uiScale)) !important;
  padding:calc(5px * var(--uiScale)) !important;
}

/* More obvious signwriter corner ornament */
.box::before,
.betpanel::before,
.horse-card::before,
.slip-card::before,
.reading-card::before,
.card::before,
.up::before,
.prestige::before{
  content:"❧" !important;
  color:#d8b66e !important;
  opacity:.75 !important;
  font-size:calc(15px * var(--uiScale)) !important;
}
.box::after,
.betpanel::after,
.horse-card::after,
.slip-card::after,
.reading-card::after,
.card::after,
.up::after,
.prestige::after{
  content:"❧" !important;
  color:#d8b66e !important;
  opacity:.6 !important;
  font-size:calc(15px * var(--uiScale)) !important;
}

/* The overlay remains translucent, but now clearly belongs to the cabinet */
.overlay{
  background:
    linear-gradient(180deg, rgba(135,48,45,.86), rgba(91,31,30,.82) calc(44px * var(--uiScale)),
    rgba(28,63,35,.80) calc(44px * var(--uiScale)),
    rgba(12,28,16,.76)) !important;
  backdrop-filter:blur(calc(6px * var(--uiScale))) saturate(.9) !important;
  border:calc(2px * var(--uiScale)) solid var(--cabinetGold) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,242,200,.22),
    inset 0 0 0 calc(5px * var(--uiScale)) rgba(86,61,23,.72),
    0 calc(8px * var(--uiScale)) calc(22px * var(--uiScale)) rgba(0,0,0,.45) !important;
}
.overlay-top{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02) 28%),
    linear-gradient(180deg, rgba(128,43,41,.92), rgba(72,23,23,.88)) !important;
  border-bottom:calc(2px * var(--uiScale)) solid var(--cabinetGoldLight) !important;
}
.overlay .card,
.overlay .up,
.overlay .prestige,
.overlay .mile{
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.02) 18%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, rgba(50,78,53,.78), rgba(20,35,23,.74)) !important;
}

/* Slightly warmer body and track surround */
.race{
  background:
    linear-gradient(180deg, #1d2f1e, #0d170e) !important;
}
.race canvas{
  border:calc(2px * var(--uiScale)) solid #b88c3f !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,237,180,.16),
    0 calc(2px * var(--uiScale)) calc(5px * var(--uiScale)) rgba(0,0,0,.32) !important;
}


/* === Window-outline flourish framing pass === */
.frame-panel,
.box,
.machine,
.betpanel,
.overlay,
.horse-card,
.slip-card,
.reading-card,
.card,
.up,
.prestige,
.mcard {
  position: relative;
  overflow: visible;
}

.box::before,
.machine::before,
.betpanel::before,
.overlay::before,
.horse-card::before,
.slip-card::before,
.reading-card::before,
.card::before,
.up::before,
.prestige::before,
.mcard::before {
  content: "";
  position: absolute;
  inset: calc(5px * var(--uiScale));
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%2080%22%3E%0A%20%20%3Cpath%20fill%3D%22%23d5b469%22%20d%3D%22M8%2040c10-8%2018-18%2034-18%2014%200%2026%208%2040%2020%2010%208%2018%2012%2028%2012%2010%200%2018-4%2028-12%2014-12%2026-20%2040-20%2016%200%2024%2010%2034%2018-8%208-16%2018-34%2018-14%200-26-8-40-20-10-8-18-12-28-12-10%200-18%204-28%2012-14%2012-26%2020-40%2020-18%200-26-10-34-18z%22/%3E%0A%20%20%3Cpath%20fill%3D%22%23f3e3b8%22%20d%3D%22M20%2040c10-2%2018-8%2026-18-2%2014-6%2022-14%2030%208%200%2018-4%2028-16%2010-12%2018-18%2030-18%2012%200%2020%206%2030%2018%2010%2012%2020%2016%2028%2016-8-8-12-16-14-30%208%2010%2016%2016%2026%2018-8%204-14%2010-18%2018%2012-2%2024-8%2034-20-4%2016-14%2028-28%2034-16%206-30%200-44-12-8-8-14-10-20-10s-12%202-20%2010c-14%2012-28%2018-44%2012-14-6-24-18-28-34%2010%2012%2022%2018%2034%2020-4-8-10-14-18-18z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%228%22%20fill%3D%22%238a6524%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%224%22%20fill%3D%22%23f7eac8%22/%3E%0A%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%2080%22%3E%0A%20%20%3Cpath%20fill%3D%22%23d5b469%22%20d%3D%22M8%2040c10-8%2018-18%2034-18%2014%200%2026%208%2040%2020%2010%208%2018%2012%2028%2012%2010%200%2018-4%2028-12%2014-12%2026-20%2040-20%2016%200%2024%2010%2034%2018-8%208-16%2018-34%2018-14%200-26-8-40-20-10-8-18-12-28-12-10%200-18%204-28%2012-14%2012-26%2020-40%2020-18%200-26-10-34-18z%22/%3E%0A%20%20%3Cpath%20fill%3D%22%23f3e3b8%22%20d%3D%22M20%2040c10-2%2018-8%2026-18-2%2014-6%2022-14%2030%208%200%2018-4%2028-16%2010-12%2018-18%2030-18%2012%200%2020%206%2030%2018%2010%2012%2020%2016%2028%2016-8-8-12-16-14-30%208%2010%2016%2016%2026%2018-8%204-14%2010-18%2018%2012-2%2024-8%2034-20-4%2016-14%2028-28%2034-16%206-30%200-44-12-8-8-14-10-20-10s-12%202-20%2010c-14%2012-28%2018-44%2012-14-6-24-18-28-34%2010%2012%2022%2018%2034%2020-4-8-10-14-18-18z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%228%22%20fill%3D%22%238a6524%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%224%22%20fill%3D%22%23f7eac8%22/%3E%0A%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%2080%22%3E%0A%20%20%3Cpath%20fill%3D%22%23d5b469%22%20d%3D%22M8%2040c10-8%2018-18%2034-18%2014%200%2026%208%2040%2020%2010%208%2018%2012%2028%2012%2010%200%2018-4%2028-12%2014-12%2026-20%2040-20%2016%200%2024%2010%2034%2018-8%208-16%2018-34%2018-14%200-26-8-40-20-10-8-18-12-28-12-10%200-18%204-28%2012-14%2012-26%2020-40%2020-18%200-26-10-34-18z%22/%3E%0A%20%20%3Cpath%20fill%3D%22%23f3e3b8%22%20d%3D%22M20%2040c10-2%2018-8%2026-18-2%2014-6%2022-14%2030%208%200%2018-4%2028-16%2010-12%2018-18%2030-18%2012%200%2020%206%2030%2018%2010%2012%2020%2016%2028%2016-8-8-12-16-14-30%208%2010%2016%2016%2026%2018-8%204-14%2010-18%2018%2012-2%2024-8%2034-20-4%2016-14%2028-28%2034-16%206-30%200-44-12-8-8-14-10-20-10s-12%202-20%2010c-14%2012-28%2018-44%2012-14-6-24-18-28-34%2010%2012%2022%2018%2034%2020-4-8-10-14-18-18z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%228%22%20fill%3D%22%238a6524%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%224%22%20fill%3D%22%23f7eac8%22/%3E%0A%3C/svg%3E"),
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%2080%22%3E%0A%20%20%3Cpath%20fill%3D%22%23d5b469%22%20d%3D%22M8%2040c10-8%2018-18%2034-18%2014%200%2026%208%2040%2020%2010%208%2018%2012%2028%2012%2010%200%2018-4%2028-12%2014-12%2026-20%2040-20%2016%200%2024%2010%2034%2018-8%208-16%2018-34%2018-14%200-26-8-40-20-10-8-18-12-28-12-10%200-18%204-28%2012-14%2012-26%2020-40%2020-18%200-26-10-34-18z%22/%3E%0A%20%20%3Cpath%20fill%3D%22%23f3e3b8%22%20d%3D%22M20%2040c10-2%2018-8%2026-18-2%2014-6%2022-14%2030%208%200%2018-4%2028-16%2010-12%2018-18%2030-18%2012%200%2020%206%2030%2018%2010%2012%2020%2016%2028%2016-8-8-12-16-14-30%208%2010%2016%2016%2026%2018-8%204-14%2010-18%2018%2012-2%2024-8%2034-20-4%2016-14%2028-28%2034-16%206-30%200-44-12-8-8-14-10-20-10s-12%202-20%2010c-14%2012-28%2018-44%2012-14-6-24-18-28-34%2010%2012%2022%2018%2034%2020-4-8-10-14-18-18z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%228%22%20fill%3D%22%238a6524%22/%3E%0A%20%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2240%22%20r%3D%224%22%20fill%3D%22%23f7eac8%22/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-size:
    calc(86px * var(--uiScale)) auto,
    calc(86px * var(--uiScale)) auto,
    calc(86px * var(--uiScale)) auto,
    calc(86px * var(--uiScale)) auto;
  background-position:
    left top,
    right top,
    left bottom,
    right bottom;
  transform: none;
  opacity: .9;
  filter: drop-shadow(0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.35));
}

.box::after,
.machine::after,
.betpanel::after,
.overlay::after,
.horse-card::after,
.slip-card::after,
.reading-card::after,
.card::after,
.up::after,
.prestige::after,
.mcard::after {
  content: "";
  position: absolute;
  inset: calc(7px * var(--uiScale));
  pointer-events: none;
  z-index: 0;
  border: calc(1px * var(--uiScale)) solid rgba(243, 224, 176, .32);
  box-shadow:
    inset 0 0 0 calc(2px * var(--uiScale)) rgba(98, 70, 25, .9),
    inset 0 0 0 calc(4px * var(--uiScale)) rgba(10, 24, 13, .92);
  border-radius: calc(10px * var(--uiScale));
}

.box > *,
.machine > *,
.betpanel > *,
.overlay > *,
.horse-card > *,
.slip-card > *,
.reading-card > *,
.card > *,
.up > *,
.prestige > *,
.mcard > * {
  position: relative;
  z-index: 1;
}

.head h2::before,
.head h2::after,
.overlay-title::before,
.overlay-title::after,
.horse-card h3::before,
.horse-card h3::after,
.slip-card h3::before,
.slip-card h3::after,
.reading-card h3::before,
.reading-card h3::after,
.card h3::before,
.card h3::after,
.prestige h3::before,
.prestige h3::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: calc(48px * var(--uiScale));
  height: calc(14px * var(--uiScale));
  background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20320%2060%22%3E%0A%20%20%3Cpath%20fill%3D%22%23d5b469%22%20d%3D%22M10%2030c12-10%2022-20%2044-20%2020%200%2034%208%2054%2020%2016%2010%2028%2014%2052%2014%2024%200%2036-4%2052-14%2020-12%2034-20%2054-20%2022%200%2032%2010%2044%2020-10%2010-20%2020-44%2020-20%200-34-8-54-20-16-10-28-14-52-14-24%200-36%204-52%2014-20%2012-34%2020-54%2020-24%200-34-10-44-20z%22/%3E%0A%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2230%22%20r%3D%227%22%20fill%3D%22%23f6e4bc%22/%3E%0A%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2230%22%20r%3D%223.8%22%20fill%3D%22%238a6524%22/%3E%0A%3C/svg%3E") center / contain no-repeat;
  opacity: .9;
  margin: 0 calc(8px * var(--uiScale));
}

.head h2,
.overlay-title,
.horse-card h3,
.slip-card h3,
.reading-card h3,
.card h3,
.prestige h3 {
  text-align: center;
}

.machine::before,
.machine::after {
  inset: calc(10px * var(--uiScale));
}

.betpanel::before,
.betpanel::after {
  inset: calc(6px * var(--uiScale));
}

.overlay::before,
.overlay::after {
  inset: calc(8px * var(--uiScale));
}


/* === Remove flourish ornaments again === */
.box::before,
.machine::before,
.betpanel::before,
.overlay::before,
.horse-card::before,
.slip-card::before,
.reading-card::before,
.card::before,
.up::before,
.prestige::before,
.mcard::before,
.box::after,
.machine::after,
.betpanel::after,
.overlay::after,
.horse-card::after,
.slip-card::after,
.reading-card::after,
.card::after,
.up::after,
.prestige::after,
.mcard::after,
.head h2::before,
.head h2::after,
.overlay-title::before,
.overlay-title::after,
.horse-card h3::before,
.horse-card h3::after,
.slip-card h3::before,
.slip-card h3::after,
.reading-card h3::before,
.reading-card h3::after,
.card h3::before,
.card h3::after,
.prestige h3::before,
.prestige h3::after{
  content:none !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
}

/* Static course canvas below the transparent moving-horse canvas. */
.race{
  display:grid !important;
  place-items:center;
}
.race canvas{
  grid-area:1 / 1;
}
.race #cv{
  border-color:transparent !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* === Viewport fitting pass ===
   The UI chrome keeps using --uiScale, while the 1200 x 720 race canvases
   are fitted independently to the exact space left inside .race. */
html,
body,
.app,
.main,
.machine,
.betpanel,
.race,
.horse-card,
.horses{
  min-width:0;
  min-height:0;
}

.app{
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.main{
  height:100%;
  overflow:hidden;
}

.machine,
.betpanel{
  max-height:100%;
  overflow:hidden;
}

.race{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.race canvas{
  width:var(--courseDisplayWidth, 100%);
  height:var(--courseDisplayHeight, auto);
  max-width:none;
  max-height:none;
  aspect-ratio:auto;
  flex:none;
}

.betpanel{
  grid-template-rows:max-content max-content max-content minmax(0,1fr) max-content;
}

.horse-card{
  overflow:hidden;
}

.horses{
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* Keep the desktop cabinet layout intact at narrower desktop widths instead
   of switching to the old 980px-tall stacked layout. */
@media (max-width:1080px) and (min-width:821px){
  html,
  body{
    overflow:hidden !important;
  }

  .app{
    height:100vh !important;
    height:100dvh !important;
    min-height:0 !important;
  }

  .top{
    grid-template-columns:minmax(160px,1.2fr) repeat(3,minmax(72px,.68fr)) minmax(180px,1fr) !important;
  }

  .brand,
  .actions{
    grid-column:auto !important;
  }

  .main{
    min-height:0 !important;
    grid-template-columns:minmax(0,1fr) clamp(188px,22vw,212px) !important;
  }

  .betpanel{
    height:100% !important;
  }

  .head{
    grid-template-columns:auto 1fr auto !important;
  }

  .head-nav{
    justify-content:center !important;
  }
}

/* === Typography and single-line readout pass ===
   Use the width of compact information panels instead of forcing their
   labels and values onto separate lines. */
.stat,
.read,
.fbox{
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:flex-start;
  gap:.32em;
  white-space:nowrap;
}

.stat .lab,
.read .lab,
.fbox .lab{
  flex:0 0 auto;
  text-transform:none;
  letter-spacing:.025em;
  font-weight:800;
  line-height:1;
  color:var(--cabinetCream) !important;
}

.stat .lab::after,
.read .lab::after,
.fbox .lab::after{
  content:":";
}

.stat .val,
.read .val,
.fbox .val{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1;
}

.stat{
  padding:calc(4px * var(--uiScale)) calc(9px * var(--uiScale));
}

.stat .lab,
.stat .val{
  font-size:clamp(11.5px, calc(13.5px * var(--uiScale)), 15px);
}

.stat .val{
  color:#fff0bf;
}

.read{
  padding:calc(5px * var(--uiScale)) calc(7px * var(--uiScale));
}

.read .lab{
  font-size:clamp(10px, calc(10.8px * var(--uiScale)), 12px);
}

.read .val{
  font-size:clamp(10.5px, calc(12px * var(--uiScale)), 13px);
}

.fbox{
  padding:calc(4px * var(--uiScale)) calc(8px * var(--uiScale));
}

.fbox .lab{
  font-size:clamp(9.5px, calc(10.5px * var(--uiScale)), 11.5px);
}

.fbox .val{
  font-size:clamp(10.5px, calc(11.8px * var(--uiScale)), 13px);
}

/* Give controls the typography their available space can support. */
.head h2{
  font-size:clamp(11px, calc(13px * var(--uiScale)), 15px);
}

.head-nav .tab{
  font-size:clamp(10.5px, calc(11px * var(--uiScale)), 12px);
  font-weight:850;
}

.panel-controls .btn{
  font-size:clamp(10.5px, calc(11px * var(--uiScale)), 12px) !important;
  font-weight:800;
}

.panel-controls .start{
  font-size:clamp(12px, calc(12.8px * var(--uiScale)), 14px) !important;
}

.horse-card h3,
.slip-card h3,
.reading-card h3,
.card h3,
.prestige h3{
  font-size:clamp(11px, calc(12.5px * var(--uiScale)), 14px);
}

.types .mode{
  font-size:clamp(10.5px, calc(11px * var(--uiScale)), 12px);
  font-weight:850;
}

.quickstakes .mode,
.stakes .mode{
  font-size:clamp(10px, calc(10.5px * var(--uiScale)), 11px);
  font-weight:800;
}

.hname,
.odds{
  font-size:clamp(10.5px, calc(11.8px * var(--uiScale)), 13px);
}

.hname{
  font-weight:900;
}

.ibox .lab{
  font-size:clamp(8.5px, calc(9px * var(--uiScale)), 10px);
  letter-spacing:.06em;
}

.ibox .val{
  font-size:clamp(10px, calc(11px * var(--uiScale)), 12px);
}

.meterh{
  font-size:clamp(8.5px, calc(9.5px * var(--uiScale)), 10.5px);
}

@media (max-width:900px){
  .stat .lab,
  .stat .val{
    font-size:clamp(10px, calc(12px * var(--uiScale)), 13px);
  }
}


/* Preserve the compact top-bar variant after the later flex overrides. */
@media (max-width:1320px){
  .optional{display:none !important;}
}

/* === Unified top fascia and hidden maintenance panel === */
.app{
  grid-template-rows:calc(48px * var(--uiScale)) minmax(0,1fr) !important;
}

.top{
  min-width:0;
  display:grid !important;
  grid-template-columns:
    minmax(calc(170px * var(--uiScale)), .9fr)
    minmax(0, 2.7fr)
    auto
    minmax(calc(120px * var(--uiScale)), auto) !important;
  align-items:stretch;
  gap:0 !important;
  padding:calc(4px * var(--uiScale)) calc(6px * var(--uiScale)) !important;
  overflow:hidden;
}

.top .brand{
  min-width:0;
  padding:0 calc(12px * var(--uiScale));
  display:flex;
  align-items:center;
  border-right:calc(1px * var(--uiScale)) solid rgba(213,180,105,.6);
}

.top .brand b{
  font-size:clamp(15px, calc(18px * var(--uiScale)), 21px);
  line-height:1;
  white-space:nowrap;
}

.top-stats{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

.top-stat{
  min-width:0;
  display:flex;
  align-items:center;
  gap:.34em;
  padding:0 calc(12px * var(--uiScale));
  border-right:calc(1px * var(--uiScale)) solid rgba(213,180,105,.46);
  white-space:nowrap;
}

.top-stat .lab,
.top-stat .val{
  font-size:clamp(12px, calc(14px * var(--uiScale)), 16px);
  line-height:1;
}

.top-stat .lab{
  flex:0 0 auto;
  text-transform:none;
  letter-spacing:.02em;
  font-weight:800;
  color:var(--cabinetCream) !important;
}

.top-stat .lab::after{content:":"}

.top-stat .val{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:900;
  color:#fff0bf;
}

.top .head-nav{
  display:grid !important;
  grid-template-columns:repeat(2,calc(104px * var(--uiScale))) !important;
  align-items:center;
  justify-content:center !important;
  gap:calc(5px * var(--uiScale));
  padding:0 calc(9px * var(--uiScale));
}

.top .head-nav .tab{
  min-height:calc(31px * var(--uiScale));
  padding:calc(5px * var(--uiScale)) calc(8px * var(--uiScale));
  font-size:clamp(11px, calc(12px * var(--uiScale)), 13px);
}

.top-status{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 calc(10px * var(--uiScale));
  border-left:calc(1px * var(--uiScale)) solid rgba(213,180,105,.46);
  font-size:clamp(13px, calc(16px * var(--uiScale)), 19px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff0d5;
}

.machine{
  grid-template-rows:minmax(0,1fr) calc(44px * var(--uiScale)) !important;
}

.overlay{
  top:calc(8px * var(--uiScale)) !important;
}

.dev-overlay{
  position:fixed;
  inset:0;
  z-index:45;
  display:none;
  place-items:center;
  padding:calc(18px * var(--uiScale));
  background:rgba(0,0,0,.68);
}

.dev-overlay.show{display:grid}

.dev-card{
  width:min(calc(520px * var(--uiScale)), 94vw);
  padding:calc(12px * var(--uiScale));
  border:calc(2px * var(--uiScale)) solid var(--cabinetGold);
  border-radius:calc(12px * var(--uiScale));
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 20%),
    linear-gradient(180deg, #2b432f, #132218);
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,244,204,.24),
    inset 0 0 0 calc(4px * var(--uiScale)) rgba(95,66,24,.75),
    0 calc(8px * var(--uiScale)) calc(24px * var(--uiScale)) rgba(0,0,0,.55);
}

.dev-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:calc(8px * var(--uiScale));
  margin-bottom:calc(10px * var(--uiScale));
}

.dev-head h3{
  margin:0;
  font-size:calc(17px * var(--uiScale));
  letter-spacing:.08em;
}

.dev-head .btn{
  min-width:calc(38px * var(--uiScale));
  padding:calc(6px * var(--uiScale));
}

.dev-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(8px * var(--uiScale));
}

.dev-actions .btn{
  min-height:calc(42px * var(--uiScale));
  font-size:calc(13px * var(--uiScale));
  font-weight:900;
}

.dev-actions .danger{
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #813733, #481918) !important;
}

.dev-card{
  max-height:90vh;
  overflow:auto;
}

.dev-section{
  margin-top:calc(10px * var(--uiScale));
  padding-top:calc(9px * var(--uiScale));
  border-top:1px solid rgba(208,168,91,.45);
}

.dev-section:first-of-type{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

.dev-section h4{
  margin:0 0 calc(7px * var(--uiScale));
  color:#f0dfb6;
  font-size:calc(11px * var(--uiScale));
  letter-spacing:.08em;
  text-transform:none;
}

.dev-actions-3{
  grid-template-columns:repeat(3,1fr) !important;
}

.dev-section .dev-actions .btn{
  min-height:calc(38px * var(--uiScale));
  font-size:calc(11px * var(--uiScale));
  padding:calc(6px * var(--uiScale));
}

.dev-hint{
  margin-top:calc(9px * var(--uiScale));
  text-align:center;
  color:#cdbf9d;
  font-size:calc(10px * var(--uiScale));
}

@media(max-width:1320px){
  .top{
    grid-template-columns:
      minmax(145px,.85fr)
      minmax(0,2.4fr)
      auto
      minmax(100px,auto) !important;
  }
  .top .head-nav{
    grid-template-columns:repeat(2,84px) !important;
    padding-inline:5px;
  }
  .top-stat{
    padding-inline:7px;
  }
}

@media(max-width:900px){
  .top-status{display:none}
  .top{
    grid-template-columns:minmax(135px,.8fr) minmax(0,2.5fr) auto !important;
  }
}

/* === Reclaimed race-stage space ===
   The race container is now the single wooden cabinet surround. The canvas
   itself is transparent, so the redundant second painted wooden box is gone. */
.race{
  background-image:
    linear-gradient(
      180deg,
      rgba(255,242,210,.075),
      rgba(255,255,255,0) 16%,
      rgba(0,0,0,.12) 74%,
      rgba(0,0,0,.28)
    ),
    linear-gradient(
      rgba(48,22,12,.10),
      rgba(19,8,4,.24)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(620px * var(--uiScale)) calc(620px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,234,190,.14),
    inset 0 calc(-5px * var(--uiScale)) calc(12px * var(--uiScale))
      rgba(8,3,1,.50),
    inset calc(5px * var(--uiScale)) 0 calc(12px * var(--uiScale))
      rgba(8,3,1,.28),
    inset calc(-5px * var(--uiScale)) 0 calc(12px * var(--uiScale))
      rgba(8,3,1,.28) !important;
}
.race canvas{
  background:transparent !important;
}

/* Keep the upgrades and records panel out of the normal grid layout.
   It overlays the machine area while leaving the betting sidebar and
   bottom result strip visible. */
.overlay{
  position:absolute !important;
  grid-column:1 / 2;
  grid-row:1 / 2;
  top:calc(8px * var(--uiScale)) !important;
  right:calc(8px * var(--uiScale)) !important;
  bottom:calc(50px * var(--uiScale)) !important;
  left:calc(8px * var(--uiScale)) !important;
  z-index:20;
  overflow:hidden !important;
}

/* Cabinet-styled scrollbar for upgrades and records. */
.overlay-body{
  scrollbar-width:thin;
  scrollbar-color:#9a7430 #132218;
  cursor:grab;
  user-select:none;
  touch-action:none;
}

.tree-viewport.dragging{
  cursor:grabbing;
}

.tree-viewport.dragging *{
  cursor:grabbing !important;
}

.overlay-body::-webkit-scrollbar{
  width:calc(10px * var(--uiScale));
}

.overlay-body::-webkit-scrollbar-track{
  background:
    linear-gradient(90deg,#0b150e,#1d3020);
  border-left:calc(1px * var(--uiScale)) solid #765823;
  box-shadow:
    inset calc(1px * var(--uiScale)) 0 0 rgba(255,235,177,.10);
}

.overlay-body::-webkit-scrollbar-thumb{
  min-height:calc(42px * var(--uiScale));
  border:calc(1px * var(--uiScale)) solid #d6ae58;
  border-radius:999px;
  background:
    linear-gradient(
      90deg,
      #5d4318,
      #b68a3c 45%,
      #d1aa5b 55%,
      #66491b
    );
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,241,194,.20),
    0 0 calc(2px * var(--uiScale)) rgba(0,0,0,.65);
}

.overlay-body::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(
      90deg,
      #715322,
      #c99d49 45%,
      #dfbd6d 55%,
      #795722
    );
}

.overlay-body::-webkit-scrollbar-button{
  width:0;
  height:0;
  display:none;
}

.overlay-body::-webkit-scrollbar-corner{
  background:#132218;
}

/* Rich mahogany and stronger transparency for upgrades and records. */
.overlay{
  background:rgba(8,27,15,.52) !important;
  backdrop-filter:blur(calc(3px * var(--uiScale))) saturate(.88) !important;
}

.overlay-top{
  min-height:calc(38px * var(--uiScale));
  padding:
    calc(4px * var(--uiScale))
    calc(8px * var(--uiScale));
  align-items:center;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.025) 28%,
      rgba(255,255,255,0) 40%
    ),
    linear-gradient(
      180deg,
      #704232,
      #4b2b20 58%,
      #28150f
    ) !important;
  border-bottom-color:#d0a85b !important;
}

.overlay-body{
  background:rgba(5,19,11,.30) !important;
}

.overlay .card,
.overlay .up,
.overlay .prestige,
.overlay .mile{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.08),
      rgba(255,255,255,.015) 22%,
      rgba(255,255,255,0) 34%
    ),
    linear-gradient(
      180deg,
      rgba(43,75,48,.58),
      rgba(16,35,20,.54)
    ) !important;
}

.overlay .log,
.overlay .ibox{
  background:rgba(4,13,8,.62) !important;
}

.top .tab.active,
.overlay .mode.active,
.overlay .buy.ok{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.14),
      rgba(255,255,255,.02) 28%,
      rgba(255,255,255,0) 40%
    ),
    linear-gradient(
      180deg,
      #704232,
      #4b2b20 60%,
      #28150f
    ) !important;
  border-color:#e0bd70 !important;
  color:#fff1d1 !important;
}

.overlay-close{
  align-self:center;
  justify-self:end;
  display:grid;
  place-items:center;
  width:calc(32px * var(--uiScale));
  height:calc(30px * var(--uiScale));
  min-width:0 !important;
  margin:0;
  padding:0 !important;
  line-height:1;
  transform:none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,0) 32%
    ),
    linear-gradient(
      180deg,
      #3d5b40,
      #1d3423
    ) !important;
  border-color:#d0a85b !important;
}

/* Polished mahogany overlay and more readable overlay typography. */
.overlay{
  background:
    radial-gradient(
      ellipse at 50% -18%,
      rgba(255,225,190,.055),
      rgba(255,225,190,0) 38%
    ),
    linear-gradient(
      180deg,
      rgba(61,34,26,.78),
      rgba(43,23,18,.74) 42%,
      rgba(24,12,9,.72)
    ) !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,232,196,.13),
    inset 0 calc(-3px * var(--uiScale)) calc(7px * var(--uiScale))
      rgba(7,3,2,.65),
    inset calc(3px * var(--uiScale)) 0 calc(8px * var(--uiScale))
      rgba(7,3,2,.42),
    inset calc(-3px * var(--uiScale)) 0 calc(8px * var(--uiScale))
      rgba(7,3,2,.42),
    0 calc(8px * var(--uiScale)) calc(22px * var(--uiScale))
      rgba(0,0,0,.46) !important;
}

.overlay-top{
  position:relative;
  padding-right:calc(48px * var(--uiScale)) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,238,211,.11),
      rgba(255,255,255,.018) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.18)
    ),
    linear-gradient(
      rgba(52,23,13,.08),
      rgba(20,8,4,.26)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(520px * var(--uiScale)) calc(520px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,236,205,.14),
    inset 0 calc(-3px * var(--uiScale)) calc(5px * var(--uiScale))
      rgba(12,5,3,.72);
}

.overlay-title{
  font-size:clamp(13px, calc(15px * var(--uiScale)), 17px) !important;
  line-height:1;
}

.overlay-close{
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  right:calc(7px * var(--uiScale)) !important;
  align-self:auto !important;
  justify-self:auto !important;
  margin-block:auto !important;
  transform:none !important;
  z-index:3;
  font-size:clamp(17px, calc(19px * var(--uiScale)), 21px) !important;
}

.overlay-body{
  background:
    linear-gradient(
      180deg,
      rgba(5,22,12,.34),
      rgba(2,13,7,.43)
    ) !important;
}

.overlay .up,
.overlay .card,
.overlay .mile,
.overlay .prestige{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.025) 17%,
      rgba(255,255,255,0) 31%
    ),
    radial-gradient(
      ellipse at 50% 0%,
      rgba(120,160,112,.10),
      rgba(120,160,112,0) 48%
    ),
    linear-gradient(
      180deg,
      rgba(46,80,51,.70),
      rgba(15,36,21,.65)
    ) !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(239,233,191,.16),
    inset 0 calc(-3px * var(--uiScale)) calc(7px * var(--uiScale))
      rgba(3,12,6,.52),
    0 calc(2px * var(--uiScale)) calc(4px * var(--uiScale))
      rgba(0,0,0,.30) !important;
}

.overlay .up{
  min-height:calc(128px * var(--uiScale));
  padding:calc(10px * var(--uiScale));
}

.overlay .upgrid{
  gap:calc(8px * var(--uiScale));
}

.overlay .up.locked{
  opacity:.78;
  filter:saturate(.55);
}

.overlay .cats .mode{
  min-height:calc(31px * var(--uiScale));
  font-size:clamp(11.5px, calc(13px * var(--uiScale)), 14px);
  font-weight:900;
}

.overlay .buymodes .mode{
  min-width:calc(38px * var(--uiScale));
  min-height:calc(31px * var(--uiScale));
  font-size:clamp(10.5px, calc(12px * var(--uiScale)), 13px);
  font-weight:900;
}

.overlay .un{
  font-size:clamp(15px, calc(17px * var(--uiScale)), 19px);
  line-height:1.1;
}

.overlay .ul{
  font-size:clamp(11px, calc(12.5px * var(--uiScale)), 14px);
  line-height:1.15;
}

.overlay .ud{
  margin:
    calc(7px * var(--uiScale))
    0;
  font-size:clamp(11.5px, calc(13.2px * var(--uiScale)), 14.5px);
  line-height:1.35;
}

.overlay .ue,
.overlay .uc{
  font-size:clamp(11.5px, calc(13px * var(--uiScale)), 14.5px);
  line-height:1.2;
}

.overlay .buy{
  min-height:calc(39px * var(--uiScale));
  padding:calc(7px * var(--uiScale));
  font-size:clamp(16px, calc(18px * var(--uiScale)), 20px);
}

.overlay .lock{
  padding:calc(7px * var(--uiScale));
  font-size:clamp(10.5px, calc(12px * var(--uiScale)), 13px);
  line-height:1.2;
}

.overlay .card h3{
  font-size:clamp(14px, calc(16px * var(--uiScale)), 18px);
}

.overlay .log{
  font-size:clamp(11.5px, calc(13px * var(--uiScale)), 14.5px);
  line-height:1.45;
}

.overlay .stats .ibox .lab{
  font-size:clamp(10px, calc(11.5px * var(--uiScale)), 13px);
}

.overlay .stats .ibox .val{
  font-size:clamp(12px, calc(14px * var(--uiScale)), 16px);
}

.overlay .mt{
  font-size:clamp(13px, calc(15px * var(--uiScale)), 17px);
}

.overlay .md{
  font-size:clamp(10.5px, calc(12px * var(--uiScale)), 13.5px);
  line-height:1.3;
}

.overlay .mile{
  font-size:clamp(13px, calc(15px * var(--uiScale)), 17px);
}

/* Experimental pass:
   Reuse darkwood.png across the green panes and controls, but tint it
   bottle-green so it reads as green-lacquered timber rather than brown wood.
   Leave the existing brown race surround and wood overlay header alone. */

/* Broad green panes */
.box,
.betpanel,
.horse-card,
.slip-card,
.reading-card,
.card,
.up,
.mile,
.prestige,
.fbox,
.read,
.ibox{
  background-color:#1c3825 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,245,214,.10),
      rgba(255,255,255,.018) 18%,
      rgba(255,255,255,0) 30%,
      rgba(0,0,0,.12) 78%,
      rgba(0,0,0,.22)
    ),
    linear-gradient(
      180deg,
      rgba(34,69,44,.56),
      rgba(14,29,18,.58)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(420px * var(--uiScale)) calc(420px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    luminosity !important;
}

/* Betting-panel controls:
   default to dark wood, with selected states switching to green.
   Leave START RACE alone as the primary gold action. */
.betpanel .btn:not(.start),
.betpanel .mode{
  background-color:#4a2c1d !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,241,207,.15),
      rgba(255,255,255,.022) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.14)
    ),
    linear-gradient(
      180deg,
      rgba(86,51,32,.36),
      rgba(33,18,11,.42)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    normal !important;
}

.betpanel .horse{
  background-color:#4a2c1d !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,241,207,.15),
      rgba(255,255,255,.022) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.14)
    ),
    linear-gradient(
      180deg,
      rgba(86,51,32,.36),
      rgba(33,18,11,.42)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    normal !important;
}

.betpanel .mode.active,
.betpanel .types .mode.active,
.betpanel .quickstakes .mode.active,
.betpanel .stakes .mode.active,
.betpanel .horse.sel{
  background-color:#5b2f25 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,239,214,.16),
      rgba(255,255,255,.024) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.16),
      rgba(74,24,17,.12)
    ),
    linear-gradient(
      180deg,
      rgba(116,63,48,.42),
      rgba(53,22,17,.44)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    normal !important;
  border-color:#e0bd70 !important;
}

.betpanel .horse.sel .hname,
.betpanel .horse.sel .odds,
.betpanel .mode.active,
.betpanel .types .mode.active,
.betpanel .quickstakes .mode.active,
.betpanel .stakes .mode.active{
  color:#fff1d1 !important;
}

/* Unified button pass:
   brown wood by default across the app
   reddish wood for clearly active or selected buttons
   leave START RACE gold */

/* Default button surfaces */
.btn:not(.start),
.tab,
.mode,
.buy,
.horse{
  background-color:#4a2c1d !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,241,207,.16),
      rgba(255,255,255,.024) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.14)
    ),
    linear-gradient(
      180deg,
      rgba(90,54,34,.36),
      rgba(36,19,12,.44)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    normal !important;
  color:#fff0cf !important;
}

/* Stronger reddish selected state, based on the Affinity test */
.tab.active,
.mode.active,
.types .mode.active,
.quickstakes .mode.active,
.stakes .mode.active,
.overlay .cats .mode.active,
.overlay .buymodes .mode.active,
.horse.sel,
.buy.ok{
  background-color:#791523 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,228,219,.18),
      rgba(255,255,255,.028) 22%,
      rgba(255,255,255,0) 36%,
      rgba(32,0,0,.12) 74%,
      rgba(0,0,0,.16)
    ),
    linear-gradient(
      180deg,
      rgba(183,34,60,.36),
      rgba(104,11,29,.40) 42%,
      rgba(55,5,14,.46)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    normal !important;
  border-color:#f0ca74 !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,232,220,.18),
    0 0 calc(4px * var(--uiScale)) rgba(90,8,24,.22) !important;
  color:#fff4df !important;
}

.horse.sel .hname,
.horse.sel .odds,
.tab.active,
.mode.active,
.buy.ok{
  color:#fff4df !important;
}

/* Corrected unified button materials.
   Normal controls are brown wood. Active selections are deep crimson wood. */
button.btn:not(.start):not(.overlay-close),
.top .head-nav button.tab,
.overlay button.mode,
.overlay button.buy,
.overlay button.buy.ok,
.betpanel button.mode,
.betpanel button.horse{
  background-color:#4a2b1c !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,239,204,.14),
      rgba(255,255,255,.018) 23%,
      rgba(255,255,255,0) 37%,
      rgba(0,0,0,.17)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center !important;
  background-repeat:
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    normal !important;
  color:#fff0cf !important;
}

/* Active states deliberately use the wood texture only for luminosity.
   The crimson background supplies the colour, matching the Affinity test. */
.top .head-nav button.tab.active,
.overlay .cats button.mode.active,
.overlay .buymodes button.mode.active,
.betpanel .types button.mode.active,
.betpanel .quickstakes button.mode.active,
.betpanel .stakes button.mode.active,
.betpanel button.horse.sel{
  background-color:#56000f !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,210,204,.14),
      rgba(255,255,255,.018) 22%,
      rgba(255,255,255,0) 36%,
      rgba(35,0,8,.18) 72%,
      rgba(0,0,0,.24)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center !important;
  background-repeat:
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    luminosity !important;
  border-color:#f0ca74 !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,224,216,.18),
    inset 0 calc(-2px * var(--uiScale)) calc(4px * var(--uiScale))
      rgba(28,0,7,.48),
    0 0 calc(3px * var(--uiScale)) rgba(88,0,18,.25) !important;
  color:#fff4df !important;
}

.betpanel button.horse.sel .hname,
.betpanel button.horse.sel .odds{
  color:#fff4df !important;
}

/* Overlay cards get the same treatment, but keep their translucency */
.overlay .card,
.overlay .up,
.overlay .mile,
.overlay .prestige{
  background-color:rgba(25,52,33,.78) !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,245,214,.12),
      rgba(255,255,255,.02) 18%,
      rgba(255,255,255,0) 30%,
      rgba(0,0,0,.12) 78%,
      rgba(0,0,0,.22)
    ),
    linear-gradient(
      180deg,
      rgba(42,78,48,.50),
      rgba(14,29,18,.46)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(420px * var(--uiScale)) calc(420px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    luminosity !important;
}

/* Controls and smaller interactive elements */
.btn,
.tab,
.mode,
.buy,
.mini,
.stakeval,
.horse{
  background-color:#24432d !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,246,219,.13),
      rgba(255,255,255,.02) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.16)
    ),
    linear-gradient(
      180deg,
      rgba(47,84,53,.58),
      rgba(18,33,22,.60)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    luminosity !important;
}

/* Preserve the selected/active emphasis while still using the green wood tint */
.horse.sel,
.types .mode.active,
.tab.active,
.mode.active,
.buy.ok{
  background-image:
    linear-gradient(
      180deg,
      rgba(255,243,203,.18),
      rgba(255,255,255,.025) 24%,
      rgba(255,255,255,0) 38%,
      rgba(71,49,15,.20)
    ),
    linear-gradient(
      180deg,
      rgba(90,72,27,.42),
      rgba(35,28,11,.34)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    luminosity !important;
}


/* === Horse list clarity pass ===
   Use the generous row height more effectively with a larger silk,
   a larger horse name and explicit readable odds wording. */
.horse-card{
  padding-bottom:calc(5px * var(--uiScale));
}

.horses{
  gap:calc(6px * var(--uiScale));
  padding-right:calc(2px * var(--uiScale));
}

.horse{
  min-height:calc(68px * var(--uiScale));
  padding:calc(8px * var(--uiScale)) calc(10px * var(--uiScale));
  display:grid;
  grid-template-columns:calc(34px * var(--uiScale)) minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:calc(10px * var(--uiScale));
  row-gap:calc(3px * var(--uiScale));
}

.silk-icon{
  grid-column:1;
  grid-row:1 / span 2;
  width:calc(30px * var(--uiScale));
  height:calc(36px * var(--uiScale));
  justify-self:center;
  align-self:center;
}

.hname,
.odds{
  grid-column:2;
  min-width:0;
}

.hname{
  align-self:end;
  font-size:clamp(13px, calc(14.4px * var(--uiScale)), 16px);
  font-weight:900;
  line-height:1.05;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff1ce;
}

.odds{
  align-self:start;
  justify-self:end;
  text-align:right;
  font-size:clamp(11px, calc(12.2px * var(--uiScale)), 13.5px);
  line-height:1.05;
  color:#f0cf76;
  white-space:nowrap;
}

@media (max-width:900px){
  .horse{
    min-height:calc(62px * var(--uiScale));
    padding:calc(7px * var(--uiScale)) calc(8px * var(--uiScale));
    grid-template-columns:calc(31px * var(--uiScale)) minmax(0,1fr);
    column-gap:calc(8px * var(--uiScale));
  }

  .silk-icon{
    width:calc(27px * var(--uiScale));
    height:calc(33px * var(--uiScale));
  }

  .hname{
    font-size:clamp(12px, calc(13.2px * var(--uiScale)), 14px);
  }

  .odds{
    font-size:clamp(10.5px, calc(11.6px * var(--uiScale)), 12.5px);
  }
}


/* === Fixed six-horse rack ===
   There are always six runners, so use six equal slots and never show a
   scrollbar. The larger silk box is paired with an UI-only vertical
   correction in game.js. */
.horse-card{
  min-height:0;
  overflow:hidden;
}

.horses{
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:repeat(6,minmax(0,1fr));
  gap:calc(4px * var(--uiScale));
  padding-right:0;
  overflow:hidden !important;
}

.horse{
  min-height:0;
  height:100%;
  padding:calc(5px * var(--uiScale)) calc(9px * var(--uiScale));
  grid-template-columns:calc(42px * var(--uiScale)) minmax(0,1fr);
  column-gap:calc(9px * var(--uiScale));
  row-gap:calc(2px * var(--uiScale));
}

.silk-icon{
  width:calc(38px * var(--uiScale));
  height:calc(44px * var(--uiScale));
}

.hname{
  font-size:clamp(12.5px, calc(14px * var(--uiScale)), 15.5px);
}

.odds{
  font-size:clamp(10.5px, calc(11.8px * var(--uiScale)), 13px);
}

@media (max-height:760px){
  .horses{
    gap:calc(3px * var(--uiScale));
  }

  .horse{
    padding-block:calc(3px * var(--uiScale));
    grid-template-columns:calc(38px * var(--uiScale)) minmax(0,1fr);
    column-gap:calc(7px * var(--uiScale));
  }

  .silk-icon{
    width:calc(34px * var(--uiScale));
    height:calc(40px * var(--uiScale));
  }

  .hname{
    font-size:clamp(11.5px, calc(13px * var(--uiScale)), 14px);
  }

  .odds{
    font-size:clamp(10px, calc(11px * var(--uiScale)), 12px);
  }
}

/* START RACE is a prominent brown wooden control rather than a gold plaque. */
.betpanel .panel-controls button.start{
  background-color:#593522 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,241,210,.20),
      rgba(255,255,255,.025) 23%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.19)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    calc(240px * var(--uiScale)) calc(240px * var(--uiScale)) !important;
  background-position:
    center,
    center !important;
  background-repeat:
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    normal !important;
  border-color:#f0ca74 !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,238,204,.24),
    inset 0 calc(-2px * var(--uiScale)) calc(4px * var(--uiScale))
      rgba(24,10,5,.48),
    0 calc(1px * var(--uiScale)) calc(3px * var(--uiScale))
      rgba(0,0,0,.38) !important;
  color:#fff4dc !important;
  font-weight:950 !important;
}

.betpanel .panel-controls button.start:hover:not(:disabled),
.betpanel .panel-controls button.start:active:not(:disabled){
  background-color:#56000f !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,215,207,.16),
      rgba(255,255,255,.02) 22%,
      rgba(255,255,255,0) 36%,
      rgba(35,0,8,.20) 72%,
      rgba(0,0,0,.25)
    ),
    url("darkwood.png") !important;
  background-blend-mode:
    screen,
    luminosity !important;
  border-color:#f5d98e !important;
}

.betpanel .panel-controls button.start:active:not(:disabled){
  transform:translateY(calc(1px * var(--uiScale)));
  box-shadow:
    inset 0 calc(2px * var(--uiScale)) calc(5px * var(--uiScale))
      rgba(20,0,5,.60) !important;
}

.betpanel .panel-controls button.start:disabled{
  background-color:#2c211a !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,255,255,.045),
      rgba(0,0,0,.24)
    ),
    url("darkwood.png") !important;
  background-blend-mode:
    screen,
    luminosity !important;
  border-color:#816f49 !important;
  color:#9d947f !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) calc(3px * var(--uiScale))
      rgba(0,0,0,.45) !important;
}

/* Match the top navigation buttons to the less-rounded cabinet controls. */
.top .head-nav button.tab{
  border-radius:calc(7px * var(--uiScale)) !important;
}

/* Present the bottom statistics as one continuous fascia with dividers,
   rather than a row of separate rounded panels. */
.foot{
  gap:0 !important;
  padding:0 !important;
  overflow:hidden;
  border:calc(2px * var(--uiScale)) solid var(--cabinetGold) !important;
  border-radius:calc(8px * var(--uiScale));
  background-color:#1c3825 !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,245,214,.10),
      rgba(255,255,255,.018) 20%,
      rgba(255,255,255,0) 34%,
      rgba(0,0,0,.18)
    ),
    linear-gradient(
      180deg,
      rgba(34,69,44,.54),
      rgba(14,29,18,.58)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    100% 100%,
    calc(420px * var(--uiScale)) calc(420px * var(--uiScale)) !important;
  background-position:
    center,
    center,
    center !important;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat !important;
  background-blend-mode:
    screen,
    multiply,
    luminosity !important;
  box-shadow:
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,238,199,.15),
    inset 0 calc(-2px * var(--uiScale)) calc(5px * var(--uiScale))
      rgba(4,14,7,.48) !important;
}

.foot .fbox{
  min-width:0;
  height:100%;
  margin:0;
  padding:
    calc(5px * var(--uiScale))
    calc(10px * var(--uiScale));
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:.38em;
  border:0 !important;
  border-left:calc(1px * var(--uiScale)) solid rgba(208,168,91,.82) !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:
    inset calc(1px * var(--uiScale)) 0 0 rgba(255,238,190,.08) !important;
}

.foot .fbox:first-child{
  justify-content:flex-start;
  border-left:0 !important;
  box-shadow:none !important;
}

.foot .fbox .lab,
.foot .fbox .val{
  display:block;
  margin:0;
  padding:0;
  line-height:1.05;
  white-space:nowrap;
}

.foot .fbox .lab{
  flex:0 0 auto;
  font-size:clamp(11px, calc(12.5px * var(--uiScale)), 14px) !important;
  font-weight:850;
  letter-spacing:.015em;
}

.foot .fbox .val{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(12px, calc(14px * var(--uiScale)), 16px) !important;
  font-weight:900;
  color:#fff0c8 !important;
}

/* Click-to-start fullscreen gate. */
.start-gate{
  position:fixed;
  inset:0;
  z-index:1000;
  width:100%;
  height:100%;
  margin:0;
  padding:clamp(18px,4vw,64px);
  display:grid;
  place-items:center;
  appearance:none;
  border:0;
  border-radius:0;
  cursor:pointer;
  color:#f6e9c7;
  background-color:#1b0d08;
  background-image:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(255,228,184,.10),
      rgba(255,228,184,0) 42%
    ),
    linear-gradient(
      180deg,
      rgba(35,15,8,.18),
      rgba(8,3,2,.48)
    ),
    url("darkwood.png");
  background-size:
    100% 100%,
    100% 100%,
    min(72vw,900px) min(72vw,900px);
  background-position:center;
  background-repeat:no-repeat,no-repeat,repeat;
  text-align:center;
}

.start-gate[hidden]{
  display:none;
}

.start-gate-panel{
  width:min(680px,82vw);
  padding:
    clamp(26px,5vh,54px)
    clamp(28px,6vw,72px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(12px,2vh,22px);
  pointer-events:none;
  border:clamp(2px,.22vw,4px) solid #d0a85b;
  border-radius:clamp(10px,1vw,16px);
  background-color:#1c3825;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,245,214,.12),
      rgba(255,255,255,.018) 20%,
      rgba(255,255,255,0) 34%,
      rgba(0,0,0,.22)
    ),
    linear-gradient(
      180deg,
      rgba(34,69,44,.55),
      rgba(10,24,14,.66)
    ),
    url("darkwood.png");
  background-size:
    100% 100%,
    100% 100%,
    420px 420px;
  background-position:center;
  background-repeat:no-repeat,no-repeat,repeat;
  background-blend-mode:screen,multiply,luminosity;
  box-shadow:
    inset 0 0 0 1px rgba(255,241,199,.18),
    inset 0 0 0 5px rgba(86,59,22,.72),
    inset 0 -8px 18px rgba(3,10,5,.48),
    0 18px 48px rgba(0,0,0,.58);
}

.start-gate-title{
  font-size:clamp(30px,5vw,66px);
  line-height:1;
  letter-spacing:.13em;
  text-shadow:
    0 3px 0 rgba(0,0,0,.70),
    0 0 10px rgba(255,231,178,.10);
}

.start-gate-prompt{
  padding:
    clamp(10px,1.5vh,16px)
    clamp(22px,4vw,46px);
  border:2px solid #e3bd69;
  border-radius:calc(7px * var(--uiScale));
  background-color:#4a2b1c;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,239,204,.15),
      rgba(255,255,255,.018) 24%,
      rgba(255,255,255,0) 38%,
      rgba(0,0,0,.18)
    ),
    url("darkwood.png");
  background-size:100% 100%,220px 220px;
  background-position:center;
  background-repeat:no-repeat,repeat;
  font-size:clamp(16px,2.2vw,28px);
  font-weight:950;
  letter-spacing:.12em;
  box-shadow:
    inset 0 1px 0 rgba(255,238,202,.18),
    0 3px 8px rgba(0,0,0,.38);
}

.start-gate-hint{
  font-size:clamp(10px,1.1vw,14px);
  color:#cbbb96;
  letter-spacing:.05em;
}

.start-gate:hover .start-gate-prompt,
.start-gate:focus-visible .start-gate-prompt{
  border-color:#f4d88e;
  color:#fff7e2;
}

.start-gate:focus-visible{
  outline:0;
}

/* Mechanical Derby SVG title treatment.
   The SVG is used as a mask so its colour can follow the cabinet palette
   while retaining the negative horse-head cutout inside the D. */
.title-logo{
  display:block;
  flex:0 0 auto;
  color:transparent;
  background-repeat:no-repeat;
  background-position:center;
  -webkit-mask-image:url("title.svg");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-image:url("title.svg");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

.brand{
  min-width:0;
  align-items:center;
  justify-content:center;
}

.title-logo-header{
  height:calc(28px * var(--uiScale));
  width:auto;
  max-width:100%;
  aspect-ratio:1005 / 168;
  background:
    linear-gradient(
      180deg,
      #fff4d4 0%,
      #ead18d 52%,
      #c0933f 100%
    );
  filter:
    drop-shadow(0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.82));
}

.title-logo-gate{
  width:min(760px,74vw);
  height:auto;
  aspect-ratio:1005 / 168;
  background:
    linear-gradient(
      180deg,
      #fff8dc 0%,
      #efd58a 46%,
      #c38c2d 82%,
      #93621c 100%
    );
  filter:
    drop-shadow(0 3px 0 rgba(0,0,0,.72))
    drop-shadow(0 0 8px rgba(255,221,148,.12));
}

@media(max-width:900px){
  .title-logo-header{
    height:calc(24px * var(--uiScale));
  }
}

/* Use the Mechanical Derby SVG as a real image.
   This replaces the unreliable external SVG mask treatment. */
img.title-logo{
  display:block;
  flex:0 1 auto;
  object-fit:contain;
  object-position:center;
  max-width:100%;
  padding:0;
  border:0;
  background:none !important;
  -webkit-mask:none !important;
  mask:none !important;
  aspect-ratio:auto !important;
}

img.title-logo-header{
  width:auto;
  height:calc(44px * var(--uiScale));
  max-width:calc(100% - 12px);
  filter:
    brightness(0)
    saturate(100%)
    invert(88%)
    sepia(30%)
    saturate(720%)
    hue-rotate(351deg)
    brightness(101%)
    contrast(91%)
    drop-shadow(
      0
      calc(1px * var(--uiScale))
      0
      rgba(0,0,0,.82)
    ) !important;
}

img.title-logo-gate{
  width:min(760px,74vw);
  height:auto;
  filter:
    brightness(0)
    saturate(100%)
    invert(78%)
    sepia(54%)
    saturate(770%)
    hue-rotate(352deg)
    brightness(98%)
    contrast(91%)
    drop-shadow(0 3px 0 rgba(0,0,0,.72))
    drop-shadow(0 0 8px rgba(255,221,148,.12)) !important;
}

@media(max-width:900px){
  img.title-logo-header{
    height:calc(30px * var(--uiScale));
  }
}

/* === Expanding upgrade tree === */
.upgrade-tree-section{
  height:100%;
  min-height:0;
  display:none;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:calc(7px * var(--uiScale));
}

.upgrade-tree-section.show{
  display:grid;
}

.tree-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto auto;
  align-items:center;
  gap:calc(8px * var(--uiScale));
}

.tree-intro{
  min-width:0;
  color:#e1d3af;
  font-size:clamp(11px,calc(12.5px * var(--uiScale)),14px);
  line-height:1.3;
}

.tree-progress{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:calc(4px * var(--uiScale)) calc(9px * var(--uiScale));
  color:#d8c28d;
  font-size:clamp(9.5px,calc(10.5px * var(--uiScale)),12px);
  white-space:nowrap;
}

.tree-zoom{
  min-width:calc(52px * var(--uiScale));
  padding:calc(5px * var(--uiScale)) calc(8px * var(--uiScale));
  border:calc(1px * var(--uiScale)) solid rgba(211,174,94,.72);
  border-radius:calc(6px * var(--uiScale));
  color:#f0d48d;
  background:rgba(9,24,13,.62);
  text-align:center;
  font-size:clamp(10px,calc(11px * var(--uiScale)),12px);
  font-weight:900;
  line-height:1.2;
}

.tree-centre{
  min-height:calc(31px * var(--uiScale));
  padding:calc(5px * var(--uiScale)) calc(10px * var(--uiScale));
  font-size:clamp(10px,calc(11px * var(--uiScale)),12px);
  font-weight:900;
}

.tree-viewport{
  position:relative;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  border:calc(1px * var(--uiScale)) solid rgba(211,174,94,.72);
  border-radius:calc(8px * var(--uiScale));
  background:
    radial-gradient(circle at 50% 44%,rgba(80,118,75,.17),rgba(5,16,9,.12) 38%,rgba(2,8,4,.36) 82%),
    rgba(4,14,8,.35);
  box-shadow:
    inset 0 0 calc(22px * var(--uiScale)) rgba(0,0,0,.42),
    inset 0 calc(1px * var(--uiScale)) 0 rgba(255,239,193,.08);
  scrollbar-width:thin;
  scrollbar-color:#9a7430 #132218;
}

.tree-viewport::-webkit-scrollbar{
  width:calc(10px * var(--uiScale));
  height:calc(10px * var(--uiScale));
}

.tree-viewport::-webkit-scrollbar-track{
  background:#132218;
}

.tree-viewport::-webkit-scrollbar-thumb{
  border:calc(1px * var(--uiScale)) solid #d6ae58;
  border-radius:999px;
  background:linear-gradient(90deg,#5d4318,#b68a3c 45%,#d1aa5b 55%,#66491b);
}

.tree-world{
  position:relative;
  width:2850px;
  height:3100px;
  isolation:isolate;
}

.tree-stage{
  position:absolute;
  left:0;
  top:0;
  width:2850px;
  height:3100px;
  transform-origin:0 0;
}

.tree-lines,
.tree-nodes{
  position:absolute;
  inset:0;
  width:2850px;
  height:3100px;
}

.tree-lines{
  z-index:0;
  overflow:visible;
  pointer-events:none;
}

.tree-line{
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.tree-line.hinted{
  stroke:rgba(155,128,72,.25);
  stroke-dasharray:8 10;
}

.tree-line.available{
  stroke:rgba(220,181,91,.72);
  stroke-dasharray:12 7;
  filter:drop-shadow(0 0 2px rgba(230,188,94,.28));
}

.tree-line.purchased{
  stroke:#d5ad58;
  filter:drop-shadow(0 0 4px rgba(221,181,92,.42));
}

.tree-branch-label{
  position:absolute;
  z-index:1;
  color:rgba(231,207,151,.38);
  font-size:22px;
  font-weight:950;
  letter-spacing:.18em;
  pointer-events:none;
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}

.tree-branch-information{left:1060px;top:26px}
.tree-branch-nudge{left:24px;top:1080px;transform:rotate(-90deg)}
.tree-branch-betting{right:24px;top:1080px;transform:rotate(90deg)}
.tree-branch-automation{left:1030px;bottom:24px}

.tree-node{
  position:absolute;
  cursor:pointer;
  z-index:2;
  width:164px;
  min-height:76px;
  transform:translate(-50%,-50%);
  padding:9px 10px 8px;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  gap:3px;
  text-align:center;
  border:2px solid #ae8240 !important;
  border-radius:8px !important;
  color:#f5e7c5 !important;
  background-color:#45291b !important;
  background-image:
    linear-gradient(180deg,rgba(255,240,205,.13),rgba(255,255,255,.018) 25%,rgba(255,255,255,0) 42%,rgba(0,0,0,.18)),
    url("darkwood.png") !important;
  background-size:100% 100%,220px 220px !important;
  background-position:center !important;
  background-repeat:no-repeat,repeat !important;
  background-blend-mode:screen,normal !important;
  box-shadow:
    inset 0 1px 0 rgba(255,237,196,.16),
    inset 0 -3px 6px rgba(20,8,4,.38),
    0 4px 10px rgba(0,0,0,.42) !important;
}

.tree-node.gateway{
  box-shadow:
    inset 0 0 0 1px rgba(255,244,204,.18),
    0 0 0 3px rgba(122,40,38,.55),
    0 3px 8px rgba(0,0,0,.42) !important;
}

.tree-node.gamechanger{
  width:194px;
  min-height:94px;
  border-width:3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,237,196,.18),
    inset 0 -4px 8px rgba(20,8,4,.44),
    0 6px 15px rgba(0,0,0,.48) !important;
}

.tree-node.root{
  width:210px;
  min-height:100px;
  border-color:#efd17f !important;
  background-color:#173720 !important;
  background-image:
    linear-gradient(180deg,rgba(255,244,209,.15),rgba(255,255,255,.02) 24%,rgba(255,255,255,0) 40%,rgba(0,0,0,.20)),
    linear-gradient(rgba(28,70,39,.48),rgba(10,28,15,.58)),
    url("darkwood.png") !important;
  background-size:100% 100%,100% 100%,260px 260px !important;
  background-repeat:no-repeat,no-repeat,repeat !important;
  background-blend-mode:screen,multiply,luminosity !important;
}

.tree-node.hinted{
  opacity:.42;
  filter:saturate(.35);
  border-style:dashed !important;
}

.tree-node.available{
  border-color:#e1b65f !important;
  animation:treeReadyPulse 2.2s ease-in-out infinite;
}

.tree-node.purchased{
  background-color:#173720 !important;
  background-image:
    linear-gradient(180deg,rgba(255,244,209,.13),rgba(255,255,255,.018) 24%,rgba(255,255,255,0) 40%,rgba(0,0,0,.18)),
    linear-gradient(rgba(31,77,42,.52),rgba(11,31,17,.60)),
    url("darkwood.png") !important;
  background-size:100% 100%,100% 100%,220px 220px !important;
  background-repeat:no-repeat,no-repeat,repeat !important;
  background-blend-mode:screen,multiply,luminosity !important;
  border-color:#d4b064 !important;
}

.tree-node.selected{
  outline:3px solid rgba(246,214,139,.72);
  outline-offset:3px;
}

.tree-node.newly-purchased{
  animation:treeInstallFlash .65s ease-out;
}

.tree-node-name{
  font-size:14px;
  font-weight:950;
  line-height:1.08;
}

.tree-node.gamechanger .tree-node-name,
.tree-node.root .tree-node-name{
  font-size:16px;
}

.tree-node-short{
  color:#d4c29d;
  font-size:10.5px;
  line-height:1.15;
}

.tree-node-status{
  color:#efcb77;
  font-size:10px;
  font-weight:900;
  letter-spacing:.04em;
}

.tree-node.purchased .tree-node-status{
  color:#9ed6a8;
}

.tree-detail{
  min-height:calc(112px * var(--uiScale));
  padding:calc(10px * var(--uiScale)) calc(12px * var(--uiScale));
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(180px,.9fr) minmax(150px,.55fr);
  align-items:center;
  gap:calc(12px * var(--uiScale));
  border:calc(1.5px * var(--uiScale)) solid #c59a4a;
  border-radius:calc(8px * var(--uiScale));
  background-color:#173720;
  background-image:
    linear-gradient(180deg,rgba(255,244,209,.10),rgba(255,255,255,.015) 25%,rgba(255,255,255,0) 40%,rgba(0,0,0,.19)),
    linear-gradient(rgba(31,72,40,.56),rgba(10,27,15,.66)),
    url("darkwood.png");
  background-size:100% 100%,100% 100%,420px 420px;
  background-position:center;
  background-repeat:no-repeat,no-repeat,repeat;
  background-blend-mode:screen,multiply,luminosity;
  box-shadow:inset 0 1px 0 rgba(255,238,196,.13),0 3px 9px rgba(0,0,0,.34);
}

.tree-detail-copy{
  min-width:0;
}

.tree-detail-kicker{
  margin-bottom:3px;
  color:#d8b969;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
}

.tree-detail h3{
  margin:0 0 4px;
  color:#fff0c8;
  font-size:clamp(16px,calc(18px * var(--uiScale)),21px);
  line-height:1.1;
}

.tree-detail p{
  margin:0;
  color:#ddcfad;
  font-size:clamp(11px,calc(12.5px * var(--uiScale)),14px);
  line-height:1.35;
}

.tree-detail-effect{
  color:#b9d8c0;
  font-size:clamp(11px,calc(12.5px * var(--uiScale)),14px);
  line-height:1.35;
}


.perk-mark{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  color:#f0d58b;
  font-weight:900;
  cursor:help;
}

.perk-mark img{
  display:block;
  width:14px;
  height:14px;
  object-fit:contain;
}

.perk-mark-rough img{
  filter:none;
}

.perk-mark-value img{
  filter:none;
}

.tree-detail-action{
  min-width:0;
}

.tree-buy{
  width:100%;
  min-height:calc(42px * var(--uiScale));
  font-size:clamp(13px,calc(15px * var(--uiScale)),17px) !important;
}

.tree-installed,
.tree-requires{
  padding:calc(9px * var(--uiScale));
  border:1px solid #9f7a3c;
  border-radius:6px;
  text-align:center;
  font-size:clamp(10px,calc(11.5px * var(--uiScale)),13px);
  font-weight:900;
}

.tree-installed{color:#a8d7b0}
.tree-requires{color:#d5c4a0}

@keyframes treeReadyPulse{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,237,196,.16),0 4px 10px rgba(0,0,0,.42),0 0 0 rgba(225,182,95,0)!important}
  50%{box-shadow:inset 0 1px 0 rgba(255,237,196,.18),0 4px 10px rgba(0,0,0,.42),0 0 12px rgba(225,182,95,.32)!important}
}

@keyframes treeInstallFlash{
  0%{filter:brightness(1.9);transform:translate(-50%,-50%) scale(1.08)}
  100%{filter:brightness(1);transform:translate(-50%,-50%) scale(1)}
}

/* New game-changing race controls. */
.panel-controls #tune,
.panel-controls #bias{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.panel-controls #tune.active,
.panel-controls #bias.active{
  background-color:#56000f !important;
  background-image:
    linear-gradient(180deg,rgba(255,210,204,.14),rgba(255,255,255,.018) 22%,rgba(255,255,255,0) 36%,rgba(35,0,8,.18) 72%,rgba(0,0,0,.24)),
    url("darkwood.png") !important;
  background-size:100% 100%,220px 220px !important;
  background-blend-mode:screen,luminosity !important;
  border-color:#f0ca74 !important;
}

/* Additional information revealed on horse cards. */
.horse .odds{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:5px;
  width:100%;
}

.horse-note{
  flex:0 0 auto;
  color:#d8c99f;
  font-size:clamp(8px,calc(9.2px * var(--uiScale)),10px);
  font-weight:900;
  letter-spacing:.02em;
}

.horse.value-pick:not(.sel){
  border-color:#e1b65f !important;
  box-shadow:inset 0 0 0 1px rgba(255,230,160,.12),0 0 5px rgba(225,182,95,.22) !important;
}

.horse.tuned:not(.sel){
  border-color:#c45b66 !important;
}

@media(max-width:1180px), (max-height:760px){
  .tree-detail{
    grid-template-columns:minmax(0,1fr) minmax(150px,.72fr);
  }
  .tree-detail-action{
    grid-column:1 / -1;
  }
  .tree-buy{
    min-height:calc(35px * var(--uiScale));
  }
}

/* === Compact betting-panel accordion === */
.betpanel{
  grid-template-rows:auto auto minmax(0,1fr) auto !important;
  gap:calc(5px * var(--uiScale)) !important;
  overflow:hidden;
}

.selection-strip{
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:calc(7px * var(--uiScale));
  padding:calc(5px * var(--uiScale)) calc(7px * var(--uiScale));
  border:calc(1px * var(--uiScale)) solid rgba(196,153,75,.82);
  border-radius:calc(7px * var(--uiScale));
  background-color:#173720;
  background-image:
    linear-gradient(180deg,rgba(255,244,209,.09),rgba(255,255,255,0) 34%,rgba(0,0,0,.16)),
    linear-gradient(rgba(36,73,43,.50),rgba(12,29,17,.58)),
    url("darkwood.png");
  background-size:100% 100%,100% 100%,220px 220px;
  background-blend-mode:screen,multiply,luminosity;
  box-shadow:inset 0 1px 0 rgba(255,238,196,.10);
}

.selection-strip .lab{
  white-space:nowrap;
}

.selection-strip .val{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  font-size:clamp(10.5px,calc(11.5px * var(--uiScale)),13px);
}

.bet-accordion{
  min-height:0;
  display:grid;
  gap:calc(4px * var(--uiScale));
}

.fold-section{
  min-width:0;
  overflow:hidden;
  border:calc(1px * var(--uiScale)) solid rgba(196,153,75,.78);
  border-radius:calc(7px * var(--uiScale));
  background:rgba(9,24,13,.42);
  box-shadow:inset 0 1px 0 rgba(255,239,193,.07);
}

.fold-header{
  width:100%;
  min-height:calc(29px * var(--uiScale));
  padding:calc(5px * var(--uiScale)) calc(8px * var(--uiScale));
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:calc(7px * var(--uiScale));
  border:0;
  border-radius:0;
  color:#f5e9c8;
  background-color:#51331f;
  background-image:
    linear-gradient(180deg,rgba(255,240,205,.15),rgba(255,255,255,0) 34%,rgba(0,0,0,.18)),
    url("darkwood.png");
  background-size:100% 100%,220px 220px;
  background-blend-mode:screen,normal;
  text-align:left;
  box-shadow:none;
}

.fold-header:hover{
  filter:brightness(1.08);
}

.fold-section.open .fold-header{
  background-color:#56000f;
  background-image:
    linear-gradient(180deg,rgba(255,213,205,.14),rgba(255,255,255,0) 34%,rgba(28,0,7,.20)),
    url("darkwood.png");
  background-blend-mode:screen,luminosity;
  border-bottom:calc(1px * var(--uiScale)) solid rgba(228,190,108,.70);
}

.fold-title{
  font-size:clamp(9px,calc(10px * var(--uiScale)),11px);
  font-weight:950;
  letter-spacing:.04em;
  text-transform:none;
  white-space:nowrap;
}

.fold-summary{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:right;
  color:#f0ce79;
  font-size:clamp(9px,calc(10px * var(--uiScale)),11px);
  font-weight:900;
}

.fold-body{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .17s ease,opacity .12s ease;
}

.fold-section.open .fold-body{
  grid-template-rows:1fr;
  opacity:1;
}

.fold-body-inner{
  min-height:0;
  overflow:hidden;
  padding:0 calc(6px * var(--uiScale));
  background:
    linear-gradient(rgba(25,54,31,.68),rgba(8,22,12,.72)),
    url("darkwood.png");
  background-size:100% 100%,260px 260px;
  background-blend-mode:multiply,luminosity;
  transition:padding .17s ease;
}

.fold-section.open .fold-body-inner{
  padding-top:calc(6px * var(--uiScale));
  padding-bottom:calc(6px * var(--uiScale));
}

.slip-controls .stakes{
  margin:calc(4px * var(--uiScale)) 0;
}

.tuning-controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:calc(5px * var(--uiScale));
}

.tuning-controls .btn{
  min-width:0;
  min-height:calc(29px * var(--uiScale));
  padding:calc(4px * var(--uiScale));
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(8.5px,calc(9.4px * var(--uiScale)),10.5px) !important;
}

.tuning-controls #tune.active,
.tuning-controls #bias.active{
  background-color:#56000f !important;
  background-image:
    linear-gradient(180deg,rgba(255,210,204,.14),rgba(255,255,255,.018) 22%,rgba(255,255,255,0) 36%,rgba(35,0,8,.18) 72%,rgba(0,0,0,.24)),
    url("darkwood.png") !important;
  background-size:100% 100%,220px 220px !important;
  background-blend-mode:screen,luminosity !important;
  border-color:#f0ca74 !important;
}

.reading-controls .reading-grid{
  gap:calc(3px * var(--uiScale));
}

.reading-controls .ibox{
  padding:calc(3px * var(--uiScale));
}

.reading-controls .meterh{
  margin:calc(4px * var(--uiScale)) 0 calc(2px * var(--uiScale));
}

/* The horse selector and race controls always remain visible. */
.betpanel .horse-card{
  min-height:0;
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  overflow:hidden;
  padding:calc(5px * var(--uiScale)) !important;
}

.betpanel .horse-card h3{
  margin-bottom:calc(3px * var(--uiScale));
  font-size:clamp(9.5px,calc(10.5px * var(--uiScale)),11.5px) !important;
}

.betpanel .horses{
  gap:calc(3px * var(--uiScale)) !important;
}

.betpanel .horse{
  min-height:0 !important;
  height:100% !important;
  padding:calc(3px * var(--uiScale)) calc(6px * var(--uiScale)) !important;
  display:grid !important;
  grid-template-columns:calc(26px * var(--uiScale)) minmax(0,1fr) auto !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  column-gap:calc(6px * var(--uiScale)) !important;
  row-gap:0 !important;
}

.betpanel .silk-icon{
  grid-column:1 !important;
  grid-row:1 !important;
  width:calc(24px * var(--uiScale)) !important;
  height:calc(28px * var(--uiScale)) !important;
}

.betpanel .hname{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  font-size:clamp(10px,calc(11.2px * var(--uiScale)),12.5px) !important;
}

.betpanel .horse .odds{
  grid-column:3 !important;
  grid-row:1 !important;
  width:auto !important;
  display:block !important;
  align-self:center !important;
  justify-self:end !important;
  font-size:clamp(9px,calc(10px * var(--uiScale)),11px) !important;
  text-align:right;
}

.betpanel .horse-note{
  display:none !important;
}

.betpanel .panel-controls{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:calc(5px * var(--uiScale)) !important;
}

.betpanel .panel-controls .start{
  grid-column:1 / -1;
  min-height:calc(39px * var(--uiScale)) !important;
  font-size:clamp(12px,calc(13.5px * var(--uiScale)),15px) !important;
}

/* Keep tree navigation drag and zoom but remove its visual scrollbars. */
.tree-viewport{
  scrollbar-width:none !important;
  -ms-overflow-style:none;
}

.tree-viewport::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
}

@media(max-height:760px){
  .fold-header{
    min-height:calc(26px * var(--uiScale));
    padding-block:calc(4px * var(--uiScale));
  }

  .fold-section.open .fold-body-inner{
    padding-top:calc(4px * var(--uiScale));
    padding-bottom:calc(4px * var(--uiScale));
  }

  .betpanel .horse{
    padding-block:calc(2px * var(--uiScale)) !important;
  }
}


/* === Constrained betting accordion correction v6 === */
.betpanel{
  grid-template-rows:auto auto minmax(0,1fr) auto !important;
  overflow:hidden !important;
}

.betpanel > .selection-strip{
  grid-row:1 !important;
}

.betpanel > .bet-accordion{
  grid-row:2 !important;
}

.betpanel > .horse-card{
  grid-row:3 !important;
}

.betpanel > .panel-controls{
  grid-row:4 !important;
}

.bet-accordion{
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
  min-height:0 !important;
  gap:calc(4px * var(--uiScale)) !important;
}

.fold-section{
  display:block !important;
  min-height:0 !important;
}

.fold-body{
  display:none !important;
  opacity:1 !important;
}

.fold-section.open .fold-body{
  display:block !important;
}

.fold-body-inner,
.fold-section.open .fold-body-inner{
  min-height:0 !important;
  overflow:hidden !important;
  padding:calc(5px * var(--uiScale)) !important;
}

.fold-header{
  min-height:calc(28px * var(--uiScale)) !important;
  padding:calc(4px * var(--uiScale)) calc(7px * var(--uiScale)) !important;
}

.slip-controls .types,
.slip-controls .quickstakes{
  gap:calc(3px * var(--uiScale)) !important;
}

.slip-controls .types .mode,
.slip-controls .quickstakes .mode,
.slip-controls .stakes .mode{
  min-height:calc(25px * var(--uiScale)) !important;
  padding:calc(3px * var(--uiScale)) calc(2px * var(--uiScale)) !important;
}

.slip-controls .stakes{
  margin:calc(4px * var(--uiScale)) 0 !important;
}

.tuning-controls{
  grid-template-columns:1fr 1fr !important;
}

.tuning-controls .btn{
  min-height:calc(29px * var(--uiScale)) !important;
}

.reading-controls .reading-grid{
  grid-template-columns:1fr 1fr !important;
  gap:calc(3px * var(--uiScale)) !important;
}

.reading-controls .ibox{
  min-height:0 !important;
  padding:calc(3px * var(--uiScale)) !important;
}

.reading-controls .ibox .lab{
  font-size:clamp(7px,calc(7.8px * var(--uiScale)),8.5px) !important;
}

.reading-controls .ibox .val{
  font-size:clamp(8.5px,calc(9.4px * var(--uiScale)),10.5px) !important;
}

.betpanel .horse-card{
  min-height:0 !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto auto !important;
  align-content:start !important;
  padding:calc(5px * var(--uiScale)) !important;
}

.betpanel .horse-card h3{
  margin:0 0 calc(4px * var(--uiScale)) !important;
}

.betpanel .horses{
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:repeat(6,calc(42px * var(--uiScale))) !important;
  align-content:start !important;
  gap:calc(4px * var(--uiScale)) !important;
  padding:0 !important;
}

.betpanel .horse{
  min-height:0 !important;
  height:calc(42px * var(--uiScale)) !important;
  padding:calc(3px * var(--uiScale)) calc(6px * var(--uiScale)) !important;
  display:grid !important;
  grid-template-columns:calc(24px * var(--uiScale)) minmax(0,1fr) auto !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  column-gap:calc(5px * var(--uiScale)) !important;
  row-gap:0 !important;
}

.betpanel .silk-icon{
  grid-column:1 !important;
  grid-row:1 !important;
  width:calc(22px * var(--uiScale)) !important;
  height:calc(26px * var(--uiScale)) !important;
  align-self:center !important;
  justify-self:center !important;
}

.betpanel .hname{
  grid-column:2 !important;
  grid-row:1 !important;
  min-width:0 !important;
  align-self:center !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:clamp(9.5px,calc(10.6px * var(--uiScale)),11.5px) !important;
}

.betpanel .horse .odds{
  grid-column:3 !important;
  grid-row:1 !important;
  width:auto !important;
  display:block !important;
  align-self:center !important;
  justify-self:end !important;
  white-space:nowrap !important;
  text-align:right !important;
  font-size:clamp(8.5px,calc(9.5px * var(--uiScale)),10.5px) !important;
}

.betpanel .horse-note{
  display:none !important;
}

.betpanel .panel-controls{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:calc(5px * var(--uiScale)) !important;
  align-self:end !important;
}

.betpanel .panel-controls .btn:not(.start){
  min-height:calc(29px * var(--uiScale)) !important;
  padding:calc(4px * var(--uiScale)) !important;
  font-size:clamp(8.5px,calc(9.5px * var(--uiScale)),10.5px) !important;
}

.betpanel .panel-controls .start{
  grid-column:1 / -1 !important;
  min-height:calc(42px * var(--uiScale)) !important;
  padding:calc(7px * var(--uiScale)) !important;
  font-size:clamp(12px,calc(14px * var(--uiScale)),16px) !important;
}

@media(max-height:760px){
  .betpanel .horses{
    grid-template-rows:repeat(6,calc(35px * var(--uiScale))) !important;
  }

  .betpanel .horse{
    height:calc(35px * var(--uiScale)) !important;
  }

  .betpanel .silk-icon{
    width:calc(19px * var(--uiScale)) !important;
    height:calc(23px * var(--uiScale)) !important;
  }
}


/* === Betting bar hierarchy correction v7 === */
.betpanel{
  display:flex !important;
  flex-direction:column !important;
  gap:calc(5px * var(--uiScale)) !important;
  overflow:hidden !important;
}

.betpanel > .selection-strip,
.betpanel > .bet-accordion,
.betpanel > .horse-card,
.betpanel > .panel-controls{
  flex:0 0 auto !important;
  min-height:0 !important;
}

.betpanel > .panel-controls{
  margin-top:auto !important;
}

.bet-accordion{
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
}

.fold-header{
  grid-template-columns:auto minmax(0,1fr) auto !important;
}

.fold-header::after{
  content:"▸";
  color:#f0ce79;
  font-size:calc(12px * var(--uiScale));
  font-weight:950;
  line-height:1;
}

.fold-section.open .fold-header::after{
  content:"▾";
}

/* Choose Horse always remains visible. It uses a roomier form until the
   accordion needs the same vertical space, then changes to the compact form. */
.betpanel .horse-card{
  display:grid !important;
  grid-template-rows:auto auto !important;
  align-content:start !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
}

.betpanel .horses{
  display:grid !important;
  grid-template-rows:repeat(6,calc(50px * var(--uiScale))) !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  align-content:start !important;
}

.betpanel .horse{
  height:calc(50px * var(--uiScale)) !important;
  grid-template-columns:calc(30px * var(--uiScale)) minmax(0,1fr) auto !important;
  grid-template-rows:1fr !important;
  padding:calc(4px * var(--uiScale)) calc(7px * var(--uiScale)) !important;
}

.betpanel .silk-icon{
  width:calc(28px * var(--uiScale)) !important;
  height:calc(33px * var(--uiScale)) !important;
}

.betpanel .hname{
  font-size:clamp(10px,calc(11.5px * var(--uiScale)),13px) !important;
}

.betpanel .horse .odds{
  display:grid !important;
  justify-items:end !important;
  gap:calc(1px * var(--uiScale));
}

.betpanel .horse-note{
  display:block !important;
  color:#e7d59f !important;
  font-size:clamp(7px,calc(7.8px * var(--uiScale)),8.5px) !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

.betpanel.horse-compact .horses{
  grid-template-rows:repeat(6,calc(38px * var(--uiScale))) !important;
  gap:calc(3px * var(--uiScale)) !important;
}

.betpanel.horse-compact .horse{
  height:calc(38px * var(--uiScale)) !important;
  grid-template-columns:calc(22px * var(--uiScale)) minmax(0,1fr) auto !important;
  padding:calc(2px * var(--uiScale)) calc(6px * var(--uiScale)) !important;
  column-gap:calc(5px * var(--uiScale)) !important;
}

.betpanel.horse-compact .silk-icon{
  width:calc(20px * var(--uiScale)) !important;
  height:calc(24px * var(--uiScale)) !important;
}

.betpanel.horse-compact .hname{
  font-size:clamp(9px,calc(10px * var(--uiScale)),11px) !important;
}

.betpanel.horse-compact .horse .odds{
  display:block !important;
  font-size:clamp(8px,calc(9px * var(--uiScale)),10px) !important;
}

.betpanel.horse-compact .horse-note{
  display:none !important;
}

/* Race controls are permanent. The main race button keeps its showpiece size. */
.betpanel .panel-controls .start{
  min-height:calc(42px * var(--uiScale)) !important;
}

/* === Betting bar hierarchy and cabinet treatment v8 === */
.betpanel{
  display:flex !important;
  flex-direction:column !important;
  gap:calc(5px * var(--uiScale)) !important;
  overflow:hidden !important;
}

.betpanel > .selection-strip,
.betpanel > .bet-accordion,
.betpanel > .horse-card{
  flex:0 0 auto !important;
  min-height:0 !important;
}

/* Accordion headers are cabinet-green when closed and warm wood when open.
   Burgundy is retained as a small active accent instead of filling the banner. */
.fold-header{
  min-height:calc(29px * var(--uiScale)) !important;
  background-color:#173720 !important;
  background-image:
    linear-gradient(180deg,rgba(255,244,209,.11),rgba(255,255,255,0) 34%,rgba(0,0,0,.18)),
    linear-gradient(rgba(36,73,43,.44),rgba(12,29,17,.54)),
    url("darkwood.png") !important;
  background-size:100% 100%,100% 100%,220px 220px !important;
  background-blend-mode:screen,multiply,luminosity !important;
  box-shadow:
    inset 0 1px 0 rgba(255,238,196,.11),
    inset 0 0 0 0 #56000f !important;
}

.fold-section.open .fold-header{
  background-color:#57351f !important;
  background-image:
    linear-gradient(180deg,rgba(255,240,205,.16),rgba(255,255,255,0) 34%,rgba(0,0,0,.20)),
    url("darkwood.png") !important;
  background-size:100% 100%,220px 220px !important;
  background-blend-mode:screen,normal !important;
  border-bottom:calc(1px * var(--uiScale)) solid rgba(228,190,108,.72) !important;
  box-shadow:
    inset calc(4px * var(--uiScale)) 0 0 #681521,
    inset 0 1px 0 rgba(255,238,196,.13) !important;
}

.fold-title{
  text-transform:none !important;
  letter-spacing:.035em !important;
  font-size:clamp(10px,calc(10.8px * var(--uiScale)),12px) !important;
}

.fold-summary{
  text-transform:none !important;
  letter-spacing:.01em !important;
  color:#efd795 !important;
}

/* Machine Controls now contains tuning, lane bias, automation and race speed. */
.tuning-controls{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:calc(5px * var(--uiScale)) !important;
}

.tuning-controls .btn{
  min-width:0 !important;
  min-height:calc(31px * var(--uiScale)) !important;
  padding:calc(5px * var(--uiScale)) calc(4px * var(--uiScale)) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:clamp(8.5px,calc(9.5px * var(--uiScale)),10.5px) !important;
}

/* The two main actions form one permanent, more ceremonial control panel. */
.betpanel .main-race-panel{
  margin-top:auto !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  padding:calc(8px * var(--uiScale)) !important;
  border:calc(2px * var(--uiScale)) solid #d0a85b !important;
  border-radius:calc(11px * var(--uiScale)) !important;
  background-color:#173720 !important;
  background-image:
    linear-gradient(180deg,rgba(255,244,209,.12),rgba(255,255,255,0) 18%,rgba(0,0,0,.18)),
    linear-gradient(rgba(35,71,42,.45),rgba(10,27,15,.58)),
    url("darkwood.png") !important;
  background-size:100% 100%,100% 100%,240px 240px !important;
  background-blend-mode:screen,multiply,luminosity !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,244,204,.26),
    inset 0 0 0 calc(4px * var(--uiScale)) rgba(95,66,24,.76),
    inset 0 0 0 calc(6px * var(--uiScale)) rgba(10,24,13,.88),
    0 calc(2px * var(--uiScale)) calc(5px * var(--uiScale)) rgba(0,0,0,.42) !important;
}

.betpanel .main-race-panel h3{
  margin:0 0 calc(6px * var(--uiScale)) !important;
  text-align:center !important;
  color:#f5e8c4 !important;
  font-size:clamp(12px,calc(13px * var(--uiScale)),15px) !important;
  font-weight:950 !important;
  letter-spacing:.075em !important;
  text-transform:none !important;
}

.betpanel .main-race-panel .horses{
  display:grid !important;
  grid-template-rows:repeat(6,calc(46px * var(--uiScale))) !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  align-content:start !important;
  gap:calc(4px * var(--uiScale)) !important;
}

.betpanel .main-race-panel .horse{
  height:calc(46px * var(--uiScale)) !important;
  grid-template-columns:calc(26px * var(--uiScale)) minmax(0,1fr) auto !important;
  padding:calc(3px * var(--uiScale)) calc(7px * var(--uiScale)) !important;
}

.betpanel .main-race-panel .silk-icon{
  width:calc(24px * var(--uiScale)) !important;
  height:calc(29px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .horses{
  grid-template-rows:repeat(6,calc(35px * var(--uiScale))) !important;
  gap:calc(3px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .horse{
  height:calc(35px * var(--uiScale)) !important;
  grid-template-columns:calc(21px * var(--uiScale)) minmax(0,1fr) auto !important;
  padding:calc(2px * var(--uiScale)) calc(6px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .silk-icon{
  width:calc(19px * var(--uiScale)) !important;
  height:calc(23px * var(--uiScale)) !important;
}

/* Grand wooden race control with a restrained filigree treatment. */
.betpanel .main-race-panel .race-start{
  position:relative !important;
  width:100% !important;
  min-height:calc(52px * var(--uiScale)) !important;
  margin-top:calc(8px * var(--uiScale)) !important;
  padding:calc(8px * var(--uiScale)) calc(12px * var(--uiScale)) !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:calc(8px * var(--uiScale)) !important;
  border:calc(2px * var(--uiScale)) solid #e0bd6b !important;
  border-radius:calc(8px * var(--uiScale)) !important;
  outline:calc(1px * var(--uiScale)) solid rgba(84,51,14,.95) !important;
  outline-offset:calc(-5px * var(--uiScale)) !important;
  background-color:#5b351e !important;
  background-image:
    linear-gradient(180deg,rgba(255,239,198,.20),rgba(255,255,255,.02) 26%,rgba(0,0,0,.22)),
    url("darkwood.png") !important;
  background-size:100% 100%,240px 240px !important;
  background-blend-mode:screen,normal !important;
  color:#fff0c5 !important;
  font-size:clamp(15px,calc(17px * var(--uiScale)),20px) !important;
  font-weight:950 !important;
  letter-spacing:.06em !important;
  text-transform:none !important;
  text-shadow:0 calc(2px * var(--uiScale)) 0 rgba(0,0,0,.72) !important;
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,244,204,.24),
    inset 0 calc(-3px * var(--uiScale)) 0 rgba(53,27,8,.60),
    0 calc(2px * var(--uiScale)) calc(4px * var(--uiScale)) rgba(0,0,0,.38) !important;
}

.betpanel .main-race-panel .race-start:hover:not(:disabled){
  background-color:#681521 !important;
  background-image:
    linear-gradient(180deg,rgba(255,219,204,.18),rgba(255,255,255,.02) 26%,rgba(27,0,7,.24)),
    url("darkwood.png") !important;
  background-blend-mode:screen,luminosity !important;
}

.betpanel .main-race-panel .race-start:active:not(:disabled){
  transform:translateY(calc(1px * var(--uiScale))) !important;
  box-shadow:
    inset 0 calc(2px * var(--uiScale)) calc(5px * var(--uiScale)) rgba(0,0,0,.36),
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,244,204,.16) !important;
}

.betpanel .main-race-panel .race-start:disabled{
  background-color:#392719 !important;
  filter:saturate(.55) brightness(.72) !important;
}

.start-glyph{
  width:calc(52px * var(--uiScale)) !important;
  height:calc(34px * var(--uiScale)) !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(82%)
    sepia(44%)
    saturate(720%)
    hue-rotate(356deg)
    brightness(99%)
    contrast(88%)
    drop-shadow(0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.65)) !important;
  opacity:.96 !important;
  pointer-events:none !important;
}

.start-glyph-mirror{
  transform:none;
}

@media(max-height:760px){
  .betpanel .main-race-panel .horses{
    grid-template-rows:repeat(6,calc(34px * var(--uiScale))) !important;
  }

  .betpanel .main-race-panel .horse{
    height:calc(34px * var(--uiScale)) !important;
  }

  .betpanel .main-race-panel .race-start{
    min-height:calc(45px * var(--uiScale)) !important;
    margin-top:calc(5px * var(--uiScale)) !important;
  }

  .start-glyph{
    width:calc(44px * var(--uiScale)) !important;
    height:calc(28px * var(--uiScale)) !important;
  }
}


.bet-return{
  min-height:calc(17px * var(--uiScale));
  margin-top:calc(5px * var(--uiScale));
  padding:calc(3px * var(--uiScale)) calc(5px * var(--uiScale));
  border:1px solid rgba(197,154,74,.58);
  border-radius:calc(5px * var(--uiScale));
  background:rgba(6,16,9,.58);
  color:#ead39a;
  font-size:clamp(9px,calc(9.5px * var(--uiScale)),10.5px);
  font-weight:800;
  line-height:1.15;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.quickstakes .mode:disabled{
  opacity:.36 !important;
}

/* === Adaptive betting bar v9 ===
   Detail panels remain open whenever they fit. Space management contracts
   them only to preserve the horse selector and the full-size Start Race button. */
.betpanel{
  display:flex !important;
  flex-direction:column !important;
  gap:calc(5px * var(--uiScale)) !important;
  overflow:hidden !important;
}

.betpanel > .selection-strip,
.betpanel > .bet-accordion{
  flex:0 0 auto !important;
}

.betpanel > .main-race-panel{
  flex:1 1 auto !important;
  margin-top:0 !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
}

.bet-accordion{
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
  gap:calc(4px * var(--uiScale)) !important;
}

.fold-section.auto-collapsed .fold-header{
  opacity:.94;
}

/* Expanded sections are working panels, not red alert banners. */
.fold-section.open .fold-header{
  background-color:#4f3521 !important;
  box-shadow:
    inset calc(3px * var(--uiScale)) 0 0 #7a2630,
    inset 0 1px 0 rgba(255,238,196,.13) !important;
}

/* The betting controls remain generous whenever the window allows it. */
.slip-controls .types .mode{
  min-height:calc(34px * var(--uiScale)) !important;
  font-size:clamp(9px,calc(10.5px * var(--uiScale)),12px) !important;
}

.slip-controls .stakes .mode,
.slip-controls .quickstakes .mode{
  min-height:calc(30px * var(--uiScale)) !important;
}

.slip-controls .stakeval{
  min-height:calc(34px * var(--uiScale)) !important;
  display:grid !important;
  place-items:center !important;
  font-size:clamp(13px,calc(15px * var(--uiScale)),17px) !important;
}

/* The permanent horse panel uses the remaining height rather than leaving a gap. */
.betpanel .main-race-panel .horses{
  height:100% !important;
  min-height:0 !important;
  display:grid !important;
  grid-template-rows:repeat(6,minmax(calc(39px * var(--uiScale)),1fr)) !important;
  align-content:stretch !important;
  overflow:hidden !important;
  gap:calc(4px * var(--uiScale)) !important;
}

.betpanel .main-race-panel .horse{
  height:100% !important;
  min-height:calc(39px * var(--uiScale)) !important;
  max-height:calc(56px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .horses{
  grid-template-rows:repeat(6,minmax(calc(32px * var(--uiScale)),1fr)) !important;
  gap:calc(3px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .horse{
  min-height:calc(32px * var(--uiScale)) !important;
  max-height:calc(40px * var(--uiScale)) !important;
}

/* Start Race is never miniaturised. */
.betpanel .main-race-panel .race-start,
.betpanel.horse-compact .main-race-panel .race-start,
.betpanel.panel-tight .main-race-panel .race-start{
  min-height:calc(52px * var(--uiScale)) !important;
  margin-top:calc(7px * var(--uiScale)) !important;
  font-size:clamp(15px,calc(17px * var(--uiScale)),20px) !important;
}

/* Last-resort compression affects secondary controls only. */
.betpanel.panel-tight{
  gap:calc(3px * var(--uiScale)) !important;
  padding:calc(4px * var(--uiScale)) !important;
}

.betpanel.panel-tight .selection-strip,
.betpanel.panel-tight .fold-header{
  min-height:calc(25px * var(--uiScale)) !important;
  padding-top:calc(3px * var(--uiScale)) !important;
  padding-bottom:calc(3px * var(--uiScale)) !important;
}

.betpanel.panel-tight .fold-section.open .fold-body-inner{
  padding:calc(4px * var(--uiScale)) !important;
}

.betpanel.panel-tight .slip-controls .types .mode,
.betpanel.panel-tight .slip-controls .stakes .mode,
.betpanel.panel-tight .slip-controls .quickstakes .mode,
.betpanel.panel-tight .tuning-controls .btn{
  min-height:calc(26px * var(--uiScale)) !important;
  padding-block:calc(3px * var(--uiScale)) !important;
}

.betpanel.panel-tight .slip-controls .stakeval{
  min-height:calc(28px * var(--uiScale)) !important;
}

/* Reserve enough real height for six usable runners and the ceremonial race
   control. This lets the fitting script detect pressure before anything clips. */
.betpanel > .main-race-panel{
  min-height:calc(350px * var(--uiScale)) !important;
}

.betpanel.horse-compact > .main-race-panel{
  min-height:calc(300px * var(--uiScale)) !important;
}


/* Consistent, readable betting-panel typography. */
.fold-title{
  font-size:clamp(11px,calc(12px * var(--uiScale)),13px) !important;
  line-height:1.1 !important;
}
.fold-summary{
  font-size:clamp(10px,calc(10.8px * var(--uiScale)),12px) !important;
  line-height:1.1 !important;
}
.slip-controls .types .mode,
.tuning-controls .btn{
  font-size:clamp(10px,calc(10.8px * var(--uiScale)),12px) !important;
}
.slip-controls .quickstakes .mode,
.slip-controls .stakes .mode{
  font-size:clamp(9.5px,calc(10px * var(--uiScale)),11px) !important;
}
.reading-controls .ibox .lab{
  font-size:clamp(8.5px,calc(9px * var(--uiScale)),10px) !important;
  line-height:1.05 !important;
  letter-spacing:.055em !important;
}
.reading-controls .ibox .val{
  font-size:clamp(10px,calc(10.8px * var(--uiScale)),12px) !important;
  line-height:1.05 !important;
}
.reading-controls .meterh{
  font-size:clamp(9px,calc(9.7px * var(--uiScale)),10.5px) !important;
}
.selection-strip .lab{
  font-size:clamp(8px,calc(8.7px * var(--uiScale)),9.5px) !important;
}
.selection-strip .val{
  font-size:clamp(11px,calc(12px * var(--uiScale)),13.5px) !important;
}


/* === Definitive betting-bar typography system v14 ===
   Four readable text sizes only. Accordion sections yield space before text shrinks. */
.betpanel{
  --bar-text-small:clamp(12px,calc(12.5px * var(--uiScale)),13px);
  --bar-text-body:clamp(13px,calc(14px * var(--uiScale)),15px);
  --bar-text-main:clamp(15px,calc(16px * var(--uiScale)),18px);
  --bar-text-heading:clamp(16px,calc(18px * var(--uiScale)),20px);
}

/* Selected runner summary */
.betpanel .selection-strip{
  min-height:calc(36px * var(--uiScale)) !important;
  padding:calc(6px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
}

.betpanel .selection-strip .lab{
  font-size:var(--bar-text-small) !important;
  line-height:1.15 !important;
  letter-spacing:.035em !important;
  text-transform:none !important;
  font-weight:850 !important;
}

.betpanel .selection-strip .val{
  font-size:var(--bar-text-main) !important;
  line-height:1.1 !important;
  font-weight:950 !important;
}

/* Accordion headers */
.betpanel .fold-header,
.betpanel.panel-tight .fold-header{
  min-height:calc(38px * var(--uiScale)) !important;
  padding:calc(7px * var(--uiScale)) calc(9px * var(--uiScale)) !important;
  gap:calc(7px * var(--uiScale)) !important;
}

.betpanel .fold-title{
  font-size:var(--bar-text-body) !important;
  line-height:1.15 !important;
  letter-spacing:.025em !important;
  text-transform:none !important;
  font-weight:950 !important;
}

.betpanel .fold-summary{
  font-size:var(--bar-text-small) !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  font-weight:900 !important;
}

.betpanel .fold-header::after{
  font-size:var(--bar-text-body) !important;
}

.betpanel .fold-section.open .fold-body-inner,
.betpanel.panel-tight .fold-section.open .fold-body-inner{
  padding:calc(7px * var(--uiScale)) !important;
}

/* Bet Slip */
.betpanel .slip-controls .types .mode{
  min-height:calc(38px * var(--uiScale)) !important;
  padding:calc(6px * var(--uiScale)) calc(4px * var(--uiScale)) !important;
  font-size:var(--bar-text-body) !important;
  line-height:1.1 !important;
}

.betpanel .slip-controls .stakes .mode,
.betpanel .slip-controls .quickstakes .mode,
.betpanel.panel-tight .slip-controls .stakes .mode,
.betpanel.panel-tight .slip-controls .quickstakes .mode{
  min-height:calc(34px * var(--uiScale)) !important;
  padding:calc(5px * var(--uiScale)) calc(3px * var(--uiScale)) !important;
  font-size:var(--bar-text-small) !important;
  line-height:1.1 !important;
}

.betpanel .slip-controls .stakeval,
.betpanel.panel-tight .slip-controls .stakeval{
  min-height:calc(38px * var(--uiScale)) !important;
  font-size:var(--bar-text-main) !important;
  line-height:1.1 !important;
}

.betpanel .bet-return{
  min-height:calc(31px * var(--uiScale)) !important;
  padding:calc(5px * var(--uiScale)) calc(7px * var(--uiScale)) !important;
  font-size:var(--bar-text-small) !important;
  line-height:1.25 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Machine Controls */
.betpanel .tuning-controls{
  gap:calc(6px * var(--uiScale)) !important;
}

.betpanel .tuning-controls .btn,
.betpanel.panel-tight .tuning-controls .btn{
  min-height:calc(39px * var(--uiScale)) !important;
  padding:calc(6px * var(--uiScale)) calc(5px * var(--uiScale)) !important;
  font-size:var(--bar-text-body) !important;
  line-height:1.15 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

/* Machine Reading */
.betpanel .reading-controls .reading-grid{
  gap:calc(5px * var(--uiScale)) !important;
}

.betpanel .reading-controls .ibox{
  min-height:calc(49px * var(--uiScale)) !important;
  padding:calc(6px * var(--uiScale)) !important;
}

.betpanel .reading-controls .ibox .lab{
  font-size:var(--bar-text-small) !important;
  line-height:1.1 !important;
  letter-spacing:.025em !important;
  text-transform:none !important;
  font-weight:800 !important;
}

.betpanel .reading-controls .ibox .val{
  margin-top:calc(2px * var(--uiScale)) !important;
  font-size:var(--bar-text-body) !important;
  line-height:1.1 !important;
  font-weight:950 !important;
}

.betpanel .reading-controls .meterh{
  font-size:var(--bar-text-small) !important;
  line-height:1.15 !important;
}

/* Horse selector */
.betpanel .main-race-panel h3{
  font-size:var(--bar-text-heading) !important;
  line-height:1.1 !important;
  letter-spacing:.045em !important;
}

.betpanel .main-race-panel .hname,
.betpanel.horse-compact .main-race-panel .hname{
  font-size:var(--bar-text-body) !important;
  line-height:1.1 !important;
  font-weight:950 !important;
}

.betpanel .main-race-panel .horse .odds,
.betpanel.horse-compact .main-race-panel .horse .odds{
  font-size:var(--bar-text-body) !important;
  line-height:1.05 !important;
  font-weight:950 !important;
}

.betpanel .main-race-panel .horse-note{
  font-size:var(--bar-text-small) !important;
  line-height:1.05 !important;
}

.betpanel .main-race-panel .horse{
  min-height:calc(48px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .horse{
  min-height:calc(40px * var(--uiScale)) !important;
}

/* The main action remains deliberately larger than every other control. */
.betpanel .main-race-panel .race-start,
.betpanel.horse-compact .main-race-panel .race-start,
.betpanel.panel-tight .main-race-panel .race-start{
  min-height:calc(58px * var(--uiScale)) !important;
  font-size:var(--bar-text-heading) !important;
  line-height:1.1 !important;
}

.betpanel .start-glyph,
.betpanel.panel-tight .start-glyph{
  width:max(52px,calc(52px * var(--uiScale))) !important;
  height:max(34px,calc(34px * var(--uiScale))) !important;
}

/* Tight mode reduces spacing only. It must never reduce text below this system. */
.betpanel.panel-tight{
  gap:calc(3px * var(--uiScale)) !important;
}

.betpanel.panel-tight .selection-strip{
  min-height:calc(34px * var(--uiScale)) !important;
  padding-block:calc(5px * var(--uiScale)) !important;
}


/* === Sidebar fit and horse-row correction v15 ===
   The horse selector and Start Race button are the fixed priority. Accordion
   detail panels close before the horse rows are compacted. */
.betpanel{
  overflow:hidden !important;
}

/* The selected horse is already shown by the highlighted horse row. */
.betpanel > .selection-strip{
  display:none !important;
}

/* Do not let the horse panel hide its own required height from the fitter. */
.betpanel > .main-race-panel,
.betpanel.horse-compact > .main-race-panel{
  flex:0 0 auto !important;
  min-height:0 !important;
  height:auto !important;
  display:grid !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
  overflow:visible !important;
}

.betpanel .main-race-panel .horses,
.betpanel.horse-compact .main-race-panel .horses{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  align-content:start !important;
}

/* Every horse uses the same readable two-line layout. */
.betpanel .main-race-panel .horse,
.betpanel.horse-compact .main-race-panel .horse{
  height:auto !important;
  min-height:calc(54px * var(--uiScale)) !important;
  display:grid !important;
  grid-template-columns:calc(28px * var(--uiScale)) minmax(0,1fr) !important;
  align-items:center !important;
  gap:calc(7px * var(--uiScale)) !important;
  padding:calc(5px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
  text-align:left !important;
}

.betpanel.horse-compact .main-race-panel .horse{
  min-height:calc(47px * var(--uiScale)) !important;
  padding-block:calc(3px * var(--uiScale)) !important;
}

.betpanel .main-race-panel .silk-icon,
.betpanel.horse-compact .main-race-panel .silk-icon{
  width:calc(26px * var(--uiScale)) !important;
  height:calc(31px * var(--uiScale)) !important;
}

.betpanel .horse-copy{
  min-width:0 !important;
  display:grid !important;
  grid-template-rows:auto auto !important;
  gap:calc(2px * var(--uiScale)) !important;
}

.betpanel .main-race-panel .hname,
.betpanel.horse-compact .main-race-panel .hname{
  min-width:0 !important;
  display:block !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  font-size:var(--bar-text-body) !important;
  line-height:1.08 !important;
}

.betpanel .horse-meta{
  min-width:0 !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:calc(8px * var(--uiScale)) !important;
  color:var(--cabinetGoldLight,#f0d78f) !important;
  font-size:var(--bar-text-small) !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
}

.betpanel .horse-meta .odds-main{
  flex:0 0 auto !important;
  color:#f2d689 !important;
  font-weight:950 !important;
}

.betpanel .horse-meta .horse-note{
  min-width:0 !important;
  display:block !important;
  margin:0 !important;
  color:#dfcfaa !important;
  font-size:var(--bar-text-small) !important;
  font-weight:850 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:right !important;
}

/* Compact mode reduces only row height and gaps, never text. */
.betpanel.horse-compact .main-race-panel .horses{
  gap:calc(2px * var(--uiScale)) !important;
}

.betpanel.horse-compact .main-race-panel .silk-icon{
  width:calc(23px * var(--uiScale)) !important;
  height:calc(28px * var(--uiScale)) !important;
}

/* Keep Start Race full size in every fit mode. */
.betpanel .main-race-panel .race-start,
.betpanel.horse-compact .main-race-panel .race-start,
.betpanel.panel-tight .main-race-panel .race-start{
  min-height:calc(58px * var(--uiScale)) !important;
  margin-top:calc(7px * var(--uiScale)) !important;
}


/* === Horse row layout correction v16 ===
   Use dedicated runner classes so legacy generic horse text rules cannot
   reorder or overlap the name, odds and chance. */
.betpanel .main-race-panel .horse,
.betpanel.horse-compact .main-race-panel .horse{
  grid-template-columns:calc(30px * var(--uiScale)) minmax(0,1fr) !important;
  grid-template-rows:1fr !important;
  align-items:center !important;
  min-width:0 !important;
  overflow:hidden !important;
}

.betpanel .runner-copy{
  min-width:0 !important;
  width:100% !important;
  display:grid !important;
  grid-template-rows:auto auto !important;
  grid-template-columns:minmax(0,1fr) !important;
  align-content:center !important;
  gap:calc(3px * var(--uiScale)) !important;
  overflow:hidden !important;
}

.betpanel .runner-name{
  display:block !important;
  min-width:0 !important;
  width:100% !important;
  color:#fff0c8 !important;
  font-size:var(--bar-text-body) !important;
  font-weight:950 !important;
  line-height:1.08 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:left !important;
  order:1 !important;
}

.betpanel .runner-meta{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:baseline !important;
  gap:calc(8px * var(--uiScale)) !important;
  min-width:0 !important;
  width:100% !important;
  line-height:1.08 !important;
  order:2 !important;
}

.betpanel .runner-odds{
  display:block !important;
  min-width:0 !important;
  color:#f2d689 !important;
  font-size:var(--bar-text-small) !important;
  font-weight:950 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:left !important;
}

.betpanel .runner-note{
  display:block !important;
  color:#dfcfaa !important;
  font-size:var(--bar-text-small) !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  text-align:right !important;
}

/* Neutralise the now-unused legacy nested horse labels. */
.betpanel .horse > .hname,
.betpanel .horse > .odds,
.betpanel .horse > .horse-note,
.betpanel .horse > .horse-copy,
.betpanel .horse > .horse-meta{
  display:none !important;
}


/* === Race Console and tuned-runner status v17 === */
.betpanel .console-controls{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:calc(7px * var(--uiScale)) !important;
}

.betpanel .console-controls .reading-controls{
  min-width:0 !important;
}

.betpanel .console-controls .tuning-controls{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:calc(6px * var(--uiScale)) !important;
}

.betpanel .runner-copy{
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:
    "runner-name runner-status"
    "runner-odds runner-note" !important;
  column-gap:calc(7px * var(--uiScale)) !important;
  row-gap:calc(3px * var(--uiScale)) !important;
}

.betpanel .runner-name{
  grid-area:runner-name !important;
  order:initial !important;
}

.betpanel .runner-odds{
  grid-area:runner-odds !important;
}

.betpanel .runner-note{
  grid-area:runner-note !important;
  align-self:end !important;
  justify-self:end !important;
}

.betpanel .runner-status-icons{
  grid-area:runner-status !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  align-self:center !important;
  justify-self:end !important;
  gap:calc(4px * var(--uiScale)) !important;
  min-width:0 !important;
  min-height:calc(19px * var(--uiScale)) !important;
}

.betpanel .runner-status-icon{
  display:block !important;
  width:calc(15px * var(--uiScale)) !important;
  height:calc(17px * var(--uiScale)) !important;
  object-fit:contain !important;
  object-position:center !important;
  flex:0 0 auto !important;
  cursor:help !important;
}

.betpanel .runner-status-tuned{
  width:calc(10px * var(--uiScale)) !important;
  height:calc(19px * var(--uiScale)) !important;
  filter:
    brightness(0)
    saturate(100%)
    invert(83%)
    sepia(47%)
    saturate(695%)
    hue-rotate(356deg)
    brightness(98%)
    contrast(91%)
    drop-shadow(0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.65)) !important;
}

.betpanel .runner-status-rough{
  width:calc(13px * var(--uiScale)) !important;
  height:calc(17px * var(--uiScale)) !important;
  filter:none !important;
}

.betpanel .runner-status-value{
  width:calc(16px * var(--uiScale)) !important;
  height:calc(16px * var(--uiScale)) !important;
  filter:none !important;
}

/* The tuned icon sits directly above the right-aligned percentage/status. */
.betpanel .horse.tuned .runner-note{
  color:#f4dda0 !important;
}

/* === Top-right sound and fullscreen controls === */
.top{
  grid-template-columns:
    minmax(calc(170px * var(--uiScale)),.9fr)
    minmax(0,2.7fr)
    auto
    minmax(calc(226px * var(--uiScale)),auto) !important;
}

.top-controls{
  min-width:0;
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:end;
  gap:calc(5px * var(--uiScale));
  padding:0 calc(6px * var(--uiScale));
  border-left:calc(1px * var(--uiScale)) solid rgba(213,180,105,.46);
}

.top-control{
  min-height:calc(31px * var(--uiScale));
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:calc(6px * var(--uiScale));
  padding:calc(4px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
  border-radius:calc(8px * var(--uiScale));
  font-size:clamp(10px,calc(11px * var(--uiScale)),12px) !important;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.top-control img{
  display:block;
  width:calc(20px * var(--uiScale));
  height:calc(20px * var(--uiScale));
  flex:0 0 auto;
  object-fit:contain;
  filter:none !important;
}

.top-status-internal{
  display:none !important;
}

@media(max-width:1320px){
  .top{
    grid-template-columns:
      minmax(145px,.85fr)
      minmax(0,2.4fr)
      auto
      minmax(196px,auto) !important;
  }

  .top-control{
    gap:4px;
    padding-inline:6px !important;
    font-size:10px !important;
  }

  .top-control img{
    width:18px;
    height:18px;
  }
}

@media(max-width:900px){
  .top{
    grid-template-columns:minmax(135px,.8fr) minmax(0,2fr) auto auto !important;
  }

  .top-controls{
    padding-inline:4px;
  }
}


/* === Unified top navigation and utility controls === */
.top{
  grid-template-columns:
    minmax(calc(170px * var(--uiScale)),.9fr)
    minmax(0,2.7fr)
    auto !important;
}

.top-actions{
  display:grid;
  grid-template-columns:repeat(4,calc(110px * var(--uiScale)));
  align-items:center;
  justify-content:end;
  gap:calc(5px * var(--uiScale));
  padding:0 calc(6px * var(--uiScale));
  border-left:calc(1px * var(--uiScale)) solid rgba(213,180,105,.46);
}

.top-actions .top-action-button{
  width:100%;
  min-width:0;
  min-height:calc(31px * var(--uiScale));
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:calc(6px * var(--uiScale));
  padding:calc(4px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
  border-radius:calc(8px * var(--uiScale));
  font-size:clamp(10px,calc(11px * var(--uiScale)),12px) !important;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.top-actions .top-action-button img{
  display:block;
  width:calc(20px * var(--uiScale));
  height:calc(20px * var(--uiScale));
  flex:0 0 auto;
  object-fit:contain;
  filter:none !important;
}

@media(max-width:1320px){
  .top{
    grid-template-columns:minmax(145px,.85fr) minmax(0,2.4fr) auto !important;
  }

  .top-actions{
    grid-template-columns:repeat(4,96px);
    padding-inline:5px;
  }

  .top-actions .top-action-button{
    gap:4px;
    padding-inline:5px !important;
    font-size:10px !important;
  }

  .top-actions .top-action-button img{
    width:18px;
    height:18px;
  }
}

@media(max-width:900px){
  .top{
    grid-template-columns:minmax(135px,.8fr) minmax(0,2fr) auto !important;
  }

  .top-actions{
    grid-template-columns:repeat(4,88px);
    padding-inline:4px;
    gap:4px;
  }
}


/* === Final top action button corrections === */
.top-actions{
  grid-template-columns:repeat(4,calc(118px * var(--uiScale))) !important;
}

.top-actions .top-action-button{
  min-height:calc(32px * var(--uiScale)) !important;
  gap:calc(6px * var(--uiScale)) !important;
  padding:calc(4px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
  font-size:clamp(13px,calc(13.5px * var(--uiScale)),15px) !important;
  font-weight:900 !important;
}

.top-actions .top-action-button img{
  width:calc(21px * var(--uiScale)) !important;
  height:calc(21px * var(--uiScale)) !important;
  filter:none !important;
}

/* All four controls share the same normal brown wood finish. */
.top-actions .top-action-button{
  background-color:#4a2b1c !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,239,204,.14),
      rgba(255,255,255,.018) 23%,
      rgba(255,255,255,0) 37%,
      rgba(0,0,0,.17)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:center,center !important;
  background-repeat:no-repeat,repeat !important;
  background-blend-mode:screen,normal !important;
  color:#fff0cf !important;
}

/* Upgrades and Records become crimson wood only while their window is open. */
.top-actions button.tab.active{
  background-color:#56000f !important;
  background-image:
    linear-gradient(
      180deg,
      rgba(255,210,204,.14),
      rgba(255,255,255,.018) 22%,
      rgba(255,255,255,0) 36%,
      rgba(35,0,8,.18) 72%,
      rgba(0,0,0,.24)
    ),
    url("darkwood.png") !important;
  background-size:
    100% 100%,
    calc(220px * var(--uiScale)) calc(220px * var(--uiScale)) !important;
  background-position:center,center !important;
  background-repeat:no-repeat,repeat !important;
  background-blend-mode:screen,luminosity !important;
  color:#fff4df !important;
}

@media(max-width:1320px){
  .top-actions{
    grid-template-columns:repeat(4,104px) !important;
  }

  .top-actions .top-action-button{
    font-size:12px !important;
    padding-inline:6px !important;
  }

  .top-actions .top-action-button img{
    width:19px !important;
    height:19px !important;
  }
}

@media(max-width:900px){
  .top-actions{
    grid-template-columns:repeat(4,94px) !important;
  }

  .top-actions .top-action-button{
    font-size:11px !important;
  }
}

/* === Exact top action sizing and right-edge alignment === */
.app{
  grid-template-rows:max(48px,calc(56px * var(--uiScale))) minmax(0,1fr) !important;
}

.top{
  padding-right:0 !important;
}

.top-actions{
  height:100%;
  align-self:stretch;
  align-items:center;
  padding:0 !important;
  /* Match the Fullscreen button edge to the inset Bet Slip header, not the outer panel frame. */
  margin-right:calc(6px * var(--uiScale));
}

.top-actions .top-action-button{
  box-sizing:border-box !important;
  height:clamp(34px,calc(36px * var(--uiScale)),42px) !important;
  min-height:clamp(34px,calc(36px * var(--uiScale)),42px) !important;
  max-height:clamp(34px,calc(36px * var(--uiScale)),42px) !important;
  align-self:center !important;
}

/* Give the variable-length result text most of the footer width while
   keeping the four compact statistics comfortably readable. */
.foot{
  grid-template-columns:
    minmax(0,2.5fr)
    minmax(calc(86px * var(--uiScale)),.42fr)
    minmax(calc(86px * var(--uiScale)),.42fr)
    minmax(calc(132px * var(--uiScale)),.58fr)
    minmax(calc(132px * var(--uiScale)),.58fr) !important;
}

.foot .fbox:not(:first-child){
  padding-left:calc(6px * var(--uiScale));
  padding-right:calc(6px * var(--uiScale));
  gap:.28em;
}


/* === Guided first-run tutorial === */
.quickstakes .quickstake-wide{
  grid-column:span 2;
}

.tutorial-welcome{
  cursor:default;
}

.tutorial-welcome .start-gate-panel{
  pointer-events:auto;
}

.tutorial-welcome-panel{
  width:min(760px,88vw);
  gap:clamp(10px,1.6vh,18px);
}

.tutorial-welcome-kicker{
  color:#f4e7c5;
  font-size:clamp(18px,2.2vw,28px);
  font-weight:900;
  letter-spacing:.08em;
  text-shadow:0 2px 0 rgba(0,0,0,.65);
}

.tutorial-welcome-byline{
  color:#d8c18d;
  font-size:clamp(13px,1.4vw,18px);
  font-weight:850;
  letter-spacing:.06em;
}

.tutorial-welcome-copy{
  max-width:620px;
  margin:0;
  color:#f2e3bd;
  font-size:clamp(14px,1.5vw,19px);
  line-height:1.45;
}

.tutorial-sound-question{
  color:#fff0ca;
  font-size:clamp(16px,1.8vw,22px);
  font-weight:950;
}

.tutorial-sound-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(160px,1fr));
  gap:12px;
  width:min(470px,100%);
}

.tutorial-welcome-button{
  min-height:46px;
  font-size:clamp(14px,1.35vw,18px) !important;
  font-weight:950 !important;
}

.tutorial-guide{
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
}

.tutorial-guide[hidden]{
  display:none;
}

.tutorial-focus{
  position:fixed;
  left:0;
  top:0;
  width:0;
  height:0;
  border:3px solid #f0cf78;
  border-radius:10px;
  box-shadow:
    0 0 0 4px rgba(70,31,13,.88),
    0 0 0 9999px rgba(0,0,0,.72),
    0 0 22px rgba(255,219,118,.62);
  transition:left .14s ease,top .14s ease,width .14s ease,height .14s ease;
  pointer-events:none;
}

.tutorial-focus.no-target{
  display:none;
}

.tutorial-focus.complete-shade{
  display:block;
  left:50% !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  border:0;
  border-radius:0;
  box-shadow:0 0 0 9999px rgba(0,0,0,.76);
  transition:none;
}

.tutorial-callout{
  position:fixed;
  width:min(390px,calc(100vw - 28px));
  padding:18px 20px;
  border:2px solid #d0a85b;
  border-radius:12px;
  color:#f4e7c5;
  background-color:#203b26;
  background-image:
    linear-gradient(180deg,rgba(255,245,214,.10),rgba(255,255,255,0) 30%,rgba(0,0,0,.18)),
    url("darkwood.png");
  background-size:100% 100%,360px 360px;
  background-position:center;
  background-repeat:no-repeat,repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255,241,199,.16),
    inset 0 0 0 5px rgba(86,59,22,.58),
    0 12px 30px rgba(0,0,0,.58);
  pointer-events:auto;
}

.tutorial-callout h2{
  margin:0 0 8px;
  color:#fff0ca;
  font-size:21px;
  line-height:1.1;
}

.tutorial-callout p{
  margin:0;
  color:#f2e3bd;
  font-size:15px;
  line-height:1.45;
}

.tutorial-step-count{
  margin-bottom:5px;
  color:#d8c18d;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
}

.tutorial-continue{
  width:100%;
  margin-top:14px;
  min-height:38px;
  font-weight:950 !important;
}

.tutorial-callout.tutorial-centred{
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 28px));
  text-align:center;
}

@media(max-width:700px){
  .tutorial-sound-actions{
    grid-template-columns:1fr;
  }

  .tutorial-callout{
    width:min(350px,calc(100vw - 20px));
    padding:15px 16px;
  }
}

/* === Returning-player startup controls === */
.start-gate-mode{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.6vh,18px);
}

.start-gate-mode[hidden],
.start-reset-confirm[hidden]{
  display:none;
}

.returning-player-start{
  width:min(520px,100%);
}

.continue-game-button{
  width:min(420px,100%);
  min-height:54px;
  font-size:clamp(17px,1.7vw,22px) !important;
}

.reset-progress-button{
  width:min(420px,100%);
  min-height:40px;
  color:#e5c8ba !important;
  border-color:#8c5546 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 28%),
    linear-gradient(180deg,#542b25,#301815) !important;
}

.start-reset-confirm{
  position:fixed;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(0,0,0,.78);
}

.start-reset-card{
  width:min(610px,calc(100vw - 32px));
  padding:clamp(22px,4vw,38px);
  border:3px solid #c89950;
  border-radius:14px;
  color:#f4e7c5;
  background:
    linear-gradient(180deg,rgba(255,245,214,.10),rgba(255,255,255,0) 28%,rgba(0,0,0,.22)),
    linear-gradient(180deg,#4e241e,#26110f),
    url("darkwood.png");
  background-size:100% 100%,100% 100%,360px 360px;
  box-shadow:
    inset 0 0 0 1px rgba(255,241,199,.15),
    inset 0 0 0 5px rgba(73,42,18,.72),
    0 18px 48px rgba(0,0,0,.64);
  text-align:left;
}

.start-reset-card h2{
  margin:0 0 14px;
  color:#fff0ca;
  font-size:clamp(22px,2.5vw,31px);
}

.start-reset-card p{
  margin:0 0 12px;
  font-size:clamp(14px,1.4vw,18px);
  line-height:1.48;
}

.start-reset-warning{
  color:#f0b5a0;
  font-weight:950;
}

.start-reset-actions{
  display:grid;
  grid-template-columns:1fr 1.45fr;
  gap:12px;
  margin-top:22px;
}

.start-reset-actions .btn{
  min-height:46px;
  font-weight:950 !important;
}

.start-reset-confirm-button{
  color:#fff1e8 !important;
  border-color:#d28267 !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 28%),
    linear-gradient(180deg,#8a3328,#541b17) !important;
}

@media(max-width:620px){
  .start-reset-actions{
    grid-template-columns:1fr;
  }
}


/* === Final prize popup, isolated from the cabinet layout === */
.prize-popup{
  position:fixed;
  inset:0;
  z-index:2000;
  display:none;
  place-items:center;
  padding:5vh 5vw;
  background:rgba(2,5,3,.88);
}
.prize-popup.show{
  display:grid !important;
}
.prize-card{
  width:92vw;
  height:90vh;
  min-width:0;
  min-height:0;
  overflow:auto;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  justify-items:center;
  align-items:center;
  gap:clamp(8px,1.5vh,18px);
  padding:clamp(14px,2vh,24px) clamp(18px,3vw,44px);
  border:3px solid #d2a54c;
  border-radius:clamp(18px,2vw,30px);
  color:#f4e7c5;
  background:#102b18;
  box-shadow:
    inset 0 0 0 2px rgba(255,239,187,.18),
    inset 0 0 0 8px rgba(92,59,18,.72),
    0 20px 70px rgba(0,0,0,.72);
}
.prize-title{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  margin:0;
  padding:16px 0 14px;
  color:#f5d77f;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  font-weight:950;
  font-size:clamp(32px,4.6vw,68px);
  line-height:1;
  letter-spacing:.055em;
  text-align:center;
  text-shadow:0 3px 0 #5c3110,0 0 12px rgba(255,218,112,.24);
}
.prize-title span{
  display:inline-block;
  transform-origin:50% 100%;
}
.prize-title span:nth-child(1){transform:translateY(24px) rotate(-15deg)}
.prize-title span:nth-child(2){transform:translateY(18px) rotate(-13deg)}
.prize-title span:nth-child(3){transform:translateY(12px) rotate(-11deg)}
.prize-title span:nth-child(4){transform:translateY(7px) rotate(-9deg)}
.prize-title span:nth-child(5){transform:translateY(2px) rotate(-7deg)}
.prize-title span:nth-child(6){transform:translateY(-2px) rotate(-5deg)}
.prize-title span:nth-child(7){transform:translateY(-5px) rotate(-2.5deg)}
.prize-title span:nth-child(8){transform:translateY(-6px) rotate(0deg)}
.prize-title span:nth-child(9){transform:translateY(-5px) rotate(2.5deg)}
.prize-title span:nth-child(10){transform:translateY(-2px) rotate(5deg)}
.prize-title span:nth-child(11){transform:translateY(2px) rotate(7deg)}
.prize-title span:nth-child(12){transform:translateY(7px) rotate(9deg)}
.prize-title span:nth-child(13){transform:translateY(12px) rotate(11deg)}
.prize-title span:nth-child(14){transform:translateY(18px) rotate(13deg)}
.prize-title span:nth-child(15){transform:translateY(24px) rotate(15deg)}
.prize-image-panel{
  position:relative;
  min-width:0;
  min-height:0;
  width:100%;
  height:100%;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.prize-fireworks{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
.prize-trophy{
  position:absolute;
  inset:0;
  display:block;
  width:auto !important;
  height:auto !important;
  max-width:min(52vw,640px) !important;
  max-height:100% !important;
  margin:auto;
  object-fit:contain !important;
  z-index:1;
}
.prize-copy,.prize-link{
  width:min(100%,1050px);
  margin:0;
  text-align:center;
  font-size:clamp(14px,1.25vw,20px);
  line-height:1.42;
}
.prize-link a{
  color:#f5d77f;
  font-weight:900;
}
.prize-acknowledge{
  min-width:clamp(180px,22vw,340px);
  padding:clamp(10px,1.4vh,16px) clamp(24px,4vw,54px) !important;
  font-size:clamp(16px,1.5vw,24px) !important;
  font-weight:950;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 28%),
    linear-gradient(180deg,#b88829,#725017) !important;
  border-color:#f0d68a !important;
}
@media(max-height:720px){
  .prize-card{height:94vh;padding-top:10px;padding-bottom:10px}
  .prize-title{font-size:clamp(28px,4vw,52px)}
  .prize-copy,.prize-link{font-size:clamp(12px,1.05vw,16px)}
}

/* === Start-screen mechanical horse procession === */
.tutorial-welcome{
  padding:0 0 clamp(10px,1.8vh,22px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
}

.start-track-shell{
  position:relative;
  flex:0 0 clamp(160px,23vh,220px);
  width:100vw;
  max-width:none;
  height:clamp(160px,23vh,220px);
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  border:0;
  border-radius:0;
  background:#244f32;
  box-shadow:
    inset 0 -3px 0 rgba(226,199,127,.72),
    0 10px 26px rgba(0,0,0,.46);
}

.start-track-canvas{
  display:block;
  width:100%;
  height:100%;
}

.tutorial-welcome-panel{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  transform:none;
  margin-top:clamp(10px,1.8vh,20px);
}

.start-reset-confirm{
  z-index:4;
}

@media(max-height:760px){
  .start-track-shell{
    flex-basis:clamp(145px,21vh,175px);
    height:clamp(145px,21vh,175px);
  }

  .tutorial-welcome-panel{
    margin-top:8px;
  }
}

@media(max-width:760px){
  .start-track-shell{
    flex-basis:clamp(140px,20vh,165px);
    height:clamp(140px,20vh,165px);
  }

  .tutorial-welcome-panel{
    width:min(760px,94vw);
  }
}


/* === Unframed start-screen information area === */
.tutorial-welcome .start-gate-panel{
  flex:1 1 auto;
  min-height:0;
  width:min(1080px,96vw);
  margin:0;
  padding:clamp(10px,1.7vh,20px) clamp(20px,4vw,64px) clamp(12px,2vh,24px);
  justify-content:center;
  gap:clamp(8px,1.3vh,15px);
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.tutorial-welcome .start-gate-panel::before,
.tutorial-welcome .start-gate-panel::after{
  content:none !important;
}

.tutorial-welcome-kicker,
.tutorial-welcome-byline,
.tutorial-welcome-copy,
.tutorial-sound-question,
.start-gate-hint{
  text-shadow:
    0 2px 0 rgba(0,0,0,.84),
    0 0 10px rgba(0,0,0,.58);
}

.tutorial-welcome img.title-logo-gate{
  width:min(820px,80vw);
  max-height:clamp(74px,12vh,145px);
}

.tutorial-welcome-byline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.3vw,18px);
  min-height:clamp(46px,6.5vh,68px);
  font-size:clamp(19px,2vw,28px);
}

.tutorial-welcome-bugvictim-logo{
  display:block;
  width:clamp(46px,5.2vw,68px);
  height:clamp(46px,5.2vw,68px);
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.7));
}

.tutorial-welcome-copy{
  max-width:760px;
}

.tutorial-welcome .start-gate-mode{
  gap:clamp(8px,1.25vh,14px);
}

@media(max-height:760px){
  .tutorial-welcome .start-gate-panel{
    padding-top:7px;
    padding-bottom:8px;
    gap:6px;
  }

  .tutorial-welcome img.title-logo-gate{
    max-height:90px;
  }

  .tutorial-welcome-copy{
    line-height:1.32;
  }
}

@media(max-width:700px){
  .tutorial-welcome .start-gate-panel{
    width:96vw;
    padding-left:14px;
    padding-right:14px;
  }

  .tutorial-welcome img.title-logo-gate{
    width:90vw;
  }
}

/* === Upgrade tree clarity pass === */
.upgrade-tree-section{
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

.tree-toolbar{
  grid-template-columns:minmax(250px,1fr) auto auto auto auto auto;
}

.tree-line.locked{
  stroke:rgba(155,128,72,.24);
  stroke-dasharray:8 10;
}

.tree-summary{
  padding:calc(7px * var(--uiScale)) calc(10px * var(--uiScale));
  display:grid;
  gap:calc(5px * var(--uiScale));
  border:calc(1px * var(--uiScale)) solid rgba(197,154,74,.72);
  border-radius:calc(7px * var(--uiScale));
  background:rgba(8,24,13,.72);
  color:#e4d4ad;
  font-size:clamp(9px,calc(10.5px * var(--uiScale)),12px);
}

.tree-summary-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  color:#f0d48d;
}

.tree-summary-requirements,
.tree-summary-legend{
  display:flex;
  flex-wrap:wrap;
  gap:4px 12px;
}

.tree-summary-requirements span{
  color:#d6c29a;
}

.tree-summary-requirements span.done,
.tree-summary-complete{
  color:#9fd0a8;
}

.tree-summary-legend{
  padding-top:4px;
  border-top:1px solid rgba(197,154,74,.24);
  color:#cdbd98;
}

.tree-summary-legend .perk-mark{
  font-size:inherit;
}

.tree-node.locked{
  opacity:.62;
  filter:saturate(.48);
  border-style:dashed !important;
}

.tree-node.tier-locked{
  opacity:.48;
}

.tree-node.challenge-locked{
  box-shadow:
    inset 0 0 0 1px rgba(255,244,204,.12),
    0 0 0 2px rgba(122,40,38,.36),
    0 3px 8px rgba(0,0,0,.42) !important;
}

.tree-node.external-locked{
  border-color:#d49c3f !important;
}

.tree-node.available.unaffordable{
  animation:none;
  border-color:#b98e48 !important;
}

.tree-node.capstone{
  outline:2px double rgba(236,203,126,.48);
  outline-offset:4px;
}

.tree-node-warning{
  position:absolute;
  right:-8px;
  top:-11px;
  z-index:4;
  width:24px;
  height:22px;
  display:grid;
  place-items:center;
  color:#ffd675;
  background:#4a2d12;
  border:1px solid #e0ad4e;
  border-radius:5px;
  font-size:16px;
  line-height:1;
  text-shadow:0 1px 1px #000;
  box-shadow:0 2px 5px rgba(0,0,0,.55);
}

.tree-node.purchased.has-warning{
  border-color:#dca847 !important;
}

.tree-node-status{
  min-height:12px;
}

.tree-detail{
  min-height:calc(158px * var(--uiScale));
  grid-template-columns:minmax(0,1.1fr) minmax(260px,1fr) minmax(180px,.48fr);
  align-items:stretch;
}

.tree-detail-copy,
.tree-detail-facts,
.tree-detail-action{
  align-self:center;
}

.tree-detail-facts{
  min-width:0;
  display:grid;
  gap:5px;
  color:#d8c9a7;
  font-size:clamp(10px,calc(11.5px * var(--uiScale)),13px);
  line-height:1.3;
}

.tree-detail-effect,
.tree-value-list,
.tree-warning,
.tree-unlocks,
.tree-fact{
  display:grid;
  gap:2px;
}

.tree-detail-effect strong,
.tree-warning strong,
.tree-unlocks strong,
.tree-fact strong{
  color:#f0d48d;
}

.tree-detail-effect span,
.tree-value-list span,
.tree-warning span,
.tree-unlocks span,
.tree-fact span{
  display:block;
}

.tree-value-list{
  padding-top:4px;
  border-top:1px solid rgba(213,173,88,.22);
  color:#b9d8c0;
}

.tree-warning{
  padding:5px 7px;
  border:1px solid rgba(224,173,78,.6);
  border-radius:5px;
  color:#f0cf85;
  background:rgba(78,45,13,.38);
}

.tree-unlocks{
  padding-top:4px;
  border-top:1px solid rgba(213,173,88,.22);
}

.tree-requires{
  display:grid;
  gap:4px;
  text-align:left;
}

.tree-requires strong{
  color:#f0d48d;
  text-align:center;
}

.tree-requires span{
  display:block;
  font-weight:700;
  line-height:1.25;
}

.bet-type-help,
.bias-help{
  color:#cfbf9c;
  font-size:clamp(8.5px,calc(9.5px * var(--uiScale)),11px);
  line-height:1.25;
}

.bet-type-help{
  margin-top:calc(-2px * var(--uiScale));
}

.bias-help{
  padding-top:calc(2px * var(--uiScale));
  border-top:1px solid rgba(197,154,74,.22);
}

@media(max-width:1350px){
  .tree-toolbar{
    grid-template-columns:minmax(220px,1fr) auto auto auto;
  }

  .tree-progress{
    grid-column:1 / -1;
    grid-row:2;
    justify-content:flex-start;
  }

  .tree-detail{
    grid-template-columns:minmax(0,1fr) minmax(230px,.9fr);
  }

  .tree-detail-action{
    grid-column:1 / -1;
  }
}


/* === Compact upgrade tree header === */
.upgrade-tree-section{
  grid-template-rows:auto minmax(0,1fr) auto;
}

.tree-toolbar{
  display:flex;
  align-items:center;
  gap:calc(8px * var(--uiScale));
  min-height:calc(28px * var(--uiScale));
}

.tree-summary-line{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#ead8ab;
  font-size:clamp(12px,calc(13.5px * var(--uiScale)),16px);
  font-weight:800;
  line-height:1.2;
}

.tree-zoom{
  flex:0 0 auto;
  min-width:calc(46px * var(--uiScale));
  padding:calc(4px * var(--uiScale)) calc(7px * var(--uiScale));
  font-size:clamp(11px,calc(12px * var(--uiScale)),14px);
}

.tree-summary,
.tree-intro,
.tree-progress,
.tree-centre{
  display:none !important;
}

@media(max-width:1350px){
  .tree-toolbar{
    display:flex;
  }
}


/* === Start-screen version label === */
.start-gate-version{
  position:absolute;
  right:clamp(10px,1.4vw,22px);
  bottom:clamp(8px,1.2vh,16px);
  z-index:3;
  pointer-events:none;
  color:rgba(246,233,199,.72);
  font-size:clamp(10px,.72vw,13px);
  font-weight:700;
  letter-spacing:.06em;
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}

/* === Proportional viewport and sidebar fit v21 ===
   Restore the proven viewport scaling, keep the sidebar width tied to that
   scale, and make the horse panel surrender height before the Start Race
   button can be clipped. */
.main{
  grid-template-columns:minmax(0,1fr) calc(256px * var(--uiScale)) !important;
}

.betpanel > .main-race-panel,
.betpanel.horse-compact > .main-race-panel{
  flex:1 1 0 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  align-content:stretch !important;
}

.betpanel .main-race-panel .horses,
.betpanel.horse-compact .main-race-panel .horses{
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  align-content:stretch !important;
  grid-template-rows:repeat(6,minmax(calc(40px * var(--uiScale)),1fr)) !important;
}

.betpanel.horse-compact .main-race-panel .horses{
  grid-template-rows:repeat(6,minmax(calc(34px * var(--uiScale)),1fr)) !important;
}

.betpanel .main-race-panel .horse,
.betpanel.horse-compact .main-race-panel .horse{
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
}

.betpanel .main-race-panel .race-start,
.betpanel.horse-compact .main-race-panel .race-start,
.betpanel.panel-tight .main-race-panel .race-start{
  flex:none !important;
  white-space:nowrap !important;
}

.bias-help[hidden]{
  display:none !important;
}

/* === Interface size control and compact 800 x 450 start screen v22 === */
.top{
  position:relative;
  z-index:20;
  overflow:visible !important;
}

.top-actions{
  grid-template-columns:
    repeat(2,calc(118px * var(--uiScale)))
    calc(92px * var(--uiScale))
    calc(110px * var(--uiScale))
    calc(118px * var(--uiScale)) !important;
}

.ui-scale-control{
  position:relative;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
}

.ui-scale-control > .top-action-button{
  width:100%;
}

.ui-scale-icon{
  display:grid;
  place-items:center;
  width:calc(21px * var(--uiScale));
  height:calc(21px * var(--uiScale));
  flex:0 0 auto;
  color:#f5d77f;
  font-family:Georgia,"Times New Roman",serif;
  font-size:calc(20px * var(--uiScale));
  font-weight:900;
  line-height:1;
  text-shadow:0 calc(1px * var(--uiScale)) 0 rgba(0,0,0,.75);
}

.ui-scale-popover{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:200;
  width:calc(250px * var(--uiScale));
  min-width:220px;
  padding:calc(12px * var(--uiScale));
  border:calc(2px * var(--uiScale)) solid #c69a4c;
  border-radius:calc(10px * var(--uiScale));
  color:#f6e9c7;
  background:
    linear-gradient(180deg,rgba(255,245,214,.10),rgba(255,255,255,0) 28%,rgba(0,0,0,.20)),
    linear-gradient(180deg,#31553a,#172b1d),
    url("darkwood.png");
  background-size:100% 100%,100% 100%,260px 260px;
  box-shadow:
    inset 0 0 0 1px rgba(255,241,199,.18),
    inset 0 0 0 4px rgba(86,59,22,.56),
    0 8px 24px rgba(0,0,0,.58);
}

.ui-scale-popover[hidden]{
  display:none !important;
}

.ui-scale-heading,
.ui-scale-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(8px * var(--uiScale));
}

.ui-scale-heading{
  margin-bottom:calc(8px * var(--uiScale));
  font-size:calc(13px * var(--uiScale));
  font-weight:900;
}

.ui-scale-heading output{
  color:#f5d77f;
}

.ui-scale-popover input[type="range"]{
  width:100%;
  margin:0;
  accent-color:#d2a84e;
  cursor:pointer;
}

.ui-scale-footer{
  margin-top:calc(5px * var(--uiScale));
  color:#d2c29c;
  font-size:calc(10px * var(--uiScale));
}

.ui-scale-default{
  padding:calc(3px * var(--uiScale)) calc(8px * var(--uiScale));
  border:1px solid rgba(224,190,119,.65);
  border-radius:calc(6px * var(--uiScale));
  color:#fff0cf;
  background:#4a2b1c;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}

.ui-scale-note{
  min-height:1.2em;
  margin-top:calc(6px * var(--uiScale));
  color:#c9b98f;
  font-size:calc(10px * var(--uiScale));
  line-height:1.2;
  text-align:center;
}

@media(max-width:1320px){
  .top-actions{
    grid-template-columns:repeat(2,104px) repeat(3,46px) !important;
  }

  .top-actions .utility-action .top-action-label{
    display:none;
  }

  .top-actions .utility-action{
    padding-inline:5px !important;
  }

  .ui-scale-popover{
    width:230px;
  }
}

@media(max-width:900px){
  .top-actions{
    grid-template-columns:repeat(2,84px) repeat(3,40px) !important;
    gap:3px;
  }

  .top-actions .top-action-button{
    font-size:10px !important;
    padding-inline:3px !important;
  }

  .top-actions .utility-action img{
    width:18px !important;
    height:18px !important;
  }

  .ui-scale-icon{
    width:18px;
    height:18px;
    font-size:18px;
  }

  .ui-scale-popover{
    position:fixed;
    top:56px;
    right:8px;
    width:220px;
  }
}

@media(max-height:500px){
  .tutorial-welcome{
    padding-bottom:4px;
  }

  .tutorial-welcome .start-track-shell{
    flex-basis:124px;
    height:124px;
  }

  .tutorial-welcome .start-gate-panel{
    padding:3px 14px 5px;
    gap:4px;
  }

  .tutorial-welcome-kicker{
    font-size:17px;
    line-height:1;
  }

  .tutorial-welcome img.title-logo-gate{
    width:min(650px,78vw);
    max-height:74px;
  }

  .tutorial-welcome-byline{
    min-height:36px;
    gap:8px;
    font-size:15px;
    line-height:1;
  }

  .tutorial-welcome-bugvictim-logo{
    width:36px;
    height:36px;
  }

  .tutorial-welcome .start-gate-mode{
    gap:4px;
  }

  .tutorial-welcome-copy{
    font-size:12px;
    line-height:1.18 !important;
  }

  .tutorial-sound-question{
    font-size:15px;
    line-height:1.05;
  }

  .tutorial-sound-actions{
    gap:8px;
  }

  .tutorial-welcome-button{
    min-height:38px;
    font-size:14px !important;
    padding-top:5px !important;
    padding-bottom:5px !important;
  }

  .continue-game-button{
    min-height:42px;
    font-size:16px !important;
  }

  .reset-progress-button{
    min-height:34px;
    font-size:13px !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
  }

  .start-gate-hint{
    font-size:9.5px;
    line-height:1.08;
    letter-spacing:.02em;
  }

  .start-gate-version{
    right:8px;
    bottom:4px;
    font-size:9px;
  }
}


/* === Unified betting-control scaling v25 ===
   Betting controls follow the same complete interface scale as their text.
   Horse choices keep content-sized rows with a fixed normal gap. Spare browser
   height is left below the list instead of being distributed between rows. */
.betpanel{
  --betControlScale:var(--uiScale);
  --bar-text-small:calc(12.5px * var(--uiScale));
  --bar-text-body:calc(14px * var(--uiScale));
  --bar-text-main:calc(16px * var(--uiScale));
  --bar-text-heading:calc(18px * var(--uiScale));
  gap:calc(5px * var(--uiScale)) !important;
  padding:calc(6px * var(--uiScale)) !important;
}

.betpanel > .bet-accordion,
.betpanel .bet-accordion{
  gap:calc(4px * var(--uiScale)) !important;
}

.betpanel .fold-header,
.betpanel.panel-tight .fold-header{
  min-height:calc(31px * var(--uiScale)) !important;
  padding:calc(4px * var(--uiScale)) calc(7px * var(--uiScale)) !important;
  gap:calc(5px * var(--uiScale)) !important;
}

.betpanel .fold-section.open .fold-body-inner,
.betpanel.panel-tight .fold-section.open .fold-body-inner{
  padding:calc(7px * var(--uiScale)) !important;
}

.betpanel .slip-controls .types .mode{
  min-height:2.7em !important;
  padding:.48em .28em !important;
  font-size:var(--bar-text-body) !important;
  line-height:1.1 !important;
}

.betpanel .slip-controls .stakes .mode,
.betpanel .slip-controls .quickstakes .mode,
.betpanel.panel-tight .slip-controls .stakes .mode,
.betpanel.panel-tight .slip-controls .quickstakes .mode{
  min-height:2.5em !important;
  padding:.42em .22em !important;
  font-size:var(--bar-text-small) !important;
  line-height:1.1 !important;
}

.betpanel .slip-controls .stakeval,
.betpanel.panel-tight .slip-controls .stakeval{
  min-height:2.45em !important;
  padding:.35em .25em !important;
  font-size:var(--bar-text-main) !important;
  line-height:1.1 !important;
}

.betpanel .tuning-controls{
  gap:calc(6px * var(--uiScale)) !important;
}

.betpanel .tuning-controls .btn,
.betpanel.panel-tight .tuning-controls .btn{
  min-height:2.8em !important;
  padding:.48em .38em !important;
  font-size:var(--bar-text-body) !important;
  line-height:1.15 !important;
}

.betpanel > .main-race-panel,
.betpanel.horse-compact > .main-race-panel{
  flex:1 1 0 !important;
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
}

.betpanel .main-race-panel .horses,
.betpanel.horse-compact .main-race-panel .horses{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  display:grid !important;
  grid-template-rows:repeat(6,max-content) !important;
  align-content:start !important;
  gap:calc(3px * var(--uiScale)) !important;
}

.betpanel .main-race-panel .horse,
.betpanel.horse-compact .main-race-panel .horse{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:calc(5px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
  gap:calc(7px * var(--uiScale)) !important;
  grid-template-columns:calc(30px * var(--uiScale)) minmax(0,1fr) !important;
}

.betpanel .main-race-panel .silk-icon,
.betpanel.horse-compact .main-race-panel .silk-icon{
  width:calc(26px * var(--uiScale)) !important;
  height:calc(31px * var(--uiScale)) !important;
}

.betpanel .runner-copy{
  row-gap:calc(3px * var(--uiScale)) !important;
  column-gap:calc(7px * var(--uiScale)) !important;
}

.betpanel .runner-name{
  font-size:var(--bar-text-body) !important;
  line-height:1.08 !important;
}

.betpanel .runner-odds,
.betpanel .runner-note{
  font-size:var(--bar-text-small) !important;
  line-height:1.08 !important;
}

.betpanel .main-race-panel .race-start,
.betpanel.horse-compact .main-race-panel .race-start,
.betpanel.panel-tight .main-race-panel .race-start{
  min-height:3.2em !important;
  margin-top:calc(7px * var(--uiScale)) !important;
  padding:.42em .35em !important;
  font-size:var(--bar-text-heading) !important;
  line-height:1.1 !important;
  flex:none !important;
  white-space:nowrap !important;
}

.betpanel .start-glyph,
.betpanel.panel-tight .start-glyph{
  width:calc(52px * var(--uiScale)) !important;
  height:calc(34px * var(--uiScale)) !important;
}

/* === First tutorial interface-size setup === */
.tutorial-scale-setup{
  margin-top:14px;
  padding:13px 14px 10px;
  border:1px solid rgba(224,190,119,.58);
  border-radius:9px;
  background:rgba(12,24,15,.58);
  text-align:left;
}

.tutorial-scale-setup[hidden]{
  display:none !important;
}

.tutorial-scale-heading,
.tutorial-scale-ends{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.tutorial-scale-heading{
  margin-bottom:9px;
  color:#f5e7c5;
  font-size:14px;
  font-weight:900;
}

.tutorial-scale-heading output{
  color:#f5d77f;
}

.tutorial-scale-setup input[type="range"]{
  width:100%;
  margin:0;
  accent-color:#d2a84e;
  cursor:pointer;
}

.tutorial-scale-ends{
  margin-top:5px;
  color:#cfbf98;
  font-size:11px;
  font-weight:800;
}



/* Keep the game at full brightness while the player adjusts interface size. */
.tutorial-focus.complete-shade.size-preview-shade{
  box-shadow:none;
}


/* === Larger first tutorial size window v25 ===
   Keep this setup panel readable before the player has chosen a scale. */
.tutorial-callout.tutorial-centred.tutorial-size-preview{
  width:min(624px,calc(100vw - 28px));
  padding:22px 24px;
}

.tutorial-callout.tutorial-size-preview h2{
  margin-bottom:10px;
  font-size:25px;
}

.tutorial-callout.tutorial-size-preview p{
  font-size:18px;
  line-height:1.45;
}

.tutorial-callout.tutorial-size-preview .tutorial-step-count{
  margin-bottom:6px;
  font-size:13px;
}

.tutorial-callout.tutorial-size-preview .tutorial-scale-setup{
  margin-top:17px;
  padding:16px 17px 12px;
  border-radius:11px;
}

.tutorial-callout.tutorial-size-preview .tutorial-scale-heading{
  margin-bottom:11px;
  font-size:17px;
}

.tutorial-callout.tutorial-size-preview .tutorial-scale-setup input[type="range"]{
  min-height:24px;
}

.tutorial-callout.tutorial-size-preview .tutorial-scale-ends{
  margin-top:6px;
  font-size:13px;
}

.tutorial-callout.tutorial-size-preview .tutorial-continue{
  min-height:46px;
  margin-top:17px;
  font-size:17px !important;
}

/* === Low-resolution betting-panel fallback v27 ===
   Keep one accordion available whenever possible. If the complete sidebar is
   still taller than the viewport, scroll the whole betting panel so every
   control, horse and the Start Race button remains reachable. */
.betpanel.panel-scroll{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  align-content:start !important;
  scrollbar-width:thin;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}

.betpanel.panel-scroll > .bet-accordion{
  flex:none !important;
}

.betpanel.panel-scroll > .main-race-panel,
.betpanel.panel-scroll.horse-compact > .main-race-panel{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:max-content !important;
  overflow:visible !important;
  grid-template-rows:auto auto auto !important;
  align-content:start !important;
}

.betpanel.panel-scroll .main-race-panel .horses,
.betpanel.panel-scroll.horse-compact .main-race-panel .horses{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  grid-template-rows:repeat(6,max-content) !important;
  align-content:start !important;
}

.betpanel.panel-scroll .main-race-panel .race-start{
  position:relative !important;
  z-index:2 !important;
  flex:none !important;
}

/* === Cabinet scrollbar styling v28 ===
   Match the brass scrollbar already used by the upgrade and records panels. */
.betpanel.panel-scroll{
  scrollbar-width:auto;
  scrollbar-color:#b68a3c #132218;
}

.betpanel.panel-scroll::-webkit-scrollbar{
  width:clamp(9px,calc(10px * var(--uiScale)),13px);
}

.betpanel.panel-scroll::-webkit-scrollbar-track{
  background:linear-gradient(90deg,#0b150e,#1d3020);
  border-left:calc(1px * var(--uiScale)) solid #765823;
  box-shadow:inset calc(1px * var(--uiScale)) 0 0 rgba(255,235,177,.10);
}

.betpanel.panel-scroll::-webkit-scrollbar-thumb{
  min-height:calc(42px * var(--uiScale));
  border:calc(1px * var(--uiScale)) solid #d6ae58;
  border-radius:999px;
  background:linear-gradient(90deg,#5d4318,#b68a3c 45%,#d1aa5b 55%,#66491b);
  box-shadow:
    inset 0 0 0 calc(1px * var(--uiScale)) rgba(255,241,194,.20),
    0 0 calc(2px * var(--uiScale)) rgba(0,0,0,.65);
}

.betpanel.panel-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#715322,#c99d49 45%,#dfbd6d 55%,#795722);
}

.betpanel.panel-scroll::-webkit-scrollbar-button{
  display:none;
}

.betpanel.panel-scroll::-webkit-scrollbar-corner{
  background:#132218;
}

/* === Compact top action controls v29 ===
   Let the top-right buttons grow with their text and icon instead of forcing
   a separate clamped height that can look oversized at some interface scales. */
.top-actions .top-action-button{
  height:auto !important;
  min-height:calc(31px * var(--uiScale)) !important;
  max-height:none !important;
  padding:calc(4px * var(--uiScale)) calc(8px * var(--uiScale)) !important;
  line-height:1.05 !important;
}

.top-actions .top-action-button img{
  width:calc(19px * var(--uiScale)) !important;
  height:calc(19px * var(--uiScale)) !important;
}

.top-actions .ui-scale-icon{
  width:calc(19px * var(--uiScale));
  height:calc(19px * var(--uiScale));
  font-size:calc(18px * var(--uiScale));
}


/* === v1.4 compact fascia, clearer overlays and node-drag panning v30 ===
   Keep the title in the same fascia row at narrow desktop widths. The SVG is
   allowed to shrink instead of forcing the brand into a separate grid row. */
@media(max-width:1080px){
  .top{
    grid-template-columns:
      minmax(calc(88px * var(--uiScale)),.42fr)
      minmax(0,1fr)
      auto !important;
  }

  .top .brand{
    grid-column:auto !important;
    min-width:0 !important;
    padding-inline:calc(5px * var(--uiScale)) !important;
  }

  .top-actions{
    grid-column:auto !important;
  }

  img.title-logo-header{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:calc(31px * var(--uiScale)) !important;
  }
}

/* Show more of the machine through the Upgrades and Records windows while
   retaining enough tint behind the text and controls for readability. */
.overlay{
  background:
    radial-gradient(
      ellipse at 50% -18%,
      rgba(255,225,190,.035),
      rgba(255,225,190,0) 38%
    ),
    linear-gradient(
      180deg,
      rgba(61,34,26,.58),
      rgba(43,23,18,.54) 42%,
      rgba(24,12,9,.50)
    ) !important;
  backdrop-filter:blur(calc(2px * var(--uiScale))) saturate(.9) !important;
}

.overlay-body{
  background:
    linear-gradient(
      180deg,
      rgba(5,22,12,.18),
      rgba(2,13,7,.26)
    ) !important;
}

.overlay .up,
.overlay .card,
.overlay .mile,
.overlay .prestige{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.09),
      rgba(255,255,255,.018) 17%,
      rgba(255,255,255,0) 31%
    ),
    radial-gradient(
      ellipse at 50% 0%,
      rgba(120,160,112,.07),
      rgba(120,160,112,0) 48%
    ),
    linear-gradient(
      180deg,
      rgba(46,80,51,.50),
      rgba(15,36,21,.44)
    ) !important;
}

.overlay .log,
.overlay .ibox{
  background:rgba(4,13,8,.48) !important;
}