/* ---------- Hang-Berg-Rennen - alle Styles mit Praefix hr_ ---------- */
/* Seitenansicht-Hillclimb: Energie bergauf/bergab erleben (Physik).
   GUI-Richtlinien: dünne JUPI-Leiste (3.13.2, Typ 1), Startmenü mit Hilfe-
   und Info-Dialog, KEINE Info-Box unter dem Spiel (Goldene Negativ-Regel
   3.13.4). Bedienziele mindestens 40 x 40 px (3.13.5). */

/* hidden muss trotz display:flex wirken (jupi-Klassiker) */
[hidden] { display: none !important; }

/* ---------- Dünne JUPI-Leiste (Typ 1) ----------
   Links "Alle Spiele", mittig Spiel-Logo + Name, rechts Sprachwahl und
   Dark-Mode-Schalter. Im Vollbild wird nur das Spielfeld gezeigt, die
   Leiste liegt außerhalb und ist dort automatisch verborgen. */
.hr_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
  padding: .4rem .9rem;
  min-height: 48px;
}
.hr_leiste_zurueck {
  order: 1;
  color: #fff;
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-weight: 700;
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.hr_leiste_zurueck:hover { background: rgba(255,255,255,.3); text-decoration: none; }
.hr_leiste_titel {
  order: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 auto;
}
.hr_leiste_titel img {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: .5rem;
  background: #FFF4E1;
}
.hr_leiste_titel h1 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.hr_leiste .jupi_sprachen_wahl { order: 3; margin: 0; }
.hr_leiste .jupi_sprachen_select { max-width: 7.5rem; font-size: .8rem; }
.hr_leiste #jupi_theme_toggle { order: 4; margin-left: 0; }
/* Sprachwahl und Dark-Mode-Schalter sind Bedienziele und wachsen auf die
   Mindesthoehe 40 px (Regel 3.13.5) - die Pille innen bleibt zentriert. */
.hr_leiste .jupi_sprachen_wahl,
.hr_leiste .jupi_sprachen_select { min-height: 40px; }
.hr_leiste #jupi_theme_toggle {
  min-height: 40px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Buehne mit Canvas --- */
.hr_buehne {
  background: var(--ct-color);
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding:.7rem;
  margin-bottom:1rem;
}
.hr_spielfeld {
  position:relative;
  width:100%;
  border-radius:.85rem;
  overflow:hidden;
  background:#87CEEB;
  touch-action:none;
}
.hr_spielfeld canvas {
  display:block;
  width:100%;
  height:auto;
  vertical-align:middle;
}

/* --- Farben/Maße der Spiel-Oberfläche (dunkelblau, Referenz-Look) --- */
.hr_spielfeld {
  --hr-navy-1: #1f4262;
  --hr-navy-2: #142e47;
  --hr-navy-3: #0b1b2b;
  --hr-gold: #FFB52E;
  --hr-gold-hi: #FFD966;
  --hr-panel: linear-gradient(#21496c, #15304a);
  --hr-panel-schatten: 0 .2em 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);
  font-family: ui-rounded, "Arial Rounded MT Bold", "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Schriftgröße der Oberfläche folgt der Spielfeld-Breite (cqw), nicht dem Fenster:
   sonst wäre das HUD auf großen Bildschirmen riesig. Fallback: vw. */
.hr_spielfeld { container-type: inline-size; }
@supports (width: 1cqw) {
  .hr_hud, .hr_ziel { font-size: clamp(11px, 1.3cqw, 14px); }
  .hr_overlay_karte { font-size: clamp(10px, 1.5cqw, 15px); }
}

/* Startmenü: HUD dahinter ausblenden, damit sich nichts überlagert */
.hr_spielfeld:has(#hr_auswahl:not([hidden])) .hr_hud,
.hr_spielfeld:has(#hr_auswahl:not([hidden])) .hr_ziel { visibility:hidden; }

/* --- HUD (auf dem Canvas) --- */
.hr_hud {
  position:absolute; left:0; right:0;
  display:flex; align-items:flex-start; gap:.5em;
  padding:.55em .7em;
  pointer-events:none;
  font-size:clamp(11px, 1.3cqw, 14px);
  z-index:3;
}
.hr_hud > * { pointer-events:auto; }
.hr_hud_oben { top:0; }
.hr_hud_unten { bottom:0; align-items:flex-end; padding-bottom:.7em; }

/* Eine Leiste für Strecke, Tempo und Sprit (wie im Referenzbild) */
.hr_chips {
  display:flex; flex-wrap:nowrap; align-items:center; gap:0; min-width:0;
  background:var(--hr-panel);
  border:2px solid var(--hr-navy-3);
  border-radius:.95em;
  box-shadow:var(--hr-panel-schatten);
  padding:.2em .3em;
}
.hr_chip {
  display:inline-flex; align-items:center; gap:.4em;
  padding:.28em .55em;
  color:#fff;
  font-weight:700;
  white-space:nowrap;
}
.hr_chip + .hr_chip { border-left:1px solid rgba(255,255,255,.16); }
.hr_levelwahl + .hr_chip { border-left:1px solid rgba(255,255,255,.16); }
.hr_chip strong {
  color:var(--hr-gold);
  font-size:1.2em; font-weight:900;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  min-width:1.9em;
}
.hr_ico { width:1.75em; height:1.75em; flex:0 0 auto; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.hr_sprit { min-width:0; }
.hr_sprit strong { min-width:2.6em; }
.hr_sprit_balken {
  display:inline-block;
  width:4.2em; height:.78em;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  vertical-align:middle;
  margin-left:.15em;
  overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.5);
}
.hr_sprit_fuell {
  display:block; height:100%;
  width:100%;
  background:linear-gradient(#FFE27A,#FFB300 55%,#F59000);
  border-radius:999px;
  transition:width .15s linear;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.hr_sprit_fuell.faellt { background:linear-gradient(#FF8A80,#E53935 55%,#C62828); }

.hr_hud_rechts { margin-left:auto; display:flex; gap:.45em; }
.hr_iconbtn {
  border:2px solid var(--hr-navy-3); cursor:pointer;
  background:var(--hr-panel);
  color:#fff;
  width:2.9em; height:2.9em;
  min-width:40px; min-height:40px;
  border-radius:.8em;
  font-size:max(13px, 1em);
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--hr-panel-schatten);
  padding:0;
}
.hr_iconbtn:hover { background:linear-gradient(#2a5a84,#1a3d5e); }
.hr_iconbtn:active { transform:translateY(2px); box-shadow:0 0 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16); }
.hr_iconbtn:focus-visible { outline:3px solid #FDD835; outline-offset:2px; }
.hr_iconbtn_hilfe span {
  color:#FF4B3E; font-size:1.9em; font-weight:900; line-height:1;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
.hr_iconbtn svg { display:block; }

/* Ziel-Plakette unter der Leiste */
.hr_ziel {
  position:absolute; left:50%; top:max(64px, 5.2em);
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex; align-items:center; gap:.45em;
  font-size:clamp(11px, 1.3cqw, 14px);
  background:var(--hr-panel);
  border:2px solid var(--hr-navy-3);
  border-radius:.95em;
  box-shadow:var(--hr-panel-schatten);
  padding:.2em 1em .2em .7em;
  color:#fff; font-weight:800;
  white-space:nowrap;
  pointer-events:none;
}
.hr_ziel b { color:var(--hr-gold); font-weight:900; }
.hr_ziel .hr_ico { width:1.5em; height:1.5em; }

/* Level-Wahl in der Leiste */
.hr_levelwahl {
  display:inline-flex; align-items:center; gap:.45em;
  color:#fff;
  padding:.1em .45em .1em .35em;
  font-weight:700;
}
.hr_levelwahl select {
  background:#fff; color:#10202e;
  border:none; border-radius:.55em;
  font-weight:800; width:7.8em; max-width:11em;
  min-height:40px;
  padding:.1em .45em;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}

/* Touch-Pedale unten (blau = Bremse, rot = Gas) mit Fortschritt dazwischen */
.hr_pedale {
  display:flex; gap:.9em; justify-content:space-between; align-items:flex-end;
  width:100%;
}
.hr_pedal {
  position:relative; overflow:hidden;
  flex:1 1 0;
  max-width:34%;
  min-height:44px;
  box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  border:.1em solid; cursor:pointer;
  border-radius:.62em;
  font-family:inherit;
  font-weight:900;
  font-size:1.75em;
  line-height:1.1;
  padding:.3em .6em .38em;
  color:#fff;
  text-shadow:0 .07em 0 rgba(0,0,0,.4);
  box-shadow:0 .12em 0 rgba(0,0,0,.38), inset 0 .08em 0 rgba(255,255,255,.4), inset 0 -.16em 0 rgba(0,0,0,.16);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.hr_pedal:active, .hr_pedal.is_down {
  transform:translateY(.1em);
  box-shadow:0 .02em 0 rgba(0,0,0,.38), inset 0 .08em 0 rgba(255,255,255,.3), inset 0 -.16em 0 rgba(0,0,0,.2);
  filter:brightness(.93);
}
.hr_pedal_bremse { background:linear-gradient(#55B2F7,#2377D6 55%,#1B5EBB); border-color:#0F3D84; }
.hr_pedal_gross  { background:linear-gradient(#FF7466,#E6402F 55%,#C72D21); border-color:#8E1B14; }
.hr_pedal_text { position:relative; z-index:1; }
/* Pedal-Gummi: Noppen bei der Bremse, Rillen beim Gas */
.hr_pedal::before {
  content:""; position:absolute; top:50%; width:1.55em; height:1.55em;
  transform:translateY(-50%);
  border-radius:.3em;
  opacity:.9;
}
.hr_pedal_bremse { padding-left:2.5em; }
.hr_pedal_gross { padding-right:2.5em; }
.hr_pedal_bremse::before {
  left:.5em;
  background:
    radial-gradient(circle, rgba(255,255,255,.7) 34%, transparent 38%) 0 0 / .52em .52em,
    rgba(8,45,105,.45);
  box-shadow:inset 0 0 0 .07em rgba(255,255,255,.4);
}
.hr_pedal_gross::before {
  right:.5em;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 .2em, transparent .2em .4em),
    rgba(120,15,10,.4);
  box-shadow:inset 0 0 0 .07em rgba(255,255,255,.4);
}
.hr_pfeil { width:0; height:0; border-top:.5em solid transparent; border-bottom:.5em solid transparent; flex:0 0 auto;
  filter:drop-shadow(0 .05em 0 rgba(0,0,0,.35)); }
.hr_pfeil_l { border-right:.82em solid #fff; }
.hr_pfeil_r { border-left:.82em solid #fff; }

/* Fortschrittsbalken zwischen den Pedalen */
.hr_fort {
  flex:1 1 30%; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:.3em;
  padding:0 1.6em .25em .9em;
  pointer-events:none;
}
.hr_fort_leiste {
  position:relative; width:100%; height:1.15em;
  border-radius:999px;
  background:linear-gradient(#0d2033,#183349);
  border:2px solid var(--hr-navy-3);
  box-shadow:0 .15em 0 rgba(0,0,0,.28), inset 0 .1em .3em rgba(0,0,0,.55);
}
.hr_fort_fuell {
  position:absolute; left:0; top:0; bottom:0; width:0;
  border-radius:999px;
  background:linear-gradient(#FFE27A,#FFB300 60%,#F59000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.hr_fort_ticks {
  position:absolute; inset:0 .5em; border-radius:999px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.25) 0 2px, transparent 2px 10%);
  mix-blend-mode:overlay;
}
.hr_fort_auto {
  position:absolute; top:50%; left:0; width:2.9em;
  transform:translate(-50%,-66%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.45));
}
.hr_fort_flagge {
  position:absolute; right:-.9em; top:50%; width:1.9em;
  transform:translateY(-68%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));
}
.hr_fort_text {
  color:#fff; font-weight:800; font-size:1.05em;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
  background:rgba(11,27,43,.62);
  border-radius:999px;
  padding:.05em .75em;
  white-space:nowrap;
}

/* --- Overlays (Start / Sieg / Unfall) --- */
.hr_overlay {
  position:absolute; inset:0;
  z-index:5;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 45%, rgba(8,22,38,.52), rgba(4,12,22,.84));
  padding:1em;
  text-align:center;
}
.hr_overlay[hidden] { display:none !important; }
.hr_overlay_karte {
  background:linear-gradient(#1f4262, #132b43);
  color:#EAF3FA;
  border:3px solid var(--hr-navy-3);
  border-radius:1.15em;
  padding:.85em 1.1em 1em;
  font-size:16px;
  max-width:26rem;
  width:100%;
  box-shadow:0 .45em 0 rgba(0,0,0,.3), 0 14px 40px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.14);
  max-height:97%;
  overflow:auto;
}
.hr_startkarte { max-width:min(54rem, 100%); }
.hr_overlay_karte h3 {
  margin:.1em 0 .3em;
  font-size:1.45em;
  font-weight:900;
  color:#FFD35A;
  text-shadow:0 .1em 0 rgba(0,0,0,.4);
}
.hr_overlay_karte p {
  margin:.3em 0;
  font-size:.92em;
  line-height:1.4;
  color:#DCE9F4;
}
.hr_lernsatz {
  background:rgba(255,255,255,.08);
  border-left:4px solid #5BC0F8;
  border-radius:.5em;
  padding:.3em .55em;
  text-align:left;
  font-size:.84em;
}
.hr_menu_ueberschrift {
  font-weight:900;
  color:#FFFFFF !important;
  margin:.45em 0 .05em !important;
}
.hr_sterne {
  font-size:3.1em;
  line-height:1;
  letter-spacing:.08em;
  margin:.3em 0 .5em;
  color:#FFC933;
  text-shadow:0 .09em 0 #9A6200, 0 .14em .25em rgba(0,0,0,.35);
}
.hr_sterne .aus { color:#55646F; text-shadow:0 .09em 0 #2C3943; opacity:1; }
.hr_overlay_btns {
  display:flex; flex-wrap:wrap; gap:.5em; justify-content:center;
  margin-top:.6em;
}
.hr_overlay_btns .jupi_btn,
.hr_overlay_btns .jupi_btn_alt {
  min-height:44px;
  min-width:6.4em;
  display:inline-flex; align-items:center; justify-content:center;
  /* Emoji steht als eigener Textknoten vor dem data-i18n-Span - in einem
     Flex-Kasten verschwindet der Leerraum zwischen beiden, darum gap. */
  gap:.4em;
  font-weight:900;
  color:#fff;
  border-radius:.8em;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.hr_overlay_btns .jupi_btn {
  background:linear-gradient(#7BE35A,#36A82B 60%,#2C8F22);
  border:3px solid #1B6A16;
  box-shadow:0 .2em 0 #17560F, inset 0 2px 0 rgba(255,255,255,.4);
}
.hr_overlay_btns .jupi_btn_alt {
  background:linear-gradient(#55B2F7,#2377D6 60%,#1B5EBB);
  border:3px solid #0F3D84;
  box-shadow:0 .2em 0 #0B2F6A, inset 0 2px 0 rgba(255,255,255,.4);
}
.hr_overlay_btns .jupi_btn:hover, .hr_overlay_btns .jupi_btn_alt:hover { filter:brightness(1.07); }
.hr_overlay_btns .jupi_btn:active, .hr_overlay_btns .jupi_btn_alt:active { transform:translateY(.15em); box-shadow:0 .03em 0 rgba(0,0,0,.4); }
.hr_overlay_btns button:focus-visible { outline:3px solid #FDD835; outline-offset:2px; }
/* Unfall / Sprit leer: rötliche Karte */
#hr_runde.verloren .hr_overlay_karte { background:linear-gradient(#52282A, #301619); }
#hr_runde.verloren .hr_overlay_karte h3 { color:#FF9E8F; }

/* Level-Raster in der Start-Auswahl (Vorschaubilder wie im Referenzbild) */
.hr_level_raster {
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:.55em;
  margin:.5em 0 .25em;
}
.hr_level_knopf {
  position:relative;
  display:flex; flex-direction:column; align-items:stretch; gap:.18em;
  border:3px solid var(--hr-navy-3);
  background:linear-gradient(#27506f, #183550);
  border-radius:.85em;
  padding:.22em .22em .3em;
  min-height:44px;
  cursor:pointer;
  font-weight:800;
  font-size:.8em;
  line-height:1.15;
  color:#fff;
  font-family:inherit;
  box-shadow:0 .18em 0 rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14);
}
.hr_level_knopf:hover:not(:disabled) { filter:brightness(1.1); }
.hr_level_knopf:focus-visible { outline:3px solid #FDD835; outline-offset:2px; }
.hr_level_knopf.gewaehlt {
  border-color:#82E34F;
  box-shadow:0 0 0 2px rgba(130,227,79,.55), 0 .18em 0 rgba(0,0,0,.32);
}
.hr_level_knopf:disabled { cursor:not-allowed; }
.hr_lv_bild {
  position:relative; display:block;
  aspect-ratio:16 / 9;
  border-radius:.55em; overflow:hidden;
  background:#0f2336;
}
.hr_lv_bild img { width:100%; height:100%; object-fit:cover; display:block; }
.hr_lv_nr {
  position:absolute; left:.25em; top:.25em;
  min-width:1.4em; height:1.4em; padding:0 .25em;
  border-radius:.45em;
  background:rgba(11,27,43,.88);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; font-size:.78em; font-weight:900;
  display:flex; align-items:center; justify-content:center;
}
.hr_lv_lock {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,18,30,.42);
  font-size:1.6em;
}
.hr_level_knopf.gesperrt .hr_lv_bild img { filter:grayscale(.6) brightness(.85); }
.hr_level_knopf.gesperrt .hr_lv_name { color:#A9B8C5; }
.hr_lv_name { display:block; padding:0 .1em; }
.hr_level_knopf .hr_mini_sterne {
  display:flex; align-items:center; justify-content:center; gap:.05em;
  font-size:1em; line-height:1;
}
.hr_stern { color:#53636F; text-shadow:0 1px 0 rgba(0,0,0,.35); }
.hr_stern.an { color:#FFC933; text-shadow:0 1px 0 #8A5600; }
.hr_lv_best { margin-left:.35em; font-size:.68em; font-weight:800; color:#B8CCDC; }

/* --- Dialoge: ❓ So spielt man und ℹ️ Über das Spiel --- */
.hr_menue {
  border:none;
  border-radius:1rem;
  padding:0;
  width:min(34rem, calc(100vw - 1.5rem));
  max-height:min(86vh, 46rem);
  background:var(--ct-color, #fff);
  color:var(--blk-color, #222);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  overflow:hidden;
}
/* display:flex NUR im offenen Zustand - ein unbedingtes display:flex
   ueberschreibt das native "dialog:not([open]) { display:none }" und wuerde
   BEIDE Dialoge dauerhaft unter dem Spiel anzeigen (im Sichtbild gefunden). */
.hr_menue[open] {
  display:flex;
  flex-direction:column;
}
.hr_menue::backdrop { background:rgba(10,24,16,.62); }
.hr_menue_kopf {
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem .6rem;
  background:linear-gradient(#21496c, #15304a);
  border-bottom:3px solid #0b1b2b;
}
.hr_menue_kopf h2 { margin:0; font-size:1.12rem; flex:1; line-height:1.3; color:#FFD35A; text-shadow:0 .08rem 0 rgba(0,0,0,.4); }
.hr_menue_zu {
  flex:0 0 auto;
  min-width:40px; min-height:40px;
  border:2px solid #0b1b2b; border-radius:.65rem;
  background:linear-gradient(#2a5a84,#1a3d5e);
  font-size:1.3rem; line-height:1;
  cursor:pointer;
  color:#fff;
}
.hr_menue_zu:hover { background:linear-gradient(#3a6f9d,#215079); }
.hr_menue_zu:focus-visible { outline:3px solid #FDD835; outline-offset:2px; }
.hr_menue_inhalt {
  padding:.6rem 1rem .3rem;
  overflow:auto;
  flex:1 1 auto;
}
.hr_menue_inhalt p { margin:.5rem 0; font-size:.97rem; line-height:1.55; }
.hr_hilfe_liste { margin:.2rem 0; padding-left:1.2rem; }
.hr_hilfe_liste li { margin:.35rem 0; font-size:.97rem; line-height:1.5; }
.hr_merk {
  margin:.6rem 0 .4rem !important;
  background:var(--grey50-color, #f5f5f5);
  border:2px dashed var(--grey400-color, #bbb);
  border-radius:.7rem;
  padding:.55rem .7rem;
  font-size:.95rem !important;
}
.hr_lernziel {
  background:var(--grey50-color, #f5f5f5);
  border-left:4px solid var(--lightblue600-color, #039BE5);
  border-radius:.5rem; padding:.55rem .75rem;
}
.hr_menue_aktionen {
  padding:.6rem 1rem .9rem;
  display:flex; justify-content:flex-end;
}
.hr_menue_aktionen .jupi_btn { min-height:40px; }

/* --- Dark Mode (Spielfeld-Karten sind immer dunkelblau, nur Dialoge wechseln) --- */
html[data-theme="dark"] .hr_leiste_titel h1 { color:#fff; }
html[data-theme="dark"] .hr_menue {
  background:#1e2a24; color:#E8F0EB;
}
html[data-theme="dark"] .hr_menue::backdrop { background:rgba(4,12,8,.72); }
html[data-theme="dark"] .hr_merk {
  background:#16211c; border-color:#4a5a52;
}
html[data-theme="dark"] .hr_lernziel {
  background:#1a2a33; border-left-color:#29B6F6;
}

/* --- Handy --- */
@media (max-width:560px) {
  .hr_leiste { padding:.35rem .5rem; gap:.35rem .5rem; }
  .hr_leiste_titel { margin:0; }
  .hr_leiste_titel img { display:none; }
  .hr_leiste_titel h1 { font-size:.92rem; }
  .hr_leiste_zurueck { padding:.25rem .6rem; font-size:.8rem; }
  .hr_leiste .jupi_sprachen_select { max-width:4.6rem; font-size:.72rem; }
  .hr_hud { font-size:max(10px, 2.5vw); padding:.35rem .4rem; gap:.3rem; }
  .hr_hud_oben { flex-wrap:wrap; }
  .hr_chips { border-radius:.8em; }
  .hr_chip { padding:.22em .5em; gap:.28em; }
  .hr_lbl { display:none; }
  .hr_chip strong { min-width:0; }
  .hr_sprit { min-width:0; }
  .hr_sprit_balken { width:3.4em; }
  .hr_levelwahl select { width:6.2em; max-width:6.2em; font-size:.85em; }
  .hr_iconbtn { width:2.6em; height:2.6em; }
  .hr_ziel { top:auto; bottom:calc(48px + 1.3em); font-size:max(10px, 2.6vw); }
  .hr_pedale { gap:.6em; }
  .hr_pedal { min-height:48px; font-size:1.6em; max-width:48%; }
  .hr_pedal::before { display:none; }
  .hr_fort { display:none; }
  .hr_overlay { padding:.5rem; }
  .hr_overlay_karte { padding:.65rem .6rem .75rem; font-size:15px; }
  .hr_overlay_karte h3 { font-size:1.15rem; margin:.05rem 0 .3rem; }
  .hr_start_frage { display:none; }
  .hr_lernsatz { font-size:.82rem; }
  .hr_sterne { font-size:2.2rem; margin:.2rem 0 .35rem; }
  .hr_level_raster { grid-template-columns:repeat(3, 1fr); gap:.3rem; margin:.35rem 0 .15rem; }
  /* Auf dem Handy ohne Vorschaubild: Nummer + Name + Sterne */
  .hr_level_knopf { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; font-size:.7rem; padding:.25rem .15rem; column-gap:.25rem; }
  .hr_lv_bild { aspect-ratio:auto; background:none; overflow:visible; display:inline-flex; }
  .hr_lv_bild img { display:none; }
  .hr_lv_nr { position:static; min-width:1.2rem; height:1.2rem; font-size:.7rem; }
  .hr_lv_best { display:none; }
  .hr_lv_lock { position:static; background:none; font-size:.9rem; }
  .hr_level_knopf .hr_mini_sterne { width:100%; font-size:.9rem; }
  .hr_overlay_btns { margin-top:.45rem; gap:.45rem; }
  .hr_overlay_btns .jupi_btn,
  .hr_overlay_btns .jupi_btn_alt { min-width:6.2rem; padding:.45em .9em; }
  /* Hoeheres Spielfeld: Canvas 16:9 ist auf 390px nur ~195px - das reicht
     fuer das Auswahl-Overlay nicht (Losfahren waere abgeschnitten). */
  .hr_spielfeld {
    aspect-ratio:auto;
    min-height:min(58vh, 340px);
    display:flex;
  }
  .hr_spielfeld canvas {
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:contain;
    background:#87CEEB;
  }
  .hr_menue { width:calc(100vw - 1rem); max-height:92vh; }
}
@media (min-width:561px) and (max-width:820px) {
  .hr_level_raster { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:.4rem; }
  .hr_level_knopf { font-size:.7rem; }
  .hr_lv_best { display:none; }
}
/* Pedale aus, solange ein Overlay offen ist (sonst gucken sie unter der Karte hervor) */
.hr_spielfeld:has(.hr_overlay:not([hidden])) .hr_hud_unten {
  visibility:hidden;
  pointer-events:none;
}
@media (max-height:520px) and (orientation:landscape) {
  .hr_leiste { min-height:40px; padding:.2rem .5rem; }
  .hr_buehne { padding:.4rem; }
}


/* =====================================================================
   SEITENRAHMEN IM SPIEL-STIL (Leiste, Hintergrund, Spielfeld-Rahmen, Fuss)
   Wie bei Neumark 1400: die Umgebung des Spielfelds folgt dem Spiel-Look -
   hier dunkelblaue Armaturen-Optik, Asphalt-Streifen und Alpenhimmel.
   Nur Optik, keine Layout-Aenderung.
   ===================================================================== */
body.hr_body {
  --hr-seite-1: #4f9fe0;
  --hr-seite-2: #a9d6f5;
  --hr-seite-3: #cfe9c4;
  --hr-seite-4: #86c35f;
  --hr-asphalt: #2a2f36;
  background:
    radial-gradient(520px 520px at 88% 70px, rgba(255,240,170,.85) 0, rgba(255,240,170,.35) 22%, transparent 62%),
    linear-gradient(180deg, var(--hr-seite-1) 0, var(--hr-seite-2) 34%, var(--hr-seite-3) 72%, var(--hr-seite-4) 100%);
  background-color: var(--hr-seite-2);
  background-repeat: no-repeat;
  background-attachment: scroll;
  min-height: 100vh;
  color: #10243a;
}
html[data-theme="dark"] body.hr_body {
  --hr-seite-1: #07101d;
  --hr-seite-2: #0f2238;
  --hr-seite-3: #12301f;
  --hr-seite-4: #0b1f14;
  background:
    radial-gradient(420px 420px at 88% 70px, rgba(190,205,255,.28) 0, rgba(190,205,255,.08) 28%, transparent 62%),
    linear-gradient(180deg, var(--hr-seite-1) 0, var(--hr-seite-2) 34%, var(--hr-seite-3) 78%, var(--hr-seite-4) 100%);
  background-color: var(--hr-seite-2);
  background-repeat: no-repeat;
  color: #dbe9f7;
}

/* Strassenstreifen: Asphalt mit weissen Strichen */
.hr_body .hr_leiste::after,
.hr_body .jupi_footer::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 7px;
  background:
    repeating-linear-gradient(90deg, #f4f4f0 0 26px, transparent 26px 52px) center / 100% 2px no-repeat,
    var(--hr-asphalt);
  pointer-events: none;
}
.hr_body .hr_leiste::after { bottom: -7px; box-shadow: 0 3px 6px rgba(0,0,0,.25); }

/* Kopfzeile: dunkelblaue Armaturenleiste */
html body.hr_body .hr_leiste,
html[data-theme="dark"] body.hr_body .hr_leiste {
  background: linear-gradient(180deg, #2a5880 0%, #1b3d5c 52%, #11273c 100%);
  border-bottom: 3px solid #0b1b2b;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 -3px 0 rgba(0,0,0,.28) inset, 0 4px 14px rgba(0,0,0,.35);
  position: sticky;
}
.hr_body .hr_leiste_titel h1 {
  color: #FFB52E;
  font-weight: 900;
  letter-spacing: .03em;
  text-shadow: 0 2px 0 #0b1b2b, 0 0 14px rgba(255,181,46,.35);
}
.hr_body .hr_leiste_titel img {
  background: linear-gradient(#ffe9b8, #ffc766);
  border: 2px solid #0b1b2b;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
/* "Alle Spiele": glaenzender blauer Knopf wie die Bremse */
html body.hr_body .hr_leiste_zurueck,
html[data-theme="dark"] body.hr_body .hr_leiste_zurueck {
  color: #fff;
  background: linear-gradient(#55B2F7, #2377D6 55%, #1B5EBB);
  border: 2px solid #0F3D84;
  border-radius: .75rem;
  box-shadow: 0 .15rem 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.45);
  text-shadow: 0 1px 0 rgba(0,0,0,.4);
  transform: none;
}
html body.hr_body .hr_leiste_zurueck:hover { background: linear-gradient(#6cc0ff, #2c85e6 55%, #2068c9); transform: none; }
html body.hr_body .hr_leiste_zurueck:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3); }
/* Dark-Mode-Schalter und Sprachwahl */
.hr_body .hr_leiste .jupi_theme_switch,
html[data-theme="dark"] .hr_body .hr_leiste .jupi_theme_switch {
  background: linear-gradient(#13293f, #0b1b2b);
  border: 2px solid #0b1b2b;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.18);
}
.hr_body .hr_leiste .jupi_theme_switch .jts_thumb { background: linear-gradient(#fff, #d6e4f2); }
.hr_body .hr_leiste .jupi_sprachen_select {
  color: #fff;
  background-color: #13293f;
  border: 2px solid #0b1b2b;
  border-radius: .75rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.18);
}
.hr_body .hr_leiste .jupi_sprachen_select option { color: #10243a; background: #fff; }

/* Hauptbereich durchsichtig, damit der Alpenhimmel dahinter sichtbar bleibt */
html body.hr_body .jupi_container > .jupi_main,
html[data-theme="dark"] body.hr_body .jupi_container > .jupi_main { background: transparent; }

/* Spielfeld-Rahmen: Armaturenbrett mit Orange-Kante */
html body.hr_body .hr_buehne,
html[data-theme="dark"] body.hr_body .hr_buehne {
  background: linear-gradient(180deg, #2a5880 0%, #1b3d5c 45%, #11273c 100%);
  border: 3px solid #0b1b2b;
  border-radius: 1.15rem;
  padding: .8rem;
  box-shadow:
    0 0 0 2px rgba(255,181,46,.55),
    0 10px 28px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.2);
  position: relative;
}
.hr_body .hr_buehne .hr_spielfeld {
  border: 2px solid #0b1b2b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), inset 0 0 0 1px rgba(0,0,0,.35);
}
/* Schrauben in den Ecken */
.hr_body .hr_buehne::before,
.hr_body .hr_buehne::after {
  content: "";
  position: absolute; top: .3rem;
  width: .32rem; height: .32rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8e6f3, #5d7b97 70%);
  box-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.hr_body .hr_buehne::before { left: .35rem; }
.hr_body .hr_buehne::after { right: .35rem; }

/* Fuss: dunkelblaue Leiste mit Strasse oben */
html body.hr_body .jupi_footer,
html[data-theme="dark"] body.hr_body .jupi_footer,
html body.hr_body .jupi_container > .jupi_footer {
  position: relative;
  background: linear-gradient(180deg, #1b3d5c, #0f2236);
  border-top: 0;
  padding-top: 1.5rem;
  color: #cfe3f5;
}
.hr_body .jupi_footer::before { top: 0; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.hr_body .jupi_footer p { margin: 0; text-align: center; color: #cfe3f5; font-size: .85rem; }
.hr_body .jupi_footer a { color: #FFB52E; font-weight: 700; }
.hr_body .jupi_footer a:hover { color: #FFD966; }

/* Vollbild: nur das Spielfeld, kein Rahmen drumherum */
.hr_buehne:fullscreen, .hr_spielfeld:fullscreen { box-shadow: none; }