:root{ --ease: cubic-bezier(.16,.8,.24,1); }
  *{ scroll-behavior:smooth; }
  html,body{ background:#05060f; }
  body{
    font-family:'Space Mono', monospace;
    background:#0a0e27;
    color:#e7e9ff;
    overflow-x:hidden;
    cursor:default;
  }
  h1,h2,h3,h4,.font-display{ font-family:'Bungee', cursive; }
  .font-pixel{ font-family:'Press Start 2P', cursive; }
  section{ scroll-margin-top:92px; }
  ::selection{ background:#fad807; color:#0a0e27; }
  ::-webkit-scrollbar{ width:10px; }
  ::-webkit-scrollbar-track{ background:#05060f; }
  ::-webkit-scrollbar-thumb{ background:linear-gradient(#fad807,#ff3b3b); border-radius:0; }

  /* CRT scanlines overlay */
  #scanlines{
    position:fixed; inset:0; z-index:9990; pointer-events:none;
    background:repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.14) 3px, rgba(0,0,0,0) 4px);
    mix-blend-mode:overlay; opacity:.5;
  }
  #vignette{
    position:fixed; inset:0; z-index:9989; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
  }

  /* Preloader */
  #preloader{ position:fixed; inset:0; z-index:9999; background:#05060f; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:22px; }
  .pl-blocks{ display:flex; gap:6px; }
  .pl-blocks span{ width:18px; height:26px; background:#171f52; border:2px solid #293373; }
  .pl-blocks span.lit{ background:#fad807; border-color:#ff3b3b; box-shadow:0 0 12px #fad807; }
  #plLabel{ font-family:'Press Start 2P'; font-size:11px; color:#4fe0e8; letter-spacing:2px; }

  /* cursor */
  .cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:0; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); }
  .cursor-dot{ width:6px; height:6px; background:#fad807; box-shadow:0 0 8px #fad807; }
  .cursor-ring{ width:28px; height:28px; border:2px solid rgba(79,224,232,.55); transition:width .25s var(--ease),height .25s var(--ease),border-color .25s ease; }
  .cursor-ring.big{ width:52px; height:52px; border-color:#ff3ea5; }
  @media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

  /* starfield */
  .stars{ position:absolute; inset:0; overflow:hidden; z-index:0; }
  .star{ position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; animation:twinkle 3s ease-in-out infinite; }
  @keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(1);} 50%{ opacity:1; transform:scale(1.6);} }

  /* burst */
  .burst{ position:absolute; border-radius:50%; background:radial-gradient(circle, rgba(250,216,7,.35), rgba(255,59,59,.18) 40%, transparent 70%); filter:blur(30px); }

  /* pixel-corner frame */
  .pixel-frame{
    clip-path: polygon(
      0 14px, 6px 14px, 6px 8px, 10px 8px, 10px 4px, 14px 4px, 14px 0,
      calc(100% - 14px) 0, calc(100% - 14px) 4px, calc(100% - 10px) 4px, calc(100% - 10px) 8px, calc(100% - 6px) 8px, calc(100% - 6px) 14px, 100% 14px,
      100% calc(100% - 14px), calc(100% - 6px) calc(100% - 14px), calc(100% - 6px) calc(100% - 8px), calc(100% - 10px) calc(100% - 8px), calc(100% - 10px) calc(100% - 4px), calc(100% - 14px) calc(100% - 4px), calc(100% - 14px) 100%,
      14px 100%, 14px calc(100% - 4px), 10px calc(100% - 4px), 10px calc(100% - 8px), 6px calc(100% - 8px), 6px calc(100% - 14px), 0 calc(100% - 14px)
    );
  }

  .panel{ background:#121a45; border:3px solid #293373; }
  .panel-raised{ background:#121a45; border:3px solid #293373; box-shadow:8px 8px 0 0 #05060f; }

  /* arcade buttons */
  .btn-arcade{
    position:relative; border:3px solid #05060f; box-shadow:6px 6px 0 0 #05060f;
    transition:transform .12s var(--ease), box-shadow .12s var(--ease);
  }
  .btn-arcade:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 0 #05060f; }
  .btn-arcade:active{ transform:translate(6px,6px); box-shadow:0 0 0 0 #05060f; }

  .btn-outline-arcade{
    border:3px solid #4fe0e8; box-shadow:6px 6px 0 0 #4fe0e8; background:transparent; color:#4fe0e8;
    transition:transform .12s var(--ease), box-shadow .12s var(--ease);
  }
  .btn-outline-arcade:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 0 #4fe0e8; background:rgba(79,224,232,.08); }
  .btn-outline-arcade:active{ transform:translate(6px,6px); box-shadow:0 0 0 0 #4fe0e8; }

  .glow-gold{ text-shadow:0 0 10px rgba(250,216,7,.7), 0 0 24px rgba(250,216,7,.35); }
  .glow-cyan{ text-shadow:0 0 10px rgba(79,224,232,.7), 0 0 22px rgba(79,224,232,.35); }
  .outline-red{ text-shadow: 2px 2px 0 #c40d0a, -2px 2px 0 #c40d0a, 2px -2px 0 #c40d0a, -2px -2px 0 #c40d0a; }

  /* marquee bulb border */
  .bulb-row{ display:flex; justify-content:space-between; padding:0 6px; }
  .bulb{ width:7px; height:7px; border-radius:50%; background:#3a3f2a; animation:bulb 1.6s steps(1) infinite; }
  .bulb:nth-child(odd){ animation-delay:.8s; }
  @keyframes bulb{ 0%,49%{ background:#fad807; box-shadow:0 0 6px #fad807; } 50%,100%{ background:#3a3f2a; box-shadow:none; } }

  .nav-link{ position:relative; }
  .nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; width:0; height:3px; background:#fad807; transition:width .3s var(--ease); }
  .nav-link:hover::after{ width:100%; }

  .card-spot{ position:relative; overflow:hidden; }
  .card-spot::before{
    content:''; position:absolute; width:260px; height:260px; border-radius:50%;
    background:radial-gradient(circle, rgba(79,224,232,.15), transparent 70%);
    left:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-50%); opacity:0; transition:opacity .3s ease; pointer-events:none;
  }
  .card-spot:hover::before{ opacity:1; }

  .reveal{ opacity:0; transform:translateY(36px); }

  .marquee-track{ display:flex; width:max-content; animation:marquee 30s linear infinite; }
  .marquee-track.rev{ animation-direction:reverse; animation-duration:38s; }
  .marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  .field{ background:#0a0e27; border:3px solid #293373; color:#e7e9ff; }
  .field:focus{ outline:none; border-color:#4fe0e8; box-shadow:0 0 0 3px rgba(79,224,232,.2); }

  .magnetic{ transition:transform .25s var(--ease); }

  .blink{ animation:blink 1.1s steps(1) infinite; }
  @keyframes blink{ 50%{ opacity:0; } }

  .level-line{ stroke-dasharray:10 8; }

  @media (max-width:767px){ section{ scroll-margin-top:80px; } }