/**
 * Override styles for Snake game integration.
 * Hides firesnake watermarks and logo; sets game background to match site UI.
 */

/* Fill iframe: game uses full width/height of iframe (no fixed canvas size) */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
body {
  background: #1a2224 !important;
}

#snakes {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Game play area background - works well inside glass-card / dark or light themes */
#canvas {
  background: linear-gradient(160deg, #2d3a3d 0%, #1e282a 50%, #1a2224 100%) !important;
  /* Alternative lighter option (uncomment to try):
  background: linear-gradient(160deg, #e8f0e8 0%, #d0e0d0 100%) !important;
  */
}

/* Optional: soften container border so it fits our card */
#snakes {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

/* Hide FPS/stats box, help text, and sound toggle (controls are in our UI) */
#stats,
#help,
#sound {
  display: none !important;
}

/* Score: High at top center, Score at bottom center, white text */
#snakes #score,
#score {
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9) !important;
  pointer-events: none !important;
}
/* High: top center */
#score .high {
  position: absolute !important;
  top: 4px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
  width: auto !important;
}
/* Score (current): bottom center */
#score .current {
  position: absolute !important;
  bottom: 4px !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  margin: 0 auto !important;
  text-align: center !important;
}
#snakes #score span,
#score span,
#score .current .value,
#score .high .value,
#score .label,
#score span.value,
#score span.label {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Mobile: smaller score and menu so they don’t dominate the screen */
@media (max-width: 768px) {
  #snakes #score,
  #score {
    font-size: 14px !important;
  }
  #snakes .menu,
  #snakes #menu,
  #snakes #quitmenu,
  .menu {
    font-size: 22px !important;
  }
}
@media (max-width: 480px) {
  #snakes #score,
  #score {
    font-size: 12px !important;
  }
  #score .high {
    top: 2px !important;
  }
  #score .current {
    bottom: 2px !important;
  }
  #snakes .menu,
  #snakes #menu,
  #snakes #quitmenu,
  .menu {
    font-size: 18px !important;
  }
}