gnommoeditor/src/index.css

/* ── 1 MHz retro aesthetic ───────────────────────────────────────────────────
   Press Start 2P bitmap font. Pure primary colors. Black background.
   Zero border-radius. No shadows. No gradients. Just pixels.
   ─────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  border-radius: 0 !important;
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000000;
  color: #ffffff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 11px;
  line-height: 2.2;
  image-rendering: pixelated;
}

/* Phosphor dot matrix — very faint */
body {
  background-image: radial-gradient(#181818 1px, transparent 1px);
  background-size: 4px 4px;
}

a {
  color: #00ffff;
  text-decoration: none;
}
a:hover {
  color: #ffff00;
  text-decoration: underline;
}

input, textarea, select, button {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  -webkit-font-smoothing: none !important;
  border-radius: 0 !important;
}

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #555555; }

::selection { background: #0000ff; color: #ffffff; }

:focus-visible { outline: 2px solid #ffff00; outline-offset: 0; }

/* ── GlitchPlayer isolation ───────────────────────────────────────────────────
   Undo the aggressive retro resets so the player can use its own stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */
.gnommo-player-host,
.gnommo-player-host *,
.gnommo-player-host *::before,
.gnommo-player-host *::after {
  border-radius: revert !important;
  -webkit-font-smoothing: antialiased !important;
  font-smooth: auto !important;
  image-rendering: auto;
  font-family: revert;
  line-height: revert;
  color: revert;
}

/* Base host: enforces its box and clips any player overflow */
.gnommo-player-host {
  position: relative;
  overflow: hidden;
  background: transparent;
  font-size: revert;
  display: block;
}

/* Ensure the player fills the host entirely */
.gnommo-player-host > * {
  width: 100%;
  height: 100%;
}

/* ── Player status messages ─────────────────────────────── */
.player-status {
  padding: 16px;
  color: #888;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
}

.player-status--error {
  color: #ff0000;
}

/* ── Full player preview modes ───────────────────────────── */
.player-preview-host--landscape {
  width: 90%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

.player-preview-host--portrait {
  width: 40%;
  margin: 0 auto;
  aspect-ratio: 1 / 2;
}

/* ── Error boundary ─────────────────────────────────────── */
.error-boundary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #1a0000;
  border: 1px solid #ff0000;
  color: #ff0000;
  font-size: 9px;
}

.error-boundary__msg {
  flex: 1;
}

.error-boundary__retry {
  background: transparent;
  border: 1px solid #ff0000;
  color: #ff0000;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 8px;
}

.error-boundary__retry:hover {
  background: #ff0000;
  color: #000;
}

/* ── Slide card thumbnail modes ─────────────────────────── */
.slide-thumbnail-host--landscape {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.slide-thumbnail-host--portrait {
  width: 180px;
  aspect-ratio: 1 / 2;
  margin: 0 auto;
}