/* ================= MODERN GAMING AESTHETIC ================= */
/* Fonturi self-hosted (woff2 locale, fără dependență de Google — identice pe orice OS, merg offline) */
@font-face { font-family: 'Press Start 2P'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/press-start-2p-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/space-mono-v17-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/space-mono-v17-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/orbitron-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Orbitron'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/orbitron-latin_latin-ext-700.woff2') format('woff2'); }

:root {
  --bg-primary: #0a0e27;
  --bg-secondary: #1a1f3a;
  --bg-card: #252b4a;
  --accent-primary: #ff6b35;
  --accent-secondary: #f7931e;
  --accent-gold: #ffd700;
  --text-primary: #e0e6ed;
  --text-secondary: #a0a8b8;
  --success: #4ecdc4;
  --danger: #ff6b6b;
  --warning: #ffe66d;
  --info: #4d96ff;
  --border: #3a4466;
  --shadow: rgba(0, 0, 0, 0.5);
  --gradient-primary: linear-gradient(135deg, #ff6b35, #f7931e);
  --gradient-success: linear-gradient(135deg, #4ecdc4, #44a08d);
  --gradient-danger: linear-gradient(135deg, #ff6b6b, #ff4757);
  --gradient-gold: linear-gradient(135deg, #ffd700, #ffa500);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  background: linear-gradient(135deg, var(--bg-primary) 0%, #1a1535 100%);
  color: var(--text-primary);
  font-family: 'Space Mono', monospace;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255, 107, 53, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(78, 205, 196, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(77, 150, 255, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ================= LOADER ================= */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loader-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.3em, 7vw, 2.5em);
  color: var(--accent-primary);
  margin-bottom: 24px;
  text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
  animation: glow 2s ease-in-out infinite alternate;
  text-align: center;
  max-width: 92vw;
  line-height: 1.25;
  padding: 0 12px;
  word-break: break-word;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--border);
  border-top: 4px solid var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  z-index: 1;
  opacity: 0;
  animation: fadeIn 0.5s ease 0.3s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= HEADER ================= */
.app-header {
  position: sticky;
  top: 0;
  z-index: 200;
  margin: -20px 0 24px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(13,16,38,.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
/* Lipește bara de marginea de sus: anulează exact padding-top-ul .container
   (max(24px, safe-area)) și mută inset-ul de notch în padding-ul propriu, ca pe
   telefoanele cu notch conținutul să rămână sub crestătură, dar fundalul să urce sus. */
@supports (padding: max(0px)) {
  .app-header {
    margin-top: calc(-1 * max(24px, env(safe-area-inset-top)));
    padding-top: calc(10px + env(safe-area-inset-top));
  }
}

/* Logo — mic, stânga, la dimensiunea butoanelor (fără animație) */
.app-header .app-logo {
  font-family: 'Press Start 2P', monospace;
  color: var(--accent-primary);
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(.95em, 2.6vw, 1.3em);
  line-height: 1;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
.app-logo-dice { font-size: 1.1em; flex: 0 0 auto; }
.app-logo-text { overflow: hidden; text-overflow: ellipsis; }

/* Acțiuni — dreapta, mereu pe un rând */
.header-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ---- Butoane unitare (aceeași înălțime) ---- */
.hbtn {
  --hbtn-h: 40px;
  height: var(--hbtn-h);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 11px;
  color: var(--text-primary, #eee);
  font-size: .85em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, transform .1s ease;
}
.hbtn:hover { border-color: var(--accent-primary, #ff6b35); background: var(--bg-secondary, #252b4a); }
.hbtn:active { transform: scale(.96); }
.hbtn:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }

.hbtn-icon { width: var(--hbtn-h); padding: 0; justify-content: center; font-size: 1.02em; }
.hbtn-icon .fa-bell { color: var(--accent-primary, #ff6b35); }
.hbtn-icon .fa-user-group { color: var(--success, #4ecdc4); }

.hbtn-named { max-width: 30vw; }
.hbtn-lead { color: var(--accent-primary, #ff6b35); font-size: .95em; }
.hbtn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbtn-caret { font-size: .68em; opacity: .6; }
.hbtn-avatar { display: inline-flex; align-items: center; }
.hbtn-avatar img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; display: block; }

.hbtn-badge {
  position: absolute; top: -6px; right: -6px;
  background: #e74c3c; color: #fff;
  border-radius: 10px; font-size: .6em; font-weight: 700;
  padding: 1px 5px; line-height: 1.4;
  border: 2px solid var(--bg-primary, #0a0e27);
}
.hbtn-badge-online { background: var(--success, #4ecdc4); color: #06231f; }

/* ---- Pastila de rol (înlocuiește badge-ul ADMIN galben) ---- */
.role-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 8px;
  font-size: .72em; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
  background: rgba(255,107,53,.16); color: var(--accent-primary, #ff6b35); border: 1px solid rgba(255,107,53,.35);
}
/* ⚠ UNIFICARE (finding d): aplicația avea DOUĂ palete pentru aceleași roluri.
   `.role-pill` (aici) colora Moderatorul în teal și Adminul secundar în
   portocaliu, în timp ce `roleBadgeHtml()` (supabase-integration.js, folosit în
   Admin ▸ Membri) îl colora verde, respectiv albastru. Același rol apărea în
   două culori, în două liste diferite din aceeași aplicație.
   Sursa de adevăr aleasă: `roleBadgeHtml()` — e paleta pe care o vede oricine
   administrează clubul, deci cea mai „oficială". Valorile de mai jos sunt
   copiate exact din ea; s-au schimbat DOAR culorile.
       principal #d4a017 · secondary #5b9cff · moderator #2ecc71 · member gri
   EN: unify the two role palettes onto the one used by `roleBadgeHtml()`. */
.role-pill.role-principal { background: rgba(212,160,23,.16); color: #d4a017; border-color: rgba(212,160,23,.4); }
.role-pill.role-secondary { background: rgba(91,156,255,.16); color: #5b9cff; border-color: rgba(91,156,255,.4); }
.role-pill.role-moderator { background: rgba(46,204,113,.16); color: #2ecc71; border-color: rgba(46,204,113,.4); }
.role-pill.role-member    { background: rgba(255,255,255,.08); color: var(--text-secondary, #9aa); border-color: var(--border, #333); }

/* ---- Popup-uri header (notif / cluburi / online / setări — toate la fel) ---- */
.header-popup {
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  animation: hpop .12s ease-out;
}
@keyframes hpop { from { opacity: 0; } to { opacity: 1; } }
.popup-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 13px; font-weight: 700;
  border-bottom: 1px solid var(--border, #333);
}
.popup-head .fa-user-group { color: var(--success, #4ecdc4); }
.popup-x { cursor: pointer; opacity: .7; transition: opacity .15s, transform .15s, color .15s; }
.popup-x:hover { opacity: 1; transform: rotate(90deg); color: var(--danger, #ff6b6b); }
.popup-body { padding: 8px; max-height: 64vh; overflow-y: auto; overflow-x: hidden; }
.popup-empty { padding: 18px 12px; text-align: center; opacity: .6; font-size: .9em; }

/* Strip online -> listă verticală în popup */
#onlinePanel .online-presence-strip { display: flex; flex-direction: column; gap: 4px; }
#onlinePanel .online-presence-strip > span { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; }
#onlinePanel .online-presence-strip > span:first-child { font-weight: 700; opacity: .75; font-size: .85em; }

/* ---- Rânduri Setări ---- */
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px; border-radius: 10px; width: 100%;
}
.settings-row-btn {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-primary, #eee); font: inherit; text-align: left;
  transition: background .14s ease;
}
.settings-row-btn:hover { background: var(--bg-secondary, #252b4a); }
.settings-row-info { display: flex; align-items: center; gap: 11px; font-weight: 600; white-space: nowrap; min-width: 0; }
.settings-row-icon { color: var(--accent-primary, #ff6b35); width: 18px; text-align: center; }
.settings-row-caret { opacity: .45; font-size: .85em; }
.settings-sub { margin-bottom: 6px; }
.sub-card {
  background: var(--bg-secondary, #252b4a);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  padding: 13px 14px;
}
.sub-title { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 11px; }
.sub-title > i { color: var(--accent-primary, #ff6b35); }
.sub-rows { display: flex; flex-direction: column; gap: 8px; }
.sub-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; font-size: .85em; flex-wrap: wrap;
}
.sub-line .sub-k { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary, #9aa); }
.sub-line .sub-k i { width: 15px; text-align: center; opacity: .8; }
.sub-line .sub-v { font-weight: 700; text-align: right; }
.sub-note { font-size: .8em; opacity: .6; white-space: nowrap; margin-top: -3px; }
/* Acordeon „Date facturare": corpul decurge din buton (același fundal, fără spațiu) */
#settingsBillingToggle.expanded { background: var(--bg-secondary, #252b4a); border-radius: 10px 10px 0 0; }
.settings-collapse { background: var(--bg-secondary, #252b4a); border-radius: 0 0 10px 10px; padding: 4px 12px 12px; margin-bottom: 6px; }
.bill-form { display: flex; flex-direction: column; }
.bill-note { display: block; color: var(--text-secondary, #9aa); font-size: .82em; opacity: .85; margin-bottom: 8px; }

/* ================= Meniu taburi pe tot ecranul ================= */
/* ============================================================================
   MENIUL VECHI DE NAVIGARE — CSS RETRAS (Etapa 7)
   ----------------------------------------------------------------------------
   Aici stăteau stilurile overlay-ului cu carduri, ale celor trei butoane rotunde
   (`.tmf-*`) și ale FAB-ului verde `#quickSessionFab`. Toate au fost înlocuite de
   bara/sidebar-ul din `nav.js` (Etapele 1a–2).
   De ce se poate șterge fără risc: nodurile respective erau create de
   `ensureTabMenu()` ÎNTOTDEAUNA cu clasa `hidden`, iar `.hidden { display:none
   !important }` e o regulă separată, neatinsă. În plus, `nav.js` retrage acum
   funcția care le crea, deci nodurile nici nu mai apar în pagină.
   Codul JS din `app-core.js` a fost lăsat pe loc INTENȚIONAT — `showMainApp()`
   îl apelează fără gardă de existență, iar o ștergere acolo ar fi o modificare
   în calea de autentificare. Nu merită riscul pentru cod deja inert.
   EN: styles for the retired tab-menu overlay/FABs. Safe to remove: those nodes
   were always created with `.hidden`, and nav.js now prevents their creation.
   ============================================================================ */


.sub-actions { display: flex; gap: 8px; margin-top: 13px; }
.sub-actions .btn { flex: 1 1 0; width: auto !important; min-width: 0; white-space: nowrap; padding-left: 8px; padding-right: 8px; font-size: .8em; }
.sub-card-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sub-empty-row { display: inline-flex; align-items: center; gap: 8px; opacity: .85; }
.sub-empty-row i { color: var(--accent-primary, #ff6b35); }
.sub-cta { width: auto !important; }
.settings-lang {
  min-width: 50px; height: 34px; border-radius: 9px;
  background: var(--bg-secondary, #252b4a); border: 1px solid var(--border, #333);
  color: var(--text-primary, #eee); font-weight: 700; cursor: pointer; transition: border-color .14s;
}
.settings-lang:hover { border-color: var(--accent-primary, #ff6b35); }
.settings-logout .settings-row-icon { color: var(--danger, #ff6b6b); }
.settings-logout:hover { color: var(--danger, #ff6b6b); }
.settings-lastsave {
  padding: 8px 12px 4px; font-size: .74em; opacity: .55;
  color: var(--text-secondary, #9aa); text-align: center;
  border-top: 1px solid var(--border, #333); margin-top: 4px;
}

/* ---- MOBIL: bara sticky = doar iconițe + poză profil (simbolic) ---- */
@media (max-width: 768px) {
  .app-header { gap: 8px; }
  .header-actions { gap: 6px; }
  .hbtn { --hbtn-h: 38px; padding: 0 8px; }
  .hbtn-named { max-width: none; width: var(--hbtn-h); padding: 0; justify-content: center; }
  .hbtn-named .hbtn-label,
  .hbtn-named .hbtn-caret,
  .hbtn-named .role-pill { display: none; }
  .app-logo { font-size: 1em; }
}

/* ================= CARD SYSTEM ================= */
.card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 25px;
  margin-bottom: 25px;
  box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  border-color: var(--accent-primary);
}

.card-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.9em, 2.5vw, 1.2em);
  color: var(--accent-secondary);
  margin-bottom: 20px;
  text-shadow: 0 2px 4px var(--shadow);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ================= TABS ================= */
.tabs-container {
  position: relative;
  margin-bottom: 30px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 25px;
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) var(--bg-primary);
}

.tab {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 20px;
  cursor: pointer;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  transition: all 0.3s ease;
  white-space: nowrap;
  font-size: clamp(0.75em, 1.8vw, 0.9em);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}

.tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.2), transparent);
  transition: left 0.5s ease;
}

.tab:hover::before {
  left: 100%;
}

.tab:hover {
  border-color: var(--accent-primary);
  color: var(--text-primary);
  transform: translateY(-2px);
}

.tab.active {
  background: var(--gradient-primary);
  color: white;
  border-color: var(--accent-primary);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  transform: translateY(-2px);
}

.tab-badge {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8em;
  min-width: 20px;
  text-align: center;
}

.tab-content {
  display: none;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.tab-content.active {
  display: block;
}

/* ================= RESPONSIVE GRIDS ================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 25px;
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ================= STAT CARDS ================= */
.stat-card {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-card));
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.stat-card.trend-up::after {
  content: '📈';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
}

.stat-card.trend-down::after {
  content: '📉';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.2em;
}

.stat-value {
  font-size: clamp(1.8em, 6vw, 2.8em);
  font-weight: 700;
  color: var(--accent-primary);
  margin: 10px 0;
  text-shadow: 0 2px 4px var(--shadow);
  font-family: 'Orbitron', sans-serif;
  /* Cardul are `overflow:hidden`, deci fără astea un text lung era TĂIAT în tăcere,
     nu doar înghesuit. Acum se înfășoară; scalarea o face renderDashboard, după
     lungime (`.stat-value-md` / `.stat-value-sm`). */
  overflow-wrap: anywhere;
  line-height: 1.15;
}

/* Eticheta de sezon e text liber, nu un an de 4 cifre: peste 6, respectiv peste 12
   caractere, coborâm dimensiunea ca să încapă fără să dispară. */
.stat-value.stat-value-md { font-size: clamp(1.3em, 4vw, 1.9em); }
.stat-value.stat-value-sm { font-size: clamp(1.05em, 3vw, 1.35em); }

.stat-label {
  color: var(--text-secondary);
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.stat-change {
  font-size: 0.8em;
  margin-top: 5px;
}

.stat-change.positive {
  color: var(--success);
}

.stat-change.negative {
  color: var(--danger);
}

/* ================= TABLES ================= */
.table-responsive {
  overflow-x: auto;
  margin-bottom: 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 600px;
}

thead {
  /* ★ Modernizare (modelul tabelului de turnee): header plat, discret,
     în locul gradientului cu text-shadow. */
  background: var(--bg-card);
}

th {
  padding: 11px 12px;
  text-align: center;
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  white-space: nowrap;
  border-bottom: 2px solid var(--border);
}

tbody tr {
  background: var(--bg-secondary);
  transition: all 0.3s ease;
}

tbody tr:nth-child(even) {
  background: var(--bg-card);
}

tbody tr:hover {
  background: rgba(255, 107, 53, 0.1);
}

td {
  padding: 11px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: clamp(0.8em, 2vw, 0.92em);
}

/* ★ Respirație pe marginile tabelului: prima/ultima coloană primesc padding
   lateral generos (interiorul rămâne dens). `!important` ca să bată regula
   compactă de mobil `th, td { padding: 8px 7px !important }` — altfel medalia
   și dunga de podium din stânga se lipesc brutal de marginea containerului. */
th:first-child, td:first-child { padding-left: 16px !important; }
th:last-child,  td:last-child  { padding-right: 16px !important; }

.rank-1 { 
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 215, 0, 0.05)) !important;
  border-left: 4px solid var(--accent-gold);
}
.rank-2 { 
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(192, 192, 192, 0.05)) !important;
  border-left: 4px solid #c0c0c0;
}
.rank-3 { 
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(205, 127, 50, 0.05)) !important;
  border-left: 4px solid #cd7f32;
}

/* ================= FORMS ================= */
.form-group {
  margin-bottom: 25px;
  position: relative;
}

/* `.form-section-label` — titlu de SECȚIUNE, nu etichetă de câmp.
   RO: în mai multe locuri se folosea `<label>` pentru a titra un GRUP (Avatar, Plan,
       Memento-uri implicite, Transfer club, Închide clubul, Poze, Șablon A). Acolo nu
       există un singur câmp de țintit, deci `for=` e imposibil, iar browserul le raporta
       drept „etichetă fără câmp". Un `<span>` spune adevărul; clasa asta îi dă exact
       aspectul pe care îl avea ca `<label>`, deci nimic nu se schimbă vizual.
   EN: several `<label>` elements titled a whole GROUP rather than one field, so they could
       never take `for=`. Converted to `<span>`; this class reproduces the label styling
       byte for byte, so the appearance is unchanged. */
.form-group .form-section-label {
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-control {
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  width: 100%;
  transition: all 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2);
  transform: translateY(-2px);
}

/* RO: Butoanele native de calendar și ceas din `<input type=date|time>` sunt
       desenate de browser în negru — invizibile pe fundalul închis al aplicației.
       `invert` le face albe; opacitatea le ține discrete până la hover.
       Doar WebKit/Blink expune pseudo-elementul; pe Firefox iconițele respectă
       deja culoarea textului, deci regula e inofensivă acolo.
   EN: native date/time picker icons render black and vanish on the dark theme. */
.form-control::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
  transition: opacity .15s ease;
}
.form-control::-webkit-calendar-picker-indicator:hover,
.form-control:focus::-webkit-calendar-picker-indicator { opacity: 1; }
/* Câmpurile date/time desenează separatoarele și AM/PM cu o culoare de sistem;
   le aliniem la culoarea textului aplicației. */
.form-control::-webkit-datetime-edit,
.form-control::-webkit-datetime-edit-fields-wrapper { color: var(--text-primary); }

.form-control::placeholder {
  color: var(--text-secondary);
  opacity: 0.7;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

/* ================= BUTTONS ================= */
.btn {
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px 28px;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
  min-height: 48px;
  min-width: 100px;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
}

.btn:active {
  transform: translateY(-1px);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
  min-height: 42px;
  min-width: 80px;
}

.btn-lg {
  padding: 18px 36px;
  font-size: 16px;
  min-height: 56px;
  min-width: 120px;
}

.btn-secondary {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  box-shadow: none;
}

.btn-success {
  background: var(--gradient-success);
}

.btn-danger {
  background: var(--gradient-danger);
}

.btn-warning {
  background: var(--gradient-gold);
  color: var(--bg-primary);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--accent-primary);
  color: var(--accent-primary);
}

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* ================= PLAYER CARDS ================= */
.player-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.player-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.player-card.premium {
  /* fără bordură/gradient auriu — steluța ⭐ de lângă nume e suficientă ca indicator pentru email */
}

.player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border);
}

.player-name {
  font-weight: 700;
  font-size: 1.3em;
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  gap: 8px;
}

.player-score {
  font-size: 1.8em;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: 'Orbitron', sans-serif;
}

.player-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}

.player-stat {
  text-align: center;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.player-stat:hover {
  transform: translateY(-2px);
  background: var(--bg-card);
}

.player-stat-value {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--success);
  font-family: 'Orbitron', sans-serif;
}

.player-stat-label {
  font-size: 0.8em;
  color: var(--text-secondary);
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ================= ACHIEVEMENTS ================= */
.achievements-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gradient-gold);
  color: var(--bg-primary);
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(255, 215, 0, 0.3);
  animation: pulse 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.achievement-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.5);
}

/* ================= GAME CATALOG ================= */
/* 9.2 — moduri Compact si Grila. Extins = .catalog-item (mai jos), neschimbat. */

/* ⚠ Specificitate DUBLA (.catalog-grid.catalog-view-*) + !important: la <=480px exista
   deja `.catalog-grid { grid-template-columns: 1fr !important }`, care altfel castiga si
   lasa o singura dala urias pe ecran. O clasa singura nu putea bate acea regula.
   ⚠ minmax(0, 1fr) in loc de 1fr: un element de grila are min-width auto = min-content,
   iar un titlu pe un singur rand facea coloana mai lata decat ecranul -> toata pagina
   aluneca lateral. Cu 0 ca minim, coloana nu mai poate creste. */
.catalog-grid.catalog-view-compact { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
.catalog-grid.catalog-view-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 12px !important; }
@media (max-width: 480px) {
  /* Pe telefon: exact 2 dale pe linie. */
  .catalog-grid.catalog-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
}
.catalog-row, .catalog-tile { min-width: 0; }

/* ===== Compact: lista, nu carduri. Un singur separator intre randuri. ===== */
.catalog-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  background: none;
}
.catalog-row:last-child { border-bottom: none; }
.catalog-row-img {
  flex: none; width: 48px; height: 48px; border-radius: 6px; overflow: hidden;
  background-color: var(--bg-secondary, #151a3a);
}
/* min-width:0 permite taierea textului intr-un copil flex (max-width nu ar functiona). */
.catalog-row-main { flex: 1; min-width: 0; }
/* ⚠ UN SINGUR rand, taiat cu "...": un titlu pe doua randuri dubla inaltimea listei si
   anula rostul modului compact. */
.catalog-row-title {
  font-weight: 600; color: var(--text-primary, #e8ecff); font-size: .98em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Detaliile: cel mult DOUA randuri, apoi se taie. */
.catalog-row-meta {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 2px; color: var(--text-secondary); font-size: .8em; line-height: 1.35;
}
.catalog-row-meta i { margin-right: 2px; }
.catalog-row-dot { opacity: .5; margin: 0 5px; }
.catalog-row-plays {
  flex: none; color: var(--text-secondary); font-size: .8em; white-space: nowrap; padding-left: 6px;
}
.catalog-row-actions { flex: none; display: flex; gap: 6px; }
/* ⚠ Sub 720px butoanele dispar: pe telefon lasau titlului cativa centimetri. Ascunderea
   e in CSS, nu in JavaScript, ca sa raspunda singura la rotirea telefonului. */
@media (max-width: 720px) {
  .catalog-row-actions { display: none; }
}

/* ===== Grila: coperta cu titlul peste ea ===== */
.catalog-tile {
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  border: 2px solid var(--border); cursor: pointer; transition: border-color .2s ease;
}
.catalog-tile:hover { border-color: var(--accent-primary); }
.catalog-tile-img {
  position: absolute; inset: 0;
  background-color: var(--bg-secondary, #151a3a);
}
.catalog-tile-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; padding: 8px 10px;
  background: linear-gradient(180deg, rgba(10,14,39,0) 45%, rgba(10,14,39,.92) 100%);
}
.catalog-tile-title {
  font-weight: 800; color: #fff; font-size: .92em; line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,.75);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.catalog-tile-rating { color: var(--accent-gold, #ffd700); font-weight: 800; font-size: .82em; text-shadow: 0 2px 6px rgba(0,0,0,.85); }

/* ⚠ Copertile sunt <img> reale, ca pozele de sesiune — nu fundaluri CSS puse din JS.
   Trei incercari de a ascunde „blip"-ul au esuat (pulsatie de opacitate, pulsatie de
   culoare, preincarcare): cauza nu era animatia, ci repictarea provocata de schimbarea
   lui `background-image` pe un element deja desenat. Un <img> incarcat nativ nu are
   problema asta. NICIUN efect, nicio tranzitie: imaginea apare pur si simplu. */
.catalog-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Cardul Extins: imaginea sta SUB suprapunerea cu titlul. */
.catalog-banner > .catalog-img { position: absolute; inset: 0; }

.catalog-item {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.catalog-item:hover {
  transform: translateY(-5px);
  border-color: var(--accent-primary);
  box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.catalog-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 15px;
}

.catalog-name {
  font-weight: 700;
  font-size: 1.2em;
  color: var(--accent-gold);
  flex: 1;
}

.catalog-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-gold);
  font-weight: bold;
}

/* Banner cu poza jocului în card (bleed la marginile cardului; colțurile sunt tăiate de overflow:hidden) */
.catalog-banner { position: relative; margin: -20px -20px 14px; height: 116px; background-size: cover; background-position: center; background-color: var(--bg-primary, #0a0e27); }
.catalog-banner-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 10px 14px; background: linear-gradient(180deg, rgba(10,14,39,0) 28%, rgba(10,14,39,0.55) 62%, rgba(10,14,39,0.92) 100%); }
.catalog-banner-title { font-weight: 800; font-size: 1.2em; color: #fff; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,.75); }
.catalog-banner-rating { display: flex; align-items: center; gap: 5px; color: var(--accent-gold, #ffd700); font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,.85); }

/* Banner poză completă în pop-up detalii joc */
.gdetail-banner { position: relative; height: 210px; background-size: cover; background-position: center; background-color: var(--bg-primary, #0a0e27); margin: -30px -30px 18px; border-radius: 18px 18px 0 0; }
.gdetail-banner-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px 22px; background: linear-gradient(180deg, rgba(10,14,39,0) 30%, rgba(10,14,39,0.55) 65%, rgba(10,14,39,0.9) 100%); border-radius: 18px 18px 0 0; }
.gdetail-banner-title { font-weight: 800; font-size: 1.7em; color: #fff; line-height: 1.1; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.gdetail-banner-rating { display: flex; align-items: center; gap: 6px; color: var(--accent-gold, #ffd700); font-weight: 800; text-shadow: 0 2px 8px rgba(0,0,0,.85); }
.gdetail-close { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 1.5em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gdetail-close:hover { background: rgba(0,0,0,.72); }
@media (max-width: 768px) { .gdetail-banner { margin: -15px -15px 16px; height: 170px; } }

/* Buton secțiune pliabilă (More details) */
.acc-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; color: var(--text-primary); cursor: pointer; font-weight: 600; }
.acc-toggle:hover { border-color: var(--accent-primary, #ff6b35); }
.acc-toggle.is-open { border-color: var(--accent-primary, #ff6b35); }
.acc-toggle .acc-chev { opacity: .7; transition: transform .15s ease; }
.acc-toggle.is-open .acc-chev { transform: rotate(90deg); }

.catalog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.catalog-tag {
  background: var(--bg-primary);
  padding: 5px 12px;
  border-radius: 15px;
  font-size: 0.8em;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}

.catalog-details {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-top: 15px;
}

.catalog-detail {
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Rând-sumar compact (players · time · weight · plays pe o singură linie) */
.catalog-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0;
  font-size: 0.86em;
  color: var(--text-secondary);
}
.catalog-summary span { display: inline-flex; align-items: center; white-space: nowrap; }
.catalog-summary i { opacity: 0.7; margin-right: 5px; }

/* Butoanele Rate / Edit / Delete pe un rând (pe mobil doar iconițe) */
.catalog-actions { display: flex; gap: 8px; margin-top: 15px; }
.catalog-actions .btn { flex: 1 1 0; width: auto !important; min-width: 0; white-space: nowrap; }
@media (max-width: 768px) { .catalog-actions .btn-label { display: none; } }

/* UI evaluare (Rate) */
.rate-section { margin-bottom: 18px; }
.rate-label { display: block; font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin-bottom: 8px; }
.rate-value { font-size: 2em; font-weight: 800; color: var(--accent-gold, #ffd700); text-align: center; margin-bottom: 6px; }
.rate-slider { width: 100%; accent-color: var(--accent-gold, #ffd700); }
.rate-scale { display: flex; justify-content: space-between; font-size: 0.72em; color: var(--text-secondary); margin-top: 4px; }
.rate-weights { display: flex; gap: 8px; }
.rate-weight-chip { flex: 1 1 0; padding: 12px 0; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); border-radius: 10px; font-weight: 700; cursor: pointer; font-size: 1.05em; transition: all 0.12s; }
.rate-weight-chip:hover { border-color: var(--accent-primary, #ff6b35); }
.rate-weight-chip.active { border-color: var(--accent-primary, #ff6b35); background: var(--accent-primary, #ff6b35); color: #fff; }

/* Leaderboard: avatar mic lângă nume + rânduri ascunse după top 5 */
.lb-name { display: inline-flex; align-items: center; gap: 8px; }
.lb-avatar { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); flex: 0 0 auto; }
.lb-avatar img { width: 26px; height: 26px; object-fit: cover; }
.lb-extra-hidden { display: none; }
.lb-name-link { cursor: pointer; }
.lb-name-link:hover { color: var(--accent-primary, #ff6b35); text-decoration: underline; }

/* Randomizers — rezultate în stilul celorlalte taburi */
.randomizer-result { margin-top: 16px; }
.rand-pick-label { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 10px; }
.randomizer-result h3 { font-size: 1em; margin: 0 0 10px; }
.rand-order { display: flex; flex-direction: column; gap: 8px; }
.rand-order-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--bg-card, #1e1e2e); border: 1px solid var(--border); border-radius: 10px; }
.rand-order-row.is-first { border-color: var(--accent-gold, #ffd700); }
.rand-rank { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: var(--accent-primary, #ff6b35); color: #fff; font-weight: 800; font-size: .85em; display: flex; align-items: center; justify-content: center; }
.rand-avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); }
.rand-avatar img { width: 28px; height: 28px; object-fit: cover; }
.rand-order-name { flex: 1; min-width: 0; }
.rand-medal { font-size: 1.1em; }
.rand-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rand-actions .btn { flex: 1 1 auto; width: auto !important; min-width: 0; }
.rand-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.rand-team { background: var(--bg-card, #1e1e2e); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.rand-team-head { font-weight: 800; margin-bottom: 10px; font-size: .95em; }
.rand-team-member { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--bg-primary); border-radius: 8px; margin-top: 6px; font-size: .9em; }
.rand-pick-players { margin-bottom: 14px; }
.rand-pick-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; flex-wrap: wrap; }
/* `.rand-pick-title` a înlocuit un `<label>` folosit greșit: eticheta nu descria UN câmp, ci
   un grup întreg de bifuri, deci nu putea primi `for=` și rămânea raportată de browser drept
   „etichetă fără câmp". Un `<span>` spune adevărul.
   EN: this was a `<label>` for a whole checkbox group, so it could never take `for=`. */
.rand-pick-head label, .rand-pick-head .rand-pick-title { font-size: .9em; color: var(--text-secondary); }
.rand-pick-allnone { display: flex; gap: 6px; }
.rand-pick-mini { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 7px; padding: 3px 10px; font-size: .78em; cursor: pointer; }
.rand-pick-mini:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.rand-pick-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rand-pick-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 6px; border: 1px solid var(--border); background: var(--bg-card, #1e1e2e); color: var(--text-primary); border-radius: 999px; font-size: .85em; }
.rand-pick-chip.is-on { border-color: var(--accent-primary, #ff6b35); }
.rand-pick-chip-av { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); flex: 0 0 auto; }
.rand-pick-chip-av img { width: 22px; height: 22px; object-fit: cover; }
.rand-pick-x { cursor: pointer; color: var(--text-secondary); margin-left: 2px; font-size: .85em; }
.rand-pick-x:hover { color: var(--danger, #e74c3c); }
.rand-pick-search-wrap { position: relative; }
.rand-pick-search-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: .9em; pointer-events: none; }
.rand-pick-search { width: 100%; box-sizing: border-box; padding: 10px 14px 10px 38px; border: 1px solid var(--border); background: var(--bg-card, #1e1e2e); color: var(--text-primary); border-radius: 10px; font-size: .9em; }
.rand-pick-search:focus { outline: none; border-color: var(--accent-primary, #ff6b35); }
.rand-pick-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.rand-pick-result { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--border); background: var(--bg-secondary); border-radius: 9px; cursor: pointer; font-size: .88em; }
.rand-pick-result:hover { border-color: var(--accent-primary, #ff6b35); }
.rand-pick-result-name { flex: 1; min-width: 0; }
.rand-pick-tag { color: var(--accent-primary, #ff6b35); font-size: .85em; margin-left: 6px; }
.rand-pick-result i { color: var(--accent-primary, #ff6b35); }
.rand-pick-nomatch { color: var(--text-secondary); font-size: .85em; padding: 6px 4px; }
.rand-pick-count { font-size: .8em; color: var(--text-secondary); margin-top: 8px; }

/* Modal detalii achievement */
.ach-detail-hero { text-align: center; padding: 4px 0 14px; }
.ach-detail-icon { font-size: 3.1em; line-height: 1; filter: grayscale(1); }
.ach-detail-hero.unlocked .ach-detail-icon { filter: none; }
.ach-detail-name { font-size: 1.3em; font-weight: 800; margin: 10px 0 6px; }
.ach-detail-cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .8em; color: var(--text-secondary); }
.ach-detail-status { margin-top: 10px; font-size: .85em; color: var(--text-secondary); }
.ach-detail-status.on { color: var(--success, #27ae60); font-weight: 700; }
.ach-detail-desc { text-align: center; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.5; }
.ach-detail-prog { margin-bottom: 16px; }
.ach-detail-prog .ach-progress { height: 10px; }
.ach-detail-prog-row { display: flex; justify-content: space-between; font-size: .85em; color: var(--text-secondary); margin-top: 7px; font-weight: 600; }
.ach-detail-note { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; font-size: .88em; color: var(--text-secondary); }
.ach-detail-note.ok { border-color: rgba(39, 174, 96, .4); color: var(--success, #27ae60); }

/* Club achievements — navigare compactă cu chips + carduri cu progres */
.ach-overview-bar { height: 10px; background: var(--bg-primary); border-radius: 6px; overflow: hidden; }
.ach-overview-bar > div { height: 100%; background: var(--gradient-success, linear-gradient(90deg, #27ae60, #4ecdc4)); transition: width .4s; }
.ach-overview-text { font-size: .85em; color: var(--text-secondary); margin: 6px 0 12px; }
.ach-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 12px; -webkit-overflow-scrolling: touch; }
.ach-chips::-webkit-scrollbar { height: 4px; }
.ach-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); border-radius: 999px; font-size: .82em; cursor: pointer; white-space: nowrap; }
.ach-chip:hover { border-color: var(--accent-primary, #ff6b35); }
.ach-chip.active { border-color: var(--accent-primary, #ff6b35); background: var(--accent-primary, #ff6b35); color: #fff; }
.ach-chip-count { opacity: .7; font-size: .9em; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.ach-card { position: relative; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 14px; opacity: .55; display: flex; flex-direction: column; min-height: 152px; cursor: pointer; transition: border-color .12s, transform .08s; }
.ach-card:hover { border-color: var(--accent-primary, #ff6b35); }
.ach-card:active { transform: scale(.99); }
.ach-card.unlocked { opacity: 1; border-color: rgba(39, 174, 96, .4); }
.ach-check { position: absolute; top: 11px; right: 13px; color: var(--success, #27ae60); font-size: .9em; }
.ach-card-head { display: flex; gap: 11px; }
.ach-icon { font-size: 1.7em; filter: grayscale(1); flex: 0 0 auto; line-height: 1.1; }
.ach-card.unlocked .ach-icon { filter: none; }
.ach-card-info { flex: 1; min-width: 0; padding-right: 14px; }
.ach-title { font-weight: 700; font-size: .9em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.ach-desc { color: var(--text-secondary); font-size: .78em; line-height: 1.35; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.ach-foot { margin-top: auto; padding-top: 10px; }
.ach-progress { height: 7px; background: var(--bg-primary); border-radius: 5px; overflow: hidden; }
.ach-progress > div { height: 100%; background: var(--gradient-primary, linear-gradient(90deg, #ff6b35, #f9a826)); }
.ach-card.unlocked .ach-progress > div { background: var(--gradient-success, linear-gradient(90deg, #27ae60, #4ecdc4)); }
.ach-count { color: var(--text-secondary); font-size: .74em; margin-top: 6px; display: block; }
@media (max-width: 768px) { .ach-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .ach-grid { grid-template-columns: 1fr; } }

/* Monthly Performance — bare sesiuni + miniaturi jocuri */
.perf-bars { display: flex; align-items: flex-end; height: 160px; gap: 8px; padding: 18px 4px 0; }
.perf-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.perf-bar-val { font-size: .78em; font-weight: 700; color: var(--accent-primary, #ff6b35); margin-bottom: 4px; }
.perf-bar { width: 70%; max-width: 38px; background: var(--gradient-primary, linear-gradient(180deg, #ff6b35, #f9a826)); border-radius: 8px 8px 0 0; transition: height .5s ease; min-height: 2px; }
.perf-bar-label { margin-top: 8px; font-size: .74em; color: var(--text-secondary); }
.perf-thumbs-label { font-size: .8em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin: 16px 0 8px; }
.perf-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.perf-thumbs::-webkit-scrollbar { height: 4px; }
.perf-thumb { flex: 0 0 auto; width: 104px; height: 66px; border-radius: 10px; background-size: cover; background-position: center; background-color: var(--bg-secondary); position: relative; cursor: pointer; overflow: hidden; border: 1px solid var(--border); display: flex; align-items: flex-end; }
.perf-thumb-noimg { background: linear-gradient(135deg, #252b4a, #1e1e2e); }
.perf-thumb-count { position: absolute; top: 4px; right: 5px; z-index: 2; background: rgba(255, 107, 53, .95); color: #fff; font-size: .68em; font-weight: 800; padding: 2px 6px; border-radius: 999px; }
.perf-thumb-name { position: relative; z-index: 2; width: 100%; box-sizing: border-box; font-size: .64em; font-weight: 700; color: #fff; padding: 16px 7px 6px; line-height: 1.1; background: linear-gradient(180deg, rgba(10, 14, 39, 0), rgba(10, 14, 39, .55) 45%, rgba(10, 14, 39, .94)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0, 0, 0, .95); }
@media (max-width: 768px) { .perf-bars { height: 130px; } .perf-thumb { width: 92px; height: 62px; } }

/* ================= MODALS ================= */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.modal.active {
  display: flex;
}

.modal-content {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 20px;
  padding: 30px;
  max-width: 90%;
  width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--border);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.8em;
  cursor: pointer;
  padding: 5px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 1001;
}

.modal-close:hover {
  background: var(--bg-primary);
  color: var(--danger);
  transform: rotate(90deg);
}

/* ================= CHAT ================= */
.chat-container {
  background: var(--bg-primary);
  border-radius: 16px;
  height: 500px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border);
  overflow: hidden;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Rând mesaj: avatar + bulă */
.chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; }
.chat-row.own { flex-direction: row-reverse; }
.chat-row.system { justify-content: center; }
.chat-row .chat-message { margin: 0; }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); margin-bottom: 2px; }
.chat-avatar img { width: 32px; height: 32px; object-fit: cover; }

.chat-message {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 8px 12px;
  max-width: 78%;
  position: relative;
  animation: messageIn 0.3s ease;
  word-break: break-word;
  border-bottom-left-radius: 4px;
}

@keyframes messageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-message.own {
  background: var(--gradient-primary);
  color: #fff;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 14px;
}

.chat-message.own .chat-sender { display: none; }

.chat-message.admin {
  border-left: 4px solid var(--accent-gold);
}

.chat-message-system {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  max-width: 100%;
  text-align: center;
  font-style: italic;
  color: var(--text-secondary);
  border-radius: 10px;
  align-self: center;
}

.chat-sender {
  font-weight: 700;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82em;
}

.chat-badge-admin {
  background: var(--gradient-gold);
  color: var(--bg-primary);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.78em;
  font-weight: bold;
}

/* Chat header: titlu + iconițe pe aceeași linie */
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.chat-head .card-title { margin: 0; }
.chat-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* Chat ecran complet — overlay pe tot viewport-ul (experiență de tastare curată).
   Cardul e portat în <body> de toggleChatFullscreen ca să scape de containing-block-ul
   creat de transform-ul rezidual de pe #mainContainer. */
#chatCard.chat-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  margin: 0;
  border-radius: 0;
  max-width: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #1e1e2e);
  overflow: hidden;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px calc(env(safe-area-inset-bottom, 0px) + 10px);
}
#chatCard.chat-fullscreen .chat-head { flex: 0 0 auto; }
#chatCard.chat-fullscreen .chat-container {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  border-radius: 12px;
}
#chatCard.chat-fullscreen .chat-messages { flex: 1 1 auto; min-height: 0; }
#chatCard.chat-fullscreen .chat-input-area { flex: 0 0 auto; }
body.chat-fs-lock { overflow: hidden; }
/* Meniurile de acțiuni pe mesaj (chat + DM) trebuie să fie PESTE overlay-ul fullscreen (z 9000) */
#msgMenuModal, #msgEditModal, #msgInfoModal,
#dmMsgMenuModal, #dmMsgEditModal, #dmMsgInfoModal,
#msgForwardModal { z-index: 9500; }
#chatFsBtn.active { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }

/* ===== Discover — search/filtre + butoane uniforme ===== */
.disc-search-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.disc-search-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.disc-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.disc-search-input-wrap .form-control { padding-left: 40px !important; }
.disc-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.disc-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.82em; color: var(--text-secondary); }
.disc-filter-full { grid-column: 1 / -1; }
.disc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.disc-chip { font-size: 0.78em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border, #333); background: var(--bg-secondary, #181826); color: var(--text-secondary); cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.disc-chip.active { background: var(--accent-primary, #ff6b35); border-color: var(--accent-primary, #ff6b35); color: #fff; }
.disc-club-name:hover { color: var(--accent-primary, #ff6b35) !important; }
.disc-player-card { display: flex; gap: 12px; align-items: center; padding: 10px 8px; border-radius: 12px; cursor: pointer; border-bottom: 1px solid var(--border, #333); transition: background .12s; }
.disc-player-card:hover { background: rgba(255,255,255,0.04); }
.disc-player-card:last-child { border-bottom: none; }
/* butoane de acțiune uniforme și compacte în Discover (override pe inline-urile vechi) */
#discoverList .btn, #discoverPlayersList .btn {
  width: auto !important;
  min-width: 112px !important;
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 0.8em;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.chat-head-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; transition: border-color .12s, color .12s; }
.chat-head-btn:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.chat-head-btn.active { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }
.chat-head-btn.is-off { color: var(--danger, #e74c3c); }
.chat-sender-name { cursor: pointer; }
.chat-sender-name:hover { color: var(--accent-primary, #ff6b35); text-decoration: underline; }
.chat-sender-tag { color: var(--accent-primary, #ff6b35); font-weight: 600; font-size: 0.82em; margin-left: 4px; }

/* Mesaj: text, meta (edited + oră + seen), long-press */
.chat-message { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; transition: box-shadow .2s, background .2s; }
.chat-text { -webkit-user-select: text; user-select: text; }
.chat-meta { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 3px; }
.chat-edited { font-size: 0.68em; color: var(--text-secondary); font-style: italic; }
.chat-message.own .chat-edited { color: rgba(255, 255, 255, .8); }
.chat-seen { font-size: 0.72em; opacity: .7; }
.chat-seen.seen { color: #4ecdc4; opacity: 1; }
.chat-message.own .chat-seen.seen { color: #d9fff7; }
.chat-highlight { box-shadow: 0 0 0 2px var(--accent-gold, #ffd700); }
.dm-msg.chat-highlight { box-shadow: none; }
.dm-msg.chat-highlight > div { box-shadow: 0 0 0 2px var(--accent-gold, #ffd700); }

/* Reply quote în interiorul bulei */
.chat-reply-quote { border-left: 3px solid var(--accent-primary, #ff6b35); background: rgba(0, 0, 0, .18); border-radius: 6px; padding: 4px 8px; margin-bottom: 5px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; max-width: 100%; }
.chat-reply-quote-name { font-size: .76em; font-weight: 700; color: var(--accent-primary, #ff6b35); }
.chat-message.own .chat-reply-quote-name { color: #fff; }
.chat-reply-quote-text { font-size: .78em; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Bară reply deasupra inputului */
.chat-reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-secondary); border-top: 1px solid var(--border); border-left: 3px solid var(--accent-primary, #ff6b35); }
.chat-reply-bar-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-reply-bar-name { font-size: .8em; font-weight: 700; color: var(--accent-primary, #ff6b35); }
.chat-reply-bar-text { font-size: .82em; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-reply-bar-x { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1em; padding: 4px; }
.chat-reply-bar-x:hover { color: var(--danger, #e74c3c); }

/* Meniu acțiuni mesaj */
.msg-menu { max-width: 340px; padding: 0; overflow: hidden; }
.msg-menu-preview { padding: 14px 16px; color: var(--text-secondary); font-size: .85em; border-bottom: 1px solid var(--border); font-style: italic; max-height: 80px; overflow: hidden; }
.msg-menu-items { display: flex; flex-direction: column; padding: 6px; }
.msg-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; border: none; color: var(--text-primary); font-size: .95em; cursor: pointer; border-radius: 8px; text-align: left; }
.msg-menu-item i { width: 20px; text-align: center; color: var(--accent-primary, #ff6b35); }
.msg-menu-item:hover { background: var(--bg-secondary); }
.msg-menu-item.danger { color: var(--danger, #e74c3c); }
.msg-menu-item.danger i { color: var(--danger, #e74c3c); }

/* Info mesaj (seen / not seen) */
.msg-info-preview { background: var(--bg-secondary); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; font-size: .9em; }
.msg-info-time { font-size: .82em; color: var(--text-secondary); margin-bottom: 14px; }
.msg-info-sec { margin-bottom: 14px; }
.msg-info-h { font-size: .82em; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); margin-bottom: 8px; }
.msg-info-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; font-size: .92em; }
.msg-info-empty { color: var(--text-secondary); font-size: .85em; }

.chat-time {
  font-size: 0.7em;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}

.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-top: 2px solid var(--border);
  background: var(--bg-secondary);
  align-items: center;
  flex-wrap: nowrap;
}

.chat-input {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 22px;
  padding: 12px 18px;
  color: var(--text-primary);
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  transition: border-color 0.2s ease;
}

.chat-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.chat-send-btn {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.chat-send-btn { background: var(--gradient-primary); color: #fff; }
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn:hover { filter: brightness(1.05); }

.chat-search-input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 16px;
  margin: 4px 0 12px;
  color: var(--text-primary);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  opacity: 0.85;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.chat-search-input:focus { outline: none; opacity: 1; border-color: var(--accent-primary); }

.chat-seen {
  font-size: 0.62em;
  margin-top: 3px;
  text-align: right;
  opacity: 0.85;
}
.chat-message.own .chat-seen { color: rgba(255,255,255,0.85); }
.chat-seen.seen { font-weight: 700; }
.chat-message.own .chat-seen.seen { color: #cdeffd; }

.btn-x-small {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  background: var(--danger, #e74c3c);
  color: #fff;
  transition: transform 0.15s ease;
}
.btn-x-small:active { transform: scale(0.9); }

.online-presence-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: 0.82em;
  color: var(--text-secondary);
}
.online-presence-strip .op-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71; display: inline-block; margin-right: 6px;
  box-shadow: 0 0 0 3px rgba(46,204,113,0.18);
}
.online-presence-strip .op-user {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-primary); font-weight: 600;
}
.online-presence-strip .op-name-link { cursor: pointer; }
.online-presence-strip .op-name-link:hover { color: var(--accent-primary, #ff6b35); text-decoration: underline; }
.online-presence-strip .op-dm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px; padding: 0;
  border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg-card, #1e1e2e); color: var(--accent-primary, #ff6b35);
  cursor: pointer; font-size: 0.82em; transition: border-color .12s, background .12s;
}
.online-presence-strip .op-dm:hover { border-color: var(--accent-primary, #ff6b35); background: rgba(255,107,53,.12); }

/* Hub cluburi — listă scrollabilă */
.club-hub-list { max-height: 58vh; overflow-y: auto; padding: 2px 6px 2px 2px; }
.club-hub-list::-webkit-scrollbar { width: 8px; }
.club-hub-list::-webkit-scrollbar-thumb { background: var(--border, #333); border-radius: 8px; }
.club-hub-list::-webkit-scrollbar-thumb:hover { background: var(--accent-primary, #ff6b35); }
.club-hub-empty { text-align: center; opacity: .7; padding: 24px; }
.hub-search-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .9em; transition: border-color .12s, color .12s; }
.hub-search-btn:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.hub-search-btn.is-on { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }
#clubHubSearch { padding-left: 40px !important; }

/* ===== Regulament — header iconițe + carduri articole ===== */
.reg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
/* `min-width: 0` lipsea: un titlu lung refuza sa se micsoreze, impingea butoanele
   in afara cardului si le taia. `overflow-wrap` rupe cuvintele foarte lungi in loc
   sa le lase sa iasa. */
.reg-head .card-title { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Pe ecran ingust butoanele trec pe randul urmator, aliniate la dreapta, in loc
   sa fie strivite langa titlu. */
.reg-head-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; flex-wrap: wrap; }

/* Bannerul „nu ai acceptat regulamentul" din tabul de regulament. */
.reg-ack-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--accent-primary, #ff6b35);
  background: rgba(255, 107, 53, .08);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.reg-ack-banner .reg-ack-sub { color: var(--text-secondary); font-size: .86em; margin-top: 3px; }

/* Link discret spre istoricul unui articol, în linia de metadate. Buton, nu <a>:
   nu navighează nicăieri, deschide un modal. */
.reg-hist-link {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent-primary, #ff6b35); font: inherit; font-size: 1em;
}
.reg-hist-link:hover { text-decoration: underline; }
.reg-head-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; transition: border-color .12s, color .12s; }
.reg-head-btn:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.reg-head-btn.is-on { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }
/* ⚠ SPECIFICITATE. Media query-ul de mobil (max-width:768px) declară
   `.form-control { padding: 16px 14px !important }` — scurtătura `padding`
   rescrie și `padding-left`. Cele două selectoare au aceeași specificitate
   (0,1,0), deci pe mobil câștiga cel de mai jos în fișier, iar textul intra
   peste iconiță. Celelalte câmpuri de căutare scăpaseră doar fiindcă aveau
   selectoare mai specifice (`.wrap .form-control`, `#id`) — nu din proiectare.
   Aici urcăm specificitatea explicit, ca regula să nu depindă de ordine. */
input.form-control.reg-search-input { padding-left: 40px !important; }

.reg-intro { text-align: center; margin: 6px 0 22px; }
.reg-intro h3 { color: var(--accent-gold, #ffd700); margin: 0 0 6px; }
.reg-dot { opacity: .5; margin: 0 6px; }

.reg-article { background: var(--bg-secondary); border: 1px solid var(--border); border-left: 4px solid var(--accent-primary, #ff6b35); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; transition: border-color .12s; }
.reg-article:hover { border-left-color: var(--accent-gold, #ffd700); }
.reg-article-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.reg-article-title { font-weight: 700; color: var(--accent-gold, #ffd700); font-size: 1.02em; }
.reg-article-ver { flex: 0 0 auto; font-size: .72em; font-weight: 700; color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.reg-article-body { line-height: 1.6; }
.reg-article-meta { color: var(--text-secondary); font-size: .85em; margin-top: 14px; display: flex; align-items: center; gap: 6px; }

.reg-empty { text-align: center; padding: 34px 20px; color: var(--text-secondary); }
.reg-empty i { font-size: 2.4em; display: block; margin-bottom: 12px; opacity: .6; }

/* ===== Header generic cu iconițe pe linia titlului (History/Players/Catalog) ===== */
.tab-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tab-head .card-title { margin: 0; }
.tab-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
/* Header auth (Sign in / Sign up): butonul de limbă rămâne sus-dreapta chiar dacă
   titlul e lung; titlul se împachetează în propriul spațiu, NU împinge butonul jos. */
.tab-head.auth-head { flex-wrap: nowrap; align-items: flex-start; }
.tab-head.auth-head .card-title { flex: 1 1 auto; min-width: 0; }
.tab-head.auth-head .lang-toggle { flex: 0 0 auto; }
.tab-head-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; transition: border-color .12s, color .12s, background .12s; }
.tab-head-btn:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.tab-head-btn.is-open, .tab-head-btn.is-on { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }
.tab-head-btn.accent { background: linear-gradient(135deg, var(--accent-primary, #ff6b35), #ff8c42); border-color: transparent; color: #fff; }
.tab-head-btn.accent:hover { background: linear-gradient(135deg, #ff7d4d, #ff9a55); color: #fff; }
.tab-head-btn.accent.is-open, .tab-head-btn.accent.is-on { color: #fff; border-color: transparent; }
/* „Prietenii mei": `.friends-acc-head` are `margin-top:4px`, deci antetul e mai scund decât
   rândul; butoanele întinse pe toată înălțimea ieșeau cu 4px mai înalte. Aceeași margine le
   aliniază. EN: the header carries a 4px top margin, so the buttons need it too. */
.friends-acc-headrow .tab-head-btn { height: auto; align-self: stretch; margin-top: 4px; padding: 0; }

/* ================= ANUNȚURI (dashboard, stil WhatsApp) ================= */
.ann-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.ann-empty { color: var(--text-secondary); font-size: .9em; padding: 8px 2px; }
.ann-item { background: var(--bg-secondary); border: 1px solid var(--border); border-left: 3px solid var(--accent-primary, #ff6b35); border-radius: 12px; padding: 12px 14px; }
.ann-head { display: flex; align-items: center; gap: 10px; }
.ann-avatar { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.ann-author { font-weight: 700; cursor: pointer; }
.ann-author:hover { color: var(--accent-primary, #ff6b35); text-decoration: underline; }
.ann-time { color: var(--text-secondary); font-size: .76em; margin-left: auto; white-space: nowrap; }
.ann-body { margin-top: 8px; white-space: pre-wrap; word-break: break-word; line-height: 1.45; }
.ann-item-title { font-weight: 700; font-size: 1.02em; margin-top: 8px; color: var(--accent-gold, #ffd700); word-break: break-word; }
.ann-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ann-photo { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.ann-tool { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding: 4px; font-size: .9em; flex: 0 0 auto; }
.ann-tool:hover { color: var(--danger, #e74c3c); }
.ann-replies { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--border); padding-top: 10px; }
/* Lista extinsă „Vezi toate anunțurile": distanță între carduri.
   RO: `.ann-list` e flex cu `gap:12px`, dar restul anunțurilor stau într-un `.ann-rest`
       separat, care e un simplu bloc — gap-ul părintelui nu ajunge la copiii lui. Marginea
       între frați merge la orice `display`, iar JS-ul scrie `display:block` inline (inline
       bate foaia de stil), deci nu se putea rezolva făcând `.ann-rest` flex.
   EN: sibling margin, because the JS sets `display:block` inline and inline wins over CSS. */
.ann-rest > .ann-item + .ann-item { margin-top: 12px; }
.ann-rest > .ann-item:first-child { margin-top: 12px; }

.ann-showall-toggle, .ann-replies-toggle {
  appearance: none; border: none; background: transparent; color: var(--accent-primary, #ff6b35);
  cursor: pointer; font-weight: 600; font-size: .85em; padding: 7px 2px;
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
}
.ann-showall-toggle:hover, .ann-replies-toggle:hover { text-decoration: underline; }
.ann-rest { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
/* Dashboard — cardul „Următorul eveniment" (Task 3) */
.dash-ev { display: flex; flex-direction: column; gap: 10px; }
.dash-ev-main { cursor: pointer; }
.dash-ev-title { font-weight: 700; font-size: 1.05em; color: var(--accent-gold, #ffd700); word-break: break-word; }
.dash-ev-when { color: var(--text-secondary); font-size: .9em; margin-top: 4px; }
.dash-ev-loc { color: var(--text-secondary); font-size: .86em; margin-top: 2px; }
.dash-ev-rsvp { margin-top: 4px; }
.dash-ev-open { align-self: flex-start; }
/* `.ann-replies` ARE deja flex+gap, dar `toggleAnnReplies()` scrie `display:block` inline,
   ceea ce anulează flex-ul și odată cu el gap-ul. Aceeași cauză și aceeași reparație ca la
   `.ann-rest`. EN: inline `display:block` kills the flex gap; sibling margin works regardless. */
.ann-replies > .ann-reply + .ann-reply { margin-top: 8px; }

.ann-reply { background: var(--bg-card); border-radius: 10px; padding: 8px 10px; }
.ann-reply-head { display: flex; align-items: center; gap: 8px; }
.ann-reply-author { font-weight: 600; font-size: .9em; cursor: pointer; }
.ann-reply-author:hover { color: var(--accent-primary, #ff6b35); text-decoration: underline; }
.ann-reply-time { color: var(--text-secondary); font-size: .72em; margin-left: auto; white-space: nowrap; }
.ann-reply-body { margin-top: 4px; font-size: .92em; white-space: pre-wrap; word-break: break-word; }
.ann-reply-box { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.ann-reply-box input { flex: 1 1 auto; min-width: 0; }
.ann-reply-send { flex: 0 0 auto; width: auto !important; min-width: 0 !important; white-space: nowrap; padding-left: 14px !important; padding-right: 14px !important; }
/* Compose modal (admin) */
.ann-compose-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ann-compose-thumb { position: relative; width: 72px; height: 72px; }
.ann-compose-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.ann-compose-thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: #b23b3b; color: #fff; cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ann-compose-add { width: auto !important; min-width: 0 !important; }

/* ===== Căutare live oraș (GeoNames) ===== */
.geo-city-wrap { position: relative; }
.geo-city-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--bg-card, #1e1e2e); border: 1px solid var(--border, #333); border-radius: 10px; max-height: 240px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
.geo-city-item { padding: 9px 12px; cursor: pointer; font-size: .9em; border-bottom: 1px solid var(--border, #333); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.geo-city-item:last-child { border-bottom: none; }
.geo-city-item:hover { background: rgba(255, 107, 53, .14); }
.geo-city-loading, .geo-city-empty { padding: 9px 12px; font-size: .82em; color: var(--text-secondary); }

/* ===== Catalog: cine deține jocul ===== */
.game-owners-section { margin-top: 8px; }
.game-owners-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.game-owner-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 16px; padding: 4px 12px 4px 4px; font-size: .88em; cursor: pointer; }
.game-owner-chip:hover { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }
.game-owner-av { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; }
.game-owner-added { color: var(--text-secondary); font-size: .85em; margin-top: 4px; }

/* ================= POLLS ================= */
.poll-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.poll-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-3px);
}

.poll-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.poll-meta {
  color: var(--text-secondary);
  font-size: 0.9em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Buton icon compact (× etc.) — egal și mic, chiar și pe mobil unde .btn devine 100% */
.btn-icon { flex: 0 0 auto !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 38px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; }

/* Meta poll compact, lizibil, cu pictograme */
.poll-meta-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; font-size: 0.8em; color: var(--text-secondary); margin-top: 6px; }
.poll-meta-2 .pm-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.poll-meta-2 .pm-item i { opacity: .7; }
.poll-status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 10px; font-weight: 700; font-size: .92em; }
.poll-status-pill.is-active { background: rgba(78,205,196,.18); color: var(--success, #4ecdc4); }
.poll-status-pill.is-active i { font-size: .6em; }
.poll-status-pill.is-closed { background: rgba(231,76,60,.18); color: var(--danger, #e74c3c); }

/* Checkbox-uri poll compacte (fără spațiul mare din form-row) */
.poll-checks { display: flex; flex-direction: column; gap: 9px; margin: 2px 0 14px; }
.poll-check { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .95em; }
.poll-check input { margin: 0; flex: 0 0 auto; }

/* Toolbar poll (2 cartonașe) */
.polls-tools { grid-template-columns: repeat(2, 1fr); }
.poll-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.poll-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Carduri-banner pentru „What to play?" (vot pe jocuri) */
.gv-card { position: relative; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-secondary); margin-bottom: 10px; }
.gv-card.is-leader { border: 2px solid var(--accent-gold, #ffd700); }
.gv-banner { position: relative; height: 96px; min-height: 96px; background-size: cover; background-position: center; background-color: var(--bg-primary, #0a0e27); }
.gv-banner-noimg { background: linear-gradient(135deg, #252b4a, #1e1e2e); }
.gv-banner-ov { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 8px 12px; background: linear-gradient(180deg, rgba(10,14,39,0) 30%, rgba(10,14,39,.55) 65%, rgba(10,14,39,.92) 100%); }
.gv-banner-title { font-weight: 800; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.8); font-size: 1.05em; line-height: 1.1; }
.gv-title-link { cursor: pointer; }
.gv-title-link:hover { text-decoration: underline; }
.gv-banner-rating { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-gold, #ffd700); font-weight: 800; white-space: nowrap; text-shadow: 0 2px 6px rgba(0,0,0,.85); font-size: .9em; }
.gv-details { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 8px 12px; font-size: .8em; color: var(--text-secondary); }
.gv-details i { opacity: .7; margin-right: 3px; }
.gv-card-body { padding: 8px 12px 10px; border-top: 1px solid var(--border); }
.gv-remove-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85em; }
.gv-remove-x:hover { background: var(--danger, #e74c3c); }
.gv-search-results { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding-right: 2px; }
.gv-search-card { cursor: pointer; transition: border-color .12s, transform .08s; }
.gv-search-card:hover { border-color: var(--accent-primary, #ff6b35); }
.gv-search-card:active { transform: scale(.99); }
.gv-card-add { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px; font-size: .82em; font-weight: 700; color: var(--accent-primary, #ff6b35); border-top: 1px solid var(--border); }
.gv-section-label { font-size: .8em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 8px; }

/* Search bar din vot: iconiță + input fără suprapunere (override la padding-ul mobil cu !important) */
.gv-search-wrap { position: relative; }
.gv-search-wrap .gv-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .5; pointer-events: none; z-index: 1; }
.gv-search-wrap input.form-control { padding-left: 46px !important; }

/* Butoanele din antetul votului: rând uniform, nu full-width stivuit */
.gv-head-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin-top: 10px; }
.gv-head-actions .btn { width: auto !important; min-width: 0; }

/* Cele 3 butoane de vot (👍😐👎) pe un singur rând, egale */
.gv-vote-btns { display: flex; gap: 8px; }
.gv-vote-btns .btn { flex: 1 1 0; width: auto !important; min-width: 0; }

/* Acțiunile de sub search (Share / Closed / Close) — un singur rând; pe mobil doar iconițe */
.gv-foot-actions { display: flex; gap: 8px; margin-top: 14px; }
.gv-foot-actions .btn { flex: 1 1 0; width: auto !important; min-width: 0; white-space: nowrap; }
@media (max-width: 768px) {
    .gv-foot-actions .btn-label { display: none; }
}

.poll-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8em;
  font-weight: bold;
}

.poll-status.active {
  background: rgba(78, 205, 196, 0.2);
  color: var(--success);
}

.poll-status.closed {
  background: rgba(255, 107, 107, 0.2);
  color: var(--danger);
}

.poll-option {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  margin: 12px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.poll-option:hover {
  border-color: var(--accent-primary);
  transform: translateX(5px);
}

.poll-option.voted {
  border-color: var(--success);
  background: rgba(78, 205, 196, 0.1);
}

.poll-bar-container {
  height: 24px;
  background: var(--bg-secondary);
  border-radius: 12px;
  margin-top: 10px;
  overflow: hidden;
  position: relative;
}

.poll-bar {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 12px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.poll-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.poll-percentage {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: bold;
  font-size: 0.9em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.poll-voters {
  margin-top: 10px;
  font-size: 0.85em;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.poll-voter {
  background: var(--bg-secondary);
  padding: 4px 10px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ================= NOTIFICATIONS ================= */
.notification-container {
  position: fixed;
  /* Notch / Dynamic Island: fără `env(safe-area-inset-top)`, primele notificări
     intrau sub crestătură sau sub bara de stare pe iPhone. `right`/`left` contează
     în peisaj, unde crestătura e pe LATERALĂ — acolo notificarea era tăiată.
     `max-width` scade cu inseturile, ca pe ecran îngust să nu depășească marginea. */
  top: calc(20px + env(safe-area-inset-top, 0px));
  right: calc(20px + env(safe-area-inset-right, 0px));
  /* ⚠ 100020 > 100010 (modalul de raportare, `supabase-integration.js`, care are
     nevoie de o valoare mare fiindcă se deschide DIN lightbox, la z-index 9999).
     Notificările trebuie să fie deasupra ORICĂRUI modal: altfel un mesaj de
     eroare devine invizibil exact în momentul în care contează — cazul raportat:
     „Could not send the report…" apărea SUB modal și trebuia căutat.
     EN: toasts must outrank every modal; the report modal at 100010 hid them. */
  z-index: 100020;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(350px, calc(100vw - 40px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
}

.notification {
  background: var(--bg-card);
  border-left: 5px solid var(--success);
  border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  animation: slideInRight 0.3s ease, slideOutRight 0.3s ease 2.7s forwards;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid var(--border);
}

.notification.error {
  border-left-color: var(--danger);
}

.notification.warning {
  border-left-color: var(--warning);
}

.notification.info {
  border-left-color: var(--info);
}

.notification-icon {
  font-size: 1.5em;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.notification-message {
  color: var(--text-secondary);
  font-size: 0.95em;
}

@keyframes slideInRight {
  from { transform: translateX(400px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(400px); opacity: 0; }
}

/* ================= CALENDAR ================= */
.calendar {
  background: var(--bg-secondary);
  border-radius: 16px;
  padding: 20px;
  border: 2px solid var(--border);
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
}

.calendar-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 12px;
}
.cal-head-actions { display: flex; gap: 8px; width: 100%; }
.cal-head-actions .btn { flex: 1 1 0; width: auto; min-width: 0; }
.cal-nav { display: flex; align-items: center; gap: 10px; width: 100%; }
.cal-nav .btn { flex: 0 0 auto; width: auto; min-width: 44px; padding: 8px 14px; }
.cal-month { flex: 1; text-align: center; margin: 0; }
@media (max-width: 768px) { .cal-head-actions .btn-label { display: none; } .cal-head-actions { gap: 6px; } }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  min-width: 0;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bg-primary);
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 35px;
  min-height: 35px;
}

.calendar-day:hover {
  background: var(--accent-primary);
  color: white;
  transform: scale(1.1);
}

.calendar-day.event {
  background: rgba(78, 205, 196, 0.2);
  border: 2px solid var(--success);
}

.calendar-day.today {
  background: var(--gradient-primary);
  color: white;
  font-weight: bold;
}

/* ---- Calendar reîmprospătat ---- */
.cal-dow { text-align: center; font-weight: 700; font-size: .78em; text-transform: uppercase; letter-spacing: .03em; color: var(--accent-primary, #ff6b35); padding: 4px 0 8px; }
.cal-cell { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; background: var(--bg-primary); font-size: .9em; cursor: pointer; transition: background .15s, transform .1s; min-height: 40px; position: relative; border: 1px solid transparent; }
.cal-cell:hover { background: var(--bg-secondary); border-color: var(--accent-primary, #ff6b35); }
.cal-cell.cal-empty { background: transparent; cursor: default; pointer-events: none; }
.cal-cell.has-event { border-color: rgba(78, 205, 196, .45); }
.cal-cell.today { background: var(--gradient-primary, linear-gradient(135deg, #ff6b35, #f9a826)); color: #fff; font-weight: 800; border-color: transparent; }
.cal-num { line-height: 1; }
.cal-dots { display: flex; align-items: center; gap: 3px; height: 6px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success, #4ecdc4); }
.cal-dot.gold { background: var(--accent-gold, #ffd700); }
.cal-cell.today .cal-dot { background: #fff; }
.cal-more { font-size: .62em; color: var(--text-secondary); font-weight: 700; }
.cal-cell.today .cal-more { color: #fff; }

.cal-empty-note { text-align: center; padding: 34px 20px; color: var(--text-secondary); }
.cal-empty-note i { font-size: 2.6em; margin-bottom: 12px; display: block; opacity: .7; }
.cal-empty-note h4 { margin: 0 0 6px; }

/* Carduri evenimente viitoare */
.cal-event { display: flex; gap: 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-left: 4px solid var(--accent-primary, #ff6b35); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.cal-event.tournament { border-left-color: var(--accent-gold, #ffd700); }
.cal-event-date { flex: 0 0 auto; width: 50px; height: 52px; border-radius: 10px; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cal-event.tournament .cal-event-date { background: linear-gradient(135deg, rgba(255, 215, 0, .15), rgba(255, 215, 0, .05)); }
.cal-event-day { font-size: 1.35em; font-weight: 800; line-height: 1; color: var(--accent-primary, #ff6b35); }
.cal-event.tournament .cal-event-day { color: var(--accent-gold, #ffd700); }
.cal-event-mon { font-size: .7em; text-transform: uppercase; color: var(--text-secondary); letter-spacing: .04em; }
.cal-event-body { flex: 1; min-width: 0; }
.cal-event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cal-event-title { font-weight: 700; font-size: 1em; min-width: 0; }
.cal-event-tools { display: flex; gap: 6px; flex: 0 0 auto; }
.cal-tool { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-primary); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .9em; }
.cal-tool:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.cal-tool.danger:hover { border-color: var(--danger, #e74c3c); color: var(--danger, #e74c3c); }
.cal-event-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-secondary); font-size: .85em; margin-top: 4px; }
.cal-event-desc { margin-top: 6px; color: var(--text-secondary); font-size: .86em; line-height: 1.4; }
.cal-attendees { display: flex; align-items: center; margin-top: 8px; padding-left: 2px; }
.cal-att { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; border: 2px solid var(--bg-secondary); margin-right: -6px; background: var(--bg-primary); display: inline-flex; align-items: center; justify-content: center; }
.cal-att img { width: 24px; height: 24px; object-fit: cover; }
.cal-att-more { margin-left: 12px; font-size: .8em; color: var(--text-secondary); }
.cal-event-rsvp { margin-top: 10px; }

/* ---------- §6: eveniment clickabil -> pop-up cu toate detaliile ---------- */
.cal-event.clickable,
.cal-day-event.clickable { cursor: pointer; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.cal-event.clickable:hover,
.cal-day-event.clickable:hover { border-color: var(--accent-primary, #ff6b35); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.cal-event.clickable:focus-visible,
.cal-day-event.clickable:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 2px; }

/* Cele 3 butoane RSVP: UN singur rând, fără wrap (înainte se rupeau pe 2-3 rânduri). */
.cal-rsvp-btns { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.cal-rsvp-btns .rsvp-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }

/* Rândurile din pop-up-ul de detalii eveniment. */
.ev-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
.ev-row:last-of-type { border-bottom: 0; }
.ev-row-label { flex: 0 0 40%; max-width: 170px; color: var(--text-secondary); font-size: .88em; font-weight: 600; }
.ev-row-value { flex: 1; min-width: 0; word-break: break-word; }

/* Mobil (§18.7/§26.6): butoanele RSVP rămân pe un rând, doar cu iconițe
   (`title` păstrat pentru accesibilitate). */
@media (max-width: 768px) {
  .cal-rsvp-btns .rsvp-btn-label { display: none; }
  .cal-rsvp-btns .rsvp-btn { padding-left: 0; padding-right: 0; }
  .ev-row { flex-direction: column; gap: 2px; }
  .ev-row-label { flex: none; max-width: none; }
}

/* ---------- Carduri de joc clickabile (favorite / deținute) + „Vezi toate" ---------- */
.pf-fav-card.clickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.pf-fav-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
.pf-fav-card.clickable:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 2px; }
.pf-fav-seeall {
  margin-top: 8px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--accent-primary, #ff6b35);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .85em;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pf-fav-seeall:hover { border-color: var(--accent-primary, #ff6b35); background: rgba(255, 107, 53, .08); }

/* ================= BADGES ================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: bold;
}

.badge-primary {
  background: rgba(255, 107, 53, 0.2);
  color: var(--accent-primary);
  border: 1px solid var(--accent-primary);
}

.badge-success {
  background: rgba(78, 205, 196, 0.2);
  color: var(--success);
  border: 1px solid var(--success);
}

.badge-warning {
  background: rgba(255, 230, 109, 0.2);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.badge-danger {
  background: rgba(255, 107, 107, 0.2);
  color: var(--danger);
  border: 1px solid var(--danger);
}

.badge-info {
  background: rgba(77, 150, 255, 0.2);
  color: var(--info);
  border: 1px solid var(--info);
}

/* ================= GAME LIST ================= */
.game-list-container {
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
}

.game-list-item {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}

.game-list-item:hover {
  border-color: var(--accent-primary);
  transform: translateX(5px);
}

.game-list-info {
  flex: 1;
}

.game-list-game {
  font-weight: bold;
  color: var(--accent-gold);
  font-size: 1.1em;
}

.game-list-user {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-top: 5px;
}

.game-list-date {
  color: var(--text-secondary);
  font-size: 0.8em;
}

.game-list-actions {
  display: flex;
  gap: 10px;
}

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: var(--bg-primary); }

::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: 6px;
  border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-secondary);
}

/* Footer legal mai compact pe telefon */
@media (max-width: 600px) {
  .legal-footer { padding: 12px 12px 18px !important; font-size: .68em !important; line-height: 1.55 !important; }
}

/* ================= RESPONSIVE DESIGN ================= */
@media (max-width: 1200px) {
  .container {
    padding: 15px;
  }
  
  .player-grid,
  .catalog-grid,
  .history-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .container {
    padding: 10px;
  }
  
  /* logo header: dimensiune gestionata de .app-logo (clamp) */
  
  .tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 10px;
    margin-bottom: 15px;
    flex-direction: row !important;
    width: 100%;
  }
  
  .tabs::-webkit-scrollbar {
    display: none;
  }
  
  .tab {
    width: auto !important;
    min-width: 120px;
    font-size: 0.85em;
    padding: 10px 15px;
    justify-content: center;
    flex: 0 0 auto;
  }
  
  .tab-badge {
    min-width: 18px;
    font-size: 0.7em;
    padding: 1px 6px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .player-grid,
  .catalog-grid,
  .history-grid {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .modal-content {
    width: 95%;
    padding: 20px;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .chat-container {
    height: calc(100vh - 180px);
    height: calc(100dvh - 180px);
    min-height: 480px;
  }
  .chat-message { max-width: 80%; }
  
  .form-control, 
  .chat-input,
  .session-player-score {
      padding: 16px 14px !important;
      font-size: 16px !important;
      min-height: 48px;
  }
  
  .btn {
      min-height: 48px;
      padding: 14px 20px !important;
  }
  
  .btn-sm {
      min-height: 42px;
      padding: 10px 16px !important;
  }
  
  .modal-content {
      width: 95% !important;
      max-width: 95% !important;
      padding: 15px !important;
      margin: 10px !important;
  }
  
  .modal-header {
      /* ⚠ Aici era `flex-direction: column` — ăsta era bug-ul: pe telefon titlul și
         butonul × deveneau două RÂNDURI, deci × cădea sub titlu în loc să stea în
         colțul dreapta-sus. Motivul original era, cel mai probabil, titlurile lungi
         care împingeau butonul afară din ecran. Rezolvăm cauza, nu simptomul:
         rămânem pe rând (`row`), lăsăm titlul să se înfășoare (`min-width: 0` +
         `overflow-wrap`) și blocăm butonul la 40px (`flex: 0 0 auto`), ca să nu fie
         niciodată comprimat. `align-items: flex-start` ține × lipit de marginea de
         sus chiar și când titlul ocupă două rânduri. */
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
  }
  
  .modal-header h2 {
      font-size: 1.2em !important;
      min-width: 0;                 /* fără asta, un titlu lung refuză să se micșoreze */
      overflow-wrap: anywhere;      /* nume de joc lungi, fără spații, nu ies din ecran */
  }
  
  .modal-header .modal-close {
      flex: 0 0 auto;               /* butonul își păstrează cei 40px, orice ar fi în titlu */
  }
  
  .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0 -15px;
      padding: 0 15px;
  }
  
  table {
      /* ★ 800px forțat = scroll kilometric pe telefon. 560px + celule dense
         = același conținut, scroll cu ~30% mai scurt. */
      min-width: 560px;
  }
  
  th, td {
      padding: 8px 7px !important;
      font-size: 0.78em !important;
  }
  
  .calendar {
      padding: 12px !important;
      overflow-x: hidden !important;
  }
  .calendar-grid {
      gap: 4px !important;
      min-width: 0 !important;
  }
  .cal-cell {
      min-height: 34px !important;
      font-size: 0.82em !important;
      border-radius: 8px !important;
      padding: 2px !important;
  }
  .cal-dow {
      font-size: 0.62em !important;
      padding: 2px 0 5px !important;
  }
  .calendar-day {
      min-width: 0 !important;
      min-height: 34px !important;
      font-size: 0.8em !important;
      border-radius: 8px !important;
  }
  
  .chat-container {
      height: calc(100vh - 170px) !important;
      height: calc(100dvh - 170px) !important;
      min-height: 420px !important;
  }
  .chat-message { max-width: 82%; }
  
  .chat-input-area {
      padding: 10px 12px !important;
      flex-wrap: nowrap;
      gap: 8px;
  }
  
  .chat-input {
      min-height: 44px;
      font-size: 16px !important;
  }
  
  .chat-send-btn {
      width: 44px !important;
      height: 44px !important;
      min-height: 44px;
  }
  
  .chat-message {
      max-width: 90% !important;
      padding: 12px !important;
  }
}

@media (max-width: 480px) {
  /* logo header: dimensiune gestionata de .app-logo (clamp) */
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .card {
    padding: 20px;
  }
  
  .modal-content {
    padding: 15px;
  }
  
  .player-stats {
    grid-template-columns: 1fr;
  }
  
  .chat-message {
    max-width: 95%;
  }
  
  /* logo header: dimensiune gestionata de .app-logo (clamp) */
  
  .current-user {
    padding: 6px 12px;
    font-size: 0.8em;
  }
  
  .player-grid,
  .catalog-grid,
  .session-players-grid {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  
  .player-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .chat-container {
    height: 350px !important;
  }
  
  body {
    font-size: 14px;
  }
  
  .card-title {
    font-size: 1em !important;
    margin-bottom: 15px !important;
  }
  
  .stat-value {
    font-size: 1.8em !important;
  }
  
  h2, h3, h4 {
    font-size: 1.1em !important;
  }
}

/* ================= WELCOME SCREEN ================= */
.welcome-screen {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.welcome-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(2em, 8vw, 4em);
  color: var(--accent-primary);
  text-shadow: 0 0 30px rgba(255, 107, 53, 0.5);
  margin-bottom: 30px;
  animation: glow 2s ease-in-out infinite alternate;
}

.auth-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ================= SESSION FORM ================= */
.session-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

.session-player-card {
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  transition: all 0.3s ease;
  position: relative;
}

.session-player-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-3px);
}

.session-player-card.absent {
  opacity: 0.6;
  background: var(--bg-card);
}

.session-player-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
/* Butonul de eliminare (X) stă în STÂNGA numelui — departe de butonul „Turn" (evită apăsarea greșită) */
.session-player-header .btn-x-small { order: -1; }

.session-player-name {
  font-weight: bold;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.session-player-guest {
  color: var(--warning);
}

.session-player-score {
  width: 100%;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: 'Space Mono', monospace;
  font-size: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.session-player-score:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

/* ================= SESSION TAB (redesign) ================= */
.sess-modes { display: flex; gap: 8px; margin-top: 10px; }
.sess-modes .sess-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.sess-mode-desc { color: var(--text-secondary, #9aa); font-size: .86em; margin: 10px 2px 6px; }
.sess-mode-block { background: rgba(255,255,255,.03); border: 1px solid var(--border, #333); border-radius: 14px; padding: 16px; margin: 6px 0 18px; }

.sess-help { display: block; margin-top: 6px; color: var(--text-secondary, #9aa); font-size: .8em; opacity: .85; }
.sess-help i { color: var(--accent-primary, #ff6b35); opacity: .8; }

.sess-extras { margin: 20px 0; }
.sess-extras-label { font-size: .8em; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-secondary, #9aa); margin-bottom: 10px; }
.sess-extras-label i { color: var(--accent-primary, #ff6b35); }
.sess-extras-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.sess-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 14px 6px; min-height: 80px; position: relative;
  background: var(--bg-card, #1e1e2e); border: 1px solid var(--border, #333);
  border-radius: 14px; color: var(--text-primary, #eee); cursor: pointer;
  font-family: inherit; font-size: .76em; font-weight: 600; text-align: center; line-height: 1.15;
  transition: border-color .14s ease, background .14s ease, transform .1s ease;
}
.sess-tile i { font-size: 1.4em; color: var(--accent-primary, #ff6b35); }
.sess-tile:hover { border-color: var(--accent-primary, #ff6b35); }
.sess-tile:active { transform: scale(.96); }
.sess-tile.is-open, .sess-tile.is-on { border-color: var(--accent-primary, #ff6b35); background: rgba(255,107,53,.10); }
.sess-pro { position: absolute; top: 6px; right: 6px; font-size: .6em; font-weight: 800; letter-spacing: .04em; color: var(--accent-gold, #ffd700); background: rgba(255,215,0,.12); border-radius: 6px; padding: 1px 5px; }
/* Variante de culoare per plan (aceeași formă, doar culoarea diferă) */
.sess-pro.plan-basic { color: #4dabf7; background: rgba(77,171,247,.14); }
.sess-pro.plan-pro { color: var(--accent-gold, #ffd700); background: rgba(255,215,0,.12); }
.sess-pro.plan-elite { color: #c77dff; background: rgba(199,125,255,.16); }
.sess-pro.plan-enterprise { color: #ff7d7d; background: rgba(255,125,125,.14); }
/* Badge în flux (pentru titluri/butoane care nu sunt tile-uri poziționate) */
.sess-pro.plan-inline { position: static; margin-left: 6px; vertical-align: middle; }
/* Badge pe butoanele-icon din header-ul de tab (ex. Export în Istoric) */
.tab-head-btn { position: relative; }
.tab-head-btn .sess-pro { top: -7px; right: -7px; }
/* Buton „Vezi toate funcțiile" din cardurile de planuri */
.plans-more-btn { background: none; border: none; color: var(--accent-primary, #ff6b35); cursor: pointer; font-family: inherit; font-size: .82em; font-weight: 600; padding: 2px 0; display: inline-flex; align-items: center; gap: 6px; }
.plans-more-btn:hover { text-decoration: underline; }
.sess-panel { background: rgba(255,255,255,.03); border: 1px solid var(--border, #333); border-radius: 14px; padding: 16px; margin-top: 12px; animation: sessPanelIn .16s ease; }
.sess-panel > label { display: block; margin-bottom: 6px; }
@keyframes sessPanelIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.sess-participants-title { margin-top: 24px; }
.sess-guest-row { display: flex; gap: 10px; margin-top: 10px; }
.sess-actions { display: flex; gap: 12px; margin-top: 22px; }
.sess-actions .btn { flex: 1; justify-content: center; }

/* Grila de participanți: search full-width; membrii + invitații curg unitar */
.session-players-grid > div:first-child { grid-column: 1 / -1; }
#selectedPlayers { display: contents; }

/* ===== Players tab: toolbar tiles + carduri compacte ===== */
.pl-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 4px; }
.cat-tools { grid-template-columns: repeat(4, 1fr); }
.sess-tile-accent { background: linear-gradient(135deg, var(--accent-primary, #ff6b35), #ff8c42); border-color: var(--accent-primary, #ff6b35); color: #fff; }
.sess-tile-accent i { color: #fff; }
.sess-tile-accent:hover { border-color: #fff; background: linear-gradient(135deg, #ff7d4d, #ff9a55); }
.sess-tile-accent.is-open, .sess-tile-accent.is-on { background: linear-gradient(135deg, var(--accent-primary, #ff6b35), #ff8c42); }
@media (max-width: 600px) { .cat-tools { grid-template-columns: repeat(2, 1fr); } }

.player-card-compact { padding: 14px 16px; }
.player-card-compact .player-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 5px 8px; margin-bottom: 12px; max-width: 100%; text-align: left;
}
.pl-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); }
.pl-avatar img { width: 30px; height: 30px; object-fit: cover; }

/* Modal editare scor */
.es-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.es-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-secondary); }
.es-avatar img { width: 48px; height: 48px; object-fit: cover; }
.es-name { font-weight: 800; font-size: 1.05em; }
.es-cur { font-size: .85em; color: var(--text-secondary); }
.es-label { display: block; font-size: .85em; color: var(--text-secondary); margin-bottom: 8px; }
.es-input-row { display: flex; align-items: center; gap: 6px; }
.es-input-row .form-control { flex: 1; text-align: center; font-weight: 700; font-size: 1.1em; min-width: 0; }
.es-step { flex: 0 0 auto; min-width: 44px; padding: 10px 8px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); border-radius: 8px; cursor: pointer; font-weight: 700; }
.es-step:hover { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }

/* Statistics — header cu iconițe (Filtre + Share) pe linia titlului */
.stats-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.stats-head .card-title { margin: 0; }
.stats-head-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.stats-head-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1em; transition: border-color .12s, color .12s; }
.stats-head-btn:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }
.stats-head-btn.is-on { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }

/* Statistics — selector tip ca tile-uri (stil History/Players) */
.stats-tools { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 14px 0 18px; }
.stats-tools .sess-tile.is-active { background: linear-gradient(135deg, var(--accent-primary, #ff6b35), #ff8c42); border-color: transparent; color: #fff; }
.stats-tools .sess-tile.is-active i { color: #fff; }

/* ELO leaderboard — avatar + nume clickabil */
.elo-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.elo-rank { width: 30px; flex: 0 0 auto; text-align: center; color: var(--text-secondary); font-weight: 700; }
.elo-av { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--bg-primary); display: inline-flex; align-items: center; justify-content: center; }
.elo-av img { width: 30px; height: 30px; object-fit: cover; }
.elo-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.elo-name-link { cursor: pointer; }
.elo-name-link:hover { color: var(--accent-primary, #ff6b35); text-decoration: underline; }
.elo-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.elo-games { color: var(--text-secondary); white-space: nowrap; }

/* Show-more generic pentru tabele stats */
.stats-hidden { display: none !important; }
.stats-more-wrap { text-align: center; margin-top: 12px; }
/* ⚠ `flex-basis: calc(100% - 42px)` — NU `auto`. Prima variantă folosea
     `flex: 1 1 auto` și NU funcționa: `flex-wrap` împarte elementele pe rânduri
     pe baza dimensiunilor IPOTETICE (`flex-basis`), și abia DUPĂ aceea `flex-grow`
     distribuie spațiul rămas în fiecare rând. Deci un nume scurt încăpea pe primul
     rând ÎMPREUNĂ cu etichetele, iar creșterea venea prea târziu ca să le mai
     împingă. Ca ruperea să fie garantată, baza trebuie să ocupe ea însăși rândul.
     42px = avatar 30 + `column-gap` 8 + 4 rezervă. Rămân sub 4px liberi pe primul
     rând, adică mai puțin decât cea mai îngustă etichetă ⇒ toate trec pe rândul
     doi, indiferent cât de scurt e numele. Asta cerea uniformitatea.
   ⚠ `min-width: 0` anulează `min-width: auto` implicit al elementelor flex. Fără
     el, elementul nu se micșorează niciodată sub lățimea textului, deci
     `text-overflow: ellipsis` nu se poate declanșa — aceeași capcană ca la
     `#clubSwitcher .hbtn-label`. Cu el, numele lung se retează cu „…".
   ⚠ `white-space: nowrap` rămâne obligatoriu: fără el textul s-ar rupe pe mai
     multe rânduri și n-ar mai exista ce reteza.
   ⚠ Dacă avatarul își schimbă vreodată mărimea (azi 30px, regula `.pl-avatar`),
     cei 42px de aici trebuie recalculați — altfel etichetele revin pe primul rând.
   EN: flex line-breaking happens on flex-basis, BEFORE flex-grow — so the basis
       itself must claim the row; `auto` + grow was too late to push the pills. */
.player-card-compact .pl-name {
  flex: 1 1 calc(100% - 42px); min-width: 0;
  font-size: 1.32em; font-weight: 700; color: var(--accent-gold);
  white-space: nowrap; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.player-card-compact .pl-mini-pill { font-size: 0.5em; padding: 1px 6px; line-height: 1.5; white-space: nowrap; }
.player-mini { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.player-mini .pm-item { font-size: .82em; color: var(--text-secondary, #9aa); white-space: nowrap; }
.player-mini .pm-item b { color: var(--text-primary, #eee); font-size: 1.08em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.player-actions { display: flex; gap: 6px; margin-top: 12px; }
.player-actions .btn { flex: 1; min-width: 0; padding: 10px 0; }
.player-actions .btn i { margin: 0; }
.players-show-more { text-align: center; margin-top: 8px; }
.players-show-more:empty { display: none; }
.players-more-btn { width: auto; min-width: 200px; }
/* La „Realizările clubului" butonul stă DIRECT sub grilă, fără învelișul `.players-show-more`
   care dă distanța la secțiunea de jucători. Selectorul de frate atinge DOAR cazul ăsta.
   EN: adjacent-sibling selector targets only the achievements case. */
.ach-grid + .players-more-btn { margin-top: 12px; }
.hist-scores.collapsed .hist-score-row:nth-child(n+4) { display: none !important; }
.hist-more-players { width: auto; min-width: auto; padding: 6px 14px; margin-top: 8px; font-size: 0.85em; }

/* Admin Panel — acordeon (progressive disclosure) */
.admin-acc { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.admin-acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  color: var(--text-primary, #fff);
  font-family: inherit; font-size: 1em; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.admin-acc-head:hover { border-color: var(--accent-primary, #ff6b35); }
.admin-acc-head.is-open { border-color: var(--accent-primary, #ff6b35); background: var(--bg-card, #1e1e2e); }
.admin-acc-head > span { display: flex; align-items: center; gap: 10px; }
.admin-acc-head > span > i { color: var(--accent-primary, #ff6b35); }
.admin-acc-chev { opacity: .65; transition: transform .2s ease; }
.admin-acc-head.is-open .admin-acc-chev { transform: rotate(180deg); }
.admin-acc-body { padding: 6px 4px 10px; }
.admin-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.admin-page-btn { width: auto; min-width: 38px; padding: 6px 10px; }
.admin-acc-head.admin-danger > span > i { color: var(--danger, #e74c3c); }
.admin-acc-head.admin-danger:hover,
.admin-acc-head.admin-danger.is-open { border-color: var(--danger, #e74c3c); }

/* Profil — listă de prieteni (responsive) */
.profile-friends-title { margin: 22px 0 12px; }
.friend-list { display: flex; flex-direction: column; gap: 6px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; flex-wrap: wrap; }
.friend-row-pending { background: transparent; border: none; padding: 5px 0; border-radius: 0; }
.friend-name { font-weight: 600; color: var(--accent-primary, #ff6b35); display: inline-flex; align-items: center; min-width: 0; }
.friend-actions { display: flex; gap: 6px; }
.friend-actions .btn { width: auto; min-width: auto; padding: 6px 12px; }
@media (max-width: 600px) {
  .friend-actions { width: 100%; }
  .friend-actions .btn { flex: 1; }
}

/* Profil — header identitate (2 rânduri) */
.pf-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pf-identity-avatar { line-height: 1; flex-shrink: 0; position: relative; }
.pf-identity-info { min-width: 0; }
.pf-identity-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-name { font-size: 1.3em; font-weight: 700; line-height: 1.1; }
.pf-tag { color: var(--accent-primary, #ff6b35); font-weight: 600; font-size: 0.9em; }
.pf-meta { color: var(--text-secondary); display: block; margin-top: 3px; }
@media (max-width: 600px) {
  .pf-name { font-size: 1.12em; }
  .pf-meta { font-size: 0.78em; }
}

/* Profil — prieteni: cereri + acordeon */
.friends-incoming { margin: 6px 0 10px; }
.friends-incoming-label { font-size: 0.82em; color: var(--text-secondary); margin-bottom: 6px; }
.friends-acc-head { margin-top: 4px; }
.friend-remove-mini { width: auto; min-width: auto; padding: 4px 10px; font-size: 0.78em; opacity: 0.75; }
.friend-remove-mini:hover { opacity: 1; }
.friend-id-link { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.friend-avatar { line-height: 1; flex-shrink: 0; }
.friend-id-text { display: flex; flex-direction: column; min-width: 0; }
.friend-name-line { font-weight: 600; color: var(--accent-primary, #ff6b35); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-tag-line { font-size: 0.7em; color: var(--text-secondary); line-height: 1.15; }

/* Profil — creion editare avatar + popup avatar/poză */
.pf-avatar-edit { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-primary, #ff6b35); color: #fff; border: 2px solid var(--bg-card, #1e1e2e); display: flex; align-items: center; justify-content: center; font-size: 0.62em; cursor: pointer; padding: 0; line-height: 1; }
.pf-avatar-edit:hover { filter: brightness(1.12); }
.pf-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pf-emoji-btn { font-size: 1.3em; padding: 6px 0; line-height: 1; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.pf-emoji-btn:hover { border-color: var(--accent-primary, #ff6b35); }
.pf-emoji-btn.is-on { border-color: var(--accent-primary, #ff6b35); background: rgba(255,107,53,.18); }
/* Jocuri favorite — carduri compacte cu titlu peste imagine (ca rezultatele de căutare) */
.pf-pref-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; margin-bottom: 8px; }
.pf-pref-chips:empty { display: none; }
.pf-fav-card, .pf-fav-pick { position: relative; height: 56px; border-radius: 8px; background-size: cover; background-position: center; overflow: hidden; border: 1px solid var(--border, #333); }
.pf-fav-card.noimg, .pf-fav-pick.noimg { background: linear-gradient(135deg, #2a2d4a, #1f2238); }
.pf-fav-pick { cursor: pointer; transition: border-color .12s ease; }
.pf-fav-pick:hover { border-color: var(--accent-primary, #ff6b35); }
.pf-fav-card-ov { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 5px 7px; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0) 100%); }
.pf-fav-card-title { color: #fff; font-weight: 600; font-size: 0.76em; line-height: 1.12; text-shadow: 0 1px 3px rgba(0,0,0,0.9); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-fav-card-x { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(0,0,0,0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.72em; padding: 0; line-height: 1; }
.pf-fav-card-x:hover { background: var(--danger, #e74c3c); }
.pf-fav-search-wrap { position: relative; margin-top: 8px; }
.pf-fav-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: 0.55; pointer-events: none; }
/* Fix: fără padding-left, textul (și placeholder-ul) treceau PESTE iconița de lupă.
   Identic cu `.disc-search-input-wrap` (care avea deja regula) — `.pf-fav-search-wrap`
   o omitea, deci bug-ul afecta ȘI căutarea de la Jocuri favorite, nu doar cea nouă. */
.pf-fav-search-wrap .form-control { padding-left: 40px !important; }
#pfFavSearch { padding-left: 40px !important; }
.pf-fav-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 8px; margin-top: 8px; }
.pf-fav-results:empty { margin-top: 0; }
.pf-fav-loading { grid-column: 1 / -1; opacity: 0.7; font-size: 0.82em; padding: 4px 2px; }
.pf-pref-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.pf-pref-row .form-control { flex: 1 1 auto; min-width: 0; }
.pf-pref-row .btn { flex: 0 0 auto; width: auto; min-width: auto; white-space: nowrap; }
@media (max-width: 600px) {
  .pf-pref-row { flex-direction: column; align-items: stretch; }
  .pf-pref-row .btn { width: 100%; }
}
@media (max-width: 480px) { .pf-emoji-grid { grid-template-columns: repeat(6, 1fr); } }

/* Profil — toggle „Public" integrat în câmp */
.pf-vis { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72em; font-weight: 600; padding: 2px 9px; line-height: 1.4; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; user-select: none; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.pf-vis input { display: none; }
.pf-vis.is-on { color: #fff; background: var(--accent-primary, #ff6b35); border-color: var(--accent-primary, #ff6b35); }
.pf-vis .pf-eye-on { display: none; }
.pf-vis.is-on .pf-eye-on { display: inline; }
.pf-vis.is-on .pf-eye-off { display: none; }
.pf-vis .pf-vis-on { display: none; }
.pf-vis.is-on .pf-vis-on { display: inline; }
.pf-vis.is-on .pf-vis-off { display: none; }

/* Profil — Account security */
.pf-sec-checks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.pf-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: normal; }
.pf-danger-row { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); text-align: center; }
.pf-delete-link { color: var(--danger, #e74c3c); font-size: 0.82em; text-decoration: none; opacity: 0.8; }
.pf-delete-link:hover { opacity: 1; text-decoration: underline; }

/* Profil — statistici: schimbare instant (fără tranziție) + ELO pe club scrollabil */
.pf-exp-value { font-size: 1.05em !important; color: var(--accent-gold, #ffd700) !important; line-height: 1.15; }
.pf-exp-xp { font-size: 0.72em; color: var(--text-secondary); margin-top: 3px; }
.pf-elo-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
/* Banda „ELO pe club" primea bara GLOBALĂ, de 12px cu chenar — arăta ca o bară de sistem.
   Adusă la registrul celorlalte benzi orizontale (`.ach-chips`, `.perf-thumbs`): 4px, portocalie.
   `scrollbar-color` acoperă Firefox, care nu înțelege `::-webkit-scrollbar`.
   EN: inherited the 12px global scrollbar; brought in line with the other strips. */
.pf-elo-scroll { scrollbar-color: var(--accent-primary, #ff6b35) transparent; }
.pf-elo-scroll::-webkit-scrollbar { height: 4px; }
.pf-elo-scroll::-webkit-scrollbar-track { background: transparent; }
.pf-elo-scroll::-webkit-scrollbar-thumb { background: var(--accent-primary, #ff6b35); border: 0; border-radius: 4px; }
.pf-elo-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent-secondary, #ff8c42); }
.pf-elo-scroll .stat-card { flex: 0 0 auto; min-width: 118px; }
.pf-tag-lock { font-size: 0.72em; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 3px 8px; white-space: nowrap; }

/* iOS: input-urile native date/time aveau lățime fixă și depășeau ecranul — le lăsăm să se micșoreze */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.form-row .form-group, .sess-when .form-group { min-width: 0; }

@media (max-width: 720px) {
  .sess-modes { flex-direction: column; }
  .sess-extras-grid { grid-template-columns: repeat(3, 1fr); }
  .sess-guest-row { flex-direction: column; }
  .sess-actions { flex-direction: column; }
  /* Cronometru: titlu sus, butoane full-width dedesubt (nu mai stau înghesuite la stânga) */
  #sessionTimerPanel .card { flex-direction: column; align-items: stretch; }
  #sessionTimerPanel .btn-group { width: 100%; margin-top: 12px; }
}

/* Pe ecrane cu atingere (telefon/tabletă) nu „săltăm" elementele la hover/tap — efectul de
   translateY/scale rămâne lipit după atingere și e deranjant. Feedback-ul de apăsare (:active) rămâne. */
@media (hover: none) {
  .card:hover, .stat-card:hover, .player-card:hover, .player-stat:hover,
  .catalog-item:hover, .poll-card:hover, .session-player-card:hover,
  .achievement-badge:hover, .calendar-day:hover, tbody tr:hover,
  .tab:hover, .btn:hover, .sess-tile:hover, .form-control:focus {
    transform: none !important;
  }
}

/* ================= UTILITY CLASSES ================= */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.mt-10 { margin-top: 10px; }
.mt-20 { margin-top: 20px; }
.mt-30 { margin-top: 30px; }
.mb-10 { margin-bottom: 10px; }
.mb-20 { margin-bottom: 20px; }
.mb-30 { margin-bottom: 30px; }
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.hidden { display: none !important; }
.fade-in { animation: fadeIn 0.5s ease; }
.slide-in { animation: slideIn 0.3s ease; }
.float { animation: float 3s ease-in-out infinite; }
.glow { animation: glow 2s ease-in-out infinite alternate; }

/* ================= AUDIT LOG ================= */
.audit-log {
  max-height: 400px;
  overflow-y: auto;
  padding: 15px;
  background: var(--bg-primary);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.audit-entry {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border-left: 4px solid var(--accent-primary);
}

.audit-time {
  color: var(--text-secondary);
  font-size: 0.8em;
  margin-bottom: 5px;
}

.audit-action {
  font-size: 0.9em;
  overflow-wrap: anywhere;   /* detalii lungi (nume joc, email, listă) nu depășesc cardul pe mobil */
  word-break: break-word;
}

/* ================= ANIMATIONS ================= */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes glow {
  from { text-shadow: 0 0 20px rgba(255, 107, 53, 0.5), 0 4px 0 rgba(0, 0, 0, 0.3); }
  to { text-shadow: 0 0 30px rgba(255, 107, 53, 0.8), 0 4px 0 rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 107, 53, 0.3); }
}

/* ================= TOUCH OPTIMIZATIONS ================= */
@media (hover: none) and (pointer: coarse) {
  .btn:active,
  .tab:active {
    opacity: 0.7;
    transform: scale(0.98);
    transition: all 0.1s ease;
  }
  
  input:focus, 
  select:focus, 
  textarea:focus {
    font-size: 16px !important;
  }
}

/* Safe areas pentru iPhone cu notch */
@supports (padding: max(0px)) {
  .container {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  
  .btn, .tab {
    padding-left: max(15px, env(safe-area-inset-left));
    padding-right: max(15px, env(safe-area-inset-right));
  }
}
/* === i18n / tab tweaks === */
/* Ascunde numerele (badge) de lângă tab-uri */
.tab-badge { display: none !important; }
/* Pe ecrane mici: tab-ul neselectat = doar iconiță, îngust (încap mai multe);
   tab-ul selectat = iconiță + text, lățime normală */
@media (max-width: 768px) {
  .tab:not(.active) > span[data-i18n] { display: none; }
  .tab:not(.active) { min-width: 0 !important; padding: 10px 14px !important; }
  .tab { gap: 6px; }
}

/* ---- Profil: switch statistici „Acest club" / „Toate cluburile" ---- */
.pf-scope-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-secondary);
}
.pf-scope-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 0.82em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}
.pf-scope-btn:not(.active):hover { color: var(--text-primary); }
.pf-scope-btn.active {
    background: var(--accent-primary);
    color: #fff;
}


/* ===================== DOCUMENTE LEGALE (modal) ===================== */
.legal-head-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.legal-meta { display: flex; align-items: center; gap: 8px; font-size: 0.78em; opacity: 0.7; margin-top: 2px; }
.legal-info-btn { background: none; border: none; color: var(--accent-primary); cursor: pointer; font-size: 1em; padding: 0; line-height: 1; }
.legal-info-btn:hover { color: var(--accent-gold); }

.legal-history { display: none; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 10px 12px; margin: 4px 0 14px; font-size: 0.85em; }
.legal-history.open { display: block; }
.legal-history-title { font-weight: 600; margin-bottom: 6px; color: var(--accent-primary); }
.legal-history-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; }
.legal-history-row + .legal-history-row { border-top: 1px solid rgba(255,255,255,0.08); }
.legal-history-row a { color: var(--accent-primary); }
.legal-badge-current { color: var(--success); font-size: 0.9em; }
.legal-history-hint { opacity: 0.6; font-style: italic; margin-top: 4px; }

.legal-content { line-height: 1.7; }
.legal-content h3 { margin: 24px 0 8px; font-size: 1.04em; color: var(--accent-primary); }
.legal-content h3:first-child { margin-top: 6px; }
.legal-content p { margin: 0 0 14px; }
.legal-content ul, .legal-content ol { margin: 0 0 16px; padding-left: 22px; }
.legal-content li { margin-bottom: 7px; }
.legal-content a { color: var(--accent-primary); text-decoration: underline; overflow-wrap: anywhere; }
.legal-content a:hover { color: var(--accent-gold); }
.legal-content { overflow-x: hidden; }
.legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 6px 0 18px; border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; }
.legal-content table { min-width: 480px; width: 100%; table-layout: auto; border-collapse: collapse; margin: 0; font-size: 0.8em; }
.legal-content th, .legal-content td { border: 1px solid rgba(255,255,255,0.12); padding: 7px 10px; text-align: left; vertical-align: top; }
.legal-content th { background: rgba(255,107,53,0.18); position: sticky; top: 0; }

/* ===================== Checkbox consimțământ (înregistrare) ===================== */
.form-group label.legal-consent {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.legal-consent input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; width: 18px; height: 18px; }
.legal-consent-text { flex: 1; min-width: 0; }
.legal-consent-text a { color: var(--accent-primary); font-weight: 600; text-decoration: underline; }
.legal-consent-text a:hover { color: var(--accent-gold); }

/* ── Consimțământ: stare de eroare + shake (reutilizabil, dark+portocaliu) ── */
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
.legal-consent.consent-error-on .legal-consent-text,
.legal-consent.consent-error-on .legal-consent-text a { color: var(--danger, #e74c3c); }
.legal-consent.consent-error-on input[type="checkbox"] {
  outline: 2px solid var(--danger, #e74c3c);
  outline-offset: 2px;
  accent-color: var(--danger, #e74c3c);
  border-radius: 3px;
}
.consent-error { color: var(--danger, #e74c3c); font-size: 0.82em; margin-top: 8px; overflow-wrap: anywhere; }
.consent-error.hidden { display: none; }

/* ===================== Notificare cookie-uri (informativă, auto-dismiss) ===================== */
.cookie-notice {
  /* Indicatorul de acasă (bara de jos de pe iPhone-urile fără buton) acoperea
     butoanele bannerului. */
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%) translateY(16px);
  width: calc(100% - 28px); max-width: 440px;
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 0.82em; line-height: 1.45; color: var(--text-secondary);
  box-shadow: 0 8px 28px var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity .35s ease, transform .35s ease; z-index: 999;
}
.cookie-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cookie-notice-text { flex: 1; min-width: 0; }
.cookie-notice a { color: var(--accent-primary); text-decoration: underline; }
.cookie-notice a:hover { color: var(--accent-gold); }
.cookie-notice-close { background: none; border: none; color: var(--text-secondary); font-size: 1.3em; line-height: 1; cursor: pointer; opacity: 0.6; flex-shrink: 0; padding: 0 2px; }
.cookie-notice-close:hover { opacity: 1; }

/* ---- Detalii joc: credite full-width + descriere extensibilă ---- */
.gcredits { margin: 4px 0 10px; padding: 14px 16px; background: var(--bg-secondary, rgba(255,255,255,0.03)); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.gcredit { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; line-height: 1.5; }
.gcredit > i { color: var(--accent-primary, #ff6b35); flex: none; }
.gcredit > strong { flex: none; }
.gcredit > span { color: var(--text-secondary); word-break: break-word; }
.gdesc-body { color: var(--text-secondary); line-height: 1.6; margin: 12px 0; white-space: pre-line; }
.gdesc-body.gdesc-clamp { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gdesc-toggle { background: none; border: none; color: var(--accent-primary, #ff6b35); cursor: pointer; font-weight: 600; padding: 2px 0; font-size: 0.9em; }
.gdesc-toggle:hover { text-decoration: underline; }
.gscore-info { opacity: 0.45; cursor: pointer; font-size: 0.78em; margin-left: 5px; }
.gscore-info:hover { opacity: 0.85; }

/* ---- Selector joc sesiune: search live cu carduri (titlu peste poză) ---- */
.sess-game-results { display: none; margin-top: 8px; max-height: 280px; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 2px; }
.sess-game-results.show { display: grid; }
.sess-game-card { position: relative; height: 64px; border-radius: 8px; background-size: cover; background-position: center; cursor: pointer; overflow: hidden; border: 1px solid var(--border, #333); }
.sess-game-card.noimg { background: linear-gradient(135deg, #2a2d4a, #1f2238); }
.sess-game-card-ov { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 6px 8px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0) 100%); }
.sess-game-card-title { color: #fff; font-weight: 600; font-size: 0.82em; line-height: 1.15; text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.sess-game-card:hover { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -2px; }
.sess-game-empty { padding: 10px; opacity: 0.6; font-size: 0.85em; }
.sess-game-selected { margin-top: 8px; }
.sess-game-selected-card { position: relative; height: 64px; border-radius: 10px; background-size: cover; background-position: center; overflow: hidden; display: flex; align-items: center; border: 1px solid var(--border, #333); }
.sess-game-selected-card.noimg { background: linear-gradient(135deg, #2a2d4a, #1f2238); }
.sess-game-selected-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.75), rgba(0,0,0,0.25)); }
.sess-game-selected-title { position: relative; color: #fff; font-weight: 700; padding: 0 12px; text-shadow: 0 1px 3px rgba(0,0,0,0.85); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess-game-clear { position: relative; flex: none; width: 30px; height: 30px; margin-right: 10px; border: none; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sess-game-clear:hover { background: rgba(0,0,0,0.65); }
.sess-combo-av { flex: none; display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; }
.sess-combo-av img { pointer-events: none; }

/* ---- Locații anterioare (chips în panoul Location) ---- */
.past-locations { margin-top: 12px; }
.past-loc-label { font-size: 0.8em; opacity: 0.7; margin-bottom: 7px; }
.past-loc-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.past-loc-chip { background: var(--bg-secondary, rgba(255,255,255,0.05)); border: 1px solid var(--border, #333); color: var(--text-secondary); border-radius: 999px; padding: 6px 13px; font-size: 0.85em; cursor: pointer; }
.past-loc-chip:hover { border-color: var(--accent-primary, #ff6b35); color: var(--text-primary); }

/* ===== Pop-up-uri „Instalează" / „Actualizează" aplicația ===== */
.to-app-banner{
    position:fixed; left:12px; right:12px; top:calc(12px + env(safe-area-inset-top, 0px));
    margin:0 auto; z-index:99999;
    display:flex; align-items:center; gap:10px; max-width:520px;
    background:var(--bg-secondary); color:var(--text-primary);
    border:1px solid var(--border); border-radius:14px; padding:10px 12px;
    box-shadow:0 12px 34px rgba(0,0,0,.38);
    transform:translateY(-180%); opacity:0;
    transition:transform .35s ease, opacity .35s ease;
}
.to-app-banner.show{ transform:translateY(0); opacity:1; }
.to-app-banner-ico{ width:38px; height:38px; border-radius:10px; flex:none; object-fit:cover; }
.to-app-banner-txt{ flex:1; font-size:.9em; line-height:1.32; }
.to-app-banner-hint{ display:block; color:var(--text-secondary); font-size:.85em; margin-top:3px; }
.to-app-banner-btn{
    flex:none; border:none; cursor:pointer; border-radius:10px;
    background:var(--accent-primary); color:#fff; font-weight:700;
    padding:9px 15px; font-size:.9em;
}
.to-app-banner-x{
    flex:none; border:none; background:transparent; color:var(--text-secondary);
    font-size:1.4em; line-height:1; cursor:pointer; padding:0 4px;
}

/* ===== Raportare conținut/utilizatori (DSA) ===== */
.report-reasons { display:flex; flex-direction:column; gap:6px; }
.report-reason { display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border,#333);
    border-radius:9px; cursor:pointer; font-size:0.92em; transition:border-color .15s, background .15s; }
.report-reason:hover { border-color:var(--accent-primary,#ff6b35); background:rgba(255,107,53,0.06); }
.report-reason input { accent-color:var(--accent-primary,#ff6b35); width:16px; height:16px; flex:none; }
.report-ctx { font-size:0.82em; color:var(--text-secondary,#aaa); background:rgba(255,255,255,0.04);
    border-radius:8px; padding:7px 10px; margin-bottom:10px; word-break:break-word; }

/* Buton-iconiță „Raportează" — mic, subtil, separat de butoanele de acțiune.
   Dimensiune proporțională cu ecranul pe mobil (clamp). */
.report-icon-btn {
    flex:none; margin-left:auto;
    width:clamp(30px,8.5vw,36px); height:clamp(30px,8.5vw,36px);
    border-radius:50%; border:1px solid var(--border,#333);
    background:transparent; color:var(--text-secondary,#999);
    font-size:clamp(12px,3.4vw,14px); line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; opacity:.6;
    transition:opacity .15s, color .15s, border-color .15s, background .15s;
}
.report-icon-btn:hover, .report-icon-btn:focus {
    opacity:1; color:var(--danger,#e74c3c);
    border-color:var(--danger,#e74c3c); background:rgba(231,76,60,0.08);
}

/* ===== Panou de Moderare (DSA) ===== */
.mod-filterbar { display:flex; flex-wrap:wrap; gap:6px; }
.mod-chip { padding:5px 11px; border-radius:20px; border:1px solid var(--border,#333);
    background:transparent; color:var(--text-secondary,#aaa); font-size:0.82em; cursor:pointer;
    transition:background .15s, color .15s, border-color .15s; }
.mod-chip.is-on { background:var(--gradient-primary,linear-gradient(135deg,#ff6b35,#ff8c42));
    border-color:transparent; color:#fff; }
.mod-report { border:1px solid var(--border,#333); border-radius:10px; padding:11px 12px;
    margin-bottom:10px; background:var(--bg-secondary,#252b4a); }
.mod-report-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.mod-reason { font-weight:600; }
.mod-meta { font-size:0.8em; color:var(--text-secondary,#aaa); margin-top:5px; word-break:break-word; }
.mod-custom { font-size:0.86em; margin-top:7px; background:rgba(255,255,255,0.04);
    border-radius:8px; padding:7px 10px; word-break:break-word; }
.mod-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.mod-actions .btn-sm { font-size:0.8em; padding:5px 10px; }
.mod-badge { font-size:0.72em; padding:3px 9px; border-radius:20px; font-weight:600; white-space:nowrap; }
.mod-open { background:rgba(255,107,53,0.18); color:#ff8c42; }
.mod-reviewing { background:rgba(255,215,0,0.16); color:#ffd700; }
.mod-resolved { background:rgba(78,205,196,0.18); color:#4ecdc4; }
.mod-dismissed { background:rgba(255,255,255,0.08); color:#aaa; }

/* GDPR — stare „programat pentru ștergere" */
.pf-deletion-pending {
    border:1px solid var(--accent-gold,#ffd700); border-radius:10px; padding:12px 14px;
    background:rgba(255,215,0,0.07); color:var(--text-primary,#eee); font-size:0.9em;
}
.pf-deletion-pending .btn { font-size:0.85em; }

/* ===== History card — compact pe mobil (§11): informații grupate, fără
   wrap aglomerat; butoanele Share/Edit/Delete pe UN rând, doar iconițe.
   Breakpoint 768px = cel global al aplicației (acolo .btn-group devine
   column și .btn width:100% — le suprascriem explicit pentru hist-actions). */
@media (max-width: 768px) {
  .history-card { padding: 14px !important; }
  .hist-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
  .hist-head .badge { margin-left: 0 !important; margin-right: 8px; margin-top: 4px; display: inline-block; }
  .hist-winner { text-align: left !important; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .hist-score-row { padding: 6px 8px !important; font-size: 0.92em; gap: 8px; }
  .hist-score-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-score-pts { white-space: nowrap; text-align: right; }
  .hist-score-pts small { display: block; text-align: right; line-height: 1.2; }
  .hist-foot { flex-wrap: wrap; gap: 4px 12px; }
  .hist-actions { display: flex; flex-direction: row !important; flex-wrap: nowrap; gap: 8px; }
  .hist-actions .btn { flex: 1 1 0; width: auto !important; min-width: 0; padding: 10px 8px !important; justify-content: center; }
  .hist-btn-label { display: none; }

  /* — Recent Activity (Dashboard): aceleași principii ca History — */
  .game-entry { padding: 12px !important; }
  .game-entry .game-time { line-height: 2; }
  .game-entry .game-time .badge { margin-left: 0 !important; margin-right: 8px; margin-top: 4px; display: inline-block; }
  .ra-head { flex-direction: column !important; align-items: flex-start !important; gap: 6px; }
  .ra-winner { display: block; }
  .game-entry .participant { padding: 6px 8px !important; font-size: 0.92em; gap: 8px; }
  .game-entry .participant-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .game-entry .participant-score { white-space: nowrap; text-align: right; }
  .game-entry .participant-score small { display: block; text-align: right; line-height: 1.2; }
}


/* ============================================================
   REMINDERE — layout curat (clase dedicate rem-*, folosite IDENTIC
   în formulare (event/poll/gamevote) ȘI în cardul de default-uri din
   Settings). Un rând = 🔔 [select flex] [× fix], toate aceeași înălțime.
   „Add reminder" pe rândul lui, lat. NU folosi selectori [class*=…] fragili.
   ============================================================ */
.rem-row {
  display: flex;
  align-items: stretch;      /* select și × au EXACT aceeași înălțime */
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}
.rem-row .rem-bell {
  flex: 0 0 20px;
  align-self: center;        /* clopoțelul centrat pe verticală */
  text-align: center;
  opacity: .6;
}
/* Select-ul ocupă spațiul rămas, fără să depășească (min-width:0 e cheia) */
.rem-row .rem-select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  box-sizing: border-box;
}
/* Butonul × — lățime fixă, înălțime = înălțimea rândului (stretch) */
.rem-row .rem-del {
  flex: 0 0 52px;
  width: 52px;
  min-width: 52px;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* „Add reminder" — bloc propriu, lat, sub reguli */
.rem-add {
  display: block;
  width: 100%;
  margin: 4px 0 0;
  box-sizing: border-box;
}
/* Containere — fără overflow lateral, checkbox-uri necomprimate */
.reminder-picker, .rdef-block {
  max-width: 100%;
  box-sizing: border-box;
}
.reminder-picker label > input[type="checkbox"],
.rdef-block label > input[type="checkbox"] {
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  .rdef-block { padding: 10px !important; }
}

/* ===================== CAMPANII & LEGACY (Faza 2) ===================== */
.camp-card { margin-bottom: 14px; }
.camp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.camp-sub { font-size: 0.82em; opacity: 0.75; margin-top: 2px; overflow-wrap: anywhere; }
.camp-counts { text-align: right; font-size: 0.8em; opacity: 0.85; white-space: nowrap; }
.camp-roster { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.camp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 2px;
  background: var(--bg-primary, rgba(255,255,255,0.04)); border: 1px solid var(--border, #2a2a3a);
  border-radius: 999px; cursor: pointer; font-size: 0.82em; min-width: 0; }
.camp-chip:hover { border-color: var(--accent-primary, #ff6b35); }
.camp-chip-av { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; }
.camp-chip-av img { width: 100%; height: 100%; object-fit: cover; }
.camp-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.camp-sessions { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.camp-session-row { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--bg-primary, rgba(255,255,255,0.03)); border-radius: 8px; }
.camp-session-main { min-width: 0; overflow-wrap: anywhere; }
.camp-session-meta { white-space: nowrap; flex: none; opacity: 0.8; font-size: 0.85em; }
.camp-empty { opacity: 0.6; font-size: 0.85em; margin-top: 8px; }
.camp-actions { margin-top: 12px; }
.camp-attach { border: 1px solid var(--accent-primary, #ff6b35); background: rgba(255,107,53,0.06);
  padding: 12px; border-radius: 10px; }
@media (max-width: 768px) {
  .camp-head { flex-direction: column; }
  .camp-counts { text-align: left; white-space: normal; }
  .camp-chip-name { max-width: 44vw; }
}

/* ============= CAMPANII · Faza 3a (pagină detaliu + fișe personaj) ============= */
.camp-detail-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.camp-detail-title { padding: 10px 14px; margin-bottom: 16px; background: var(--bg-secondary, rgba(255,255,255,0.02)); border-radius: 10px; }
.camp-section { margin-bottom: 22px; }
.camp-section > h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 1.05em; }
.camp-char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.camp-char-card { border: 1px solid var(--border, #2a2a3a); border-radius: 12px; padding: 12px 14px;
  background: var(--bg-primary, rgba(255,255,255,0.03)); border-left: 3px solid var(--accent-primary, #ff6b35); }
.camp-char-card.retired { opacity: 0.6; border-left-color: #888; }
.camp-char-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.camp-char-name { font-weight: 700; font-size: 1.05em; overflow-wrap: anywhere; }
.camp-char-you { font-size: 0.7em; background: var(--accent-primary, #ff6b35); color: #fff; padding: 1px 6px; border-radius: 999px; vertical-align: middle; }
.camp-char-class { font-size: 0.85em; color: var(--text-secondary); }
.camp-char-owner { margin-top: 6px; }
.camp-char-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 0.85em; white-space: nowrap; flex: none; }
.camp-char-det { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border, #2a2a3a); font-size: 0.85em; display: flex; flex-direction: column; gap: 4px; }
.camp-char-det strong { color: var(--text-secondary); font-weight: 600; }
.camp-char-actions { margin-top: 12px; display: flex; gap: 8px; }
.camp-char-actions .btn { width: auto; flex: 1; }
.camp-add-row { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.camp-retired { margin-top: 16px; }
.camp-retired > summary { cursor: pointer; color: var(--text-secondary); font-size: 0.9em; padding: 6px 0; }
.camp-retired[open] > summary { margin-bottom: 10px; }
@media (max-width: 768px) {
  .camp-char-grid { grid-template-columns: 1fr; }
  /* Cardurile de personaj depășeau marginea din dreapta pe telefon.
     RO: un element de grilă are implicit `min-width:auto`, deci refuză să fie mai îngust
         decât cel mai lat copil nedespărțibil — aici rândul de statistici (`white-space:nowrap`),
         care pe mobil devine o linie orizontală. Coloana se lățea după el și împingea cardul
         în afara ecranului, tăind butonul „Retrage".
     EN: grid items default to `min-width:auto`; the nowrap stats line set the column width. */
  .camp-char-card { min-width: 0; overflow-wrap: anywhere; }
  .camp-char-top { flex-wrap: wrap; }
  .camp-char-stats { flex-direction: row; gap: 10px; flex-wrap: wrap; white-space: normal; justify-content: flex-start; flex: 1 1 100%; }
  .camp-char-actions { flex-wrap: wrap; }
  .camp-char-actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* ============= CAMPANII · Faza 3b (World State + jurnal) + mobil ============= */
.camp-detail-head > .btn { width: auto; flex: 0 0 auto; }
.camp-detail-actions { display: flex; gap: 8px; margin-left: auto; }
.camp-detail-actions .btn { width: auto; flex: 0 0 auto; }
.camp-section > h3 .btn { margin-left: auto; }
.camp-showmore { width: auto !important; margin-top: 10px; }
.camp-ws-counters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.camp-ws-counter { background: var(--bg-primary, rgba(255,255,255,0.05)); border: 1px solid var(--border, #2a2a3a);
  border-radius: 999px; padding: 4px 12px; font-size: 0.88em; }
.camp-ws-list { margin: 8px 0; }
.camp-ws-lbl { font-size: 0.82em; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.camp-ws-list ul { margin: 0; padding-left: 4px; list-style: none; }
.camp-ws-list li { padding: 3px 0; overflow-wrap: anywhere; }
.camp-ws-notes { margin-top: 10px; padding: 10px 12px; background: var(--bg-secondary, rgba(255,255,255,0.02));
  border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.92em; }
.camp-ws-crow { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; }
.camp-ws-crow .ws-ck { flex: 1 1 40%; }
.camp-ws-crow .ws-cv { flex: 1 1 40%; }
@media (max-width: 768px) {
  .camp-detail-actions .camp-btn-txt { display: none; }
}

/* World State: liste lungi -> scroll intern, nu lungesc pagina */
.camp-ws-list ul { max-height: 220px; overflow-y: auto; }
.camp-ws-notes { max-height: 160px; overflow-y: auto; }
.camp-ws-counters { max-height: 130px; overflow-y: auto; }

/* Butoane acțiuni campanie (listă + detaliu): pe mobil un SINGUR rând orizontal,
   iconițe, distribuite egal — identic cu tiparul .hist-actions (bate .btn-group column). */
@media (max-width: 768px) {
  .camp-actions, .camp-detail-actions {
    display: flex; flex-direction: row !important; flex-wrap: nowrap; gap: 8px; margin-left: 0; width: 100%;
  }
  .camp-actions .btn, .camp-detail-actions .btn {
    flex: 1 1 0; width: auto !important; min-width: 0; padding: 10px 8px !important; justify-content: center;
  }
  .camp-actions .camp-btn-txt, .camp-detail-actions .camp-btn-txt { display: none; }
}

/* Sesiuni legate clickabile -> popup detaliu */
.camp-session-click { cursor: pointer; transition: background .15s, transform .05s; }
.camp-session-click:hover { background: var(--bg-primary, rgba(255,255,255,0.06)); }
.camp-session-click:active { transform: scale(0.995); }
.camp-session-modal .history-card { margin-bottom: 0; }

/* Combo de membru (editor personaj) — dropdown ca la Add player */
.camp-member-list { border: 1px solid var(--border, #2a2a3a); border-radius: 8px; margin-top: 6px;
  max-height: 260px; overflow-y: auto; background: var(--bg-secondary, #1c1c28); }
.camp-member-list > div:last-child { border-bottom: none !important; }

/* ============= CAMPANII · Faza 4b (progresie personaj) ============= */
.camp-prog-ind { font-size: .9em; }
.camp-session-meta { display: inline-flex; align-items: center; gap: 8px; }
.camp-prog-btn { width: auto !important; flex: none; padding: 4px 10px !important; min-height: 0 !important; }
.camp-prog-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow-y: auto; }
.camp-prog-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border, #2a2a3a);
  border-radius: 10px; background: var(--bg-primary, rgba(255,255,255,0.03)); }
.camp-prog-who { flex: 1 1 auto; min-width: 0; }
.camp-prog-name { font-weight: 700; overflow-wrap: anywhere; }
.camp-prog-owner { margin-top: 4px; }
.camp-prog-fields { display: flex; gap: 8px; flex: none; }
.camp-prog-fields label { text-align: center; font-size: .78em; color: var(--text-secondary); }
.camp-prog-fields input { width: 66px; padding: 6px 4px !important; min-height: 0 !important; margin-top: 2px; }
@media (max-width: 768px) {
  .camp-prog-btn .camp-prog-btn-txt { display: none; }
  .camp-prog-row { flex-direction: column; align-items: stretch; }
  .camp-prog-fields { justify-content: space-between; }
  .camp-prog-fields input { width: 100%; }
  .camp-prog-fields label { flex: 1 1 0; }
}

/* ---- Faza 5: modal finalizare campanie ---- */
.camp-final-awards { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.camp-final-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  border: 1px solid var(--border, #2a2a3a); border-radius: 10px; background: var(--bg-elevated, #1c1c28); }
.camp-final-who { flex: 1 1 auto; min-width: 0; }
.camp-final-pts { flex: none; font-size: .82em; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px; }
.camp-final-pts input { padding: 6px 4px !important; min-height: 0 !important; }
.camp-final-note { padding: 12px; border: 1px dashed var(--border, #2a2a3a); border-radius: 10px;
  color: var(--text-secondary); background: var(--bg-elevated, #1c1c28); }

/* ---- Faza 5c: „Evoluția personajului" pe profilul public ---- */
.pp-evo { border-top: 1px solid var(--border, #2a2a3a); margin-top: 12px; padding-top: 12px;
  display: flex; flex-direction: column; gap: 8px; }
.pp-evo-h { font-size: .82em; color: var(--text-secondary); font-weight: 600; }
.pp-evo-card { border: 1px solid var(--border, #2a2a3a); border-radius: 10px; padding: 8px 12px;
  background: var(--bg-elevated, #1c1c28); }
.pp-evo-card.retired { opacity: .62; }
.pp-evo-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-evo-name { font-weight: 700; }
.pp-evo-class { font-size: .8em; color: var(--text-secondary); }
.pp-evo-tag { font-size: .7em; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.08); border-radius: 6px; padding: 1px 7px; color: var(--text-secondary); }
.pp-evo-camp { font-size: .84em; color: var(--text-secondary); margin-top: 3px; }
.pp-evo-done { color: var(--success, #27ae60); font-weight: 600; }
.pp-evo-stats { display: flex; gap: 14px; margin-top: 6px; font-size: .9em; }

/* ===== §2 Sesiuni live =====
   ⚠ Versiunea inițială folosea `--card-bg` / `--bg-soft` — variabile care NU EXISTĂ
   în temă. Fallback-ul era `#fff` => cutii ALBE pe fundal închis, contrast agresiv.
   Numele reale sunt `--bg-card`, `--bg-secondary`. Aici folosim exclusiv tokenii temei,
   ca bara să fie complementară cu restul, nu un corp străin. */
.live-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  box-shadow: 0 2px 10px var(--shadow);
}
.live-bar.empty {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  color: var(--text-secondary); font-size: .92em;
}
.live-bar-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
  color: var(--text-primary); font-weight: 700;
}
.live-bar-head i { color: var(--accent-primary); }

.live-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }

.live-card {
  display: flex; align-items: stretch; gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s ease, transform .12s ease;
}
.live-card:hover { border-color: var(--accent-primary); transform: translateY(-1px); }
.live-card.mine { border-color: var(--accent-primary); }
.live-card-main { flex: 1; padding: 10px 12px; cursor: pointer; min-width: 0; }
.live-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-primary); }
.live-card-meta { color: var(--text-secondary); display: block; margin-top: 6px; font-size: .8em; }

.live-tag {
  font-size: .68em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255, 107, 53, .14); color: var(--accent-primary);
  border: 1px solid rgba(255, 107, 53, .35);
}
.live-tag.playing { background: rgba(78, 205, 196, .14); color: var(--success); border-color: rgba(78, 205, 196, .35); }

/* Buton de încheiere — discret până la hover; distructiv, deci nu-l scoatem în față. */
.live-end {
  flex: 0 0 auto; width: 38px;
  background: transparent; border: none; border-left: 1px solid var(--border);
  color: var(--text-secondary); cursor: pointer; border-radius: 0 10px 10px 0;
  transition: background .15s ease, color .15s ease;
}
.live-end:hover { background: rgba(255, 107, 107, .12); color: var(--danger); }

/* Punct roșu pulsatoriu = „chiar acum, în direct" */
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--danger); display: inline-block; flex: 0 0 auto;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }

.live-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.live-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  background: var(--bg-secondary); border: 1px solid transparent;
  color: var(--text-primary);
}
.live-row.me { border-color: var(--accent-primary); }
.live-clock { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-secondary); }
.live-clock.running { color: var(--success); }
.live-clock.running .fa-circle { font-size: .5em; vertical-align: middle; animation: livePulse 1.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) { .live-dot, .live-clock.running .fa-circle { animation: none; } }

/* Iconița de pe butonul „Pornește sesiune live" — albă, ca textul.
   Implicit moștenea culoarea de accent și ieșea portocalie pe fundal portocaliu. */
.live-bar .btn-primary,
.live-bar .btn-primary i,
#btnGoLive,
#btnGoLive i { color: #fff; }

/* Cardul: zona de click duce în tab-ul Sesiune (host/moderator) sau deschide foaia. */
.live-card-main:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: 10px; }

/* Foaia live: nume + rol, scor și ceas */
.live-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.live-role { color: var(--text-secondary); font-size: .74em; }
.live-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.live-score {
  min-width: 34px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 8px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--accent-primary);
}

/* Acțiuni pe cardul de sesiune live: vizualizare (toți) + încheiere (host/admin) */
.live-actions { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.live-act {
  flex: 1; width: 40px; background: transparent; border: none;
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.live-act:hover { background: rgba(255, 107, 53, .12); color: var(--accent-primary); }
.live-act.danger:hover { background: rgba(255, 107, 107, .12); color: var(--danger); }
.live-actions .live-act + .live-act { border-top: 1px solid var(--border); }

/* Mobil: butonul „Pornește sesiune live" pe toată lățimea cutiei */
@media (max-width: 640px) {
  .live-bar .btn, #btnGoLive { width: 100%; justify-content: center; }
  .live-bar-head, .live-bar.empty { flex-direction: column; align-items: stretch; gap: 10px; }
  .sess-card .tab-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .sess-card .tab-head-actions { width: 100%; }
  .sess-card .tab-head-actions .btn { width: 100%; justify-content: center; }
}

/* Sesiune live în mod „doar vizualizare" */
.live-ro-note {
  background: rgba(255, 214, 0, .10);
  border: 1px solid rgba(255, 214, 0, .35);
  color: var(--warning);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
  font-weight: 600; font-size: .9em;
}
.is-readonly { opacity: .55; cursor: not-allowed !important; }

/* Elemente clicabile care nu-s butoane (ex. opțiunile din combobox-ul de jucători):
   `disabled` nu are efect pe ele, deci le tăiem interacțiunea explicit. */
.is-readonly-click { opacity: .55; pointer-events: none !important; cursor: not-allowed !important; }

/* ══ Calculator de scor (§ scoruri) — popup ancorat pe câmpurile de scor.
   Permite compunerea scorului din sub-scoruri (ex. 10+5+3) fără altă aplicație.
   RO+EN prin i18n; deschis prin delegare din orice câmp .score/#coopScore. ══ */
.score-calc-backdrop { position: fixed; inset: 0; z-index: 9600; background: transparent; }
.score-calc {
  position: fixed; z-index: 9601; width: 264px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--bg-card, #1e2330); border: 1px solid var(--accent-primary, #ff6b35);
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 12px;
  user-select: none;
}
.score-calc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -4px -4px 8px; padding: 6px 8px; border-radius: 9px;
  background: rgba(255,255,255,.04); cursor: move; touch-action: none;
}
.score-calc-title { font-size: .82em; font-weight: 700; color: var(--text-secondary, #9aa); display: flex; align-items: center; gap: 6px; }
.score-calc-x {
  appearance: none; border: none; background: transparent; color: var(--text-secondary, #9aa);
  cursor: pointer; font-size: 1em; padding: 4px 6px; border-radius: 6px; line-height: 1;
}
.score-calc-x:hover { background: rgba(255,255,255,.1); color: var(--text-primary, #eee); }
.score-calc-display {
  width: 100%; box-sizing: border-box; text-align: right; font-size: 1.35em;
  font-variant-numeric: tabular-nums; padding: 10px 12px; margin-bottom: 4px;
  background: rgba(0,0,0,.28); border: 1px solid var(--border, #333); border-radius: 8px;
  color: var(--text-primary, #eee); min-height: 44px; overflow-x: auto; white-space: nowrap;
}
.score-calc-sub { text-align: right; font-size: .78em; color: var(--text-secondary, #9aa); min-height: 16px; margin-bottom: 8px; padding-right: 4px; }
.score-calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.score-calc-key {
  appearance: none; border: 1px solid var(--border, #333); background: rgba(255,255,255,.05);
  color: var(--text-primary, #eee); font-size: 1.05em; padding: 12px 0; border-radius: 9px;
  cursor: pointer; transition: background .12s; touch-action: manipulation;
}
.score-calc-key:hover { background: rgba(255,255,255,.12); }
.score-calc-key:active { background: rgba(255,255,255,.2); }
.score-calc-key.op { color: var(--accent-primary, #ff6b35); font-weight: 700; }
.score-calc-key.wide { grid-column: span 2; }
.score-calc-key.ok { background: var(--accent-primary, #ff6b35); color: #fff; border-color: transparent; font-weight: 700; }
.score-calc-key.ok:hover { filter: brightness(1.08); }
.score-calc-key.danger { color: #e07a5f; }

/* Fără bare de scroll vizibile NICĂIERI în calculator: la tastare, bara orizontală a
   display-ului mărea înălțimea și declanșa bara verticală a panoului (arăta urât +
   înghesuia). Le ascundem peste tot; scroll-ul rămâne funcțional, doar invizibil. */
.score-calc, .score-calc-display {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge vechi */
}
.score-calc::-webkit-scrollbar,
.score-calc-display::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Buton „Gata” — ascuns pe desktop, proeminent pe mobil (modul tastatură). */
.score-calc-done {
  appearance: none; border: none; background: var(--accent-primary, #ff6b35); color: #fff;
  font-weight: 700; font-size: .92em; padding: 8px 18px; border-radius: 8px; cursor: pointer;
  display: none; line-height: 1;
}
.score-calc-done:active { filter: brightness(.9); }

/* ── MOBIL: calculatorul se comportă ca o TASTATURĂ NATIVĂ (ancorat jos, pe toată
   lățimea), COMPACT (nu domină ecranul), păstrând brandingul (accent + card). */
.score-calc.score-calc--sheet {
  left: 0; right: 0; bottom: 0; top: auto;
  width: 100%; max-width: 100%;
  max-height: 42vh;
  border-radius: 16px 16px 0 0;
  border: none; border-top: 2px solid var(--accent-primary, #ff6b35);
  box-shadow: 0 -10px 34px rgba(0,0,0,.55);
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  animation: scoreCalcSlideUp .18s ease-out;
}
@keyframes scoreCalcSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.score-calc--sheet .score-calc-head {
  cursor: default; touch-action: auto; background: transparent;
  margin: 0 0 5px; padding: 2px 2px;
}
.score-calc--sheet .score-calc-title { font-size: .88em; margin-right: auto; }
.score-calc--sheet .score-calc-done { display: inline-flex; align-items: center; }
/* „Gata” (commit) + X (anulare) în bară acoperă acțiunile -> scoatem rândul OK/Cancel
   din grid ca tastatura să fie mai compactă (mai puțin de jumătate de ecran). */
.score-calc--sheet .score-calc-key.wide { display: none; }
.score-calc--sheet .score-calc-display { font-size: 1.2em; min-height: 36px; padding: 7px 10px; margin-bottom: 2px; }
.score-calc--sheet .score-calc-sub { min-height: 12px; margin-bottom: 5px; }
.score-calc--sheet .score-calc-grid { gap: 5px; }
.score-calc--sheet .score-calc-key {
  padding: 10px 0; font-size: 1.05em; border-radius: 9px;
}

/* ============================================================================
   NAVIGARE NOUĂ (nav.js) — Etapa 1a
   ----------------------------------------------------------------------------
   RO: Bară persistentă jos pe mobil / sidebar stânga pe desktop — ACELAȘI
       element `#toNav`, două layout-uri (A8). Plus FAB de creare, rânduri de
       hub și bara de întoarcere.
   EN: One `#toNav` element, two layouts: bottom bar on mobile, left sidebar on
       desktop. Plus the create FAB, hub rows and the back bar.

   ── SCARA DE Z-INDEX (C3) — DECLARATĂ O SINGURĂ DATĂ ────────────────────────
      .app-header ........... 200   (existent)
      .to-nav ............... 300
      .to-fab ............... 350
      .to-fabmenu ........... 360
      .modal ................ 1000  (existent) → acoperă bara, deci o ascunde
      #chatCard.chat-fullscreen 9000 (existent)
      .header-popup ......... 9999  (existent)
      overlay GDPR .......... 2147483600 (existent)
   Bara și FAB-ul NU stau deasupra a nimic blocant. Regula „se ascund" e
   îndeplinită prin ordinea straturilor + regulile explicite de mai jos.
   ============================================================================ */

:root {
  --to-nav-h: 58px;          /* înălțimea barei pe mobil */
  --to-side-w: 196px;        /* lățimea sidebar-ului pe desktop */
}

/* ---------------------------------------------------------- bara / sidebar */
.to-nav {
  position: fixed;
  z-index: 300;
  display: flex;
  background: rgba(13, 16, 38, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--border, #3a4466);
}

/* MOBIL (implicit): bară jos, cu safe-area iOS (C2) */
.to-nav {
  left: 0; right: 0; bottom: 0;
  height: calc(var(--to-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--border, #3a4466);
  flex-direction: row;
  align-items: stretch;
}

.to-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 2px;
  background: transparent;
  border: none;
  color: var(--text-secondary, #a0a8b8);
  cursor: pointer;
  font-family: inherit;
  font-size: .68rem;
  line-height: 1.1;
  transition: color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.to-nav-item i { font-size: 1.08rem; }
.to-nav-lb {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.to-nav-item:hover { color: var(--text-primary, #e0e6ed); }
.to-nav-item.is-active { color: var(--accent-primary, #ff6b35); font-weight: 700; }
.to-nav-item:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -2px; border-radius: 8px; }

/* Conținutul paginii nu trebuie să rămână sub bară (C2) */
body.to-nav-on .container {
  padding-bottom: calc(var(--to-nav-h) + env(safe-area-inset-bottom, 0px) + 18px);
}

/* DESKTOP (> 768px): același element devine sidebar stânga */
@media (min-width: 769px) {
  .to-nav {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--to-side-w);
    height: auto;
    padding: 74px 10px 16px;
    border-top: none;
    border-right: 1px solid var(--border, #3a4466);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .to-nav-item {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .9rem;
  }
  .to-nav-item i { font-size: 1rem; width: 20px; text-align: center; }
  .to-nav-item:hover { background: var(--bg-card, #252b4a); }
  .to-nav-item.is-active { background: rgba(255, 107, 53, .12); }
  body.to-nav-side .container { padding-left: calc(var(--to-side-w) + 24px); }
  body.to-nav-on .container { padding-bottom: 24px; }
}

/* ------------------------------------------------------------------- FAB */
.to-fab {
  position: fixed;
  right: 18px;
  bottom: calc(var(--to-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 350;
  width: 56px; height: 56px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 21px;
  color: #fff;
  background: var(--gradient-primary, linear-gradient(135deg, #ff6b35, #f7931e));
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.to-fab:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
.to-fab.is-x { transform: rotate(90deg); }
.to-fab:focus-visible { outline: 3px solid var(--accent-gold, #ffd700); outline-offset: 3px; }

@media (min-width: 769px) {
  .to-fab { bottom: 24px; }
}

/* --------------------------------------------------------- meniul de creare */
.to-fabmenu {
  position: fixed;
  right: 18px;
  bottom: calc(var(--to-nav-h) + env(safe-area-inset-bottom, 0px) + 82px);
  z-index: 360;
  width: 250px;
  max-width: calc(100vw - 36px);
  padding: 8px;
  border: 1px solid var(--border, #3a4466);
  border-radius: 14px;
  background: var(--bg-card, #252b4a);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
}
@media (min-width: 769px) { .to-fabmenu { bottom: 90px; } }

.to-fabmenu-t {
  padding: 6px 10px 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-secondary, #a0a8b8);
}
.to-fabmenu-empty { padding: 8px 10px 12px; font-size: .85rem; color: var(--text-secondary, #a0a8b8); }
.to-fabmenu-i {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-primary, #e0e6ed);
  font-family: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
}
.to-fabmenu-i i { width: 20px; text-align: center; color: var(--accent-primary, #ff6b35); }
.to-fabmenu-i:hover { background: var(--bg-secondary, #1a1f3a); }
.to-fabmenu-i.is-primary {
  background: var(--gradient-primary, linear-gradient(135deg, #ff6b35, #f7931e));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 12px;
  margin-bottom: 4px;
}
.to-fabmenu-i.is-primary i { color: #fff; }

/* ---------------------------------------------------------- hub-uri (listă) */
.to-hub { max-width: 720px; margin: 0 auto; }
.to-grp { margin-bottom: 22px; }
.to-grp-sep {
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border, #3a4466);
}
.to-grp-t {
  padding: 0 4px 8px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary, #a0a8b8);
}
.to-grp-rows {
  border: 1px solid var(--border, #3a4466);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card, #252b4a);
}

.to-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  /* Înălțime STABILĂ indiferent de lungimea subtitlului (A9.3 pct. 5) */
  min-height: 66px;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--border, #3a4466);
  background: transparent;
  color: var(--text-primary, #e0e6ed);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.to-row:last-child { border-bottom: none; }
.to-row:hover { background: var(--bg-secondary, #1a1f3a); }
.to-row:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: -2px; }

.to-row-ic {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--bg-secondary, #1a1f3a);
  color: var(--accent-primary, #ff6b35);
  font-size: .98rem;
}
.to-row-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.to-row-t {
  font-size: .96rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Subtitlu: trunchiere pe UN rând, fără wrap care mută rândurile (A9.3 pct. 5) */
.to-row-s {
  font-size: .79rem;
  color: var(--text-secondary, #a0a8b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.to-row-ch { flex: 0 0 auto; color: var(--text-secondary, #a0a8b8); font-size: .8rem; opacity: .7; }

.to-row.is-danger .to-row-ic { color: var(--danger, #ff6b6b); }
.to-row.is-danger .to-row-t { color: var(--danger, #ff6b6b); }

.to-hub-empty {
  padding: 30px 16px;
  text-align: center;
  color: var(--text-secondary, #a0a8b8);
  font-size: .9rem;
}

/* --------------------------------------------------- bara de întoarcere (A5) */
.to-backbar {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 8px 14px 8px 11px;
  border: 1px solid var(--border, #3a4466);
  border-radius: 20px;
  background: var(--bg-card, #252b4a);
  color: var(--text-secondary, #a0a8b8);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.to-backbar:hover { color: var(--accent-primary, #ff6b35); border-color: var(--accent-primary, #ff6b35); }

/* ------------------------------------------ ascundere sub straturi blocante */
/* Chatul full-screen se portează în <body> (§13.1) și ridică `chat-fs-lock`. */
body.chat-fs-lock .to-nav,
body.chat-fs-lock .to-fab,
body.chat-fs-lock .to-fabmenu { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .to-fab, .to-nav-item, .to-row { transition: none !important; }
}

/* ============================================================================
   HEADER — ETAPA 1b (A3): exact 4 elemente
       [TO] · [chip club ▾] · [🔍] · [🔔]
   ----------------------------------------------------------------------------
   RO: Cele trei butoane retrase NU sunt sterse din DOM — `updateUserDisplay()`
       scrie in ele (nume, avatar, pastila de rol) si le face `classList.remove
       ('hidden')` la fiecare randare. Le ascundem din CSS, care bate clasa
       `.hidden` adaugata/scoasa din JS. Zero risc de exceptii, reversibil
       instantaneu prin comentarea unei singure reguli.
       Unde au plecat: avatar -> bara de jos (Profil); rotita -> Profil ▸ Setari;
       „Membri online" -> Profil ▸ Membri online.
   EN: The three retired header buttons stay in the DOM (JS still writes to them);
       they are hidden from CSS, which wins over the JS-toggled `.hidden` class.
   ============================================================================ */

#onlineBtn,
#currentUserDisplay,
#settingsBtn { display: none !important; }

/* Cautarea a fost ACTIVATA la Etapa 6 — regula care o ascundea a fost stearsa.
   Butonul era rezervat in header inca de la Etapa 1b, ca layoutul sa nu se
   re-aseze acum. */

/* Wordmark: „TurnOrder" pe desktop, „TO" pe mobil (A3). */
.app-logo-short { display: none; }
@media (max-width: 768px) {
  .app-logo-text { display: none; }
  .app-logo-short { display: inline; }
  /* Cu doar 4 elemente in header e loc pentru numele clubului si pe mobil:
     anulam regula „doar iconita" DOAR pentru chip-ul de club. */
  #clubSwitcher.hbtn-named { width: auto; max-width: 46vw; padding: 0 10px; justify-content: flex-start; }
  #clubSwitcher.hbtn-named .hbtn-label,
  #clubSwitcher.hbtn-named .hbtn-caret { display: inline; }
}

/* Butonul de pliere a sidebar-ului (A4) a fost mutat la Etapa 2b DIN header
   ÎN sidebar. Vechile reguli pe `#toSideToggle` (selector de ID) au fost șterse
   la Etapa 2d: aveau specificitate mai mare decât regulile noi pe clasă și
   continuau să impună 36px + `margin-right`, ceea ce descentra iconița față de
   celelalte. Stilurile active sunt acum pe `.to-side-toggle`, mai jos.
   EN: the old ID-based rules were removed; ID specificity was overriding the new
   class rules and left the icon off-centre. */

/* ------------------------------------------- sidebar pliat (doar iconite) */
@media (min-width: 769px) {
  body.to-side-collapsed .to-nav { width: 64px; padding-left: 8px; padding-right: 8px; }
  body.to-side-collapsed .to-nav-item { justify-content: center; padding: 12px 0; gap: 0; }
  body.to-side-collapsed .to-nav-lb { display: none; }
  body.to-side-collapsed.to-nav-side .container { padding-left: 88px; }
}

/* ============================================================================
   ETAPA 2 + CORECȚII DE ÎNCADRARE
   ============================================================================ */

/* --- CORECȚIE: footerul legal era acoperit de bară pe mobil ----------------
   `<footer class="legal-footer">` e frate cu `#mainContainer`, NU copil, deci
   `padding-bottom` pe `.container` nu îl atingea. Mutăm rezerva de spațiu pe
   `body`, ca să urce TOT ce e în pagină, inclusiv footerul.
   EN: the legal footer is a sibling of the container, so the bottom padding
   moves to `body` to lift everything above the bar. */
body.to-nav-on {
  padding-bottom: calc(var(--to-nav-h) + env(safe-area-inset-bottom, 0px) + 12px);
}
body.to-nav-on .container { padding-bottom: 20px; }

@media (min-width: 769px) {
  body.to-nav-on { padding-bottom: 0; }
  body.to-nav-on .container { padding-bottom: 24px; }
  /* Sidebar-ul e fix pe toată înălțimea; footerul trebuie împins la dreapta. */
  body.to-nav-side .legal-footer { padding-left: calc(var(--to-side-w) + 24px); }
  body.to-side-collapsed.to-nav-side .legal-footer { padding-left: 88px; }
}

/* --- CORECȚIE: butonul de pliere trăiește ACUM în sidebar ------------------
   Regulile vechi pentru `#toSideToggle` din header sunt anulate mai jos. */

.to-side-toggle {
  display: none;                               /* apare doar pe desktop */
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-bottom: 10px;
  border: 1px solid var(--border, #3a4466);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary, #a0a8b8);
  cursor: pointer;
  font-size: .95rem;
}
.to-side-toggle:hover { border-color: var(--accent-primary, #ff6b35); color: var(--accent-primary, #ff6b35); }
.to-side-toggle:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 2px; }

@media (min-width: 769px) {
  .to-nav .to-side-toggle { display: inline-flex; }
  /* Sidebar-ul începe mai sus acum: nu mai trebuie să ocolim headerul. */
  .to-nav { padding-top: 16px; }
}

/* --- A9.1 (3): rând cu acțiuni în așteptare -------------------------------- */
.to-row-badge {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 11px;
  background: var(--accent-primary, #ff6b35);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* Evidențierea e discretă și NU se bazează doar pe culoare (accesibilitate):
   bară laterală + fundal + badge numeric care spune explicit câte sunt. */
.to-row.is-flagged { background: rgba(255, 107, 53, .07); box-shadow: inset 3px 0 0 var(--accent-primary, #ff6b35); }
.to-row.is-flagged .to-row-t { color: var(--accent-primary, #ff6b35); }
.to-row.is-flagged .to-row-ic { background: rgba(255, 107, 53, .16); }

/* --- Popup-uri de header: plasă de siguranță peste corecția din JS -------- */
.header-popup { box-sizing: border-box; }

/* ============================================================================
   CORECȚII ETAPA 2b
   ============================================================================ */

/* --- A) Sidebar pliat: iconița butonului aliniată cu celelalte --------------
   Butonul avea altă geometrie decât rândurile (fără cutie de 20px pentru
   iconiță), deci glifa cădea cu câțiva pixeli în stânga. Îi dăm exact aceeași
   cutie ca destinațiilor, în ambele stări. */
.to-side-toggle i { width: 20px; text-align: center; flex: 0 0 auto; }

@media (min-width: 769px) {
  .to-nav .to-side-toggle { width: 100%; padding: 0; }
  body.to-side-collapsed .to-side-toggle { justify-content: center; }
  body.to-side-collapsed .to-nav-item { justify-content: center; }
  /* Rândurile au 14px padding orizontal când sunt desfășurate; butonul
     trebuie centrat, nu aliniat la text. */
  body:not(.to-side-collapsed) .to-nav .to-side-toggle { justify-content: center; }
}

/* --- B) Footerul legal: își schimbă locul, nu conținutul ------------------- */
/* În sidebar (desktop, autentificat) */
.legal-footer.in-nav {
  margin-top: auto;
  padding: 14px 6px 4px !important;
  font-size: .66em !important;
  line-height: 1.7;
  opacity: .45;
  border-top: 1px solid var(--border, #3a4466);
  text-align: center;
}
.legal-footer.in-nav a { display: inline-block; }
/* Când sidebar-ul e pliat nu mai încape text: îl ascundem, rămâne în Profil. */
body.to-side-collapsed .legal-footer.in-nav { display: none; }

/* În hub-ul Profil (mobil, autentificat) */
.legal-footer.in-hub {
  margin: 26px auto 0;
  max-width: 720px;
  padding: 16px 8px 4px !important;
  border-top: 1px solid var(--border, #3a4466);
  opacity: .5;
}

/* Footerul nu mai are nevoie de decalajul de sidebar când e ÎN sidebar. */
@media (min-width: 769px) {
  body.to-nav-side .legal-footer.in-nav { padding-left: 6px !important; }
}

/* --- Rândul „Cereri de aderare" ------------------------------------------- */
/* Apare doar când există cereri, deci e mereu în stare „de rezolvat". */
.to-row[data-nav-row="joinReq"],
.to-row[data-nav-row="joinReq2"] { background: rgba(255, 107, 53, .07); }

/* ============================================================================
   CORECȚII ETAPA 2c
   ============================================================================ */

/* --- 1) Footerul NU are voie să intre în bara orizontală de pe mobil -------
   Plasă de siguranță peste logica din JS: chiar dacă o secvență de
   redimensionare l-ar lăsa acolo o clipă, nu poate înghesui butoanele. */
@media (max-width: 768px) {
  .to-nav > .legal-footer { display: none !important; }
}

/* --- 2) Footer: separatorii sunt generați din CSS (nodurile text s-au scos) */
.legal-footer > a:not(:last-of-type)::after {
  content: " · ";
  opacity: .5;
}

/* În sidebar: fiecare link pe rândul lui, aliniat la stânga, fără separatori,
   dimensionat cât să încapă și cel mai lung text din RO ("Politică de
   Confidențialitate" = 29 caractere) pe un singur rând. */
.legal-footer.in-nav {
  margin-top: auto;
  padding: 14px 4px 4px !important;
  font-size: 10px !important;
  line-height: 1.6;
  opacity: .5;
  text-align: left !important;
  border-top: 1px solid var(--border, #3a4466);
}
.legal-footer.in-nav > a {
  display: block;
  white-space: nowrap;
  padding: 3px 2px;
}
.legal-footer.in-nav > a::after { content: none !important; }
.legal-footer.in-nav > div {
  margin-top: 8px !important;
  white-space: normal;          /* linia de copyright poate curge pe 2 rânduri */
  opacity: .8;
}
body.to-side-collapsed .legal-footer.in-nav { display: none; }

/* În hub-ul Profil (mobil): footer clasic al paginii, centrat, sub ultimul grup. */
.legal-footer.in-hub {
  display: block;
  margin: 26px auto 4px;
  max-width: 720px;
  padding: 18px 10px 6px !important;
  border-top: 1px solid var(--border, #3a4466);
  opacity: .55;
  text-align: center;
}

/* --- 3) FAB-ul se ascunde cât timp e deschis un popup de header ------------
   `.app-header` (sticky + z-index:200) e context de stivuire, deci z-index-ul
   9999 al popup-urilor NU depășește FAB-ul din body. Îl ascundem, conform C3. */
body.to-popup-open .to-fab,
body.to-popup-open .to-fabmenu { display: none !important; }

/* --- 4) Indicatoare de notificare unitare ---------------------------------
   `.hbtn-badge` avea `font-size: .6em`, iar `em` se raportează la părinte:
   `.hbtn-icon` are `font-size: 1.02em`, `.hbtn-named` are 1em => acelaşi badge
   ieșea de două mărimi diferite. Trecem pe unități absolute, identice peste tot,
   și îi dăm formă de cerc pentru o singură cifră. */
.hbtn-badge {
  font-size: 10px !important;
  font-weight: 700;
  line-height: 16px !important;
  min-width: 16px;
  height: 16px;
  padding: 0 4px !important;
  border-radius: 9px;
  text-align: center;
  box-sizing: content-box;
  font-family: inherit;
}

/* Badge-ul din rândurile de hub folosește aceeași scară. */
.to-row-badge {
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 9px;
}

/* ============================================================================
   CORECȚII ETAPA 2d
   ============================================================================ */

/* --- 1) Butonul de pliere: geometrie IDENTICĂ cu destinațiile ---------------
   Regulile de ID din Etapa 1b au fost șterse mai sus, deci acestea se aplică
   acum efectiv. Butonul are exact aceeași cutie ca un rând de navigare. */
@media (min-width: 769px) {
  .to-nav .to-side-toggle {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    margin: 0 0 10px;
    padding: 0;
    justify-content: center;
    align-items: center;
  }
  .to-nav .to-side-toggle i { width: 20px; text-align: center; }
}

/* --- 2) Footerul din sidebar: mai mic, fără subliniere ----------------------
   Sublinierea vine din `style="text-decoration:underline"` inline pe fiecare
   link, deci are nevoie de `!important` ca s-o putem anula. */
.legal-footer.in-nav {
  font-size: 9px !important;
  line-height: 1.75;
  letter-spacing: .01em;
}
.legal-footer.in-nav > a {
  text-decoration: none !important;
  padding: 2px 2px;
}
.legal-footer.in-nav > a:hover {
  color: var(--accent-primary, #ff6b35);
  text-decoration: none !important;
}
.legal-footer.in-nav > div { margin-top: 10px !important; }

/* --- 3) Panourile de header, mutate în <body> de nav.js ---------------------
   Poziționarea o face integral `placeHeaderPopup()`; aici doar ne asigurăm că
   nimic din stilurile inline vechi nu le mai trage în altă parte. */
.header-popup {
  box-sizing: border-box;
  z-index: 9999;
}

/* --- Footerul legal din aplicație: fără subliniere, în ambele așezări --------
   Sublinierea vine din `style="text-decoration:underline"` inline pe fiecare
   link, deci are nevoie de `!important`. Rămâne subliniată DOAR pe ecranul de
   login/înregistrare, unde footerul e singurul element de acolo și sublinierea
   ajută la identificarea linkurilor.
   EN: strip the inline underline in both in-app placements; keep it on the
   signed-out page. */
.legal-footer.in-hub > a,
.legal-footer.in-nav > a { text-decoration: none !important; }
.legal-footer.in-hub > a:hover,
.legal-footer.in-nav > a:hover { color: var(--accent-primary, #ff6b35); text-decoration: none !important; }

/* ============================================================================
   ETAPA 3 — A9.2: rolul sub numele clubului, în chip-ul de header
   ----------------------------------------------------------------------------
   Chip-ul păstrează ACEEAȘI înălțime (`--hbtn-h`) ca butoanele din dreapta —
   cele două linii încap înăuntru, nu cresc butonul. Rolul e TEXT complet, nu
   abreviere și nu doar culoare (accesibilitate).
   ============================================================================ */

.to-chip-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  line-height: 1.1;
  overflow: hidden;
}
#clubSwitcher.has-role .hbtn-label { font-size: .86em; line-height: 1.15; }
.to-chip-role {
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent-gold, #ffd700);
  opacity: .92;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.to-chip-role.hidden { display: none; }

@media (max-width: 768px) {
  /* Pe mobil chip-ul are deja lățime liberă (Etapa 1b); rolul rămâne vizibil,
     doar puțin mai mic, ca să încapă și numele clubului. */
  #clubSwitcher.has-role .hbtn-label { font-size: .8em; }
  .to-chip-role { font-size: .58em; }
}

/* ============================================================================
   ETAPA 4b
   ============================================================================ */

/* --- Culorile rolurilor în chip-ul de header --------------------------------
   Sursa de adevăr pentru culorile de rol este `roleBadgeHtml()`
   (supabase-integration.js) — paleta din Admin ▸ Membri. Începând cu finding (d),
   și `.role-pill` folosește aceleași valori, deci întreaga aplicație e unitară:
       principal_admin #d4a017 (auriu)  ·  secondary_admin #5b9cff (albastru)
       moderator       #2ecc71 (verde)  ·  member          gri
   Se schimbă DOAR culoarea textului. */
.to-chip-role.to-role-principal { color: #d4a017; }
.to-chip-role.to-role-secondary { color: #5b9cff; }
.to-chip-role.to-role-moderator { color: #2ecc71; }
.to-chip-role.to-role-member    { color: var(--text-secondary, #a0a8b8); }

/* --- Butonul „Fă sesiunea live" ---------------------------------------------
   Trebuie să NU semene cu „Sesiune Standard" (portocaliu plin), care stă imediat
   dedesubt — de aici confuzia. Îl facem cu contur, pe teal, culoarea pe care
   aplicația o folosește DEJA pentru „live" (`.live-dot`, `.live-tag`,
   `.live-clock`, iconița de satelit). Deci nu introducem o culoare nouă:
   reutilizăm limbajul vizual existent pentru sesiuni live.
   EN: outlined teal — the colour this app already uses for live sessions —
   so it reads as a different kind of action than the solid orange buttons. */
.btn.btn-golive {
  background: transparent;
  color: var(--success, #4ecdc4);
  border: 1px solid var(--success, #4ecdc4);
  box-shadow: none;
}
.btn.btn-golive:hover {
  background: rgba(78, 205, 196, .12);
  color: var(--success, #4ecdc4);
  border-color: var(--success, #4ecdc4);
}
.btn.btn-golive i { color: inherit; }

/* ============================================================================
   ETAPA 6 — PANOUL DE CĂUTARE
   ----------------------------------------------------------------------------
   Stă în <body> și e poziționat de `placeHeaderPopup()`, deci apare EXACT în
   același loc ca celelalte panouri de header: sub header, în dreapta pe desktop,
   centrat pe mobil.
   ============================================================================ */

.to-q {
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border, #3a4466);
  border-radius: 14px;
  background: var(--bg-card, #252b4a);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}

.to-q-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border, #3a4466);
}
.to-q-head > i { color: var(--accent-primary, #ff6b35); font-size: .95rem; }

.to-q-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary, #e0e6ed);
  font-family: inherit;
  font-size: .95rem;
  outline: none;
}
.to-q-input::placeholder { color: var(--text-secondary, #a0a8b8); opacity: .8; }

.to-q-x {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #a0a8b8);
  cursor: pointer;
}
.to-q-x:hover { color: var(--accent-primary, #ff6b35); }

.to-q-body { max-height: 58vh; overflow-y: auto; padding: 6px; }
.to-q-hint { padding: 22px 14px; text-align: center; color: var(--text-secondary, #a0a8b8); font-size: .88rem; }

.to-q-grp { margin-bottom: 6px; }
.to-q-grp-t {
  padding: 8px 10px 5px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-secondary, #a0a8b8);
}
.to-q-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-primary, #e0e6ed);
  font-family: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}
.to-q-item > i { flex: 0 0 auto; width: 18px; text-align: center; color: var(--accent-primary, #ff6b35); font-size: .88rem; }
.to-q-lb { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.to-q-meta {
  flex: 0 0 auto;
  max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .76rem;
  color: var(--text-secondary, #a0a8b8);
}
.to-q-item:hover, .to-q-item.is-cur { background: var(--bg-secondary, #1a1f3a); }
.to-q-item.is-cur { box-shadow: inset 2px 0 0 var(--accent-primary, #ff6b35); }
.to-q-more { padding: 4px 10px 8px; font-size: .76rem; color: var(--text-secondary, #a0a8b8); opacity: .8; }

@media (max-width: 768px) { .to-q-body { max-height: 62vh; } }

/* ============================================================================
   CORECȚII + CARDUL DE PROFIL (iulie 2026)
   ============================================================================ */

/* --- Modalele trebuie să treacă PESTE chatul full-screen ---------------------
   `#chatCard.chat-fullscreen` are `z-index: 9000`, iar `.modal` are 1000. Deci
   dacă apăsai pe numele cuiva din chat, profilul se deschidea ÎN SPATELE
   ferestrei de chat și trebuia să ieși din full-screen ca să-l vezi.
   Ridicăm modalele DOAR cât timp chatul e full-screen (`body.chat-fs-lock`),
   ca să nu atingem stivuirea normală. Rămân sub `.msg-menu` (9500), care e un
   meniu tranzitoriu peste chat.
   EN: modals must sit above the full-screen chat; scoped to `.chat-fs-lock`
   so the normal stacking order is untouched. */
body.chat-fs-lock .modal.active { z-index: 9100; }

/* --- Cardul „eu" din capul hub-ului Profil ---------------------------------- */
.to-me {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 0 0 22px;
  padding: 4px 2px 18px;
  border: none;
  border-bottom: 1px solid var(--border, #3a4466);
  background: transparent;
  color: var(--text-primary, #e0e6ed);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.to-me:hover .to-me-name { color: var(--accent-primary, #ff6b35); }
.to-me:focus-visible { outline: 2px solid var(--accent-primary, #ff6b35); outline-offset: 3px; border-radius: 10px; }

.to-me-av {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-card, #252b4a);
  border: 2px solid var(--accent-primary, #ff6b35);
}
.to-me-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.to-me-ini { font-size: 1.15rem; font-weight: 700; color: var(--accent-gold, #ffd700); letter-spacing: .02em; }

.to-me-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.to-me-name {
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s ease;
}
.to-me-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: .86rem;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.to-me-tag { color: var(--text-secondary, #a0a8b8); }
.to-me-dot { color: var(--text-secondary, #a0a8b8); opacity: .5; }
/* Vechimea contului: informație discretă, nu insignă. Clasa veche `.to-me-plan`
   (aurie, bold) a fost eliminată odată cu eticheta de plan din meCardHtml. */
.to-me-since { color: var(--text-secondary, #a0a8b8); }

@media (max-width: 768px) {
  .to-me-av { width: 50px; height: 50px; }
  .to-me-name { font-size: 1.15rem; }
  /* Linia secundară (@usertag · vechime) e informație de context, nu titlu.
     Pe telefon, la .86rem cu font monospace, ocupa aproape toată lățimea
     panoului și concura vizual cu numele; gap-ul redus previne truncarea
     cu „…" la usertag-uri lungi. */
  .to-me-sub { font-size: .76rem; gap: 6px; }
}

/* --- Poza clubului în chip-ul de header (înlocuiește iconița generică) ------ */
img.hbtn-lead.to-club-pic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
}

/* ===== T7: prezență în context (punct verde + contor Players) ===== */
.pl-avatar {
  position: relative;
  display: inline-flex;
  flex: none;            /* în .player-header e element flex: nu se comprimă */
  overflow: visible;     /* bulina depășește intenționat marginea avatarului */
  line-height: 0;        /* fără spațiu fantomă sub imagine */
}
/* Bulina „online”.
   ⚠ Poziționare: avatarul e CERC, deci colțul chenarului (bottom/right negative)
   cade în zona goală din afara cercului -> bulina părea detașată de poză.
   O aducem pe marginea cercului, la ~45°, suprapusă parțial peste fotografie.
   ⚠ Inelul folosește --bg-secondary (fundalul REAL al cardului), nu --bg-card:
   altfel apare ca o pată închisă în loc de contur curat. */
.presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(20%, 20%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--success, #27ae60);
  border: 2.5px solid var(--bg-secondary, #1e1e2e);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35),
              0 0 7px rgba(39, 174, 96, .85);
  display: none;
  z-index: 3;
  pointer-events: none;  /* nu blochează click-ul pe avatar (lightbox) */
}
.presence-dot.on { display: block; }
.players-online-wrap { position: relative; display: inline-block; vertical-align: top; }
/* Aceeași pastilă ca butonul back („← Club") de lângă el. */
.players-online-btn {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 14px 10px;
  padding: 8px 14px;
  border: 1px solid var(--border, #3a4466);
  border-radius: 20px;
  background: var(--bg-card, #252b4a);
  color: var(--text-secondary, #a0a8b8);
  font-family: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.players-online-btn:hover { color: var(--accent-primary, #ff6b35); border-color: var(--accent-primary, #ff6b35); }
/* Când bara back lipsește, butonul online nu are nevoie de margine la stânga. */
.players-online-wrap:first-child .players-online-btn { margin-left: 0; }
.players-online-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 500;
  min-width: 240px; max-width: min(340px, 92vw);
  background: var(--bg-card, #1e1e2e);
  border: 1px solid var(--border, #333);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  padding: 6px; max-height: 46vh; overflow: auto;
}
.pol-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: .9em; }
.pol-link { cursor: pointer; }
.pol-link:hover { background: var(--bg-secondary, #252b4a); }
.pol-avatar { position: relative; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; flex: 0 0 30px; }
.pol-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pol-you { font-size: .78em; opacity: .65; }

/* ===== T10: casete ANPC (SAL) + SOL în footer ===== */
.anpc-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-top: 10px;
}
/* Bannerul e cerut legal, dar discret: mic, estompat, plin doar la hover. */
.anpc-banner { display: inline-block; line-height: 0; border-radius: 4px; overflow: hidden; }
.anpc-banner img {
  display: block; width: 120px; max-width: 60vw; height: auto;
  opacity: .4; filter: grayscale(35%);
  transition: opacity .15s ease, filter .15s ease;
}
.anpc-banner:hover img { opacity: 1; filter: none; }
/* În sidebar (desktop) footerul e aliniat la stânga — bannerul ANPC îl urmează.
   În hub-ul de Profil (mobil) footerul e centrat, deci bannerul rămâne centrat. */
.legal-footer.in-nav .anpc-row { justify-content: flex-start; }

/* ===== Poll: rânduri de opțiuni (golden standard: input per opțiune) ===== */
.poll-opt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.poll-opt-row .poll-opt-input { flex: 1; min-width: 0; }
.poll-opt-x,
.field-x {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border, #3a4466); background: transparent;
  color: var(--text-secondary, #888); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s ease, border-color .15s ease;
}
.poll-opt-x:hover,
.field-x:hover { color: var(--danger, #e74c3c); border-color: var(--danger, #e74c3c); }

/* Coloana de text din listele Discover: numele (posibil șir lung, fără spații)
   se trunchiază cu „…" pe UN rând (golden standard de listă) — nu mai poate
   deborda pe sub buton; numele complet rămâne în title (tooltip) și în pagina
   publică a clubului. Descrierea curge normal pe rândurile ei. */
.disc-club-main { min-width: 0; flex: 1; overflow: hidden; }
.disc-club-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Butoanele de acțiune din listele Discover: compacte, fără min-width-ul global
   de 100px al .btn — nu mai mușcă din coloana de text pe mobil. */
.disc-act-btn {
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  padding: 8px 11px;
  font-size: .76em;
  white-space: nowrap;
}

/* ============================================================================
   DENUMIRI LUNGI DE CLUB (aug. 2026)
   ⛔ FĂRĂ text derulant („running head"): se mișcă singur (problemă pentru
      persoane cu tulburări de atenție sau vestibulare), nu poți citi în ritmul
      tău și consumă resurse la nesfârșit. Standardul e tăiere cu „…" plus acces
      la textul complet.
   ⛔ FĂRĂ măsurători de lățime în JavaScript — totul se decide aici, în CSS.
   EN: no marquee (accessibility + battery), no JS width measuring.
   ============================================================================ */

/* --- 1. Bara de sus: numele era RETEZAT BRUTAL, fără „…" ------------------
   CAUZA REALĂ: `#clubSwitcher` e `inline-flex`, iar `.hbtn-label` e element flex
   cu `min-width: auto` IMPLICIT. Un element flex nu se micșorează niciodată sub
   lățimea conținutului său, deci `text-overflow: ellipsis` (deja prezent pe
   `.hbtn-label`, linia ~198) NU se poate declanșa: textul depășește și e retezat
   de părinte, fără puncte de suspensie. `min-width: 0` e cheia; `max-width: 100%`
   îl păstrează în limitele containerului și când eticheta ajunge în
   `.to-chip-stack` (construit dinamic de nav.js când chip-ul afișează și rolul).
   Fratele `.to-chip-role` avea deja `max-width: 100%` — de aceea DOAR rolul
   afișa corect „…", iar numele clubului nu.
   ⚠ Scopat pe `#clubSwitcher`: `.hbtn-label` e folosită și de `#userName`, pe
     care NU vrem să o schimbăm fără dovezi.
   ⚠ Numele COMPLET rămâne accesibil la deschiderea listei de cluburi — de aceea
     nu forțăm două rânduri aici: antetul are înălțime fixă (`--hbtn-h`).
   EN: the label is a flex item with implicit `min-width: auto`, so it never
       shrinks and the ellipsis can never trigger — the parent just clips it. */
#clubSwitcher .hbtn-label { min-width: 0; max-width: 100%; }

/* Aceeași cauză, celălalt buton din antet: `#currentUserDisplay` e `.hbtn`, adică
   `inline-flex` cu `max-width: 30vw`, iar `#userName` e `.hbtn-label`, element flex
   cu `min-width: auto` implicit — deci nu se micșorează niciodată sub lățimea
   textului, iar `text-overflow: ellipsis` (linia ~198) nu se poate declanșa.
   ⚠ REGULĂ INACTIVĂ ASTĂZI, păstrată intenționat. `#currentUserDisplay` e RETRAS
     din antet de la reorganizarea navigației (`display: none !important`, ~4112):
     avatarul a plecat în bara de jos, la Profil. Deci `#userName` nu se randează
     nicăieri și nu poate fi retezat — punctul „retezarea lui #userName" din lista
     de rămase deschise era ÎNVECHIT, scris înainte de acea retragere.
     Linia rămâne fiindcă e corectă și devine utilă dacă butonul revine vreodată;
     nu are niciun efect cât timp părintele e ascuns.
   ⚠ Și pe mobil eticheta e ascunsă separat, sub pragul de la ~341.
   EN: same flex `min-width: auto` trap as the club switcher, on the user button. */
#currentUserDisplay .hbtn-label { min-width: 0; max-width: 100%; }

/* --- 2. Cardurile din „My clubs": numele pe două rânduri pe mobil ---------
   Pe desktop rămâne un rând cu „…", ca acum. Pe mobil, majoritatea denumirilor
   lungi încap COMPLET pe două rânduri — deci nu mai e nevoie de niciun tooltip,
   care oricum nu funcționează la atingere.
   `-webkit-line-clamp` e suportat de toate browserele actuale; dacă ar lipsi,
   rezultatul e text pe două rânduri fără „…", adică tot lizibil. */
.club-hub-name {
  font-weight: 700;
  font-size: 1.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Linia „5 membri · ultima sesiune acum 3 zile". Stilurile erau INLINE în
   `renderClubHubList` (app-core.js); mutate aici fiindcă un `style=` inline bate
   orice regulă de clasă, deci varianta pe două rânduri de mai jos n-ar fi avut
   nicio șansă să se aplice. Desktopul rămâne exact ca înainte: un rând cu „…".
   EN: moved from inline styles, which would have overridden the mobile rule. */
.club-hub-meta {
  font-size: 0.74em;
  opacity: 0.65;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .club-hub-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.25;
  }

  /* --- 3. „5 membri · ultima sesiune acum 19 zile" ------------------------
     Prima încercare a fost ascunderea etichetei „ultima sesiune" pe mobil. NU a
     fost de ajuns: câștiga ~14 caractere, dar lipseau ~16 — textul se tăia tot,
     la două caractere de final („acum 19 zi…"). Iar orice scurtare de acest fel
     e FRAGILĂ: „acum 11 luni" sau „19 days ago" ar depăși din nou, la alte valori
     sau în altă limbă. O soluție care merge doar pentru unele texte nu e soluție.
     Aici se aplică același tratament ca la numele clubului: două rânduri în loc
     de unul tăiat. Funcționează în ORICE limbă și pentru ORICE valoare, fără să
     pierdem informație și fără chei i18n noi. Ruptura cade natural la
     separatorul „·", deci arată intenționat.
     ⚠ Cardul crește cu un rând DOAR când e nevoie: la „acum 3 zile" rămâne pe
       unul singur.
     EN: hiding the label saved ~14 chars but ~16 were needed, and any such
         shortening breaks again in other languages or value ranges; wrapping to
         two lines works for every language and value with no information lost. */
  .club-hub-meta {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.3;
  }
}

/* ============================================================================
   LINKURI ÎN TEXT SCRIS DE UTILIZATORI (aug. 2026)
   Generate de `linkifyEscaped()` (app-core.js) în chat, anunțuri, mesaje private
   și descrierea evenimentului.

   ⚠ DE CE `color: inherit` ȘI NU O CULOARE FIXĂ: aceleași linkuri apar pe
     fundaluri foarte diferite — bula portocalie a mesajelor proprii
     (`--gradient-primary`, text alb) și cardurile închise (text deschis).
     Albastrul implicit al browserului (#0000EE) pe portocaliu e ilizibil, iar
     mov-ul de „vizitat" e și mai rău. Orice culoare fixă ar fi bună pe un fundal
     și proastă pe celălalt. `inherit` moștenește culoarea textului din jur, care
     are deja contrast corect pe fundalul lui, prin construcție.
   ⚠ Linkul rămâne distingibil prin SUBLINIERE, nu prin culoare — cerință de
     accesibilitate (WCAG 1.4.1: culoarea nu poate fi singurul indiciu vizual).
     Din același motiv `:visited` primește explicit aceeași culoare: altfel
     browserul l-ar face mov.
   ⚠ `overflow-wrap: anywhere`: adresele lungi (ex. căutări Google cu zeci de
     parametri) nu au spații, deci fără asta ar ieși din bulă.
   EN: links appear on both orange and dark backgrounds, so any fixed colour
       fails on one of them; `inherit` always matches the surrounding text, which
       is already contrast-correct. Underline (not colour) marks them as links.
   ============================================================================ */
.to-link,
.to-link:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.to-link:hover,
.to-link:focus-visible {
  text-decoration-thickness: 2px;
  opacity: .85;
}

/* Pozele atașate unui mesaj de chat (§8.9). Grilă simplă, maximum 4 poze per
   mesaj (limită impusă de baza de date, nu doar de interfață).
   `gap` mic ca să nu împingă bula peste lățimea disponibilă pe telefon. */
.chat-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* Previzualizarea pozelor alese pentru chat (§8.9 D2). Ascunsă cât timp nu e
   nimic ales — altfel ar lăsa un gol permanent deasupra zonei de scriere. */
.chat-photo-preview {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px 0;
}

.chat-photo-thumb {
  position: relative;
  width: 64px;
  height: 64px;
}

.chat-photo-thumb img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

/* Butonul de eliminare: mic, în colț, dar cu zonă de atingere suficientă pe
   telefon — de aceea `inset` negativ și nu doar o iconiță lipită de margine. */
.chat-photo-thumb button {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: #b23b3b;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ============================================================================
   ZONA DE COMPUNERE A CHATULUI — tipar WhatsApp (§8.9 D2-bis)
   Cu emoji, agrafă, câmp și trimitere unul lângă altul, textul rămânea prea
   îngust pe telefon. Aici emoji și agrafa intră ÎN câmp, deci pe rând rămân trei
   elemente în loc de patru.
   ⚠ NU ștergem regula veche `.chat-input`: o suprascriem prin reguli ULTERIOARE.
   ★ `.chat-icon-btn` a fost ȘTEARSĂ (30 aug. 2026). Nota de aici susținea că e
     folosită în antetul chatului — NU mai era adevărat: antetul folosește
     `.chat-head-btn` (index.html ~1460), iar clasa nu apărea nicăieri în JS sau
     HTML, în tot proiectul. Comentariul care o proteja devenise el însuși capcana.
   EN: emoji and paperclip move inside the field; the send button stays outside
       as the primary action. Older rules are overridden, never deleted.
   ============================================================================ */
.chat-input-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 22px;
  padding: 0 6px;
  transition: border-color 0.2s ease;
}

/* Conturul se aprinde când scrii, deși `input`-ul nu mai are chenar propriu. */
.chat-input-wrap:focus-within { border-color: var(--accent-primary); }

/* Câmpul devine transparent: chenarul îl desenează acum containerul. */
.chat-input,
.chat-input:focus {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  outline: none;
}

.chat-input { padding: 12px 6px; }

/* Butoanele din interiorul câmpului: mai mici decât cele din antet și fără
   fundal propriu, ca să nu pară două butoane lipite de o casetă. */
.chat-inline-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  padding: 0;
  transition: transform 0.15s ease, color 0.15s ease;
}

.chat-inline-btn:hover { color: var(--accent-primary); }
.chat-inline-btn:active { transform: scale(0.9); }

/* Pe mobil regula de la ~2395 impune `padding: 16px 14px !important` pe
   `.chat-input`. În interiorul containerului, 14px la stânga ar îndepărta
   textul de emoji fără motiv — îl aducem înapoi, tot cu `!important`,
   fiindcă altfel n-ar avea cum să câștige. */
@media (max-width: 768px) {
  .chat-input { padding-left: 6px !important; padding-right: 6px !important; }
}

/* Butonul plutitor „+" (`#toFab`, construit de nav.js) se suprapunea peste
   butonul de trimitere.
   ⚠ ÎNLOCUIT `body:has(#chatInput:focus)` cu `body.kb-open`: prima variantă era
     legată de UN SINGUR câmp, deci la orice alt câmp din aplicație (formularul
     de sesiune, modaluri, calculatorul intern) butonul rămânea peste tastatură.
     Marcajul e pus acum de modulul global din app-core.js, care citește
     `visualViewport` — singura sursă care știe cât ocupă tastatura.
   ⚠ Dispare la INTENȚIA de a scrie, nu la intrarea în tab: în chat fără
     tastatură `+` rămâne util.
   ⚠ Clasele `.to-fab` / `.to-fabmenu`, ca regula existentă pentru ecranul
     complet (~4084), ca cele două să nu diverge.
   EN: replaced a single-field selector with the global keyboard flag, so every
       screen benefits, not just the chat. */
body.kb-open .to-fab,
body.kb-open .to-fabmenu { display: none !important; }

/* ── Chat pe mobil: mai mult spațiu unde chiar contează (§8.9 D2-bis) ────── */

@media (max-width: 768px) {
  /* Eticheta „@nume" din antetul bulei. Pe ecran îngust, un nume lung plus
     eticheta se rup pe două rânduri și bula arată aglomerată. Informația NU se
     pierde: eticheta rămâne vizibilă în profilul public, la o apăsare distanță.
     ⚠ Ascunsă doar aici, prin CSS — `_chatRowHtml` o randează în continuare,
       deci pe desktop, unde e loc, rămâne exact ca acum.
     EN: hidden on narrow screens only; the tag is still one tap away in the
         public profile, and desktop is unchanged. */
  .chat-sender-tag { display: none; }
}

/* Meniul de jos, cât timp e tastatura deschisă. Pe telefon consumă un sfert din
   spațiul rămas fără să fie de folos în acel moment, iar utilizatorul tocmai a
   arătat că vrea să scrie.
   ⚠ ÎNLOCUIT `:has(#chatInput:focus)` cu `body.kb-open` — vezi nota de la `.to-fab`.
     Acum se aplică la ORICE câmp: chat, formular de sesiune, calculator, modaluri.
   ⚠ Doar sub 768px: pe desktop nu există bară de jos.
   EN: bottom nav hides whenever the on-screen keyboard is up, on narrow screens. */
@media (max-width: 768px) {
  body.kb-open .to-nav { display: none !important; }
}

/* ── Chatul urcă lângă tastatură (§8.9 D2-bis) ───────────────────────────────
   Cu tastatura deschisă rămânea un gol mare între chat și tastatură.
   ⚠ Prima încercare folosea `calc(100dvh - 92px)`. NU A FUNCȚIONAT, și pozele au
     arătat de ce: `dvh` descrie viewportul de ASPECT, pe care browserul îl
     redimensionează doar uneori și fără să spună cât ocupă tastatura. Rezultatul
     era un container calculat greșit — nici lipit de tastatură, nici plin.
     Acum folosim `--app-vh`, publicată de modulul global din app-core.js, care
     citește `visualViewport` — înălțimea CHIAR VIZIBILĂ, în orice moment.
   ⚠ `min-height: 480px` (regula ~2387) NU se șterge: protejează ecranele mici
     FĂRĂ tastatură. Se anulează doar cât timp tastatura e deschisă, altfel ar
     forța containerul mai înalt decât spațiul rămas — cauza inițială a golului.
   ⚠ Scăderea coboară la 92px: bara de jos și butonul plutitor sunt deja ascunse,
     deci nu mai trebuie rezervat spațiu pentru ele.
   ⚠ `var(--app-vh, 100dvh)`: fără `visualViewport` rămâne exact comportamentul
     de azi. Degradare curată.
   EN: uses the real visible height from visualViewport instead of dvh, which
       never reflected the keyboard. */
@media (max-width: 768px) {
  body.kb-open .chat-container {
    min-height: 0 !important;
    /* `--chat-avail` e MĂSURATĂ în app-core.js: spațiul rămas sub container,
       adăugat la înălțimea lui curentă. Varianta anterioară scădea 92px
       inventați, iar zona de scriere ieșea sub ecran.
       ⚠ `!important` NU e decorativ: mai sus, tot în acest bloc, există
         `.chat-container { height: calc(100dvh - 170px) !important;
         min-height: 420px !important; }`, iar sub 480px `height: 350px !important`.
         Fără `!important` aici, regula de față NU se aplica NICIODATĂ pe telefon
         — de aceea containerul rămânea la o înălțime fixă și sub el se vedea golul
         dintre chat și tastatură. Câștigă fiindcă e ultima cu aceeași greutate.
       EN: needs !important to beat the fixed heights declared earlier for phones. */
    height: var(--chat-avail, calc(100dvh - 92px)) !important;
  }
}

/* ── Rezervarea de spațiu pentru bara de jos dispare odată cu bara ────────────
   `body.to-nav-on` rezervă jos `--to-nav-h` + safe-area + 12px (≈ 90–105px pe
   iPhone). Bara e ascunsă cât timp e tastatura deschisă (`body.kb-open .to-nav`),
   dar rezervarea RĂMÂNEA — iar ea, nu chatul, era golul dintre conversație și
   tastatură, pe iOS ȘI pe Android deopotrivă.
   ⚠ Se anulează pe `body`, nu pe `.container`: acolo a fost mutată rezervarea, ca
     să urce și footerul legal (vezi corecția de la ~4155).
   ⚠ Doar sub 768px: pe desktop bara e laterală și nu rezervă spațiu jos.
   EN: the bottom bar is hidden while typing, so the space reserved for it must
       collapse too — that gap was the empty strip above the keyboard. */
@media (max-width: 768px) {
  body.kb-open.to-nav-on { padding-bottom: 0 !important; }
  body.kb-open.to-nav-on .container { padding-bottom: 6px !important; }
}

/* Chatul pe ecran complet se portează în <body> și ocupă tot ecranul. Cu
   tastatura deschisă, `100dvh` îl face mai înalt decât spațiul vizibil, iar zona
   de scriere ajunge SUB tastatură — exact situația în care, după o derulare în
   sus, câmpul devenea imposibil de atins.
   EN: fullscreen chat must shrink to the visible viewport, otherwise the input
       area ends up underneath the keyboard. */
body.kb-open #chatCard.chat-fullscreen {
  /* ⚠ iOS: cu tastatura deschisă, Safari NU micșorează viewportul de ASPECT, ci
     DERULEAZĂ viewportul vizual în interiorul lui. Un `position: fixed; top: 0`
     rămâne ancorat de cel de aspect, deci urcă peste marginea ecranului: antetul
     dispărea sus, iar dedesubt rămânea o bandă goală — exact ce se vedea în
     capturi. `--vv-top` (publicată de app-core.js) e chiar acel decalaj.
     Pe Android e mereu 0 ⇒ nimic nu se schimbă acolo.
     ⚠ `bottom: auto` e obligatoriu: cu `top` ȘI `bottom` fixate, înălțimea ar fi
       impusă de ele și `--app-vh` ar fi ignorată.
     EN: pin the fixed overlay to the visual viewport on iOS. */
  top: var(--vv-top, 0px);
  bottom: auto;
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
  /* Cu tastatura peste bara de gesturi, rezerva pentru safe-area de jos e spațiu
     mort între ultimul mesaj și taste. Sus, decalajul deja coborât cu `--vv-top`
     se scade din inset-ul de crestătură. */
  padding-bottom: 10px;
  padding-top: calc(max(0px, env(safe-area-inset-top, 0px) - var(--vv-top, 0px)) + 12px);
}

/* ═══ BLOCAREA UTILIZATORILOR (block.js) ══════════════════════════════════════
   Meniul „⋮" înlocuiește steagul singuratic acolo unde ținta e un OM. Reia exact
   geometria lui `.report-icon-btn` (aceeași poziție, aceeași mărime), ca trecerea
   să nu se simtă ca o mutare de buton.
   EN: the ⋮ menu replaces the lone flag icon on person-targeted surfaces. */
/* ⚠ `margin-left:auto` impinge butonul la capatul randului — corect intr-un rand de
   lista, gresit in randul de actiuni din profil: acolo containerul are `flex-wrap`, iar
   butonul ramanea SINGUR pe un rand nou. `flex-wrap` imparte dupa `flex-basis`, inainte
   de `flex-grow` (§63.6), deci butonul cu marja automata pleaca primul jos.
   Il anulam DOAR in randul de actiuni; peste tot altundeva ramane ca inainte. */
.pf-actions-row .user-menu-btn { margin-left:0; }
.user-menu-btn {
    flex:none; margin-left:auto;
    width:clamp(30px,8.5vw,36px); height:clamp(30px,8.5vw,36px);
    border-radius:50%; border:1px solid var(--border,#333);
    background:transparent; color:var(--text-secondary,#999);
    font-size:clamp(12px,3.4vw,14px); line-height:1;
    display:inline-flex; align-items:center; justify-content:center;
    cursor:pointer; opacity:.6;
    transition:opacity .15s, color .15s, border-color .15s, background .15s;
}
.user-menu-btn:hover, .user-menu-btn:focus {
    opacity:1; color:var(--primary,#e67e22);
    border-color:var(--primary,#e67e22); background:rgba(230,126,34,0.08);
}

/* ⚠ `position:absolute` față de PĂRINTELE butonului, nu față de `body`: meniul
     trăiește adesea într-un modal care se derulează, iar un element atașat la
     `body` ar rămâne în urmă la derulare.
   ⚠ z-index peste modaluri (§ notificările sunt la 100020), dar sub ele: meniul
     se închide oricum la orice click în document. */
/* ⚠ Se deschide ÎN SUS (`bottom`), nu în jos. Rândul de acțiuni stă aproape
     întotdeauna la baza unui modal, iar un meniu deschis în jos alungea modalul
     și împingea conținutul. Clasa `.down` e pusă din JS doar când sus nu încape. */
.user-menu-pop {
    position:fixed; z-index:100015;
    min-width:190px; padding:6px;
    background:var(--card-bg,#1e1e35); border:1px solid var(--border,#333);
    border-radius:10px; box-shadow:0 10px 28px rgba(0,0,0,0.45);
    display:flex; flex-direction:column; gap:2px;
}
/* `.down` nu mai e folosita: pozitia se calculeaza integral din JS (§65.10). */
.user-menu-item {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:9px 11px;
    background:transparent; border:0; border-radius:7px;
    color:var(--text,#eee); font-family:inherit; font-size:0.86em;
    text-align:left; cursor:pointer; white-space:nowrap;
}
.user-menu-item:hover, .user-menu-item:focus { background:rgba(255,255,255,0.07); }
.user-menu-item.danger { color:var(--danger,#e74c3c); }
.user-menu-item.danger:hover, .user-menu-item.danger:focus { background:rgba(231,76,60,0.12); }
.user-menu-item i { width:16px; text-align:center; }

/* Lista de utilizatori blocați (profil → Securitate cont) */
.blk-row {
    display:flex; align-items:center; gap:10px;
    padding:7px 0; border-bottom:1px solid var(--border,#2a2a44);
}
.blk-row:last-child { border-bottom:0; }
.blk-row-av { flex:none; display:inline-flex; align-items:center; }
.blk-row-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.blk-hidden-note {
    display:flex; align-items:center; gap:8px;
    padding:10px 12px; margin:8px 0;
    border:1px dashed var(--border,#333); border-radius:8px;
    color:var(--text-secondary,#999); font-size:0.84em;
}

/* Rândul de acțiuni dintr-un profil + nota „ai blocat acest utilizator". */
.user-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; flex:1 1 auto; }
.blk-note {
    display:inline-flex; align-items:center; gap:8px;
    color:var(--text-secondary,#999); font-size:0.84em;
}
.blk-note i { color:var(--danger,#e74c3c); }

/* Bara care înlocuiește zona de scriere într-o conversație privată blocată.
   ⚠ Text NEUTRU: dacă celălalt e cel care a blocat, un mesaj explicit ar
     transforma conversația într-un detector de blocări. */
.dm-blocked-bar {
    display:flex; align-items:center; justify-content:center; gap:9px;
    margin-top:10px; padding:12px 14px;
    border:1px dashed var(--border,#333); border-radius:10px;
    color:var(--text-secondary,#999); font-size:0.86em; text-align:center;
}
.dm-blocked-bar i { color:var(--danger,#e74c3c); }