/* kunstrasen.collekton.com — design system lifted from the approved Lovable
   mockup: Archivo, hard 4px ink borders, pitch-green grid, scattered dots. */

:root {
  --ink: oklch(14.5% 0 0);
  --paper: oklch(100% 0 0);
  --pitch: oklch(68% 0.19 145);
  --pitch-line: oklch(98.5% 0 0);
  --muted: oklch(45% 0 0);
  --muted-bg: oklch(96% 0 0);
  --live: oklch(62% 0.22 27);
  --ok: oklch(52% 0.14 150);
  --dot-red: oklch(62% 0.22 27);
  --dot-blue: oklch(45% 0.15 250);
  --dot-yellow: oklch(90% 0.16 100);
  --dot-orange: oklch(72% 0.18 55);
  --dot-violet: oklch(52% 0.19 305);
  --dot-pink: oklch(78% 0.11 350);
  --dot-teal: oklch(72% 0.13 220);
  --dot-forest: oklch(38% 0.1 155);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

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

.pitch-grid {
  background-color: var(--pitch);
  background-image:
    linear-gradient(to right, var(--pitch-line) 0 6px, transparent 6px),
    linear-gradient(to bottom, var(--pitch-line) 0 6px, transparent 6px);
  background-position: -3px -3px;
  background-size: 148px 118px;
}

.dots { pointer-events: none; position: absolute; inset: 0; }
.dots span { position: absolute; border-radius: 9999px; transform: translate(-50%, -50%); }

.text-outline {
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
}

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 4px solid var(--ink);
  background: var(--paper);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.site-header img { height: 1rem; width: auto; }
@media (min-width: 640px) { .site-header img { height: 1.25rem; } }

.lang-switch { display: flex; align-items: center; border: 4px solid var(--ink); background: var(--paper); }
.lang-switch button {
  padding: 0.375rem 0.625rem; font-size: 0.75rem; font-weight: 900;
  letter-spacing: 0.1em; background: var(--paper); color: var(--ink); border: 0;
  transition: background 0.15s;
}
@media (min-width: 640px) { .lang-switch button { padding: 0.375rem 0.75rem; font-size: 0.875rem; } }
.lang-switch button:hover { background: color-mix(in oklch, var(--ink) 10%, var(--paper)); }
.lang-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── Hero ── */
.hero { position: relative; overflow: hidden; border-bottom: 4px solid var(--ink); }
.hero .wrap { position: relative; padding-top: 3.5rem; padding-bottom: 0; }
@media (min-width: 640px) { .hero .wrap { padding-top: 5rem; } }

.kicker-badge {
  display: inline-block; border: 4px solid var(--ink); background: var(--paper);
  padding: 0.25rem 0.75rem; font-size: 0.7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.2em;
}
@media (min-width: 640px) { .kicker-badge { font-size: 0.75rem; } }

.hero h1 {
  margin-top: 1.5rem;
  font-size: 12.5vw; line-height: 0.82; font-weight: 900;
  text-transform: uppercase; letter-spacing: -0.05em;
  color: var(--paper);
}
@media (min-width: 640px) { .hero h1 { font-size: 11rem; } }
.hero h1 .num { color: var(--ink); }

.hero-box {
  margin-top: 1rem; max-width: 42rem; border: 4px solid var(--ink);
  background: var(--paper); padding: 1rem;
}
.hero-box.welcome { font-size: 1.125rem; font-weight: 700; line-height: 1.375; }
@media (min-width: 640px) { .hero-box.welcome { font-size: 1.5rem; } }
.hero-box.lead { font-size: 0.875rem; line-height: 1.625; }
@media (min-width: 640px) { .hero-box.lead { font-size: 1rem; } }

.sponsor-band {
  margin-top: 1.5rem; display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 1rem; border: 4px solid var(--ink); background: var(--ink);
  padding: 1rem 1.25rem;
}
.sponsor-band img { height: 1rem; width: auto; }
@media (min-width: 640px) { .sponsor-band img { height: 1.25rem; } }
.sponsor-band span {
  font-size: 0.65rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--paper);
}
@media (min-width: 640px) { .sponsor-band span { font-size: 0.75rem; } }

.hero-photo { margin-top: 2.5rem; margin-bottom: -1px; border: 4px solid var(--ink); border-bottom: 0; background: var(--paper); }
.hero-photo img { height: 42vw; width: 100%; object-fit: cover; object-position: center; }
@media (min-width: 640px) { .hero-photo img { height: 30rem; } }

/* ── Marquee ── */
.marquee { overflow: hidden; border-bottom: 4px solid var(--ink); background: var(--ink); padding: 0.625rem 0; }
.marquee-track { display: flex; width: max-content; gap: 2rem; white-space: nowrap; will-change: transform; animation: marquee-x 28s linear infinite; }
.marquee-track > div { display: flex; gap: 2rem; }
.marquee-track span {
  font-size: 0.75rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.25em; color: var(--paper);
}
@media (min-width: 640px) { .marquee-track span { font-size: 0.875rem; } }
@keyframes marquee-x { 0% { transform: translate(0); } 100% { transform: translate(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Generic sections ── */
.section { border-bottom: 4px solid var(--ink); background: var(--paper); }
.section > .wrap { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .section > .wrap { padding-top: 6rem; padding-bottom: 6rem; } }

.display {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.05em; line-height: 1;
}
h2.display { font-size: 3rem; }
@media (min-width: 640px) { h2.display { font-size: 4.5rem; } }

.cols-3 { margin-top: 2.5rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
.cols-3 p { font-size: 1rem; line-height: 1.625; }
@media (min-width: 640px) { .cols-3 p { font-size: 1.125rem; } }

.facts { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); border: 4px solid var(--ink); }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts > div { padding: 1.5rem; }
.facts > div:nth-child(odd) { border-right: 4px solid var(--ink); }
.facts > div:nth-child(-n + 2) { border-bottom: 4px solid var(--ink); }
@media (min-width: 640px) {
  .facts > div { border-bottom: 0 !important; }
  .facts > div:not(:last-child) { border-right: 4px solid var(--ink); }
}
.facts .value { display: block; font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; line-height: 1; }
@media (min-width: 640px) { .facts .value { font-size: 3.75rem; } }
.facts .label {
  margin-top: 0.5rem; display: block; font-size: 0.7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted);
}

.photo-band { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 4px solid var(--ink); }
.photo-band img { height: 10rem; width: 100%; object-fit: cover; }
.photo-band img:first-child { border-right: 4px solid var(--ink); }
@media (min-width: 640px) { .photo-band img { height: 18rem; } }

/* ── Team section ── */
.team-section { position: relative; overflow: hidden; border-bottom: 4px solid var(--ink); }
.team-section .inner { position: relative; max-width: 56rem; margin: 0 auto; padding: 4rem 1rem; }
@media (min-width: 640px) { .team-section .inner { padding: 6rem 1.5rem; } }
.team-card { border: 4px solid var(--ink); background: var(--paper); padding: 1.5rem; }
@media (min-width: 640px) { .team-card { padding: 2.5rem; } }
.team-card h2 { font-size: 2.25rem; }
@media (min-width: 640px) { .team-card h2 { font-size: 3.75rem; } }
.team-card > p { margin-top: 1.5rem; font-size: 1rem; line-height: 1.625; }
@media (min-width: 640px) { .team-card > p { font-size: 1.125rem; } }
.team-card .note { margin-top: 2rem; display: flex; align-items: center; gap: 1.25rem; border-top: 4px solid var(--ink); padding-top: 1.5rem; }
.team-card .note img { height: 3rem; width: auto; }
.team-card .note p { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; }
@media (min-width: 640px) { .team-card .note p { font-size: 1rem; } }

/* ── About ── */
.about-logo { height: 1.5rem; width: auto; }
@media (min-width: 640px) { .about-logo { height: 2.25rem; } }
.about-lead { margin-top: 1.5rem; max-width: 48rem; font-size: 1.125rem; line-height: 1.625; }
@media (min-width: 640px) { .about-lead { font-size: 1.5rem; } }

.features { margin-top: 3rem; display: grid; border: 4px solid var(--ink); }
@media (min-width: 768px) { .features { grid-template-columns: repeat(3, 1fr); } }
.features > div { padding: 1.5rem; }
@media (min-width: 640px) { .features > div { padding: 2rem; } }
.features > div:not(:last-child) { border-bottom: 4px solid var(--ink); }
@media (min-width: 768px) {
  .features > div:not(:last-child) { border-bottom: 0; border-right: 4px solid var(--ink); }
}
.features .num { display: block; font-size: 1.875rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.features h3 { margin-top: 1rem; font-size: 1.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; }
.features p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.625; color: var(--muted); }
@media (min-width: 640px) { .features p { font-size: 1rem; } }
.features .inverse { background: var(--ink); color: var(--paper); }
.features .inverse h3 { font-size: 1.875rem; line-height: 0.95; letter-spacing: -0.05em; }
.features .inverse h3 span { display: block; }
@media (min-width: 640px) { .features .inverse h3 { font-size: 2.25rem; } }
.features .inverse p { color: color-mix(in oklch, var(--paper) 80%, transparent); }

/* ── Live section ── */
#live .live-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem; }
.live-updated { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.live-note { margin-top: 1.5rem; border: 4px solid var(--ink); background: var(--paper); padding: 1rem 1.25rem; font-size: 0.9rem; font-weight: 700; max-width: 42rem; }
.live-note a { font-weight: 900; }

.live-strip { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .live-strip { grid-template-columns: 1fr 1fr; } }
.strip-block h3 {
  font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em;
  display: flex; align-items: center; gap: 0.5rem;
}
.strip-block h3 .pulse {
  width: 0.6rem; height: 0.6rem; border-radius: 9999px; background: var(--live);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.strip-games { margin-top: 0.75rem; border: 4px solid var(--ink); background: var(--paper); }
.strip-games .empty { padding: 1rem 1.25rem; font-size: 0.875rem; color: var(--muted); }

.game-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; }
.game-row + .game-row { border-top: 2px solid var(--ink); }
.game-row .meta {
  flex: none; width: 5.5rem; font-size: 0.65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); line-height: 1.4;
}
.game-row .teams { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.4; }
.game-row .teams .vs { color: var(--muted); font-weight: 400; padding: 0 0.375rem; }
.game-row .score { flex: none; font-size: 1.125rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.game-row.is-live .score { color: var(--live); }
.team-chip { display: inline-flex; align-items: center; gap: 0.375rem; }
.team-chip .swatch { width: 0.7rem; height: 0.7rem; flex: none; border: 2px solid var(--ink); display: inline-block; }
.team-chip img { width: 1.1rem; height: 1.1rem; object-fit: contain; flex: none; }
.slot-tba { color: var(--muted); font-weight: 400; }
.slot-projected { font-style: italic; }
.slot-projected::after { content: "*"; }
.winner { text-decoration: underline; text-decoration-thickness: 3px; }

/* Groups */
.groups-grid { margin-top: 2rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .groups-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .groups-grid { grid-template-columns: repeat(3, 1fr); } }
.group-table { border: 4px solid var(--ink); background: var(--paper); }
.group-table caption {
  text-align: left; border-bottom: 4px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 0.5rem 0.875rem; font-size: 0.8rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.15em;
}
.group-table table { width: 100%; border-collapse: collapse; }
.group-table th, .group-table td { padding: 0.45rem 0.6rem; font-size: 0.8rem; text-align: left; }
.group-table thead th {
  font-size: 0.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--muted); border-bottom: 2px solid var(--ink);
}
.group-table tbody tr + tr td { border-top: 1px solid color-mix(in oklch, var(--ink) 20%, var(--paper)); }
.group-table td.n { width: 1.5rem; font-weight: 900; color: var(--muted); }
.group-table td.team { font-weight: 700; }
.group-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.group-table th.num { text-align: right; }
.group-table td.pts { font-weight: 900; }
.projected-note { margin-top: 1rem; font-size: 0.75rem; color: var(--muted); }

/* Bracket */
.bracket-scroll { margin-top: 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
.bracket { display: flex; gap: 1.5rem; min-width: max-content; align-items: stretch; }
.round { display: flex; flex-direction: column; width: 15rem; flex: none; }
.round > h3 {
  font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
}
.round .matches { display: flex; flex-direction: column; justify-content: space-around; gap: 0.75rem; flex: 1; }
.match-card { border: 4px solid var(--ink); background: var(--paper); }
.match-card .head {
  display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0.6rem;
  border-bottom: 2px solid var(--ink); font-size: 0.6rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.match-card.is-live .head { background: var(--live); color: var(--paper); border-bottom-color: var(--ink); }
.match-card .side { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.6rem; font-size: 0.85rem; font-weight: 700; }
.match-card .side + .side { border-top: 1px solid color-mix(in oklch, var(--ink) 20%, var(--paper)); }
.match-card .side .s { font-weight: 900; font-variant-numeric: tabular-nums; }
.match-card.final { box-shadow: 0.5rem 0.5rem 0 0 var(--ink); }
.champion-line { margin-top: 0.75rem; border: 4px solid var(--ink); background: var(--pitch); padding: 0.6rem; font-weight: 900; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; }

/* Placement */
details.placement { margin-top: 2rem; border: 4px solid var(--ink); background: var(--paper); }
details.placement summary {
  cursor: pointer; padding: 0.75rem 1.25rem; font-size: 0.8rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.2em; user-select: none;
}
details.placement[open] summary { border-bottom: 4px solid var(--ink); }
.placement-groups { display: grid; gap: 0; }
.placement-type {
  padding: 0.4rem 1rem; background: var(--muted-bg); font-size: 0.65rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted);
  border-top: 2px solid var(--ink);
}
.placement-groups .game-row:first-child { border-top: 0; }

/* ── Reserve / CTA ── */
.cta-section { background: var(--ink); color: var(--paper); }
.cta-section .wrap { max-width: 56rem; padding-top: 5rem; padding-bottom: 7rem; text-align: center; }
.cta-section h2 { color: var(--paper); font-size: 3rem; }
@media (min-width: 640px) { .cta-section h2 { font-size: 4.5rem; } }
.cta-section .body { margin: 1.5rem auto 0; max-width: 36rem; font-size: 1rem; line-height: 1.625; color: color-mix(in oklch, var(--paper) 80%, transparent); }
@media (min-width: 640px) { .cta-section .body { font-size: 1.125rem; } }

.claim-box { margin: 2.5rem auto 0; max-width: 34rem; border: 4px solid var(--paper); background: var(--paper); color: var(--ink); padding: 1.5rem; text-align: left; }
@media (min-width: 640px) { .claim-box { padding: 2rem; } }
.claim-box label { display: block; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 0.375rem; }
.claim-field { display: flex; align-items: stretch; border: 4px solid var(--ink); }
.claim-field input {
  flex: 1; min-width: 0; border: 0; outline: none; padding: 0.75rem 0.875rem;
  font-size: 1rem; font-weight: 700; background: var(--paper); color: var(--ink);
}
.claim-field .suffix {
  display: flex; align-items: center; padding: 0 0.875rem; background: var(--ink);
  color: var(--paper); font-size: 0.8rem; font-weight: 900; white-space: nowrap;
}
.claim-status { margin-top: 0.5rem; font-size: 0.8rem; font-weight: 700; min-height: 1.25rem; }
.claim-status.ok { color: var(--ok); }
.claim-status.bad { color: var(--live); }
.claim-status.muted { color: var(--muted); }
.claim-suggestions { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.claim-suggestions button {
  border: 2px solid var(--ink); background: var(--paper); padding: 0.2rem 0.5rem;
  font-size: 0.75rem; font-weight: 700;
}
.claim-suggestions button:hover { background: var(--ink); color: var(--paper); }
.claim-grid { margin-top: 1rem; display: grid; gap: 1rem; }
@media (min-width: 640px) { .claim-grid { grid-template-columns: 1fr 1fr; } }
.claim-grid input {
  width: 100%; border: 4px solid var(--ink); padding: 0.75rem 0.875rem;
  font-size: 0.9rem; outline: none; background: var(--paper); color: var(--ink);
}
.claim-grid input:focus, .claim-field:focus-within { outline: 3px solid var(--pitch); }
.btn-primary {
  margin-top: 1.25rem; width: 100%; border: 4px solid var(--ink); background: var(--ink);
  color: var(--paper); padding: 0.875rem 2rem; font-size: 1rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.15em; transition: background 0.15s, color 0.15s;
}
.btn-primary:hover:not(:disabled) { background: var(--paper); color: var(--ink); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.cta-note { margin-top: 1.5rem; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklch, var(--paper) 60%, transparent); }
.cta-alt { margin-top: 1rem; font-size: 0.8rem; color: color-mix(in oklch, var(--paper) 70%, transparent); }
.cta-alt a { color: var(--paper); }

/* Success state */
.claim-success h3 { font-size: 2rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; }
.claim-success .domain { margin-top: 0.75rem; font-size: 1.05rem; font-weight: 900; word-break: break-all; }
.claim-success p { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.6; }
.claim-success .verify-note { font-weight: 700; }
.mfa-offer { margin-top: 1.25rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.mfa-offer p { margin-top: 0; font-size: 0.8rem; color: var(--muted); }
.mfa-offer button {
  margin-top: 0.5rem; border: 2px solid var(--ink); background: var(--paper);
  padding: 0.4rem 0.75rem; font-size: 0.8rem; font-weight: 700;
}
.mfa-offer button:hover { background: var(--ink); color: var(--paper); }
.mfa-done { font-weight: 900; color: var(--ok); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--ink) 50%, transparent); padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%; max-width: 26rem; max-height: 90vh; overflow-y: auto;
  border: 4px solid var(--ink); background: var(--paper); color: var(--ink); padding: 1.5rem;
}
@media (min-width: 640px) { .modal { padding: 2rem; } }
.modal h3 { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: -0.025em; }
.modal .domain-line { margin-top: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); word-break: break-all; }
.modal .step { margin-top: 1.25rem; display: none; }
.modal .step.active { display: block; }
.modal p.hint { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.modal label { display: block; margin: 1rem 0 0.25rem; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); }
.modal input {
  width: 100%; border: 4px solid var(--ink); padding: 0.7rem 0.8rem; font-size: 0.95rem;
  outline: none; background: var(--paper); color: var(--ink);
}
.modal input:focus { outline: 3px solid var(--pitch); }
.modal input.code { text-align: center; font-size: 1.25rem; font-weight: 900; letter-spacing: 0.4em; font-variant-numeric: tabular-nums; }
.modal input[readonly] { opacity: 0.6; }
.modal .btn-primary { margin-top: 1.25rem; }
.modal .link-btn {
  display: block; width: 100%; margin-top: 0.75rem; border: 0; background: none;
  text-align: center; font-size: 0.75rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px;
}
.modal .otp-link {
  display: block; margin-top: 1rem; border: 4px solid var(--ink); background: var(--ink);
  color: var(--paper); padding: 0.75rem; text-align: center; font-size: 0.85rem;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none;
}
.modal .manual-key { margin-top: 1rem; border: 2px solid var(--ink); padding: 0.75rem; }
.modal .manual-key .k { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.modal .manual-key code { font-size: 0.8rem; word-break: break-all; }
.modal .manual-key button { border: 2px solid var(--ink); background: var(--paper); padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 700; flex: none; }
.modal details { margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted); }
.modal details summary { cursor: pointer; }
.modal details img { margin: 0.75rem auto 0; width: 11rem; height: 11rem; border: 2px solid var(--ink); }
.modal .msg-err { margin-top: 0.75rem; font-size: 0.8rem; font-weight: 700; color: var(--live); }
.modal .msg-info { margin-top: 0.75rem; font-size: 0.8rem; font-weight: 700; }
.modal .busy { padding: 2rem 0; text-align: center; font-size: 0.9rem; color: var(--muted); }

/* ── Footer ── */
.site-footer { border-top: 4px solid var(--ink); background: var(--paper); }
.site-footer .wrap {
  display: flex; flex-direction: column; gap: 1.5rem;
  padding-top: 2.5rem; padding-bottom: 2.5rem;
}
@media (min-width: 640px) { .site-footer .wrap { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.site-footer img { height: 1rem; width: auto; }
.site-footer .sponsor { margin-top: 0.75rem; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); }
.site-footer .links { font-size: 0.75rem; line-height: 1.625; color: var(--muted); }
@media (min-width: 640px) { .site-footer .links { text-align: right; } }
.site-footer .links a { text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}