/* Layout owns spacing; no translated controls sharing the Play button's row. */
:root {
  --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', system-ui, sans-serif;
  --ui-muted: #c1b7dd;
}
.ui-icon { width:24px; height:24px; flex:none; display:block; }
#screen-title.visible {
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:10px; padding: max(24px, calc(var(--safe-area-top) + 16px)) max(20px, var(--safe-area-right)) max(20px, calc(var(--safe-area-bottom) + 16px)) max(20px, var(--safe-area-left));
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y;
  font-family:var(--ui-font); background:rgba(8,4,24,.4);
}
#screen-title.visible > * { flex:none; max-width:380px; align-self:center; justify-self:auto; grid-area:auto; transform:none; }
#screen-title > .stellar-edition { display:block; margin:0; font-size:10px; line-height:1.3; letter-spacing:4px; }
#screen-title > .logo { margin:4px 0 8px; animation:none; }
#screen-title .logo-top, #screen-title .logo-bottom { font-size:clamp(46px,8vh,66px); line-height:1; letter-spacing:5px; }
#screen-title .logo-sub { margin:14px 0 0; font:500 13px/1.5 var(--ui-font); letter-spacing:.6px; color:var(--ui-muted); }
#screen-title > #dex-canvas { width:100%; height:70px; margin:0; }
#screen-title > .dex-label { display:block; margin:-2px 0 0; font:500 12px/1.5 var(--ui-font); letter-spacing:.4px; color:var(--ui-muted); opacity:1; }
#screen-title > .discovery-button { width:100%; min-height:58px; margin:2px 0 4px; padding:6px 14px 6px 10px; gap:12px; }
#screen-title .discovery-button canvas { width:42px; height:42px; }
#screen-title .discovery-button small { font:500 12px/1.4 var(--ui-font); letter-spacing:.2px; color:var(--ui-muted); }
#screen-title .discovery-button strong { font:700 18px/1.4 var(--ui-font); }
#screen-title .discovery-arrow { font-size:26px; }
#screen-title > .play-modes { width:100%; margin:0 0 8px; min-height:56px; }
#screen-title #btn-play { min-height:56px; padding:12px 18px; font:750 19px/1.4 var(--ui-font); letter-spacing:.5px; border-radius:20px; }
#screen-title #btn-play:hover { transform:none; }
#screen-title .title-secondary-actions { width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
#screen-title .title-secondary-actions button, .help-button {
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:48px;
  min-width:0; margin:0; padding:10px; border-radius:14px; border:1px solid #b9a5ff55;
  background:#19122feb; color:var(--stellar-ink); font:600 13px/1.45 var(--ui-font);
  letter-spacing:0; cursor:pointer; transform:none;
}
#screen-title #btn-leaderboard-title { color:#ffdfa1; border-color:#ffdfa14d; }
#screen-title .title-secondary-actions .ui-icon { width:21px; height:21px; }
#screen-title .control-label { min-width:0; overflow-wrap:anywhere; }
#screen-title .title-records { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 12px; width:100%; }
#screen-title .title-best { margin:0; padding:0; transform:none; font:600 12px/1.5 var(--ui-font); letter-spacing:0; opacity:1; color:var(--ui-muted); }
#screen-title #title-best-val { margin-left:4px; font-size:16px; font-variant-numeric:tabular-nums; color:var(--stellar-ink); }
#screen-title #leaderboard-status-title { display:block; min-height:0; margin:0; font:400 11px/1.5 var(--ui-font); color:var(--ui-muted); }
#screen-title > .settings {
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; gap:5px;
  margin:6px 0 0; padding:8px; border-radius:20px; background:#110c25eb; border:1px solid #b9a5ff36;
}
#screen-title > .settings .toggle {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:100%; min-width:0; height:auto; min-height:60px; padding:8px 2px; gap:6px; border-radius:13px;
  overflow:visible; font:500 11px/1.3 var(--ui-font); color:var(--ui-muted); opacity:1;
  border:1px solid transparent; background:transparent; letter-spacing:0;
}
#screen-title > .settings .toggle::before { content:none; display:none; }
#screen-title > .settings .toggle.on { background:#79f4d50b; border-color:#79f4d540; color:#a2f6e2; }
#screen-title > .settings .toggle.on:not(#btn-shop)::after { content:''; position:absolute; width:4px; height:4px; border-radius:50%; top:5px; right:5px; background:var(--stellar-mint); }
#screen-title > .settings #btn-install:not(.hidden) { grid-column:1/-1; flex-direction:row; min-height:44px; font-size:13px; }
#screen-title > .language-picker { display:flex; justify-content:center; align-items:center; gap:10px; margin:2px 0 0; min-height:44px; font:500 12px/1.4 var(--ui-font); color:var(--ui-muted); }
#screen-title > .language-picker::before { content:none; }
#screen-title > .language-picker select { min-height:44px; max-width:none; min-width:120px; padding:8px 30px 8px 12px; font:500 13px/1.4 var(--ui-font); }
#screen-title > .credit { display:block; margin:0; text-align:center; font:400 11px/1.5 var(--ui-font); letter-spacing:0; color:var(--ui-muted); opacity:1; }
/* Controls float above the full-width arena; they never reduce its scale. */
#hud { display:block; visibility:hidden; }
#hud.visible { visibility:visible; }
#hud .hud-rail {
  top:calc(var(--play-region-top) + var(--safe-area-top) + 8px);
  right:auto; width:calc(var(--play-region-width) - var(--safe-area-left) - var(--safe-area-right) - 24px);
  max-width:520px; margin:0; transform:translateX(-50%); left:var(--play-region-center-x);
  grid-template-columns:minmax(65px,1fr) minmax(0,1.4fr) minmax(44px,1fr);
  pointer-events:auto; gap:0 8px; min-height:0; padding:6px 10px 10px; align-items:center;
  border:1px solid #b9a5ff45; border-radius:17px; background:#130c29ed;
  box-shadow:inset 0 1px 0 #ffffff0d; box-sizing:border-box;
}
#hud .score { font:800 clamp(26px,7vw,36px)/1.2 var(--ui-font); letter-spacing:1px; }
#hud .hud-center { position:relative; opacity:1; }
#hud .orbit-space { font:700 14px/1.2 var(--ui-font); letter-spacing:0; }
#hud .orbit-hud {
  position:static; display:grid; grid-column:1/-1;
  grid-template-columns:minmax(0,1fr) auto auto; gap:3px 8px;
  transform:none; width:auto; padding:4px 0 0; margin-top:4px;
  border:0; border-top:1px solid #b9a5ff26; border-radius:0; background:none;
  font:600 12px/1.3 var(--ui-font); opacity:1;
}
#hud .orbit-objective { grid-column:1; grid-row:1; }
#hud .orbit-progress { grid-column:2; grid-row:1; color:#d8d1ed; }
#hud .orbit-expansion { position:static; grid-column:1/-1; grid-row:2; height:4px; border-radius:8px; background:#ad8cff22; }
#hud .orbit-timer { grid-column:3; grid-row:1; min-width:3.6em; height:22px; padding:3px 6px; border-radius:7px; background:#79f4d51c; color:#8bffe1; text-align:center; font:800 13px/1.2 var(--ui-font); font-variant-numeric:tabular-nums; }
/* Keep the cockpit height stable when all timed targets have finished. */
#hud .orbit-timer[hidden] { display:block; visibility:hidden; }
#hud .orbit-timer.urgent { color:#fff1e8; background:#ac284e; box-shadow:0 0 0 1px #ff8aa9; }
.survival-result { display:block; color:#ff92ac; }
.rush-contract { border-top:1px solid #b9a5ff26; padding-top:9px; }
#hud .chain-meter { display:block; position:absolute; top:100%; left:50%; width:max-content; margin:0; transform:translateX(-50%); font-size:9px; height:auto; }
#hud .chain-fuse { display:none; }
#drawer-handle, #drawer-handle.visible, #btn-nova-help { display:none!important; }
#strategy-controls {
  top:calc(var(--play-region-top) + var(--safe-area-top) + 110px); bottom:auto;
  left:var(--play-region-center-x); right:auto; transform:translateX(-50%);
  width:min(280px,calc(var(--play-region-width) - var(--safe-area-left) - var(--safe-area-right) - 24px));
  box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:10px; padding:10px; border:1px solid #b9a5ff38; border-radius:27px;
  background:#110c29f5; pointer-events:auto;
}
#strategy-controls button {
  min-width:0; width:100%; height:62px; min-height:62px; margin:0;
  padding:8px 10px; border-radius:21px; gap:3px; box-sizing:border-box;
  font-family:var(--ui-font); letter-spacing:0; cursor:pointer;
}
#strategy-controls #btn-nova { display:flex; flex-direction:column; border-color:#79f4d570; background:#153c3e; color:#d7fff2; }
#strategy-controls #btn-nova:disabled { color:#b4d4cf; opacity:1; cursor:default; }
#strategy-controls #btn-nova.ready { color:#082c33; background:linear-gradient(145deg,#b5ffe5,#57e6c6); border-color:#dafff1; box-shadow:0 0 18px #79f4d530,inset 0 2px 2px #fff8; }
#nova-label { font-size:clamp(14px,4vw,19px); font-weight:800; white-space:nowrap; }
#nova-status { font-size:10px; line-height:1.3; overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; }
#nova-fill { height:4px; opacity:.85; }
#strategy-controls #item-shake { display:flex; align-items:center; justify-content:center; color:#322443; background:linear-gradient(145deg,#fff5ac,#efd254); border-color:#fff4b0; box-shadow:inset 0 2px 2px #fff9; }
#item-shake .di-ic { width:36px; height:36px; margin:0; }
#item-shake .di-ic svg { display:block; width:100%; height:100%; }
#strategy-tip { display:none; }
#strategy-controls #item-shake.poor { background:#4a4356; color:#d0c6dd; border-color:#a899bb70; box-shadow:none; }
#danger-warning { left:calc(var(--arena-left, 12px) + 8px); transform:translateY(-5px); z-index:9; padding:3px 9px; box-shadow:none; border:0; background:#320e29db; }
#danger-warning.visible { transform:none; }
#danger-warning .danger-label, #danger-time { font:800 12px/1.3 var(--ui-font); letter-spacing:0; color:#ffc0c9; }
#screen-pause .best { font:600 13px/1.4 var(--ui-font); }
@media(max-height:520px) { #hud .hud-rail { padding-top:3px; } #strategy-controls { padding:6px; } #strategy-controls button { height:48px; min-height:48px; } }

#screen-pause .help-button { width:100%; }
/* Native modal: bounded scroll region, persistent close action, no gameplay input. */
.help-dialog {
  width:min(520px,calc(100vw - 24px - var(--safe-area-left) - var(--safe-area-right)));
  max-height:calc(100dvh - 32px - var(--safe-area-top) - var(--safe-area-bottom));
  margin:auto; padding:0; border:1px solid #ad8cff66; border-radius:24px;
  background:#17112c; color:var(--stellar-ink); font:400 14px/1.65 var(--ui-font);
  box-shadow:0 24px 100px #000b; overflow:hidden;
}
.help-dialog[open] { display:flex; flex-direction:column; }
.help-dialog::backdrop { background:#05020dd9; }
.help-header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:12px 16px; border-bottom:1px solid #b9a5ff29; }
.help-header h2 { font:750 18px/1.4 var(--ui-font); margin:0; color:var(--stellar-mint); }
.help-close { display:grid; place-items:center; width:44px; height:44px; flex:none; padding:0; border:1px solid #b9a5ff45; border-radius:12px; background:#b9a5ff0c; color:var(--stellar-ink); cursor:pointer; }
.help-intro { margin:8px 16px; text-align:center; color:var(--ui-muted); font-size:12px; }
.help-body { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior:contain; touch-action:pan-x; padding:0; min-height:0; scrollbar-width:none; }
.help-body::-webkit-scrollbar { display:none; }
.help-card { flex:0 0 100%; min-width:0; box-sizing:border-box; scroll-snap-align:start; text-align:center; padding:0 16px 8px; user-select:none; }
.help-shot { display:block; width:100%; height:min(34dvh,300px); object-fit:contain; border-radius:16px; background:#0b0722; border:1px solid #b9a5ff45; box-sizing:border-box; }
.help-step-number { display:block; color:#79f4d5; font:700 12px/1.2 var(--ui-font); margin:10px 0 4px; }
.help-card h3 { margin:0; font:800 26px/1.3 var(--ui-font); }
.help-card p { margin:6px 0 0; color:#e3d9f6; font:500 14px/1.4 var(--ui-font); }
.help-navigation { display:flex; align-items:center; justify-content:center; gap:24px; padding:4px 16px 8px; }
.help-arrow { width:44px; height:44px; border-radius:14px; border:1px solid #b9a5ff66; background:#26203f; color:#fff; font:700 28px/1 var(--ui-font); cursor:pointer; }
.help-arrow:disabled { opacity:.3; cursor:default; }
.help-counter { min-width:44px; text-align:center; color:#c1b7dd; font:600 13px/1 var(--ui-font); }
.help-footer { flex:none; padding:12px 16px 16px; border-top:1px solid #b9a5ff29; background:#130e25; }
.help-pause-note { margin:0 0 10px; color:var(--ui-muted); font-size:12px; }
.help-done { width:100%; min-height:48px; padding:10px 14px; border:1px solid #79f4d56b; border-radius:14px; background:#22504b; color:#e6fff7; font:700 15px/1.5 var(--ui-font); cursor:pointer; }
@media(min-height:800px) { #screen-title.visible { gap:12px; padding-top:max(36px,calc(var(--safe-area-top) + 22px)); } #screen-title > .settings { margin-top:12px; } }
@media(max-height:680px) {
  #screen-title.visible { gap:7px; padding-top:max(12px,calc(var(--safe-area-top) + 8px)); }
  #screen-title .logo-top, #screen-title .logo-bottom { font-size:44px; }
  #screen-title > .logo { margin:0 0 3px; }
  #screen-title .logo-sub { margin-top:8px; font-size:12px; }
  #screen-title > #dex-canvas { height:54px; }
  #screen-title > .discovery-button { min-height:50px; margin:0; }
  #screen-title > .play-modes, #screen-title #btn-play { min-height:52px; }
  #screen-title > .settings { margin-top:2px; }
  .help-card { padding:0 12px 6px; }
}
@media(prefers-reduced-motion:reduce) { .help-dialog *, #screen-title * { animation:none!important; transition:none!important; } }

/* Final title footer alignment: neutralize legacy Stellar grid/flex self-alignment. */
#screen-title.visible > .stellar-edition,
#screen-title.visible > .logo,
#screen-title.visible > #dex-canvas,
#screen-title.visible > .dex-label,
#screen-title.visible > .discovery-button,
#screen-title.visible > .play-modes,
#screen-title.visible > .title-secondary-actions,
#screen-title.visible > .title-records,
#screen-title.visible > .settings,
#screen-title.visible > .language-picker,
#screen-title.visible > .credit {
  position:static;
  inset:auto;
  float:none;
  align-self:center;
  justify-self:auto;
  grid-column:auto;
  grid-row:auto;
  transform:none;
  box-sizing:border-box;
}
#screen-title.visible > .settings {
  align-items:stretch;
  overflow:visible;
}
#screen-title.visible > .settings .toggle {
  display:grid;
  grid-template-rows:28px minmax(2.6em,auto);
  place-items:center;
  align-content:center;
  min-height:78px;
  padding:8px 2px 7px;
  row-gap:5px;
  box-sizing:border-box;
}
#screen-title.visible > .settings .toggle .ui-icon {
  width:25px;
  height:25px;
  align-self:center;
}
#screen-title.visible > .settings .toggle .control-label {
  display:flex;
  width:100%;
  min-width:0;
  min-height:2.6em;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  line-height:1.3;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:normal;
}
#screen-title.visible > .language-picker {
  width:100%;
  max-width:380px;
  min-height:46px;
  margin:2px 0 0;
  padding:0 8px;
  display:grid;
  grid-template-columns:auto minmax(136px,180px);
  justify-content:center;
  align-items:center;
  column-gap:12px;
  z-index:auto;
  background:transparent;
}
#screen-title.visible > .language-picker > span {
  display:block;
  margin:0;
  padding:0;
  white-space:nowrap;
  font:500 12px/1.4 var(--ui-font);
}
#screen-title.visible > .language-picker select {
  position:static;
  width:100%;
  min-width:0;
  max-width:180px;
  height:44px;
  min-height:44px;
  margin:0;
  box-sizing:border-box;
}
@media(max-width:359px) {
  #screen-title.visible > .settings { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #screen-title.visible > .settings .toggle { min-height:72px; }
  #screen-title.visible > .language-picker { grid-template-columns:1fr; justify-items:center; row-gap:6px; }
  #screen-title.visible > .language-picker select { width:min(180px,100%); }
}

/* Keep the timer and earned bonus on one compact line above the danger zone. */
#hud .orbit-timer { position:relative; height:22px; box-sizing:border-box; display:flex; gap:4px; align-items:center; justify-content:center; }
.orbit-time-bonus { color:#91ffe2; font:800 10px/1.2 var(--ui-font); white-space:nowrap; text-shadow:0 1px 3px #080418; }
.orbit-time-bonus[hidden] { display:none; }

/* Keep the result sheet inside the native safe viewport, including large text. */
#screen-over {
  box-sizing:border-box; justify-content:center; overflow:hidden;
  padding:calc(var(--safe-area-top) + 12px) calc(var(--safe-area-right) + 16px) calc(var(--safe-area-bottom) + 12px) calc(var(--safe-area-left) + 16px);
}
#screen-over .panel {
  box-sizing:border-box; flex:0 1 auto; width:100%; max-width:380px; min-height:0;
  max-height:100%; margin:0; padding:16px; gap:8px;
  overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y;
  font-family:var(--ui-font); scrollbar-width:thin;
}
#screen-over .panel > * { flex-shrink:0; max-width:100%; }
#screen-over .panel h2 { margin:0; font:800 17px/1.25 var(--ui-font); letter-spacing:1px; }
#screen-over .newbest { padding:5px 12px; font:800 12px/1.3 var(--ui-font); animation:none; }
#screen-over .over-score { font:900 52px/1.05 var(--ui-font); }
#screen-over .over-best { font:600 12px/1.3 var(--ui-font); letter-spacing:0; }
#screen-over .over-stats { font:500 11px/1.4 var(--ui-font); letter-spacing:0; text-align:center; }
#screen-over .orbit-result { gap:3px 8px; font:600 11px/1.4 var(--ui-font); }
#screen-over .survival-result { flex-basis:100%; }
#screen-over .run-advice { margin:0; color:#e2dcf2; font:500 13px/1.5 var(--ui-font); text-align:center; word-break:keep-all; overflow-wrap:anywhere; }
#screen-over .run-advice[hidden], #screen-over .survival-result[hidden] { display:none; }
#screen-over .celestial-fact { margin:2px 0; padding:10px 12px; gap:3px; border-radius:14px; word-break:keep-all; overflow-wrap:anywhere; }
#screen-over .celestial-fact small::after { content:' ↗'; }
#screen-over .celestial-fact span { font-size:12px; line-height:1.45; }
#screen-over .celestial-fact strong { font-size:14px; }
#screen-over .panel > button:not(.celestial-fact), #screen-over .row > button {
  box-sizing:border-box; min-height:44px; padding:10px 12px; margin:0;
  font:700 13px/1.3 var(--ui-font); letter-spacing:0; border-radius:16px;
}
#screen-over .leaderboard-status { min-height:0; margin:0; font:500 11px/1.35 var(--ui-font); }
#screen-over .row { gap:8px; }
@media(max-height:700px) {
  #screen-over .panel { gap:6px; padding:12px; }
  #screen-over .over-score { font-size:40px; }
}

#screen-title > .play-modes { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
#screen-title .play-modes .mode-btn {
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  min-height:82px; min-width:0; margin:0; padding:10px 8px; border-radius:18px;
  font:750 17px/1.3 var(--ui-font); letter-spacing:0;
}
#screen-title .mode-btn small { font:500 11px/1.4 var(--ui-font); white-space:normal; }
#screen-title #btn-competitive { border-color:#ffcf6a80; color:#fff1c7; }
#title-casual-best { display:block; margin-top:3px; }
#hud .orbit-space { font-size:11px; line-height:1.4; white-space:pre-line; }
.rush-contract[hidden], #screen-over .hidden { display:none; }

/* Interactive islands also block smart zoom when they own a scroll container. */
button, select, [role="button"] { touch-action:manipulation; }
#screen-shop { padding:calc(var(--safe-area-top) + 12px) 16px calc(var(--safe-area-bottom) + 12px); }
#screen-shop .shop-panel { min-height:0; max-height:100%; width:100%; max-width:400px; padding:14px; gap:8px; overflow-y:auto; touch-action:pan-y; font-family:var(--ui-font); }
#screen-shop .shop-panel > * { flex-shrink:0; }
#shop-planet { width:100%; min-height:44px; padding:8px 12px; border:1px solid #b9a5ff66; border-radius:12px; background:#211735; color:#fff; font:600 16px/1.4 var(--ui-font); }
.shop-planet-label { font:600 12px/1.4 var(--ui-font); color:#c1b7dd; }
#shop-planet-preview { width:160px; height:100px; align-self:center; }
#screen-shop #shop-list { overflow:visible; flex-shrink:0; }
#screen-shop .shop-row { min-height:60px; padding:6px 10px; }
#screen-shop .shop-name, #screen-shop .shop-tag { font:600 14px/1.4 var(--ui-font); }
#screen-shop .shop-preview { width:64px; height:50px; }
#screen-shop .shop-tab { min-height:44px; font:600 14px/1.4 var(--ui-font); }
#screen-shop .shop-note { font:500 12px/1.5 var(--ui-font); }
.help-shake-visual { display:grid; place-items:center; aspect-ratio:5/4; background:radial-gradient(circle,#354b57,#140c2b 75%); color:#ffe399; }
.help-shake-visual .ui-icon { width:120px; height:120px; }

/* Recharge rises inside the existing touch target; the icon stays legible. */
#strategy-controls #item-shake { position:relative; overflow:hidden; isolation:isolate; background:#aaa2ba; }
#item-shake::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(145deg,#fff5ac,#efd254); transform:scaleY(var(--shake-fill,1)); transform-origin:bottom; transition:transform .1s linear; }
#strategy-controls #item-shake.cooling-down { color:#322443; border-color:#c6af66; box-shadow:none; cursor:default; }
#strategy-controls #item-shake:disabled { opacity:1; }
@media(prefers-reduced-motion:reduce) { #item-shake::before { transition:none; } }