/* Solar circuit theme. Planet artwork and the arena stay in the renderer. */
@font-face { font-family: 'Spicy Sale'; src:url('fonts/Spicy-Sale.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family: Chewy; src:url('fonts/Chewy.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family: Nunito; src:url('fonts/Nunito-Latin.woff2') format('woff2'); font-style:normal; font-weight:400 700; font-display:swap; }
:root { --title-font:'Spicy Sale', Chewy, ui-rounded, sans-serif; --display-font: Chewy, ui-rounded, system-ui, sans-serif; font-synthesis:none; --ui-font: Nunito, -apple-system, system-ui, sans-serif; }

dialog {
  --cream: #edfaff;
  --muted: #a3b8c5;
  --mint: #58ecff;
  --peach: #ffad55;
  --line: #52ddf52b;
  color: var(--cream);
  background: #080f18;
  border: 1px solid #49cfe36b;
  border-radius: 16px;
  max-width: calc(100vw - 24px);
  box-shadow: 0 0 0 4px #38dcff05, 0 0 35px #0bd3ff12, 0 32px 100px #000c;
}
dialog::backdrop { background: #02060ccc; backdrop-filter: blur(7px); }
.modal-header {
  padding: 14px 16px;
  gap: 8px;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  background: #080f18;
  border-bottom: 1px solid #4be4ff33;
  box-shadow: 0 1px 14px #2bd4ff08;
  z-index: 1;
}
.modal-header h2, #account-dialog h2, dialog h3 {
  font-family: var(--display-font);
  font-weight: 600;
  color: #edfaff;
  letter-spacing: .4px;
}
#modal[data-page=menu] .modal-header h2 {
  font: 700 calc(29px * var(--font-scale, 1))/1.2 var(--display-font);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #edfdff;
  text-shadow: 0 0 18px #45dfff38;
}
.modal-header .round-button {
  width: 44px;
  height: 44px;
  color: #94eaf7;
  background: #0d1d29;
  border: 1px solid #53d9f143;
  box-shadow: none;
}
#modal-body { padding: 22px 24px 24px; scrollbar-color: #276575 #080f18; }
#modal[data-page=menu] #modal-body {
  background:
    radial-gradient(ellipse at 50% 0, #10465044, transparent 42%),
    linear-gradient(#46defa06 1px, transparent 1px),
    linear-gradient(90deg, #46defa06 1px, transparent 1px), #080f18;
  background-size: auto, 32px 32px, 32px 32px, auto;
}
.menu-hero { height: 142px; margin: 0 0 10px; isolation: isolate; }
.menu-hero::before {
  content: '';
  position: absolute;
  height: 1px;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, transparent, #50edff80 25%, #50edff80 75%, transparent);
  z-index: -1;
}
.menu-hero::after {
  content: '';
  position: absolute;
  width: 148px;
  height: 148px;
  border: 1px solid #5ce6ff4d;
  border-radius: 25px;
  z-index: -1;
}
.menu-app-icon {
  width: 130px;
  height: 130px;
  display: block;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid #ffb25c52;
  box-shadow: 0 0 28px #ff8b2319, 0 6px 28px #0009;
}
#modal[data-page=menu] .menu-intro {
  font: 500 calc(11px * var(--font-scale, 1))/1.5 var(--display-font) !important;
  letter-spacing: 3.7px;
  color: #91c3d0 !important;
  margin: 16px 0 22px;
}
.save-compat-note { text-align: center; font-size: calc(12px * var(--font-scale, 1)) !important; }
dialog .primary-button, dialog .secondary-button, dialog .menu-card {
  border-radius: 7px;
  font-family: var(--display-font);
  font-weight: 600;
  min-height: 48px;
  letter-spacing: .2px;
  box-shadow: none;
  border: 1px solid #4bdcf03d;
}
dialog .primary-button {
  background: #51e1f2;
  border-color: #88f4ff;
  color: #05202c;
  box-shadow: 0 0 17px #36ddf119;
}
dialog .secondary-button { background: #101e2a; color: #c8e0ec; }
.mode-cards { gap: 12px; margin: 18px 0; }
.mode-cards button, .mode-cards button:nth-child(2) {
  position: relative;
  overflow: hidden;
  padding: 17px 18px;
  min-height: 84px;
  border: 1px solid #4bdcf077;
  border-left: 3px solid #53eaff;
  background: linear-gradient(110deg, #13313d, #0b1824 75%);
  color: #80f0ff;
  box-shadow: inset 0 1px #83f1ff0a, 0 0 18px #2fd9ff09;
}
.mode-cards button:nth-child(2) {
  background: linear-gradient(110deg, #332519, #161921 75%);
  border-color: #eea45c77;
  border-left-color: #ffb366;
  color: #ffc184;
  box-shadow: inset 0 1px #ffc98c0a, 0 0 18px #ff932009;
}
.mode-cards strong { font: 600 calc(20px * var(--font-scale, 1))/1.3 var(--display-font); letter-spacing: .7px; }
.mode-cards small { color: #b1c6d2; font: 400 calc(12px * var(--font-scale, 1))/1.4 var(--ui-font); margin-top: 5px; }
.mode-cards button:nth-child(2) small { color: #cec1b8; }
.mode-cards .mode-icon { font: calc(29px * var(--font-scale, 1))/1 system-ui, sans-serif; text-shadow: 0 0 15px currentColor; }
.menu-grid { gap: 9px; }
.menu-grid button { font-size: calc(14px * var(--font-scale, 1)); overflow-wrap: anywhere; padding: 12px 8px; background: #0e1a25; }
.prototype-note { font: 500 calc(10px * var(--font-scale, 1))/1.6 var(--display-font) !important; letter-spacing: 2px; color: #7295a4 !important; }
dialog .eyebrow { color: #83becd; }
dialog a { color: var(--mint); }
.settings-form input, .settings-form select, .recovery-code {
  background: #030b13;
  border-color: #45b7cf55;
  border-radius: 6px;
}
.score-tabs button, .guide-planets button, .lab-scene,
.lifetime-grid > div, .summary-grid > div, .milestone-card { border-radius: 8px; background: #0f1c27; }
.score-tabs button[aria-pressed=true] { background: #4dd8ef; color: #041c27; }
.guide-planets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-planets canvas { max-width: 100%; height: auto !important; }
.milestone-card h3 { color: #ffbd7a; }
.lab-scene strong { font-family: var(--display-font); }
#modal[data-afterburn] { background: #0a101de8; border-color: #ff9b5e66; }
#modal[data-afterburn] .modal-header { background: #0d1421f5; }
#modal[data-afterburn][data-page=menu] #modal-body { background-color: #080f18d9; }

.wordmark { font: 700 calc(25px * var(--font-scale, 1))/1.2 var(--display-font); letter-spacing: 1.5px; color: #e3faff; text-shadow: 0 0 18px #4adfff29; }
.wordmark small { color: #86bfd0; left: 48px; top: 34px; font: 500 calc(8px * var(--font-scale, 1))/1 var(--display-font); letter-spacing: 2px; }
.wordmark .app-icon { width: 40px; height: 40px; border-radius: 9px; border: 1px solid #53cee54a; }

@media (hover: hover) {
  dialog .primary-button:hover { background: #8bf1fc; }
  dialog .secondary-button:hover { background: #18303d; border-color: #57d9f17a; }
  .mode-cards button:hover { background: linear-gradient(110deg, #1a4350, #0c1e2c); border-color: #78f1ff; }
  .mode-cards button:nth-child(2):hover { background: linear-gradient(110deg, #49321d, #211c22); border-color: #ffd09b; }
  .modal-header .round-button:hover { background: #163441; border-color: #73eaff; }
}
@media (max-width: 849px) {
  #modal-body { padding: 19px 18px 21px; }
  #modal[data-page=menu] .modal-header h2 { font-size: calc(26px * var(--font-scale, 1)); }
  .menu-hero { height: 132px; }
  .menu-hero::after { width: 136px; height: 136px; border-radius: 22px; }
  .menu-app-icon { width: 120px; height: 120px; border-radius: 16px; }
}
@media (max-width: 360px), (max-height: 690px) {
  .menu-hero { height: 90px; margin-bottom: 6px; }
  .menu-hero::after { width: 96px; height: 96px; border-radius: 18px; }
  .menu-app-icon { width: 80px; height: 80px; border-radius: 12px; }
  #modal[data-page=menu] .menu-intro { margin: 13px 0 15px; font-size: calc(10px * var(--font-scale, 1)) !important; letter-spacing: 2.8px; }
  #modal[data-page=menu] .modal-header h2 { font-size: calc(23px * var(--font-scale, 1)); letter-spacing: .5px; }
  .mode-cards button { min-height: 77px; padding: 13px; }
  .mode-cards strong { font-size: calc(18px * var(--font-scale, 1)); }
  .mode-cards small { font-size: calc(11px * var(--font-scale, 1)); }
  .menu-grid button { font-size: calc(13px * var(--font-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) { dialog button { transition: none; } }

/* Required updates stay above every menu and cannot be dismissed. */
#required-update { padding: 28px; width: min(420px, calc(100vw - 24px)); }
#required-update h2 { font: 600 calc(25px * var(--font-scale, 1))/1.3 var(--display-font); margin: 0 0 12px; }
#required-update p { font-size: calc(14px * var(--font-scale, 1)); line-height: 1.65; }
#required-update .update-status { min-height: 22px; color: #ffc184; font-size: calc(12px * var(--font-scale, 1)); }
#required-update .primary-button { margin-bottom: 0; }
#required-update::backdrop { background: #02060ce8; backdrop-filter: blur(8px); }

#lab-rest { align-self: center; font-size: calc(11px * var(--font-scale, 1)); color: #a3d7df; padding: 0 5px; font-variant-numeric: tabular-nums; }

/* One quiet, continuous route through the worlds; artwork carries the guide. */
#modal[data-page=guide] #modal-body { padding: 10px 16px 16px; background: #080f18; }
.world-flow { position: relative; width: 100%; aspect-ratio: 360 / 490; max-width: 430px; margin: auto; isolation: isolate; }
.flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow-lines > path { fill: none; stroke: #426477; stroke-width: 1.5; stroke-linecap: round; }
.flow-world { position: absolute; transform: translate(-50%, -50%); aspect-ratio: 1; display: grid; place-items: center; }
.flow-world canvas, .flow-world svg { display: block; width: 100% !important; height: 100% !important; max-width: none; }
.flow-world:last-child { filter: drop-shadow(0 0 9px #718ffa1a); }

.install-prompt { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: #0c202b; border: 1px solid #3d7c8c75; border-radius: 13px; padding: 14px; margin: 18px 0 0; }
.install-prompt img { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.install-prompt strong { display: block; font: 600 calc(14px * var(--font-scale, 1))/1.4 var(--display-font); }
.install-prompt small { display: block; font: calc(12px * var(--font-scale, 1))/1.5 system-ui, sans-serif; color: var(--muted); margin-top: 3px; }
.install-chevron { margin-left: auto; color: #80e7f5; font-size: calc(22px * var(--font-scale, 1)); }
.signin-reminder, .guest-button { display: block; width: 100%; background: transparent; color: #a8dfea; font: calc(14px * var(--font-scale, 1))/1.4 system-ui, sans-serif; min-height: 44px; padding: 12px 5px; margin: 12px 0 0; }
.welcome-icon { display: block; width: 88px; height: 88px; border-radius: 20px; margin: 0 auto 20px; }
dialog .welcome-title { font-size: calc(25px * var(--font-scale, 1)); text-align: center; margin: 0 0 8px; }
dialog .welcome-copy { text-align: center; margin: 0 0 24px; }
.setup-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; margin: 20px 0 10px; }
.setup-tabs button { padding: 10px 4px; min-height: 44px; font: calc(12px * var(--font-scale, 1))/1.3 system-ui, sans-serif; border: 1px solid #365460; border-radius: 8px; background: transparent; color: var(--muted); }
.setup-tabs button[aria-pressed=true] { color: #cefbff; background: #153843; border-color: #72d7e5; }
.setup-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.setup-steps li { display: grid; grid-template-columns: 86px minmax(0,1fr); align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid #29404e; counter-increment: step; }
.setup-illustration { width: 100%; height: auto; }
.setup-steps h3 { font-size: calc(15px * var(--font-scale, 1)); line-height: 1.4; margin: 0 0 5px; letter-spacing: 0; }
.setup-steps h3::before { content: counter(step) ' · '; color: #8ba5b1; }
.setup-steps p { font: calc(13px * var(--font-scale, 1))/1.5 system-ui, sans-serif; margin: 0; }
.setup-note { font: calc(12px * var(--font-scale, 1))/1.6 system-ui, sans-serif !important; margin: 20px 0 10px; }
.setup-help { display: inline-block; font: calc(12px * var(--font-scale, 1))/1.5 system-ui, sans-serif; color: #96d4df; padding: 6px 0 16px; text-underline-offset: 4px; }
.profile-identity { display: flex; align-items: center; gap: 15px; padding: 4px 0 24px; }
.profile-avatar { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border: 1px solid #4ca7b6; border-radius: 50%; background: #14323e; color: #c5faff; font: 600 calc(25px * var(--font-scale, 1)) var(--display-font); }
.profile-identity h3 { font-size: calc(20px * var(--font-scale, 1)); margin: 0 0 5px; overflow-wrap: anywhere; }
dialog .profile-sync { font: calc(12px * var(--font-scale, 1))/1.5 system-ui, sans-serif; margin: 0; }
.secondary-button.logout-button { color: #ffc8b5; border-color: #8f615d; background: #241b21; }
.profile-error { font-size: calc(12px * var(--font-scale, 1)); color: #ffcca7; }
.profile-error:empty { display: none; }
.friend-form label{display:block;margin:12px 0 8px;font-size:calc(14px * var(--font-scale, 1));color:#b9dfe6}.friend-form>div{display:flex;gap:8px;align-items:stretch}.friend-form input{width:0;min-width:0;flex:1;min-height:46px;border:1px solid #375463;background:#08141e;border-radius:10px;padding:10px 12px;color:#e4faff;font:calc(16px * var(--font-scale, 1)) system-ui}.friend-form button{width:auto;margin:0;padding:10px 15px}.friend-status{min-height:2.8em;font-size:calc(13px * var(--font-scale, 1))!important;color:#abdce5}.friend-section{margin:22px 0}.friend-section h3{font-size:calc(15px * var(--font-scale, 1))!important;letter-spacing:.3px;color:#96d4df}.friend-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 0;border-bottom:1px solid #263e4b}.friend-row strong{font-size:calc(14px * var(--font-scale, 1));overflow-wrap:anywhere}.friend-actions{display:flex;gap:6px;flex-wrap:wrap}.friend-actions button{width:auto!important;min-height:40px;margin:0!important;padding:8px 11px;font-size:calc(12px * var(--font-scale, 1))}.danger-button{background:#311d27!important;color:#ffc4c1!important;border:1px solid #8c535d!important;margin-top:18px!important}.legal-links{display:flex;justify-content:center;gap:24px;font-size:calc(13px * var(--font-scale, 1))!important}.legal-links a{color:#96d4df;text-underline-offset:4px}.score-tabs button{min-width:0;flex:1}
.profile-tools { border-top: 1px solid #29404e; margin-top: 25px; padding-top: 16px; }
.profile-tools summary { cursor: pointer; padding: 8px 0; font-size: calc(14px * var(--font-scale, 1)); color: var(--muted); }
@media (max-width: 380px) { .setup-steps li { grid-template-columns: 68px minmax(0,1fr); gap: 10px; } .install-prompt { gap: 9px; padding: 12px; } }
.friend-actions button{border:1px solid #375563;border-radius:9px;background:#122631;color:#c8ecf3;font-family:system-ui,sans-serif}.friend-actions button:hover{border-color:#70c9dc;background:#1a3542}.friend-actions button:disabled{opacity:.5}.policy-copy h2{font-size:calc(19px * var(--font-scale, 1))!important;line-height:1.4}.policy-copy p{font-size:calc(14px * var(--font-scale, 1))!important;line-height:1.7!important}.policy-copy .date{color:#9cb2bf;font-size:calc(12px * var(--font-scale, 1))!important}
.leaderboard-table th:first-child,.leaderboard-table td:first-child{width:52px;white-space:nowrap;word-break:normal}.leaderboard-table th:last-child,.leaderboard-table td:last-child{white-space:nowrap}.leaderboard-table td:nth-child(2){overflow-wrap:anywhere}