:root {
  --bg: #121a4a;
  --panel: #1c2560;
  --line: #4352a6;
  --text: #f2f6ff;
  --dim: #b4bff0;
  --accent: #4de2ff;
  --warn: #ffd23c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: linear-gradient(160deg, #1a2566 0%, #121a4a 50%, #231a5e 100%) fixed var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Three columns: stats on the left, the field centred, buttons on the right.
   The d-pad and the cut button sit in the bottom corners of the side columns.
   The left column is the wider one: the d-pad needs arms a thumb can tell apart, away from the screen edge. */
#app {
  --side: clamp(126px, 17vw, 176px);
  --side-left: clamp(140px, 20vw, 190px);
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: var(--side-left) minmax(0, 1fr) var(--side);
  grid-template-rows: minmax(0, 1fr);
  padding: var(--safe-area-inset-top, env(safe-area-inset-top)) var(--safe-area-inset-right, env(safe-area-inset-right)) var(--safe-area-inset-bottom, env(safe-area-inset-bottom)) var(--safe-area-inset-left, env(safe-area-inset-left));
  touch-action: none;
}

/* Phones and tablets held sideways (class set in game.js): the playing field takes the full height of the screen and
   the side columns share what is left of the width. An iPad's screen is too close to the field's own shape for
   that: there the columns stay as narrow as the controls allow (11% of the width each) and the field fills the rest. The safe areas are not kept clear as a whole: the camera housing sits
   in the middle of one side, where the columns have nothing, and the stats, buttons and controls keep away from
   the rounded corners instead. */
html.compact #app {
  padding: 0;
  --side-left: max(112px, 11vw, calc((100vw - 100vh * 124 / 84) / 2));
  --side: var(--side-left);
}
html.compact #left { padding: 14px 4px 0 18px; }
html.compact #right { padding: 14px 16px 0 4px; }
html.compact #hud { gap: 5px; }
html.compact .stat { font-size: 14px; }
html.compact .stat .label { font-size: 9px; letter-spacing: .08em; }
/* Both controls stay above the home indicator: iOS holds back touches that start in that strip, so a d-pad
   reaching into it answered late or not at all. */
html.compact #dpad { left: 6px; }
html.compact #btnCut { right: 12px; bottom: calc(env(safe-area-inset-bottom) + 12px); }

/* Tablets (class set in game.js): the playing field fills the screen and everything else floats over it. The stats
   sit in a small see-through panel in the top-left corner, the buttons in the top-right one, the d-pad and FLY in
   the bottom corners. */
html.tablet #app { grid-template-columns: minmax(0, 1fr); --side-left: 170px; --side: 134px; }
html.tablet #left {
  position: fixed; z-index: 4; top: 10px; left: 10px; width: 150px;
  padding: 8px 10px; border-radius: 12px;
  background: rgba(18, 26, 74, .55); pointer-events: none;
}
html.tablet #right { position: fixed; z-index: 4; top: 10px; right: 10px; padding: 0; }
html.tablet #dpad { opacity: .8; }
html.tablet #btnCut { opacity: .85; }

#left, #right { min-width: 0; padding: 10px; display: flex; flex-direction: column; }
#left { padding-right: 2px; }
#right { padding-left: 2px; align-items: flex-end; }

#hud { display: flex; flex-direction: column; gap: 8px; }

.stat { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 16px; font-weight: 700; min-width: 0; }
.stat .label { font-size: 10px; letter-spacing: .12em; color: var(--dim); font-weight: 400; }
#hudLives { color: #ff5d7a; letter-spacing: .05em; }

.hud-buttons { display: flex; gap: 8px; }
.hud-buttons button {
  width: 40px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit; font-size: 17px;
}
.hud-buttons button.off { color: var(--dim); text-decoration: line-through; }

#bar {
  position: relative;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  overflow: hidden;
}
#barFill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #1b7fa8, var(--accent)); box-shadow: 0 0 12px rgba(77, 226, 255, .6); transition: width .25s; }
#barGoal { position: absolute; top: 0; bottom: 0; left: 90%; width: 2px; background: var(--warn); }
#barText { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; letter-spacing: .04em; text-shadow: 0 1px 2px #000; }

/* fuel gauge: green, turns red when only the reserve is left */
#fuel { position: relative; height: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); overflow: hidden; }
#fuelFill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #1f8f5a, #7dffb0); box-shadow: 0 0 10px rgba(125, 255, 176, .5); transition: width .12s linear; }
#fuel.low #fuelFill { background: linear-gradient(90deg, #a8321f, #ff8a6a); box-shadow: 0 0 10px rgba(255, 138, 106, .6); }
#fuelText { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; letter-spacing: .12em; text-shadow: 0 1px 2px #000; }

#stage { position: relative; min-width: 0; min-height: 0; touch-action: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(18, 26, 74, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#overlay.hidden { display: none; }

#panel {
  width: min(340px, 100%);
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #26317c, #1a2260);
  box-shadow: 0 0 0 1px rgba(77, 226, 255, .14), 0 18px 50px rgba(5, 8, 40, .45), 0 0 44px rgba(77, 226, 255, .2);
  text-align: center;
}
#panel h1 {
  margin: 0 0 10px; font-size: 30px; letter-spacing: .16em; color: var(--accent);
  background: linear-gradient(90deg, #4de2ff, #b28cff 55%, #ff5d9e);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
#panel p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: var(--text); white-space: pre-line; }
#panel #ovHint { margin: 14px 0 0; font-size: 11px; color: var(--dim); }
#panel #ovHint:empty { display: none; }
#ovBtn {
  width: 100%;
  padding: 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #7deaff, #27bfe6);
  box-shadow: 0 6px 22px rgba(77, 226, 255, .35);
  color: #03202a;
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .1em;
}
#ovBtn:active { transform: scale(.98); }

/* Direction pad, bottom-left corner. One touch surface; the arms only show which way is pressed. */
#dpad {
  --size: min(164px, calc(var(--side-left) - 12px));
  position: fixed;
  left: calc(var(--safe-area-inset-left, env(safe-area-inset-left)) + 8px);
  bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom)) + 4px);
  z-index: 5;
  width: var(--size); height: var(--size);
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 226, 255, .05), rgba(77, 226, 255, 0) 70%);
  touch-action: none;
}
#dpad i {
  position: relative;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #34409a, #252f78);
  box-shadow: 0 3px 10px rgba(5, 8, 40, .4);
  pointer-events: none;
}
#dpad i::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px;
  border-top: 3px solid #e3e9ff; border-left: 3px solid #e3e9ff;
}
#dpad .up { grid-area: 1 / 2; border-radius: 12px 12px 4px 4px; }
#dpad .left { grid-area: 2 / 1; border-radius: 12px 4px 4px 12px; }
#dpad .right { grid-area: 2 / 3; border-radius: 4px 12px 12px 4px; }
#dpad .down { grid-area: 3 / 2; border-radius: 4px 4px 12px 12px; }
#dpad .up::after { transform: translate(-50%, -30%) rotate(45deg); }
#dpad .left::after { transform: translate(-30%, -50%) rotate(-45deg); }
#dpad .right::after { transform: translate(-70%, -50%) rotate(135deg); }
#dpad .down::after { transform: translate(-50%, -70%) rotate(225deg); }
#dpad[data-dir="up"] .up, #dpad[data-dir="left"] .left, #dpad[data-dir="right"] .right, #dpad[data-dir="down"] .down {
  border-color: var(--accent);
  background: linear-gradient(180deg, #1f6f8f, #124a66);
  box-shadow: 0 0 16px rgba(77, 226, 255, .55);
}
#dpad[data-dir="up"] .up::after, #dpad[data-dir="left"] .left::after, #dpad[data-dir="right"] .right::after, #dpad[data-dir="down"] .down::after {
  border-color: #fff;
}

/* Cut button, bottom-right corner: the ship only leaves the border while this is held. */
#btnCut {
  --size: min(108px, calc(var(--side) - 26px));
  position: fixed;
  right: calc(var(--safe-area-inset-right, env(safe-area-inset-right)) + 13px);
  bottom: calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom)) + 26px);
  z-index: 5;
  width: var(--size); height: var(--size);
  display: grid; place-items: center;
  border: 2px solid #ffb35c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb35c, #e2531f 62%, #8f2a0c);
  box-shadow: 0 5px 0 #5c1a06, 0 10px 22px rgba(0, 0, 0, .55);
  color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .14em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
  touch-action: none;
}
#btnCut.on {
  transform: translateY(4px);
  border-color: #fff3b0;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #ff8a2c 62%, #b8400f);
  box-shadow: 0 1px 0 #5c1a06, 0 0 26px rgba(255, 170, 60, .75);
}

#panel { max-height: 100%; overflow: auto; }
[hidden] { display: none !important; }

#ovBtn2 {
  width: 100%; margin-top: 8px; padding: 10px;
  border: 1px solid var(--accent); border-radius: 12px;
  background: transparent; color: var(--accent);
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em;
}
#menuRow { display: flex; gap: 8px; margin-top: 10px; }
#menuRow button, #playerBtn {
  flex: 1; padding: 9px 4px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #2a3684; color: var(--text);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em;
}
/* Android keeps progress: the level to start from, picked on the menu. */
#levelRow { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 8px; }
#levelRow[hidden] { display: none; }
#levelRow button { width: 44px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 20px; line-height: 1; }
#levelRow button:disabled { opacity: .35; }
#lvlText { min-width: 120px; font-size: 13px; letter-spacing: .12em; color: var(--accent); }
#playerBtn { width: 100%; margin-top: 8px; color: var(--dim); }
#playerBtn.in { border-color: transparent; background: transparent; color: var(--accent); }
#panel #ovHint { min-height: 0; }

#store, #scores {
  position: absolute; inset: 0; z-index: 10;
  display: grid; place-items: center;
  padding: 8px;
  background: rgba(18, 26, 74, .7);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#store.hidden, #scores.hidden { display: none; }
#storePanel, #scoresPanel {
  width: min(520px, 100%); max-height: 100%;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, #26317c, #1a2260);
  box-shadow: 0 18px 50px rgba(5, 8, 40, .45), 0 0 44px rgba(77, 226, 255, .2);
}
#storePanel header, #scoresPanel header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 8px 18px; }
#storePanel h2, #scoresPanel h2 { margin: 0; font-size: 18px; letter-spacing: .14em; color: var(--accent); }
#storeClose, #scoresClose { width: 36px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: inherit; font-size: 15px; }
#storeList { flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#storeList h3 { margin: 10px 6px 4px; font-size: 10px; font-weight: 400; letter-spacing: .14em; color: var(--dim); }
#storeList .item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-bottom: 5px; border: 1px solid var(--line); border-radius: 12px; background: rgba(40, 52, 128, .7); }
#storeList .icon { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #34409a; color: var(--warn); font-style: normal; font-size: 18px; }
#storeList .icon.ship { clip-path: polygon(100% 50%, 8% 8%, 28% 50%, 8% 92%); border-radius: 0; }
#storeList .info { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; line-height: 1.3; }
#storeList .info b { font-size: 13px; }
#storeList .info span { font-size: 10px; color: var(--dim); }
#storeList .item button {
  flex: none; min-width: 84px; padding: 8px 10px;
  border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #7deaff, #27bfe6); color: #03202a;
  font: inherit; font-size: 12px; font-weight: 700;
}
#storeList .item button:disabled { background: #34409a; color: var(--dim); }
#storeList .item button.step { min-width: 38px; padding: 8px 0; background: #34409a; color: var(--text); font-size: 16px; }
#storeList .item button.step:disabled { opacity: .4; }
#storeList .item button.cash { min-width: 70px; background: linear-gradient(180deg, #ffe08a, #ffb428); }
#storeList canvas.icon { background: #1b2366; }
#storePanel footer { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; }
#storeRestore { flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--dim); font: inherit; font-size: 10px; }
#storeNote { flex: 1; font-size: 10px; color: var(--warn); text-align: right; }
/* Leaderboard of the web version. */
#scoresPanel { width: min(420px, 100%); }
#scoresList { flex: 1; min-height: 60px; overflow-y: auto; margin: 0; padding: 0 12px; list-style: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#scoresList li { display: flex; align-items: baseline; gap: 8px; padding: 5px 8px; border-bottom: 1px solid rgba(120, 140, 255, .14); font-size: 13px; }
#scoresList li.me { border-radius: 8px; border-bottom-color: transparent; background: rgba(77, 226, 255, .16); color: #fff; }
#scoresList li.note { justify-content: center; border: 0; padding: 18px 8px; color: var(--dim); font-size: 12px; }
#scoresList .rank { flex: none; width: 26px; color: var(--dim); text-align: right; }
#scoresList .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#scoresList .lvl { flex: none; font-size: 10px; color: var(--dim); }
#scoresList .pts { flex: none; min-width: 64px; text-align: right; font-weight: 700; color: var(--accent); }
#scoresPanel footer { display: flex; gap: 8px; padding: 10px 12px 4px; }
#scoresName { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #1b2366; color: var(--text); font: inherit; font-size: 14px; -webkit-user-select: text; user-select: text; }
#scoresSave { flex: none; padding: 8px 14px; border: 0; border-radius: 10px; background: linear-gradient(180deg, #7deaff, #27bfe6); color: #03202a; font: inherit; font-size: 12px; font-weight: 700; }
#scoresNote { min-height: 14px; margin: 0; padding: 2px 14px 10px; font-size: 10px; color: var(--warn); text-align: left; }
#ovPrivacy { display: inline-block; margin-top: 10px; padding: 4px 8px; font-size: 11px; color: var(--dim); }
#ovPrivacy[hidden] { display: none; }

/* Short screens (phones held sideways): tighter panel. */
@media (max-height: 460px) {
  #panel { width: min(480px, 100%); padding: 14px 20px; }
  #panel h1 { margin-bottom: 6px; font-size: 24px; }
  #panel p { margin-bottom: 10px; font-size: 12px; line-height: 1.45; }
  #panel #ovHint { margin-top: 8px; }
  #ovBtn { padding: 11px; }
}

/* Portrait is only a fallback for browsers; the apps are locked to landscape. */
@media (orientation: portrait) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #left { padding: 8px 110px 6px 12px; }
  #hud { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .stat { flex-direction: column; align-items: flex-start; gap: 0; }
  #bar, #fuel { flex-basis: 100%; }
  #right { position: fixed; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top)) + 8px); right: calc(var(--safe-area-inset-right, env(safe-area-inset-right)) + 12px); padding: 0; }
}

/* Phones held upright in a browser: the game is landscape only, so ask for a turn. (The apps are locked to landscape.) */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) and (max-width: 600px) {
  #rotate {
    position: fixed; inset: 0; z-index: 50;
    display: grid; place-items: center; padding: 32px;
    background: linear-gradient(160deg, #1a2566, #121a4a 50%, #231a5e);
    color: var(--text); font-size: 18px; font-weight: 700; text-align: center; line-height: 1.5;
  }
  #rotate span::before { content: "⟳"; display: block; margin-bottom: 14px; font-size: 64px; color: var(--accent); }
}