/* public/css/emo-theme.css */
/* Estilos Persona 5 / Emo Mode */

body[data-mode="emo"] {
  background-color: #0f0f0f !important; /* Very dark background */
  color: #ffffff;
}

/* Halftone overlay pattern for the body background */
body[data-mode="emo"]::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(#1e1e1e 20%, transparent 20%);
  background-size: 8px 8px;
  opacity: 0.8;
  z-index: -1;
  pointer-events: none;
}

/* Red accents */
body[data-mode="emo"] .tv-screen {
  box-shadow: inset 0 0 50px rgba(220, 38, 38, 0.4); /* Red glow */
}

/* Lobby background adjustment */
body[data-mode="emo"] #lobby-screen {
  background: none;
}

body[data-mode="emo"] .lobby-bg-img {
  background: url('../assets/lobby_bg_emo.webp?v=3') center/cover no-repeat !important;
  opacity: 0.9 !important;
}

body[data-mode="emo"] #lobby-screen .video-bg {
  display: none !important;
}

/* Lobby UI Emo Override */
body[data-mode="emo"] .lobby-particles > div {
  width: 32px !important;
  height: 32px !important;
  background-image: url('../assets/particle_feather.webp?v=3') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-mode="emo"] .lobby-qr-frame {
  background-image: url('../assets/qr_frame_emo.webp?v=4') !important;
  background-size: 100% 100% !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border: none !important;
  box-shadow: none !important;
}

body[data-mode="emo"] .lobby-qr-glow {
  display: none !important;
}

body[data-mode="emo"] .lobby-badge {
  background: linear-gradient(135deg, #7f1d1d, #450a0a) !important;
  border-color: #991b1b !important;
  box-shadow: 0 0 20px rgba(127,29,29,0.5) !important;
}

body[data-mode="emo"] .code-letter {
  background: rgba(15,23,42,0.9) !important;
  color: #f87171 !important;
  border-color: #7f1d1d !important;
  box-shadow: 0 0 15px rgba(127,29,29,0.5), inset 0 0 10px rgba(0,0,0,0.5) !important;
  text-shadow: 0 0 10px #f87171 !important;
}

body[data-mode="emo"] .player-card {
  background: #0f172a !important;
  border-color: #7f1d1d !important;
  color: #fff !important;
}

body[data-mode="emo"] .player-card .opacity-80 {
  color: #ef4444 !important;
}

/* Roulette Emo Override */
body[data-mode="emo"] #roulette-screen::before {
  filter: grayscale(100%) sepia(1) hue-rotate(-50deg) brightness(0.4) contrast(1.5);
}

body[data-mode="emo"] #roulette-screen .roulette-deco {
  display: none; /* Hide happy stars */
}

body[data-mode="emo"] #roulette-pointer {
  filter: hue-rotate(150deg) brightness(0.5); /* Make tomato pointer darker/purple */
}

body[data-mode="emo"] .p-2.rounded-full[style*="background:#0f172a"] {
  border-color: #7f1d1d !important;
  box-shadow: 0 0 30px #450a0a !important;
}

/* Tio Axolo Cut-in styling (Persona 5 style) */
body[data-mode="emo"] #axolo-cutin-bar {
  background-color: #dc2626 !important;
  box-shadow: -10px 10px 0px rgba(0,0,0,0.8), 0 0 20px rgba(220,38,38,0.5);
  border: 4px solid #fff;
}
body[data-mode="emo"] #axolo-cutin-bar:not(.active):not(.slide-out) {
  transform: translateX(-110%) skewX(-20deg) scaleY(1.1) !important;
}
body[data-mode="emo"] #axolo-cutin-bar.active {
  transform: translateX(0) skewX(-20deg) scaleY(1.1) !important;
}
body[data-mode="emo"] #axolo-cutin-bar.slide-out {
  transform: translateX(110%) skewX(-20deg) scaleY(1.1) !important;
}

body[data-mode="emo"] #axolo-cutin-portrait-wrap,
body[data-mode="emo"] #axolo-cutin-textbox {
  transform: skewX(20deg) scaleY(0.9) !important;
}

body[data-mode="emo"] #axolo-cutin-textbox {
  color: #fff !important;
  text-shadow: 2px 2px 0 #000 !important;
  font-weight: 900;
  letter-spacing: -1px;
}

/* Halftone pattern in the cut-in bar */
body[data-mode="emo"] #axolo-cutin-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(0,0,0,0.5) 15%, transparent 16%);
  background-size: 6px 6px;
  pointer-events: none;
}

/* Roulette styling */
body[data-mode="emo"] #screen-roulette {
  background: #0a0a0a;
}
body[data-mode="emo"] #screen-roulette h1 {
  color: #dc2626;
  text-shadow: 4px 4px 0 #000, -2px -2px 0 #fff;
  transform: rotate(-2deg);
}

/* Player cards in Emo Mode */
body[data-mode="emo"] .player-card {
  border-color: #dc2626 !important;
  box-shadow: 4px 4px 0px #dc2626 !important;
  background: #111;
}

/* Podium styling */
body[data-mode="emo"] #podium-bg-img {
  filter: grayscale(80%) sepia(50%) hue-rotate(-50deg) saturate(2);
}

body[data-mode="emo"] .text-jb-yellow {
  color: #dc2626 !important; /* Force red instead of yellow */
}

body[data-mode="emo"] .text-jb-cyan {
  color: #fff !important; /* Force white instead of cyan */
}

body[data-mode="emo"] .text-jb-magenta {
  color: #7f1d1d !important; /* Dark red */
}

/* Rain effect for Lluvia Dramática */
body[data-mode="emo"] #emo-rain-overlay::before {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  background: transparent;
  background-image: 
    linear-gradient(transparent, rgba(255,255,255,0.2) 2px, transparent 3px),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.2) 1px, transparent 2px);
  background-size: 20px 100px, 100% 100%;
  animation: rainAnim 0.5s linear infinite;
  pointer-events: none;
  z-index: -1;
  opacity: 0.6;
}

@keyframes rainAnim {
  0% { background-position: 0 0; }
  100% { background-position: 15px 100vh; }
}

/* Darken cheerful buttons in Emo Mode */
body[data-mode="emo"] .jackbox-color-cyan,
body[data-mode="emo"] .jackbox-color-magenta,
body[data-mode="emo"] .jackbox-color-yellow,
body[data-mode="emo"] .jackbox-color-orange,
body[data-mode="emo"] .jackbox-button-sticker {
  background: #111827 !important;
  color: #dc2626 !important;
  border-color: #7f1d1d !important;
  box-shadow: 4px 4px 0px #7f1d1d !important;
  text-shadow: none !important;
}