:root{
  --lane-scale-y: 0.67;
      --bg:#0e0906; --fg:#fff; --gold:#ffd64d; --muted:#cbd5e1;
      --pad-safe: env(safe-area-inset-bottom, 0px);
     --hole-size: clamp(28px, 6vw, 48px);
}
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--fg);
      background:linear-gradient(135deg,#24130b 0%, #140b06 100%);
      padding-bottom:var(--pad-safe);
      -webkit-tap-highlight-color:transparent;
    }
    .container{max-width:1200px;margin-inline:auto;padding:12px}
    header{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
    .controls{display:flex;gap:8px;flex-wrap:wrap}
    input,button{
      padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);color:#fff;font-size:16px;min-height:44px;
      touch-action:manipulation
    }
    input::placeholder{color:#aab2c0}
    button.primary{background:var(--gold);color:#111;border:none;font-weight:800}
    button:disabled{opacity:.6}
    .badge{display:inline-flex;align-items:center;gap:6px;background:#1b2134;color:#cbd5e1;border-radius:999px;padding:6px 10px}
    .muted{color:var(--muted)}
    .hidden{display:none}
    .row{display:flex;gap:10px;align-items:center;justify-content:space-between}

    /* Layout: single column on phones */
    .board-wrap{display:grid;grid-template-columns:max-content;justify-content:center;justify-items:center; gap:12px; overflow:visible;}
    @media (min-width: 920px){ .board-wrap{grid-template-columns:180px max-content 80px; justify-content:center} }

    .scratch-col{background:linear-gradient(180deg,#a11e1e,#7a1414);border:8px solid #2b0f0f;border-radius:16px;
      display:flex;flex-direction:column;padding:12px;text-align:center;text-shadow:0 1px 1px #000}
    .scratch-title{font-weight:900;letter-spacing:.12em;margin-bottom:8px}
    .scratch-grid{display:grid;gap:8px}
    .scratch-box{background:rgba(0,0,0,.25);border:2px solid #4b0f0f;border-radius:12px;padding:10px;font-weight:700}

    /* Polished wood interior that can scroll horizontally on small screens */
    .board{position:relative;margin:0 auto;width:max-content;;border:8px solid #1b1009;border-radius:18px;padding:14px;overflow-x:auto;
      background:
        linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.22) 100%),
        repeating-linear-gradient(90deg, #7c4723 0 18px, #6d3f1e 18px 36px, #5a3318 36px 54px),
        linear-gradient(180deg, #6e3e1e 0%, #3b210f 100%);
      box-shadow:inset 0 25px 60px rgba(0,0,0,.45), 0 12px 40px rgba(0,0,0,.4); overflow:visible;}
    .board::before{content:'';position:absolute;inset:-16px;border-radius:26px;z-index:-1;
      background:
        radial-gradient(120px 80px at 25% 30%, rgba(0,0,0,.18), transparent 60%),
        radial-gradient(140px 90px at 70% 65%, rgba(255,255,255,.06), transparent 60%),
        repeating-linear-gradient(90deg, #5c3619 0 7px, #6b3d1c 7px 14px, #4a2a13 14px 21px),
        linear-gradient(180deg, #5a351a 0%, #2e1a0f 100%);
      box-shadow:0 16px 40px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.25), inset 0 6px 12px rgba(255,255,255,.08), inset 0 -6px 16px rgba(0,0,0,.35)}
    .board::after{content:'';position:absolute;left:0;right:0;top:0;height:22%;border-radius:18px 18px 0 0;pointer-events:none;
      background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));mix-blend-mode:screen}

    .info-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}#track{display:inline-block;width:max-content; transform: scaleY(var(--lane-scale-y)); transform-origin: top center;}

    .lanes{display:grid;grid-template-columns:70px max-content;gap:8px;align-items:center;min-width:0; justify-content:center; position:relative;}

    .lane-label{display:flex;align-items:center;justify-content:center;font-weight:800;color:#efe7d2;
      background:linear-gradient(180deg,#3f2a1b,#27190f);border:2px solid #0b1c0f;border-radius:10px;height:30px;font-size:14px}

    /* 11 columns (10 pegs + finish) that STRETCH across the lane area */
    .holes{position:relative;display:grid;grid-template-columns:repeat(var(--cols,6), var(--hole-size));gap:clamp(4px,1.2vw,9px);background:transparent;border:0;box-shadow:none;overflow:visible;z-index:1}
    .hole{width:6px;height:calc(var(--hole-size)*0.67);opacity:0.9;background:rgba(255,255,255,.28);border-radius:3px;pointer-events:none;justify-self:center;align-self:center}
    .finish-cell{width:8px;height:calc(var(--hole-size)*0.9);border-radius:3px;background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 60%),repeating-linear-gradient(45deg,#000 0 6px,#fff 6px 12px);box-shadow:0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);justify-self:center;align-self:center;z-index:2}

    /* Wooden horse token (positioned absolutely and animated) */
    .horseMove{position:absolute;left:0;top:50%;transform:translateY(-50%);height:calc(var(--hole-size)*0.67);z-index:10;pointer-events:none;overflow:visible}
    .horseSprite{height:100%;margin-top:-14px;aspect-ratio:5/3;display:block;object-fit:contain;image-rendering:auto;align-self:center;justify-self:start}
    .horseSprite .st0{ fill:url(#woodGrad); stroke:#3b2314; stroke-width:1.2; }
    .horseSprite .st1{ fill:#3b2314; opacity:.2; }
    .horseSprite.moving{ animation: bob 420ms ease-in-out infinite; }
    @keyframes bob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-2px) } }
    @media (prefers-reduced-motion: reduce){ .horseSprite.moving{ animation:none } .horseMove{position:absolute;left:0;top:50%;transform:translateY(-50%);height:calc(var(--hole-size)*0.67);z-index:10;pointer-events:none;overflow:visible} }

    .finish{background:linear-gradient(180deg,#ffea94,#ffd64d);border:8px solid #2b1f05;border-radius:16px;
      display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);
      font-weight:900;color:#1b1403;letter-spacing:.2em;min-width:60px}

    .grid{display:grid;grid-template-columns:max-content;gap:12px;margin-top:12px;justify-content:center;gap:12px;margin-top:12px}
    @media (min-width: 1000px){ .grid{grid-template-columns:2fr 1fr; justify-content:center;gap:12px;margin-top:12px} }
    .card{background:rgba(0,0,0,.25);border-radius:16px;padding:12px}
    .players .row{justify-content:space-between}
    .avatar{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;margin-right:8px;
      box-shadow:0 1px 0 rgba(255,255,255,.15), 0 3px 8px rgba(0,0,0,.35);background:var(--bg);color:#fff;font-size:14px}
    .hand{display:flex;flex-wrap:wrap;gap:6px}
    .playing-card{width:clamp(44px, 12vw, 64px);aspect-ratio:2/3;border-radius:8px;background:#fff;color:#111;border:1px solid #d0d7e2;
      box-shadow:0 2px 6px rgba(0,0,0,.35);display:grid;grid-template-rows:auto 1fr auto;padding:6px}
    .playing-card.red{color:#b91c1c}
    .playing-card .rank{font-weight:800}
    .playing-card .suit{font-size:clamp(18px, 6vw, 28px);text-align:center}
    .playing-card .corner{font-size:12px;opacity:.9;justify-self:end}

    table.season{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:15px}
    table.season th, table.season td{padding:8px 10px;text-align:left}
    table.season thead th{color:#e2e8f0;font-weight:800}
    table.season tbody tr{background:rgba(0,0,0,.18);border-radius:10px;overflow:hidden}
    table.season tbody td{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(0,0,0,.25)}
    .right{text-align:right}
    .up{color:#86efac} .down{color:#fca5a5}
  
    /* Shares bar pinned near top */
    .shares-bar{
      display:block;
      position:sticky; top:0; z-index:20;
      padding:8px 12px; margin:0;
      background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.18) 100%);
      backdrop-filter: blur(4px);
      border-bottom:1px solid rgba(0,0,0,.35);
    }
    .shares-title{ font-weight:800; margin:0 0 6px 2px; letter-spacing:.02em; color:#efe7d2; }
    .hand{ display:flex; gap:8px; overflow-x:auto; padding:4px 2px; }
    .shares-bar.hidden{ display:none; }
    
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:1000}

.modal.open{display:flex}

.modal-dialog{background:#1b1009;border:1px solid rgba(0,0,0,.4);border-radius:14px;padding:16px 16px 12px;box-shadow:0 20px 60px rgba(0,0,0,.6);width:min(92vw,520px);color:#fff}

.modal .form-row{display:flex;align-items:center;gap:10px;margin:10px 0}

.modal input[type="number"]{width:100px;padding:.4rem .5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.2);background:#0f0906;color:#fff}

.modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}

.modal .actions .primary{background:#0b5ed7;color:white;border:0;border-radius:.6rem;padding:.5rem .8rem;font-weight:600}

.modal .actions button{background:#2b2b2b;color:#fff;border:0;border-radius:.6rem;padding:.5rem .8rem;cursor:pointer}

.version-banner{position:fixed; top:8px; right:10px; z-index:1000; font-size:.75rem; font-weight:700; letter-spacing:.02em; padding:4px 8px; border-radius:999px; background:rgba(0,0,0,.60); color:#fff; border:1px solid rgba(255,255,255,.15); pointer-events:none; user-select:none}

.help-btn{position:fixed; top:8px; right:56px; z-index:1001; width:26px; height:26px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.45); color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer}
.help-btn:hover{ background:rgba(0,0,0,.6); }



/* Centered top bar for #last */
#topTitleBar{position:sticky;top:0;z-index:100;display:flex;justify-content:center;align-items:center;padding:8px 10px;background:transparent;}
#topCenter{display:flex;justify-content:center;align-items:center;gap:10px;min-height:28px}



/* --- Slightly larger horse tokens --- */
:root{ --horse-scale: 2.16; } /* ~8% bigger */
.horseMove{ position:absolute; top:50%; transform:translateY(-50%); z-index:60; pointer-events:none; }
.horseSprite{ object-fit:contain; display:block; }


/* injected responsive styles */
:root{--board-max:900px}
body{font-family:system-ui,Arial,Helvetica,sans-serif;margin:0;padding:0;}
.header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.75rem 1rem;background:#222;color:#fff;}
.players{display:flex;flex-wrap:wrap;gap:0.5rem;}
.player{padding:0.25rem 0.5rem;border-radius:999px;background:#444;color:#fff;font-size:0.9rem}
.player.current{outline:2px solid #fff}
.board-wrap{display:grid;grid-template-columns:1fr;place-items:center;padding:1rem}
.board{width:min(100%,var(--board-max));}
.controls{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center;padding:0.75rem}
button{padding:0.6rem 1rem;border:0;border-radius:0.7rem;background:#0b5ed7;color:#fff;font-weight:600;}
button:disabled{opacity:0.5;cursor:not-allowed}
@media(min-width:900px){.board-wrap{grid-template-columns:300px 1fr;align-items:start}.sidebar{padding:1rem}.board{justify-self:stretch}}


/* v2.6 race presentation */
.race-call{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:10px;padding:8px 12px;border-radius:14px;background:rgba(8,8,8,.34);border:1px solid rgba(255,255,255,.12)}
.die{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#fff;color:#111;font-size:1.3rem;font-weight:900;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.25)}
.die-plus{font-weight:900;color:var(--gold)}
.race-message{font-weight:700;text-align:center}
.dice-pop{animation:dicePop .42s ease}
@keyframes dicePop{0%{transform:scale(.96)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
.countdown-overlay,.winner-overlay{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;background:rgba(8,4,2,.78);backdrop-filter:blur(5px)}
.countdown-overlay.hidden,.winner-overlay.hidden{display:none}
#countdownNumber{font-size:clamp(6rem,22vw,13rem);line-height:.9;font-weight:1000;color:var(--gold);text-shadow:0 8px 35px #000;animation:pulseCount .65s ease infinite}
.countdown-label{text-align:center;font-size:1.3rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@keyframes pulseCount{0%{transform:scale(.75);opacity:.4}65%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.winner-panel{width:min(92vw,520px);padding:28px;border-radius:22px;text-align:center;background:linear-gradient(160deg,#5a3215,#211006);border:2px solid rgba(255,214,77,.65);box-shadow:0 26px 80px #000}
.winner-kicker{text-transform:uppercase;letter-spacing:.18em;color:#f5d983;font-weight:800}
.winner-horse{font-size:clamp(2rem,9vw,4rem);font-weight:1000;margin:.35rem 0;color:#fff3bd}
.winner-payout{color:#e8ddc8;margin-bottom:16px}
.winner-list{display:grid;gap:8px;margin:14px 0 18px;text-align:left}
.winner-list>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.25)}
.history-card{min-width:0}
.race-history{display:grid;gap:8px}
.history-row{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.2)}
.history-row>div:nth-child(2){grid-column:1;color:var(--muted);font-size:.9rem}
.history-row>span{grid-column:2;grid-row:1/3;align-self:center;color:var(--gold);font-weight:800}
@media(max-width:650px){.race-call{flex-wrap:wrap}.race-message{flex-basis:100%}.winner-list>div{flex-direction:column}.history-row{grid-template-columns:1fr}.history-row>span{grid-column:1;grid-row:auto}}
@media(prefers-reduced-motion:reduce){.dice-pop,#countdownNumber{animation:none}}

/* v2.7 mobile-first experience */
:root{
  --surface:#21140d;
  --surface-2:#302017;
  --surface-3:#160d08;
  --line:rgba(255,255,255,.12);
  --gold-2:#fff1a8;
  --green:#1f8a4c;
  --tap:52px;
}
body{min-width:320px;background:radial-gradient(circle at 50% -10%,#55321c 0,#24130b 34%,#100906 72%);}
.container{width:min(100%,1180px);padding:12px 12px calc(22px + env(safe-area-inset-bottom));}
.container>header{padding:6px 4px 14px;margin:0;align-items:flex-start;}
.brand-lockup{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:linear-gradient(145deg,#ffe487,#b97718);box-shadow:0 7px 20px rgba(0,0,0,.35);font-size:25px}.brand-lockup h1{font-size:clamp(1.35rem,6vw,2rem);line-height:1;margin:0}.brand-lockup p{margin:5px 0 0;color:#d7c7b8;font-size:.82rem}
#status{padding-top:4px;color:#9fe7ba!important;font-weight:700}
#lobby{max-width:560px;margin:5vh auto 0;padding:22px;border:1px solid rgba(255,214,77,.22);background:linear-gradient(160deg,rgba(67,40,24,.95),rgba(25,14,9,.98));box-shadow:0 24px 70px rgba(0,0,0,.45)}
.lobby-hero{text-align:center;margin-bottom:20px}.lobby-eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#f5cf64;font-weight:900;font-size:.72rem}.lobby-hero h2{font-size:clamp(1.8rem,8vw,2.6rem);line-height:1.05;margin:8px 0}.lobby-hero p{color:#d4c5b9;margin:0 auto;max-width:34ch}.lobby-tip{margin:16px 0 0;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.055);color:#d8cabd;text-align:center;font-size:.9rem}
#lobby .controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0}#lobby input{grid-column:1/-1;width:100%;background:#120b07;border:1px solid rgba(255,255,255,.17);font-weight:650}#lobby #newCode{grid-column:1/-1}#lobby button{min-height:var(--tap);font-size:1rem}
button{min-height:var(--tap);border:1px solid var(--line);background:linear-gradient(180deg,#34251d,#21150f);box-shadow:0 4px 12px rgba(0,0,0,.2)}button.primary{background:linear-gradient(180deg,#ffe16b,#d79b24);color:#241505;box-shadow:0 6px 16px rgba(191,125,15,.28)}button.secondary{background:linear-gradient(180deg,#3c2b22,#281b15)}button:active{transform:translateY(1px)}
#room>.row{position:sticky;top:0;z-index:80;margin:0 -12px 12px;padding:10px 12px;background:rgba(20,11,7,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);align-items:center}.room-heading{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:7px}.room-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:#d4bd9f}.room-heading h2{grid-row:2;margin:0!important;font-size:1.65rem;letter-spacing:.1em;color:var(--gold-2)}.icon-button{grid-column:3;grid-row:1/3;min-height:36px;padding:7px 10px;border-radius:10px;font-size:.78rem}
#room>.row>.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:7px;flex:1;max-width:390px}#room>.row>.controls button{min-height:42px;padding:8px;font-size:.82rem}.roll-button{background:linear-gradient(180deg,#2ba85f,#166d3b);border-color:rgba(111,255,166,.32);font-weight:900}.roll-button span{font-size:1.1rem}
.board-wrap{display:grid!important;grid-template-columns:minmax(0,1fr)!important;padding:0!important;gap:10px;width:100%;justify-items:stretch}.scratch-col{order:2;border-width:3px;padding:10px;display:none}.finish{display:none}.board{order:1;width:100%!important;max-width:100%;padding:10px 8px;border-width:4px;border-radius:15px;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch}.info-bar{position:sticky;left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.info-bar .badge{justify-content:center;padding:7px 5px;border-radius:11px;background:rgba(17,12,9,.72);font-size:.72rem;min-width:0}.settings-slot{position:absolute!important;right:6px;top:-48px}.settings-slot button{min-height:38px;width:38px;padding:5px!important;background:rgba(25,15,10,.9)!important;border:1px solid var(--line)!important;border-radius:12px!important}
#track{min-width:max-content}.lane-label{position:sticky;left:0;z-index:35;background:#6b3e20;border-radius:8px;box-shadow:5px 0 8px rgba(45,22,10,.42)}.race-call{position:sticky;left:0;min-height:58px;background:rgba(12,8,6,.82)}.die{width:43px;height:43px;font-size:1.45rem}.race-message{font-size:.91rem}
.grid{display:grid!important;grid-template-columns:1fr!important;width:100%;padding:0!important;gap:10px}.grid>.card{width:100%;min-width:0;border:1px solid rgba(255,255,255,.08);background:rgba(15,9,6,.48)}.grid>.players{display:block!important}.scratch-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.scratch-box{padding:8px 4px;font-size:.82rem}.history-card{order:3}.grid>.card:last-child{order:4;overflow-x:auto}.season{min-width:420px}
.shares-bar{top:0;padding:6px 10px;background:rgba(19,11,7,.96);backdrop-filter:blur(12px)}.shares-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em}.playing-card{width:47px;flex:0 0 47px}
.countdown-overlay{background:radial-gradient(circle,rgba(89,50,18,.82),rgba(7,3,2,.96))}.winner-panel{max-height:88dvh;overflow:auto;padding:22px 18px}.winner-panel button{width:100%}
body.race-focus #room>.row{opacity:.96}body.race-focus .grid{display:none!important}body.race-focus .board{min-height:calc(100dvh - 190px);display:flex;flex-direction:column;justify-content:center}body.race-focus .info-bar{margin-bottom:16px}body.race-focus .race-call{margin-top:18px}
@media(max-width:560px){.container{padding-inline:9px}.container>header{padding-inline:2px}#room>.row{margin-inline:-9px;padding-inline:9px;align-items:flex-end}.room-heading{flex:0 0 auto}#room>.row>.controls{grid-template-columns:repeat(2,minmax(88px,1fr))}.board{border-left-width:2px;border-right-width:2px;padding-inline:5px}.info-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-slot{right:3px;top:-45px}.scratch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.race-message{flex-basis:100%;font-size:.84rem}.version-banner{top:auto;bottom:8px;right:8px}.help-btn{top:auto;bottom:8px;right:58px}}
@media(min-width:760px){#lobby{padding:30px}.board-wrap{grid-template-columns:170px minmax(0,1fr)!important;align-items:start}.scratch-col{display:flex;order:1}.board{order:2}.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.grid>.card:last-child{grid-column:1/-1}}
@media(min-width:1050px){#room>.row>.controls{display:flex}.board-wrap{grid-template-columns:180px minmax(0,1fr) 62px!important}.finish{display:flex;order:3}.grid{grid-template-columns:1fr 1fr 1fr!important}.grid>.card:last-child{grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){button:active{transform:none}}

/* ==========================================================
   v2.8 Phase 1 visual upgrade — unified responsive layer
   ========================================================== */
:root{
  --lane-scale-y:1;
  --hole-size:clamp(34px,4.1vw,64px);
  --track-gap:clamp(5px,.75vw,11px);
}
.container{max-width:1600px;padding:clamp(10px,1.5vw,24px)}
.board-wrap{width:100%;align-items:start}
.board{
  width:100%!important;
  max-width:none!important;
  min-width:0;
  overflow-x:auto!important;
  padding:clamp(10px,1.2vw,20px)!important;
}
#track{
  display:block;
  width:max-content;
  min-width:100%;
  transform:none!important;
  transform-origin:center;
}
.lanes{grid-template-columns:clamp(54px,5vw,80px) max-content;gap:clamp(5px,.65vw,10px);min-height:clamp(34px,4vw,58px)}
.holes{grid-template-columns:repeat(var(--cols,6),var(--hole-size));gap:var(--track-gap)}
.lane-label{height:clamp(32px,3.5vw,48px);font-size:clamp(.85rem,1.15vw,1.08rem)}
.hole{height:calc(var(--hole-size)*.72);width:clamp(6px,.55vw,9px)}
.finish-cell{height:calc(var(--hole-size)*.92);width:clamp(8px,.7vw,12px)}
.horseMove{
  top:50%;
  transform:translate3d(0,-50%,0);
  transition:transform 680ms cubic-bezier(.2,.78,.25,1.08);
  will-change:transform;
}
.horseSprite{margin-top:0;height:115%;filter:drop-shadow(0 5px 5px rgba(0,0,0,.5));transform-origin:50% 75%}
.horseSprite.moving{animation:gallop .16s ease-in-out infinite alternate}
.jockeyOverlay{transition:transform 680ms cubic-bezier(.2,.78,.25,1.08)}
@keyframes gallop{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}

.info-bar{
  position:relative!important;
  left:auto!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(92px,1fr)) auto!important;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
}
.settings-slot{
  position:static!important;
  display:flex!important;
  margin:0!important;
  justify-content:flex-end!important;
}
#settingsBtn{
  display:grid!important;
  place-items:center;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:0!important;
  border:1px solid rgba(255,214,77,.38)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#493522,#271910)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.28)!important;
  font-size:1.25rem!important;
}
#settingsBtn:hover{filter:brightness(1.15)}

.race-call{min-height:76px;gap:12px;padding:12px 18px;overflow:hidden}
.die{
  width:58px;height:58px;border-radius:13px;font-size:1.9rem;
  transform-style:preserve-3d;transform-origin:center;
}
.die.rolling{animation:dice-tumble .35s linear infinite;box-shadow:0 0 0 3px rgba(255,214,77,.28),0 12px 24px rgba(0,0,0,.42)}
.die.landed{animation:dice-land .48s cubic-bezier(.18,.85,.3,1.35)}
@keyframes dice-tumble{0%{transform:rotate(0) scale(1)}25%{transform:rotate(95deg) scale(.9)}50%{transform:rotate(180deg) scale(1.06)}75%{transform:rotate(275deg) scale(.92)}100%{transform:rotate(360deg) scale(1)}}
@keyframes dice-land{0%{transform:translateY(-16px) rotate(-18deg) scale(1.18)}55%{transform:translateY(5px) rotate(7deg) scale(.94)}100%{transform:none}}

.countdown-overlay{background:radial-gradient(circle at center,rgba(133,76,21,.88),rgba(8,3,2,.97))}
#countdownNumber{font-size:clamp(5rem,18vw,13rem);line-height:.86;font-weight:1000;letter-spacing:-.05em;color:#ffe27a;text-shadow:0 8px 0 #7b4512,0 18px 50px #000}
.countdown-label{font-size:clamp(1rem,3vw,1.55rem);margin-top:20px;text-transform:uppercase;letter-spacing:.2em;font-weight:900;color:#fff4cf;text-align:center}
.countdown-hit{animation:countdown-hit .62s cubic-bezier(.18,.86,.27,1.25)}
@keyframes countdown-hit{0%{opacity:0;transform:scale(.25) rotate(-5deg)}62%{opacity:1;transform:scale(1.16) rotate(1deg)}100%{transform:scale(1)}}

.winner-overlay{overflow:hidden;background:radial-gradient(circle at 50% 30%,rgba(145,92,20,.75),rgba(5,2,1,.95))}
.winner-panel{position:relative;z-index:3;animation:winner-arrive .72s cubic-bezier(.16,.9,.23,1.18);box-shadow:0 0 0 5px rgba(255,216,91,.12),0 30px 100px #000}
.winner-horse{font-size:clamp(2rem,7vw,4.2rem);color:#ffe276;text-shadow:0 4px 0 #75410d}
@keyframes winner-arrive{from{opacity:0;transform:translateY(45px) scale(.72) rotate(-2deg)}to{opacity:1;transform:none}}
.confetti-field{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.confetti-field i{position:absolute;left:var(--x);top:-8%;width:10px;height:18px;border-radius:2px;background:hsl(var(--hue) 90% 58%);animation:confetti-fall var(--duration) linear var(--delay) forwards}
@keyframes confetti-fall{to{transform:translate3d(calc((var(--x) - 50%) * .25),115vh,0) rotate(var(--spin));opacity:.75}}

@media(min-width:1050px){
  .board-wrap{grid-template-columns:210px minmax(0,1fr) 74px!important;gap:18px}
  .grid{grid-template-columns:1fr 1fr 1.2fr!important}
  .board{min-height:660px;display:flex;flex-direction:column;justify-content:center}
  .race-call{margin-top:20px}
}
@media(min-width:1450px){
  :root{--hole-size:66px;--track-gap:12px}
  .container{max-width:1800px}
  .board-wrap{grid-template-columns:230px minmax(0,1fr) 82px!important}
  .board{min-height:760px}
}
@media(max-width:759px){
  :root{--hole-size:40px;--track-gap:6px}
  .info-bar{grid-template-columns:repeat(2,minmax(0,1fr)) auto!important}
  .settings-slot{grid-column:3;grid-row:1}
  #settingsBtn{width:42px!important;height:42px!important;min-height:42px!important}
  .board{padding:9px 6px!important}
  .race-call{min-height:68px;padding:9px;gap:8px}
  .die{width:48px;height:48px;font-size:1.55rem}
  .horseMove{transition-duration:520ms}
}
@media(prefers-reduced-motion:reduce){
  .horseMove,.jockeyOverlay{transition-duration:1ms!important}
  .horseSprite.moving,.die.rolling,.die.landed,.countdown-hit,.winner-panel,.confetti-field i{animation:none!important}
}