/* Trifecta Games menu. The racing canvas and its touch controls keep their own layout. */
:root{--paper:#f0f3e9;--lime:#d5fa62}
body{background:#0b100f}.wordmark{font-size:16px;letter-spacing:-.4px}.brand-sub{font-size:8px;letter-spacing:1.7px;color:#9cae9e}.masthead{height:82px}.account-bar{background:#111b17;border-color:#ffffff14}.edition{font-size:9px;color:#9eae9f}.track-note a{color:#c0cdba;text-decoration:none}.app footer{color:#97aa9d}
body[data-state="menu"] .arena{height:auto;min-height:0;max-height:none;background:#111a16;border:1px solid #ffffff18;border-radius:14px}
body[data-state="menu"] #game,body[data-state="menu"] .film-grain{display:none}
body[data-state="menu"] .intro{position:relative;inset:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:"heading car car" "route car car" "drive together garage" "mission mission story" "record record story" "note note note";gap:16px;padding:32px;background:radial-gradient(ellipse at 75% 10%,#29382780,transparent 65%)}
body[data-state="menu"] #intro .intro-content{display:contents}
body[data-state="menu"] #intro .intro-heading{grid-area:heading;align-self:center;min-width:0;padding:8px 0}
body[data-state="menu"] .intro h1{font-size:clamp(60px,6.6vw,104px);letter-spacing:-6px;line-height:.85;margin:26px 0 22px}
body[data-state="menu"] #intro .intro-heading p{font-size:13px;line-height:1.7;color:#acb9a8;margin:0}
body[data-state="menu"] #intro .intro-heading .eyebrow{font-size:8px;letter-spacing:1.4px}
body[data-state="menu"] #intro .selected-car-preview{grid-area:car;position:relative;inset:auto;transform:none;align-self:stretch;min-height:310px;max-width:none;width:100%;height:auto;margin:0;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid #ffffff16;border-radius:10px;overflow:hidden;background:radial-gradient(ellipse at 50% 75%,#54644738,transparent 70%),linear-gradient(150deg,#1c2b2480,#0b1412);pointer-events:auto}
body[data-state="menu"] #selectedCarPreview{display:block;width:min(100%,440px);height:auto;max-height:365px;object-fit:contain;filter:drop-shadow(0 20px 15px #0005)}
body[data-state="menu"] #intro .selected-car-preview>span{position:static;transform:none;display:block;font-size:11px;letter-spacing:2px;color:#d9e2cd;text-align:center;margin:0 70px 23px;line-height:1.5;max-width:none}
body[data-state="menu"] #intro .app-edit-car{display:flex;position:absolute;top:14px;right:14px;bottom:auto;left:auto;background:#111b16cc;color:#d7e7c4;border:1px solid #ffffff26;font-size:9px;min-height:36px;padding:8px 12px;border-radius:5px}
body[data-state="menu"] #intro .route-select{grid-area:route;align-self:start;width:100%;max-width:none;margin:0;border-radius:8px;background:#0b1511;border:1px solid #ffffff20;padding:0;overflow:hidden}
body[data-state="menu"] #intro .route-select summary{min-height:70px;padding:15px;font-size:9px;letter-spacing:1px;gap:5px;flex-wrap:wrap;cursor:pointer}
body[data-state="menu"] #intro .route-select summary strong{font-size:13px;line-height:1.4;color:#e1eacb;letter-spacing:0}
body[data-state="menu"] #intro .route-select[open]{padding-bottom:14px}
body[data-state="menu"] #intro .route-select .route-select-heading,body[data-state="menu"] #intro .route-select #trackGoalPreview{margin:14px;font-size:10px}
body[data-state="menu"] #intro .route-select .track-picker{padding:0 14px;grid-template-columns:1fr;max-height:250px;overflow:auto}
body[data-state="menu"] #intro .intro-actions{grid-area:drive;display:flex;gap:0;align-self:stretch}
body[data-state="menu"] #startBtn{width:100%;min-height:64px;font-size:12px;border-radius:7px;padding:20px;letter-spacing:1px}
body[data-state="menu"] #intro .start-hint{display:none}
body[data-state="menu"] #multiplayerBtn{grid-area:together;margin:0;width:100%;min-height:64px;border-radius:7px;padding:18px;background:#223024;border:1px solid #8baf6250;font-size:11px;align-self:stretch;display:flex;align-items:center;justify-content:space-between}
body[data-state="menu"] #openTuning{grid-area:garage;margin:0;min-height:64px;width:100%;border-radius:7px;padding:18px;background:#18251d;border:1px solid #ffffff24;font-size:11px;align-self:stretch;display:flex;align-items:center;justify-content:space-between}
body[data-state="menu"] #intro .garage-block{display:none}
body[data-state="menu"] #intro .next-race{grid-area:mission;margin:6px 0 0;padding:20px;border-color:#d5fa6230;background:#19271a;border-radius:8px;min-width:0}
body[data-state="menu"] #intro .next-race strong{font-size:20px;letter-spacing:-.4px}
body[data-state="menu"] #openRaceBoard{grid-area:story;margin:6px 0 0;align-self:stretch;width:100%;padding:22px;border:1px solid #ffffff20;background:#142019;border-radius:8px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:20px;min-height:150px}
body[data-state="menu"] #openRaceBoard>span{font-size:14px;line-height:1.5}
body[data-state="menu"] #openRaceBoard small{font-size:9px;line-height:1.6;margin-top:10px;color:#a4b39c}
body[data-state="menu"] #medalSummary{font-size:27px;color:var(--lime)}
body[data-state="menu"] #intro .intro-record{grid-area:record;position:static;display:flex;flex-direction:row;align-items:center;text-align:left;gap:14px;flex-wrap:wrap;padding:16px 0 0;border-top:1px solid #ffffff15}
body[data-state="menu"] #intro .intro-record>span{font-size:8px;max-width:95px;line-height:1.6;color:#a5b59e}
body[data-state="menu"] #intro .intro-record strong{font-size:26px;font-style:normal}
body[data-state="menu"] #intro .intro-record small{display:none}
body[data-state="menu"] #scoresBtn{margin-left:auto;min-height:40px;border-radius:5px}
body[data-state="menu"] #intro .track-note{grid-area:note;position:static;display:flex;justify-content:space-between;margin-top:8px;padding-top:17px;border-top:1px solid #ffffff12;color:#81947e;font-size:8px}
@media(min-width:701px) and (max-width:1000px) and (min-height:551px){body .app{padding:0 18px}body[data-state="menu"] .intro{padding:22px;gap:12px;grid-template-columns:1fr 1fr;grid-template-areas:"heading car" "route car" "drive together" "garage garage" "mission story" "record record" "note note"}body[data-state="menu"] .intro h1{font-size:73px}body[data-state="menu"] #intro .selected-car-preview{min-height:280px}body[data-state="menu"] #openRaceBoard{padding:18px}.edition{display:none}}
@media(max-width:700px),(max-width:1000px) and (max-height:550px){
 .wordmark{font-size:13px}.brand-sub{font-size:7px;letter-spacing:1.15px}.masthead{height:auto}.app-nav{background:#111b17f5;border-color:#ffffff20}.app-nav button[aria-current="page"]{color:var(--lime)}
 body[data-state="menu"] .arena{flex:1;height:auto;min-height:0;border:0;border-radius:0;background:#0e1713}
 body[data-state="menu"] .intro{position:absolute;inset:0;display:flex;flex-direction:column;gap:0;min-height:0;padding:21px 18px 26px;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;background:radial-gradient(ellipse at top,#27352570,transparent 80%)}
 body[data-state="menu"] #intro .intro-heading{display:none}
 body[data-state="menu"] #intro .mobile-home-title{display:block;order:0;margin:0 0 15px;padding:0}
 body[data-state="menu"] #intro .mobile-home-title h2{font-size:29px;line-height:1.1;letter-spacing:-1px;margin-top:8px}
 body[data-state="menu"] #appGreeting{font-size:8px;letter-spacing:1px;color:#acbc9e}
 body[data-state="menu"] #intro .selected-car-preview{order:1;flex:none;min-height:0;height:228px;width:100%;margin:0 0 14px;border-radius:10px;padding:9px 0 30px}
 body[data-state="menu"] #selectedCarPreview{width:auto;height:100%;max-height:100%;max-width:100%}
 body[data-state="menu"] #intro .selected-car-preview>span{position:absolute;bottom:12px;left:12px;right:12px;margin:0;font-size:9px;letter-spacing:1.4px}
 body[data-state="menu"] #intro .app-edit-car{min-height:34px;top:10px;right:10px;font-size:8px}
 body[data-state="menu"] #intro .route-select{order:2;flex:none;margin:0 0 12px;padding:0;border-radius:8px}
 body[data-state="menu"] #intro .route-select summary{display:flex;min-height:57px;padding:12px 14px;font-size:8px;gap:8px}
 body[data-state="menu"] #intro .route-select .track-picker{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden;padding:0 14px 10px;gap:9px}
 body[data-state="menu"] #intro .route-select .track-choice{min-width:145px;max-width:145px}
 body[data-state="menu"] #intro .intro-actions{order:3;display:flex;flex-direction:column;flex:none;gap:9px;margin:0 0 18px}
 body[data-state="menu"] #startBtn{min-height:54px;font-size:12px}
 body[data-state="menu"] #intro .mobile-drive-hint{font-size:10px;line-height:1.5;color:#9eae98;text-align:center}
 body[data-state="menu"] #multiplayerBtn,body[data-state="menu"] #openTuning{display:none}
 body[data-state="menu"] #intro .next-race{order:4;flex:none;width:100%;margin:0 0 12px;padding:17px}
 body[data-state="menu"] #intro .next-race strong{font-size:19px}
 body[data-state="menu"] #openRaceBoard{order:5;flex:none;flex-direction:row;align-items:center;min-height:82px;padding:16px;margin:0 0 12px;gap:10px}
 body[data-state="menu"] #openRaceBoard>span{font-size:11px}
 body[data-state="menu"] #openRaceBoard small{font-size:8px;margin-top:5px}
 body[data-state="menu"] #medalSummary{font-size:18px;white-space:nowrap}
 body[data-state="menu"] #intro .intro-record{order:6;flex:none;margin:0;padding:12px 0;gap:10px;min-height:58px}
 body[data-state="menu"] #intro .intro-record>span{font-size:7px;max-width:80px}
 body[data-state="menu"] #intro .intro-record strong{font-size:23px}
 body[data-state="menu"] #scoresBtn{font-size:8px;min-height:40px}
 body[data-state="menu"] #intro .track-note{order:7;flex:none;display:flex;padding-top:14px;margin-top:0;font-size:7px}
}
@media(max-width:360px){body[data-state="menu"] .intro{padding:17px 12px 24px}body[data-state="menu"] #intro .selected-car-preview{height:200px}.wordmark{font-size:11px}.brand-sub{font-size:6px}}

body[data-state="menu"] #intro .track-note{display:flex!important}
body[data-state="menu"] #intro .selected-car-preview>span{top:auto;bottom:12px}
@media(max-width:700px),(max-width:1000px) and (max-height:550px){body[data-state="menu"] #intro .mobile-drive-hint{display:block}}
@media(min-width:701px) and (min-height:551px){body[data-state="menu"][data-lobby="true"] .arena{height:calc(100svh - 180px);min-height:650px}}

/* At-a-glance briefing stays in the menu; the racing HUD remains unchanged. */
body[data-state="menu"] #intro .route-select summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:92px}
body[data-state="menu"] #intro .route-select summary>span{margin-left:auto}
body[data-state="menu"] #intro .route-select summary .route-facts{display:block;flex:0 0 100%;font-size:10px;line-height:1.6;letter-spacing:0;font-weight:400;color:#aabca2;text-wrap:pretty}
body[data-state="menu"] .intro{grid-template-areas:"heading car car" "route car car" "drive together garage" "mission mission story" "record record story" "guide guide guide" "note note note"}
.quick-guide{grid-area:guide;border:1px solid #ffffff18;border-radius:8px;background:#111e17;min-width:0;padding:0 17px}
.quick-guide summary{display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:52px;cursor:pointer;font-size:12px;font-weight:700;list-style:none}
.quick-guide summary::-webkit-details-marker{display:none}.quick-guide summary>span{font-size:8px;letter-spacing:.9px;color:#a9bc9c;font-weight:400}
.quick-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:14px 0 5px;border-top:1px solid #ffffff16}.quick-guide-grid b{font-size:9px;letter-spacing:.7px;color:var(--lime)}
#intro .quick-guide-grid p{font-size:12px;line-height:1.65;color:#b0beaa;margin:10px 0 14px}.quick-guide .chip-btn{min-height:42px;margin-bottom:16px}
.result-record{font-size:12px;font-weight:700;color:var(--lime);border:1px solid #d5fa6230;background:#d5fa6209;border-radius:7px;padding:12px;line-height:1.5}
.result-actions{display:flex;flex-direction:column;gap:5px;margin-top:10px}.result-actions .secondary-btn{width:100%;min-height:48px;border-radius:6px;font-size:11px}.result-actions .text-btn{min-height:42px}
.update-btn.has-update{background:var(--lime);color:#15220c;border-color:var(--lime)}
#updateDialog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.release-info{border:1px solid #d5fa6230;background:#18251e;border-radius:9px;padding:17px;margin:20px 0}
.release-info h3{font-size:17px;line-height:1.35;letter-spacing:-.3px;margin:0 0 14px}.release-info ul{margin:0;padding-left:17px;color:#bdcbb5;font-size:12px;line-height:1.65}.release-info li+li{margin-top:9px}
#updateVersion{font-size:10px;line-height:1.5;color:#9daf9c;overflow-wrap:anywhere;margin:13px 0}#updateStatus{font-size:13px;line-height:1.65}
@media(min-width:701px) and (max-width:1000px) and (min-height:551px){body[data-state="menu"] .intro{grid-template-areas:"heading car" "route car" "drive together" "garage garage" "mission story" "record record" "guide guide" "note note"}.quick-guide-grid{gap:16px}}
@media(max-width:700px),(max-width:1000px) and (max-height:550px){
 body[data-state="menu"] #intro .route-select summary{min-height:77px;padding:12px 14px;gap:5px 8px}
 body[data-state="menu"] #intro .route-select summary .route-facts{font-size:10px}
 body[data-state="menu"] #intro .route-select .track-picker button[data-track]{flex:0 0 155px;min-width:155px;scroll-snap-align:center;white-space:normal}
 body[data-state="menu"] #intro .route-select .track-picker button[data-track] small{font-size:8px;line-height:1.6;letter-spacing:.5px}
 body[data-state="menu"] #intro .quick-guide{order:7;flex:none;margin:5px 0 14px}
 body[data-state="menu"] #intro .track-note{order:8}
 .quick-guide-grid{grid-template-columns:1fr;gap:5px}.quick-guide summary{min-height:52px}.quick-guide-grid>div+div{border-top:1px solid #ffffff12;padding-top:12px}
 #updateDialog{width:calc(100vw - 28px);max-width:460px;padding:24px;max-height:calc(100dvh - 28px);height:auto;border-radius:14px;margin:auto}
}