/* Menu art direction: oxidized teal, pale mint, restrained amber. */
#selection{padding:92px max(5vw,env(safe-area-inset-right)) 36px;overflow:auto;background:linear-gradient(90deg,#031219e8,#061b23a8 50%,#041219ed),url('assets/city-hotel-v14.webp') center/cover;align-items:center}
.menu-content{width:min(1200px,100%);margin:auto;display:flex;gap:clamp(28px,6vw,90px);align-items:center;min-height:0}
#selection .intro{flex:1;max-width:540px}#selection .choose{width:min(490px,52%);flex:none;padding:24px;background:#071c25e8;border:1px solid #6b9da04d;border-radius:12px;box-shadow:0 20px 65px #0005}
#selection h1{font-size:clamp(42px,5.6vw,80px);line-height:1.02}#selection .feature-tags{gap:8px}#selection .feature-tags span{border-radius:3px;line-height:1.5}
#selection .menu-kicker{display:block;margin-bottom:8px;font-size:9px;letter-spacing:.18em;color:#91c7c7}.menu-heading{font-size:26px;letter-spacing:-.035em;margin:0 0 18px;color:#e8f4ef}
#mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px}#mode-picker button{display:block;width:auto;min-height:80px;margin:0;padding:13px 11px;text-align:left;border-radius:6px;background:#102a35;border:1px solid #527079;font-size:12px;letter-spacing:.06em;color:#c2d8dc}
#mode-picker button[aria-pressed=true]{background:#23474d;border-color:#a1ded2;box-shadow:inset 0 -3px #a1ded2;color:#f0faf7}#mode-picker button span{font-weight:800;display:block}#mode-picker button small{display:block;font-size:11px;line-height:1.45;letter-spacing:0;color:#bed0d5;margin-top:7px}#mode-picker b{font-size:8px;color:#efc58d;white-space:nowrap;margin-left:3px}
#mode-note{font-size:10px;color:#a4bdc4;line-height:1.5;margin:10px 0 17px}.lead-label{font-size:9px;margin-bottom:8px!important}
#selection #cards{gap:8px;margin:0 0 16px}#selection .card{height:138px;border-radius:6px;padding:8px 4px;background:#0b202a}#selection .card[aria-pressed=true]{background:#1e3e47;border-color:#92cdbf}#selection .card img{height:85px}#selection .card b{font-size:10px;margin-top:6px}#selection .card small{font-size:8px;margin-top:4px}
#selection #enter,#selection #start-intro,#selection #skip-intro{font:700 11px/1.35 Arial,Helvetica,sans-serif;letter-spacing:.09em;width:100%;min-height:46px;padding:14px 15px;margin:0 0 8px;border:1px solid #82b9b4;border-radius:5px;text-align:left;background:#112f39;color:#dfefeb;display:block}
#selection #start-intro,#selection #enter{background:#bddbd2;color:#102b32;border-color:#bddbd2}#selection #enter span{font-size:18px}#selection button:disabled{opacity:.55;cursor:default}
#menu-settings{display:flex;gap:10px;align-items:center;margin:0 0 14px;flex-wrap:wrap}#pause-rain,#music-toggle{min-height:40px;padding:8px 10px;font-size:9px;letter-spacing:.05em;border-color:#456875;background:#102932}#music-settings{flex:1;min-width:200px;margin:0;font-size:9px}#music-volume{min-width:50px;max-width:100px}#music-level{color:#b9cdd0}
.menu-links,.result-links{display:grid;grid-template-columns:1fr 1fr;gap:8px}.menu-links button,.result-links button{min-height:42px;font-size:10px;letter-spacing:.09em;background:#0b242e;border:1px solid #456873;padding:10px;color:#c5e0e0;border-radius:5px}
#scene-testing{margin:16px 0 12px;border:0;border-top:1px solid #51747a55;background:transparent;border-radius:0;padding-top:6px}#scene-testing summary{padding:10px 0;color:#99b4bd;font-size:9px;letter-spacing:.1em}#scene-shortcuts button{font-size:10px;min-height:40px}
#selection .move-guide{margin:16px 0 0;font-size:10px;color:#b8ced0;line-height:1.6}#selection .fine{font-size:9px;line-height:1.6;color:#99b1b9;margin:9px 0 0}
#selection[data-paused=true] .intro,#selection[data-paused=true] .menu-kicker,#selection[data-paused=true] .move-guide,#selection[data-paused=true] .fine,#selection[data-paused=true] .menu-links{display:none}#selection[data-paused=true] .menu-content{justify-content:center}#selection[data-paused=true] .choose{width:min(490px,100%)}#selection[data-paused=true] .menu-heading{margin-bottom:14px}
.menu-modal{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:24px;background:#020c13df;overflow:auto;touch-action:pan-y;backdrop-filter:blur(8px)}.menu-modal-card{position:relative;width:min(560px,100%);max-height:calc(100dvh - 48px);overflow:auto;padding:32px;background:linear-gradient(145deg,#123540,#081d29);border:1px solid #6c9b9f;border-radius:12px;box-shadow:0 25px 90px #0009;color:#e4f1ed;touch-action:pan-y}.menu-modal button,.menu-modal input,.menu-modal select{touch-action:manipulation}.menu-modal .eyebrow{font-size:9px;margin:4px 80px 14px 0;line-height:1.5}.menu-modal h2{font-size:30px;letter-spacing:-.04em;margin:0 0 15px}.menu-modal p{font-size:13px;color:#bdd3d8;line-height:1.6}.menu-modal button{min-height:44px;padding:11px;font-size:10px;letter-spacing:.07em;border:1px solid #629094;background:#18414d}.modal-close{position:absolute;top:16px;right:16px;background:transparent!important;font-size:9px!important}.modal-note{font-size:10px!important;color:#9cb9c1!important;margin:22px 0 0}.board-filters{display:flex;align-items:end;gap:9px}.board-filters label{font-size:9px;letter-spacing:.1em;flex:1}.board-filters label:nth-child(2){flex:0 0 80px}.menu-modal input,.menu-modal select{display:block;width:100%;font:16px Arial;color:#eff7f3;background:#08202c;border:1px solid #648a95;border-radius:4px;min-height:44px;padding:10px;margin-top:7px;-webkit-user-select:text;user-select:text}.board-filters select{font-size:14px}#board-list{padding:0;list-style:none;margin:16px 0}#board-list li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:13px 0;border-bottom:1px solid #7fa2ac33;font-size:13px}#board-list li strong{color:#bddfd1;font-variant-numeric:tabular-nums}#board-list li small{color:#8eafb9;font-size:10px}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}#share-copy{background:#bddbd2;color:#102b32}#share-status,#board-status{min-height:22px}#share-url{font-size:13px}#best-runs .eyebrow{line-height:1.5}.route-result-card{border-color:#709a9e;background:linear-gradient(145deg,#14343f,#081b25)}
@media(max-width:700px){#selection{padding:83px 16px 24px}.menu-content{display:block}#selection .intro{max-width:none;margin:0 0 24px}#selection h1{font-size:40px;margin-bottom:12px}#selection .intro>.eyebrow{font-size:9px;margin-bottom:10px}#selection .feature-tags{margin-top:12px}#selection .choose{width:100%;padding:18px}#selection .card{height:133px}.menu-modal{padding:12px}.menu-modal-card{padding:24px 18px;max-height:calc(100dvh - 24px)}.menu-modal h2{font-size:26px}.board-filters{flex-wrap:wrap}.board-filters label:first-child{min-width:140px}.board-filters>button{flex:1}.modal-close{top:10px;right:10px}}
@media(max-height:520px) and (min-width:701px){#selection{padding:70px 5vw 24px;align-items:flex-start}.menu-content{align-items:flex-start;gap:4vw}#selection .intro{position:sticky;top:0;padding-top:35px}#selection h1{font-size:43px}#selection .choose{padding:18px;width:53%}#selection .card{height:110px}#selection .card img{height:65px}.menu-heading{font-size:23px}#selection[data-paused=true] .choose{width:min(570px,100%)}#selection[data-paused=true] #cards{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}
/* One scroll container in every orientation; never clip start or share actions. */
#selection{display:block;padding:0!important}.menu-content{min-height:100%;padding:92px 0 36px;width:min(1200px,90%)}
@media(max-width:700px){.menu-content{width:100%;padding:83px max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}}
@media(max-height:520px) and (min-width:701px){.menu-content{padding:70px 0 24px}}

/* Equal mode rows and stable settings, independent of ON/OFF label width. */
#selection #mode-picker{grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:10px}
#selection #mode-picker button{grid-column:1/-1;width:100%;min-width:0;min-height:88px;height:100%;margin:0;padding:16px 18px;font-size:16px;line-height:1.3;letter-spacing:.06em}
#selection #mode-picker button small{font-size:13px;line-height:1.5;margin-top:7px}
#selection #mode-picker b{display:inline-block;font-size:10px;line-height:1.5;margin-left:8px;padding:2px 6px;border:1px solid #d4aa754d;border-radius:3px;vertical-align:middle}
#selection #mode-note{font-size:11px;line-height:1.5;min-height:33px;margin:12px 0 16px}
#selection .card b{font-size:12px}#selection .card small{font-size:10px;letter-spacing:.02em}
#selection #menu-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 16px;align-items:stretch}
#selection #music-settings{display:contents}
#selection #pause-rain,#selection #music-toggle{width:100%;min-width:0;height:46px;min-height:46px;margin:0;padding:10px 8px;font-size:12px;line-height:1.25;letter-spacing:.07em;white-space:nowrap;border:1px solid #4c6d78;border-radius:5px;background:#0b2530;color:#aabfc8;font-weight:700}
#selection #volume-control{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:18px 32px;align-items:center;gap:0 10px;min-width:0;padding:10px 12px;background:#0a222c;border:1px solid #456570;border-radius:5px}
#selection #volume-control label{display:block;grid-column:1;grid-row:1;font-size:10px;letter-spacing:.08em;color:#bdd2d7}
#selection #music-volume{grid-column:1/-1;grid-row:2;display:block;width:100%;min-width:0;max-width:none;height:32px;margin:0;accent-color:#a6d9c9;cursor:pointer}
#selection #music-level{display:block;grid-column:2;grid-row:1;width:40px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:#bdd2d7}
#selection #pause-rain[aria-pressed=true],#selection #music-toggle[aria-pressed=true],#rain[aria-pressed=true]{background:#285750;color:#e0f5dc;border-color:#9bcab1;box-shadow:inset 0 -2px #9bcab1}
#rain{width:96px;min-width:96px;white-space:nowrap;text-align:center;font-variant-numeric:tabular-nums}
#selection #enter,#selection #start-intro,#selection #skip-intro{font-size:12px;line-height:1.4;letter-spacing:.07em;min-height:48px}
#selection .menu-links button,.result-links button{min-height:46px;font-size:11px}
#selection .choose,#selection .intro{min-width:0}
:is(#selection,.menu-modal,#route-results) button,header button,#scene-testing summary{transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease,transform .16s ease}
:is(#selection,.menu-modal,#route-results) button:focus-visible,#scene-testing summary:focus-visible{outline:2px solid #c2e9df;outline-offset:3px}
@media(hover:hover) and (pointer:fine){
 :is(#selection,.menu-modal,#route-results) button:not(:disabled):hover,header button:not(:disabled):hover,#scene-testing summary:hover{filter:brightness(1.14);transform:translateY(-1px);box-shadow:0 3px 12px #0004}
 #selection #mode-picker button:not(:disabled):hover,#selection .card:not(:disabled):hover{border-color:#c0e6d8}
 #scene-testing summary:hover{color:#d7eee6}
 #selection #music-volume:hover{filter:brightness(1.18)}
}
:is(#selection,.menu-modal,#route-results) button:not(:disabled):active{filter:brightness(.96);transform:translateY(0)}
@media(min-width:701px) and (max-width:1050px) and (min-height:521px){
 .menu-content{width:min(94%,920px);gap:4vw;align-items:center}
 #selection .choose{width:56%;padding:20px}#selection .intro{flex:1}
 #selection h1{font-size:clamp(36px,5vw,52px)}
}
@media(max-width:380px){
 #selection .choose{padding:14px}#selection #mode-picker button{padding:14px;font-size:15px}
 #selection #mode-picker button small{font-size:12px}#selection .card b{font-size:10px}#selection .card small{font-size:9px}
 #selection #start-intro,#selection #skip-intro{font-size:11px}
 #selection #volume-control{grid-template-columns:minmax(0,1fr) 36px;gap:0 7px;padding:10px}
 #selection #music-level{width:36px}
}
@media(prefers-reduced-motion:reduce){
 :is(#selection,.menu-modal,#route-results) button,header button,#scene-testing summary{transition:none;transform:none!important}
}
/* Reserve caption space so character cards stay equal when text wraps. */
#selection .card{display:grid;grid-template-rows:minmax(0,1fr) auto 2.4em;gap:3px;height:156px;font-size:10px;align-items:center}
#selection .card img{height:85px;max-height:100%;margin:auto}
#selection .card b,#selection .card small{margin:0;line-height:1.2}
@media(max-height:520px) and (min-width:701px){#selection .card{height:134px}#selection .card img{height:65px}}
.film-link{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:13px 14px;margin:10px 0;color:#f0d49a;background:#202f32;border:1px solid #a58b52;box-shadow:inset 3px 0 0 #c3a362;border-radius:5px;text-decoration:none;font:700 11px/1.5 Arial;letter-spacing:.06em;touch-action:manipulation;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.film-link span{font-size:18px}.timer-note{font-size:11px;line-height:1.5;color:#a7c1c9;margin:12px 0}
#selection[data-paused=true] .timer-note{display:none}
#selection #restart-game{width:100%;min-height:46px;padding:12px;margin:8px 0 0;font-size:11px;letter-spacing:.06em;color:#d7bca2;border:1px solid #826f5e;background:#272c2e;border-radius:5px}
#run-mode-picker{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:8px}#run-mode-picker button{min-height:72px;text-align:left;padding:13px 15px;font-size:14px}#run-mode-picker small{display:block;font-size:12px;letter-spacing:0;line-height:1.5;margin-top:5px;color:#c2d6d8}
#run-mode-picker button[aria-pressed=true],#run-leads button[aria-pressed=true]{background:#28514f;border-color:#b6deca;box-shadow:inset 0 -2px #b6deca}
#run-setup .run-lead-label{margin:20px 0 10px}#run-leads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}#run-leads button{padding:10px 4px;font-size:11px;min-width:0}#run-leads img{display:block;width:100%;height:85px;object-fit:contain;margin-bottom:8px}
#run-begin,#run-back,#restart-confirm,#restart-cancel{display:block;width:100%;margin-top:10px;font-size:12px;min-height:48px}#run-begin,#restart-confirm{background:#bddbd2;color:#102b32;border-color:#bddbd2;font-weight:700}
#run-setup .menu-modal-card{padding:26px;max-width:510px}#run-setup .eyebrow{margin-right:0}#run-setup .modal-note{margin-top:14px}
.film-link:focus-visible{outline:2px solid #f0d49a;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.film-link:hover{background:#303c38;border-color:#e0bd74;color:#ffe5af}}
@media(max-width:380px){#run-setup .menu-modal-card{padding:18px}#run-leads img{height:70px}#run-leads button{font-size:10px}.film-link{font-size:10px}}
.board-filters{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.board-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.board-modes button{min-height:48px;font-weight:700;font-size:11px;padding:10px 8px;white-space:nowrap}.board-modes button[aria-pressed=true]{background:#bddbd2;color:#102b32;border-color:#bddbd2;box-shadow:inset 0 -2px #90bbae}.board-explainer{margin-top:0}#dialogue-next:disabled{opacity:.55;cursor:default}
@media(max-width:380px){.board-filters{grid-template-columns:1fr}.board-filters>button{justify-self:end;min-height:40px}.board-modes button{font-size:11px}}
