/* ===== FAKKAR — CSS VARIABLES ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Orbitron:wght@400;700;900&display=swap');

:root {
  --bg:            #FAFAF7;
  --surface:       #FFFFFF;
  --surface-2:     #F4F4F0;
  --border:        #E8E8E2;
  --border-strong: #D0D0C8;
  --primary:       #F5A623;
  --primary-dark:  #E8940F;
  --primary-light: #FDD87A;
  --primary-glow:  rgba(245, 166, 35, 0.18);
  --indigo:        #4F46E5;
  --indigo-light:  #818CF8;
  --indigo-glow:   rgba(79, 70, 229, 0.12);
  --text:          #1C1C1E;
  --text-2:        #4A4A4A;
  --text-3:        #8A8A8A;
  --text-inv:      #FFFFFF;
  --green:         #10B981;
  --red:           #EF4444;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:     0 24px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.06);
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --radius-full:   999px;
  --font-display:  'Orbitron', monospace;
  --font-body:     'Inter', sans-serif;
  --transition:    all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark-mode {
  --bg:            #0F0F0F;
  --surface:       #1A1A1A;
  --surface-2:     #242424;
  --border:        #2E2E2E;
  --border-strong: #3A3A3A;
  --text:          #F5F5F0;
  --text-2:        #B0B0A8;
  --text-3:        #6A6A6A;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.5);
  --shadow-xl:     0 24px 60px rgba(0,0,0,0.6);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

.animated-bg { position: fixed; inset: 0; z-index: -1; background: var(--bg); }
.animated-bg::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
  top: -200px; right: -100px;
  animation: bgFloat1 12s ease-in-out infinite;
}
.animated-bg::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--indigo-glow) 0%, transparent 70%);
  bottom: -150px; left: -100px;
  animation: bgFloat2 15s ease-in-out infinite;
}
@keyframes bgFloat1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,40px) scale(1.05)} }
@keyframes bgFloat2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-30px) scale(1.08)} }

.screen { position:fixed; inset:0; width:100vw; height:100vh; display:none; justify-content:center; align-items:center; z-index:5; }
.screen.active { display:flex; }
#lobbyScreen.active, #categorySelectionScreen.active, #categoriesScreen.active { align-items:stretch; justify-content:stretch; }

.theme-toggle {
  position: fixed; top: 20px; right: 20px; z-index: 1000;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  transition: var(--transition);
}
.theme-toggle:hover { transform: scale(1.1); box-shadow: var(--shadow-md); }

.back-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-2); font-size: 1rem; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; transition: var(--transition); box-shadow: var(--shadow-sm);
}
.back-btn:hover { border-color: var(--primary); color: var(--primary-dark); transform: translateX(-2px); }

.game-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 15;
  background: var(--surface); border-bottom: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm); padding: 0.75rem 1.5rem;
  height: 80px; display: flex; align-items: center;
}

.scoreboard { display:flex; justify-content:space-between; align-items:center; width:100%; gap:1rem; }

.team-score {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--surface-2); border: 1.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.8rem 1.4rem;
  min-width: 220px; transition: var(--transition);
}
.team-score.team-alpha { border-left: 4px solid var(--primary); }
.team-score.team-beta  { border-left: 4px solid var(--indigo); }

.score-content { flex: 1; }
.score-content h3 { font-size:0.85rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.1rem; }
.score { font-size:1.8rem; font-weight:800; font-family:var(--font-display); color:var(--text); }
.team-icon { font-size: 1.6rem; }

.score-controls { display:flex; flex-direction:column; gap:3px; }
.score-btn { width:32px; height:22px; border:none; border-radius:6px; font-size:0.8rem; font-weight:800; cursor:pointer; transition:var(--transition); display:flex; align-items:center; justify-content:center; }
.score-btn.add      { background: var(--green); color: white; }
.score-btn.subtract { background: var(--red); color: white; }
.score-btn:hover    { transform: scale(1.12); }

.turn-indicator {
  background: var(--primary); color: var(--text-inv);
  padding: 0.7rem 2rem; border-radius: var(--radius-full);
  font-size: 1.1rem; font-weight: 700; font-family: var(--font-display);
  box-shadow: 0 4px 16px var(--primary-glow);
  animation: pulse 2.5s ease-in-out infinite; white-space: nowrap;
}

#categoriesScreen { position:fixed; inset:0; display:none; flex-direction:column; z-index:10; }
#categoriesScreen.active { display:flex; }

.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  padding: 92px 1.25rem 1.25rem;
  flex: 1; width: 100%; box-sizing: border-box;
}

.category {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: 1.4rem; display: flex; flex-direction: column; transition: var(--transition);
}
.category:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-2px); }

.category-header { display:flex; align-items:center; gap:0.7rem; margin-bottom:1rem; padding-bottom:0.9rem; border-bottom:1.5px solid var(--border); }
.category-icon { font-size: 1.6rem; }
.category h3 { font-size:1.1rem; font-weight:800; font-family:var(--font-display); color:var(--text); }

.category-columns { display:flex; gap:0.75rem; flex:1; }
.point-options { flex:1; display:flex; flex-direction:column; gap:0.5rem; }

.team-label { font-size:0.8rem; font-weight:700; text-align:center; padding:0.45rem; border-radius:var(--radius-sm); margin-bottom:0.3rem; text-transform:uppercase; letter-spacing:0.5px; }
.point-options:first-child .team-label { background:rgba(245,166,35,0.12); color:var(--primary-dark); }
.point-options:last-child  .team-label { background:var(--indigo-glow); color:var(--indigo); }

.point-option {
  flex: 1; border: 1.5px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-2);
  color: var(--text); font-size: 1.5rem; font-weight: 800;
  font-family: var(--font-display); cursor: pointer;
  transition: var(--transition); display: flex;
  align-items: center; justify-content: center; min-height: 65px;
}
.point-option:hover:not(:disabled) { background:var(--primary); border-color:var(--primary); color:white; transform:scale(1.04); box-shadow:0 4px 14px var(--primary-glow); }
.point-option:disabled { opacity:0.2; cursor:not-allowed; }

.categories-grid[data-turn="0"] .point-options:first-child .point-option:not(:disabled),
.categories-grid[data-turn="1"] .point-options:last-child  .point-option:not(:disabled) {
  border-color: var(--primary); animation: teamGlow 2.5s ease-in-out infinite;
}

.question-card {
  max-width: 800px; width: 92%; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
  padding: 3rem; text-align: center;
  animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1);
}

.timer-container { display:flex; justify-content:center; margin-bottom:2rem; }
.timer-ring { position:relative; width:110px; height:110px; border-radius:50%; background:conic-gradient(var(--primary) 0deg, var(--border) 0deg); padding:5px; }
.timer-fill { width:100%; height:100%; border-radius:50%; background:var(--surface); display:block; }
.timer-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.timer-label { font-size:0.7rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.5px; }
.timer { font-size:2rem; font-weight:800; font-family:var(--font-display); color:var(--text); }

.question-text { font-size:1.8rem; font-weight:700; line-height:1.45; color:var(--text); margin-bottom:1.5rem; font-family:var(--font-display); }
.answer-container {
  background: linear-gradient(135deg,rgba(16,185,129,0.08),rgba(16,185,129,0.04));
  border: 2px solid var(--green); border-radius:var(--radius-lg);
  padding:1.6rem; margin:1.5rem 0; font-size:1.5rem; font-weight:700;
  color:var(--text); font-family:var(--font-display); display:none;
  animation:slideUp 0.4s ease;
}

.question-controls { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }

.control-btn {
  padding: 0.9rem 1.8rem; font-size:1rem; font-weight:700;
  font-family:var(--font-body); border:1.5px solid var(--border);
  border-radius:var(--radius-full); cursor:pointer; transition:var(--transition);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm);
}
.control-btn:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.control-btn.primary { background:var(--primary); border-color:var(--primary); color:white; box-shadow:0 4px 14px var(--primary-glow); }
.control-btn.primary:hover { background:var(--primary-dark); }
.control-btn.secondary { background:var(--indigo); border-color:var(--indigo); color:white; display:none; }
.timer-btn { background:var(--surface-2); color:var(--text-2); }

.answer-control-card {
  max-width:520px; width:92%;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl);
  padding:3rem; text-align:center; animation:slideUp 0.5s ease;
}
.answer-control-card h2 { font-size:1.8rem; font-weight:800; font-family:var(--font-display); color:var(--text); margin-bottom:2rem; }

.team-buttons { display:flex; flex-direction:column; gap:1rem; }
.team-btn { display:flex; align-items:center; justify-content:center; gap:0.7rem; padding:1.2rem 1.5rem; font-size:1.05rem; font-weight:700; font-family:var(--font-body); border:none; border-radius:var(--radius-lg); cursor:pointer; transition:var(--transition); }
.team-btn:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.team-btn.alpha   { background:var(--primary); color:white; }
.team-btn.beta    { background:var(--indigo); color:white; }
.team-btn.neutral { background:var(--surface-2); color:var(--text-2); border:1.5px solid var(--border); }
.btn-icon { font-size:1.3rem; }

.winner-card { max-width:520px; width:92%; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:3.5rem 2rem; text-align:center; animation:slideUp 0.7s ease; }
.winner-animation { font-size:4rem; display:flex; justify-content:center; gap:1rem; margin-bottom:1.5rem; }
.trophy { animation:bounce 1.5s ease-in-out infinite; }
.celebration { animation:wiggle 0.8s ease-in-out infinite; }
#winnerMessage { font-size:2rem; font-weight:800; font-family:var(--font-display); color:var(--text); margin-bottom:2rem; line-height:1.3; }

.notification { position:fixed; top:20px; right:20px; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.1rem 1.6rem; color:var(--text); z-index:9999; transform:translateX(420px); opacity:0; transition:all 0.35s cubic-bezier(0.4,0,0.2,1); box-shadow:var(--shadow-lg); max-width:340px; }
.notification.show { transform:translateX(0); opacity:1; }
.notification.warning { border-left:4px solid #F59E0B; }
.notification.success { border-left:4px solid var(--green); }
.notification.error   { border-left:4px solid var(--red); }
.notification.info    { border-left:4px solid var(--indigo); }
.notification-content { display:flex; align-items:center; gap:0.75rem; font-weight:600; font-size:0.95rem; }

.quick-selection { text-align:center; margin-bottom:1.5rem; }
.quick-selection h4 { color:var(--text-2); margin-bottom:0.9rem; font-weight:700; font-size:1rem; }
.quick-buttons { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }
.quick-btn { padding:0.65rem 1.4rem; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-full); color:var(--text-2); font-size:0.95rem; font-weight:700; font-family:var(--font-body); cursor:pointer; transition:var(--transition); }
.quick-btn:hover { background:var(--primary); border-color:var(--primary); color:white; transform:translateY(-2px); }

.search-container { margin:1rem 0; }
.search-input-wrapper { position:relative; max-width:360px; margin:0 auto; }
.search-input-wrapper input { width:100%; padding:0.9rem 1.2rem 0.9rem 3rem; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-full); color:var(--text); font-size:1rem; font-family:var(--font-body); transition:var(--transition); }
.search-input-wrapper input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
.search-input-wrapper input::placeholder { color:var(--text-3); }
.search-icon { position:absolute; left:1.1rem; top:50%; transform:translateY(-50%); font-size:1rem; }

.category-card { cursor:pointer; transition:var(--transition); border:1.5px solid var(--border); border-radius:var(--radius-lg); padding:1.2rem; background:var(--surface); display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:var(--shadow-sm); }
.category-card:hover { transform:translateY(-5px); border-color:var(--primary); box-shadow:var(--shadow-md); }
.category-card.selected { border-color:var(--primary); background:rgba(245,166,35,0.06); box-shadow:0 0 0 3px var(--primary-glow), var(--shadow-md); transform:scale(1.03); }
.category-card .card-icon { font-size:2rem; margin-bottom:0.6rem; }
.category-card h3 { color:var(--text); font-size:1rem; font-weight:700; margin-bottom:0.3rem; font-family:var(--font-display); }
.category-card .card-description { color:var(--text-3); font-size:0.8rem; line-height:1.35; }

.team-input-group.valid   { border-color:var(--green) !important; }
.team-input-group.invalid { border-color:var(--red) !important; }
.confirm-button:disabled  { opacity:0.4; cursor:not-allowed; }
.point-option:disabled    { opacity:0.2; cursor:not-allowed; }

@keyframes slideUp    { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse      { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
@keyframes teamGlow   { 0%,100%{box-shadow:none;border-color:var(--primary)} 50%{box-shadow:0 0 12px var(--primary-glow);border-color:var(--primary-dark)} }
@keyframes bounce     { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-18px)} 60%{transform:translateY(-9px)} }
@keyframes wiggle     { 0%,100%{transform:rotate(0)} 25%{transform:rotate(8deg)} 75%{transform:rotate(-8deg)} }
@keyframes float      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes spin       { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes shimmer    { 0%{left:-100%} 100%{left:100%} }

@media (max-width:768px) {
  .turn-indicator { font-size:0.9rem; padding:0.5rem 1rem; }
  .team-score { min-width:150px; }
  .categories-grid { grid-template-columns:repeat(2,1fr); padding:88px 1rem 1rem; }
  .question-card { padding:2rem; }
  .question-text { font-size:1.4rem; }
}
@media (max-width:480px) { .categories-grid { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
button:focus-visible, input:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* ===== BACK TO LOBBY BUTTON ON GAME BOARD ===== */
.game-back-btn {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}

/* ===== QUESTION META — team + points ===== */
.question-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.q-team {
  background: var(--primary-glow);
  border: 1.5px solid var(--primary);
  color: var(--primary-dark);
  padding: 0.45rem 1.2rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.q-points {
  background: var(--indigo-glow);
  border: 1.5px solid var(--indigo);
  color: var(--indigo);
  padding: 0.45rem 1.2rem;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--font-display);
}

/* ===== FIX BUTTON POSITIONS ON GAME BOARD ===== */
#categoriesScreen .game-back-btn {
  position: static;
  transform: none;
  margin-right: auto;
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
}

#categoriesScreen ~ .theme-toggle,
#questionScreen ~ .theme-toggle {
  display: none;
}

.game-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 15;
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 0.75rem 1.5rem;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 1rem;
}