:root {
  --bg0: #0d0b26; --bg1: #1b1648; --bg2: #2b1e5c;
  --glass: rgba(40, 32, 92, .58); --glass-2: rgba(62, 48, 128, .55); --edge: rgba(200, 185, 255, .28);
  --ink: #f4f0ff; --ink-2: #c7bfeb; --ink-3: #9a90c8;
  --gold: #ffc95c; --gold-2: #ff9f43; --cyan: #7fe7ff; --lav: #b79cff; --pink: #ff8fc7; --green: #7ee0a1; --red: #ff7a8a;
  --r: 20px; --r-sm: 14px;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-d: "Unbounded", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg0); color: var(--ink); font-family: var(--font); overscroll-behavior: none; }
body { display: flex; justify-content: center; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
#app { position: relative; width: 100%; max-width: 520px; height: 100%; overflow: hidden; background: var(--bg1); user-select: none; -webkit-user-select: none; }

/* ---------- фон-комната ---------- */
.room-bg { position: absolute; inset: 0; z-index: 0; }
.room-bg svg { width: 100%; height: 100%; display: block; }
.twinkle { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .25; } }
.drift { animation: drift 9s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateY(-6px); } }

/* ---------- экраны ---------- */
.screen { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; padding: calc(10px + var(--safe-t)) 14px calc(96px + var(--safe-b)); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.screen::-webkit-scrollbar { display: none; }
.screen > * { flex-shrink: 0; }
.screen.full { padding-bottom: calc(16px + var(--safe-b)); }
.screen.dim::before { content: ""; position: fixed; inset: 0; background: linear-gradient(180deg, rgba(13,11,38,.72), rgba(13,11,38,.93)); z-index: -1; pointer-events: none; }
.screen-enter { animation: screenIn .32s cubic-bezier(.2,.8,.2,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(12px); } }

.glass { background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 10px 30px rgba(5, 3, 25, .35), inset 0 1px 0 rgba(255,255,255,.12); }
h1, h2, h3 { margin: 0; font-family: var(--font-d); letter-spacing: .01em; }
h1 { font-size: 26px; } h2 { font-size: 19px; } h3 { font-size: 15px; }
.muted { color: var(--ink-2); } .small { font-size: 13px; } .tiny { font-size: 11.5px; }
.row { display: flex; align-items: center; gap: 10px; } .grow { flex: 1; } .center { text-align: center; }
.section { padding: 14px; margin-top: 12px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

/* ---------- верхняя панель ---------- */
.topbar { display: flex; align-items: center; gap: 6px; position: relative; z-index: 3; }
.logo { min-width: 0; overflow: hidden; font-family: var(--font-d); font-weight: 700; font-size: 17px; letter-spacing: .1em; background: linear-gradient(180deg, #fff6d8, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(255, 201, 92, .25); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; font-weight: 700; font-size: 15px; }
.coin { width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c2, var(--gold) 45%, var(--gold-2)); box-shadow: 0 0 10px rgba(255, 201, 92, .55); display: grid; place-items: center; font-size: 12px; color: #7a4a00; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; }
.icon-btn svg { width: 22px; height: 22px; }
.profile { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--lav)); display: grid; place-items: center; font-weight: 800; color: var(--bg2); }
.bar { height: 7px; border-radius: 9px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lav), var(--cyan)); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.bar.warm > i { background: linear-gradient(90deg, var(--pink), var(--gold)); }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 16px; font-weight: 800; font-size: 16px; transition: transform .12s, filter .2s; }
.btn:active { transform: scale(.96); }
.btn-gold { background: linear-gradient(180deg, #ffe08a, var(--gold) 50%, var(--gold-2)); color: #4a2a00; box-shadow: 0 6px 22px rgba(255, 170, 60, .4), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-blue { background: linear-gradient(180deg, #6f8bff, #4a5fe0); box-shadow: 0 6px 18px rgba(70, 90, 230, .4), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-violet { background: linear-gradient(180deg, #b48bff, #7b4fe0); box-shadow: 0 6px 18px rgba(130, 80, 230, .4), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-ghost { background: rgba(255,255,255,.08); border: 1px solid var(--edge); }
.btn[disabled] { filter: grayscale(.8) brightness(.7); pointer-events: none; }
.btn.block { width: 100%; }

/* ---------- нижняя навигация ---------- */
.nav { position: absolute; z-index: 10; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px; border-radius: 24px; }
.nav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0 6px; border-radius: 18px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); position: relative; }
.nav button svg { width: 26px; height: 26px; }
.nav button.on { color: #fff; background: linear-gradient(180deg, rgba(127,140,255,.55), rgba(90,70,220,.55)); box-shadow: inset 0 0 0 1px rgba(170,180,255,.6), 0 0 18px rgba(120,130,255,.45); }
.nav .dot { position: absolute; top: 5px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: #ff4f6d; box-shadow: 0 0 6px #ff4f6d; }

/* ---------- питомец ---------- */
.pet-stage { position: relative; display: grid; place-items: center; }
/* Тень под питомцем рисуется внутри SVG (rg-shadow): CSS drop-shadow на анимированном SVG перерисовывался каждый кадр */
.pet-stage .pet-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.pet-svg .breath { transform-box: view-box; transform-origin: 100px 168px; animation: breath 3.4s ease-in-out infinite; }
@keyframes breath { 50% { transform: scale(1.025, .975); } }
.pet-svg .blink { transform-box: fill-box; transform-origin: center; animation: blink 5.2s infinite; }
@keyframes blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
.pet-svg .sway { transform-box: view-box; animation: sway 4.2s ease-in-out infinite; }
.pet-svg .sway2 { animation-delay: -2.1s; }
@keyframes sway { 50% { transform: rotate(5deg); } }
.pet-svg .float { animation: float 3.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-5px); } }
.pet-svg .spin { transform-box: view-box; animation: spin 16s linear infinite; }
.pet-svg .spin.rev { animation-direction: reverse; animation-duration: 22s; }
@keyframes spin { to { transform: rotate(360deg); } }
.pet-svg .pulse { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.pet-svg .plates { transform-box: view-box; transition: transform .4s; }
.emo-joy .plates, .emo-excited .plates { animation: bloom .9s ease-out; }
@keyframes bloom { 40% { transform: scale(1.12); } }
.emo-sleepy .breath { animation-duration: 6s; }
.emo-excited .breath { animation-duration: 1.1s; }

.r-jump { animation: rJump .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes rJump { 30% { transform: translateY(-34px) scale(.96, 1.06); } 60% { transform: translateY(0) scale(1.08, .92); } }
.r-tilt { animation: rTilt 1.4s ease-in-out; }
@keyframes rTilt { 25%, 75% { transform: rotate(-9deg) translateX(-6px); } }
.r-dance { animation: rDance 1.4s ease-in-out; }
@keyframes rDance { 15% { transform: translateY(-20px) rotate(-8deg); } 35% { transform: rotate(8deg); } 55% { transform: translateY(-22px) rotate(-6deg); } 75% { transform: rotate(6deg) scale(1.05); } }
.r-shy { animation: rShy 1.6s ease-in-out; }
@keyframes rShy { 30%, 70% { transform: translateX(14px) scaleX(.94) rotate(4deg); } }

.particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.particle { position: absolute; width: 14px; height: 14px; pointer-events: none; animation: part 1.1s ease-out forwards; }
@keyframes part { from { opacity: 1; transform: translate(0, 0) scale(.6); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(120deg); } }

.bubble { position: absolute; z-index: 5; left: 50%; translate: -50% 0; width: max-content; max-width: 210px; padding: 10px 14px; border-radius: 18px 18px 18px 6px; font-size: 14px; font-weight: 600; line-height: 1.35; background: rgba(255, 255, 255, .94); color: #2a1f5c; box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: bubbleIn .35s cubic-bezier(.3,1.5,.5,1); transform-origin: center bottom; }
@keyframes bubbleIn { from { opacity: 0; transform: scale(.6); } }

/* ---------- главная ---------- */
.home-main { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 520px; }
.home-pet { position: absolute; left: 50%; bottom: 120px; width: min(78vw, 330px); height: min(78vw, 330px); transform: translateX(-50%); cursor: pointer; touch-action: none; }
.pet-card { position: absolute; left: 0; top: 70px; width: 175px; padding: 10px 12px; z-index: 3; text-align: left; }
.pet-card .name { font-family: var(--font-d); font-size: 17px; }
.side-actions { position: absolute; right: 0; top: 70px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.side-actions button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; text-shadow: 0 1px 4px #000; }
.side-actions .icon-btn { width: 52px; height: 52px; background: rgba(30, 24, 70, .7); border: 1px solid var(--edge); box-shadow: 0 0 16px rgba(160,130,255,.3); }
.side-actions .icon-btn svg { width: 26px; height: 26px; }
.home-cta { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 10px; align-items: end; }
.cta { min-height: 74px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; padding: 6px; line-height: 1.15; position: relative; }
.cta small { font-weight: 600; font-size: 11.5px; opacity: .9; }
.cta.big { min-height: 92px; font-size: 22px; font-family: var(--font-d); }
.cta .badge { position: absolute; top: -6px; right: -4px; background: #ff4f6d; color: #fff; border-radius: 999px; font-size: 11px; padding: 2px 7px; font-family: var(--font); }

/* ---------- онбординг ---------- */
.onb-pets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.onb-pet { padding: 8px 4px 10px; border-radius: 18px; text-align: center; transition: transform .15s, box-shadow .2s; }
.onb-pet .mini { width: 100%; aspect-ratio: 1; }
.onb-pet.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(255,201,92,.45); transform: translateY(-3px); }
.onb-hero { height: 230px; margin-top: 6px; }
.input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--edge); background: rgba(255,255,255,.08); color: var(--ink); font: inherit; font-size: 16px; }
.input:focus { outline: 2px solid var(--cyan); }

/* ---------- каталог игр ---------- */
.game-hero { position: relative; padding: 16px; overflow: hidden; min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; }
.game-hero .art { position: absolute; right: -10px; top: -6px; width: 170px; height: 170px; pointer-events: none; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; background: rgba(255, 201, 92, .18); color: var(--gold); border: 1px solid rgba(255,201,92,.4); }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.game-card { padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 178px; position: relative; overflow: hidden; text-align: left; }
.game-card .art { height: 74px; display: grid; place-items: center; }
.game-card.soon { opacity: .78; }
.game-card .soon-tag { position: absolute; top: 10px; right: 10px; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.12); }

/* ---------- викторина ---------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.cat { padding: 12px; border-radius: 16px; text-align: left; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.cat .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: rgba(255,255,255,.1); }
.quiz-hud { display: flex; align-items: center; gap: 10px; }
.qdots { display: flex; gap: 5px; flex: 1; }
.qdots i { flex: 1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.15); }
.qdots i.ok { background: var(--green); } .qdots i.no { background: var(--red); } .qdots i.cur { background: var(--gold); }
.timer { height: 8px; border-radius: 8px; background: rgba(255,255,255,.12); overflow: hidden; margin-top: 10px; }
.timer > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--pink)); transform-origin: left; }
.qcard { padding: 18px 16px; margin-top: 12px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; }
.qcard .q { font-size: 19px; font-weight: 700; line-height: 1.35; }
.opts { display: grid; gap: 10px; margin-top: 12px; }
.opt { min-height: 54px; padding: 10px 16px; border-radius: 16px; text-align: left; font-size: 16px; font-weight: 700; background: rgba(255,255,255,.09); border: 1px solid var(--edge); display: flex; align-items: center; gap: 12px; transition: background .2s, transform .1s; }
.opt .k { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.12); font-size: 13px; flex: none; }
.opt:active { transform: scale(.98); }
.opt.ok { background: rgba(126, 224, 161, .3); border-color: var(--green); }
.opt.no { background: rgba(255, 122, 138, .28); border-color: var(--red); animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.companion { width: 92px; height: 92px; flex: none; }
.score-pop { font-family: var(--font-d); color: var(--gold); font-size: 22px; animation: pop .6s; }
@keyframes pop { 30% { transform: scale(1.4); } }

/* ---------- порталы ---------- */
.board { display: grid; gap: 4px; padding: 8px; margin: 12px auto 0; width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 22px; background: rgba(10, 8, 34, .65); border: 1px solid var(--edge); box-shadow: inset 0 0 30px rgba(120, 100, 255, .18); }
.tile { position: relative; border-radius: 10px; background: radial-gradient(circle at 50% 40%, rgba(90, 74, 180, .55), rgba(40, 30, 96, .75)); border: 1px solid rgba(180,160,255,.15); padding: 0; overflow: hidden; }
.tile svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .22s cubic-bezier(.3,1.4,.5,1); }
.tile .pipe { stroke: #5b4f9c; stroke-width: 15; stroke-linecap: round; fill: none; transition: stroke .25s; }
.tile .core { stroke: #8e83c9; stroke-width: 5; stroke-linecap: round; fill: none; transition: stroke .25s; }
.tile.lit .pipe { stroke: #f7c76a; }
.tile.lit .core { stroke: #fffbe6; filter: drop-shadow(0 0 4px #ffd36b); }
.tile.lit { background: radial-gradient(circle at 50% 50%, rgba(255, 201, 92, .25), rgba(60, 40, 120, .8)); }
.tile.hint { animation: hintPulse 1s ease-in-out 3; }
@keyframes hintPulse { 50% { box-shadow: inset 0 0 0 3px var(--cyan), 0 0 16px var(--cyan); } }
.tile .ov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: none; }
.crystal-off { fill: #6a5fa8; stroke: #a99ee0; }
.tile.lit .crystal-off { fill: #7fe7ff; stroke: #fff; filter: drop-shadow(0 0 6px #7fe7ff); }
.portal-hud { display: flex; gap: 8px; margin-top: 10px; }
.stat { flex: 1; padding: 8px 10px; border-radius: 14px; text-align: center; }
.stat b { display: block; font-family: var(--font-d); font-size: 18px; }
.stat span { font-size: 11px; color: var(--ink-2); }
.board.won { animation: wonGlow 1.2s ease-out; }
@keyframes wonGlow { 30% { box-shadow: 0 0 60px rgba(255, 211, 107, .8), inset 0 0 40px rgba(255, 211, 107, .5); } }

/* ---------- оверлеи ---------- */
.overlay { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(8, 6, 26, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: 100%; max-width: 420px; max-height: calc(100% - 20px); overflow-y: auto; overflow-x: hidden; padding: 18px; animation: modalIn .35s cubic-bezier(.3,1.4,.5,1); }
@keyframes modalIn { from { opacity: 0; transform: scale(.9) translateY(20px); } }
.rewards { display: flex; justify-content: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.reward { min-width: 84px; padding: 10px; border-radius: 16px; text-align: center; background: rgba(255,255,255,.08); border: 1px solid var(--edge); animation: rewardIn .5s backwards; }
.reward b { display: block; font-family: var(--font-d); font-size: 18px; color: var(--gold); }
.reward span { font-size: 11.5px; color: var(--ink-2); }
@keyframes rewardIn { from { opacity: 0; transform: translateY(14px) scale(.8); } }
.stars-row { display: flex; justify-content: center; gap: 6px; margin: 6px 0; }
.stars-row svg { width: 44px; height: 44px; animation: rewardIn .5s backwards; }
.review { margin-top: 10px; display: grid; gap: 8px; }
.review .it { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); font-size: 13.5px; line-height: 1.35; border-left: 3px solid var(--green); }
.review .it.no { border-left-color: var(--red); }
.toast { position: absolute; z-index: 60; left: 50%; top: calc(14px + var(--safe-t)); transform: translateX(-50%); padding: 10px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; background: rgba(30, 24, 72, .95); border: 1px solid var(--edge); box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastIn .35s cubic-bezier(.3,1.5,.5,1); max-width: 90%; text-align: center; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -20px); } }

/* эволюция */
.evo { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.evo .flash { position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255,211,107,.6) 30%, transparent 65%); opacity: 0; animation: evoFlash 2.4s ease-in-out forwards; }
@keyframes evoFlash { 40% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6); } }
.evo .old { animation: evoOld 2.4s forwards; } .evo .new { opacity: 0; animation: evoNew 2.4s forwards; }
@keyframes evoOld { 0% { opacity: 1; } 40% { opacity: 0; transform: scale(.6); filter: brightness(4); } 100% { opacity: 0; } }
@keyframes evoNew { 0%, 45% { opacity: 0; transform: scale(1.3); filter: brightness(4); } 100% { opacity: 1; transform: scale(1); filter: none; } }
.evo > div { position: absolute; inset: 0; }

/* ---------- питомцы ---------- */
.coll { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.coll-card { padding: 6px 4px 8px; border-radius: 16px; text-align: center; position: relative; font-size: 12px; font-weight: 700; }
.coll-card .mini { aspect-ratio: 1; }
.coll-card.locked .mini { filter: brightness(0) drop-shadow(0 0 6px rgba(183,156,255,.6)); opacity: .7; }
.coll-card.active { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(255,201,92,.4); }
.coll-card .lv { font-size: 10.5px; color: var(--ink-2); font-weight: 600; }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stage { padding: 6px; border-radius: 16px; text-align: center; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid var(--edge); }
.stage .mini { aspect-ratio: 1; }
.stage.locked .mini { filter: brightness(0) drop-shadow(0 0 4px rgba(183,156,255,.7)); opacity: .55; }
.stage.cur { border-color: var(--gold); box-shadow: 0 0 14px rgba(255,201,92,.35); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-size: 13px; }
.facts div { padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.facts b { display: block; font-size: 11px; color: var(--ink-3); font-weight: 700; margin-bottom: 2px; }
.skillmap { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.skillmap .node { cursor: pointer; }
.skill-list { display: grid; gap: 6px; margin-top: 8px; }
.skill-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 13px; }
.skill-row .plus { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,201,92,.2); color: var(--gold); font-weight: 900; font-size: 18px; }

/* ---------- магазин ---------- */
.tryon { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: end; }
.tryon.compare { grid-template-columns: 1fr 1fr; }
.tryon .pv { aspect-ratio: 1; max-height: 260px; margin: 0 auto; width: 100%; }
.tryon .cap { text-align: center; font-size: 12px; color: var(--ink-2); font-weight: 700; }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.item { padding: 6px 6px 8px; border-radius: 16px; text-align: center; font-size: 12px; font-weight: 700; position: relative; }
.item .mini { aspect-ratio: 1; }
.item.sel { box-shadow: 0 0 0 2px var(--cyan), 0 0 16px rgba(127,231,255,.35); }
.item .price { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255,201,92,.18); color: var(--gold); font-size: 12px; }
.item .price.stars { background: rgba(183,156,255,.22); color: #e1d6ff; }
.item .ribbon { position: absolute; top: 6px; left: 6px; font-size: 9.5px; padding: 2px 7px; border-radius: 999px; background: linear-gradient(90deg, #ff6fa8, #b06cff); color: #fff; font-weight: 800; }
.item .owned { color: var(--green); font-size: 11.5px; margin-top: 4px; }

/* ---------- друзья ---------- */
.share-card { padding: 16px; border-radius: 20px; background: linear-gradient(135deg, rgba(127,140,255,.35), rgba(255,143,199,.25)); border: 1px solid var(--edge); display: flex; gap: 12px; align-items: center; }
.empty { padding: 22px 16px; text-align: center; color: var(--ink-2); font-size: 14px; }
.switch { width: 50px; height: 30px; border-radius: 999px; background: rgba(255,255,255,.18); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch.on { background: var(--green); } .switch.on::after { transform: translateX(20px); }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); }

body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
@media (prefers-reduced-motion: reduce) { .pet-svg *, .twinkle, .drift { animation: none !important; } }
@media (max-width: 360px) { h1 { font-size: 22px; } .pet-card { width: 150px; } .cta.big { font-size: 18px; } .coll { grid-template-columns: repeat(3, 1fr); } }
@media (min-height: 800px) { .home-pet { bottom: 140px; } }

/* ===== EMRI: библиотека состояний (data-state на .pet-stage). Реакции следуют анатомии вида ===== */
.pet-svg .rg-root { transform-box: view-box; transform-origin: 100px 172px; }
.pet-svg .rg-shadow { transform-box: fill-box; transform-origin: center; }
.pet-svg .look { transition: transform .35s ease; transform: translate(var(--lx, 0px), var(--ly, 0px)); }
.pet-svg .spin-c { transform-box: view-box; animation: spin 18s linear infinite; }
.pet-svg .twinkle { animation: twinkle 2.6s ease-in-out infinite; }
.pet-svg .bubble-rise { animation: bubbleRise 2s ease-out infinite; }
@keyframes bubbleRise { from { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(-56px); opacity: 0; } }
.pet-svg .zzz { animation: float 2.6s ease-in-out infinite; opacity: .75; }
.pet-svg [class*="rg-veil"], .pet-svg [class*="rg-ear"], .pet-svg [class*="rg-fin"], .pet-svg [class*="rg-arm"], .pet-svg [class*="rg-leg"],
.pet-svg [class*="rg-wing"], .pet-svg .rg-lantern, .pet-svg .rg-antenna, .pet-svg .rg-core, .pet-svg .rg-facets, .pet-svg .rg-seg, .pet-svg .rg-tail { transform-box: view-box; }
.pet-svg .rg-facets { transform-origin: 100px 100px; }
.pet-svg .rg-lamp { transform-box: fill-box; transform-origin: center; }

/* общие (для всех 8 видов) */
[data-state="happy"] .rg-root { animation: stHop 1.3s ease-out; }
[data-state="happy"] .rg-shadow { animation: stShadow 1.3s ease-out; }
[data-state="excited"] .rg-root { animation: stBounce .5s ease-in-out 3; }
[data-state="curious"] .rg-root { animation: stTilt 2.2s ease-in-out; }
[data-state="sleep"] .rg-root { transform: translateY(3px) scale(1.02, .96); transition: transform 1s; }
[data-state="sleep"] .breath { animation-duration: 6.5s; }
[data-state="shy"] .rg-root { animation: stShy 2s ease-in-out; }
[data-state="celebrate"] .rg-root { animation: stCelebrate 2s ease-in-out; }
[data-state="move"] .rg-root { animation: stMove 2.4s ease-in-out; }
[data-state="react"] .rg-root { animation: stSquash .7s cubic-bezier(.3,1.6,.5,1); }
[data-state="transform"] .rg-root { animation: stTransform 1.6s ease-in-out; }
@keyframes stHop { 20% { transform: translateY(-16px) scale(.97, 1.04); } 40% { transform: translateY(0) scale(1.05, .95); } 60% { transform: translateY(-8px); } 80% { transform: none; } }
@keyframes stShadow { 20%, 60% { transform: scale(.75); opacity: .6; } }
@keyframes stBounce { 50% { transform: translateY(-12px) scale(.96, 1.05); } }
@keyframes stTilt { 20%, 80% { transform: rotate(-7deg) translateX(-4px); } }
@keyframes stShy { 25%, 75% { transform: translateX(10px) rotate(5deg) scaleX(.94); } }
@keyframes stCelebrate { 15% { transform: translateY(-26px) rotate(-10deg); } 35% { transform: translateY(0) rotate(8deg); } 55% { transform: translateY(-20px) rotate(-6deg); } 75% { transform: rotate(4deg) scale(1.05); } }
@keyframes stMove { 30% { transform: translateX(-26px); } 70% { transform: translateX(22px); } }
@keyframes stSquash { 30% { transform: scale(1.12, .88); } 60% { transform: scale(.95, 1.07); } }
@keyframes stTransform { 40% { transform: scale(1.12); filter: brightness(1.8); } }

/* Луми: вуали поднимаются и опадают, звезда бьётся */
[data-state="happy"] .rg-veil-l, [data-state="excited"] .rg-veil-l, [data-state="celebrate"] .rg-veil-l { animation: veilUpL .6s ease-in-out 3; }
[data-state="happy"] .rg-veil-r, [data-state="excited"] .rg-veil-r, [data-state="celebrate"] .rg-veil-r { animation: veilUpR .6s ease-in-out 3; }
[data-state="sleep"] .rg-veil-l, [data-state="shy"] .rg-veil-l { animation: none; transform: rotate(-9deg); transition: transform .8s; }
[data-state="sleep"] .rg-veil-r, [data-state="shy"] .rg-veil-r { animation: none; transform: rotate(9deg); transition: transform .8s; }
[data-state="starbeat"] .rg-core, [data-state="excited"] .rg-core { animation: beat .5s ease-in-out 4; }
[data-state="starbeat"] .rays { animation: spin 2s linear infinite; opacity: 1; }
[data-state="veilwave"] .rg-veil-l { animation: veilUpL .5s ease-in-out 4; }
[data-state="veilwave"] .rg-veil-r { animation: veilUpR .5s ease-in-out .25s 4; }
[data-state="spiral"] .rg-root { transform-origin: 100px 116px; animation: stSpiral 1.8s cubic-bezier(.4,0,.2,1); }
[data-state="spiral"] .rg-veil-l { animation: veilUpL .45s ease-in-out 4; }
[data-state="spiral"] .rg-veil-r { animation: veilUpR .45s ease-in-out 4; }
@keyframes veilUpL { 50% { transform: rotate(14deg); } }
@keyframes veilUpR { 50% { transform: rotate(-14deg); } }
@keyframes beat { 30% { transform: scale(1.35); } 60% { transform: scale(.95); } }
@keyframes stSpiral { 40% { transform: translateY(-20px) rotate(200deg) scale(.92); } 70% { transform: translateY(-8px) rotate(360deg); } 100% { transform: rotate(360deg); } }

/* Аби: фонарик-маяк, сегменты разлетаются и собираются, плавники складываются */
[data-state="beacon"] .rg-lantern, [data-state="curious"] .rg-lantern { animation: beacon 2s ease-in-out; }
[data-state="beacon"] .rg-lamp { animation: lampFlash .4s ease-in-out 5; }
[data-state="scatter"] .rg-seg { animation: segOut 2s ease-in-out; }
[data-state="scatter"] .rg-tail { animation: tailOut 2s ease-in-out; }
[data-state="scatter"] .rg-body { animation: bodyUp 2s ease-in-out; }
[data-state="shy"] .rg-fin-l, [data-state="shy"] .rg-fin-r { animation: none; transform: scaleX(.55); transition: transform .5s; }
.sp-abi .rg-fin-l { transform-origin: 62px 100px; } .sp-abi .rg-fin-r { transform-origin: 138px 100px; }
[data-state="sleep"] .rg-lantern { animation: none; transform: rotate(28deg); transition: transform 1s; }
[data-state="happy"] .rg-fin-l, [data-state="excited"] .rg-fin-l { animation: finFlap .35s ease-in-out 4; }
[data-state="happy"] .rg-fin-r, [data-state="excited"] .rg-fin-r { animation: finFlap .35s ease-in-out .17s 4; }
@keyframes beacon { 25% { transform: rotate(-22deg); } 60% { transform: rotate(18deg); } }
@keyframes lampFlash { 50% { transform: scale(1.9); } }
@keyframes segOut { 30%, 60% { transform: translateY(16px) scale(1.15); } }
@keyframes tailOut { 30%, 60% { transform: translateY(30px) rotate(8deg); } }
@keyframes bodyUp { 30%, 60% { transform: translateY(-12px); } }
@keyframes finFlap { 50% { transform: rotate(-16deg); } }

/* Фолио: шаг ножками, бумажный «переворот», уши-листья веером */
[data-state="move"] .rg-leg-l { animation: legL .4s ease-in-out 6; }
[data-state="move"] .rg-leg-r { animation: legL .4s ease-in-out .2s 6; }
[data-state="refold"] .rg-facets { animation: refold 1.2s ease-in-out; }
[data-state="refold"] .rg-root { animation: stHop 1.4s ease-out; }
[data-state="fan"] .rg-ear-l, [data-state="happy"] .sp-folio .rg-ear-l { animation: earFanL .5s ease-in-out 3; }
[data-state="fan"] .rg-ear-r, [data-state="happy"] .sp-folio .rg-ear-r { animation: earFanR .5s ease-in-out 3; }
[data-state="bow"] .rg-root { animation: bow 1.8s ease-in-out; }
[data-state="shy"] .sp-folio .rg-ear-l, [data-state="sleep"] .sp-folio .rg-ear-l { animation: none; transform: rotate(-32deg); transition: transform .6s; }
[data-state="shy"] .sp-folio .rg-ear-r, [data-state="sleep"] .sp-folio .rg-ear-r { animation: none; transform: rotate(32deg); transition: transform .6s; }
[data-state="happy"] [class*="rg-arm"], [data-state="celebrate"] [class*="rg-arm"] { animation: armWave .35s ease-in-out 4; }
@keyframes legL { 50% { transform: rotate(-18deg); } }
@keyframes refold { 50% { transform: scaleX(-1); } }
@keyframes earFanL { 50% { transform: rotate(22deg) scale(1.08); } }
@keyframes earFanR { 50% { transform: rotate(-22deg) scale(1.08); } }
@keyframes bow { 30%, 60% { transform: rotate(12deg) translateY(4px); } }
@keyframes armWave { 50% { transform: rotate(-24deg); } }

/* Облегчённый режим для слабых устройств и пауза анимаций в фоне (экономия батареи) */
body.lowfx .pet-svg .fx, body.lowfx .particle { display: none; }
body.lowfx .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(36, 28, 84, .94); }
body.lowfx .pet-svg .twinkle, body.lowfx .twinkle, body.lowfx .drift, body.lowfx .pet-svg .pulse, body.lowfx .pet-svg .spin-c { animation: none; }
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* =====================================================================
   EMRI UI v2 — дизайн-система (см. ART_BIBLE.md §6)
   Радиусы: 12 / 16 / 20 / 24 · Касание ≥ 44 px · Иконки 22/26 px · Отступы 4·8·12·16
   Редкость: обычный — серебро, редкий — бирюза с переливом, особый — золото с лучами
   ===================================================================== */
:root { --rar-common: #c7c3e6; --rar-rare: #5fe3ff; --rar-special: #ffc95c; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { min-height: 36px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--edge); font-size: 13px; font-weight: 700; }
.chip:active { transform: scale(.96); }
.label-s { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; margin-top: 14px; }
.small-btn { min-height: 38px; font-size: 13px; padding: 0 14px; }

/* главная: компактная карточка, предметы комнаты, одна главная кнопка */
.pet-chip { position: absolute; left: 0; top: 64px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; text-align: left; max-width: 62%; }
.pet-chip b { display: block; font-family: var(--font-d); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet-chip .tiny { display: block; white-space: nowrap; }
.pet-chip .heart { font-size: 12px; font-weight: 800; color: var(--pink); white-space: nowrap; }
.lv-ring { width: 40px; height: 40px; flex: none; }
.side-actions { top: 64px; }
.home-cta.single { display: flex; justify-content: center; }
.home-cta.single .cta { width: min(78%, 300px); }
.room-obj { position: absolute; z-index: 2; padding: 0; }
.room-obj svg { width: 100%; height: 100%; display: block; overflow: visible; }
.obj-sky { left: 28%; right: 28%; top: 120px; height: 120px; border-radius: 50%; }
.obj-lamp { left: -4px; bottom: 150px; width: 44px; height: 92px; }
.obj-lamp.off .lamp-glow { opacity: 0; } .obj-lamp.off .lamp-shade { fill: #8a6a4a; }
.obj-lamp .lamp-glow { transition: opacity .4s; }
.obj-orb { right: 2px; bottom: 132px; width: 56px; height: 64px; }
.obj-orb.zap .orb-core { animation: orbZap 1s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes orbZap { 30% { transform: scale(2.2); fill: #fff; } }
.obj-plant { left: 2px; bottom: 100px; width: 52px; height: 66px; }
.obj-plant.rustle .plant-leaves { animation: rustle .9s ease-in-out; transform-box: view-box; }
@keyframes rustle { 20% { transform: rotate(-9deg); } 50% { transform: rotate(7deg); } 80% { transform: rotate(-3deg); } }
.home-main.lamp-off::after { content: ""; position: absolute; inset: -200px -20px; background: rgba(5, 3, 25, .35); pointer-events: none; z-index: 1; }
.shoot-star { position: absolute; top: 120px; left: 30%; width: 90px; height: 2px; z-index: 2; background: linear-gradient(90deg, transparent, #fff); border-radius: 2px; transform: rotate(-20deg); animation: shoot 1.3s ease-out forwards; pointer-events: none; }
@keyframes shoot { from { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 15% { opacity: 1; } to { opacity: 0; transform: translate(140px, 50px) rotate(-20deg); } }

/* каталог игр: обложки с цветовым акцентом */
.game-big { display: block; width: 100%; padding: 0; margin-top: 12px; overflow: hidden; text-align: left; border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.game-big .cover { position: relative; height: 150px; }
.cover-art { width: 100%; height: 100%; display: block; }
.cover-tag { position: absolute; left: 12px; top: 12px; }
.game-info { display: flex; align-items: center; gap: 12px; padding: 12px 14px 14px; }
.game-info h2 { font-size: 20px; } .game-info p { margin: 4px 0; }
.play-btn { flex: none; min-height: 46px; }
.soon-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soon-card { text-align: left; padding: 10px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 35%, #1b1648), #1b1648); border: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; gap: 2px; opacity: .85; }
.soon-card svg { width: 100%; height: 54px; }
.soon-card b { font-size: 13.5px; } .soon-card span { font-size: 11.5px; color: var(--ink-2); }

/* викторина */
.score-pill { padding: 6px 14px; font-family: var(--font-d); }
.quiz-stage { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.quiz-stage .companion { width: 96px; height: 96px; }
.quiz-stage .qcard { flex: 1; margin: 0; min-height: 110px; }
.qcat { font-size: 11px; font-weight: 800; color: var(--cyan); letter-spacing: .03em; margin-bottom: 6px; display: block; }
.qcard .q { font-size: 18px; }
.opt { position: relative; animation: optIn .35s backwards; }
@keyframes optIn { from { opacity: 0; transform: translateY(10px); } }
.opt .mark { font-weight: 900; font-size: 18px; width: 20px; text-align: center; }
.opt.done:not(.ok):not(.no) { opacity: .55; }
.opt.ok { box-shadow: 0 0 0 1px var(--green), 0 0 18px rgba(126,224,161,.45); }
.pts-pop { position: absolute; right: 44px; top: -8px; font-family: var(--font-d); font-size: 15px; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.5); animation: ptsPop 1s ease-out forwards; pointer-events: none; }
@keyframes ptsPop { from { opacity: 0; transform: translateY(6px) scale(.8); } 30% { opacity: 1; transform: translateY(-6px) scale(1.15); } to { opacity: 0; transform: translateY(-22px); } }
.timer.low > i { background: linear-gradient(90deg, #ff7a8a, #ff4f6d); }
.timer.low { animation: pulse 0.8s ease-in-out infinite; }
.result-hero { position: relative; margin-top: 4px; }
.big-score { font-size: 46px; color: var(--gold); text-shadow: 0 0 24px rgba(255,201,92,.45); }
.confetti { position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 2px; z-index: 20; pointer-events: none; animation: confetti 2.4s ease-in forwards; }
@keyframes confetti { to { transform: translateY(420px) rotate(var(--r)); opacity: 0; } }

/* порталы: энергия течёт по зажжённым путям, кристаллы вспыхивают */
.tile .hub { fill: #5b4f9c; transition: fill .25s; }
.tile.lit .hub { fill: #ffe7a0; }
.tile .flow { stroke: transparent; stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 6 14; }
.tile.lit .flow { stroke: #fff; animation: flow .9s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.tile.lit .core { filter: none; }
.crystal .cr-a { fill: #6a5fa8; } .crystal .cr-b { fill: #847ac4; } .crystal .cr-c { fill: #a99ee0; }
.crystal .cr-glow { opacity: 0; transition: opacity .3s; }
.tile.lit .crystal .cr-a { fill: #3fc6e8; } .tile.lit .crystal .cr-b { fill: #9ff0ff; } .tile.lit .crystal .cr-c { fill: #e4fbff; }
.tile.lit .crystal .cr-glow { opacity: .35; animation: pulse 1.6s ease-in-out infinite; }
.tile.lit .crystal { animation: crIgnite .5s ease-out; }
@keyframes crIgnite { 40% { transform: scale(1.25); } }
.tile.src .src-rays { transform-box: view-box; transform-origin: 50px 50px; animation: spin 10s linear infinite; }
.board.won .tile { animation: wonTile .6s ease-out backwards; }
.board.won .tile:nth-child(3n) { animation-delay: .08s; } .board.won .tile:nth-child(3n+1) { animation-delay: .16s; }
@keyframes wonTile { 50% { background: radial-gradient(circle, rgba(255, 230, 160, .7), rgba(120, 80, 200, .6)); } }
.flow-demo { stroke-dasharray: 6 14; animation: flow .9s linear infinite; }

/* коллекция: карточки с крупной иллюстрацией на фоне цвета вида */
.coll2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.pcard { position: relative; padding: 8px 8px 10px; border-radius: 20px; text-align: left; overflow: hidden; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c1) 55%, transparent), color-mix(in srgb, var(--c2) 85%, #0d0b26) 75%); border: 1px solid rgba(255,255,255,.14); }
.pcard .pet-stage { width: 100%; aspect-ratio: 1.25; }
.pcard b { display: block; font-family: var(--font-d); font-size: 14px; margin-top: 2px; }
.pcard span { font-size: 11.5px; color: var(--ink-2); }
.pcard.sel { box-shadow: 0 0 0 2px var(--cyan), 0 0 18px rgba(127,231,255,.35); }
.pcard.active .crown { position: absolute; top: 8px; right: 10px; color: var(--gold); font-style: normal; font-size: 16px; }
.pcard.locked .pet-svg { filter: brightness(0) drop-shadow(0 0 6px rgba(183,156,255,.6)); opacity: .75; }
.pcard.locked b { color: var(--ink-2); }
.pet-detail { background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--c1) 34%, #1b1648), rgba(27, 22, 72, .94) 62%); }
.pd-stage { height: 220px; }

/* гардероб */
.wardrobe { position: relative; padding: 14px; margin-top: 10px; overflow: hidden; }
.wardrobe .podium { position: absolute; left: 50%; top: 210px; width: 220px; height: 44px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(183,156,255,.45), transparent 70%); }
.wardrobe.r-rare .podium { background: radial-gradient(ellipse, rgba(95,227,255,.5), transparent 70%); }
.wardrobe.r-special .podium { background: radial-gradient(ellipse, rgba(255,201,92,.6), transparent 70%); }
.wardrobe.r-special { box-shadow: inset 0 0 0 1px rgba(255,201,92,.5), 0 0 30px rgba(255,201,92,.15); }
.wardrobe.r-rare { box-shadow: inset 0 0 0 1px rgba(95,227,255,.4); }
.tryon .pv { max-height: 240px; }
.costume-in { animation: costumeIn .45s ease-out; }
@keyframes costumeIn { from { opacity: 0; transform: scale(.92); filter: brightness(1.8); } }
.pv.zoomed .pet-svg { transform: scale(1.7) translateY(12%); }
.rar-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(199,195,230,.15); color: var(--rar-common); }
.r-rare .rar-badge { background: rgba(95,227,255,.15); color: var(--rar-rare); }
.r-special .rar-badge { background: linear-gradient(90deg, rgba(255,201,92,.3), rgba(255,143,199,.3)); color: var(--rar-special); }
.center-chips { justify-content: center; }
.tabs { display: flex; gap: 6px; margin-top: 12px; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.06); }
.tab { flex: 1; min-height: 40px; border-radius: 12px; font-weight: 800; font-size: 13.5px; color: var(--ink-2); }
.tab.on { background: rgba(255,255,255,.14); color: #fff; }
.items { margin-top: 10px; }
.item { background: rgba(40,32,92,.6); border: 1px solid rgba(255,255,255,.1); }
.item.r-common { border-color: rgba(199,195,230,.25); }
.item.r-rare { border-color: rgba(95,227,255,.5); background: linear-gradient(170deg, rgba(95,227,255,.14), rgba(40,32,92,.6) 60%); }
.item.r-special { border-color: rgba(255,201,92,.65); background: linear-gradient(170deg, rgba(255,201,92,.2), rgba(255,143,199,.08) 40%, rgba(40,32,92,.6) 70%); }
.item.r-special::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.25) 50%, transparent 65%); background-size: 250% 100%; animation: shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.item .iname { display: block; min-height: 30px; line-height: 1.2; }
.reveal { position: relative; }
.reveal .rays { position: absolute; left: 50%; top: 150px; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; opacity: .35; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.35) 0 8deg, transparent 8deg 24deg); animation: spin 14s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.reveal.r-special .rays { opacity: .6; background: repeating-conic-gradient(from 0deg, rgba(255,201,92,.6) 0 8deg, transparent 8deg 24deg); }
.reveal.r-rare .rays { background: repeating-conic-gradient(from 0deg, rgba(95,227,255,.5) 0 8deg, transparent 8deg 24deg); }
.reveal > *:not(.rays) { position: relative; }
body.lowfx .reveal .rays, body.lowfx .item.r-special::after, body.lowfx .tile.lit .flow { animation: none; }

@media (max-width: 360px) {
  .pet-chip { max-width: 58%; } .pet-chip .heart { display: none; }
  .quiz-stage .companion { width: 76px; height: 76px; } .qcard .q { font-size: 16.5px; }
  .game-info { flex-wrap: wrap; } .play-btn { width: 100%; }
  .obj-orb, .obj-lamp, .obj-plant { transform: scale(.85); }
}

/* ответы викторины — в зоне большого пальца */
.screen.full .quiz-stage ~ .opts { margin-top: auto; padding-bottom: 6px; }
@media (max-width: 360px) { .topbar .profile > span:last-child { display: none; } .topbar .profile { padding-right: 5px; } }

/* Аби: «Пузырьки» — плавно всплывает, плавники гребут, пузыри поднимаются (рисуются в SVG) */
[data-state="bubbles"] .rg-root { animation: stBounce 1.1s ease-in-out 2; }
[data-state="bubbles"] .rg-fin-l { animation: finFlap .5s ease-in-out 4; }
[data-state="bubbles"] .rg-fin-r { animation: finFlap .5s ease-in-out .25s 4; }

/* ===================== Кристальные комбинации ===================== */
.cg-screen { padding-left: 10px; padding-right: 10px; gap: 8px; overflow: hidden; }
.cg-top { display: flex; align-items: center; gap: 8px; min-height: 76px; }
.cg-pet { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; }
.cg-pet .pet-stage { width: 76px; height: 76px; flex: none; }
.cg-bubble { position: absolute; left: 74px; top: 6px; max-width: calc(100% - 78px); padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #fff; color: #2a1f5c; font-size: 12.5px; font-weight: 700; line-height: 1.3; opacity: 0; transform: scale(.7); transform-origin: left bottom; transition: opacity .25s, transform .3s cubic-bezier(.3,1.5,.5,1); pointer-events: none; z-index: 5; }
.cg-bubble.show { opacity: 1; transform: none; }
.cg-moves { min-width: 74px; padding: 6px 12px; text-align: center; border-radius: 18px; }
.cg-moves span { display: block; font-size: 11px; color: var(--ink-2); font-weight: 700; }
.cg-moves b { font-family: var(--font-d); font-size: 28px; line-height: 1.05; color: #fff; }
.cg-moves.low b { color: #ff8a9a; animation: pulse .8s ease-in-out infinite; }
.cg-goals { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 18px; }
.goal-row { display: flex; gap: 10px; flex-wrap: wrap; flex: 1; justify-content: flex-end; }
.goal-row.big { justify-content: center; margin: 8px 0; }
.goal { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; }
.goal .gi { width: 30px; height: 30px; display: inline-block; }
.goal .gi svg { width: 100%; height: 100%; }
.goal.done b { color: var(--green); }
.goal.done .gi { filter: saturate(.6); opacity: .7; }
.cg-board-wrap { flex: 1; display: grid; place-items: center; min-height: 0; }
.cg-board { position: relative; width: min(100%, calc((100dvh - 300px - var(--safe-t) - var(--safe-b)) * var(--w) / var(--h))); aspect-ratio: var(--w) / var(--h); border-radius: 18px; padding: 0; background: linear-gradient(160deg, rgba(60, 46, 140, .9), rgba(28, 22, 78, .95)); box-shadow: 0 0 0 2px rgba(200, 185, 255, .35), 0 14px 40px rgba(10, 6, 40, .55), inset 0 0 30px rgba(127, 231, 255, .12); touch-action: none; user-select: none; }
.cg-cells, .cg-items, .cg-fx { position: absolute; inset: 0; }
.cg-fx { pointer-events: none; z-index: 4; overflow: visible; }
.cg-cell, .gem, .fx.spark, .fx.ray, .fx.blast { position: absolute; left: 0; top: 0; width: calc(100% / var(--w)); height: calc(100% / var(--h)); transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)); }
.cg-cell { background: rgba(255, 255, 255, .07); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); scale: .94; }
.cg-cell.alt { background: rgba(255, 255, 255, .11); }
.cg-cell .ice { position: absolute; inset: 2px; border-radius: 9px; background: linear-gradient(140deg, rgba(220, 250, 255, .75), rgba(120, 210, 255, .45)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.cg-cell .ice.l2 { background: linear-gradient(140deg, rgba(220, 250, 255, .9), rgba(90, 190, 255, .65)); }
.cg-cell .ice.l3 { background: linear-gradient(140deg, rgba(235, 252, 255, .95), rgba(70, 170, 245, .8)); }
.cg-cell .ice::after { content: ""; position: absolute; inset: 20% 25% 35% 30%; border-top: 2px solid rgba(255,255,255,.8); border-left: 2px solid rgba(255,255,255,.6); transform: skew(-15deg); }
.cg-cell .stone { position: absolute; inset: 3px; z-index: 2; }
.cg-cell .stone svg { width: 100%; height: 100%; }
.cg-cell .stone.s2 svg { filter: brightness(.82); } .cg-cell .stone.s3 svg { filter: brightness(.68) hue-rotate(-20deg); }
.gem { z-index: 2; display: grid; place-items: center; transition: transform .24s cubic-bezier(.35, 1.25, .55, 1); will-change: transform; }
.gem svg { width: 90%; height: 90%; display: block; overflow: visible; filter: drop-shadow(0 3px 2px rgba(10, 6, 40, .35)); }
.gem.spawn { transition: none; }
.gem.sel svg { animation: gemSel .6s ease-in-out infinite; }
@keyframes gemSel { 50% { transform: scale(1.12); } }
.gem.hint svg { animation: gemHint 1s ease-in-out infinite; }
@keyframes gemHint { 50% { transform: scale(1.16); filter: drop-shadow(0 0 8px #fff); } }
.gem.pop { transition: transform .2s, opacity .2s; opacity: 0; scale: 1.35; }
.gem.collect { transition: transform .35s, opacity .35s; opacity: 0; translate: 0 40%; }
.gem.born svg { animation: born .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes born { from { transform: scale(.4) rotate(-40deg); } }
.gem.shake svg { animation: shake .35s; }
.gem .chain { position: absolute; inset: 0; display: grid; place-items: center; }
.gem .chain svg { width: 90%; height: 90%; filter: none; }
.gem .sp-line { animation: pulse 1.2s ease-in-out infinite; }
.gem .fuse { animation: pulse .5s ease-in-out infinite; }
.gem .prism-spin { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
.fx.beam { position: absolute; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff 20%, #ffe7a0 50%, #fff 80%, transparent); box-shadow: 0 0 18px #ffd36b; animation: beam .32s ease-out forwards; }
.fx.beam.h { left: 0; right: 0; top: calc(var(--y) * 100% / var(--h) + 100% / var(--h) * .3); height: calc(100% / var(--h) * .4); }
.fx.beam.v { top: 0; bottom: 0; left: calc(var(--x) * 100% / var(--w) + 100% / var(--w) * .3); width: calc(100% / var(--w) * .4); background: linear-gradient(180deg, transparent, #fff 20%, #c9b6ff 50%, #fff 80%, transparent); box-shadow: 0 0 18px #b79cff; }
@keyframes beam { from { opacity: 0; scale: 1 .2; } 30% { opacity: 1; scale: 1 1.2; } to { opacity: 0; } }
.fx.blast::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 200%); height: calc(var(--r) * 200%); translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(255, 211, 107, .8) 35%, rgba(255, 143, 199, .4) 60%, transparent 70%); animation: blast .34s ease-out forwards; }
.fx.blast.small::after { background: radial-gradient(circle, #fff, rgba(127, 231, 255, .8) 40%, transparent 70%); }
@keyframes blast { from { scale: .2; opacity: 1; } to { scale: 1; opacity: 0; } }
.fx.ray::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 20px #b79cff; animation: ray .3s ease-out forwards; }
.fx.ray { animation: rayMove .3s ease-out; }
@keyframes rayMove { from { transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)); } to { transform: translate(calc(var(--tx) * 100%), calc(var(--ty) * 100%)); } }
@keyframes ray { 80% { opacity: 1; } to { opacity: 0; } }
.fx.spark::after { content: ""; position: absolute; inset: 15%; border-radius: 50%; border: 3px solid var(--c); box-shadow: 0 0 10px var(--c); animation: spark .3s ease-out forwards; }
@keyframes spark { from { scale: .3; opacity: 1; } to { scale: 1.3; opacity: 0; } }
.cg-board.shuffling .gem { transition-duration: .5s; }
.cg-tools { display: flex; justify-content: center; gap: 8px; padding-bottom: calc(4px + var(--safe-b)); }
.cg-tool { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, rgba(120, 100, 240, .9), rgba(40, 30, 100, .95)); box-shadow: inset 0 0 0 2px rgba(200, 185, 255, .45), 0 6px 14px rgba(10, 6, 40, .4); }
.cg-tool svg { width: 34px; height: 34px; }
.cg-tool b { position: absolute; right: -2px; bottom: -2px; min-width: 22px; height: 22px; border-radius: 11px; background: #3a2f8a; border: 2px solid #c9b6ff; font-size: 12px; display: grid; place-items: center; }
.cg-tool.on { box-shadow: inset 0 0 0 3px var(--gold), 0 0 18px rgba(255, 201, 92, .7); transform: translateY(-4px); }
.cg-tool[disabled] { opacity: .4; }
.tip { margin: 8px 0 12px; padding: 10px 12px; border-radius: 14px; background: rgba(127, 231, 255, .12); border: 1px solid rgba(127, 231, 255, .35); font-size: 13.5px; line-height: 1.4; text-align: left; }
.tip.gift { background: rgba(255, 201, 92, .14); border-color: rgba(255, 201, 92, .45); }

/* карта прохождения */
.cm-head { margin-bottom: 4px; }
.tool-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.tchip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; }
.tchip svg { width: 22px; height: 22px; }
.cmap { flex: 1; overflow-y: auto; margin: 8px -10px 0; border-radius: 20px 20px 0 0; scrollbar-width: none; }
.cmap::-webkit-scrollbar { display: none; }
.cmap-inner { position: relative; }
.mband { position: absolute; left: 0; right: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--s1) 55%, #1b1648), color-mix(in srgb, var(--s2) 40%, #1b1648)); }
.mband-title { position: sticky; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; background: rgba(20, 14, 60, .55); font-size: 13px; }
.mband-title span { color: var(--ink-2); font-size: 11.5px; }
.mband-title .bar { width: 100%; height: 5px; }
.mpath { position: absolute; inset: 0; width: 100%; height: 100%; }
.mpath path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round; }
.mnode { position: absolute; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #fff3c4, #ffc95c 55%, #c98a0c); box-shadow: 0 6px 14px rgba(10,6,40,.45), inset 0 -4px 0 rgba(0,0,0,.15); z-index: 2; }
.mnode .mnum { font-family: var(--font-d); font-size: 19px; color: #5a3200; }
.mnode.locked { background: radial-gradient(circle at 40% 30%, #8a80b8, #4a4280); }
.mnode.locked .mnum { font-size: 16px; }
.mnode.cur { box-shadow: 0 0 0 4px rgba(255,255,255,.8), 0 0 24px #ffd36b; animation: pulse 1.6s ease-in-out infinite; }
.mstars { position: absolute; bottom: -14px; display: flex; gap: 1px; font-size: 13px; }
.mstars i { font-style: normal; color: rgba(255,255,255,.3); text-shadow: 0 1px 2px #000; }
.mstars i.on { color: #ffd36b; }
.mgift { position: absolute; top: -10px; right: -12px; font-size: 18px; }
.mgift.got { filter: grayscale(1); opacity: .5; }
.mpet { position: absolute; left: 54px; top: -24px; width: 64px; height: 64px; }
body.lowfx .fx.beam, body.lowfx .fx.blast::after { box-shadow: none; }
@media (max-width: 360px) {
  .cg-tool { width: 50px; height: 50px; } .cg-tool svg { width: 28px; height: 28px; }
  .cg-pet .pet-stage { width: 62px; height: 62px; } .cg-bubble { left: 60px; font-size: 11.5px; }
  .goal .gi { width: 26px; height: 26px; } .goal { font-size: 14px; }
  .cg-board { width: min(100%, calc((100dvh - 270px - var(--safe-t) - var(--safe-b)) * var(--w) / var(--h))); }
}

.gem.grow svg { animation: born .5s cubic-bezier(.3,1.6,.5,1); }

/* ===================== EMRI 2.0: объём питомцев, появление, светлее интерфейс ===================== */
.pet-svg .shine-sweep { transform-box: view-box; animation: sweep 6s ease-in-out infinite; }
@keyframes sweep { 0%, 55% { transform: translateX(-60px); } 85%, 100% { transform: translateX(170px); } }
.pet-svg .caustic { animation: caustic 4s linear infinite; }
@keyframes caustic { to { transform: translateX(-48px); } }
.pet-svg .fold-tip { transform-box: view-box; animation: foldTip 7s ease-in-out infinite; }
@keyframes foldTip { 0%, 80%, 100% { transform: scaleY(1); } 88% { transform: scaleY(-1); } }
[data-state="appear"] .rg-root { animation: appear 1s cubic-bezier(.3, 1.4, .5, 1); }
[data-state="appear"] .rg-shadow { animation: appearShadow 1s ease-out; }
@keyframes appear { 0% { transform: translateY(-60px) scale(.3); opacity: 0; filter: brightness(2.5); } 55% { transform: translateY(4px) scale(1.06, .94); opacity: 1; filter: brightness(1.4); } 80% { transform: scale(.98, 1.03); } }
@keyframes appearShadow { from { transform: scale(.2); opacity: 0; } }
body.lowfx .pet-svg .shine-sweep, body.lowfx .pet-svg .caustic { display: none; }

/* более светлые и разные по тону панели (не одна фиолетовая плашка на всё) */
:root { --glass: rgba(74, 58, 160, .62); --edge: rgba(230, 220, 255, .34); }
.tint-mint { background: linear-gradient(160deg, rgba(95, 203, 160, .28), rgba(54, 44, 130, .7)); }
.tint-pink { background: linear-gradient(160deg, rgba(255, 143, 199, .28), rgba(60, 44, 130, .7)); }
.tint-gold { background: linear-gradient(160deg, rgba(255, 201, 92, .24), rgba(60, 44, 130, .7)); }
.screen { padding-left: 16px; padding-right: 16px; padding-bottom: calc(108px + var(--safe-b)); }
.screen.full { padding-bottom: calc(16px + var(--safe-b)); }
.home-cta.single { bottom: 6px; }

/* закрытые питомцы: светящийся загадочный силуэт с подсказкой, а не чёрное пятно */
.pet-stage.mystery .pet-svg { filter: brightness(0) invert(1) drop-shadow(0 0 10px var(--c1, #b79cff)) drop-shadow(0 0 2px #fff); opacity: .42; animation: mystery 3.2s ease-in-out infinite; }
@keyframes mystery { 50% { opacity: .62; } }
.pcard.locked .pet-svg { filter: none; opacity: 1; }
.pcard.locked .pet-stage.mystery .pet-svg { filter: brightness(0) invert(1) drop-shadow(0 0 10px var(--c1)) drop-shadow(0 0 2px #fff); opacity: .42; }
.pcard .mq { position: absolute; top: 18px; left: 50%; translate: -50% 0; font-style: normal; font-family: var(--font-d); font-size: 34px; color: #fff; text-shadow: 0 0 16px var(--c1); pointer-events: none; }
.pcard .unlock-line { display: block; margin-top: 4px; }
.pcard .unlock-line .bar { display: block; height: 5px; margin-bottom: 4px; }
.pcard { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c1) 70%, #fff 0%), color-mix(in srgb, var(--c2) 70%, #2a1d6a) 78%); }
body.lowfx .pet-stage.mystery .pet-svg { animation: none; }

/* друзья */
.friend-hero { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 14px 14px 14px 4px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 60%, #4a3aa0), #ff8fc7 140%); box-shadow: 0 10px 28px rgba(20, 10, 60, .4); overflow: hidden; }
.friend-hero .pet-stage { width: 120px; height: 120px; flex: none; }
.fh-text h2 { font-size: 18px; } .fh-text p { margin: 6px 0 10px; color: #fff; opacity: .92; }
.fh-text .btn { min-height: 44px; font-size: 14px; }
.friend-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fslot { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; border: 2px dashed rgba(255, 255, 255, .3); font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.fslot-ava { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; background: rgba(255, 255, 255, .14); }
.coop-ic { width: 44px; height: 44px; flex: none; } .coop-ic svg { width: 100%; height: 100%; }
.duel-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin-top: 6px; border-radius: 12px; background: rgba(255, 255, 255, .07); font-family: var(--font-d); }
.duel-me { color: var(--gold); } .duel-them { color: var(--ink-2); } .duel-vs { opacity: .5; }
.duel-res { font-family: var(--font); font-size: 12.5px; padding: 3px 10px; border-radius: 999px; }
.duel-res.win { background: rgba(126, 224, 161, .2); color: var(--green); } .duel-res.lose { background: rgba(255, 143, 199, .2); color: var(--pink); } .duel-res.draw { background: rgba(255, 255, 255, .1); }
.empty-duel { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.empty-duel span { font-size: 26px; }

/* гардероб: заметная магическая примерка */
.costume-in::before { content: ""; position: absolute; left: 50%; top: 55%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(255, 211, 107, .7), transparent 30%, rgba(127, 231, 255, .7), transparent 60%, rgba(255, 143, 199, .7), transparent); mask: radial-gradient(circle, transparent 52%, #000 54%, #000 62%, transparent 64%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%, #000 62%, transparent 64%); animation: tryRing .9s ease-out forwards; pointer-events: none; }
@keyframes tryRing { from { transform: rotate(0) scale(.4); opacity: 1; } to { transform: rotate(240deg) scale(1.1); opacity: 0; } }
.tryon .pv { max-height: 280px; }
body.lowfx .costume-in::before { display: none; }

/* питомец отделяется от фона: мягкий тёмный ореол позади */
.home-pet::before { content: ""; position: absolute; inset: 4% 2% 6%; border-radius: 50%; background: radial-gradient(circle at 50% 55%, rgba(40, 24, 110, .5), rgba(40, 24, 110, 0) 66%); pointer-events: none; }

/* туман и порталы */
.cg-fog { position: absolute; left: 0; top: 0; width: calc(100% / var(--w)); height: calc(100% / var(--h)); transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%)); z-index: 3; pointer-events: none; animation: fogIn .4s ease-out; }
.cg-fog::before { content: ""; position: absolute; inset: 1px; border-radius: 10px; background: radial-gradient(circle at 40% 35%, #f4f0ff, #c9bdf0 55%, #9d8fd6); box-shadow: inset 0 0 10px rgba(255,255,255,.8); }
.cg-fog i { position: absolute; border-radius: 50%; background: #fff; opacity: .55; animation: fogDrift 4s ease-in-out infinite; }
.cg-fog i:nth-child(1) { left: 12%; top: 18%; width: 40%; height: 30%; }
.cg-fog i:nth-child(2) { right: 10%; top: 40%; width: 46%; height: 32%; animation-delay: -1.3s; }
.cg-fog i:nth-child(3) { left: 24%; bottom: 12%; width: 38%; height: 24%; animation-delay: -2.6s; }
@keyframes fogDrift { 50% { transform: translateX(12%); opacity: .8; } }
@keyframes fogIn { from { opacity: 0; } }
.cg-cell .portal { position: absolute; left: 10%; right: 10%; height: 34%; border-radius: 50%; z-index: 1; background: radial-gradient(ellipse at 50% 50%, #fff 0, var(--pc) 35%, transparent 70%); box-shadow: 0 0 12px var(--pc); animation: portal 1.6s ease-in-out infinite; }
.cg-cell .portal.out { bottom: -14%; }
.cg-cell .portal.in { top: -14%; }
@keyframes portal { 50% { transform: scale(1.15); opacity: .75; } }
.gem.warp { transition: none; animation: warpIn .38s ease-out; }
@keyframes warpIn { from { opacity: 0; scale: .3; filter: brightness(3); } }
body.lowfx .cg-fog i, body.lowfx .cg-cell .portal { animation: none; }