/* ==========================================================================
   GEARSHIFT: RETRO TACTILE ARCADE DESIGN SYSTEM
   Berdasarkan DESIGN.md & SMK Otomotif 16-Bit Cab-Sys
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@500;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  --color-mario-sky: #5c94fc;
  --color-mario-red: #e52521;
  --color-mario-red-dark: #be000c;
  --color-coin-yellow: #fcbc0b;
  --color-coin-gold: #ffd700;
  --color-pipe-green: #018a00;
  --color-pipe-green-bright: #52c93a;
  --color-brick-brown: #d06010;
  --color-brick-dark: #7a1a08;
  --color-dark-border: #181824;
  --color-arcade-bg: #0e182a;
  --color-surface-card: #ffffff;
  --color-surface-dim: #f5f2ff;
  --color-surface-cream: #fbf5ea;

  --font-retro: 'Press Start 2P', monospace;
  --font-headline: 'Space Grotesk', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --shadow-retro: 4px 4px 0px #181824;
  --shadow-retro-sm: 2px 2px 0px #181824;
  --shadow-retro-lg: 6px 6px 0px #181824;
  --shadow-retro-xl: 8px 8px 0px #181824;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  color: #ffffff;
  background-color: var(--color-arcade-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100vh;
}

/* Custom Tactile 16-Bit Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #081020;
}
::-webkit-scrollbar-thumb {
  background: #fcbc0b;
  border: 2px solid #000000;
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffd700;
}

/* Typography Helpers */
.font-retro {
  font-family: var(--font-retro);
}
.font-headline {
  font-family: var(--font-headline);
}
.font-mono {
  font-family: var(--font-mono);
}

/* Retro Shadow System */
.retro-border {
  border: 3px solid #181824;
  box-shadow: var(--shadow-retro);
}
.retro-border-sm {
  border: 2px solid #181824;
  box-shadow: var(--shadow-retro-sm);
}
.retro-border-lg {
  border: 4px solid #181824;
  box-shadow: var(--shadow-retro-lg);
}
.retro-border-xl {
  border: 4px solid #181824;
  box-shadow: var(--shadow-retro-xl);
}

/* Buttons Tactile Feedback */
.btn-tactile {
  border: 3px solid #181824;
  box-shadow: var(--shadow-retro);
  font-family: var(--font-mono);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.btn-tactile:hover {
  box-shadow: var(--shadow-retro-lg);
  transform: translate(-1px, -1px);
}
.btn-tactile:active {
  box-shadow: 0px 0px 0px #181824 !important;
  transform: translate(4px, 4px) !important;
}

.btn-primary {
  background-color: var(--color-mario-red);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #ff3330;
}

.btn-secondary {
  background-color: var(--color-coin-yellow);
  color: #181824;
}
.btn-secondary:hover {
  background-color: #ffd043;
}

.btn-tertiary {
  background-color: var(--color-pipe-green);
  color: #ffffff;
}
.btn-tertiary:hover {
  background-color: var(--color-pipe-green-bright);
}

.btn-dark {
  background-color: #181824;
  color: #ffffff;
}
.btn-dark:hover {
  background-color: #2a2a3e;
}

/* Mario Bricks & Tiles */
.mario-brick-pattern {
  background-color: #b93719;
  background-image: 
    linear-gradient(335deg, #7c1a06 23px, transparent 23px),
    linear-gradient(155deg, #e55c39 23px, transparent 23px),
    linear-gradient(335deg, #7c1a06 23px, transparent 23px),
    linear-gradient(155deg, #e55c39 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

.pixel-art-question {
  background-color: #fcbc0b;
  box-shadow: inset -4px -4px 0px 0px #ab7c00, inset 4px 4px 0px 0px #fff29e, 4px 4px 0px #000;
  border: 2px solid #000;
}

.pixel-art-pipe {
  background-color: #018a00;
  box-shadow: inset -4px -4px 0px 0px #014c00, inset 4px 4px 0px 0px #66ea50, 4px 4px 0px #000;
  border: 2px solid #000;
}

/* CRT Scanlines */
.crt-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%),
              radial-gradient(ellipse at center, transparent 65%, rgba(0, 0, 0, 0.6) 100%);
  background-size: 100% 4px, 100% 100%;
}

/* Animations */
@keyframes coin-spin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.2); }
}
.animate-coin {
  animation: coin-spin 1.2s infinite ease-in-out;
}

@keyframes pawn-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px) scale(1.1); }
}
.animate-hop {
  animation: pawn-hop 0.45s ease-in-out infinite;
}

@keyframes dice-shake {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-15deg) scale(1.15); }
  50% { transform: rotate(15deg) scale(1.15); }
  75% { transform: rotate(-8deg) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}
.animate-dice-shake {
  animation: dice-shake 0.3s infinite ease-in-out;
}

/* Checkered Strip */
.checkered-pattern {
  background-image: repeating-linear-gradient(45deg, #181824 0, #181824 10px, #ffffff 10px, #ffffff 20px);
}

/* Modal Backdrops */
.modal-backdrop {
  background-color: rgba(10, 15, 25, 0.75);
  backdrop-filter: blur(4px);
}

/* Active Tile Glow */
.tile-active-highlight {
  position: relative;
}
.tile-active-highlight::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 3px solid #ffd700;
  box-shadow: 0 0 12px #ffd700;
  pointer-events: none;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* Screen View Transition */
.game-view {
  display: none !important;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.25s ease;
}
.game-view.active {
  display: block !important;
  opacity: 1;
  pointer-events: auto !important;
}

/* Full Screen Immersive Monopoly Mode (Hide Global System Bar & Header Bar) */
#view-monopoli {
  display: none !important;
  pointer-events: none !important;
}
#view-monopoli.active {
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:has(#view-monopoli.active),
body.in-monopoli {
  overflow: hidden !important;
}

body:has(#view-monopoli.active) #global-system-bar,
body:has(#view-monopoli.active) #global-nav-header,
body.in-monopoli #global-system-bar,
body.in-monopoli #global-nav-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Mario Polka Dot Background (Stitch Arcade Style) */
.mario-polka-bg {
  background-color: #6090f0;
  background-image: 
    radial-gradient(#ffffff 15%, transparent 16%), 
    radial-gradient(#ffffff 15%, transparent 16%);
  background-size: 60px 60px;
  background-position: 0 0, 30px 30px;
}

/* Mario Brick Pattern */
.mario-brick-pattern {
  background-color: #b93719;
  background-image: linear-gradient(335deg, #7c1a06 23px, transparent 23px),
                    linear-gradient(155deg, #e55c39 23px, transparent 23px),
                    linear-gradient(335deg, #7c1a06 23px, transparent 23px),
                    linear-gradient(155deg, #e55c39 23px, transparent 23px);
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
}

/* Coin Spin Animation */
@keyframes coin-spin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.2); }
}
.animate-coin {
  animation: coin-spin 1.2s infinite ease-in-out;
}

/* Mario Hop / Token Animation */
@keyframes mario-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.animate-hop {
  animation: mario-hop 0.6s infinite ease-in-out;
}

/* Pixel corners */
.pixel-corners {
  box-shadow: 0 -3px 0 0 #000, 0 3px 0 0 #000, -3px 0 0 0 #000, 3px 0 0 0 #000;
}

/* Pixel Brick */
.pixel-brick {
  background-color: #d06010;
  background-image: 
    linear-gradient(to right, #000000 2px, transparent 2px),
    linear-gradient(to bottom, #000000 2px, transparent 2px);
  background-size: 16px 16px;
}

/* Mario Cloud */
.mario-cloud {
  background: radial-gradient(circle, #ffffff 65%, #c5e3f6 100%);
}

/* ==========================================================================
   STITCH RETRO WORKSHOP TEXTURES & TILE PATTERNS
   ========================================================================== */
.workshop-wall-bg {
  background-color: #2b0b08;
  background-image: 
    linear-gradient(335deg, #160403 12px, transparent 12px),
    linear-gradient(155deg, #42120e 12px, transparent 12px),
    linear-gradient(335deg, #160403 12px, transparent 12px),
    linear-gradient(155deg, #42120e 12px, transparent 12px);
  background-size: 24px 24px;
  background-position: 0px 2px, 3px 14px, 12px 14px, 14px 2px;
}

.treadplate-pattern {
  background-color: #0f1624;
  background-image: 
    linear-gradient(135deg, #243047 25%, transparent 25%), 
    linear-gradient(225deg, #243047 25%, transparent 25%), 
    linear-gradient(45deg, #243047 25%, transparent 25%), 
    linear-gradient(315deg, #243047 25%, #0f1624 25%);
  background-position: 8px 0, 8px 0, 0 0, 0 0;
  background-size: 16px 16px;
}

.pegboard-bg {
  background-color: #111a2c;
  background-image: radial-gradient(#050912 25%, transparent 26%), radial-gradient(#25334e 16%, transparent 22%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

.hazard-stripes-sm {
  background: repeating-linear-gradient(
    -45deg,
    #f59e0b,
    #f59e0b 8px,
    #111827 8px,
    #111827 16px
  );
}

.hazard-danger-sm {
  background: repeating-linear-gradient(
    -45deg,
    #ef4444,
    #ef4444 8px,
    #18080a 8px,
    #18080a 16px
  );
}

.pattern-diamond {
  background-color: #0d1b30;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%), 
                    linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

.pattern-circuit {
  background-color: #1f1028;
  background-image: radial-gradient(rgba(192, 132, 252, 0.25) 1px, transparent 1px), radial-gradient(rgba(192, 132, 252, 0.15) 1px, rgba(20, 7, 28, 0.8) 1px);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}

.pattern-mesh {
  background-color: #072517;
  background-image: repeating-linear-gradient(0deg, rgba(74, 222, 128, 0.12), rgba(74, 222, 128, 0.12) 1px, transparent 1px, transparent 4px),
                    repeating-linear-gradient(90deg, rgba(74, 222, 128, 0.12), rgba(74, 222, 128, 0.12) 1px, transparent 1px, transparent 4px);
}

.pattern-brick-sm {
  background-color: #3b110e;
  background-image: linear-gradient(335deg, rgba(0,0,0,0.4) 6px, transparent 6px),
                    linear-gradient(155deg, rgba(239,68,68,0.2) 6px, transparent 6px);
  background-size: 12px 12px;
}

.pattern-spark {
  background-color: #2b1809;
  background-image: repeating-linear-gradient(60deg, rgba(251, 191, 36, 0.15) 0, rgba(251, 191, 36, 0.15) 2px, transparent 2px, transparent 8px);
}

.pattern-oil-grid {
  background-color: #17102e;
  background-image: linear-gradient(rgba(168, 85, 247, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(168, 85, 247, 0.18) 1px, transparent 1px);
  background-size: 8px 8px;
}

.pattern-rust {
  background-color: #291408;
  background-image: repeating-linear-gradient(45deg, rgba(249, 115, 22, 0.15), rgba(249, 115, 22, 0.15) 3px, rgba(124, 45, 18, 0.3) 3px, rgba(124, 45, 18, 0.3) 6px);
}

.pattern-hazard-tile {
  background: repeating-linear-gradient(-45deg, rgba(239,68,68,0.3) 0, rgba(239,68,68,0.3) 5px, rgba(20,5,8,0.9) 5px, rgba(20,5,8,0.9) 10px);
}

.pattern-start-flag {
  background-color: #072911;
  background-image: linear-gradient(45deg, #0f5125 25%, transparent 25%), linear-gradient(-45deg, #0f5125 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0f5125 75%), linear-gradient(-45deg, transparent 75%, #0f5125 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
}

.crt-scanlines {
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.35) 50%);
  background-size: 100% 4px;
}

.arcade-bezel {
  box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.3), inset -2px -2px 0 0 rgba(0,0,0,0.85), 3px 3px 0 0 #000;
}

.arcade-tile-card {
  box-shadow: inset 1.5px 1.5px 0 0 rgba(255,255,255,0.28), inset -1.5px -1.5px 0 0 rgba(0,0,0,0.8), 2px 2px 0 0 #000;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, filter 0.15s ease;
  will-change: transform, box-shadow;
}
.arcade-tile-card:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.15);
  box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.4), inset -2px -2px 0 0 rgba(0,0,0,0.9), 0 0 14px rgba(255, 215, 0, 0.6), 3px 3px 0 0 #000;
  z-index: 25 !important;
}
.arcade-tile-card:active {
  transform: translateY(1px) scale(0.98);
  filter: brightness(0.95);
}

@keyframes tilePulseGlow {
  0%, 100% {
    box-shadow: inset 1.5px 1.5px 0 0 rgba(255,255,255,0.3), inset -1.5px -1.5px 0 0 rgba(0,0,0,0.8), 0 0 10px #ffd700, 0 0 18px rgba(255, 215, 0, 0.5);
    border-color: #ffd700;
  }
  50% {
    box-shadow: inset 2px 2px 0 0 rgba(255,255,255,0.6), inset -2px -2px 0 0 rgba(0,0,0,0.9), 0 0 20px #ffd700, 0 0 35px rgba(255, 215, 0, 0.85);
    border-color: #ffffff;
  }
}

.tile-active-pulse {
  animation: tilePulseGlow 1.6s ease-in-out infinite;
  z-index: 20 !important;
}

@keyframes hazardStripesScroll {
  0% { background-position: 0 0; }
  100% { background-position: 28px 0; }
}

.animate-stripes-slow {
  animation: hazardStripesScroll 2s linear infinite;
}

/* MARIO DRIFTING CLOUDS & BIRDS ANIMATIONS */
@keyframes marioCloudDrift1 { 0% { transform: translateX(-240px); } 100% { transform: translateX(calc(100vw + 240px)); } }
@keyframes marioCloudDrift2 { 0% { transform: translateX(-320px); } 100% { transform: translateX(calc(100vw + 320px)); } }
@keyframes marioCloudDrift3 { 0% { transform: translateX(-200px); } 100% { transform: translateX(calc(100vw + 200px)); } }
@keyframes marioCloudDrift4 { 0% { transform: translateX(-380px); } 100% { transform: translateX(calc(100vw + 380px)); } }
@keyframes marioCloudDrift5 { 0% { transform: translateX(-260px); } 100% { transform: translateX(calc(100vw + 260px)); } }
@keyframes marioCloudDrift6 { 0% { transform: translateX(-180px); } 100% { transform: translateX(calc(100vw + 180px)); } }
@keyframes marioCloudDriftSlow { 0% { transform: translateX(-300px); } 100% { transform: translateX(calc(100vw + 300px)); } }

.mario-drift-1 { animation: marioCloudDrift1 24s linear infinite; }
.mario-drift-2 { animation: marioCloudDrift2 36s linear infinite; animation-delay: -17s; }
.mario-drift-3 { animation: marioCloudDrift3 28s linear infinite; animation-delay: -9s; }
.mario-drift-4 { animation: marioCloudDrift4 48s linear infinite; animation-delay: -25s; }
.mario-drift-5 { animation: marioCloudDrift5 32s linear infinite; animation-delay: -14s; }
.mario-drift-6 { animation: marioCloudDrift6 42s linear infinite; animation-delay: -31s; }
.mario-drift-7 { animation: marioCloudDrift1 26s linear infinite; animation-delay: -12s; }
.mario-drift-8 { animation: marioCloudDrift3 37s linear infinite; animation-delay: -20s; }
.mario-drift-9 { animation: marioCloudDrift5 30s linear infinite; animation-delay: -6s; }
.mario-drift-10 { animation: marioCloudDrift4 45s linear infinite; animation-delay: -38s; }
.mario-drift-11 { animation: marioCloudDrift2 34s linear infinite; animation-delay: -5s; }
.mario-drift-12 { animation: marioCloudDrift6 40s linear infinite; animation-delay: -22s; }
.mario-drift-13 { animation: marioCloudDriftSlow 52s linear infinite; animation-delay: -18s; }
.mario-drift-14 { animation: marioCloudDrift1 27s linear infinite; animation-delay: -19s; }
.mario-drift-15 { animation: marioCloudDrift3 33s linear infinite; animation-delay: -2s; }

@keyframes birdFlight1 {
  0% { transform: translate(-50px, 10px); }
  50% { transform: translate(calc(50vw), -15px); }
  100% { transform: translate(calc(100vw + 50px), 15px); }
}
@keyframes birdFlight2 {
  0% { transform: translate(-80px, 30px); }
  50% { transform: translate(calc(45vw), 5px); }
  100% { transform: translate(calc(100vw + 60px), 25px); }
}
@keyframes flapWing {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(-0.6); }
}
.animate-bird-flight-1 { animation: birdFlight1 16s linear infinite; }
.animate-bird-flight-2 { animation: birdFlight2 19s linear infinite; animation-delay: -6s; }
.animate-wing { animation: flapWing 0.35s ease-in-out infinite; }

@keyframes roll-dice {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(90deg) scale(1.15); }
  50% { transform: rotate(180deg) scale(0.85); }
  75% { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.dice-rolling {
  animation: roll-dice 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================================== */
/* MONOPOLY VIEWPORT FIT (GUARANTEES 1-SCREEN ZERO-SCROLL FIT WITHOUT CUT-OFF) */
/* ========================================================================== */
#view-monopoli {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

#view-monopoli main {
  height: calc(100vh - 48px) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: hidden !important;
}

/* Responsive scaling for laptops & standard monitors (height <= 860px) */
@media (max-height: 860px) {
  #view-monopoli main {
    height: calc(100vh - 44px) !important;
    max-height: calc(100vh - 44px) !important;
    padding: 4px 6px !important;
  }
  #view-monopoli .arcade-tile-card {
    padding: 2px !important;
  }
  #view-monopoli .arcade-tile-card .w-9,
  #view-monopoli .arcade-tile-card .w-8 {
    width: 1.75rem !important;
    height: 1.4rem !important;
  }
  #view-monopoli .arcade-tile-card span,
  #view-monopoli .arcade-tile-card div {
    line-height: 1.15 !important;
  }
}

/* Compact scaling for 720p/768p displays (height <= 768px) */
@media (max-height: 768px) {
  #view-monopoli header {
    height: 40px !important;
    min-height: 40px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  #view-monopoli main {
    height: calc(100vh - 40px) !important;
    max-height: calc(100vh - 40px) !important;
    padding: 2px 4px !important;
  }
  #view-monopoli .arcade-tile-card {
    padding: 1px !important;
  }
  #view-monopoli .arcade-tile-card .w-9,
  #view-monopoli .arcade-tile-card .w-8 {
    width: 1.5rem !important;
    height: 1.25rem !important;
  }
  #view-monopoli #mini-log,
  #view-monopoli #board-combat-log {
    max-height: 65px !important;
  }
}

/* ==========================================================================
   PRINT STYLES: HANYA CETAK REKAPITULASI LKPD SISWA (GAMBAR 2)
   ========================================================================== */
@media print {
  nav,
  header,
  #view-splash,
  #view-modul,
  #view-login,
  #view-monopoli,
  #view-bank,
  .no-print,
  #guru-bank-soal-section,
  #guru-reset-feedback,
  #modal-auth-guru,
  #modal-victory,
  button {
    display: none !important;
  }

  body {
    background: #ffffff !important;
    color: #000000 !important;
  }

  #view-guru {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
  }

  #view-guru .max-w-6xl {
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  #guru-rekap-table {
    border-collapse: collapse !important;
    width: 100% !important;
  }

  #guru-rekap-table th,
  #guru-rekap-table td {
    border: 1px solid #000000 !important;
    color: #000000 !important;
  }
}

/* ==========================================================================
   VIEW MODUL IPAS: WARNA FONT SANGAT TEGAS, KONTRAS TINGGI & MUDAH DIBACA
   ========================================================================== */
#view-modul {
  color: #0f172a;
}

#view-modul section,
#view-modul article,
#view-modul .theory-section {
  color: #0f172a;
}

/* Semua kartu materi berlatar terang wajib memiliki teks gelap tegas */
#view-modul .bg-white,
#view-modul .bg-gray-50,
#view-modul .bg-gray-100,
#view-modul .bg-red-50,
#view-modul .bg-red-100,
#view-modul .bg-green-50,
#view-modul .bg-green-100,
#view-modul .bg-yellow-50,
#view-modul .bg-yellow-100,
#view-modul .bg-blue-50,
#view-modul .bg-blue-100,
#view-modul .bg-cyan-50,
#view-modul .bg-cyan-100,
#view-modul .bg-[#f0f4ff],
#view-modul .bg-[#e6fbf0],
#view-modul .bg-[#fff9e6] {
  color: #0f172a;
}

#view-modul .bg-gray-50,
#view-modul .bg-red-50,
#view-modul .bg-green-50,
#view-modul .bg-yellow-50,
#view-modul .bg-blue-50 {
  color: #0f172a !important;
}

#view-modul .bg-gray-50 *,
#view-modul .bg-red-50 *,
#view-modul .bg-green-50 *,
#view-modul .bg-yellow-50 *,
#view-modul .bg-blue-50 * {
  color: #0f172a;
}

#view-modul strong,
#view-modul b {
  color: #000000 !important;
  font-weight: 700 !important;
}

#view-modul table {
  color: #0f172a !important;
}

#view-modul table tbody tr,
#view-modul table tbody td {
  color: #0f172a !important;
}

/* Pengecualian: elemen yang memang berlatar gelap */
#view-modul .bg-black,
#view-modul .bg-black *,
#view-modul [class*="bg-black"],
#view-modul [class*="bg-black"] *,
#view-modul .bg-[#111625],
#view-modul .bg-[#111625] *,
#view-modul .bg-[#181824],
#view-modul .bg-[#181824] *,
#view-modul .bg-gray-800,
#view-modul .bg-gray-800 *,
#view-modul .bg-gray-900,
#view-modul .bg-gray-900 *,
#view-modul .bg-[#e52521],
#view-modul .bg-[#be000c],
#view-modul .bg-[#018a00],
#view-modul .bg-blue-600,
#view-modul .bg-[#0284c7],
#view-modul .bg-[#0369a1],
#view-modul .pixel-art-brick,
#view-modul .pixel-art-pipe {
  color: #ffffff !important;
}

#view-modul .bg-black .text-yellow-300,
#view-modul .bg-black .text-yellow-400,
#view-modul .bg-black .text-[#ffd700] {
  color: #ffd700 !important;
}

#view-modul .bg-[#111625] .text-yellow-200,
#view-modul .bg-[#111625] .text-yellow-300,
#view-modul .bg-[#111625] .text-[#ffd700] {
  color: #ffd700 !important;
}

#view-modul .bg-[#111625] .text-green-200 {
  color: #86efac !important;
}

#view-modul .bg-[#fcbc0b],
#view-modul .bg-[#fcbc0b] * {
  color: #000000 !important;
}

/* Penegasan kontras tinggi untuk Evaluasi Cepat Fasa Zat (Gambar 2) & Alur Detektif (Gambar 3) */
#view-modul .bg-[#1a2538],
#view-modul .bg-[#1a2538] *,
#view-modul button.bg-[#1a2538],
#view-modul button.bg-[#1a2538] * {
  color: #ffffff !important;
}

#view-modul button.bg-[#1a2538] .text-yellow-400 {
  color: #facc15 !important;
}

#view-modul .bg-gray-800,
#view-modul .bg-gray-800 *,
#view-modul .bg-gray-800 p,
#view-modul .bg-gray-800 span {
  color: #ffffff !important;
}

#view-modul .bg-gray-800 .text-yellow-300 {
  color: #fde047 !important;
}