.cup-drive-hud { display:flex; flex-wrap:nowrap; }
.cup-drive-hud > div { transition:background .2s ease,color .2s ease,box-shadow .2s ease; }
.cup-drive-hud > div.health-good { background:rgba(50,145,68,.78); color:#071b0b; box-shadow:inset 0 0 0 1px rgba(7,47,16,.42); }
.cup-drive-hud > div.health-warning { background:rgba(244,196,48,.88); color:#2c2100; box-shadow:inset 0 0 0 1px rgba(89,65,0,.45); }
.cup-drive-hud > div.health-critical { background:rgba(207,49,42,.9); color:#fff; box-shadow:inset 0 0 0 1px rgba(91,6,4,.58),0 0 10px rgba(211,45,36,.42); animation:cup-drive-health-critical .62s ease-in-out infinite alternate; }
.cup-drive-hud > div.health-critical strong { color:#fff; }
@keyframes cup-drive-health-critical { to { background:rgba(255,77,60,.96); box-shadow:inset 0 0 0 2px rgba(104,8,5,.7),0 0 15px rgba(255,50,38,.7); } }
.cup-drive-fullscreen-button { display:none; align-items:center; gap:5px; padding:7px 9px; border:1px solid rgba(17,17,17,.28); border-radius:999px; background:rgba(255,255,255,.62); color:#111; font:900 .54rem/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; cursor:pointer; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.cup-drive-fullscreen-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
html.cup-drive-immersive,html.cup-drive-immersive body { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
#cup-drive-view.is-fullscreen { position:fixed; z-index:1000; inset:0; width:100vw; height:100vh; height:100dvh; overflow:hidden; background:#071009; color:#fff; touch-action:none; overscroll-behavior:none; }
#cup-drive-view.is-fullscreen::backdrop { background:#071009; }
#cup-drive-view.is-fullscreen .game-console { position:relative; width:100%; max-width:none; height:100%; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; background:#071009; box-shadow:none; }
#cup-drive-view.is-fullscreen .game-console-brand { position:absolute; z-index:12; inset:0; margin:0; pointer-events:none; }
#cup-drive-view.is-fullscreen .game-console-brand > span { display:none; }
#cup-drive-view.is-fullscreen .cup-drive-fullscreen-button { position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); right:calc(8px + env(safe-area-inset-right,0px)); display:inline-flex; pointer-events:auto; border-color:rgba(255,255,255,.42); background:rgba(8,15,11,.48); color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.24); }
#cup-drive-view.is-fullscreen .cup-drive-screen-frame { position:absolute; inset:0; display:block; padding:0; overflow:hidden; border-radius:0; background:#071009; box-shadow:none; }
#cup-drive-view.is-fullscreen .cup-drive-hud { position:absolute; z-index:7; top:calc(8px + env(safe-area-inset-top,0px)); left:calc(8px + env(safe-area-inset-left,0px)); width:calc(100% - 112px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); max-width:560px; margin:0; border-color:rgba(15,56,15,.74); background:rgba(155,188,15,.68); box-shadow:inset 1px 1px 0 rgba(255,255,255,.35),0 5px 20px rgba(0,0,0,.2); backdrop-filter:blur(10px) saturate(1.25); -webkit-backdrop-filter:blur(10px) saturate(1.25); }
#cup-drive-view.is-fullscreen .cup-drive-screen { position:absolute; inset:0; display:block; overflow:hidden; border:0; background:radial-gradient(circle at 50% 42%,#18271c 0,#071009 68%); box-shadow:none; }
#cup-drive-view.is-fullscreen #cup-drive-canvas { position:absolute; z-index:1; inset:0; width:100vw!important; height:100vh!important; height:100dvh!important; max-width:none; max-height:none; aspect-ratio:auto!important; transform:none; object-fit:fill; box-shadow:none; }
#cup-drive-view.is-fullscreen .cup-drive-message { position:absolute; z-index:7; top:calc(56px + env(safe-area-inset-top,0px)); left:50%; bottom:auto; width:min(82%,520px); min-height:32px; padding:6px 11px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.3); border-radius:12px; background:rgba(12,19,15,.4); color:#fff; box-shadow:0 6px 24px rgba(0,0,0,.18); text-shadow:0 1px 2px #000; pointer-events:none; backdrop-filter:blur(12px) saturate(1.2); -webkit-backdrop-filter:blur(12px) saturate(1.2); }
#cup-drive-view.is-fullscreen .cup-drive-boot { inset:0; border:0; border-radius:0; }
#cup-drive-view.is-fullscreen .game-controls { position:absolute; z-index:9; right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(10px + env(safe-area-inset-bottom,0px)); left:calc(12px + env(safe-area-inset-left,0px)); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:0; pointer-events:none; }
#cup-drive-view.is-fullscreen .game-dpad { --drive-key:clamp(39px,12.5vw,50px); width:calc(var(--drive-key) * 3); grid-template-columns:repeat(3,var(--drive-key)); grid-template-rows:repeat(3,var(--drive-key)); pointer-events:auto; filter:drop-shadow(0 8px 12px rgba(0,0,0,.28)); }
#cup-drive-view.is-fullscreen .game-dpad button,#cup-drive-view.is-fullscreen .game-dpad-center { border:1px solid rgba(255,255,255,.38); background:linear-gradient(145deg,rgba(255,255,255,.24) 0%,rgba(38,54,44,.34) 28%,rgba(5,12,8,.55) 100%); color:#fff; box-shadow:inset 1px 1px 0 rgba(255,255,255,.38),inset -2px -3px 5px rgba(0,0,0,.25),0 7px 18px rgba(0,0,0,.24); text-shadow:0 1px 2px rgba(0,0,0,.75); backdrop-filter:blur(15px) saturate(1.45); -webkit-backdrop-filter:blur(15px) saturate(1.45); -webkit-tap-highlight-color:transparent; }
#cup-drive-view.is-fullscreen .game-dpad button:active { background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(2,8,4,.66)); box-shadow:inset 2px 3px 5px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.18); }
#cup-drive-view.is-fullscreen .game-dpad-center::after { background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.36),rgba(3,10,6,.5) 65%); box-shadow:inset 0 1px 2px rgba(255,255,255,.28),0 2px 5px rgba(0,0,0,.25); }
#cup-drive-view.is-fullscreen .game-action-buttons { gap:clamp(8px,3vw,18px); transform:rotate(-9deg); pointer-events:auto; }
#cup-drive-view.is-fullscreen .game-action { width:clamp(58px,18vw,76px); height:clamp(58px,18vw,76px); border-color:rgba(255,255,255,.5); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); -webkit-tap-highlight-color:transparent; }
#cup-drive-view.is-fullscreen #cup-drive-nitro-button { background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.94) 0 12%,rgba(255,255,255,.57) 35%,rgba(213,222,215,.36) 70%,rgba(255,255,255,.24)); color:#111; box-shadow:inset 3px 3px 3px rgba(255,255,255,.72),inset -4px -5px 8px rgba(39,53,44,.22),0 8px 20px rgba(0,0,0,.3); }
#cup-drive-view.is-fullscreen #cup-drive-throttle { background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.24) 0 10%,rgba(28,39,32,.56) 38%,rgba(2,7,4,.68) 78%); color:#fff; box-shadow:inset 3px 3px 3px rgba(255,255,255,.2),inset -4px -5px 8px rgba(0,0,0,.36),0 8px 20px rgba(0,0,0,.3); }
#cup-drive-view.is-fullscreen .game-action-wrap { color:#fff; text-shadow:0 1px 3px #000; }
#cup-drive-view.is-fullscreen .game-footer,#cup-drive-view.is-fullscreen .cup-drive-route { display:none; }
.cup-drive-hud div.pickup-flash { z-index:1; animation:cup-drive-stat-flash .82s cubic-bezier(.2,.82,.24,1); }
.cup-drive-hud div.pickup-flash strong { animation:cup-drive-stat-value .82s cubic-bezier(.2,.82,.24,1); }
@keyframes cup-drive-stat-flash {
  0% { color:#0f380f; background:transparent; box-shadow:none; }
  18% { color:#111; background:#fff6a6; box-shadow:inset 0 0 0 2px #111,0 0 0 3px #f4f4ea; }
  58% { color:#111; background:#f0c963; box-shadow:inset 0 0 0 2px #111,0 0 12px rgba(255,239,137,.9); }
  100% { color:#0f380f; background:transparent; box-shadow:none; }
}
@keyframes cup-drive-stat-value { 22% { transform:scale(1.32); } 100% { transform:scale(1); } }
.cup-drive-screen-frame { overflow:hidden; isolation:isolate; contain:paint; }
.cup-drive-screen { isolation:isolate; contain:paint; }
.cup-drive-screen canvas { width:100%; max-width:100%; min-height:0; }
.cup-drive-screen-frame > .cup-drive-boot { inset:0; border:0; border-radius:inherit; }
.cup-drive-boot .fhendo-mark { max-width:90%; }
.cup-drive-boot small { max-width:90%; text-align:center; }
.cup-drive-edition {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  opacity:0;
  transform:translateY(8px) scale(.82);
  font-family:Arial Black,Inter,sans-serif;
  font-weight:950;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
}
.cup-drive-boot.active .cup-drive-edition { animation:cup-drive-edition-in .34s cubic-bezier(.2,.9,.28,1.18) 1.02s forwards; }
.cup-drive-turbo {
  padding:4px 7px 3px;
  border:2px solid #111;
  border-radius:4px 9px 4px 9px;
  background:linear-gradient(135deg,#ffdf39 0 45%,#f04a24 46% 100%);
  color:#111;
  box-shadow:2px 2px 0 #111;
  font-size:.64rem;
  font-style:italic;
  letter-spacing:-.06em;
  transform:skewX(-10deg) rotate(-3deg);
}
.cup-drive-colour { display:flex; gap:0; font-size:.8rem; letter-spacing:-.12em; filter:drop-shadow(1px 1px 0 #111); }
.cup-drive-colour i { font-style:normal; -webkit-text-stroke:1px #111; }
.cup-drive-colour i:nth-child(1) { color:#ef3f36; }
.cup-drive-colour i:nth-child(2) { color:#f4b72d; }
.cup-drive-colour i:nth-child(3) { color:#74a845; }
.cup-drive-colour i:nth-child(4) { color:#3d8bc2; }
.cup-drive-colour i:nth-child(5) { color:#8958a7; }
.cup-drive-advance {
  padding:4px 7px 3px;
  border-radius:999px;
  background:#111;
  color:#fff;
  box-shadow:inset 0 0 0 1px #777,2px 2px 0 #8bac0f;
  font-size:.54rem;
  font-style:italic;
  letter-spacing:.06em;
}
@keyframes cup-drive-edition-in { to { opacity:1; transform:translateY(0) scale(1); } }
.cup-drive-message { min-height:42px; justify-content:flex-start; text-align:left; line-height:1.3; text-transform:none; }
.cup-drive-route {
  max-width:540px;
  margin:16px auto 0;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.cup-drive-route-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.cup-drive-route h3 { margin:0; font-size:.86rem; }
.cup-drive-route p { margin:4px 0 0; color:var(--muted); font-size:.62rem; line-height:1.4; }
.cup-drive-best { color:var(--muted); font-size:.58rem; font-weight:800; text-align:right; white-space:nowrap; }
.cup-drive-best strong { display:block; color:var(--ink); font-size:.78rem; }
.cup-drive-progress { position:relative; height:12px; margin-top:13px; overflow:hidden; border:2px solid #111; border-radius:999px; background:#deded8; }
.cup-drive-progress::after { content:""; position:absolute; z-index:2; top:0; right:1px; bottom:0; width:5px; border-left:2px solid #fff; background:#111; }
.cup-drive-progress span { display:block; width:0; height:100%; background:#111; transition:width .15s linear; }
.cup-drive-stops { display:flex; justify-content:space-between; gap:6px; margin-top:7px; padding:0 1px; color:var(--muted); font-size:.48rem; font-weight:850; }
.cup-drive-stops span:first-child { flex:0 0 auto; }
.cup-drive-stops span:last-child { flex:0 0 auto; max-width:36%; text-align:right; }
.cup-drive-leaderboard { margin-top:16px; }
.cup-drive-score-breakdown { grid-column:3/-1; display:grid; gap:5px; width:100%; padding-top:2px; }
.cup-drive-score-line { display:grid; grid-template-columns:74px minmax(70px,1fr) 54px; align-items:center; gap:7px; color:var(--muted); font-size:.54rem; font-weight:800; }
.cup-drive-score-line > span:last-child { color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.cup-drive-score-track { position:relative; height:6px; overflow:hidden; border-radius:999px; background:#deded8; }
.cup-drive-score-track i { display:block; height:100%; border-radius:inherit; background:#111; }
.cup-drive-score-line.penalty .cup-drive-score-track i { background:#b42318; }
.cup-drive-score-line.penalty > span:last-child { color:#b42318; }
.cup-drive-score-detail { grid-column:3/-1; margin-top:1px; color:var(--muted); font-size:.5rem; line-height:1.35; }
.cup-drive-score-total { align-self:start; }
.cup-drive-score-total em { display:block; margin-top:2px; color:#b42318; font-size:.5rem; font-style:normal; font-weight:800; }
#cup-drive-view .game-dpad button { -webkit-user-select:none; user-select:none; touch-action:none; }
#cup-drive-view .game-dpad button:active { background:#050705; outline:3px solid #8bac0f; outline-offset:-3px; }
#cup-drive-nitro-button { background:#fff; color:#111; box-shadow:inset 3px 3px 0 rgba(255,255,255,.7),0 6px 0 #666; }
#cup-drive-throttle { background:#111; color:#fff; box-shadow:inset 3px 3px 0 #4a4a4a,0 6px 0 #666; }
#cup-drive-nitro-button:active,#cup-drive-nitro-button.held,#cup-drive-throttle:active,#cup-drive-throttle.held { transform:translateY(5px); box-shadow:inset 2px 2px 0 rgba(128,128,128,.35),0 1px 0 #555!important; }
@media (max-width:680px) {
  .cup-drive-fullscreen-button { display:inline-flex; margin-left:auto; }
  .cup-drive-hud strong { font-size:.58rem; }
  .cup-drive-message { min-height:48px; font-size:.6rem; }
  .cup-drive-stops span:nth-child(2),.cup-drive-stops span:nth-child(4) { display:none; }
  .cup-drive-score-breakdown,.cup-drive-score-detail { grid-column:1/-1; }
  .cup-drive-score-line { grid-template-columns:68px minmax(64px,1fr) 48px; }
}
@media (pointer:coarse) { .cup-drive-fullscreen-button { display:inline-flex; margin-left:auto; } }
@media (orientation:landscape) and (max-height:540px) {
  #cup-drive-view.is-fullscreen .game-controls { right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(8px + env(safe-area-inset-bottom,0px)); left:calc(18px + env(safe-area-inset-left,0px)); }
  #cup-drive-view.is-fullscreen .game-dpad { --drive-key:clamp(34px,10.5vh,45px); }
  #cup-drive-view.is-fullscreen .game-action { width:clamp(52px,17vh,68px); height:clamp(52px,17vh,68px); }
  #cup-drive-view.is-fullscreen .cup-drive-message { top:calc(48px + env(safe-area-inset-top,0px)); bottom:auto; width:46%; }
}