@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@300;500;700&display=swap');

:root {
  --bg:       #060810;
  --panel:    #0c0f1a;
  --border:   #1a2240;
  --accent:   #00d4ff;
  --accent2:  #ff4060;
  --text:     #c8d8f0;
  --muted:    #3a4a6a;
  --header-h: 36px;
  --footer-h: 28px;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  overflow: hidden;
}

#o64-shell {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
#o64-header {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#o64-logo {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 4px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--accent);
}

#o64-mode {
  font-size: 11px;
  color: var(--accent2);
  letter-spacing: 2px;
  text-transform: uppercase;
}

#o64-status {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}

/* ── Main display ───────────────────────────────────────────────────────── */
#o64-main {
  flex: 1;
  position: relative;
  background: #000;
  overflow: hidden;
}

#gpu-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
#o64-footer {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--footer-h);
  padding: 0 16px;
  background: var(--panel);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}

#o64-footer span::before {
  color: var(--accent);
  margin-right: 4px;
}

/* Scanline overlay for CRT feel */
#o64-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 10;
}