/* ===== Mobile & Touch Support ===== */

/* Prevent text selection and zoom on touch */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* ===== Fullscreen Button ===== */
.fullscreen-btn {
  position: fixed;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent, #4CAF50);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--accent, #4CAF50);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.2s;
}

.fullscreen-btn:hover,
.fullscreen-btn:active {
  background: var(--accent, #4CAF50);
  color: #000;
}

.fullscreen-hud-btn {
  font-size: 14px;
  padding: 6px 10px !important;
}

/* Hide fullscreen button on desktop - only show on touch devices */
@media (pointer: fine) {
  .fullscreen-btn {
    display: none;
  }
  .fullscreen-hud-btn {
    display: none;
  }
}

/* Show on touch devices */
@media (pointer: coarse) {
  .fullscreen-btn {
    display: flex;
  }
  .fullscreen-hud-btn {
    display: inline-block;
  }
}

/* Adjust fullscreen button in landscape */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .fullscreen-btn {
    top: 5px;
    right: 5px;
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/* Game container needs manipulation for smooth touch */
#game-container {
  touch-action: manipulation;
}

/* ===== D-Pad Controls (Default/Portrait) ===== */
.dpad-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: none;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
  gap: 4px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.dpad-container.visible {
  opacity: 0.9;
  pointer-events: auto;
}

.dpad-btn {
  width: 60px;
  height: 60px;
  border: 3px solid var(--accent, #4CAF50);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--accent, #4CAF50);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.1s;
  -webkit-user-select: none;
}

.dpad-btn:active,
.dpad-btn.active {
  background: var(--accent, #4CAF50);
  color: #000;
  transform: scale(0.95);
}

.dpad-center {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

.dpad-up { grid-column: 2; grid-row: 1; }
.dpad-left { grid-column: 1; grid-row: 2; }
.dpad-center { grid-column: 2; grid-row: 2; }
.dpad-right { grid-column: 3; grid-row: 2; }
.dpad-down { grid-column: 2; grid-row: 3; }

/* ===== Split Controls (for landscape gameboy style) ===== */
.split-control {
  position: fixed;
  display: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.split-control.visible {
  opacity: 0.9;
  pointer-events: auto;
}

.split-control-btn {
  width: 55px;
  height: 55px;
  border: 3px solid var(--accent, #4CAF50);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--accent, #4CAF50);
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: all 0.1s;
}

.split-control-btn:active,
.split-control-btn.active {
  background: var(--accent, #4CAF50);
  color: #000;
  transform: scale(0.95);
}

/* Left cluster: Up, Left, Down stacked vertically */
.split-left {
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.split-left .split-row {
  display: flex;
  gap: 6px;
}

/* Right cluster: Up, Right, Down stacked vertically */
.split-right {
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.split-right .split-row {
  display: flex;
  gap: 6px;
}

/* ===== Action Button ===== */
.mobile-action-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 70px;
  height: 70px;
  border: 3px solid var(--accent, #4CAF50);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: var(--accent, #4CAF50);
  font-size: 1.5rem;
  font-weight: bold;
  font-family: var(--font-display, 'Georgia', serif);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.mobile-action-btn.visible {
  opacity: 0.9;
  pointer-events: auto;
}

.mobile-action-btn:active {
  background: var(--accent, #4CAF50);
  color: #000;
  transform: scale(0.95);
}

/* ===== Touch Device Detection ===== */
@media (pointer: coarse) {
  .dpad-container {
    display: grid;
  }

  .mobile-action-btn {
    display: flex;
  }

  /* Split controls hidden by default, only shown in landscape via other rules */
  .split-control {
    display: none;
  }
}

/* Portrait: show D-pad, hide split controls */
@media (pointer: coarse) and (orientation: portrait) {
  .dpad-container {
    display: grid !important;
  }

  .split-control {
    display: none !important;
  }

  .mobile-action-btn {
    display: flex !important;
  }
}

/* ===== Mobile Responsive (Portrait & Landscape) ===== */
@media screen and (max-width: 850px) {
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
  }

  #game-container {
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-width: 100vw;
    max-height: 100vh;
    max-height: 100dvh;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Canvas scales within container via CSS, keeps internal resolution */
  #game-canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }
}

/* ===== Phone Portrait Mode ===== */
@media screen and (max-width: 500px) and (orientation: portrait) {
  /* Smaller d-pad for phones */
  .dpad-container {
    bottom: 15px;
    left: 10px;
    grid-template-columns: repeat(3, 50px);
    grid-template-rows: repeat(3, 50px);
  }

  .dpad-btn {
    width: 50px;
    height: 50px;
    font-size: 1.3rem;
  }

  .mobile-action-btn {
    bottom: 60px;
    right: 10px;
    width: 55px;
    height: 55px;
    font-size: 1.3rem;
  }
}

/* ===== Landscape Mode - Gameboy/Switch Style ===== */
@media screen and (orientation: landscape) and (max-height: 500px) {
  body {
    overflow: hidden;
  }

  #game-container {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Hide default D-pad in landscape - use split controls instead */
  .dpad-container {
    display: none !important;
  }

  /* Show split controls in landscape */
  .split-control {
    display: flex;
  }

  /* Hide the default action button in landscape */
  .mobile-action-btn {
    display: none !important;
  }

  /* ===== Gameboy-style HUD Layout ===== */

  /* Top bar - just minimap on left */
  .hud-top {
    position: fixed !important;
    top: 8px !important;
    left: 8px !important;
    right: auto !important;
    bottom: auto !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Hide HP/Mana/Coins from top - they go to bottom */
  .hud-top .hud-hp,
  .hud-top .hud-mana,
  .hud-top .hud-coins {
    display: none !important;
  }

  /* Hide pet in landscape */
  .hud-pet {
    display: none !important;
  }

  /* Minimap in upper left */
  .hud-minimap {
    order: 0 !important;
    margin: 0 !important;
  }

  .hud-minimap canvas {
    width: 90px !important;
    height: 68px !important;
    border: 2px solid var(--ui-border) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.6) !important;
  }

  /* Hide default HUD bottom bar - using separate bottom-health-bar instead */
  .hud-bottom {
    display: none !important;
  }

  /* Burger menu button - upper right */
  .burger-menu-btn {
    display: flex !important;
    top: 8px;
    right: 8px;
  }

  /* Burger menu panel */
  .burger-menu-panel {
    top: 56px !important;
    right: 8px !important;
  }
}

/* ===== Burger Menu Styles ===== */
.burger-menu-btn {
  position: fixed;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ui-border, #2e7d32);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-primary, #e8f5e9);
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1002;
  flex-direction: column;
  gap: 4px;
}

.burger-menu-btn .burger-line {
  width: 20px;
  height: 2px;
  background: var(--accent, #4CAF50);
  border-radius: 1px;
}

.burger-menu-btn:active {
  background: var(--accent, #4CAF50);
}

.burger-menu-btn:active .burger-line {
  background: #000;
}

.burger-menu-panel {
  position: fixed;
  top: 60px;
  right: 8px;
  background: rgba(0, 0, 0, 0.9);
  border: 2px solid var(--ui-border, #2e7d32);
  border-radius: 8px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 1001;
}

.burger-menu-panel.open {
  display: flex;
}

.burger-menu-panel .hud-btn {
  width: 100%;
  padding: 10px 16px !important;
  font-size: 12px !important;
  text-align: center;
}

/* ===== Bottom Health Bar (for landscape) ===== */
.bottom-health-bar {
  position: fixed;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  padding: 6px 16px;
  border-radius: 20px;
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  z-index: 999;
  max-width: 60%;
}

.bottom-health-bar .stat-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bottom-health-bar .stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  min-width: 18px;
}

.bottom-health-bar .stat-bar {
  width: 60px;
  height: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  overflow: hidden;
}

.bottom-health-bar .stat-bar-fill {
  height: 100%;
  transition: width 0.3s;
}

.bottom-health-bar .hp-fill {
  background: var(--hp-color, #e53935);
}

.bottom-health-bar .mp-fill {
  background: var(--mana-color, #42a5f5);
}

.bottom-health-bar .stat-text {
  font-size: 9px;
  color: var(--text-dim);
  min-width: 40px;
}

.bottom-health-bar .coins-display {
  font-size: 11px;
  color: var(--coin-color, #ffd54f);
}

/* Show bottom health bar in landscape on touch devices */
@media (pointer: coarse) and (orientation: landscape) {
  .bottom-health-bar {
    display: flex;
  }
}

/* ===== Tablet Landscape (primary use case) - Gameboy Style ===== */
@media screen and (min-width: 600px) and (max-width: 1100px) and (orientation: landscape) {
  #game-container {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* Hide default D-pad, use split controls */
  .dpad-container {
    display: none !important;
  }

  .split-control {
    display: flex;
  }

  .mobile-action-btn {
    display: none !important;
  }

  /* Larger split controls for tablet */
  .split-control-btn {
    width: 65px;
    height: 65px;
    font-size: 1.6rem;
  }

  .split-left {
    left: 20px;
    bottom: 20px;
  }

  .split-right {
    right: 20px;
    bottom: 20px;
  }

  /* Minimap only in top-left for tablet */
  .hud-top {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    background: transparent !important;
    padding: 0 !important;
    gap: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Hide HP/Mana/Coins from top - use bottom bar */
  .hud-top .hud-hp,
  .hud-top .hud-mana,
  .hud-top .hud-coins {
    display: none !important;
  }

  .hud-pet {
    display: none !important;
  }

  /* Hide default bottom HUD buttons - use burger menu */
  .hud-bottom {
    display: none !important;
  }

  /* Show burger menu */
  .burger-menu-btn {
    display: flex !important;
    top: 12px;
    right: 12px;
    width: 50px;
    height: 50px;
  }

  .burger-menu-panel {
    top: 70px;
    right: 12px;
  }

  /* Larger bottom health bar for tablet */
  .bottom-health-bar {
    padding: 8px 20px;
    gap: 16px;
  }

  .bottom-health-bar .stat-bar {
    width: 80px;
    height: 12px;
  }

  .bottom-health-bar .stat-text {
    font-size: 10px;
  }

  .hud-minimap {
    order: 0 !important;
    margin: 0 !important;
  }

  .hud-minimap canvas {
    width: 120px !important;
    height: 90px !important;
    border: 2px solid var(--ui-border) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.6) !important;
  }
}

/* ===== Tablet Portrait ===== */
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
  #game-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: 80vh;
  }

  .dpad-container {
    bottom: 25px;
    left: 25px;
  }

  .mobile-action-btn {
    bottom: 90px;
    right: 25px;
  }
}

/* ===== Mobile UI Scaling ===== */
@media screen and (max-width: 600px) {
  /* Title screen */
  .game-title {
    font-size: 1.8rem !important;
  }

  .game-subtitle {
    font-size: 0.95rem !important;
  }

  .menu-btn {
    width: 180px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Avatar creation */
  .avatar-panel {
    padding: 15px !important;
    width: 95% !important;
    max-width: none !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .avatar-layout {
    flex-direction: column !important;
  }

  .avatar-options {
    width: 100% !important;
  }

  .avatar-preview-container {
    margin-top: 15px !important;
  }

  /* Combat screen */
  .combat-arena {
    padding: 8px !important;
  }

  .combatant-sprite {
    width: 50px !important;
    height: 50px !important;
  }

  .combat-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  .action-btn {
    min-width: 70px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .enemy-intent {
    font-size: 1rem !important;
    padding: 8px 12px !important;
  }

  .phase-indicator {
    font-size: 16px !important;
    padding: 8px 16px !important;
  }

  /* Shop */
  .shop-panel {
    width: 95% !important;
    max-width: none !important;
    padding: 12px !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  .shop-tabs {
    flex-wrap: wrap !important;
  }

  .shop-tab {
    flex: 1 1 45% !important;
    margin: 3px !important;
    font-size: 12px !important;
    padding: 8px !important;
  }

  /* Inventory */
  .inventory-panel {
    width: 95% !important;
    max-width: none !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Pause menu */
  .pause-panel {
    width: 85% !important;
    max-width: 280px !important;
  }

  /* Dialogue */
  .dialogue-box {
    width: 95% !important;
    max-width: none !important;
    padding: 12px !important;
    font-size: 13px !important;
  }

  .dialogue-choices {
    flex-direction: column !important;
  }

  .dialogue-choice {
    width: 100% !important;
    margin: 4px 0 !important;
  }

  /* Realm select */
  .realm-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .realm-card {
    padding: 12px !important;
  }

  .realm-select-title {
    font-size: 1.4rem !important;
  }
}

/* ===== Touch-friendly Button Sizes ===== */
@media (pointer: coarse) {
  /* Minimum touch target size: 44x44px */
  .menu-btn,
  .action-btn,
  .shop-tab,
  .hud-btn,
  .class-btn,
  .color-swatch,
  .dialogue-choice,
  .dialogue-next-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger spacing for touch targets */
  .menu-btn {
    margin: 8px auto !important;
  }

  .action-btn {
    margin: 4px !important;
  }

  /* Color palette swatches - bigger for touch */
  .color-swatch {
    width: 38px !important;
    height: 38px !important;
    margin: 3px !important;
  }

  /* Equipment panel */
  .equip-item {
    padding: 12px !important;
    margin: 5px 0 !important;
  }

  /* Shop items */
  .shop-item {
    padding: 10px !important;
    min-height: 55px !important;
  }

  .shop-item-buy {
    min-width: 55px !important;
    min-height: 44px !important;
  }

  /* Inventory items */
  .inventory-item {
    padding: 10px !important;
    min-height: 48px !important;
  }
}

/* ===== Prevent overscroll/bounce ===== */
html {
  overscroll-behavior: none;
}

body {
  overscroll-behavior: none;
}

/* ===== Safe Area for Notched Devices (iPhone X+) ===== */
@supports (padding: max(0px)) {
  .dpad-container {
    left: max(15px, env(safe-area-inset-left));
    bottom: max(15px, env(safe-area-inset-bottom));
  }

  .mobile-action-btn {
    right: max(15px, env(safe-area-inset-right));
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 55px));
  }

  .hud-bottom {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  @media screen and (max-width: 850px) {
    #game-container {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ===== iOS Safari specific fixes ===== */
@supports (-webkit-touch-callout: none) {
  /* iOS specific styles */
  body {
    /* Prevent elastic scrolling */
    position: fixed;
    width: 100%;
    height: 100%;
  }

  #game-container {
    /* Ensure full height on iOS */
    height: -webkit-fill-available;
  }
}

/* ===== Fullscreen Mode Styles ===== */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen {
  background: #000;
}

:fullscreen #game-container,
:-webkit-full-screen #game-container,
:-moz-full-screen #game-container {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* Hint to use fullscreen on mobile landscape */
.fullscreen-hint {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-secondary, #a5d6a7);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

/* Show hint only in landscape on touch devices when not fullscreen */
@media (pointer: coarse) and (orientation: landscape) {
  body:not(:fullscreen) .fullscreen-hint {
    opacity: 1;
    animation: hintFade 6s ease-in-out forwards;
  }
}

@keyframes hintFade {
  0%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

/* iOS-specific hint (Safari doesn't support Fullscreen API) */
@supports (-webkit-touch-callout: none) {
  .fullscreen-hint::after {
    content: " (iOS: Add to Home Screen)";
    font-size: 10px;
    opacity: 0.8;
  }
}