:root{
    --bg: url("../images/bg.jpg");
    --ui-green: #8aff6c;
    --ui-dim: #7fbf7a;
    --ui-shadow: #062c11;
    --scan: rgba(0,255,128,0.08);
  }
  
  html,body{ height:100%; margin:0; background:#000; }
  body{
    font-family: "Courier New", Courier, monospace;
    color: var(--ui-green);
    overflow:hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .bg{
    position:fixed; inset:0;
    background: #000 center/cover no-repeat;
    background-image: image-set(url("../images/bg.webp") type("image/webp") 1x, url("../images/bg.jpg") type("image/jpeg") 1x), var(--bg);
    filter: contrast(1.06) brightness(0.82) saturate(1.02);
    will-change: transform;
  }
  
  /* Тинт + виньетка */
  .tint{
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,0.5) 100%),
      linear-gradient(0deg, rgba(6,32,18,0.25), rgba(6,32,18,0.25));
    mix-blend-mode: multiply;
    pointer-events:none;
  }
  
  /* Бегущие скан-линии */
  .scanlines{
    position:fixed; inset:0;
    pointer-events:none;
    mix-blend-mode: screen;
    background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, var(--scan) 3px);
    background-size: 100% 3px;
    animation: scan-move 6s linear infinite, scan-flicker 2.2s steps(2,end) infinite;
    opacity: 0.7;
  }
  @keyframes scan-move{
    0%   { background-position: 0 -100vh; }
    100% { background-position: 0 100vh; }
  }
  @keyframes scan-flicker{
    0% { opacity: 0.62; }
    22%{ opacity: 0.60; }
    47%{ opacity: 0.72; }
    73%{ opacity: 0.63; }
    100%{opacity: 0.66; }
  }
  
  /* Плёночный шум */
  .noise{
    position:fixed; inset:0; pointer-events:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.045'/></svg>");
    background-size: 240px 240px;
    mix-blend-mode: overlay;
    animation: noise-shift 1.8s steps(4,end) infinite, noise-pan 18s linear infinite;
  }
  @keyframes noise-shift{
    0%{ filter: contrast(100%) brightness(100%); }
    50%{ filter: contrast(110%) brightness(96%); }
    100%{ filter: contrast(100%) brightness(100%); }
  }
  @keyframes noise-pan{
    0%  { transform: translate3d(0,0,0); }
    100%{ transform: translate3d(-320px,-320px,0); }
  }
  
  /* Экранный фликер */
  .screen-flicker{
    position:fixed; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
    animation: glow-pulse 3.6s ease-in-out infinite;
  }
  @keyframes glow-pulse{
    0%{   opacity:0.12; }
    50%{  opacity:0.20; }
    100%{ opacity:0.12; }
  }
  
  /* Бегущий «луч» */
  .scan-beam{
    position:fixed; left:0; right:0; height:14vh; top:-20vh;
    background: linear-gradient(to bottom, rgba(160,255,200,0.00) 0%, rgba(160,255,200,0.10) 50%, rgba(160,255,200,0.00) 100%);
    mix-blend-mode: screen;
    filter: blur(2px) opacity(0.45);
    animation: beam-roll 4.8s linear infinite;
  }
  @keyframes beam-roll{
    0%   { transform: translateY(-30vh); }
    100% { transform: translateY(130vh); }
  }
  
  /* Центр и карточка */
  .center{
    position:relative; z-index:2; height:100%;
    display:flex; align-items:center; justify-content:center; text-align:center;
    padding: clamp(16px, 4vw, 32px);
  }
  .card{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    gap: clamp(6px, 1.6vw, 12px); /* меньше общий зазор */
    background: rgba(6, 28, 16, 0.45);
    
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6) inset, 0 0 18px var(--ui-shadow);
    padding: clamp(18px, 4vw, 32px);
    backdrop-filter: blur(2px);
    max-width: min(92vw, 820px);
  }
  
  /* Логотип — опустить и «прижать» к надписи */
  .logo{
    width: min(35vw, 395px);
    aspect-ratio: 1/1;
    background: url("../images/center.png") center/contain no-repeat;
    image-rendering: pixelated;
    transform: translateY(2.5vh); /* опустили визуально вниз */
    margin-bottom: -1.2vh;       /* почти убрали зазор до надписи */
    filter: opacity(80%) drop-shadow(0 2px 0 rgba(0,0,0,0.6)) drop-shadow(0 6px 12px rgba(0,0,0,0.5));
  }
  
  /* Текст ближе к логотипу */
  .title{
    margin-top: 0; /* убираем верхний маржин заголовка */
  }
  
 
  .title{
    font-size: clamp(28px, 6vw, 56px);
    letter-spacing: 0.06em; text-transform: uppercase; position:relative; line-height:1.1;
    text-shadow: 0 0 2px rgba(0,0,0,0.8), 0 0 18px rgba(6,44,17,0.7);
  }
  .title::before,
  .title::after{
    content: attr(data-text); position:absolute; inset:0; mix-blend-mode: screen; pointer-events:none;
  }
  .title::before{ color:#00ffff; transform: translateX(-1.6px); opacity:0.7; }
  .title::after { color:#ff00ff; transform: translateX( 1.6px); opacity:0.55; }
  .subtitle{ font-size: clamp(16px, 2.6vw, 22px); color: #b2ffb2; opacity: 0.92; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
  .cursor{ display:inline-block; width: 0.6ch; background: currentColor; margin-left: 6px; animation: blink 1.1s steps(1,end) infinite; vertical-align: -0.1em; height: 1em; }
  @keyframes blink{ 50%{ opacity:0; } }
  
  /* Нижний статус */
  .status{
    position:fixed; left:10px; right:10px; bottom:8px; z-index:2;
    display:flex; justify-content:space-between; gap:10px;
    font-size:12px; letter-spacing:0.08em; opacity:0.85;
    color: #87e087; text-shadow: 0 1px 0 rgba(0,0,0,0.6);
  }
  .status span{
    background: rgba(6, 28, 16, 0.5);
    border:1px solid rgba(120,180,120,0.35);
    padding:4px 8px;
  }

  
  
  /* Микро-адаптация */
  @media (max-width:480px){
    body{ overflow:auto; }
    .status{ font-size:11px; }
  }