:root {
  --bg: #0d0b14;
  --bg-2: #15121f;
  --panel: #1b1727;
  --panel-2: #241f33;
  --border: #332b48;
  --text: #ece8f5;
  --muted: #9a92b0;
  --gold: #ffd34d;
  --gold-2: #f2a516;
  --red: #d9481c;
  --shiny: #ffd34d;
  --skin: #5ec8ff;
  --pet: #8be37a;
  --white: #f4f1ff;
  --reskin: #c58bff;
  --st: #ff8a5c;
  --radius: 12px;
  --pixel: "Press Start 2P", monospace;
  --sans: "Inter", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* faint pixel-tile background */
.bg-tiles {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(217, 72, 28, 0.25), transparent 60%),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg);
}

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(13, 11, 20, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Full-width top bar: logo on the far left, tabs in the middle, account on the far right. */
.header-inner {
  padding: 14px 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
}
.header-inner .header-left { justify-self: start; }
.header-inner .tabs { justify-self: center; }
.header-inner .header-right { justify-self: end; }

/* Right side of the top bar: Leaderboard button, then the account area */
.header-right { display: flex; align-items: center; gap: 16px; }
.lb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lb-btn:hover { border-color: var(--gold); background: var(--panel-2); }
.lb-btn.on { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.lb-icon { font-size: 15px; line-height: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}

.brand-icon svg { width: 32px; height: 32px; display: block; image-rendering: pixelated; }

.brand-text {
  font-family: var(--pixel);
  font-size: 14px;
  letter-spacing: 1px;
}
.brand-accent { color: var(--gold); margin-left: 6px; }

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 5px;
  border-radius: 999px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}

.tab:hover { color: var(--text); background: var(--panel-2); }

.tab[aria-selected="true"] {
  color: var(--bg);
  background: var(--gold);
}

.tab-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.tab[aria-selected="true"] .tab-dot { background: var(--bg); box-shadow: none; }

/* ---------- Panels ---------- */
main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.panel { display: none; animation: fade 0.3s ease; }
.panel.active { display: block; }

@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 80px 0 56px;
}

.eyebrow {
  font-family: var(--pixel);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.eyebrow-shiny { color: var(--shiny); }
.eyebrow-skin  { color: var(--skin); }
.eyebrow-pet   { color: var(--pet); }
.eyebrow-accent { color: var(--accent); }

.hero-title {
  font-family: var(--pixel);
  font-size: clamp(22px, 4.2vw, 42px);
  line-height: 1.5;
  text-shadow: 4px 4px 0 #000;
}

.shine {
  color: var(--gold);
  animation: glow 2.4s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { text-shadow: 4px 4px 0 #000, 0 0 12px rgba(255, 211, 77, 0.4); }
  50%      { text-shadow: 4px 4px 0 #000, 0 0 28px rgba(255, 211, 77, 0.9); }
}

.hero-sub {
  max-width: 560px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
}
.btn:active { transform: translateY(2px); }

.btn-primary {
  background: var(--gold);
  color: #1a1206;
  box-shadow: 0 4px 0 var(--gold-2);
}
.btn-primary:hover { box-shadow: 0 4px 0 var(--gold-2), 0 0 24px rgba(255, 211, 77, 0.35); }

.btn-ghost {
  border: 1px solid var(--border);
  background: var(--panel);
}
.btn-ghost:hover { background: var(--panel-2); }

/* ---------- Overview cards ---------- */
.overview { padding-bottom: 80px; }

.overview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}

.section-title { font-size: 20px; font-weight: 700; }
.overall { color: var(--muted); font-size: 14px; }

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  --accent: var(--gold);
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 10px 30px -10px var(--accent);
}


.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.card-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 22px;
  color: var(--accent);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.card-count { font-family: var(--pixel); font-size: 11px; color: var(--muted); }

.card h3 { font-size: 18px; margin-bottom: 6px; }
.card p  { color: var(--muted); font-size: 14px; line-height: 1.5; min-height: 42px; }
/* Item of the day on each home card (changes daily at 5:00 PM Arizona time) */
.card-feature {
  height: 88px; margin-top: 12px;
  display: grid; place-items: center;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), var(--bg-2);
  border: 1px solid var(--border); border-radius: 8px;
}
.card-feature img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); transition: transform .2s; }
.card:hover .card-feature img { transform: scale(1.1); }

.bar {
  margin-top: 18px;
  height: 8px;
  background: var(--bg-2);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.6s ease;
}

/* ---------- Collection panels ---------- */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding: 48px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.panel-head .eyebrow { margin-bottom: 12px; }

.panel-title { font-family: var(--pixel); font-size: 24px; text-shadow: 3px 3px 0 #000; }

.search {
  width: 280px;
  max-width: 100%;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.search:focus { border-color: var(--gold); }
.search::placeholder { color: var(--muted); }

.panel-progress { margin-top: 10px; color: var(--muted); font-size: 14px; }
.panel-progress span { color: var(--accent); font-weight: 700; }

/* ---------- Filters ---------- */
.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--text); border-color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- Item grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  margin-bottom: 80px;
}
.grid:empty { margin-bottom: 0; }

.item {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 10px 12px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  opacity: 0.6;
}
.item:hover { transform: translateY(-2px); border-color: var(--accent); opacity: 1; }
.item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.item.owned {
  opacity: 1;
  border-color: var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel));
}

.item-img {
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  background: var(--bg-2);
  border-radius: 8px;
}
.item-img img { width: 48px; height: 48px; image-rendering: pixelated; object-fit: contain; filter: grayscale(0.7); transition: filter 0.15s; }
.item.owned .item-img img, .item:hover .item-img img { filter: none; }
.img-fallback { font-family: var(--pixel); color: var(--muted); }

.item-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.item-sub { font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.3; }

.check {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  background: var(--accent); color: var(--bg);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}
.item.owned .check { opacity: 1; transform: none; }

.tier {
  position: absolute; top: 6px; left: 6px;
  font-family: var(--pixel); font-size: 8px;
  padding: 3px 5px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--border);
}
.tier-ut { color: var(--reskin); }
.tier-st { color: var(--pet); }

.item-wiki {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 12px; color: var(--muted); text-decoration: none;
  opacity: 0; transition: opacity 0.15s;
}
.item:hover .item-wiki { opacity: 1; }
.item-wiki:hover { color: var(--accent); }

.site-footer a { color: var(--muted); }

/* ---------- Grouped (by dungeon) view ---------- */
.groups { margin-bottom: 80px; }
.group-cat {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 32px 0 14px;
}
.group-cat:first-child { margin-top: 0; }

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.group {
  background: #1d1a2a;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  transition: border-color 0.2s;
}
.group.complete { border-color: var(--accent); }

.group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.group-head h4 {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.group-head h4 a { color: var(--text); text-decoration: none; }
.group-head h4 a:hover { color: var(--accent); }
.group-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.group-title { min-width: 0; }
.group-desc {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-transform: none;
}
.group.complete .group-count { color: var(--accent); font-weight: 700; }

.group-body { display: flex; align-items: center; gap: 14px; }

.portal {
  flex: 0 0 72px;
  display: grid;
  place-items: center;
}
.portal img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; }

.group-items {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Compact icon-only tiles: faded + desaturated until owned (same look as the grid tiles) */
.item.mini {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  opacity: 0.6;
}
.item.mini img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
  object-fit: contain;
  filter: grayscale(0.7);
  transition: filter 0.15s;
}
.item.mini:hover { transform: translateY(-2px); border-color: var(--accent); opacity: 1; }
.item.mini:hover img, .item.mini.owned img { filter: none; }
.item.mini.owned {
  opacity: 1;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-2));
}

.empty {
  text-align: center;
  padding: 80px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  margin-bottom: 80px;
}
.empty-icon { font-size: 36px; display: block; margin-bottom: 14px; color: var(--border); }
.empty p { font-weight: 600; color: var(--text); margin-bottom: 6px; }
.empty small { font-size: 13px; }

/* ---------- Sidebar filters (Skins tab) ---------- */
.with-sidebar {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.sidebar {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 80px;
  scrollbar-width: thin;
}
.side-section { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.side-section summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
}
.side-section summary::-webkit-details-marker { display: none; }
.side-section h5 {
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.side-section summary h5 { margin-bottom: 0; }
.side-section summary h5::before { content: "▾ "; color: var(--muted); }
.side-section:not([open]) summary h5::before { content: "▸ "; }
.link-btn { font-size: 12px; color: var(--muted); }
.link-btn:hover { color: var(--accent); }
.facet-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.facet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.facet:hover { background: var(--panel-2); }
.facet input { accent-color: var(--accent); width: 15px; height: 15px; }
.facet-name { flex: 1; }
.facet-count { font-size: 11px; color: var(--muted); }
.clear-all { width: 100%; padding: 10px; font-size: 13px; }
.side-main { min-width: 0; }
.result-count { font-size: 13px; color: var(--muted); align-self: center; }


.site-footer {
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 24px;
  color: var(--muted);
  font-size: 12px;
}

/* ---------- Account (header) ---------- */
.account { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.acct-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gold); white-space: nowrap; }
/* Profile picture: just the skin sprite, no box. 63px = 75% larger than the old 36px. */
.acct-avatar {
  width: 63px; height: 63px;
  flex-shrink: 0;
  display: grid; place-items: center;
  object-fit: contain;
  image-rendering: pixelated;
  margin: -12px 0; /* keep the header the same height */
}
.acct-avatar.fallback { font-family: var(--pixel); font-size: 18px; color: var(--gold); }
.acct-btn {
  padding: 9px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  background: var(--gold);
  color: #1a1206;
  white-space: nowrap;
}
.acct-btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--border); }
.acct-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(5, 4, 10, 0.72);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  padding: 16px;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px 22px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.modal h3 { font-family: var(--pixel); font-size: 15px; line-height: 1.5; margin-bottom: 14px; }
.modal-close { position: absolute; top: 12px; right: 14px; font-size: 16px; color: var(--muted); }
.modal-close:hover { color: var(--text); }
.modal-lead { color: var(--muted); font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.modal-lead b { color: var(--text); }
.modal-alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); text-align: center; color: var(--muted); font-size: 14px; }
.modal-alt p { margin-bottom: 10px; }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1; }
.modal .btn-primary { width: 100%; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input {
  padding: 11px 13px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.form input:focus { border-color: var(--gold); }
.pw-warning {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(220, 38, 38, 0.16);
  border: 2px solid #dc2626;
  border-radius: 10px;
  color: #fecaca;
  font-size: 13px;
  line-height: 1.5;
}
.pw-warning strong { color: #ff4d4d; font-size: 15px; font-weight: 800; letter-spacing: 0.2px; }
.form-msg { font-size: 13px; line-height: 1.5; }
.form-msg:empty { display: none; }
.form-msg.error { color: #ff7a6b; }
.form-msg.ok { color: var(--pet); }
.steps { padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.steps b { color: var(--text); }
.steps a { color: var(--skin); }
.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding: 10px 12px;
  background: var(--bg-2); border: 1px dashed var(--gold); border-radius: 8px;
}
.code-box code { font-family: var(--pixel); font-size: 13px; color: var(--gold); letter-spacing: 1px; }
.btn.small { padding: 7px 12px; font-size: 13px; }
.seen { margin: 6px 0 12px; padding: 10px 12px; background: var(--bg-2); border-radius: 8px; font-size: 13px; }
.seen[hidden] { display: none; }
.seen span { display: block; color: var(--muted); margin-bottom: 6px; }
.seen div { padding: 2px 0; word-break: break-word; }
.hint { margin-top: 10px; font-size: 12px; color: var(--muted); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60;
  transform: translate(-50%, 20px);
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 18px; font-size: 14px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
/* Medium screens: logo left + account right on the first row, tabs centered on a second row. */
@media (max-width: 1400px) and (min-width: 861px) {
  .header-inner { grid-template-columns: 1fr 1fr; grid-template-areas: "brand right" "tabs tabs"; row-gap: 12px; }
  .header-inner .header-left { grid-area: brand; }
  .header-inner .header-right { grid-area: right; }
  .header-inner .tabs { grid-area: tabs; }
}

@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .with-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; margin-bottom: 0; }
  .header-inner { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; }
  .header-inner .header-left, .header-inner .tabs, .header-inner .header-right { justify-self: auto; }
  .header-left { justify-content: center; }
  .header-right { flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
  main { padding: 0 16px; }
}

@media (max-width: 460px) {
  .cards { grid-template-columns: 1fr; }
  .group-grid { grid-template-columns: 1fr; }
  .portal { flex-basis: 52px; }
  .portal img { width: 48px; height: 48px; }
  .tab { padding: 9px 12px; font-size: 13px; }
  .tabs { width: 100%; }
  .hero { padding: 56px 0 40px; }
}

/* ---------- Leaderboard ---------- */
.lb-check { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lb-check .btn { min-width: 220px; }
.lb-check .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.lb-check-note { color: var(--muted); font-size: 12px; text-align: right; max-width: 280px; }

.lb-me {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 16px;
}
.lb-me-stats { display: flex; gap: 22px; }
.lb-me-stats > div { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.lb-stat { font-family: var(--pixel); font-size: 20px; color: var(--gold); text-shadow: 2px 2px 0 #000; }
.lb-me-stats small { color: var(--muted); font-size: 12px; margin-top: 6px; }
.lb-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }

.lb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}
.lb-chip img { width: 22px; height: 22px; image-rendering: pixelated; }

.lb-result {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: grid; gap: 8px;
}
.lb-result.good { border-left-color: var(--pet); }
.lb-result.bad { border-left-color: var(--red); }
.lb-good { color: var(--pet); font-weight: 700; }

.lb-table { list-style: none; display: grid; gap: 6px; margin-top: 8px; }
.lb-row {
  display: grid;
  grid-template-columns: 44px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.lb-row.me { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.lb-rank { font-family: var(--pixel); font-size: 13px; color: var(--muted); text-align: center; }
.lb-row.top1 .lb-rank { color: var(--gold); }
.lb-row.top2 .lb-rank { color: #d8dbe6; }
.lb-row.top3 .lb-rank { color: #e0965a; }
.lb-avatar { display: grid; place-items: center; width: 48px; height: 48px; }
.lb-avatar .acct-avatar { width: 48px; height: 48px; margin: 0; }
.lb-name { font-weight: 700; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name:hover { color: var(--gold); }
.lb-points { font-family: var(--pixel); font-size: 14px; color: var(--gold); }
.lb-points small { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.lb-count { color: var(--muted); font-size: 13px; margin-top: 12px; text-align: center; }
.lb-howto { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 28px 0 60px; max-width: 760px; }

@media (max-width: 640px) {
  .lb-check { align-items: stretch; width: 100%; }
  .lb-check .btn { width: 100%; }
  .lb-check-note { text-align: left; max-width: none; }
  .lb-me { grid-template-columns: 1fr; gap: 14px; }
  .lb-row { grid-template-columns: 32px 40px minmax(0, 1fr) auto; gap: 8px; padding: 6px 10px; }
  .lb-avatar, .lb-avatar .acct-avatar { width: 40px; height: 40px; }
}
.lb-me[hidden], .lb-result[hidden] { display: none; }

/* Leaderboard Verified shinies: green check in a circle, top right; can't be unmarked */
.verified-badge {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #2fbf55; color: #fff;
  border: 2px solid #0f3d1d;
  font-size: 11px; font-weight: 900; line-height: 1;
  box-shadow: 0 0 6px rgba(47, 191, 85, 0.6);
  cursor: help;
}
.item.mini .verified-badge { top: -6px; right: -6px; width: 16px; height: 16px; font-size: 9px; border-width: 1px; }
.item.mini { overflow: visible; }
.item.verified { cursor: default; }

/* Leaderboard: step-by-step box beside the Check for Gear button */
.lb-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; }
.lb-steps {
  list-style: none;
  display: grid; gap: 6px;
  max-width: 380px;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  font-size: 13px; line-height: 1.45;
  color: var(--text);
}
.lb-steps b { color: var(--gold); }
@media (max-width: 640px) {
  .lb-actions { width: 100%; }
  .lb-steps { max-width: none; width: 100%; }
}
.lb-steps-note { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: 12px; }
.lb-steps-note b { color: var(--muted); }

/* Leaderboard rows: name, base fame and the top character's gear (RealmEye style) */
.lb-row { grid-template-columns: 44px 48px minmax(110px, 1fr) 96px 248px 76px; }
.lb-gear-none { justify-content: center; }
.lb-who { display: flex; flex-direction: column; min-width: 0; }
.lb-class { color: var(--muted); font-size: 12px; }
.lb-fame { display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-fame small { color: var(--muted); font-size: 11px; font-weight: 400; }
.lb-points { text-align: right; }

.lb-gear { display: flex; gap: 2px; align-items: center; }
.lb-gear-none { color: var(--muted); font-size: 12px; }
.re-slot { position: relative; display: inline-block; width: 48px; height: 48px; flex-shrink: 0; }
.re-item {
  display: block; width: 48px; height: 48px;
  background-image: var(--re-renders);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(#666 0 0 3px);
}
.re-slot.e1 .re-item, .re-slot.s1 .re-item { filter: drop-shadow(rgb(106, 191, 64) 0 0 3px); }
.re-slot.e2 .re-item, .re-slot.s2 .re-item { filter: drop-shadow(rgb(64, 117, 191) 0 0 3px); }
.re-slot.e3 .re-item, .re-slot.s3 .re-item { filter: drop-shadow(rgb(149, 64, 191) 0 0 3px); }
.re-slot.e4 .re-item, .re-slot.s4 .re-item { filter: drop-shadow(rgb(191, 170, 64) 0 0 3px); }
.re-slot[class*=" e"]::before, .re-slot[class*=" s"]::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--re-slots); background-repeat: no-repeat;
}
.re-slot.e1::before { background-position: 0 0; }
.re-slot.e2::before { background-position: -48px 0; }
.re-slot.e3::before { background-position: -96px 0; }
.re-slot.e4::before { background-position: -144px 0; }
.re-slot.s1::before { background-position: -192px 0; }
.re-slot.s2::before { background-position: -240px 0; }
.re-slot.s3::before { background-position: -288px 0; }
.re-slot.s4::before { background-position: -336px 0; }
.re-slot.s::before  { background-position: -384px 0; }
a.re-slot:hover .re-item { transform: translateY(-2px); }

@media (max-width: 1100px) {
  .lb-row { grid-template-columns: 44px 48px minmax(0, 1fr) 96px 70px; grid-template-areas: "rank av who fame pts" "gear gear gear gear gear"; row-gap: 4px; }
  .lb-rank { grid-area: rank; } .lb-avatar { grid-area: av; } .lb-who { grid-area: who; } .lb-fame { grid-area: fame; } .lb-points { grid-area: pts; }
  .lb-gear { grid-area: gear; padding-left: 60px; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .lb-row { grid-template-columns: 32px 40px minmax(0, 1fr) 70px 54px; }
  .lb-gear { padding-left: 0; justify-content: center; }
  .re-slot, .re-item { width: 48px; height: 48px; }
}

/* Shiny Leaderboard rank, left of the profile picture in the top bar */
.acct-rank {
  font-family: var(--pixel); font-size: 13px;
  color: var(--gold); text-decoration: none; white-space: nowrap;
  text-shadow: 2px 2px 0 #000;
  margin-right: 2px;
}
.acct-rank:hover { color: var(--text); }

/* Leaderboard period tabs (All Time / Monthly / Weekly) */
.lb-periods-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.lb-periods { display: inline-flex; gap: 4px; padding: 4px; background: var(--panel); border: 1px solid var(--border); border-radius: 999px; }
.lb-periods button {
  padding: 8px 18px; border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
}
.lb-periods button:hover { color: var(--text); background: var(--panel-2); }
.lb-periods button[aria-selected="true"] { background: var(--gold); color: #1a1206; }
.lb-period-note { color: var(--muted); font-size: 13px; }

/* Home page: collection on the left, top 10 boards on the right */
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.home-side { position: sticky; top: 96px; padding-top: 48px; padding-bottom: 40px; }
.home-side-title { font-family: var(--pixel); font-size: 13px; line-height: 1.6; color: var(--gold); text-shadow: 2px 2px 0 #000; margin-bottom: 14px; }
.home-boards { display: grid; gap: 14px; }
.hb-box { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hb-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none;
}
.hb-head:hover .hb-title { color: var(--gold); }
.hb-title { font-weight: 800; font-size: 14px; }
.hb-reset { color: var(--muted); font-size: 11px; }
.hb-list { list-style: none; padding: 6px 8px; display: grid; gap: 2px; }
.hb-row { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 6px; font-size: 13px; }
.hb-row.me { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.hb-rank { font-family: var(--pixel); font-size: 9px; color: var(--muted); text-align: center; }
.hb-row.top1 .hb-rank { color: var(--gold); }
.hb-row.top2 .hb-rank { color: #d8dbe6; }
.hb-row.top3 .hb-rank { color: #e0965a; }
.hb-avatar { display: grid; place-items: center; width: 28px; height: 28px; }
.hb-avatar .acct-avatar { width: 28px; height: 28px; margin: 0; }
.hb-avatar .acct-avatar.fallback { font-size: 11px; }
.hb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-points { font-family: var(--pixel); font-size: 10px; color: var(--gold); }
.hb-empty { color: var(--muted); font-size: 13px; padding: 12px 14px; }

@media (max-width: 1100px) {
  .home-layout { grid-template-columns: 1fr; gap: 0; }
  .home-side { position: static; padding-top: 0; }
  .home-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .home-boards { grid-template-columns: 1fr; }
}

/* ---------- Shiny Leaderboard button: animated attention effect ----------
   1) a gold/white light that runs around the border,
   2) a soft pulsing glow, and 3) a shine that sweeps across the text now and then. */
@property --lb-spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.lb-btn {
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 2px solid transparent;
  padding: 8px 15px; /* keeps the same size with the thicker border */
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    conic-gradient(from var(--lb-spin), transparent 0 55%, #ffe58a 70%, #fff 75%, var(--gold-2) 82%, transparent 92%) border-box,
    linear-gradient(var(--border), var(--border)) border-box;
  animation: lb-spin 3s linear infinite, lb-pulse 2.4s ease-in-out infinite;
}
.lb-btn:hover {
  background:
    linear-gradient(var(--panel-2), var(--panel-2)) padding-box,
    conic-gradient(from var(--lb-spin), var(--gold-2), #fff, var(--gold), #ffe58a, var(--gold-2)) border-box;
}
/* the shine sweeping across the button */
.lb-btn::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 240, 180, 0.55) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  animation: lb-shine 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
/* little sparkles that twinkle at the corners */
.lb-btn::before {
  content: "✦";
  position: absolute; top: -9px; right: 10px;
  font-size: 12px; color: #fff3b0;
  text-shadow: 0 0 6px var(--gold), 0 0 12px var(--gold-2);
  pointer-events: none;
  animation: lb-twinkle 2.4s ease-in-out infinite;
}
.lb-btn.on {
  background:
    linear-gradient(var(--gold), var(--gold)) padding-box,
    conic-gradient(from var(--lb-spin), var(--gold-2), #fff, var(--gold), #fff, var(--gold-2)) border-box;
  color: var(--bg);
}
@keyframes lb-spin { to { --lb-spin: 360deg; } }
@keyframes lb-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 211, 77, 0.25); }
  50%      { box-shadow: 0 0 18px rgba(255, 211, 77, 0.6), 0 0 34px rgba(242, 165, 22, 0.25); }
}
@keyframes lb-shine {
  0%, 55%  { background-position: 150% 0; }
  85%, 100% { background-position: -60% 0; }
}
@keyframes lb-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  45%, 55% { opacity: 1; transform: scale(1.1) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-btn, .lb-btn::after, .lb-btn::before { animation: none; }
  .lb-btn { box-shadow: 0 0 12px rgba(255, 211, 77, 0.45); border-color: var(--gold); }
}
.hb-points small { font-family: var(--sans); font-size: 11px; color: var(--muted); }

/* ---------- Group completed: card animation + pixel burst + center banner ---------- */
.group { position: relative; }
.group.just-completed {
  animation: group-pop 0.7s cubic-bezier(.2, 1.6, .4, 1), group-glow 2s ease-out;
  z-index: 2;
}
.group.just-completed::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 180, 0.45) 50%, transparent 70%) no-repeat;
  background-size: 250% 100%;
  animation: group-shine 1.1s ease-out 0.15s both;
}
.group.just-completed .item.mini { animation: item-bounce 0.5s ease-out both; }
.group.just-completed .item.mini:nth-child(2) { animation-delay: 0.06s; }
.group.just-completed .item.mini:nth-child(3) { animation-delay: 0.12s; }
.group.just-completed .item.mini:nth-child(4) { animation-delay: 0.18s; }
.group.just-completed .item.mini:nth-child(5) { animation-delay: 0.24s; }
.group.just-completed .item.mini:nth-child(n+6) { animation-delay: 0.3s; }
@keyframes group-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
@keyframes group-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 211, 77, 0.9), 0 0 0 0 rgba(255, 211, 77, 0.5); border-color: #fff; }
  30% { box-shadow: 0 0 0 6px rgba(255, 211, 77, 0.35), 0 0 40px 6px rgba(255, 211, 77, 0.45); border-color: var(--gold); }
  100% { box-shadow: 0 0 0 0 rgba(255, 211, 77, 0), 0 0 0 0 rgba(255, 211, 77, 0); }
}
@keyframes group-shine { from { background-position: 150% 0; } to { background-position: -60% 0; } }
@keyframes item-bounce {
  0% { transform: translateY(0); }
  40% { transform: translateY(-8px) scale(1.12); }
  100% { transform: translateY(0); }
}

.pixel-burst { position: fixed; inset: 0; pointer-events: none; z-index: 900; }
.pixel-burst span {
  position: fixed;
  image-rendering: pixelated;
  box-shadow: 0 0 6px currentColor;
  animation: pixel-fly 0.55s cubic-bezier(.15, .7, .35, 1) var(--d) both;
  will-change: transform, opacity;
}
@keyframes pixel-fly {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate3d(var(--dx), calc(var(--dy) + 30px), 0) scale(0.6); opacity: 0; }
}

.complete-banner {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(13, 11, 20, 0.55), transparent 60%);
  animation: banner-fade-in 0.25s ease-out both;
}
.complete-banner.out { animation: banner-fade-out 0.4s ease-in both; }
.complete-inner {
  text-align: center;
  padding: 26px 38px 22px;
  background: rgba(21, 18, 31, 0.92);
  border: 4px solid var(--gold);
  box-shadow: 0 0 0 4px #000, 0 0 40px rgba(255, 211, 77, 0.5), inset 0 0 0 4px rgba(255, 211, 77, 0.15);
  animation: banner-pop 0.5s steps(5) both;
  max-width: calc(100vw - 32px);
}
.complete-title {
  font-family: var(--pixel);
  font-size: clamp(18px, 4.5vw, 40px);
  color: var(--gold);
  text-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 211, 77, 0.8);
  white-space: nowrap;
}
.complete-title span {
  display: inline-block;
  animation: letter-drop 0.45s steps(4) calc(var(--i) * 0.04s) both, letter-wave 1.2s ease-in-out calc(0.6s + var(--i) * 0.06s) infinite;
}
.complete-sub {
  margin-top: 14px;
  font-family: var(--pixel); font-size: clamp(9px, 1.6vw, 13px);
  color: var(--text); text-shadow: 2px 2px 0 #000;
  animation: banner-fade-in 0.4s ease-out 0.4s both;
}
@keyframes banner-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes banner-fade-out { from { opacity: 1; } to { opacity: 0; transform: scale(0.96); } }
@keyframes banner-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes letter-drop {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes letter-wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (max-width: 520px) { .complete-title { white-space: normal; line-height: 1.6; } }
@media (prefers-reduced-motion: reduce) {
  .group.just-completed, .group.just-completed::after, .group.just-completed .item.mini,
  .complete-inner, .complete-title span { animation: none; }
}

/* Non-Shiny tab: collected items (and completed dungeon cards) use a purple highlight instead of white */
#panel-whitebags .item,
#panel-whitebags .group { --accent: #a970ff; }

/* ---------- Ad placeholders (home page) ---------- */
.ad-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  margin-left: auto; margin-right: auto;
  background: repeating-linear-gradient(45deg, var(--panel), var(--panel) 10px, var(--bg-2) 10px, var(--bg-2) 20px);
  border: 2px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}
.ad-label { font-family: var(--pixel); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.ad-size { font-size: 12px; opacity: 0.8; }
.ad-side { width: 300px; height: 250px; max-width: 100%; margin-bottom: 18px; }
.ad-bottom { width: 728px; height: 90px; max-width: 100%; margin-top: 8px; margin-bottom: 48px; }

@media (max-width: 760px) {
  .ad-bottom { width: 320px; height: 50px; }
  .ad-bottom .ad-size { font-size: 0; }
  .ad-bottom .ad-size::after { content: "320 × 50"; font-size: 12px; }
}

/* Space reserved for each ad: AdSense fills the box, so a fixed size avoids the page jumping
   when an ad loads (layout shift). */
.ad-slot { box-sizing: border-box; overflow: hidden; }
#panel-leaderboard .ad-bottom { margin-top: 28px; }

/* Side rails: only when there is room for them beside the 1200px page (main + 24px gaps) */
.ad-rail { display: none; }
@media (min-width: 1600px) {
  body:not([data-page="home"]) .ad-rail {
    display: block;
    position: fixed;
    top: 104px; /* below the sticky top bar */
    z-index: 5;
    width: 160px;
  }
  .ad-rail-left  { left: calc(50% - 600px - 24px - 160px); }
  .ad-rail-right { right: calc(50% - 600px - 24px - 160px); }
  .ad-rail .ad-slot { width: 160px; height: 600px; }
  .ad-rail .ad-size::after { content: "160 × 600"; }
}
/* Very wide screens: the bigger Half Page size fits */
@media (min-width: 1900px) {
  body:not([data-page="home"]) .ad-rail { width: 300px; }
  .ad-rail-left  { left: calc(50% - 600px - 24px - 300px); }
  .ad-rail-right { right: calc(50% - 600px - 24px - 300px); }
  .ad-rail .ad-slot { width: 300px; height: 600px; }
  .ad-rail .ad-size::after { content: "300 × 600"; }
}
/* Short screens: keep the whole 600px-tall rail on screen */
@media (min-width: 1600px) and (max-height: 720px) {
  body:not([data-page="home"]) .ad-rail { display: none; }
}

/* In-page banners between sections: only when the side rails can't be shown */
.ad-inline { width: 728px; height: 90px; max-width: 100%; margin: 26px auto 30px; grid-column: 1 / -1; }
.ad-inline .ad-size::after { content: "728 × 90"; }
@media (max-width: 760px) {
  .ad-inline { width: 320px; height: 100px; }
  .ad-inline .ad-size::after { content: "320 × 100"; }
}
@media (min-width: 1600px) and (min-height: 721px) {
  .ad-inline { display: none; }
}

/* ---------- Home: Live Shinies Logged feed ---------- */
.live-feed { margin: 8px 0 56px; }
.live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.live-head .section-title { display: flex; align-items: center; gap: 10px; }
.live-sub { color: var(--muted); font-size: 12px; }
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7);
  animation: live-ping 1.6s ease-out infinite;
}
@keyframes live-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); }
  100% { box-shadow: 0 0 0 10px rgba(255, 77, 77, 0); }
}
.live-list { list-style: none; display: grid; gap: 6px; }
.live-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 8px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  animation: live-in 0.35s ease-out calc(var(--n) * 0.03s) both;
}
.live-row:first-child { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.live-row.me { box-shadow: 0 0 0 1px var(--gold) inset; }
@keyframes live-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.live-item { width: 44px; height: 44px; display: grid; place-items: center; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; }
.live-item img { width: 36px; height: 36px; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255, 211, 77, 0.5)); }
.live-what { display: flex; flex-direction: column; min-width: 0; }
.live-name { font-weight: 700; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-by { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.live-by b { color: var(--text); }
.live-avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.live-avatar .acct-avatar { width: 24px; height: 24px; margin: 0; }
.live-avatar .acct-avatar.fallback { font-size: 10px; }
.live-rank { font-family: var(--pixel); font-size: 10px; color: var(--gold); text-decoration: none; }
.live-rank:hover { color: var(--text); }
.live-time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-empty { color: var(--muted); font-size: 14px; padding: 16px; background: var(--panel); border: 1px dashed var(--border); border-radius: 10px; text-align: center; }
@media (max-width: 520px) {
  .live-row { grid-template-columns: 40px minmax(0, 1fr); }
  .live-item { width: 38px; height: 38px; }
  .live-time { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .live-dot, .live-row { animation: none; } }

/* Live feed as square tiles, newest first from the left */
.live-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.live-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 22px 8px 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  text-align: center; min-width: 0;
  animation: live-in 0.35s ease-out calc(var(--n) * 0.04s) both;
}
.live-tile.newest { border-color: var(--gold); box-shadow: 0 0 14px rgba(255, 211, 77, 0.35); }
.live-tile.newest::before {
  content: "NEW"; position: absolute; top: 6px; left: 8px;
  font-family: var(--pixel); font-size: 7px; color: var(--gold);
}
.live-tile.me { box-shadow: 0 0 0 1px var(--gold) inset; }
.live-tile .live-time { position: absolute; top: 6px; right: 8px; font-size: 10px; }
.live-tile .live-item { width: 52px; height: 52px; flex-shrink: 0; }
.live-tile .live-item img { width: 44px; height: 44px; }
.live-tile .live-name { font-size: 12px; line-height: 1.25; max-width: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.live-tile .live-by { justify-content: center; gap: 4px; font-size: 11px; max-width: 100%; flex-wrap: nowrap; }
.live-tile .live-by b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.live-tile .live-avatar, .live-tile .live-avatar .acct-avatar { width: 20px; height: 20px; flex-shrink: 0; }
.live-tile .live-rank { font-size: 8px; flex-shrink: 0; }
@media (max-width: 860px) { .live-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .live-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .live-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .live-tile { animation: none; } }

/* Check for Gear while waiting in the queue */
#lb-check-btn.in-queue { opacity: 1; background: var(--panel-2); color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset, 0 4px 0 var(--gold-2); animation: queue-pulse 1.6s ease-in-out infinite; }
@keyframes queue-pulse { 50% { box-shadow: 0 0 0 2px var(--gold) inset, 0 4px 0 var(--gold-2), 0 0 18px rgba(255, 211, 77, 0.45); } }
@media (prefers-reduced-motion: reduce) { #lb-check-btn.in-queue { animation: none; } }

.live-pts { color: var(--gold); font-weight: 800; font-size: 11px; white-space: nowrap; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.live-pts small { color: var(--muted); font-weight: 400; }

/* Pixel font sizes: "Press Start 2P" is drawn on an 8px grid, so it only renders cleanly at
   multiples of 8px (8, 16, 24...). At sizes like 10px or 13px the browser has to squash the
   pixels, and some digits (6 looked like G) come out wrong at 100% zoom. Number displays use 8/16/24. */
.card-count { font-size: 8px; }
.lb-stat { font-size: 24px; }
.lb-rank { font-size: 16px; }
.lb-points { font-size: 16px; }
.acct-rank { font-size: 16px; }
.hb-rank { font-size: 8px; }
.hb-points { font-size: 16px; }
.live-rank, .live-tile .live-rank { font-size: 8px; }

/* Leaderboard rows (desktop): base fame + gear sit right after the name; points stay far right */
@media (min-width: 1101px) {
  .lb-row { grid-template-columns: 44px 48px minmax(110px, 180px) 96px 248px minmax(0, 1fr) 76px; }
  .lb-fame { align-items: flex-start; }
  .lb-points { grid-column: -2 / -1; }
}

.live-title-wrap { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.live-hint { color: var(--muted); font-size: 13px; }
.live-hint a { color: var(--muted); text-decoration: underline; }
.live-hint a:hover { color: var(--gold); }

/* VIP badge next to the player's name in the top bar */
.vip-badge {
  margin-left: 2px;
  padding: 3px 6px 2px;
  border-radius: 4px;
  font-family: var(--pixel); font-size: 8px; line-height: 1;
  color: #1a1206;
  background: linear-gradient(135deg, #fff3b0, var(--gold) 45%, var(--gold-2));
  box-shadow: 0 0 8px rgba(255, 211, 77, 0.55);
}

/* VIP tag: purple */
.vip-badge {
  color: #fff;
  background: linear-gradient(135deg, #d8b4ff, #a970ff 45%, #7b3fe0);
  box-shadow: 0 0 8px rgba(169, 112, 255, 0.6);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}
.lb-name-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hb-name { display: flex; align-items: center; gap: 6px; }
.hb-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hb-name .vip-badge { font-size: 8px; padding: 2px 4px 1px; }

/* Dungeon cards with one row of drops per boss (boss order), regular-enemy drops last */
.group-items.has-rows { flex-direction: column; align-items: flex-start; gap: 6px; }
.boss-row { display: flex; flex-wrap: wrap; gap: 6px; }
.boss-row.mob-row { padding-top: 6px; border-top: 1px dashed var(--border); }

/* Home page when stacked (tablet/phone): collection, then the Shiny Leaderboards, then the live feed */
@media (max-width: 1100px) {
  .home-main { display: contents; }
  .home-main > .hero { order: 1; }
  .home-main > .overview { order: 2; }
  .home-side { order: 3; margin-top: 8px; }
  .home-main > .live-feed { order: 4; margin-top: 24px; }
}

/* Home: short "about" text for visitors and search engines */
.about-site { max-width: 900px; margin: 8px auto 32px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.about-site .section-title { margin-bottom: 10px; font-size: 18px; }
.about-site p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
.about-site p b { color: var(--text); font-weight: 600; }
.about-links { list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.about-links a { color: var(--gold); text-decoration: none; font-weight: 600; }
.about-links a:hover { text-decoration: underline; }

/* ---------- Pages with their own address ---------- */
/* Tabs and home cards are real links now (so each page can be opened, shared and indexed). */
a.tab { text-decoration: none; }
a.card { display: block; color: var(--text); text-decoration: none; }
.panel-intro { margin-top: 10px; max-width: 640px; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* "About" box at the bottom of each collection page and the leaderboard */
.page-about { margin: 40px 0 24px; padding: 20px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.page-about-title { font-size: 18px; margin-bottom: 10px; }
.page-about p { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 10px; max-width: 860px; }
.page-about .page-about-more { margin: 14px 0 6px; color: var(--text); font-weight: 600; }
.page-about-links { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.page-about-links a { color: var(--gold); text-decoration: none; font-weight: 600; }
.page-about-links a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .panel-title { font-size: 16px; line-height: 1.5; }
}

/* ---------- Dungeon pages ---------- */
a.portal-link { cursor: pointer; border-radius: 8px; transition: background .2s; }
a.portal-link img { transition: transform .2s; }
a.portal-link:hover { background: var(--panel-2); }
a.portal-link:hover img { transform: scale(1.12); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 28px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--gold); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); }
.crumbs + .panel-head { padding-top: 20px; }

.dungeon-hero { display: flex; gap: 20px; align-items: center; min-width: 0; }
.dungeon-portal { flex: 0 0 96px; height: 96px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.dungeon-portal img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.dungeon-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dungeon-actions a { text-decoration: none; color: var(--text); }

.dungeon-section { margin-bottom: 36px; }
.dungeon-section-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--accent); }
.dungeon-section-head h2 { font-family: var(--pixel); font-size: 16px; color: var(--accent); text-shadow: 2px 2px 0 #000; }
.dungeon-tab-link { margin-left: auto; font-size: 13px; color: var(--muted); text-decoration: none; font-weight: 600; }
.dungeon-tab-link:hover { color: var(--text); }
.dungeon-section > .group-desc { margin: -4px 0 12px; font-size: 13px; }
.dungeon-boss { font-size: 13px; font-weight: 700; color: var(--text); margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.dungeon-boss:first-of-type { margin-top: 0; }
.grid.dungeon-grid { margin-bottom: 8px; }

.dungeon-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; }
.dungeon-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s; }
.dungeon-link:hover { border-color: var(--gold); transform: translateY(-2px); }
.dungeon-link.complete { border-color: var(--gold); }
.dungeon-link-img { flex: 0 0 44px; height: 44px; display: grid; place-items: center; }
.dungeon-link-img img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.dungeon-link-text { display: grid; min-width: 0; }
.dungeon-link-text b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dungeon-link-text small { color: var(--muted); font-size: 12px; }
#panel-dungeons .group-cat { margin-top: 28px; }

@media (max-width: 600px) {
  .dungeon-hero { align-items: flex-start; gap: 14px; }
  .dungeon-portal { flex-basis: 64px; height: 64px; }
  .dungeon-portal img { width: 48px; height: 48px; }
  .dungeon-tab-link { margin-left: 0; width: 100%; }
}

/* ---------- Player profile pages ---------- */
a.lb-avatar { text-decoration: none; }
a.hb-name-text { color: inherit; text-decoration: none; }
a.hb-name-text:hover { color: var(--gold); }
.live-by .live-player { color: var(--text); font-weight: 700; text-decoration: none; }
.live-by .live-player:hover { color: var(--gold); }
.live-tile .live-by .live-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.profile-avatar { flex: 0 0 96px; height: 96px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.profile-avatar .acct-avatar { width: 80px; height: 80px; margin: 0; }
.profile-head .eyebrow .vip-badge { margin-left: 6px; vertical-align: middle; letter-spacing: 0; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 32px; }
.profile-stat { display: grid; gap: 2px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; }
a.profile-stat:hover { border-color: var(--gold); }
.profile-stat b { font-family: var(--pixel); font-size: 16px; color: var(--gold); }
.profile-stat small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.profile-stat span { font-size: 14px; font-weight: 600; }
.profile-section { margin-bottom: 32px; }
.profile-h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--pixel); font-size: 16px; color: var(--accent); text-shadow: 2px 2px 0 #000; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 2px solid var(--accent); }
.profile-char { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); }
.profile-char-who { display: grid; min-width: 120px; }
.profile-char-who small { color: var(--muted); font-size: 12px; }
.profile-shinies { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.profile-shiny { display: grid; justify-items: center; gap: 3px; padding: 14px 10px; text-align: center; background: var(--panel); border: 1px solid var(--shiny); border-radius: var(--radius); }
.profile-shiny-img { width: 56px; height: 56px; display: grid; place-items: center; }
.profile-shiny-img img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
.profile-shiny b { font-size: 13px; line-height: 1.3; }
.profile-shiny a { font-size: 12px; color: var(--gold); text-decoration: none; }
.profile-shiny a:hover { text-decoration: underline; }
.profile-shiny small { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) {
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .profile-stat { padding: 10px; }
  .profile-avatar { flex-basis: 64px; height: 64px; }
  .profile-avatar .acct-avatar { width: 56px; height: 56px; }
}

/* Header: "Dungeons" button next to the site name */
.header-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dng-btn {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap;
  background: var(--panel); border: 1px solid var(--border); transition: color .2s, border-color .2s, background .2s;
}
.dng-btn:hover { color: var(--text); border-color: var(--gold); }
.dng-btn.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.profile-char-icon { flex: 0 0 auto; display: grid; place-items: center; }
.profile-char-icon .acct-avatar { width: 48px; height: 48px; margin: 0; }
.profile-char-fame { margin-left: auto; display: grid; justify-items: end; font-family: var(--pixel); font-size: 16px; color: var(--gold); }
.profile-char-fame small { font-family: inherit; font-size: 8px; color: var(--muted); margin-top: 6px; text-transform: uppercase; }