/* hla-machine (T6): retro phosphor-CRT styling layer. Owns every
   visual decision; the structural layout lives in app.css. Does NOT
   touch main.js / editor.js or any emulator configuration.

   Terminal palette strategy: the vendored xterm.js here is built with its
   DOM renderer, so every glyph is a real <span> classed xterm-fg-N /
   xterm-bg-N, coloured by a <style> xterm injects inside .xterm-screen
   using selectors like `.xterm-dom-renderer-owner-1 .xterm-fg-2`.
   Default (no-ANSI) text carries NO fg class; it inherits `.xterm-rows'` color.
   So the palette is re-expressed from CSS with #screen-prefixed rules:
   the id beats xterm's two-class selectors and the injected <style> loses
   the source-order tie. INVERTED_DEFAULT_COLOR is 257 (reverse video),
   covered below. Cursor and selection colours are injected CSS too.

   The one thing left to xterm's own <style> is `font-family`: main.js fixes
   it at 'monospace', and fitTerm (main.js:22-32) measures the char cell for
   cols/rows, so overriding it from here would desync cursor + cjk metrics.
   'monospace' resolves to a local fixed-width face, so it stays self-contained.
 */

:root {
  --bg:        #0b0f0b;   /* near-black glass (the brief's #0b0f0b-ish) */
  --bg-deep:   #050705;   /* page behind the tube */
  --bg-raised: #0e130e;   /* editor/toolbar panels */
  --bezel:     #1d231e;   /* bezel plastic, graphite-warm */
  --bezel-hi:  #333b34;
  --phosphor:       #33ff66;                /* the brief's #33ff66-ish */
  --phosphor-dim:   rgba(51, 255, 102, 0.62);
  --phosphor-glow:  rgba(51, 255, 102, 0.34);
  --phosphor-faint: rgba(51, 255, 102, 0.14);
  --border:      rgba(51, 255, 102, 0.28);
  --screen-photo-opacity: 0.24;
  --bezel-gap:   22px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
}

html,
body {
  background: var(--bg-deep);
}

body {
  color-scheme: dark;
  color: var(--phosphor);
  font-family: var(--mono);
}

/* ------------------------------------------------------------------
   CRT bezel frame
   ------------------------------------------------------------------ */
#crt {
  position: relative;
  --bezel-gap: 22px;
  box-sizing: border-box;
  padding: var(--bezel-gap);
  background:
    linear-gradient(145deg, var(--bezel-hi) 0%, var(--bezel) 38%, #131813 78%, var(--bezel) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.75),
    inset 0 0 34px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 48px rgba(0, 0, 0, 0.65);
}

#screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg);
}

/* The photograph is its own layer below xterm, so changing its opacity never
   dims terminal glyphs, the cursor, or selection. */
#screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(12, 52, 24, 0.20), rgba(4, 18, 8, 0.48)),
    url("../images/warriors-team-background.jpeg") center 38% / cover no-repeat;
  background-blend-mode: color, normal;
  opacity: var(--screen-photo-opacity);
}

/* xterm applies its theme background to the viewport as an INLINE style
   (_handleThemeChange in the vendored lib), so override it with !important.
   The terminal surfaces are transparent so the photo layer can show through;
   terminal glyphs and explicit ANSI cell backgrounds remain opaque above it. */
#screen .xterm {
  position: relative;
  z-index: 1;
}

#screen .xterm,
#screen .xterm-screen,
#screen .xterm-viewport {
  background-color: transparent !important;
}

#screen .xterm-rows {
  color: var(--phosphor);
  text-shadow: 0 0 1px var(--phosphor-faint);
}


/* ------------------------------------------------------------------
   Terminal ANSI palette -> phosphor ramp
   ------------------------------------------------------------------ */
#screen .xterm-fg-0 { color: #0b0f0b; }
#screen .xterm-fg-1 { color: #1e5c33; }
#screen .xterm-fg-2 { color: #1f7a38; }
#screen .xterm-fg-3 { color: #3b9c47; }
#screen .xterm-fg-4 { color: #2a7a48; }
#screen .xterm-fg-5 { color: #377a50; }
#screen .xterm-fg-6 { color: #31a255; }
#screen .xterm-fg-7 { color: #8ec99a; }
#screen .xterm-fg-8 { color: #3d5c46; }
#screen .xterm-fg-9 { color: #33d56b; }
#screen .xterm-fg-10 { color: #33ff66; }
#screen .xterm-fg-11 { color: #9dff66; }
#screen .xterm-fg-12 { color: #5bff8c; }
#screen .xterm-fg-13 { color: #7dffa8; }
#screen .xterm-fg-14 { color: #99ffbb; }
#screen .xterm-fg-15 { color: #d6ffe3; }
#screen .xterm-bg-0 { background-color: #050705; }
#screen .xterm-bg-1 { background-color: #12301e; }
#screen .xterm-bg-2 { background-color: #145a26; }
#screen .xterm-bg-3 { background-color: #2a6e30; }
#screen .xterm-bg-4 { background-color: #1f5c31; }
#screen .xterm-bg-5 { background-color: #2a5c38; }
#screen .xterm-bg-6 { background-color: #1f8a3c; }
#screen .xterm-bg-7 { background-color: #5f9c6b; }
#screen .xterm-bg-8 { background-color: #1f3327; }
#screen .xterm-bg-9 { background-color: #16a543; }
#screen .xterm-bg-10 { background-color: #16c94f; }
#screen .xterm-bg-11 { background-color: #63c94f; }
#screen .xterm-bg-12 { background-color: #39d966; }
#screen .xterm-bg-13 { background-color: #4fe97f; }
#screen .xterm-bg-14 { background-color: #66f295; }
#screen .xterm-bg-15 { background-color: #9de8b6; }
#screen .xterm-fg-257 { color: var(--bg); }
#screen .xterm-bg-257 { background-color: var(--phosphor); }

    #screen .xterm-fg-16, #screen .xterm-fg-17, #screen .xterm-fg-18, #screen .xterm-fg-19, #screen .xterm-fg-20,
    #screen .xterm-fg-21, #screen .xterm-fg-22, #screen .xterm-fg-23, #screen .xterm-fg-24, #screen .xterm-fg-25,
    #screen .xterm-fg-26, #screen .xterm-fg-27, #screen .xterm-fg-28, #screen .xterm-fg-29, #screen .xterm-fg-30,
    #screen .xterm-fg-31, #screen .xterm-fg-32, #screen .xterm-fg-33, #screen .xterm-fg-34, #screen .xterm-fg-35,
    #screen .xterm-fg-36, #screen .xterm-fg-37, #screen .xterm-fg-38, #screen .xterm-fg-39, #screen .xterm-fg-40,
    #screen .xterm-fg-41, #screen .xterm-fg-42, #screen .xterm-fg-43, #screen .xterm-fg-44, #screen .xterm-fg-45,
    #screen .xterm-fg-46, #screen .xterm-fg-47, #screen .xterm-fg-48, #screen .xterm-fg-49, #screen .xterm-fg-50,
    #screen .xterm-fg-51, #screen .xterm-fg-52, #screen .xterm-fg-53, #screen .xterm-fg-54, #screen .xterm-fg-55,
    #screen .xterm-fg-56, #screen .xterm-fg-57, #screen .xterm-fg-58, #screen .xterm-fg-59, #screen .xterm-fg-60,
    #screen .xterm-fg-61, #screen .xterm-fg-62, #screen .xterm-fg-63, #screen .xterm-fg-64, #screen .xterm-fg-65,
    #screen .xterm-fg-66, #screen .xterm-fg-67, #screen .xterm-fg-68, #screen .xterm-fg-69, #screen .xterm-fg-70,
    #screen .xterm-fg-71, #screen .xterm-fg-72, #screen .xterm-fg-73, #screen .xterm-fg-74, #screen .xterm-fg-75,
    #screen .xterm-fg-76, #screen .xterm-fg-77, #screen .xterm-fg-78, #screen .xterm-fg-79, #screen .xterm-fg-80,
    #screen .xterm-fg-81, #screen .xterm-fg-82, #screen .xterm-fg-83, #screen .xterm-fg-84, #screen .xterm-fg-85,
    #screen .xterm-fg-86, #screen .xterm-fg-87, #screen .xterm-fg-88, #screen .xterm-fg-89, #screen .xterm-fg-90,
    #screen .xterm-fg-91, #screen .xterm-fg-92, #screen .xterm-fg-93, #screen .xterm-fg-94, #screen .xterm-fg-95,
    #screen .xterm-fg-96, #screen .xterm-fg-97, #screen .xterm-fg-98, #screen .xterm-fg-99, #screen .xterm-fg-100,
    #screen .xterm-fg-101, #screen .xterm-fg-102, #screen .xterm-fg-103, #screen .xterm-fg-104, #screen .xterm-fg-105,
    #screen .xterm-fg-106, #screen .xterm-fg-107, #screen .xterm-fg-108, #screen .xterm-fg-109, #screen .xterm-fg-110,
    #screen .xterm-fg-111, #screen .xterm-fg-112, #screen .xterm-fg-113, #screen .xterm-fg-114, #screen .xterm-fg-115,
    #screen .xterm-fg-116, #screen .xterm-fg-117, #screen .xterm-fg-118, #screen .xterm-fg-119, #screen .xterm-fg-120,
    #screen .xterm-fg-121, #screen .xterm-fg-122, #screen .xterm-fg-123, #screen .xterm-fg-124, #screen .xterm-fg-125,
    #screen .xterm-fg-126, #screen .xterm-fg-127, #screen .xterm-fg-128, #screen .xterm-fg-129, #screen .xterm-fg-130,
    #screen .xterm-fg-131, #screen .xterm-fg-132, #screen .xterm-fg-133, #screen .xterm-fg-134, #screen .xterm-fg-135,
    #screen .xterm-fg-136, #screen .xterm-fg-137, #screen .xterm-fg-138, #screen .xterm-fg-139, #screen .xterm-fg-140,
    #screen .xterm-fg-141, #screen .xterm-fg-142, #screen .xterm-fg-143, #screen .xterm-fg-144, #screen .xterm-fg-145,
    #screen .xterm-fg-146, #screen .xterm-fg-147, #screen .xterm-fg-148, #screen .xterm-fg-149, #screen .xterm-fg-150,
    #screen .xterm-fg-151, #screen .xterm-fg-152, #screen .xterm-fg-153, #screen .xterm-fg-154, #screen .xterm-fg-155,
    #screen .xterm-fg-156, #screen .xterm-fg-157, #screen .xterm-fg-158, #screen .xterm-fg-159, #screen .xterm-fg-160,
    #screen .xterm-fg-161, #screen .xterm-fg-162, #screen .xterm-fg-163, #screen .xterm-fg-164, #screen .xterm-fg-165,
    #screen .xterm-fg-166, #screen .xterm-fg-167, #screen .xterm-fg-168, #screen .xterm-fg-169, #screen .xterm-fg-170,
    #screen .xterm-fg-171, #screen .xterm-fg-172, #screen .xterm-fg-173, #screen .xterm-fg-174, #screen .xterm-fg-175,
    #screen .xterm-fg-176, #screen .xterm-fg-177, #screen .xterm-fg-178, #screen .xterm-fg-179, #screen .xterm-fg-180,
    #screen .xterm-fg-181, #screen .xterm-fg-182, #screen .xterm-fg-183, #screen .xterm-fg-184, #screen .xterm-fg-185,
    #screen .xterm-fg-186, #screen .xterm-fg-187, #screen .xterm-fg-188, #screen .xterm-fg-189, #screen .xterm-fg-190,
    #screen .xterm-fg-191, #screen .xterm-fg-192, #screen .xterm-fg-193, #screen .xterm-fg-194, #screen .xterm-fg-195,
    #screen .xterm-fg-196, #screen .xterm-fg-197, #screen .xterm-fg-198, #screen .xterm-fg-199, #screen .xterm-fg-200,
    #screen .xterm-fg-201, #screen .xterm-fg-202, #screen .xterm-fg-203, #screen .xterm-fg-204, #screen .xterm-fg-205,
    #screen .xterm-fg-206, #screen .xterm-fg-207, #screen .xterm-fg-208, #screen .xterm-fg-209, #screen .xterm-fg-210,
    #screen .xterm-fg-211, #screen .xterm-fg-212, #screen .xterm-fg-213, #screen .xterm-fg-214, #screen .xterm-fg-215,
    #screen .xterm-fg-216, #screen .xterm-fg-217, #screen .xterm-fg-218, #screen .xterm-fg-219, #screen .xterm-fg-220,
    #screen .xterm-fg-221, #screen .xterm-fg-222, #screen .xterm-fg-223, #screen .xterm-fg-224, #screen .xterm-fg-225,
    #screen .xterm-fg-226, #screen .xterm-fg-227, #screen .xterm-fg-228, #screen .xterm-fg-229, #screen .xterm-fg-230,
    #screen .xterm-fg-231 {
  color: #3ce369;
}

    #screen .xterm-bg-16, #screen .xterm-bg-17, #screen .xterm-bg-18, #screen .xterm-bg-19, #screen .xterm-bg-20,
    #screen .xterm-bg-21, #screen .xterm-bg-22, #screen .xterm-bg-23, #screen .xterm-bg-24, #screen .xterm-bg-25,
    #screen .xterm-bg-26, #screen .xterm-bg-27, #screen .xterm-bg-28, #screen .xterm-bg-29, #screen .xterm-bg-30,
    #screen .xterm-bg-31, #screen .xterm-bg-32, #screen .xterm-bg-33, #screen .xterm-bg-34, #screen .xterm-bg-35,
    #screen .xterm-bg-36, #screen .xterm-bg-37, #screen .xterm-bg-38, #screen .xterm-bg-39, #screen .xterm-bg-40,
    #screen .xterm-bg-41, #screen .xterm-bg-42, #screen .xterm-bg-43, #screen .xterm-bg-44, #screen .xterm-bg-45,
    #screen .xterm-bg-46, #screen .xterm-bg-47, #screen .xterm-bg-48, #screen .xterm-bg-49, #screen .xterm-bg-50,
    #screen .xterm-bg-51, #screen .xterm-bg-52, #screen .xterm-bg-53, #screen .xterm-bg-54, #screen .xterm-bg-55,
    #screen .xterm-bg-56, #screen .xterm-bg-57, #screen .xterm-bg-58, #screen .xterm-bg-59, #screen .xterm-bg-60,
    #screen .xterm-bg-61, #screen .xterm-bg-62, #screen .xterm-bg-63, #screen .xterm-bg-64, #screen .xterm-bg-65,
    #screen .xterm-bg-66, #screen .xterm-bg-67, #screen .xterm-bg-68, #screen .xterm-bg-69, #screen .xterm-bg-70,
    #screen .xterm-bg-71, #screen .xterm-bg-72, #screen .xterm-bg-73, #screen .xterm-bg-74, #screen .xterm-bg-75,
    #screen .xterm-bg-76, #screen .xterm-bg-77, #screen .xterm-bg-78, #screen .xterm-bg-79, #screen .xterm-bg-80,
    #screen .xterm-bg-81, #screen .xterm-bg-82, #screen .xterm-bg-83, #screen .xterm-bg-84, #screen .xterm-bg-85,
    #screen .xterm-bg-86, #screen .xterm-bg-87, #screen .xterm-bg-88, #screen .xterm-bg-89, #screen .xterm-bg-90,
    #screen .xterm-bg-91, #screen .xterm-bg-92, #screen .xterm-bg-93, #screen .xterm-bg-94, #screen .xterm-bg-95,
    #screen .xterm-bg-96, #screen .xterm-bg-97, #screen .xterm-bg-98, #screen .xterm-bg-99, #screen .xterm-bg-100,
    #screen .xterm-bg-101, #screen .xterm-bg-102, #screen .xterm-bg-103, #screen .xterm-bg-104, #screen .xterm-bg-105,
    #screen .xterm-bg-106, #screen .xterm-bg-107, #screen .xterm-bg-108, #screen .xterm-bg-109, #screen .xterm-bg-110,
    #screen .xterm-bg-111, #screen .xterm-bg-112, #screen .xterm-bg-113, #screen .xterm-bg-114, #screen .xterm-bg-115,
    #screen .xterm-bg-116, #screen .xterm-bg-117, #screen .xterm-bg-118, #screen .xterm-bg-119, #screen .xterm-bg-120,
    #screen .xterm-bg-121, #screen .xterm-bg-122, #screen .xterm-bg-123, #screen .xterm-bg-124, #screen .xterm-bg-125,
    #screen .xterm-bg-126, #screen .xterm-bg-127, #screen .xterm-bg-128, #screen .xterm-bg-129, #screen .xterm-bg-130,
    #screen .xterm-bg-131, #screen .xterm-bg-132, #screen .xterm-bg-133, #screen .xterm-bg-134, #screen .xterm-bg-135,
    #screen .xterm-bg-136, #screen .xterm-bg-137, #screen .xterm-bg-138, #screen .xterm-bg-139, #screen .xterm-bg-140,
    #screen .xterm-bg-141, #screen .xterm-bg-142, #screen .xterm-bg-143, #screen .xterm-bg-144, #screen .xterm-bg-145,
    #screen .xterm-bg-146, #screen .xterm-bg-147, #screen .xterm-bg-148, #screen .xterm-bg-149, #screen .xterm-bg-150,
    #screen .xterm-bg-151, #screen .xterm-bg-152, #screen .xterm-bg-153, #screen .xterm-bg-154, #screen .xterm-bg-155,
    #screen .xterm-bg-156, #screen .xterm-bg-157, #screen .xterm-bg-158, #screen .xterm-bg-159, #screen .xterm-bg-160,
    #screen .xterm-bg-161, #screen .xterm-bg-162, #screen .xterm-bg-163, #screen .xterm-bg-164, #screen .xterm-bg-165,
    #screen .xterm-bg-166, #screen .xterm-bg-167, #screen .xterm-bg-168, #screen .xterm-bg-169, #screen .xterm-bg-170,
    #screen .xterm-bg-171, #screen .xterm-bg-172, #screen .xterm-bg-173, #screen .xterm-bg-174, #screen .xterm-bg-175,
    #screen .xterm-bg-176, #screen .xterm-bg-177, #screen .xterm-bg-178, #screen .xterm-bg-179, #screen .xterm-bg-180,
    #screen .xterm-bg-181, #screen .xterm-bg-182, #screen .xterm-bg-183, #screen .xterm-bg-184, #screen .xterm-bg-185,
    #screen .xterm-bg-186, #screen .xterm-bg-187, #screen .xterm-bg-188, #screen .xterm-bg-189, #screen .xterm-bg-190,
    #screen .xterm-bg-191, #screen .xterm-bg-192, #screen .xterm-bg-193, #screen .xterm-bg-194, #screen .xterm-bg-195,
    #screen .xterm-bg-196, #screen .xterm-bg-197, #screen .xterm-bg-198, #screen .xterm-bg-199, #screen .xterm-bg-200,
    #screen .xterm-bg-201, #screen .xterm-bg-202, #screen .xterm-bg-203, #screen .xterm-bg-204, #screen .xterm-bg-205,
    #screen .xterm-bg-206, #screen .xterm-bg-207, #screen .xterm-bg-208, #screen .xterm-bg-209, #screen .xterm-bg-210,
    #screen .xterm-bg-211, #screen .xterm-bg-212, #screen .xterm-bg-213, #screen .xterm-bg-214, #screen .xterm-bg-215,
    #screen .xterm-bg-216, #screen .xterm-bg-217, #screen .xterm-bg-218, #screen .xterm-bg-219, #screen .xterm-bg-220,
    #screen .xterm-bg-221, #screen .xterm-bg-222, #screen .xterm-bg-223, #screen .xterm-bg-224, #screen .xterm-bg-225,
    #screen .xterm-bg-226, #screen .xterm-bg-227, #screen .xterm-bg-228, #screen .xterm-bg-229, #screen .xterm-bg-230,
    #screen .xterm-bg-231 {
  background-color: #0f2a18;
}

#screen .xterm-fg-232 { color: #1c241e; }
#screen .xterm-fg-233 { color: #222c25; }
#screen .xterm-fg-234 { color: #29342c; }
#screen .xterm-fg-235 { color: #303c33; }
#screen .xterm-fg-236 { color: #37443a; }
#screen .xterm-fg-237 { color: #3d4c41; }
#screen .xterm-fg-238 { color: #445448; }
#screen .xterm-fg-239 { color: #4b5c4f; }
#screen .xterm-fg-240 { color: #526457; }
#screen .xterm-fg-241 { color: #596c5e; }
#screen .xterm-fg-242 { color: #5f7465; }
#screen .xterm-fg-243 { color: #667c6c; }
#screen .xterm-fg-244 { color: #6d8473; }
#screen .xterm-fg-245 { color: #748c7a; }
#screen .xterm-fg-246 { color: #7a9481; }
#screen .xterm-fg-247 { color: #819c88; }
#screen .xterm-fg-248 { color: #88a490; }
#screen .xterm-fg-249 { color: #8fac97; }
#screen .xterm-fg-250 { color: #96b49e; }
#screen .xterm-fg-251 { color: #9cbca5; }
#screen .xterm-fg-252 { color: #a3c4ac; }
#screen .xterm-fg-253 { color: #aaccb3; }
#screen .xterm-fg-254 { color: #b1d4ba; }
#screen .xterm-fg-255 { color: #d6ffe3; }
#screen .xterm-bg-232 { background-color: #0a0d0b; }
#screen .xterm-bg-233 { background-color: #0c0f0d; }
#screen .xterm-bg-234 { background-color: #0e120f; }
#screen .xterm-bg-235 { background-color: #101412; }
#screen .xterm-bg-236 { background-color: #121714; }
#screen .xterm-bg-237 { background-color: #141a16; }
#screen .xterm-bg-238 { background-color: #171c19; }
#screen .xterm-bg-239 { background-color: #191f1b; }
#screen .xterm-bg-240 { background-color: #1b221d; }
#screen .xterm-bg-241 { background-color: #1d2420; }
#screen .xterm-bg-242 { background-color: #1f2722; }
#screen .xterm-bg-243 { background-color: #212a24; }
#screen .xterm-bg-244 { background-color: #242c27; }
#screen .xterm-bg-245 { background-color: #262f29; }
#screen .xterm-bg-246 { background-color: #28322b; }
#screen .xterm-bg-247 { background-color: #2a342e; }
#screen .xterm-bg-248 { background-color: #2c3730; }
#screen .xterm-bg-249 { background-color: #2e3a32; }
#screen .xterm-bg-250 { background-color: #313c35; }
#screen .xterm-bg-251 { background-color: #333f37; }
#screen .xterm-bg-252 { background-color: #354239; }
#screen .xterm-bg-253 { background-color: #37443c; }
#screen .xterm-bg-254 { background-color: #39473e; }
#screen .xterm-bg-255 { background-color: #3c4a41; }

#screen .xterm-dim { color: rgba(51, 255, 102, 0.6); }


/* ------------------------------------------------------------------
   Cursor + selection
   ------------------------------------------------------------------ */
#screen .xterm-cursor.xterm-cursor-block {
  background-color: var(--phosphor);
  color: var(--bg);
  box-shadow: 0 0 8px var(--phosphor-glow);
}
#screen .xterm-cursor.xterm-cursor-bar {
  box-shadow: 1px 0 0 0 var(--phosphor) inset;
}
#screen .xterm-cursor.xterm-cursor-underline {
  border-bottom-color: var(--phosphor);
}
#screen .xterm-selection div {
  background-color: var(--phosphor-faint);
}
#screen .xterm-viewport {
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-faint) transparent;
}


/* ------------------------------------------------------------------
   Scanline + vignette overlay. pointer-events: none is REQUIRED or the
   overlay eats clicks and selection in the terminal. Sits above #screen
   (z-index beats xterm's helpers/selection; below #status).
   ------------------------------------------------------------------ */
#crt-overlay {
  position: absolute;
  top: var(--bezel-gap);
  left: var(--bezel-gap);
  right: var(--bezel-gap);
  bottom: var(--bezel-gap);
  z-index: 15;
  pointer-events: none;
  border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 42%, var(--phosphor-faint), transparent 58%),
    radial-gradient(ellipse at 50% 48%, rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.40) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}


/* ------------------------------------------------------------------
   One-shot boot flicker (power-on). Settles; never loops. Purely an
   opacity animation -> no layout shift, no filter/transform on the
   terminal that could desync cursor or blur glyphs.
   ------------------------------------------------------------------ */
@keyframes crt-power-on {
  0%   { opacity: 0.10; }
  7%   { opacity: 0.92; }
  11%  { opacity: 0.28; }
  15%  { opacity: 1.00; }
  21%  { opacity: 0.68; }
  27%  { opacity: 0.98; }
  35%  { opacity: 0.82; }
  42%, 100% { opacity: 1.00; }
}

#crt {
  animation: crt-power-on 1.1s ease-out 1 both;
}


/* ------------------------------------------------------------------
   Editor pane + status furniture (page decoration only, in palette)
   ------------------------------------------------------------------ */
#editor-pane {
  background: var(--bg-deep);
  border-left: 1px solid var(--border);
  box-shadow: inset 4px 0 12px rgba(0, 0, 0, 0.5);
}

#editor-toolbar {
  padding: 5px 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--phosphor-dim);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  text-shadow: 0 0 4px var(--phosphor-glow);
}

#editor {
  resize: none;
  padding: 12px;
  border: none;
  outline: none;
  color: var(--phosphor);
  background: var(--bg-raised);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  caret-color: var(--phosphor);
  text-shadow: 0 0 1px var(--phosphor-faint);
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-faint) transparent;
}
#editor::selection { background: var(--phosphor-faint); color: var(--phosphor); }
#editor:focus { box-shadow: inset 0 0 0 1px var(--border); }

#status {
  z-index: 30;
  max-width: 70%;
  padding: 4px 12px;
  margin: 0 0 8px 8px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--phosphor-dim);
  background: rgba(5, 7, 5, 0.88);
  border: 1px solid var(--border);
  border-radius: 0 10px 10px 0;
  border-left: 3px solid var(--phosphor);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 4px var(--phosphor-glow);
}


/* ------------------------------------------------------------------
   Footer credit plate (bead ip1.13): attribution below the tube, quiet
   and in keeping — dim, small, etched into the bezel like a label.
   Painted above the scanline overlay (z-index 16 > 15) so the credits
   stay legible; the semi-opaque background doubles as a clean plate.
   ------------------------------------------------------------------ */
#credits {
  position: relative;
  z-index: 16;
  padding: 8px 18px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  text-align: center;
  color: rgba(51, 255, 102, 0.45);
  background: rgba(5, 7, 5, 0.85);
  border-top: 1px solid var(--border);
  text-shadow: 0 0 2px var(--phosphor-glow);
}

#credits a {
  color: var(--phosphor-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--border);
  text-shadow: 0 0 4px var(--phosphor-glow);
}

#credits a:hover {
  color: var(--phosphor);
}

#credits a:focus-visible {
  outline: 1px dotted var(--phosphor);
  outline-offset: 2px;
}


/* ------------------------------------------------------------------
   Responsive: shrink the bezel on tight screens, and let the editor
   pane's separator follow the stacking in app.css (structural part).
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  #crt {
    --bezel-gap: 10px;
    border-radius: 12px;
  }
  #editor-pane {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}


/* ------------------------------------------------------------------
   prefers-reduced-motion: kill every animation and transition, including
   the one-shot boot flicker and xterm's injected cursor blink.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    animation-duration: 0.001ms !important;
    transition: none !important;
  }
}