/* ============================================================
   SF3: 3rd Strike PAL Mod Hub — visual design
   ------------------------------------------------------------
   Direction: the 3rd Strike character-select screen — scorched
   orange-to-ink gradients, grunge grain, a stamped red banner
   for section titles, cyan "1P" lock-on highlights, and bold
   italic condensed poster type standing in for the game's own
   hand-painted lettering.
   ============================================================ */

/* Fonts are loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in includes/header.php, not @import here — @import forces the browser
   to wait for this whole file to download before it even discovers the
   font stylesheet exists, turning a parallel fetch into a slow, serial
   waterfall. See PERFORMANCE NOTES in README.md. */

:root {
  /* -- core palette -- */
  --ink: #130d0a;          /* page base */
  --char: #1e1712;         /* card / panel surface */
  --char-line: #3c2c20;    /* warm border, replaces cool grey */
  --scorch: #c1501f;       /* burnt-orange accent */
  --amber: #f2a53c;        /* gradient partner / hover glow */
  --blood: #d81e3f;        /* banner / danger / CTA red */
  --blood-dark: #6e1122;
  --bone: #f1e6d2;         /* warm off-white text */
  --bone-dim: #b9a88d;     /* muted warm grey-beige */
  --player-blue: #2bb1e6;  /* "1P" lock-on cyan */
  --gold: #e8b923;

  /* -- back-compat aliases so existing component rules stay simple -- */
  --bg: var(--ink);
  --bg-alt: var(--char);
  --border: var(--char-line);
  --text: var(--bone);
  --muted: var(--bone-dim);
  --accent: var(--scorch);
  --accent-2: var(--player-blue);
  --ok: #7a9a3a;
  --danger: var(--blood);
  --radius: 4px;

  /* -- type -- */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow Semi Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background:
    radial-gradient(ellipse 900px 500px at 10% -10%, rgba(242, 165, 60, 0.30), transparent 55%),
    radial-gradient(ellipse 700px 600px at 105% 10%, rgba(193, 80, 31, 0.22), transparent 60%),
    var(--ink);
  background-attachment: fixed;
  position: relative;
}

/* Film-grain texture over everything — the one deliberately "loud" risk,
   directly nodding to the worn/scratched arcade-cabinet art style. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--blood); color: var(--bone); }

:focus-visible {
  outline: 2px solid var(--player-blue);
  outline-offset: 2px;
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.tutorial-figure {
  margin: 16px 0 28px;
}
.tutorial-figure img {
  max-width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.tutorial-page code {
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.9em;
}


/* ============================================================
   Header / brand lockup
   ============================================================ */

.site-header {
  background: linear-gradient(180deg, #0b0806, #17110b 90%);
  border-bottom: 1px solid var(--char-line);
  box-shadow: 0 1px 0 rgba(242, 165, 60, 0.25), 0 6px 24px rgba(0, 0, 0, 0.5);
  position: relative;
  z-index: 2;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; flex-wrap: wrap; gap: 10px; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
}
.brand:hover { text-decoration: none; }
.brand span {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(100deg, var(--blood), var(--blood-dark));
  padding: 4px 9px 3px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);
}
.brand::after {
  content: "PAL MODS";
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.site-search { display: flex; align-items: stretch; gap: 0; flex: 0 1 260px; margin: 0 16px; }
.site-search input {
  background: var(--ink);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--text);
  height: 34px;
  padding: 0 10px;
  line-height: 32px;
  border-radius: 3px 0 0 3px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  width: 100%;
  min-width: 0;
}
.site-search input:focus { outline: none; border-color: var(--scorch); }
.site-search button {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--bone-dim);
  height: 34px;
  padding: 0 12px;
  line-height: 32px;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
  font-size: 0.9rem;
}
.site-search button:hover { color: var(--accent-2); border-color: var(--accent-2); }

.main-nav { display: flex; align-items: center; flex-wrap: wrap; }
.main-nav a {
  margin-left: 18px;
  color: var(--bone);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 3px;
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--player-blue);
  transition: right 0.15s ease;
}
.main-nav a:hover { color: var(--player-blue); text-decoration: none; }
.main-nav a:hover::after { right: 0; }

.main-content { padding: 30px 20px 60px; min-height: 60vh; position: relative; z-index: 1; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.01em; }
h1 { text-transform: uppercase; }
.muted { color: var(--muted); }

code { font-family: var(--font-mono); }

/* ============================================================
   Page banner — the signature component. A stamped, skewed
   red bar standing in for the game's "PLAYER SELECT" banner,
   used for every page/section title.
   ============================================================ */

.page-banner {
  position: relative;
  background: linear-gradient(100deg, var(--blood) 0%, var(--blood-dark) 60%, #1a120e 100%);
  clip-path: polygon(0 0, 100% 0, 97.5% 100%, 0% 100%);
  padding: 18px 40px 20px 22px;
  margin: 0 0 28px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.page-banner::before {
  content: "";
  position: absolute;
  left: 22px; right: 10%; top: 7px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.page-banner-eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241, 230, 210, 0.65);
  margin-bottom: 2px;
}
.page-banner h1, .page-banner .banner-title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  color: var(--bone);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5), 0 0 22px rgba(0, 0, 0, 0.35);
}
.page-banner-meta {
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: rgba(241, 230, 210, 0.8);
}

/* ============================================================
   Flash messages
   ============================================================ */

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 20px;
  border-left: 3px solid;
  background: var(--bg-alt);
  font-size: 0.92rem;
}
.flash-success { border-color: var(--ok); }
.flash-error { border-color: var(--danger); }
.flash ul { margin: 0; padding-left: 20px; }

/* ============================================================
   Forms / buttons
   ============================================================ */

.form-card {
  background: linear-gradient(160deg, #1c1510, #130d0a);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-card.danger-zone {
  border-color: rgba(216, 30, 63, 0.4);
  background: linear-gradient(160deg, #201110, #130d0a);
}
.form-card.danger-zone h2 { color: var(--blood); }

.settings-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.settings-row .form-card { flex: 1 1 320px; margin-top: 0 !important; }

@media (max-width: 720px) {
  .settings-row { flex-direction: column; }
}
.form-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-card input, .form-card select, .form-card textarea {
  background: var(--ink);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 3px;
  font-size: 1rem;
  font-family: var(--font-body);
}
.form-card .field-hint {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--muted);
}
.form-card label.checkbox-row {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.form-card .checkbox-row input { padding: 0; width: auto; accent-color: var(--scorch); }
.keep-portrait-thumb {
  height: 32px;
  width: auto;
  image-rendering: pixelated;
  border: 1px solid var(--player-blue);
  background: #000;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none;
  border-color: var(--scorch);
  box-shadow: 0 0 0 3px rgba(193, 80, 31, 0.25);
}

.btn {
  display: inline-block;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 18px;
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { border-color: var(--accent-2); text-decoration: none; transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(100deg, var(--amber), var(--scorch));
  border-color: var(--scorch);
  color: #1a0d05;
  font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: rgba(216, 30, 63, 0.12); }
.btn-sm { padding: 5px 12px; font-size: 0.72rem; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.reason-input {
  background: var(--ink); border: 1px solid var(--border); color: var(--text);
  border-radius: 3px; padding: 5px 8px; font-size: 0.8rem; font-family: var(--font-body);
}

/* ============================================================
   Character select sidebar
   ============================================================ */

.browse-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  align-items: start;
}
.char-sidebar {
  background: linear-gradient(165deg, #1b140f, #0f0a07);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: sticky;
  top: 16px;
}
.char-sidebar h2 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  color: var(--bone-dim);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.char-all-btn {
  display: block;
  text-align: center;
  background: linear-gradient(100deg, var(--blood), var(--blood-dark));
  border: none;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0% 100%);
  color: var(--bone);
  padding: 9px 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.6;
}
.char-all-btn.active, .char-all-btn:hover { opacity: 1; text-decoration: none; }
.char-all-btn.active { box-shadow: 0 0 0 1px var(--player-blue), 0 0 14px rgba(43, 177, 230, 0.4); }

/* No box, no border, no background — just the select image itself.
   The hover/active feedback is carried entirely by the filter, lift,
   and glow below rather than by any visible frame. */
.char-grid { display: flex; gap: 10px; align-items: stretch; }
.char-col { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.char-btn {
  position: relative;
  display: block;
  filter: grayscale(0.55) brightness(0.8);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.char-btn img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.char-btn:hover { filter: grayscale(0.15) brightness(0.95); text-decoration: none; transform: translateY(-2px); }
.char-btn.active {
  filter: none;
}
.char-btn.active::before {
  content: "";
  position: absolute;
  /* select_highlight.png is intentionally bigger than the icon (to read as
     a border around it) — this extends the box itself past the icon's
     edges by that same amount, rather than squashing the image down to
     the icon's size. Tune this percentage to match your actual asset: if
     the highlight image is, say, 20% larger than the icon in each
     dimension, the overflow on each side is half that, so -10%. */
  inset: -12%;
  background-image: url("/assets/images/select/select_highlight.png");
  background-size: 100% 100%;
  background-position: center;
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .char-sidebar { position: static; }

  /* The centered-column layout looks better on desktop, but on mobile a
     plain row-major grid reads cleaner and more compact — each .char-btn
     already carries a grid-column/grid-row from PHP (see character_grid_columns()),
     so switching back to CSS Grid here and making the column wrappers
     "disappear" via display:contents is enough to get proper horizontal
     rows without touching the markup. */
  .char-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, auto);
  }
  .char-col { display: contents; }
}

/* ============================================================
   Mods toolbar / grid / cards
   ============================================================ */

.mods-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.sort-form label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px;
}
.sort-form select {
  background: var(--bg-alt); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 6px 10px; font-family: var(--font-body);
}

.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.mod-card {
  position: relative;
  background: linear-gradient(165deg, #1c1510, #110c09);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mod-card::before, .mod-card::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid var(--scorch);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 2;
}
.mod-card::before { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.mod-card::after { bottom: 6px; right: 6px; border-left: none; border-top: none; }
.mod-card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.5); }
.mod-card:hover::before, .mod-card:hover::after { opacity: 1; }

.mod-card-img { display: block; background: #000; aspect-ratio: 4/3; overflow: hidden; }
.mod-card-img img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mod-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.mod-card-body h3 {
  margin: 0; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.mod-card-meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.mod-card-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: 8px; }
.mod-card-date { font-size: 0.7rem; font-family: var(--font-mono); color: var(--muted); }

/* ============================================================
   Like button
   ============================================================ */

.like-btn {
  background: var(--ink);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  min-height: 30px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.like-btn .heart { color: var(--muted); font-size: 1.05rem; line-height: 0; }
.like-btn .like-count { font-family: var(--font-mono); font-weight: 600; color: var(--bone); }
.like-btn.liked { border-color: var(--blood); color: var(--blood); }
.like-btn.liked .heart { color: var(--blood); text-shadow: 0 0 10px rgba(216, 30, 63, 0.6); }
.like-btn:hover:not(.liked) { border-color: var(--blood); color: var(--blood); }
.like-btn:hover:not(.liked) .heart { color: var(--blood); }
.like-btn:active { transform: scale(0.94); }
.like-btn.large { padding: 10px 20px; font-size: 0.85rem; }

@media (prefers-reduced-motion: no-preference) {
  .like-btn.liked .heart { animation: heartPunch 0.28s ease; }
}
@keyframes heartPunch {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* ============================================================
   Favorite button (star) — same interaction pattern as Like,
   registered users only, gold instead of red.
   ============================================================ */

.mod-card-actions { display: flex; align-items: center; gap: 6px; }

.favorite-btn {
  background: var(--ink);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 10px;
  min-height: 30px;
  border-radius: 3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.favorite-btn .star { color: var(--muted); font-size: 1.05rem; line-height: 0; }
.favorite-btn .favorite-count { font-family: var(--font-mono); font-weight: 600; color: var(--bone); }
.favorite-btn.favorited { border-color: var(--gold); color: var(--gold); }
.favorite-btn.favorited .star { color: var(--gold); text-shadow: 0 0 10px rgba(232, 185, 35, 0.6); }
.favorite-btn:hover:not(.favorited) { border-color: var(--gold); color: var(--gold); }
.favorite-btn:hover:not(.favorited) .star { color: var(--gold); }
.favorite-btn:active { transform: scale(0.94); }
.favorite-btn.large { padding: 10px 20px; font-size: 0.85rem; }

@media (prefers-reduced-motion: no-preference) {
  .favorite-btn.favorited .star { animation: heartPunch 0.28s ease; }
}

.download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 30px;
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.download-btn:hover { border-color: var(--accent-2); color: var(--accent-2); text-decoration: none; }
.download-btn:active { transform: scale(0.94); }
.download-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.btn .download-icon { width: 15px; height: 15px; vertical-align: -3px; margin-right: 2px; }

/* ============================================================
   Pagination
   ============================================================ */

.pagination { display: flex; gap: 6px; margin-top: 24px; font-family: var(--font-mono); font-size: 0.85rem; }
.pagination a { padding: 6px 12px; border: 1px solid var(--border); border-radius: 3px; color: var(--text); }
.pagination a.active { background: var(--scorch); border-color: var(--scorch); color: #1a0d05; font-weight: 700; }

/* ============================================================
   Mod detail page
   ============================================================ */

.mod-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.mod-detail-img {
  position: relative;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
}
.mod-detail-img img { max-width: 100%; max-height: 70vh; image-rendering: pixelated; }
.mod-detail-img img.zoomable { cursor: zoom-in; transition: filter 0.15s ease; }
.mod-detail-img img.zoomable:hover { filter: brightness(1.08); }

/* Portrait: pinned top-right of the preview like the in-game HUD portrait.
   Chamfered cyan "1P lock-on" frame, red banner-style stamp underneath.
   The frame is clipped; the outer figure isn't, so the caption can hang
   off the edge and the drop shadow isn't clipped away. */
.mod-detail-img.has-portrait { min-height: 200px; }
.mod-portrait {
  position: absolute;
  top: 14px;
  right: 14px;
  margin: 0;
  z-index: 2;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
  animation: portrait-lock-on 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both 0.15s;
}
.mod-portrait-frame {
  display: block;
  padding: 3px;
  background: linear-gradient(135deg, var(--player-blue), #145f7d 70%, var(--player-blue));
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: filter 0.15s ease;
}
.mod-portrait:hover .mod-portrait-frame { filter: brightness(1.2); }
.mod-detail-img .mod-portrait img {
  display: block;
  width: auto;
  height: auto;
  max-width: 160px;   /* ~128x80 shows 1:1; big upscales shrink to fit */
  max-height: 120px;
  background: #000;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.mod-portrait figcaption {
  position: absolute;
  right: 12px;
  bottom: -10px;
  padding: 1px 10px 1px 8px;
  background: linear-gradient(100deg, var(--blood), var(--blood-dark));
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  pointer-events: none;
}
@keyframes portrait-lock-on {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mod-portrait { animation: none; }
}
@media (max-width: 600px) {
  .mod-portrait { top: 8px; right: 8px; }
  .mod-detail-img .mod-portrait img { max-width: 96px; max-height: 72px; }
  .mod-detail-img.has-portrait { min-height: 150px; }
}

/* ============================================================
   Image zoom overlay
   ============================================================ */

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 7, 5, 0.94);
  display: flex;
  flex-direction: column;
}
.zoom-overlay[hidden] { display: none; }
.zoom-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.zoom-btn {
  background: var(--ink);
  border: 1px solid var(--border);
  color: var(--bone);
  width: 36px;
  height: 36px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1.1rem;
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-btn:hover { border-color: var(--accent-2); color: var(--accent-2); }
.zoom-reset { width: auto; padding: 0 14px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.zoom-close { margin-left: 16px; border-color: var(--blood); color: var(--blood); }
.zoom-close:hover { background: rgba(216, 30, 63, 0.12); color: var(--blood); border-color: var(--blood); }
.zoom-level { font-family: var(--font-mono); min-width: 56px; text-align: center; color: var(--bone-dim); font-size: 0.9rem; }
.zoom-viewport {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.zoom-viewport img {
  max-width: 90vw;
  max-height: 78vh;
  image-rendering: pixelated;
  transform-origin: center center;
  user-select: none;
  will-change: transform;
}
.zoom-hint {
  text-align: center;
  font-size: 0.75rem;
  padding: 8px;
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .zoom-toolbar { flex-wrap: wrap; gap: 8px; }
  .zoom-hint { display: none; }
}
.mod-description { white-space: pre-line; }
.mod-tech-meta { font-family: var(--font-mono); font-size: 0.82rem; }
.mod-detail-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.mod-owner-actions { margin-top: 10px; }
.recategorize-form { margin-top: 14px; align-items: center; }
.recategorize-form label {
  display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.recategorize-form select {
  background: var(--ink); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 5px 8px; font-family: var(--font-body);
}
.report-details { margin-top: 18px; }
.report-details summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: none;
}
.report-details summary::-webkit-details-marker { display: none; }
.report-details summary::before { content: "\25B8  "; color: var(--blood); }
.report-details[open] summary::before { content: "\25BE  "; }
.report-details summary:hover { color: var(--bone); }
.report-form { margin-top: 12px; max-width: 420px; padding: 16px; }

.version-history { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.version-history h3 {
  margin: 0 0 10px; font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.version-history ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.version-history li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.version-history li.current { color: var(--bone); }
.version-history li a { font-weight: 700; }

.search-result-count { margin-bottom: 14px; }

.notification-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.notification-item {
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-alt);
}
.notification-item.unread { border-left: 3px solid var(--scorch); background: linear-gradient(90deg, rgba(193,80,31,0.08), transparent 60%); }
.notification-item a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; color: var(--text); text-decoration: none;
}
.notification-item a:hover { background: rgba(255,255,255,0.03); }
.notification-text { font-size: 0.92rem; }
.notification-date { font-size: 0.72rem; font-family: var(--font-mono); white-space: nowrap; }
@media (max-width: 760px) { .mod-detail { grid-template-columns: 1fr; } }

/* ============================================================
   Profile
   ============================================================ */

.profile-header { margin-bottom: 30px; }
.profile-stats { display: flex; gap: 30px; margin-top: 12px; }

.follow-btn {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  font-style: normal;
  text-shadow: none;
  background: linear-gradient(100deg, var(--amber), var(--scorch));
  border: 1px solid var(--scorch);
  color: #1a0d05;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 22px;
  border-radius: 3px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease, background 0.15s ease, color 0.15s ease;
}
.follow-btn:hover { filter: brightness(1.08); }
.follow-btn:active { transform: scale(0.96); }
.follow-btn.following {
  background: var(--ink);
  border-color: var(--border);
  color: var(--bone-dim);
}
.follow-btn.following:hover { border-color: var(--blood); color: var(--blood); }
.stat {
  background: linear-gradient(165deg, #1c1510, #110c09);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 26px;
  text-align: center;
}
.stat strong { display: block; font-family: var(--font-mono); font-size: 1.7rem; font-weight: 600; color: var(--scorch); }
.stat span { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* ============================================================
   Admin
   ============================================================ */

.admin-nav { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.admin-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.admin-table th, .admin-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; font-size: 0.88rem; vertical-align: middle; }
.admin-table th { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); }
.admin-table tr:hover td { background: rgba(193, 80, 31, 0.06); }
.admin-thumb { width: 60px; height: 45px; object-fit: contain; background: #000; border: 1px solid var(--border); }
.badge {
  font-family: var(--font-body); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 3px; background: var(--border); margin-left: 6px;
}
.badge-danger { background: rgba(216, 30, 63, 0.18); color: var(--danger); }
.badge-ok { background: rgba(122, 154, 58, 0.18); color: var(--ok); }
.filter-tabs { display: flex; gap: 16px; margin: 16px 0; border-bottom: 1px solid var(--border); }
.filter-tabs a {
  padding-bottom: 8px; color: var(--muted); font-weight: 600; text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.05em;
}
.filter-tabs a.active { color: var(--text); border-bottom: 2px solid var(--scorch); }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 0;
  color: var(--muted);
  font-size: 0.78rem;
  position: relative;
  z-index: 1;
}
.footer-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(185, 168, 141, 0.6);
}

/* ============================================================
   Rank badges — shown inline next to a username wherever it appears.
   ============================================================ */

.rank-badge {
  display: inline-block;
  height: 1.3em;
  width: auto;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -1px;
}
.page-banner .rank-badge { height: 1em; margin-left: 4px; }

/* ============================================================
   Legal pages (privacy / terms) — plain prose, comfortable to read
   ============================================================ */

.legal-page { max-width: 720px; line-height: 1.7; }
.legal-page h2 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 1.15rem;
  color: var(--bone);
  text-transform: none;
  font-style: normal;
}
.legal-page p { margin: 0 0 14px; }
.legal-page ul { margin: 0 0 14px; padding-left: 22px; }
.legal-page li { margin-bottom: 6px; }
.legal-disclaimer {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}