:root{
	--bg: #2748af; --card:#ffffff; --muted:#666; --accent:#2b7cff; --danger:#d64545;
}
*{box-sizing:border-box}
body{ font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:#222; margin:0 }
.container{ max-width:1100px; margin:24px auto; padding:0 18px }
header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
header h1{ font-size:1.25rem; margin:0 }
#auth-area{ display:flex; gap:8px; align-items:center }
/* navbar styling */
.main-nav{ display:flex; gap:10px; margin-left:14px }
.main-nav a{ color:var(--muted); padding:6px 10px; border-radius:6px; font-weight:600; transition:all .15s ease }
.main-nav a:hover{ color:#fff; background:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(43,124,255,0.12) }
.main-nav a.active{ color:#fff; background:var(--accent); box-shadow:0 8px 30px rgba(43,124,255,0.14) }
.main-nav a:focus{ outline:2px solid rgba(43,124,255,0.18) }
button{ background:var(--accent); color:#fff; border:0; padding:8px 12px; border-radius:6px; cursor:pointer }
button[disabled]{ opacity:0.6; cursor:default }
a{ color:var(--accent); text-decoration:none }

.auth-box{ max-width:480px; margin:40px auto; padding:20px; background:var(--card); border-radius:10px; box-shadow:0 6px 18px rgba(20,20,40,0.06) }
.auth-box form label{ display:block; margin-bottom:10px; font-size:0.95rem }
.auth-box input{ width:100%; padding:10px; margin-top:6px; border-radius:6px; border:1px solid #e6e9ef }
.msg{ margin-top:10px; color:var(--danger) }

#friends-list h2{ margin-top:0 }
#friends{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:12px }
.friend-box{ background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 14px rgba(18,22,30,0.04) }
.friend-box h3{ margin:0 0 8px 0; font-size:1.05rem }
.games-wrap{ border-radius:6px; overflow:hidden; border:1px solid #f0f2f6 }
.game-item{ padding:10px; border-top:1px solid #f0f2f6; display:flex; justify-content:space-between; align-items:center }
.game-item:first-child{ border-top:0 }
.game-title{ font-weight:600 }
.game-meta{ font-size:0.9rem; color:var(--muted) }
.game-meta a{ margin-right:8px }
.game-meta .votes{ font-weight:700; color:#222; margin-right:6px }
.game-meta button{ margin-left:8px; background:transparent; color:var(--accent); border:1px solid rgba(43,124,255,0.12); padding:6px 8px; border-radius:6px }

.modal{ position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; z-index:50 }
.modal-content{ background:var(--card); padding:20px; border-radius:10px; width:92%; max-width:680px; position:relative; box-shadow:0 20px 60px rgba(2,6,23,0.2) }
.modal-close{ position:absolute; right:12px; top:8px; cursor:pointer; font-size:18px }

@media (max-width:640px){
	header{ flex-direction:column; align-items:flex-start; gap:10px }
	#friends{ grid-template-columns: 1fr }
}

/* Add section layout */
.page-section{ background:var(--card); padding:14px; border-radius:10px; box-shadow:0 6px 16px rgba(20,20,40,0.04); margin-bottom:12px }
.add-forms{ display:flex; gap:12px; flex-wrap:wrap }
.add-forms .card{ flex:1 1 300px; padding:12px; border-radius:8px; background:#fff; border:1px solid #f1f3f6 }
.add-forms input{ width:100%; padding:8px; margin:6px 0; border-radius:6px; border:1px solid #e6e9ef }

/* profile page specifics */
.scroll-list{ max-height:360px; overflow:auto; padding:6px; border:1px solid #eef2f7; border-radius:8px }
.request-row{ display:flex; gap:8px; align-items:center; justify-content:space-between; padding:8px; border-bottom:1px dashed #f0f3f6 }
.request-row button{ background:transparent; color:var(--accent); border:1px solid rgba(43,124,255,0.12); padding:6px 8px; border-radius:6px }
.request-row button:last-child{ color:var(--danger); border-color: rgba(214,69,69,0.12) }

/* user suggestions dropdown */
.suggestions{ background:var(--card); border:1px solid #e8eef8; border-radius:6px; margin-top:6px; max-height:220px; overflow:auto }
.suggestion-item{ padding:8px 10px; cursor:pointer; border-bottom:1px solid #f3f6fb }
.suggestion-item:hover{ background: linear-gradient(90deg, rgba(43,124,255,0.06), rgba(43,124,255,0.02)); transform:translateX(4px) }