/* ============================================
   Pocket Survivors — Main Stylesheet
   Fullscreen game canvas with optional mobile controls
   ============================================ */

/* --- Reset & base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  overflow: hidden;
  font-family: monospace;
  color: #ccc;
  /* Prevent pull-to-refresh and bounce on mobile */
  overscroll-behavior: none;
  touch-action: none;
}

/* --- Game canvas: always fills screen, maintains 16:9 --- */
#gameCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Size is set dynamically by JS on resize */
}

/* --- Mobile mode toggle button --- */
#mobileToggle {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 100;
  background: rgba(30, 30, 60, 0.7);
  color: #aaa;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 6px 12px;
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.2s;
}
#mobileToggle:hover { background: rgba(60, 60, 100, 0.8); color: #fff; }
#mobileToggle.active { background: rgba(80, 50, 50, 0.8); border-color: #855; color: #faa; }

/* --- Virtual joystick overlay (hidden until mobile mode) --- */
#mobileControls {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 50;
  pointer-events: none;  /* pass through except on the controls themselves */
}
#mobileControls.visible { display: block; }

/* Joystick zone: left half of screen */
#joystickZone {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: auto;  /* capture touches here */
}

/* Joystick base ring (drawn at touch start position) */
#joystickBase {
  display: none;
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid rgba(200, 200, 255, 0.25);
  background: rgba(100, 100, 160, 0.1);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Joystick thumb (follows finger within base) */
#joystickThumb {
  display: none;
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(200, 200, 255, 0.35);
  border: 2px solid rgba(200, 200, 255, 0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Action button zone: right half of screen */
#actionZone {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: auto;
}

/* Tap hint text */
#tapHint {
  position: absolute;
  bottom: 60px;
  right: 40px;
  color: rgba(200, 200, 255, 0.3);
  font-size: 14px;
  pointer-events: none;
}

/* --- Contextual mobile buttons --- */
/* Shared base style for mobile action buttons */
.mobile-btn {
  display: none;              /* Hidden by default — JS shows based on game state */
  position: absolute;
  z-index: 60;
  pointer-events: auto;
  border: 2px solid rgba(200, 200, 220, 0.4);
  border-radius: 8px;
  font-family: monospace;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
.mobile-btn:active { background: rgba(200, 200, 255, 0.35); }

/* Pause button: top-right during gameplay */
.mobile-btn-pause {
  top: 12px;
  right: 60px;               /* Offset from the Mobile toggle button */
  width: 44px;
  height: 44px;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  background: rgba(30, 30, 60, 0.6);
  color: rgba(200, 200, 220, 0.8);
}

/* Back button: top-left for shop/records/paused/gameover */
.mobile-btn-back {
  top: 12px;
  left: 12px;
  padding: 8px 18px;
  font-size: 14px;
  background: rgba(60, 30, 30, 0.6);
  color: rgba(255, 180, 180, 0.9);
}