@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #f0fff8;
  --muted: #9cb8bc;
  --mint: #8effc6;
  --mint-bright: #bdffde;
  --cyan: #55dce7;
  --purple: #8d6cff;
  --danger: #ff7296;
  --panel: rgba(7, 13, 40, 0.77);
  --panel-deep: rgba(5, 9, 31, 0.9);
  --border: rgba(151, 255, 211, 0.2);
  --soft-border: rgba(255, 255, 255, 0.1);
  font-family: "Chakra Petch", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100svh;
  color: var(--ink);
  background: #060821;
  overflow-x: hidden;
}

button, input { font: inherit; }
button { color: inherit; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2, 5, 25, .5), rgba(5, 6, 32, .08)),
    url("space-background.jpg") center / cover no-repeat;
  transform: scale(1.02);
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 68% 48%, transparent 0 25%, rgba(3, 6, 28, .26) 72%);
}

.start-screen {
  position: fixed;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 5, 24, .4);
  backdrop-filter: blur(5px);
  transition: opacity .32s ease, visibility .32s ease;
}
.start-screen.leaving { opacity: 0; visibility: hidden; }
.start-card {
  --difficulty-accent: #79e8d0;
  --difficulty-bright: #b8fff0;
  --difficulty-glow: rgba(121, 232, 208, .38);
  --difficulty-scale: 1.035;
  width: min(100%, 515px);
  padding: clamp(24px, 4vw, 38px);
  border-radius: 13px;
}
.start-card h1 { margin: 3px 0 8px; font-size: clamp(2.1rem, 6vw, 3.3rem); letter-spacing: .2em; }
.start-lead { margin: 0 0 27px; color: #b7c9cb; font-size: .94rem; }
.start-name {
  width: 100%;
  margin-top: 7px;
  padding: 13px 14px;
  color: white;
  border: 1px solid rgba(142,255,198,.34);
  border-radius: 7px;
  outline: 0;
  background: rgba(1, 7, 26, .7);
  font: .92rem "Space Mono", monospace;
}
.start-name:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(142,255,198,.08); }
.start-name::placeholder { color: #6f818b; }
.difficulty-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  margin: 22px 2px 7px;
}
.difficulty-heading label { margin: 0; }
.difficulty-heading strong {
  position: relative;
  z-index: 0;
  display: inline-block;
  padding: 5px 8px;
  color: var(--difficulty-bright);
  font: 700 .72rem "Space Mono", monospace;
  letter-spacing: .12em;
  text-shadow: 0 0 12px var(--difficulty-glow);
  transform: scale(var(--difficulty-scale));
  transform-origin: right center;
  transition: color .22s ease, text-shadow .22s ease, transform .22s ease, letter-spacing .22s ease;
}
.difficulty-heading strong::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px -3px;
  border: 1px solid color-mix(in srgb, var(--difficulty-accent) 42%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--difficulty-accent) 8%, transparent);
  box-shadow: 0 0 17px color-mix(in srgb, var(--difficulty-glow) 65%, transparent);
  transition: inherit;
}
.start-card[data-difficulty="5"] .difficulty-heading strong {
  letter-spacing: .17em;
  animation: blackHoleEmphasis 2.2s ease-in-out infinite;
}
.difficulty-range {
  --difficulty-progress: 20%;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  cursor: grab;
  background: transparent;
}
.difficulty-range:active { cursor: grabbing; }
.difficulty-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--mint) 0, var(--difficulty-accent) var(--difficulty-progress), rgba(255,255,255,.16) var(--difficulty-progress) 100%);
  box-shadow: 0 0 10px color-mix(in srgb, var(--difficulty-glow) 60%, transparent);
}
.difficulty-range::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -6px;
  appearance: none;
  border: 3px solid #07152a;
  border-radius: 50%;
  background: var(--difficulty-bright);
  box-shadow: 0 0 0 2px var(--difficulty-accent), 0 0 18px var(--difficulty-glow);
  transition: background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.difficulty-range::-webkit-slider-thumb:hover { transform: scale(1.08); }
.difficulty-range::-moz-range-track { height: 6px; border-radius: 9px; background: rgba(255,255,255,.16); }
.difficulty-range::-moz-range-progress { height: 6px; border-radius: 9px; background: var(--difficulty-accent); box-shadow: 0 0 10px var(--difficulty-glow); }
.difficulty-range::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #07152a; border-radius: 50%; background: var(--difficulty-bright); box-shadow: 0 0 0 2px var(--difficulty-accent), 0 0 18px var(--difficulty-glow); }
.start-tip {
  display: flex;
  gap: 9px;
  margin: 25px 0 20px;
  padding: 12px 13px;
  border: 1px solid rgba(142,255,198,.17);
  border-left: 2px solid var(--mint);
  border-radius: 5px;
  background: rgba(142,255,198,.055);
}
.start-tip span { height: fit-content; padding: 2px 5px; color: var(--mint); border: 1px solid rgba(142,255,198,.32); border-radius: 3px; font: .56rem "Space Mono", monospace; }
.start-tip p { margin: 0; color: #b7c9cb; font-size: .76rem; line-height: 1.45; }
.start-button { width: 100%; flex: initial; justify-content: space-between; }

.app-shell {
  width: 100%;
  min-height: 100svh;
  padding: clamp(14px, 2vw, 28px);
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.glass-panel {
  background: linear-gradient(145deg, rgba(8, 15, 45, .86), rgba(6, 11, 34, .69));
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px) saturate(125%);
}

.control-panel {
  min-height: calc(100svh - clamp(28px, 4vw, 56px));
  max-height: calc(100svh - clamp(28px, 4vw, 56px));
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(142,255,198,.35) transparent;
}

.brand-row, .stage-topbar, .panel-footer, .form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--mint);
  font-family: "Space Mono", monospace;
  font-size: .64rem;
  letter-spacing: .18em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 1.7rem; letter-spacing: .16em; line-height: 1; }
h2 { margin-bottom: 2px; font-size: .98rem; letter-spacing: .04em; }

.score-card {
  min-width: 98px;
  padding: 8px 12px;
  text-align: right;
  border-left: 1px solid var(--mint);
  background: linear-gradient(90deg, transparent, rgba(142,255,198,.07));
}

.score-card span, .mission-status span, label {
  display: block;
  color: var(--muted);
  font-family: "Space Mono", monospace;
  font-size: .58rem;
  letter-spacing: .13em;
}

.score-card strong { color: var(--mint-bright); font-family: "Space Mono", monospace; font-size: 1.25rem; }

.mission-status {
  margin: 22px 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 16px;
  background: rgba(2, 7, 28, .5);
  border: 1px solid var(--soft-border);
  border-radius: 8px;
}

.mission-status strong { display: block; margin-top: 3px; font-size: .95rem; }
.mission-status b { font-weight: 600; }
.status-separator { background: var(--soft-border); }

.launcher, .trajectory-section {
  padding-top: 18px;
  border-top: 1px solid var(--soft-border);
}

.section-heading { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 15px; }
.section-heading.compact { margin-bottom: 12px; }
.section-heading p { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.section-number {
  flex: 0 0 auto;
  color: var(--mint);
  font-family: "Space Mono", monospace;
  font-size: .66rem;
  border: 1px solid rgba(142,255,198,.4);
  padding: 3px 5px;
  border-radius: 3px;
}

label { margin: 0 0 7px 2px; }
.equation-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-bottom: 7px;
  padding: 3px;
  border: 1px solid var(--soft-border);
  border-radius: 6px;
  background: rgba(0,0,0,.18);
}
.equation-mode button {
  min-height: 30px;
  border: 0;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font: 600 .68rem "Space Mono", monospace;
}
.equation-mode button.active {
  color: #07152a;
  background: var(--mint);
  box-shadow: 0 4px 12px rgba(80,240,184,.14);
}
.equation-field {
  display: flex;
  align-items: center;
  border: 1px solid rgba(142,255,198,.34);
  background: rgba(1, 7, 26, .7);
  border-radius: 7px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}

.equation-field:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(142,255,198,.08); }
.equation-field > span { flex: 0 0 auto; padding: 0 0 0 13px; color: var(--mint); font-family: "Space Mono", monospace; font-weight: 700; white-space: nowrap; }
.equation-field input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 12px 13px 12px 7px;
  color: white;
  background: transparent;
  font-family: "Space Mono", monospace;
  font-size: .92rem;
}
.equation-field input::placeholder { color: #6f818b; }

.math-keyboard {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}
.math-keyboard button {
  min-width: 0;
  min-height: 31px;
  padding: 3px 2px;
  color: #c7f8e1;
  border: 1px solid rgba(142,255,198,.16);
  border-radius: 4px;
  background: rgba(142,255,198,.055);
  font: 600 .67rem "Space Mono", monospace;
  transition: background .15s, border-color .15s, transform .15s;
}
.math-keyboard button:hover {
  border-color: rgba(142,255,198,.55);
  background: rgba(142,255,198,.12);
  transform: translateY(-1px);
}
.math-keyboard button:active { transform: translateY(0); }

.input-hint, .input-error { min-height: 1em; margin: 7px 2px 10px; font-size: .68rem; color: var(--muted); }
.input-error { display: none; color: #ff9ab2; }
.input-error:not(:empty) { display: block; }
.input-error:not(:empty) + .form-actions { margin-top: 0; }

button { cursor: pointer; }
.primary-button, .ghost-button, .danger-button, .new-game-button {
  border-radius: 6px;
  min-height: 40px;
  padding: 0 15px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.primary-button {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 0;
  color: #07152a;
  background: linear-gradient(110deg, var(--mint), #6ee9dc);
  box-shadow: 0 8px 20px rgba(74, 240, 189, .14);
}
.primary-button:hover { filter: brightness(1.08); }
.ghost-button { border: 1px solid var(--soft-border); background: rgba(255,255,255,.04); }

.trajectory-section {
  margin-top: 22px;
  display: flex;
  flex: 0 0 auto;
  min-height: 105px;
  flex-direction: column;
}
.empty-state {
  min-height: 75px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  color: #789096;
  border: 1px dashed rgba(255,255,255,.11);
  border-radius: 7px;
}
.empty-state span { color: var(--mint); font-size: 1.2rem; }
.empty-state p { margin: 0; font-size: .72rem; }
.function-list { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.function-item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 10px 8px;
  margin-bottom: 6px;
  border: 1px solid var(--soft-border);
  border-radius: 6px;
  background: rgba(0,0,0,.18);
}
.color-chip { width: 8px; height: 28px; border-radius: 5px; box-shadow: 0 0 12px currentColor; }
.function-copy { min-width: 0; }
.function-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; font: .78rem "Space Mono", monospace; white-space: nowrap; }
.function-copy small { color: var(--muted); font-size: .61rem; }
.item-actions { display: flex; gap: 4px; }
.item-actions button, .icon-button, .dialog-close {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--soft-border);
  border-radius: 5px;
  background: rgba(255,255,255,.04);
}
.item-actions button:hover { border-color: var(--mint); color: var(--mint); }
.danger-button {
  margin-top: 10px;
  border: 1px solid rgba(255,114,150,.25);
  background: rgba(255,114,150,.06);
  color: #ff9db6;
}
.danger-button:disabled { opacity: .35; cursor: not-allowed; }
.danger-button span { margin-right: 5px; font-size: 1rem; }

.panel-footer { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--soft-border); }
.new-game-button { flex: 1; border: 1px solid rgba(142,255,198,.35); background: rgba(142,255,198,.05); color: var(--mint); }
.icon-button { flex: 0 0 auto; color: var(--mint); }

.space-stage {
  min-width: 0;
  min-height: calc(100svh - clamp(28px, 4vw, 56px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.graph-hud {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 42px;
  left: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #bed2d5;
  font: .61rem "Space Mono", monospace;
  letter-spacing: .06em;
  pointer-events: none;
}
.coordinate-range, .legend { display: flex; align-items: center; gap: 8px; }
.target-readout {
  position: absolute;
  z-index: 4;
  min-width: 132px;
  padding: 7px 10px;
  color: #07152a;
  border-radius: 4px;
  background: var(--mint-bright);
  box-shadow: 0 0 16px rgba(142,255,198,.3);
  font: 700 .62rem "Space Mono", monospace;
  letter-spacing: .03em;
  line-height: 1.55;
  white-space: pre-line;
  pointer-events: auto;
}
.coordinate-range span { color: var(--mint); font-weight: 700; }
.coordinate-range i { width: 1px; height: 12px; margin: 0 4px; background: var(--soft-border); }
.legend { gap: 15px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend-star { width: 8px; height: 8px; background: var(--mint); transform: rotate(45deg); box-shadow: 0 0 9px var(--mint); }
.legend-line { width: 14px; height: 2px; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }

.graph-frame {
  position: relative;
  width: min(100%, calc(100svh - clamp(28px, 4vw, 56px)));
  aspect-ratio: 1;
  border: 1px solid rgba(142,255,198,.25);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(3, 8, 30, .69);
  box-shadow: 0 30px 90px rgba(0,0,0,.44), inset 0 0 80px rgba(16, 13, 75, .25);
  backdrop-filter: blur(8px);
}
#graphCanvas { display: block; width: 100%; height: 100%; cursor: crosshair; }

.corner-mark { position: absolute; width: 22px; height: 22px; border-color: var(--mint); pointer-events: none; }
.top-left { top: 8px; left: 8px; border-top: 2px solid; border-left: 2px solid; }
.top-right { top: 8px; right: 8px; border-top: 2px solid; border-right: 2px solid; }
.bottom-left { bottom: 8px; left: 8px; border-bottom: 2px solid; border-left: 2px solid; }
.bottom-right { right: 8px; bottom: 8px; border-right: 2px solid; border-bottom: 2px solid; }

.mission-complete {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(circle, rgba(14, 39, 67, .8), rgba(3, 7, 29, .95) 64%);
  backdrop-filter: blur(9px);
}
.complete-star { color: var(--mint); font-size: 4rem; filter: drop-shadow(0 0 18px var(--mint)); animation: starPulse 1.8s ease-in-out infinite; }
.mission-complete p { margin: 14px 0 4px; color: var(--mint); font: .65rem "Space Mono", monospace; letter-spacing: .2em; }
.mission-complete h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.mission-complete strong { margin: 8px 0 20px; color: var(--mint-bright); font: 1rem "Space Mono", monospace; }
.mission-complete .primary-button { flex: 0 0 auto; min-width: 190px; justify-content: center; }

.rules-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 28px;
  color: var(--ink);
  border: 1px solid rgba(142,255,198,.35);
  border-radius: 10px;
  background: rgba(6, 11, 35, .96);
  box-shadow: 0 25px 80px rgba(0,0,0,.6);
  backdrop-filter: blur(22px);
}
.rules-dialog::backdrop { background: rgba(1, 3, 19, .7); backdrop-filter: blur(4px); }
.rules-dialog h2 { font-size: 1.5rem; }
.rules-dialog ol { padding-left: 21px; color: #c5d7d7; line-height: 1.55; }
.rules-dialog li { margin-bottom: 8px; }
.syntax-note { margin: 18px 0 0; padding: 12px; color: var(--muted); background: rgba(142,255,198,.06); border-left: 2px solid var(--mint); font-size: .8rem; line-height: 1.5; }
.dialog-close { position: absolute; top: 14px; right: 14px; }

.toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 24px;
  translate: -50% 20px;
  padding: 10px 16px;
  color: #07152a;
  background: var(--mint-bright);
  border-radius: 5px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  font-size: .78rem;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, translate .2s;
}
.toast.visible { opacity: 1; translate: -50% 0; }
.hidden { display: none !important; }

@keyframes starPulse { 50% { transform: scale(1.12) rotate(7deg); filter: drop-shadow(0 0 28px var(--mint)); } }
@keyframes blackHoleEmphasis {
  50% { transform: scale(calc(var(--difficulty-scale) + .035)); text-shadow: 0 0 7px #fff, 0 0 22px var(--difficulty-glow); }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 315px minmax(0, 1fr); padding: 12px; gap: 12px; }
  .control-panel { min-height: calc(100svh - 24px); max-height: calc(100svh - 24px); padding: 17px; }
  .graph-frame { width: min(100%, calc(100svh - 24px)); }
}

@media (max-width: 740px) {
  .app-shell { display: flex; flex-direction: column; }
  .control-panel { min-height: auto; max-height: none; order: 2; }
  .space-stage { min-height: auto; order: 1; }
  .graph-frame { width: 100%; }
  .function-list { max-height: 220px; }
}

@media (max-width: 440px) {
  .app-shell { padding: 8px; gap: 10px; }
  .control-panel { padding: 15px; }
  .legend { display: none; }
  .graph-hud { right: 38px; left: 38px; }
  h1 { font-size: 1.35rem; }
  .score-card { min-width: 86px; }
  .math-keyboard { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .start-screen { padding: 12px; }
  .start-card { padding: 23px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}