/* Space Run: a full-screen canvas with the title and pause screens over it. */
:root {
  --ink: #eaf4ff;
  --muted: rgba(190, 215, 245, 0.7);
  --accent: #5fd4ff;
  --accent-deep: #2c7fd6;
  --safe-top: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #04030c;
  color: var(--ink);
  font-family: "Avenir Next", system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  display: block;
}

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(4, 3, 12, 0.35), rgba(4, 3, 12, 0.75));
}
.screen[hidden] { display: none; }
h1 {
  margin: 0;
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff, #8fdcff 55%, #7a5cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(95, 212, 255, 0.35));
}
h2 { margin: 0 0 6px; font-size: 1.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.tagline { margin: 0 0 18px; color: var(--muted); letter-spacing: 0.04em; }
.hint { margin: 14px 0 0; font-size: 0.85rem; color: var(--muted); }
.hint + .hint { margin-top: 0; }
.stats { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; color: var(--muted); }
.stats b { color: var(--ink); font-size: 1.4rem; }
.key-hint { display: none; }
@media (hover: hover) and (pointer: fine) {
  .touch-hint { display: none; }
  .key-hint { display: inline; }
}

button { font: inherit; cursor: pointer; }
.primary, .secondary {
  min-width: 180px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.primary {
  border: 0;
  color: #04121f;
  background: linear-gradient(180deg, #9be8ff, var(--accent) 45%, var(--accent-deep));
  box-shadow: 0 0 24px rgba(95, 212, 255, 0.45);
}
.secondary {
  border: 1px solid rgba(160, 215, 255, 0.5);
  color: var(--ink);
  background: rgba(10, 20, 40, 0.5);
}
.primary:active, .secondary:active { transform: scale(0.97); }

.pause-button {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(160, 215, 255, 0.35);
  border-radius: 50%;
  background: rgba(10, 20, 40, 0.45);
}
.pause-button[hidden] { display: none; }
.pause-button span { width: 4px; height: 16px; border-radius: 2px; background: var(--ink); }

/* The stage holds everything; game.js sizes it and may turn it a quarter turn. Inside a turned
   stage, the fixed-position screens and canvas fill the stage rather than the window. */
#stage { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; transform-origin: 0 0; overflow: hidden; }

/* Settings: seven rows of choices, in two columns where there's room, each with a note about
   the one picked; compact enough for a phone held sideways. */
.settings-screen { gap: 6px; padding: 12px 18px; overflow-y: auto; justify-content: safe center; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(860px, 100%); }
.settings-screen h2 { margin: 0; font-size: 1.3rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 24px; width: min(860px, 100%); }
.setting { text-align: left; }
.setting h3 { margin: 0 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.choices { display: flex; flex-wrap: wrap; gap: 6px; }
.choice { padding: 5px 11px; border: 1px solid rgba(160, 215, 255, 0.3); border-radius: 999px; background: rgba(10, 20, 40, 0.55); color: var(--ink); font-size: 0.85rem; font-weight: 600; }
.choice.is-on { border-color: var(--accent); background: rgba(40, 120, 190, 0.4); box-shadow: 0 0 12px rgba(95, 212, 255, 0.25); }
.setting-note { min-height: 1.2em; margin: 2px 0 0; font-size: 0.7rem; color: var(--muted); }
.settings-screen .primary { min-width: 0; padding: 8px 22px; font-size: 0.9rem; }
.settings-screen .hint { margin: 0; }

/* Levels and the builder: full-screen pages that scroll, laid out for typing and tapping. */
.screen.page { justify-content: flex-start; align-items: stretch; gap: 12px; padding: max(14px, env(safe-area-inset-top)) 16px 24px; overflow-y: auto; text-align: left; background: rgba(4, 3, 12, 0.92); }
.page-head { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 980px; margin: 0 auto; }
.page-head h2 { flex: 1; margin: 0; font-size: 1.2rem; }
.page-head input { flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid rgba(160, 215, 255, 0.35); border-radius: 10px; background: rgba(10, 20, 40, 0.7); color: var(--ink); font: 700 1rem inherit; font-family: inherit; }
.primary.small, .secondary.small { min-width: 0; padding: 8px 16px; font-size: 0.85rem; letter-spacing: 0.04em; }
.page h3 { margin: 4px 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.levels-list, .import { width: 100%; max-width: 980px; margin: 0 auto; }
.levels-list ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; }
.level-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px solid rgba(160, 215, 255, 0.2); border-radius: 12px; background: rgba(10, 20, 40, 0.55); }
.level-info { display: flex; flex: 1 1 200px; flex-direction: column; }
.level-info span { color: var(--muted); font-size: 0.78rem; }
.level-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.row-note { flex-basis: 100%; margin: 0; }
.row-note:empty { display: none; }
.trial-note { flex-basis: 100%; min-width: 0; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(160, 215, 255, 0.25); background: rgba(5, 12, 26, 0.7); color: inherit; font: inherit; font-size: 14px; }
.level-row.is-starred { border-color: rgba(255, 210, 90, 0.6); }
.level-row.is-starred .level-info b { color: #ffd65a; }
.level-row.is-deleted { opacity: 0.55; padding-block: 6px; }
.choice.danger { color: #ff8a8a; border-color: rgba(255, 120, 120, 0.4); }
.code-box { flex-basis: 100%; }
.code-box textarea, .import textarea { width: 100%; padding: 8px 10px; border: 1px solid rgba(160, 215, 255, 0.35); border-radius: 10px; background: rgba(4, 8, 20, 0.8); color: #bfe8ff; font: 0.75rem/1.4 ui-monospace, Menlo, monospace; word-break: break-all; resize: vertical; }
.import { display: grid; gap: 6px; }
.import .choice { justify-self: start; }
.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; width: 100%; max-width: 980px; margin: 0 auto; }
.box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(160, 215, 255, 0.2); border-radius: 14px; background: rgba(10, 20, 40, 0.55); }
.box > .choice { align-self: flex-start; }
.choices[hidden] { display: none; }
.distance { display: flex; align-items: center; gap: 8px; }
.distance input { width: 6em; padding: 6px 8px; border: 1px solid rgba(160, 215, 255, 0.35); border-radius: 8px; background: rgba(4, 8, 20, 0.8); color: var(--ink); font: 700 1rem inherit; font-family: inherit; }
.place-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The pilot's view: x and y from -1 to 1 across and up the box. */
.viewbox { position: relative; aspect-ratio: 16 / 8; border: 1px solid rgba(160, 215, 255, 0.35); border-radius: 10px; background: radial-gradient(ellipse at center, rgba(60, 40, 120, 0.5), rgba(4, 3, 12, 0.9)); overflow: hidden; touch-action: none; cursor: crosshair; }
.ship-mark { position: absolute; left: 50%; top: 50%; width: 22px; height: 12px; transform: translate(-50%, -50%); background: rgba(200, 225, 255, 0.35); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mark { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.mark.faint { opacity: 0.3; }
.mark.dot { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffd56b; color: #1a1205; font-size: 0.75rem; font-weight: 800; }
.mark-alien.dot { background: #7dffb0; }
.mark-armored.dot { background: #ff6a4f; color: #fff3c4; }
.mark-gunship.dot { background: #ff7a6b; }
.mark-swarm.dot { background: #9dff7a; }
.mark-meteor.dot { background: radial-gradient(circle at 40% 40%, #ffe7a0, #ff7a2a 60%, #8a2a10); color: #2a0a00; }
.mark-battleship.dot { width: 32px; height: 32px; background: #d8344a; color: #fff; }
.glass-sheet { inset: 0; transform: none; opacity: 0.6; background: linear-gradient(135deg, #8d98aa, #5f6c82 40%, #9aa8bd 60%, #4e5b72); }
.glass-hole { inset: 0; transform: none; background: radial-gradient(ellipse at center, #241a48, #0a0718); box-shadow: inset 0 0 0 2px #bff4ff; }
.mark.faint.glass-sheet, .mark.faint.glass-hole { opacity: 0.18; }
.mark-moon.dot { width: 30px; height: 30px; background: #c9a76b; }
.mark-wormhole.dot { width: 30px; height: 30px; background: conic-gradient(#ff5ac8, #ffd36b, #8cff9e, #6bdcff, #b57bff, #ff5ac8); }
.mark-satellite.dot, .mark-probe.dot { background: #8fc3ff; }
.mark-tunnel.dot, .mark-tube.dot, .mark-gates.dot, .mark-station.dot, .mark-cave.dot, .mark-hexcave.dot, .mark-maze.dot, .mark-maze2.dot, .mark-maze3.dot { width: 34px; height: 34px; background: #ff9de6; }
.mark.bar-v { top: 50%; height: 100%; background: rgba(255, 90, 110, 0.75); }
.mark.bar-h { left: 50%; width: 100%; background: rgba(255, 90, 110, 0.75); }
.mark.planet { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f6c08c, #c46a3c 55%, #2e1208); }
.event-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; max-height: 340px; overflow-y: auto; }
.event { width: 100%; padding: 6px 10px; border: 1px solid transparent; border-radius: 8px; background: rgba(4, 8, 20, 0.6); color: var(--ink); text-align: left; font-size: 0.82rem; }
.event b { color: #ffd56b; }
.event.is-on { border-color: var(--accent); }