/**
 * MOBILE-ONLY STYLES - ADVANCED
 * 
 * These styles are applied ONLY when running in Capacitor native app.
 * The 'capacitor-native' class is added to body by index.tsx when
 * Capacitor.isNativePlatform() returns true.
 * 
 * All values can be customized via the Mobile Editor component.
 * CSS custom properties are set by JavaScript in MobileEditor.tsx.
 * 
 * This file does NOT affect the web React app.
 */

/* ========================================
   CSS CUSTOM PROPERTIES (Mobile Editor)
   ======================================== */

/*
 * These CSS variables are controlled by the Mobile Editor.
 * Default values provide a good mobile experience out of the box.
 * The MobileEditor component updates these via JavaScript.
 */
body.capacitor-native {
  /* SCALING */
  --mobile-global-scale: 0.85;
  --mobile-chess-scale: 0.48;
  --mobile-enigma-scale: 0.75;
  --mobile-font-scale: 0.9;
  --mobile-dock-scale: 0.85;
  --mobile-status-scale: 0.75;
  --mobile-modal-scale: 0.9;
  --mobile-login-scale: 0.9;
  --mobile-header-scale: 1;
  --mobile-home-scale: 0.85;
  
  /* PADDING/SPACING */
  --mobile-content-padding: 8px;
  --mobile-dock-bottom-offset: 8px;
  --mobile-status-top-offset: 4px;
  --mobile-status-right-offset: 12px;
  
  /* VISIBILITY (1 = show, 0 = hide) */
  --mobile-show-left-sidebar: 0;
  --mobile-show-right-sidebar: 0;
  --mobile-show-logo-pill: 0;
  --mobile-show-status-pill: 1;
  --mobile-show-medal-hint: 0;
  --mobile-show-drawer: 1;
  
  /* Z-INDEX LAYERING */
  --mobile-dock-z: 100;
  --mobile-status-z: 100;
  --mobile-modal-z: 700;
  --mobile-drawer-z: 300;
  
  /* POSITION OFFSETS */
  --mobile-dock-offset-x: 0px;
  --mobile-status-offset-x: 0px;
  --mobile-status-offset-y: 0px;
}

/* ========================================
   SAFE AREA INSETS
   ======================================== */

body.capacitor-native {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  -webkit-overflow-scrolling: touch;
}

/* ========================================
   STATUS BAR BACKGROUND
   ======================================== */

body.capacitor-native::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background: #0f172a;
  z-index: 9999;
  pointer-events: none;
}

/* ========================================
   MOBILE TOUCH OPTIMIZATIONS
   ======================================== */

body.capacitor-native button,
body.capacitor-native [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

body.capacitor-native .select-none {
  -webkit-user-select: none;
  user-select: none;
}

/* ========================================
   HEADER ADJUSTMENTS
   ======================================== */

body.capacitor-native header.sticky,
body.capacitor-native .sticky.top-0 {
  top: env(safe-area-inset-top, 0px) !important;
  transform: scale(var(--mobile-header-scale, 1));
  transform-origin: top center;
}

/* ========================================
   VISIBILITY CONTROLS (Mobile Editor)
   ======================================== */

/*
 * These use a CSS trick: when variable is 0, display becomes none.
 * When variable is 1, it shows normally.
 * Note: CSS can't do true conditionals, so we use !important overrides.
 * The MobileEditor JS also applies display:none directly when needed.
 */

/* Left Sidebar - Audio Controls */
body.capacitor-native aside.fixed.left-8,
body.capacitor-native button.fixed.left-8 {
  display: none !important;
}

/* Show left sidebar when enabled via JS class */
body.capacitor-native.show-left-sidebar aside.fixed.left-8,
body.capacitor-native.show-left-sidebar button.fixed.left-8 {
  display: flex !important;
}

/* Right Sidebar - Quick Action Bar */
body.capacitor-native div.fixed.right-8,
body.capacitor-native button.fixed.right-8 {
  display: none !important;
}

/* Show right sidebar when enabled via JS class */
body.capacitor-native.show-right-sidebar div.fixed.right-8,
body.capacitor-native.show-right-sidebar button.fixed.right-8 {
  display: flex !important;
}

/* Logo Pill - Top Left */
body.capacitor-native div[role="button"].fixed.top-10 {
  display: none !important;
}

body.capacitor-native.show-logo-pill div[role="button"].fixed.top-10 {
  display: flex !important;
}

/* Status Pill - Level/XP Display */
body.capacitor-native .fixed.top-10.right-10 {
  display: block;
  right: calc(var(--mobile-status-right-offset, 12px) + var(--mobile-status-offset-x, 0px)) !important;
  top: calc(var(--mobile-status-top-offset, 4px) + env(safe-area-inset-top, 0px) + var(--mobile-status-offset-y, 0px)) !important;
  transform: scale(var(--mobile-status-scale, 0.75));
  transform-origin: top right;
  z-index: var(--mobile-status-z, 100);
}

body.capacitor-native.hide-status-pill .fixed.top-10.right-10 {
  display: none !important;
}

/* Medal Hint Banner */
body.capacitor-native .fixed.top-10.right-10 .animate-bounce {
  display: none !important;
}

body.capacitor-native.show-medal-hint .fixed.top-10.right-10 .animate-bounce {
  display: block !important;
}

/* ========================================
   BOTTOM DOCK (FloatingDock)
   ======================================== */

body.capacitor-native .fixed.bottom-10.left-1\/2 {
  bottom: calc(var(--mobile-dock-bottom-offset, 8px) + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(calc(-50% + var(--mobile-dock-offset-x, 0px))) scale(var(--mobile-dock-scale, 0.85));
  transform-origin: bottom center;
  z-index: var(--mobile-dock-z, 100);
}

/* ========================================
   CONTENT PADDING
   ======================================== */

body.capacitor-native main {
  padding-left: var(--mobile-content-padding, 8px) !important;
  padding-right: var(--mobile-content-padding, 8px) !important;
}

body.capacitor-native .w-full.px-6,
body.capacitor-native .w-full.px-8 {
  padding-left: var(--mobile-content-padding, 8px) !important;
  padding-right: var(--mobile-content-padding, 8px) !important;
}

body.capacitor-native .max-w-md,
body.capacitor-native .max-w-lg,
body.capacitor-native .max-w-xl {
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: calc(var(--mobile-content-padding, 8px) / 2) !important;
  padding-right: calc(var(--mobile-content-padding, 8px) / 2) !important;
}

/* ========================================
   GLOBAL UI SCALING
   ======================================== */

body.capacitor-native main > div {
  transform: scale(var(--mobile-global-scale, 0.85));
  transform-origin: top center;
  width: calc(100% / var(--mobile-global-scale, 0.85));
}

/* Don't double-scale fixed elements */
body.capacitor-native main > div > .fixed {
  transform: none !important;
}

/* ========================================
   FONT SCALING
   ======================================== */

body.capacitor-native {
  font-size: calc(16px * var(--mobile-font-scale, 0.9)) !important;
}

body.capacitor-native h1 {
  font-size: calc(2rem * var(--mobile-font-scale, 0.9)) !important;
}

body.capacitor-native h2 {
  font-size: calc(1.5rem * var(--mobile-font-scale, 0.9)) !important;
}

body.capacitor-native h3 {
  font-size: calc(1.25rem * var(--mobile-font-scale, 0.9)) !important;
}

body.capacitor-native .text-6xl,
body.capacitor-native .text-5xl {
  font-size: calc(2.5rem * var(--mobile-font-scale, 0.9)) !important;
}

body.capacitor-native .text-4xl {
  font-size: calc(2rem * var(--mobile-font-scale, 0.9)) !important;
}

body.capacitor-native .text-3xl {
  font-size: calc(1.75rem * var(--mobile-font-scale, 0.9)) !important;
}

/* ========================================
   CHESS BOARD SCALING
   ======================================== */

body.capacitor-native [class*="ChessBotGame"],
body.capacitor-native [class*="ChessGame"] {
  transform: scale(var(--mobile-chess-scale, 0.48));
  transform-origin: top center;
}

body.capacitor-native .react-chessboard {
  max-width: 100vw !important;
}

body.capacitor-native div[style*="background: linear-gradient"][style*="white"] {
  transform: scale(var(--mobile-chess-scale, 0.48));
  transform-origin: top center;
  margin: 0 auto;
}

/* ========================================
   ENIGMA / CRYPTOGRAPHY SCALING
   ======================================== */

body.capacitor-native [class*="EnigmaTerminal"],
body.capacitor-native [class*="ProtocolEnigma"] {
  transform: scale(var(--mobile-enigma-scale, 0.75));
  transform-origin: top left;
  width: calc(100% / var(--mobile-enigma-scale, 0.75));
  height: calc(100% / var(--mobile-enigma-scale, 0.75));
}

body.capacitor-native .grid.grid-cols-4 {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.25rem !important;
}

body.capacitor-native .absolute.inset-y-0.right-0.w-80 {
  width: 60vw !important;
  max-width: 240px !important;
}

body.capacitor-native [class*="pr-80"] {
  padding-right: 15rem !important;
}

/* ========================================
   MODAL SCALING
   ======================================== */

body.capacitor-native [class*="RankProgressionModal"],
body.capacitor-native .fixed.inset-0.z-\\[600\\] > div {
  transform: scale(var(--mobile-modal-scale, 0.9));
  transform-origin: center center;
}

body.capacitor-native [class*="NotificationCenter"] {
  max-height: 70vh !important;
  transform: scale(var(--mobile-modal-scale, 0.9));
  transform-origin: top right;
}

body.capacitor-native .max-w-2xl,
body.capacitor-native .max-w-3xl,
body.capacitor-native .max-w-4xl {
  max-width: calc(100vw - 2rem) !important;
  transform: scale(var(--mobile-modal-scale, 0.9));
  transform-origin: center center;
}

/* Modals z-index */
body.capacitor-native .fixed.inset-0[class*="z-"] {
  z-index: var(--mobile-modal-z, 700) !important;
}

/* ========================================
   LOGIN SCREEN SCALING
   ======================================== */

body.capacitor-native [class*="login"],
body.capacitor-native [class*="Login"] {
  transform: scale(var(--mobile-login-scale, 0.9));
  transform-origin: center center;
}

body.capacitor-native button[class*="bg-agency-us-red"],
body.capacitor-native button[class*="border-cyan"] {
  padding: calc(0.75rem * var(--mobile-login-scale, 0.9)) calc(1.5rem * var(--mobile-login-scale, 0.9)) !important;
  font-size: calc(0.875rem * var(--mobile-font-scale, 0.9)) !important;
}

/* ========================================
   HOME VIEW SCALING
   ======================================== */

body.capacitor-native [class*="HomeView"] {
  padding-top: 1rem !important;
  transform: scale(var(--mobile-home-scale, 0.85));
  transform-origin: top center;
  width: calc(100% / var(--mobile-home-scale, 0.85));
}

body.capacitor-native img[alt*="I.I.A"],
body.capacitor-native img[src*="logo"] {
  max-width: calc(200px * var(--mobile-home-scale, 0.85)) !important;
  height: auto !important;
}

/* ========================================
   BATTLEGROUND FIXES
   ======================================== */

body.capacitor-native button:has(.lucide-eye-off) {
  transform: scale(0.8);
  transform-origin: top right;
}

body.capacitor-native [class*="BattleGround"] .grid {
  gap: 0.5rem !important;
}

/* ========================================
   MOBILE DRAWER Z-INDEX
   ======================================== */

body.capacitor-native [class*="MobileDrawer"] {
  z-index: var(--mobile-drawer-z, 300) !important;
}

/* Hide drawer when disabled */
body.capacitor-native.hide-drawer [class*="MobileDrawer"] {
  display: none !important;
}

/* ========================================
   FIXED ELEMENTS SAFE AREAS
   ======================================== */

body.capacitor-native .fixed.top-10 {
  top: calc(2.5rem + env(safe-area-inset-top, 0px)) !important;
}

body.capacitor-native .fixed.top-0 {
  top: env(safe-area-inset-top, 0px) !important;
}

body.capacitor-native .fixed.bottom-0 {
  bottom: env(safe-area-inset-bottom, 0px) !important;
}

body.capacitor-native .fixed.bottom-4 {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
}

body.capacitor-native .fixed.bottom-6 {
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

body.capacitor-native .fixed.bottom-8 {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
}

body.capacitor-native .fixed.inset-0 {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========================================
   MOBILE EDITOR OVERRIDE
   ======================================== */

/*
 * The Mobile Editor itself should not be affected by scaling.
 * It needs to remain at full size for usability.
 */
body.capacitor-native [class*="MobileEditor"] {
  transform: none !important;
  font-size: 16px !important;
}