:root{
  --glass:rgba(14,19,22,.76);
  --line:rgba(255,255,255,.16);
  --gold:#ffd96a;
  --text:#fff9ee;
}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#75b85e;color:var(--text);overscroll-behavior:none}
button,input{font:inherit}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{opacity:0;pointer-events:none!important}

/* ===== MOBILE-FIRST RACE HUD ===== */
#hud{
  position:absolute;z-index:5;
  left:max(7px,env(safe-area-inset-left));
  right:max(7px,env(safe-area-inset-right));
  top:max(7px,env(safe-area-inset-top));
  display:grid;
  grid-template-columns:minmax(0,1.2fr) auto minmax(0,1fr);
  grid-template-areas:"brand position timer" "progress progress progress";
  align-items:center;gap:5px 5px;
  pointer-events:none;transition:.18s ease
}
.brand-pill{grid-area:brand;justify-self:start;min-width:0;display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:11px;background:linear-gradient(180deg,rgba(91,57,28,.95),rgba(50,29,15,.91));border:1px solid rgba(255,231,171,.3);box-shadow:0 4px 14px rgba(45,24,7,.24),inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.brand-pill b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8.8px;letter-spacing:.35px}.brand-pill small{display:block;font-size:5.7px;opacity:.62;letter-spacing:.55px;margin-top:1px}.horse-mark{font-size:14px;line-height:1}
.hud-card{display:flex;align-items:center;gap:4px;padding:4px 7px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(180deg,rgba(38,42,44,.9),rgba(14,18,21,.8));box-shadow:0 5px 16px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(8px);min-width:0}
.position-card{grid-area:position;justify-self:center}.timer-card{grid-area:timer;justify-self:end}.hud-icon{font-size:12px}.hud-card small{display:block;font-size:5.7px;letter-spacing:.7px;opacity:.62}.hud-card strong{display:block;font-size:10.5px;line-height:1.05;white-space:nowrap}
.progress-shell{grid-area:progress;position:relative;width:calc(100% - 16px);justify-self:center;height:5px;border-radius:999px;background:rgba(18,24,27,.52);border:1px solid rgba(255,255,255,.13);box-shadow:0 2px 8px rgba(0,0,0,.18);overflow:visible;margin-top:1px}
#progressBar{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#ffe36f,#ff9c32);box-shadow:0 0 8px rgba(255,201,74,.45);transition:width .06s linear}
#finishFlag{position:absolute;right:-8px;top:-8px;font-style:normal;font-size:13px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
#racerDots{position:absolute;inset:0}.racer-dot{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.32)}.racer-dot.me{width:10px;height:10px;background:#ffd75e}.racer-dot.ai1{background:#df5e70}.racer-dot.ai2{background:#4d8fe8}.racer-dot.ai3{background:#2f9d73}

#stats{position:absolute;z-index:5;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));top:max(54px,calc(env(safe-area-inset-top) + 50px));display:flex;align-items:center;justify-content:center;gap:4px;transition:.18s ease;pointer-events:none}.stat-chip,.boost-box{background:rgba(14,19,22,.67);border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 13px rgba(0,0,0,.17);backdrop-filter:blur(7px);border-radius:9px;padding:5px 7px;font-size:9px}.score-chip b{color:#ffe173}.boost-box{display:flex;align-items:center;gap:5px;flex:1;max-width:142px}.boost-box span{font-weight:900;font-size:6.6px;letter-spacing:.45px}.boost-track{flex:1;height:5px;background:rgba(255,255,255,.13);border-radius:999px;overflow:hidden}.boost-track div{height:100%;width:100%;background:linear-gradient(90deg,#ffe66f,#ff9029);border-radius:inherit;box-shadow:0 0 6px rgba(255,195,69,.45)}.speed-chip{white-space:nowrap}

/* ===== MOBILE TOUCH CONTROLS ===== */
#controls{position:absolute;z-index:6;left:max(9px,env(safe-area-inset-left));right:max(9px,env(safe-area-inset-right));bottom:max(9px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;transition:.18s ease;pointer-events:none}.control-group{display:flex;gap:7px;pointer-events:auto}.game-btn{width:58px;height:58px;border-radius:18px;border:1px solid rgba(255,255,255,.3);background:linear-gradient(180deg,rgba(41,48,54,.88),rgba(15,21,26,.88));box-shadow:0 7px 20px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.16);color:white;font-weight:950;font-size:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(7px);user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}.game-btn small{font-size:6.6px;letter-spacing:.55px;margin-top:1px}.game-btn.jump{background:linear-gradient(180deg,rgba(49,111,154,.93),rgba(25,54,87,.92))}.game-btn.boost{background:linear-gradient(180deg,rgba(249,181,60,.97),rgba(184,88,16,.95));color:#fffbe3}.game-btn:active,.game-btn.pressed{transform:translateY(2px) scale(.95);filter:brightness(1.12)}

#raceMessage{position:absolute;z-index:8;left:50%;top:34%;transform:translate(-50%,-50%) scale(.65);font-weight:1000;font-size:clamp(58px,23vw,100px);line-height:.86;text-align:center;letter-spacing:-3px;color:#fff;text-shadow:0 5px 0 rgba(72,40,15,.42),0 10px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none}.message-show{animation:messagePop .62s cubic-bezier(.18,.8,.2,1)}@keyframes messagePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}24%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}73%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.93)}}
#toast{position:absolute;z-index:8;left:50%;top:16%;transform:translateX(-50%);max-width:85vw;padding:6px 10px;border-radius:999px;background:rgba(15,19,22,.78);border:1px solid rgba(255,255,255,.15);font-size:9px;font-weight:800;letter-spacing:.25px;opacity:0;transition:.18s ease;pointer-events:none;backdrop-filter:blur(7px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#toast.show{opacity:1;transform:translateX(-50%) translateY(-2px)}
#comboBox{position:absolute;z-index:7;right:max(10px,env(safe-area-inset-right));top:max(84px,calc(env(safe-area-inset-top) + 80px));text-align:right;pointer-events:none;transition:.18s ease;transform-origin:right top}#comboBox span{display:block;font-size:17px;font-weight:1000;color:#ffe16f;text-shadow:0 2px 8px rgba(0,0,0,.25)}#comboBox small{font-size:5.7px;letter-spacing:.8px;opacity:.72}.hidden-combo{opacity:0;transform:scale(.82)}.combo-show{opacity:1;transform:scale(1)}
.sound-btn{position:absolute;z-index:9;right:max(9px,env(safe-area-inset-right));bottom:max(76px,calc(env(safe-area-inset-bottom) + 72px));width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(17,22,25,.62);color:white;box-shadow:0 4px 14px rgba(0,0,0,.2);backdrop-filter:blur(7px);cursor:pointer;font-size:15px}

/* ===== MENU / RESULT ===== */
#overlay{position:absolute;z-index:10;inset:0;display:grid;place-items:center;padding:15px 12px max(15px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 28%,rgba(255,255,255,.03),rgba(7,11,14,.58));backdrop-filter:blur(2px);overflow:auto}
.panel{width:min(92vw,390px);max-height:calc(100dvh - 28px);overflow:auto;border-radius:24px;padding:19px 15px 15px;background:linear-gradient(160deg,rgba(57,41,27,.95),rgba(20,25,28,.96));border:1px solid rgba(255,238,198,.21);box-shadow:0 25px 70px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.11);text-align:center;position:relative}.panel:before{content:"";position:absolute;inset:-110px auto auto -90px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,206,89,.12),transparent 68%);pointer-events:none}.logo-round{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin:0 auto 5px;background:linear-gradient(145deg,#ffe77f,#c97d24);border:4px solid rgba(255,255,255,.92);box-shadow:0 9px 28px rgba(0,0,0,.3);font-size:34px;position:relative}.panel h1{font-size:28px;margin:4px 0 2px;letter-spacing:-.8px}.eyebrow{font-size:7.5px;font-weight:900;letter-spacing:1.3px;color:#ffd969;margin-top:3px}.panel .subtitle{margin:5px auto 7px;max-width:340px;color:rgba(255,255,255,.78);font-size:10.5px;line-height:1.38}.reward-note{margin:4px auto 11px;max-width:340px;padding:7px 9px;border-radius:10px;background:rgba(255,216,91,.065);border:1px solid rgba(255,216,91,.1);font-size:8.2px;line-height:1.4;color:rgba(255,255,255,.72)}.reward-note b{color:#ffe277}.feature-strip{display:none!important}
.name-row{display:flex;gap:7px;justify-content:center;margin:9px 0 9px}.name-row input{width:min(230px,68vw);border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.085);color:white;padding:9px 11px;outline:none;font-size:12px}.name-row input:focus{border-color:#ffd85b;box-shadow:0 0 0 3px rgba(255,216,91,.1)}
.primary,.secondary{border:0;border-radius:12px;padding:10px 15px;font-weight:950;cursor:pointer;box-shadow:0 6px 15px rgba(0,0,0,.2);font-size:11px}.primary{background:linear-gradient(180deg,#ffe67c,#ffbf36);color:#4f300c}.secondary{background:rgba(255,255,255,.1);color:white;border:1px solid rgba(255,255,255,.14)}.button-row{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.button-row .primary{width:min(235px,72vw)}
.tips{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:10px 0 1px}.tip{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.068);border-radius:10px;padding:6px 4px;font-size:7.2px;color:rgba(255,255,255,.75)}.tip b{display:block;color:white;font-size:13px;margin-bottom:1px}
.leaderboard{margin-top:10px;text-align:left;background:rgba(255,255,255,.048);border:1px solid rgba(255,255,255,.07);border-radius:13px;padding:8px 9px;max-height:158px;overflow:auto}.leaderboard-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;font-size:9.5px}.leaderboard-title small{opacity:.58;font-size:8px}.row{display:grid;grid-template-columns:30px 1fr auto;gap:5px;align-items:center;padding:5px 1px;border-top:1px solid rgba(255,255,255,.055);font-size:9.5px}.rank{font-weight:900}.score{color:#ffe074;font-weight:900}.result-score{font-size:37px;font-weight:1000;color:#ffe176;line-height:1;margin:6px 0}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0}.result-cell{background:rgba(255,255,255,.055);padding:8px 5px;border-radius:11px}.result-cell small{display:block;opacity:.6;font-size:7px;letter-spacing:.5px}.result-cell b{font-size:13px}.medal{font-size:47px;line-height:1;margin:2px}.new-badge{display:inline-block;padding:4px 7px;border-radius:999px;background:rgba(255,216,91,.1);border:1px solid rgba(255,216,91,.16);color:#ffe177;font-size:7px;font-weight:900;letter-spacing:.7px;margin-bottom:1px}

/* Slightly larger phones */
@media(min-width:430px){
  #hud{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));gap:7px}.brand-pill{padding:6px 9px}.brand-pill b{font-size:10px}.brand-pill small{font-size:6.3px}.hud-card{padding:5px 8px}.hud-icon{font-size:13px}.hud-card strong{font-size:11.5px}.hud-card small{font-size:6.2px}.progress-shell{height:6px}
  #stats{top:max(59px,calc(env(safe-area-inset-top) + 55px));gap:5px}.stat-chip,.boost-box{font-size:10px;padding:6px 8px}.boost-box{max-width:160px}.game-btn{width:64px;height:64px;font-size:27px}.sound-btn{bottom:max(84px,calc(env(safe-area-inset-bottom) + 80px))}
}

/* Landscape/desktop still works, but portrait remains the design target */
@media(min-width:760px){
  #hud{left:16px;right:16px;top:12px;grid-template-columns:180px auto 160px;gap:9px}.brand-pill b{font-size:12px}.brand-pill small{font-size:7px}.horse-mark{font-size:19px}.hud-card{padding:7px 11px}.hud-icon{font-size:16px}.hud-card strong{font-size:14px}.progress-shell{width:min(680px,72vw);height:7px}.panel{width:min(520px,90vw);padding:24px}.panel h1{font-size:36px}.panel .subtitle{font-size:12px;max-width:450px}.reward-note{font-size:9px;max-width:450px}.game-btn{width:68px;height:68px}.tips{gap:7px}.tip{font-size:8px}.tip b{font-size:16px}
}

@media(max-height:650px) and (orientation:landscape){.tips{display:none}.leaderboard{max-height:105px}.panel{max-height:94dvh}.logo-round{width:50px;height:50px;font-size:28px}.panel h1{font-size:24px}.reward-note{margin-bottom:6px}.sound-btn{bottom:70px}}