/* Four-racer selection: reference-inspired crimson race deck. */
#driverScreen,#driverScreen[data-driver]{display:grid;grid-template-rows:17% 67% 16%;gap:0;padding:0 4.5%;background:linear-gradient(180deg,#3504130d,#32000820),url('assets/character-select-racing-v76.webp') center/cover no-repeat,#7e0f1b;color:#fff9f4;transition:none}
#driverScreen::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#16030e36,transparent 19% 86%,#20020c1b)}
#driverScreen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#2a01091c,transparent 29% 77%,#19030818)}
.driver-heading{position:relative;z-index:2;align-items:start;padding:3% 1.5% 0}
.driver-heading small{display:block;color:#ffd7d2;font-size:clamp(10px,1.1vw,15px);font-weight:800;letter-spacing:.48em;margin-bottom:.25em}
.driver-heading small::before{content:"";display:inline-block;width:30px;height:17px;margin-right:14px;vertical-align:middle;background:conic-gradient(#ffe4da 25%,transparent 0 50%,#ffe4da 0 75%,transparent 0);background-size:12px 12px;transform:skewX(-16deg)}
.driver-heading h2{margin:0;font:italic 1000 clamp(27px,6.5vw,90px)/.96 'Arial Black',Impact,sans-serif;white-space:nowrap;letter-spacing:-.055em;color:#fff1ec;text-shadow:0 3px 0 #8e2431,0 8px 25px #ffb1a26b;transform:scaleX(1.48);transform-origin:left center}
.driver-heading h2 em{font-style:inherit;color:#fb7066;margin-left:.11em}
.driver-heading-sub{display:block;margin-top:.7em;font-size:clamp(10px,1.08vw,15px);letter-spacing:.48em;color:#ffdcd5}
.driver-heading-mark{color:#ffc6bb;letter-spacing:.34em;font-size:clamp(9px,.95vw,13px);line-height:1.9;text-align:right;margin-top:3.2%;flex:none}
#driverScreen .portrait-lineup{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2%;margin:0 1.5%;padding:1.5% 0 5%;min-height:0;position:relative;isolation:isolate;overflow:visible}
#driverScreen .portrait-card{position:relative;left:auto;top:auto;width:100%;max-width:none;height:100%;min-height:0;display:block;transform:skewX(-13deg);opacity:1;visibility:visible;pointer-events:auto;overflow:hidden;border:1.5px solid #ffcdc2be;border-radius:13px;background:linear-gradient(145deg,#ffc5c538 0%,#ff8d9226 39%,#66091281 100%);box-shadow:inset 0 1px #ffffffb5,inset 0 0 28px #ff4a2c1d,0 12px 18px #22030766;transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;isolation:isolate;-webkit-box-reflect:below 1px linear-gradient(#000000a0 0%,#0000004a 26%,transparent 70%)}
#driverScreen .portrait-card::before{content:"";position:absolute;inset:4% 7% 16%;pointer-events:none;z-index:0;background:conic-gradient(from 0deg at 60% 20%,#ffffff14 0 25%,transparent 0 50%,#ffffff12 0 75%,transparent 0);background-size:25% 27%;opacity:.8;mask-image:linear-gradient(#000,transparent 70%)}
#driverScreen .portrait-card img{position:absolute;z-index:1;left:-7%;bottom:11%;height:88%;width:114%;object-fit:contain;object-position:center bottom;background:none;transform:skewX(13deg) scale(var(--character-scale,1.38));transform-origin:center bottom;pointer-events:none;filter:drop-shadow(0 15px 12px #36030b80)}
#driverScreen #pick-mono{--character-scale:1.353}
#driverScreen #pick-kuro{--character-scale:1.2915}
#driverScreen #pick-piyo{--character-scale:1.26}
#driverScreen #pick-penpen{--character-scale:1.05}
#driverScreen #pick-mono img{left:12%;bottom:12%}
#driverScreen #pick-kuro img{left:19%;bottom:5.5%}
#driverScreen #pick-piyo img{left:13%;bottom:17%}
#driverScreen #pick-penpen img{left:10%;bottom:10%}
#driverScreen .portrait-card strong{position:absolute;z-index:3;left:4%;right:4%;bottom:2%;padding:.28em .1em;font:italic 1000 clamp(16px,2.1vw,30px)/1 'Arial Black',Impact,sans-serif;letter-spacing:.015em;color:#fddad4;background:linear-gradient(110deg,#ffb7a337,#a12a3475 55%,#630e1b85);border:1px solid #ffb6a970;border-radius:8px;text-shadow:0 3px 7px #3b000c;transform:skewX(13deg);box-shadow:inset 0 1px #fff8;white-space:nowrap}
#driverScreen .portrait-card strong::before{content:"";position:absolute;top:27%;left:6%;width:24px;height:24px;background:conic-gradient(#fff5ee 25%,transparent 0 50%,#fff5ee 0 75%,transparent 0);background-size:12px 12px;opacity:.8}
#driverScreen .portrait-card .pick-marker{display:none}
#driverScreen .portrait-card[aria-pressed="true"]{z-index:2;transform:skewX(-13deg) translateY(-2.2%);border-color:#f5ffff;box-shadow:0 0 0 4px #d9faff,0 0 19px 9px #91e7ff,0 0 54px 13px #60cfffcb,inset 0 0 36px #90e8ff80,0 22px 26px #2203079e}
#driverScreen .portrait-card[aria-pressed="true"] img{filter:drop-shadow(0 0 16px #b9f5ff75) drop-shadow(0 17px 12px #28000b8c)}
#driverScreen .portrait-card[aria-pressed="true"] strong{color:#fff;background:linear-gradient(100deg,#789fbbdb,#126b95dd);border-color:#e1fbff;box-shadow:0 0 17px #89e5ff}
#driverScreen .portrait-card:hover:not([aria-pressed="true"]){transform:skewX(-13deg) translateY(-1%);border-color:#fff0eb}
#driverScreen .carousel-arrow{top:40%;border:0;border-radius:50%;width:clamp(38px,4.5vw,60px);height:clamp(38px,4.5vw,60px);background:#6c142123;box-shadow:0 0 24px #ff6b626e,inset 0 0 8px #ff938899;color:#fff;font-size:clamp(24px,3.4vw,42px);text-shadow:0 0 9px #fff,0 0 23px #ffb1a9;z-index:5}
#driverScreen .carousel-arrow.previous{left:-6.3%}#driverScreen .carousel-arrow.next{right:-6.3%}
#driverScreen .driver-page{display:none}
#driverScreen .driver-confirm-row{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;min-height:0;gap:2%;padding:0 0 4%}
#driverScreen .driver-confirm-row .front-back,#driverScreen .driver-confirm-row .primary{align-self:end;width:max-content;min-width:0;min-height:44px;border-radius:12px;font-size:clamp(12px,1.15vw,16px);letter-spacing:.13em;text-transform:uppercase;font-weight:900;padding:10px 18px}
#driverScreen .driver-confirm-row .front-back{background:#70131e99;border:1px solid #ffc4ba9e;box-shadow:0 0 15px #fd6e563a;color:#fff5f2}
#driverScreen .driver-confirm-row .primary{justify-self:end;background:linear-gradient(110deg,#fda890,#ee615d);border:1px solid #ffccc2;color:#35080e;box-shadow:0 0 21px #ff665480}
#driverScreen .driver-selected-copy{text-align:center;align-self:end;padding-bottom:3px}
#driverScreen .driver-selected-copy strong{font-size:clamp(15px,1.7vw,23px);color:#fff6e9;text-shadow:0 0 13px #ffb1a2}
#driverScreen .driver-selected-copy p{font-size:clamp(11px,1vw,14px);color:#ffbdb8;white-space:nowrap;margin-top:2px}
#driverScreen .portrait-card:focus-visible,#driverScreen .carousel-arrow:focus-visible,#driverScreen .front-back:focus-visible,#driverScreen #confirmDriver:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(max-height:550px){#driverScreen{grid-template-rows:18% 65% 17%}#driverScreen .driver-heading{padding-top:1.2%}#driverScreen .driver-heading h2{font-size:clamp(24px,6vw,70px)}#driverScreen .driver-heading-sub{margin-top:.3em}#driverScreen .portrait-lineup{padding-top:0;padding-bottom:3%}#driverScreen .portrait-card{border-radius:9px}#driverScreen .portrait-card strong{font-size:clamp(12px,1.8vw,18px)}#driverScreen .driver-confirm-row{padding-bottom:2%}#driverScreen .driver-confirm-row .front-back,#driverScreen .driver-confirm-row .primary{min-height:40px;padding:8px 13px}#driverScreen .driver-selected-copy p{font-size:11px}}
@media(max-width:700px){#driverScreen{padding:0 3%;grid-template-rows:18% 64% 18%}#driverScreen .portrait-lineup{margin:0 3%;gap:1.5%}#driverScreen .portrait-card strong{font-size:clamp(10px,2vw,16px)}#driverScreen .portrait-card strong::before{display:none}#driverScreen .driver-heading-mark{display:none}#driverScreen .driver-heading h2{font-size:clamp(22px,6.5vw,45px);transform:scaleX(1.2)}#driverScreen .driver-confirm-row .front-back,#driverScreen .driver-confirm-row .primary{font-size:11px;padding:8px 10px}#driverScreen .driver-selected-copy p{display:none}}
/* Phone landscape only: keep the heading within its own row, without changing iPad. */
@media (orientation:landscape) and (max-width:950px) and (max-height:500px){
  #driverScreen .driver-heading{padding:1% 1.5% 0}
  #driverScreen .driver-heading small{font-size:10px;letter-spacing:.32em;margin-bottom:2px}
  #driverScreen .driver-heading small::before{width:20px;height:10px;margin-right:8px;background-size:8px 8px}
  #driverScreen .driver-heading h2{font-size:clamp(21px,3vw,29px);line-height:1;transform:scaleX(1.08);letter-spacing:-.055em}
  #driverScreen .driver-heading-sub{font-size:9px;letter-spacing:.28em;margin-top:4px}
  #driverScreen .driver-heading-mark{display:none}
  /* Phone close-ups: enlarge within each card; keep heads below the top mask. */
  #driverScreen #pick-mono{--character-scale:1.61}
  #driverScreen #pick-kuro{--character-scale:1.6905}
  #driverScreen #pick-piyo{--character-scale:1.15}
  #driverScreen #pick-penpen{--character-scale:1.155}
  #driverScreen #pick-mono img{left:5%;bottom:-42%}
  #driverScreen #pick-kuro img{left:22%;bottom:-50%}
  #driverScreen #pick-piyo img{left:23%;bottom:0}
  #driverScreen #pick-penpen img{left:14%;bottom:-5%}
  #driverScreen .portrait-card strong{font-size:clamp(11px,1.8vw,15px)}
  #driverScreen .driver-confirm-row .front-back,#driverScreen .driver-confirm-row .primary{font-size:11px;min-height:40px;padding:7px 11px}
  #driverScreen .driver-selected-copy strong{font-size:14px}
  #driverScreen .driver-selected-copy p{font-size:10px;margin-top:1px}
}
@media(prefers-reduced-motion:reduce){#driverScreen .portrait-card{transition:none}}