:root{
  --bg:#1B1230; --bg2:#251845; --card:#2E1F52; --card2:#3A2866;
  --ink:#F2ECFF; --dim:#A896C9; --acc:#3DD6B0; --acc2:#2AB795;
  --warn:#FF6B6B; --gold:#F0C93C;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}

/* ---------- шапка ---------- */
#topbar{
  flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top)); background:var(--bg2);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.shelter{font-weight:700;font-size:14px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wallets{display:flex;gap:6px;align-items:center}
.w{display:flex;align-items:center;gap:4px;background:var(--card);border-radius:20px;padding:5px 10px;font-size:13px;font-weight:700;border:0;color:var(--ink)}
.w.daily{font-size:15px;padding:5px 9px;background:var(--card2);cursor:pointer}
.w.daily.ready{background:var(--gold);animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.09)}}
.ic{width:18px;height:18px;display:inline-block;background-size:contain;
  background-repeat:no-repeat;background-position:center}
.ic.slop{background-image:url(/art/icons/slop.png)}
.ic.essence{background-image:url(/art/icons/essence.png)}
.ic.sparks{background-image:url(/art/icons/sparks.png)}
.ic.token{background-image:url(/art/icons/token.png)}
.ic.ticket{background-image:url(/art/icons/ticket.png)}
.ic.cocoon{background-image:url(/art/icons/cocoon.png)}
.ic.title{background-image:url(/art/icons/title.png)}

/* ---------- контент ---------- */
#view{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 12px 16px;-webkit-overflow-scrolling:touch;
  position:relative;background-size:cover;background-position:center top;background-attachment:local}
#view.bg-shelter{background-image:linear-gradient(to bottom,rgba(27,18,48,.55),rgba(27,18,48,.92) 60%),url(/art/bg/shelter.jpg)}
#view.bg-arena{background-image:linear-gradient(to bottom,rgba(27,18,48,.6),rgba(27,18,48,.94) 60%),url(/art/bg/arena.jpg)}
#view.bg-card{background-image:linear-gradient(to bottom,rgba(27,18,48,.7),rgba(27,18,48,.95) 55%),url(/art/bg/card.jpg)}
h2{font-size:17px;margin:2px 0 10px}
h3{font-size:14px;margin:16px 0 8px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.muted{color:var(--dim);font-size:13px}
.card{background:var(--card);border-radius:var(--r);padding:12px;margin-bottom:10px}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}

button.btn{
  border:0;border-radius:11px;padding:11px 14px;font:inherit;font-weight:700;
  background:var(--acc);color:#08251E;cursor:pointer;transition:transform .08s;
}
button.btn:active{transform:scale(.97)}
button.btn:disabled{background:#4A3D69;color:#8878A8;cursor:default}
button.btn.sec{background:var(--card2);color:var(--ink)}
button.btn.wide{width:100%}
button.btn.sm{padding:7px 11px;font-size:13px;border-radius:9px}

/* ---------- существо ---------- */
.creature{background:var(--card);border-radius:var(--r);padding:12px;margin-bottom:10px}
.creature .top{display:flex;gap:12px}
.portrait{width:92px;height:92px;flex:none;background:var(--bg2);border-radius:12px;overflow:hidden;display:grid;place-items:center}
.portrait svg{width:100%;height:100%}
.portrait.big{width:150px;height:150px}
.cname{font-weight:800;font-size:16px;margin-bottom:2px}
.rar{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;color:#fff}
.bar{height:7px;background:#1B1230;border-radius:6px;overflow:hidden;margin:7px 0 3px}
.bar i{display:block;height:100%;background:var(--acc);border-radius:6px;transition:width .3s}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.stat{background:var(--bg2);border-radius:8px;padding:3px 8px;font-size:12px;font-weight:700}
.stat b{color:var(--acc)}
.muts{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.mut{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;background:var(--card2)}
.mut.notable{background:#3D5A8A}.mut.rare{background:#6B4A9E}.mut.anomaly{background:#9E3B3B}

/* ---------- поле коконов ---------- */
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:8px 0}
.cell{aspect-ratio:1;background:var(--card) url(/art/icons/cocoon.png) center/58% no-repeat;
  border-radius:11px;display:grid;place-items:center;
  font-weight:800;font-size:15px;cursor:pointer;position:relative;border:2px solid transparent;transition:.12s}
.cell.empty{background:rgba(255,255,255,.04);cursor:default}
.cell:not(.empty){text-shadow:0 1px 3px rgba(0,0,0,.85)}
.cell.sel{border-color:var(--acc);transform:scale(1.06)}
.cell.can{border-color:rgba(61,214,176,.5)}
.cell small{position:absolute;bottom:3px;right:5px;font-size:9px;opacity:.65}
.t1{background:#4A6B5A}.t2{background:#4A7BA7}.t3{background:#6B5AA7}
.t4{background:#8A5AA7}.t5{background:#A75A7B}.t6{background:#A77B3D}
.t7{background:#C9992B}.t8{background:#C0392B}

/* ---------- прочее ---------- */
#tabs{
  flex:none;display:flex;background:var(--bg2);border-top:1px solid rgba(255,255,255,.07);
  padding-bottom:env(safe-area-inset-bottom);
}
#tabs button{
  flex:1;background:0;border:0;color:var(--dim);padding:8px 2px 7px;font:inherit;font-size:10px;
  display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;position:relative;
}
#tabs button i{font-size:19px;font-style:normal;line-height:1}
#tabs button.active{color:var(--acc)}
.badge{position:absolute;top:4px;right:calc(50% - 22px);background:var(--warn);color:#fff;
  font-size:10px;font-weight:800;font-style:normal;min-width:17px;height:17px;border-radius:9px;
  display:none;place-items:center;padding:0 4px}
.badge.on{display:grid}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;z-index:50;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;width:92%}
.toast{background:#0E0819;border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:9px 14px;font-size:13px;font-weight:600;animation:tin .25s;max-width:100%}
.toast.err{border-color:var(--warn);color:#FFC9C9}
.toast.good{border-color:var(--acc);color:#BEF5E7}
@keyframes tin{from{opacity:0;transform:translateY(10px)}}

#modal{position:fixed;inset:0;background:rgba(8,4,18,.72);z-index:60;display:flex;align-items:flex-end}
/* авторский display побеждает [hidden] из стилей браузера — гасим явно,
   иначе пустая шторка накрывает игру и перехватывает все нажатия */
#modal[hidden]{display:none}
#modal .sheet{background:var(--bg2);width:100%;max-height:88vh;overflow-y:auto;
  border-radius:20px 20px 0 0;padding:18px 14px calc(18px + env(safe-area-inset-bottom));animation:up .22s}
@keyframes up{from{transform:translateY(40px);opacity:.5}}

.pool-item{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:12px;padding:10px;margin-bottom:8px}
.tree{display:flex;gap:6px;font-size:11px}
.tree .col{flex:1}
.tree .n{background:var(--card2);border-radius:8px;padding:5px 7px;margin-bottom:5px;line-height:1.3}
.tree .n b{display:block;font-size:12px}
.tree .t{color:var(--gold);font-weight:700;font-size:10px}
.chip{display:inline-block;background:var(--card2);border-radius:8px;padding:4px 9px;font-size:12px;margin:0 5px 5px 0}
.chip.have{background:#2C5A4A;color:#BEF5E7}
.chip.first{background:#5A4A2C;color:#F5E7BE}
.ev{font-size:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);color:var(--dim)}
.ev:last-child{border:0}
.center{text-align:center}
.big-num{font-size:26px;font-weight:800;color:var(--acc)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- арена ---------- */
.vs{display:flex;align-items:center;gap:8px;margin:8px 0}
.vs .side{flex:1;display:flex;gap:4px}
.vs .side.r{justify-content:flex-end}
.mini{width:44px;height:44px;background:var(--bg2);border-radius:9px;overflow:hidden;position:relative}
.mini svg{width:100%;height:100%}
.mini.dead{opacity:.28;filter:grayscale(1)}
.mini .hpb{position:absolute;left:2px;right:2px;bottom:2px;height:3px;background:#0008;border-radius:2px}
.mini .hpb i{display:block;height:100%;background:var(--acc);border-radius:2px}
.vsx{font-weight:800;color:var(--dim);font-size:12px}
.lg{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:20px;color:#fff}
.lb-row{display:flex;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
.lb-row:last-child{border:0}
.lb-row.me{background:rgba(61,214,176,.09);border-radius:8px;padding-left:6px;padding-right:6px}
.lb-row .pl{width:26px;font-weight:800;color:var(--dim)}
.seg{display:flex;gap:6px;margin:10px 0}
.seg button{flex:1;background:var(--card);border:0;color:var(--dim);border-radius:9px;padding:8px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.seg button.on{background:var(--acc);color:#08251E}
.pair{display:flex;align-items:center;gap:8px;padding:8px;background:var(--card);border-radius:10px;margin-bottom:6px;font-size:12px}
.pair .s{width:22px;font-weight:800;color:var(--dim)}
.pair .grow{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair.mypair{border:1px solid var(--acc)}
.pair.done{opacity:.55}
.tick{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--acc);margin-right:3px}
.tick.off{background:#4A3D69}
.battle-log{max-height:210px;overflow-y:auto;font-size:12px;background:var(--bg);border-radius:10px;padding:9px;margin:9px 0}
.battle-log div{padding:2px 0;color:var(--dim)}
.battle-log .cr{color:var(--gold);font-weight:700}
.battle-log .dn{color:var(--warn);font-weight:700}
.title-badge{display:inline-block;background:var(--gold);color:#3A2A00;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:6px;margin:2px 3px 0 0}

/* ---------- реакции и лимиты ---------- */
.reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.react{background:var(--bg2);border:0;border-radius:20px;padding:3px 8px;font-size:13px;
  color:var(--ink);cursor:pointer;line-height:1.2}
.react.on{background:var(--card2);font-weight:700;cursor:default}
.lim{display:inline-block;background:var(--warn);color:#fff;border-radius:8px;
  padding:0 5px;font-size:10px;font-weight:800;margin-left:3px;vertical-align:1px}

/* ---------- карта-змейка ивента ---------- */
.snake{display:flex;align-items:center;gap:0;overflow-x:auto;padding:10px 0 4px;
  -webkit-overflow-scrolling:touch}
.node{flex:none;width:86px;background:var(--bg2);border-radius:11px;padding:8px 6px;
  text-align:center;border:1px solid transparent}
.node-label{font-size:11px;font-weight:700;margin-bottom:3px}
.node-rew{font-size:10px;color:var(--dim);min-height:24px;line-height:1.2}
.node-cost{font-size:12px;font-weight:800;margin-top:4px;color:var(--dim)}
.node.can{border-color:var(--acc);cursor:pointer}
.node.can .node-cost{color:var(--acc)}
.node.open{background:#2C5A4A}.node.open .node-cost{color:#BEF5E7}
.node.shut{opacity:.45}
.link{flex:none;width:14px;height:2px;background:#3A2C58}

/* ---------- стадии работы и цели ---------- */
.stages{display:flex;gap:8px;margin:9px 0 4px;flex-wrap:wrap}
.stage{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--dim)}
.stage i{width:8px;height:8px;border-radius:50%;background:#3A2C58;flex:none}
.stage.done{color:#BEF5E7}.stage.done i{background:var(--acc2)}
.stage.now{color:var(--acc);font-weight:700}
.stage.now i{background:var(--acc);animation:stagePulse 1.2s ease-in-out infinite}
@keyframes stagePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.5}}

.goal{display:flex;flex-direction:column;line-height:1.15}
.goal b{font-size:13px;font-weight:700}
.goal-n{font-size:11px;color:var(--acc);font-weight:700}

.plus{margin-left:4px;width:18px;height:18px;border-radius:50%;border:0;padding:0;
  background:var(--acc);color:#08251E;font-weight:900;font-size:13px;line-height:1;cursor:pointer}

/* ---------- живые существа ---------- */
/* Идлы важнее эффектов: существо должно дышать, моргать и вздрагивать
   от тапа. Всё держится на transform, чтобы не заставлять браузер
   пересчитывать раскладку на каждом кадре. */
.od * { transform-box: fill-box; transform-origin: center }

.od-alive .od-core   { animation: odBreathe 3.6s ease-in-out infinite }
.od-alive .od-eyes   { animation: odBlink 5.4s ease-in-out infinite }
.od-alive .od-tail   { transform-origin: 60% 40%; animation: odSway 2.9s ease-in-out infinite }
.od-alive .od-ears   { animation: odEars 4.7s ease-in-out infinite }
.od-alive .od-extra  { animation: odWobble 3.3s ease-in-out infinite }
.od-alive .od-float  { animation: odBob 2.6s ease-in-out infinite }
.od-alive .od-shadow { animation: odShadow 2.6s ease-in-out infinite }
.od-alive .od-glow,
.od-alive .od-aura   { animation: odPulse 2.4s ease-in-out infinite }

@keyframes odBreathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.028,0.985)} }
@keyframes odBlink   { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }
@keyframes odSway    { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(6deg)} }
@keyframes odEars    { 0%,88%,100%{transform:rotate(0)} 93%{transform:rotate(-4deg)} }
@keyframes odWobble  { 0%,100%{transform:rotate(-2.5deg)} 50%{transform:rotate(2.5deg)} }
@keyframes odBob     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes odShadow  { 0%,100%{transform:scaleX(1);opacity:.12} 50%{transform:scaleX(.86);opacity:.08} }
@keyframes odPulse   { 0%,100%{opacity:.28} 50%{opacity:.42} }

/* реакция на тап: сжатие и отскок — существо заметило, что его трогают */
.portrait.poke .od-core { animation: odPoke .42s cubic-bezier(.34,1.56,.64,1) }
@keyframes odPoke {
  0%{transform:scale(1)} 28%{transform:scale(1.14,.84) translateY(4px)}
  60%{transform:scale(.94,1.08) translateY(-3px)} 100%{transform:scale(1)}
}

/* появление на свет: и из кокона, и от сведения */
.portrait.born .od { animation: odBorn .7s cubic-bezier(.2,1.4,.4,1) }
@keyframes odBorn {
  0%{transform:scale(.2) rotate(-14deg);opacity:0}
  55%{transform:scale(1.12) rotate(4deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}

/* кокон дрожит перед открытием */
.cell.cracking { animation: odCrack .5s ease-in-out }
@keyframes odCrack {
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-3px) rotate(-3deg)}
  35%{transform:translateX(3px) rotate(3deg)} 55%{transform:translateX(-2px) rotate(-2deg)}
  75%{transform:translateX(2px) rotate(1deg)}
}

/* слияние: две клетки схлопываются в одну */
.cell.merged { animation: odMerge .45s cubic-bezier(.3,1.5,.5,1) }
@keyframes odMerge {
  0%{transform:scale(.5);filter:brightness(2)} 60%{transform:scale(1.18)}
  100%{transform:scale(1);filter:none}
}

@media (prefers-reduced-motion: reduce) {
  .od-alive *, .portrait.poke .od-core, .portrait.born .od,
  .cell.cracking, .cell.merged { animation: none !important }
}

/* ---------- смотритель приюта ---------- */
.keeper{display:flex;gap:10px;background:linear-gradient(135deg,#2C5A4A,#1F4438);
  border-left:3px solid var(--acc);border-radius:12px;padding:11px 12px;margin-bottom:11px}
.keeper-face{width:38px;height:38px;flex:none;border-radius:50%;background:var(--bg2);
  display:grid;place-items:center;font-size:20px}
.keeper-who{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--acc)}
.keeper-say{font-size:13px;line-height:1.4;color:#DFF7EF;margin-top:2px}

/* заблокированные вкладки видны с замком, а не спрятаны */
#tabs button.locked{opacity:.4}
#tabs button.locked i::after{content:'🔒';position:absolute;font-size:10px;margin-left:-6px;margin-top:6px}
#tabs button.locked i{position:relative}

/* ---------- онбординг ---------- */
/* До выбора первого существа лишнего на экране быть не должно:
   ни кошельков, ни вкладок — только три кандидата. */
body.onboarding #topbar,
body.onboarding #tabs{display:none}
.onb-hi{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.onb-pick{cursor:pointer;border:1px solid transparent;transition:.12s}
.onb-pick:active{transform:scale(.99)}
.coach{background:linear-gradient(135deg,#2C5A4A,#1F4438);border-left:3px solid var(--acc);
  border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px;font-weight:600;color:#BEF5E7}

/* ---------- витрина ---------- */
.dem-row{display:flex;align-items:center;gap:7px;padding:5px 0}
.dem-bar{flex:1;height:6px;background:#1B1230;border-radius:4px;overflow:hidden;min-width:30px}
.dem-bar i{display:block;height:100%;background:var(--acc);border-radius:4px}
.spark{display:flex;align-items:flex-end;gap:3px;height:52px;margin-bottom:6px}
.spark i{flex:1;background:var(--acc2);border-radius:3px 3px 0 0;min-height:4px}

/* ---------- подсказки перед сведением ---------- */
.hint{font-size:12px;line-height:1.35;padding:4px 0 4px 14px;position:relative;color:var(--dim)}
.hint::before{content:'';position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--dim)}
.hint.good{color:#BEF5E7}.hint.good::before{background:var(--acc)}
.hint.bad{color:#FFC9C9}.hint.bad::before{background:var(--warn)}

/* ---------- скины ---------- */
.skin-row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;
  padding:11px;margin-bottom:7px;border:1px solid transparent;cursor:pointer}
.skin-row.on{border-color:var(--acc)}
.skin-row.locked{opacity:.5;cursor:default}

/* ---------- сезон и магазин ---------- */
.track{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch}
.lvl{flex:none;width:76px;background:var(--card);border-radius:11px;padding:7px 5px;text-align:center;font-size:11px}
.lvl.on{background:var(--card2)}
.lvl .n{font-weight:800;font-size:13px;margin-bottom:5px}
.lvl .rw{background:var(--bg);border-radius:7px;padding:5px 3px;margin-bottom:4px;line-height:1.25;min-height:38px;
  display:flex;align-items:center;justify-content:center}
.lvl .rw.can{background:var(--acc);color:#08251E;font-weight:700;cursor:pointer}
.lvl .rw.got{opacity:.4}
.lvl .rw.locked{opacity:.5}
.lvl .rw.paid{border:1px solid var(--gold)}
.tier{background:var(--card);border-radius:12px;padding:12px;margin-bottom:8px;position:relative}
.tier.pop{border:1px solid var(--acc)}
.tier .tag{position:absolute;top:-8px;right:12px;background:var(--acc);color:#08251E;
  font-size:10px;font-weight:800;padding:2px 8px;border-radius:8px}
.tier .tag.save{background:var(--gold);color:#3A2A00;right:auto;left:12px}
.tier .price{font-size:19px;font-weight:800}
.tier .day{color:var(--acc);font-weight:700}
.pass-on{background:linear-gradient(135deg,#3A2866,#2E1F52);border:1px solid var(--gold)}
.shop-item{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:11px;padding:10px;margin-bottom:7px}
.star{color:var(--gold);font-weight:800}

/* Витрина для тех, кто открыл адрес в обычном браузере.
   Прячем игровой каркас: пустые вкладки и нули в шапке читаются как поломка. */
body.landing #tabs, body.landing #topbar { display: none }
.land{text-align:center;padding:28px 20px 40px;max-width:520px;margin:0 auto}
.land-art{display:flex;justify-content:center;margin-bottom:8px}
.land h1{font-size:34px;letter-spacing:.16em;margin:4px 0 10px}
.land-say{color:var(--muted);line-height:1.55;margin:0 auto 22px;max-width:400px}
/* На витрине кнопка — ссылка, а не button: она уводит на другой адрес.
   Правила кнопок привязаны к тегу button, поэтому повторяем их здесь. */
a.btn.big{
  display:inline-block;font-size:17px;font-weight:700;padding:14px 30px;
  border-radius:13px;background:var(--acc);color:#08251E;text-decoration:none;
  transition:transform .08s;
}
a.btn.big:active{transform:scale(.97)}
.land-note{font-size:13px;margin-top:18px}
.land-legal{margin-top:26px;font-size:13px}
.land-legal a{color:var(--muted)}
.land-legal summary{cursor:pointer;color:var(--muted);font-size:13px;margin-top:26px}
.land-legal-body{text-align:left;margin-top:14px}

/* Предложение ролика. Намеренно тише соседних кнопок: это дополнительный
   путь, а не основной, и он не должен перетягивать внимание с бесплатного. */
.adoffer{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}
.adoffer-note{color:var(--muted);font-size:11px;margin-top:5px;text-align:center;line-height:1.4}