@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,400..900;1,62..125,400..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  --steel: #14181b;
  --panel: #1e2429;
  --panel-hi: #242c32;
  --edge: #353d42;
  --alum: #e6ebee;
  --muted: #b9c5cc;
  --hivis: #d6ff3d;
  --orange: #ff8548;
  --ink: #12160f;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--steel); overflow-x: hidden; }

body {
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--alum);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 4rem;
}

/* Truck-livery lettering: Archivo pushed wide, the way a decal is cut. */
.decal {
  font-variation-settings: "wdth" 122, "wght" 800;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.92;
}

.decal-thin {
  font-variation-settings: "wdth" 118, "wght" 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mono, input, select, textarea, button {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .wrap { padding: 0 2rem; } }

.hatch {
  background-image: repeating-linear-gradient(-45deg, rgba(214,255,61,0.14) 0 8px, transparent 8px 18px);
}

.exempt { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.exempt p { font-size: 13px; margin: 0; }
.exempt label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
@media (min-width: 720px) { .exempt label { margin-left: auto; } }
.exempt input { width: auto; accent-color: var(--hivis); flex: none; }

/* ---------------------------------------------------------------- header */
header.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--edge);
  background: rgba(20,24,27,0.93);
  backdrop-filter: blur(8px);
}

.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  min-width: 0;
}

.bar-row > * { min-width: 0; }

.brand { font-size: 18px; margin: 0; margin-right: auto; }
@media (min-width: 640px) { .brand { font-size: 20px; } }
.brand em { font-style: normal; color: var(--hivis); }

.lamp-row { display: flex; align-items: center; gap: 0.5rem; }
.lamp { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.lamp.on { background: var(--hivis); animation: lamp 2.4s ease-in-out infinite; }
.lamp.lunch { background: var(--orange); }
.clock { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

@keyframes lamp {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214,255,61,0.55); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(214,255,61,0); }
}

/* ---------------------------------------------------------------- buttons */
button { cursor: pointer; border: 0; background: none; color: inherit; }
button:disabled { cursor: not-allowed; }

.btn {
  border-radius: 3px;
  padding: 0.55rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: all 0.15s;
}
.btn-hivis { background: var(--hivis); color: var(--ink); }
.btn-hivis:hover { filter: brightness(1.1); }
.btn-orange { background: var(--orange); color: #17110d; }
.btn-orange:hover { filter: brightness(1.1); }
.btn-ghost { border: 1px solid var(--edge); color: var(--alum); }
.btn-ghost:hover { border-color: var(--hivis); color: var(--hivis); }

.chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 0.4rem 0.5rem;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: all 0.15s;
}
.chip:hover { border-color: var(--hivis); color: var(--hivis); }
.chip.admin { border-color: var(--orange); color: var(--orange); }
.chip.admin:hover { background: #2a1c14; }

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: var(--hivis);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  flex: none;
}
.badge.orange { background: var(--orange); color: #17110d; }

:focus-visible { outline: 2px solid var(--hivis); outline-offset: 2px; }

/* ---------------------------------------------------------------- panels */
.panel {
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--panel);
  padding: 1rem;
}
.panel.pad { padding: 1.25rem; }
.panel.hivis { border-color: var(--hivis); }
.panel.orange { border: 2px solid var(--orange); }

.grid-main { display: grid; gap: 1rem; padding-top: 1.5rem; }
@media (min-width: 1200px) {
  .grid-main { grid-template-columns: minmax(0,1fr) 380px; align-items: start; }
  .side { position: sticky; top: 76px; }
}
.stack { display: grid; gap: 1rem; align-content: start; }

/* ---------------------------------------------------------------- split-flap */
.flaps { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.flap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #101417 0 49.6%, #0a0d0f 49.6% 50.4%, #171d21 50.4% 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.6);
  border-radius: 3px;
  color: var(--hivis);
  font-variation-settings: "wdth" 122, "wght" 800;
  text-transform: uppercase;
}
.flap.flip { animation: flip 180ms ease-out; }
.flap.gap { background: none; box-shadow: none; }

@keyframes flip {
  0% { transform: perspective(220px) rotateX(-58deg); filter: brightness(1.55); }
  100% { transform: perspective(220px) rotateX(0deg); filter: brightness(1); }
}

.word-meta { display: grid; gap: 1.25rem; border-top: 1px solid var(--edge); margin-top: 1.25rem; padding-top: 1.25rem; }
@media (min-width: 768px) { .word-meta { grid-template-columns: 1fr 1fr; } }
.word-meta p.body { font-size: 16px; line-height: 1.6; margin: 0.25rem 0 0; }
.word-meta p.say { color: var(--hivis); font-style: italic; }

.slots { display: flex; gap: 0.375rem; align-items: center; }
.slot {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 3px;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600;
}
.slot.filled { background: var(--hivis); color: var(--ink); animation: stamp 260ms cubic-bezier(0.2,0.8,0.2,1); }
.slot.open { border: 1px dashed var(--edge); color: var(--muted); }

@keyframes stamp {
  0% { transform: scale(2.1) rotate(-8deg); opacity: 0; }
  60% { transform: scale(0.94) rotate(1deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------- roster */
.roster { display: grid; gap: 0.5rem; }
@media (min-width: 900px) { .roster { grid-template-columns: 1fr 1fr; } }

.tile { border: 1px solid var(--edge); border-radius: 6px; background: var(--panel); padding: 0.75rem; }
.tile.me { border-color: var(--hivis); }
.tile-top { display: flex; align-items: center; gap: 0.75rem; }
.avatar {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 3px; flex: none;
  background: #0e1214; color: var(--hivis);
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600;
}
.tile-name { flex: 1; min-width: 0; }
.tile-name b { display: block; font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-score { font-size: 26px; flex: none; }
.pos { color: var(--hivis); }
.neg { color: var(--orange); }
.zero { color: var(--muted); }
.tile-actions { display: flex; gap: 0.375rem; margin-top: 0.75rem; }
.tile-actions .btn { flex: 1; padding: 0.5rem 0.25rem; letter-spacing: 0.04em; }

.btn-bad { border: 1px solid #5a3420; background: #2a1c14; color: var(--orange); }
.btn-bad:hover:enabled { background: var(--orange); color: #17110d; }
.btn-good { border: 1px solid #3d4a20; background: #1e2418; color: var(--hivis); }
.btn-good:hover:enabled { background: var(--hivis); color: var(--ink); }
.btn-best { border: 1px solid var(--hivis); background: var(--hivis); color: var(--ink); }
.btn-best:hover:enabled { filter: brightness(1.1); }
.tile-actions .btn:disabled { border-color: var(--edge); background: none; color: #7e8a92; }

.pop { animation: pop 320ms cubic-bezier(0.2,0.9,0.3,1.4); }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* ---------------------------------------------------------------- punch card */
.big { font-size: 64px; line-height: 1; color: var(--hivis); }
.punches { display: flex; gap: 0.375rem; }
.punch {
  flex: 1; height: 36px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: 12px; font-weight: 600;
}
.punch.used { background: var(--hivis); color: var(--ink); animation: stamp 260ms cubic-bezier(0.2,0.8,0.2,1); }
.punch.free { border: 1px dashed var(--edge); color: var(--muted); }

.note { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0.5rem 0 0; }

/* ---------------------------------------------------------------- lists */
ol.standings, ul.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
ol.standings li, ul.log li {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.5rem; border-radius: 3px;
}
ol.standings li.me { background: var(--panel-hi); }
ul.log li:hover { background: var(--panel-hi); }
.rank { width: 20px; flex: none; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.val { flex: none; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
ul.log { max-height: 320px; overflow-y: auto; }
ul.log .val { width: 32px; font-size: 13px; }
ul.log .when { flex: none; font-size: 12px; color: var(--muted); }
.undo { flex: none; width: 22px; border-radius: 3px; color: #7e8a92; font-size: 13px; }
.undo:hover { background: var(--orange); color: #17110d; }

/* ---------------------------------------------------------------- forms */
label.field { display: block; }
input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: #0e1214;
  color: var(--alum);
  padding: 0.5rem;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus { border-color: var(--hivis); outline: none; }

.tabs { display: flex; overflow: hidden; border: 1px solid var(--edge); border-radius: 3px; }
.tabs button { padding: 0.25rem 0.625rem; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.tabs button:hover { color: var(--alum); }
.tabs button[aria-selected="true"] { background: var(--orange); color: #17110d; }
.tabs.hivis button[aria-selected="true"] { background: var(--hivis); color: var(--ink); }

.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.two { display: grid; gap: 0.75rem; }
@media (min-width: 600px) { .two { grid-template-columns: 1fr 1fr; } }

.flash { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--hivis); margin: 1rem 0 0; }
.err { color: var(--orange); }

.banner { border-top: 1px solid #5a3420; background: #2a1c14; }
.banner p { margin: 0; padding: 0.5rem 0; font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--orange); }

/* ---------------------------------------------------------------- gate */
.gate { min-height: 100vh; display: flex; align-items: center; }
.gate h1 { margin: 1rem 0 0; font-size: clamp(48px, 13vw, 76px); }
.gate h1 em { font-style: normal; color: var(--hivis); }
.gate p.lede { font-size: 17px; line-height: 1.6; color: #c5d3db; max-width: 34rem; }
.pick { display: grid; gap: 0.5rem; margin-top: 2rem; }
@media (min-width: 640px) { .pick { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .pick { grid-template-columns: repeat(3, 1fr); } }
.pick button {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--edge); border-radius: 6px; background: var(--panel);
  padding: 0.75rem; text-align: left; transition: all 0.15s;
}
.pick button:hover { border-color: var(--hivis); background: var(--panel-hi); }
.pick .avatar { width: 36px; height: 36px; }
.pick span.nm { font-family: "Archivo", sans-serif; font-size: 16px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.setup { max-width: 40rem; }
.setup code { background: #0e1214; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 13px; color: var(--hivis); }
.setup ol { line-height: 1.8; padding-left: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .flap.flip, .lamp.on, .pop, .punch.used, .slot.filled { animation: none !important; }
}