/* pay2jupi/styles.css - Spieloptik "Dorfplatz" (Umbau 08.11.2026, zweiter Pass).
   ---------------------------------------------------------------------------
   Warum dieses Thema (Regel 3.13.6b): Pay2Jupi ist ein Aufbauspiel wie Clash of
   Clans - ein Dorf, das wächst. Die Oberfläche sieht deshalb aus wie das Spiel
   selbst: dunkles Holz und behauener Stein als Rahmen, Gold als Zierkante,
   grüne Wiese als Bühne, dicke plastische Knöpfe, abgerundete Ecken, klare
   Symbole. Der Shop bleibt bewusst grell (Satire über Pay2Win) - er ist das
   reißerische Plakat im sonst ruhigen Dorf.

   Aufbau der Datei:
     1. Farben und Material (hell + dunkel)
     2. Seite und Wiese (EINE gestreckte Szene, 3.13.7 Weg A)
     3. JUPI-Leiste (drei Zonen, top:0, 3.13.2/3.13.2a)
     4. Grundbausteine: Knopf, Holzplatte, Papier, Symbol, Abzeichen
     5. Startmenü, Registrierung, Konten
     6. Spielbrett: Kopf, Ressourcen, Verwaltung, Bühne, Baulade, Werkzeugleiste
     7. Dialoge, Shop, Abrechnung, Listen
     8. Fuß, Handy, Bewegung
   Alle Regeln hängen an body.jupi.p2j_body (jupi.css wäre sonst stärker).
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1 - Farben und Material
   =========================================================================== */
:root {
  /* Holz und Stein: die Rahmen der Oberfläche */
  --p2j_holz: #8a5a2b;
  --p2j_holz_hell: #b07a3f;
  --p2j_holz_dunkel: #5c3a18;
  --p2j_holz_tief: #3d2610;
  --p2j_stein: #6f7d90;
  --p2j_stein_hell: #93a1b4;
  --p2j_stein_dunkel: #47536608;

  /* Gold: Zierkante, aktive Elemente, Werte */
  --p2j_gold: #f2c230;
  --p2j_gold_hell: #ffe27a;
  --p2j_gold_dunkel: #b9871a;

  /* Flächen */
  --p2j_platte: #2c3c56;          /* dunkle Holzplatte / Panel */
  --p2j_platte_hell: #3b4e6d;
  --p2j_platte_tief: #1e2a3f;
  --p2j_papier: #f8eed7;          /* helle Papierfläche (Karten, Listen) */
  --p2j_papier_alt: #efe1c4;
  --p2j_papier_rand: #c9b48a;

  /* Schrift */
  --p2j_text: #2a2418;
  --p2j_text2: #6b6151;
  --p2j_text_hell: #f4ead2;
  --p2j_text_hell2: #c3b899;

  /* Bedeutung */
  --p2j_gruen: #5aa832;           /* Wiese, Erfolg */
  --p2j_gruen_hell: #7ccc4a;
  --p2j_gruen_dunkel: #3c7a1f;
  --p2j_rot: #cc4224;             /* Gefahr, Abbruch */
  --p2j_rot_hell: #ec6b45;
  --p2j_rot_dunkel: #8e2a14;
  --p2j_blau: #3f9fd8;            /* Wasser, Info */
  --p2j_dia: #38d6d6;             /* Diamanten */
  --p2j_warn: #e8892a;

  --p2j_glas: rgba(20, 30, 45, 0.9);
  --p2j_glas_rand: rgba(242, 194, 48, 0.55);
  --p2j_schatten: rgba(12, 18, 26, 0.34);
  --p2j_radius: 14px;
  --p2j_radius_klein: 9px;
  --p2j_sans: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --p2j_serif: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --p2j_kante: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 55%);
}

html[data-theme="dark"] {
  --p2j_holz: #6d4520;
  --p2j_holz_hell: #8a5a2b;
  --p2j_holz_dunkel: #452c12;
  --p2j_holz_tief: #2b1a09;
  --p2j_stein: #4e5b6d;
  --p2j_stein_hell: #6d7c90;
  --p2j_platte: #1d2838;
  --p2j_platte_hell: #2a3749;
  --p2j_platte_tief: #131b26;
  --p2j_papier: #2b3646;
  --p2j_papier_alt: #222c39;
  --p2j_papier_rand: #46566c;
  --p2j_text: #ece4d2;
  --p2j_text2: #a8b3c1;
  --p2j_text_hell: #f4ead2;
  --p2j_text_hell2: #a9b6c5;
  --p2j_gruen: #4d8d2c;
  --p2j_glas: rgba(10, 16, 26, 0.94);
  --p2j_schatten: rgba(0, 0, 0, 0.55);
}

/* ===========================================================================
   2 - Seite und Wiese
   =========================================================================== */
body.jupi.p2j_body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--p2j_text);
  font-family: var(--p2j_sans);
  background: #5f9e3a url("kulisse.svg") center top / cover no-repeat fixed;
}
html[data-theme="dark"] body.jupi.p2j_body {
  background: #16241c url("kulisse-nacht.svg") center top / cover no-repeat fixed;
}
/* Der Container ist eine Spalte: Kopf oben, Fuß am Dokumentende (3.13.2a). */
body.jupi.p2j_body .jupi_container {
  width: 100%; max-width: none; margin: 0; padding: 0;
  min-height: 100dvh; display: flex; flex-direction: column;
  background: transparent;
}
body.jupi.p2j_body .jupi_main {
  flex: 1 0 auto; padding: 0; margin: 0; max-width: none; min-width: 0;
  background: transparent;
}
/* Weiches Licht über der Wiese: hält die Szene ruhig hinter dem Brett. */
body.jupi.p2j_body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 220, 0.2), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(10, 30, 10, 0.3), transparent 66%);
}
html[data-theme="dark"] body.jupi.p2j_body::before {
  background:
    radial-gradient(ellipse at 25% 10%, rgba(150, 190, 255, 0.08), transparent 58%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.5), transparent 66%);
}
body.jupi.p2j_body .jupi_container,
body.jupi.p2j_body .jupi_main { position: relative; z-index: 1; }

/* ===========================================================================
   3 - JUPI-Leiste: dunkles Holzbrett mit Goldkante (drei Zonen)
   =========================================================================== */
body.jupi.p2j_body .jupi_header.p2j_leiste {
  position: sticky; top: 0; z-index: 60;
  margin: 0; padding: 0 18px;
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0;
  border-bottom: 4px solid var(--p2j_gold_dunkel);
  background:
    repeating-linear-gradient(90deg, rgba(255, 226, 150, 0.06) 0 2px, transparent 2px 44px),
    linear-gradient(180deg, #6f4a22, #4a2f14 62%, #33200c);
  box-shadow: 0 8px 24px rgba(10, 14, 10, 0.5), inset 0 1px 0 rgba(255, 232, 170, 0.28);
}
/* feine Goldlinie knapp unter der Kante: der Doppelstrich des Rahmens */
body.jupi.p2j_body .jupi_header.p2j_leiste::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 160, 0.55) 10%, rgba(255, 236, 160, 0.55) 90%, transparent);
  pointer-events: none;
}
body.jupi.p2j_body .jupi_header.p2j_leiste .jupi_werkzeuge { justify-self: end; }

.p2j_marke { display: flex; align-items: center; gap: 11px; min-width: 0; }
.p2j_marke img {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  border: 2px solid var(--p2j_gold);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.p2j_marke h1 {
  font-family: var(--p2j_serif);
  font-size: 1.22rem; font-weight: 800; letter-spacing: 0.01em;
  margin: 0; color: #fff4d8; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(60, 34, 6, 0.85);
}
.p2j_marke small {
  display: block; font-family: var(--p2j_sans);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: #e0c78c;
}
body.jupi.p2j_body .p2j_leiste .jupi_nav_back {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 8px 14px;
  border-radius: 11px; border: 2px solid #8a6224;
  background: linear-gradient(180deg, #7d5528, #543413);
  color: #ffefc6; font-size: 0.82rem; font-weight: 800; text-decoration: none;
  box-shadow: 0 2px 0 #2f1c07, inset 0 1px 0 rgba(255, 231, 170, 0.3);
}
body.jupi.p2j_body .p2j_leiste .jupi_nav_back:hover {
  background: linear-gradient(180deg, #96682f, #66401a); color: #fff8e2;
}
body.jupi.p2j_body .p2j_leiste .jupi_sprachen_select {
  color: #ffefc6; background: rgba(30, 18, 6, 0.42);
  border: 2px solid #8a6224; border-radius: 10px; font-weight: 700;
}
body.jupi.p2j_body .p2j_leiste .jupi_sprachen_select option { color: #2a2418; background: #f8eed7; }
body.jupi.p2j_body .p2j_leiste .jupi_theme_switch {
  background: rgba(30, 18, 6, 0.42); border: 2px solid #8a6224;
}

/* ===========================================================================
   4 - Grundbausteine
   =========================================================================== */

/* --- Knöpfe: dicke Holzklötze mit Goldkante und Licht von oben ---------- */
.p2j_knopf {
  position: relative;
  min-width: 46px; min-height: 46px;
  border-radius: var(--p2j_radius_klein); cursor: pointer;
  border: 2px solid var(--p2j_holz_dunkel);
  background:
    var(--p2j_kante),
    linear-gradient(180deg, #f6ecd4, #e2d2b0 62%, #cbb894);
  color: #3a2f1c;
  font: 800 0.85rem/1.2 var(--p2j_sans);
  padding: 9px 14px;
  box-shadow: 0 3px 0 var(--p2j_holz_dunkel), 0 4px 8px var(--p2j_schatten);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease, box-shadow 60ms ease;
}
.p2j_knopf:hover {
  border-color: var(--p2j_gold_dunkel);
  background: var(--p2j_kante), linear-gradient(180deg, #fff9e8, #eaddbd 62%, #d6c39c);
}
.p2j_knopf:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--p2j_holz_dunkel), 0 1px 3px var(--p2j_schatten);
}
.p2j_knopf:focus-visible, .p2j_nav:focus-visible, .p2j_bau_karte:focus-visible,
.p2j_auswahl_karte:focus-visible, .p2j_shop_kaufen:focus-visible {
  outline: 3px solid var(--p2j_gold_hell); outline-offset: 2px;
}
/* Hauptknopf: Gold mit dunkler Kante, wie "Angreifen" im Aufbauspiel */
.p2j_knopf_haupt {
  border-color: #8a6210;
  background:
    var(--p2j_kante),
    linear-gradient(180deg, #ffe89a, var(--p2j_gold) 58%, #d29c14);
  color: #3c2a02;
  text-shadow: 0 1px 0 rgba(255, 250, 220, 0.7);
  box-shadow: 0 3px 0 #8a6210, 0 5px 12px rgba(90, 62, 6, 0.4);
}
.p2j_knopf_haupt:hover {
  background: var(--p2j_kante), linear-gradient(180deg, #fff0b8, #ffd763 58%, #dda616);
}
.p2j_knopf_haupt:active { box-shadow: 0 0 0 #8a6210, 0 1px 3px rgba(90, 62, 6, 0.4); }
/* Glanzknopf: rot, für Shop (Satire) */
.p2j_knopf_glanz {
  border-color: #7a2114;
  background:
    var(--p2j_kante),
    linear-gradient(180deg, #f27452, var(--p2j_rot) 58%, #a32f16);
  color: #fff6ea;
  text-shadow: 0 1px 0 rgba(90, 20, 6, 0.6);
  box-shadow: 0 3px 0 #7a2114, 0 5px 12px rgba(70, 16, 6, 0.4);
}
.p2j_knopf_glanz:hover {
  background: var(--p2j_kante), linear-gradient(180deg, #ff8a63, #d94c2b 58%, #a32f16);
}
.p2j_knopf_gefahr {
  border-color: #7a2114;
  background: var(--p2j_kante), linear-gradient(180deg, #e2633f, #b3371c 60%, #8a2712);
  color: #fff4ea;
  text-shadow: 0 1px 0 rgba(80, 18, 6, 0.6);
  box-shadow: 0 3px 0 #5e1a0c;
}
.p2j_knopf:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none;
  filter: grayscale(0.3);
}
.p2j_knopf[aria-pressed="true"] {
  background: var(--p2j_kante), linear-gradient(180deg, #4f8f3a, var(--p2j_gruen) 60%, #3c7a1f);
  border-color: #2f6116; color: #f6ffe9;
  text-shadow: 0 1px 0 rgba(20, 50, 8, 0.6);
  box-shadow: 0 3px 0 #2f6116, inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Export/Import: der Pfeil wird gezeichnet, nicht als Schriftzeichen gesetzt -
   das Glyphe ⬇ fehlt in manchen Systemschriften und schrumpfte zum Strich.
   Pfeil und Text stehen zusammen in der Mitte, nicht an den Rändern. */
.p2j_knopf_export, .p2j_knopf_import {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.p2j_knopf_export::before, .p2j_knopf_import::before {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -5px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor;
  transform: rotate(45deg);
}
.p2j_knopf_import::before { transform: rotate(-135deg); margin-top: 4px; }

/* Ton-Knopf im Startmenü: gezeichnetes Lautsprecher-Symbol statt Emoji
   (🔊 fiel je nach System farbig oder gar nicht aus).
   ::before = Gehäuse + Trichter (eine Fläche mit clip-path),
   ::after  = Schallbogen, bei "aus" ein Schrägstrich. */
#p2j_start_ton {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 0 10px; font-size: 0;
}
#p2j_start_ton::before {
  content: ""; width: 15px; height: 15px; flex: none;
  background: currentColor;
  clip-path: polygon(0 34%, 30% 34%, 68% 4%, 68% 96%, 30% 66%, 0 66%);
}
#p2j_start_ton::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-inline-start: 1px;
  border: 3px solid currentColor; border-left-color: transparent;
  border-radius: 50%;
}
#p2j_start_ton.p2j_ton_aus::after {
  width: 13px; height: 3px; border: 0; border-radius: 2px;
  background: currentColor; transform: rotate(-45deg);
}

/* --- Holzplatte: der Standardrahmen für Panels --------------------------- */
.p2j_panel {
  background: var(--p2j_papier);
  border: 3px solid var(--p2j_holz_dunkel);
  border-radius: var(--p2j_radius);
  box-shadow: 0 6px 18px var(--p2j_schatten), inset 0 0 0 2px rgba(255, 240, 200, 0.45);
  padding: 1rem;
}
.p2j_text2 { color: var(--p2j_text2); }

/* --- Symbole: handgezeichnete SVGs, stroke currentColor ------------------ */
.p2j_symbol { width: 22px; height: 22px; flex: none; }
.p2j_symbol use, .p2j_symbol path, .p2j_symbol circle, .p2j_symbol rect {
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.p2j_symbol_gefuellt path, .p2j_symbol_gefuellt circle { fill: currentColor; stroke: none; }

/* --- Kleine Auszeichnungen ---------------------------------------------- */
.p2j_lernsatz {
  font-size: 0.87rem; line-height: 1.6;
  text-align: start;
  margin: 0.95rem 0 0;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--p2j_gruen_dunkel);
  border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #f2fae4, #e2f0cc);
  color: #2c3a1e;
}
html[data-theme="dark"] .p2j_lernsatz {
  background: linear-gradient(180deg, #2e3f2a, #24331f);
  border-color: #4a6b32; color: #e6f0d8;
}
.p2j_hinweis_fiktiv {
  font-size: 0.83rem; line-height: 1.55;
  background: linear-gradient(180deg, #fff6d8, #f7e9b8);
  border: 2px solid #d8b640;
  border-radius: var(--p2j_radius_klein); padding: 0.65rem 0.8rem;
  color: #4a3c10; text-align: start;
}
html[data-theme="dark"] .p2j_hinweis_fiktiv {
  background: linear-gradient(180deg, #3d3620, #2e2a18);
  border-color: #8a7420; color: #f0e4b8;
}
.p2j_id_anzeige {
  display: inline-block;
  font-family: "Consolas", ui-monospace, monospace;
  font-size: 1rem; letter-spacing: 0.16em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #4a3a22, #33260f);
  border: 2px solid var(--p2j_gold_dunkel);
  border-radius: 8px; padding: 0.4rem 0.75rem; color: var(--p2j_gold_hell);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* ===========================================================================
   5 - Startmenü, Registrierung, Konten
   =========================================================================== */
.p2j_start {
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(18px, 5vh, 54px) 16px 40px;
}
/* [hidden]-Falle: display:flex übermalt sonst das hidden-Attribut. */
.p2j_start[hidden], .p2j_spiel[hidden] { display: none; }

/* Die Startkarte ist das Dorftor: Holzrahmen, Papier innen, Goldleiste oben. */
.p2j_start_karte {
  position: relative;
  max-width: 37rem; width: 100%;
  text-align: center;
  padding: 30px 28px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), transparent 42%),
    var(--p2j_papier);
  border: 4px solid var(--p2j_holz_dunkel);
  border-radius: 20px;
  box-shadow:
    0 22px 50px rgba(14, 26, 12, 0.45),
    inset 0 0 0 3px rgba(242, 194, 48, 0.55),
    inset 0 0 0 6px rgba(140, 92, 40, 0.35);
  overflow: hidden;
}
/* Goldband über der Karte, wie ein Schild über dem Tor */
.p2j_start_karte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: linear-gradient(180deg, var(--p2j_gold_hell), var(--p2j_gold) 45%, var(--p2j_gold_dunkel));
  box-shadow: 0 2px 6px rgba(90, 60, 8, 0.45);
  pointer-events: none;
}
.p2j_start_karte::after {
  content: ""; position: absolute; inset: 10px 10px auto auto;
  width: 26px; height: 26px; pointer-events: none;
  border: 3px solid rgba(140, 92, 40, 0.4); border-left: 0; border-bottom: 0;
  border-radius: 0 10px 0 0;
}
.p2j_start_logo {
  width: 84px; height: 84px; border-radius: 18px;
  border: 3px solid var(--p2j_holz_dunkel);
  box-shadow: 0 6px 18px rgba(14, 26, 12, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: #2c3c56;
}
.p2j_start_karte h2 {
  font-family: var(--p2j_serif); font-weight: 800;
  font-size: clamp(1.7rem, 3.5vw, 2.15rem);
  margin: 0.65rem 0 0.35rem; color: #2f2513;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.p2j_start_unter { margin: 0 auto 0.9rem; max-width: 32rem; color: var(--p2j_text2); font-size: 0.92rem; line-height: 1.6; }
.p2j_start_knoepfe { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin: 1rem 0 0.2rem; }
.p2j_start_knoepfe .p2j_knopf { flex: 1 1 auto; min-width: 150px; }
.p2j_start_hinweis { font-size: 0.77rem; line-height: 1.6; color: var(--p2j_text2); margin: 0.9rem 0 0; }

html[data-theme="dark"] .p2j_start_karte {
  background:
    linear-gradient(180deg, rgba(255, 240, 200, 0.08), transparent 42%),
    var(--p2j_papier);
  border-color: #12202c;
  box-shadow:
    0 22px 50px rgba(0, 0, 0, 0.6),
    inset 0 0 0 3px rgba(242, 194, 48, 0.4),
    inset 0 0 0 6px rgba(40, 60, 84, 0.6);
}
html[data-theme="dark"] .p2j_start_karte h2 { color: #f4ead2; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }

/* --- Registrierung --- */
.p2j_reg_feld { text-align: left; margin: 0.85rem 0; }
.p2j_reg_feld label {
  display: block; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--p2j_text2); margin-bottom: 0.35rem;
}
.p2j_reg_zeile { display: flex; gap: 8px; align-items: center; }
.p2j_reg_zeile .p2j_knopf { flex: none; }
.p2j_reg_zeile strong {
  font-family: var(--p2j_serif); font-size: 1.18rem; font-weight: 800;
  border-bottom: 2px dashed var(--p2j_papier_rand); flex: 1; padding: 0.32rem 0;
  color: #2f2513;
}
html[data-theme="dark"] .p2j_reg_zeile strong { color: #f4ead2; }
.p2j_auswahl_karten { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.p2j_auswahl_karte {
  width: 80px; min-height: 80px;
  border-radius: var(--p2j_radius_klein); cursor: pointer;
  border: 2px solid var(--p2j_papier_rand);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  padding: 5px 3px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: 800 0.68rem/1.2 var(--p2j_sans); color: var(--p2j_text);
  box-shadow: 0 2px 0 rgba(140, 92, 40, 0.35);
}
.p2j_auswahl_karte img { width: 42px; height: 42px; }
.p2j_auswahl_karte:hover { border-color: var(--p2j_gold_dunkel); }
.p2j_auswahl_karte[aria-pressed="true"] {
  border-color: var(--p2j_gruen_dunkel); background: linear-gradient(180deg, #eaf7d8, #cfe8b0);
  box-shadow: 0 2px 0 var(--p2j_gruen_dunkel), inset 0 0 0 2px rgba(90, 168, 50, 0.5);
}
html[data-theme="dark"] .p2j_auswahl_karte[aria-pressed="true"] { background: linear-gradient(180deg, #3b5a34, #2c4526); color: #f4ead2; }
.p2j_auswahl_karte:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- Kontenliste: Zeilen wie Einträge im Dorfbuch --- */
.p2j_konto_liste { display: flex; flex-direction: column; gap: 9px; margin: 1rem 0; }
.p2j_konto_zeile {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; text-align: left;
  border: 2px solid var(--p2j_papier_rand);
  border-radius: var(--p2j_radius_klein); cursor: pointer;
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  color: var(--p2j_text);
  box-shadow: 0 2px 0 rgba(140, 92, 40, 0.3);
}
.p2j_konto_zeile:hover { border-color: var(--p2j_gold_dunkel); background: linear-gradient(180deg, #fffdf6, #f4e8cc); }
.p2j_konto_zeile img { width: 46px; height: 46px; border-radius: 10px; flex: none; border: 2px solid var(--p2j_holz_dunkel); }
.p2j_konto_zeile strong { display: block; font-family: var(--p2j_serif); font-weight: 800; font-size: 1.04rem; }
.p2j_konto_zeile small { color: var(--p2j_text2); font-size: 0.76rem; }
.p2j_konto_zeile .p2j_knopf { margin-left: auto; flex: none; }
.p2j_meldung { font-size: 0.81rem; color: var(--p2j_text2); min-height: 1em; margin: 0.5rem 0 0; }

/* ===========================================================================
   6 - Spielbrett
   =========================================================================== */
.p2j_spiel {
  width: 100%; max-width: 1820px; margin: 0 auto;
  padding: 16px clamp(10px, 2vw, 26px) 6px;
  box-sizing: border-box;
}

/* --- Kopf: Dorfname wie ein Schild über dem Dorf ----------------------- */
.p2j_stadtkopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.p2j_stadtkopf small,
.p2j_kommando > small,
.p2j_stadtstat > small,
.p2j_bilanz small {
  display: block;
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #4b3a1c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .p2j_stadtkopf small,
html[data-theme="dark"] .p2j_kommando > small,
html[data-theme="dark"] .p2j_stadtstat > small,
html[data-theme="dark"] .p2j_bilanz small { color: #cbb98a; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.p2j_stadtkopf h2 {
  font-family: var(--p2j_serif); font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.34;
  margin: 2px 0 4px; padding-bottom: 3px; color: #fff8e2;
  text-shadow: 0 2px 0 rgba(48, 34, 10, 0.8), 0 4px 12px rgba(0, 0, 0, 0.45);
}
/* Goldstrich unter dem Dorfnamen: sitzt unter der Schrift, nicht darin. */
.p2j_stadtkopf h2::after {
  content: ""; display: block; width: 74px; height: 4px; margin-top: 7px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--p2j_gold), rgba(242, 194, 48, 0));
}
.p2j_stadtkopf_rechts { display: flex; gap: 10px; align-items: center; padding-bottom: 4px; }
.p2j_simulation {
  font-size: 0.7rem; font-weight: 700; color: #f0e2be;
  border: 2px solid rgba(140, 92, 40, 0.7); border-radius: 999px;
  padding: 5px 11px; background: rgba(28, 38, 24, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.18);
}

/* --- Ressourcen: schwarze Leisten mit Goldkante (HUD wie im Spiel) ----- */
.p2j_ressourcen {
  display: flex; flex-wrap: nowrap; gap: 0;
  margin: 0 0 14px;
  background: linear-gradient(180deg, #1b2534, #121a26);
  border: 3px solid var(--p2j_holz_dunkel);
  border-radius: var(--p2j_radius);
  overflow: hidden;
  box-shadow: 0 5px 16px rgba(8, 14, 10, 0.45), inset 0 0 0 2px rgba(242, 194, 48, 0.4);
}
.p2j_ressource {
  display: flex; align-items: center; gap: 9px;
  flex: 1; min-width: 0;
  padding: 11px 16px; min-height: 46px;
  background: none; color: #f6eed8;
  border: 0; border-inline-end: 1px solid rgba(242, 194, 48, 0.22);
  border-radius: 0;
  font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.p2j_ressource:last-child { border-inline-end: 0; }
.p2j_ressource .p2j_symbol { width: 22px; height: 22px; color: var(--p2j_gold); }
.p2j_ressource small {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  color: #a9b6c5; white-space: nowrap;
}
.p2j_ressource_dia { background: rgba(56, 214, 214, 0.1); }
.p2j_ressource_dia .p2j_symbol { color: var(--p2j_dia); }
.p2j_ressource_dia strong { color: #a8f4f4; }
.p2j_ressource_pill { flex: 0.9; }
.p2j_ressource_pill .p2j_symbol { color: #9fb4cc; }

/* --- Raster: Verwaltung | Brett --------------------------------------- */
.p2j_stadtrahmen {
  display: grid;
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.p2j_stadtmitte { min-width: 0; display: flex; flex-direction: column; }

/* --- Verwaltung: linke Holzleiste --------------------------------------- */
.p2j_kommando {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 10px;
  background:
    linear-gradient(180deg, rgba(255, 226, 150, 0.1), transparent 26%),
    linear-gradient(180deg, #3a4d6b, var(--p2j_platte) 55%, #22314a);
  border: 3px solid var(--p2j_holz_dunkel);
  border-radius: var(--p2j_radius);
  box-shadow: 0 5px 16px rgba(8, 14, 10, 0.42), inset 0 0 0 2px rgba(242, 194, 48, 0.32);
}
.p2j_kommando > small { padding: 0 10px 8px; color: #d9c48e; }
html[data-theme="dark"] .p2j_kommando > small { color: #cbb98a; }
.p2j_nav {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 9px 11px;
  border: 2px solid transparent; border-radius: var(--p2j_radius_klein);
  background: transparent; color: #efe6ce;
  font: 800 0.83rem/1.2 var(--p2j_sans); text-align: start; cursor: pointer;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  transition: background 120ms ease, border-color 120ms ease;
}
.p2j_nav .p2j_symbol { width: 21px; height: 21px; color: #b9c7d8; }
.p2j_nav:hover { background: rgba(255, 236, 170, 0.12); border-color: rgba(242, 194, 48, 0.35); }
.p2j_nav:hover .p2j_symbol { color: var(--p2j_gold_hell); }
.p2j_nav_aktiv {
  background: linear-gradient(180deg, #4f8f3a, var(--p2j_gruen) 58%, #3c7a1f);
  color: #f8ffe9; border-color: var(--p2j_gold_dunkel);
  box-shadow: 0 3px 0 rgba(24, 48, 12, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.p2j_nav_aktiv .p2j_symbol { color: #fff3c4; }
.p2j_nav b {
  margin-inline-start: auto;
  font-size: 0.72rem; font-weight: 800;
  background: rgba(0, 0, 0, 0.32); border-radius: 999px;
  padding: 1px 8px; color: #ffe9a3;
}
.p2j_nav_aktiv b { background: rgba(255, 240, 190, 0.28); color: #fff8e2; }

.p2j_stadtstat {
  margin: 14px 6px 6px; padding-top: 12px;
  border-top: 2px solid rgba(242, 194, 48, 0.25);
}
#p2j_produktion {
  margin-top: 6px; font-size: 0.75rem; line-height: 1.7;
  color: #e8dfc6; font-variant-numeric: tabular-nums;
}

/* Werbeplakat an der Dorfmauer (Satire) */
.p2j_werbung {
  margin-top: auto;
  text-align: start; cursor: pointer;
  padding: 12px;
  border: 3px solid var(--p2j_rot_dunkel);
  border-radius: var(--p2j_radius_klein);
  background:
    repeating-linear-gradient(-45deg, rgba(204, 66, 36, 0.06) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #ffe9a8, #f3d680);
  color: #3a2410;
  box-shadow: 0 4px 0 rgba(110, 40, 20, 0.45);
}
.p2j_werbung > span {
  display: inline-block; padding: 2px 7px;
  background: var(--p2j_rot); color: #fff6ea;
  border-radius: 4px;
  font-size: 0.57rem; font-weight: 900; letter-spacing: 0.09em;
}
.p2j_werbung strong {
  display: block; font-family: var(--p2j_serif); font-weight: 800;
  font-size: 1.3rem; line-height: 1.14; margin: 10px 0;
  overflow-wrap: anywhere; hyphens: auto;
}
.p2j_werbung small { display: block; font-size: 0.65rem; line-height: 1.45; }
.p2j_werbung:hover { filter: brightness(1.05); }

.p2j_bilanz {
  display: block; width: 100%; text-align: start;
  margin-top: 8px; padding: 12px 8px 5px; min-height: 66px;
  background: none; border: 0; border-top: 2px solid rgba(242, 194, 48, 0.25);
  color: #efe6ce; cursor: pointer;
}
.p2j_bilanz strong {
  display: block; margin-top: 2px;
  font-family: var(--p2j_serif); font-size: 1.34rem; font-weight: 800;
  color: var(--p2j_gold_hell); font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}

/* --- Bühne: das Dorf auf der Wiese, im Holzrahmen --------------------- */
.p2j_buehne {
  position: relative; overflow: hidden;
  border-radius: var(--p2j_radius);
  background: #4f8f3a;
}
.p2j_stadtbuehne {
  height: clamp(430px, 58vh, 780px);
  border: 4px solid var(--p2j_holz_dunkel);
  border-radius: var(--p2j_radius);
  background: #63a83f;
  box-shadow:
    0 0 0 3px rgba(242, 194, 48, 0.75),
    0 8px 24px rgba(8, 16, 8, 0.4),
    inset 0 0 0 3px rgba(60, 38, 14, 0.5);
}
/* Goldene Eckwinkel wie an einem Turnierplatz (nur Deko, klickfest). */
.p2j_stadtbuehne::before,
.p2j_stadtbuehne::after {
  content: ""; position: absolute; z-index: 3; width: 26px; height: 26px;
  border: 4px solid var(--p2j_gold); pointer-events: none;
  border-radius: 6px;
}
.p2j_stadtbuehne::before { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.p2j_stadtbuehne::after { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
#p2j_dorf_canvas {
  display: block; width: 100%; height: 100%;
  aspect-ratio: auto; cursor: grab; touch-action: none;
}
#p2j_dorf_canvas:active { cursor: grabbing; }
.p2j_canvas { display: block; width: 100%; height: auto; touch-action: none; }

/* Schild am Brettrand: "Heimatstadt" wie eine Holztafel */
.p2j_kartenmarke {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px;
  background: linear-gradient(180deg, #8a5a2b, #5c3a18);
  border: 2px solid var(--p2j_gold_dunkel);
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(40, 26, 8, 0.6), inset 0 1px 0 rgba(255, 226, 150, 0.35);
  font-size: 0.7rem; font-weight: 800; color: #ffefc6;
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.p2j_livepunkt {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--p2j_gruen_hell);
  box-shadow: 0 0 0 3px rgba(124, 204, 74, 0.3);
}

/* Kamera-Bedienung: runde Goldknöpfe unten rechts */
.p2j_kamera { position: absolute; right: 14px; bottom: 16px; z-index: 2; display: flex; gap: 5px; }
.p2j_kamera button {
  min-width: 42px; min-height: 42px; padding: 0 6px;
  font-size: 1.15rem; font-weight: 800; line-height: 1;
  color: #3a2a08; background: linear-gradient(180deg, #ffe89a, var(--p2j_gold) 58%, #d29c14);
  border: 2px solid #8a6210; border-radius: 10px; cursor: pointer;
  box-shadow: 0 3px 0 #8a6210, 0 4px 10px rgba(20, 14, 4, 0.4);
  text-shadow: 0 1px 0 rgba(255, 250, 220, 0.6);
}
.p2j_kamera button:hover { background: linear-gradient(180deg, #fff2b8, #ffd763 58%, #dda616); }
.p2j_kamera button:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a6210; }

/* Hinweiszeile auf dem Brett. Rechts bleibt Platz für die fünf Kameraknöpfe
   (5 × 42 px + Lücken = 226 px), sonst schiebt sich der Tipp darüber. */
.p2j_buehne_info {
  position: absolute; left: 14px; right: 250px; bottom: 16px; top: auto;
  z-index: 2; display: flex; flex-direction: column; gap: 5px;
  pointer-events: none;
}
.p2j_buehne_tipp {
  max-width: 40rem; width: fit-content;
  font-size: 0.73rem; font-weight: 700; line-height: 1.45;
  color: #f6eed8;
  background: rgba(18, 26, 36, 0.9);
  border: 2px solid rgba(242, 194, 48, 0.5);
  border-radius: 8px; padding: 6px 11px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.p2j_bau_aktiv {
  width: fit-content;
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 800;
  color: #2c3a1e; background: linear-gradient(180deg, #eaf7d8, #cfe8b0);
  border: 2px solid var(--p2j_gruen_dunkel); border-radius: 8px;
  padding: 5px 10px;
}

/* --- Baulade: Baukatalog unter dem Brett, wie eine Werkzeuglade -------- */
.p2j_baukatalog {
  border: 3px solid var(--p2j_holz_dunkel);
  border-top: 0;
  border-radius: 0 0 var(--p2j_radius) var(--p2j_radius);
  background:
    linear-gradient(180deg, rgba(255, 226, 150, 0.12), transparent 24%),
    linear-gradient(180deg, #3a4d6b, var(--p2j_platte) 55%, #22314a);
  box-shadow: 0 6px 16px var(--p2j_schatten), inset 0 0 0 2px rgba(242, 194, 48, 0.28);
  overflow: hidden;
}
html[data-theme="dark"] .p2j_baukatalog {
  background: linear-gradient(180deg, #24303f, var(--p2j_platte), #141d29);
  border-color: var(--p2j_holz_tief);
}
.p2j_baukopf {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 2px solid rgba(242, 194, 48, 0.28);
}
/* Goldgriff der Lade */
.p2j_baukopf::before {
  content: ""; width: 36px; height: 10px; flex: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe89a, var(--p2j_gold) 55%, #a8770f);
  box-shadow: 0 2px 4px rgba(20, 14, 4, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.p2j_baukopf > strong {
  font-size: 0.78rem; font-weight: 900; letter-spacing: 0.05em;
  text-transform: uppercase; white-space: nowrap; color: #ffe9a8;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
.p2j_baufilter { display: flex; gap: 5px; flex-wrap: wrap; }
.p2j_baufilter .p2j_knopf {
  min-height: 42px; padding: 5px 11px;
  font-size: 0.71rem; border-radius: 9px;
}
#p2j_bau_abbrechen { margin-inline-start: auto; font-size: 0.73rem; }

.p2j_baumenue {
  display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden;
  margin: 0; padding: 10px;
  min-height: 138px;
  scrollbar-width: thin; scrollbar-color: var(--p2j_gold) transparent;
}
.p2j_bau_karte {
  flex: none; width: 122px;
  padding: 6px 6px 9px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 2px solid rgba(242, 194, 48, 0.35); border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #fdf6e6, #ecdcbc);
  color: #33280f;
  font: 800 0.66rem/1.3 var(--p2j_sans); text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(60, 38, 14, 0.45);
}
html[data-theme="dark"] .p2j_bau_karte {
  background: linear-gradient(180deg, #33445c, #253248);
  color: #efe6ce;
  border-color: rgba(242, 194, 48, 0.28);
}
.p2j_bau_karte canvas { width: 92px; height: 76px; image-rendering: auto; }
.p2j_bau_karte strong { font-size: 0.75rem; font-weight: 800; }
.p2j_bau_karte:hover { border-color: var(--p2j_gold); }
.p2j_bau_karte[aria-pressed="true"] {
  background: linear-gradient(180deg, #eaf7d8, #cfe8b0);
  border-color: var(--p2j_gruen_dunkel);
  box-shadow: 0 3px 0 var(--p2j_gruen_dunkel), inset 0 0 0 2px rgba(90, 168, 50, 0.45);
}
html[data-theme="dark"] .p2j_bau_karte[aria-pressed="true"] { background: linear-gradient(180deg, #3b5a34, #2c4526); }
.p2j_bau_karte.p2j_gesperrt { opacity: 0.55; filter: grayscale(0.4); }
.p2j_bau_karte[hidden] { display: none !important; }

/* --- Werkzeugleiste: die runde Knopfreihe am unteren Rand ------------- */
.p2j_leisten { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 4px; }
.p2j_leisten .p2j_knopf {
  display: flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 7px 12px;
  font-size: 0.75rem; border-radius: var(--p2j_radius_klein);
}
.p2j_leisten .p2j_knopf_glanz {
  background:
    var(--p2j_kante),
    linear-gradient(180deg, #f27452, var(--p2j_rot) 58%, #a32f16);
  color: #fff6ea;
}
.p2j_leisten .p2j_symbol { width: 18px; height: 18px; }
.p2j_leisten_zeichen {
  margin-inline-start: auto;
  display: flex; align-items: center;
  font-size: 0.73rem; font-weight: 700; color: #f0e6cc;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

/* --- Weltmeldungen: Zeilen wie im Dorfprotokoll ----------------------- */
.p2j_meldungen {
  display: flex; flex-direction: column; gap: 3px;
  margin: 0; padding-bottom: 8px;
  max-height: 68px; overflow-y: auto;
}
.p2j_meldung_zeile {
  padding: 4px 10px;
  font-size: 0.71rem; font-weight: 600; color: #e8dfc6;
  border-inline-start: 4px solid var(--p2j_gold);
  background: rgba(18, 26, 36, 0.55);
  border-radius: 0 6px 6px 0;
}

/* ===========================================================================
   7 - Dialoge
   =========================================================================== */
dialog.p2j_dialog {
  width: auto;
  max-width: min(94vw, 47rem);
  max-height: 90vh;
  padding: 0 0 15px;
  overflow: auto;
  border: 4px solid var(--p2j_holz_dunkel);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 30%),
    var(--p2j_papier);
  color: var(--p2j_text);
  box-shadow: 0 28px 80px rgba(6, 14, 6, 0.65), inset 0 0 0 3px rgba(242, 194, 48, 0.4);
}
dialog.p2j_dialog::backdrop {
  background: rgba(8, 16, 10, 0.74);
  backdrop-filter: blur(3px);
}
dialog.p2j_dialog_gross { max-width: min(96vw, 62rem); }
.p2j_dialog_kopf {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 13px; padding: 12px 16px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 226, 150, 0.07) 0 2px, transparent 2px 34px),
    linear-gradient(180deg, #6f4a22, #4a2f14 60%, #33200c);
  border-bottom: 3px solid var(--p2j_gold_dunkel);
  border-radius: 0;
}
.p2j_dialog_kopf h2 {
  margin: 0;
  font-family: var(--p2j_serif); font-weight: 800; font-size: 1.26rem;
  color: #fff4d8; text-shadow: 0 2px 0 rgba(60, 34, 6, 0.8);
}
.p2j_dialog_x {
  margin-inline-start: auto;
  min-width: 42px; min-height: 42px;
  font-size: 1.05rem; font-weight: 800; line-height: 1;
  color: #3a2a08; background: linear-gradient(180deg, #ffe89a, var(--p2j_gold) 58%, #d29c14);
  border: 2px solid #8a6210; border-radius: 10px; cursor: pointer;
  box-shadow: 0 2px 0 #8a6210;
}
.p2j_dialog_x:hover { background: linear-gradient(180deg, #fff2b8, #ffd763 58%, #dda616); }
.p2j_dialog_schau { display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.p2j_dialog_schau h3 {
  font-family: var(--p2j_serif); font-weight: 800; font-size: 1.06rem;
  margin: 10px 0 2px; color: #2f2513;
  border-bottom: 2px solid var(--p2j_papier_rand); padding-bottom: 4px;
}
html[data-theme="dark"] .p2j_dialog_schau h3 { color: #f4ead2; }
.p2j_dialog_schau ul { margin: 0; padding-inline-start: 1.15rem; }
.p2j_dialog_schau li { margin: 0.3rem 0; line-height: 1.55; font-size: 0.9rem; }
.p2j_dialog_schau p { margin: 0.25rem 0; line-height: 1.6; font-size: 0.9rem; }

/* --- Shop: bewusst grell (Satire) -------------------------------------- */
.p2j_shop_raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
  gap: 11px;
  padding: 0 16px;
}
.p2j_shop_karte {
  position: relative;
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 10px 12px;
  text-align: center;
  border-radius: var(--p2j_radius);
  border: 3px solid var(--p2j_gold_hell);
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(165deg, #35318a, #171446 68%);
  color: #f3f0ff;
  box-shadow: 0 8px 20px rgba(12, 8, 40, 0.55), inset 0 1px 0 rgba(255, 245, 200, 0.24);
}
.p2j_shop_karte_aktion {
  background:
    radial-gradient(circle at 80% 8%, rgba(255, 255, 255, 0.22), transparent 42%),
    linear-gradient(165deg, #a81f56, #4b0b2e 68%);
  border-color: #ff9dc4;
}
.p2j_shop_karte h3 { margin: 0; font-size: 0.96rem; font-weight: 900; color: #ffe9a3; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
.p2j_shop_text { margin: 0; min-height: 2.2em; font-size: 0.74rem; line-height: 1.4; color: #e2dcff; }
.p2j_shop_dia {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-weight: 900; color: #9fe6ff;
}
.p2j_shop_kaufen {
  margin-top: auto;
  min-height: 46px; padding: 8px 12px;
  font: 900 0.98rem/1 var(--p2j_sans);
  color: #3f2600;
  background: linear-gradient(180deg, #ffe066, #f7a71a 62%, #d8800a);
  border: 2px solid #8a5c06; border-radius: 999px;
  box-shadow: 0 4px 0 #8a5c06, inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.6);
}
.p2j_shop_kaufen:hover { filter: brightness(1.06); }
.p2j_shop_kaufen:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a5c06; }
.p2j_shop_badge {
  position: absolute; top: -12px; right: -7px;
  padding: 3px 9px;
  font-size: 0.63rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #ff6f9c, #c8144f);
  border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
  box-shadow: 0 2px 6px rgba(40, 0, 20, 0.5);
}
.p2j_shop_badge_bestwert { background: linear-gradient(180deg, #b388ff, #6a3cf5); }
.p2j_shop_countdown {
  align-self: center;
  padding: 3px 8px;
  font-size: 0.71rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: #ffd6d6;
  background: rgba(255, 60, 60, 0.28);
  border: 2px solid #ff7b7b; border-radius: 6px;
}
.p2j_shop_glanz::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--p2j_radius); pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.22) 46%, transparent 60%);
  background-size: 260% 100%;
  animation: p2j_schimmer 2.8s linear infinite;
}
@keyframes p2j_schimmer { from { background-position: 120% 0; } to { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) { .p2j_shop_glanz::after { animation: none; } }
.p2j_shop_fiktiv {
  margin: 11px 16px 0;
  padding: 7px 11px;
  font-size: 0.78rem; font-weight: 700; text-align: center;
  color: #2c3a1e;
  background: linear-gradient(180deg, #f2fae4, #e2f0cc);
  border: 2px solid var(--p2j_gruen_dunkel); border-radius: 8px;
}
html[data-theme="dark"] .p2j_shop_fiktiv { background: linear-gradient(180deg, #2e3f2a, #24331f); border-color: #4a6b32; color: #e6f0d8; }

/* --- Abrechnung: Dorfbuch -------------------------------------------- */
.p2j_abrechnung_summen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 9px; margin-bottom: 4px;
}
.p2j_summen_karte {
  padding: 10px 12px;
  border: 2px solid var(--p2j_papier_rand);
  border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  color: var(--p2j_text);
  box-shadow: 0 2px 0 rgba(140, 92, 40, 0.3);
}
html[data-theme="dark"] .p2j_summen_karte { background: linear-gradient(180deg, #33445c, #253248); }
.p2j_summen_karte small { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.04em; }
.p2j_summen_karte strong {
  display: block; margin-top: 2px;
  font-family: var(--p2j_serif); font-size: 1.3rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.p2j_tabelle { width: 100%; border-collapse: collapse; font-size: 0.85rem; color: var(--p2j_text); }
.p2j_tabelle th, .p2j_tabelle td {
  text-align: left; padding: 7px 9px;
  border-bottom: 1px solid var(--p2j_papier_rand);
}
.p2j_tabelle th {
  font-size: 0.67rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--p2j_text2);
}
.p2j_tabelle tbody tr:nth-child(even) { background: rgba(242, 194, 48, 0.09); }
.p2j_tabelle td:last-child, .p2j_tabelle th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.p2j_balken_zeile { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--p2j_text); }
.p2j_balken {
  flex: 1; height: 14px; overflow: hidden;
  border-radius: 999px;
  background: rgba(60, 50, 30, 0.28);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.p2j_balken > span { display: block; height: 100%; background: linear-gradient(90deg, var(--p2j_gold), #f08a2a); border-radius: 999px; }

/* --- Weltkarte ---------------------------------------------------------- */
.p2j_welt_info {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 0.86rem; color: var(--p2j_text);
}
.p2j_region_panel { display: grid; gap: 9px; }
.p2j_region_kopf { display: flex; align-items: center; gap: 10px; }
.p2j_region_kopf h3 { margin: 0; font-family: var(--p2j_serif); font-weight: 800; }
.p2j_region_macht { font-variant-numeric: tabular-nums; }
.p2j_truppen_wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.p2j_truppe {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px;
  border: 2px solid var(--p2j_papier_rand); border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  color: var(--p2j_text); font-size: 0.83rem;
}
html[data-theme="dark"] .p2j_truppe { background: linear-gradient(180deg, #33445c, #253248); }
.p2j_truppe input {
  width: 4.3rem; min-height: 42px;
  font: inherit; text-align: center;
  color: var(--p2j_text); background: var(--p2j_papier);
  border: 2px solid var(--p2j_papier_rand); border-radius: 8px;
}

/* --- Kampfbericht ------------------------------------------------------ */
.p2j_kampf_verlauf { display: flex; flex-direction: column; gap: 6px; }
.p2j_kampf_zeile {
  display: grid; grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center; gap: 8px;
  font-size: 0.83rem; font-variant-numeric: tabular-nums;
  color: var(--p2j_text);
}
.p2j_kampf_bar {
  height: 16px; overflow: hidden; border-radius: 999px;
  background: rgba(60, 50, 30, 0.25);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.p2j_kampf_bar > span { display: block; height: 100%; border-radius: 999px; transition: width 0.5s ease; }
.p2j_kampf_bar_a > span { background: linear-gradient(90deg, #3f9fd8, #7cd0f0); }
.p2j_kampf_bar_v > span { background: linear-gradient(90deg, #cc4224, #f08a63); }
.p2j_kampf_ergebnis {
  margin: 8px 0 4px;
  font-family: var(--p2j_serif); font-weight: 800; font-size: 1.22rem; text-align: center;
  color: var(--p2j_text);
}
.p2j_kampf_sieg { color: var(--p2j_gruen_dunkel); }
.p2j_kampf_niederlage { color: var(--p2j_rot_dunkel); }
html[data-theme="dark"] .p2j_kampf_sieg { color: #9fdc6a; }
html[data-theme="dark"] .p2j_kampf_niederlage { color: #f08a63; }

/* --- Listen (Rang, Klan, Achievements) --------------------------------- */
.p2j_liste {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 46vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--p2j_gold) transparent;
}
.p2j_liste_zeile {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 2px solid var(--p2j_papier_rand); border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  color: var(--p2j_text); font-size: 0.87rem;
}
html[data-theme="dark"] .p2j_liste_zeile { background: linear-gradient(180deg, #33445c, #253248); }
.p2j_liste_zeile > span { min-width: 0; }
.p2j_liste_zeile img { width: 32px; height: 32px; border-radius: 7px; flex: none; border: 2px solid var(--p2j_holz_dunkel); }
.p2j_liste_rang { width: 2.5rem; text-align: center; font-weight: 900; font-variant-numeric: tabular-nums; }
.p2j_liste_macht { margin-inline-start: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.p2j_liste_zeile_spieler {
  border-color: var(--p2j_gruen_dunkel);
  background: linear-gradient(180deg, #eaf7d8, #cfe8b0);
  box-shadow: inset 0 0 0 2px rgba(90, 168, 50, 0.4);
}
html[data-theme="dark"] .p2j_liste_zeile_spieler { background: linear-gradient(180deg, #3b5a34, #2c4526); }
.p2j_wappen { width: 36px; height: 36px; border-radius: 8px; flex: none; border: 2px solid var(--p2j_holz_dunkel); }

/* --- Klan-Chat (klar als KI-Simulation gekennzeichnet) ----------------- */
.p2j_chat { display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow-y: auto; }
.p2j_chat_zeile {
  padding: 6px 10px;
  border-inline-start: 4px solid var(--p2j_stein);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  border-radius: 0 8px 8px 0;
  font-size: 0.85rem; color: var(--p2j_text);
}
html[data-theme="dark"] .p2j_chat_zeile { background: linear-gradient(180deg, #33445c, #253248); }
.p2j_chat_zeile small { display: block; color: var(--p2j_text2); font-size: 0.71rem; }
.p2j_chat_ki {
  display: inline-block;
  padding: 1px 7px;
  font-size: 0.65rem; font-weight: 800;
  color: #f4ead2; background: var(--p2j_blau);
  border-radius: 999px;
}

/* --- Aufträge / Fortschritt -------------------------------------------- */
.p2j_aufgabe {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border: 2px solid var(--p2j_papier_rand); border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  color: var(--p2j_text); font-size: 0.87rem;
}
html[data-theme="dark"] .p2j_aufgabe { background: linear-gradient(180deg, #33445c, #253248); }
.p2j_aufgabe_erledigt { opacity: 0.85; border-color: var(--p2j_gruen_dunkel); }
.p2j_fortschritt {
  flex: 1; height: 11px; overflow: hidden;
  border-radius: 999px; background: rgba(60, 50, 30, 0.25);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
.p2j_fortschritt > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p2j_gruen_hell), var(--p2j_gruen)); }

/* --- Bericht "Willkommen zurück" --------------------------------------- */
.p2j_bericht_zeilen { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; }
.p2j_bericht_zeilen li {
  position: relative; list-style: none; padding-inline-start: 1.6rem;
  color: var(--p2j_text); font-size: 0.89rem; line-height: 1.5;
}
.p2j_bericht_zeilen li::before {
  content: ""; position: absolute; inset-inline-start: 0.35rem; top: 0.5em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--p2j_gold);
  box-shadow: 0 0 0 2px rgba(242, 194, 48, 0.28);
}

/* --- Gebäudefenster ---------------------------------------------------- */
.p2j_geb_panel { min-width: 268px; display: grid; gap: 9px; padding: 0 16px; }
.p2j_geb_zeile { display: flex; justify-content: space-between; gap: 10px; font-size: 0.88rem; color: var(--p2j_text); }
.p2j_geb_zeile strong { font-variant-numeric: tabular-nums; }
.p2j_geb_knoepfe { display: flex; flex-wrap: wrap; gap: 7px; }

/* --- PvP-Zielkarten ---------------------------------------------------- */
.p2j_feldzug_intro { max-width: 68ch; font-size: 0.87rem; line-height: 1.6; }
.p2j_feldzug_filter { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.p2j_feldzug_liste { display: grid; gap: 9px; }
.p2j_zielkarte {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 13px;
  border: 3px solid var(--p2j_holz_dunkel); border-radius: var(--p2j_radius_klein);
  background: linear-gradient(180deg, #fffaf0, var(--p2j_papier_alt));
  box-shadow: 0 3px 0 rgba(60, 38, 14, 0.35);
}
html[data-theme="dark"] .p2j_zielkarte { background: linear-gradient(180deg, #33445c, #253248); }
.p2j_zielkarte canvas { width: 90px; height: 72px; flex: none; }
.p2j_zielkarte > div { flex: 1; min-width: 0; }
.p2j_zielkarte strong { font-family: var(--p2j_serif); font-weight: 800; font-size: 1.08rem; }
.p2j_zielkarte p { margin: 2px 0; font-size: 0.77rem; color: var(--p2j_text2); }
.p2j_zielkarte small { display: block; font-size: 0.75rem; }
.p2j_zielbadge {
  display: inline-block;
  margin-top: 6px; padding: 2px 8px;
  font-size: 0.65rem; font-weight: 800;
  color: #3a2a08;
  background: linear-gradient(180deg, #ffe89a, var(--p2j_gold) 65%, #d29c14);
  border: 2px solid var(--p2j_gold_dunkel); border-radius: 6px;
}

/* --- Toast ------------------------------------------------------------- */
.p2j_toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90;
  max-width: 92vw;
  padding: 11px 20px;
  text-align: center; font-size: 0.89rem; font-weight: 700;
  color: #f6eed8;
  background: var(--p2j_glas);
  border: 2px solid var(--p2j_gold_dunkel); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(4, 12, 6, 0.6), inset 0 1px 0 rgba(255, 236, 170, 0.25);
}
.p2j_toast[hidden] { display: none; }

/* ===========================================================================
   8 - Fuß, Handy, Bewegung
   =========================================================================== */
.jupi_footer.p2j_fuss {
  margin: 0; margin-top: auto;
  padding: 8px 14px;
  font-size: 0.67rem; line-height: 1.6;
  color: #d8cba6;
  background: linear-gradient(180deg, #4a2f14, #33200c);
  border-top: 3px solid var(--p2j_gold_dunkel);
  border-radius: 0;
}
.jupi_footer.p2j_fuss p { margin: 0; }
.jupi_footer.p2j_fuss a { color: var(--p2j_gold_hell); font-weight: 800; }

@media (max-width: 1000px) {
  body.jupi.p2j_body .jupi_header.p2j_leiste { padding: 0 12px; gap: 8px; }
  .p2j_spiel { padding: 12px 12px 6px; }
  .p2j_stadtrahmen { grid-template-columns: 158px minmax(0, 1fr); gap: 10px; }
  .p2j_ressource { padding: 9px 10px; gap: 6px; font-size: 0.92rem; }
  .p2j_ressource small { display: none; }
  .p2j_baukopf { flex-wrap: wrap; gap: 4px 10px; }
  .p2j_baukopf > strong { width: 100%; }
  .p2j_baufilter { flex: 1 1 auto; }
  .p2j_buehne_info { right: 250px; }
  /* Schmale Verwaltungsspalte: das Werbeplakat darf nicht in Einzelwörter zerfallen. */
  .p2j_werbung { padding: 9px; }
  .p2j_werbung strong { font-size: 1rem; line-height: 1.18; margin: 7px 0; }
  .p2j_werbung small { font-size: 0.61rem; }
  .p2j_bilanz strong { font-size: 1.12rem; }
}

@media (max-width: 650px) {
  body.jupi.p2j_body .jupi_header.p2j_leiste {
    grid-template-columns: 1fr auto; grid-template-rows: auto auto;
    gap: 6px; padding: 8px 10px;
    min-height: 0;
  }
  body.jupi.p2j_body .p2j_leiste .jupi_nav_back { grid-column: 1; grid-row: 1; }
  .p2j_marke { grid-column: 2; grid-row: 1; justify-self: end; }
  .p2j_marke img { width: 30px; height: 30px; border-radius: 9px; }
  .p2j_marke h1 { font-size: 0.98rem; }
  .p2j_marke small { display: none; }
  body.jupi.p2j_body .p2j_leiste .jupi_werkzeuge { grid-column: 1 / 3; grid-row: 2; justify-self: end; }
  body.jupi.p2j_body .p2j_leiste .jupi_sprachen_wahl select { max-width: 12rem; }

  .p2j_spiel { padding: 10px 8px 6px; }
  .p2j_stadtkopf { margin-bottom: 8px; align-items: flex-start; }
  .p2j_stadtkopf h2 { font-size: 1.46rem; }
  .p2j_stadtkopf small { font-size: 0.55rem; }
  .p2j_stadtkopf_rechts { gap: 6px; }
  .p2j_simulation { max-width: 108px; font-size: 0.59rem; line-height: 1.4; padding: 4px 8px; }

  .p2j_ressourcen { margin-bottom: 8px; }
  .p2j_ressource { padding: 7px 5px; gap: 4px; font-size: 0.78rem; justify-content: center; }
  .p2j_ressource .p2j_symbol { width: 17px; height: 17px; }

  .p2j_stadtrahmen { display: flex; flex-direction: column; gap: 8px; }
  .p2j_kommando { flex-direction: row; padding: 4px; gap: 3px; }
  .p2j_kommando > small, .p2j_stadtstat, .p2j_werbung, .p2j_bilanz { display: none; }
  .p2j_nav {
    flex: 1; flex-direction: column; gap: 3px;
    min-height: 60px; padding: 5px 2px;
    font-size: 0.59rem; text-align: center; position: relative;
    border-radius: 8px;
  }
  .p2j_nav b { position: absolute; top: 3px; inset-inline-end: 5px; font-size: 0.6rem; padding: 0 4px; }

  .p2j_stadtbuehne { height: 430px; }
  .p2j_kartenmarke { top: 10px; left: 10px; font-size: 0.63rem; padding: 5px 9px; }
  .p2j_buehne_info { left: 10px; right: 10px; bottom: 66px; }
  .p2j_buehne_tipp { font-size: 0.67rem; }
  .p2j_kamera { right: 10px; bottom: 10px; }

  .p2j_baukopf { padding: 7px; }
  .p2j_baufilter { gap: 3px; }
  .p2j_baufilter .p2j_knopf { padding: 4px 8px; font-size: 0.67rem; }
  #p2j_bau_abbrechen { font-size: 0.67rem; padding: 4px 7px; }
  .p2j_baumenue { min-height: 128px; padding: 7px; }
  .p2j_bau_karte { width: 106px; }
  .p2j_bau_karte canvas { width: 80px; height: 66px; }

  .p2j_leisten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .p2j_leisten .p2j_knopf { justify-content: center; padding: 8px 5px; font-size: 0.67rem; gap: 4px; }
  /* Der letzte Knopf steht allein in der Zeile und nimmt sie ganz ein. */
  .p2j_leisten .p2j_knopf:last-of-type { grid-column: 1 / 4; }
  .p2j_leisten_zeichen { grid-column: 1 / 4; }

  .p2j_start { padding: 16px 10px 26px; }
  .p2j_start_karte { padding: 24px 16px 20px; border-radius: 16px; }
  .p2j_start_karte h2 { font-size: 1.66rem; }

  .p2j_zielkarte { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .p2j_zielkarte canvas { width: 66px; height: 54px; }
  .p2j_zielkarte .p2j_knopf { width: 100%; }
  .p2j_feldzug_filter .p2j_knopf { flex: 1; font-size: 0.71rem; padding: 5px; }
  .p2j_tabelle { font-size: 0.67rem; }
  .p2j_tabelle td, .p2j_tabelle th { padding: 5px 3px; overflow-wrap: anywhere; }
  .p2j_kampf_zeile { grid-template-columns: auto 1fr auto 1fr auto; font-size: 0.77rem; }
  dialog.p2j_dialog { max-height: 92vh; border-radius: 14px; }
  .p2j_dialog_kopf { padding: 10px 12px; }
  .p2j_dialog_kopf h2 { font-size: 1.08rem; }
  .p2j_dialog_schau, .p2j_geb_panel, .p2j_shop_raster { padding-inline: 12px; }
  .p2j_shop_raster { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); }
}

@media (max-width: 380px) {
  .p2j_ressource small { display: none; }
  .p2j_ressource { padding: 6px 3px; }
  .p2j_bau_karte { width: 98px; }
}

@media (min-width: 1700px) {
  .p2j_stadtrahmen { grid-template-columns: 232px minmax(0, 1fr); }
  .p2j_stadtbuehne { height: clamp(500px, 62vh, 860px); }
}

@media (prefers-reduced-motion: reduce) {
  body.jupi.p2j_body *, body.jupi.p2j_body *::before, body.jupi.p2j_body *::after {
    animation: none !important; transition: none !important;
  }
}

/* Kein Element darf den Satz sprengen (3.13.2a: kein Querscroll). */
body.jupi.p2j_body [hidden] { display: none !important; }