:root {
  --terminal-green: #33ff66;
  --terminal-green-dim: #76b887;
  --terminal-red: #ff3030;
  --terminal-black: #000;
  --crt-bezel: #071008;
}
.terminal-body {
  font-family: "Lucida Console", "Courier New", Courier, monospace;
  font-weight: 900;
  letter-spacing: .035em;
  image-rendering: pixelated;
}
.terminal-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  border: clamp(5px, 1.4vw, 18px) solid #020502;
  border-radius: clamp(10px, 2vw, 28px);
  box-shadow: inset 0 0 90px #000, inset 0 0 24px rgba(51,255,102,.08);
  mix-blend-mode: normal;
}
.terminal-app::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .34;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0, rgba(255,255,255,.035) 1px, rgba(0,0,0,.09) 2px, transparent 4px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.58) 100%);
  animation: crt-noise .18s steps(2,end) infinite;
}
.terminal-stage,
.terminal-boot,
.terminal-access-denied,
.terminal-scene-layer {
  border-radius: clamp(8px, 1.5vw, 22px);
}
.terminal-output,
.terminal-boot-output,
.terminal-prompt,
.terminal-mode-panel {
  text-transform: none;
  text-shadow: 0 0 4px var(--terminal-green), 0 0 11px rgba(51,255,102,.38);
}
.terminal-output {
  font-size: clamp(.94rem, 1.45vw, 1.18rem);
  line-height: 1.55;
}
.terminal-line {
  position: relative;
  max-width: 100%;
  white-space: pre-wrap;
}
.terminal-line.terminal-typing::after {
  content: "█";
  display: inline-block;
  margin-left: .08em;
  animation: block-cursor .72s steps(1,end) infinite;
}
.terminal-input-shell {
  position: relative;
  min-width: 0;
}
.terminal-input-shell input {
  position: relative;
  z-index: 2;
  caret-color: transparent !important;
  letter-spacing: .045em;
}
.terminal-input-cursor {
  position: absolute;
  top: 50%;
  left: calc(var(--input-chars, 0) * .64em);
  width: .62em;
  height: 1.15em;
  transform: translateY(-50%);
  background: var(--terminal-green);
  box-shadow: 0 0 8px var(--terminal-green);
  animation: block-cursor .72s steps(1,end) infinite;
  pointer-events: none;
  opacity: .8;
}
.terminal-prompt:focus-within {
  background: linear-gradient(90deg, rgba(51,255,102,.045), transparent 70%);
}
.terminal-prompt input:focus {
  filter: brightness(1.25);
}
.terminal-access-denied {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-content: center;
  justify-items: start;
  gap: 14px;
  padding: clamp(28px, 8vw, 110px);
  background: #000;
  color: var(--terminal-green);
}
.terminal-access-denied h1 {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 6rem);
  line-height: .9;
}
.terminal-access-denied p { max-width: 720px; line-height: 1.6; }
.terminal-access-code { color: var(--terminal-red); letter-spacing: .18em; }
.terminal-access-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.terminal-access-actions a {
  border: 2px solid var(--terminal-green);
  padding: 12px 16px;
  color: var(--terminal-green);
  text-decoration: none;
}
.terminal-panel-intro { max-width: 780px; color: var(--terminal-green-dim); line-height: 1.6; }
.terminal-discovered-list,
.terminal-history-list {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.terminal-discovered-command {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--terminal-line);
  padding: 18px;
  background: #000;
  color: var(--terminal-green);
  text-align: left;
  cursor: pointer;
}
.terminal-discovered-command:hover,
.terminal-discovered-command:focus-visible {
  border-color: var(--terminal-green);
  background: rgba(51,255,102,.08);
  outline: 0;
}
.terminal-discovered-command span { color: var(--terminal-green-dim); font-size: .74rem; }
.terminal-history-status { color: var(--terminal-green-dim); }
.terminal-history-entry {
  border-left: 4px solid var(--terminal-line);
  border-bottom: 1px solid #093312;
  padding: 12px 14px;
  background: rgba(0,20,5,.42);
}
.terminal-history-entry.command { border-left-color: #caffd4; }
.terminal-history-entry.error { border-left-color: var(--terminal-red); }
.terminal-history-entry > div {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--terminal-green-dim);
  font-size: .68rem;
}
.terminal-history-entry pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--terminal-green);
  font: inherit;
  line-height: 1.45;
}
.terminal-custom-scene {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background-color .08s linear;
}
.scene-custom-active .terminal-scene-visual,
.scene-custom-active .terminal-scene-copy { display: none; }
.scene-face {
  display: block;
  width: min(68vmin, 760px);
  max-height: 78vh;
  object-fit: contain;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.38));
  animation: scene-face-pop .42s steps(2,end) both;
}
.scene-face.porter-face { width: min(72vmin, 820px); }
.scene-face.nina-face { width: min(62vmin, 700px); }
.speaker-table-face,
.speaker-glasses {
  position: absolute;
  color: #fff;
  white-space: pre;
  font-family: "Lucida Console", "Courier New", monospace;
  font-weight: 900;
  text-shadow: 0 0 12px #fff;
}
.speaker-table-face {
  font-size: clamp(1.4rem, 5vw, 5.2rem);
  transform: scale(calc(1 + (var(--pulse) * .08)));
}
.speaker-glasses {
  top: 48%;
  font-size: clamp(1.35rem, 5vw, 5rem);
  transition: left .04s linear, right .04s linear;
}
.speaker-glasses.left-facing { left: 7vw; transform: translateY(-50%); }
.speaker-glasses.right-facing { right: 7vw; transform: translateY(-50%) scaleX(-1); }
.scene-glitching {
  animation: scene-hard-glitch .09s steps(2,end) infinite;
}
.scene-glitching .terminal-custom-scene {
  background: repeating-linear-gradient(90deg,#f00 0 4vw,#000 4vw 8vw,#0f0 8vw 11vw,#00f 11vw 16vw) !important;
  filter: contrast(3) saturate(4);
}
.scene-error-phase .terminal-custom-scene { background: #120000 !important; color: var(--terminal-red); }
.scene-error-copy,
.scene-kidding,
.scene-dots {
  display: grid;
  place-items: center;
  gap: 30px;
  color: inherit;
  text-align: center;
}
.scene-error-copy > strong,
.scene-kidding > strong,
.scene-dots {
  font-size: clamp(3rem, 16vw, 11rem);
  line-height: .8;
  letter-spacing: .08em;
}
.scene-mood-face {
  display: grid;
  place-items: center;
  gap: 0;
  font-size: clamp(1.6rem, 6vw, 5rem);
  white-space: pre;
}
.scene-mood-face b { font-size: 1.25em; line-height: .6; }
.scene-kidding { color: var(--terminal-green); }
.scene-dots { color: var(--terminal-red); }

@media (max-width: 720px) {
  .terminal-frame { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); }
  .terminal-sidebar {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    grid-template-rows: auto;
    border-right: 0;
    border-bottom: 2px solid var(--terminal-green);
  }
  .terminal-sidebar-brand { min-height: 58px; min-width: 72px; border-bottom: 0; border-right: 1px solid var(--terminal-line); font-size: .65rem; }
  .terminal-sidebar-brand .terminal-gem { font-size: 1.6rem; }
  .terminal-mode-nav {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    padding: 0;
  }
  .terminal-mode-button {
    flex: 0 0 auto;
    width: auto;
    min-height: 58px;
    padding: 10px 14px;
    border-left: 0;
    border-bottom: 4px solid transparent;
    font-size: .7rem;
  }
  .terminal-mode-button.active { border-left-color: transparent; border-bottom-color: var(--terminal-green); }
  .terminal-sidebar-meta { display: none; }
  .terminal-stage { grid-template-rows: 38px minmax(0,1fr); }
  .terminal-statusbar { grid-template-columns: 1fr auto; font-size: .6rem; }
  .terminal-statusbar > span:nth-child(2) { display: none; }
  .terminal-menu-panel { padding: 18px 14px 70px; }
  .terminal-mode-heading { display: grid; margin-bottom: 22px; }
  .terminal-heading-actions { justify-content: flex-start; }
  .terminal-rpg-layout { grid-template-columns: 1fr; }
  .terminal-rpg-hud { order: 2; }
  .terminal-prompt { grid-template-columns: auto minmax(0,1fr); min-height: 62px; }
  .terminal-prompt button { grid-column: 1 / -1; min-height: 42px; }
  .terminal-output { padding: 18px 16px 130px; font-size: .86rem; }
  .scene-face { width: min(84vw, 620px); }
  .scene-face.porter-face { width: min(90vw, 680px); }
  .speaker-table-face,
  .speaker-glasses { font-size: clamp(.9rem, 5vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-app::after,
  .terminal-input-cursor,
  .terminal-line.terminal-typing::after { animation: none !important; }
}
@keyframes block-cursor { 0%,48%{opacity:1}49%,100%{opacity:0} }
@keyframes crt-noise { 0%{transform:translateY(0)}50%{transform:translateY(.7px)}100%{transform:translateY(0)} }
@keyframes scene-face-pop { from{transform:scale(.97);opacity:.7}to{transform:scale(1);opacity:1} }
@keyframes scene-hard-glitch { 0%{transform:translate(0);clip-path:inset(0)}25%{transform:translate(-2vw,1vh);clip-path:inset(12% 0 43% 0)}50%{transform:translate(2vw,-1vh);clip-path:inset(57% 0 9% 0)}75%{transform:skewX(8deg);clip-path:inset(28% 0 24% 0)}100%{transform:translate(0);clip-path:inset(0)} }
