/* ════════════════════════════════════════════════════════════════════
   teams-v5.css — V5 · THE GROUP DRAW BOARD
   Green CRT scoreboard aesthetic. Twelve group panels A–L + an A–Z view.
   Mobile-first: single-column stack, panels widen into a multi-column board
   on larger screens. All styles prefixed .v5- so it can be merged later.
   Reuses tokens.css vars + global.css chrome (.top-marquee/.nav-bar/
   .site-wrapper/.section-panel). Adds only what the board needs.
   ════════════════════════════════════════════════════════════════════ */

/* CRT scoreboard green — derived from the existing green accent, kept local */
.v5-board,
.v5-azboard {
  --v5-crt:       #00cc44;          /* live LED green */
  --v5-crt-dim:   #0a7a2e;          /* dimmed LED */
  --v5-crt-glow:  rgba(0, 204, 68, 0.45);
  --v5-screen:    #03150a;          /* dark CRT panel bg */
  --v5-screen-2:  #061f0f;
}

/* ── HEADER / TITLE ── */
.v5-board-head { margin-bottom: 1rem; text-align: center; }

.v5-head-led {
  display: inline-block;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: #00cc44;
  background: #03150a;
  border: 2px solid #0a7a2e;
  padding: 6px 12px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0, 204, 68, 0.6);
  margin-bottom: 0.85rem;
}

.v5-head-title {
  font-family: var(--font-chrome);
  font-size: var(--fs-title);
  color: var(--c-yellow);
  text-shadow: 2px 2px 0 var(--c-orange);
  line-height: 1.35;
  margin-bottom: 0.9rem;
}

.v5-head-sub {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-gray1);
  line-height: 1.25;
  max-width: 60ch;
  margin: 0 auto 1.1rem;
}

/* ── CONTROLS: toggle + filter ── */
.v5-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  max-width: 420px;
  margin: 0 auto;
}

.v5-filter {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--c-sky);
  background: var(--c-navy);
}
.v5-filter-label {
  display: flex;
  align-items: center;
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  background: var(--c-yellow);
  padding: 0 12px;
  letter-spacing: 1px;
}
#v5-filter-input {
  flex: 1;
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-white);
  background: var(--c-navy);
  border: none;
  outline: none;
  padding: 10px 12px;
  min-height: 44px;
}
#v5-filter-input::placeholder { color: var(--c-gray3); }
/* Hide the browser-native search clear (×) — it's a tiny tap target. We render
   our own larger clear button (.v5-filter-clear) shown by JS when there's text. */
#v5-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.v5-filter-clear {
  flex: 0 0 auto;
  width: 48px;
  align-self: stretch;        /* full input height → big tap target */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--c-navy);
  background: var(--c-sky);
  border: none;
  cursor: pointer;
}
.v5-filter-clear:hover,
.v5-filter-clear:focus-visible { background: var(--c-yellow); outline: none; }
.v5-filter-clear[hidden] { display: none; }

.v5-readout {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: #00cc44;
  text-shadow: 0 0 6px rgba(0, 204, 68, 0.4);
  margin-top: 0.9rem;
  letter-spacing: 0.5px;
}

/* ── THE BOARD (group view) ──
   Mobile-first: one column. Each group is a compact CRT card. */
.v5-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.v5-group-panel {
  background: var(--v5-screen);
  border: 3px solid var(--v5-crt-dim);
  box-shadow: 4px 4px 0 var(--c-navy), inset 0 0 22px rgba(0, 204, 68, 0.06);
  overflow: hidden;
}

.v5-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(180deg, #07351a 0%, #041e0e 100%);
  border-bottom: 2px solid var(--v5-crt-dim);
  padding: 8px 10px;
}

.v5-group-led {
  font-family: var(--font-chrome);
  font-size: var(--fs-lg);
  color: var(--v5-screen);
  background: var(--v5-crt);
  box-shadow: 0 0 10px var(--v5-crt-glow);
  padding: 4px 12px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.v5-group-label {
  font-family: var(--font-chrome);
  font-size: var(--fs-xs);
  color: var(--v5-crt);
  text-shadow: 0 0 6px rgba(0, 204, 68, 0.4);
  letter-spacing: 1px;
}

.v5-group-count {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--c-gray1);
  letter-spacing: 1px;
  white-space: nowrap;
}
.v5-group-count .v5-cup { color: var(--c-yellow); margin-left: 2px; }

/* ── ROSTER ROWS ── */
.v5-roster,
.v5-azlist {
  list-style: none;
}

.v5-row { display: block; }

.v5-row + .v5-row { border-top: 1px dashed rgba(0, 204, 68, 0.22); }

.v5-row-link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 9px 10px;
  min-height: 52px;             /* generous tap target */
  text-decoration: none;
  color: var(--c-white);
  transition: background 0.1s;
}
.v5-row-link:hover,
.v5-row-link:focus-visible {
  background: rgba(0, 204, 68, 0.12);
  outline: none;
}
.v5-row-link:focus-visible { box-shadow: inset 0 0 0 2px var(--v5-crt); }

.v5-flag {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.v5-flag .flag-pixel {
  width: 40px;
  height: 27px;
  border: 2px solid var(--c-gray3);
  box-shadow: 2px 2px 0 var(--c-navy);
  image-rendering: pixelated;
}

.v5-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;                 /* allow long names to ellipsis */
}

.v5-row-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--c-white);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v5-row-link:hover .v5-row-name { color: var(--c-yellow); }

.v5-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
}
.v5-code {
  color: var(--v5-crt);
  border: 1px solid var(--v5-crt-dim);
  padding: 0 4px;
  letter-spacing: 1px;
}
.v5-conf { color: var(--c-sky); letter-spacing: 1px; }
.v5-azgroup {
  color: var(--c-navy);
  background: var(--c-gold);
  padding: 0 5px;
  letter-spacing: 1px;
}

/* ── STATS COLUMN ── */
.v5-row-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
  text-align: right;
}

.v5-stars {
  color: var(--c-yellow);
  font-size: var(--fs-sm);
  text-shadow: 0 0 6px rgba(245, 200, 0, 0.5);
  letter-spacing: 1px;
}
.v5-nostar { color: var(--c-gray3); font-size: var(--fs-sm); }

.v5-stat-apps {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
.v5-apps-num {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--v5-crt);
  text-shadow: 0 0 6px rgba(0, 204, 68, 0.4);
  line-height: 1;
}
.v5-apps-cap {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-gray2);
  letter-spacing: 1px;
}

/* ── A–Z VIEW ── */
.v5-azboard {
  background: var(--v5-screen);
  box-shadow: 4px 4px 0 var(--c-navy), inset 0 0 22px rgba(0, 204, 68, 0.06);
  padding: 0.4rem 0.6rem;
}
.v5-azlist { display: block; }

/* ── VIEW SWITCHING ── */
.v5-view { display: none; }
.v5-view.is-active { display: block; }

/* ── NO RESULTS ── */
.v5-noresults {
  font-family: var(--font-vt);
  font-size: var(--fs-lg);
  color: var(--c-orange);
  text-align: center;
  padding: 1.4rem;
  border: 2px dashed var(--c-orange);
  margin-top: 0.85rem;
  letter-spacing: 0.5px;
}

/* ── LEGEND ── */
.v5-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
  margin-top: 1rem;
  text-align: center;
}
.v5-legend-item {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-gray1);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── FOOTER ── */
.v5-footer {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--c-gray2);
  text-align: center;
  letter-spacing: 1px;
  padding: 1.2rem 0.5rem 2rem;
  margin-top: 1rem;
  border-top: 2px solid var(--c-midblue);
  line-height: 1.8;
}
.v5-footer-blink {
  color: var(--v5-crt);
  animation: v5-blink 1.1s step-end infinite;
}
@keyframes v5-blink { 50% { opacity: 0; } }

.v5-nav-current {
  background: var(--c-yellow) !important;
  color: var(--c-navy) !important;
  border-color: var(--c-navy) var(--c-gold) var(--c-gold) var(--c-navy) !important;
}

/* ════════════════ RESPONSIVE: widen the board on bigger screens ════════════════
   Mobile (default) = single column stack. As width grows, the 12 group panels
   flow into 2 then 3 columns; the A–Z list also goes multi-column.            */

@media (min-width: 560px) {
  .v5-board { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 920px) {
  .v5-board { grid-template-columns: repeat(3, 1fr); }
  .v5-flag .flag-pixel { width: 44px; height: 30px; }
}

@media (min-width: 1100px) {
  .v5-board { grid-template-columns: repeat(4, 1fr); }
}

/* Very small phones: keep the app-count caption from crowding the name */
@media (max-width: 360px) {
  .v5-row-link { gap: 0.5rem; padding: 8px 7px; }
  .v5-apps-cap { display: none; }   /* the green number alone still reads */
}

@media (prefers-reduced-motion: reduce) {
  .v5-footer-blink { animation: none; }
}