:root {
  --bg: #0e1116;
  --fg: #e6edf3;
  --accent: #2f81f7;
  --muted: #8b949e;
  --banner-bg: rgba(15, 23, 42, 0.85);
  --toolbar-h: 3.25rem;
}

html, body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#screen-container {
  height: var(--screen-vh, 50vh);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111418;
  border-bottom: 1px solid #222;
}

#screen-container:focus { outline: 2px solid #2f81f7; outline-offset: -2px; }
#screen-container canvas { outline: none; image-rendering: pixelated; }

#terminal-container {
  display: none; /* hide terminal when using GUI */
  width: 100vw;
  flex: 1 1 auto;
  min-height: 0;
}

.overlay {
  position: fixed;
  left: 0; right: 0;
  pointer-events: none; /* overlays must not capture input */
  z-index: 10;
  color: var(--fg);
}

#banner {
  top: 0;
}
.banner-inner {
  margin: 0.5rem auto;
  padding: 0.5rem 0.75rem;
  width: fit-content;
  background: var(--banner-bg);
  border: 1px solid #1f2937;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  font-size: 0.9rem;
}

#status-overlay { display: none; }

#perf-overlay {
  top: 0.75rem;
  bottom: auto;
  right: 0.75rem;
  text-align: right;
  font-size: 0.8rem;
}

.hidden { display: none; }

/* Fullscreen mode (VGA only): occupy the whole viewport with the VGA screen */
body.fs.vga #screen-container { height: 100vh; border-bottom: none; }
body.fs.vga #terminal-container { display: none; }

/* Fullscreen button removed */

/* Controls toolbar: full-width bottom bar */
.controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  /* Left: Keyboard, Upload, Disk, Network | Center: ISO input+Load | Right: D-pad */
  grid-template-columns: auto auto auto auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  background: rgba(0,0,0,0.6);
  border-top: 1px solid #222;
  padding: 0.5rem 0.75rem;
  min-height: var(--toolbar-h);
  z-index: 12;
}

.controls button,
.controls .upload span {
  background: #1c2128;
  color: var(--fg);
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
}
.controls button:hover,
.controls .upload span:hover { border-color: var(--accent); }

.controls .upload input { display: none; }

.controls .dpad { display: grid; grid-template-rows: auto auto auto; gap: 0.25rem; }
.controls .dpad > div { display: flex; gap: 0.25rem; justify-content: center; }
.controls .dpad button { width: 2rem; height: 2rem; padding: 0; }

/* Inline ISO URL loader */
.controls .iso-loader { display: flex; align-items: center; gap: 0.4rem; width: 100%; }
.controls .iso-loader input[type="url"] {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0e1116;
  color: var(--fg);
}
.controls .iso-loader button {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #1c2128;
  color: var(--fg);
  cursor: pointer;
}

.controls-status {
  grid-column: 1 / -1;
  justify-self: center;
  font-size: 0.85rem;
  color: var(--muted);
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* Responsive tweaks */
@media (max-width: 720px) {
  .controls { grid-template-columns: auto auto 1fr; }
  /* Reduce D-pad size and hide text label on Keyboard to save space */
  #btn-keyboard { padding-inline: 0.45rem; }
  .controls .dpad button { width: 1.8rem; height: 1.8rem; }
}

.hidden-ime { position: fixed; bottom: 0; left: 0; opacity: 0; pointer-events: none; height: 1px; width: 1px; }

/* Collapsible drawer for disk settings */
.drawer {
  position: fixed;
  left: 0; right: 0; bottom: var(--toolbar-h);
  background: rgba(10, 13, 18, 0.96);
  border-top: 1px solid #222;
  padding: 0.75rem 1rem;
  z-index: 13;
}
.drawer .drawer-inner { max-width: 900px; margin: 0 auto; }
.drawer h2 { margin: 0 0 0.5rem 0; font-size: 1rem; color: var(--fg); }
.drawer .row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.drawer label { min-width: 6rem; color: var(--muted); }
.drawer input[type="text"],
.drawer input[type="number"] {
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #0e1116;
  color: var(--fg);
}
.drawer .actions { justify-content: flex-start; gap: 0.5rem; }
.drawer button { background: #1c2128; color: var(--fg); border: 1px solid #30363d; border-radius: 6px; padding: 0.35rem 0.6rem; cursor: pointer; }
.drawer button.danger { border-color: #8b3030; color: #ffbdbd; }
.drawer .usage { font-size: 0.85rem; color: var(--muted); }
.drawer .log-box {
  flex: 1 1 auto;
  max-height: 10rem;
  overflow: auto;
  padding: 0.5rem;
  background: #0e1116;
  border: 1px solid #30363d;
  border-radius: 6px;
  min-width: 40ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
}
.drawer .log-actions { display: flex; gap: 0.5rem; align-items: center; }