/* Farben und Schrift nach WiDaO BRANDSTYLE.md: Schwarz, Phosphorgrün, eine Monospace-Schrift, keine Rundungen. */
:root {
  --black: #000000;
  --green: #39FF14;
  --green-dim: #1E9E0F;
  --green-line: #0E4D07;
  --bezel: 24px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--black);
  color: var(--green);
  font: 16px/1.25 "Share Tech Mono", "Fira Mono", monospace;
}

#rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#rain.off { visibility: hidden; }

a { color: var(--green); }
a:hover, a:focus-visible { background: var(--green); color: var(--black); outline: none; }

.muted { color: var(--green-dim); }
.error { background: var(--green); color: var(--black); padding: 0 8px; justify-self: start; }

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--green);
  background: var(--black);
  color: var(--green);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.btn.primary, .btn:hover, .btn:focus-visible { background: var(--green); color: var(--black); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.btn:disabled { border-color: var(--green-dim); color: var(--green-dim); background: var(--black); cursor: default; }

/* --- Monitor: startet klein, zoomt auf Bildschirmgrösse ------------------- */
/* Desktop und Tablet: Monitor mit Standfuss, Matrix-Regen bleibt rundherum sichtbar.
   Mobile (siehe Media Query unten): Monitor füllt den ganzen Bildschirm. */
.rig {
  position: fixed;
  z-index: 1;
  top: 4vh;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: min(1100px, 90vw);
  height: 76vh;
  /* Startet winzig und unsichtbar, fliegt dann in einem Zug heran (kein Stillstand) */
  transform: scale(0.06);
  opacity: 0;
  transition: transform 2.2s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.6s;
}
.rig.zoomed { transform: none; opacity: 1; }

.monitor {
  position: absolute;
  inset: 0;
  display: flex;
  padding: var(--bezel) var(--bezel) calc(var(--bezel) + 16px);
  background: var(--black);
  border: 1px solid var(--green-dim);
}
.brand { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--green-dim); }
.led { position: absolute; bottom: 14px; right: var(--bezel); width: 8px; height: 8px; border: 1px solid var(--green-dim); }
.rig.on .led { background: var(--green); }

.model { position: absolute; inset: 0; }

.stand { position: absolute; top: 100%; left: 50%; width: 36%; height: 18vh; transform: translateX(-50%); }
.neck { position: absolute; left: 40%; width: 20%; top: 0; bottom: 24px; border: 1px solid var(--green-line); border-top: none; background: var(--black); }
.base { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; border: 1px solid var(--green-dim); background: var(--black); }
.tube { display: none; }

/* --- Bildschirm ------------------------------------------------------------ */
.screen {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--green-line);
  background: var(--black);
  overflow: hidden;
}
.screen.on { background: rgba(0, 0, 0, 0.78); }
.screen > :not(.flash) { visibility: hidden; }
.screen.on > :not(.flash) { visibility: visible; }

/* Einschalten: eine Linie in der Mitte, die sich aufzieht und verlischt */
.flash { position: absolute; inset: 0; z-index: 2; background: var(--green); opacity: 0; pointer-events: none; transform: scale(0, 0.004); }
.screen.powering .flash { animation: power 0.7s ease-out forwards; }
@keyframes power {
  0%   { opacity: 1; transform: scale(0, 0.004); }
  40%  { opacity: 1; transform: scale(1, 0.004); }
  70%  { opacity: 0.6; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}

.out {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-color: var(--green) var(--black);
}
.out [hidden] { display: none !important; }
.out .echo { margin-top: 12px; }
.out .logo { font: inherit; line-height: 18px; white-space: pre; overflow-x: auto; margin-bottom: 8px; }
.out .row-btn {
  font: inherit;
  text-align: left;
  white-space: pre;
  background: none;
  border: none;
  color: var(--green);
  min-height: 32px;
  padding: 0 8px 0 0;
  cursor: pointer;
  overflow-x: auto;
  scrollbar-width: none;
}
.out .row-btn:hover, .out .row-btn:focus-visible { background: var(--green); color: var(--black); outline: none; }
.out .row-btn::before { content: "  "; }
.out .row-btn:hover::before, .out .row-btn:focus-visible::before { content: "> "; }
.out .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }

.input-line { display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--green-line); }
.input-line label { white-space: nowrap; }
.input-line input { flex: 1; min-width: 0; min-height: 32px; background: none; border: none; outline: none; color: var(--green); caret-color: var(--green); font: inherit; }

.keys { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 12px; border-top: 1px solid var(--green); }

.skip { position: fixed; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 14px; }
body:not(.intro) .skip { display: none; }

/* Übersprungenes Intro: alles sofort im Endzustand */
.instant, .instant * { transition: none !important; animation: none !important; }

/* --- 3D-Gehäuse und CRT-Modus: nur Desktop und Tablet ---------------------- */
/* Registrierte Variablen, damit der Wechsel 16:9 <-> 4:3 weich animiert */
@property --w { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --ratio { syntax: "<number>"; inherits: true; initial-value: 0.5625; }
@property --k1 { syntax: "<number>"; inherits: true; initial-value: 0.035; }
@property --k2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --bezel { syntax: "<length>"; inherits: true; initial-value: 24px; }
@property --crt { syntax: "<number>"; inherits: true; initial-value: 0; }

@media (min-width: 720px) {
  .rig {
    /* Flach: moderner 16:9-Bildschirm mit dünnem Gehäuse */
    --ratio: 0.5625;
    --w: min(1100px, 90vw, calc(76vh / 0.5625));
    --k1: 0.035;              /* Gehäusetiefe relativ zur Breite */
    --k2: 0;                  /* Tiefe der Bildröhre dahinter */
    --crt: 0;                 /* 0..1, blendet Scanlines und Glühen ein */
    --d1: calc(var(--w) * var(--k1));
    --d2: calc(var(--w) * var(--k2));
    --case-top: #12331a;
    --case-side: #0b240f;
    --case-bottom: #061408;
    width: var(--w);
    height: calc(var(--w) * var(--ratio));
    top: max(3vh, calc((100vh - var(--w) * var(--ratio)) / 2 - 7vh));
    perspective: 1800px;
    transition:
      transform 2.2s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.6s,
      --w 0.9s ease-in-out, --ratio 0.9s ease-in-out, --k1 0.9s ease-in-out, --k2 0.9s ease-in-out,
      --bezel 0.9s ease-in-out, --crt 0.9s ease-in-out, top 0.9s ease-in-out;
  }

  .model { transform-style: preserve-3d; transform: rotateY(var(--ry, 0deg)); }
  .box3d { transform-style: preserve-3d; }
  .monitor, .model, .stand { cursor: grab; }
  .screen { user-select: none; }
  .screen button, .screen a { cursor: pointer; -webkit-user-drag: none; }
  .input-line input { cursor: text; }
  #rain { cursor: grab; }
  body.dragging, body.dragging * { cursor: grabbing !important; user-select: none; }

  /* Flächen eines Quaders, die JS an jedes .box3d hängt; Tiefe aus --d */
  .face { position: absolute; border: 1px solid var(--green-dim); pointer-events: none; background: var(--case-side); }
  .face.l { top: 0; left: 0; width: var(--d); height: 100%; transform-origin: left center; transform: rotateY(90deg); }
  .face.r { top: 0; right: 0; width: var(--d); height: 100%; transform-origin: right center; transform: rotateY(-90deg); }
  .face.t { top: 0; left: 0; width: 100%; height: var(--d); transform-origin: center top; transform: rotateX(-90deg); background: var(--case-top); }
  .face.b { bottom: 0; left: 0; width: 100%; height: var(--d); transform-origin: center bottom; transform: rotateX(90deg); background: var(--case-bottom); }
  .face.k { inset: 0; transform: translateZ(calc(-1 * var(--d))) rotateY(180deg); background: var(--case-bottom); }

  .monitor { --d: var(--d1); }
  .stand { transform-style: preserve-3d; transition: height 0.9s ease-in-out, width 0.9s ease-in-out; }
  .neck { transition: left 0.9s ease-in-out, width 0.9s ease-in-out; }
  .neck { --d: 40px; transform: translateZ(calc((var(--d1) + var(--d2)) * -0.5 + 20px)); }
  .base { --d: calc(var(--d1) + var(--d2) + 40px); transform: translateZ(40px); }

  /* CRT: 4:3, tiefes Gehäuse mit Bildröhre, Scanlines, Glühen, gewölbtes Glas */
  .rig.crt {
    --ratio: 0.75;
    --w: min(1100px, 90vw, calc(76vh / 0.75));
    --k1: 0.1;
    --k2: 0.6;
    --crt: 1;
    --bezel: 44px;
  }
  /* Die Röhre ist immer da; im flachen Modus hat sie die Tiefe 0 und verschwindet im Gehäuse */
  .tube {
    display: block;
    position: absolute;
    left: 9%;
    right: 9%;
    top: 7%;
    bottom: 12%;
    --d: var(--d2);
    transform: translateZ(calc(-1 * var(--d1)));
  }
  .tube .face.k { background: repeating-linear-gradient(90deg, var(--case-bottom) 0 10px, var(--black) 10px 14px); }
  .rig.crt .stand { height: 7vh; width: 50%; }
  .rig.crt .neck { left: 30%; width: 40%; }
  .rig.crt .brand { font-size: 14px; bottom: 14px; }

  .screen {
    border-radius: calc(28px * var(--crt)) / calc(22px * var(--crt));
    box-shadow: inset 0 0 80px rgba(0, 0, 0, calc(0.9 * var(--crt)));
    text-shadow: 0 0 4px rgba(57, 255, 20, calc(0.55 * var(--crt)));
  }
  .screen::after, .screen::before { opacity: var(--crt); }
  .screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background:
      repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  }
  /* Langsam durchlaufender heller Balken wie bei einer alten Röhre */
  .screen::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 25%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(57, 255, 20, 0.05), transparent);
    animation: roll 7s linear infinite;
  }
  @keyframes roll { from { top: -25%; } to { top: 100%; } }
}

@media (max-width: 719px) {
  .face, .wide-only { display: none; }
  :root { --bezel: 8px; }
  .rig { inset: 0; width: auto; height: auto; }
  body { font-size: 14px; }
  .out { padding: 12px; }
  .out .logo { font-size: 8px; line-height: 10px; }
  .input-line, .keys { padding-left: 12px; padding-right: 12px; }
  .keys .btn { padding: 8px 10px; }
  .brand { display: none; }
}