/* Arcade-only styles (loaded by the /arcade pages only; the realistic game never sees these) */
.tp-trackline{position:relative;z-index:2;margin-top:0.6vh;font-family:'Saira Semi Condensed',sans-serif;font-size:13px;font-weight:800;color:#ffd966;
  letter-spacing:0.5px;text-transform:uppercase}
/* arcade HUD: NASCAR's bolt pips (top speed raised, up to five) - right of the speedo, the coin counter has the left */
#powerWrap{right:auto;left:100%;margin-right:0;margin-left:8px}
/* the accelerate button just says GO (shape and colour from game.css) */
/* (the GO button's font and size are set with the other driving controls, in game.css) */


/* ===== Menu pages (arcade): logo, a flexible body and the button all sit in flow, so any logo shape and any screen fits.
   The logo is sized by the screen height; the body takes what's left and scrolls if a very short screen needs it. ===== */
.tut-page{--logo-h:clamp(110px,31vh,330px);justify-content:flex-start;gap:1.4vh;
  padding:calc(1.6vh + env(safe-area-inset-top,0px)) 16px calc(3.2vh + env(safe-area-inset-bottom,0px))}
.tut-page .tut1-header{height:calc(var(--logo-h) + 9vh)}
.tut-page .tut1-fade{top:calc(var(--logo-h) - 6vh);height:15vh}
.tut-page .tut1-logo{position:relative;top:auto;left:auto;transform:none;flex:none;width:auto;max-width:min(88vw,380px);
  height:var(--logo-h);object-fit:contain}
.tut-page .tut-logo-spacer{display:none}
.tut-body{position:relative;z-index:2;flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch}
.tut-page .tut1-btn,.tut-page .tut-btn{position:relative;bottom:auto!important;left:auto;transform:none;flex:none}
.tut-page .tut1-btn:active,.tut-page .tut-btn:active{transform:scale(.97)}
.tut-page .tut1-title{margin-top:0}
.tut-page .tut-howto{margin-top:0}
.tut-page .tut-carousel{margin-top:0}
/* wide, short screens: smaller logo, bullets run full lines (two columns when it's very short) */
@media (min-aspect-ratio:4/3){
  .tut-page{--logo-h:clamp(96px,27vh,300px)}
  .tut-page .tut-bullets{max-width:620px;width:auto}
  .tut-page .tut1-title{max-width:520px;width:auto}
}
@media (min-aspect-ratio:4/3) and (max-height:520px){
  .tut-page{--logo-h:clamp(84px,24vh,200px);gap:1vh}
  .tut-page .tut-bullets{columns:2;column-gap:28px;max-width:820px}
  .tut-page .tut-bullets li{break-inside:avoid}
}

/* ===== Track picker: postcards of each course on low-poly water; a yellow rim chases round and lands on the match's track ===== */
.tp-head{text-align:center;margin-bottom:1.6vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.tp-status{font-family:'Inter',system-ui,sans-serif;font-size:14px;font-weight:600;color:rgba(255,255,255,0.72);letter-spacing:0.2px}
.tp-title{min-height:1em;font-family:'Saira Extra Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(30px,5.2vh,44px);line-height:1;color:#ffcf2e;
  transform:skewX(-9deg) scale(0.6);opacity:0;transition:transform .35s cubic-bezier(.2,1.6,.4,1),opacity .2s ease;
  text-shadow:0 3px 0 #0d2a66,2px 0 0 #0d2a66,-2px 0 0 #0d2a66,0 -2px 0 #0d2a66,0 6px 14px rgba(0,0,0,0.5)}
#screenTrackPick.landed .tp-title{transform:skewX(-9deg) scale(1);opacity:1}
.tp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  width:min(92vw,460px,calc((100vh - var(--logo-h) - 190px) * 1.25))}
.tp-card{position:relative;border-radius:14px;padding:5px 5px 0;background:#0d2a66;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 4px 0 #071a42;transition:transform .14s ease,opacity .3s ease,filter .3s ease,box-shadow .14s ease}
.tp-art{display:block;width:100%;height:auto;aspect-ratio:220/150;border-radius:10px}
.tp-name{font-family:'Saira Extra Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(17px,2.6vh,22px);line-height:1;color:#ffffff;
  text-align:center;padding:7px 4px 8px;transform:skewX(-9deg);text-shadow:0 2px 0 rgba(0,0,0,0.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-card.lit{background:#ffcf2e;box-shadow:0 0 0 3px #ffcf2e,0 0 22px 4px rgba(255,207,46,0.55),0 4px 0 #b38a10;transform:translateY(-2px)}
.tp-card.lit .tp-name{color:#0d2a66;text-shadow:none}
#screenTrackPick.landed .tp-card{opacity:0.35;filter:saturate(0.4)}
#screenTrackPick.landed .tp-card.picked{opacity:1;filter:none;background:#ffcf2e;transform:translateY(-2px);
  box-shadow:0 0 0 4px #ffcf2e,0 0 34px 8px rgba(255,207,46,0.6),0 5px 0 #b38a10;z-index:2}
#screenTrackPick.landed .tp-card.picked .tp-name{color:#0d2a66;text-shadow:none}
@media (min-aspect-ratio:4/3){
  .tp-grid{grid-template-columns:repeat(var(--n,4),1fr);gap:14px;width:min(94vw,calc(var(--n,4) * 245px),calc((100vh - var(--logo-h) - 150px) * 1.1 * var(--n,4)))}
}
/* one track only (London Loop for now): a single centred card */
.tp-grid.single{grid-template-columns:1fr;width:min(80vw,300px,calc((100vh - var(--logo-h) - 190px) * 1.25));margin:0 auto}
@media (prefers-reduced-motion:reduce){ .tp-card,.tp-title{transition:none} }

/* coin counter: left of the speedo, where the bolt pips used to be */
#coinWrap{position:absolute;right:100%;margin-right:10px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;
  font-family:'Saira Semi Condensed',sans-serif;font-size:17px;font-weight:800;color:#ffcf2e;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 3px rgba(0,0,0,0.55)}
.coin-ico{width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff2a8 0%,#ffcf2e 55%,#c98c08 100%);
  box-shadow:inset 0 0 0 1.5px #b37a06}
#coinWrap.bump{animation:coinbump .28s ease}
@keyframes coinbump{40%{transform:translateY(-50%) scale(1.3)}}
/* results: the square Splash Dash badge is capped by height so it never crowds the table */
.results-logo{width:auto;height:min(24vh,160px);max-width:44vw;object-fit:contain}
/* how-to heading: one line, "HOW TO PLAY - TRACK", in the lighter Inter */
.tut-page .tut-howto.tp-howline{font-family:'Inter',system-ui,sans-serif;font-weight:700;font-size:16px;letter-spacing:0.6px;color:#c9a44c;white-space:normal;text-align:center}
/* results on a landscape phone: tighter rows so the whole table clears RACE AGAIN */
@media (orientation:landscape) and (max-height:500px){
  #screenResults .results-table-wrap{top:26%}
  #screenResults .results-fade-top{height:26%}
  #screenResults .results-table td{padding-top:4px;padding-bottom:4px;font-size:12px}
  #screenResults .results-fade-bottom{height:calc(80px + env(safe-area-inset-bottom))}
  .results-logo{height:min(22vh,160px)}
}
/* WRONG WAY: slides down from the top, stays until you're heading the right way (UI only) */
#wrongWay{position:fixed;left:50%;top:calc(238px + env(safe-area-inset-top,0px));z-index:50;transform:translate(-50%,-300px);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.2,1.35,.4,1),opacity .2s ease;display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:'Saira Extra Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(34px,9vw,56px);line-height:1;letter-spacing:2px;color:#fff;
  background:#e0262c;padding:8px 26px 6px 18px;border-radius:14px;border:4px solid #ffd23f;box-shadow:0 6px 0 #8f1418,0 12px 26px rgba(0,0,0,0.4)}
#wrongWay svg{width:0.9em;height:0.9em;fill:#ffd23f;flex:none}
#wrongWay.show{transform:translate(-50%,0);opacity:1;animation:wwPulse .9s ease-in-out .45s infinite}
@keyframes wwPulse{50%{filter:brightness(1.22)}}
@media (orientation:landscape) and (max-height:500px){ #wrongWay{top:calc(166px + env(safe-area-inset-top,0px));font-size:40px} }   /* below the speedo, beside the minimap */
/* pre-race screens: the same night picture behind the logo for every match - no spoiler for the track pick */
.tut-page .tut1-header{background-image:url(../images/menu-bg.jpg)}
/* per brand: the same view rendered with that brand's boards and bunting (body[data-brand] is set from the URL) */
body[data-brand="dk"] .tut-page .tut1-header{background-image:url(../images/menu-bg-dk.jpg)}
/* give up: a thumbs-down in a circle beside the help icon (race only), and its confirm box */
.hud-giveup{position:absolute;right:calc(4vw + 38px);top:25px;width:24px;height:24px;padding:0;border:none;background:none;color:#fff;opacity:0.8;cursor:pointer;z-index:2;display:none;
  -webkit-tap-highlight-color:transparent}
.hud-giveup.show{display:block}
.hud-giveup:active{opacity:0.5}
.hud-giveup svg{width:24px;height:24px;display:block}
@media (min-width: 1280px) { .hud-giveup{right:calc(4% + 38px)!important} }
#giveUpOverlay{position:fixed;inset:0;z-index:310;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6)}
#giveUpOverlay.open{display:flex}
.gu-panel{width:min(88vw,360px);background:#1a1a1a;border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:22px 20px 18px;text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.gu-title{font-family:'Saira Extra Condensed',Impact,sans-serif;font-weight:800;font-size:36px;line-height:1;color:#fff;letter-spacing:1px}
.gu-text{font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.45;color:#cfcfcf;margin:10px 4px 18px}
.gu-btns{display:flex;gap:12px}
.gu-btns button{flex:1;height:50px;border:none;border-radius:10px;font-family:'Saira Extra Condensed',Impact,sans-serif;font-weight:800;font-size:23px;letter-spacing:0.5px;cursor:pointer}
#giveUpYes{background:#ED3D3D;color:#fff}
#giveUpNo{background:#fff;color:#121212}