/* ==========================================================
   Base / reset. System fonts only (see variables.css) - nothing to
   download in the NUI, nothing that can fail to load in-game.
   ========================================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: transparent;
  color: var(--text-0);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Preview mode (plain browser, no game behind it) gets a backdrop that
   loosely suggests the game world so spacing/contrast can be judged. */
body.preview {
  background:
    radial-gradient(1200px 700px at 20% 10%, #1b2233 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 90%, #231d12 0%, transparent 55%),
    #07080c;
}
body.preview #app.hidden { display: flex !important; }

/* #app - the terminal window, centered over the game. */
#app {
  position: fixed;
  top: 50%; left: 50%;
  width: var(--mdt-w);
  height: var(--mdt-h);
  transform: translate(-50%, -50%);
  display: flex;
  z-index: 10;
  opacity: 1;
  transition: opacity 180ms var(--ease);
}
#app.hidden { display: none; }
#app.mdt-dimmed { opacity: 0.14; }
#app::before, #app::after { content: none; display: none; }

#tablet-screen {
  flex: 1;
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-0);
  /* MDT Settings > Appearance > Frame Color lands on --frame-2 */
  border: 1px solid var(--frame-2, var(--border-strong));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 3px var(--frame-2, transparent);
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; }
img { max-width: 100%; }

::selection { background: var(--accent-soft); color: var(--text-0); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--bg-4); border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; border: 2px solid transparent; }
::-webkit-scrollbar-corner { background: transparent; }

.mono { font-family: var(--font-mono); letter-spacing: 0; }
.hidden { display: none !important; }
.text-muted { color: var(--text-2); }
.text-dim { color: var(--text-3); }
.text-accent { color: var(--accent-strong); }
.text-danger { color: var(--danger-strong); }
.text-good { color: var(--good-strong); }
.text-warn { color: var(--warn-strong); }

/* View entrance - a short fade/slide whenever the router mounts a view */
@keyframes viewIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#view-root > * { animation: viewIn 180ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}