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

body {
  background: #0a0a14;
  color: #e0e0e8;
  font-family: 'Courier New', monospace;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#app { width: 100%; max-width: 1000px; padding: 12px; position: relative; }

/* Hintergrundsimulation. Negativer z-index legt sie unter den Textfluss, ohne
   dass die Menues selbst eine Stapelposition brauchen.

   Die Leinwand wird in attract.js auf Fenstergroesse gerechnet und deckt sie
   hier 1:1 ab. Das Level ist 1200x320, also fast 4:1 — auf die volle Breite
   gequetscht bliebe ein duenner Streifen quer ueber den Bildschirm, in dem
   nichts zu erkennen ist. Stattdessen fuellt die Levelhoehe das Fenster und
   die Kamera faehrt langsam an der Breite entlang. */
#bg-sim {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -2; opacity: 0.85;
  image-rendering: pixelated; pointer-events: none;
}
/* Der Schleier ist dort am dichtesten, wo die Schrift steht, und laeuft nach
   aussen aus. Andersherum — Vignette mit heller Mitte — waere es genau falsch:
   dunkel wuerde der Rand, an dem man die Simulation sehen soll, und hell die
   Mitte, in der sie den Text stoert. */
#bg-schleier {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 55% 45% at center,
              rgba(10, 10, 20, 0.88) 0%,
              rgba(10, 10, 20, 0.72) 55%,
              rgba(10, 10, 20, 0.38) 100%);
}
/* Waehrend einer Partie ist sie weder sichtbar noch aktiv. */
body.spielt #bg-sim, body.spielt #bg-schleier { display: none; }

@media (prefers-reduced-motion: reduce) { #bg-sim { display: none; } }

.screen { text-align: center; }
.hidden { display: none !important; }

.logo {
  font-size: 64px;
  letter-spacing: 8px;
  color: #40e040;
  text-shadow: 3px 3px 0 #205020, 6px 6px 0 #102810;
  margin-bottom: 4px;
}
.tagline { color: #808098; margin-bottom: 40px; }

h2 { color: #40e040; margin-bottom: 20px; }

.menu-buttons { display: flex; flex-direction: column; gap: 14px; align-items: center; }

button {
  background: #202038;
  color: #e0e0e8;
  border: 2px solid #404068;
  padding: 8px 16px;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
  border-radius: 4px;
}
button:hover { background: #303050; border-color: #40e040; }
button.big, a.btn.big { font-size: 20px; padding: 14px 40px; min-width: 320px; }
button.back { margin-top: 24px; }

/* Der Rueckweg ins Portal ist ein Link, kein Knopf — die Gestaltung haengt
   deshalb an der Klasse und nicht am Element, sonst erbt das <a> nichts. */
a.btn {
  display: inline-block; text-decoration: none;
  background: #202038; color: #e0e0e8; border: 2px solid #404068;
  padding: 8px 16px; font-family: inherit; font-size: 15px;
  cursor: pointer; border-radius: 4px; box-sizing: border-box;
}
a.btn:hover { background: #303050; border-color: #40e040; }
a.btn.portal { border-color: #405088; color: #a8c0ff; margin-top: 10px; }

/* Levelauswahl */
#level-list { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.level-entry {
  display: flex; justify-content: space-between; align-items: center;
  width: 480px; max-width: 90vw;
}
.level-entry .best { color: #808098; font-size: 13px; margin-left: 12px; }
.level-entry button { flex: 1; text-align: left; }
.rang-kopf {
  width: 480px; max-width: 90vw; text-align: left;
  color: #40e040; font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; margin: 14px 0 2px;
  border-bottom: 1px solid #303050; padding-bottom: 3px;
}
#level-list .rang-kopf:first-child { margin-top: 0; }

/* Lobby */
#lobby label { display: block; margin: 20px 0; }
#lobby input {
  background: #101020; color: #e0e0e8; border: 2px solid #404068;
  padding: 8px; font-family: inherit; font-size: 16px; border-radius: 4px;
  text-align: center;
}
#mp-code { width: 100px; text-transform: uppercase; }
.lobby-actions { display: flex; flex-direction: column; gap: 14px; align-items: center; margin: 10px 0; }
.join-row { display: flex; gap: 8px; }
.room-code { font-size: 40px; letter-spacing: 6px; color: #40e040; margin-top: 8px; }
#lobby p { max-width: 520px; margin: 0 auto 8px; color: #a0a0b8; }
.hinweis { font-size: 13px; color: #707088 !important; }
.hinweis a, .wer a { color: #40e040; }
.wer { color: #808098; font-size: 13px; margin: -28px 0 26px; }
#lobby label.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #808098; }

/* Spiel */
#game { text-align: left; }
#canvas {
  width: 100%;
  touch-action: none;   /* Ziehen scrollt die Karte, nicht die Seite */
  height: auto;
  image-rendering: pixelated;
  border: 2px solid #303050;
  border-radius: 4px;
  background: #101028;
  display: block;
  cursor: crosshair;
}
#hud-top {
  display: flex; gap: 20px; padding: 6px 4px;
  font-size: 14px; color: #c0c0d0;
}
#hud-time { margin-left: auto; }
#hud-time.knapp { color: #ff6060; font-weight: bold; }
#hud-saved.erreicht { color: #40e040; }
#hud-opponent { color: #e0a020; }

/* Uebersichtskarte: das ganze Level auf einen Streifen. Ohne sie sucht man auf
   1200 px Levelbreite, von denen 480 sichtbar sind, den Ausgang zu Fuss. */
#minimap {
  width: 100%; height: 56px; display: block; margin-top: 4px;
  border: 2px solid #303050; border-radius: 4px;
  image-rendering: auto; cursor: pointer; touch-action: none;
  background: #101020;
}

/* Zuschauen: Legende und Umschalter. Ohne die Namen ist keine Seite
   zuzuordnen — bei zwei gleich aussehenden Kolonien sieht man sonst nur
   irgendwelche Lemminge laufen. */
#watch-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 4px; font-size: 13px; color: #a0a0b8;
}
.watch-tag {
  background: #4a1f1f; color: #ff8080; border: 1px solid #7a3030;
  border-radius: 3px; padding: 1px 7px; font-size: 11px; letter-spacing: 1px;
}
#watch-seiten { display: flex; gap: 6px; }
#watch-seiten button { padding: 3px 10px; font-size: 12px; }
#watch-seiten button.selected { border-color: #40e040; background: #204020; }
#watch-info { color: #707088; }
body.zuschaut #toolbar, body.zuschaut #hud-hint { display: none; }

#toolbar {
  display: flex; gap: 8px; padding: 8px 0; align-items: center; flex-wrap: wrap;
}
.rate-group { display: flex; align-items: center; gap: 4px; }
.rate-group button { width: 34px; height: 54px; }
#rate-val { min-width: 28px; text-align: center; }

#skill-buttons {
  display: grid;
  grid-template-columns: repeat(8, 74px);
  gap: 4px;
}
.skill-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 74px; height: 54px; padding: 2px; font-size: 10px; gap: 1px;
  white-space: nowrap; overflow: hidden;
}
.skill-btn .icon { font-size: 16px; line-height: 1; }
.skill-btn .count { font-size: 14px; font-weight: bold; color: #40e040; line-height: 1; }
#btn-pause, #btn-mute, #btn-nuke, #btn-quit { width: 44px; height: 54px; }

@media (max-width: 900px) {
  #skill-buttons { grid-template-columns: repeat(4, 74px); }
}
.skill-btn.selected { border-color: #40e040; background: #204020; }
.skill-btn:disabled { opacity: 0.4; cursor: default; }

#btn-nuke { margin-left: auto; color: #e04040; }
#btn-quit { color: #a0a0b8; }
#hud-hint { color: #606078; font-size: 12px; padding: 2px 4px; min-height: 18px; }

/* Ergebnis */
#result-text { font-size: 18px; margin: 16px 0; }
.verify { color: #40e040; font-size: 13px; margin-bottom: 24px; }
.verify.failed { color: #e04040; }

/* Highscores */
#score-list table { margin: 0 auto; border-collapse: collapse; }
#score-list td, #score-list th { padding: 4px 14px; border-bottom: 1px solid #303050; }
#score-list th { color: #40e040; }