/* Brand fonts, self-hosted like NASCAR (fonts/ holds the same Google Fonts files) */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/inter-v20-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../fonts/inter-v20-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 900; font-display: swap; src: url('../fonts/inter-v20-latin-900.woff2') format('woff2'); }
@font-face { font-family: 'Saira Extra Condensed'; font-weight: 800; font-display: swap; src: url('../fonts/saira-extra-condensed-v15-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Saira Semi Condensed'; font-weight: 800; font-display: swap; src: url('../fonts/saira-semi-condensed-v15-latin-800.woff2') format('woff2'); }

:root { --bg: #1a1a2e; --gold: #ffd966; --green: #53D337; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1a1a2e; --gold: #ffd966; --green: #53D337; } }
:root[data-theme="dark"] { --bg: #1a1a2e; --gold: #ffd966; --green: #53D337; }
html { height: 100%; scroll-padding-top: env(safe-area-inset-top, 0px); }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
body { height: 100%; background: var(--bg); overflow: hidden; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---- top HUD: NASCAR game.js injectHudStyles (house component), safe-area aware ---- */
#gameHUD{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;height:auto;padding:0;font-family:'Inter',system-ui,sans-serif}
.hud-bar{position:relative;width:100%;height:70px}
.hud-bar::before{content:'';position:absolute;left:0;right:0;top:calc(-10px - env(safe-area-inset-top,0px));height:calc(120px + env(safe-area-inset-top,0px));
  background:linear-gradient(to bottom, rgba(16,31,41,1) 0%, rgba(16,31,41,0.85) 40%, transparent 100%);z-index:0}
.hud-sound{position:absolute;left:4vw;top:25px;width:24px;height:24px;cursor:pointer;z-index:2;opacity:0.8;filter:brightness(0) invert(1)}
.hud-sound:active{opacity:0.5}
.hud-help{position:absolute;right:4vw;top:25px;width:24px;height:24px;cursor:pointer;z-index:2;opacity:0.8;filter:brightness(0) invert(1)}
.hud-help:active{opacity:0.5}
.hud-label{position:absolute;top:23.5px;font-size:9px;font-weight:700;color:#ffffff;letter-spacing:0.5px;z-index:1}
.hud-label-time{left:27vw;transform:translateX(-50%)}
.hud-label-balance{left:50%;transform:translateX(-50%);top:30px}
.hud-label-round{right:27vw;left:auto;transform:translateX(50%)}
.hud-value{position:absolute;top:36px;font-size:15px;font-weight:700;color:#ffd966;z-index:1}
.hud-value-time{left:27vw;transform:translateX(-50%)}
.hud-value-round{right:27vw;left:auto;transform:translateX(50%)}
.hud-value-balance{position:absolute;top:46px;left:calc(50% + 15px);font-family:'Saira Semi Condensed','Arial Narrow',sans-serif;font-size:36px;font-weight:800;
  color:#ffffff;line-height:1;z-index:1;font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
#timeMain{position:absolute;right:0;top:0;white-space:nowrap}
#timeFrac{position:absolute;left:0;top:0;white-space:nowrap}
.hud-sound.off{opacity:0.35}
@media (min-width: 1280px) {
  .hud-sound{left:4%!important} .hud-help{right:4%!important}
  .hud-label-time{left:27%!important} .hud-label-round{right:27%!important}
  .hud-value-time{left:27%!important} .hud-value-round{right:27%!important}
}
/* speedo chip: sits where the health bar was (no health in this game) */
#healthWrap{position:fixed;z-index:49;left:50%;transform:translateX(-50%);top:calc(98px + env(safe-area-inset-top,0px));width:min(420px,72vw);height:10px;
  border-radius:5px;background:rgba(0,0,0,0.45);overflow:hidden}
#healthFill{height:100%;width:100%;border-radius:5px;background:#53D337;transition:width 0.25s ease, background 0.4s ease, filter 0.15s ease}
#hpHalfIcon,#hpFullIcon{position:fixed;z-index:51;top:calc(95px + env(safe-area-inset-top,0px));width:15px;height:15px}
#hpHalfIcon svg,#hpFullIcon svg{width:100%;height:100%;display:block}
#hpHalfIcon{left:calc(50% - min(210px, 36vw) - 22px)}
#hpFullIcon{right:calc(50% - min(210px, 36vw) - 22px)}
#speedoWrap{position:fixed;z-index:51;left:50%;transform:translateX(-50%);top:calc(119px + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:5px;background:rgba(0,0,0,0.35);border-radius:6px;padding:4px 8px}
.spd-left{display:flex;align-items:center;gap:5px}
#speedo{display:block;width:78px;height:26px}
#speedoLabel{font-family:'Inter',system-ui,sans-serif;font-size:9px;font-weight:700;color:rgba(255,255,255,0.75);letter-spacing:0.5px}
#powerWrap{position:absolute;right:100%;margin-right:8px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1.5px}
#powerWrap .pip{width:9px;height:4px;border-radius:2px;background:rgba(255,255,255,0.18);transition:background 0.25s ease}
#powerWrap .pip.on{background:#dde4ea;box-shadow:0 0 6px rgba(221,228,234,0.6)}
#getReady{position:fixed;display:none;top:30%;left:50%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;white-space:nowrap;
  font-family:'Saira Extra Condensed','Arial Narrow',system-ui,sans-serif;font-weight:800;font-size:46px;letter-spacing:5px;color:#ffffff;
  text-shadow:0 3px 18px rgba(0,0,0,0.55)}

/* ---- controls: NASCAR game.css ---- */
body.raceover .ctl { opacity: 0 !important; pointer-events: none !important; }
.ctl{transition:opacity 0.35s ease;position:fixed;border:none;border-radius:50%;z-index:4;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.92);font-family:-apple-system,system-ui,sans-serif;font-weight:700;background:rgba(55,55,60,0.48);
  touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.ctl.held{filter:brightness(1.4);transform:scale(0.94)}
/* driving controls: sized to the screen width (smaller on narrow phones, never larger than before less ~12%)
   and kept inside the safe area (rounded corners, notches), so nothing is cut off at the edges */
:root { --steer: min(104px, 26vw); --go: min(90px, 23vw); --ctl-edge: 12px; --ctl-gap: 10px;
        --ctl-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
#btnLeft  { left: calc(var(--ctl-edge) + env(safe-area-inset-left, 0px)); bottom: var(--ctl-bottom);
            width: var(--steer); height: var(--steer); font-size: calc(var(--steer) * 0.34); }
#btnRight { left: calc(var(--ctl-edge) + env(safe-area-inset-left, 0px) + var(--steer) + var(--ctl-gap)); bottom: var(--ctl-bottom);
            width: var(--steer); height: var(--steer); font-size: calc(var(--steer) * 0.34); }
#btnAccel { right: calc(var(--ctl-edge) + env(safe-area-inset-right, 0px)); bottom: var(--ctl-bottom); width: var(--go); height: var(--go);
            background: rgba(76,155,82,0.8); font-family: 'Saira Extra Condensed', Impact, sans-serif; font-weight: 800;
            font-size: calc(var(--go) * 0.36); letter-spacing: 1px; }
#btnBrake { right: calc(var(--ctl-edge) + env(safe-area-inset-right, 0px) + (var(--go) - 54px) / 2);
            bottom: calc(var(--ctl-bottom) + var(--go) + 14px); width: 54px; height: 54px;
            background: rgba(190,76,76,0.8); font-size: 9px;
  opacity:0;pointer-events:none;transition:opacity 0.25s ease}
#btnBrake.show{opacity:1;pointer-events:auto}

/* ---- debug panel: NASCAR game.css ---- */
#gearBtn{position:fixed;top:calc(94px + env(safe-area-inset-top,0px));right:10px;z-index:52;width:42px;height:42px;border:none;border-radius:50%;
  background:rgba(0,0,0,0.6);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center;touch-action:none;
  -webkit-tap-highlight-color:transparent;cursor:pointer}
#panel{position:fixed;top:calc(142px + env(safe-area-inset-top,0px));right:10px;z-index:51;display:none;flex-direction:column;gap:6px;
  font-family:monospace;font-size:12px;max-height:calc(100% - 300px);overflow-y:auto;padding-right:2px;-webkit-overflow-scrolling:touch}
#panel.open{display:flex}
body:not(.debug) #gearBtn,body:not(.debug) #panel,body:not(.debug) #fps{display:none!important}   /* debug only with ?debug */
#panel button{background:rgba(0,0,0,0.6);color:#fff;border:1px solid #555;border-radius:6px;padding:8px 12px;font-family:monospace;font-size:12px;text-align:left;cursor:pointer}
#panel button:active{background:#333}
#panel label{background:rgba(0,0,0,0.6);color:#fff;border-radius:6px;padding:6px 10px;display:flex;justify-content:space-between;gap:8px;align-items:center}
#panel input[type=range]{width:90px}
#fps{position:fixed;left:10px;top:calc(94px + env(safe-area-inset-top,0px));z-index:51;font:11px monospace;color:#7fff7f;background:rgba(0,0,0,0.55);
  padding:4px 7px;border-radius:6px;pointer-events:none;display:none}
#fps.on{display:block}

/* ---- info overlay: house component ---- */
#infoOverlay{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.7)}
#infoOverlay.open{display:flex}
.info-panel{position:relative;width:92vw;max-width:400px;max-height:80vh;background:#1a1a1a;border-radius:12px;border:1px solid rgba(255,255,255,0.1);
  padding:24px 20px 20px;z-index:1;overflow-y:auto}
.info-close{position:absolute;top:12px;right:14px;font-size:22px;color:#888;cursor:pointer;line-height:1}
.info-close:active{color:#fff}
.info-title{font-family:'Saira Semi Condensed',sans-serif;font-size:20px;font-weight:800;text-transform:uppercase;text-align:center;margin-bottom:16px;color:#c9a44c}
.info-body{font-family:'Saira Semi Condensed',sans-serif;font-size:12px;font-weight:500;color:#cccccc;line-height:1.6;text-align:left}
.info-section-title{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#c9a44c;margin:14px 0 6px}
.info-section-title:first-child{margin-top:0}
.info-list{margin:4px 0;padding-left:14px;list-style:none}
.info-list li{margin-bottom:2px;position:relative;padding-left:10px;color:#bbbbbb}
.info-list li::before{content:'–';position:absolute;left:0;color:#888}


/* ---- pre-game + results screens: NASCAR injectScreenStyles (house components), adapted ---- */
.screen{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center}
.screen.active{display:flex}
#screenLoader{background:radial-gradient(circle, #313030 0%, #121212 100%);z-index:1000}
.loader-mark{position:absolute;top:50vh;left:50%;transform:translate(-50%,-50%)}
.loader-bottom{position:absolute;top:65vh;left:50%;transform:translateX(-50%)}
.loader-bar{width:286px;height:5px;background:#2F2F2F;border-radius:50px;overflow:hidden}
.loader-fill{height:100%;background:#53D337;width:0%;border-radius:50px;transition:width .3s ease}
.tut-page{position:fixed;inset:0;background:#121212;padding:3vh 0}
.tut1-header{position:absolute;top:0;left:0;right:0;height:49.3vh;overflow:hidden;background:#1d3a52 center top/cover no-repeat}
.tut1-fade{position:absolute;top:calc(33.5vh + 5px);left:0;right:0;height:15.6vh;background:linear-gradient(180deg, rgba(18,18,18,0) 0%, #121212 100%)}
.tut1-logo{position:absolute;top:27vh;left:50%;transform:translate(-50%,-50%);width:88vw;max-width:330px;z-index:2}
.tut-logo-spacer{height:30vh;flex:none}
/* title logo (images/hydro-sprint-title.png, transparent 2:1) */
.tut1-logo{height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45))}
/* background plates sit back behind the logo: softened copy inside the box, clipped to it */
.tut1-header::before,.results-bg-img::before{content:'';position:absolute;inset:-14px;background:inherit;background-size:cover;background-position:center top}
.tut1-header::before{filter:blur(2.5px) brightness(0.82) saturate(1.05)}
.results-bg-img{overflow:hidden}
.results-bg-img::before{filter:blur(2.5px) brightness(0.72)}
.loader-rivalz{position:absolute;top:50vh;left:50%;transform:translate(-50%,-50%);width:39.2vw;max-width:147px;height:auto}
.tut1-title{position:relative;width:78.4vw;max-width:294px;font-family:'Inter',system-ui,sans-serif;font-size:18px;font-weight:600;color:#ffffff;text-align:center;
  line-height:1.4;z-index:2;margin-top:3vh}
.tut1-btn,.tut-btn{position:absolute;bottom:calc(6vh + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:89.9vw;max-width:337px;height:51px;
  background:#ffffff;color:#121212;border:none;border-radius:4.4px;font-family:'Saira Extra Condensed',sans-serif;font-size:24.77px;font-weight:800;
  letter-spacing:0.005em;text-transform:uppercase;cursor:pointer;box-shadow:0 5px 0 0 #D5D5D5;transition:transform .1s;z-index:2}
.tut1-btn:active,.tut-btn:active{transform:scale(.97) translateX(-50%)}
.tut-page .tut-howto{position:relative;width:auto;white-space:nowrap;font-family:'Saira Semi Condensed',sans-serif;font-size:20.5px;font-weight:800;
  text-align:center;text-transform:uppercase;line-height:1.2;color:#c9a44c;z-index:2;margin-top:-2.5vh}
.tut-page .tut-bullets{position:relative;width:90vw;max-width:360px;z-index:2;margin-top:1.5vh;padding:0 4vw;font-family:'Saira Semi Condensed',sans-serif;
  font-size:14.5px;font-weight:600;color:#ffffff;text-align:left;line-height:1.45;list-style:none}
.tut-page .tut-bullets li{position:relative;padding-left:18px;margin-bottom:10px}
.tut-page .tut-bullets li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#c9a44c}
.tut-carousel{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:2.5vw;margin-top:-1vh}
.tut-boat-view{display:block;width:min(58vw,380px);aspect-ratio:380/235;height:auto}
.car-arrow{width:44px;height:44px;border-radius:50%;flex:none;border:1px solid rgba(255,255,255,0.35);background:rgba(0,0,0,0.35);
  color:rgba(255,255,255,0.92);font-size:20px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.car-arrow:active{background:rgba(255,255,255,0.18)}
.tut-choice{position:relative;z-index:2;margin-top:1.2vh;font-family:'Saira Semi Condensed',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.55);letter-spacing:1px}
#screenResults{background:#121212;z-index:200;overflow-y:auto;padding:0;position:fixed;inset:0;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start}
#screenResults.active{display:flex}
.results-bg-wrap{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden}
.results-bg-img{position:absolute;top:0;left:0;width:100%;height:100%;background:#1d3a52 center/cover no-repeat}
.results-logo{position:absolute;top:calc(2.8% + env(safe-area-inset-top,0px));left:4.5%;z-index:10}
.results-logo{width:min(44vw,230px);height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.45))}
.results-score-block{position:absolute;top:calc(5.6% + env(safe-area-inset-top,0px));right:10.5%;text-align:center;z-index:10}
.results-score-label{font-family:'Inter',system-ui,sans-serif;font-size:9px;font-weight:700;color:#ffffff;letter-spacing:0.5px}
.results-score-value{font-family:'Saira Semi Condensed',sans-serif;font-size:36px;font-weight:800;line-height:1;color:#ffd966;font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}
.results-score-value.capped{color:#ED3D3D}
.results-table-wrap{position:absolute;top:31%;left:0;width:100%;z-index:1;background:#121212;padding-bottom:120px;min-height:69vh;min-height:69dvh}
.results-fade-top{position:absolute;top:0;left:0;width:100%;height:31%;z-index:2;background:linear-gradient(to bottom, transparent 0%, #121212 100%);pointer-events:none}
.results-fade-bottom{position:fixed;bottom:0;left:0;width:100%;height:calc(120px + env(safe-area-inset-bottom));z-index:2;background:linear-gradient(to bottom, #121212 0%, transparent 100%);pointer-events:none}
.results-table{width:100%;border-collapse:collapse;table-layout:fixed}
.results-table td{font-family:'Saira Semi Condensed',sans-serif;font-size:13px;font-weight:700;color:#ccc;padding:8px 2px;border-bottom:1px solid rgba(255,255,255,0.05);text-align:center}
.results-table td:first-child{padding-left:12px}
.results-table td:last-child{padding-right:12px}
.results-capnote{font-family:'Saira Semi Condensed',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#ED3D3D;text-align:center;padding:10px 12px 2px}
.results-btn{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 24px);left:50%;transform:translateX(-50%);width:89.9vw;max-width:337px;height:51px;
  background:#ffffff;color:#121212;border:none;border-radius:4.4px;font-family:'Saira Extra Condensed',sans-serif;font-size:24.77px;font-weight:800;
  letter-spacing:0.005em;text-transform:uppercase;cursor:pointer;box-shadow:0 5px 0 0 #D5D5D5;transition:transform .1s;z-index:10}
.results-btn:active{transform:translateX(-50%) scale(.97)}
.results-btn:disabled{opacity:.8}
.btn-spinner{display:inline-block;width:15px;height:15px;margin-right:9px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnspin .8s linear infinite}
@keyframes btnspin{to{transform:rotate(360deg)}}
#scoreReveal{position:fixed;display:none;top:32%;left:50%;transform:translateX(-50%);z-index:8;pointer-events:none;text-align:center;
  font-family:'Saira Extra Condensed','Arial Narrow',system-ui,sans-serif;font-weight:800;color:#ffffff;text-shadow:0 3px 18px rgba(0,0,0,0.55)}
#scoreReveal.show{display:block}
.sr-line{font-size:min(36px,8vw);letter-spacing:3px;line-height:1.35;white-space:nowrap;opacity:0;transform:translateY(12px);transition:opacity 0.3s ease,transform 0.3s ease}
.sr-line.in{opacity:1;transform:none}
.sr-total{font-size:min(48px,10.5vw);color:#ffd966;margin-top:4px}
@media (min-width: 768px) {
  .results-table{max-width:460px;margin:0 auto;table-layout:auto}
  .results-table td:first-child{text-align:right;padding-right:16px;padding-left:0;width:50%}
  .results-table td:last-child{text-align:left;padding-left:16px;padding-right:0;width:50%}
}
@media (min-width: 1280px) {
  .tut-page .tut-btn,.tut-page .tut1-btn{width:286px!important;max-width:286px;height:43px;font-size:21px}
  .tut-page .tut-howto{font-size:17px}
}
@media (max-width: 1279px) and (max-height: 820px) {
  .tut1-title{font-size:15px}
  .tut-page .tut-bullets{margin-top:1vh!important;font-size:12.5px!important;line-height:1.3!important}
  .tut-page .tut-bullets li{margin-bottom:6px!important}
  .tut1-btn,.tut-btn{bottom:calc(4vh + env(safe-area-inset-bottom,0px))!important}
  .tut-boat-view{width:min(56vw,300px)}
}

#err{position:fixed;left:12px;right:12px;bottom:12px;z-index:400;background:#3a1414;color:#ffd7d7;padding:12px 14px;border-radius:12px;
  font:12px/1.4 ui-monospace,Menlo,monospace;white-space:pre-wrap;display:none}