/* ================================================================
   GAMES LAYOUT FIX - 2026-04-17
   Eliminates the huge empty gutters in game pages.
   Loaded LAST so it overrides everything else.
   ================================================================ */

/* ----------------------------------------------------------------
   1)  Let the center fill ALL available horizontal space.
       Previously games-fixes-2026-04-17.css kept max-width:1400px
       but many games only used max-w-md / max-w-xl / max-w-3xl
       inside, which centered the content and created huge empty
       grey bars on the sides.
   ---------------------------------------------------------------- */
.jawlah-game-center {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* was center → caused empty gutters */
  justify-content: flex-start !important;
}

.jawlah-game-container,
#game-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Any internal Tailwind max-w-* cap is relaxed inside the 3-column
   layout, because the center column is already sized properly. */
#game-container .max-w-md,
#game-container .max-w-lg,
#game-container .max-w-xl,
#game-container .max-w-2xl,
#game-container .max-w-3xl,
#game-container .max-w-4xl,
#game-container .max-w-5xl,
#game-container .max-w-6xl,
#game-container .max-w-7xl,
.jawlah-game-container .max-w-md,
.jawlah-game-container .max-w-lg,
.jawlah-game-container .max-w-xl,
.jawlah-game-container .max-w-2xl,
.jawlah-game-container .max-w-3xl,
.jawlah-game-container .max-w-4xl,
.jawlah-game-container .max-w-5xl,
.jawlah-game-container .max-w-6xl,
.jawlah-game-container .max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
}

/* Glass cards inside games: fill width and breathe */
#game-container .glass-card,
#game-container .glass-card-strong,
.jawlah-game-container .glass-card,
.jawlah-game-container .glass-card-strong {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px 0 !important;
  box-sizing: border-box !important;
}

/* ----------------------------------------------------------------
   2)  Games that have their OWN internal "3-column" grid
       (qa-game, trivia, etc. use grid-cols-1 lg:grid-cols-3
        to emulate a chat sidebar).  With Jawlah sidebars that
       is redundant and wastes ~30% horizontal space.  Flatten
       them to a single column inside the Jawlah layout — the
       jawlah sidebars already show chat answers.
   ---------------------------------------------------------------- */
.jawlah-game-container .grid.lg\:grid-cols-3,
#game-container .grid.lg\:grid-cols-3 {
  grid-template-columns: 1fr !important;
}
.jawlah-game-container .lg\:col-span-2,
#game-container .lg\:col-span-2 {
  grid-column: auto !important;
}

/* RE-ENABLED 2026-04-17: Show per-game chat-answers panel again.
   Users reported they couldn't see live answers inside the game page
   (they only showed in the jawlah sidebar which is narrow).
   Now we keep BOTH: the jawlah sidebar (compact) + the main panel
   that appears under the question (wide, easy to read on stream). */
.jawlah-game-container #qa-chat-answers,
.jawlah-game-container #trivia-chat-answers,
.jawlah-game-container #eftekasaat-chat-answers,
.jawlah-game-container #country-chat-answers,
.jawlah-game-container #similar-chat-answers,
.jawlah-game-container #flags-chat-answers,
.jawlah-game-container #capitals-chat-answers,
.jawlah-game-container #brand-chat-answers,
#game-container #qa-chat-answers,
#game-container #trivia-chat-answers,
#game-container #eftekasaat-chat-answers,
#game-container #country-chat-answers,
#game-container #similar-chat-answers,
#game-container #flags-chat-answers,
#game-container #capitals-chat-answers,
#game-container #brand-chat-answers {
  display: block !important;
  margin-top: 16px !important;
  width: 100% !important;
}
/* Make sure the chat-answers panel is nicely spaced and visible */
.jawlah-game-container .chat-answers-panel-v7,
#game-container .chat-answers-panel-v7 {
  margin-top: 14px !important;
  max-height: 420px !important;
  overflow: hidden !important;
}
.jawlah-game-container .chat-answers-body-v7,
#game-container .chat-answers-body-v7 {
  max-height: 340px !important;
  overflow-y: auto !important;
}

/* ----------------------------------------------------------------
   3)  Small empty-state polishing: chat/log/players look better
       when empty (instead of giant centred text).
   ---------------------------------------------------------------- */
.jawlah-empty-state {
  padding: 22px 14px !important;
  color: rgba(255,255,255,0.45) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
.jawlah-empty-state i {
  font-size: 1.8rem !important;
  color: rgba(232,183,48,0.35) !important;
}
.jawlah-empty-hint {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.32) !important;
}

/* ----------------------------------------------------------------
   4)  Live chat / system-log message styles
       (kept tight so the panel fits a lot of messages)
   ---------------------------------------------------------------- */
.jawlah-chat-msg,
.jawlah-log-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 2px 4px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.25;
  animation: jawlahSlideIn 0.25s ease-out;
}
.jawlah-chat-msg:hover,
.jawlah-log-msg:hover {
  background: rgba(255,255,255,0.03);
}
.jawlah-chat-msg.correct { background: rgba(16,185,129,0.08); border-left: 2px solid #10B981; }
.jawlah-chat-msg.wrong   { background: rgba(239,68,68,0.06);  border-left: 2px solid #EF4444; }

.jawlah-chat-avatar,
.jawlah-chat-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
}
.jawlah-chat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.jawlah-chat-name {
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jawlah-chat-text {
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jawlah-log-msg { font-family: 'Menlo','Consolas',monospace; font-size: 0.76rem; }
.jawlah-log-msg i { font-size: 0.8rem; flex-shrink: 0; }
.jawlah-log-info    i { color: #60A5FA; }
.jawlah-log-success i { color: #10B981; }
.jawlah-log-warning i { color: #F59E0B; }
.jawlah-log-error   i { color: #EF4444; }
.jawlah-log-msg span { flex: 1; min-width: 0; color: rgba(255,255,255,0.8); }
.jawlah-log-time {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* Players list polish */
.jawlah-player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 2px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 0.82rem;
  animation: jawlahSlideIn 0.25s ease-out;
}
.jawlah-player-item:hover { background: rgba(255,255,255,0.05); }
.jawlah-player-rank {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(232,183,48,0.12);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}
.jawlah-player-avatar,
.jawlah-player-avatar-fallback {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.jawlah-player-name {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jawlah-player-score {
  font-weight: 800;
  color: var(--gold);
  background: rgba(232,183,48,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.74rem;
  flex-shrink: 0;
}

@keyframes jawlahSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dynamic platform icon wrapper */
.user-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  font-size: inherit;
  vertical-align: middle;
}

/* Scrollbars inside sidebars: thin & themed */
.jawlah-chat-messages::-webkit-scrollbar,
.jawlah-log-messages::-webkit-scrollbar,
.jawlah-players-list::-webkit-scrollbar,
.jawlah-tab-content::-webkit-scrollbar { width: 6px; }
.jawlah-chat-messages::-webkit-scrollbar-track,
.jawlah-log-messages::-webkit-scrollbar-track,
.jawlah-players-list::-webkit-scrollbar-track,
.jawlah-tab-content::-webkit-scrollbar-track { background: transparent; }
.jawlah-chat-messages::-webkit-scrollbar-thumb,
.jawlah-log-messages::-webkit-scrollbar-thumb,
.jawlah-players-list::-webkit-scrollbar-thumb,
.jawlah-tab-content::-webkit-scrollbar-thumb {
  background: rgba(232,183,48,0.18);
  border-radius: 3px;
}
.jawlah-chat-messages::-webkit-scrollbar-thumb:hover,
.jawlah-log-messages::-webkit-scrollbar-thumb:hover,
.jawlah-players-list::-webkit-scrollbar-thumb:hover,
.jawlah-tab-content::-webkit-scrollbar-thumb:hover {
  background: rgba(232,183,48,0.35);
}

/* ----------------------------------------------------------------
   5)  On very small laptops / tablets, hide LEFT sidebar first
       (chat is replicated elsewhere) and keep RIGHT for settings.
   ---------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1100px) {
  .jawlah-sidebar-left { width: 260px !important; min-width: 260px !important; }
  .jawlah-sidebar-right { width: 280px !important; min-width: 280px !important; }
}

/* Mobile: stack everything; let game take full width */
@media (max-width: 768px) {
  .jawlah-game-center {
    padding: 10px !important;
  }
}