/* Character selection on the starting stage; only the backdrop is softened. */
body.start-menu-open{overflow:hidden;background:#123d47;color:#fff9e9}
body.start-menu-open #app{margin:0;padding:0;max-width:none}
body.start-menu-open>header{position:fixed;inset:0 0 auto;z-index:20;max-width:none;margin:0;padding:10px 18px;border:0;background:linear-gradient(#102d37e6,#102d3700);color:#fff9e9}
body.start-menu-open>header .brand,body.start-menu-open>header .brand-name{color:#fff9e9}
body.start-menu-open>header .brand-name small{color:#fff9e9}
body.start-menu-open>header .tools button{color:#fff9e9;border-color:#fff9e970}
body.start-menu-open>header .music-choice-bar{border:0;background:none;color:#fff9e9}
body.start-menu-open>footer{display:none}
body.start-menu-open .skip-link:not(:focus){position:absolute;left:-9999px}
.start-screen{--start-background:url('/assets/panorama-0-v23.webp');position:relative;isolation:isolate;width:100%;height:100dvh;min-height:540px;overflow:hidden;background:#e0c998;text-align:center}
.start-screen::before{content:'';position:absolute;inset:-8px;z-index:-2;background:var(--start-background) var(--start-position,center center)/cover no-repeat;filter:blur(3px);pointer-events:none}
.start-screen::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#102d37a8 0%,#102d371f 36%,transparent 55%,#102d3720 65%,#102d37e6 100%)}
.start-copy{position:absolute;top:88px;left:16px;right:16px;color:#fff9e9;text-shadow:0 3px 0 #173842,0 4px 14px #17384290}
.start-edition{font-size:10px;font-weight:800;letter-spacing:1.7px}
.start-edition b{display:inline-block;margin-left:8px;padding:3px 7px;border:1px solid #fff9e990;border-radius:5px;font-size:9px;letter-spacing:1px}
.start-copy h1{margin:10px 0 8px;font-size:clamp(45px,6.7vw,86px);line-height:.91;letter-spacing:-1px}
.start-copy h1 em{color:#ffdf55}
.start-copy p{margin:8px 0;font-size:14px;font-weight:700;line-height:1.4}
.start-lineup{position:absolute;left:50%;bottom:198px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:12px;width:min(900px,calc(100% - 40px))}
.start-runner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:end;padding:0;min-width:0;background:none;border:0;color:#fff9e9}
.start-runner canvas{display:block;width:100%;max-width:170px;height:auto;filter:drop-shadow(0 8px 5px #12384235);transition:filter .18s,transform .18s}
.runner-label{display:inline-block;min-width:64px;padding:6px 11px;background:#173842cc;color:#fff9e9;border:2px solid transparent;border-radius:999px;font-size:14px;font-weight:800;white-space:nowrap}
.start-runner.selected .runner-label{background:#ffdf55;color:#173842;border-color:#173842}
.start-runner.selected .runner-label::before{content:'✓ ';font-weight:900}
.start-runner.selected canvas{filter:drop-shadow(2px 0 0 #ffdf55) drop-shadow(-2px 0 0 #ffdf55) drop-shadow(0 2px 0 #ffdf55) drop-shadow(0 -2px 0 #ffdf55) drop-shadow(0 8px 5px #12384250);transform:translateY(-6px)}
.start-runner:focus-visible{outline:3px solid #ffdf55;outline-offset:6px;border-radius:16px}
.start-actions{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(430px,calc(100% - 28px));color:#fff9e9}
.start-selection{font-size:11px;font-weight:700;margin:0 0 8px;text-shadow:0 1px 4px #102d37}
.start-actions .primary{max-width:none;margin:0;padding:8px 14px;line-height:1.2;justify-content:center;gap:12px;min-height:58px;background:#ffdf55;color:#173842;border:2px solid #173842;box-shadow:3px 4px 0 #173842;font-size:19px;font-weight:900}
.start-options{display:block;margin:10px auto 0;min-height:44px;border:1px solid #fff9e9b3;border-radius:10px;padding:8px 20px;background:#173842b3;color:#fff9e9;font-size:13px}
.start-secondary{display:flex;justify-content:center;gap:18px;margin-top:2px}
.start-secondary button{min-height:32px;padding:0;font-size:10px;color:#fff9e9;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.start-runner:hover canvas{transform:translateY(-7px)}}
@media(orientation:portrait){
 .start-screen{--start-position:53% center}
 .start-copy{top:84px}
 .start-copy h1{font-size:clamp(46px,11vw,72px)}
 .start-lineup{width:min(440px,calc(100% - 32px));grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;bottom:193px}
 .start-runner canvas{max-width:112px}
 .start-runner:nth-child(4){grid-column:1;transform:translateX(50%)}
 .start-runner:nth-child(5){grid-column:3;transform:translateX(-50%)}
 .runner-label{font-size:12px;padding:5px 8px;min-width:56px}
}
@media(orientation:portrait) and (max-height:720px){
 .start-copy{top:56px}.start-copy h1{font-size:36px;margin:4px 0}.start-copy p{font-size:12px;margin:4px 0}.start-edition{font-size:8px}
 .start-lineup{bottom:176px;gap:5px 12px;width:min(365px,calc(100% - 32px))}.start-runner canvas{max-width:88px}
 .start-actions .primary{min-height:52px;font-size:16px}.start-options{margin-top:8px;min-height:40px}.start-selection{font-size:10px}
}
@media(orientation:landscape) and (max-height:700px){
 .start-screen{min-height:320px}.start-copy{top:56px}.start-copy h1{font-size:43px;margin:4px 0;line-height:.9}.start-copy h1 br{display:none}.start-copy h1 em{margin-left:12px}.start-copy p{font-size:12px;margin:4px 0}.start-edition{font-size:8px}
 .start-lineup{bottom:118px;width:min(690px,calc(100% - 72px));gap:12px}.start-runner canvas{max-width:clamp(65px,17vh,112px)}.runner-label{font-size:11px;padding:4px 8px}
 .start-actions{bottom:calc(10px + env(safe-area-inset-bottom));width:min(690px,calc(100% - 40px));display:grid;grid-template-columns:1.15fr 1fr;gap:5px 14px;align-items:center}.start-selection{grid-column:1/-1;margin:0 0 2px;font-size:10px}.start-actions .primary{min-height:46px;font-size:16px;gap:8px}.start-actions .primary span{font-size:22px;line-height:1}.start-options{margin:0;width:100%;min-height:46px;font-size:12px;padding:7px 10px}.start-secondary{grid-column:1/-1;margin:0}
}
@media(prefers-reduced-motion:reduce){.start-runner canvas{transition:none}.start-runner:hover canvas,.start-runner.selected canvas{transform:none}}

@media(orientation:landscape) and (max-height:360px){.start-copy{top:48px}.start-copy h1{font-size:30px}.start-copy p{display:none}.start-runner canvas{max-width:50px}}

body.reduce-motion .start-runner canvas{transition:none}body.reduce-motion .start-runner:hover canvas,body.reduce-motion .start-runner.selected canvas{transform:none}