/* Стиль: бой с Джевилом (DELTARUNE). Чёрный зал, циановые факелы, оранжевое меню, красная душа. */
/* Шрифт Deltarune (латиница + кириллица), лежит локально */
@font-face { font-family: "Deltarune"; font-weight: 400; font-display: swap; src: url("assets/fonts/deltarune.woff2") format("woff2"); }

:root {
  --void: #000;
  --ink: #fff;
  --ink-dim: #b9bcd8;
  --frame: #39d4ff;
  --frame-deep: #0c3a50;
  --purple: #a66bff;
  --yellow: #ffe14a;
  --soul: #ff0000;
  --menu: #ff9f1c;
  --menu-hi: #ffff00;
  --hp: #00c2ff;
  --love: #ff2a4a;
  --envy: #4dff6a;
  --f-pix: "Deltarune", ui-monospace, monospace;
  --f-ui: "Deltarune", ui-monospace, monospace;
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' shape-rendering='crispEdges'%3E%3Cpath fill='%23f00' d='M2 0h3v1h1v1h1V1h1V0h3v1h1v1h1v3h-1v1h-1v1h-1v1H9v1H8v1H7v1H6v-1H5V9H4V8H3V7H2V6H1V5H0V2h1V1h1z'/%3E%3C/svg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-pix);
  font-synthesis: none;
  overflow: hidden;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.pix-heart {
  display: inline-block;
  width: 13px; height: 11px;
  background: var(--heart) center / contain no-repeat;
  image-rendering: pixelated;
}

/* ───────────────── сцена ───────────────── */
#stage {
  position: fixed; inset: 0;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform;
}
#world { position: absolute; inset: 0; }
/* конец: камера опускается вниз мимо арены в пустоту */
body.void #world { transform: translateY(-175vh); transition: transform 2.3s cubic-bezier(.55, .05, .3, 1); }
body.void #bg, body.void #fx, body.void .jevil { filter: brightness(0); transition: filter 1.3s ease-in; }
#void {
  position: absolute; left: -50%; right: -50%; top: 95vh; height: 230vh; z-index: 1;
  background:
    radial-gradient(1px 1px at 12% 40%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1px 1px at 33% 62%, rgba(255, 255, 255, .4), transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 47%, rgba(255, 255, 255, .5), transparent 60%),
    radial-gradient(1px 1px at 71% 70%, rgba(255, 255, 255, .35), transparent 60%),
    radial-gradient(1px 1px at 86% 52%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(ellipse at 50% 62%, rgba(70, 35, 120, .32), transparent 45%),
    linear-gradient(rgba(0, 0, 0, 0), #000 24%, #04020a 60%, #000);
  pointer-events: none;
}
#spinlyrics { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.spinline {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-size: clamp(24px, 5vw, 38px); line-height: 1.25;
  will-change: transform;
  text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000;
  transition: opacity .6s;
}
.spinline.stale { opacity: .78; }
.spinline.cur { z-index: 1; }
.spinline.gone { opacity: 0; }
#bg, #fx, #over {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
/* фон в 2 раза больше экрана: при спине весь сайт крутится без чёрных углов */
#bg { inset: auto; left: -50%; top: -50%; width: 200%; height: 200%; opacity: 0; transition: opacity .5s; image-rendering: pixelated; }
#fx { z-index: 2; }
#over { position: fixed; z-index: 11; pointer-events: none; opacity: 0; }


/* ───────────────── Джевил ───────────────── */
.jevil {
  --js: 3;
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc(46px * var(--js)); height: calc(48px * var(--js));
  opacity: 0; visibility: hidden;
  pointer-events: none;
  transition: filter .8s;
}
.jevil::after {
  content: ""; position: absolute; z-index: -1;
  left: 22%; right: 22%; bottom: calc(-2px * var(--js)); height: calc(5px * var(--js));
  background: rgba(0, 0, 20, .5); border-radius: 50%;
}
body.dropped .jevil { opacity: 1; visibility: visible; }
.jevil.off { display: none; }
.jevil-sp {
  width: 100%; height: 100%;
  /* танец: 8 кадров со спрайт-листа, кадр выбирает JS (100 мс, в безумии 62 мс) */
  background: url("assets/jevil-front-8.png") 0 0 / 800% 100% no-repeat;
  image-rendering: pixelated;
}
/* копии на карусели в безумии */
.jclone { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; display: none; }
/* копия, которая остаётся на месте прыжка и тает */
body.is-dark .jevil { filter: brightness(.45) saturate(.3); }
.jevil.blink { animation: jblink .3s steps(1) both; }
@keyframes jblink { 0% { opacity: 0; } 33% { opacity: 1; } 55% { opacity: .15; } 77%, 100% { opacity: 1; } }

/* ───────────────── лирика (общие) ───────────────── */
.line-host { position: relative; }
.line { display: inline-block; max-width: 100%; }
.line .w { display: inline-block; white-space: nowrap; }
/* буква: влёт (transform) + волна (translate) + покачивание (rotate) */
.line .ch {
  display: inline-block;
  animation:
    chIn .55s cubic-bezier(.2, 1.7, .4, 1) var(--in, 0s) both,
    wave 1.7s ease-in-out var(--wd, 0s) infinite,
    wob 1.4s ease-in-out var(--wd, 0s) infinite;
}
/* разные способы появления строки */
.line.in-drop .ch  { animation-name: chDrop, wave, wob; }
.line.in-slide .ch { animation-name: chSlide, wave, wob; }
.line.in-spin .ch  { animation-name: chSpin, wave, wob; }
.line.in-zoom .ch  { animation-name: chZoom, wave, wob; }
@keyframes chIn   { from { opacity: 0; transform: translateY(.8em) scale(.2) rotate(var(--rr, 0deg)); } to { opacity: 1; transform: none; } }
@keyframes chDrop { from { opacity: 0; transform: translateY(-2em) rotate(var(--rr, 0deg)); } 60% { opacity: 1; transform: translateY(.18em); } to { opacity: 1; transform: none; } }
@keyframes chSlide { from { opacity: 0; transform: translateX(var(--sx, 2em)) rotate(var(--rr, 0deg)); } to { opacity: 1; transform: none; } }
@keyframes chSpin { from { opacity: 0; transform: rotate(-360deg) scale(0); } to { opacity: 1; transform: none; } }
@keyframes chZoom { from { opacity: 0; transform: scale(3.4); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wave { 0%, 100% { translate: 0 .06em; } 50% { translate: 0 -.13em; } }
@keyframes wob  { 0%, 100% { rotate: -3.5deg; } 50% { rotate: 3.5deg; } }
/* строка внизу целиком покачивается и гуляет из стороны в сторону */
#lyric .line:not(.leave) { animation: lineSway 2.8s ease-in-out infinite alternate; }
@keyframes lineSway { from { transform: rotate(-1.5deg) translateX(-6px); } to { transform: rotate(1.5deg) translateX(6px) translateY(-2px); } }

/* уход строки: вверх, падение букв или взрыв */
.line-host .line.leave { position: absolute; left: 0; right: 0; pointer-events: none; }
.line.leave.out-up { animation: lineOut .4s ease-in forwards; }
.line.leave.out-fall .ch { animation: chFall .6s cubic-bezier(.5, 0, 1, .5) var(--out, 0s) forwards; }
.line.leave.out-boom .ch { animation: chBoom .5s ease-out forwards; }
@keyframes lineOut { to { opacity: 0; transform: translateY(-.9em) scale(.85); filter: blur(4px); } }
@keyframes chFall { to { opacity: 0; transform: translateY(2.4em) rotate(var(--rr, 30deg)); } }
@keyframes chBoom { to { opacity: 0; transform: translate(var(--bx, 1em), var(--by, -1em)) rotate(var(--rr, 40deg)) scale(.3); } }

/* интро по центру: удар при появлении, потом строка плавает и покачивается */
#intro { scale: calc(1 + var(--pulse, 0) * .14); }
#intro-line .line:not(.leave) {
  animation: introPunch .6s cubic-bezier(.2, 1.4, .4, 1) both, introDrift 2.6s ease-in-out .6s infinite alternate;
}
@keyframes introPunch { from { opacity: 0; transform: scale(2); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes introDrift { from { transform: rotate(-2deg) translateY(6px); } to { transform: rotate(2deg) translateY(-8px) scale(1.05); } }

/* темнота: тихо и плавно */
body.is-dark .line .ch { animation: chCalm 1.1s ease-out var(--in, 0s) both, drift 4s ease-in-out var(--wd, 0s) infinite; }
body.is-dark #lyric .line:not(.leave) { animation: none; }
body.is-dark .line-host .line.leave { animation: lineOutCalm .9s ease forwards; }
body.is-dark .line.leave .ch { animation: none; }
@keyframes chCalm { from { opacity: 0; filter: blur(4px); translate: 0 .25em; } to { opacity: 1; filter: none; translate: 0 0; } }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.06em; } }
@keyframes lineOutCalm { to { opacity: 0; filter: blur(3px); } }

.line.whisper-blue { color: #2433c4; font-style: italic; }
.line.whisper-gold { color: #7d6614; font-style: italic; }
/* шёпот: буквы плавают и мерцают, как призраки */
.line.whisper-blue .ch, .line.whisper-gold .ch {
  animation: chZoom .8s ease-out var(--in, 0s) both, ghost 2.2s ease-in-out var(--wd, 0s) infinite;
}
@keyframes ghost { 0%, 100% { translate: 0 0; opacity: 1; } 50% { translate: var(--gx, 3px) -.35em; opacity: .55; } }
.line.big { font-family: var(--f-ui); letter-spacing: .02em; }
/* крупные слова: буквы крутятся туда-сюда сильнее */
.line.big .ch {
  animation: chIn .55s cubic-bezier(.2, 1.7, .4, 1) var(--in, 0s) both, wave 1.4s ease-in-out var(--wd, 0s) infinite, sway 1s ease-in-out var(--wd, 0s) infinite;
}
@keyframes sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.line .y { color: var(--yellow); }
.line .r { color: var(--love); text-shadow: 0 0 10px rgba(255, 42, 74, .6); }
.line .p { color: var(--purple); }
.line.green { color: var(--envy); }
.line.blurred { filter: blur(2.5px); }
.line.glitch { animation: glitchTxt .5s steps(2) both; }
@keyframes glitchTxt {
  0%   { clip-path: inset(0 0 55% 0); transform: translateX(-6px); color: #ff3df2; }
  30%  { clip-path: inset(45% 0 0 0); transform: translateX(6px); color: #39e6ff; }
  60%  { clip-path: inset(20% 0 30% 0); transform: translateX(-3px); }
  100% { clip-path: inset(0); transform: none; }
}
.line.mad { position: relative; }
.line.mad::before {
  content: ""; position: absolute; left: -6%; right: -6%; top: 10%; bottom: 10%; z-index: -1;
  background: linear-gradient(90deg, transparent, #ff3df2 18%, #ffe14a 38%, #39ffe0 58%, #a66bff 78%, transparent);
  background-size: 220% 100%;
  filter: blur(9px); opacity: .55;
  animation: madSweep 1.1s linear infinite;
}
@keyframes madSweep { from { background-position: 0 0; } to { background-position: 220% 0; } }
/* безумие: буквы дёргаются быстрее */
.line.mad .ch {
  text-shadow: -3px 0 rgba(255, 40, 120, .8), 3px 0 rgba(40, 240, 255, .8), 0 3px 0 #000, 0 -3px 0 #000;
  animation-duration: .55s, .7s, .35s;
}

/* ───────────────── интро ───────────────── */
#intro {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center;
  padding-inline: 16px;
  pointer-events: none;
}
#intro-line {
  width: 100%;
  text-align: center;
  font-size: clamp(26px, 5vw, 54px);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}
#intro-line .line.big { font-size: clamp(34px, 8vw, 100px); line-height: 1.15; }
#chaos { position: absolute; inset: 0; }
.chaos-word {
  position: absolute;
  font-family: var(--f-ui);
  font-size: clamp(22px, 2.8vw, 36px);
  color: var(--ink);
  text-shadow: 3px 0 #000, -3px 0 #000, 0 3px #000, 0 -3px #000, 0 0 14px rgba(255, 255, 255, .35);
  -webkit-text-stroke: 1px #000;
  animation: chaosIn .32s cubic-bezier(.2, 1.8, .4, 1) both, chaosShake .09s steps(2) .32s infinite;
}
.chaos-word.l { left: max(16px, 6vw); top: 60%; }
.chaos-word.r { right: max(16px, 6vw); top: 30%; }
@keyframes chaosIn { from { transform: scale(2.6) rotate(-14deg); opacity: 0; } to { transform: rotate(var(--r, -4deg)); opacity: 1; } }
@keyframes chaosShake {
  0%   { translate: 0 0; }
  50%  { translate: 1.5px -1px; }
}

.fall { animation: fall 1.15s cubic-bezier(.55, 0, 1, .45) var(--fd, 0s) forwards !important; }
@keyframes fall {
  to { transform: translate(var(--fx, 0px), 120vh) rotate(var(--fr, 30deg)); opacity: .9; }
}

/* ───────────────── главное: карточка ───────────────── */
#main {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  padding: 44px 16px 132px;
  overflow: hidden;
  visibility: hidden;
}
@media (max-height: 640px) { #main { overflow-y: auto; } }
body.dropped #main { visibility: visible; }
#main.in { animation: dropIn 1s cubic-bezier(.25, 1.35, .45, 1) .1s both; }
/* меню падает, камера догоняет его в пустоте */
#main.in.fallvoid { animation: fallVoid 2.3s cubic-bezier(.4, 0, .3, 1) both; }
@keyframes fallVoid {
  0%   { transform: none; }
  18%  { transform: translateY(7vh) rotate(5deg); }
  55%  { transform: translateY(24vh) rotate(-4deg); }
  85%  { transform: translateY(-2vh) rotate(1deg); }
  100% { transform: none; }
}
.crack { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.crack path { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: bevel; stroke-dasharray: 900; stroke-dashoffset: 900; animation: crackGrow .45s steps(9, end) forwards; filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 1px #000); }
.crack path.thin { stroke-width: 2; }
.crack.heal { animation: healOut .6s ease forwards; }
.chip { position: absolute; z-index: 6; pointer-events: none; background: var(--frame); box-shadow: 0 0 0 2px #000; }
@keyframes crackGrow { to { stroke-dashoffset: 0; } }
@keyframes healOut { to { opacity: 0; } }
@keyframes dropIn {
  0%   { transform: translateY(-115vh) rotate(-8deg); }
  70%  { transform: translateY(12px) rotate(1deg); }
  100% { transform: none; }
}

.card {
  --ca: 0;
  position: relative;
  width: min(470px, 100%);
  margin: auto;
  flex: none;
  padding: 26px 24px 20px;
  display: grid; gap: 16px;
  background: rgba(0, 0, 0, .86);
  border: 3px solid var(--frame);
  box-shadow:
    inset 0 0 0 3px #000,
    inset 0 0 0 5px var(--frame-deep),
    0 0 0 3px #000,
    0 0 34px rgba(57, 212, 255, .35);
  transition: filter .8s;
  will-change: transform;
}
body.is-dark .card { filter: saturate(.25) brightness(.8); }
body.mad .name, body.mad .tag { text-shadow: calc(var(--ca) * -1px) 0 rgba(255, 40, 140, .8), calc(var(--ca) * 1px) 0 rgba(40, 240, 255, .8); }

.orn { position: absolute; width: 10px; height: 10px; background: var(--frame); transform: rotate(45deg); box-shadow: 0 0 0 2px #000; }
.orn-tl { top: -7px; left: -7px; } .orn-tr { top: -7px; right: -7px; }
.orn-bl { bottom: -7px; left: -7px; } .orn-br { bottom: -7px; right: -7px; }

.card-head { display: flex; align-items: center; gap: 18px; min-width: 0; }
.ava { position: relative; flex: none; width: 84px; height: 84px; }
.ava-img, .ava-soul {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 3px solid var(--ink);
  background: #000;
  image-rendering: pixelated;
  object-fit: cover;
}
.ava-soul { display: none; background: #000 var(--heart) center / 46% no-repeat; }
.ava.noimg .ava-img { display: none; }
/* аватарка из Discord: гладкая, со статусом в углу, как в Discord */
.ava.discord .ava-img { image-rendering: auto; }
.ava[data-status]::after {
  content: ""; position: absolute; z-index: 3;
  right: -7px; bottom: -7px; width: 20px; height: 20px;
  background: var(--st, #80848e);
  border: 4px solid #000;
}
.ava[data-status="online"]  { --st: #23a55a; }
.ava[data-status="idle"]    { --st: #f0b232; }
.ava[data-status="dnd"]     { --st: #f23f43; }
.ava[data-status="offline"] { --st: #80848e; }
.ava.noimg .ava-soul { display: block; }

.crown {
  position: absolute; left: 50%; top: -34px; width: 55px; height: 35px; margin-left: -27px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd400' d='M0 0h1v1h1v1h1V1h1V0h3v1h1v1h1V1h1V0h1v6H0z'/%3E%3Cpath fill='%23c77700' d='M0 6h11v1H0z'/%3E%3Cpath fill='%23ff2a4a' d='M5 2h1v1H5zM1 4h1v1H1zM9 4h1v1H9z'/%3E%3Cpath fill='%2339e6ff' d='M4 4h1v1H4zM6 4h1v1H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  image-rendering: pixelated;
  opacity: 0;
  transform: rotate(-8deg);
  pointer-events: none;
  z-index: 2;
}
.crown.on { animation: crownOn .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes crownOn { from { opacity: 0; transform: translateY(-140px) rotate(-30deg); } to { opacity: 1; transform: rotate(-8deg); } }
.crown.off { animation: crownOff 1.4s cubic-bezier(.5, -.4, 1, .5) both; }
@keyframes crownOff {
  0%   { opacity: 1; transform: rotate(-8deg); }
  100% { opacity: 1; transform: translate(-120px, 110vh) rotate(-260deg); }
}

.who { min-width: 0; display: grid; gap: 8px; }
.name {
  margin: 0;
  font-family: var(--f-ui);
  font-size: clamp(46px, 13vw, 66px);
  line-height: 1;
  letter-spacing: .04em;
  font-weight: 400;
}
.name .L { display: inline-block; animation: bob 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.18s); }
.name .L { color: var(--ink); text-shadow: 3px 3px 0 #000; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
body.mad .name .L { animation-duration: .35s; }

.tag { margin: 0; font-size: 21px; color: var(--ink-dim); }


.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 10px 10px;
  color: var(--menu);
  text-decoration: none;
  border: 3px solid currentColor;
  background: #000;
  outline: none;
  transition: transform .08s;
}
.btn .ico { position: relative; flex: none; width: 26px; height: 26px; display: grid; place-items: center; }
.btn .ico svg { width: 26px; height: 26px; fill: currentColor; shape-rendering: crispEdges; }
.btn .ico::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 20px; height: 17px; background: var(--heart) center / contain no-repeat; image-rendering: pixelated; opacity: 0; }
.btn .txt { display: grid; gap: 5px; min-width: 0; }
.btn b { font-family: var(--f-ui); font-weight: 400; font-size: 21px; letter-spacing: .04em; line-height: 1; }
.btn small { font-family: var(--f-ui); font-size: 16px; line-height: 1.1; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn:hover, .btn:focus-visible { color: var(--menu-hi); transform: translateY(-2px); }
.btn:hover .ico svg, .btn:focus-visible .ico svg { opacity: 0; }
.btn:hover .ico::after, .btn:focus-visible .ico::after { opacity: 1; }
.btn:focus-visible { box-shadow: 0 0 0 3px #000, 0 0 0 5px var(--menu-hi); }
.btn:active { transform: translateY(1px); }

.flavor { margin: 0; font-family: var(--f-ui); font-size: 18px; line-height: 1.3; color: var(--ink-dim); }


/* ───────────────── окно лирики ───────────────── */
#lyricbox {
  position: fixed; z-index: 5;
  left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(780px, calc(100% - 32px));
  min-height: 86px;
  translate: calc(-50% + var(--sx, 0px)) var(--sy, 0px);
  display: grid; place-items: center;
  padding: 10px 0;
  visibility: hidden;
}
body.dropped #lyricbox { visibility: visible; }
body.void #lyricbox { opacity: 0; transition: opacity .8s; }
#lyricbox.in { animation: boxIn .55s cubic-bezier(.2, 1.4, .4, 1) .3s both; }
@keyframes boxIn { from { transform: translateY(160%); } to { transform: none; } }
#lyric, #intro-line {
  text-shadow: 3px 0 0 #000, -3px 0 0 #000, 0 3px 0 #000, 0 -3px 0 #000, 3px 3px 0 #000, -3px 3px 0 #000, 3px -3px 0 #000, -3px -3px 0 #000;
}
#lyric {
  width: 100%;
  text-align: center;
  font-size: clamp(22px, 4.6vw, 34px);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}
#lyric .line.big { font-size: clamp(26px, 5.4vw, 42px); }

#replay {
  position: absolute; left: 50%; translate: -50% 0; z-index: 5;
  animation: replayIn 1s ease both;
}
@keyframes replayIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.replay {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  font-family: var(--f-ui); font-size: 22px;
  color: var(--menu-hi);
  background: #000; border: 3px solid currentColor;
  cursor: pointer;
}
.replay:hover, .replay:focus-visible { color: var(--ink); outline: none; }

/* ───────────────── всплывающие HA / CHAOS ───────────────── */
#popups { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute;
  font-family: var(--f-ui);
  font-size: calc(var(--s, 16px) * 1.6);
  color: var(--c, #fff);
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 0 0 18px rgba(255, 255, 255, .5);
  translate: -50% -50%;
  animation: popIn .7s cubic-bezier(.2, 1.9, .4, 1) both;
  white-space: nowrap;
}
@keyframes popIn {
  0%   { transform: scale(0) rotate(var(--r, 0deg)); opacity: 0; }
  25%  { transform: scale(1.25) rotate(var(--r, 0deg)); opacity: 1; }
  45%  { transform: scale(1) rotate(var(--r, 0deg)); }
  75%  { opacity: 1; }
  100% { transform: scale(.9) translateY(-14px) rotate(var(--r, 0deg)); opacity: 0; }
}

/* ───────────────── оверлеи ───────────────── */
#dark {
  --lx: 50%; --ly: 45%; --r1: 130px; --r2: 460px;
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--lx) var(--ly), rgba(0, 0, 0, .05) 0, rgba(0, 0, 0, .45) var(--r1), rgba(0, 0, 0, .96) var(--r2));
}
/* свет в темноте: лучи с разных сторон */
#beams { position: fixed; inset: 0; z-index: 10; pointer-events: none; mix-blend-mode: screen; }
#beams i { position: absolute; inset: 0; opacity: 0; }
#beams i[data-d="l"] { background: linear-gradient(90deg, rgba(225, 235, 255, .6), rgba(200, 215, 255, .16) 30%, transparent 55%); }
#beams i[data-d="r"] { background: linear-gradient(270deg, rgba(225, 235, 255, .6), rgba(200, 215, 255, .16) 30%, transparent 55%); }
#beams i[data-d="t"] { background: linear-gradient(180deg, rgba(225, 235, 255, .6), rgba(200, 215, 255, .16) 30%, transparent 55%); }
#beams i[data-d="b"] { background: linear-gradient(0deg, rgba(225, 235, 255, .6), rgba(200, 215, 255, .16) 30%, transparent 55%); }
#beams i[data-d="tl"] { background: radial-gradient(ellipse at 0 0, rgba(225, 235, 255, .65), rgba(200, 215, 255, .14) 35%, transparent 65%); }
#beams i[data-d="tr"] { background: radial-gradient(ellipse at 100% 0, rgba(225, 235, 255, .65), rgba(200, 215, 255, .14) 35%, transparent 65%); }
#beams i[data-d="bl"] { background: radial-gradient(ellipse at 0 100%, rgba(225, 235, 255, .65), rgba(200, 215, 255, .14) 35%, transparent 65%); }
#beams i[data-d="br"] { background: radial-gradient(ellipse at 100% 100%, rgba(225, 235, 255, .65), rgba(200, 215, 255, .14) 35%, transparent 65%); }
#flash { position: fixed; inset: 0; z-index: 12; pointer-events: none; opacity: 0; background: #fff; }
#invert { position: fixed; inset: 0; z-index: 12; pointer-events: none; opacity: 0; background: #fff; mix-blend-mode: difference; }

/* ───────────────── старт ───────────────── */
#gate {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center; align-content: center; gap: 26px;
  padding-inline: 16px;
  background: var(--void);
  text-align: center;
}
#gate.out { animation: gateOut .9s ease-in forwards; pointer-events: none; }
@keyframes gateOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

.soul {
  position: relative;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  border-radius: 50%;
  outline: none;
}
.soul .pix-heart.big { width: 52px; height: 44px; animation: beat 1.2s ease-in-out infinite; filter: drop-shadow(0 0 12px rgba(255, 0, 0, .55)); }
.soul:hover .pix-heart.big, .soul:focus-visible .pix-heart.big { animation-duration: .45s; filter: drop-shadow(0 0 20px rgba(255, 0, 0, .9)); }
.soul:focus-visible { box-shadow: 0 0 0 3px var(--menu-hi); }
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.14); } 24% { transform: scale(1); } 36% { transform: scale(1.08); } }
.gate-hint { margin: 0; font-family: var(--f-ui); font-size: 24px; letter-spacing: .1em; color: var(--ink); animation: blink 1.1s steps(1) infinite; }
.gate-sub { margin: 0; font-family: var(--f-ui); font-size: 18px; color: #6c6f8d; }
@keyframes blink { 50% { opacity: .25; } }

.shard { position: fixed; z-index: 21; width: 9px; height: 9px; background: var(--soul); pointer-events: none; }

.sound {
  position: fixed; z-index: 30;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px;
  padding: 8px 10px;
  font-family: var(--f-ui); font-size: 18px;
  color: var(--ink); background: #000;
  border: 2px solid var(--ink);
  cursor: pointer; opacity: .7;
}
.sound:hover, .sound:focus-visible { opacity: 1; color: var(--menu-hi); border-color: var(--menu-hi); outline: none; }

.nojs { position: fixed; inset: 0; z-index: 40; background: #000; display: grid; place-content: center; gap: 12px; text-align: center; font-size: 20px; }
.nojs a { color: var(--menu); }

/* ───────────────── маленькие экраны ───────────────── */
@media (max-width: 520px) {
  .card { padding: 20px 16px 16px; gap: 13px; }
  .ava { width: 66px; height: 66px; }
  .ava[data-status]::after { width: 16px; height: 16px; border-width: 3px; right: -6px; bottom: -6px; }
  .crown { top: -27px; width: 44px; height: 28px; margin-left: -22px; }
  .menu { gap: 8px; }
  .btn { padding: 8px; gap: 8px; }
  .btn .ico, .btn .ico svg { width: 22px; height: 22px; }
  .btn b { font-size: 18px; }
  .btn small { font-size: 14px; }
  .tag { font-size: 18px; }
  .flavor { font-size: 16px; }
  #main { padding-bottom: 118px; }
  #lyricbox { min-height: 74px; }
}
@media (max-height: 640px) {
  .flavor { display: none; }
}