/* ============================================================================
   RAGES.ZONE · cinema.css — главная страница 9.0 «Тёмное фэнтези».
   Подключается только на index.html поверх theme8.css. Палитра: изумруд
   и незеритовый пурпур на закатном вокселе; панели — стекло.
============================================================================ */
html body.cine{
  --em:#2ee59d; --em2:#19c27f; --em-soft:rgba(46,229,157,.14);
  --nv:#9a6bff; --nv2:#6f3fe0; --nv-soft:rgba(154,107,255,.16);
  --glass:rgba(10,10,14,.46); --glass2:rgba(14,12,22,.62); --gline:rgba(255,255,255,.14); --gline2:rgba(255,255,255,.24);
  --px:#07070a; --paper:#0f0e14; --bone:#13121a; --bone2:#1a1824; --field-bg:#0b0a10;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.15);
  background:#07070a;
}
html body.cine::before{display:none}
html body.cine .hdr{position:absolute;left:0;right:0;top:0;z-index:30}
html body.cine .hdr-in{background:rgba(10,10,14,.42);border-color:var(--gline);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3)}

/* ── Hero: сцена во весь экран ───────────────────────────────────────────── */
html body.cine .cz-hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
html body.cine .cz-scene{position:absolute;inset:0;z-index:0;background:radial-gradient(1200px 600px at 70% 20%,#3a1650,#120a22 60%,#07070a)}
html body.cine .cz-scene canvas{display:block;width:100%;height:100%;transform:translateZ(0)}
html body.cine .cz-scene.no-gl canvas{display:none}
html body.cine .cz-scene.no-gl::after{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 300px at 68% 42%,rgba(255,150,80,.55),transparent 70%),
  linear-gradient(180deg,#140a2a 0%,#3b1a48 45%,#ff7a3d 72%,#1b1a24 73%,#0c0b11 100%)}
html body.cine .cz-fade{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(7,7,10,.55) 55%,#07070a)}
html body.cine .cz-vign{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.55))}
html body.cine .cz-hero .wrap{position:relative;z-index:2;width:100%;padding-top:300px;padding-bottom:44px}
html body.cine .cz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:28px;align-items:end}

/* стекло */
html body.cine .glass{background:var(--glass);border:1px solid var(--gline);border-radius:22px;
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
html body.cine .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 40%,transparent 60%,rgba(154,107,255,.08))}

/* левая панель — заголовок */
html body.cine .cz-title{padding:0 0 6px;max-width:640px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transform-style:preserve-3d;will-change:transform}
html body.cine .cz-title::before{display:none}
html body.cine .cz-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--em);margin-bottom:16px}
html body.cine .cz-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--em);box-shadow:0 0 12px var(--em),0 0 28px var(--em)}
html body.cine .cz-h1{font-family:var(--disp);font-weight:800;font-size:clamp(40px,5vw,68px);line-height:.98;letter-spacing:-.025em;margin:0 0 18px;color:#fff;
  text-shadow:0 10px 40px rgba(0,0,0,.6)}
html body.cine .cz-h1 .em{color:var(--em);text-shadow:0 0 24px rgba(46,229,157,.55),0 0 60px rgba(46,229,157,.25)}
html body.cine .cz-h1 .nv{background:linear-gradient(90deg,#c9a6ff,#9a6bff 60%,#6f3fe0);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(154,107,255,.45))}
html body.cine .cz-lead{font-size:16px;line-height:1.6;color:rgba(255,255,255,.78);max-width:50ch;margin:0 0 22px;text-shadow:0 2px 14px rgba(0,0,0,.7)}
html body.cine .cz-actions{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px;border-radius:999px;background:var(--glass);border:1px solid var(--gline);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
html body.cine .cz-ip{display:inline-flex;align-items:center;gap:0;border-radius:999px;border:1px solid var(--gline2);background:rgba(0,0,0,.35);padding:4px 4px 4px 18px;max-width:100%}
html body.cine .cz-ip .mono{font-size:15px;font-weight:600;color:#fff;letter-spacing:.02em;padding-right:14px}
html body.cine .cz-ip button{border:0;border-radius:999px;padding:11px 18px;background:var(--em);color:#04120b;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 0 0 0 rgba(46,229,157,.5);transition:box-shadow .2s,transform .15s}
html body.cine .cz-ip button:hover{box-shadow:0 0 0 5px rgba(46,229,157,.18)}
html body.cine .cz-ip button:active{transform:scale(.97)}
html body.cine .btn-glass{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid var(--gline2);background:rgba(255,255,255,.05);color:#fff;font-weight:700;font-size:14px;backdrop-filter:blur(10px);transition:background .15s,border-color .15s}
html body.cine .btn-glass:hover{background:rgba(255,255,255,.1);border-color:#fff}
html body.cine .btn-glass svg{width:16px;height:16px}
html body.cine .cz-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
html body.cine .cz-tag{font-size:12px;font-weight:600;color:rgba(255,255,255,.75);border:1px solid var(--gline);border-radius:999px;padding:6px 11px;background:rgba(0,0,0,.25)}

/* правая панель — голографический HUD */
html body.cine .cz-hud{padding:18px 18px 16px;overflow:hidden;will-change:transform}
html body.cine .cz-hud::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
html body.cine .cz-hud .cz-corner{position:absolute;width:14px;height:14px;border-color:var(--em);border-style:solid;opacity:.9}
html body.cine .cz-corner.tl{left:10px;top:10px;border-width:2px 0 0 2px}html body.cine .cz-corner.tr{right:10px;top:10px;border-width:2px 2px 0 0}
html body.cine .cz-corner.bl{left:10px;bottom:10px;border-width:0 0 2px 2px}html body.cine .cz-corner.br{right:10px;bottom:10px;border-width:0 2px 2px 0}
html body.cine .cz-hud-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
html body.cine .cz-hud-name{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.04em}
html body.cine .cz-hud-name img{width:30px;height:30px;border-radius:9px}
html body.cine .cz-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--em)}
html body.cine .cz-live i{width:8px;height:8px;border-radius:50%;background:var(--em);box-shadow:0 0 10px var(--em);animation:cz-pulse 1.6s ease-in-out infinite}
html body.cine .cz-live.off{color:#ff7a72}html body.cine .cz-live.off i{background:#ff7a72;box-shadow:0 0 10px #ff7a72;animation:none}
@keyframes cz-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.7);opacity:.6}}
html body.cine .cz-count{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--gline);position:relative;overflow:hidden}
html body.cine .cz-count::before{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(46,229,157,.12),transparent);animation:cz-scan 4s linear infinite}
@keyframes cz-scan{to{left:120%}}
html body.cine .cz-count b{font-family:var(--disp);font-size:42px;font-weight:800;line-height:1;color:#fff;letter-spacing:-.02em;text-shadow:0 0 22px rgba(46,229,157,.35);font-variant-numeric:tabular-nums}
html body.cine .cz-count small{font-size:13px;color:rgba(255,255,255,.6);line-height:1.3}
html body.cine .cz-count small em{font-style:normal;color:#fff;font-weight:700}
html body.cine .cz-hud-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
html body.cine .cz-hud-cell{padding:11px 12px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--gline)}
html body.cine .cz-hud-cell b{display:block;font-family:var(--disp);font-size:18px;font-weight:700;color:#fff;line-height:1.1}
html body.cine .cz-hud-cell span{display:block;font-size:11.5px;color:rgba(255,255,255,.55);margin-top:3px}
html body.cine .cz-hud-ip{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding:10px 10px 10px 14px;border-radius:14px;border:1px dashed var(--gline2);background:rgba(46,229,157,.06)}
html body.cine .cz-hud-ip .mono{font-size:14px;font-weight:600;color:#fff;overflow-wrap:anywhere}
html body.cine .cz-hud-ip button{border:0;border-radius:999px;padding:8px 13px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;border:1px solid var(--gline2)}
html body.cine .cz-hud-ip button:hover{background:rgba(255,255,255,.18)}
html body.cine .cz-hud-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:11px;color:rgba(255,255,255,.4);font-family:var(--mono)}
html body.cine .cz-hud-foot a{color:var(--em)}
html body.cine .cz-online-list{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
html body.cine .cz-online-list span{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.75)}

/* подсказка прокрутки */
html body.cine .cz-scroll{position:absolute;left:50%;bottom:18px;z-index:2;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(255,255,255,.45);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
html body.cine .cz-scroll i{width:1px;height:34px;background:linear-gradient(180deg,var(--em),transparent);animation:cz-drop 1.8s ease-in-out infinite}
@keyframes cz-drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── Секции ниже: тёмное стекло, изумрудно-пурпурные акценты ────────────── */
html body.cine .cz-sec{padding:72px 0;position:relative}
html body.cine .cz-sec.tint::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 360px at 15% 0%,rgba(154,107,255,.12),transparent 70%),radial-gradient(800px 360px at 90% 100%,rgba(46,229,157,.09),transparent 70%)}
html body.cine .eyebrow{color:var(--em)}html body.cine .eyebrow::before{background:var(--em);box-shadow:0 0 10px var(--em)}
html body.cine .h-lg{font-size:clamp(28px,3.4vw,42px);font-weight:700;letter-spacing:-.02em}
html body.cine .bento{gap:12px}
html body.cine .bn{background:var(--glass2);border:1px solid var(--gline);border-radius:22px;backdrop-filter:blur(14px);padding:26px;transition:border-color .2s,transform .25s;position:relative;overflow:hidden}
html body.cine .bn::after{content:"";position:absolute;inset:0;background:radial-gradient(360px 160px at var(--mx,50%) var(--my,0%),rgba(46,229,157,.12),transparent 70%);opacity:0;transition:opacity .25s;pointer-events:none}
html body.cine .bn:hover{border-color:var(--gline2);transform:translateY(-3px)}
html body.cine .bn:hover::after{opacity:1}
html body.cine .bn-ico{background:linear-gradient(135deg,rgba(46,229,157,.18),rgba(154,107,255,.18));border-color:var(--gline);color:#fff}
html body.cine .bn-accent{border-color:rgba(46,229,157,.35)}
html body.cine .bn-link{color:var(--em)}
html body.cine .news-card{background:var(--glass2);border:1px solid var(--gline);border-radius:20px}
html body.cine .news-card:hover{border-color:var(--gline2)}
html body.cine .news-tag{color:var(--nv);background:var(--nv-soft);border-color:transparent}
html body.cine .tops-tab.active{background:#fff;color:#0a0a0b}
html body.cine .pd,html body.cine .top-row{background:var(--glass2);border:1px solid var(--gline)}
html body.cine .join-step{background:var(--glass2);border:1px solid var(--gline);border-radius:20px;padding:22px}
html body.cine .join-step .num{background:linear-gradient(135deg,var(--em),var(--em2));color:#04120b;box-shadow:0 0 24px rgba(46,229,157,.35)}
html body.cine .cta{background:linear-gradient(135deg,rgba(154,107,255,.22),rgba(46,229,157,.14)),var(--glass2);border:1px solid var(--gline2);border-radius:24px}
html body.cine .cta::before,html body.cine .cta::after{display:none}
html body.cine .btn-primary{background:var(--em);color:#04120b}
html body.cine .btn-primary:hover{background:#4ff0b0}
html body.cine .ip-box{background:rgba(0,0,0,.35);border-color:var(--gline2)}
html body.cine .ip-box button{background:var(--em);color:#04120b}
html body.cine .foot{border-top-color:var(--gline)}
html body.cine ::selection{background:var(--em);color:#04120b}

/* ── Мобильная ───────────────────────────────────────────────────────────── */
@media(max-width:960px){
  html body.cine .cz-grid{grid-template-columns:1fr;gap:14px}
  html body.cine .cz-hero .wrap{padding-top:104px}
  html body.cine .cz-title{padding:22px 20px 20px}
  html body.cine .cz-h1{font-size:clamp(34px,9vw,52px)}
  html body.cine .cz-lead{font-size:15px}
  html body.cine .cz-hud{padding:16px}
  html body.cine .cz-count b{font-size:38px}
  html body.cine .cz-scroll{display:none}
  html body.cine .cz-sec{padding:52px 0}
}
@media(max-width:600px){
  html body.cine .cz-hero{min-height:auto}
  html body.cine .cz-hero .wrap{padding-top:96px;padding-bottom:22px}
  html body.cine .cz-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:22px;gap:8px}
  html body.cine .cz-ip{grid-column:1/-1;flex-direction:column;align-items:stretch;padding:8px;border-radius:18px;gap:6px}
  html body.cine .cz-ip .mono{text-align:center;padding:6px 0 2px;white-space:nowrap;font-size:14px}
  html body.cine .cz-ip button{width:100%}
  html body.cine .cz-actions .btn-glass{justify-content:center}
  html body.cine .cz-tags{display:none}
}
@media(prefers-reduced-motion:reduce){
  html body.cine .cz-live i,html body.cine .cz-count::before,html body.cine .cz-scroll i{animation:none}
}