/* «Тапыши» — оформление концепта */
@font-face { font-family: 'Unbounded'; src: url('../fonts/Unbounded.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('../fonts/Nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --bg1: #4a2fe6; --bg2: #8b4ff2; --bg3: #ff7fb8;
  --ink: #2a1b5e; --ink2: #6b5c9a; --white: #fff;
  --gold1: #ffe066; --gold2: #ffb21f; --gold3: #e58a00;
  --green: #2fd897; --green2: #13b37a; --red: #ff5a72; --red2: #e2364f;
  --glass: rgba(255, 255, 255, .14); --glass2: rgba(255, 255, 255, .22); --line: rgba(255, 255, 255, .22);
  --r: 22px;
  --display: 'Unbounded', 'Nunito', system-ui, sans-serif;
  --text: 'Nunito', system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #1d1240; }
body { font-family: var(--text); color: #fff; font-weight: 700; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; }
svg { display: block; }
.pet .eh { display: none; } .pet.happy .eo { display: none; } .pet.happy .eh { display: inline; }

#app { position: relative; max-width: 430px; height: 100vh; height: 100dvh; margin: 0 auto; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #6a4bff 0%, rgba(106,75,255,0) 60%), linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 62%, #c25fe0 85%, var(--bg3) 120%); }
.bg-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-deco i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%); }
.bg-deco i:nth-child(1) { width: 220px; height: 220px; left: -80px; top: 90px; }
.bg-deco i:nth-child(2) { width: 160px; height: 160px; right: -50px; top: 320px; }
.bg-deco i:nth-child(3) { width: 90px; height: 90px; left: 40px; bottom: 150px; }
.bg-deco i:nth-child(4) { width: 14px; height: 14px; left: 300px; top: 140px; background: #fff; opacity: .5; }
.bg-deco i:nth-child(5) { width: 9px; height: 9px; left: 60px; top: 420px; background: #ffe066; opacity: .7; }
.bg-deco i:nth-child(6) { width: 11px; height: 11px; right: 40px; bottom: 260px; background: #fff; opacity: .4; }

#screen { position: absolute; inset: 0; overflow: clip; }
.scr { position: absolute; inset: 0; overflow: clip; display: flex; flex-direction: column; animation: scrIn .35s cubic-bezier(.2,.9,.3,1.2) both; }
.scr.scroll > * { flex-shrink: 0; }
.scr.scroll { overflow-x: hidden; overflow-y: auto; padding-bottom: calc(96px + var(--safe-b)); scrollbar-width: none; }
.scr.scroll::-webkit-scrollbar { display: none; }
@keyframes scrIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.pad { padding: 0 18px; }

h1, h2, h3, .disp { font-family: var(--display); margin: 0; letter-spacing: -.01em; }
h1 { font-size: 26px; font-weight: 800; line-height: 1.12; }
h2 { font-size: 20px; font-weight: 800; }
h3 { font-size: 15px; font-weight: 700; }
.muted { color: rgba(255,255,255,.72); font-weight: 700; }
.small { font-size: 13px; }

/* кнопки */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 58px; border-radius: 20px; width: 100%;
  font-family: var(--display); font-weight: 800; font-size: 16px; color: #4a2300; letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 5px 0 var(--gold3), 0 12px 24px rgba(40, 10, 90, .35), inset 0 2px 0 rgba(255,255,255,.6);
  transition: transform .08s, box-shadow .08s; position: relative; }
.btn:active, .btn.press { transform: translateY(4px); box-shadow: 0 1px 0 var(--gold3), 0 6px 14px rgba(40, 10, 90, .3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn svg { width: 20px; height: 20px; }
.btn.green { color: #053d29; background: linear-gradient(180deg, #6ff5c0, var(--green)); box-shadow: 0 5px 0 var(--green2), 0 12px 24px rgba(10, 60, 50, .3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.white { color: var(--ink); background: #fff; box-shadow: 0 5px 0 #c9bdf5, 0 12px 24px rgba(40, 10, 90, .25); }
.btn.ghost { color: #fff; background: var(--glass2); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.btn.sm { height: 40px; border-radius: 14px; font-size: 13px; width: auto; padding: 0 14px; box-shadow: 0 3px 0 var(--gold3), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.sm.green { box-shadow: 0 3px 0 var(--green2), inset 0 2px 0 rgba(255,255,255,.6); }
.btn.sm.ghost { box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); }
.btn.sm.done { background: rgba(255,255,255,.18); color: rgba(255,255,255,.85); box-shadow: none; }
.btn.sm svg { width: 16px; height: 16px; }

.card { background: var(--glass); border-radius: var(--r); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.wcard { background: #fff; color: var(--ink); border-radius: var(--r); box-shadow: 0 10px 30px rgba(30, 10, 80, .25); }

.i-coin { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; }
.i-bolt { width: 1em; height: 1em; display: inline-block; vertical-align: -.14em; }
.coinv { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* ---------- 01 приглашение ---------- */
.invite { align-items: center; text-align: center; padding: 40px 22px calc(28px + var(--safe-b)); }
.logo { font-family: var(--display); font-weight: 900; font-size: 46px; letter-spacing: -.03em; line-height: 1; color: #fff;
  text-shadow: 0 4px 0 #3a1fb8, 0 10px 24px rgba(30,10,90,.5); transform: rotate(-3deg); }
.logo b { color: var(--gold1); font-weight: 900; }
.logo-sub { margin-top: 10px; font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.inv-pets { position: relative; height: 300px; width: 100%; margin: 14px 0 0; }
.inv-pets:before { content: ''; position: absolute; left: 50%; top: 40px; width: 280px; height: 280px; margin-left: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,170,.5), rgba(255,180,230,.15) 50%, rgba(255,255,255,0) 70%); }
.inv-pets .pet { position: absolute; }
.inv-pets .p1 { width: 196px; left: 50%; margin-left: -98px; top: 70px; z-index: 3; animation: bob 2.4s ease-in-out infinite; }
.inv-pets .p2 { width: 118px; left: -6px; top: 150px; transform: rotate(-8deg); animation: bob 2.6s .3s ease-in-out infinite; }
.inv-pets .p3 { width: 122px; right: -8px; top: 152px; animation: bob 2.2s .6s ease-in-out infinite; }
.inv-pets .p4 { width: 92px; left: 30px; top: 20px; opacity: .9; animation: bob 2.8s .2s ease-in-out infinite; }
.inv-pets .p5 { width: 64px; right: 52px; top: 26px; transform: rotate(12deg); opacity: .9; animation: bob 2.5s .5s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.inv-card { width: 100%; padding: 18px 16px 16px; margin-top: auto; }
.inv-from { display: flex; align-items: center; gap: 12px; text-align: left; }
.ava { width: 52px; height: 52px; border-radius: 50%; flex: none; background: linear-gradient(180deg, #fff, #e6defc); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(30,10,80,.25); overflow: hidden; display: grid; place-items: center; }
.ava .pet { width: 92%; margin-top: 4px; }
.ava.c-raccoon { background: linear-gradient(180deg, #e4f6ff, #b9c3e6); } .ava.c-goose { background: linear-gradient(180deg, #fff1e6, #ffc6b0); }
.ava.c-capybara { background: linear-gradient(180deg, #fff3dc, #f6cf96); } .ava.c-dragon { background: linear-gradient(180deg, #f2eaff, #c9b2ff); }
.inv-from .t { font-size: 15px; line-height: 1.3; }
.inv-from .t b { font-family: var(--display); font-weight: 800; color: var(--gold1); }
.inv-clan { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; padding: 12px; border-radius: 18px; background: rgba(20, 8, 70, .25); text-align: left; }
.inv-clan .crest { width: 54px; flex: none; }
.inv-clan .nm { font-family: var(--display); font-weight: 800; font-size: 17px; }
.inv-clan .st { display: flex; gap: 12px; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.8); }
.inv-gift { margin-bottom: 14px; font-size: 14px; color: rgba(255,255,255,.9); }
.inv-gift .coinv { color: var(--gold1); font-family: var(--display); font-weight: 800; }

/* ---------- 02 выбор яйца ---------- */
.choose { padding: 30px 16px calc(20px + var(--safe-b)); }
.choose .head { text-align: center; margin-bottom: 18px; }
.choose .head p { margin: 8px 0 0; font-size: 15px; }
.eggs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; max-height: 560px; }
.egg-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 10px 12px; border-radius: 24px; background: var(--glass); box-shadow: inset 0 0 0 2px rgba(255,255,255,.16); text-align: center; transition: transform .2s, box-shadow .2s, background .2s; }
.egg-card .egg { width: 104px; margin: 0 auto 6px; transition: transform .25s; }
.egg-card .nm { font-family: var(--display); font-weight: 800; font-size: 16px; }
.egg-card .tr { font-size: 12.5px; line-height: 1.25; margin-top: 5px; color: rgba(255,255,255,.82); min-height: 32px; }
.egg-card.sel { background: rgba(255,255,255,.28); box-shadow: inset 0 0 0 3px var(--gold1), 0 10px 26px rgba(30,10,90,.35); transform: translateY(-3px); }
.egg-card.sel .egg { transform: scale(1.08) rotate(-4deg); animation: wobble 1.4s ease-in-out infinite; }
.egg-card .tick { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; background: var(--gold1); color: #4a2300; display: none; place-items: center; }
.egg-card .tick svg { width: 16px; height: 16px; }
.egg-card.sel .tick { display: grid; }
.egg-card .rare { position: absolute; top: 10px; left: 10px; padding: 3px 8px; border-radius: 10px; font-size: 10.5px; font-family: var(--display); font-weight: 800; letter-spacing: .04em; color: #4a2300; background: linear-gradient(90deg, #ffe066, #ffb21f); text-transform: uppercase; }
.egg-card .peek { position: absolute; bottom: 64px; right: 10px; width: 36px; }
@keyframes wobble { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.choose .foot { margin-top: auto; padding-top: 14px; }
.choose .hint { text-align: center; font-size: 13px; margin-bottom: 12px; color: rgba(255,255,255,.75); }

/* ---------- 03-04 вылупление и имя ---------- */
.hatch { align-items: center; padding: 36px 20px calc(24px + var(--safe-b)); text-align: center; }
.hatch .head p { margin: 8px 0 0; font-size: 15px; }
.hatch-stage { position: relative; width: 300px; height: 380px; margin-top: 18px; display: grid; place-items: center; }
.rays { position: absolute; width: 420px; height: 420px; left: 50%; top: 50%; margin: -210px 0 0 -210px; border-radius: 50%; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 10deg, rgba(255,255,255,0) 10deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,170,.8), rgba(255,200,90,.25) 45%, rgba(255,255,255,0) 70%); }
.hatch-egg { position: relative; width: 220px; z-index: 2; touch-action: manipulation; cursor: pointer; }
.hatch-egg .egg { width: 100%; }
.hatch-egg.hit { animation: eggHit .28s ease; }
@keyframes eggHit { 0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-7deg) scale(.95, 1.03); } 60% { transform: rotate(6deg) scale(1.03, .97); } 100% { transform: rotate(0) scale(1); } }
.hatch-egg.shake { animation: eggShake 1.1s ease-in-out infinite; }
@keyframes eggShake { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-5deg); } 82% { transform: rotate(5deg); } 88% { transform: rotate(-3deg); } 94% { transform: rotate(2deg); } }
.hatch-dots { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.hatch-dots i { width: 34px; height: 10px; border-radius: 6px; background: rgba(255,255,255,.22); transition: background .2s; }
.hatch-dots i.on { background: var(--gold1); box-shadow: 0 0 12px rgba(255,224,102,.7); }
.tap-hint { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 16px; background: rgba(20,8,70,.28); font-size: 15px; }
.tap-hint svg { width: 22px; height: 22px; color: var(--gold1); animation: poke 1s ease-in-out infinite; }
@keyframes poke { 50% { transform: translateY(-4px) rotate(-8deg); } }
.shell { position: absolute; width: 220px; left: 50%; margin-left: -110px; top: 50%; margin-top: -142px; z-index: 3; }
.shell-top { animation: shellTop 1s cubic-bezier(.3,.6,.4,1) forwards; }
.shell-bot { animation: shellBot 1.1s .25s ease forwards; }
@keyframes shellTop { 0% { transform: none; } 40% { transform: translate(-40px, -120px) rotate(-40deg); opacity: 1; } 100% { transform: translate(-130px, -60px) rotate(-110deg); opacity: 0; } }
@keyframes shellBot { 0% { transform: none; opacity: 1; } 100% { transform: translate(0, 60px) scale(.9); opacity: 0; } }
.baby { position: absolute; width: 250px; z-index: 2; left: 50%; margin-left: -125px; top: 50px; animation: babyIn .8s .15s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes babyIn { 0% { transform: translateY(70px) scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.baby .pet { width: 100%; }
.hello { position: absolute; z-index: 4; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 9px 14px; border-radius: 16px; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 14px; box-shadow: 0 8px 20px rgba(30,10,80,.25); animation: pop .4s .6s cubic-bezier(.3,1.6,.5,1) both; }
.hello:after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
@keyframes pop { from { transform: translateX(-50%) scale(.4); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }
.namebox { width: 100%; margin-top: auto; padding: 18px 16px 16px; animation: up .5s .7s cubic-bezier(.2,.9,.3,1.1) both; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.namebox h2 { font-size: 19px; }
.namebox .inp { margin: 14px 0 10px; display: flex; align-items: center; height: 58px; border-radius: 18px; background: #fff; color: var(--ink); padding: 0 16px; box-shadow: inset 0 -3px 0 #e2dafc; }
.namebox input { flex: 1; border: 0; outline: 0; background: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 20px; min-width: 0; }
.namebox input::placeholder { color: #b7acd8; }
.namebox .inp .cnt { font-size: 12px; color: #a99dd0; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.chip { height: 34px; padding: 0 13px; border-radius: 17px; background: rgba(255,255,255,.2); font-size: 14px; font-weight: 800; }
.chip.on { background: var(--gold1); color: #4a2300; }

/* ---------- верх основных экранов ---------- */
.top { padding: 14px 14px 0; }
.clanbar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px 0 6px; border-radius: 18px; background: rgba(20,8,70,.28); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); width: 100%; text-align: left; }
.clanbar .crest { width: 38px; flex: none; }
.clanbar .t { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clanbar .t b { font-family: var(--display); font-weight: 800; font-size: 13.5px; }
.clanbar .t .d { color: rgba(255,255,255,.75); }
.clanbar .t .up { color: var(--green); }
.clanbar .go { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.16); display: grid; place-items: center; transform: rotate(90deg); }
.clanbar .go svg { width: 14px; height: 14px; }

/* ---------- 05 питомец ---------- */
.home { padding-bottom: calc(86px + var(--safe-b)); }
.balance { text-align: center; margin-top: 16px; }
.balance .v { font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: -.03em; display: inline-flex; align-items: center; gap: 10px; text-shadow: 0 3px 0 rgba(40,15,120,.45); }
.balance .v .i-coin { width: 40px; height: 40px; filter: drop-shadow(0 3px 0 rgba(120,50,0,.35)); }
.balance .pph { margin-top: 2px; font-size: 13.5px; color: rgba(255,255,255,.8); display: inline-flex; gap: 6px; align-items: center; }
.balance .pph b { color: var(--gold1); }
.growth { margin: 12px 18px 0; display: flex; align-items: center; gap: 10px; }
.growth .lv { font-family: var(--display); font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.2); white-space: nowrap; }
.growth .bar { flex: 1; height: 12px; border-radius: 8px; background: rgba(20,8,70,.32); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.15); }
.growth .bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #6ff5c0, #2fd897); box-shadow: inset 0 -3px 0 rgba(0,0,0,.08), inset 0 2px 0 rgba(255,255,255,.5); transition: width .25s; }
.growth .nx { font-size: 12px; color: rgba(255,255,255,.75); white-space: nowrap; }
.petname { text-align: center; margin-top: 10px; font-family: var(--display); font-weight: 800; font-size: 17px; }
.petname span { font-family: var(--text); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.7); }
.tapzone { position: relative; flex: 1; display: grid; place-items: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer; min-height: 0; }
.tapzone .halo { position: absolute; width: 340px; height: 340px; margin-top: 20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,170,.55), rgba(255,180,230,.2) 50%, rgba(255,255,255,0) 70%); }
.tapzone .ring { position: absolute; width: 290px; height: 290px; margin-top: 20px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.22); animation: spin 30s linear infinite; }
.tapzone .pet-wrap { position: relative; width: 296px; margin-top: 20px; transform-origin: 50% 92%; }
.tapzone .pet-wrap .pet { width: 100%; }
.tapzone .pet-wrap.squash { animation: squash .22s ease-out; }
@keyframes squash { 0% { transform: scale(1, 1); } 35% { transform: scale(1.09, .88); } 70% { transform: scale(.96, 1.05); } 100% { transform: scale(1, 1); } }
.pet-idle { animation: breathe 2.6s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985); } }
.mood { position: absolute; top: 8px; right: 22px; z-index: 3; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 12.5px; box-shadow: 0 6px 16px rgba(30,10,80,.25); animation: moodIn .35s cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
@keyframes moodIn { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.duelchip { position: absolute; left: 16px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 8px; border-radius: 14px; background: rgba(20,8,70,.35); font-size: 12px; box-shadow: inset 0 0 0 1.5px rgba(47,216,151,.55); }
.duelchip svg { width: 16px; height: 16px; color: var(--green); }
.duelchip b { color: var(--green); font-family: var(--display); }
.float { position: absolute; z-index: 20; pointer-events: none; font-family: var(--display); font-weight: 900; font-size: 34px; color: #fff; -webkit-text-stroke: 1.5px #4a22c9; paint-order: stroke fill; text-shadow: 0 4px 0 #4a22c9, 0 6px 14px rgba(40,10,120,.45); animation: floatUp .9s ease-out forwards; white-space: nowrap; }
.float small { font-size: 14px; color: var(--gold1); display: block; text-align: center; text-shadow: 0 2px 0 rgba(60,20,120,.6); }
@keyframes floatUp { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 12% { transform: translate(-50%, -80%) scale(1.2); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(-50%, -230%) scale(.95); opacity: 0; } }
.spark { position: absolute; z-index: 19; width: 22px; height: 22px; pointer-events: none; animation: sparkle .7s ease-out forwards; }
@keyframes sparkle { from { transform: translate(-50%, -50%) scale(.7); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3) rotate(160deg); opacity: 0; } }
.homebot { display: flex; align-items: center; gap: 10px; padding: 0 14px 12px; }
.energy { flex: 1; }
.energy .row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 6px; }
.energy .row b { font-family: var(--display); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.energy .row .i-bolt { width: 18px; height: 18px; }
.energy .bar { height: 14px; border-radius: 8px; background: rgba(20,8,70,.35); overflow: hidden; box-shadow: inset 0 2px 3px rgba(0,0,0,.18); }
.energy .bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #ffe066, #ffb21f); box-shadow: inset 0 2px 0 rgba(255,255,255,.55); transition: width .2s; }
.upbtn { flex: none; width: 66px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #4a2300; background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 4px 0 var(--gold3), inset 0 2px 0 rgba(255,255,255,.6); position: relative; }
.upbtn svg { width: 22px; height: 22px; margin-bottom: -6px; }
.upbtn .dot { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2.5px #8b4ff2; }

/* ---------- таббар ---------- */
#tabs { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); height: 70px; z-index: 30; display: flex; padding: 6px; border-radius: 26px; background: rgba(255,255,255,.96); box-shadow: 0 10px 30px rgba(30,10,80,.35); }
#tabs[hidden] { display: none; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 20px; color: #a497cf; font-size: 11px; font-weight: 800; position: relative; transition: background .2s, color .2s; }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: #fff; background: linear-gradient(180deg, #8b6bff, #5a3cf0); box-shadow: 0 4px 0 #3e25c2, inset 0 2px 0 rgba(255,255,255,.3); }
.tab .badge { position: absolute; top: 5px; right: calc(50% - 20px); width: 12px; height: 12px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2.5px #fff; }
.tab.on .badge { box-shadow: 0 0 0 2.5px #6d4ff5; }

/* ---------- шит улучшений ---------- */
#layer { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
#layer > * { pointer-events: auto; }
.dim { position: absolute; inset: 0; background: rgba(18, 6, 50, .55); animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(22px + var(--safe-b)); border-radius: 30px 30px 0 0; background: linear-gradient(180deg, #fff, #f4f0ff); color: var(--ink); animation: sheetIn .38s cubic-bezier(.2,.9,.3,1.05) both; }
@keyframes sheetIn { from { transform: translateY(100%); } }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: #d8cff5; margin: 0 auto 14px; }
.sheet .sh-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.sheet .sh-h h2 { color: var(--ink); }
.sheet .sh-bal { font-family: var(--display); font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; gap: 6px; }
.sheet .sh-sub { color: var(--ink2); font-size: 14px; margin-bottom: 14px; }
.upg { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: #fff; box-shadow: 0 4px 14px rgba(70, 40, 160, .1), inset 0 0 0 1.5px #eee8ff; margin-bottom: 10px; }
.upg .ic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; flex: none; color: #fff; }
.upg .ic svg { width: 30px; height: 30px; }
.upg .ic.c1 { background: linear-gradient(180deg, #ff9ad5, #ff5aa5); } .upg .ic.c2 { background: linear-gradient(180deg, #ffe066, #ffad1f); }
.upg .ic.c3 { background: linear-gradient(180deg, #7ef0c4, #22c487); } .upg .ic.c4 { background: linear-gradient(180deg, #9db8ff, #5a6cf0); }
.upg .ic .i-bolt { width: 32px; height: 32px; }
.upg .tx { flex: 1; min-width: 0; }
.upg .nm { font-family: var(--display); font-weight: 800; font-size: 15px; }
.upg .ds { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.upg .ds b { color: #13a86f; }
.upg .lvl { font-size: 11px; font-weight: 800; color: #8a7cc0; margin-top: 3px; }
.upg .pips { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.upg .pips i { width: 10px; height: 5px; border-radius: 3px; background: #e5defb; } .upg .pips i.on { background: #8b6bff; }
.upg .btn.sm { min-width: 92px; }
.upg .btn.sm.free { color: #053d29; background: linear-gradient(180deg, #6ff5c0, var(--green)); box-shadow: 0 3px 0 var(--green2), inset 0 2px 0 rgba(255,255,255,.6); }

/* ---------- общие списки ---------- */
.sec-t { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 4px 10px; }
.sec-t h3 { font-size: 15px; }
.sec-t span { font-size: 12.5px; color: rgba(255,255,255,.7); }
.list { padding: 4px; }
.li { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 18px; }
.li + .li { margin-top: 2px; }
.li.me { background: rgba(255,224,102,.2); box-shadow: inset 0 0 0 2px rgba(255,224,102,.6); }
.li .ava { width: 46px; height: 46px; box-shadow: 0 0 0 2.5px rgba(255,255,255,.85); }
.li .tx { flex: 1; min-width: 0; }
.li .nm { font-family: var(--display); font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.li .nm .tag { font-family: var(--text); font-size: 10.5px; font-weight: 900; padding: 2px 7px; border-radius: 8px; background: var(--gold1); color: #4a2300; text-transform: uppercase; letter-spacing: .03em; }
.li .sb { font-size: 12.5px; color: rgba(255,255,255,.72); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li .pc { font-family: var(--display); font-weight: 900; font-size: 16px; text-align: right; min-width: 52px; }
.li .pbar { height: 6px; border-radius: 4px; background: rgba(20,8,70,.3); margin-top: 6px; overflow: hidden; }
.li .pbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffe066, #ffb21f); }
.rank { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-family: var(--display); font-size: 13px; font-weight: 900; background: rgba(255,255,255,.18); flex: none; }
.rank.r1 { background: linear-gradient(180deg, #ffe066, #ffb21f); color: #4a2300; } .rank.r2 { background: linear-gradient(180deg, #f2f4ff, #b9c0dd); color: #2a1b5e; } .rank.r3 { background: linear-gradient(180deg, #ffc896, #e0864a); color: #4a1d00; }

/* ---------- 07 клан ---------- */
.pagehead { padding: 18px 18px 0; display: flex; align-items: center; justify-content: space-between; }
.pagehead h1 { font-size: 22px; }
.clanhero { margin: 14px 14px 0; padding: 18px 16px 16px; position: relative; overflow: hidden; }
.clanhero .row { display: flex; align-items: center; gap: 14px; }
.clanhero .crest { width: 86px; flex: none; filter: drop-shadow(0 8px 14px rgba(20,8,70,.35)); }
.clanhero .nm { font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.1; }
.clanhero .sb { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 6px; }
.clanhero .mascot { position: absolute; right: -14px; bottom: -22px; width: 110px; opacity: .22; transform: rotate(-10deg); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.stat { padding: 10px 8px; border-radius: 16px; background: rgba(20,8,70,.25); text-align: center; }
.stat b { display: block; font-family: var(--display); font-weight: 900; font-size: 16px; white-space: nowrap; }
.stat span { font-size: 11.5px; color: rgba(255,255,255,.72); }
.stat.hl b { color: var(--gold1); }
.bonus { margin: 12px 14px 0; padding: 14px; display: flex; gap: 12px; align-items: center; }
.bonus .ic { width: 50px; height: 50px; flex: none; }
.bonus .tx { flex: 1; }
.bonus .t1 { font-size: 12px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; font-weight: 900; }
.bonus .t2 { font-family: var(--display); font-weight: 800; font-size: 15px; margin: 3px 0 8px; }
.bonus .bar { height: 10px; border-radius: 6px; background: rgba(20,8,70,.32); overflow: hidden; }
.bonus .bar i { display: block; height: 100%; background: linear-gradient(90deg, #6ff5c0, #2fd897); border-radius: 6px; }
.bonus .t3 { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 6px; }
.actions2 { display: flex; gap: 10px; margin: 14px 14px 0; }
.actions2 .btn { height: 52px; font-size: 14.5px; }

/* ---------- 08 дуэль ---------- */
.timer { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 14px; background: rgba(20,8,70,.35); font-family: var(--display); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.timer svg { width: 16px; height: 16px; color: var(--gold1); }
.vs { display: flex; align-items: center; justify-content: space-between; margin: 14px 14px 0; }
.vs .side { width: 42%; text-align: center; }
.vs .side .crest { width: 66px; margin: 0 auto 6px; filter: drop-shadow(0 6px 10px rgba(20,8,70,.35)); }
.vs .side .nm { font-family: var(--display); font-weight: 800; font-size: 13.5px; line-height: 1.15; }
.vs .side .sc { font-family: var(--display); font-weight: 900; font-size: 18px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.vs .side.us .sc { color: var(--green); } .vs .side.them .sc { color: #ffb0bc; }
.vs .mid { font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--gold1); text-shadow: 0 3px 0 #b8560a; transform: rotate(-6deg); }
.arena { position: relative; margin: 14px 14px 0; height: 180px; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); }
.arena .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(180deg, #2fd897, #13a86f); }
.arena .ground:before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; border-radius: 50%; background: #45e6a8; }
.arena .ground.r { left: 50%; background: linear-gradient(180deg, #ff7a8e, #e2364f); }
.arena .ground.r:before { background: #ff8fa0; }
.arena .center { position: absolute; left: 50%; top: 44px; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(180deg, #fff 0 8px, transparent 8px 14px); opacity: .7; z-index: 1; }
.arena .tug { position: absolute; inset: 0; animation: tug 2.2s ease-in-out infinite; }
@keyframes tug { 0%, 100% { transform: translateX(-10px); } 50% { transform: translateX(-2px); } }
.arena .rope { position: absolute; left: 70px; right: 70px; top: 102px; height: 8px; border-radius: 4px; background: repeating-linear-gradient(110deg, #e8b46a 0 6px, #b87a32 6px 12px); box-shadow: 0 2px 0 rgba(0,0,0,.15); z-index: 2; }
.arena .knot { position: absolute; top: 74px; left: calc(50% - 26px); z-index: 3; width: 22px; }
.arena .knot i { display: block; width: 4px; height: 44px; margin: 0 auto; background: #fff; border-radius: 2px; }
.arena .knot b { position: absolute; top: 0; left: 11px; width: 28px; height: 20px; background: var(--green); clip-path: polygon(0 0, 100% 15%, 80% 50%, 100% 85%, 0 100%); }
.arena .fighter { position: absolute; bottom: 18px; width: 128px; z-index: 4; }
.arena .fighter.l { left: 2px; transform: rotate(-8deg); }
.arena .fighter.r { right: 2px; transform: rotate(9deg); }
.arena .lead { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; z-index: 5; padding: 6px 10px; border-radius: 12px; background: var(--green); color: #053d29; font-family: var(--display); font-weight: 900; font-size: 13px; box-shadow: 0 3px 0 var(--green2); }
.tow { margin: 14px 14px 0; }
.tow .bar { position: relative; display: flex; height: 26px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.tow .bar .a { background: linear-gradient(180deg, #6ff5c0, #2fd897); display: flex; align-items: center; padding-left: 12px; color: #053d29; font-family: var(--display); font-weight: 900; font-size: 13px; transition: width .4s; }
.tow .bar .b { flex: 1; background: linear-gradient(180deg, #ff8fa0, #e2364f); display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-family: var(--display); font-weight: 900; font-size: 13px; }
.tow .lbl { text-align: center; margin-top: 8px; font-size: 14px; }
.tow .lbl b { color: var(--green); font-family: var(--display); }
.tops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 14px 0; }
.tops .col { padding: 10px 8px 6px; }
.tops .col h3 { font-size: 12px; text-align: center; margin-bottom: 6px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .05em; font-family: var(--text); font-weight: 900; }
.tops .p { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 12px; }
.tops .p.me { background: rgba(255,224,102,.22); }
.tops .p .ava { width: 32px; height: 32px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.tops .p .n { flex: 1; font-size: 13px; font-weight: 800; }
.tops .p .s { font-family: var(--display); font-weight: 800; font-size: 11.5px; }
.duel-prize { margin: 12px 14px 0; text-align: center; font-size: 13px; color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center; gap: 6px; }
.duel-prize svg { width: 18px; height: 18px; color: var(--gold1); }
.duel-cta { margin: 14px 14px 0; }

/* ---------- 09 друзья ---------- */
.invcard { margin: 14px 14px 0; padding: 18px 16px 16px; border-radius: 26px; color: var(--ink); background: linear-gradient(135deg, #fff 0%, #fff4d6 100%); box-shadow: 0 12px 30px rgba(30,10,80,.3); position: relative; overflow: hidden; }
.invcard h2 { color: var(--ink); font-size: 19px; max-width: 220px; }
.invcard p { margin: 6px 0 14px; font-size: 14px; color: var(--ink2); max-width: 230px; }
.invcard p b { color: #e07b00; }
.invcard .pets { position: absolute; right: -6px; top: 8px; width: 120px; height: 110px; }
.invcard .pets .pet { position: absolute; width: 74px; }
.invcard .pets .pet:nth-child(1) { right: 34px; top: 0; } .invcard .pets .pet:nth-child(2) { right: 0; top: 30px; width: 66px; }
.linkbox { display: flex; align-items: center; gap: 8px; height: 50px; border-radius: 16px; background: #f1ecff; padding: 0 6px 0 14px; font-size: 13.5px; font-weight: 800; color: #5a4a96; }
.linkbox span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linkbox button { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #6d4ff5; box-shadow: 0 2px 6px rgba(70,40,160,.12); }
.linkbox button svg { width: 20px; height: 20px; }
.invcard .btn { margin-top: 12px; height: 54px; }
.giftin { margin: 12px 14px 0; padding: 12px; display: flex; align-items: center; gap: 12px; }
.giftin .gi { width: 46px; height: 46px; border-radius: 15px; flex: none; display: grid; place-items: center; background: linear-gradient(180deg, #ff9ad5, #ff5aa5); color: #fff; }
.giftin .gi svg { width: 26px; height: 26px; }
.giftin .tx { flex: 1; font-size: 13.5px; line-height: 1.3; }
.giftin .tx b { font-family: var(--display); }

/* ---------- 10 магазин ---------- */
.shophead { margin: 12px 14px 0; height: 210px; position: relative; border-radius: 28px; overflow: hidden; background: radial-gradient(circle at 50% 70%, rgba(255,236,170,.6), rgba(255,255,255,.08) 60%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); }
.shophead .podium { position: absolute; left: 50%; bottom: 16px; width: 190px; height: 34px; margin-left: -95px; border-radius: 50%; background: linear-gradient(180deg, #b49aff, #7b5cff); box-shadow: 0 6px 0 #5a3cf0; }
.shophead .pet { position: absolute; left: 50%; bottom: 26px; width: 176px; margin-left: -88px; }
.shophead .bal { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 12px; background: rgba(20,8,70,.35); font-family: var(--display); font-weight: 800; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.shophead .note { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.2); font-size: 11.5px; max-width: 120px; line-height: 1.2; }
.season { margin: 12px 14px 0; padding: 12px 14px; border-radius: 22px; display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, #ff8a1f 0%, #ff4d8f 55%, #7a3cf0 100%); box-shadow: 0 8px 22px rgba(80,20,120,.35), inset 0 2px 0 rgba(255,255,255,.3); position: relative; overflow: hidden; }
.season .hat-svg { width: 74px; flex: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.season .tx { flex: 1; }
.season .t1 { font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.season .t2 { font-family: var(--display); font-weight: 900; font-size: 16px; margin: 2px 0; }
.season .t3 { font-size: 12.5px; opacity: .92; display: flex; align-items: center; gap: 5px; }
.season .t3 svg { width: 14px; height: 14px; }
.season:after { content: ''; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.12); }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 14px 0; }
.item { position: relative; padding: 10px 6px 10px; border-radius: 20px; background: var(--glass); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); text-align: center; }
.item .hat-svg { width: 74px; height: 60px; margin: 2px auto 4px; }
.item .nm { font-size: 12px; font-weight: 800; line-height: 1.15; min-height: 28px; display: flex; align-items: center; justify-content: center; }
.item .pr { margin-top: 6px; font-family: var(--display); font-weight: 800; font-size: 12.5px; display: inline-flex; gap: 4px; align-items: center; padding: 5px 9px; border-radius: 10px; background: rgba(20,8,70,.3); }
.item .pr.own { background: rgba(47,216,151,.25); color: #9ff7d2; font-family: var(--text); font-weight: 900; }
.item .pr.wear { background: var(--green); color: #053d29; font-family: var(--text); font-weight: 900; }
.season.sel { box-shadow: 0 8px 22px rgba(80,20,120,.35), inset 0 0 0 3px var(--gold1); }
.item.sel { background: rgba(255,255,255,.3); box-shadow: inset 0 0 0 3px var(--gold1); }
.item.soon { opacity: .6; }
.item.soon .pr { background: rgba(255,255,255,.18); font-family: var(--text); font-weight: 900; font-size: 11px; }
.item .new { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 8px; background: #ff8a1f; font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
/* Док для плавающих кнопок: живёт в #app вне прокручиваемого экрана, поэтому не уезжает вместе со списком.
   Стоит ровно над таббаром (10px отступ + 70px таббар + 12px зазор) и по ширине колонки #app. */
#dock { position: absolute; left: 14px; right: 14px; bottom: calc(92px + var(--safe-b)); z-index: 25; pointer-events: none; }
#dock:empty { display: none; }
#dock > * { pointer-events: auto; }
.shopcta { animation: up .3s both; }
.shopcta.still { animation: none; }
/* когда док показан — список получает запас снизу, чтобы последний ряд не прятался под кнопкой */
.scr.scroll.has-dock { padding-bottom: calc(92px + 58px + 5px + 16px + var(--safe-b)); }

/* ---------- 11 итоги недели ---------- */
.modal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 18px; text-align: center; }
.modal .rays { width: 560px; height: 560px; margin: -280px 0 0 -280px; top: 34%; opacity: .7; }
.res { position: relative; width: 100%; animation: resIn .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes resIn { from { transform: scale(.7); opacity: 0; } }
.res .ttl { font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold1); }
.res .crest { width: 132px; margin: 10px auto 0; filter: drop-shadow(0 12px 18px rgba(20,8,70,.45)); animation: bob 2.4s ease-in-out infinite; }
.res .place { position: relative; display: inline-block; margin-top: -14px; padding: 8px 18px; border-radius: 16px; font-family: var(--display); font-weight: 900; font-size: 20px; color: #4a2300; background: linear-gradient(180deg, var(--gold1), var(--gold2)); box-shadow: 0 4px 0 var(--gold3), 0 10px 20px rgba(0,0,0,.25); }
.res h1 { margin-top: 14px; font-size: 25px; }
.res .sub { margin-top: 6px; font-size: 14.5px; color: rgba(255,255,255,.85); }
.rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 14px; }
.rw { padding: 12px 6px 10px; border-radius: 20px; background: linear-gradient(180deg, #7454f5, #4f33d6); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
.rw .ic { height: 54px; display: grid; place-items: center; }
.rw .ic svg { height: 50px; width: auto; }
.rw .ic .i-coin { width: 46px; height: 46px; }
.rw b { display: block; font-family: var(--display); font-weight: 900; font-size: 15px; margin-top: 6px; }
.rw span { font-size: 11.5px; color: rgba(255,255,255,.78); }
.hero { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: #fff; color: var(--ink); text-align: left; box-shadow: 0 10px 26px rgba(20,8,70,.3); margin-bottom: 16px; }
.hero .md { width: 50px; flex: none; }
.hero .md svg { width: 100%; height: auto; }
.hero .t1 { font-family: var(--display); font-weight: 900; font-size: 15px; }
.hero .t2 { font-size: 13px; color: var(--ink2); margin-top: 2px; }
.hero .ava { width: 46px; height: 46px; margin-left: auto; }

/* ---------- тосты, конфетти, касания ---------- */
.toast { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 90; max-width: 340px; width: max-content; padding: 12px 16px; border-radius: 18px; background: #fff; color: var(--ink); font-weight: 800; font-size: 14px; box-shadow: 0 12px 30px rgba(20,8,70,.35); display: flex; align-items: center; gap: 10px; animation: toastIn .3s cubic-bezier(.3,1.5,.5,1) both; pointer-events: none; }
.toast svg { width: 22px; height: 22px; color: var(--green2); flex: none; }
.toast.out { animation: toastOut .3s forwards; }
@keyframes toastIn { from { transform: translate(-50%, -30px); opacity: 0; } }
@keyframes toastOut { to { transform: translate(-50%, -30px); opacity: 0; } }
#confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }
.touch { position: fixed; z-index: 9999; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.35); border: 3px solid rgba(255,255,255,.9); box-shadow: 0 0 0 4px rgba(90,60,240,.25), 0 4px 14px rgba(0,0,0,.25); transition: transform .12s, opacity .25s; opacity: 0; }
.touch.on { opacity: 1; }
.touch.down { transform: scale(.72); background: rgba(255,255,255,.6); }
.ripple { position: fixed; z-index: 9998; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid #fff; pointer-events: none; animation: ripple .5s ease-out forwards; }
@keyframes ripple { to { transform: scale(2.2); opacity: 0; } }
.hatch-clan { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px; background: rgba(20,8,70,.25); text-align: left; font-size: 13.5px; line-height: 1.3; }
.hatch-clan .crest { width: 40px; flex: none; }
.hatch-clan b { font-family: var(--display); }

/* ================= v2: упрощённая версия ================= */
.mini-logo { text-align: center; font-family: var(--display); font-weight: 900; font-size: 26px; letter-spacing: -.03em; text-shadow: 0 3px 0 #3a1fb8; transform: rotate(-2deg); }
.mini-logo b { color: var(--gold1); }
.invite-line { display: flex; align-items: center; gap: 10px; margin: 12px auto 18px; padding: 6px 14px 6px 6px; border-radius: 22px; background: rgba(20,8,70,.28); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); font-size: 13.5px; line-height: 1.25; max-width: 100%; }
.invite-line .ava { width: 34px; height: 34px; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.invite-line b { font-family: var(--display); color: var(--gold1); font-weight: 800; }
.choose { padding-top: 22px; }
.eggs.v2 { gap: 14px; max-height: none; }
.eggs.v2 .egg-card { padding: 16px 10px; }
.eggs.v2 .egg-card .egg { width: 112px; margin: 0 auto; }
.choose .foot { padding-top: 16px; }

.clanline { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 4px; margin: 0 auto; border-radius: 21px; background: rgba(20,8,70,.28); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); font-size: 14px; position: relative; }
.clanline .crest { width: 32px; }
.clanline b { font-family: var(--display); font-weight: 800; }
.clanline .live { width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px rgba(255,90,114,.3); animation: livep 1.2s ease-in-out infinite; }
@keyframes livep { 50% { box-shadow: 0 0 0 6px rgba(255,90,114,0); } }
.top { display: flex; justify-content: center; }
.scr.home .balance { margin-top: 18px; }
.scr.home .balance .v { font-size: 46px; }
.scr.home .balance .v .i-coin { width: 44px; height: 44px; }
.scr.home .tapzone .pet-wrap { transition: width .5s cubic-bezier(.3,1.5,.5,1); margin-top: 0; }
.scr.home .tapzone .halo, .scr.home .tapzone .ring { margin-top: 0; }
.scr.home .mood { top: 18%; right: auto; left: 56%; transition: opacity .3s; }
.mood.out { opacity: 0; }
.homebot { min-height: 70px; }
.upbtn.appear { animation: upAppear .6s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes upAppear { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: none; } }
.upbtn .newb { position: absolute; top: -12px; right: -10px; padding: 3px 7px; border-radius: 9px; background: var(--red); color: #fff; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 10px; box-shadow: 0 2px 0 #b8233c, 0 0 0 2px #fff; animation: wig 1.4s ease-in-out infinite; white-space: nowrap; }
@keyframes wig { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-4deg) scale(1.08); } }

/* таббар на 3 вкладки */
#tabs.v2 .tab { font-size: 12px; }
#tabs.v2 .tab svg { width: 27px; height: 27px; }
#tabs .tab.locked { color: #c3badf; }
#tabs .tab.locked svg { width: 21px; height: 21px; }
#tabs .tab small { font-size: 9.5px; font-weight: 800; color: #b0a5d6; margin-top: -2px; }
#tabs .tab .badge { right: calc(50% - 22px); }

/* подсказка-стрелка */
.coach { position: absolute; z-index: 85; max-width: 300px; padding: 10px 14px; border-radius: 16px; background: #fff; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 13.5px; line-height: 1.25; box-shadow: 0 10px 26px rgba(20,8,70,.4), 0 0 0 3px var(--gold1); animation: coachIn .45s cubic-bezier(.3,1.6,.5,1) both; pointer-events: none; white-space: nowrap; }
.coach i { position: absolute; bottom: -9px; width: 16px; height: 16px; background: #fff; transform: rotate(45deg); box-shadow: 3px 3px 0 0 var(--gold1); border-radius: 0 0 4px 0; }
.coach.out { animation: fadeOut .3s forwards; }
@keyframes coachIn { from { transform: translateY(10px) scale(.7); opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(6px); } }

/* одно улучшение */
.one-up { text-align: center; padding: 0 4px; }
.ou-pet { position: relative; width: 150px; margin: 0 auto; }
.ou-pet .pet { width: 100%; }
.ou-pet.boost { animation: boost .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes boost { 0% { transform: scale(1); } 40% { transform: scale(1.18) translateY(-8px); } 100% { transform: none; } }
.ou-lv { position: absolute; right: -6px; top: 6px; padding: 5px 10px; border-radius: 12px; background: linear-gradient(180deg, #8b6bff, #5a3cf0); color: #fff; font-family: var(--display); font-weight: 800; font-size: 13px; box-shadow: 0 3px 0 #3e25c2; }
.one-up h2 { color: var(--ink); margin-top: 6px; font-size: 22px; }
.one-up p { margin: 6px 0 14px; color: var(--ink2); font-size: 14.5px; }
.ou-rows { display: grid; gap: 8px; margin-bottom: 18px; }
.ou-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: #fff; box-shadow: 0 4px 14px rgba(70,40,160,.1), inset 0 0 0 1.5px #eee8ff; font-size: 15px; text-align: left; }
.ou-row .ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }
.ou-row .ic svg { width: 24px; height: 24px; }
.ou-row .ic.c1 { background: linear-gradient(180deg, #ff9ad5, #ff5aa5); } .ou-row .ic.c2 { background: linear-gradient(180deg, #ffe066, #ffad1f); }
.ou-row b { margin-left: auto; font-family: var(--display); font-weight: 800; }
.ou-row em { font-style: normal; color: #13a86f; }
.ou-note { margin-top: 12px; font-size: 13px; color: var(--ink2); display: flex; justify-content: center; gap: 6px; }
.one-up .btn[data-no] { filter: saturate(.5) brightness(.95); }

/* имя на 2-м уровне */
.namepop { width: 100%; padding: 16px 16px 10px; text-align: center; background: linear-gradient(180deg, rgba(120,90,255,.96), rgba(90,60,230,.97)); animation: resIn .5s cubic-bezier(.3,1.5,.5,1) both; }
.np-pet { width: 150px; margin: -70px auto 0; filter: drop-shadow(0 10px 16px rgba(20,8,70,.4)); }
.np-pet .pet { width: 100%; }
.np-lv { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; background: rgba(255,224,102,.2); color: var(--gold1); font-size: 13px; font-weight: 900; margin-top: 4px; }
.np-lv svg { width: 16px; height: 16px; }
.namepop h2 { margin-top: 10px; font-size: 22px; }
.namepop .inp { margin: 14px 0 10px; display: flex; align-items: center; height: 56px; border-radius: 18px; background: #fff; color: var(--ink); padding: 0 16px; box-shadow: inset 0 -3px 0 #e2dafc; }
.namepop input { flex: 1; border: 0; outline: 0; background: none; color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 20px; min-width: 0; }
.namepop input::placeholder { color: #b7acd8; }
.namepop .cnt { font-size: 12px; color: #a99dd0; }
.later { display: block; margin: 8px auto 2px; padding: 8px 14px; font-size: 14px; color: rgba(255,255,255,.75); font-weight: 800; }

/* клан v2 */
.clan-head { display: flex; align-items: center; gap: 14px; padding: 20px 18px 4px; }
.clan-head .crest { width: 64px; flex: none; filter: drop-shadow(0 6px 10px rgba(20,8,70,.35)); }
.clan-head h1 { font-size: 22px; }
.clan-head .sb { font-size: 13.5px; color: rgba(255,255,255,.78); margin-top: 4px; }
.duel2 { margin-top: 14px; padding: 14px 14px 10px; text-align: center; }
.duel2.win { box-shadow: inset 0 0 0 2px rgba(47,216,151,.7), 0 10px 30px rgba(20,120,80,.25); background: linear-gradient(180deg, rgba(47,216,151,.22), rgba(255,255,255,.08)); }
.duel2.lose { box-shadow: inset 0 0 0 2px rgba(255,90,114,.7), 0 10px 30px rgba(140,20,60,.25); background: linear-gradient(180deg, rgba(255,90,114,.24), rgba(255,255,255,.08)); }
.d-top { display: flex; align-items: center; justify-content: space-between; }
.d-top .lbl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.d-top .lbl svg { width: 16px; height: 16px; }
.d-vs { display: inline-flex; align-items: center; gap: 4px; }
.d-vs .crest { width: 28px; } .d-vs em { font-style: normal; font-family: var(--display); font-weight: 900; font-size: 11px; color: var(--gold1); }
.d-big { font-family: var(--display); font-weight: 900; font-size: 30px; white-space: nowrap; letter-spacing: -.02em; margin-top: 8px; line-height: 1.05; }
.duel2.win .d-big { color: #7dffc8; text-shadow: 0 3px 0 #0f8a5c; }
.duel2.lose .d-big { color: #ffb3bf; text-shadow: 0 3px 0 #b8233c; }
.d-sub { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 6px; }
.d-bar { display: flex; align-items: center; gap: 8px; margin: 14px 0 14px; }
.d-bar .ava { width: 44px; height: 44px; }
.d-bar .track { position: relative; flex: 1; height: 22px; border-radius: 12px; background: linear-gradient(180deg, #ff8fa0, #e2364f); box-shadow: inset 0 0 0 2px rgba(255,255,255,.3); overflow: visible; }
.d-bar .track i { display: block; height: 100%; border-radius: 12px 0 0 12px; background: linear-gradient(180deg, #6ff5c0, #2fd897); transition: width .6s; }
.d-bar .track b { position: absolute; top: -5px; width: 6px; height: 32px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.d-help { height: 62px; font-size: 19px; }
.d-help svg { width: 24px; height: 24px; }
.d-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px; font-size: 14px; font-weight: 800; color: rgba(255,255,255,.85); }
.d-more .chev { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .2s; } .d-more .chev.up { transform: none; }
.d-more .chev svg { width: 16px; height: 16px; }
.d-details { margin-top: 4px; padding-top: 10px; border-top: 1.5px dashed rgba(255,255,255,.25); animation: up .3s both; text-align: left; }
.dd-row { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 10px; }
.dd-row span { display: block; font-size: 12px; color: rgba(255,255,255,.75); }
.dd-row b { font-family: var(--display); font-weight: 900; font-size: 18px; }
.dd-row b.g { color: #7dffc8; } .dd-row b.rd { color: #ffb3bf; } .dd-row .r { text-align: right; }
.dd-t { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 12px; background: rgba(20,8,70,.35); font-family: var(--display); font-weight: 800; font-size: 13px; }
.dd-t span { display: inline; font-size: 13px; color: #fff; } .dd-t svg { width: 16px; height: 16px; color: var(--gold1); }
.d-details .tops { margin: 0; }
.d-details .tops .col { padding: 8px 6px 4px; border-radius: 16px; background: rgba(20,8,70,.22); }
.d-details .duel-prize { margin: 10px 0 4px; }
.duel2.locked { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; opacity: .85; }
.duel2.locked .lk { width: 50px; height: 50px; border-radius: 16px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.duel2.locked .lk svg { width: 26px; height: 26px; }
.duel2.locked .t1 { font-family: var(--display); font-weight: 800; font-size: 16px; } .duel2.locked .t2 { font-size: 13px; color: rgba(255,255,255,.78); margin-top: 3px; }
.callfriend { position: relative; margin-top: 18px; padding: 18px 16px 16px; border-radius: 26px; color: var(--ink); background: linear-gradient(135deg, #fff 0%, #fff4d6 100%); box-shadow: 0 12px 30px rgba(30,10,80,.3); overflow: hidden; }
.callfriend h2 { color: var(--ink); font-size: 20px; }
.callfriend p { margin: 6px 0 12px; font-size: 14px; color: var(--ink2); max-width: 210px; }
.callfriend p b { color: #e07b00; }
.cf-pets { position: absolute; right: -4px; top: 6px; width: 120px; height: 100px; }
.cf-pets .pet { position: absolute; width: 70px; } .cf-pets .pet:nth-child(1) { right: 36px; top: 0; } .cf-pets .pet:nth-child(2) { right: 0; top: 26px; width: 62px; }
.cf-ava { display: flex; align-items: center; margin-bottom: 14px; }
.cf-ava .ava { width: 34px; height: 34px; margin-right: -8px; box-shadow: 0 0 0 2.5px #fff; }
.cf-ava span { margin-left: 16px; font-size: 13px; color: var(--ink2); font-weight: 800; }
.cf-btns { display: flex; gap: 10px; }
.cf-btns .btn { height: 54px; }
.cf-copy { width: 54px; height: 54px; flex: none; border-radius: 18px; background: #f1ecff; color: #6d4ff5; display: grid; place-items: center; }
.cf-copy svg { width: 22px; height: 22px; }
.scr.scroll .pad:last-child { padding-bottom: 8px; }

/* магазин v2 */
.items { grid-template-columns: repeat(3, 1fr); }
.item.afford { box-shadow: inset 0 0 0 2px rgba(47,216,151,.8); }
.item .pr.can { background: rgba(47,216,151,.3); }
.item .new.ok { background: var(--green); color: #053d29; }

.tops .p .s { white-space: nowrap; font-size: 11px; }
.d-details .tops .p .n { font-size: 12.5px; }
.callbar { width: 100%; margin-top: 14px; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 22px; background: linear-gradient(135deg, #fff 0%, #fff4d6 100%); color: var(--ink); box-shadow: 0 10px 26px rgba(30,10,80,.28); text-align: left; }
.callbar .cf-ava { display: flex; flex: none; }
.callbar .cf-ava .ava { width: 34px; height: 34px; margin-right: -10px; box-shadow: 0 0 0 2.5px #fff; }
.callbar .cb-t { flex: 1; margin-left: 10px; min-width: 0; }
.callbar .cb-t b { display: block; font-family: var(--display); font-weight: 800; font-size: 15px; }
.callbar .cb-t small { font-size: 12.5px; color: #e07b00; font-weight: 800; }
.callbar .btn.sm { flex: none; }
.clan-head { padding-top: 16px; }
.callbar .cb-t b { white-space: nowrap; font-size: 14.5px; }
.callbar .cb-t small { white-space: nowrap; display: block; }
.callbar .cf-ava .ava { width: 32px; height: 32px; }
.callbar .btn.sm { padding: 0 12px; }
.callbar .cb-t { margin-left: 0; overflow: hidden; }
.callbar .cb-ic { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #ff9ad5, #ff5aa5); box-shadow: 0 3px 0 #d63c86; }
.callbar .cb-ic svg { width: 26px; height: 26px; }