:root {
  color-scheme: dark;
  --bg: #0a0f1e;
  --bg-soft: #0e1628;
  --card: #121c33;
  --card-high: #182642;
  --line: rgba(150, 190, 255, .13);
  --ink: #eef3ff;
  --muted: #8fa2c4;
  --muted-2: #5f7194;
  --cream: #ffe9bd;
  --caramel: #f5a94b;
  --caramel-hot: #ffc46b;
  --pink: #ff6b9d;
  --mint: #4de1c1;
  --gold: #ffd700;
  --purple: #a78bfa;
  --green: #4de1c1;
  --red: #ff8491;
  --mono: "DM Mono", ui-monospace, monospace;
  --sans: "Space Grotesk", -apple-system, sans-serif;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #05080f; }
body {
  margin: 0; min-width: 320px; min-height: 100vh; overflow-x: hidden;
  background: radial-gradient(circle at 50% -12%, #24365c 0, #101a30 26rem, var(--bg) 46rem);
}
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; background: none; }
button:focus-visible { outline: 2px solid var(--caramel-hot); outline-offset: 3px; }
#crumb-canvas, #confetti-canvas { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
#confetti-canvas { z-index: 90; }
.ambient { position: fixed; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; opacity: .35; }
.ambient-one { width: 22rem; height: 22rem; right: -8rem; top: 10rem; background: #b35c1e; animation: drift 9s ease-in-out infinite; }
.ambient-two { width: 16rem; height: 16rem; left: -8rem; bottom: 12rem; background: #1f5f6b; animation: drift 11s ease-in-out infinite reverse; }
.ambient-three { width: 12rem; height: 12rem; left: 30%; top: -4rem; background: #5b2f8f; opacity: .22; animation: drift 13s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateY(-24px) scale(1.06); } }
.app-shell { width: min(100%, 660px); min-height: 100vh; margin: 0 auto; padding: env(safe-area-inset-top) 14px calc(110px + env(safe-area-inset-bottom)); position: relative; z-index: 1; }

/* Topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; gap: 10px; align-items: center; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,196,107,.35); border-radius: 11px; background: #241711 url('./assets/cookie-city-mark.png') center / contain no-repeat; box-shadow: 0 6px 22px rgba(246,117,62,.26); }
.brand-kicker { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--cream); }
.brand-status { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .4; } }
.header-actions { display: flex; gap: 8px; }
.icon-button, .avatar-button { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 12px; background: rgba(18,28,51,.8); font-size: 16px; }
.avatar-button { overflow: hidden; padding: 3px; }
.avatar-button { color: var(--gold); font-weight: 700; }
.avatar-button.off { opacity: .4; filter: grayscale(1); }
.avatar-holder { display: block; width: 30px; height: 30px; overflow: hidden; border-radius: 9px; }
.avatar-sprite { display: block; width: 100%; height: 100%; background-color: transparent; background-image: url('./assets/cat-sprites.png'); background-repeat: no-repeat; background-size: 400% 800%; background-position: var(--avatar-x, 0%) var(--avatar-y, 0%); }

/* News */
.news-strip { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(10,17,32,.8); font-family: var(--mono); font-size: 10px; color: var(--muted); overflow: hidden; white-space: nowrap; }
.news-label { color: var(--caramel-hot); letter-spacing: .12em; }
.news-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--caramel-hot); box-shadow: 0 0 8px var(--caramel-hot); flex: 0 0 auto; }
#news-copy { overflow: hidden; text-overflow: ellipsis; }
.news-live { margin-left: auto; color: var(--green); font-size: 9px; }

/* Screens */
.screen { display: none; animation: enter .28s cubic-bezier(.22,.8,.26,1) both; }
.screen.active { display: block; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 16px 0 14px; }
.eyebrow { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--muted-2); }
h1 { margin: 4px 0 0; font-size: clamp(28px, 8vw, 38px); letter-spacing: -.06em; line-height: .95; }
h2 { letter-spacing: -.04em; }
.level-pill { min-width: 64px; padding: 8px 10px; border: 1px solid rgba(255,196,107,.35); border-radius: 12px; background: rgba(245,169,75,.1); text-align: center; }
.level-pill span { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .12em; color: var(--muted); }
.level-pill strong { font-family: var(--mono); font-size: 22px; color: var(--caramel-hot); }

/* Balance */
.balance-card { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, #16223d, #0d1528); box-shadow: 0 22px 50px rgba(0,0,0,.3); }
.balance-card::before { content: ""; position: absolute; width: 220px; height: 160px; top: -90px; right: -60px; border-radius: 50%; background: rgba(77,225,193,.1); filter: blur(10px); }
.balance-topline { display: flex; justify-content: space-between; position: relative; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.live-chip { padding: 5px 9px; border: 1px solid rgba(77,225,193,.25); border-radius: 8px; color: var(--green); letter-spacing: 0; }
.balance-value { position: relative; z-index: 1; margin-top: 10px; font-size: clamp(40px, 12vw, 58px); font-weight: 700; letter-spacing: -.06em; color: var(--cream); text-shadow: 0 0 30px rgba(255,196,107,.15); font-variant-numeric: tabular-nums; transition: transform .1s; }
.balance-value.pop { transform: scale(1.03); }
.balance-meta { display: flex; justify-content: space-between; position: relative; z-index: 1; margin-top: 8px; font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
#combo-label { color: var(--caramel-hot); }
.frenzy-banner { position: relative; z-index: 1; margin-top: 10px; padding: 8px; border-radius: 10px; text-align: center; font-weight: 700; font-size: 13px; color: #1a0d00; background: linear-gradient(90deg, #ff6b35, #ffd700, #ff6b35); background-size: 200% 100%; animation: frenzybg 1s linear infinite; }
@keyframes frenzybg { to { background-position: 200% 0; } }
.balance-shine { position: absolute; width: 140px; height: 24px; left: -30px; bottom: 14px; background: rgba(255,255,255,.05); filter: blur(13px); transform: rotate(-20deg); }

/* Tap stage */
.tap-stage { position: relative; margin-top: 12px; padding: 20px 12px 16px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 50% 32%, rgba(90,140,200,.16), transparent 55%), #0c1425; text-align: center; overflow: hidden; }
.tap-stage.frenzy { border-color: rgba(255,120,40,.6); box-shadow: 0 0 40px rgba(255,110,30,.25), inset 0 0 60px rgba(255,110,30,.08); }
.tap-copy { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tap-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--mint); }
.tap-hint { font-size: 11px; color: var(--muted); }
.cookie-button { position: relative; display: grid; place-items: center; width: 224px; height: 224px; margin: 0 auto; border-radius: 50%; transition: transform .08s; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.cookie-button:active { transform: scale(.93); }
.cookie-button.squash .cookie-core { animation: squash .18s ease-out; }
@keyframes squash { 0% { transform: rotate(-7deg) scale(1); } 40% { transform: rotate(-7deg) scale(.9,1.08); } 100% { transform: rotate(-7deg) scale(1); } }
.cookie-ring { position: absolute; inset: 6px; border: 1px solid rgba(77,225,193,.3); border-radius: 50%; background: radial-gradient(circle, rgba(77,225,193,.1) 0, transparent 65%); box-shadow: 0 0 0 14px rgba(77,225,193,.03), 0 0 80px rgba(200,140,60,.2); animation: breathe 3.5s ease-in-out infinite; }
.cookie-ring::before, .cookie-ring::after { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(255,220,160,.2); border-radius: 50%; animation: spin 22s linear infinite; }
.cookie-ring::after { inset: 30px; animation-duration: 15s; animation-direction: reverse; opacity: .5; }
@keyframes breathe { 50% { transform: scale(1.03); } }
@keyframes spin { to { transform: rotate(360deg); } }
.cookie-glow { position: absolute; inset: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,180,80,.25), transparent 70%); filter: blur(8px); }
.tap-stage.frenzy .cookie-glow { background: radial-gradient(circle, rgba(255,90,20,.5), transparent 70%); }
.cookie-core { position: relative; display: block; width: 148px; height: 148px; border-radius: 47% 53% 50% 50%; transform: rotate(-7deg);
  background: radial-gradient(circle at 35% 30%, #ffd9a0 0 8%, transparent 9%), radial-gradient(circle at 65% 60%, #f0a05a 0 20%, transparent 21%), radial-gradient(circle at 40% 40%, #f7bd7d, #dd7f3e 60%, #a94e28);
  border: 7px solid #8f4423;
  box-shadow: inset 12px 12px 18px rgba(255,255,255,.22), inset -12px -14px 20px rgba(90,30,10,.4), 0 18px 30px rgba(0,0,0,.4);
}
.chip { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b3a22, #3d1e10); box-shadow: inset 1px 1px 2px rgba(255,255,255,.2); }
.c1 { width: 20px; height: 20px; left: 28px; top: 30px; } .c2 { width: 16px; height: 16px; right: 30px; top: 42px; }
.c3 { width: 22px; height: 22px; left: 52px; top: 62px; } .c4 { width: 15px; height: 15px; left: 30px; bottom: 32px; }
.c5 { width: 18px; height: 18px; right: 34px; bottom: 36px; } .c6 { width: 13px; height: 13px; left: 62px; top: 24px; }
.c7 { width: 14px; height: 14px; right: 58px; top: 78px; }
.chip::after { content: ""; position: absolute; left: 3px; top: 2px; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); }
.shine { position: absolute; left: 22px; top: 16px; width: 52px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.28); filter: blur(6px); transform: rotate(-24deg); }
.tap-ripple { position: absolute; inset: 30px; border: 2px solid rgba(255,220,160,.3); border-radius: 50%; opacity: 0; pointer-events: none; }
.cookie-button.pulse .tap-ripple { animation: ripple .45s ease-out; }
@keyframes ripple { from { transform: scale(.7); opacity: .8; } to { transform: scale(1.3); opacity: 0; } }
.tap-reward { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tap-reward strong { color: var(--cream); }
.critical-label { color: var(--gold); }

/* Combo */
.combo-meter { margin: 12px auto 0; max-width: 380px; padding: 10px 12px; border: 1px solid rgba(77,225,193,.16); border-radius: 12px; background: rgba(6,12,24,.6); text-align: left; }
.combo-meter-head, .combo-meter-foot { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.combo-meter-head strong { font-family: var(--mono); font-size: 12px; color: var(--caramel-hot); }
.combo-track { height: 7px; margin-top: 8px; border-radius: 99px; background: #1b2b45; overflow: hidden; }
.combo-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--gold), var(--pink)); box-shadow: 0 0 12px rgba(77,225,193,.4); transition: width .15s; }
.combo-meter-foot { margin-top: 6px; font-family: var(--mono); font-size: 9px; color: var(--muted-2); }
.combo-meter-foot span:last-child { color: var(--green); }

/* Boosts */
.boost-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.boost-btn { padding: 10px; border: 1px solid rgba(245,169,75,.3); border-radius: 12px; background: rgba(245,169,75,.08); font-weight: 700; font-size: 12px; color: var(--caramel-hot); }
.boost-btn small { display: block; font-family: var(--mono); font-weight: 400; font-size: 9px; color: var(--muted); margin-top: 2px; }
.boost-btn.active { background: linear-gradient(120deg, #ff9d5c, #ffd700); color: #2a1500; animation: frenzybg 1s linear infinite; background-size: 200% 100%; }
.boost-btn:disabled { opacity: .45; }

/* Golden + storm */
.golden-cookie { position: absolute; top: 60px; right: 12px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 8px; border: 2px solid var(--gold); border-radius: 14px; background: #1b2a1a; color: #ffe9a8; box-shadow: 0 0 30px rgba(255,215,0,.5); animation: goldenfloat 1.2s ease-in-out infinite; max-width: 170px; text-align: left; }
.golden-cookie[hidden] { display: none; }
@keyframes goldenfloat { 50% { transform: translateY(-6px) rotate(2deg); } }
.golden-coin { font-size: 30px; filter: drop-shadow(0 0 8px gold); }
.golden-copy b { display: block; font-family: var(--mono); font-size: 10px; }
.golden-copy small { font-size: 10px; color: #c9b98a; }
.storm-layer { position: absolute; inset: 0; z-index: 6; }
.storm-layer[hidden] { display: none; }
.storm-cookie { position: absolute; font-size: 34px; animation: stormpop .3s ease-out; filter: drop-shadow(0 0 10px gold); }
@keyframes stormpop { from { transform: scale(0) rotate(-40deg); } }

/* Progress + stats */
.progress-card { margin-top: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.progress-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.progress-heading strong { display: block; margin-top: 5px; font-size: 15px; }
.progress-heading > span { font-family: var(--mono); font-size: 13px; color: var(--caramel-hot); }
.progress-track { height: 8px; margin-top: 12px; border-radius: 99px; background: #1c2a44; overflow: hidden; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--caramel-hot)); box-shadow: 0 0 14px rgba(245,169,75,.5); transition: width .4s; }
.progress-foot { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--muted-2); }
.progress-foot button { color: var(--mint); font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.mini-stat { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(18,28,51,.7); }
.stat-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(77,225,193,.1); font-size: 17px; flex: 0 0 auto; }
.mini-stat span:not(.stat-icon) { display: block; font-size: 10px; color: var(--muted); }
.mini-stat strong { display: block; margin-top: 2px; font-family: var(--mono); font-size: 13px; color: var(--cream); }

/* Daily */
.daily-card { display: flex; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid rgba(255,215,0,.2); border-radius: 16px; background: linear-gradient(105deg, rgba(90,70,20,.35), rgba(18,28,51,.6)); align-items: flex-start; }
.daily-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,215,0,.12); font-size: 20px; flex: 0 0 auto; }
.daily-copy { flex: 1; min-width: 0; }
.daily-copy strong { display: block; margin: 3px 0; font-size: 13px; }
.daily-copy p { margin: 0; font-size: 11px; color: var(--muted); }
.daily-dots { display: flex; gap: 5px; margin-top: 8px; }
.daily-dots i { width: 22px; height: 8px; border-radius: 99px; background: #26355a; font-style: normal; }
.daily-dots i.done { background: var(--green); box-shadow: 0 0 8px rgba(77,225,193,.5); }
.daily-dots i.today { background: var(--gold); animation: blink 1s infinite; }
.secondary-button { padding: 10px 12px; border-radius: 10px; background: rgba(255,215,0,.12); color: var(--gold); font-weight: 700; font-size: 11px; white-space: nowrap; }
.secondary-button.claimed { background: rgba(77,225,193,.1); color: var(--green); }

/* Missions / quests */
.home-section-label { display: flex; justify-content: space-between; margin: 20px 2px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--muted-2); }
.home-section-label button { color: var(--mint); font-size: 11px; }
.quest-card, .ach-card { display: flex; gap: 12px; align-items: center; padding: 13px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.quest-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(167,139,250,.12); font-size: 19px; flex: 0 0 auto; }
.quest-info { flex: 1; min-width: 0; }
.quest-info strong { display: block; font-size: 13px; }
.quest-info p { margin: 3px 0 0; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.quest-track { height: 5px; margin-top: 8px; border-radius: 99px; background: #22314f; overflow: hidden; }
.quest-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); transition: width .3s; }
.quest-claim { padding: 8px 12px; border-radius: 9px; background: rgba(77,225,193,.12); color: var(--green); font-weight: 700; font-size: 11px; }
.quest-claim:disabled { opacity: .35; }
.quest-card.done { border-color: rgba(77,225,193,.35); }
.ach-card.locked { opacity: .55; }
.ach-card .quest-icon { background: rgba(255,215,0,.1); }

/* Ateliers */
.atelier-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.atelier-card { padding: 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: center; }
.atelier-art { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(77,225,193,.18); border-radius: 16px; background: radial-gradient(circle at 50% 35%, rgba(77,225,193,.14), transparent 65%), #111c34; }
.atelier-art .factory-art-image, .atelier-art .cat-art-image { width: 58px; height: 58px; }
.atelier-emoji { font-size: 30px; display: block; }
.atelier-card strong { display: block; margin-top: 6px; font-size: 10px; }
.atelier-card > span:last-child { display: block; margin-top: 3px; font-family: var(--mono); font-size: 8px; color: var(--muted); }

/* Upgrades */
.wallet-bar { display: flex; justify-content: space-between; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 12px; background: rgba(245,169,75,.06); font-family: var(--mono); font-size: 13px; }
.wallet-bar b { color: var(--cream); }
.wallet-per { color: var(--green); }
.upgrade-grid { display: grid; gap: 8px; }
.upgrade-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.upgrade-card.can-buy { border-color: rgba(77,225,193,.4); box-shadow: 0 0 18px rgba(77,225,193,.08); }
.upgrade-card.locked { opacity: .6; border-style: dashed; }
.upgrade-art { position: relative; display: grid; place-items: center; width: 54px; height: 54px; overflow: hidden; border: 1px solid rgba(77,225,193,.16); border-radius: 14px; background: radial-gradient(circle at 50% 35%, rgba(77,225,193,.13), transparent 64%), #111c34; }
.factory-art-image, .cat-art-image { display: block; width: 100%; height: 100%; background-repeat: no-repeat; }
.factory-art-image { background-image: url('./assets/upgrade-icons.webp'); background-size: 300% 200%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.cat-art-image { background: url('./assets/lucky-cat-cutout.png') center / contain no-repeat; filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.art-sheet-1 { background-position: 0% 0%; }
.art-sheet-2 { background-position: 50% 0%; }
.art-sheet-3 { background-position: 100% 0%; }
.art-sheet-4 { background-position: 0% 100%; }
.art-sheet-5 { background-position: 50% 100%; }
.art-sheet-6 { background-position: 100% 100%; }
.factory-art-image[class*="art-advanced-"] { background-image: url('./assets/miga-advanced-atlas.png'); background-size: 300% 300%; }
.art-advanced-1 { background-position: 0% 0%; }
.art-advanced-2 { background-position: 50% 0%; }
.art-advanced-3 { background-position: 100% 0%; }
.art-advanced-4 { background-position: 0% 50%; }
.art-advanced-5 { background-position: 50% 50%; }
.art-advanced-6 { background-position: 100% 50%; }
.art-advanced-7 { background-position: 0% 100%; }
.art-advanced-8 { background-position: 50% 100%; }
.art-advanced-9 { background-position: 100% 100%; }
.upgrade-art.is-locked .factory-art-image, .upgrade-art.is-locked .cat-art-image { filter: grayscale(.9) brightness(.55); opacity: .72; }
.upgrade-art-badge { position: absolute; right: 4px; bottom: 4px; z-index: 2; padding: 2px 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 5px; background: rgba(7,13,27,.86); color: var(--cream); font: 700 7px var(--mono); }
.upgrade-info h3 { margin: 0; font-size: 13px; }
.upgrade-info p { margin: 3px 0; font-size: 10px; color: var(--muted); }
.upgrade-effect { font-family: var(--mono); font-size: 10px; color: var(--green); }
.upgrade-lvl { font-family: var(--mono); font-size: 9px; color: var(--caramel-hot); }
.factory-nodes { display: flex; gap: 4px; margin-top: 8px; }
.factory-node { display: grid; gap: 2px; min-width: 47px; padding: 5px 6px; border: 1px solid rgba(77,225,193,.2); border-radius: 8px; background: rgba(77,225,193,.06); color: var(--green); text-align: left; font: 700 8px var(--mono); }
.factory-node small { color: var(--muted); font: 8px var(--mono); }
.factory-node:disabled { opacity: .36; cursor: not-allowed; }
.factory-node:not(:disabled):active { transform: scale(.96); }
.factory-node.bought { border-color: rgba(77,225,193,.5); background: rgba(77,225,193,.14); }
.upgrade-buy { min-width: 84px; padding: 10px 8px; border-radius: 10px; background: rgba(245,169,75,.14); color: var(--caramel-hot); font-weight: 700; font-size: 11px; }
.upgrade-buy strong { display: block; font-family: var(--mono); font-size: 10px; margin-top: 2px; }
.upgrade-buy.disabled { background: rgba(150,170,200,.08); color: var(--muted-2); }
.upgrade-buy:not(.disabled):active { transform: scale(.95); }
.infinite-card { display: flex; gap: 13px; align-items: center; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.infinite-orbit { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(77,225,193,.4); border-radius: 50%; color: var(--green); font-family: var(--mono); font-size: 15px; flex: 0 0 auto; }
.infinite-card strong { display: block; margin-top: 4px; }
.infinite-card p { margin: 4px 0 0; font-size: 11px; color: var(--muted); }

/* Levels grid */
.levels-summary { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-family: var(--mono); font-size: 11px; margin-bottom: 10px; }
.levels-summary .progress-track { margin-top: 10px; }
.levels-grid { display: grid; gap: 7px; }
.level-row { display: grid; grid-template-columns: 40px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.level-row.done { opacity: .75; }
.level-row.current { border-color: var(--gold); box-shadow: 0 0 18px rgba(255,215,0,.12); }
.level-row.locked { opacity: .45; }
.level-num { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #1c2a47; font-family: var(--mono); font-weight: 700; font-size: 13px; }
.level-row.done .level-num { background: rgba(77,225,193,.15); color: var(--green); }
.level-row.current .level-num { background: linear-gradient(145deg, #ffd37f, #ef8450); color: #2a1500; }
.level-visual { position: relative; display: grid; place-items: center; width: 44px; height: 44px; overflow: hidden; border: 1px solid var(--stage-color, rgba(77,225,193,.22)); border-radius: 13px; background: radial-gradient(circle at 50% 35%, rgba(77,225,193,.13), transparent 68%), #111c34; }
.level-visual::before { content: ""; position: absolute; inset: 4px; border: 1px solid var(--stage-color, rgba(77,225,193,.3)); border-radius: 10px; opacity: .62; }
.level-art-image { position: relative; z-index: 1; width: 40px; height: 40px; }
.level-art-illustration { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.level-art-illustration svg { display: block; width: 100%; height: 100%; overflow: visible; }
.level-row.done .level-art-illustration { filter: saturate(.82); }
.level-row.locked .level-art-illustration { filter: grayscale(.68) brightness(.68); }
.level-visual-badge { position: absolute; right: 3px; bottom: 3px; z-index: 2; padding: 1px 3px; border-radius: 4px; background: rgba(7,13,27,.86); color: var(--cream); font: 700 7px var(--mono); }
.level-stage-0 { --stage-color: rgba(255,196,107,.42); }
.level-stage-1 { --stage-color: rgba(77,225,193,.34); }
.level-stage-2 { --stage-color: rgba(95,185,255,.34); }
.level-stage-3 { --stage-color: rgba(167,139,250,.38); }
.level-stage-4 { --stage-color: rgba(244,114,182,.34); }
.level-stage-5 { --stage-color: rgba(255,215,0,.42); }
.level-stage-6 { --stage-color: rgba(114,220,168,.38); }
.level-stage-7 { --stage-color: rgba(95,185,255,.42); }
.level-stage-8 { --stage-color: rgba(167,139,250,.46); }
.level-stage-9 { --stage-color: rgba(244,114,182,.42); }
.level-stage-10 { --stage-color: rgba(255,196,107,.52); }
.level-info strong { display: block; font-size: 12px; }
.level-info span { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.level-bonus { font-family: var(--mono); font-size: 10px; color: var(--gold); text-align: right; }
.level-has-up { display: flex !important; align-items: center; gap: 4px; color: var(--mint) !important; }
.level-inline-art { width: 18px !important; height: 18px !important; flex: 0 0 auto; border-radius: 5px; }
.level-has-up > span:last-child { color: var(--mint); }

/* Ranking */
.ranking-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px; border: 1px solid rgba(255,215,0,.2); border-radius: 18px; background: linear-gradient(128deg, #3a2c14, #141d33 70%); }
.ranking-hero strong { display: block; margin-top: 8px; font-size: 22px; letter-spacing: -.05em; }
.ranking-hero p { margin: 8px 0 0; font-size: 11px; color: var(--muted); }
.ranking-cookie { position: relative; display: grid; place-items: end center; flex: 0 0 112px; width: 112px; height: 112px; overflow: hidden; border: 1px solid rgba(255,215,0,.58); border-radius: 50%; background: #241711 url('./assets/cookie-city-mark.png') center / cover no-repeat; box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 24px rgba(245,169,75,.18); }
.ranking-cookie span { position: relative; z-index: 1; margin-bottom: 8px; padding: 3px 6px; border: 1px solid rgba(255,215,0,.28); border-radius: 6px; background: rgba(20,12,8,.72); color: #ffd98a; font: 700 8px var(--mono); letter-spacing: .05em; }
.weekly-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; margin-top: 10px; padding: 16px; border: 1px solid rgba(77,225,193,.3); border-radius: 16px; background: linear-gradient(125deg, rgba(22,66,70,.9), rgba(18,28,51,.86)); }
.weekly-card h2 { margin: 5px 0 0; font-size: 18px; }
.weekly-card p { max-width: 330px; margin: 6px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.weekly-score-block { min-width: 96px; text-align: right; }
.weekly-score-block strong { display: block; color: var(--gold); font: 700 18px var(--mono); }
.weekly-score-block span { display: block; margin-top: 4px; color: var(--green); font: 8px var(--mono); }
.weekly-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; padding-top: 9px; border-top: 1px solid rgba(150,230,210,.12); color: var(--muted-2); font: 9px var(--mono); }
.weekly-podium { padding-top: 18px; }
.ranking-divider { display: flex; justify-content: space-between; gap: 10px; margin: 20px 0 0; padding: 0 4px 8px; color: var(--gold); font: 9px var(--mono); letter-spacing: .13em; }
.ranking-divider small { color: var(--muted-2); font: 9px var(--mono); letter-spacing: 0; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; padding: 22px 6px 0; }
.podium-item { position: relative; text-align: center; }
.podium-avatar { display: grid; place-items: center; width: 50px; height: 50px; margin: 0 auto 8px; overflow: hidden; border: 2px solid rgba(255,215,0,.35); border-radius: 50%; background: #2a3a5a; font-weight: 700; }
.podium-item.first .podium-avatar { width: 64px; height: 64px; border-color: var(--gold); }
.podium-avatar .avatar-sprite { width: 100%; height: 100%; border-radius: 50%; }
.podium-crown { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 20px; }
.podium-name { display: block; font-size: 10px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-handle { display: block; font-family: var(--mono); font-size: 8px; color: var(--muted-2); }
.podium-score { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--caramel-hot); }
.podium-step { margin-top: 8px; padding-top: 12px; height: 60px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: rgba(255,215,0,.06); font-family: var(--mono); }
.first .podium-step { height: 88px; color: var(--gold); }
.ranking-table-head { display: flex; justify-content: space-between; padding: 12px; font-family: var(--mono); font-size: 9px; color: var(--muted-2); }
.ranking-list { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ranking-row { display: grid; grid-template-columns: 28px 1fr auto auto; gap: 8px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(18,28,51,.5); }
.ranking-row:last-child { border-bottom: 0; }
.ranking-row.me { background: rgba(77,225,193,.08); }
.rank-number { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.rank-identity { display: flex; gap: 8px; align-items: center; min-width: 0; }
.rank-avatar { display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 9px; background: #26355a; font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.rank-avatar .avatar-sprite { width: 100%; height: 100%; border-radius: 9px; }
.rank-name { display: block; font-size: 11px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-handle { display: block; font-family: var(--mono); font-size: 8px; color: var(--muted-2); }
.rank-cookies { font-family: var(--mono); font-size: 11px; color: var(--caramel-hot); }
.rank-level { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* Profile */
.profile-card { display: flex; gap: 13px; align-items: center; padding: 18px 16px; border: 1px solid rgba(255,215,0,.18); border-radius: 18px; background: linear-gradient(120deg, #232c4a, #141b31); }
.profile-avatar { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border: 1px solid rgba(255,215,0,.24); border-radius: 50%; background: linear-gradient(145deg, #3a4a75, #1c2540); color: var(--gold); font-size: 22px; font-weight: 700; flex: 0 0 auto; }
.profile-avatar.has-avatar { padding: 2px; background: #241711; border-color: rgba(255,215,0,.58); box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 18px rgba(245,169,75,.14); }
.profile-avatar .avatar-sprite { width: 100%; height: 100%; border-radius: 50%; }
.profile-card h2 { margin: 4px 0 2px; font-size: 18px; }
.profile-card p { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.profile-card p[hidden] { display: none; }
.profile-level { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.profile-level b { color: var(--caramel-hot); }
.profile-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.profile-metrics article { padding: 12px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.profile-metrics span { display: block; font-size: 10px; color: var(--muted); }
.profile-metrics strong { display: block; margin-top: 5px; font-family: var(--mono); font-size: 13px; color: var(--cream); }
.about-card { display: flex; gap: 12px; margin-top: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); align-items: center; }
.cookie-mini { font-size: 28px; }
.about-card strong { font-size: 13px; }
.about-card p { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.identity-editor { margin-top: 14px; }
.identity-name-row { display: flex; align-items: end; gap: 7px; }
.profile-name-field { display: grid; gap: 5px; flex: 1; color: var(--muted-2); font: 9px var(--mono); letter-spacing: .1em; text-align: left; }
.profile-name-field input { width: 100%; min-width: 0; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: rgba(10,17,32,.74); color: var(--cream); font: 13px var(--sans); letter-spacing: 0; }
.profile-name-field input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(77,225,193,.08); }
.identity-save { align-self: end; min-height: 38px; }
.identity-avatar-head { display: flex; justify-content: space-between; gap: 8px; margin: 12px 2px 7px; color: var(--muted-2); font: 9px var(--mono); letter-spacing: .1em; }
.identity-avatar-head strong { color: var(--caramel-hot); font-size: 10px; letter-spacing: 0; }
.avatar-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.avatar-choice { display: grid; place-items: center; gap: 4px; min-height: 68px; padding: 6px 4px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--muted); cursor: pointer; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.avatar-choice .avatar-sprite { width: 42px; height: 42px; border-radius: 50%; }
.avatar-choice strong { max-width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 700 7px var(--mono); letter-spacing: 0; }
.avatar-choice.selected { border-color: var(--gold); background: rgba(255,215,0,.1); color: var(--cream); box-shadow: 0 0 14px rgba(255,215,0,.12); }
.avatar-choice:active { transform: scale(.96); }
.avatar-choice:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.collection-section, .credits-card, .reset-section { margin-top: 14px; }
.section-intro { margin: 7px 2px 9px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.collection-grid { display: grid; gap: 7px; }
.collectible-card { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); }
.collectible-card.owned { border-color: rgba(77,225,193,.45); background: rgba(77,225,193,.07); }
.collectible-card.locked { opacity: .72; }
.collectible-art-wrap { position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border: 1px solid rgba(245,169,75,.22); border-radius: 12px; background: radial-gradient(circle, rgba(245,169,75,.16), transparent 72%), #111b31; }
.collectible-art-wrap .collection-art { position: relative; inset: auto; z-index: 1; display: block; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background-color: transparent; color: inherit; font: inherit; pointer-events: none; }
.collectible-art-wrap > span:not(.collection-art) { position: absolute; right: 3px; bottom: 3px; z-index: 2; padding: 2px 3px; border-radius: 4px; background: rgba(6,12,24,.86); color: var(--gold); font: 7px var(--mono); }
.collectible-copy { min-width: 0; }
.collectible-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.collectible-copy p { margin: 3px 0; color: var(--muted); font-size: 9px; line-height: 1.3; }
.collectible-copy small { color: var(--muted-2); font: 8px var(--mono); }
.collectible-buy { padding: 7px 8px; font-size: 8px; }
.credits-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid rgba(167,139,250,.24); border-radius: 14px; background: linear-gradient(135deg, rgba(35,34,70,.75), rgba(18,28,51,.82)); }
.credits-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(255,215,0,.32); border-radius: 10px; color: var(--gold); font-size: 17px; flex: 0 0 auto; }
.credits-card h2 { margin: 4px 0; font-size: 14px; }
.credits-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.credits-card a { color: var(--caramel-hot); text-decoration: none; }
.credits-links { display: flex; flex-wrap: wrap; gap: 5px 9px; margin-top: 9px; }
.credits-links a { font: 8px var(--mono); }
.reset-section { padding-bottom: 18px; }
.danger-button { width: 100%; margin-top: 12px; padding: 12px; border: 1px solid rgba(255,100,100,.25); border-radius: 12px; color: var(--red); font-size: 12px; }

/* MIGA: campaña y sistemas agrupados */
.resource-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.resource-strip article { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.resource-strip span, .resource-strip small { display: block; font-family: var(--mono); font-size: 8px; color: var(--muted-2); letter-spacing: .08em; }
.resource-strip strong { display: block; margin: 4px 0 2px; font-family: var(--mono); font-size: 14px; color: var(--cream); }
.resource-strip small { letter-spacing: 0; color: var(--muted); }
.campaign-card, .system-card { padding: 14px; border: 1px solid rgba(77,225,193,.18); border-radius: 15px; background: linear-gradient(125deg, rgba(21,55,64,.72), rgba(18,28,51,.82)); }
.campaign-card-layout { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 12px; align-items: center; }
.campaign-card-copy { min-width: 0; }
.campaign-card-head, .campaign-detail, .system-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.campaign-card-head strong { display: block; margin-top: 4px; font-size: 16px; }
.campaign-card-head > span { font: 700 22px var(--mono); color: var(--caramel-hot); }
.campaign-card p { margin: 10px 0 8px; color: var(--ink); font-size: 12px; line-height: 1.4; }
.campaign-detail { font: 9px var(--mono); color: var(--muted); }
.campaign-detail span:last-child { color: var(--green); text-align: right; }
.campaign-progress, .research-track { height: 6px; margin-top: 10px; overflow: hidden; border-radius: 99px; background: #1c2b43; }
.campaign-progress span, .research-track span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--caramel-hot)); transition: width .3s; }
.campaign-next { margin-top: 8px; font: 9px var(--mono); color: var(--muted); }
.campaign-art { display: grid; place-items: center; min-width: 0; }
.campaign-art-frame { position: relative; display: grid; place-items: center; width: 82px; height: 82px; overflow: hidden; border: 1px solid rgba(255,196,107,.25); border-radius: 22px; background: radial-gradient(circle at 50% 35%, rgba(255,196,107,.16), transparent 64%), rgba(6,12,24,.6); }
.campaign-art-frame::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--stage-color, rgba(77,225,193,.35)); border-radius: 18px; opacity: .7; }
.campaign-art-frame > .factory-art-image, .campaign-art-frame > .cat-art-image { position: relative; z-index: 1; width: 74px; height: 74px; }
.campaign-art-frame > .level-art-illustration { position: relative; z-index: 1; width: 74px; height: 74px; }
.campaign-art-frame > span:last-child { position: absolute; right: 6px; bottom: 5px; z-index: 2; padding: 2px 4px; border: 1px solid rgba(255,255,255,.16); border-radius: 5px; background: rgba(7,13,27,.88); color: var(--cream); font: 700 8px var(--mono); }
.section-note { font: 9px var(--mono); letter-spacing: 0; color: var(--muted-2); }
.recipe-list, .research-list, .contract-panel, .automation-panel, .configuration-panel, .exploration-panel, .prestige-panel, .mastery-panel { display: grid; gap: 7px; }
.recipe-card, .research-card, .contract-card, .automation-card, .configuration-card, .exploration-card, .prestige-card, .mastery-card, .setting-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); text-align: left; }
.recipe-card.active, .research-card.ready, .configuration-card.active { border-color: rgba(77,225,193,.42); background: rgba(77,225,193,.08); }
.recipe-card.locked, .research-card.locked, .system-card.locked { opacity: .55; }
.system-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(245,169,75,.11); font-size: 18px; flex: 0 0 auto; }
.system-copy { min-width: 0; flex: 1; }
.system-copy strong { display: block; font-size: 12px; }
.system-copy p { margin: 3px 0 0; font-size: 10px; line-height: 1.35; color: var(--muted); }
.system-copy small { display: block; margin-top: 5px; font: 9px var(--mono); color: var(--muted-2); }
.system-action, .batch-actions button { padding: 8px 9px; border: 1px solid rgba(245,169,75,.24); border-radius: 8px; background: rgba(245,169,75,.1); color: var(--caramel-hot); font: 700 9px var(--mono); white-space: nowrap; }
.system-action:disabled, .batch-actions button:disabled { cursor: not-allowed; opacity: .35; }
.research-card { align-items: flex-start; }
.research-nodes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.research-node { min-width: 37px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: #17243a; color: var(--muted); font: 8px var(--mono); }
.research-node.done { border-color: rgba(77,225,193,.35); background: rgba(77,225,193,.1); color: var(--green); }
.research-node.ready { border-color: rgba(245,169,75,.4); color: var(--caramel-hot); }
.system-stack { display: grid; gap: 7px; }
.system-stack-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(150,190,255,.08); font-size: 10px; }
.system-stack-row:last-child { border-bottom: 0; }
.system-stack-row > span { color: var(--muted); }
.system-stack-row > strong { color: var(--cream); text-align: right; }
.system-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.system-buttons button { flex: 1 1 30%; min-width: 70px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(77,225,193,.08); color: var(--green); font: 9px var(--mono); }
.upgrade-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }
.batch-actions { display: flex; gap: 4px; }
.batch-actions button { padding: 5px 6px; font-size: 8px; }
.modal-reward small { display: block; margin-top: 5px; color: var(--green); font: 10px var(--mono); }
.settings-panel { margin-top: 10px; }
.settings-panel .home-section-label { margin-top: 0; }
.setting-row { justify-content: space-between; width: 100%; margin-bottom: 6px; color: var(--muted); }
.setting-row strong { color: var(--green); font: 9px var(--mono); }

/* Nav */
.bottom-nav { position: fixed; left: 50%; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(6, 1fr); width: min(calc(100% - 12px), 660px); padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 16px 16px 0 0; background: rgba(8,14,28,.94); backdrop-filter: blur(18px); transform: translateX(-50%); }
.nav-button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; color: var(--muted-2); }
.nav-button span { font-size: 19px; }
.nav-button small { font-size: 8px; }
.nav-button.active { background: rgba(77,225,193,.1); color: var(--mint); }
.nav-button i { position: absolute; top: 0; right: 18%; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; }
.nav-button i[hidden] { display: none; }

/* Toasts + floats */
.toast-region { position: fixed; top: calc(env(safe-area-inset-top) + 70px); left: 50%; z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(92%, 380px); pointer-events: none; transform: translateX(-50%); }
.toast { padding: 10px 14px; border: 1px solid rgba(77,225,193,.3); border-radius: 12px; background: rgba(12,20,38,.97); font-size: 12px; color: var(--cream); box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastin .25s ease both; max-width: 100%; }
.toast.success { border-color: rgba(255,215,0,.4); }
.toast.critical { border-color: var(--pink); color: #ffd7e5; }
@keyframes toastin { from { opacity: 0; transform: translateY(-8px) scale(.95); } }
.float-layer { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.float-cookie { position: absolute; font-family: var(--mono); font-weight: 700; color: var(--gold); text-shadow: 0 2px 12px rgba(255,180,60,.5); animation: floatup .9s ease-out forwards; white-space: nowrap; }
.float-cookie.crit { color: var(--pink); font-size: 20px !important; }
.float-cookie.bonus { color: var(--mint); }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110px) scale(1.05); } }

/* Modals */
.level-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.level-modal.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,6,13,.8); backdrop-filter: blur(8px); }
.modal-card { position: relative; width: min(100%, 360px); padding: 28px 24px 22px; border: 1px solid rgba(255,215,0,.3); border-radius: 22px; background: linear-gradient(145deg, #232c4d, #111827 70%); text-align: center; transform: translateY(12px) scale(.95); transition: transform .25s; }
.identity-modal .modal-card { width: min(100%, 430px); max-height: calc(100vh - 26px); overflow: auto; }
.level-modal.open .modal-card { transform: none; }
.modal-sparkle { font-size: 40px; animation: sparkle 1.4s ease-in-out infinite; }
.modal-level-art { width: 94px; height: 94px; margin: -4px auto 8px; animation: modalartin .45s ease both; }
.modal-level-art .level-art-illustration { display: block; width: 100%; height: 100%; }
@keyframes modalartin { from { opacity: 0; transform: translateY(8px) scale(.82) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes sparkle { 50% { transform: rotate(12deg) scale(1.12); } }
.modal-card h2 { margin: 8px 0; font-size: 26px; }
.modal-card p { color: var(--muted); font-size: 13px; }
.identity-modal .modal-sparkle { color: var(--gold); }
.onboarding-name { margin-top: 14px; }
.onboarding-picker { margin-top: 14px; }
.onboarding-picker .avatar-choice { background: rgba(18,28,51,.75); }
.onboarding-picker + .primary-button:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.25); }
.modal-reward { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(255,215,0,.08); }
.modal-reward span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--muted-2); }
.modal-reward strong { display: block; margin-top: 4px; color: var(--gold); font-size: 16px; font-family: var(--mono); }
.primary-button { width: 100%; margin-top: 16px; padding: 14px; border-radius: 12px; background: linear-gradient(120deg, #4de1c1, #f5a94b); color: #08131a; font-weight: 700; }
.secondary-button { flex: 1; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(150,190,255,.08); color: var(--cream); font-size: 11px; }
.modal-actions { display: flex; gap: 8px; margin-top: 15px; }
.modal-actions .danger-button { flex: 1; margin-top: 0; background: rgba(255,100,100,.1); }
.reset-symbol { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; border: 1px solid rgba(255,100,100,.35); border-radius: 14px; color: var(--red); font: 700 22px var(--mono); }

/* Shake on crit */
body.shake .app-shell { animation: shake .3s; }
@keyframes shake { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, -2px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 380px) {
  .app-shell { padding-left: 10px; padding-right: 10px; }
  .cookie-button { width: 200px; height: 200px; }
  .cookie-core { width: 132px; height: 132px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .profile-metrics { grid-template-columns: repeat(3, 1fr); }
  .resource-strip strong { font-size: 12px; }
  .campaign-card-layout { grid-template-columns: minmax(0, 1fr) 70px; gap: 8px; }
  .campaign-art-frame { width: 68px; height: 68px; border-radius: 18px; }
  .campaign-art-frame > .factory-art-image, .campaign-art-frame > .cat-art-image, .campaign-art-frame > .level-art-illustration { width: 62px; height: 62px; }
  .ranking-hero { gap: 10px; padding: 14px; }
  .ranking-hero strong { font-size: 19px; }
  .ranking-cookie { flex-basis: 84px; width: 84px; height: 84px; }
  .ranking-cookie span { margin-bottom: 5px; padding: 2px 4px; font-size: 6px; }
  .weekly-card { grid-template-columns: 1fr; gap: 8px; }
  .weekly-score-block { text-align: left; }
  .weekly-meta { font-size: 8px; }
  .collectible-card { grid-template-columns: 42px minmax(0, 1fr); }
  .collectible-art-wrap { width: 42px; height: 42px; }
  .collectible-art-wrap .collection-art { width: 39px; height: 39px; }
  .collectible-buy { grid-column: 2; justify-self: start; }
  .upgrade-card { grid-template-columns: 48px 1fr; }
  .upgrade-art { width: 46px; height: 46px; }
  .upgrade-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; }
  .level-row { grid-template-columns: 36px 38px minmax(0, 1fr) auto; gap: 6px; padding: 9px 8px; }
  .level-num { width: 36px; height: 36px; font-size: 12px; }
  .level-visual { width: 38px; height: 38px; border-radius: 11px; }
  .level-art-image { width: 35px; height: 35px; }
}