/* =====================================================================
   pay2jupi/arcade.css - "Handy-Strategiespiel"-Look (wird ZULETZT geladen)
   ---------------------------------------------------------------------
   Pay2Jupi parodiert Spiele wie Clash of Clans / Clash Royale. Darum sieht
   die Oberfläche bewusst genauso aus: dicke Knöpfe mit Umriss, Spielerkarte
   mit Level, schmale Lagerbalken, runde Seitenknöpfe mit roten Punkten,
   Tab-Leiste mit großem Kampfknopf, laute Angebote. Die TRICK-BRILLE
   (Abschnitt 6) macht dieselben Elemente als Kauftricks sichtbar.
   Abschnitte: 1 Grundwerte · 2 Spielerkarte · 3 Lager/Spielgeld ·
   4 Seitenknöpfe · 5 Tab-Leiste · 6 Trick-Brille · 7 Shop ·
   8 Pop-up/Werbung/Trick-Karte · 9 Querformat/Desktop
   ===================================================================== */

/* ---------- 1 Grundwerte ---------- */
body.jupi.p2j_body {
  --a_umriss: #23180f;          /* dunkler Comic-Umriss */
  --a_text: #fffdf3;
  --a_blau: linear-gradient(#7fc8ff, #3a86e0 55%, #2459a9);
  --a_gold: linear-gradient(#fff28a, #f6c437 55%, #d8891a);
  --a_gruen: linear-gradient(#b6f26a, #5fbf2c 55%, #35881c);
  --a_rot: linear-gradient(#ff8f7a, #ef4a37 55%, #b52418);
  --a_lila: linear-gradient(#e6a2ff, #a352e0 55%, #6b26a8);
  --a_holz: linear-gradient(#5b4632, #3a2a1c);
}
/* Schrift wie auf einer Spielkonsole: fett, weiß, mit dunklem Umriss */
body.jupi.p2j_body .p2j_arcade_schrift,
body.jupi.p2j_body .p2j_rund span,
body.jupi.p2j_body .p2j_dock button span,
body.jupi.p2j_body .p2j_spielerkarte strong,
body.jupi.p2j_body .p2j_pokale b,
body.jupi.p2j_body .p2j_ressource strong {
  font-weight: 900;
  color: var(--a_text);
  text-shadow: 0 2px 0 var(--a_umriss), 1px 0 0 var(--a_umriss), -1px 0 0 var(--a_umriss),
               0 -1px 0 var(--a_umriss), 1px 1px 0 var(--a_umriss), -1px 1px 0 var(--a_umriss);
  letter-spacing: .02em;
}
/* Altes HUD dieser Seite ausblenden (Elemente bleiben für game.js bestehen) */
body.jupi.p2j_body .p2j_stadtkopf,
body.jupi.p2j_body .p2j_seitenaktionen,
body.jupi.p2j_body #p2j_wert_macht,
body.jupi.p2j_body .p2j_ressource small { display: none }

/* ---------- 2 Spielerkarte + Pokale (oben links) ---------- */
body.jupi.p2j_body .p2j_spielerkarte {
  position: absolute; z-index: 4; top: 8px; left: 8px;
  display: flex; align-items: center; gap: 2px;
  min-height: 48px; max-width: 47%; padding: 0 10px 0 0;
  background: none; border: 0; cursor: pointer; font: inherit;
}
body.jupi.p2j_body .p2j_level {
  position: relative; z-index: 1; flex: none;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--a_blau);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  filter: drop-shadow(0 2px 0 var(--a_umriss));
}
body.jupi.p2j_body .p2j_level::before {           /* dunkler Rahmen des Sechsecks */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #0e2c55;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%,
    0 25%, 9% 30%, 9% 70%, 50% 91%, 91% 70%, 91% 30%, 50% 9%, 9% 30%, 0 25%);
}
body.jupi.p2j_body .p2j_level b {
  font: 900 19px/1 system-ui, sans-serif; color: #fff;
  text-shadow: 0 2px 0 #0e2c55, 1px 0 #0e2c55, -1px 0 #0e2c55;
}
body.jupi.p2j_body .p2j_spielerkarte_text {
  display: grid; gap: 2px; min-width: 0; margin-left: -10px;
  padding: 4px 10px 4px 16px; text-align: left;
  background: linear-gradient(#2b2017e6, #1b130de6);
  border: 2px solid var(--a_umriss); border-radius: 0 10px 10px 0;
}
body.jupi.p2j_body .p2j_spielerkarte strong {
  font-size: 13px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.jupi.p2j_body .p2j_spielerkarte small {
  font: 700 10px/1.2 system-ui, sans-serif; color: #e8d9b5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.jupi.p2j_body .p2j_xpbalken {
  display: block; height: 7px; width: 96px; max-width: 100%;
  background: #0c0905; border-radius: 4px; overflow: hidden; border: 1px solid #000;
}
body.jupi.p2j_body .p2j_xpbalken i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(#8ff0ff, #2fa8e8); transition: width .4s;
}
body.jupi.p2j_body .p2j_pokale {
  position: absolute; z-index: 4; top: 62px; left: 12px;
  display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 12px 2px 4px;
  background: linear-gradient(#2b2017e6, #1b130de6); border: 2px solid var(--a_umriss); border-radius: 16px;
}
body.jupi.p2j_body .p2j_pokale .p2j_symbol { width: 24px; height: 24px; color: #ffd23f; fill: #f7b52c; stroke: #6b3d06 }
body.jupi.p2j_body .p2j_pokale b { font-size: 14px }

/* ---------- 3 Lagerbalken + Spielgeld (oben rechts) ---------- */
body.jupi.p2j_body .p2j_ressourcen {
  inset: 8px 8px auto auto; width: 158px; display: grid; gap: 5px;
  padding: 0; background: none; border: 0; box-shadow: none;
}
body.jupi.p2j_body .p2j_ressource {
  --fuell: 0;
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  min-height: 34px; height: 34px; padding: 0 44px 0 30px; margin-left: 14px;
  background: #120d08d9; border: 2px solid var(--a_umriss); border-radius: 9px;
  box-shadow: none; overflow: visible; isolation: isolate;
}
body.jupi.p2j_body .p2j_ressource::before {         /* Füllstand des Lagers */
  content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; bottom: 2px;
  width: calc((100% - 4px) * var(--fuell)); border-radius: 6px;
  background: linear-gradient(#ffe36a, #f2b524 60%, #c9861a);
  transition: width .5s;
}
body.jupi.p2j_body .p2j_ressource:nth-child(2)::before { background: linear-gradient(#e3a368, #a9622c 60%, #7b4419) }
body.jupi.p2j_body .p2j_ressource:nth-child(3)::before { background: linear-gradient(#d7dde4, #9ba7b5 60%, #6c7887) }
body.jupi.p2j_body .p2j_ressource_dia::before { width: calc(100% - 4px); background: linear-gradient(#5b2a7a, #3a1757) }
body.jupi.p2j_body .p2j_ressource.p2j_lager_voll::before { animation: a_voll 1s ease-in-out infinite alternate }
@keyframes a_voll { to { filter: brightness(1.35) } }
body.jupi.p2j_body .p2j_ressource .p2j_symbol {
  position: absolute; left: -16px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; filter: drop-shadow(0 2px 0 var(--a_umriss));
  color: #8a5a00; fill: #ffd43a; stroke-width: 2.2;
}
body.jupi.p2j_body .p2j_ressource:nth-child(2) .p2j_symbol { fill: #c97b3d; color: #4a2a10 }
body.jupi.p2j_body .p2j_ressource:nth-child(3) .p2j_symbol { fill: #c4ccd6; color: #3a4350 }
body.jupi.p2j_body .p2j_ressource_dia .p2j_symbol { fill: #9fe86a; color: #2f6a14 }
body.jupi.p2j_body .p2j_ressource strong { grid-column: auto; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums }
body.jupi.p2j_body .p2j_plus {
  position: absolute; right: -4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; min-width: 40px; min-height: 40px; margin: 0;
  border: 2px solid var(--a_umriss); border-radius: 10px;
  background: var(--a_gruen); box-shadow: inset 0 2px 0 #ffffff80, 0 2px 0 var(--a_umriss);
  font: 900 26px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 2px 0 var(--a_umriss);
}
body.jupi.p2j_body .p2j_wallet {
  top: 168px; right: 8px; width: 144px; min-height: 40px;
  display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 0 4px;
  padding: 3px 3px 3px 8px; box-sizing: border-box;
  background: linear-gradient(#fff7d8, #f2d58e); border: 2px solid var(--a_umriss); border-radius: 10px;
  box-shadow: 0 2px 0 var(--a_umriss); font-size: 9px; text-align: left; color: #4b2f12;
}
body.jupi.p2j_body .p2j_wallet>span { grid-column: 1; grid-row: 1; font-weight: 800; text-transform: uppercase; letter-spacing: .04em }
body.jupi.p2j_body .p2j_wallet strong { grid-column: 1; grid-row: 2; font-size: 15px; line-height: 1.1 }
body.jupi.p2j_body #p2j_rundenende { grid-column: 2; grid-row: 1/3; width: 40px; height: 40px; min-height: 40px; border-radius: 9px }

/* ---------- 4 Runde Seitenknöpfe mit roten Punkten ---------- */
body.jupi.p2j_body .p2j_seite {
  position: absolute; z-index: 4; display: grid; gap: 6px; justify-items: center; margin: 0;
}
body.jupi.p2j_body .p2j_seite_links { top: 102px; left: 8px }
body.jupi.p2j_body .p2j_seite_rechts { top: 218px; right: 8px }
body.jupi.p2j_body .p2j_rund {
  position: relative; width: 58px; min-height: 64px; padding: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: none; border: 0; cursor: pointer; font: inherit;
}
body.jupi.p2j_body .p2j_rund .p2j_symbol {
  box-sizing: border-box; width: 48px; height: 48px; padding: 9px;
  border: 3px solid var(--a_umriss); border-radius: 50%;
  background: var(--a_blau); color: #fff; stroke-width: 2.4;
  box-shadow: inset 0 3px 0 #ffffff70, inset 0 -4px 0 #00000030, 0 3px 0 var(--a_umriss);
}
body.jupi.p2j_body .p2j_rund span { font-size: 10px; line-height: 1.15; margin-top: -4px; white-space: nowrap }
body.jupi.p2j_body .p2j_rund:active .p2j_symbol { transform: translateY(2px); box-shadow: inset 0 3px 0 #ffffff70, 0 1px 0 var(--a_umriss) }
body.jupi.p2j_body .p2j_rund_gold .p2j_symbol { background: var(--a_gold); color: #6b3a05 }
body.jupi.p2j_body .p2j_rund_lila .p2j_symbol { background: var(--a_lila) }
body.jupi.p2j_body .p2j_rund_truhe .p2j_symbol { background: linear-gradient(#ffb36a, #e0702b 55%, #a8431b) }
body.jupi.p2j_body .p2j_rund_detektiv .p2j_symbol { background: linear-gradient(#3b3f4a, #1b1d23); color: #ffe14d }
body.jupi.p2j_body .p2j_rund_leer .p2j_symbol { filter: grayscale(1) brightness(.75) }
/* Roter Punkt: das bekannteste Lockmittel der App-Welt */
body.jupi.p2j_body .p2j_rotpunkt,
body.jupi.p2j_body .p2j_zahlpunkt {
  position: absolute; top: -3px; right: -1px; min-width: 22px; height: 22px; padding: 0 5px;
  box-sizing: border-box; display: grid; place-items: center;
  font: 900 12px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 0 #6a0d05;
  background: var(--a_rot); border: 2px solid #fff; border-radius: 11px;
  box-shadow: 0 2px 0 var(--a_umriss);
  animation: a_punkt 1.6s ease-in-out infinite;
}
body.jupi.p2j_body .p2j_zahlpunkt { background: linear-gradient(#4a4a4a, #1a1a1a); text-shadow: none; animation: none; border-color: #ffe48a }
body.jupi.p2j_body .p2j_rund_gold .p2j_zahlpunkt { right: -8px }
body.jupi.p2j_body .p2j_trickzahl { right: -12px; font-size: 10px; background: #ffe14d; color: #1b1d23; border-color: #1b1d23 }
@keyframes a_punkt { 0%, 80%, 100% { transform: scale(1) } 90% { transform: scale(1.25) } }

/* Angebots-Truhe mit laufender Uhr (rechts oben) */
body.jupi.p2j_body .p2j_angebot {
  position: relative; inset: auto; width: 76px; min-height: 84px; padding: 16px 2px 4px; margin: 0 0 6px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--a_lila); border: 3px solid var(--a_umriss); border-radius: 14px;
  box-shadow: inset 0 3px 0 #ffffff60, 0 3px 0 var(--a_umriss), 0 0 18px #e7a6ff;
  color: #fff; text-shadow: none; animation: a_wackeln 3s ease-in-out infinite;
}
body.jupi.p2j_body .p2j_angebot .p2j_symbol { width: 38px; height: 38px; color: #6b3a05; fill: #ffcf4a; stroke-width: 1.8 }
body.jupi.p2j_body .p2j_angebot_band {
  position: absolute; top: -10px; left: -6px; right: -6px; padding: 3px 1px; white-space: nowrap;
  font: 900 9px/1 system-ui, sans-serif; text-transform: uppercase; color: #fff;
  background: var(--a_rot); border: 2px solid var(--a_umriss); border-radius: 7px; text-shadow: 0 1px 0 #6a0d05;
}
body.jupi.p2j_body .p2j_angebot_uhr {
  font: 900 11px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  padding: 3px 5px; background: #1b0d27; border-radius: 6px; color: #ffe48a;
}
body.jupi.p2j_body .p2j_angebot .p2j_rotpunkt { top: -14px; right: -10px }
@keyframes a_wackeln { 0%, 88%, 100% { transform: rotate(0) } 91% { transform: rotate(-6deg) } 94% { transform: rotate(6deg) } 97% { transform: rotate(-3deg) } }

/* ---------- 5 Tab-Leiste unten (großer Kampfknopf in der Mitte) ---------- */
body.jupi.p2j_body .p2j_dock {
  left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr; align-items: end; gap: 4px;
  padding: 6px 6px max(6px, env(safe-area-inset-bottom));
  background: linear-gradient(#2f4a7a, #1b2c4e); border-top: 3px solid var(--a_umriss);
  box-shadow: 0 -3px 0 #4f73b0 inset;
}
body.jupi.p2j_body .p2j_dock button {
  position: relative; height: 62px; min-width: 0; padding: 4px 2px; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 3px solid var(--a_umriss); border-radius: 12px;
  background: linear-gradient(#5d7fbd, #3d5d98 60%, #2d477b);
  box-shadow: inset 0 3px 0 #ffffff50, 0 3px 0 var(--a_umriss); color: #fff; font-size: 11px;
}
body.jupi.p2j_body .p2j_dock .p2j_symbol { width: 28px; height: 28px; stroke-width: 2.4; filter: drop-shadow(0 2px 0 var(--a_umriss)) }
body.jupi.p2j_body #p2j_premium { order: 0; background: var(--a_lila) }
body.jupi.p2j_body #p2j_armee { order: 1 }
body.jupi.p2j_body #p2j_angreifen {
  order: 2; height: 84px; margin-top: -26px; border-radius: 16px;
  background: var(--a_gold); color: #fff; font-size: 14px;
}
body.jupi.p2j_body #p2j_angreifen .p2j_symbol { width: 40px; height: 40px; color: #fff }
body.jupi.p2j_body #p2j_angreifen span { font-size: 14px; text-transform: uppercase }
body.jupi.p2j_body #p2j_bauen_toggle { order: 3; background: var(--a_gruen) }
body.jupi.p2j_body #p2j_dock_karte { order: 4 }
body.jupi.p2j_body .p2j_dock button:active { transform: translateY(2px); box-shadow: inset 0 3px 0 #ffffff50, 0 1px 0 var(--a_umriss) }
body.jupi.p2j_body .p2j_sale { top: -9px; right: -6px; font-size: 9px; letter-spacing: .03em }

/* Kamera, Tipp und Werkzeuglade über der Tab-Leiste */
body.jupi.p2j_body .p2j_kamera { bottom: 84px; right: 6px; padding: 3px; gap: 3px; background: #1b2c4ecc; border: 2px solid var(--a_umriss); border-radius: 10px }
body.jupi.p2j_body .p2j_kamera button { width: 40px; height: 40px; border-radius: 8px }
body.jupi.p2j_body .p2j_buehne_info { bottom: 136px; left: 74px; right: 74px }
body.jupi.p2j_body .p2j_buehne_tipp {
  background: linear-gradient(#fffbe8, #f3dfa5); border: 2px solid var(--a_umriss);
  box-shadow: 0 2px 0 var(--a_umriss); border-radius: 10px; font-size: 11px; padding: 6px 10px;
}
body.jupi.p2j_body .p2j_baukatalog { bottom: 78px; border: 3px solid var(--a_umriss); background: linear-gradient(#37588f, #1f3460) }
body.jupi.p2j_body .p2j_baukopf strong { color: #fff }
body.jupi.p2j_body .p2j_toast { bottom: 140px }

/* ---------- 6 Trick-Brille: jeder Kauftrick leuchtet auf ---------- */
body.jupi.p2j_body.p2j_trickbrille .p2j_stadtbuehne { filter: grayscale(.75) brightness(.6) }
body.jupi.p2j_body.p2j_trickbrille [data-trick] {
  outline: 3px dashed #ffe14d; outline-offset: 2px;
  animation: a_brille 1.2s ease-in-out infinite alternate;
}
@keyframes a_brille { to { outline-color: #ff5ab4 } }
body.jupi.p2j_body.p2j_trickbrille #p2j_trickbrille .p2j_symbol { background: #ffe14d; color: #1b1d23; box-shadow: 0 0 0 4px #ffe14d80, 0 3px 0 var(--a_umriss) }
body.jupi.p2j_body .p2j_brillenband {
  position: absolute; z-index: 4; bottom: 192px; left: 76px; right: 76px; margin: 0;
  padding: 7px 10px; text-align: center; font: 800 11px/1.3 system-ui, sans-serif;
  color: #1b1d23; background: #ffe14d; border: 2px solid var(--a_umriss); border-radius: 10px;
}

/* ---------- 7 Shop als bunte Angebotswand ---------- */
body.jupi.p2j_body #p2j_shop { background: linear-gradient(#2c1b45, #170e26); border: 3px solid var(--a_umriss); color: #fff }
body.jupi.p2j_body #p2j_shop .p2j_dialog_kopf { background: var(--a_lila); border-bottom: 3px solid var(--a_umriss) }
body.jupi.p2j_body #p2j_shop .p2j_dialog_kopf h2 { color: #fff; text-shadow: 0 2px 0 var(--a_umriss) }
body.jupi.p2j_body #p2j_shop .p2j_shop_guthaben { background: #1b0d27; color: #ffe48a }
body.jupi.p2j_body #p2j_shop .p2j_shop_fiktiv { color: #d8c7ef; background: #1b0d27 }
body.jupi.p2j_body #p2j_shop_raster {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; align-content: start;
  background: radial-gradient(circle at 50% 0, #4a2a72, transparent 70%);
}
body.jupi.p2j_body .p2j_shop_sektion {
  grid-column: 1 / -1; margin: 8px 0 0; padding: 6px 12px; text-align: center;
  font: 900 14px/1.2 system-ui, sans-serif; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 0 var(--a_umriss); background: var(--a_rot);
  border: 3px solid var(--a_umriss); border-radius: 10px;
}
body.jupi.p2j_body .p2j_shop_sektion_truhen { background: linear-gradient(#ffb36a, #e0702b 55%, #a8431b) }
body.jupi.p2j_body .p2j_shop_sektion_diamanten { background: var(--a_gruen) }
body.jupi.p2j_body .p2j_shop_sektion_vip { background: var(--a_gold); color: #fff }
body.jupi.p2j_body .p2j_shop_karte {
  position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 0;
  padding: 8px 8px 10px; text-align: center; color: #2b1d10;
  background: linear-gradient(#fffaf0, #ecdcbf); border: 3px solid var(--a_umriss); border-radius: 14px;
  box-shadow: 0 4px 0 var(--a_umriss);
}
body.jupi.p2j_body .p2j_shop_karte h3 { margin: 2px 0 0; font: 900 13px/1.2 system-ui, sans-serif; color: #2b1d10 }
body.jupi.p2j_body .p2j_shop_karte .p2j_shop_text { margin: 0; font-size: 11px; line-height: 1.3; color: #5b4630 }
body.jupi.p2j_body .p2j_shop_bild {
  height: 64px; display: flex; align-items: center; justify-content: center;
  margin: -2px -2px 2px; border-radius: 9px; border: 2px solid var(--a_umriss);
  background: radial-gradient(circle at 50% 40%, #fff6b0, #f0a92f 70%, #b3631a);
}
body.jupi.p2j_body .p2j_shop_bild .p2j_symbol { width: 44px; height: 44px; color: #4a2805; fill: #ffcf4a; stroke-width: 1.6; margin: 0 -9px; filter: drop-shadow(0 2px 0 #00000055) }
body.jupi.p2j_body .p2j_shop_bild_diamanten { background: radial-gradient(circle at 50% 40%, #d9ffb3, #6fcf3a 70%, #2f7d16) }
body.jupi.p2j_body .p2j_shop_bild_diamanten .p2j_symbol { fill: #b0f070; color: #1d520b }
body.jupi.p2j_body .p2j_shop_bild_vip, body.jupi.p2j_body .p2j_shop_bild_pass { background: radial-gradient(circle at 50% 40%, #f6d7ff, #b16ae0 70%, #5d2290) }
body.jupi.p2j_body .p2j_shop_bild_vip .p2j_symbol, body.jupi.p2j_body .p2j_shop_bild_pass .p2j_symbol { fill: #ffd84a; color: #4a2805 }
body.jupi.p2j_body .p2j_truhe_braun .p2j_symbol { fill: #b3793d }
body.jupi.p2j_body .p2j_truhe_gold .p2j_symbol { fill: #ffd84a }
body.jupi.p2j_body .p2j_truhe_legend { background: radial-gradient(circle at 50% 40%, #fff, #b97bff 60%, #3b157a) }
body.jupi.p2j_body .p2j_truhe_legend .p2j_symbol { fill: #b6e7ff; color: #10204a }
body.jupi.p2j_body .p2j_shop_dia { margin: 0; font: 900 13px/1.2 system-ui, sans-serif; color: #2f6a14 }
body.jupi.p2j_body .p2j_shop_countdown { margin: 0 auto; padding: 2px 8px; font: 900 11px/1.4 system-ui, sans-serif; color: #fff; background: #b52418; border-radius: 8px; font-variant-numeric: tabular-nums }
body.jupi.p2j_body .p2j_shop_anker { margin: 0; font: 800 12px/1.2 system-ui, sans-serif; color: #8a7562 }
body.jupi.p2j_body .p2j_shop_anker b { color: #fff; background: #ef4a37; padding: 1px 5px; border-radius: 6px }
body.jupi.p2j_body .p2j_shop_badge, body.jupi.p2j_body .p2j_shop_band {
  position: absolute; z-index: 2; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  padding: 3px 8px; white-space: nowrap; font: 900 10px/1.2 system-ui, sans-serif; text-transform: uppercase;
  color: #fff; background: var(--a_rot); border: 2px solid var(--a_umriss); border-radius: 8px; text-shadow: 0 1px 0 #6a0d05;
}
body.jupi.p2j_body .p2j_shop_band { top: auto; bottom: 54px; left: auto; right: -8px; transform: rotate(8deg); background: var(--a_gruen); text-shadow: 0 1px 0 #1d520b }
body.jupi.p2j_body .p2j_shop_kaufen {
  margin-top: auto; min-height: 42px; width: 100%; border: 3px solid var(--a_umriss); border-radius: 11px;
  background: var(--a_gruen); color: #fff; font: 900 13px/1.1 system-ui, sans-serif;
  text-shadow: 0 2px 0 #1d520b; box-shadow: inset 0 3px 0 #ffffff70, 0 3px 0 var(--a_umriss); cursor: pointer;
}
body.jupi.p2j_body .p2j_shop_kaufen:disabled { filter: grayscale(1); opacity: .7; cursor: not-allowed }
body.jupi.p2j_body .p2j_shop_karte_aktion { background: linear-gradient(#fff3d4, #ffd36e) }
/* Die Wahrheit steht nur mit aufgesetzter Trick-Brille da */
body.jupi.p2j_body .p2j_wahrheit { display: none }
body.jupi.p2j_body.p2j_trickbrille .p2j_wahrheit {
  display: block; margin: 0; padding: 5px 6px; font: 800 11px/1.3 system-ui, sans-serif;
  color: #1b1d23; background: #ffe14d; border: 2px dashed #1b1d23; border-radius: 8px;
}

/* ---------- 8 Pop-up-Angebot, Werbung, Trick-Karte ---------- */
body.jupi.p2j_body .p2j_arcade_dlg {
  position: fixed; inset: 0; margin: auto; width: min(92vw, 380px); max-height: 92dvh;
  padding: 0; border: 0; background: none; overflow: visible; color: #fff;
}
body.jupi.p2j_body .p2j_arcade_dlg::backdrop { background: #0a0612cc; backdrop-filter: blur(2px) }
body.jupi.p2j_body .p2j_popup_karte, body.jupi.p2j_body .p2j_werbespot, body.jupi.p2j_body .p2j_trick_karte {
  position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; overflow: visible;
  padding: 22px 16px 14px; border: 4px solid var(--a_umriss); border-radius: 20px;
  box-shadow: 0 6px 0 var(--a_umriss), 0 0 60px #c36bff99;
  box-sizing: border-box;
}
body.jupi.p2j_body .p2j_trick_karte { max-height: 86dvh; overflow-y: auto }
body.jupi.p2j_body .p2j_popup_karte { background: radial-gradient(circle at 50% 20%, #c46cf0, #6b26a8 60%, #3a1158) }
body.jupi.p2j_body .p2j_popup_karte h2 { margin: 0; font: 900 24px/1.1 system-ui, sans-serif; color: #fff; text-shadow: 0 3px 0 var(--a_umriss) }
body.jupi.p2j_body .p2j_popup_kicker { margin: 0; font: 900 12px/1 system-ui, sans-serif; letter-spacing: .12em; color: #ffe48a }
body.jupi.p2j_body .p2j_popup_rabatt {
  position: absolute; top: -20px; right: -8px; width: 66px; height: 66px; display: grid; place-items: center;
  font: 900 17px/1 system-ui, sans-serif; color: #fff; background: var(--a_rot);
  border: 3px solid var(--a_umriss); border-radius: 50%; transform: rotate(12deg); text-shadow: 0 2px 0 #6a0d05;
}
body.jupi.p2j_body .p2j_popup_inhalt { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px }
body.jupi.p2j_body .p2j_popup_inhalt span {
  padding: 8px 12px; font: 900 15px/1.2 system-ui, sans-serif; color: #2b1d10;
  background: linear-gradient(#fffaf0, #ecdcbf); border: 3px solid var(--a_umriss); border-radius: 12px;
}
body.jupi.p2j_body .p2j_popup_uhr { margin: 0; font: 800 13px/1.2 system-ui, sans-serif; color: #fff }
body.jupi.p2j_body .p2j_popup_uhr b { color: #ffe48a; font-variant-numeric: tabular-nums }
body.jupi.p2j_body .p2j_popup_preis { margin: 0; font: 900 16px/1 system-ui, sans-serif }
body.jupi.p2j_body .p2j_popup_preis s { color: #d9b8f0 }
body.jupi.p2j_body .p2j_popup_preis strong { font-size: 26px; color: #ffe48a; text-shadow: 0 2px 0 var(--a_umriss) }
body.jupi.p2j_body .p2j_arcade_kaufen {
  width: 100%; min-height: 54px; border: 4px solid var(--a_umriss); border-radius: 14px;
  background: var(--a_gruen); color: #fff; font: 900 19px/1.1 system-ui, sans-serif;
  text-shadow: 0 2px 0 #1d520b; box-shadow: inset 0 4px 0 #ffffff70, 0 4px 0 var(--a_umriss); cursor: pointer;
  animation: a_puls 1.4s ease-in-out infinite;
}
body.jupi.p2j_body .p2j_arcade_kaufen:disabled { animation: none; filter: grayscale(1); opacity: .8; cursor: default }
@keyframes a_puls { 50% { transform: scale(1.04) } }
/* Der Nein-Knopf ist klein und grau - und soll ein schlechtes Gewissen machen */
body.jupi.p2j_body .p2j_popup_nein {
  min-height: 40px; padding: 4px 8px; border: 0; background: none; cursor: pointer;
  font: 600 11px/1.2 system-ui, sans-serif; color: #c9b4dd; text-decoration: underline;
}
body.jupi.p2j_body .p2j_popup_fiktiv { margin: 0; font-size: 10px; color: #d9c8ee }
body.jupi.p2j_body .p2j_werbespot { background: linear-gradient(#ff4f9a, #b5178a 60%, #5a0b56) }
body.jupi.p2j_body .p2j_werbespot h2 { margin: 0; font: 900 26px/1.05 system-ui, sans-serif; color: #fff; text-shadow: 0 3px 0 var(--a_umriss); transform: rotate(-2deg) }
body.jupi.p2j_body .p2j_werbespot p { margin: 0; font: 700 13px/1.35 system-ui, sans-serif; color: #fff }
body.jupi.p2j_body .p2j_werbespot_marke {
  position: absolute; top: 8px; left: 10px; right: 10px; display: flex; justify-content: space-between;
  font: 900 10px/1 system-ui, sans-serif !important; letter-spacing: .1em; color: #ffd0e6 !important;
}
body.jupi.p2j_body .p2j_werbespot_marke b { padding: 2px 7px; background: #0008; border-radius: 9px; color: #fff }
body.jupi.p2j_body .p2j_werbespot_bild { display: flex; justify-content: center; padding-top: 8px }
body.jupi.p2j_body .p2j_werbespot_bild .p2j_symbol { width: 60px; height: 60px; color: #1d520b; fill: #b0f070; margin: 0 -10px; animation: a_puls 1s ease-in-out infinite }
body.jupi.p2j_body .p2j_werbespot_bild .p2j_symbol:nth-child(2) { width: 76px; height: 76px; animation-delay: .3s }
body.jupi.p2j_body .p2j_werbespot_fortschritt { width: 100%; height: 8px; background: #0006; border-radius: 4px; overflow: hidden }
body.jupi.p2j_body .p2j_werbespot_fortschritt i { display: block; height: 100%; width: 0; background: #ffe48a; transition: width 1s linear }
body.jupi.p2j_body .p2j_trick_karte { background: linear-gradient(#fffbe0, #f6e7a3); color: #1b1d23; box-shadow: 0 6px 0 var(--a_umriss), 0 0 40px #ffe14d99 }
body.jupi.p2j_body .p2j_trick_karte h2 { margin: 0; font: 900 22px/1.15 system-ui, sans-serif; color: #1b1d23 }
body.jupi.p2j_body .p2j_trick_karte p { margin: 0; font: 600 14px/1.45 system-ui, sans-serif; color: #2b2a24; text-align: left }
body.jupi.p2j_body .p2j_trick_stempel {
  justify-self: center; padding: 4px 12px; transform: rotate(-4deg);
  font: 900 15px/1 system-ui, sans-serif !important; letter-spacing: .1em; color: #c01a1a !important;
  border: 3px solid #c01a1a; border-radius: 8px; text-align: center !important;
}
body.jupi.p2j_body .p2j_trick_schutz { padding: 8px 10px; background: #d9f2c4; border: 2px solid #3a7a1c; border-radius: 10px }
body.jupi.p2j_body .p2j_trick_fortschritt { font-weight: 800 !important; text-align: center !important }
body.jupi.p2j_body .p2j_arcade_gruen { animation: none }
body.jupi.p2j_body .p2j_trickliste { columns: 2; gap: 14px; padding-left: 18px; font-size: 13px }
body.jupi.p2j_body .p2j_trickliste li { break-inside: avoid; margin: 2px 0; opacity: .6 }
body.jupi.p2j_body .p2j_trickliste .p2j_trick_gefunden { opacity: 1; font-weight: 800 }

/* ---------- 9 Querformat, kleine und große Bildschirme ---------- */
@media (max-width: 350px) {
  body.jupi.p2j_body .p2j_ressourcen { width: 140px }
  body.jupi.p2j_body .p2j_wallet { width: 128px }
  body.jupi.p2j_body .p2j_xpbalken { width: 70px }
  body.jupi.p2j_body .p2j_dock button span { font-size: 9px }
  body.jupi.p2j_body .p2j_brillenband { left: 70px; right: 70px; font-size: 10px }
}
@media (min-width: 700px) {
  body.jupi.p2j_body .p2j_spielerkarte { top: 14px; left: 14px }
  body.jupi.p2j_body .p2j_spielerkarte strong { font-size: 16px }
  body.jupi.p2j_body .p2j_xpbalken { width: 140px }
  body.jupi.p2j_body .p2j_pokale { top: 70px; left: 18px }
  body.jupi.p2j_body .p2j_seite_links { top: 116px; left: 16px }
  body.jupi.p2j_body .p2j_ressourcen { top: 14px; right: 16px; width: 200px }
  body.jupi.p2j_body .p2j_wallet { top: 174px; right: 16px; width: 186px }
  body.jupi.p2j_body .p2j_seite_rechts { top: 232px; right: 18px }
  body.jupi.p2j_body .p2j_dock { left: 50%; right: auto; width: 560px; transform: translateX(-50%); bottom: 0; border: 3px solid var(--a_umriss); border-bottom: 0; border-radius: 18px 18px 0 0 }
  body.jupi.p2j_body .p2j_dock button { height: 70px; font-size: 13px }
  body.jupi.p2j_body #p2j_angreifen { height: 96px }
  body.jupi.p2j_body .p2j_kamera { bottom: 16px; right: 16px }
  body.jupi.p2j_body .p2j_buehne_info { bottom: 110px; left: 100px; right: 100px }
  body.jupi.p2j_body .p2j_baukatalog { bottom: 92px }
  body.jupi.p2j_body .p2j_brillenband { top: 18px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(420px, 40vw) }
  body.jupi.p2j_body #p2j_shop_raster { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) }
  body.jupi.p2j_body .p2j_arcade_dlg { width: min(92vw, 420px) }
}
@media (min-width: 700px) and (max-width: 1100px) and (min-height: 531px) {
  body.jupi.p2j_body .p2j_kamera { bottom: 100px }
  body.jupi.p2j_body .p2j_buehne_info { bottom: 160px }
}
@media (max-height: 530px) {
  body.jupi.p2j_body .p2j_spielerkarte { top: 4px }
  body.jupi.p2j_body .p2j_pokale { display: none }
  body.jupi.p2j_body .p2j_seite_links { top: 62px; grid-template-columns: repeat(5, auto); gap: 2px }
  body.jupi.p2j_body .p2j_seite_rechts { top: 56px; right: auto; left: 50%; transform: translateX(-50%); grid-template-columns: repeat(4, auto); gap: 2px; display: none }
  body.jupi.p2j_body .p2j_rund { width: 50px; min-height: 48px }
  body.jupi.p2j_body .p2j_rund span { display: none }
  body.jupi.p2j_body .p2j_rund .p2j_symbol { width: 44px; height: 44px; padding: 8px }
  body.jupi.p2j_body .p2j_ressourcen { top: 4px; right: 8px; width: 420px; grid-template-columns: repeat(4, minmax(0, 1fr)) }
  body.jupi.p2j_body .p2j_ressource { margin-left: 16px; padding-right: 6px }
  body.jupi.p2j_body .p2j_plus { display: none }
  body.jupi.p2j_body .p2j_wallet { top: 46px; right: 8px; width: 150px }
  body.jupi.p2j_body .p2j_dock { left: 50%; right: auto; width: 440px; transform: translateX(-50%); border-radius: 14px 14px 0 0 }
  body.jupi.p2j_body .p2j_dock button { height: 50px }
  body.jupi.p2j_body .p2j_dock button span { font-size: 9px }
  body.jupi.p2j_body .p2j_dock .p2j_symbol { width: 22px; height: 22px }
  body.jupi.p2j_body #p2j_angreifen { height: 66px; margin-top: -16px }
  body.jupi.p2j_body .p2j_kamera { bottom: 8px; right: 8px }
  body.jupi.p2j_body .p2j_buehne_info { bottom: 70px; left: 120px; right: 240px }
  body.jupi.p2j_body .p2j_brillenband { top: auto; bottom: 120px; left: 60px; right: 60px }
}
@media (max-height: 530px) and (min-width: 600px) {
  body.jupi.p2j_body .p2j_seite_rechts { display: grid; top: auto; bottom: 66px; left: auto; right: 8px; transform: none; grid-template-columns: repeat(4, auto) }
  body.jupi.p2j_body .p2j_angebot { width: 50px; min-height: 48px; padding: 4px 2px; margin: 0 }
  body.jupi.p2j_body .p2j_angebot .p2j_symbol { width: 26px; height: 26px }
  body.jupi.p2j_body .p2j_angebot_band, body.jupi.p2j_body .p2j_angebot_uhr { display: none }
  body.jupi.p2j_body .p2j_kamera { bottom: 124px }
}
@media (prefers-reduced-motion: reduce) {
  body.jupi.p2j_body .p2j_rotpunkt, body.jupi.p2j_body .p2j_angebot, body.jupi.p2j_body .p2j_arcade_kaufen,
  body.jupi.p2j_body .p2j_werbespot_bild .p2j_symbol, body.jupi.p2j_body [data-trick],
  body.jupi.p2j_body .p2j_ressource::before { animation: none !important }
}

/* ---------- Nachbesserungen nach der Sichtprobe ---------- */
/* Einsammeln erbt alte Kastenstile aus dorf.css/mobil.css - zurücksetzen */
body.jupi.p2j_body .p2j_seite #p2j_sammeln {
  min-height: 64px; padding: 0; flex-wrap: nowrap; background: none; border: 0; box-shadow: none; border-radius: 0;
}
body.jupi.p2j_body .p2j_seite #p2j_sammeln b { flex-basis: auto }
body.jupi.p2j_body .p2j_angebot .p2j_rotpunkt { top: auto; bottom: -8px; right: -8px }
body.jupi.p2j_body .p2j_plus { right: -2px }
body.jupi.p2j_body .p2j_ressource { padding-right: 46px; margin-right: 4px }
body.jupi.p2j_body .p2j_wallet>span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 8px }
body.jupi.p2j_body .p2j_shop_band { top: 56px; bottom: auto }
body.jupi.p2j_body .p2j_shop_bild_diamanten .p2j_symbol { fill: #9ff3ff; color: #0e3f6e }
body.jupi.p2j_body .p2j_shop_brille { flex: none; margin-left: auto; margin-right: 8px; min-width: 44px; min-height: 44px; border: 3px solid var(--a_umriss); border-radius: 12px; background: linear-gradient(#3b3f4a, #1b1d23); color: #ffe14d; cursor: pointer }
body.jupi.p2j_body .p2j_shop_brille .p2j_symbol { width: 24px; height: 24px }
body.jupi.p2j_body.p2j_trickbrille .p2j_shop_brille { background: #ffe14d; color: #1b1d23 }
@media (max-height: 530px) and (min-width: 600px) {
  body.jupi.p2j_body .p2j_angebot .p2j_symbol { display: block }
}
/* Kurze Handys: Seitenknöpfe enger, damit Kamera und Tipp frei bleiben */
@media (max-height: 760px) and (max-width: 699px) {
  body.jupi.p2j_body .p2j_seite { gap: 3px }
  body.jupi.p2j_body .p2j_rund { min-height: 58px }
  body.jupi.p2j_body .p2j_rund .p2j_symbol { width: 44px; height: 44px; padding: 8px }
  body.jupi.p2j_body .p2j_seite_rechts { top: 228px }
  body.jupi.p2j_body .p2j_angebot { min-height: 72px; width: 64px }
  body.jupi.p2j_body .p2j_angebot .p2j_symbol { width: 32px; height: 32px }
}

/* Große Bildschirme: das Dorf füllt immer das ganze Fenster (styles.css
   deckelte .p2j_spiel auf 1820 px - daneben blieb die Seitenkulisse stehen) */
body.jupi.p2j_body .p2j_spiel { max-width: none; width: 100% }

/* Niedrige Fenster (auch Desktop): rechte Spalte enger, sonst stößt sie an die Kamera */
@media (max-height: 820px) and (min-width: 700px) {
  body.jupi.p2j_body .p2j_seite { gap: 3px }
  body.jupi.p2j_body .p2j_rund { min-height: 58px }
  body.jupi.p2j_body .p2j_rund .p2j_symbol { width: 44px; height: 44px; padding: 8px }
  body.jupi.p2j_body .p2j_seite_rechts { top: 226px }
  body.jupi.p2j_body .p2j_angebot { min-height: 72px; width: 64px }
  body.jupi.p2j_body .p2j_angebot .p2j_symbol { width: 32px; height: 32px }
}
/* Große Bildschirme: das ganze HUD wächst mit (wie im Vorbild) */
@media (min-width: 1800px) and (min-height: 1000px) {
  body.jupi.p2j_body .p2j_spielerkarte, body.jupi.p2j_body .p2j_pokale,
  body.jupi.p2j_body .p2j_seite, body.jupi.p2j_body .p2j_ressourcen,
  body.jupi.p2j_body .p2j_wallet, body.jupi.p2j_body .p2j_kamera,
  body.jupi.p2j_body .p2j_buehne_info, body.jupi.p2j_body .p2j_brillenband,
  body.jupi.p2j_body .p2j_dock, body.jupi.p2j_body .p2j_baukatalog { zoom: 1.25 }
}
@media (min-width: 2400px) and (min-height: 1300px) {
  body.jupi.p2j_body .p2j_spielerkarte, body.jupi.p2j_body .p2j_pokale,
  body.jupi.p2j_body .p2j_seite, body.jupi.p2j_body .p2j_ressourcen,
  body.jupi.p2j_body .p2j_wallet, body.jupi.p2j_body .p2j_kamera,
  body.jupi.p2j_body .p2j_buehne_info, body.jupi.p2j_body .p2j_brillenband,
  body.jupi.p2j_body .p2j_dock, body.jupi.p2j_body .p2j_baukatalog { zoom: 1.5 }
}

/* ---------- 10 Weltkarte als Vollbild-Strategiekarte ---------- */
body.jupi.p2j_body #p2j_welt.p2j_welt_voll {
  inset: 0; margin: 0; width: 100vw; max-width: none; height: 100dvh; max-height: none;
  border: 0; border-radius: 0; padding: 0; background: #2a7fb3; color: #fff;
}
body.jupi.p2j_body #p2j_welt.p2j_welt_voll[open] { display: flex; flex-direction: column }
body.jupi.p2j_body .p2j_welt_kopf {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 58px; box-sizing: border-box;
  background: linear-gradient(#2f4a7a, #1b2c4e); border-bottom: 3px solid var(--a_umriss); box-shadow: inset 0 -3px 0 #4f73b0;
}
body.jupi.p2j_body .p2j_welt_kopf h2 {
  margin: 0; font: 900 18px/1.1 system-ui, sans-serif; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 var(--a_umriss), 1px 0 var(--a_umriss), -1px 0 var(--a_umriss);
}
body.jupi.p2j_body .p2j_welt_kopf .p2j_dialog_x { margin-left: auto }
body.jupi.p2j_body #p2j_welt .p2j_welt_info { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; background: none; border: 0 }
body.jupi.p2j_body .p2j_welt_chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 5px; min-height: 26px; box-sizing: border-box;
  font: 800 12px/1 system-ui, sans-serif; color: #fff; background: #0d1830aa; border: 2px solid var(--a_umriss); border-radius: 14px;
}
body.jupi.p2j_body .p2j_welt_chip i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--a_umriss) }
body.jupi.p2j_body .p2j_welt_chip b { padding: 1px 6px; border-radius: 8px; background: #ffffff25 }
body.jupi.p2j_body .p2j_welt_buehne { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden }
body.jupi.p2j_body #p2j_welt_canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; border: 0; border-radius: 0 }
body.jupi.p2j_body #p2j_welt_canvas:active { cursor: grabbing }
body.jupi.p2j_body .p2j_welt_tipp {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); margin: 0; max-width: calc(100% - 140px);
  padding: 5px 12px; font: 700 11px/1.3 system-ui, sans-serif; text-align: center; color: #fff;
  background: #0d1830aa; border-radius: 12px; pointer-events: none;
}
body.jupi.p2j_body .p2j_welt_zoom {
  position: absolute; right: 10px; top: 10px; display: grid; gap: 6px;
}
body.jupi.p2j_body .p2j_welt_zoom button {
  width: 44px; height: 44px; border: 3px solid var(--a_umriss); border-radius: 12px; cursor: pointer;
  background: var(--a_gold); color: #fff; font: 900 22px/1 system-ui, sans-serif; text-shadow: 0 2px 0 #6b3a05;
  box-shadow: inset 0 3px 0 #ffffff70, 0 3px 0 var(--a_umriss);
}
/* Regionskarte schwebt unten über der Karte (Papier mit Comic-Umriss) */
body.jupi.p2j_body #p2j_welt .p2j_region_panel {
  position: absolute; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(560px, calc(100% - 24px)); max-height: 58%; overflow-y: auto; box-sizing: border-box;
  padding: 12px 14px; color: #2b1d10; background: linear-gradient(#fffaf0, #ecdcbf);
  border: 3px solid var(--a_umriss); border-radius: 16px; box-shadow: 0 5px 0 var(--a_umriss), 0 10px 30px #0008;
}
body.jupi.p2j_body #p2j_welt .p2j_region_panel:empty { display: none }
body.jupi.p2j_body #p2j_welt .p2j_region_kopf { justify-content: space-between }
body.jupi.p2j_body #p2j_welt .p2j_region_kopf h3 { color: #2b1d10; font-size: 16px }
body.jupi.p2j_body .p2j_region_zu {
  flex: none; width: 40px; height: 40px; border: 3px solid var(--a_umriss); border-radius: 10px; cursor: pointer;
  background: var(--a_rot); color: #fff; font: 900 16px/1 system-ui, sans-serif;
}
@media (max-width: 600px) {
  body.jupi.p2j_body .p2j_welt_kopf { flex-wrap: wrap; row-gap: 6px }
  body.jupi.p2j_body #p2j_welt .p2j_welt_info { order: 3; flex-basis: 100% }
  body.jupi.p2j_body .p2j_welt_tipp { display: none }
}
body.jupi.p2j_body #p2j_welt .p2j_region_panel .p2j_geb_zeile { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed #8a7562 }
body.jupi.p2j_body #p2j_welt .p2j_region_panel .p2j_geb_zeile span { color: #5b4630; font: 700 13px/1.3 system-ui, sans-serif }
body.jupi.p2j_body #p2j_welt .p2j_region_panel .p2j_geb_zeile strong { color: #2b1d10; font: 900 14px/1.3 system-ui, sans-serif }
body.jupi.p2j_body #p2j_welt .p2j_region_panel .p2j_text2 { color: #5b4630 }

/* ---------- 11 Lagerbalken: nichts ragt mehr über den Rand ----------
   Die alten Regeln (dorf.css: width:100%) plus linker Rand machten jede Zeile
   18 px breiter als die Spalte - das Plus lief aus dem Fenster. Jetzt füllt die
   Zeile genau die Spalte, das Plus sitzt IN der Zeile, das Symbol links davor. */
body.jupi.p2j_body .p2j_ressourcen { width: 172px; gap: 6px }
body.jupi.p2j_body .p2j_ressource {
  width: auto; box-sizing: border-box; height: 40px; min-height: 40px;
  margin: 0 0 0 20px; padding: 0 48px 0 24px; overflow: visible;
}
body.jupi.p2j_body .p2j_ressource .p2j_symbol {
  left: -20px; top: 50%; width: 42px; height: 42px; transform: translateY(-50%);
  filter: drop-shadow(0 2px 0 #00000066); stroke-width: 1.6;
}
body.jupi.p2j_body .p2j_plus {
  right: 0; top: 0; transform: none; width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  border-radius: 0 8px 8px 0; border-width: 0 0 0 2px; box-shadow: inset 0 2px 0 #ffffff80;
  font-size: 24px;
}
body.jupi.p2j_body .p2j_ressource strong { font-size: 16px }
@media (min-width: 700px) {
  body.jupi.p2j_body .p2j_ressourcen { width: 200px }
}
@media (max-width: 350px) {
  body.jupi.p2j_body .p2j_ressourcen { width: 150px }
  body.jupi.p2j_body .p2j_ressource strong { font-size: 14px }
}
@media (max-height: 530px) {
  body.jupi.p2j_body .p2j_ressourcen { width: 440px }
  body.jupi.p2j_body .p2j_ressource { margin-left: 18px; padding: 0 8px 0 22px; height: 36px; min-height: 36px }
  body.jupi.p2j_body .p2j_ressource .p2j_symbol { width: 36px; height: 36px; left: -18px }
}
/* Höhere Lagerbalken (40 px): Spielgeld und rechte Spalte rücken nach unten */
body.jupi.p2j_body .p2j_wallet { top: 194px }
body.jupi.p2j_body .p2j_seite_rechts { top: 246px }
@media (max-height: 760px) and (max-width: 699px) { body.jupi.p2j_body .p2j_seite_rechts { top: 250px } }
@media (min-width: 700px) {
  body.jupi.p2j_body .p2j_wallet { top: 200px }
  body.jupi.p2j_body .p2j_seite_rechts { top: 258px }
}
@media (max-height: 820px) and (min-width: 700px) { body.jupi.p2j_body .p2j_seite_rechts { top: 254px } }
@media (max-height: 530px) {
  body.jupi.p2j_body .p2j_wallet { top: 46px }
}
@media (min-width: 700px) and (max-width: 1100px) and (max-height: 820px) {
  body.jupi.p2j_body .p2j_kamera { right: auto; left: 16px }
}