/* Palette drawn from the doink goblin mascot:
   skin #9c6acd · shirt #008080 · outline #27004d · eyes #808040 */
:root {
  color-scheme: dark;
  --bg: #140826;
  --panel: #1e0f38;
  --panel-2: #2a164e;
  --border: #3d2566;
  --text: #f1eaff;
  --muted: #a893cc;
  --accent: #9c6acd;
  --accent-2: #7a3fbf;
  --green: #16c7ac;
  --gold: #b5b558;
  --red: #f87171;
  --twitch: #9146FF;
  --kick: #53FC18;
  --check-a: #251345;
  --check-b: #1b0d33;
}
::selection { background: var(--accent-2); color: #fff; }
/* Single self-hosted variable font (latin subset, weights 200-1000) so every
   platform renders the exact same face. Nunito: rounded and friendly but
   clean and easy to read. swap = text is never blocked on the font download. */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/assets/nunito-latin.woff2) format("woff2");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  /* static radial glow: painted once, no animation cost */
  background: radial-gradient(900px 420px at 50% -140px, #2a1450, var(--bg) 70%) no-repeat, var(--bg);
  color: var(--text);
  font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
}
body.page-drag-over {
  box-shadow: inset 0 0 0 3px var(--accent);
}

/* ------------------------------- header ------------------------------- */
header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-wrap: wrap;
}
.logo { text-decoration: none; color: inherit; display: flex; align-items: center; gap: 10px; }
.logo::before {
  content: ""; width: 45px; height: 30px; flex: none;
  background: url(/assets/goblin.png) center / contain no-repeat;
}
.logo h1 { font-size: 22px; font-weight: 900; letter-spacing: -0.5px; }
/* Product tag beside the "doink!" wordmark — a small tilted sticker in the
   brand green. Future products reuse the wordmark and swap the tag text
   (emotes, vods, …). Static transform, no animation. */
.logo h1 .logo-product {
  color: var(--green);
  border: 1px solid var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 2px 7px;
  margin-left: 9px;
  display: inline-block;
  transform: rotate(-4deg);
  vertical-align: 4px;
}
nav { display: flex; gap: 4px; margin-left: 14px; }
nav a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 8px 12px;
}
nav a:hover { color: var(--text); }
nav a.active { background: var(--panel-2); color: var(--text); }
#authArea { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.auth-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 13px; font-weight: 700;
  text-decoration: none; color: #fff; border: 0; cursor: pointer;
}
.auth-twitch { background: var(--twitch); }
.auth-kick { background: var(--kick); color: #140826; }
.auth-link { padding: 5px 10px; font-size: 11px; opacity: 0.85; }
.whoami { font-size: 13px; }
.whoami b { color: var(--accent); }
.plat-badge {
  font-size: 10px; padding: 2px 7px;
  border: 1px solid var(--border); color: var(--muted); text-transform: capitalize;
}
.logout-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 12px; font-size: 12px; cursor: pointer;
}

/* ------------------------------- layout ------------------------------- */
main { max-width: 1100px; margin: 0 auto; padding: 28px 20px 80px; }
/* Browse page only: wider so more doinks fit per row on the compact grid */
body.browse main { max-width: 2000px; padding: 28px 14px 80px; }
.page-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head h2 { font-size: 18px; }
.page-head span { color: var(--muted); font-size: 13px; }
.card-section {
  background: var(--panel); border: 1px solid var(--border);
  padding: 22px; margin-bottom: 26px;
}
.card-section h2 { font-size: 15px; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.limits-note { font-size: 12px; color: var(--muted); margin: -10px 0 16px; }

/* -------------------------------- forms ------------------------------- */
.form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--muted); }
input[type=text] {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; font-size: 14px; min-width: 200px; outline: none;
}
input[type=text]:focus { border-color: var(--accent); }
.file-btn {
  background: var(--panel-2); border: 1px dashed var(--border); color: var(--muted);
  padding: 10px 14px; font-size: 13px; cursor: pointer;
}
.file-btn.has-file { color: var(--green); border-style: solid; }
.file-btn.drag-over {
  border-color: var(--accent); color: var(--accent); background: var(--panel);
}
input[type=file] { display: none; }
button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: 0; padding: 11px 22px;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
button.primary:disabled { opacity: 0.5; cursor: not-allowed; }
.status { margin-top: 12px; font-size: 13px; min-height: 18px; }
.status.ok { color: var(--green); }
.status.err { color: var(--red); }
.upload-locked { color: var(--muted); font-size: 14px; }

/* ------------------------------ collections ---------------------------- */
.collection-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.collection-row:last-child { border-bottom: 0; }
.collection-name { font-weight: 700; font-size: 15px; }
.collection-name.viewing { color: var(--accent); }
.collection-count { font-size: 12px; color: var(--muted); }
.chip {
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); cursor: pointer;
}
.chip.on-twitch { background: var(--twitch); border-color: var(--twitch); color: #fff; }
.chip.on-kick { background: var(--kick); border-color: var(--kick); color: #140826; }
.chip-group { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.mini-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.mini-btn:hover { color: var(--text); border-color: var(--accent); }
.mini-btn.danger:hover { color: var(--red); border-color: var(--red); }
.mini-btn:disabled { opacity: 0.6; cursor: default; }
.mini-btn.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.mini-btn.active:hover { color: #fff; border-color: var(--accent); }

/* ------------------------------- browse -------------------------------- */
.browse-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.browse-controls input[type=text] { min-width: 260px; flex: 1 1 260px; }
.page-size-label {
  display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.page-size-label select {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 7px 8px; font-size: 12px;
}
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 24px; }
.pager-ellipsis { color: var(--muted); font-size: 12px; padding: 0 2px; }

/* ------------------------------- gallery ------------------------------ */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  overflow: hidden; display: flex; flex-direction: column;
}
.img-box {
  height: 160px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 20px 20px;
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.img-box img { max-width: 140px; max-height: 140px; }
.img-box.censored img { filter: blur(18px); transform: scale(1.15); }
.censor-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  background: rgba(20,8,38,0.35); font-size: 12px; font-weight: 700; color: var(--text);
  text-align: center; pointer-events: none;
}
.censor-label small { font-weight: 400; color: var(--muted); font-size: 10px; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.kw { font-weight: 700; font-size: 15px; }
.anim {
  font-size: 10px; color: var(--gold); border: 1px solid var(--gold);
  padding: 1px 4px; margin-left: 6px; vertical-align: 2px;
}
.pend {
  font-size: 10px; color: var(--red); border: 1px solid var(--red);
  padding: 1px 4px; margin-left: 6px; vertical-align: 2px;
}
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag { font-size: 11px; background: var(--panel-2); color: var(--muted); padding: 2px 8px; }
.variants { display: flex; gap: 6px; margin-top: 2px; }
.variants button {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 6px 0; font-size: 12px; font-weight: 600; cursor: pointer;
}
.variants button.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.url {
  font-family: ui-monospace, monospace; font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.url:hover { color: var(--accent); }
.meta { font-size: 11px; color: var(--muted); }
.collection-ctl select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 8px; font-size: 12px;
}
.remove-btn {
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
  padding: 7px 0; font-size: 12px; cursor: pointer;
}
.remove-btn:hover { color: var(--red); border-color: var(--red); }
.empty { color: var(--muted); font-size: 14px; padding: 40px; text-align: center; grid-column: 1 / -1; }
.empty a { color: var(--accent); }
.link-btn { background: none; border: 0; color: var(--accent); font-size: 13px; cursor: pointer; text-decoration: underline; }

/* --------------------------- compact browse ---------------------------- */
.cgallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
.ccard {
  position: relative; display: block; text-decoration: none; color: inherit;
  background: var(--panel); border: 1px solid var(--border);
  overflow: hidden;
}
.ccard:hover { border-color: var(--accent); }
.cimg {
  height: 84px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 14px 14px;
  border-bottom: 1px solid var(--border); position: relative; overflow: hidden;
}
/* max-width was pinned to 64px same as max-height, which shrunk non-square
   (rectangular) doinks well below the box on their wide axis instead of
   just their short one. Cap by height only and let width use the card's
   full (overflow-hidden) space so rectangular doinks fill the box the same
   way square ones do. */
.cimg img { max-width: 100%; max-height: 64px; }
.cimg.censored img { filter: blur(12px); transform: scale(1.2); }
.cpend {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: var(--red); background: rgba(20,8,38,0.75);
  padding: 1px 6px;
}
.cmeta { padding: 7px 10px 9px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ckw { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cby { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadd {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px;
  background: var(--accent-2); color: #fff; border: 0;
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer;
  opacity: 0;
}
.cnick, .cremove {
  position: absolute; top: 5px; width: 24px; height: 24px;
  border: 1px solid var(--border); background: var(--panel-2);
  font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
  opacity: 0;
}
.cnick { right: 33px; color: var(--text); }
.cremove { right: 5px; color: var(--red); font-size: 16px; }
.cnick:hover { border-color: var(--accent); }
.cremove:hover { border-color: var(--red); }
.ccard:hover .cadd, .cadd:focus,
.ccard:hover .cnick, .cnick:focus,
.ccard:hover .cremove, .cremove:focus { opacity: 1; }
.cmenu {
  position: absolute; top: 33px; right: 5px; z-index: 5;
  background: var(--panel-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; min-width: 140px; max-width: 100%; overflow: hidden;
}
.cmenu button {
  background: none; border: 0; color: var(--text); padding: 8px 12px;
  text-align: left; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmenu button:hover { background: var(--panel); }
.cmenu button:disabled { color: var(--muted); cursor: default; }

/* ----------------------------- doink detail ---------------------------- */
.detail { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.preview-col { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.preview-box {
  height: 260px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 20px 20px;
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.preview-box img { max-width: 90%; max-height: 90%; }
.detail-info { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.detail-info h2 { font-size: 24px; }
.detail-kv { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 5px; }
.detail-kv b { color: var(--text); font-weight: 600; }
.channel-list { display: flex; flex-direction: column; }
.channel-row {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.channel-row:last-child { border-bottom: 0; }
.back-link { color: var(--muted); text-decoration: none; font-size: 13px; }
.back-link:hover { color: var(--accent); }

/* ------------------------- owner edit panel (doink detail) ------------------------- */
/* .detail-info is a flex column with no align-items override, so its
   default (stretch) was forcing this button to the full width of the
   info column. It's a toggle, not a form control — keep it its own size. */
#editToggleBtn { align-self: flex-start; }
.edit-panel {
  background: var(--panel-2); border: 1px solid var(--border);
  padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.edit-panel input[type=text] { width: 100%; min-width: 0; }
.edit-options {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.edit-options-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.bg-remove-ctl { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.bg-preview-row { display: flex; gap: 14px; }
.bg-preview-col { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.bg-preview-col img {
  width: 96px; height: 96px; object-fit: contain;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 12px 12px;
  border: 1px solid var(--border);
}
.bg-preview-actions { display: flex; gap: 8px; }

/* ----------------------------- mod queue ------------------------------ */
.mod-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.mod-row:last-child { border-bottom: 0; }
.mod-thumb {
  width: 64px; height: 64px; object-fit: contain;
  background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 0 0 / 12px 12px;
}
.mod-info { display: flex; flex-direction: column; gap: 3px; min-width: 160px; }
.mod-actions { margin-left: auto; display: flex; gap: 8px; }
.approve-btn {
  background: var(--green); color: #140826; border: 0; font-weight: 700;
  padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.deny-btn {
  background: transparent; color: var(--red); border: 1px solid var(--red); font-weight: 700;
  padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.deny-btn:hover { background: var(--red); color: #140826; }

/* -------------------------------- toast ------------------------------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 10px 18px; font-size: 13px; display: none; z-index: 10;
  max-width: 90vw;
}
#toast.ok { border-color: var(--green); color: var(--green); }
#toast.err { border-color: var(--red); color: var(--red); }

/* ------------------------------- footer ------------------------------- */
/* sticky + top:100vh pins the footer to the viewport bottom on short pages
   (e.g. a sparse Browse grid on a wide screen) while still flowing normally
   after tall content -- no flex restructuring of body/main needed. */
.site-footer {
  position: sticky;
  top: 100vh;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.footer-msg { font-weight: 600; }
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: var(--text); }