/* Shared opening artwork for the free session and the optional immersive mode. */
#menu{
  background-color:#101b1b;
  background-image:linear-gradient(90deg,rgba(6,15,15,.97),rgba(6,15,15,.87) 26%,rgba(6,15,15,.28) 48%,transparent 68%),url('./assets/abertura/abertura_stevan_opala99.jpg?v=20261002-omp-q6');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  backdrop-filter:none;
  padding:32px 5vw;
}
#menu article{width:390px;max-width:100%}
#menu .opening-brand{display:block;margin:0 0 12px}
.opening-brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 3px 14px #0009)}
.opening-brand figcaption{font-size:13px;line-height:1.65;color:#eadfc8;margin-top:-12px;max-width:320px}
#menu article>.eyebrow,
#menu article>h1,
#menu article>p{display:none}
#menu .immersive-choice{background:#152d29e8;border-color:#9f914a;margin:16px 0}
#menu .choices{margin:18px 0}
#menu .primary{background:#f4ce39;color:#171c15}
#menu .primary:hover{background:#ffe574}
/* Opening: Modo Corrida / Modo História (or, paused, Voltar / Recomeçar / Trocar de pista), then Config and Recordes. */
#menu .story-start{background:#152d29eb;color:#f4ce39;border:1px solid #d9b93c;padding:16px;font-weight:700}
#menu .story-start:hover{background:#21443ceb;color:#ffe574}
#menu .story-start[hidden]{display:none}
body:not(.touch-device) #menu .menu-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
body:not(.touch-device) #menu .menu-tools button{display:flex;align-items:center;justify-content:center;gap:8px;margin:0}
body:not(.touch-device) #menu .menu-tools>#startFullscreen{grid-column:1/-1}
body:not(.touch-device) #menu .menu-tool-icon{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#efd377}
#menu article>small{color:#bac6bd;margin-top:14px}
#menu select,
#menu #mute{background:#19302de8}
@media(max-height:720px) and (min-width:701px){
  #menu{padding-block:20px}
  #menu .opening-brand{width:320px;margin-bottom:6px}
  #menu .immersive-choice{margin:10px 0;padding-block:9px}
  #menu .choices{margin:12px 0}
}
@media(max-width:700px){
  #menu{
    background-image:linear-gradient(180deg,rgba(6,15,15,.24),rgba(6,15,15,.93) 40%,#0b1817 80%),url('./assets/abertura/abertura_stevan_opala99.jpg?v=20261002-omp-q6');
    background-position:center,84% top;background-size:100% 100%,auto 70vh;padding:24px;
  }
  #menu article{width:min(390px,100%);margin-top:22vh}
}

.race-restart[hidden]{display:none!important}
#finishFade{position:fixed;inset:0;z-index:1000;background:#000;opacity:0;pointer-events:none;transition:opacity .35s ease-out}#finishFade.fading{transition:none}
/* A fall into the abyss (cliff-fall.js FallView): black while the car is brought back to the track. */
#fallFade{position:fixed;inset:0;z-index:999;background:#000;opacity:0;pointer-events:none}
/* The impact's flash (FallView): hot white in the middle, orange to the edges. */
#fallFlash{position:fixed;inset:0;z-index:998;background:radial-gradient(circle at 50% 58%,#fffbe8 0%,#ffc56a 32%,rgba(255,120,40,.35) 62%,rgba(255,90,30,0) 85%);opacity:0;pointer-events:none}
#menu .old-stock-opening{width:105px;height:70px;object-fit:contain;background:#fff;border-radius:6px;padding:3px;margin:4px 0 20px;filter:none}
@media(orientation:landscape) and (max-height:500px){#menu .opening-brand{position:relative}#menu .old-stock-opening{position:absolute;right:0;top:0;width:65px;height:44px;margin:0}#menu .opening-brand>img:not(.old-stock-opening){max-width:calc(100% - 72px)}}
#finishingOrder[hidden]{display:none!important}#finishingOrder{list-style:none;padding:0 10px;max-height:150px;overflow:auto;background:#102420eb;border:1px solid #ffffff25;margin:0 0 14px;font-size:12px;color:#e5eade}#finishingOrder li{padding:7px 0;border-bottom:1px solid #ffffff16}#finishingOrder .player-row{color:#f4d055;font-weight:bold}
.grid-roster{margin:15px 0;border:1px solid #ffffff25;border-radius:8px;padding:12px}.grid-roster summary{cursor:pointer;color:#f4d055;font-weight:bold}.grid-roster ul{list-style:none;margin:10px 0 0;padding:0;font-size:12px;line-height:1.7}.grid-roster li{padding:5px 0;border-bottom:1px solid #ffffff15}
@media(orientation:landscape) and (max-height:500px){#finishingOrder{max-height:86px}#menu.race-finished #startFullscreen{display:none}#menu.race-finished #raceResult{margin-bottom:8px}}
#menu.race-finished article>.opening-brand,#menu.race-finished article>small{display:none}
#menu.race-finished article>.eyebrow,#menu.race-finished article>h1{display:block}
#menu.race-finished article>.eyebrow{color:#e8ce58;letter-spacing:.16em;margin-bottom:12px}
#menu.race-finished article>h1{font-size:clamp(32px,5vw,56px);line-height:1;margin:0 0 22px}
#menu.race-finished #raceResult{padding:22px 16px;background:#112522e8;border:1px solid #d9c457;border-top:12px solid transparent;border-image:repeating-linear-gradient(90deg,#fff 0 12px,#111 12px 24px) 12;font-size:20px;line-height:1.5;margin:0 0 20px}
@media(orientation:landscape) and (max-height:500px){#menu.race-finished article{margin-top:0}#menu.race-finished article>h1{font-size:32px;margin-bottom:12px}#menu.race-finished #raceResult{font-size:16px;padding:12px;margin-bottom:12px}}

#pilotPicker[hidden],#pilotPicker [hidden]{display:none!important}#pilotPicker{margin:0 0 14px}#pilotLabel{display:block;font-size:12px;font-weight:800;color:#e6cd72;margin-bottom:7px}.pilot-fields{display:flex;flex-wrap:wrap;gap:7px}#pilotName,#pilotSelect{width:100%;min-height:44px;box-sizing:border-box;border:1px solid #88978c80;border-radius:6px;padding:10px 12px;background:#102823;color:#f3efdf;font:inherit;font-size:14px}#pilotName::placeholder{color:#b7c2b2}#pilotName:focus-visible,#pilotSelect:focus-visible{outline:2px solid #f4ce39;outline-offset:2px}#pilotMessage{display:block;color:#ffca99;font-size:11px;margin-top:5px}#pilotMessage:empty{display:none}

#raceCountdown[hidden]{display:none!important}#raceCountdown{position:fixed;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;color:#ffe265;text-shadow:0 5px 0 #193d30,0 8px 30px #000a}#countdownNumber{font-size:clamp(90px,18vh,180px);font-weight:950;line-height:1;letter-spacing:-.06em}#countdownCaption{margin-top:14px;font-size:clamp(12px,2.5vh,20px);font-weight:900;letter-spacing:.18em;color:white}
.menu-tools{display:contents}.menu-tool-icon,.menu-tool-short{display:none}
@media(orientation:landscape){
 .touch-device #menu{padding:8px max(20px,env(safe-area-inset-right)) 8px max(20px,env(safe-area-inset-left));align-items:center;background-image:linear-gradient(90deg,#060f0ff0,#060f0fb8 18%,#060f0f38 34%,transparent 52%),url('./assets/abertura/abertura_stevan_opala99.jpg?v=20261002-omp-q6')}
 .touch-device #menu article{width:min(280px,42vw);max-height:100%;margin:0}
 .touch-device #menu .opening-brand{position:relative;display:flex;align-items:center;gap:10px;width:100%;height:76px;margin:0 0 6px}
 .touch-device #menu .opening-brand>img:not(.old-stock-opening){position:absolute;left:0;top:-14px;width:calc(100% + 20px);max-width:none;height:104px;object-fit:cover;pointer-events:none}
 .touch-device #menu .old-stock-opening{position:absolute;left:calc(100% + 30px);top:23px;width:44px;height:30px;flex-shrink:0;margin:0;padding:2px;border-radius:3px}
 .touch-device #menu .opening-brand figcaption{display:none}
 .touch-device #pilotPicker{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:4px 6px;margin:0 0 6px}
 .touch-device #pilotLabel{font-size:11px;margin:0}.touch-device .pilot-fields{flex-wrap:nowrap;gap:5px;min-width:0}
 .touch-device #pilotName,.touch-device #pilotSelect{min-width:0;flex:1;width:100%;min-height:36px;height:36px;padding:6px 8px;font-size:16px}
 .touch-device #pilotMessage{grid-column:2;font-size:9px;line-height:1.2;margin:0}
 .touch-device #menu .menu-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 6px}
 .touch-device #menu .menu-modes button{min-height:40px;padding:9px 6px;margin:0;font-size:12px}
 .touch-device #menu #resume{grid-column:1/-1}
 .touch-device #menu #start::before,.touch-device #menu #resume::before{content:'▶';margin-right:8px;font-size:11px}
 .touch-device #menu .menu-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .touch-device #menu .menu-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;width:100%;margin:0;padding:4px 2px;font-size:9px;line-height:1.1;background:#102b27e8;border-color:#8eaa865c;border-radius:7px}
 .touch-device #menu .menu-tools .menu-tool-icon{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:#efd377}
 .touch-device #menu .menu-tool-label{display:none}.touch-device #menu .menu-tool-short{display:inline}
 .touch-device #menu.race-finished .menu-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}