:root{
    --red:    #ED1C24;
    --yellow: #FFF200;
    --blue:   #3F48CC;
    --black:  #000000;
    --dim:    #5a5a5a;
  }

  *{ box-sizing: border-box; }

  html,body{
    margin:0;
    padding:0;
    background: var(--black);
    min-height:100vh;
  }

  body{
    position:relative;
    font-family:'VT323', monospace;
    color:#ccc;
    overflow-x:hidden;
  }

  /* ---------- FULL-PAGE CRT OVERLAYS ---------- */
  /* These are fixed to the viewport, not to any panel, so the whole
     browser window reads as one screen rather than a tile floating on a page. */

  .overlay{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:50;
  }

  .overlay.scanlines{
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.05) 0px,
      rgba(255,255,255,0.05) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 3px
    );
    mix-blend-mode: overlay;
    animation: scan 8s linear infinite;
  }

  .overlay.vignette{
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.6) 100%);
  }

  .overlay.flicker{
    background: rgba(255,255,255,0.02);
    animation: flicker 6s infinite;
  }

  @keyframes scan{
    0%{ background-position-y: 0; }
    100%{ background-position-y: 100px; }
  }

  @keyframes flicker{
    0%, 96%, 100%{ opacity: 0; }
    97%{ opacity: 1; }
    98%{ opacity: 0.3; }
    99%{ opacity: 0.8; }
  }

  /* ---------- PAGE CONTENT ---------- */
  .page{
    max-width:1040px;
    margin: 0 auto;
    padding: 5vh 4vw 8vh;
    animation: powerOn 1.1s ease-out both;
    transform-origin: center;
  }

  @keyframes powerOn{
    0%{ transform: scaleY(0.02); opacity:0; filter: brightness(3); }
    40%{ transform: scaleY(1.02); opacity:1; }
    55%{ transform: scaleY(0.98); }
    70%{ transform: scaleY(1); filter: brightness(1.4); }
    100%{ transform: scaleY(1); filter: brightness(1); }
  }

  /* ---------- TITLE ---------- */
  h1.title{
    font-family:'Press Start 2P', monospace;
    text-align:center;
    font-size: clamp(1.4rem, 5.4vw, 3rem);
    letter-spacing: 2px;
    margin: 1vh 0 4vh;
    line-height:1.4;
    user-select:none;
  }

  .c-red    { color: var(--red);    text-shadow: 0 0 6px rgba(237,28,36,0.7), 2px 0 var(--blue), -2px 0 var(--yellow); }
  .c-yellow { color: var(--yellow); text-shadow: 0 0 6px rgba(255,242,0,0.7), 2px 0 var(--red),  -2px 0 var(--blue); }
  .c-blue   { color: var(--blue);   text-shadow: 0 0 6px rgba(63,72,204,0.8),  2px 0 var(--yellow),-2px 0 var(--red); }

  /* ---------- CONTENT BOXES ---------- */
  .box{
    position:relative;
    width:100%;
    min-height: clamp(140px, 26vw, 280px);
    background: var(--black);
    border: 4px solid var(--blue);
    box-shadow:
      0 0 0 4px var(--yellow),
      0 0 0 8px var(--red);
    margin: 0 0 5vh;
  }

  .box:last-child{ margin-bottom: 0; }

  .box .label{
    position:absolute;
    top: 14px;
    left: 18px;
    font-size: 1.4rem;
    letter-spacing: 2px;
    color: var(--dim);
  }

  .box .cursor{
    display:inline-block;
    width: 10px;
    height: 1.1rem;
    background: var(--dim);
    margin-left: 6px;
    vertical-align: -3px;
    animation: blink 1s step-end infinite;
  }

  @keyframes blink{
    0%, 49%{ opacity:1; }
    50%, 100%{ opacity:0; }
  }

  @media (prefers-reduced-motion: reduce){
    .page, .overlay.flicker, .overlay.scanlines, .box .cursor{ animation: none !important; }
  }