:root {
  --bg: #050914; --panel: rgba(14, 24, 48, .78); --line: rgba(34, 230, 255, .22);
  --cyan: #22e6ff; --mag: #ff3ea5; --gold: #ffb43a; --violet: #c46bff; --green: #5dff9b; --red: #ff5470;
  --txt: #e6f1ff; --mut: #8ea3c4;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt);
  font: 15px/1.35 "Segoe UI", Roboto, system-ui, sans-serif; overflow: hidden; user-select: none; }
#stars { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 80%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 40% 60%, #9ff, transparent), radial-gradient(1px 1px at 85% 20%, #fff7, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff5, transparent), radial-gradient(2px 2px at 60% 15%, #f9f6, transparent),
    radial-gradient(ellipse at 50% -20%, #1a2b6b88, transparent 60%), radial-gradient(ellipse at 100% 100%, #5a1a6b55, transparent 50%);
  background-size: 300px 300px, 400px 400px, 500px 500px, 350px 350px, 450px 450px, 600px 600px, 100% 100%, 100% 100%;
  animation: drift 120s linear infinite; }
@keyframes drift { to { background-position: 300px 600px, -400px 800px, 500px 1000px, -350px 700px, 450px 900px, 600px 1200px, 0 0, 0 0; } }
#app { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; max-width: 560px; margin: 0 auto; }

/* Верх */
#top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: linear-gradient(#050914, #050914cc); border-bottom: 1px solid var(--line); }
.logo { font-weight: 800; letter-spacing: 2px; font-size: 14px; color: var(--cyan); text-shadow: 0 0 10px var(--cyan); }
.logo b { color: var(--mag); text-shadow: 0 0 10px var(--mag); }
.curs { display: flex; gap: 6px; }
.cur { background: #0c1630; border: 1px solid var(--line); border-radius: 20px; padding: 3px 9px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.cur.gem { border-color: #c46bff66; } .cur.en { border-color: #ffb43a66; }
.cur small { color: var(--mut); font-weight: 400; font-size: 11px; }

#view { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 20px; }
section { animation: fadein .25s; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } }

/* Таби */
#tabs { display: flex; background: #070d1fee; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
#tabs button { flex: 1; background: none; border: 0; color: var(--mut); font-size: 11px; padding: 7px 0 8px; position: relative; font-family: inherit; }
#tabs button span { display: block; font-size: 20px; filter: grayscale(.7); transition: .2s; }
#tabs button.on { color: var(--cyan); }
#tabs button.on span { filter: none; transform: translateY(-2px) scale(1.1); text-shadow: 0 0 12px var(--cyan); }
#tabs button.on::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#tabs button.alert::after { content: ''; position: absolute; top: 6px; right: calc(50% - 16px); width: 8px; height: 8px; border-radius: 50%; background: var(--mag); box-shadow: 0 0 6px var(--mag); animation: pulse 1s infinite; }

/* Базові */
h2 { margin: 0 0 6px; font-size: 20px; }
h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--cyan); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 10px; backdrop-filter: blur(4px); }
.sub { color: var(--mut); font-size: 13px; } .tiny { font-size: 11px; margin-top: 3px; }
.center { text-align: center; } .grow { flex: 1; min-width: 0; }
.red { color: var(--red); } .green { color: var(--green); } .hidden { display: none !important; }
.big { font-size: 30px; font-weight: 800; } .big small { font-size: 15px; color: var(--mut); }
.row { display: flex; gap: 8px; margin-top: 10px; } .row.wrap { flex-wrap: wrap; } .row > .btn { flex: 1; }
.lv { background: #0c1630; border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; font-size: 12px; color: var(--cyan); white-space: nowrap; }
.btn { background: linear-gradient(135deg, #0fb5d8, #2266ff); color: #fff; border: 0; border-radius: 12px; padding: 10px 12px;
  font: 700 14px inherit; font-family: inherit; box-shadow: 0 0 14px #22e6ff44; cursor: pointer; text-align: center; transition: transform .1s, filter .1s; }
.btn:active { transform: scale(.94); filter: brightness(1.3); }
.btn small { display: block; font-weight: 400; font-size: 11px; opacity: .85; }
.btn.sm { padding: 7px 11px; font-size: 13px; }
.btn.gem { background: linear-gradient(135deg, #a33bff, #ff3ea5); box-shadow: 0 0 14px #ff3ea544; }
.btn.gold { background: linear-gradient(135deg, #ffb43a, #ff6a2b); box-shadow: 0 0 16px #ffb43a66; color: #1a0d00; animation: glowpulse 2s infinite; }
.btn.bad { background: linear-gradient(135deg, #ff5470, #b3123b); }
.btn.ghost { background: #0c1630; border: 1px solid var(--line); box-shadow: none; color: var(--txt); }
.btn:disabled { opacity: .4; filter: grayscale(.8); }
@keyframes glowpulse { 50% { box-shadow: 0 0 26px #ffb43aaa; } }
input { width: 100%; background: #0c1630; border: 1px solid var(--line); color: var(--txt); border-radius: 10px; padding: 10px; font: inherit; }
.bar { height: 8px; background: #0a142b; border-radius: 6px; overflow: hidden; border: 1px solid #ffffff10; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #2266ff); border-radius: 6px; transition: width .4s; box-shadow: 0 0 8px var(--cyan); }
.bar.xp i { background: linear-gradient(90deg, var(--violet), var(--mag)); box-shadow: 0 0 8px var(--mag); }
.bar.food i { background: linear-gradient(90deg, #ffb43a, #ff7a2b); }
.bar.fun i { background: linear-gradient(90deg, #5dff9b, #22c8a0); }
.bar.rest i { background: linear-gradient(90deg, #22e6ff, #6a8bff); }
.bar.low i { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ===== Пет ===== */
.pet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pet-name { font-size: 22px; font-weight: 800; cursor: pointer; }
.power { font-size: 22px; font-weight: 800; color: var(--gold); text-align: right; text-shadow: 0 0 10px #ffb43a88; }
.power small { display: block; font-size: 11px; color: var(--mut); font-weight: 400; text-shadow: none; }
.pet-stage { position: relative; height: 250px; display: flex; justify-content: center; align-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--pc) 16%, transparent), transparent 62%); }
/* голографічна платформа */
.pad { position: absolute; left: 50%; bottom: 14px; width: 190px; height: 44px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--pc) 35%, transparent), transparent 70%);
  border: 2px solid color-mix(in srgb, var(--pc) 60%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--pc) 40%, transparent); }
/* кільця — кола, сплющені в перспективі: обертання рухає штрихи, а не нахиляє еліпс */
.pad i { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--pc) 55%, transparent); animation: padring 9s linear infinite; }
.pad i + i { width: 130px; height: 130px; border: 3px dotted color-mix(in srgb, var(--pc) 70%, transparent); animation-duration: 5s; animation-direction: reverse; }
@keyframes padring { from { transform: translate(-50%, -50%) scaleY(.22) rotate(0); } to { transform: translate(-50%, -50%) scaleY(.22) rotate(360deg); } }
.pad::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 50%; height: 170px;
  background: linear-gradient(to top, color-mix(in srgb, var(--pc) 18%, transparent), transparent); clip-path: polygon(0 100%, 100% 100%, 85% 0, 15% 0); pointer-events: none; animation: beamp 3s ease-in-out infinite; }
@keyframes padspin { to { transform: rotate(360deg); } }
@keyframes beamp { 50% { opacity: .5; } }
.petsvg { width: 220px; height: 230px; overflow: visible; position: relative; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pc) 45%, transparent)); }
/* fill-box — лише для анімованих частин (без атрибута transform), інакше ламаються SVG-трансформації */
.p-shadow, .p-flame, .p-ant, .p-finL, .p-finR, .p-eyes, .p-core, .p-halo, .p-emote { transform-box: fill-box; }
.p-hover { animation: hover 3s ease-in-out infinite; }
.p-shadow { transform-origin: center; animation: shadow 3s ease-in-out infinite; }
.p-flame { transform-origin: top center; animation: flame .12s ease-in-out infinite alternate; }
.p-armL { animation: armbob 3s ease-in-out infinite; } .p-armR { animation: armbob 3s ease-in-out -1.5s infinite; }
.p-ant { transform-origin: bottom center; animation: sway 2.6s ease-in-out infinite; }
.p-tip { animation: pulse 1.4s infinite; }
.p-finL { transform-origin: right bottom; animation: flapL 3s ease-in-out infinite; }
.p-finR { transform-origin: left bottom; animation: flapR 3s ease-in-out infinite; }
.p-eyes { transform-origin: center; animation: blink 4.5s infinite; }
.p-core { transform-origin: center; animation: corep 1.8s ease-in-out infinite; }
.p-halo { transform-origin: center; animation: halo 4s ease-in-out infinite; }
.p-orbit { transform-origin: 100px 120px; animation: padspin 6s linear infinite; }
.p-blade { animation: pulse .8s infinite; }
.p-emote { transform-origin: center bottom; animation: emote 2s ease-in-out infinite; }
.petsvg .zzz { font: 700 18px sans-serif; animation: zzz 2.4s infinite; } .petsvg .zzz.d2 { animation-delay: 1.2s; }
.petsvg.sleep { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pc) 25%, transparent)) saturate(.6); }
.petsvg.sleep .p-hover { animation-duration: 6s; }
.petsvg.sleep .p-ant, .petsvg.sleep .p-finL, .petsvg.sleep .p-finR { animation-play-state: paused; }
/* частини гілок еволюції */
.p-fire, .p-wingL, .p-aura, .p-wisp, .p-crown { transform-box: fill-box; }
.p-fire { transform-origin: bottom center; animation: fire .32s ease-in-out infinite alternate; }
.p-shard { animation: glint 2.6s ease-in-out infinite; }
.p-wingL { transform-origin: right center; animation: pwing 2.2s ease-in-out infinite; }
.p-corona { transform-origin: 100px 122px; animation: padspin 22s linear infinite; }
.p-orbit2 { transform-origin: 100px 122px; animation: padspin 9s linear infinite; }
.p-aura { transform-origin: center; animation: aura 3s ease-in-out infinite; }
.p-wisp { transform-origin: top center; animation: sway 1.8s ease-in-out infinite; }
.p-crown { transform-origin: center; animation: halo 4s ease-in-out infinite; }
@keyframes fire { to { transform: scaleY(1.16) scaleX(.9) skewX(4deg); } }
@keyframes glint { 50% { opacity: .7; } }
@keyframes pwing { 50% { transform: rotate(-9deg) scaleX(.9); } }
@keyframes aura { 50% { transform: scale(1.08); opacity: .65; } }
@keyframes hover { 50% { transform: translateY(-9px); } }
@keyframes shadow { 50% { transform: scale(.78); opacity: .12; } }
@keyframes flame { from { transform: scaleY(.75) scaleX(.9); opacity: .8; } to { transform: scaleY(1.15) scaleX(1.05); opacity: 1; } }
@keyframes armbob { 50% { transform: translate(0, -7px); } }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes flapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes flapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes corep { 50% { transform: scale(1.35); opacity: .6; } }
@keyframes halo { 50% { transform: translateY(-4px) scaleX(.85); } }
@keyframes emote { 50% { transform: translateY(-5px) rotate(5deg); } }
@keyframes zzz { from { opacity: 0; transform: translate(0, 0); } 50% { opacity: 1; } to { opacity: 0; transform: translate(10px, -16px); } }
.cond { text-align: center; margin: -4px 0 10px; color: var(--mut); }

/* ===== Еволюції ===== */
.evo { border-color: #ffb43a55; }
.evo-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.petsvg.prev { width: 74px; height: 78px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pc) 45%, transparent)); }
.locked .petsvg.prev { filter: brightness(0) drop-shadow(0 0 5px var(--pc)); opacity: .85; }
.evo-next { display: flex; align-items: center; gap: 6px; margin: 4px 0 8px; }
.evo-pv { flex: none; }
.arrow { color: var(--gold); font-weight: 900; text-shadow: 0 0 8px var(--gold); flex: none; }
.btn.wide { width: 100%; }
.evo-foot { margin-top: 8px; } .evo-foot a { color: var(--cyan); text-decoration: underline; cursor: pointer; }
.branches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.br { text-align: center; background: color-mix(in srgb, var(--pc) 10%, #0a1430); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  border-radius: 12px; padding: 6px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.br b { font-size: 12px; color: var(--pc); } .br small { font-size: 10px; color: var(--mut); min-height: 26px; }
.br .btn { width: 100%; margin-top: 2px; }
.evo-big .petsvg.prev { width: 170px; height: 180px; }
.tree { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.trow { display: flex; align-items: center; justify-content: center; gap: 2px; }
.tbranch { border-top: 1px solid var(--line); padding-top: 8px; }
.tb-h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tcell { width: 88px; text-align: center; border-radius: 12px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; }
.tcell .petsvg.prev { width: 62px; height: 66px; }
.tcell small { font-size: 10px; line-height: 1.2; }
.tcell.cur { background: color-mix(in srgb, var(--pc) 16%, transparent); box-shadow: 0 0 0 1px var(--pc), 0 0 14px color-mix(in srgb, var(--pc) 45%, transparent); }
.fxflash { position: absolute; inset: 0; width: 100%; height: 100%; left: 0 !important; top: 0 !important; }
.need { display: grid; grid-template-columns: 105px 1fr 32px; align-items: center; gap: 8px; margin: 4px 0; }
.need b { text-align: right; font-size: 13px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; font-weight: 700; }
.stats small { display: block; color: var(--mut); font-weight: 400; font-size: 11px; }
.upg { display: flex; align-items: center; gap: 10px; padding: 10px; }
.ic { font-size: 26px; width: 36px; text-align: center; }

/* ===== Арена ===== */
.arena { position: relative; height: 290px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(#081230, #050914);
  display: grid; grid-template-columns: 1fr 40px 1fr; align-items: end; padding: 40px 8px 26px; }
.arena .neb { position: absolute; inset: -30%; pointer-events: none; opacity: .9;
  background: radial-gradient(ellipse 40% 30% at 30% 40%, #2266ff44, transparent 70%), radial-gradient(ellipse 35% 25% at 72% 30%, #ff3ea533, transparent 70%),
    radial-gradient(1px 1px at 20% 20%, #fff, transparent), radial-gradient(1px 1px at 60% 10%, #fffa, transparent), radial-gradient(1.5px 1.5px at 80% 35%, #9ff, transparent),
    radial-gradient(1px 1px at 40% 30%, #fff8, transparent), radial-gradient(1px 1px at 90% 15%, #fff9, transparent);
  animation: nebula 40s linear infinite alternate; }
.arena.dun { border-color: #c46bff66; }
.arena.dun .neb { background: radial-gradient(ellipse 45% 35% at 40% 35%, #8a3bff55, transparent 70%), radial-gradient(ellipse 35% 25% at 75% 45%, #ff3ea544, transparent 70%),
    radial-gradient(1px 1px at 20% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 35%, #f9f, transparent); }
@keyframes nebula { to { transform: translate(6%, 4%) rotate(4deg); } }
/* підлога-сітка, що «їде» на глядача */
.arena .floor { position: absolute; left: -50%; right: -50%; bottom: 0; height: 90px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #22e6ff30 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, #22e6ff30 0 1px, transparent 1px 22px), linear-gradient(transparent, #22e6ff22);
  transform: perspective(160px) rotateX(55deg); transform-origin: bottom; animation: floor 1.4s linear infinite;
  -webkit-mask-image: linear-gradient(transparent, #000 40%); mask-image: linear-gradient(transparent, #000 40%); }
.arena.dun .floor { background: repeating-linear-gradient(90deg, #c46bff38 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, #c46bff38 0 1px, transparent 1px 22px), linear-gradient(transparent, #c46bff22); }
@keyframes floor { to { background-position: 0 22px, 0 22px, 0 0; } }
.wlabel { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-weight: 800; letter-spacing: 1px; z-index: 2; text-shadow: 0 0 10px #000; }
.boss { background: var(--red); color: #fff; padding: 1px 7px; border-radius: 6px; font-size: 12px; box-shadow: 0 0 10px var(--red); animation: pulse 1s infinite; }
.boost { background: var(--mag); padding: 1px 7px; border-radius: 6px; font-size: 12px; }
.fighter { text-align: center; z-index: 1; position: relative; }
.hp { position: relative; height: 16px; background: #0a142bcc; border-radius: 8px; overflow: hidden; border: 1px solid #ffffff22; margin-bottom: 4px; }
.hp i { display: block; height: 100%; background: linear-gradient(90deg, #5dff9b, #22c8a0); transition: width .15s; box-shadow: 0 0 8px #5dff9b; }
.hp.foe i { background: linear-gradient(90deg, #ff5470, #ff3ea5); box-shadow: 0 0 8px #ff3ea5; }
.hp span { position: absolute; inset: 0; font-size: 11px; line-height: 15px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.mini { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.mini .petsvg { width: 140px; height: 148px; }
.mini.low .petsvg { animation: lowhp .8s ease-in-out infinite; }
@keyframes lowhp { 50% { filter: drop-shadow(0 0 12px #ff5470) brightness(.85); } }
.vs { text-align: center; font-weight: 900; color: var(--mag); text-shadow: 0 0 10px var(--mag); align-self: center; z-index: 1; animation: pulse 2s infinite; }
.foe-ic { height: 150px; display: flex; align-items: flex-end; justify-content: center; }
/* Ворог: 3 шари SVG один над одним */
.ewrap { position: relative; width: 140px; height: 140px; flex: none; }
.foe-ic.big .ewrap { width: 172px; height: 172px; margin-bottom: -8px; }
.ewrap > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.esvg { filter: drop-shadow(0 0 10px #ff3ea555); }
.is-boss .esvg { filter: drop-shadow(0 0 16px #ff5470aa); }
.ewrap.giant { transform: scale(1.22); transform-origin: bottom center; }
.ewrap.elite .esvg { filter: drop-shadow(0 0 4px #ffd36a) drop-shadow(0 0 14px #ffb43a88); }
/* Тіри — фільтр лише на шарі моделі */
.ewrap .esvg.tier-1 { filter: saturate(.2) brightness(1.25) contrast(1.15) drop-shadow(0 0 10px #d8e4f4aa); }
.ewrap .esvg.tier-2 { filter: saturate(1.8) hue-rotate(150deg) brightness(1.1) drop-shadow(0 0 12px #22e6ff); }
.ewrap .esvg.tier-3 { filter: sepia(.5) saturate(2.6) hue-rotate(-18deg) drop-shadow(0 0 12px #ff5a2a); }
.ewrap .esvg.tier-4 { filter: hue-rotate(230deg) saturate(1.5) drop-shadow(0 0 12px #b07aff); }
.ewrap .esvg.native[class] { filter: drop-shadow(0 0 3px var(--glow)) drop-shadow(0 0 12px color-mix(in srgb, var(--glow) 55%, transparent)); }
.ewrap .esvg.tier-5 { filter: grayscale(1) brightness(.6) contrast(1.6) drop-shadow(0 0 2px #ffd36a) drop-shadow(0 0 12px #ffd36a88); }
.ewrap.swift .e-bob, .ewrap.swift .e-hover, .ewrap.swift .e-float, .ewrap.swift .e-seg { animation-duration: .7s; }
/* ефекти еліти й тірів */
.a-ring, .a-shield, .a-twinkle, .a-scan { transform-box: fill-box; transform-origin: center; }
.a-pulse { animation: pulse 1.8s ease-in-out infinite; }
.a-ring { animation: aring 1.6s ease-in-out infinite; }
.a-shield { animation: ashield 2s ease-in-out infinite; }
.foe-ic.shield-down .a-shield { display: none; }
.a-spin { transform-origin: 100px 112px; animation: padspin 12s linear infinite; }
.a-after { animation: after .5s ease-in-out infinite alternate; }
.a-speed path { animation: speed .6s linear infinite; }
.a-twinkle { animation: twinkle 1.8s ease-in-out infinite; }
.a-ember { animation: ember 2.2s linear infinite; }
.a-scan { animation: ascan 1.6s ease-out infinite; }
@keyframes aring { 50% { transform: scale(1.08); opacity: .55; } }
@keyframes ashield { 50% { transform: scale(1.03); opacity: .75; } }
@keyframes after { from { transform: translateX(-10px); } to { transform: translateX(-22px); opacity: .08; } }
@keyframes speed { from { transform: translateX(10px); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(-24px); opacity: 0; } }
@keyframes twinkle { 0%, 100% { transform: scale(.3); opacity: .2; } 50% { transform: scale(1); opacity: 1; } }
@keyframes ember { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-80px); opacity: 0; } }
@keyframes ascan { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.hp .sh { position: absolute; left: 0; top: 0; bottom: 0; width: 0; transition: width .15s;
  background: repeating-linear-gradient(45deg, #3fa9ffdd 0 6px, #8fd0ffdd 6px 12px); box-shadow: 0 0 8px #3fa9ff; }
.tierb { border: 1px solid var(--c); color: var(--c); padding: 0 6px; border-radius: 6px; font-size: 11px; box-shadow: 0 0 6px color-mix(in srgb, var(--c) 50%, transparent); }
.eliteb { background: linear-gradient(90deg, #ffd36a, #ff9a2a); color: #1a0d00; padding: 1px 7px; border-radius: 6px; font-size: 12px; box-shadow: 0 0 10px #ffb43a; }
.echips { display: flex; gap: 3px; justify-content: center; flex-wrap: wrap; margin-top: 2px; }
.echip { font-size: 9px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--c); color: var(--c); background: #050914cc; white-space: nowrap; }
.gold { color: var(--gold); }
.foe-n { font-size: 12px; color: var(--mut); }

/* Анімації частин ворогів */
.e-shadow, .e-ant, .e-armL, .e-armR, .e-beam, .e-leg, .e-cloak, .e-gun, .e-jaw, .e-jaw2, .e-smoke, .e-wingL, .e-wingR, .e-breath { transform-box: fill-box; }
.e-bob { animation: ebob 2.4s ease-in-out infinite; } .e-hover { animation: ebob 1.8s ease-in-out infinite; } .e-float { animation: ebob 3.2s ease-in-out infinite; }
.e-shadow { transform-origin: center; animation: shadow 2.4s ease-in-out infinite; }
.e-pulse { animation: pulse 1.2s infinite; } .e-blink { animation: pulse .5s steps(2) infinite; } .e-blink2 { animation: pulse 2.2s steps(2) infinite; }
.e-light { animation: pulse .7s infinite; }
.e-ant { transform-origin: bottom center; animation: sway 1.6s ease-in-out infinite; }
.e-armL { transform-origin: top center; animation: earm 1.8s ease-in-out infinite; } .e-armR { transform-origin: top center; animation: earm 1.8s ease-in-out -.9s infinite; }
.e-wobble { transform-origin: 100px 178px; animation: wobble 1.5s ease-in-out infinite; }
.e-bub { animation: bub 2.4s linear infinite; }
.e-look { animation: look 3.5s ease-in-out infinite; }
.e-beam { transform-origin: top center; animation: beam 1.1s ease-in-out infinite; }
.e-leg { transform-origin: right top; animation: leg .45s ease-in-out infinite alternate; }
.e-cloak { transform-origin: top center; animation: cloak 2.8s ease-in-out infinite; }
.e-mote { animation: mote 3s linear infinite; }
.e-scan { animation: scan 1.4s ease-in-out infinite alternate; }
.e-gun { transform-origin: right center; animation: gun 2.4s ease-in-out infinite; }
/* пізні вороги */
.e-tent, .e-scythe, .e-tail { transform-box: fill-box; }
.e-tent { transform-origin: top center; animation: tent 2.2s ease-in-out infinite; }
.e-scythe { transform-origin: 75% 100%; animation: scythe 2.6s ease-in-out infinite; }
.e-tail { transform-origin: right center; animation: tail 1.8s ease-in-out infinite; }
@keyframes tent { 50% { transform: rotate(7deg) scaleY(.94); } }
@keyframes scythe { 50% { transform: rotate(-10deg); } }
@keyframes tail { 50% { transform: rotate(-12deg); } }
.e-seg { animation: ebob 1.1s ease-in-out infinite; }
.e-jaw { transform-origin: left bottom; animation: jaw .4s ease-in-out infinite alternate; }
.e-jaw2 { transform-origin: left top; animation: jaw2 .4s ease-in-out infinite alternate; }
.e-glitch { animation: glitch 3s infinite; }
.e-smoke { animation: smoke 2s ease-out infinite; }
.e-wingL { transform-origin: right center; animation: wingL .09s linear infinite alternate; }
.e-wingR { transform-origin: left center; animation: wingR .09s linear infinite alternate; }
.e-spin { transform-origin: 100px 110px; animation: padspin 10s linear infinite; }
.e-spinR { transform-origin: 100px 110px; animation: padspin 3.5s linear infinite; }
.e-spin2 { transform-origin: 100px 110px; animation: padspin 5s linear infinite reverse; }
.e-breath { transform-origin: center; animation: breath .9s ease-in-out infinite; }
@keyframes ebob { 50% { transform: translateY(-6px); } }
@keyframes earm { 50% { transform: rotate(8deg); } }
@keyframes wobble { 0%, 100% { transform: scale(1, 1); } 25% { transform: scale(1.06, .94); } 50% { transform: scale(.96, 1.05); } 75% { transform: scale(1.03, .97); } }
@keyframes bub { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .6; } 100% { transform: translateY(-60px); opacity: 0; } }
@keyframes look { 0%, 40%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(-4px); } 80%, 95% { transform: translateX(3px); } }
@keyframes beam { 50% { transform: scaleX(.75); opacity: .55; } }
@keyframes leg { to { transform: rotate(6deg); } }
@keyframes cloak { 50% { transform: skewX(3deg) scaleY(1.02); } }
@keyframes mote { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes scan { to { transform: translateX(40px); } }
@keyframes gun { 50% { transform: rotate(-6deg); } }
@keyframes jaw { to { transform: rotate(-14deg); } } @keyframes jaw2 { to { transform: rotate(14deg); } }
@keyframes glitch { 0%, 88%, 100% { transform: none; opacity: 1; } 90% { transform: translateX(-5px) skewX(10deg); opacity: .6; } 92% { transform: translateX(4px); opacity: 1; } 94% { transform: translateX(-2px) skewX(-6deg); opacity: .7; } }
@keyframes smoke { from { transform: translateY(0) scale(.6); opacity: .5; } to { transform: translateY(-30px) scale(1.6); opacity: 0; } }
@keyframes wingL { to { transform: rotate(-10deg) scaleY(.85); } } @keyframes wingR { to { transform: rotate(10deg) scaleY(.85); } }
@keyframes breath { 50% { transform: scale(1.4); opacity: .7; } }

.sleepnote { position: absolute; inset: 0; background: #050914cc; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; z-index: 3; font-weight: 700; text-align: center; }
.ctl { margin-top: 10px; }
.tgl { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 6px; }
.tgl input { display: none; }
.tgl span { width: 42px; height: 24px; border-radius: 12px; background: #1a2440; position: relative; transition: .2s; flex: none; }
.tgl span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8ea3c4; transition: .2s; }
.tgl input:checked + span { background: #0fb5d8; box-shadow: 0 0 10px var(--cyan); }
.tgl input:checked + span::after { left: 21px; background: #fff; }
.log { max-height: 220px; overflow-y: auto; font-size: 13px; }
.log div { padding: 3px 0; border-bottom: 1px solid #ffffff0a; }
.log div:first-child { animation: fadein .3s; }
.new { background: var(--mag); color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 5px; }

/* ===== Шар ефектів ===== */
#fxl, #fxm { position: fixed; inset: 0; pointer-events: none; z-index: 9; overflow: hidden; } /* #fxl під вікном (#modal z 10) */
#fxm { z-index: 25; }
.bolt { position: absolute; width: 30px; height: 4px; border-radius: 2px; transform-origin: right center; margin-left: -30px; margin-top: -2px; }
.spk { position: absolute; border-radius: 50%; }
.fxring { position: absolute; border: 3px solid; border-radius: 50%; transform: translate(-50%, -50%); }
.ftxt { position: absolute; font-weight: 900; font-size: 18px; white-space: nowrap; text-shadow: 0 0 6px #000, 0 2px 0 #000; }
.ftxt.to-foe { color: #fff; } .ftxt.to-me { color: var(--red); }
.ftxt.crit { color: var(--gold); font-size: 25px; text-shadow: 0 0 10px #ff6a2b, 0 2px 0 #000; }
.ftxt.lvlup { color: var(--gold); font-size: 22px; letter-spacing: 2px; text-shadow: 0 0 14px #ffb43a, 0 2px 0 #000; }
.femo { position: absolute; font-size: 22px; } .femo.big { font-size: 34px; }
.fxghost { position: absolute; display: flex; align-items: flex-end; justify-content: center; }
.fxghost .ewrap { width: 100%; height: 100%; }
.ftxt.shield { color: #8fd0ff; font-size: 15px; text-shadow: 0 0 8px #3fa9ff, 0 2px 0 #000; }
.ftxt.heal { color: #ff6a8a; font-size: 15px; text-shadow: 0 0 8px #ff2a4a, 0 2px 0 #000; }
.bossban.elite { background: linear-gradient(90deg, transparent, #ffb43add 20%, #ff9a2add 80%, transparent); color: #1a0d00; font-size: 26px; text-shadow: none; }
.bossban { position: absolute; font-size: 34px; font-weight: 900; letter-spacing: 4px; color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, transparent, #ff5470dd 20%, #ff3ea5dd 80%, transparent); padding: 6px 60px; text-shadow: 0 0 12px #ff0040; }

/* Данжі */
.en-card { text-align: center; }
.dun-h { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.dic { font-size: 34px; filter: drop-shadow(0 0 8px #22e6ff88); }
.dun .btn { width: 100%; margin-top: 8px; }
.dun.locked { opacity: .55; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.chip { font-size: 11px; border: 1px solid var(--c); color: var(--c); border-radius: 8px; padding: 1px 7px; }

/* ===== Предмети ===== */
.item { position: relative; width: 58px; height: 58px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 28%, transparent), #0a1430 72%); border: 2px solid var(--c);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 12px #0008; cursor: pointer; transition: transform .12s; }
.item:active { transform: scale(.92); }
.isvg { width: 78%; height: 78%; overflow: visible; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 70%, transparent)); }
.i-glow { animation: pulse 1.6s infinite; }
.item.rar-e::before, .item.rar-l::before { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #ffffff55 50%, transparent 65%) -150% 0 / 250% 100% no-repeat; animation: shine 3.2s ease-in-out infinite; }
.item.rar-l { animation: legend 2s ease-in-out infinite; }
.item.rar-l::before { animation-duration: 2.2s; }
@keyframes shine { 0%, 40% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes legend { 50% { box-shadow: 0 0 22px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); } }
.item.empty { --c: #2a3756; opacity: .45; filter: grayscale(1); }
.item.big { width: 80px; height: 80px; flex: none; }
.il { position: absolute; bottom: 1px; right: 4px; font-size: 11px; font-weight: 800; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.ie { position: absolute; top: -6px; left: -6px; background: var(--green); color: #000; font-size: 10px; font-weight: 900; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.im { position: absolute; top: -7px; right: -7px; background: var(--mag); color: #fff; font-size: 11px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: pulse 1s infinite; }
.equip { display: flex; justify-content: space-around; }
.eslot { text-align: center; } .eslot small { display: block; color: var(--mut); font-size: 11px; margin-top: 4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, 58px); gap: 12px; justify-content: space-between; padding-top: 6px; }
.tip { font-size: 13px; border-color: #ff3ea544; margin-top: 12px; }
.imh { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.sl { padding: 3px 0; display: flex; gap: 6px; } .sl b { margin-left: auto; }
.drops { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-height: 50vh; overflow-y: auto; padding: 8px; }
.drop { width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; animation: dropin .5s backwards; }
.drop:nth-child(2) { animation-delay: .08s; } .drop:nth-child(3) { animation-delay: .16s; } .drop:nth-child(4) { animation-delay: .24s; }
.drop:nth-child(n+5) { animation-delay: .32s; }
.drop small { font-size: 11px; }
@keyframes dropin { from { transform: scale(0) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15); } }

/* Колекції */
.coll { border-color: color-mix(in srgb, var(--c) 30%, transparent); }
.coll.done { box-shadow: 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); }
.cset { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ci { background: #0a1430; border: 1px dashed #2a3756; border-radius: 10px; text-align: center; padding: 6px 2px; }
.ci span { height: 36px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #2a3756; font-weight: 800; }
.ci span .isvg { width: 36px; height: 36px; }
.ci small { font-size: 10px; color: var(--mut); display: block; line-height: 1.15; }
.ci.has { border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #0a1430); }
.bonus { margin-top: 8px; font-size: 13px; }

/* Магазин */
.starter { position: relative; text-align: center; border-color: #ffb43a88; background: linear-gradient(135deg, #3a2205cc, #2a0a33cc); box-shadow: 0 0 20px #ffb43a33; overflow: hidden; }
.starter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, #ffffff18 50%, transparent 60%) -150% 0 / 250% 100% no-repeat; animation: shine 4s infinite; pointer-events: none; }
.starter .btn { margin-top: 10px; width: 70%; }
.tag { position: absolute; top: -9px; right: 10px; background: var(--mag); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 8px; letter-spacing: 1px; }
.starter .tag { position: static; display: inline-block; background: var(--gold); color: #1a0d00; margin-bottom: 6px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { position: relative; text-align: center; cursor: pointer; transition: transform .12s; }
.pack:active { transform: scale(.95); }
.pack .pg { font-size: 34px; filter: drop-shadow(0 0 10px var(--violet)); animation: ebob 2.5s ease-in-out infinite; }
.pack b { display: block; font-size: 20px; margin: 4px 0 8px; }
.shop-row { display: flex; align-items: center; gap: 10px; }

/* Модалки, тости */
#modal { position: fixed; inset: 0; background: #000a; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(3px); }
.box { width: 100%; max-width: 420px; background: #0b1530; border: 1px solid var(--cyan); border-radius: 18px; padding: 18px; box-shadow: 0 0 30px #22e6ff44; animation: pop .25s ease-out; max-height: 90vh; overflow-y: auto; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
#toasts { position: fixed; top: calc(56px + env(safe-area-inset-top)); left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: #0b1530f2; border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; font-size: 13px; max-width: 90%; animation: fadein .2s; transition: .5s; }
.toast.good { border-color: var(--green); } .toast.bad { border-color: var(--red); }
.toast.out { opacity: 0; transform: translateY(-10px); }
.monet-ov { position: fixed; inset: 0; z-index: 30; background: #000e; display: flex; align-items: center; justify-content: center; padding: 20px; }
.monet-box { background: #111; border: 1px dashed #888; border-radius: 14px; padding: 22px; text-align: center; max-width: 340px; width: 100%; }
.monet-tag { color: var(--gold); font-weight: 800; letter-spacing: 2px; font-size: 12px; }
.monet-big { font-size: 60px; font-weight: 900; color: var(--cyan); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; } }

/* ===== Щоденні завдання ===== */
.qbtn { position: relative; margin-right: auto; background: #0c1630; border: 1px solid var(--line); border-radius: 12px; width: 34px; height: 30px; font-size: 16px; line-height: 1; padding: 0; color: inherit; cursor: pointer; }
.qbtn i { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--mag); color: #fff; font: 700 10px/16px sans-serif; font-style: normal; box-shadow: 0 0 6px var(--mag); }
.qbtn i:empty { display: none; }
.qbtn.ready { border-color: var(--gold); box-shadow: 0 0 10px #ffb43a66; animation: glowpulse 2s infinite; }
.qwrap h2 { margin-bottom: 2px; }
.qlist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.quest { display: flex; align-items: center; gap: 10px; background: #0b1530; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; transition: border-color .3s, opacity .3s; }
.quest.ready { border-color: #5dff9b99; box-shadow: 0 0 12px #5dff9b33; }
.quest.claimed { opacity: .5; }
.quest .qi { font-size: 22px; width: 30px; text-align: center; flex: none; }
.quest .qb { flex: 1; min-width: 0; }
.quest .qn { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.quest .qr { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--mut); margin-top: 3px; }
.quest .qa { flex: none; min-width: 44px; text-align: right; }
.quest .qok { color: #5dff9b; font-weight: 700; font-size: 13px; white-space: nowrap; }
.qrr { padding: 6px 8px !important; }
.qhard { font-size: 10px; color: #ff9a5a; border: 1px solid #ff9a5a66; border-radius: 6px; padding: 0 4px; font-weight: 400; }
.qbonus { background: linear-gradient(135deg, #1a1030, #0b1530); border-color: #ffb43a55; margin-bottom: 8px; }
.qbonus.ready { border-color: var(--gold); box-shadow: 0 0 14px #ffb43a55; }
.bar.good i { background: linear-gradient(90deg, #5dff9b, #22c8a0); box-shadow: 0 0 8px #5dff9b; }

/* ===== Лабораторія ===== */
.labhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg { display: flex; background: #0a142b; border: 1px solid var(--line); border-radius: 10px; padding: 2px; flex: none; }
.seg button { background: none; border: 0; color: var(--mut); font-weight: 700; font-size: 12px; font-family: inherit; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.seg button.on { background: linear-gradient(135deg, #0fb5d8, #2266ff); color: #fff; box-shadow: 0 0 10px #22e6ff55; }
.upg.lab { align-items: center; transition: border-color .3s, box-shadow .3s; }
.upg.lab .ic { font-size: 26px; width: 40px; height: 40px; display: grid; place-items: center; background: #0a142b; border: 1px solid var(--line); border-radius: 12px; flex: none; }
.upg.lab.can { border-color: #22e6ff66; }
.upg.lab.can .ic { box-shadow: 0 0 10px #22e6ff44; }
.upg.lab .leff { font-size: 12px; margin-top: 3px; color: var(--txt); }
.upg.lab .leff .arrow { color: var(--mut); }
.upg.lab .lmile { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 10px; color: var(--mut); white-space: nowrap; }
.upg.lab .lmile .bar { flex: 1; height: 5px; }
.upg.lab .btn { min-width: 78px; flex: none; }
.upg.lab.locked { opacity: .45; filter: grayscale(.6); }
.upg.lab .lock { font-size: 12px; color: var(--mut); white-space: nowrap; }

/* ===== Перезапуск пустоти ===== */
.voidcard { background: linear-gradient(135deg, #1c0d36ee, #0b1530ee); border-color: #b07aff66; box-shadow: 0 0 18px #b07aff22; }
.voidcard .vh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.voidcard .vcores { background: #0c1630; border: 1px solid #b07aff88; border-radius: 20px; padding: 2px 10px; font-weight: 800; color: #d9c2ff; }
.voidcard .vgain { margin: 8px 0; font-size: 14px; }
.voidcard .bar { margin-top: 8px; }
.bar.void i { background: linear-gradient(90deg, #7a3dff, #ff3ea5); box-shadow: 0 0 8px #b07aff; }
.btn.void { background: linear-gradient(135deg, #7a3dff, #ff3ea5); box-shadow: 0 0 14px #b07aff55; }
.vnode.can { border-color: #b07aff88; }
.vnode.can .ic { box-shadow: 0 0 10px #b07aff55; }
.vcols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; font-size: 13px; line-height: 1.6; background: #0b1530; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }

/* ===== Предмети й сети тірів ===== */
.item.tiered { border-color: var(--tc) !important; box-shadow: 0 0 10px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--tc) 25%, transparent); }
.item.tiered { animation: tierglow 2.6s ease-in-out infinite; }
.item.tiered[data-t="5"] { animation-duration: 1.6s; }
@keyframes tierglow { 50% { box-shadow: 0 0 20px var(--tc), inset 0 0 16px color-mix(in srgb, var(--tc) 40%, transparent); } }
.item .it { position: absolute; top: 2px; left: 3px; font: 800 9px/1 sans-serif; color: #050914; background: var(--tc); border-radius: 4px; padding: 2px 3px; box-shadow: 0 0 6px var(--tc); }
.isvg .i-tier { transform-box: fill-box; transform-origin: center; animation: tierspin 9s linear infinite; }
@keyframes tierspin { to { transform: rotate(360deg); } }
.coll.tset { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, #0b1530), #0b1530); }
.coll.locked { opacity: .55; }
.tchip { display: inline-block; font-size: 10px; color: #050914; background: var(--c); border-radius: 5px; padding: 1px 5px; vertical-align: 2px; box-shadow: 0 0 6px var(--c); }
@media (prefers-reduced-motion: reduce) { .isvg .i-tier, .item.tiered { animation: none; } }

/* ===== Пізні данжі ===== */
.dun.late { background: linear-gradient(135deg, #2a0f1ccc, #0b1530ee); border-color: #ff6a2a55; }
.dun.late .dic { filter: drop-shadow(0 0 8px #ff6a2a); }
.dmod { margin: 6px 0; font-size: 12px; font-weight: 700; color: #ffb48a; background: #ff6a2a1a; border: 1px solid #ff6a2a55; border-radius: 8px; padding: 4px 8px; }

.chip.relic { font-weight: 700; box-shadow: 0 0 8px color-mix(in srgb, var(--c) 45%, transparent); }

/* ===== Пробудження ===== */
.awk-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.awk-stars { letter-spacing: 2px; font-size: 18px; }
.awk-stars i { font-style: normal; color: #3a4466; }
.awk-stars i.on { color: #ffd36a; text-shadow: 0 0 6px #ffb43a, 0 0 14px #ff9b2a; }
.awk-stars.big { font-size: 26px; text-align: center; padding: 4px 0; }
.awk-mini { color: #ffd36a; text-shadow: 0 0 6px #ffb43a; letter-spacing: 1px; }
.awk-req { display: flex; gap: 10px; justify-content: center; margin: 8px 0; font-weight: 700; font-size: 13px; }
.awk-req span { padding: 3px 8px; border-radius: 8px; background: rgba(255,255,255,.06); }
.pet-stage.awk .petsvg { filter: drop-shadow(0 0 calc(4px + var(--aw) * 3px) var(--pc)) drop-shadow(0 0 calc(var(--aw) * 6px) #ffd36a66); }
.pet-stage.awk-1 { --aw: 1; } .pet-stage.awk-2 { --aw: 2; } .pet-stage.awk-3 { --aw: 3; } .pet-stage.awk-4 { --aw: 4; } .pet-stage.awk-5 { --aw: 5; }
.pet-stage.awk::after { content: ''; position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px; border-radius: 50%;
  pointer-events: none; border: 2px dashed color-mix(in srgb, #ffd36a calc(var(--aw) * 14%), transparent); animation: awkSpin 18s linear infinite; }
.pet-stage.awk-3::before, .pet-stage.awk-4::before, .pet-stage.awk-5::before { content: ''; position: absolute; left: 50%; top: 50%; width: 236px; height: 236px; margin: -118px 0 0 -118px;
  border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--pc) 35%, transparent), transparent 30%, transparent 50%, #ffd36a55, transparent 80%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 62%, #000 64%, #000 70%, transparent 72%);
  animation: awkSpin 6s linear infinite reverse; }
.pet-stage.awk-5::after { border-style: solid; border-width: 3px; box-shadow: 0 0 24px #ffd36a55, inset 0 0 24px #ffd36a33; }
@keyframes awkSpin { to { transform: rotate(360deg); } }
/* ===== Стартовий екран ===== */
#intro { position: fixed; inset: 0; z-index: 22; display: flex; align-items: center; justify-content: center; padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top)); overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, #1a1450 0%, #070b1e 55%, #03050d 100%); }
#intro::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .6;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #cfefff, transparent),
    radial-gradient(1.5px 1.5px at 64% 72%, #fff, transparent), radial-gradient(1px 1px at 28% 84%, #b07aff, transparent),
    radial-gradient(1px 1px at 88% 52%, #22e6ff, transparent), radial-gradient(1.5px 1.5px at 40% 40%, #fff, transparent); }
.i-box { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.i-logo { font-size: 44px; font-weight: 900; letter-spacing: 4px; color: #e8f4ff; text-shadow: 0 0 18px #22e6ff88; margin-top: 8px; }
.i-logo b { color: #22e6ff; }
.i-tag { color: var(--sub, #9fb3c8); font-size: 15px; max-width: 300px; line-height: 1.4; }
.i-egg { width: 210px; height: 230px; display: flex; align-items: center; justify-content: center; }
.i-egg svg { width: 100%; height: 100%; overflow: visible; }
.i-egg.idle .egg-body, .i-egg.tap .egg-body { transform-box: fill-box; transform-origin: 50% 100%; animation: eggWob 2.4s ease-in-out infinite; }
.i-egg.tap { cursor: pointer; }
.i-egg.tap:active svg { transform: scale(.96); }
.egg-aura { animation: eggGlow 2.4s ease-in-out infinite; }
.egg-runes { animation: eggRune 3s ease-in-out infinite; }
.i-egg.hatched { width: 180px; height: 180px; }
@keyframes eggWob { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-1.5deg); } }
@keyframes eggGlow { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes eggRune { 0%, 100% { opacity: .5; } 50% { opacity: 1; filter: drop-shadow(0 0 4px #b07aff); } }
.i-name { display: flex; gap: 8px; width: 100%; max-width: 300px; }
.i-name input { flex: 1; min-width: 0; font: inherit; font-size: 18px; font-weight: 700; text-align: center; padding: 10px; border-radius: 12px;
  border: 2px solid #22e6ff66; background: #0b1430; color: #fff; }
.i-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.i-chips span { padding: 5px 12px; border-radius: 999px; background: #ffffff10; border: 1px solid #ffffff22; cursor: pointer; font-size: 13px; }
.i-chips span:active { background: #22e6ff33; }
.i-pet { display: flex; flex-direction: column; align-items: center; }
.i-pet svg { width: 110px; height: 110px; }
.i-pet b { font-size: 18px; color: #22e6ff; }
.i-tips { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.i-tip { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; background: #ffffff0a; border: 1px solid #ffffff14; }
.i-tip > span { font-size: 26px; line-height: 1; }
.i-tip .sub { font-size: 13px; line-height: 1.35; }
.i-dots { display: flex; gap: 6px; margin-top: 4px; }
.i-dots i { width: 7px; height: 7px; border-radius: 50%; background: #ffffff33; }
.i-dots i.on { background: #22e6ff; box-shadow: 0 0 6px #22e6ff; width: 18px; border-radius: 4px; }
.i-skip { background: none; border: 0; color: #9fb3c8; text-decoration: underline; font: inherit; font-size: 13px; cursor: pointer; padding: 6px; }
#intro { --pc: #22e6ff; }
.i-egg.hatched .petsvg.prev { width: 170px; height: 180px; }
.i-pet .petsvg.prev { width: 110px; height: 116px; }
/* ===== Шанси скринь ===== */
.shop-row .odds { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; cursor: pointer;
  font: 600 11px/1 inherit; font-family: inherit; letter-spacing: .3px; color: #bfefff; background: #22e6ff14; border: 1px solid #22e6ff40; transition: background .15s, border-color .15s; }
.shop-row .odds i { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; font: 700 10px/1 Georgia, serif; font-style: italic;
  color: #04121c; background: linear-gradient(135deg, #5ef0ff, #22b8ff); box-shadow: 0 0 6px #22e6ff80; }
.shop-row .odds:hover, .shop-row .odds:active { background: #22e6ff2a; border-color: #22e6ff99; }
.odds-r { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.odds-r span { padding: 3px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--c); color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.odds-t { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 8px; }
.odds-t th { text-align: right; font-weight: 600; color: #9fb3c8; font-size: 11px; padding: 4px 6px; border-bottom: 1px solid #ffffff22; }
.odds-t th:first-child { text-align: left; }
.odds-t td { padding: 6px; border-bottom: 1px solid #ffffff10; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.odds-t td:first-child { text-align: left; white-space: normal; }
.odds-t td small { display: block; color: #9fb3c8; font-size: 11px; }
/* ===== Картинки магазину ===== */
.sa { width: 100%; height: 100%; overflow: visible; }
.sa .sa-tw { transform-box: fill-box; transform-origin: center; animation: saTw 1.8s ease-in-out infinite; }
.sa .sa-rays { transform-box: fill-box; transform-origin: center; animation: saSpin 14s linear infinite; }
.sa .sa-glow { animation: saGlow 2s ease-in-out infinite; }
.sa .sa-float { animation: ebob 2.2s ease-in-out infinite; }
@keyframes saTw { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }
@keyframes saSpin { to { transform: rotate(360deg); } }
@keyframes saGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.pack .pg { width: 100%; height: 84px; font-size: 0; animation: none; filter: drop-shadow(0 4px 10px #9b5cff55); }
.pack .pg .sa { transition: transform .2s; }
.pack:hover .pg .sa, .pack:active .pg .sa { transform: scale(1.06); }
.pack b { font-size: 18px; }
.pack { background: linear-gradient(180deg, #1c1550cc, #0b0f2acc); }
.packs .pack:nth-child(4) { border-color: #ffb43a66; box-shadow: 0 0 16px #ffb43a22; }
.shop-row .ic.art { flex: 0 0 64px; width: 64px; height: 54px; font-size: 0; filter: drop-shadow(0 3px 8px #0008); }
.st-art { width: 150px; height: 120px; margin: 2px auto 0; filter: drop-shadow(0 6px 14px #ff6a9a44); }
/* ===== Хмарне збереження ===== */
.card.cloud { display: flex; flex-direction: column; gap: 8px; }
.card.cloud .row { margin: 0; }
.cl-code { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #22e6ff10; border: 1px dashed #22e6ff55; }
.cl-code b { flex: 1; font-size: 20px; letter-spacing: 3px; color: #bff7ff; font-family: ui-monospace, Consolas, monospace; text-align: center; }
.cl-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cl-side { display: flex; flex-direction: column; gap: 4px; text-align: left; font-size: 14px; }
.cl-side .btn { margin-top: 6px; }
#clCode { width: 100%; font: inherit; font-size: 22px; font-weight: 700; padding: 10px; border-radius: 12px; border: 2px solid #22e6ff66; background: #0b1430; color: #fff; margin: 8px 0; }
.i-restore { background: none; border: 1px solid #ffffff22; border-radius: 999px; color: #bfefff; font: inherit; font-size: 13px; cursor: pointer; padding: 7px 14px; }
.i-restore:active { background: #22e6ff22; }
body:has(#intro) #modal { z-index: 23; }
body:has(#intro) #toasts { z-index: 24; }