:root {
  --bg: #05070d;
  --neon: #2de2ff;
  --neon-2: #38ffb0;
  --violett: #8a6bff;
  --hot: #ff7a2f;
  --rot: #ff5a6a;
  --text: #cfe6f2;
  --dim: #6f8597;
  --dim-2: #8ea3b5;
  --panel: rgba(8, 14, 22, 0.82);
  --line: rgba(45, 226, 255, 0.26);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--text);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
.hidden { display: none !important; }

#bg { position: fixed; top: 0; left: 0; display: block; z-index: 0; }   /* alte 3D-Szene (lobby3d.js), auf index.html nicht mehr geladen */
/* Hintergrund ohne 3D-Szene (Thomas 30.09. spät: „das alte bild will ich nicht mehr“): dezenter Verlauf tiefes Lila -> fast Schwarz
   als feste Ebene ganz unten, auch unter den Stadtbild-Ebenen (sichtbar, bis sie geladen sind, und bei Städten ohne Bild) */
html { background: #030308; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(110% 85% at 68% -8%, rgba(92, 34, 150, 0.5) 0%, rgba(44, 16, 78, 0.34) 38%, rgba(10, 6, 20, 0) 72%),
    radial-gradient(70% 55% at 12% 105%, rgba(60, 20, 96, 0.22) 0%, rgba(10, 6, 20, 0) 70%),
    linear-gradient(180deg, #0a0714 0%, #040309 100%);
}
/* Erster Aufbau (Thomas 30.09. spät: „nicht das logo … höchstens eine kleine lade animation“): #lbStart deckt alles mit demselben
   Verlauf ab, bis lobby.js body.bereit setzt (Lobby mit Städten bzw. Anmeldung steht), dann kurzer Fade. Die drei Rauten erscheinen
   erst nach 0,3 s (schnelles Laden = gar keine Animation). Ohne JS/Fehler: nach 9 s von selbst weg (CSS), index.html zeigt dann die Anmeldung. */
.lb-start {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  background:
    radial-gradient(110% 85% at 68% -8%, rgba(92, 34, 150, 0.5) 0%, rgba(44, 16, 78, 0.34) 38%, rgba(10, 6, 20, 0) 72%),
    radial-gradient(70% 55% at 12% 105%, rgba(60, 20, 96, 0.22) 0%, rgba(10, 6, 20, 0) 70%),
    linear-gradient(180deg, #0a0714 0%, #040309 100%);
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  animation: startWeg 0.35s ease 9s forwards;
}
body.bereit .lb-start { opacity: 0; visibility: hidden; }
@keyframes startWeg { to { opacity: 0; visibility: hidden; } }
.lb-lader { display: flex; gap: 9px; opacity: 0; animation: laderEin 0.3s ease 0.3s forwards; }
.lb-lader i { display: block; width: 7px; height: 7px; transform: rotate(45deg); background: #b56bff; box-shadow: 0 0 10px rgba(181, 107, 255, 0.8);
  animation: laderPuls 1.05s ease-in-out infinite; }
.lb-lader i:nth-child(2) { animation-delay: 0.15s; background: #8f8dff; }
.lb-lader i:nth-child(3) { animation-delay: 0.3s; background: #2de2ff; box-shadow: 0 0 10px rgba(45, 226, 255, 0.7); }
@keyframes laderEin { to { opacity: 1; } }
@keyframes laderPuls { 0%, 100% { opacity: 0.25; transform: rotate(45deg) scale(0.7); } 50% { opacity: 1; transform: rotate(45deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .lb-lader i { animation: none; opacity: 0.8; } }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(120,50,190,0.10), transparent 55%),
    radial-gradient(100% 100% at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%);
}

#shell {
  position: relative; z-index: 2;
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 20px 60px;
  gap: 26px;
}
.brand { text-align: center; margin-top: 3vh; }
.logo-img {
  display: block; margin: 0 auto; width: min(500px, 84vw); height: auto;
  filter: drop-shadow(0 0 34px rgba(45,130,255,0.28));
}
.logo-img.sm { width: min(340px, 74vw); }
.logo {
  font-size: 40px; font-weight: 800; letter-spacing: 9px; color: #eafdff;
  text-shadow: 0 0 26px rgba(45,226,255,0.35);
}
.logo span { color: var(--neon); }
.tagline { margin-top: 10px; font-size: 11px; letter-spacing: 4px; color: var(--dim); }

.view { width: 100%; max-width: 760px; animation: rise 0.4s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.card {
  max-width: 440px; margin: 0 auto; text-align: center;
  padding: 30px 30px 26px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.card h1 { margin: 0 0 10px; font-size: 22px; letter-spacing: 2px; color: #eafdff; }
.muted { color: var(--dim); font-size: 14px; line-height: 1.55; }
.muted b { color: var(--text); }
.fineprint { margin-top: 16px; font-size: 11px; letter-spacing: 0.5px; color: var(--dim); line-height: 1.7; }
.link { color: var(--neon); text-decoration: none; }
.link:hover { text-decoration: underline; }

.spinner {
  width: 34px; height: 34px; margin: 6px auto 16px;
  border: 3px solid rgba(45,226,255,0.2); border-top-color: var(--neon);
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn {
  display: block; width: 100%; margin: 14px 0 0; padding: 13px 18px;
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-align: center;
  border-radius: 10px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--line); color: #eafdff; background: rgba(45,226,255,0.08);
  transition: background 0.16s, border-color 0.16s, transform 0.1s;
}
.btn:hover { background: rgba(45,226,255,0.18); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(120deg, rgba(45,226,255,0.9), rgba(56,255,176,0.9));
  color: #04121a; border-color: transparent; box-shadow: 0 8px 26px rgba(45,226,255,0.3);
}
.btn-primary:hover { background: linear-gradient(120deg, #2de2ff, #38ffb0); }
.btn-ghost { background: transparent; }
.btn-sm { width: auto; display: inline-block; padding: 8px 14px; font-size: 11px; margin: 0; }
.btn-danger { border-color: rgba(255,122,47,0.5); color: #ffcdb3; }
.btn-danger:hover { background: rgba(255,122,47,0.16); }
.btn-row { display: flex; gap: 8px; margin-top: 14px; }
.btn-row .btn { margin: 0; }
.btn-row .grow { flex: 1; }

/* ---- userbar ---- */
.userbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 40px; backdrop-filter: blur(8px);
}
.user { display: flex; align-items: center; gap: 12px; }
.avatar {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: #0a131d;
  border: 2px solid var(--neon); box-shadow: 0 0 16px rgba(45,226,255,0.4);
}
.user-name { font-weight: 700; font-size: 16px; color: #eafdff; }
.user-sub { font-size: 11px; letter-spacing: 1px; color: var(--dim); text-transform: uppercase; }
.userbar-actions { display: flex; gap: 8px; }

.lobby-h { text-align: center; font-size: 14px; letter-spacing: 4px; color: var(--dim); text-transform: uppercase; margin: 4px 0 16px; }

#toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(12px);
  z-index: 30; padding: 11px 20px; border-radius: 10px; font-size: 13px;
  background: rgba(6,12,20,0.96); border: 1px solid var(--line); color: #eafdff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { border-color: var(--hot); color: #ffcdb3; }
body.lobby-an #toast { top: 78px; bottom: auto; }   /* Stadtauswahl: nicht über dem Spielen-Knopf */

/* ---- Premium-Slots / Multi-Welten (server/shop.js Slot-Gating) ---- */
.slots-sec { margin-top: 8px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); text-align: center; }
.badge-prem { display: inline-block; margin-inline-start: 8px; padding: 2px 8px; font-size: 9px; letter-spacing: 1.5px; color: #fff2c9; border: 1px solid rgba(255,196,64,0.55); border-radius: 10px; vertical-align: middle; }
.lock { font-size: 10px; }

/* ===== SCHRÄGE ECKEN MIT RAHMEN (Kopie der Regel aus css/main.css, docs/vault/ui-rahmen.md): nie border + clip-path allein.
   Stellschrauben am Element: --fase · --rand · --rahmen · --fuellung (NICHT border-color/background/clip-path setzen). ===== */
:where(.fase) { --fase: 10px; --rand: 1px; --rahmen: rgba(45,226,255,0.3); --fuellung: rgba(8,14,22,0.9); }
.fase {
  --fase-d: calc(var(--fase) * 0.70711);
  --fase-g: calc(var(--fase) + 3 * var(--rand));
  --fase-streifen: transparent calc(var(--fase-d) - 0.5px), var(--rahmen) calc(var(--fase-d) + 0.15px),
    var(--rahmen) calc(var(--fase-d) + var(--rand) - 0.15px), transparent calc(var(--fase-d) + var(--rand) + 0.5px);
  border-style: solid !important; border-color: var(--rahmen) !important; border-width: var(--rand);
  background:
    linear-gradient(135deg, var(--fase-streifen)) left top / var(--fase-g) var(--fase-g) no-repeat border-box,
    linear-gradient(315deg, var(--fase-streifen)) right bottom / var(--fase-g) var(--fase-g) no-repeat border-box,
    var(--fuellung) !important;
  clip-path: polygon(var(--fase) 0, 100% 0, 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, 0 100%, 0 var(--fase)) !important;
}

/* =====================================================================================================================
   STADTAUSWAHL (Thomas 30.09.2026, WoW-Charakterauswahl; js/lobby.js, docs/vault/stadtauswahl.md)
   Hintergrund = Stadtbild/-video der gewählten Stadt, Übersicht links, Liste rechts, Name + „Spielen“ unten mittig.
   Neue Regeln mit logischen Eigenschaften (RTL ar/fa/he/ur spiegelt von selbst).
   ===================================================================================================================== */
body.lobby-an { overflow: hidden; }
body.lobby-an #shell { display: none; }
.stadt-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
body.lobby-an .stadt-bg { opacity: 1; }
.sb-ebene { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 0.9s ease; }
.sb-ebene.an { opacity: 1; }
.sb-ebene img, .sb-ebene video { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-ebene.kenburns img { animation: kenburns 42s ease-in-out infinite alternate; transform-origin: 58% 45%; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.11) translate(-1.2%, -0.8%); } }
@media (prefers-reduced-motion: reduce) { .sb-ebene.kenburns img { animation: none; } }
.sb-schleier {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,6,12,0.9) 0%, rgba(4,6,12,0.55) 24%, rgba(4,6,12,0.06) 42%, rgba(4,6,12,0.06) 64%, rgba(4,6,12,0.6) 78%, rgba(4,6,12,0.9) 100%),
    linear-gradient(0deg, rgba(4,6,12,0.95) 0%, rgba(4,6,12,0) 30%),
    linear-gradient(180deg, rgba(4,6,12,0.7) 0%, rgba(4,6,12,0) 15%);
}
body.lobby-an:not(.hat-bild) .sb-schleier { opacity: 0.5; }

.lb {
  position: fixed; inset: 0; z-index: 3;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px;
  padding: 14px 22px 20px;
  animation: rise 0.45s ease both;
}
html:is([lang^=ar], [lang^=fa], [lang^=ur]) .lb * { letter-spacing: 0 !important; }   /* Sperrung reißt verbundene Schrift auseinander */
/* Werte mit Zahl + Einheit („3,21 Mio. $“, „142 / 180 MW“): Richtung nach dem ersten starken Zeichen, sonst springen $ und Zahl in RTL */
.ld-meta, .lb-sub, .ld-kachel .v, .ld-kachel .s, .lk-werte span, .lk-stufe span, .ld-res b, .ld-legende span, .lk-zeit { unicode-bidi: plaintext; }
html[dir=rtl] :is(.ld-meta, .ld-kachel .v, .ld-kachel .s, .ld-res b) { text-align: right; }

.lb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.lb-logo { height: 46px; width: auto; filter: drop-shadow(0 0 20px rgba(45,130,255,0.3)); }
.lb .userbar { margin: 0; padding: 6px 8px; padding-inline-end: 8px; gap: 14px; }
.lb .avatar { width: 38px; height: 38px; }
.lb .user-name { font-size: 14px; }

.lb-mitte {
  display: grid; min-height: 0; gap: 20px;
  grid-template-columns: minmax(360px, 460px) minmax(0, 1fr) minmax(280px, 340px);
  grid-template-areas: "detail . liste";
}
.lb-detail {
  grid-area: detail; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(45,226,255,0.3) transparent;
  --fase: 18px; --rahmen: rgba(45,226,255,0.26); --fuellung: linear-gradient(180deg, rgba(10,18,30,0.84), rgba(5,9,16,0.9));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 18px 20px 20px;
}
.lb-detail:empty { visibility: hidden; }
.lb-detail.klein { align-self: start; }
.lb-liste { grid-area: liste; display: flex; flex-direction: column; min-height: 0; }
.lb-liste .lobby-h { margin: 2px 0 10px; font-size: 12px; text-align: start; padding-inline-start: 4px; }
.slots {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 9px; padding: 4px 6px 10px 4px;
  scrollbar-width: thin; scrollbar-color: rgba(45,226,255,0.3) transparent;
}
.lb-neben { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 6px 0 4px; }
.lb-neben .btn { padding: 7px 12px; font-size: 10px; letter-spacing: 1px; border-radius: 0; }

/* ---- Karten der Liste ---- */
.lb-kw { transition: filter 0.2s; }
.lb-kw.an { filter: drop-shadow(0 0 12px rgba(45,226,255,0.42)); }
.lb-karte {
  position: relative; cursor: pointer; outline: none; padding: 10px 14px 9px;
  --fase: 12px; --rahmen: rgba(45,226,255,0.2); --fuellung: linear-gradient(100deg, rgba(10,18,30,0.88), rgba(7,11,20,0.8));
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 0.15s ease;
}
.lb-karte:hover { --rahmen: rgba(45,226,255,0.5); }
.lb-karte:focus-visible { --rahmen: #b98bff; }
.lb-karte.an {
  --rahmen: var(--neon);
  --fuellung: linear-gradient(100deg, rgba(45,226,255,0.2), rgba(138,107,255,0.16) 55%, rgba(8,12,22,0.9));
}
.lb-karte:active { transform: translateY(1px); }
.lb-karte.warnt::before { content: ''; position: absolute; inset-inline-start: 1px; top: 16px; bottom: 16px; width: 3px; background: var(--rot); box-shadow: 0 0 8px var(--rot); }
.lk-kopf { display: flex; align-items: center; gap: 8px; min-height: 16px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.lk-sperre { color: var(--hot); font-weight: 700; }
.lk-warn {
  margin-inline-start: auto; width: 18px; height: 16px; display: grid; place-items: end center; padding-bottom: 1px;
  background: var(--rot); color: #1a0508; font-weight: 900; font-size: 11px; line-height: 1;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lk-name { margin: 3px 0 6px; font-size: 17px; font-weight: 800; letter-spacing: 0.5px; color: #eafdff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-karte.an .lk-name { text-shadow: 0 0 10px rgba(45,226,255,0.4); }
.lk-werte { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; font-weight: 700; color: #eafdff; font-variant-numeric: tabular-nums; }
.lk-werte span { display: inline-flex; align-items: center; gap: 5px; }
.lk-werte img { width: 17px; height: 17px; object-fit: contain; }
.neg { color: #ff6b7a !important; }
.lk-stufe { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: #9fb3c4; }
.lk-balken, .ld-balken { display: block; flex: 1 1 auto; height: 4px; background: rgba(255,255,255,0.08); }
.lk-balken b, .ld-balken b { display: block; height: 100%; background: linear-gradient(90deg, var(--neon), var(--violett)); }
.lk-fuss { display: flex; align-items: flex-end; gap: 10px; margin-top: 7px; min-height: 16px; }   /* Platz fuer das Slot-Schild unten rechts auch ohne Saeulen */
.lk-spark { width: 96px; height: 18px; fill: rgba(45,226,255,0.5); }
.lb-karte.an .lk-spark { fill: rgba(45,226,255,0.85); }
.lk-zeit { margin-inline-start: auto; font-size: 10px; color: var(--dim); white-space: nowrap; }
/* Slot-Schild unten rechts in der Ecke (Thomas 01.10.): Fläche in der Rahmenfarbe der Kachel, links eine 45°-Schräge. Kein Rand, nur Fläche:
   die Kachel (.fase, clip-path) schneidet die Ecke unten rechts selbst ab, die Diagonale bleibt dort in --rahmen sichtbar (ui-rahmen.md) */
.lk-slotschild {
  position: absolute; right: 0; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 12px 0 16px;
  font-size: 9px; font-weight: 800; letter-spacing: 1.4px; line-height: 1; text-transform: uppercase; white-space: nowrap; color: #cfe6ef;
  background: var(--rahmen); clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%); unicode-bidi: plaintext;
}
.lb-karte.an .lk-slotschild { color: #04121a; }
/* Wabenmuster in der gewählten Kachel (Thomas 01.10.): Sechsecke als Maske, Farbe = Modusfarbe (--mrgb), nach rechts stärker; alle paar Sekunden
   läuft ein Lichtband darüber. Pseudo-Element hinter dem Text (z-index -1 im Stapel der Kachel), mit eigener Schräge knapp innerhalb der Kachelkante */
.lb-karte.an:not(.premium-locked)::after {
  content: ''; position: absolute; z-index: -1; inset: var(--rand, 1px); pointer-events: none;
  background-image: linear-gradient(110deg, transparent 38%, rgba(var(--mrgb, 34, 230, 200), 0.95) 50%, transparent 62%), linear-gradient(rgba(var(--mrgb, 34, 230, 200), 0.3), rgba(var(--mrgb, 34, 230, 200), 0.3));
  background-size: 260% 100%, 100% 100%; background-position: 100% 0, 0 0; background-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='21' viewBox='0 0 36 20.785' preserveAspectRatio='none'%3E%3Cpath d='M0 10.392H6L12 0H24L30 10.392H36M6 10.392L12 20.785H24L30 10.392' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(100deg, rgba(0, 0, 0, 0.28), #000 80%); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='21' viewBox='0 0 36 20.785' preserveAspectRatio='none'%3E%3Cpath d='M0 10.392H6L12 0H24L30 10.392H36M6 10.392L12 20.785H24L30 10.392' fill='none' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E"), linear-gradient(100deg, rgba(0, 0, 0, 0.28), #000 80%);
  -webkit-mask-size: 36px 21px, 100% 100%; mask-size: 36px 21px, 100% 100%;
  -webkit-mask-repeat: repeat, no-repeat; mask-repeat: repeat, no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  clip-path: polygon(var(--fase) 0, 100% 0, 100% calc(100% - var(--fase)), calc(100% - var(--fase)) 100%, 0 100%, 0 var(--fase));
  animation: lb-waben 7s ease-in-out infinite;
}
@keyframes lb-waben { 0% { background-position: 100% 0, 0 0; } 55%, 100% { background-position: 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .lb-karte.an:not(.premium-locked)::after { animation: none; } }
.lb-karte.gesperrt { opacity: 0.72; --rahmen: rgba(255,122,47,0.4); }
.lb-karte.gesperrt .lk-name { color: var(--dim-2); }
.lb-karte.frei { display: flex; align-items: center; gap: 12px; padding: 10px 14px; --fuellung: rgba(8,14,22,0.55); --rahmen: rgba(45,226,255,0.16); }
.lb-karte.frei:hover { --fuellung: rgba(45,226,255,0.07); --rahmen: rgba(45,226,255,0.45); }
.lb-karte.frei.an { --fuellung: linear-gradient(100deg, rgba(45,226,255,0.18), rgba(8,12,22,0.85)); --rahmen: var(--neon); }
.lb-karte.frei .lk-name { margin: 0; font-size: 14px; }
.lk-plus { flex: none; width: 32px; height: 32px; display: grid; place-items: center; font-size: 26px; line-height: 1; color: var(--neon); }
.lk-plus.lk-ic { font-size: 20px; filter: grayscale(0.3); opacity: 0.85; }
.lk-sub { margin-top: 2px; font-size: 11px; color: var(--dim); }
.lb-karte.premium-locked { --rahmen: rgba(255,196,64,0.28); }
.lb-karte.premium-locked:hover { --rahmen: rgba(255,196,64,0.65); --fuellung: rgba(255,196,64,0.05); }
.lb-karte.premium-locked .lk-name { color: #fff2c9; }
.lb-karte.multi { --rahmen: rgba(138,107,255,0.35); }
.lb-karte.multi .lk-name { color: #d9ccff; }

/* ---- Übersicht der gewählten Stadt ---- */
.ld-slot { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); }
.ld-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; }   /* Modus-Tag links, Gründung + Login daneben */
.ld-zeile .ld-modi { margin-bottom: 0; }
.ld-zeile .ld-meta { flex: 1 1 auto; min-width: 0; font-size: 11px; }
.ld-name { margin: 4px 0 3px; font-size: 26px; font-weight: 800; letter-spacing: 1px; color: #eafdff; text-shadow: 0 0 18px rgba(45,226,255,0.35); overflow-wrap: anywhere; }
.ld-meta { font-size: 12px; color: var(--dim-2); }
.ld-probleme { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ld-chip { padding: 4px 9px; font-size: 11px; font-weight: 700; color: #ffd9dc; background: rgba(255,90,106,0.15); border-inline-start: 3px solid var(--rot); }
.ld-chip.gesperrt { color: #ffe2c9; background: rgba(255,122,47,0.14); border-inline-start-color: var(--hot); }
.ld-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.ld-kachel { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 9px 11px; background: rgba(255,255,255,0.035); border-inline-start: 2px solid rgba(45,226,255,0.35); }
.ld-kachel > div { min-width: 0; flex: 1 1 auto; }
.ld-kachel img { flex: none; width: 26px; height: 26px; object-fit: contain; margin-top: 2px; }
.ld-kachel .k { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #7f95a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-kachel .v { margin-top: 1px; font-size: 17px; font-weight: 800; color: #eafdff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ld-kachel .s { margin-top: 2px; font-size: 11px; color: var(--dim-2); }
.ld-kachel .ld-balken { margin-top: 6px; }
.ld-kachel.strom .ld-balken b { background: linear-gradient(90deg, var(--neon-2), var(--neon)); }
.ld-balken.voll b { background: var(--rot) !important; }
.ld-block { margin-top: 18px; }
.ld-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #7f95a8; }
.ld-h::after { content: ''; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(45,226,255,0.25), transparent); }
html[dir=rtl] .ld-h::after { background: linear-gradient(270deg, rgba(45,226,255,0.25), transparent); }
.ld-anteile { display: flex; gap: 2px; height: 8px; }
.ld-anteile b { display: block; min-width: 3px; }
.z-R { background: #3fae62; } .z-C { background: #2a9fd8; } .z-oben { background: #b98bff; }
.ld-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; font-size: 12px; color: #9fb3c4; }
.ld-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; vertical-align: -1px; }
.ld-legende b { color: #eafdff; font-variant-numeric: tabular-nums; }
.ld-lager { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 5px; }
.ld-res { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px; background: rgba(255,255,255,0.035); }
.ld-res img { flex: none; width: 26px; height: 26px; object-fit: contain; }
.ld-res > div { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ld-res b { font-size: 13px; color: #eafdff; font-variant-numeric: tabular-nums; }
.ld-res .n { font-size: 10px; color: #8ea3b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-leer { font-size: 12px; color: var(--dim); }
.ld-laedt { height: 40px; background: linear-gradient(90deg, rgba(255,255,255,0.025), rgba(255,255,255,0.07), rgba(255,255,255,0.025)); background-size: 200% 100%; animation: glanz 1.3s linear infinite; }
.ld-laedt.hoch { height: 176px; }
@keyframes glanz { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.lb-detail .namebox { margin-top: 18px; }
.namebox input {   /* Schrägen über .fase (Klasse im Markup, lobby.js) */
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: #eafdff; outline: none;
  --fase: 10px; --rahmen: rgba(45,226,255,0.35); --fuellung: rgba(6,11,19,0.92);
}
.namebox input:focus { --rahmen: var(--neon); }
.namebox input::placeholder { color: #5f7486; }

/* ---- Fuß: Name + Spielen (unten mittig) ---- */
.lb-fuss { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lb-titel { text-align: center; min-height: 20px; }
.lb-name { font-size: 30px; font-weight: 800; letter-spacing: 2px; color: #f2fdff; text-shadow: 0 0 24px rgba(45,226,255,0.55), 0 2px 10px rgba(0,0,0,0.8); }
.lb-sub { margin-top: 2px; font-size: 13px; color: #b7c9d6; text-shadow: 0 1px 6px rgba(0,0,0,0.9); }
.lb-spielen-w { filter: drop-shadow(0 0 18px rgba(45,226,255,0.35)) drop-shadow(0 8px 20px rgba(0,0,0,0.6)); }
.lb-spielen {
  position: relative; min-width: 300px; padding: 16px 44px; cursor: pointer; overflow: hidden;
  font: inherit; font-size: 18px; font-weight: 800; letter-spacing: 4px; text-transform: uppercase; color: #041018;
  --fase: 14px; --rand: 1.5px; --rahmen: rgba(225,245,255,0.6);   /* heller Rahmen (Thomas 07.10.: "mit einem Rahmen"). NUR eine Farbe: .fase setzt --rahmen in
     border-color und in die Verlaufs-Streifen der Schrägen, ein Verlauf macht das ganze background ungültig (Knopf durchsichtig, Tom 07.10.) */
  --fuellung: linear-gradient(115deg, #2de2ff, #7a8cff 60%, #a66bff);
  transition: filter 0.15s, transform 0.1s;
}
.lb-spielen::after {   /* Lichtlauf */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); transform: translateX(-120%);
  animation: lichtlauf 4.5s ease-in-out infinite 1.2s;
}
@keyframes lichtlauf { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .lb-spielen::after { animation: none; } }
.lb-spielen:hover { filter: brightness(1.12) saturate(1.1); }
.lb-spielen:active { transform: translateY(1px); }
.lb-spielen:disabled { cursor: default; filter: grayscale(0.7) brightness(0.6); }
.lb-spielen:disabled::after { animation: none; }
.lb-spielen.neu { --fuellung: linear-gradient(115deg, #38ffb0, #2de2ff); }
.lb-spielen.gesperrt { color: #2a1a00; --fuellung: linear-gradient(115deg, #ffd36a, #ff9a3c); }

/* ---- mittlere Breite: Übersicht + Liste nebeneinander, kein freier Blick in der Mitte ---- */
@media (max-width: 1180px) {
  .lb-mitte { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); grid-template-areas: "detail liste"; }
}
/* ---- breit: Übersicht und Liste reichen bis unten, Name + Spielen stehen groß unten mittig (nicht doppelt in der Übersicht) ---- */
@media (min-width: 1181px) {
  .lb { grid-template-rows: auto minmax(0, 1fr); }
  .lb-fuss { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: max(300px, calc(100vw - 460px - 340px - 120px)); }
  .lb-detail .ld-name { display: none; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .lb { gap: 10px; padding-top: 10px; padding-bottom: 12px; }
  .lb-name { font-size: 22px; }
  .lb-spielen { padding: 12px 36px; font-size: 16px; }
}

/* ---- Handy: Liste oben als Streifen, Übersicht darunter, Spielen unten fest ---- */
@media (max-width: 820px) {
  html, body { height: auto; min-height: 100%; }   /* die Seite scrollt (nicht body), Adressleiste darf einklappen */
  body.lobby-an { overflow: visible; }
  .lb { position: relative; inset: auto; min-height: 100vh; display: block; padding: 10px 16px calc(96px + env(safe-area-inset-bottom)); }
  .lb-kopf { margin-bottom: 12px; }
  .lb-logo { height: 30px; }
  .lb .userbar { padding: 4px 6px; gap: 8px; min-width: 0; }
  .lb .user-sub { display: none; }
  .lb .user-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb .userbar-actions { gap: 6px; }
  .lb .avatar { width: 30px; height: 30px; }
  .lb .userbar-actions .btn { padding: 6px 10px; }
  .lb-mitte { display: flex; flex-direction: column; gap: 14px; }
  .lb-liste { display: contents; }   /* Überschrift + Kartenstreifen oben, Zurücksetzen/Löschen unter der Übersicht */
  .lb-liste .lobby-h { order: -3; margin-bottom: -6px; }
  .slots { order: -2; }
  .lb-neben { order: 2; }
  .slots { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 10px; padding: 4px 2px 10px; margin: 0 -16px; padding-inline: 16px; }
  .lb-kw { flex: 0 0 min(76vw, 290px); scroll-snap-align: center; }
  .slots-sec { flex: 0 0 auto; align-self: center; max-width: 92px; margin: 0; font-size: 9px; letter-spacing: 1.5px; }
  .lb-neben { justify-content: flex-start; padding: 0; }
  .lb-detail, .lb-detail.klein { overflow: visible; padding: 16px; align-self: stretch; }
  .ld-name { font-size: 22px; }
  .lb-fuss { position: fixed; inset-inline: 0; bottom: 0; z-index: 4; padding: 18px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(4,6,12,0.97) 55%, rgba(4,6,12,0)); }
  .lb-titel { display: none; }
  .lb-spielen-w { width: 100%; }
  .lb-spielen { width: 100%; min-width: 0; padding: 14px 20px; font-size: 16px; }
  .sb-schleier { background: linear-gradient(180deg, rgba(4,6,12,0.45) 0%, rgba(4,6,12,0.82) 38%, rgba(4,6,12,0.95) 70%); }
}
@media (max-width: 480px) {
  .lb .user > div { display: none; }   /* nur das Bild, Name steht im Portal */
  .lb-logo { height: 26px; }
}

/* Neue Stadt: Namensfeld über dem Gründen-Knopf (lobby.js neuDetail, Thomas 30.09.) */
.lb-eingabe { width: min(420px, 100%); }
.lb-eingabe.hidden { display: none; }
.lb-eingabe .namebox { margin: 0; }
.lb-eingabe .namebox input { width: 100%; box-sizing: border-box; text-align: center; font-size: 18px; }

/* Logo größer, ragt ~20 px auf die Stats-Box (Thomas 30.09.); nur Desktop, Handy bleibt klein */
@media (min-width: 821px) {
  .lb-kopf { position: relative; z-index: 3; margin-bottom: -36px; align-items: flex-start; pointer-events: none; }   /* 14 px Zeilenabstand + ~22 px auf der Box */
  .lb-kopf > * { pointer-events: auto; }
  .lb-logo { height: 84px; filter: drop-shadow(0 0 24px rgba(45,130,255,0.4)) drop-shadow(0 4px 12px rgba(0,0,0,0.7)); }
  .lb-detail { padding-top: 40px; }
}
@media (max-height: 700px) and (min-width: 821px) {
  .lb-logo { height: 62px; }
  .lb-kopf { margin-bottom: -30px; }
}
/* Logo noch größer (Thomas 01.10.): 104 px, ragt ~40 px auf die Übersicht (14 px Zeilenabstand + 40 px Überlappung = -54), Text beginnt 16 px darunter.
   Nur breit + hoch: 821-1279 px (Kopfzeile bricht um) und Fensterhöhe <= 700 px behalten die kleineren Werte oben */
@media (min-width: 1280px) and (min-height: 701px) {
  .lb-logo { height: 104px; }
  .lb-kopf { margin-bottom: -54px; }
  .lb-detail { padding-top: 56px; }
}

/* =====================================================================================================================
   SPIELMODI (Thomas 30.09.2026, docs/vault/spielmodi.md; js/lobby.js modiZeichnen/modusSetzen): Leiste oben mit den Modi
   (Endlos Türkis, Season Lila, Freies Spiel Hellblau, Multi leicht orange + Schloss), Premium + Urplasma daneben.
   Farbe des gewählten Modus an .lb[data-modus] (--m, --mrgb, --m2): Karten, Übersicht, Spielen-Knopf. Logische Eigenschaften (RTL).
   ===================================================================================================================== */
.lb, .m-endlos { --m: #22e6c8; --mrgb: 34, 230, 200; --m2: #2de2ff; }
.lb[data-modus=season], .m-season { --m: #b56bff; --mrgb: 181, 107, 255; --m2: #ff6bd8; }
.lb[data-modus=frei], .m-frei { --m: #7cc6ff; --mrgb: 124, 198, 255; --m2: #b5e1ff; }
.m-multi { --m: #ff9d57; --mrgb: 255, 157, 87; --m2: #ffc48f; }

/* ---- Leiste der Spielmodi ---- */
.lb-modi { display: flex; align-items: stretch; gap: 8px; min-width: 0; margin: 4px auto 0; }
.lm-tab {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 124px; max-width: 230px;
  padding: 8px 14px; cursor: pointer; font: inherit; color: #dff6ff; text-align: start;
  --fase: 10px; --rahmen: rgba(var(--mrgb), 0.34); --fuellung: linear-gradient(180deg, rgba(var(--mrgb), 0.1), rgba(6, 10, 18, 0.88));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: filter 0.15s, transform 0.1s;
}
.lm-tab:hover { --rahmen: rgba(var(--mrgb), 0.72); }
.lm-tab:active { transform: translateY(1px); }
.lm-tab:focus-visible { outline: none; --rahmen: #fff; }
.lm-tab.an {
  --rahmen: var(--m); --fuellung: linear-gradient(180deg, rgba(var(--mrgb), 0.44), rgba(var(--mrgb), 0.14) 72%, rgba(6, 10, 18, 0.92));
  filter: drop-shadow(0 0 10px rgba(var(--mrgb), 0.5));
}
.lm-tab.an::after { content: ''; position: absolute; inset-inline: 14px; bottom: 0; height: 3px; background: var(--m); box-shadow: 0 0 10px var(--m); }
.lm-kopf { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.lm-name { font-size: 13px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #f2fdff; }
.lm-tab.an .lm-name { text-shadow: 0 0 10px rgba(var(--mrgb), 0.9); }
.lm-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--m); box-shadow: 0 0 8px var(--m); }
.lm-zahl { margin-inline-start: auto; padding: 1px 6px; font-size: 10px; font-weight: 800; letter-spacing: 0.5px; color: #04121a; background: var(--m); font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.lm-sub { font-size: 10.5px; letter-spacing: 0.3px; color: rgba(var(--mrgb), 1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.lm-sname { color: #f6ecff; font-weight: 700; }
.lm-warn {
  width: 16px; height: 14px; display: grid; place-items: end center; padding-bottom: 1px; flex: none;
  background: #ffce5e; color: #1a1205; font-weight: 900; font-size: 10px; line-height: 1; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lm-tab.zu { cursor: not-allowed; --rahmen: rgba(255, 157, 87, 0.3); --fuellung: linear-gradient(180deg, rgba(255, 157, 87, 0.1), rgba(10, 8, 8, 0.86)); filter: saturate(0.55) brightness(0.82); }
.lm-tab.zu:hover { --rahmen: rgba(255, 157, 87, 0.5); }
.lm-tab.zu .lm-name { color: #ffd6b5; }
.lm-tab.zu .lm-sub { color: #c9a58a; }
.lm-schloss { font-size: 11px; filter: grayscale(0.2); }
.lm-tab.zu.m-season { --rahmen: rgba(181, 107, 255, 0.34); --fuellung: linear-gradient(180deg, rgba(181, 107, 255, 0.13), rgba(10, 8, 16, 0.86)); }
.lm-tab.zu.m-season:hover { --rahmen: rgba(181, 107, 255, 0.58); }
.lm-tab.zu.m-season .lm-name { color: #e4d0ff; }
.lm-tab.zu.m-season .lm-sub { color: #b9a2d8; }
.lm-tab.zu.an { filter: saturate(0.75) drop-shadow(0 0 8px rgba(var(--mrgb), 0.35)); }

/* ---- Nutzerbereich oben rechts: Premium aktiv/inaktiv (+ Restlaufzeit) und Urplasma (Thomas 30.09. spät), lobby.js kontoZeichnen ---- */
.lb .userbar { gap: 10px; }
.lb-konto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lk-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; cursor: pointer; font: inherit; white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #eafdff;
  --fase: 7px; --rahmen: rgba(45, 226, 255, 0.35); --fuellung: rgba(45, 226, 255, 0.06);
  transition: filter 0.15s;
}
.lk-chip:hover { filter: brightness(1.2); }
.lk-chip:focus-visible { outline: none; --rahmen: #fff; }
.lk-premium.an { color: #fff3cf; --rahmen: rgba(255, 206, 94, 0.72); --fuellung: linear-gradient(160deg, rgba(255, 206, 94, 0.3), rgba(255, 140, 40, 0.1) 70%, rgba(12, 9, 4, 0.6)); }
.lk-premium.aus { color: #d6c69c; --rahmen: rgba(255, 206, 94, 0.36); --fuellung: rgba(255, 206, 94, 0.05); }
.lk-stern { font-style: normal; color: #ffce5e; text-shadow: 0 0 8px rgba(255, 206, 94, 0.8); }
.lk-premium.aus .lk-stern { color: #8f7f5a; text-shadow: none; }
.lk-rest { font-weight: 600; text-transform: none; letter-spacing: 0.3px; color: #ffe3a3; unicode-bidi: plaintext; }
.lk-up { color: #f4dcff; --rahmen: rgba(213, 107, 255, 0.55); --fuellung: linear-gradient(160deg, rgba(213, 107, 255, 0.22), rgba(10, 6, 18, 0.6)); }
.lk-up .up-orb { --fw: 20px; margin: -4px 0; }
/* Urplasma-Kugel wie im HUD/Shop (Sprite 6x10, gleiche Regeln wie css/shop.css; Thomas 30.09.: nicht der lila Kristall) */
.up-orb { --fw: 32px; display: inline-block; flex: none; width: var(--fw); height: var(--fw);
  background: url('/assets/ui/urplasma_64.webp?v=1') no-repeat 0 0; background-size: calc(var(--fw) * 6) calc(var(--fw) * 10);
  animation: upOrbH 300ms steps(6) infinite, upOrbV 3000ms steps(10) infinite;
  filter: drop-shadow(0 0 6px rgba(200, 90, 255, 0.55)); vertical-align: middle; }
@keyframes upOrbH { from { background-position-x: 0; } to { background-position-x: calc(var(--fw) * -6); } }
@keyframes upOrbV { from { background-position-y: 0; } to { background-position-y: calc(var(--fw) * -10); } }
@media (prefers-reduced-motion: reduce) { .up-orb { animation: none; } }
.lk-up b { font-size: 12px; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
/* Legende in der oberen Rahmenlinie wie <fieldset>/<legend> (Thomas 30.09. spät): Wrapper .lk-feld ohne clip-path trägt das Label
   über der Oberkante; im Chip ist border-top durchsichtig und die obere Linie besteht aus zwei Hintergrund-Stücken links/rechts der
   Lücke (--lk-l1/--lk-l2 aus lobby.js legendenMessen). Die Schrägen bleiben die .fase-Streifen (nie border + clip-path allein). */
.lk-feld { position: relative; display: inline-flex; margin-top: 5px; }
.lk-legende {
  position: absolute; top: 0; inset-inline-start: 13px; transform: translateY(-52%); pointer-events: none; white-space: nowrap; z-index: 2;   /* über dem Chip (clip-path = eigener Stapel, lag sonst über der Schrift) */
  font-size: 8.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; line-height: 1;
  color: #ffce5e; text-shadow: 0 0 6px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
}
.lk-feld-premium.aus .lk-legende { color: #c9b98f; }
.lk-feld-up .lk-legende { color: #e6c2ff; }
.lk-chip.fase.mit-legende {
  border-top-color: transparent !important;
  background:
    linear-gradient(var(--rahmen), var(--rahmen)) left top / var(--lk-l1, 100%) var(--rand) no-repeat border-box,
    linear-gradient(var(--rahmen), var(--rahmen)) right top / var(--lk-l2, 0px) var(--rand) no-repeat border-box,
    linear-gradient(135deg, var(--fase-streifen)) left top / var(--fase-g) var(--fase-g) no-repeat border-box,
    linear-gradient(315deg, var(--fase-streifen)) right bottom / var(--fase-g) var(--fase-g) no-repeat border-box,
    var(--fuellung) !important;
  padding-top: 8px;
}
html:is([lang^=ar], [lang^=fa], [lang^=ur]) .lk-legende { letter-spacing: 0; font-size: 10px; }
.lb-abmelden { display: inline-flex; align-items: center; gap: 6px; }
.lb-abmelden svg { width: 13px; height: 13px; flex: none; }
.lk-stern svg { width: 13px; height: 13px; display: block; }
.lm-schloss { display: inline-flex; }
.lm-schloss svg { width: 11px; height: 11px; }
.lock svg { width: 10px; height: 10px; vertical-align: -1px; fill: currentColor; }
.lk-plus.lk-ic svg { width: 20px; height: 20px; }

/* ---- Kopf der Liste: Modus, Hinweis, Rangliste ---- */
.lb-liste-kopf { display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding-inline-start: 4px; }
.lb-liste .lb-liste-kopf .lobby-h { flex: 1 1 auto; margin: 0; padding: 0; color: rgba(var(--mrgb), 0.95); }
.lb-rang {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; cursor: pointer; font: inherit;
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; color: #04121a;
  --fase: 7px; --rand: 0px; --rahmen: transparent; --fuellung: linear-gradient(115deg, var(--m), var(--m2));
}
.lb-rang:hover { filter: brightness(1.12); }
.lb-rang svg { width: 13px; height: 13px; fill: currentColor; }
.lb-liste-hinweis { margin: 0 0 8px; padding-inline-start: 4px; font-size: 11.5px; line-height: 1.45; color: #d6c7f0; }
.lb-liste-hinweis:empty { display: none; }
.lh-marke {
  display: inline-block; padding: 3px 9px; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
  color: #04121a; background: linear-gradient(90deg, var(--m), var(--m2)); box-shadow: 0 0 14px rgba(var(--mrgb), 0.5);
}
.lh-marke.leise { color: var(--m); background: rgba(var(--mrgb), 0.12); box-shadow: none; }

/* ---- Karten, Übersicht und Spielen-Knopf in der Farbe des Modus ---- */
.lb[data-modus] .lb-karte { --rahmen: rgba(var(--mrgb), 0.24); --fuellung: linear-gradient(100deg, rgba(var(--mrgb), 0.09), rgba(7, 11, 20, 0.84) 55%); }
.lb[data-modus] .lb-karte:hover { --rahmen: rgba(var(--mrgb), 0.6); }
.lb[data-modus] .lb-karte.an { --rahmen: var(--m); --fuellung: linear-gradient(100deg, rgba(var(--mrgb), 0.28), rgba(var(--mrgb), 0.08) 55%, rgba(8, 12, 22, 0.9)); }
.lb[data-modus] .lb-kw.an { filter: drop-shadow(0 0 12px rgba(var(--mrgb), 0.5)); }
.lb[data-modus] .lb-karte.an .lk-name { text-shadow: 0 0 10px rgba(var(--mrgb), 0.55); }
.lb[data-modus] .lk-spark { fill: rgba(var(--mrgb), 0.5); }
.lb[data-modus] .lb-karte.an .lk-spark { fill: rgba(var(--mrgb), 0.9); }
.lb[data-modus] .lk-balken b, .lb[data-modus] .ld-balken b { background: linear-gradient(90deg, var(--m), var(--m2)); }
.lb[data-modus] .lb-karte.frei { --fuellung: rgba(8, 14, 22, 0.55); --rahmen: rgba(var(--mrgb), 0.2); }
.lb[data-modus] .lb-karte.frei:hover { --fuellung: rgba(var(--mrgb), 0.07); --rahmen: rgba(var(--mrgb), 0.5); }
.lb[data-modus] .lb-karte.frei.an { --fuellung: linear-gradient(100deg, rgba(var(--mrgb), 0.2), rgba(8, 12, 22, 0.85)); --rahmen: var(--m); }
.lb[data-modus] .lk-plus { color: var(--m); }
.lb[data-modus] .lb-karte.premium-locked { --rahmen: rgba(255, 196, 64, 0.3); --fuellung: rgba(8, 14, 22, 0.55); }
.lb[data-modus] .lb-karte.premium-locked:hover { --rahmen: rgba(255, 196, 64, 0.7); --fuellung: rgba(255, 196, 64, 0.06); }
.lb[data-modus] .lb-karte.gesperrt { --rahmen: rgba(255, 122, 47, 0.45); }
.lb[data-modus] .lb-karte.wartet { --rahmen: rgba(255, 206, 94, 0.5); }
.lb[data-modus] .lb-karte.wartet.an { --rahmen: #ffce5e; }
.lb[data-modus] .lb-karte.keine-season { cursor: default; --rahmen: rgba(var(--mrgb), 0.22); }
.lk-ende { color: #ffce5e; font-weight: 800; }
.lk-stufe.frist span { color: #ffe3a3; }
.lk-marke { padding: 1px 6px; font-size: 9px; letter-spacing: 1px; color: var(--m); border: 1px solid rgba(var(--mrgb), 0.45); white-space: nowrap; unicode-bidi: plaintext; }
.lk-marke.herkunft { color: #d9b8ff; border-color: rgba(181, 107, 255, 0.45); }
.lb[data-modus] .lb-detail { --rahmen: rgba(var(--mrgb), 0.3); }
.lb[data-modus] .ld-name { text-shadow: 0 0 18px rgba(var(--mrgb), 0.4); }
.lb[data-modus] .ld-kachel { border-inline-start-color: rgba(var(--mrgb), 0.4); }
.lb[data-modus] .ld-h::after { background: linear-gradient(90deg, rgba(var(--mrgb), 0.3), transparent); }
html[dir=rtl] .lb[data-modus] .ld-h::after { background: linear-gradient(270deg, rgba(var(--mrgb), 0.3), transparent); }
.ld-modi { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ld-modus { padding: 3px 9px; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; color: #04121a; background: var(--m); }
.ld-tempo { padding: 3px 9px; font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--m); background: rgba(var(--mrgb), 0.12); border-inline-start: 2px solid var(--m); unicode-bidi: plaintext; }
.ld-tempo.herkunft { color: #d9b8ff; background: rgba(181, 107, 255, 0.12); border-inline-start-color: #b56bff; }
.ld-tempo.leise { color: #c3d2de; background: rgba(255, 255, 255, 0.05); border-inline-start-color: rgba(255, 255, 255, 0.25); }
.ld-chip.wartet { color: #ffecc2; background: rgba(255, 206, 94, 0.14); border-inline-start-color: #ffce5e; }
.lb[data-modus] .lb-name { text-shadow: 0 0 24px rgba(var(--mrgb), 0.6), 0 2px 10px rgba(0, 0, 0, 0.8); }
.lb[data-modus] .lb-spielen-w { filter: drop-shadow(0 0 18px rgba(var(--mrgb), 0.42)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.6)); }
.lb[data-modus=endlos] .lb-spielen { --fuellung: linear-gradient(115deg, #22e6c8, #2de2ff 55%, #7a8cff); }
.lb[data-modus=season] .lb-spielen { --fuellung: linear-gradient(115deg, #d59bff, #b56bff 50%, #ff6bd8); }
.lb[data-modus=frei] .lb-spielen { --fuellung: linear-gradient(115deg, #c4e7ff, #7cc6ff 55%, #6a8dff); }
.lb[data-modus] .lb-spielen.neu { --fuellung: linear-gradient(115deg, #38ffb0, var(--m)); }
.lb[data-modus] .lb-spielen.gesperrt { color: #2a1a00; --fuellung: linear-gradient(115deg, #ffd36a, #ff9a3c); }
.lb[data-modus] .lb-spielen.ueberfuehren { font-size: 15px; letter-spacing: 2px; --fuellung: linear-gradient(115deg, #b56bff, #22e6c8); }

/* ---- Gründen: Kategorie (Season, fest) bzw. Tempo (Freies Spiel) über dem Namen ---- */
.lb-wahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
.lw-opt {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 6px; cursor: pointer; font: inherit; color: #dff6ff;
  --fase: 8px; --rahmen: rgba(var(--mrgb), 0.3); --fuellung: rgba(6, 11, 19, 0.9);
}
.lw-opt b { font-size: 12.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }
.lw-opt em { font-style: normal; color: var(--m); unicode-bidi: plaintext; }
.lw-opt span { font-size: 10.5px; color: #9fb3c4; white-space: nowrap; unicode-bidi: plaintext; }
.lw-opt:hover { --rahmen: rgba(var(--mrgb), 0.7); }
.lw-opt.an { --rahmen: var(--m); --fuellung: linear-gradient(180deg, rgba(var(--mrgb), 0.36), rgba(6, 11, 19, 0.92)); }
.lw-opt.an em { color: #fff; }
.lw-opt.an span { color: #e6f3ff; }
.lw-hinweis { margin: -2px 0 8px; font-size: 11px; color: #d9c2ff; text-align: center; }
.lb[data-modus] .namebox input { --rahmen: rgba(var(--mrgb), 0.45); }
.lb[data-modus] .namebox input:focus { --rahmen: var(--m); }

/* ---- Löschen: deutliche Rückfrage im Spielstil ---- */
.lb-dlg-hg { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(2, 4, 8, 0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: rise 0.2s ease both; }
.lb-dlg {
  width: min(470px, 100%); padding: 22px 24px 20px; color: #f1dfe2;
  --fase: 18px; --rand: 2px; --rahmen: rgba(255, 90, 106, 0.8); --fuellung: linear-gradient(180deg, rgba(44, 9, 16, 0.97), rgba(10, 6, 12, 0.98));
}
.dlg-kopf { display: flex; align-items: center; gap: 12px; }
.dlg-kopf h2 { margin: 0; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: #ffe1e4; text-shadow: 0 0 14px rgba(255, 90, 106, 0.6); }
.dlg-warn { flex: none; width: 30px; height: 26px; display: grid; place-items: end center; padding-bottom: 2px; background: var(--rot); color: #1a0508; font-weight: 900; font-size: 16px; line-height: 1; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.dlg-text { margin: 14px 0 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.dlg-up { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(213, 107, 255, 0.11); border-inline-start: 3px solid #d56bff; }
.dlg-up .up-orb { --fw: 30px; }
.dlg-up b { display: block; font-size: 13.5px; color: #f6e2ff; }
.dlg-up span { display: block; margin-top: 2px; font-size: 12px; color: #dcc6ec; unicode-bidi: plaintext; }
.dlg-label { display: block; margin: 16px 0 8px; font-size: 13px; color: #e8d3d7; }
.dlg-zahl { font-size: 17px; color: #fff; letter-spacing: 1px; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.dlg-eingabe { width: 100%; padding: 11px 14px; font: inherit; font-size: 19px; text-align: center; letter-spacing: 2px; color: #fff; outline: none; --fase: 9px; --rahmen: rgba(255, 90, 106, 0.45); --fuellung: rgba(6, 4, 8, 0.9); }
.dlg-eingabe:focus { --rahmen: #ff8a96; }
.dlg-eingabe.ok { --rahmen: #38ffb0; }
.dlg-knoepfe { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.dlg-knoepfe .btn { border-radius: 0; padding: 9px 16px; }
.dlg-los:disabled { opacity: 0.45; cursor: default; }
.dlg-los:not(:disabled) { background: rgba(255, 90, 106, 0.26); border-color: var(--rot); color: #fff; }
html:is([lang^=ar], [lang^=fa], [lang^=ur]) .lb-dlg * { letter-spacing: 0 !important; }

/* ---- Breiten (Thomas 30.09. spät: Modi oben mittig, Logo wieder groß wie vorher; Logo 84 px ragt auf die Übersicht, Regel
   „Logo größer“ oben): ab 1800 px Leiste genau mittig (absolut), 1280-1799 mittig zwischen Logo und Nutzerbereich (kompakter,
   Restlaufzeit erst ab 1600, unter 1400 ohne Unterzeile), 821-1279 eigene Zeile, Handy: Logo, Nutzerbereich, Modi als Streifen ---- */
@media (min-width: 1800px) {
  .lb-modi { position: absolute; top: 4px; left: calc(50% - 70px); transform: translateX(-50%); margin: 0; }   /* 05.10.2026: etwas nach links, Platz für den Nutzerbereich */
}
@media (min-width: 1280px) and (max-width: 1799px) {
  .lb-modi { flex: 1 1 auto; justify-content: center; min-width: 0; margin: 4px 12px 0; }
}
@media (min-width: 1280px) and (max-width: 1599px) { .lk-rest { display: none; } }
@media (min-width: 821px) and (max-width: 1899px) { .lb .user > div { display: none; } }
@media (min-width: 821px) and (max-width: 1499px) {
  .lm-tab { min-width: 0; padding: 6px 10px; }
  .lm-name { font-size: 12px; letter-spacing: 1.1px; }
  .lb-abmelden span { display: none; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .lm-sub { display: none; }
  .lm-tab { padding: 9px 10px; }
  .lb-modi { gap: 6px; }
}
@media (min-width: 821px) and (max-width: 1279px) {
  .lb-kopf { flex-wrap: wrap; margin-bottom: 6px; }
  .lb-modi { order: 3; flex: 1 0 100%; justify-content: center; margin-top: 4px; }
  .lb-detail { padding-top: 18px; }
  .lk-rest { display: none; }
}
@media (max-width: 820px) {
  .lb-kopf { flex-wrap: wrap; justify-content: center; gap: 10px; }
  .lb-logo { height: 48px; }
  .lb .userbar { flex: 1 0 100%; justify-content: space-between; }
  .lb-konto { gap: 6px; }
  .lk-chip { padding: 6px 9px; font-size: 10px; letter-spacing: 0.6px; }
  .lb-abmelden span { display: none; }
  .lb-modi { order: 3; flex: 1 0 100%; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 3px 16px 7px; gap: 6px; }
  .lb-modi::-webkit-scrollbar { display: none; }
  .lm-tab { flex: 0 0 auto; min-width: 0; max-width: 200px; padding: 6px 10px; }
  .lm-name { font-size: 11.5px; letter-spacing: 1px; }
  .lm-sub { font-size: 10px; }
  .lb-liste-kopf { order: -3; margin-bottom: -6px; }
  .lb-liste-hinweis { order: -3; margin: 0; }
  .lb-wahl { gap: 4px; }
  .lw-opt { padding: 7px 4px; }
  .lw-opt b { font-size: 11px; letter-spacing: 0.5px; }
  .lw-opt span { font-size: 9.5px; }
  .lb-dlg { padding: 18px 16px 16px; }
}
@media (max-width: 480px) {
  .lb-logo { height: 44px; }
  .lk-rest { display: none; }
}

/* Abmelden bündig mit den Legenden-Feldern (Thomas 30.09. spät: gleiche Ober- und Unterkante): feste gleiche Höhe, derselbe
   Versatz nach unten wie .lk-feld (Platz für die Legende), Inhalt mittig */
.lk-chip, .lb .userbar-actions .lb-abmelden { height: 30px; padding-block: 0; }
.lk-chip.fase.mit-legende { padding-top: 0; }
.lb .userbar-actions { margin-top: 5px; }
@media (max-width: 820px) { .lk-chip, .lb .userbar-actions .lb-abmelden { height: 28px; } }

/* ---- Freunde-Knopf im Nutzerbereich (Icon + Zahl online, Punkt grün wenn jemand online ist; Abzeichen = offene Anfragen), lobby.js kontoZeichnen ---- */
.lk-fr { color: #d3fff0; --rahmen: rgba(56, 255, 176, 0.45); --fuellung: linear-gradient(160deg, rgba(56, 255, 176, 0.14), rgba(6, 14, 18, 0.6)); }
.lk-fr.on { --rahmen: rgba(56, 255, 176, 0.75); }
.lk-feld-fr .lk-legende { color: #a8ffdc; }
.lk-fr-ic { display: inline-flex; font-style: normal; color: #7dffd0; }
.lk-fr-ic svg { width: 15px; height: 15px; display: block; }
.lk-fr-punkt { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #56636f; }
.lk-fr.on .lk-fr-punkt { background: #38ffb0; box-shadow: 0 0 7px #38ffb0; }
.lk-fr b { font-size: 12px; font-variant-numeric: tabular-nums; unicode-bidi: plaintext; }
.lk-fr-neu { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff3d6e; color: #fff; font: 700 10px/16px "Segoe UI", Arial, sans-serif; letter-spacing: 0; text-align: center; }