body {
  margin: 0;
  padding: 0;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: 'Cairo', 'Press Start 2P', sans-serif;
  overflow: hidden;
}

#gameContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Inner Game Viewport: Aligns strictly with the picture bounds, avoiding black letterbox bars */
#gameView {
  position: relative;
  width: min(100vw, calc(100vh * 4 / 3));
  height: min(100vh, calc(100vw * 3 / 4));
  max-width: 640px;
  max-height: 480px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 0 4px #444;
  border-radius: 6px;
  overflow: hidden;
  background-color: #87CEEB;
}

#gameContainer:fullscreen,
#gameContainer:-webkit-full-screen,
#gameContainer.is-fullscreen-fallback {
  width: 100vw !important;
  height: 100vh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Fallback landscape rotation for mobile browsers without orientation lock API */
@media screen and (max-width: 900px) and (orientation: portrait) {
  #gameContainer:fullscreen,
  #gameContainer:-webkit-full-screen,
  #gameContainer.is-fullscreen-fallback {
    transform: rotate(90deg);
    transform-origin: center center;
    width: 100vh !important;
    height: 100vw !important;
    position: fixed;
    top: 0;
    left: 0;
  }
}

#gameContainer:fullscreen #gameView,
#gameContainer:-webkit-full-screen #gameView,
#gameContainer.is-fullscreen-fallback #gameView {
  width: min(100vw, calc(100vh * 4 / 3)) !important;
  height: min(100vh, calc(100vw * 3 / 4)) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background-color: #87CEEB;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: none;
}

.ui-panel {
  position: absolute;
  top: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-shadow: 2px 2px 0px #000;
  user-select: none;
  z-index: 5;
}

#scoreBoard { left: 15px; }
#score { font-size: 24px; font-weight: bold; }
#statsBoard { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 11px; }

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.5);
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  width: fit-content;
}

/* Target board positioned a little lower */
#targetBoard { 
  left: 50%; 
  transform: translateX(-50%); 
  top: 22px; 
  text-align: center; 
}

/* Hearts at the top center of the screen */
#heartsBoard { 
  left: 50%; 
  transform: translateX(-50%); 
  top: 12px; 
  text-align: center; 
  font-size: 16px; 
  opacity: 0.85;
  filter: drop-shadow(1px 1px 0px #000); 
}

#hearts img {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin: 0 2px;
  transition: width 0.2s, height 0.2s;
}

#targetRule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent !important;
  padding: 8px 16px;
  border: none !important;
  border-radius: 6px;
  font-size: 22px;
  font-weight: bold;
  box-shadow: none !important;
  direction: ltr;
}

html[lang="ar"] #targetRule { direction: rtl; }
#targetText { color: #ff5555; font-size: 30px; text-shadow: 1px 1px 0px #000; }

@keyframes singlePopBlink {
  0% { transform: scale(1); background: transparent !important; }
  50% { transform: scale(1.25); color: #ffffff; text-shadow: 0 0 15px #ffff00, 0 0 25px #ffaa00; background: transparent !important; box-shadow: none !important; }
  100% { transform: scale(1); background: transparent !important; }
}

.target-flash {
  animation: singlePopBlink 0.35s ease-out;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Top Right Controls Container */
#topRightControls {
  position: absolute;
  top: 12px;
  right: 9px;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  z-index: 30 !important;
}

.sound-btn, #fullScreenBtn {
  position: static !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 2px solid #fff;
  font-family: inherit;
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  white-space: nowrap;
  margin: 0 !important;
}

/* Language button moved to the bottom-right corner */
.lang-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  border: 2px solid #fff;
  font-family: inherit;
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  z-index: 30 !important;
  white-space: nowrap;
}

.sound-btn:hover, .lang-btn:hover, #fullScreenBtn:hover { background: #fff; color: #000; }

/* Mobile Phone Adjustments */
@media (max-width: 768px) {
  .sound-btn, #fullScreenBtn, .lang-btn {
    font-size: 9px !important;
    padding: 4px 7px !important;
    border-width: 1px !important;
  }
  #topRightControls {
    gap: 5px !important;
    top: 8px !important;
    right: 5px !important;
  }
  .lang-btn {
    bottom: 6px !important;
    right: 6px !important;
  }
  #hearts img {
    width: 22px !important;
    height: 22px !important;
    margin: 0 1px !important;
  }
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important; height: 100% !important;
  background: rgba(0, 0, 0, 0.85);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: white; text-align: center; z-index: 20;
}

#startScreen {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('day.png') no-repeat center center !important;
  background-size: cover !important;
}

/* Start & End Screen Text */
.overlay h1 { font-size: 23px; margin-bottom: 12px; color: #ffcc00; text-shadow: 2px 2px 0px #aa0000; }
.overlay p { font-size: 14px; max-width: 85%; text-shadow: 1px 1px 0px #000; margin-bottom: 8px; line-height: 1.5; }
.overlay .sub-text { font-size: 13px; color: #9cd9f7; margin-bottom: 14px; text-shadow: 1px 1px 0px #000; line-height: 1.4; }

.btn {
  padding: 8px 16px; font-family: inherit; font-size: 14px; font-weight: bold;
  color: #fff; background: #28a745; border: 2px solid #fff; cursor: pointer;
  box-shadow: 2px 2px 0px #000; transition: transform 0.1s, background 0.1s;
}
.btn:hover { background: #218838; transform: translate(-2px, -2px); box-shadow: 4px 4px 0px #000; }
.btn:active { transform: translate(0px, 0px); box-shadow: 1px 1px 0px #000; }

/* Fullscreen Dynamic Scaling inside Picture Bounds */
#gameContainer:fullscreen #scoreLabel, #gameContainer.is-fullscreen-fallback #scoreLabel { font-size: clamp(16px, 2vh, 24px) !important; }
#gameContainer:fullscreen #score, #gameContainer.is-fullscreen-fallback #score { font-size: clamp(32px, 4.5vh, 52px) !important; }
#gameContainer:fullscreen #targetLabel, #gameContainer.is-fullscreen-fallback #targetLabel { font-size: clamp(16px, 2.2vh, 26px) !important; }
#gameContainer:fullscreen #targetText, #gameContainer.is-fullscreen-fallback #targetText { font-size: clamp(42px, 6vh, 68px) !important; }
#gameContainer:fullscreen #targetRule, #gameContainer.is-fullscreen-fallback #targetRule { font-size: clamp(28px, 4vh, 44px) !important; }
#gameContainer:fullscreen #hearts img, #gameContainer.is-fullscreen-fallback #hearts img { width: clamp(38px, 5vh, 52px) !important; height: clamp(38px, 5vh, 52px) !important; }
#gameContainer:fullscreen #topRightControls, #gameContainer.is-fullscreen-fallback #topRightControls { gap: clamp(8px, 1.2vw, 14px) !important; top: clamp(10px, 2vh, 20px) !important; right: clamp(7px, 1.8vw, 17px) !important; }
#gameContainer:fullscreen .sound-btn, #gameContainer.is-fullscreen-fallback .sound-btn,
#gameContainer:fullscreen #fullScreenBtn, #gameContainer.is-fullscreen-fallback #fullScreenBtn,
#gameContainer:fullscreen .lang-btn, #gameContainer.is-fullscreen-fallback .lang-btn {
  font-size: clamp(12px, 1.6vh, 18px) !important;
  padding: clamp(6px, 1vh, 10px) clamp(10px, 1.2vw, 16px) !important;
}