:root {
  --bg: #0E0A1C;
  --bg2: #160E2C;
  --card: rgba(255,255,255,.05);
  --line: rgba(255,255,255,.10);
  --text: #F4EEFF;
  --muted: #B9A9DA;
  --dim: #8E80AE;
  --lime: #C6FF4A;
  --lime-ink: #182400;
  --pink: #FF5FA8;
  --pink-soft: #FFC4DF;
  --violet: #B05CFF;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
body { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, .title { font-family: Unbounded, sans-serif; margin: 0; letter-spacing: -0.3px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }

#app { height: 100%; display: flex; flex-direction: column;
  background: radial-gradient(120% 70% at 50% 30%, #2A1650 0%, #120B24 60%, #0B0816 100%); }

/* ---------- splash / gate ---------- */
.splash { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.splash-title { font-family: Unbounded, sans-serif; font-weight: 900; font-size: 34px; margin: 10px 0 0; }
.gate p { max-width: 300px; line-height: 1.45; margin: 0; }

/* ---------- top bar ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 6px; gap: 10px; }
.me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none;
  background: radial-gradient(circle at 35% 30%, #FFD3EC, #FF5FA8 55%, #A0246A); }
.me-name { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-sub { font-size: 12px; color: var(--muted); }
.jelly-pill { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; flex: none;
  background: rgba(198,255,74,.12); border: 1px solid rgba(198,255,74,.35); }
.jelly-dot { width: 14px; height: 14px; border-radius: 50% 50% 45% 45%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.jelly-num { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 15px; color: #E9FFB8; }

/* ---------- screens ---------- */
.screen { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px 24px; }
.screen-head { display: flex; flex-direction: column; gap: 4px; margin: 10px 0 14px; }
.screen-head h1 { font-size: 24px; font-weight: 900; }

.stats { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin: 2px 2px 10px; gap: 8px; flex-wrap: wrap; }
.boost { color: var(--pink-soft); font-weight: 800; }

/* pet */
.pet { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px 0 14px; padding: 16px 16px 14px;
  border-radius: 30px; border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(70% 70% at 50% 40%, rgba(176,92,255,.28), rgba(255,255,255,.03) 75%); }
.pet-stage { position: relative; height: 170px; width: 100%; display: flex; align-items: center; justify-content: center; border: none; background: none; padding: 0; }
.pet-stage .slime { transition: transform .15s; }
.pet-stage:active .slime { transform: scale(1.08, .92); }
.pet-floor { position: absolute; bottom: 8px; left: 50%; width: 150px; height: 18px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); }
.pet-name { display: flex; align-items: center; gap: 8px; }
.pet-name .title { font-size: 20px; font-weight: 900; }
.icon-btn { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--muted); }
.pet-sub { font-size: 12px; color: var(--muted); margin-top: -6px; }
.mood { width: 100%; }
.mood-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.mood .bar > div { background: linear-gradient(90deg, #FF5FA8, #FF9ACB); }
.mood.happy .bar > div { background: linear-gradient(90deg, #9EE21F, var(--lime)); }
.pet-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.pet-actions .btn { min-height: 46px; font-size: 13px; }
.heart { position: absolute; width: 16px; height: 16px; pointer-events: none; animation: rise 1.1s ease-out forwards; color: #FF5FA8; }
@keyframes rise { from { transform: translateY(0) scale(.6); opacity: 1 } to { transform: translateY(-90px) scale(1.2); opacity: 0 } }
.cell .pet-mark { position: absolute; top: 4px; right: 5px; width: 12px; height: 12px; color: #FF5FA8; }
.name-input { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text);
  font: 700 16px Manrope, sans-serif; padding: 0 14px; margin: 12px 0; }
.name-input:focus { outline: 2px solid var(--lime); outline-offset: 1px; }

/* battle pass card */
.pass { position: relative; overflow: hidden; border-radius: 22px; padding: 18px; margin-bottom: 16px;
  background: linear-gradient(135deg, #3B1B00 0%, #6B2C00 35%, #2B0F4A 100%); border: 1px solid rgba(255,200,58,.55); }
.pass::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,200,58,.45), transparent); }
.pass .badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #2B1600; background: #FFC83A; padding: 4px 10px; border-radius: 99px; }
.pass h3 { font-size: 20px; margin: 10px 0 6px; color: #FFE6A8; }
.pass ul { margin: 8px 0 0; padding-left: 18px; color: #F6DDB0; font-size: 13px; line-height: 1.6; }
.pass .soon { margin-top: 12px; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 13px; color: #FFC83A; }

/* jelly label */
.jelly-pill { border: 1px solid rgba(198,255,74,.35); cursor: pointer; }
.jelly-pill .jelly-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.jelly-pill .jelly-cap { font-size: 10px; font-weight: 800; color: #B6E06A; letter-spacing: .4px; margin-top: 3px; }
.jelly-pill .jelly-dot { width: 18px; height: 18px; }
.admin-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,200,58,.5); background: rgba(255,200,58,.12); color: #FFC83A;
  display: flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.top-right { display: flex; align-items: center; gap: 8px; }

/* selection bar */
.selbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.selbar .txt { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.3; }
.selbar .btn { min-height: 38px; font-size: 12px; padding: 0 12px; border-radius: 12px; }

/* tutorial */
.tut-hole { position: fixed; z-index: 40; border-radius: 22px; pointer-events: none; transition: all .3s ease;
  box-shadow: 0 0 0 9999px rgba(5,3,12,.78), 0 0 0 3px var(--lime); }
.tut-box { position: fixed; z-index: 41; left: 16px; right: 16px; background: #1F1240; border: 1px solid rgba(198,255,74,.5); border-radius: 20px; padding: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); animation: up .25s; }
.tut-box h3 { font-size: 16px; margin: 0 0 6px; }
.tut-box p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: #E4D8FF; }
.tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tut-dots { display: flex; gap: 6px; }
.tut-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
.tut-dots i.on { background: var(--lime); }

/* wheel */
.wheel-card { background: linear-gradient(135deg, rgba(198,255,74,.16), rgba(63,224,240,.12)); border-color: rgba(198,255,74,.4); }
.wheel-wrap { position: relative; width: 280px; height: 280px; margin: 10px auto 18px; }
.wheel { width: 100%; height: 100%; border-radius: 50%; transition: transform 4.2s cubic-bezier(.12,.75,.12,1); box-shadow: 0 0 40px rgba(176,92,255,.5), 0 0 0 6px #2A1650, 0 0 0 9px rgba(198,255,74,.6); }
.wheel-pin { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 0; height: 0; z-index: 2;
  border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid var(--lime); filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.wheel-hub { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, #F3B6FF 20%, #B05CFF 55%, #5A1FB8 100%); box-shadow: 0 0 20px rgba(176,92,255,.8); }
.spins-left { text-align: center; font-size: 13px; color: var(--muted); margin: -6px 0 12px; }

/* admin */
.admin { position: fixed; inset: 0; z-index: 50; background: #0D0920; display: flex; flex-direction: column; animation: fade .2s; }
.admin-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.admin-head h1 { font-size: 22px; color: #FFC83A; }
.admin-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px 10px; flex: none; scrollbar-width: none; }
.admin-tabs button { flex: none; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 800; font-size: 13px; }
.admin-tabs button.on { background: #FFC83A; color: #2B1600; border-color: #FFC83A; }
.admin-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(24px + var(--safe-b)); }
.acard { border-radius: 18px; background: var(--card); border: 1px solid rgba(255,255,255,.08); padding: 14px; margin-bottom: 10px; }
.acard h2, .ah2 { font-size: 16px; margin: 0 0 10px; }
.ah2 { margin: 18px 2px 10px; }
.f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; flex: 1; min-width: 0; }
.f label { font-size: 12px; color: var(--muted); font-weight: 700; }
.f input, .f select, .f textarea { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06);
  color: var(--text); font: 600 15px Manrope, sans-serif; padding: 10px 12px; }
.f textarea { resize: vertical; min-height: 110px; line-height: 1.4; }
.f select option { background: #1A1033; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid #FFC83A; outline-offset: 1px; }
.row2 { display: flex; gap: 10px; }
.chk { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; margin: 2px 0 12px; min-height: 32px; }
.chk input { width: 20px; height: 20px; accent-color: var(--lime); }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--muted); }
.kv b { color: var(--text); }
.pill { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--muted); white-space: nowrap; }
.st-active, .st-sending, .st-sent { background: rgba(198,255,74,.16); color: var(--lime); }
.st-scheduled, .st-paused { background: rgba(255,200,58,.16); color: #FFC83A; }
.st-cancelled { background: rgba(255,95,168,.16); color: var(--pink-soft); }
.st-completed { background: rgba(63,224,240,.16); color: #8FEFFF; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.tile { border-radius: 16px; background: var(--card); border: 1px solid rgba(255,255,255,.08); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.tile b { font-family: Unbounded, sans-serif; font-size: 20px; }
.tile span { font-size: 12px; color: var(--muted); font-weight: 700; }
.tile small { font-size: 11px; color: var(--dim); }
.tile:first-child { border-color: rgba(198,255,74,.5); }
.tile:first-child b { color: var(--lime); }

/* jar */
.jar { position: relative; border-radius: 30px; padding: 14px; min-height: 330px;
  background: radial-gradient(90% 60% at 50% 100%, rgba(198,255,74,.16), rgba(255,255,255,.03) 70%);
  border: 1px solid rgba(255,255,255,.12); }
.jar-hint { font-size: 13px; color: var(--muted); text-align: center; margin: 0 0 10px; min-height: 18px; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cell { aspect-ratio: 1; border-radius: 18px; border: 1px dashed rgba(255,255,255,.10); background: rgba(255,255,255,.02);
  display: flex; align-items: center; justify-content: center; position: relative; padding: 0; }
.cell.filled { border-style: solid; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.cell.sel { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(198,255,74,.35) inset; }
.cell.match { border-color: rgba(255,95,168,.7); }
.cell .lvl { position: absolute; top: 4px; left: 6px; font-size: 10px; font-weight: 800; color: var(--muted); }
.cell .mut { position: absolute; bottom: 3px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }

.storage { margin: 14px 2px 0; }
.bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.10); overflow: hidden; }
.bar > div { height: 100%; background: linear-gradient(90deg, #9EE21F, var(--lime)); border-radius: 99px; transition: width .4s; }
.bar-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.btn { min-height: 52px; border-radius: 16px; border: none; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; transition: transform .08s; }
.btn:active { transform: scale(.97); }
.btn small { font-family: Manrope, sans-serif; font-weight: 800; font-size: 11px; opacity: .8; }
.btn-lime { background: var(--lime); color: var(--lime-ink); box-shadow: 0 8px 24px rgba(198,255,74,.3); }
.btn-pink { background: rgba(255,95,168,.14); border: 1px solid rgba(255,95,168,.55); color: var(--pink-soft); }
.btn-solid-pink { background: var(--pink); color: #2A0016; }
.btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--text); }
.btn[disabled] { opacity: .45; transform: none; }
.btn-row { display: flex; gap: 10px; }
.btn-row > .btn { flex: 1; }
.shop-btn { margin-top: 10px; width: 100%; }

/* ---------- cards / lists ---------- */
.card { border-radius: 20px; background: var(--card); border: 1px solid rgba(255,255,255,.08); padding: 14px 16px; }
.list { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; align-items: center; gap: 12px; }
.row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row .t { font-weight: 800; font-size: 14px; }
.row .s { font-size: 12px; color: var(--muted); }
.icon-box { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.section-label { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--dim); margin: 20px 2px 10px; }

.sponsor { background: linear-gradient(135deg, rgba(255,95,168,.20), rgba(176,92,255,.16)); border-color: rgba(255,95,168,.45); }
.sponsor .badge { font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--pink-soft); }
.sponsor h3 { font-size: 15px; margin: 8px 0 4px; }
.sponsor .btn-row { margin-top: 12px; }
.progress { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 10px; }
.progress > div { height: 100%; background: var(--pink); }

.banner { display: block; width: 100%; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); padding: 0; background: none; margin-bottom: 14px; }
.banner img { display: block; width: 100%; height: auto; }
.banner-tag { font-size: 10px; color: var(--dim); text-align: right; margin: -10px 4px 12px; }

.rank { width: 28px; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 14px; color: var(--muted); text-align: center; flex: none; }
.rank.gold { color: #FFD84A; } .rank.silver { color: #C9D2E3; } .rank.bronze { color: #FFB38A; }
.me-row { border-color: rgba(198,255,74,.45); }

.atlas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.atlas-item { border-radius: 16px; background: var(--card); border: 1px solid rgba(255,255,255,.08); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 11px; font-weight: 800; min-height: 98px; justify-content: center; }
.atlas-item.locked { color: var(--dim); }
.lock { width: 40px; height: 34px; border-radius: 50% 50% 46% 54% / 62% 60% 40% 38%; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.18); }
.atlas-count { font-size: 13px; color: var(--muted); }

.ref-box { display: flex; flex-direction: column; gap: 12px; }
.ref-box h3 { font-size: 17px; }

/* ---------- nav ---------- */
.nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(8px + var(--safe-b));
  background: rgba(11,8,22,.94); border-top: 1px solid rgba(255,255,255,.08); flex: none; }
.nav button { background: none; border: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--dim); font-size: 11px; font-weight: 800; min-height: 48px; justify-content: center; position: relative; }
.nav button.on { color: var(--lime); }
.nav svg { width: 22px; height: 22px; }
.nav .dot { position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }

/* ---------- sheet / modal ---------- */
.sheet-bg { position: fixed; inset: 0; background: rgba(5,3,12,.66); display: flex; align-items: flex-end; z-index: 20; animation: fade .2s; }
.sheet { width: 100%; max-height: 86vh; overflow-y: auto; background: #1A1033; border-radius: 26px 26px 0 0; border-top: 1px solid var(--line);
  padding: 18px 18px calc(20px + var(--safe-b)); animation: up .25s cubic-bezier(.2,.9,.3,1); }
.sheet .grab { width: 40px; height: 4px; border-radius: 9px; background: rgba(255,255,255,.2); margin: 0 auto 14px; }
.sheet h2 { font-size: 20px; margin-bottom: 4px; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.trait-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 6px 0 4px; }
.trait-list div { background: var(--card); border-radius: 12px; padding: 8px 10px; text-align: left; font-size: 12px; }
.trait-list b { display: block; font-size: 13px; color: var(--text); }
.serial { font-family: Unbounded, sans-serif; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 99px; background: rgba(14,10,28,.75); border: 1px solid rgba(243,182,255,.5); color: #F3B6FF; }
.product { display: flex; align-items: center; gap: 12px; }
.product .price { min-height: 44px; min-width: 84px; border-radius: 14px; border: none; background: var(--lime); color: var(--lime-ink); font-family: Unbounded, sans-serif; font-weight: 700; font-size: 13px; padding: 0 12px; }

.reveal { animation: pop .7s cubic-bezier(.2,1.4,.4,1); }
.burst { position: relative; }
.burst::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(243,182,255,.45), transparent); animation: pulse 1.6s infinite; z-index: -1; }

.toast { position: fixed; left: 16px; right: 16px; bottom: calc(86px + var(--safe-b)); z-index: 30; padding: 12px 16px; border-radius: 16px;
  background: #251645; border: 1px solid var(--line); font-weight: 800; font-size: 14px; text-align: center; opacity: 0; transform: translateY(10px);
  transition: all .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: none; }
.toast.err { border-color: rgba(255,95,168,.6); color: var(--pink-soft); }

@keyframes fade { from { opacity: 0 } }
@keyframes up { from { transform: translateY(40px); opacity: .4 } }
@keyframes pop { 0% { transform: scale(.2); opacity: 0 } 60% { transform: scale(1.12); opacity: 1 } 100% { transform: scale(1) } }
@keyframes pulse { 50% { transform: scale(1.15); opacity: .6 } }

/* ======================= SLIMES ======================= */
.slime { --size: 56px; --c: #B05CFF; --l: #F3B6FF; --d: #5A1FB8;
  width: var(--size); height: calc(var(--size) * .86); position: relative; flex: none;
  border-radius: 52% 48% 44% 56% / 60% 58% 42% 40%;
  background: radial-gradient(circle at 34% 28%, #fff 0 7%, var(--l) 18%, var(--c) 52%, var(--d) 100%);
  box-shadow: inset calc(var(--size) * -.08) calc(var(--size) * -.1) calc(var(--size) * .2) rgba(20,0,50,.45);
  animation: wobble 3.2s ease-in-out infinite; overflow: visible; }
.slime::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.slime .face { position: absolute; left: 50%; top: 46%; width: 44%; height: 30%; transform: translateX(-50%); }
.slime .face::before, .slime .face::after { content: ""; position: absolute; top: 0; width: 22%; height: 58%; border-radius: 50%; background: #1A0730; }
.slime .face::before { left: 4%; } .slime .face::after { right: 4%; }
.slime .face i, .slime .face { font-style: normal; }
.slime .mouth { position: absolute; left: 50%; top: 66%; width: 18%; height: 9%; transform: translateX(-50%); background: #1A0730; border-radius: 0 0 60px 60px; }
@keyframes wobble {
  0%, 100% { border-radius: 52% 48% 44% 56% / 60% 58% 42% 40%; transform: scale(1, 1); }
  50% { border-radius: 48% 52% 52% 48% / 56% 62% 38% 44%; transform: scale(1.04, .96); }
}

/* colors */
.c-red { --c:#FF4D5E; --l:#FFB3BB; --d:#8E1426; }
.c-orange { --c:#FF9A3C; --l:#FFD2A6; --d:#8C4300; }
.c-yellow { --c:#FFD84A; --l:#FFF1B0; --d:#9A7400; }
.c-lime { --c:#C6FF4A; --l:#E9FFB8; --d:#4E7A00; }
.c-green { --c:#3EE07A; --l:#B4F7CB; --d:#0E6A33; }
.c-cyan { --c:#3FE0F0; --l:#B8F7FF; --d:#0B6B78; }
.c-blue { --c:#3C7BFF; --l:#AFC8FF; --d:#13307E; }
.c-purple { --c:#B05CFF; --l:#F3B6FF; --d:#5A1FB8; }
.c-pink { --c:#FF5FA8; --l:#FFB3D6; --d:#8E1C55; }
.c-white { --c:#E9E1FA; --l:#FFFFFF; --d:#8B7FA8; }
.c-black { --c:#3A2F52; --l:#7D6E9C; --d:#120C1E; }
.c-silver { --c:#C9D2E3; --l:#FFFFFF; --d:#6A7488; }
.c-midnight { --c:#2A3F9E; --l:#7E93F0; --d:#0B1340; }
.c-peach { --c:#FFB38A; --l:#FFE3D2; --d:#A4512A; }

/* patterns */
.p-spots::after { background: radial-gradient(circle at 25% 65%, rgba(255,255,255,.35) 0 8%, transparent 9%), radial-gradient(circle at 72% 30%, rgba(255,255,255,.3) 0 7%, transparent 8%), radial-gradient(circle at 70% 75%, rgba(0,0,0,.18) 0 9%, transparent 10%); }
.p-stripes::after { background: repeating-linear-gradient(115deg, transparent 0 14%, rgba(255,255,255,.18) 14% 22%); }
.p-swirl::after { background: conic-gradient(from 30deg at 50% 55%, transparent 0 25%, rgba(255,255,255,.18) 25% 35%, transparent 35% 60%, rgba(255,255,255,.14) 60% 70%, transparent 70%); }
.p-stars::after { background: radial-gradient(circle at 20% 30%, #fff 0 2.5%, transparent 3.5%), radial-gradient(circle at 80% 40%, #fff 0 2%, transparent 3%), radial-gradient(circle at 60% 85%, #fff 0 2.5%, transparent 3.5%), radial-gradient(circle at 30% 80%, #fff 0 1.5%, transparent 2.5%); }
.p-hearts::after { background: radial-gradient(circle at 22% 72%, #FF5FA8 0 7%, transparent 8%), radial-gradient(circle at 78% 70%, #FF5FA8 0 7%, transparent 8%); }

/* glow */
.glow-soft { filter: drop-shadow(0 0 calc(var(--size) * .12) var(--c)); }
.glow-neon { filter: drop-shadow(0 0 calc(var(--size) * .22) var(--c)) drop-shadow(0 0 calc(var(--size) * .06) #fff); }
.glow-aurora { filter: drop-shadow(0 0 calc(var(--size) * .2) #3FE0F0) drop-shadow(0 0 calc(var(--size) * .2) #B05CFF); animation: wobble 3.2s ease-in-out infinite, hue 6s linear infinite; }
@keyframes hue { to { filter: drop-shadow(0 0 calc(var(--size) * .2) #3FE0F0) drop-shadow(0 0 calc(var(--size) * .2) #B05CFF) hue-rotate(360deg); } }

/* mutations */
.m-rainbow { background: conic-gradient(from 0deg, #FF4D5E, #FFD84A, #3EE07A, #3FE0F0, #3C7BFF, #B05CFF, #FF4D5E); animation: wobble 3.2s ease-in-out infinite, hue 4s linear infinite; }
.m-gold { --c:#FFC83A; --l:#FFF4C2; --d:#8A5A00; background: radial-gradient(circle at 34% 28%, #fff 0 9%, var(--l) 20%, var(--c) 50%, var(--d) 100%); filter: drop-shadow(0 0 calc(var(--size) * .18) #FFC83A); }
.m-ghost { opacity: .72; background: radial-gradient(circle at 34% 28%, #fff 0 10%, rgba(243,182,255,.9) 25%, rgba(176,92,255,.55) 60%, rgba(90,31,184,.25) 100%); filter: drop-shadow(0 0 calc(var(--size) * .25) rgba(243,182,255,.9)); }
.m-crystal { --c:#9DF3FF; --l:#FFFFFF; --d:#2C7FA6; background: linear-gradient(135deg, #fff 0 12%, var(--c) 30%, #6FD3FF 55%, var(--d) 100%); border-radius: 30% 30% 38% 38% / 34% 34% 30% 30%; filter: drop-shadow(0 0 calc(var(--size) * .18) #9DF3FF); animation: none; }
.m-lava { --c:#FF5A1F; --l:#FFD08A; --d:#5C0D00; background: radial-gradient(circle at 34% 28%, #FFE9B0 0 8%, #FFB13B 22%, #FF5A1F 50%, #5C0D00 100%); filter: drop-shadow(0 0 calc(var(--size) * .2) #FF5A1F); }
.m-galaxy { background: radial-gradient(circle at 25% 30%, #fff 0 2%, transparent 3%), radial-gradient(circle at 70% 60%, #fff 0 1.5%, transparent 2.5%), radial-gradient(circle at 45% 75%, #fff 0 1.5%, transparent 2.5%), radial-gradient(circle at 40% 35%, #7E5CFF 0%, #2A0F6B 55%, #05020F 100%); filter: drop-shadow(0 0 calc(var(--size) * .24) #7E5CFF); }
.m-founder { --c:#C6FF4A; --l:#FFFFFF; --d:#2E5200; filter: drop-shadow(0 0 calc(var(--size) * .2) #C6FF4A) drop-shadow(0 0 calc(var(--size) * .08) #fff); }

@media (prefers-reduced-motion: reduce) { .slime, .m-rainbow, .glow-aurora { animation: none !important; } }

/* ======================= NEW COLORS ======================= */
.c-toxic { --c:#7CFF00; --l:#DFFFB0; --d:#2E6B00; }
.c-mint { --c:#5CFFC8; --l:#D4FFF0; --d:#0D7A5A; }
.c-chocolate { --c:#7A4A2E; --l:#C99A72; --d:#2E160A; }
.c-watermelon { --c:#FF4F7A; --l:#FFB3C6; --d:#1F8A3A; background: radial-gradient(circle at 34% 28%, #fff 0 7%, #FFB3C6 18%, #FF4F7A 48%, #FF4F7A 62%, #F4FFE8 66%, #2EB84E 72%, #155E28 100%); }
.c-sunset { --c:#FF7A59; --l:#FFE1A8; --d:#6B1F5E; background: radial-gradient(circle at 34% 28%, #fff 0 7%, transparent 18%), linear-gradient(170deg, #FFD36E 0%, #FF7A59 45%, #C0397A 75%, #5A1F6B 100%); }
.c-cosmos { --c:#2A1F6B; --l:#7E6CFF; --d:#05030F; background: radial-gradient(circle at 22% 30%, #fff 0 1.5%, transparent 2.5%), radial-gradient(circle at 70% 25%, #fff 0 1%, transparent 2%), radial-gradient(circle at 60% 70%, #FFE08A 0 1.5%, transparent 2.5%), radial-gradient(circle at 30% 75%, #9DF3FF 0 1%, transparent 2%), radial-gradient(circle at 34% 28%, #8B7BFF 0 6%, #2A1F6B 40%, #05030F 100%); }

/* ======================= NEW PATTERNS ======================= */
.p-zebra::after { background: repeating-linear-gradient(100deg, transparent 0 9%, rgba(10,6,20,.42) 9% 15%); }
.p-leopard::after { background:
  radial-gradient(circle at 25% 30%, transparent 0 5%, rgba(40,20,0,.55) 5.5% 8%, transparent 8.5%),
  radial-gradient(circle at 65% 25%, transparent 0 4%, rgba(40,20,0,.55) 4.5% 7%, transparent 7.5%),
  radial-gradient(circle at 45% 60%, transparent 0 5%, rgba(40,20,0,.55) 5.5% 8%, transparent 8.5%),
  radial-gradient(circle at 78% 65%, transparent 0 4%, rgba(40,20,0,.55) 4.5% 7%, transparent 7.5%),
  radial-gradient(circle at 20% 75%, transparent 0 3.5%, rgba(40,20,0,.55) 4% 6%, transparent 6.5%); }
.p-marble::after { background: linear-gradient(125deg, transparent 20%, rgba(255,255,255,.28) 24%, transparent 30%, transparent 52%, rgba(255,255,255,.2) 55%, transparent 60%),
  linear-gradient(35deg, transparent 40%, rgba(0,0,0,.15) 44%, transparent 50%); }
.p-pixel::after { background: conic-gradient(rgba(255,255,255,.18) 25%, transparent 0 50%, rgba(0,0,0,.12) 0 75%, transparent 0) 0 0 / 22% 22%; }
.p-lightning::after { background:
  linear-gradient(115deg, transparent 46%, #FFF27A 47% 50%, transparent 51%) 0 0 / 50% 100%,
  linear-gradient(65deg, transparent 46%, #FFF27A 47% 50%, transparent 51%) 25% 0 / 50% 100%;
  opacity: .65; }
.p-checker::after { background: conic-gradient(rgba(255,255,255,.22) 25%, transparent 0 50%, rgba(255,255,255,.22) 0 75%, transparent 0) 0 0 / 34% 34%; }
.p-drops::after { background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.55) 0 3%, transparent 4%), radial-gradient(ellipse at 62% 32%, rgba(255,255,255,.45) 0 2.5%, transparent 3.5%), radial-gradient(ellipse at 50% 72%, rgba(255,255,255,.4) 0 3%, transparent 4%), radial-gradient(ellipse at 78% 58%, rgba(255,255,255,.5) 0 2%, transparent 3%), radial-gradient(ellipse at 22% 68%, rgba(255,255,255,.45) 0 2%, transparent 3%); }
.p-graffiti::after { background: radial-gradient(circle at 25% 35%, rgba(255,79,122,.7) 0 9%, transparent 10%), radial-gradient(circle at 70% 30%, rgba(124,255,0,.65) 0 8%, transparent 9%), radial-gradient(circle at 55% 72%, rgba(63,224,240,.7) 0 10%, transparent 11%), radial-gradient(circle at 20% 70%, rgba(255,216,74,.7) 0 6%, transparent 7%); mix-blend-mode: screen; }

/* ======================= NEW GLOWS ======================= */
.glow-pulse { animation: wobble 3.2s ease-in-out infinite, gpulse 1.6s ease-in-out infinite; }
@keyframes gpulse { 0%,100% { filter: drop-shadow(0 0 calc(var(--size) * .04) var(--c)); } 50% { filter: drop-shadow(0 0 calc(var(--size) * .28) var(--c)); } }
.glow-flicker { animation: wobble 3.2s ease-in-out infinite, gflick 2.4s steps(1) infinite; }
@keyframes gflick { 0%,40%,48%,100% { filter: drop-shadow(0 0 calc(var(--size) * .2) var(--c)); } 42%,46% { filter: none; } 70% { filter: drop-shadow(0 0 calc(var(--size) * .08) var(--c)); } }
.glow-fire { animation: wobble 3.2s ease-in-out infinite, gfire .5s ease-in-out infinite alternate; }
@keyframes gfire { from { filter: drop-shadow(0 calc(var(--size) * -.06) calc(var(--size) * .14) #FF7A1F) drop-shadow(0 0 calc(var(--size) * .08) #FFD36E); }
  to { filter: drop-shadow(0 calc(var(--size) * -.12) calc(var(--size) * .2) #FF3D1F) drop-shadow(0 0 calc(var(--size) * .12) #FFD36E); } }
.glow-halo::before { content: ""; position: absolute; left: 22%; right: 22%; top: -16%; height: 14%; border-radius: 50%;
  border: calc(var(--size) * .045) solid #FFE08A; box-shadow: 0 0 calc(var(--size) * .12) #FFE08A; animation: halo 2.6s ease-in-out infinite; }
@keyframes halo { 50% { transform: translateY(calc(var(--size) * -.03)); } }

/* ======================= NEW MUTATIONS ======================= */
.m-glitch { animation: wobble 3.2s ease-in-out infinite, glitch 1.8s steps(1) infinite; filter: drop-shadow(3px 0 0 rgba(255,0,80,.7)) drop-shadow(-3px 0 0 rgba(0,240,255,.7)); }
@keyframes glitch { 0%,90%,100% { clip-path: none; translate: 0; } 91% { clip-path: inset(10% 0 55% 0); translate: 4px 0; } 93% { clip-path: inset(50% 0 20% 0); translate: -5px 0; } 95% { clip-path: inset(30% 0 40% 0); translate: 3px 0; } }
.m-hologram { opacity: .88; background: repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 2px, transparent 2px 5px), linear-gradient(135deg, #9DF3FF, #F3B6FF, #C6FF4A, #9DF3FF); background-size: 100% 100%, 300% 300%;
  animation: wobble 3.2s ease-in-out infinite, holo 3s linear infinite; filter: drop-shadow(0 0 calc(var(--size) * .16) rgba(157,243,255,.8)); }
@keyframes holo { to { background-position: 0 0, 300% 300%; } }
.m-bit8 { border-radius: 0 !important; animation: none; clip-path: polygon(20% 0, 80% 0, 80% 8%, 92% 8%, 92% 22%, 100% 22%, 100% 86%, 92% 86%, 92% 100%, 8% 100%, 8% 86%, 0 86%, 0 22%, 8% 22%, 8% 8%, 20% 8%);
  background: linear-gradient(var(--l) 0 22%, var(--c) 22% 78%, var(--d) 78%); }
.m-bit8 .face::before, .m-bit8 .face::after { border-radius: 0; }
.m-ice { --c:#BFEFFF; --l:#FFFFFF; --d:#3B8FC4; background: linear-gradient(160deg, #fff 0 10%, transparent 11%), radial-gradient(circle at 34% 28%, #fff 0 8%, #E3F8FF 22%, #9FDDF5 52%, #3B8FC4 100%);
  filter: drop-shadow(0 0 calc(var(--size) * .14) #BFEFFF); }
.m-ice::after { background: linear-gradient(60deg, transparent 45%, rgba(255,255,255,.7) 46% 48%, transparent 49%), linear-gradient(-30deg, transparent 60%, rgba(255,255,255,.5) 61% 62%, transparent 63%) !important; }
.m-marmalade { opacity: .82; background: radial-gradient(circle at 30% 60%, rgba(255,255,255,.5) 0 4%, transparent 5%), radial-gradient(circle at 68% 45%, rgba(255,255,255,.4) 0 3%, transparent 4%), radial-gradient(circle at 34% 28%, #fff 0 8%, var(--l) 20%, var(--c) 55%, var(--d) 100%);
  filter: saturate(1.6) drop-shadow(0 0 calc(var(--size) * .1) var(--c)); }
.m-zombie { --c:#7FA36A; --l:#C7E0B4; --d:#2E4A22; background: radial-gradient(circle at 34% 28%, #fff 0 5%, var(--l) 18%, var(--c) 52%, var(--d) 100%); }
.m-zombie::after { background: linear-gradient(90deg, transparent 47%, #2A1A10 48% 52%, transparent 53%) 40% 18% / 30% 22% no-repeat,
  repeating-linear-gradient(0deg, transparent 0 3px, #2A1A10 3px 4px) 45% 20% / 20% 18% no-repeat !important; }
.m-zombie .face::after { background: #E8F7D8 !important; box-shadow: inset 0 0 0 2px #1A0730; }
.m-cyber { --c:#1A0F3A; --l:#FF3DCB; --d:#05020F; background: linear-gradient(transparent 48%, rgba(0,240,255,.6) 49% 51%, transparent 52%) 0 0 / 100% 25%, linear-gradient(90deg, transparent 48%, rgba(255,61,203,.5) 49% 51%, transparent 52%) 0 0 / 25% 100%, radial-gradient(circle at 34% 28%, #FF3DCB 0 6%, #3A1F7A 35%, #05020F 100%);
  filter: drop-shadow(0 0 calc(var(--size) * .12) #00F0FF) drop-shadow(0 0 calc(var(--size) * .06) #FF3DCB); }
.m-cyber .face::before, .m-cyber .face::after { background: #00F0FF; box-shadow: 0 0 6px #00F0FF; border-radius: 2px; height: 30%; top: 15%; }
.m-shadow { --c:#140A22; --l:#4A2A7A; --d:#000; background: radial-gradient(circle at 34% 28%, #4A2A7A 0 8%, #1C0E33 45%, #000 100%); filter: drop-shadow(0 0 calc(var(--size) * .14) #9B5CFF); }
.m-shadow .face::before, .m-shadow .face::after { background: #F4EEFF; box-shadow: 0 0 8px #fff; }
.m-shadow .mouth { background: #F4EEFF; }

/* ======================= FACE: blinks, joy, blush ======================= */
.slime .blush { position: absolute; top: 62%; width: 16%; height: 9%; border-radius: 50%; background: rgba(255,95,168,.55); opacity: 0; transition: opacity .25s; }
.slime .blush.l { left: 14%; } .slime .blush.r { right: 14%; }
.slime.joy .blush, .slime.love .blush { opacity: 1; }
.slime .face::before, .slime .face::after { transition: transform .08s; transform-origin: center 60%; }
.slime.blink .face::before, .slime.blink .face::after { transform: scaleY(.12); }
.slime.joy .face::before, .slime.joy .face::after { background: transparent !important; box-shadow: none; height: 34%; top: 10%;
  border: calc(var(--size) * .04) solid #1A0730; border-bottom: none; border-radius: 50% 50% 0 0; }
.slime.joy .mouth { height: 15%; width: 24%; border-radius: 0 0 99px 99px; overflow: hidden; }
.slime.joy .mouth::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 50%; background: #FF6FAE; border-radius: 99px 99px 0 0; }
.slime.love .face::before, .slime.love .face::after { background: #FF3D7F !important; border-radius: 50% 50% 0 50%; transform: rotate(45deg) scale(.9); height: 40%; width: 24%; }
.slime.squish { animation: squish .35s ease-out !important; }
@keyframes squish { 0% { transform: scale(1,1); } 30% { transform: scale(1.18,.78); } 60% { transform: scale(.92,1.1); } 100% { transform: scale(1,1); } }
.slime.hop { animation: hop .9s cubic-bezier(.3,1.6,.5,1) 2 !important; }
@keyframes hop { 0%,100% { transform: translateY(0) scale(1,1); } 20% { transform: translateY(0) scale(1.15,.85); } 50% { transform: translateY(-26%) scale(.92,1.1); } 75% { transform: translateY(0) scale(1.1,.9); } }

/* ======================= FX: hearts, sparkles, bubbles, numbers ======================= */
.fx { position: absolute; pointer-events: none; left: var(--x); top: var(--y); z-index: 3; will-change: transform, opacity; }
.fx-heart { width: var(--s); height: var(--s); animation: fxheart var(--d) cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes fxheart {
  0% { transform: translate(0,0) scale(.2) rotate(0); opacity: 0; }
  15% { transform: translate(calc(var(--dx) * .2), -14px) scale(1.15) rotate(calc(var(--r) * .3)); opacity: 1; }
  100% { transform: translate(var(--dx), -120px) scale(.7) rotate(var(--r)); opacity: 0; } }
.fx-spark { width: var(--s); height: var(--s); animation: fxspark .8s ease-out forwards; }
@keyframes fxspark { 0% { transform: scale(0) rotate(0); opacity: 1; } 60% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(90deg); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0) rotate(180deg); opacity: 0; } }
.fx-bubble { width: var(--s); height: var(--s); border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7) 0 15%, rgba(255,255,255,.08) 40%);
  animation: fxbub 1.4s ease-out forwards; }
@keyframes fxbub { 0% { transform: translate(0,0) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), -140px) scale(1); opacity: 0; } }
.fx-num { font-family: Unbounded, sans-serif; font-weight: 900; font-size: 18px; color: #E9FFB8; text-shadow: 0 0 10px rgba(198,255,74,.9), 0 2px 0 #2E5200;
  animation: fxnum .9s ease-out forwards; white-space: nowrap; }
@keyframes fxnum { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 20% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.tap-meter { font-size: 11px; color: var(--dim); text-align: center; margin-top: -4px; }
.tap-meter b { color: #B6E06A; }

/* ======================= RARITY ======================= */
.rar { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px; }
.rar-0 { background: rgba(255,255,255,.08); color: #C9C0DD; }
.rar-1 { background: rgba(60,123,255,.18); color: #9EC0FF; }
.rar-2 { background: rgba(176,92,255,.2); color: #DDB8FF; }
.rar-3 { background: rgba(255,200,58,.18); color: #FFD76A; box-shadow: 0 0 14px rgba(255,200,58,.25); }
.rar-4 { color: #1A0730; background: linear-gradient(90deg, #FF8EC0, #FFE08A, #C6FF4A, #9DF3FF, #DDB8FF); background-size: 200% 100%; animation: rarbg 3s linear infinite; }
@keyframes rarbg { to { background-position: 200% 0; } }
.cell.r-2 { border-color: rgba(176,92,255,.55); }
.cell.r-3 { border-color: rgba(255,200,58,.6); box-shadow: inset 0 0 12px rgba(255,200,58,.15); }
.cell.r-4 { border-color: transparent; background: linear-gradient(#1F1240, #1F1240) padding-box, linear-gradient(135deg, #FF8EC0, #FFE08A, #C6FF4A, #9DF3FF) border-box; }

/* settings */
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.set-row label { flex: 1; font-weight: 800; font-size: 14px; }
.set-row input[type=range] { width: 46%; accent-color: var(--lime); height: 28px; }
.switch { position: relative; width: 52px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,.15); transition: background .2s; }
.switch span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch input:checked + span { background: var(--lime); }
.switch input:checked + span::after { transform: translateX(22px); }
.switch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

/* ======================= RESPONSIVE: phones, tablets, desktop, TV ======================= */
html { background: #0B0816; }
#app { max-width: 560px; margin: 0 auto; position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,.04); }
.sheet-bg { justify-content: center; }
.sheet { max-width: 560px; margin: 0 auto; }
.toast { max-width: 528px; margin: 0 auto; }
.tut-box { max-width: 528px; margin: 0 auto; }
.admin-head, .admin-tabs, .admin-body > * { max-width: 760px; margin-left: auto; margin-right: auto; width: 100%; }
@media (min-width: 600px) {
  .grid { gap: 10px; }
  .sheet { border-radius: 26px 26px 0 0; }
}
@media (min-height: 1000px) and (min-width: 700px) {
  /* big tablets / TVs: scale the whole UI up a bit */
  html { font-size: 112%; }
  #app, .sheet { max-width: 640px; }
}
@media (max-width: 350px) {
  .me-name { max-width: 80px; }
  .jelly-pill { padding: 6px 10px; }
  .jelly-num { font-size: 13px; }
  .btn { font-size: 13px; }
}

/* wheel: always fits the screen */
.wheel-wrap { width: min(300px, 78vw, 44vh); height: auto; aspect-ratio: 1; margin: 10px auto 14px; }
.wheel-hub { width: 22%; height: 22%; }
.wheel-pin { top: -8px; border-left-width: 13px; border-right-width: 13px; border-top-width: 24px; }
.wheel-result { min-height: 0; max-height: 0; overflow: hidden; opacity: 0; transition: all .35s ease; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.wheel-result.show { max-height: 120px; opacity: 1; padding: 10px 14px; border-radius: 16px; background: rgba(198,255,74,.12); border: 1px solid rgba(198,255,74,.4); }
.wheel-result .wr-label { font-size: 12px; color: var(--muted); font-weight: 800; }
.wheel-result b { font-family: Unbounded, sans-serif; font-size: 17px; color: #E9FFB8; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wheel-result small { font-family: Manrope, sans-serif; font-size: 12px; font-weight: 700; color: var(--muted); }

/* ======================= PERFORMANCE ======================= */
/* only transforms animate (GPU); no per-frame repaint of shapes */
@keyframes wobble { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } }
.cell { contain: layout paint; }
/* in the jar grid effects are static: animated filters on many slimes are what makes phones stutter */
.cell .slime { animation: wobble 3.6s ease-in-out infinite !important; will-change: transform; }
.cell:nth-child(3n+1) .slime { animation-delay: -1.2s !important; }
.cell:nth-child(3n+2) .slime { animation-delay: -2.4s !important; }
.cell .glow-halo::before { animation: none; }
.cell .m-glitch, .cell .m-hologram { animation: wobble 3.6s ease-in-out infinite !important; }
.atlas-item .slime { animation: none !important; }
.screen { contain: content; }
.sheet-bg { will-change: opacity; }

/* ======================= HALLOWEEN TRAITS ======================= */
.c-pumpkin { --c:#FF8A1F; --l:#FFD08A; --d:#8A3A00; }
.c-witch { --c:#3B1F5E; --l:#8A5CD6; --d:#12061F; }
.c-bone { --c:#EDE6D6; --l:#FFFFFF; --d:#8E846E; }
.p-web::after { background:
  repeating-radial-gradient(circle at 50% 0%, transparent 0 9%, rgba(255,255,255,.35) 9.5% 10.5%, transparent 11% 20%),
  repeating-conic-gradient(from 0deg at 50% 0%, transparent 0 14deg, rgba(255,255,255,.3) 14deg 15.5deg); }
.p-skulls::after { background:
  radial-gradient(circle at 28% 38%, #F4EEFF 0 6%, transparent 6.5%), radial-gradient(circle at 25% 37%, #1A0730 0 1.6%, transparent 2%), radial-gradient(circle at 31% 37%, #1A0730 0 1.6%, transparent 2%),
  radial-gradient(circle at 70% 64%, #F4EEFF 0 6%, transparent 6.5%), radial-gradient(circle at 67% 63%, #1A0730 0 1.6%, transparent 2%), radial-gradient(circle at 73% 63%, #1A0730 0 1.6%, transparent 2%); opacity: .85; }
.p-bats::after { background:
  radial-gradient(ellipse 9% 4% at 30% 34%, #120820 60%, transparent 62%), radial-gradient(ellipse 9% 4% at 70% 70%, #120820 60%, transparent 62%),
  radial-gradient(ellipse 5% 3% at 76% 30%, #120820 60%, transparent 62%); }
.p-moonphase::after { background:
  radial-gradient(circle at 22% 40%, #FFF6C2 0 5%, transparent 5.5%), radial-gradient(circle at 42% 30%, #FFF6C2 0 5%, transparent 5.5%),
  radial-gradient(circle at 45% 28%, var(--c) 0 4.5%, transparent 5%), radial-gradient(circle at 62% 30%, #FFF6C2 0 5%, transparent 5.5%),
  radial-gradient(circle at 66% 30%, var(--c) 0 5%, transparent 5.5%), radial-gradient(circle at 80% 40%, #FFF6C2 0 3%, transparent 3.5%); }
.glow-fog { filter: drop-shadow(0 calc(var(--size) * .08) calc(var(--size) * .22) rgba(124,255,120,.75)); }
.glow-candle { animation: wobble 3.2s ease-in-out infinite, gcandle 1.2s ease-in-out infinite alternate; }
@keyframes gcandle { from { filter: drop-shadow(0 0 calc(var(--size) * .12) #FFB13B); } to { filter: drop-shadow(0 0 calc(var(--size) * .24) #FFD36E); } }
.m-pumpkinhead { --c:#FF8A1F; --l:#FFD08A; --d:#7A2E00;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 3%, transparent 3% 16%), radial-gradient(circle at 34% 28%, #FFE1A8 0 8%, #FFB13B 25%, #FF7A1F 55%, #7A2E00 100%);
  filter: drop-shadow(0 0 calc(var(--size) * .16) #FF8A1F); }
.m-pumpkinhead .face::before, .m-pumpkinhead .face::after { background: #FFE14A !important; border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: 0 0 8px #FFE14A; }
.m-pumpkinhead .mouth { background: #FFE14A; height: 12%; width: 34%; clip-path: polygon(0 0, 15% 60%, 30% 0, 50% 60%, 70% 0, 85% 60%, 100% 0, 100% 100%, 0 100%); border-radius: 0; box-shadow: 0 0 8px #FFE14A; }
.m-skeleton { --c:#EDE6D6; --l:#FFFFFF; --d:#6E6655; background: radial-gradient(circle at 34% 28%, #fff 0 10%, #EDE6D6 40%, #8E846E 100%); filter: drop-shadow(0 0 calc(var(--size) * .1) rgba(255,255,255,.6)); }
.m-skeleton .face::before, .m-skeleton .face::after { background: #120820 !important; width: 28%; height: 70%; }
.m-skeleton .mouth { background: repeating-linear-gradient(90deg, #120820 0 2px, #EDE6D6 2px 6px); height: 9%; width: 30%; border-radius: 2px; }
.m-vampire { --c:#5A0A2E; --l:#C2185B; --d:#14000A; background: radial-gradient(circle at 34% 28%, #FF8EC0 0 6%, #C2185B 30%, #5A0A2E 65%, #14000A 100%);
  filter: drop-shadow(0 0 calc(var(--size) * .16) #C2185B); }
.m-vampire .face::before, .m-vampire .face::after { background: #FF3D3D !important; box-shadow: 0 0 8px #FF3D3D; }
.m-vampire .mouth::before, .m-vampire .mouth::after { content: ""; position: absolute; top: 60%; width: 22%; height: 140%; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.m-vampire .mouth::before { left: 12%; } .m-vampire .mouth::after { right: 12%; }
.m-witchy { --c:#3EE07A; --l:#B4F7CB; --d:#0E3A1C; background: radial-gradient(circle at 34% 28%, #DFFFB0 0 7%, #7CFF00 25%, #2E8A3A 60%, #0E3A1C 100%);
  filter: drop-shadow(0 0 calc(var(--size) * .16) #7CFF00); }
.m-moonlit { --c:#9FB4FF; --l:#FFFFFF; --d:#1B2A6B; background: radial-gradient(circle at 70% 25%, #FFF6C2 0 9%, transparent 10%), radial-gradient(circle at 74% 22%, #1B2A6B 0 8%, transparent 9%),
  radial-gradient(circle at 34% 28%, #fff 0 8%, #C9D6FF 25%, #7E93F0 55%, #1B2A6B 100%);
  filter: drop-shadow(0 0 calc(var(--size) * .2) #9FB4FF) drop-shadow(0 0 calc(var(--size) * .06) #fff); }

/* ======================= ACCESSORIES (on the pet) ======================= */
.slime .acc { position: absolute; pointer-events: none; z-index: 2; display: block; }
.slime .acc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.slime .acc-head { left: 18%; width: 64%; top: -38%; height: 52%; }
.slime .acc-head.acc-wide { left: -14%; width: 128%; top: -22%; height: 50%; }
.slime .acc-face { left: 18%; width: 64%; top: 34%; height: 34%; }
.slime .acc-face.acc-low { top: 58%; height: 26%; }
.pet-title { font-size: 12px; font-weight: 800; color: #FFD76A; letter-spacing: .4px; margin-top: -4px; }
.pet-actions.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* wardrobe */
.wd-tabs { display: flex; gap: 6px; margin: 10px 0 12px; }
.wd-tabs button { flex: 1; min-height: 40px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 800; font-size: 13px; }
.wd-tabs button.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.wd-preview { display: flex; justify-content: center; padding: 30px 0 10px; }
.wd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wd-item { border-radius: 16px; border: 1px solid rgba(255,255,255,.08); background: var(--card); padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-align: center; min-height: 118px; justify-content: space-between; }
.wd-item.on { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.wd-item.locked { opacity: .55; }
.wd-icon { width: 54px; height: 40px; }
.wd-icon svg { width: 100%; height: 100%; }
.wd-item .btn { min-height: 32px; font-size: 11px; padding: 0 8px; border-radius: 10px; width: 100%; }
.dust-pill, .candy-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; font-weight: 800; font-size: 13px; }
.dust-pill { background: rgba(157,243,255,.12); color: #9DF3FF; border: 1px solid rgba(157,243,255,.35); }
.candy-pill { background: rgba(255,138,31,.14); color: #FFC07A; border: 1px solid rgba(255,138,31,.45); }

/* ======================= HALLOWEEN THEME ======================= */
body.hw #app { background: radial-gradient(120% 70% at 50% 25%, #3A1640 0%, #1A0B22 55%, #0B0610 100%); }
body.hw .jar { background: radial-gradient(90% 60% at 50% 100%, rgba(255,138,31,.2), rgba(255,255,255,.03) 70%); border-color: rgba(255,138,31,.25); }
body.hw .pet { background: radial-gradient(70% 70% at 50% 40%, rgba(255,138,31,.22), rgba(255,255,255,.03) 75%); }
.hw-bats { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hw-bat { position: absolute; width: 34px; height: 16px; top: var(--y); left: -40px; opacity: .55; animation: batfly var(--t) linear infinite; animation-delay: var(--d); }
.hw-bat svg { width: 100%; height: 100%; animation: flap .25s ease-in-out infinite alternate; transform-origin: center; }
@keyframes batfly { 0% { transform: translate(0, 0); } 25% { transform: translate(30vw, -20px); } 50% { transform: translate(60vw, 10px); } 75% { transform: translate(90vw, -14px); } 100% { transform: translate(115vw, 0); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.hw-card { background: linear-gradient(135deg, rgba(255,138,31,.24), rgba(124,40,160,.22)); border-color: rgba(255,138,31,.55); }
.hw-card .badge { color: #FFC07A; }
.hw-pumpkin { width: 40px; height: 36px; border-radius: 48% 48% 44% 44%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 3px, transparent 3px 9px), radial-gradient(circle at 35% 30%, #FFE1A8, #FF8A1F 55%, #8A3A00); position: relative; flex: none; box-shadow: 0 0 16px rgba(255,138,31,.5); }
.hw-pumpkin::before { content: ""; position: absolute; left: 45%; top: -6px; width: 6px; height: 9px; border-radius: 2px; background: #3E7A1E; }
.event-strip { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; color: #FFC07A; margin: 0 2px 10px; }

/* ======================= BATTLE PASS ======================= */
.pass-card { background: linear-gradient(135deg, #3B1B00 0%, #6B2C00 35%, #2B0F4A 100%); border: 1px solid rgba(255,200,58,.55); }
.pass-head { display: flex; align-items: center; gap: 12px; }
.pass-lvl { width: 56px; height: 56px; border-radius: 16px; background: #FFC83A; color: #2B1600; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: Unbounded, sans-serif; font-weight: 900; font-size: 20px; flex: none; line-height: 1; }
.pass-lvl small { font-family: Manrope, sans-serif; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.pass-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 8px; }
.pass-bar > div { height: 100%; background: linear-gradient(90deg, #FF9A3C, #FFC83A); border-radius: 99px; }
.pass-tracks { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; margin-top: 8px; }
.pass-tracks .hdr { font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--muted); text-align: center; padding: 4px 0; }
.pass-tracks .hdr.prem { color: #FFC83A; }
.pass-num { display: flex; align-items: center; justify-content: center; font-family: Unbounded, sans-serif; font-weight: 700; font-size: 14px; color: var(--muted); }
.pass-num.reached { color: #FFC83A; }
.pass-cell { border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: var(--card); padding: 8px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 800; min-height: 72px; justify-content: space-between; }
.pass-cell.prem { background: linear-gradient(135deg, rgba(255,200,58,.12), rgba(176,92,255,.1)); border-color: rgba(255,200,58,.3); }
.pass-cell.done { opacity: .5; }
.pass-cell .btn { min-height: 32px; font-size: 11px; border-radius: 10px; padding: 0 6px; }
.pass-cell .lock { width: auto; height: auto; border: none; background: none; font-size: 11px; color: var(--dim); font-weight: 700; }
.pass-buy { margin: 12px 0 6px; background: linear-gradient(90deg, #FFC83A, #FF9A3C); color: #2B1600; width: 100%; }

/* ======================= BANDS ======================= */
.band-card { background: linear-gradient(135deg, rgba(63,224,240,.14), rgba(176,92,255,.16)); border-color: rgba(63,224,240,.4); }
.band-name { font-family: Unbounded, sans-serif; font-weight: 900; font-size: 20px; }
.goal { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.goal:last-child { border-bottom: none; }
.goal-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.goal .progress > div { background: linear-gradient(90deg, #3FE0F0, #B05CFF); }
.goal .btn { min-height: 34px; font-size: 12px; padding: 0 12px; border-radius: 10px; }
.seg { display: flex; background: rgba(255,255,255,.06); border-radius: 12px; padding: 3px; gap: 3px; margin-bottom: 12px; }
.seg button { flex: 1; min-height: 38px; border: none; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 800; font-size: 13px; }
.seg button.on { background: var(--lime); color: var(--lime-ink); }
.search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.search-row input { flex: 1; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font: 600 15px Manrope, sans-serif; padding: 0 12px; }

/* room for hats and wings above the pet */
.pet-stage { height: 210px; padding-top: 44px; }
.screen { contain: none; }
.wd-preview { padding-top: 48px; }
.slime .acc-head.acc-wide { top: -32%; height: 46%; }
.hw-bat { opacity: .32; }

/* ---------- Halloween wheel ---------- */
body.hw .wheel-card { background: linear-gradient(135deg, rgba(255,138,31,.22), rgba(109,40,217,.22)); border-color: rgba(255,138,31,.5); }
body.hw .wheel { box-shadow: 0 0 46px rgba(255,122,26,.55), 0 0 0 6px #1A0B22, 0 0 0 9px rgba(255,138,31,.75); }
body.hw .wheel-pin { border-top-color: #FF8A1F; }
body.hw .wheel-hub { background: repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 3px, transparent 3px 10px), radial-gradient(circle at 35% 30%, #FFE1A8, #FF8A1F 55%, #8A3A00);
  border-radius: 48% 48% 44% 44%; box-shadow: 0 0 24px rgba(255,138,31,.9); }
body.hw .wheel-hub::before { content: ""; position: absolute; left: 50%; top: -12%; width: 12%; height: 20%; transform: translateX(-50%); border-radius: 3px; background: #3E7A1E; }
body.hw .wheel-hub::after { content: ""; position: absolute; inset: 30% 20% 22%;
  background: radial-gradient(circle at 25% 25%, #2B1100 0 13%, transparent 14%), radial-gradient(circle at 75% 25%, #2B1100 0 13%, transparent 14%),
  radial-gradient(ellipse 60% 26% at 50% 80%, #2B1100 0 60%, transparent 62%); }
body.hw .wheel-result.show { background: rgba(255,138,31,.14); border-color: rgba(255,138,31,.5); }
body.hw .wheel-result b { color: #FFE1A8; }
.wheel-result .wr-extra { font-size: 12px; font-weight: 800; color: #FFC07A; margin-top: 2px; }

/* ---------- daily quests ---------- */
.card.quest { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.card.quest .t { display: block; font-weight: 800; font-size: 14px; }
.card.quest .s { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.card.quest .progress { margin-top: 8px; }
.card.quest .progress > div { background: var(--lime); }
.card.quest.done { opacity: .55; }
.card.quest-all { border-color: rgba(198,255,74,.45); background: linear-gradient(135deg, rgba(198,255,74,.12), rgba(255,95,168,.08)); }
.q-btn { min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; flex: none; }
.q-num { flex: none; font-weight: 800; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-ok { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(198,255,74,.18); color: var(--lime); font-weight: 900; }

/* ---------- 7-day calendar ---------- */
.cal-card { padding: 14px; margin-bottom: 10px; border-color: rgba(198,255,74,.3); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.cal-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); min-width: 0; }
.cal-cell .cal-d { font-size: 10px; font-weight: 800; color: var(--muted); }
.cal-cell .cal-l { font-size: 10px; font-weight: 800; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cal-cell.done { opacity: .5; }
.cal-cell.cur { background: rgba(198,255,74,.16); border-color: var(--lime); box-shadow: 0 0 14px rgba(198,255,74,.35); }
.cal-cell.big { background: linear-gradient(160deg, rgba(255,95,168,.22), rgba(176,92,255,.18)); border-color: rgba(255,95,168,.45); }
.cal-cell.big.cur { border-color: var(--lime); }
.cal-ok { position: absolute; top: 2px; right: 4px; font-size: 10px; color: var(--lime); font-weight: 900; }
.cal-lost { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255,95,95,.1); border: 1px solid rgba(255,120,120,.35); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cal-lost span { color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 360px) { .cal-cell .cal-l { font-size: 9px; } .cal-grid { gap: 3px; } }

/* ---------- pet evolution ---------- */
.evo-row { display: flex; align-items: center; gap: 10px; width: 100%; margin: 8px 0 4px; padding: 8px 10px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: inherit; text-align: left; font: inherit; }
.evo-badge { flex: none; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .3px; }
.evo-1 { background: rgba(63,224,240,.16); color: #8FF3FB; }
.evo-2 { background: rgba(176,92,255,.2); color: #DDB8FF; }
.evo-3 { background: rgba(255,200,58,.2); color: #FFE08A; }
.evo-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.evo-txt { font-size: 12px; color: var(--muted); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evo-bar { height: 5px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.evo-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3FE0F0, #B05CFF, #FFC83A); }
.evo-bonus { flex: none; font-family: Unbounded, sans-serif; font-size: 13px; color: var(--lime); }
.slime.stage-1 .face { transform: translateX(-50%) scale(1.14); top: 44%; }
.slime.stage-3 { filter: drop-shadow(0 0 14px rgba(255,200,58,.45)); }
.evo-win .evo-glow { padding: 18px; border-radius: 50%; background: radial-gradient(circle, rgba(255,200,58,.3), transparent 70%); animation: evo-pulse 1.6s ease-in-out infinite; }
@keyframes evo-pulse { 50% { transform: scale(1.06); } }

/* ---------- band boss ---------- */
.raid-card { display: block; padding: 14px; background: linear-gradient(140deg, rgba(255,70,90,.18), rgba(90,20,120,.25)); border-color: rgba(255,90,110,.45); color: inherit; font: inherit; }
.raid-card.won { background: linear-gradient(140deg, rgba(198,255,74,.14), rgba(63,224,240,.1)); border-color: rgba(198,255,74,.4); }
.raid-top { display: flex; gap: 12px; align-items: center; }
.raid-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: 1px; color: #FF9AA8; }
.raid-card.won .raid-lbl { color: var(--lime); }
.raid-name { display: block; font-family: Unbounded, sans-serif; font-size: 16px; margin: 2px 0 6px; }
.raid-card .s { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.raid-won { color: #E9FFB8 !important; font-weight: 700; }
.raid-hp { position: relative; height: 20px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; margin-bottom: 6px; border: 1px solid rgba(255,255,255,.12); }
.raid-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #FF3D5A, #FF8A3C); transition: width .5s ease; }
.raid-hp span { position: relative; display: block; text-align: center; font-size: 11px; font-weight: 800; line-height: 20px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.boss-wrap { position: relative; flex: none; display: inline-block; animation: boss-bob 2.4s ease-in-out infinite; }
.boss-wrap::after { content: ""; position: absolute; left: 50%; top: 36%; width: 46%; height: 9%; transform: translateX(-50%); z-index: 3;
  background: linear-gradient(160deg, transparent 0 38%, #1A0730 40% 60%, transparent 62%) left / 45% 100% no-repeat,
              linear-gradient(20deg, transparent 0 38%, #1A0730 40% 60%, transparent 62%) right / 45% 100% no-repeat; }
.boss-wrap.down { animation: none; filter: grayscale(.6) brightness(.8); transform: rotate(-12deg); }
@keyframes boss-bob { 50% { transform: translateY(-4px) scale(1.03); } }

/* ---------- daily shop ---------- */
.dshop-card { border-color: rgba(63,224,240,.35); background: linear-gradient(135deg, rgba(63,224,240,.12), rgba(176,92,255,.1)); }
.offer-card { border-color: rgba(255,200,58,.5); background: linear-gradient(140deg, rgba(255,200,58,.16), rgba(255,95,168,.12)); }
.offer-card h3 { margin: 8px 0 4px; font-family: Unbounded, sans-serif; font-size: 17px; color: #FFE6A8; }
.offer-card.done, .card.product.done { opacity: .55; }
.price:disabled { opacity: .45; }

/* ---------- weekly exhibition ---------- */
.week-box { padding: 14px; margin-bottom: 10px; border-color: rgba(198,255,74,.35); }
.week-prizes { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.week-prizes b { display: inline-block; min-width: 34px; color: #FFC83A; font-family: Unbounded, sans-serif; font-size: 11px; }
.last-week { padding: 12px 14px; margin-bottom: 10px; }
.lw-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 800; font-size: 14px; }
.lw-row b { margin-left: auto; color: var(--lime); font-size: 13px; }
.title-tag { display: inline-block; padding: 1px 7px; border-radius: 99px; background: rgba(255,200,58,.16); color: #FFD76A; font-size: 10px; font-weight: 800; }
.set-row label small { margin-top: 2px; }
.cal-cell.big .cal-l { font-size: 9px; letter-spacing: -.2px; }
.cal-legend { font-size: 12px; margin-top: 8px; }
.cal-legend b { color: var(--text); }
.week-prizes span { display: flex; gap: 8px; }
.week-prizes b { flex: none; }
.evo-win .evo-glow { margin-top: 30px; }

/* ---------- buttons never spill text, on any screen ---------- */
.btn { min-width: 0; max-width: 100%; padding-left: 12px; padding-right: 12px; text-align: center; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.btn-row > .btn { flex: 1 1 0; }
.pet-actions .btn { padding: 6px 6px; font-size: clamp(11px, 3.3vw, 13px); letter-spacing: -.2px; }
.pet-actions .btn small { font-size: clamp(9px, 2.8vw, 11px); }
@media (max-width: 380px) {
  .btn { font-size: 13px; }
  .pet-actions { gap: 6px; }
  .pet-actions .btn { min-height: 50px; border-radius: 14px; }
  .q-btn, .price { font-size: 12px !important; }
}
@media (max-width: 340px) { .pet-actions .btn { font-size: 10.5px; } }

.btn-danger { background: linear-gradient(180deg, #FF5A6E, #E0243F); color: #fff; box-shadow: 0 6px 18px rgba(224,36,63,.35); }
.btn-danger-ghost { background: rgba(255,90,110,.08); color: #FF8A98; border: 1px solid rgba(255,90,110,.45); }
.band-manage { display: grid; gap: 8px; }
.cf-list { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cf-list li::marker { color: #FF8A98; }

/* ---------- reward visuals ---------- */
.rv { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: rgba(255,255,255,.06); }
.rv svg { width: 72%; height: 72%; }
.rv.big { width: 110px; height: 110px; border-radius: 28px; }
.rv-acc svg { width: 86%; height: auto; }
.rv-acc.big svg { width: 80%; }
.rv-title { width: auto; min-width: 40px; padding: 0 6px; }
.rv-title span { font-size: 9px; font-weight: 800; color: #FFD76A; line-height: 1.1; text-align: center; }
.rv-slime { position: relative; }
.rv-slime .slime { margin: 0 auto; }
.rv-slime.mystery b, .rv-slime.big.mystery b { position: absolute; inset: 0; display: grid; place-items: center; font-family: Unbounded, sans-serif; font-size: 18px; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.rv-slime.big { position: relative; display: inline-block; }
.rv-slime.big.mystery b { font-size: 48px; }
.rv-btn { flex: none; padding: 0; border: none; background: none; cursor: pointer; }
.pc-look { display: flex; align-items: center; gap: 8px; padding: 0; border: none; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.pc-look .rv { width: 34px; height: 34px; border-radius: 10px; }
.pc-look span:last-child { min-width: 0; overflow-wrap: anywhere; }
.rp { gap: 10px; }
.rp-stage { min-height: 150px; display: grid; place-items: center; padding: 12px 0 4px; }
.goal-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.goal-name .rv { width: 30px; height: 30px; border-radius: 9px; }
.card.product .rv-btn .rv { width: 44px; height: 44px; }

/* ---------- admin ---------- */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; margin-top: 8px; }
.kv-grid .kv { min-width: 0; gap: 6px; }
.kv-grid .kv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .kv-grid { grid-template-columns: 1fr; } }
.adm-h { font-size: 15px; margin: 18px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.chip { min-height: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font-weight: 800; font-size: 12px; font-family: Manrope, sans-serif; }
.chip:active { background: rgba(198,255,74,.15); }
.evo-txt { white-space: normal; font-size: 11.5px; line-height: 1.25; }
/* swipe-down handle: bigger touch zone */
.sheet .grab { position: relative; width: 44px; height: 5px; margin: 0 auto 16px; }
.sheet .grab::before { content: ""; position: absolute; inset: -16px -60px; }
.sheet { overscroll-behavior: contain; }
/* titles / long reward names never break inside a word */
.pc-look { flex-direction: column; align-items: flex-start; gap: 6px; }
.pc-look span:last-child { overflow-wrap: normal; word-break: normal; hyphens: manual; line-height: 1.25; }
.rv-title { width: 40px; padding: 0; }
.rv-title svg { width: 80%; height: 80%; }
.goal-name { overflow-wrap: normal; }
.btn { overflow-wrap: break-word; hyphens: manual; }
.pay-row { display: flex; align-items: center; gap: 10px; padding: 12px; }
.pay-row.done { opacity: .6; }

/* ---------- pet stages 1–9 ---------- */
.evo-4 { background: rgba(63,224,160,.18); color: #8FF7C8; }
.evo-5 { background: rgba(255,138,31,.2); color: #FFC07A; }
.evo-6 { background: rgba(255,95,168,.2); color: #FFA6D0; }
.evo-7 { background: rgba(120,140,255,.22); color: #B9C4FF; }
.evo-8 { background: linear-gradient(90deg, rgba(63,224,240,.25), rgba(176,92,255,.25)); color: #E6DCFF; }
.evo-9 { background: linear-gradient(90deg, #FF5FA8, #FFC83A, #C6FF4A, #3FE0F0); color: #1A0730; }
.evo-wrap { position: relative; display: inline-block; }
.evo-wrap > .slime { position: relative; z-index: 1; }
.evo-aura { position: absolute; left: 50%; top: 50%; width: 132%; height: 132%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 0; }
.evo-aura.a3 { background: radial-gradient(circle, rgba(255,200,58,.28), transparent 65%); }
.evo-aura.a4 { background: radial-gradient(circle, rgba(63,224,160,.32), transparent 66%); }
.evo-aura.a5 { background: radial-gradient(circle, rgba(255,138,31,.35), transparent 66%); box-shadow: inset 0 0 0 2px rgba(255,192,122,.25); }
.evo-aura.a6 { background: radial-gradient(circle, rgba(255,95,168,.35), transparent 66%); box-shadow: inset 0 0 0 3px rgba(255,166,208,.3); animation: aura-pulse 3s ease-in-out infinite; }
.evo-aura.a7, .evo-aura.a8, .evo-aura.a9 { animation: aura-pulse 3s ease-in-out infinite; }
.evo-aura.a7 { background: radial-gradient(circle, rgba(120,140,255,.38), transparent 66%); }
.evo-aura.a8 { background: radial-gradient(circle, rgba(176,92,255,.4), rgba(63,224,240,.15) 50%, transparent 68%); }
.evo-aura.a9 { width: 145%; height: 145%; background: conic-gradient(from 0deg, rgba(255,95,168,.35), rgba(255,200,58,.35), rgba(198,255,74,.35), rgba(63,224,240,.35), rgba(176,92,255,.35), rgba(255,95,168,.35));
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 60%, transparent 70%); mask: radial-gradient(circle, transparent 38%, #000 40%, #000 60%, transparent 70%); animation: aura-spin 12s linear infinite; }
.evo-aura i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #FFF6C2; box-shadow: 0 0 10px #FFF6C2; animation: orbit 6s linear infinite; }
.evo-aura i:nth-child(2) { animation-delay: -2s; } .evo-aura i:nth-child(3) { animation-delay: -4s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(var(--r, 70px)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r, 70px)) rotate(-360deg); } }
@keyframes aura-pulse { 50% { opacity: .7; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes aura-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.evo-aura.a9 i { display: none; }
.slime.stage-4 { filter: drop-shadow(0 0 12px rgba(63,224,160,.5)); }
.slime.stage-5 { filter: drop-shadow(0 0 14px rgba(255,138,31,.55)); }
.slime.stage-6 { filter: drop-shadow(0 0 16px rgba(255,95,168,.55)); }
.slime.stage-7 { filter: drop-shadow(0 0 16px rgba(120,140,255,.6)); }
.slime.stage-8 { filter: drop-shadow(0 0 18px rgba(176,92,255,.65)); }
.slime.stage-9 { filter: drop-shadow(0 0 20px rgba(255,200,58,.7)) saturate(1.15); }
@media (prefers-reduced-motion: reduce) { .evo-aura, .evo-aura i { animation: none !important; } }
.care-mark { position: absolute; right: 4px; top: 4px; display: inline-flex; align-items: center; gap: 1px; padding: 1px 4px 1px 2px; border-radius: 99px;
  background: rgba(0,0,0,.45); color: #FF8EC0; font-size: 9px; font-weight: 800; line-height: 1; }
.care-mark svg { width: 10px; height: 10px; }
.evo-rules { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); font-size: 13px; line-height: 1.45; color: var(--muted); }
.evo-rules b { color: var(--text); }
.evo-line .evo-badge { min-width: 88px; text-align: center; }
.evo-reward { padding: 10px 14px; border-radius: 14px; background: rgba(198,255,74,.12); border: 1px solid rgba(198,255,74,.4); font-size: 14px; }
.swap-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 6px; }
.swap-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 16px; background: rgba(255,255,255,.04); font-size: 12px; text-align: center; }
.swap-card b { font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swap-arrow { font-size: 22px; color: var(--muted); flex: none; }
.pet .evo-aura i, .evo-win .evo-aura i { --r: 92px; }
:root { --svg_witch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cpolygon points='24.0,24.0 25.1,26.5 27.8,26.8 25.7,28.6 26.4,31.2 24.0,29.8 21.6,31.2 22.3,28.6 20.2,26.8 22.9,26.5' fill='%23B6FF5C'/%3E%3Cpolygon points='78.8,27.1 79.0,29.2 81.0,29.8 79.1,30.7 79.1,32.8 77.7,31.3 75.7,31.9 76.7,30.1 75.5,28.4 77.5,28.7' fill='%23B6FF5C'/%3E%3Cpolygon points='70.3,66.5 71.0,68.8 73.4,69.2 71.4,70.6 71.8,73.0 69.9,71.6 67.7,72.6 68.5,70.4 66.8,68.6 69.2,68.6' fill='%23DFFFB0'/%3E%3Cpolygon points='30.0,69.5 30.7,71.1 32.4,71.2 31.1,72.3 31.5,74.0 30.0,73.1 28.5,74.0 28.9,72.3 27.6,71.2 29.3,71.1' fill='%23B6FF5C'/%3E%3Cpath d='M46 14 q4 4 0 8 q-4 4 0 8' stroke='%23B6FF5C' stroke-width='1.6' fill='none' opacity='.8'/%3E%3C/svg%3E"); --svg_sugar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Crect x='35.2' y='18.9' width='2.4' height='1.7' fill='%23fff' opacity='0.76' transform='rotate(46 50 43)'/%3E%3Crect x='57.0' y='73.5' width='1.9' height='1.7' fill='%23fff' opacity='0.72' transform='rotate(30 50 43)'/%3E%3Crect x='15.6' y='38.6' width='2.6' height='1.7' fill='%23fff' opacity='0.64' transform='rotate(80 50 43)'/%3E%3Crect x='57.0' y='12.5' width='2.3' height='1.7' fill='%23fff' opacity='0.64' transform='rotate(71 50 43)'/%3E%3Crect x='80.1' y='28.9' width='1.8' height='1.7' fill='%23fff' opacity='0.67' transform='rotate(87 50 43)'/%3E%3Crect x='23.2' y='49.9' width='2.4' height='2.0' fill='%23fff' opacity='0.77' transform='rotate(8 50 43)'/%3E%3Crect x='55.4' y='52.6' width='2.2' height='2.2' fill='%23fff' opacity='0.86' transform='rotate(59 50 43)'/%3E%3Crect x='57.2' y='40.6' width='2.0' height='2.6' fill='%23fff' opacity='0.83' transform='rotate(31 50 43)'/%3E%3Crect x='14.9' y='29.6' width='2.2' height='2.0' fill='%23fff' opacity='0.73' transform='rotate(77 50 43)'/%3E%3Crect x='90.3' y='16.5' width='2.1' height='2.5' fill='%23fff' opacity='0.61' transform='rotate(62 50 43)'/%3E%3Crect x='43.4' y='77.3' width='1.7' height='2.3' fill='%23fff' opacity='0.87' transform='rotate(40 50 43)'/%3E%3Crect x='36.6' y='33.2' width='2.2' height='2.6' fill='%23fff' opacity='0.58' transform='rotate(11 50 43)'/%3E%3Crect x='87.4' y='42.1' width='2.4' height='1.7' fill='%23fff' opacity='0.83' transform='rotate(82 50 43)'/%3E%3Crect x='56.5' y='57.0' width='2.1' height='2.5' fill='%23fff' opacity='0.90' transform='rotate(44 50 43)'/%3E%3Crect x='9.9' y='41.2' width='1.8' height='1.7' fill='%23fff' opacity='0.57' transform='rotate(36 50 43)'/%3E%3Crect x='18.9' y='25.8' width='2.1' height='2.6' fill='%23fff' opacity='0.58' transform='rotate(57 50 43)'/%3E%3Crect x='41.7' y='28.0' width='1.8' height='2.1' fill='%23fff' opacity='0.77' transform='rotate(90 50 43)'/%3E%3Crect x='42.9' y='33.8' width='2.7' height='2.7' fill='%23fff' opacity='0.61' transform='rotate(22 50 43)'/%3E%3Crect x='20.7' y='55.4' width='1.6' height='2.6' fill='%23fff' opacity='0.62' transform='rotate(36 50 43)'/%3E%3Crect x='8.3' y='38.2' width='2.0' height='2.3' fill='%23fff' opacity='0.93' transform='rotate(88 50 43)'/%3E%3Crect x='80.2' y='76.4' width='2.4' height='2.5' fill='%23fff' opacity='0.73' transform='rotate(87 50 43)'/%3E%3Crect x='75.0' y='36.3' width='2.1' height='1.7' fill='%23fff' opacity='0.80' transform='rotate(7 50 43)'/%3E%3Crect x='24.0' y='78.9' width='2.1' height='1.7' fill='%23fff' opacity='0.79' transform='rotate(13 50 43)'/%3E%3Crect x='8.0' y='18.9' width='1.7' height='2.0' fill='%23fff' opacity='0.56' transform='rotate(26 50 43)'/%3E%3Crect x='59.6' y='18.7' width='1.9' height='2.0' fill='%23fff' opacity='0.70' transform='rotate(15 50 43)'/%3E%3Crect x='17.7' y='43.1' width='2.8' height='2.2' fill='%23fff' opacity='0.67' transform='rotate(18 50 43)'/%3E%3Crect x='16.6' y='32.7' width='1.9' height='2.6' fill='%23fff' opacity='0.61' transform='rotate(2 50 43)'/%3E%3Crect x='25.2' y='76.5' width='2.0' height='2.4' fill='%23fff' opacity='0.92' transform='rotate(67 50 43)'/%3E%3Crect x='33.0' y='54.3' width='1.7' height='2.6' fill='%23fff' opacity='0.76' transform='rotate(21 50 43)'/%3E%3Crect x='37.9' y='24.0' width='2.2' height='2.2' fill='%23fff' opacity='0.80' transform='rotate(78 50 43)'/%3E%3Crect x='76.2' y='78.9' width='2.6' height='2.6' fill='%23fff' opacity='0.88' transform='rotate(29 50 43)'/%3E%3Crect x='24.8' y='43.5' width='2.5' height='2.8' fill='%23fff' opacity='0.87' transform='rotate(60 50 43)'/%3E%3Crect x='29.8' y='57.9' width='2.7' height='2.1' fill='%23fff' opacity='0.92' transform='rotate(44 50 43)'/%3E%3Crect x='88.2' y='34.3' width='1.9' height='1.9' fill='%23fff' opacity='0.63' transform='rotate(26 50 43)'/%3E%3Crect x='48.5' y='78.9' width='2.3' height='1.6' fill='%23fff' opacity='0.91' transform='rotate(44 50 43)'/%3E%3Crect x='75.2' y='14.1' width='2.4' height='2.7' fill='%23fff' opacity='0.86' transform='rotate(25 50 43)'/%3E%3Crect x='48.2' y='20.9' width='2.5' height='2.0' fill='%23fff' opacity='0.87' transform='rotate(50 50 43)'/%3E%3Crect x='46.9' y='61.5' width='1.7' height='1.8' fill='%23fff' opacity='0.95' transform='rotate(3 50 43)'/%3E%3Crect x='20.7' y='73.1' width='2.6' height='1.8' fill='%23fff' opacity='0.88' transform='rotate(60 50 43)'/%3E%3Crect x='63.2' y='33.2' width='2.3' height='1.8' fill='%23fff' opacity='0.56' transform='rotate(83 50 43)'/%3E%3C/svg%3E"); --svg_lava: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cpath d='M18 30 l10 8 l-4 10 l12 6 M60 18 l-6 12 l10 6 l-2 12 M70 60 l10 4 l4 10 M30 66 l8 -6 l10 4' stroke='%23FFE14A' stroke-width='2.2' fill='none' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); --svg_crystal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cpath d='M50 0 L20 30 L50 86 Z' fill='rgba(255,255,255,.22)'/%3E%3Cpath d='M50 0 L80 30 L50 86 Z' fill='rgba(0,60,120,.12)'/%3E%3Cpath d='M20 30 L80 30' stroke='rgba(255,255,255,.5)' stroke-width='1.2'/%3E%3Cpath d='M0 50 L20 30 M100 50 L80 30' stroke='rgba(255,255,255,.35)' stroke-width='1'/%3E%3C/svg%3E"); --svg_frost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cg stroke='%23fff' stroke-width='1.4' stroke-linecap='round' opacity='.85'%3E%3Cpath d='M24 26 v12 M18 32 h12 M20 28 l8 8 M28 28 l-8 8'/%3E%3Cpath d='M74 58 v10 M69 63 h10 M70 59 l8 8 M78 59 l-8 8'/%3E%3Cpath d='M66 22 v6 M63 25 h6'/%3E%3C/g%3E%3C/svg%3E"); }
.p-stars::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cpolygon points='23.2,23.1 24.3,27.8 28.9,29.0 24.8,31.5 25.1,36.3 21.5,33.1 17.0,34.9 18.9,30.4 15.8,26.7 20.6,27.2' fill='%23FFF6C2'/%3E%3Cpolygon points='75.3,21.0 77.1,24.0 80.5,23.8 78.2,26.4 79.5,29.6 76.3,28.2 73.7,30.4 74.0,27.0 71.1,25.1 74.4,24.4' fill='%23FFFFFF'/%3E%3Cpolygon points='64.2,65.9 64.4,70.4 68.5,72.2 64.3,73.8 63.8,78.2 61.0,74.7 56.6,75.6 59.1,71.9 56.9,68.0 61.2,69.2' fill='%23FFF6C2'/%3E%3Cpolygon points='28.0,66.0 29.1,68.5 31.8,68.8 29.7,70.6 30.4,73.2 28.0,71.8 25.6,73.2 26.3,70.6 24.2,68.8 26.9,68.5' fill='%23FFFFFF'/%3E%3Cpolygon points='86.0,54.5 86.9,56.7 89.3,56.9 87.5,58.5 88.1,60.8 86.0,59.6 83.9,60.8 84.5,58.5 82.7,56.9 85.1,56.7' fill='%23FFE08A'/%3E%3Cpolygon points='48.0,13.0 48.8,14.9 50.9,15.1 49.3,16.4 49.8,18.4 48.0,17.4 46.2,18.4 46.7,16.4 45.1,15.1 47.2,14.9' fill='%23FFFFFF'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; }
.p-leopard::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cg transform='rotate(10 24 28)'%3E%3Cellipse cx='24' cy='28' rx='5.58' ry='4.5' fill='%23C47A1E' opacity='.75'/%3E%3Cpath d='M15 28 q1.8 -8.1 8.1 -7.6499999999999995' stroke='%232A1404' stroke-width='3.42' fill='none' stroke-linecap='round'/%3E%3Cpath d='M26.25 19.450000000000003 q7.6499999999999995 1.8 6.75 8.1' stroke='%232A1404' stroke-width='3.06' fill='none' stroke-linecap='round'/%3E%3Cpath d='M32.1 30.7 q-4.5 7.2 -10.799999999999999 4.05' stroke='%232A1404' stroke-width='3.2399999999999998' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='16.8' cy='32.95' r='1.8' fill='%232A1404'/%3E%3C/g%3E%3Cg transform='rotate(-20 66 22)'%3E%3Cellipse cx='66' cy='22' rx='4.96' ry='4.0' fill='%23C47A1E' opacity='.75'/%3E%3Cpath d='M58 22 q1.6 -7.2 7.2 -6.8' stroke='%232A1404' stroke-width='3.04' fill='none' stroke-linecap='round'/%3E%3Cpath d='M68.0 14.4 q6.8 1.6 6.0 7.2' stroke='%232A1404' stroke-width='2.72' fill='none' stroke-linecap='round'/%3E%3Cpath d='M73.2 24.4 q-4.0 6.4 -9.6 3.6' stroke='%232A1404' stroke-width='2.88' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='59.6' cy='26.4' r='1.6' fill='%232A1404'/%3E%3C/g%3E%3Cg transform='rotate(30 46 58)'%3E%3Cellipse cx='46' cy='58' rx='6.2' ry='5.0' fill='%23C47A1E' opacity='.75'/%3E%3Cpath d='M36 58 q2.0 -9.0 9.0 -8.5' stroke='%232A1404' stroke-width='3.8' fill='none' stroke-linecap='round'/%3E%3Cpath d='M48.5 48.5 q8.5 2.0 7.5 9.0' stroke='%232A1404' stroke-width='3.4000000000000004' fill='none' stroke-linecap='round'/%3E%3Cpath d='M55.0 61.0 q-5.0 8.0 -12.0 4.5' stroke='%232A1404' stroke-width='3.5999999999999996' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='38.0' cy='63.5' r='2.0' fill='%232A1404'/%3E%3C/g%3E%3Cg transform='rotate(0 82 62)'%3E%3Cellipse cx='82' cy='62' rx='4.34' ry='3.5' fill='%23C47A1E' opacity='.75'/%3E%3Cpath d='M75 62 q1.4000000000000001 -6.3 6.3 -5.95' stroke='%232A1404' stroke-width='2.66' fill='none' stroke-linecap='round'/%3E%3Cpath d='M83.75 55.35 q5.95 1.4000000000000001 5.25 6.3' stroke='%232A1404' stroke-width='2.3800000000000003' fill='none' stroke-linecap='round'/%3E%3Cpath d='M88.3 64.1 q-3.5 5.6000000000000005 -8.4 3.15' stroke='%232A1404' stroke-width='2.52' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='76.4' cy='65.85' r='1.4000000000000001' fill='%232A1404'/%3E%3C/g%3E%3Cg transform='rotate(45 18 68)'%3E%3Cellipse cx='18' cy='68' rx='3.7199999999999998' ry='3.0' fill='%23C47A1E' opacity='.75'/%3E%3Cpath d='M12 68 q1.2000000000000002 -5.4 5.4 -5.1' stroke='%232A1404' stroke-width='2.2800000000000002' fill='none' stroke-linecap='round'/%3E%3Cpath d='M19.5 62.3 q5.1 1.2000000000000002 4.5 5.4' stroke='%232A1404' stroke-width='2.04' fill='none' stroke-linecap='round'/%3E%3Cpath d='M23.4 69.8 q-3.0 4.800000000000001 -7.199999999999999 2.7' stroke='%232A1404' stroke-width='2.16' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='13.2' cy='71.3' r='1.2000000000000002' fill='%232A1404'/%3E%3C/g%3E%3Ccircle cx='88' cy='36' r='2.2' fill='%232A1404'/%3E%3Ccircle cx='36' cy='42' r='1.8' fill='%232A1404'/%3E%3Ccircle cx='64' cy='80' r='2' fill='%232A1404'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; }
.p-graffiti::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cpath d='M10 40 q8 -16 18 -2 t18 -4 t16 6' stroke='%23FF3DCB' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22 40 v14 M38 38 v10 M54 40 v16' stroke='%23FF3DCB' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='56' r='2.2' fill='%23FF3DCB'/%3E%3Ccircle cx='54' cy='58' r='2.4' fill='%23FF3DCB'/%3E%3Cpath d='M60 18 l5 -8 l4 7 l5 -9 l4 10 z' fill='none' stroke='%23FFE14A' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M14 70 q10 -8 20 0 q10 8 20 -2' stroke='%2300F0FF' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='80' cy='70' r='6' fill='%237CFF00' opacity='.85'/%3E%3Ccircle cx='88' cy='62' r='2' fill='%237CFF00'/%3E%3Ccircle cx='72' cy='78' r='1.6' fill='%237CFF00'/%3E%3Ccircle cx='86' cy='78' r='1.4' fill='%237CFF00'/%3E%3Ctext x='66' y='48' font-family='Arial Black,Arial' font-weight='900' font-size='13' fill='%23FFE14A' stroke='%231A0730' stroke-width='1.2' transform='rotate(-12 72 44)'%3EWOW%3C/text%3E%3C/svg%3E") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; }
.p-skulls::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cg transform='translate(24 30) rotate(-12) scale(0.9)'%3E%3Cpath d='M-10 2 a10 10 0 1 1 20 0 v4 a2 2 0 0 1 -2 2 h-2 v3 h-3 v-2 h-2 v2 h-3 v-3 h-2 a2 2 0 0 1 -2 -2z' fill='%23F4EEFF' stroke='%231A0730' stroke-width='1'/%3E%3Cellipse cx='-4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cellipse cx='4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cpath d='M0 4 l-1.6 2.6 h3.2z' fill='%231A0730'/%3E%3C/g%3E%3Cg transform='translate(72 26) rotate(14) scale(0.7)'%3E%3Cpath d='M-10 2 a10 10 0 1 1 20 0 v4 a2 2 0 0 1 -2 2 h-2 v3 h-3 v-2 h-2 v2 h-3 v-3 h-2 a2 2 0 0 1 -2 -2z' fill='%23F4EEFF' stroke='%231A0730' stroke-width='1'/%3E%3Cellipse cx='-4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cellipse cx='4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cpath d='M0 4 l-1.6 2.6 h3.2z' fill='%231A0730'/%3E%3C/g%3E%3Cg transform='translate(56 66) rotate(6) scale(1.0)'%3E%3Cpath d='M-10 2 a10 10 0 1 1 20 0 v4 a2 2 0 0 1 -2 2 h-2 v3 h-3 v-2 h-2 v2 h-3 v-3 h-2 a2 2 0 0 1 -2 -2z' fill='%23F4EEFF' stroke='%231A0730' stroke-width='1'/%3E%3Cellipse cx='-4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cellipse cx='4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cpath d='M0 4 l-1.6 2.6 h3.2z' fill='%231A0730'/%3E%3C/g%3E%3Cg transform='translate(20 70) rotate(-20) scale(0.6)'%3E%3Cpath d='M-10 2 a10 10 0 1 1 20 0 v4 a2 2 0 0 1 -2 2 h-2 v3 h-3 v-2 h-2 v2 h-3 v-3 h-2 a2 2 0 0 1 -2 -2z' fill='%23F4EEFF' stroke='%231A0730' stroke-width='1'/%3E%3Cellipse cx='-4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cellipse cx='4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cpath d='M0 4 l-1.6 2.6 h3.2z' fill='%231A0730'/%3E%3C/g%3E%3Cg transform='translate(86 58) rotate(10) scale(0.5)'%3E%3Cpath d='M-10 2 a10 10 0 1 1 20 0 v4 a2 2 0 0 1 -2 2 h-2 v3 h-3 v-2 h-2 v2 h-3 v-3 h-2 a2 2 0 0 1 -2 -2z' fill='%23F4EEFF' stroke='%231A0730' stroke-width='1'/%3E%3Cellipse cx='-4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cellipse cx='4' cy='0' rx='3' ry='3.4' fill='%231A0730'/%3E%3Cpath d='M0 4 l-1.6 2.6 h3.2z' fill='%231A0730'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; }
.p-bats::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cg transform='translate(28 30) rotate(-10) scale(1.1)'%3E%3Cpath d='M0 2 Q-4 -6 -16 -4 Q-12 0 -13 4 Q-8 3 -7 7 Q-3 4 0 7 Q3 4 7 7 Q8 3 13 4 Q12 0 16 -4 Q4 -6 0 2Z' fill='%23120820'/%3E%3Ccircle cx='-1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3Ccircle cx='1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3C/g%3E%3Cg transform='translate(72 64) rotate(12) scale(1.2)'%3E%3Cpath d='M0 2 Q-4 -6 -16 -4 Q-12 0 -13 4 Q-8 3 -7 7 Q-3 4 0 7 Q3 4 7 7 Q8 3 13 4 Q12 0 16 -4 Q4 -6 0 2Z' fill='%23120820'/%3E%3Ccircle cx='-1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3Ccircle cx='1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3C/g%3E%3Cg transform='translate(78 24) rotate(20) scale(0.7)'%3E%3Cpath d='M0 2 Q-4 -6 -16 -4 Q-12 0 -13 4 Q-8 3 -7 7 Q-3 4 0 7 Q3 4 7 7 Q8 3 13 4 Q12 0 16 -4 Q4 -6 0 2Z' fill='%23120820'/%3E%3Ccircle cx='-1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3Ccircle cx='1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3C/g%3E%3Cg transform='translate(24 72) rotate(-15) scale(0.6)'%3E%3Cpath d='M0 2 Q-4 -6 -16 -4 Q-12 0 -13 4 Q-8 3 -7 7 Q-3 4 0 7 Q3 4 7 7 Q8 3 13 4 Q12 0 16 -4 Q4 -6 0 2Z' fill='%23120820'/%3E%3Ccircle cx='-1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3Ccircle cx='1.6' cy='-1' r='.8' fill='%23FF3D3D'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; }
.p-drops::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 86' preserveAspectRatio='none'%3E%3Cpath transform='translate(26 36) scale(1)' d='M0 -8 C4 -2 6 1 6 4 a6 6 0 0 1 -12 0 c0 -3 2 -6 6 -12z' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='24.4' cy='38' r='1.4' fill='%23fff' opacity='.8'/%3E%3Cpath transform='translate(64 28) scale(0.8)' d='M0 -8 C4 -2 6 1 6 4 a6 6 0 0 1 -12 0 c0 -3 2 -6 6 -12z' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='62.72' cy='29.6' r='1.1199999999999999' fill='%23fff' opacity='.8'/%3E%3Cpath transform='translate(50 68) scale(1.1)' d='M0 -8 C4 -2 6 1 6 4 a6 6 0 0 1 -12 0 c0 -3 2 -6 6 -12z' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='48.24' cy='70.2' r='1.54' fill='%23fff' opacity='.8'/%3E%3Cpath transform='translate(80 56) scale(0.7)' d='M0 -8 C4 -2 6 1 6 4 a6 6 0 0 1 -12 0 c0 -3 2 -6 6 -12z' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='78.88' cy='57.4' r='0.9799999999999999' fill='%23fff' opacity='.8'/%3E%3Cpath transform='translate(20 66) scale(0.7)' d='M0 -8 C4 -2 6 1 6 4 a6 6 0 0 1 -12 0 c0 -3 2 -6 6 -12z' fill='rgba(255,255,255,.55)'/%3E%3Ccircle cx='18.88' cy='67.4' r='0.9799999999999999' fill='%23fff' opacity='.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important; opacity: 1 !important; mix-blend-mode: normal !important; }

/* ======================= LOOK 2.0: glows visible everywhere (grid, atlas, pet) ======================= */
/* animated extras live on their own elements (.fx / .mfx), so they keep working even where the body animation is off */
.slime .fx, .slime .mfx { position: absolute; pointer-events: none; display: block; }
.slime .mfx { inset: 0; border-radius: inherit; overflow: hidden; z-index: 1; }
.glow-pulse, .glow-flicker, .glow-fire, .glow-candle, .glow-fog { animation: wobble 3.2s ease-in-out infinite; }
.glow-pulse { filter: drop-shadow(0 0 calc(var(--size) * .14) var(--c)); }
.glow-pulse .fx { inset: -14%; border-radius: 50%; border: calc(var(--size) * .045) solid var(--c); box-shadow: 0 0 calc(var(--size) * .12) var(--c); animation: fx-ring 1.8s ease-out infinite; }
@keyframes fx-ring { from { transform: scale(.82); opacity: .95; } to { transform: scale(1.28); opacity: 0; } }
.glow-flicker { filter: drop-shadow(0 0 calc(var(--size) * .12) var(--c)); }
.glow-flicker .fx { inset: -18%; background:
  radial-gradient(circle at 12% 30%, #fff 0 2.2%, transparent 3%), radial-gradient(circle at 88% 22%, #fff 0 2.6%, transparent 3.4%),
  radial-gradient(circle at 92% 74%, #fff 0 2%, transparent 2.8%), radial-gradient(circle at 8% 78%, #fff 0 1.8%, transparent 2.6%),
  radial-gradient(circle at 50% 2%, #fff 0 2%, transparent 2.8%);
  filter: drop-shadow(0 0 3px var(--l)); animation: fx-twinkle 1.4s steps(2, jump-none) infinite; }
@keyframes fx-twinkle { 0% { opacity: 1; } 50% { opacity: .15; } 100% { opacity: 1; } }
.glow-fire { filter: drop-shadow(0 0 calc(var(--size) * .14) #FF7A1F) drop-shadow(0 calc(var(--size) * -.04) calc(var(--size) * .06) #FFD36E); }
.glow-fire .fx { left: 6%; right: 6%; top: -34%; height: 52%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 18% 46% at 22% 70%, #FFD36E 0 40%, #FF7A1F 70%, transparent 72%),
              radial-gradient(ellipse 22% 62% at 50% 62%, #FFF2B0 0 30%, #FFB13B 55%, #FF3D1F 80%, transparent 82%),
              radial-gradient(ellipse 16% 42% at 78% 72%, #FFD36E 0 40%, #FF7A1F 70%, transparent 72%);
  animation: fx-flame .45s ease-in-out infinite alternate; }
@keyframes fx-flame { from { transform: scaleY(.9) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
/* fog: real drifting mist clouds around the base */
.glow-fog { filter: drop-shadow(0 0 calc(var(--size) * .1) rgba(124,255,120,.55)); }
.glow-fog .fx { left: -30%; right: -30%; bottom: -16%; height: 58%; z-index: 3;
  background: radial-gradient(ellipse 26% 34% at 18% 64%, rgba(190,255,190,.55), transparent 70%),
              radial-gradient(ellipse 30% 30% at 50% 78%, rgba(160,255,170,.5), transparent 72%),
              radial-gradient(ellipse 24% 32% at 82% 62%, rgba(190,255,190,.5), transparent 70%),
              radial-gradient(ellipse 40% 22% at 50% 92%, rgba(120,230,140,.45), transparent 74%);
  animation: fx-drift 4s ease-in-out infinite alternate; }
@keyframes fx-drift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
/* candle: warm light + a little floating flame (will-o'-wisp) */
.glow-candle { filter: drop-shadow(0 0 calc(var(--size) * .16) #FFB13B); }
.glow-candle .fx { right: -14%; top: -26%; width: 26%; height: 36%; border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: radial-gradient(ellipse at 50% 70%, #FFFFFF 0 16%, #FFE58A 34%, #FFB13B 60%, rgba(255,120,30,0) 72%);
  filter: drop-shadow(0 0 calc(var(--size) * .1) #FFB13B); animation: fx-wisp 2.6s ease-in-out infinite; }
@keyframes fx-wisp { 0%,100% { transform: translateY(0) scale(1); } 30% { transform: translateY(-8%) scale(1.08, .94); } 60% { transform: translateY(-14%) scale(.94, 1.06); } }
.atlas-item .slime .fx, .cell .slime .fx { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .slime .fx, .slime .mfx { animation: none !important; } }

/* ======================= MUTATIONS 2.0 ======================= */
/* gold: real polished metal with a moving shine */
.m-gold { --c:#E8B923; --l:#FFF4C2; --d:#6E4700;
  background: linear-gradient(160deg, #FFF8D6 0%, #F2C94C 16%, #9C6B00 33%, #FFE58A 47%, #D9A520 60%, #7A5200 80%, #E8B923 100%) !important;
  box-shadow: inset calc(var(--size) * -.06) calc(var(--size) * -.08) calc(var(--size) * .12) rgba(70,40,0,.55), inset calc(var(--size) * .04) calc(var(--size) * .05) calc(var(--size) * .08) rgba(255,255,230,.8);
  filter: drop-shadow(0 0 calc(var(--size) * .12) rgba(255,200,58,.7)); }
.m-gold .mfx { background: linear-gradient(105deg, transparent 36%, rgba(255,255,255,.85) 48%, transparent 58%) 0 0 / 260% 100%; animation: fx-shine 3.2s ease-in-out infinite; }
@keyframes fx-shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.m-gold .face::before, .m-gold .face::after, .m-gold .mouth { background: #3D2600 !important; }
/* marmalade: translucent sugared jelly candy */
.m-marmalade { opacity: .95;
  background: radial-gradient(circle at 32% 24%, rgba(255,255,255,.95) 0 5%, rgba(255,255,255,.4) 12%, transparent 24%),
              radial-gradient(ellipse 60% 40% at 50% 92%, rgba(255,255,255,.25), transparent 70%),
              radial-gradient(circle at 50% 58%, var(--l) 0%, var(--c) 52%, var(--d) 100%) !important;
  box-shadow: inset 0 0 calc(var(--size) * .1) rgba(255,255,255,.55), inset 0 calc(var(--size) * -.1) calc(var(--size) * .16) var(--d);
  filter: saturate(1.35) drop-shadow(0 0 calc(var(--size) * .08) var(--c)); }
.m-marmalade .mfx { background: var(--svg_sugar) center / 100% 100% no-repeat; }
/* witch: deep violet skin, glowing green eyes, magic sparkles */
.m-witchy { --c:#5B2A8E; --l:#B78CFF; --d:#1A0730;
  background: radial-gradient(circle at 34% 28%, #E2CCFF 0 6%, #9A62E0 22%, #5B2A8E 55%, #1A0730 100%) !important;
  filter: drop-shadow(0 0 calc(var(--size) * .16) #7CFF00); }
.m-witchy .face::before, .m-witchy .face::after { background: #9DFF3A !important; box-shadow: 0 0 calc(var(--size) * .08) #7CFF00; }
.m-witchy .mouth { background: #1A0730; border-radius: 0 0 60px 0; transform: translateX(-30%) rotate(-8deg); }
.m-witchy .mfx { background: var(--svg_witch) center / 100% 100% no-repeat; animation: fx-twinkle 2s ease-in-out infinite; }
/* lava: glowing cracks */
.m-lava .mfx { background: var(--svg_lava) center / 100% 100% no-repeat; filter: drop-shadow(0 0 2px #FFB13B); animation: fx-glowp 1.6s ease-in-out infinite alternate; }
@keyframes fx-glowp { from { opacity: .55; } to { opacity: 1; } }
.m-crystal .mfx { background: var(--svg_crystal) center / 100% 100% no-repeat; }
.m-ice .mfx { background: var(--svg_frost) center / 100% 100% no-repeat; }
.m-skeleton .mouth::before { content: ""; position: absolute; left: 50%; top: -150%; width: 34%; height: 110%; transform: translateX(-50%); background: #120820; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.m-founder { background: radial-gradient(circle at 34% 28%, #fff 0 7%, #E9FFB8 18%, #C6FF4A 50%, #2E5200 100%) !important; }
/* 8-bit: pixel silhouette drawn by the background, so hats and glasses are never cut off */
.m-bit8 { clip-path: none !important; border-radius: 0 !important; box-shadow: none !important;
  background:
    linear-gradient(var(--l), var(--l)) 22% 14% / 12% 12% no-repeat,
    linear-gradient(var(--d), var(--d)) 50% 100% / 84% 15% no-repeat,
    linear-gradient(var(--c), var(--c)) 50% 0 / 60% 9% no-repeat,
    linear-gradient(var(--c), var(--c)) 50% 9.3% / 84% 15% no-repeat,
    linear-gradient(var(--c), var(--c)) 50% 61% / 100% 64% no-repeat !important; }
.m-bit8::after { border-radius: 0 !important; clip-path: polygon(20% 0, 80% 0, 80% 8%, 92% 8%, 92% 22%, 100% 22%, 100% 86%, 92% 86%, 92% 100%, 8% 100%, 8% 86%, 0 86%, 0 22%, 8% 22%, 8% 8%, 20% 8%); }
/* accessories always on top of every body and effect */
.slime .acc { z-index: 4; }
.slime .face, .slime .mouth { z-index: 2; }
/* small icons inside reward boxes (goals, pass): slime fits the box */
.goal-name .rv-slime .slime, .pc-look .rv-slime .slime { --size: 24px !important; }
.goal-name .rv-slime.mystery b, .pc-look .rv-slime.mystery b { font-size: 13px; }
.rv-slime { overflow: visible; }
/* new accessory placements */
.slime .acc-head.acc-tall { left: 14%; width: 72%; top: -62%; height: 76%; }
.slime .acc-head.acc-phones { left: -14%; width: 128%; top: -20%; height: 86%; }
.slime .acc-face.acc-nose { left: 39%; width: 22%; top: 52%; height: 24%; }
.m-bit8 .acc-head { top: -40%; }
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.pager .pg, .pager .pg-arrow { min-width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); font-weight: 800; font-family: Manrope, sans-serif; position: relative; }
.pager .pg.on { background: var(--lime); color: #1A1033; border-color: var(--lime); }
.pager .pg.has::after { content: ""; position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.pager .pg-arrow:disabled { opacity: .3; }
.story-btn { background: linear-gradient(90deg, rgba(255,95,168,.18), rgba(176,92,255,.18)); border: 1px solid rgba(255,95,168,.5); color: #FFD6EA; }
.contact .icon-box { background: rgba(198,255,74,.12); color: var(--lime); }

/* ===== Friends 2.0 ===== */
.btn-sm { min-height: 40px; padding: 0 14px; border-radius: 12px; font-size: 13px; flex: none; }
.btn-xs { min-height: 30px; padding: 0 10px; border-radius: 10px; font-size: 11px; flex: none; box-shadow: none; }
.ref-hero { display: flex; flex-direction: column; gap: 12px; padding: 16px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 0% 0%, rgba(255,95,168,.18), transparent 60%), radial-gradient(120% 90% at 100% 0%, rgba(198,255,74,.14), transparent 60%), var(--card); }
.ref-duo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; }
.ref-side { border-radius: 16px; padding: 12px 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,95,168,.3); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ref-side.you { border-color: rgba(198,255,74,.35); }
.ref-cap { font-size: 10px; font-weight: 800; letter-spacing: 1px; color: var(--pink-soft); }
.ref-side.you .ref-cap { color: var(--lime); }
.ref-gifts { display: flex; gap: 6px; align-items: center; min-height: 50px; }
.ref-gifts .slime { animation: refBob 2.6s ease-in-out infinite; }
.ref-gifts .slime + .slime, .ref-gifts .rv { animation-delay: -1.3s; }
@keyframes refBob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
.ref-side ul { margin: 0; padding-left: 14px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.ref-side ul b { color: var(--lime); }
.ref-plus { align-self: center; font-family: Unbounded, sans-serif; font-size: 20px; color: var(--dim); }
.ref-rule { font-size: 12px; line-height: 1.5; color: var(--muted); background: rgba(0,0,0,.2); border-radius: 12px; padding: 10px 12px; }
.ref-rule b { color: var(--text); }
.ref-income { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; }
.ref-income .grow { display: flex; flex-direction: column; min-width: 0; }
.ref-ms { margin-top: 10px; padding: 14px; }
.ref-ms { display: flow-root; }
.ms-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 2px; margin-top: 12px; }
.ms { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ms .rv-btn { display: block; }
.ms .rv { width: 36px; height: 36px; display: grid; }
.ms.lock .rv-btn { opacity: .55; filter: saturate(.6); }
.ms.ready .rv { box-shadow: 0 0 0 2px var(--lime), 0 0 16px rgba(198,255,74,.5); animation: msGlow 1.4s ease-in-out infinite; }
@keyframes msGlow { 50% { transform: translateY(-2px) scale(1.05); } }
.ms.done .rv { box-shadow: 0 0 0 1px rgba(198,255,74,.4); }
.ms-need { display: block; margin-top: 4px; font-family: Unbounded, sans-serif; font-size: 11px; font-weight: 700; line-height: 1.2; }
.ms-st { display: block; margin-top: 3px; font-size: 9px; line-height: 1.2; color: var(--lime); text-align: center; white-space: nowrap; height: 24px; }
.ms-st svg { width: 15px; height: 15px; display: inline-block; vertical-align: middle; }
.ms .btn-xs { display: block; margin-top: 3px; padding: 0 2px; font-size: 9px; min-height: 24px; height: 24px; width: 100%; max-width: 50px; border-radius: 8px; }
.ref-bonus { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.ref-bonus .card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; }
.ref-bonus .card > div { display: flex; flex-direction: column; gap: 2px; }
.fr-row.on { border-color: rgba(198,255,74,.3); }
.fr-ava { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: Unbounded, sans-serif; font-weight: 700;
  background: linear-gradient(135deg, #FF5FA8, #9B6BFF); color: #fff; }
.fr-tag { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.06); flex: none; }
.fr-tag.ok { color: var(--lime-ink); background: var(--lime); }
.fr-steps { display: flex; flex-direction: column; gap: 3px; flex: none; }
.fr-steps span { font-size: 11px; font-weight: 800; color: var(--dim); display: flex; align-items: center; gap: 3px; justify-content: flex-end; }
.fr-steps span.ok { color: var(--lime); }
.fr-steps svg { width: 11px; height: 11px; }
.chat-card { width: 100%; text-align: left; margin-top: 14px; border-color: rgba(63,224,240,.35); }
.chat-ic { color: #3FE0F0; }
.chat-ic svg { width: 60%; height: 60%; }
@media (max-width: 360px) { .ms .rv { width: 32px; height: 32px; } }
.ref-income .t, .ref-bonus .t { font-weight: 800; font-size: 14px; }
.ref-income .s, .ref-bonus .s { font-size: 12px; color: var(--muted); line-height: 1.4; }
.week-box > .row > .dim { white-space: nowrap; flex: none; }
.week-box > .row > .t { min-width: 0; }

.fr-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.fr-tabs::-webkit-scrollbar { display: none; }
.fr-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 6px 2px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--muted); font: 800 11px Manrope, sans-serif; cursor: pointer; min-width: 0; }
.fr-tab b { font: 700 14px Unbounded, sans-serif; color: var(--text); }
.fr-tab.on { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.fr-tab.on b { color: var(--lime-ink); }
.fr-search { position: relative; margin-bottom: 10px; }
.fr-search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--dim); pointer-events: none; }
.fr-search input { width: 100%; box-sizing: border-box; min-height: 44px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--text); padding: 0 14px 0 42px; font: 700 14px Manrope, sans-serif; outline: none; }
.fr-search input:focus { border-color: rgba(198,255,74,.6); }
.fr-hint { font-size: 12px; color: var(--muted); margin: 0 2px 10px; line-height: 1.45; }
#fr-box { transition: opacity .15s; }
#fr-box.loading { opacity: .5; pointer-events: none; }
.fr-pager { margin-top: 12px; }
.fr-pager .pg-info { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.fr-pager .pg-info small { font: 700 11px Manrope, sans-serif; color: var(--dim); }
.fr-pager .pg-info { min-width: 110px; font: 800 14px Unbounded, sans-serif; }
.fr-row .t, .fr-row .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== Bugs & ideas ===== */
.fb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.fb-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 18px; border: 1px solid rgba(255,107,90,.4);
  background: radial-gradient(120% 100% at 50% 0%, rgba(255,107,90,.2), transparent 70%), rgba(255,255,255,.03); color: var(--text); cursor: pointer; min-width: 0; text-align: center; }
.fb-btn.idea { border-color: rgba(255,226,122,.45); background: radial-gradient(120% 100% at 50% 0%, rgba(255,226,122,.2), transparent 70%), rgba(255,255,255,.03); }
.fb-btn:active { transform: scale(.97); }
.fb-btn .t { font-weight: 800; font-size: 13px; line-height: 1.2; }
.fb-btn .s { font-size: 11px; color: var(--muted); }
.fb-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; }
.fb-ic svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.fb-btn .fb-ic { animation: fbWiggle 3s ease-in-out infinite; }
.fb-btn.idea .fb-ic { animation-delay: -1.5s; }
@keyframes fbWiggle { 0%,80%,100% { transform: rotate(0) } 85% { transform: rotate(-10deg) } 90% { transform: rotate(9deg) } 95% { transform: rotate(-4deg) } }
.fb-ic.big { width: 64px; height: 64px; }
.fb-ic.huge { width: 110px; height: 110px; margin: 6px auto 0; animation: fbPop .6s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes fbPop { from { transform: scale(.3) rotate(-20deg); opacity: 0 } }
.fb-ic.sm { width: 32px; height: 32px; }
.fb-hero { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.fb-hero h2 { margin: 0 0 4px; }
.fb-hero p { margin: 0; font-size: 13px; line-height: 1.45; }
.fb-rew { border-radius: 16px; padding: 12px 14px; background: rgba(198,255,74,.06); border: 1px solid rgba(198,255,74,.25); margin-bottom: 14px; }
.fb-rew-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.fb-rew-head b { font-family: Unbounded, sans-serif; color: var(--lime); font-size: 14px; }
.fb-rew-row { display: flex; gap: 10px; font-size: 12px; color: var(--text); padding: 5px 0; border-top: 1px dashed rgba(255,255,255,.08); line-height: 1.35; }
.fb-rew-row span { flex: none; width: 76px; color: var(--muted); font-weight: 800; }
.fb-rew-row.top { color: var(--lime); }
.fb-rew p { font-size: 11px; margin: 6px 0 0; line-height: 1.4; }
.fb-lbl { font-size: 12px; display: block; margin-bottom: 6px; }
.fb-text { width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05);
  color: var(--text); padding: 12px 14px; font: 600 14px/1.45 Manrope, sans-serif; outline: none; }
.fb-text:focus { border-color: rgba(198,255,74,.6); }
.fb-meta { display: flex; justify-content: space-between; font-size: 11px; margin: 6px 2px 8px; }
.fb-tips { margin: 0 0 14px; padding-left: 18px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.fb-ladder { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fb-step { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.03); }
.fb-step b { font-family: Unbounded, sans-serif; font-size: 11px; color: var(--text); flex: none; }
.fb-step.ok { color: var(--text); background: rgba(198,255,74,.08); }
.fb-step.ok b { color: var(--lime); }
.fb-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); display: grid; place-items: center; flex: none; color: var(--lime-ink); }
.fb-step.ok .fb-dot { background: var(--lime); border-color: var(--lime); }
.fb-dot svg { width: 11px; height: 11px; }
.fb-sent { display: flex; flex-direction: column; gap: 12px; }
.fb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fb-stats > div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.fb-stats b { font-family: Unbounded, sans-serif; font-size: 18px; color: var(--lime); }
.fb-stats span { font-size: 11px; color: var(--muted); text-align: center; }
.fb-item { padding: 12px 14px; }
.fb-body { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.fb-got { margin-top: 8px; font-size: 12px; color: var(--lime); font-weight: 800; }
.fb-st { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 99px; flex: none; background: rgba(255,255,255,.07); color: var(--muted); }
.fb-st.ok { background: rgba(198,255,74,.18); color: var(--lime); }
.fb-st.done { background: var(--lime); color: var(--lime-ink); }
.fb-st.no { background: rgba(255,95,95,.12); color: #FF9A9A; }
/* admin */
.afb-views { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.afb-card { padding: 14px; }
.afb-card .afb-who { font-size: 12px; color: var(--muted); }
.afb-card .afb-text { margin: 10px 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.afb-sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.afb-size { padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); font: 800 12px Manrope, sans-serif; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.afb-size small { font-weight: 700; font-size: 10px; color: var(--muted); line-height: 1.3; }
.afb-size.on { border-color: var(--lime); background: rgba(198,255,74,.12); }
.chip.on { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.fb-text::placeholder { color: var(--dim); font-weight: 500; }

/* ======================= PET LIFE: sleep, dirt, phrases ======================= */
.slime.sleep .face::before, .slime.sleep .face::after { background: transparent !important; box-shadow: none; height: 20%; top: 26%;
  border: calc(var(--size) * .035) solid #1A0730; border-top: none; border-radius: 0 0 50% 50%; }
.slime.sleep .mouth { width: 9%; height: 7%; border-radius: 50%; top: 68%; }
.slime.sleep { animation: breathe 3.6s ease-in-out infinite !important; }
@keyframes breathe { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.04,.95) translateY(2%); } }
.slime.grumpy .face::before, .slime.grumpy .face::after { transform: scaleY(.55); }
.slime.grumpy .face::before { box-shadow: 0 calc(var(--size) * -.05) 0 calc(var(--size) * -.02) #1A0730; }
.pet-stage.is-night { background: radial-gradient(70% 80% at 50% 40%, rgba(70,60,160,.35), transparent 70%); border-radius: 24px; }
.pet-night { position: absolute; inset: 0; pointer-events: none; }
.pet-night .moon { position: absolute; right: 14%; top: 10%; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset -9px -3px 0 0 #FFF3B0; filter: drop-shadow(0 0 10px rgba(255,243,176,.6)); }
.pet-night .st { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: twinkle 2.4s ease-in-out infinite; }
.pet-night .s1 { left: 16%; top: 18%; } .pet-night .s2 { left: 30%; top: 6%; animation-delay: -.8s; } .pet-night .s3 { right: 30%; top: 26%; animation-delay: -1.6s; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.6); } }
.pet-zzz { position: absolute; right: -6%; top: -4%; pointer-events: none; font: 800 16px Unbounded, sans-serif; color: #CFC6FF; z-index: 4; }
.pet-zzz b { position: absolute; opacity: 0; animation: zzz 3s ease-in infinite; text-shadow: 0 0 8px rgba(155,107,255,.7); }
.pet-zzz b:nth-child(2) { animation-delay: 1s; font-size: 20px; } .pet-zzz b:nth-child(3) { animation-delay: 2s; font-size: 26px; }
.pet-zzz.big { right: 18%; top: 4%; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 10px) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -40px) scale(1.1) rotate(12deg); } }
.pet-mud { position: absolute; left: 50%; top: 50%; width: calc(var(--ps, 140px) * .9); height: calc(var(--ps, 140px) * .8); transform: translate(-50%, -46%); pointer-events: none; z-index: 2; transition: opacity .2s; }
.evo-wrap .pet-mud { width: 82%; height: 74%; }
.pet-mud i { position: absolute; width: var(--r); aspect-ratio: 1.3; border-radius: 48% 52% 44% 56%; transform: translate(-50%, -50%) rotate(calc(var(--d) * 100deg));
  background: radial-gradient(circle at 40% 35%, rgba(150,105,60,.95), rgba(96,62,30,.9) 60%, rgba(70,44,20,.85)); box-shadow: 0 1px 0 rgba(255,255,255,.15) inset; }
.pet-mud.l1 i { opacity: .75; }
.pet-flies { position: absolute; left: 50%; top: 30%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.pet-flies i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #222; animation: fly 1.6s linear infinite; }
.pet-flies i::after { content: ""; position: absolute; left: -3px; top: -4px; width: 12px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); }
.pet-flies i:nth-child(2) { animation-duration: 2.1s; animation-direction: reverse; }
@keyframes fly { 0% { transform: rotate(0) translateX(70px) rotate(0); } 100% { transform: rotate(360deg) translateX(70px) rotate(-360deg); } }
.pet-say { position: absolute; left: 50%; top: 2px; transform: translate(-50%, 6px) scale(.8); max-width: 84%; z-index: 6; pointer-events: none;
  background: #fff; color: #1A1033; font: 800 13px/1.3 Manrope, sans-serif; padding: 8px 12px; border-radius: 16px; opacity: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); transition: opacity .25s, transform .3s cubic-bezier(.3,1.6,.5,1); white-space: normal; text-align: center; }
.pet-say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.pet-say.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sunburst { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, rgba(255,230,120,.9), rgba(255,180,60,.4) 40%, transparent 70%); animation: sunb 1.6s ease-out forwards; }
@keyframes sunb { to { transform: translate(-50%, -50%) scale(40); opacity: 0; } }
.morning-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border-radius: 18px; margin: 10px 0 2px;
  border: 1px solid rgba(255,210,90,.55); background: linear-gradient(120deg, rgba(255,200,80,.22), rgba(255,140,60,.12)); color: var(--text); cursor: pointer; }
.morning-card .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.morning-card b { font-size: 14px; } .morning-card small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.morning-card .sun { width: 36px; height: 36px; flex: none; border-radius: 50%; background: radial-gradient(circle, #FFE27A 45%, #FFB13A 70%); box-shadow: 0 0 18px rgba(255,200,80,.8); animation: sunspin 6s linear infinite; }
.morning-card .sun.dim { filter: grayscale(.8); box-shadow: none; animation: none; opacity: .5; }
@keyframes sunspin { 50% { box-shadow: 0 0 28px rgba(255,200,80,1); transform: scale(1.06); } }
.morning-card .mc-go { flex: none; font: 800 13px Unbounded, sans-serif; background: #FFC83A; color: #2B1600; padding: 10px 12px; border-radius: 12px; }
.morning-card.night { border-color: rgba(155,107,255,.45); background: linear-gradient(120deg, rgba(90,70,200,.22), rgba(40,30,110,.18)); cursor: default; }
.morning-card.missed { border-color: var(--line); background: rgba(255,255,255,.04); cursor: default; }
.moon-ic { width: 32px; height: 32px; flex: none; border-radius: 50%; box-shadow: inset -10px -4px 0 0 #FFF3B0; filter: drop-shadow(0 0 8px rgba(255,243,176,.5)); }
.life-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 2px; }
.life-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 99px; font: 800 12px Manrope, sans-serif;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text); cursor: pointer; }
.life-chip.dirt.l2 { border-color: rgba(200,140,70,.6); color: #F2C38A; } .life-chip.dirt.l3 { border-color: #C8783A; background: rgba(150,90,40,.25); color: #FFC98A; animation: chipNag 2s ease-in-out infinite; }
@keyframes chipNag { 50% { transform: scale(1.05); } }
.life-chip.warn { color: #FF9A9A; border-color: rgba(255,120,120,.35); cursor: default; }
.life-chip.room { color: var(--lime); border-color: rgba(198,255,74,.35); }
.ic-drop { width: 10px; height: 12px; background: currentColor; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; clip-path: polygon(50% 0, 100% 60%, 85% 95%, 15% 95%, 0 60%); }
.ic-home { width: 12px; height: 11px; background: currentColor; clip-path: polygon(50% 0, 100% 45%, 86% 45%, 86% 100%, 14% 100%, 14% 45%, 0 45%); }
.pet-actions .btn.need { border-color: rgba(200,140,70,.7); color: #FFD3A0; animation: chipNag 2.4s ease-in-out infinite; }
.wake-sheet { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.wake-art { position: relative; padding: 18px 40px 6px; border-radius: 24px; background: radial-gradient(circle at 50% 40%, rgba(90,70,200,.35), transparent 70%); }
.wake-cost { display: flex; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 14px; background: rgba(255,95,95,.08); border: 1px solid rgba(255,95,95,.25); font-size: 12px; }
.wake-cost b { color: #FF9A9A; text-align: right; }

/* ======================= BATH ======================= */
.bath-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .bath-head h2 { margin: 0; }
.bath-head .dim { font-size: 12px; }
.bath-scene { position: relative; height: 300px; border-radius: 22px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: linear-gradient(#BFE6F7, #8CCBE8); cursor: grab; }
.bath-tiles { position: absolute; inset: 0 0 30% 0; background: linear-gradient(90deg, rgba(255,255,255,.35) 2px, transparent 2px) 0 0/38px 38px, linear-gradient(rgba(255,255,255,.35) 2px, transparent 2px) 0 0/38px 38px; }
.bath-tub-back { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: 300px; max-width: 94%; z-index: 1; }
.bath-tub-back svg { width: 100%; height: auto; display: block; }
.bath-pet { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 2; }
.bath-pet .pet-mud { width: 90%; height: 80%; }
.bath-water { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: 260px; max-width: 84%; height: 62px; z-index: 3; pointer-events: none;
  border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; background: linear-gradient(rgba(140,210,255,.55), rgba(80,170,230,.75)); box-shadow: inset 0 6px 0 rgba(255,255,255,.4); }
.bath-foam { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bath-foam i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 18%, rgba(255,255,255,.85) 30%, rgba(210,235,255,.5) 62%, rgba(255,255,255,.15) 72%);
  box-shadow: inset -2px -3px 6px rgba(120,160,220,.25); animation: foamIn .3s cubic-bezier(.3,1.6,.5,1) both; }
.bath-foam i.pop { animation: foamPop .5s ease-in forwards; }
@keyframes foamIn { from { transform: scale(.2); } }
@keyframes foamPop { to { transform: translate(var(--dx), 40px) scale(.3); opacity: 0; } }
.bath-shower { position: absolute; left: 50%; top: -10px; width: 180px; height: 100%; transform: translateX(-50%); z-index: 5; pointer-events: none; opacity: 0; }
.bath-shower.on { opacity: 1; }
.bath-shower i { position: absolute; top: 0; width: 4px; height: 18px; border-radius: 4px; background: rgba(255,255,255,.9); opacity: 0; }
.bath-shower.on i { animation: drop .5s linear infinite; }
.bath-shower i:nth-child(1) { left: 8%; } .bath-shower i:nth-child(2) { left: 20%; animation-delay: .2s; } .bath-shower i:nth-child(3) { left: 33%; animation-delay: .1s; }
.bath-shower i:nth-child(4) { left: 46%; animation-delay: .35s; } .bath-shower i:nth-child(5) { left: 58%; animation-delay: .05s; } .bath-shower i:nth-child(6) { left: 70%; animation-delay: .25s; }
.bath-shower i:nth-child(7) { left: 82%; animation-delay: .15s; } .bath-shower i:nth-child(8) { left: 94%; animation-delay: .4s; }
@keyframes drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(240px); } }
.bath-scene.sparkling::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(circle at 30% 40%, #fff 0 2px, transparent 3px), radial-gradient(circle at 70% 30%, #fff 0 3px, transparent 4px), radial-gradient(circle at 55% 60%, #fff 0 2px, transparent 3px), radial-gradient(circle at 40% 70%, #FFF6C2 0 2px, transparent 3px);
  animation: twinkle 1s ease-in-out 3; }
.bath-bar { display: flex; align-items: center; gap: 10px; margin: 12px 0; } .bath-bar .bar { flex: 1; } .bath-bar span { font-size: 12px; font-weight: 800; flex: none; min-width: 92px; text-align: right; }
.bath-bar .bar > div { background: linear-gradient(90deg, #8CD8FF, #E6F7FF); }
.btn.pulse { animation: chipNag 1s ease-in-out infinite; }
.bath-mini { position: relative; display: inline-block; margin: 6px auto 4px; }
.shine-burst { position: absolute; inset: -20%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.35), transparent 60%); animation: sunspin 2s ease-in-out infinite; }
.bath-done { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ======================= ROOM (Домик) ======================= */
.room-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.room-head h2 { margin: 0 0 2px; } .room-head .dim { font-size: 12px; }
.comfort { flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border-radius: 14px; background: rgba(198,255,74,.1); border: 1px solid rgba(198,255,74,.35); }
.comfort b { font: 800 18px Unbounded, sans-serif; color: var(--lime); } .comfort span { font-size: 10px; color: var(--muted); font-weight: 800; }
.room { perspective: 900px; margin: 0 auto; width: 100%; max-width: 420px; }
.room-box { position: relative; width: 100%; aspect-ratio: 1 / .92; border-radius: 22px; overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease-out;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08); }
.room-wall { position: absolute; left: 0; right: 0; top: 0; height: 62%; }
.wall-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 18%, transparent 82%, rgba(0,0,0,.18)), linear-gradient(transparent 70%, rgba(0,0,0,.18)); }
.room-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: repeating-linear-gradient(90deg, #B07A48 0 46px, #A06C3D 46px 48px), linear-gradient(#B07A48, #8C5A30);
  transform-origin: top; box-shadow: inset 0 14px 18px -8px rgba(0,0,0,.35); }
.room-floor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.2)); }
.room-item { position: absolute; border: none; background: none; padding: 0; cursor: pointer; z-index: 2; transition: transform .15s, filter .2s; }
.room-item svg { width: 100%; height: auto; display: block; overflow: visible; }
.room-item:active { transform: scale(.95); }
.room-item:hover { filter: drop-shadow(0 0 6px rgba(198,255,74,.7)); }
.slot-plus { display: grid; place-items: center; width: 100%; height: 100%; min-height: 40px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.45); color: rgba(255,255,255,.75); font: 800 20px Manrope, sans-serif; background: rgba(0,0,0,.12); }
.r-window { left: 8%; top: 9%; width: 30%; }
.r-window svg { border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.3); }
.r-deco { right: 7%; bottom: 47.6%; width: 18%; }
.r-deco .slot-plus { min-height: 44px; }
.r-deco.on-wall { top: 10%; bottom: auto; width: 17%; }
.r-rug { left: 24%; bottom: 8%; width: 52%; z-index: 1; }
.r-rug .slot-plus { min-height: 34px; }
.r-bed { left: 3%; bottom: 10%; width: 38%; z-index: 3; }
.r-tub { right: 3%; bottom: 7%; width: 30%; z-index: 3; }
.r-lamp { right: 31%; bottom: 47.6%; width: 10%; z-index: 2; }
.r-lamp .slot-plus { min-height: 46px; }
.room-pet { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); z-index: 4; pointer-events: none; }
.room-pet.in-bed { left: 22%; bottom: 20%; }
.room-pet .slime { animation: bob 3.2s ease-in-out infinite; }
.room-pet.in-bed .slime { animation: breathe 3.6s ease-in-out infinite !important; }
.room-pet .pet-zzz { right: -24px; top: -10px; }
.room-darkness { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: rgba(12,10,48,0); transition: background .4s; }
.room.night .room-darkness { background: rgba(12,10,48,.55); }
.room-lampglow { position: absolute; right: 22%; top: 30%; width: 70%; height: 80%; transform: translate(50%, -20%); z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255,214,140,.55), rgba(255,180,90,.18) 40%, transparent 65%); transition: opacity .4s; }
.room.night.has-lamp .room-lampglow { opacity: 1; animation: lampFlick 4s ease-in-out infinite; }
@keyframes lampFlick { 50% { opacity: .85; } }
.room.night .r-window svg { box-shadow: 0 0 22px rgba(120,140,255,.4); }
.room.celebrate .room-box { animation: roomJoy .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes roomJoy { 30% { transform: scale(1.03) rotateZ(-1deg); } 60% { transform: scale(.99) rotateZ(.8deg); } }
@keyframes bob { 50% { transform: translateY(-5px); } }
.comfort-bar { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 8px; }
.comfort-bar span { font-size: 12px; color: var(--muted); text-align: center; }
.room-effects { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.room-effects b { color: var(--text); }
.room-slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.room-shop { margin-top: 4px; }
.room-shop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.room-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ri { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.ri.r1 { border-color: rgba(63,224,240,.35); } .ri.r2 { border-color: rgba(155,107,255,.45); } .ri.r3 { border-color: rgba(255,200,58,.55); background: rgba(255,200,58,.06); }
.ri.on { box-shadow: 0 0 0 2px var(--lime) inset; } .ri.pv { box-shadow: 0 0 0 2px #FFC83A inset; background: rgba(255,200,58,.1); }
.ri-name { font-weight: 800; font-size: 13px; line-height: 1.25; }
.ri-meta { font-size: 11px; color: var(--muted); line-height: 1.3; }
.ri-price { font: 800 12px Unbounded, sans-serif; color: #CFC6FF; margin-top: 2px; } .ri-price.candy { color: #FFB36B; }
.ri-on { font-size: 11px; font-weight: 800; color: var(--lime); margin-top: 2px; } .ri-own { font-size: 11px; font-weight: 800; color: var(--muted); margin-top: 2px; }
@media (max-width: 360px) { .room-items { grid-template-columns: 1fr; } }
.r-shelf { position: absolute; height: 7px; border-radius: 3px; background: linear-gradient(#C99366, #8C5A30); box-shadow: 0 6px 8px rgba(0,0,0,.25); z-index: 1; bottom: calc(47.6% - 7px); }
.r-shelf.s-deco { right: 5%; width: 22%; } .r-shelf.s-lamp { right: 29%; width: 14%; }
.life-chip { width: auto; flex: none; }
.evo-wrap > .pet-zzz { right: -18%; top: -8%; font-size: 20px; }
.evo-wrap > .pet-zzz b:nth-child(2) { font-size: 26px; } .evo-wrap > .pet-zzz b:nth-child(3) { font-size: 34px; }
.pet-zzz b { color: #fff; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 10px) scale(.9); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(26px, -40px) scale(1.25) rotate(12deg); } }
.morning-card b { font-size: 13px; }
@media (max-width: 340px) { .morning-card { gap: 10px; padding: 10px 12px; } .morning-card .sun { width: 28px; height: 28px; } .morning-card .mc-go { padding: 8px 10px; font-size: 12px; } }

/* ======================= PET ACTIONS 2x2 ======================= */
.pet-actions.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pet-actions.four .btn { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 8px; row-gap: 0; min-height: 50px; }
.pet-actions.four .btn small { flex-basis: 100%; text-align: center; }
.pa-ic { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; }
.pa-ic.feed { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3c3 4 6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 3-7 6-11z'/%3E%3C/svg%3E"); }
.pa-ic.play { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10a5 5 0 0 1 5 5v2a3 3 0 0 1-5.4 1.8L15 14H9l-1.6 1.8A3 3 0 0 1 2 14v-2a5 5 0 0 1 5-5zm0 3v1.2H5.8v1.6H7V14h1.6v-1.2h1.2v-1.6H8.6V10zm8.8.4a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1.8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E"); }
.pa-ic.bath { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12h18v2a6 6 0 0 1-6 6H9a6 6 0 0 1-6-6zM6 11V5a2 2 0 0 1 4 0h-2v6z'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='19' cy='5' r='1.4'/%3E%3C/svg%3E"); }
.pa-ic.home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3z'/%3E%3C/svg%3E"); }
.pet-actions .btn.play { border-color: rgba(63,224,240,.5); color: #9FF3FA; }

/* ======================= GAMES HUB ======================= */
.ghub-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.ghub-head h2 { margin: 0 0 3px; } .ghub-head .dim { font-size: 12px; line-height: 1.4; display: block; }
.ghub-pet { flex: none; animation: bob 2.4s ease-in-out infinite; }
.ghub-warn { font-size: 12px; color: #CFC6FF; background: rgba(90,70,200,.18); border: 1px solid rgba(155,107,255,.35); padding: 8px 12px; border-radius: 12px; margin: 0 0 10px; }
.gcards { display: flex; flex-direction: column; gap: 10px; }
.gcard { position: relative; display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; gap: 8px 12px; padding: 12px; border-radius: 20px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--gc) 45%, transparent); background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--gc) 22%, transparent), transparent 60%), rgba(255,255,255,.03);
  transition: transform .2s ease-out; transform-style: preserve-3d; will-change: transform; }
.gcard-art { grid-row: span 2; display: grid; place-items: center; border-radius: 16px; background: rgba(0,0,0,.22); transform: translateZ(20px); }
.gcard-art svg { width: 78px; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); animation: bob 3s ease-in-out infinite; }
.gcard-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gcard-body b { font: 800 15px Unbounded, sans-serif; } .gcard-body > span { font-size: 12px; color: var(--muted); line-height: 1.4; }
.gcard-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--dim); font-weight: 800; margin-top: 2px; }
.gcard-meta .ok { color: var(--lime); }
.gplay { min-height: 40px; }
.duel-new { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,95,168,.35); background: rgba(255,95,168,.06); }
.duel-new > .dim { font-size: 12px; line-height: 1.45; }
.duel-new .seg { margin: 4px 0; }
.duel-new input[type=range] { width: 100%; }
.duel-row { padding: 12px 14px; }
.duel-row.done { opacity: .85; } .duel-row.expired, .duel-row.cancelled { opacity: .6; }
.duel-ic { width: 44px; height: 34px; flex: none; display: grid; place-items: center; }
.duel-ic svg { width: 100%; height: auto; } .duel-ic.big { width: 120px; height: 90px; margin: 4px auto; }
.duel-line { font-size: 12px; color: var(--text); margin-top: 8px; }
.duel-btns { display: flex; gap: 6px; margin-top: 8px; }
.duel-invite { display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ======================= GAME RUNNER ======================= */
.game-root { position: fixed; inset: 0; z-index: 900; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: radial-gradient(120% 80% at 50% 0%, #3B2A8E, #160D3E 55%, #0B0726); }
.g-candy { background: radial-gradient(120% 80% at 50% 0%, #6A2A8E, #2A1050 55%, #12072A); }
.g-jump { background: linear-gradient(#3A6FD8, #7A5CE0 55%, #2A1A6A); }
.g-pairs { background: radial-gradient(120% 80% at 50% 0%, #1F5A4A, #0F2C3A 60%, #08141C); }
.g-bg { position: absolute; inset: 0; pointer-events: none; }
.g-bg i { position: absolute; inset: -50% 0 0 0; background-repeat: repeat; opacity: .6; animation: gstars 30s linear infinite; }
.g-bg .l1 { background-image: radial-gradient(circle, #fff 0 1px, transparent 1.5px); background-size: 38px 44px; animation-duration: 40s; }
.g-bg .l2 { background-image: radial-gradient(circle, #FFE9A8 0 1.5px, transparent 2px); background-size: 71px 83px; animation-duration: 24s; opacity: .45; }
.g-bg .l3 { background-image: radial-gradient(circle, rgba(198,255,74,.9) 0 2px, transparent 2.5px); background-size: 130px 150px; animation-duration: 14s; opacity: .3; }
.g-jump .g-bg i { animation-name: gclouds; }
.g-jump .g-bg .l1 { background-image: radial-gradient(ellipse 40px 14px, rgba(255,255,255,.6), transparent 70%); background-size: 220px 160px; }
@keyframes gstars { to { transform: translateY(50%); } }
@keyframes gclouds { from { transform: translateX(0); } to { transform: translateX(-220px); } }
.g-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-layer { position: absolute; inset: 0; pointer-events: none; }
.g-pairs .g-layer { pointer-events: auto; }
.g-pet { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 10px 12px rgba(0,0,0,.4)); }
.g-pet.hurt .slime { animation: hurt .4s ease-in-out; }
@keyframes hurt { 25% { transform: translateX(-6px) rotate(-8deg); filter: brightness(1.6) saturate(.4); } 75% { transform: translateX(6px) rotate(8deg); } }
.g-hud { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; z-index: 3; }
.g-x { width: 40px; height: 40px; flex: none; border-radius: 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.25); color: #fff; font-size: 16px; }
.g-score { display: flex; flex-direction: column; line-height: 1.1; } .g-score b { font: 800 26px Unbounded, sans-serif; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25); }
.g-score b.bump { animation: gbump .25s ease-out; } @keyframes gbump { 40% { transform: scale(1.25); color: var(--lime); } }
.g-score span { font-size: 11px; color: rgba(255,255,255,.65); font-weight: 800; }
.g-extra { margin-left: auto; display: flex; gap: 8px; align-items: center; font-weight: 800; color: #fff; font-size: 14px; }
.g-lives { color: #FF5F7E; letter-spacing: 2px; } .g-lives i { color: rgba(255,255,255,.2); font-style: normal; }
.g-time { font: 800 15px Unbounded, sans-serif; background: rgba(0,0,0,.25); padding: 4px 10px; border-radius: 99px; }
.g-combo { background: #FFC83A; color: #2B1600; padding: 3px 9px; border-radius: 99px; font-size: 12px; animation: gbump .4s; }
.g-hint { font-size: 12px; color: rgba(255,255,255,.75); }
.g-center { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; pointer-events: none; }
.g-center > * { pointer-events: auto; }
.cd { font: 800 110px Unbounded, sans-serif; color: #fff; text-shadow: 0 8px 0 rgba(0,0,0,.25), 0 0 40px rgba(198,255,74,.6); animation: cd3d .65s cubic-bezier(.2,.8,.3,1) both; }
.cd.go { font-size: 54px; color: var(--lime); }
@keyframes cd3d { from { transform: perspective(500px) translateZ(-400px) rotateX(40deg); opacity: 0; } 60% { transform: perspective(500px) translateZ(40px); opacity: 1; } to { transform: perspective(500px) translateZ(0); } }
.g-pop { position: absolute; transform: translate(-50%, -50%); font: 800 18px Unbounded, sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); animation: gpop .9s ease-out forwards; pointer-events: none; }
.g-pop.gold { color: #FFE27A; font-size: 24px; } .g-pop.bad { color: #FF7B8A; }
@keyframes gpop { to { transform: translate(-50%, -160%) scale(1.2); opacity: 0; } }
.g-end { width: min(340px, calc(100vw - 32px)); box-sizing: border-box; background: rgba(20,12,50,.92); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; padding: 22px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; backdrop-filter: blur(8px); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.g-end.pop-in { animation: endIn .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes endIn { from { transform: perspective(600px) rotateX(-35deg) translateY(40px) scale(.8); opacity: 0; } }
.g-final { font: 800 56px Unbounded, sans-serif; color: #fff; line-height: 1; text-shadow: 0 0 30px rgba(198,255,74,.5); }
.g-best { font: 800 13px Unbounded, sans-serif; color: #2B1600; background: linear-gradient(90deg, #FFE27A, #FFB13A); padding: 6px 14px; border-radius: 99px; animation: gbump 1s ease-in-out infinite; }
.g-rew { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; padding: 10px 14px; border-radius: 16px; background: rgba(198,255,74,.1); border: 1px solid rgba(198,255,74,.35); width: 100%; box-sizing: border-box; }
.g-rew span { font: 800 16px Unbounded, sans-serif; color: var(--lime); } .g-rew small { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.g-rew.none, .g-rew.duel { background: rgba(255,255,255,.05); border-color: var(--line); font-size: 13px; color: var(--text); font-weight: 800; }
.g-petline { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.g-conf { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; z-index: 5; pointer-events: none; animation: conf 2s ease-in forwards; }
@keyframes conf { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); } }
/* pairs */
.pairs-grid { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(330px, calc(100vw - 28px)); perspective: 900px; }
@media (min-height: 700px) { .pairs-grid { grid-template-columns: repeat(3, 1fr); } }
.pcard { aspect-ratio: 3 / 3.6; border: none; background: none; padding: 0; cursor: pointer; }
.pc-in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.pcard.open .pc-in, .pcard.done .pc-in { transform: rotateY(180deg); }
.pc-back, .pc-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; box-shadow: 0 8px 18px rgba(0,0,0,.35); }
.pc-back { background: linear-gradient(135deg, #9B6BFF, #5B2FD0); border: 2px solid rgba(255,255,255,.25); }
.pc-back i { width: 60%; height: 60%; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), rgba(255,255,255,.12) 60%); }
.pc-front { background: radial-gradient(circle at 50% 30%, #ffffff, #E7E0FF); transform: rotateY(180deg); }
.pcard.done .pc-front { box-shadow: 0 0 0 3px var(--lime), 0 0 20px rgba(198,255,74,.6); animation: pdone .5s ease-out; }
@keyframes pdone { 50% { transform: rotateY(180deg) scale(1.08); } }

/* ======================= RAID LIVE ======================= */
.raid-live { margin: 0 0 12px; padding: 12px 14px; border-radius: 18px; border: 1px solid rgba(255,140,80,.4); background: radial-gradient(120% 100% at 50% 0%, rgba(255,110,60,.16), transparent 60%), rgba(255,255,255,.03); }
.rl-head { display: flex; align-items: center; gap: 8px; }
.rl-head b { font-size: 14px; }
.rl-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF5F5F; box-shadow: 0 0 0 0 rgba(255,95,95,.6); animation: rlpulse 1.4s ease-out infinite; }
@keyframes rlpulse { 70% { box-shadow: 0 0 0 9px rgba(255,95,95,0); } 100% { box-shadow: 0 0 0 0 rgba(255,95,95,0); } }
.rl-combo { margin-left: auto; font: 800 11px Unbounded, sans-serif; padding: 4px 9px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--dim); }
.rl-combo.on { background: linear-gradient(90deg, #FFB13A, #FF5F7E); color: #fff; animation: chipNag 1s ease-in-out infinite; }
.rl-boss { position: relative; display: grid; place-items: center; padding: 14px 0 6px; cursor: pointer; perspective: 600px; }
.rl-boss .slime { transition: transform .1s; }
.rl-boss:active .slime { transform: scale(1.1, .9) rotateX(10deg); }
.rl-tap { font-size: 11px; font-weight: 800; color: #FFC07A; margin-top: 4px; }
.rl-hit { position: absolute; transform: translate(-50%, -50%); font: 800 18px Unbounded, sans-serif; color: #FF7B5A; text-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: none; animation: gpop .8s ease-out forwards; }
.rl-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 12px; }
.rl-f { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.06); font-weight: 800; }
.rl-f i { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); }
.rl-f.hot i { background: #FF7B5A; box-shadow: 0 0 8px #FF7B5A; }
.rl-f.me { box-shadow: 0 0 0 1px rgba(198,255,74,.5) inset; }
.rl-f small { color: var(--muted); font-weight: 700; }
.duel-card { width: 100%; text-align: left; margin-top: 14px; border-color: rgba(255,95,168,.35); }
.duel-card .rv { font-size: 20px; }
.duel-card + .chat-card { margin-top: 10px; }

/* ======================= ACHIEVEMENTS BOOK ======================= */
.book-card { border-color: rgba(255,200,58,.4); background: radial-gradient(120% 100% at 0% 50%, rgba(255,200,58,.12), transparent 60%), var(--card); }
.book-ic { width: 40px; height: 46px; flex: none; display: grid; place-items: center; animation: bob 3s ease-in-out infinite; }
.book-ic svg { width: 34px; height: auto; }
.book-ready { flex: none; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--pink); color: #fff; font: 800 13px Unbounded, sans-serif; display: grid; place-items: center; box-shadow: 0 0 12px rgba(255,95,168,.6); }
.book-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.book-head h2 { margin: 0 0 3px; } .book-head .dim { font-size: 11px; line-height: 1.4; display: block; }
.book-ring { --p: 0; flex: none; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: radial-gradient(closest-side, var(--card, #1D1440) 78%, transparent 80%), conic-gradient(#FFC83A calc(var(--p) * 1%), rgba(255,255,255,.08) 0); }
.book-ring b { font: 800 18px Unbounded, sans-serif; color: #FFE27A; line-height: 1; } .book-ring span { font-size: 10px; color: var(--muted); font-weight: 800; }
.book-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 10px; }
.book-tabs::-webkit-scrollbar { display: none; } .book-tabs .chip { flex: none; }
.book-page { border-radius: 20px; padding: 14px; background: linear-gradient(#2A1D55, #1E1542); border: 1px solid rgba(255,200,58,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transform-origin: left center; }
.book-page.turn { animation: pageTurn .45s ease-out; }
@keyframes pageTurn { from { transform: perspective(900px) rotateY(-28deg); opacity: .4; } }
.book-cover { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.book-cover b { font: 800 17px Unbounded, sans-serif; display: block; } .book-cover span { font-size: 12px; color: var(--muted); }
.book-prize { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 16px; border: 1px dashed rgba(255,200,58,.5); background: rgba(255,200,58,.06); color: var(--text); cursor: pointer; max-width: 108px; }
.book-prize small { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; line-height: 1.25; }
.book-prize.ready { border-style: solid; border-color: #FFC83A; animation: chipNag 1.2s ease-in-out infinite; } .book-prize.ready small { color: #FFE27A; }
.book-prize.got { opacity: .6; }
.book-prize-txt { font-size: 11px; margin: 8px 0 10px; }
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(0,0,0,.18); }
.ach.full { background: rgba(255,200,58,.08); }
.ach-medals { display: flex; flex: none; }
.am { width: 26px; margin-right: -5px; }
.am svg { width: 100%; height: auto; display: block; }
.medal.off { filter: grayscale(1) brightness(.55); opacity: .55; }
.medal.ready { animation: medalBounce 1.2s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(198,255,74,.8)); }
@keyframes medalBounce { 50% { transform: translateY(-3px) rotate(-6deg); } }
.medal.lit { filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.ach-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-body b { font-size: 13px; } .ach-body > span { font-size: 11px; color: var(--muted); line-height: 1.3; }
.ach-body .bar { height: 6px; } .ach-body small { font-size: 10px; color: var(--dim); font-weight: 800; }
.ach-done { color: #FFE27A !important; font-weight: 800; }
.ach-claim { flex: none; }
.medal-pop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(8,4,24,.55); pointer-events: none; animation: fadeIn .2s; }
.medal-pop.out { animation: fadeOut .4s forwards; }
@keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
.mp-in { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 30px; }
.mp-in b { font: 800 20px Unbounded, sans-serif; color: #fff; } .mp-in span { font-size: 13px; color: var(--lime); font-weight: 800; }
.mp-medal { width: 120px; perspective: 600px; }
.mp-medal svg { width: 100%; height: auto; animation: medalSpin 1.2s cubic-bezier(.2,.8,.3,1) both; filter: drop-shadow(0 0 24px rgba(255,226,122,.8)); }
@keyframes medalSpin { from { transform: rotateY(-540deg) scale(.2); } 70% { transform: rotateY(20deg) scale(1.1); } to { transform: rotateY(0) scale(1); } }

/* ======================= WALLPAPER SCENES ======================= */
.room-wall { overflow: hidden; }
.room-wall > i:not(.wall-shade) { position: absolute; pointer-events: none; }
.wp-sheen { inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%) 0 0/250% 100%; animation: wpSheen 6s ease-in-out infinite; }
@keyframes wpSheen { 0% { background-position: 120% 0; } 60%, 100% { background-position: -60% 0; } }
.wp-star { width: var(--s); height: var(--s); animation: wpTw 2.6s ease-in-out infinite; animation-delay: var(--d); filter: drop-shadow(0 0 4px rgba(255,230,140,.9)); }
.wp-star svg { width: 100%; height: 100%; display: block; }
@keyframes wpTw { 0%,100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.15) rotate(20deg); opacity: 1; } }
.wp-shoot { left: 70%; top: 8%; width: 70px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-28deg); opacity: 0; animation: wpShoot 7s ease-in infinite; }
.wp-shoot.s2 { left: 40%; top: 22%; animation-delay: 3.5s; }
@keyframes wpShoot { 0%, 80% { opacity: 0; transform: rotate(-28deg) translateX(0); } 84% { opacity: 1; } 100% { opacity: 0; transform: rotate(-28deg) translateX(-180px); } }
.wp-lolly { bottom: -8px; width: 26px; animation: wpBob 3.4s ease-in-out infinite; animation-delay: var(--d); opacity: .9; }
.wp-lolly svg { width: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(150,40,90,.25)); }
@keyframes wpBob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-8px) rotate(6deg); } }
.wp-fly { width: 6px; height: 6px; border-radius: 50%; background: #E8FF8A; box-shadow: 0 0 8px 3px rgba(220,255,120,.75); animation: wpFly 5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes wpFly { 0%,100% { transform: translate(0,0); opacity: .2; } 30% { opacity: 1; } 50% { transform: translate(var(--dx), -18px); opacity: .9; } 70% { opacity: .3; } }
.wp-moonglow { right: 12%; top: 8%; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, #FFF6C2 40%, rgba(255,246,194,0) 72%); }
.wp-planet { right: 6%; top: 6%; width: 34%; animation: wpFloat 8s ease-in-out infinite; }
.wp-planet svg { width: 100%; display: block; filter: drop-shadow(0 0 14px rgba(255,140,90,.4)); }
@keyframes wpFloat { 50% { transform: translateY(-6px) rotate(3deg); } }
.wp-moon2 { left: 46%; top: 30%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9FB4FF); animation: wpOrbit 9s linear infinite; }
@keyframes wpOrbit { from { transform: rotate(0) translateX(26px) rotate(0); } to { transform: rotate(360deg) translateX(26px) rotate(-360deg); } }
.wp-twinkle { width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(255,255,255,.8); animation: twinkle 2.2s ease-in-out infinite; animation-delay: var(--d); }
.wp-bigmoon { right: 10%; top: 8%; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF6D8, #F2D98A); box-shadow: 0 0 30px rgba(255,220,140,.7); }
.wp-bat { left: -60px; width: 40px; animation: wpBat var(--dur) linear infinite; animation-delay: var(--d); }
.wp-bat svg { width: 100%; display: block; animation: wpFlap .35s ease-in-out infinite alternate; transform-origin: center; }
@keyframes wpBat { from { transform: translateX(0) translateY(0); } 50% { transform: translateX(240px) translateY(-14px); } to { transform: translateX(520px) translateY(4px); } }
@keyframes wpFlap { to { transform: scaleY(.55); } }
.wp-pumpkins { left: 0; right: 0; bottom: 0; height: 22%; }
.wp-pumpkins svg { width: 100%; height: 100%; display: block; }
.room.night .wp-fly, .room.night .wp-star, .room.night .wp-twinkle { filter: brightness(1.4); }
.ri-sw { display: block; width: 100%; height: 36px; border-radius: 10px; margin-bottom: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* royal bed */
.r-bed.royal { width: 44%; left: 1%; bottom: 7%; }
.r-bed.royal svg { filter: drop-shadow(0 0 10px rgba(255,214,90,.35)); }
.br-spark path { animation: wpTw 2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.r-bed.royal + .r-tub + .r-lamp ~ .room-pet.in-bed, .room-pet.in-bed.royal { left: 23%; bottom: 23%; }
.room-box:has(.r-bed.royal) .room-pet:not(.in-bed) { left: 61%; }

/* ======================= NECK SLOT + STREET ACCESSORIES ======================= */
.slime .acc-neck { left: -4%; width: 108%; top: 66%; height: 42%; z-index: 3; }
.slime .acc svg { width: 100%; height: 100%; display: block; overflow: visible; }
.acc-visor .scan { animation: visorScan 1.8s linear infinite; }
@keyframes visorScan { from { stroke-dashoffset: 96; } to { stroke-dashoffset: 0; } }
.ice-spark path { animation: wpTw 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ice-spark path:nth-child(2) { animation-delay: .5s; } .ice-spark path:nth-child(3) { animation-delay: 1s; }

/* ======================= THEME: НУАР (dark, grown-up) ======================= */
body.noir { --bg: #060608; --bg2: #0D0D11; --card: rgba(255,255,255,.04); --line: rgba(255,255,255,.08); --text: #EFEFF4; --muted: #A2A2B0; --dim: #6E6E7C;
  --violet: #8C8C9C; --pink: #FF2E63; --pink-soft: #FF9AB3; }
body.noir #app, body.noir.hw #app { background: radial-gradient(110% 60% at 50% 0%, #1B1B24 0%, #0B0B10 55%, #050507 100%); }
body.noir .jar, body.noir.hw .jar, body.noir .pet, body.noir.hw .pet { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); border-color: rgba(255,255,255,.07); }
body.noir .card { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)); border-color: rgba(255,255,255,.07); }
body.noir .sheet, body.noir .tut-box { background: #111117; }
body.noir .nav { background: rgba(8,8,11,.92); }
body.noir .section-label { color: #7C7C8A; letter-spacing: 2px; }
body.noir .btn-pink { background: rgba(255,46,99,.12); border-color: rgba(255,46,99,.5); color: #FF9AB3; }
body.noir .seg, body.noir .chip { background: rgba(255,255,255,.04); }
body.noir .hw-bats { opacity: .35; }
body.noir .avatar { background: radial-gradient(circle at 35% 30%, #E6E6EE, #6E6E7C 60%, #2A2A33); }
body.noir .mood .bar > div { background: linear-gradient(90deg, #6E6E7C, #EFEFF4); }
body.noir .mood.happy .bar > div { background: linear-gradient(90deg, #9EE21F, var(--lime)); }
.theme-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.theme-pick button { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font-weight: 800; font-size: 13px; }
.theme-pick button.on { box-shadow: 0 0 0 2px var(--lime) inset; }
.theme-pick i { display: block; width: 100%; height: 34px; border-radius: 10px; }
.theme-pick .t-classic i { background: radial-gradient(120% 90% at 50% 20%, #2A1650, #120B24 60%, #0B0816); box-shadow: inset 0 0 0 1px rgba(255,95,168,.4); }
.theme-pick .t-noir i { background: radial-gradient(110% 80% at 50% 0%, #1B1B24, #0B0B10 55%, #050507); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.promo-row { display: flex; gap: 8px; margin: 4px 0 12px; }
.promo-row input { flex: 1; min-width: 0; min-height: 46px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--text);
  padding: 0 14px; font: 800 15px Manrope, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; outline: none; }
.promo-row input:focus { border-color: rgba(198,255,74,.6); }
.promo-row .btn { min-height: 46px; flex: none; padding: 0 16px; }
.gweek { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: 11px; }
.gweek span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; }
.gweek span b { font-size: 12px; } .gweek span i { margin-left: auto; font-style: normal; color: var(--text); font-weight: 800; }
.gweek span.me { color: var(--lime); }
.gprize { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,200,58,.35); background: rgba(255,200,58,.07); }
.gprize b { font-size: 13px; } .gprize span { font-size: 12px; color: var(--text); } .gprize small { font-size: 11px; color: var(--muted); }
.promo-ok { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.promo-burst { font-size: 64px; animation: fbPop .6s cubic-bezier(.3,1.6,.5,1) both; filter: drop-shadow(0 0 20px rgba(198,255,74,.6)); }
.promo-card.off { opacity: .6; }
.promo-code { font: 800 20px Unbounded, sans-serif; letter-spacing: 1px; color: var(--lime); }
.promo-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.promo-stats > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.promo-stats > div.wide { grid-column: span 2; background: rgba(255,200,58,.08); }
.promo-stats b { font: 800 16px Unbounded, sans-serif; } .promo-stats span { font-size: 11px; color: var(--muted); }
.slime .acc-head.acc-hood { left: -12%; width: 124%; top: -24%; height: 100%; }

/* ===== Стартовый набор ===== */
.starter-strip { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 8px 12px 8px 8px;
  border-radius: 18px; border: 1px solid rgba(255,200,58,.55); color: inherit; text-align: left; overflow: hidden; isolation: isolate;
  background: linear-gradient(115deg, rgba(255,200,58,.22), rgba(255,95,168,.18) 55%, rgba(123,92,255,.22)); box-shadow: 0 8px 24px -12px rgba(255,180,60,.6); }
.starter-strip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 45%, transparent 60%);
  transform: translateX(-100%); animation: ssShine 3.6s ease-in-out infinite; }
@keyframes ssShine { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.starter-strip.in-shop { margin-bottom: 12px; }
.ss-art { position: relative; flex: 0 0 64px; height: 46px; }
.ss-art .ss-a { position: absolute; left: 0; bottom: -2px; }
.ss-art .ss-b { position: absolute; right: 0; bottom: 0; }
.ss-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ss-txt b { font-family: Unbounded, sans-serif; font-size: 14px; color: #FFE6A8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-txt small { font-size: 11.5px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-time { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; }
.ss-time small { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .06em; }
.ss-time b { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 800; color: #fff; }

.starter-sheet { text-align: center; }
.starter-sheet h2 { margin: 6px 0 4px; font-family: Unbounded, sans-serif; }
.sp-hero { position: relative; height: 150px; margin: -4px auto 6px; max-width: 280px; }
.sp-ring { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,200,58,.0), rgba(255,200,58,.55), rgba(255,95,168,.45), rgba(123,92,255,.5), rgba(255,200,58,.0));
  filter: blur(18px); animation: spSpin 8s linear infinite; }
@keyframes spSpin { to { transform: rotate(360deg); } }
.sp-hero .sp-a { position: absolute; left: 22%; bottom: 4px; animation: spBob 3s ease-in-out infinite; }
.sp-hero .sp-b { position: absolute; right: 18%; bottom: 6px; animation: spBob 3s ease-in-out -1.5s infinite; }
@keyframes spBob { 50% { transform: translateY(-7px); } }
.sp-off { position: absolute; right: 2%; top: 4px; padding: 6px 10px; border-radius: 12px; transform: rotate(8deg);
  background: linear-gradient(135deg, #FF5FA8, #FF8A1F); color: #fff; font: 900 15px Unbounded, sans-serif; box-shadow: 0 6px 18px -6px rgba(255,95,168,.8); }
.sp-lead { font-size: 13px; line-height: 1.5; margin: 0 auto 10px; max-width: 340px; }
.sp-timer { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 13px; margin-bottom: 12px; }
.sp-timer b { font-variant-numeric: tabular-nums; color: #FFE6A8; }
.sp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: left; }
.sp-item { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); min-width: 0; }
.sp-ic { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: rgba(255,255,255,.06); overflow: hidden; }
.sp-ic svg { width: 26px; height: 26px; }
.sp-tx { min-width: 0; display: flex; flex-direction: column; }
.sp-tx b { font-size: 12.5px; line-height: 1.25; }
.sp-tx small { font-size: 11px; opacity: .65; line-height: 1.3; }
.sp-buy { width: 100%; margin-top: 14px; }
.sp-note { font-size: 11.5px; margin: 8px 0 0; }
@media (max-width: 340px) { .sp-list { grid-template-columns: 1fr; } }

/* ===== Награды за рекламу ===== */
.ad-row { display: none; gap: 8px; margin: 10px 0 0; }
.ad-row.on { display: flex; }
.ad-row .ad-btn { flex: 1; }
.ad-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 12px 6px 8px; border-radius: 14px; text-align: left; color: #CFE9FF;
  background: rgba(63,224,240,.08); border: 1px dashed rgba(63,224,240,.45); min-width: 0; }
#ad-spin .ad-btn { margin-top: 10px; }
.ad-btn svg { flex: 0 0 28px; width: 28px; height: 28px; color: #3FE0F0; }
.ad-btn span { display: flex; flex-direction: column; min-width: 0; }
.ad-btn b { font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-btn small { font-size: 11px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-btn.wait { opacity: .55; pointer-events: none; }
@media (max-width: 360px) {
  .ss-txt b { font-size: 12.5px; } .ss-time b { font-size: 13.5px; } .ss-art { flex-basis: 54px; }
  .ad-btn { padding: 6px 8px 6px 6px; gap: 6px; } .ad-btn b { font-size: 12px; } .ad-btn svg { flex-basis: 24px; width: 24px; height: 24px; }
}