/* STUPID RICH - one style: chunky cartoon stickers. Thick ink outlines, hard drop shadows, bold flat color, 3D emoji art. */
:root {
  --sky1: #ff7a59; --sky2: #ff4f8b; --sky3: #7a3cff; --ink: #2a0b3d; --accent: #ffd23f;
  --paper: #fff8ec; --paper2: #ffeccf; --good: #2fd47a; --good2: #18a65a; --bad: #ff4d4d; --muted: #8a7a99;
  --r: 20px; --line: 3px; --drop: 0 5px 0 var(--ink);
  --hud-h: 76px; --nav-h: 74px;
  --font-big: 'Lilita One', 'Arial Black', system-ui, sans-serif;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky3); color: var(--ink); font-family: var(--font); font-weight: 800; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.hidden { display: none !important; }

/* ---------- the sky: per-world gradient, drifting decor ---------- */
#sky { position: fixed; inset: 0; background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 45%, var(--sky3) 100%); transition: background 1.2s; overflow: hidden; }
#sky::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 2px, transparent 2.5px); background-size: 26px 26px; mask-image: linear-gradient(180deg, #000, transparent 70%); }
#sun { position: absolute; width: 60vmax; height: 60vmax; left: 50%; top: -30vmax; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%); animation: breathe 8s ease-in-out infinite; }
#decor .d { position: absolute; width: 64px; height: 64px; opacity: .55; animation: drift linear infinite; filter: drop-shadow(0 6px 0 rgba(0,0,0,.15)); }
@keyframes drift { from { transform: translateY(110vh) rotate(0deg); } to { transform: translateY(-20vh) rotate(360deg); } }
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.08); } }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* ---------- emoji art ---------- */
.em { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center; font-style: normal; line-height: 1.4em; text-align: center; }
.em.txt { background: none !important; font-size: 1.1em; }
img.art { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; -webkit-user-drag: none; }

/* ---------- app frame ---------- */
#app { position: relative; z-index: 2; height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
#hud { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 14px 6px; }
#cashbox { flex: 1; min-width: 0; }
#cash { font-family: var(--font-big); font-size: 34px; line-height: 1; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 7px var(--ink); text-shadow: 0 5px 0 var(--ink); white-space: nowrap; overflow: hidden; letter-spacing: .5px; transition: transform .12s; }
#cash.pop { transform: scale(1.08); }
#cash small { font-size: .58em; margin-left: 6px; -webkit-text-stroke: 5px var(--ink); text-shadow: 0 3px 0 var(--ink); }
#rate { font-size: 13px; color: #fff; opacity: .92; margin-top: 4px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
#chips { display: flex; gap: 6px; }
.chip { display: flex; align-items: center; gap: 4px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 999px; padding: 3px 10px 3px 4px; box-shadow: 0 3px 0 var(--ink); font-family: var(--font-big); font-size: 16px; }
.chip .em { width: 24px; height: 24px; }
.chip.icon { padding: 3px; }
.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

#rival { margin: 2px 14px 6px; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.28); color: #fff; border-radius: 14px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
#rival .em { width: 22px; height: 22px; }
#rival b { color: var(--accent); }
#rival .bar { flex: 1; height: 8px; border-radius: 9px; background: rgba(255,255,255,.2); overflow: hidden; position: relative; min-width: 50px; }
#rival .bar i { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 9px; }

#goal { margin: 0 14px 8px; display: flex; align-items: center; gap: 10px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 16px; padding: 7px 10px; box-shadow: 0 4px 0 var(--ink); cursor: pointer; position: relative; overflow: hidden; }
#goal > .em { width: 30px; height: 30px; flex: none; }
#goalBody { flex: 1; min-width: 0; }
#goalTxt { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#goalBar { height: 7px; background: #e9dcc6; border-radius: 9px; margin-top: 4px; overflow: hidden; }
#goalBar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--good2), var(--good)); border-radius: 9px; transition: width .3s; }
#goalPrize { font-size: 12px; display: flex; align-items: center; gap: 2px; white-space: nowrap; }
#goalPrize .em { width: 20px; height: 20px; }
#goal.done { animation: goalDone .7s; }
@keyframes goalDone { 30% { transform: scale(1.06) rotate(-1deg); background: #d6ffe6; } }

#main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 12px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); scroll-behavior: smooth; overscroll-behavior: contain; }
#main::-webkit-scrollbar { width: 0; }
.tab { display: none; animation: tabIn .25s ease-out; }
.tab.on { display: block; }
@keyframes tabIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- world banner ---------- */
#worldBanner { text-align: center; color: #fff; margin: 4px 0 10px; }
#worldBanner .wname { font-family: var(--font-big); font-size: 26px; line-height: 1.05; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); text-shadow: 0 4px 0 var(--ink); }
#worldBanner .wtag { font-size: 13px; opacity: .95; margin-top: 4px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
#worldBanner .wmeta { display: inline-flex; gap: 6px; margin-top: 6px; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.3); color: #fff; border-radius: 99px; padding: 3px 9px; font-size: 12px; }
.pill .em { width: 18px; height: 18px; }

/* ---------- buy amount ---------- */
#buyRow { display: flex; align-items: center; gap: 5px; margin: 0 0 10px; position: sticky; top: 0; z-index: 5; padding: 6px 0; }
#buyRow span { color: #fff; font-family: var(--font-big); font-size: 15px; margin-right: 2px; text-shadow: 0 2px 0 var(--ink); }
#buyRow button { flex: 1; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 12px; padding: 6px 0; font-family: var(--font-big); font-size: 15px; box-shadow: 0 3px 0 var(--ink); }
#buyRow button.on { background: var(--accent); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ---------- business card ---------- */
.biz { position: relative; display: flex; gap: 10px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r); padding: 10px; margin-bottom: 12px; box-shadow: var(--drop); transition: transform .15s; }
.biz.locked { background: rgba(255,248,236,.55); border-style: dashed; box-shadow: none; }
.biz.hidden-biz { opacity: .45; }
.biz.bump { animation: bump .35s; }
@keyframes bump { 35% { transform: scale(1.025) rotate(-.4deg); } }
.tile { position: relative; flex: none; width: 92px; height: 92px; cursor: pointer; touch-action: manipulation; }
.tile .plate { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 70%); border: var(--line) solid var(--ink); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12); }
.tile svg.ring { position: absolute; inset: 0; transform: rotate(-90deg); }
.tile svg.ring circle { fill: none; stroke-width: 6; }
.tile svg.ring .bg { stroke: rgba(42,11,61,.12); }
.tile svg.ring .fg { stroke: var(--good); stroke-linecap: round; transition: stroke-dashoffset .3s; }
.tile .main { position: absolute; left: 14px; top: 10px; width: 64px; height: 64px; transition: transform .1s; }
.tile .side { position: absolute; right: 2px; bottom: 6px; width: 32px; height: 32px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.tile .decal { position: absolute; left: -2px; top: -2px; width: 30px; height: 30px; transform: rotate(-14deg); filter: drop-shadow(0 2px 0 var(--ink)); }
.tile .count { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: var(--ink); color: #fff; font-family: var(--font-big); font-size: 14px; border-radius: 99px; padding: 1px 9px; white-space: nowrap; }
.tile .mgrBadge { position: absolute; left: -4px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); padding: 2px; }
.tile.tapme .main { animation: tapme 1s ease-in-out infinite; }
@keyframes tapme { 50% { transform: scale(1.12) rotate(4deg); } }
.tile:active .main, .tile.squish .main { transform: scale(.86); }
.biz.locked .tile .main, .biz.locked .tile .side { filter: brightness(0) opacity(.35); }
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bname { font-family: var(--font-big); font-size: 19px; line-height: 1.05; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.bname .ms { font-family: var(--font); font-size: 11px; color: var(--muted); white-space: nowrap; background: #f3e6cf; border-radius: 8px; padding: 1px 6px; }
.joke { font-size: 12px; color: var(--muted); font-weight: 600; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -3px; }
.prog { position: relative; height: 30px; background: #3a2350; border: var(--line) solid var(--ink); border-radius: 12px; overflow: hidden; }
.prog .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(180deg, #7dffb2, var(--good) 55%, var(--good2)); }
.prog.blur .fill { transform: scaleX(1) !important; background: repeating-linear-gradient(-45deg, var(--good) 0 12px, #7dffb2 12px 24px); background-size: 34px 34px; animation: stripes .5s linear infinite; }
@keyframes stripes { to { background-position: 34px 0; } }
.prog .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-big); font-size: 16px; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); white-space: nowrap; }
.row { display: flex; gap: 6px; align-items: stretch; }
.timer { flex: none; min-width: 54px; display: flex; align-items: center; justify-content: center; background: #efe2cc; border: 2px solid var(--ink); border-radius: 10px; font-family: var(--font-big); font-size: 14px; padding: 0 6px; }
.btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--good); color: #fff; border: var(--line) solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink); padding: 3px 8px; min-height: 42px; line-height: 1.05; transition: transform .06s, box-shadow .06s; }
.btn .t { font-family: var(--font-big); font-size: 15px; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); }
.btn .c { font-size: 13px; font-weight: 900; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); }
.btn:active:not(.off) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.off { background: #b8adc4; box-shadow: 0 4px 0 #6d6280; border-color: #6d6280; cursor: default; }
.btn.gold { background: linear-gradient(180deg, #ffe066, #ffb703); }
.btn.purple { background: linear-gradient(180deg, #b47bff, #7a3cff); }
.btn.pink { background: linear-gradient(180deg, #ff7ab0, #ff2e7e); }
.btn.big { min-height: 58px; }
.btn.big .t { font-size: 22px; -webkit-text-stroke: 5px var(--ink); }

/* floating numbers */
.float { position: fixed; z-index: 45; pointer-events: none; font-family: var(--font-big); color: #fff; font-size: 20px; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); white-space: nowrap; animation: floatUp 1s ease-out forwards; }
.float.gold { color: var(--accent); font-size: 26px; }
@keyframes floatUp { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.banner { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); z-index: 3; background: var(--accent); border: var(--line) solid var(--ink); border-radius: 12px; padding: 3px 12px; font-family: var(--font-big); font-size: 18px; box-shadow: 0 3px 0 var(--ink); white-space: nowrap; animation: bannerIn 1.8s ease-out forwards; pointer-events: none; }
@keyframes bannerIn { 0% { transform: translate(-50%, 10px) scale(.3); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.15); opacity: 1; } 25% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { transform: translate(-50%, -20px); opacity: 0; } }

/* ---------- panels (managers, upgrades, rebirth, prizes, rivals) ---------- */
.h2 { font-family: var(--font-big); color: #fff; font-size: 28px; text-align: center; margin: 6px 0 2px; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); text-shadow: 0 4px 0 var(--ink); }
.sub { text-align: center; color: #fff; font-size: 13px; margin-bottom: 12px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.card { background: var(--paper); border: var(--line) solid var(--ink); border-radius: var(--r); box-shadow: var(--drop); padding: 12px; margin-bottom: 12px; position: relative; }
.item { display: flex; align-items: center; gap: 10px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 8px 10px; margin-bottom: 10px; }
.item .pic { flex: none; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 75%); border: var(--line) solid var(--ink); position: relative; }
.item .pic .em { position: absolute; left: 5px; top: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.item .pic .em.mini { inset: auto -6px -4px auto; width: 26px; height: 26px; }
.item .txt { flex: 1; min-width: 0; }
.item .t1 { font-family: var(--font-big); font-size: 17px; line-height: 1.1; }
.item .t2 { font-size: 12px; color: var(--muted); font-weight: 700; }
.item .btn { flex: none; min-width: 104px; }
.item.done { opacity: .7; }
.item.done .btn { background: #d9ccb6; color: var(--ink); }
.section { font-family: var(--font-big); color: #fff; font-size: 20px; margin: 18px 4px 8px; text-shadow: 0 3px 0 var(--ink); display: flex; align-items: center; gap: 8px; }
.section .em { width: 28px; height: 28px; }
.empty { text-align: center; color: #fff; padding: 30px 10px; font-size: 15px; text-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* rebirth */
.vortex { width: 110px; height: 110px; margin: 4px auto 0; position: relative; }
.vortex .em { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 6s linear infinite; }
.vortex.hot .em { animation-duration: 1.2s; filter: drop-shadow(0 0 16px #fff) saturate(1.6); }
@keyframes spin { to { transform: rotate(360deg); } }
.big-num { font-family: var(--font-big); font-size: 34px; text-align: center; line-height: 1; }
.big-num small { font-size: 16px; display: block; color: var(--muted); font-family: var(--font); font-weight: 800; margin-top: 4px; }
.stat-row { display: flex; gap: 8px; margin: 10px 0; }
.stat { flex: 1; background: #f3e6cf; border: 2px solid var(--ink); border-radius: 14px; padding: 8px; text-align: center; }
.stat b { display: block; font-family: var(--font-big); font-size: 20px; }
.stat span { font-size: 11px; color: var(--muted); }
.esc-track { height: 22px; background: #3a2350; border: var(--line) solid var(--ink); border-radius: 12px; overflow: hidden; position: relative; margin: 8px 0; }
.esc-track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5ef2ff, #b47bff, #ff4f8b); }
.esc-track span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; paint-order: stroke fill; -webkit-text-stroke: 3px var(--ink); }
.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.perk { background: var(--paper); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.perk .em { width: 48px; height: 48px; }
.perk .pn { font-family: var(--font-big); font-size: 16px; line-height: 1.05; }
.perk .pd { font-size: 11px; color: var(--muted); flex: 1; }
.perk .lv { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
.perk .lv i { width: 9px; height: 9px; border-radius: 50%; background: #e0d2bb; border: 1.5px solid var(--ink); }
.perk .lv i.on { background: var(--accent); }
.perk .btn { width: 100%; flex: none; }

/* prizes */
.wheel-wrap { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.wheel-wrap svg { width: 100%; height: 100%; transition: transform 4.5s cubic-bezier(.12,.75,.12,1); filter: drop-shadow(0 6px 0 var(--ink)); }
.wheel-wrap .pin { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); width: 0; height: 0; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 30px solid var(--ink); z-index: 2; }
.wheel-wrap .pin::after { content: ''; position: absolute; left: -10px; top: -26px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 19px solid var(--accent); }
.wheel-wrap .hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--paper); border: var(--line) solid var(--ink); display: flex; align-items: center; justify-content: center; }
.wheel-wrap .hub .em { width: 44px; height: 44px; }
.boxes { display: flex; gap: 10px; }
.box { flex: 1; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink); padding: 10px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.box .em { width: 54px; height: 54px; }
.box .have { font-family: var(--font-big); font-size: 15px; }
.box .btn { width: 100%; min-height: 36px; }
.box .btn .t { font-size: 13px; }
.coll { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.ci { aspect-ratio: 1; background: #f3e6cf; border: 2.5px solid var(--ink); border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ci .em { width: 62%; height: 62%; }
.ci.no { background: rgba(0,0,0,.18); border-style: dashed; border-color: rgba(42,11,61,.45); }
.ci.no .em { filter: brightness(0) opacity(.3); }
.ci .rb { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 4px; border-radius: 4px; }
.ci.eq::after { content: '✓'; position: absolute; right: -5px; top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--good); color: #fff; border: 2px solid var(--ink); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ci .fpv { position: absolute; inset: 10%; border-radius: 12px; }
.tabs2 { display: flex; gap: 6px; margin-bottom: 10px; }
.tabs2 button { flex: 1; background: rgba(255,255,255,.35); border: 2.5px solid var(--ink); border-radius: 12px; padding: 6px 0; font-family: var(--font-big); font-size: 14px; color: var(--ink); }
.tabs2 button.on { background: var(--accent); }
.ach { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1.5px dashed #e0d2bb; font-size: 13px; }
.ach .em { width: 28px; height: 28px; flex: none; }
.ach.no { opacity: .45; }
.ach .r { margin-left: auto; white-space: nowrap; font-size: 12px; display: flex; align-items: center; gap: 2px; }
.ach .r .em { width: 18px; height: 18px; }

/* rarity glows */
.r-common { --rc: #b8c4d6; } .r-rare { --rc: #3fa9ff; } .r-epic { --rc: #b65cff; } .r-legendary { --rc: #ffc21a; }

/* ---------- name card (what your buddy sees) ---------- */
.ncard { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: var(--paper); border: 4px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.ncard .av { flex: none; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--accent) 75%); border: var(--line) solid var(--ink); position: relative; }
.ncard .av > div { position: absolute; inset: 6px; }
.ncard .who { flex: 1; min-width: 0; }
.ncard .nm { font-family: var(--font-big); font-size: 20px; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard .ti { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ncard .dec { display: flex; gap: 2px; }
.ncard .dec .em { width: 30px; height: 30px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.ncard .dec .em:nth-child(1) { transform: rotate(-12deg); } .ncard .dec .em:nth-child(3) { transform: rotate(10deg); }
.ncard .score { text-align: right; flex: none; }
.ncard .score b { font-family: var(--font-big); font-size: 17px; display: block; }
.ncard .score span { font-size: 11px; color: var(--muted); }
.ncard .online { position: absolute; left: 52px; top: 50px; width: 14px; height: 14px; border-radius: 50%; background: var(--good); border: 2px solid var(--ink); }
.ncard.me { outline: 3px dashed rgba(255,255,255,.7); outline-offset: 3px; }
.ncard .rank { position: absolute; left: -10px; top: -10px; width: 30px; height: 30px; }
.frame-cardboard { background: #e3c497; border-color: #7a5a2f; }
.frame-bubble { background: linear-gradient(135deg, #ffd1f0, #c9f0ff); }
.frame-wood { background: repeating-linear-gradient(90deg, #c98f55 0 8px, #b97d44 8px 14px); }
.frame-wood .ti, .frame-cardboard .ti { color: #4b2f12; }
.frame-silver { background: linear-gradient(135deg, #f4f6fa, #b6bfcc 40%, #f4f6fa 60%, #9aa4b3); }
.frame-slime { background: linear-gradient(180deg, #b6ff6b, #4fd64f); border-color: #1b5e20; }
.frame-fire { background: linear-gradient(0deg, #ff3d00, #ffb300 60%, #fff59d); animation: fireFrame 1s ease-in-out infinite alternate; }
@keyframes fireFrame { to { filter: saturate(1.4) brightness(1.08); } }
.frame-holo { background: linear-gradient(120deg, #ff9de2, #9de8ff, #c9ff9d, #ffe59d, #ff9de2); background-size: 300% 300%; animation: holo 4s linear infinite; }
@keyframes holo { to { background-position: 300% 0; } }
.frame-gold { background: linear-gradient(135deg, #fff3b0, #ffc21a 35%, #fff3b0 55%, #e09b00); box-shadow: 0 4px 0 var(--ink), 0 0 18px #ffd23f; }
.frame-void { background: radial-gradient(circle at 30% 30%, #6b2bd9, #12002b 70%); color: #fff; }
.frame-void .ti, .frame-void .score span { color: #c9b3ff; }

/* ---------- finishes (skins) on business art ---------- */
.fin-mint { filter: hue-rotate(120deg) saturate(1.3); }
.fin-bubble { filter: hue-rotate(290deg) saturate(1.7) brightness(1.08); }
.fin-lime { filter: hue-rotate(70deg) saturate(3) drop-shadow(0 0 8px #aaff00); }
.fin-night { filter: brightness(.6) saturate(1.5) hue-rotate(200deg) drop-shadow(0 0 7px #66ccff); }
.fin-inverted { transform: rotate(180deg); }
.fin-chrome { filter: grayscale(1) contrast(1.7) brightness(1.15) drop-shadow(0 0 4px #fff); }
.fin-ice { filter: saturate(.35) hue-rotate(170deg) brightness(1.3) drop-shadow(0 0 7px #bde8ff); }
.fin-lava { filter: sepia(1) saturate(7) hue-rotate(-25deg) drop-shadow(0 0 10px #ff4400); animation: lava 1.4s ease-in-out infinite alternate; }
@keyframes lava { to { filter: sepia(1) saturate(9) hue-rotate(-10deg) drop-shadow(0 0 18px #ff7700); } }
.fin-tiny { transform: scale(.55); }
.fin-neon { filter: saturate(2.4) drop-shadow(0 0 4px #00ffff) drop-shadow(0 0 12px #ff00ff); animation: hue 3s linear infinite; }
.fin-galaxy { animation: galaxy 5s linear infinite; }
@keyframes galaxy { 0% { filter: hue-rotate(0) saturate(2) drop-shadow(0 0 8px #7a3cff); } 100% { filter: hue-rotate(360deg) saturate(2) drop-shadow(0 0 8px #7a3cff); } }
.fin-ghost { opacity: .5; animation: ghost 2.4s ease-in-out infinite; filter: drop-shadow(0 0 10px #fff); }
@keyframes ghost { 50% { transform: translateY(-6px); opacity: .3; } }
.fin-wobble { animation: jelly 1.1s ease-in-out infinite; }
@keyframes jelly { 25% { transform: scale(1.15, .85); } 50% { transform: scale(.9, 1.1); } 75% { transform: scale(1.05, .95); } }
.fin-gold { filter: sepia(1) saturate(4.5) hue-rotate(4deg) brightness(1.12) contrast(1.15) drop-shadow(0 0 7px #ffd23f); }
.fin-rainbow { animation: rainbow 1.6s linear infinite; }
@keyframes rainbow { from { filter: hue-rotate(0) saturate(2.2); } to { filter: hue-rotate(360deg) saturate(2.2); } }
@keyframes hue { to { filter: saturate(2.4) hue-rotate(360deg) drop-shadow(0 0 4px #00ffff) drop-shadow(0 0 12px #ff00ff); } }
.fin-glitch { animation: glitch 1.8s steps(1) infinite; }
@keyframes glitch { 0%, 100% { transform: none; filter: none; } 8% { transform: translate(-3px, 1px) skewX(8deg); filter: drop-shadow(3px 0 0 #f0f) drop-shadow(-3px 0 0 #0ff); } 12% { transform: translate(2px, -2px); filter: hue-rotate(90deg) drop-shadow(-3px 0 0 #f0f); } 16% { transform: none; filter: none; } 54% { transform: translate(3px, 0) scaleY(.92); filter: invert(1) drop-shadow(3px 0 0 #0ff); } 57% { transform: none; filter: none; } }
.fin-diamond { filter: saturate(0) brightness(1.6) contrast(1.5) drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #9fe8ff); animation: diamond 2.5s ease-in-out infinite; }
@keyframes diamond { 50% { filter: saturate(.4) hue-rotate(180deg) brightness(1.7) contrast(1.5) drop-shadow(0 0 3px #fff) drop-shadow(0 0 14px #ffb3f5); } }

/* ---------- nav ---------- */
#nav { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); height: var(--nav-h); display: flex; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 22px; box-shadow: var(--drop); padding: 4px; z-index: 10; }
#nav button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 16px; font-size: 11px; transition: background .15s; min-width: 0; }
#nav button .em { width: 34px; height: 34px; transition: transform .15s; }
#nav button span { white-space: nowrap; }
#nav button.on { background: var(--accent); }
#nav button.on .em { transform: translateY(-3px) scale(1.12); }
#nav .dot { position: absolute; top: 2px; right: 8px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; border: 2px solid var(--ink); font-size: 10px; font-style: normal; display: none; align-items: center; justify-content: center; padding: 0 4px; font-family: var(--font-big); }
#nav .dot.show { display: flex; animation: dotPop .4s; }
@keyframes dotPop { 50% { transform: scale(1.4); } }

/* ---------- goose ---------- */
#goose { position: fixed; z-index: 30; width: 84px; height: 84px; cursor: pointer; filter: sepia(1) saturate(5) hue-rotate(5deg) brightness(1.15) drop-shadow(0 0 14px #ffd23f) drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
#goose .em { width: 100%; height: 100%; animation: flap .35s ease-in-out infinite alternate; }
@keyframes flap { to { transform: translateY(-8px) rotate(-6deg); } }
#goose .spark { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(255,230,120,.5), transparent 65%); border-radius: 50%; animation: breathe2 .8s ease-in-out infinite; z-index: -1; }
@keyframes breathe2 { 50% { transform: scale(1.2); } }

/* ---------- toasts ---------- */
#toasts { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, 420px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 6px 12px; font-size: 12.5px; line-height: 1.25; animation: toastIn .35s cubic-bezier(.2,1.6,.4,1), toastOut .3s ease-in forwards; animation-delay: 0s, var(--life, 3.2s); pointer-events: auto; }
.toast .em { width: 32px; height: 32px; flex: none; }
.toast b { font-family: var(--font-big); font-weight: 400; font-size: 15px; display: block; }
.toast.taunt { background: #ffe1ec; }
@keyframes toastIn { from { transform: translateY(30px) scale(.8); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(20px); opacity: 0; } }

/* ---------- modal ---------- */
#modal { position: fixed; inset: 0; z-index: 70; background: rgba(20,4,35,.72); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .2s; }
@keyframes fadeIn { from { opacity: 0; } }
#modalCard { width: min(100%, 420px); max-height: 90vh; overflow-y: auto; background: var(--paper); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); padding: 18px; text-align: center; animation: popIn .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes popIn { from { transform: scale(.6); opacity: 0; } }
#modalCard h3 { font-family: var(--font-big); font-weight: 400; font-size: 28px; margin: 4px 0 6px; line-height: 1.05; }
#modalCard p { font-size: 15px; margin: 6px 0 12px; color: #4a3a5c; }
#modalCard .hero { width: 120px; height: 120px; margin: 0 auto; }
.btns { display: flex; gap: 8px; margin-top: 10px; }
#modalCard .btns { margin-top: 12px; }
#modalCard input[type=text] { width: 100%; font: inherit; font-size: 20px; text-align: center; padding: 10px; border: var(--line) solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); outline: none; text-transform: uppercase; }
#modalCard textarea { width: 100%; height: 90px; font: 12px monospace; border: 2px solid var(--ink); border-radius: 10px; padding: 8px; }
.reveal { position: relative; width: 170px; height: 170px; margin: 6px auto; }
.reveal .glow { position: absolute; inset: -30px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--rc), transparent 30%, var(--rc) 50%, transparent 65%, var(--rc) 80%, transparent); animation: spin 3s linear infinite; opacity: .8; mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.reveal > .em { position: absolute; left: 20px; top: 20px; width: calc(100% - 40px); height: calc(100% - 40px); }
.reveal .fpv { position: absolute; inset: 20px; }
.reveal.shake .em { animation: shake .12s linear infinite; }
@keyframes shake { 25% { transform: rotate(-8deg) translateX(-3px); } 75% { transform: rotate(8deg) translateX(3px); } }
.rtag { display: inline-block; padding: 3px 12px; border-radius: 99px; border: 2.5px solid var(--ink); background: var(--rc); font-family: var(--font-big); font-size: 15px; color: var(--ink); }
.list-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.list-pick button { aspect-ratio: 1; border: 2.5px solid var(--ink); border-radius: 12px; background: #f3e6cf; position: relative; }
.list-pick button .em { position: absolute; left: 12%; top: 12%; width: 76%; height: 76%; }
.list-pick button.on { background: var(--accent); }
.set-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1.5px dashed #e0d2bb; font-size: 15px; }
.toggle { width: 54px; height: 30px; border-radius: 99px; background: #cbbfd8; border: 2.5px solid var(--ink); position: relative; transition: background .15s; }
.toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); transition: left .15s; }
.toggle.on { background: var(--good); }
.toggle.on::after { left: 25px; }
.link { color: #7a3cff; text-decoration: underline; cursor: pointer; font-size: 13px; }
.code { font-family: var(--font-big); font-size: 34px; letter-spacing: 2px; background: #fff; border: var(--line) dashed var(--ink); border-radius: 14px; padding: 6px; margin: 8px 0; }

/* ---------- big moments ---------- */
#scene { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; text-align: center; pointer-events: auto; overflow: hidden; }
#scene .swirl { position: absolute; width: 220vmax; height: 220vmax; background: conic-gradient(#7a3cff, #ff4f8b, #ffd23f, #2fd47a, #3fa9ff, #7a3cff); border-radius: 50%; animation: spin 1.2s linear infinite; opacity: 0; transition: opacity .8s; }
#scene .swirl.on { opacity: 1; }
#scene .msg { position: relative; font-family: var(--font-big); font-size: 40px; line-height: 1.05; paint-order: stroke fill; -webkit-text-stroke: 8px var(--ink); text-shadow: 0 6px 0 var(--ink); padding: 0 20px; opacity: 0; transform: scale(.4); transition: all .5s cubic-bezier(.2,1.6,.4,1); }
#scene .msg.on { opacity: 1; transform: none; }
#scene .msg small { display: block; font-size: 20px; -webkit-text-stroke: 5px var(--ink); margin-top: 10px; }
#scene .flash { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .25s; }
#scene .flash.on { opacity: 1; }

/* ---------- coach (first five minutes) ---------- */
#coach { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#coachRing { position: absolute; border: 4px solid #fff; border-radius: 22px; box-shadow: 0 0 0 9999px rgba(20,4,35,.55), 0 0 24px #fff; transition: all .35s cubic-bezier(.2,1.2,.4,1); animation: ringPulse 1.2s ease-in-out infinite; }
@keyframes ringPulse { 50% { border-color: var(--accent); } }
#coachTip { position: absolute; max-width: 280px; background: var(--paper); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 10px 14px; font-size: 15px; transition: all .35s; }
#coachTip b { font-family: var(--font-big); font-weight: 400; font-size: 18px; display: block; }

/* ---------- boot ---------- */
#boot { position: fixed; inset: 0; z-index: 100; background: linear-gradient(180deg, #ff7a59, #ff4f8b 45%, #7a3cff); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .5s; }
#boot .logo { font-family: var(--font-big); font-size: 64px; line-height: .9; text-align: center; color: var(--accent); paint-order: stroke fill; -webkit-text-stroke: 12px var(--ink); text-shadow: 0 9px 0 var(--ink); transform: rotate(-4deg); }
#boot .sub { color: #fff; margin-top: 18px; font-size: 15px; }
#boot.gone { opacity: 0; pointer-events: none; }

@media (min-width: 700px) {
  #cash { font-size: 40px; }
  .tile { width: 104px; height: 104px; }
  .tile .main { left: 16px; top: 12px; width: 72px; height: 72px; }
}
@media (max-width: 360px) {
  #nav button span { font-size: 9px; }
  .tile { width: 80px; height: 80px; }
  .tile .main { left: 12px; top: 8px; width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { #decor .d, #sun { animation: none; } }

/* ================= THE RUN ================= */
body.running #app, body.running #goose { visibility: hidden; }
#runner { position: fixed; inset: 0; z-index: 35; background: #4fbf5a; touch-action: none; overscroll-behavior: none; }
#runner canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.rhud { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top)) 12px 0; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; }
.rw { display: flex; flex-direction: column; align-items: flex-start; color: #fff; }
.rw b { font-family: var(--font-big); font-weight: 400; font-size: 46px; line-height: .9; paint-order: stroke fill; -webkit-text-stroke: 8px var(--ink); text-shadow: 0 5px 0 var(--ink); }
.rw span { font-family: var(--font-big); font-size: 16px; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); margin-top: -2px; }
.rw em { font-style: normal; font-family: var(--font-big); font-size: 13px; color: var(--ink); background: #ffd23f; border: 2.5px solid var(--ink); border-radius: 9px; padding: 1px 8px; margin-top: 4px; box-shadow: 0 3px 0 var(--ink); }
.rmeter { flex: 1; position: relative; margin-top: 14px; }
.rmeter .rz { display: flex; height: 16px; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 0 3px 0 var(--ink); }
.rmeter .rneedle { position: absolute; top: -7px; width: 6px; height: 30px; margin-left: -3px; background: #fff; border: 2.5px solid var(--ink); border-radius: 4px; transition: left .12s; }
.rx { pointer-events: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); box-shadow: 0 3px 0 var(--ink); font-family: var(--font-big); font-size: 18px; flex: none; }
.rcash { position: absolute; left: 12px; top: calc(118px + env(safe-area-inset-top)); color: #fff; font-family: var(--font-big); font-size: 15px; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ink); display: flex; align-items: center; gap: 4px; pointer-events: none; }
.rcash .em { width: 22px; height: 22px; } .rcash small { font-family: var(--font); font-size: 11px; opacity: .9; margin-left: 4px; }
.rcombo { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-family: var(--font-big); font-size: 26px; paint-order: stroke fill; -webkit-text-stroke: 6px var(--ink); pointer-events: none; transition: transform .15s; }
.rcombo.pop { transform: scale(1.25); }
.rprog { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); height: 10px; background: rgba(0,0,0,.35); border-radius: 9px; overflow: hidden; border: 2px solid var(--ink); pointer-events: none; }
.rprog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ffd23f, #ff4f8b); }
.rhint { position: absolute; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom)); text-align: center; color: #fff; font-family: var(--font-big); font-size: 20px; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); pointer-events: none; transition: opacity .4s; animation: hintBob 1s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translateX(10px); } }
.rcount { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--font-big); font-size: 110px; color: #ffd23f; paint-order: stroke fill; -webkit-text-stroke: 14px var(--ink); text-shadow: 0 9px 0 var(--ink); pointer-events: none; }
.rcount.pop { animation: countPop .6s ease-out; }
.rcount.go { color: #7dffb2; }
@keyframes countPop { 0% { transform: scale(2.2); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.9); } }
.rend { position: absolute; inset: 0; background: rgba(20,4,35,.6); display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
.rcard { width: min(100%, 400px); background: var(--paper); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); padding: 16px; text-align: center; animation: popIn .35s cubic-bezier(.2,1.6,.4,1); }
.rtitle { font-family: var(--font-big); font-size: 30px; }
.dial { width: 100%; max-width: 280px; margin: 0 auto; display: block; }
.rweigh { font-family: var(--font-big); font-size: 20px; margin-top: -4px; } .rweigh b { font-weight: 400; font-size: 44px; }
.rstamp { display: inline-block; margin: 6px 0 4px; font-family: var(--font-big); font-size: 28px; padding: 4px 16px; border: 4px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); transform: rotate(-4deg); animation: stamp .4s cubic-bezier(.2,1.8,.4,1); }
@keyframes stamp { from { transform: rotate(-4deg) scale(3); opacity: 0; } }
.rbp { position: relative; width: 120px; height: 120px; margin: 8px auto 2px; }
.rbp .glow { position: absolute; inset: -24px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, var(--rc), transparent 30%, var(--rc) 50%, transparent 65%, var(--rc) 80%, transparent); animation: spin 3s linear infinite; mask-image: radial-gradient(circle, #000 30%, transparent 70%); }
.rbp img.art { position: relative; }
.rbpname { font-family: var(--font-big); font-size: 22px; }
.rbpline { font-size: 13px; color: #4a3a5c; margin-top: 4px; }
.rtag { display: inline-block; padding: 2px 10px; border-radius: 99px; border: 2.5px solid var(--ink); background: var(--rc); font-family: var(--font-big); font-size: 13px; color: var(--ink); vertical-align: middle; }

/* run tab */
.runcard { text-align: center; }
.runner-art { width: 96px; height: 96px; margin: -4px auto 0; animation: tapme 0.9s ease-in-out infinite; }
.trend { display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 12px; background: linear-gradient(90deg, #ffe1ec, #fff3d6); border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px 10px; font-size: 12px; }
.trend .em { width: 40px; height: 40px; flex: none; animation: tapme 1.4s ease-in-out infinite; }
.trend b { display: block; font-family: var(--font-big); font-weight: 400; font-size: 15px; color: #ff2e7e; }
.ci .lv { position: absolute; right: 3px; top: 2px; font-family: var(--font-big); font-size: 11px; background: var(--ink); color: #fff; border-radius: 6px; padding: 0 4px; }
.mallbar { display: flex; align-items: center; gap: 10px; text-align: left; margin: 10px auto 0; max-width: 460px; background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 7px 10px; font-size: 12px; cursor: pointer; text-shadow: none; }
.mallbar .em { width: 36px; height: 36px; flex: none; }
.mallbar div { flex: 1; min-width: 0; } .mallbar b { display: block; font-family: var(--font-big); font-weight: 400; font-size: 15px; }
.mallbar span { font-family: var(--font-big); font-size: 14px; background: #ff4f8b; color: #fff; border: 2.5px solid var(--ink); border-radius: 10px; padding: 3px 8px; white-space: nowrap; }

/* your strip mall */
.mall { position: relative; background: linear-gradient(#e9dcc6, #d9c7a8); border: var(--line) solid var(--ink); border-radius: 18px; box-shadow: var(--drop); overflow: hidden; }
.mall .roof { background: repeating-linear-gradient(90deg, #ff4f8b 0 22px, #fff 22px 44px); border-bottom: var(--line) solid var(--ink); text-align: center; font-family: var(--font-big); font-size: 18px; color: #fff; paint-order: stroke fill; -webkit-text-stroke: 5px var(--ink); padding: 6px 4px; letter-spacing: 1px; }
.mall .shops { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 10px 0; }
.mall .mmult { text-align: center; font-family: var(--font-big); font-size: 15px; background: var(--ink); color: #ffd23f; padding: 3px; }
.mall .shops::-webkit-scrollbar { height: 0; }
.mall .lot { height: 16px; background: repeating-linear-gradient(90deg, #4a4560 0 30px, #fff 30px 34px); border-top: var(--line) solid var(--ink); margin-top: 10px; }
.shop { min-width: 0; background: #fff8ec; border: var(--line) solid var(--ink); border-radius: 12px 12px 4px 4px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .12s; }
.shop:active { transform: scale(.97); }
.shop .awn { height: 22px; background: repeating-linear-gradient(90deg, var(--c) 0 16px, rgba(255,255,255,.9) 16px 32px); border-bottom: var(--line) solid var(--ink); clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 100%, 88% 70%, 82% 100%, 76% 70%, 70% 100%, 64% 70%, 58% 100%, 52% 70%, 46% 100%, 40% 70%, 34% 100%, 28% 70%, 22% 100%, 16% 70%, 10% 100%, 4% 70%, 0 100%); }
.shop .win { position: relative; height: 84px; margin: 6px 8px 0; border-radius: 10px; border: var(--line) solid var(--ink); background: linear-gradient(160deg, #cfefff, #8fd3ff 60%, #e8f8ff); overflow: hidden; }
.shop .win::after { content: ''; position: absolute; left: -30%; top: 0; width: 30%; height: 100%; background: rgba(255,255,255,.5); transform: skewX(-20deg); animation: glint 4s ease-in-out infinite; }
@keyframes glint { 60%, 100% { left: 130%; } }
.shop .win .lock { position: absolute; inset: 22%; } .shop .win .lock .em { width: 100%; height: 100%; }
.shop .sign { margin: 8px 8px 0; font-family: var(--font-big); font-size: 15px; text-align: center; border: 2.5px solid var(--ink); border-radius: 8px; padding: 3px 4px; background: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop.empty .sign, .shop.locked .sign { color: var(--ink); -webkit-text-stroke: 0; font-size: 13px; }
.shop .where { font-size: 10.5px; color: var(--muted); text-align: center; padding: 4px 6px 8px; }
.shop.locked { opacity: .55; } .shop.locked .win { background: #bdb3c9; }
.shop.empty .win { background: repeating-linear-gradient(45deg, #efe2cc 0 10px, #e2d2b6 10px 20px); }
.shop.hype { box-shadow: 0 0 0 3px #ff2e7e, 0 0 18px #ff2e7e; }
.mall.mini { box-shadow: none; background: none; border: 0; } .mall.mini .shops { display: flex; justify-content: center; padding: 0; } .mall.mini .shop { flex: 0 0 170px; }
.swatches { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.swatches button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink); }
.swatches button.on { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }

/* ================= PHONE ================= */
html, body { height: 100dvh; touch-action: manipulation; overscroll-behavior: none; }
#app { height: 100dvh; }
#nav button { font-size: 10px; }
#nav button .em { width: 30px; height: 30px; }
#nav .runtab .em { animation: tapme 1.6s ease-in-out infinite; }
@media (max-width: 420px) {
  #main { padding-left: 10px; padding-right: 10px; }
  #nav { left: 6px; right: 6px; padding: 3px; }
  #nav .dot { right: 2px; }
  .biz { padding: 8px; gap: 8px; }
  .bname { font-size: 17px; }
  .item .btn { min-width: 92px; }
  .perks { grid-template-columns: 1fr 1fr; }
  #modalCard { padding: 14px; }
}
@media (max-width: 360px) { #nav button span { font-size: 8.5px; } #nav button .em { width: 26px; height: 26px; } }

.rflash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, transparent 40%, rgba(255,40,40,.55)); opacity: 0; }
.rflash.on { animation: hitFlash .45s ease-out; }
@keyframes hitFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
.rhits { margin-left: 8px; font-size: 13px; background: rgba(0,0,0,.35); border-radius: 8px; padding: 1px 6px; -webkit-text-stroke: 0; display: inline-flex; align-items: center; gap: 3px; }
.rhits .em { width: 16px; height: 16px; }
.rhits.bad { background: rgba(255,60,60,.6); }
.rluck { font-size: 12.5px; margin: 4px 0; color: #4a3a5c; }
.rluck .em { width: 18px; height: 18px; }
.rluck.good { font-family: var(--font-big); font-size: 16px; color: #b8860b; }

/* toasts never steal a drag during a run */
body.running .toast { pointer-events: none; }

/* Beat the Builder board (the Spine kit, dressed as a sticker) */
.rboard .rb { max-width: none; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
.rboard .rb-t { font-size: 15px; }
.rboard .rb-b b { font-family: var(--font-big); font-weight: 400; }
.rboard .rb-f input { color: var(--ink); background: #fff; border-color: var(--ink); }
.rboard .rb-f button { color: #fff; }
.rcard .rboard { margin-top: 12px; text-align: left; }
.rcard { max-height: calc(100dvh - 32px); overflow-y: auto; }
.rend { align-items: flex-start; }
.rscore { margin-top: 12px; font-family: var(--font-big); font-size: 16px; display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.rscore b { font-weight: 400; font-size: 32px; }
.rscore em { font-style: normal; background: #ffd23f; border: 2.5px solid var(--ink); border-radius: 8px; padding: 0 8px; font-size: 14px; transform: rotate(-3deg); }
.rscore small { font-family: var(--font); font-size: 12px; color: var(--muted); }
.rb-off { color: #fff; text-align: center; font-size: 13px; }
.runcard .stat-row { flex-wrap: wrap; } .runcard .stat { min-width: 70px; }
.rboard .rb-more, .rboard .rb-x { display: none !important; }

/* ================= THE APP IS BEING EATEN ================= */
:root { --corrupt: 0; }
.wapp { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; background: rgba(0,0,0,.35); color: #fff; border-radius: 99px; padding: 2px 10px 2px 4px; margin-bottom: 6px; }
.wapp .em { width: 18px; height: 18px; } .wapp b { color: var(--accent); }
.rentag { font-size: 11px; color: #ff2e7e; font-weight: 900; margin-top: -4px; }
.owntag { font-size: 11px; color: #fff; background: #ff2e7e; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; }
.owntag .em { width: 15px; height: 15px; }
#nav .apptab .em { animation: appWob 2.4s ease-in-out infinite; }
@keyframes appWob { 0%, 90%, 100% { transform: none; } 93% { transform: rotate(-12deg) scale(1.1); } 96% { transform: rotate(10deg); } }

/* cracks in the glass: more parts owned, more cracks */
#cracks { position: fixed; inset: 0; z-index: 39; pointer-events: none; opacity: calc(var(--corrupt) * .75); }
#cracks svg { width: 100%; height: 100%; }
#cracks path { fill: none; stroke: #fff; stroke-width: .35; vector-effect: non-scaling-stroke; stroke-width: 1.6px; filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }

/* glitch bursts */
body.glitching #app { animation: appGlitch .14s steps(2) infinite; }
@keyframes appGlitch {
  0% { transform: translate(0, 0); filter: none; }
  25% { transform: translate(-4px, 2px) skewX(4deg); filter: hue-rotate(90deg) drop-shadow(4px 0 0 #f0f) drop-shadow(-4px 0 0 #0ff); }
  50% { transform: translate(3px, -2px); filter: invert(.15) saturate(2); }
  75% { transform: translate(-2px, 0) skewX(-3deg); filter: drop-shadow(-3px 0 0 #f0f); }
  100% { transform: none; filter: none; }
}
body.sab-glitch #app { animation: sabGlitch 1.6s ease-in-out infinite; }
body.sab-glitch .biz:nth-child(odd) { transform: rotate(-2deg); } body.sab-glitch .biz:nth-child(even) { transform: rotate(2deg) translateX(6px); }
@keyframes sabGlitch { 0%, 100% { filter: hue-rotate(0); } 30% { filter: hue-rotate(140deg) saturate(2); transform: skewY(1deg); } 60% { filter: hue-rotate(260deg) contrast(1.4); transform: skewY(-1deg) translateX(-3px); } }
body.frozen #app { filter: grayscale(1) blur(1px); transition: filter .6s; }

/* the app's voice */
#voice { position: fixed; z-index: 58; right: 10px; top: calc(118px + env(safe-area-inset-top)); display: flex; align-items: flex-start; gap: 6px; flex-direction: row-reverse; max-width: min(78vw, 320px); pointer-events: none; opacity: 0; transform: translateX(30px); transition: all .3s cubic-bezier(.2,1.5,.4,1); }
#voice.show { opacity: 1; transform: none; }
.vphone { position: relative; width: 46px; height: 46px; flex: none; animation: tapme 1.2s ease-in-out infinite; }
.vphone img { width: 100%; height: 100%; } .vphone .vface { position: absolute; left: 25%; top: 22%; width: 50%; height: 50%; }
.vbub { background: #111; color: #7dff9a; font-family: 'Courier New', monospace; font-weight: 700; font-size: 13px; border: 2.5px solid #7dff9a; border-radius: 12px 2px 12px 12px; padding: 7px 10px; box-shadow: 0 0 14px rgba(125,255,154,.4); }

/* rebirth = crash, escape = jailbreak */
#crash { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 18px; }
#crash .cr-freeze { position: absolute; inset: 0; background: rgba(0,0,0,.25); }
#crash .cr-dlg { position: relative; width: min(92vw, 360px); background: #f0f0f0; color: #111; border: 1px solid #888; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); font-family: system-ui, sans-serif; font-weight: 600; padding: 14px 16px; animation: popIn .25s; }
.cr-h { font-size: 12px; color: #666; } .cr-dlg p { margin: 8px 0 12px; font-size: 16px; }
.cr-spin { width: 26px; height: 26px; border: 3px solid #ccc; border-top-color: #333; border-radius: 50%; animation: spin .8s linear infinite; margin-bottom: 12px; }
.cr-btns { display: flex; gap: 8px; justify-content: flex-end; } .cr-btns span { background: #ddd; border-radius: 6px; padding: 6px 12px; font-size: 13px; color: #999; }
#crash.black { background: #000; transition: background .3s; } #crash.black .cr-dlg { transform: scale(.2) rotate(8deg); opacity: 0; transition: all .4s; }
.cr-boot { width: min(94vw, 420px); background: #000; color: #7dff9a; font-family: 'Courier New', monospace; font-weight: 700; padding: 22px 18px; border: 2px solid #7dff9a; border-radius: 12px; text-align: left; animation: popIn .3s; box-shadow: 0 0 40px rgba(125,255,154,.35); }
#crash:has(.cr-boot) { background: #000; }
.cr-logo { font-family: var(--font-big); font-size: 34px; color: #ffd23f; letter-spacing: 1px; }
.cr-ver { font-size: 14px; opacity: .8; margin-bottom: 14px; }
.cr-notes { font-size: 13.5px; line-height: 1.5; border-top: 1px dashed #7dff9a; border-bottom: 1px dashed #7dff9a; padding: 10px 0; } .cr-notes b { color: #fff; display: block; margin-bottom: 4px; }
.cr-gain { margin-top: 12px; font-size: 16px; color: #fff; }
.cr-tap { margin-top: 14px; font-size: 12px; opacity: .6; animation: breathe2 1.2s infinite; }
.jb { text-align: center; color: #fff; }
.jb-phone { width: 140px; height: 140px; margin: 0 auto; animation: shake .1s linear infinite; }
.jb-t { font-family: var(--font-big); font-size: 46px; color: #7dff9a; -webkit-text-stroke: 8px #000; paint-order: stroke fill; }
.jb-bar { width: 240px; height: 14px; border: 2px solid #7dff9a; border-radius: 8px; margin: 10px auto; overflow: hidden; } .jb-bar i { display: block; height: 100%; width: 0; background: #7dff9a; animation: jbfill 3.2s linear forwards; }
@keyframes jbfill { to { width: 100%; } }
.jb-s { font-family: 'Courier New', monospace; font-weight: 700; font-size: 14px; }
#crash:has(.jb) { background: radial-gradient(circle, #102a18, #000 70%); }

/* the App tab */
.appcard { text-align: center; }
.aphone { width: 150px; height: 220px; margin: 0 auto 10px; border: 6px solid var(--ink); border-radius: 26px; background: linear-gradient(160deg, var(--sky1), var(--sky3)); position: relative; overflow: hidden; box-shadow: 0 6px 0 var(--ink); }
.aphone::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 2px, transparent 2px 4px); }
.aphone.dead { background: #000; }
.ascreen { position: absolute; inset: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; }
.ascreen b { font-family: var(--font-big); font-weight: 400; font-size: 16px; line-height: 1.05; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.ascreen span { font-size: 11px; opacity: .9; } .ascreen em { font-style: normal; font-family: var(--font-big); font-size: 22px; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; color: #7dff9a; }
.ameter { width: 100%; height: 10px; background: rgba(0,0,0,.4); border-radius: 6px; overflow: hidden; border: 2px solid var(--ink); } .ameter i { display: block; height: 100%; background: linear-gradient(90deg, #7dff9a, #ff2e7e); }
.astat { font-size: 13px; color: var(--muted); }
.item.part.next { box-shadow: 0 4px 0 var(--ink), 0 0 0 3px #ffd23f, 0 0 20px rgba(255,210,63,.6); }
.item.part.locked { opacity: .55; } .item.part.locked .pic { filter: grayscale(1); }

/* takeover sheet */
.tk-list { text-align: left; }
.tk-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1.5px dashed #e0d2bb; }
.tk-row .pic { width: 40px; height: 40px; flex: none; } .tk-row .pic .em { width: 100%; height: 100%; }
.tk-row .txt { flex: 1; min-width: 0; } .tk-row .t1 { font-family: var(--font-big); font-size: 15px; line-height: 1.1; } .tk-row .t1 small { font-family: var(--font); font-size: 10px; color: #ff2e7e; }
.tk-row .t2 { font-size: 11px; color: var(--muted); }
.tk-bar { position: relative; height: 14px; background: #eadfcb; border: 2px solid var(--ink); border-radius: 8px; overflow: hidden; display: flex; margin: 3px 0; }
.tk-bar i.me { background: #2fd47a; } .tk-bar i.ot { background: #ff2e7e; }
.tk-bar span { position: absolute; inset: 0; font-size: 9.5px; line-height: 10px; text-align: center; color: var(--ink); font-weight: 900; }
.tk-btns { display: flex; flex-direction: column; gap: 4px; flex: none; } .tk-btns .btn { min-height: 34px; min-width: 92px; } .tk-btns .btn .t { font-size: 13px; }
.tk-sab { display: flex; flex-direction: column; gap: 6px; } .tk-sab .btn .em { width: 18px; height: 18px; }

/* ---------- the parts, on screen ---------- */
body.p-counter #cash { color: #ffe066; filter: drop-shadow(0 0 10px rgba(255,210,63,.9)); }
body.p-counter #cashbox { position: relative; }
body.p-counter #cashbox::after { content: 'MINE.'; position: absolute; right: 0; top: -6px; font-family: var(--font-big); font-size: 11px; color: var(--ink); background: #ffd23f; border: 2px solid var(--ink); border-radius: 6px; padding: 0 5px; transform: rotate(8deg); }
body.p-buttons .btn:not(.off) { box-shadow: 0 4px 0 var(--ink), inset 0 0 0 3px #ffe066, inset 0 8px 0 rgba(255,255,255,.25); }
body.p-font .h2, body.p-font .wname, body.p-font .bname, body.p-font #cash, body.p-font .item .t1, body.p-font .btn .t { font-family: 'Bungee', var(--font-big); letter-spacing: -.5px; }
body.p-font .bname { font-size: 15px; } body.p-font #cash { font-size: .92em; }
#decor.mine .d { opacity: .8; filter: drop-shadow(0 8px 0 rgba(0,0,0,.25)) saturate(1.3); }
body.p-goose #goose::after { content: ''; position: absolute; left: 22%; top: -26%; width: 56%; height: 56%; background: url('https://cdn.jsdelivr.net/npm/@lobehub/fluent-emoji-3d@1.1.0/assets/1f451.webp') center/contain no-repeat; filter: none; }
#goose.stolen { pointer-events: none; filter: grayscale(.6) drop-shadow(0 0 10px #ff2e7e); }
#goose.stolen::before { content: attr(data-thief); position: absolute; left: 50%; top: 100%; transform: translateX(-50%) scaleX(var(--flip, 1)); white-space: nowrap; font-family: var(--font-big); font-size: 13px; color: #fff; background: #ff2e7e; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 6px; }
body.p-source #hud::before { content: 'OWNER'; position: absolute; left: 50%; top: calc(2px + env(safe-area-inset-top)); transform: translateX(-50%); font-family: var(--font-big); font-size: 10px; letter-spacing: 3px; color: var(--ink); background: linear-gradient(90deg, #ffd23f, #fff6b0, #ffd23f); border: 2px solid var(--ink); border-radius: 6px; padding: 0 8px; }
body.p-source #nav { box-shadow: 0 5px 0 var(--ink), 0 0 0 3px #ffd23f; }
#boot.owned .sub { font-family: var(--font-big); font-size: 22px; color: #ffd23f; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
@media (max-width: 420px) { #voice { top: calc(150px + env(safe-area-inset-top)); } }
@media (prefers-reduced-motion: reduce) { body.glitching #app, body.sab-glitch #app { animation: none; } }