/* ===========================================
   DARK MODE — Lammah Game Pages
   All games use React + inline styles, so we
   MUST use broad selectors + !important
   =========================================== */

/* ---- ROOT VARIABLES (for games that use them) ---- */
html.dark {
  --bg: #1A1612;
  --bg2: #231E19;
  --bg3: #2C2420;
  --card: #231E19;
  --card-bg: #231E19;
  --white: #EDE0DB;
  --black: #EDE0DB;
  --wood: #1A1612;
  --gray: #9C8B6E;
  --gray-l: #7A6B55;
  --shadow: #0A0806;
  --border: #52443D;
  --gold: #F7B648;
  --gold-l: #D4A574;
  --green: #4BCAA0;
  --green-l: #3AA88A;
  --orange: #F5A623;
  --red: #F37272;
  --cyan: #6CA1F8;
  --primary: #D4A574;
  --primary-light: #E8C9A0;
  --team1-color: #4BCAA0;
  --team2-color: #F5A623;
}

/* ---- BODY ---- */
html.dark body {
  background: #1A1612 !important;
  color: #EDE0DB !important;
}

/* ---- BROAD: Override ALL inline background colors ---- */
/* Target any div/section/main with light bg inline styles */
html.dark [style*="background: rgb(245, 236, 215)"],
html.dark [style*="background: rgb(255, 253, 245)"],
html.dark [style*="background: rgb(255, 254, 249)"],
html.dark [style*="background: rgb(255, 255, 255)"],
html.dark [style*="background: rgb(248, 249, 250)"],
html.dark [style*="background: rgb(245, 245, 245)"],
html.dark [style*="background: rgb(232, 220, 200)"],
html.dark [style*="background:#f5ecd7"],
html.dark [style*="background:#fffdf5"],
html.dark [style*="background:#FFFDF5"],
html.dark [style*="background:#fff"],
html.dark [style*="background: #f5ecd7"],
html.dark [style*="background: #fffdf5"] {
  background: #231E19 !important;
}

/* Orange/gold buttons in dark → warm beige (match إجابتي) */
html.dark [style*="background: rgb(245, 158, 11)"] {
  background: #D4A574 !important;
  color: #1A1612 !important;
}

/* ---- HEADER/NAV ---- */
html.dark header,
html.dark [class*="header"],
html.dark nav {
  background: #130F0B !important;
  border-color: #52443D !important;
}

/* ---- TEXT COLOR overrides ---- */
html.dark [style*="color: rgb(45, 27, 0)"],
html.dark [style*="color: rgb(26, 26, 26)"],
html.dark [style*="color:#2d1b00"],
html.dark [style*="color:#2D1B00"],
html.dark [style*="color: rgb(0, 0, 0)"] {
  color: #EDE0DB !important;
}

html.dark [style*="color: rgb(120, 53, 15)"],
html.dark [style*="color: rgb(146, 64, 14)"],
html.dark [style*="color:#78350f"],
html.dark [style*="color:#78350F"] {
  color: #F5D77A !important;
}

html.dark [style*="color: rgb(156, 139, 110)"],
html.dark [style*="color: rgb(124, 107, 79)"] {
  color: #9C8B6E !important;
}

/* ---- BORDERS ---- */
html.dark [style*="border: 2px solid rgb(26, 26, 26)"],
html.dark [style*="border:2px solid #1a1a1a"],
html.dark [style*="border: 2px solid rgb(0, 0, 0)"] {
  border-color: #52443D !important;
}

/* ---- BOX-SHADOWS ---- */
html.dark [style*="box-shadow: rgb(26, 26, 26)"],
html.dark [style*="box-shadow:#1a1a1a"] {
  box-shadow: 3px 3px 0 #0A0806 !important;
}

/* ---- INPUTS ---- */
html.dark input,
html.dark textarea,
html.dark select {
  background: #2C2420 !important;
  color: #EDE0DB !important;
  border-color: #52443D !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #9C8B6E !important;
}

/* ---- BUTTONS ---- */
html.dark button {
  border-color: #52443D !important;
}

/* ---- PILLS/CHIPS: Warm beige-tint for setting buttons only ---- */
html.dark .rounded-xl[tabindex]:not([style*="99, 102, 241"]):not([style*="34, 197, 94"]):not([style*="99,102,241"]):not([style*="34,197,94"]),
html.dark [class*="rounded"][class*="border"][class*="cursor-pointer"]:not([style*="99, 102, 241"]):not([style*="34, 197, 94"]) {
  background: #3D342A !important;
  border-color: #5C4E3E !important;
  color: #D4C4A8 !important;
}

/* React game cards (create room / join room) — exclude privacy buttons */
html.dark .grid button[tabindex]:not([style*="99, 102, 241"]):not([style*="34, 197, 94"]):not([style*="99,102,241"]):not([style*="34,197,94"]),
html.dark .p-5[tabindex] {
  background: #3D342A !important;
  border-color: #5C4E3E !important;
  box-shadow: 3px 3px 0 #0A0806 !important;
}

/* Active/selected state for React pills — match إجابتي */
html.dark [style*="background: rgb(245, 158, 11)"] {
  background: #D4A574 !important;
  border-color: #8B7355 !important;
  color: #1A1612 !important;
}

/* Dark header brown */
html.dark [style*="background: rgb(120, 53, 15)"] {
  background: #3D2A1C !important;
}

/* ---- HOST GAME BUTTONS — preserve original colors ---- */
html.dark [style*="background: rgb(59, 130, 246)"] {
  background: #2563EB !important;
  color: #FFFDF5 !important;
  border-color: #1e40af !important;
}
html.dark [style*="background: rgb(16, 185, 129)"] {
  background: #059669 !important;
  color: #FFFDF5 !important;
  border-color: #047857 !important;
}
html.dark [style*="background: rgb(239, 68, 68)"] {
  background: #dc2626 !important;
  color: #FFFDF5 !important;
  border-color: #b91c1c !important;
}
html.dark [style*="background: rgb(127, 29, 29)"] {
  background: #7f1d1d !important;
  color: #FFFDF5 !important;
  border-color: #991b1b !important;
}

/* ---- PRIVACY BUTTONS (خاصة/عامة) — gold highlight like إجابتي ---- */
/* Selected privacy buttons — use data attribute set by theme-sync.js */
html.dark [data-lammah-privacy="selected"],
html.dark [data-lammah-privacy="selected"].rounded-xl,
html.dark .grid [data-lammah-privacy="selected"] {
  background: #4A3828 !important;
  border-color: #D4A574 !important;
  color: #F5E6C8 !important;
  transition: none !important;
  box-shadow: 3px 3px 0 #0A0806 !important;
}
html.dark [data-lammah-privacy="selected"] * {
  color: #F5E6C8 !important;
}

/* Unselected privacy button — plain dark */
html.dark .grid.grid-cols-2 button[style*="background: rgb(255, 253, 245)"],
html.dark .grid.grid-cols-2 button[style*="#FFFDF5"] {
  background: #3D342A !important;
  border-color: #5C4E3E !important;
  color: #EDE0DB !important;
}

/* ---- CANVAS (background particles) ---- */
/* Hide floating particles in both modes */
canvas.fixed,
canvas[class*="fixed"],
canvas[style*="pointer-events: none"] {
  display: none !important;
}
html.dark canvas {
  opacity: 0.15 !important;
}

/* ---- CLASS-BASED (for non-React pages like ijabati) ---- */
html.dark .card,
html.dark .glass-card,
html.dark .glass {
  background: #231E19 !important;
  border-color: #52443D !important;
  box-shadow: 4px 4px 0 #0A0806 !important;
}

html.dark .room-btn,
html.dark .cat-choice-btn,
html.dark .vote-btn,
html.dark .player-item,
html.dark .leaderboard-item,
html.dark .round-lb-row,
html.dark .score-chip,
html.dark .host-settings,
html.dark .room-code-display {
  background: #231E19 !important;
  border-color: #52443D !important;
  box-shadow: 3px 3px 0 #0A0806 !important;
  color: #EDE0DB !important;
}

/* Beige-tinted pills/buttons — unified warm dark style */
html.dark .setting-opt,
html.dark .cat-pill {
  background: #3D342A !important;
  border: 1.5px solid #5C4E3E !important;
  box-shadow: none !important;
  color: #D4C4A8 !important;
  border-radius: 10px !important;
}

html.dark .setting-opt.active,
html.dark .cat-pill.sel,
html.dark .setting-opt:hover,
html.dark .cat-pill:hover {
  background: #4A3F32 !important;
  border-color: #8B7355 !important;
  color: #F5E6C8 !important;
}

html.dark .room-btn .title,
html.dark .cat-choice-btn .cat-name,
html.dark .player-name,
html.dark .lb-name,
html.dark .round-lb-name,
html.dark .question-text,
html.dark .final-title,
html.dark .timer-text-center,
html.dark .answer-status .msg {
  color: #EDE0DB !important;
}

html.dark .input-field {
  background: #2C2420 !important;
  color: #EDE0DB !important;
  border-color: #52443D !important;
  box-shadow: 3px 3px 0 #0A0806 !important;
}

html.dark .input-field:focus {
  border-color: #D4A574 !important;
  box-shadow: 0 0 0 3px rgba(212,165,116,.3) !important;
}

html.dark .btn-primary {
  background: #F7B648 !important;
  color: #1A1612 !important;
  border-color: #52443D !important;
}

html.dark .btn-gradient {
  background: #D4A574 !important;
  color: #1A1612 !important;
}

html.dark .btn-secondary {
  background: #231E19 !important;
  color: #EDE0DB !important;
  border-color: #52443D !important;
}

html.dark .game-header {
  background: #130F0B !important;
  border-color: #52443D !important;
}

html.dark .game-header .home-btn {
  color: #EDE0DB !important;
  border-color: #52443D !important;
}

html.dark .toast {
  background: #2C2420 !important;
  color: #EDE0DB !important;
  border-color: #52443D !important;
}

/* Badges */
html.dark .lb-badge.deception { background: #62481C !important; }
html.dark .lb-badge.honest { background: #1C4A3A !important; }
html.dark .lb-badge.naive { background: #62481C !important; }
html.dark .lb-badge.fire { background: #4A1C1C !important; }

/* Status cards */
html.dark .answer-status.correct { background: #1C4A3A !important; border-color: #4BCAA0 !important; }
html.dark .answer-status.waiting { background: #4A3D1C !important; border-color: #F7B648 !important; }
html.dark .turn-indicator { background: #1C4A3A !important; }
html.dark .turn-indicator.not-my-turn { background: #3D2A1C !important; }

/* Vote results */
html.dark .vote-btn.correct { background: #1C4A3A !important; border-color: #4BCAA0 !important; }
html.dark .vote-btn.wrong { background: #4A1C1C !important; border-color: #F37272 !important; }
html.dark .vote-btn.selected { background: #3D2A1C !important; border-color: #F7B648 !important; }

/* Timer */
html.dark .timer-bar { background: #2C2420 !important; }

/* Rank circles */
html.dark .rank,
html.dark .round-lb-rank { background: #3D342A !important; color: #EDE0DB !important; }

/* Settings */
html.dark .setting-opt.active { background: #D4A574 !important; color: #1A1612 !important; }
html.dark .cat-pill.sel { background: #D4A574 !important; color: #1A1612 !important; }

/* Player avatar */
html.dark .player-avatar { background: #F7B648 !important; color: #1A1612 !important; }

/* Section/header text */
html.dark .section-title { color: #D4A574 !important; }
html.dark .section-title:after { background: #52443D !important; }
html.dark .header .logo, html.dark .logo { color: #F5D77A !important; }
html.dark .tagline { color: #9C8B6E !important; }

/* Trick reveal */
html.dark .trick-reveal.tricked { background: #4A3D1C !important; }
html.dark .trick-reveal.nobody { background: #1C2A4A !important; }
html.dark .trick-reveal.everyone { background: #3D2A1C !important; }

/* ---- TAILWIND utility classes used by React games ---- */
html.dark .bg-bg { background: #1A1612 !important; }
html.dark .bg-white { background: #231E19 !important; }
html.dark .text-\[\#2D1B00\] { color: #EDE0DB !important; }
html.dark .min-h-screen { background: #1A1612 !important; }

/* ---- ROOM page (purple theme → dark warm) ---- */
html.dark [style*="background: linear-gradient(180deg, rgb(74, 26, 107)"],
html.dark [style*="background: linear-gradient(180deg, #4A1A6B"] {
  background: linear-gradient(180deg, #1A1612 0%, #231E19 50%, #1A1612 100%) !important;
}

/* ---- ROOM PAGE (play/room/) ---- */
html.dark .join-box,
html.dark .game-board,
html.dark .results-screen {
  background: #231E19 !important;
  color: #EDE0DB !important;
}

html.dark .join-title,
html.dark .join-box h2,
html.dark .join-box h3,
html.dark .join-box label {
  color: #F5D77A !important;
}

html.dark .join-box input {
  background: #2C2420 !important;
  color: #EDE0DB !important;
  border-color: #52443D !important;
}

html.dark .join-btn {
  background: #F7B648 !important;
  color: #1A1612 !important;
}

html.dark .team-btn,
html.dark .team-select button {
  background: #2C2420 !important;
  color: #EDE0DB !important;
  border-color: #52443D !important;
}

html.dark .host-info {
  background: #3D342A !important;
  color: #EDE0DB !important;
}

html.dark .player-list .player,
html.dark .score-board .player {
  background: #2C2420 !important;
  color: #EDE0DB !important;
}

html.dark .dot {
  background: rgba(255,255,255,0.1) !important;
}

/* ---- FEUD PAGE ---- */
html.dark .feud-card,
html.dark .feud-board,
html.dark [class*="feud"] {
  border-color: #52443D !important;
}

/* ---- SCROLLBAR ---- */
html.dark ::-webkit-scrollbar-track { background: #1A1612 !important; }
html.dark ::-webkit-scrollbar-thumb { background: #52443D !important; }