/* AnswerOrDie — fight-poster arena. Diagonal slash system, team red vs blue,
   gold reserved for time + brand. Anton = poster display, Space Grotesk = numbers,
   Inter = body. */
:root {
  --bg: #0c0b10;
  --bg-raised: #14131b;
  --bg-card: #191824;
  --text: #f4f3f7;
  --text-dim: #8f8ca3;
  --accent: #ffc933;
  --side-a: #ff3d5a;
  --side-b: #2e9bff;
  --border: #29273a;
  --radius: 14px;
  --skew: -8deg;
  --display: "Anton", "Space Grotesk", "Inter", sans-serif;
}

* { box-sizing: border-box; }
/* display:flex/grid on a component would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  /* Full-bleed strips size themselves with 100vw, which includes the scrollbar
     gutter on some platforms — clip the spill instead of growing the page. */
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
h1, h2, .logo, .next-link {
  font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
}
h1, h2 { line-height: 1.1; letter-spacing: -0.03em; }
h2 { margin: 2.2rem 0 1rem; font-size: 1.3rem; display: flex; align-items: center; gap: 0.55rem; }
h2::before { content: ""; width: 0.5em; height: 0.9em; background: var(--accent); transform: skewX(var(--skew)); border-radius: 2px; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.container { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

/* Header */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg-raised); position: sticky; top: 0; z-index: 10; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 1rem; }
.logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; }
.logo em { color: var(--accent); font-style: normal; }
.logo-mark { width: 28px; height: 28px; }
.lang-nav a { color: var(--text-dim); font-size: 0.8rem; font-weight: 700; padding: 0.25rem 0.4rem; border-radius: 6px; }
.lang-nav a.active { color: var(--bg); background: var(--accent); }
.header-right { display: flex; align-items: center; gap: 0.9rem; }
.header-proof {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; font-weight: 700; color: var(--text-dim); white-space: nowrap;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: pulse 0.9s ease-in-out infinite alternate;
}
.sponsor-btn {
  font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--accent); color: var(--accent); white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}
.sponsor-btn:hover { background: var(--accent); color: var(--bg); }
@media (max-width: 640px) {
  .header-proof { display: none; }
}
/* Small screens: everything shrinks a step so logo, Sponsor and the five
   language links share one row instead of wrapping raggedly. */
@media (max-width: 560px) {
  .header-inner { padding: 0.6rem 0.75rem; }
  .logo { font-size: 1rem; gap: 0.4rem; }
  .logo-mark { width: 22px; height: 22px; }
  .header-right { gap: 0.5rem; }
  .sponsor-btn { font-size: 0.72rem; padding: 0.28rem 0.55rem; }
  .lang-nav { display: flex; gap: 0.05rem; }
  .lang-nav a { font-size: 0.72rem; padding: 0.2rem 0.28rem; }
}

/* Hero */
.hero { text-align: center; padding: 2.8rem 0 1.2rem; }
.hero h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 4.4rem); margin: 0 0 0.9rem; letter-spacing: 0.01em; line-height: 1;
}
.hero h1::after {
  content: ""; display: block; width: 4.5rem; height: 0.45rem; margin: 0.7rem auto 0;
  background: var(--accent); transform: skewX(var(--skew)); border-radius: 2px;
}
.hero p { color: var(--text-dim); max-width: 34rem; margin: 0 auto; }
/* Homepage hero — the main event: claims most of the first viewport */
.hero-xl {
  min-height: calc(82svh - 64px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 2rem 0;
}
.hero-xl h1 { font-size: clamp(3.4rem, 12vw, 7.5rem); margin-bottom: 1.1rem; line-height: 0.96; }
.hero-xl h1::after { width: clamp(4.5rem, 10vw, 7rem); height: 0.55rem; margin-top: 0.9rem; }
.hero-xl p { max-width: 38rem; font-size: clamp(1.05rem, 2.4vw, 1.35rem); }
.hero-xl .hero-actions { margin-top: 2.2rem; }
.hero-xl .hero-cta { padding: clamp(1.1rem, 3vw, 1.6rem) clamp(2rem, 6vw, 3.6rem); }
.hero-xl .hero-cta span { font-size: clamp(1.3rem, 3.6vw, 1.85rem); }
/* Hero CTAs — the same skewed-slab language as the vote buttons: entering the
   game is the visitor's first vote. */
.hero-actions { display: flex; justify-content: center; align-items: stretch; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; padding: 0 0.8rem; }
.hero-cta {
  display: flex; align-items: center; justify-content: center; text-align: center;
  transform: skewX(var(--skew)); border-radius: 12px; border: 2px solid transparent;
  padding: clamp(0.95rem, 2.5vw, 1.3rem) clamp(1.7rem, 5vw, 2.9rem);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.hero-cta span {
  display: block; transform: skewX(calc(-1 * var(--skew)));
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.2rem, 3.2vw, 1.55rem); letter-spacing: 0.03em; line-height: 1.1;
}
.hero-cta-primary {
  background: var(--accent); color: var(--bg);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
.hero-cta-primary:hover {
  transform: skewX(var(--skew)) translateY(-2px);
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 60%, transparent);
}
.hero-cta-secondary {
  background: linear-gradient(180deg, var(--bg-card), var(--bg-raised));
  border-color: var(--border); color: var(--text);
}
.hero-cta-secondary:hover { border-color: var(--accent); transform: skewX(var(--skew)) translateY(-2px); }
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cta, .hero-cta:hover { transition: none; transform: skewX(var(--skew)); }
}
.hero-small { padding: 1.4rem 0 1rem; }
.hero-small h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); }
/* One CTA on a smaller hero: keep the slab, drop a size so it belongs to the
   heading instead of floating between hero and grid. */
.hero-small .hero-actions { margin-top: 1.2rem; }
.hero-small .hero-cta {
  padding: 0.85rem clamp(1.6rem, 4vw, 2.4rem);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-small .hero-cta span { font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.hero-count { margin-top: 0.7rem; }

/* Question cards */
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
/* Horizontal strip variant — trending on the homepage scrolls sideways,
   breaking out of the container to run the full viewport width.
   Top padding gives the hover lift room so the card border isn't clipped
   by the scroll container. */
.q-strip {
  display: flex; gap: 0.9rem; overflow-x: auto;
  width: 100vw; margin-left: calc(50% - 50vw);
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding: 4px 1rem 0.5rem; scroll-padding-inline: 1rem; scrollbar-width: thin;
}
.q-strip .q-card { flex: 0 0 clamp(240px, 30vw, 300px); scroll-snap-align: start; }
/* While the marquee drives the scroll: snap would fight it, and a crawling
   scrollbar is just noise. */
.q-strip.is-marquee { scroll-snap-type: none; scrollbar-width: none; }
.q-strip.is-marquee::-webkit-scrollbar { display: none; }
.q-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; transition: transform 0.12s ease, border-color 0.12s ease;
}
.q-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.q-card-cat { font-size: 0.75rem; color: var(--text-dim); font-weight: 600; }
.q-card-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.q-card-meta { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.pill { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; }
.pill-a { background: color-mix(in srgb, var(--side-a) 22%, transparent); color: var(--side-a); }
.pill-b { background: color-mix(in srgb, var(--side-b) 22%, transparent); color: var(--side-b); }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.9rem; }
.cat-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 0.5rem;
}
.cat-card:hover { border-color: var(--accent); }
.cat-name { font-weight: 700; }

/* Nucleo category icons — two-tone: structure inherits, details go gold */
.cat-icon { display: inline-flex; align-items: center; justify-content: center; }
.cat-icon svg { width: 100%; height: 100%; display: block; }
.cat-icon svg [data-color="color-2"] { stroke: var(--accent); }
.cat-icon-inline { width: 1em; height: 1em; vertical-align: -0.15em; }
.cat-icon-lg { width: 2.4rem; height: 2.4rem; color: var(--text); margin-bottom: 0.3rem; }
.cat-icon-hero { width: 1em; height: 1em; vertical-align: -0.12em; color: var(--text); }
.cat-card:hover .cat-icon-lg { color: var(--accent); }
.cat-count { font-size: 0.75rem; color: var(--text-dim); }

/* Breadcrumbs */
.breadcrumbs { font-size: 0.8rem; color: var(--text-dim); padding: 1rem 0 0; }
.breadcrumbs a:hover { color: var(--text); }

/* Question arena — the question is the whole screen, under a stadium spotlight */
.arena {
  min-height: calc(100svh - 64px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; gap: 1.4rem; padding: 1.2rem 0 2.5rem;
  background: radial-gradient(ellipse 65% 48% at 50% 40%, rgba(255, 201, 51, 0.06), transparent 70%);
}
.arena .breadcrumbs { padding: 0; }
/* Once the vote is in, the whole result view claims the screen the way the
   question did: the arena releases its own full-height claim, and the page
   centers scoreboard + verdict + next matchup in the viewport together. */
.question-page.has-result {
  min-height: calc(100svh - 64px);
  display: flex; flex-direction: column; justify-content: center;
}
.has-result .arena { min-height: 0; gap: clamp(2rem, 4.5vw, 3.2rem); padding-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.has-result .arena h1 { margin-bottom: clamp(0.3rem, 1.5vw, 0.9rem); }
.has-result .arena .blurb { display: none; }
.has-result .vote-btn { padding: clamp(1.4rem, 4vw, 2.2rem) 1.2rem; }
.has-result .opt-pct { display: block; }
.arena h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 9vw, 5.4rem); margin: 0; max-width: 18ch;
  letter-spacing: 0.01em; line-height: 0.98;
}
.arena .blurb { color: var(--text-dim); max-width: 42rem; margin: 0; font-size: clamp(0.95rem, 2.2vw, 1.1rem); }

/* Countdown — a burning fuse */
.timer { display: flex; align-items: center; gap: 0.9rem; width: min(560px, 92%); }
.timer-track { flex: 1; height: 6px; border-radius: 999px; background: var(--bg-card); overflow: visible; }
.timer-bar {
  height: 100%; width: 100%; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 65%, transparent);
  transition: width 0.1s linear, background 0.3s ease, box-shadow 0.3s ease;
}
.timer-num {
  font-family: var(--display); font-size: 2rem; line-height: 1;
  min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums;
}
.timer.urgent .timer-bar { background: var(--side-a); box-shadow: 0 0 16px color-mix(in srgb, var(--side-a) 70%, transparent); }
.timer.urgent .timer-num { color: var(--side-a); animation: pulse 0.5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.25); } }

/* Vote buttons — two skewed halves meeting at the VS seam */
.vote-buttons { display: flex; align-items: stretch; gap: 1.1rem; width: 100%; max-width: 840px; position: relative; padding: 0 0.8rem; }
.vote-btn {
  flex: 1; cursor: pointer; border: 2px solid var(--border); border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-raised));
  color: var(--text); padding: clamp(1.7rem, 5vw, 2.8rem) 1.2rem;
  transform: skewX(var(--skew));
  font-family: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.vote-btn .opt-name {
  display: block; transform: skewX(calc(-1 * var(--skew)));
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 4.5vw, 2.4rem); letter-spacing: 0.02em; line-height: 1.05;
}
/* The percentage takes over the button once results are in */
.opt-pct {
  display: none; transform: skewX(calc(-1 * var(--skew)));
  font-family: "Space Grotesk", sans-serif; font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 3.8rem); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.vote-a .opt-pct { color: var(--side-a); }
.vote-b .opt-pct { color: var(--side-b); }
.vs-badge {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%) skewX(var(--skew));
  font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.04em;
  background: var(--accent); color: var(--bg); padding: 0.45rem 0.75rem; border-radius: 8px;
  box-shadow: 0 0 0 5px var(--bg);
  pointer-events: none;
}
.vote-a:hover:not(:disabled) { border-color: var(--side-a); transform: skewX(var(--skew)) scale(1.03); box-shadow: 0 0 44px color-mix(in srgb, var(--side-a) 35%, transparent); }
.vote-b:hover:not(:disabled) { border-color: var(--side-b); transform: skewX(var(--skew)) scale(1.03); box-shadow: 0 0 44px color-mix(in srgb, var(--side-b) 35%, transparent); }
.vote-btn:disabled { cursor: default; }
.vote-a.chosen { border-color: var(--side-a); background: color-mix(in srgb, var(--side-a) 22%, var(--bg-card)); box-shadow: 0 0 34px color-mix(in srgb, var(--side-a) 30%, transparent); }
.vote-b.chosen { border-color: var(--side-b); background: color-mix(in srgb, var(--side-b) 22%, var(--bg-card)); box-shadow: 0 0 34px color-mix(in srgb, var(--side-b) 30%, transparent); }
.vote-btn.not-chosen, .vote-btn.dead { opacity: 0.5; }
.dead-note { color: var(--side-a); font-weight: 800; margin: 0; font-size: 1.15rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Results bar — the buttons above carry the names and numbers */
.bar-race { display: flex; width: 100%; border-radius: 999px; overflow: hidden; height: 1.1rem; background: var(--bg-card); border: 1px solid var(--border); }
.bar { transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar-a { background: var(--side-a); }
.bar-b { background: var(--side-b); }
.total-votes { color: var(--text-dim); font-size: 0.85rem; }

/* Country table */
.table-scroll { overflow-x: auto; }
.stats-panel table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.stats-panel th, .stats-panel td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.stats-panel th { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.stats-panel .num { text-align: right; font-variant-numeric: tabular-nums; }
.pct-a { color: var(--side-a); font-weight: 700; }
.pct-b { color: var(--side-b); font-weight: 700; }

/* Sponsor strip (TrustMRR-style pills) */
.sponsor-strip {
  display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.55rem 1rem;
  justify-content: safe center; border-bottom: 1px solid var(--border); background: var(--bg);
  scrollbar-width: none;
}
.sponsor-strip::-webkit-scrollbar { display: none; }
.sponsor-pill {
  flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: var(--text-dim);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.85rem;
}
.sponsor-pill:hover { color: var(--text); border-color: var(--accent); }
.sponsor-pill-empty { border-style: dashed; color: var(--accent); }

/* Sponsor page */
.sponsor-page { display: grid; gap: 1.5rem; grid-template-columns: 1fr; max-width: 60rem; margin: 0 auto; }
@media (min-width: 760px) { .sponsor-page { grid-template-columns: 1.1fr 1fr; } }
.sponsor-info ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.sponsor-price { font-family: "Space Grotesk", sans-serif; font-size: 2.6rem; font-weight: 700; margin: 1rem 0 0; }
.sponsor-price span { font-size: 1rem; color: var(--text-dim); font-weight: 400; }
.sponsor-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: 0.5rem; align-content: start; }
.sponsor-form h2 { margin: 0 0 0.4rem; }
.sponsor-form label { font-size: 0.8rem; color: var(--text-dim); margin-top: 0.4rem; }
.sponsor-form input, .sponsor-form select {
  padding: 0.6rem 0.7rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-raised); color: var(--text); font-family: inherit; font-size: 0.95rem;
}
.btn-primary {
  display: inline-block; cursor: pointer; margin-top: 0.8rem; text-align: center;
  background: var(--accent); color: var(--bg); font-weight: 800; font-size: 1rem;
  border: 0; border-radius: 10px; padding: 0.8rem 1.4rem; font-family: inherit;
}
.btn-primary:hover { filter: brightness(1.1); }
.muted-small { font-size: 0.75rem; color: var(--text-dim); }

/* Share buttons */
.share-btn { cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text);
             background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; }
.share-btn:hover { border-color: var(--accent); }
.share-wa:hover { border-color: #25d366; }

/* Aftermath — the beat between voting and the next matchup. Same centered
   column as the arena's buttons, same poster type. */
.aftermath { display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); padding: 0.5rem 0.8rem 2.2rem; width: 100%; max-width: 840px; margin: 0 auto; }
.verdict-line { display: flex; align-items: baseline; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin: 1.4rem 0 0; text-align: center; }
.verdict { font-family: var(--display); font-weight: 400; text-transform: uppercase;
           letter-spacing: 0.02em; font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
.verdict-win { color: var(--accent); }
.verdict-lose { color: var(--side-b); }

/* Keyboard hint — desktop only, and only until the first vote */
.key-hint { color: var(--text-dim); font-size: 0.8rem; margin: 0; }
.key-hint kbd, .key-hint b { font-family: "Space Grotesk", sans-serif; color: var(--text); font-weight: 700; }
@media (hover: none) { .key-hint { display: none; } }

/* Next matchup — the loop's engine, and the one loud thing after a vote:
   a full-width card sitting right under the result */
.next-up { display: grid; gap: 0.7rem; border: 2px solid var(--accent); border-radius: var(--radius);
           background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--bg-card)), var(--bg-card));
           padding: 1.1rem 1.2rem;
           box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 18%, transparent); }
.next-link { display: grid; gap: 0.3rem; text-align: center; }
.next-link:hover .next-q { color: var(--accent); }
.next-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); }
.next-q { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em;
          font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.05; }
.next-opts { font-size: 0.85rem; color: var(--text-dim); display: flex; gap: 0.45rem; justify-content: center; flex-wrap: wrap; }
.next-opts .next-a { color: var(--side-a); }
.next-opts .next-b { color: var(--side-b); }
.next-opts i { font-style: normal; opacity: 0.6; }

.next-meter { display: flex; align-items: center; gap: 0.7rem; }
.next-count { font-size: 0.75rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.next-meter-track { flex: 1; height: 4px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.next-meter-bar { height: 100%; width: 100%; background: var(--accent); transition: width 0.1s linear; }
.next-stay { cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 700; white-space: nowrap;
             color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; }
.next-stay:hover { color: var(--text); border-color: var(--text-dim); }

/* Secondary row: stats and sharing, one quiet centered strip */
.aftermath-actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.stats-toggle { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-family: inherit; font-size: 0.85rem; font-weight: 700; color: var(--text);
                background: var(--bg-raised); border: 1px solid var(--border); border-radius: 999px; padding: 0.4rem 0.9rem; }
.stats-toggle:hover { border-color: var(--accent); }
.stats-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.stats-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 1.1rem 1.1rem; }
.stats-panel h2 { margin: 1rem 0 0.6rem; font-size: 1rem; }
.your-country { font-weight: 700; font-size: 0.95rem; margin: 0.9rem 0 0; }

/* Ads */
.ad-slot {
  margin: 1.6rem 0; padding: 1rem; text-align: center;
  border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg-raised);
}
.ad-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.4rem; }
.sponsor-cta { color: var(--accent); font-weight: 700; font-size: 0.9rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--border); margin-top: 3rem; padding: 1.6rem 0 2.2rem; color: var(--text-dim); font-size: 0.85rem; }
.footer-cats { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.6rem; }
.footer-cats a:hover { color: var(--text); }
.back-link { color: var(--text-dim); font-size: 0.9rem; }
.back-link:hover { color: var(--text); }

@media (max-width: 560px) {
  .vote-buttons { flex-direction: column; gap: 1rem; }
}

/* Shorts-style hop between matchups. Cross-document view transitions animate
   across REAL full-page navigations — the loop must never become an in-page
   feed, or each question stops counting as a pageview / fresh ad request.
   Browsers without support (and reduced-motion users) get the instant cut. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: 340ms cubic-bezier(0.32, 0.72, 0, 1) both feed-exit; }
  ::view-transition-new(root) { animation: 340ms cubic-bezier(0.32, 0.72, 0, 1) both feed-enter; }
}
@keyframes feed-exit { to { transform: translateY(-100%); } }
@keyframes feed-enter { from { transform: translateY(100%); } }

.swipe-hint { display: none; text-align: center; color: var(--text-dim); font-size: 0.8rem; margin: 0.5rem 0 0; }
@media (pointer: coarse) { .swipe-hint { display: block; } }

/* Deep dive — the editorial layer under the arena: the case for each side in
   team colors, verdict, and FAQ. Rendered only when a question carries it. */
.deep-dive { margin-top: 2.5rem; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.case-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 1.2rem 1.1rem; }
.case-card-a { border-top: 3px solid var(--side-a); }
.case-card-b { border-top: 3px solid var(--side-b); }
.case-card h2 { font-size: 1.05rem; margin: 1rem 0 0.6rem; }
.case-card-a h2::before { background: var(--side-a); }
.case-card-b h2::before { background: var(--side-b); }
.case-card p { margin: 0; color: var(--text-dim); font-size: 0.95rem; }
.verdict-copy { color: var(--text-dim); max-width: 46rem; }
.faq-list { display: grid; gap: 0.6rem; }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1.1rem; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item summary::marker { color: var(--accent); }
.faq-item p { margin: 0.6rem 0 0; color: var(--text-dim); font-size: 0.95rem; }
@media (max-width: 560px) {
  .case-grid { grid-template-columns: 1fr; }
}