/* Umsetzung der Bildreferenz: Goldknöpfe, Edelstein-Violett und ein HUD,
   das über dem befestigten Dorf schwebt. mobil.css liefert den Spielrahmen. */
body.jupi.p2j_body {--p2j_gold:#eeb334;--p2j_gold_hell:#ffe69d;--p2j_gold_dunkel:#8f581d}
body.jupi.p2j_body .p2j_dorf_schatten {position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,#153f2940 100%)}
body.jupi.p2j_body .p2j_stadtkopf {top:10px;left:10px;right:auto;display:block;height:auto;max-width:44%;padding:7px 10px;background:linear-gradient(#674729,#3a291d);border:2px solid #e5bc69;border-radius:12px;box-shadow:0 3px 0 #332019,0 5px 8px #0004}
body.jupi.p2j_body .p2j_stadtkopf h2 {font-size:14px;max-width:130px;text-shadow:0 2px #3b2618}
body.jupi.p2j_body .p2j_stadtkopf_rechts {margin-top:4px}
body.jupi.p2j_body #p2j_schnell_menue {min-height:40px;width:100%;padding:3px 10px;background:linear-gradient(#ad79d3,#6d348c);border-color:#d5a8ed;color:#fff7e3;text-shadow:0 2px #48245e}
body.jupi.p2j_body .p2j_ressourcen {inset:10px 8px auto auto;width:160px;display:grid;justify-content:stretch;gap:4px;padding:0;background:none;border:0;box-shadow:none}
body.jupi.p2j_body .p2j_ressource {display:grid;width:100%;box-sizing:border-box;grid-template-columns:26px 1fr 40px;grid-template-rows:22px 16px;column-gap:2px;row-gap:0;min-height:42px;padding:0 2px 0 5px;align-items:center;background:linear-gradient(#5e4835,#34291f);border:2px solid #c7994f;border-radius:12px;box-shadow:0 3px 0 #34251d;overflow:visible}
body.jupi.p2j_body .p2j_ressource .p2j_symbol {width:24px;height:24px;grid-column:1;grid-row:1/3;color:#ffda5f;filter:drop-shadow(0 2px 0 #513314)}
body.jupi.p2j_body .p2j_ressource strong {grid-column:2;grid-row:1;font-size:16px;line-height:22px;text-align:right;letter-spacing:.02em;color:#fff4d9;font-variant-numeric:tabular-nums}
body.jupi.p2j_body .p2j_ressource small {grid-column:2;grid-row:2;font-size:9px;line-height:12px;text-align:right;color:#dfcfaf}
body.jupi.p2j_body .p2j_ressource_dia .p2j_symbol {color:#d287ff}
body.jupi.p2j_body .p2j_plus {grid-column:3;grid-row:1/3;width:40px;height:40px;min-width:40px;min-height:40px;margin:0 0 0 2px;padding:0;border:2px solid #c3e887;border-radius:9px;box-shadow:0 2px 0 #254222,inset 0 2px #fff6;background:linear-gradient(#98c94c,#53842d);font:900 26px/1 system-ui;color:#fffce4;text-shadow:0 2px #2c511f;cursor:pointer}
body.jupi.p2j_body .p2j_wallet {top:212px;right:8px;width:160px;box-sizing:border-box;grid-template-columns:1fr 40px;gap:1px 3px;padding:7px 6px;background:linear-gradient(#fbe6af,#dcb977);border:2px solid #9d6930;color:#4e321a;box-shadow:0 3px 0 #78502b,0 4px 10px #0004;font-size:9px;text-align:center}
body.jupi.p2j_body .p2j_wallet>span {grid-column:1;grid-row:1}
body.jupi.p2j_body .p2j_wallet strong {grid-column:1;grid-row:2;font-size:17px;text-shadow:0 1px #fff9}
body.jupi.p2j_body #p2j_rundenende {grid-column:2;grid-row:1/3;width:40px;min-width:40px;min-height:40px;font-size:11px;padding:3px;border:1px solid #8a5e28;box-shadow:0 2px #8f682e;background:linear-gradient(#fff2d3,#e2bc76);color:#523619}
body.jupi.p2j_body .p2j_seitenaktionen {top:129px;left:8px;width:104px;gap:10px}
body.jupi.p2j_body .p2j_seitenaktionen button {min-height:48px;background:linear-gradient(#fff0c3,#d5ad61);border:2px solid #92632e;color:#4a311f;border-radius:11px;box-shadow:0 3px 0 #65431d,inset 0 2px #fff9;font-size:11px}
body.jupi.p2j_body #p2j_sammeln {min-height:58px}
body.jupi.p2j_body .p2j_angebot {position:absolute;z-index:3;top:290px;right:8px;width:104px;min-height:108px;padding:8px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:3px solid #f3c85b;border-radius:18px;background:linear-gradient(#a14dd4,#6e279a 65%,#4a1c6b);box-shadow:0 4px 0 #42214e,0 5px 12px #0005;color:#fff3d9;text-shadow:0 2px #482157;line-height:1.15}
body.jupi.p2j_body .p2j_angebot strong {font-size:16px}
body.jupi.p2j_body .p2j_angebot span {padding:4px;background:linear-gradient(#ffda5c,#dfa42c);border-radius:6px;color:#442a18;text-shadow:none;font-size:10px;font-weight:900}
body.jupi.p2j_body .p2j_angebot .p2j_symbol {width:28px;height:28px;color:#e4a0ff;fill:#b854e333}
body.jupi.p2j_body .p2j_dock {max-width:650px;gap:8px;bottom:max(12px,env(safe-area-inset-bottom))}
body.jupi.p2j_body .p2j_dock button {height:76px;border:3px solid #fff0b1;border-radius:17px;color:#fff3cf;text-shadow:0 2px 0 #593d23;box-shadow:0 4px 0 #63391a,0 5px 0 2px #ad782e,0 8px 12px #0007;font-weight:900;font-size:12px}
body.jupi.p2j_body .p2j_dock .p2j_symbol {width:32px;height:32px;stroke-width:2.3;filter:drop-shadow(0 2px #5c361b)}
body.jupi.p2j_body #p2j_angreifen {order:0;background:linear-gradient(#ffac59,#ed632e 55%,#bd3427)}
body.jupi.p2j_body #p2j_bauen_toggle {order:2;background:linear-gradient(#ffe878,#f4b92c 55%,#c48219)}
body.jupi.p2j_body #p2j_armee {order:1;background:linear-gradient(#858fb1,#4e608a 55%,#38456d)}
body.jupi.p2j_body #p2j_premium {order:3;background:linear-gradient(#c773e9,#853bc0 55%,#60218d)}
body.jupi.p2j_body .p2j_buehne_info {bottom:154px;left:8px;right:8px;gap:4px}
body.jupi.p2j_body .p2j_buehne_tipp {min-width:0;width:min(100%,480px);box-sizing:border-box;max-width:480px;background:linear-gradient(#fff1cc,#e2c08b);border:2px solid #a2753e;border-radius:8px;color:#4d341f;text-shadow:0 1px #fff9;padding:8px 12px;text-align:center;font-size:12px;font-weight:800;box-shadow:0 3px 0 #765130}
body.jupi.p2j_body .p2j_bau_aktiv {font-size:10px;padding:4px 8px}
body.jupi.p2j_body .p2j_kamera {bottom:100px;left:auto;right:8px;background:#38291fe6;border:1px solid #bc9350;gap:3px;padding:3px}
body.jupi.p2j_body .p2j_kamera button {width:40px;height:40px;border-radius:7px}
body.jupi.p2j_body .p2j_baukatalog {bottom:98px;background:linear-gradient(#796246,#493c2b);border:3px solid #e8c17d}
body.jupi.p2j_body.p2j_mehr_offen .p2j_kommando {top:129px;z-index:8;max-width:calc(100% - 32px);background:#4c3928f5;border-color:#e6bf77}
body.jupi.p2j_body.p2j_mehr_offen .p2j_leisten {top:310px;max-height:calc(100% - 410px);z-index:8;background:#4c3928f5;border-color:#e6bf77}
body.jupi.p2j_body .p2j_sammlerblasen {position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
body.jupi.p2j_body .p2j_sammlerblase {position:absolute;transform:translate(-50%,-100%);min-width:44px;min-height:44px;padding:3px 7px;display:flex;gap:3px;align-items:center;justify-content:center;background:linear-gradient(#ffefaa,#f4c65c);border:2px solid #80542a;border-radius:13px;color:#6c451b;font-weight:900;box-shadow:0 3px 0 #73502d,0 5px 12px #0005;pointer-events:auto;cursor:pointer;font-size:11px}
body.jupi.p2j_body .p2j_sammlerblase::after {content:'';position:absolute;left:calc(50% - 4px);bottom:-6px;width:8px;height:8px;transform:rotate(45deg);background:#f2c464;border-right:2px solid #80542a;border-bottom:2px solid #80542a}
body.jupi.p2j_body .p2j_sammlerblase .p2j_symbol {width:20px;height:20px}
@media(min-width:700px) {
 body.jupi.p2j_body .p2j_stadtkopf {left:16px;top:14px;min-width:150px}
 body.jupi.p2j_body .p2j_stadtkopf h2 {font-size:20px;max-width:220px}
 body.jupi.p2j_body .p2j_ressourcen {top:14px;right:16px;width:190px}
 body.jupi.p2j_body .p2j_wallet {top:216px;right:16px;width:190px}
 body.jupi.p2j_body .p2j_seitenaktionen {left:16px;top:134px;width:132px}
 body.jupi.p2j_body .p2j_angebot {top:300px;right:16px;width:116px;min-height:124px}
 body.jupi.p2j_body .p2j_angebot strong {font-size:19px}
 body.jupi.p2j_body .p2j_dock {width:540px;bottom:14px}
 body.jupi.p2j_body .p2j_dock button {height:88px;font-size:15px}
 body.jupi.p2j_body .p2j_dock .p2j_symbol {width:38px;height:38px}
 body.jupi.p2j_body .p2j_kamera {bottom:20px;right:16px}
 body.jupi.p2j_body .p2j_buehne_info {bottom:118px}
 body.jupi.p2j_body.p2j_mehr_offen .p2j_kommando {left:16px;top:134px}
 body.jupi.p2j_body.p2j_mehr_offen .p2j_leisten {left:16px;top:315px;max-height:calc(100% - 425px)}
 body.jupi.p2j_body .p2j_baukatalog {bottom:114px}
}
@media(min-width:700px) and (max-width:1100px) and (min-height:531px) {
 body.jupi.p2j_body .p2j_kamera {bottom:114px}
 body.jupi.p2j_body .p2j_buehne_info {bottom:170px}
}
@media(max-width:350px) {
 body.jupi.p2j_body .p2j_ressourcen,body.jupi.p2j_body .p2j_wallet {width:145px}
 body.jupi.p2j_body .p2j_stadtkopf {max-width:126px;padding:5px 8px}
 body.jupi.p2j_body .p2j_stadtkopf h2 {font-size:12px;max-width:110px}
 body.jupi.p2j_body .p2j_seitenaktionen {width:94px}
 body.jupi.p2j_body .p2j_angebot {width:94px;top:290px;min-height:94px}
 body.jupi.p2j_body .p2j_angebot strong {font-size:14px}
 body.jupi.p2j_body .p2j_angebot .p2j_symbol {width:22px;height:22px}
 body.jupi.p2j_body .p2j_dock button {font-size:10px;height:70px}
}
@media(max-height:530px) {
 body.jupi.p2j_body .p2j_ressourcen {top:8px;right:8px;width:440px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
 body.jupi.p2j_body .p2j_ressource {grid-template-columns:20px 1fr;grid-template-rows:22px 16px;min-height:42px}
 body.jupi.p2j_body .p2j_ressource strong {font-size:13px}
 body.jupi.p2j_body .p2j_plus {display:none}
 body.jupi.p2j_body .p2j_wallet {top:64px;right:8px;width:158px;grid-template-columns:auto auto;padding:5px}
 body.jupi.p2j_body .p2j_wallet strong {font-size:15px}
 body.jupi.p2j_body #p2j_rundenende {grid-column:2;grid-row:1/3;min-height:40px}
 body.jupi.p2j_body .p2j_stadtkopf {top:8px;min-width:100px;max-width:160px;padding:4px 8px}
 body.jupi.p2j_body .p2j_stadtkopf h2 {font-size:13px}
 body.jupi.p2j_body .p2j_stadtkopf_rechts {margin:0}
 body.jupi.p2j_body .p2j_seitenaktionen {top:95px;width:106px;gap:6px}
 body.jupi.p2j_body .p2j_seitenaktionen button {min-height:40px}
 body.jupi.p2j_body #p2j_sammeln {min-height:44px}
 body.jupi.p2j_body .p2j_angebot {top:156px;right:8px;min-height:68px;width:108px;padding:4px}
 body.jupi.p2j_body .p2j_angebot strong {font-size:13px}
 body.jupi.p2j_body .p2j_angebot .p2j_symbol {display:none}
 body.jupi.p2j_body .p2j_dock {bottom:8px;width:460px}
 body.jupi.p2j_body .p2j_dock button {height:58px;font-size:12px}
 body.jupi.p2j_body .p2j_dock .p2j_symbol {width:24px;height:24px}
 body.jupi.p2j_body .p2j_kamera {bottom:78px;right:8px}
 body.jupi.p2j_body .p2j_buehne_info {left:142px;right:242px;bottom:80px}
 body.jupi.p2j_body .p2j_buehne_tipp {font-size:10px;padding:5px}
 body.jupi.p2j_body .p2j_baukatalog {bottom:76px}
}