/* ==========================================================================
   OREGON TRAIL: DRAFT DAY — green phosphor CRT
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:        #071008;   /* page */
  --bg-lift:   #0d1c13;   /* panels */
  --fill:      #1c4a2e;   /* hover backgrounds, grid dividers */

  /* Text. Every one of these clears WCAG AA on every surface it lands on;
     the small-label colour used to be #16532c at 2.06:1, which is why the
     labels, blurbs and manager names were effectively invisible. */
  --white:     #f4fff8;   /* headings, narrative, stat values */
  --grn:       #74ffb0;   /* primary phosphor: buttons, meters, cursor */
  --grn-soft:  #a8ffcd;   /* secondary text: sub-headings, ASCII art */
  --grn-mute:  #95ecb8;   /* small text: labels, blurbs, hints, legends */

  /* Structure. These are never text, so they are free to stay dark. */
  --line:      #358552;   /* default borders */
  --line-lit:  #5fd08d;   /* hover / emphasis borders */

  --amber:     #ffdb7a;
  --red:       #ff8f8f;
  --mono: "SF Mono", "Menlo", "DejaVu Sans Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--grn);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 24px 16px 64px;
  background:
    radial-gradient(ellipse at 50% 0%, #14301f 0%, var(--bg) 74%);
}

/* --- CRT overlays: scanlines + vignette + slow flicker ------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  /* Scanlines only. No vignette, no flicker -- both darkened the edges of the
     board and made the outer columns harder to read than the middle ones. */
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.07) 3px,
    rgba(0, 0, 0, 0.07) 4px
  );
  mix-blend-mode: multiply;
}

/* --- layout ------------------------------------------------------------- */

.wrap {
  max-width: 860px;
  margin: 0 auto;
}
.wide { max-width: 1180px; }

.screen { display: none; }
.screen.on { display: block; animation: fadein 0.25s ease-out; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* --- panel / frame ------------------------------------------------------ */

.panel {
  border: 2px solid var(--line-lit);
  background: var(--bg-lift);
  padding: 20px 22px;
  margin: 0 0 18px;
  box-shadow: 0 0 0 1px #000 inset, 0 0 30px rgba(92, 255, 160, 0.06);
}
.panel.tight { padding: 12px 16px; }
.panel-title {
  display: inline-block;
  position: relative;
  top: -32px;
  margin-bottom: -22px;
  padding: 0 10px;
  background: var(--bg-lift);
  color: var(--grn);
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* --- type --------------------------------------------------------------- */

pre.art {
  color: var(--grn-soft);
  font-size: clamp(7px, 1.35vw, 12px);
  line-height: 1.15;
  margin: 0 0 18px;
  white-space: pre;
  overflow-x: auto;
  text-shadow: 0 0 10px rgba(92, 255, 160, 0.28);
}
pre.art.big { font-size: clamp(6px, 1.5vw, 13px); }

h1.title {
  font-size: clamp(18px, 3.4vw, 30px);
  letter-spacing: 0.14em;
  margin: 0 0 6px;
  color: var(--white);
  text-shadow: 0 0 16px rgba(92, 255, 160, 0.5);
}
h2 {
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0 0 4px;
}
.sub {
  color: var(--grn-soft);
  font-size: 15px;
  letter-spacing: 0.05em;
  margin: 0 0 20px;
}
.narrative {
  color: var(--white);
  font-size: 17.5px;
  line-height: 1.85;
  margin: 0 0 8px;
  min-height: 1.75em;
}
.narrative .cursor {
  display: inline-block;
  width: 0.6em;
  background: var(--grn);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.aside {
  color: var(--amber);
  font-size: 15px;
  margin: 12px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--amber);
}
.hint {
  color: var(--grn-mute);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 18px;
}
.warn { color: var(--red); }
.good { color: var(--grn); }
.amber { color: var(--amber); }

/* --- status bar --------------------------------------------------------- */

.status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 1px;
  background: var(--fill);
  border: 2px solid var(--line-lit);
  margin-bottom: 18px;
}
.stat {
  background: var(--bg-lift);
  padding: 8px 10px 9px;
}
.stat .k {
  font-size: 12px;
  letter-spacing: 0.11em;
  color: var(--grn-mute);
  text-transform: uppercase;
}
.stat .v {
  font-size: 19px;
  color: var(--white);
  line-height: 1.25;
}
.stat .v.low { color: var(--red); }
.stat .v.mid { color: var(--amber); }

.meter {
  height: 5px;
  background: #17402a;
  margin-top: 5px;
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--grn);
  transition: width 0.5s ease-out;
}
.meter i.mid { background: var(--amber); }
.meter i.low { background: var(--red); }

/* progress along the trail */
.trailbar {
  position: relative;
  height: 20px;
  border: 1px solid var(--line);
  margin-bottom: 18px;
  background: repeating-linear-gradient(
    to right, #133020 0 6px, transparent 6px 12px);
}
.trailbar i {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: rgba(116, 255, 176, 0.26);
  border-right: 1px solid var(--grn);
  transition: width 0.6s ease-out;
}
.trailbar b {
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--white);
  transition: left 0.6s ease-out;
}
.trailbar span {
  position: absolute;
  right: 6px; top: 2px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--grn-mute);
}

/* --- buttons / choices -------------------------------------------------- */

button, .btn {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--grn);
  background: transparent;
  border: 2px solid var(--line);
  padding: 12px 14px;
  margin: 0 0 10px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s, transform 0.06s;
}
button:hover:not(:disabled), .btn:hover {
  background: var(--fill);
  border-color: var(--grn);
  color: var(--white);
}
button:active:not(:disabled) { transform: translate(1px, 1px); }
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}
button:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
button .n {
  color: var(--amber);
  margin-right: 10px;
}
button .lab { color: inherit; }
button .blurb {
  display: block;
  margin: 5px 0 0 28px;
  font-size: 14px;
  color: var(--grn-mute);
  letter-spacing: 0.02em;
}
button:hover:not(:disabled) .blurb { color: var(--grn-soft); }

.btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-row button {
  width: auto;
  flex: 1 1 auto;
  text-align: center;
  min-width: 160px;
}

button.primary {
  border-color: var(--grn);
  color: var(--white);
}
button.primary:hover { background: var(--grn); color: #04140a; }
button.danger { border-color: #b04040; color: var(--red); }
button.danger:hover { background: #7a2626; color: var(--white); }

/* --- team list ---------------------------------------------------------- */

.teams { display: grid; gap: 9px; }
.team {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 2px solid var(--line);
  padding: 11px 13px;
  cursor: pointer;
  background: transparent;
  color: var(--grn);
  font-family: var(--mono);
  text-align: left;
  width: 100%;
  margin: 0;
}
.team:hover:not(:disabled) { background: var(--grn-mute); border-color: var(--grn); }
.team .ab {
  color: var(--amber);
  font-size: 13px;
  letter-spacing: 0.08em;
}
.team .nm { font-size: 15.5px; color: var(--white); }
.team .mg { font-size: 13.5px; color: var(--grn-mute); display: block; }
.team .st {
  font-size: 11.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
}
.team:disabled { opacity: 1; cursor: not-allowed; border-style: dashed; }
.team:disabled .nm { color: var(--grn-mute); }
.team:disabled:hover { background: transparent; border-color: var(--grn-mute); }

/* --- board table -------------------------------------------------------- */

.board-scroll { overflow-x: auto; }
table.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 640px;
}
table.board th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grn-mute);
  border-bottom: 2px solid var(--line);
  padding: 6px 10px;
  font-weight: normal;
  white-space: nowrap;
}
table.board td {
  padding: 9px 10px;
  border-bottom: 1px solid #24593a;
  vertical-align: top;
}
table.board tr:hover td { background: #163a25; }
table.board .pk {
  font-size: 21px;
  color: var(--amber);
  width: 52px;
  white-space: nowrap;
}
table.board .tm { color: var(--white); font-size: 15.5px; }
table.board .mgr { color: var(--grn-mute); font-size: 13px; }
table.board .ft { font-size: 14px; }
table.board .num { color: var(--grn-soft); font-size: 13px; white-space: nowrap; }
table.board tr.r-dead .ft { color: var(--red); }
table.board tr.r-survived .ft { color: var(--grn); }
table.board tr.r-on-trail .ft { color: var(--amber); }
table.board tr.r-not-departed .ft { color: var(--grn-mute); }
table.board tr.top-pick { background: rgba(255, 207, 92, 0.09); }
table.board tr.top-pick .pk { color: var(--amber); text-shadow: 0 0 12px rgba(255,207,92,0.6); }

/* --- journal ------------------------------------------------------------ */

.journal { margin: 0; padding: 0; list-style: none; }
.journal li {
  border-left: 2px solid var(--line);
  padding: 0 0 16px 14px;
  margin: 0;
  position: relative;
}
.journal li:last-child { padding-bottom: 0; }
.journal li::before {
  content: "";
  position: absolute;
  left: -5px; top: 7px;
  width: 8px; height: 8px;
  background: var(--line-lit);
}
.journal li.died::before { background: var(--red); }
.journal .jh {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grn-mute);
  margin-bottom: 3px;
}
.journal .jc { color: var(--amber); font-size: 14px; margin-bottom: 4px; }
.journal .jt { color: var(--white); font-size: 15.5px; line-height: 1.7; }

/* --- misc --------------------------------------------------------------- */

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grn-mute);
}
.topbar a { color: var(--grn-soft); text-decoration: none; border-bottom: 1px dotted var(--grn-mute); }
.topbar a:hover { color: var(--grn); }

.blink { animation: blink 1.1s steps(2) infinite; }
.err {
  border: 2px solid var(--red);
  color: var(--red);
  padding: 10px 13px;
  margin-bottom: 16px;
  font-size: 14.5px;
}
.center { text-align: center; }
.mt { margin-top: 20px; }
.legend {
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--grn-mute);
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.9;
}

.dead-frame { border-color: #b04040; box-shadow: 0 0 26px rgba(255, 112, 112, 0.10) inset; }
.dead-frame pre.art { color: #ffa0a0; }
.dead-frame .panel-title { color: var(--red); }
.win-frame { border-color: var(--amber); box-shadow: 0 0 30px rgba(255,207,92,0.10) inset; }
.win-frame pre.art { color: var(--amber); }

@media (max-width: 560px) {
  body { padding: 14px 10px 48px; }
  .panel { padding: 16px 14px; }
  .team { grid-template-columns: 46px 1fr; }
  .team .st { grid-column: 1 / -1; text-align: left; }
  .stat .v { font-size: 16px; }
}

/* --- PIN entry ----------------------------------------------------------- */

.pinbox {
  border: 2px solid var(--line);
  background: #112a1c;
  padding: 14px 16px 12px;
  margin: 20px 0 4px;
}
.pinbox label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--grn-soft);
  margin-bottom: 9px;
}
.pinbox input {
  display: block;
  width: 100%;
  max-width: 280px;
  font-family: var(--mono);
  font-size: 28px;
  letter-spacing: 0.42em;
  text-align: center;
  color: var(--white);
  background: #0d2415;
  border: 2px solid var(--line-lit);
  padding: 8px 10px 8px 16px;
  caret-color: var(--grn);
}
.pinbox input::placeholder { color: var(--grn-mute); letter-spacing: 0.42em; }
.pinbox input:focus {
  outline: none;
  border-color: var(--grn);
  box-shadow: 0 0 18px rgba(92, 255, 160, 0.22);
}
.pinbox input.bad {
  border-color: var(--red);
  animation: shake 0.32s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}
.pinhint {
  font-size: 13px;
  color: var(--grn-mute);
  margin: 9px 0 0;
  line-height: 1.5;
}