/* ============================================
   Tetris Retro Theme Overrides
   Transforms Game Boy aesthetic → CRT/terminal
   ============================================ */

/* --- Global / Body Overrides --- */
body {
  background: var(--bg-dark, #0a0a0a) !important;
  overflow: hidden !important;
  font-family: 'VT323', 'Press Start 2P', monospace !important;
}
html {
  overflow: hidden !important;
}

/* --- Loader --- */
/* The loader shows briefly before React mounts. Keep it simple. */
.load {
  color: var(--primary-color, #00ff00) !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: 40px auto !important;
}
.load .loader,
.load .loader:before,
.load .loader:after {
  background: var(--primary-color, #00ff00) !important;
}

/* --- Tetris Game Container (site wrapper) --- */
.tetris-game-container {
  max-width: 850px;
  margin: 2rem auto;
  padding: 20px;
  position: relative;
  background: var(--bg-dark, #0a0a0a);
}

/* --- App Shell (._3Lk6) --- */
/* The React app uses position:absolute + negative margin for centering.
   We override to relative positioning so it flows in our container.
   The app's JS sets inline transform:scale() which we allow to work,
   but we override position/margin via !important. */
._3Lk6 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  /* Override the dynamic padding the app's JS adds for vertical centering */
  padding-top: 42px !important;
  padding-bottom: 0 !important;
  background: #1a1a2e !important;
  box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.15) !important;
  border: 1px solid rgba(0, 255, 0, 0.2) !important;
}

/* Override the keyboard's dynamic filling margin */
.J9SA {
  margin-top: 20px !important;
}

/* --- Empty Blocks (grid cells) --- */
._3Lk6 b {
  border-color: #1a2a1a !important;
}
._3Lk6 b:after {
  background: #1a2a1a !important;
}

/* --- Active Blocks (.c class = filled) --- */
._3Lk6 b.c {
  border-color: #00cc00 !important;
}
._3Lk6 b.c:after {
  background: #00ff00 !important;
  box-shadow: 0 0 4px #00ff00, 0 0 1px #00ff00;
}

/* --- Overlap/Ghost Blocks (.d class) --- */
._3Lk6 b.d {
  border-color: #990066 !important;
}
._3Lk6 b.d:after {
  background: #ff00ff !important;
  box-shadow: 0 0 4px #ff00ff;
}

/* --- Rect Frame (._1fjB) --- */
._1fjB {
  border-color: rgba(0, 255, 0, 0.4) !important;
}

/* --- Screen Border (._2iZA) --- */
._2iZA {
  border-color: #00aa00 #00ff44 #00ff44 #00aa00 !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

/* --- Screen Panel (._2lJh) --- */
._2lJh {
  background: #0d1117 !important;
  border-color: #00aa00 !important;
}

/* --- Logo / Title (._2OLA h1) --- */
._2OLA h1 {
  font-family: 'Press Start 2P', monospace !important;
  color: var(--primary-color, #00ff00) !important;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.7), 0 0 20px rgba(0, 255, 0, 0.3) !important;
  font-size: 20px !important;
  letter-spacing: 2px;
}

/* --- Hide CDN logo background image --- */
.bg {
  background-image: none !important;
}

/* --- Decorative dots (._2OLA .DOXx span) --- */
._2OLA .DOXx span {
  background: var(--primary-color, #00ff00) !important;
  box-shadow: 0 0 3px rgba(0, 255, 0, 0.5);
}

/* --- State Info Panel (._1deS) - score, lines, level --- */
._1deS {
  color: var(--primary-color, #00ff00) !important;
  font-family: 'VT323', monospace !important;
}

._1deS p {
  color: var(--tertiary-color, #00ffff) !important;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

/* --- Number Display (._3Wmt, .iHKP) --- */
/* Number sprites use a background image from the CDN .bg class.
   Override to use green-tinted colors */
.iHKP span {
  filter: hue-rotate(90deg) brightness(1.5) !important;
}

/* --- Hide decorative side block columns --- */
/* These are positioned at left:-70px and right:-70px, overflowing the frame */
._2OLA .nVeA {
  display: none !important;
}

/* --- Point Display (._6pVK) --- */
._6pVK {
  border-color: rgba(0, 255, 0, 0.4) !important;
}

/* --- Matrix Container (._6pVK p) --- */
._6pVK p {
  /* Inherits block styling */
}

/* --- Pause Indicator (.EHci) --- */
.EHci {
  filter: hue-rotate(90deg) brightness(1.5) !important;
}

/* --- Music Indicator (._37mu) --- */
._37mu {
  filter: hue-rotate(90deg) brightness(1.5) !important;
}

/* --- Guide / Instructions Modal (._20Jp) --- */
._20Jp {
  color: var(--primary-color, #00ff00) !important;
}

._20Jp p {
  color: var(--primary-color, #00ff00) !important;
  font-family: 'VT323', monospace !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
  letter-spacing: 2px !important;
}

/* Guide decorate pieces */
._20Jp .AFTs {
  filter: hue-rotate(90deg) brightness(1.2) !important;
}

/* --- Keyboard / On-Screen Buttons --- */

/* D-pad and action buttons - base (._1pg0 i) */
._1pg0 {
  color: var(--primary-color, #00ff00) !important;
}

/* Blue buttons → dark with green glow (._23pZ) */
._1pg0._23pZ i {
  background: #1a3a1a !important;
  background: linear-gradient(to bottom, #1a4a1a, #0d2a0d) !important;
  border-color: #00aa00 !important;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 255, 0, 0.3) !important;
}

._1pg0._23pZ i:after {
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.6) !important;
}

._1pg0._23pZ i:before {
  box-shadow: inset 0 5px 10px rgba(0, 255, 0, 0.15) !important;
}

/* Pressed state */
._1pg0._23pZ i._23aw {
  background: #0d2a0d !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 255, 0, 0.2) !important;
}

/* Green buttons → dark with cyan glow (.RBZg) */
._1pg0.RBZg i {
  background: #1a2a3a !important;
  background: linear-gradient(to bottom, #1a3a4a, #0d1a2a) !important;
  border-color: #00aaaa !important;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(0, 255, 255, 0.3) !important;
}

._1pg0.RBZg i:after {
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.6) !important;
}

._1pg0.RBZg i:before {
  box-shadow: inset 0 5px 10px rgba(0, 255, 255, 0.15) !important;
}

/* Red button → dark with magenta glow (._3kg_) */
._1pg0._3kg_ i {
  background: #2a1a2a !important;
  background: linear-gradient(to bottom, #3a1a3a, #1a0d1a) !important;
  border-color: #aa00aa !important;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3), 0 0 8px rgba(255, 0, 255, 0.3) !important;
}

._1pg0._3kg_ i:after {
  box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.6) !important;
}

._1pg0._3kg_ i:before {
  box-shadow: inset 0 5px 10px rgba(255, 0, 255, 0.15) !important;
}

/* Button label text */
._1pg0 span {
  color: var(--primary-color, #00ff00) !important;
}

/* Arrow inside drop button */
._1pg0._2TvZ em {
  border-color: transparent transparent #00ff00 !important;
}

/* --- Side Panels / Links (._2iIk) --- */
._2iIk {
  display: none !important;
}

/* --- Keyboard Section (J9SA) --- */
.J9SA {
  /* Keep the keyboard visible for touch controls */
}

/* --- #root container sizing --- */
#root {
  width: 100%;
  position: relative;
  overflow: visible;
}

/* The app shell already has its own border/frame via the retro theme.
   No extra wrapper border needed. */

/* --- Responsive Scaling --- */
@media only screen and (max-width: 768px) {
  .tetris-game-container {
    padding: 10px;
    margin: 1rem auto;
    border-radius: 5px;
  }
}

@media only screen and (max-width: 480px) {
  .tetris-game-container {
    padding: 5px;
    margin: 0.5rem auto;
    border-width: 1px;
  }
}

/* --- Drop Animation Retheme --- */
._1fjB._3YUe {
  transform: translateY(5px);
}

/* --- Ensure game screen doesn't clip --- */
.tetris-game-container .game-screen {
  overflow: visible;
}