/* --- public/styles-game.css --- */
/**
 * ==============================================================================
 * FILE: styles-game.css
 *
 * DESCRIPTION:
 * Styles specifically for the active game view. Includes rules for the main
 * game container, canvas positioning (WebGL + 2D overlay), game over overlay,
 * admin message overlay, minimap appearance and positioning, HUD elements
 * (size/position display), ghost mode UI elements (exit button, shortcut guide),
 * and potentially player-specific visual states (like frozen - though handled in canvas).
 *
 * DEVELOPER GUIDELINES:
 * - Keep comments concise, relevant, and in English.
 * - Explain complex selectors or layout techniques (positioning, z-index).
 * - Prefer using CSS variables defined in styles.css where applicable.
 * - Maintain and update existing comments when refactoring or modifying styles.
 * - Ensure styles are organized logically.
 * ==============================================================================
 */

#gameContainer {
  position: absolute; /* Take up full space */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; /* Ensure no border */
  animation: none; /* Ensure no animation */
  box-shadow: none; /* Ensure no shadow */
  border-radius: 0; /* Ensure no border-radius */
  background-color: transparent; /* Let canvas background show */
  /* Ensure container doesn't overflow */
  overflow: hidden;
}

/* Remove body.real-mode specific overrides as they are now default */

/* --- Game Over Overlay Styles (Simplified) --- */
#gameOverOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Set background directly, will be updated by JS */
  background: linear-gradient(rgba(100, 0, 0, 0.85), rgba(150, 0, 0, 0.95));
  color: #fff;
  display: none; /* Initially hidden */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  z-index: 3;
  text-align: center;
  opacity: 0; /* Start hidden for fade-in */
  transition: opacity 0.5s ease-out; /* Simple fade-in transition */
  backdrop-filter: blur(5px);
}

#gameOverOverlay #gameOverText {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  margin-bottom: 25px;
  position: relative; /* Ensure text is above background */
  z-index: 1;
}

/* Container for Game Over Buttons */
.game-over-buttons {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  align-items: center;
  gap: 15px; /* Space between buttons */
  margin-top: 25px;
  position: relative; /* Ensure buttons are above background */
  z-index: 1;
}

#gameOverOverlay button {
  /* General style for buttons in overlay */
  padding: 12px 25px;
  font-size: 22px;
  /* Use general button styles from styles.css if possible, or redefine here */
  cursor: pointer;
  background: linear-gradient(180deg, #2fad4e, #218838);
  color: #fff;
  border: none;
  border-radius: 5px;
  transition:
    transform 0.15s ease-out,
    box-shadow 0.15s ease-out,
    background 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}
#gameOverOverlay button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, #32c058, #28a745);
}
#gameOverOverlay button:active {
  transform: translateY(0px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

#gameOverOverlay button#replayButton {
  animation: bounceButton 2s infinite ease-in-out; /* Keep bounce animation */
}

#gameOverOverlay button#backToMenuButton {
  font-size: 18px; /* Smaller font size */
  padding: 8px 20px; /* Smaller padding */
  background: linear-gradient(180deg, #888, #666); /* Grey gradient */
}
#gameOverOverlay button#backToMenuButton:hover {
  background: linear-gradient(180deg, #999, #777);
}
#gameOverOverlay button#backToMenuButton:active {
  background: linear-gradient(180deg, #777, #555);
}

/* Replay Button Bounce Animation */
@keyframes bounceButton {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px); /* Bounce up */
  }
  60% {
    transform: translateY(-5px); /* Settle slightly */
  }
}

#snakeSizeDisplay {
  position: fixed; /* Use fixed positioning */
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 18px;
  font-weight: 600;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 15px;
  border-radius: 5px;
  text-shadow: 1px 1px 2px #000;
  opacity: 0; /* Hidden by default, shown by JS */
  transition: opacity 0.3s ease-out;
}

/* --- Player Position Display Styles --- */
#snakePositionDisplay {
  position: fixed; /* Use fixed positioning */
  top: 15px; /* Position at the top */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 16px; /* Slightly smaller font */
  font-weight: 500; /* Normal weight */
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.5); /* Slightly more transparent */
  padding: 6px 12px; /* Smaller padding */
  border-radius: 5px;
  text-shadow: 1px 1px 1px #000; /* Less pronounced shadow */
  opacity: 0; /* Hidden by default, shown by JS */
  transition: opacity 0.3s ease-out;
  pointer-events: none; /* Prevent interaction */
}

/* --- Admin Message Glitch Animation --- */

#adminMessageOverlay {
  position: fixed; /* Use fixed positioning */
  top: 10%;
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */
  width: auto;
  max-width: 80%;
  height: auto;
  background: transparent;
  box-shadow: none;
  color: #1af0dc; /* Glitch text color from example */
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
  font-size: 22px; /* Keep original font size */
  font-weight: bold; /* Keep original font weight */
  padding: 15px 30px;
  border-radius: 5px;
  z-index: 10;
  pointer-events: none;
  user-select: none;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Keep original text shadow */
  opacity: 0; /* Start hidden for fade-in */
  transition: opacity 0.5s ease-out; /* Add fade-in/out transition */

  /* Glitch effect variables and base animation */
  --f-size: 22; /* Base font size for calculations */
  --f-unit: 1px;
  --bg: transparent;
  --scale: 1; /* For glitch-p animation */
}

#adminMessageOverlay.visible {
  display: flex; /* Make visible */
  opacity: 1; /* Fade in */
  /* Apply continuous glitch animation when visible */
  animation: glitch-p 11s infinite alternate;
}

/* Glitch pseudo-elements */
#adminMessageOverlay.visible::before,
#adminMessageOverlay.visible::after {
  /* Variables controlled by animation */
  --top: 0; /* offset from top [0 - 10] */
  --left: 0; /* offset from left [~ -0.08 to 0.08] */
  --v-height: 30%; /* visible part [%] */

  /* Calculations */
  --n-tenth: calc(var(--f-size) * 0.1 * var(--top));
  --t-cut: calc(var(--n-tenth) / var(--f-size) * 100%);
  --b-cut: calc(var(--t-cut) + var(--v-height));

  /* Use data-text attribute set by JS */
  content: attr(data-text);
  position: absolute;
  width: 100%;
  left: 0;
  top: 0; /* Ensure it aligns with parent text */
  text-align: center;
  color: inherit; /* Inherit base color */

  /* Apply glitch effects */
  transform: translateX(calc(var(--left) * 100%));
  filter: drop-shadow(0 0 transparent); /* Helps with pixelization */
  text-shadow:
    calc(var(--left) * -3em) 0 0.02em lime,
    calc(var(--left) * -6em) 0 0.02em #ff00e1;

  /* Background for clipping effect (now transparent) */
  background-color: var(--bg);
  clip-path: polygon(0% var(--t-cut), 100% var(--t-cut), 100% var(--b-cut), 0% var(--b-cut));

  /* Ensure pseudo-elements don't block parent text */
  pointer-events: none;
  z-index: 1; /* Place above parent's base text */
}

#adminMessageOverlay.visible::before {
  animation: glitch-b 1.7s infinite alternate-reverse steps(2, end);
}
#adminMessageOverlay.visible::after {
  animation: glitch-a 3.1s infinite alternate steps(3, end);
}

/* Glitch Keyframes */
@keyframes glitch-p {
  17% {
    --scale: 0.87;
  } /* This scales the main element slightly */
  31% {
    --scale: 1.1;
  }
  37% {
    --scale: 1.3;
  }
  47% {
    --scale: 0.91;
  }
  87% {
    --scale: 1;
  }
}

@keyframes glitch-a {
  10%,
  30%,
  50%,
  70%,
  90% {
    --top: 0;
    --left: 0;
    --v-height: 30%; /* Reset height */
  }
  0% {
    --v-height: 15%;
  }
  20% {
    --left: 0.005;
  }
  40% {
    --left: 0.01;
    --v-height: 20%;
    --top: 3;
  }
  60% {
    --left: 0.03;
    --v-height: 25%;
    --top: 6;
  }
  80% {
    --left: 0.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: 0.083;
    --v-height: 30%;
    --top: 1;
  }
}

@keyframes glitch-b {
  10%,
  30%,
  50%,
  70%,
  90% {
    --top: 0;
    --left: 0;
    --v-height: 30%; /* Reset height */
  }
  0% {
    --v-height: 15%;
    --top: 10;
  }
  20% {
    --left: -0.005;
  }
  40% {
    --left: -0.01;
    --v-height: 17%;
    --top: 3;
  }
  60% {
    --left: -0.03;
    --v-height: 35%;
    --top: 6;
  }
  80% {
    --left: -0.07;
    --v-height: 5%;
    --top: 8;
  }
  100% {
    --left: -0.083;
    --v-height: 30%;
    --top: 1;
  }
}

/* Canvas specific styling */
#gameCanvas {
  display: block;
  /* background-color: #101010; */ /* Background handled by drawGame now */
  /* Default size for static mode (if JS fails or before it runs) */
  /* These are overridden by JS resizeCanvas based on mode */
  width: 100%; /* Always fullscreen */
  height: 100%;
}

/* --- Minimap Styles --- */
#minimapCanvas {
  bottom: 15px;
  left: 15px;
  width: 150px; /* Adjust size as needed */
  height: 150px; /* Adjust size as needed */
  background-color: rgba(50, 50, 50, 0.7); /* Semi-transparent background */
  border: 2px solid rgba(200, 200, 200, 0.5); /* Default border color */
  border-radius: 4px;
  z-index: 5;
  display: none; /* Hidden by default, shown by game.js */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  /* Ensure it stays bottom-left even in fullscreen */
  position: fixed; /* Use fixed positioning */
  overflow: hidden; /* Important for pseudo-element positioning/clipping */
  /* Add transition for border-color */
  transition: border-color 0.3s ease-in-out;
}

/* Simple Red Border for Minimap Glitching State */
#minimapCanvas.minimap-glitching {
  border-color: rgba(255, 0, 0, 0.9); /* Bright red border when glitching */
  animation: none; /* Ensure no other animations apply */
}

/* --- Exit Ghost Button Styles --- */
.exit-ghost-btn {
  position: fixed;
  top: 15px;
  left: 15px;
  padding: 8px 15px;
  font-size: 14px;
  background: linear-gradient(180deg, #6c757d, #5a6268); /* Grey */
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  z-index: 6; /* Above minimap, below admin menu? */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition:
    background 0.3s,
    transform 0.15s ease-out;
}
.exit-ghost-btn:hover {
  background: linear-gradient(180deg, #7a8288, #646b71);
  transform: translateY(-1px);
}
.exit-ghost-btn:active {
  transform: translateY(0);
}

/* --- Admin Context Menu Styles (Deprecated) --- */
/* Keep styles for now in case it's reused, but it's hidden by default */
.admin-context-menu {
  position: absolute; /* Positioned by JS */
  background-color: rgba(40, 40, 40, 0.95);
  border: 1px solid #666;
  border-radius: 5px;
  padding: 10px;
  z-index: 100; /* Above most game elements */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  display: none; /* Hidden by default now */
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
  backdrop-filter: blur(3px);
}
.admin-context-menu #adminContextMenuPlayerName {
  color: #eee;
  font-weight: bold;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 1px solid #555;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-context-menu button {
  /* Inherit general button styles or redefine */
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 0; /* Override default margin */
  text-align: left;
  background: #555;
  color: #eee;
  border: none;
  border-radius: 3px;
  transition:
    background-color 0.2s,
    color 0.2s;
}
.admin-context-menu button:hover {
  background-color: #777;
  color: #fff;
  transform: none; /* Override general button hover */
  box-shadow: none; /* Override general button hover */
}
.admin-context-menu button[data-action='ban'] {
  background-color: #c82333; /* Red */
}
.admin-context-menu button[data-action='ban']:hover {
  background-color: #e24453;
}
.admin-context-menu button[data-action='freeze'] {
  background-color: #007bff; /* Blue */
}
.admin-context-menu button[data-action='freeze']:hover {
  background-color: #2693ff;
}
.admin-context-menu button[data-action='close'] {
  background-color: #888;
}
.admin-context-menu button[data-action='close']:hover {
  background-color: #999;
}

/* --- Ghost Shortcut Guide Styles --- */
#ghostShortcutGuide {
  position: fixed;
  top: 65px; /* Adjust if necessary (15px (top button) + ~35px (button height) + 5px (margin)) */
  left: 15px; /* Aligned with the button */
  background-color: rgba(10, 5, 20, 0.8); /* Dark purple */
  color: #ccc;
  padding: 10px 15px;
  border-radius: 5px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  z-index: 6; /* Above minimap */
  border: 1px solid #8a2be2; /* BlueViolet */
  box-shadow: 0 0 8px rgba(138, 43, 226, 0.4);
  max-width: 350px;
  line-height: 1.5;
  pointer-events: none; /* Don't block clicks */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease-out;
}
#ghostShortcutGuide.visible {
  opacity: 1;
}
#ghostShortcutGuide kbd {
  display: inline-block;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 12px;
  color: #eee;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid #555;
  border-radius: 3px;
  margin: 0 2px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
}
#ghostShortcutGuide .selected-player-name {
  font-weight: bold;
  color: #00ffff; /* Cyan */
}