/* batch4-goals — Goals hub, Check-in, Rankings, Badges, Badge earned (js/goals-hub.js), plus the trophy panel's level +
   streak strip and the reward chest art. The app's Goals palette (components/goals/gamified/kit.jsx G / G_DARK):
   dark is the site default, body.light switches. Every surface sets its own ink — nothing inherits the shared header. */
#goalsHubPage, .gh-modal, .quests-hub-strip {
  --gh-bg: #0f0f0f;
  --gh-card: #1f1f1f;
  --gh-inset: #272727;
  --gh-ink: #f1f1f1;
  --gh-sub: #aaaaaa;
  --gh-purple: #6d4df1;
  --gh-purple-text: #a78bfa;
  --gh-lav: #272727;
  --gh-mist: #3a3a3a;
  --gh-lilac: #a89fd6;
  --gh-gold: #ffd166;
  --gh-pink: #ff5f87;
  --gh-pink-bg: #3a1d26;
  --gh-hero: linear-gradient(160deg, #a78bfa 0%, #7c5cfc 55%, #5b3df0 100%);
  --gh-line: rgba(255, 255, 255, 0.08);
  --gh-me-row: linear-gradient(90deg, #372c4e, #1f1f1f);
  --gh-rank-bg: linear-gradient(135deg, #2a2142 0%, #251c3c 38%, #221a37 72%, #2b2245 100%);
  --gh-rank-border: rgba(167, 139, 250, 0.3);
  --gh-rank-name: #f1f1f1;
  --gh-rank-level: #aaaaaa;
  --gh-rank-xp: #c4b5fd;
  --gh-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  --gh-glass-line: rgba(255, 255, 255, 0.14);
  --gh-pill-bg: linear-gradient(135deg, rgba(39, 39, 39, 0.97), rgba(45, 38, 64, 0.9));
  --gh-pill-ink: #c4b5fd;
  --gh-tile-bg: #1f1f1f;
  --gh-tile-title: #f1f1f1;
  --gh-tile-sub: #aaaaaa;
  --gh-badge-bg: linear-gradient(180deg, #272727 0%, #232323 54%, #1f1f1f 100%);
  --gh-badge-line: rgba(219, 183, 107, 0.28);
  --gh-badge-title: #f1f1f1;
  --gh-track: rgba(255, 255, 255, 0.1);
  color: var(--gh-ink);
}
body.light #goalsHubPage, body.light .gh-modal, body.light .quests-hub-strip {
  --gh-bg: #f6f4ff;
  --gh-card: #ffffff;
  --gh-inset: #f6f4ff;
  --gh-ink: #241b4d;
  --gh-sub: #6f6896; /* the app's #8b83b5 is 3.3:1 on white; one step darker reads 5.1:1 */
  --gh-purple-text: #6d4df1;
  --gh-lav: #ece7ff;
  --gh-mist: #e6e1f8;
  --gh-lilac: #8b80c9;
  --gh-pink: #d61f52;
  --gh-pink-bg: #ffe3ea;
  --gh-line: rgba(36, 27, 77, 0.08);
  --gh-me-row: linear-gradient(90deg, #ece7ff, #f6f4ff);
  --gh-rank-bg: linear-gradient(135deg, #f3e9ff 0%, #e9daff 38%, #e7d8fa 72%, #f4ecff 100%);
  --gh-rank-border: rgba(239, 199, 171, 0.7);
  --gh-rank-name: #35139b;
  --gh-rank-level: #6f6396;
  --gh-rank-xp: #5a32c7;
  --gh-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
  --gh-glass-line: rgba(255, 255, 255, 0.62);
  --gh-pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.97), rgba(250, 247, 255, 0.9));
  --gh-pill-ink: #4b28a8;
  --gh-tile-bg: #fffefc;
  --gh-tile-title: #17153e;
  --gh-tile-sub: #6f6896;
  --gh-badge-bg: linear-gradient(180deg, #ffffff 0%, #fffdf9 54%, #fffbf4 100%);
  --gh-badge-line: rgba(219, 183, 107, 0.48);
  --gh-badge-title: #161e49;
  --gh-track: #eeeaf4;
}

/* ── Page frame ─────────────────────────────────────────────────────────────────────────────────────────────── */
#goalsHubPage { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 0 48px; box-sizing: border-box; }
#goalsHubPage *, .gh-modal *, .quests-hub-strip * { box-sizing: border-box; }
.gh-page { background: var(--gh-bg); border-radius: 22px; overflow: hidden; min-height: 70vh; padding-bottom: 28px; }
.gh-hub { padding: 0 18px; }
.gh-top { display: flex; align-items: center; gap: 14px; padding: 20px 0 6px; }
.gh-top.is-on-hero { justify-content: space-between; padding: 6px 0 0; }
.gh-title { margin: 0; font-size: 1.5rem; font-weight: 900; color: var(--gh-ink); letter-spacing: -0.01em; }
.gh-top.is-on-hero .gh-title { font-size: 1.15rem; color: #fff; flex: 1; text-align: center; }
.gh-top-spacer { width: 40px; }
.gh-back { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: var(--gh-ink); }
body.light .gh-back { background: rgba(23, 19, 63, 0.06); }
.gh-top.is-on-hero .gh-back { background: rgba(255, 255, 255, 0.22); color: #fff; }
.gh-back svg { width: 20px; height: 20px; }
.gh-back:focus-visible, .gh-tab:focus-visible, .gh-tile:focus-visible, .gh-badge:focus-visible, .gh-primary:focus-visible, .gh-link:focus-visible,
.gh-seg button:focus-visible, .gh-x:focus-visible, .gh-earned-btn:focus-visible, .quests-hub-strip a:focus-visible { outline: 2px solid var(--gh-gold); outline-offset: 2px; }
.gh-muted { color: var(--gh-sub); }
.gh-small { font-size: 0.78rem; }
.gh-strong { font-weight: 800; }
.gh-center { text-align: center; }
.gh-left { text-align: left !important; }
.gh-pad { padding: 24px 12px; }
.gh-pad-s { padding: 10px 12px; margin: 0; }
.gh-error { color: var(--gh-pink); font-weight: 700; margin: 0 0 6px; }
.gh-link { border: 0; background: none; color: var(--gh-purple-text); font-weight: 800; font: inherit; font-weight: 800; cursor: pointer; padding: 6px 8px; }
.gh-primary { display: block; margin: 0 auto; border: 0; border-radius: 999px; background: var(--gh-purple); color: #fff; font: inherit; font-size: 1rem;
  font-weight: 900; padding: 14px 38px; cursor: pointer; box-shadow: 0 10px 24px rgba(109, 77, 241, 0.35); }
.gh-primary[disabled] { opacity: 0.7; cursor: progress; }
.gh-bar { display: block; height: 9px; border-radius: 999px; background: var(--gh-track); overflow: hidden; }
.gh-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8e63ff, #5421e8); }

/* ── Rank card (XpRankHero) ─────────────────────────────────────────────────────────────────────────────────── */
.gh-rank { position: relative; margin-top: 14px; border-radius: 28px; border: 1.4px solid var(--gh-rank-border); background: var(--gh-rank-bg);
  padding: 16px 14px 14px; box-shadow: 0 8px 18px rgba(200, 168, 244, 0.18); overflow: hidden; }
.gh-rank-sparkles svg { position: absolute; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.85); filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9)); }
.gh-rank-sparkles svg:nth-child(1) { left: 5%; top: 8%; width: 24px; height: 24px; }
.gh-rank-sparkles svg:nth-child(2) { left: 18%; top: 12%; }
.gh-rank-sparkles svg:nth-child(3) { right: 3%; top: 54%; width: 22px; height: 22px; }
.gh-rank-sparkles svg:nth-child(4) { left: 40%; top: 9%; width: 14px; height: 14px; }
body:not(.light) .gh-rank-sparkles svg { color: rgba(255, 255, 255, 0.35); filter: none; }
.gh-wallet { position: relative; display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 12px; }
.gh-pill { display: inline-flex; align-items: center; gap: 7px; min-width: 88px; justify-content: center; height: 40px; padding: 0 14px; border-radius: 999px;
  background: var(--gh-pill-bg); border: 1.5px solid rgba(177, 142, 214, 0.5); box-shadow: 0 4px 7px rgba(142, 108, 174, 0.24); }
.gh-pill b { color: var(--gh-pill-ink); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gh-rank-glass { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 22px; background: var(--gh-glass-bg);
  border: 1px solid var(--gh-glass-line); }
.gh-rank-art { width: 104px; height: 104px; flex: 0 0 104px; display: grid; place-items: center; }
.gh-rank-art img { width: 132px; height: 132px; object-fit: contain; margin: -14px; }
.gh-rank-art-empty { width: 76px; height: 76px; border-radius: 50%; background: rgba(181, 174, 205, 0.24); border: 1px solid rgba(142, 132, 179, 0.26); }
.gh-rank-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.gh-rank-name { font-size: 1.6rem; font-weight: 900; color: var(--gh-rank-name); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-rank-row { display: flex; justify-content: space-between; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--gh-rank-level); }
.gh-rank-xp { color: var(--gh-rank-xp); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-rank .gh-error, .gh-rank .gh-muted { margin: 0; }

/* ── Period tabs + deck ─────────────────────────────────────────────────────────────────────────────────────── */
.gh-tabs { display: flex; margin: 16px 0 6px; padding: 5px; border-radius: 999px; background: var(--gh-lav); border: 1px solid var(--gh-line); }
.gh-tab { flex: 1; border: 0; background: transparent; border-radius: 999px; padding: 11px 6px; font: inherit; font-weight: 800; font-size: 0.95rem;
  color: var(--gh-sub); cursor: pointer; }
.gh-tab.is-on { background: var(--gh-card); color: var(--gh-ink); box-shadow: 0 4px 12px rgba(30, 12, 90, 0.12); }
.gh-deck.quests-list { max-height: none; overflow: visible; padding: 0; color: var(--gh-ink); }
.gh-deck .quest-pool-header, .gh-deck .gv2-card { margin-left: 0; margin-right: 0; }
.gh-deck .gv2-footnote { margin-left: 0; margin-right: 0; }

/* ── Action tiles (GoalsActionRow) ──────────────────────────────────────────────────────────────────────────── */
.gh-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.gh-tile { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 190px; padding: 10px 12px 14px; border-radius: 24px;
  background: var(--gh-tile-bg); border: 1px solid; text-decoration: none; overflow: hidden; box-shadow: 0 9px 24px rgba(50, 34, 92, 0.1); cursor: pointer; }
.gh-tile-check-in { border-color: rgba(248, 174, 188, 0.55); }
.gh-tile-rankings { border-color: rgba(184, 160, 247, 0.58); }
.gh-tile-badges { border-color: rgba(242, 193, 107, 0.56); }
.gh-tile::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.gh-tile-check-in::before { background: rgba(255, 126, 147, 0.1); }
.gh-tile-rankings::before { background: rgba(133, 77, 246, 0.1); }
.gh-tile-badges::before { background: rgba(244, 174, 46, 0.1); }
.gh-tile-art { position: relative; width: 100%; max-width: 120px; aspect-ratio: 1; }
.gh-tile-art img { width: 100%; height: 100%; object-fit: contain; }
.gh-tile-title { margin-top: auto; align-self: stretch; font-size: 1.05rem; font-weight: 900; color: var(--gh-tile-title); }
.gh-tile-sub { align-self: stretch; padding-right: 14px; font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: var(--gh-tile-sub); }
.gh-tile-chev { position: absolute; right: 9px; bottom: 14px; width: 17px; height: 17px; color: var(--gh-purple-text); }
.gh-tile-chev svg { width: 100%; height: 100%; }
.gh-unread { position: absolute; top: 2px; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #e5375f; color: #fff;
  font-size: 0.68rem; font-weight: 900; display: grid; place-items: center; }
.gh-unread.is-inline { position: static; display: inline-grid; margin-left: 4px; vertical-align: 1px; }

/* ── Purple hero (check-in, rankings, badges) ───────────────────────────────────────────────────────────────── */
.gh-hero { position: relative; background: var(--gh-hero); padding: 16px 22px 26px; color: #fff; overflow: hidden; }
.gh-hero-compact { padding-bottom: 22px; }
.gh-glass { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; font-size: 0.85rem; white-space: nowrap; }
.gh-glass svg { width: 14px; height: 14px; color: #9be8ff; }
.gh-rankings .gh-glass svg { color: var(--gh-gold); }
.gh-glass b { color: #fff; font-weight: 800; }
.gh-hero-kicker { margin: 18px 0 2px; text-align: center; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.gh-hero-title { margin: 0; text-align: center; font-size: 1.85rem; font-weight: 900; color: #fff; }
.gh-gift { width: 132px; height: 132px; margin: 22px auto 4px; border-radius: 30px; background: linear-gradient(160deg, #ff9db6, #ff6b8f); display: grid; place-items: center;
  box-shadow: 0 20px 44px rgba(30, 12, 90, 0.35); animation: gh-float 3.4s ease-in-out infinite; }
.gh-gift span { width: 74px; height: 74px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #ff6b8f; }
.gh-gift svg { width: 36px; height: 36px; }
@keyframes gh-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.gh-page-check-in { background: var(--gh-card); padding-bottom: 0; }
.gh-sheet { margin-top: -18px; position: relative; background: var(--gh-card); border-radius: 30px 30px 0 0; padding: 28px 22px 10px; display: flex;
  flex-direction: column; gap: 20px; min-height: 360px; }

/* ── Check-in milestones (hex track) ────────────────────────────────────────────────────────────────────────── */
.gh-milestones { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 6px; }
.gh-ms { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.gh-hex { width: 58px; height: 64px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--gh-mist); color: var(--gh-lilac); font-weight: 900; font-size: 1.1rem; }
.gh-hex svg { width: 22px; height: 22px; }
.gh-ms.is-done .gh-hex, .gh-ms.is-today .gh-hex { background: linear-gradient(160deg, var(--gh-gold), #ff9f43); color: #fff; }
.gh-ms.is-today .gh-hex { transform: scale(1.12); }
.gh-hex-inner { width: 48px; height: 54px; display: grid; place-items: center; clip-path: inherit; background: #fff; color: #c46a00; }
.gh-ms.is-gift .gh-hex { background: linear-gradient(160deg, #c9bcff, #a78bfa); color: #fff; }
.gh-ms-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; color: var(--gh-lilac); white-space: nowrap; }
.gh-ms.is-done .gh-ms-label, .gh-ms.is-today .gh-ms-label { color: #e07f0a; }
body:not(.light) .gh-ms.is-done .gh-ms-label, body:not(.light) .gh-ms.is-today .gh-ms-label { color: #ffb15c; }
.gh-explain { margin: 0 auto; max-width: 320px; text-align: center; font-weight: 600; line-height: 1.6; color: var(--gh-sub); }
.gh-explain b { color: var(--gh-purple-text); }
.gh-checked { margin: 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 1.05rem; font-weight: 900; color: var(--gh-pink); }
.gh-checked span { width: 26px; height: 26px; border-radius: 50%; background: var(--gh-pink-bg); display: grid; place-items: center; }
.gh-checked svg { width: 15px; height: 15px; }
.gh-streak { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--gh-inset); }
.gh-streak-label { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: var(--gh-ink); }
.gh-streak-label i { width: 19px; height: 19px; color: #ff9f43; display: inline-grid; }
.gh-streak-xp { font-size: 0.82rem; font-weight: 800; color: var(--gh-purple-text); white-space: nowrap; }

/* ── Rankings ───────────────────────────────────────────────────────────────────────────────────────────────── */
.gh-seg { display: flex; margin-top: 18px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.gh-seg button { flex: 1; border: 0; border-radius: 999px; padding: 9px; background: transparent; color: rgba(255, 255, 255, 0.92); font: inherit; font-weight: 900; cursor: pointer; }
.gh-seg button.is-on { background: #fff; color: #5b3df0; box-shadow: 0 4px 12px rgba(30, 12, 90, 0.25); }
.gh-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; padding-top: 20px; }
.gh-pod { display: flex; flex-direction: column; align-items: center; gap: 5px; max-width: 96px; position: relative; }
.gh-pod b { margin-top: 6px; font-size: 0.8rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.gh-pod small { font-size: 0.74rem; font-weight: 900; color: var(--gh-gold); }
.gh-pod-1 { padding-top: 14px; }
.gh-crown { position: absolute; top: -6px; width: 22px; height: 22px; color: var(--gh-gold); z-index: 1; }
.gh-pod-av { position: relative; display: block; }
.gh-pod-av .gh-av { width: 56px; height: 56px; border: 3px solid rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.gh-pod-1 .gh-pod-av .gh-av { width: 72px; height: 72px; border-color: var(--gh-gold); font-size: 1.1rem; }
.gh-pod-av em { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff;
  display: grid; place-items: center; font-style: normal; font-size: 0.7rem; font-weight: 900; color: #fff; background: #c98d5f; }
.gh-pod-1 .gh-pod-av em { background: #c27a00; }
.gh-pod-2 .gh-pod-av em { background: #7d70b8; }
.gh-av { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; display: grid; place-items: center; font-weight: 900; font-size: 0.75rem; }
.gh-av-initials { background: rgba(167, 139, 250, 0.24); color: var(--gh-ink); }
.gh-av-initials.hue-0 { background: rgba(255, 209, 102, 0.24); } .gh-av-initials.hue-1 { background: rgba(126, 232, 162, 0.22); }
.gh-av-initials.hue-2 { background: rgba(94, 193, 255, 0.22); } .gh-av-initials.hue-3 { background: rgba(255, 176, 196, 0.26); }
.gh-av-initials.is-me { background: linear-gradient(160deg, #a78bfa, #6d4df1); color: #fff; }
.gh-pod .gh-av-initials { background: linear-gradient(160deg, #8f6ffb, #6d4df1); color: #fff; }
.gh-card { background: var(--gh-card); border-radius: 26px; box-shadow: 0 14px 30px rgba(78, 55, 190, 0.14); }
.gh-board { margin: -14px 18px 0; position: relative; padding: 10px 8px; }
.gh-rows { list-style: none; margin: 0; padding: 0; }
.gh-row { display: flex; align-items: center; gap: 13px; padding: 12px; border-radius: 18px; }
.gh-row.is-me { background: var(--gh-me-row); }
.gh-row-rank { width: 30px; text-align: center; font-weight: 900; color: var(--gh-sub); font-variant-numeric: tabular-nums; }
.gh-row.is-me .gh-row-rank { color: var(--gh-purple-text); }
.gh-row-rank.is-first { color: #c27a00; }
body:not(.light) .gh-row-rank.is-first { color: #f5a623; }
.gh-row-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gh-row-who b { font-weight: 800; color: var(--gh-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-row-who small { font-size: 0.74rem; font-weight: 700; color: var(--gh-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-row-xp { font-weight: 900; font-size: 0.86rem; color: var(--gh-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-row.is-me .gh-row-xp { color: var(--gh-purple-text); }
.gh-more { display: block; margin: 4px auto 0; }
.gh-foot { margin: 14px 18px 0; }

/* ── Badges grid (PremiumBadgeGrid / PremiumBadgeCard) ──────────────────────────────────────────────────────── */
.gh-collect { height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.25); overflow: hidden; margin-top: 8px; }
.gh-collect span { display: block; height: 100%; border-radius: inherit; background: var(--gh-gold); }
.gh-badges .gh-hero-kicker { margin-top: 18px; }
.gh-badge-wrap { padding: 18px; }
.gh-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gh-badge { --tier: #7c7890; --tier-glow: rgba(120, 112, 150, 0.12); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 16px;
  border-radius: 28px; border: 1px solid var(--gh-badge-line); background: var(--gh-badge-bg); box-shadow: 0 8px 16px rgba(109, 86, 55, 0.1); cursor: pointer; font: inherit; color: inherit; }
.gh-badge.tier-1 { --tier: #b66a24; --tier-glow: rgba(181, 105, 36, 0.17); } .gh-badge.tier-2 { --tier: #6a7588; --tier-glow: rgba(105, 127, 160, 0.18); }
.gh-badge.tier-3 { --tier: #a96500; --tier-glow: rgba(232, 159, 17, 0.22); } .gh-badge.tier-4 { --tier: #9229d8; --tier-glow: rgba(164, 56, 232, 0.23); }
.gh-badge.tier-5 { --tier: #d51f38; --tier-glow: rgba(221, 40, 62, 0.19); }
body:not(.light) .gh-badge { --tier: #cfcbdd; }
body:not(.light) .gh-badge.tier-1 { --tier: #d6924f; } body:not(.light) .gh-badge.tier-2 { --tier: #bfc8d4; } body:not(.light) .gh-badge.tier-3 { --tier: #ffc64a; }
body:not(.light) .gh-badge.tier-4 { --tier: #c260ff; } body:not(.light) .gh-badge.tier-5 { --tier: #ff6375; }
.gh-badge-art { width: 78%; max-width: 150px; aspect-ratio: 1; display: grid; place-items: center; position: relative; }
.gh-badge-art::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: var(--tier-glow); }
.gh-badge-art img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.gh-badge.tier-0 .gh-badge-art img { opacity: 0.38; }
.gh-badge-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(0.82rem, 2.6vw, 1.15rem); color: var(--gh-badge-title); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gh-badge-tier { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tier); }
.gh-gems { display: flex; gap: 5px; margin-top: 8px; }
.gh-gems i, .gh-roadmap i { width: 10px; height: 10px; transform: rotate(45deg); border-radius: 2px; opacity: 0.28; background: #8e8a9c; }
.gh-gems i.is-on, .gh-roadmap li.is-on i { opacity: 1; }
.gh-gems i.is-current, .gh-roadmap li.is-current i { transform: rotate(45deg) scale(1.25); }
i.gem-1 { background: #b66a24; } i.gem-2 { background: #9aa6b7; } i.gem-3 { background: #e0a100; } i.gem-4 { background: #9229d8; } i.gem-5 { background: #d51f38; }

/* ── Pop-ups (always centred, also at phone width) ──────────────────────────────────────────────────────────── */
.gh-modal { position: fixed; inset: 0; z-index: 11000; display: grid; place-items: center; padding: 16px; background: rgba(8, 6, 20, 0.62); }
.gh-modal-card { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 26px; background: var(--gh-bg); color: var(--gh-ink);
  padding: 18px 20px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); animation: gh-pop 0.22s ease-out; outline: none; }
@keyframes gh-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.gh-modal-head { display: flex; align-items: center; justify-content: space-between; }
.gh-modal-head b { font-weight: 900; }
.gh-x { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--gh-lav); color: var(--gh-sub); cursor: pointer; }
.gh-x svg { width: 18px; height: 18px; }
.gh-detail-art { width: 180px; height: 180px; margin: 6px auto 8px; animation: gh-turn 6s ease-in-out infinite; }
.gh-detail-art img { width: 100%; height: 100%; object-fit: contain; }
.gh-detail-art.tier-0 img { opacity: 0.4; }
@keyframes gh-turn { 0%, 100% { transform: perspective(600px) rotateY(-14deg); } 50% { transform: perspective(600px) rotateY(14deg); } }
.gh-detail-title { margin: 0; text-align: center; font-size: 1.55rem; font-weight: 900; }
.gh-detail-tier { margin: 3px 0 0; text-align: center; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.12em; color: var(--gh-purple-text); }
.gh-detail-tier.is-locked { color: var(--gh-sub); }
.gh-detail-meaning { margin: 18px 0 12px; text-align: center; color: var(--gh-sub); font-weight: 600; line-height: 1.5; }
.gh-detail-sec { background: var(--gh-card); border-radius: 18px; padding: 14px 16px; margin-bottom: 10px; }
.gh-detail-sec b { font-size: 0.86rem; font-weight: 800; }
.gh-detail-sec p { margin: 4px 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--gh-sub); }
.gh-detail-progress { border-radius: 20px; background: var(--gh-lav); padding: 14px 16px; margin-top: 4px; }
.gh-detail-progress b { color: var(--gh-purple-text); font-weight: 900; }
.gh-detail-progress p { margin: 4px 0 0; font-size: 0.84rem; font-weight: 600; }
.gh-accent { color: var(--gh-purple-text); font-weight: 800 !important; }
.gh-roadmap { margin-top: 18px; }
.gh-roadmap > b { display: block; font-weight: 900; margin-bottom: 12px; }
.gh-roadmap ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; }
.gh-roadmap li { width: 19%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gh-roadmap li i { width: 22px; height: 22px; border-radius: 5px; }
.gh-roadmap li span { font-size: 0.6rem; font-weight: 900; color: var(--gh-ink); letter-spacing: 0.04em; }
.gh-roadmap li:not(.is-on) span { color: var(--gh-lilac); }
.gh-roadmap li small { font-size: 0.72rem; font-weight: 700; color: var(--gh-sub); }
.gh-modal-ok { margin-top: 20px; }
/* Badge earned! — the app keeps its purple gradient, gold and white in both modes. */
.gh-modal-earned .gh-modal-card { background: linear-gradient(160deg, #a78bfa 0%, #7c5cfc 55%, #5b3df0 100%); color: #fff; padding: 26px 22px 28px; }
.gh-earned { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.gh-earned h2 { margin: 6px 0 0; font-size: 1.65rem; font-weight: 900; color: #fff; }
.gh-earned-art { position: relative; width: 220px; height: 220px; display: grid; place-items: center; }
.gh-earned-art img { position: relative; width: 100%; height: 100%; object-fit: contain; animation: gh-float 3.4s ease-in-out infinite; }
.gh-ripple { position: absolute; inset: 10%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); animation: gh-ripple 2.4s ease-out infinite; }
@keyframes gh-ripple { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.25); opacity: 0; } }
.gh-earned-spark { position: absolute; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.6); }
.gh-earned-spark.s1 { left: 6px; top: 40px; } .gh-earned-spark.s2 { right: 10px; top: 20px; }
.gh-earned-name { margin: 0; font-size: 1.3rem; font-weight: 900; color: #fff; }
.gh-earned-line { margin: 0; max-width: 300px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.gh-earned-pos { margin: 0; font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.gh-earned-err { margin: 0; color: #ffe08a; font-weight: 700; font-size: 0.84rem; }
.gh-earned-btn { margin-top: 8px; border: 0; border-radius: 999px; background: #fff; color: #5b3df0; font: inherit; font-weight: 900; font-size: 1rem; padding: 14px 44px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gh-gift, .gh-earned-art img, .gh-ripple, .gh-detail-art, .gh-modal-card { animation: none; } }

/* ── Trophy panel: reward chest art + level / streak strip ──────────────────────────────────────────────────── */
.gv2-reward { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.55rem; align-items: center; }
.gv2-reward > :not(.gv2-reward-art) { grid-column: 2; }
.gv2-reward .quest-pool-row { flex-wrap: wrap; row-gap: 0.4rem; }
.gv2-reward .quest-pool-meta { flex: 1 1 9rem; }
.gv2-reward-art { grid-column: 1; grid-row: 1 / span 4; width: 64px; height: 64px; object-fit: contain; align-self: center; }
.gh-deck .gv2-reward { grid-template-columns: 96px minmax(0, 1fr); }
.gh-deck .gv2-reward-art { width: 96px; height: 96px; }
.quests-hub-strip { margin: 0.4rem 1.1rem 0.2rem; display: flex; flex-direction: column; gap: 8px; }
.quests-hub-strip[hidden] { display: none; }
.quests-hub-strip a { text-decoration: none; color: var(--gh-ink); }
.qhs-level { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--gh-rank-bg); border: 1px solid var(--gh-rank-border); }
.qhs-level img { width: 56px; height: 56px; margin: -6px -4px -6px -6px; object-fit: contain; flex: 0 0 auto; }
.qhs-art-empty { width: 36px; height: 36px; border-radius: 50%; background: rgba(181, 174, 205, 0.24); flex: 0 0 auto; }
.qhs-level-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qhs-level-body b { font-weight: 900; color: var(--gh-rank-name); font-size: 0.95rem; }
.qhs-level-body small { display: flex; justify-content: space-between; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--gh-rank-level); }
.qhs-level-body small span:last-child { color: var(--gh-rank-xp); white-space: nowrap; }
.qhs-level .gh-bar { height: 6px; }
.qhs-chev, .qhs-flame { width: 16px; height: 16px; flex: 0 0 auto; display: inline-grid; color: var(--gh-purple-text); }
.qhs-flame { color: #ff9f43; }
.qhs-streak { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--gh-line); font-size: 0.84rem; }
body.light .qhs-streak { background: var(--gh-inset); }
.qhs-streak b { flex: 1; font-weight: 800; color: var(--gh-ink); }
.qhs-done { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--gh-pink); }
.qhs-done svg { width: 13px; height: 13px; }
.qhs-cta { padding: 4px 12px; border-radius: 999px; background: var(--gh-purple); color: #fff; font-weight: 800; font-size: 0.78rem; }
.qhs-links { display: flex; gap: 6px; }
.qhs-links a { flex: 1; text-align: center; padding: 6px 4px; border-radius: 999px; border: 1px solid rgba(167, 139, 250, 0.35); color: var(--gh-purple-text) !important;
  font-size: 0.78rem; font-weight: 800; white-space: nowrap; }

/* ── Phone width ────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .gh-page { border-radius: 0; }
  .gh-hub { padding: 0 14px; }
  .gh-rank-art { width: 78px; height: 78px; flex-basis: 78px; }
  .gh-rank-art img { width: 100px; height: 100px; margin: -11px; }
  .gh-rank-name { font-size: 1.3rem; }
  .gh-rank-row { font-size: 0.74rem; }
  .gh-pill { height: 34px; min-width: 72px; padding: 0 10px; }
  .gh-pill b { font-size: 1rem; }
  .gh-pill img { width: 18px; height: 18px; }
  .gh-tiles { gap: 8px; }
  .gh-tile { min-height: 160px; padding: 8px 8px 12px; border-radius: 20px; }
  .gh-tile-title { font-size: 0.9rem; }
  .gh-tile-sub { font-size: 0.7rem; }
  .gh-hero { padding: 12px 16px 22px; }
  .gh-hero-title { font-size: 1.45rem; }
  .gh-gift { width: 104px; height: 104px; border-radius: 24px; }
  .gh-gift span { width: 60px; height: 60px; }
  .gh-sheet { padding: 22px 16px 10px; }
  .gh-hex { width: 46px; height: 51px; font-size: 0.95rem; }
  .gh-hex-inner { width: 38px; height: 43px; }
  .gh-ms-label { font-size: 0.58rem; letter-spacing: 0.02em; }
  .gh-badge-wrap { padding: 14px; }
  .gh-badge-grid { gap: 10px; }
  .gh-badge { border-radius: 22px; padding: 10px 4px 12px; }
  .gh-badge-tier { font-size: 0.6rem; letter-spacing: 0.08em; }
  .gh-gems { gap: 4px; }
  .gh-gems i { width: 8px; height: 8px; }
  .gh-board { margin: -14px 12px 0; }
  .gh-row { gap: 10px; padding: 10px 8px; }
  .gh-deck .gv2-reward { grid-template-columns: 60px minmax(0, 1fr); }
  .gh-deck .gv2-reward-art { width: 60px; height: 60px; }
}