@charset "utf-8";
/* Linear Invaders (formerly Line Zapper) — linear equations: slopes y = mx + horizontal/vertical lines (2026-06 redesign) */

:root {
  --bg-0: #0b1020;
  --bg-1: #131a31;
  --card: #1a2238;
  --card-2: #212c47;
  --line: #2d3a5c;
  --ink: #eef2ff;
  --muted: #9aa6c7;
  --primary: #38bdf8;
  --primary-ink: #06283b;
  --go: #34d399;
  --bad: #fb7185;
  --aim: #38bdf8;     /* player's beam / aim */
  --enemy: #fb7185;   /* the drone + its line */
  --r: 18px;
  --shadow: 0 20px 50px -20px rgba(0,0,0,.65);
  --font: ui-rounded, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font); color: var(--ink);
  background:
    radial-gradient(1100px 700px at 50% -8%, #1c2748 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%) fixed;
  min-height: 100%; -webkit-text-size-adjust: 100%;
}

/* ---------- top bar ---------- */
.lz-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px clamp(14px, 4vw, 28px);
  border-bottom: 1px solid var(--line); background: rgba(11,16,32,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lz-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 800; }
.lz-brand img { display: block; }
.lz-brand span { font-size: clamp(15px, 2.4vw, 18px); }
.lz-nav-links { display: flex; align-items: center; gap: 8px; }
.lz-nav-links a, #btn-info {
  color: var(--muted); text-decoration: none; font-family: var(--font); font-weight: 600; font-size: 14px;
  background: none; border: 1px solid transparent; border-radius: 999px; padding: 8px 12px; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.lz-nav-links a:hover, #btn-info:hover { color: var(--ink); background: var(--card-2); }
#btn-info { border-color: var(--line); }

/* ---------- stage ---------- */
.lz-wrap {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(14px, 3vw, 28px) 14px 40px; min-height: calc(100vh - 58px);
}
.lz-screen {
  display: none; width: min(560px, 100%);
  background: linear-gradient(180deg, var(--card) 0%, #161d31 100%);
  border: 1px solid var(--line); border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow); padding: clamp(18px, 4vw, 28px);
  animation: fade .28s ease both;
}
.lz-wrap[data-screen="start"]  .lz-start  { display: block; }
.lz-wrap[data-screen="game"]   .lz-game   { display: block; }
.lz-wrap[data-screen="result"] .lz-result { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- start ---------- */
.lz-title { margin: 0 0 6px; font-size: clamp(26px, 6vw, 38px); font-weight: 800; letter-spacing: -.5px; color: #bae6fd; }
.lz-ver { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .04em; vertical-align: middle; }
.lz-tag { margin: 0 0 14px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.lz-tag strong { color: var(--ink); }
.lz-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.lz-legend b { color: var(--enemy); font-size: 17px; display: inline-block; width: 14px; }
/* slope legend with a stacked "change in y / change in x" fraction */
.lz-slope-leg { display: inline-flex; align-items: center; gap: 6px; }
.lz-frac-mini { display: inline-flex; flex-direction: column; align-items: center; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 11.5px; line-height: 1.3; color: #bae6fd; }
.lz-frac-mini > span { padding: 1px 7px; white-space: nowrap; }
.lz-frac-mini > span:first-child { border-bottom: 1.5px solid currentColor; }
.lz-legend code, .lz-tag code, .lz-modal-card code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: #bae6fd;
  background: var(--bg-0); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 13px;
}
.lz-ccss { margin: 0 0 18px; padding: 11px 13px; text-align: left; background: var(--bg-0); border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.lz-ccss b { color: #bae6fd; font-weight: 800; }
.lz-ccss strong { color: var(--ink); font-weight: 700; }
.lz-ccss code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; color: #bae6fd; background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
.lz-pick { margin: 0 0 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* segmented control (difficulty + axis) */
.lz-seg { display: flex; gap: 6px; background: var(--bg-0); border: 1px solid var(--line); border-radius: 14px; padding: 5px; }
.lz-seg-btn {
  appearance: none; cursor: pointer; flex: 1; border: 0; border-radius: 10px; padding: 11px 8px;
  font-family: var(--font); font-weight: 700; font-size: 15px; color: var(--muted);
  background: transparent; transition: background .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
.lz-seg-btn:hover { color: var(--ink); }
.lz-seg-btn.is-active { color: var(--primary-ink); background: linear-gradient(180deg, #7dd3fc, var(--primary)); box-shadow: 0 6px 16px -8px rgba(56,189,248,.8); }

.lz-primary {
  appearance: none; border: 0; cursor: pointer; width: 100%; margin-top: 18px;
  padding: 15px 20px; border-radius: 14px; font-family: var(--font); font-weight: 800; font-size: 17px; line-height: 1;
  color: var(--primary-ink); background: linear-gradient(180deg, #7dd3fc, var(--primary));
  box-shadow: 0 10px 24px -10px rgba(56,189,248,.7); transition: transform .08s ease, filter .15s;
}
.lz-primary:hover { filter: brightness(1.05); }
.lz-primary:active { transform: translateY(1px); }
.lz-ghost {
  appearance: none; cursor: pointer; width: 100%; margin-top: 10px; padding: 12px 20px; border-radius: 14px;
  font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1;
  color: var(--muted); background: transparent; border: 1px solid var(--line); transition: color .15s, background .15s;
}
.lz-ghost:hover { color: var(--ink); background: var(--card-2); }
.lz-best { margin: 16px 0 0; text-align: center; color: var(--muted); font-size: 14px; }
.lz-best strong { color: #fbbf24; font-size: 16px; }

/* ---------- game HUD ---------- */
.lz-hud { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 14px; color: var(--muted); }
.lz-hud-mode { font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); background: var(--bg-0); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.lz-hud-stat { font-weight: 600; }
.lz-hud-stat strong { color: var(--ink); font-weight: 800; }
.lz-hud-lives { margin-left: auto; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.lz-quit { appearance: none; cursor: pointer; font-family: var(--font); font-weight: 800; font-size: 12px;
  color: var(--muted); background: var(--bg-0); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; transition: color .15s, background .15s, border-color .15s; }
.lz-quit:hover { color: var(--bad); border-color: var(--bad); }

/* ---------- canvas ---------- */
.lz-canvas-wrap { position: relative; }
#board {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--r);
  border: 1px solid var(--line); background: #0a0f1e; touch-action: manipulation; cursor: crosshair;
}
.lz-toast {
  position: absolute; left: 50%; top: 16%; transform: translate(-50%, -50%) scale(.8);
  font-weight: 850; font-size: clamp(20px, 6vw, 30px); white-space: nowrap; text-align: center;
  opacity: 0; pointer-events: none; text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.lz-toast.show { animation: toastPop 1s ease both; }
.lz-toast.good { color: #6ee7b7; }
.lz-toast.bad { color: #fda4af; }
@keyframes toastPop {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-70%) scale(1); }
}

/* ---------- fire bar ---------- */
.lz-fire { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
/* Grade 7 (y = mx) is typing-only — hide the horizontal/vertical toggle + value slider */
.lz-wrap[data-grade="7"] .lz-axis,
.lz-wrap[data-grade="7"] .lz-value { display: none; }
.lz-axis .lz-seg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 16px; }
.lz-axis .lz-seg-btn small { font-weight: 600; font-size: 11px; opacity: .8; }
.lz-axis .lz-seg-btn.is-active small { color: var(--primary-ink); }
.lz-ico { display: inline-block; width: 16px; height: 16px; position: relative; }
.lz-ico-h::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-50%); background: currentColor; border-radius: 2px; }
.lz-ico-v::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: currentColor; border-radius: 2px; }

.lz-value { display: flex; align-items: center; gap: 10px; }
.lz-step {
  appearance: none; cursor: pointer; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--ink);
  font-family: var(--font); font-weight: 800; font-size: 24px; line-height: 1; transition: background .12s, transform .06s;
  -webkit-tap-highlight-color: transparent;
}
.lz-step:hover { background: #2a3759; }
.lz-step:active { transform: translateY(1px); }
#slider {
  flex: 1; height: 40px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
#slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, #243250, #38507e); }
#slider::-moz-range-track { height: 8px; border-radius: 999px; background: #2c3c61; }
#slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: linear-gradient(180deg, #7dd3fc, var(--primary)); border: 2px solid #0a0f1e; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
#slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); border: 2px solid #0a0f1e; }

.lz-fire-row { display: flex; gap: 10px; }
.lz-eq {
  flex: 1; min-width: 0; text-align: center; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-weight: 700; font-size: 22px; color: #bae6fd; background: var(--bg-0);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px;
}
.lz-eq:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(56,189,248,.25); }
.lz-eq.invalid { border-color: var(--bad); color: var(--bad); box-shadow: 0 0 0 2px rgba(251,113,133,.2); }

/* Grade 7 fraction input (numerator over denominator) vs Grade 8 text field */
.lz-wrap[data-grade="8"] .lz-frac-input { display: none; }
.lz-wrap[data-grade="7"] #eq { display: none; }
.lz-frac-input {
  flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--bg-0); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.lz-frac-lead { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 700; font-size: 22px; color: #bae6fd; }
/* typed slope: a transparent <input> on top captures keys; #mqf-render draws the math (a "/" stacks it) */
.lz-mqf { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 46px; }
.lz-mqf-raw { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; color: transparent; caret-color: transparent; text-align: center; font: inherit; outline: none; cursor: text; }
.lz-mqf-render { pointer-events: none; display: inline-flex; align-items: center; justify-content: center; min-height: 28px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-weight: 700; font-size: 22px; color: #bae6fd; }
.lz-mqf-int { display: inline-flex; align-items: center; padding: 0 2px; }
.lz-mqf-frac { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; margin: 0 4px; }
.lz-mqf-frac > .num { border-bottom: 2px solid currentColor; padding: 0 6px 2px; }
.lz-mqf-frac > .den { padding: 2px 6px 0; }
.lz-mqf-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.15em; background: currentColor; margin: 0 1px; animation: mqfBlink 1.05s steps(1) infinite; }
@keyframes mqfBlink { 50% { opacity: 0; } }
.lz-frac-input.invalid { border-color: var(--bad); }
.lz-frac-input.invalid .lz-mqf-render { color: var(--bad); }
.lz-fire-btn {
  appearance: none; cursor: pointer; flex: 0 0 auto; padding: 0 26px; border-radius: 12px; border: 0;
  font-family: var(--font); font-weight: 850; font-size: 18px; letter-spacing: 1px;
  color: #3a0510; background: linear-gradient(180deg, #fda4af, var(--bad));
  box-shadow: 0 10px 24px -10px rgba(251,113,133,.8); transition: transform .06s ease, filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.lz-fire-btn:hover { filter: brightness(1.06); }
.lz-fire-btn:active { transform: translateY(2px); }
.lz-fire-btn:disabled { filter: grayscale(.6) brightness(.8); cursor: not-allowed; box-shadow: none; }
.lz-hint { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.4; }

/* ---------- result ---------- */
.lz-result { text-align: center; }
.lz-result-emoji { font-size: 50px; line-height: 1; margin-bottom: 6px; }
.lz-result-head { margin: 0 0 4px; font-size: clamp(22px, 5vw, 28px); font-weight: 800; }
.lz-result-sub { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.lz-result-sub strong { color: var(--ink); }
.lz-scoreline { display: flex; justify-content: center; gap: 14px; margin: 0 0 22px; }
.lz-score { flex: 1; max-width: 170px; background: var(--bg-0); border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; }
.lz-score-num { display: block; font-weight: 800; font-size: 34px; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
.lz-score:last-child .lz-score-num { color: #fbbf24; }
.lz-score-lbl { display: block; margin-top: 5px; font-weight: 700; font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

/* ---------- info modal ---------- */
.lz-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(5,8,18,.68); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease both; }
.lz-modal[hidden] { display: none; }
.lz-modal-card { width: min(460px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 4vw, 28px); box-shadow: var(--shadow); }
.lz-modal-card h2 { margin: 0 0 12px; font-size: 22px; font-weight: 800; }
.lz-modal-card ol { margin: 0 0 16px; padding-left: 20px; }
.lz-modal-card li { margin: 0 0 10px; line-height: 1.5; }
.lz-modal-card strong { color: #bae6fd; }

.lz-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .lz-screen, .lz-modal, .lz-toast.show { animation: none !important; }
  .lz-toast.show { opacity: 1; }
  .lz-primary, .lz-ghost, .lz-seg-btn, .lz-step, .lz-fire-btn { transition: none !important; }
  .lz-mqf-caret { animation: none !important; }
}