/* CloutSurfer - "fight card" theme.
   Boxing-poster language: warm paper, heavy ink, a red corner and a blue corner,
   condensed display type, hard offset shadows. The versus mechanic IS the brand. */

:root {
  --paper: #f5efe2;
  --card: #fffdf6;
  --ink: #1a1611;
  --ink-soft: #6b6250;
  --ink-faint: #d8cfba;
  --red: #d1301f;
  --blue: #1f47c4;
  --gold: #c9a227;
  --silver: #9aa0a8;
  --bronze: #a9703c;
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}

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

body {
  font-family: var(--body);
  background-color: var(--paper);
  /* newsprint halftone */
  background-image: radial-gradient(rgba(26, 22, 17, 0.055) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--ink);
  min-height: 100vh;
  /* app-like touch: no double-tap zoom, no text inflation on rotate, no
     callout menus or blue tap flashes on the fight cards */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, .contender, .cat-chip, .bucket-btn, .rank-row, .person-row {
  -webkit-touch-callout: none;
}

/* ---------- Masthead ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* launched from the home screen there is no browser chrome, so the masthead
     has to clear the notch itself; in-browser the insets are 0 and this is a no-op */
  padding: max(22px, calc(8px + env(safe-area-inset-top)))
           max(28px, env(safe-area-inset-right))
           14px
           max(28px, env(safe-area-inset-left));
  flex-wrap: wrap;
  gap: 14px;
  border-bottom: 3px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(26, 22, 17, 0.03) 10px 20px);
}

.logo {
  font-family: var(--display);
  font-size: 2rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}
.logo span { color: var(--red); }

/* ---------- Home ---------- */

.home-hero h1 { font-family: var(--display); font-size: 2.6rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 10px; }
.home-copy { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; max-width: 560px; }
.home-step { font-size: 0.9rem; margin: 6px 0; }
.home-attrib { color: var(--ink-soft); font-size: 0.7rem; margin-top: 14px; line-height: 1.5; }
.card-src { display: inline-block; margin-top: 5px; font-size: 0.62rem; color: var(--ink-soft); text-decoration: underline; }

/* ---------- Item detail sheet ---------- */

.clickable { cursor: pointer; }
.item-content { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.item-hero { display: flex; gap: 14px; align-items: flex-start; }
.item-hero img, .item-hero .img-fallback {
  width: 96px; height: 96px; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--ink); background: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
}
.item-hero .meta { flex: 1; min-width: 0; }
.item-hero .desc { font-weight: 700; font-size: 0.9rem; }
.item-detail { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.5; margin-top: 6px; }
.item-statrow { border: 2px solid var(--ink); background: var(--card); padding: 10px 12px; }
.save-nudge {
  display: block;
  margin: 14px auto 0;
  background: var(--card);
  border: 2px dashed var(--red);
  color: var(--red);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 10px 16px;
  cursor: pointer;
}
.save-nudge:hover { background: var(--red); color: var(--paper); border-style: solid; }

.anon-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 2px dashed var(--red);
  background: var(--card);
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.82rem;
  font-weight: 700;
}
.anon-ribbon span { flex: 1; min-width: 160px; }
.anon-ribbon .ribbon-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; }
.anon-ribbon .primary-btn { padding: 7px 12px; font-size: 0.76rem; }
.anon-ribbon .ghost-btn { padding: 6px 9px; }

/* Fight-card avatars: deterministic corner plates with initials */
.avatar {
  font-family: var(--display);
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; letter-spacing: 0.03em;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(26, 22, 17, 0.35);
  flex-shrink: 0;
  user-select: none;
}
.avatar.big { width: 4rem; height: 4rem; font-size: 1.7rem; box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.35); }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-head .profile-sub { margin-top: 2px; }

/* Taste badges: little fight-card stamps. Gold ring = top tier. */
.badge-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.taste-badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 3px 8px;
  font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 2px 2px 0 rgba(26, 22, 17, 0.2);
}
.taste-badge .icon { width: 0.9em; height: 0.9em; stroke-width: 2.5; color: var(--red); }
.taste-badge.top { border-color: var(--gold); box-shadow: 2px 2px 0 var(--gold); }
.taste-badge.compact { padding: 2px 4px; margin-left: 5px; border-width: 1.5px; vertical-align: 2px; }
.taste-badge.compact .icon { width: 0.8em; height: 0.8em; }

/* Alignment identity: archetype headline + percentile standing */
.align-block { margin-top: 8px; }
.archetype {
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
}
.align-line { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); margin-top: 2px; }
.align-line.hot { color: var(--red); }

/* Taste match tiers + the argument-starter */
.compat-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.compat-tier {
  font-family: var(--display);
  font-size: 1.1rem;
  text-transform: uppercase;
  color: var(--blue);
}
.fight-line { font-size: 0.85rem; font-weight: 600; margin: 8px 0 6px; }
.fight-line b { color: var(--red); }

.person-row {
  display: flex; align-items: center; gap: 12px;
  border: 2px solid var(--ink); background: var(--card);
  padding: 8px 12px; margin-top: 8px;
}
.person-row .meta { flex: 1; min-width: 0; }
.person-row .name { font-weight: 800; }
.person-row .sub { color: var(--ink-soft); font-size: 0.74rem; font-weight: 600; }
.person-row .primary-btn, .person-row .ghost-btn { padding: 7px 12px; font-size: 0.76rem; flex-shrink: 0; }
.person-row .pos {
  font-family: var(--display);
  width: 1.9rem; height: 1.9rem; line-height: 1.9rem;
  text-align: center; font-size: 0.95rem; flex-shrink: 0;
  color: var(--ink-soft);
}
.person-row .pos.gold, .person-row .pos.silver, .person-row .pos.bronze { color: var(--paper); border: 2px solid var(--ink); }
.person-row .pos.gold { background: var(--gold); }
.person-row .pos.silver { background: var(--silver); }
.person-row .pos.bronze { background: var(--bronze); }
.person-row.me { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.chase-line { margin-top: 10px; font-weight: 800; font-size: 0.85rem; color: var(--red); }
.explore-cta { display: block; margin: 0 auto 12px; }
.item-statrow .name { font-family: var(--display); text-transform: uppercase; font-size: 0.95rem; margin-bottom: 3px; }
.stat-grid { display: flex; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 110px; border: 2px solid var(--ink); background: var(--paper); padding: 12px 14px; box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.14); }
.stat-num { font-family: var(--display); font-size: 2.2rem; color: var(--red); line-height: 1.1; }
.stat-label { color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.tabs { display: flex; gap: 8px; }
.tab {
  font-family: var(--body);
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tab:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.tab.active { background: var(--ink); color: var(--paper); }

.icon { width: 1em; height: 1em; flex-shrink: 0; }

main { max-width: 940px; margin: 0 auto; padding: 18px 20px 90px; }

.view { display: none; }
.view.active { display: block; }
.hidden { display: none !important; }

/* ---------- Category chips ---------- */

.category-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 26px; }
.cat-chip {
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  padding: 6px 13px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.cat-chip.active { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.25); }
.cat-chip.add {
  background: var(--red); color: var(--paper); border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 800;
}
.cat-chip.add:hover { filter: brightness(1.08); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.chip-x { margin-left: 2px; opacity: 0.55; font-size: 0.75rem; }
.chip-x:hover { opacity: 1; color: var(--red); }
.cat-chip.active .chip-x:hover { color: var(--paper); }

/* ---------- Battle: the fight card ---------- */

.arena-prompt {
  text-align: center;
  font-family: var(--display);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 4px 0 22px;
}

.versus { display: flex; align-items: stretch; justify-content: center; gap: 22px; position: relative; }

.fighter { flex: 1; max-width: 350px; display: flex; flex-direction: column; }

.contender {
  width: 100%;
  cursor: pointer;
  text-align: left;
  background: var(--card);
  border: 3px solid var(--ink);
  color: var(--ink);
  padding: 0;
  overflow: hidden;
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
/* red corner / blue corner */
.fighter:first-child .contender { border-top: 8px solid var(--red); box-shadow: -6px 6px 0 var(--red); }
.fighter:last-child .contender { border-top: 8px solid var(--blue); box-shadow: 6px 6px 0 var(--blue); }
.fighter:first-child .contender:hover { transform: translate(3px, -3px); box-shadow: -9px 9px 0 var(--red); }
.fighter:last-child .contender:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--blue); }

.contender img, .contender .img-fallback {
  width: 100%; height: 300px; object-fit: cover; display: block;
  background: var(--ink-faint);
  border-bottom: 3px solid var(--ink);
  filter: saturate(0.92) contrast(1.05);
}
.contender .img-fallback { display: flex; align-items: center; justify-content: center; }
.contender .img-fallback .icon { width: 56px; height: 56px; opacity: 0.35; }

.contender .info { padding: 12px 14px 16px; }
.contender .name {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 5px;
}
.contender .desc { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.45; }
.contender .detail {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.5;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--ink-faint);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vs-badge {
  align-self: center;
  flex-shrink: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--ink);
  padding: 10px 12px;
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 rgba(26, 22, 17, 0.25);
}

.dont-know {
  background: transparent;
  border: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 12px 6px 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.fighter:first-child .dont-know:hover { color: var(--red); }
.fighter:last-child .dont-know:hover { color: var(--blue); }
.dont-know:hover { color: var(--red); }

.arena-actions { text-align: center; margin-top: 26px; }

.battle-count {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: 14px;
}

/* ---------- Buttons ---------- */

.ghost-btn {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: var(--body);
}
.ghost-btn:hover { background: var(--ink); color: var(--paper); }
.ghost-btn[data-icon] { display: inline-flex; align-items: center; gap: 6px; }
.cat-chip.add { display: inline-flex; align-items: center; gap: 6px; }

.primary-btn {
  background: var(--red);
  border: 2px solid var(--ink);
  color: var(--paper);
  font-weight: 800;
  padding: 9px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.primary-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

/* ---------- Rankings: the board ---------- */

.rankings { display: flex; flex-direction: column; gap: 10px; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 10px 16px;
  box-shadow: 4px 4px 0 rgba(26, 22, 17, 0.14);
}
.rank-row .pos {
  font-family: var(--display);
  font-size: 1.35rem;
  width: 2.4rem;
  text-align: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}
/* the scope toggle occupies the first child slot, so podium rows are 2-4 */
.rank-row:nth-child(2) .pos, .rank-row:nth-child(3) .pos, .rank-row:nth-child(4) .pos { color: var(--paper); }
.rank-row:nth-child(2) .pos { background: var(--gold); }
.rank-row:nth-child(3) .pos { background: var(--silver); }
.rank-row:nth-child(4) .pos { background: var(--bronze); }
.rank-row:nth-child(-n+4):not(:nth-child(1)) .pos { border: 2px solid var(--ink); line-height: 2rem; height: 2.4rem; }

.scope-toggle { display: flex; gap: 8px; margin-bottom: 4px; }
.scope-btn {
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  padding: 6px 14px; cursor: pointer; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.scope-btn.active { background: var(--ink); color: var(--paper); }

.rank-row .delta { font-weight: 800; font-size: 0.8rem; flex-shrink: 0; }
.rank-row .delta.up { color: var(--red); }
.rank-row .delta.down { color: var(--blue); }

.rank-row img, .rank-row .img-fallback {
  width: 48px; height: 48px; object-fit: cover;
  background: var(--ink-faint);
  border: 2px solid var(--ink);
  flex-shrink: 0;
}
.rank-row .img-fallback { display: flex; align-items: center; justify-content: center; }
.rank-row .img-fallback .icon { width: 20px; height: 20px; opacity: 0.5; }

.rank-row .meta { flex: 1; min-width: 0; }
.rank-row .name { font-weight: 800; }
.rank-row .sub { color: var(--ink-soft); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.rank-row .elo { font-family: var(--display); font-size: 1.15rem; color: var(--red); }

.rank-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 16px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rank-next { display: block; margin: 14px auto 0; }

/* Trending marker. Kept quiet on purpose: a loud coloured pill reads as an ad
   and gets skipped along with whatever sits near it. Icon + word, never colour
   alone, so it still reads with any colour vision. */
.hot-flag {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 7px;
  color: var(--red);
  font-weight: 800;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  vertical-align: baseline;
}
.hot-flag .icon { width: 0.85em; height: 0.85em; stroke-width: 2.5; }

/* ---------- Inputs ---------- */

input[type="text"] {
  background: var(--card);
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 11px 14px;
  /* 16px exactly: anything smaller makes iOS Safari zoom the page on focus */
  font-size: 16px;
  font-family: var(--body);
  outline: none;
  width: 100%;
}
input[type="text"]:focus { box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.2); }
input[type="text"]::placeholder { color: var(--ink-soft); }

/* ---------- Modal ---------- */

.modal {
  position: fixed; inset: 0;
  background: rgba(26, 22, 17, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 8vh 16px; z-index: 50;
}
.modal-card {
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(26, 22, 17, 0.35);
  width: 100%; max-width: 540px; padding: 18px;
  max-height: 80vh; display: flex; flex-direction: column; gap: 12px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.2rem; }
.search-results { overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.search-result {
  display: flex; align-items: center; gap: 12px;
  padding: 8px;
  background: var(--card);
  border: 2px solid transparent;
  cursor: pointer; color: var(--ink); text-align: left; width: 100%;
  font-family: var(--body);
}
.search-result:hover { border-color: var(--ink); box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.15); }
.search-result img, .search-result .img-fallback {
  width: 44px; height: 44px; object-fit: cover;
  background: var(--ink-faint); border: 2px solid var(--ink); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.search-result .img-fallback .icon { width: 20px; height: 20px; opacity: 0.5; }
.search-result .name { font-weight: 800; }
.search-result .desc { color: var(--ink-soft); font-size: 0.78rem; }
.search-result.create .name { color: var(--red); }
.search-result.preview { cursor: default; opacity: 0.7; }
.search-result.preview:hover { border-color: transparent; box-shadow: none; }

/* ---------- Profile ---------- */

.panel {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(26, 22, 17, 0.14);
  padding: 18px 20px;
  margin-bottom: 14px;
}
.panel h2, .panel h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 6px; }
.panel p { margin: 3px 0; font-size: 0.9rem; }
.profile-handle { font-size: 1.6rem; }
.profile-sub { color: var(--ink-soft); font-size: 0.82rem !important; }
.login-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.login-row input { max-width: 240px; }
.login-row .primary-btn, .login-row .ghost-btn { text-decoration: none; display: inline-flex; align-items: center; }
.compat-pct { font-family: var(--display); font-size: 3rem; color: var(--red); line-height: 1.1; margin-bottom: 6px; }

/* ---------- Empty states & toast ---------- */

.empty-state {
  text-align: center;
  padding: 54px 20px;
  color: var(--ink-soft);
  border: 2px dashed var(--ink-soft);
  background: rgba(255, 253, 246, 0.5);
}
.empty-state h2 { font-family: var(--display); color: var(--ink); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; }

.toast {
  position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(26, 22, 17, 0.3);
  padding: 10px 20px;
  font-size: 0.85rem; font-weight: 700;
  z-index: 100;
  animation: pop 0.18s ease;
}
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }

/* ---------- Rank flow: browse / bucket / reveal ---------- */

.rank-hint { text-align: center; color: var(--ink-soft); font-size: 0.82rem; margin: -14px 0 16px; }
#rank-browse input { max-width: 420px; margin: 0 auto 16px; display: block; }

.suggest-list { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 0 auto; }
.suggest-sort { justify-content: center; margin-bottom: 6px; }
.suggest-sort .scope-btn { font-size: 0.72rem; padding: 5px 12px; }
.suggest-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 2px solid var(--ink);
  padding: 8px 10px;
  box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.12);
}
.suggest-row img, .suggest-row .img-fallback {
  width: 52px; height: 52px; object-fit: cover; flex-shrink: 0;
  background: var(--ink-faint); border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.suggest-row .img-fallback .icon { width: 20px; height: 20px; opacity: 0.5; }
.suggest-row .meta { flex: 1; min-width: 0; }
.suggest-row .name { font-weight: 800; font-size: 0.92rem; }
.suggest-row .desc { color: var(--ink-soft); font-size: 0.74rem; }
.suggest-row .primary-btn { padding: 8px 14px; flex-shrink: 0; }
.suggest-row .ghost-btn.skip { padding: 8px 10px; flex-shrink: 0; color: var(--ink-soft); }

.bucket-card {
  max-width: 340px; margin: 0 auto 20px;
  background: var(--card); border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(26, 22, 17, 0.2);
  overflow: hidden;
}
.bucket-card img, .bucket-card .img-fallback {
  width: 100%; height: 240px; object-fit: cover; display: block;
  background: var(--ink-faint); border-bottom: 3px solid var(--ink);
}
.bucket-card .img-fallback { display: flex; align-items: center; justify-content: center; }
.bucket-card .img-fallback .icon { width: 48px; height: 48px; opacity: 0.35; }
.bucket-card .info { padding: 12px 14px; }
.bucket-card .name { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; }
.bucket-card .desc { color: var(--ink-soft); font-size: 0.8rem; }

.bucket-row { display: flex; gap: 12px; justify-content: center; }
.bucket-btn {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 16px 26px;
  border: 3px solid var(--ink);
  cursor: pointer;
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bucket-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.bucket-btn.bad { background: var(--blue); }
.bucket-btn.okay { background: var(--ink-soft); }
.bucket-btn.great { background: var(--red); }

.reveal { text-align: center; padding-top: 8px; }
.reveal-card {
  width: 190px; margin: 0 auto 18px;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(26, 22, 17, 0.2);
  overflow: hidden;
  background: var(--card);
}
.reveal-card img, .reveal-card .img-fallback {
  width: 100%; height: 190px; object-fit: cover; display: block; background: var(--ink-faint);
}
.reveal-card .img-fallback { display: flex; align-items: center; justify-content: center; }
.reveal-score {
  display: inline-block;
  font-family: var(--display);
  font-size: 5rem;
  line-height: 1;
  color: var(--paper);
  background: var(--red);
  border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  padding: 14px 26px;
  transform: rotate(-4deg);
  margin-bottom: 20px;
}
.reveal-score.stamp-in { animation: score-stamp 0.45s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes score-stamp {
  from { transform: rotate(-4deg) scale(2.2); opacity: 0; }
  to { transform: rotate(-4deg) scale(1); opacity: 1; }
}
.reveal-title { font-family: var(--display); font-size: 1.6rem; text-transform: uppercase; }
.reveal-sub { color: var(--ink-soft); font-size: 0.85rem; margin-top: 6px; font-weight: 600; }
.reveal-tease { font-style: italic; font-weight: 700; font-size: 1.02rem; margin-top: 10px; color: var(--ink); }

/* you vs the crowd, on the scorecard */
.world-line {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 6px 12px;
  font-size: 0.82rem; font-weight: 700;
  box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.18);
}
.world-line .world-score {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--paper);
  background: var(--blue);
  border: 2px solid var(--ink);
  padding: 1px 8px;
}
.world-line.first { border-style: dashed; border-color: var(--red); color: var(--red); }

/* ---------- Fight choreography ---------- */

/* the pick: pops proudly, then is "collected" - flies up and off */
.contender.chosen { animation: chosen 0.5s ease-in forwards; position: relative; z-index: 5; }
@keyframes chosen {
  14% { transform: scale(1.07); opacity: 1; }
  30% { transform: scale(1.04); opacity: 1; }
  100% { transform: translateY(-130%) scale(1.03); opacity: 0; }
}

/* bystander card bows out quietly (skips, dismissals) */
.contender.depart { animation: depart 0.3s ease forwards; }
@keyframes depart {
  to { opacity: 0; transform: translateY(14px); }
}

/* the loser tumbles off the bottom toward their corner */
.contender.ko-left { animation: ko-left 0.5s cubic-bezier(0.55, 0, 0.85, 0.4) forwards; }
.contender.ko-right { animation: ko-right 0.5s cubic-bezier(0.55, 0, 0.85, 0.4) forwards; }
@keyframes ko-left {
  18% { transform: rotate(-3deg); }
  100% { transform: translate(-35%, 130%) rotate(-15deg); opacity: 0; }
}
@keyframes ko-right {
  18% { transform: rotate(3deg); }
  100% { transform: translate(35%, 130%) rotate(15deg); opacity: 0; }
}

/* next challengers fly in from their corners - images already preloaded */
.contender.enter-left { animation: enter-left 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.12); }
.contender.enter-right { animation: enter-right 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.12); }
@keyframes enter-left { from { transform: translateX(-70%) rotate(-2deg); opacity: 0; } }
@keyframes enter-right { from { transform: translateX(70%) rotate(2deg); opacity: 0; } }

/* the VS stamp slams down on each new bout */
.vs-badge.stamp-in { animation: stamp-in 0.32s cubic-bezier(0.2, 1.5, 0.4, 1); }
@keyframes stamp-in {
  from { transform: rotate(-8deg) scale(1.9); opacity: 0; }
  to { transform: rotate(-8deg) scale(1); opacity: 1; }
}

/* leaderboard rows rise in, staggered */
.rank-row.rise { animation: rise 0.3s both; }
@keyframes rise {
  from { transform: translateY(16px); opacity: 0; }
}

.tab.sound { box-shadow: none; padding: 8px 11px; }

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

/* ---------- Small screens: a real mobile layout, bout stays side-by-side ---------- */

@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }

  /* compact sticky masthead, icon-only tabs */
  .topbar {
    padding: max(10px, calc(4px + env(safe-area-inset-top)))
             max(12px, env(safe-area-inset-right))
             10px
             max(12px, env(safe-area-inset-left));
    gap: 8px; border-bottom-width: 2px; flex-wrap: nowrap;
  }
  .logo { font-size: 1.3rem; }
  .tabs { margin-left: auto; gap: 5px; }
  .tab { padding: 10px 12px; box-shadow: 2px 2px 0 var(--ink); }
  .tab .label { display: none; }
  .tab .icon { width: 1.2em; height: 1.2em; }

  main {
    padding: 8px max(12px, env(safe-area-inset-right)) 80px max(12px, env(safe-area-inset-left));
  }

  /* category chips: one swipeable row instead of a tall stack */
  .category-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 8px -12px 16px;
    padding: 2px 12px 6px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 12px; /* snap targets respect the padding: position 0 is flush left, no pre-scroll */
  }
  .category-bar::-webkit-scrollbar { display: none; }
  .cat-chip { white-space: nowrap; flex-shrink: 0; padding: 8px 13px; scroll-snap-align: start; }

  /* soft edges instead of a hard cutoff - classes driven by scroll position */
  .category-bar.fade-r {
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, black calc(100% - 48px), transparent);
  }
  .category-bar.fade-l {
    -webkit-mask-image: linear-gradient(to right, transparent, black 48px);
    mask-image: linear-gradient(to right, transparent, black 48px);
  }
  .category-bar.fade-l.fade-r {
    -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
    mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  }

  /* battle: overlay the VS stamp so both cards get full width */
  .arena-prompt { font-size: 1.35rem; margin: 2px 0 12px; }
  .versus { gap: 10px; position: relative; }
  .vs-badge {
    position: absolute;
    left: 50%;
    top: 72px;
    transform: translateX(-50%) rotate(-8deg);
    z-index: 6;
    padding: 7px 9px;
    font-size: 0.85rem;
    align-self: auto;
  }
  .vs-badge.stamp-in { animation: stamp-in-mobile 0.32s cubic-bezier(0.2, 1.5, 0.4, 1); }
  .fighter:first-child .contender { box-shadow: -4px 4px 0 var(--red); }
  .fighter:last-child .contender { box-shadow: 4px 4px 0 var(--blue); }
  .contender { border-width: 2px; }
  .contender img, .contender .img-fallback { height: 168px; border-bottom-width: 2px; }
  .contender .info { padding: 9px 10px 11px; }
  .contender .name { font-size: 0.98rem; }
  .contender .desc { font-size: 0.7rem; }
  .contender .detail { font-size: 0.66rem; -webkit-line-clamp: 2; margin-top: 5px; padding-top: 5px; }
  .dont-know { font-size: 0.72rem; padding: 12px 6px 6px; }
  .arena-actions { margin-top: 18px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
  .battle-count { font-size: 0.62rem; }

  /* rankings rows */
  .rank-row { padding: 8px 10px; gap: 10px; }
  .rank-row .pos { width: 1.8rem; font-size: 1.05rem; }
  .rank-row:nth-child(-n+4):not(:nth-child(1)) .pos { line-height: 1.7rem; height: 2rem; }
  .rank-row img, .rank-row .img-fallback { width: 40px; height: 40px; }
  .rank-row .name { font-size: 0.9rem; }
  .rank-row .sub { font-size: 0.66rem; }
  .rank-row .elo { font-size: 1rem; }
  .rank-row .delta { font-size: 0.7rem; }

  /* modal becomes a full-screen sheet */
  .modal { padding: 0; align-items: stretch; }
  .modal-card {
    max-width: none;
    max-height: none;
    height: 100dvh;
    border: none;
    box-shadow: none;
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  }
  input[type="text"] { font-size: 16px; } /* prevents iOS focus zoom */

  /* rank flow */
  .bucket-row { gap: 8px; }
  .bucket-btn { font-size: 1.05rem; padding: 14px 18px; flex: 1; max-width: 130px; }
  .bucket-card img, .bucket-card .img-fallback { height: 180px; }
  .reveal-score { font-size: 3.4rem; padding: 12px 20px; }
  .suggest-row .primary-btn { padding: 8px 12px; font-size: 0.78rem; }
  #rank-browse input { font-size: 16px; }

  /* profile */
  .panel { padding: 14px; }
  .profile-handle { font-size: 1.3rem; }
  .compat-pct { font-size: 2.4rem; }
  .login-row .primary-btn, .login-row .ghost-btn { padding: 10px 14px; }

  .empty-state { padding: 38px 14px; }
}

@keyframes stamp-in-mobile {
  from { transform: translateX(-50%) rotate(-8deg) scale(1.9); opacity: 0; }
  to { transform: translateX(-50%) rotate(-8deg) scale(1); opacity: 1; }
}


/* Next-up card on the reveal: the loop's engine - rank or wave off without
   returning to the list */
.next-up { margin-top: 18px; }
.next-label {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.next-up .next-row {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--ink); background: var(--card);
  padding: 8px 10px;
  max-width: 480px; margin: 0 auto;
  box-shadow: 3px 3px 0 rgba(26, 22, 17, 0.14);
  text-align: left;
}
.next-up img, .next-up .img-fallback {
  width: 52px; height: 52px; object-fit: cover; flex-shrink: 0;
  border: 2px solid var(--ink); background: var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
}
.next-up .img-fallback .icon { width: 18px; height: 18px; opacity: 0.5; }
.next-up .meta { flex: 1; min-width: 0; }
.next-up .name { font-weight: 800; font-size: 0.92rem; }
.next-up .sub { color: var(--ink-soft); font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.next-up .primary-btn { padding: 8px 14px; flex-shrink: 0; }
.next-up .ghost-btn.skip { padding: 8px 11px; flex-shrink: 0; }


/* Photo avatars share the plate frame; the crop does the rest */
.avatar.photo { object-fit: cover; padding: 0; }

/* You-vs-Them: shared items, both scores, sharpest disagreements first */
.vs-head, .vs-row { display: flex; align-items: center; gap: 10px; }
.vs-head { margin-top: 8px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
.vs-row { border: 2px solid var(--ink); background: var(--card); padding: 7px 10px; margin-top: 6px; }
.vs-title { flex: 1; min-width: 0; }
.vs-title .name { font-weight: 800; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-title .sub { color: var(--ink-soft); font-size: 0.68rem; font-weight: 600; }
.vs-score { font-family: var(--display); font-size: 1.05rem; width: 2.6rem; text-align: center; flex-shrink: 0; }
.vs-score.mine { color: var(--red); }
.vs-score.theirs { color: var(--blue); }
.vs-row.fight { border-color: var(--red); box-shadow: 2px 2px 0 var(--red); }
.vs-row.agree { opacity: 0.82; }

/* another user's full ranked list */
.their-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.their-row .pos { font-family: var(--display); width: 1.7rem; text-align: center; color: var(--ink-soft); flex-shrink: 0; }
.their-row .name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.their-row .elo { font-family: var(--display); color: var(--red); }


/* List management controls */
.list-manage { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 2px dashed var(--ink-faint); }
.ghost-btn.danger { color: var(--red); border-color: var(--red); }
.ghost-btn.danger:hover { background: var(--red); color: var(--paper); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-head h3 { margin: 0; }
.ghost-btn.tiny { padding: 5px 12px; font-size: 0.72rem; flex-shrink: 0; }


.review-skipped { display: block; margin: 16px auto 4px; }

.rank-it { display: block; width: 100%; margin: 4px 0 12px; }

/* Friend avatar sizes */
.avatar.mini { width: 1.5rem; height: 1.5rem; font-size: 0.6rem; box-shadow: 1px 1px 0 rgba(26,22,17,0.3); }

/* "N friends ranked this" pip stack on suggestion rows + bucket card */
.friend-pips { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.friend-pips .pip-stack { display: flex; }
.friend-pips .pip-stack .avatar { margin-left: -6px; border-width: 2px; }
.friend-pips .pip-stack .avatar:first-child { margin-left: 0; }
.friend-pips .pip-label { font-size: 0.72rem; font-weight: 800; color: var(--blue); }
.friend-pips.big { justify-content: center; margin-top: 10px; }
.friend-pips.big .pip-label { font-size: 0.85rem; }
.friend-pips.big .avatar { width: 2rem; height: 2rem; font-size: 0.8rem; }

/* Friend takes / verdicts (reveal + item sheet) */
.friend-verdicts { border: 2px solid var(--ink); background: var(--card); padding: 10px 12px; margin-top: 12px; text-align: left; }
.fv-head { font-family: var(--display); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; margin-bottom: 6px; }
.fv-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.fv-handle { flex: 1; min-width: 0; font-weight: 700; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-score { font-family: var(--display); font-size: 1.05rem; color: var(--blue); }
.fv-verdict { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); width: 5.5rem; text-align: right; }
.fv-row.agree .fv-verdict { color: var(--blue); }
.fv-row.clash .fv-verdict { color: var(--red); }

/* Share preview modal: see the card, then share on a fresh tap */
.share-card-modal { max-width: 380px; }
.share-preview { display: flex; justify-content: center; margin: 6px 0 14px; }
.share-preview img { max-width: 100%; max-height: 62vh; border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(26,22,17,0.2); }
.share-actions { display: flex; flex-direction: column; gap: 10px; }
.share-actions .primary-btn, .share-actions .ghost-btn { width: 100%; }
.share-hint { font-size: 0.72rem; color: var(--ink-soft); text-align: center; margin-top: 2px; }

/* Leave-a-take box on the reveal */
.take-box { border: 2px solid var(--ink); background: var(--card); padding: 12px; margin-top: 14px; text-align: left; }
.take-box.hot { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.take-prompt { font-family: var(--display); text-transform: uppercase; font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 8px; }
.take-box.hot .take-prompt { color: var(--red); }
.take-input { width: 100%; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; padding: 9px 11px; resize: vertical; margin-bottom: 8px; }
.take-input:focus { outline: none; box-shadow: 3px 3px 0 rgba(26,22,17,0.15); }
.take-box .primary-btn { width: 100%; }

/* Friend take text under a verdict row */
.fv-entry { margin-bottom: 4px; }
.fv-note { font-size: 0.82rem; font-style: italic; color: var(--ink); margin: 2px 0 8px 34px; line-height: 1.4; }

/* The feed */
.feed-take { border-top: 2px solid var(--ink-faint); padding: 12px 0; }
.feed-take:first-of-type { border-top: none; }
.feed-head { display: flex; align-items: center; gap: 8px; }
.feed-handle { font-weight: 800; flex: 1; min-width: 0; }
.feed-score { font-family: var(--display); font-size: 1.1rem; color: var(--red); }
.feed-on { font-size: 0.78rem; color: var(--ink-soft); margin: 5px 0; }
.feed-on b { color: var(--ink); }
.feed-text { font-size: 0.95rem; font-style: italic; line-height: 1.45; }
/* ============================================================
   SURF THEME - "clout surfing"
   Admin-controlled site theme (data-theme="surf" on <html>).
   Vintage surf-poster, not bubbly app: the fight card's hard
   edges and offset shadows stay, the palette goes to sea.
   Sea-foam paper, deep-ocean navy ink, sunset-coral corner,
   lagoon-blue corner, swell lines in the paper, clouds in the
   sky, and one curved thing only: the wave under the masthead.
   ============================================================ */

:root[data-theme="surf"] {
  --paper: #e9f5f7;
  --card: #ffffff;
  --ink: #123647;
  --ink-soft: #4e7284;
  --ink-faint: #b7d6dd;
  --red: #f4602f;   /* sunset coral keeps every "red corner" role */
  --blue: #0e86b8;  /* lagoon */
  --gold: #f0a92e;
  --silver: #8fa8b5;
  --bronze: #c98a4b;
}

/* sky: two clouds drifting over faint swell lines */
[data-theme="surf"] body {
  background-image:
    radial-gradient(ellipse 340px 120px at 12% 4%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 260px 90px at 78% 9%, rgba(255, 255, 255, 0.7), transparent 70%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="22"><path d="M0 11 Q 22.5 2 45 11 T 90 11" stroke="%23123647" stroke-opacity="0.06" fill="none" stroke-width="2"/></svg>');
  background-size: auto, auto, 90px 22px;
}

/* masthead: flat pale sky ending in an opaque woodcut wave. The strip is
   fully opaque (sky above the curve, paper in the hollows) and lives INSIDE
   the sticky bar, so scrolling content vanishes cleanly behind a wavy line
   instead of peeking through the scallops. */
[data-theme="surf"] .topbar {
  background-color: #d8eef4;
  background-image: none;
  border-bottom: none;
  padding-bottom: 24px;
}
[data-theme="surf"] .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="46" height="14"><rect width="46" height="14" fill="%23e9f5f7"/><path d="M0 7 Q 11.5 -1 23 7 T 46 7 V 0 H 0 Z" fill="%23d8eef4"/><path d="M0 7 Q 11.5 -1 23 7 T 46 7" stroke="%23123647" stroke-width="3" fill="none"/></svg>') repeat-x;
  background-size: 46px 14px;
  pointer-events: none;
}

/* the one soft touch: "okay" verdict is wet sand between the corners */
[data-theme="surf"] .bucket-btn.okay { background: #c2a878; }

/* wordmark: navy CLOUT, coral SURFER (inherits via tokens; nothing to do) */