/* Confetti Overlay (z.B. nach Gildenbeitritt) */
#confettiOverlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:99999;
}

.confetti-piece{
  position:absolute;
  left: var(--x, 50vw);
  top: -12vh;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  background: hsl(var(--h, 42) 80% 60%);
  transform: translate3d(0,0,0) rotate(0deg);
  animation: confetti-fall var(--dur, 1400ms) linear forwards;
  animation-delay: var(--delay, 0ms);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.25));
}

@keyframes confetti-fall{
  0%{ transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
  100%{ transform: translate3d(var(--dx, 0px), 118vh, 0) rotate(720deg); opacity: 0; }
}
:root{
  --bg:#0b1020;
  --card:#121a33;
  --muted:#9fb0d0;
  --text:#e7eeff;
  --line:rgba(255,255,255,.08);
  --accent:#7c5cff;
  --accent2:#2dd4bf;
  --danger:#ff5577;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,#070a14 0%, #0b1020 40%, #070a14 100%);
  color:var(--text);
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 18px;
  background:rgba(10,14,28,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800;letter-spacing:.5px}
.nav{display:flex;gap:14px;align-items:center}
.container{
  display:grid;
  grid-template-columns: 280px 1fr;
  gap:18px;
  padding:18px;
  max-width:1200px;
  margin:0 auto;
}
@media (max-width: 900px){
  .container{grid-template-columns:1fr}
  .sidebar{order:2}
}
.card{
  background:rgba(18,26,51,.92);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card-title{
  font-weight:700;
  margin-bottom:10px;
}
.flash{
  max-width:1200px;
  margin:14px auto 0;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--line);
}
.flash.success{background:rgba(45,212,191,.12)}
.flash.error{background:rgba(255,85,119,.12); border-color:rgba(255,85,119,.25)}
.muted{color:var(--muted)}
.small{font-size:12px;line-height:1.35}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width: 900px){.grid2{grid-template-columns:1fr}}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent) 0%, #4c37ff 100%);
  color:white;
  border:0;
  font-weight:700;
  cursor:pointer;
}
.btn.secondary{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.btn.small{padding:7px 10px;border-radius:10px;font-weight:700;font-size:12px}
.form{display:grid;gap:10px}
.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label{display:grid;gap:6px}
input,select{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  color:var(--text);
  outline:none;
}
input:focus,select:focus{border-color:rgba(124,92,255,.6)}
.table{width:100%;border-collapse:collapse}
.table th,.table td{
  text-align:left;
  padding:10px 8px;
  border-bottom:1px solid var(--line);
}
.table th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.sep{border:0;border-top:1px solid var(--line);margin:12px 0}
.inline{display:inline}
.linkbtn{
  background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;padding:0
}
.res{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  padding:8px 10px;border-radius:999px
}


/* v1.6: bessere Lesbarkeit im Bau-Menü (Select/Option) */
select{
  font-size: 14px;
  min-width: 320px;
}
select option{
  background: rgba(18,26,51,1);
  color: var(--text);
}


/* v1.7 Battle UI */
.battle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width: 900px){.battle-grid{grid-template-columns:1fr}}
.battle-card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:12px}
.battle-name{font-weight:800;margin-bottom:8px}
.battle-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
@media (max-width: 600px){.battle-units{grid-template-columns:1fr}}
.battle-unit{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.12)}
.battle-unit input{width:100%}
.battle-bar{height:10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);overflow:hidden;margin-top:10px}
.battle-bar-fill{height:100%;background:linear-gradient(135deg,var(--accent2),var(--accent))}
.battle-log{display:grid;gap:10px}
.battle-log-line{padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.10)}
.battle-winner{margin-top:10px;font-weight:800}
.battle-sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}


/* Version badge */
.badge{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  margin-left:8px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--text);
}


/* Modal (Diamanten kaufen) */
.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}
.modal-panel{
  position:relative;
  max-width:720px;
  margin:6vh auto;
  background:rgba(18,26,51,.97);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  padding:14px;
}
.modal-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.modal-title{font-weight:900;font-size:18px}
.modal-close{background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:8px 10px;cursor:pointer}
.packages{display:grid;gap:10px;margin-top:12px}
.pkg{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.12)}
.pkg-title{font-weight:900}
.pkg-right{display:flex;align-items:center;gap:10px}
.pkg-price{font-weight:900}
.modal-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:12px}
@media (max-width: 700px){
  .modal-panel{margin:3vh 12px}
  .pkg{flex-direction:column;align-items:flex-start}
  .pkg-right{width:100%;justify-content:space-between}
  .modal-footer{flex-direction:column;align-items:flex-start}
}

@media (max-width: 700px){
  .intro-panel{margin:4vh 12px}
}


/* v2.5 Bau-Slots UI */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
@media (max-width: 900px){.slots{grid-template-columns:1fr}}
.slot{border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(0,0,0,.12)}
.slot.locked{opacity:.7}
.slot-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}

.slot-job{display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.slot-job-img{width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
.slot-job-img img{width:40px;height:40px;display:block}
.slot-job-meta{min-width:0;flex:1}


/* v2.6 Schnellbau Button */
.slot button{margin-top:8px}


/* v3.0 – Landforge Branding (Logo-Stil) */
:root{
  --bg1:#0b0f14;
  --bg2:#101823;
  --card:#141a21;
  --muted:#b8c0cf;
  --text:#f3f1ea;
  --line:rgba(255,255,255,.10);
  --accent:#d6a84f;     /* gold */
  --accent2:#4aa36b;    /* green */
  --danger:#ff5577;
}

body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(214,168,79,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(74,163,107,.18), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
}

.topbar{
  background:rgba(12,16,22,.88);
  border-bottom:1px solid rgba(214,168,79,.20);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.logo{
  height:34px;
  width:auto;
  image-rendering:auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.45));
}
.brand-name{
  font-weight:900;
  letter-spacing:.4px;
}

.badge{
  background:rgba(214,168,79,.14);
  border-color:rgba(214,168,79,.30);
  color:var(--text);
}

a{color:var(--accent)}
a:hover{color:#f2cf7b}

.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08)),
    rgba(20,26,33,.92);
  border:1px solid rgba(255,255,255,.10);
}

.card-title{
  font-weight:900;
  letter-spacing:.2px;
}

.btn{
  background:linear-gradient(135deg, var(--accent) 0%, #b67b1f 100%);
  color:#121212;
}
.btn.secondary{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(214,168,79,.18);
  color:var(--text);
}
.btn.secondary:hover{border-color:rgba(214,168,79,.35)}

input,select{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}

select option{
  background: rgba(20,26,33,1);
  color: var(--text);
}

.flash.success{background:rgba(74,163,107,.14)}
.flash.error{background:rgba(255,85,119,.14); border-color:rgba(255,85,119,.25)}


/* Toasts */
#toastWrap{
  position:fixed;
  right:16px;
  top:16px;
  display:grid;
  gap:10px;
  z-index:9999;
}
.toast{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(20,26,33,.96);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  opacity:0;
  transform: translateY(-6px);
  transition: all .2s ease;
  max-width: 340px;
  font-weight:800;
}
.toast.show{opacity:1; transform: translateY(0)}
.toast.success{border-color: rgba(74,163,107,.35)}
.toast.error{border-color: rgba(255,85,119,.35)}

.toast-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}
.toast-btn{
  border:1px solid rgba(214,168,79,.35);
  background: rgba(0,0,0,.25);
  color: var(--text);
  border-radius: 12px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.toast-btn:hover{ filter: brightness(1.08); }


/* v3.9 Suspended Overlay */
#suspendedOverlay{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.suspended-card{
  max-width:640px;
  width:100%;
  border-radius:18px;
  border:1px solid rgba(214,168,79,.28);
  background:
    radial-gradient(800px 380px at 20% 0%, rgba(214,168,79,.18), transparent 60%),
    rgba(20,26,33,.96);
  padding:18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.suspended-title{
  font-weight:900;
  font-size:22px;
  margin-bottom:10px;
}
.suspended-text{
  line-height:1.45;
  margin-top:8px;
}


/* v4.1 Auth / Landing Hero */
.auth-hero{
  position:relative;
  min-height:100vh;
  width:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.auth-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(214,168,79,.22), transparent 62%),
    radial-gradient(900px 520px at 80% 20%, rgba(74,163,107,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.82));
}
.auth-shell{
  position:relative;
  z-index:2;
  width:min(980px, 100%);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 900px){
  .auth-shell{grid-template-columns:1fr}
}
.auth-brand{
  padding:8px;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}
.auth-logo{
  width:min(420px, 100%);
  height:auto;
  display:block;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
}
.auth-title{
  font-weight: 1000;
  font-size: clamp(28px, 3.2vw, 44px);
  margin-top: 10px;
  letter-spacing:.4px;
}
.auth-subtitle{
  color: rgba(243,241,234,.90);
  margin-top: 8px;
  line-height:1.5;
  max-width: 52ch;
}
.auth-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 260px at 30% 0%, rgba(214,168,79,.14), transparent 70%),
    rgba(20,26,33,.92);
  padding:16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}
.auth-card .card{background:transparent;border:none;padding:0;box-shadow:none}


/* v4.3 Real Landing (Fullscreen, ohne Topbar) */
body.is-landing{margin:0}
.landing{
  position:relative;
  min-height:100vh;
  width:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  padding:24px;
}
.landing-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 460px at 20% 10%, rgba(214,168,79,.22), transparent 62%),
    radial-gradient(1000px 520px at 85% 18%, rgba(74,163,107,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.86));
}
.landing-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
}
.landing-logo{
  height:44px;
  width:auto;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
}
.landing-ver{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(214,168,79,.30);
  background:rgba(214,168,79,.14);
  font-weight:900;
}
.landing-shell{
  position:relative;
  z-index:2;
  margin-top: clamp(18px, 5vh, 44px);
  width:min(1100px, 100%);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:center;
}
@media (max-width: 980px){
  .landing-shell{grid-template-columns:1fr}
}
.landing-left h1{
  font-size: clamp(34px, 4vw, 54px);
  margin:0 0 10px 0;
  font-weight:1000;
}
.landing-left p{
  color: rgba(243,241,234,.92);
  line-height:1.5;
  max-width: 56ch;
}
.landing-bullets{
  margin:14px 0 0 18px;
  color: rgba(243,241,234,.88);
  line-height:1.55;
}
.landing-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 260px at 30% 0%, rgba(214,168,79,.14), transparent 70%),
    rgba(20,26,33,.92);
  padding:16px;
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}


/* v4.4 Medieval Landing */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=MedievalSharp&display=swap');

body.is-landing{
  font-family: 'Cinzel','MedievalSharp', Georgia, serif;
  letter-spacing: .2px;
}

.landing-left h1{
  font-family: 'Cinzel','MedievalSharp', Georgia, serif;
}

.lead{
  font-size: 18px;
  color: rgba(243,241,234,.94);
  max-width: 62ch;
}

.ribbon{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid rgba(214,168,79,.34);
  background: rgba(214,168,79,.14);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .9px;
  margin-bottom: 12px;
}

.feature-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){
  .feature-grid{grid-template-columns:1fr}
}
.feature{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(20,26,33,.68);
  padding:12px;
}
.feature-title{
  font-weight: 900;
  margin-bottom: 6px;
  color: rgba(243,241,234,.98);
}
.feature-text{
  color: rgba(243,241,234,.84);
  line-height: 1.45;
}

.quote{
  margin-top:16px;
  padding:12px;
  border-left: 3px solid rgba(214,168,79,.55);
  background: rgba(0,0,0,.18);
  border-radius: 12px;
  color: rgba(243,241,234,.92);
  line-height: 1.5;
}

.landing-top{
  justify-content:space-between;
}
.landing-top-links{
  display:flex;
  gap:16px;
  position:relative;
  z-index:2;
}
.landing-link{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(214,168,79,.95);
}
.landing-link:hover{color:#f2cf7b}

.landing-card .card-title{
  font-family: 'Cinzel','MedievalSharp', Georgia, serif;
  font-size: 20px;
}

.btn-medieval{
  font-family: 'Cinzel','MedievalSharp', Georgia, serif;
  text-transform: uppercase;
  letter-spacing: .6px;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.btn.btn-medieval{
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(214,168,79,1) 0%, rgba(182,123,31,1) 100%);
}
.btn.secondary.btn-medieval{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(214,168,79,.20);
}

.card-seal{
  margin-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:12px;
}
.seal-title{
  font-weight: 900;
  margin-bottom: 6px;
  color: rgba(214,168,79,.95);
  text-transform: uppercase;
  letter-spacing: .7px;
}

.landing-footer{
  position:relative;
  z-index:2;
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:16px;
  color: rgba(243,241,234,.72);
  font-size: 13px;
}
.footer-right{
  text-align:right;
  color: rgba(214,168,79,.85);
  font-weight: 900;
}


/* v4.5 Frame + Footer + Wow */
.landing{padding:28px}
.landing-frame{
  position:relative;
  z-index:2;
  width:min(1180px, 100%);
  margin:0 auto;
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(214,168,79,.32);
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.38)),
    rgba(10,12,16,.35);
  box-shadow: 0 30px 90px rgba(0,0,0,.60);
}
.landing-frame:before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.landing-frame:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 22px;
  pointer-events:none;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(214,168,79,.12), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(74,163,107,.10), transparent 60%);
  mix-blend-mode: screen;
  opacity:.75;
}

.landing-top{justify-content:center}
.landing-logo.big{height:72px}
@media (max-width: 720px){
  .landing-logo.big{height:58px}
}

.lore{
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.lore-title{
  font-weight: 900;
  color: rgba(214,168,79,.95);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 8px;
}
.lore-text{
  color: rgba(243,241,234,.88);
  line-height: 1.55;
}

.landing-footer-panel{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,16,.70);
  padding: 16px;
}
.footer-cols{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .footer-cols{grid-template-columns:1fr 1fr}
}
@media (max-width: 620px){
  .footer-cols{grid-template-columns:1fr}
}
.footer-head{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 8px;
  color: rgba(214,168,79,.92);
}
.footer-text{
  color: rgba(243,241,234,.76);
  line-height: 1.45;
}
.footer-link{
  display:block;
  padding: 6px 0;
  color: rgba(243,241,234,.78);
  text-decoration:none;
}
.footer-link:hover{color:#f2cf7b}
.footer-bottom{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(243,241,234,.68);
  font-size: 13px;
}
.footer-bottom .footer-right{
  color: rgba(214,168,79,.85);
  font-weight: 900;
}


/* v4.7 Modal Theme + Frame Glow */
.landing-frame{
  box-shadow:
    0 30px 90px rgba(0,0,0,.60),
    0 0 0 1px rgba(214,168,79,.10),
    0 0 38px rgba(214,168,79,.18);
}
.landing-frame:after{
  opacity:.95;
}

/* Modal an Landforge-Stil anpassen */
.modal-backdrop{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(214,168,79,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.82));
}

.modal-panel{
  border-radius: 18px;
  border: 1px solid rgba(214,168,79,.28);
  background:
    radial-gradient(520px 260px at 30% 0%, rgba(214,168,79,.14), transparent 70%),
    rgba(20,26,33,.96);
  box-shadow: 0 26px 80px rgba(0,0,0,.65), 0 0 40px rgba(214,168,79,.14);

  /* Global Modal Sizing: muss auf 1920x1080 sauber passen */
  width: min(1100px, calc(100vw - 80px));
  max-width: 1100px;
  max-height: min(900px, calc(100vh - 120px));
  margin: 4vh auto;
  display: flex;
  flex-direction: column;
}

/* Standard Content Area: wenn Inhalt größer ist, sauber scrollen */
.modal-body{
  margin-top: 10px;
  overflow: auto;
}

.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-bottom: 10px;
}
.modal-title{
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 900;
  letter-spacing: .5px;
}
.modal-close{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(214,168,79,.22);
  color: var(--text);
  border-radius: 14px;
}
.modal-close:hover{border-color: rgba(214,168,79,.38)}
.modal-panel .form label{
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: .2px;
}
.modal-panel input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.modal-panel input:focus{
  outline:none;
  border-color: rgba(214,168,79,.40);
  box-shadow: 0 0 0 4px rgba(214,168,79,.12);
}


/* v4.9 Landing Flash Messages */
.landing-flash{
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100000;
  width: min(720px, calc(100% - 24px));
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,26,33,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  font-weight: 900;
}
.landing-flash.success{border-color: rgba(74,163,107,.40)}
.landing-flash.error{border-color: rgba(255,85,119,.40)}


/* v5.2 Loading Screen */
.load-screen{
  position:relative;
  min-height:100vh;
  width:100%;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.load-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1000px 460px at 20% 10%, rgba(214,168,79,.20), transparent 62%),
    radial-gradient(1000px 520px at 85% 18%, rgba(74,163,107,.16), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.68), rgba(0,0,0,.86));
}
.load-frame{
  position:relative;
  z-index:2;
  width:min(760px, 100%);
  border-radius: 22px;
  padding: 18px;
  border: 1px solid rgba(214,168,79,.32);
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(214,168,79,.12), transparent 60%),
    rgba(10,12,16,.62);
  box-shadow: 0 30px 90px rgba(0,0,0,.60), 0 0 42px rgba(214,168,79,.14);
  text-align:center;
}
.load-logo{
  height:72px;
  width:auto;
  margin: 4px auto 10px auto;
  filter: drop-shadow(0 18px 38px rgba(0,0,0,.55));
}
.load-title{
  font-weight:1000;
  font-size: 22px;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.load-story{
  min-height: 56px;
  color: rgba(243,241,234,.90);
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.load-bar-wrap{
  margin-top: 14px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.load-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(214,168,79,1), rgba(74,163,107,1));
  box-shadow: 0 0 18px rgba(214,168,79,.25);
}
.load-meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}


/* v5.7 Intro Modal */
.intro-panel{
  max-width: 860px;
  margin: 7vh auto;
  border: 1px solid rgba(214,168,79,.36);
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(214,168,79,.18), transparent 70%),
    radial-gradient(700px 320px at 80% 0%, rgba(155,95,42,.14), transparent 70%),
    linear-gradient(180deg, rgba(27,20,12,.96), rgba(14,16,20,.96));
  box-shadow:
    0 0 0 1px rgba(214,168,79,.18),
    0 18px 70px rgba(0,0,0,.70),
    0 0 26px rgba(214,168,79,.18);
}
.intro-panel .modal-title{
  font-size: 22px;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 0 22px rgba(214,168,79,.20);
}
.story-scroll{
  max-height: 52vh;
  overflow:auto;
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.story-scroll p{
  margin: 0 0 10px 0;
  line-height: 1.55;
  color: rgba(243,241,234,.90);
}
.story-scroll p.muted{color: rgba(243,241,234,.72)}
.story-quote{
  margin: 10px 0 12px 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(214,168,79,.65);
  background: rgba(214,168,79,.08);
  border-radius: 12px;
  font-style: italic;
}
.story-scroll::-webkit-scrollbar{width: 10px}
.story-scroll::-webkit-scrollbar-thumb{
  background: rgba(214,168,79,.30);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.30);
}
.story-scroll::-webkit-scrollbar-track{background: rgba(0,0,0,.18); border-radius: 12px}



/* v5.8 Game Header Resource Bar */
.resource-bar{
  border-radius:18px;
  border:1px solid rgba(214,168,79,.28);
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(214,168,79,.12), transparent 60%),
    rgba(10,12,16,.58);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 14px;
}
.rb-items{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:center;
}
.rb-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  font-weight: 900;
}
.rb-ico{height:16px;width:16px;opacity:.92}
.rb-diamonds{border-color: rgba(214,168,79,.22)}
.rb-buy{
  margin-left:4px;
  width:22px;height:22px;
  border-radius:999px;
  border:1px solid rgba(214,168,79,.28);
  background: rgba(214,168,79,.16);
  color: var(--text);
  font-weight: 900;
}
.rb-buy:hover{border-color: rgba(214,168,79,.40)}
.rb-epoch-name{font-weight:1000;font-size:16px;letter-spacing:.4px}
.rb-right{display:flex;justify-content:flex-end;min-width: 180px}
@media (max-width: 980px){
  .resource-bar{flex-direction:column; align-items:stretch}
  .rb-right{justify-content:flex-start}
}

/* v5.8 Build Tabs */
.build-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.build-tabs .tab{
  border-radius:999px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(243,241,234,.88);
  font-weight: 900;
  cursor:pointer;
}
.build-tabs .tab.active{
  border-color: rgba(214,168,79,.32);
  background: rgba(214,168,79,.14);
  color: var(--text);
}
.build-panels{margin-top:12px}
.tab-panel{display:none}
.tab-panel.active{
  display:block;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding:12px;
}


/* v5.9 Chat UI */
.chat-card{position:sticky; top:88px}
.chat-box{
  height: 280px;
  overflow:auto;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  margin-top: 10px;
  margin-bottom: 10px;
}
.chat-msg{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:8px;
  align-items:baseline;
  padding:6px 6px;
  border-bottom: 1px dashed rgba(255,255,255,.08);
}
.chat-msg:last-child{border-bottom:none}
.chat-user{font-weight:1000; color: rgba(214,168,79,.92)}
.chat-text{color: rgba(243,241,234,.88); line-height:1.35}
.chat-time{color: rgba(243,241,234,.55); font-size:12px}
.chat-form{
  display:flex;
  gap:8px;
  align-items:center;
}
.chat-form input{
  flex:1;
  border-radius: 14px;
  padding: 10px 12px;
}

/* Small UI polish */
.col.side .card{backdrop-filter: blur(6px)}


/* v6.0 Game Layout (mehr wie klassisches Browsergame) */
.hud-top{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:10px 14px;
  background:rgba(12,16,22,.92);
  border-bottom:1px solid rgba(214,168,79,.22);
  backdrop-filter: blur(8px);
}
.hud-brand{display:flex; align-items:center; gap:10px}
.hud-brand .logo{height:32px}
.hud-brand .brand-name{font-weight:1000; letter-spacing:.4px}
.hud-nav{display:flex; gap:14px; flex-wrap:wrap}
.hud-nav a{color: rgba(214,168,79,.95); font-weight:900; text-transform:uppercase; letter-spacing:.6px}
.hud-nav a:hover{color:#f2cf7b}
.hud-resource{padding: 10px 14px}

.game-shell{
  display:grid;
  grid-template-columns: 64px 1fr 320px;
  gap: 14px;
  padding: 0 14px;
  padding-bottom: 12px;
}
@media (max-width: 1100px){
  .game-shell{grid-template-columns: 64px 1fr}
  .right-panel{display:none}
}
.side-nav{
  position:sticky;
  top: 68px;
  height: calc(100vh - 68px - 220px);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.side-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  font-size:20px;
}
.side-btn:hover{border-color: rgba(214,168,79,.35); background: rgba(214,168,79,.10)}
.game-main{min-width:0}
.right-panel .card{position:sticky; top: 88px}

.bottom-dock{
  position:sticky;
  bottom:0;
  z-index: 900;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:14px;
  padding: 12px 14px;
  background: rgba(10,12,16,.88);
  border-top: 1px solid rgba(214,168,79,.22);
  backdrop-filter: blur(10px);
}
@media (max-width: 1100px){
  .bottom-dock{grid-template-columns:1fr}
}
.dock-title{
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(214,168,79,.92);
  margin-bottom: 8px;
}
.dock-mini{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
.dock-buttons{display:flex; flex-wrap:wrap; gap:8px}
.dock-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  color: rgba(243,241,234,.90);
  text-decoration:none;
  font-weight:900;
}
.dock-pill:hover{border-color: rgba(214,168,79,.35); background: rgba(214,168,79,.10)}

.dock-chat{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 12px;
}
.dock-chat .chat-box{height: 180px; margin:0 0 10px 0}
.chat-card{position:static; top:auto} /* override old */

/* World view (Center scene) */
.world-view{
  position:relative;
  height: 340px;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background-size:cover;
  background-position:center;
  margin-bottom: 14px;
}
.world-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 380px at 20% 10%, rgba(214,168,79,.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.62));
}
.world-hud{
  position:absolute;
  left:14px; top:14px;
  z-index:2;
  padding: 10px 12px;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
}
.world-title{
  font-weight: 1000;
  letter-spacing: .4px;
}
.world-pins{
  position:absolute;
  right:14px; bottom:14px;
  display:flex;
  gap:10px;
  z-index:2;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pin{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(214,168,79,.26);
  background: rgba(10,12,16,.55);
  color: rgba(243,241,234,.92);
  text-decoration:none;
  font-weight: 1000;
}
.pin span{font-size:13px; letter-spacing:.3px}
.pin:hover{border-color: rgba(214,168,79,.40)}


.resource-bar{margin-bottom:0}


/* v6.1 HUD Compact + 1080p Scale */
:root{
  --ui-font: 14px;
}
body{font-size: var(--ui-font);}

.hud-top{
  padding: 8px 12px;
}
.hud-brand .logo{height:28px}
.hud-nav a{font-size:12px}
.hud-actions .btn.small{padding:6px 10px}

.hud-resources{
  flex: 1;
  display:flex;
  justify-content:center;
  min-width: 480px;
}

.resource-strip{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
}
.rs-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-weight: 900;
  line-height: 1;
}
.rs-ico{height:14px;width:14px;opacity:.95}
.rs-epoch{
  border-color: rgba(214,168,79,.22);
  background: rgba(214,168,79,.10);
}
.rs-label{font-weight:1000; letter-spacing:.35px}
.rs-sub{margin-left:4px}
.rs-diamonds{border-color: rgba(214,168,79,.24)}
.rs-buy{
  width:20px;height:20px;
  border-radius:999px;
  border:1px solid rgba(214,168,79,.28);
  background: rgba(214,168,79,.16);
  color: var(--text);
  font-weight: 1000;
}
.rs-pop{opacity:.92}

.game-shell{
  grid-template-columns: 56px 1fr 300px;
  gap: 12px;
  padding: 0 12px;
}
.side-btn{height:40px; border-radius:12px; font-size:18px}

.world-view{height: 300px}
.world-hud{padding: 8px 10px}
.pin{padding:8px 10px}

.bottom-dock{
  padding: 10px 12px;
  gap: 12px;
}
.dock-chat .chat-box{height: 160px}
.chat-msg{grid-template-columns:auto 1fr auto}


/* v6.2 Medieval Game Redesign (/game) */
.game-map{padding:0} /* layout wraps content */

.map-viewport{
  position:relative;
  height: calc(100vh - 52px); /* minus top hud */
  margin: 0 12px 0 12px;
  border-radius: 18px;
  border: 1px solid rgba(214,168,79,.22);
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.map-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 520px at 50% 30%, rgba(0,0,0,.06), rgba(0,0,0,.58)),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55));
}
.map-ui{position:absolute; z-index:3}
.map-top-left{left:14px; top:14px; width: 340px; max-width: 45vw}
.map-top-right{right:14px; top:14px; width: 260px; max-width: 40vw}
.map-card{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(10,12,16,.45);
  backdrop-filter: blur(8px);
  padding: 12px;
}
.map-card-title{
  font-weight:1000;
  letter-spacing:.5px;
  color: rgba(214,168,79,.92);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Top HUD styled like wood/metal */
.hud-top{
  background:
    linear-gradient(180deg, rgba(28,20,12,.92), rgba(12,16,22,.92));
  border-bottom: 1px solid rgba(214,168,79,.26);
}
.hud-resources{min-width: 520px}
.hud-strip{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.hud-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  font-weight: 900;
}
.hud-pill.epoch{border-color: rgba(214,168,79,.24); background: rgba(214,168,79,.10)}
.hud-pill.thin{padding:5px 7px}
.hud-ico{height:14px;width:14px}
.hud-plus{width:20px;height:20px;border-radius:999px;border:1px solid rgba(214,168,79,.28);background: rgba(214,168,79,.16); color: var(--text); font-weight:1000}

/* Pins like small buttons */
.map-pins{
  position:absolute;
  right:14px;
  bottom: 210px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  z-index:3;
  justify-content:flex-end;
}
.pin{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(214,168,79,.28);
  background: rgba(10,12,16,.55);
  color: rgba(243,241,234,.92);
  font-weight: 1000;
}
.pin:hover{border-color: rgba(214,168,79,.42); background: rgba(214,168,79,.10)}

/* Bottom bar (like classic build/chat bar) */
.bottom-bar{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:4;
  background:
    linear-gradient(180deg, rgba(10,12,16,.10), rgba(10,12,16,.82));
  border-top: 1px solid rgba(214,168,79,.22);
  padding: 10px 12px 12px 12px;
  backdrop-filter: blur(10px);
}
.bb-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.bb-tab{
  border-radius: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: rgba(243,241,234,.88);
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.bb-tab.active{border-color: rgba(214,168,79,.30); background: rgba(214,168,79,.12); color: var(--text)}
.bb-tab.is-disabled{
  opacity: .50;
  pointer-events: none;
  filter: grayscale(.15);
}
.bb-panels{border-radius: 16px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); padding: 10px}
.bb-panel{display:none}
.bb-panel.active{display:block}
.bb-subtabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.bb-subtab{
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(243,241,234,.86);
  font-weight: 1000;
}
.bb-subtab.active{border-color: rgba(214,168,79,.30); background: rgba(214,168,79,.12); color: var(--text)}
.bb-subpanel{display:none}
.bb-subpanel.active{display:block}
.bb-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.bb-title{font-weight:1000; letter-spacing:.4px}
.bb-list{margin: 8px 0 0 18px; color: rgba(243,241,234,.86); line-height:1.5}

/* Help head (Tipps + Allianz button) */
.bb-help-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.bb-help-head .bb-title{margin:0}

/* Allianz Modal (Landforge-Stil) */
.alliance-panel{max-width:560px;padding:0;overflow:hidden}
.alliance-topbar{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg, rgba(88,56,24,.92), rgba(48,30,14,.92));
  padding:10px 12px;color:var(--text);
  border-bottom:1px solid rgba(214,168,79,.28);
}
.alliance-title{font-weight:1000;font-size:22px;letter-spacing:.3px}
.alliance-back{width:40px;height:34px;border-radius:12px;border:1px solid rgba(214,168,79,.28);background:rgba(0,0,0,.20);color:var(--text);font-size:22px;line-height:1}
.alliance-top-actions{display:flex;align-items:center;gap:8px}

.alliance-ico{width:34px;height:34px;border-radius:12px;border:1px solid rgba(214,168,79,.28);background:rgba(0,0,0,.20);color:var(--text);font-weight:1000}

.alliance-body{padding:14px 14px 12px;background:rgba(0,0,0,.10)}
.alliance-card{background:rgba(0,0,0,.12);border:1px solid rgba(214,168,79,.18);border-radius:18px;padding:12px;display:flex;gap:12px;box-shadow:0 10px 26px rgba(0,0,0,.32)}
.alliance-banner{width:92px;min-width:92px;height:92px;border-radius:16px;
  background: radial-gradient(circle at 30% 30%, rgba(214,168,79,.22), rgba(0,0,0,.18));
  border:1px solid rgba(214,168,79,.22);
  display:flex;align-items:center;justify-content:center;
}
.alliance-banner-emblem{font-size:40px}
.alliance-meta{flex:1;min-width:0}
.alliance-name{font-weight:1000;font-size:18px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alliance-kv{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px}
.kv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0}
.kv-key{color:rgba(243,241,234,.86);font-weight:800}
.kv-val{font-weight:1000;color:var(--text);white-space:nowrap}

.alliance-progress{display:flex;align-items:center;gap:10px;margin:12px 0}
.alliance-progress-badge{width:36px;height:36px;border-radius:999px;background:rgba(214,168,79,.18);border:1px solid rgba(214,168,79,.30);color:var(--text);font-weight:1000;display:flex;align-items:center;justify-content:center}
.alliance-progress-bar{flex:1;position:relative;height:22px;border-radius:999px;background:rgba(0,0,0,.20);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.alliance-progress-fill{height:100%;background:linear-gradient(90deg,#2fd27c,#21c26f)}
.alliance-progress-text{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-weight:1000;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25)}

.alliance-news{background:rgba(0,0,0,.12);border:1px solid rgba(214,168,79,.16);border-radius:18px;padding:12px;margin:10px 0 12px;box-shadow:0 10px 26px rgba(0,0,0,.30)}
.alliance-news-title{font-weight:1000;margin-bottom:6px}
.alliance-news-body{color:rgba(243,241,234,.92);font-weight:800}
.alliance-news-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.alliance-news-actions{color:rgba(214,168,79,.90);font-weight:1000}

.alliance-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.alliance-tile{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:12px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 22px rgba(0,0,0,.28);position:relative}
.alliance-tile .tile-ico{font-size:22px}
.alliance-tile .tile-txt{font-weight:1000;color:var(--text)}
.alliance-tile .tile-dot{position:absolute;right:10px;top:10px;background:#d93025;color:#fff;font-weight:1000;font-size:12px;border-radius:999px;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 6px;box-shadow:0 2px 0 rgba(0,0,0,.25)}

.alliance-bottom{display:flex;align-items:center;justify-content:space-around;gap:10px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:10px}
.alliance-nav{background:transparent;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text)}
.alliance-nav .nav-ico{font-size:20px}
.alliance-nav .nav-txt{font-weight:1000;font-size:12px}

/* Allianz Mitglieder Modal (Screen-inspiriert, Landforge Farbraum) */
.alliance-members-panel{max-width:560px;padding:0;overflow:hidden}
.am-topbar{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg, rgba(88,56,24,.92), rgba(48,30,14,.92));
  padding:10px 12px;color:var(--text);
  border-bottom:1px solid rgba(214,168,79,.28);
}
.am-title{font-weight:1000;font-size:22px;letter-spacing:.3px}
.am-back,.am-ico{width:40px;height:34px;border-radius:12px;border:1px solid rgba(214,168,79,.28);background:rgba(0,0,0,.20);color:var(--text);font-size:22px;line-height:1}
.am-ico{width:34px;font-size:16px;font-weight:1000}
.am-body{padding:14px;background:rgba(0,0,0,.10)}
.am-online{background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 12px;text-align:center;font-weight:1000;margin-bottom:12px}

.am-leader{display:flex;align-items:center;gap:12px;background:rgba(214,168,79,.10);
  border:1px solid rgba(214,168,79,.24);border-radius:18px;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.28);margin-bottom:12px;position:relative}
.am-avatar{width:60px;height:60px;border-radius:16px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:26px}
.am-leader-main{flex:1;min-width:0}
.am-name{font-weight:1000;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-meta{margin-top:6px;color:rgba(243,241,234,.86);font-weight:900;display:flex;gap:12px;flex-wrap:wrap}
.am-rank{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:2px 6px;font-weight:1000}

.am-section{background:rgba(0,0,0,.12);border:1px solid rgba(255,255,255,.12);border-radius:18px;margin-bottom:10px;overflow:hidden}
.am-sec-head{width:100%;display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.10);border:none;color:var(--text);padding:10px 12px;cursor:pointer}
.am-r{background:rgba(214,168,79,.16);border:1px solid rgba(214,168,79,.24);border-radius:12px;padding:4px 8px;font-weight:1000}
.am-sec-title{font-weight:1000;flex:1;text-align:left}
.am-sec-count{font-weight:1000;color:rgba(243,241,234,.86)}
.am-sec-chevron{opacity:.8}
.am-sec-body{display:none;padding:10px 12px}
.am-section.open .am-sec-body{display:block}

.am-row{display:flex;gap:10px;align-items:center;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);margin-bottom:8px}
.am-row:last-child{margin-bottom:0}
.am-row-avatar{width:38px;height:38px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.am-row-main{flex:1;min-width:0}
.am-row-name{font-weight:1000;display:flex;gap:10px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.am-row-meta{margin-top:4px;color:rgba(243,241,234,.82);font-weight:900;font-size:12px}
.am-rank-pill{font-weight:1000;color:#f2d08b;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.12);padding:6px 10px;border-radius:14px}
.am-rank-controls{display:flex;flex-direction:column;align-items:center;gap:6px}
.am-rbadge{font-weight:1000;color:#f2d08b;background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.12);padding:4px 10px;border-radius:14px;min-width:42px;text-align:center}
.am-rbtn{width:34px;height:30px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#2b2f36,#1a1d22);color:#f1e7d0;font-weight:1000;display:flex;align-items:center;justify-content:center;cursor:pointer}
.am-rbtn:disabled{opacity:.4;cursor:not-allowed}
.am-status{font-size:11px;font-weight:1000;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10)}
.am-status.online{background:rgba(47,210,124,.12);border-color:rgba(47,210,124,.22)}

/* Chat box in bottom */
.bottom-bar .chat-box{height: 160px; margin:0 0 10px 0}


/* v6.5 HUD resources align */
.hud-top{gap:10px}
.hud-resources{
  display:flex;
  justify-content:flex-end;
  margin-left:auto;
}
.hud-actions{display:flex; align-items:center}
@media (max-width: 1100px){
  .hud-resources{justify-content:center; margin-left:0; flex: 1}
}


/* v6.6 Chat: Landforge Rat */
.chat-msg.rat{
  background: rgba(214,168,79,.08);
  border-radius: 12px;
}
.chat-msg.rat .chat-user{
  color: rgba(214,168,79,.98);
}
.chat-msg.rat .chat-text em{
  font-style: italic;
  color: rgba(243,241,234,.92);
}


/* v6.7 Wood Top Bar (wie Referenz) */
.hud-top.woodbar{
  position:sticky;
  top:0;
  z-index:1100;
  height: auto;
  min-height: 48px;
  padding: 6px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:
    linear-gradient(180deg, rgba(88,56,24,.92), rgba(48,30,14,.92)),
    radial-gradient(900px 120px at 50% 0%, rgba(214,168,79,.18), transparent 60%);
  border-bottom: 1px solid rgba(214,168,79,.32);
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.woodbar-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 420px;
}
.wb-avatar{
  width:38px;height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.55);
  background:
    url('/assets/img/avatars/00_default.svg') center/cover no-repeat,
    radial-gradient(circle at 30% 25%, rgba(214,168,79,.20), transparent 55%),
    linear-gradient(180deg, rgba(45,28,12,.65), rgba(12,10,8,.75));
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  box-shadow:
    0 8px 18px rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.wb-avatar::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(214,168,79,.75), rgba(120,90,34,.55), rgba(255,255,255,.10));
  z-index:0;
  filter: blur(.0px);
  opacity:.95;
  -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63%);
  mask: radial-gradient(circle, transparent 0 62%, #000 63%);
}
.wb-avatar::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,.20), transparent 55%);
  z-index:2;
  opacity:.95;
  pointer-events:none;
}
.wb-avatar.has-img{
  background-size: cover;
  background-position: center;
}
.wb-avatar > *{ position:relative; z-index:3; }
.wb-avatar:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 12px 26px rgba(0,0,0,.48),
    0 0 0 2px rgba(214,168,79,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
  filter: saturate(1.08);
}

.wb-avatar:active{ transform: translateY(0) scale(1.00); }

.profile-copy-wrap{
  display:flex;
  align-items:center;
  gap:8px;
}
.copy-btn{
  border:1px solid rgba(214,168,79,.22);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  border-radius:10px;
  width:30px;
  height:26px;
  line-height:24px;
  cursor:pointer;
  font-weight:900;
}
.copy-btn:hover{ border-color: rgba(214,168,79,.40); background: rgba(0,0,0,.25); }
.copy-btn:active{ transform: translateY(1px); }

/* Profil Modal */
.profile-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.profile-card{
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  border-radius:16px;
  padding:12px;
}
.profile-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px dashed rgba(255,255,255,.10);
}
.profile-row:last-child{ border-bottom:0; }
.profile-row .label{ color: rgba(255,255,255,.72); font-size:12px; }
.profile-row .value{ font-weight:900; }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.avatar-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:8px;
}
.avatar-item{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius:14px;
  padding:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio: 1 / 1;
}
.avatar-item img{ width:100%; height:100%; object-fit:contain; }
.avatar-item.selected{ border-color: rgba(214,168,79,.55); box-shadow: 0 0 0 2px rgba(214,168,79,.10); }

@media (max-width: 900px){
  .profile-grid{ grid-template-columns: 1fr; }
  .avatar-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hud-brand.compact .logo{height:26px}
.hud-brand.compact .brand-name{font-size:14px}
.hud-nav.compact a{font-size:11px}

.woodbar-mid{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
}
.wb-epoch{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 999px;
  border:1px solid rgba(214,168,79,.30);
  background: rgba(0,0,0,.18);
  min-width: 130px;
}
.wb-epoch-name{
  font-weight:1000;
  letter-spacing:.5px;
  line-height:1;
}
.wb-epoch-sub{
  font-size:11px;
  color: rgba(243,241,234,.78);
  line-height:1.1;
  margin-top: 2px;
}

.woodbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  min-width: 520px;
}
.wb-res{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.wb-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  font-weight: 1000;
  font-size: 12px;
  line-height: 1;
}
.wb-pill span.is-full{color:var(--danger);text-shadow:0 0 10px rgba(255,85,119,.25)}
.wb-ico{height:16px;width:16px;opacity:.95}
.wb-emoji{display:inline-block;width:16px;text-align:center;line-height:1;font-size:16px;transform:translateY(1px)}
.wb-diamonds{border-color: rgba(214,168,79,.24)}
.wb-plus{
  width:18px;height:18px;
  border-radius:999px;
  border:1px solid rgba(214,168,79,.28);
  background: rgba(214,168,79,.16);
  color: var(--text);
  font-weight:1000;
  line-height: 1;
}
.wb-mini{
  display:flex;
  gap:10px;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,.10);
}
.wb-mini-item{
  font-size: 12px;
  font-weight: 900;
  color: rgba(243,241,234,.88);
  white-space: nowrap;
}
.wb-logout{
  border-radius: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(243,241,234,.92);
  font-weight: 1000;
  cursor:pointer;
}
.wb-logout:hover{border-color: rgba(214,168,79,.35); background: rgba(214,168,79,.10)}

/* Make /game viewport account for 48px bar */
.map-viewport{height: calc(100vh - 48px);}

/* Bottom-Bar: Spacer + Ambient Toggle */
.bb-spacer{ flex:1 1 auto; }

#btnAudioToggle:not(.is-on){
  opacity: 0.6;
  filter: grayscale(1);
}

/* 1920x1080: Bottom-Bar etwas kompakter */
@media (min-width: 1600px) and (min-height: 900px){
  .bottom-bar{ padding: 8px 10px 10px 10px; }
  .bb-tabs{ margin-bottom: 8px; gap:6px; }
  .bb-tab{ padding: 6px 9px; font-size: 13px; }
  .bb-panel{ max-height: 260px; overflow:auto; }
}

/* Gesperrte Buttons + Tooltip */
.btn[disabled], .btn.disabled, button[disabled]{
  cursor: not-allowed;
  opacity: .55;
  filter: grayscale(.25);
}
.btn-lock-hint{ position: relative; }
.btn-lock-hint[data-tooltip]:hover::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
  background: rgba(10,10,10,0.92);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.btn-lock-hint[data-tooltip]:hover::before{
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 4px);
  border: 6px solid transparent;
  border-top-color: rgba(10,10,10,0.92);
  z-index: 9999;
}


/* === Build-Menü (FoE-Style) === */
.bm-wrap{ display:flex; gap:12px; align-items:stretch; }
.bm-cats{
  display:grid;
  grid-template-columns: repeat(2, 44px);
  grid-auto-rows: 44px;
  gap:8px;
  padding:10px;
  border-radius:14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
}
.bm-cat{
  width:44px; height:44px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  cursor:pointer;
  position:relative;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.bm-cat:hover{ transform: translateY(-1px); box-shadow: 0 8px 16px rgba(0,0,0,0.25); }
.bm-cat.active{
  border-color: rgba(255,215,120,0.55);
  box-shadow: 0 0 0 2px rgba(255,215,120,0.18);
  background: rgba(60,35,10,0.28);
}
.bm-cat.disabled{ opacity:0.45; filter: grayscale(1); cursor:not-allowed; }
.bm-cat-ico{ font-size:18px; line-height:44px; display:block; text-align:center; }

.bm-strip-wrap{ flex:1; min-width:0; }
.bm-strip-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:8px;
}
.bm-arrows{ display:flex; gap:8px; }
.bm-arrow{
  width:34px; height:34px;
  border-radius:10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  cursor:pointer;
}
.bm-arrow:hover{ filter: brightness(1.08); }

.bm-strip{
  display:none;
  gap:10px;
  overflow:auto;
  /* Mehr Innenabstand, damit die erste Karte (Bild/Frame) nicht „am Rand klebt“ */
  padding: 6px 12px 10px 12px;
  scroll-behavior:smooth;
}
.bm-strip.active{ display:flex; }
.bm-strip::-webkit-scrollbar{ height:10px; }
.bm-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.14); border-radius: 10px; }

.bm-card{
  width: 440px;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  padding: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 20px rgba(0,0,0,0.22);
}
.bm-card-top{ display:flex; gap:10px; align-items:center; }
.bm-portrait{
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 14px;
  /* "AAA" Frame: Metall-Rand + Holz-Inlay */
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.18), rgba(0,0,0,0.24)),
    linear-gradient(135deg, rgba(140,95,55,0.55), rgba(70,40,20,0.55));
  border: 1px solid rgba(255,255,255,0.10);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.bm-portrait::before{
  content:'';
  position:absolute; inset:-2px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(210,210,210,0.28), rgba(40,40,40,0.28));
  border: 1px solid rgba(255,235,190,0.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 8px 16px rgba(0,0,0,0.25);
  pointer-events:none;
}
.bm-portrait::after{
  content:'';
  position:absolute; inset: 6px;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(255,220,160,0.12), rgba(0,0,0,0.22));
  border: 1px solid rgba(0,0,0,0.20);
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.35);
  pointer-events:none;
}
.bm-portrait-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

.bm-costs{
  margin-top: 8px;
  display:flex;
  gap: 8px;
  flex-wrap: nowrap;
  opacity: 0.95;
}
.bm-cost{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 7px;
  border-radius: 10px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  white-space: nowrap;
}
.bm-cost img{ width: 14px; height: 14px; opacity: 0.95; }
.bm-cost-ico{
  font-size: 14px;
  line-height: 1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.bm-cost-val{ font-variant-numeric: tabular-nums; }
.bm-cost-inline{
  display:inline-flex;
  align-items:center;
  gap: 4px;
  margin: 0 4px;
}

.bm-ribbon{
  /* Diagonales Band wie "AAA" Games */
  position:absolute;
  top: 12px;
  left: -46px;
  width: 180px;
  padding: 6px 0;
  transform: rotate(-38deg);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 900;
  text-align:center;
  background: rgba(0,0,0,0.62);
  border-top: 1px solid rgba(255,255,255,0.16);
  border-bottom: 1px solid rgba(0,0,0,0.55);
  color: rgba(255,245,220,0.96);
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
  box-shadow: 0 10px 18px rgba(0,0,0,0.25);
}
.bm-card.is-locked .bm-ribbon{
  background: rgba(95,20,20,0.75);
  border-top-color: rgba(255,190,170,0.20);
}
.bm-card.is-max .bm-ribbon{
  background: rgba(18,70,35,0.75);
  border-top-color: rgba(200,255,220,0.18);
}

.bm-card{
  position:relative;
  transition: transform .12s ease, box-shadow .12s ease;
}
.bm-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.28);
}
.bm-card.is-locked{
  opacity: 0.72;
}
.bm-name{ font-weight:800; letter-spacing:0.2px; }
.bm-subline{ font-size: 12px; opacity: 0.92; }
.bm-subline .bm-prod{ margin-left: 8px; font-size: 12px; opacity: 0.95; color: rgba(210, 255, 210, 0.95); white-space: nowrap; }
/* (Upgrade: …) Zeile entfernt – Kosten sind als Pills direkt darunter dargestellt */
.bm-actions{
  margin-top: 10px;
  display:flex;
  gap:8px;
  justify-content:space-between;
}
.bm-actions-row{
  width:100%;
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:center;
}
.bm-actions form{ margin:0; }
.bm-actions .btn{ width: 98px; text-align:center; }
.bm-actions-row .btn{ width:auto; min-width:98px; }
.bm-actions-row .btn.secondary{ min-width:140px; }

/* Troops training modal */
.train-wrap{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

/* Training modal UI v2 (mobile-like) */
.trainv2-panel .modal-header,
.trainv2-panel .modal-footer{ display:none; }
.trainv2-panel .modal-body{ padding:0; margin-top:0; }

.trainv2{
  padding: 14px 14px 12px;
}
.trainv2-top{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 6px 4px 10px;
}
.trainv2-back{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
}
.trainv2-top-title{
  flex: 1 1 auto;
  text-align:center;
  font-weight: 950;
  font-size: 22px;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 2px 10px rgba(0,0,0,0.35);
  margin-right: 42px; /* balance back button */
}

.trainv2-hero{ display:flex; justify-content:center; padding: 6px 0 10px; }
.trainv2-hero-plate{
  width: 210px;
  height: 210px;
  border-radius: 28px;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 58%, rgba(0,0,0,0.30));
  border: 1px solid rgba(255,255,255,0.12);
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 22px 44px rgba(0,0,0,0.28);
}
.trainv2-hero-face{ font-size: 64px; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.22)); }
.trainv2-hero-badge{
  position:absolute;
  left: 12px;
  top: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 900;
}

.trainv2-tierrow{
  display:flex;
  gap: 10px;
  overflow:auto;
  padding: 6px 2px 10px;
  scrollbar-width: none;
}
.trainv2-tierrow::-webkit-scrollbar{ display:none; }

.trainv2-progress{
  margin: 10px 12px 0;
  padding: 10px 12px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 16px;
}
.trainv2-progress-head{ font-weight: 900; font-size: 13px; margin-bottom: 8px; }
.trainv2-progress-bar{
  height: 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.22);
  overflow: hidden;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.22);
}
.trainv2-progress-bar > span{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(60,220,220,0.92);
}
.trainv2-progress-meta{ display:flex; gap: 10px; margin-top: 8px; font-size: 12px; opacity: .85; justify-content:center; }
.trainv2-tier{
  appearance: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  min-width: 74px;
  padding: 10px 10px 8px;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  text-align:center;
}
.trainv2-tier:focus{ outline: none; }
.trainv2-tier.locked{
  opacity: .42;
  cursor: not-allowed;
}
.trainv2-tier.locked .trainv2-tier-sub::after{
  content: " 🔒";
  opacity: .75;
}
.trainv2-tier.active{
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.trainv2-tier-num{ font-weight: 950; font-size: 16px; }
.trainv2-tier-sub{ font-size: 11px; opacity: .72; margin-top: 2px; }

.trainv2-card{
  margin-top: 6px;
  border-radius: 22px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 12px;
}
.trainv2-card-left{ display:flex; gap: 12px; align-items:center; }
.trainv2-card-icon{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
}
.trainv2-card-title{ font-weight: 950; font-size: 16px; }
.trainv2-card-time{ font-weight: 950; font-size: 18px; margin-top: 2px; }
.trainv2-card-sub{ font-size: 12px; opacity: .82; margin-top: 6px; }

.trainv2-card-stats{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.trainv2-card-stats > div{
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  text-align:center;
}
.trainv2-stat{ font-weight: 950; font-size: 16px; margin-top: 4px; }

.trainv2-actions{
  display:flex;
  gap: 12px;
  margin-top: 14px;
}
.trainv2-btn{
  flex: 1 1 0;
  height: 52px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  font-weight: 950;
  font-size: 16px;
  cursor: pointer;
}
.trainv2-btn-warn{ background: rgba(255,185,90,0.92); color: rgba(25,18,8,0.95); }
.trainv2-btn-primary{ background: rgba(60,220,220,0.92); color: rgba(6,18,18,0.95); }

.trainv2-bottomnote{ margin-top: 10px; font-size: 12px; opacity: .72; text-align:center; }

@media (max-width: 740px){
  .trainv2-top-title{ font-size: 20px; }
  .trainv2-card-stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.train-unit{
  flex: 1 1 auto;
}
.train-form{
  flex: 0 0 200px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.train-unit-title{
  font-weight:900;
  font-size: 16px;
  margin-bottom: 10px;
}
.train-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 10px;
}
.train-stats > div{
  padding:10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

@media (max-width: 740px){
  .train-wrap{ flex-direction:column; }
  .train-form{ flex-basis:auto; width:100%; }
  .train-stats{ grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}

/* Baufortschritt in Karten */
.bm-buildbox{ width:100%; }
.bm-buildrow{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: 12px;
  margin-top: 2px;
  margin-bottom: 6px;
}
.bm-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.35);
  margin-bottom: 8px;
}
.bm-bar-fill{
  height: 100%;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,210,120,0.85), rgba(180,255,200,0.65));
  box-shadow: 0 8px 16px rgba(0,0,0,0.18);
  transition: width .35s linear;
}

/* Tooltip für gesperrte Buttons */
[data-tip]{ position:relative; }
[data-tip]::after{
  content: attr(data-tip);
  position:absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: 220px;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(10,10,10,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,245,220,0.95);
  font-size: 12px;
  line-height: 1.25;
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease;
  transform: translateX(-50%) translateY(2px);
  z-index: 9999;
}
[data-tip]:hover::after{
  opacity:1;
  transform: translateX(-50%) translateY(0);
}

/* Kompakter auf 1080p */
@media (min-width: 1600px) and (min-height: 900px){
  /* Auf 1080p etwas breiter für bessere Lesbarkeit der Kostenzeilen */
  .bm-card{ width: 420px; }
  .bm-actions .btn{ width: 98px; }
}

/* Sozial: Freunde / PM / Gilden */
.social-tabs{display:flex;gap:8px;margin:10px 0;flex-wrap:wrap}
.social-tab{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.social-tab.active{background:rgba(255,255,255,.16)}
.social-panels .social-panel{display:none}
.social-panels .social-panel.active{display:block}
.social-card{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:10px;margin:8px 0}
.social-card-title{font-weight:700;margin-bottom:6px}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.social-split{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:900px){.social-grid,.social-split{grid-template-columns:1fr}}

.social-user{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.social-user:last-child{border-bottom:none}
.social-user .name{font-weight:600}
.social-user .meta{opacity:.85}
.social-user .actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.pm-wrap{display:grid;grid-template-columns:280px 1fr;gap:10px}
@media(max-width:900px){.pm-wrap{grid-template-columns:1fr}}
.pm-left{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px;max-height:360px;overflow:auto}
.pm-right{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px}
.pm-inbox-item{padding:8px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.pm-inbox-item.active{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
.pm-box{height:260px;overflow:auto;border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:8px;background:rgba(0,0,0,.20)}
.pm-msg{margin:6px 0;display:flex;gap:8px}
.pm-msg.me{justify-content:flex-end}
.pm-bubble{max-width:78%;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.pm-msg.me .pm-bubble{background:rgba(255,255,255,.12)}
.pm-time{opacity:.7;font-size:12px;margin-top:2px}
.pm-form{display:flex;gap:8px;margin-top:8px}
.pm-form input{flex:1}

/* =========================
   Admin (Standalone)
   ========================= */
body.admin-page{background:radial-gradient(1200px 700px at 25% 10%, rgba(255,215,120,.10), transparent 60%),
  radial-gradient(900px 600px at 80% 30%, rgba(120,200,255,.08), transparent 55%),
  linear-gradient(180deg, #0b0f14, #07090c);
  color:#e9e6dc;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.admin-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
@media(max-width:980px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{position:sticky;top:0;z-index:5}}

.admin-sidebar{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.22));
  border-right:1px solid rgba(255,255,255,.10);
  padding:18px 14px;
  position:sticky;top:0;height:100vh;overflow:auto;
}

.admin-brand{display:flex;gap:12px;align-items:center;padding:10px 10px 14px 10px;border-bottom:1px solid rgba(255,255,255,.10)}
.admin-logo{width:46px;height:46px;object-fit:contain;border-radius:14px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.admin-sigil{width:42px;height:42px;border-radius:14px;
  background:radial-gradient(circle at 30% 30%, rgba(255,220,140,.35), rgba(255,255,255,.10) 40%, rgba(0,0,0,.35) 72%),
  linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.admin-brand-title{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.6px;font-size:18px}
.admin-brand-sub{opacity:.8;font-size:12px}

.admin-nav{padding:14px 10px}
.admin-nav-cat{margin:12px 0 6px 0;opacity:.75;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.admin-nav-link{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;
  color:#e9e6dc;text-decoration:none;border:1px solid transparent;
  background:rgba(255,255,255,.02)
}
.admin-nav-link:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.06)}
.admin-nav-link.is-active{border-color:rgba(255,220,140,.35);background:rgba(255,220,140,.10)}

.admin-sidebar-footer{padding:12px 10px;border-top:1px solid rgba(255,255,255,.10)}

.admin-main{padding:18px 18px 60px 18px}
.admin-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  padding:16px 16px;
}
.admin-title{font-family:'Cinzel',serif;font-weight:700;font-size:22px}
.admin-sub{opacity:.85;font-size:13px;margin-top:2px}
.admin-topbar-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.admin-pill{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);font-size:12px;opacity:.95
}

.admin-userbox{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20)
}
.admin-avatar{width:34px;height:34px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.admin-avatar--empty{background:radial-gradient(circle at 30% 30%, rgba(255,220,140,.25), rgba(255,255,255,.08) 40%, rgba(0,0,0,.35) 72%);
}
.admin-user-meta{display:flex;flex-direction:column;line-height:1.1}
.admin-user-name{font-size:12px;font-weight:700;letter-spacing:.02em}
.admin-user-role{font-size:11px;opacity:.85}
.admin-user-role--server{opacity:1;
  font-family:'Cinzel',serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffd98a;
  text-shadow:0 0 10px rgba(255,217,138,.35), 0 2px 0 rgba(0,0,0,.55);
}

/* Admin: Stripe */
.admin-stripe-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:980px){.admin-stripe-grid{grid-template-columns:1fr 1fr}}
.admin-subtitle{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.3px}
.admin-note{padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(0,0,0,.25)}
.admin-warning{margin:10px 0 10px 0;padding:12px 12px;border-radius:16px;
  border:1px solid rgba(255,120,120,.35);
  background:linear-gradient(180deg, rgba(255,120,120,.12), rgba(0,0,0,.22));
  box-shadow:0 16px 40px rgba(0,0,0,.28);
}
.admin-warning-title{font-family:'Cinzel',serif;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#ffd1d1;text-shadow:0 0 10px rgba(255,120,120,.25), 0 2px 0 rgba(0,0,0,.55);
  margin-bottom:6px
}
.admin-warning-text{font-size:12px;line-height:1.45;opacity:.98}
.admin-hr{border:0;border-top:1px solid rgba(255,255,255,.10)}

.admin-tech-grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px}
@media(max-width:980px){.admin-tech-grid{grid-template-columns:1fr}}
.admin-tech-card{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.14);border-radius:16px;padding:12px 12px}
.admin-badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid rgba(255,255,255,.12);margin-left:6px}
.admin-badge--ok{background:rgba(120,255,170,.10);border-color:rgba(120,255,170,.22)}
.admin-badge--bad{background:rgba(255,120,120,.10);border-color:rgba(255,120,120,.22)}

.admin-pages{display:grid;gap:14px;margin-top:14px}
.admin-pages [data-admin-panel]{display:none}
.admin-pages [data-admin-panel].is-active{display:block}
.admin-section{scroll-margin-top:16px}
.admin-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:8px 2px}
.admin-section-title{font-family:'Cinzel',serif;font-weight:700;font-size:16px;letter-spacing:.4px}

.admin-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18));
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;padding:14px 14px;
  box-shadow:0 18px 55px rgba(0,0,0,.28);
}

.admin-form-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
@media(max-width:900px){.admin-form-grid{grid-template-columns:1fr}}

.admin-input{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);color:#f2efe6;outline:none
}
.admin-input:focus{border-color:rgba(255,220,140,.45);box-shadow:0 0 0 3px rgba(255,220,140,.12)}

/* Admin: compact inputs / inline fields */
.admin-input--sm{max-width:120px;padding:8px 10px;border-radius:12px}
.admin-inline-field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.admin-clip{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Admin: Maxlevel table spacing */
.admin-maxlevels-table{table-layout:fixed}
.admin-maxlevels-table th,.admin-maxlevels-table td{padding:10px 10px;vertical-align:middle}

.admin-table th{position:sticky;top:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}

.admin-kv{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px}
@media(max-width:900px){.admin-kv{grid-template-columns:1fr}}

/* Admin Docs */
.admin-doc-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin-top:4px}
@media(max-width:980px){.admin-doc-grid{grid-template-columns:1fr}}
.admin-doc-block{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.16);border-radius:16px;padding:12px 12px}
.admin-doc-title{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.3px;margin-bottom:6px}
.admin-doc-list{margin:8px 0 0 18px;padding:0}
.admin-doc-list li{margin:6px 0}
.admin-code{margin-top:8px;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:12px;white-space:pre-wrap;line-height:1.5}

/* Admin Chat */
.admin-chat-toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.admin-chat-toolbar label{min-width:160px}
.admin-chat-toolbar select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);color:#f2efe6;outline:none}

/* Badges / Mono helpers (Admin + Bans) */
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);font-size:11px;letter-spacing:.2px}
.badge.ok{border-color:rgba(120,220,140,.28);background:rgba(30,120,60,.18)}
.badge.danger{border-color:rgba(255,120,120,.35);background:rgba(140,20,20,.22)}

/* Banned Screen */
.banned-page{min-height:100vh;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;padding:26px}
.banned-card{max-width:720px;width:100%;border-radius:22px;padding:22px 22px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  color:#f2efe6;text-align:center}
.banned-logo{height:58px;margin:0 auto 12px auto;display:block;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
.banned-title{font-family:'Cinzel',serif;font-weight:800;font-size:24px;letter-spacing:.6px;
  text-shadow:0 0 18px rgba(255,210,120,.22), 0 8px 28px rgba(0,0,0,.55)}
.banned-sub{margin-top:10px;line-height:1.6}
.banned-scroll{margin-top:14px;text-align:left;border-radius:18px;padding:14px 14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.24)}
.banned-label{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.4px;margin-bottom:6px}
.banned-reason{font-family:'Cinzel',serif;line-height:1.65;font-size:15px}
.banned-meta{margin-top:10px;display:grid;gap:6px}
.banned-help{margin-top:14px;line-height:1.6}
.banned-actions{margin-top:16px;display:flex;gap:10px;justify-content:center}

/* Social: Gilden-Tag */
.guild-tag{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;font-size:12px;line-height:1;
  background:rgba(255,215,64,0.12);border:1px solid rgba(255,215,64,0.25);color:#ffd740;
  text-shadow:0 0 10px rgba(255,215,64,0.35)}

/* Social Tab: Activity Dot */
.bb-tab .tab-dot{display:none;width:10px;height:10px;border-radius:50%;background:#e02b2b;margin-left:8px;
  box-shadow:0 0 12px rgba(224,43,43,0.8);vertical-align:middle}
.bb-tab .tab-dot.on{display:inline-block}

/* Emoji Picker (Global Chat + PM) */
.emoji-panel{position:fixed;z-index:9999;width:270px;max-width:calc(100vw - 16px);
  background:rgba(16,18,24,0.96);border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);border-radius:14px;padding:10px;
  backdrop-filter:blur(8px);display:none}
.emoji-panel.open{display:block}
.emoji-panel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.emoji-title{font-weight:700;letter-spacing:0.5px}
.emoji-close{border:0;background:transparent;color:#fff;font-size:20px;line-height:1;padding:4px 8px;cursor:pointer;opacity:0.85}
.emoji-close:hover{opacity:1}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.emoji-btn{border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);border-radius:10px;padding:6px 0;cursor:pointer;font-size:18px}
.emoji-btn:hover{background:rgba(255,255,255,0.08)}

/* Chat Subtabs (Global/Gilde) */
.chat-subtabs{display:flex;gap:8px;align-items:center;margin:0 0 8px 0}
.chat-subtab{border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.04);
  color:#fff;border-radius:12px;padding:8px 12px;cursor:pointer;font-weight:700;letter-spacing:0.3px}
.chat-subtab:hover{background:rgba(255,255,255,0.07)}
.chat-subtab.active{background:rgba(255,215,64,0.12);border-color:rgba(255,215,64,0.35);
  box-shadow:0 0 18px rgba(255,215,64,0.18)}
.chat-subpanel{display:none}
.chat-subpanel.active{display:block}
.chat-guild-head{display:flex;align-items:center;gap:8px;margin:0 0 8px 0;
  font-weight:800;letter-spacing:0.5px;text-shadow:0 0 12px rgba(255,215,64,0.22)}

/* PWA (iOS/Android): safe-area support */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  .hud-top { padding-top: env(safe-area-inset-top); }
}



/* Units modal */
.units-table{width:100%; border-collapse:collapse; font-size:14px}
.units-table th,.units-table td{padding:8px 10px; border-bottom:1px solid rgba(255,255,255,0.08)}
.units-table th{font-weight:700; text-align:left}
.units-qty{font-variant-numeric:tabular-nums}
.units-send{width:88px}
.units-row-muted{opacity:.7}
.units-attack-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 14px}
.units-attack-row select{min-width:220px}

/* Units deploy UI (attack selection) */
.unitpick-wrap{padding:6px 2px 14px}
.unitpick-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 10px}
.unitpick-top .input{min-width:220px}
.unitpick-list{display:flex; flex-direction:column; gap:10px}
.unitpick-row{display:grid; grid-template-columns:54px 1fr; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,0.08); border:1px solid rgba(0,0,0,0.18)}
.unitpick-ico{width:54px; height:54px; border-radius:14px; background:rgba(0,0,0,0.18); display:flex; align-items:center; justify-content:center; font-weight:800}
.unitpick-main{display:flex; flex-direction:column; gap:8px}
.unitpick-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.unitpick-name{font-weight:800; font-size:15px}
.unitpick-count{font-variant-numeric:tabular-nums; font-weight:800; opacity:.95}
.unitpick-count span{opacity:.7; font-weight:700}
.unitpick-controls{display:grid; grid-template-columns:44px 44px 1fr 44px; gap:10px; align-items:center}
.unitpick-btn{height:40px; border-radius:12px; border:1px solid rgba(0,0,0,0.25); background:rgba(0,0,0,0.12); color:inherit; font-weight:900; cursor:pointer}
.unitpick-btn:disabled{opacity:.5; cursor:not-allowed}
.unitpick-slider{width:100%}
.unitpick-sub{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; opacity:.85}
.unitpick-sub b{font-variant-numeric:tabular-nums}

.units-bottom-bar{display:flex; align-items:stretch; gap:8px; padding:10px; background:rgba(0,0,0,0.12); border-top:1px solid rgba(255,255,255,0.08)}
.units-bottom-btn{min-width:92px; padding:10px 10px; border-radius:14px; border:1px solid rgba(0,0,0,0.22); background:rgba(255,255,255,0.08); color:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; cursor:pointer}
.units-bottom-ico{font-size:18px; line-height:1}
.units-bottom-label{font-size:12px; font-weight:800; opacity:.9}
.units-bottom-right{margin-left:auto; display:flex; align-items:center; gap:10px}
.units-bottom-timer{font-variant-numeric:tabular-nums; font-weight:800; opacity:.8; padding:0 6px}
.units-deploy-btn{height:52px; padding:0 18px; border-radius:16px; border:1px solid rgba(0,0,0,0.28); background:rgba(255,255,255,0.10); color:inherit; font-weight:900; cursor:pointer; display:flex; align-items:center; gap:10px}
.units-deploy-btn:disabled{opacity:.55; cursor:not-allowed}
.units-deploy-cost{display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums}
.units-deploy-cost:before{content:"🥩";}

@media (max-width: 600px){
  .unitpick-row{grid-template-columns:50px 1fr}
  .unitpick-ico{width:50px; height:50px}
  .unitpick-controls{grid-template-columns:42px 42px 1fr 42px}
  .units-bottom-btn{min-width:86px}
}

.admin-newsletter-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width: 980px){.admin-newsletter-grid{grid-template-columns:1fr}}