@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root{
  --bg:#000;
  --fg:#fff;
  --muted: rgba(255,255,255,.6);
  --line: rgba(255,255,255,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Press Start 2P", ui-monospace, monospace;
  letter-spacing: .6px;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: auto;
}

/* “antigo” sem cor: CRT/scanlines/noise */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 62%),
    radial-gradient(1200px 800px at 50% 120%, rgba(255,255,255,.04) 0%, rgba(0,0,0,0) 60%);
  opacity:.9;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05),
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 7px
    );
  mix-blend-mode: overlay;
}

/* ruído bem sutil */
.center::before{
  content:"";
  position:fixed;
  inset:-20%;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.center{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 18px;
}

.panel{
  width: min(980px, 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
}

/* vídeo “monitor antigo”: mais quadrado e cru, borda fina */
.video-shell{
  width: min(92vw, 960px, calc(74vh * 16 / 9));
  aspect-ratio: 16/9;
  border-radius: 10px;      /* menos arredondado = mais old */
  overflow:hidden;
  background:#000;
  border: 1px solid var(--line);
  position:relative;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.85) inset,
    0 28px 100px rgba(0,0,0,.92);
}

/* vidro/CRT: leve curvatura e brilho P&B */
.video-shell::before{
  content:"";
  position:absolute;
  inset:-2%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.10) 0%, rgba(0,0,0,0) 45%),
    radial-gradient(circle at 50% 120%, rgba(255,255,255,.06) 0%, rgba(0,0,0,0) 55%);
  filter: blur(6px);
  opacity:.9;
}

/* scanlines dentro do “monitor” */
.video-shell::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.04),
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 6px
    );
  mix-blend-mode: overlay;
}

.video-shell iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* link “das antigas” */
.dl-link{
  color: var(--fg);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.03);
}

.dl-link:hover{
  text-decoration: underline;
  border-color: rgba(255,255,255,.40);
}

.dl-link:active{
  opacity:.8;
}

.dl-link:focus-visible{
  outline: 2px solid rgba(255,255,255,.25);
  outline-offset: 4px;
}

.tiny{
  min-height: 14px;
  font-size: 10px;
  color: var(--muted);
  display:none; /* mantém o vazio */
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  body::after, .video-shell::after{ display:none; }
}