/* KFC2 cyberdeck — base layout, monitor enclosure */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bayon';
  src: url('../fonts/Bayon-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --page-surface: #000;
  --page-ink: #fff;
  --header-border: #24272c;
  --header-muted: #bebebe;
  --green: #33ff66;
  --green-dim: #1d9c44;
  --green-dark: #0c2b15;
  --bg: #050805;
  --cyan: #2ee6ff;
  --magenta: #ff3df2;
  --violet: #a86bff;
  --acid: #b8ff2e;
  --amber: #ffb347;
  --case: #1c1f22;
  --case-dark: #101215;
  /* kungreact brand palette (Css/BRAND_CI/colors.css) */
  --kf-red: #BA1319;
  --kf-red-secondary: #940609;
  --kf-grey: #626262;
}

html[data-theme="day"] {
  --page-surface: #fff;
  --page-ink: #000;
  --header-border: #bebebe;
  --header-muted: #626262;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--page-surface);
  overflow: hidden;
}

body { font-family: 'Manrope', sans-serif; }

.machine {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 2vw, 32px);
}

.monitor {
  width: min(1100px, 96vw);
  height: min(720px, 88dvh);
  display: flex;
  flex-direction: column;
  background: transparent;
  position: relative;
}

.screen-bezel {
  font-family: "IBM Plex Mono", "Fira Code", "Cascadia Mono", Consolas, monospace;
  flex: 1;
  min-height: 0;
  background: #000;
  border-radius: 8px;
  padding: clamp(6px, 1vw, 14px);
  box-shadow: inset 0 0 30px rgba(0,0,0,.95), inset 0 0 4px #000;
  position: relative;
}

/* ---- kungreact brand frame ------------------------------------------------ */

.brand-bar {
  /* Flat brand surface aligned with the outer console frame. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* wordmark sits dead center */
  align-items: center;
  gap: clamp(8px, 2vw, 24px);
  margin: 0 0 14px;
  padding: 7px clamp(10px, 1.6vw, 20px);
  background: var(--page-surface);
  color: var(--page-ink);
  border: 1px solid var(--header-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.wordmark {
  grid-column: 2;
  text-decoration: none;
  font-family: "Bayon", sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 4.5vh, 40px);
  letter-spacing: .08em;
  color: var(--page-ink);
  text-shadow: none;
}

.wordmark .bracket { color: var(--kf-red); text-shadow: none; }
.wordmark:focus-visible { outline: 2px solid var(--kf-red); outline-offset: 3px; }

.brand-tag {
  grid-column: 1; grid-row: 1; justify-self: start;
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--header-muted);
}

#theme-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--header-border);
  border-radius: 5px;
  background: var(--page-surface);
  color: var(--page-ink);
  font: 600 11px 'Manrope', sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
#theme-toggle:focus-visible { outline: 2px solid var(--kf-red); outline-offset: 3px; }
#theme-toggle[aria-pressed="true"] .theme-day,
#theme-toggle[aria-pressed="false"] .theme-night { text-decoration: underline; text-underline-offset: 4px; }


.crt {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 12px / 20px;
  background: var(--bg);
  overflow: hidden;
}

/* mobile: compact header plate */
@media (max-width: 640px) {
  .machine { padding: 8px; }
  .monitor { width: 100vw; height: 100dvh; background: transparent; }
  .screen-bezel { border-radius: 6px; padding: 3px; }
  .brand-bar { border-radius: 6px; padding: 5px 10px; margin-bottom: 8px; gap: 6px; }
  .wordmark { font-size: 26px; }
  #theme-toggle { padding: 6px; font-size: 10px; }
  .brand-tag { display: none; }           /* keep the centered wordmark clean on small screens */
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .05s !important; }
}