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

:root {
  --bg:        #0a0a0a;
  --surface:   #111111;
  --border:    #2a2a2a;
  --green:     #00ff41;
  --green-dim: #007a1f;
  --text:      #c8c8c8;
  --text-dim:  #555;
  --gold:      #ffd700;
  --red:       #ff4444;
  --w:         240px;
}

html, body {
  width: var(--w);
  max-width: var(--w);
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', monospace;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: none;
}

#scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px
  );
  pointer-events: none;
  z-index: 1; 
}

#auth-screen, #selector, #emulator-screen {
  position: relative;
  z-index: 10; 
}

/* CLOUDPHONE FIX: Make it visually obvious when D-pad is selecting a button */
button:focus, .rom-item:focus, .auth-google-btn:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  background: #0f1f0f;
}

/* ── AUTH SCREEN ── */
#auth-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px;
  gap: 0;
}

.auth-logo     { font-size: 11px; letter-spacing: 4px; color: var(--green); margin-bottom: 2px; }
.auth-sub      { font-size: 8px; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 24px; }

.auth-card {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.auth-google-btn {
  width: 100%;
  background: #111;
  border: 1px solid var(--green);
  color: var(--green);
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  padding: 12px;
  cursor: pointer;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.1s;
}

.auth-google-btn:hover { background: #0f1f0f; }
/* Prevent the SVG inside the button from stealing the physical click */
.auth-google-btn svg { flex-shrink: 0; pointer-events: none; }

.auth-status {
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 1px;
  min-height: 14px;
}
.auth-status.err  { color: var(--red); }
.auth-status.ok   { color: var(--green); }

.auth-user-bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  padding: 6px 8px;
  margin-bottom: 8px;
  font-size: 8px;
}
.auth-user-name { color: var(--green); letter-spacing: 1px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-sign-out  {
  color: var(--text-dim);
  background: none;
  border: none;
  font-family: 'Courier New', monospace;
  font-size: 8px;
  cursor: pointer;
  letter-spacing: 1px;
  flex-shrink: 0;
  padding: 0 0 0 8px;
}
.auth-sign-out:hover { color: var(--red); }

/* ── SELECTOR ── */
#selector {
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 8px;
  min-height: 100vh;
}

.logo     { font-size: 11px; letter-spacing: 4px; color: var(--green); text-transform: uppercase; margin-bottom: 2px; }
.logo-sub { font-size: 8px; letter-spacing: 2px; color: var(--text-dim); margin-bottom: 14px; }
.gb-icon  { width: 48px; height: 48px; margin-bottom: 12px; image-rendering: pixelated; }

.section-label {
  font-size: 8px; letter-spacing: 3px; color: var(--text-dim);
  text-transform: uppercase; align-self: flex-start;
  margin-left: 4px; margin-bottom: 6px;
}

.rom-list { width: 100%; display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }

.rom-item {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-family: 'Courier New', monospace; font-size: 11px;
  padding: 10px; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
  transition: border-color 0.1s, background 0.1s;
}
.rom-item::before { content: '▶'; font-size: 8px; color: var(--green-dim); flex-shrink: 0; }
.rom-item.selected { border-color: var(--green); background: #0f1f0f; }
.rom-item.selected::before { color: var(--green); }
.rom-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rom-badge {
  font-size: 7px; letter-spacing: 1px; padding: 1px 4px;
  border: 1px solid var(--border); color: var(--text-dim);
  flex-shrink: 0; text-transform: uppercase;
}
.rom-badge.gb   { border-color: #007a1f; color: #00ff41; }
.rom-badge.gbc  { border-color: #007a1f; color: #00ff41; }
.rom-badge.gba  { border-color: #4a3f00; color: #ffd700; }
.rom-badge.nes  { border-color: #4a0000; color: #ff6060; }
.rom-badge.snes { border-color: #1a0050; color: #a080ff; }

.launch-hint { font-size: 9px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 16px; }
.launch-hint span { color: var(--green); }

.keymap { width: 100%; border: 1px solid var(--border); padding: 8px; margin-bottom: 8px; }
.keymap-title { font-size: 8px; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; margin-bottom: 6px; }
.keymap-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.keymap-row   { display: flex; justify-content: space-between; font-size: 9px; }
.keymap-key    { color: var(--green); font-weight: bold; }
.keymap-action { color: var(--text-dim); }

/* ── EMULATOR SCREEN ── */
#emulator-screen {
  display: none; flex-direction: column;
  align-items: center; width: var(--w);
}

.emu-topbar {
  width: 100%; display: flex; align-items: center;
  justify-content: space-between; padding: 4px 6px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  gap: 4px;
}
.emu-title {
  font-size: 9px; letter-spacing: 1px; color: var(--green);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.save-status {
  font-size: 8px; color: var(--text-dim);
  letter-spacing: 1px; flex-shrink: 0;
  transition: color 0.5s;
}
.save-status.active  { color: var(--green); }
.save-status.saving  { color: var(--gold); }
.save-status.warning { color: var(--red); }

#emulator-wrapper {
  width: 240px; height: 216px;
  background: #000; position: relative; flex-shrink: 0;
}
#emulator-wrapper canvas,
#emulator-wrapper #canvas {
  width: 240px !important; height: 216px !important;
  display: block; image-rendering: pixelated;
}

#emulator-wrapper .ejs_menu_bar,
#emulator-wrapper .ejs_top_bar,
#emulator-wrapper .ejs_virtualGamepad,
#emulator-wrapper .ejs_virtualpad,
#emulator-wrapper .ejs_controls,
#emulator-wrapper .ejs_menu,
#emulator-wrapper .ejs_button_container,
#emulator-wrapper .ejs_pause_overlay,
#emulator-wrapper [class*="ejs_virtual"],
#emulator-wrapper [class*="ejs_menu"],
#emulator-wrapper [class*="ejs_top"] { display: none !important; }

.key-hints {
  width: 100%; background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 8px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 2px 4px;
}
.hint-row    { display: flex; justify-content: space-between; font-size: 8px; }
.hint-key    { color: var(--green); font-weight: bold; }
.hint-action { color: var(--text-dim); }

#loading-msg {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: #000; color: var(--green);
  font-size: 10px; letter-spacing: 2px;
  flex-direction: column; gap: 8px; z-index: 10;
}
.loading-dot { display: inline-block; animation: blink 1s step-start infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

#save-confirm {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 240px;
  background: rgba(0,0,0,0.95);
  border-bottom: 1px solid var(--red);
  padding: 8px;
  z-index: 9999;
  flex-direction: column;
  gap: 4px;
}
#save-confirm.visible { display: flex; }
.confirm-title { font-size: 8px; letter-spacing: 2px; color: var(--red); text-transform: uppercase; }
.confirm-msg   { font-size: 9px; color: var(--text); }
.confirm-hint  { font-size: 8px; color: var(--text-dim); letter-spacing: 1px; }
.confirm-hint span { color: var(--gold); }