/* Lot Wars — shared styling for the student, board and teacher screens.
   Signal palette, matching the certificate activities on axisofaction.com so the
   class recognises it as the same world. */

:root {
  --bg: #0a0a0c;
  --panel: #14151c;
  --panel2: #0f1016;
  --ink: #f4f4f2;
  --ink-soft: rgba(244, 244, 242, 0.62);
  --ink-faint: rgba(244, 244, 242, 0.38);
  --line: rgba(244, 244, 242, 0.13);
  --mag: #ff2bc2;
  --cyan: #1ff0e6;
  --yellow: #ffd43b;
  --green: #45e89b;
  --red: #ff5658;
  --blue: #5b7cff;
  --bars: linear-gradient(90deg, var(--ink) 0 14.28%, var(--yellow) 14.28% 28.57%, var(--cyan) 28.57% 42.85%, var(--green) 42.85% 57.14%, var(--mag) 57.14% 71.42%, var(--red) 71.42% 85.71%, var(--blue) 85.71% 100%);
  --disp: "Anton", Impact, sans-serif;
  --ui: "Space Grotesk", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "VT323", monospace;
}

* { box-sizing: border-box; margin: 0; }

/* Beats the element rules further down (`label.field { display: block }` and
   friends) which would otherwise out-specify the attribute and show elements
   the script has explicitly hidden. */
[hidden] { display: none !important; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(55% 40% at 10% -5%, rgba(255, 43, 194, 0.14), transparent 60%),
    radial-gradient(55% 40% at 100% 0, rgba(31, 240, 230, 0.11), transparent 55%);
}

/* CRT overlay. Purely decorative, so it must never eat a click. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.11) 0 1px, transparent 1px 3px),
    radial-gradient(130% 120% at 50% 45%, transparent 64%, rgba(0, 0, 0, 0.5) 100%);
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) {
  body::after { background: none; }
  * { animation: none !important; transition: none !important; }
}

.bars { height: 6px; background: var(--bars); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 1.2rem 1.2rem 4rem; }

header.top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: 0.7rem 0 0.9rem; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { font-family: var(--mono); color: var(--ink-faint); letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.05rem; }
.brand b { color: var(--cyan); font-weight: normal; }
.hudline { font-family: var(--mono); color: var(--ink-faint); font-size: 1.05rem; letter-spacing: 0.06em; text-align: right; }
.hudline b { color: var(--yellow); font-weight: normal; }

.title {
  font-family: var(--disp); text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.6rem); line-height: 0.9; letter-spacing: 0.01em;
}
.title .vhs { position: relative; display: inline-block; }
.title .vhs::before, .title .vhs::after {
  content: attr(data-t); position: absolute; inset: 0; mix-blend-mode: screen;
}
.title .vhs::before { color: var(--cyan); transform: translateX(-2.5px); }
.title .vhs::after { color: var(--mag); transform: translateX(2.5px); }
.tag { font-family: var(--mono); color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; font-size: 1.05rem; margin-top: 0.4rem; }

/* Screens are toggled with .on. Anything that later sets `display` on .screen
   must be scoped `.screen.on`, or it will resurrect a hidden screen — the same
   trap the axisofaction activities hit. */
.screen { display: none; padding-top: 1.4rem; }
.screen.on { display: block; }

.panel { background: var(--panel); border: 1px solid var(--line); padding: 1.2rem 1.3rem; }
.panel + .panel { margin-top: 1rem; }
.panel h2 { font-family: var(--ui); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.7rem; }

label.field { display: block; margin-bottom: 1rem; }
label.field span { display: block; font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.35rem; }

input[type="text"], input[type="password"], select {
  width: 100%; background: var(--panel2); border: 1px solid var(--line); color: var(--ink);
  font-family: var(--ui); font-size: 1.05rem; padding: 0.75rem 0.85rem; border-radius: 2px;
}
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}
select option { background: var(--panel2); }

button {
  font-family: var(--ui); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.8rem 1.4rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg); cursor: pointer; border-radius: 2px;
}
button:hover:not(:disabled) { background: var(--cyan); border-color: var(--cyan); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button.ghost:hover:not(:disabled) { background: transparent; border-color: var(--cyan); color: var(--cyan); }
button.danger { background: transparent; color: var(--red); border-color: var(--red); }
button.danger:hover:not(:disabled) { background: var(--red); color: var(--bg); }

.err { color: var(--red); font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.05em; min-height: 1.4rem; }
.note { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }

/* ------------------------------------------------------------------ the lot */

/* The lot is an SVG map drawn by lot.js — city blocks around a crossroads. It
   scales to whatever container it is dropped into, so the rail, the brief and
   the projector all share one drawing. */
:root {
  --map-ground: #0c0d12;
  --map-asphalt: #16171f;
  --map-apron: #101119;
  --map-vacant: #1b1d26;
  --map-vacant-line: rgba(244, 244, 242, 0.16);
}

.lot { display: block; }
.lotmap { width: 100%; height: auto; display: block; }

.map-ground { fill: var(--map-ground); }
.map-fence {
  fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 4;
}
.map-road { fill: var(--map-asphalt); }
.map-centreline {
  stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 10 12; stroke-opacity: 0.5;
}
.map-apron { fill: var(--map-apron); stroke: var(--line); stroke-width: 1; }
.map-block.is-today .map-apron { stroke: var(--yellow); stroke-opacity: 0.55; }

.map-label {
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em;
  fill: var(--ink-faint);
}
.map-label.is-today { fill: var(--yellow); }
.map-gate { fill: var(--yellow); fill-opacity: 0.7; }
.map-gate-label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
  fill: var(--ink-faint); text-anchor: middle;
}

/* A building. Vacant plots stay flat and dark; owned ones take the colour. */
.plot { transition: opacity 0.3s ease; }
.plot.mine > rect:first-of-type,
.plot.mine > path { stroke: var(--ink); stroke-width: 2; }
.plot.decaying { animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

.plot-ring {
  fill: none; stroke: var(--yellow); stroke-width: 2.5;
}

/* ------------------------------------------------------------- question card */

.qhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.phase { font-family: var(--disp); text-transform: uppercase; font-size: 1.5rem; letter-spacing: 0.02em; }
.phase.defend { color: var(--yellow); }
.phase.claim { color: var(--cyan); }
.phase.raid { color: var(--mag); }
.target-line { font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.06em; color: var(--ink-soft); }
.target-line b { color: var(--ink); font-weight: normal; }

.timer { height: 4px; background: var(--line); margin-bottom: 1rem; }
.timer i { display: block; height: 100%; background: var(--cyan); transition: width 0.25s linear; }
.timer.low i { background: var(--red); }

.qimage {
  width: 100%; max-height: 46vh; object-fit: contain; background: #000;
  border: 1px solid var(--line); margin-bottom: 1rem; display: block;
}
.qprompt { font-family: var(--ui); font-size: clamp(1.1rem, 2.4vw, 1.45rem); font-weight: 600; line-height: 1.35; margin-bottom: 1rem; }

.options { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.opt {
  text-align: left; text-transform: none; letter-spacing: 0; font-weight: 500;
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line);
  padding: 0.85rem 1rem; font-family: var(--body); font-size: 1.02rem;
}
.opt:hover:not(:disabled) { background: var(--panel2); border-color: var(--cyan); color: var(--cyan); }
.opt.right { border-color: var(--green); color: var(--green); background: rgba(69, 232, 155, 0.09); }
.opt.wrong { border-color: var(--red); color: var(--red); background: rgba(255, 86, 88, 0.09); }
.opt.right:hover, .opt.wrong:hover { background: none; }

.reveal { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.verdict { font-family: var(--disp); text-transform: uppercase; font-size: 1.6rem; }
.verdict.yes { color: var(--green); }
.verdict.no { color: var(--red); }
.outcome { font-family: var(--mono); font-size: 1.15rem; letter-spacing: 0.05em; color: var(--yellow); margin: 0.25rem 0 0.7rem; }
.analysis { color: var(--ink-soft); line-height: 1.6; font-size: 1rem; }
.analysis b { color: var(--ink); }
.credit { font-family: var(--mono); font-size: 1rem; color: var(--ink-faint); letter-spacing: 0.05em; margin-top: 0.5rem; }

/* ------------------------------------------------------------- leaderboard */

table.board { width: 100%; border-collapse: collapse; font-family: var(--ui); }
table.board th {
  text-align: left; font-family: var(--mono); font-size: 1rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: normal;
  border-bottom: 1px solid var(--line); padding: 0.35rem 0.5rem;
}
table.board td { padding: 0.4rem 0.5rem; border-bottom: 1px solid rgba(244, 244, 242, 0.06); font-size: 1rem; }
table.board tr.me td { color: var(--cyan); font-weight: 700; }
table.board td.rank { font-family: var(--mono); color: var(--ink-faint); width: 2.5rem; }
table.board td.pts { text-align: right; font-variant-numeric: tabular-nums; }
.swatch { display: inline-block; width: 0.85rem; height: 0.85rem; margin-right: 0.5rem; vertical-align: -1px; }

.phases { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin-top: 0.4rem; }
.phasecard { border: 1px solid var(--line); background: var(--panel2); padding: 0.9rem 1rem; }
.phasecard h3 { font-family: var(--disp); text-transform: uppercase; font-size: 1.25rem; margin-bottom: 0.3rem; }
.phasecard.defend h3 { color: var(--yellow); }
.phasecard.claim h3 { color: var(--cyan); }
.phasecard.raid h3 { color: var(--mag); }
.phasecard p { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.5; }
.phasecard .count { font-family: var(--mono); font-size: 1.1rem; color: var(--ink); letter-spacing: 0.06em; margin-top: 0.4rem; }

.rowbtns { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.1rem; }

.big-stat { font-family: var(--disp); font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1; }
.big-stat small { display: block; font-family: var(--mono); font-size: 1.05rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }

/* ------------------------------------------------------- play: the live rail */

/* The question keeps the main column; the rail carries everything about the
   contest — rank, the map, and who just took what. Before this existed a
   student answered into a void and only learned they'd been raided after the
   bell, which made a competitive game feel like a worksheet. */
.playgrid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
@media (max-width: 900px) {
  /* Narrow screens put the rail underneath — but the feed stays above the fold
     of the next question so a raid on you is never missed. */
  .playgrid { grid-template-columns: 1fr; }
  .rail { order: -1; }
}

.rail { display: grid; gap: 1rem; }
.railpanel { padding: 0.9rem 1rem; }
.railpanel h2 { margin-bottom: 0.5rem; }

.railstats { display: flex; gap: 1.1rem; margin-bottom: 0.85rem; }
.railstats div { display: flex; flex-direction: column; }
.railstats b { font-family: var(--disp); font-size: 1.9rem; line-height: 1; font-weight: normal; }
.railstats small { font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* The rail draws the same map in compact mode (no labels, no gate), so the
   student can see where on the lot they are playing without it competing with
   the question. */
.railmap .lotmap { border: 1px solid var(--line); }

.railleader { font-family: var(--mono); font-size: 1rem; letter-spacing: 0.05em; color: var(--ink-faint); margin-top: 0.6rem; }
.railleader b { color: var(--yellow); font-weight: normal; }

.feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.feed li {
  font-family: var(--ui); font-size: 0.88rem; line-height: 1.35;
  padding: 0.4rem 0.5rem; border-left: 2px solid var(--line); background: var(--panel2);
  color: var(--ink-soft);
}
.feed li b { color: var(--ink); font-weight: 600; }
.feed li.claim { border-left-color: var(--cyan); }
.feed li.raid { border-left-color: var(--mag); }
.feed li.hold { border-left-color: var(--yellow); }
.feed li.fall { border-left-color: var(--ink-faint); }
/* Anything that happened to you is the one thing you must not scroll past. */
.feed li.involves-me { background: rgba(255, 43, 194, 0.1); color: var(--ink); }
.feed li.involves-me b { color: var(--mag); }
.feed li.feed-empty { border-left-color: transparent; background: none; color: var(--ink-faint); font-family: var(--mono); }
.feed li.fresh { animation: flash 1.4s ease-out; }
@keyframes flash { 0% { background: rgba(31, 240, 230, 0.28); } 100% {} }

/* ----------------------------------------------------- phase transition card */

.phase-card { text-align: left; }
.phase-num { font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.phase-title { font-family: var(--disp); text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 0.95; margin: 0.2rem 0 0.5rem; }
.phase-title.defend { color: var(--yellow); }
.phase-title.claim { color: var(--cyan); }
.phase-title.raid { color: var(--mag); }
.phase-blurb { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; max-width: 46rem; margin-bottom: 1.1rem; }
#phaseLot { margin-bottom: 0.8rem; }

/* The map is 1000x680, so at full column width it is ~700px tall and pushes the
   Start button off a laptop screen. Bound it by height on the screens where
   something below it needs to stay reachable. */
#briefLot .lotmap,
#doneLot .lotmap,
#phaseLot .lotmap {
  width: auto; max-width: 100%; max-height: 42vh; margin: 0 auto;
}