/* ==========================================================================
   Котострофа — экраны: мультик, меню, карта, окна
   ========================================================================== */

/* ---------------- мультик ---------------- */
#scr-intro { z-index: 6; }
#intro-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#intro-skip { position: absolute; right: 12px; top: 12px; z-index: 3; display: none; }
#intro-skip.show { display: flex; animation: skipIn .5s var(--spring) both .3s; }
@keyframes skipIn { from { opacity: 0; transform: translateX(60px) rotate(8deg); } }

/* ---------------- главное меню ---------------- */
#scr-menu { z-index: 4; }
#menuIn { position: absolute; left: 0; top: 0; width: 390px; height: 700px; transform-origin: 0 0; }
#menuIn::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; pointer-events: none;
  background: linear-gradient(180deg, rgba(43, 18, 64, .45), rgba(43, 18, 64, 0));
}
#menuIn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; pointer-events: none;
  background: linear-gradient(0deg, rgba(43, 18, 64, .55), rgba(43, 18, 64, 0));
}
.m-top { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; display: flex; align-items: center; justify-content: space-between; animation: dropIn .5s var(--spring) both; }
.m-top-r { display: flex; gap: 8px; }
.m-top .coin { width: 46px; height: 46px; }
.m-top .coin svg { width: 28px; height: 28px; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-60px); } }
.m-logo { position: absolute; left: 0; right: 0; top: 70px; z-index: 3; display: flex; flex-direction: column; align-items: center; animation: logoDrop .9s var(--spring) both .1s; }
.m-logo .logo { animation: logoWobble 3.4s ease-in-out infinite 1s; }
.logo.big { font-size: 44px; }
@keyframes logoDrop { 0% { opacity: 0; transform: translateY(-220px) scale(.6) rotate(-10deg); } 60% { opacity: 1; transform: translateY(10px) scale(1.06) rotate(2deg); } 100% { transform: none; } }
@keyframes logoWobble { 0%, 100% { transform: rotate(-1.5deg) scale(1); } 50% { transform: rotate(1.5deg) scale(1.03); } }
.m-tag {
  margin-top: 12px; padding: 6px 14px; font: 700 14px/1.1 var(--ft); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(180deg, #ff7ab8, #ff4f9a 55%, #c81e6a); border: 3px solid var(--ink); border-radius: 14px 10px 16px 12px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--ink); transform: rotate(-2deg);
}
#m-guest { position: absolute; left: 50%; top: 186px; z-index: 3; transform: translateX(-50%); width: max-content; max-width: 330px; }
.m-side { position: absolute; top: 228px; z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.m-left { left: 10px; }
.m-right { right: 10px; }
.m-left .side-btn { animation: slideL .55s var(--spring) both; }
.m-right .side-btn { animation: slideR .55s var(--spring) both; }
.m-side .side-btn:nth-child(1) { animation-delay: .25s; transform: rotate(-3deg); }
.m-side .side-btn:nth-child(2) { animation-delay: .35s; transform: rotate(2deg); }
.m-side .side-btn:nth-child(3) { animation-delay: .45s; transform: rotate(-2deg); }
@keyframes slideL { from { opacity: 0; translate: -120px 0; } }
@keyframes slideR { from { opacity: 0; translate: 120px 0; } }
.side-btn .badge {
  position: absolute; right: -8px; top: -8px; width: 22px; height: 22px; border-radius: 50%; display: none;
  font: 400 14px/18px var(--fd); color: #fff; text-align: center; font-style: normal;
  background: linear-gradient(180deg, #ff8a7a, #ff2d2d 60%, #b80d0d); border: 2px solid var(--ink);
  animation: badgeBob 1s ease-in-out infinite;
}
.side-btn.has-badge .badge { display: block; }
#m-bubble { left: 50%; top: 250px; margin-left: -100px; width: 200px; }
.m-bottom { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.m-bottom #m-play { width: 262px; font-size: 27px; padding: 0 18px; animation: playIn .7s var(--spring) both .5s, playPulse 1.6s ease-in-out infinite 1.2s; }
@keyframes playIn { from { opacity: 0; transform: translateY(80px) scale(.5); } }
.m-row { display: flex; gap: 10px; animation: dropUp .6s var(--spring) both .6s; }
.m-row .btn { min-width: 150px; }
@keyframes dropUp { from { opacity: 0; transform: translateY(60px); } }
#m-privacy { animation: dropUp .6s var(--spring) both .7s; font-size: 13px; }
.m-progress {
  display: flex; align-items: center; gap: 8px; padding: 4px 12px; font: 700 14px/1 var(--ft); color: #fff; text-shadow: 0 2px 0 var(--ink);
  background: rgba(43, 18, 64, .55); border-radius: 12px; animation: dropUp .6s var(--spring) both .45s;
}
.m-progress svg { width: 20px; height: 20px; }

/* ---------------- карта уровней ---------------- */
#scr-levels { z-index: 5; background: linear-gradient(180deg, #ffcf5a 0%, #ff9a5a 40%, #ff6f9e 75%, #9a63ff 100%); }
#scr-levels::before { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background: url(../img/bg_tile.png); background-size: 200px 200px; }
#levelsIn { position: absolute; left: 0; top: 0; width: 390px; height: 700px; transform-origin: 0 0; display: flex; flex-direction: column; }
.lv-top { position: relative; z-index: 3; flex: none; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.ribbon-title {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px; font: 400 20px/1 var(--fd); color: #fff;
  text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  background: linear-gradient(180deg, #a6fff0, #13c4b0 55%, #078a7c); border: 3px solid var(--ink); border-radius: 14px 10px 16px 10px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), 0 4px 0 var(--ink); transform: rotate(-1.5deg);
}
.ribbon-title svg { width: 28px; height: 28px; }
.star-plate { padding-right: 12px; font-size: 17px; }
#lv-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 6px 0 40px; }
#lv-scroll::-webkit-scrollbar { display: none; }
#lv-list { display: flex; flex-direction: column; gap: 22px; padding: 0 12px; }
.lv-sec {
  position: relative; padding: 70px 10px 18px; border: 4px solid var(--ink); border-radius: 28px 22px 30px 20px;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, var(--l1), var(--l2));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .45), 0 6px 0 var(--ink), 0 12px 20px rgba(0, 0, 0, .3);
  animation: cascadeIn .5s var(--spring) both;
}
.lv-sec::before { content: ""; position: absolute; inset: 10px; border: 2.5px dashed rgba(255, 255, 255, .6); border-radius: 20px 14px 22px 12px; pointer-events: none; }
.lv-sec.locked { filter: saturate(.35) brightness(.85); }
.lv-head { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; align-items: center; gap: 10px; }
.lv-head svg.loc { width: 48px; height: 48px; flex: none; filter: drop-shadow(0 3px 0 rgba(43, 18, 64, .4)); }
.lv-head .nm { flex: 1; min-width: 0; font: 400 21px/1 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-head .nm small { display: block; margin-top: 4px; font: 700 12px/1.1 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink); white-space: normal; }
.lv-head .st { display: flex; align-items: center; gap: 3px; padding: 4px 9px 4px 4px; font: 400 15px/1 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink);
  background: rgba(43, 18, 64, .55); border-radius: 12px; }
.lv-head .st svg { width: 22px; height: 22px; }
.lv-nodes { position: relative; display: flex; justify-content: space-around; align-items: flex-start; padding-top: 6px; }
.lv-path { position: absolute; left: 10%; right: 10%; top: 44px; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(43, 18, 64, .5) 0 10px, transparent 10px 20px); border-radius: 2px; }
.lv-node { position: relative; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lv-node:nth-child(odd) { margin-top: 18px; }
.lv-ball {
  position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center;
  font: 400 30px/1 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink);
  background:
    radial-gradient(60% 50% at 35% 28%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%),
    repeating-linear-gradient(35deg, rgba(255, 255, 255, .22) 0 4px, rgba(255, 255, 255, 0) 4px 10px),
    linear-gradient(180deg, var(--b1), var(--b2) 55%, var(--b3));
  border: 4px solid var(--ink); border-radius: 50%;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .2), 0 5px 0 var(--ink), 0 9px 14px rgba(0, 0, 0, .3);
  transition: transform .07s, box-shadow .07s;
}
.lv-node:active .lv-ball { transform: translateY(5px); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 var(--ink); }
.lv-node.cur .lv-ball { animation: nodePulse 1.2s ease-in-out infinite; }
.lv-node.cur::before { content: ""; position: absolute; left: 50%; top: 39px; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 65%); animation: glowPulse 1.2s ease-in-out infinite; }
@keyframes nodePulse { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
@keyframes glowPulse { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
.lv-node.locked .lv-ball { background: radial-gradient(60% 50% at 35% 28%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #b9a8cc, #8a7aa0 55%, #64547a); }
.lv-node.locked .lv-ball svg { width: 40px; height: 40px; }
.lv-node.shake .lv-ball { animation: lockShake .4s ease-in-out; }
@keyframes lockShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
.lv-stars { display: flex; gap: 1px; }
.lv-stars svg { width: 22px; height: 22px; }
.lv-stars svg:nth-child(2) { margin-top: -5px; }
.lv-name { width: 96px; font: 700 11.5px/1.1 var(--ft); text-align: center; color: #fff; text-shadow: 0 1.5px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.lv-unlock { position: absolute; inset: 0; pointer-events: none; }
.lv-node.just-open .lv-ball { animation: unlockBurst .9s var(--spring) both; }
@keyframes unlockBurst { 0% { transform: scale(.4) rotate(-40deg); } 60% { transform: scale(1.25) rotate(10deg); } 100% { transform: none; } }

/* ---------------- окно результата ---------------- */
.p-result { padding-top: 52px; }
.r-stars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 76px; margin-top: -6px; }
.r-star { position: relative; width: 62px; height: 62px; display: block; }
.r-star.big { width: 78px; height: 78px; }
.r-star svg { width: 100%; height: 100%; }
.r-star::before { content: ""; position: absolute; inset: 0; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 5.5l5 12 13.1 1-10 8.5 3.1 12.8L24 33 12.8 39.8l3.1-12.8-10-8.5 13.1-1z' fill='rgba(43,18,64,.3)' stroke='%232b1240' stroke-width='2.8' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.r-star svg { position: relative; opacity: 0; transform: scale(2.4) rotate(-90deg); }
.r-star.on svg { animation: starPop .5s var(--spring) forwards; }
@keyframes starPop { 0% { opacity: 0; transform: scale(2.4) rotate(-90deg); } 60% { opacity: 1; transform: scale(.85) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.r-owner { display: flex; align-items: center; gap: 8px; margin: 6px 4px 0; padding: 7px 10px 7px 6px; font: 700 14px/1.2 var(--ft);
  background: linear-gradient(180deg, #ffffff, #f3e8ff); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px; box-shadow: 0 3px 0 var(--ink); }
.r-owner svg { width: 40px; height: 40px; flex: none; }
.r-score { display: flex; flex-direction: column; align-items: center; margin-top: 10px; }
.r-score small { font: 700 13px/1 var(--ft); text-transform: uppercase; letter-spacing: .08em; }
.r-score b { font: 400 40px/1.05 var(--fd); color: #ff8a1f; text-shadow: 0 3px 0 var(--ink), 1.5px 0 0 var(--ink), -1.5px 0 0 var(--ink), 0 -1.5px 0 var(--ink); }
.r-new { display: none; margin-top: 2px; padding: 3px 10px; font: 400 15px/1 var(--fd); font-style: normal; color: #fff; text-shadow: 0 1.5px 0 var(--ink);
  background: linear-gradient(180deg, #ff9ad0, #ff4f9a 60%, #c81e6a); border: 2.5px solid var(--ink); border-radius: 10px; animation: badgeBob .8s ease-in-out infinite; }
.r-new.on { display: block; }
.r-line { margin-top: 4px; text-align: center; font: 700 13px/1.2 var(--ft); color: var(--ink-soft); }
.r-reason { display: none; margin: 8px 6px 0; padding: 7px 10px; text-align: center; font: 700 14px/1.2 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink);
  background: linear-gradient(180deg, #ff8a7a, #ff4a3d 60%, #c71f15); border: 3px solid var(--ink); border-radius: 14px; }
.r-reason.on { display: block; }
.r-tasks { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.r-task { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; font: 700 13px/1.15 var(--ft);
  background: rgba(255, 255, 255, .7); border: 2.5px solid var(--ink); border-radius: 12px; }
.r-task svg { width: 24px; height: 24px; flex: none; }
.r-task.no { opacity: .6; }
.r-task b { margin-left: auto; display: flex; align-items: center; gap: 2px; font: 400 13px/1 var(--fd); color: #e0661a; }
.r-task b svg { width: 18px; height: 18px; }
.r-reward { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 10px; font: 400 26px/1 var(--fd); color: #ffd23a; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.r-reward svg { width: 40px; height: 40px; }
#r-revive { display: none; margin: 10px auto 0; }
#r-revive.on { display: flex; }
.r-btns { margin-top: 16px; }
.r-btns .btn { flex: 1; }
.r-btns2 { margin-top: 12px; }
#daily-claim { margin: 0 auto; }
.r-btns .btn { padding: 0 14px; font-size: 18px; }
.r-btns .btn svg { width: 26px; height: 26px; }
#r-next.hidden, #r-revive.hidden { display: none; }
.p-result.lose { --p1: #f2eaff; --p2: #c8b6ec; }
.p-result.lose .r-score b { color: #ff6f9e; }

/* ---------------- финал ---------------- */
.fin-art { position: relative; width: 140px; height: 120px; margin: 0 auto; }
.fin-cat { position: absolute; left: 10px; top: 20px; width: 120px; height: 100px; animation: finBob 1.4s ease-in-out infinite; }
.fin-crown { position: absolute; left: 42px; top: -6px; width: 56px; height: 56px; animation: finCrown 1.4s ease-in-out infinite; }
@keyframes finBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes finCrown { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-10px) rotate(-6deg); } }
.fin-text { margin-top: 8px; text-align: center; font: 700 15px/1.3 var(--ft); }
.fin-rank { margin: 8px auto 0; width: max-content; padding: 6px 14px; font: 400 18px/1 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink);
  background: linear-gradient(180deg, #b886ff, #8a4cf0 55%, #6a33d6); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink); }

/* ---------------- брифинг ---------------- */
.p-brief { padding-top: 48px; }
.bf-loc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 3px solid var(--ink); border-radius: 16px 12px 18px 10px;
  background: linear-gradient(180deg, var(--l1, #ffd23a), var(--l2, #ff8a1f)); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .4), 0 4px 0 var(--ink);
  font: 400 18px/1.05 var(--fd); color: #fff; text-shadow: 0 2px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.bf-loc svg { width: 44px; height: 44px; flex: none; }
.bf-loc small { display: block; margin-top: 3px; font: 700 12.5px/1.15 var(--ft); text-shadow: 0 1.5px 0 var(--ink); }
.bf-stats { display: flex; gap: 8px; margin-top: 12px; }
.bf-stat { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 2px; background: linear-gradient(180deg, #ffffff, #ffeccc); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
.bf-stat svg { width: 30px; height: 30px; }
.bf-stat b { font: 400 17px/1.1 var(--fd); color: var(--ink); }
.bf-stat small { font: 700 11px/1 var(--ft); color: var(--ink-soft); }
.bf-haz { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.haz-chip { display: flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; font: 700 12.5px/1 var(--ft); color: #fff; text-shadow: 0 1.5px 0 var(--ink);
  background: linear-gradient(180deg, #ff8a7a, #ff4a3d 60%, #c71f15); border: 2.5px solid var(--ink); border-radius: 14px; }
.haz-chip.good { background: linear-gradient(180deg, #c9ff7a, #8ee03a 60%, #4f9e12); }
.haz-chip svg { width: 26px; height: 26px; }
.bf-tasks { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.bf-best { margin: 8px 0 12px; text-align: center; font: 700 13px/1.2 var(--ft); color: var(--ink-soft); }
#bf-go { width: 100%; }

/* ---------------- рейтинг ---------------- */
.lb-me { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 6px 10px 6px 6px; font: 700 14px/1 var(--ft);
  background: linear-gradient(180deg, #ffffff, #fff1c4); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink); }
.lb-me svg { width: 30px; height: 30px; }
.lb-me b { margin-left: auto; font: 400 17px/1 var(--fd); color: #ff8a1f; text-shadow: 0 1.5px 0 var(--ink); }
#lb-list { overflow-y: auto; max-height: 330px; display: flex; flex-direction: column; gap: 7px; padding: 2px 4px 8px; scrollbar-width: none; }
#lb-list::-webkit-scrollbar { display: none; }
.lb-row { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 10px; flex: none;
  background: linear-gradient(180deg, #ffffff, #f6ecff 60%, #e6d6fa); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); animation: cascadeIn .35s var(--spring) both; }
.lb-row.top-1 { background: linear-gradient(180deg, #fffbe0, #ffe27a 60%, #ffc83a); }
.lb-row.top-2 { background: linear-gradient(180deg, #ffffff, #e2e9f5 60%, #c3cfe2); }
.lb-row.top-3 { background: linear-gradient(180deg, #fff1e4, #ffcfa3 60%, #f0a46a); }
.lb-row.me { box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink), 0 0 0 3px #ff4f9a; }
.lb-medal { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font: 400 15px/1 var(--fd); color: var(--ink); }
.lb-medal svg { width: 36px; height: 36px; }
.lb-avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: 400 17px/1 var(--fd); color: #fff; text-shadow: 0 1.5px 0 var(--ink);
  background: linear-gradient(180deg, #ffb26a, #ff8a1f 60%, #d95f00); border: 2.5px solid var(--ink); }
.lb-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.1 var(--ft); }
.lb-score { flex-shrink: 0; font: 400 15px/1 var(--fd); color: #e0661a; text-shadow: 0 1px 0 #fff; }
.lb-empty { text-align: center; padding: 22px 10px; font: 700 15px/1.3 var(--ft); color: var(--ink-soft); }

/* ---------------- качалка ---------------- */
.shop-head { position: absolute !important; left: 16px; top: 18px; }
.shop-head .plate { height: 36px; font-size: 16px; }
.shop-head .plate svg { width: 28px; height: 28px; }
.tabs { display: flex; gap: 6px; margin: 8px 0 10px; }
.tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 42px; font: 700 13.5px/1 var(--ft); color: var(--ink);
  background: linear-gradient(180deg, #ffffff, #e9dcff 60%, #cdb6f2); border: 3px solid var(--ink); border-radius: 14px 14px 8px 8px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); transition: transform .07s; }
.tab svg { width: 24px; height: 24px; }
.tab.active { color: #fff; text-shadow: 0 1.5px 0 var(--ink); background: linear-gradient(180deg, #a6fff0, #13c4b0 55%, #078a7c); transform: translateY(-3px); }
.shop-list { overflow-y: auto; max-height: 370px; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 8px; scrollbar-width: none; }
.shop-list::-webkit-scrollbar { display: none; }
.shop-list.grid { display: grid; grid-template-columns: 1fr 1fr; }
.up-row { display: flex; align-items: center; gap: 8px; padding: 8px; flex: none;
  background: linear-gradient(180deg, #ffffff, #e9fffa 60%, #c4f2e8); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); animation: cascadeIn .35s var(--spring) both; }
.up-ico { width: 52px; height: 52px; flex: none; display: flex; align-items: center; justify-content: center; border: 3px solid var(--ink); border-radius: 14px;
  background: radial-gradient(70% 60% at 35% 30%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, var(--b1), var(--b2) 60%, var(--b3)); }
.up-ico svg { width: 38px; height: 38px; }
.up-info { flex: 1; min-width: 0; }
.up-info b { display: block; font: 400 15px/1.05 var(--fd); }
.up-info small { display: block; margin-top: 2px; font: 700 11.5px/1.15 var(--ft); color: var(--ink-soft); }
.pips { display: flex; gap: 3px; margin-top: 4px; }
.pips i { width: 14px; height: 9px; border: 2px solid var(--ink); border-radius: 3px; background: #e6dcf2; }
.pips i.on { background: linear-gradient(180deg, #e2ffa8, #8ee03a 60%, #4f9e12); }
.buy-btn { min-width: 74px; display: flex; align-items: center; justify-content: center; gap: 3px; height: 44px; padding: 0 8px; font: 400 15px/1 var(--fd); color: #fff;
  text-shadow: 0 1.5px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink);
  background: linear-gradient(180deg, #fff7b0, #ffd23a 50%, #e09a00); border: 3px solid var(--ink); border-radius: 14px 10px 14px 10px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 4px 0 var(--ink); transition: transform .07s, box-shadow .07s; }
.buy-btn svg { width: 22px; height: 22px; }
.buy-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.buy-btn.cant { filter: saturate(.3) brightness(.92); }
.buy-btn.max, .buy-btn.on { background: linear-gradient(180deg, #e2ffa8, #8ee03a 50%, #4f9e12); }
.buy-btn.use { background: linear-gradient(180deg, #c6ecff, #3fa8ff 50%, #1b6fd1); }
.skin-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px;
  background: linear-gradient(180deg, #ffffff, #fff1f8 60%, #ffd6ea); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); animation: cascadeIn .35s var(--spring) both; }
.skin-card.sel { box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink), 0 0 0 3px #13c4b0; }
.skin-card svg.face { width: 70px; height: 70px; }
.skin-card b { font: 400 14px/1.05 var(--fd); text-align: center; }
.skin-card small { font: 700 10.5px/1.1 var(--ft); color: var(--ink-soft); text-align: center; min-height: 24px; }
.skin-card .buy-btn { width: 100%; }

/* ---------------- награды ---------------- */
.ach-sum { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 10px; font: 700 14px/1 var(--ft); }
.ach-sum b { font: 400 18px/1 var(--fd); color: #ff4f9a; text-shadow: 0 1.5px 0 var(--ink); }
.ach-list { overflow-y: auto; max-height: 380px; display: flex; flex-direction: column; gap: 7px; padding: 2px 4px 8px; scrollbar-width: none; }
.ach-list::-webkit-scrollbar { display: none; }
.ach-row { display: flex; align-items: center; gap: 8px; padding: 7px; flex: none;
  background: linear-gradient(180deg, #ffffff, #fff0f6 60%, #ffd2e6); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); animation: cascadeIn .35s var(--spring) both; }
.ach-row.locked { background: linear-gradient(180deg, #f6f2fa, #e4dcee); }
.ach-row.locked .up-ico { filter: saturate(0) brightness(1.1); }
.ach-bar { position: relative; height: 10px; margin-top: 5px; border: 2px solid var(--ink); border-radius: 6px; background: #e6dcf2; overflow: hidden; }
.ach-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #ffc2dc, #ff4f9a); }
.ach-rew { display: flex; flex-direction: column; align-items: center; min-width: 50px; font: 400 13px/1 var(--fd); color: #e0661a; }
.ach-rew svg { width: 26px; height: 26px; }
.ach-row.done .ach-rew svg.chk { width: 32px; height: 32px; }

/* ---------------- настройки ---------------- */
.set-rows { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

/* ---------------- как играть ---------------- */
.howto-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 14px; }
.how-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px 8px;
  background: linear-gradient(180deg, #ffffff, #f2ffe0 60%, #d8f5b0); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px; box-shadow: 0 3px 0 var(--ink);
  animation: cascadeIn .4s var(--spring) both; }
.how-card svg.art { width: 130px; height: 92px; }
.how-card b { font: 400 14px/1.05 var(--fd); text-align: center; }
.how-card small { font: 700 11px/1.15 var(--ft); color: var(--ink-soft); text-align: center; }
.how-card .a-joy { animation: hJoy 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.how-card .a-cat { animation: hCat 1.6s ease-in-out infinite; }
.how-card .a-jump { animation: hJump 1.2s ease-in-out infinite; }
.how-card .a-paw { animation: hPaw 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 0% 50%; }
.how-card .a-mug { animation: hMug 1.4s ease-in infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.how-card .a-vac { animation: hVac 2.4s ease-in-out infinite; }
.how-card .a-bang { animation: hBang 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes hJoy { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(8px, -4px); } 50% { transform: translate(0, -8px); } 75% { transform: translate(-8px, -3px); } }
@keyframes hCat { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(14px, -6px); } 50% { transform: translate(0, -12px); } 75% { transform: translate(-14px, -5px); } }
@keyframes hJump { 0%, 100% { transform: translateY(0) scale(1.1, .9); } 15% { transform: translateY(0) scale(.9, 1.15); } 50% { transform: translateY(-30px) scale(.95, 1.05); } 85% { transform: translateY(0) scale(1.15, .85); } }
@keyframes hPaw { 0%, 30%, 100% { transform: rotate(0); } 45% { transform: rotate(-30deg) translateX(6px); } 60% { transform: rotate(0); } }
@keyframes hMug { 0%, 45% { transform: translate(0, 0) rotate(0); opacity: 1; } 75% { transform: translate(22px, 30px) rotate(110deg); opacity: 1; } 80%, 100% { transform: translate(22px, 34px) rotate(110deg); opacity: 0; } }
@keyframes hVac { 0%, 100% { transform: translateX(-26px); } 50% { transform: translateX(26px); } }
@keyframes hBang { 0%, 72% { opacity: 0; transform: scale(.2); } 80% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1); } }

/* ---------------- миска дня ---------------- */
.daily-sub { text-align: center; font: 700 14px/1.25 var(--ft); margin-bottom: 10px; }
.daily-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.d-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
  background: linear-gradient(180deg, #ffffff, #fff0f6 60%, #ffd2e6); border: 3px solid var(--ink); border-radius: 14px 10px 14px 10px; box-shadow: 0 3px 0 var(--ink); }
.d-cell:nth-child(7) { grid-column: span 2; }
.d-cell small { font: 700 11px/1 var(--ft); color: var(--ink-soft); }
.d-cell svg { width: 30px; height: 30px; }
.d-cell b { font: 400 15px/1 var(--fd); color: #e0661a; }
.d-cell.got { opacity: .55; }
.d-cell.got::after { content: ""; position: absolute; right: -6px; top: -6px; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ink);
  background: center / 70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"), linear-gradient(180deg, #8ee03a, #4f9e12); }
.d-cell.today { background: linear-gradient(180deg, #fffbe0, #ffe27a 60%, #ffc83a); animation: nodePulse 1.2s ease-in-out infinite; }

/* ---------------- подтверждение ---------------- */
.cf-text { margin-bottom: 16px; text-align: center; font: 700 16px/1.3 var(--ft); }
.p-small .row .btn { flex: 1; padding: 0 10px; font-size: 18px; }

/* ---------------- задачи (общие строки) ---------------- */
.task-line { display: flex; align-items: center; gap: 7px; padding: 4px 8px 4px 4px; font: 700 13px/1.15 var(--ft);
  background: rgba(255, 255, 255, .75); border: 2.5px solid var(--ink); border-radius: 12px; }
.task-line svg { width: 24px; height: 24px; flex: none; }
.pause-info { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

/* ---------------- задания дня и коллекция ---------------- */
.dm-title { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font: 400 18px/1 var(--fd); color: var(--ink); }
.dm-title svg { width: 28px; height: 28px; }
.dm-title small { margin-left: auto; font: 700 11px/1 var(--ft); color: var(--ink-soft); }
.dm-scroll { max-height: 230px; overflow-y: auto; scrollbar-width: none; }
.dm-scroll::-webkit-scrollbar { display: none; }
#dm-list { display: flex; flex-direction: column; gap: 7px; padding: 2px 2px 6px; }
.dm-row { display: flex; align-items: center; gap: 8px; padding: 7px; flex: none;
  background: linear-gradient(180deg, #ffffff, #fffbe6 60%, #ffeaa0); border: 3px solid var(--ink); border-radius: 16px 12px 16px 10px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); animation: cascadeIn .35s var(--spring) both; }
.dm-row.ready { background: linear-gradient(180deg, #f2ffe0, #c9ff7a 60%, #8ee03a); animation: cascadeIn .35s var(--spring) both, nodePulse 1.2s ease-in-out infinite .6s; }
.dm-row.claimed { opacity: .65; }
.dm-row .up-ico { width: 46px; height: 46px; }
.dm-row .up-ico svg { width: 32px; height: 32px; }
.dm-row .up-info small { margin-top: 3px; }
.coll-grid { max-height: 380px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 2px 2px 8px; scrollbar-width: none; }
.coll-grid::-webkit-scrollbar { display: none; }
.coll-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 7px;
  background: radial-gradient(80% 60% at 50% 35%, #ffffff, #ffe9f4 70%, #ffc6de); border: 3px solid var(--ink); border-radius: 14px 10px 14px 10px;
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 var(--ink); animation: cascadeIn .35s var(--spring) both; }
.coll-card img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(43, 18, 64, .25)); }
.coll-card b { font: 400 11.5px/1.05 var(--fd); text-align: center; min-height: 24px; display: flex; align-items: center; }
.coll-card small { font: 700 10px/1 var(--ft); color: var(--ink-soft); }
.coll-card.unknown { background: linear-gradient(180deg, #efe6fa, #d6c8ea); }
.coll-card.unknown img { filter: brightness(0) opacity(.35); }
#ov-ach .tabs { margin-top: 0; }

/* ---------------- комикс ---------------- */
.p-comic { --p1: #fffbe6; --p2: #ffe48a; --stitch: rgba(224, 154, 0, .55); --btn-c: #ff4f9a; width: 352px; }
.cm-panels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cm-panel { position: relative; border: 4px solid var(--ink); border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 4px 0 var(--ink); transform: rotate(var(--tilt, 0deg)); animation: cmIn .5s var(--spring) both; }
.cm-panel .cm-art { display: block; width: 100%; height: 118px; }
.cm-cap { position: absolute; left: 6px; top: 6px; max-width: 64%; padding: 4px 8px; font: 700 12.5px/1.15 var(--ft); color: var(--ink);
  background: #fff6c0; border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink); }
.cm-say { position: absolute; right: 8px; bottom: 8px; max-width: 58%; padding: 5px 10px; font: 400 14px/1.1 var(--fd); color: var(--ink);
  background: #fff; border: 2.5px solid var(--ink); border-radius: 14px 14px 4px 14px; box-shadow: 2px 2px 0 var(--ink);
  animation: cmSay .4s var(--spring) both; animation-delay: inherit; }
.cm-pop { transform-box: fill-box; transform-origin: center; animation: cmPop .5s var(--spring) both; }
#cm-go { width: 100%; }
.lv-sec[data-loc] .lv-head { cursor: pointer; }
@keyframes cmIn { from { opacity: 0; transform: translateX(-60px) rotate(-8deg) scale(.8); } }
@keyframes cmPop { from { opacity: 0; transform: scale(.2) rotate(-25deg); } }
@keyframes cmSay { from { opacity: 0; transform: scale(.3) translateY(10px); } }