/* Shared utility bar. Phone flight keeps secondary controls in the pause menu. */
#utilityBar{position:fixed;z-index:6;right:max(16px,env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:center}
#utilityBar #fullscreen,body[data-screen="play"] #utilityBar #fullscreen{position:static;width:auto;height:44px;min-height:44px;padding:0 12px;font:bold 11px monospace}
body[data-screen="play"] #utilityBar #fullscreen:before{content:none}
#utilityBar #pause{width:44px;height:44px;padding:0;border:1px solid #ff80c5;border-radius:8px;background:#21051cf2;font-size:24px}
body[data-screen="play"] #flightHelp{right:220px}
.record-pages{display:flex;justify-content:center;align-items:center;gap:18px}
.record-pages button{min-width:44px;min-height:44px;padding:8px}

@media (max-width:700px), (max-height:550px) and (max-width:1100px){
 #overlay{padding:calc(60px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));place-items:safe center;overscroll-behavior:contain}
 .menu-chrome .home-note,.menu-chrome .home-tag,.menu-chrome .home-version{display:none}
 .home-frame{inset:6px;opacity:.45}
 body[data-screen] #panel{width:100%;max-width:680px;padding:0;margin:auto;border:0;box-shadow:none;background:none;min-width:0}
 #panel .back{position:fixed;top:calc(8px + env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));margin:0;padding:8px 0;min-height:44px;font-size:11px;z-index:6}
 #utilityBar{top:calc(8px + env(safe-area-inset-top));bottom:auto;right:max(18px,env(safe-area-inset-right))}
 #utilityBar #fullscreen{font-size:10px;padding:0 10px}
 #fullscreenNotice{top:calc(60px + env(safe-area-inset-top));bottom:auto}
 #panel .heading,#panel .settings .heading{font-size:26px;line-height:1.1;margin:6px 0 12px}
 #panel .eyebrow{font-size:10px;letter-spacing:.12em}
 #panel p{font-size:12px;line-height:1.4;margin:8px 0}
 #panel .hint{font-size:11px;line-height:1.4}
 #panel .home-actions{width:100%;gap:8px}
 #panel .home-actions button{min-height:44px;padding:11px 12px;font-size:16px}
 .neon-home h1{font-size:min(17vw,82px);margin:0 0 14px}
 .neon-home h1 strong{padding-left:20px}
 #panel .race-line{font-size:14px;margin:12px 0 18px}
 #panel .music-controls{margin:12px auto 0;padding-top:10px;gap:10px;font-size:11px}
 .music-controls button{min-height:44px;padding:8px 10px}
 .music-controls small{font-size:8px}
 .select{grid-template-columns:1fr;gap:10px}
 .select .mapcard canvas{height:clamp(70px,19dvh,140px)}
 .select .maplabel{padding:8px 10px;font-size:11px}
 .select .home-actions{gap:8px}
 .select p{margin:6px 0}
 #roomError:empty{display:none}#roomError{min-height:0;overflow-wrap:anywhere}
 .join-row{margin-top:12px}.join-row label{font-size:10px;margin-bottom:5px}
 .join-row input{font-size:20px;padding:8px 10px;min-height:44px;margin-bottom:8px}
 body[data-screen="friends"] .mapcard{display:none}
 #panel .room-code{font-size:36px;line-height:1;margin:14px 0}
 #panel .pilots{gap:8px 20px;margin:12px 0;font-size:12px}
 #panel .pilots p{margin:0}
 #panel .search-orbit{width:50px;height:50px;margin:16px auto}
 .search-orbit:after{left:19px}
 #panel .search-time{font-size:22px;margin:12px 0}
 .settings{max-width:100%}.audio-control{padding:12px;margin:0 0 12px}
 .settings .row{margin:0;gap:8px}.audio-control label{font-size:11px}.audio-control output{font-size:22px}
 .settings .slider{height:12px;margin:18px 0 10px}
 .settings>.hint{font-size:10px}
 #panel .stat{font-size:36px;margin:14px 0}.match-result{font-size:42px;gap:18px}
 #panel table{margin:12px 0}#panel td,#panel th{padding:8px;font-size:12px}
 #panel .notice{padding:12px}
 body[data-screen="play"] #utilityBar{top:auto;bottom:calc(104px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%)}
 body[data-screen="play"] #utilityBar #fullscreen{width:44px;padding:0;font-size:0}
 body[data-screen="play"] #utilityBar #fullscreen:before{content:'⛶';font:25px/1 monospace}
 #flightHelp,#controlsGuide{display:none!important}
 #touch{bottom:calc(16px + env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));gap:12px}
 #touch .steering{gap:10px}#touch button{width:64px;height:64px;border-radius:14px}#touch>button{width:80px;height:72px}
}
@media (max-width:700px) and (max-height:600px) and (orientation:portrait){
 .neon-home h1{font-size:14vw}.select .mapcard canvas{height:70px}#panel .race-line{margin:8px 0 12px}
 #panel .heading{font-size:23px}#panel .room-code{margin:10px 0}
}
@media (max-height:550px) and (min-width:600px) and (max-width:1100px){
 #overlay{padding-top:calc(58px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 body[data-screen] #panel{max-width:900px}
 #panel .heading,#panel .settings .heading{font-size:23px;margin:4px 0 8px}
 .neon-home{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.neon-home h1{font-size:min(10vw,70px);margin:0}
 .neon-home .race-line{grid-row:2;grid-column:1}.neon-home .home-actions{grid-column:2;grid-row:1/3}.neon-home>.music-controls{grid-column:1/-1;grid-row:3;max-width:480px}
 .select{grid-template-columns:1fr 1fr;gap:20px}.select .mapcard canvas{height:clamp(65px,30dvh,130px)}
 body[data-screen="friends"] .select{grid-template-columns:1fr}body[data-screen="friends"] .select>div:last-child{display:grid;grid-template-columns:1fr 1.4fr;gap:22px;align-items:center}.join-row{margin:0}.join-row label{display:none}.join-row input{margin-bottom:6px}
 .settings{display:grid;grid-template-columns:1.4fr 1fr;column-gap:24px;align-items:center}.settings>.eyebrow{display:none}.settings>.heading{grid-column:1/-1}.settings>.audio-control{grid-column:1;grid-row:2/4;margin:0}.settings>.home-actions,.settings>.hint{grid-column:2}
 .audio-control .hint{display:none}#panel .audio-control .music-controls{margin-top:8px;padding-top:8px}.settings .slider{margin:14px 0 6px}
 body[data-screen="pause"] .home-actions{display:grid;grid-template-columns:1fr 1fr;max-width:580px}body[data-screen="pause"] .music-controls{max-width:480px}
 body[data-screen="results"] #panel>.title{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:center}body[data-screen="results"] .title>*{grid-column:1}body[data-screen="results"] .home-actions{grid-column:2;grid-row:1/8}#panel .stat{margin:4px 0}
 body[data-screen="searching"] .search-orbit,body[data-screen="lobby"] .search-orbit{display:none}
 body[data-screen="lobby"] #panel{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:center}body[data-screen="lobby"] #panel>*{grid-column:1}body[data-screen="lobby"] #panel>.home-actions{grid-column:2}body[data-screen="lobby"] #panel>.home-actions:nth-of-type(3){grid-row:2/4}body[data-screen="lobby"] #panel>.home-actions:nth-of-type(5){grid-row:4/7}body[data-screen="lobby"] #panel>.title{grid-column:1/-1}#panel .pilots{margin:6px 0}#panel .room-code{margin:6px 0}
 body[data-screen="play"] #utilityBar{top:calc(8px + env(safe-area-inset-top));bottom:auto}
 #panel table{margin:6px 0}#panel td,#panel th{padding:5px 8px}
}
@media (max-height:550px) and (min-width:600px) and (max-width:1100px){
 body[data-screen="lobby"] #panel>.hint:last-child{grid-column:1/-1;margin:2px 0;text-align:center}
 body[data-screen="pause"] #panel .music-controls{margin-top:6px;padding-top:6px}
}

/* Quiet utility icons, clear navigation, and a preview that paints its full frame. */
#utilityBar #fullscreen,body[data-screen="play"] #utilityBar #fullscreen,
#panel .music-controls button,#flightHelp [data-skip-music]{width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;border-radius:6px;color:#d7a9c7;font:24px/1 monospace;display:inline-flex;align-items:center;justify-content:center}
#utilityBar #fullscreen:before,body[data-screen="play"] #utilityBar #fullscreen:before{content:none}
#panel .music-controls button span{font:22px/1 monospace}
#utilityBar #fullscreen:hover,#panel .music-controls button:hover{background:#ff8ace14;color:#fff}
#utilityBar #fullscreen:focus-visible,#panel .music-controls button:focus-visible{outline:2px solid #7aff9c;outline-offset:2px}
body[data-screen] #panel .back{padding:10px 14px;min-height:44px;border:1px solid #ff8acc;background:#321127;color:#ffe2f4;border-radius:7px;font:bold 13px/1.2 monospace;letter-spacing:.03em}
body[data-screen] #panel .back:hover,body[data-screen] #panel .back:focus-visible{border-color:#70ff92;color:#70ff92;background:#12281b;outline:2px solid transparent}
.select .mapcard canvas{object-fit:fill;background:#48223d}
body[data-screen="play"] #flightHelp{right:128px}
@media (max-height:550px) and (min-width:600px) and (max-width:1100px){
 .select .mapcard canvas{height:clamp(65px,38dvh,150px)}
}
@media (min-width:1101px){
 #overlay{padding:100px 32px 60px;place-items:safe center}
 body[data-screen="lobby"] #panel{padding:24px 30px}
 body[data-screen="lobby"] .room-code{margin:14px 0}
 body[data-screen="lobby"] .pilots{margin:14px 0}
 body[data-screen="lobby"] .home-actions{gap:10px}
 body[data-screen="lobby"] .home-actions button{font-size:26px;padding:12px 18px}
}

/* Navigation sits below the minimap, away from steering and thrust. */
body[data-screen="play"] #utilityBar{left:auto;right:max(12px,env(safe-area-inset-right));top:calc(min(172.34px,16.867vw,22dvh) + 24px + env(safe-area-inset-top));bottom:auto;transform:none;gap:4px;padding:3px;background:#120c16cc;border:1px solid #ff90cd44;border-radius:9px}
#utilityBar #pause{width:auto;min-width:82px;padding:0 10px;height:44px;display:flex;align-items:center;justify-content:center;gap:7px;font:bold 12px/1 monospace;color:#ffe6f3;border:0;background:transparent}
#utilityBar #pause span{font-size:18px}#utilityBar #pause:hover,#utilityBar #pause:focus-visible{background:#512039;color:#fff;outline:2px solid #ff98d2}
body[data-screen="play"] #fullscreenNotice{top:auto;bottom:calc(112px + env(safe-area-inset-bottom))}
body[data-screen="play"] #flightHelp{right:12px}
body:is([data-screen="multiplayer"],[data-screen="friends"]) #panel{max-width:660px;text-align:center}
body:is([data-screen="multiplayer"],[data-screen="friends"]) .select{grid-template-columns:1fr;max-width:520px;margin:0 auto}
body[data-screen="multiplayer"] .select p{margin:16px 0}

/* One quiet menu, centered on the minimap above it. */
body[data-screen="play"] #utilityBar{right:calc(max(12px,env(safe-area-inset-right)) + min(117.5px,11.5vw,15dvh));transform:translateX(50%);padding:0;border:0;background:transparent;box-shadow:none}
#utilityBar #pause{border:0;background:transparent;box-shadow:none;color:#f4cde4}
#utilityBar #pause:hover{background:#36152b66}
#utilityBar #pause:focus-visible{outline:2px solid #ff98d2;outline-offset:2px}

/* Flight school guidance stays clear of the ship, minimap and touch controls. */
.training-course{display:block;width:min(320px,60vw);height:160px;margin:12px auto;fill:#120e19;stroke:#ff90cd;stroke-width:10;stroke-linejoin:round}
.training-course g{fill:#a1ffba;stroke:none}.training-course .training-pad{stroke:#68ff94;stroke-width:15}
#trainingGuide{position:fixed;z-index:4;bottom:76px;left:50%;transform:translateX(-50%);width:min(520px,calc(100vw - 32px));padding:12px 16px;background:#120e19ed;border-left:3px solid #82ffad;border-radius:6px;pointer-events:none;font:14px/1.4 monospace;color:#f7e8f2}
#trainingGuide b{font-size:12px;letter-spacing:.08em;color:#8fffb2}#trainingGuide p{margin:6px 0}#trainingGuide small{font-size:9px;color:#bba7b5}
.training-flight #time{font-size:13px}.training-flight #controlsGuide{display:none!important}
#touch button.training-next{border-color:#95ffb5;box-shadow:0 0 16px #68ff9470;background:#173926}
@media(max-width:700px){#trainingGuide{bottom:calc(110px + env(safe-area-inset-bottom));font-size:12px;padding:10px 12px}.training-course{height:130px}}
@media(max-height:550px) and (min-width:600px) and (max-width:1100px){
 #trainingGuide{bottom:calc(12px + env(safe-area-inset-bottom));width:calc(100vw - 370px);max-width:420px;font-size:11px;padding:8px 10px}#trainingGuide small{display:none}#trainingGuide b{font-size:10px}
 .training-intro{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;align-items:center}.training-intro>*{grid-column:2}.training-intro .training-course{grid-column:1;grid-row:1/6;width:100%;height:170px;margin:0}.training-intro .eyebrow{display:none}
}
@media(max-height:600px) and (max-width:700px) and (orientation:portrait){body[data-screen="home"] #panel .home-actions{gap:6px}body[data-screen="home"] .neon-home h1{margin-bottom:8px}body[data-screen="home"] #panel .music-controls{margin-top:6px;padding-top:4px}.training-course{height:90px;margin:6px auto}}