/* =============================================================
   Capostone – Noir / Prohibition-Ära
   Akzent: Messing-Gold. Aktion: Oxblood. Sonst ruhig.
   ============================================================= */

:root{
  --ink:        #0e0f12;   /* Hintergrund, fast schwarz   */
  --concrete:   #16181e;   /* Panel                        */
  --concrete-2: #1d2027;   /* Eingaben                     */
  --smoke:      #2c3038;   /* Linien/Rahmen                */
  --bone:       #e8e3d8;   /* Text                         */
  --bone-dim:   #9b958a;   /* Sekundärtext                 */
  --brass:      #c8a04a;   /* Akzent (sparsam!)            */
  --brass-soft: #8a7233;
  --oxblood:    #8c2533;   /* primäre Aktion               */
  --oxblood-hi: #a92e3e;
  --err:        #d4736f;
  --ok:         #7fae7a;

  --r: 3px;                /* kantig, kaum gerundet        */
}

*{ box-sizing:border-box; }

html,body{ margin:0; }

body{
  min-height:100dvh;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a1c22 0%, var(--ink) 60%) fixed;
  color:var(--bone);
  font:16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* feiner Grain als Atmosphäre, dezent */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.shell{
  position:relative; z-index:1;
  flex:1; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 1.25rem;
}
/* Inhaltsseiten (Downloads, Impressum …): normaler Textfluss, nicht zentriert. */
.shell-page{
  display:block;
  max-width:900px;
  margin:0 auto;
  align-items:stretch;
  justify-content:flex-start;
}

/* ---- Auth-Karte: das Signature-Element ---------------------- */
.card{
  width:100%; max-width:420px;
  background:linear-gradient(180deg, var(--concrete) 0%, #121419 100%);
  border:1px solid var(--smoke);
  border-radius:var(--r);
  padding:2.25rem 2rem 2rem;
  box-shadow:0 24px 60px -30px #000, inset 0 1px 0 #ffffff08;
  position:relative;
}
/* Messing-Hairline oben – „gestempelt" */
.card::before{
  content:""; position:absolute; left:1.75rem; right:1.75rem; top:0;
  height:2px; background:linear-gradient(90deg, transparent, var(--brass), transparent);
}

.brand{
  font-family:"Oswald", system-ui, sans-serif;
  font-weight:700; font-size:2.1rem; letter-spacing:.42em;
  text-transform:uppercase; text-indent:.42em;
  margin:0 0 .15rem; color:var(--bone);
}
.brand b{ color:var(--brass); font-weight:700; }
.tagline{
  margin:0 0 1.75rem; color:var(--bone-dim);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
}

h1.h{
  font-family:"Oswald", system-ui, sans-serif;
  font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  font-size:1.05rem; color:var(--bone-dim);
  margin:0 0 1.25rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--smoke);
}

/* ---- Formular ---------------------------------------------- */
.field{ margin-bottom:1.05rem; }
.field label{
  display:block; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bone-dim); margin-bottom:.4rem;
}
.field input{
  width:100%; padding:.7rem .8rem;
  background:var(--concrete-2); color:var(--bone);
  border:1px solid var(--smoke); border-radius:var(--r);
  font-size:.98rem; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{ color:#6b665d; }
.field input:focus{
  outline:none; border-color:var(--brass-soft);
  box-shadow:0 0 0 3px #c8a04a22;
}
.field--bad input{ border-color:var(--err); }
.field .msg{ margin-top:.35rem; font-size:.78rem; color:var(--err); }

.btn{
  width:100%; margin-top:.5rem; padding:.8rem 1rem;
  font-family:"Oswald", system-ui, sans-serif;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  font-size:.92rem; color:var(--bone); cursor:pointer;
  background:linear-gradient(180deg, var(--oxblood-hi), var(--oxblood));
  border:1px solid #6f1d28; border-radius:var(--r);
  transition:filter .15s, transform .05s;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px #c8a04a55; }

.alt{
  margin-top:1.5rem; padding-top:1.1rem; border-top:1px solid var(--smoke);
  font-size:.85rem; color:var(--bone-dim); text-align:center;
}
.alt a{ color:var(--brass); text-decoration:none; }
.alt a:hover{ text-decoration:underline; }

/* Inhalts-Links + Spielernamen */
.panel a,.ltable a{ color:var(--brass-soft); text-decoration:none; }
.panel a:hover,.ltable a:hover{ color:var(--brass); text-decoration:underline; }
a.plink{ color:var(--bone); text-decoration:none; border-bottom:1px dotted var(--brass-soft); padding-bottom:1px; }
a.plink:hover{ color:var(--brass); border-bottom-color:var(--brass); }

/* ---- Meldungen --------------------------------------------- */
.note{
  border-radius:var(--r); padding:.7rem .85rem; margin-bottom:1.25rem;
  font-size:.88rem; border:1px solid;
}
.note--error{ background:#3a1a1d; border-color:#7c2f37; color:#f0c9c7; }
.note--ok{ background:#1b2a1c; border-color:#37562f; color:#cfe3c9; }

/* ---- Dashboard (Minimal) ----------------------------------- */
.dash{ width:100%; max-width:680px; }
.dash .stat-row{ display:flex; gap:1px; background:var(--smoke);
  border:1px solid var(--smoke); border-radius:var(--r); overflow:hidden; margin:1.25rem 0; }
.dash .stat{ flex:1; background:var(--concrete); padding:1rem; text-align:center; }
.dash .stat .k{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-dim); }
.dash .stat .v{ font-family:"Oswald", sans-serif; font-size:1.5rem; color:var(--brass); margin-top:.2rem; }

.foot{
  position:relative; z-index:1; text-align:center;
  padding:1.25rem; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:#54504a;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
}

/* =============================================================
   In-Game-Chrome (Topbar, Navigation, Listen, Komponenten)
   ============================================================= */
.topbar{
  position:sticky;top:0;z-index:500;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem 1.25rem;
  background:linear-gradient(180deg,#15171d,#101218);
  border-bottom:1px solid var(--smoke);
}
.topbar .brand{font-size:1.15rem;letter-spacing:.3em;margin:0;display:flex;align-items:center;}
.topbar .brand .brandmark{display:none;}
.topbar nav{display:flex;gap:1.1rem;flex:1;}
.topbar nav a{
  color:var(--bone-dim);text-decoration:none;font-size:.8rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.2rem 0;
  border-bottom:2px solid transparent;
}
.topbar nav a:hover{color:var(--bone);}
.topbar nav a.active{color:var(--brass);border-bottom-color:var(--brass);}
.topbar .purse{display:flex;gap:1.1rem;font-size:.82rem;}
.topbar .purse .k{color:var(--bone-dim);text-transform:uppercase;font-size:.66rem;letter-spacing:.1em;}
.topbar .purse .v{font-family:"Oswald",sans-serif;color:var(--brass);}
.topbar .lo{color:var(--bone-dim);text-decoration:none;font-size:.78rem;}
.topbar .lo:hover{color:var(--err);}

.wrap{position:relative;z-index:1;max-width:920px;margin:0 auto;padding:1.5rem 1.25rem 3rem;}
.wrap h1{font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;font-size:1.4rem;margin:.2rem 0 1.2rem;}
.wrap h2{font-family:"Oswald",sans-serif;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;font-size:1rem;color:var(--bone-dim);
  margin:2rem 0 .8rem;padding-bottom:.5rem;border-bottom:1px solid var(--smoke);}

.panel{background:var(--concrete);border:1px solid var(--smoke);border-radius:var(--r);}

.ltable{width:100%;border-collapse:collapse;font-size:.9rem;}
.ltable th{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--smoke);}
.ltable td{padding:.6rem .7rem;border-bottom:1px solid #20232a;}
.ltable tr:last-child td{border-bottom:none;}
.ltable .num{text-align:right;font-family:"Oswald",sans-serif;}

.pill{display:inline-block;padding:.1rem .5rem;border-radius:999px;font-size:.72rem;
  letter-spacing:.06em;border:1px solid var(--smoke);color:var(--bone-dim);}
.pill.q1{color:#9b958a;} .pill.q2{color:#7fae7a;} .pill.q3{color:#5b9bd5;}
.pill.q4{color:#b48ce0;} .pill.q5{color:var(--brass);border-color:var(--brass-soft);}

.btn-sm{padding:.4rem .8rem;font-family:"Oswald",sans-serif;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;font-size:.74rem;color:var(--bone);
  background:linear-gradient(180deg,var(--oxblood-hi),var(--oxblood));
  border:1px solid #6f1d28;border-radius:var(--r);cursor:pointer;}
.btn-sm:hover{filter:brightness(1.12);}
.btn-sm:disabled{background:var(--smoke);border-color:var(--smoke);color:var(--bone-dim);cursor:not-allowed;filter:none;}
.btn-sm.alt{background:var(--concrete-2);border-color:var(--brass-soft);color:var(--bone);}
.btn-sm.alt:hover{filter:brightness(1.15);border-color:var(--brass);}

.bar{height:6px;background:#20232a;border-radius:3px;overflow:hidden;min-width:80px;}
.bar > i{display:block;height:100%;background:var(--brass);}

.tabs{display:flex;gap:.5rem;margin-bottom:1rem;}
.tabs a{padding:.4rem .9rem;border:1px solid var(--smoke);border-radius:var(--r);
  text-decoration:none;color:var(--bone-dim);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}
.tabs a.active{color:var(--brass);border-color:var(--brass-soft);}

.empty{color:var(--bone-dim);font-size:.9rem;padding:1rem .2rem;}
.qty{width:64px;padding:.4rem;background:var(--concrete-2);color:var(--bone);
  border:1px solid var(--smoke);border-radius:var(--r);}

/* Eingabefelder, Dropdowns, Textareas */
.inp,
input[type="text"],input[type="number"],input[type="password"],
input[type="email"],input[type="search"],input[type="url"],
select,textarea{
  background:var(--concrete-2);color:var(--bone);
  border:1px solid var(--smoke);border-radius:var(--r);
  padding:.5rem .6rem;font:inherit;font-size:.9rem;outline:none;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.inp:focus,
input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus,
input[type="email"]:focus,input[type="search"]:focus,input[type="url"]:focus,
select:focus,textarea:focus{
  border-color:var(--brass-soft);box-shadow:0 0 0 2px rgba(200,160,74,.15);
}
input::placeholder,textarea::placeholder{color:var(--bone-dim);opacity:.7;}
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;padding-right:1.8rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%239b958a'/></svg>");
  background-repeat:no-repeat;background-position:right .6rem center;
}
select option{background:var(--concrete-2);color:var(--bone);}
input[type="checkbox"],input[type="radio"]{accent-color:var(--brass);}
.inp:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed;}

/* Benachrichtigungs-Glocke in der Topbar */
.topbar .bell{position:relative;color:var(--bone-dim);text-decoration:none;font-size:1.1rem;line-height:1;}
.topbar .bell:hover,.topbar .bell.active{color:var(--brass);}
.bell-badge{position:absolute;top:-8px;right:-10px;background:var(--oxblood);color:var(--bone);
  font-family:"Oswald",sans-serif;font-size:.62rem;line-height:1;padding:.15rem .3rem;border-radius:999px;
  border:1px solid #6f1d28;min-width:1rem;text-align:center;}

/* Benachrichtigungsliste */
.notif{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .9rem;border-bottom:1px solid #20232a;}
.notif:last-child{border-bottom:none;}
.notif.unread{background:#1a1d24;}
.notif .when{color:var(--bone-dim);font-size:.78rem;white-space:nowrap;}
.notif .dot{color:var(--brass);}

/* ---- Topbar responsiv + Glocke (überarbeitet) ---- */
.topbar{flex-wrap:wrap;gap:.8rem 1.25rem;}
.topbar nav{flex-wrap:wrap;gap:.6rem 1.1rem;}
.topbar .bell{font-size:1.25rem;padding:.1rem .2rem;}
.bell-badge{top:-6px;right:-8px;background:var(--oxblood);color:#fff;
  font-weight:600;box-shadow:0 0 0 2px var(--ink);}

/* ---- Meldungen (überarbeitet) ---- */
.notif{align-items:center;gap:.9rem;padding:.85rem 1rem;border-bottom:1px solid #20232a;
  border-left:3px solid transparent;transition:background .15s;}
.notif:hover{background:#171a21;}
.notif.unread{background:#181b22;border-left-color:var(--brass);}
.notif .ico{flex:0 0 1.9rem;height:1.9rem;width:1.9rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:#20232a;border:1px solid var(--smoke);}
.notif .ico.ok{color:var(--ok);border-color:#37562f;}
.notif .ico.bad{color:var(--err);border-color:#7c2f37;}
.notif .ico.warn{color:var(--brass);border-color:var(--brass-soft);}
.notif .body{flex:1;display:flex;flex-direction:column;gap:.15rem;}
.notif .txt{font-size:.92rem;}
.notif .when{color:var(--bone-dim);font-size:.74rem;}
.notif-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;}

/* ---- Statistik-Kacheln (auch ohne .dash-Kontext) ---- */
.stat-row{display:flex;flex-wrap:wrap;gap:1px;background:var(--smoke);
  border:1px solid var(--smoke);border-radius:6px;overflow:hidden;margin-top:.5rem;}
.stat{flex:1 1 130px;background:var(--concrete);padding:1rem;text-align:center;}
.stat .k{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-dim);}
.stat .v{font-family:"Oswald",sans-serif;font-size:1.5rem;color:var(--brass);margin-top:.2rem;}

/* Nav-Gruppen (Dropdowns) */
.navgroup{position:relative;display:inline-block;}
.topbar nav .langgroup{margin-left:auto;}
.navgroup-btn{background:none;border:none;color:var(--bone-dim);font:inherit;cursor:pointer;padding:0;}
.navgroup-btn:hover,.navgroup-btn.active{color:var(--brass);}
.navgroup-menu{position:absolute;top:100%;left:0;min-width:160px;background:var(--concrete-2);
  border:1px solid var(--smoke);border-radius:var(--r);padding:.35rem;z-index:60;
  display:none;flex-direction:column;gap:.15rem;box-shadow:0 14px 34px -18px #000;}
.navgroup.show .navgroup-menu{display:flex;}
.navgroup-menu a{padding:.3rem .5rem;border-radius:4px;color:var(--bone-dim);text-decoration:none;white-space:nowrap;}
.navgroup-menu a:hover,.navgroup-menu a.active{background:var(--concrete);color:var(--brass);}

/* ---- Mobil ---- */
.navtoggle{display:none;background:none;border:1px solid var(--smoke);color:var(--bone);
  border-radius:var(--r);font-size:1.1rem;line-height:1;padding:.25rem .5rem;cursor:pointer;}
/* UTC-Uhr in der oberen Leiste (Desktop). Mobil verborgen – dort steht sie unten. */
.topbar .topclock{display:flex;flex-direction:column;align-items:center;line-height:1.05;
  font-family:"Oswald",sans-serif;font-weight:600;font-size:1rem;letter-spacing:.05em;
  color:var(--bone);white-space:nowrap;}
.topbar .topclock small{font-size:.5rem;letter-spacing:.12em;color:var(--bone-dim);}

/* Admin-Eintrag im Burger-Menü: nur mobil; auf Desktop reicht das Zahnrad oben. */
.topbar nav .admin-navitem{display:none;color:var(--oxblood);}

/* Untere Schnellzugriff-Leiste – nur mobil (per Media-Query eingeblendet). */
.mobilebar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:40;
  align-items:center;justify-content:space-around;gap:.4rem;
  padding:.35rem .6rem;background:rgba(16,18,22,.97);
  border-top:1px solid var(--smoke);backdrop-filter:blur(6px);}
.mobilebar .mbtn{position:relative;color:var(--bone-dim);text-decoration:none;
  font-size:1.35rem;line-height:1;padding:.25rem .5rem;}
.mobilebar .mbtn.active{color:var(--brass);}
.mobilebar .mclock{font-family:"Oswald",sans-serif;font-size:1.05rem;font-weight:600;
  letter-spacing:.05em;color:var(--bone);display:flex;flex-direction:column;
  align-items:center;line-height:1.05;}
.mobilebar .mclock small{font-size:.5rem;letter-spacing:.12em;color:var(--bone-dim);}
.mobilebar .bell-badge{position:absolute;top:-.15rem;right:-.05rem;background:var(--oxblood);
  color:#fff;font-size:.6rem;font-family:"Oswald",sans-serif;min-width:1.1em;height:1.1em;
  padding:0 .2em;border-radius:1em;display:flex;align-items:center;justify-content:center;line-height:1;}

@media (max-width:760px){
  .topbar{gap:.6rem .8rem;padding:.6rem .8rem;}
  .topbar .brand{flex:0 0 auto;margin-right:auto;font-size:1rem;letter-spacing:0;}
  .topbar .brand .brandtext{display:none;}
  .topbar .brand .brandmark{display:block;width:1.65rem;height:1.65rem;border-radius:4px;}
  .navtoggle{display:block;order:2;}
  .topbar nav{order:5;flex-basis:100%;flex-direction:column;gap:.2rem;display:none;}
  .topbar.navopen nav{display:flex;}
  .topbar nav>a{padding:.5rem .2rem;border-bottom:1px solid #20232a;}
  .navgroup{display:block;}
  .navgroup-btn{padding:.5rem .2rem;width:100%;text-align:left;}
  .navgroup-menu{position:static;display:none;border:none;box-shadow:none;padding:.1rem 0 .3rem .8rem;background:none;min-width:0;}
  .navgroup.show .navgroup-menu{display:flex;}
  .topbar nav .navgroup{border-bottom:1px solid #20232a;}
  .topbar nav .langgroup{margin-left:0;}
  .topbar .purse{order:3;font-size:.75rem;gap:.7rem;}
  .topbar .purse .pitem .k{display:none;}
  .topbar .purse .pitem::before{margin-right:.2rem;}
  .topbar .purse .pitem.cash::before{content:"\1F4B5";}
  .topbar .purse .pitem.chips::before{content:"";display:inline-block;width:.95em;height:.95em;vertical-align:-.15em;background-repeat:no-repeat;background-size:contain;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23c8a04a'/><circle cx='12' cy='12' r='7.5' fill='none' stroke='%230a0b0d' stroke-width='2' stroke-dasharray='3 2.2'/><circle cx='12' cy='12' r='3.2' fill='%230a0b0d'/></svg>");}
  .topbar .purse .pitem.heat::before{content:"\1F6A8";}
  .topbar .bell{display:none;}
  .topbar .topclock{display:none;}
  .topbar nav .admin-navitem{display:block;padding:.5rem .2rem;border-bottom:1px solid #20232a;}
  .mobilebar{display:flex;}
  .wrap{padding:1rem .8rem 4.2rem;}
  .wrap h1{font-size:1.2rem;}
  .panel{overflow-x:auto;}
  .ltable{font-size:.82rem;min-width:0;}
  .ltable th,.ltable td{padding:.45rem .5rem;}
  .grid2{grid-template-columns:1fr!important;}
  .btn-sm{padding:.45rem .7rem;}
}

/* Bereichs-Hintergrundbilder (Dateien unter /assets/bg/<bereich>.jpg) */
body[data-area]{background-attachment:fixed;background-size:cover;background-position:center;}
body[data-area]::before{content:"";position:fixed;inset:0;background:rgba(10,11,13,.86);z-index:-1;pointer-events:none;}
body[data-area="map"]{background-image:url('/assets/bg/map.jpg');}
body[data-area="actions"]{background-image:url('/assets/bg/actions.jpg');}
body[data-area="crew"]{background-image:url('/assets/bg/crew.jpg');}
body[data-area="shop"]{background-image:url('/assets/bg/shop.jpg');}
body[data-area="market"]{background-image:url('/assets/bg/market.jpg');}
body[data-area="fence"]{background-image:url('/assets/bg/fence.jpg');}
body[data-area="raid"]{background-image:url('/assets/bg/raid.jpg');}
body[data-area="lab"]{background-image:url('/assets/bg/lab.jpg');}
body[data-area="cyber"]{background-image:url('/assets/bg/cyber.jpg');}
body[data-area="bank"]{background-image:url('/assets/bg/bank.jpg');}
body[data-area="hq"]{background-image:url('/assets/bg/hq.jpg');}
body[data-area="syndicate"]{background-image:url('/assets/bg/syndicate.jpg');}
body[data-area="territory"]{background-image:url('/assets/bg/territory.jpg');}

/* Bereichs-Hintergrundbilder (Dateien unter /assets/bg/<bereich>.jpg, sonst default.jpg) */
body[data-area]{background-image:url('/assets/bg/default.jpg');background-attachment:fixed;background-size:cover;background-position:center;}
body[data-area]::before{content:"";position:fixed;inset:0;background:rgba(10,11,13,.86);z-index:-1;pointer-events:none;}
body[data-area="map"]{background-image:url('/assets/bg/map.jpg'),url('/assets/bg/default.jpg');}
body[data-area="actions"]{background-image:url('/assets/bg/actions.jpg'),url('/assets/bg/default.jpg');}
body[data-area="crew"]{background-image:url('/assets/bg/crew.jpg'),url('/assets/bg/default.jpg');}
body[data-area="shop"]{background-image:url('/assets/bg/shop.jpg'),url('/assets/bg/default.jpg');}
body[data-area="market"]{background-image:url('/assets/bg/market.jpg'),url('/assets/bg/default.jpg');}
body[data-area="fence"]{background-image:url('/assets/bg/fence.jpg'),url('/assets/bg/default.jpg');}
body[data-area="raid"]{background-image:url('/assets/bg/raid.jpg'),url('/assets/bg/default.jpg');}
body[data-area="lab"]{background-image:url('/assets/bg/lab.jpg'),url('/assets/bg/default.jpg');}
body[data-area="cyber"]{background-image:url('/assets/bg/cyber.jpg'),url('/assets/bg/default.jpg');}
body[data-area="bank"]{background-image:url('/assets/bg/bank.jpg'),url('/assets/bg/default.jpg');}
body[data-area="hq"]{background-image:url('/assets/bg/hq.jpg'),url('/assets/bg/default.jpg');}
body[data-area="syndicate"]{background-image:url('/assets/bg/syndicate.jpg'),url('/assets/bg/default.jpg');}
body[data-area="territory"]{background-image:url('/assets/bg/territory.jpg'),url('/assets/bg/default.jpg');}
body[data-area="chips"]{background-image:url('/assets/bg/chips.jpg'),url('/assets/bg/default.jpg');}
body[data-area="casino"]{background-image:url('/assets/bg/casino.jpg'),url('/assets/bg/default.jpg');}

/* HQ-Skins (Premium) */
.hqskin{position:relative;padding:1.1rem 1.2rem 1.4rem;border-radius:6px;border:1px solid transparent;}
.hqskin::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;border-radius:6px 6px 0 0;}
.hqskin .panel{transition:border-color .2s;}
.hqskin h1,.hqskin h2{letter-spacing:.02em;}

.hqskin.skin-noir{background:linear-gradient(180deg,rgba(20,21,24,.82),rgba(12,13,15,.82));border-color:#3a3d44;}
.hqskin.skin-noir::before{background:#8b8f98;}
.hqskin.skin-noir h1{color:#f2f2f4;text-shadow:0 2px 10px rgba(0,0,0,.6);}
.hqskin.skin-noir .panel{border-color:#4a4e56;background:rgba(24,26,30,.9);}

.hqskin.skin-gold{background:linear-gradient(180deg,rgba(40,32,10,.8),rgba(15,13,9,.85));border-color:#6b571f;box-shadow:0 0 40px -12px rgba(200,160,74,.35) inset;}
.hqskin.skin-gold::before{background:linear-gradient(90deg,#a07d2e,#e6c368,#a07d2e);}
.hqskin.skin-gold h1,.hqskin.skin-gold h2{color:#e6c368;text-shadow:0 0 14px rgba(200,160,74,.35);}
.hqskin.skin-gold .panel{border-color:#7d6524;background:rgba(30,25,10,.85);}
.hqskin.skin-gold .v{color:#e6c368!important;}

.hqskin.skin-blood{background:linear-gradient(180deg,rgba(40,12,12,.82),rgba(14,9,9,.85));border-color:#5a1f1f;box-shadow:0 0 40px -14px rgba(180,40,40,.4) inset;}
.hqskin.skin-blood::before{background:linear-gradient(90deg,#7c2f37,#c0453f,#7c2f37);}
.hqskin.skin-blood h1,.hqskin.skin-blood h2{color:#d8564f;text-shadow:0 0 14px rgba(180,40,40,.4);}
.hqskin.skin-blood .panel{border-color:#6f2626;background:rgba(32,12,12,.85);}

.hqskin.skin-steel{background:linear-gradient(180deg,rgba(18,24,30,.85),rgba(10,13,16,.88));border-color:#3d4a57;box-shadow:0 0 40px -14px rgba(120,160,200,.35) inset;}
.hqskin.skin-steel::before{background:linear-gradient(90deg,#5b7a94,#9fb3c8,#5b7a94);}
.hqskin.skin-steel h1,.hqskin.skin-steel h2{color:#bcd0e4;text-shadow:0 0 14px rgba(120,160,200,.4);}
.hqskin.skin-steel .panel{border-color:#48586a;background:rgba(18,24,30,.9);}
.hqskin.skin-steel .v{color:#bcd0e4!important;}

/* Skins global (body[data-skin]) */
body[data-skin="gold"]  h1,body[data-skin="gold"]  h2,body[data-skin="gold"]  h3{color:#e6c368;}
body[data-skin="gold"]  .panel{border-color:#7d6524;}
body[data-skin="gold"]  .btn-sm,body[data-skin="gold"]  button[type=submit]{border-color:#a07d2e;color:#e6c368;}
body[data-skin="gold"]  .inp:focus,body[data-skin="gold"]  input:focus,body[data-skin="gold"]  select:focus,body[data-skin="gold"]  textarea:focus{border-color:#e6c368;box-shadow:0 0 0 2px rgba(200,160,74,.2);}
body[data-skin="gold"]  .topbar{border-bottom:2px solid #a07d2e;}

body[data-skin="blood"] h1,body[data-skin="blood"] h2,body[data-skin="blood"] h3{color:#d8564f;}
body[data-skin="blood"] .panel{border-color:#6f2626;}
body[data-skin="blood"] .btn-sm,body[data-skin="blood"] button[type=submit]{border-color:#7c2f37;color:#d8564f;}
body[data-skin="blood"] .inp:focus,body[data-skin="blood"] input:focus,body[data-skin="blood"] select:focus,body[data-skin="blood"] textarea:focus{border-color:#c0453f;box-shadow:0 0 0 2px rgba(180,40,40,.2);}
body[data-skin="blood"] .topbar{border-bottom:2px solid #7c2f37;}

body[data-skin="steel"] h1,body[data-skin="steel"] h2,body[data-skin="steel"] h3{color:#bcd0e4;}
body[data-skin="steel"] .panel{border-color:#48586a;}
body[data-skin="steel"] .btn-sm,body[data-skin="steel"] button[type=submit]{border-color:#5b7a94;color:#bcd0e4;}
body[data-skin="steel"] .inp:focus,body[data-skin="steel"] input:focus,body[data-skin="steel"] select:focus,body[data-skin="steel"] textarea:focus{border-color:#9fb3c8;box-shadow:0 0 0 2px rgba(120,160,200,.2);}
body[data-skin="steel"] .topbar{border-bottom:2px solid #5b7a94;}

body[data-skin="noir"]  h1,body[data-skin="noir"]  h2,body[data-skin="noir"]  h3{color:#f2f2f4;}
body[data-skin="noir"]  .panel{border-color:#4a4e56;}
body[data-skin="noir"]  .btn-sm,body[data-skin="noir"]  button[type=submit]{border-color:#8b8f98;color:#f2f2f4;}
body[data-skin="noir"]  .topbar{border-bottom:2px solid #8b8f98;}

/* Skins: breitere Wirkung */
body[data-skin]      .ltable thead th{border-bottom:1px solid rgba(255,255,255,.08);}
body[data-skin="steel"] .panel{background:rgba(18,24,30,.55);}
body[data-skin="steel"] .ltable th{color:#9fb3c8;}
body[data-skin="steel"] .tabs a.active{border-color:#5b7a94;color:#bcd0e4;}
body[data-skin="steel"] h1{color:#bcd0e4;}
body[data-skin="gold"]  .panel{background:rgba(30,25,10,.5);}
body[data-skin="gold"]  .ltable th{color:#caa64a;}
body[data-skin="gold"]  .tabs a.active{border-color:#a07d2e;color:#e6c368;}
body[data-skin="gold"]  h1{color:#e6c368;}
body[data-skin="blood"] .panel{background:rgba(32,12,12,.5);}
body[data-skin="blood"] .ltable th{color:#c0453f;}
body[data-skin="blood"] .tabs a.active{border-color:#7c2f37;color:#d8564f;}
body[data-skin="blood"] h1{color:#d8564f;}
body[data-skin="noir"]  .panel{background:rgba(24,26,30,.6);}
body[data-skin="noir"]  h1{color:#f2f2f4;}