/*
 * TravTools · © MUNLabs
 * account_redesign.css — Elegantere, kompaktere Optik der Account-Seiten (Design-Tokens).
 *
 * Scope: NUR .tt-profile-wrap (Mein Account) und .tt-mw-wrap (Meine Welten).
 * Wird als LETZTE Datei geladen (siehe css_stack.php) und gewinnt damit die Kaskade
 * gegen die alten Account-Regeln (u.a. der blaue Hover) und cards_unify.css.
 *
 * Buttons bleiben bewusst gold (globale Vorgabe) — siehe buttons.css.
 */

:root{
  --ac-gold: #f2c14a;
  --ac-gold-2: #d6a439;
  --ac-card-bg: rgba(255,255,255,.028);
  --ac-line: rgba(255,255,255,.08);
  --ac-line-soft: rgba(255,255,255,.06);
  --ac-muted: #8b93ac;
  --ac-faint: #6f7794;
}

/* ================= Kopfbereich ================= */
.tt-profile-wrap .tt-header-standalone,
.tt-mw-wrap .tt-header-row{ margin-bottom: 22px; }
.tt-profile-wrap .tt-header-standalone h1,
.tt-mw-wrap .tt-header-row h1{
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  margin: 0 0 4px !important;
}
.tt-profile-wrap .tt-subtitle,
.tt-mw-wrap .tt-subtitle{ color: var(--ac-muted) !important; font-size: 13px !important; }

/* ================= Profil-Karte + Avatar + Chips ================= */
.tt-profile-wrap .tt-profile-card{
  background: var(--pr-card, linear-gradient(180deg, rgba(22,32,58,.72), rgba(10,16,32,.78))) !important;
  border: 1px solid var(--ac-line) !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: var(--tt-shadow-2), var(--tt-hi) !important;
}
.tt-profile-wrap .tt-user-header{
  display: flex !important;
  align-items: center;
  gap: 15px;
  margin-bottom: 0 !important;
}
.tt-profile-wrap .tt-ac-avatar{
  width: 54px; height: 54px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0d1424;
  border: 1.5px solid rgba(242,193,74,.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--ac-gold);
}
.tt-profile-wrap .tt-user-header h2{
  font-size: 18px !important;
  display: flex; align-items: center; gap: 8px;
  margin: 0 !important;
}
.tt-profile-wrap .tt-user-header p{
  font-size: 12.5px !important; color: var(--ac-muted) !important;
  font-family: monospace; margin: 2px 0 0 !important;
}

/* Label/Wert-Liste -> luftiges 2-Spalten-Raster mit feinem Trennstrich */
.tt-profile-wrap .tt-detail-list{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 24px;
  margin-top: 0 !important;
  padding-top: 18px;
  border-top: 1px solid var(--ac-line-soft);
}
.tt-profile-wrap .tt-detail-item{
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 5px;
}
.tt-profile-wrap .tt-detail-item label{
  font-size: 10px !important; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ac-faint) !important; font-weight: 700 !important;
}
.tt-profile-wrap .tt-detail-item span{ font-size: 14px !important; font-weight: 700 !important; }
.tt-profile-wrap .tt-detail-item .tt-lvl-badge,
.tt-profile-wrap .tt-detail-item .tt-donor-val{ color: var(--ac-gold) !important; }

/* ================= Abschnitts-Label "Meine Welten" ================= */
.tt-profile-wrap .tt-worlds-label{
  display: flex !important; align-items: center; gap: 10px;
  font-size: 10.5px !important; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ac-faint) !important; font-weight: 700 !important;
  margin: 10px 0 2px !important;
}
.tt-profile-wrap .tt-worlds-label::after{
  content: ""; flex: 1; height: 1px; background: var(--ac-line-soft);
}

/* ================= Welt-Karten (beide Seiten vereinheitlicht, Glas) ================= */
.tt-profile-wrap .tt-mini-world,
.tt-mw-wrap .tt-world-card{
  background: var(--pr-card, linear-gradient(180deg, rgba(22,32,58,.72), rgba(10,16,32,.78))) !important;
  border: 1px solid var(--ac-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--tt-shadow-2), var(--tt-hi) !important;
}
.tt-profile-wrap .tt-mini-world.is-active{ border-left: 3px solid var(--ac-gold) !important; }
.tt-mw-wrap .tt-world-card.is-joined{ border-left: 3px solid var(--ac-gold) !important; }

/* Hover: Gold-Glow, kein Springen */
.tt-profile-wrap .tt-mini-world:hover,
.tt-mw-wrap .tt-world-card:hover{
  background: var(--pr-card-hover, linear-gradient(180deg, rgba(30,44,80,.78), rgba(12,19,38,.82))) !important;
  border-color: rgba(242,193,74,.35) !important;
  box-shadow: var(--tt-shadow-2), var(--tt-hi), 0 0 0 1px rgba(242,193,74,.10) inset, 0 0 30px rgba(242,193,74,.10) !important;
  transform: none !important;
}

/* Welt-ID als dezenter Gold-Tag */
.tt-profile-wrap .tt-mw-badge,
.tt-mw-wrap .tt-wc-badge{
  background: rgba(242,193,74,.1) !important;
  border: 1px solid rgba(242,193,74,.25) !important;
  color: var(--ac-gold) !important;
}

/* ================= Aktions-Kacheln (Mein Account) ================= */
.tt-profile-wrap .tt-menu-grid{ display: flex !important; flex-direction: column; gap: 9px; }
.tt-profile-wrap .tt-menu-btn{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--ac-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--tt-hi) !important;
}
.tt-profile-wrap .tt-menu-btn:hover{
  background: rgba(242,193,74,.08) !important;
  border-color: rgba(242,193,74,.40) !important;
  box-shadow: var(--tt-glow-gold-soft), var(--tt-hi) !important;
  transform:none !important;
}
/* Icon in der Kachel als dezenter Chip */
.tt-profile-wrap .tt-menu-btn > i{
  width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); color: var(--ac-muted);
  flex: 0 0 auto;
}
/* Primär-Kachel (Welt hinzufügen) gold */
.tt-profile-wrap .tt-menu-btn.btn-gold{
  background: linear-gradient(180deg, var(--ac-gold), var(--ac-gold-2)) !important;
  color: #131722 !important;
  border: none !important;
}
.tt-profile-wrap .tt-menu-btn.btn-gold > i{ background: rgba(19,23,34,.14); color: #131722; }
/* Abmelden dezent rot */
.tt-profile-wrap .tt-menu-btn.btn-danger{
  background: transparent !important;
  border: 1px solid rgba(224,138,138,.25) !important;
  color: #e08a8a !important;
}
.tt-profile-wrap .tt-menu-btn.btn-danger > i{ background: rgba(224,138,138,.12); color: #e08a8a; }

/* ================= Volle Breite ausnutzen ================= */
/* Meine Welten (eigene Seite): responsives Karten-Raster */
.tt-mw-wrap .tt-worlds-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 16px !important;
  align-items: start;
}

/* Mein Account: Inhalt links (füllt), Aktionen als schmale Leiste rechts */
.tt-profile-wrap .tt-profile-grid{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 340px !important;
  gap: 18px !important;
  align-items: start !important;
}

/* Linke Spalte: Profilkarte + Label spannen voll, Welten fließen mehrspaltig */
.tt-profile-wrap .tt-left-col{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 480px)) !important;
  gap: 14px !important;
  align-content: start !important;
  justify-content: start !important;
  min-width: 0 !important;
}
.tt-profile-wrap .tt-left-col > *:not(.tt-mini-world){ grid-column: 1 / -1 !important; }

/* Buttons in den Welt-Karten dürfen umbrechen statt abgeschnitten zu werden */
.tt-profile-wrap .tt-mw-footer,
.tt-profile-wrap .tt-mw-footer > div,
.tt-mw-wrap .tt-wc-footer,
.tt-mw-wrap .tt-wc-footer .tt-ally-section{
  flex-wrap: wrap !important;
}
.tt-profile-wrap .tt-mw-footer .tt-btn-ally,
.tt-mw-wrap .tt-wc-footer .tt-btn-ally{
  flex: 1 1 auto !important;
}

/* Aktions-Kacheln füllen die rechte Leiste */
.tt-profile-wrap .tt-menu-btn{ width: 100% !important; }

/* Schmalere Ansicht: alles einspaltig */
@media (max-width: 1024px){
  .tt-profile-wrap .tt-profile-grid{ grid-template-columns: 1fr !important; }
  .tt-profile-wrap .tt-left-col{ grid-template-columns: 1fr !important; }
}

/* ================= Welt-Karten: Fuss mit Buttons (Spalte, volle Breite, feste Hoehe) ================= */
body.tt-app .tt-mw-wrap .tt-wc-footer{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  gap:10px !important; margin-top:auto !important; width:100% !important;
}
body.tt-app .tt-mw-wrap .tt-wc-footer > *{ flex:0 0 auto !important; width:100% !important; margin:0 !important; }
body.tt-app .tt-mw-wrap .tt-wc-footer form{ display:block !important; }
body.tt-app .tt-mw-wrap .tt-wc-footer .tt-ally-section{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; }
body.tt-app .tt-mw-wrap .tt-wc-footer .tt-ally-section > *{ flex:1 1 140px !important; width:auto !important; }
body.tt-app .tt-mw-wrap .tt-wc-footer :is(.tt-btn-play,.tt-btn-join,.tt-btn-leave,.tt-btn-ally,.tt-status-box){
  width:100% !important; height:var(--btn-h) !important; min-height:var(--btn-h) !important; flex-basis:auto !important;
}
body.tt-app .tt-mw-wrap .tt-wc-body{ flex:1 1 auto !important; }
body.tt-app .tt-mw-wrap .tt-world-card{ min-height:0 !important; height:auto !important; }