/* ===== ЗвероБашня / Critter Tower — UI ===== */
:root{
  --pink:#FF5D8F; --orange:#FF9F43; --yellow:#FFC93C; --green:#6BCB77;
  --teal:#4ECDC4; --blue:#4D96FF; --purple:#9B5DE5;
  --cream:#FFF6E9; --ink:#3A3142; --sky:#7ED6FF;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;overflow:hidden;background:var(--sky);
  font-family:'Trebuchet MS','Comic Sans MS','Chalkboard SE','Segoe UI',ui-rounded,sans-serif;
  touch-action:none;overscroll-behavior:none;position:fixed;width:100%}
#game{position:fixed;inset:0;display:block;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none;z-index:5}
#ui::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%,transparent 62%,rgba(40,30,60,.16) 100%)}
.svg-ico{width:1.15em;height:1.15em;vertical-align:-.2em;display:inline-block}
button{font-family:inherit;border:none;cursor:pointer}
.coin-ico{display:inline-block;width:1em;height:1em;border-radius:50%;vertical-align:-.12em;
  background:radial-gradient(circle at 35% 35%,#FFE066,#FFC93C 60%,#E8A020);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}

/* ---------- загрузка ---------- */
.boot{position:fixed;inset:0;z-index:99;background:linear-gradient(#7ED6FF,#DFF6FF);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.boot-crit{width:96px;height:80px;background:var(--orange);border-radius:34px;position:relative;animation:bob 1s ease-in-out infinite}
.boot-crit span{position:absolute;top:30px;width:16px;height:16px;background:#fff;border-radius:50%}
.boot-crit span::after{content:'';position:absolute;inset:4px;background:var(--ink);border-radius:50%}
.boot-crit span:nth-child(1){left:22px}.boot-crit span:nth-child(2){right:22px}
.boot-txt{color:var(--ink);font-weight:900;font-size:20px;opacity:.7}
@keyframes bob{0%,100%{transform:translateY(0) scale(1.08,.94)}50%{transform:translateY(-16px) scale(.96,1.06)}}

/* ---------- экраны ---------- */
.screen{position:absolute;inset:0;display:none;pointer-events:none}
.screen.active{display:block}
.panel-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(58,49,66,.42);pointer-events:auto;padding:12px;
  padding-top:calc(12px + var(--sat));padding-bottom:calc(12px + var(--sab))}
.card{background:var(--cream);border:4px solid #fff;border-radius:28px;width:min(94vw,430px);
  max-height:calc(100vh - 30px - var(--sat) - var(--sab));
  max-height:calc(100dvh - 30px - var(--sat) - var(--sab));
  overflow-y:auto;padding:20px 16px;
  box-shadow:0 12px 0 rgba(0,0,0,.12),0 24px 60px rgba(0,0,0,.25);
  animation:pop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop{from{transform:scale(.75);opacity:0}}.card h2{color:var(--ink);text-align:center;font-size:26px;font-weight:900;margin-bottom:12px}
.card::-webkit-scrollbar{width:0}

/* ---------- кнопки ---------- */
.btn{display:block;width:100%;padding:15px 20px;margin:8px 0;border-radius:22px;
  font-size:20px;font-weight:900;color:#fff;letter-spacing:.5px;text-align:center;
  background:linear-gradient(180deg,#6FAAFF,var(--blue) 55%,#3D7EE0);
  box-shadow:0 6px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;
  transition:transform .06s,box-shadow .06s;pointer-events:auto}
.btn.big::after{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shine 2.8s ease-in-out infinite}
@keyframes shine{0%,60%{left:-70%}100%{left:130%}}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.btn.big{font-size:26px;padding:18px}
.btn.pink{background:linear-gradient(180deg,#FF8AAE,var(--pink) 55%,#E04477)}
.btn.green{background:linear-gradient(180deg,#8ADD94,var(--green) 55%,#54AA60)}
.btn.orange{background:linear-gradient(180deg,#FFBC72,var(--orange) 55%,#E5842A)}
.btn.purple{background:linear-gradient(180deg,#B57FF0,var(--purple) 55%,#8244CC)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(0,0,0,.12)}
.btn.small{font-size:14px;padding:10px 12px;width:auto;display:inline-block}
.btn.ad .svg-ico{margin-right:.3em}
.btn:disabled{filter:grayscale(.7);opacity:.65;transform:none}
.btn-row{display:flex;gap:10px}.btn-row .btn{flex:1}

/* ---------- меню ---------- */
#scr-menu .inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding-top:calc(24px + var(--sat));padding-bottom:calc(18px + var(--sab))}
.logo{font-size:min(13vw,58px);font-weight:900;text-align:center;line-height:1;
  color:#fff;
  text-shadow:0 2px 0 #FFD34D,0 4px 0 #F5A623,
    -2px -2px 0 #5B4B8A,2px -2px 0 #5B4B8A,-2px 2px 0 #5B4B8A,2px 2px 0 #5B4B8A,
    0 7px 0 #5B4B8A,0 12px 18px rgba(58,49,66,.4);
  animation:logoB 2.6s ease-in-out infinite;pointer-events:none}
.logo small{display:block;font-size:.32em;margin-top:8px;color:#FFF;letter-spacing:5px;
  text-shadow:-1px -1px 0 #E8578A,1px -1px 0 #E8578A,-1px 1px 0 #E8578A,1px 1px 0 #E8578A,0 3px 0 rgba(58,49,66,.3)}
@keyframes logoB{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.05) rotate(1deg)}}
.menu-spacer{flex:1}
.menu-bottom{width:min(92vw,380px);margin:0 auto;pointer-events:auto}
.menu-stats{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.stat{background:rgba(255,255,255,.9);border-radius:16px;padding:8px 12px;font-weight:900;color:var(--ink);font-size:16px;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.goal-bar{background:rgba(255,255,255,.65);border-radius:14px;height:26px;position:relative;overflow:hidden;margin-bottom:12px}
.goal-fill{position:absolute;inset:0;width:0%;background:linear-gradient(90deg,var(--teal),var(--green));border-radius:14px;transition:width .5s}
.goal-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--ink)}
.nav-row{display:flex;gap:8px;margin-top:10px}
.nav-btn{flex:1;background:rgba(255,255,255,.92);border-radius:16px;padding:10px 2px;font-size:11.5px;font-weight:900;
  color:var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.12);text-align:center}
.nav-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.12)}
.nav-btn .ico{display:block;margin-bottom:2px;line-height:0}
.nav-btn .ico .svg-ico{width:24px;height:24px}

/* ---------- свинка-копилка ---------- */
.piggy{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.9);border-radius:16px;
  padding:6px 8px;box-shadow:0 4px 0 rgba(0,0,0,.1);flex:1;min-width:150px}
.pig-ico{width:34px;height:34px}
.pig-ico canvas{width:100%;height:100%;display:block}
.pig-bar{flex:1;height:12px;background:#EFE6D8;border-radius:7px;overflow:hidden}
.pig-fill{height:100%;width:0%;background:linear-gradient(90deg,#FFB3C6,#FF5D8F);border-radius:7px;transition:width .4s}
.pig-btn{background:var(--yellow);color:var(--ink);border-radius:12px;font-weight:900;font-size:12px;
  padding:6px 8px;box-shadow:0 3px 0 rgba(0,0,0,.15)}
.pig-btn:disabled{filter:none;opacity:.85;background:#fff}

/* ---------- HUD ---------- */
#scr-hud{padding-top:calc(10px + var(--sat))}
.hud-top{display:flex;align-items:flex-start;justify-content:space-between;padding:0 14px}
.hud-ht{text-align:center;color:#fff;font-weight:900;font-size:44px;line-height:1;text-shadow:0 4px 0 rgba(58,49,66,.3);min-width:110px}
.hud-ht small{display:block;font-size:12px;letter-spacing:2px;opacity:.9}
.hud-coins{background:rgba(255,255,255,.92);border-radius:16px;padding:8px 14px;font-weight:900;color:var(--ink);font-size:18px;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.hud-pause{position:absolute;left:14px;top:calc(64px + var(--sat));width:46px;height:46px;border:none;border-radius:16px;
  background:rgba(255,255,255,.92);box-shadow:0 4px 0 rgba(0,0,0,.1);cursor:pointer;pointer-events:auto;
  display:flex;align-items:center;justify-content:center;padding:8px}
.hud-pause .svg-ico{width:100%;height:100%}
.hud-goal{width:110px}
.hud-goal .goal-bar{margin:0;height:22px}
.hud-goal .goal-lbl{font-size:11px}
#hud-combo{position:absolute;top:26%;left:0;right:0;text-align:center;pointer-events:none;
  font-size:44px;font-weight:900;color:var(--yellow);text-shadow:0 4px 0 rgba(58,49,66,.35)}
#hud-combo.pop{animation:comboP .3s cubic-bezier(.34,1.8,.64,1)}
@keyframes comboP{0%{transform:scale(.4)}100%{transform:scale(1)}}
#h-glove{font-size:16px;margin-top:4px;min-height:20px}

/* ---------- итоги ---------- */
.go-score{text-align:center;margin:6px 0 2px}
.go-score b{font-size:52px;color:var(--ink);font-weight:900}
.go-score small{display:block;color:var(--ink);opacity:.6;font-weight:900;font-size:13px;letter-spacing:2px}
.go-rec{text-align:center;color:var(--pink);font-weight:900;font-size:19px;margin:4px 0;animation:recP .5s infinite alternate}
@keyframes recP{to{transform:scale(1.08)}}
.go-coins{text-align:center;font-size:24px;font-weight:900;color:var(--orange);margin:8px 0}

/* ---------- магазин / зверинец ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shop-it{background:#fff;border-radius:18px;padding:10px 6px;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.1);pointer-events:auto;position:relative}
.shop-it canvas{width:64px;height:64px}
.shop-it .nm{font-size:12px;font-weight:900;color:var(--ink);margin-top:2px}
.shop-it .pr{font-size:13px;font-weight:900;color:var(--orange);margin-top:3px;display:flex;align-items:center;justify-content:center;gap:4px}
.shop-it.owned .pr{color:var(--green)}
.zoo-it{animation:zooHop 1.6s ease-in-out infinite}
.zoo-it:nth-child(2n){animation-delay:.35s}
@keyframes zooHop{0%,100%{transform:translateY(0)}40%{transform:translateY(-7px)}}
.zoo-it .heart{position:absolute;top:6px;right:8px;font-size:18px;opacity:0;transform:translateY(8px);transition:all .6s}
.zoo-it .heart.on{opacity:1;transform:translateY(-14px)}
.zoo-it.boing canvas{animation:boing .45s cubic-bezier(.34,1.8,.64,1)}
@keyframes boing{40%{transform:scale(1.25,.7) translateY(6px)}70%{transform:scale(.8,1.25) translateY(-8px)}}
.shakeX{animation:shk .3s}
@keyframes shk{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pips{display:flex;gap:5px;margin-top:6px}
.pip{width:16px;height:16px;border-radius:50%;background:#EFE6D8}
.pip.on{background:var(--teal)}

/* ---------- квесты ---------- */
.q-card{background:#fff;border-radius:18px;padding:12px 14px;margin:8px 0;box-shadow:0 4px 0 rgba(0,0,0,.1)}
.q-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.q-name{font-weight:900;color:var(--ink);font-size:14px;flex:1}
.q-name small{opacity:.65;font-weight:900}
.q-bar{height:14px;background:#EFE6D8;border-radius:8px;margin-top:8px;overflow:hidden}
.q-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--orange),var(--yellow));border-radius:8px;transition:width .4s}
.streak-row{display:flex;justify-content:space-between;align-items:center}
.streak-fire{font-size:15px;font-weight:900;color:var(--ink)}

/* ---------- топ ---------- */
.lb-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 12px;margin:6px 0;font-weight:900;color:var(--ink)}
.lb-row.me{background:linear-gradient(90deg,#FFE3EF,#FFF6E9);outline:3px solid var(--pink)}
.lb-rank{width:34px;text-align:center;color:var(--purple);font-size:17px}
.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.lb-score{color:var(--orange)}
.lb-empty{text-align:center;color:var(--ink);opacity:.6;font-weight:900;padding:16px 8px}

/* ---------- настройки ---------- */
.set-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:16px;
  padding:12px 14px;margin:8px 0;box-shadow:0 4px 0 rgba(0,0,0,.08)}
.set-row b{color:var(--ink);font-size:16px}

/* ---------- тост ---------- */
#toast{position:absolute;left:50%;bottom:calc(24px + var(--sab));transform:translateX(-50%) translateY(80px);
  background:var(--ink);color:#fff;font-weight:900;font-size:15px;padding:12px 22px;border-radius:18px;
  opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;z-index:20}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- малые экраны ---------- */
@media (max-height:480px){
  .logo{font-size:32px}.hud-ht{font-size:32px}
  .card h2{font-size:20px}.btn.big{font-size:20px;padding:12px}
}
@media (max-width:340px){
  .nav-btn{font-size:10px;padding:8px 1px}
}