/* A single bounded native preview; the island behind the UI remains a still. */
@font-face{font-family:KartSelection;src:url('front-assets.41f39b6fcec1/selection-display.woff') format('woff');font-style:normal;font-weight:700 900;font-display:swap}
body.front-stage-active #canvas{z-index:7;clip-path:var(--front-stage-clip);pointer-events:none}
.front-stage{position:relative;width:100%;height:clamp(130px,30vh,310px);background:#102d39;border-radius:18px;overflow:hidden;pointer-events:none}
.front-stage>p{position:absolute;left:12px;right:12px;top:45%;text-align:center;color:#c3dbde!important;font-size:12px!important}
.front-gag-stage{width:min(820px,100%);height:clamp(150px,46vh,430px);margin:0 auto 12px}
.front-preview #frontPortrait,#frontDeparting{display:none}
/* The heading, selected driver, and face roster form three vertical bands. */
#overlay .front-character-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;gap:12px;height:100%;min-height:360px;max-height:770px}
#overlay .front-character-layout .front-section-heading{display:block;text-align:center;margin:0}
#overlay .front-character-layout .front-kicker{font-size:10px;letter-spacing:.24em;margin:0 0 4px;color:#b9f0dd}
#overlay #frontCharacterHeading{font-family:KartSelection,'Arial Black',sans-serif;font-weight:900;font-size:clamp(23px,3vw,42px);line-height:1.25;letter-spacing:.035em;transform:skew(-6deg);color:#fff3ba;text-shadow:2px 3px 0 #153a4b,3px 4px 0 #153a4b,0 3px 12px #081622;margin:0}
#overlay .front-character-layout .front-preview{display:flex;position:relative;min-height:0;justify-content:center;align-items:center;width:min(720px,100%);height:100%;margin:auto;padding:0 0 32px}
#overlay .front-character-layout #frontStage{height:100%;max-height:440px;min-height:160px;width:min(100%,660px);background:#102d39;border-radius:18px}
#overlay .front-preview-caption{position:absolute;bottom:0;left:0;right:0;display:flex;gap:14px;align-items:baseline;justify-content:center}
#overlay .front-preview-caption h3{font:900 clamp(21px,2.6vw,33px)/1.1 KartSelection,sans-serif;margin:0;color:#fff2b3;text-shadow:2px 2px 0 #122c3b}
#overlay .front-preview-number{font:700 11px/1.2 KartSelection,sans-serif;letter-spacing:.15em;color:#a9d4d2}
#overlay .front-character-layout .front-roster{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-template-rows:1fr;gap:9px;flex:none;max-height:none;min-height:0;overflow-x:auto;overflow-y:hidden;padding:5px 4px 9px;scrollbar-width:thin}
#overlay .front-cast{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;min-height:0;min-width:0;padding:0;border:2px solid #7eafb680;border-radius:12px;background:linear-gradient(145deg,#37747dee,#102b44f2);box-shadow:0 4px 0 #071c2e;overflow:hidden;transition:background .12s,border-color .12s}
#overlay .front-cast .front-face{position:relative;width:100%;aspect-ratio:1.2;overflow:hidden;background:radial-gradient(ellipse at 50% 36%,#b2e9d244,transparent 70%)}
/* CSS crops reuse the existing unmodified transparent raster assets. */
#overlay .front-cast img{position:absolute;display:block;width:210%;height:auto;max-height:none;min-height:0;left:50%;top:0;transform:translate(-50%,-14%);object-fit:initial;filter:drop-shadow(0 2px 2px #06112266)}
#overlay .front-cast span{display:block;padding:5px 2px;text-align:center;white-space:nowrap;font:700 clamp(10px,1.05vw,15px)/1.35 KartSelection,sans-serif;background:#102b43de;color:#f1f8e7;letter-spacing:-.035em}
#overlay .front-cast small{top:4px;left:6px;z-index:1;font:700 9px/1 KartSelection,sans-serif;color:#ecfaf3;text-shadow:1px 1px #173548}
#overlay .front-cast.selected{border:2px solid #ffe38f;background:linear-gradient(145deg,#916acd,#3f426e);box-shadow:0 0 0 2px #fff0b775,0 4px 0 #6f4629}
#overlay .front-cast.selected span{color:#14243b;background:#ffe18e}
#overlay .front-cast:focus-visible{outline:2px solid white;outline-offset:2px}
.character-select-active #overlay .front-backdrop{opacity:.64;background-image:url('front-assets.41f39b6fcec1/island.jpg');transform:none}
.character-select-active #overlay .front-vignette{background:linear-gradient(0deg,#071d30f2,#09273988 45%,#092739a6)}
.character-select-active #overlay #start{font-family:KartSelection,sans-serif;font-weight:900;box-shadow:0 4px 0 #9b662f,0 7px 12px #06182766}
@media(max-width:900px){#overlay .front-character-layout{gap:8px}#overlay .front-character-layout .front-roster{gap:6px}#overlay .front-cast{border-radius:9px}#overlay .front-cast span{font-size:11px;padding:4px 1px}}
@media(max-height:560px) and (orientation:landscape){
 #overlay .front-character-layout{min-height:220px;gap:5px;grid-template-rows:26px minmax(95px,1fr) auto}
 #overlay .front-character-layout .front-kicker{display:none}
 #overlay #frontCharacterHeading{font-size:22px!important;line-height:26px}
 #overlay .front-character-layout .front-preview{padding-bottom:22px;width:min(430px,100%)}
 #overlay .front-character-layout #frontStage{min-height:85px;max-height:230px;border-radius:10px}
 #overlay .front-preview-caption h3{font-size:19px}
 #overlay .front-preview-number{font-size:8px}
 #overlay .front-character-layout .front-roster{gap:5px;padding:4px 3px 7px}
 #overlay .front-cast .front-face{aspect-ratio:auto;height:clamp(38px,12vh,62px)}
 #overlay .front-cast img{width:220%;transform:translate(-50%,-24%)}
 #overlay .front-cast span{font-size:10px;line-height:1.1;padding:3px 0}
 #overlay .front-cast small{font-size:7px;left:4px;top:3px}
 .character-select-active #overlay .front-foot{display:none}
 .character-select-active #overlay .front-top{min-height:24px}
 .front-gag-stage{height:180px}
}
@media(max-width:620px){#overlay .front-character-layout .front-roster{grid-template-columns:repeat(9,minmax(56px,1fr))}#overlay .front-cast span{font-size:9px}}
@media(orientation:portrait){#overlay .front-character-layout{min-height:380px}#overlay .front-character-layout .front-preview{display:flex}#overlay .front-character-layout #frontStage{min-height:190px}}
@media(prefers-reduced-motion:reduce){#overlay .front-cast{transition:none}}