: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::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1px 1px at 78% 26%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1.5px 1.5px at 33% 62%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(1px 1px at 62% 78%, rgba(255,255,255,.24), transparent 60%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(0,0,0,.38) 100%);
}
#view > *{position:relative;z-index:1}
#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:19px;margin:2px 0 10px;font-weight:800;letter-spacing:.01em}
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;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.28)}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1;min-width:0}

/* Кнопка из макета — объёмная «конфета»: блик сверху, плотный низ,
   и она проседает при нажатии. Плоская заливка читалась как ссылка,
   а не как главное действие экрана. */
button.btn{
  border:0;border-radius:12px;padding:11px 14px;font:inherit;font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(180deg,#5BE7C4 0%,var(--acc) 45%,var(--acc2) 100%);
  color:#08251E;cursor:pointer;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #1E8C70, 0 5px 10px rgba(0,0,0,.35);
  transition:transform .07s, box-shadow .07s;
}
button.btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 #1E8C70, 0 2px 5px rgba(0,0,0,.3);
}
button.btn:disabled{
  background:#4A3D69;color:#8878A8;cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 3px 0 #2E2547;
}
button.btn.sec{
  background:linear-gradient(180deg,#4A3477 0%,var(--card2) 100%);color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 3px 0 #241943, 0 4px 8px rgba(0,0,0,.3);
}
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;
  border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.05)}
.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:9px;padding:4px 9px;font-size:12px;font-weight:700;
  border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.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:#39443E}.t2{background:#41564B}
.t3{background:#4A6B5A}.t4{background:#4A7BA7}.t5{background:#6B5AA7}
.t6{background:#8A5AA7}.t7{background:#A75A7B}.t8{background:#A77B3D}
.t9{background:#C9992B}.t10{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;transition:transform .12s}
/* Активная вкладка в макете не просто перекрашена — она приподнята
   на подсвеченной плашке. Без этого низ экрана читается как строка
   ссылок, а не как переключатель разделов. */
#tabs button.active{color:var(--acc);background:linear-gradient(180deg,rgba(61,214,176,.14),transparent 70%)}
#tabs button.active::before{content:'';position:absolute;top:0;left:18%;right:18%;height:2px;
  background:var(--acc);border-radius:0 0 3px 3px;box-shadow:0 0 8px rgba(61,214,176,.7)}
#tabs button.active i{transform:translateY(-1px) scale(1.08)}
.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} }

/* Редкие идлы (UX-9). Обаяние создаётся поведением, а не эффектами: существо,
   которое иногда зевает и чешется, кажется живым сильнее, чем то, которое
   ровно дышит. Классы вешаются на короткое время и снимаются — так они не
   мешают постоянным анимациям и не требуют вычислять фазы. */
.portrait.yawn .od-mouth { animation: odYawn 1.4s ease-in-out }
.portrait.yawn .od-eyes  { animation: odSquint 1.4s ease-in-out }
.portrait.scratch .od-limbs { transform-origin: 50% 20%; animation: odScratch 1.1s ease-in-out }
.portrait.scratch .od-core  { animation: odLean 1.1s ease-in-out }

@keyframes odYawn {
  0%,100%{transform:scaleY(1)} 30%,60%{transform:scaleY(2.4) translateY(1px)}
}
@keyframes odSquint {
  0%,100%{transform:scaleY(1)} 30%,60%{transform:scaleY(.35)}
}
@keyframes odScratch {
  0%,100%{transform:rotate(0)} 20%{transform:rotate(-13deg)} 40%{transform:rotate(-4deg)}
  60%{transform:rotate(-13deg)} 80%{transform:rotate(-4deg)}
}
@keyframes odLean {
  0%,100%{transform:rotate(0)} 50%{transform:rotate(2.5deg)}
}

/* реакция на тап: сжатие и отскок — существо заметило, что его трогают */
.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,
  .portrait.yawn *, .portrait.scratch *,
  .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;transition:.12s}
.onb-pick:active{transform:scale(.99);border-color:var(--acc);
  box-shadow:0 0 0 2px rgba(61,214,176,.45), 0 0 18px rgba(61,214,176,.28)}

/* Лицо существа в списках: та же ниша, что у процедурного бокса, но
   с картинкой во всю площадь. Пунктирная рамка означает портрет типажа —
   он общий для всех существ с этим характером, пока не нарисован свой. */
.face{width:92px;height:92px;flex:none;border-radius:12px;overflow:hidden;
  background:var(--bg2);border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face .portrait{width:100%;height:100%;border:0;box-shadow:none;border-radius:0}
.face.is-type{border:1px dashed rgba(168,150,201,.45)}
.face.big{width:150px;height:150px;border-radius:16px;margin:0 auto}
.face.born{box-shadow:inset 0 2px 6px rgba(0,0,0,.45), 0 0 22px rgba(61,214,176,.35)}

/* Нарисованный портрет кандидата. Вдвое крупнее процедурного бокса:
   на этом экране игрок выбирает существо по лицу, а не по цифрам. */
.pick-art{width:104px;height:104px;flex:none;border-radius:14px;overflow:hidden;
  background:var(--bg2);border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45)}
.pick-art img{width:100%;height:100%;object-fit:cover;display:block}
.pick-art .portrait{width:100%;height:100%;border:0;box-shadow:none;border-radius:0}
.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}

/* Поле ввода. Появилось для подтверждения удаления данных: там нужен именно
   ввод слова, а не галочка — необратимую операцию не запускают тапом. */
.fld{width:100%;background:var(--card);border:1px solid rgba(255,255,255,.14);border-radius:11px;
  padding:11px 12px;font:inherit;color:var(--ink)}
.fld::placeholder{color:var(--dim)}
.fld:focus{outline:none;border-color:var(--acc)}

/* Любое число объясняет себя по тапу (ECO-3). Нажимаемые числа помечены
   пунктиром: без этого игрок не догадается, что их можно трогать. */
.stat[data-act],.w[data-act]{cursor:pointer;border-bottom:1px dashed rgba(255,255,255,.22)}
.w[data-act]{border:0;border-bottom:1px dashed rgba(255,255,255,.22);border-radius:20px}

/* Ответы Смотрителя. Кнопок может быть две, и вторая — всегда вопрос:
   разговор должен иметь продолжение, а не только кнопку «понятно». */
.keeper-replies{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.keeper-replies .btn{flex:1 1 auto}

/* Характер существа: подпись рядом с редкостью и шкалы в разборе.
   Шкала растёт от середины в обе стороны — так видно и сторону, и силу. */
.char{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  margin-left:6px;background:var(--card2);color:var(--dim);cursor:pointer;
  border-bottom:1px dashed rgba(255,255,255,.22)}
/* На экране выбора плашка характера ничего не открывает: пунктир там
   обещал бы нажатие, которого нет. */
.char.flat{cursor:default;border-bottom:0}
/* Нейропортрет существа — обложка карточки: квадрат со скруглением,
   в отличие от круглой маски типажа ниже — это лицо конкретного существа. */
.hero-portrait{display:block;width:min(240px,70%);aspect-ratio:1;margin:0 auto;
  border-radius:16px;object-fit:cover;border:2px solid var(--card2);
  box-shadow:0 6px 18px rgba(0,0,0,.4)}
/* Портрет типажа: рамка пунктиром — видно, что обложка временная и общая. */
.hero-portrait.is-type{border-style:dashed;opacity:.92}
.portrait-note{font-size:11px;margin-top:6px}

/* Портрет типажа в разборе: круглый, чтобы читался маской характера,
   а не вторым обликом существа рядом с настоящим. */
.temper-face{display:block;width:132px;height:132px;margin:0 auto 10px;border-radius:50%;
  object-fit:cover;border:2px solid var(--card2);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.axis{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.axis-l,.axis-r{flex:0 0 80px;color:var(--dim)}
.axis-r{text-align:right}
.axis-bar{flex:1;position:relative;height:7px;background:#1B1230;border-radius:6px}
.axis-bar::before{content:'';position:absolute;left:50%;top:-2px;bottom:-2px;width:1px;
  background:rgba(255,255,255,.18)}
.axis-bar i{position:absolute;top:0;bottom:0;background:var(--acc);border-radius:6px}

/* Приметы — второй род признаков. Выглядят иначе, чем мутации, намеренно:
   мутация это то, с чем родился, примета — то, что нажил. Обводка вместо
   заливки читается как «нацарапано», а не «выдано». */
.muts.marks{margin-top:5px}
.mark{font-size:11px;font-weight:700;padding:3px 8px;border-radius:7px;cursor:pointer;
  background:transparent;color:#D9C89A;border:1px dashed rgba(240,201,60,.45)}