/* SERVBG Terminal Academy — GFX track monitor (2026-09-16).
   Loaded after css/app.css. Only applies while a GFX era has mounted the
   monitor (.console-panel.gfx-active). Nothing here touches other eras. */

/* Grid, not flex-row: the console cell gets a bounded height (minmax(0,1fr))
   so it scrolls itself instead of growing past the panel and dragging the
   monitor out of view. #dosTerminal + class beats the ID/combinator rules in
   style.css that pin flex-direction: column. The sr-only h1 is absolutely
   positioned, so it takes no grid cell. */
#dosTerminal.gfx-active,
.console-panel.gfx-active {
  display: grid;
  grid-template-columns: clamp(240px, 40%, 520px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
}
#dosTerminal.gfx-active > .term-tabs-outer { grid-column: 1 / -1; grid-row: 1; }
#dosTerminal.gfx-active > #xtermContainer { display: none; }
#dosTerminal.gfx-active > #gfxMonitor { grid-column: 1; grid-row: 2; }
#dosTerminal.gfx-active > .dos-screen {
  grid-column: 2; grid-row: 2;
  min-width: 0; min-height: 0; height: auto; max-height: 100%;
  overflow-y: auto;
}

#gfxMonitor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  padding: 8px 0 6px 10px;
  box-sizing: border-box;
}
#gfxMonitor[hidden] { display: none !important; }

.gfx-bezel {
  position: relative;
  background: linear-gradient(180deg, #2a2a2a, #161616);
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 10px 10px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  min-height: 0;
}
.gfx-glass {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 100%;
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  transform-origin: 50% 50%;
}
.gfx-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* scanlines + vignette, the CRT layer */
.gfx-glass::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.45) 100%);
  border-radius: 6px;
}
/* faint glass highlight */
.gfx-glass::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 35%);
  border-radius: 6px;
}
.gfx-led {
  position: absolute; right: 14px; bottom: 5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #3f6; box-shadow: 0 0 6px #3f6;
}
.gfx-caption {
  position: absolute; left: 12px; right: 28px; bottom: 1px;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0;
  font-family: inherit; font-size: 10px; letter-spacing: .06em;
  color: #666; text-transform: uppercase;
}
.gfx-caption .gfx-fps { color: #4a4a4a; }

/* phosphor tints (filter on the canvas only, so the bezel stays neutral) */
.gfx-tint-green .gfx-canvas { filter: grayscale(1) sepia(1) hue-rotate(60deg) saturate(3.2) brightness(1.05); }
.gfx-tint-amber .gfx-canvas { filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.05); }
.gfx-tint-mono  .gfx-canvas { filter: grayscale(1) contrast(1.1); }

/* CRT power-on: collapse to a bright line, then bloom */
@keyframes gfx-power-on {
  0%   { transform: scaleY(.01) scaleX(.55); filter: brightness(7); }
  35%  { transform: scaleY(.02) scaleX(1);   filter: brightness(5); }
  65%  { transform: scale(1);                filter: brightness(1.8); }
  100% { transform: scale(1);                filter: brightness(1); }
}
#gfxMonitor.gfx-on .gfx-glass { animation: gfx-power-on .55s ease-out; }

@media (max-width: 932px) {
  #dosTerminal.gfx-active { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
  #dosTerminal.gfx-active > .term-tabs-outer { grid-column: 1; grid-row: 1; }
  #dosTerminal.gfx-active > #gfxMonitor { grid-column: 1; grid-row: 2; padding: 6px 8px 0; max-height: none; }
  .gfx-bezel { padding: 6px 6px 12px; }
  .gfx-glass { max-height: 34vh; }
  #dosTerminal.gfx-active > .dos-screen { grid-column: 1; grid-row: 3; min-height: 120px; max-height: 46vh; }
}