/* =======================
   SpaceInvasion – app.css
   Zentralisierte Themes via CSS Vars
   ======================= */

/* ---------- Defaults auf body (überschreibbar per Theme) ---------- */

:root{
  /* UI-Farben/FX */
  --ui-color: #22749D;
  --ui-bg: color-mix(in srgb, var(--ui-color) 70%, #000 30%);

  /* ---- Semantische UI-Tokens (NUR fürs neue/Beta-Design) ----
     Defaults werden aus --ui-color abgeleitet, damit jedes Theme sofort
     funktioniert; einzelne Themes (std, new) überschreiben mit Wunschfarben.
     Es sind SOLIDE Farben — Verläufe (schwarz→Farbe) bauen die Komponenten
     selbst per color-mix. Alte Templates nutzen diese Tokens NICHT. */
  --ui-hl:      color-mix(in srgb, var(--ui-color) 72%, #ffffff);   /* Highlight: Rahmen / hervorgehobene Flächen */
  --ui-light:   color-mix(in srgb, var(--ui-color) 86%, #ffffff);   /* Lichteffekte: Beams, Glows, Blitze */
  --ui-base:    color-mix(in srgb, var(--ui-color) 14%, #090e16);   /* Container-Hintergrund (passt zu weißer Schrift) */
  --ui-base-hl: color-mix(in srgb, var(--ui-color) 24%, #0b1220);   /* angehobener Hintergrund: Submenü/Sekundärflächen */

  /* ---- Zentrale Text-Kontrast-Stufen (NUR neues/Beta-Design) ----
     EINE Quelle der Wahrheit; Templates dürfen KEINE eigenen grau/ui-color-Mischungen
     mehr für Text nutzen, sondern .ui-txt* / die Tokens. So bleibt alles lesbar und
     zentral änderbar (auch durch den späteren Color-Picker). Bewusst SOLIDE Farben,
     NICHT mit dem (dunklen) --ui-color gemischt → garantiert lesbar auf --ui-base. */
  --ui-txt:        #e9eff6;   /* Haupttext (hoher Kontrast) */
  --ui-txt-soft:   #c4cfdb;   /* leicht gedämpft, noch klar lesbar */
  --ui-txt-dim:    #9fb0c2;   /* dezent, aber lesbar (Labels, Meta, Datum) */
  --ui-txt-hl:     color-mix(in srgb, var(--ui-light, var(--ui-color)) 80%, #ffffff);   /* hervorgehoben (Theme-hell) */
  --ui-txt-strong: #ffffff;   /* starke Hervorhebung */
  --ui-deco:       color-mix(in srgb, var(--ui-light, var(--ui-color)) 62%, #ffffff);  /* Dekoration: Wabenmuster & Deko-Akzente */

  /* ---- Schrift- & Dichte-Skalierung (NUR neues/Beta-Design) ----
     Spieler-Regler setzen --ui-fscale (Schrift) und --ui-dscale (vertikale Dichte).
     5 Stufen: 0.85 / 0.92 / 1 / 1.10 / 1.22 (Schrift) bzw. 0.80 / 0.90 / 1 / 1.12 / 1.25 (Dichte).
     Numerische Größen-Tokens: Templates nutzen var(--fz-N) statt fester px → EIN Hebel skaliert
     alle Schriften. Bei --ui-fscale:1 identisch zu vorher. Alte Templates nutzen das NICHT. */
  --ui-fscale: 1;
  --ui-dscale: 1;
  --fz-7:  calc(7px  * var(--ui-fscale, 1));
  --fz-8:  calc(8px  * var(--ui-fscale, 1));
  --fz-9:  calc(9px  * var(--ui-fscale, 1));
  --fz-10: calc(10px * var(--ui-fscale, 1));
  --fz-11: calc(11px * var(--ui-fscale, 1));
  --fz-12: calc(12px * var(--ui-fscale, 1));
  --fz-13: calc(13px * var(--ui-fscale, 1));
  --fz-14: calc(14px * var(--ui-fscale, 1));
  --fz-15: calc(15px * var(--ui-fscale, 1));
  --fz-16: calc(16px * var(--ui-fscale, 1));
  --fz-17: calc(17px * var(--ui-fscale, 1));
  --fz-18: calc(18px * var(--ui-fscale, 1));
  --fz-19: calc(19px * var(--ui-fscale, 1));
  --fz-20: calc(20px * var(--ui-fscale, 1));
  --fz-22: calc(22px * var(--ui-fscale, 1));
  --fz-23: calc(23px * var(--ui-fscale, 1));
  --fz-24: calc(24px * var(--ui-fscale, 1));
  --fz-26: calc(26px * var(--ui-fscale, 1));
  --fz-28: calc(28px * var(--ui-fscale, 1));
  --fz-30: calc(30px * var(--ui-fscale, 1));
  --fz-32: calc(32px * var(--ui-fscale, 1));
  --fz-33: calc(33px * var(--ui-fscale, 1));
  --fz-34: calc(34px * var(--ui-fscale, 1));
  --fz-38: calc(38px * var(--ui-fscale, 1));
  --fz-42: calc(42px * var(--ui-fscale, 1));
  --fz-44: calc(44px * var(--ui-fscale, 1));
  --fz-46: calc(46px * var(--ui-fscale, 1));
  --fz-49: calc(49px * var(--ui-fscale, 1));

  /* Link-Highlight (a.bau) folgt jetzt dem Theme-Akzent statt fixem Blau;
     einzelne Built-in-Themes überschreiben weiter mit Wunschfarbe, der Color-Picker
     (setzt --ui-hl direkt) bekommt so automatisch seine Akzentfarbe für Links. */
  --ui-link-hl: var(--ui-hl, var(--ui-color));
  --text-main: #FFFFFF;
  --text-invert: #000000;
  --bg-body: #000000;
  --bg-dark-1: #222222;
  --bg-dark-2: #111111;
  --border-strong: var(--ui-color);
  --border-light: #FFFFFF;
  --glow-weak: color-mix(in srgb, var(--ui-color) 55%, transparent);
  --glow-strong: var(--ui-color);

  /* Scrollbar */
  --scroll-track: #222;
  --scroll-thumb: var(--ui-color);

  /* Links */
  --link: #E6EFFF;
  --link-hover: #FF0000;

  /* Eco/Status */
  --eco-green: #008a00;
  --eco-green-2: #005700;
  --eco-green-3: #002400;
  --eco-yellow: #e3d000;
  --warn: #CC9900;
  --danger: #FF0000;

  /* Layout */
  --resbar-h: 36px;
  --res-gap: 8px;
  --overlay-strong: rgba(0,0,0,0.9);
  --overlay-soft: rgba(0,0,0,0.75);
  --pay-glow: var(--ui-color);
  --menu-width: 680px;
  --menu-item-h: 46px;
  --menu-gap-x: 16px;
  --menu-gap-y: 12px;
  --btn-radius: 8px;

  /* Deko/Verläufe */
  --grad-dark-top: rgba(0, 0, 0, 0.6);
  --grad-dark-bot: rgba(10,10,10,0.5);
  --bar-green: #080;
  --bar-gray: #444;
  --bar-blue: var(--ui-color);
  --bar-red: #822;
  --bar-orange: #A62;
  --progress-bg: rgba(0,200,0,0.8);

  /* Schatten */
  --shadow-xxl: 0px 0px 300px 0px #000;
  --shadow-xl:  0px 0px 180px 0px #000;
  --shadow-lg:  0px 0px 100px 0px #000;
  --shadow-md:  0px 0px 30px var(--glow-strong);
  --shadow-sm:  0px 0px 20px var(--glow-strong);
  --shadow-inset-1: inset 0px 0px 3px 0px #000, inset 0px 0px 5px 0px #000;

  /* ========== Std-kompatible Bild-/Farb-Defaults ========== */
  --body-bg-color: #000;
  --body-bg-image: url('/img/starbackground/starfield_01.gif');
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/tab2_bg.gif');
  --galaxy-bg-image: url("/img/text_bg.gif");
  --galaxy-bg-color: transparent;

  --rahmen-bg-image: url('/img/tab1_bg.gif');  /* std */
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/tab2_bg.gif');    /* std/new/ecowar kompatibel */

  --building3-bg-image: url('/img/tab3_bg.gif');
  --building3-text-color: #E6EFFF;
  --building-corner-image: url('/img/tab4_bg.gif');

  --select-bg: #263D55;
  --select-border-strong: #000028;

  --link-muted: #E6EFFF;
  --warn-text: #CC9900;
  --error-text: #FF0000;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);
  --eco-stars-image: url(/img/new/eco_stars.png);

  /* ========== Neue Variablen für alte Klassen (std-Defaults) ========== */
  /* .rahmen – Seitenrahmen */
  --rahmen-border-left:   1px solid #1E3E5D;
  --rahmen-border-right:  1px solid #000000;
  --rahmen-border-top:    1px solid #1E3E5D;
  --rahmen-border-bottom: 1px solid #000000;

  /* .nachricht – Nachrichtenbox */
  --nachricht-border-left:   1px solid #324B67;
  --nachricht-border-right:  1px solid #041A2F;
  --nachricht-border-top:    1px solid #324B67;
  --nachricht-border-bottom: 1px solid #041A2F;
  --nachricht-bg-image: var(--tab2-bg-image);

  /* .flottenbericht */
  --flb-border-left:   1px solid #324B67;
  --flb-border-right:  1px solid #041A2F;
  --flb-border-top:    1px solid #324B67;
  --flb-border-bottom: 1px solid #041A2F;
  --flottenbericht-bg-image: var(--tab2-bg-image);
  --flottenbericht-bg-color: transparent; /* PTU überschreibt auf #111 */
}

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); border-radius: 8px; border: 2px solid var(--scroll-track); }
*::-webkit-scrollbar-corner { background: var(--scroll-track); }
@media (pointer: fine) {
  *::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--ui-color) 85%, #000 15%); }
}

/* =======================
   Theme-Overlays
   ======================= */

/* --- std (Default) --- */
[data-theme="std"]{
  --ui-color: #253d54;
  --ui-bg: color-mix(in srgb, var(--ui-color) 70%, #000 30%);
  --pay-glow: #23ADFD;

  /* Klassik-Blau: dunkles "rahmen"-Blau → helleres "nachricht"-Blau */
  --ui-base:    #15304a;
  --ui-base-hl: #21425f;
  --ui-hl:      #3f73a6;
  --ui-light:   #36b4ff;

  --body-bg-color: #000;
  --body-bg-image: url('/img/starbackground/starfield_01.gif');
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/tab2_bg.gif');
  --galaxy-bg-image: url("/img/text_bg.gif");
  --galaxy-bg-color: transparent;

  --rahmen-bg-image: url('/img/tab1_bg.gif');
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/tab2_bg.gif');
  --building3-bg-image: url('/img/tab3_bg.gif');
  --building3-text-color: #E6EFFF;
  --building-corner-image: url('/img/tab4_bg.gif');

  --select-bg: #263D55;
  --select-border-strong: #000028;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);
  --eco-stars-image: url(/img/new/eco_stars.png);

  --scroll-track: #222;
  --scroll-thumb: var(--ui-color);
}

/* --- new --- */
[data-theme="new"]{
  --ui-color: #22749D;
  --ui-bg: rgba(0,50,80,0.9);

  --ui-base:    #0e2738;
  --ui-base-hl: #163b54;
  --ui-hl:      #2f88bd;
  --ui-light:   #58ccff;

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/ecowar/tab2_bg.gif');
  --galaxy-bg-image: none;
  --galaxy-bg-color: #888;

  --rahmen-bg-image: url('/img/ecowar/tab1_bg.gif');
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/ecowar/tab2_bg.gif');
  --building3-bg-image: var(--ui-color);
  --building3-text-color: #E6EFFF;
  --building-corner-image: var(--ui-color);

  --select-bg: #000;
  --select-border-strong: #16506D;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);

  --eco-stars-image: url(/img/new/eco_stars.png);

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;

  --scroll-track: #222;
  --scroll-thumb: var(--ui-color);
}

/* --- ecowar --- */
[data-theme="ecowar"]{
  --ui-color: rgb(150,0,0);
  --ui-bg: rgba(80,20,20,0.9);

  /* Skin-treue Hintergründe (aus altem ecowar: chat_background rgba(80,20,20)) */
  --ui-base:    #2c1010;
  --ui-base-hl: #43201c;
  --ui-hl:      #b5443c;
  --ui-light:   #ff5544;
  --pay-glow: rgb(150,0,0);
  --ui-link-hl: #fda323;

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/ecowar/tab2_bg.gif');
  --galaxy-bg-image: none;
  --galaxy-bg-color: #888;

  --rahmen-bg-image: url('/img/ecowar/tab1_bg.gif');
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  /* keine blauen Assets in den Panels */
  --tab2-bg-image: url('/img/ecowar/tab2_bg.gif');
  --building3-bg-image: rgb(50,0,0);
  --building3-text-color: #E6EFFF;
  --building-corner-image: rgb(50,0,0);

  --select-bg: #000;
  --select-border-strong: #9F0404;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);
  --eco-stars-image: url(/img/new/eco_stars.png);

  --nachricht-bg-image: url('/img/ecowar/tab2_bg.gif');

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;
 
  --scroll-track: #222;
  --scroll-thumb: var(--ui-color);
}

/* --- green --- */
[data-theme="green"]{
  --ui-color: #5CB827;
  --ui-bg: rgba(0,50,0,0.9);

  /* Skin-treue Hintergründe (aus altem green: chat_background rgba(0,50,0)) */
  --ui-base:    #0e2810;
  --ui-base-hl: #18401c;
  --ui-hl:      #4fa238;
  --ui-light:   #84e85a;
  --pay-glow: #68FD23;
  --ui-link-hl: #68FD23;  

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/ecowar/tab2_bg.gif');
  --galaxy-bg-image: none;
  --galaxy-bg-color: #888;

  --rahmen-bg-image: url('/img/ecowar/tab1_bg.gif');
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/ecowar/tab2_bg.gif');
  --building3-bg-image: rgb(0,50,0);
  --building3-text-color: #E6EFFF;
  --building-corner-image: rgb(0,50,0);

  --select-bg: #000;
  --select-border-strong: #16506D;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/green/bg_bau2.gif);

  --eco-stars-image: url(/img/new/eco_stars.png);
  --chat-bg: rgba(0,50,0,0.8);

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;
}

/* --- pink --- */
[data-theme="pink"]{
  --ui-color: #AB26B7;
  --ui-bg: rgba(50,0,50,0.9);

  /* Skin-treue Hintergründe (aus altem pink: chat_background rgba(50,0,50)) */
  --ui-base:    #2a0e2c;
  --ui-base-hl: #3f1642;
  --ui-hl:      #9a3aa6;
  --ui-light:   #e060ef;
  --pay-glow: #AB26B7;
  --ui-link-hl: #FD23F6;  

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/ecowar/tab2_bg.gif');
  --galaxy-bg-image: none;
  --galaxy-bg-color: #888;

  --rahmen-bg-image: url('/img/ecowar/tab1_bg.gif');
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/ecowar/tab2_bg.gif');
  --building3-bg-image: rgb(50,0,50);
  --building3-text-color: #E6EFFF;
  --building-corner-image: rgb(50,0,50);

  --select-bg: #000;
  --select-border-strong: #16506D;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);

  --eco-stars-image: url(/img/new/eco_stars.png);

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;
}

/* --- darkgate --- */
[data-theme="darkgate"]{
  --ui-color: rgba(100,100,10,1);
  --ui-bg: color-mix(in srgb, var(--ui-color) 60%, #000 40%);

  /* Skin-treue Hintergründe (aus altem darkgate: chat_background rgba(20,20,50), olive Akzent) */
  --ui-base:    #16162e;
  --ui-base-hl: #242448;
  --ui-hl:      #7a7a52;
  --ui-light:   #e6e64a;
  --pay-glow: rgba(100,100,10,1);

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/tab2_bg.gif');
  --galaxy-bg-image: none;
  --galaxy-bg-color: #888;

  --rahmen-bg-image: linear-gradient(rgba(10,10,15,1) 0%, rgba(10,10,10,1) 20%, rgba(20,20,40,1) 100%);
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/tab2_bg.gif');
  --building3-bg-image: url('/img/tab3_bg.gif');
  --building3-text-color: #E6EFFF;
  --building-corner-image: url('/img/tab4_bg.gif');

  --select-bg: #000;
  --select-border-strong: #16506D;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);

  --eco-stars-image: url(/img/new/eco_stars.png);

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;
}

/* --- darkgate-yellow --- */
[data-theme="darkgate-yellow"]{
  --ui-color: rgba(100,100,10,1);
  --ui-bg: color-mix(in srgb, var(--ui-color) 60%, #000 40%);
  --pay-glow: rgba(100,100,10,1);

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: url('/img/ecowar/tab2_bg.gif');
  --galaxy-bg-image: none;
  --galaxy-bg-color: #888;

  --rahmen-bg-image: linear-gradient(rgba(20,20,20,1) 0%, rgba(40,40,20,1) 70%, rgba(80,80,20,1) 100%);
  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: url('/img/ecowar/tab2_bg.gif');
  --building3-bg-image: url('/img/tab3_bg.gif');
  --building3-text-color: #E6EFFF;
  --building-corner-image: url('/img/tab4_bg.gif');

  --select-bg: #000;
  --select-border-strong: rgba(220,220,80,1);

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);

  --eco-stars-image: url(/img/new/eco_stars.png);

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;
}

/* --- ptu --- */
[data-theme="ptu"]{
  --ui-color: #FFD700;
  --ui-bg: color-mix(in srgb, var(--ui-color) 60%, #000 40%);

  /* Skin-treue Hintergründe (Gold-Theme auf warmem Dunkel) */
  --ui-base:    #1c1a12;
  --ui-base-hl: #2c281a;
  --ui-hl:      #c2a838;
  --ui-light:   #ffdf3a;
  --pay-glow: #FFD700;

  --body-bg-color: transparent;
  --body-bg-image: none;
  --body-bg-attachment: fixed;

  --textarea-bg-image: linear-gradient(#111, #222);
  --galaxy-bg-image: none;
  --galaxy-bg-color: #111;

  --rahmen-bg-image:
    linear-gradient(to right,
     #111 0%, #111 10%,
     rgba(34,34,34,0.95) 20%,
     rgba(34,34,34,0.7) 30%,
     rgba(34,34,34,0.3) 38%,
     rgba(34,34,34,0.0) 40%),
     repeating-linear-gradient(45deg,#444400 0px,#444400 10px,#222 10px,#222 20px);

  --bg-rot-image: url('/img/tab2r_bg.gif');
  --bg-gruen-image: url('/img/tab2g_bg.gif');

  --tab2-bg-image: linear-gradient(#111, #222);
  --building3-bg-image: linear-gradient(#FFD700,#FFD700);
  --building3-text-color: #000;
  --building-corner-image: linear-gradient(#FFD700,#FFD700);

  --select-bg: #000;
  --select-border-strong: #FFD700;

  --arrow-left-image: url(/img/gal_back.gif);
  --arrow-right-image: url(/img/gal_forward.gif);
  --mm-build-bg-image: url(/img/bg_bau2.gif);

  --eco-stars-image: url(/img/new/eco_stars.png);

  --nachricht-border-left:   1px solid #111;
  --nachricht-border-right:  1px solid #111;
  --nachricht-border-top:    1px solid #000;
  --nachricht-border-bottom: 1px solid #000;
  --rahmen-border-left:   0 solid transparent;
  --rahmen-border-right:  0 solid transparent;
  --rahmen-border-top:    0 solid transparent;
  --rahmen-border-bottom: 0 solid transparent;

  /* Flottenbericht: PTU nutzt goldenen Rahmen + dunklen BG */
  --flb-border-left:   1px solid #FFD700;
  --flb-border-right:  1px solid #FFD700;
  --flb-border-top:    1px solid #FFD700;
  --flb-border-bottom: 1px solid #FFD700;
  --flottenbericht-bg-image: none;
  --flottenbericht-bg-color: #111;
}

/* =======================
   Basis-UI
   ======================= */

:root{ --resbar-h: var(--resbar-h); --res-gap: var(--res-gap); }

body{
  background-color: var(--body-bg-color);
  background-image: var(--body-bg-image);
  background-attachment: var(--body-bg-attachment);
  color: var(--text-main, #fff);
  margin: 0;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}

select{
  background-color: var(--select-bg);
  margin:0;
  border: 1px solid var(--select-border-strong);
  font-family: Verdana;
  color:#fff;
  font-weight: normal;
  box-shadow: 0 0 10px color-mix(in srgb, var(--ui-color) 50%, transparent);
}

.form[type="button"], .form[type="submit"] {
    border: 0;
    font-family: Arial;
    color: #FFF;
    background-color: var(--ui-color);
    padding: 1px 5px;
}
.form[type="button"]:hover, .form[type="submit"]:hover{
    filter: brightness(1.2);    
}
.form[type="text"] {
    border: 0.5px solid var(--ui-color);
    font-family: Arial;
    color: #000000;
    background-color: #E6EFFF;  
    outline: none;
}
.form[type="text"]:hover, .form[type="text"]:active{
  background-color: color-mix(in srgb, #E6EFFF 80%, var(--ui-color) 20%);  
}

/* Links (Legacy) */
a { color: var(--link); text-decoration: none; font-family: Verdana,Arial,Helvetica,sans-serif; }
a:hover { color: var(--link); text-decoration: underline; }
a.menu { text-decoration: none; font-weight: bold; color: var(--link); }
a.menu:hover { color: var(--link-hover); }
a.bau { text-decoration: none; font-weight: bold; color: var(--ui-link-hl); }
a.bau:hover { color: var(--link); }

/* Ressbar / Ads / Kleinkram */
.si-ads-type-base{ width: 700px; }
.si-ads-type-sky{ width: 180px; height: 300px }
.si-ads-type-rank{ width: 100%; }
.si-ads{ position: relative; display: inline-block; margin: 10px 0; }
.si-ads > .title{ width: 100%; text-align: left; padding: 3px 5px; margin: 0; font-size: 10px; background: rgba(0,0,0,0.2); }
.si-ads > .info{ position: absolute; top: -4px; right: -4px; border-radius: 25%; font-weight: bolder; padding: 2px 6px; background: rgba(0,0,0,0.6); color: #DDD; font-size: 11px; cursor: pointer; }
.si-ads > .info:hover{ filter: saturate(2) brightness(1.2); }

.menu-shadow{ display: none; position: fixed; top: 0; left: 0; width: 0; height: 100%; background: var(--ui-color);
  box-shadow: 0 0 15px 1px var(--ui-color), 0 0 10px 1px var(--ui-color), 0 0 5px 1px var(--ui-color); }

#resBar.resbar{
  position: fixed !important; top: 0; left: 0; right: 0; width: 100%; z-index: 999; padding: 4px 8px;
  background: var(--overlay-soft); 
}
.resbar--framed{ border:1px solid var(--ui-color); border-top:0; }
.res-table{ width:100% !important; table-layout: auto !important; border-collapse: collapse !important; }
.col-left{ width:260px !important; padding:0 4px !important; }
.col-sep{ width:2px !important; }
.col-center{ width:auto !important; padding:0 4px !important; }
.col-evimg{ width:40px !important; padding:0 2px !important; }
.col-evtxt{ width:110px !important; padding:0 2px !important; white-space:nowrap !important; }
.res-flex{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; align-content:flex-start !important; justify-content:flex-start !important; gap: var(--res-gap) !important; overflow:visible !important; }
.ress-container{ position:relative !important; display:block !important; flex:1 0 auto !important; min-width:max-content !important; margin:0 !important; background:#222 !important; box-shadow:0 0 2px 0 var(--ui-color) !important; cursor:pointer !important; box-sizing:border-box !important; }
.ress-container:hover{ filter: brightness(1.6); }
.ress-container > .logo{ position:absolute; left:1px; top:2px; width:18px; height:18px; overflow:hidden; border:.5px solid var(--ui-color); }
.ress-logo-1{ background:url('/images/res/pigiron_icon.png') no-repeat center/cover; }
.ress-logo-2{ background:url('/images/res/metall_icon.png') no-repeat center/cover; }
.ress-logo-3{ background:url('/images/res/kryptonite_icon.png') no-repeat center/cover; }
.ress-logo-4{ background:url('/images/res/spice_icon.png') no-repeat center/cover; }
.ress-logo-5{ background:url('/images/res/energy_icon.png') no-repeat center/cover; }
.ress-container > .title{ position:absolute; left:28px; top:-1px; font-weight:700; font-size: 9px; text-shadow:0 0 1px var(--ui-color),0 0 1px var(--ui-color); white-space: nowrap; }
.ress-container > .ress-value, .energy-value{ font-size: clamp(12px, 1.3vw, 16px) !important; padding: 7px 4px 3px 26px; color:inherit; white-space: nowrap; overflow: visible; }
.energy-prob{ color:#FF0000; }
.energy-value > .max{ font-size:10px; color: var(--eco-yellow); }
.ress-container > .bar{ position:absolute; left:0; bottom:0; width:100%; height:3px; background:#000; }
.ress-container > .bar div{ height:3px; }
.ress-fill-color-red{ background:#C00; }
.ress-fill-color-orange{ background:#C70; }
.ress-fill-color-green2{ background:#7C0; }
.ress-fill-color-green{ background:#090; }
.ress-container .ress-value-p{ display:none; position:absolute; right:2px; top:0; font-size:9px; color:#DDD; }
.ress-container:hover .ress-value-p{ display:block; }
#resBar [style*="width:180px"]{ max-width:100% !important; }
#resBar .ecoshadow.chat_background{ width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }

/* Planet Chooser */
#planet-chooser{ position:absolute !important; z-index:1000 !important; display:none; }
@media (max-width: 860px){ .col-evtxt{ display:none !important; } }
@media (max-width: 640px){ .ress-container > .title{ display:none !important; } }
#filler{position:relative;height:30px;}
.planet-chooser-table{ height:28px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 90%, transparent 100%); }

/* ---------- Pfeile ---------- */
.arrow_margin{ border: 0; margin-top: 1px; cursor: pointer; }
.arrow_margin:hover{ transform: scale(1.1); transform-origin: center; }

.si-header-bar{
  position: relative; z-index: 0; overflow: hidden;
  --bar-tint: var(--ui-color);
  padding: 4px 14px; border-top: 0; font-size: 14px; text-align: center; display: inline-block;
  align-items: center; justify-content: center; color: #fff;
  border: 1px solid color-mix(in srgb, var(--bar-tint) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar-tint) 12%, rgba(6,10,16,.92)), rgba(4,7,12,.95));
  box-shadow: 0 0 10px color-mix(in srgb, var(--bar-tint) 26%, transparent), var(--shadow-inset-1);
}
/* statisches Wabenmuster in der Bar-Farbe (über dem Hintergrund, unter dem Text) */
.si-header-bar::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .42;
  background: var(--bar-tint);
  -webkit-mask-image: url("/images/client/hexagon_si.svg"); mask-image: url("/images/client/hexagon_si.svg");
  -webkit-mask-size: 18px 10.2px; mask-size: 18px 10.2px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
}
/* langsam durchlaufendes Lichtband, das die Waben aufleuchten lässt */
.si-header-bar::after{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background: linear-gradient(100deg, transparent 38%, color-mix(in srgb, var(--bar-tint) 80%, #fff) 50%, transparent 62%);
  background-size: 250% 100%;
  -webkit-mask-image: url("/images/client/hexagon_si.svg"); mask-image: url("/images/client/hexagon_si.svg");
  -webkit-mask-size: 18px 10.2px; mask-size: 18px 10.2px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  animation: siBarSweep 5.5s linear infinite;
}
@keyframes siBarSweep{ from{ background-position: 150% 0; } to{ background-position: -60% 0; } }

/* Deko-Bars (Wabenmuster) – Farbe je Variante */
.bar-green { --bar-tint: var(--bar-green); }
.bar-gray  { --bar-tint: var(--bar-gray); }
.bar-ui    { --bar-tint: var(--ui-color); }
.bar-red   { --bar-tint: var(--bar-red); }
.bar-blue  { --bar-tint: var(--bar-blue); }
.bar-orange{ --bar-tint: var(--bar-orange); }

.special-text{
  font-weight: bolder;
  filter: drop-shadow(0 0 1px black) drop-shadow(0 0 3px black) drop-shadow(0 0 8px black) drop-shadow(0 0 10px black);
  background-color: rgba(0,0,0,0.4);
  padding: 0 4px;
}

/* Planet UI */
.planet-entry-bg{ background: linear-gradient(90deg, rgba(14,14,14,1) 0%, rgba(48,39,39,1) 30%); }
.planet-entry-bg-active{ background: linear-gradient(90deg, var(--ui-color) 0%, rgba(48,39,39,1) 30%); }
.planet-entry{ position: relative; width: 100%; margin: 0 0 2px 0; height: 30px; box-shadow: none; overflow: hidden; cursor: pointer; }
.planet-entry:hover{ background: #484; }
.planet-entry .image{ position: absolute; right: -10px; top: -20px; }
.planet-entry .image img{ width: 80px; }
.planet-entry .name{ position: absolute; width: 220px; text-align: center; left: 5px; top: 2px; font-size: 12px; font-weight: bolder; }
.planet-entry .name .coords{ font-size: 10px; }
.planet-entry .moon{ position: absolute; right: 60px; top: 0; }
.planet-entry .moon:hover{ filter: saturate(3); }
.planet-entry .moon img{ width: 20px; }

.planet-info{ margin: 25px; vertical-align: top; position: relative; display: inline-block; width: 280px; }
.planet-info .image{ position: absolute; z-index: 1; top: -50px; left: -10px; }
.planet-info .image img{ width: 200px; }
.planet-info .name{ position: relative; z-index: 2; font-size: 16px; font-weight: bolder; text-align: center; }
.planet-info .content{ position: relative; z-index: 2; width: 100%; top: 0; left: 0; }

.stats-container{ margin-top: 5px; }
.planet-stats{ text-align: left; display: table; }
.planet-stats .stats-row{ display: table-row; }
.planet-stats .stats-row .stats-name{ font-weight: bolder; padding: 0 6px 0 20px; display: table-cell; }
.planet-stats .stats-row .stats-value{ display: table-cell; padding-right: 20px; }
.planet-stats .stats-row .stats-value-r{ display: table-cell; text-align: right; padding-right: 20px; }

#planet-overview{ background: var(--overlay-strong); box-shadow: var(--shadow-lg), var(--shadow-xl), var(--shadow-xxl); }

/* ============================================================
   Account-Overview – neues UI (aktiv, wenn .ui-box auf der Seite)
   ============================================================ */
#acc-overview.acc-new{ width: 232px !important; }
#acc-overview.acc-new .planet-entry{
  position: relative; height: 30px; margin: 0 0 3px 0; border-radius: 5px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-color) 24%, #0a1420), color-mix(in srgb, var(--ui-color) 8%, #070d16));
  border: 1px solid color-mix(in srgb, var(--ui-color) 26%, rgba(255,255,255,.05));
  box-shadow: none; transition: background .12s, border-color .12s, box-shadow .12s;
}
/* Wabenmuster über die ganze Zeile (hinter dem Text), für alle Planeten sichtbar */
#acc-overview.acc-new .planet-entry::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-hl, var(--ui-color)) 14%, transparent) 0%, color-mix(in srgb, var(--ui-hl, var(--ui-color)) 40%, transparent) 100%);
  -webkit-mask-image:url("/images/client/hexagon_si.svg"); mask-image:url("/images/client/hexagon_si.svg");
  -webkit-mask-size:16px 9px; mask-size:16px 9px; -webkit-mask-repeat:repeat; mask-repeat:repeat;
}
#acc-overview.acc-new .planet-entry > *{ z-index: 2; }
#acc-overview.acc-new .planet-entry:hover{
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-color) 40%, #0a1420), color-mix(in srgb, var(--ui-color) 15%, #070d16));
  border-color: var(--ui-light, var(--ui-color));
  box-shadow: 0 0 9px color-mix(in srgb, var(--ui-light, var(--ui-color)) 38%, transparent);
}
#acc-overview.acc-new .planet-entry:hover::before{ opacity: .85; }
#acc-overview.acc-new .planet-entry .image{ right: -2px; top: -14px; }
#acc-overview.acc-new .planet-entry .image img{ width: 48px; }
/* Name + Koordinate zentriert (horizontal & vertikal) im freien Bereich neben dem Bild */
#acc-overview.acc-new .planet-entry .name{ width: auto; left: 6px; right: 44px; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1.1; text-align: center; }
#acc-overview.acc-new .planet-entry .name .coords{ font-size: 9px; opacity: .8; font-weight: 600; margin-top: 1px; }
#acc-overview.acc-new .planet-entry .moon{ right: 42px; top: 50%; transform: translateY(-50%); }
#acc-overview.acc-new .planet-entry .moon img{ width: 18px; }
/* aktiver Planet: deutlich kräftigeres, leuchtendes & pulsierendes Wabenmuster */
#acc-overview.acc-new .planet-entry-bg-active{
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-color) 50%, #0a1420), color-mix(in srgb, var(--ui-color) 18%, #070d16));
  border-color: var(--ui-light, var(--ui-color));
  box-shadow: 0 0 12px color-mix(in srgb, var(--ui-light, var(--ui-color)) 45%, transparent), inset 0 0 14px color-mix(in srgb, var(--ui-color) 24%, transparent);
}
#acc-overview.acc-new .planet-entry-bg-active::before{
  opacity: 1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-light, var(--ui-color)) 55%, transparent) 0%, color-mix(in srgb, var(--ui-light, var(--ui-color)) 95%, transparent) 100%);
  animation: accHexPulse 2s ease-in-out infinite;
}
@keyframes accHexPulse{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
/* aktiver Planet behält (verstärkt) das Glühen auch beim Hover */
#acc-overview.acc-new .planet-entry-bg-active:hover{
  border-color: var(--ui-light, var(--ui-color));
  box-shadow: 0 0 15px color-mix(in srgb, var(--ui-light, var(--ui-color)) 55%, transparent), inset 0 0 15px color-mix(in srgb, var(--ui-color) 26%, transparent);
}
#acc-overview.acc-new .planet-entry-bg-active:hover::before{ opacity: 1; }

/* ===== Planet-Hover-Popup – neues UI ===== */
#planet-overview.po-new{ background: transparent; box-shadow: none; animation: poFade .15s ease-out; }
@keyframes poFade{ from{ opacity:0; transform: translateY(4px); } to{ opacity:1; transform:none; } }
/* gemeinsamer Container für (Astro +) Planet – kein Spalt dazwischen, großer Schatten */
#planet-overview.po-new .planet-info-wrap{
  position: relative; isolation: isolate; display: inline-flex; gap: 0; padding: 8px;
  border-radius: 12px; box-shadow: 0 18px 70px 22px rgba(0,0,0,.7);
}
/* Glas-/Blur-Fläche über den GANZEN Container, leicht abgedunkelt → fließender Übergang
   in den Schatten (kein sichtbarer Box→Schatten-Bruch); nur oben ausblendend (Grafik) */
#planet-overview.po-new .planet-info-wrap::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:12px;
  background: rgba(6,11,18,.52);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 44px, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 44px, #000 100%);
}
/* Boxen über die Grafik legen: Padding-Top schiebt Name+Inhalt in den unteren Teil des Bildes */
#planet-overview.po-new .planet-info{ position: relative; margin: 0; width: 226px; padding: 56px 6px 4px; }
/* Planet ÜBER den Blur (z-index > Blur), damit nur der Hintergrund geblurrt wird, nicht der Planet */
#planet-overview.po-new .planet-info .image{ z-index: 1; top: -32px; }
#planet-overview.po-new .planet-info .image img{ width: 150px; }
/* Name fix hoch halten, damit Astro (leerer Name) und Planet die Boxen auf gleicher Höhe starten */
#planet-overview.po-new .planet-info .name{ position: relative; z-index: 2; min-height: 17px; font-size: 14px; text-shadow: 0 0 6px color-mix(in srgb, var(--ui-color) 60%, transparent); }
#planet-overview.po-new .planet-info .content{ position: relative; z-index: 2; }
/* punktuellen/abgedunkelten Hintergrund (chat_background) durch leicht durchscheinende Box ersetzen */
#planet-overview.po-new .stats-container{
  margin-top: 6px; padding: 5px 8px; border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-color) 30%, rgba(8,14,22,.5)), color-mix(in srgb, var(--ui-color) 16%, rgba(6,10,18,.5))) !important;
  border: 1px solid color-mix(in srgb, var(--ui-hl, var(--ui-color)) 38%, transparent);
  box-shadow: 0 1px 6px rgba(0,0,0,.4) !important;
}
#planet-overview.po-new .planet-stats .stats-row .stats-name{ padding: 1px 6px 1px 4px; font-size: 11px; color: color-mix(in srgb, var(--ui-color) 60%, #fff); }
#planet-overview.po-new .planet-stats .stats-row .stats-value,
#planet-overview.po-new .planet-stats .stats-row .stats-value-r{ padding-right: 4px; font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* Player Overlay */
#player-overlay{ position: absolute; z-index: 999; display: none;
  box-shadow: 0 0 10px 1px #000, 0 0 10px 1px #000; margin: 0;
  background: color-mix(in srgb, var(--ui-color) 40%, black); border: 1px solid var(--ui-color); }
.oplayer{ position: relative; }
.oplayer > .avatar{ position: absolute; top: 5px; left: -10px; width: 100px; height: 100px; overflow: hidden; margin: 0;
  box-shadow: 0 0 10px 3px #000, 0 0 10px 3px #111, 0 0 10px 3px #222; }
.oplayer > .avatar img{ width: 100px; }
.oplayer > .data { min-height: 120px; min-width: 150px; margin-left: 100px; }
.oplayer > .data > .name { white-space: nowrap; position: relative; top: -10px; margin-right: 10px; }
.oplayer > .data > .alliance { position: relative; top: -12px; padding-left: 30px; margin-right: 10px; }
.oplayer > .data > .rank { position: relative; top: -8px; margin-right: 10px; }
.player-name{ font-size: 24px; font-weight: bolder; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 1px #000, 0 0 1px #000; }
.alliance-tag{ font-size: 14px; font-weight: bolder; white-space: nowrap; text-shadow: 0 0 3px #000, 0 0 1px #000, 0 0 1px #000; }

/* Loader */
.lds-ring{ display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-ring div{ box-sizing: border-box; display: block; position: absolute; width: 64px; height: 64px; margin: 8px;
  border: 8px solid #fff; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
  border-color: #fff transparent transparent transparent; }
.lds-ring div:nth-child(1){ animation-delay: -0.45s; }
.lds-ring div:nth-child(2){ animation-delay: -0.3s; }
.lds-ring div:nth-child(3){ animation-delay: -0.15s; }
@keyframes lds-ring{ 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.assip{ filter:saturate(8); }

/* Loading Bar */
.loading-nbar{ position:relative; width:100%; height:5px; background: var(--overlay-strong); }
.loading-nbar > .progress{ position:absolute; top:0; left:0; height:100%; background: var(--progress-bg); transition: width 1s linear; will-change: width; }

/* Kleine Gradients */
.bg-sel-grad-green{ background: linear-gradient(to right, #353 0%, transparent 90%, transparent 10%); }
.bg-sel-grad-blue{  background: linear-gradient(to right, color-mix(in srgb, var(--ui-color) 40%, #000) 0%, transparent 90%, transparent 10%); }

/* Buttons */
.fleet-start-button, .def-dig-button-in, .def-dig-button-out{
  font-size: 28px; color: #FFF; font-weight: bolder; font-family: Arial;
  border: 1px solid #FFF; border-radius: var(--btn-radius); cursor: pointer;
  padding: 6px 20px; text-shadow: 0 0 3px #000;
  background: radial-gradient(ellipse at center, #cfe7fa 0%,#6393c1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1', GradientType=1 );
}
.fleet-start-button:hover, .def-dig-button-out:hover{
  background: radial-gradient(ellipse at center, #b4ddb4 0%,#83c783 17%,#52b152 33%, var(--eco-green) 67%, var(--eco-green-2) 83%, var(--eco-green-3) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 );
}
.def-dig-button-in:hover{
  background: radial-gradient(ellipse at center, #ddb4b4 0%, #c78383 17%, #b15151 33%, #8a0000 67%, #570000 83%, #240000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c78383', endColorstr='#240000',GradientType=1 );
}
.fleet-start-button-red{
  font-size: 28px; color:#FFF; font-weight:bolder; font-family: Arial;
  border: 1px solid #FFF; border-radius: var(--btn-radius); cursor: pointer;
  padding: 6px 20px; text-shadow: 0 0 3px #000;
  background: radial-gradient(ellipse at center, #ddb4b4 0%, #c78383 17%, #b15151 33%, #8a0000 67%, #570000 83%, #240000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c78383', endColorstr='#240000',GradientType=1 );
}
.fleet-start-button-red:hover{ filter: brightness(2) saturate(2); }

/* Urplasma */
.urplasma-base{ width:300px;height:300px; animation: up1h 300ms steps(6) infinite, up1v 3000ms steps(10) infinite; -webkit-animation: up1h 300ms steps(6) infinite, up1v 3000ms steps(10) infinite; }
@keyframes up1h { from { background-position-x: 0px; } to { background-position-x: -1800px; } }
@keyframes up1v { from { background-position-y: 0px; } to { background-position-y: -3000px; } }
.urplasma-icon{ position: relative; width: 300px; height: 300px; overflow: hidden; }
.urplasma-icon-30{ position: relative; width: 30px; height: 30px; overflow: hidden; }
.urplasma-icon-30 div{ transform: scale(0.1); transform-origin: top left; }
.urplasma-icon-15{ position: relative; width: 15px; height: 15px; overflow: hidden; }
.urplasma-icon-15 div{ transform: scale(0.05); transform-origin: top left; }
.urplasma-icon-60{ position: relative; width: 60px; height: 60px; overflow: hidden; }
.urplasma-icon-60 div{ transform: scale(0.2); transform-origin: top left; }
.urplasma-icon-50{ position: relative; width: 50px; height: 50px; overflow: hidden; }
.urplasma-icon-50 div{ transform: scale(0.17); transform-origin: top left; }
.urplasma-icon-100{ position: relative; width: 100px; height: 100px; overflow: hidden; }
.urplasma-icon-100 div{ transform: scale(0.34); transform-origin: top left; }

.urplasma-1{ background-image: url(/images/urplasma/1.jpg); }
.urplasma-2{ background-image: url(/images/urplasma/2.jpg); }
.urplasma-3{ background-image: url(/images/urplasma/3.jpg); }
.urplasma-4{ background-image: url(/images/urplasma/4.jpg); }
.urplasma-5{ background-image: url(/images/urplasma/5.jpg); }
.urplasma-6{ background-image: url(/images/urplasma/6.jpg); }
.urplasma-7{ background-image: url(/images/urplasma/7.jpg); }
.urplasma-8{ background-image: url(/images/urplasma/8.jpg); }

.urplasma-1-cutout{ mask-image: url(/images/urplasma/mask/1.png); -webkit-mask-image: url(/images/urplasma/mask/1.png); }
.urplasma-2-cutout{ mask-image: url(/images/urplasma/mask/2.png); -webkit-mask-image: url(/images/urplasma/mask/2.png); }
.urplasma-3-cutout{ mask-image: url(/images/urplasma/mask/3.png); -webkit-mask-image: url(/images/urplasma/mask/3.png); }
.urplasma-4-cutout{ mask-image: url(/images/urplasma/mask/4.png); -webkit-mask-image: url(/images/urplasma/mask/4.png); }
.urplasma-5-cutout{ mask-image: url(/images/urplasma/mask/5.png); -webkit-mask-image: url(/images/urplasma/mask/5.png); }
.urplasma-6-cutout{ mask-image: url(/images/urplasma/mask/6.png); -webkit-mask-image: url(/images/urplasma/mask/6.png); }
.urplasma-7-cutout{ mask-image: url(/images/urplasma/mask/7.png); -webkit-mask-image: url(/images/urplasma/mask/7.png); }
.urplasma-8-cutout{ mask-image: url(/images/urplasma/mask/8.png); -webkit-mask-image: url(/images/urplasma/mask/8.png); }

/* Menu */
#spaceinvasion-menu{
  --menu-width: 680px;
  --menu-item-h: 46px;
  --menu-gap-x: 16px;
  --menu-gap-y: 12px;  
  display: grid;
  grid-auto-flow: column;      
  grid-auto-columns: max-content;
  gap: var(--menu-gap-y) var(--menu-gap-x);
  justify-content: center; 
  justify-items: center;  
  width: min(100%, var(--menu-width));
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(90deg,rgba(0, 0, 0, 0.8) 20%, color-mix(in srgb, var(--ui-color) 50%, #000 50%) 50%, rgba(0, 0, 0, 0.8) 80%);
}
/* ── Neues UI: dezenter Waben-Akzent zu den Rändern, leicht driftend ──
   (aktiviert per JS-Klasse .is-new-ui, wenn eine .ui-box erkannt wird) */
#spaceinvasion-menu.is-new-ui{ position: relative; }
#spaceinvasion-menu.is-new-ui::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
  /* Verlauf nur an den Rändern sichtbar (Mitte transparent); Wabenmaske macht das Muster */
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--ui-hl, var(--ui-color)) 28%, transparent) 0%,
      transparent 24%, transparent 76%,
      color-mix(in srgb, var(--ui-hl, var(--ui-color)) 28%, transparent) 100%);
  -webkit-mask-image: url("/images/client/hexagon_si.svg"); mask-image: url("/images/client/hexagon_si.svg");
  -webkit-mask-size: 18px 10px; mask-size: 18px 10px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  animation: siMenuHexDrift 9s linear infinite;
}
#spaceinvasion-menu.is-new-ui > *{ position: relative; z-index: 1; }
@keyframes siMenuHexDrift{
  from{ -webkit-mask-position: 0 0; mask-position: 0 0; }
  to{ -webkit-mask-position: 36px 0; mask-position: 36px 0; }
}
#spaceinvasion-menu.rows-1{
  grid-template-rows: var(--menu-item-h);
}
#spaceinvasion-menu.rows-2{
  grid-template-rows: repeat(2, var(--menu-item-h));
}
.menu__item{
  --buy-cap: 12px;    
  --skew: 6px;        
  --lift: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--menu-item-h);
  width: 100%;
  padding: 0 18px;
  color: #fff;
  font: inherit;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 1px solid var(--ui-color);
  border-radius: 8px;  
  background: rgba(40,40,40,0.55);
  box-shadow: 0 var(--lift) 0 0 rgba(0,0,0,0); 
  transform: skewX(-15deg);
  transition:
    filter .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    background .16s ease;
}
.menu__item::before,
.menu__item::after{
  content: "";
  position: absolute;
  width: var(--buy-cap);
  height: var(--buy-cap);
  background: var(--ui-color);
  pointer-events: none;
}
.menu__item::before{ left: -1px; bottom: -1px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.menu__item::after { right:-1px; top:   -1px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.menu__item:hover{
  filter: brightness(1.12) saturate(1.15);
  --lift: -2px;
  box-shadow: 0 0 10px 2px color-mix(in oklab, var(--ui-color) 60%, transparent);
  transform: translateY(var(--lift)) scale(1.015) skewX(-5deg);;
}
.menu__item:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--ui-color) 70%, white 20%);
  outline-offset: 2px;
}
.menu__item.is-active{
  background: rgba(30,30,30,0.85);
  filter: brightness(1.6) saturate(1.2);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 12px 2px color-mix(in oklab, var(--ui-color) 70%, transparent);
  transform: translateY(-2px) scale(1.02) skewX(-20deg);;
  font-weight: 800;
}
.menu__divider{ width: min(92%, var(--menu-width)); }
@media (prefers-reduced-motion: reduce){
  #spaceinvasion-menu, .menu__item{ transition: none !important; }
}
.menu-panel{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(4px) scale(0.995);
  transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
}
.menu-panel.is-visible{ opacity: 1; transform: none; max-height: none; }
@media (prefers-reduced-motion: reduce){
  .menu__item, .menu-panel{ transition: none !important; }
}
@media (max-width: 520px){
  #spaceinvasion-menu{
    grid-auto-flow: row;           
    grid-auto-columns: initial;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    justify-items: stretch;           
  }
  .menu__item{
    width: 100%;                  
  }
  #spaceinvasion-menu[data-odd] .menu__item:last-child{
    grid-column: 1 / -1;
    justify-self: center;
    width: max-content;           
  } 
}

/* Flip Helper */
.flipped { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -webkit-backface-visibility: hidden; }

/* Chat / Mentor */
html:not([data-theme="std"]) .chat_background{ background: var(--ui-bg); }
html[data-theme="std"] .chat_background{
  background-color: #101010; /* Grundfarbe hinter dem Bild */
  background-image:
    linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.5)), /* Overlay oben */ 
    url('/img/tab2_bg.gif');                            /* Bild unten */
  background-repeat: repeat;   /* ggf. no-repeat */
  background-size: auto;       /* ggf. cover/contain */
  box-shadow: inset 0 0 3px 0 #000;
}
.mentor_star{ text-shadow: 0 0 4px var(--ui-color), 0 0 8px var(--ui-color), 0 0 10px var(--ui-color); }

/* Tabellen-/Box-Schatten alt */
html:not([data-theme="std"]) > table,
html:not([data-theme="std"]) .ecoshadow{
  box-shadow: 0 0 20px var(--glow-strong);
  margin-top: 10px;
  border: 1px solid var(--ui-color);
  border-collapse: collapse !important;
}
table table, .noshadow{ box-shadow: none; margin-top:0; border:0; }

html[data-theme="std"] > table,
html[data-theme="std"] .ecoshadow{
  box-shadow: none;
  margin-top: 10px;
  border: 1px solid transparent; 
  border-collapse: separate !important; 
}
html[data-galaxy="1"] > table,
html[data-galaxy="1"] .ecoshadow{
  box-shadow: none;
  border: 1px solid transparent;
  margin-top: 0;
}

/* Hover-Reihen */
html:not([data-theme="std"]) .hover-gray:hover, 
html:not([data-theme="std"]) .hover-gray:hover > td{ background: color-mix(in srgb, var(--ui-color) 50%, #444); }
html:not([data-theme="std"]) .hover-ui:hover, 
html:not([data-theme="std"]) .hover-ui:hover > td{ background: color-mix(in srgb, var(--ui-color) 50%, black); }
html:not([data-theme="std"]) .hover-gray-gab:hover,
html:not([data-theme="std"]) .hover-gray-gab:hover > td{ background: color-mix(in srgb, var(--ui-color) 50%, #444); border: 1px solid #000; }

html[data-theme="std"] .hover-gray:hover, 
html[data-theme="std"] .hover-gray:hover > td{ background: var(--rahmen-bg-image); }
html[data-theme="std"] .hover-ui:hover, 
html[data-theme="std"] .hover-ui:hover > td{ background: var(--rahmen-bg-image); }
html[data-theme="std"] .hover-gray-gab:hover, 
html[data-theme="std"] .hover-gray-gab:hover > td{ background: var(--rahmen-bg-image); border: 1px solid #000; }


#resBar .ecoshadow.chat_background{ width:100% !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }

/* Pfeile/BG */
.arrow_left{ width:20px; height:15px; background-image: var(--arrow-left-image); }
.arrow_right{ width:20px; height:15px; background-image: var(--arrow-right-image); }
.mm_build{ background-image: var(--mm-build-bg-image); }
.building_spacer{ display:none; }

.payment_get_up{
  text-shadow: 0 0 10px var(--pay-glow), 0 0 10px var(--pay-glow), 0 0 10px var(--pay-glow), 0 0 10px var(--pay-glow);
  font-size: 20px;
}
.payment_get_up:hover{ font-size: 20px; }
.payment_hr{ box-shadow: 0 0 1px var(--pay-glow); }
.payment_log{ text-shadow: 0 0 2px var(--pay-glow), 0 0 3px var(--pay-glow), 0 0 10px var(--pay-glow), 0 0 3px var(--pay-glow); font-size: 10px; }
.payment_hl{ text-shadow: 0 0 2px var(--pay-glow), 0 0 3px var(--pay-glow); font-size: 14px; display:inline-block; margin-left:30px; margin-top:5px; }
.payment_descr{ display:inline-block; margin-left:10px; margin-top:5px; width:320px; }
.payment_buy_button_outer{ position:relative; right:5px; width:190px; height:50px; border-radius: 10px; border: 1px solid var(--pay-glow); box-shadow: var(--shadow-md); cursor: pointer; }
.payment_button_green{ background: #26861F; }
.payment_button_red{   background: #861F23; }
.gift_wheel{ border: 10px solid var(--ui-color); }
.eco_stars{ display: inline-block; background-image: var(--eco-stars-image); background-size: cover; width:60px; height:12px; }
#resBar [style*="width:180px"]{ max-width:100% !important; }

/* =======================
   Legacy-Klassen exakt via Vars
   ======================= */

/* Grund-UI */
.planet{ background-color: color-mix(in srgb, var(--ui-color) 35%, #000 65%); color:#E6EFFF; font-family: Verdana; }
a.button{ color: color-mix(in srgb, var(--ui-color) 30%, #000); font-family: Verdana; font-weight:bold; text-decoration:none; }
a.button:hover{ color:#FF0000; text-decoration:none; }

/* Textarea/Galaxy */
textarea{ border:0; font-family: Verdana; color:#E6EFFF; background-image: var(--textarea-bg-image); }
.galaxy{ font-family: Verdana; background-image: var(--galaxy-bg-image); background-color: var(--galaxy-bg-color); border:0; }

/* Tabellen/Boxen (klassisch) */
.ress{
  background-color:#D8D9C5; font-family: Verdana;
  border:1px solid #FFFFFF; font-weight:bold; color:#000; text-align:center;
}
.building, .building2{ font-family: Verdana; border:0; color:#E6EFFF; text-align:left; }

/* .rahmen: per-Theme via Vars */
.rahmen{
  border-left:   var(--rahmen-border-left);
  border-right:  var(--rahmen-border-right);
  border-top:    var(--rahmen-border-top);
  border-bottom: var(--rahmen-border-bottom);
  background-image: var(--rahmen-bg-image);
  background-repeat: repeat;
  background-position: top left;
  border-collapse: collapse;
  font-family: Verdana;
  font-weight: bold;
  color:#E6EFFF;
}

/* Nachrichten/Reports/Links – .nachricht exakt */
.nachricht{
  border-left:   var(--nachricht-border-left);
  border-right:  var(--nachricht-border-right);
  border-top:    var(--nachricht-border-top);
  border-bottom: var(--nachricht-border-bottom);
  background: var(--nachricht-bg-image);
  background-repeat: repeat;
  background-position: top left;
  border-collapse: collapse;
  font-family: Verdana;
  color:#E6EFFF;
}
a.sys{ font-family: Verdana; color:red; font-weight:bold; }
a.sys:hover{ color:red; text-decoration: underline; }
a.fleet{ font-family: Verdana; color: var(--warn-text); font-weight:bold; }
a.fleet:hover{ color: var(--warn-text); text-decoration: underline; }

/* Flottenbericht: per-Theme */
.flottenbericht{
  border-left:   var(--flb-border-left);
  border-right:  var(--flb-border-right);
  border-top:    var(--flb-border-top);
  border-bottom: var(--flb-border-bottom);
  background-image: var(--flottenbericht-bg-image);
  background-color: var(--flottenbericht-bg-color);
  border-collapse: collapse;
  font-family: Verdana;
  color: var(--warn-text);
  font-weight:bold;
}

/* Farbige Boxen */
.bg_rot{
  border-left: 1px solid #8a5d61; border-right:1px solid #422023;
  border-top: 1px solid #8a5d61; border-bottom:1px solid #422023;
  background-image: var(--bg-rot-image);
  border-collapse: collapse; font-family: Verdana; color:#E6EFFF;
}
.bg_gruen{
  border-left: 1px solid #617675; border-right:1px solid #233231;
  border-top: 1px solid #617675; border-bottom:1px solid #233231;
  background-image: var(--bg-gruen-image);
  border-collapse: collapse; font-family: Verdana; color:#E6EFFF;
}
.green{ font-family: Verdana; color:#00FF00; }

/* Build-Boxen / Economy */
.imbau{
  border-left:1px solid #FFF; border-right:1px solid #666;
  border-top:1px solid #FFF;  border-bottom:1px solid #666;
  background-color:#EBEBE0; font-family: Verdana; color:#000;
  filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#EBEBE0, endColorStr=#DEDEDE, gradientType=0);
}
a.bauen{ font-family: Verdana; border:0; text-decoration:none; color:#008080; }
a.bauen:hover{ color:#008080; }
.nbauen{ font-family: Verdana; border:0; text-align:right; color:#FF0000; }

.economy{
  background-color:#D8D9C5; font-family: Verdana;
  border:1px solid #FFFFFF; color:#000; text-align:center;
}
.detail{
  background-color:#EBEBE0; font-family: Verdana,Arial,Helvetica,sans-serif;
  border:1px; color:#000; border-color:#C6C7A9; text-align:center;
}

/* Neuere Paneele */
.building3{
  background-color:#EBEBE0;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  background: var(--building3-bg-image);
  border:0; color: var(--building3-text-color);
  border-color:#C6C7A9;
}
.building_corner{ background: var(--building-corner-image); }

/* Menü/Box-Optik alt */
.table_menu{ border:1px solid #FFFFFF; cursor: default; background-color:#D8D9C5; color:#000; }

/* Std-only Schattenbox */
.forceShadow{ box-shadow: 0 0 5px #000; margin-top:10px; border:1px solid var(--ui-color) !important; border-collapse: separate !important; }

/* Header-Boxen */
.header_styled{ margin-top:0; border-radius:0;
  box-shadow: 0 0 1px 3px color-mix(in srgb, var(--ui-color) 80%, rgba(0,0,0,0.2)); }
[data-theme="std"] .header_styled{ box-shadow: none; border-width: 1px; }

.no_eco_margin{ margin-top:0; }

/* Patch Notes */
div.patchNotes{ width: 800px; top: 200px; }
div.patchNotes div{
  margin: auto; width: 600px; min-height: 250px; max-height: 550px; margin-bottom: 5px; overflow: auto; text-align: left;
  background-image: var(--patchnotes-bg-image, url('./img/global/bg_patchnotes.gif'));
  background-color: #000000; border: 1px solid #ffffff;
}
div.patchNotes div div{
  border: 0; margin: auto; width: 400px; height: 190px; min-height: 190px; overflow: hidden; left: 210px;
  background-color: #111111; border: 1px solid #ffffff;
}

/* Fieldset/Legend */
fieldset { border: 1px solid #E6EFFF; padding: 2px; font-family: Verdana,Tahoma,Arial,"Sans-Serif"; text-align: left; }
legend { padding: 1px; font-family: Verdana,Tahoma,Arial,"Sans-Serif"; font-weight: bold; color: #E6EFFF; text-align: left; }

/* ===== Scrollbar-Fix: root + relevante Container explizit stylen ===== */

/* Firefox (root + Container) */
:root,
html, body,
.ecoshadow, .menu-panel, textarea, .planet-info .content {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track) !important;
  scrollbar-width: thin !important;
}

/* WebKit/Blink – Root */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 10px; height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);
}

/* WebKit/Blink – wichtige Overflow-Container */
.ecoshadow::-webkit-scrollbar,
.menu-panel::-webkit-scrollbar,
textarea::-webkit-scrollbar,
.planet-info .content::-webkit-scrollbar {
  width: 10px; height: 10px;
}
.ecoshadow::-webkit-scrollbar-track,
.menu-panel::-webkit-scrollbar-track,
textarea::-webkit-scrollbar-track,
.planet-info .content::-webkit-scrollbar-track {
  background: var(--scroll-track);
}
.ecoshadow::-webkit-scrollbar-thumb,
.menu-panel::-webkit-scrollbar-thumb,
textarea::-webkit-scrollbar-thumb,
.planet-info .content::-webkit-scrollbar-thumb {
  background-color: var(--ui-color);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);
}