/* Stellar Flow — a compact cockpit, an open playfield, meaningful celebrations. */
:root { --stellar-ink:#fff8ed; --stellar-mint:#79f4d5; --stellar-night:#110c29; }
#strategy-controls { position:absolute; top:calc(var(--play-region-top) + var(--safe-area-top) + 134px); left:var(--play-region-center-x); transform:translateX(-50%); width:min(350px,calc(var(--play-region-width) - 24px)); display:grid; grid-template-columns:1fr 1fr; gap:5px 8px; pointer-events:none; }
#strategy-controls button { position:relative; min-width:0; min-height:44px; display:flex; justify-content:center; align-items:center; gap:4px; padding:5px 8px; overflow:hidden; border:1px solid #b9a5ff55; border-radius:12px; background:#17112ced; color:var(--stellar-ink); font:600 12px/1.2 'Baloo 2',system-ui,sans-serif; pointer-events:auto; cursor:pointer; }
#strategy-controls button:disabled { color:#b9b0cb; border-color:#b9a5ff22; cursor:default; }
#strategy-controls button[aria-pressed="true"] { border-color:var(--stellar-mint); background:#173d40; }
#hold-canvas { width:28px; height:28px; flex:none; }
#nova-label { z-index:1; }
#nova-fill { position:absolute; left:0; right:0; bottom:0; height:3px; transform-origin:left; background:var(--stellar-mint); }
#strategy-announce { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#strategy-tip { grid-column:1/-1; text-align:center; font:500 10px/1.4 'Baloo 2',system-ui,sans-serif; color:#bcb2d7; }
@media(max-height:520px) { #strategy-controls { top:calc(var(--play-region-top) + var(--safe-area-top) + 75px); width:240px; } #strategy-tip { display:none; } }
@media(max-height:740px) {
  #hud .orbit-hud, #hud .chain-meter { display:none; }
  #strategy-controls { top:calc(var(--play-region-top) + var(--safe-area-top) + 82px); }
  #strategy-tip { display:none; }
}
@media(max-height:520px) and (min-width:700px) {
  #strategy-controls { left:auto; right:calc(var(--safe-area-right) + 12px); top:130px; transform:none; width:190px; grid-template-columns:1fr; }
}
#canvas { touch-action:none; }
.stellar-edition { font:700 10px/1.2 'Baloo 2',system-ui,sans-serif; letter-spacing:5px; color:var(--stellar-mint); margin-bottom:6px; }
#screen-title .logo-top { color:#fff1e7; background:none; text-shadow:0 4px 0 #533d78,0 0 38px #ad8cff55; }
#screen-title .logo-bottom { color:#82f0d2; background:none; text-shadow:0 4px 0 #285e67,0 0 38px #79f4d533; }
#btn-play { position:relative; overflow:hidden; border-color:#fff2d180; box-shadow:0 7px 0 #3f235f,0 16px 35px #ad8cff38,inset 0 1px 0 #ffffff75; transition:transform .16s,box-shadow .16s; }
#btn-play:hover { transform:translateY(-2px); box-shadow:0 9px 0 #3f235f,0 20px 40px #ad8cff44,inset 0 1px 0 #ffffff75; }
#btn-play:active { transform:translateY(4px); box-shadow:0 3px 0 #3f235f,0 8px 20px #ad8cff33; }
.discovery-button { display:flex; flex:none; align-items:center; gap:10px; width:min(280px,100%); min-height:54px; margin:2px 0 12px; padding:4px 14px 4px 8px; border:1px solid #ad8cff33; border-radius:17px; color:var(--stellar-ink); background:linear-gradient(120deg,#ad8cff19,#79f4d509); text-align:left; cursor:pointer; }
.discovery-button canvas { width:46px; height:46px; flex:none; }
.discovery-button>span:not(.discovery-arrow) { display:grid; gap:1px; min-width:0; }
.discovery-button small { font:700 9px/1.2 'Baloo 2',system-ui,sans-serif; letter-spacing:1.5px; color:#ada4d1; }
.discovery-button strong { font:700 16px/1.3 'Baloo 2',system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; }
.discovery-arrow { margin-left:auto; color:var(--stellar-mint); font:24px/1 system-ui,sans-serif; }
.discovery-button:hover { border-color:#79f4d580; background-color:#ad8cff16; }
button:focus-visible { outline:2px solid var(--stellar-mint); outline-offset:4px; }

/* Title composition: hero up top, one strong action low, utilities at the floor. */
#screen-title.visible {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,380px) minmax(0,1fr);
  grid-template-rows:auto auto minmax(96px,1fr) auto auto auto;
  justify-items:center;
  align-content:stretch;
  column-gap:14px;
  padding-top:max(calc(var(--safe-area-top) + 26px),34px);
  padding-bottom:max(calc(var(--safe-area-bottom) + 14px),18px);
  overflow:hidden;
}
#screen-title > .stellar-edition,
#screen-title > .logo,
#screen-title > #dex-canvas,
#screen-title > .dex-label,
#screen-title > .discovery-button,
#screen-title > .play-modes,
#screen-title > .title-best,
#screen-title > #btn-leaderboard-title,
#screen-title > #leaderboard-status-title,
#screen-title > .settings,
#screen-title > .language-picker,
#screen-title > .credit { grid-column:2; }
#screen-title > .stellar-edition { grid-row:1; align-self:end; margin:0 0 8px; }
#screen-title > .logo { grid-row:2; align-self:start; margin:0; }
#screen-title > #dex-canvas { grid-row:3; align-self:center; margin:18px 0 0; height:78px; }
#screen-title > .dex-label { grid-row:3; align-self:center; margin-top:112px; font-size:11px; letter-spacing:2.4px; opacity:.8; }
#screen-title > .discovery-button {
  grid-row:4;
  width:100%;
  margin:0 0 12px;
  min-height:58px;
  border-color:#79f4d548;
  background:linear-gradient(110deg,#211540d9,#13263bc9);
  box-shadow:0 12px 32px #05020d40,inset 0 1px 0 #ffffff12;
}
#screen-title > .play-modes { grid-row:5; margin:0; width:100%; }
#screen-title > .title-best {
  grid-row:5;
  align-self:end;
  justify-self:start;
  transform:translateY(30px);
  margin:0;
  padding-left:4px;
  font-size:11px;
  letter-spacing:1.8px;
  opacity:.72;
}
#screen-title > #btn-leaderboard-title {
  grid-row:5;
  align-self:end;
  justify-self:end;
  transform:translateY(38px);
  min-height:36px;
  margin:0;
  padding:7px 12px;
  font-size:11px;
  background:#160f31b8;
  border-color:#ffe9ad38;
}
#screen-title > #leaderboard-status-title { display:none; }
#screen-title > .settings {
  grid-column:1 / -1;
  grid-row:6;
  align-self:end;
  display:flex;
  flex-wrap:nowrap;
  gap:9px;
  margin:52px 0 0;
  padding:8px 11px;
  border:1px solid #ad8cff26;
  border-radius:18px;
  background:#0d0920b8;
  box-shadow:0 10px 32px #05020d52,inset 0 1px 0 #ffffff0e;
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
}
#screen-title > .settings .toggle {
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:0;
  overflow:hidden;
  border-radius:13px;
  font-size:0;
  display:grid;
  place-items:center;
  opacity:.75;
}
#screen-title > .settings .toggle::before { font:18px/1 system-ui,sans-serif; }
#screen-title > .settings #tg-sfx::before { content:'🔊'; }
#screen-title > .settings #tg-music::before { content:'🎵'; }
#screen-title > .settings #tg-haptic::before { content:'📳'; }
#screen-title > .settings #tg-tilt::before { content:'🧭'; }
#screen-title > .settings #btn-shop::before { content:'🛒'; }
#screen-title > .settings #btn-install::before { content:'⬇️'; }
#screen-title > .settings .toggle.on { opacity:1; background:#79f4d50c; }
#screen-title > .language-picker {
  grid-column:1;
  grid-row:6;
  justify-self:start;
  align-self:end;
  margin:0 0 5px;
  min-height:32px;
  font-size:0;
  z-index:2;
}
#screen-title > .language-picker::before { content:'🌐'; font:16px/1 system-ui,sans-serif; }
#screen-title > .language-picker select {
  min-height:32px;
  max-width:98px;
  padding:3px 24px 3px 8px;
  font-size:10px;
  background:#160f31d9;
}
#screen-title > .credit {
  grid-column:3;
  grid-row:6;
  justify-self:end;
  align-self:end;
  margin:0 0 8px;
  font-size:9px;
  letter-spacing:.6px;
  opacity:.58;
}
#screen-title .logo-top,#screen-title .logo-bottom { font-size:clamp(48px,8vh,68px); }
#screen-title .logo-sub { font-size:clamp(11px,1.8vh,15px); }

.orbit-hud { position:absolute; top:calc(var(--play-region-top) + var(--safe-area-top) + 93px); left:var(--play-region-center-x); transform:translateX(-50%); width:min(360px,calc(var(--play-region-width) - 32px)); display:flex; gap:8px; align-items:center; padding:7px 11px 9px; border:1px solid #b9a5ff26; border-radius:10px; background:#130b2dde; font:600 11px/1.3 'Baloo 2',system-ui,sans-serif; color:#d8d1ed; pointer-events:none; transition:opacity .15s,border-color .2s; }
.orbit-space { color:var(--stellar-mint); font-size:10px; letter-spacing:1px; white-space:nowrap; }
.orbit-objective { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.orbit-progress { color:#b1a3d1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.orbit-expansion { position:absolute; bottom:0; left:9px; right:9px; height:2px; overflow:hidden; background:#b9a5ff16; }
.orbit-expansion i,.chain-fuse i,.contract-bar i { display:block; width:100%; height:100%; background:var(--stellar-mint); transform-origin:left; }
.orbit-hud.reward { color:var(--stellar-ink); border-color:#ffc58f90; background:#291b38ed; }
.orbit-hud.reward .orbit-objective,.orbit-hud.reward .orbit-progress { color:#ffdc96; }
.orbit-hud.at-risk { opacity:0; }
.chain-meter { margin:4px auto 0; width:86px; height:20px; opacity:0; color:var(--stellar-mint); font:800 10px/1.2 'Baloo 2',system-ui,sans-serif; letter-spacing:1.2px; transform:translateY(-2px); transition:opacity .13s,transform .13s; }
.chain-meter.active { opacity:1; transform:translateY(0); }
.chain-meter.hot { color:#ffd190; }
.chain-fuse { height:3px; margin-top:3px; background:#79f4d51a; border-radius:4px; overflow:hidden; }
.chain-fuse i { transition:transform .1s linear; }
.chain-meter.hot .chain-fuse i { background:#ffd190; }
.orbit-contracts { align-self:stretch; padding:12px; border:1px solid #b9a5ff26; background:#130b2d60; border-radius:14px; }
.orbit-contracts h3 { font:700 10px/1.2 'Baloo 2',system-ui,sans-serif; letter-spacing:1.5px; color:var(--stellar-mint); margin-bottom:12px; }
.orbit-contract { display:grid; grid-template-columns:1fr auto; gap:4px 8px; margin-top:9px; font:600 11px/1.3 'Baloo 2',system-ui,sans-serif; }
.orbit-contract strong { color:#ffd190; font-size:10px; white-space:nowrap; }
.contract-bar { grid-column:1/-1; height:3px; border-radius:3px; overflow:hidden; background:#ad8cff22; }
.contract-note { color:#b3a9cb; font:400 10px/1.5 system-ui,sans-serif; margin-top:10px; }
.orbit-result { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; color:var(--stellar-mint); font:600 11px/1.5 'Baloo 2',system-ui,sans-serif; text-align:center; }
.orbit-result span:last-child { color:#ffd190; }
.orbit-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.planetdex-dialog { margin:auto; width:min(600px,calc(100vw - 24px)); max-height:calc(100dvh - 32px - var(--safe-area-top) - var(--safe-area-bottom)); padding:20px; overflow:auto; border:1px solid #b9a5ff50; border-radius:24px; background:linear-gradient(145deg,#211640,#0f0a23); color:var(--stellar-ink); box-shadow:0 30px 90px #0009; overscroll-behavior:contain; }
.planetdex-dialog::backdrop { background:#05020de6; }
.planetdex-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.planetdex-head h2 { font:800 17px/1.4 'Baloo 2',system-ui,sans-serif; letter-spacing:2px; }
.planetdex-close { width:44px; height:44px; border-radius:13px; border:1px solid #ad8cff55; background:#ad8cff12; color:var(--stellar-ink); font:28px/1 system-ui,sans-serif; cursor:pointer; flex:none; }
.planetdex-note { color:#bdb3d7; font:400 12px/1.65 system-ui,sans-serif; margin:8px 0 16px; max-width:50ch; }
.planetdex-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.planetdex-tile { display:flex; flex-direction:column; align-items:center; padding:8px 3px 12px; border:1px solid #b9a5ff2a; border-radius:14px; background:#ad8cff0d; text-align:center; min-width:0; }
.planetdex-tile canvas { width:70px; height:70px; }
.planetdex-tile strong { font:700 11px/1.3 'Baloo 2',system-ui,sans-serif; overflow-wrap:anywhere; }
.planetdex-tile small { margin-top:5px; font:400 9px/1.3 system-ui,sans-serif; color:#bdb3d7; }
.planetdex-tile.undiscovered { border-style:dashed; }
.planetdex-tile.collapse-tier { border-color:#79f4d570; background:#79f4d50b; }
@media (min-width:600px) { .planetdex-grid { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:520px) {
  #screen-title.visible {
    grid-template-columns:42px minmax(0,1fr) 42px;
    grid-template-rows:auto auto minmax(92px,1fr) auto auto auto;
    padding-left:max(calc(var(--safe-area-left) + 14px),18px);
    padding-right:max(calc(var(--safe-area-right) + 14px),18px);
  }
  #screen-title > .settings { gap:7px; padding:7px 8px; }
  #screen-title > .settings .toggle { width:40px; min-width:40px; height:40px; min-height:40px; }
  #screen-title > .language-picker { grid-column:1 / -1; justify-self:start; transform:translateY(-54px); }
  #screen-title > .credit { grid-column:1 / -1; justify-self:end; transform:translateY(-54px); }
}
@media (max-height:760px) {
  #screen-title.visible { padding-top:max(calc(var(--safe-area-top) + 14px),18px); }
  #screen-title > .stellar-edition { margin-bottom:3px; font-size:8px; letter-spacing:3.5px; }
  #screen-title .logo-top,#screen-title .logo-bottom { font-size:clamp(40px,8vh,54px); }
  #screen-title .logo-sub { margin-top:5px; font-size:10px; letter-spacing:2.5px; }
  #screen-title > #dex-canvas { height:62px; margin-top:8px; }
  #screen-title > .dex-label { margin-top:87px; font-size:9px; }
  #screen-title > .discovery-button { min-height:48px; margin-bottom:8px; }
  #screen-title > .discovery-button canvas { width:38px; height:38px; }
  #screen-title > .settings { margin-top:46px; padding:6px 8px; }
  #screen-title > .settings .toggle { width:38px; min-width:38px; height:38px; min-height:38px; }
  #screen-title > .language-picker,#screen-title > .credit { display:none; }
}
@media (max-height:620px) {
  #screen-title.visible { grid-template-rows:auto auto 66px auto auto auto; overflow:auto; }
  #screen-title > #dex-canvas { height:50px; margin-top:4px; }
  #screen-title > .dex-label { display:none; }
  #screen-title > .discovery-button { min-height:44px; }
  #screen-title > .settings { margin-top:44px; }
}
@media (max-height:700px) {
  .discovery-button { min-height:44px; margin-bottom:8px; }
  .discovery-button canvas { width:36px; height:36px; }
  .stellar-edition { margin-bottom:2px; font-size:8px; letter-spacing:3px; }
  #screen-pause .panel,#screen-over .panel { gap:8px; padding:18px; }
}
@media (max-height:560px) {
  .orbit-hud { display:none; }
  .stellar-edition { display:none; }
  .discovery-button { margin:0 0 6px; }
  #screen-pause,#screen-over { justify-content:flex-start; overflow-y:auto; }
  #screen-pause .panel,#screen-over .panel { flex:none; margin:auto; }
  .orbit-contracts { padding:8px; }
  .contract-note { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  #app.screen-rumble,#hint,.panel,.sp-stage * { animation:none!important; }
  .chain-meter,.chain-fuse i,.orbit-hud,#btn-play { transition:none!important; }
}

/* The field guide is readable and interactive even before a discovery. */
.planetdex-tile { color:inherit; cursor:pointer; font:inherit; }
.planetdex-tile[aria-pressed="true"] { border-color:#79f4d5; background:#79f4d519; }
.planetdex-tile:focus-visible, .celestial-fact:focus-visible, #dex-canvas:focus-visible { outline:3px solid #79f4d5; outline-offset:3px; }
.celestial-detail { margin:0 0 16px; padding:16px; border:1px solid #79f4d54d; border-radius:16px; background:#101026; }
.celestial-detail[hidden] { display:none; }
.celestial-detail h3 { margin:6px 0; font:700 22px/1.4 system-ui,sans-serif; }
.celestial-detail p { margin:8px 0 12px; font:400 15px/1.7 system-ui,sans-serif; color:#eee9ff; }
.celestial-detail small { font:500 12px/1.5 system-ui,sans-serif; color:#bcb1dd; }
.celestial-fact { display:grid; gap:6px; width:100%; margin:10px 0; padding:14px; border:1px solid #ad8cff44; border-radius:16px; background:#ad8cff0d; color:#eee9ff; text-align:left; cursor:pointer; }
.celestial-fact small { font:600 11px/1.4 system-ui,sans-serif; color:#79f4d5; }
.celestial-fact strong { font:700 16px/1.4 system-ui,sans-serif; }
.celestial-fact span { font:400 13px/1.65 system-ui,sans-serif; }
#screen-over { overflow-y:auto; overscroll-behavior:contain; }
#screen-over .panel { flex-shrink:0; margin:auto; }