@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PressStart2P-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'VT323';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/VT323-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Phosphor: --ph is the saturated emitter colour (glow, rules, reverse video); --ph-core is the hot text core. */
  --ph: #39ff6a;
  --ph-core: #ccffd8;
  --ph-dim: #a0f8b4;
  --ph-deep: #0b3a1a;
  --ph-ink: #03140a;
  --ph-bar: var(--ph);
  /* Reverse video: faux-bold dark ink keeps glyphs crisp inside the glowing bar. */
  --ink-shadow: 1px 0 var(--ph-ink);
  --ph-glow: rgba(57, 255, 106, 0.62);
  --ph-halo: rgba(57, 255, 106, 0.38);
  --ph-faint: rgba(57, 255, 106, 0.1);
  --ph-haze: rgba(57, 255, 106, 0.05);
  --ph-halation: rgba(57, 255, 106, 0.26);
  /* Unlit phosphor is lifted grey-green, not black; glass outside the raster is darker. */
  --glass-lit: #2a3320;
  --glass-unlit: #172012;
  --glass-dead: #080b06;
  --screen-bg: #1e2617;
  --bezel: #2c2f25;
  --bezel-hi: #4a4e3e;
  --bezel-lo: #121410;
  --room: #070807;
  --shade: rgba(0, 0, 0, 0.85);
  --font-term: "VT323", "Lucida Console", Consolas, monospace;
  --font-logo: "Press Start 2P", "VT323", monospace;
  --pad: clamp(14px, 3.2vmin, 44px);
  --fs: clamp(18px, 1.15vw + 1.1vh, 30px);
  --bezel-pad: clamp(12px, 2.6vmin, 32px);
  /* Glass (Strong is the default). --barrel-fx is the same filter, never none, so power keyframes can chain onto it. */
  --barrel: url(#crt-barrel-strong);
  --barrel-fx: url(#crt-barrel-strong);
  --glass-vignette: 0.42;
  --glass-reflection: 0.05;
  --glass-rim: 12px;
  --glass-fringe: 0.2;
  /* Phosphor intensity (Bright is the default) */
  --ph-bloom: 3px;
  --ph-bloom-mid: 7px;
  --ph-bloom-wide: 16px;
  --ph-scanline: 0.24;
  --ph-scan-width: 1.25px;
  --ph-buzz-floor: 0.966;
  --ph-band: 0.014;
  --crt-mask: 1;
  --crt-grain: 0.5;
}
:root[data-phosphor="amber"] {
  --ph: #ffb43c; --ph-core: #ffeac4; --ph-dim: #fadba5; --ph-deep: #3d2406; --ph-ink: #170c00;
  --ph-glow: rgba(255, 180, 60, 0.6); --ph-halo: rgba(255, 170, 50, 0.28); --ph-faint: rgba(255, 180, 60, 0.1);
  --ph-haze: rgba(255, 170, 50, 0.05); --ph-halation: rgba(255, 170, 50, 0.24);
  --glass-lit: #33291b; --glass-unlit: #211a10; --glass-dead: #0b0805; --screen-bg: #2a2116;
}
:root[data-phosphor="white"] {
  --ph: #cfe0ff; --ph-core: #f2f7ff; --ph-dim: #dbe5f1; --ph-deep: #1b2330; --ph-ink: #070a10;
  --ph-glow: rgba(200, 222, 255, 0.55); --ph-halo: rgba(190, 215, 255, 0.24); --ph-faint: rgba(200, 225, 255, 0.08);
  --ph-haze: rgba(200, 222, 255, 0.04); --ph-halation: rgba(200, 222, 255, 0.2);
  --glass-lit: #2b3036; --glass-unlit: #1a1e23; --glass-dead: #090a0c; --screen-bg: #23282e;
}
:root[data-glass="off"] {
  --barrel: none; --barrel-fx: brightness(1); --glass-vignette: 0; --glass-reflection: 0; --glass-rim: 0px; --glass-fringe: 0;
}
:root[data-glass="subtle"] {
  --barrel: url(#crt-barrel-subtle); --barrel-fx: url(#crt-barrel-subtle); --glass-vignette: 0.3; --glass-reflection: 0.035; --glass-rim: 9px; --glass-fringe: 0.12;
}
:root[data-phosphor-intensity="normal"] {
  --ph-bloom: 2px; --ph-bloom-mid: 5px; --ph-bloom-wide: 11px; --ph-scanline: 0.2; --ph-scan-width: 1px; --ph-buzz-floor: 0.978; --ph-band: 0.01; --crt-grain: 0.38;
}
:root[data-phosphor-intensity="searing"] {
  --ph-bloom: 4px; --ph-bloom-mid: 9px; --ph-bloom-wide: 22px; --ph-scanline: 0.28; --ph-scan-width: 1.5px; --ph-buzz-floor: 0.96; --ph-band: 0.02; --crt-grain: 0.65;
}
:root[data-phosphor="green"][data-phosphor-intensity="normal"] {
  --ph-core: #9effb5; --ph-dim: #84ee9e; --ph-glow: rgba(57, 255, 106, 0.5); --ph-halo: rgba(57, 255, 106, 0.2); --ph-halation: rgba(57, 255, 106, 0.16); --ph-haze: rgba(57, 255, 106, 0.035);
}
:root[data-phosphor="green"][data-phosphor-intensity="searing"] {
  --ph-core: #ecfff0; --ph-dim: #d0ffdb; --ph-glow: rgba(70, 255, 120, 0.75); --ph-halo: rgba(57, 255, 106, 0.4); --ph-haze: rgba(57, 255, 106, 0.07); --ph-halation: rgba(57, 255, 106, 0.36);
}
:root[data-phosphor="amber"][data-phosphor-intensity="normal"] {
  --ph-core: #ffdc9c; --ph-dim: #f2c983; --ph-glow: rgba(255, 180, 60, 0.48); --ph-halo: rgba(255, 170, 50, 0.18); --ph-halation: rgba(255, 170, 50, 0.15); --ph-haze: rgba(255, 170, 50, 0.035);
}
:root[data-phosphor="amber"][data-phosphor-intensity="searing"] {
  --ph-core: #fff3dc; --ph-dim: #fde8c2; --ph-glow: rgba(255, 190, 80, 0.72); --ph-halo: rgba(255, 170, 50, 0.38); --ph-haze: rgba(255, 170, 50, 0.07); --ph-halation: rgba(255, 170, 50, 0.34);
}
:root[data-phosphor="white"][data-phosphor-intensity="normal"] {
  --ph-core: #e1eaf7; --ph-dim: #cad6e6; --ph-glow: rgba(200, 222, 255, 0.42); --ph-halo: rgba(190, 215, 255, 0.16); --ph-halation: rgba(200, 222, 255, 0.13); --ph-haze: rgba(200, 222, 255, 0.03);
}
:root[data-phosphor="white"][data-phosphor-intensity="searing"] {
  --ph-core: #ffffff; --ph-dim: #f1f5fa; --ph-glow: rgba(215, 232, 255, 0.7); --ph-halo: rgba(190, 215, 255, 0.34); --ph-haze: rgba(200, 222, 255, 0.06); --ph-halation: rgba(200, 222, 255, 0.3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--room); overflow: hidden; }
body { font-family: var(--font-term); font-size: var(--fs); color: var(--ph-core); }
button, input, select { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- The monitor ---------- */
/* Stack inside .screen (bottom to top): dead glass, raster content (barrel filter), dot mask, scanlines,
   grain, interference band, glass (haze, reflection, vignette), rim. Everything above the content is
   decorative and ignores the pointer; the barrel filter is visual only, so hit areas stay in layout space. */
.device {
  height: 100dvh; width: 100vw; display: flex; flex-direction: column;
  padding: clamp(10px, 2.4vmin, 30px) clamp(10px, 2.4vmin, 30px) 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 55%),
    linear-gradient(180deg, var(--bezel), var(--bezel-lo));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.crt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bezel {
  position: relative; flex: 1; min-height: 0; padding: var(--bezel-pad);
  border-radius: 5.5% / 8%;
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(255, 255, 255, 0.09), transparent 70%),
    linear-gradient(180deg, var(--bezel-hi), var(--bezel) 22%, var(--bezel) 70%, var(--bezel-lo));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.16), inset 0 -3px 4px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.6);
}
/* Recess walls between the molded frame and the tube. */
.bezel::before {
  content: ""; position: absolute; inset: calc(var(--bezel-pad) * 0.42); border-radius: 5% / 7.5%; pointer-events: none;
  background: linear-gradient(180deg, #020301, #0d0f0a 55%, #1c2017);
  box-shadow: inset 0 calc(var(--bezel-pad) * 0.4) calc(var(--bezel-pad) * 0.5) rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
/* Halation: phosphor light spilling onto the recess walls. */
.bezel::after {
  content: ""; position: absolute; inset: var(--bezel-pad); border-radius: 7% / 10%; pointer-events: none;
  box-shadow: 0 0 calc(var(--bezel-pad) * 0.7) calc(var(--bezel-pad) * 0.18) var(--ph-halation);
  transition: opacity 0.4s;
}
.bezel:has(.off-screen:not([hidden]))::after { opacity: 0; }
.screen {
  position: relative; z-index: 1; height: 100%; overflow: hidden;
  background: var(--glass-dead);
  -webkit-mask: url(themes/crt/pillow.svg) center / 100% 100% no-repeat;
  mask: url(themes/crt/pillow.svg) center / 100% 100% no-repeat;
  isolation: isolate;
}
:root[data-glass="off"] .screen { -webkit-mask: none; mask: none; border-radius: 3.5% / 5%; }
:root[data-glass="off"] .bezel::after { border-radius: 3.5% / 5%; }
.screen-content {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  padding: var(--pad) calc(var(--pad) * 1.2) calc(var(--pad) * 0.6);
  background: radial-gradient(ellipse 72% 68% at 50% 46%, var(--glass-lit), var(--glass-unlit));
  /* Emissive text: hot core, then a tight, a mid and a wide phosphor halo. */
  text-shadow: 0 0 1px var(--ph-core), 0 0 var(--ph-bloom) var(--ph-glow), 0 0 var(--ph-bloom-mid) var(--ph-glow), 0 0 var(--ph-bloom-wide) var(--ph-halo);
  filter: var(--barrel);
  will-change: transform;
  transform-origin: center;
}
.crt-mask, .crt-grain, .crt-glass, .crt-band { position: absolute; pointer-events: none; }
/* Scanlines and the phosphor dot mask share one layer and one pitch, so rows line up and there is one less full-screen blend. */
.crt-mask {
  inset: 0; z-index: 3; opacity: var(--crt-mask);
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, var(--ph-scanline)) 0 var(--ph-scan-width), transparent var(--ph-scan-width) var(--crt-pitch, 4px)),
    url(themes/crt/mask.png) 0 0 / var(--crt-pitch, 4px) var(--crt-pitch, 4px);
}
.crt-grain {
  inset: -96px; z-index: 5; opacity: var(--crt-grain);
  background: url(themes/crt/grain.png) 0 0 / 128px 128px;
}
/* Grain steps every 90 ms, on the same frames as the flicker, so it never forces extra redraws. */
:root.flicker .screen[data-active="true"] .crt-grain { animation: crt-grain 0.54s steps(1, end) infinite; }
@keyframes crt-grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-37px, 23px); }
  33% { transform: translate(51px, -61px); }
  50% { transform: translate(-83px, -17px); }
  67% { transform: translate(29px, 73px); }
  83% { transform: translate(-11px, -89px); }
}
.crt-band {
  inset: -18% 0 auto; height: 18%; z-index: 6;
  background: linear-gradient(transparent, rgba(255, 255, 255, var(--ph-band)), transparent);
  opacity: 0;
}
:root.flicker .screen[data-active="true"] .crt-band { animation: crt-interference 11s linear infinite; }
@keyframes crt-interference {
  0%, 70% { transform: translateY(0); opacity: 0; }
  72% { opacity: 1; }
  98% { transform: translateY(660%); opacity: 1; }
  100% { transform: translateY(660%); opacity: 0; }
}
.crt-glass {
  inset: 0; z-index: 7;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, calc(var(--glass-reflection) * 0.35)), transparent 32%),
    radial-gradient(ellipse 70% 64% at 50% 47%, var(--ph-haze), transparent 78%),
    radial-gradient(ellipse at center, transparent 88%, rgba(0, 0, 0, var(--glass-vignette)) 100%);
}
/* Soft reflection of a two-pane window, top left. */
.crt-glass::before {
  content: ""; position: absolute; left: 9%; top: 4%; width: 25%; height: 19%; border-radius: 22% / 30%;
  background: linear-gradient(90deg, rgba(255, 255, 255, var(--glass-reflection)) 0 45%, transparent 47% 53%, rgba(255, 255, 255, var(--glass-reflection)) 55%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.45) 55%, transparent);
  mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.45) 55%, transparent);
  filter: blur(9px); transform: rotate(-4deg);
}
.crt-glass::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 2px 0 3px rgba(255, 80, 80, var(--glass-fringe)), inset -2px 0 3px rgba(70, 240, 255, var(--glass-fringe));
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 62%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 62%, #000 100%);
}
/* Deep inset shadow where the bezel meets the glass, and the bright lip of the curved glass. */
.screen::after {
  content: ""; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  box-shadow: inset 0 0 var(--glass-rim) calc(var(--glass-rim) * 0.7) rgba(0, 0, 0, 0.8),
    inset 0 calc(var(--glass-rim) * 0.5) calc(var(--glass-rim) * 1.5) rgba(255, 255, 255, calc(var(--glass-reflection) * 0.6));
}
:root.no-scanlines .crt-mask { display: none; }

:root.flicker .screen[data-active="true"] .screen-content { animation: flicker 0.09s steps(2, end) infinite alternate; }
@keyframes flicker { from { opacity: var(--ph-buzz-floor); } to { opacity: 1; } }
.screen-content.powering-off { animation: power-off 0.55s ease-in forwards; }
.screen-content.powering-on { animation: power-on 0.6s ease-out; }
@keyframes power-off {
  0% { transform: scale(1, 1); filter: var(--barrel-fx) brightness(1); }
  55% { transform: scale(1, 0.006); filter: var(--barrel-fx) brightness(4); }
  100% { transform: scale(0, 0.006); filter: var(--barrel-fx) brightness(8); opacity: 0; }
}
@keyframes power-on {
  0% { transform: scale(0, 0.006); filter: var(--barrel-fx) brightness(8); opacity: 0; }
  40% { transform: scale(1, 0.006); filter: var(--barrel-fx) brightness(4); opacity: 1; }
  100% { transform: scale(1, 1); filter: var(--barrel-fx) brightness(1); }
}

/* ---------- Terminal layout ---------- */
.terminal { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 0.6em; scrollbar-width: thin; scrollbar-color: var(--ph-dim) transparent; }
.terminal.mode-home [data-chat], .terminal.mode-chat [data-home] { display: none !important; }
.terminal > * { flex-shrink: 0; }

.brand { text-align: center; margin: 0.2em 0 0; }
.logo { margin: 0; line-height: 1; font-weight: normal; display: inline-flex; align-items: flex-start; }
.logo-text, .mini-logo {
  font-family: var(--font-logo); color: transparent;
  background: radial-gradient(circle, var(--ph-core) 50%, var(--ph) 62%, transparent 72%) 0 0 / var(--dot) var(--dot);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 2px var(--ph)) drop-shadow(0 0 12px var(--ph-glow));
  text-shadow: none;
}
.logo-text { --dot: clamp(4px, 0.55vw, 7px); font-size: clamp(30px, 7.4vw, 104px); letter-spacing: 0.04em; }
.tm { font-size: clamp(12px, 1.3vw, 22px); margin-left: 0.3em; }
.tagline { margin: 0.25em 0 0; padding-left: 38%; font-size: 0.8em; letter-spacing: 0.08em; }

.hero { margin: 0 auto; position: relative; display: grid; place-items: center; max-width: 100%; --hero-h: 32vh; }
.hero canvas { display: none; width: min(100%, calc(var(--hero-h) * var(--hero-aspect, 1.5))); filter: drop-shadow(0 0 1px var(--ph)) drop-shadow(0 0 7px var(--ph-glow)); }
.hero.has-image canvas { display: block; }
.hero-fallback { margin: 0; line-height: 1.05; font-size: 0.8em; white-space: pre; }
.hero.has-image .hero-fallback { display: none; }

.cta { margin: 0.2em 0 0; text-align: center; font-weight: normal; font-size: 1.6em; letter-spacing: 0.04em; min-height: 1.2em; }

.prompt { display: flex; align-items: flex-start; gap: 0.5em; border: 2px solid var(--ph); border-radius: 6px; padding: 0.35em 0.6em; box-shadow: 0 0 8px var(--ph-glow), inset 0 0 8px var(--ph-faint); }
.terminal.mode-chat .taunt { margin-top: auto; }
.taunt { margin: 0; min-height: 1.15em; color: var(--ph-dim); line-height: 1.15; }
.prompt-mark { font-size: 1.2em; line-height: 1; padding-top: 0.05em; }
.prompt-field { position: relative; flex: 1; min-height: 1.2em; font-size: 1.2em; line-height: 1.2; }
.prompt-field input {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; margin: 0; background: transparent;
  color: transparent; caret-color: transparent; outline: none; font-size: inherit; text-shadow: none;
}
.echo { white-space: pre-wrap; word-break: break-word; pointer-events: none; }
.cursor { background: var(--ph-core); color: var(--ph-ink); box-shadow: 0 0 6px var(--ph-glow), 0 0 14px var(--ph-halo); text-shadow: none; }
.prompt-field:focus-within .cursor { animation: blink 1.06s steps(1) infinite; }
.prompt-field:not(:focus-within) .cursor { opacity: 0.85; }
.prompt.busy { opacity: 0.55; }
@keyframes blink { 50% { background: transparent; color: inherit; box-shadow: none; } }

.panel-box { border: 2px solid var(--ph); border-radius: 6px; padding: 0.3em 0.7em 0.5em; box-shadow: 0 0 8px var(--ph-glow); }
.history-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; border-bottom: 1px solid var(--ph-dim); padding-bottom: 0.2em; margin-bottom: 0.3em; flex-wrap: wrap; }
.history-head h2 { margin: 0; font-size: 1.1em; font-weight: normal; }
.search { display: flex; align-items: center; gap: 0.4em; border: 1px solid var(--ph); padding: 0 0.5em; border-radius: 4px; }
.search input { background: transparent; border: 0; outline: none; width: 12em; max-width: 40vw; text-shadow: inherit; }
.search input::placeholder { color: var(--ph-dim); }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list button {
  width: 100%; display: grid; grid-template-columns: 2ch 1fr auto; gap: 1ch; text-align: left;
  background: none; border: 0; padding: 0 0.3em; cursor: pointer; text-shadow: inherit;
}
.history-list button:hover, .history-list button:focus-visible { background: var(--ph-bar); color: var(--ph-ink); outline: none; text-shadow: var(--ink-shadow); }
.history-list .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.empty { color: var(--ph-dim); margin: 0.2em 0.3em; }

.chat-bar { display: flex; align-items: baseline; gap: 1em; border-bottom: 2px solid var(--ph); padding-bottom: 0.3em; }
.mini-logo { --dot: 3px; font-size: clamp(14px, 1.6vw, 24px); cursor: pointer; background-color: transparent; border: 0; padding: 0; }
.chat-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.transcript { display: flex; flex-direction: column; gap: 0.7em; padding: 0.2em 0; }
.msg { white-space: pre-wrap; word-break: break-word; line-height: 1.15; }
.msg .who { display: inline-block; margin-right: 0.6ch; }
.msg.user .who { font-weight: bold; }
.msg.smack .who { background: var(--ph-bar); color: var(--ph-ink); padding: 0 0.4ch; text-shadow: var(--ink-shadow); box-shadow: 0 0 6px var(--ph-glow), 0 0 16px var(--ph-halo); }
.thinking { color: var(--ph-dim); }
.msg.plain { font-family: "Lucida Console", Consolas, monospace; font-size: 18px; line-height: 1.6; text-shadow: none; animation: none; filter: none; }
.msg.plain .who { background: none; color: inherit; padding: 0; }
:root.flicker .screen .screen-content.has-plain { animation: none; }
/* Paused/crisis copy: flat, undistorted, no raster texture or glass. */
.screen-content.has-plain { --barrel: none; --barrel-fx: brightness(1); background: var(--glass-dead); }
.screen:has(.has-plain)::after { display: none; }
.screen:has(.has-plain) .crt-band, .screen:has(.has-plain) .crt-glass, .screen:has(.has-plain) .crt-mask, .screen:has(.has-plain) .crt-grain { display: none; }
.msg a, dialog a, #sessionNotice a { color: inherit; text-underline-offset: 0.2em; }
#sessionNotice { font-size: 0.9em; }
#retrySession { background: transparent; border: 1px solid var(--ph); cursor: pointer; }
.guest-status { display: flex; flex-wrap: wrap; gap: 0.2em 0.6em; }

.statusbar { display: flex; justify-content: space-between; gap: 1em; border-top: 1px solid var(--ph-dim); margin-top: 0.4em; padding-top: 0.2em; font-size: 0.85em; flex-wrap: wrap; }
/* Edge controls get invisible hit slop: the barrel draws them a little inward of their layout box. */
.statusbar button { background: none; border: 0; padding: 0.35em 0.3em; margin: -0.35em -0.3em; cursor: pointer; text-shadow: inherit; }
.statusbar button:hover { text-decoration: underline; }
.mood { letter-spacing: 0.1em; }
.fkeys { display: flex; justify-content: space-between; gap: 0.5em 1em; flex-wrap: wrap; padding-top: 0.3em; }
.fkeys button { background: none; border: 0; padding: 0.45em 0.2em; margin: -0.45em 0; cursor: pointer; text-shadow: inherit; }
.fkeys button:hover, .fkeys button:focus-visible {
  background: linear-gradient(var(--ph-bar), var(--ph-bar)) center / 100% calc(100% - 0.9em) no-repeat;
  color: var(--ph-ink); outline: none; text-shadow: var(--ink-shadow);
}

/* ---------- Boot + power-off ---------- */
.boot { position: absolute; inset: 0; padding: var(--pad); z-index: 2; white-space: pre-wrap; line-height: 1.2; background: inherit; overflow: hidden; }
.off-screen { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 46%, var(--glass-unlit), var(--glass-dead)); color: var(--ph-dim); text-shadow: none; font-size: 0.9em; cursor: pointer; }
.off-screen span { opacity: 0.35; }

/* ---------- Dialogs (rendered inside the tube, under the glass) ---------- */
dialog {
  position: absolute; inset: 0; z-index: 6; margin: auto;
  border: 4px double var(--ph); background: var(--screen-bg); color: var(--ph-core); padding: 0.7em 1.1em;
  max-width: min(46em, calc(100% - 2.6 * var(--pad))); max-height: calc(100% - 2.4 * var(--pad)); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 0 14px var(--ph-glow), 0 0 40px var(--ph-halo), inset 0 0 16px var(--ph-faint);
  font-family: var(--font-term); font-size: var(--fs); text-shadow: inherit;
  scrollbar-width: thin; scrollbar-color: var(--ph-dim) transparent;
}
.screen-content:has(> dialog[open]) > :not(dialog) { opacity: 0.22; }
dialog h2 { margin: 0 0 0.4em; font-weight: normal; text-align: center; background: var(--ph-bar); color: var(--ph-ink); text-shadow: var(--ink-shadow); box-shadow: 0 0 8px var(--ph-glow), 0 0 20px var(--ph-halo); }
dialog pre { margin: 0; white-space: pre-wrap; font: inherit; }
dialog .row { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; margin: 0.25em 0; }
dialog input[type="checkbox"], dialog input[type="radio"] { appearance: none; margin: 0; cursor: pointer; }
dialog input[type="checkbox"]::before { content: "[ ]"; }
dialog input[type="checkbox"]:checked::before { content: "[X]"; }
dialog input[type="radio"]::before { content: "( )"; }
dialog input[type="radio"]:checked::before { content: "(*)"; }
dialog input:focus-visible, dialog select:focus-visible, dialog button:focus-visible { outline: 1px dashed var(--ph); outline-offset: 2px; }
dialog select { background: var(--screen-bg); border: 1px solid var(--ph); }
#crtSettings .row[data-kind="toggle"], #crtMotion .row[data-kind="toggle"] { flex-direction: row-reverse; }
#crtSettings select { min-width: 8ch; }
dialog .row > span { min-width: 0; }
dialog .row > input[type="checkbox"] { flex-shrink: 0; }
.smack-setting-hint { margin: 0 0 0.25em; font-size: 0.85em; color: var(--ph-core); }
dialog .actions { text-align: center; margin-top: 0.7em; }
dialog .actions button { background: none; border: 1px solid var(--ph); padding: 0 1em; cursor: pointer; }
dialog .actions button:hover { background: var(--ph-bar); color: var(--ph-ink); text-shadow: var(--ink-shadow); }
dialog .actions button:disabled { opacity: 0.5; cursor: not-allowed; }
#consentDialog { width: min(32em, calc(100% - 2.6 * var(--pad))); }
#consentDialog .row { margin: 0.8em 0; }
.radio-group { display: flex; gap: 1em; }
.radio-group label { display: flex; gap: 0.3em; cursor: pointer; }

/* ---------- Front panel (badge, LED, power, speaker, knobs) ---------- */
.panel {
  display: flex; align-items: center; justify-content: space-between; gap: 2vmin;
  height: clamp(34px, 6vmin, 64px); padding: 0 4vmin; color: #8c8f86; font-family: var(--font-logo); font-size: clamp(7px, 1vmin, 11px);
}
.badge { letter-spacing: 0.25em; color: #a7aa9f; text-shadow: 0 1px 0 #000; }
.controls { display: flex; align-items: center; gap: 2.5vmin; }
.led { width: 1.2vmin; height: 1.2vmin; min-width: 7px; min-height: 7px; border-radius: 50%; background: #1b2b1d; box-shadow: inset 0 1px 1px #000; }
.led.on { background: var(--ph); box-shadow: 0 0 8px var(--ph-glow), 0 0 2px var(--ph); }
.power, .knob { border: 0; cursor: pointer; padding: 0; }
.power { width: 4.5vmin; height: 2.4vmin; min-width: 28px; min-height: 14px; border-radius: 3px; background: linear-gradient(#4a4d45, #22241f); box-shadow: 0 2px 0 #000, inset 0 1px 0 #666; }
.power:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #555; }
.grille { width: 14vmin; height: 3vmin; background: radial-gradient(circle, #050605 45%, transparent 55%) 0 0 / 0.9vmin 0.9vmin; opacity: 0.9; }
.knob-wrap { display: none; flex-direction: column; align-items: center; gap: 0.6em; }
.knob {
  --rot: 0deg; width: 9vmin; height: 9vmin; border-radius: 50%;
  background: conic-gradient(from 0deg, #3b3e37, #1a1b18, #3b3e37, #1a1b18, #3b3e37);
  box-shadow: 0 3px 6px #000, inset 0 0 0 3px #2c2e29; position: relative; transform: rotate(var(--rot)); transition: transform 0.25s;
}
.knob::after { content: ""; position: absolute; left: 50%; top: 8%; width: 3px; height: 28%; margin-left: -1.5px; background: #c9ccbf; border-radius: 2px; }

/* ---------- Handheld CRT for portrait / phones ---------- */
@media (orientation: portrait) and (max-width: 900px) {
  :root { --pad: clamp(12px, 3.5vw, 28px); --fs: clamp(17px, 4.2vw, 24px); --bezel-pad: clamp(10px, 3.4vw, 20px); }
  .device { padding: 4vw 4vw 0; border-radius: 0; }
  .bezel { flex: 0 1 auto; height: 78dvh; border-radius: 9% / 6%; }
  .bezel::before { border-radius: 8% / 5.5%; }
  .bezel::after { border-radius: 10% / 6.5%; }
  dialog { padding: 0.5em 0.7em; max-width: calc(100% - 1.8 * var(--pad)); max-height: calc(100% - 2.2 * var(--pad)); }
  .fkeys { flex-wrap: nowrap; justify-content: space-between; font-size: 0.85em; }
  .fkeys .k, .status-extra { display: none; }
  .statusbar { flex-wrap: wrap; font-size: 0.8em; }
  .guest-status { flex-basis: 100%; }
  dialog .row { flex-wrap: wrap; gap: 0.3em 0.6em; }
  dialog .row:has(> input[type="checkbox"]) { flex-wrap: nowrap; }
  .radio-group { flex-wrap: wrap; gap: 0.5em; }
  .panel { flex: 1; height: auto; flex-direction: column; justify-content: center; gap: 3vw; padding: 3vw 6vw; }
  .panel .grille { width: 60vw; height: 7vw; background-size: 2.2vw 2.2vw; }
  .knob-wrap { display: flex; }
  .knob { width: 14vw; height: 14vw; }
  .controls { width: 100%; justify-content: space-between; }
  .power { width: 10vw; height: 5vw; }
  .led { width: 2.2vw; height: 2.2vw; }
  .logo-text { font-size: clamp(22px, 9vw, 60px); --dot: 3px; }
  .tagline { padding-left: 0; }
  .hero { --hero-h: 18vh; }
  .cta { font-size: 1.05em; min-height: 2.3em; }
  .fkeys { font-size: 0.75em; gap: 0.2em; }
  .fkeys button, .mood { white-space: nowrap; }
  .history-head { flex-direction: column; align-items: stretch; }
  .search input { width: 100%; max-width: none; }
}
@media (orientation: landscape) and (max-height: 620px) {
  .hero { display: none; }
  .logo-text { font-size: clamp(24px, 5vw, 60px); }
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion-override="true"]) .screen-content,
  :root:not([data-motion-override="true"]) .crt-band, :root:not([data-motion-override="true"]) .crt-grain,
  :root:not([data-motion-override="true"]) .prompt-field:focus-within .cursor { animation: none !important; }
  :root:not([data-motion-override="true"]) .crt-band { display: none; }
}

/* ---------- Reply actions and share card: [COPY] [SHARE] bracket keys ---------- */
.msg .smack-reply-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 1.4ch; margin-top: 0.2em; white-space: normal; }
.smack-reply-actions button { background: none; border: 0; padding: 0.1em 0; min-height: 24px; color: var(--ph-dim); text-shadow: inherit; text-transform: uppercase; font: inherit; cursor: pointer; }
.smack-reply-actions button::before { content: "[" / ""; }
.smack-reply-actions button::after { content: "]" / ""; }
.smack-reply-actions button:hover, .smack-reply-actions button:focus-visible { background: var(--ph-bar); color: var(--ph-ink); outline: 1px dashed var(--ph); outline-offset: 2px; text-shadow: var(--ink-shadow); }
.smack-reply-note { color: var(--ph-dim); font-size: 0.85em; }
.smack-reply-note:empty { display: none; }
.smack-share { width: min(40em, calc(100% - 2.6 * var(--pad))); }
.smack-share-body { display: flex; gap: 1em; align-items: flex-start; }
.smack-share-preview { display: block; width: auto; max-width: 45%; max-height: 48vh; border: 1px solid var(--ph); }
.smack-share-options { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.5em; }
.smack-share-options label { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.smack-share-status { margin: 0; min-height: 1.2em; color: var(--ph-dim); }
.smack-share .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em 1em; }
@media (orientation: portrait) and (max-width: 900px) {
  .smack-share-body { flex-direction: column; align-items: center; }
  .smack-share-preview { max-width: 70%; max-height: 30vh; }
}

/* ---------- Insult media stage: phosphor theatre over a dot-matrix picture ---------- */
.msg .smack-media-slot { display: block; white-space: normal; }
.smack-media { margin: 0.35em 0 0.2em; }
.smack-media-theatre { color: var(--ph-dim); }
.smack-media-line { margin: 0; }
.smack-media-line::before { content: "* " / ""; }
.smack-media-canvas { display: block; max-width: 100%; height: auto; margin: 0.3em 0; border: 1px solid var(--ph-dim); border-radius: 6px; }
.smack-media-caption { color: var(--ph-core); }
.smack-media-controls { margin-top: 0.1em; }
.smack-media-slot[hidden], .smack-media-canvas[hidden], .smack-media-caption[hidden] { display: none; }

/* ---------- Accounts: shared sign-in and account dialogs, entry and signup nudge ---------- */
.smack-account { width: min(30em, calc(100% - 24px)); }
.smack-account form, .smack-account section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 10px 0; }
.smack-account h3 { margin: 0; font-size: 1em; }
.smack-account p { margin: 6px 0; }
.smack-account-field { display: flex; flex-direction: column; gap: 4px; align-self: stretch; }
.smack-account-field input { font: inherit; max-width: 100%; }
.smack-account .actions { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.smack-account-import ul { list-style: none; margin: 0; padding: 0; max-height: 28vh; overflow: auto; }
.smack-account-import label { display: flex; align-items: center; gap: 8px; }
.smack-account-danger { border-top: 1px dashed var(--ph-dim); padding-top: 8px; }
.smack-account-status { min-height: 1.4em; margin: 6px 0; color: var(--ph-dim); }
.smack-nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0; padding: 6px 10px; border: 1px dashed var(--ph-dim); }
.smack-nudge > span { flex: 1 1 14em; }
.smack-account [hidden], .smack-nudge[hidden] { display: none; }
.smack-account-field input { background: transparent; color: inherit; border: 1px solid var(--ph); padding: 0.2em 0.4em; text-shadow: inherit; }
.smack-account button, .smack-nudge button { background: none; border: 1px solid var(--ph); padding: 0 1em; color: inherit; font: inherit; text-shadow: inherit; cursor: pointer; }
.smack-account button:hover, .smack-nudge button:hover { background: var(--ph-bar); color: var(--ph-ink); text-shadow: var(--ink-shadow); }
.smack-account button:disabled { opacity: 0.5; cursor: not-allowed; }
.smack-account input[type="checkbox"] { flex-shrink: 0; }