/* === BASE / RESET / GAME CONTAINER === */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0a0606;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  image-rendering: pixelated;
  font-family: monospace;
  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="4" fill="none" stroke="%23ffcc88" stroke-width="1.5" opacity="0.7"/><circle cx="10" cy="10" r="1.5" fill="%23ffcc88" opacity="0.8"/></svg>') 10 10, crosshair;
}

.game {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  outline: none;
  background: linear-gradient(180deg,
    #1a0a0c 0%,
    #2d1215 15%,
    #4a1f1e 30%,
    #6b3328 45%,
    #7a3d30 55%,
    #5c2a22 70%,
    #2a1210 85%,
    #120808 100%
  );
  box-shadow: inset 0 0 80px rgba(0,0,0,0.3);
}

.world {
  position: absolute;
  width: 100000px; /* large finite world (right-only); player walks east */
  height: 100vh;
  left: 0;
  top: 0;
  transform-origin: 0 50%;
  will-change: transform;
}

/* === GROUND === */
/* The ground tiles a subtle SVG noise texture across the entire 100000px world.
   Solid base color matches the original. */
.ground {
  position: absolute;
  bottom: -20vh;
  width: 100%;
  height: 42vh;
  z-index: 10;
  background-color: #0a0505;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'><circle cx='14' cy='12' r='1' fill='%23170c08'/><circle cx='42' cy='30' r='0.7' fill='%23231410'/><circle cx='78' cy='8' r='1.2' fill='%23120808'/><circle cx='100' cy='44' r='0.9' fill='%231f1208'/><circle cx='130' cy='18' r='0.7' fill='%23170c08'/><circle cx='22' cy='58' r='1' fill='%23120808'/><circle cx='60' cy='70' r='0.8' fill='%23231410'/><circle cx='118' cy='62' r='1.1' fill='%231a0e08'/><circle cx='150' cy='52' r='0.8' fill='%23120808'/><circle cx='8' cy='38' r='0.9' fill='%231f1208'/><circle cx='90' cy='24' r='0.6' fill='%23231410'/></svg>");
  background-repeat: repeat;
  background-size: 160px 80px;
}
.ground::before { content: ''; position: absolute; top: 0; width: 100%; height: 15px; background: linear-gradient(to bottom, rgba(120,50,30,0.15), transparent); }
.ground-bumps { position: absolute; bottom: calc(22vh - 2px); width: 100%; height: 20px; z-index: 10; pointer-events: none; }

/* === HUD === */
.hud { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color: rgba(200,150,100,0.3); font-size: 10px; z-index: 20; letter-spacing: 2px; pointer-events: none; animation: hudFade 4s ease-in forwards; }
@keyframes hudFade { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }