:root {
  --nacht: #0e1420;
  --flaeche: #161e2e;
  --linie: #26324a;
  --text: #e8edf7;
  --leise: #8e9bb5;
  --main: #3ddc84;
  --mist: #ff5a4f;
  --gelb: #ffd23f;
  --papier: #f4efe1;
  --tinte: #1a1d24;
  --team: #4cc9f0;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--nacht);
  color: var(--text);
  font-family: var(--sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; }

#app {
  position: relative;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
}

.szene {
  display: none;
  height: 100%;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.szene.aktiv { display: flex; flex-direction: column; }

h1 { font-size: 2.1rem; line-height: 1.05; margin: 0 0 8px; letter-spacing: -0.02em; }
.unterzeile { margin: 0 0 18px; color: var(--leise); line-height: 1.45; }
.abschnitt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--leise); margin: 6px 0 10px; }
.hinweis { min-height: 1.3em; margin: 10px 0 0; color: var(--gelb); font-size: 0.92rem; text-align: center; }
.fuss { margin: auto 0 0; padding-top: 14px; color: #55617a; font: 0.72rem var(--mono); text-align: center; }

/* ---------- Bot-Figur ---------- */
.figur { display: block; overflow: visible; }
.figur.gross { width: 84px; height: 79px; margin-bottom: 10px; }
.antenne { stroke: #7f8dab; stroke-width: 2.5; stroke-linecap: round; }
/* Die Figur hängt per <use> im Dokument. Farben je Bot gehen deshalb nur über Variablen. */
.antennenkopf { fill: var(--antennenkopf, var(--gelb)); }
.kopf-form { fill: #c9d3e6; }
.visier { fill: #101624; }
.auge { fill: var(--auge, var(--main)); }
.ohr { fill: #7f8dab; }
.rumpf { fill: #9aa7c2; }
.fuss-l, .fuss-r { fill: #7f8dab; }

/* ---------- Schild ---------- */
.schild {
  display: inline-block;
  background: var(--papier);
  color: var(--tinte);
  font: 700 0.8rem/1.15 var(--mono);
  padding: 5px 7px;
  border-radius: 4px;
  text-align: center;
  text-wrap: balance;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* ---------- Start ---------- */
.kopf { margin-bottom: 4px; }
.regeln { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.regeln li { display: grid; grid-template-columns: 108px 1fr; gap: 12px; align-items: center; font-size: 0.9rem; line-height: 1.35; }
.regeln .schild { justify-self: start; }

.lampen { display: inline-flex; gap: 6px; }
.lampen i { width: 14px; height: 14px; border-radius: 50%; background: var(--main); box-shadow: 0 0 8px rgba(61, 220, 132, 0.7); }
.lampen i.aus { background: #3a1f24; box-shadow: none; }
.lampen.klein i:last-child { background: #3a1f24; box-shadow: none; }

.augen { display: inline-flex; gap: 7px; background: #101624; padding: 6px 10px; border-radius: 9px; justify-self: start; }
.augen i { width: 11px; height: 11px; border-radius: 50%; background: var(--mist); box-shadow: 0 0 7px rgba(255, 90, 79, 0.8); }

.teams { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.teams button {
  background: var(--flaeche);
  border: 2px solid var(--linie);
  border-left: 6px solid var(--farbe);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: left;
  font-weight: 650;
  font-size: 0.95rem;
  min-height: 48px;
}
.teams button.gewaehlt { border-color: var(--farbe); background: #1d2940; }

.haupt, .neben, .text {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  min-height: 54px;
  font-weight: 750;
  font-size: 1.08rem;
}
.haupt { background: var(--main); color: #06210f; }
.haupt:disabled { background: #25324a; color: #6c7a96; }
.haupt:active:not(:disabled) { transform: translateY(1px); }
.neben { background: transparent; border: 2px solid var(--linie); margin-top: 10px; }
.text { background: transparent; color: var(--leise); font-weight: 500; font-size: 0.95rem; min-height: 44px; margin-top: 4px; }

.neue-version {
  position: absolute;
  z-index: 30;
  top: 8px;
  left: 12px;
  right: 12px;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  background: var(--gelb);
  color: #201a00;
  font-weight: 700;
}

/* ---------- Spiel ---------- */
#s-spiel { padding: 0; overflow: hidden; }

.hud {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px;
  border-bottom: 1px solid var(--linie);
}
.hud-punkte { display: flex; align-items: baseline; gap: 6px; font: 800 1.7rem var(--mono); color: var(--gelb); min-width: 4.2ch; }
.hud-punkte small { font: 500 0.65rem var(--sans); color: var(--leise); text-transform: uppercase; letter-spacing: 0.1em; }
.hud-zeit { height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; }
#zeitbalken { height: 100%; width: 100%; background: var(--team); transform-origin: left; }
.hud-mult { font: 800 1.15rem var(--mono); color: var(--leise); min-width: 2.4ch; text-align: right; }
.hud-mult.hoch { color: var(--gelb); }

.feld {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.bahnen { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.bahnen i { border-left: 1px dashed var(--linie); }
.bahnen i:first-child { border-left: 0; }
.bahnen i::after { content: ""; display: block; width: 2px; height: 100%; margin: 0 auto; background: linear-gradient(var(--linie), rgba(38, 50, 74, 0.25)); }

.bot {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bot-b, 84px);
  padding: 0 3px;
  margin: 0;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  will-change: transform;
  touch-action: none;
  cursor: pointer;
}
.bot .figur { width: 52px; height: 49px; animation: wippen 0.5s ease-in-out infinite alternate; }
.bot .schild { width: 100%; min-height: 2.9em; display: grid; place-items: center; padding: 4px 3px; font-size: clamp(0.66rem, 3.3vw, 0.82rem); }
.bot.mist:not(.getarnt) { --auge: var(--mist); --antennenkopf: var(--mist); }
.bot.getarnt { --auge: #dfe7f5; --antennenkopf: #7f8dab; }
.bot.kippt .schild { animation: kippen 0.28s ease-out; }
.bot.gestoppt { pointer-events: none; animation: stopp 0.32s ease-in forwards; }
.bot.genervt .figur { animation: schuetteln 0.28s linear; }
.bot.weg { pointer-events: none; opacity: 0; transition: opacity 0.18s; }

@keyframes wippen { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2px) rotate(2deg); } }
@keyframes kippen { 0% { transform: scale(1); } 45% { transform: scale(1.14) rotate(-3deg); } 100% { transform: scale(1); } }
@keyframes stopp { to { opacity: 0; scale: 0.4; rotate: 25deg; } }
@keyframes schuetteln { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.flug {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font: 800 1rem var(--mono);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: aufsteigen 0.85s ease-out forwards;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.6);
}
.flug.plus { color: var(--main); }
.flug.minus { color: #ff9d5c; font-size: 0.82rem; }
.flug.vorfall { color: var(--mist); font-size: 0.86rem; }
@keyframes aufsteigen { to { transform: translate(-50%, -190%); opacity: 0; } }

.tarnhinweis, .countdown {
  position: absolute;
  z-index: 8;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}
.tarnhinweis { top: 38%; font: 800 1.25rem var(--mono); color: var(--gelb); animation: aufblitzen 2.2s ease-out forwards; }
@keyframes aufblitzen { 0% { opacity: 0; scale: 0.8; } 12% { opacity: 1; scale: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.countdown { top: 30%; font: 800 5.5rem var(--mono); color: var(--text); }
.countdown small { display: block; font: 600 1rem var(--sans); color: var(--leise); margin-top: 6px; }

.main-leiste {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 4px solid var(--main);
  background: #0a1019;
  font: 700 0.95rem var(--mono);
}
.main-name { color: var(--main); margin-right: auto; }
.main-prod { color: var(--leise); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; }
.main-leiste.treffer { animation: aufleuchten 0.3s ease-out; }
.main-leiste.alarm { animation: alarm 0.45s ease-out; }
@keyframes aufleuchten { 0% { background: #124a2b; } 100% { background: #0a1019; } }
@keyframes alarm { 0% { background: #6b1a16; border-top-color: var(--mist); } 100% { background: #0a1019; border-top-color: var(--main); } }
#s-spiel.beben { animation: beben 0.3s linear; }
@keyframes beben { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ---------- Ergebnis ---------- */
#s-ende h1 { margin-top: 12px; }
.ende-punkte { margin: 6px 0 4px; font: 800 1.2rem var(--mono); color: var(--leise); }
.ende-punkte span { font-size: 3.6rem; color: var(--gelb); letter-spacing: -0.03em; }
.ende-team { min-height: 2.8em; margin: 0 0 14px; line-height: 1.4; border-left: 5px solid var(--team); padding-left: 10px; }
.bilanz { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.bilanz div { background: var(--flaeche); border-radius: 10px; padding: 10px 12px; }
.bilanz dt { font-size: 0.72rem; color: var(--leise); text-transform: uppercase; letter-spacing: 0.08em; }
.bilanz dd { margin: 2px 0 0; font: 800 1.5rem var(--mono); }
.durchgerutscht { margin: 0 0 16px; font-size: 0.9rem; color: var(--leise); line-height: 1.9; }
.durchgerutscht .schild { margin: 0 3px; }

/* ---------- Melden ---------- */
.art { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.art button { min-height: 48px; border-radius: 10px; border: 2px solid var(--linie); background: var(--flaeche); font-weight: 650; }
.art button.gewaehlt { border-color: var(--gelb); color: var(--gelb); }
.feldname { font-size: 0.8rem; color: var(--leise); margin-bottom: 6px; }
textarea {
  width: 100%;
  border-radius: 10px;
  border: 2px solid var(--linie);
  background: var(--flaeche);
  color: var(--text);
  font: 1rem/1.4 var(--sans);
  padding: 12px;
  resize: none;
}
textarea:focus { outline: none; border-color: var(--team); }
.zaehler { margin: 4px 0 12px; text-align: right; font: 0.75rem var(--mono); color: var(--leise); }

@media (prefers-reduced-motion: reduce) {
  .bot .figur, #s-spiel.beben, .bot.genervt .figur { animation: none; }
}