@charset "UTF-8";
/* Поле 6×6 оставляет кнопки больше 44 px даже на узком телефоне. */
.constellation-game {padding:clamp(56px,8vw,112px) 16px;background:radial-gradient(ellipse at 50% 45%,var(--paper-2),var(--paper) 72%);color:var(--ink)}
.constellation-game[hidden],.constellation-game [hidden] {display:none!important}
.constellation-game .gift-section-heading p {max-width:620px;margin:20px auto 32px;font-size:1rem;line-height:1.75}
.constellation-stage {position:relative;max-width:570px;margin:auto;padding:20px 10px 24px;background-image:linear-gradient(rgba(13,9,24,.12),rgba(13,9,24,.25)),var(--game-garden);background-size:cover;background-position:center;border:1px solid rgba(199,166,255,.5);border-radius:24px;box-shadow:0 20px 70px rgba(0,0,0,.35);overflow:hidden}
.constellation-hud {display:flex;flex-wrap:wrap;justify-content:center;gap:14px;font:500 14px/1.5 Manrope,sans-serif}
.constellation-hud b {display:inline-block;margin-inline-start:4px;color:var(--accent);font-variant-numeric:tabular-nums}
.jewel-objectives {display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;align-items:center;margin:14px 0;font:500 14px/1.4 Manrope,sans-serif}
.jewel-objectives>span {display:flex;align-items:center;gap:6px}
.jewel-objectives .jewel-token {width:32px;height:32px}
.jewel-board {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:6px;max-width:480px;margin:18px auto;background:rgba(13,9,24,.8);border:1px solid rgba(199,166,255,.45);border-radius:16px;direction:ltr}
.jewel-cell {position:relative;display:grid;place-items:center;aspect-ratio:1;min-width:44px;min-height:44px;padding:4px;border:1px solid rgba(199,166,255,.1);border-radius:10px;background:rgba(199,166,255,.035);box-shadow:none;cursor:pointer;touch-action:manipulation;isolation:isolate}
.jewel-token {display:block;width:100%;height:100%;background-image:var(--jewel-atlas);background-size:300% 200%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.jewel-cell:disabled {cursor:default;opacity:1}
.jewel-cell.is-selected {background:rgba(199,166,255,.2);border-color:#eadcff;box-shadow:inset 0 0 10px rgba(199,166,255,.35)}
.jewel-cell.is-sealed::before {content:'';position:absolute;inset:3px;border:2px double #b6c9e5;border-radius:8px;box-shadow:inset 0 0 9px rgba(162,200,255,.5);pointer-events:none}
.jewel-cell.is-miss {animation:jewel-miss .18s linear}
@keyframes jewel-burst {40%{transform:scale(1.2);filter:brightness(1.8)}100%{transform:scale(.3);opacity:0}}
@keyframes jewel-miss {25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.jewel-board.is-complete {box-shadow:0 0 35px rgba(199,166,255,.4)}
.constellation-actions {display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.constellation-actions button {min-height:48px;font:700 14px/1.3 Manrope,sans-serif;cursor:pointer}
.constellation-game.is-paused * {animation-play-state:paused!important}
@media(max-width:400px){.constellation-stage{padding-inline:4px}.jewel-cell{padding:3px}.jewel-board{gap:3px;padding:4px}.constellation-hud{gap:10px}}

.jewel-cell.is-double-sealed::before {border:3px double #e0d6ff;inset:1px;box-shadow:inset 0 0 0 3px rgba(161,137,212,.4)}

/* Анимация относится к самоцветам и событиям на поле, а не к стороннему персонажу. */
@keyframes jewel-frames {from{background-position-x:0%}to{background-position-x:133.333333%}}
.jewel-cell.is-swapping {z-index:5}
@keyframes jewel-swap {to{transform:translate(var(--swap-x),var(--swap-y))}}
.jewel-effects {position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden;border-radius:inherit}
.jewel-fx {position:absolute;display:block;pointer-events:none}
.jewel-fx-burst {width:var(--fx-size);height:var(--fx-size);margin-left:calc(var(--fx-size) / -2);margin-top:calc(var(--fx-size) / -2);background-image:var(--jewel-burst-atlas);background-size:400% 100%;animation:jewel-vfx-frames .6s steps(4) both;mix-blend-mode:screen}
@keyframes jewel-vfx-frames {from{background-position:0 0;opacity:1}to{background-position:133.333333% 0;opacity:0}}
.jewel-fx-shard {width:5px;height:9px;background:linear-gradient(#fff,#c9a4ff);box-shadow:0 0 8px #c4a8ff;border-radius:2px;animation:jewel-shard .65s ease-out both}
@keyframes jewel-shard {to{transform:translate(var(--fx-x),var(--fx-y)) rotate(var(--fx-angle));opacity:0}}
.jewel-fx-collect {width:10px;height:10px;background:#f6e9ff;box-shadow:0 0 12px 4px #af7ae6;border-radius:50%;animation:jewel-collect .62s cubic-bezier(.3,0,.6,1) both}
@keyframes jewel-collect {20%{transform:translateY(-12px) scale(1.2)}to{transform:translate(var(--fx-x),var(--fx-y)) scale(.25);opacity:0}}
.jewel-fx-ring,.jewel-fx-seal {width:var(--fx-size);height:var(--fx-size);margin-left:calc(var(--fx-size) / -2);margin-top:calc(var(--fx-size) / -2);border:2px solid #e9d5ff;border-radius:50%;box-shadow:0 0 16px #ad77d4,inset 0 0 14px #ad77d4;animation:jewel-ring .65s ease-out both}
.jewel-fx-seal {border-radius:8px;border:3px dashed #d0e4ff;animation-duration:.5s}
@keyframes jewel-ring {from{transform:scale(.2);opacity:1}to{transform:scale(1.2);opacity:0}}
.jewel-level-flash {position:absolute;z-index:9;inset:40% 0 auto;text-align:center;font:600 clamp(32px,7vw,56px)/1.4 var(--serif);color:white;text-shadow:0 0 24px #ac72d8;pointer-events:none;opacity:0}
.is-level-win .jewel-level-flash {animation:jewel-level 1.5s ease-in-out both}
@keyframes jewel-level {15%,65%{opacity:1;transform:translateY(-10px)}100%{opacity:0;transform:translateY(-30px)}}
.constellation-stage {padding-top:28px}
.constellation-actions:empty {display:none}
@media(prefers-reduced-motion:reduce){.constellation-game *{animation:none!important;transition:none!important}.jewel-cell .jewel-token{background-position-x:0}.jewel-effects{display:none}.is-level-win .jewel-level-flash{opacity:1}}

.jewel-cell:focus-visible {outline:2px solid white;outline-offset:2px;z-index:2}

@media(prefers-reduced-motion:reduce){.jewel-cell:is(.is-selected,.is-powered) .jewel-token {background-position-x:0!important}}

/* Усилители — самостоятельные спрайты, анимация материала отделена от движения фишки. */
.jewel-board {touch-action:none;position:relative;background:linear-gradient(145deg,rgba(9,9,25,.94),rgba(24,13,43,.96));box-shadow:inset 0 2px 16px #0009,0 8px 24px #0006}
.jewel-cell {background:linear-gradient(145deg,#c7a6ff09,#25133724);border-color:#c7a6ff15}
.jewel-cell .jewel-token {background-image:var(--jewel-frames);background-size:400% 600%;background-position-y:var(--gem-row)!important;animation:jewel-idle-frames 4.8s steps(1) infinite;animation-delay:var(--idle-delay);transform-origin:50% 75%}
@keyframes jewel-idle-frames {0%,72%{background-position-x:0%}78%{background-position-x:33.333333%}84%{background-position-x:66.666667%}90%,100%{background-position-x:100%}}
.jewel-cell.is-powered {border-color:#d2b8ff44;background:radial-gradient(ellipse,#b78de033,transparent 75%)}
.jewel-cell.is-powered .jewel-token {width:118%;height:118%;background-image:var(--jewel-powers);background-size:400% 400%;background-position-y:var(--power-row)!important;animation:jewel-frames .9s steps(4) infinite,jewel-power-float 2.4s ease-in-out infinite;animation-delay:0s,var(--idle-delay);filter:drop-shadow(0 0 5px #ce9aff70)}
.jewel-cell[data-power="4"] {background:radial-gradient(ellipse,#ffce7940,transparent 75%);border-color:#ffe0a488}
@keyframes jewel-power-float {50%{transform:translateY(-3px) rotate(3deg)} }
.jewel-cell.is-selected .jewel-token {animation:jewel-frames .7s steps(4) infinite,jewel-select 1s ease-in-out infinite}
@keyframes jewel-select {50%{transform:translateY(-3px) scale(1.09)} }
.jewel-cell.is-charging {z-index:6}
.jewel-cell.is-charging .jewel-token {animation:jewel-charge .24s ease-in both,jewel-frames .24s steps(4) both}
@keyframes jewel-charge {50%{transform:scale(.8);filter:brightness(1.4)}100%{transform:scale(1.28);filter:brightness(2) drop-shadow(0 0 12px #fff)}}
.jewel-cell.is-burst .jewel-token {animation:jewel-frames .36s steps(4) both,jewel-burst .36s cubic-bezier(.4,0,1,1) both}
.jewel-cell.is-swapping .jewel-token {animation:jewel-swap .18s cubic-bezier(.4,0,.2,1) both,jewel-frames .7s steps(4) infinite}
.jewel-cell.is-falling .jewel-token {animation:jewel-land .38s both,jewel-frames .8s steps(4) infinite}
@keyframes jewel-land {0%{transform:translateY(var(--fall-distance)) scale(.92,1.06);opacity:.65}72%{transform:translateY(2px) scale(1.1,.87);opacity:1}88%{transform:translateY(-3px) scale(.97,1.04)}100%{transform:none;opacity:1}}
.jewel-cell.is-new-power {box-shadow:0 0 20px #ffe8b766,inset 0 0 14px #dbafff55}
.jewel-cell.is-new-power .jewel-token {animation:jewel-land .38s both,jewel-frames .4s steps(4) infinite;filter:drop-shadow(0 0 8px #fff3b2)}
.jewel-progress {height:4px;max-width:460px;margin:0 auto;border-radius:4px;background:#08061299;overflow:hidden}
.jewel-progress i {display:block;height:100%;width:var(--goal-progress,0%);background:linear-gradient(90deg,#a67be5,#f4c8ff,#fff4cf);box-shadow:0 0 8px #d9afff;transition:width .45s ease}
.jewel-svg-fx {position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.jewel-svg-trail {stroke-dasharray:700;stroke-dashoffset:700;filter:drop-shadow(0 0 5px #78dfff);animation:jewel-trail .65s cubic-bezier(.12,.6,.4,1) both}
@keyframes jewel-trail {45%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-700;opacity:0}}
.jewel-svg-lightning {stroke-dasharray:600;filter:drop-shadow(0 0 4px #d8a4ff);animation:jewel-lightning .7s ease-out both}
@keyframes jewel-lightning {0%{stroke-dashoffset:600;opacity:0}18%{opacity:1}40%{stroke-dashoffset:0;opacity:1}55%{opacity:.2}65%{opacity:1}100%{opacity:0}}
.jewel-svg-nova {animation:jewel-nova .8s cubic-bezier(.12,.55,.3,1) both;filter:drop-shadow(0 0 5px #f5b6ff)}
@keyframes jewel-nova {0%{transform:scale(.05) rotate(-20deg);opacity:1}35%{opacity:1}100%{transform:scale(1.35) rotate(12deg);opacity:0}}
.jewel-svg-target {animation:jewel-target .7s ease-out both}
@keyframes jewel-target {0%,20%{opacity:0;stroke-width:6}45%{opacity:1}100%{opacity:0;stroke-width:0}}
.jewel-svg-forge {stroke-dasharray:500;stroke-dashoffset:500;filter:drop-shadow(0 0 4px #ffe8a1);animation:jewel-forge .6s ease-in both}
@keyframes jewel-forge {60%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-500;opacity:0}}
.jewel-svg-forge-ring {animation:jewel-forge-ring .65s ease-out both}
@keyframes jewel-forge-ring {0%{transform:scale(1.6);opacity:0}40%{opacity:1}80%{transform:scale(.3);opacity:1}100%{transform:scale(1);opacity:0}}
.jewel-svg-crystal {animation:jewel-crystal .65s cubic-bezier(.15,.5,.4,1) both}
@keyframes jewel-crystal {0%{transform:translate(var(--sx),var(--sy));opacity:1}100%{transform:translate(calc(var(--sx) + var(--dx)),calc(var(--sy) + var(--dy))) rotate(var(--spin)) scale(.2);opacity:0}}
.jewel-combo-label {position:absolute;left:5%;right:5%;top:44%;text-align:center;font:800 clamp(22px,5vw,36px)/1.2 Manrope,sans-serif;color:#fff4dc;text-shadow:0 2px 3px #33144c,0 0 18px #a461e8;animation:jewel-combo 1.2s both;pointer-events:none}
@keyframes jewel-combo {0%{opacity:0;transform:scale(.65) translateY(10px)}22%,55%{opacity:1;transform:scale(1) translateY(0)}100%{opacity:0;transform:scale(1.06) translateY(-35px)}}
@media(prefers-reduced-motion:reduce){.jewel-cell .jewel-token{animation:none!important;background-position-x:0%!important}.jewel-svg-fx,.jewel-combo-label{display:none}.jewel-progress i{transition:none}}

/* Свечение сохраняет контуры поля: у большой цепи только несколько ведущих траекторий. */
.jewel-svg-fx {mix-blend-mode:screen}
.jewel-svg-trail {filter:drop-shadow(0 0 7px #78dfff);opacity:.85}
.jewel-svg-lightning {filter:drop-shadow(0 0 3px #d8a4ff)}
.jewel-svg-glow {animation:jewel-glow .8s ease-out both}
@keyframes jewel-glow {0%{opacity:0}25%{opacity:.9}100%{opacity:0}}
.jewel-svg-nova {filter:drop-shadow(0 0 7px #e2b4ff)}
.constellation-hud {gap:8px}
.constellation-hud>span {padding:4px 8px;border:1px solid #c7a6ff24;border-radius:8px;background:#0d091866}
.constellation-actions {margin-top:12px}

/* Объявления доступны скринридеру, но не меняют геометрию поля. */
.jewel-announcement {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Постоянная высота сохраняет положение поля при смене добрых фраз. */
.jewel-cheer {height:3.6em;margin:16px 0 0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:16px;line-height:1.2;color:var(--ink);text-wrap:balance}