/* v5.7: ФИНАЛ МАТЧА (public/js/finale.js) — замедление последнего убийства, наезд камеры, чёрные полосы кино,
   затем крупная надпись «ПОБЕДА» (золото) или «ПОБЕДИТЕЛЬ» + ник цветом игрока. Работает и в новом виде (html.ns — палитра --ns-*),
   и в прежнем (?ui=old — те же цвета запасными значениями). Слой #finale — поверх игры и HUD, под итогами матча. */

#finale {
  --fin-gold: var(--ns-gold, #d9b46a); --fin-gold-hi: var(--ns-gold-hi, #f3d897); --fin-text: var(--ns-text, #ece3cf); --fin-text-2: var(--ns-text-2, #b3a991); --fin-text-3: var(--ns-text-3, #7d7563);
  --fin-font: var(--ns-font, 'Manrope', 'Rubik', 'Segoe UI', system-ui, sans-serif);
  --fin-bh: clamp(18px, 11vh, 130px);
  position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; font-family: var(--fin-font);
}
#finale.hidden { display: none; }
#finale.fin-out { z-index: 19; opacity: 0; transition: opacity .45s ease; } /* итоги уже на экране — финал тает под ними */

/* ---------- игра под финалом: HUD, подписи и окна прячутся; мир чуть бледнеет, под надписью — темнеет ---------- */
html.fin-on :is(#hud, #game-ui, #death, #down, #specbar, #lowhp, #mapov, #stall, #hurtv, #build, #bigmap, #choice) { opacity: 0 !important; pointer-events: none !important; transition: opacity .35s ease !important; }
html.fin-on #game { filter: saturate(.62) contrast(1.06); transition: filter .7s ease; }
html.fin-on.fin-dim #game { filter: saturate(.48) contrast(1.04) brightness(.6); transition: filter .5s ease; }
html.fin-back :is(#game, #game-ui) { transition: transform .45s cubic-bezier(.3, 0, .2, 1), filter .45s ease; }

/* ---------- края кадра темнеют, взгляд — в центр ---------- */
#finale .fin-vig { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  background: radial-gradient(ellipse 72% 68% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(2, 2, 4, .5) 78%, rgba(2, 2, 4, .78) 100%); }
#finale.fin-go .fin-vig { opacity: 1; }

/* ---------- чёрные полосы кино (сверху и снизу) с тонкой золотой кромкой ---------- */
#finale .fin-bar { position: absolute; z-index: 2; left: 0; right: 0; height: var(--fin-bh); background: #000; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } /* поверх лучей и вспышки */
#finale .fin-top { top: 0; transform: translateY(-101%); }
#finale .fin-bot { bottom: 0; transform: translateY(101%); display: flex; align-items: center; justify-content: flex-end; padding: 0 max(16px, env(safe-area-inset-right, 0px)); }
#finale .fin-bar::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 8%, rgba(217, 180, 106, .34) 50%, transparent 92%); }
#finale .fin-top::after { bottom: 0; }
#finale .fin-bot::after { top: 0; }
#finale.fin-go .fin-bar { transform: none; }
#finale .fin-skip { font: 500 clamp(9px, .9vw + 3px, 12px) / 1 var(--fin-font); letter-spacing: .22em; text-transform: uppercase; color: var(--fin-text-3); opacity: 0; transition: opacity .6s ease; white-space: nowrap; }
#finale.fin-skipok .fin-skip { opacity: .75; }

/* ---------- надпись ---------- */
#finale .fin-ttl { position: absolute; left: 0; right: 0; top: 37%; transform: translateY(-50%); /* выше середины: герои в кадре — ниже надписи (камера уходит вверх, finale.js) */ display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; }
#finale.fin-t .fin-ttl { opacity: 1; animation: fin-drift 2.2s cubic-bezier(.2, .6, .3, 1) .35s both; }
@keyframes fin-drift { from { transform: translateY(-50%) scale(1); } to { transform: translateY(-50%) scale(1.035); } }
/* тёмная лента за надписью — читается на любом фоне */
#finale .fin-band { position: absolute; left: 0; right: 0; top: -38%; bottom: -38%; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(4, 4, 6, .4) 28%, rgba(4, 4, 6, .4) 72%, transparent); }
#finale.fin-t .fin-band { opacity: 1; transition: opacity .35s ease; }

/* над ником: «Победитель» / «Победила команда» — мелко, с разрядкой, золотом, по бокам волосяные линии */
#finale .fin-kick { display: flex; align-items: center; gap: .9em; margin-bottom: clamp(4px, 1.4vh, 14px); font: 500 clamp(10px, 1.1vw + 5px, 19px) / 1 var(--fin-font); letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: var(--fin-gold-hi); opacity: 0; }
#finale .fin-kick::before, #finale .fin-kick::after { content: ''; width: clamp(24px, 6vw, 90px); height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 180, 106, .7)); }
#finale .fin-kick::after { transform: scaleX(-1); }
#finale.fin-t .fin-kick { animation: fin-rise .5s ease-out .05s both; }

/* главное слово: падает с размаху — крупное и размытое, сжимается и встаёт на место с лёгкой отдачей */
#finale .fin-big { --glow: drop-shadow(0 0 0 transparent); position: relative; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.05; padding: .04em .1em; opacity: 0; }
#finale.fin-t .fin-big { animation: fin-slam .46s cubic-bezier(.16, 1.2, .3, 1) both; }
@keyframes fin-slam {
  0% { opacity: 0; transform: scale(2.2); filter: blur(10px) var(--glow); }
  45% { opacity: 1; filter: blur(0) var(--glow); }
  70% { transform: scale(.965); }
  100% { opacity: 1; transform: scale(1); filter: blur(0) var(--glow); }
}
/* «ПОБЕДА» — золото с мягким свечением */
#finale .fin-big.gold { --glow: drop-shadow(0 0 14px rgba(243, 216, 151, .45)) drop-shadow(0 0 46px rgba(217, 180, 106, .28));
  font: 300 clamp(44px, min(13.5vw, 19vh), 168px) / 1.05 var(--fin-font); letter-spacing: .16em; text-indent: .16em;
  background: linear-gradient(180deg, #fff6dc 0%, var(--fin-gold-hi) 42%, var(--fin-gold) 78%, #a8813f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* ник победителя или название команды — цветом игрока (команды) */
#finale .fin-big.name { font: 400 clamp(32px, min(8.5vw, 13vh), 118px) / 1.05 var(--fin-font); letter-spacing: .05em; color: var(--c, #ece3cf);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 28px color-mix(in srgb, var(--c, #ece3cf) 42%, transparent); }
#finale .fin-big.none { font: 300 clamp(24px, min(5vw, 8vh), 64px) / 1.1 var(--fin-font); letter-spacing: .08em; color: var(--fin-text); }

/* черта с ромбом под словом (как заголовки окон) — разворачивается из центра */
#finale .fin-orn { width: min(560px, 72vw); height: 13px; margin-top: clamp(4px, 1.2vh, 12px); opacity: 0; transform: scaleX(0);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M6.5 1.2 L11.8 6.5 L6.5 11.8 L1.2 6.5 Z' fill='%23d9b46a' fill-opacity='.35' stroke='%23f3d897' stroke-width='1.1'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
    linear-gradient(90deg, transparent, rgba(217, 180, 106, .75) 30%, rgba(217, 180, 106, .75) 70%, transparent) center / 100% 1px no-repeat; }
#finale.fin-t .fin-orn { animation: fin-orn .6s cubic-bezier(.2, .8, .2, 1) .16s both; }
@keyframes fin-orn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

/* под чертой: «Последний выживший» / герой победителя / команда */
#finale .fin-sub { margin-top: clamp(6px, 1.6vh, 16px); font: 500 clamp(10px, 1vw + 5px, 18px) / 1.2 var(--fin-font); letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--fin-text-2); opacity: 0; }
#finale.fin-t .fin-sub { animation: fin-rise .55s ease-out .3s both; }
@keyframes fin-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#finale .hidden { display: none !important; }

/* ---------- вспышка, лучи и прочерки света ---------- */
#finale .fin-flash { position: absolute; left: 50%; top: 50%; width: min(120vmin, 1100px); aspect-ratio: 2.2; translate: -50% -50%; z-index: -1; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 249, 230, .85), rgba(243, 216, 151, .32) 32%, rgba(217, 180, 106, 0) 66%); }
#finale.fin-t .fin-flash { animation: fin-flash .8s ease-out both; }
#finale.fin-lose .fin-flash { background: radial-gradient(ellipse at center, rgba(236, 227, 207, .4), rgba(236, 227, 207, .1) 34%, rgba(236, 227, 207, 0) 64%); }
@keyframes fin-flash { 0% { opacity: 0; scale: .45; } 14% { opacity: 1; } 100% { opacity: 0; scale: 1.4; } }

/* лучи за «ПОБЕДОЙ» — только у победителя: медленно вращаются и гаснут к краям */
#finale .fin-rays { position: absolute; left: 50%; top: 50%; width: min(150vmin, 1500px); aspect-ratio: 1; translate: -50% -50%; z-index: -1; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(243, 216, 151, .085) 0deg 2deg, rgba(243, 216, 151, 0) 2deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 3%, rgba(0, 0, 0, .45) 18%, transparent 46%); mask-image: radial-gradient(circle, #000 3%, rgba(0, 0, 0, .45) 18%, transparent 46%); }
#finale.fin-t.fin-win .fin-rays { animation: fin-rays-in 1s cubic-bezier(.2, .8, .2, 1) .05s both, fin-spin 40s linear infinite; }
@keyframes fin-rays-in { from { opacity: 0; scale: .35; } to { opacity: 1; scale: 1; } }
@keyframes fin-spin { to { rotate: 360deg; } }

#finale .fin-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
#finale .fin-sparks i { position: absolute; left: -1px; bottom: 0; width: 2px; height: var(--l, 18px); border-radius: 1px; transform-origin: 50% 100%; opacity: 0;
  background: linear-gradient(0deg, rgba(243, 216, 151, 0), #fff4d2); animation: fin-spark var(--t, .8s) cubic-bezier(.1, .7, .2, 1) .04s both; }
#finale.fin-lose .fin-sparks i { background: linear-gradient(0deg, rgba(236, 227, 207, 0), rgba(236, 227, 207, .8)); }
@keyframes fin-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-6vmin) scaleY(.3); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d, 30vmin))) scaleY(1); }
}

/* телефон: места по высоте мало — без лишних отступов */
@media (max-height: 500px) {
  #finale { --fin-bh: clamp(16px, 9vh, 60px); }
  #finale .fin-ttl { top: 33%; }
  #finale .fin-orn { margin-top: 2px; }
  #finale .fin-sub { margin-top: 4px; }
  #finale .fin-kick { letter-spacing: .38em; text-indent: .38em; }
}
@media (prefers-reduced-motion: reduce) {
  #finale.fin-t.fin-win .fin-rays { animation: fin-rays-in 1s ease both; }
}

/* ---------- нынешний вид (html.nskit; 10 окт., просьба владельца): надпись — как церемония итогов (ns-game.css #kr-cer):
   пиксельная корона, игровой шрифт Exo 2 с жёсткими ступенчатыми тенями (без свечения и размытия), золотой кованый прут
   с ромбом, искры — пиксельные. Размеры — под 1920×1080, больше экран — растут с --kz; узкое или низкое окно — по vw/vh ---------- */
#finale .fin-ico { display: none; }
html.ns.nskit #finale { --z: var(--kz, 1); }
html.ns.nskit #finale .fin-ico:not(.hidden) { display: block; width: calc(66px * var(--z)); height: calc(48px * var(--z)); margin-bottom: calc(15px * var(--z)); background: var(--k-crown) center / 100% 100% no-repeat; image-rendering: pixelated; opacity: 0; }
html.ns.nskit #finale.fin-t .fin-ico { animation: fin-pop .32s steps(4) both; }
@keyframes fin-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: none; opacity: 1; } }

html.ns.nskit #finale .fin-kick { margin-bottom: calc(6px * var(--z)); font: 800 min(calc(26px * var(--z)), 4vw, 5vh) / 1.1 var(--k-title); letter-spacing: 0; text-indent: 0; text-transform: none; color: var(--k-text-2); text-shadow: 0 3px 0 var(--k-ink); }
html.ns.nskit #finale .fin-kick::before, html.ns.nskit #finale .fin-kick::after { display: none; }

/* слово падает ступенями (как значки кузни), без размытия; снизу место под тени — их не срезает обрезка длинного ника */
html.ns.nskit #finale .fin-big { padding: 0 .12em calc(15px * var(--z)); line-height: 1.1; }
html.ns.nskit #finale.fin-t .fin-big { animation: fin-kslam .42s steps(6) both; }
@keyframes fin-kslam { 0% { opacity: 0; transform: scale(1.7); } 45% { opacity: 1; transform: scale(.95); } 75% { transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
html.ns.nskit #finale .fin-big.gold {
  font: 800 min(calc(132px * var(--z)), 15vw, 19vh) / 1.1 var(--k-title); letter-spacing: .04em; text-indent: .04em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--k-gold-hi);
  text-shadow: 0 calc(6px * var(--z)) 0 var(--k-gold-lo), 0 calc(12px * var(--z)) 0 var(--k-ink);
}
html.ns.nskit #finale .fin-big.name {
  font: 800 min(calc(92px * var(--z)), 9vw, 13vh) / 1.1 var(--k-title); letter-spacing: 0; color: var(--c, var(--k-text));
  text-shadow: 0 calc(6px * var(--z)) 0 color-mix(in srgb, var(--c, #efe6d3) 38%, #000), 0 calc(12px * var(--z)) 0 var(--k-ink);
}
html.ns.nskit #finale .fin-big.none {
  font: 800 min(calc(58px * var(--z)), 6vw, 9vh) / 1.1 var(--k-title); letter-spacing: 0; color: var(--k-violet-hi);
  text-shadow: 0 calc(6px * var(--z)) 0 #4a2a7a, 0 calc(12px * var(--z)) 0 var(--k-ink);
}

/* черта под словом — золотой кованый прут с ромбом (как .k-rod.gold.mid) */
html.ns.nskit #finale .fin-orn {
  position: relative; box-sizing: border-box; width: min(calc(420px * var(--z)), 72vw); height: calc(18px * var(--z)); margin-top: calc(3px * var(--z));
  background: none; border-style: solid; border-color: transparent; border-width: 0 calc(18px * var(--z));
  border-image: var(--k-rod-gold) 0 18 fill / 0 calc(18px * var(--z)) / 0 stretch; image-rendering: pixelated;
}
html.ns.nskit #finale .fin-orn::after { content: ''; position: absolute; left: 50%; top: calc(-2px * var(--z)); width: calc(21px * var(--z)); height: calc(21px * var(--z)); margin-left: calc(-10px * var(--z)); background: var(--k-dia) center / 100% no-repeat; image-rendering: pixelated; }
html.ns.nskit #finale.fin-t .fin-orn { animation: fin-orn .36s steps(6) .16s both; }

/* «Последний выживший» / герой победителя — как подпись церемонии */
html.ns.nskit #finale .fin-sub { margin-top: calc(12px * var(--z)); font: 800 min(calc(26px * var(--z)), 4vw, 5vh) / 1.2 var(--k-title); letter-spacing: 0; text-indent: 0; text-transform: none; color: var(--k-text-2); text-shadow: 0 3px 0 var(--k-ink); }
html.ns.nskit #finale.fin-win .fin-sub { color: var(--k-gold); }

/* искры — пиксельные прочерки ступенями */
html.ns.nskit #finale .fin-sparks i { left: -1.5px; width: 3px; border-radius: 0; animation-timing-function: steps(9);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0 34%, var(--k-gold) 34% 67%, var(--k-gold-hi) 67%); }
html.ns.nskit #finale.fin-lose .fin-sparks i { background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0 34%, var(--k-text-2) 34% 67%, var(--k-text) 67%); }
/* кромка полос кино — сплошная золотая, 3 px */
html.ns.nskit #finale .fin-bar::after { height: 3px; background: var(--k-gold-lo); }