:root {
  --ink: #050914; --panel: #0a1424; --warm: #e5f7ff; --warm-strong: #99e7ff;
  --cyan: #75dcff; --muted: #8196ac; --line: #244057; --line-bright: #385d77;
  font-family: 'Bahnschrift', 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
[hidden] { display: none !important; }
#app { background: radial-gradient(ellipse at 54% 48%, #10213b 0, #091323 35%, #040914 74%); }
#app::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 23% 28%, #36326c17, transparent 34%), radial-gradient(ellipse at 78% 67%, #06657c16, transparent 37%); }
#planet-canvas, #game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#planet-canvas { pointer-events: none; z-index: 1; }
#game-canvas { z-index: 2; }
#vignette { z-index: 3; background: radial-gradient(ellipse, transparent 35%, #01050c42 100%); }
.hud { inset: 28px 34px auto; align-items: center; }
.brand { gap: 14px; }
.brand-mark { width: 40px; height: 40px; border-color: #85d7f480; box-shadow: none; }
.brand-mark::before { inset: 7px; transform: none; border-color: #85d7f485; }
.brand-mark::after { inset: 13px; transform: none; border-color: #c4efffcc; }
.brand-main { color: #dbeef7; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: none; }
.brand-sub { color: #6e93a8; letter-spacing: .12em; font-size: 10px; }
.hud-stats { gap: 28px; align-items: center; pointer-events: none; }
.stat { min-width: 66px; padding: 0; border: 0; background: none; border-radius: 0; backdrop-filter: none; }
.stat:first-child { min-width: 84px; padding-right: 24px; border-right: 1px solid #36536b70; }
.stat-label { font-size: 10px; letter-spacing: .12em; color: #86a5b9; }
.stat-value { font-size: 26px; font-weight: 300; line-height: 1.15; }
.stat:first-child .stat-value { font-size: 40px; }
.stat-value.warm, .stat-value.cyan { color: #dcf5ff; }
.viewport-mark { position: absolute; z-index: 4; width: 12px; height: 12px; opacity: .35; pointer-events: none; }
.viewport-mark.tl { left: 22px; top: 22px; border-left: 1px solid #a2dcf5; border-top: 1px solid #a2dcf5; }
.viewport-mark.br { right: 22px; bottom: 22px; border-right: 1px solid #a2dcf5; border-bottom: 1px solid #a2dcf5; }
.hint { color: #87a6bc; border: none; background: none; bottom: 28px; padding: 0; font-size: 11px; letter-spacing: .03em; }
.hint kbd { color: #d3edfa; border-color: #36536b; padding: 3px 6px; border-radius: 3px; font: inherit; }
.overlay { background: #02071140; backdrop-filter: none; pointer-events: none; }
.dialog { pointer-events: auto; background: linear-gradient(140deg, #0e1c2ef5, #07101df8); border: 1px solid #365772; border-radius: 6px; box-shadow: 0 24px 100px #0007; max-height: calc(100dvh - 44px); overflow-y: auto; }
.dialog::before { display: none; }
#start-overlay { display: flex; align-items: center; justify-content: flex-start; padding: 5vw; background: none; }
#start-overlay .dialog { width: 460px; padding: 30px 0; background: none; border: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.eyebrow { text-transform: none; letter-spacing: .17em; color: #86d8f2; font-size: 11px; margin-bottom: 16px; }
h1 { color: #e4f5ff; font-size: clamp(44px, 5.1vw, 76px); line-height: 1.02; font-weight: 600; letter-spacing: -.045em; margin: 20px 0 24px; text-shadow: 0 4px 50px #55a6f226; }
h1 span { display: block; }
h2 { color: #e4f5ff; font-size: 30px; letter-spacing: -.025em; }
.dialog-lead { max-width: 325px; font-size: 14px; color: #9bb3c5; line-height: 1.9; }
.dialog-note { color: #7294ad; }
.work-credits { margin-top: 24px; padding-top: 16px; border-top: 1px solid #36577270; color: #9bb3c5; font-size: 12px; line-height: 1.9; }
.work-credits p { margin: 0; }
.work-credits p + p { margin-top: 5px; }
.project-updates { margin-top: 16px; color: #9bb3c5; font-size: 12px; line-height: 1.9; }
.project-updates p { margin: 0; }
.project-updates p + p, #project-repository-info { margin-top: 5px; }
.project-updates a { color: #99e7ff; text-underline-offset: 3px; overflow-wrap: anywhere; }
.project-updates a:hover { color: #e4f7ff; }
.project-updates a:focus-visible { outline: 2px solid #75dcff; outline-offset: 3px; }
#start-overlay .work-credits { padding: 16px 14px; border: 1px solid #36577270; background: #050c18eb; }
.button-row { margin-top: 32px; gap: 12px; }
.primary, .secondary, .ghost { padding: 12px 24px; border-radius: 3px; font-size: 13px; letter-spacing: .03em; }
.primary { background: #c6edff; box-shadow: 0 0 30px #75cfff20; color: #081725; }
.primary:hover { background: #e2f6ff; box-shadow: 0 0 32px #75cfff40; }
.secondary, .ghost { background: #07132180; border-color: #395970; color: #b8d1e3; }
.orbit-caption { margin-top: 43px; display: flex; align-items: center; gap: 12px; color: #5e8ba6; font-size: 10px; letter-spacing: .16em; }
.orbit-caption::before { content: ''; width: 30px; height: 1px; background: #507d98; }
.game-controls { position: absolute; z-index: 6; right: 34px; bottom: 28px; display: flex; gap: 6px; }
.game-controls button { width: 60px; height: 46px; color: #a6c9df; border: 1px solid #29465e; background: #081524b8; border-radius: 4px; font-size: 20px; font-weight: 300; }
.game-controls button span, .game-controls button small { display: block; line-height: 1.2; }
.game-controls button small { font-size: 9px; margin-top: 3px; }
.game-controls button[aria-pressed='true'] { background: #173d53; border-color: #8ddcff; color: #e4f7ff; box-shadow: 0 0 20px #60bcff20; }
.game-controls button:hover { background: #19354b; color: #e6f8ff; }
.game-controls #pause-control { width: 34px; margin-left: 10px; font-size: 13px; }
.sound-controls { position: absolute; z-index: 11; left: 34px; bottom: 62px; display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid #29465e; border-radius: 4px; background: #081524e8; }
.sound-controls button { padding: 6px 2px; background: transparent; color: #a6c9df; font-size: 11px; white-space: nowrap; }
.sound-controls input { width: 86px; accent-color: #99dfff; cursor: pointer; }
.sound-controls:has(:disabled) { opacity: .55; }
.legend { position: absolute; z-index: 4; left: 34px; bottom: 32px; display: flex; gap: 15px; color: #6d8ca2; font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 4px; height: 4px; border-radius: 50%; background: #7bb7bb; box-shadow: 0 0 8px #7bb7bb88; }
.legend .explosive { background: #ffad74; box-shadow: 0 0 8px #ffad7488; }
.legend .extra { background: #bca9ef; box-shadow: 0 0 8px #bca9ef88; }
#run-tag { position: absolute; top: 92px; right: 34px; z-index: 6; color: #f1bda0; font-size: 10px; letter-spacing: .06em; }
#app[data-phase='menu'] .hud-stats, #app[data-phase='menu'] #pause-control, #app[data-phase='menu'] .hint, #app[data-phase='menu'] .legend { visibility: hidden; }
#app[data-phase='paused'] .game-controls, #app[data-phase='gameover'] .game-controls { visibility: hidden; }
.toast { top: 105px; border: 0; border-radius: 3px; background: #0d2032db; color: #bbddee; font-size: 11px; box-shadow: none; }
#app[data-phase='paused'] .toast[data-game-time='true'], #app[data-phase='gameover'] .toast[data-game-time='true'] { animation-play-state: paused; }
.dev-panel { border-radius: 6px; border-color: #3a607d; }
.dev-tabs { gap: 12px; }
.dev-publish { border-top: 1px solid #365772; margin-top: 20px; padding-top: 16px; }
.dev-publish label { display: block; font-size: 12px; color: #c4deed; }
.dev-publish small { color: #8196ac; margin-left: 8px; }
.dev-publish input { width: 100%; margin: 10px 0; padding: 10px; color: #e5f7ff; background: #071321; border: 1px solid #365772; border-radius: 3px; }
.dev-publish button { width: 100%; }
#publish-status { margin: 10px 0 0; font-size: 12px; line-height: 1.7; color: #a5ddef; }
.dev-publish button:disabled { opacity: .6; cursor: wait; }
.toggle.on { background: #195974; }
@media (max-width: 760px) {
  .hud { inset: 20px 20px auto; align-items: flex-start; }
  .brand-main { font-size: 10px; letter-spacing: .04em; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-mark::before { inset: 5px; }.brand-mark::after { inset: 10px; }
  .hud-stats { gap: 13px; }.stat { min-width: 36px; }.stat:first-child { min-width: 48px; padding-right: 12px; }
  .stat-value { font-size: 19px; }.stat:first-child .stat-value { font-size: 27px; }
  #start-overlay { padding: 26px; background: #030916a8; }
  #start-overlay .dialog { width: min(390px, 100%); }
  h1 { font-size: clamp(44px, 10vw, 66px); }.dialog-lead { max-width: 265px; }
  .legend { display: none; }.game-controls { right: 20px; bottom: 62px; }
  .sound-controls { left: 12px; width: 108px; height: 46px; padding: 3px 7px; flex-direction: column; gap: 0; }
  .sound-controls button { padding: 2px; }
  .sound-controls input { width: 90px; height: 17px; margin: 0; }
  .hint { bottom: 24px; font-size: 10px; }.viewport-mark { display: none; }
  .orbit-caption { margin-top: 28px; }#run-tag { top: 77px; right: 20px; }
}
@media (max-height: 540px) {
  #start-overlay .dialog { padding: 0; }h1 { font-size: 43px; margin: 12px 0; }
  .orbit-caption { display: none; }.button-row { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Screen-space instruments: these never inherit the recursive world transform. */
.item-dock { position: absolute; z-index: 6; right: 34px; bottom: 87px; max-width: min(550px, calc(100% - 40px)); padding: 12px 12px 13px 39px; color: #c3e8f7; background: linear-gradient(90deg, #08172800, #0c2435c9 36%, #0c253ce8); border-right: 1px solid #75dcff85; border-radius: 0 5px 5px 0; }
.item-dock::before, .item-dock::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #578ca773 52%, #83ddff); pointer-events: none; }
.item-dock::before { top: 0; }.item-dock::after { bottom: 0; }
.item-dock-heading { display: flex; justify-content: space-between; gap: 22px; margin: 0 0 9px; font-size: 10px; color: #91b4c9; }
.item-dock-heading span:last-child { color: #a3e3f6; }
.item-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.item-card { --pickup-glow: 0; position: relative; display: grid; grid-template-columns: 51px 1fr; align-items: center; text-align: left; width: 184px; min-height: 66px; gap: 9px; padding: 9px 10px; color: #c8e9f8; background: linear-gradient(135deg, #0b1b2ae6, #133048b5); border: 1px solid #3f7796; border-radius: 3px 11px 3px 3px; box-shadow: 0 0 calc(var(--pickup-glow) * 28px) rgb(117 220 255 / var(--pickup-glow)), inset 0 0 calc(var(--pickup-glow) * 20px) #75dcff30; }
.item-card::after { content: ''; position: absolute; inset: 3px; border: 1px solid #a6eeff; opacity: var(--pickup-glow); pointer-events: none; }
.item-card:not(:disabled):hover { border-color: #a5e7ff; background: #123750; }
.item-card:focus-visible { outline-offset: 4px; }
.item-card:disabled { cursor: default; color: #819faf; border-color: #325168; background: #0b1c2bc4; }
.item-card[aria-pressed='true'] { color: #e8f8ff; border-color: #a3eaff; background: linear-gradient(135deg, #16495bd9, #102940eb); box-shadow: 0 0 15px #75dcff1c, inset 0 0 22px #75dcff0d; }
.item-icon { width: 47px; height: 43px; color: #96e6ff; filter: drop-shadow(0 0 5px #74daff70); }
.item-card:disabled .item-icon { color: #547c98; filter: none; }
.item-card-name { display: block; padding-right: 22px; font-size: 11px; line-height: 1.4; font-weight: 500; }
.item-card-detail { display: block; margin-top: 6px; color: #89a8bd; font-size: 9px; white-space: nowrap; }
.item-card[aria-pressed='true'] .item-card-detail { color: #9ce9ff; }
.item-count { position: absolute; top: 8px; right: 9px; color: #e3f6ff; font-size: 16px; font-variant-numeric: tabular-nums; line-height: 1; }
.item-card:disabled .item-count { color: #6f90a7; }
#app[data-phase='menu'] .item-dock, #app[data-phase='gameover'] .item-dock { visibility: hidden; }

#reward-stage { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
#reward-stage *, #reward-notices { pointer-events: none; }
#reward-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.reward-notice { --reward-rgb: 153 231 255; position: absolute; left: 50%; top: 0; width: min(480px, calc(100% - 38px)); text-align: center; transform-origin: 50% 50%; will-change: transform, opacity; }
.reward-notice[data-kind='rekindle'] { --reward-rgb: 255 215 144; }
.reward-notice[data-kind='gravity'] { --reward-rgb: 194 175 255; }
.reward-notice[data-kind='upgrade'] { --reward-rgb: 159 223 220; }
.reward-notice::before { content: ''; position: absolute; z-index: -1; inset: -5px -12px; background: radial-gradient(ellipse, #061221e8 0, #071727a6 44%, transparent 72%); }
.reward-title { margin: 0; font-size: 44px; line-height: 1.25; font-weight: 600; letter-spacing: .12em; color: rgb(var(--reward-rgb)); text-shadow: 0 0 15px rgb(var(--reward-rgb) / .35), 0 2px 8px #000; overflow-wrap: anywhere; }
.reward-notice[data-particle-title='true'] .reward-title { color: transparent; text-shadow: none; }
.reward-text { margin: 7px auto 0; max-width: 440px; color: #c8dae8; font-size: 12px; line-height: 1.6; letter-spacing: .025em; text-shadow: 0 2px 7px #000; overflow-wrap: anywhere; }
.reward-ornament { margin: 8px auto 0; height: 1px; width: 116px; background: linear-gradient(90deg, transparent, rgb(var(--reward-rgb) / .6), transparent); }
.dev-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 7px; padding-top: 7px; }
.dev-tab { min-height: 34px; }
.dev-scroll { max-height: min(565px, calc(100dvh - 194px)); }
.dev-group-title { color: #aedff2; font-size: 12px; font-weight: 500; margin: 20px 0 4px; padding-bottom: 8px; border-bottom: 1px solid #3b658374; }
.dev-group-title:first-child { margin-top: 4px; }
.dev-section-note { font-size: 11px; line-height: 1.7; color: #8fa9bb; margin: 7px 0 12px; }
.control-text { grid-template-columns: 44px minmax(0, 1fr); }
.control-text input { min-width: 0; width: 100%; padding: 7px; border-radius: 4px; border: 1px solid #29465e; background: #101c2b; color: #d8eaf3; font-size: 11px; }
.observation-heading { display: flex; align-items: center; justify-content: space-between; color: #91b4cb; font-size: 11px; margin: 3px 0 16px; }
.observation-heading strong { color: #d5f0ff; font-weight: 500; }
#progression-ranked-state { color: #9ed3bd; }
#progression-ranked-state[data-debug='true'] { color: #e9bd8d; }
.observation-summary { margin: 0; }
.observation-summary > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #28435b75; font-size: 11px; line-height: 1.5; }
.observation-summary dt { color: #91acbf; }.observation-summary dd { color: #d5ebf7; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.observation-table { width: 100%; border-collapse: collapse; font-size: 11px; line-height: 1.7; table-layout: fixed; }
.observation-table th { text-align: left; padding: 7px 4px; color: #789bb3; font-weight: 400; font-size: 10px; }
.observation-table td { padding: 8px 4px; vertical-align: top; border-top: 1px solid #26415966; color: #c4deee; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.observation-table th:first-child { width: 24%; }.observation-table th:nth-child(2) { width: 28%; }
.observation-table td small { display: block; color: #89a9bd; font-size: 10px; }
.observation-instances { display: grid; gap: 6px; color: #a8bfd0; font-size: 11px; line-height: 1.8; }
.observation-instance { display: flex; justify-content: space-between; border-bottom: 1px solid #26415966; padding: 5px 0; }
@media (max-width: 760px) {
  .item-dock { right: 20px; bottom: 121px; padding: 9px 9px 10px 25px; max-width: calc(100% - 40px); }
  .item-card { width: 166px; min-height: 62px; grid-template-columns: 42px 1fr; gap: 7px; padding: 8px; }
  .item-icon { width: 40px; height: 39px; }.item-card-name { font-size: 10px; padding-right: 17px; }.item-count { font-size: 14px; }
  .item-dock-heading { font-size: 9px; gap: 15px; margin-bottom: 7px; }.item-card-detail { font-size: 9px; }
  .reward-title { font-size: 32px; letter-spacing: .08em; }.reward-text { font-size: 11px; line-height: 1.5; }
}
@media (max-width: 380px) {
  .hud { left: 12px; right: 12px; }.brand { gap: 7px; }.hud-stats { gap: 8px; }
  .item-dock { right: 12px; max-width: calc(100% - 24px); }.game-controls { right: 12px; }
  .dev-scroll { padding-left: 12px; padding-right: 12px; }.control { grid-template-columns: minmax(0, 1fr) 112px; gap: 9px; }
  .control-text { grid-template-columns: 36px minmax(0, 1fr); }
}
@media (max-height: 540px) {
  .item-dock { bottom: 87px; }.game-controls { bottom: 28px; }
  .item-dock-heading { display: none; }.item-card { min-height: 50px; padding-top: 5px; padding-bottom: 5px; }
  .item-dock { padding-top: 8px; padding-bottom: 8px; }.item-icon { height: 34px; }
}