/* ===== Kugelchaos - Styles (PWA-Paket, GUI 3.13 Typ 2) =====
   Die JUPI-Basis (Farben, Container, Leiste, Buttons, Footer, Dark Mode)
   kommt aus den Paket-Kopien colors.css und jupi.css. Hier stehen nur die
   Spiel-eigenen Regeln plus die schlanke 3-Zonen-Leiste.
   Das Brett selbst ist immer dunkel (Canvas) - in beiden Themes lesbar. */

/* ---------- 3-Zonen JUPI-Leiste (AGENTS.md 3.13.2, Typ 2) ---------- */
.kc_leiste { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:1rem; padding:.55rem 1rem; }
.kc_brand { display:flex; align-items:center; justify-self:center; gap:.6rem; min-width:0; }
.kc_brand img { display:block; flex:none; width:40px; height:40px; object-fit:contain; aspect-ratio:1; }
.kc_brand h1 { margin:0; color:white; font-size:1.25rem; line-height:1.2; white-space:nowrap; }
.kc_leiste .jupi_nav_back { position:static; justify-self:start; display:flex; align-items:center; border-radius:999px; padding:.4rem .7rem; line-height:1.2; font-size:.88rem; }
.kc_leiste .jupi_werkzeuge { position:static; justify-self:end; display:flex; align-items:center; gap:.4rem; }
.kc_leiste #jupi_sprachen_wahl { display:inline-flex; align-items:center; gap:.3rem; }
.kc_leiste .jupi_theme_switch { width:74px; height:40px; min-width:74px; padding:0; }
.kc_leiste .jts_thumb { top:3px; bottom:auto; left:4px; width:32px; height:32px; border-radius:50%; }
html[data-theme="dark"] .kc_leiste .jts_thumb { left:calc(100% - 36px); }
.kc_leiste .jts_sun { left:9px; } .kc_leiste .jts_moon { right:9px; }

/* Wenig Rand oben: das Brett soll ohne Scrollen ganz sichtbar sein. */
.jupi_main.kc_main { padding:.7rem 1rem 1rem; }

.kc_panel {
  /* 240 px statt 190: der Holzrahmen der Buehne (2 x 13) und der Fuss
     brauchen Platz, damit das Brett bei 1280x900 ohne Scrollen sichtbar
     bleibt (Regel 3.13.2a: der Fuss sitzt am Fensterrand). */
  --kc-brett-breite: min(100%, max(320px, calc((100dvh - 240px) * 4 / 3)));
  width:var(--kc-brett-breite); margin:0 auto;
  display:flex; flex-direction:column; gap:.55rem;
}

/* ---------- Steuerzeile: Anzeigen links, Knoepfe rechts ---------- */
.kc_steuer { display:flex; align-items:center; justify-content:space-between; gap:.5rem .8rem; flex-wrap:wrap; }
.kc_hud { display:flex; flex-wrap:wrap; gap:.4rem; align-items:stretch; min-width:0; }
.kc_chip {
  display:flex; flex-direction:column; justify-content:center; min-height:40px;
  padding:.2rem .65rem; border-radius:.75rem;
  background:#f4f6fb; border:1.5px solid #dfe4ee; color:#1d2540;
}
.kc_label { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#5b6478; }
.kc_chip strong { font-size:1.1rem; line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; }
.kc_kugel_punkte { font-size:.6rem; letter-spacing:.08em; color:#8a93a8; vertical-align:middle; }
.kc_chip_ziel strong { color:#b85c00; }
.kc_chip_multi { position:relative; min-width:7.2rem; padding-bottom:.65rem; }
.kc_chip_multi strong { color:#3d3a8f; }
.kc_chip_multi strong[data-stufe="2"] { color:#2a73c9; }
.kc_chip_multi strong[data-stufe="3"] { color:#1e8f4a; }
.kc_chip_multi strong[data-stufe="5"] { color:#c77a00; }
.kc_chip_multi strong[data-stufe="10"] { color:#c2185b; }
.kc_balken { position:absolute; left:.65rem; right:.65rem; bottom:.28rem; height:5px; border-radius:3px; background:#dfe4ee; overflow:hidden; }
.kc_balken > span { display:block; height:100%; width:0; background:linear-gradient(90deg,#f39a2b,#c2185b); transition:width .25s; }
.kc_balken > i { position:absolute; top:0; bottom:0; width:2px; background:rgba(0,0,0,.25); }
.kc_chip_kraft { flex-direction:row; align-items:center; font-weight:800; font-size:.86rem; color:#1d7a37; background:#eaf7ee; border-color:#bfe6ca; }
.kc_chip_kraft.kc_aktiv { background:#37b75a; color:#fff; border-color:#2a9a49; }

.kc_knoepfe { display:flex; gap:.4rem; align-items:center; margin-left:auto; }
.kc_knopf {
  min-width:42px; min-height:42px; padding:0 .55rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  border-radius:999px; border:1.5px solid #cfd6e4; background:#fff; color:#1d2540;
  font:inherit; font-size:1.05rem; font-weight:800; cursor:pointer;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.kc_knopf:hover { border-color:var(--link-color); box-shadow:0 3px 10px rgba(0,0,0,.1); transform:translateY(-1px); }
.kc_knopf:focus-visible, .kc_kachel:focus-visible, #kc_canvas:focus-visible { outline:3px solid var(--link-color); outline-offset:2px; }
.kc_knopf_text { font-size:.9rem; padding:0 .8rem; }

/* ---------- Buehne ---------- */
.kc_buehne { position:relative; border-radius:1rem; overflow:hidden; background:#0f162c;
  box-shadow:0 8px 28px rgba(15,22,44,.25); }
#kc_canvas { display:block; width:100%; aspect-ratio:40 / 30; touch-action:none; cursor:crosshair; }
#kc_canvas:focus { outline:none; }
.kc_vollbild { position:absolute; left:.35rem; top:.35rem; background:rgba(15,22,44,.7); color:#fff; border-color:rgba(255,255,255,.35); font-size:1rem; }
.kc_live { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }

.kc_buehne:fullscreen { display:flex; align-items:center; justify-content:center; background:#05070f; border-radius:0; }
.kc_buehne:fullscreen #kc_canvas { width:min(100vw, calc(100vh * 4 / 3)); }

/* ---------- Overlays in der Buehne ---------- */
.kc_overlay { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  padding:.8rem; background:rgba(8,10,28,.62); backdrop-filter:blur(2px); }
.kc_overlay[hidden] { display:none; }   /* display:flex schlaegt sonst [hidden] */
.kc_karte {
  width:min(34rem, 100%); max-height:100%; overflow:auto; box-sizing:border-box;
  background:linear-gradient(180deg,#1f2b52,#18203f); color:#eef1ff;
  border:1.5px solid rgba(178,107,232,.65); border-radius:1.1rem;
  box-shadow:0 1rem 3rem rgba(0,0,0,.5); padding:1.1rem 1.3rem; text-align:center;
}
.kc_karte h2 { margin:.1rem 0 .35rem; font-size:1.6rem; color:#ffd79a; }
.kc_karte_klein { margin:.2rem 0; font-size:.86rem; color:#b9c1e0; }
.kc_karte_tipp { margin:.4rem 0 .7rem; line-height:1.5; }
.kc_karte_fakten { list-style:none; padding:0; margin:.5rem auto .8rem; text-align:start; display:grid; gap:.35rem; max-width:28rem; }
.kc_karte_fakten li { display:flex; align-items:baseline; gap:.5rem; line-height:1.4; }
.kc_karte_knoepfe { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:.6rem; }
.kc_karte .jupi_btn, .kc_karte .jupi_btn_alt { min-height:42px; }
.kc_gross { font-size:1.35rem; font-weight:900; margin:.2rem 0 .4rem; }
.kc_sterne { font-size:2.4rem; letter-spacing:.15em; }
.kc_stern_an { color:#ffd54a; text-shadow:0 0 12px rgba(255,213,74,.6); }
.kc_stern_aus { color:rgba(255,255,255,.2); }
@media (prefers-reduced-motion: no-preference) {
  .kc_stern_an { display:inline-block; animation:kc_pop .45s ease-out backwards; }
  .kc_stern_an:nth-child(2) { animation-delay:.15s; }
  .kc_stern_an:nth-child(3) { animation-delay:.3s; }
}
@keyframes kc_pop { 0% { transform:scale(0) rotate(-25deg); } 70% { transform:scale(1.3); } 100% { transform:scale(1); } }

.kc_raster { display:grid; grid-template-columns:repeat(4, 1fr); gap:.45rem; margin:.7rem 0; }
.kc_kachel { min-height:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1rem;
  border-radius:.8rem; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); color:#eef1ff;
  cursor:pointer; font:inherit; padding:.35rem .2rem; }
.kc_kachel:hover:not([disabled]) { border-color:#ffd79a; background:rgba(255,215,154,.12); }
.kc_kachel[disabled] { opacity:.45; cursor:default; }
.kc_kachel.kc_jetzt { border-color:#b26be8; box-shadow:0 0 0 2px rgba(178,107,232,.4); }
.kc_kachel_nr { font-weight:900; font-size:1.05rem; }
.kc_kachel_name { font-size:.72rem; line-height:1.2; }
.kc_kachel_sterne { font-size:.78rem; color:#ffd54a; letter-spacing:.08em; }

/* Farbpunkte (Startkarte + Hilfe-Legende) */
.kc_punkt { flex:none; display:inline-block; width:.85rem; height:.85rem; border-radius:50%; vertical-align:-.1rem; box-shadow:inset -2px -2px 3px rgba(0,0,0,.25); }
.kc_punkt_ziel { background:#f39a2b; }
.kc_punkt_punkt { background:#3d82d6; }
.kc_punkt_glueck { background:#b26be8; }
.kc_punkt_kraft { background:#37b75a; }
.kc_punkt_kugel { background:#dfe6f0; }

/* ---------- Hilfe-Dialog ---------- */
.kc_dialog { width:min(44rem,calc(100% - 2rem)); max-height:86dvh; overflow:auto;
  border:1.5px solid var(--link-color,#43A047); border-radius:1rem; padding:1rem 1.2rem;
  background:var(--ct-color,#fff); color:var(--text-color,#222); }
.kc_dialog::backdrop { background:rgba(0,0,0,.6); }
.kc_dialog_kopf { display:flex; align-items:center; gap:.6rem; }
.kc_dialog_kopf h2 { margin:.4rem 0; font-size:1.2rem; flex:1; }
.kc_dialog_kopf form { margin:0; }
.kc_dialog_zu { min-width:42px; min-height:42px; cursor:pointer; border-radius:.6rem; border:1.5px solid var(--link-color,#43A047);
  background:transparent; color:inherit; font-weight:800; }
.kc_dialog_inhalt h3 { margin:.9rem 0 .3rem; font-size:1.02rem; }
.kc_dialog_inhalt ol, .kc_dialog_inhalt ul { margin:.2rem 0 .4rem 1.2rem; padding:0; }
.kc_dialog_inhalt li { margin:.32rem 0; line-height:1.5; }
.kc_legende { list-style:none; margin-left:0 !important; }
.kc_legende li { display:flex; gap:.55rem; align-items:baseline; }
.kc_lernsatz { background:var(--grey50-color,#fafafa); border-inline-start:4px solid var(--lightblue600-color,#039BE5);
  border-radius:.5rem; padding:.55rem .75rem; line-height:1.55; margin:.4rem 0; }
.kc_dialog_fuss { display:flex; justify-content:flex-end; margin-top:.8rem; }
.kc_dialog_fuss form { margin:0; }
.kc_dialog_fuss .jupi_btn { min-height:42px; }

/* ---------- Dark Mode (Brett ist ohnehin dunkel) ---------- */
html[data-theme="dark"] .kc_chip { background:#262a33; border-color:#3a404d; color:#eef1f7; }
html[data-theme="dark"] .kc_label { color:#b6bdcc; }
html[data-theme="dark"] .kc_chip_ziel strong { color:#ffb15a; }
html[data-theme="dark"] .kc_chip_multi strong { color:#c9c4ff; }
html[data-theme="dark"] .kc_chip_multi strong[data-stufe="2"] { color:#8cc2ff; }
html[data-theme="dark"] .kc_chip_multi strong[data-stufe="3"] { color:#7fe0a2; }
html[data-theme="dark"] .kc_chip_multi strong[data-stufe="5"] { color:#ffc766; }
html[data-theme="dark"] .kc_chip_multi strong[data-stufe="10"] { color:#ff8ab8; }
html[data-theme="dark"] .kc_balken { background:#3a404d; }
html[data-theme="dark"] .kc_balken > i { background:rgba(255,255,255,.3); }
html[data-theme="dark"] .kc_chip_kraft { background:#1d3325; color:#8ce3a5; border-color:#2f5a3d; }
html[data-theme="dark"] .kc_chip_kraft.kc_aktiv { background:#37b75a; color:#fff; }
html[data-theme="dark"] .kc_knopf { background:#262a33; color:#eef1f7; border-color:#454c5b; }
html[data-theme="dark"] .kc_vollbild { background:rgba(15,22,44,.7); color:#fff; }
html[data-theme="dark"] .kc_dialog { background:#20252b; color:#eee; border-color:#fb8c00; }
html[data-theme="dark"] .kc_lernsatz { background:rgba(255,255,255,.06); }
html[data-theme="dark"] .kc_buehne { box-shadow:0 8px 28px rgba(0,0,0,.5); }

/* ---------- Handy ---------- */
@media (max-width:800px) {
  .kc_leiste { grid-template-columns:minmax(0,1fr) auto; gap:.4rem; padding:.5rem; }
  .kc_brand { grid-row:1; grid-column:1 / -1; }
  .kc_brand img { width:36px; height:36px; }
  .kc_brand h1 { font-size:1.15rem; }
  .kc_leiste .jupi_nav_back { grid-row:2; grid-column:1; font-size:.85rem; }
  .kc_leiste .jupi_werkzeuge { grid-row:2; grid-column:2; }
  .kc_leiste .jupi_sprachen_select { max-width:7rem; }
  .kc_panel { --kc-brett-breite:100%; }
}
@media (max-width:640px) {
  .jupi_main.kc_main { padding:.5rem .5rem .8rem; }
  /* Anzeigen und Knoepfe teilen sich zwei Zeilen statt drei. */
  .kc_steuer { gap:.35rem; justify-content:flex-start; }
  .kc_chip { flex:1 1 auto; }
  .kc_hud { display:contents; }
  .kc_chip { padding:.15rem .5rem; }
  .kc_chip strong { font-size:1rem; }
  .kc_chip_multi { min-width:5.8rem; padding-bottom:.7rem; }
  .kc_kugel_punkte { display:none; }
  .kc_chip_kraft { font-size:.78rem; }
  .kc_knoepfe { margin-left:auto; gap:.3rem; }
  .kc_knopf_text { padding:0 .55rem; }
  .kc_karte { padding:.8rem .9rem; }
  .kc_karte h2 { font-size:1.25rem; }
  .kc_karte_tipp, .kc_karte_fakten { font-size:.88rem; }
  .kc_raster { grid-template-columns:repeat(3, 1fr); }
  .kc_kachel { min-height:52px; }
  .kc_sterne { font-size:1.8rem; }
}
@media (max-width:360px) {
  .kc_leiste .jupi_nav_back { grid-row:2; grid-column:1 / -1; justify-self:center; }
  .kc_leiste .jupi_werkzeuge { grid-row:3; grid-column:1 / -1; justify-self:center; }
}

/* Kleines Brett (Handy, flaches Querformat): Karten liegen dann ueber der
   ganzen Seite statt nur ueber dem Brett - sonst muesste man darin scrollen. */
@media (max-width:640px), (max-height:560px) {
  .kc_overlay { position:fixed; z-index:100; padding:1rem; }
  .kc_karte { max-height:calc(100dvh - 2rem); }
}

/* ---------- Bedienziele: mindestens 40 x 40 px (Regel 3.13.5) ----------
   Steht absichtlich am Ende, damit keine fruehere Regel es ueberstimmt. */
.kc_leiste .jupi_nav_back, .kc_leiste .jupi_sprachen_select,
.kc_knopf, .kc_kachel, .kc_karte .jupi_btn, .kc_karte .jupi_btn_alt,
.kc_dialog_zu, .kc_dialog_fuss .jupi_btn { min-width:40px; min-height:40px; }

/* =====================================================================
   NEON-KUGELKAMMER - die eigene Spieloptik (AGENTS.md 3.13.6/3.13.7)
   =====================================================================
   Warum diese Welt (3.13.6b): Das Kind stellt einen Winkel ein und schiesst
   eine leuchtende Kugel ab; sie prallt an gluehenden Naegeln ab
   (Einfallswinkel = Ausfallswinkel), sammelt Multiplikatoren und faellt unten
   in den Korb. Das Brett selbst ist dunkel und voller Lichtpunkte - es ist
   eine Testkammer, in der eine Kugel durch ein Neon-Nagelfeld geschossen
   wird. Deshalb:
     - Seite  = Neon-Kugelkammer: Reaktor (Energie fuer die Kraefte),
                Holo-Konsole (Bahnvorschau "Weitblick"), Lichtleisten,
                Gitterboden, Partikel (kulisse.svg, EINE Szene, cover)
     - Leiste = dunkle Metallkonsole mit einer Neonkante (cyan -> magenta)
     - Buehne = die Testkammer selbst: Metallrahmen mit Eckwinkeln und Glimmen
     - HUD    = Glas-Panels mit Leuchtwerten, Karten = Holo-Panels
   Alle Regeln haengen an body.jupi.kc_body, damit nichts anderes mitgeht.
   Markup, IDs, Mechanik, Speicher-Schluessel und i18n-Keys sind unveraendert.
   Dark Mode = dieselbe Kammer bei Nacht (Kulisse tiefer, Glimmen staerker).
   ===================================================================== */

body.jupi.kc_body {
  /* Neon-Farben an einer Stelle - Hell und Dunkel teilen sie sich. */
  --kc-neon: #35e0ff;
  --kc-neon-2: #ff3fa4;
  --kc-neon-3: #8f6bff;
  --kc-amber: #ffb43a;
  --kc-glas: #16203f;
  --kc-glas-2: #0d1430;
  --kc-glas-3: #070b1c;
  --kc-linie: rgba(53, 224, 255, .38);
  --kc-text: #e8f3ff;
  --kc-text-2: #9fb0d8;

  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* EINE gestreckte Szene (3.13.7 Weg A) - niemals kacheln. */
  background-color: #0a0d1e;
  background-image: url("kulisse.svg");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--kc-text);
}

/* ---------- 1. Seitenaufbau: Fusszeile ganz unten (3.13.2a) ------------
   body ist eine Spalte ueber die ganze Fensterhoehe, main waechst, der Fuss
   wird per margin-top:auto nach unten gedrueckt. Vorher war die Seite ein
   Grid mit einer leeren "bypass"-Zeile: am Handy zog die freie Hoehe diese
   Zeile auf und schob die Kopfleiste um 42,9 px nach unten; der Fuss blieb
   48 px ueber dem Fensterrand. Beides ist damit erledigt. */
body.jupi.kc_body .jupi_container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}
body.jupi.kc_body .jupi_container > .jupi_main { background: transparent; flex: 1 0 auto; }
body.jupi.kc_body .jupi_container > .jupi_footer {
  margin-top: auto;
  margin-bottom: 0;
  background: linear-gradient(180deg, #101a38 0%, #080d1e 62%, #04060f 100%);
  border-top: 0;
  border-radius: .6rem .6rem 0 0;
  box-shadow: inset 0 2px 0 rgba(53, 224, 255, .45), inset 0 6px 18px rgba(53, 224, 255, .10), 0 -10px 24px rgba(0, 0, 0, .45);
  color: #cfe1ff;
  padding: .9rem 1rem 1rem;
}
body.jupi.kc_body .jupi_footer_text { color: #b9cbea; }
body.jupi.kc_body .jupi_footer_text a { color: #7ff0ff; }
body.jupi.kc_body .jupi_footer_text a:hover { color: #ffffff; }

/* ---------- 2. JUPI-Leiste: Metallkonsole mit Neonkante -----------------
   Drei Zonen bleiben (Zurueck / Logo+Name / Sprache+Dark), alles >= 40 px.
   Die Neonkante an der Unterkante ist das Thema: eine Leuchtspur, wie sie
   die Kugel im Brett zieht. */
body.jupi.kc_body .jupi_header.kc_leiste {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: .55rem 1rem .72rem;
  background:
    repeating-linear-gradient(90deg, rgba(120, 220, 255, .05) 0 1px, rgba(0, 0, 0, .18) 1px 9px),
    linear-gradient(180deg, #1d2752 0%, #131a3a 55%, #0b1024 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(120, 220, 255, .22);
  color: var(--kc-text);
}
body.jupi.kc_body .jupi_header.kc_leiste::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--kc-neon) 0%, var(--kc-neon-3) 48%, var(--kc-neon-2) 100%);
  box-shadow: 0 0 12px rgba(53, 224, 255, .8), 0 0 26px rgba(255, 63, 164, .45);
}
body.jupi.kc_body .kc_brand h1 {
  color: #f2f9ff;
  text-shadow: 0 0 14px rgba(53, 224, 255, .55), 0 2px 0 rgba(0, 0, 0, .45);
}
body.jupi.kc_body .kc_brand img {
  border-radius: .5rem;
  box-shadow: 0 0 0 2px rgba(53, 224, 255, .55), 0 0 16px rgba(53, 224, 255, .45);
}
/* Zurueck-Knopf und Sprachwahl als Glas-Elemente der Konsole. */
body.jupi.kc_body .kc_leiste .jupi_nav_back {
  background: linear-gradient(180deg, #1b2750, #0d1430);
  color: #cdefff;
  border: 1.5px solid var(--kc-linie);
  border-radius: .45rem;
  box-shadow: 0 0 10px rgba(53, 224, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .10);
}
body.jupi.kc_body .kc_leiste .jupi_nav_back:hover {
  background: linear-gradient(180deg, #233565, #131c3f);
  color: #ffffff;
  border-color: var(--kc-neon);
}
body.jupi.kc_body .jupi_sprachen_select {
  background: rgba(13, 20, 48, .92);
  color: #d9ecff;
  border-color: var(--kc-linie);
}
body.jupi.kc_body .jupi_sprachen_select:hover { background: #16203f; border-color: var(--kc-neon); }
body.jupi.kc_body .jupi_sprachen_select option { color: #12203c; background: #eef6ff; }
body.jupi.kc_body .jupi_theme_switch {
  background: rgba(53, 224, 255, .16);
  border-color: rgba(53, 224, 255, .55);
  box-shadow: 0 0 10px rgba(53, 224, 255, .28);
}
body.jupi.kc_body .jupi_theme_switch:hover { background: rgba(53, 224, 255, .28); }

/* ---------- 3. Steuerzeile: Glas-Panels mit Leuchtwerten -------------- */
body.jupi.kc_body .jupi_main.kc_main { padding: .7rem 1rem .9rem; }
body.jupi.kc_body .kc_chip {
  background: linear-gradient(180deg, #182247 0%, #0e1531 100%);
  border: 1px solid var(--kc-linie);
  border-radius: .45rem;
  color: var(--kc-text);
  box-shadow: 0 0 12px rgba(53, 224, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .07);
}
body.jupi.kc_body .kc_label { color: #8fa6cf; }
body.jupi.kc_body .kc_chip strong { color: #eaf6ff; }
body.jupi.kc_body .kc_chip_ziel { border-color: rgba(255, 180, 58, .55); }
body.jupi.kc_body .kc_chip_ziel strong { color: var(--kc-amber); text-shadow: 0 0 10px rgba(255, 180, 58, .6); }
body.jupi.kc_body .kc_chip_multi strong { color: #c9c4ff; }
body.jupi.kc_body .kc_chip_multi strong[data-stufe="2"] { color: #8cc2ff; }
body.jupi.kc_body .kc_chip_multi strong[data-stufe="3"] { color: #7fe0a2; }
body.jupi.kc_body .kc_chip_multi strong[data-stufe="5"] { color: #ffd166; }
body.jupi.kc_body .kc_chip_multi strong[data-stufe="10"] { color: #ff8ab8; }
/* Der Multiplikator-Balken ist eine Energieanzeige: dunkle Spur, Neonfuellung. */
body.jupi.kc_body .kc_balken {
  background: #0a1024;
  border: 1px solid rgba(53, 224, 255, .3);
  border-radius: 2px;
  height: 8px;
}
body.jupi.kc_body .kc_balken > span {
  background: linear-gradient(90deg, var(--kc-neon), var(--kc-neon-3) 55%, var(--kc-neon-2));
  box-shadow: 0 0 8px rgba(53, 224, 255, .8);
  border-radius: 1px;
}
body.jupi.kc_body .kc_balken > i { background: rgba(215, 240, 255, .55); width: 1.5px; }
body.jupi.kc_body .kc_chip_kraft {
  background: linear-gradient(180deg, #16283a, #0d1a28);
  border-color: rgba(75, 224, 138, .5);
  color: #9ff0bd;
}
body.jupi.kc_body .kc_chip_kraft.kc_aktiv {
  background: linear-gradient(180deg, #2f9a5c, #1c7442);
  border-color: #7ef0a8;
  color: #fff;
  box-shadow: 0 0 16px rgba(75, 224, 138, .65);
}
body.jupi.kc_body .kc_knopf {
  background: linear-gradient(180deg, #1b2550 0%, #0d1430 100%);
  border: 1.5px solid var(--kc-linie);
  border-radius: .55rem;
  color: #dcefff;
  box-shadow: 0 0 10px rgba(53, 224, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}
body.jupi.kc_body .kc_knopf:hover {
  border-color: var(--kc-neon);
  background: linear-gradient(180deg, #23335f, #101a3a);
  box-shadow: 0 0 16px rgba(53, 224, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
}
body.jupi.kc_body .kc_knopf:focus-visible { outline: 3px solid var(--kc-neon); outline-offset: 2px; }

/* ---------- 4. Buehne: die Testkammer im Metallrahmen ------------------
   Die Platte (Canvas) zieht game.js selbst; hier kommt der Rahmen darum:
   dunkles Metall, Neonkante, vier Eckwinkel - wie ein Ausschnitt der Kammer. */
body.jupi.kc_body .kc_buehne {
  padding: 11px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(120, 220, 255, .05) 0 2px, rgba(0, 0, 0, .22) 2px 12px),
    linear-gradient(180deg, #26305c 0%, #161d3d 48%, #0a0f24 100%);
  box-shadow:
    0 0 0 1px rgba(53, 224, 255, .55),
    0 0 26px rgba(53, 224, 255, .30),
    0 0 62px rgba(143, 107, 255, .22),
    0 18px 34px rgba(0, 0, 0, .6),
    inset 0 0 0 1px rgba(255, 255, 255, .06);
}
body.jupi.kc_body .kc_buehne::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(53, 224, 255, .3), inset 0 0 16px rgba(0, 0, 0, .75);
}
/* Vier Eckwinkel wie an einem Instrumentengehaeuse. */
body.jupi.kc_body .kc_buehne::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 3;
  opacity: .85;
  background:
    linear-gradient(var(--kc-neon), var(--kc-neon)) left top / 20px 2px no-repeat,
    linear-gradient(var(--kc-neon), var(--kc-neon)) left top / 2px 20px no-repeat,
    linear-gradient(var(--kc-neon), var(--kc-neon)) right top / 20px 2px no-repeat,
    linear-gradient(var(--kc-neon), var(--kc-neon)) right top / 2px 20px no-repeat,
    linear-gradient(var(--kc-neon-2), var(--kc-neon-2)) left bottom / 20px 2px no-repeat,
    linear-gradient(var(--kc-neon-2), var(--kc-neon-2)) left bottom / 2px 20px no-repeat,
    linear-gradient(var(--kc-neon-2), var(--kc-neon-2)) right bottom / 20px 2px no-repeat,
    linear-gradient(var(--kc-neon-2), var(--kc-neon-2)) right bottom / 2px 20px no-repeat;
  filter: drop-shadow(0 0 6px rgba(53, 224, 255, .8));
}
body.jupi.kc_body #kc_canvas { border-radius: 8px; }
body.jupi.kc_body .kc_vollbild {
  left: .9rem;
  top: .9rem;
  background: rgba(8, 14, 32, .72);
  border-color: rgba(53, 224, 255, .6);
  color: #dcefff;
}
/* Der Schleier liegt NUR ueber dem Brett, nicht ueber dem Rahmen. */
body.jupi.kc_body .kc_overlay {
  inset: 11px;
  border-radius: 8px;
  background: rgba(4, 8, 20, .66);
  backdrop-filter: blur(3px);
}

/* ---------- 5. Karten: Holo-Panels ------------------------------------- */
body.jupi.kc_body .kc_karte {
  background: linear-gradient(180deg, rgba(24, 34, 68, .98) 0%, rgba(10, 16, 36, .99) 100%);
  color: var(--kc-text);
  border: 1.5px solid rgba(53, 224, 255, .45);
  border-top-color: var(--kc-neon-2);
  border-radius: .7rem;
  box-shadow: 0 0 0 1px rgba(53, 224, 255, .18), 0 0 30px rgba(53, 224, 255, .22), 0 18px 40px rgba(0, 0, 0, .6);
}
body.jupi.kc_body .kc_karte h2 {
  color: #ffd166;
  text-shadow: 0 0 12px rgba(255, 209, 102, .35);
}
body.jupi.kc_body .kc_karte_klein { color: #9fb0d8; }
body.jupi.kc_body .kc_karte_tipp { color: #dcebff; }
body.jupi.kc_body .kc_karte_fakten li { color: #dcebff; }
body.jupi.kc_body .kc_karte_fakten li strong { color: #ffd166; }
body.jupi.kc_body .kc_stern_an { color: #ffd54a; text-shadow: 0 0 12px rgba(255, 213, 74, .75); }
body.jupi.kc_body .kc_stern_aus { color: rgba(255, 255, 255, .18); }
body.jupi.kc_body .kc_karte .jupi_btn {
  background: linear-gradient(180deg, #35e0ff 0%, #14a9d6 100%);
  color: #04121f;
  border: 0;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(53, 224, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}
body.jupi.kc_body .kc_karte .jupi_btn:hover {
  background: linear-gradient(180deg, #6af0ff, #1cbde9);
  box-shadow: 0 0 22px rgba(53, 224, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .6);
}
body.jupi.kc_body .kc_karte .jupi_btn_alt {
  background: rgba(10, 16, 36, .7);
  color: #cdefff;
  border: 1.5px solid rgba(143, 107, 255, .7);
  box-shadow: 0 0 12px rgba(143, 107, 255, .35);
}
body.jupi.kc_body .kc_karte .jupi_btn_alt:hover {
  background: rgba(28, 40, 80, .9);
  border-color: var(--kc-neon-3);
}
/* Level-Kacheln wie Modul-Schalter. */
body.jupi.kc_body .kc_kachel {
  background: linear-gradient(180deg, #182247 0%, #0d1430 100%);
  border: 1.5px solid var(--kc-linie);
  color: #dcebff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
body.jupi.kc_body .kc_kachel:hover:not([disabled]) {
  border-color: var(--kc-neon);
  background: linear-gradient(180deg, #22315e, #121b3c);
  box-shadow: 0 0 14px rgba(53, 224, 255, .4);
}
body.jupi.kc_body .kc_kachel.kc_jetzt {
  border-color: var(--kc-neon-2);
  box-shadow: 0 0 0 2px rgba(255, 63, 164, .45), 0 0 16px rgba(255, 63, 164, .45);
}
body.jupi.kc_body .kc_kachel_sterne { color: #ffd54a; }

/* ---------- 6. Hilfe-Fenster: das Holo-Handbuch ------------------------ */
body.jupi.kc_body .kc_dialog {
  background: linear-gradient(180deg, #16203f 0%, #0a1024 100%);
  color: var(--kc-text);
  border: 1.5px solid rgba(53, 224, 255, .5);
  border-radius: .7rem;
  box-shadow: 0 0 30px rgba(53, 224, 255, .3), 0 24px 60px rgba(0, 0, 0, .7);
}
body.jupi.kc_body .kc_dialog::backdrop { background: rgba(2, 4, 12, .78); }
body.jupi.kc_body .kc_dialog_kopf h2 { color: #ffd166; }
body.jupi.kc_body .kc_dialog_inhalt h3 { color: #7ff0ff; }
body.jupi.kc_body .kc_dialog_zu {
  border-color: rgba(53, 224, 255, .6);
  background: rgba(10, 16, 36, .8);
  color: #dcefff;
}
body.jupi.kc_body .kc_lernsatz {
  background: rgba(53, 224, 255, .10);
  border-inline-start: 4px solid var(--kc-neon);
  color: #e8f6ff;
  box-shadow: inset 0 0 0 1px rgba(53, 224, 255, .22);
}

/* ---------- 7. Dark Mode: dieselbe Kammer bei Nacht --------------------
   Die Kulisse wird tiefer gelegt (dunkler Schleier ueber derselben Szene),
   die Neonkanten gluehen staerker, das Brett bleibt unveraendert dunkel. */
html[data-theme="dark"] body.jupi.kc_body {
  background-color: #05060f;
  background-image:
    radial-gradient(70% 55% at 50% 4%, rgba(53, 224, 255, .16), rgba(53, 224, 255, 0) 70%),
    linear-gradient(180deg, rgba(3, 5, 14, .62) 0%, rgba(2, 3, 9, .82) 100%),
    url("kulisse.svg");
  background-size: cover, cover, cover;
  background-position: center top, center top, center top;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}
html[data-theme="dark"] body.jupi.kc_body .jupi_header.kc_leiste {
  background:
    repeating-linear-gradient(90deg, rgba(120, 220, 255, .04) 0 1px, rgba(0, 0, 0, .26) 1px 9px),
    linear-gradient(180deg, #131b3c 0%, #0b1128 58%, #060a19 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(120, 220, 255, .18);
}
html[data-theme="dark"] body.jupi.kc_body .kc_chip {
  background: linear-gradient(180deg, #141d3c 0%, #0a1024 100%);
  border-color: rgba(53, 224, 255, .3);
  box-shadow: 0 0 14px rgba(53, 224, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-theme="dark"] body.jupi.kc_body .kc_knopf {
  background: linear-gradient(180deg, #16203f 0%, #0a1024 100%);
  border-color: rgba(53, 224, 255, .32);
}
html[data-theme="dark"] body.jupi.kc_body .kc_knopf:hover {
  border-color: var(--kc-neon);
  background: linear-gradient(180deg, #1e2b55, #0d1531);
}
html[data-theme="dark"] body.jupi.kc_body .kc_buehne {
  box-shadow:
    0 0 0 1px rgba(53, 224, 255, .45),
    0 0 30px rgba(53, 224, 255, .28),
    0 0 70px rgba(255, 63, 164, .18),
    0 18px 34px rgba(0, 0, 0, .75),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
}
html[data-theme="dark"] body.jupi.kc_body .kc_overlay { background: rgba(2, 4, 10, .74); }
html[data-theme="dark"] body.jupi.kc_body .kc_karte {
  background: linear-gradient(180deg, rgba(18, 26, 54, .99) 0%, rgba(6, 10, 24, .99) 100%);
  border-color: rgba(53, 224, 255, .38);
  border-top-color: var(--kc-neon-2);
}
html[data-theme="dark"] body.jupi.kc_body .kc_dialog {
  background: linear-gradient(180deg, #121a38 0%, #060a18 100%);
}
html[data-theme="dark"] body.jupi.kc_body .jupi_container > .jupi_footer {
  background: linear-gradient(180deg, #0a1226 0%, #05070f 62%, #02030a 100%);
  border-top: 0;
}
html[data-theme="dark"] body.jupi.kc_body .jupi_footer_text { color: #a9bcdf; }

/* ---------- 8. Handy: Rahmen und Knoepfe bleiben bedienbar ------------- */
@media (max-width: 800px) {
  body.jupi.kc_body .jupi_header.kc_leiste { padding: .5rem .6rem .7rem; }
  body.jupi.kc_body .kc_buehne { padding: 9px; border-radius: 12px; }
  body.jupi.kc_body .kc_buehne::before { inset: 4px; }
  body.jupi.kc_body .kc_overlay { inset: 9px; border-radius: 7px; }
  body.jupi.kc_body .kc_vollbild { left: .8rem; top: .8rem; }
}
@media (max-width: 640px) {
  body.jupi.kc_body .jupi_main.kc_main { padding: .5rem .5rem .7rem; }
  body.jupi.kc_body .kc_leiste .jupi_nav_back { border-radius: .4rem; }
}
@media (max-width: 360px) {
  body.jupi.kc_body .jupi_header.kc_leiste { padding: .45rem .5rem .65rem; }
}