/* Сцены событий походов «Кино» (js/cine). Кадр 390×844 — как в макетах, вписан в экран масштабом;
   поля вокруг — чёрные. Двигается только transform и opacity; размытие, ночной прицел и тепловизор —
   готовые картинки (assets/ev). Пока сцена открыта, всё под ней не рисуется (body.in-cine). */
.cn-wrap { position: fixed; inset: 0; z-index: 120; background: #020505; overflow: hidden; animation: cnIn .3s ease-out both; }
.cn-wrap.out { animation: cnOut .26s ease-in both; }
@keyframes cnIn { from { opacity: 0; } }
@keyframes cnOut { to { opacity: 0; } }
.cn-probe { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.cn-stage { position: absolute; left: 0; top: 0; width: 390px; height: 844px; overflow: hidden; transform-origin: 0 0; background: #030707;
  color: #F6F3EC; font-family: var(--f-text); -webkit-user-select: none; user-select: none; }
.cn-stage *, .cn-stage *::before, .cn-stage *::after { box-sizing: border-box; }
body.in-cine #pages, body.in-cine .app-bg, body.in-cine #tabbar { visibility: hidden; }
body.in-cine #pages *, body.in-cine .app-bg *, body.in-cine #tabbar * { animation-play-state: paused !important; }

.cn-fill { position: absolute; inset: 0; }
.cn-img { position: absolute; left: 0; top: 0; display: block; max-width: none; transform-origin: 0 0; will-change: transform; }
.cn-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.cn-w { display: inline-block; }
.cn-chap { position: absolute; left: 18px; top: 23px; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(246, 243, 236, .68); white-space: nowrap; z-index: 20; }
.cn-chap svg { width: 15px; height: 15px; flex: none; }
.cn-chap .t b, .cn-chap .t i { font: inherit; }
/* не влезает до «поход на паузе» — «событие 2 из 3» второй строкой, мельче (core.js fitChap; разбор экранов 06.10) */
.cn-chap.two { top: 17px; }
.cn-chap.two .t { display: flex; flex-direction: column; line-height: 1.15; }
.cn-chap.two .sep { display: none; }
.cn-chap.two i { font-size: 11.5px; color: rgba(246, 243, 236, .58); }
.cn-pill { position: absolute; right: 16px; top: 19px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 9px; border-radius: 13px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap; z-index: 20; opacity: 0; }
.cn-pill svg { width: 13px; height: 13px; }
.cn-pill.stop { color: var(--accent); background: rgba(243, 210, 139, .12); border: 1px solid rgba(243, 210, 139, .4); }
.cn-pill.go { color: #9FE3B6; background: rgba(159, 227, 182, .12); border: 1px solid rgba(159, 227, 182, .4); }
/* «Попутное течение» Водяного: пока событие ждёт ответа, лодка идёт — вместо «поход на паузе» сразу «поход идёт» */
.cn-stage.keeps .cn-pill.stop { display: none !important; }
.cn-stage.keeps .cn-pill.go { opacity: 1 !important; transform: none !important; }
.cn-ttl { position: absolute; left: 18px; right: 14px; font-size: 80px; font-weight: 900; line-height: .84; letter-spacing: -.01em; transform-origin: 0% 85%;
  text-shadow: 0 8px 30px rgba(0, 0, 0, .55); opacity: 0; z-index: 20; }
.cn-ttl.m { font-size: 62px; }
.cn-ttl.win { color: var(--accent); text-shadow: 0 0 34px rgba(243, 210, 139, .45), 0 8px 30px rgba(0, 0, 0, .55); }
.cn-ttl.lose { color: #FF9C8E; }
.cn-low { position: absolute; left: 22px; right: 22px; z-index: 20; }
.cn-sub { font-size: 17.5px; line-height: 1.42; font-style: italic; font-weight: 500; text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
.cn-say { font-size: 17px; line-height: 1.42; font-weight: 500; text-shadow: 0 2px 12px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .8); }
.cn-rules { margin-top: 10px; font-size: 14px; line-height: 1.42; color: rgba(246, 243, 236, .72); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); opacity: 0; }
.cn-low.dense .cn-sub { font-size: 16px; } .cn-low.dense .cn-rules { font-size: 13px; margin-top: 7px; }
.cn-susp { position: absolute; left: 22px; right: 22px; text-align: center; font-size: 19px; line-height: 1.4; font-style: italic; font-weight: 500; z-index: 20;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.cn-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 14px; line-height: 1.42; color: rgba(246, 243, 236, .76); opacity: 0; }
.cn-tip svg { width: 16px; height: 16px; flex: none; color: #F3C969; margin-top: 2px; }
/* что дальше — бирюзовой строкой под фишками («Помощь выберете на следующем экране», разбор экранов 06.10) */
.cn-note { margin-top: 14px; font-size: 14.5px; line-height: 1.42; font-weight: 600; color: #A9E4D0; text-shadow: 0 2px 10px rgba(0, 0, 0, .85); opacity: 0; }
/* что случилось — строкой над заголовком исхода («Охрана не удержала налётчиков») */
.cn-kick { position: absolute; left: 22px; right: 22px; top: 440px; z-index: 21; font-size: 17px; font-weight: 700; line-height: 1.2; color: #F6F3EC; opacity: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .9); }

.cn-acts { position: absolute; left: 18px; right: 18px; top: 744px; height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; z-index: 30; }
.cn-acts.one { grid-template-columns: minmax(0, 1fr); }
.cn-acts.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* сама полоса кнопок нажатий не ловит — только её кнопки (06.10, скрин владельца: в сценах «лицом к лицу» пустая
   полоса «Дальше» лежала поверх нижнего ответа, и «Пропустить» / «Отказаться» не нажимались) */
.cn-acts { pointer-events: none; }
.cn-acts > * { pointer-events: auto; }
.cn-b { position: relative; border: 0; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 8px;
  text-align: center; font: inherit; cursor: pointer; opacity: 0; -webkit-tap-highlight-color: transparent; }
.cn-b .l { display: flex; align-items: center; gap: 7px; font-size: 24px; font-weight: 900; line-height: 1; white-space: nowrap; }
.cn-b .l svg { width: 19px; height: 19px; flex: none; }
/* подсказка — числа риска и выигрыша: крупнее и ярче; длинная переносится второй строкой, а не за край
   (разбор экранов 06.10) */
.cn-b .h { font-size: 12.5px; font-weight: 700; line-height: 1.15; opacity: .86; text-wrap: balance; }
.cn-b .h b { font-weight: 900; }
.cn-b.ghost { background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .22); color: #F6F3EC; }
.cn-b.gold { color: #1F1A0E; box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  background: var(--accent); background-image: radial-gradient(circle at 34% 22%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 52%), radial-gradient(circle at 60% 100%, rgba(80, 50, 0, .22), rgba(0, 0, 0, 0) 60%); }
.cn-b.gold.pressed { box-shadow: 0 0 34px 4px rgba(243, 210, 139, .7); }
/* пока ждём исход — выбранное действие спокойной бирюзовой плашкой с полоской хода (core.js holdChoice) */
.cn-acts.hold { grid-template-columns: minmax(0, 1fr); }
.cn-acts.hold .cn-b:not(.wait) { display: none; }
.cn-acts .cn-b.wait { overflow: hidden; color: #A9E4D0; background: rgba(169, 228, 208, .08); background-image: none; border: 1.5px solid rgba(169, 228, 208, .4); box-shadow: none;
  pointer-events: none; }
.cn-acts .cn-b.wait .h { font-size: 13px; opacity: .9; }
.cn-go { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #A9E4D0; box-shadow: 0 0 10px rgba(169, 228, 208, .8); transform-origin: 0 50%; transform: scaleX(0); }
/* дорога: кнопки одной ширины, шанс — жирно во второй строке; осторожный путь — бирюзовый, как его кусок дуги */
.cn-acts.road .cn-b .h { font-size: 13px; opacity: .9; margin-top: 3px; }
.cn-acts.road .cn-b .h b { font-size: 15px; }
.cn-acts.road .cn-b.ghost { border-color: rgba(169, 228, 208, .6); }
.cn-acts.road .cn-b.ghost .l svg { color: #A9E4D0; }
.cn-rip { position: absolute; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .95); pointer-events: none; z-index: 40;
  box-shadow: 0 0 22px rgba(255, 255, 255, .5), inset 0 0 16px rgba(255, 255, 255, .35); opacity: 0; }
.cn-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cn-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; font-size: 13.5px; font-weight: 700; white-space: nowrap;
  color: #F6F3EC; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); opacity: 0; }
.cn-chip svg { width: 15px; height: 15px; }
.cn-chip.up { color: #9FE3B6; background: rgba(159, 227, 182, .1); border-color: rgba(159, 227, 182, .38); }
.cn-chip.down { color: #F29A8E; background: rgba(242, 154, 142, .1); border-color: rgba(242, 154, 142, .38); }
.cn-chip.warn { color: #F3C969; background: rgba(243, 201, 105, .1); border-color: rgba(243, 201, 105, .38); }
.cn-chip.gold { color: var(--accent); background: rgba(243, 210, 139, .12); border-color: rgba(243, 210, 139, .45); }
.cn-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; }
.cn-grain { position: absolute; inset: -60px; background-repeat: repeat; background-size: 256px 256px; opacity: .16; pointer-events: none; z-index: 45;
  animation: cnGrain .48s steps(1) infinite; }
@keyframes cnGrain { 0% { transform: translate(0, 0); } 17% { transform: translate(-23px, 11px); } 33% { transform: translate(13px, -19px); }
  50% { transform: translate(-9px, -7px); } 67% { transform: translate(21px, 17px); } 83% { transform: translate(-17px, 23px); } }
.cn-glow { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 50% at 55% 30%, rgba(243, 210, 139, .42), rgba(243, 210, 139, 0) 70%); }
.cn-redt { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(120, 20, 30, .32), rgba(40, 10, 20, .25)); }

/* ── А · Катсцена ── */
.cn-bar { position: absolute; left: 0; right: 0; background: #030808; z-index: 10; }
.cn-bar.t { top: 0; height: 64px; }
.cn-bar.b { top: 544px; bottom: 0; }
.cn-frame { position: absolute; left: 0; top: 64px; width: 390px; height: 480px; overflow: hidden; background: #000; z-index: 1; }
.cn-frame-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 8, 8, .94) 0, rgba(3, 8, 8, .4) 24%, rgba(3, 8, 8, 0) 44%), linear-gradient(180deg, rgba(3, 8, 8, .55), rgba(3, 8, 8, 0) 20%); }
.cn-rain { position: absolute; left: -160px; top: -300px; width: 700px; height: 1100px; background-repeat: repeat; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='150'%3E%3Cg stroke='rgb(215,230,242)' stroke-opacity='.6' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M12 4v30'/%3E%3Cpath d='M52 46v24'/%3E%3Cpath d='M78 92v34'/%3E%3Cpath d='M30 104v22'/%3E%3Cpath d='M66 8v18'/%3E%3C/g%3E%3C/svg%3E"); }
.cn-rain.r1 { background-size: 90px 150px; animation: cnRain1 .34s linear infinite; }
.cn-rain.r2 { background-size: 130px 216px; opacity: .5; animation: cnRain2 .52s linear infinite; }
@keyframes cnRain1 { from { transform: rotate(14deg) translateY(0); } to { transform: rotate(14deg) translateY(150px); } }
@keyframes cnRain2 { from { transform: rotate(9deg) translateY(0); } to { transform: rotate(9deg) translateY(216px); } }
.cn-light { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.cn-light.warm { background: radial-gradient(75% 60% at 74% 12%, rgba(255, 206, 140, .5), rgba(255, 206, 140, 0) 72%); }
.cn-light.cold { background: linear-gradient(180deg, rgba(70, 92, 112, .5), rgba(20, 32, 44, .35)); }
.cn-fogl { position: absolute; width: 900px; height: 520px; max-width: none; pointer-events: none; }
.cn-fogl.d1 { animation: cnFog1 9s ease-in-out infinite alternate; }
.cn-fogl.d2 { animation: cnFog2 11s ease-in-out infinite alternate; }
@keyframes cnFog1 { from { transform: translateX(-120px); } to { transform: translateX(40px); } }
@keyframes cnFog2 { from { transform: translateX(60px) scaleX(-1); } to { transform: translateX(-110px) scaleX(-1); } }
.cn-whiteout { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(90% 80% at 50% 50%, rgba(226, 233, 232, .96), rgba(226, 233, 232, .7)); }
.cn-siren { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.cn-siren i { position: absolute; inset: 0; }
.cn-siren .r { background: radial-gradient(46% 34% at 104% 30%, rgba(255, 50, 70, .7), rgba(255, 50, 70, 0) 72%); animation: cnSirR .9s steps(1) infinite; }
.cn-siren .bl { background: radial-gradient(46% 34% at 104% 48%, rgba(70, 130, 255, .7), rgba(70, 130, 255, 0) 72%); animation: cnSirB .9s steps(1) infinite; }
@keyframes cnSirR { 0% { opacity: 1; } 50% { opacity: .12; } }
@keyframes cnSirB { 0% { opacity: .12; } 50% { opacity: 1; } }
.cn-lamp { position: absolute; width: 320px; height: 320px; margin: -160px 0 0 -160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 200, 120, .42), rgba(255, 200, 120, 0)); animation: cnLamp .9s steps(1) infinite; }
@keyframes cnLamp { 0% { opacity: 1; } 30% { opacity: .72; } 45% { opacity: .95; } 70% { opacity: .6; } 85% { opacity: .9; } }
.cn-spray { position: absolute; width: 0; height: 0; pointer-events: none; }
.cn-spray i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(240, 250, 255, .92); box-shadow: 0 0 6px rgba(255, 255, 255, .7); opacity: 0;
  animation: cnSpray 1.3s ease-out infinite; }
@keyframes cnSpray { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0; } }
.cn-sun { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 50% at 78% 8%, rgba(255, 214, 150, .42), rgba(255, 214, 150, 0) 70%); }
.cn-alarm { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 90px 18px rgba(255, 50, 60, .55); animation: cnAlarm 1.1s ease-in-out infinite; }
@keyframes cnAlarm { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.cn-sbeam { position: absolute; width: 640px; height: 170px; margin-top: -85px; transform-origin: 0 50%; pointer-events: none; clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%);
  background: linear-gradient(90deg, rgba(225, 238, 255, .6), rgba(225, 238, 255, .18) 45%, rgba(225, 238, 255, 0) 85%); animation: cnBeam 3s ease-in-out infinite alternate; }
@keyframes cnBeam { from { transform: rotate(4deg); } to { transform: rotate(34deg); } }
.cn-blink { position: absolute; width: 170px; height: 120px; margin: -60px 0 0 -85px; border-radius: 50%; pointer-events: none; }
.cn-blink.r { background: radial-gradient(closest-side, rgba(255, 50, 70, .85), rgba(255, 50, 70, 0)); animation: cnSirR .8s steps(1) infinite; }
.cn-blink.b { background: radial-gradient(closest-side, rgba(70, 130, 255, .85), rgba(70, 130, 255, 0)); animation: cnSirB .8s steps(1) infinite; }

/* ── Б · Глазами команды ── */
.cn-view { position: absolute; inset: 0; overflow: hidden; background: #000; }
.cn-hand { position: absolute; inset: 0; animation: cnHand 3.4s ease-in-out infinite alternate; }
@keyframes cnHand { 0% { transform: translate(-3px, 2px) rotate(-.3deg); } 50% { transform: translate(2px, -2px) rotate(.2deg); } 100% { transform: translate(3px, 3px) rotate(.35deg); } }
.cn-optic { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cn-optic .blk { position: absolute; left: -30px; top: -30px; width: 450px; height: 904px; background: #020506; }
.cn-optic .bino { -webkit-mask: radial-gradient(circle at 150px 422px, transparent 126px, #000 151px), radial-gradient(circle at 300px 422px, transparent 126px, #000 151px);
  mask: radial-gradient(circle at 150px 422px, transparent 126px, #000 151px), radial-gradient(circle at 300px 422px, transparent 126px, #000 151px);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.cn-optic .scope { -webkit-mask: radial-gradient(circle at 225px 416px, transparent 145px, #000 169px); mask: radial-gradient(circle at 225px 416px, transparent 145px, #000 169px); }
.cn-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4;
  background: linear-gradient(0deg, rgba(3, 7, 8, .97) 0, rgba(3, 7, 8, .84) 34%, rgba(3, 7, 8, 0) 60%), linear-gradient(180deg, rgba(3, 7, 8, .55), rgba(3, 7, 8, 0) 16%); }
.cn-mono { position: absolute; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Roboto Mono", monospace; font-size: 12px; letter-spacing: .02em; white-space: nowrap;
  color: rgba(246, 243, 236, .8); text-shadow: 0 1px 6px rgba(0, 0, 0, .8); z-index: 6; opacity: 0; }
.cn-mono.nv { color: #8DF2AE; text-shadow: 0 0 6px rgba(80, 255, 140, .55); }
.cn-mono.nvr { color: #FF8C7A; text-shadow: 0 0 8px rgba(255, 90, 70, .6); }
.cn-mono.nvm { color: #A9E4D0; text-shadow: 0 0 8px rgba(169, 228, 208, .6); }
.cn-mono.sn { color: #7FD8FF; text-shadow: 0 0 8px rgba(127, 216, 255, .5); }
/* подписи цели в прицеле — на тёмной плашке, линия перекрестия их не перечёркивает (разбор экранов 06.10) */
.cn-mono[data-lab], .cn-mono[data-lab2] { width: max-content; margin: 0 auto; padding: 3px 9px; border-radius: 7px; font-size: 13.5px; background: rgba(2, 12, 6, .78); }
.cn-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #FF5A6E; box-shadow: 0 0 8px #FF5A6E; animation: cnDot 1s steps(1) infinite; }
@keyframes cnDot { 50% { opacity: .15; } }
.cn-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, rgba(0, 0, 0, 0) 1px 3px); }
.cn-nvflick { position: absolute; inset: 0; pointer-events: none; background: rgba(120, 255, 170, .07); animation: cnNvF .23s steps(1) infinite; }
@keyframes cnNvF { 0% { opacity: 1; } 40% { opacity: .3; } 70% { opacity: .8; } }
.cn-brk { position: absolute; color: #8DF2AE; filter: drop-shadow(0 0 5px currentColor); opacity: 0; z-index: 6; }
.cn-brk.red { color: #FF6F5E; } .cn-brk.mint { color: #A9E4D0; } .cn-brk.amber { color: #FFB23D; }
.cn-brk i { position: absolute; width: 20px; height: 20px; border: 2px solid currentColor; }
.cn-brk i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.cn-brk i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.cn-brk i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.cn-brk i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.cn-heat { position: absolute; width: 96px; height: 130px; margin: -65px 0 0 -48px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 246, 196, .95), rgba(255, 160, 40, .8) 38%, rgba(230, 60, 60, .4) 68%, rgba(120, 20, 90, 0)); }
.cn-heat i { position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: cnHeat 1.1s ease-in-out infinite alternate; }
@keyframes cnHeat { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.08); opacity: 1; } }
.cn-sirf { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }
.cn-sirf i { position: absolute; inset: 0; }
.cn-sirf .r { background: radial-gradient(60% 40% at 0% 18%, rgba(255, 40, 60, .7), rgba(255, 40, 60, 0) 70%), radial-gradient(60% 40% at 100% 88%, rgba(255, 40, 60, .45), rgba(255, 40, 60, 0) 70%);
  animation: cnSirR .7s steps(1) infinite; }
.cn-sirf .bl { background: radial-gradient(60% 40% at 100% 16%, rgba(60, 120, 255, .7), rgba(60, 120, 255, 0) 70%), radial-gradient(60% 40% at 0% 86%, rgba(60, 120, 255, .45), rgba(60, 120, 255, 0) 70%);
  animation: cnSirB .7s steps(1) infinite; }
.cn-morse { position: absolute; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 255, 240, 1), rgba(140, 255, 180, .65) 35%, rgba(80, 255, 140, 0)); animation: cnMorse 2.2s steps(1) infinite; }
@keyframes cnMorse { 0% { opacity: 1; } 6.8% { opacity: 0; } 15.9% { opacity: 1; } 22.7% { opacity: 0; } 31.8% { opacity: 1; } 56.8% { opacity: 0; } 100% { opacity: 0; } }
.cn-nite { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(8, 16, 40, .7), rgba(4, 8, 22, .6)); }
.cn-torch { position: absolute; width: 700px; height: 200px; margin-top: -100px; transform-origin: 0 50%; pointer-events: none; clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  background: linear-gradient(90deg, rgba(255, 244, 214, .8), rgba(255, 244, 214, .24) 45%, rgba(255, 244, 214, 0) 85%); animation: cnTorch 1.6s ease-in-out infinite alternate; }
@keyframes cnTorch { from { transform: rotate(160deg); } to { transform: rotate(205deg); } }
/* эхолот */
.cn-sn-bg { position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 30%, #0B2A3A, #04121C 70%, #020A10); }
.cn-sonar { position: absolute; left: 16px; top: 110px; width: 358px; height: 360px; border-radius: 24px; overflow: hidden; transform-origin: 100% 0; z-index: 6;
  background: linear-gradient(180deg, #06243A, #031423); box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(127, 216, 255, .22); }
.cn-sonar .echo { position: absolute; left: 0; top: 0; width: 1400px; height: 360px; }
.cn-sonar .grid { position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(127, 216, 255, .07) 0 1px, rgba(0, 0, 0, 0) 1px 80px); }
.cn-sonar .here { position: absolute; left: 178px; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed rgba(246, 243, 236, .45); }
.cn-sonar .scale { position: absolute; right: 8px; top: 0; bottom: 0; width: 30px; }
.cn-sonar .scale span { position: absolute; right: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px; color: rgba(127, 216, 255, .7); transform: translateY(-50%); }
.cn-diver { position: absolute; left: 166px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: 0; }
.cn-diver::after { content: ""; position: absolute; left: 5px; top: -16px; width: 5px; height: 5px; border-radius: 50%; border: 1.5px solid rgba(246, 243, 236, .8); animation: cnBub 1s ease-out infinite; }
@keyframes cnBub { from { transform: translateY(8px); opacity: 1; } to { transform: translateY(-14px); opacity: 0; } }
.cn-ping { position: absolute; width: 0; height: 0; opacity: 0; }
.cn-ping i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 2px solid #7FD8FF; animation: cnPing 1.2s ease-out infinite; }
.cn-ping.gold i { border-color: var(--accent); }
@keyframes cnPing { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.cn-photo-sh { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 7, 8, .97) 0, rgba(3, 7, 8, .85) 36%, rgba(3, 7, 8, 0) 58%), linear-gradient(180deg, rgba(3, 7, 8, .6), rgba(3, 7, 8, 0) 20%); }
/* фонарь */
.cn-dark { position: absolute; left: 0; top: 0; width: 1600px; height: 2000px; pointer-events: none; transform-origin: 800px 1000px; z-index: 2;
  background: radial-gradient(circle at 800px 1000px, rgba(2, 4, 8, 0) 0, rgba(2, 4, 8, 0) 64px, rgba(2, 4, 8, .45) 104px, rgba(2, 4, 8, .95) 170px); }
.cn-glint { position: absolute; width: 36px; height: 36px; margin: -18px 0 0 -18px; opacity: 0; z-index: 3; }
.cn-glint::before, .cn-glint::after { content: ""; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; box-shadow: 0 0 12px #fff; }
.cn-glint::before { width: 3px; height: 100%; margin: -50% 0 0 -1.5px; }
.cn-glint::after { width: 100%; height: 3px; margin: -1.5px 0 0 -50%; }

/* ── В · Лицом к лицу ── */
.cn-t-bg { position: absolute; inset: 0; overflow: hidden; }
.cn-t-bg img { position: absolute; left: -227px; top: 0; width: 844px; height: 844px; max-width: none; }
.cn-t-tint { position: absolute; inset: 0; background: rgba(23, 87, 92, .35); }
.cn-t-dark { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 24, .5) 0, rgba(8, 20, 24, .58) 40%, rgba(5, 11, 14, .92) 100%); }
.cn-t-leak { position: absolute; inset: 0; background: radial-gradient(80% 420px at 88% 0%, rgba(255, 196, 128, .3), rgba(255, 196, 128, 0) 70%); }
.cn-t-float { position: absolute; left: 16px; top: 124px; width: 358px; height: 320px; z-index: 3; animation: cnFloat 6s ease-in-out infinite alternate; }
@keyframes cnFloat { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
.cn-t-shot { position: absolute; inset: 0; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); opacity: 0; }
.cn-t-shot::after { content: ""; position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(243, 210, 139, .32), inset 0 -110px 70px -40px rgba(3, 8, 10, .9); }
.cn-t-name { position: absolute; left: 18px; bottom: 16px; z-index: 2; opacity: 0; }
.cn-t-name small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--accent); }
.cn-t-name b { display: block; font-size: 36px; font-weight: 900; line-height: .9; text-shadow: 0 4px 16px rgba(0, 0, 0, .6); }
.cn-t-col { position: absolute; left: 0; right: 0; top: 460px; z-index: 5; }
.cn-t-narr { margin: 0 22px 8px; font-size: 15px; line-height: 1.42; font-style: italic; color: rgba(246, 243, 236, .74); text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.cn-t-bub { display: table; margin: 0 22px 10px 18px; max-width: 322px; padding: 10px 16px 11px; border-radius: 6px 20px 20px 20px; font-size: 18.5px; line-height: 1.36; font-weight: 600;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .17); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); transform-origin: 0 0; opacity: 0; }
.cn-t-who { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--accent); }
.cn-t-rules { margin: 4px 22px 0; font-size: 14px; line-height: 1.42; color: rgba(246, 243, 236, .72); opacity: 0; }
.cn-t-col.dense .cn-t-narr { font-size: 14px; margin-bottom: 6px; } .cn-t-col.dense .cn-t-bub { font-size: 17px; padding: 8px 14px 9px; margin-bottom: 8px; }
/* и так упирается в ответы — фото ниже, текст выше (talk.js; «Двойная игра», разбор экранов 06.10) */
.cn-stage.tight .cn-t-float { height: 292px; }
.cn-stage.tight .cn-t-col { top: 430px; }
.cn-t-reps { position: absolute; left: 18px; right: 18px; bottom: 36px; display: flex; flex-direction: column; gap: 8px; z-index: 30; }
.cn-t-rep { position: relative; height: 52px; border-radius: 16px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font: inherit; font-size: 17px; font-weight: 700;
  text-align: left; cursor: pointer; opacity: 0; }
.cn-t-rep svg { width: 17px; height: 17px; flex: none; }
.cn-t-rep.main { color: var(--accent); background: rgba(243, 210, 139, .12); border: 1.5px solid rgba(243, 210, 139, .7); }
.cn-t-rep.alt { color: #F6F3EC; background: rgba(255, 255, 255, .07); border: 1.5px solid rgba(255, 255, 255, .2); }
.cn-t-rep small { margin-left: auto; font-size: 12px; font-weight: 700; opacity: .72; white-space: nowrap; }
.cn-t-me { position: absolute; right: 18px; top: 470px; max-width: 300px; padding: 10px 16px 11px; border-radius: 20px 6px 20px 20px; font-size: 18.5px; line-height: 1.36; font-weight: 600;
  color: var(--accent); background: rgba(40, 44, 30, .75); border: 1px solid rgba(243, 210, 139, .55); transform-origin: 100% 0; opacity: 0; z-index: 6; }
.cn-t-dots { position: absolute; left: 18px; top: 532px; height: 42px; padding: 0 18px; border-radius: 6px 20px 20px 20px; display: flex; align-items: center; gap: 6px; z-index: 6;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .17); opacity: 0; }
.cn-t-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 243, 236, .85); animation: cnDots 1s ease-in-out infinite; }
.cn-t-dots i:nth-child(2) { animation-delay: .15s; } .cn-t-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes cnDots { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.cn-t-out { position: absolute; left: 16px; right: 16px; top: 532px; z-index: 6; }
.cn-t-card { padding: 13px 16px 14px; border-radius: 20px; font-size: 16px; line-height: 1.42; background: rgba(10, 20, 22, .64); border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35); opacity: 0; }
.cn-t-out .cn-chips { margin-left: 4px; }
.cn-t-out .cn-tip { margin: 12px 4px 0; }
/* медаль — в правом верхнем углу фото, ниже заголовка: на длинном («Плавающий ящик») она закрывала буквы (разбор экранов 06.10) */
.cn-medal { position: absolute; left: 250px; top: 140px; width: 112px; height: 112px; border-radius: 50%; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #2A1E05; opacity: 0; box-shadow: 0 0 0 4px rgba(243, 210, 139, .35), 0 16px 34px rgba(0, 0, 0, .5);
  background: radial-gradient(circle at 35% 28%, #FFF1C4, #F3D28B 45%, #C8963A 100%); }
.cn-medal b { font-size: 38px; font-weight: 900; line-height: .86; }
.cn-medal small { margin-top: 2px; font-size: 11.5px; font-weight: 800; line-height: 1.1; max-width: 90px; }
.cn-medal.mint { color: #0E2320; background: radial-gradient(circle at 35% 28%, #E4FFF5, #A9E4D0 50%, #6FB9A2 100%); box-shadow: 0 0 0 4px rgba(169, 228, 208, .3), 0 16px 34px rgba(0, 0, 0, .5); }
.cn-medal.red { color: #2A0B06; background: radial-gradient(circle at 35% 28%, #FFE1DA, #F29A8E 48%, #B8574A 100%); box-shadow: 0 0 0 4px rgba(242, 154, 142, .3), 0 16px 34px rgba(0, 0, 0, .5); }
.cn-medal .sh { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.cn-medal .sh::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; background: linear-gradient(105deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  animation: cnMedSh 2.8s ease-in-out infinite; }
@keyframes cnMedSh { 0% { transform: translateX(0) skewX(-12deg); } 55%, 100% { transform: translateX(460%) skewX(-12deg); } }
.cn-t-glow { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(243, 210, 139, .5) 45%, rgba(243, 210, 139, 0)); }
.cn-t-lamp { position: absolute; width: 180px; height: 180px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 206, 140, .45), rgba(255, 206, 140, 0)); animation: cnLamp .9s steps(1) infinite; }

/* ── Г · На кону ── */
.cn-d-shade { position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(0deg, rgba(3, 7, 8, .98) 0, rgba(3, 7, 8, .88) 46%, rgba(3, 7, 8, 0) 64%), linear-gradient(180deg, rgba(3, 7, 8, .72), rgba(3, 7, 8, 0) 26%); }
.cn-dial { position: absolute; left: 0; top: 470px; width: 390px; height: 200px; transform-origin: 195px 160px; z-index: 12; opacity: 0; }
.cn-dial svg { position: absolute; left: 0; top: 0; overflow: visible; }
.cn-needle { position: absolute; left: 193px; top: 52px; width: 4px; height: 108px; border-radius: 2px; background: linear-gradient(0deg, #F6F3EC, #fff);
  box-shadow: 0 0 10px rgba(255, 255, 255, .6); transform-origin: 50% 100%; transform: rotate(-90deg); }
.cn-needle::after { content: ""; position: absolute; left: -5px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }
.cn-hub { position: absolute; left: 183px; top: 148px; width: 24px; height: 24px; border-radius: 50%; background: #0b1416; border: 3px solid #F6F3EC; }
.cn-pct { position: absolute; font-size: 34px; font-weight: 900; line-height: 1; transform: translate(-50%, -50%); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.cn-dlab { position: absolute; top: 176px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.cn-dmark { position: absolute; font-size: 13px; font-weight: 700; white-space: nowrap; color: #A9E4D0; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.cn-hb { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3; background: radial-gradient(110% 80% at 50% 50%, rgba(0, 0, 0, 0) 40%, rgba(90, 0, 10, .75) 100%); }
.cn-warn { position: absolute; left: 22px; right: 22px; top: 690px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 600;
  color: rgba(246, 243, 236, .72); opacity: 0; z-index: 12; }
.cn-warn svg { width: 15px; height: 15px; flex: none; color: #F3C969; }
.cn-warn span { text-wrap: balance; }
/* пояснение к одной из кнопок — её значком (погоня у налёта на причале) */
.cn-warn.tie { color: rgba(246, 243, 236, .82); }
.cn-warn.tie svg { color: var(--accent); }
.cn-who { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--accent); text-shadow: 0 2px 8px rgba(0, 0, 0, .8); }
.cn-kg { display: flex; align-items: baseline; gap: 8px; }
.cn-kg b { font-size: 96px; font-weight: 900; line-height: .84; text-shadow: 0 8px 30px rgba(0, 0, 0, .55); }
.cn-kg span { font-size: 38px; font-weight: 900; color: var(--accent); }
.cn-plc { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1; }
.cn-plc i { position: absolute; inset: 0; }
.cn-plc .r { animation: cnSirR .7s steps(1) infinite; }
.cn-plc .bl { animation: cnSirB .7s steps(1) infinite; }
.cn-beam { position: absolute; width: 760px; height: 190px; margin-top: -95px; transform-origin: 0 50%; pointer-events: none; opacity: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(225, 238, 255, .62), rgba(225, 238, 255, .22) 45%, rgba(225, 238, 255, 0) 85%); clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  animation: cnBeam2 3.4s ease-in-out infinite alternate; }
@keyframes cnBeam2 { from { transform: rotate(8deg); } to { transform: rotate(38deg); } }
.cn-speed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; z-index: 2; }
.cn-speed i { position: absolute; left: -400px; top: 0; width: 1200px; height: 844px; animation: cnSpd .18s linear infinite;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 23px, rgba(230, 240, 255, .16) 23px 24px, rgba(255, 255, 255, 0) 24px 61px, rgba(230, 240, 255, .1) 61px 63px, rgba(255, 255, 255, 0) 63px 97px); }
@keyframes cnSpd { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.cn-skip { position: absolute; inset: 0; z-index: 25; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; opacity: 0;
  background: radial-gradient(90% 60% at 50% 45%, rgba(10, 22, 26, .96), rgba(3, 7, 8, 1)); pointer-events: none; }
.cn-skip svg { width: 30px; height: 30px; color: var(--accent); }
.cn-skip b { font-size: 50px; font-weight: 900; line-height: .95; }
.cn-skip span { font-size: 15px; color: rgba(246, 243, 236, .72); max-width: 300px; }

/* ── Д · Путь на карте ── */
.cn-chart { position: absolute; inset: 0; z-index: 1; }
.cn-e-hud { position: absolute; left: 18px; top: 50px; display: flex; align-items: flex-end; gap: 10px; z-index: 20; }
.cn-e-hud b { font-size: 92px; font-weight: 900; line-height: .8; letter-spacing: -.02em; }
.cn-e-hud span { padding-bottom: 6px; font-size: 18px; font-weight: 800; line-height: 1; color: rgba(246, 243, 236, .8); }
.cn-e-hud .add { color: #FF9C8E; } .cn-e-hud .add.less { color: #9FE3B6; }
.cn-boat { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.cn-boat i { position: absolute; left: -11px; top: -14px; width: 22px; height: 28px; background: var(--accent); clip-path: polygon(50% 0, 100% 100%, 50% 78%, 0 100%); }
.cn-boat::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 210, 139, .45), transparent); }
.cn-boat .dph { position: absolute; left: -15px; top: -8px; animation: cnHop 1.2s ease-in-out infinite; }
@keyframes cnHop { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-12deg); } }
.cn-bang { position: absolute; width: 34px; height: 34px; margin: -54px 0 0 -17px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #1F1A0E;
  font-size: 22px; font-weight: 900; box-shadow: 0 0 18px rgba(243, 210, 139, .7); opacity: 0; }
.cn-e-photo { position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 4; }
.cn-e-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(3, 7, 8, .97) 0, rgba(3, 7, 8, .85) 36%, rgba(3, 7, 8, 0) 58%), linear-gradient(180deg, rgba(3, 7, 8, .7), rgba(3, 7, 8, 0) 26%); }
.cn-plus { position: absolute; padding: 5px 11px; border-radius: 14px; font-size: 20px; font-weight: 900; color: #1F1A0E; background: var(--accent); white-space: nowrap;
  box-shadow: 0 0 22px rgba(243, 210, 139, .7); opacity: 0; }
.cn-card-g { position: absolute; left: 12px; right: 12px; top: 548px; bottom: 16px; border-radius: 26px; background: rgba(8, 18, 20, .9); border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5); opacity: 0; z-index: 15; }
.cn-xring { position: absolute; width: 0; height: 0; opacity: 0; }
.cn-xring i { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--accent); animation: cnPing 1s ease-out infinite; }
.cn-xring i + i { animation-delay: -.5s; }
.cn-burst { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 244, 214, .95), rgba(243, 210, 139, .45) 30%, rgba(0, 0, 0, 0) 70%); }
.cn-rays { position: absolute; width: 700px; height: 700px; margin: -350px 0 0 -350px; border-radius: 50%; opacity: 0; pointer-events: none;
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%); mask: radial-gradient(closest-side, #000 20%, transparent 100%); }
.cn-rays i { position: absolute; inset: 0; border-radius: 50%; animation: cnRays 30s linear infinite;
  background: repeating-conic-gradient(rgba(243, 210, 139, .35) 0deg 5deg, rgba(0, 0, 0, 0) 5deg 18deg); }
@keyframes cnRays { to { transform: rotate(360deg); } }
.cn-strike { position: absolute; width: 0; height: 0; opacity: 0; }
.cn-strike svg { position: absolute; left: -46px; top: -46px; }
.cn-lampw { position: absolute; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 196, 110, .42), rgba(255, 196, 110, 0)); animation: cnLamp .9s steps(1) infinite; }
.cn-tshade { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(3, 7, 8, .88), rgba(3, 7, 8, .55) 14%, rgba(3, 7, 8, 0) 26%); }
.cn-vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 50%, rgba(8, 4, 0, .6) 100%); z-index: 2; }