/* Сцены Poké Hub (C3): кинорамка, табличка стража, карточка зоны, реплики, поимка, эволюция, вырезка ульты.
   Общий слой обеих игр — разметку собирает shared/ui/cine.js; токены страницы (--ink, --paper, --stripes, шрифты) берутся из её :root. */
:root {
  --cine-ink:#140e32; --cine-ink-2:#1e1446;                       /* рамка и затемнение — тон фона окон .modal */
  --cine-glow:#fff3b8;                                            /* свет эволюции и щелчка Поке-бола */
  --cine-ray:#b99dff;                                             /* лучи эволюции до вспышки — --purple 60% с --paper */
  --cine-bar:clamp(44px, 11vh, 120px);
  --cine-dim:#16102c9e; --cine-dim-2:#16102ccc; --cine-soft:#16102c66;   /* подложки подписей — как у #banner p */
  --cine-mute:#ffffffa6;                                                   /* приглушённый текст на тёмной рамке */
  --cine-tsh:#00000026;                                                    /* тень текста — как у заголовков .modal */
  /* цвета типов — те же, что TYPE_COLOR в bonk/game.js и arena/game.js */
  --ty-normal:#a8a878; --ty-fighting:#e0523a; --ty-flying:#a8c4ff; --ty-poison:#b560e0; --ty-ground:#e0b860; --ty-rock:#bfa55a;
  --ty-bug:#a8c832; --ty-ghost:#7a6ad8; --ty-steel:#b8c8d8; --ty-fire:#ff7a2a; --ty-water:#3aa0ff; --ty-grass:#5ad24a;
  --ty-electric:#ffd82a; --ty-psychic:#ff5aa0; --ty-ice:#8ef0ff; --ty-dragon:#7a5aff; --ty-dark:#6a5048; --ty-fairy:#ff9ae0;
}
@keyframes cineIn { from { opacity:0; transform:translateX(-80px) skew(-8deg); } }
@keyframes cineOut { to { opacity:0; transform:translateX(48px) skew(-8deg); } }
@keyframes cineInR { from { opacity:0; transform:translateX(80px) skew(-8deg); } }
@keyframes cineRise { from { opacity:0; transform:translateY(22px) scale(.96); } }
@keyframes cineSpin { to { transform:translate(-50%, -50%) rotate(360deg); } }
@keyframes cineSpark { 0% { opacity:0; transform:translate(-50%, -50%) scale(.4); } 25% { opacity:1; transform:translate(-50%, -50%) scale(1.15); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6); } }
@keyframes cineBlip { 50% { transform:translateY(-3px); } }
@keyframes cineWob { 0%, 100% { rotate:0deg; } 25% { rotate:-22deg; } 75% { rotate:18deg; } }

/* слой: над окнами игры (.modal — 20, кнопки «В путь» — 30), под загрузкой (40) и соцчастью (50+) */
.cine { position:fixed; inset:0; z-index:35; pointer-events:none; font:700 14px/1.35 var(--font); color:var(--ink); }
.cine.block { pointer-events:auto; }
body.cine-hide #hud { opacity:0; transition:opacity .2s ease-out; }
body.cine-hide #hud * { pointer-events:none !important; }
/* окно игры (уровень, награда), открытое под сценой, ждёт её конца невидимым — сцена не ложится поверх чужих карточек */
body.cine-hide .modal.on { opacity:0 !important; pointer-events:none !important; }
body.cine-out .modal.on, body.cine-out #hud { transition:opacity .25s ease-out; }   /* после сцены HUD и окно проявляются, а не выскакивают */
/* короткий кадр (фаза стража): HUD гаснет, баннер игры с именем фазы остаётся */
body.cine-soft #hud > :not(#banner) { opacity:0; transition:opacity .2s ease-out; pointer-events:none !important; }

/* ---------- кинорамка ---------- */
.cine-bar { position:absolute; left:0; right:0; height:var(--cine-bar); background:var(--cine-ink); transform:scaleY(0); transition:transform .4s cubic-bezier(.2, .8, .2, 1); }
.cine-bar.t { top:0; transform-origin:top; box-shadow:inset 0 -3px var(--cine-ink-2); }
.cine-bar.b { bottom:0; transform-origin:bottom; box-shadow:inset 0 3px var(--cine-ink-2); }
.cine.thin .cine-bar { height:calc(var(--cine-bar) * .55); }
.cine.bars .cine-bar { transform:none; }
.cine.calm .cine-bar { transform:none; opacity:0; transition:opacity .3s ease-out; }
.cine.calm.bars .cine-bar { opacity:1; }

/* подсказка пропуска — в нижней полосе рамки */
.cine-hint { position:absolute; right:max(18px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); color:var(--cine-mute); font:800 12px var(--font); letter-spacing:.3px; white-space:nowrap; }
.cine.thin .cine-hint { display:none; }

/* ---------- вспышка и затемнение ---------- */
.cine-flash, .cine-veil, .cine-vig { position:absolute; inset:0; opacity:0; pointer-events:none; }
.cine-flash { background:var(--paper); }
.cine-veil { background:radial-gradient(ellipse at center, var(--cine-ink-2), var(--cine-ink)); }
.cine-vig { background:radial-gradient(ellipse at center, transparent 52%, color-mix(in srgb, var(--tc, var(--purple)) 55%, var(--cine-ink)) 100%); transition:opacity .25s ease-out; }
.cine-vig.cn-on { opacity:.6; }

/* ---------- табличка стража (STYLE §5.1): имя крупно, титул мелко, полоса цвета типа ---------- */
.cine-plate { position:absolute; left:max(6vw, calc(env(safe-area-inset-left) + 16px)); bottom:calc(var(--cine-bar) + 20px); display:flex; align-items:center; gap:18px; padding:14px 38px 22px 16px; max-width:calc(100vw - 32px);
  border-radius:18px; color:var(--paper); transform:skew(-8deg); box-shadow:var(--shadow), 0 0 0 3px color-mix(in srgb, var(--kc) 40%, var(--paper));
  background:var(--stripes), linear-gradient(100deg, var(--kc), color-mix(in srgb, var(--kc-d) 72%, var(--ink)));
  animation:cineIn .5s cubic-bezier(.2, .9, .3, 1.15) both; }
.cine-plate::after { content:''; position:absolute; left:16px; right:16px; bottom:7px; height:8px; border-radius:8px; background:linear-gradient(90deg, var(--tc) 0 50%, var(--tc2) 50% 100%); box-shadow:0 0 0 2px var(--cine-ink); }
.cine-plate.cn-out { animation:cineOut .3s ease-in forwards; }
.cine-plate.cn-r { left:auto; right:max(6vw, calc(env(safe-area-inset-right) + 16px)); animation-name:cineInR; }   /* PokéArena: страж справа — табличка под ним */
.cine-plate .cn-pt { flex:none; width:80px; height:80px; border-radius:50%; overflow:hidden; background:var(--paper); border:4px solid var(--tc); box-shadow:0 0 0 3px var(--paper), var(--shadow-sm); transform:skew(8deg); }
.cine-plate .cn-pt img { display:block; width:80px; height:80px; image-rendering:pixelated; }
.cine-plate .cn-tx { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.cine-plate .cn-kind { display:inline-flex; align-items:center; gap:6px; padding:2px 12px; border-radius:99px; background:var(--cine-ink); color:var(--paper); font:900 12px var(--font-title); letter-spacing:1.2px; text-transform:uppercase; }
.cine-plate .cn-nm { margin:2px 0 0; font:900 clamp(32px, 4.4vw, 60px)/1.05 var(--font-title); color:var(--paper); text-shadow:0 3px var(--cine-tsh); -webkit-text-stroke:2px var(--cine-ink); paint-order:stroke fill; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(64vw, 720px); }
.cine-plate .cn-ti { font:900 clamp(14px, 1.4vw, 19px) var(--font-title); color:var(--paper); letter-spacing:.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(64vw, 720px); text-shadow:0 2px var(--cine-tsh); }
.cine-plate .cn-types { display:flex; gap:6px; margin-top:6px; }
.cine-plate .cn-types span { display:inline-flex; align-items:center; gap:4px; padding:1px 10px 1px 3px; border-radius:99px; background:color-mix(in srgb, var(--tc) 78%, var(--cine-ink)); box-shadow:0 0 0 2px color-mix(in srgb, var(--tc) 45%, var(--paper)); font:900 12px var(--font-title); text-shadow:0 1px var(--cine-tsh); }
.cine-plate .cn-types img { width:20px; height:20px; }
.cine.calm .cine-plate { animation:fadeIn .4s ease-out both; }
.cine.calm .cine-plate.cn-out { animation:none; opacity:0; transition:opacity .3s ease-in; }

/* ---------- карточка зоны ---------- */
.cine-card { position:absolute; top:calc(var(--cine-bar) + 4vh); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; animation:cineRise .45s cubic-bezier(.2, .9, .3, 1.1) both; }
.cine-card.cn-out { opacity:0; transform:translateY(-12px); transition:opacity .3s ease-in, transform .3s ease-in; }
.cine-card h1 { margin:0; padding:8px 44px; border-radius:16px; color:var(--paper); font:900 clamp(30px, 4.6vw, 58px) var(--font-title); transform:skew(-8deg); box-shadow:var(--shadow);
  background:var(--stripes), linear-gradient(100deg, var(--kc, var(--blue)), color-mix(in srgb, var(--kc, var(--blue)) 55%, var(--cine-ink))); text-shadow:0 3px var(--cine-tsh); }
.cine-card .cn-zn { padding:6px 20px; border-radius:99px; background:var(--paper); color:var(--ink); font:900 clamp(16px, 1.7vw, 22px) var(--font-title); box-shadow:var(--shadow-sm); }
.cine-card .cn-sub { padding:4px 16px; border-radius:99px; background:var(--cine-dim); color:var(--paper); font-size:14px; font-weight:800; }
.cine-card .cn-load { width:180px; height:8px; border-radius:99px; background:var(--cine-ink-2); overflow:hidden; box-shadow:0 0 0 2px color-mix(in srgb, var(--paper) 30%, var(--cine-ink)); opacity:0; transition:opacity .2s; }
.cine-card .cn-load i { display:block; height:100%; width:40%; border-radius:99px; background:linear-gradient(90deg, var(--yellow), var(--orange)); animation:shine 1s linear infinite; background-size:200% 100%; }
.cine-card.cn-loading .cn-load { opacity:1; }
.cine.calm .cine-card { animation:fadeIn .35s ease-out both; }

/* ---------- реплика: портрет PMD слева, имя — заголовочным шрифтом (STYLE §5.1) ---------- */
.cine-say { position:absolute; left:50%; bottom:calc(var(--cine-bar) + 14px + env(safe-area-inset-bottom)); width:min(780px, calc(100vw - 32px)); transform:translateX(-50%); display:flex; gap:16px; align-items:flex-start;
  padding:16px 20px 16px 16px; border-radius:var(--radius, 22px); background:var(--paper); box-shadow:var(--shadow); animation:slideUp .25s ease-out both; pointer-events:auto; }
.cine-say .cn-pf { position:relative; flex:none; width:80px; height:80px; border-radius:14px; background:var(--paper-2); box-shadow:0 0 0 3px var(--nc, var(--purple)), var(--shadow-sm); }
.cine-say .cn-pf > img.cn-pic { display:block; width:80px; height:80px; border-radius:14px; image-rendering:pixelated; }
.cine-say .cn-pf > img.cn-pic.cn-art { image-rendering:auto; object-fit:cover; }
.cine-say .cn-pf .cn-emo { position:absolute; right:-14px; top:-16px; width:36px; height:36px; image-rendering:pixelated; filter:drop-shadow(0 4px 4px #00000040); animation:popIn .2s ease-out both; }
.cine-say .cn-pf.cn-happy > img.cn-pic { animation:cineBlip .35s ease-out 2; }
.cine-say .cn-pf.cn-worried > img.cn-pic { animation:wobble .5s ease-in-out 1; transform-origin:50% 90%; }
.cine-say .cn-bd { flex:1; min-width:0; }
.cine-say .cn-who { display:inline-block; margin:-30px 0 6px -4px; padding:3px 16px; border-radius:10px; color:var(--paper); font:900 18px var(--font-title); background:var(--stripes), var(--nc, var(--purple)); transform:skew(-8deg); box-shadow:var(--shadow-sm); }
.cine-say .cn-tx { min-height:2.7em; font:800 18px/1.38 var(--font); color:var(--ink); overflow-wrap:anywhere; }
.cine-say .cn-nx { position:absolute; right:18px; bottom:10px; color:var(--ink-2); font:900 13px var(--font-title); animation:cineBlip .8s ease-in-out infinite; opacity:0; }
.cine-say.cn-done .cn-nx { opacity:1; }
.cine-say .cn-skip { position:absolute; right:12px; top:-46px; }
.cine.calm .cine-say, .cine.calm .cine-say .cn-pf > img.cn-pic, .cine.calm .cine-say .cn-nx, .cine.calm .cine-say .cn-pf .cn-emo { animation:none; }

/* ---------- поимка: три покачивания, щелчок, карточка ---------- */
.cine-dots { position:absolute; left:50%; bottom:calc(var(--cine-bar) + 22px); transform:translateX(-50%); display:flex; gap:12px; padding:9px 16px; border-radius:99px; background:var(--cine-dim-2); box-shadow:var(--shadow-sm); animation:fadeIn .25s ease-out both; }
.cine-dots img { width:60px; height:60px; image-rendering:pixelated; opacity:.35; filter:grayscale(1); transition:opacity .15s, filter .15s; }
.cine-dots img.cn-on { opacity:1; filter:none; animation:cineWob .3s ease-in-out 1; }
.cine-dots.cn-done img { animation:popIn .25s ease-out both; }
.cine-catch { position:absolute; left:50%; top:calc(var(--cine-bar) + 3vh); width:min(360px, calc(100vw - 32px)); transform:translateX(-50%); }
.cine-catch .cn-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:34px 18px 18px; border-radius:var(--radius, 22px); background:var(--paper); box-shadow:var(--shadow), 0 0 0 4px var(--green); animation:cardIn .4s cubic-bezier(.2, .9, .3, 1.15) both; }
.cine-catch h1 { position:absolute; top:-24px; left:50%; margin:0; padding:4px 26px; white-space:nowrap; border-radius:14px; color:var(--paper); font:900 28px var(--font-title); transform:translateX(-50%) skew(-8deg); box-shadow:var(--shadow-sm);
  background:var(--stripes), linear-gradient(100deg, var(--green), var(--green-d)); text-shadow:0 2px var(--cine-tsh); }
.cine-catch .cn-stage, .cine-evo .cn-stage { position:relative; display:flex; align-items:flex-end; justify-content:center; }
.cine-catch .cn-stage { width:100%; min-height:150px; padding:6px 0 10px; background:radial-gradient(closest-side, var(--paper-2), transparent); }
.cine-catch .cn-nm { font:900 26px var(--font-title); color:var(--ink); }
.cine-catch .cn-sub { color:var(--ink-2); font-size:13px; font-weight:800; text-align:center; text-wrap:balance; }
.cine-catch.cn-out, .cine-evo.cn-out, .cine-ult.cn-out { opacity:0; transition:opacity .3s ease-in; }

/* ---------- звёзды (щелчок, эволюция) ---------- */
.cine-star { position:absolute; width:32px; height:32px; image-rendering:pixelated; pointer-events:none; animation:cineSpark var(--t, .8s) ease-out var(--d, 0s) both; }
.cine.calm .cine-star { animation:fadeIn .3s ease-out reverse both; }

/* ---------- эволюция: общий компонент обеих игр ---------- */
.cine-evo { position:absolute; inset:0; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; animation:fadeIn .3s ease-out both;
  background:radial-gradient(ellipse at center, var(--cine-ink-2), var(--cine-ink)); }
.cine-evo .cn-rays { position:absolute; left:50%; top:46%; width:118vmax; height:118vmax; transform:translate(-50%, -50%); opacity:.5; transition:opacity .4s; animation:cineSpin 26s linear infinite; }
.cine-evo .cn-rays canvas { position:absolute; inset:0; width:100%; height:100%; transition:opacity .4s; }   /* холст лучей (shared/ui/cine.js rays) — мягкие края при растяжении */
.cine-evo .cn-rays canvas + canvas { opacity:0; }
.cine-evo.cn-lit .cn-rays { opacity:1; }
.cine-evo.cn-lit .cn-rays canvas:first-child { opacity:0; }
.cine-evo.cn-lit .cn-rays canvas + canvas { opacity:1; }
.cine.calm .cine-evo .cn-rays { animation:none; }
.cine-evo .cn-stage { width:100%; height:var(--sh, 240px); }
.cine-evo .cn-stage > * { position:absolute; bottom:0; left:50%; transform:translateX(-50%); }
.cine-evo .cn-stage .cn-sil { filter:brightness(0) invert(1) drop-shadow(0 0 12px var(--cine-glow)); }
.cine-evo .cn-stage .cn-x { opacity:0; }
.cine.calm .cine-evo .cn-stage > * { transition:opacity .28s ease-in-out; }
/* «меньше движения»: без подскоков, качаний и наплывов с масштабом — только проявление */
.cine.calm .cine-evo .cn-pop, .cine.calm .cine-dots img.cn-on, .cine.calm .cine-dots.cn-done img { animation:none; }
.cine.calm .cine-catch .cn-card, .cine.calm .cine-evo .cn-rib, .cine.calm .cine-evo .cn-nm { animation:fadeIn .3s ease-out both; }
.cine-evo .cn-stage .cn-grow { transition:transform .45s ease-in; transform:translateX(-50%) scale(1.12); }
.cine-evo .cn-stage .cn-pop { animation:popIn .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.cine-evo .cn-rib { position:relative; margin:0; padding:6px 30px; border-radius:14px; color:var(--paper); font:900 clamp(22px, 3vw, 34px) var(--font-title); transform:skew(-8deg); box-shadow:var(--shadow);
  background:var(--stripes), linear-gradient(100deg, var(--purple), var(--purple-d)); text-shadow:0 2px var(--cine-tsh); animation:slideDown .35s ease-out both; }
.cine-evo .cn-rib.cn-gold { background:var(--stripes), linear-gradient(100deg, var(--yellow), var(--orange)); color:var(--ink); text-shadow:none; }
.cine-evo .cn-nm { font:900 clamp(32px, 5vw, 64px) var(--font-title); color:var(--paper); -webkit-text-stroke:3px var(--cine-ink); paint-order:stroke fill; text-shadow:0 4px var(--cine-tsh); animation:cineRise .35s ease-out both; }
.cine-evo .cn-types { display:flex; gap:8px; animation:fadeIn .3s ease-out .15s both; }
.cine-evo .cn-types span { display:inline-flex; align-items:center; gap:6px; padding:3px 14px 3px 4px; border-radius:99px; color:var(--paper); font:900 14px var(--font-title); background:var(--stripes), color-mix(in srgb, var(--tc) 80%, var(--cine-ink)); box-shadow:var(--shadow-sm); }
.cine-evo .cn-types img { width:22px; height:22px; }
.cine-evo .cn-hint { position:absolute; bottom:max(18px, env(safe-area-inset-bottom)); color:var(--cine-mute); font:800 13px var(--font); }
.cine-say .cn-lo { visibility:hidden; }

/* ---------- PMD-спрайт в разметке: холст кадра покоя, растянут целым масштабом ближайшим соседом ---------- */
.cine-spr { display:block; image-rendering:pixelated; }

/* ---------- вырезка ульты ---------- */
.cine-ult { position:absolute; left:-4vw; right:-4vw; top:calc(16vh + env(safe-area-inset-top)); height:clamp(96px, 15vh, 150px); display:flex; align-items:center; gap:2vw; padding:0 10vw;
  transform:skew(0deg, -4deg); box-shadow:var(--shadow), 0 0 0 4px color-mix(in srgb, var(--tc) 40%, var(--paper)); overflow:hidden;
  background:var(--stripes), linear-gradient(100deg, color-mix(in srgb, var(--tc) 88%, var(--cine-ink)), color-mix(in srgb, var(--tc) 50%, var(--cine-ink))); animation:cineUlt .18s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes cineUlt { from { transform:skew(0deg, -4deg) translateX(-100%); } }
.cine-ult.cn-leave { transform:skew(0deg, -4deg) translateX(100%); transition:transform .25s ease-in; }
.cine-ult .cn-who { flex:none; align-self:flex-end; margin-bottom:-6px; }
.cine-ult .cn-tx { display:flex; flex-direction:column; min-width:0; }
.cine-ult .cn-k { align-self:flex-start; padding:1px 12px; border-radius:99px; background:var(--cine-ink); color:var(--yellow); font:900 13px var(--font-title); letter-spacing:2px; }
.cine-ult .cn-nm { font:900 clamp(28px, 5vw, 66px)/1.05 var(--font-title); color:var(--paper); -webkit-text-stroke:3px var(--cine-ink); paint-order:stroke fill; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cine.calm .cine-ult { animation:fadeIn .2s ease-out both; }
.cine.calm .cine-ult.cn-leave { transform:skew(0deg, -4deg); opacity:0; transition:opacity .25s ease-in; }

/* ---------- телефон ---------- */
@media (max-width:640px) {
  .cine { --cine-bar:clamp(40px, 8vh, 72px); }
  .cine-plate { left:16px; right:16px; gap:12px; padding:10px 18px 16px 10px; }
  .cine-plate .cn-nm { font-size:30px; }
  .cine-say { padding:14px 14px 14px 12px; gap:12px; }
  .cine-say .cn-pf, .cine-say .cn-pf > img.cn-pic { width:80px; height:80px; }
  .cine-say .cn-tx { font-size:16px; }
  .cine-say .cn-who { font-size:16px; }
  .cine-ult { padding:0 6vw; }
  .cine-dots img { width:30px; height:30px; }
  .cine-card { top:calc(24vh + env(safe-area-inset-top)); }   /* ниже верхней панели HUD телефона */
  .cine-evo .cn-rib { max-width:calc(100vw - 48px); font-size:20px; text-align:center; text-wrap:balance; }
}