/* ===== Self-hosted fonts (variable) — cozy & rounded ===== */
@font-face {
  font-family: "Baloo 2";
  src: url("/fonts/Baloo2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* ===== Design tokens — "cozy paper" collection journal ===== */
:root {
  /* Warm paper palette */
  --bg: #f4ebda;
  --bg-surface: #fffdf7;
  --bg-topbar: #efe3cd;
  --text: #4a3f33;
  --text-secondary: #8a7a64;
  --text-muted: #b1a085;
  --border: #e4d6bd;
  --border-light: #ece2cf;
  --accent: #e2884a;
  --accent-deep: #cf6f31;
  --accent-soft: #fbe8d4;

  /* Tag colors (Danbooru convention; kept for tagStyle) */
  --tag-general: #2f7bd6;
  --tag-character: #3f9e5f;
  --tag-copyright: #9a4fb0;
  --tag-meta: #c08a1e;

  /* Tier colors (warm-harmonised) */
  --tier-r: #a89685;
  --tier-sr: #5b93c9;
  --tier-ssr: #a06cd0;
  --tier-ur: #e0962f;

  /* Rarity tiers (by EP points) */
  --rar-uncommon: #3f8f5f;
  --rar-rare: #3f7fc0;
  --rar-epic: #9b5cc8;
  --rar-legendary: #b07d12;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 2px 8px rgba(120,90,50,0.10), 0 1px 2px rgba(120,90,50,0.06);
  --shadow-lift: 0 8px 20px rgba(120,90,50,0.18);

  --font-display: "Baloo 2", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --overlay-bg: rgba(60,44,28,0.55);
}

[data-theme="dark"] {
  /* Warm espresso night (deep) */
  --bg: #161009;
  --bg-surface: #221a12;
  --bg-topbar: #2a2017;
  --text: #ece0cd;
  --text-secondary: #bda88c;
  --text-muted: #897760;
  --border: #3b2d20;
  --border-light: #2c2118;
  --accent: #f0a368;
  --accent-deep: #f6b783;
  --accent-soft: #3c2d20;

  --tag-general: #5a9fff;
  --tag-character: #5fbf7f;
  --tag-copyright: #c089d6;
  --tag-meta: #d8a93a;

  --tier-r: #b7a78f;
  --tier-sr: #76a9d8;
  --tier-ssr: #b585e0;
  --tier-ur: #f0b24a;

  --rar-uncommon: #6cc28a;
  --rar-rare: #6aa8e8;
  --rar-epic: #c089ea;
  --rar-legendary: #f0c44a;

  --shadow: 0 2px 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-lift: 0 10px 24px rgba(0,0,0,0.45);
  --overlay-bg: rgba(10,9,11,0.78);  /* translucent frosted; near-neutral (not warm) so
                                        the dim behind the bottom bar doesn't read brown */
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; background-color: var(--bg); }  /* explicit so Safari's bar doesn't fall back to white/black */
/* modal scroll lock — overflow (NOT position:fixed, which Safari would sample as a solid
   toolbar tint). No height:100% — that collapses the document and jumps the scroll to
   the top on open; plain overflow:hidden freezes the scroll at its current position. */
html.modal-open, html.modal-open body { overflow: hidden; overscroll-behavior: none; }
/* Dim+blur the PAGE itself with `filter` (not a backdrop layer): iOS 26 Safari tints its
   Liquid Glass toolbar from fixed/sticky elements that have a background or backdrop-filter.
   A dim overlay layer triggers that; dimming the page content via `filter` doesn't, and the
   transparent .overlay above stays unsampled — so the URL pill keeps its translucent glass. */
html.modal-open #topbar,
html.modal-open #main-content { filter: brightness(0.5) blur(3px); transition: filter 0.15s ease; }
body {
  font-family: var(--font-body);
  background-color: var(--bg);
  /* faint journal-paper dots */
  background-image: radial-gradient(rgba(120,90,50,0.05) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] body { background-image: radial-gradient(rgba(255,240,210,0.035) 1.2px, transparent 1.2px); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; }

/* ===== Topbar ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, var(--shadow);   /* paper highlight (light) */
}
/* the white paper highlight reads as a stray white line on the dark espresso bar */
[data-theme="dark"] .topbar { box-shadow: var(--shadow); }
.topbar-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--accent-deep);
  letter-spacing: 0.01em;
}
/* the flower is a real element now — it hides a little easter egg */
.topbar-flower {
  color: var(--accent); font-size: 0.9em; cursor: pointer;
  display: inline-block; transition: transform 0.15s ease;
}
.topbar-flower:hover { transform: rotate(20deg) scale(1.15); }
.egg-pop {
  position: fixed; z-index: 1300; padding: 0.55rem 0.85rem;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  font-size: 0.8rem; font-weight: 700; line-height: 1.55; text-align: center;
  animation: eggPop 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
.egg-pop a { color: var(--accent-deep); text-decoration: underline; }
@keyframes eggPop {
  0% { transform: scale(0.4) translateY(-8px); opacity: 0; }
  65% { transform: scale(1.08) translateY(1px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
.confetti {
  position: fixed; width: 7px; height: 11px; border-radius: 2px;
  pointer-events: none; z-index: 1400;
}
.topbar-spacer { flex: 1; }
.topbar-nav-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.25rem 0.45rem;
  border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 800;
  color: var(--text); transition: background 0.12s ease, color 0.12s ease;
}
.topbar-nav-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); text-decoration: none; }
.topbar-nav-link:focus-visible { color: var(--text); outline: 2px solid var(--accent); outline-offset: 2px; text-decoration: none; }
.handle { font-size: 0.9rem; font-weight: 700; color: var(--text-secondary); }
.handle-click { cursor: pointer; }
.handle-click:hover { color: var(--accent-deep); }
/* the login-code box (profile page) */
.acct-code {
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em;
  padding: 0.4rem 0.5rem; text-align: center; cursor: pointer;
  background: var(--accent-soft); color: var(--text);
  border: 2px dashed var(--accent); border-radius: var(--radius-sm);
}
.profile-link { display: block; text-decoration: none; text-align: center; }
.profile-history { position: relative; z-index: 1; max-width: 720px; margin: 1.2rem auto; }
.profile-history h3 { margin: 0; }
.cv-bookmark { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 1210; }
/* /profile page card */
.profile-page-box {
  max-width: 440px; margin: 1.5rem auto; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-align: center;
}
.profile-header-card { position: relative; z-index: 1; }
.profile-page-box.profile-header-card { max-width: 720px; }
.profile-card-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
  padding-top: 0.8rem; border-top: 1px solid var(--border-light);
}
.profile-topbar-actions { display: flex; align-items: center; gap: 0.4rem; }
.profile-topbar-actions #profile-owner-actions { display: contents; }
.profile-action-btn {
  justify-content: center; box-shadow: none;
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-deep);
}
.profile-action-btn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface)); }
.profile-card-label {
  align-self: center; margin: 0; padding: 0.18rem 0.65rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
  font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
}
.profile-section-card {
  position: relative; z-index: 1; max-width: 720px; margin: 1.2rem auto; padding: 1.2rem;
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.profile-section-heading {
  display: flex; align-items: center; gap: 0.65rem;
  margin-bottom: 0.9rem; padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
}
.profile-section-heading h3 { text-align: left; }
.profile-section-count {
  margin-left: auto; min-width: 1.8rem; padding: 0.12rem 0.5rem; text-align: center;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep);
  font-size: 0.75rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.profile-page-box .rename-form { justify-content: center; margin-bottom: 0; }
/* ===== Buttons ===== */
[hidden] { display: none !important; }

.btn {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px) rotate(-0.6deg); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-sm { padding: 0.28rem 0.6rem; font-size: 0.8rem; }
.btn-icon {
  background: var(--bg-surface);
  font-size: 1.1rem;
  padding: 0.25rem;
  min-width: 40px;
  min-height: 40px;
  justify-content: center;
  border-radius: 999px;
}
/* Theme toggle glyph: shows what tapping switches TO — a moon to go dark (in
   light mode), a sun to go light (in dark mode). Driven by [data-theme] so it's
   set before paint (no flash) and takes the warm palette colour. */
#theme-toggle .ic-sun { display: none; }
[data-theme="dark"] #theme-toggle .ic-moon { display: none; }
[data-theme="dark"] #theme-toggle .ic-sun { display: inline; }

/* ===== Layout ===== */
#main-content {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.8rem 1rem 1.25rem; /* tighter top gap below the topbar */
  position: relative; z-index: 1; /* above the scrapboard wall crop (z 0) */
}
section { margin-bottom: 1.5rem; }

/* Shared card surface */
.post-layout, .share-card, .daily-timer, .roll-start, .overlay-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ===== Roll / Post layout (booru post-page, cozied up) ===== */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.1rem;
  padding: 1rem;
}
/* column so the posted-date caption stacks UNDER the image (horizontal centering is
   align-items now; vertical position is justify-content — entry-box overrides that) */
.post-image-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
}
/* art's booru upload date — a quiet caption under the image, above the tag labels */
.post-date { font-size: 0.74rem; font-weight: 600; color: var(--text-muted); line-height: 1; }
/* held until the payoff — display:none (not opacity) so no blank line/gap during the reveal */
.post-date.result-hidden { display: none; }
.post-image-frame {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.post-image {
  max-height: 70vh;
  max-width: 100%;
  border-radius: var(--radius-sm);
  transition: opacity 0.35s ease;
}
.post-image.pending { opacity: 0; }

/* Denoise-reveal canvas, overlaid exactly on the image until it hands off. */
.reveal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.reveal-canvas.done { opacity: 0; }

/* Tier finales — a glow swell as a high pull resolves. */
.post-image-frame.finale-ssr { animation: finaleGlow 1.1s ease-out; --finale: var(--tier-ssr); }
.post-image-frame.finale-ur { animation: finaleGlow 1.4s ease-out, finaleShake 0.5s ease-in-out; --finale: var(--tier-ur); }
@keyframes finaleGlow {
  0%   { box-shadow: 0 0 0 0 transparent; }
  30%  { box-shadow: 0 0 30px 7px var(--finale, var(--accent)); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes finaleShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.post-meta {
  display: flex;
  flex-direction: column;
  justify-content: center; /* centre the result card in the tall sidebar */
  gap: 0.6rem;
  transition: opacity 0.4s ease;
}
.post-meta.pending { opacity: 0; }
.post-meta.meta-pop { animation: metaPop 0.45s cubic-bezier(.2,.8,.2,1); }
@keyframes metaPop {
  0%   { transform: translateY(8px) scale(0.96); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* Result card — gacha-style payoff panel: tier ribbon on top, hero EP, standing. */
.result-card {
  --tier-color: var(--tier-r);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  /* confine the holo mix-blend-mode to the card's own layers — without this the blend
     can momentarily composite against the page behind during the 3D tilt (a 1-2 frame
     rainbow blow-out) */
  isolation: isolate;
  text-align: center;
  background: color-mix(in srgb, var(--tier-color) 9%, var(--bg-surface));
  box-shadow: var(--shadow);
}
.result-tier {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.8rem 0.5rem;
  background: var(--tier-color);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}
.result-tier-name { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: 0.06em; }
.result-tier-stars { font-size: 1rem; letter-spacing: 0.2em; line-height: 1; }
.ep-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 3.8rem;
  line-height: 1;
  color: var(--text);
  padding: 1.3rem 0.5rem 0.25rem;
}
.ep-display .ep-value::after { content: " EP"; font-size: 0.3em; font-weight: 700; color: var(--text-muted); vertical-align: 0.6em; margin-left: 0.1em; }
.ep-display.ep-flash { animation: epPop 0.9s cubic-bezier(.2,.8,.2,1); }
@keyframes epPop {
  0%   { transform: scale(1.2); color: var(--tier-color); }
  100% { transform: scale(1); color: var(--text); }
}
.pct-display {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-secondary);
  padding: 0 0.5rem 1.2rem;
  transition: opacity 0.4s ease;
}
.result-hidden { opacity: 0; } /* pct + credit: held hidden until the EP is fully tallied */
/* the credit strip also collapses its HEIGHT while hidden — no blank foot on the card
   during the tally; the card extends (0.4s ease) as the credit lands at the payoff */
.credit-block.result-hidden {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  overflow: hidden;
}

/* ===== Holographic card interaction (tilt + glare + tier holo) ===== */
.card3d {
  position: relative;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s ease;
  will-change: transform;
  /* No text-selection/callout when touching a card to tilt it on mobile. pan-y lets
     a vertical drag scroll the page/modal through the card (was `none`, which trapped
     the touch so you couldn't scroll past a card — broke the entry overlay on mobile);
     horizontal drags still tilt. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.card3d.card-active { transition: transform 0.06s ease; }

/* Keep the readable bits crisp above the foil layers (banner BG still shines). */
.result-card .ep-display, .result-card .pct-display { position: relative; z-index: 7; }
.result-tier-name, .result-tier-stars { position: relative; z-index: 7; }
.holo .result-tier-name, .holo .result-tier-stars { text-shadow: 0 1px 5px rgba(0,0,0,0.55); }

/* glare — a bright highlight that tracks the pointer */
.card3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 40%);
  opacity: calc(var(--pfc, 0) * 0.6);
  mix-blend-mode: soft-light;
  transition: opacity 0.35s ease;
}

/* holo foil — tiered; already shining at rest, vivid as you tilt.
   ONE oversized, NON-repeating gradient panned via background-position: seamless (a
   single tile, never a tile boundary in view → no bands) and never composited (no
   transform → its own border-radius clips it natively on Safari; no clip-path or
   shadow gymnastics needed on the card). */
.holo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  background-position: var(--px, 50%) var(--py, 50%);
  opacity: calc(0.45 + var(--pfc, 0) * 0.55);
  transition: opacity 0.35s ease;
}
.holo-sr::before {
  background-image: repeating-linear-gradient(125deg,
    rgba(150,180,220,0.55) 0%, rgba(220,235,255,0.9) 8%, #ffffff 13%, rgba(200,225,255,0.85) 19%, rgba(150,180,220,0.55) 27%);
  mix-blend-mode: soft-light; /* softer than SSR's color-dodge → stays lower-key */
}
/* SSR — repeating metallic gold foil (not a single band), so it fills the card
   and shimmers across as you tilt, like the UR rainbow but gold. */
.holo-ssr::before {
  background-image: repeating-linear-gradient(125deg,
    #9c6b06 0%, #ffd76a 7%, #fff7d4 13%, #ffc23d 19%, #9c6b06 26%);
  /* screen (not color-dodge) — same fix as UR: the near-white band (#fff7d4) blew out
     hard under color-dodge on the dark card; screen keeps the gold shimmer without clipping */
  mix-blend-mode: screen;
  opacity: calc(0.5 + var(--pfc, 0) * 0.4);
  filter: saturate(1.1);
}
/* UR — rainbow shine (texture pattern TBD) */
.holo-ur::before {
  background-image: repeating-linear-gradient(125deg,
    #ff5d6c 0%, #ffd34e 8%, #5dff95 16%, #4ed8ff 24%, #9b6bff 32%, #ff6bd6 40%, #ff5d6c 48%);
  /* screen (not color-dodge): still a vivid rainbow but it caps at the source colour
     instead of exploding to clipped white/hard bands on the dark card */
  mix-blend-mode: screen;
  opacity: calc(0.5 + var(--pfc, 0) * 0.4);
  filter: saturate(1.15);
}

/* constant foil sweep — SSR/UR shine even before you touch them. Same no-transform
   technique as the foil: a no-repeat gradient panned via background-position, so it
   clips to the rounded corners natively and can never desync from the card. */
.holo-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background-image: linear-gradient(115deg, transparent 47%, rgba(255,255,255,0.6) 50%, transparent 53%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.4;
  animation: holoSweep 3.2s ease-in-out infinite;
}
.holo-sr .holo-shine { opacity: 0.26; }
@keyframes holoSweep {
  0%   { background-position: 90% 0; }  /* band off the left edge... */
  100% { background-position: 10% 0; }  /* ...sweeps to off the right */
}

@media (prefers-reduced-motion: reduce) {
  .card3d { transform: none; transition: none; }
  .card3d::after, .holo::before, .holo-shine { display: none; }
}

/* ===== Tags — sticker cloud, coloured by rarity ===== */
.tag-list {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  padding-top: 0.75rem;
  margin-top: 0.25rem;
  border-top: 1px dashed var(--border);
}
.tag-item {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  cursor: default;
  line-height: 1.5;
}
/* pop-in as each is tallied */
.tag-pop { animation: tagPop 0.34s cubic-bezier(.2,.9,.3,1.35); }
@keyframes tagPop {
  0%   { transform: scale(0.55); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Rarity ladder — colour + chip + escalating flair */
/* the PILL wears the rarity colour (filled, like the score/fame badges) */
.tag-item.rar-common    { color: var(--text-secondary); }
.tag-item.rar-uncommon  { color: #fff; background: var(--rar-uncommon); }
.tag-item.rar-rare      { color: #fff; font-weight: 700; background: var(--rar-rare); }
.tag-item.rar-epic      { color: #fff; font-weight: 800; background: var(--rar-epic); box-shadow: 0 0 10px color-mix(in srgb, var(--rar-epic) 45%, transparent); }
.tag-item.rar-legendary { color: #443005; font-weight: 800; letter-spacing: 0.02em; background: var(--rar-legendary); animation: rarPulse 1.5s ease-in-out infinite; }
.tag-item.rar-legendary::after { content: " ✨"; }
@keyframes rarPulse {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--rar-legendary) 45%, transparent); }
  50%      { box-shadow: 0 0 16px color-mix(in srgb, var(--rar-legendary) 85%, transparent); }
}

/* Per-chip "+N" — inherits the tier colour, dimmed; tabular so it doesn't jitter. */
.tag-pts { margin-left: 0.2rem; font-size: 0.72rem; font-weight: 800; color: currentColor; opacity: 0.72; font-variant-numeric: tabular-nums; }

/* Score / fame badges (the non-tag EP axes) */
.ep-badge {
  font-weight: 800;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  color: #fff !important;
  box-shadow: var(--shadow);
}
.ep-badge .tag-pts { color: rgba(255, 255, 255, 0.92); opacity: 1; }
.ep-badge.badge-score { background: linear-gradient(135deg, #e6a52e, #d4860b); }
.ep-badge.badge-fame { background: linear-gradient(135deg, #ec5a86, #d6336c); }
.ep-badge.rar-epic      { box-shadow: 0 0 12px color-mix(in srgb, var(--rar-epic) 55%, transparent); }
.ep-badge.rar-legendary { animation: badgePulse 1.5s ease-in-out infinite; }
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--rar-legendary) 55%, transparent); }
  50%      { box-shadow: 0 0 22px color-mix(in srgb, var(--rar-legendary) 95%, transparent); }
}

/* ===== Roll start (press-to-roll) — journal placeholder ===== */
.roll-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  padding: 4rem 1rem;
  border: 2px dashed var(--border);
  background: var(--bg-surface);
}
.roll-start-text { font-size: 1.05rem; font-weight: 600; color: var(--text-secondary); }
.roll-start-btn { font-family: var(--font-display); font-size: 1.15rem; padding: 0.7rem 1.8rem; }
/* Vibrate excitedly on hover — it can't wait to be opened. */
.roll-start-btn:hover { animation: excitedVibrate 0.16s linear infinite; }
/* …and keep vibrating after the tap while the roll is in flight: the input is
   acknowledged and the wait (Safebooru fetch + retries) reads as "loading". */
.roll-start-btn.rolling { animation: excitedVibrate 0.16s linear infinite; cursor: progress; }
@keyframes excitedVibrate {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1.04); }
  20%  { transform: translate(-2px, 1px) rotate(-2.2deg) scale(1.04); }
  40%  { transform: translate(2px, -1px) rotate(2.2deg) scale(1.04); }
  60%  { transform: translate(-1px, -1px) rotate(-1.4deg) scale(1.04); }
  80%  { transform: translate(1px, 1px) rotate(1.4deg) scale(1.04); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1.04); }
}

/* "New pull ready" — spawns in at the top of the roll area when the reset hits. */
.roll-again-wrap {
  display: flex; justify-content: center; padding: 0.2rem 0 0.7rem;
  animation: rollReadySpawn 0.55s cubic-bezier(.18,.9,.25,1.1); /* slight overshoot on landing */
}
@keyframes rollReadySpawn {
  0%   { opacity: 0; transform: translateY(-64px) scale(0.92); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* "New pull ready" button — a pulsing, glowing call to action when the daily
   reset hits, so it's clearly an exciting new roll (not just a dead timer). */
.roll-again-btn {
  font-family: var(--font-display); font-size: 1.15rem; padding: 0.7rem 1.8rem;
  animation: rollReadyPulse 1.15s ease-in-out infinite;
}
.roll-again-btn:hover { animation: excitedVibrate 0.16s linear infinite; }
@keyframes rollReadyPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  50% { transform: scale(1.06); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 75%, transparent); }
}

/* ===== Skip hint (during reveal) ===== */
.skip-hint {
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0.5rem;
  user-select: none;
  animation: skipPulse 1.6s ease-in-out infinite;
}
@keyframes skipPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

/* ===== Leaderboard overlay ===== */
/* .overlay-box.leaderboard-box (0,2,0) beats the later .overlay-box max-width:420px */
/* cap to the viewport so title/search/pager/Close stay pinned and only .lb-body
   scrolls — a short window must never push Close below the fold */
.overlay-box.leaderboard-box { max-width: 680px; width: calc(100vw - 2rem); text-align: left; max-height: calc(100dvh - 2rem); gap: 0.55rem; }
.leaderboard-box h2 { text-align: center; }
.lb-search {
  width: 100%; padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem; font-weight: 700;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text);
}
.lb-search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
/* padding so a row's glow (UR / own-row) has room on all sides. The inline board
   is NOT its own scroll area — it flows with the page (no mobile rubber-band /
   nested-scroll trap); only the view-all overlay scrolls internally. */
.lb-body { padding: 0.7rem; }
.leaderboard-box .lb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.lb-list { list-style: none; display: flex; flex-direction: column; gap: 0.2rem; }
.lb-row {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto auto;
  column-gap: 0.6rem;
  row-gap: 0.25rem; /* breathing room before the artist/series/tags line */
  align-items: baseline;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
}
.lb-row:nth-child(odd) { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.lb-rank { font-family: var(--font-display); font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.lb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-tier { font-family: var(--font-display); font-weight: 800; }
.lb-ep { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); }
.lb-row-click { cursor: pointer; transition: background 0.12s ease, transform 0.12s ease; }
.lb-row-click:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lb-row-click:active { transform: scale(0.99); }
.lb-row-click:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* tag preview wraps to a full-width second line under the rank/name/tier/ep row */
/* credit (artist · series) on its own row, the truncated tags on the row below */
.lb-credit {
  grid-column: 1 / -1;
  font-size: 0.79rem; font-weight: 700; color: var(--text-secondary);
  /* wrap (don't truncate) — the full character · artist · series should fit */
  overflow-wrap: anywhere; line-height: 1.35;
}
.lb-tags {
  grid-column: 1 / -1;
  font-size: 0.76rem; font-weight: 600; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-pager { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.lb-page-label { font-size: 0.85rem; font-weight: 800; color: var(--text-secondary); min-width: 4rem; text-align: center; }
/* the user's own freshly posted row — highlighted as it flies in (beats nth-child/hover) */
.lb-row.lb-row-own {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  /* inset ring + a soft outer accent glow so the player's own row lifts off the list */
  box-shadow:
    inset 0 0 0 1.5px var(--accent),
    0 0 11px color-mix(in srgb, var(--accent) 45%, transparent);
  position: relative;
  z-index: 1; /* keep the glow above neighbouring rows */
}
/* UR flare: a shimmering "UR" badge + faint rainbow wash + tier-edge ring, so the
   top tier pops on the board (no glow — it didn't read well). */
.lb-row-ur {
  position: relative; z-index: 1;
  background: linear-gradient(100deg,
    color-mix(in srgb, #ff6bd6 12%, transparent),
    color-mix(in srgb, #4ed8ff 12%, transparent),
    color-mix(in srgb, #ffd34e 12%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tier-ur) 50%, transparent);
}
/* UR hover/touch: brighter wash + a static (non-animated) rainbow glow. */
.lb-row-ur.lb-row-click:hover, .lb-row-ur.lb-row-click:active {
  z-index: 2; /* glow sits above an adjacent UR */
  background: linear-gradient(100deg,
    color-mix(in srgb, #ff6bd6 22%, transparent),
    color-mix(in srgb, #4ed8ff 22%, transparent),
    color-mix(in srgb, #ffd34e 22%, transparent)) !important;
  box-shadow:
    inset 0 0 0 1.3px color-mix(in srgb, var(--tier-ur) 70%, transparent),
    0 0 4px color-mix(in srgb, #ff6bd6 55%, transparent),
    0 0 6px color-mix(in srgb, #9b6bff 45%, transparent),
    0 0 8px color-mix(in srgb, #4ed8ff 36%, transparent);
}
/* The "UR" tier badge shimmers (not the name). Fallback colour comes from the
   inline tier colour JS already sets; clip-text fills with the rainbow when supported. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .lb-row-ur .lb-tier {
    /* 90deg + start colour == end colour, so it tiles seamlessly; shifting by one
       tile (background-size width) makes urShimmer a perfect loop with no jump. */
    background-image: linear-gradient(90deg, #ff5d6c, #ffd34e, #5dff95, #4ed8ff, #9b6bff, #ff6bd6, #ff5d6c);
    background-size: 44px 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: urShimmer 3s linear infinite;
  }
}
/* reactive: shimmer faster on hover (desktop) OR touch (mobile has no hover) */
.lb-row-ur:hover .lb-tier, .lb-row-ur:active .lb-tier { animation-duration: 1.1s; }
@keyframes urShimmer { to { background-position: 44px 0; } }
.lb-gap { text-align: center; color: var(--text-muted); letter-spacing: 0.25em; padding: 0.1rem 0; }
/* a row that just appeared on a live refresh fades/slides in */
@keyframes lbRowIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } }
.lb-row-new { animation: lbRowIn 0.45s cubic-bezier(.2,.8,.2,1); }
.lb-cta {
  margin-top: 0.5rem; padding: 0.55rem 0.6rem; text-align: center;
  font-size: 0.85rem; font-weight: 700; color: var(--text-secondary);
  border-top: 1px solid var(--border-light);
}
.lb-cta-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-weight: 800; color: var(--accent);
}
.lb-cta-link:hover { text-decoration: underline; }
.lb-cta-link:disabled { color: var(--text-muted); cursor: default; text-decoration: none; }

/* ===== Inline leaderboard (under the share card) ===== */
.lb-inline {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.4rem 0.1rem 0.4rem; /* slim — the row glow room now lives in .lb-body padding */
}
.lb-inline-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  cursor: pointer;
}
.lb-viewall { margin-left: auto; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--accent-deep); }
.lb-inline-title:hover .lb-viewall { text-decoration: underline; }

/* ===== Entry-roll overlay (clicking a leaderboard row) ===== */
/* .overlay-box.entry-box (0,2,0) beats the later .overlay-box max-width (0,1,0),
   so the entry modal is actually wide enough for the image + 320px card grid */
/* overflow:hidden so the BOX doesn't scroll — only .entry-slot does, which keeps the
   handle (top) and Close (bottom) pinned, same as the leaderboard's lb-body */
.overlay-box.entry-box { max-width: 760px; width: calc(100vw - 2rem); overflow: hidden; overscroll-behavior: none; }
/* the entry overlay reuses the live roll's .post-layout; trim its outer padding
   and cap the image so the whole card sits comfortably inside the modal */
/* the modal is already the card — drop .post-layout's own bg/border/radius so there's
   no nested squircle; just keep the grid + a little breathing room above/L/R */
.entry-box .post-layout {
  /* A tilted card projects above its untransformed layout box. Keep that projection
     inside the scrollport; otherwise overflow clipping makes the pinned header look
     like it is slicing across the card at low viewing angles. */
  padding: clamp(1.5rem, 4dvh, 6rem) 0.6rem 0.6rem;
  background: none; border: none; box-shadow: none; border-radius: 0;
}
/* centre BOTH the image and the card vertically in their cells, so whichever is
   shorter centres against the taller. (.post-meta already centres via the base
   rule; the image-wrap defaults to top, so centre it too.) */
.entry-box .post-image-wrap { justify-content: center; } /* column flex — vertical centring is justify now */
.entry-box .post-image { max-height: 52vh; }
.entry-slot {
  text-align: left; flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 72%, var(--border)) color-mix(in srgb, var(--bg) 82%, transparent);
}
.entry-slot::-webkit-scrollbar { width: 10px; }
.entry-slot::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-radius: 999px;
}
.entry-slot::-webkit-scrollbar-thumb {
  min-height: 42px;
  background: color-mix(in srgb, var(--accent) 72%, var(--border));
  border: 2px solid var(--bg-surface);
  border-radius: 999px;
}
.entry-slot::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }
.entry-slot::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.entry-profile-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 0.18em;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.entry-profile-link:hover { color: var(--accent-deep); text-decoration-color: currentColor; }
.entry-profile-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ===== Auth overlay ===== */
.auth-box { max-width: 380px; width: calc(100vw - 2rem); gap: 0.6rem; }
.auth-box h2 { margin-bottom: 0.25rem; }
.auth-box p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
.auth-input {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  width: 100%;
}
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0.4rem 0;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-light); }
.auth-err { color: #d6336c !important; font-weight: 700; font-size: 0.82rem !important; }

/* ===== Share card (Discord-first) ===== */
.share-card { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.share-head { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--text); }
.share-character { font-size: 0.86rem; font-weight: 800; }
.share-artist { font-size: 0.86rem; font-weight: 700; }
.share-artist a { color: var(--accent); text-decoration: none; }
.share-artist a:hover { text-decoration: underline; }
.share-copyright { font-size: 0.86rem; font-weight: 700; color: var(--text-secondary); }
.share-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.share-tag { font-size: 0.84rem; font-weight: 700; color: var(--text-secondary); }
.share-tag.rar-uncommon  { color: var(--rar-uncommon); }
.share-tag.rar-rare      { color: var(--rar-rare); }
.share-tag.rar-epic      { color: var(--rar-epic); font-weight: 800; }
.share-tag.rar-legendary { color: var(--rar-legendary); font-weight: 800; letter-spacing: 0.02em; }
.share-tag.rar-legendary::after { content: " ✨"; }
.share-tag.fame { color: #d6336c; font-weight: 800; }
/* Credit footer — a printed-on strip at the foot of the card (artist over series),
   tinted to the tier so it reads as part of the card, not appended below it. */
.credit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid color-mix(in srgb, var(--tier-color) 25%, var(--border-light));
  background: color-mix(in srgb, var(--tier-color) 16%, var(--bg-surface));
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  max-height: 12rem; /* transition target — comfortably fits multi-line credits */
  transition: opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease, border-top-width 0.4s ease;
}
.credit-block a { color: var(--accent); text-decoration: none; }
.credit-block a:hover { text-decoration: underline; }
.credit-character { color: var(--text); font-weight: 800; } /* the character is the subject — a touch bolder */
.credit-copyright { color: var(--text-secondary); }
/* "already pulled" label inside the result card — subtle, muted. */
.already-pulled { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); padding: 0.1rem 0.5rem 0; text-align: center; }
.share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* little sparkle pop when copied */
.btn.copied { animation: copiedPop 0.45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes copiedPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .btn.copied { animation: none; } }

/* ===== Profile ===== */
.profile-container { margin-top: 1.5rem; }
.profile-handle { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; margin-bottom: 0.5rem; }
.profile-container h3 { font-size: 1.1rem; margin: 0.5rem 0; }
.guest-banner {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem; font-weight: 700; color: var(--text-secondary);
  padding: 0.7rem 0.8rem; margin-bottom: 0.75rem;
  border: 1.5px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--accent-soft);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.guest-banner:hover { border-color: var(--accent); color: var(--text); }
.rename-form { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.rename-form input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text);
  max-width: 160px;
}
.rename-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* ===== History grid — sticker/polaroid collection ===== */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.7rem;
}
.history-cell {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--tier-r);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  color: var(--text);
}
.history-cell:hover { box-shadow: var(--shadow-lift); } /* tilt handled by .card3d */
.history-cell-click { cursor: pointer; }
.history-cell-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.history-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; }
.history-cell-info { padding: 0.4rem 0.5rem; font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.15rem; }
.history-date { color: var(--text-muted); font-weight: 600; }
.history-ep { font-weight: 800; font-variant-numeric: tabular-nums; }
.history-tier { font-family: var(--font-display); font-weight: 800; }
.empty-history {
  font-size: 0.9rem; color: var(--text-muted); font-weight: 600;
  padding: 1.25rem; text-align: center;
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
}
.explore-page { display: flex; flex-direction: column; gap: clamp(1.2rem, 3.5vw, 2.4rem); max-width: 1120px; margin-inline: auto; padding-inline: clamp(0.9rem, 4vw, 2.5rem); }
.explore-page .history-date,
.explore-page .lb-tags { color: var(--text); }
.explore-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0 0.5rem 0.5rem; }

/* Explore energy bucket: a BATTERY (one cell per available pull) + timer.
   Fill colour follows the charge threshold; at full charge it goes prismatic. */
/* Full-width box; the fixed-width battery keeps it from rescaling as cards swap in/out. */
.explore-panel { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; width: 100%; box-sizing: border-box; }
.energy-bar {
  position: relative;
  display: flex;
  gap: 3px;
  width: 340px;      /* fixed so it never scales with panel content */
  max-width: 100%;
  padding: 4px;
  box-sizing: border-box;
  border: 3px solid var(--text, #4a3f35);
  border-radius: 7px;
  background: var(--bg, #fff);
}
/* battery terminal nub on the right */
.energy-bar::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 42%;
  border-radius: 0 3px 3px 0;
  background: var(--text, #4a3f35);
}
.energy-seg { flex: 1; height: 1.15rem; border-radius: 2px; background: var(--border, #e5ded2); transition: background 0.3s; }
/* filled cells, coloured by charge threshold */
.energy-lvl-low .energy-seg-full { background: #e5533c; }
.energy-lvl-mid .energy-seg-full { background: #e6b34a; }
.energy-lvl-high .energy-seg-full { background: #5ac16f; }
.energy-lvl-full .energy-seg-full { background: #5ac16f; }
/* prismatic sheen sweeping the whole cell strip — only at full charge */
.energy-prism {
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  background: linear-gradient(115deg, #ff5f6d, #ffc371, #47e0a0, #4facfe, #b06ab3, #ff5f6d);
  background-size: 300% 100%;
}
.energy-lvl-full .energy-prism { opacity: 0.9; animation: energy-prismatic 3s linear infinite; }
.energy-lvl-full { border-color: #b06ab3; box-shadow: 0 0 10px rgba(176, 106, 179, 0.45); }
@keyframes energy-prismatic {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .energy-lvl-full .energy-prism { animation: none; }
}
.energy-label { margin: 0; font-size: 0.85rem; color: var(--text); font-variant-numeric: tabular-nums; }
.explore-latest:not(:empty) { width: 100%; margin-top: 0.4rem; }
/* "Pulling…" placeholder: a holographic card that bobs while the pull is in flight. */
.explore-pulling {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 230px; border-radius: var(--radius-sm, 10px); color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  background: linear-gradient(115deg, #ff5f6d, #ffc371, #47e0a0, #4facfe, #b06ab3, #ff5f6d);
  background-size: 300% 100%;
  animation: energy-prismatic 2.4s linear infinite, explore-bob 1.3s ease-in-out infinite;
}
.explore-pulling-orb { font-size: 2.6rem; animation: explore-spin 1.1s linear infinite; }
.explore-pulling-text { margin: 0; font-weight: 800; letter-spacing: 0.05em; }
/* Real card pops in when the pull resolves. */
.explore-reveal { animation: explore-reveal 0.5s cubic-bezier(0.2, 0.8, 0.25, 1); }
@keyframes explore-spin { to { transform: rotate(360deg); } }
@keyframes explore-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes explore-reveal {
  0% { opacity: 0; transform: scale(0.85) rotate(-2deg); }
  60% { opacity: 1; transform: scale(1.03) rotate(0.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .explore-pulling { animation: energy-prismatic 2.4s linear infinite; }
  .explore-pulling-orb { animation: none; }
  .explore-reveal { animation: none; }
}
.explore-feature-btn { margin-top: 0.3rem; align-self: flex-start; font-size: 0.72rem; }
.explore-feature-btn.is-featured { border-color: var(--accent, #e39a5c); color: var(--accent, #e39a5c); font-weight: 700; }
/* Tag map (force-directed graph of pulls linked by shared character/series). */
.explore-graph-wrap { width: 100%; position: relative; }
.explore-graph-svg { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm, 10px); background: var(--accent-soft, rgba(0, 0, 0, 0.03)); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.explore-graph-controls { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; z-index: 5; }
.explore-graph-zbtn { width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text); font-size: 1.1rem; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; }
.explore-graph-zbtn:hover { background: var(--accent-soft); }
.explore-graph-svg:active { cursor: grabbing; }
.explore-graph-svg .graph-node { cursor: grab; }
.explore-graph-svg .graph-node:hover circle { stroke-width: 5; }
.explore-graph-svg .graph-label { fill: var(--text); font-family: var(--font-body); font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--bg, #fff); stroke-width: 3px; }
.explore-graph-hint { color: var(--text); font-size: 0.82rem; margin: 0.3rem 0 0; }

/* ══ Explore redesign — the lit gallery wall (art front & centre) ══ */

/* Band 1 — editorial header + demoted energy controls */
.explore-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem; }
.explore-heading { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; }
.explore-kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 800; color: var(--accent); }
.explore-count { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 0.95; color: var(--text); }
.explore-controls { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.explore-battery { display: flex; flex-direction: column; gap: 0.25rem; }
.explore-battery .energy-bar { width: 240px; }
.explore-battery .energy-label { font-size: 0.78rem; }
.explore-pull-btn { font-family: var(--font-display); font-weight: 800; }
.explore-pull-btn:active { transform: scale(0.96); transition: transform 0.08s; }
/* big wide Pull button docked at the bottom of the viewport */
.explore-pull-dock { position: sticky; bottom: clamp(0.6rem, 2.5vw, 1.1rem); z-index: 20; display: flex; justify-content: center; pointer-events: none; margin-top: 0.3rem; }
.explore-pull-dock .explore-pull-btn { pointer-events: auto; width: min(560px, 100%); padding: 0.95rem 1.6rem; font-size: 1.15rem; border-radius: 999px; box-shadow: var(--shadow-lift); }
.energy-bar.draining .energy-seg-full { animation: exDrain 0.42s ease-out; }
@keyframes exDrain { from { filter: brightness(1.7); } to { filter: none; } }

/* Band 2 — hero stage: the newest pull, art large, glowing in its own colours */
.explore-hero { display: grid; place-items: center; }
.explore-hero-slot { width: 100%; max-width: 640px; margin-inline: auto; }
.explore-hero-stage { position: relative; isolation: isolate; display: grid; place-items: center; padding: clamp(0.6rem, 3vw, 1.4rem); border-radius: var(--radius); animation: heroBreathe 6s ease-in-out infinite; }
@keyframes heroBreathe {
  0%, 100% { box-shadow: 0 6px 24px color-mix(in srgb, var(--tier-color) 14%, transparent); }
  50% { box-shadow: 0 12px 42px color-mix(in srgb, var(--tier-color) 28%, transparent); }
}
.explore-hero-stage.hero-pop { animation: heroBreathe 6s ease-in-out infinite, heroPop 0.9s ease-out; }
@keyframes heroPop { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier-color) 70%, transparent); } to { box-shadow: 0 0 0 46px transparent; } }
/* ambient colour aura — blurred duplicate of the SAME hotlinked image (CORS-safe, no canvas) */
.explore-aura { position: absolute; inset: -8%; z-index: 0; width: 116%; height: 116%; object-fit: cover; filter: blur(36px) saturate(1.45); opacity: 0.5; transform: scale(1.08); border-radius: 42%; pointer-events: none; }
[data-theme="dark"] .explore-aura { opacity: 0.4; }
.explore-hero-stage > .post-layout { position: relative; z-index: 1; }
/* lift the inherited image cap so the hero art shows large at true aspect */
.explore-hero .uni-frame .post-image { max-height: min(72vh, 640px); }
/* empty / first-pull state */
.explore-hero-empty { display: grid; place-items: center; gap: 0.55rem; text-align: center; padding: clamp(2rem, 8vw, 4rem) 1.5rem; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg-surface); width: 100%; }
.explore-hero-empty-orb { font-size: 2.6rem; animation: explore-bob 1.6s ease-in-out infinite; }
.explore-hero-empty-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--text); }
.explore-hero-empty-sub { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }

/* Band 3 — the collection wall: CSS multi-column masonry, uncropped art */
.explore-wall-status { text-align: center; color: var(--text-secondary); margin: 0; }
.explore-wall { columns: 2; column-gap: clamp(0.6rem, 2vw, 1rem); }
@media (min-width: 640px) { .explore-wall { columns: 3; } }
@media (min-width: 1000px) { .explore-wall { columns: 4; } }
.explore-wall.is-sparse { columns: 1; max-width: min(520px, 92vw); margin-inline: auto; }
.explore-cell {
  --tilt: 0deg; --i: 0;
  break-inside: avoid; margin-bottom: clamp(0.6rem, 2vw, 1rem);
  position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  background: var(--bg-surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-color) 55%, transparent),
              0 6px 16px color-mix(in srgb, var(--tier-color) 20%, transparent), var(--shadow);
  opacity: 0; transform: translateY(16px) rotate(var(--tilt));
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  transition-delay: calc(var(--i) * 40ms);
}
.explore-cell.is-in { opacity: 1; transform: translateY(0) rotate(var(--tilt)); }
.explore-cell:nth-child(4n+1) { --tilt: -1deg; }
.explore-cell:nth-child(4n+3) { --tilt: 1deg; }
@media (hover: hover) {
  .explore-cell:hover {
    transform: translateY(-5px) rotate(0deg) scale(1.02); z-index: 3;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    box-shadow: 0 0 0 2px var(--tier-color),
                0 14px 30px color-mix(in srgb, var(--tier-color) 34%, transparent), var(--shadow-lift);
  }
}
.explore-shot { position: relative; display: block; line-height: 0; }
.explore-thumb { width: 100%; height: auto; display: block; }
.explore-shot.is-loading { min-height: 150px; background: linear-gradient(100deg, var(--bg-surface) 30%, var(--accent-soft) 50%, var(--bg-surface) 70%); background-size: 200% 100%; animation: exShimmer 1.2s linear infinite; }
.explore-shot.is-loading .explore-thumb { opacity: 0; }
@keyframes exShimmer { to { background-position: -200% 0; } }
/* persistent tiny rarity pip so the wall stays legible at rest */
.cell-pip { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2; font: 800 0.6rem/1 var(--font-display); letter-spacing: 0.03em; color: #fff; background: var(--tier-color); padding: 0.18rem 0.4rem; border-radius: 999px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35); pointer-events: none; }
/* metadata + Feature hide into a theme-safe bottom scrim until hover/focus (shown on touch) */
.cell-meta {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 45%, transparent) 55%, transparent);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease;
}
.explore-cell:hover .cell-meta, .explore-cell:focus-within .cell-meta { opacity: 1; transform: none; }
@media (hover: none) { .cell-meta { opacity: 1; transform: none; } }
.cell-ep { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.cell-tier { font: 800 0.72rem var(--font-display); color: var(--tier-color); }
.cell-meta .explore-feature-btn { margin: 0 0 0 auto; padding: 0.05rem 0.4rem; font-size: 1rem; line-height: 1; }
.cell-meta .explore-feature-btn.is-featured { color: var(--accent); border-color: var(--accent); }

/* Band 4 — tag map, collapsed out of the way */
.explore-graph-details { border-top: 1px solid var(--border); padding-top: 0.8rem; }
.explore-graph-summary { cursor: pointer; font-family: var(--font-display); font-weight: 800; color: var(--text); list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0; }
.explore-graph-summary::-webkit-details-marker { display: none; }
.explore-graph-summary::before { content: "▸"; color: var(--accent); transition: transform 0.2s; }
.explore-graph-details[open] .explore-graph-summary::before { transform: rotate(90deg); }
.explore-graph-details > div { margin-top: 0.6rem; }

@media (prefers-reduced-motion: reduce) {
  .explore-cell { opacity: 1; transform: none; transition: none; }
  .explore-cell:nth-child(4n+1), .explore-cell:nth-child(4n+3) { --tilt: 0deg; }
  .explore-hero-stage, .explore-hero-stage.hero-pop, .explore-hero-empty-orb, .energy-bar.draining .energy-seg-full { animation: none; }
}

/* Deep tag analytics panel */
.explore-analytics { display: flex; flex-direction: column; gap: 1.3rem; margin-top: 0.4rem; }
.an-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; }
.an-tile { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; }
.an-tile-val { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.an-tile-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-top: 0.25rem; }
.an-tile-sub { font-size: 0.72rem; color: var(--accent-deep); font-weight: 700; }
.an-section-title { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--text); margin: 0 0 0.4rem; }
.an-bars { display: flex; flex-direction: column; gap: 0.32rem; }
.an-bar { display: grid; grid-template-columns: minmax(6.5rem, 11rem) 1fr 2rem; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.an-bar-label { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.an-bar-track { height: 0.85rem; background: var(--border-light); border-radius: 999px; overflow: hidden; }
.an-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.an-bar-count { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.an-legend { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.5rem; }
.an-legend-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-secondary); }
.an-legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 999px; display: inline-block; }
.an-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.an-chip { font-size: 0.78rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); }
.an-chip b { color: var(--text-secondary); font-weight: 700; margin-left: 0.28rem; }

/* Insights page: data-dense, so it uses far more of the screen than the gallery.
   The shared #main-content caps at 960px, so widen it for this page specifically. */
#main-content.insights-main { max-width: min(1720px, 96vw); }
#insights-root { max-width: none; }
.insights-cols { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.insights-col { min-width: 0; }
.insights-col-title { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text); margin: 0 0 0.6rem; }
@media (min-width: 920px) {
  /* two panes: scrolling analytics on the left, a big sticky tag map on the right */
  .insights-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .insights-cols > .insights-col:last-child { position: sticky; top: 3.75rem; align-self: start; } /* clear the sticky topbar */
  .insights-cols > .insights-col:last-child .explore-graph-svg { height: min(calc(100vh - 5.5rem), 720px); }
}
/* extra analytics detail */
.an-note { margin: 0 0 0.4rem; font-size: 0.75rem; color: var(--text-secondary); }
.an-stack { display: flex; height: 1.15rem; border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.an-stack-seg { height: 100%; min-width: 2px; }

/* Loading placeholder: holographic ring spinner + shimmer skeleton masonry */
.explore-loading { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; width: 100%; }
.explore-loading-head { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.2rem 0 0.4rem; }
.explore-loading-orb { width: 3rem; height: 3rem; border-radius: 999px; background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #47e0a0, #4facfe, #b06ab3, #ff5f6d); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); animation: explore-spin 0.9s linear infinite; }
.explore-loading-label { margin: 0; font-family: var(--font-display); font-weight: 800; color: var(--text); animation: exPulse 1.4s ease-in-out infinite; }
@keyframes exPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.explore-loading-grid { columns: 2; column-gap: clamp(0.6rem, 2vw, 1rem); width: 100%; }
@media (min-width: 640px) { .explore-loading-grid { columns: 3; } }
@media (min-width: 1000px) { .explore-loading-grid { columns: 4; } }
.explore-loading-cell { break-inside: avoid; margin-bottom: clamp(0.6rem, 2vw, 1rem); border-radius: var(--radius-sm); background: linear-gradient(100deg, var(--bg-surface) 30%, var(--accent-soft) 50%, var(--bg-surface) 70%); background-size: 200% 100%; animation: exShimmer 1.3s linear infinite; }
@media (prefers-reduced-motion: reduce) { .explore-loading-orb, .explore-loading-label, .explore-loading-cell { animation: none; } }
.insights-filterbar { position: sticky; top: 0.5rem; z-index: 15; display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.5rem 0.5rem 0.9rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: var(--shadow); }
.insights-filter-label { font-weight: 700; color: var(--text); }
.insights-filterbar .btn { margin-left: auto; }
.insights-gallery { columns: 3; column-gap: 0.6rem; }
@media (min-width: 700px) { .insights-gallery { columns: 4; } }
@media (min-width: 1000px) { .insights-gallery { columns: 5; } }
.insights-gcell { break-inside: avoid; margin-bottom: 0.6rem; position: relative; display: block; cursor: pointer; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier-color) 55%, transparent), var(--shadow); }
.insights-gcell:hover { box-shadow: 0 0 0 2px var(--tier-color), var(--shadow-lift); }
.insights-gcell .explore-thumb { width: 100%; height: auto; display: block; }

/* interactive analytics bars + chips */
.an-bar-btn { border: none; background: none; text-align: left; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.an-bar-btn:hover .an-bar-track { outline: 2px solid var(--accent-soft); }
.an-bar-btn.is-active .an-bar-label { color: var(--accent-deep); font-weight: 800; }
.an-bar-btn.is-active .an-bar-track { outline: 2px solid var(--accent); }
.an-chip-btn { cursor: pointer; }
.an-chip-btn:hover { background: var(--accent-soft); }
.an-chip-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.an-chip-btn.is-active b { color: rgba(255, 255, 255, 0.8); }

/* tag map highlight dimming (Insights) */
.explore-graph-svg .graph-node, .explore-graph-svg line { transition: opacity 0.25s ease; }
.explore-graph-svg .graph-node.dim, .explore-graph-svg line.dim { opacity: 0.12; }

/* ===== Timer ===== */
.daily-timer {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
  padding: 0.6rem;
}
.countdown { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 800; color: var(--accent-deep); }

/* ===== Overlay ===== */
.overlay {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: flex-start;   /* flex-start + box margin:auto → centers when it fits */
  justify-content: center;
  overflow: hidden;          /* the BOX scrolls internally; overlay stays put so the scrim covers cleanly */
  overscroll-behavior: none; /* never chain a modal boundary gesture to the page */
  /* NO background / backdrop-filter here: iOS 26 Safari's Liquid Glass toolbar samples
     fixed/sticky elements' bg + backdrop-filter to tint its translucent pill — a dark
     fixed overlay paints an opaque bar around it. Keep this fixed element transparent;
     the dim+blur lives on ::before (position:absolute), which the tint scan ignores. */
  z-index: 1000;
  padding: 1rem;
}
.overlay.active { display: flex; }
.overlay-box {
  position: relative;   /* above the ::before scrim */
  z-index: 1;
  max-height: 100%;     /* fit the viewport; tall content scrolls inside the box (overlay no longer scrolls) */
  overflow-y: auto;
  padding: 1.75rem;
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-lift);
  margin: auto; /* vertically centers within the overlay when it fits */
}
.overlay-box h2 { font-size: 1.3rem; }
.overlay-box p { font-size: 0.9rem; color: var(--text-secondary); }
.account-number {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 0.6rem;
  background: var(--accent-soft);
  border: 2px dashed var(--accent);
  border-radius: var(--radius-sm);
  word-break: break-all;
}
.show-once-form { display: flex; flex-direction: column; gap: 0.6rem; }
.show-once-actions { display: flex; gap: 0.4rem; }

/* ===== Unified card — art + rarity border + corner chip + credit strip ===== */
/* the layout column: card centred, subtitle tight under it, tag labels below */
.post-layout-uni { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.post-layout-uni .tag-list { width: 100%; margin-top: 0.4rem; }
.uni-card {
  --tier-color: var(--tier-r);
  position: relative;
  display: inline-block;
  vertical-align: top;   /* with the wrapper's line-height 0 → wrapper box == card box */
  line-height: 1.55;     /* restore normal text line-height inside (wrapper zeroes it) */
  padding: 24px 9px 30px;    /* tier border: top hosts the mark, bottom the pull date + credits */
  border-radius: 14px;
  background: #fffdf7;       /* R / SR: white */
  max-width: 100%;           /* the wrapper carries the 560px cap */
  isolation: isolate;        /* holo blends stay inside the card */
  overflow: hidden;
  box-shadow: var(--shadow-lift); /* on the card itself — tilts with it natively */
}
.uni-card.uni-ssr {          /* gold foil border */
  background: repeating-linear-gradient(125deg,
    #9c6b06 0%, #ffd76a 7%, #fff7d4 13%, #ffc23d 19%, #9c6b06 26%);
}
.uni-card.uni-ur {           /* prismatic border */
  background: repeating-linear-gradient(125deg,
    #ff5d6c 0%, #ffd34e 8%, #5dff95 16%, #4ed8ff 24%, #9b6bff 32%, #ff6bd6 40%, #ff5d6c 48%);
}
.uni-frame { position: relative; border-radius: 8px; overflow: hidden; line-height: 0; }
.uni-frame .post-image { border-radius: 8px; max-height: 62vh; width: auto; max-width: 100%; }
/* corner chip — squarish: tier / stars / EP · standing, centred. pointer-events none:
   hovering it counts as hovering the art (fades the chrome); nothing in it is clickable */
.uni-chip {
  position: absolute; top: 33px; left: 18px; z-index: 9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.06rem;
  min-width: 4.6rem; min-height: 4.6rem;  /* a proper square tile */
  padding: 0.4rem 0.55rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tier-color) 35%, rgba(15, 10, 6, 0.55));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tier-color) 65%, transparent);
  backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
  pointer-events: none;
  text-align: center;
  line-height: 1.05;
}
.uni-tier {
  font-family: var(--font-display); font-weight: 800; font-size: 1.7rem;  /* the headline */
  color: var(--tier-color); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.uni-stars { color: var(--tier-color); font-size: 0.95rem; letter-spacing: 0.1em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.uni-score { font-size: 0.72rem; font-weight: 800; color: #fff; opacity: 0.95; font-variant-numeric: tabular-nums; }
/* project mark printed on the TOP border */
.uni-topstrip {
  position: absolute; left: 11px; right: 11px; top: 5px; z-index: 9; height: 16px;
  display: flex; align-items: center;
  font-size: 0.66rem; font-weight: 800; line-height: 1;
  color: rgba(125, 100, 65, 0.92);
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.uni-card.uni-ssr .uni-topstrip, .uni-card.uni-ur .uni-topstrip { color: rgba(40, 25, 5, 0.85); }
/* pull date + credits printed ON the bottom border itself (no bar) */
.uni-strip {
  position: absolute; left: 11px; right: 11px; bottom: 7px; z-index: 9; height: 16px;
  display: flex; align-items: center; gap: 0.6rem;
  background: none;
  font-size: 0.66rem; font-weight: 800; line-height: 1;
  color: rgba(125, 100, 65, 0.92);
  transition: opacity 0.25s ease;
}
.uni-mark { flex: none; }
.uni-owner { flex: 1 1 auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uni-credits { flex: 1 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uni-card.uni-ssr .uni-strip, .uni-card.uni-ur .uni-strip { color: rgba(40, 25, 5, 0.85); }
/* subtitle under the card (outside it): posted date · source link */
.uni-sub { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.uni-sub a { color: var(--accent-deep); text-decoration: underline; }
/* the static hit-area wrapper — pointer listeners live here so the hitbox never
   tilts with the card (tilted hit-testing oscillates at the top/bottom edges) */
.uni-tilt {
  display: inline-block;
  position: relative;
  /* the 560px cap lives HERE (a hard px value survives intrinsic sizing — a
     percentage cap on the card alone let wide-source images blow the wrapper out
     past the card, causing stray shadows and horizontal scrollbars) */
  max-width: min(560px, 100%);
  line-height: 0; /* no baseline descender gap — wrapper box == card box */
  /* pan-y: vertical drags stay scrollable THROUGH the card (safest — a card that owns
     all touches traps scrolling). Trade-off: a tilt drag that drifts vertical can be
     claimed by the browser mid-gesture. */
  touch-action: pan-y;
}
/* chrome fades when interacting with the ART (hover/tilt/touch) unless PINNED by a
   click/tap — the border still tells the tier with everything faded */
.uni-strip { pointer-events: none; } /* nothing clickable inside — the band never eats hovers/clicks */
.uni-frame { cursor: pointer; }      /* clicking toggles/pins the overlay */
/* DESKTOP ONLY: hover/tilt fades the chrome. On touch, iOS's sticky :hover latched
   after the first tap and force-hid the chrome — killing the tap toggle entirely.
   Touch devices: dragging/tilting never fades the overlay; tapping toggles it. */
@media (hover: hover) {
  .uni-tilt:hover .uni-card:not(.chrome-pin):not(.revealing) .uni-chip,
  .uni-card.card-active:not(.chrome-pin):not(.revealing) .uni-chip { opacity: 0; }
}
.uni-card.chrome-off:not(.revealing) .uni-chip { opacity: 0; }
/* held until the payoff */
.uni-chip.result-hidden, .uni-strip.result-hidden { opacity: 0; visibility: hidden; }
.uni-pct.result-hidden { visibility: hidden; }
/* reveal beats reused from the old result card */
.uni-chip.meta-pop { animation: metaPop 0.45s cubic-bezier(.2,.8,.2,1); }
.uni-chip.ep-flash { animation: epPop 0.9s cubic-bezier(.2,.8,.2,1); }
.uni-card.finale-ssr { animation: finaleGlow 1.1s ease-out; --finale: var(--tier-ssr); }
.uni-card.finale-ur { animation: finaleGlow 1.4s ease-out, finaleShake 0.5s ease-in-out; --finale: var(--tier-ur); }
/* pull date under the entry-preview card */
.pulled-date { font-size: 0.74rem; font-weight: 700; color: var(--text-muted); }

/* ===== 3D card inspector (double-tap a sticker) ===== */
.cardview {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 7, 4, 0.84);
  touch-action: none; cursor: grab;
  /* nothing selectable — drags must spin the card, not select the image/text */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.cv-stage { perspective: 1200px; }
.cv-obj { position: relative; display: inline-block; transform-style: preserve-3d; will-change: transform; }
.cv-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* iOS Safari only honours backface-visibility when the face itself has a transform —
   without rotateY(0) the flipped card shows a mirrored front instead of the back */
.cv-front { position: relative; transform: rotateY(0deg); }
.cardview .uni-card { max-width: min(82vw, 440px); }
.cardview .uni-frame .post-image { max-height: 64vh; }
.cv-back {
  position: absolute; inset: 0; transform: rotateY(180deg); display: flex;
  border-radius: 14px; overflow: hidden; /* pure pattern — no border frame */
}
.cv-back-inner {
  flex: 1 1 auto; border-radius: 14px;
  /* woven warm-paper back — one consistent design for every card */
  background:
    repeating-linear-gradient(45deg, rgba(226, 136, 74, 0.09) 0 12px, transparent 12px 24px),
    repeating-linear-gradient(-45deg, rgba(226, 136, 74, 0.07) 0 12px, transparent 12px 24px),
    linear-gradient(#f4ebda, #e9dbc0);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, #e2884a 55%, transparent),
    inset 0 0 0 11px rgba(120, 90, 50, 0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem;
}
.cv-back-medal {
  width: 118px; height: 118px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3.4rem; line-height: 1;
  color: #c96b2e;
  border: 2.5px solid rgba(201, 107, 46, 0.6);
  background: radial-gradient(circle, rgba(255, 253, 247, 0.85), rgba(255, 253, 247, 0.35));
  box-shadow: 0 0 20px rgba(226, 136, 74, 0.3);
}
.cv-back-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #b0602a; }
.cv-back-sub { font-size: 0.72rem; font-weight: 700; color: rgba(110, 85, 55, 0.85); }

/* ===== Scrapboard wall (communal stickers) ===== */
/* Main page: a fixed random crop of the 4000×2250 wall behind the panels. The layer
   itself never takes pointer events — only stickers do (hover attribution). */
.wall-crop { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.wall-layer { position: absolute; width: 4000px; height: 2250px; }
.wall-sticker {
  position: absolute;
  width: 150px;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  /* drop-shadow (not box-shadow) follows the die-cut silhouette */
  filter: drop-shadow(0 3px 7px rgba(50, 34, 18, 0.35));
  pointer-events: auto;
}
/* the die-cut border IS the tier, matching the unified card:
   R/SR white, SSR gold foil, UR prismatic */
.sticker-cut {
  position: relative;
  background: #fffdf7;
  padding: 6px;
  border-radius: 10px;
}
.sticker-ssr .sticker-cut {
  background: repeating-linear-gradient(125deg,
    #9c6b06 0%, #ffd76a 7%, #fff7d4 13%, #ffc23d 19%, #9c6b06 26%);
}
.sticker-ur .sticker-cut {
  background: repeating-linear-gradient(125deg,
    #ff5d6c 0%, #ffd34e 8%, #5dff95 16%, #4ed8ff 24%, #9b6bff 32%, #ff6bd6 40%, #ff5d6c 48%);
}
.sticker-cut img { width: 100%; height: auto; display: block; border-radius: 6px; } /* full image, no crop */
/* rarity finish — the foil coats the whole die-cut, white border included */
.sticker-foil { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; }
/* foil gradients EXACTLY match the card's holo layers (same stops/blends) */
.sticker-sr .sticker-foil {
  background: repeating-linear-gradient(125deg,
    rgba(150,180,220,0.55) 0%, rgba(220,235,255,0.9) 8%, #ffffff 13%, rgba(200,225,255,0.85) 19%, rgba(150,180,220,0.55) 27%);
  mix-blend-mode: soft-light; opacity: 0.55;
}
.sticker-ssr .sticker-foil {
  background: repeating-linear-gradient(125deg,
    #9c6b06 0%, #ffd76a 7%, #fff7d4 13%, #ffc23d 19%, #9c6b06 26%);
  mix-blend-mode: screen; opacity: 0.34;
}
.sticker-ur .sticker-foil {
  background: repeating-linear-gradient(125deg,
    #ff5d6c 0%, #ffd34e 8%, #5dff95 16%, #4ed8ff 24%, #9b6bff 32%, #ff6bd6 40%, #ff5d6c 48%);
  mix-blend-mode: screen; opacity: 0.32;
}
/* mini rarity chip — the sticker is the unified card at wall scale */
.sticker-chip {
  position: absolute; top: 10px; left: 10px; z-index: 6;
  display: flex; flex-direction: column; align-items: center;
  padding: 2px 7px; border-radius: 7px;
  /* IDENTICAL recipe to .uni-chip so every chip reads the same */
  background: color-mix(in srgb, var(--tier-color) 35%, rgba(15, 10, 6, 0.55));
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--tier-color) 65%, transparent);
  backdrop-filter: blur(4px);
  color: #fff; text-align: center; line-height: 1.2;
  pointer-events: none;
  opacity: 0;                      /* the border already tells the tier — */
  transition: opacity 0.15s ease;  /* the chip appears on hover only */
}
.wall-sticker:hover .sticker-chip { opacity: 1; }
.sticker-chip .sc-tier { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; }
.sticker-chip .sc-stars { font-size: 0.48rem; letter-spacing: 0.08em; }
.sticker-chip .sc-score { font-size: 0.5rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* rotation anchor shown in manual mode — drag it around the sticker's centre */
.manual-rotate {
  position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fff; box-shadow: var(--shadow);
  cursor: grab; z-index: 9; touch-action: none;
}
.manual-rotate::after {
  content: "⟳"; color: #fff; font-size: 14px; font-weight: 800; line-height: 22px;
  display: block; text-align: center;
}
.manual-rotate:active { cursor: grabbing; }
/* a little stem connecting the knob to the sticker */
.manual-rotate::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 10px;
  background: var(--accent); transform: translateX(-50%);
}
/* manual-mode exit button — bottom-right of the viewport */
.manual-exit {
  position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 999; font-weight: 800;
}
/* manual-mode beacon: the viewport edges pulse while adjusting */
.manual-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 998;
  box-shadow: inset 0 0 70px 14px rgba(240, 168, 72, 0.45); /* warm amber — fits the palette */
  animation: manualPulse 1.5s ease-in-out infinite;
}
@keyframes manualPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
/* marching-ants edge around the sticker being adjusted */
.sticker-manual::after {
  content: ""; position: absolute; inset: -6px; border-radius: 14px; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, #ffbf5e 0 7px, transparent 7px 14px),
    repeating-linear-gradient(90deg, #ffbf5e 0 7px, transparent 7px 14px),
    repeating-linear-gradient(0deg, #ffbf5e 0 7px, transparent 7px 14px),
    repeating-linear-gradient(0deg, #ffbf5e 0 7px, transparent 7px 14px);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: 0 0, 14px 100%, 0 14px, 100% 0;
  background-repeat: no-repeat;
  animation: ants 0.5s linear infinite;
}
@keyframes ants { to { background-position: 14px 0, 0 100%, 0 0, 100% 14px; } }
/* scale anchor — bottom-right corner, blue (rotate stays orange up top) */
.manual-scale {
  position: absolute; right: -13px; bottom: -13px; width: 26px; height: 26px;
  border-radius: 50%;
  background: #e0a23c; border: 2px solid #fff; box-shadow: var(--shadow); /* golden = scale; orange ⟳ = rotate */
  cursor: nwse-resize; z-index: 9; touch-action: none;
}
.manual-scale::after {
  content: "↘"; color: #fff; font-size: 14px; font-weight: 800; line-height: 22px; /* points the pull direction */
  display: block; text-align: center;
}
/* manual mode — semi-opaque while adjusting; tip hidden so it doesn't chase the drag */
.sticker-manual { opacity: 0.65; z-index: 7; touch-action: none; cursor: grabbing; }
.sticker-manual .sticker-tip { display: none; }
/* hover: lift above neighbours + attribution tip (art credits + 📌 placer) */
.wall-sticker:hover { z-index: 6; }
.sticker-tip {
  position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%) translateY(6px);
  width: max-content; max-width: 230px;
  padding: 0.45rem 0.6rem;
  background: var(--bg-surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lift);
  font-size: 0.72rem; font-weight: 700; line-height: 1.5; text-align: left;
  white-space: pre-line;
  opacity: 0; visibility: hidden; transition: opacity 0.15s ease;
  pointer-events: none;
}
.wall-sticker:hover .sticker-tip { opacity: 1; visibility: visible; }
.sticker-tip .tip-sub { display: block; font-size: 0.6rem; font-weight: 600; color: var(--text-muted); margin-top: 2px; }

/* the peel flap — the sticker's underside folded back over it during apply/remove.
   Sibling of .sticker-cut (whose clip-path would otherwise clip it); the triangle
   itself is an animated clip-path polygon set from JS. */
/* border-radius matches .sticker-cut: the flap's clip-path shows the INTERSECTION of
   the polygon and the rounded box, so the sticker's rounded corners survive the peel */
.sticker-flap { position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: 10px; }

/* sticker popover — a small picker anchored at the tap/click point with a caret
   pointing back at it. Three rows visible; the rest scroll. */
.sticker-pop-catch { position: fixed; inset: 0; z-index: 1000; }
.sticker-pop {
  position: fixed; z-index: 1001; width: 190px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 0.45rem;
}
.sticker-pop::before {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--bg-surface);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.sticker-pop.pop-below::before { top: -6.5px; }
.sticker-pop.pop-above::before { bottom: -6.5px; transform: rotate(225deg); }
.sticker-pop.pop-anchor-left::before { left: 16px; }
.sticker-pop.pop-anchor-right::before { right: 16px; }
.sticker-pop h3 { font-size: 0.85rem; margin: 0.1rem 0.2rem 0.35rem; }
.pop-list {
  display: flex; flex-direction: column; gap: 0.3rem;
  max-height: 194px;   /* ≈ three rows — more available with scroll */
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
}
.pop-list::-webkit-scrollbar { display: none; }
.pop-row {
  display: flex; align-items: center; gap: 0.5rem; text-align: left; font: inherit;
  border: 1px solid var(--border-light); border-radius: var(--radius-sm);
  background: transparent; color: var(--text); padding: 0.3rem; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.pop-row:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pop-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; }
.pop-cap { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); }
.pop-empty { font-size: 0.78rem; color: var(--text-secondary); padding: 0.3rem; }
/* your own stickers: ✕ peel-off on hover */
.sticker-peel {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px;
  border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-surface); color: var(--text-secondary);
  font-size: 0.7rem; font-weight: 800; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity 0.15s ease; z-index: 7;
}
.wall-sticker:hover .sticker-peel { opacity: 1; }
.sticker-peel:hover { color: var(--accent-deep); border-color: var(--accent); }

/* public ⇄ private board selector (signed-in only), pinned bottom-centre */
.board-switch {
  position: fixed; left: 50%; bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 30;
  display: flex; gap: 3px; padding: 4px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 999px; box-shadow: var(--shadow-lift);
}
.board-switch-btn {
  font: inherit; font-size: 0.8rem; font-weight: 800;
  padding: 0.3rem 0.85rem; border: none; border-radius: 999px;
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.board-switch-btn.active { background: var(--accent); color: #fff; }

/* /scrapboard page — the full wall, natively scrollable both axes */
body.scrapboard-page {
  height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  /* drags pan/adjust — nothing on the board should ever text/image-select */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* zoom/pan viewport: the board is transform-positioned inside — wheel zooms at the
   cursor, drag pans, pinch zooms. touch-action none = we own every gesture. */
.board-scroll {
  flex: 1 1 auto; overflow: hidden; overscroll-behavior: none; position: relative;
  touch-action: none;
  cursor: grab;
}
.board-scroll.panning { cursor: grabbing; }
.board-scroll .wall-sticker { touch-action: none; } /* sticker touches pan/pinch too */
/* in-flow board (not the fixed crop). Its OWN dot grid — brighter than the page's and
   attached to the board, so the dots pan with it and you can orient while scrolling. */
.wall-board {
  position: relative;
  transform-origin: 0 0;
  background-image: radial-gradient(rgba(120, 90, 50, 0.3) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
}
[data-theme="dark"] .wall-board {
  background-image: radial-gradient(rgba(255, 240, 210, 0.24) 1.3px, transparent 1.3px);
}
/* the main page's background wall gets the same brighter grid (static crop) */
.wall-crop {
  background-image: radial-gradient(rgba(120, 90, 50, 0.22) 1.3px, transparent 1.3px);
  background-size: 22px 22px;
}
[data-theme="dark"] .wall-crop {
  background-image: radial-gradient(rgba(255, 240, 210, 0.16) 1.3px, transparent 1.3px);
}
.board-empty {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%);
  color: var(--text-secondary); font-weight: 700;
  pointer-events: none; /* never blocks placing a sticker underneath it */
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .post-image, .reveal-canvas, .post-meta, .btn, .history-cell { transition: none; }
  .tag-pop, .meta-pop, .ep-flash, .skip-hint, .lb-row-new, .lb-row-ur .lb-tier,
  .tag-item.rar-legendary, .ep-badge.rar-legendary,
  .post-image-frame.finale-ssr, .post-image-frame.finale-ur,
  .roll-start-btn:hover, .roll-start-btn.rolling, .roll-again-btn, .roll-again-wrap,
  .uni-chip.meta-pop, .uni-chip.ep-flash, .uni-card.finale-ssr, .uni-card.finale-ur,
  .manual-glow, .sticker-manual::after { animation: none; }
  .btn:hover, .history-cell:hover { transform: none; }
}

/* ===== Mobile (< 768px) ===== */
@media (max-width: 768px) {
  #main-content { padding: 0.75rem 0.5rem; }
  .post-layout { grid-template-columns: 1fr; }
  .post-image { max-height: 50vh; }
  .uni-frame .post-image { max-height: 52vh; }
  .history-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar-title { font-size: 1.15rem; }
  /* compact topbar: tighter gaps/padding + slimmer buttons so the 📖 scrapboard link
     and theme toggle don't crowd the handle + sign-in on small screens */
  .topbar { gap: 0.35rem; padding: 0.5rem 0.6rem; }
  .topbar-nav-link { padding: 0.24rem 0.35rem; font-size: 0.78rem; }
  .topbar .btn-icon { padding: 0.3rem 0.45rem; }
  .topbar .btn-sm { padding: 0.28rem 0.5rem; }
  .handle { font-size: 0.8rem; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .overlay-box { margin: 1rem; padding: 1.4rem; }
  .entry-box .post-image { max-height: 42vh; }
  /* leaderboard + roll-preview modals: extend toward the top/side edges, with a
     comfortable bottom gap (env safe-area) so the box isn't flush against the bar /
     home indicator. Box uses max-height:100% so it respects the asymmetric padding. */
  #leaderboard-overlay, #entry-overlay { padding: 0.8rem 0.4rem; }  /* even top/bottom; 100dvh already excludes the bar */
  .overlay-box.leaderboard-box, .overlay-box.entry-box {
    margin: 0; width: calc(100vw - 0.8rem); max-width: none; max-height: 100%;
  }
  .overlay-box.leaderboard-box { padding: 0.85rem 0.55rem; }
  .leaderboard-box .lb-body { padding: 0.3rem; }
  .lb-row { padding: 0.5rem 0.45rem; column-gap: 0.45rem; }
}

@media (max-width: 480px) {
  .explore-page .history-grid { grid-template-columns: 1fr; }
  .explore-actions .btn-sm {
    flex: 1 1 0;
    justify-content: center;
    min-height: 40px;
  }
}