*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a0f;
  --bg2:#12121a;
  --fg:#e0e0e6;
  --accent:#7b61ff;
  --accent2:#ff6b9d;
  --dim:#555570;
  --green:#4ade80;
  --yellow:#facc15;
  --red:#f87171;
  --mono:'IBM Plex Mono',monospace;
  --sans:'IBM Plex Sans',sans-serif;
}

html{font-size:16px}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

/* Header */
header{
  padding:2rem 2rem 1rem;
  text-align:center;
  border-bottom:1px solid #1a1a2e;
}
.back-link{
  display:inline-block;
  color:var(--accent);
  text-decoration:none;
  font-family:var(--mono);
  font-size:.85rem;
  margin-bottom:1rem;
  transition:color .2s;
}
.back-link:hover{color:var(--accent2)}
h1{
  font-family:var(--mono);
  font-size:clamp(1.2rem,3vw,2rem);
  font-weight:700;
  letter-spacing:.05em;
  color:var(--fg);
  text-transform:uppercase;
}
.subtitle{
  font-size:.95rem;
  color:var(--dim);
  margin-top:.4rem;
  font-weight:300;
}

/* Main */
main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:1.5rem 1rem;
  gap:1rem;
}

/* Canvas */
.canvas-wrap{
  position:relative;
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
  border:2px solid #1a1a2e;
  border-radius:6px;
  overflow:hidden;
  background:#08080e;
  image-rendering:pixelated;
}
.canvas-wrap canvas{
  width:100%;
  height:100%;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.scanlines{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.08) 2px,
    rgba(0,0,0,.08) 4px
  );
}

/* Event log */
.event-log{
  width:100%;
  max-width:960px;
  font-family:var(--mono);
  font-size:.75rem;
  color:var(--dim);
  min-height:1.4em;
  text-align:center;
  transition:color .3s;
}
.event-log.flash{color:var(--yellow)}

/* Footer / Status bar */
footer{
  border-top:1px solid #1a1a2e;
  padding:1rem 2rem;
}
.status-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem;
  font-family:var(--mono);
  font-size:.8rem;
  color:var(--dim);
}
.status-bar strong{color:var(--green)}
.status-bar .sep{color:#2a2a3e}

/* Responsive */
@media(max-width:600px){
  header{padding:1.2rem 1rem .8rem}
  main{padding:1rem .5rem}
  .status-bar{font-size:.7rem;gap:.4rem}
}