@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: -webkit-fill-available;
  height: 100dvh;
  overflow: hidden;
  background-color: #000000;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#game-container {
  position: relative;
  width: 100vw;
  height: -webkit-fill-available;
  height: 100dvh;
  overflow: hidden;
  background-color: #000000;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.hud-wrapper {
  position: absolute;
  top: calc(var(--sat) + 0.15rem);
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hud-card {
  background: rgba(4, 20, 15, 0.90);
  border: 1px solid rgba(52, 211, 153, 0.40);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.75);
}

.modal-card {
  background: rgba(4, 18, 13, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.85);
}

.touch-btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#boss-hud {
  z-index: 45;
  top: 6.5rem;
}

#realm-banner {
  z-index: 50;
  top: 9.5rem;
}

/* --- JOYSTICK ZONE POSITIONING --- */
#joystick-zone {
  position: absolute;
  bottom: calc(var(--sab) + 0.75rem);
  left: calc(var(--sal) + 0.75rem);
  width: 7.5rem;
  height: 7.5rem;
  pointer-events: auto;
  touch-action: none !important;
  -webkit-touch-callout: none;
  user-select: none;
}

#joystick-base {
  transform: translate(-50%, -50%);
  will-change: transform, left, top;
}

#joystick-thumb {
  will-change: transform;
  transition: transform 0.02s linear;
}

/* --- ACTION CLUSTER CONTAINER --- */
.action-cluster-container {
  position: absolute;
  bottom: calc(var(--sab) + 0.75rem);
  right: calc(var(--sar) + 0.75rem);
  width: 8.5rem;
  height: 8.5rem;
  pointer-events: auto;
  touch-action: none;
}

/* --- RESPONSIVE & MOBILE ORIENTATION OVERRIDES --- */

@media (pointer: coarse), (max-height: 500px) {
  #mobile-controls {
    display: block !important;
  }
  .pc-controls-bar {
    display: none !important;
  }
  .hud-card {
    width: calc(100% - 0.75rem) !important;
    max-width: 34rem !important;
  }
}

/* --- LANDSCAPE MOBILE CONTROLS OVERRIDES --- */
@media (orientation: landscape) and (max-height: 500px) {
  .hud-wrapper {
    top: calc(var(--sat) + 0.1rem) !important;
  }

  .hud-card {
    padding: 0.15rem 0.35rem !important;
    gap: 0.1rem !important;
    max-width: 98% !important;
  }

  .hud-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.25rem !important;
  }

  #joystick-zone {
    width: 6rem !important;
    height: 6rem !important;
    bottom: calc(var(--sab) + 0.35rem) !important;
    left: calc(var(--sal) + 0.35rem) !important;
  }

  .action-cluster-container {
    width: 7.5rem !important;
    height: 7.5rem !important;
    bottom: calc(var(--sab) + 0.35rem) !important;
    right: calc(var(--sar) + 0.35rem) !important;
  }

  #btn-attack {
    width: 3.25rem !important;
    height: 3.25rem !important;
  }

  #btn-dash, #btn-interact {
    width: 2.25rem !important;
    height: 2.25rem !important;
    font-size: 7px !important;
  }

  #boss-hud {
    top: 4.2rem !important;
    width: 14rem !important;
    padding: 0.15rem !important;
  }

  #realm-banner {
    top: 5.5rem !important;
    padding: 0.35rem 0.75rem !important;
  }
}

@media (pointer: fine) and (min-height: 501px) {
  #mobile-controls {
    display: none !important;
  }
  .pc-controls-bar {
    display: flex !important;
  }
}