/* ====== Design System ====== */
:root{
  --bg: #08080a;          /* page background (near-black) */
  --card: #16161a;        /* surfaces/cards */
  --card-2:#0f0f12;       /* alt surface */
  --text:#e8e8ec;         /* primary text */
  --muted:#9a9aa6;        /* secondary text */
  --line:#28282f;         /* borders/dividers */
  --accent:#7cb3ff;       /* links / info accent (blue) */
  --accent-2:#34d399;     /* success */
  --warn:#f59e0b;         /* warning */
  --danger:#ef4444;       /* danger */
  /* Brand — gold, from the CatchPoint bass icon */
  --brand:#e6b84d;
  --brand-2:#f3cf6d;
  --brand-strong:#c79a2f;
  --on-brand:#231a06;     /* text on gold */
  --radius:18px;          /* big rounding */
  --radius-sm:12px;
  --shadow: 0 10px 34px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 18px rgba(0,0,0,.30);
  --focus: 0 0 0 3px rgba(230,184,77,.32);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 800px at 8% -12%, #1a150a 0%, transparent 55%) ,
              radial-gradient(1300px 900px at 112% -18%, #151517 0%, transparent 60%),
              var(--bg);
  font: 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ====== Layout ====== */
.container{max-width:1100px;margin:0 auto;padding:20px}

.card{
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
}

/* Subtle in-card sections */
.section{
  background:rgba(255,255,255,.02);
  border:1px dashed var(--line);
  border-radius:var(--radius-sm);
  padding:12px;
}

/* ====== Top Bar (user bar) ====== */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; backdrop-filter:saturate(140%) blur(6px);
  background:linear-gradient(180deg, rgba(18,18,22,.88), rgba(18,18,22,.55));
  border-bottom:1px solid var(--line);
}
.topbar-left{display:flex;gap:12px;align-items:center}
.topbar-user{display:flex;flex-direction:column}
.topbar-name{font-weight:700; letter-spacing:.2px}
.topbar-username{color:var(--muted); font-size:.925rem}
.topbar-avatar{
  width:42px;height:42px;border-radius:50%;
  background:#101012; object-fit:cover;
  border:1px solid var(--line);
}
.topbar-actions{display:flex;gap:8px;align-items:center}
.topbar-profile-link{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:inherit; cursor:pointer;
  border-radius:var(--radius-sm); padding:4px 6px; margin:-4px -6px;
  transition:background .15s ease;
}
.topbar-profile-link:hover{ background:rgba(255,255,255,.06); text-decoration:none; }

/* ====== Headings & text ====== */
h1,h2,h3{margin:0 0 8px; letter-spacing:.2px; line-height:1.25}
h1{font-size:1.55rem; font-weight:800}
h2{font-size:1.15rem; font-weight:700; color:var(--text)}
.muted{color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}

/* ====== Buttons ====== */
/* Primary action = gold. Secondary = ghost. Destructive = danger. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:var(--radius-sm);
  border:1px solid var(--brand-strong);
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:var(--on-brand); font-weight:700; letter-spacing:.2px;
  text-decoration:none; cursor:pointer; user-select:none;
  box-shadow:0 6px 16px rgba(230,184,77,.18); font:inherit; appearance:none;
  transition:transform .06s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 10px 26px rgba(230,184,77,.30); border-color:var(--brand-strong)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none; box-shadow:var(--focus)}

.btn-ghost{
  background:rgba(255,255,255,.04); border-color:var(--line); box-shadow:none;
  color:var(--text); font-weight:600;
}
.btn-ghost:hover{background:rgba(255,255,255,.08); border-color:#3a3a45}

.btn-danger{
  background:linear-gradient(180deg, #2a0d12, #20080b);
  border-color:#3a1118; color:#ffd7db; box-shadow:none;
}
.btn-danger:hover{border-color:#5c1721; background:linear-gradient(180deg,#3a1218,#25090e)}

.btn-success{
  background:linear-gradient(180deg, #0f2a1e, #0c1f17);
  border-color:#194531; color:#d1fae5; box-shadow:none;
}

.btn-disabled{ pointer-events:none; opacity:.55; }

/* ====== Inputs & Forms ====== */
input, textarea, select{
  width:100%; color:var(--text);
  background:linear-gradient(180deg,#151517,#101012);
  border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
textarea{resize:vertical}
input:focus, textarea:focus, select:focus{ border-color:#4a4536; box-shadow:var(--focus) }
select option{ background:var(--card); color:var(--text) }

label{display:grid; gap:6px; font-weight:600; color:#d6d6dc}

/* File input nicer spacing */
input[type="file"]{
  padding:10px; cursor:pointer; background:linear-gradient(180deg,#151517,#0e0e10);
}

/* ====== HUD ====== */
.hud{
  display:flex; flex-direction:column; align-items:stretch;
  gap:12px; padding:8px 0 6px;
  border-bottom:1px solid var(--line);
}
.hud .title{display:flex;align-items:baseline;gap:10px;font-weight:700}
.stats{display:flex;gap:10px;flex-wrap:wrap}
/* In-game HUD action buttons: 2-column grid, manage button spans full width */
.hud-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hud-actions .btn{margin:0;justify-content:center;text-align:center}
.hud-actions #manageLink{grid-column:1 / -1}

/* Pills */
.pill{
  display:inline-flex; align-items:center;
  gap:8px; padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg,#161619,#111114);
  border:1px solid var(--line);
}
.pill-label{color:var(--muted); font-size:.9rem}
.pill-value{font-weight:800; letter-spacing:.2px}

/* ====== Chips ====== */
.bounty-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  background:linear-gradient(180deg,#17171b,#121215);
  border:1px solid #2c2c34; font-weight:700;
  color:#e6dfce; font-size:.9rem;
}

/* ====== Grids ====== */
.grid{display:grid; gap:14px}
.grid-patrons{
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
}

/* ====== Patron cards & Target card ====== */
.patron-card, .target-card{
  background:linear-gradient(180deg, #17171b, #121215);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px; box-shadow:var(--shadow-sm);
  display:grid; gap:10px;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.patron-card:hover, .target-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.40);
  border-color:#3a3a45;
}
.patron-avatar, .target-avatar{
  width:64px; height:64px; border-radius:14px; object-fit:cover;
  background:#0d0d10; border:1px solid var(--line);
}
.patron-name, .target-name{ font-weight:700; letter-spacing:.2px }
.patron-username, .target-username{ color:var(--muted) }
.target-actions, .game-actions, .row{ display:flex; gap:10px; align-items:center }

.target-card.empty{
  background:linear-gradient(180deg,#161619,#0d0d10);
  color:var(--muted); text-align:center; padding:18px;
}

/* ====== Row list ====== */
.stack{display:flex; flex-direction:column; gap:12px}
.ex-row{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px; background:linear-gradient(180deg,#161619,#111114);
  border:1px solid var(--line); border-radius:12px;
}
.ex-left{display:flex; gap:12px; align-items:flex-start}
.ex-avatar{
  width:40px;height:40px;border-radius:10px;object-fit:cover;
  background:#0d0d10; border:1px solid var(--line);
}

/* ====== Banner (inline alerts) ====== */
.banner{
  display:block; margin:0 0 12px; padding:10px 12px;
  border-radius:12px; border:1px solid #2c2c34;
  background:linear-gradient(180deg,#15161b,#0d0d10);
  color:#e2e4ea; font-weight:600;
}
.banner.err{
  border-color:#3a1118;
  background:linear-gradient(180deg,#2a0d12,#20080b);
  color:#ffd7db;
}

/* ====== Links ====== */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ====== Utilities ====== */
.center{display:grid;place-items:center}
.hidden{display:none}

/* ====== Media ====== */
@media (max-width:720px){
  .topbar-actions{gap:6px}
  .topbar-avatar{width:38px;height:38px}
  .container{padding:14px}
}

/* ====== Hide number-input spin buttons ====== */
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }

/* ====== Nice scrollbars (Chrome/Edge) ====== */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#26262e; border:2px solid transparent; background-clip:padding-box; border-radius:999px;
}
*::-webkit-scrollbar-thumb:hover{background:#3a3a45}

/* ====== Mobile: prevent .ex-row controls from overflowing ====== */
@media(max-width:560px){
  .ex-row{ flex-wrap:wrap; }
  /* Action cluster (buttons/selects injected after the content block) */
  .ex-row > .row{ width:100%; justify-content:flex-end; margin-top:4px; }
  /* Long species names in settings rows shouldn't push buttons off-screen */
  .ex-row .ex-left{ min-width:0; flex:1; }
  .ex-row .ex-left > div{ min-width:0; overflow-wrap:break-word; word-break:break-word; }
}

/* ====== Subtle motion on mount ====== */
.card, .patron-card, .target-card, .ex-row, .pill, .bounty-chip{
  animation:fadeUp .25s ease both;
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}


/* ============================================================
   Additions for the fishing app's auth + lobby pages.
   ============================================================ */

/* Center the standalone auth cards (login / signup) on desktop,
   while staying full-width on mobile. Targets only top-level cards;
   cards inside .container are unaffected. */
body > .card{
  max-width:520px;
  margin:24px auto;
}

/* CP-17: login "how it works" intro */
.intro-card h1{ font-size:1.5rem; }
.steps{ display:grid; gap:14px; margin-top:16px; }
.step{ display:flex; gap:12px; align-items:flex-start; }
.step-num{
  flex:none; width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));
  color:var(--on-brand); font-weight:800; font-size:.9rem;
}
.step strong{ display:block; }

/* Form layout: stack label + field with a little breathing room */
.form{ display:grid; gap:14px; }
.form > div{ display:grid; gap:6px; }
.section > div{ display:grid; gap:6px; margin-top:10px; }

/* Header block (avatar + title) on signup / profile */
.header{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.avatarPreview{
  width:64px; height:64px; border-radius:14px; object-fit:cover;
  background:#0d0d10; border:1px solid var(--line); flex:0 0 auto;
}

/* Inline text link variant */
.link{ color:var(--accent); font-weight:600; }
.link:hover{ text-decoration:underline; }

/* Divider used on login / signup */
hr{ border:none; border-top:1px solid var(--line); margin:16px 0; }

/* Search bar wrapper on the join page */
.search-bar{ margin:10px 0 14px; }

/* Game cards in the home + join lists */
.game-card{
  background:linear-gradient(180deg, #17171b, #121215);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px; box-shadow:var(--shadow-sm);
  display:grid; gap:8px;
  transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.game-card:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(0,0,0,.40);
  border-color:#3a3a45;
}
.game-title{ font-weight:700; letter-spacing:.2px; font-size:1.05rem; }
.game-meta{ color:var(--muted); font-size:.92rem; }
.game-actions{ margin-top:4px; }

/* Game cards animate in too */
.game-card{ animation:fadeUp .25s ease both; }

/* ====== Highlights Carousel — center-snap rolodex (CP-29/31) ====== */
.carousel{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 0 14px;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel-card{
  flex:0 0 min(calc(100% - 64px), 380px);
  aspect-ratio:1;
  border-radius:18px;
  overflow:hidden; position:relative; cursor:pointer;
  border:2px solid var(--line); background:#0d0d10;
  scroll-snap-align:center;
  opacity:.5;
  transition:opacity .25s ease, border-color .25s ease;
}
.carousel-card.active{
  opacity:1;
  border-color:#3a3a45;
}
.carousel-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-label{
  position:absolute; bottom:0; left:0; right:0;
  padding:28px 14px 13px;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
  color:#fff; font-weight:700; font-size:.88rem; line-height:1.3;
}

/* ====== Brand lockup (icon + wordmark) ====== */
.brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.brand-mark{
  width:40px; height:40px; border-radius:11px; object-fit:cover; flex:0 0 auto;
  border:1px solid var(--line); box-shadow:var(--shadow-sm);
}
.brand-name{
  font-weight:800; font-size:1.25rem; letter-spacing:.3px; line-height:1;
  background:linear-gradient(180deg, var(--brand-2), var(--brand-strong));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.brand:hover{ text-decoration:none; }

/* Auth pages: brand sits above the title with breathing room */
.auth-brand{ margin:2px 0 18px; }

/* Branded backdrop — the CatchPoint bass as a soft wallpaper on non-game
   pages (login, signup, home, profile, join, create). In-game pages use the
   owner's game photo instead. */
.brand-bg::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url(icon-512.png) no-repeat center center;
  /* Square icon: fill the window on its smaller axis edge to edge. */
  background-size:100vmin;
  opacity:.08;
}

/* Per-player game background photo: cover image + dark scrim for readability.
   On these pages the cards are lightly frosted so the photo glows through. */
.has-game-bg::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--game-bg) center/cover no-repeat;
}
.has-game-bg::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,8,10,.50), rgba(8,8,10,.72));
}
.has-game-bg .card{
  background:linear-gradient(180deg, rgba(22,22,26,.80), rgba(15,15,18,.86));
  backdrop-filter:blur(9px) saturate(120%);
  -webkit-backdrop-filter:blur(9px) saturate(120%);
}

/* Full-width primary action (e.g. auth submit) */
.btn-block{ width:100%; }

/* CP-20: per-species catch-count chips under the photo reel */
.species-stats{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; }

/* CP-34: species artwork. `.fish-art` fills its box; a locked/uncaught tile
   greys it out with a CSS filter (see .fish-tile.locked below) rather than
   recolouring, since the art is a raster image, not a currentColor SVG. */
.fish-art{ width:100%; height:100%; display:block; object-fit:contain; }
.fish-thumb{
  width:56px; height:40px; flex:none; padding:3px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand); border:1px solid var(--line);
  border-radius:8px; background:rgba(255,255,255,.03);
}
.species-art-pick{ display:flex; flex-direction:column; gap:6px; align-items:center; }
.species-art-pick .fish-thumb{ width:76px; height:54px; }

/* CP-34: name-driven suggested-fish autocomplete for the Add-a-species form. */
.autocomplete{ position:relative; }
.autocomplete-list{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20;
  max-height:220px; overflow-y:auto; display:none;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#151517; box-shadow:var(--shadow-sm);
}
.autocomplete-item{
  display:block; width:100%; text-align:left; padding:8px 12px;
  border:none; border-radius:0; background:none; color:var(--text);
  font:inherit; cursor:pointer;
}
.autocomplete-item:hover, .autocomplete-item.active{
  background:rgba(230,184,77,.12); color:var(--brand);
}

/* CP-34: the species collection grid ("Fish Dex"). */
.species-collection{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(96px,1fr));
  gap:10px; margin-top:10px;
}
.fish-tile{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:10px 6px 8px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .06s ease;
}
.fish-tile:hover{ border-color:var(--brand-strong); background:rgba(230,184,77,.08); }
.fish-tile:active{ transform:translateY(1px); }
.fish-tile:focus-visible{ outline:none; border-color:var(--brand); box-shadow:var(--focus); }
.fish-cell{
  width:100%; height:52px; color:var(--brand);
  display:flex; align-items:center; justify-content:center;
}
.fish-points{ font-size:.72rem; font-weight:700; color:var(--brand); }
.fish-name{ font-size:.8rem; line-height:1.2; overflow-wrap:break-word; word-break:break-word; }
.fish-count{ font-size:.8rem; font-weight:700; color:var(--brand); }
/* Uncaught species: greyed-out silhouette, muted name/points, no count. */
.fish-tile.locked .fish-cell{ filter:grayscale(1); opacity:.4; }
.fish-tile.locked .fish-name{ color:var(--muted); }
.fish-tile.locked .fish-points{ color:var(--muted); }

/* Owner-only "+" tile that opens the add-species popup. */
.fish-tile-add{ border-style:dashed; justify-content:center; }
.fish-tile-add .fish-add-plus{
  height:52px; display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; line-height:1; color:var(--brand); font-weight:300;
}
.fish-tile-add .fish-name{ color:var(--brand); }
.fish-tile-add:hover{ background:rgba(230,184,77,.10); }

/* CP-34: species detail popup (Fish Dex entry). */
.species-modal-head{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:2px 0 14px; }
.species-modal-img{
  width:170px; height:118px; flex:none; padding:6px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand); border:1px solid var(--line);
  border-radius:var(--radius-sm); background:rgba(255,255,255,.03);
}
.species-modal-meta{ min-width:150px; }
.species-modal-name{ margin:0 0 8px; font-size:1.3rem; }
.species-stats-grid{ display:grid; grid-template-columns:1fr; gap:6px; margin:12px 0; }
.species-stat{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:rgba(255,255,255,.03);
}
.species-stat-ico{ font-size:1rem; width:1.4em; text-align:center; flex:none; }
.species-stat-label{ color:var(--muted); font-size:.85rem; }
.species-stat-val{ margin-left:auto; font-weight:600; text-align:right; overflow-wrap:anywhere; }
.species-info{ margin-top:6px; }
.species-info > .species-summary{ display:inline-flex; }
.species-desc{ white-space:pre-wrap; line-height:1.55; margin:8px 0 0; }
/* Owner editing controls inside the popup */
.species-name-input{ font-size:1.15rem; font-weight:700; width:100%; }
.species-art-edit{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; max-width:186px; }
.species-art-edit select{ min-width:0; flex:1; }
.species-owner-danger{ margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }

/* CP-21: collapsible species list — summary styled as a ghost-button toggle */
.species-summary{
  cursor:pointer; user-select:none; list-style:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--text); font-weight:700;
}
.species-summary::-webkit-details-marker{ display:none; }
.species-summary::before{ content:'\25B8'; color:var(--brand); transition:transform .15s ease; }
details[open] > .species-summary::before{ transform:rotate(90deg); }
.species-summary:hover{ background:rgba(255,255,255,.08); border-color:#3a3a45; }

/* CP-22: player-page month calendar filter */
.calendar{
  max-width:360px; margin-bottom:14px; padding:12px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02);
}
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cal-title{ font-weight:700; letter-spacing:.2px; }
.cal-nav{ padding:4px 12px; font-size:1.1rem; line-height:1; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px; }
.cal-dow span{ text-align:center; font-size:.72rem; color:var(--muted); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell, .cal-day{ aspect-ratio:1/1; }
.cal-day{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; padding:0; font:inherit; font-size:.85rem;
  border:1px solid var(--line); border-radius:8px;
  background:rgba(255,255,255,.02); color:var(--muted); cursor:pointer;
}
.cal-day.has-catch{ color:var(--text); font-weight:700; border-color:var(--brand-strong); background:rgba(230,184,77,.10); }
.cal-day:disabled{ cursor:default; opacity:.5; }
.cal-day.selected{ background:linear-gradient(180deg,var(--brand-2),var(--brand)); color:var(--on-brand); border-color:var(--brand-strong); }
.cal-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--brand); color:var(--on-brand);
  font-size:.64rem; font-weight:800;
}
/* CP-23: catch detail modal */
.modal-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:flex-start; justify-content:center;
  padding:24px 16px; overflow-y:auto;
  background:rgba(4,4,6,.66);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal-card{
  position:relative; width:100%; max-width:560px; margin:auto;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}
.modal-close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:50%; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--text); font-size:1rem; line-height:1; cursor:pointer;
}
.modal-close:hover{ background:rgba(255,255,255,.08); border-color:#3a3a45; }
body.modal-open{ overflow:hidden; }

/* CP-53: challenged catches pinned at the top of the feed */
.feed-pinned-head{
  font-size:.72rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--warn);
}
.ex-row--challenged{
  border:1px solid var(--warn); border-radius:var(--radius-sm);
  background:rgba(245,158,11,.06); padding:10px;
}
.feed-divider{ height:1px; background:var(--line); margin:2px 0; }