/* Screen navigation: the game remains measured behind an opaque page, never visible. */
body.menu-screen .app-shell { visibility: hidden; }
#modal { position:fixed; inset:0; margin:0; width:100%; height:100dvh; max-width:none; max-height:none; border:0; border-radius:0; box-shadow:none; padding:0; background:#070e19; }
#modal[open] { display:flex; flex-direction:column; }
#modal::backdrop { background:#070e19; backdrop-filter:none; }
#modal .modal-header { flex:none; padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left)); background:#080f18f5; }
#modal .modal-header h2 { font-size:calc(22px * var(--font-scale, 1)); }
#modal #back-modal:disabled { visibility:hidden; }
#modal #close-modal[hidden] { display:block!important; visibility:hidden; }
#modal #modal-body { flex:1; width:100%; max-width:680px; min-height:0; margin:0 auto; overflow:auto; overscroll-behavior:contain; padding:26px 24px calc(30px + env(safe-area-inset-bottom)); }
#modal[data-page=menu] { background:radial-gradient(ellipse at 70% 18%,#16395566,transparent 52%),radial-gradient(ellipse at 5% 85%,#351a5866,transparent 50%),#070e19; }
#modal[data-page=menu] #modal-body { background:none; max-width:560px; }
#modal[data-page=menu] .modal-header { border:0; background:none; }
#modal[data-page=menu] .modal-header h2 { visibility:hidden; }
#modal[data-page=menu] .modal-header { height:calc(20px + env(safe-area-inset-top)); padding:0; }
.launch-brand { display:flex; align-items:center; justify-content:center; gap:20px; padding:8px 0 30px; }
.launch-brand img { width:92px; height:92px; border:1px solid #fbb47a70; border-radius:22px; box-shadow:0 0 40px #ee72161c; }
.launch-brand h1 { font:700 calc(clamp(24px,5.4vw,35px) * var(--font-scale, 1))/1.1 var(--display-font); letter-spacing:1px; color:#ecfcff; margin:0; }
.launch-brand p { font:500 calc(10px * var(--font-scale, 1))/1.5 var(--display-font); letter-spacing:3px; color:#7edff2; margin:9px 0 0; }
.launch-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.launch-link { display:flex; align-items:center; gap:12px; border:1px solid #256074; border-radius:10px; background:linear-gradient(130deg,#112635,#091722); color:#def8ff; text-align:left; font:600 calc(16px * var(--font-scale, 1))/1.3 var(--display-font); padding:20px 16px; min-height:78px; }
.launch-link .nav-icon { color:#63dfff; font:calc(26px * var(--font-scale, 1))/1 system-ui; flex:none; }
.launch-link .nav-arrow { color:#538598; margin-left:auto; font:calc(17px * var(--font-scale, 1)) system-ui; }
.launch-play { grid-column:1/-1; min-height:78px; border-color:#64e8ff; box-shadow:inset 3px 0 #55eaff,0 0 22px #4feaff12; font-size:calc(23px * var(--font-scale, 1)); background:linear-gradient(110deg,#143d4d,#102431); }
.launch-play .nav-icon { font-size:calc(30px * var(--font-scale, 1)); }
.launch-link:hover { background:#153747; border-color:#6ce4f7; }
.menu-player { text-align:center; color:#739bad!important; font-size:calc(13px * var(--font-scale, 1))!important; }
.customization-choices { display:grid; gap:18px; }
.customization-choices .launch-link { display:grid; grid-template-columns:34px 1fr 20px; }
.customization-choices .launch-link small { grid-column:2; font:calc(13px * var(--font-scale, 1)) system-ui; color:#8eb6c8; }
.customization-choices .nav-arrow { grid-column:3; grid-row:1/3; }
.active-background { position:relative; border:1px solid #3b9eab; border-radius:12px; padding:20px; overflow:hidden; margin-bottom:24px; min-height:118px; }
.active-background h3 { position:relative; z-index:1; margin:12px 0 0; }
.active-background .eyebrow { position:relative; z-index:1; }
.active-background canvas { position:absolute; width:120px!important; right:0; top:-18px; opacity:.8; mask-image:linear-gradient(90deg,transparent,#000 50%); }
.background-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.background-tile { padding:0 0 13px; overflow:hidden; text-align:left; color:#def5fc; border:1px solid #336177; background:#0c1b29; border-radius:10px; }
.background-tile canvas { display:block; width:100%; height:auto; aspect-ratio:240/290; }
.background-tile strong,.background-tile .tile-state { display:block; padding:0 10px; margin-top:9px; font:600 calc(13px * var(--font-scale, 1))/1.2 var(--display-font); }
.background-tile .tile-state { font:calc(11px * var(--font-scale, 1)) system-ui; color:#80cedd; margin-top:5px; }
.background-tile.locked canvas { filter:grayscale(1) brightness(.65); }
.background-tile.locked { border-color:#324353; }
.background-tile.locked .tile-state { color:#95a5b7; }
.background-preview { max-width:280px; margin:18px auto 24px; border:1px solid #5fa8be; border-radius:22px; overflow:hidden; }
.background-preview canvas { width:100%; display:block; }
.preview-title,.unlock-requirement { text-align:center; }
.milestone-card { grid-template-columns:72px 1fr!important; }
.milestone-card .reward-label { color:#7cdfef; font-size:calc(13px * var(--font-scale, 1))!important; }
#modal .milestone-card h3 { color:#d6f6ff; }
.milestone-card.earned { border-color:#41bdc273; }
#modal .score-tabs { display:flex; gap:6px; }
#modal .score-tabs button { min-height:44px; font-size:calc(13px * var(--font-scale, 1)); }
.forecast-item { display:flex; flex-direction:column; align-items:center; gap:1px; }
.forecast-item span { font:600 calc(9px * var(--font-scale, 1))/1.1 var(--display-font); letter-spacing:1px; color:#7cc7d8; }
#next-planets { gap:8px; }
#next-planets .forecast-item:first-child { border-bottom:2px solid #70eaff; padding-bottom:3px; }
.tutorial-count { text-align:center; color:#75bdcf!important; font-size:calc(12px * var(--font-scale, 1))!important; letter-spacing:3px; }
.tutorial-title { text-align:center; margin:10px 0 20px; font-size:calc(23px * var(--font-scale, 1))!important; }
.tutorial-board { position:relative; height:280px; max-width:420px; margin:0 auto 24px; border:1px solid #285370; border-radius:20px; background:radial-gradient(ellipse at 70% 90%,#252d59,#071220 75%); overflow:hidden; }
.tutorial-hud { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; gap:10px; }
.demo-score { font:calc(10px * var(--font-scale, 1))/1.5 var(--display-font); color:#8fbdcd; }
.demo-score strong { font-size:calc(24px * var(--font-scale, 1)); color:#e4f9fc; }
.demo-queue { display:flex; gap:8px; }
.demo-queue>span { display:flex; flex-direction:column; align-items:center; gap:4px; }
.demo-queue small { font:calc(9px * var(--font-scale, 1)) var(--display-font); color:#81b4c9; }
.demo-pause { border:1px solid #487184; border-radius:50%; padding:9px; color:#91d9e5; }
.demo-limit { position:absolute; top:141px; width:100%; padding:4px 14px; border-top:1px dashed #5d7f99; color:#7694ad; font:calc(9px * var(--font-scale, 1)) system-ui; letter-spacing:1px; }
.demo-aim { position:absolute; top:85px; left:50%; transform:translateX(-50%); }
.demo-aim:after { content:''; position:absolute; width:38px; height:38px; top:76px; left:2px; border:1px dashed #5fc9dba0; border-radius:50%; }
.demo-worlds { position:absolute; bottom:7px; width:100%; display:flex; align-items:center; justify-content:center; gap:6px; }
.demo-worlds>span { color:#75b8cc; }
.demo-blackhole { font-size:calc(50px * var(--font-scale, 1)); color:#bb98ff!important; text-shadow:0 0 15px #a47eff; }
.tutorial-board[data-focus=queue] .demo-queue,.tutorial-board[data-focus=pause] .demo-pause,.tutorial-board[data-focus=score] .demo-score { outline:2px solid #65e4ff; outline-offset:5px; border-radius:5px; }
.tutorial-board[data-focus=limit] .demo-limit { border-color:#ffb271; color:#ffd0a5; background:#e58c2222; }
.tutorial-copy { min-height:5em; font-size:calc(15px * var(--font-scale, 1))!important; line-height:1.65!important; }
.tutorial-aim { display:flex; align-items:center; gap:14px; font:calc(13px * var(--font-scale, 1)) system-ui; margin-bottom:20px; }
.tutorial-aim input { flex:1; min-width:0; accent-color:#5de7ff; }
.tutorial-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#modal .tutorial-nav button { font-size:calc(14px * var(--font-scale, 1)); }
.account-section { border:1px solid #29485a; border-radius:10px; padding:18px; margin:18px 0; }
.account-section h3 { margin:0 0 12px; font-size:calc(17px * var(--font-scale, 1)); }
.account-section p { font-size:calc(13px * var(--font-scale, 1))!important; }
.account-section .settings-form { display:flex; flex-direction:column; gap:10px; }
.account-section .settings-form label { font-size:calc(13px * var(--font-scale, 1)); }
.account-section input { min-height:46px; padding:10px 12px; color:#eefbff; width:100%; font:calc(16px * var(--font-scale, 1)) system-ui; }
@media(min-width:850px){#modal[data-page=menu] #modal-body{padding-top:5vh}.launch-brand{padding-bottom:40px}.launch-link{min-height:90px}}
@media(max-width:849px){#modal #modal-body{padding:20px 18px calc(26px + env(safe-area-inset-bottom))}.topbar .forecast{gap:3px}.topbar .forecast>.eyebrow{display:none}#next-planets canvas{width:43px!important;height:43px!important}#next-planets{gap:7px}.topbar .score-wrap .eyebrow{font-size:calc(8px * var(--font-scale, 1))}.forecast-item span{font-size:calc(8px * var(--font-scale, 1))}}
@media(max-width:380px){.launch-brand{gap:12px}.launch-brand img{width:72px;height:72px}.launch-link{padding:16px 12px;font-size:calc(14px * var(--font-scale, 1));gap:9px}.launch-play{font-size:calc(22px * var(--font-scale, 1))}.launch-nav{gap:10px}.background-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#next-planets canvas{width:36px!important;height:36px!important}#next-planets{gap:3px}}
@media(max-height:720px){.launch-brand{padding-bottom:18px}.launch-brand img{width:70px;height:70px}.launch-link{min-height:65px;padding:14px}.launch-nav{gap:9px}.tutorial-board{height:250px}}
.launch-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
.launch-link { min-width:0; }
.launch-link>span:nth-child(2) { min-width:0; overflow-wrap:anywhere; }
#modal[data-page=menu] #modal-body { overflow-x:hidden; }
@media(max-width:450px){.launch-link{gap:9px;padding:18px 12px;font-size:calc(14px * var(--font-scale, 1))}.launch-link .nav-arrow{display:none}.launch-play{font-size:calc(23px * var(--font-scale, 1))}.launch-link .nav-icon{font-size:calc(22px * var(--font-scale, 1))}}
#account-dialog { position:fixed; inset:0; margin:0; width:100%; height:100dvh; max-width:none; max-height:none; border:0; border-radius:0; padding:calc(40px + env(safe-area-inset-top)) max(24px,calc((100vw - 520px)/2)) calc(30px + env(safe-area-inset-bottom)); }
#account-dialog .account-close { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:16px; width:40px;height:40px; }
#modal[data-afterburn][data-page=result] { background:#070e19d9; }
#modal[data-afterburn][data-page=result]::backdrop { background:transparent; }
body.menu-screen:has(#modal[data-afterburn][data-page=result]) .app-shell { visibility:visible; }
.round-duration { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:8px 14px; margin:4px 0 20px; color:#87cfdf; }
.round-duration span { font:400 calc(17px * var(--font-scale, 1))/1.4 var(--display-font); }
.round-duration strong { color:#e5faff; font:600 calc(22px * var(--font-scale, 1))/1.4 system-ui,sans-serif; font-variant-numeric:tabular-nums; }
.friend-request-badge { display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:24px; height:24px; padding:0 6px; border-radius:999px; background:#ffb778; color:#21130e; font:700 13px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; box-shadow:0 0 12px #ffac5428; }
.launch-link[data-friend-count-label] { position:relative; padding-right:43px; }
.launch-link[data-friend-count-label] .nav-arrow { display:none; }
.launch-link>.friend-request-badge { position:absolute; right:10px; top:50%; transform:translateY(-50%); }
.score-tabs button[data-friend-count-label],.friend-request-shortcut { display:flex; align-items:center; justify-content:center; gap:7px; }
.score-tabs .friend-request-badge { min-width:20px; height:20px; padding:0 5px; font-size:11px; }
#menu { position:relative; overflow:visible; }
#menu>.friend-request-badge { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; font-size:11px; box-shadow:0 0 0 2px #08141e; }
#modal .friend-request-note { width:100%; margin:0 0 18px; border:1px solid #ffa76555; border-radius:12px; padding:12px 14px; background:#271d25; color:#ffd1a9; font:500 calc(14px * var(--font-scale, 1))/1.4 system-ui,sans-serif; text-align:left; }
.friend-request-note[hidden],.friend-request-shortcut[hidden] { display:none!important; }

.launch-brand h1 { font:400 calc(clamp(30px,7vw,44px) * var(--font-scale, 1))/1.1 var(--title-font); letter-spacing:.3px; }
.launch-brand p { font-size:calc(13px * var(--font-scale, 1)); font-weight:400; letter-spacing:2px; }
#modal .modal-header h2,dialog h3 { font-weight:400; }
button,.mode-cards strong { font-family:var(--display-font); font-weight:400; }
.wordmark { font-family:var(--title-font); font-weight:400; }
.wordmark small,.eyebrow,.small-tag,.settings-form label,.audio-setting label,.haptic-toggle,.score-wrap #mode-label,.lifetime-grid span,.summary-grid span,#ending h2 { font-family:var(--display-font); font-weight:400; }
.launch-link { border-radius:16px; font-weight:400; }
.score-wrap strong,.gameover-score,.round-bar,.lifetime-grid strong,.leaderboard-table td:last-child { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-variant-numeric:tabular-nums; }

.demo-score strong { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
@media(max-width:360px){.launch-link:not(.launch-play) .nav-icon{display:none}.launch-link>span:nth-child(2){overflow-wrap:normal}.launch-link:not(.launch-play){font-size:calc(14px * var(--font-scale, 1));padding:14px 10px}}

.player-feedback textarea{width:100%;box-sizing:border-box;resize:vertical;min-height:160px;border:1px solid #5cced36b;background:#091725;color:#e5faff;border-radius:14px;padding:14px;font:inherit;user-select:text;-webkit-user-select:text}.player-feedback small{line-height:1.5;color:#b3c9db}.commerce-card{padding:24px;border:1px solid #65eee873;border-radius:20px;background:linear-gradient(135deg,#102936,#101829);text-align:center}.commerce-card h3{margin-top:0}.commerce-status{min-height:1.5em}.welcome-actions{display:grid;gap:12px;max-width:430px;margin:auto}.welcome-actions button{width:100%}

/* Public profiles and player links use the same compact cosmic menu surface. */
.player-name-link{display:inline-block;max-width:100%;min-height:44px;padding:8px 0;text-align:left;background:none;border:0;color:#89ecff;font:inherit;text-decoration:underline;text-decoration-color:#4d8697;text-underline-offset:4px;overflow-wrap:anywhere}
.player-name-link:hover{color:#e3fbff;text-decoration-color:currentColor}
.player-name-link:focus-visible{outline:2px solid #65e4ff;outline-offset:4px;border-radius:5px}
.leaderboard-table td:has(.player-name-link){padding-top:4px;padding-bottom:4px}
.friend-row>.player-name-link{flex:1;min-width:0}
.player-profile-hero{display:flex;align-items:center;gap:18px;margin:2px 0 20px;min-width:0}
.player-profile-hero>div:last-child{min-width:0}
.player-profile-orbit{flex:none;display:grid;place-items:center;width:100px;height:100px;border:1px solid #3a879b66;border-radius:50%;background:radial-gradient(circle,#27497966,#0c1b2900 72%);box-shadow:0 0 28px #35bded13}
.player-profile-orbit canvas{width:86px!important;height:86px!important}
#modal .player-profile-name{font-size:calc(26px * var(--font-scale,1));margin:7px 0 0;color:#e8fbff;overflow-wrap:anywhere}
.player-profile-actions{display:grid;gap:8px;margin-bottom:28px}
.player-profile-actions button{margin:0;width:100%}
.player-profile-actions .relationship-label{color:#82e7d5;margin:0;padding:12px 16px;border:1px solid #50acb24d;border-radius:12px;text-align:center;background:#50acb209}
.player-profile-scores{margin-bottom:28px}
.profile-score-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.profile-score{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px 14px;background:linear-gradient(120deg,#123243,#0d192a);border:1px solid #326279;border-radius:16px}
.profile-score:first-child{border-color:#64cbd3;box-shadow:inset 3px 0 #70e9f1;background:linear-gradient(120deg,#163c4c,#18213c)}
.profile-score-place{display:grid;place-items:center;width:30px;height:30px;border:1px solid #82dbe766;border-radius:50%;color:#b9f4fc;font-variant-numeric:tabular-nums}
.profile-score strong{font-size:calc(16px * var(--font-scale,1));display:block;color:#e5f7ff}
.profile-score small{display:block;font:calc(11px * var(--font-scale,1))/1.5 var(--body-font,system-ui);color:#a4bdce;margin-top:4px}
.profile-score-value{text-align:right}
.profile-score-value strong{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-variant-numeric:tabular-nums}
#modal .profile-caption{font-size:calc(12px * var(--font-scale,1));color:#8db3c7;line-height:1.5}
.player-profile-status:empty{display:none}
@media(max-width:380px){.player-profile-hero{gap:12px}.player-profile-orbit{width:76px;height:76px}.player-profile-orbit canvas{width:68px!important;height:68px!important}#modal .player-profile-name{font-size:calc(22px * var(--font-scale,1))}.profile-score{gap:8px;padding:14px 10px}.profile-score strong{font-size:calc(14px * var(--font-scale,1))}}

.launch-nav a.launch-link { text-decoration:none; }
.launch-nav a.launch-link:has(.review-error) { flex-wrap:wrap; }
.launch-link .review-error { flex-basis:100%; color:#ffd1a9; font:13px/1.4 system-ui,sans-serif; }
@media(max-width:360px){.launch-link[data-friend-count-label]:not(.launch-play){padding-right:43px}}