/* nullbyte/css/wall.css
 *
 * WALL OF LEGENDS -- multi-season Fame/Shame memorial.
 * Uses the theme variables from styles.css (:root). Fame rows carry an
 * amber honor edge + faint glow; shame rows a red edge, dimmed text and
 * a blinking RAT tag (spec SEASON0 s.5 "rotta"-highlight).
 */

.wall-wrap {
  max-width: 640px;
  margin: 0 auto;
}

/* ---- header ---------------------------------------------------------- */

.wall-header {
  text-align: center;
}

.wall-title {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 4px;
  color: var(--fg-bright);
  text-shadow: 0 0 12px var(--fg-dim);
}

.wall-sub {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--fg-dim);
}

/* ---- season filter dropdown ------------------------------------------ */

.wall-tabs {
  display: flex;
  margin-bottom: 12px;
}

/* Single <select> instead of a button row -- stays one fixed-width control
 * no matter how many seasons exist. Styled to match the terminal theme
 * (the native arrow is kept for accessibility; we just theme the box). */
.wall-season-select {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  min-width: 160px;
  color: var(--fg-bright);
  background: var(--bg-soft);
  border: 1px solid var(--cyan);
  border-radius: 0;
  cursor: pointer;
  outline: none;
}

.wall-season-select:focus {
  box-shadow: 0 0 8px var(--cyan);
}

.wall-season-select option {
  background: var(--bg);
  color: var(--fg-bright);
}

/* ---- side panels ------------------------------------------------------ */

.wall-panel-fame {
  border-top: 1px solid var(--amber);
}

.wall-panel-shame {
  border-top: 1px solid var(--red);
}

.wall-count {
  color: var(--fg-faint);
  letter-spacing: 1px;
  margin-left: auto;
  text-transform: none;
}

.wall-side-desc {
  font-size: 11px;
  color: var(--fg-dim);
  margin: -4px 0 10px 0;
  letter-spacing: 0.5px;
}

/* ---- rows -------------------------------------------------------------- */

.wall-row {
  padding: 8px 10px;
  margin-bottom: 6px;
  background: var(--bg-soft);
  border-left: 2px solid transparent;
  font-family: var(--font-mono);
}

.wall-row.fame {
  border-left-color: var(--amber);
  box-shadow: inset 0 0 18px rgba(255, 184, 77, 0.05);
}

.wall-row.shame {
  border-left-color: var(--red);
  opacity: 0.85;
}

/* Self-highlight: same cyan tint as the leaderboard "is me" row. */
.wall-row.me {
  background: rgba(0, 255, 255, 0.08);
}

.wall-row-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.wall-handle {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--fg-bright);
}

.wall-row.shame .wall-handle {
  color: var(--fg);
}

.wall-op-title {
  font-size: 10px;
  color: var(--magenta);
  letter-spacing: 0.5px;
}

.wall-crew {
  font-size: 10px;
  color: var(--cyan);
  letter-spacing: 0.5px;
}

.wall-alliance {
  font-size: 10px;
  color: var(--fg-dim);
  letter-spacing: 0.5px;
}

.wall-date {
  margin-left: auto;
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 1px;
  white-space: nowrap;
}

.wall-stats {
  margin-top: 3px;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.3px;
}

.wall-row.fame .wall-stats {
  color: var(--fg);
}

/* ---- the RAT tag ------------------------------------------------------- */

.wall-rat {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--bg);
  background: var(--red);
  padding: 1px 6px;
  animation: wall-rat-blink 1.6s steps(2, start) infinite;
}

@keyframes wall-rat-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.45; }
  100% { opacity: 1; }
}

/* ---- states ------------------------------------------------------------ */

.wall-loading,
.wall-empty {
  text-align: center;
  padding: 24px;
  color: var(--fg-dim);
  font-size: 12px;
}

.wall-more {
  text-align: center;
  padding: 8px;
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 1px;
}

/* ---- narrow screens ----------------------------------------------------- */

@media (max-width: 480px) {
  .wall-title { font-size: 24px; letter-spacing: 2px; }
  .wall-date { margin-left: 0; width: 100%; }
}

/* ======================================================================
   TERMINAL MASTERS -- duel leaderboard (added 2026-08).
   Lives in wall.js's TM view. Reuses .panel / .wall-handle / .wall-count /
   .wall-empty / .panel-title / .wall-side-desc / .wall-date from above.
   Only TM-specific classes are defined here.
   ====================================================================== */

/* ---- top-level view switch (LEGENDS | TERMINAL MASTERS) --------------- */
.wall-viewswitch {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.wall-vbtn {
  flex: 1;
  font-family: var(--font-display, var(--font-mono));
  font-size: 15px;
  letter-spacing: 2px;
  padding: 8px 10px;
  color: var(--fg-dim);
  background: var(--bg-soft, var(--bg));
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.wall-vbtn:hover { color: var(--fg-bright, var(--fg)); }
.wall-vbtn.active {
  color: var(--bg);
  background: var(--cyan);
  border-color: var(--cyan);
}

/* ---- TM sort bar ----------------------------------------------------- */
.tm-sortbar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tm-sortbtn {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 4px 10px;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.tm-sortbtn:hover { color: var(--fg); border-color: var(--border-bright, var(--fg-dim)); }
.tm-sortbtn.active {
  color: var(--amber);
  border-color: var(--amber);
}

/* ---- TM ranking rows ------------------------------------------------- */
.tm-panel-rank { margin-top: 10px; }
.tm-panel-recent { margin-top: 14px; }

.tm-row {
  padding: 8px 10px;
  border-left: 2px solid var(--cyan);
  background: var(--bg-soft, transparent);
  margin-bottom: 4px;
}
.tm-row.me {
  border-left-color: var(--amber);
  background: var(--bg-elev, var(--bg-soft));
}
.tm-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tm-rank {
  font-family: var(--font-display, var(--font-mono));
  font-size: 14px;
  font-weight: bold;
  color: var(--cyan);
  min-width: 34px;
}
.tm-row.me .tm-rank { color: var(--amber); }
.tm-wl {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 1px;
}
.tm-streak {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--amber);
  padding: 1px 6px;
}
.tm-won {
  margin-top: 3px;
  font-size: 11px;
  color: var(--nlc-accent-bright, var(--fg));
  letter-spacing: .5px;
}

/* ---- TM recent feed -------------------------------------------------- */
.tm-recent {
  padding: 6px 10px;
  border-left: 2px solid var(--border);
  margin-bottom: 3px;
}
.tm-recent.me { border-left-color: var(--amber); }
.tm-recent-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tm-mode {
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--magenta);
  padding: 1px 6px;
}
.tm-opp {
  font-size: 10px;
  color: var(--fg-dim);
}

/* ---- narrow screens -------------------------------------------------- */
@media (max-width: 480px) {
  .wall-vbtn { font-size: 12px; letter-spacing: 1px; }
  .tm-rank { min-width: 28px; font-size: 12px; }
}
/* ============================================================
   EARLY ADOPTER -- collector badge roll (#0-#127)
   ============================================================ */
.early-count {
  padding: 8px 10px; margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--bg-dim);
  font-size: 12px; color: var(--fg-dim); text-align: center;
}

.early-roll { display: flex; flex-direction: column; }

.early-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.early-row:last-child { border-bottom: none; }

/* Fixed-width number column so 128 rows read as a single aligned roll
   rather than a ragged list. */
.early-num {
  flex: 0 0 52px; color: var(--fg-dim); font-size: 12px;
}
.early-who {
  flex: 1 1 auto; min-width: 0; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.early-when { flex: 0 0 auto; color: var(--fg-dim); font-size: 12px; }

/* Unclaimed slots stay visible but recede -- the gap is part of the record. */
.early-row.is-open { opacity: 0.4; }
.early-row.is-open .early-who { color: var(--fg-dim); }

.early-row.is-me { background: rgba(77,226,255,0.07); }
.early-row.is-me .early-num,
.early-row.is-me .early-who { color: var(--cyan); }

@media (max-width: 420px) {
  .early-row { font-size: 12px; gap: 8px; }
  .early-num { flex-basis: 44px; }
}

/* ============================================================
   DATA CENTERS -- per-machine board
   ============================================================ */
.dcb-roll { display: flex; flex-direction: column; }

.dcb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
}
.dcb-row:last-child { border-bottom: none; }
.dcb-row.is-me { background: rgba(77,226,255,0.07); }

.dcb-rank {
  flex: 0 0 30px; text-align: right;
  color: var(--fg-dim); font-size: 13px;
}

/* min-width:0 lets the nickname ellipsis actually kick in inside a flex row */
.dcb-main { flex: 1 1 auto; min-width: 0; }
.dcb-top { display: flex; align-items: baseline; gap: 8px; }
.dcb-nick {
  color: var(--fg); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dcb-owner { color: var(--fg-dim); font-size: 12px; flex: 0 0 auto; }
.dcb-specs { margin-top: 3px; color: var(--fg-dim); font-size: 11px; }
.dcb-deg { color: var(--red); }

.dcb-hp { flex: 0 0 auto; text-align: right; }
.dcb-hp-num { color: var(--cyan); font-size: 15px; font-weight: 600; }
.dcb-hp-sub { color: var(--fg-dim); font-size: 10px; margin-top: 2px; }

/* Narrow: the owner tag drops under the nickname and the whole row stays
   readable instead of the hashpower column squeezing the name to nothing. */
@media (max-width: 460px) {
  .dcb-top { flex-direction: column; gap: 1px; }
  .dcb-nick { font-size: 13px; }
  .dcb-hp-num { font-size: 14px; }
}

/* Seized Rigs -- memorial under the living racks in the same view */
.dcb-seized-head {
  margin: 22px 0 4px; padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--red); font-size: 13px;
}
.dcb-seized-sub {
  margin-bottom: 8px; color: var(--fg-dim); font-size: 11px; line-height: 1.5;
}
/* Dimmed as a block: these racks no longer exist, so they should read as
   history next to the live ranking above. */
.dcb-seized .dcb-row { opacity: 0.55; }
.dcb-seized .dcb-nick { color: var(--fg-dim); text-decoration: line-through; }
.dcb-x { color: var(--red); }

/* ============================================================
   EVENT WINNERS -- awarded events, newest first (js/modes/wall.js)
   ============================================================ */
.evw-event {
  margin-bottom: 12px;
  border: 1px solid var(--border); background: var(--bg-dim);
}
.evw-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px 2px;
}
.evw-title { color: var(--fg); font-size: 14px; overflow-wrap: anywhere; }
.evw-date { flex: 0 0 auto; color: var(--fg-dim); font-size: 12px; }
.evw-meta { padding: 0 10px 6px; color: var(--fg-dim); font-size: 11px; letter-spacing: 1px; }
.evw-roll { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.evw-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.evw-row:last-child { border-bottom: none; }
.evw-rank { flex: 0 0 40px; color: var(--fg-dim); font-size: 12px; }
.evw-who {
  flex: 0 1 40%; min-width: 0; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evw-who i { color: var(--fg-dim); font-style: normal; }
.evw-prize { flex: 1 1 auto; min-width: 0; text-align: right; color: var(--fg); font-size: 12px; }
.evw-owned { color: var(--fg-dim); }
.evw-row.is-top .evw-rank { color: var(--amber, #ffd21f); }
.evw-row.is-me { background: rgba(77,226,255,0.07); }
.evw-row.is-me .evw-rank,
.evw-row.is-me .evw-who { color: var(--cyan); }
.evw-more { padding: 6px 10px; color: var(--fg-dim); font-size: 12px; text-align: center; }

@media (max-width: 420px) {
  .evw-row { flex-wrap: wrap; font-size: 12px; gap: 6px; }
  .evw-rank { flex-basis: 32px; }
  .evw-prize { flex-basis: 100%; text-align: left; padding-left: 38px; }
}