/*  
  Base Styles & Theming Variables  
  ---------------------------------
  Clean, modern, immersive style for game frame and background  
  Smooth font, subtle shadows, and refined colors to elevate the experience  
*/

:root {
  /* Tile Colors */
  --color-tile-floor: #6fa36f;      /* deep mossy green */
  --color-tile-wall: #3a3a3a;       /* charcoal dark gray */

  /* Player Colors */
  --color-player-fill: #f2c94c;     /* warm golden yellow */
  --color-player-glow: #f2e394;     /* soft glow yellow */

  /* Backgrounds */
  --color-background-page: #1a1a1a; /* almost black */
  --color-background-canvas: #2e2e2e; /* dark graphite */

  /* Borders and Shadows */
  --color-border: #505050;           /* medium gray */
  --shadow-glow: 0 0 8px 3px var(--color-player-glow);

  /* Text */
  --color-text: #e6e6e6;             /* gentle off-white */
  --font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
  color: var(--color-text);
  font-family: var(--font-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#game-container {
  border: 3px solid var(--color-border);
  background-color: #111111;
  box-shadow: 
    inset 0 0 10px #000000,
    0 4px 15px rgba(0, 0, 0, 0.9);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  width: fit-content;
}

canvas {
  display: block;
  background-color: var(--color-background-canvas);
  image-rendering: pixelated; /* crisp, pixel-perfect tiles */
  border-radius: 8px;
  box-shadow:
    inset 0 0 15px #000000aa,
    0 0 30px rgba(0, 0, 0, 0.75);
}

/* Optional: subtle glow effect container for future layering */
#game-container.glow {
  box-shadow: 
    0 0 20px 4px var(--color-player-glow),
    inset 0 0 15px var(--color-player-glow);
  transition: box-shadow 0.3s ease-in-out;
}