:root {
  --bg: #08090c;
  --bg-2: #0d0f14;
  --surface: #12151c;
  --surface-2: #181c25;
  --surface-3: #1f2430;
  --border: #232937;
  --border-2: #2e3546;
  --text: #eef0f5;
  --text-2: #b6bccb;
  --muted: #7d8598;
  --accent: #ff5a1f;
  --accent-2: #ff8a4c;
  --accent-ink: #140903;
  --flame-1: #ffc94d;
  --flame-2: #ff7a1f;
  --flame-3: #e8361b;
  --green: #2ee6a6;
  --amber: #ffb547;
  --red: #ff4d6d;
  --gold: #ffd166;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .7);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Barlow Condensed', 'Inter', system-ui, sans-serif;
  --wrap: 1320px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p { margin: 0 0 1em; }
code { background: var(--surface-3); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap-row { flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.stack > * + * { margin-top: 16px; }
.hide { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* M stripe motif */
.stripe-line { height: 2px; background: linear-gradient(90deg, transparent, var(--flame-3) 20%, var(--flame-2) 50%, var(--flame-1) 80%, transparent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
  font: 600 14px/1 var(--font); cursor: pointer; transition: .15s; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: #3a4357; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: #ff7a3d; border-color: #ff7a3d; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: transparent; border-color: #5a2532; color: #ff8fa3; }
.btn-danger:hover { background: #3a1520; }
.btn-success { background: #0f3d30; border-color: #1b6b52; color: var(--green); }
.btn-success:hover { background: #135040; }
.btn-gold { background: linear-gradient(135deg, #ffd166, #ff9f1c); border: 0; color: #1a1205; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-lg { height: 50px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
.btn-sm { height: 32px; padding: 0 11px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn.active { border-color: var(--accent); color: var(--accent-2); }
button.linklike { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; font: inherit; }
button.linklike:hover { color: var(--text); }

/* Header */
.announce { background: linear-gradient(90deg, #3a1406, #1c110b 50%, #3a1406); font-size: 13px; text-align: center; padding: 8px 16px; color: #ffe2cf; }
.announce b { color: #fff; }
.header { position: sticky; top: 0; z-index: 50; background: rgba(8, 9, 12, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.header .wrap { display: flex; align-items: center; gap: 22px; height: 66px; }
.logo { display: flex; align-items: center; gap: 5px; font: italic 900 24px/1 var(--display); letter-spacing: .3px; text-transform: uppercase; }
.logo span em { font-style: italic; padding-right: .06em; background: linear-gradient(180deg, #ffd166, #ff6a1f 32%, var(--flame-3) 62%, #9b1410); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-flame { height: 1.12em; width: auto; flex: none; transform: translateY(-.06em); transform-origin: 50% 100%; }
.logo:hover .logo-flame { animation: flame-flick .9s ease-in-out infinite; }
@keyframes flame-flick { 0%, 100% { transform: translateY(-.06em); } 30% { transform: translateY(-.06em) scale(.95, 1.07) skewX(-3deg); } 65% { transform: translateY(-.06em) scale(1.03, .97) skewX(2deg); } }
@media (prefers-reduced-motion: reduce) { .logo:hover .logo-flame { animation: none; } }
.nav { display: flex; gap: 2px; }
.nav a, .nav .dd > button { padding: 8px 12px; border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 14px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.nav a:hover, .nav a.on, .nav .dd > button:hover { color: var(--text); background: var(--surface); }
.nav a.store { color: var(--gold); }
.dd { position: relative; }
.dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 12px; padding: 6px; box-shadow: var(--shadow); display: none; z-index: 60;
}
.dd.open .dd-menu { display: block; }
.dd-menu.right { left: auto; right: 0; }
.dd-menu a, .dd-menu button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text-2); font: 500 14px var(--font); background: none; border: 0; cursor: pointer; text-align: left; }
.dd-menu a:hover, .dd-menu button:hover { background: var(--surface-2); color: var(--text); }
.dd-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.search { flex: 1; max-width: 420px; margin-left: auto; position: relative; }
.search input[type=search] { width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 0 14px 0 38px; font: 14px var(--font); }
.search input:focus { outline: none; border-color: var(--accent); }
.search svg { position: absolute; left: 12px; top: 12px; color: var(--muted); }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.avatar-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--text); border-radius: 10px; }
.avatar-btn:hover { background: var(--surface); }
.badge-count { background: var(--red); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.menu-toggle { display: none; }

/* Avatars */
.av { border-radius: 50%; object-fit: cover; background: var(--surface-3); flex: none; }
.av-24 { width: 24px; height: 24px; } .av-32 { width: 32px; height: 32px; } .av-40 { width: 40px; height: 40px; }
.av-56 { width: 56px; height: 56px; } .av-72 { width: 72px; height: 72px; }

/* Role badge */
.role {
  display: inline-flex; align-items: center; gap: 6px; font: 700 11px/1 var(--font); letter-spacing: .4px; text-transform: uppercase;
  padding: 5px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); white-space: nowrap;
}
.role svg { width: 12px; height: 12px; }
.role-lg { font-size: 12px; padding: 7px 10px; }
.verified-tick { color: var(--green); display: inline-flex; vertical-align: -2px; }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.chip-game { color: #fff; background: color-mix(in srgb, var(--c) 22%, rgba(0,0,0,.55)); border-color: color-mix(in srgb, var(--c) 60%, transparent); backdrop-filter: blur(6px); }
.chip-price { background: rgba(0,0,0,.6); border-color: #6b5520; color: var(--gold); backdrop-filter: blur(6px); }
.chip-free { background: rgba(0,0,0,.55); border-color: #1b6b52; color: var(--green); backdrop-filter: blur(6px); }
.chip-official { background: linear-gradient(90deg, rgba(28,63,148,.85), rgba(226,35,26,.75)); border: 0; color: #fff; }
.status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 4px 8px; border-radius: 6px; }
.status-approved { color: var(--green); background: rgba(46,230,166,.1); }
.status-pending { color: var(--amber); background: rgba(255,181,71,.1); }
.status-rejected { color: var(--red); background: rgba(255,77,109,.1); }

/* Sections */
.section { padding: 46px 0 8px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head h2 { font: 800 30px/1 var(--display); text-transform: uppercase; letter-spacing: .4px; display: flex; align-items: center; gap: 12px; }
.section-head a { color: var(--accent-2); font-weight: 600; font-size: 14px; }
.eyebrow { font: 700 12px var(--font); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); }

/* Hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(900px 400px at 85% 10%, rgba(255,90,31,.22), transparent 60%),
  radial-gradient(700px 400px at 10% 100%, rgba(255,201,77,.1), transparent 60%),
  linear-gradient(180deg, #0b0d12, var(--bg)); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000, transparent 85%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; padding-top: 56px; padding-bottom: 56px; align-items: center; }
.hero h1 { font: 800 clamp(42px, 5.4vw, 74px)/.95 var(--display); text-transform: uppercase; letter-spacing: .3px; margin: 14px 0 18px; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--flame-1), var(--flame-2) 50%, var(--flame-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { font-size: 18px; color: var(--text-2); max-width: 540px; }
.hero-search { display: flex; gap: 8px; margin: 26px 0 18px; max-width: 560px; }
.hero-search input { flex: 1; height: 52px; border-radius: 12px; border: 1px solid var(--border-2); background: rgba(18,21,28,.85); color: var(--text); padding: 0 18px; font: 16px var(--font); }
.hero-search input:focus { outline: none; border-color: var(--accent); }
.hero-stats { display: flex; gap: 30px; margin-top: 30px; }
.hero-stats b { display: block; font: 800 30px/1 var(--display); }
.hero-stats span { color: var(--muted); font-size: 13px; }
.quick-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-tags a { font-size: 13px; color: var(--text-2); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border); background: rgba(18,21,28,.6); }
.quick-tags a:hover { border-color: var(--accent); color: var(--text); }

.showcase { position: relative; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-2); box-shadow: 0 40px 80px -30px rgba(255,90,31,.35); }
.showcase .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; }
.showcase .slide.on { opacity: 1; }
.showcase img { width: 100%; height: 100%; object-fit: cover; }
.showcase .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px 20px; background: linear-gradient(transparent, rgba(0,0,0,.88)); }
.showcase .cap h3 { font: 800 28px/1.05 var(--display); text-transform: uppercase; }
.showcase .dots { position: absolute; top: 16px; right: 16px; display: flex; gap: 6px; }
.showcase .dots button { width: 26px; height: 4px; border-radius: 2px; border: 0; background: rgba(255,255,255,.3); cursor: pointer; padding: 0; }
.showcase .dots button.on { background: #fff; }

/* Game tiles */
.games { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.game-tile { position: relative; padding: 18px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(140deg, color-mix(in srgb, var(--c) 20%, var(--surface)), var(--surface) 60%); overflow: hidden; transition: .2s; }
.game-tile:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.game-tile b { display: block; font: 800 22px/1.05 var(--display); text-transform: uppercase; }
.game-tile span { color: var(--muted); font-size: 13px; }
.game-tile .main-tag { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--c); }

/* Mod grid & card */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; display: flex; flex-direction: column; }
.card:hover { transform: translateY(-3px); border-color: var(--border-2); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-media img { transform: scale(1.04); }
.card-media .tl { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.card-media .tr { position: absolute; top: 10px; right: 10px; }
.card-body { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-weight: 700; font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title:hover { color: var(--accent-2); }
.card-author { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
.card-author:hover { color: var(--text); }
.card-meta { margin-top: auto; display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); padding-top: 9px; border-top: 1px solid var(--border); }
.card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-meta svg { width: 14px; height: 14px; }
.star { color: var(--gold); }

/* Creator cards */
.creators-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.creator-card { text-align: center; padding: 22px 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: .2s; position: relative; overflow: hidden; }
.creator-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 54px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 35%, transparent), transparent); }
.creator-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.creator-card .av { margin: 0 auto 10px; position: relative; border: 3px solid var(--surface); }
.creator-card b { display: block; font-size: 15px; }
.creator-card .stats { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.creator-card .stats strong { color: var(--text); display: block; font-size: 15px; }

/* CTA banner */
.cta { margin: 56px 0 10px; border-radius: 20px; border: 1px solid var(--border-2); padding: 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; background: radial-gradient(600px 300px at 100% 0, rgba(255,90,31,.25), transparent 60%), var(--surface); position: relative; overflow: hidden; }
.cta h2 { font: 800 40px/1 var(--display); text-transform: uppercase; margin-bottom: 12px; }
.cta ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cta li { display: flex; gap: 10px; align-items: center; color: var(--text-2); }
.cta li::before { content: '✓'; color: var(--green); font-weight: 800; }

/* Browse */
.page-head { padding: 34px 0 22px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.page-head h1 { font: 800 44px/1 var(--display); text-transform: uppercase; }
.browse { display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding-top: 26px; }
.filters { position: sticky; top: 86px; align-self: start; display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 100px); overflow: auto; padding-right: 4px; }
.filters h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 8px; }
.filter-list { display: flex; flex-direction: column; gap: 2px; }
.filter-list a { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 8px; color: var(--text-2); font-size: 14px; }
.filter-list a:hover { background: var(--surface); color: var(--text); }
.filter-list a.on { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.active-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.active-filters a { font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border-2); }
.active-filters a::after { content: ' ✕'; color: var(--muted); }
select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], textarea {
  height: 42px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--text);
  padding: 0 12px; font: 14px var(--font); width: 100%;
}
textarea { height: auto; padding: 12px; resize: vertical; min-height: 110px; line-height: 1.5; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,31,.18); }
select.inline { width: auto; height: 38px; }
.empty { text-align: center; padding: 70px 20px; color: var(--muted); border: 1px dashed var(--border-2); border-radius: var(--radius); }
.empty b { display: block; font-size: 18px; color: var(--text); margin-bottom: 6px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin: 30px 0; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--border); padding: 0 10px; font-size: 14px; }
.pagination a:hover { border-color: var(--accent); }
.pagination .on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Mod page */
.mod-head { padding: 28px 0 0; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.crumbs a:hover { color: var(--text); }
.mod-title { font: 800 clamp(34px, 4vw, 52px)/1 var(--display); text-transform: uppercase; }
.mod-layout { display: grid; grid-template-columns: 1fr 370px; gap: 28px; padding: 22px 0 40px; }
.gallery-main { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: zoom-in; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.thumbs button { aspect-ratio: 16/9; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface); opacity: .65; }
.thumbs button.on, .thumbs button:hover { border-color: var(--accent); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 26px 0 20px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs a { padding: 12px 14px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-color: var(--accent); }
.tabs .n { font-size: 12px; background: var(--surface-2); padding: 2px 7px; border-radius: 99px; margin-left: 4px; color: var(--text-2); }
.prose { color: var(--text-2); font-size: 15.5px; line-height: 1.7; }
.prose h3, .prose h4, .prose h5 { color: var(--text); font-size: 19px; margin: 24px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin: 4px 0; }
.prose a { color: var(--accent-2); text-decoration: underline; }
.prose strong { color: var(--text); }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 14px; }
.buy-box { position: relative; } /* no overflow clipping: the collection and report menus open below it */
.buy-box .price { font: 800 44px/1 var(--display); }
.buy-box.paid { border-color: #4b3d18; background: radial-gradient(400px 200px at 100% 0, rgba(255,209,102,.12), transparent 60%), var(--surface); }
.dl-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.dl-meta div { background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.dl-meta span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.dl-meta b { font-size: 15px; }
.trust { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; font-size: 13px; color: var(--text-2); }
.trust li { display: flex; gap: 8px; }
.trust li::before { content: '✓'; color: var(--green); font-weight: 800; }
.actions-row { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; margin-top: 10px; }
.liked { color: var(--red) !important; border-color: #5a2532 !important; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; text-align: right; font-weight: 600; }
.author-card .top { display: flex; gap: 12px; align-items: center; }
.author-card .nums { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: 16px 0; padding: 12px 0; border-block: 1px solid var(--border); }
.author-card .nums b { display: block; font-size: 17px; }
.author-card .nums span { font-size: 12px; color: var(--muted); }
.tenure { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list a { font-size: 12px; padding: 4px 9px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.tag-list a:hover { color: var(--text); }
.rating-big { display: flex; align-items: center; gap: 16px; }
.rating-big b { font: 800 46px/1 var(--display); }
.stars-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.stars-input input { display: none; }
.stars-input label { font-size: 26px; color: var(--surface-3); cursor: pointer; transition: .1s; line-height: 1; }
.stars-input label:hover, .stars-input label:hover ~ label, .stars-input input:checked ~ label { color: var(--gold); }
.comment { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.comment .body { flex: 1; min-width: 0; }
.comment .who { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.comment p { margin: 6px 0 0; color: var(--text-2); white-space: pre-wrap; word-wrap: break-word; }
.timeline { border-left: 2px solid var(--border-2); margin-left: 6px; padding-left: 20px; }
.timeline .item { position: relative; padding-bottom: 22px; }
.timeline .item::before { content: ''; position: absolute; left: -27px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
.timeline .item:not(:first-child)::before { background: var(--surface-3); }
.timeline pre { font: 14px/1.6 var(--font); white-space: pre-wrap; color: var(--text-2); margin: 6px 0 0; }
.notice { padding: 14px 16px; border-radius: 12px; border: 1px solid; font-size: 14px; margin-bottom: 18px; display: flex; gap: 10px; align-items: flex-start; }
.notice-warn { border-color: #6b4d16; background: rgba(255,181,71,.07); color: #ffd79a; }
.notice-error { border-color: #5a2532; background: rgba(255,77,109,.07); color: #ffb3c1; }
.notice-info { border-color: #5a3420; background: rgba(255,90,31,.07); color: #ffd6bf; }

.mobile-cta { display: none; }
@media (max-width: 960px) {
  .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(13,15,20,.95); backdrop-filter: blur(12px); border-top: 1px solid var(--border-2); }
  .mobile-cta b { display: block; font-size: 17px; }
  body:has(.mobile-cta) .footer { padding-bottom: 70px; }
}

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 100; display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 100%; border-radius: 10px; }

/* Profile */
.profile-banner { height: 260px; position: relative; background: var(--surface-2) center/cover; border-bottom: 1px solid var(--border); }
.profile-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,9,12,.9)); }
.profile-head { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: end; margin-top: -70px; position: relative; z-index: 2; }
.profile-head .av { width: 140px; height: 140px; border: 5px solid var(--bg); box-shadow: var(--shadow); }
.profile-head h1 { font: 800 46px/1 var(--display); text-transform: uppercase; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-head .handle { color: var(--muted); font-size: 15px; margin: 6px 0 10px; }
.profile-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); margin-top: 10px; }
.profile-meta span, .profile-meta a { display: inline-flex; gap: 6px; align-items: center; }
.profile-meta a:hover { color: var(--accent-2); }
.stat-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 28px 0 0; }
.stat-strip div { background: var(--surface); padding: 16px 18px; }
.stat-strip b { display: block; font: 800 28px/1 var(--display); }
.stat-strip span { color: var(--muted); font-size: 12.5px; }
.profile-layout { display: grid; grid-template-columns: 1fr 330px; gap: 28px; padding-bottom: 40px; }
.achievements { display: flex; flex-wrap: wrap; gap: 8px; }
.ach { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border-2); font-size: 13px; font-weight: 600; }
.role-card { border-radius: 12px; padding: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border)); }
.role-card .big { font: 800 26px/1 var(--display); text-transform: uppercase; color: var(--c); }
.role-card .since { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.role-card .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 12px; overflow: hidden; }
.role-card .bar i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.follower-faces { display: flex; flex-wrap: wrap; gap: 6px; }
.follower-faces img { border: 2px solid var(--surface); }

/* Forms / auth */
.auth { min-height: calc(100vh - 66px); display: grid; grid-template-columns: 1fr 1fr; }
.auth-side { position: relative; overflow: hidden; background: radial-gradient(700px 400px at 20% 20%, rgba(255,90,31,.25), transparent 60%), radial-gradient(600px 400px at 90% 100%, rgba(255,201,77,.12), transparent 60%), var(--bg-2); border-right: 1px solid var(--border); padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.auth-side h2 { font: 800 54px/.95 var(--display); text-transform: uppercase; margin: 20px 0; }
.auth-side ul { list-style: none; padding: 0; display: grid; gap: 12px; color: var(--text-2); }
.auth-side li { display: flex; gap: 10px; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-form form { width: 100%; max-width: 400px; }
.auth-form h1 { font: 800 38px/1 var(--display); text-transform: uppercase; margin-bottom: 6px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label, .label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--muted); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding: 26px 0 50px; }
.form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; }
.form-section h2 { font-size: 17px; margin-bottom: 4px; }
.form-section > p.muted { font-size: 13px; margin-bottom: 18px; }
.dropzone { border: 2px dashed var(--border-2); border-radius: 12px; padding: 26px; text-align: center; cursor: pointer; transition: .15s; position: relative; color: var(--text-2); background: var(--bg-2); }
.dropzone:hover, .dropzone.drag { border-color: var(--accent); background: rgba(255,90,31,.05); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone b { color: var(--text); display: block; margin-bottom: 4px; }
.previews { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.previews .pv { position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.previews .pv img { width: 100%; height: 100%; object-fit: cover; }
.previews .pv .first { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 800; background: var(--accent); color: var(--accent-ink); padding: 2px 6px; border-radius: 4px; }
.previews label.pv { cursor: pointer; }
.previews label.pv input { position: absolute; right: 6px; top: 6px; accent-color: var(--red); }
.previews label.pv:has(input:checked) img { opacity: .25; }
.guide { position: sticky; top: 86px; }
.guide ol { padding-left: 18px; margin: 0; display: grid; gap: 10px; color: var(--text-2); font-size: 14px; }

/* Flash */
.flash-stack { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: 380px; }
.flash { padding: 13px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border-2); box-shadow: var(--shadow); font-size: 14px; display: flex; gap: 10px; align-items: flex-start; animation: slidein .3s; }
.flash-success { border-color: #1b6b52; } .flash-success::before { content: '✓'; color: var(--green); font-weight: 800; }
.flash-error { border-color: #5a2532; } .flash-error::before { content: '!'; color: var(--red); font-weight: 800; }
.flash-info { border-color: #5a3420; } .flash-info::before { content: 'i'; color: var(--accent-2); font-weight: 800; }
@keyframes slidein { from { transform: translateY(10px); opacity: 0; } }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--bg-2); white-space: nowrap; }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: rgba(255,255,255,.015); }
.thumb-sm { width: 76px; aspect-ratio: 16/9; border-radius: 6px; object-fit: cover; }

/* Dashboard / admin */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; }
.kpi span { font-size: 12.5px; color: var(--muted); }
.kpi b { display: block; font: 800 34px/1.1 var(--display); margin-top: 4px; }
.kpi small { color: var(--green); font-size: 12px; font-weight: 600; }
.kpi.accent::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, var(--flame-1), var(--flame-2) 50%, var(--flame-3)); }
.admin { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 66px); }
.admin-side { border-right: 1px solid var(--border); background: var(--bg-2); padding: 22px 14px; position: sticky; top: 66px; height: calc(100vh - 66px); }
.admin-side h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin: 18px 10px 8px; }
.admin-side a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: 14px; }
.admin-side a:hover { background: var(--surface); color: var(--text); }
.admin-side a.on { background: var(--surface-2); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.admin-main { padding: 28px 32px 60px; min-width: 0; }
.admin-main h1 { font: 800 36px/1 var(--display); text-transform: uppercase; margin-bottom: 20px; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.bars div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.bars i { display: block; width: 100%; background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 5px 5px 2px 2px; min-height: 2px; }
.bars span { font-size: 10.5px; color: var(--muted); }
.queue-item { display: grid; grid-template-columns: 300px 1fr; gap: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.queue-item .imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.queue-item .imgs img { aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
.queue-item .imgs img:first-child { grid-column: 1 / -1; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Footer */
.footer { border-top: 1px solid var(--border); margin-top: 60px; background: var(--bg-2); }
.footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; padding-top: 44px; padding-bottom: 30px; }
.footer h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.3px; color: var(--muted); margin: 0 0 12px; }
.footer a { display: block; color: var(--text-2); font-size: 14px; padding: 4px 0; }
.footer a:hover { color: var(--text); }
.footer .logo { display: flex; font-size: 24px; color: var(--text); padding: 0; }
.footer-bottom { border-top: 1px solid var(--border); padding: 16px 0; font-size: 13px; color: var(--muted); }

/* Error */
.error-page { text-align: center; padding: 110px 20px; }
.error-page b { font: 800 120px/1 var(--display); background: linear-gradient(90deg, var(--flame-1), var(--flame-2) 50%, var(--flame-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Responsive */
@media (max-width: 1180px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .creators-row { grid-template-columns: repeat(3, 1fr); }
  .games { grid-template-columns: repeat(3, 1fr); }
  .stat-strip { grid-template-columns: repeat(3, 1fr); }
  .nav a:not(.store) { padding: 8px 9px; }
}
@media (max-width: 960px) {
  .hero .wrap, .mod-layout, .profile-layout, .form-layout, .browse, .cta, .auth, .admin, .two-col { grid-template-columns: 1fr; }
  .auth-side { display: none; }
  .filters { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; }
  .filters > div { flex: 1 1 200px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-side { position: static; height: auto; display: flex; flex-wrap: wrap; gap: 4px; border-right: 0; border-bottom: 1px solid var(--border); }
  .admin-side h4 { display: none; }
  .admin-main { padding: 22px 16px; }
  .queue-item { grid-template-columns: 1fr; }
  .profile-head { grid-template-columns: 1fr; margin-top: -60px; }
  .profile-head .av { width: 110px; height: 110px; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .nav, .search { display: none; }
  .menu-toggle { display: inline-flex; margin-left: auto; }
  .header.open .nav { display: flex; flex-direction: column; position: absolute; top: 66px; left: 0; right: 0; background: var(--bg); padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .header.open .search { display: block; position: absolute; top: 66px; left: 16px; right: 16px; margin-top: 250px; max-width: none; }
  .guide { position: static; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .grid, .grid-3 { grid-template-columns: 1fr; }
  .creators-row, .games { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 18px; }
  .cta { padding: 26px; }
  .hdr-actions .btn-primary span { display: none; }
  .previews { grid-template-columns: repeat(3, 1fr); }
  .footer .wrap { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
}

/* ======================================================================
   v2: hero video, motion, connections
   ====================================================================== */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.header { view-transition-name: site-header; }

/* Header floats transparently over the hero, turns solid on scroll */
body.has-hero .header { background: transparent; border-color: transparent; backdrop-filter: none; transition: background .35s, border-color .35s, backdrop-filter .35s; }
body.has-hero.scrolled .header, body.has-hero .header.open { background: rgba(8, 9, 12, .94); border-color: var(--border); backdrop-filter: blur(14px); }
body.has-hero .header .search input[type=search] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

.hero-video { position: relative; min-height: min(100svh, 980px); margin-top: -67px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; background: #05070a; }
.hv-media { position: absolute; inset: 0; z-index: -1; }
.hv-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.hv-yt { width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%; left: 50%; top: 50%; inset: auto; transform: translate(-50%, -50%) scale(1.15); pointer-events: none; }
.hv-poster { animation: hv-fade 1.2s 2.5s forwards; }
@keyframes hv-fade { to { opacity: 0; } }
.hv-canvas { background: radial-gradient(1200px 600px at 62% 42%, #2a1208 0%, #06080c 60%); }
.hv-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5,7,10,.55) 0%, rgba(5,7,10,0) 22%, rgba(5,7,10,0) 45%, rgba(5,7,10,.75) 78%, var(--bg) 100%),
  linear-gradient(90deg, rgba(5,7,10,.78) 0%, rgba(5,7,10,.25) 55%, rgba(5,7,10,0) 100%); }
.hv-grain { position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hv-content { padding-top: 140px; padding-bottom: 28px; }
.hv-title { font: 800 clamp(46px, 7.2vw, 108px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.5px; margin: 16px 0 20px; max-width: 980px; text-wrap: balance; }
.hv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.btn-light { background: #fff; color: #07090d; border-color: #fff; }
.btn-light:hover { background: #e7ecf5; border-color: #e7ecf5; }
.btn-glass { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgba(255,255,255,.14); }
.hv-stats { display: flex; gap: clamp(20px, 3.5vw, 48px); }
.hv-stats b { display: block; font: 800 34px/1 var(--display); font-variant-numeric: tabular-nums; }
.hv-stats span { color: rgba(235,240,250,.6); font-size: 13px; }
.hv-controls { position: absolute; right: 20px; top: 92px; display: flex; gap: 6px; }
.hv-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(10,12,18,.45); backdrop-filter: blur(10px); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .2s; }
.hv-btn:hover { background: rgba(255,255,255,.16); }
.i-pause { width: 10px; height: 12px; border-left: 3px solid #fff; border-right: 3px solid #fff; }
.hv-btn.paused .i-pause { width: 0; height: 0; border: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.hv-scroll { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 24px; height: 38px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); }
.hv-scroll span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: hv-wheel 1.8s ease-in-out infinite; }
@keyframes hv-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* Staggered entrance for hero text */
.hv-in { opacity: 0; transform: translateY(18px); animation: hv-rise .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d, 0) * 90ms + 150ms); }
@keyframes hv-rise { to { opacity: 1; transform: none; } }

/* Scroll reveal (class added by JS, so content is visible without JS) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal.in { opacity: 1; transform: none; }

/* OAuth buttons and connected accounts */
.oauth { display: grid; gap: 10px; margin-bottom: 4px; }
.oauth .btn { justify-content: center; gap: 12px; font-weight: 600; }
.oauth-google { background: #fff !important; color: #1f1f1f !important; border-color: #fff !important; }
.oauth-google:hover { background: #eef1f6 !important; }
.oauth-discord { background: #5865f2 !important; color: #fff !important; border-color: #5865f2 !important; }
.oauth-discord:hover { background: #4752c4 !important; }
.oauth .is-off { opacity: .55; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.connection { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.connection:last-child { border-bottom: 0; }
.connection-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; flex: none; }

@media (max-width: 960px) {
  .hero-video { min-height: 92svh; }
  .hv-content { padding-top: 110px; }
  .hv-controls { top: 80px; right: 12px; }
}
@media (max-width: 600px) {
  .hv-stats b { font-size: 26px; }
  .hv-stats { gap: 18px; }
  .hv-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .hv-in { opacity: 1; transform: none; }
}

/* ---------- Animated profiles ---------- */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.profile { --accent: var(--accent-2); --role: var(--accent-2); }
.profile .profile-banner { height: 300px; overflow: hidden; background: #07090d; }
.profile .profile-banner::after { background: linear-gradient(180deg, rgba(8,9,12,0) 30%, rgba(8,9,12,.55) 70%, var(--bg)); z-index: 2; }
.pb-img { position: absolute; inset: -40px 0 0; background: center/cover no-repeat; transform: translateY(var(--py, 0px)) scale(1.06); animation: pb-drift 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes pb-drift { from { background-position: 40% 50%; } to { background-position: 60% 50%; } }
.pb-glow { position: absolute; inset: 0; z-index: 1; background: radial-gradient(600px 260px at 18% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%); mix-blend-mode: screen; opacity: .8; animation: pb-pulse 6s ease-in-out infinite alternate; }
@keyframes pb-pulse { from { opacity: .45; } to { opacity: .9; } }

.profile .profile-head { margin-top: -84px; }
.av-ring { position: relative; width: 148px; height: 148px; border-radius: 50%; padding: 4px; flex: none;
  background: conic-gradient(from var(--spin), var(--accent), color-mix(in srgb, var(--accent) 15%, transparent), var(--role), color-mix(in srgb, var(--role) 15%, transparent), var(--accent));
  box-shadow: 0 0 0 5px var(--bg), 0 18px 50px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  animation: hv-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.av-ring.spin { animation: hv-rise .8s cubic-bezier(.2,.7,.2,1) both, ring-spin 6s linear infinite; }
@keyframes ring-spin { to { --spin: 360deg; } }
.profile .profile-head .av-ring .av { width: 100%; height: 100%; border: 4px solid var(--bg); box-shadow: none; }
.online-dot { position: absolute; right: 12px; bottom: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); border: 4px solid var(--bg); }
.online-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--green); animation: ping 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(1.9); opacity: 0; } }
.online-text { color: var(--green); font-weight: 600; }
.ph-text > * { animation: hv-rise .8s cubic-bezier(.2,.7,.2,1) both; }
.ph-text > :nth-child(2) { animation-delay: .08s; } .ph-text > :nth-child(3) { animation-delay: .16s; } .ph-text > :nth-child(4) { animation-delay: .24s; }
.profile .profile-head h1 { text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.profile .verified-tick { color: var(--accent); }

.profile .stat-strip { background: transparent; border: 0; gap: 12px; }
.profile .stat-strip div { border-radius: 14px; background: var(--surface); border: 1px solid var(--border); transition: transform .25s, border-color .25s; }
.profile .stat-strip div:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.profile .stat-strip b { font-variant-numeric: tabular-nums; }
.profile .tabs a.on { border-color: var(--accent); }
.profile .ach { transition: transform .2s, border-color .2s, background .2s; }
.profile .ach:hover { transform: translateY(-2px) scale(1.03); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface-2)); }
.profile .role-card { position: relative; overflow: hidden; }
.profile .role-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%); transform: translateX(-100%); animation: shine 5s ease-in-out 1.2s infinite; }
@keyframes shine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tenure-ring { width: 76px; height: 76px; flex: none; transform: rotate(-90deg); }
.tenure-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.tr-bg { stroke: rgba(255,255,255,.08); }
.tr-fg { stroke: var(--c); stroke-dasharray: 0 100; animation: ring-fill 1.4s cubic-bezier(.2,.7,.2,1) .4s forwards; }
@keyframes ring-fill { to { stroke-dasharray: var(--pct) 100; } }
.tenure-ring text { transform: rotate(90deg); transform-origin: 32px 32px; fill: var(--text); font: 800 17px var(--display); }
.tenure-ring .tr-sub { font: 600 7.5px var(--font); fill: var(--muted); }
.profile .timeline .item::before { background: var(--accent); }

@media (max-width: 960px) {
  .profile .profile-banner { height: 220px; }
  .av-ring { width: 118px; height: 118px; }
  .profile .profile-head { margin-top: -64px; }
}

/* ======================================================================
   v3: minimal polish + components inspired by the reference sites
   ====================================================================== */

/* Calmer, faster motion */
.reveal { transform: translateY(14px); transition-duration: .5s; transition-delay: calc(var(--i, 0) * 45ms); }

/* Minimal surfaces: fewer borders, more air */
.section { padding: 64px 0 4px; }
.section-head { margin-bottom: 22px; }
.section-head h2 { font-size: 28px; letter-spacing: .2px; }
.section-head a { color: var(--text-2); }
.section-head a:hover { color: var(--text); }
.card { background: transparent; border: 0; border-radius: 16px; overflow: visible; }
.card:hover { transform: none; box-shadow: none; }
.card-media { border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.04) inset; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.card:hover .card-media { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08); }
.card-media img { transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .35s; }
.card:hover .card-media img { transform: scale(1.035); }
.card-alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-alt { opacity: 1; }
.card-body { padding: 12px 2px 4px; gap: 6px; }
.card-meta { border-top: 0; padding-top: 2px; gap: 12px; }
.card-ver { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.chip { backdrop-filter: blur(8px); }
.chip-stage { color: var(--c); background: color-mix(in srgb, var(--c) 16%, rgba(0,0,0,.6)); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.panel { border-color: rgba(255,255,255,.06); }
.game-tile { border-color: rgba(255,255,255,.06); transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.game-tile:hover { transform: translateY(-3px) scale(1.02); }
.creator-card { border-color: rgba(255,255,255,.06); }
.cc-ring { display: inline-block; padding: 3px; border-radius: 50%; margin-bottom: 10px; position: relative; background: conic-gradient(from 0deg, var(--c), transparent 40%, var(--c) 80%); transition: transform .4s; }
.cc-ring .av { margin: 0; border: 3px solid var(--surface); }
.creator-card:hover .cc-ring { transform: rotate(-6deg) scale(1.05); }

/* Category strip under the games */
.browse-strip { padding-top: 40px; }
.cat-strip { display: flex; gap: 8px; overflow-x: auto; padding: 18px 0 2px; scrollbar-width: none; }
.cat-strip a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 14px; border-radius: 99px; background: var(--surface); color: var(--text-2); font-size: 13.5px; font-weight: 600; transition: background .2s, color .2s, transform .2s; }
.cat-strip a:hover { background: var(--surface-3); color: var(--text); transform: translateY(-1px); }

/* Trending rail with big rank numbers */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail-item { position: relative; scroll-snap-align: start; container-type: inline-size; }
.rank { position: absolute; z-index: 2; right: 12px; top: calc(56.25cqw - 62px); font: 800 72px/1 var(--display); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.55); text-shadow: 0 4px 24px rgba(0,0,0,.6); pointer-events: none; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rail-item:hover .rank { transform: translateY(-4px); }
.rail-nav { display: flex; gap: 6px; }
.rail-nav button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-2); background: transparent; color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; transition: background .2s; }
.rail-nav button:hover { background: var(--surface-2); }

/* Search suggestions */
.has-suggest { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 70; background: rgba(18,21,28,.97); backdrop-filter: blur(18px); border: 1px solid var(--border-2); border-radius: 14px; padding: 6px; box-shadow: var(--shadow); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; min-width: 320px; }
.suggest.open { opacity: 1; transform: none; pointer-events: auto; }
.suggest a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--text); }
.suggest a:hover, .suggest a.on { background: var(--surface-3); }
.suggest img { width: 64px; aspect-ratio: 16/10; object-fit: cover; border-radius: 7px; flex: none; }
.suggest img.round { width: 36px; height: 36px; aspect-ratio: 1; border-radius: 50%; margin: 0 14px; }
.suggest span { display: flex; flex-direction: column; min-width: 0; }
.suggest b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest small { font-size: 12px; color: var(--muted); }
.suggest-h { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 8px 10px 4px; }
.suggest-all { justify-content: center; font-size: 13px; color: var(--accent-2) !important; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px !important; margin-top: 4px; }
.suggest-empty { padding: 14px; color: var(--muted); font-size: 14px; }

/* Mod page additions */
.yt-lite { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border: 0; padding: 0; margin-bottom: 14px; border-radius: var(--radius); background: #000 center/cover no-repeat; cursor: pointer; overflow: hidden; }
.yt-lite::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); transition: background .3s; }
.yt-lite:hover::after { background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.4)); }
.yt-play { position: absolute; z-index: 1; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(255,255,255,.92); transition: transform .25s; }
.yt-play::after { content: ''; position: absolute; left: 31px; top: 24px; border-left: 22px solid #07090d; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.yt-lite:hover .yt-play { transform: scale(1.08); }
.yt-label { position: absolute; z-index: 1; left: 18px; bottom: 14px; font-weight: 700; font-size: 14px; color: #fff; }
.yt-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); margin-bottom: 14px; background: #000; }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; margin-top: 28px; border-radius: 14px; overflow: hidden; background: var(--border); border: 1px solid var(--border); }
.specs div { background: var(--surface); padding: 14px 16px; }
.specs span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.specs b { font: 800 22px/1.2 var(--display); }
.requires { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.requires .label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--amber); font-weight: 700; }
.req { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--bg-2); border: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
a.req:hover { border-color: var(--border-2); color: var(--text); }
.req img { width: 46px; aspect-ratio: 16/10; object-fit: cover; border-radius: 5px; }
.req span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-btn .dl-arrow { display: inline-block; transition: transform .2s; }
.dl-btn:hover .dl-arrow { transform: translateX(4px); }
.creator-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.creator-links a, .creator-links > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; color: var(--text-2); }
.creator-links a:hover { color: var(--text); background: var(--surface-3); }
.hv-el[data-hero-video] { opacity: 0; transition: opacity .5s; }
.hv-el[data-hero-video].ready { opacity: 1; }
.hv-scroll { transition: opacity .3s; }
.hv-scroll.gone { opacity: 0; pointer-events: none; }

@media (max-width: 1180px) { .rail { grid-auto-columns: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 960px) { .rail { grid-auto-columns: 46%; } }
@media (max-width: 600px) {
  .rail { grid-auto-columns: 82%; }
  .section { padding-top: 48px; }
  .suggest { min-width: 0; }
}

/* ======================================================================
   Collections
   ====================================================================== */
/* Cards look like a small stack: two thin "pages" peek out above the cover. */
.coll-card { box-shadow: 0 -6px 0 -3px #252b3a, 0 -12px 0 -7px #1a1e29; margin-top: 12px; }
.coll-card:hover { box-shadow: 0 -6px 0 -3px #2e3546, 0 -12px 0 -7px #212633, var(--shadow); }
.coll-cover { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--surface-2); }
.coll-cover > img { width: 100%; height: 100%; min-height: 0; object-fit: cover; transition: transform .4s; }
.coll-cover.mosaic { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(var(--rows, 3), 1fr); gap: 2px; background: var(--bg); }
.coll-cover.mosaic > img:first-child { grid-row: 1 / -1; }
.coll-card:hover .coll-cover > img { transform: scale(1.04); }
.coll-cover::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.coll-cover .tl { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 1; }
.coll-count { position: absolute; right: 10px; bottom: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); }
.chip-private { background: rgba(0,0,0,.6); border-color: var(--border-2); color: var(--text-2); backdrop-filter: blur(6px); }
.coll-desc { margin: 0; font-size: 13.5px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pill-n { font-size: 12px; background: var(--surface-3); padding: 2px 7px; border-radius: 99px; color: var(--text-2); }

/* Collection page */
.coll-head { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.coll-head-bg { position: absolute; inset: -60px; background: var(--surface-2) center/cover no-repeat; filter: blur(40px) saturate(1.25); opacity: .5; }
.coll-head::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,9,12,.3), var(--bg) 94%); }
.coll-head-inner { position: relative; z-index: 1; padding-top: 30px; padding-bottom: 34px; }
.coll-lead { margin: 12px 0 0; max-width: 760px; font-size: 16.5px; color: var(--text-2); }
.coll-by { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.coll-by a:hover b { color: var(--accent-2); }
.coll-item { display: flex; flex-direction: column; gap: 10px; align-self: start; min-width: 0; }
.ci-num { display: flex; align-items: center; gap: 12px; font: 800 28px/1 var(--display); color: var(--text-2); }
.ci-num::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-2), transparent); }
.coll-item:first-child .ci-num { color: var(--accent-2); }
.ci-note { position: relative; margin: 4px 0 0; display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.ci-note::before { content: ''; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px; background: var(--bg-2); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.ci-note .av { margin-top: -1px; }

/* Mod page: "In collections" line and the add-to-collection dropdown */
.in-colls { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.in-colls svg { vertical-align: -2px; margin-right: 2px; color: var(--accent-2); }
.in-colls a { color: var(--accent-2); font-weight: 600; }
.in-colls a:hover { text-decoration: underline; }
.actions-row.has-coll { grid-template-columns: 1fr 1fr 44px 44px; }
.coll-menu { width: 290px; }
.coll-menu-h { display: block; padding: 6px 10px 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.coll-menu form { margin: 0; }
.coll-check { width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border-2); color: transparent; transition: .15s; }
.coll-menu button.on { color: var(--text); }
.coll-menu button.on .coll-check { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.coll-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Edit page */
#mods, .ci-row { scroll-margin-top: 90px; }
.coll-add { display: flex; gap: 8px; }
.coll-add input { flex: 1; min-width: 0; }
.ci-rows { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ci-row { display: grid; grid-template-columns: 28px 76px 1fr auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2); }
.ci-row:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,31,.18); }
.ci-pos { font: 800 22px/1 var(--display); color: var(--muted); text-align: center; }
.ci-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ci-note-form { display: flex; gap: 6px; }
.ci-note-form input { height: 34px; font-size: 13px; }
.ci-actions { display: flex; gap: 4px; }
.ci-actions .btn-sm { width: 32px; padding: 0; }
.btn[disabled] { opacity: .35; pointer-events: none; }
.coll-tips { padding-left: 18px; margin: 0; display: grid; gap: 10px; color: var(--text-2); font-size: 14px; }

@media (max-width: 600px) {
  .ci-row { grid-template-columns: 22px 1fr; gap: 10px; }
  .ci-thumb { display: none; }
  .ci-actions { grid-column: 2; }
  .coll-add { flex-direction: column; }
  .coll-add input { flex: none; }
}

/* Room for the Collections nav link: the brand shortcuts give way on mid-size screens (the mobile menu still lists them). */
@media (min-width: 961px) and (max-width: 1180px) { .nav a.nav-brand { display: none; } }

/* Game tiles with art: the picture carries the name. */
.game-tile.has-img { padding: 0; aspect-ratio: 460 / 215; background: var(--surface); }
.game-tile.has-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .3s; filter: saturate(.92); }
.game-tile.has-img:hover img { transform: scale(1.06); filter: none; }
.game-tile.has-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); pointer-events: none; }
.game-tile.has-img .gt-count, .game-tile.has-img .main-tag { position: absolute; padding: 3px 8px; border-radius: 999px; background: rgba(8,9,12,.72); backdrop-filter: blur(6px); font-size: 11px; line-height: 1.3; }
.game-tile.has-img .gt-count { left: 8px; top: 8px; color: #fff; font-weight: 600; }
.game-tile.has-img .main-tag { top: 8px; right: 8px; font-size: 10px; }


/* Hero spotlight: the most downloaded mod over the intro video. */
.hv-spot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 48px; padding-bottom: 72px; }
.hv-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255,90,31,.16); border: 1px solid rgba(255,90,31,.45); color: #ffb48a; font: 700 12px/1 var(--font); letter-spacing: 1.4px; text-transform: uppercase; backdrop-filter: blur(10px); }
.hv-spot .hv-title { font-size: clamp(42px, 6.2vw, 96px); margin: 18px 0 16px; max-width: 1000px; }
.hv-spot .hv-title a { color: inherit; transition: text-shadow .3s; }
.hv-spot .hv-title a:hover { text-shadow: 0 0 42px rgba(255,90,31,.55); }
.hv-by { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; color: rgba(235,240,250,.82); font-size: 15px; }
.hv-author { display: inline-flex; align-items: center; gap: 9px; color: inherit; }
.hv-author:hover b { color: var(--accent-2); }
.hv-author b { color: #fff; transition: color .2s; }
.hv-ver { color: rgba(235,240,250,.6); font-size: 13.5px; }
.hv-spot .hv-stats { margin: 26px 0 4px; }
.hv-cover { display: block; width: min(440px, 34vw); aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 60px -20px rgba(255,90,31,.45); transform: perspective(1000px) rotateY(-9deg) rotateX(3deg); transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s; }
.hv-cover:hover { transform: perspective(1000px) rotateY(0) rotateX(0) translateY(-4px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 80px -16px rgba(255,90,31,.6); }
.hv-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.auth-side .logo-flame { height: 56px; align-self: flex-start; }
@media (max-width: 900px) {
  .hv-spot { grid-template-columns: 1fr; gap: 24px; padding-bottom: 64px; }
  .hv-cover { display: none; }
}
/* Forum-style descriptions (public/js/bbcode.js) */
.bb { overflow-wrap: anywhere; }
.bb .bb-h1 { font: 800 30px/1.1 var(--display); text-transform: uppercase; color: var(--text); margin: 26px 0 10px; }
.bb .bb-h2 { font: 800 23px/1.15 var(--display); text-transform: uppercase; color: var(--text); margin: 22px 0 8px; }
.bb .bb-h3 { font-size: 17px; font-weight: 700; color: var(--text); margin: 18px 0 6px; }
.bb > :first-child { margin-top: 0; }
.bb .bb-s1 { font-size: .75em; } .bb .bb-s2 { font-size: .875em; } .bb .bb-s3 { font-size: 1em; }
.bb .bb-s4 { font-size: 1.25em; line-height: 1.45; } .bb .bb-s5 { font-size: 1.5em; line-height: 1.35; }
.bb .bb-s6 { font-size: 2em; line-height: 1.25; } .bb .bb-s7 { font-size: 2.6em; line-height: 1.15; }
.bb .bb-f-sans { font-family: var(--font); }
.bb .bb-f-cond { font-family: var(--display); letter-spacing: .3px; }
.bb .bb-f-serif { font-family: Georgia, 'Times New Roman', serif; }
.bb .bb-f-mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; }
.bb .bb-center { text-align: center; } .bb .bb-right { text-align: right; } .bb .bb-left { text-align: left; }
.bb .bb-img { display: inline-block; max-width: 100%; height: auto; border-radius: 10px; vertical-align: middle; cursor: zoom-in; margin: 4px 0; }
.bb a .bb-img { cursor: pointer; }
.bb .bb-quote { margin: 14px 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--text-2); }
.bb .bb-quote cite { display: block; font-style: normal; font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.bb .bb-spoiler { margin: 14px 0; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); }
.bb .bb-spoiler summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--text); }
.bb .bb-spoiler > div { padding: 0 14px 12px; }
.bb .bb-code { margin: 14px 0; padding: 14px; background: #07090d; border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; font: 13px/1.6 ui-monospace, Consolas, monospace; color: #e6e9ef; white-space: pre; }
.bb hr { border: 0; border-top: 1px solid var(--border-2); margin: 22px 0; }
.bb ol { padding-left: 22px; }
.bb .bb-yt { margin: 14px 0; }

/* Description editor */
.bb-editor { position: relative; border: 1px solid var(--border-2); border-radius: 12px; background: var(--bg-2); transition: border-color .2s, box-shadow .2s; }
.bb-editor:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,90,31,.14); }
.bb-editor.drag { border-color: var(--accent); border-style: dashed; }
.bb-toolbar { position: sticky; top: 67px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.bb-toolbar button { height: 32px; min-width: 32px; padding: 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: 600 14px var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.bb-toolbar button:hover { background: var(--surface-3); color: var(--text); }
.bb-toolbar select { width: auto; height: 32px; padding: 0 26px 0 9px; font-size: 13px; border-radius: 7px; background-color: transparent; border-color: transparent; color: var(--text-2); }
.bb-toolbar select:hover { background-color: var(--surface-3); }
.bb-sep { width: 1px; height: 20px; background: var(--border-2); margin: 0 4px; }
.bb-spacer { flex: 1; }
.bb-color-a { font-weight: 800; border-bottom: 3px solid; border-image: linear-gradient(90deg, #ff5a5a, #ffd166, #2ee6a6, #5aa9ff, #a78bfa) 1; line-height: 1.1; }
.bb-pop-wrap { position: relative; }
.bb-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; box-shadow: var(--shadow); padding: 10px; }
.bb-pop[hidden] { display: none; }
.bb-colors { display: grid; grid-template-columns: repeat(5, 26px); gap: 6px; }
.bb-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); background: var(--sw); cursor: pointer; padding: 0; }
.bb-colors button:hover { transform: scale(1.12); border-color: #fff; }
.bb-custom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.bb-custom input { width: 44px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.bb-menu { display: grid; min-width: 220px; padding: 6px; }
.bb-menu button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 500 14px var(--font); cursor: pointer; text-align: left; }
.bb-menu button:hover { background: var(--surface-3); }
.bb-help { left: auto; right: 6px; top: 50px; width: min(560px, calc(100% - 12px)); max-height: 360px; overflow: auto; }
.bb-help table { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--text-2); }
.bb-help td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.bb-help code { font-size: 12px; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; color: var(--text); }
.bb-editor textarea { display: block; width: 100%; min-height: 340px; border: 0; border-radius: 0; background: transparent; box-shadow: none !important; padding: 14px 16px; resize: vertical; font: 14px/1.65 ui-monospace, 'Cascadia Code', Consolas, monospace; }
.bb-status { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.bb-status .bad { color: var(--red); }
.bb-status span.bad { color: var(--red); }

/* Live preview next to the publish form */
.form-layout.previewing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pvw-side { position: sticky; top: 86px; align-self: start; display: grid; gap: 12px; }
.previewing .pvw-side .guide { display: none; }
.pvw-side .guide { position: static; }
.pvw-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-2); }
.pvw { border: 1px solid var(--border-2); border-radius: 16px; background: var(--bg); overflow: hidden; box-shadow: var(--shadow); }
.pvw[hidden] { display: none; }
.pvw-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.pvw-bar .tiny { flex: 1; }
.pvw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(46,230,166,.15); animation: pvw-pulse 2s ease-in-out infinite; }
@keyframes pvw-pulse { 50% { box-shadow: 0 0 0 7px rgba(46,230,166,0); } }
.pvw-close { border: 0; background: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.pvw-close:hover { color: var(--text); background: var(--surface-3); }
.pvw-body { max-height: calc(100vh - 170px); overflow-y: auto; padding: 18px; overscroll-behavior: contain; }
.pvw-body .mod-title { font-size: clamp(26px, 2.4vw, 38px); }
.pvw-summary { margin: 8px 0 10px; }
.pvw-author { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-2); margin-bottom: 14px; }
.pvw-buy { margin-top: 14px; display: grid; gap: 12px; }
.pvw-buy .price { font: 800 28px/1 var(--display); }
.pvw-buy .requires { margin: 0; }
.pvw-body .tabs a { pointer-events: none; }
.pvw-empty { color: var(--muted); opacity: .6; font-style: italic; }
@media (max-width: 1100px) {
  .form-layout.previewing { grid-template-columns: 1fr; }
  .pvw-side { position: static; }
  .pvw-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: auto; box-shadow: var(--shadow); background: var(--surface-2); }
  .pvw:not([hidden]) { position: fixed; inset: 0; z-index: 90; border-radius: 0; display: flex; flex-direction: column; }
  .pvw-body { max-height: none; flex: 1; }
}