:root {
  color-scheme: dark;
  /* Catppuccin Mocha (see src/term/palette.ts for the terminal-side palette). */
  --bg: #1e1e2e;      /* base */
  --fg: #cdd6f4;      /* text */
  --border: #313244;  /* surface0 */
  /* CRT overlay tuning — strength of the texture layer over the terminal. */
  --crt-scan: rgba(0, 0, 0, 0.16);
  --crt-vignette: rgba(17, 17, 27, 0.45);
}

@font-face {
  font-family: "FiraCode Nerd Font";
  src: url("/fonts/FiraCodeNerdFont-Regular.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FiraCode Nerd Font";
  src: url("/fonts/FiraCodeNerdFont-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* Zero-size SVG that only hosts <defs> (the grain filter). Kept out of layout. */
.defs-only { position: absolute; width: 0; height: 0; overflow: hidden; }

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

#app {
  height: 100vh;
  display: flex;
  justify-content: center;
  padding: 12px;
}

#term-host {
  position: relative;
  flex: 1;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  /* Spacing between the terminal content and the rounded frame; extra bottom
     padding also absorbs sub-pixel row overflow so the last line isn't
     clipped by overflow:hidden. */
  padding: 16px 18px 28px 18px;
  overflow: hidden;
  /* Cap at ~80 columns. Padding lives on this outer frame; xterm mounts in
     the padding-free #term-screen below, so FitAddon measures only the
     content width (80ch) — otherwise it counts the padding as extra columns
     and text overflows the right edge. */
  max-width: calc(80ch + 38px);
  /* Hidden until the terminal has been fit at final (post-font-load)
     metrics, then faded in — masks the pre-JS full-width frame and the
     web-font swap reflow that would otherwise flash on load. */
  opacity: 0;
  transition: opacity 150ms ease-out;
}
#term-host.ready { opacity: 1; }

/* xterm mount point — padding-free so its measured width is exactly the
   terminal area (no phantom columns from the frame's padding). The smudge
   filter is applied here, to the actual terminal pixels (foreground text). */
#term-screen {
  height: 100%;
  filter: url(#crt-smudge);
}
#term-screen .xterm { height: 100%; }

/* Enable OpenType ligatures consistently. Chrome doesn't enable them by
   default for this font while Safari does, so the italic 'll' (and
   programming ligatures like =>, ==) only showed in Safari. Maple Mono's
   ligatures are width-stable, so they don't break xterm's cell alignment. */
#term-screen .xterm-rows,
#term-screen .xterm-rows span {
  font-feature-settings: "liga" 1, "calt" 1;
}

/* CRT overlay — a pure visual layer above the terminal. It never distorts the
   pixels beneath (no SVG filter / displacement), so there's no ghost, no
   Safari breakage, and text stays crisp. pointer-events:none keeps input and
   selection reaching xterm. */
#term-host::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  /* Scanlines: the CRT phosphor mask ("颗粒" grain). */
  background: repeating-linear-gradient(
    to bottom,
    var(--crt-scan) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: multiply;
}
#term-host::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 11;
  /* Vignette: edges fall off, reading as curved glass depth without warping. */
  background: radial-gradient(
    ellipse 120% 120% at 50% 50%,
    transparent 55%,
    var(--crt-vignette) 100%
  );
}

/* Visible scrollbars on the dark theme (xterm's default thumb vanishes on dark). */
.xterm-viewport {
  scrollbar-width: thin;
  scrollbar-color: #585b70 transparent;
}
.xterm-viewport::-webkit-scrollbar { width: 10px; }
.xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.xterm-viewport::-webkit-scrollbar-thumb {
  background: #585b70;
  border-radius: 5px;
}
.xterm-viewport::-webkit-scrollbar-thumb:hover { background: #6c7086; }

/* Phones: the home ASCII banner needs ~35 cols. The default frame paddings eat
   too much horizontal space on a narrow screen and force the banner to wrap,
   so tighten the outer margins and the terminal's own padding here. Desktop
   keeps the comfortable spacing above. */
@media (max-width: 640px) {
  #app { padding: 4px; }
  #term-host {
    padding: 12px 8px 22px 8px;
    border-radius: 6px;
  }
}