/* A3.2 — Density + grid discipline + Faceit-ish radii
   ----------------------------------------------------
   CSS-first rework to feel closer to Faceit:
   - smaller radii (no bubble cards)
   - tighter spacing / higher density
   - consistent 2-col grid defaults
   - compact tables and controls
*/

:root{
  --hud-radius: 8px;
  --hud-radius-sm: 6px;
  --radius: 6px;
}

/* App shell spacing */
.container{
  max-width: 1600px;
  padding: 12px 14px 28px;
  gap: 14px;
}
@media (max-width: 980px){
  .container{padding: 10px 12px 22px}
}

/* Reduce "bubble" rounding across the shell */
.topbar,
.sidebar,
.card,
.hud-card,
.hero,
.panel,
.focus-card,
.result-pill,
.search,
.search-results,
.notif-dropdown,
.user-dropdown{
  border-radius: 6px !important;
}

/* Cards/panels density */
.card,
.hud-card{
  padding: 14px !important;
}
.hud-section{margin: 6px 0 10px !important;}
.hud-title{font-size: 12px !important;}
.hud-subtitle{font-size: 12px !important;}

/* Two-column grid defaults: content + right rail */
.grid{
  margin-top: 12px !important;
  gap: 12px !important;
  grid-template-columns: minmax(0, 1fr) 380px !important;
}
@media (max-width: 1180px){
  .grid{grid-template-columns: 1fr !important;}
}

/* Hero density */
.hero-inner{
  padding: 12px !important;
  gap: 12px !important;
}
.hero-score{gap: 12px !important;}
.hero-focus{padding-left: 12px !important;}
@media (max-width: 1180px){
  .hero-focus{padding-left: 0 !important;}
}

/* Controls: compact + readable */
.btn{
  border-radius: 6px !important;
  padding: 8px 10px !important;
  min-height: 36px;
}
.btn.icon{padding: 8px !important; min-width: 36px;}
input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="password"], select, textarea{
  border-radius: 6px !important;
  padding: 9px 10px !important;
  min-height: 36px;
}

/* Pills / badges: keep pill shape, but reduce size */
.pill, .badge, .tag{
  font-size: 11px !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
}

/* Sidebar nav: tighter hit areas */
.nav a{
  border-radius: 6px !important;
  padding: 9px 10px !important;
}
.nav-title{margin-top: 10px !important;}

/* Tables: denser rows */
thead th{padding: 10px 10px !important;}
tbody td{padding: 10px 10px !important;}
tbody tr:hover{background: rgba(255,255,255,.06) !important;}

/* Reduce excessive rounding on avatars/images while keeping circles where intended */
.avatar-lg{border-radius: 6px !important;}
.hero-map{border-radius: 6px !important;}

/* Make section separators more "Faceit" */
.divider{margin: 10px 0 !important; background: rgba(255,255,255,.10) !important;}