@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }
/* BudBattles: dark style with neon green and pink.
   Change the colours here and the whole app follows. */
:root {
  --black: #000;
  --bg: #0a0d0b;
  --bg-2: #111613;
  --card: #141a16;
  --line: #233029;
  --text: #e9fff2;
  --muted: #8fa699;
  --green: #39ff88;
  --green-dim: #1f8f4f;
  --pink: #ff3fa4;
  --pink-dim: #8f2560;
  --amber: #ffc94a;
  --danger: #ff5a6e;
  --radius: 16px;
  --glow-green: 0 0 8px rgba(57, 255, 136, .55), 0 0 24px rgba(57, 255, 136, .25);
  --glow-pink: 0 0 8px rgba(255, 63, 164, .55), 0 0 24px rgba(255, 63, 164, .25);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --nav-h: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(600px 300px at 100% -10%, rgba(255, 63, 164, .12), transparent 70%),
    radial-gradient(600px 300px at -10% 0%, rgba(57, 255, 136, .10), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.5 var(--font);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
a { color: var(--green); }
h1, h2 { line-height: 1.15; margin: 0 0 .5rem; }
h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; color: var(--green); }
p { margin: 0 0 .75rem; }
[hidden] { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: var(--black); /* the logo is designed for black: keep this surface black */
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.brand { display: flex; align-items: center; min-width: 0; }
.brand img { height: 46px; width: auto; max-width: 100%; object-fit: contain; }
.topbar-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang button {
  background: none; border: 0; color: var(--muted); font: 600 .8rem var(--font);
  padding: 6px 12px; min-height: 32px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--green); color: #04130a; }

.demo-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
  margin: 0; padding: 6px 16px; font-size: .8rem; text-align: center;
  color: var(--amber); background: rgba(255, 201, 74, .08); border-bottom: 1px solid rgba(255, 201, 74, .2);
}

/* ---------- Layout ---------- */
.main { max-width: 640px; margin: 0 auto; padding: 16px; outline: none; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.hero { padding: 20px 4px 12px; }
.hero-small { padding-bottom: 4px; }
.eyebrow { color: var(--pink); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; margin-bottom: 4px; }
.neon-title {
  font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; letter-spacing: -.01em;
  color: var(--green); text-shadow: var(--glow-green);
  overflow-wrap: break-word;
}
.hero-summary { color: var(--text); opacity: .9; font-size: 1.05rem; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin: 14px 0;
}
.card-pink { border-color: var(--pink-dim); box-shadow: inset 0 0 0 1px rgba(255, 63, 164, .15); }
.card-pink h2 { color: var(--pink); }
.card-success { border-color: var(--green-dim); box-shadow: var(--glow-green); }

/* ---------- Pills / status ---------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700;
  border: 1px solid currentColor;
}
.pill-open, .pill-approved { color: var(--green); }
.pill-voting { color: var(--pink); }
.pill-upcoming, .pill-pending { color: var(--amber); }
.pill-ended { color: var(--muted); }
.pill-rejected { color: var(--danger); }

/* ---------- Countdown ---------- */
.countdown {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 16px; border: 1px solid var(--pink-dim); border-radius: var(--radius);
  background: rgba(255, 63, 164, .06);
}
.countdown-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.countdown-value {
  display: flex; flex-wrap: nowrap; gap: .45em; white-space: nowrap;
  font-size: clamp(1.25rem, 6.4vw, 1.6rem); font-weight: 800; color: var(--pink); text-shadow: var(--glow-pink);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.cd-part { display: inline-flex; align-items: baseline; }
.cd-num { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.cd-unit { font-size: .7em; margin-left: .08em; opacity: .85; }

/* ---------- Dates ---------- */
.dates { margin: 0; display: grid; gap: 10px; }
.date-row { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--line); }
.date-row.active { border-left-color: var(--green); }
.date-row dt { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.date-row dd { margin: 0; font-weight: 600; }

/* ---------- Partner / rules ---------- */
.partner { text-align: center; }
.partner h2 { text-align: left; }
.partner-logo { margin: 12px auto 8px; max-height: 80px; width: auto; max-width: min(100%, 300px); }
.partner-name { font-weight: 700; margin: 4px 0; }
.rules { margin: 0; padding-left: 1.3rem; display: grid; gap: 8px; }
.rules li::marker { color: var(--pink); font-weight: 700; }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  font: 700 1rem var(--font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .1s ease, box-shadow .2s ease;
}
.btn.is-pressed { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: progress; }
.btn-primary { background: var(--green); color: #04130a; box-shadow: var(--glow-green); }
.btn-ghost { background: transparent; color: var(--pink); border-color: var(--pink); }
.btn-block { width: 100%; }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-small { min-height: 40px; font-size: .85rem; margin-top: 12px; }
.link { color: var(--pink); font-weight: 600; }

/* ---------- Form ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; position: relative; }
.label { font-weight: 700; font-size: .9rem; }
input[type="text"], textarea {
  width: 100%; font: 16px var(--font); /* 16px stops iPhone from zooming in */
  color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
input[type="text"]:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--glow-green); }
textarea { resize: vertical; min-height: 90px; }
.counter { justify-self: end; font-size: .78rem; color: var(--muted); }
.hint { font-size: .82rem; color: var(--muted); margin: 0; }
.badge-ok { margin: 0; font-size: .85rem; font-weight: 700; color: var(--green); }
.error { color: var(--danger); font-weight: 600; margin: 0; }

.dropzone {
  display: grid; place-items: center; gap: 10px; min-height: 180px; padding: 12px;
  border: 2px dashed var(--green-dim); border-radius: var(--radius); background: var(--bg-2);
  cursor: pointer; text-align: center; overflow: hidden;
}
.dropzone:hover, .dropzone:focus-within { border-color: var(--green); }
.dropzone img { max-height: 340px; border-radius: 10px; object-fit: contain; }
.dropzone-text { font-weight: 700; color: var(--green); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--green); flex: none; margin-top: 1px; }

/* ---------- Entry ---------- */
.entry { margin: 12px 0 0; display: grid; gap: 10px; }
.entry img { border-radius: 12px; width: 100%; max-height: 420px; object-fit: cover; }
.entry figcaption p { margin: 4px 0 0; }

/* ---------- Bottom nav ---------- */
.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10, 13, 11, .95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--muted); text-decoration: none; font-size: .7rem; font-weight: 600;
}
.nav-icon { font-size: 1.25rem; line-height: 1; }
.bottomnav a.active { color: var(--green); }
.bottomnav a.active .nav-icon { text-shadow: var(--glow-green); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* ---------- Login / sign-up ---------- */
.tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.tabs button {
  background: none; border: 0; color: var(--muted); font: 700 .95rem var(--font); min-height: 44px; cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--pink); color: #1a0410; box-shadow: var(--glow-pink); }
input[type="email"], input[type="password"] {
  width: 100%; font: 16px var(--font); color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
input[type="email"]:focus, input[type="password"]:focus { outline: none; border-color: var(--green); box-shadow: var(--glow-green); }
.check a { color: var(--pink); }
.link-button {
  background: none; border: 0; color: var(--pink); font: 600 .9rem var(--font);
  text-decoration: underline; cursor: pointer; padding: 8px; justify-self: center;
}

/* ---------- Text pages (terms) ---------- */
.prose h1 { font-size: 1.5rem; color: var(--green); }
.prose h2 { margin-top: 1.2rem; }
.prose ul { padding-left: 1.2rem; display: grid; gap: 6px; }

/* ---------- Admin ---------- */
.admin-bar {
  position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 5;
  display: grid; gap: 8px; padding: 10px 0; background: var(--bg);
}
select {
  width: 100%; font: 16px var(--font); color: var(--text); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-height: 44px;
}
.tabs-3 { grid-template-columns: repeat(3, 1fr); }
.tabs-3 button { font-size: .85rem; padding: 0 4px; }
.tabs .count {
  display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 2px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); font-variant-numeric: tabular-nums;
}
.admin-list { display: grid; gap: 0; }
.review { padding: 0; overflow: hidden; }
.review-photo {
  width: 100%; height: auto; max-height: 42vh; object-fit: cover; background: #000; cursor: zoom-in;
}
.review-photo.zoomed { max-height: none; object-fit: contain; cursor: zoom-out; }
.review-body { padding: 14px 16px 4px; display: grid; gap: 4px; }
.review-body p { margin: 0; }
.review-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.review-strain { color: var(--green); font-weight: 700; }
.review-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; padding: 12px 16px 16px; }
.btn-reject { background: transparent; color: var(--danger); border-color: var(--danger); }
.toast {
  position: fixed; z-index: 20;
  left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 12px);
  max-width: 616px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: #1d2621; border: 1px solid var(--green-dim); box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.toast button {
  background: none; border: 0; color: var(--pink); font: 700 .95rem var(--font); cursor: pointer;
  min-height: 40px; padding: 0 8px; text-transform: uppercase; letter-spacing: .05em;
}

/* ---------- Header menu ---------- */
.menu-button {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: none; border: 1px solid var(--line); color: var(--text); font-size: 1.2rem; cursor: pointer;
}
.menu-button:focus-visible, .menu-link:focus-visible, .btn:focus-visible, .tabs button:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.menu { position: fixed; inset: 0; z-index: 30; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .65); }
.menu-sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px;
  background: var(--black); border-left: 1px solid var(--line);
}
.menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.menu-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 52px; padding: 0 12px; border-radius: 12px;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem;
}
.menu-link:hover { background: var(--bg-2); }
.menu-link.active { color: var(--green); background: var(--bg-2); }

.demo-phase { display: inline-flex; align-items: center; gap: 6px; }
.demo-phase select { width: auto; min-height: 30px; padding: 2px 8px; font-size: .8rem; color: var(--amber); }

/* ---------- Start page ---------- */
.home-hero { padding-bottom: 0; }
.home-title {
  font-size: clamp(1.7rem, 7.5vw, 2.4rem); font-weight: 800; line-height: 1.1; text-wrap: balance;
  color: var(--text); margin: 0 0 .4rem;
}
.battle-card { border-color: var(--green-dim); box-shadow: 0 0 0 1px rgba(57, 255, 136, .12), 0 10px 40px rgba(57, 255, 136, .06); }
.battle-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.battle-card-head .eyebrow { margin: 0; }
.battle-card-title { font-size: 1.8rem; text-transform: none; letter-spacing: 0; color: var(--green); text-shadow: var(--glow-green); margin: 6px 0 8px; }
.home-section { margin: 26px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.thumb { position: relative; display: block; aspect-ratio: 1; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  font-size: .72rem; font-weight: 700; color: var(--text);
  background: linear-gradient(transparent, rgba(0, 0, 0, .8));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.step { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.step p { margin: 2px 0 0; }
.step-num {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--pink); color: var(--pink); font-weight: 800; text-shadow: var(--glow-pink);
}

/* ---------- Prize ---------- */
.prize-text { font-size: 1.15rem; font-weight: 700; }

/* ---------- Standings ---------- */
.notice { padding: 14px 16px; }
.notice p { margin: 0 0 8px; }
.notice p:last-child { margin: 0; }
.notice-ok { border-color: var(--green-dim); color: var(--green); font-weight: 700; }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rank-item {
  display: grid; grid-template-columns: auto 96px 1fr; gap: 12px; align-items: start;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card);
}
.rank-item:not(:has(.rank-num)) { grid-template-columns: 96px 1fr; }
.rank-num {
  min-width: 2ch; font-size: 1.6rem; font-weight: 800; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center; line-height: 1.2;
}
.rank-top { border-color: var(--pink-dim); box-shadow: 0 0 0 1px rgba(255, 63, 164, .2), 0 0 30px rgba(255, 63, 164, .08); }
.rank-top .rank-num { color: var(--pink); text-shadow: var(--glow-pink); }
.rank-voted { border-color: var(--green-dim); }
.rank-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; cursor: zoom-in; background: var(--bg-2); }
.rank-item.expanded { grid-template-columns: 1fr; }
.rank-item.expanded .rank-photo { width: 100%; height: auto; max-height: 75vh; object-fit: contain; cursor: zoom-out; }
.rank-body { display: grid; gap: 4px; min-width: 0; }
.rank-body p { margin: 0; }
.rank-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: break-word; }
.rank-strain { color: var(--green); font-weight: 700; font-size: .92rem; }
.rank-votes { font-weight: 700; }
.rank-votes .tabular { font-size: 1.15rem; color: var(--pink); font-variant-numeric: tabular-nums; }
.rank-myvote { color: var(--green); font-weight: 700; }
.rank-body .btn-small { margin-top: 6px; justify-self: start; }

/* ---------- Test battles (admins only) ---------- */
.test-notice {
  margin: 12px 0 0; padding: 10px 14px; border-radius: 12px;
  border: 1px dashed var(--amber); background: rgba(255, 201, 74, .08); color: var(--amber);
  font-size: .85rem; font-weight: 700;
}
.admin-links { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   TROPHY STYLE (look only): calm dark base, neon only where it matters
   (battle card, countdown, Vote button, #1 entry), gold for #1 and
   trophy details. Glows are static shadows; the two pulses change only
   opacity (cheap on phones) and stop when reduced motion is requested.
   ===================================================================== */
:root {
  --gold: #f2c14e;
  --gold-soft: rgba(242, 193, 78, .55);
  --gold-glow: 0 0 0 1px rgba(242, 193, 78, .35), 0 0 18px rgba(242, 193, 78, .45), 0 0 42px rgba(242, 193, 78, .18);
  --line-calm: rgba(233, 255, 242, .09);
}

/* Calm by default: thin quiet borders, no glow */
.card, .step { border: 1px solid var(--line-calm); box-shadow: none; }
.card-success { box-shadow: none; border-color: var(--green-dim); }
.neon-title { text-shadow: 0 0 14px rgba(57, 255, 136, .25); }
.btn-primary { box-shadow: none; }
.btn-ghost { border-width: 1.5px; }
.tabs button[aria-selected="true"] { box-shadow: none; }
.bottomnav a.active .nav-icon { text-shadow: none; }
.eyebrow { letter-spacing: .14em; }

/* Gold accents: trophy details */
.card-pink { border-color: rgba(242, 193, 78, .35); box-shadow: none; }
.card-pink h2 { color: var(--gold); }
.prize-text { color: var(--text); }
.step-num { border-color: var(--gold); color: var(--gold); text-shadow: none; }

/* ---------- Start page: trophy hero, full width, fading into the page ---------- */
.home-hero-media {
  position: relative; margin: -16px -16px 0; overflow: hidden;
  background: var(--bg);
}
.home-hero-media img {
  display: block; width: 100%; max-width: 100%; height: auto;
  aspect-ratio: 860 / 894; max-height: 64vh; object-fit: cover; object-position: center 20%;
}
/* extra soft fade so the edge disappears even when the picture is cropped */
.home-hero-media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(rgba(10, 13, 11, 0), var(--bg) 92%);
}
.home-hero { position: relative; z-index: 1; margin-top: -92px; padding-top: 0; }
.home-hero .home-title, .home-hero .hero-summary { text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
@media (min-width: 680px) {
  .home-hero-media { margin-left: 0; margin-right: 0; border-radius: 0 0 var(--radius) var(--radius); }
}

/* ---------- Neon where it matters ---------- */
/* 1. Battle card */
.battle-card {
  border: 1.5px solid rgba(57, 255, 136, .75);
  box-shadow: 0 0 0 1px rgba(57, 255, 136, .2), 0 0 22px rgba(57, 255, 136, .35), 0 0 54px rgba(57, 255, 136, .12);
}
/* 2. Countdown: pink glow with a slow pulse */
.countdown { position: relative; border-color: rgba(255, 63, 164, .7); box-shadow: 0 0 16px rgba(255, 63, 164, .3); }
.countdown::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 20px 2px rgba(255, 63, 164, .5), 0 0 44px 6px rgba(255, 63, 164, .18);
  opacity: .2; animation: glow-pulse 2.8s ease-in-out infinite;
}
@keyframes glow-pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ---------- Entry cards (Standings) ---------- */
.ranking { gap: 22px; }
.entry-card { display: grid; gap: 10px; list-style: none; }
.entry-frame {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%;
  border-radius: 16px; background: #050705;
  border: 1.5px solid rgba(57, 255, 136, .55);
  box-shadow: 0 0 12px rgba(57, 255, 136, .14);
}
.entry-frame img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.entry-card.expanded .entry-frame { aspect-ratio: auto; }
.entry-card.expanded .entry-frame img { height: auto; max-height: 80vh; object-fit: contain; cursor: zoom-out; }
.rank-pill, .featured-pill {
  position: absolute; top: 10px; padding: 4px 11px; border-radius: 999px;
  font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums;
}
.rank-pill { left: 10px; background: var(--pink); color: #1a0410; }
.rank-pill-gold { background: var(--gold); color: #2a1c00; box-shadow: 0 0 12px rgba(242, 193, 78, .6); }
.featured-pill { right: 10px; background: rgba(10, 13, 11, .85); color: var(--gold); border: 1px solid var(--gold-soft); }
/* 4. The #1 entry: gold frame with glow */
.entry-top .entry-frame { border: 2px solid var(--gold); box-shadow: var(--gold-glow); }
.entry-body { display: grid; gap: 6px; padding: 0 2px; }
.entry-body p { margin: 0; }
.entry-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.05rem; overflow-wrap: break-word; }
.entry-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.entry-info { min-width: 0; display: grid; gap: 2px; }
.entry-strain { color: var(--pink); font-weight: 700; overflow-wrap: break-word; }
.entry-votes { color: var(--muted); font-size: .9rem; }
.entry-votes .tabular { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.entry-top .entry-votes .tabular { color: var(--gold); }
.your-vote { flex: none; color: var(--green); font-weight: 700; font-size: .9rem; }

/* 3. Vote button: green neon pill with a gentle pulse */
.btn-vote {
  position: relative; flex: none; min-height: 44px; padding: 0 20px;
  background: rgba(57, 255, 136, .06); color: var(--green); border: 1.5px solid var(--green);
  box-shadow: 0 0 12px rgba(57, 255, 136, .4);
}
.btn-vote::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 16px 3px rgba(57, 255, 136, .55);
  opacity: .15; animation: glow-pulse 2.2s ease-in-out infinite;
}
.btn-vote.is-armed { background: var(--green); color: #03130a; white-space: normal; }

@media (prefers-reduced-motion: reduce) {
  .countdown::after, .btn-vote::after { animation: none; opacity: .5; }
}

/* ---------- Badges ---------- */
.badges { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; vertical-align: middle; }
.badge-btn {
  display: inline-grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%;  /* comfortable tap target around a small icon */
}
.badge-btn img { width: 22px; height: 22px; object-fit: contain; }
.badges-large .badge-btn { width: 40px; height: 40px; }
.badges-large .badge-btn img { width: 32px; height: 32px; }
.badge-btn:focus-visible { outline: 2px solid var(--gold, #f2c14e); outline-offset: 1px; }
.profile-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.profile-name .badges { margin-left: 0; text-shadow: none; }
.badge-tip {
  position: fixed; z-index: 40; max-width: 70vw; padding: 7px 12px; border-radius: 10px;
  background: #111712; color: var(--text); border: 1px solid rgba(242, 193, 78, .55);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .6); font-size: .85rem; font-weight: 700; pointer-events: none;
}
.tests-title { margin: 0; font-size: 1.15rem; text-transform: none; letter-spacing: 0; }
.card .admin-links { margin-top: 10px; }

/* ---------- Champion popup ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, .75);
}
.modal {
  width: min(100%, 420px); max-height: 100%; overflow-y: auto;
  display: grid; gap: 12px; text-align: center; padding: 22px 18px;
  border-radius: var(--radius); background: var(--card); color: var(--text);
}
.modal p { margin: 0; }
.champion-modal, .modal:has(.champion-picked) {
  border: 1.5px solid var(--gold, #f2c14e);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .3), 0 0 26px rgba(242, 193, 78, .35);
}
.champion-eyebrow { color: var(--gold, #f2c14e); margin: 0; }
.champion-title { margin: 0; font-size: 1.5rem; text-transform: none; letter-spacing: 0; color: var(--gold, #f2c14e); }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 16px; cursor: pointer;
  background: var(--bg-2); color: var(--text); border: 1.5px solid var(--line); font: 700 1rem var(--font);
}
.choice img { width: 88px; height: 88px; }
.choice:hover, .choice:focus-visible { border-color: var(--gold, #f2c14e); outline: none; box-shadow: 0 0 16px rgba(242, 193, 78, .35); }
.choice:disabled { opacity: .6; cursor: progress; }
.champion-picked { justify-self: center; width: 96px; height: 96px; }

/* ---------- Badges page ---------- */
.badges-count { margin: 6px 0 0; color: var(--muted); }
.badges-count strong { color: var(--gold, #f2c14e); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.badge-grid { list-style: none; margin: 16px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.badge-card {
  display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center;
  padding: 16px 10px 12px; border-radius: 16px; background: var(--card); border: 1px solid var(--line-calm, var(--line));
}
.badge-card-imgs { display: flex; justify-content: center; gap: 6px; min-height: 64px; }
.badge-card-imgs img { width: 64px; height: 64px; object-fit: contain; }
.badge-card-name { margin: 0; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.badge-card-rule { margin: 0; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.badge-card-state { margin: 2px 0 0; font-size: .78rem; font-weight: 700; }
.is-unlocked { border-color: rgba(242, 193, 78, .55); }
.is-unlocked .badge-card-state { color: var(--gold, #f2c14e); }
.is-locked .badge-card-imgs img { filter: grayscale(1) brightness(.55); opacity: .55; }
.is-locked .badge-card-name { color: var(--muted); }
.is-locked .badge-card-state { color: var(--muted); }
.badge-grid-small .badge-card-imgs { min-height: 48px; }
.badge-grid-small .badge-card-imgs img { width: 48px; height: 48px; }
.badges-inactive { margin-top: 26px; padding-top: 16px; border-top: 1px dashed var(--line); }
.badges-admin-bar { margin-top: 0; }
.badge-drop {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px dashed var(--green-dim); background: var(--bg-2); color: var(--green); font-weight: 700;
}
.badge-drop img { width: 72px; height: 72px; object-fit: contain; }

/* ---------- Business "Interested?" form ---------- */
.interest-form { margin: 14px 0; }
.interest-done { margin: 14px 0; font-size: 1rem; }

/* ---------- Share cards (admin, approved entries) ---------- */
.share-card { display: grid; gap: 10px; padding: 12px 12px 0; }
.share-card-wait { text-align: center; padding: 60px 0; margin: 0; }
.share-card-img { width: 100%; height: auto; aspect-ratio: 1080 / 1350; border-radius: 12px; display: block; }
.share-card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-card-actions .btn { flex: 1 1 auto; }

/* =====================================================================
   NEON ENTRY CARD (same design as the 1080 × 1350 download card).
   --u = one "card pixel"; everything scales with the card's width.
   ===================================================================== */
.ncard { display: grid; gap: 10px; min-width: 0; list-style: none; align-content: start; }
/* the photo is the card: one thin neon frame, the card takes the photo's own shape */
.ncard-in {
  position: relative; width: 100%; overflow: hidden; border-radius: 16px; background: #000;
  border: 2px solid var(--neon-green, #a8ff3e);
  box-shadow: 0 0 14px rgba(150, 255, 60, .45), 0 0 30px rgba(150, 255, 60, .15);
  font-family: var(--font);
}
.ncard-top .ncard-in { border-color: var(--gold, #f2c14e); box-shadow: 0 0 16px rgba(242, 193, 78, .55), 0 0 34px rgba(242, 193, 78, .2); }
.ncard-photo { display: block; width: 100%; height: auto; object-fit: contain; background: #000; }
.ncard-pill {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 3px 11px; border-radius: 999px; font-size: .86rem; font-weight: 900; line-height: 1.3;
  background: var(--pink); color: #1a0410; box-shadow: 0 0 12px var(--pink); white-space: nowrap;
}
.ncard-top .ncard-pill { background: var(--gold, #f2c14e); color: #2a1c00; box-shadow: 0 0 12px var(--gold, #f2c14e); }
/* grower + strain on a see-through dark strip at the bottom of the photo */
.ncard-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: grid; gap: 2px; padding: 34px 12px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .86));
}
.ncard-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ncard-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; }
a.ncard-name:focus-visible, .ncard-insta:focus-visible { outline: 2px solid var(--neon-green, #a8ff3e); outline-offset: 2px; border-radius: 999px; }
.ncard-avatar { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #000; border: 1.5px solid var(--neon-green, #a8ff3e); }
.ncard-name-txt { font-size: .98rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.ncard-insta { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .35); }
.ncard-insta svg { width: 16px; height: 16px; }
@media (hover: hover) { .ncard-insta:hover { color: var(--neon-green, #a8ff3e); border-color: var(--neon-green, #a8ff3e); } }
.ncard-strain {
  margin: 0; font-size: 1rem; font-weight: 800; color: #ff7ec0; text-shadow: 0 0 10px rgba(255, 63, 164, .7), 0 1px 3px rgba(0, 0, 0, .9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* small cards (grids, profile history, home scroller) */
.ncard-compact .ncard-strip { padding: 26px 9px 8px; }
.ncard-compact .ncard-name-txt { font-size: .84rem; }
.ncard-compact .ncard-strain { font-size: .86rem; }
.ncard-compact .ncard-avatar, .ncard-compact .ncard-insta { width: 24px; height: 24px; }
.ncard-compact .ncard-insta svg { width: 14px; height: 14px; }
.ncard-compact .ncard-pill { font-size: .76rem; padding: 2px 9px; left: 8px; top: 8px; }

/* under the card: badges + Vote button */
.ncard-below { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; flex-wrap: wrap; }
.ncard-below .badges { margin-left: 0; }
.ncard-grid { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ncard-scroller {
  list-style: none; margin: 10px -16px 0; padding: 4px 16px 12px; display: grid; grid-auto-flow: column;
  grid-auto-columns: 74%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
}
.ncard-scroller > .ncard { scroll-snap-align: start; align-self: start; }
.ncard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.ncard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ncard-meta .entry-votes { color: var(--muted); font-size: .92rem; }
.ncard-meta .entry-votes .tabular { color: var(--text); font-weight: 800; }
.pill-gold { color: var(--gold, #f2c14e); }
.turnstile-slot { min-height: 65px; display: flex; justify-content: center; }

/* =====================================================================
   BIG PROFILE PAGE + grow-setup themes
   ===================================================================== */
.pf {
  --pf-accent: var(--green); --pf-accent-2: var(--pink); --pf-glow: rgba(57, 255, 136, .35);
  --pf-bg: radial-gradient(120% 80% at 50% -10%, rgba(57, 255, 136, .14), transparent 60%);
  position: relative; display: grid; gap: 14px; margin: -16px -16px 0; padding: 0 16px 8px;
  background: var(--pf-bg); border-radius: 0 0 24px 24px;
}
/* Grow-setup themes: same neon light bar for all, only the colour changes */
.pf-theme-zelt { --pf-accent: #d58bff; --pf-accent-2: #ff6fd8; --pf-glow: rgba(213, 139, 255, .45); --pf-rgb: 213, 139, 255; --pf-dark: #120a18; }
.pf-theme-raum { --pf-accent: #ffa63d; --pf-accent-2: #ffd08a; --pf-glow: rgba(255, 166, 61, .45); --pf-rgb: 255, 166, 61; --pf-dark: #170f06; }
.pf-theme-outdoor { --pf-accent: #ffdc3d; --pf-accent-2: #fff3a6; --pf-glow: rgba(255, 220, 61, .45); --pf-rgb: 255, 220, 61; --pf-dark: #161306; }
.pf-theme-gewaechshaus { --pf-accent: #4dffc8; --pf-accent-2: #b8fff0; --pf-glow: rgba(77, 255, 200, .42); --pf-rgb: 77, 255, 200; --pf-dark: #06160f; }
.pf-theme-balkon { --pf-accent: #ff5fa8; --pf-accent-2: #ffb08a; --pf-glow: rgba(255, 95, 168, .45); --pf-rgb: 255, 95, 168; --pf-dark: #180812; }
.pf-theme-growbox { --pf-accent: #a9c7e6; --pf-accent-2: #e3eef8; --pf-glow: rgba(150, 190, 230, .42); --pf-rgb: 150, 190, 230; --pf-dark: #0b1118; }
.pf[class*="pf-theme-"]:not(.pf-theme-none) {
  --pf-bg: radial-gradient(90% 60% at 50% -5%, rgba(var(--pf-rgb), .36), transparent 62%), linear-gradient(var(--pf-dark), var(--bg) 70%);
}

.pf-head { position: relative; display: grid; justify-items: center; gap: 6px; text-align: center; padding: 26px 0 18px; }
.pf-head > *:not(.pf-art) { position: relative; z-index: 1; }
/* theme artwork lives ONLY in this top strip (behind the avatar) – the name, @handle and
   "member since" always sit below it, so text never overlaps the drawing */
.pf-art { position: absolute; left: -16px; right: -16px; top: 0; height: 112px; pointer-events: none; z-index: 0; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 18%, var(--pf-accent) 18% 82%, transparent 82%) 0 10px / 100% 6px no-repeat,
    radial-gradient(42% 90% at 50% 0%, var(--pf-glow), transparent 72%);
  filter: drop-shadow(0 0 8px var(--pf-accent)); }
.pf-avatar { position: relative; width: 128px; height: 128px; }
.pf-accent-green { --pf-accent: var(--green); --pf-accent-2: var(--pink); --pf-glow: rgba(57, 255, 136, .5); }
.pf-accent-pink { --pf-accent: var(--pink); --pf-accent-2: var(--green); --pf-glow: rgba(255, 63, 164, .5); }
.pf-accent-gold { --pf-accent: #ffc94a; --pf-accent-2: #fff1a8; --pf-glow: rgba(255, 201, 74, .5); }
.pf-accent-cyan { --pf-accent: #3ff0ff; --pf-accent-2: #b6fbff; --pf-glow: rgba(63, 240, 255, .5); }
.pf-accent-purple { --pf-accent: #b36bff; --pf-accent-2: #ff8be0; --pf-glow: rgba(179, 107, 255, .5); }
.pf-accent-orange { --pf-accent: #ff8a3d; --pf-accent-2: #ffd28a; --pf-glow: rgba(255, 138, 61, .5); }
.pf-avatar img {
  width: 128px; height: 128px; border-radius: 50%; object-fit: cover; background: #000;
  border: 3px solid var(--pf-accent); box-shadow: 0 0 0 5px rgba(0, 0, 0, .6), 0 0 0 7px var(--pf-accent-2), 0 0 30px var(--pf-glow);
}
.pf-soon {
  position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 800;
  background: #111712; color: var(--amber); border: 1px solid rgba(255, 201, 74, .5);
}
.pf-name { margin: 10px 0 0; font-size: clamp(1.7rem, 8vw, 2.3rem); font-weight: 800; color: var(--text); text-shadow: 0 0 22px var(--pf-glow); overflow-wrap: break-word; }
.pf-insta { color: var(--pf-accent); font-weight: 700; text-decoration: none; }
.pf-insta:hover { text-decoration: underline; }
.pf-tags { justify-content: center; align-items: center; margin-top: 4px; }
.pf-since { color: var(--muted); font-size: .85rem; align-self: center; }

.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-stat {
  display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; text-align: center;
  background: rgba(10, 13, 11, .75); border: 1px solid var(--line-calm, var(--line));
}
.pf-stat b { font-size: 1.5rem; color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.pf-stat span { font-size: .75rem; color: var(--muted); }
.pf-card { padding: 16px; border-radius: 18px; background: rgba(14, 19, 16, .88); border: 1px solid var(--line-calm, var(--line)); }
.pf-card h2 { margin: 0 0 10px; color: var(--pf-accent); }
.pf-card .section-head h2 { margin: 0; }
.pf-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-fact dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.pf-fact dd { margin: 0; font-weight: 700; overflow-wrap: break-word; }
.pf-bio { margin: 12px 0 0; line-height: 1.45; }
.pf-badges { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pf-badges li { display: grid; justify-items: center; gap: 4px; text-align: center; font-size: .68rem; color: var(--muted); line-height: 1.2; }
.pf-badge { width: 60px; height: 60px; }
.pf-badge img { width: 54px; height: 54px; }
.pf-hist-cap { margin: 0; font-size: .78rem; line-height: 1.35; padding: 0 2px; }
.pf-hist-cap a { color: var(--text); font-weight: 700; text-decoration: none; }
.pf-soon-tile { opacity: .7; display: grid; gap: 4px; justify-items: start; }
.pf-soon-tile p { margin: 0; }
.pf-form { display: grid; gap: 14px; }
.pf-setups legend { margin-bottom: 6px; }

/* chips on the public profile */
.pf-chip-rows { display: grid; gap: 10px; margin-top: 14px; }
.pf-chip-row { display: grid; gap: 5px; }
.pf-chip-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
/* =====================================================================
   THE CHIP – one shared style for every chip and option button in the app
   (class "bb-chip"). Read-only chips = the "not selected" look.
   ===================================================================== */
.bb-chip {
  display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  padding: 6px 13px; border-radius: 999px; border: 1px solid rgba(142, 226, 159, .22);
  background: rgba(255, 255, 255, .02); color: #d9e2db;
  font: 600 13px/1.25 var(--font); text-transform: none; letter-spacing: 0;
  white-space: nowrap; word-break: keep-all; text-decoration: none; box-shadow: none; text-shadow: none;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.bb-chip-icon { font-size: 13px; line-height: 1; }
button.bb-chip, label.bb-chip, a.bb-chip { cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  button.bb-chip:hover:not([aria-pressed="true"]), label.bb-chip:hover:not(:has(input:checked)), a.bb-chip:hover { border-color: rgba(142, 226, 159, .5); }
}
button.bb-chip.is-pressed, label.bb-chip.is-pressed, a.bb-chip.is-pressed { transform: scale(.97); }
/* selected = mint fill, dark text */
.bb-chip[aria-pressed="true"], .bb-chip:has(input:checked) { background: #8ee29f; color: #0b1a10; border-color: #8ee29f; }
.bb-chip:disabled, .bb-chip[aria-disabled="true"], .bb-chip:has(input:disabled) { opacity: .4; cursor: default; }
.bb-chip:focus-visible, .bb-chip:has(input:focus-visible) { outline: 2px solid #8ee29f; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bb-chip { transition: none; }
.bb-chip.is-pressed { transform: none; } }
.pf-setup-opt input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pf-setup-opt { position: relative; }
/* neon cards + headings (profile, editor) */

/* chip rows: 8px gap, wrap to the next line */
.pf-chips, .opt-chips, .match-tags, .pf-setups, .pf-tags, .admin-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-stage { display: inline-flex; }
/* tap-to-choose chips in the editor */
.opt-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt-chips { margin-top: 6px; }
.pf-setups { border: 0; padding: 0; margin: 0; }
.accent-swatch:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.accent-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.accent-swatch { width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; background: #000; border: 2px solid var(--line); display: grid; place-items: center; }
.accent-swatch span { width: 28px; height: 28px; border-radius: 50%; background: var(--pf-accent); box-shadow: 0 0 10px var(--pf-glow); }
.accent-swatch[aria-pressed="true"] { border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, .6), 0 0 16px var(--pf-glow); }
.pf-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pf-match-tile .btn { margin-top: 10px; }

/* STRAIN MATCH */
.match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.match-card {
  padding: 14px; border-radius: 18px; background: rgba(14, 19, 16, .9); border: 1.5px solid rgba(57, 255, 136, .45);
  box-shadow: 0 0 18px rgba(57, 255, 136, .12), inset 0 0 0 1px rgba(255, 63, 164, .12); display: grid; gap: 10px;
}
.match-card:first-child { border-color: var(--pink); box-shadow: 0 0 22px rgba(255, 63, 164, .25); }
.match-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.match-rank { font-weight: 900; color: var(--pink); font-size: 1.05rem; }
.match-name { margin: 0; font-size: 1.15rem; overflow-wrap: break-word; color: var(--text); }
.match-pct { display: grid; justify-items: center; line-height: 1; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--green); box-shadow: 0 0 12px rgba(57, 255, 136, .35); }
.match-pct b { color: var(--green); font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.match-pct small { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.match-flavours { margin: 0; font-size: .85rem; color: var(--pink); font-weight: 700; }
.match-flavours span { opacity: .6; }
.match-flavours span.is-fav { opacity: 1; text-shadow: 0 0 10px rgba(255, 63, 164, .6); }
.match-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--text); }
.match-note { text-align: center; margin-top: 14px; }

/* INSTALL THE APP */
.install-banner {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; position: relative;
  padding: 12px 36px 12px 12px; margin: 0 0 14px; border-radius: 16px; background: rgba(14, 19, 16, .92);
  border: 1.5px solid rgba(57, 255, 136, .5); box-shadow: 0 0 16px rgba(57, 255, 136, .15);
}
.install-banner img { border-radius: 10px; }
.install-banner .btn-small { margin-top: 0; }
.install-banner-text { display: grid; gap: 2px; min-width: 0; }
.install-banner-text b { font-size: .92rem; line-height: 1.2; }
.install-banner-text span { font-size: .78rem; color: var(--muted); line-height: 1.3; }
.install-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: none; color: var(--muted); font-size: 1rem; cursor: pointer; border-radius: 50%; }
.install-close:hover { color: var(--text); }
@media (max-width: 380px) {
  .install-banner { grid-template-columns: 40px minmax(0, 1fr); }
  .install-banner [data-install-go] { grid-column: 1 / -1; justify-self: stretch; }
}
.menu-install { display: flex; width: 100%; text-align: left; font-family: inherit; background: none; border: 0; cursor: pointer; color: var(--text); }
.install-guide .modal { text-align: left; }
.ig-icon { display: block; margin: 0 auto 8px; border-radius: 14px; }
.ig-steps { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.ig-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ig-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #04110a; background: var(--green); }
.ig-pic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #1b1f1c; border: 1px solid var(--line); color: #4da3ff; }
.ig-pic svg { width: 24px; height: 24px; }
.ig-add { padding: 4px 10px; border-radius: 8px; background: #1b1f1c; border: 1px solid var(--line); color: #4da3ff; font-weight: 700; font-size: .85rem; }

/* ---------- profile name popup ---------- */
.name-modal { text-align: left; border: 1.5px solid var(--green-dim); }
.name-modal .eyebrow, .name-modal .name-title { margin: 0; }
.name-title { font-size: 1.4rem; text-transform: none; letter-spacing: 0; }

/* ---------- admin: suspicious votes ---------- */
.vc-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.vc-row { margin: 0; }
.vc-flagged { border-color: rgba(255, 90, 110, .6); }
.vc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vc-nums { margin: 10px 0 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.vc-nums dt { font-size: .68rem; color: var(--muted); }
.vc-nums dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.vc-votes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.vc-votes li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.btn-reject.is-armed { background: var(--danger); color: #fff; }
.review-insta { color: var(--pink); font-weight: 700; text-decoration: none; font-size: .9rem; }

/* =====================================================================
   WELCOME / LOGIN / LOGOUT POPUP
   sign-up: kangaroo hops in · login: penguin slides in · logout: hippie + neon door
   ===================================================================== */
.wl-overlay {
  --t-text: .9s; /* when the big text pops in */
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; cursor: pointer; overflow: hidden;
  background: radial-gradient(60% 45% at 50% 40%, rgba(57, 255, 136, .10), transparent 70%), rgba(3, 5, 4, .97);
  animation: wl-fade-in .18s ease-out both;
}
.wl-signup { --t-text: 1.05s; }
.wl-login { --t-text: 2.35s; }
.wl-logout { --t-text: 2.45s; }
.wl-overlay.wl-out { animation: wl-fade-out .25s ease-in both; }
.wl-stage { position: relative; display: grid; justify-items: center; gap: 14px; padding: 0 16px; text-align: center; width: 100%; }
.wl-scene { --c: min(40vw, 170px); --ch: calc(var(--c) * 1.5); --dw: min(26vw, 112px); position: relative; container-type: inline-size; width: min(92vw, 420px); height: calc(var(--ch) + 16px); }
.wl-char {
  position: absolute; left: 50%; bottom: 8px; width: var(--c); height: var(--ch); margin-left: calc(var(--c) / -2);
  transform-origin: 50% 100%; z-index: 2;
}
.wl-frames { position: absolute; inset: 0; z-index: 1; transform-origin: 50% 100%; }
.wl-frames img { position: absolute; inset: 0; visibility: hidden; }
.wl-frames img.on { visibility: visible; }
/* flipbook characters: shown at their real canvas ratio, never bigger than the frame pixels */
.wl-flip .wl-scene { --c: var(--cw); --ch: var(--chh); }
.wl-char img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; z-index: 1; filter: drop-shadow(0 0 12px rgba(57, 255, 136, .5)); }
/* neon glow behind the character (pictures have transparent backgrounds) */
.wl-glow {
  position: absolute; inset: 0 -30%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(57, 255, 136, .55), rgba(255, 63, 164, .28) 60%, transparent 100%);
  filter: blur(8px); animation: wl-neon-on .8s .1s steps(1) both, wl-pulse 1.2s .9s ease-in-out infinite alternate;
}

/* SIGN-UP: kangaroo flipbook hop + landing dust (driven by js/welcome.js) */
.wl-puff { position: absolute; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, rgba(220, 255, 235, .7), rgba(61, 255, 138, .25) 60%, transparent 70%); }
.wl-puff-spark { width: 6px; height: 6px; background: #3dff8a; box-shadow: 0 0 8px #3dff8a; }
/* LOGIN: ice spray + twinkles (penguin) */
.wl-ice { width: 6px; height: 6px; border-radius: 2px; background: #e6fbff; box-shadow: 0 0 6px #9fe8ff; }
.wl-twinkle { position: absolute; z-index: 5; font-size: 20px; line-height: 1; pointer-events: none; }
/* LOGOUT: spark burst when the door slams */
.wl-burst { position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: #3dff8a; box-shadow: 0 0 10px #3dff8a, 0 0 18px rgba(61, 255, 138, .7); }
.wl-burst.pink { background: var(--pink); box-shadow: 0 0 10px var(--pink), 0 0 18px rgba(255, 63, 164, .7); }

/* LOGIN: penguin slides in sideways on his ice block, little wobble when he stops */

/* LOGOUT: neon door on the right, hippie sways, walks through it, door slams shut */
.wl-door {
  /* no z-index/transform here: light (1) < hippie (2) < door leaf (3) < frame (4), so he walks in BEHIND the frame */
  position: absolute; right: 2%; bottom: 8px; width: min(32vw, 124px); height: 244px;
}
.wl-door-light {
  position: absolute; inset: 5px; border-radius: 40px 40px 2px 2px; z-index: 1;
  background: radial-gradient(80% 70% at 50% 60%, #ffe6a3, #ffb454 45%, #ff7a3d 85%); box-shadow: 0 0 30px rgba(255, 180, 84, .7);
  animation: wl-fade-in .25s both;
}
.wl-door-leaf {
  position: absolute; inset: 5px; border-radius: 40px 40px 2px 2px; z-index: 3; transform-origin: 0 50%;
  background: linear-gradient(160deg, #241632, #120c1a); border: 2px solid var(--pink); box-shadow: inset 0 0 14px rgba(255, 63, 164, .45);
  transform: perspective(420px) rotateY(68deg); animation: wl-fade-in .25s both;
}
.wl-door-knob { position: absolute; right: 12%; top: 54%; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.wl-door-frame {
  position: absolute; inset: 0; z-index: 4; border-radius: 46px 46px 4px 4px; pointer-events: none;
  border: 4px solid var(--green); box-shadow: 0 0 0 3px #050806, 0 0 0 5px var(--pink), 0 0 22px rgba(57, 255, 136, .75), 0 0 36px rgba(255, 63, 164, .4);
  animation: wl-fade-in .25s both, wl-neon-on .5s .05s steps(1) both;
}

/* text: pops in big with a bounce + neon flicker, second line a moment later in pink */
.wl-text { margin: 0; display: grid; gap: 4px; max-width: 100%; }
.wl-big {
  font-size: clamp(1.9rem, 10.5vw, 3.1rem); font-weight: 900; line-height: 1.05; color: var(--green);
  -webkit-text-stroke: 1.5px var(--pink); paint-order: stroke fill;
  text-shadow: 0 0 10px rgba(57, 255, 136, .9), 0 0 28px rgba(57, 255, 136, .55);
  animation: wl-text-pop .55s var(--t-text) cubic-bezier(.2, 1.7, .4, 1) both, wl-neon-on .6s var(--t-text) steps(1) both;
  overflow-wrap: break-word;
}
.wl-sub {
  font-size: clamp(1.25rem, 6.5vw, 1.7rem); font-weight: 800; color: var(--pink); overflow-wrap: break-word;
  text-shadow: 0 0 10px rgba(255, 63, 164, .85), 0 0 24px rgba(255, 63, 164, .45);
  animation: wl-text-pop .5s calc(var(--t-text) + .25s) cubic-bezier(.2, 1.6, .4, 1) both;
}
.wl-skip { font-size: .72rem; color: var(--muted); opacity: .7; animation: wl-fade-in .3s .5s both; }
.wl-spark {
  position: absolute; top: 30%; left: 50%; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: var(--green); box-shadow: 0 0 10px var(--green); opacity: 0;
  animation: wl-spark .9s calc(var(--t-text) + var(--sd, 0s)) ease-out both;
}
.wl-spark:nth-of-type(even) { background: var(--pink); box-shadow: 0 0 10px var(--pink); width: 7px; height: 7px; }
.wl-spark.s1 { --dx: -130px; --dy: -90px; }
.wl-spark.s2 { --dx: 135px; --dy: -70px; --sd: .07s; }
.wl-spark.s3 { --dx: -150px; --dy: 30px; --sd: .15s; }
.wl-spark.s4 { --dx: 150px; --dy: 45px; --sd: .03s; }
.wl-spark.s5 { --dx: -70px; --dy: -150px; --sd: .2s; }
.wl-spark.s6 { --dx: 80px; --dy: -140px; --sd: .11s; }

@keyframes wl-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wl-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes wl-pulse { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes wl-text-pop { 0% { transform: scale(.2); opacity: 0; } 65% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
/* neon sign switching on: a few quick flickers */
@keyframes wl-neon-on { 0% { filter: brightness(.3); } 15% { filter: brightness(1.2); } 25% { filter: brightness(.4); } 40% { filter: brightness(1.15); } 50% { filter: brightness(.6); } 65%, 100% { filter: none; } }
@keyframes wl-spark { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; } }

/* phone set to "reduce motion": just a gentle fade, no door, no movement */
.wl-reduced .wl-door { display: none; }
.wl-reduced .wl-char, .wl-reduced .wl-glow, .wl-reduced .wl-big, .wl-reduced .wl-sub, .wl-reduced .wl-skip { animation: wl-fade-in .35s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .wl-door { display: none; }
  .wl-char, .wl-glow, .wl-big, .wl-sub, .wl-skip { animation: wl-fade-in .35s ease-out both !important; }
}

/* =====================================================================
   DEMO DESIGN – the look of the whole app (mint, dark, gold for deals).
   Entry cards (.ncard), the popups (.wl-*) and the profile header neon
   bars keep their own look.
   ===================================================================== */
:root {
  --font-classic: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font: "DM Sans", var(--font-classic);
  --bg: #0b100c; --bg-2: #0f1913; --card: #0f1913;
  --line: rgba(142, 226, 159, .10); --line-calm: rgba(142, 226, 159, .10);
  --text: #eef3ef; --muted: #98a59b;
  --mint: #8ee29f; --mint-ink: #0b1a10; --mint-line: rgba(142, 226, 159, .28);
  --gold: #e7c467; --gold-ink: #1d1606;
  --radius: 18px;
}
/* keep these exactly as before */
.ncard, .wl-overlay, .share-card { --font: var(--font-classic); --text: #e9fff2; --muted: #8fa699; }
body { background: var(--bg); }
a { color: var(--mint); }
h1, h2 { font-weight: 700; }
h2 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.eyebrow { color: var(--gold); font-size: .72rem; letter-spacing: .14em; font-weight: 700; }
.battle-card-head .eyebrow { color: #dfe7e1; }
.neon-title { color: var(--text); text-shadow: none; font-weight: 700; letter-spacing: -.01em; }
.home-title { font-weight: 700; letter-spacing: -.01em; }
.battle-card-title { color: #cfeaff; text-shadow: none; font-size: 2rem; font-weight: 700; letter-spacing: -.01em; }
.prose h1 { color: var(--text); }
.muted, .hint, .counter { color: var(--muted); }

/* cards: dark, rounded, subtle border */
.card, .step, .pf-card, .match-card, .install-banner, .modal, .pf-stat, .notice, .name-modal {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none;
}
.battle-card, .card-pink, .card-success, .match-card:first-child { border-color: var(--line); box-shadow: none; }
.card h2, .pf-card h2, .card-pink h2, .pf-card .section-head h2 { color: var(--text); text-shadow: none; }
.pf-stat b { color: var(--text); }
.pf-chip-label, .pf-fact dt, .date-row dt { color: var(--muted); }
.date-row.active { border-left-color: var(--mint); }
.menu-sheet { background: var(--bg); }
.menu-link.active { color: var(--mint); background: rgba(142, 226, 159, .08); }
@media (hover: hover) { .menu-link:hover { background: rgba(255, 255, 255, .04); } }

/* the 3 buttons: main (mint), secondary (dark outline), gold (founding / deals) */
.btn {
  min-height: 48px; padding: 0 22px; border-radius: 999px; font: 600 15px/1.2 var(--font);
  border: 1px solid transparent; box-shadow: none; text-shadow: none;
  transition: transform .15s, background-color .15s, border-color .15s, color .15s;
}
.btn.is-pressed { transform: scale(.98); }
.btn-primary, .btn-vote.is-armed { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); box-shadow: none; text-shadow: none; }
.btn-ghost, .btn-vote, .btn-reject, .btn-danger { background: rgba(255, 255, 255, .015); color: var(--text); border: 1px solid var(--mint-line); box-shadow: none; text-shadow: none; }
.btn-reject, .btn-danger { color: #ff8a98; border-color: rgba(255, 90, 110, .35); }
.btn-reject.is-armed { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-gold { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn-primary::after, .btn-vote::after { display: none; }
.btn-small, .btn-vote { min-height: 40px; padding: 0 16px; font-size: 14px; }
@media (hover: hover) {
  .btn-primary:hover { background: #a2e9b0; border-color: #a2e9b0; }
  .btn-ghost:hover, .btn-vote:hover:not(.is-armed) { border-color: rgba(142, 226, 159, .55); }
  .btn-gold:hover { background: #efd07f; }
}
.btn:focus-visible, .menu-button:focus-visible, .menu-link:focus-visible, .tabs button:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.link, .link-button, .check a { color: var(--mint); }
.badge-ok { color: var(--mint); }

/* segmented tabs + language switch */
.tabs, .lang { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; overflow: visible; }
.tabs button, .lang button { border-radius: 999px; color: var(--muted); font-weight: 600; font-family: var(--font); }
.tabs button { min-height: 40px; }
.lang button { min-height: 28px; padding: 4px 11px; }
.tabs button[aria-selected="true"], .lang button[aria-pressed="true"] { background: var(--mint); color: var(--mint-ink); box-shadow: none; text-shadow: none; }

/* inputs */
input[type="text"], input[type="email"], input[type="password"], textarea, select { background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-family: var(--font); }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(142, 226, 159, .15); }

/* small pills */
.pill { padding: 4px 10px; font-size: .74rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.pill-open, .pill-voting, .pill-approved { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }
.pill-open::before, .pill-voting::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.pill-upcoming, .pill-pending { color: var(--gold); border-color: rgba(231, 196, 103, .35); background: rgba(231, 196, 103, .08); }
.pill-rejected { color: #ff8a98; border-color: rgba(255, 90, 110, .35); }

/* countdown: four calm boxes */
.countdown { border: 0; background: none; padding: 0; box-shadow: none; gap: 6px; }
.countdown::after { display: none; }
.countdown-label { font-size: .72rem; color: var(--muted); }
.countdown-value { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; color: var(--text); text-shadow: none; font-size: 1.35rem; font-weight: 700; }
.cd-part { flex-direction: column; align-items: center; padding: 8px 4px 6px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.cd-num { min-width: 0; text-align: center; }
.cd-unit { margin: 2px 0 0; font-size: .7rem; font-weight: 500; color: var(--muted); opacity: 1; }

/* how it works */
.step-num { width: 34px; height: 34px; border: 0; border-radius: 10px; background: #16281d; color: var(--mint); font-weight: 700; text-shadow: none; }

/* bottom bar: text only, active = mint with a small bar */
.bottomnav { background: rgba(11, 16, 12, .97); border-top: 1px solid var(--line); }
.nav-icon { display: none; }
.bottomnav a { position: relative; font-size: .8rem; font-weight: 500; }
.bottomnav a.active { color: var(--mint); }
.bottomnav a.active::before { content: ""; position: absolute; top: calc(50% - 15px); left: 50%; width: 22px; height: 3px; margin-left: -11px; border-radius: 3px; background: var(--mint); }

/* Strain Match: calm */
.match-pct { border: 1px solid var(--line); box-shadow: none; }
.match-pct b { color: var(--mint); text-shadow: none; }
.match-rank { color: var(--mint); }
.match-flavours span.is-fav { text-shadow: none; }
.install-banner { border-color: var(--line); box-shadow: none; }
.ig-num { background: var(--mint); color: var(--mint-ink); }
.rules li::marker { color: var(--mint); }
.match-flavours { color: var(--muted); }
.match-flavours span { opacity: 1; }
.match-flavours span.is-fav { color: var(--mint); }

/* COUNTDOWN – scoreboard with pink numbers and a soft pink glow */
.countdown-value { gap: 8px; }
.cd-part {
  position: relative; padding: 12px 4px 8px; border-radius: 14px; border: 1px solid rgba(255, 79, 163, .35);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 79, 163, .16), transparent 60%), #140c11;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 22px -10px rgba(255, 79, 163, .55);
}
.cd-part:last-child { border-color: rgba(255, 79, 163, .6); }
.cd-num { font-size: 1.9rem; font-weight: 700; line-height: 1.05; color: #ff4fa3; text-shadow: 0 0 14px rgba(255, 79, 163, .55); }
.cd-unit { text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; color: #c9a3b6; }
/* small flip when a number changes */
.cd-num.cd-tick { animation: cd-flip .35s cubic-bezier(.3, .7, .4, 1); }
@keyframes cd-flip { 0% { transform: translateY(-35%) scaleY(.6); opacity: .3; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cd-num.cd-tick { animation: none; } }

/* custom space size: width × depth, height from – to */
.space-custom { display: grid; gap: 10px; margin-top: -4px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.space-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; }
.space-row label { display: grid; gap: 4px; font-size: .78rem; color: var(--muted); min-width: 0; }
.space-row input { width: 100%; font: 16px var(--font); color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.space-row input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(142, 226, 159, .15); }
.space-x { padding-bottom: 12px; color: var(--muted); font-weight: 600; }
.space-custom .hint { margin: 0; }

/* PROFILE LINKS: small icons under the name, input rows in the editor */
.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; }
.pf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 2px; }
.pf-link {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--text); background: rgba(0, 0, 0, .35); border: 1px solid var(--mint-line, rgba(142, 226, 159, .28));
  transition: border-color .15s, color .15s, transform .15s;
}
.pf-link svg { width: 20px; height: 20px; }
.pf-link:active { transform: scale(.94); }
@media (hover: hover) { .pf-link:hover { color: var(--mint); border-color: var(--mint); } }
.pf-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.pf-link-fields { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.pf-link-field { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; }
.pf-link-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.pf-link-ico svg { width: 20px; height: 20px; }
.pf-link-field input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 90, 110, .15); }

/* MULTIPLE SETUPS */
.setups-field { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; min-width: 0; }
.setup-list { display: grid; gap: 12px; }
.setup-card { display: grid; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.setup-card:has([name=setup-main]:checked) { border-color: var(--mint-line, rgba(142, 226, 159, .28)); }
.setup-card-head { display: flex; align-items: center; gap: 10px; }
.setup-card-title { flex: 1; font-size: 1rem; }
.setup-main { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.setup-main input { accent-color: var(--mint); width: 18px; height: 18px; }
.setup-main:has(input:checked) { color: var(--mint); }
.setup-remove { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); cursor: pointer; }
.setup-card .field { gap: 6px; }
.setup-card input[type=text], .setup-card select { width: 100%; }
.setups-field [data-add-setup] { justify-self: start; margin-top: 0; }
.pf-setup-list { display: grid; gap: 10px; margin-bottom: 14px; }
.pf-setup-item { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); }
.pf-setup-item.is-main { border-color: var(--mint-line, rgba(142, 226, 159, .28)); }
.pf-setup-item-head { display: flex; align-items: center; gap: 8px; }
.pf-setup-item-head b { font-size: 1rem; }
.pf-main-tag { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; background: var(--mint); color: var(--mint-ink, #0b1a10); }
.pf-setup-meta { margin: 0; font-size: .85rem; color: var(--muted); }
.match-picker { display: grid; gap: 6px; margin: 0 0 14px; }

/* =====================================================================
   NEON SHADOW STYLE (reference "button_reference_neon") – the look of
   every button, card, small label and chip. One place, used everywhere.
   Entry cards, popups, profile header bars and the pink countdown keep
   their own look.
   ===================================================================== */
:root {
  --neon-pink: #ff3d9a; --neon-pink-2: #e0218a; --neon-pink-line: #ff8cc6; --neon-pink-rgb: 255, 61, 154;
  --neon-green: #a8ff3e; --neon-green-2: #6fe22f; --neon-green-line: #d4ff9a; --neon-green-rgb: 150, 255, 60;
  --mint: #a8ff3e; --mint-ink: #0b1a07; --mint-line: rgba(150, 255, 60, .45);
}
body { background: radial-gradient(90% 50% at 50% 0%, rgba(60, 140, 70, .16), transparent 70%), var(--bg); background-attachment: fixed; }

/* MAIN BUTTONS: rounded rectangle, uppercase, arrow on the right */
.btn {
  min-height: 52px; padding: 0 22px; border-radius: 12px; gap: 10px;
  font: 700 14px/1.2 var(--font); text-transform: uppercase; letter-spacing: .08em; text-shadow: none;
  transition: filter .15s, box-shadow .15s, transform .15s, background-color .15s;
}
.btn.is-pressed { transform: scale(.98); }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 12.5px; }
/* pink = default main action */
.btn-primary {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-pink-2)); color: #fff; border: 1px solid var(--neon-pink-line);
  box-shadow: 0 0 18px rgba(var(--neon-pink-rgb), .65), 0 0 40px rgba(var(--neon-pink-rgb), .25);
}
/* green = the most important action on a screen (enter, vote) */
.btn-go, .btn-vote {
  background: linear-gradient(90deg, var(--neon-green), var(--neon-green-2)); color: #0b1a07; border: 1px solid var(--neon-green-line);
  box-shadow: 0 0 18px rgba(var(--neon-green-rgb), .65), 0 0 40px rgba(var(--neon-green-rgb), .25);
}
.btn-primary::after, .btn-go::after, .btn-vote::after {
  content: "→"; display: inline; position: static; inset: auto; width: auto; height: auto; background: none; filter: none;
  opacity: 1; box-shadow: none; animation: none; border-radius: 0; font-weight: 700; letter-spacing: 0; transform: none;
}
.btn-primary.is-pressed, .btn-go.is-pressed, .btn-vote.is-pressed { filter: brightness(1.1); }
.btn-primary.is-pressed { box-shadow: 0 0 24px rgba(var(--neon-pink-rgb), .85), 0 0 52px rgba(var(--neon-pink-rgb), .4); }
.btn-go.is-pressed, .btn-vote.is-pressed { box-shadow: 0 0 24px rgba(var(--neon-green-rgb), .85), 0 0 52px rgba(var(--neon-green-rgb), .4); }
@media (hover: hover) {
  .btn-primary:hover, .btn-go:hover, .btn-vote:hover { filter: brightness(1.1); }
  .btn-primary:hover { background: linear-gradient(90deg, var(--neon-pink), var(--neon-pink-2)); border-color: var(--neon-pink-line); }
  .btn-go:hover, .btn-vote:hover:not(.is-armed) { background: linear-gradient(90deg, var(--neon-green), var(--neon-green-2)); border-color: var(--neon-green-line); }
}
/* vote button "tap again to confirm": white-hot */
.btn-vote.is-armed { background: linear-gradient(90deg, #ffffff, #d8ffb0); color: #0b1a07; border-color: #fff; box-shadow: 0 0 24px rgba(var(--neon-green-rgb), .9), 0 0 52px rgba(var(--neon-green-rgb), .45); }
/* SECONDARY: transparent with a neon border (pink default) */
.btn-ghost {
  background: transparent; color: #ffd1e8; border: 1.5px solid var(--neon-pink);
  box-shadow: 0 0 12px rgba(var(--neon-pink-rgb), .55), inset 0 0 10px rgba(var(--neon-pink-rgb), .12);
}
.btn-ghost.is-pressed { box-shadow: 0 0 18px rgba(var(--neon-pink-rgb), .8); filter: brightness(1.1); }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--neon-pink-line); background: rgba(var(--neon-pink-rgb), .06); } }
.btn-reject, .btn-danger { background: transparent; color: #ff9aa8; border: 1.5px solid #ff5a6e; box-shadow: 0 0 12px rgba(255, 90, 110, .5); }
.btn-gold { background: linear-gradient(90deg, #ffd66b, #e7b83a); color: #1d1606; border: 1px solid #ffe7a6; box-shadow: 0 0 18px rgba(255, 205, 80, .6), 0 0 40px rgba(255, 205, 80, .22); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* CARDS: dark glass, neon border; the featured card of a page is green, the others pink */
.card, .step, .pf-card, .match-card, .install-banner, .modal, .pf-stat, .notice, .name-modal {
  background: rgba(10, 20, 14, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(var(--neon-pink-rgb), .6); border-radius: 18px;
  box-shadow: 0 0 22px rgba(var(--neon-pink-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.battle-card, .card-pink, .pf-setup, .match-card:first-child, .card-featured {
  border-color: rgba(var(--neon-green-rgb), .6);
  box-shadow: 0 0 22px rgba(var(--neon-green-rgb), .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.card h2, .pf-card h2, .card-pink h2 { color: #fff; }
.pf-setup-item, .setup-card, .space-custom { background: rgba(255, 255, 255, .025); border: 1px solid rgba(var(--neon-green-rgb), .22); }
.pf-setup-item.is-main, .setup-card:has([name=setup-main]:checked) { border-color: rgba(var(--neon-green-rgb), .55); }

/* SMALL LABELS above titles: tiny neon-outlined pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 10px; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #ffd1e8; border: 1px solid rgba(var(--neon-pink-rgb), .8); background: rgba(var(--neon-pink-rgb), .1);
  box-shadow: 0 0 10px rgba(var(--neon-pink-rgb), .35);
}
.battle-card .eyebrow, .card-featured .eyebrow { color: #e4ffc4; border-color: rgba(var(--neon-green-rgb), .85); background: rgba(var(--neon-green-rgb), .1); box-shadow: 0 0 10px rgba(var(--neon-green-rgb), .35); }

/* CHIPS: dark glass + thin green neon border; selected = green gradient, dark text, glow */
.bb-chip {
  background: rgba(10, 20, 14, .7); color: #e4ffc4; border: 1px solid rgba(var(--neon-green-rgb), .55);
  box-shadow: 0 0 8px rgba(var(--neon-green-rgb), .18);
}
.bb-chip[aria-pressed="true"], .bb-chip:has(input:checked) {
  background: linear-gradient(90deg, var(--neon-green), var(--neon-green-2)); color: #0b1a07; border-color: var(--neon-green-line);
  box-shadow: 0 0 14px rgba(var(--neon-green-rgb), .65), 0 0 28px rgba(var(--neon-green-rgb), .22); text-shadow: none;
}
@media (hover: hover) {
  button.bb-chip:hover:not([aria-pressed="true"]), label.bb-chip:hover:not(:has(input:checked)), a.bb-chip:hover { border-color: rgba(var(--neon-green-rgb), .9); box-shadow: 0 0 12px rgba(var(--neon-green-rgb), .35); }
}
/* segmented tabs + DE/EN switch: selected side like a selected chip */
.tabs button[aria-selected="true"], .lang button[aria-pressed="true"] {
  background: linear-gradient(90deg, var(--neon-green), var(--neon-green-2)); color: #0b1a07;
  box-shadow: 0 0 12px rgba(var(--neon-green-rgb), .55);
}
.tabs, .lang { border-color: rgba(var(--neon-green-rgb), .35); }
.match-pct { border-color: rgba(var(--neon-green-rgb), .55); }
.match-pct b, .match-rank, .bottomnav a.active, .link, .link-button, .check a { color: var(--neon-green); }
.step-num { background: rgba(var(--neon-green-rgb), .12); color: var(--neon-green); border: 1px solid rgba(var(--neon-green-rgb), .5); }
.pf-main-tag { background: linear-gradient(90deg, var(--neon-green), var(--neon-green-2)); color: #0b1a07; }
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus, .space-row input:focus {
  border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(var(--neon-green-rgb), .18);
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; }
.btn.is-pressed { transform: none; } }
/* a wrong link stays red, even while the field is focused */
.pf-link-field input.is-invalid, .pf-link-field input.is-invalid:focus { border-color: #ff5a6e; box-shadow: 0 0 0 3px rgba(255, 90, 110, .25), 0 0 12px rgba(255, 90, 110, .45); }

/* confirmation email: resend box */
.confirm-box { display: grid; gap: 10px; margin-top: 4px; }
.confirm-box p { margin: 0; }
.confirm-title { font-weight: 700; color: #fff; }
.confirm-ok { color: var(--neon-green, #a8ff3e); font-weight: 600; }
[data-form] .confirm-box { padding: 14px; border-radius: 14px; border: 1.5px solid rgba(255, 201, 74, .55); background: rgba(255, 201, 74, .06); }

/* ONE outline style for every pink button: the main pink buttons ("Strain Match öffnen",
   "Profil bearbeiten", "Fotos prüfen" …) now look exactly like the secondary ones
   ("Details & Regeln", "Abmelden"). Only the single most important action on a
   screen (.btn-go / .btn-vote) stays green and filled. */
.btn-primary:not(.btn-go), .btn-ghost {
  background: rgba(10, 20, 14, .35); color: #ff8cc6; border: 2px solid var(--neon-pink);
  box-shadow: 0 0 12px rgba(var(--neon-pink-rgb), .5), inset 0 0 10px rgba(var(--neon-pink-rgb), .12);
  text-shadow: 0 0 8px rgba(var(--neon-pink-rgb), .45); filter: none;
}
.btn-primary:not(.btn-go)::after { content: none; }
.btn-primary:not(.btn-go).is-pressed, .btn-ghost.is-pressed {
  filter: brightness(1.15); box-shadow: 0 0 18px rgba(var(--neon-pink-rgb), .75), inset 0 0 12px rgba(var(--neon-pink-rgb), .2);
}
@media (hover: hover) {
  .btn-primary:not(.btn-go):hover, .btn-ghost:hover {
    background: rgba(var(--neon-pink-rgb), .08); border-color: var(--neon-pink-line);
    box-shadow: 0 0 16px rgba(var(--neon-pink-rgb), .65), inset 0 0 12px rgba(var(--neon-pink-rgb), .16); filter: none;
  }
}

/* PROFILE HEADER LAMP: the bar at the top is a carved, recessed neon tube like the
   outline buttons (dark inside, 2px neon outline in the theme colour, soft glow
   outside, inner shadow at the top). Same for every theme, only the colour changes. */
.pf-head { padding-top: 66px; } /* 32px more space under the bar: it hangs above the picture like a lamp */
.pf-art {
  overflow: visible; filter: none;
  background: radial-gradient(38% 120% at 50% 0%, var(--pf-glow), transparent 70%) 0 14px / 100% 100% no-repeat;
}
.pf-art::before {
  content: ""; position: absolute; top: 10px; left: 20%; right: 20%; height: 14px; border-radius: 999px;
  background: linear-gradient(180deg, #020403, #0a0f0c 70%, #111814);
  border: 2px solid var(--pf-accent);
  box-shadow:
    0 0 10px var(--pf-glow), 0 0 26px var(--pf-glow), 0 6px 22px -4px var(--pf-glow),
    inset 0 3px 5px rgba(0, 0, 0, .9), inset 0 -2px 6px var(--pf-glow);
}

/* "Mitglied seit …" and the setup chip always share ONE line */
.pf-since-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%; min-width: 0; }
.pf-since-row .pf-since { white-space: nowrap; }
.pf-since-row .bb-chip { flex: none; }
.pf-since.is-small { font-size: .74rem; }
.pf-head .pf-tags { width: 100%; min-width: 0; max-width: 100%; }

/* =====================================================================
   PHYSICAL PRESS (stronger): every button, chip and vote button clearly sinks
   in while pressed: scale .92, 3px down, the outer glow almost gone, a dark
   inner shadow. It springs back in ~0.1s. ".is-pressed" is set by js/press.js,
   which also keeps it on for at least 100 ms so even a quick tap is visible.
   ===================================================================== */
.btn, .bb-chip, .btn-vote, .tabs button, .lang button, .report-btn {
  transition: transform .1s cubic-bezier(.3, 1.5, .5, 1), box-shadow .1s ease-out, filter .1s ease-out, background-color .1s, color .1s, border-color .1s;
  will-change: transform;
}
.btn.is-pressed, .bb-chip.is-pressed, button.bb-chip.is-pressed, label.bb-chip.is-pressed, a.bb-chip.is-pressed,
.tabs button.is-pressed, .lang button.is-pressed, .report-btn.is-pressed {
  transform: translateY(3px) scale(.92);
  transition-duration: .05s;
}
/* pink outline buttons */
.btn-primary:not(.btn-go).is-pressed, .btn-ghost.is-pressed {
  filter: brightness(.85);
  box-shadow: 0 0 1px rgba(var(--neon-pink-rgb), .25), inset 0 4px 10px rgba(0, 0, 0, .9), inset 0 0 14px rgba(0, 0, 0, .6);
}
/* green filled (most important action, vote) */
.btn-go.is-pressed, .btn-vote.is-pressed {
  filter: brightness(.82);
  box-shadow: 0 0 1px rgba(var(--neon-green-rgb), .25), inset 0 4px 10px rgba(0, 0, 0, .6), inset 0 0 12px rgba(0, 0, 0, .35);
}
.btn-reject.is-pressed, .btn-danger.is-pressed {
  filter: brightness(.85);
  box-shadow: 0 0 1px rgba(255, 90, 110, .25), inset 0 4px 10px rgba(0, 0, 0, .9);
}
.btn-gold.is-pressed { filter: brightness(.85); box-shadow: 0 0 1px rgba(255, 205, 80, .25), inset 0 4px 10px rgba(0, 0, 0, .6); }
/* chips */
.bb-chip.is-pressed, button.bb-chip.is-pressed, label.bb-chip.is-pressed {
  filter: brightness(.85);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .85);
}
.bb-chip[aria-pressed="true"].is-pressed, .bb-chip:has(input:checked).is-pressed {
  box-shadow: 0 0 1px rgba(var(--neon-green-rgb), .3), inset 0 3px 7px rgba(0, 0, 0, .6);
}
.tabs button.is-pressed, .lang button.is-pressed, .report-btn.is-pressed { filter: brightness(.8); box-shadow: inset 0 3px 7px rgba(0, 0, 0, .7); }
@media (prefers-reduced-motion: reduce) {
  .btn.is-pressed, .bb-chip.is-pressed, .tabs button.is-pressed, .lang button.is-pressed, .report-btn.is-pressed { transform: none; }
}

/* Strain Match: breeder line under the name */
.match-title { min-width: 0; }
.match-title .match-name { margin: 0; }
.match-breeder { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }

/* ---------- Sign-up: 18+ rule ---------- */
.adult-rule { margin: 2px 0 4px; padding: 8px 10px; border-radius: 10px; font-size: .86rem; font-weight: 600;
  color: var(--text); background: rgba(var(--neon-pink-rgb), .08); border: 1px solid rgba(var(--neon-pink-rgb), .35); }
input[type="date"] {
  -webkit-appearance: none; appearance: none; color-scheme: dark; display: block;
  width: 100%; min-height: 48px; font: 16px var(--font); color: var(--text); text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input[type="date"]:focus { outline: none; border-color: var(--neon-green); box-shadow: 0 0 0 3px rgba(var(--neon-green-rgb), .18); }

/* ---------- Battle rules: fixed lines for every battle ---------- */
.rules-fixed { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line-calm); display: grid; gap: 6px; font-size: .9rem; }
.rules-fixed:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- Report button + popup + admin list ---------- */
.report-btn { appearance: none; border: 1px solid rgba(233, 255, 242, .16); background: transparent; color: var(--muted);
  font: 600 .78rem/1 var(--font); padding: 7px 11px; border-radius: 999px; cursor: pointer; }
.report-btn:hover, .report-btn:focus-visible { color: var(--text); border-color: rgba(var(--neon-pink-rgb), .6); }
.ncard-report { display: flex; justify-content: flex-end; margin-top: 6px; }
.pf-report { margin-top: 4px; }
.report-modal { text-align: left; }
.report-title { margin: 0; font-size: 1.05rem; color: var(--neon-pink, var(--pink)); text-transform: none; letter-spacing: 0; }
.report-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.report-reason { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-calm); }
.report-reason:has(input:checked) { border-color: rgba(var(--neon-pink-rgb), .7); box-shadow: 0 0 10px rgba(var(--neon-pink-rgb), .25); }
.report-reason input { accent-color: var(--neon-pink, var(--pink)); }
.report-modal textarea { width: 100%; }
.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.report-row { display: grid; gap: 10px; }
.report-row.is-done { opacity: .6; }
.report-head { display: flex; gap: 8px; flex-wrap: wrap; }
.report-body { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.report-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: none; }
.report-text { min-width: 0; }
.report-text p { margin: 0 0 4px; overflow-wrap: anywhere; }
.report-note { font-style: italic; }
.report-count { color: var(--amber); font-weight: 600; }
.pill-danger { color: #fff; background: rgba(255, 90, 110, .2); border-color: rgba(255, 90, 110, .7); }

/* ---------- Draft battles + pink battle style ---------- */
.draft-notice { border-color: rgba(var(--neon-pink-rgb), .7); background: rgba(var(--neon-pink-rgb), .08); color: #ff8cc6; }
.hero-subtitle { margin: -2px 0 10px; font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--neon-pink-line, #ff8cc6); }
.logo-placeholder { width: 120px; height: 60px; margin: 10px auto 6px; display: grid; place-items: center; border-radius: 12px;
  border: 1.5px dashed rgba(var(--neon-pink-rgb), .7); color: rgba(var(--neon-pink-rgb), .9); font: 700 .8rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.partner-host { text-align: center; }
/* "More pink than green": inside a pink battle the green accents turn pink */
.battle-pink {
  --green: #ff5fb4; --green-dim: #8f2560;
  --neon-green: #ff5fb4; --neon-green-2: #e0218a; --neon-green-line: #ffb3dc; --neon-green-rgb: 255, 95, 180;
  --glow-green: 0 0 8px rgba(255, 95, 180, .55), 0 0 24px rgba(255, 95, 180, .25);
}
.battle-pink .neon-title { color: #ffd1ea; text-shadow: 0 0 14px rgba(255, 61, 154, .45), 0 0 34px rgba(255, 61, 154, .2); }
.battle-pink .hero { background: radial-gradient(120% 90% at 50% 0%, rgba(255, 61, 154, .16), transparent 70%); border-radius: var(--radius); }
.battle-pink h2 { color: #ff8cc6; }
.battle-pink .rules li::marker { color: #ff5fb4; }
.battle-pink .date-row.active { border-left-color: #ff5fb4; }

/* =====================================================================
   ADMIN: compact rows (thumbnail, name, strain, date, Show card, Approve/Reject)
   so 4–5 entries fit on a 360px screen. The full card opens in a popup.
   ===================================================================== */
.admin-bar-compact { position: static; gap: 8px; padding: 8px 0 10px; }
.admin-h1 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.admin-bar-compact select { min-height: 40px; padding: 6px 12px; }
.admin-bar-compact .admin-links {
  flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none;
}
.admin-bar-compact .admin-links::-webkit-scrollbar { display: none; }
.admin-bar-compact .admin-links .bb-chip { flex: none; white-space: nowrap; }
.admin-bar-compact .tabs { min-height: 42px; }
.arow-list { display: grid; gap: 8px; }
.arow {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 7px 8px 7px 7px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-calm);
}
.arow-thumb {
  position: relative; width: 70px; height: 70px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: #000; cursor: pointer;
}
.arow-bg { position: absolute; inset: -12%; width: 124%; height: 124%; object-fit: cover; filter: blur(8px) brightness(.45); }
.arow-img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.arow-info { min-width: 0; display: grid; gap: 1px; }
.arow-info p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arow-name { font-weight: 800; font-size: .92rem; line-height: 1.25; }
.arow-name a { color: var(--text); text-decoration: none; }
.arow-strain { color: var(--neon-green, var(--green)); font-weight: 700; font-size: .82rem; line-height: 1.25; }
.arow-date { color: var(--muted); font-size: .74rem; line-height: 1.3; }
.arow-date a { color: var(--pink); }
.arow-card {
  justify-self: start; margin-top: 2px; padding: 2px 0; border: 0; background: none; cursor: pointer;
  color: var(--neon-pink-line, #ff8cc6); font: 700 .76rem/1.2 var(--font); text-decoration: underline; text-underline-offset: 2px;
}
.arow-actions { display: grid; gap: 6px; }
.btn.btn-xs { min-height: 32px; padding: 0 10px; font-size: .74rem; letter-spacing: .02em; border-width: 1.5px; gap: 4px; }
.card-modal { gap: 10px; padding: 14px; }
.card-modal-img .share-card-img { width: 100%; height: auto; border-radius: 12px; display: block; }
.card-modal-img .share-card-wait { padding: 60px 0; }
.card-modal-desc { text-align: left; color: var(--muted); }
.card-modal .share-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.card-modal .share-card-actions:empty { display: none; }

/* =====================================================================
   PHOTOS: always the whole photo. The frame keeps the photo's shape between 4:5 and
   5:4; for unusual shapes the empty space is a blurred, darkened copy of the photo.
   ===================================================================== */
.ncard-media { position: relative; width: 100%; overflow: hidden; background: #000; }
.ncard-media .ncard-photo { position: relative; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.ncard-bg {
  position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover;
  filter: blur(18px) brightness(.42) saturate(1.15); transform: translateZ(0);
}
/* report flag on the photo corner (saves a row under each card) */
.ncard-corner { position: absolute; top: 8px; right: 8px; z-index: 2; }
.report-btn-icon {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center; font-size: .9rem;
  color: #fff; background: rgba(0, 0, 0, .5); border-color: rgba(255, 255, 255, .25);
}
/* tighter spacing around cards (the photo itself is never cropped) */
.ncard-list { gap: 16px; }
.ncard { gap: 8px; }
.ncard-below { padding: 0 2px; gap: 8px; }
.ncard-below .btn-vote { min-height: 42px; }
/* admin rows: a bit tighter so 4–5 fit on one 360px screen */
.arow { padding: 6px 8px 6px 6px; gap: 10px; }
.arow-list { gap: 6px; }
.arow-name { font-size: .9rem; line-height: 1.15; }
.arow-strain { font-size: .8rem; line-height: 1.2; }
.arow-date { font-size: .72rem; line-height: 1.25; }
.arow-card { margin-top: 1px; padding: 1px 0; font-size: .74rem; }
.admin-bar-compact { padding: 6px 0 8px; gap: 7px; }

/* =====================================================================
   PROFILE LOOK: background picture at the top (fading into the page), an
   underbanner strip under the header, and the profile colours taken from the picture.
   ===================================================================== */
.pf > *:not(.pf-cover) { position: relative; z-index: 1; }
.pf-cover { position: absolute; top: 0; left: 0; right: 0; height: 330px; z-index: 0; overflow: hidden; pointer-events: none;
  border-radius: 0; }
.pf-cover:empty { display: none; }
.pf-cover img { width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(#000 40%, transparent 100%); mask-image: linear-gradient(#000 40%, transparent 100%); }
.pf-cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .35) 55%, transparent 100%); }
.pf-has-cover .pf-name { text-shadow: 0 2px 12px rgba(0, 0, 0, .95), 0 0 22px var(--pf-glow); }
.pf-has-cover .pf-since, .pf-has-cover .pf-insta { text-shadow: 0 1px 6px rgba(0, 0, 0, .95); }
.pf-has-cover .pf-since { color: #d9e4dd; }
/* colours measured from the picture: page tint, sheets, borders, glow */
.pf.pf-tinted {
  --pf-bg: radial-gradient(90% 60% at 50% -5%, rgba(var(--pf-rgb), .3), transparent 62%), linear-gradient(var(--pf-dark), var(--bg) 78%);
}
.pf.pf-tinted .pf-card, .pf.pf-tinted .pf-stat {
  background: var(--pf-sheet); border-color: var(--pf-line); box-shadow: 0 0 18px rgba(var(--pf-rgb), .12);
}
.pf.pf-tinted .pf-card h2 { color: var(--pf-accent); }
.pf-banner { height: 64px; margin-top: -6px; border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid var(--pf-line, var(--line)); box-shadow: 0 0 16px var(--pf-glow); }
.pf-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* settings: scrollable rows of small previews */
.look-field { min-width: 0; }
.look-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.look-opt { position: relative; flex: none; width: 96px; height: 54px; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: #000; border: 2px solid var(--line); scroll-snap-align: start; }
.look-row-banner .look-opt { width: 120px; height: 40px; }
.look-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-opt-text { width: 84px; display: grid; place-items: center; background: var(--card); }
.look-row-banner .look-opt-text { width: 84px; }
.look-none { font: 700 .72rem/1.15 var(--font); color: var(--muted); text-align: center; padding: 0 4px; }
.look-upload { border-style: dashed; border-color: rgba(var(--neon-pink-rgb), .6); }
.look-upload .look-none { color: var(--neon-pink-line, #ff8cc6); }
.look-opt[aria-pressed="true"] { border-color: var(--neon-pink, var(--pink)); box-shadow: 0 0 12px rgba(var(--neon-pink-rgb), .6); }
.look-opt[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 900 .7rem/1 var(--font); color: #1a0410; background: var(--neon-pink, var(--pink)); }
.look-opt-text[aria-pressed="true"] .look-none { color: var(--text); }
/* underbanner: whole picture, strip follows its shape (no cropping) */
.pf-banner { position: relative; height: auto; aspect-ratio: 3 / 1; }
.pf-banner .pf-banner-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(14px) brightness(.45); }
.pf-banner .pf-banner-img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* favourite flavours in 4 small groups */
.opt-subtitle { margin: 8px 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.opt-subtitle + .opt-chips { margin-top: 4px; }

/* own picture waiting for approval */
.look-opt.is-pending { cursor: default; border-style: dashed; border-color: var(--amber); opacity: .85; }
.look-opt.is-pending img { filter: grayscale(.5) brightness(.7); }
.look-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1rem; }
.pf-review-notes { display: grid; gap: 6px; }
.pf-review-note { margin: 0; padding: 8px 12px; border-radius: 12px; font-size: .85rem; font-weight: 600;
  background: rgba(255, 201, 74, .1); border: 1px solid rgba(255, 201, 74, .5); color: var(--amber); }
.pf-review-note.is-rejected { background: rgba(255, 90, 110, .1); border-color: rgba(255, 90, 110, .55); color: #ff8c9a; }
.look-row [data-pending-slot], .look-row [data-own-slot] { display: contents; }
span.look-opt { display: block; }
.admin-drafts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
  background: rgba(var(--neon-pink-rgb), .08); border: 1px dashed rgba(var(--neon-pink-rgb), .6); }
.admin-drafts-label { font-size: .8rem; font-weight: 700; color: #ff8cc6; }
.bb-chip-pink { border-color: rgba(var(--neon-pink-rgb), .7); color: #ffd1ea; }
/* Admin entry: clearly marked in the menu and on the own profile (admins only) */
.menu-link.menu-admin { border: 1.5px solid rgba(var(--neon-pink-rgb), .7); border-radius: 12px; color: #ffd1ea; font-weight: 800;
  box-shadow: 0 0 12px rgba(var(--neon-pink-rgb), .3); margin-top: 6px; }
.pf-admin-btn { flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 16px; font-size: 1rem; }
.pf-admin-sub { font-size: .68rem; font-weight: 600; letter-spacing: .02em; text-transform: none; opacity: .85; }
.pf-admin-sub { text-align: center; }

/* Battle picture: full width at the top, title on a dark fade at the bottom */
.battle-cover { position: relative; margin: -16px -16px 0; min-height: 300px; overflow: hidden; display: flex; align-items: flex-end; }
.battle-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.battle-cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 13, 11, 0) 30%, rgba(10, 13, 11, .55) 58%, rgba(10, 13, 11, .9) 82%, var(--bg) 100%); }
.battle-cover-text { position: relative; z-index: 1; width: 100%; padding: 0 20px 8px; }
.battle-cover-text .neon-title { margin-bottom: 4px; text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 0 24px rgba(255, 61, 154, .45); }
.battle-cover-text .hero-subtitle { margin: 0 0 4px; text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.battle-cover-text .eyebrow { background: rgba(0, 0, 0, .55); }
.battle-cover + .test-notice { margin-top: 8px; }
.hero.hero-after-cover { padding-top: 10px; }
.battle-pink .hero.hero-after-cover { background: none; }
@media (min-width: 700px) { .battle-cover { min-height: 380px; border-radius: 0 0 var(--radius) var(--radius); } }

/* Start page: partners */
.partner-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.partner-tile { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 10px; text-align: center; border-radius: 18px;
  background: rgba(10, 20, 14, .7); border: 1.5px solid rgba(var(--neon-pink-rgb), .45); box-shadow: 0 0 16px rgba(var(--neon-pink-rgb), .2); }
.partner-tile-logo { width: 116px; height: 116px; object-fit: contain; }
.partner-tile-logo.is-round { border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--neon-pink-rgb), .55), 0 0 18px rgba(var(--neon-pink-rgb), .35); }
.partner-tile-name { margin: 2px 0 0; font-weight: 800; font-size: .95rem; }
.partner-tile-handle { margin: -4px 0 0; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.partner-insta { margin-top: 4px; gap: 6px; }
.partner-insta svg { width: 15px; height: 15px; flex: none; }

/* Start page partners: big Battle #1 partner + "Upcoming battles with" row */
.partner-main { display: grid; justify-items: center; gap: 8px; margin-top: 12px; padding: 22px 16px; border-radius: 20px; text-align: center;
  background: rgba(10, 20, 14, .7); border: 1.5px solid rgba(var(--neon-green-rgb), .6); box-shadow: 0 0 22px rgba(var(--neon-green-rgb), .3); }
.partner-main .partner-logo-img { width: min(220px, 70%); height: auto; max-height: 130px; object-fit: contain; }
.partner-main .partner-logo-img.is-round { width: 160px; height: 160px; max-height: none; }
.partner-main-name { margin: 0; font-size: 1.15rem; font-weight: 800; }
.partner-row { list-style: none; margin: 12px -16px 0; padding: 4px 16px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: 132px;
  gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.partner-card { scroll-snap-align: start; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 12px 8px; text-align: center;
  border-radius: 16px; background: rgba(10, 20, 14, .7); border: 1.5px solid rgba(var(--neon-pink-rgb), .45); box-shadow: 0 0 12px rgba(var(--neon-pink-rgb), .18); }
.partner-card .partner-logo-img { width: 96px; height: 96px; object-fit: contain; }
.partner-logo-img.is-round { border-radius: 50%; box-shadow: 0 0 0 2px rgba(var(--neon-pink-rgb), .55), 0 0 14px rgba(var(--neon-pink-rgb), .3); }
.partner-placeholder { width: 96px; height: 96px; display: grid; place-items: center; padding: 8px; border-radius: 50%; text-align: center;
  font: 800 .8rem/1.15 var(--font); color: #ffd1ea; overflow-wrap: anywhere;
  background: radial-gradient(circle at 50% 35%, rgba(var(--neon-pink-rgb), .25), rgba(10, 13, 11, .9) 70%);
  border: 1.5px dashed rgba(var(--neon-pink-rgb), .6); }
.partner-card-name { margin: 0; font-size: .82rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.partner-card .partner-insta { margin-top: 2px; padding: 0 10px; }
.partner-placeholder { font-size: 1.5rem; letter-spacing: .06em; text-shadow: 0 0 12px rgba(255, 61, 154, .6); overflow-wrap: normal; }
/* partner logos keep their own shape inside the card (never cropped or stretched) */
.partner-card .partner-logo-img:not(.is-round) { width: 112px; height: 96px; object-fit: contain; }