: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; }

/* Долина: единая цель, живые миниатюры и цветовой отклик. */
.chapter-goal{display:grid;gap:6px;width:100%;padding:14px 18px;text-align:left;margin:8px 0;border:1px solid #7fe7ff55;background:linear-gradient(120deg,#28355ddd,#38245ddd);position:relative;z-index:3}.chapter-goal b{font-size:15px}.chapter-goal .bar{width:100%;height:5px}.home-main{min-height:420px}.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.world-card{display:flex;flex-direction:column;gap:5px;align-items:center;padding:10px;border-radius:18px;border:1px solid #9b8cd444;background:linear-gradient(150deg,#342953,#17243d);color:var(--ink);min-height:190px}.world-card:disabled{opacity:.7}.world-card.done{opacity:1;border-color:#7fe7ff88}.world-card small{font-size:11px;line-height:1.5}.world-art{width:100%;max-width:180px;height:100px}.world-art.restored{filter:drop-shadow(0 0 7px #7fe7ff66)}.restore-scene{text-align:center}.restore-scene>.world-art{height:180px;animation:valley-bloom 1.3s ease-out}.story-line{min-height:70px;line-height:1.7}.final-pair{display:flex;align-items:end;justify-content:center}.final-pair>svg{width:70px;height:120px}.final-pair .pet-stage{width:130px}.pet-victory{padding:12px;background:#7fe7ff0d;border:1px solid #7fe7ff33;border-radius:16px;font-size:13px;line-height:1.6}.valley-night .home-main{filter:drop-shadow(0 0 12px #7fe7ff20)}
@keyframes valley-bloom{from{opacity:.2;transform:scale(.65);filter:brightness(3)}to{opacity:1;transform:scale(1)}}
.fx.spark::before{content:'';position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,#fff,var(--c) 30%,transparent 68%);animation:spark .35s ease-out forwards}.gem-mote{position:absolute;left:50%;top:50%;width:5px;height:5px;background:var(--c);box-shadow:0 0 7px var(--c);border-radius:50%;animation:gem-mote .38s ease-out forwards}@keyframes gem-mote{to{transform:translate(var(--dx),var(--dy)) scale(.1);opacity:0}}.fx.beam{background:linear-gradient(90deg,transparent,#7fe7ff,#fff,#ffc95c,transparent);box-shadow:0 0 12px #fff9,0 0 24px #7fe7ff88}.fx.blast::after{background:radial-gradient(circle,#fff9,transparent 50%);box-shadow:0 0 25px #b79cff88,inset 0 0 15px #ffc95c88}.gem{filter:drop-shadow(0 3px 3px #08051e66)}
body.reduce-motion .restore-scene>.world-art,body.reduce-motion .gem-mote,body.reduce-motion .fx.spark::before{animation:none}body.lowfx .gem{filter:none}body.reduce-motion .gem-mote{display:none}

.valley-resident{position:absolute;bottom:85px;left:10%;right:10%;text-align:center;padding:8px;border-radius:12px;background:#191535d9;color:#ffe6b6;font-size:11px;pointer-events:none}.valley-night .home-main::before,.valley-fireflies .home-main::after{content:'';position:absolute;inset:15% 5%;pointer-events:none;background:radial-gradient(circle at 10% 60%,#ffc95c 0 2px,transparent 4px),radial-gradient(circle at 90% 60%,#ffc95c 0 2px,transparent 4px),radial-gradient(circle at 25% 20%,#7fe7ff 0 1px,transparent 3px),radial-gradient(circle at 78% 32%,#7fe7ff 0 2px,transparent 4px);filter:drop-shadow(0 0 8px #ffc95c);animation:valley-glow 4s ease-in-out infinite alternate}@keyframes valley-glow{to{opacity:.4;transform:translateY(-8px)}}body.reduce-motion .home-main::before,body.reduce-motion .home-main::after{animation:none}@media(max-height:650px){.home-main{min-height:390px}.chapter-goal{padding:8px 12px;gap:3px}.chapter-goal b{font-size:13px}}

.valley-landscape{display:block;width:100%;height:auto;margin:12px 0;border:1px solid #7fe7ff33;border-radius:18px}.world-card:focus-visible,.chapter-goal:focus-visible{outline:3px solid #ffc95c;outline-offset:3px}

/* Crystal Atelier — puzzle-only materials; animation stays on transform/opacity. */
.cg-screen{background:radial-gradient(ellipse at 50% 38%,#34386988,transparent 65%),linear-gradient(180deg,#10132aee,#17142aee);gap:12px;padding-top:calc(16px + var(--safe-t))}
.cg-top{min-height:86px;gap:12px}.cg-top>.icon-btn{width:44px;height:44px;flex:none;background:linear-gradient(145deg,#454a70,#242943);border:1px solid #b1bed740;box-shadow:inset 0 1px #ffffff30,0 5px 12px #05081955}.cg-top>.icon-btn svg{width:21px;height:21px}
.cg-pet{height:84px;isolation:isolate;background:radial-gradient(ellipse at 35% 70%,#85d9fb22,transparent 65%);border-bottom:1px solid #a8dfff22}.cg-pet .pet-stage{width:80px;height:80px}.cg-companion-label{position:absolute;left:75px;top:16px;letter-spacing:1.6px;font-size:8px;font-weight:800;color:#9cb6d1}.cg-bubble{top:33px;font-size:11px;background:#dff7ff;color:#16253f;box-shadow:0 4px 16px #060c2240;max-width:calc(100% - 73px);padding:6px 9px}
.cg-moves{min-width:78px;padding:11px 10px;border-radius:22px;border:1px solid #ffe2a77a;background:linear-gradient(145deg,#fff3d3,#f4c66e);box-shadow:inset 0 2px #fff9,inset 0 -4px #b7753433,0 7px 18px #05081955}.cg-moves span{color:#765329;font-size:10px;letter-spacing:1px;text-transform:uppercase}.cg-moves b{color:#412d24;font-size:31px;text-shadow:0 1px #fff8}.cg-moves.low{background:linear-gradient(145deg,#ffe0c4,#ff9e8e)}
.cg-goals{min-height:60px;padding:8px 12px;border:1px solid #c2d7ff29;background:linear-gradient(130deg,#36435bcc,#20283acc);box-shadow:inset 0 1px #ffffff12,0 5px 15px #0002;border-radius:20px}.cg-level-label{display:grid;gap:3px;border-right:1px solid #c9dfff26;padding-right:14px}.cg-level-label small{font-size:7px;letter-spacing:1.5px;color:#a4b4cb}.cg-level-label b{font-family:var(--font-d);font-size:18px;color:#f1e4bd}.goal-row{gap:6px}.goal{padding:3px 8px 3px 4px;border:1px solid #c7e8ff20;background:#101b2b66;border-radius:12px;min-height:36px;font-size:16px;font-variant-numeric:tabular-nums}.goal .gi{width:31px;height:31px}.goal.done{border-color:#8affbb55;background:#80f9a817}
.cg-board{border-radius:20px;background:linear-gradient(145deg,#34485b,#1a263b 40%,#273449);box-shadow:0 0 0 1px #effaff80,0 0 0 5px #52677a,0 0 0 6px #c7ebff44,0 20px 35px #02061999,inset 0 2px 12px #020718aa}.cg-board::before{content:'';position:absolute;inset:-5px;border-radius:24px;pointer-events:none;border-top:2px solid #d8f5ff8c;border-bottom:2px solid #090e20;z-index:5}.cg-cell{border-radius:12px;background:linear-gradient(150deg,#18273c,#24394e);box-shadow:inset 0 2px 4px #030a1c80,inset 0 -1px #bbebff22;scale:.94}.cg-cell.alt{background:linear-gradient(150deg,#1e3045,#2d4356)}
.cg-screen .gem{filter:none;transition:transform .24s cubic-bezier(.22,.8,.32,1.12)}.cg-screen .gem svg{width:98%;height:98%;filter:drop-shadow(0 3px 1px #040a2380)}.gem[data-special="row"] svg,.gem[data-special="col"] svg,.gem[data-special="bomb"] svg,.gem[data-special="prism"] svg{filter:drop-shadow(0 0 4px #e2cbff88)}
.gem.sel::after,.gem.hint::after{content:'';position:absolute;inset:3px;border-radius:12px;pointer-events:none;border:2px solid #fff3bb;background:#ffe2a718;box-shadow:0 0 12px #ffdf8b55,inset 0 0 9px #ffdf8b33}.gem.hint::after{border-color:#99eaff;background:#7fe7ff0d;animation:hint-frame 1.4s ease-in-out infinite}.gem.sel svg{animation:gemSel 1.4s ease-in-out infinite}.gem.hint svg{animation:gemSel 1.4s ease-in-out infinite}.gem.pop{scale:1;animation:crystal-pop .21s ease-out forwards}.gem.born svg{animation:crystal-born .45s cubic-bezier(.2,1.35,.4,1)}
@keyframes crystal-pop{0%{opacity:1;scale:1}35%{opacity:1;scale:1.16}100%{opacity:0;scale:.35}}@keyframes crystal-born{from{opacity:.2;transform:scale(.3) rotate(-20deg)}70%{transform:scale(1.12)}to{opacity:1;transform:none}}@keyframes hint-frame{50%{opacity:.35}}
.cg-tools{gap:10px;padding:14px 8px 10px;border-top:1px solid #b8d4ff20;border-radius:24px;background:linear-gradient(180deg,#3b416b22,#10152f88)}.cg-tool{width:56px;height:60px;border-radius:18px;background:linear-gradient(145deg,#555f86,#293653 65%,#1d2940);border:1px solid #b9d7ef70;box-shadow:inset 0 2px #e7f5ff44,inset 0 -4px #060b2244,0 6px 10px #03081766;transition:transform .18s,box-shadow .18s}.cg-tool svg{width:40px;height:40px;filter:drop-shadow(0 2px 1px #04092388)}.cg-tool b{right:-3px;bottom:-5px;min-width:23px;height:23px;padding:0 4px;border-radius:9px;background:linear-gradient(#fff1c1,#efc47a);color:#483222;border:1.5px solid #fff0c4;box-shadow:0 2px 5px #03081766;font-size:11px}.cg-tool[disabled]{opacity:.52;filter:saturate(.35);box-shadow:inset 0 1px #fff2}.cg-tool[disabled] b{background:#34425c;color:#b8c8d8;border-color:#7585a3}.cg-tool.on{transform:translateY(-5px);border-color:#fff1bb;background:linear-gradient(145deg,#aa864c,#4a4866);box-shadow:0 0 0 2px #ffd47e77,0 0 22px #ffc95c40,inset 0 1px #fff9}.cg-tool:focus-visible,.cg-top>.icon-btn:focus-visible{outline:3px solid #7fe7ff;outline-offset:4px}.cg-tool:active{transform:translateY(1px) scale(.94)}
.cascade-callout{position:absolute;top:-27px;left:0;right:0;text-align:center;color:#fff1be;text-shadow:0 2px 5px #18152f;font-size:17px;font-weight:800;letter-spacing:.5px;animation:cascade-callout .45s ease-out both;z-index:6;pointer-events:none}@keyframes cascade-callout{from{opacity:0;transform:translateY(8px) scale(.8)}35%{opacity:1;transform:translateY(0) scale(1.05)}to{opacity:0;transform:translateY(-10px)}}
.fx.impact-ring{position:absolute;left:calc((var(--x) + .5)*100%/var(--w));top:calc((var(--y) + .5)*100%/var(--h));width:calc(180%/var(--w));aspect-ratio:1;border:2px solid #ffe9b5;border-radius:50%;translate:-50% -50%;box-shadow:0 0 10px #b9eaff;animation:impact-ring .3s ease-out forwards}@keyframes impact-ring{from{opacity:.9;scale:.25}to{opacity:0;scale:2}}
.cg-screen .fx.spark::after{border-width:1px}.cg-screen .gem-mote{width:4px;height:4px;background:#fff;box-shadow:0 0 5px var(--c),0 0 9px var(--c)}.cg-screen .fx.beam{box-shadow:0 0 6px #fff,0 0 15px #7fe7ff;opacity:.9}.cg-screen .fx.blast::after{border:2px solid #ffe4b4;background:radial-gradient(circle,#fff 0%,#ffebad99 12%,#c1acff55 35%,transparent 65%)}
body.lowfx .cg-screen .gem svg{filter:none}body.lowfx .cg-screen .cg-board{box-shadow:0 0 0 3px #52677a}body.lowfx .cg-screen .cg-tool svg{filter:none}body.reduce-motion .cg-screen .gem,body.reduce-motion .cg-screen .gem svg,body.reduce-motion .cg-screen .gem.hint::after,body.reduce-motion .cg-screen .prism-spin,body.reduce-motion .cg-screen .sp-line,body.reduce-motion .cg-screen .fuse,body.reduce-motion .cg-screen .cg-moves b{animation:none!important;transition:none!important}body.reduce-motion .cg-screen .gem.pop{opacity:0}body.reduce-motion .cg-screen .fx{display:none}
@media(max-width:360px){.cg-tools{gap:7px}.cg-tool{width:50px;height:54px}.cg-tool svg{width:35px;height:35px}.cg-companion-label{letter-spacing:.8px}}
@media(max-height:650px){.cg-screen{gap:7px;padding-top:8px}.cg-top{min-height:65px}.cg-pet{height:65px}.cg-pet .pet-stage{width:62px;height:62px}.cg-companion-label{left:60px;top:5px}.cg-bubble{left:60px;top:20px}.cg-goals{min-height:48px}.cg-tools{padding-top:8px;padding-bottom:6px}.cg-tool{height:48px}.cg-tool svg{width:34px;height:34px}}

.cg-screen .gem.falling::before{content:'';position:absolute;left:35%;right:35%;bottom:50%;height:65%;border-radius:50%;background:linear-gradient(transparent,var(--gem-color));opacity:.25;pointer-events:none;z-index:-1}body.lowfx .cg-screen .gem.falling::before,body.reduce-motion .cg-screen .gem.falling::before{display:none}

.cg-screen .glass{backdrop-filter:none;-webkit-backdrop-filter:none}body.lowfx .cg-screen .cg-moves{background:linear-gradient(145deg,#fff3d3,#f4c66e)}body.lowfx .cg-screen .cg-moves.low{background:linear-gradient(145deg,#ffe0c4,#ff9e8e)}body.lowfx .cg-screen .cg-goals{background:#263347}

/* Arena is isolated from puzzle and room layout. */
.arena-entry{position:relative;isolation:isolate;overflow:hidden;min-height:185px;border-radius:24px;text-align:left;padding:24px 18px;margin-bottom:16px;border:1px solid #e8c78766;background:linear-gradient(125deg,#19283e,#413264);box-shadow:inset 0 1px #fff3,0 10px 25px #05051b55}.arena-entry>div:last-child{position:relative;z-index:1;width:72%;text-shadow:0 2px 7px #101023}.arena-entry span{font-size:8px;letter-spacing:1.4px;color:#ffd98d}.arena-entry h2{margin:10px 0;font-size:22px}.arena-entry p{font-size:12px}.arena-entry b{display:inline-block;margin-top:16px;color:#ffe1a0;font-size:12px}.arena-entry-art{position:absolute;inset:0 0 0 28%;opacity:.6;background:url('assets/arena/heroes.png') left center/auto 100% no-repeat;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.arena-screen{padding:0!important;background:#0b1023;overflow:hidden!important}.arena-screen #arenaRoot{width:100%;height:100%;min-height:0;flex:1}.arena-shell{height:100%;display:flex;flex-direction:column;position:relative;background:#0b1023;color:#f4efff;user-select:none;touch-action:none;font-family:var(--font)}.arena-shell button{font:inherit;cursor:pointer;touch-action:none}.arena-hud{display:flex;align-items:center;gap:9px;padding:calc(12px + var(--safe-t)) 12px 10px;border-bottom:1px solid #bccfff25;background:linear-gradient(#20273d,#151c30);z-index:2}.arena-exit{width:32px;height:38px;flex:none;border-radius:12px;border:1px solid #e0d5ff33;background:#e4d9ff0c;font-size:29px!important;color:#e8deff}.arena-player{flex:1;min-width:0}.arena-player b{font-size:12px;white-space:nowrap}.arena-player b small{font-size:9px;color:#aebbd3}.arena-player>span{font-size:8px;color:#b6c6d6}.arena-player.enemy{text-align:right}.arena-hp{height:6px;margin:5px 0 2px;border-radius:8px;background:#070f22;overflow:hidden}.arena-hp i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#42c3b6,#b6ffcf);transition:width .12s}.arena-player.enemy .arena-hp i{background:linear-gradient(90deg,#7f72d2,#e7bfff)}.arena-versus{font-size:6px;letter-spacing:1.2px;text-align:center;color:#decba7;line-height:1.6;flex:none}.arena-versus small{display:block;font-size:10px;color:#fff;letter-spacing:0;margin-top:3px}
.arena-stage{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center}.arena-stage canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.arena-banner{position:absolute;top:12px;left:10px;right:10px;pointer-events:none;text-align:center;z-index:3}.arena-banner button{pointer-events:auto;border:1px solid #ffe0a3;background:#20253ef0;color:#ffe3b4;padding:12px 18px;border-radius:16px;font-size:12px}.arena-bottom{flex:none;padding:9px 12px calc(8px + var(--safe-b));background:linear-gradient(#202a4080,#111629);border-top:1px solid #e1cba333;z-index:2}.arena-control-row{display:flex;gap:8px;align-items:center;justify-content:space-between;height:103px}.arena-stick{position:relative;width:96px;height:96px;flex:none;border:1px solid #b5d8ed66;border-radius:50%;background:radial-gradient(circle,#48617c44,#0c142699);box-shadow:inset 0 0 0 12px #b6d5f00b,inset 0 0 20px #020c26;touch-action:none}.arena-stick i{position:absolute;left:50%;top:50%;width:42px;height:42px;transform:translate(-50%,-50%);border:1px solid #d0e7f888;border-radius:50%;background:radial-gradient(circle at 35% 25%,#b6dce6,#536d8b 70%,#2e405d);box-shadow:0 5px 14px #030814aa;pointer-events:none}.arena-stick>span{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:6px;letter-spacing:1px;color:#b9cde1;pointer-events:none}.arena-abilities{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:120px;gap:7px;flex-shrink:1}.arena-abilities button{position:relative;min-width:44px;width:47px;height:47px;display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:14px;border:1px solid #b5cfff44;background:linear-gradient(145deg,#48526d,#242d48);color:#c5d3e4}.arena-abilities b{font-size:21px;line-height:1}.arena-abilities small{font-size:7px;margin-top:2px}.arena-abilities em{position:absolute;right:-3px;top:-5px;background:#12182e;padding:2px 4px;font-size:7px;border-radius:6px;color:#d3c4fa;font-style:normal}.arena-abilities button.ready{border-color:#a8ffdfaa;color:#d3ffed;box-shadow:inset 0 0 14px #8af3cc17}.arena-abilities button.arena-super{width:102px;height:39px;background:linear-gradient(90deg,#b88a3844 var(--charge),#292941 var(--charge));border-color:#ffe0a15c;flex-direction:row;gap:7px}.arena-abilities button.arena-super.ready{color:#ffe9ae;box-shadow:0 0 15px #ffd67a44;border-color:#ffe5ad}.arena-attack{width:88px;height:88px;border-radius:50%;flex:none;border:2px solid #ffedb7;background:radial-gradient(circle at 35% 25%,#ffe9af,#d7a353 65%,#7f582e);box-shadow:0 6px 0 #644226,0 10px 20px #0006,inset 0 2px #fff9;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#49342b;touch-action:none}.arena-attack b{font-size:42px;line-height:1}.arena-attack span{font-size:7px;font-weight:800;letter-spacing:1px}.arena-attack.held{transform:translateY(4px);box-shadow:0 2px 0 #644226,0 0 22px #ffcf6466}.arena-control-help{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.arena-auto{font-size:8px!important;background:#a6cde812;border:1px solid #a6cde833;border-radius:9px;padding:7px 9px;color:#c9deec;white-space:nowrap;min-height:30px}.arena-control-help>span{font-size:7px;color:#7f91ad;text-align:right;max-width:175px}
.arena-dialog{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:#080d23c7;z-index:5}.arena-dialog[hidden]{display:none}.arena-dialog>div{width:100%;max-width:380px;text-align:center;padding:28px 20px;border-radius:26px;background:linear-gradient(145deg,#334663,#211d3b);border:1px solid #e8cf9677;box-shadow:0 20px 60px #0009,inset 0 1px #fff2}.arena-eyebrow{font-size:7px;letter-spacing:1.5px;color:#e9c37f}.arena-dialog h2{font-size:25px;line-height:1.3;margin:16px 0;color:#fff1cc}.arena-dialog p{font-size:12px;line-height:1.7;color:#d3dce9}.arena-dialog .arena-instructions{margin:20px 0;font-size:11px}.arena-dialog button{width:100%;min-height:46px;padding:12px 16px;border-radius:14px;background:linear-gradient(#ffe9b2,#eac076);color:#4c3429;font-size:13px;font-weight:800;border:1px solid #fff0ca;margin-top:12px}.arena-dialog button.secondary{background:#7e92b317;color:#d6e4f5;border-color:#a2bfda44}.arena-dialog small{display:block;font-size:8px;color:#91a4bf;line-height:1.6;margin-top:13px}.arena-shell button:focus-visible,.arena-attack:focus-visible{outline:3px solid #7fe7ff;outline-offset:3px}
@media(max-height:640px){.arena-hud{padding-top:6px;padding-bottom:6px}.arena-control-row{height:82px}.arena-stick{width:78px;height:78px}.arena-attack{width:74px;height:74px}.arena-bottom{padding-top:5px;padding-bottom:5px}.arena-control-help{margin-top:3px}.arena-dialog>div{padding:16px}.arena-dialog .arena-instructions{margin:8px 0}}

.arena-banner:not(:empty){font-size:12px;color:#ffedbb;text-shadow:0 2px 5px #050718;line-height:1.6}

.arena-exit{width:40px;height:40px}.arena-auto{min-height:40px}.arena-abilities button.arena-super{height:44px}.arena-versus{font-size:7px}

.arena-entry small{display:block;margin-top:7px;font-size:9px;color:#c1d1e4}

/* Puzzle UX: descriptive goals, usable tool dock, rewards with an explicit acknowledgement. */
.cg-tool-tray{flex:none;background:linear-gradient(145deg,#293957ee,#111c32);border:1px solid #a8dbff33;border-radius:24px;box-shadow:inset 0 1px #fff2,0 8px 20px #0004;padding:8px 5px 4px}.cg-tool-prompt{min-height:33px;padding:0 7px;text-align:center;display:grid;place-items:center;color:#c4d7e8;font-size:10px;line-height:1.4}.cg-tool-tray .cg-tools{padding:8px 3px 6px;gap:8px;border:0;background:none}.cg-tool-tray .cg-tool{height:68px;width:56px;border-radius:18px;background:radial-gradient(circle at 30% 0%,color-mix(in srgb,var(--tool-color) 28%,#4b517b),#222e49 80%)}.cg-tool-tray .cg-tool svg{width:36px;height:36px;align-self:start;margin-top:5px}.cg-tool-tray .cg-tool small{position:absolute;bottom:8px;left:0;right:0;font-size:7px;font-weight:800;text-align:center;color:#dce9f4}.cg-tool-tray .cg-tool b{top:-5px;bottom:auto;right:-2px;background:var(--tool-color);border-color:#ecf8ff;color:#20233b;font-size:12px;min-width:24px;height:24px}.cg-tool-tray .cg-tool[disabled]{opacity:.47;filter:saturate(.35)}.cg-tool-tray .cg-tool.on{box-shadow:0 0 0 2px var(--tool-color),0 0 18px color-mix(in srgb,var(--tool-color) 45%,transparent)}.cg-board[data-tool="hammer"],.cg-board[data-tool="arrow"],.cg-board[data-tool="moon"]{cursor:crosshair}.cg-board[data-tool="glove"]{cursor:grab}.cg-board[data-tool="arrow"] .gem:hover::after,.cg-board[data-tool="moon"] .gem:hover::after,.cg-board[data-tool="hammer"] .gem:hover::after{content:'';position:absolute;inset:3px;border:2px dashed #ffedb4;border-radius:10px;pointer-events:none}
.cg-goals{align-items:center}.cg-goals .goal{gap:3px;padding-right:7px}.cg-goals .goal>span{display:grid;gap:1px}.goal small{display:block;font-size:8px;line-height:1.3;color:#b8cee0;font-weight:600}.cg-goals .goal b{font-size:17px}.cg-goals .goal-row{gap:5px}.cg-progress{height:4px;background:#061121;border-radius:5px;overflow:hidden;margin:0 5px;flex:none}.cg-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#6bdcd7,#f6d58d);transition:width .3s}.pre-tools{display:flex;justify-content:center;gap:12px;margin:16px 0}.pre-tools span{position:relative;width:36px;height:36px}.pre-tools svg{width:32px;height:32px}.pre-tools b{position:absolute;bottom:-3px;right:-3px;color:#ffe4aa;font-size:11px}.puzzle-result h2{font-size:25px;line-height:1.3;margin:12px 0 4px}.puzzle-result .btn{margin-top:8px}.result-secondary{gap:8px;margin-top:3px}.puzzle-shard{font-size:12px;color:#9aefce}.result-goals{display:grid;gap:6px;margin:12px 0}.result-goals>div{display:flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid #c5ddff25;background:#111a333d;border-radius:12px;font-size:12px}.result-goals .gi{width:28px;height:28px}.result-goals .gi svg{width:100%;height:100%}.result-goals span{flex:1;text-align:left}.result-goals b{color:#ffe7ab;font-size:17px}.prize-flow{text-align:center;overflow:hidden}.prize-halo{position:relative;display:grid;place-items:center;width:200px;height:200px;margin:15px auto;background:radial-gradient(circle,#ffdc8877,transparent 65%);isolation:isolate}.prize-halo::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,#ffe2a326 0deg 10deg,transparent 10deg 30deg);border-radius:50%;animation:prize-rays 16s linear infinite;z-index:-1;mask-image:radial-gradient(circle,#000,transparent 70%)}.prize-halo>svg{width:150px;height:150px;filter:drop-shadow(0 8px 16px #080b3399);animation:prize-appear .5s cubic-bezier(.2,1.4,.4,1)}.prize-flow h2{color:#ffe1a2;font-size:23px}.prize-flow p{font-size:14px}.prize-flow .btn{margin-top:15px}@keyframes prize-rays{to{transform:rotate(360deg)}}@keyframes prize-appear{from{opacity:0;transform:scale(.4) translateY(20px)}to{opacity:1;transform:none}}body.reduce-motion .prize-halo::before,body.reduce-motion .prize-halo>svg{animation:none}body.lowfx .prize-halo>svg{filter:none}.cg-screen .cg-board{width:min(100%,calc((100dvh - 330px - var(--safe-t) - var(--safe-b))*var(--w)/var(--h)))}@media(max-width:360px){.cg-tool-tray .cg-tools{gap:6px}.cg-tool-tray .cg-tool{width:50px}.cg-tool-tray .cg-tool small{font-size:6.5px}.cg-goals .goal small{font-size:7px}.cg-goals .goal .gi{width:24px;height:24px}}@media(max-height:650px){.cg-tool-prompt{min-height:26px;font-size:9px}.cg-tool-tray .cg-tool{height:57px}.cg-tool-tray .cg-tool svg{width:29px;height:29px}.cg-tool-tray .cg-tool small{bottom:5px}.cg-tool-tray .cg-tools{padding-top:5px}}

.arena-hero-picker{display:flex;gap:8px;margin:15px 0 10px}.arena-hero-picker button{margin:0!important;padding:5px!important;min-width:0;flex:1;border-radius:16px!important;background:#151f37!important;color:#eaf3ff!important;border:1px solid #a5bed43f!important;display:grid;justify-items:center;gap:3px}.arena-hero-picker button[aria-pressed="true"]{border-color:#ffe1a1!important;box-shadow:0 0 0 1px #ffe1a1,inset 0 0 20px #ffe2a21a}.arena-hero-picker small{margin:0!important}.arena-hero-portrait{display:block;width:70px;height:72px;background:url('assets/arena/heroes.png') left center/200% 100% no-repeat}.arena-hero-portrait.theo{background-position:right center}.arena-hero-portrait.riv{background-image:url('assets/arena/riv-igni.png')}.arena-role{font-size:10px!important;line-height:1.5!important;color:#c4dceb!important}.arena-dialog>div{max-height:95%;overflow:auto}.arena-dialog .arena-instructions{margin:10px 0!important}.arena-low-health .arena-hud{box-shadow:inset 0 -3px #ff7b9588}.arena-low-health .arena-player:not(.enemy) .arena-hp i{background:linear-gradient(90deg,#ef6689,#ffbd9c)}.arena-abilities .arena-super.ready{animation:arena-super-ready 1.4s ease-in-out infinite}@keyframes arena-super-ready{50%{box-shadow:0 0 20px #ffe2a67a}}body.reduce-motion .arena-super.ready{animation:none}

/* Arena evolution: readable configuration and combat goals. */
.arena-dialog>div{max-width:430px;padding:18px}.arena-dialog h2{font-size:21px;margin:8px 0}.arena-dialog .arena-instructions{font-size:10px}.arena-hero-picker{margin:9px 0}.arena-hero-portrait{height:53px;width:55px}.arena-loadout fieldset{border:0;padding:0;margin:10px 0;text-align:left;min-width:0}.arena-loadout legend{font-size:10px;color:#efd7a7;margin-bottom:5px}.arena-loadout [data-picker]{display:flex;gap:6px}.arena-loadout button{margin:0;padding:8px 5px;flex:1;min-width:0;min-height:48px;background:#17213b;color:#d9e6f1;border:1px solid #9dbbd13b;border-radius:10px}.arena-loadout button b{display:block;font-size:10px}.arena-loadout button span{display:block;font-size:8px;font-weight:500;margin-top:4px;line-height:1.4;color:#b3c9db}.arena-loadout button[aria-pressed=true]{border-color:#ffe1a1;background:#555044;color:#fff1c9}.arena-loadout button:disabled{opacity:.8}.arena-objective{position:absolute;top:6px;left:10px;right:10px;text-align:center;pointer-events:none;font-size:10px;font-weight:800;color:#e9f6ff;text-shadow:0 2px 4px #000;background:#13243cbb;border:1px solid #b2d5ef33;border-radius:10px;padding:6px;z-index:1}.arena-banner{top:40px}.arena-pet-line{position:absolute;left:12px;right:12px;bottom:10px;background:#14233be8;border:1px solid #a6ffe359;border-radius:12px;color:#dcfff3;font-size:11px;line-height:1.5;padding:8px 12px;pointer-events:none;z-index:2}.arena-pet-line:empty{display:none}.arena-dialog .arena-memory{color:#b9ffe4;font-size:12px;border-top:1px solid #b1ffe533;padding-top:10px}.arena-dialog .arena-result-mode{color:#efd5a4;font-size:10px}.arena-control-help .arena-auto{min-height:40px}.arena-stick,.arena-attack{user-select:none;-webkit-user-select:none}.arena-stage canvas:focus-visible{box-shadow:inset 0 0 0 2px #b0eaff}
@media(max-height:740px){.arena-dialog .arena-instructions{display:none}.arena-role{margin:6px 0}.arena-dialog>div{padding:12px}.arena-loadout fieldset{margin:7px 0}}

.adventure-card>p{margin:7px 0}.adventure-card .section-head{align-items:start}.adventure-card .section-head>span{text-align:right;max-width:105px;font-size:8px}.adventure-quests>div{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:11px;padding:10px 0;border-bottom:1px solid #c5d4ff18}.adventure-quests .bar{grid-column:1/-1}.adventure-card>.btn{margin-top:10px;min-height:44px;font-size:11px}.journey-progress{border-top:1px solid #b4cdf233;margin-top:14px;padding-top:12px;font-size:12px}.journey-progress .bar{margin:8px 0}.adventure-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:15px 0}.adventure-choices button{white-space:normal;min-height:100px;font-size:13px}.adventure-choices small{display:block;font-weight:500;margin-top:8px;font-size:10px}.memory-card{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #b7bfff22;font-size:12px}.memory-card p{font-size:11px}.memory-card .arena-hero-portrait{flex:none}.cg-school{display:block;margin:5px auto 0;min-height:32px;font-size:9px;color:#c9e0f4;background:none;border:0;padding:4px}.cg-cell.tool-preview{background:#c6f5ff66!important;box-shadow:inset 0 0 0 3px #c6f7ff,0 0 10px #8de8ff77;z-index:3}.lesson-tools{display:flex;gap:5px;margin:12px 0}.lesson-tools button{background:#203854;border:1px solid #b5d8ed55;border-radius:12px;flex:1;min-width:0;min-height:44px;padding:7px}.lesson-tools button[aria-pressed=true]{border-color:#ffe6aa;background:#675c48}.lesson-tools svg{width:28px;height:28px}.lesson-board{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;max-width:330px;margin:auto;padding:8px;background:#152539;border:2px solid #9cbacb;border-radius:15px}.lesson-board button{aspect-ratio:1;min-width:0;padding:0;background:#2c4058;border:0;border-radius:8px}.lesson-board button svg{display:block;width:100%;height:100%}.lesson-board button.preview{box-shadow:inset 0 0 0 2px #d0ffff;background:#688e9d}.lesson-board+p{min-height:48px;color:#bbffe3}.cg-tool-tray{flex-shrink:0}

.adventure-choices .btn{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-width:0;width:100%;padding:12px 10px;line-height:1.4}.adventure-choices .btn small{margin-top:4px}.lesson-board .lesson-hit{animation:lesson-impact .9s ease-out;box-shadow:inset 0 0 0 2px #a9f6ed}.daily-shortcut{display:grid;grid-template-columns:1fr auto;gap:4px 12px;text-align:left;padding:12px 14px;margin:0 0 14px;border-radius:16px;color:#e1fff3;min-height:60px}.daily-shortcut b{font-size:12px}.daily-shortcut span{font-size:10px;color:#b6d7d1}.daily-shortcut i{grid-column:2;grid-row:1/3;align-self:center;font-size:22px;font-style:normal}@keyframes lesson-impact{0%{background:#fff2bc;transform:scale(.78)}50%{background:#98e8eb;transform:scale(1.04)}100%{transform:none}}body.reduce-motion .lesson-board .lesson-hit{animation:none}

/* Arena v4: mastery, accessible controls and practice diagnostics. */
.arena-dialog>div{scrollbar-width:thin;scrollbar-color:#a4bed166 transparent}.arena-dialog [hidden],.arena-practice-info[hidden]{display:none!important}.arena-intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.arena-intro-actions button{font-size:10px;margin-top:8px;padding:9px 6px;min-height:44px}.arena-control-settings{text-align:left;margin-top:12px;border-top:1px solid #a7c4e22b;padding-top:8px;font-size:11px;color:#bfd6e7}.arena-control-settings summary{min-height:40px;padding:10px 3px;cursor:pointer}.arena-control-settings label{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;min-height:44px}.arena-control-settings input[type=range]{width:48%;accent-color:#9aeed3}.arena-control-settings input[type=checkbox]{accent-color:#c8e7a2;width:19px;height:19px}.arena-control-settings [data-audio-test]{font-size:11px;margin-top:7px}.arena-pause-control{position:absolute;right:10px;top:5px;width:44px;height:40px;border-radius:11px;background:#233652e8;color:#e4f5ff;border:1px solid #9bbcd94d;font-size:18px;z-index:3}.arena-objective{right:62px;min-height:36px;display:flex;align-items:center;justify-content:center}.arena-banner{top:51px}.arena-practice-info{position:absolute;top:53px;left:10px;max-width:260px;padding:12px;border-radius:14px;border:1px solid #a7dfd766;background:#112538ed;color:#d4e7f4;font-size:10px;z-index:2;pointer-events:none}.arena-practice-info b{display:block;margin-bottom:7px;color:#e9ffef;font-size:12px}.arena-practice-info span{display:block;line-height:1.6;margin:3px 0}.arena-practice-info .ok{color:#98ffd5}.arena-practice-info small{display:block;color:#98b4ca;line-height:1.6;margin-top:6px}.arena-large-controls .arena-control-row{height:114px}.arena-large-controls .arena-stick{width:104px;height:104px}.arena-large-controls .arena-attack{width:96px;height:96px}.arena-large-controls .arena-abilities button:not(.arena-super){width:52px;height:52px}.arena-large-controls .arena-abilities .arena-super{height:44px}.arena-mastery h2{font-size:21px}.mastery-progress{height:9px;border-radius:9px;background:#0b1a30;overflow:hidden;margin:12px 0}.mastery-progress i{height:100%;display:block;background:linear-gradient(90deg,#8be4d8,#ffe5a8);border-radius:9px}.arena-dialog .mastery-message{color:#baffdb;min-height:18px;font-size:11px}.mastery-track{display:grid;gap:9px;text-align:left;margin:12px 0}.mastery-track article{display:grid;grid-template-columns:27px 1fr 65px;align-items:center;gap:7px;border:1px solid #9cbad52e;border-radius:14px;padding:10px;background:#15233a}.mastery-track article.available{border-color:#ffe09b99;background:#4d45343d}.mastery-track article.claimed{border-color:#9bffda66}.mastery-track article.locked{opacity:.7}.mastery-medal{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-size:12px;background:#a7c4e229;color:#ffe7b2}.mastery-track b{font-size:12px;color:#ebf4ff;display:block}.mastery-track small{font-size:9px!important;margin:5px 0!important;color:#b9d0e2;line-height:1.5}.mastery-track article div>span{font-size:9px;color:#ffe0a7}.mastery-track button{font-size:10px!important;min-height:44px;margin:0!important;padding:7px 4px!important;min-width:0;width:100%}.mastery-track button:disabled{opacity:.5}.mastery-track [data-master-equip],.mastery-track [data-master-perk]{grid-column:2/4;background:#2d4e55!important;color:#d9fff0!important;border-color:#b0f7dc66!important}.arena-mastery>[data-base-look]{font-size:10px}.arena-shell{overscroll-behavior:none}.arena-stick,.arena-attack{contain:layout style;touch-action:none}
@media(max-width:360px){.arena-large-controls .arena-stick{width:88px;height:88px}.arena-large-controls .arena-attack{width:82px;height:82px}.arena-large-controls .arena-abilities{width:108px}.arena-large-controls .arena-abilities button:not(.arena-super){width:46px;height:46px}.mastery-track article{grid-template-columns:23px 1fr 60px;padding:8px;gap:6px}}@media(prefers-reduced-motion:reduce){.arena-super.ready{animation:none!important}}

@media(max-height:500px){.arena-large-controls .arena-control-row{height:82px}.arena-large-controls .arena-stick{width:78px;height:78px}.arena-large-controls .arena-attack{width:78px;height:78px}.arena-large-controls .arena-abilities button:not(.arena-super){width:44px;height:44px}.arena-large-controls .arena-abilities .arena-super{height:40px}}

.arena-hero-portrait{background-image:url('assets/arena/heroes.png');background-image:image-set(url('assets/arena/heroes-v4.webp') type('image/webp'),url('assets/arena/heroes.png') type('image/png'))}.arena-hero-portrait.riv{background-image:url('assets/arena/riv-igni.png');background-image:image-set(url('assets/arena/riv-igni-v4.webp') type('image/webp'),url('assets/arena/riv-igni.png') type('image/png'))}

/* Arena chapter I: full-width selectable mission cards, readable on 375px. */
.arena-hero-portrait.aira{background-image:url('assets/arena/aira-atlas-v5.webp');background-size:800% 800%;background-position:0 0}
.arena-hero-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.arena-missions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}
.arena-missions button{display:grid;grid-template-columns:25px 1fr;text-align:left;gap:3px 6px;padding:10px;min-height:69px;background:linear-gradient(135deg,#264b55,#263849);border:1px solid #70b9a388;border-radius:12px;color:#f3f7df}
.arena-missions button span{grid-row:span 2;color:#afebd5;font-weight:800}.arena-missions button b{font-size:12px}.arena-missions button small{color:#efda96;font-size:11px}.arena-missions button:disabled{opacity:.45;cursor:default}
.arena-upgrades{display:grid;gap:10px;margin:18px 0}.arena-upgrades button{display:grid;gap:7px;text-align:left;padding:17px;background:linear-gradient(125deg,#356d6c,#314460);color:#f3ffed;border:1px solid #aeedc7;border-radius:14px;min-height:82px}.arena-upgrades button span{font-size:13px;line-height:1.4}
.arena-mission-goal{text-align:left;background:#103e3e66;border:1px solid #85d5b477;border-radius:12px;padding:14px;line-height:1.9;color:#c4f6db}.arena-campaign-entry{background:linear-gradient(135deg,#66bdab,#c4d697)!important;color:#123d3c!important}
.arena-versus{overflow-wrap:anywhere;max-width:105px}.arena-campaign-board h2{font-size:25px}
@media(max-width:380px){.arena-hero-picker button{padding:6px 2px}.arena-hero-picker b{font-size:12px}.arena-missions button{padding:8px}.arena-missions button b{font-size:11px}.arena-missions{gap:6px}}

.arena-dialog-exit{position:absolute;right:9px;top:9px;z-index:12;display:grid;place-items:center;width:40px;height:40px;min-height:40px;border-radius:13px;background:#16253eea;border:1px solid #bed5d866;color:#e8f7f2;font:26px/1 sans-serif;cursor:pointer}.arena-dialog[hidden]~.arena-dialog-exit{display:none}.arena-dialog-exit:focus-visible{outline:3px solid #e8e8a0;outline-offset:2px}

/* Arena v6: six heroes, chapter tabs and original new guardian portraits. */
.arena-hero-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.arena-hero-portrait.nara,.arena-hero-portrait.sei{background-size:800% 800%;background-position:0 0}.arena-hero-portrait.nara{background-image:url('assets/arena/nara-atlas-v6.webp')}.arena-hero-portrait.sei{background-image:url('assets/arena/sei-atlas-v6.webp')}
.arena-chapters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.arena-chapters button{padding:10px 7px!important;font-size:11px!important;min-height:44px;background:#263d57!important;color:#bcd9e9!important}.arena-chapters button[aria-pressed=true]{border:1px solid #b3e5ff;background:#466580!important;color:#fff!important}.arena-campaign-board>p{line-height:1.5}