/* ═══════════════════════════════════════
   HEARTHQUEST v2 — ALL STYLES
   Extracted from hearthquest.html
   DO NOT add <style> tags — this is a .css file
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   HEARTHQUEST v2 — SKETCHBOOK UI
   Every screen is a page in a family journal.
   Themes are different notebooks.
═══════════════════════════════════════ */

/* ── BASE NOTEBOOK (Parchment / Medieval default) ── */
:root {
  /* Paper */
  --paper:        #f5f0e8;
  --paper2:       #ede8dc;
  --paper-dark:   #e0d8c8;
  --paper-edge:   #d4c9b0;

  /* Ink */
  --ink:          #3d2e1a;
  --ink2:         #5a4a35;
  --ink-light:    #8a7560;
  --ink-faint:    rgba(61,46,26,.12);

  /* Accent — red wax seal */
  --accent:       #9b2a1a;
  --accent2:      #c49820;
  --accent-soft:  rgba(155,42,26,.12);

  /* Status */
  --success:      #6b8f5e;
  --warn:         #c4a35a;
  --danger:       #c0392b;

  /* Fonts — Caveat Brush for display titles, Caveat for handwritten notes,
     Nunito for readable body copy, Reenie Beanie for tiny labels */
  --font-display: 'Caveat Brush', cursive;
  --font-hand:    'Caveat', cursive;
  --font-note:    'Nunito', sans-serif;
  --font-tag:     'Reenie Beanie', cursive;

  /* Card backgrounds — light themes: white-tinted, dark themes: white-tinted too but more opaque */
  --card-bg:      rgba(255,255,255,.45);
  --card-bg2:     rgba(255,255,255,.28);

  /* Sketch filter */
  --sketch-filter: url(#sk);

  /* Spacing */
  --page-pad:     22px;
  --card-radius:  4px;
  --gap:          12px;
}

/* ═══════════════════════════════════════
   NOTEBOOK THEMES
   Rule: --ink must ALWAYS contrast clearly against --paper.
   Light paper themes: dark ink. Dark paper themes: light ink.
   --ink-faint used for card borders/backgrounds — must be visible
   on that theme's paper, so dark themes use rgba(255,255,255,x).
═══════════════════════════════════════ */

/* ── BLOCKY — graph paper, Pip's squared exercise book ── */
[data-theme="blocky"] {
  --paper:       #eceee8; --paper2: #e2e4dc; --paper-dark: #d4d8cc; --paper-edge: #b8bcac;
  --ink:         #2a2e20; --ink2: #464e36; --ink-light: #6a7258;
  --ink-faint:   rgba(42,46,32,.11);
  --accent:      #4a6a8a; --accent2: #8a6a2a; --accent-soft: rgba(74,106,138,.12);
  --success:     #4a7a40; --warn: #9a7820; --danger: #8a2820;
  --font-display:'Silkscreen', monospace;
  --font-hand:   'Silkscreen', monospace;
  --font-note:   'Silkscreen', monospace;
  --font-tag:    'Silkscreen', monospace;
  --card-radius: 0px;
}

/* ── ANIME — gel pen & pastel stickers ── */
[data-theme="anime"] {
  --paper:       #fff5f8; --paper2: #fde8ee; --paper-dark: #f8d8e4; --paper-edge: #f0c8d8;
  --ink:         #2e1020; --ink2: #5a3048; --ink-light: #8a6078;
  --ink-faint:   rgba(46,16,32,.11);
  --accent:      #d4607a; --accent2: #a060c0; --accent-soft: rgba(212,96,122,.12);
  --success:     #4a9460; --warn: #c09030; --danger: #c03050;
  --font-display:'Fredoka One', cursive;
  --font-hand:   'Nunito', sans-serif;
  --font-note:   'Nunito', sans-serif;
  --font-tag:    'Nunito', sans-serif;
}

/* ── ASTROLOGY — deep navy, gold & silver constellation journal ── */
[data-theme="astrology"] {
  --paper:       #0b0e22; --paper2: #111430; --paper-dark: #181c3c; --paper-edge: #242850;
  --ink:         #eee8ff; --ink2: #c8c0f0; --ink-light:  #9890c0;
  --ink-faint:   rgba(255,255,255,.18);
  --accent:      #c9a227; --accent2: #9b8ee0; --accent-soft: rgba(201,162,39,.15);
  --success:     #5aaa6a; --warn: #c9a227; --danger: #c05060;
  --font-display:'Cinzel', serif;
  --font-hand:   'Raleway', sans-serif;
  --font-note:   'Raleway', sans-serif;
  --font-tag:    'Raleway', sans-serif;
}

/* ── MUSHROOM — warm kraft paper, earthy brown ink ── */
[data-theme="mushroom"] {
  --paper:       #ede8d0; --paper2: #e2dabb; --paper-dark: #d4c9a0; --paper-edge: #b8a878;
  --ink:         #2a1e08; --ink2: #4a3418; --ink-light: #7a6040;
  --ink-faint:   rgba(42,30,8,.13);
  --accent:      #8b4513; --accent2: #5a7a2a; --accent-soft: rgba(139,69,19,.12);
  --success:     #5a7a35; --warn: #b07828; --danger: #a83020;
  --font-display:'Comfortaa', cursive;
  --font-hand:   'Comfortaa', cursive;
  --font-note:   'Nunito', sans-serif;
  --font-tag:    'Nunito', sans-serif;
  --card-radius: 14px;
}

/* ── OCEAN — sea-glass paper, deep navy ink ── */
[data-theme="ocean"] {
  --paper:       #e4f2f8; --paper2: #d0e8f4; --paper-dark: #bcdaec; --paper-edge: #a4ccde;
  --ink:         #082030; --ink2: #184050; --ink-light: #426880;
  --ink-faint:   rgba(8,32,48,.12);
  --accent:      #1a8ab4; --accent2: #0a9080; --accent-soft: rgba(26,138,180,.12);
  --success:     #3a8a5a; --warn: #9a8030; --danger: #b03030;
  --font-display:'Josefin Sans', sans-serif;
  --font-hand:   'Josefin Sans', sans-serif;
  --font-note:   'Nunito', sans-serif;
  --font-tag:    'Nunito', sans-serif;
}

/* ── WITCH — dark purple paper, lilac ink ── */
/* ── GALACTIC — near-black space, LCARS display aesthetic ── */
[data-theme="galactic"] {
  --paper:       #030306; --paper2: #07070e; --paper-dark: #0c0c1c; --paper-edge: #141428;
  --ink:         #dceeff; --ink2:  #a8c4f0; --ink-light: #6888b8;
  --ink-faint:   rgba(255,255,255,.09);
  --accent:      #d4a843;
  --accent2:     #9999cc;
  --accent-soft: rgba(212,168,67,.15);
  --success:     #40c080; --warn: #e0b030; --danger: #e04060;
  --font-display:'Orbitron', sans-serif;
  --font-hand:   'Exo 2', sans-serif;
  --font-note:   'Exo 2', sans-serif;
  --font-tag:    'Exo 2', sans-serif;
}

/* ── RETRO — terminal green on black, 8-bit RPG ── */
[data-theme="retro"] {
  --paper:       #050505; --paper2: #0a0a0a; --paper-dark: #111; --paper-edge: #1c1c1c;
  --ink:         #00ee3a; --ink2: #00dd36; --ink-light: #33ff66;
  --ink-faint:   rgba(0,238,58,.12);
  --accent:      #00ee3a; --accent2: #00ee3a; --accent-soft: rgba(0,238,58,.12);
  --success:     #00ee3a; --warn: #ddcc00; --danger: #ff2244;
  --font-display:'Courier New', monospace;
  --font-hand:   'Courier New', monospace;
  --font-note:   'Courier New', monospace;
  --font-tag:    'Courier New', monospace;
  --card-radius: 0px;
}

/* ── Dark theme card backgrounds ── */
[data-theme="astrology"],
[data-theme="galactic"],
[data-theme="retro"] {
  --card-bg:  rgba(255,255,255,.07);
  --card-bg2: rgba(255,255,255,.04);
}
/* Astrology needs stronger cards so planets/sun don't compete */
[data-theme="astrology"] {
  --card-bg:      rgba(10,12,40,.72);
  --card-bg2:     rgba(10,12,40,.55);
  --ink-faint:    rgba(255,255,255,.16);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 17px; } /* base rem scale — bumps everything up proportionally */
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-note);
  font-size: 1rem;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  transition: background .4s;
}

/* ═══════════════════════════════════════
   SKETCH SVG FILTER
═══════════════════════════════════════ */
#svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═══════════════════════════════════════
   APP SHELL
═══════════════════════════════════════ */
.app { display: flex; flex-direction: column; height: 100dvh; position: relative; }

/* ── Page wrapper (the notebook page) ── */
.page-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: transparent;
  position: relative;
  z-index: 1;
}
.page-wrap::-webkit-scrollbar { display: none; }

/* Paper grain texture overlay */
.page-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: .7;
}

/* Per-theme paper backgrounds — applied via ::after on page-wrap.
   Default/parchment: NO lines (just grain texture).
   Retro/Blocky: graph paper.
   Anime: faint dot grid (diary style).
   Astrology: tiny constellation dots on dark.
   Ocean: faint horizontal tide lines.
   Witch/Galactic: no lines — textured dark paper only.
   Safari/Mushroom: very faint warm ruled lines. */
.page-wrap::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* Default parchment — no lines */
  background-image: none;
}

/* ── RETRO: bright green graph paper ── */
[data-theme="retro"] .page-wrap::after {
  background-image:
    linear-gradient(rgba(0,255,65,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ── BLOCKY: darker graph paper, slightly larger grid ── */
[data-theme="blocky"] .page-wrap::after {
  background-image:
    linear-gradient(rgba(74,122,26,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,122,26,.18) 1px, transparent 1px),
    linear-gradient(rgba(74,122,26,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,122,26,.06) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px;
}

/* ── ANIME: soft pink dot grid — diary ── */
[data-theme="anime"] .page-wrap::after {
  background-image: radial-gradient(circle, rgba(212,96,122,.25) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ── ASTROLOGY: tiny star dots on dark ── */
[data-theme="astrology"] .page-wrap::after {
  background-image: radial-gradient(circle, rgba(201,162,39,.4) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* ── OCEAN: faint tide lines ── */
[data-theme="ocean"] .page-wrap::after {
  background-image: repeating-linear-gradient(
    transparent,
    transparent 23px,
    rgba(26,138,180,.09) 23px,
    rgba(26,138,180,.09) 24px
  );
}
/* Ocean depth gradient — light at surface, deep at bottom */
[data-theme="ocean"] #theme-bg {
  background: linear-gradient(
    180deg,
    #dff0f8 0%,
    #c8e4f2 20%,
    #a8cee6 45%,
    #7aaece 65%,
    #4a88b0 82%,
    #1e5a88 100%
  ) !important;
}

/* ── GALACTIC: no lines — dark paper speaks for itself ── */
[data-theme="galactic"] .page-wrap::after {
  background-image: none;
}

/* ── MUSHROOM: faint earthy ruled lines only — spores are DOM particles ── */
[data-theme="mushroom"] .page-wrap::after {
  background-image: repeating-linear-gradient(
    transparent, transparent 29px,
    rgba(90,122,53,.08) 29px, rgba(90,122,53,.08) 30px
  );
}

.screen {
  display: none;
  min-height: 100%;
  padding: 0 0 80px;
  position: relative;
  z-index: 1;
  animation: pageIn .25s ease;
}
.screen.active { display: block; }
#sc-deck-battle.active { display:flex !important; flex-direction:column; padding:0; }
.fullscreen {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
  background: var(--paper);
}
.fullscreen.active { display: flex; flex-direction: column; animation: pageIn .25s ease; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════
   SKETCHBOOK COMPONENTS
═══════════════════════════════════════ */

/* ── Section header (like a journal heading) ── */
.journal-section {
  padding: 14px var(--page-pad) 4px;
}
.journal-heading {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 1.5px solid var(--ink-faint);
  margin-bottom: 10px;
}
.journal-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ink-faint);
  margin-left: 4px;
}

/* ── Card (journal entry) ── */
.jcard {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  margin: 6px var(--page-pad) 14px; /* extra top margin — tape overhangs above */
  position: relative;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  box-shadow: 1px 2px 0 var(--paper-edge);
}

/* Each card slightly tilted like it was placed in by hand */
.jcard:nth-child(odd)  { transform: rotate(-.35deg); }
.jcard:nth-child(even) { transform: rotate(.25deg); }
.jcard:nth-child(3n)   { transform: rotate(-.15deg); }

.jcard:hover { transform: rotate(-.5deg) translateY(-2px) !important; box-shadow: 2px 4px 0 var(--paper-edge); }
.jcard:active { transform: scale(.98) !important; box-shadow: 0 1px 0 var(--paper-edge); }

/* ── WASHI TAPE — two strips per card, different angles ── */
/* Tape strip 1: top-left, warm terracotta stripe */
.jcard::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 16px;
  width: 56px;
  height: 18px;
  border-radius: 1px;
  opacity: .6;
  transform: rotate(-2.5deg);
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    90deg,
    rgba(160,80,50,.28) 0px,
    rgba(160,80,50,.28) 4px,
    rgba(200,130,80,.18) 4px,
    rgba(200,130,80,.18) 8px
  );
}
/* Tape strip 2: top-right, green/sage */
.jcard::after {
  content: '';
  position: absolute;
  top: -7px;
  right: 24px;
  width: 44px;
  height: 16px;
  border-radius: 1px;
  opacity: .5;
  transform: rotate(2deg);
  pointer-events: none;
  z-index: 2;
  background: rgba(90,130,80,.22);
}

/* jcard tape color variants — different sections feel different */
/* jcard-amber: warm gold tape — used on screen time */
.jcard-amber::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(160,120,20,.3) 0, rgba(160,120,20,.3) 4px,
    rgba(196,160,40,.2) 4px, rgba(196,160,40,.2) 8px
  );
}
.jcard-amber::after { background: rgba(100,80,20,.15); }

/* jcard-rose: pink tape — used on board/family cards */
.jcard-rose::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(160,60,100,.28) 0, rgba(160,60,100,.28) 4px,
    rgba(200,100,130,.18) 4px, rgba(200,100,130,.18) 8px
  );
}
.jcard-rose::after { background: rgba(180,80,120,.14); }

/* Single-tape variant — only left strip (for narrow cards) */
.jcard-single::after { display: none; }

/* ══════════════════════════════════════
   TORN PAPER CARDS
   .jcard-sketched gets a torn/ripped paper edge via JS-injected SVG.
   The card background itself is clipped to the torn shape.
   Tape pseudo-elements sit on top.
══════════════════════════════════════ */
.jcard-sketched {
  border: none !important;
  box-shadow: 2px 3px 0 var(--paper-edge);
  position: relative;
  overflow: visible;
}

/* Torn paper SVG sits behind content, extends past card edges */
.torn-border-svg {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Card content sits above the torn SVG */
.jcard-sketched > *:not(.torn-border-svg) { position: relative; z-index: 1; }

/* Tape pseudo-elements stay on top */
.jcard-sketched::before,
.jcard-sketched::after { z-index: 4; }

/* No tape on digital/space themes — it makes no sense there */
[data-theme="galactic"] .jcard-sketched::before,
[data-theme="galactic"] .jcard-sketched::after,
[data-theme="retro"] .jcard-sketched::before,
[data-theme="retro"] .jcard-sketched::after,
[data-theme="astrology"] .jcard-sketched::before,
[data-theme="astrology"] .jcard-sketched::after,
[data-theme="blocky"] .jcard-sketched::before,
[data-theme="blocky"] .jcard-sketched::after { display: none !important; }

/* No paper drop-shadow on digital themes */
[data-theme="galactic"] .jcard-sketched,
[data-theme="retro"] .jcard-sketched,
[data-theme="blocky"] .jcard-sketched,
[data-theme="astrology"] .jcard-sketched { box-shadow: none; }

/* ── Button styles ── */
.btn-sketch {
  font-family: var(--font-hand);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid var(--ink);
  border-radius: 3px;
  padding: 10px 20px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: all .15s;
  filter: var(--sketch-filter);
  letter-spacing: .3px;
}
.btn-sketch:hover  { background: var(--ink-faint); transform: translateY(-1px); }
.btn-sketch:active { transform: scale(.97); }

.btn-primary-sketch {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary-sketch:hover { background: var(--ink2); }

.btn-accent-sketch {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}

.btn-full { width: 100%; display: block; text-align: center; }

/* ── Input fields ── */
.inp-sketch {
  width: 100%;
  background: var(--card-bg);
  border: none;
  border-bottom: 2px solid var(--ink-faint);
  border-radius: 0;
  padding: 8px 4px;
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color .2s;
}
.inp-sketch:focus { border-bottom-color: var(--accent); }
.inp-sketch::placeholder { color: var(--ink-light); font-style: italic; }

/* ── Tag / pill ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-tag);
  font-size: .8rem;
  color: var(--ink2);
  background: var(--paper2);
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  padding: 2px 6px;
}
.tag-accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tag-success { background: rgba(107,143,94,.12); border-color: var(--success); color: var(--success); }
.tag-warn { background: rgba(196,163,90,.12); border-color: var(--warn); color: var(--warn); }

/* ── XP bar ── */
.xpbar {
  height: 6px;
  background: var(--ink-faint);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}
.xpbar-fill {
  height: 100%;
  background: var(--accent2);
  border-radius: 0;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  position: relative;
}
/* Hatching on xp bar — hand-drawn feel */
.xpbar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,.15) 3px,
    rgba(255,255,255,.15) 4px
  );
}

/* ── Toast ── */
.toast {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-hand);
  font-size: .95rem;
  border-radius: 3px;
  padding: 9px 20px;
  z-index: 400;
  opacity: 0;
  transition: all .25s;
  pointer-events: none;
  white-space: nowrap;
  max-width: 88vw;
  text-align: center;
  border: 1.5px solid var(--paper-edge);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.xp   { background: var(--accent2); color: var(--paper); border-color: var(--accent); }
.toast.warn { background: var(--warn);    color: var(--paper); }
.toast.red  { background: var(--danger);  color: var(--paper); }

/* Retro — dark bg toasts need readable text */
[data-theme="retro"] .toast      { background: #00ccff; color: #000; border-color: #00ee3a; font-size:1rem; }
[data-theme="retro"] .toast.xp   { background: #00ccff; color: #000; border-color: #00ee3a; }
[data-theme="retro"] .toast.warn { background: #ddcc00; color: #000; }
[data-theme="retro"] .toast.red  { background: #ff2244; color: #fff; }
/* Galactic — keep readable on dark */
[data-theme="galactic"] .toast      { background: var(--accent); color: #000; border-color: var(--accent2); }
[data-theme="galactic"] .toast.xp   { background: var(--accent2); color: #000; border-color: var(--accent); }
/* Astrology */
[data-theme="astrology"] .toast     { background: var(--accent); color: #000; border-color: var(--accent2); }
[data-theme="astrology"] .toast.xp  { background: var(--accent2); color: #000; }

/* ── Modal / bottom sheet ── */
.mo-wrap {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
}
.mo-wrap.open { display: flex; animation: fadeIn .2s ease; }
.mo {
  background: var(--paper);
  border: 1.5px solid var(--paper-edge);
  border-radius: 6px 6px 0 0;
  padding: 20px var(--page-pad) 48px;
  width: 100%;
  max-width: 500px;
  animation: slideUp .3s cubic-bezier(.4,0,.2,1);
  position: relative;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: visible;
}
.mo-handle {
  width: 36px; height: 3px;
  background: var(--ink-faint);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.mo-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ink);
  text-align: center;
  margin-bottom: 4px;
}
.mo-sub {
  font-family: var(--font-hand);
  text-align: center;
  color: var(--ink-light);
  font-size: .88rem;
  margin-bottom: 16px;
  line-height: 1.5;
  font-style: italic;
}

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }

/* ── Divider ── */
.divider-sketch {
  border: none;
  border-top: 1px solid var(--ink-faint);
  margin: 12px 0;
}

/* ── Spacer ── */
.sp { height: 20px; }

/* ═══════════════════════════════════════
   BOTTOM NAV — bookmark tabs
═══════════════════════════════════════ */
.bottom-nav {
  display: flex;
  background: var(--paper2);
  border-top: 2px solid var(--ink-faint);
  flex-shrink: 0;
  z-index: 60;
}
.nb {
  flex: 1;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  border-right: 1px solid var(--ink-faint);
}
.nb:last-child { border-right: none; }
.nb.on {
  background: var(--paper);
  border-top: 3px solid var(--accent);
  padding-top: 7px;
}
.nb-icon { font-size: 1.1rem; transition: all .15s; }
.nb.on .nb-icon { transform: translateY(-1px); }
.nb-lbl {
  font-family: var(--font-tag);
  font-size: .72rem;
  color: var(--ink-light);
  transition: all .15s;
  letter-spacing: .3px;
}
.nb.on .nb-lbl { color: var(--accent); font-weight: 600; }
.nb-dot {
  position: absolute;
  top: 7px;
  right: calc(50% - 16px);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 1.5px solid var(--paper2);
  display: none;
}
.nb-dot.show { display: block; }

/* Camera button — slightly raised in center */
.nb-camera {
  flex: 1;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  cursor: pointer;
  border-right: 1px solid var(--ink-faint);
}
.nb-camera-ring {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-top: -10px;
  border: 3px solid var(--paper2);
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  transition: all .15s;
}
.nb-camera:active .nb-camera-ring { transform: scale(.92); }
.nb-camera .nb-lbl {
  font-family: var(--font-tag);
  font-size: .72rem;
  color: var(--ink-light);
}

/* ═══════════════════════════════════════
   LOGIN SCREEN
═══════════════════════════════════════ */
#sc-login {
  background: var(--paper);
  overflow-y: auto;
}
.login-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 28px 48px;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Paper grain on login */
#sc-login::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* Ruled lines on login */
#sc-login::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    transparent, transparent 31px,
    rgba(180,160,120,.16) 31px, rgba(180,160,120,.16) 32px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Logo block ── */
.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}
.logo-wordmark {
  text-align: center;
  margin-top: 8px;
}
.logo-hearth {
  font-family: var(--font-display);
  font-size: 3.4rem;
  color: var(--ink);
  line-height: 1;
  letter-spacing: 1px;
}
.logo-quest {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-light);
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-top: -6px;
}
.logo-tagline {
  font-family: var(--font-tag);
  font-size: .95rem;
  color: var(--ink-light);
  margin-top: 4px;
}

/* ── Profile list ── */
.profile-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.profile-btn {
  background: rgba(255,255,255,.55);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  width: 100%;
  filter: var(--sketch-filter);
}
.profile-btn:nth-child(odd)  { transform: rotate(-.3deg); }
.profile-btn:nth-child(even) { transform: rotate(.3deg); }
.profile-btn:hover {
  background: rgba(255,255,255,.8);
  box-shadow: 2px 3px 0 var(--paper-edge);
  transform: rotate(0) translateX(3px);
  border-color: var(--accent);
}
.pb-avatar { font-size: 2rem; flex-shrink: 0; }
.pb-info { flex: 1; text-align: left; }
.pb-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 1px;
}
.pb-role {
  font-family: var(--font-tag);
  font-size: .78rem;
  color: var(--ink-light);
}
.pb-lock { font-size: .9rem; color: var(--ink-light); }

/* ── Auth prompts ── */
.bio-prompt, .pin-entry, .picture-pin {
  display: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  position: relative;
  z-index: 1;
}
.bio-prompt.show, .pin-entry.show, .picture-pin.show { display: flex; animation: pageIn .25s ease; }

.bio-icon { font-size: 3.5rem; margin-bottom: 8px; }
.bio-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.bio-sub {
  font-family: var(--font-hand);
  font-size: .82rem;
  color: var(--ink-light);
  text-align: center;
  margin-bottom: 18px;
  line-height: 1.5;
  font-style: italic;
}
.bio-btn {
  width: 100%;
  margin-bottom: 10px;
}
.bio-pin-link {
  font-family: var(--font-tag);
  font-size: .8rem;
  color: var(--ink-light);
  cursor: pointer;
  transition: color .2s;
  text-decoration: underline;
  margin-top: 4px;
}
.bio-pin-link:hover { color: var(--accent); }
.login-back {
  font-family: var(--font-tag);
  font-size: .8rem;
  color: var(--ink-light);
  cursor: pointer;
  margin-top: 14px;
  text-align: center;
  transition: color .2s;
}
.login-back:hover { color: var(--accent); }

/* Pin dots */
.pin-dots { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--paper-dark);
  border: 2px solid var(--ink-faint);
  transition: all .15s;
}
.pin-dot.filled { background: var(--accent); border-color: var(--accent); transform: scale(1.1); }

/* Pin keypad */
.pin-pad { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.pin-key {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 15px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  filter: var(--sketch-filter);
}
.pin-key:hover { background: rgba(255,255,255,.85); border-color: var(--accent); }
.pin-key:active { transform: scale(.95); }
.pin-key.delete { color: var(--danger); }
.pin-key.empty { background: transparent; border-color: transparent; cursor: default; }
.pin-key.empty:hover { background: transparent; border-color: transparent; transform: none; }

/* Picture PIN */
.pp-sequence { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.pp-slot {
  width: 46px; height: 46px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  border: 1.5px dashed var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  transition: all .15s;
}
.pp-slot.filled { border-style: solid; border-color: var(--accent); background: rgba(255,255,255,.7); }
.pp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.pp-emoji-btn {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 11px 6px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.pp-emoji-btn:hover { border-color: var(--accent); background: rgba(255,255,255,.8); transform: scale(1.08); }
.pp-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ink);
  text-align: center;
  margin-bottom: 4px;
}
.pp-sub {
  font-family: var(--font-hand);
  font-size: .78rem;
  color: var(--ink-light);
  text-align: center;
  margin-bottom: 14px;
  font-style: italic;
}
.pp-clear {
  font-family: var(--font-tag);
  font-size: .75rem;
  color: var(--ink-light);
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
}

/* Setup link */
@keyframes pinShake {
  0%,100% { transform:translateX(0); }
  20%     { transform:translateX(-8px); }
  40%     { transform:translateX(8px); }
  60%     { transform:translateX(-5px); }
  80%     { transform:translateX(5px); }
}
.setup-link {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  text-align: center;
}
.setup-link a, .setup-link span {
  font-family: var(--font-tag);
  font-size: .82rem;
  color: var(--ink-light);
  cursor: pointer;
  text-decoration: underline;
  transition: color .2s;
}
.setup-link span:hover { color: var(--accent); }

/* ═══════════════════════════════════════
   ONBOARDING
═══════════════════════════════════════ */
#sc-onboard { background: var(--paper); overflow-y: auto; }
.ob-fire-header {
  text-align: center;
  padding: 28px 28px 8px;
  position: relative;
  z-index: 1;
}
.ob-flame {
  transform-origin: center bottom;
  animation: obFlicker var(--fd, 1.4s) ease-in-out infinite;
  animation-delay: var(--fdl, 0s);
}
.ob-flame-1 { --fd:1.3s; --fdl:0s; }
.ob-flame-2 { --fd:1.1s; --fdl:.2s; }
.ob-flame-3 { --fd:1.5s; --fdl:.4s; }
.ob-flame-4 { --fd:0.9s; --fdl:.1s; }
.ob-flame-5 { --fd:1.0s; --fdl:.3s; }
.ob-flame-6 { --fd:1.2s; --fdl:.5s; }
@keyframes obFlicker {
  0%,100% { transform: scaleY(1) scaleX(1); }
  33%      { transform: scaleY(1.06) scaleX(.97) translateX(-1px); }
  66%      { transform: scaleY(.94) scaleX(1.02) translateX(1px); }
}
.ob-spark {
  animation: obSpark var(--sd,2s) ease-out infinite;
  animation-delay: var(--sdl,0s);
}
@keyframes obSpark {
  0%   { opacity:0; transform:translate(0,0) scale(1); }
  20%  { opacity:1; }
  100% { opacity:0; transform:translate(var(--sx,0),-28px) scale(0); }
}
/* Ceremony hero badges */
.ceremony-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: heroArrive .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes heroArrive {
  from { opacity:0; transform:translateY(20px) scale(.7); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.ceremony-avatar {
  font-size: 2.4rem;
  width: 56px; height: 56px;
  background: var(--card-bg);
  border: 2.5px solid var(--accent2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(196,152,32,.3);
}
.ceremony-name {
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--ink);
}
.ceremony-class {
  font-family: var(--font-tag);
  font-size: .55rem;
  color: var(--ink-light);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.ob-logo {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ink);
  margin-bottom: 2px;
  margin-top: 6px;
}
.ob-tagline {
  font-family: var(--font-tag);
  font-size: .85rem;
  color: var(--ink-light);
  font-style: italic;
}
.ob-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 12px 0;
  position: relative;
  z-index: 1;
}
.ob-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-faint);
  transition: all .3s;
}
.ob-dot.active { background: var(--accent); width: 24px; border-radius: 4px; }
.ob-dot.done { background: var(--success); }

.ob-step { display: none; padding: 0 var(--page-pad) 28px; position: relative; z-index: 1; }
.ob-step.active { display: block; animation: pageIn .3s ease; }
.ob-back-btn {
  background: none;
  border: none;
  font-family: var(--font-tag);
  font-size: .78rem;
  color: var(--ink-light);
  cursor: pointer;
  padding: 8px 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ob-step-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--ink);
  text-align: center;
  margin-bottom: 6px;
}
.ob-step-sub {
  font-family: var(--font-hand);
  text-align: center;
  color: var(--ink-light);
  font-size: .85rem;
  margin-bottom: 18px;
  line-height: 1.5;
  font-style: italic;
}

/* Realm input */
.realm-input {
  width: 100%;
  background: var(--card-bg);
  border: none;
  border-bottom: 2.5px solid var(--ink);
  padding: 12px 6px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  outline: none;
  text-align: center;
  margin-bottom: 10px;
  transition: border-color .2s;
}
.realm-input:focus { border-bottom-color: var(--accent); }
.realm-input::placeholder { color: var(--ink-light); font-style: italic; }

/* Member list */
.member-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.member-item {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  filter: var(--sketch-filter);
}
.mi-avatar { font-size: 1.7rem; }
.mi-info { flex: 1; }
.mi-name { font-family: var(--font-display); font-size: .95rem; color: var(--ink); }
.mi-role { font-family: var(--font-tag); font-size: .7rem; color: var(--ink-light); }

.add-member-btn {
  background: rgba(255,255,255,.3);
  border: 1.5px dashed var(--ink-light);
  border-radius: var(--card-radius);
  padding: 12px;
  text-align: center;
  font-family: var(--font-hand);
  color: var(--ink-light);
  font-size: .85rem;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 12px;
  font-style: italic;
}
.add-member-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--card-bg); }

/* Character builder */
.char-builder { margin-bottom: 14px; }
.cb-preview {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 18px;
  text-align: center;
  margin-bottom: 14px;
  filter: var(--sketch-filter);
  transform: rotate(-.2deg);
}
.cb-avatar-big { font-size: 3.8rem; display: block; margin-bottom: 6px; }
.cb-name-preview { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-bottom: 3px; }
.cb-class-preview { font-family: var(--font-tag); font-size: .72rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: 1.5px; }
.cb-section { margin-bottom: 12px; }
.cb-label {
  font-family: var(--font-tag);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-light);
  margin-bottom: 7px;
}
.avatar-picker { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.av-opt {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 9px;
  font-size: 1.4rem;
  text-align: center;
  cursor: pointer;
  transition: all .15s;
}
.av-opt:hover { border-color: var(--accent); transform: scale(1.08); }
.av-opt.picked { border-color: var(--accent2); background: rgba(196,152,32,.1); }

.class-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.class-opt {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 10px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.class-opt:hover { border-color: var(--ink-light); }
.class-opt.picked { border-color: var(--accent); background: var(--accent-soft); }
.co-emoji { font-size: 1.2rem; margin-bottom: 3px; }
.co-name { font-family: var(--font-display); font-size: .88rem; color: var(--ink); margin-bottom: 2px; }
.co-desc { font-family: var(--font-hand); font-size: .68rem; color: var(--ink-light); font-style: italic; }

.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.role-opt {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 12px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
/* Ensure cards are always readable on dark themes */
[data-theme="astrology"] .role-opt,
[data-theme="galactic"]  .role-opt,
[data-theme="retro"]     .role-opt { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
[data-theme="astrology"] .class-opt,
[data-theme="galactic"]  .class-opt,
[data-theme="retro"]     .class-opt { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.role-opt:hover { border-color: var(--accent); }
.role-opt.picked { border-color: var(--accent2); background: rgba(196,152,32,.1); }
.ro-emoji { font-size: 1.4rem; margin-bottom: 4px; }
.ro-name { font-family: var(--font-display); font-size: .85rem; color: var(--ink); }
.ro-desc { font-family: var(--font-hand); font-size: .65rem; color: var(--ink-light); font-style: italic; }

/* Theme mini picker */
.theme-mini { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-bottom: 12px; }
.tm-opt {
  border-radius: 3px;
  padding: 8px 4px;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  border: 2px solid transparent;
}
.tm-opt:hover { transform: scale(1.08); }
.tm-opt.picked { border-color: var(--accent2); }
.tm-name { font-size: .5rem; font-weight: 800; color: #2a1a08; opacity: .85; font-family: var(--font-note); }

/* Pin setup in onboarding */
.pin-setup-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.name-row { display: flex; gap: 8px; }
.mic-btn {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.mic-btn:hover { border-color: var(--accent); }
.mic-btn.listening { background: rgba(192,57,43,.12); border-color: var(--danger); }

/* Ready heroes */
.ready-heroes { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.rh-card {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  filter: var(--sketch-filter);
}
.rh-av { font-size: 1.5rem; }
.rh-info { flex: 1; }
.rh-name { font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--ink); }
.rh-class { font-family: var(--font-tag); font-size: .68rem; color: var(--ink-light); }

/* ═══════════════════════════════════════
   CALLOUT / BLOCKQUOTE
═══════════════════════════════════════ */
.callout {
  background: rgba(255,255,255,.35);
  border-left: 3px solid var(--accent2);
  border-radius: 0 var(--card-radius) var(--card-radius) 0;
  padding: 10px 14px;
  margin: 8px 0;
  font-family: var(--font-hand);
  font-size: .85rem;
  color: var(--ink2);
  line-height: 1.5;
  font-style: italic;
}

/* ── Home header ── */
.home-header {
  padding: 16px var(--page-pad) 10px;
  border-bottom: 1px solid var(--ink-faint);
  background: rgba(255,255,255,.3);
}
.home-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}
.realm-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ink);
  line-height: 1;
}
.realm-date {
  font-family: var(--font-tag);
  font-size: .85rem;
  color: var(--ink-light);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.streak-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.streak-chip {
  font-family: var(--font-tag);
  font-size: .8rem;
  color: var(--ink2);
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Streak fire animation — SVG flame grows with streak length */
.streak-flame-wrap {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  vertical-align: middle;
}
.streak-flame-svg {
  display: inline-block;
  transform-origin: bottom center;
  animation: flameDance 1.4s ease-in-out infinite;
}
.streak-flame-svg.f2 { animation-duration: 1.1s; animation-delay: .15s; }
.streak-flame-svg.f3 { animation-duration:  .9s; animation-delay: .3s;  }
.streak-flame-svg.f4 { animation-duration: 1.2s; animation-delay: .08s; }
.streak-flame-svg.f5 { animation-duration:  .85s;animation-delay: .22s; }
@keyframes flameDance {
  0%,100% { transform: scaleY(1)   scaleX(1)    rotate(0deg);   }
  20%      { transform: scaleY(1.1) scaleX(.93)  rotate(-1.5deg);}
  45%      { transform: scaleY(.95) scaleX(1.05) rotate(1deg);   }
  70%      { transform: scaleY(1.08) scaleX(.96) rotate(-1deg);  }
}
@keyframes flameGlow {
  0%,100% { opacity:.8; }
  50%      { opacity:1;  }
}
.streak-count { font-family:var(--font-display); font-size:.95rem; }
.streak-count.active  { color:var(--accent2); }
.streak-count.hot     { color:#c06010; }
.streak-count.inferno { color:var(--accent); }

/* ── Hero chip ── */
.hero-chip {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  filter: var(--sketch-filter);
  transform: rotate(-.2deg);
  position: relative;
  box-shadow: 1px 2px 0 var(--paper-edge);
  margin-bottom: 14px;
  margin-top: 8px;
}
/* Hero chip tape — single warm strip, centered top */
.hero-chip::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%) rotate(-1deg);
  width: 64px; height: 18px;
  border-radius: 1px; opacity: .55; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    90deg,
    rgba(155,42,26,.28) 0, rgba(155,42,26,.28) 4px,
    rgba(196,152,32,.2) 4px, rgba(196,152,32,.2) 8px
  );
}
.hero-chip:hover { box-shadow: 2px 4px 0 var(--paper-edge); transform: rotate(-.4deg) translateY(-2px); }
.hc-avatar { font-size: 2.4rem; flex-shrink: 0; }
.hc-info { flex: 1; min-width: 0; }
.hc-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-identity {
  font-family: var(--font-display);
  font-size: .72rem;
  color: var(--accent2);
  letter-spacing: .5px;
  margin-bottom: 4px;
  opacity: .9;
  font-weight: 600;
}
.hc-xp-label { font-family: var(--font-tag); font-size: .6rem; color: var(--ink-light); margin-top: 2px; }
.hc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.hc-level { font-family: var(--font-display); font-size: .88rem; background: var(--accent2); color: var(--paper); border-radius: 3px; padding: 3px 8px; }
.hc-tap { font-family: var(--font-tag); font-size: .58rem; color: var(--ink-light); }

/* ── Stats row ── */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 6px;
  padding: 0 var(--page-pad);
}
.stat-chip {
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 10px 4px;
  text-align: center;
  box-shadow: 1px 1px 0 var(--paper-edge);
  cursor: pointer;
  position: relative;
  overflow: visible;
}
.stat-chip:nth-child(1) { transform: rotate(-.3deg); }
.stat-chip:nth-child(2) { transform: rotate(.2deg); }
.stat-chip:nth-child(3) { transform: rotate(-.15deg); }
.stat-chip:nth-child(4) { transform: rotate(.25deg); }
.stat-v { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent2); }
.stat-l { font-family: var(--font-tag); font-size: .58rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: .4px; }

/* ── SVG Droplet ── */
.droplet-wrap { display:flex; justify-content:center; align-items:center; height:32px; }
.droplet-svg { width:22px; height:28px; }
.droplet-fill { transition: height .4s ease, y .4s ease; }
@keyframes dropletSparkle {
  0%   { opacity:0; transform:scale(.5); }
  50%  { opacity:1; transform:scale(1.3); }
  100% { opacity:0; transform:scale(.8); }
}
.droplet-sparkle { animation: dropletSparkle .6s ease forwards; }

/* ── Our Realm section cards ── */
.realm-cards {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--page-pad);
}
.realm-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: var(--card-radius);
  margin-bottom: 10px;
  box-shadow: 1px 2px 0 var(--paper-edge);
  position: relative;
  overflow: visible;
}
.realm-card-icon { font-size: 1.8rem; flex-shrink:0; }
.realm-card-info { flex:1; }
.realm-card-name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.realm-card-desc { font-family: var(--font-hand); font-size: .75rem; color: var(--ink-light); font-style:italic; margin-top:2px; }
.realm-card-arrow { font-size: 1.2rem; color: var(--ink-light); }

/* ── Wellness row ── */
.wellness-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  padding: 0 var(--page-pad);
}
.wellness-chip {
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 1px 1px 0 var(--paper-edge);
}
.wellness-chip:nth-child(1) { transform: rotate(-.25deg); }
.wellness-chip:nth-child(2) { transform: rotate(.2deg); }
.wellness-chip:nth-child(3) { transform: rotate(-.15deg); }
.wellness-chip:hover { transform: translateY(-2px) rotate(-.35deg) !important; box-shadow: 2px 3px 0 var(--paper-edge); }
.wc-icon { font-size: 1.4rem; line-height: 1; }
.wc-val { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.wc-label { font-family: var(--font-tag); font-size: .6rem; color: var(--ink-light); text-transform: uppercase; letter-spacing: .4px; }
.wc-bar { width: 100%; height: 3px; background: var(--ink-faint); border-radius: 2px; overflow: hidden; margin-top: 2px; }
.wc-bar-fill { height: 100%; background: var(--accent2); border-radius: 2px; transition: width .6s; }

/* ── Skills screen ── */
.skill-hero-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:20px;
  background:var(--card-bg); border:1.5px solid var(--ink-faint);
  font-family:var(--font-tag); font-size:.75rem; color:var(--ink);
  cursor:pointer; white-space:nowrap; flex-shrink:0;
  transition:all .15s;
}
.skill-hero-pill.active { background:var(--accent); color:var(--paper); border-color:var(--accent); }
.skill-hero-pill:hover { transform:translateY(-1px); }

.skill-card {
  background:var(--card-bg); border:1px solid var(--ink-faint);
  border-radius:var(--card-radius); padding:14px 16px;
  margin:0 var(--page-pad) 10px;
  box-shadow:1px 2px 0 var(--paper-edge);
}
.skill-card.skill-locked { opacity:.6; }
.skill-card-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.skill-emoji { font-size:1.6rem; flex-shrink:0; }
.skill-name-wrap { flex:1; }
.skill-name { font-family:var(--font-display); font-size:.95rem; color:var(--ink); }
.skill-desc { font-family:var(--font-hand); font-size:.72rem; color:var(--ink-light); font-style:italic; }
.skill-level-badge {
  font-family:var(--font-display); font-size:.82rem;
  background:var(--accent2); color:var(--paper);
  border-radius:3px; padding:2px 8px; flex-shrink:0;
}
.skill-xp-row { display:flex; align-items:center; gap:8px; margin-top:4px; }
.skill-xp-bar { flex:1; height:5px; background:var(--ink-faint); border-radius:3px; overflow:hidden; }
.skill-xp-fill { height:100%; border-radius:3px; transition:width .5s; }
.skill-xp-label { font-family:var(--font-tag); font-size:.6rem; color:var(--ink-light); white-space:nowrap; }

/* Materials grid */
.mat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 var(--page-pad); align-items:stretch; }
.mat-card {
  background:var(--card-bg); border:1px solid var(--ink-faint);
  border-radius:var(--card-radius); padding:10px 8px;
  text-align:center; cursor:pointer;
  box-shadow:1px 1px 0 var(--paper-edge);
  transition:transform .15s;
  min-height:100px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.mat-card:hover { transform:translateY(-2px); }
.mat-emoji { font-size:1.6rem; line-height:1; margin-bottom:4px; }
.mat-svg-wrap { display:flex; justify-content:center; align-items:center; height:36px; margin-bottom:4px; }
.mat-name { font-family:var(--font-display); font-size:.7rem; color:var(--ink); margin-bottom:3px; line-height:1.2; }
.mat-count { font-family:var(--font-display); font-size:1rem; color:var(--accent2); }
.mat-rarity { font-family:var(--font-tag); font-size:.55rem; text-transform:uppercase; letter-spacing:.3px; margin-top:2px; }
.mat-exclusive-tag {
  display:inline-block; font-family:var(--font-tag); font-size:.5rem;
  background:var(--accent); color:var(--paper); border-radius:2px;
  padding:1px 4px; margin-top:3px; text-transform:uppercase;
}
.mat-nudge {
  margin:0 var(--page-pad) 10px;
  background:rgba(201,162,39,.1); border:1px solid rgba(201,162,39,.3);
  border-radius:var(--card-radius); padding:10px 14px;
  font-family:var(--font-hand); font-size:.82rem; color:var(--ink);
  font-style:italic;
}

/* ═══════════════════════════════════════
   THE HEARTH PAGE
═══════════════════════════════════════ */
.hearth-header {
  display:flex; align-items:baseline; justify-content:space-between;
  padding:14px var(--page-pad) 8px;
  border-bottom:1.5px solid var(--ink-faint);
  margin-bottom:4px;
}
.hearth-title {
  font-family:var(--font-display); font-size:1.4rem; color:var(--ink);
}
.hearth-date {
  font-family:var(--font-hand); font-size:.85rem; color:var(--ink-light); font-style:italic;
}
.hearth-section-label {
  font-family:var(--font-tag); font-size:.65rem; color:var(--ink-light);
  text-transform:uppercase; letter-spacing:.8px;
  padding:10px 0 4px;
  border-bottom:1px solid var(--ink-faint); margin-bottom:8px;
}

/* Visitor card — taped-in journal entry */
.vc-card {
  background:var(--card-bg);
  border:1px solid var(--ink-faint);
  border-radius:var(--card-radius);
  padding:14px 16px;
  margin-bottom:12px;
  position:relative;
  box-shadow:1px 2px 0 var(--paper-edge);
  cursor:pointer;
  transition:transform .15s, box-shadow .15s;
}
.vc-card:nth-child(odd)  { transform:rotate(-.4deg); }
.vc-card:nth-child(even) { transform:rotate(.3deg); }
.vc-card:hover { transform:rotate(-.6deg) translateY(-2px) !important; box-shadow:2px 4px 0 var(--paper-edge); }

/* Tape strips on visitor cards */
.vc-card::before {
  content:'';position:absolute;top:-9px;left:18px;width:56px;height:18px;
  border-radius:1px;opacity:.6;transform:rotate(-2.5deg);pointer-events:none;z-index:2;
  background:repeating-linear-gradient(90deg,rgba(160,80,50,.28) 0,rgba(160,80,50,.28) 4px,rgba(200,130,80,.18) 4px,rgba(200,130,80,.18) 8px);
}
.vc-card::after {
  content:'';position:absolute;top:-7px;right:24px;width:44px;height:16px;
  border-radius:1px;opacity:.5;transform:rotate(2deg);pointer-events:none;z-index:2;
  background:rgba(90,130,80,.22);
}

.vc-header { display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
.vc-sketch { width:64px; height:64px; flex-shrink:0; }
.vc-info { flex:1; }
.vc-name { font-family:var(--font-display); font-size:1.1rem; color:var(--ink); margin-bottom:2px; }
.vc-species { font-family:var(--font-tag); font-size:.7rem; color:var(--ink-light); text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
.vc-status { font-family:var(--font-hand); font-size:.8rem; color:var(--ink-light); font-style:italic; display:flex; align-items:center; gap:5px; }
.vc-dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.vc-dot.here  { background:#6b8f5e; }
.vc-dot.away  { background:#c4a35a; }
.vc-note {
  font-family:var(--font-hand); font-size:.88rem; color:var(--ink);
  line-height:1.55; font-style:italic;
  border-top:1px solid var(--ink-faint); padding-top:8px; margin-top:4px;
}
.vc-generate-btn {
  font-family:var(--font-tag); font-size:.6rem; color:var(--ink-light);
  background:none; border:1px solid var(--ink-faint); border-radius:3px;
  padding:3px 8px; cursor:pointer; margin-top:6px; float:right;
}
.vc-generate-btn:hover { border-color:var(--accent); color:var(--accent); }

/* Absent note — brief sighting, no card */
.hearth-absent {
  background:rgba(255,255,255,.25);
  border-left:3px solid var(--ink-faint);
  padding:7px 12px; margin-bottom:8px;
  font-family:var(--font-hand); font-size:.85rem; color:var(--ink-light);
  font-style:italic; transform:rotate(.2deg);
}

/* Habitat & plant items */
.habitat-item, .plant-item-h {
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; margin-bottom:8px;
  background:var(--card-bg); border:1px solid var(--ink-faint);
  border-radius:var(--card-radius); box-shadow:1px 1px 0 var(--paper-edge);
  cursor:pointer; transition:transform .12s;
}
.habitat-item:nth-child(odd)  { transform:rotate(.2deg); }
.habitat-item:nth-child(even) { transform:rotate(-.15deg); }
.plant-item-h:nth-child(odd)  { transform:rotate(-.2deg); }
.plant-item-h:nth-child(even) { transform:rotate(.15deg); }
.habitat-item:hover, .plant-item-h:hover { transform:translateY(-2px) !important; }
.hi-sketch { width:44px; height:44px; flex-shrink:0; }
.hi-info { flex:1; }
.hi-name { font-family:var(--font-display); font-size:.9rem; color:var(--ink); }
.hi-by   { font-family:var(--font-tag);     font-size:.65rem; color:var(--ink-light); text-transform:uppercase; letter-spacing:.2px; margin-top:2px; }
.hi-cond { font-family:var(--font-hand);    font-size:.75rem; margin-top:2px; font-weight:600; }
.hi-cond.good     { color:#6b8f5e; }
.hi-cond.worn     { color:#c4a35a; }
.hi-cond.broken   { color:#c85820; }
.hi-cond.thriving { color:#6b8f5e; }
.hi-cond.growing  { color:#4a7a1a; }
.hi-cond.wilting  { color:#c4a35a; }

/* Found items grid */
.found-item {
  display:flex; flex-direction:column; align-items:center;
  gap:4px; cursor:pointer; transition:transform .12s;
}
.found-item:hover { transform:scale(1.05) rotate(-2deg); }
.found-label    { font-family:var(--font-hand); font-size:.75rem; color:var(--ink); text-align:center; }
.found-sublabel { font-family:var(--font-tag);  font-size:.58rem; color:var(--ink-light); text-align:center; }

/* Empty state */
.hearth-empty {
  padding:20px 0 8px;
  font-family:var(--font-hand); font-size:.88rem; color:var(--ink-light);
  font-style:italic; text-align:center;
}

/* ── Quest tabs ── */
/* ── MUSHROOM: spore float animation ── */
@keyframes sporeFloat {
  0%   { transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(1); }
  100% { transform: translate(var(--dx, 4px), var(--dy, -8px)) rotate(calc(var(--rot, 0deg) + 15deg)) scale(1.1); }
}
.mushroom-spore { --rot: 0deg; }
.q-tabs {
  display: flex;
  gap: 6px;
  padding: 0 var(--page-pad) 4px;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 4px;
}
.q-tab {
  flex: 1;
  padding: 7px 4px;
  text-align: center;
  font-family: var(--font-tag);
  font-size: .75rem;
  color: var(--ink-light);
  cursor: pointer;
  transition: all .15s;
  border: none;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  position: relative;
  overflow: visible;
  box-shadow: 1px 2px 0 var(--paper-edge);
  transform: rotate(-.4deg);
}
.q-tab:nth-child(2) { transform: rotate(.3deg); }
.q-tab:nth-child(3) { transform: rotate(-.2deg); }
.q-tab:nth-child(4) { transform: rotate(.4deg); }
.q-tab:last-child { border-right: none; }
.q-tab.on {
  background: var(--accent);
  color: var(--paper);
  font-weight: 700;
  transform: rotate(-.2deg) translateY(-2px);
  box-shadow: 2px 3px 0 var(--paper-edge);
}
.q-tab:hover:not(.on) { transform: rotate(-.5deg) translateY(-1px) !important; }

/* Tape strip on each tab */
.q-tab::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 32px; height: 14px;
  border-radius: 1px;
  opacity: .55; pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(155,42,26,.28) 0, rgba(155,42,26,.28) 3px,
    rgba(196,152,32,.2) 3px, rgba(196,152,32,.2) 6px
  );
}
.q-tab.on::before {
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.35) 0, rgba(255,255,255,.35) 3px,
    rgba(255,255,255,.2) 3px, rgba(255,255,255,.2) 6px
  );
}

/* Dark themes — adjust tab colors */
[data-theme="galactic"] .q-tabs,
[data-theme="retro"] .q-tabs,
[data-theme="astrology"] .q-tabs {
  background: none;
  border: none;
}
[data-theme="galactic"] .q-tab,
[data-theme="retro"] .q-tab,
[data-theme="astrology"] .q-tab {
  color: var(--ink2);
  font-size: .78rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}
[data-theme="galactic"] .q-tab.on,
[data-theme="retro"] .q-tab.on,
[data-theme="astrology"] .q-tab.on {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  border-color: var(--accent);
}
/* No tape on dark themes */
[data-theme="galactic"] .q-tab::before,
[data-theme="retro"] .q-tab::before,
[data-theme="astrology"] .q-tab::before { display: none; }

/* ── Quest card ── */
.quest-card {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 11px 13px;
  margin: 6px var(--page-pad) 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  position: relative;
  box-shadow: 1px 2px 0 var(--paper-edge);
}
/* Single tape strip — cool blue-grey, like a note pinned to the journal */
.quest-card::before {
  content: '';
  position: absolute;
  top: -8px; left: 20px;
  width: 50px; height: 16px;
  border-radius: 1px;
  opacity: .55;
  transform: rotate(-2deg);
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    90deg,
    rgba(70,100,150,.25) 0, rgba(70,100,150,.25) 4px,
    rgba(100,140,180,.18) 4px, rgba(100,140,180,.18) 8px
  );
}
.quest-card:nth-child(odd)  { transform: rotate(-.2deg); }
.quest-card:nth-child(even) { transform: rotate(.18deg); }
.quest-card:nth-child(3n)   { transform: rotate(-.1deg); }
.quest-card:hover { background: var(--card-bg); box-shadow: 2px 4px 0 var(--paper-edge); transform: rotate(-.4deg) translateY(-2px) !important; }
.quest-card.done { opacity: .55; }
.quest-card.done .qc-name { text-decoration: line-through; }
.qc-icon { font-size: 1.4rem; flex-shrink: 0; }
.qc-info { flex: 1; min-width: 0; }
.qc-name { font-family: var(--font-display); font-size: .95rem; color: var(--ink); margin-bottom: 2px; }
.qc-desc { font-family: var(--font-hand); font-size: .78rem; color: var(--ink-light); font-style: italic; margin-bottom: 4px; }

/* Dark themes — desc needs to be much brighter */
[data-theme="galactic"] .qc-desc,
[data-theme="retro"] .qc-desc,
[data-theme="astrology"] .qc-desc { color: var(--ink2); font-size: .8rem; }
.qc-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.qc-check {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .85rem;
  transition: all .15s;
  font-family: var(--font-display);
}
.quest-card.done .qc-check { background: var(--success); border-color: var(--success); color: var(--paper); }
/* Locked quest */
.quest-card.hw-locked {
  border-color: rgba(192,57,43,.3);
  background: rgba(192,57,43,.04);
}
/* Weekly progress dots */
.weekly-dots { display: flex; gap: 3px; margin-top: 4px; }
.wd { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-faint); }
.wd.filled { background: var(--success); border-color: var(--success); }

/* ── Section sub-label (parent HQ) ── */
.sec-sub-label {
  font-family: var(--font-tag);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-light);
  padding: 12px var(--page-pad) 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Board posts ── */
.board-post {
  background: var(--card-bg);
  border: 1.5px solid var(--ink-faint);
  border-radius: var(--card-radius);
  padding: 11px 13px;
  margin: 0 var(--page-pad) 8px;
  filter: var(--sketch-filter);
}
.board-post:nth-child(odd)  { transform: rotate(-.2deg); }
.board-post:nth-child(even) { transform: rotate(.2deg); }
/* System posts — realm notifications */
.board-post-system {
  border-color: rgba(201,162,39,.35);
  background: rgba(201,162,39,.06);
}
.board-post-system .bp-text { color: var(--ink); }

/* Cross-class quest card — gold border, special treatment */
.quest-card.ccq {
  border-color: var(--accent2) !important;
  background: rgba(201,162,39,.06) !important;
}
.quest-card.ccq .qc-name { color: var(--accent2); }
.ccq-progress {
  display: flex; align-items: center; gap: 6px;
  margin-top: 4px;
}
.ccq-day { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--accent2); background: transparent; }
.ccq-day.done { background: var(--accent2); }
.bp-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bp-avatar { font-size: 1.2rem; }
.bp-name { font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--ink); flex: 1; }
.bp-time { font-family: var(--font-tag); font-size: .65rem; color: var(--ink-light); }
.bp-text { font-family: var(--font-hand); font-size: .85rem; color: var(--ink2); line-height: 1.5; }

/* Tutor chat messages */
.msg { max-width: 86%; padding: 9px 12px; border-radius: var(--card-radius); font-family: var(--font-hand); font-size: .88rem; line-height: 1.5; }
.msg.ai { background: rgba(255,255,255,.55); border: 1px solid var(--ink-faint); align-self: flex-start; color: var(--ink); }
.msg.user { background: var(--ink); color: var(--paper); align-self: flex-end; }

/* ── More menu ── */
.more-panel {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column; justify-content: flex-end;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
}
.more-panel.open { display: flex; animation: fadeIn .2s ease; }
.more-sheet {
  background: var(--paper);
  border-top: 1.5px solid var(--paper-edge);
  border-radius: 6px 6px 0 0;
  padding: 0 0 120px;
  animation: slideUp .3s cubic-bezier(.4,0,.2,1);
  max-height: 80dvh;
  overflow-y: auto;
  position: relative;
}
.more-handle { width: 36px; height: 3px; background: var(--ink-faint); border-radius: 2px; margin: 13px auto 4px; }
.more-hero-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px var(--page-pad) 12px;
  padding-right: 58px; /* clear the ✕ button */
  border-bottom: 1px solid var(--ink-faint);
}
.more-grid-label {
  font-family: var(--font-tag);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-light);
  padding: 12px var(--page-pad) 6px;
}
.more-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2px;
  padding: 0 10px;
}
.more-tile {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 5px;
  padding: 12px 6px;
  border-radius: var(--card-radius);
  cursor: pointer; transition: all .15s;
  background: none; border: none;
  position: relative;
}
.more-tile:hover, .more-tile:active { background: var(--card-bg); transform: scale(.96); }
.mt-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  border: 1px solid var(--ink-faint);
  background: var(--card-bg);
  transition: all .15s;
}
.more-tile:hover .mt-icon { transform: translateY(-2px); box-shadow: 2px 3px 0 var(--paper-edge); }
.mt-label { font-family: var(--font-tag); font-size: .62rem; color: var(--ink2); text-align: center; line-height: 1.2; }
.mt-badge {
  position: absolute; top: 8px; right: calc(50% - 32px);
  width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--paper); display: none;
}
.mt-badge.show { display: block; }
.more-divider { border: none; border-top: 1px solid var(--ink-faint); margin: 6px var(--page-pad); }

/* Settings list */
.settings-list { display: flex; flex-direction: column; gap: 1px; padding: 10px var(--page-pad); }
.settings-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px;
  background: var(--card-bg);
  border: 1px solid var(--ink-faint);
  border-radius: var(--card-radius);
  cursor: pointer; transition: all .15s;
  margin-bottom: 6px;
}
.settings-item:hover { background: rgba(255,255,255,.75); transform: translateX(2px); }
.si-icon { font-size: 1.3rem; flex-shrink: 0; }
.si-name { font-family: var(--font-display); font-size: .9rem; color: var(--ink); }
.si-desc { font-family: var(--font-tag); font-size: .7rem; color: var(--ink-light); }
.si-arrow { color: var(--ink-light); margin-left: auto; font-size: .9rem; }

/* Theme grid */
.theme-card {
  border-radius: var(--card-radius); padding: 12px 10px; cursor: pointer;
  transition: all .2s; border: 2px solid transparent; position: relative;
}
.theme-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.3) !important; }
.theme-card.active-theme { border-color: white !important; }
.tc-dots { display: flex; gap: 4px; margin-bottom: 7px; }
.tc-dot { width: 10px; height: 10px; border-radius: 50%; }
.tc-name { font-family: var(--font-display); font-size: .85rem; color: white; margin-bottom: 2px; }
.tc-desc { font-family: var(--font-tag); font-size: .65rem; color: rgba(255,255,255,.6); }
.tc-badge { position: absolute; top: 8px; right: 8px; font-family: var(--font-tag); font-size: .58rem; font-weight: 800; background: white; color: var(--ink); border-radius: 3px; padding: 1px 5px; }

/* Gallery */
.gallery-item { aspect-ratio:1; overflow:hidden; cursor:pointer; background:var(--paper2); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.gallery-item:hover img { transform:scale(1.04); }

/* Music player */
.music-card { border-radius:var(--card-radius); overflow:hidden; background:var(--card-bg); border:1.5px solid var(--ink-faint); transition:opacity .3s; }
.music-card.offline { opacity:.6; }
.mc-header { display:flex; align-items:center; gap:12px; padding:12px 14px 8px; }
.mc-art { width:48px; height:48px; border-radius:8px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; overflow:hidden; border:1px solid var(--ink-faint); }
.mc-art img { width:100%; height:100%; object-fit:cover; }
.mc-info { flex:1; min-width:0; }
.mc-title { font-family:var(--font-display); font-size:.88rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mc-artist { font-family:var(--font-tag); font-size:.65rem; color:var(--ink-light); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.mc-status { font-family:var(--font-tag); font-size:.6rem; color:var(--accent2); margin-top:2px; }
.mc-progress { padding:0 14px 4px; }
.mc-prog-bar { height:4px; background:var(--ink-faint); border-radius:2px; cursor:pointer; position:relative; margin-bottom:3px; }
.mc-prog-fill { height:100%; background:var(--accent2); border-radius:2px; transition:width .5s linear; }
.mc-times { display:flex; justify-content:space-between; font-family:var(--font-tag); font-size:.55rem; color:var(--ink-light); }
.mc-controls { display:flex; align-items:center; justify-content:center; gap:16px; padding:6px 14px; }
.mc-btn { background:none; border:none; font-size:1.1rem; cursor:pointer; padding:4px; opacity:.7; transition:opacity .15s; }
.mc-btn:hover { opacity:1; }
.mc-play { font-size:1.4rem; opacity:1; }
.mc-vol { display:flex; align-items:center; gap:8px; padding:4px 14px 10px; }
.mc-vol-slider { flex:1; accent-color:var(--accent2); }
.mc-offline-msg { font-family:var(--font-hand); font-size:.72rem; color:var(--ink-light); text-align:center; padding:6px 14px 10px; font-style:italic; }
.toggle { width:42px; height:23px; background:var(--ink-faint); border-radius:12px; position:relative; cursor:pointer; transition:background .2s; flex-shrink:0; }
.toggle.on { background:var(--success); }
.toggle::after { content:''; position:absolute; width:17px; height:17px; border-radius:50%; background:white; top:3px; left:3px; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle.on::after { left:22px; }

/* Duration buttons */
.dur-btns { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.dur-btn { font-family:var(--font-tag); font-size:.75rem; padding:6px 12px; background:rgba(255,255,255,.4); border:1.5px solid var(--ink-faint); border-radius:var(--card-radius); cursor:pointer; color:var(--ink-light); transition:all .15s; }
.dur-btn:hover { border-color:var(--accent); color:var(--accent); }
.dur-btn.sel { border-color:var(--accent2); color:var(--accent2); background:rgba(196,152,32,.1); }

/* Approval card */
.approval-card { background:rgba(255,255,255,.42); border:1.5px solid var(--ink-faint); border-radius:var(--card-radius); padding:11px 13px; margin-bottom:8px; }
.ac-quest { font-family:var(--font-display); font-size:.88rem; color:var(--ink); margin-bottom:2px; }
.ac-hero  { font-family:var(--font-tag); font-size:.7rem; color:var(--ink-light); }
.ac-btns  { display:flex; gap:6px; margin-top:8px; }
.ac-approve { font-family:var(--font-tag); font-size:.75rem; padding:6px 12px; background:rgba(107,143,94,.12); border:1.5px solid var(--success); border-radius:var(--card-radius); color:var(--success); cursor:pointer; transition:all .15s; }
.ac-deny    { font-family:var(--font-tag); font-size:.75rem; padding:6px 12px; background:rgba(192,57,43,.08); border:1.5px solid var(--danger);  border-radius:var(--card-radius); color:var(--danger);  cursor:pointer; transition:all .15s; }

/* Workout grid */
.wo-card {
  border-radius:var(--card-radius); padding:14px 12px; cursor:pointer;
  transition:all .2s; border:1.5px solid var(--ink-faint);
  background:rgba(255,255,255,.4);
  position:relative; overflow:visible;
}
.wo-card:hover { transform:translateY(-2px); box-shadow:2px 3px 0 var(--paper-edge); }
.wo-card.fullw { grid-column:1/-1; }
.wo-emoji { font-size:1.7rem; margin-bottom:5px; }
.wo-name  { font-family:var(--font-display); font-size:.88rem; color:var(--ink); margin-bottom:2px; }
.wo-time  { font-family:var(--font-tag); font-size:.65rem; color:var(--ink-light); }

/* ── Campfire / Wisp Animation Block ── */
          .wisp { animation: wispFloat var(--d,2.2s) ease-in-out infinite var(--dl,0s); transform-origin: center bottom; }
          @keyframes wispFloat {
            0%   { transform: translateY(0)   scaleX(1);   opacity: .9; }
            40%  { transform: translateY(-12px) scaleX(.85); opacity: .7; }
            70%  { transform: translateY(-22px) scaleX(.6);  opacity: .4; }
            100% { transform: translateY(-34px) scaleX(.3);  opacity: 0;  }
          }
          .spark { animation: sparkRise var(--sd,1.8s) ease-out infinite var(--sdl,0s); }
          @keyframes sparkRise {
            0%   { transform: translate(0,0) scale(1);             opacity: .9; }
            60%  { transform: translate(var(--sx,4px),-28px) scale(.7); opacity: .6; }
            100% { transform: translate(var(--sx,6px),-48px) scale(.2); opacity: 0;  }
          }
          .flame-body { animation: flameSway 3s ease-in-out infinite; transform-origin: center bottom; }
          @keyframes flameSway {
            0%,100% { transform: scaleX(1) scaleY(1); }
            30%     { transform: scaleX(1.03) scaleY(.98); }
            60%     { transform: scaleX(.97) scaleY(1.02); }
          }