/* GLITCH INC. — CRT-Phosphor-Terminal
   CSS = dauerhafte Ambience (Scanlines, Flicker, Instabilitäts-Level)
   GSAP = Event-Choreografie (Kaskaden, Shake, Floats) → game.js        */

:root {
  --bg: #030706;
  --panel: #06100b;
  --panel-2: #081510;
  --ink: #7dffbe;
  --ink-dim: #3a7a5f;
  --hot: #ff2d7a;
  --amber: #ffb84d;
  --cyan: #4de8ff;
  --line: #103324;
  --font-display: 'VT323', monospace;
  --font-body: 'IBM Plex Mono', ui-monospace, monospace;
}

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

html { color-scheme: dark; }

body {
  min-height: 100dvh;
  background:
    radial-gradient(120% 90% at 50% 0%, #0a1a12 0%, var(--bg) 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  padding: 20px clamp(12px, 3vw, 40px) 40px;
}

/* ---------- CRT-Overlay ---------- */

.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.22) 3px
    ),
    radial-gradient(120% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.55) 100%);
  animation: crt-flicker 4s infinite steps(60);
}

.crt::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  background: linear-gradient(to bottom, transparent, rgba(125, 255, 190, 0.04), transparent);
  animation: crt-band 9s linear infinite;
}

@keyframes crt-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.82; }
  94% { opacity: 1; }
}

@keyframes crt-band {
  0% { top: -90px; }
  100% { top: 100%; }
}

/* ---------- Header / HUD ---------- */

header { max-width: 1440px; margin: 0 auto 18px; }

.logo {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 72px);
  letter-spacing: 4px;
  line-height: 0.9;
  position: relative;
  display: inline-block;
  text-shadow: 0 0 18px rgba(125, 255, 190, 0.35);
}

.logo::before,
.logo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0.8;
  pointer-events: none;
}

.logo::before {
  color: var(--hot);
  z-index: -1;
  animation: rgb-split-a 3.1s infinite steps(1);
}

.logo::after {
  color: var(--cyan);
  z-index: -2;
  animation: rgb-split-b 2.7s infinite steps(1);
}

@keyframes rgb-split-a {
  0%, 100% { transform: translate(0, 0); clip-path: none; }
  7% { transform: translate(-3px, 1px); clip-path: inset(20% 0 55% 0); }
  9% { transform: translate(0, 0); clip-path: none; }
  53% { transform: translate(2px, -1px); clip-path: inset(60% 0 10% 0); }
  55% { transform: translate(0, 0); clip-path: none; }
}

@keyframes rgb-split-b {
  0%, 100% { transform: translate(0, 0); clip-path: none; }
  13% { transform: translate(3px, -1px); clip-path: inset(40% 0 30% 0); }
  15% { transform: translate(0, 0); clip-path: none; }
  71% { transform: translate(-2px, 2px); clip-path: inset(5% 0 80% 0); }
  73% { transform: translate(0, 0); clip-path: none; }
}

.tagline {
  color: var(--ink-dim);
  font-size: 12px;
  margin: 2px 0 16px;
}

.hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.hud-item {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 10px 14px 8px;
}

.hud-num {
  font-family: var(--font-display);
  font-size: 32px;
  display: block;
  line-height: 1;
  text-shadow: 0 0 12px rgba(125, 255, 190, 0.3);
}

.hud-item label {
  color: var(--ink-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hud-cores .hud-num { color: var(--cyan); text-shadow: 0 0 12px rgba(77, 232, 255, 0.4); }

.hud-instab .bar {
  height: 14px;
  border: 1px solid var(--line);
  background: #04120b;
  margin: 6px 0 6px;
  overflow: hidden;
}

#instab-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ink), var(--amber) 60%, var(--hot));
  transition: width 0.3s ease-out;
}

/* ---------- Layout ---------- */

main {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: 14px;
  align-items: start;
}

.panel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
  padding: 14px;
}

.panel h2 {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

/* ---------- Feed ---------- */

.feed-panel { min-height: 320px; }

#feed {
  list-style: none;
  max-height: 62vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

#feed li {
  padding: 5px 2px;
  border-bottom: 1px dashed rgba(16, 51, 36, 0.6);
  color: var(--ink-dim);
  font-size: 12.5px;
}

#feed li.casc { color: var(--amber); }
#feed li.casc-final {
  color: var(--hot);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(255, 45, 122, 0.5);
}

/* ---------- Core: Anomalie-Karte ---------- */

.core-panel { display: flex; flex-direction: column; gap: 14px; }

.map-status {
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: 1px;
}

.map-stage {
  position: relative;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line);
  background: radial-gradient(90% 90% at 50% 40%, #071812 0%, #04100a 75%);
  overflow: hidden;
}

.map-stage canvas,
.map-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* SVG-Text lebt im viewBox-Koordinatenraum (120×60) — px = Karteneinheiten */
.map-label {
  font-family: var(--font-display);
  font-size: 2.6px;
  fill: var(--ink);
  paint-order: stroke;
  stroke: rgba(3, 7, 6, 0.8);
  stroke-width: 0.5px;
}

.beacon-label { fill: var(--cyan); font-size: 2.2px; opacity: 0.85; }

/* Events blockieren keine Klicks — nur Städte sind interaktiv */
#map-fx { pointer-events: none; }

.city-g { pointer-events: auto; cursor: pointer; }
.city-hit { fill: transparent; }
/* Füllfarbe kommt als Attribut aus map.js (Dissonanz-Level) — hier nur Verhalten */
.city-dot { transition: r 0.15s; }
.city-name { opacity: 0; transition: opacity 0.15s; }
.city-g:hover .city-name { opacity: 1; }
.city-g:hover .city-dot { stroke: var(--hot); stroke-width: 0.3px; }
.city-dot.lv-max { filter: drop-shadow(0 0 1px rgba(255, 45, 122, 0.9)); }

.moon-g { pointer-events: auto; }
.moon-g .city-name { text-anchor: middle; }
.moon-g:hover .city-name { opacity: 1; }

.drone { pointer-events: auto; cursor: crosshair; }

.combo {
  position: absolute;
  top: 8px;
  left: 12px;
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--amber);
  text-shadow: 0 0 12px rgba(255, 184, 77, 0.6);
  pointer-events: none;
}
.combo[hidden] { display: none; }

.hotspot-label { fill: var(--hot); font-size: 2.4px; }
.mission-label { fill: var(--amber); font-size: 2.2px; }
.run-label { fill: var(--amber); font-size: 3.2px; }
.map-float { font-family: var(--font-display); font-size: 3px; paint-order: stroke; stroke: rgba(3, 7, 6, 0.8); stroke-width: 0.5px; }

/* ---------- Core: Aktionen ---------- */

.core-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.daily { border: 1px solid var(--line); padding: 10px 12px; }
.daily h2 { font-size: 16px; margin-bottom: 6px; }
.daily-line { font-size: 12.5px; }
.daily-line strong { color: var(--amber); }
.daily-stats { color: var(--ink-dim); font-size: 12px; margin: 4px 0 8px; }

.core-stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 12px 0;
}

#float-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.float-num {
  position: absolute;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  text-shadow: 0 0 10px rgba(125, 255, 190, 0.6);
  pointer-events: none;
  white-space: nowrap;
}

.float-num.crit { color: var(--hot); font-size: 34px; text-shadow: 0 0 14px rgba(255, 45, 122, 0.7); }

#glitch-btn {
  cursor: pointer;
  font-family: var(--font-display);
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(125, 255, 190, 0.08), rgba(125, 255, 190, 0.02));
  border: 1px solid var(--ink-dim);
  clip-path: polygon(12% 0, 88% 0, 100% 30%, 100% 70%, 88% 100%, 12% 100%, 0 70%, 0 30%);
  padding: 20px 36px;
  display: grid;
  gap: 2px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  animation: btn-pulse 2.4s ease-in-out infinite;
}

#glitch-btn:hover {
  border-color: var(--hot);
  background: linear-gradient(180deg, rgba(255, 45, 122, 0.12), rgba(255, 45, 122, 0.03));
}

#glitch-btn .btn-glyph { font-size: 32px; line-height: 1; color: var(--hot); }
#glitch-btn .btn-label { font-size: 21px; letter-spacing: 3px; }
#glitch-btn .btn-val { font-size: 15px; color: var(--ink-dim); }

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 45, 122, 0); }
  50% { box-shadow: 0 0 34px rgba(255, 45, 122, 0.25); }
}

/* ---------- Buttons ---------- */

.ghost-btn {
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--cyan);
  background: transparent;
  border: 1px solid var(--line);
  padding: 6px 12px;
}
.ghost-btn:hover { border-color: var(--cyan); }
.ghost-btn.small { font-size: 10px; color: var(--ink-dim); }

.ad-ghost { color: var(--amber); border-color: rgba(255, 184, 77, 0.4); margin-left: 6px; }
.ad-ghost:hover:not(:disabled) { border-color: var(--amber); }
.ad-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

.danger-btn {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--hot);
  background: rgba(255, 45, 122, 0.06);
  border: 1px solid var(--hot);
  padding: 12px;
  text-shadow: 0 0 10px rgba(255, 45, 122, 0.5);
}
.danger-btn:hover { background: rgba(255, 45, 122, 0.16); }

/* ---------- Shop ---------- */

/* Kataloge scrollen statt das Layout zu sprengen */
#shop-gens, #shop-ups {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
#shop-gens { max-height: 42vh; }
#shop-ups { max-height: 26vh; }

.gen-row, .up-row {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-left: none;
  border-right: none;
  border-top: none;
  padding: 9px 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
}

.gen-row:hover:not(:disabled), .up-row:hover:not(:disabled) {
  background: rgba(125, 255, 190, 0.06);
}

.gen-row:disabled, .up-row:disabled { cursor: not-allowed; opacity: 0.45; }

.g-name { font-weight: 700; font-size: 13px; }
.g-name em { font-style: normal; color: var(--cyan); margin-left: 6px; }
.g-cost { font-family: var(--font-display); font-size: 18px; color: var(--amber); text-align: right; }
.g-flavor { grid-column: 1 / -1; color: var(--ink-dim); font-size: 11.5px; font-style: italic; }
.g-rate { grid-column: 1 / -1; color: var(--ink-dim); font-size: 11px; }

.up-row .g-name { color: var(--cyan); }

.gen-row.locked .g-name, .up-row.locked .g-name { color: var(--hot); }
.gen-row.locked .g-cost, .up-row.locked .g-cost { color: var(--hot); font-size: 14px; letter-spacing: 1px; }
.gen-row.locked:hover, .up-row.locked:hover { background: rgba(255, 45, 122, 0.07); }

/* ---------- Footer / Toast ---------- */

footer {
  max-width: 1440px;
  margin: 18px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink-dim);
  font-size: 11px;
}

#toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: var(--panel-2);
  border: 1px solid var(--amber);
  color: var(--amber);
  padding: 10px 20px;
  font-size: 13px;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.7);
}

/* ---------- Modal (Missionen, Kisten) ---------- */

/* display:grid würde das hidden-Attribut übersteuern — explizit ausblenden */
#modal[hidden], #ad-overlay[hidden] { display: none; }

#modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: rgba(2, 5, 4, 0.8);
  backdrop-filter: blur(2px);
}

.modal-box {
  width: min(480px, 92vw);
  border: 1px solid var(--amber);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8), inset 0 0 40px rgba(0, 0, 0, 0.5);
  padding: 20px;
}

.modal-box h3 {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--amber);
  margin-bottom: 8px;
}

.modal-box p { font-size: 13px; margin-bottom: 8px; }
.modal-box .m-flavor { color: var(--ink-dim); font-style: italic; }
.modal-box .m-meta { color: var(--ink); }
.modal-box .m-meta strong { color: var(--amber); }

.modal-actions { display: grid; gap: 8px; margin-top: 14px; }

.modal-btn {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  padding: 10px;
  background: rgba(125, 255, 190, 0.07);
  border: 1px solid var(--ink-dim);
  color: var(--ink);
}
.modal-btn:hover:not(:disabled) { border-color: var(--ink); background: rgba(125, 255, 190, 0.14); }
.modal-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.modal-btn.ad {
  border-color: var(--amber);
  color: var(--amber);
  background: rgba(255, 184, 77, 0.07);
}
.modal-btn.ad:hover { background: rgba(255, 184, 77, 0.16); }

/* Kisten-Grafik (reines CSS, glitcht beim Öffnen via GSAP) */
.crate {
  width: 90px;
  height: 74px;
  margin: 14px auto;
  position: relative;
  border: 2px solid var(--amber);
  background:
    linear-gradient(45deg, transparent 46%, rgba(255, 184, 77, 0.5) 46%, rgba(255, 184, 77, 0.5) 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, rgba(255, 184, 77, 0.5) 46%, rgba(255, 184, 77, 0.5) 54%, transparent 54%),
    rgba(255, 184, 77, 0.06);
}
.crate::before {
  content: '';
  position: absolute;
  left: -4px; right: -4px; top: 26px;
  height: 12px;
  border: 2px solid var(--amber);
  background: var(--panel);
}
.crate::after {
  content: '?';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 30px;
  color: var(--amber);
}

.loot-reveal {
  text-align: center;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--hot);
  text-shadow: 0 0 12px rgba(255, 45, 122, 0.5);
  margin: 10px 0 4px;
}

/* Kernel-Hack-Minigame */
.hack-display {
  text-align: center;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 8px;
  color: var(--ink);
  min-height: 44px;
  margin: 12px 0;
  text-shadow: 0 0 14px rgba(125, 255, 190, 0.4);
}

.hack-pad {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.hack-key {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 28px;
  padding: 12px 0;
  background: rgba(125, 255, 190, 0.06);
  border: 1px solid var(--ink-dim);
  color: var(--ink);
}
.hack-key:hover:not(:disabled) { border-color: var(--hot); color: var(--hot); }
.hack-key:disabled { opacity: 0.35; cursor: not-allowed; }

.tear { pointer-events: auto; cursor: pointer; }
.null-glyph { font-size: 3px; fill: var(--hot); }
.nullpunkt { cursor: pointer; }
.nullpunkt .city-name { opacity: 0; }
.nullpunkt:hover .city-name { opacity: 1; }

.signal-label { fill: var(--cyan); font-size: 2.4px; }

/* Frequenz-Abgleich (Kernel-Kommunion) */
.freq-bar {
  position: relative;
  height: 30px;
  border: 1px solid var(--line);
  background: #04120b;
  margin: 16px 0 10px;
  cursor: pointer;
  overflow: hidden;
  touch-action: manipulation;
}

.freq-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 45, 122, 0.3);
  border-left: 1px solid var(--hot);
  border-right: 1px solid var(--hot);
}

.freq-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--ink);
  box-shadow: 0 0 10px rgba(125, 255, 190, 0.8);
}

/* Dissonanz-Fieber: der Injektor glüht */
body.fieber #glitch-btn {
  border-color: var(--hot);
  box-shadow: 0 0 34px rgba(255, 45, 122, 0.55);
  animation: none;
}
body.fieber .hud-num { color: var(--hot); }

/* ---------- Ad-Overlay (Simulation) ---------- */

#ad-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.92);
}

.ad-box {
  text-align: center;
  border: 1px dashed var(--ink-dim);
  padding: 40px 60px;
}

.ad-tag { font-family: var(--font-display); font-size: 26px; letter-spacing: 3px; color: var(--amber); }
.ad-text { color: var(--ink-dim); font-size: 12px; margin-top: 6px; }
.ad-count { font-family: var(--font-display); font-size: 54px; margin-top: 14px; color: var(--ink); }

/* ---------- Instabilitäts-Level (body[data-glitch]) ---------- */

body[data-glitch="1"] .logo::before { animation-duration: 1.6s; }
body[data-glitch="1"] .logo::after { animation-duration: 1.3s; }

body[data-glitch="2"] .logo::before { animation-duration: 0.8s; }
body[data-glitch="2"] .logo::after { animation-duration: 0.7s; }
body[data-glitch="2"] .panel h2 { animation: text-jitter 0.9s infinite steps(2); }

body[data-glitch="3"] .crt { animation: crt-flicker 0.7s infinite steps(12); }
body[data-glitch="3"] main { animation: reality-drift 5s infinite ease-in-out; }
body[data-glitch="3"] .hud-num { animation: text-jitter 0.5s infinite steps(2); }

@keyframes text-jitter {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(1px, -1px); }
}

@keyframes reality-drift {
  0%, 100% { filter: none; }
  48% { filter: none; }
  50% { filter: hue-rotate(40deg) saturate(1.4); }
  52% { filter: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  main { grid-template-columns: 1fr; }
  .core-panel { order: -1; }
  .core-actions { grid-template-columns: 1fr; }
  #feed { max-height: 34vh; }
}

@media (prefers-reduced-motion: reduce) {
  .crt, .crt::after, .logo::before, .logo::after, #glitch-btn,
  body[data-glitch="2"] .panel h2,
  body[data-glitch="3"] main,
  body[data-glitch="3"] .hud-num { animation: none !important; }
}