/* ============================================================
   Lichtschlacht - styles.css  (alles mit Praefix lsl_)
   ------------------------------------------------------------
   GUI-Ueberarbeitung im Stil von Neumark 1400 / Stadt im Wandel:
   Die Buehne ist eine dunkle Konsole (HUD-Zeile oben, Arena in der
   Mitte, Ticker unten) und bleibt wie das Spielfeld IMMER dunkel -
   unabhängig vom Seiten-Theme (Vorbild cyber-tower-defense). Die
   JUPI-Leiste folgt der Plattform-Vorgabe 3.13.2 (links "Alle
   Spiele", mittig Logo + Name + Claim, rechts Werkzeuge), nur in
   der Optik des Spiels. Hilfe + Info wohnen im Start-Menue (Typ 1,
   3.13.3) - nichts unterhalb des Spiels (goldene Negativ-Regel).

   Wichtig gegen die jupi.css-Dark-Regeln (0,2,1-Falle): alle Regeln,
   die gemeinsame Klassen umstylen, sind an body.jupi.lsl_body
   gekettet - das schlaegt die html[data-theme]-Regeln in BEIDEN
   Themes, denn die Seite ist immer dunkel.
   ============================================================ */

/* ---------- Seite: Neon-Dunkel in beiden Themes ---------- */
body.jupi.lsl_body {
  background:
    radial-gradient(1100px 560px at 8% -8%, #123349 0%, transparent 58%),
    radial-gradient(900px 520px at 100% 0%, #0d2b3e 0%, transparent 55%),
    #08111C;
  color: #C9E4F6;
}
/* Gleiche Farben im Dark-Theme - die html[data-theme]-Regel der
   jupi.css hat bei body die hoehere Spezifitaet und muss explizit
   ueberschrieben werden (Muster cyber-tower-defense). */
html[data-theme="dark"] body.jupi.lsl_body {
  background:
    radial-gradient(1100px 560px at 8% -8%, #123349 0%, transparent 58%),
    radial-gradient(900px 520px at 100% 0%, #0d2b3e 0%, transparent 55%),
    #08111C;
  color: #C9E4F6;
}
body.jupi.lsl_body .jupi_container > .jupi_main { background: transparent; min-width: 0; }
body.jupi.lsl_body .jupi_container > .jupi_footer {
  background: #0A1624;
  border-top: 1px solid rgba(84, 216, 255, .22);
}
body.jupi.lsl_body .jupi_footer_text { color: #8FB8D4; }
body.jupi.lsl_body .jupi_footer_text a { color: #54D8FF; }

/* ---------- Drei-Zonen-Leiste in der Optik des Spiels (3.13.2) ----------
   Positionen wie in der Plattform-Vorgabe, nur die Optik ist spiel-
   eigen: dunkle Navy-Flaeche mit Cyan-Kante, wie die Arena. */
body.jupi.lsl_body .lsl_kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .5rem 1rem;
  color: #DFF4FF;
  background:
    linear-gradient(180deg, rgba(84, 216, 255, .10) 0%, rgba(84, 216, 255, 0) 55%),
    linear-gradient(135deg, #06131f 0%, #0a2133 48%, #0c3b47 100%);
  border-bottom: 1px solid rgba(84, 216, 255, .35);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45), 0 1px 0 rgba(84, 216, 255, .14) inset;
}
body.jupi.lsl_body .lsl_kopf .jupi_nav_back {
  position: static;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;                 /* Bedienziel 3.13.5 */
  padding: .4rem .85rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
  color: #9FE8FF;
  background: rgba(84, 216, 255, .10);
  border: 1px solid rgba(84, 216, 255, .45);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transition: background .16s, color .16s, transform .16s;
}
body.jupi.lsl_body .lsl_kopf .jupi_nav_back:hover {
  text-decoration: none;
  background: rgba(84, 216, 255, .22);
  color: #E4F8FF;
  transform: translateY(-1px);
}
.lsl_brand {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: .65rem;
  min-width: 0;
}
.lsl_brand img {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: .55rem;
  box-shadow: 0 0 0 1px rgba(84, 216, 255, .5), 0 0 16px rgba(84, 216, 255, .3);
}
.lsl_brand_text { display: flex; flex-direction: column; min-width: 0; }
.lsl_brand_text h1 {
  margin: 0;
  padding: .1rem .55rem 0;
  color: #F2FBFF;
  font-size: 1.3rem;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 0 16px rgba(84, 216, 255, .35);
}
.lsl_claim {
  padding: 0 .55rem .15rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6FCBEF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.jupi.lsl_body .lsl_kopf .lsl_kopf_werkzeuge {
  position: static;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .45rem;
}
/* Sprachwahl und Dark-Mode-Schalter als Bedienziele >= 40 px (3.13.5),
   die Pille innen bleibt zentriert (Muster hangrennen/cyber). */
body.jupi.lsl_body .lsl_kopf .jupi_sprachen_wahl,
body.jupi.lsl_body .lsl_kopf .jupi_sprachen_select { min-height: 40px; }
body.jupi.lsl_body .lsl_kopf #jupi_theme_toggle {
  min-height: 40px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(84, 216, 255, .14);
  border-color: rgba(84, 216, 255, .45);
}
body.jupi.lsl_body .lsl_kopf #jupi_theme_toggle:hover { background: rgba(84, 216, 255, .26); }
body.jupi.lsl_body .lsl_kopf .jts_thumb {
  top: 3px;
  bottom: auto;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
html[data-theme="dark"] body.jupi.lsl_body .lsl_kopf .jts_thumb { left: calc(100% - 36px); }
body.jupi.lsl_body .lsl_kopf .jts_sun { left: 9px; }
body.jupi.lsl_body .lsl_kopf .jts_moon { right: 9px; }

/* Handy: Marke oben ueber die volle Breite, Zurueck + Werkzeuge darunter */
@media (max-width: 48rem) {
  body.jupi.lsl_body .lsl_kopf {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .4rem;
    padding: .45rem .5rem;
  }
  .lsl_brand { grid-row: 1; grid-column: 1 / -1; }
  .lsl_brand img { width: 34px; height: 34px; }
  .lsl_brand_text h1 { font-size: 1.05rem; }
  .lsl_claim { font-size: .58rem; }
  body.jupi.lsl_body .lsl_kopf .jupi_nav_back { grid-row: 2; grid-column: 1; font-size: .82rem; }
  body.jupi.lsl_body .lsl_kopf .lsl_kopf_werkzeuge { grid-row: 2; grid-column: 2; }
}

/* ---------- Buehnen-Konsole: HUD oben, Arena, Ticker unten ---------- */
.lsl_stage {
  position: relative;
  min-width: 0;
  margin: 0 auto;
  max-width: min(72rem, 100%);
  border-radius: 1.1rem;
  overflow: hidden;
  background: linear-gradient(180deg, #0B1A2C 0%, #0A1624 100%);
  border: 1px solid rgba(84, 216, 255, .28);
  box-shadow: 0 12px 34px rgba(4, 12, 24, .55), 0 0 22px rgba(84, 216, 255, .10);
}

/* HUD-Zeile oben (wie im Titelbild: Runde + Ziel links, Pillen rechts) */
.lsl_hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .55rem .8rem;
  background: linear-gradient(180deg, #0C1E31 0%, #091626 100%);
  border-bottom: 1px solid rgba(84, 216, 255, .30);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.lsl_hud_links { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.lsl_pille_runde {
  display: inline-flex;
  align-items: center;
  padding: .3rem .85rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  color: #F2FBFF;
  background: rgba(84, 216, 255, .10);
  border: 1px solid rgba(84, 216, 255, .45);
  text-shadow: 0 0 10px rgba(84, 216, 255, .35);
  white-space: nowrap;
}
.lsl_pille_ziel {
  display: inline-flex;
  align-items: center;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  color: #9FC9E8;
  background: rgba(84, 216, 255, .05);
  border: 1px solid rgba(84, 216, 255, .22);
  white-space: nowrap;
}
.lsl_hud_rechts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; min-width: 0; }

/* Spieler-Pillen (Farbpunkt + Punkte, wie im Titelbild) */
.lsl_chips { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.lsl_pille {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 3.1rem;
  justify-content: center;
  padding: .26rem .7rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .95rem;
  color: #F2FBFF;
  background: rgba(10, 22, 36, .78);
  border: 1.5px solid var(--p, #54D8FF);
  box-shadow: 0 0 10px -2px var(--p, #54D8FF);
  transition: opacity .25s, filter .25s, box-shadow .25s;
}
.lsl_pille_0 { --p: #35E862; }
.lsl_pille_1 { --p: #38B6FF; }
.lsl_pille_2 { --p: #FFC838; }
.lsl_pille_3 { --p: #FF4B5C; }
.lsl_pille strong { font-variant-numeric: tabular-nums; }
/* KI-Marke in der Spieler-Pille (Modus "Gegen die KI") */
.lsl_ki_marke {
  font-style: normal;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .08rem .34rem;
  border-radius: .4rem;
  color: #08111C;
  background: #9FE8FF;
  box-shadow: 0 0 8px rgba(159, 232, 255, .5);
}
/* Gesperrte Spieler-Wahl im KI-Modus */
.lsl_start_form select:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.lsl_pille_tot { opacity: .35; filter: grayscale(.7); box-shadow: none; }
.lsl_pille_sieger { box-shadow: 0 0 0 2px #FFD54F, 0 0 14px rgba(255, 213, 79, .55); }
.lsl_punkt { display: inline-block; width: .72em; height: .72em; border-radius: 50%; background: var(--p, #54D8FF); box-shadow: 0 0 8px var(--p, #54D8FF); }
.lsl_punkt_0 { --p: #35E862; }
.lsl_punkt_1 { --p: #38B6FF; }
.lsl_punkt_2 { --p: #FFC838; }
.lsl_punkt_3 { --p: #FF4B5C; }

/* HUD-Knoepfe: kompakte Neon-Pillen, Bedienziel >= 40 px (3.13.5) */
.lsl_knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; }
.lsl_hud_knopf {
  min-height: 40px;
  padding: .3rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(84, 216, 255, .45);
  background: rgba(84, 216, 255, .10);
  color: #9FE8FF;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s, color .16s, transform .16s;
}
.lsl_hud_knopf:hover {
  background: rgba(84, 216, 255, .22);
  color: #E4F8FF;
  transform: translateY(-1px);
}
.lsl_hud_knopf[aria-pressed="true"] {
  background: rgba(84, 216, 255, .28);
  color: #F2FBFF;
}

/* Arena: dunkles Herzstueck, Canvas zentriert */
.lsl_spielfeld {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .7rem;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(30, 96, 130, .30) 0%, transparent 70%),
    #08111C;
  min-width: 0;
}
.lsl_spielfeld canvas {
  display: block;
  /* max-width + height:auto halten das Attribut-Canvas im Menü-Zustand
     im Rahmen (Handy); im Spiel setzt passeCanvasAn() Inline-Maße, die
     ohnehin in den Bühnen-Rahmen passen. */
  max-width: 100%;
  height: auto;
  border-radius: .7rem;
  box-shadow: 0 0 0 1px rgba(84, 216, 255, .25), 0 6px 26px rgba(0, 0, 0, .5);
  background: #0A1220;
}

/* Ticker unten: dünne Statuszeile (aria-live) */
.lsl_ticker {
  padding: .45rem .9rem;
  font-size: .85rem;
  color: #9FC9E8;
  background: rgba(84, 216, 255, .05);
  border-top: 1px solid rgba(84, 216, 255, .18);
  text-align: center;
  min-height: 2.1em;
}

/* ---------- Start-Menü + Overlays (Typ 1, Regel 3.13.3) ---------- */
.lsl_overlay { gap: .5rem; }
.lsl_overlay_karte {
  background: linear-gradient(160deg, rgba(14, 30, 47, .96) 0%, rgba(9, 18, 30, .96) 100%);
  color: #DFF4FF;
  border: 1px solid rgba(84, 216, 255, .40);
  border-radius: 1rem;
  padding: 1.2rem 1.4rem;
  text-align: center;
  max-width: 34rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(84, 216, 255, .12);
}
.lsl_overlay_karte h3 {
  margin: 0 0 .4rem;
  color: #F2FBFF;
  text-shadow: 0 0 18px rgba(84, 216, 255, .45);
}
.lsl_overlay_karte p { margin: .3rem 0 .7rem; font-size: .95rem; color: #B8D8EE; }
.lsl_re_titel { font-size: 1.25rem; font-weight: 800; color: #FFD54F; margin: .1rem 0 .5rem !important; }
.lsl_re_stand { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.lsl_overlay_knoepfe { display: flex; gap: .6rem; justify-content: center; margin-top: .4rem; flex-wrap: wrap; }
.lsl_tabelle { margin: .4rem auto .8rem; border-collapse: collapse; }
.lsl_tabelle td { padding: .25rem .9rem; text-align: left; font-size: 1rem; color: #DFF4FF; }
.lsl_tabelle td:last-child { text-align: right; font-weight: 800; }

/* Start-Overlay: Steuerungs-Hinweise + Formular */
.lsl_start_hinweise { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; margin: .5rem 0 .8rem; }
.lsl_start_form {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
  margin-bottom: .9rem;
}
.lsl_start_form label {
  display: flex;
  flex-direction: column;
  font-size: .72rem;
  font-weight: 700;
  gap: .2rem;
  color: #9FC9E8;
  text-transform: uppercase;
  letter-spacing: .05em;
}
body.jupi.lsl_body .lsl_start_form select {
  padding: .4rem .5rem;
  border-radius: .55rem;
  border: 1px solid rgba(84, 216, 255, .40);
  background: #0B1A2C;
  color: #E4F8FF;
  font-size: .9rem;
  font-weight: 600;
  min-width: 7.5rem;
  cursor: pointer;
}
body.jupi.lsl_body .lsl_start_form select:focus-visible {
  outline: 2px solid #54D8FF;
  outline-offset: 1px;
}
/* Haupt-CTA bleibt im Spiel-Grün - auch im Dark-Theme, wo die
   jupi.css-Regel sonst auf Plattform-Orange umschalten wuerde. */
body.jupi.lsl_body .lsl_overlay .jupi_btn {
  background: linear-gradient(180deg, #2FBF58 0%, #23994A 100%);
  color: #FFFFFF;
  border: 1px solid rgba(120, 255, 170, .55);
  box-shadow: 0 0 18px rgba(53, 232, 98, .35);
}
body.jupi.lsl_body .lsl_overlay .jupi_btn:hover {
  background: linear-gradient(180deg, #3BD966 0%, #2AAE54 100%);
}
/* Alt-Knoepfe im Menue als Neon-Pillen (in beiden Themes dunkel) */
body.jupi.lsl_body .lsl_overlay .jupi_btn_alt {
  background: rgba(84, 216, 255, .10);
  border: 1px solid rgba(84, 216, 255, .45);
  color: #9FE8FF;
}
body.jupi.lsl_body .lsl_overlay .jupi_btn_alt:hover {
  background: rgba(84, 216, 255, .22);
  color: #E4F8FF;
}
.lsl_menue_reihe { margin-top: .5rem; flex-wrap: wrap; }
.lsl_menue_reihe .jupi_btn_alt { min-height: 2.4rem; }

/* Spieler-Farb-Chips (Steuerungshinweise + Runden-Tabelle) */
.lsl_chip {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 700;
  color: #08111C;
  background: var(--c, #54D8FF);
  box-shadow: 0 0 10px -2px var(--c, #54D8FF);
}
.lsl_chip_0 { --c: #35E862; }
.lsl_chip_1 { --c: #38B6FF; }
.lsl_chip_2 { --c: #FFC838; }
.lsl_chip_3 { --c: #FF4B5C; }
.lsl_chip_sieger { outline: 3px solid #FFD54F; outline-offset: 1px; }

/* ---------------- Hilfe- + Info-Fenster (Start-Menü) ----------------
   Beide liegen als lsl_overlay IN der Bühne, gelten als Dialog und
   tragen viel Text - deshalb als Karte mit Eigengröße und Schriftrolle. */
.lsl_modal_karte {
  max-width: 36rem;
  max-height: min(82vh, 34rem);
  overflow: auto;
  text-align: left;
}
.lsl_modal_karte h3 { font-size: 1.1rem; color: #7BFFB0; text-shadow: 0 0 14px rgba(53, 232, 98, .35); }
.lsl_modal_karte h4 { margin: .7rem 0 .2rem; font-size: .95rem; color: #FFD54F; }
.lsl_modal_karte ul { margin: .3rem 0 .6rem; padding-left: 1.2rem; }
.lsl_modal_karte li { margin: .4rem 0; font-size: .95rem; line-height: 1.6; color: #B8D8EE; }
.lsl_modal_karte p { font-size: .95rem; line-height: 1.6; color: #B8D8EE; }

/* ---------------- Touch-Pads ----------------
   [hidden]-Guard: display:flex wuerde sonst das hidden-Attribut schlagen. */
.lsl_pads { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; }
.lsl_pads[hidden] { display: none; }
.lsl_pad { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.lsl_pad_raster {
  display: grid;
  grid-template-columns: repeat(3, 3.4rem);
  grid-template-rows: repeat(2, 3.4rem);
  gap: .3rem;
}
/* Raster: oben Mitte = hoch, unten links/runter/rechts - klassisches Kreuz */
.lsl_pad_raster button:nth-child(1) { grid-column: 2; grid-row: 1; }
.lsl_pad_raster button:nth-child(2) { grid-column: 1; grid-row: 2; }
.lsl_pad_raster button:nth-child(3) { grid-column: 2; grid-row: 2; }
.lsl_pad_raster button:nth-child(4) { grid-column: 3; grid-row: 2; }
.lsl_pad_raster button {
  font-size: 1.15rem;
  border-radius: .7rem;
  border: 1.5px solid rgba(84, 216, 255, .40);
  background: rgba(11, 26, 44, .85);
  color: #DFF4FF;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.lsl_pad_raster button:active {
  background: rgba(84, 216, 255, .28);
  border-color: #54D8FF;
}

/* ---------------- Handy ---------------- */
@media (max-width: 640px) {
  .lsl_hud { padding: .5rem .55rem; gap: .4rem .6rem; }
  .lsl_hud_links, .lsl_hud_rechts { width: 100%; justify-content: center; }
  .lsl_knoepfe { justify-content: center; }
  .lsl_start_form select { min-width: 6rem; }
  .lsl_pad_raster { grid-template-columns: repeat(3, 2.9rem); grid-template-rows: repeat(2, 2.9rem); }
  .lsl_pille { min-width: 2.7rem; padding: .22rem .55rem; font-size: .85rem; }
}