:root {
  --terminal-green: #00ff41;
  --terminal-green-dim: #57a86a;
  --terminal-red: #ff3030;
  --terminal-amber: #ffd447;
  --terminal-blue: #3f7cff;
  --terminal-black: #000;
  --terminal-panel: #020602;
  --terminal-line: #0d5f22;
  --terminal-shadow: rgba(0,255,65,.34);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: #000; }
body { overflow: hidden; }
button, input { font: inherit; }
button { touch-action: manipulation; }
.terminal-body {
  color: var(--terminal-green);
  background: #000;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}
.terminal-app { position: fixed; inset: 0; background: #000; }
.terminal-boot {
  position: absolute; inset: 0; z-index: 10; display: grid; align-content: center;
  padding: clamp(22px, 6vw, 90px); background: #000; overflow: hidden;
}
.terminal-boot::after, .terminal-stage::after, .terminal-scene-layer::after {
  content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 20;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: screen;
}
.terminal-boot-output {
  min-height: 18rem; margin: 0; white-space: pre-wrap; line-height: 1.55;
  color: var(--terminal-green); text-shadow: 0 0 9px var(--terminal-shadow);
  font-size: clamp(.82rem, 1.5vw, 1.08rem);
}
.terminal-skip-boot {
  position: absolute; right: 18px; bottom: 18px; border: 1px solid var(--terminal-line);
  color: var(--terminal-green-dim); background: #000; padding: 9px 12px; cursor: pointer;
}
.terminal-frame { position: absolute; inset: 0; display: grid; grid-template-columns: 190px minmax(0,1fr); background: #000; }
.terminal-sidebar {
  position: relative; z-index: 2; min-width: 0; display: grid; grid-template-rows: auto 1fr auto;
  border-right: 2px solid var(--terminal-green); background: #010301;
  box-shadow: 8px 0 30px rgba(0,255,65,.08);
}
.terminal-sidebar-brand {
  display: grid; place-items: center; gap: 2px; min-height: 132px; border-bottom: 1px solid var(--terminal-line);
  font-size: 1.1rem; letter-spacing: .18em; text-shadow: 0 0 10px var(--terminal-shadow);
}
.terminal-gem { font-size: 3.1rem; line-height: 1; }
.terminal-mode-nav { display: grid; align-content: start; padding-top: 20px; }
.terminal-mode-button {
  width: 100%; min-height: 58px; padding: 12px 18px; border: 0; border-left: 5px solid transparent;
  color: var(--terminal-green-dim); background: transparent; text-align: left; letter-spacing: .09em; cursor: pointer;
}
.terminal-mode-button:hover, .terminal-mode-button:focus-visible, .terminal-mode-button.active {
  color: var(--terminal-green); border-left-color: var(--terminal-green); background: rgba(0,255,65,.08); outline: none;
}
.terminal-sidebar-meta {
  display: grid; gap: 7px; padding: 18px; border-top: 1px solid var(--terminal-line);
  color: var(--terminal-green-dim); font-size: .7rem; letter-spacing: .12em;
}
.terminal-stage { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-rows: 42px minmax(0,1fr); overflow: hidden; background: #000; }
.terminal-statusbar {
  position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px;
  padding: 0 10px 0 16px; border-bottom: 1px solid var(--terminal-line); color: var(--terminal-green-dim);
  background: #010401; font-size: .74rem; letter-spacing: .1em;
}
.terminal-display-link {
  border: 1px solid var(--terminal-line); color: var(--terminal-green); background: #000;
  padding: 5px 8px; cursor: pointer; font-size: .68rem;
}
.terminal-mode-panel { position: relative; z-index: 2; min-width: 0; min-height: 0; }
.terminal-console-panel { display: grid; grid-template-rows: minmax(0,1fr) auto; }
.terminal-output {
  min-height: 0; overflow: auto; padding: clamp(20px, 4vw, 56px); padding-bottom: 150px;
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; font-size: clamp(.86rem, 1.35vw, 1.05rem);
  scrollbar-color: var(--terminal-green) #001407; text-shadow: 0 0 9px var(--terminal-shadow);
}
.terminal-line { margin: 0 0 .75rem; }
.terminal-line.command { color: #caffd4; }
.terminal-line.system, .terminal-line.dim { color: var(--terminal-green-dim); }
.terminal-line.error { color: var(--terminal-red); text-shadow: 0 0 9px rgba(255,0,0,.65); }
.terminal-face {
  position: absolute; right: clamp(22px, 6vw, 90px); bottom: 82px; width: clamp(148px, 22vw, 250px);
  opacity: .8; pointer-events: none; color: var(--terminal-green); filter: drop-shadow(0 0 10px var(--terminal-shadow));
}
.terminal-face svg, .terminal-message-face { display: block; width: 100%; height: auto; overflow: visible; }
.terminal-face-eye { fill: none; stroke: currentColor; stroke-width: 6; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.terminal-face-smile { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.terminal-prompt {
  position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px;
  min-height: 66px; padding: 9px 16px; border-top: 2px solid var(--terminal-green); background: #010401;
}
.terminal-prompt label { font-size: 1.5rem; }
.terminal-prompt input {
  width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--terminal-green);
  caret-color: var(--terminal-green); font-size: 1rem; text-transform: none; text-shadow: 0 0 8px var(--terminal-shadow);
}
.terminal-prompt button, .terminal-mode-heading button, .terminal-scene-tools button, .terminal-scene-controls button {
  border: 1px solid var(--terminal-green); color: var(--terminal-green); background: #000; padding: 9px 13px; cursor: pointer;
}
.terminal-prompt button:hover, .terminal-prompt button:focus-visible,
.terminal-mode-heading button:hover, .terminal-mode-heading button:focus-visible,
.terminal-scene-tools button:hover, .terminal-scene-tools button:focus-visible,
.terminal-scene-controls button:hover, .terminal-scene-controls button:focus-visible {
  color: #000; background: var(--terminal-green); outline: none;
}
.terminal-menu-panel { overflow: auto; padding: clamp(20px, 4vw, 56px); }
.terminal-mode-heading { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 34px; }
.terminal-mode-heading p { margin: 0 0 6px; color: var(--terminal-green-dim); letter-spacing: .12em; }
.terminal-mode-heading h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 3.4rem); line-height: 1; text-shadow: 0 0 10px var(--terminal-shadow); }
.terminal-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.terminal-menu-list { display: grid; gap: 8px; margin-bottom: 24px; }
.terminal-menu-row {
  display: grid; grid-template-columns: minmax(110px,.35fr) 1fr; gap: 20px; align-items: center; width: 100%;
  border: 1px solid var(--terminal-line); color: var(--terminal-green-dim); background: #010401; padding: 18px; text-align: left;
}
.terminal-menu-row.active { border-color: var(--terminal-green); color: var(--terminal-green); box-shadow: 0 0 22px rgba(0,255,65,.09); }
.terminal-detail-card, .terminal-rpg-card {
  border: 1px solid var(--terminal-line); background: #010401; padding: clamp(20px, 4vw, 38px); line-height: 1.6;
}
.terminal-detail-card h2 { margin: 8px 0 16px; font-size: clamp(1.1rem, 2.5vw, 1.75rem); }
.terminal-detail-label { color: var(--terminal-red); }
.terminal-detail-reward { margin-top: 28px; font-size: 1.2rem; }
.terminal-choice-list { display: grid; gap: 10px; margin-top: 26px; }
.terminal-choice-list button {
  border: 1px solid var(--terminal-line); color: var(--terminal-green); background: #000; padding: 14px; text-align: left; cursor: pointer;
}
.terminal-choice-list button:hover, .terminal-choice-list button:focus-visible { border-color: var(--terminal-green); background: rgba(0,255,65,.08); outline: none; }
.terminal-choice-list button[disabled] { color: #487452; border-color: #183b21; cursor: not-allowed; background: #020402; }
.terminal-choice-list button[disabled]::before { content: "LOCKED // "; color: var(--terminal-red); }
.terminal-piano-help, .terminal-piano-status { color: var(--terminal-green-dim); }
.terminal-piano-keys { display: grid; grid-template-columns: repeat(9,minmax(42px,1fr)); gap: 7px; margin: 42px auto 24px; max-width: 980px; }
.terminal-piano-key {
  min-height: clamp(150px, 35vh, 360px); border: 1px solid var(--terminal-green); color: var(--terminal-green);
  background: linear-gradient(#031006,#000); display: grid; align-content: end; justify-items: center; gap: 8px; padding: 18px 6px; cursor: pointer;
}
.terminal-piano-key.active { color: #000; background: var(--terminal-green); box-shadow: 0 0 25px var(--terminal-shadow); }
.terminal-piano-key span { font-size: .72rem; }
.terminal-message-card { min-height: 50vh; display: grid; place-items: center; text-align: center; }
.terminal-message-face { max-width: 290px; color: var(--terminal-green); filter: drop-shadow(0 0 10px var(--terminal-shadow)); }
.terminal-message-card p { max-width: 760px; }
.terminal-noscript { padding: 30px; color: var(--terminal-red); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.terminal-rpg-layout { display: grid; grid-template-columns: minmax(220px, .32fr) minmax(0,1fr); gap: 18px; }
.terminal-rpg-hud { border: 1px solid var(--terminal-line); background: #010401; padding: 18px; }
.terminal-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.terminal-stat-grid span { border-bottom: 1px dotted var(--terminal-line); padding-bottom: 6px; color: var(--terminal-green-dim); }
.terminal-stat-grid strong { color: var(--terminal-green); float: right; }
.terminal-rpg-inventory, .terminal-rpg-objective { margin-top: 24px; }
.terminal-rpg-inventory > p, .terminal-rpg-objective > p { margin: 0 0 8px; color: var(--terminal-green-dim); letter-spacing: .1em; }
.terminal-rpg-inventory span { display: block; margin-bottom: 6px; }
.terminal-rpg-save-state { margin: 24px 0 0; font-size: .7rem; color: var(--terminal-green-dim); }
.terminal-rpg-card { min-height: 430px; }
.terminal-rpg-battle { margin-top: 20px; border: 1px solid var(--terminal-red); padding: 14px; color: #ffd6d6; background: rgba(255,48,48,.06); }
.terminal-rpg-battle strong { color: var(--terminal-red); }
.terminal-rpg-log { min-height: 3.2em; margin-top: 18px; color: var(--terminal-amber); white-space: pre-wrap; }
.terminal-rpg-log:empty { display: none; }

.terminal-scene-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.terminal-scene-list button {
  min-height: 92px; border: 1px solid var(--terminal-line); color: var(--terminal-green); background: #000;
  padding: 16px; text-align: left; cursor: pointer;
}
.terminal-scene-list button:hover, .terminal-scene-list button:focus-visible { border-color: var(--terminal-green); background: rgba(0,255,65,.08); outline: 0; }
.terminal-scene-list strong, .terminal-scene-list span { display: block; }
.terminal-scene-list span { margin-top: 7px; color: var(--terminal-green-dim); font-size: .75rem; }
.terminal-scene-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.terminal-scene-layer {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  color: var(--terminal-green); background: #000;
}
.terminal-scene-visual { position: absolute; inset: 0; overflow: hidden; }
.scene-grid {
  position: absolute; inset: -30%; opacity: .35;
  background-image: linear-gradient(rgba(0,255,65,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,65,.16) 1px, transparent 1px);
  background-size: 42px 42px; transform: perspective(500px) rotateX(58deg) translateY(22%); transform-origin: center bottom;
  animation: scene-grid-drift 5s linear infinite;
}
.scene-orb { position: absolute; width: 42vmin; aspect-ratio: 1; border: 4px solid currentColor; border-radius: 50%; opacity: .2; filter: blur(1px); }
.scene-orb-a { left: -8vmin; top: -10vmin; animation: scene-orbit-a 5s ease-in-out infinite alternate; }
.scene-orb-b { right: -10vmin; bottom: -12vmin; animation: scene-orbit-b 4s ease-in-out infinite alternate; }
.scene-symbol {
  position: absolute; inset: 0; display: grid; place-items: center; font-size: min(42vw, 42vh);
  opacity: .18; text-shadow: 0 0 40px currentColor; animation: scene-symbol-pulse 1.8s ease-in-out infinite;
}
.scene-equalizer {
  position: absolute; left: 4vw; right: 4vw; bottom: 7vh; height: 28vh; display: flex; align-items: end; justify-content: center; gap: clamp(3px, .8vw, 16px);
}
.scene-equalizer i { display: block; width: min(2vw, 26px); min-width: 4px; height: 24%; background: currentColor; opacity: .5; box-shadow: 0 0 12px currentColor; animation: scene-bar .7s ease-in-out infinite alternate; }
.terminal-scene-copy { position: relative; z-index: 3; max-width: 90vw; text-align: center; text-shadow: 0 0 20px currentColor; }
.terminal-scene-copy p { letter-spacing: .2em; }
.terminal-scene-copy h2 { margin: .2em 0; font-size: clamp(2rem, 9vw, 8rem); line-height: .9; }
.terminal-scene-controls { position: absolute; z-index: 30; right: 14px; top: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.terminal-scene-layer[data-scene="wannacry"], .terminal-scene-layer[data-scene="danger"] { color: var(--terminal-red); }
.terminal-scene-layer[data-scene="blue_shell"] { color: var(--terminal-blue); }
.terminal-scene-layer[data-scene="wombo_combo"] { color: var(--terminal-amber); }
.terminal-scene-layer[data-scene="dance_frog"] .scene-symbol { animation: scene-frog-bounce .48s ease-in-out infinite alternate; }
.terminal-scene-layer[data-scene="wannacry"] .terminal-scene-copy { animation: scene-glitch .22s steps(2,end) infinite; }
.terminal-scene-layer[data-scene="danger"] { background: repeating-linear-gradient(135deg,#000 0,#000 36px,#190000 36px,#190000 72px); animation: scene-danger-pulse .7s ease-in-out infinite alternate; }
.terminal-scene-layer[data-scene="blue_shell"] .scene-orb { border-width: 12px; animation-duration: 1s; }
.terminal-scene-layer[data-scene="wombo_combo"] .scene-symbol { animation-duration: .35s; }
@keyframes scene-grid-drift { to { background-position: 0 84px, 84px 0; } }
@keyframes scene-orbit-a { to { transform: translate(25vw, 18vh) scale(.6); } }
@keyframes scene-orbit-b { to { transform: translate(-22vw, -14vh) scale(1.25); } }
@keyframes scene-symbol-pulse { from { transform: scale(.9); opacity: .1; } to { transform: scale(1.08); opacity: .28; } }
@keyframes scene-bar { from { height: 10%; } to { height: 95%; } }
@keyframes scene-frog-bounce { from { transform: translateY(6vh) rotate(-3deg); } to { transform: translateY(-6vh) rotate(3deg); } }
@keyframes scene-glitch { 0% { transform: translate(0); } 33% { transform: translate(4px,-2px); } 66% { transform: translate(-4px,2px); } }
@keyframes scene-danger-pulse { from { filter: brightness(.8); } to { filter: brightness(1.5); } }

@media (max-width: 720px) {
  .terminal-frame { grid-template-columns: 1fr; grid-template-rows: 58px minmax(0,1fr); }
  .terminal-sidebar { grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: 1fr; border-right: 0; border-bottom: 2px solid var(--terminal-green); }
  .terminal-sidebar-brand { min-height: 0; border-bottom: 0; border-right: 1px solid var(--terminal-line); padding: 5px 10px; gap: 0; font-size: .65rem; }
  .terminal-gem { font-size: 1.45rem; }
  .terminal-mode-nav { display: flex; overflow-x: auto; padding: 0; scrollbar-width: none; }
  .terminal-mode-nav::-webkit-scrollbar { display: none; }
  .terminal-mode-button { flex: 0 0 auto; min-height: 56px; border-left: 0; border-bottom: 4px solid transparent; padding: 8px 12px; font-size: .72rem; }
  .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: .56rem; padding-left: 10px; }
  .terminal-statusbar > span:nth-child(2) { display: none; }
  .terminal-display-link { font-size: .55rem; padding: 4px 6px; }
  .terminal-output { padding: 18px 14px 130px; }
  .terminal-face { right: 14px; bottom: 76px; width: 154px; }
  .terminal-prompt { grid-template-columns: auto minmax(0,1fr); gap: 8px; padding: 8px 10px; }
  .terminal-prompt button { display: none; }
  .terminal-menu-panel { padding: 20px 14px; }
  .terminal-mode-heading { display: grid; margin-bottom: 22px; }
  .terminal-mode-heading button { justify-self: start; }
  .terminal-heading-actions { justify-content: flex-start; }
  .terminal-menu-row { grid-template-columns: 1fr; gap: 5px; }
  .terminal-piano-keys { grid-template-columns: repeat(3,1fr); }
  .terminal-piano-key { min-height: 90px; }
  .terminal-rpg-layout { grid-template-columns: 1fr; }
  .terminal-rpg-hud { padding: 12px; }
  .terminal-stat-grid { grid-template-columns: repeat(3,1fr); font-size: .8rem; }
  .terminal-stat-grid strong { float: none; display: block; margin-top: 2px; }
  .terminal-rpg-inventory, .terminal-rpg-objective { margin-top: 14px; }
  .terminal-rpg-card { min-height: 360px; }
  .terminal-scene-list { grid-template-columns: 1fr; }
  .terminal-scene-controls { left: 10px; right: 10px; top: max(10px, env(safe-area-inset-top)); justify-content: center; }
  .terminal-scene-copy { margin-top: 7vh; }
  .terminal-scene-copy h2 { font-size: clamp(2.2rem, 15vw, 5rem); }
  .scene-equalizer { bottom: 4vh; height: 23vh; }
}
@media (prefers-reduced-motion: reduce) {
  .terminal-boot::after, .terminal-stage::after, .terminal-scene-layer::after { display: none; }
  .terminal-output, .terminal-face, .terminal-mode-heading h1 { text-shadow: none; }
  .scene-grid, .scene-orb, .scene-symbol, .scene-equalizer i, .terminal-scene-copy, .terminal-scene-layer { animation: none !important; }
}