/* america.cool — Democramania repivot
 * Voting-led homepage, sports-broadcast / championship-belt spectacle.
 * All within REV1: navy + red + white. No accent colors.
 */

/* ============================================================ SCOREBOARD STRIP
 * Sports-broadcast TICKER feel for live tally + match metadata.
 * Replaces marquee on voting-led pages.
 */
.scoreboard {
  background: var(--ink-navy);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1fr;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 4px solid var(--ink-red);
  border-bottom: 4px solid var(--ink-red);
}
@media (min-width: 720px) {
  .scoreboard { grid-template-columns: auto 1fr auto; }
}
.scoreboard__lamp {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink-red);
  padding: 0.6rem 1rem;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
}
.scoreboard__lamp::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  background: var(--paper);
  border-radius: 50%;
  animation: lamp-pulse 1.5s ease-in-out infinite;
}
@keyframes lamp-pulse { 50% { opacity: 0.25; } }

.scoreboard__cells {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
}
.scoreboard__cell {
  padding: 0.4rem 1rem;
  border-left: 1px solid rgba(255,255,255,0.2);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  min-width: 0;
}
.scoreboard__cell:first-child { border-left: 0; }
.scoreboard__cell .l {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.7);
}
.scoreboard__cell .v {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.scoreboard__cell .v.is-red { color: var(--ink-red); background: var(--paper); padding: 0 0.35rem; }

.scoreboard__ticker {
  background: var(--paper);
  color: var(--ink-navy);
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  overflow: hidden;
  white-space: nowrap;
}
.scoreboard__ticker-track {
  display: inline-flex;
  gap: 1.5rem;
  animation: ticker-roll 32s linear infinite;
}
.scoreboard__ticker-track .sep { color: var(--ink-red); }
@keyframes ticker-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .scoreboard__ticker-track { animation: none; }
}

/* ============================================================ MAIN EVENT HERO
 * Championship-belt frame for the current top artifact under vote.
 * Big plaque, brick rivets, navy field, white core.
 */
.main-event {
  margin: 0 auto;
  max-width: 64rem;
  padding: 2rem var(--gutter) 0;
}
.belt {
  position: relative;
  background: var(--ink-navy);
  border: 6px solid var(--ink-red);
  padding: 1.25rem;
  box-shadow: 0.5rem 0.5rem 0 var(--ink-red);
}
.belt::before, .belt::after {
  /* champion-belt rivets along top + bottom edges */
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background-image: radial-gradient(circle, var(--ink-red) 3px, transparent 4px);
  background-size: 28px 14px;
  background-repeat: repeat-x;
  background-position: center;
  pointer-events: none;
}
.belt::before { top: -16px; }
.belt::after  { bottom: -16px; }

.belt__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed rgba(255,255,255,0.3);
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper);
}
.belt__head .label { color: var(--ink-red); background: var(--paper); padding: 0.1rem 0.6rem; }
.belt__head .id { font-family: var(--font-mono); letter-spacing: 0.08em; color: rgba(255,255,255,0.7); }

.belt__plaque {
  background: var(--paper);
  padding: 1.5rem 1.25rem;
  display: grid;
  gap: 1rem;
}
.belt__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-navy);
  text-wrap: balance;
}
.belt__dek {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0;
  color: var(--ink-navy);
}

/* tally bar — the live cool/lame split as a horizontal divided bar */
.tally {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr);
  gap: 4px;
  margin: 0.5rem 0 0;
}
.tally__half {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-mono);
  font-weight: 700;
}
.tally__half--cool { background: var(--ink-red); color: var(--paper); }
.tally__half--not  { background: var(--ink-navy); color: var(--paper); }
.tally__half .l {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}
.tally__half .v {
  font-size: 1.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.tally__bar {
  grid-column: 1 / -1;
  height: 0.5rem;
  background: var(--ink-navy);
  position: relative;
  overflow: hidden;
}
.tally__bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--ink-red);
}

/* vote actions sized big inside the belt */
.belt__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.belt__actions .cru-btn { padding: 1.4rem 1rem; font-size: 1.85rem; }

.belt__sub {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-navy);
  opacity: 0.85;
}
.belt__sub a { color: var(--ink-red); text-decoration: none; border-bottom: 1px solid var(--ink-red); }

/* ============================================================ COOL SCORE
 * The voter's cumulative reputation card. Public-shareable.
 * Tiers: Cub (0-100), Voter (100-500), Cultural Arbiter (500-2000), Founding Member (2000+).
 */
.coolscore {
  border: 4px solid var(--ink-navy);
  background: var(--paper);
  padding: 1.25rem 1.25rem 1rem;
  position: relative;
  display: grid;
  gap: 0.75rem;
}
.coolscore--banner {
  /* signed-in homepage banner variant — wider, single row */
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
}
.coolscore--panel {
  /* result-page panel variant — square block matching SovereignCard */
}
.coolscore__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-pixel);
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-navy);
  border-bottom: 1px dashed var(--ink-navy);
  padding-bottom: 0.5rem;
}
.coolscore__head .id { color: var(--ink-red); }
.coolscore__num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 1;
  color: var(--ink-red);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.coolscore--banner .coolscore__num { font-size: clamp(2.25rem, 5vw, 3rem); }
.coolscore__label {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-navy);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.coolscore__label .rank { color: var(--ink-red); font-size: 1.15rem; }
.coolscore__rule {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.6em;
  color: var(--ink-red);
  text-align: center;
  margin: 0;
}
.coolscore__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  font-family: var(--font-pixel);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-navy);
}
.coolscore__meta dt { color: var(--ink-red); margin-bottom: 0.1rem; }
.coolscore__meta dd { margin: 0; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; }
.coolscore__progress {
  height: 0.5rem;
  background: var(--ink-navy);
  position: relative;
  overflow: hidden;
}
.coolscore__progress-fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--ink-red);
}

/* ============================================================ TWEET STRIP
 * Compressed cast-tweet feed for daily-rhythm voice content.
 */
.tweets {
  border-top: 4px solid var(--ink-navy);
  padding-top: 2rem;
  margin-top: 4rem;
}
.tweets__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.5rem;
}
.tweets__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.tweets__head .live {
  font-family: var(--font-pixel);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-red);
}
.tweets__list {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 720px)  { .tweets__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .tweets__list { grid-template-columns: repeat(3, 1fr); } }

.tweet {
  border: 2px solid var(--ink-navy);
  padding: 1rem 1.1rem;
  background: var(--paper);
  display: grid;
  gap: 0.5rem;
}
.tweet__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-pixel);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-red);
}
.tweet__head .ts {
  color: var(--ink-navy);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  opacity: 0.55;
  text-transform: none;
}
.tweet__body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0;
  color: var(--ink-navy);
}
.tweet__meta {
  display: flex;
  gap: 1rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-navy);
  opacity: 0.7;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--ink-navy);
}

/* ============================================================ BRACKET
 * Single-elimination bracket for named Democramania events.
 * Navy lines, brick winners. Pure CSS.
 */
.bracket {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: stretch;
  padding: 1rem 0;
  overflow-x: auto;
}
.bracket__round {
  display: grid;
  gap: 1rem;
  align-content: space-around;
  position: relative;
}
.bracket__round--r1 { grid-template-rows: repeat(4, 1fr); }
.bracket__round--r2 { grid-template-rows: repeat(2, 1fr); align-items: center; }
.bracket__round--r3 { grid-template-rows: 1fr;          align-items: center; }
.bracket__round--final { grid-template-rows: 1fr;       align-items: center; }

.bracket__match {
  border: 2px solid var(--ink-navy);
  padding: 0.6rem 0.75rem;
  background: var(--paper);
  display: grid;
  gap: 0.25rem;
  position: relative;
  font-family: var(--font-mono);
  font-weight: 700;
}
.bracket__row {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-navy);
  padding: 0.15rem 0.1rem;
}
.bracket__row.is-winner { color: var(--paper); background: var(--ink-red); padding: 0.25rem 0.4rem; }
.bracket__row .pct { font-variant-numeric: tabular-nums; opacity: 0.85; }
.bracket__round--final .bracket__match {
  border-color: var(--ink-red);
  border-width: 4px;
  background: var(--paper);
}
.bracket__final-label {
  font-family: var(--font-pixel);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-red);
  text-align: center;
  margin: 0.5rem 0;
}

.bracket__caption {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-red);
  margin: 2rem 0 1rem;
}
.bracket__caption::before { content: "« "; }
.bracket__caption::after  { content: " »"; }

/* event banner above bracket */
.event-banner {
  background: var(--ink-red);
  color: var(--paper);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--font-pixel);
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-top: 6px solid var(--ink-navy);
  border-bottom: 6px solid var(--ink-navy);
}
.event-banner__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
}

/* ============================================================ DEMOCRAMANIA WORDMARK */
.democramania-mark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 7vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink-navy);
  text-align: center;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.democramania-mark .dot {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  background: var(--ink-red);
  margin: 0 0.04em;
  vertical-align: 0.06em;
}

/* ============================================================ COMPRESSED STORIES STRIP
 * Stories demoted to a footer-strip on homepage.
 */
.stories-strip {
  border-top: 4px solid var(--ink-navy);
  padding-top: 2.5rem;
  margin-top: 4rem;
}
.stories-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1.25rem;
}
.stories-strip__head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}
.stories-strip__head .meta {
  font-family: var(--font-pixel);
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-red);
}
.stories-strip__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.stories-strip__row {
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: 1fr;
  padding: 1rem 0;
  border-top: 1px dashed var(--ink-navy);
  text-decoration: none;
  color: var(--ink-navy);
}
.stories-strip__row:hover { background: rgba(150,40,24,0.05); }
@media (min-width: 720px) {
  .stories-strip__row { grid-template-columns: 5rem 1fr 14rem auto; align-items: baseline; }
}
.stories-strip__row .num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  color: var(--ink-red);
}
.stories-strip__row .title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.1;
}
.stories-strip__row .handle {
  font-family: var(--font-pixel);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-red);
}
.stories-strip__row .pillar {
  font-size: 0.85rem;
}

/* ============================================================ SUBMIT CHIP
 * "Suggest something" prominent action on voting surfaces.
 */
.submit-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.5rem 1rem;
  background: var(--paper);
  border: 2px solid var(--ink-navy);
  color: var(--ink-navy);
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.submit-chip:hover { background: var(--ink-navy); color: var(--paper); }
.submit-chip::before { content: "+"; color: var(--ink-red); font-weight: 700; }
.submit-chip:hover::before { color: var(--paper); }

/* ============================================================ LEADERBOARD CHIP RAIL
 * Compact top-N tonight strip below scoreboard.
 */
.leaderboard {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.5rem;
  font-family: var(--font-mono);
}
.leaderboard__head {
  font-family: var(--font-pixel);
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-red);
  margin: 0 0 0.5rem;
}
.leader-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px dashed var(--ink-navy);
  font-weight: 700;
}
.leader-row .rk { color: var(--ink-red); font-variant-numeric: tabular-nums; }
.leader-row .nm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink-navy);
  line-height: 1.1;
}
.leader-row .pct {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-navy);
}
.leader-row .vt {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  color: var(--ink-navy);
  opacity: 0.65;
  font-weight: 400;
}
.leader-row.is-top { background: var(--ink-red); color: var(--paper); }
.leader-row.is-top * { color: var(--paper) !important; opacity: 1 !important; }