/* cs2.nidahub.de – Viewer AK-47 | Case Hardened */
:root {
  --text: #f4f1f6;
  --leise: rgba(244, 241, 246, 0.62);
  --gold: #e9c46a;
  --blau: #8fb4ff;
  --glas: rgba(28, 22, 38, 0.55);
  --kante: rgba(255, 255, 255, 0.14);
  caret-color: transparent;
  color-scheme: dark;
}
input, textarea, select, [contenteditable] { caret-color: auto; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  /* Farben aus dem Referenzbild: warmes Mauve links, kuehles Blaugrau rechts */
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(18, 12, 26, 0.55)),
    linear-gradient(115deg, #a3877f 0%, #93858f 45%, #7e8aa3 100%);
}

#bühne {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  opacity: 0;
  transition: opacity .6s ease;
}
#bühne:active { cursor: grabbing; }
.bereit #bühne { opacity: 1; }

.kopf {
  position: fixed; top: clamp(16px, 4vh, 40px); left: clamp(16px, 4vw, 56px);
  pointer-events: none;
}
.kopf h1 {
  margin: 0;
  font-size: clamp(22px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: .01em;
  display: flex; align-items: baseline; gap: .45em; flex-wrap: wrap;
  text-shadow: 0 2px 18px rgba(20, 10, 30, .35);
}
.kopf .trenner { color: var(--leise); font-weight: 300; }
.kopf .skin { color: #d6e3ff; font-weight: 600; }

#status {
  position: fixed; inset: 0; margin: auto;
  width: max-content; height: max-content;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: var(--glas);
  border: 1px solid var(--kante);
  backdrop-filter: blur(10px);
  font-variant-numeric: tabular-nums;
}
#status[data-art="fehler"] { border-color: #ff9a8a; max-width: min(90vw, 420px); text-align: center; border-radius: 14px; }

.hinweis {
  position: fixed; left: 50%; bottom: calc(clamp(16px, 4vh, 36px) + 64px);
  transform: translateX(-50%);
  margin: 0; font-size: 13px; color: var(--leise);
  opacity: 0; transition: opacity .5s ease;
  pointer-events: none; white-space: nowrap;
}
.bereit .hinweis { opacity: 1; }
.bewegt .hinweis { opacity: 0; }
.hinweis .touch { display: none; }
@media (pointer: coarse) {
  .hinweis .maus { display: none; }
  .hinweis .touch { display: inline; }
}

.leiste {
  position: fixed; left: 50%; bottom: clamp(16px, 4vh, 36px);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glas);
  border: 1px solid var(--kante);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(15, 8, 24, .25);
}
.fuge { width: 1px; height: 22px; background: var(--kante); margin: 0 4px; }

button {
  font: inherit; font-weight: 600;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55em 1.05em;
  min-height: 40px;
  white-space: nowrap;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
button:hover { background: rgba(255, 255, 255, .08); }
button[aria-pressed="true"] {
  background: rgba(143, 180, 255, .18);
  border-color: rgba(143, 180, 255, .55);
}
/* Zustand nicht nur ueber Farbe: aktiver Knopf bekommt einen Punkt */
button[aria-pressed="true"]::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: .5em; vertical-align: middle;
  border-radius: 50%; background: var(--gold);
}
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button[hidden] { display: none; }

/* Klick-Rueckmeldung (Rahmen leuchtet kurz auf) */
button.geklickt { animation: aufleuchten .45s ease-out; }
@keyframes aufleuchten {
  0% { box-shadow: 0 0 0 0 rgba(233, 196, 106, .75); border-color: var(--gold); }
  100% { box-shadow: 0 0 0 10px rgba(233, 196, 106, 0); }
}

@media (max-width: 520px) {
  .leiste { gap: 2px; padding: 4px; }
  button { padding: .5em .8em; }
  .fuge { margin: 0 2px; }
}

@media (prefers-reduced-motion: reduce) {
  #bühne, .hinweis { transition: none; }
}