:root {
  --bg-yellow: #F5BE38;
  --bg-yellow-dark: #D49B0B;
  --text-dark: #141414;
  --green-btn: #2BAE66;
  --green-btn-shadow: #1E824C;
  --blue-btn: #2980B9;
  --amber-btn: #E67E22;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* Fijación y prevención de teclado virtual móvil conforme a AGENT.md */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  touch-action: none;
  margin: 0;
  padding: 0;
  font-family: 'Space Mono', monospace;
  background-color: var(--bg-yellow);
  color: var(--text-dark);
}

.retro-grid-pattern {
  background-image: radial-gradient(rgba(20, 20, 20, 0.14) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}

/* Chunky 3D Arcade Buttons */
.btn-3d {
  position: relative;
  background-color: var(--green-btn);
  color: #ffffff;
  border: 3px solid #141414;
  border-radius: 8px;
  box-shadow: 0 5px 0 0 #141414;
  transition: all 0.08s ease;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.05em;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-3d:hover { background-color: #32c474; }
.btn-3d:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 #141414;
}
.btn-3d:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.btn-3d-secondary {
  background-color: #ffffff;
  color: #141414;
  box-shadow: 0 5px 0 0 #141414;
}
.btn-3d-secondary:hover { background-color: #f7f7f7; }
.btn-3d-secondary:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 1px 0 0 #141414;
}

.btn-3d-amber {
  background-color: #E67E22;
  color: #ffffff;
  box-shadow: 0 5px 0 0 #141414;
}
.btn-3d-amber:hover { background-color: #f39c12; }

.btn-3d-danger {
  background-color: #ba1a1a;
  color: #ffffff;
  box-shadow: 0 5px 0 0 #141414;
}
.btn-3d-danger:hover { background-color: #d92525; }

/* Inputs Monospace Arcade */
.arcade-input {
  background-color: #FFFFFF;
  border: 3px solid #141414;
  box-shadow: inset 0 3px 0 rgba(0,0,0,0.06), 0 4px 0 #141414;
  color: #141414;
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  outline: none;
  transition: all 0.15s ease;
}
.arcade-input:focus {
  background-color: #FFFDF0;
  border-color: #000000;
}

.card-board {
  background-color: #fce07e;
  border: 4px solid #141414;
  border-radius: 1rem;
  box-shadow: 0 8px 0 #141414;
}

/* Animaciones Retro */
@keyframes spinPencil {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
  100% { transform: rotate(360deg) scale(1); }
}
.animate-spin-pencil {
  animation: spinPencil 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes floatPencilHero {
  0%, 100% { transform: translateY(0px) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(-2deg); }
}
.hero-pencil-anim {
  animation: floatPencilHero 3.5s ease-in-out infinite;
}

@keyframes arcadeModalPop {
  0% { opacity: 0; transform: scale(0.65) translateY(40px); }
  60% { opacity: 1; transform: scale(1.04) translateY(-6px); }
  80% { transform: scale(0.98) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-modal {
  animation: arcadeModalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes trophyGlowPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px #fdcb3f); }
  50% { transform: scale(1.08) rotate(-2deg); filter: drop-shadow(0 0 18px #2bae66); }
}
.animate-trophy-pulse {
  animation: trophyGlowPulse 2.2s ease-in-out infinite;
}

@keyframes screenGlowFlash {
  0% { box-shadow: inset 0 0 0 0 rgba(43, 174, 102, 0); }
  30% { box-shadow: inset 0 0 60px 15px rgba(43, 174, 102, 0.85), inset 0 0 120px 30px rgba(253, 203, 63, 0.5); }
  100% { box-shadow: inset 0 0 0 0 rgba(43, 174, 102, 0); }
}
.screen-glow-active {
  animation: screenGlowFlash 1.6s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(-80px) rotate(0deg); opacity: 1; }
  85% { opacity: 0.95; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}
.confetti-particle {
  position: absolute;
  top: -40px;
  pointer-events: none;
  z-index: 70;
  animation: confettiFall linear infinite;
}

.view-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.view-hidden {
  display: none !important;
  opacity: 0;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1ede8;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #141414;
  border-radius: 3px;
}

/* ========================================================= */
/* LAYOUT RESPONSIVE ADAPTATIVO                              */
/* ========================================================= */
.main-game-layout {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: calc(100vh - 46px);
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.canvas-layout-container {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.side-panel-container {
  width: 350px;
  max-width: 35vw;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 3px solid #141414;
  background: #ffffff;
  box-shadow: -4px 0 0 rgba(0,0,0,0.1);
  z-index: 10;
  overflow: hidden;
}

.side-panel-container > div:first-child {
  flex-shrink: 0 !important;
  height: 40px !important;
}

#chatViewPanel:not(.hidden),
#leaderboardViewPanel:not(.hidden) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  position: relative !important;
}

#chatViewPanel.hidden,
#leaderboardViewPanel.hidden {
  display: none !important;
}

#chatFeedContainer {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

#guessSuccessBanner {
  flex-shrink: 0 !important;
}

#chatForm {
  flex-shrink: 0 !important;
  width: 100% !important;
  position: relative !important;
  bottom: 0 !important;
  z-index: 20 !important;
  margin-top: auto !important;
}

#leaderboardViewPanel > div:first-child,
#leaderboardFooterRules {
  flex-shrink: 0 !important;
}

#player-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

/* Dispositivos Móviles en Vertical (Portrait): Maximizando Lienzo para Adivinador */
@media (max-width: 768px) and (orientation: portrait) {
  .main-game-layout {
    flex-direction: column;
    height: calc(100dvh - 36px);
    min-height: 0;
    overflow: hidden;
  }
  .canvas-layout-container {
    width: 100vw;
    height: 60dvh;
    flex: none;
    min-height: 0;
    overflow: hidden;
  }
  .side-panel-container {
    width: 100vw;
    max-width: 100vw;
    height: auto !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    border-left: none;
    border-top: 3px solid #141414;
    overflow: hidden !important;
  }
  /* Modo alternativo si el pensador decide dibujar en vertical */
  body.pensador-vertical-draw .canvas-layout-container {
    height: 70dvh !important;
  }
  body.pensador-vertical-draw .side-panel-container {
    height: auto !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
  }
}

/* ========================================================= */
/* ESTADO DEL LIENZO DESACTIVADO (CHAT EXPANDIDO 100%)       */
/* ========================================================= */
.main-game-layout.canvas-desactivado {
  flex-direction: column !important;
  height: calc(100vh - 46px) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.main-game-layout.canvas-desactivado #canvasLayoutContainer,
.main-game-layout.canvas-desactivado .canvas-layout-container {
  display: none !important;
}

.main-game-layout.canvas-desactivado #bannerLienzoDesactivado,
.main-game-layout.canvas-desactivado #bannerLienzoDesactivadoPensador {
  flex-shrink: 0 !important;
}

.main-game-layout.canvas-desactivado .side-panel-container {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 0% !important;
  height: auto !important;
  min-height: 0 !important;
  border-left: none !important;
  border-top: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.main-game-layout.canvas-desactivado #chatViewPanel,
.main-game-layout.canvas-desactivado #leaderboardViewPanel {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  height: 100% !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
}

#bannerLienzoDesactivado.hidden,
#bannerLienzoDesactivadoPensador.hidden {
  display: none !important;
  pointer-events: none !important;
}

#overlayPensadorEligiendo.hidden,
#overlayRotateMobile.hidden,
#prepOverlay.hidden,
#modalPista.hidden,
#modalCambioPalabra.hidden,
#celebrationModal.hidden,
#modalGameOver.hidden,
#gameOverPodiumModal.hidden {
  display: none !important;
  pointer-events: none !important;
}

#overlayPensadorEligiendo:not(.hidden),
#prepOverlay:not(.hidden),
#modalPista:not(.hidden),
#modalCambioPalabra:not(.hidden),
#celebrationModal:not(.hidden),
#modalGameOver:not(.hidden),
#gameOverPodiumModal:not(.hidden) {
  display: flex !important;
  z-index: 80 !important;
}

/* Modo Móvil Horizontal a Pantalla Completa para el Pensador */
@media (max-width: 1024px) and (orientation: landscape) {
  body.pensador-fullscreen-active .main-game-layout {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 40 !important;
  }
  body.pensador-fullscreen-active .side-panel-container {
    display: none !important;
  }
  body.pensador-fullscreen-active header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 32px !important;
    padding: 2px 8px !important;
    background: rgba(252, 249, 248, 0.95) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 50 !important;
    border-bottom: 2px solid #141414 !important;
  }
  body.pensador-fullscreen-active .canvas-layout-container {
    width: 100vw !important;
    height: 100vh !important;
  }
  body.pensador-fullscreen-active #pensadorDrawingTools {
    bottom: 6px !important;
    left: 6px !important;
    transform: scale(0.9);
    transform-origin: bottom left;
  }
}

/* ========================================================= */
/* BLINDAJE Y CONTROL DE MODO DE COLOR (AUTO-DARK PROOF)     */
/* ========================================================= */
:root {
  color-scheme: light;
  forced-color-adjust: none;
}

html.dark-theme,
body.dark-theme {
  color-scheme: dark;
  forced-color-adjust: none;
}

/* Blindaje total del canvas contra inversión automática de navegadores móviles */
#mainGameCanvas,
.canvas-layout-container canvas,
canvas {
  color-scheme: only light !important;
  forced-color-adjust: none !important;
  background-color: #FFFFFF !important;
}

svg, img {
  forced-color-adjust: none !important;
}

/* ========================================================= */
/* MODO OSCURO RETRO ARCADE: COLOR SWAP COMPLETO             */
/* Fondo pasa a negro (#141414) y Texto pasa a amarillo     */
/* ========================================================= */
html.dark-theme,
html.dark-theme body,
body.dark-theme {
  background-color: #141414 !important;
  color: #F5BE38 !important;
  --bg-yellow: #141414;
  --text-dark: #F5BE38;
}

html.dark-theme .retro-grid-pattern,
body.dark-theme.retro-grid-pattern {
  background-color: #141414 !important;
  background-image: radial-gradient(rgba(245, 190, 56, 0.15) 1.5px, transparent 1.5px) !important;
}

/* ========================================================= */
/* COLOR SWAP: TEXTO Y TÍTULOS                               */
/* Todo texto negro o derivado pasa al color de fondo (#F5BE38) */
/* ========================================================= */
html.dark-theme .text-game-dark,
html.dark-theme .text-black,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5,
html.dark-theme h6,
html.dark-theme label,
html.dark-theme strong,
html.dark-theme b {
  color: #F5BE38 !important;
}

/* Textos secundarios o con opacidad pasan a un dorado legible */
html.dark-theme [class*="text-black/"],
html.dark-theme .text-black\/75,
html.dark-theme .text-black\/70,
html.dark-theme .text-black\/60,
html.dark-theme .text-black\/80,
html.dark-theme .text-neutral-600,
html.dark-theme .text-neutral-700,
html.dark-theme .text-neutral-800,
html.dark-theme p {
  color: #FDE68A !important;
}

html.dark-theme .text-black\/40,
html.dark-theme .text-black\/50,
html.dark-theme .text-black\/30 {
  color: rgba(245, 190, 56, 0.6) !important;
}

/* Iconos SVG con color de texto negro pasan a amarillo */
html.dark-theme svg.text-black,
html.dark-theme svg.text-game-dark,
html.dark-theme svg.text-neutral-700,
html.dark-theme svg.text-neutral-800 {
  color: #F5BE38 !important;
}

/* ========================================================= */
/* PANTALLA PRINCIPAL (HOME) - SWAP DE TITULARES Y BADGES    */
/* ========================================================= */
html.dark-theme #screen-home .text-game-dark {
  color: #F5BE38 !important;
}

/* Insignia "La" central: invierte fondo amarillo a negro y borde/texto a amarillo */
html.dark-theme #screen-home [class*="bg-[#F5BE38]"],
html.dark-theme #screen-home .bg-\[\#F5BE38\],
html.dark-theme #screen-home .bg-game-yellow {
  background-color: #141414 !important;
  color: #F5BE38 !important;
  border-color: #F5BE38 !important;
  box-shadow: 0 4px 0 #F5BE38 !important;
}

/* Badges / Chips en pantalla de inicio */
html.dark-theme #screen-home .bg-black\/10,
html.dark-theme #screen-home label span.bg-black\/10,
html.dark-theme .bg-black\/10 {
  background-color: rgba(245, 190, 56, 0.15) !important;
  color: #F5BE38 !important;
  border-color: rgba(245, 190, 56, 0.3) !important;
}

/* ========================================================= */
/* INPUTS Y CAMPOS DE TEXTO ARCADE                           */
/* ========================================================= */
html.dark-theme .arcade-input {
  background-color: #1A1A22 !important;
  color: #F5BE38 !important;
  border: 3px solid #F5BE38 !important;
  box-shadow: 3px 3px 0 0 #000000 !important;
}

html.dark-theme .arcade-input::placeholder {
  color: rgba(245, 190, 56, 0.45) !important;
}

html.dark-theme .arcade-input:focus {
  border-color: #FFE066 !important;
  box-shadow: 0 0 0 2px rgba(245, 190, 56, 0.35) !important;
}

/* ========================================================= */
/* TARJETAS, PANELES Y CONTENEDORES (CARD-BOARD)             */
/* ========================================================= */
html.dark-theme .card-board {
  background-color: #18181D !important;
  border-color: #F5BE38 !important;
  box-shadow: 6px 6px 0 #000000 !important;
  color: #F5BE38 !important;
}

html.dark-theme .card-board [class*="border-black"] {
  border-color: rgba(245, 190, 56, 0.25) !important;
}

/* ========================================================= */
/* BOTONES ARCADE                                            */
/* ========================================================= */
html.dark-theme .btn-3d {
  border-color: #000000 !important;
  box-shadow: 0 5px 0 0 #000000 !important;
}

html.dark-theme .btn-3d:active:not(:disabled) {
  box-shadow: 0 1px 0 0 #000000 !important;
}

html.dark-theme .btn-3d-secondary {
  background-color: #1E1E26 !important;
  color: #F5BE38 !important;
  border-color: #F5BE38 !important;
  box-shadow: 0 5px 0 0 #000000 !important;
}

html.dark-theme .btn-3d-secondary:hover {
  background-color: #272733 !important;
  color: #FFE066 !important;
}

html.dark-theme .btn-3d-secondary:active:not(:disabled) {
  box-shadow: 0 1px 0 0 #000000 !important;
}

/* Botones flotantes de cambio de tema */
html.dark-theme #btnFloatingThemeToggle {
  background-color: #1E1E26 !important;
  color: #F5BE38 !important;
  border-color: #F5BE38 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

html.dark-theme #btnToggleThemeHud {
  background-color: #22222A !important;
  color: #E4E4E7 !important;
  border-color: #383844 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

html.dark-theme #btnToggleThemeHud svg,
html.dark-theme #themeToggleIconHud svg {
  color: #E4E4E7 !important;
}

/* Enlaces de retorno y volver */
html.dark-theme button[onclick*="cambiarPantalla"],
html.dark-theme button[onclick*="volver"] {
  color: #F5BE38 !important;
}

html.dark-theme button[onclick*="cambiarPantalla"] svg,
html.dark-theme button[onclick*="volver"] svg {
  color: #F5BE38 !important;
}

/* ========================================================= */
/* PANTALLA CREAR MESA Y OPCIONES DE SALA                    */
/* ========================================================= */
html.dark-theme #activePlayerBadge {
  color: #F5BE38 !important;
}

html.dark-theme #screen-lobby-options .bg-black\/10 {
  background-color: rgba(245, 190, 56, 0.15) !important;
  border-color: rgba(245, 190, 56, 0.3) !important;
}

html.dark-theme #screen-crear-mesa label div.bg-white {
  background-color: #1E1E26 !important;
  border-color: rgba(245, 190, 56, 0.3) !important;
  color: #F5BE38 !important;
}

html.dark-theme #screen-crear-mesa input[type="radio"]:checked + div {
  background-color: #282836 !important;
  border-color: #F5BE38 !important;
  box-shadow: 3px 3px 0 #F5BE38 !important;
}

html.dark-theme #screen-crear-mesa label span {
  color: #F5BE38 !important;
}

html.dark-theme #screen-crear-mesa label p {
  color: #FDE68A !important;
}

/* ========================================================= */
/* SALA DE ESPERA (ROOM WAITING)                             */
/* ========================================================= */
html.dark-theme #waitingRoomNumber {
  color: #F5BE38 !important;
}

html.dark-theme #waitingRoomPin {
  background-color: #F5BE38 !important;
  color: #141414 !important;
  border-color: #F5BE38 !important;
}

html.dark-theme #waitingPlayersList .bg-white {
  background-color: #1E1E26 !important;
  border-color: rgba(245, 190, 56, 0.3) !important;
  box-shadow: 2px 2px 0 #000000 !important;
}

html.dark-theme #waitingPlayersList span.text-black {
  color: #F5BE38 !important;
}

html.dark-theme #waitingPlayersList span.text-black\/50 {
  color: #FDE68A !important;
}

html.dark-theme #wrapperPrimerPensador {
  border-color: rgba(245, 190, 56, 0.3) !important;
}

/* ========================================================= */
/* HUD SUPERIOR DEL JUEGO                                    */
/* ========================================================= */
/* ========================================================= */
/* HUD SUPERIOR DEL JUEGO: ESTILO OSCURO ELEGANTE Y MODERNO */
/* Evita los bordes y textos amarillos chillones en partida  */
/* ========================================================= */
html.dark-theme header {
  background-color: #18181C !important;
  border-color: #2E2E38 !important;
  color: #F4F4F5 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.6) !important;
}

html.dark-theme header .bg-white {
  background-color: #22222A !important;
  color: #E4E4E7 !important;
  border-color: #383844 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme header .text-black,
html.dark-theme header svg.text-black {
  color: #E4E4E7 !important;
}

html.dark-theme #gameHudRoomNumber {
  color: #E4E4E7 !important;
}

html.dark-theme #gameHudRoundBadge {
  background-color: #282832 !important;
  color: #FFFFFF !important;
  border: 1px solid #3F3F4E !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #gameHudRoleBadge {
  background-color: #1E293B !important;
  color: #38BDF8 !important;
  border: 1px solid #0EA5E9 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #gameHudRoleBadge svg {
  color: #38BDF8 !important;
}

html.dark-theme #pensadorHeaderWordArea {
  background-color: #1E1E26 !important;
  border-color: #383844 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #pensadorHeaderWordArea span:first-child {
  color: #94A3B8 !important;
}

html.dark-theme #pensadorHeaderWordArea #hudSecretWord {
  color: #FFFFFF !important;
}

html.dark-theme #btnCambiarPalabraHud {
  background-color: #262630 !important;
  color: #E4E4E7 !important;
  border-color: #444452 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #btnCambiarPalabraHud:hover {
  background-color: #323240 !important;
  color: #FFFFFF !important;
}

html.dark-theme #btnCambiarPalabraHud svg {
  color: #E4E4E7 !important;
}

html.dark-theme #btnDarPistaHud {
  background-color: #059669 !important;
  color: #FFFFFF !important;
  border-color: #047857 !important;
}

html.dark-theme #btnToggleLienzo {
  background-color: #059669 !important;
  color: #FFFFFF !important;
  border-color: #047857 !important;
}

html.dark-theme #adivinadorHeaderHintArea {
  background-color: #1E1E26 !important;
  border-color: #383844 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #adivinadorLetterSlots span {
  color: #FFFFFF !important;
}

html.dark-theme header button:not(#btnDarPistaHud):not(#btnToggleLienzo):not(#btnCambiarPalabraHud) {
  background-color: #22222A !important;
  color: #E4E4E7 !important;
  border-color: #383844 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

html.dark-theme header button svg {
  color: #E4E4E7 !important;
}

/* ========================================================= */
/* BANNERS CON LIENZO DESACTIVADO                            */
/* ========================================================= */
html.dark-theme #bannerLienzoDesactivado {
  background-color: #181820 !important;
  border-color: #2E2E38 !important;
  color: #E4E4E7 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme #bannerLienzoDesactivado span {
  color: #E4E4E7 !important;
}

html.dark-theme #bannerLienzoDesactivado > div:first-child {
  background-color: #242430 !important;
  border-color: #383844 !important;
  color: #10B981 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #bannerLienzoDesactivadoPensador {
  background-color: #181820 !important;
  border-color: #2E2E38 !important;
  color: #E4E4E7 !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4) !important;
}

html.dark-theme #bannerLienzoDesactivadoPensador span {
  color: #E4E4E7 !important;
}

/* ========================================================= */
/* PESTAÑAS DEL PANEL LATERAL: CHAT Y LEADERBOARD            */
/* ========================================================= */
html.dark-theme .side-panel-container {
  background-color: #141416 !important;
  border-color: #2E2E38 !important;
  box-shadow: -4px 0 0 rgba(0, 0, 0, 0.5) !important;
}

html.dark-theme .side-panel-container > div:first-child {
  background-color: #18181D !important;
  border-color: #2E2E38 !important;
}

html.dark-theme #tabBtnChat.bg-white,
html.dark-theme #tabBtnLeaderboard.bg-white {
  background-color: #22222A !important;
  color: #FFFFFF !important;
  border-color: #2E2E38 !important;
}

html.dark-theme #tabBtnChat.bg-white svg,
html.dark-theme #tabBtnLeaderboard.bg-white svg {
  color: #FFFFFF !important;
}

html.dark-theme #tabBtnChat:not(.bg-white),
html.dark-theme #tabBtnLeaderboard:not(.bg-white) {
  background-color: #16161A !important;
  color: #8E8E98 !important;
  border-color: #2E2E38 !important;
}

html.dark-theme #tabBtnChat:not(.bg-white) svg,
html.dark-theme #tabBtnLeaderboard:not(.bg-white) svg {
  color: #8E8E98 !important;
}

html.dark-theme #leaderboardPlayerCount {
  background-color: #282832 !important;
  color: #FFFFFF !important;
}

html.dark-theme #chatFeedContainer {
  background-color: #121215 !important;
  color: #E4E4E7 !important;
}

html.dark-theme #chatFeedContainer .bg-\[\#f4f2f0\] {
  background-color: #1C1C22 !important;
  border-color: #2F2F38 !important;
  color: #E4E4E7 !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

html.dark-theme #chatFeedContainer .bg-\[\#f4f2f0\] strong {
  color: #F4F4F5 !important;
}

html.dark-theme #chatFeedContainer .bg-\[\#f4f2f0\] p {
  color: #D4D4D8 !important;
}

html.dark-theme #chatFeedContainer .bg-\[\#f4f2f0\] span {
  color: #71717A !important;
}

html.dark-theme #chatForm {
  background-color: #18181D !important;
  border-color: #2E2E38 !important;
}

html.dark-theme #chatForm .arcade-input {
  background-color: #202026 !important;
  border-color: #383844 !important;
  color: #FFFFFF !important;
}

html.dark-theme #chatForm .arcade-input::placeholder {
  color: #71717A !important;
}

html.dark-theme #leaderboardFooterRules {
  background-color: #18181D !important;
  border-color: #2E2E38 !important;
  color: #A1A1AA !important;
}

html.dark-theme #player-list .bg-white {
  background-color: #1C1C22 !important;
  border-color: #2F2F38 !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

html.dark-theme #player-list span.text-black {
  color: #F4F4F5 !important;
}

html.dark-theme #player-list svg.text-black {
  color: #E4E4E7 !important;
}

/* Pantalla de Victoria en Modo Oscuro */
html.dark-theme #winnerSpotlightCard {
  background: linear-gradient(to right, #241E10, #2E2514, #241E10) !important;
  border-color: #D97706 !important;
  box-shadow: 2.5px 2.5px 0 #000000 !important;
}

html.dark-theme #winnerSpotlightCard #winnerPlayerName {
  color: #FEF3C7 !important;
}

html.dark-theme #winnerSpotlightCard #winnerScoreValue {
  color: #34D399 !important;
}

html.dark-theme #winnerSpotlightCard [class*="text-amber-800"] {
  color: #FBBF24 !important;
}

/* ========================================================= */
/* BARRA DE HERRAMIENTAS DE DIBUJO                           */
/* ========================================================= */
html.dark-theme #pensadorDrawingTools > div {
  background-color: #18181D !important;
  border-color: #2E2E38 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

html.dark-theme .tool-btn:not(.active) {
  background-color: #1E1E26 !important;
  color: #E4E4E7 !important;
  border-color: #3F3F46 !important;
}

html.dark-theme .size-btn:not(.bg-emerald-600) {
  background-color: #1E1E26 !important;
  color: #E4E4E7 !important;
  border-color: #3F3F46 !important;
}

/* ========================================================= */
/* MODALES Y OVERLAYS                                        */
/* ========================================================= */
html.dark-theme #overlayPensadorEligiendo > div,
html.dark-theme #prepOverlay > div,
html.dark-theme #modalPista > div,
html.dark-theme #modalCambioPalabra > div,
html.dark-theme #celebrationModal > div {
  background-color: #18181D !important;
  border-color: #F5BE38 !important;
  box-shadow: 6px 6px 0 #000000 !important;
  color: #F5BE38 !important;
}

/* Modal Pantalla de Victoria */
html.dark-theme #modalGameOver > div,
html.dark-theme #gameOverPodiumModal > div {
  background-color: #18181D !important;
  border-color: #383844 !important;
  box-shadow: 6px 6px 0 #000000 !important;
  color: #FFFFFF !important;
}

html.dark-theme #modalGameOver h2,
html.dark-theme #gameOverPodiumModal h2 {
  color: #FFFFFF !important;
}

html.dark-theme #modalGameOver p,
html.dark-theme #gameOverPodiumModal p {
  color: #A1A1AA !important;
}

html.dark-theme #pistaPreviewText {
  background-color: #141414 !important;
  border-color: #F5BE38 !important;
  color: #F5BE38 !important;
}

html.dark-theme #pistaLetrasSeleccionables button,
html.dark-theme #pistaLetterButtonsContainer button {
  background-color: #1E1E26 !important;
  color: #F5BE38 !important;
  border-color: #F5BE38 !important;
}

html.dark-theme #pistaLetrasSeleccionables button:disabled,
html.dark-theme #pistaLetterButtonsContainer button:disabled {
  background-color: #141414 !important;
  color: #71717A !important;
  border-color: #3F3F46 !important;
}

html.dark-theme #celebrationWordDisplay {
  color: #F5BE38 !important;
}

html.dark-theme #celebrationModal .bg-\[\#ffdf95\] {
  background-color: #141414 !important;
  border-color: #F5BE38 !important;
  color: #F5BE38 !important;
}

html.dark-theme #turnScoringSummaryContainer {
  background-color: #141414 !important;
  border-color: #F5BE38 !important;
  color: #F5BE38 !important;
}

html.dark-theme #podiumList {
  background-color: #141418 !important;
  border-color: #2E2E38 !important;
}

html.dark-theme #podiumList > div {
  background-color: #1C1C22 !important;
  border-color: #2E2E38 !important;
  color: #F4F4F5 !important;
}

html.dark-theme #podiumList span.text-black {
  color: #F4F4F5 !important;
}

/* ========================================================= */
/* BLINDAJE DEL LIENZO: MANTENER FONDO BLANCO Y TRAZOS PUROS */
/* ========================================================= */
html.dark-theme .canvas-layout-container {
  background-color: #0E0E10 !important;
}

html.dark-theme #mainGameCanvas {
  background-color: #FFFFFF !important;
  color-scheme: only light !important;
  forced-color-adjust: none !important;
}