:root {
  --bg: #0d0a17;
  --panel: rgba(255, 255, 255, .045);
  --panel-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .09);
  --text: #f4efff;
  --muted: #a99fc2;
  --accent: #ffb547;
  --accent2: #ff6b9d;
  --gem: #5ee7ff;
  --good: #5dff9e;
  --gold: #ffd86b;
  --bad: #ff6b6b;
  --r: 16px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 15% -10%, #2c1756 0%, transparent 60%),
    radial-gradient(900px 700px at 105% 110%, #3d1432 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
a { color: var(--gem); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.good { color: var(--good); }
.vipc { color: var(--gold); }
h2, h3 { margin: 0 0 8px; letter-spacing: -.02em; }
code { background: var(--panel-2); padding: 1px 6px; border-radius: 6px; }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 18px;
  background: rgba(13, 10, 23, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 800; font-size: 20px; white-space: nowrap; letter-spacing: -.02em; }
.brand span { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticker { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 13px; }
#news { display: inline-block; animation: slideIn .6s ease; }
.wallet { display: flex; align-items: center; gap: 8px; }
.pill { display: flex; align-items: center; gap: 6px; padding: 7px 8px 7px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 600; transition: .15s; }
.pill:hover { border-color: var(--gem); }
.gem-pill b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gem); color: #05232b; font-size: 15px; }
.vip-badge { background: linear-gradient(135deg, #ffe9a8, #ffb547); color: #3a2300; font-weight: 800; padding: 5px 10px; border-radius: 8px; font-size: 12px; letter-spacing: .1em; box-shadow: 0 0 18px rgba(255, 200, 80, .4); }

.storage-warning { margin: 12px 18px 0; padding: 12px 16px; border-radius: 12px; background: rgba(255, 107, 107, .14); border: 1px solid rgba(255, 107, 107, .5); color: #ffd0d0; font-size: 14px; line-height: 1.5; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 18px; padding: 18px; max-width: 1400px; margin: 0 auto; }
.bakery {
  position: sticky; top: 74px; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px; border-radius: 24px; background: var(--panel); border: 1px solid var(--line);
}
.count { text-align: center; }
.big { font-size: clamp(34px, 5vw, 50px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.sub { color: var(--muted); font-variant-numeric: tabular-nums; }

.cookie-stage { position: relative; width: min(290px, 68vw); aspect-ratio: 1; display: grid; place-items: center; margin: 6px 0; }
.glow {
  position: absolute; inset: -12%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 181, 71, .45), transparent 28%, rgba(255, 107, 157, .35), transparent 58%, rgba(94, 231, 255, .3), transparent 85%);
  filter: blur(26px); animation: spin 16s linear infinite;
}
#bigCookie { position: relative; width: 100%; height: 100%; border-radius: 50%; transition: transform .09s ease; filter: drop-shadow(0 22px 40px rgba(0, 0, 0, .55)); touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#bigCookie svg { width: 100%; height: 100%; display: block; animation: breathe 4s ease-in-out infinite; }
#bigCookie:hover { transform: scale(1.03); }
#bigCookie.pop { animation: pop .12s ease; }
#bigCookie:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.click-info { color: var(--muted); font-size: 14px; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.daily-btn.ready { background: linear-gradient(135deg, #ff9a3c, #ff5e8a); border-color: transparent; color: #fff; animation: wiggle 2.5s ease-in-out infinite; }

.boosts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.boost { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 7px 12px; border-radius: 10px; background: rgba(255, 181, 71, .12); border: 1px solid rgba(255, 181, 71, .35); font-size: 13px; }
.boost.click { background: rgba(94, 231, 255, .1); border-color: rgba(94, 231, 255, .35); }
.boost i { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: .6; }

.promo { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 181, 71, .18), rgba(255, 107, 157, .18)); border: 1px solid rgba(255, 181, 71, .45); transition: .15s; }
.promo:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 120, 120, .2); }
.promo .icon { font-size: 30px; }
.promo small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.promo em { font-style: normal; font-weight: 800; background: var(--accent); color: #2a1600; padding: 6px 10px; border-radius: 10px; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 600; transition: transform .1s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, .25); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .5; }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; color: #230c14; }
.btn.gold { background: linear-gradient(135deg, #ffe9a8, #ffb547); border-color: transparent; color: #3a2300; }
.btn.gem { background: rgba(94, 231, 255, .12); border-color: rgba(94, 231, 255, .4); color: var(--gem); }
.btn.gem.afford { background: var(--gem); color: #04242c; }
.btn.danger { background: rgba(255, 107, 107, .15); border-color: rgba(255, 107, 107, .45); color: var(--bad); }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 10px; font-size: 13px; }
.big-btn { padding: 14px 28px; font-size: 18px; }
.btn s { opacity: .6; }

.toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.toggle i { width: 34px; height: 20px; border-radius: 99px; background: rgba(255, 255, 255, .15); position: relative; transition: .2s; }
.toggle i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: .2s; }
.toggle.on i { background: var(--good); }
.toggle.on i::after { left: 16px; }

/* ---------- Panel & tabs ---------- */
.panel { min-width: 0; border-radius: 24px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; scroll-margin-top: 70px; }
.tabs { display: flex; gap: 4px; padding: 8px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; padding: 9px 13px; border-radius: 10px; color: var(--muted); font-weight: 600; white-space: nowrap; transition: .15s; }
.tab:hover { color: var(--text); background: var(--panel); }
.tab.active { color: var(--text); background: var(--panel-2); }
.tab-store { color: var(--accent); }
.dot { position: absolute; top: 6px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
.pane { padding: 14px; }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.seg button { padding: 6px 12px; border-radius: 9px; color: var(--muted); font-weight: 600; font-size: 14px; }
.seg button.active { background: var(--panel-2); color: var(--text); }
.card { padding: 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; }
.section-title { margin: 18px 4px 10px; font-size: 16px; color: var(--muted); font-weight: 600; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--muted); }
.empty { padding: 30px; text-align: center; color: var(--muted); }

/* ---------- Buildings ---------- */
.list { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 14px 10px 10px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); text-align: left; opacity: .55; transition: .15s; }
.row.afford { opacity: 1; background: rgba(255, 255, 255, .05); }
.row.afford:hover { border-color: rgba(255, 181, 71, .5); transform: translateX(3px); }
.row.locked { filter: grayscale(1); opacity: .35; }
.row .icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(0, 0, 0, .25); font-size: 26px; }
.row .name { font-weight: 600; }
.row .meta { display: flex; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.row .cost { color: var(--accent); font-variant-numeric: tabular-nums; }
.row.afford .cost { color: var(--good); }
.row .each { color: var(--muted); }
.row .desc { font-size: 12px; color: var(--muted); opacity: .75; }
.row .owned { font-size: 28px; font-weight: 800; color: rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }

/* ---------- Upgrades ---------- */
.upg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.upg { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--line); text-align: left; opacity: .55; transition: .15s; }
.upg.afford { opacity: 1; border-color: rgba(93, 255, 158, .35); }
.upg.afford:hover { transform: translateY(-2px); background: rgba(93, 255, 158, .07); }
.upg .icon { font-size: 26px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .25); flex: none; }
.upg .name { font-weight: 600; font-size: 14px; }
.upg .desc { font-size: 12px; color: var(--muted); }
.upg .cost { font-size: 13px; color: var(--accent); }
.upg.afford .cost { color: var(--good); }

/* ---------- Pass ---------- */
.pass-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, rgba(126, 87, 255, .2), rgba(255, 107, 157, .15)); }
.pass-head > div:first-child { flex: 1; min-width: 240px; }
.pass-head .lvl { font-size: 16px; padding: 3px 10px; border-radius: 99px; background: var(--panel-2); vertical-align: middle; }
.pass-cta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prem-on { color: var(--gold); font-weight: 700; }
.xpbar { height: 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; margin: 8px 0 6px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6bff, var(--accent2)); border-radius: 99px; transition: width .4s; }
.ptrack-wrap { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.ptrack-labels { display: grid; grid-template-rows: 28px 96px 96px; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.ptrack-labels div { display: flex; align-items: center; }
.premlabel { color: var(--gold); }
.ptrack { display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: 6px; overflow-x: auto; padding-bottom: 10px; scroll-behavior: smooth; }
.pcol { display: grid; grid-template-rows: 28px 96px 96px; gap: 6px; }
.plvl { display: grid; place-items: center; border-radius: 8px; font-weight: 700; font-size: 13px; background: rgba(0, 0, 0, .25); color: var(--muted); }
.pcol.reached .plvl { background: linear-gradient(135deg, #8a6bff, var(--accent2)); color: #fff; }
.pcol.next .plvl { outline: 2px dashed var(--accent2); }
.pcell { position: relative; display: grid; place-items: center; padding: 6px; border-radius: 12px; font-size: 12px; line-height: 1.35; text-align: center; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); }
.pcell.prem { background: rgba(255, 216, 107, .06); border-color: rgba(255, 216, 107, .2); }
.pcell.locked, .pcell.plock { opacity: .5; }
.pcell.ready { opacity: 1; border-color: var(--good); background: rgba(93, 255, 158, .1); animation: glowPulse 1.6s ease-in-out infinite; }
.pcell.claimed { opacity: .35; }
.pcell em { position: absolute; top: 4px; right: 6px; font-style: normal; font-size: 12px; }
.pcell.claimed em { color: var(--good); }

/* ---------- Gem shop & store ---------- */
.gem-head, .pass-head { gap: 16px; }
.gem-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, rgba(94, 231, 255, .14), rgba(126, 87, 255, .14)); }
.gem-big { font-size: 34px; font-weight: 800; }
.shop-grid, .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.shop-card, .store-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; }
.shop-card .icon, .store-card .icon { font-size: 34px; }
.shop-card .name, .store-card .name { font-weight: 700; }
.shop-card .name small { color: var(--muted); font-weight: 500; }
.shop-card .desc, .store-card .desc { font-size: 13px; color: var(--muted); flex: 1; }
.shop-card .btn, .store-card .btn { margin-top: 6px; width: 100%; }
.shop-card.deal { border-color: var(--accent2); box-shadow: 0 0 24px rgba(255, 107, 157, .18); }
.ribbon { position: absolute; top: 10px; right: -34px; transform: rotate(35deg); background: var(--accent2); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 36px; letter-spacing: .05em; }
.store-card { background: linear-gradient(160deg, rgba(255, 181, 71, .08), rgba(255, 255, 255, .02)); }
.store-card.badged { border-color: rgba(255, 181, 71, .5); }
.store-card .btn.primary { font-size: 17px; }
.store-card.is-owned { opacity: .6; }
.badge { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; background: var(--accent); color: #2a1600; }
.demo-note { padding: 10px 14px; border-radius: 12px; background: rgba(94, 231, 255, .08); border: 1px dashed rgba(94, 231, 255, .45); color: var(--gem); font-size: 13px; margin: 8px 0; }
.legal { margin-top: 16px; }

/* ---------- Ascend ---------- */
.hero-card { text-align: center; padding: 30px 20px; background: linear-gradient(160deg, rgba(126, 87, 255, .18), rgba(94, 231, 255, .08)); }
.hero-icon { font-size: 60px; animation: breathe 3s ease-in-out infinite; }
.hero-card p { max-width: 520px; margin: 8px auto 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 12px 0 18px; text-align: left; }
.stat-grid div { padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, .2); }
.stat-grid span { display: block; font-size: 12px; color: var(--muted); }
.stat-grid b { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---------- Trophies ---------- */
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.trophy { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .02); border: 1px solid var(--line); text-align: center; opacity: .45; }
.trophy.got { opacity: 1; background: linear-gradient(160deg, rgba(255, 216, 107, .12), rgba(255, 255, 255, .02)); border-color: rgba(255, 216, 107, .35); }
.trophy .icon { font-size: 28px; }
.trophy .name { font-weight: 700; font-size: 13px; }
.trophy .desc { font-size: 11px; color: var(--muted); }
.trophy .gems { font-size: 11px; color: var(--gem); margin-top: 4px; }

.settings-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Golden cookies ---------- */
#goldenLayer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.golden {
  position: absolute; pointer-events: auto; font-size: 54px; line-height: 1;
  filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.25) drop-shadow(0 0 16px rgba(255, 210, 80, .95));
  animation: goldenIn .5s ease, float 2.4s ease-in-out .5s infinite;
  transition: opacity .6s;
}
.golden.fade { opacity: 0; }

/* ---------- Floaters, crumbs, toasts ---------- */
.floater { position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, -50%); font-weight: 800; font-size: 20px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); animation: floatUp 1.1s ease-out forwards; white-space: nowrap; }
.floater.gold { color: var(--gold); font-size: 24px; }
.crumb { position: fixed; z-index: 49; pointer-events: none; width: 7px; height: 7px; border-radius: 2px; background: #c9853f; animation: crumb .7s ease-in forwards; }
#toasts { position: fixed; z-index: 60; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { max-width: min(380px, calc(100vw - 32px)); padding: 11px 15px; border-radius: 12px; background: rgba(28, 22, 44, .94); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); font-size: 14px; animation: toastIn .3s ease; transition: .5s; backdrop-filter: blur(10px); }
.toast.out { opacity: 0; transform: translateX(20px); }
.toast.good { border-color: rgba(93, 255, 158, .4); }
.toast.boost { border-color: rgba(255, 181, 71, .5); }
.toast.pass { border-color: rgba(138, 107, 255, .6); }
.toast.trophy, .toast.vip { border-color: rgba(255, 216, 107, .6); }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 12, .7); backdrop-filter: blur(6px); animation: fade .2s; }
.modal-card { width: min(460px, 100%); max-height: 90vh; overflow: auto; padding: 24px; border-radius: 22px; background: #1a1430; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); animation: modalIn .25s ease; }
.modal-card p { line-height: 1.5; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.reward-big { font-size: 40px; font-weight: 800; text-align: center; margin: 14px 0; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 14px 0; }
.day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 12px; text-align: center; }
.day small { color: var(--muted); font-size: 10px; }
.day.done { opacity: .45; }
.day.today { border-color: var(--accent); background: rgba(255, 181, 71, .15); }
textarea.code { width: 100%; height: 120px; border-radius: 12px; background: rgba(0, 0, 0, .35); color: var(--text); border: 1px solid var(--line); padding: 10px; font-family: ui-monospace, monospace; font-size: 11px; resize: vertical; word-break: break-all; }

.footer { text-align: center; color: var(--muted); font-size: 12px; padding: 10px 16px 30px; }

/* ---------- Animations ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.02); } }
@keyframes pop { 50% { transform: scale(.94); } }
@keyframes wiggle { 0%, 90%, 100% { transform: rotate(0); } 93% { transform: rotate(-3deg); } 96% { transform: rotate(3deg); } }
@keyframes floatUp { to { transform: translate(-50%, -140%); opacity: 0; } }
@keyframes crumb { to { transform: translate(var(--dx), var(--dy)) rotate(200deg); opacity: 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes modalIn { from { opacity: 0; transform: scale(.95) translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes goldenIn { from { transform: scale(0) rotate(-180deg); } }
@keyframes float { 50% { transform: translateY(-10px) rotate(8deg); } }
@keyframes glowPulse { 50% { box-shadow: 0 0 16px rgba(93, 255, 158, .35); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .bakery { position: static; padding: 16px; }
  .ticker { display: none; }
  .topbar { justify-content: space-between; }
  .cookie-stage { width: min(240px, 62vw); }
  .row .desc { display: none; }
  .ptrack-wrap { grid-template-columns: 1fr; }
  .ptrack-labels { display: none; }
}