/* ==========================================================================
   The Glitter War — theglitterwar.com, the neutral hub. The war room.
   Ink ground, paper text. BOTH Team Look's magenta and Team Ain't's orange
   as equal accents — neither dominant, nobody circled, nobody shamed.
   Design source: mockups/glitter-war-designs.html (pitch shell)
   ========================================================================== */

:root {
  --ink: #141216;
  --panel: #1B181E;
  --paper: #EFEAE4;
  --soft: #CFC8C0;   /* dek/body tint — 12:1 on ink */
  --quiet: #9A928B;  /* muted — 6.1:1 on ink */
  --line: #2B272E;
  --magenta: #FF3EA5;   /* Team Look */
  --orange: #FF5A1F;    /* Team Ain't */
  --orange-deep: #C2410C; /* focus ring that stays visible on manila preview */
  --sun: #FFD23F;
  --cyan: #2EE6D6;
  --lw-ground: #1A0B2E; /* Team Look preview swatches */
  --lw-line: #3A2653;
  --ag-manila: #E8E0D0; /* Team Ain't preview swatches */
  --ag-ink: #1C1B18;
  --marker-red: #FF4040;
  --radius: 10px;
  --font-display: "Segoe UI Black", "Arial Black", Arial, sans-serif;
  --font-body: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: Consolas, "Courier New", monospace;
  accent-color: var(--magenta);
}

/* ---------- ground rules ---------- */
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.55;
}
img, video, svg { max-width: 100%; }
::selection { background: var(--magenta); color: var(--ink); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.02;
  margin: 0.85rem 0 0.6rem;
  color: var(--paper);
}
/* the gradient lives in a span ("Glitter"), not the whole headline */
h1 .pop, h1 .look, .pop {
  background: linear-gradient(100deg, var(--magenta), var(--sun) 55%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0.5rem 0 0.9rem; }
a { color: var(--magenta); }
a:hover { color: var(--orange); }
p { margin: 0 0 1rem; }
.eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--quiet);
}

.page { max-width: 1060px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* ---------- hero ---------- */
.hub-hero { padding: 2.75rem 0 2.25rem; border-bottom: 1px solid var(--line); margin-bottom: 2.25rem; }
.hub-hero-sub { font-size: clamp(1.02rem, 2.2vw, 1.25rem); max-width: 62ch; color: var(--soft); }
.hub-hero-reveal { max-width: 62ch; color: var(--quiet); }
/* the 50/50 line — half Look, half Ain't, split exactly down the middle */
.split-rule {
  height: 4px;
  margin-top: 2rem;
  background: linear-gradient(90deg, var(--magenta) 0 50%, var(--orange) 50% 100%);
}

/* ---------- at a glance ---------- */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 2.25rem 0 0.5rem;
}
.glance > div { background: var(--ink); padding: 1.05rem 1.2rem; }
.glance b {
  display: block;
  font-size: 1.35rem;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.glance span { font-size: 0.8rem; color: var(--quiet); }

/* ---------- scoreboard — symmetric, even-handed ---------- */
.hub-score { margin: 1.5rem 0 2.5rem; }
.scoreboard {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem 1.75rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}
.scoreboard-neutral { justify-content: center; text-align: center; }
.score { display: grid; gap: 0.15rem; }
.score-team {
  font-family: var(--font-display);
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  text-transform: uppercase;
}
.score-look .score-team { color: var(--magenta); }
.score-aint .score-team { color: var(--orange); }
.score-points {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  line-height: 1.05;
}
/* the leader glows in its OWN colour; the other side is never dimmed */
.score-look.score-leader .score-points { text-shadow: 0 0 20px rgba(255, 62, 165, 0.65); }
.score-aint.score-leader .score-points { text-shadow: 0 0 20px rgba(255, 90, 31, 0.65); }
.vs { font-family: var(--font-display); color: var(--quiet); font-size: 1.2rem; }
.score-tiles { font-size: 0.75rem; color: var(--quiet); }
/* defensive: team-skin classes, should they ever render on the hub */
.score-note { font-size: 0.65rem; color: var(--quiet); text-transform: uppercase; letter-spacing: 0.1em; }
.rival-circle { position: relative; display: inline-block; }
.rival-circle::after {
  content: "";
  position: absolute;
  inset: -10px -14px;
  border: 3px solid var(--marker-red);
  border-radius: 60% 45% 55% 50% / 55% 60% 45% 55%;
  transform: rotate(-3deg);
  pointer-events: none;
}
.score-meter {
  flex-basis: 100%;
  height: 12px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  display: flex;
}
.score-meter i { display: block; background: var(--magenta); }
.score-meter em { display: block; flex: 1; background: var(--orange); }
.score-cap {
  flex-basis: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--quiet);
  text-transform: uppercase;
}

/* ---------- pick a side — literal brand previews ---------- */
.hub-sides { margin: 2.5rem 0; }
.side-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.side-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
.side-name { font-size: 1.35rem; margin: 0; }
.side-mascot { margin: 0; line-height: 1.5; }
/* Domain label — a small URL-bar cue at the top of each brand-true card. margin:0
   keeps it on the card's flex-gap rhythm; per-skin colors below both pass AA. */
.side-domain {
  margin: 0;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.side-look .side-domain { color: #B79ED6; } /* 7.8:1 on aubergine */
.side-aint .side-domain { color: #5E574A; } /* 5.4:1 on manila */
.side-cta {
  margin-top: auto;
  align-self: flex-start;
  text-decoration: none;
  font-weight: 800;
  padding: 0.7rem 1.3rem;
}

/* Team Look preview: a little square of lookwhois.gay */
.side-look {
  background:
    radial-gradient(circle 3px at 12% 14%, var(--sun) 98%, transparent),
    radial-gradient(circle 2px at 78% 10%, var(--cyan) 98%, transparent),
    radial-gradient(circle 3px at 90% 38%, var(--magenta) 98%, transparent),
    radial-gradient(circle 2px at 26% 82%, var(--sun) 98%, transparent),
    radial-gradient(circle 2px at 64% 90%, var(--cyan) 98%, transparent),
    var(--lw-ground);
  background-repeat: no-repeat;
  border-color: var(--lw-line);
}
.side-look .side-name {
  background: linear-gradient(95deg, var(--magenta), var(--sun), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.side-look .side-mascot { color: #E9D9F5; }
.side-look .side-mascot strong { color: #FF7CC3; letter-spacing: 0.06em; }
.side-look .side-cta {
  font-family: var(--font-display);
  text-transform: uppercase;
  background: var(--sun);
  color: var(--lw-ground);
  border-radius: 999px;
  transform: rotate(-1deg);
}
.side-look .side-cta:hover { color: var(--lw-ground); box-shadow: 0 0 24px rgba(255, 210, 63, 0.5); }
.side-look:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(255, 62, 165, 0.28); }

/* Team Ain't preview: a little square of aint.gay. it does not move. */
.side-aint {
  background: var(--ag-manila);
  border: 1px solid var(--ag-ink);
  border-radius: 0;
  color: var(--ag-ink);
  font-family: var(--font-mono);
}
.side-aint .side-name {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ag-ink);
}
.side-aint .side-mascot { color: #5E574A; }
.side-aint .side-mascot strong { color: var(--ag-ink); letter-spacing: 0.06em; }
.side-aint .side-cta {
  font-family: var(--font-mono);
  font-weight: 700;
  border: 2px solid var(--ag-ink);
  background: var(--orange);
  color: var(--ag-ink);
  border-radius: 0;
}
.side-aint .side-cta:hover { background: #fff; color: var(--ag-ink); }
.side-aint:hover { transform: none; box-shadow: none; } /* brand-true: zero motion */
.side-aint :focus-visible { outline-color: var(--orange-deep); }

/* ---------- how it works ---------- */
.hub-how { margin: 2.5rem 0; }
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.how-step {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
}
.how-n {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.75rem;
}
.how-body { display: grid; gap: 0.25rem; }
.how-body strong { font-size: 0.88rem; }
.how-d { font-size: 0.8rem; color: var(--quiet); line-height: 1.45; }

/* ---------- footer ---------- */
.hub-footer {
  margin-top: 3rem;
  padding: 1.35rem 0 0;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--quiet);
}
.hub-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 0.75rem; padding: 0; }
.hub-footer-links a { color: var(--soft); overflow-wrap: anywhere; }
.hub-footer-fine { color: var(--quiet); max-width: 75ch; }

/* ---------- legal pages (canonical legal home) ---------- */
.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.legal h2 { font-size: 1rem; margin-top: 2rem; }
.legal p { color: var(--soft); line-height: 1.65; }
.legal strong { color: var(--paper); }
.legal-banner {
  border: 1px dashed var(--quiet);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--paper);
  padding: 0.7rem 1rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- shared flow blocks (plan: every theme styles these) ---------- */
button {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  background: var(--panel);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  cursor: pointer;
}
button:hover { border-color: var(--magenta); }
button:disabled { color: var(--quiet); border-color: var(--line); cursor: not-allowed; }
input[type="email"], input[type="text"], select {
  width: 100%;
  max-width: 26rem;
  background: var(--panel);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
input::placeholder { color: var(--quiet); }
select option { background: var(--panel); color: var(--paper); }
input[type="file"] { max-width: 100%; color: var(--soft); font-size: 0.85rem; }
input[type="file"]::file-selector-button {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  padding: 0.45rem 1rem;
  margin-right: 0.75rem;
  cursor: pointer;
}
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; min-inline-size: auto; }
legend { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--quiet); padding: 0 0.5rem; }
label { display: block; margin: 0.4rem 0; }
fieldset label { display: flex; align-items: center; gap: 0.55rem; }

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--magenta);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  margin: 0 0 1.25rem;
}
.buyflow, .gift-flow { max-width: 34rem; }
.buyflow-step, .gift-flow, .pack-banner, .purchase-success {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem;
  margin: 0 0 1rem;
}
.gift-consent-note { border-left: 3px solid var(--orange); padding: 0.4rem 0 0.4rem 0.85rem; color: var(--soft); font-size: 0.9rem; }
.buyflow-errors, [role="alert"] {
  background: var(--panel);
  border: 1px solid var(--marker-red);
  border-radius: var(--radius);
  color: #FFB4B4;
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
}
.buyflow-errors p { margin: 0.25rem 0; }
.selfie-video, .buyflow video, .gift-accept video {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 3;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0.5rem 0;
}
.selfie-step { border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.9rem; margin: 0.75rem 0; }
.purchase-success { max-width: 34rem; margin: 2rem auto; text-align: center; }
.gift-accept { max-width: 34rem; margin: 0 auto; padding: 1.5rem; }

.report-dialog,
[role="dialog"][aria-label="Report tile"],
[role="dialog"][aria-label="Confirm decline"] {
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 26rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  color: var(--paper);
  box-shadow: 0 0 0 100vmax rgba(20, 18, 22, 0.75), 0 20px 60px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem;
}
.report-dialog button,
[role="dialog"][aria-label="Report tile"] button,
[role="dialog"][aria-label="Confirm decline"] button {
  display: block;
  width: 100%;
  margin: 0.5rem 0 0;
}

.agegate {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}
.agegate-card {
  text-align: center;
  padding: 2rem;
  max-width: 26rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.agegate-card .btn, .agegate-card button { display: block; width: 100%; margin: 1rem 0 0.9rem; }
.agegate-card a { color: var(--soft); font-size: 0.85rem; }

.cheer { display: grid; gap: 0.6rem; justify-items: start; margin: 0 0 2rem; }

/* ---------- small screens ---------- */
@media (max-width: 420px) {
  .page { padding: 1rem 1rem 3rem; }
}

/* ---------- reduced motion: the war holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .side-look:hover { transform: none; box-shadow: none; }
  /* dialogs keep their centering transform */
  .report-dialog,
  [role="dialog"][aria-label="Report tile"],
  [role="dialog"][aria-label="Confirm decline"] { transform: translate(-50%, -50%); }
}