/* ============================================================
   style.css — MAGYAR ZENE OLDAL
   Design tokens:
   --bg        : #0d0e10  (meleg fekete alap)
   --bg-elev   : #16181c  (kártya háttér)
   --bg-elev2  : #1d2024  (kiemelt kártya / hover)
   --paprika   : #d6432b  (fő akcentus — magyar paprika piros)
   --gold      : #e0a83e  (csillagok, kiemelések)
   --green     : #2f6e4f  (győztes / pozitív állapot)
   --text      : #ece8e1
   --muted     : #8b8d93
   --border    : #2a2d32
   Display font: Bebas Neue (poszteres, koncert-plakát hangulat)
   Body font:    Inter
   ============================================================ */

:root{
  --bg: #0d0e10;
  --bg-elev: #16181c;
  --bg-elev2: #1d2024;
  --paprika: #d6432b;
  --paprika-dim: #8c2c1b;
  --gold: #e0a83e;
  --green: #2f6e4f;
  --text: #ece8e1;
  --muted: #8b8d93;
  --border: #2a2d32;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection{ background: var(--paprika); color:#fff; }

a{ color: inherit; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ===================== LAYOUT WRAPPERS ===================== */
main{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.section-title{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  letter-spacing: .5px;
  margin: 48px 0 6px;
  color: var(--text);
}

.muted-text{
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 24px;
  max-width: 640px;
}

/* ===================== TOPBAR ===================== */
.topbar{
  position: sticky;
  top:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  background: rgba(13,14,16,.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand{ display:flex; align-items:center; gap:10px; }
.brand-mark{
  width: 36px; height:36px;
  border-radius: 8px;
  background: var(--paprika);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size: 16px;
  color:#fff;
  flex-shrink:0;
}
.brand-text{
  font-family:'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: .5px;
  white-space: nowrap;
}
.brand-accent{ color: var(--paprika); }

.topbar-right{ display:flex; align-items:center; gap: 14px; }

.tabs{ display:flex; gap:6px; }
.tab-btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size: 14px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 9px 16px;
  border-radius: 999px;
  cursor:pointer;
  transition: all .2s ease;
}
.tab-btn:hover{ color: var(--text); background: var(--bg-elev); }
.tab-btn.active{
  color:#fff;
  background: var(--paprika);
}

.burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding: 6px;
}
.burger span{ width:22px; height:2px; background: var(--text); display:block; }

/* ===================== TAB PANELS ===================== */
.tab-panel{ display:none; animation: fadeIn .35s ease; }
.tab-panel.active{ display:block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ===================== HERO ===================== */
.hero{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items:center;
  padding: 64px 0 24px;
}
.eyebrow{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin: 0 0 10px;
}
.hero-title{
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(48px, 7vw, 84px);
  line-height: .95;
  margin: 0 0 18px;
  letter-spacing: .5px;
}
.hero-sub{
  color: var(--muted);
  font-size: 16px;
  max-width: 480px;
  margin: 0 0 28px;
}

.btn{
  font-family:'Inter',sans-serif;
  font-weight: 700;
  font-size: 14px;
  border-radius: 999px;
  padding: 13px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn-primary{ background: var(--paprika); color:#fff; box-shadow: 0 6px 20px rgba(214,67,43,.35); }
.btn-primary:hover{ background:#e44f34; }
.btn-ghost{ background: var(--bg-elev); color: var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background: var(--bg-elev2); }
.btn-win{
  width:100%;
  background: var(--bg-elev2);
  color: var(--text);
  border: 1px solid var(--border);
  margin-top: 14px;
  padding: 12px;
  font-family:'Bebas Neue',sans-serif;
  font-size: 16px;
  letter-spacing: .5px;
}
.btn-win:hover{ background: var(--green); border-color: var(--green); color:#fff; }

/* Signature elem: torn-paper VS preview kártya a heroban */
.hero-vs-preview{
  display:flex;
  align-items:center;
  background: var(--bg-elev);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  box-shadow: var(--shadow);
}
.hvp-card{ flex:1; text-align:center; }
.hvp-cover{
  width:100%;
  aspect-ratio: 1/1;
  border-radius: 10px;
  background-size: cover;
  background-position:center;
  margin-bottom: 10px;
  border: 1px solid var(--border);
}
.hvp-name{ font-size: 13px; font-weight:600; color: var(--muted); margin:0; }
.hvp-divider{
  width:64px; height:64px;
  border-radius:50%;
  background: var(--paprika);
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  color:#fff;
  font-size:18px;
  flex-shrink:0;
  margin: 0 -10px;
  box-shadow: 0 0 0 6px var(--bg-elev), 0 8px 24px rgba(214,67,43,.5);
  z-index:2;
  transform: rotate(-6deg);
}

/* ===================== GENRE GRID ===================== */
.genre-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.genre-card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  position: relative;
  overflow:hidden;
}
.genre-card::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:90px; height:90px;
  background: var(--paprika);
  opacity:.08;
  border-radius: 50%;
  transform: translate(30px,-30px);
}
.genre-card:hover{ transform: translateY(-4px); border-color: var(--paprika); background: var(--bg-elev2); }
.genre-card.active{ border-color: var(--gold); }
.genre-card h3{
  font-family:'Bebas Neue',sans-serif;
  font-size: 24px;
  margin: 0 0 6px;
  letter-spacing:.5px;
}
.genre-card p{ color: var(--muted); font-size: 13px; margin: 0 0 14px; min-height: 36px; }
.genre-count{ font-size: 12px; color: var(--gold); font-weight:700; }

.home-genre-filter-result{ margin-top: 28px; display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }

/* ===================== SONG CARD (generikus) ===================== */
.song-card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.song-card:hover{ transform: translateY(-3px); border-color: var(--paprika); }
.song-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.song-card .sc-body{ padding: 12px 14px; }
.song-card .sc-title{ font-weight:700; font-size:14px; margin:0 0 2px; }
.song-card .sc-artist{ color: var(--muted); font-size: 12.5px; margin:0; }
.genre-badge{
  display:inline-block;
  font-size: 10.5px;
  font-weight:700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 8px;
  background: rgba(224,168,62,.12);
  color: var(--gold);
}
.genre-badge.underground{ background: rgba(214,67,43,.14); color: var(--paprika); }
.genre-badge.mainstream{ background: rgba(224,168,62,.14); color: var(--gold); }
.genre-badge.pop{ background: rgba(96,150,220,.14); color: #7fa8e0; }
.genre-badge.hiphop{ background: rgba(47,110,79,.18); color: #59ad81; }

/* ===================== VS ARENA ===================== */
.vs-arena{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items:center;
  margin-top: 10px;
}
.vs-card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-align:center;
  box-shadow: var(--shadow);
}
.vs-card img{
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto 14px;
  display:block;
  border: 1px solid var(--border);
}
.vs-card h3{ font-size: 18px; margin: 0 0 2px; }
.vs-card .vs-artist{ color: var(--muted); font-size: 13px; margin: 0 0 2px; }
.vs-card .vs-album{ color: var(--muted); font-size: 12px; margin: 0 0 14px; font-style: italic; }
.vs-card iframe{ width:100%; border-radius: 10px; }

.vs-vs-mark{
  font-family:'Bebas Neue',sans-serif;
  font-size: 26px;
  color: var(--paprika);
  width: 56px; height:56px;
  border: 2px solid var(--paprika);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  transform: rotate(-8deg);
}

.vs-controls{ display:flex; justify-content:center; margin-top: 24px; }

/* ===================== RANGLISTA ===================== */
.rank-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.seg-control{ display:flex; background: var(--bg-elev); border-radius: 999px; padding:4px; border:1px solid var(--border); }
.seg-btn{
  background: transparent; border:none; color: var(--muted);
  font-weight:700; font-size:13px; padding: 8px 18px; border-radius: 999px; cursor:pointer;
}
.seg-btn.active{ background: var(--paprika); color:#fff; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  background: var(--bg-elev);
  border:1px solid var(--border);
  color: var(--muted);
  font-size: 12.5px;
  font-weight:600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor:pointer;
  transition: all .15s ease;
}
.chip:hover{ color: var(--text); }
.chip.active{ background: var(--gold); color:#1a1300; border-color: var(--gold); }

.rank-row{
  display:grid;
  grid-template-columns: 36px 52px 1fr 120px;
  align-items:center;
  gap: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 10px;
  cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rank-row:hover{ border-color: var(--paprika); background: var(--bg-elev2); }
.rank-row .rank-num{ font-family:'Bebas Neue',sans-serif; font-size: 20px; color: var(--muted); text-align:center; }
.rank-row:nth-child(1) .rank-num{ color: var(--gold); }
.rank-row:nth-child(2) .rank-num{ color: #c9ccd1; }
.rank-row:nth-child(3) .rank-num{ color: #c98a4e; }
.rank-row img{ width: 52px; height:52px; border-radius: 8px; object-fit:cover; }
.rank-row .rank-info{ min-width:0; }
.rank-row .rank-info .ri-title{ font-weight:700; font-size: 14.5px; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-row .rank-info .ri-sub{ color: var(--muted); font-size: 12px; margin:2px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank-stats{ text-align:right; }
.rank-stats .wins{ color: var(--green); font-weight:800; font-size: 14px; }
.rank-stats .bar{ height:5px; background: var(--bg); border-radius: 4px; overflow:hidden; margin-top:5px; }
.rank-stats .bar-fill{ height:100%; background: var(--paprika); }

/* ===================== ÉRTÉKELÉSEK GRID ===================== */
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.review-card{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor:pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.review-card:hover{ border-color: var(--paprika); transform: translateY(-3px); }
.review-card .rc-head{ display:flex; gap: 12px; align-items:center; }
.review-card img{ width:58px; height:58px; border-radius:8px; object-fit:cover; }
.review-card .rc-title{ font-weight:700; font-size:14.5px; margin:0; }
.review-card .rc-artist{ color: var(--muted); font-size:12.5px; margin:2px 0 0; }
.review-card .rc-stars{ color: var(--gold); margin: 10px 0 2px; font-size: 14px; letter-spacing: 1px; }
.review-card .rc-count{ color: var(--muted); font-size: 12px; margin:0; }
.review-card iframe{ width:100%; height:80px; margin-top: 10px; border-radius: 8px; }

/* ===================== MODAL ===================== */
.modal-overlay{
  position: fixed; inset:0;
  background: rgba(5,5,6,.78);
  backdrop-filter: blur(4px);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 100;
}
.modal-overlay.active{ display:flex; }
.modal-box{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  max-width: 640px;
  width:100%;
  padding: 28px;
  position: relative;
  box-shadow: var(--shadow);
  animation: popIn .25s ease;
}
@keyframes popIn{ from{ opacity:0; transform: scale(.96); } to{ opacity:1; transform:none; } }

.modal-close{
  position:absolute; top:16px; right:16px;
  background: var(--bg-elev2); border:1px solid var(--border);
  color: var(--text); width:32px; height:32px; border-radius:50%;
  cursor:pointer; font-size: 14px;
}
.modal-top{ display:flex; gap:20px; flex-wrap:wrap; }
.modal-top img{ width: 160px; height:160px; border-radius: 12px; object-fit:cover; flex-shrink:0; }
.modal-info{ flex:1; min-width: 200px; }
.modal-info h2{ font-family:'Bebas Neue',sans-serif; font-size: 30px; margin:0 0 4px; }
.modal-info .mi-artist{ color: var(--muted); font-size: 14px; margin: 0 0 2px; }
.modal-info .mi-album{ color: var(--muted); font-size: 13px; font-style: italic; margin: 0 0 10px; }
.modal-stats{ display:flex; gap: 18px; margin-top: 10px; flex-wrap:wrap; }
.modal-stats .ms-item{ font-size: 12.5px; color: var(--muted); }
.modal-stats .ms-item b{ display:block; font-family:'Bebas Neue',sans-serif; font-size: 20px; color: var(--text); }
.modal-top iframe{ width:100%; margin-top: 14px; border-radius: 10px; }

.modal-sep{ border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.modal-subtitle{ font-family:'Bebas Neue',sans-serif; font-size: 20px; margin: 0 0 14px; }

.review-form{ display:flex; flex-direction:column; gap:10px; margin-bottom: 22px; }
.review-form input, .review-form textarea{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  resize: vertical;
}
.review-form textarea{ min-height: 70px; }
.review-form input:focus, .review-form textarea:focus{ outline: 2px solid var(--paprika); }
.review-form input:disabled{ opacity: .6; cursor: not-allowed; }

.star-picker{ font-size: 26px; color: var(--border); cursor:pointer; user-select:none; }
.star-picker span{ transition: color .1s ease; padding-right: 2px; }
.star-picker span.sel{ color: var(--gold); }

.review-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  background: var(--bg);
}
.review-item .ri-top{ display:flex; justify-content:space-between; align-items:baseline; gap: 10px; }
.review-item .ri-user{ font-weight:700; font-size: 13.5px; }
.review-item .ri-date{ color: var(--muted); font-size: 11.5px; }
.review-item .ri-stars{ color: var(--gold); font-size: 13px; margin: 4px 0; letter-spacing: 1px; }
.review-item .ri-text{ font-size: 13.5px; margin:0; color: var(--text); }
.review-empty{ color: var(--muted); font-size: 13.5px; text-align:center; padding: 18px 0; }

/* ===================== FOOTER ===================== */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align:center;
  color: var(--muted);
  font-size: 12px;
}
.site-footer code{ background: var(--bg-elev); padding:2px 6px; border-radius:6px; }

/* ===================== PROFIL PILLE (topbar) ===================== */
.profile-pill{
  display:flex;
  align-items:center;
  gap: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 14px 5px 5px;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
  flex-shrink:0;
}
.profile-pill:hover{ border-color: var(--paprika); background: var(--bg-elev2); }
.pp-avatar{
  width: 28px; height:28px;
  border-radius: 50%;
  background: var(--paprika);
  color:#fff;
  font-weight:800;
  font-size: 12.5px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  flex-shrink:0;
}
.pp-avatar img{ width:100%; height:100%; object-fit:cover; }
.pp-name{ font-size: 13px; font-weight:700; color: var(--text); white-space:nowrap; max-width:120px; overflow:hidden; text-overflow:ellipsis; }

/* ===================== AUTH (login/register) ===================== */
.auth-tabs{ display:flex; gap:8px; margin-bottom: 20px; }
.auth-tab-btn{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight:700;
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 999px;
  cursor:pointer;
}
.auth-tab-btn.active{ background: var(--paprika); color:#fff; border-color: var(--paprika); }

.auth-form{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.auth-form input{
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family:'Inter',sans-serif;
  font-size: 14px;
}
.auth-form input:focus{ outline: 2px solid var(--paprika); }
.auth-error{ color: var(--paprika); font-size: 12.5px; min-height: 14px; margin:0; }
.auth-message{ color: var(--green); font-size: 12.5px; margin:0; line-height:1.5; }
.link-btn{
  background: none;
  border: none;
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .15s ease;
}
.link-btn:hover{ text-decoration-color: var(--gold); }
.auth-note{ max-width: 460px; color: var(--muted); font-size: 12px; margin-top: 16px; line-height: 1.6; }

/* ===================== PROFIL KÁRTYA ===================== */
.profile-card{
  display:flex;
  gap: 24px;
  align-items: flex-start;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  flex-wrap: wrap;
}
.profile-avatar-wrap{ text-align:center; flex-shrink:0; }
.profile-avatar{
  width: 96px; height:96px;
  border-radius: 50%;
  background: var(--paprika);
  color:#fff;
  font-family:'Bebas Neue',sans-serif;
  font-size: 34px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  margin: 0 auto 10px;
  border: 3px solid var(--bg-elev2);
  box-shadow: 0 0 0 2px var(--border);
}
.profile-avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-upload-btn{
  display:inline-block;
  font-size: 11.5px;
  font-weight:700;
  color: var(--gold);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.avatar-upload-btn:hover{ border-color: var(--gold); }

.profile-edit{ flex:1; min-width: 220px; }
.field-label{ font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight:700; margin: 0 0 6px; }
.name-edit-row{ display:flex; gap:8px; }
.name-edit-row input{
  flex:1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-family:'Bebas Neue',sans-serif;
  font-size: 18px;
  letter-spacing:.5px;
}
.name-edit-row input:focus{ outline: 2px solid var(--paprika); }
.profile-username{ color: var(--muted); font-size: 12.5px; margin: 8px 0 14px; }
.btn-logout{ font-size: 12.5px; padding: 8px 16px; }

.stat-box-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 22px;
}
.stat-box{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align:center;
}
.stat-box b{ display:block; font-family:'Bebas Neue',sans-serif; font-size: 26px; color: var(--gold); }
.stat-box span{ font-size: 11.5px; color: var(--muted); }

.favorite-row{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.favorite-box{
  display:flex;
  align-items:center;
  gap: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.favorite-box img{ width:56px; height:56px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.favorite-box .fb-genre-icon{
  width:56px; height:56px; border-radius:8px; flex-shrink:0;
  background: var(--paprika); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif; font-size:13px; text-align:center;
}
.favorite-box .fb-label{ font-size: 11px; text-transform:uppercase; letter-spacing:.5px; color: var(--gold); font-weight:700; margin:0 0 3px; }
.favorite-box .fb-value{ font-weight:700; font-size: 14.5px; margin:0; }
.favorite-box .fb-sub{ color: var(--muted); font-size: 12px; margin: 2px 0 0; }
.favorite-empty{ color: var(--muted); font-size: 13px; padding: 14px; background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--radius); grid-column: 1 / -1; }

.friend-search input{
  width:100%;
  max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--text);
  font-family:'Inter',sans-serif;
  font-size: 14px;
}
.friend-search input:focus{ outline: 2px solid var(--paprika); }

.friend-results, .friend-list{ margin-top: 12px; display:flex; flex-direction:column; gap:8px; }
.friend-row{
  display:flex;
  align-items:center;
  gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
}
.friend-row .fr-avatar{
  width: 38px; height:38px; border-radius:50%;
  background: var(--paprika); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size: 13px; overflow:hidden; flex-shrink:0;
}
.friend-row .fr-avatar img{ width:100%; height:100%; object-fit:cover; }
.friend-row .fr-info{ flex:1; min-width:0; }
.friend-row .fr-name{ font-weight:700; font-size: 13.5px; margin:0; }
.friend-row .fr-sub{ color: var(--muted); font-size: 11.5px; margin: 1px 0 0; }
.friend-row .btn{ padding: 7px 14px; font-size: 12px; flex-shrink:0; }
.friend-empty{ color: var(--muted); font-size: 13px; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; padding-top: 36px; }
  .genre-grid{ grid-template-columns: repeat(2,1fr); }
  .vs-arena{ grid-template-columns: 1fr; }
  .vs-vs-mark{ margin: 0 auto; }
  .stat-box-row{ grid-template-columns: repeat(2,1fr); }
  .favorite-row{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  .tabs{
    position: fixed;
    top: 64px; left:0; right:0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction:column;
    padding: 10px 16px 16px;
    display:none;
    gap: 8px;
    z-index: 49;
  }
  .tabs.open{ display:flex; }
  .tab-btn{ width:100%; text-align:left; }
  .burger{ display:flex; }
  .brand-text{ font-size: 16px; }
  .rank-row{ grid-template-columns: 30px 44px 1fr 80px; }
  .modal-top img{ width: 120px; height: 120px; }
  .pp-name{ display:none; }
  .profile-pill{ padding: 5px; }
  .profile-card{ flex-direction: column; align-items:center; text-align:center; }
  .name-edit-row{ flex-direction: column; }
}

@media (max-width: 520px){
  .genre-grid{ grid-template-columns: 1fr 1fr; gap: 10px; }
  .reviews-grid{ grid-template-columns: 1fr; }
  main{ padding: 0 16px 60px; }
}