/* ═══════════════════════════════════════════════════
   GAME ELEMENTS
   ═══════════════════════════════════════════════════ */

/* Upgrade / shop cards */
.shop-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.upg-card { background:var(--bg2); border:1px solid var(--b0); border-radius:var(--rs);
  padding:10px 11px; flex:0 0 auto; min-width:84px; max-width:124px;
  text-align:center; transition:border-color .15s; }
.upg-card:hover { border-color:var(--b1); }
.upg-icon  { font-size:22px; margin-bottom:5px; }
.upg-lbl   { font-size:10px; color:var(--t2); margin-bottom:5px; line-height:1.3; font-family:var(--fu); }
.upg-stars { font-size:13px; }

/* Room buttons */
.gb-room-btn { background:var(--raised); border:1px solid var(--b0); border-radius:var(--r);
  padding:12px 8px; text-align:center; cursor:pointer; transition:all .15s;
  display:flex; flex-direction:column; align-items:center; gap:5px; position:relative; }
.gb-room-btn:hover { background:var(--surf); border-color:var(--b1);
  transform:translateY(-1px); box-shadow:0 4px 18px rgba(0,0,0,.3); }
.gb-rooms { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:12px; }
.gbrb-icon  { font-size:24px; }
.gbrb-label { font-size:9px; font-family:var(--fm); letter-spacing:.8px;
  text-transform:uppercase; color:var(--t2); }
.gbrb-badge { position:absolute; top:6px; right:6px; background:var(--re);
  color:white; font-size:9px; border-radius:10px; padding:1px 5px;
  font-family:var(--fm); font-weight:700;
  animation:badgePop 1.6s ease-in-out infinite; }
@keyframes badgePop { 0%,100%{box-shadow:0 0 6px rgba(255,56,56,.4)} 50%{box-shadow:0 0 16px rgba(255,56,56,.8)} }

/* Aktivismus */
.akt-card { background:var(--raised); border:1px solid var(--b0); border-radius:var(--r);
  padding:12px; margin-bottom:8px; transition:border-color .15s; }
.akt-card.available { border-color:var(--b1); }
.akt-card.available:hover { border-color:var(--b2); }
.akt-title  { font-family:var(--fu); font-weight:600; font-size:13px; margin-bottom:3px; }
.akt-effect { font-size:11px; color:var(--t2); line-height:1.45; margin-bottom:8px; }
.akt-meta   { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.akt-cd     { font-size:9px; color:var(--am); font-family:var(--fm); }
.akt-done   { font-size:9px; color:var(--t1); font-family:var(--fm); }
.akt-phase  { font-size:9px; color:var(--pu); font-family:var(--fm); padding:2px 6px;
  background:rgba(164,79,232,.1); border-radius:4px; border:1px solid rgba(164,79,232,.2); }

/* Certificates */
.cert-wrapper { padding:16px; background:var(--bg); display:flex; flex-direction:column; align-items:center; }
.cert-box { max-width:420px; width:100%; background:linear-gradient(140deg,#0c1c0c,#081008);
  border:2px solid var(--go); border-radius:var(--rx); padding:32px 26px; text-align:center;
  box-shadow:0 0 55px rgba(240,192,55,.1),inset 0 0 40px rgba(0,0,0,.25); position:relative; overflow:hidden; }
.cert-box::before { content:''; position:absolute; inset:6px;
  border:1px solid rgba(240,192,55,.1); border-radius:calc(var(--rx) - 4px); pointer-events:none; }
.cert-title { font-family:var(--fm); font-size:10px; letter-spacing:5px;
  color:var(--go); margin-bottom:16px; text-transform:uppercase; }
.cert-name  { font-family:var(--fs); font-size:30px; color:var(--t3); margin:8px 0; line-height:1.2; }
.cert-desc  { font-size:11px; color:var(--t1); line-height:1.7; margin:12px 0; font-family:var(--fm); }
.cert-stamp { display:inline-block; border:2px solid var(--go); padding:6px 14px;
  font-family:var(--fd); font-size:14px; letter-spacing:2px; color:var(--go);
  transform:rotate(-3deg); margin-top:10px; }

/* Politics */
.party-spd{color:#e3001b !important} .party-cdu,.party-csu{color:#aaa !important}
.party-grüne,.party-gruene{color:#46962b !important} .party-linke{color:#8b0000 !important}
.party-fdp{color:#e8c840 !important}

/* Misc */
.empty-hint { text-align:center; padding:24px 16px; font-size:11px;
  color:var(--t1); font-family:var(--fm); letter-spacing:1px; line-height:1.6; }
.toggle { width:40px; height:22px; background:var(--bg2); border-radius:11px;
  border:1px solid var(--b0); position:relative; cursor:pointer; transition:background .2s; }
.toggle::after { content:''; position:absolute; top:3px; left:3px;
  width:14px; height:14px; background:var(--t1); border-radius:50%; transition:all .2s; }
.toggle.on { background:var(--gd); border-color:var(--b2); }
.toggle.on::after { transform:translateX(18px); background:var(--g); box-shadow:0 0 7px var(--gg); }

/* Back to map */
.back-to-city { position:fixed; bottom:14px; left:12px; z-index:200;
  background:rgba(3,7,3,.92); border:1px solid var(--b1); border-radius:var(--r);
  padding:8px 14px; font-size:11px; color:var(--g); cursor:pointer;
  font-family:var(--fm); letter-spacing:.5px; backdrop-filter:blur(7px);
  transition:all .15s; box-shadow:0 4px 18px rgba(0,0,0,.5); }
.back-to-city:hover { background:rgba(6,16,8,.96); border-color:var(--b2); }

/* ── Responsive ──────────────────────────────────────── */
@media (min-width:600px)  { .char-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:480px)  {
  :root { font-size:13.5px; }
  .city-v2-layout { flex-direction:column; }
  .city-list { flex:0 0 auto; max-height:220px; }
  .name-layout { flex-direction:column; }
  .konto-boxes { flex-direction:column; }
  .konto-arrow { display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   CSC IMPERIUM · Visual Upgrade v9
   Richtung: Atmosphärisch dunkel — mehr Tiefe, Glow, Cinematik
   Änderungen:
   - Tiefere, sattere Farbpalette
   - Char-Cards mit Gradient-Highlight & Akzentlinie
   - Buttons mit echtem Glow-Effekt & aktiver Druckanimation
   - Story-Screen: Vignette + cinematische Linie
   - HUD: glassmorphism-Verfeinerung, Stat-Glow bei hover
   - Title: Noise-Textur, stärkerer Glow-Puls
   - Transitions überall smoother
   - Input-Felder: focus-glow, placeholder-Kontrast
   - Scrollbar subtiler und grüner
   ═══════════════════════════════════════════════════════════════ */