/* screens.css — auto-split from index.html */
[id^="hud"],.tcBtn,#mirrorFrame{outline:none}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.12}}
#cdOverlay{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;pointer-events:none}
#cdNum{font-family:'Orbitron',sans-serif;font-size:min(48vw,280px);font-weight:900;color:#ff7700;text-shadow:0 0 80px #ff7700,0 0 160px #ff4400,0 0 220px #ff220088;opacity:0;letter-spacing:-4px}
/* goFlashScale handles BOTH the dramatic pop AND the fade-out so the
   countdown.js GO branch can use a single animation instead of layering
   a CSS transform-pop with a JS fadePop opacity-driver (which used to
   conflict — animation 'forwards' fill kept opacity:1 and the inline
   fade never rendered). Animation runs ~700ms total; cdOv display is
   cleared at the same offset by countdown.js after the keyframe ends. */
@keyframes goFlashScale{
  0%{transform:scale(0.6);opacity:0;}
  12%{opacity:1;}
  18%{transform:scale(1.7);opacity:1;}
  35%{transform:scale(1.35);opacity:1;}
  60%{transform:scale(1.5);opacity:1;}
  78%{transform:scale(1.5);opacity:.92;}
  100%{transform:scale(1.4);opacity:0;}
}
#sFinish{background:radial-gradient(ellipse at 50% 40%,rgba(12,0,30,.98),rgba(4,0,12,.99),#000005);padding:18px 20px 14px;justify-content:flex-start;gap:0;overflow:hidden;position:relative}
#sFinish::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(180,100,255,.35) 1px,transparent 1px),radial-gradient(circle,rgba(100,200,255,.18) .7px,transparent .7px);background-size:30px 30px,20px 20px;background-position:3px 4px,12px 14px;pointer-events:none;opacity:.25;z-index:0}
/* A5 — slow rotating accent rays from podium centre. Desktop / non-mobile
   only; mobile keeps just the dot pattern to protect FPS during confetti. */
@media (min-width:601px) and (prefers-reduced-motion:no-preference){
  #sFinish::after{content:'';position:absolute;left:50%;top:55%;width:120vmax;height:120vmax;transform:translate(-50%,-50%);background:conic-gradient(from 0deg,transparent 0deg,rgba(204,68,255,.06) 12deg,transparent 24deg,transparent 60deg,rgba(0,238,255,.05) 72deg,transparent 84deg,transparent 180deg,rgba(255,68,221,.05) 192deg,transparent 204deg);animation:finRays 28s linear infinite;z-index:0;pointer-events:none;mix-blend-mode:screen}
}
@keyframes finRays{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* A2 — chequered flag stripe + animated neon stripe above the title.
   Both delivered via #finTop so we don't add DOM. */
#finTop{position:relative;border-top:4px solid transparent;border-image:repeating-linear-gradient(90deg,#fff 0 12px,#000 12px 24px) 1;padding-top:14px;z-index:1}
#finTop::before{content:'';position:absolute;left:8%;right:8%;top:8px;height:2px;background:linear-gradient(90deg,#cc44ff 0%,#ff22aa 35%,#00eeff 70%,#cc44ff 100%);background-size:200% 100%;animation:stripeShift 3.6s linear infinite;border-radius:2px;box-shadow:0 0 10px #cc44ff66;z-index:0;pointer-events:none}
@keyframes stripeShift{from{background-position:0% 0}to{background-position:200% 0}}
.finTitle{font-family:'Orbitron',sans-serif;font-size:clamp(22px,4.5vw,62px);font-weight:900;background:linear-gradient(168deg,#ffffff 0%,#00eeff 25%,#cc44ff 55%,#ff22aa 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;filter:drop-shadow(0 0 28px #cc44ffbb) drop-shadow(0 0 50px #00eeff44);position:relative;z-index:1}
.finPos{font-family:'Rajdhani',sans-serif;font-size:clamp(15px,2.6vw,36px);color:#cc88ff;margin:12px 0;letter-spacing:2px;text-shadow:0 0 14px #aa44ff44;position:relative;z-index:1}
.finBtn{font-family:'Orbitron',sans-serif;font-size:14px;color:#fff;background:linear-gradient(90deg,#8833cc,#ff3388,#ff6600);border:none;border-radius:8px;padding:11px 42px;cursor:pointer;letter-spacing:3px;font-weight:900;margin-top:16px;box-shadow:0 0 22px #aa44ff55;transition:all .15s;position:relative;z-index:1}
.finBtn:hover{transform:scale(1.04);box-shadow:0 0 32px #cc44ffaa}
#pauseOverlay{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at 50% 40%,rgba(26,10,46,.96),rgba(0,0,0,.98));display:none;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#pauseOverlay::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(180,100,255,.4) 1px,transparent 1px),radial-gradient(circle,rgba(100,200,255,.2) .7px,transparent .7px);background-size:28px 28px,18px 18px;background-position:3px 4px,10px 12px;pointer-events:none;opacity:.3}
.pauseStack{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(420px,90vw)}
.pauseSection{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
.pauseSectionLabel{font-family:'Rajdhani',sans-serif;font-size:11px;color:rgba(204,136,255,.55);letter-spacing:4px;text-align:center;text-transform:uppercase}
.pauseRow{display:flex;gap:6px;width:100%}
.pauseHints{font-family:'Rajdhani',sans-serif;font-size:12px;color:#553377;letter-spacing:2px;margin-top:4px;text-align:center}
.pauseBtn{font-family:'Orbitron',sans-serif;font-size:13px;color:#fff;background:linear-gradient(90deg,#8833cc,#ff3388,#ff6600);border:none;border-radius:8px;padding:11px 28px;cursor:pointer;letter-spacing:3px;font-weight:900;box-shadow:0 0 18px #aa44ff55;position:relative;z-index:1;transition:all .15s}
.pauseBtn:hover{transform:scale(1.04);box-shadow:0 0 28px #cc44ffaa}
.pauseBtnPrimary{width:100%;font-size:14px;padding:13px 28px;letter-spacing:4px}
.pauseBtnGray{background:linear-gradient(180deg,rgba(40,20,60,.6),rgba(20,10,40,.7))!important;color:#bba0d8!important;border:1px solid rgba(120,80,180,.45)!important;box-shadow:0 0 10px rgba(80,40,150,.25)!important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pauseBtnGray:hover{border-color:#aa66ff!important;color:#ffffff!important;box-shadow:0 0 18px rgba(170,100,255,.4)!important}
.pauseCamBtn{flex:1 1 0;min-width:0;font-size:10px;padding:9px 4px;letter-spacing:1.5px}
.pauseCamBtn.active{color:#ffffff!important;border:1px solid transparent!important;background:linear-gradient(180deg,rgba(60,30,100,.55),rgba(30,10,60,.7))!important;box-shadow:0 0 0 1.5px #cc44ff,0 0 18px rgba(204,68,255,.55),inset 0 0 12px rgba(255,80,200,.25)!important}
.pauseBtnFx{width:100%;font-size:12px;padding:10px 18px;letter-spacing:3px}
.pauseBtnFx.active{color:#ffeebb!important;border-color:rgba(255,180,80,.55)!important;box-shadow:0 0 16px rgba(255,150,40,.3)!important}
.pauseBtnQuit{width:100%;font-size:12px;padding:10px 18px;letter-spacing:3px;margin-top:6px}
.pauseBtnQuit:hover{border-color:#ff5544!important;color:#ffaa88!important;box-shadow:0 0 18px rgba(255,80,40,.4)!important}
#controlHints{position:fixed;bottom:220px;left:50%;transform:translateX(-50%);z-index:15;pointer-events:none;text-align:center;transition:opacity .6s}
/* A2 — score gets gradient text + dual-glow drop-shadow (was flat lavender). */
.finScore{font-family:'Orbitron',sans-serif;font-size:clamp(18px,2.8vw,38px);font-weight:900;letter-spacing:3px;margin:6px 0;background:linear-gradient(168deg,#ffffff 0%,#cc88ff 50%,#ff44dd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:#cc88ff;filter:drop-shadow(0 0 14px #cc44ff88) drop-shadow(0 0 32px #ff44dd44);position:relative;z-index:1}
/* A2 — championship message becomes a glass-blur banner.
   currentColor border auto-tints with the per-position colour set inline
   from finish.js (magenta P1 / cyan P2 / orange P3 / grey >P3). */
.finMsg{font-family:'Rajdhani',sans-serif;font-size:clamp(14px,2.2vw,26px);letter-spacing:3px;margin:6px auto;display:inline-block;padding:6px 22px;border:1px solid currentColor;border-radius:18px;background:rgba(0,0,0,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);position:relative;z-index:1}
/* A2 — glass-pill treatment for coin counters (overrides the inline
   styles on the spans). Mirrors the .selM-cardBadge pattern from
   css/select.css:768. */
#finCoins{display:none;font-family:'Orbitron',sans-serif!important;font-size:14px!important;color:#ffd700!important;letter-spacing:2px!important;padding:5px 14px!important;border:1px solid rgba(255,200,80,.4)!important;border-radius:14px!important;background:rgba(255,215,0,.08)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 0 10px #ffd70077}
#finTotalCoins{font-family:'Orbitron',sans-serif!important;font-size:11px!important;color:#cc88ff!important;letter-spacing:2px!important;padding:4px 12px!important;border:1px solid rgba(180,80,255,.35)!important;border-radius:12px!important;background:rgba(120,40,200,.10)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 0 8px rgba(180,80,255,.45)!important}
.finHighScore{font-family:'Orbitron',sans-serif;font-size:11px;color:#666;letter-spacing:2px;margin:3px 0}
#victoryHint{position:fixed;bottom:40px;left:50%;transform:translateX(-50%);font-family:'Rajdhani',sans-serif;font-size:16px;color:#ffd700;letter-spacing:4px;pointer-events:none;display:none;text-shadow:0 0 14px #ffd70088;animation:blink 1.1s ease-in-out infinite}
#camViewHint{position:fixed;top:48%;left:50%;transform:translate(-50%,-50%);font-family:'Rajdhani',sans-serif;font-size:15px;color:#88ddff;letter-spacing:3px;pointer-events:none;display:none;text-shadow:0 0 10px #44aaffaa;opacity:0.85}
#f1Lights{position:fixed;top:18%;left:50%;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;z-index:30;pointer-events:none}
#rstBar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);width:160px;height:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:3px;display:none;overflow:hidden;z-index:20}
#colFlash{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(255,60,0,.7) 100%);transition:opacity .05s}
#pitStopOverlay{position:fixed;inset:0;z-index:55;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:rgba(0,0,0,.55)}
#pitStopOverlay .pitTitle{font-family:'Orbitron',sans-serif;font-size:clamp(28px,5vw,64px);font-weight:900;color:#00ee66;letter-spacing:6px;text-shadow:0 0 40px #00ee66aa;animation:pitPulse .7s ease-in-out infinite}
#pitStopOverlay .pitSub{font-family:'Orbitron',sans-serif;font-size:clamp(14px,2vw,22px);color:#aaffaa;letter-spacing:4px;margin-top:10px}
#pitCountFill{height:100%;width:0%;background:linear-gradient(90deg,#00ee66,#ffee00);border-radius:4px;transition:width .07s}
@keyframes pitPulse{0%,100%{text-shadow:0 0 40px #00ee66aa}50%{text-shadow:0 0 70px #00ff88cc,0 0 120px #00ff8844}}
.finReveal{animation:revealIn .55s cubic-bezier(.34,1.3,.64,1) both}
@keyframes revealIn{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:600px),(pointer:coarse) and (max-width:900px){
#controlHints{display:none!important}
#cdNum{font-size:min(36vw,180px)!important}
}
@media(min-width:769px) and (max-width:1200px){
#controlHints{display:none!important}
}
@media(max-width:600px){
#sFinish{padding:14px 12px 110px!important;overflow-y:auto!important}
.finTitle{letter-spacing:2px!important}
.finPos{margin:6px 0!important;letter-spacing:1px!important}
.finBtn{padding:11px 16px!important;font-size:12px!important;letter-spacing:2px!important;margin:0!important;flex:1!important}
}
@media(max-width:600px),(pointer:coarse) and (max-width:900px){
.pauseDesktopOnly{display:none!important}
}
@media(max-width:600px){
#pauseOverlay{padding:20px!important}
.pauseStack{width:min(340px,92vw)!important;gap:10px!important}
.pauseBtnPrimary{padding:12px 18px!important;font-size:13px!important;letter-spacing:3px!important}
.pauseCamBtn{font-size:9px!important;letter-spacing:1px!important;padding:9px 2px!important}
.pauseBtnFx,.pauseBtnQuit{font-size:11px!important;letter-spacing:2px!important}
}