/* Eigenes Instrumentenpult: Messing, gebürstetes Metall und Sonargrün.
   In beiden Themes bleibt die eigentliche Unterwasser-Konsole dunkel. */
body.jupi { background: radial-gradient(ellipse at 50% 0, #174958, #061923 65%, #020c13); }
body.jupi .jupi_container { max-width: none; width: 100%; margin: 0; padding: 0; background: transparent; box-shadow: none; }
body.jupi .tiefsee-main { width: 100%; max-width: 1800px; padding: 12px 16px 0; background: transparent; }
body.jupi .tiefsee_leiste, html[data-theme="dark"] body.jupi .tiefsee_leiste {
  position: relative; gap: 12px; min-height: 66px; padding: 8px 22px;
  background: linear-gradient(#1c3b46, #0a222d); border-bottom: 2px solid #8b9272;
  box-shadow: inset 0 1px #65909866, 0 4px 20px #0007;
}
body.jupi .tiefsee_leiste_zurueck, html[data-theme="dark"] body.jupi .tiefsee_leiste_zurueck {
  background: #0b222a; color: #d7e6d8; border: 1px solid #74938c; border-radius: 5px;
  box-shadow: inset 0 1px #ffffff12; font-size: .8rem; padding: 8px 12px; white-space: nowrap;
}
.tiefsee_leiste_titel h1, html[data-theme="dark"] .tiefsee_leiste_titel h1 { color: #eff7ed; letter-spacing: .035em; }
.tiefsee_leiste_titel small { display: block; color: #a0bdb7; font: 9px monospace; letter-spacing: .14em; margin-top: 4px; }
.tiefsee_leiste .tiefsee_leiste_chip { color: #bfd7cb; background: transparent; font: 11px monospace; }
.tiefsee_leiste #jupi_sprachen_wahl { order: 3; display: flex; align-items: center; gap: 6px; }
.tiefsee_leiste #jupi_sprachen_select { width: 125px; min-height: 40px; color: #deebdf; background: #102d37; border: 1px solid #74938c; border-radius: 5px; font-size: 11px; }
.tiefsee_leiste #jupi_theme_toggle { order: 4; margin-left: 0; }
body.jupi .tiefsee_buehne { height: calc(100dvh - 96px); min-height: 570px; max-height: 1200px; border: 6px solid #234550; border-radius: 12px;
  box-shadow: 0 0 0 1px #82938a, inset 0 0 0 1px #000, 0 16px 50px #0008; }
body.jupi .tiefsee_buehne::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid #97c0b744; border-radius: 6px; z-index: 30; }
.tiefsee_buehne:has(#tiefsee_startoverlay:not([hidden])) > :is(.tiefsee_messwerte,.tiefsee_auftrag,.tiefsee_kompass,.tiefsee_tiefenwaage,.tiefsee_sonar,.tiefsee_werkzeugleiste,.tiefsee_steuerung,.tiefsee_aktionen,.tiefsee_touch,.tiefsee_meldung) { visibility: hidden; }
body.jupi .tiefsee_startoverlay { padding: 0; background: radial-gradient(ellipse at 80% 10%, #26717a77, transparent 60%), linear-gradient(110deg,#061a24f5,#0b303beF); overflow-y: auto; align-items: center; }
body.jupi .tiefsee_startkarte { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px,5vw,80px); width: min(1160px, 100%); max-height: none; margin: auto; padding: clamp(24px,4vw,60px); border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.tiefsee_startbrief { min-width: 0; }
body.jupi .tiefsee_kategorie { color: #a7d2b4; background: #48726022; border: 1px solid #97bc8d55; border-radius: 3px; font: 10px monospace; letter-spacing: .13em; padding: 7px 10px; }
body.jupi .tiefsee_startkarte h2 { color: #f1f5e9; font-size: clamp(30px,3.2vw,52px); letter-spacing: -.035em; line-height: 1.12; margin: 22px 0 18px; }
.tiefsee_startkarte h2 em { color: #acd9bb; font-style: normal; }
body.jupi .tiefsee_startkarte p { color: #b9cdcd; font-size: .93rem; line-height: 1.65; }
body.jupi .tiefsee_startkarte .tiefsee_startlernen { color: #9eb7b5; font-size: .75rem; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #64827c66; }
body.jupi .tiefsee_ladeblock { margin: 14px 0 16px; }
body.jupi .tiefsee_ladephase { color: #d8c792; font: 11px monospace; letter-spacing: .02em; }
body.jupi .tiefsee_ladephase.is_langsam { color: #f0c98a; }
body.jupi .tiefsee_ladeprozent { color: #e3e9cb; font: 13px monospace; }
body.jupi .tiefsee_ladeschiene { height: 10px; margin-top: 8px; background: #04202b; box-shadow: inset 0 0 0 1px #8fa79255; border-radius: 2px; }
body.jupi .tiefsee_ladebalken { background: linear-gradient(90deg, #6fae8c, #d8c792); border-radius: 2px; box-shadow: 0 0 10px #d8c79244; }
body.jupi .tiefsee_ladeblock.is_fertig .tiefsee_ladeprozent,
body.jupi .tiefsee_ladeblock.is_fertig .tiefsee_ladephase { color: #a8d9b7; }
body.jupi .tiefsee_ladeblock.is_fertig .tiefsee_ladebalken { background: linear-gradient(90deg, #6fae8c, #a8d9b7); }
body.jupi .tiefsee_ladetext { padding: 9px 0; background: transparent; border-top: 1px solid #8fa79255; border-radius: 0; font: 11px monospace; color: #d8c792; }
body.jupi .tiefsee_ladetext.is_fertig { color: #a8d9b7; }
.tiefsee_startaktionen { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
body.jupi .tiefsee_buehne :is(.jupi_btn,.jupi_btn_alt), body.jupi .tiefsee_buehne .tiefsee_werkzeugleiste button {
  min-height: 42px; border-radius: 5px; border: 1px solid #668980; color: #dfebe0;
  background: linear-gradient(#254953,#132f3b); box-shadow: inset 0 1px #ffffff18,0 3px 8px #0003;
  font-size: .8rem; font-weight: 700; padding: 10px 14px; cursor: pointer;
}
body.jupi .tiefsee_buehne .jupi_btn { color: #102f30; background: linear-gradient(#c1dfb4,#8db9a4); border-color: #ccddb1; }
body.jupi .tiefsee_buehne button:hover:not(:disabled) { filter: brightness(1.15); }
body.jupi .tiefsee_buehne button:disabled { opacity: .48; cursor: wait; }
body.jupi .tiefsee_buehne :focus-visible { outline: 3px solid #e7d38a; outline-offset: 3px; }
#tiefsee_start,#tiefsee_fortsetzen,#tiefsee_zurueck_tauchgang,#tiefsee_neuladen { grid-column: 1/-1; min-height: 50px; font-size: .95rem; }
body.jupi .tiefsee_startchip { background: none; color: #a7c9ba; border: none; border-radius: 0; padding: 12px 0 0; font: 11px monospace; }
.tiefsee_startsonar { display: flex; flex-direction: column; justify-content: center; min-width: 0; color: #9fc7b6; }
.tiefsee_terminalzeile { display: flex; align-items: center; gap: 9px; font: 10px monospace; letter-spacing: .12em; border-bottom: 1px solid #65857888; padding-bottom: 12px; }
.tiefsee_terminalzeile i { width: 6px; height: 6px; border-radius: 50%; background: #b3e1ac; box-shadow: 0 0 10px #b3e1ac; margin-left: auto; }
.tiefsee_radarschirm { position: relative; width: min(100%,360px); aspect-ratio: 1; margin: 22px auto; border: 9px solid #36575c; border-radius: 50%; outline: 1px solid #8c9d8b; box-shadow: inset 0 0 45px #000, 0 0 0 5px #112e36, 0 0 0 6px #67877b66,0 15px 35px #0005;
  background: repeating-radial-gradient(circle at center,transparent 0 24%,#8ebc9e38 24.4% 24.8%,transparent 25.2% 33%),radial-gradient(circle,#235a53,#061c25); }
.tiefsee_radarschirm::after { content: ''; position: absolute; inset: 6%; border: 1px dashed #9abe9a66; border-radius: 50%; }
.tiefsee_radarkreuz { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(transparent calc(50% - .5px),#90bfa35c 50%,transparent calc(50% + .5px)),linear-gradient(90deg,transparent calc(50% - .5px),#90bfa35c 50%,transparent calc(50% + .5px)); }
.tiefsee_radarschirm img { position: absolute; width: 90%; height: 90%; object-fit: contain; inset: 5%; border-radius: 50%; mix-blend-mode: lighten; }
.tiefsee_radarschirm b { position: absolute; bottom: 12%; width: 100%; text-align: center; font: 10px monospace; letter-spacing: .25em; color: #d2dfb7; }
.tiefsee_radarpunkt { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #d1e4a0; top: 28%; right: 19%; box-shadow: 0 0 10px #cddd8f; }
.tiefsee_sonardaten { display: grid; grid-template-columns: repeat(3,1fr); text-align: center; border-block: 1px solid #65857888; padding: 14px 0; }
.tiefsee_sonardaten div + div { border-left: 1px solid #65857888; }
.tiefsee_sonardaten strong { display: block; color: #e3e9cb; font: 21px monospace; }
.tiefsee_sonardaten span { display: block; font-size: 10px; margin-top: 5px; }
.tiefsee_profil { display: flex; align-items: center; gap: 7px; font: 8px monospace; margin-top: 22px; }
.tiefsee_profil i { flex: 1; height: 1px; background: #628e7c; }
body.jupi .tiefsee_startsonar > p { text-align: center; font: 8px monospace; letter-spacing: .13em; color: #82a49b; }
body.jupi .tiefsee_buehne :is(.tiefsee_messwerte,.tiefsee_auftrag,.tiefsee_sonar,.tiefsee_tiefenwaage) { border: 1px solid #8eae9c80; border-radius: 5px; background: linear-gradient(140deg,#16363eeF,#071c27eF); box-shadow: inset 0 1px #d1e3b622,0 5px 16px #0005; }
body.jupi .tiefsee_messwerte { left: 18px; top: 18px; padding: 12px; gap: 8px; width: 420px; grid-template-columns: repeat(4,minmax(0,1fr)); }
body.jupi .tiefsee_messwerte div { display: grid; padding: 6px; }
body.jupi .tiefsee_messwerte strong { color: #d9e9c7; font-family: monospace; font-size: 1.15rem; }
body.jupi .tiefsee_messwerte span { font-family: monospace; color: #95b5b3; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
body.jupi .tiefsee_auftrag { top: 99px; left: 18px; max-width: 340px; transform: none; text-align: left; }
body.jupi .tiefsee_werkzeugleiste { right: 18px; top: 18px; gap: 6px; max-width: 55%; justify-content: flex-end; flex-wrap: wrap; flex-direction: row; display: flex; }
body.jupi .tiefsee_buehne .tiefsee_werkzeugleiste button { min-width: 40px; padding: 8px 10px; font-size: .7rem; }
body.jupi .tiefsee_sonar { top: auto; bottom: 110px; right: 18px; }
body.jupi .tiefsee_tiefenwaage { top: 205px; bottom: 170px; }
body.jupi .tiefsee_kompass { top: 90px; right: 24px; }
body.jupi :is(.tiefsee_hudknopf,.tiefsee_hauptaktion) { border-radius: 5px; min-height: 42px; }
body.jupi :is(.tiefsee_infomenue,.tiefsee_infokarte,.tiefsee_arbeitspanel,.tiefsee_tagebuch,.tiefsee_bericht) { color: #e1ece6; border: 1px solid #8aab99; border-radius: 9px; background: linear-gradient(135deg,#1d3e48,#081e2a); box-shadow: 0 20px 70px #0009,inset 0 1px #c1d6ba33; }
body.jupi .tiefsee_infokopf { background: #0b2631; border-bottom: 1px solid #688d80; }
body.jupi .tiefsee_infokopf h2 { color: #e1eacb; }
body.jupi .tiefsee_infokopf button { min-width: 40px; min-height: 40px; }
.tiefsee_grafikinhalt { display: grid; gap: 18px; }
.tiefsee_grafikinhalt > label { display: grid; gap: 8px; color: #e1ebda; font-size: .87rem; }
.tiefsee_grafikinhalt select { width: 100%; min-height: 44px; background: #09252e; color: #e0eddf; border: 1px solid #76998a; border-radius: 4px; padding: 8px; font: inherit; }
.tiefsee_grafikinhalt input[type="range"] { width: 100%; height: 40px; accent-color: #c4d8a8; }
.tiefsee_grafikinhalt output { justify-self: end; margin-top: -25px; color: #c7ddb4; font: 15px monospace; }
.tiefsee_grafikinhalt small { display: block; color: #a3bcbd; line-height: 1.5; font-size: .75rem; }
.tiefsee_grafikinhalt .tiefsee_schaltzeile { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #75958866; border-radius: 5px; }
.tiefsee_schaltzeile input { width: 24px; height: 24px; margin: 8px; accent-color: #bed8a8; flex-shrink: 0; }
body.jupi .tiefsee_grafiktipp { font-size: .8rem; color: #c5d4ba; }
body.jupi .tiefsee_kamerawerkzeuge { max-width: 200px; width: 200px; padding: 10px; border: 1px solid #749b86; border-radius: 5px; background: #102c38ed; }
body.jupi .tiefsee_kamerawerkzeuge button { min-height: 40px; font-size: 11px; }
.tiefsee_zoomlabel { display: flex; justify-content: space-between; margin-top: 8px; color: #d4e7cd; font: 11px monospace; }
.tiefsee_zoomregler { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; gap: 4px; align-items: center; }
.tiefsee_zoomregler input { width: 100%; height: 40px; accent-color: #bdd6a6; min-width: 0; }
body.jupi .tiefsee_zoomregler button { background: #183e48; color: #e0eddb; border: 1px solid #749b86; border-radius: 4px; font-size: 22px; padding: 0; }
body.jupi .jupi_footer { color: #94adad; background: transparent; font-size: .7rem; padding: 24px; }
[hidden], body.jupi .tiefsee_buehne [hidden] { display: none !important; }
@media (max-width: 1100px) {
  .tiefsee_leiste .tiefsee_leiste_chip { display: none; }
  body.jupi .tiefsee_startkarte { gap: 30px; padding: 32px; }
  body.jupi .tiefsee_messwerte { gap: 12px; max-width: 44%; }
  body.jupi .tiefsee_messwerte strong { font-size: .85rem; }
}
@media (max-width: 700px) {
  body.jupi .tiefsee_leiste { padding: 7px 10px; min-height: 58px; gap: 7px; }
  body.jupi .tiefsee_leiste { display: grid; grid-template-columns: auto minmax(0,1fr) auto; }
  .tiefsee_leiste_zurueck { grid-row: 1; grid-column: 1; }
  .tiefsee_leiste_titel { grid-row: 1; grid-column: 2; }
  .tiefsee_leiste #jupi_theme_toggle { grid-row: 1; grid-column: 3; }
  .tiefsee_leiste #jupi_sprachen_wahl { grid-row: 2; grid-column: 1/-1; justify-self: end; }
  body.jupi .tiefsee_leiste_zurueck { padding: 6px 9px; font-size: .7rem; }
  .tiefsee_leiste_titel small { font-size: 7px; letter-spacing: .03em; }
  body.jupi .tiefsee_leiste_titel h1 { font-size: .85rem; }
  .tiefsee_leiste_titel img { display: none; }
  body.jupi .tiefsee-main { padding: 6px; }
  body.jupi .tiefsee_buehne { height: calc(100dvh - 120px); min-height: 650px; border-width: 3px; border-radius: 8px; }
  body.jupi .tiefsee_startkarte { grid-template-columns: 1fr; padding: 24px 20px; gap: 24px; }
  body.jupi .tiefsee_startkarte h2 { font-size: 33px; margin-top: 17px; }
  .tiefsee_startsonar { display: none; }
  body.jupi .tiefsee_startkarte p { font-size: .85rem; }
  body.jupi .tiefsee_buehne .tiefsee_startaktionen button { font-size: .75rem; padding-inline: 9px; }
  /* Vier Messwert-Kacheln nebeneinander. minmax(0,1fr) ist Pflicht: mit 1fr
     allein richtet sich die Spur nach dem Mindestinhalt (die Werte tragen
     white-space:nowrap), und die vierte Kachel schiebt sich bei 320 px rund
     5 px ueber den Rand. */
  body.jupi .tiefsee_messwerte { top: 10px; left: 10px; max-width: none; width: calc(100% - 20px); display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 9px; gap: 8px; }
  body.jupi .tiefsee_messwerte div { display: grid; min-width: 0; }
  body.jupi .tiefsee_messwerte strong { font-size: .9rem; }
  body.jupi .tiefsee_werkzeugleiste { top: 72px; left: 10px; right: 10px; max-width: none; flex-direction: row; justify-content: flex-start; gap: 4px; }
  body.jupi .tiefsee_buehne .tiefsee_werkzeugleiste button { font-size: .63rem; padding: 5px 7px; }
  #tiefsee_hilfe_knopf, #tiefsee_info_knopf { display: none; }
  body.jupi .tiefsee_auftrag { top: 130px; left: 10px; width: calc(100% - 20px); max-width: 330px; padding: 9px 12px; }
  body.jupi .tiefsee_tiefenwaage { top: 220px; bottom: 265px; left: 10px; }
  body.jupi .tiefsee_kompass { display: none; }
  body.jupi .tiefsee_sonar { display: none; }
  body.jupi .tiefsee_kamerawerkzeuge { top: auto; bottom: 230px; left: 10px; width: calc(100% - 20px); max-width: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 7px; gap: 4px; }
  .tiefsee_kamerawerkzeuge > span { display: none; }
  .tiefsee_kamerawerkzeuge .tiefsee_zoomlabel { grid-row: 2; grid-column: 1; flex-direction: column; justify-content: center; gap: 3px; margin: 0; }
  .tiefsee_kamerawerkzeuge .tiefsee_zoomregler { grid-row: 2; grid-column: 2/4; }
  #tiefsee_zoom_reset { grid-row: 1; grid-column: 3; }
  body.jupi .tiefsee_kamerawerkzeuge button { min-width: 0; padding: 4px; font-size: 10px; }
}
@media (max-height: 550px) and (min-width: 701px) {
  body.jupi .tiefsee_buehne { height: calc(100dvh - 82px); min-height: 280px; }
  body.jupi .tiefsee_startkarte { padding: 24px 34px; align-self: start; }
  body.jupi .tiefsee_startkarte h2 { font-size: 28px; }
  .tiefsee_radarschirm { width: 180px; margin: 16px auto; }
  body.jupi .tiefsee_auftrag { top: 90px; max-width: 320px; }
  body.jupi .tiefsee_sonar { display: none; }
  body.jupi .tiefsee_steuerung { display: none; }
  #tiefsee_hilfe_knopf, #tiefsee_info_knopf { display: none; }
  body.jupi .tiefsee_messwerte { top: 10px; padding: 6px; }
  body.jupi .tiefsee_werkzeugleiste { top: 10px; max-width: 52%; }
  body.jupi .tiefsee_tiefenwaage, body.jupi .tiefsee_kompass { display: none; }
  body.jupi .tiefsee_kamerawerkzeuge { top: 75px; left: auto; right: 10px; width: 260px; max-width: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 7px; gap: 4px; }
  .tiefsee_kamerawerkzeuge > span { display: none; }
  .tiefsee_kamerawerkzeuge .tiefsee_zoomlabel { grid-row: 2; grid-column: 1; flex-direction: column; justify-content: center; gap: 3px; margin: 0; }
  .tiefsee_kamerawerkzeuge .tiefsee_zoomregler { grid-row: 2; grid-column: 2/4; }
  #tiefsee_zoom_reset { grid-row: 1; grid-column: 3; }
  body.jupi .tiefsee_kamerawerkzeuge button { min-width: 0; padding: 4px; font-size: 10px; }
  body.jupi .tiefsee_touch .tiefsee_joystick { width: 90px; height: 90px; }
  body.jupi .tiefsee_aktionen { bottom: 10px; width: min(420px,calc(100% - 230px)); }
  body.jupi .tiefsee_aktionen button { min-width: 0; padding: 7px; font-size: .65rem; }

  /* Ladeanzeige im kurzen Querformat (844x390, 720x360). Das Startoverlay
     scrollt hier von sich aus, und die Ladeanzeige stand dadurch unter dem
     Rand - genau dann unsichtbar, wenn sie gebraucht wird. Sie wird deshalb
     per order:-1 an den Anfang des Startbriefs geholt: sie steht damit im
     ersten Bild, ueberdeckt nichts und die Karte scrollt normal weiter.
     Ein vorher probiertes position:absolute nagelte sie zwar fest, legte sie
     aber ueber die unteren Startknoepfe (im scrollenden Overlay scrollt sie
     ausserdem mit weg). Nachgemessen mit
     .zcode/tiefsee-tests/_sonde-leiste-oben.js: Leiste und Phase im Bild,
     danach jeder Startknopf einzeln per scrollIntoView frei treffbar. */
  body.jupi .tiefsee_startbrief { display: flex; flex-direction: column; }
  body.jupi .tiefsee_ladeblock { order: -1; margin: 0 0 10px; }
  body.jupi .tiefsee_ladekopf { margin: 0; }
  body.jupi .tiefsee_ladeschiene { height: 7px; margin: 5px 0 0; }
  body.jupi .tiefsee_ladephase { font-size: .72rem; }
  body.jupi .tiefsee_ladetext { display: none; }
  body.jupi .tiefsee_startkarte h2 { margin: 10px 0 8px; }
  body.jupi .tiefsee_startkarte p { margin: 8px 0; }
}

/* Sehr kurze Fenster (z. B. 720x360 im Querformat): dort bleiben zwischen
   Kopfzeile und Fuss nur 268 px. Die Kategorie-Zeile
   ("JUPI DEEP / EXPEDITION 01") und der Einleitungstext sind Zierde bzw.
   Wiederholung und weichen, damit der Startknopf ohne Scrollen sichtbar
   bleibt. */
@media (max-height: 420px) and (min-width: 701px) {
  body.jupi .tiefsee_startkarte .tiefsee_kategorie,
  body.jupi .tiefsee_startbrief > p[data-i18n="spiel_tiefsee_starttext"] { display: none; }
  body.jupi .tiefsee_startkarte h2 { font-size: 24px; margin: 0 0 6px; }
}