/* public/style.css */

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
  font-family: 'Lato', sans-serif;
  height: 100vh !important;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
}

/* Cursor confinement fallback for browsers without pointer lock support */
.game-active canvas {
  cursor: crosshair !important;
}

/* Hide default cursor when custom cursor is active */
.game-active.cursor-locked canvas {
  cursor: none !important;
}

/* Ensure custom cursor is always on top */
#customCursor {
  pointer-events: none !important;
  z-index: 10000 !important;
}

#logoContainer {
  position: relative;
  width: 100%;
  text-align: center;
  z-index: 5;
  margin-bottom: 20px;
  flex-shrink: 0;
}

#gameLogo {
  width: auto;
  height: 175px;
  max-width: 80%;
  filter: drop-shadow(0 0 2.25px #4ecdc4) drop-shadow(0 0 3.375px #45b7d1) drop-shadow(0 0 4.5px #96ceb4);
  transition: filter 0.3s ease, opacity 0.2s ease;
  display: inline-block;
}

.astroLink {
  color: #9f9fff;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

.astroLink:hover {
  color: #c3c3ff;
  text-shadow: 0 0 4px #c3c3ff;
}

/* Astrozaar logo hover animation */
#gameLogo {
  transition: filter 0.3s ease;
}

/* Removed original hover pulse, neon flicker, and slice overlay styles */

/* Electrical spark visuals */
.spark-node {
  position: fixed;
  width: 18px;
  height: 18px;
  background:
    radial-gradient(circle,
      rgba(255,255,255,0.95) 0 10%,
      rgba(255,255,255,0.45) 11% 20%,
      rgba(160,255,210,0.55) 21% 42%,
      rgba(160,255,210,0.15) 43% 58%,
      rgba(160,255,210,0) 59% 100%);
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10002;
  animation: sparkNodePulse 520ms ease-out forwards;
}
.spark-node::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%) rotate(var(--spark-rot, 0deg));
  background:
    conic-gradient(
      from 0deg,
      rgba(160,255,210,0.85) 0deg 10deg, transparent 10deg 30deg,
      rgba(255,255,255,0.8) 30deg 38deg, transparent 38deg 62deg,
      rgba(160,255,210,0.85) 62deg 72deg, transparent 72deg 92deg,
      rgba(255,255,255,0.75) 92deg 100deg, transparent 100deg 124deg,
      rgba(160,255,210,0.85) 124deg 134deg, transparent 134deg 154deg,
      rgba(255,255,255,0.8) 154deg 162deg, transparent 162deg 186deg,
      rgba(160,255,210,0.85) 186deg 196deg, transparent 196deg 360deg
    );
  filter: blur(0.7px);
  mix-blend-mode: screen;
  opacity: 0.95;
  border-radius: 50%;
  animation: sparkRays 520ms ease-out forwards;
}
.spark-bolt {
  position: fixed;
  height: 3px;
  width: 24px;
  background: linear-gradient(90deg, #ffffff 0%, #a8ffce 40%, rgba(255,255,255,0) 100%);
  box-shadow: 0 0 12px rgba(200,255,230,0.9), 0 0 18px rgba(120,255,180,0.65);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10002;
  transform-origin: 0% 50%;
  animation: sparkBolt 180ms ease-out forwards;
}
.spark-ember {
  position: fixed;
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle,
      rgba(255,255,255,0.95) 0 20%,
      rgba(160,255,210,0.55) 21% 45%,
      rgba(160,255,210,0) 55% 100%);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(180,255,210,0.9);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10002;
}
@keyframes sparkNodePulse {
  0% { opacity: 1; transform: scale(1); filter: blur(0px); }
  50% { opacity: 0.9; transform: scale(1.1); filter: blur(0.4px); }
  100% { opacity: 0; transform: scale(0.85); filter: blur(0.6px); }
}
@keyframes sparkRays {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--spark-rot, 0deg) + 28deg)) scale(1.14);
  }
}
@keyframes sparkBolt {
  0% { opacity: 1; filter: blur(0px); transform: scaleX(0.3); }
  70% { opacity: 0.9; filter: blur(0.3px); transform: scaleX(1); }
  100% { opacity: 0; filter: blur(0.8px); transform: scaleX(0.6); }
}

@keyframes logoGlowPulse {
  0% {
    filter: drop-shadow(0 0 2.25px #4ecdc4) drop-shadow(0 0 3.375px #45b7d1) drop-shadow(0 0 4.5px #96ceb4);
  }
  50% {
    filter: drop-shadow(0 0 4px #4ecdc4) drop-shadow(0 0 6px #45b7d1) drop-shadow(0 0 8px #96ceb4);
  }
  100% {
    filter: drop-shadow(0 0 2.25px #4ecdc4) drop-shadow(0 0 3.375px #45b7d1) drop-shadow(0 0 4.5px #96ceb4);
  }
}

#shipSelector {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10 !important;
  font-weight: 600;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Ensure the main menu is hidden once gameplay starts */
.game-active #shipSelector {
  display: none !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* 
 * ⚠️ SHIP LAYOUT WARNING ⚠️
 * DO NOT MODIFY SHIP-RELATED CSS UNLESS EXPLICITLY REQUESTED!
 * The user has specifically requested that ships not be messed with.
 * This includes: #shipChoices, #shipScrollContainer, ship grid layout, etc.
 * Only change ship styling if the user specifically asks for it.
 */
#shipChoices {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin: 0;
  box-sizing: border-box;
  padding: 20px 0;
  overflow: hidden;
  width: 360px;
  min-height: 240px;
  transition: transform 0.3s ease;
}

#shipChoicesTop,
#shipChoicesBottom {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

#shipChoices img {
  width: 48px;
  height: 48px;
  border: 2px solid white;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  direction: ltr;
  transition: transform 0.2s cubic-bezier(0.4, 0.2, 0.2, 1), box-shadow 0.2s;
  z-index: 1;
}
@keyframes ship-wiggle {
  0%   { transform: scale(2.1) rotate(-2deg) translateY(0px); }
  20%  { transform: scale(2.1) rotate(2deg) translateY(-2px); }
  40%  { transform: scale(2.1) rotate(-1deg) translateY(2px); }
  60%  { transform: scale(2.1) rotate(1deg) translateY(-1px); }
  80%  { transform: scale(2.1) rotate(-2deg) translateY(1px); }
  100% { transform: scale(2.1) rotate(-2deg) translateY(0px); }
}
#shipChoices img:hover {
  /* Only highlight border/shadow, no transform or animation here */
  z-index: 2;
  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.25);
}
.ship-choice-container {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid white;
  border-radius: 8px;
  margin: 0;
  padding: 0;
  transition: border-color 0.2s, transform 0.2s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-origin: center center;
  background-color: rgba(0,0,0,0.5);
  flex-shrink: 0;
}

.ship-choice-container.selected {
  border: 2px solid #9f9fff !important;
}

.ship-choice-container::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  background:
    radial-gradient(circle at 8% 5%, rgba(255,255,255,0.8) 0px, transparent 1px),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.7) 0px, transparent 0.75px),
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.9) 0px, transparent 1.25px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.6) 0px, transparent 0.9px),
    radial-gradient(circle at 65% 65%, rgba(255,255,255,0.8) 0px, transparent 1.1px),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.7) 0px, transparent 0.85px),
    radial-gradient(circle at 92% 95%, rgba(255,255,255,0.6) 0px, transparent 0.65px),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.8) 0px, transparent 1px),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.7) 0px, transparent 0.85px),
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.8) 0px, transparent 1px),
    radial-gradient(circle at 10% 50%, rgba(255,255,255,0.7) 0px, transparent 0.75px),
    radial-gradient(circle at 90% 50%, rgba(255,255,255,0.7) 0px, transparent 0.75px),
    #111;
  background-size: 60px 60px;
  background-repeat: repeat-x;
  animation: star-dots-smooth-move 1.2s linear infinite;
}

@keyframes star-dots-smooth-move {
  0% { background-position: 0 0; }
  100% { background-position: -60px 0; }
}

.ship-choice-container:hover::before {
  opacity: 1;
}

.ship-choice-container:hover {
  transform: scale(1.8);
  z-index: 2;
}

.ship-choice-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  border: none;
  display: block;
  transition: none;
}

#startBtn {
  width: 100px;
  height: 100px;
  cursor: pointer;
  user-select: none;
  image-rendering: auto;
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
  transition: transform 0.1s ease, filter 0.3s ease;
}

/* Start button pulses only when ready */
#startBtn.ready {
  animation: startButtonPulse 2s ease-in-out infinite;
}


@keyframes startButtonPulse {
  0% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.7)) drop-shadow(0 0 14px rgba(0, 255, 255, 0.3));
    transform: scale(1.025);
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
    transform: scale(1);
  }
}

@keyframes rocketShake {
  0% { transform: translate(0px, 0px) rotate(0deg); }
  10% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  20% { transform: translate(-2px, 0px) rotate(0.5deg); }
  30% { transform: translate(2px, 1px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(-0.5deg); }
  50% { transform: translate(-1px, 1px) rotate(0.5deg); }
  60% { transform: translate(1px, -2px) rotate(0deg); }
  70% { transform: translate(-2px, 1px) rotate(0.5deg); }
  80% { transform: translate(2px, -1px) rotate(-0.5deg); }
  90% { transform: translate(-1px, 2px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

#startBtn.ready:hover {
  animation: rocketShake 0.15s infinite;
}

#nameInput {
  font-family: 'Lato', sans-serif;
}

/* 
 * ⚠️ SHIP CONTAINER WARNING ⚠️
 * DO NOT MODIFY SHIP CONTAINER UNLESS EXPLICITLY REQUESTED!
 * The user has specifically requested that ships not be messed with.
 * This container controls the ship selection area width and layout.
 * Only change if the user specifically asks for it.
 */
#shipScrollContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0px;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  min-width: 460px;
}

/* Navigation Arrow Styles */
#shipScrollLeft,
#shipScrollRight {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  flex-shrink: 0;
}

#shipScrollLeft:hover,
#shipScrollRight:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

#shipScrollLeft:disabled,
#shipScrollRight:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

#shipScrollLeft:disabled:hover,
#shipScrollRight:disabled:hover {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: none;
  transform: none;
}

#shipScrollContainer::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

#shipScrollContainer::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

#shipScrollContainer {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
}

/* Death overlay styles - using inline styles instead */

/* ASMR Mode styles */
#logoContainer,
#nameInput,
#startBtn,
#shipScrollContainer,
#shipNameHeader,
#shipSelectHeader,
#powerupLegend,
#playerCount,
#leaderboard {
  transition: opacity 1s ease !important;
}

#asmrModeBtn {
  position: relative !important;
  padding: 10px 15px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: rgba(255, 255, 255, 1.0) !important;
  border: 2px solid rgba(128, 128, 128, 0.5) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
}

#hamburgerBtn {
  position: relative !important;
  padding: 10px 15px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: white !important;
  border: 2px solid rgba(128, 128, 128, 0.5) !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 14px !important;
  transition: opacity 1s ease !important;
  z-index: 10000 !important;
  border: 2px solid #9f9fff !important;
}

#hamburgerBtn:hover {
  background: rgba(128, 128, 128, 0.2) !important;
  border-color: rgba(128, 128, 128, 0.5) !important;
  box-shadow: 0 0 8px rgba(128, 128, 128, 0.4) !important;
  border-color: #9f9fff !important;
}

/* Hamburger menu button hover effects */
#leaderboardBtn:hover,
#helpBtn:hover,
#settingsBtn:hover,
#infoBtn:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

/* Leaderboard modal button hover effects */
#saveLeaderboardBtn:hover,
#backToMenuFromLeaderboard:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

/* Help modal button hover effects */
#backToMenuFromHelp:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

/* Settings modal button hover effects */
#saveSettings:hover,
#resetSettings:hover,
#backToMenu:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

/* Info modal button hover effects */
#backToMenuFromInfo:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

#asmrModeBtn.asmr-active {
  color: rgba(255, 255, 255, 0.5) !important;
}

#asmrModeBtn:hover {
  background: rgba(128, 128, 128, 0.2) !important;
  border-color: rgba(128, 128, 128, 0.5) !important;
  box-shadow: 0 0 8px rgba(128, 128, 128, 0.4) !important;
}

/* Leaderboard styles */
#leaderboard {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(0, 255, 0, 0.5);
  border-radius: 5px;
  padding: 10px;
  color: white;
  font-family: 'Lato', sans-serif;
  font-size: 12px;
  z-index: 1000;
  min-width: 200px;
}

#leaderboardTitle {
  color: #9f9fff;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}

#leaderboardCategory {
  color: white;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
  font-size: 11px;
}

#leaderboardContent {
  color: white;
  font-size: 10px;
  line-height: 1.2;
}

.leaderboard-position {
  font-weight: bold;
  color: white;
}

.leaderboard-name {
  color: white;
}

.pink-selected {
  border: 2px solid #ff69b4 !important;
}

/* Powerup blink animation for minimap legend */
@keyframes powerupBlink {
  0%, 50% { background-color: #00ccff; }
  51%, 100% { background-color: white; }
}

#minimapContainer {
  background: #0e0f1dcc;
  border: 2px solid #9f9fff;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
#powerupLegend {
  background: #0e0f1dcc;
  border: 2px solid #9f9fff;
  border-radius: 10px;
  padding: 8px 12px;
  margin-left: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  display: inline-block;
  vertical-align: top;
}

/* Leaderboard score values and placeholder dots */
#leaderboardContent .score,
#leaderboardContent .score-value,
#leaderboardContent .score-placeholder,
#leaderboardContent .score-dots,
#leaderboardContent td.score,
#leaderboardContent td.score-value,
#leaderboardContent td.score-placeholder,
#leaderboardContent td.score-dots,
#leaderboardContent .leaderboard-score,
#leaderboardContent .leaderboard-dots,
#leaderboardContent .dots,
#leaderboardContent .placeholder {
  color: #9f9fff !important;
}

/* Responsive design for smaller screens */
@media (max-height: 700px) {
  #shipSelector {
    justify-content: flex-start;
    padding-top: 10px;
  }
  
  #logoContainer {
    margin-bottom: 10px;
  }
  
  #gameLogo {
    height: 120px;
  }
  
  #shipScrollContainer {
    max-height: 300px;
    padding: 30px 15px;
  }
  
  #shipNameHeader,
  #shipSelectHeader {
    margin: 10px 0;
    font-size: 1.2em;
  }
}

@media (max-height: 600px) {
  #shipSelector {
    justify-content: flex-start;
    padding-top: 5px;
  }
  
  #logoContainer {
    margin-bottom: 5px;
  }
  
  #gameLogo {
    height: 100px;
  }
  
  #shipScrollContainer {
    max-height: 250px;
    padding: 25px 10px;
  }
  
  #shipNameHeader,
  #shipSelectHeader {
    margin: 5px 0;
    font-size: 1.1em;
  }
}

@media (max-width: 600px) {
  #shipChoices {
    gap: 10px;
    width: 320px;
    min-height: 200px;
    padding: 15px 0;
  }
  
  #shipChoicesTop,
  #shipChoicesBottom {
    gap: 10px;
  }
  
  .ship-choice-container {
    width: 50px;
    height: 50px;
  }
  
  #shipScrollContainer {
    max-width: 100%;
    padding: 15px 10px;
    gap: 15px;
  }
  
  #shipScrollLeft,
  #shipScrollRight {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  /* Mobile modal width overrides */
  #hamburgerContent {
    min-width: 300px !important;
    max-width: 400px !important;
    width: 85vw !important;
  }
  
  /* Sub-menu modals need to be wider on mobile */
  #leaderboardContent,
  #settingsContent,
  #infoContent,
  #helpContent {
    min-width: 300px !important;
    max-width: 400px !important;
    width: 85vw !important;
  }
}

/* Additional mobile-specific rules for very small screens */
@media (max-width: 480px) {
  #leaderboardContent,
  #settingsContent,
  #infoContent,
  #helpContent {
    min-width: 280px !important;
    max-width: 350px !important;
    width: 90vw !important;
    padding: 15px !important;
  }
}

/* Starfield Animation */
@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

#bgStars {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: #0e0f1d !important;
  display: block !important;
}
#gameCanvas, #gameCanvasWrapper {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}

#shipSelector, #topRightControls, #gameCanvasWrapper {
  position: relative;
  z-index: 1;
}

#mainMenuPing {
  color: #9f9fff !important;
}
#mainMenuPing span {
  color: #9f9fff !important;
}

#mainMenuPlayers, #mainMenuPlayers * {
  color: #9f9fff !important;
}

#shipScrollLeft, #shipScrollRight {
  border: 2px solid #9f9fff !important;
}

/* Zemew Studios brand badge - desktop/tablet only */
#zemewBrand {
  position: fixed !important;
  left: 16px !important;
  bottom: 16px !important;
  z-index: 1000 !important;
  display: block !important;
}
#zemewBrand img {
  height: 56px !important;
  width: auto !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 8px rgba(0,0,0,0.5));
  transition: transform 0.2s ease, filter 0.3s ease, opacity 0.2s ease;
}
#zemewBrand:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(159,159,255,0.6));
  opacity: 1;
}
.game-active #zemewBrand { display: none !important; }

/* Brand in Info modal - default hidden, shown on mobile */
#zemewBrandInfo { display: block; text-align: center; margin: 12px 0; }
#zemewBrandInfo img {
  height: 48px !important;
  width: auto !important;
  opacity: 0.95 !important;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)) !important;
  transition: transform 0.2s ease, filter 0.3s ease, opacity 0.2s ease;
}
#zemewBrandInfo a:hover img {
  transform: translateY(-1px);
  filter: drop-shadow(0 0 10px rgba(159,159,255,0.6)) !important;
  opacity: 1;
}

@media (max-width: 768px) {
  #zemewBrand { display: none !important; }
  #zemewBrandInfo { display: block !important; }
}

.modal-content button:hover,
#hamburgerContent button:hover,
#leaderboardContent button:hover,
#helpContent button:hover,
#settingsContent button:hover,
#infoContent button:hover {
  border-color: #9f9fff !important;
}