:root {
  --bg0: #07111f;
  --bg1: rgba(11, 18, 33, 0.86);
  --bg2: rgba(19, 29, 50, 0.9);
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.16);
  --text: #eff5ff;
  --muted: rgba(239,245,255,0.72);
  --gold: #f6c34a;
  --gold-2: #ffdf8a;
  --violet: #7c5cff;
  --violet-2: #a88cff;
  --cyan: #49b8ff;
  --green: #35d07f;
  --red: #ff5c7a;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  --radius-xl: 30px;
  --radius-lg: 24px;
  --radius-md: 18px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; margin: 0; background: linear-gradient(145deg, #050b15 0%, #081224 46%, #0a1630 100%); color: var(--text); font-family: Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
body::before, body::after { content: ""; position: fixed; inset: auto; width: 45vw; height: 45vw; border-radius: 50%; pointer-events: none; filter: blur(20px); opacity: .3; z-index: 0; }
body::before { top: -8vw; right: -10vw; background: radial-gradient(circle, rgba(124,92,255,.42), transparent 55%); }
body::after { bottom: -14vw; left: -12vw; background: radial-gradient(circle, rgba(246,195,74,.22), transparent 55%); }
#app { position: relative; z-index: 1; }
.shell { max-width: 1440px; margin: 0 auto; padding: 20px 20px calc(540px + env(safe-area-inset-bottom)); }
.layout { display: grid; grid-template-columns: 330px minmax(0,1fr) 370px; gap: 18px; align-items: start; }
.panel { position: relative; background: linear-gradient(180deg, rgba(12,18,31,.88), rgba(8,13,24,.94)); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); overflow: hidden; }
.panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); pointer-events: none; }
.panel-inner { padding: 18px; }
.brand { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.brand-mark { width: 54px; height: 54px; border-radius: 18px; display:grid; place-items:center; font-size: 26px; background: linear-gradient(135deg, rgba(124,92,255,.8), rgba(246,195,74,.9)); box-shadow: 0 16px 32px rgba(124,92,255,.18); }
.brand-title strong { display:block; font-size: 22px; letter-spacing: .2px; }
.brand-title span { display:block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.chips { display:flex; flex-wrap:wrap; gap: 8px; margin: 14px 0 18px; }
.chip { display:inline-flex; align-items:center; gap: 8px; padding: 10px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text); font-size: 12px; }
.chip.gold { background: linear-gradient(135deg, rgba(246,195,74,.16), rgba(246,195,74,.04)); color: var(--gold-2); border-color: rgba(246,195,74,.18); }
.chip.violet { background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(124,92,255,.05)); color: var(--violet-2); border-color: rgba(124,92,255,.22); }
.chip-btn { cursor:pointer; font: inherit; padding: 10px 12px; }
.chip-btn:hover { transform: translateY(-1px); }
.section-card, .feed-card, .quest-card, .offer-card, .stat-card { padding: 16px; border-radius: 22px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.section-card + .section-card, .feed-card + .feed-card { margin-top: 12px; }
.hero { padding: 18px; min-height: 100%; }
.hero-top { display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; margin-bottom: 16px; }
.eyebrow { display:inline-flex; align-items:center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); }
.pulse-dot { display:inline-block; width: 8px; height: 8px; border-radius:50%; background: var(--green); box-shadow: 0 0 0 0 rgba(53,208,127,.45); animation: ping 2s infinite; }
.hero h1 { margin: 12px 0 10px; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; }
.hero .subtitle, .section-card p, .offer-card p, .quest-card p, .feed-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.hero-top-right { display:flex; gap: 12px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.hero-badges { display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.hero-badges .chip strong { margin-left: 4px; }
.hero-grid { display:grid; grid-template-columns: minmax(0, 1.18fr) minmax(290px, .82fr); gap: 16px; }
.hero-card { padding: 18px; border-radius: 28px; background: radial-gradient(circle at 50% 10%, rgba(73,184,255,.16), transparent 24%), linear-gradient(180deg, rgba(16,29,53,.9), rgba(6,13,24,.96)); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.stat-card .label { display:block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.stat-card .value { display:flex; align-items:baseline; gap: 8px; }
.stat-card .value strong { font-size: 28px; letter-spacing: .2px; }
.stat-card.compact .value strong { font-size: 22px; }
.cat-wrap { position: relative; display:grid; place-items:center; min-height: 400px; margin-top: 14px; border-radius: 28px; overflow:hidden; background: linear-gradient(180deg, rgba(18,30,55,.9), rgba(6,13,24,.96)); border: 1px solid rgba(255,255,255,.08); }
.cat-wrap::before { content: ""; position: absolute; width: 260px; height: 260px; border-radius:50%; background: radial-gradient(circle, rgba(246,195,74,.22) 0%, rgba(124,92,255,.12) 42%, transparent 72%); filter: blur(8px); animation: pulseGlow 4.5s ease-in-out infinite; }
.cat-wrap::after { content: ""; position: absolute; inset: auto 12% 18px; height: 44px; border-radius: 999px; background: radial-gradient(circle, rgba(0,0,0,.34), transparent 72%); filter: blur(10px); opacity: .8; }
.cat-mascot { position: relative; z-index: 1; width: min(100%, 420px); filter: drop-shadow(0 28px 44px rgba(0,0,0,.42)); animation: floaty 5.8s ease-in-out infinite; }
.cat-mascot svg, .cat-mascot img { width: 100%; height: auto; display:block; border-radius: 24px; }
.hero-art { object-fit: cover; }
.floats { position:absolute; inset:0; pointer-events:none; }
.float-dot { position:absolute; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,.06)); animation: drift 7s linear infinite; }
.float-dot.one { width:8px; height:8px; top:18%; left:18%; }
.float-dot.two { width:6px; height:6px; top:14%; right:18%; animation-duration:7.2s; }
.float-dot.three { width:10px; height:10px; bottom:18%; left:20%; animation-duration:9.3s; }
.float-dot.four { width:7px; height:7px; bottom:16%; right:18%; animation-duration:8.8s; }
.actions { display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; }
.btn { appearance:none; border:0; border-radius: 18px; padding: 14px 16px; font: inherit; font-weight: 700; color: var(--text); cursor:pointer; transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease; display:inline-flex; align-items:center; justify-content:center; gap: 10px; min-height: 52px; box-shadow: 0 12px 28px rgba(0,0,0,.20); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: linear-gradient(135deg, #ffd86b 0%, #f6c34a 42%, #c98d12 100%); color: #1d1302; box-shadow: 0 16px 34px rgba(246,195,74,.28); }
.btn-secondary { background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(124,92,255,.08)); border: 1px solid rgba(124,92,255,.26); }
.btn-ghost { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.btn:hover { transform: translateY(-1px); }
.side-stack, .center-stack { display:grid; gap: 18px; }
.section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 12px; }
.section-title h2, .section-title h3 { margin: 6px 0; font-size: 18px; }
.section-title .small { color: var(--muted); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.badge { padding: 9px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color: var(--gold-2); font-size: 12px; white-space:nowrap; }
.feed, .quest-list, .offer-list { display:grid; gap: 12px; }
.feed-card, .quest-card, .offer-card { display:block; }
.quest-head, .offer-head { display:flex; justify-content:space-between; gap: 10px; align-items:flex-start; margin-bottom: 10px; }
.reward { font-size: 12px; padding: 7px 10px; border-radius: 999px; background: rgba(246,195,74,.12); border: 1px solid rgba(246,195,74,.18); color: var(--gold-2); white-space:nowrap; }
.meter { margin-top: 12px; }
.progress-meta { display:flex; justify-content:space-between; gap:10px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.bar { height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow:hidden; }
.bar > span { display:block; height: 100%; width: var(--progress, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--gold)); box-shadow: 0 0 16px rgba(246,195,74,.25); transition: width .35s ease; }
.shop-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.offer-card.premium { background: radial-gradient(circle at 20% 20%, rgba(124,92,255,.20), transparent 28%), rgba(255,255,255,.03); }
.offer-card.pass { background: radial-gradient(circle at 18% 18%, rgba(246,195,74,.20), transparent 28%), rgba(255,255,255,.03); }
.price { display:inline-flex; align-items:center; gap: 7px; margin-top: 8px; padding: 7px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); color: var(--text); font-size: 12px; }
.tabbar-wrap { position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50; margin-top: 0; pointer-events: none; }
.tabbar { pointer-events: auto; display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px; width: min(760px, calc(100vw - 24px)); padding: 10px; margin: 0 auto; border-radius: 22px; background: rgba(8,14,27,.86); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0,0,0,.30); }
.tabbar button { border:0; background: transparent; color: var(--muted); border-radius: 16px; padding: 12px 8px; display:grid; place-items:center; gap: 5px; font: inherit; font-size: 11px; cursor:pointer; transition: background .16s ease, color .16s ease, transform .16s ease; }
.tabbar button .icon { font-size: 18px; line-height: 1; }
.tabbar button.active { color: #1e1600; background: linear-gradient(135deg, #ffd86b 0%, #f6c34a 42%, #c98d12 100%); box-shadow: 0 10px 24px rgba(246,195,74,.18); }
.toast { position: fixed; left:50%; top: calc(16px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-20px); background: rgba(6,12,22,.94); color: var(--text); border: 1px solid rgba(255,255,255,.08); padding: 12px 16px; border-radius: 999px; box-shadow: 0 16px 40px rgba(0,0,0,.42); opacity:0; transition: opacity .22s ease, transform .22s ease; pointer-events:none; z-index:120; max-width: min(92vw, 540px); text-align:center; font-size: 14px; }
.toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.reward-burst { position: fixed; z-index: 40; pointer-events: none; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,.35); animation: riseUp 900ms ease-out forwards; }
@keyframes floaty { 0%,100%{transform: translateY(0) scale(1);} 50%{transform: translateY(-8px) scale(1.01);} }
@keyframes pulseGlow { 0%,100%{opacity:.72; transform: scale(1);} 50%{opacity:1; transform: scale(1.08);} }
@keyframes drift { 0%{transform: translateY(0) translateX(0); opacity:.55;} 50%{opacity:1;} 100%{transform: translateY(-18px) translateX(10px); opacity:.58;} }
@keyframes ping { 0%{box-shadow:0 0 0 0 rgba(53,208,127,.45);} 70%{box-shadow:0 0 0 10px rgba(53,208,127,0);} 100%{box-shadow:0 0 0 0 rgba(53,208,127,0);} }
@keyframes riseUp { 0%{opacity:0; transform: translate3d(var(--x), var(--y), 0) scale(.9);} 20%{opacity:1;} 100%{opacity:0; transform: translate3d(calc(var(--x) + 8px), calc(var(--y) - 88px), 0) scale(1.12);} }
@media (max-width: 1280px) { .layout { grid-template-columns: 1fr 1fr; } .sidebar { grid-column: 1 / -1; } .rightbar { grid-column: 1 / -1; } .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .shell{padding:12px 12px calc(420px + env(safe-area-inset-bottom));} .layout{grid-template-columns:1fr;} .panel{border-radius:24px;} .stats{grid-template-columns:1fr;} .shop-grid{grid-template-columns:1fr;} .tabbar{width:100%; grid-template-columns: repeat(5, minmax(0,1fr)); } }
@media (max-width: 520px) { .hero h1{font-size: 30px;} .actions{flex-direction:column;} .btn{width:100%;} .tabbar button{font-size:10px; padding:10px 4px;} .tabbar button .icon{font-size:16px;} }

.demo-banner{margin-bottom:16px;}

.loading-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.loading-card { display:flex; align-items:center; gap:14px; padding:18px 22px; border-radius:24px; background: rgba(8,13,24,.92); border:1px solid rgba(255,255,255,.08); box-shadow: 0 18px 52px rgba(0,0,0,.35); }
.loading-orb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #ffd98b 0%, #c9913f 55%, #6d4717 100%); box-shadow: 0 0 0 10px rgba(246,195,74,.12); animation: ping 1.7s infinite; }
.loading-text { color: rgba(239,245,255,.72); font-size: 13px; margin-top: 4px; }
.diagnostics { margin-top: 12px; display: grid; gap: 8px; }
.diagnostic-line { display:grid; gap: 4px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.diagnostic-line span { color: #ffdf8a; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.diagnostic-line code { white-space: pre-wrap; word-break: break-word; color: rgba(239,245,255,.8); font-size: 11px; }
.cat-mascot svg { width: min(100%, 360px); height: auto; filter: drop-shadow(0 24px 42px rgba(0,0,0,.28)); }


.share-banner { display:grid; grid-template-columns: minmax(180px, 280px) minmax(0, 1fr); gap: 18px; align-items:center; }
.share-banner-art { display:grid; place-items:center; min-height: 220px; border-radius: 24px; overflow:hidden; background: radial-gradient(circle at 50% 20%, rgba(124,92,255,.18), rgba(8,13,24,0)); }
.share-banner-art .hero-art { width: min(100%, 280px); max-width: 100%; border-radius: 18px; filter: saturate(1.02) contrast(1.02); }
.share-banner-copy h3 { margin: 6px 0 10px; font-size: 22px; }
.share-banner-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) {
  .share-banner { grid-template-columns: 1fr; }
  .share-banner-art { min-height: 180px; }
  .shell { padding-bottom: calc(620px + env(safe-area-inset-bottom)); }
}

.hero-top-actions { display:flex; justify-content:flex-end; align-items:center; }
.help-circle { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; display:grid; place-items:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); flex: 0 0 auto; }
.help-circle:hover { transform: translateY(-1px); background: rgba(255,255,255,.1); }
.rules-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.rule-card { padding: 16px; border-radius: 24px; background: rgba(10,16,30,.76); border: 1px solid rgba(255,255,255,.08); }
.rule-card h3 { margin: 0 0 10px; font-size: 18px; }
.rule-card-wide { grid-column: 1 / -1; }
.rule-list { display:grid; gap: 10px; }
.rule-item { display:grid; gap: 4px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); }
.rule-item strong { font-size: 14px; }
.rule-item span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.mini-grid { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 12px; }
.mini-pill { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font-size: 12px; color: var(--text); }
.ref-link-box { display:grid; gap: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); width: 100%; }
.ref-link-text { display:block; width:100%; word-break: break-word; overflow-wrap: anywhere; font-size: 12px; line-height: 1.45; color: var(--text); padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.rules-page .subtitle { max-width: 980px; }
@media (max-width: 900px) { .hero-top-actions { justify-content:flex-start; margin-top: 8px; } .rules-grid { grid-template-columns: 1fr; } .rule-card-wide { grid-column: auto; } }