/* ============================================================
   FINAL FIXES 2026-04-17 - Cursor, Game Layout, Game Sizing
   Loaded LAST to fix multiple UI issues
   ============================================================ */

/* ===================================================
   FIX 1: Glowing Circle Cursor (Desktop only)
   - Bigger, more visible glowing purple circle
   - Dot in middle, trail behind
   - Hide default arrow cursor on main elements
   =================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Hide native cursor completely, show only our glowing circle */
  html, body {
    cursor: none !important;
  }
  body *:not(input):not(textarea):not([contenteditable]) {
    cursor: none !important;
  }
  /* Keep text cursor for text fields */
  input, textarea, [contenteditable="true"] {
    cursor: text !important;
  }
}

/* The main glowing ring (outer)
   Colors are set by JS (initCursorEffects in app.js) based on chosen style.
   Here we only set structural properties and a golden FALLBACK color. */
#cursor-main {
  display: block !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  width: 32px !important;
  height: 32px !important;
  border: 2px solid rgba(232, 183, 48, 0.85); /* Golden fallback */
  border-radius: 50% !important;
  transform: translate(-9999px, -9999px); /* initial off-screen; JS sets real transform on first mousemove */
  /* PERF: Only transition size/color changes, NOT position */
  transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
  box-shadow:
    0 0 18px rgba(232, 183, 48, 0.55),
    0 0 36px rgba(232, 183, 48, 0.25);
  background: transparent;
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}

/* Center dot - bright pulse */
#cursor-dot {
  display: block !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  width: 6px !important;
  height: 6px !important;
  background: rgba(232, 183, 48, 1); /* Golden fallback */
  border-radius: 50% !important;
  transform: translate(-9999px, -9999px); /* initial off-screen; JS sets real transform on first mousemove */
  box-shadow:
    0 0 12px rgba(232, 183, 48, 0.85),
    0 0 24px rgba(232, 183, 48, 0.45); /* Golden fallback */
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}

/* Outer soft glow trail */
#cursor-trail {
  display: block !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999998 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(232, 183, 48, 0.35),
    rgba(232, 183, 48, 0.08) 60%,
    transparent 80%); /* Golden fallback */
  transform: translate(-9999px, -9999px); /* initial off-screen; JS sets real transform on first mousemove */
  mix-blend-mode: screen;
  transition: width 0.3s ease, height 0.3s ease !important;
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}

/* Hide all cursors on mobile / touch devices */
@media (hover: none), (pointer: coarse) {
  #cursor-main, #cursor-dot, #cursor-trail {
    display: none !important;
  }
  html, body, body * {
    cursor: auto !important;
  }
}

/* Ensure cursor stays visible even over modals, overlays, loading screens, etc.
   Some modals use backdrop-filter/z-index high enough to obscure the cursor. */
@media (hover: hover) and (pointer: fine) {
  #cursor-main, #cursor-dot, #cursor-trail {
    /* Override any accidental display:none from page-specific CSS */
    visibility: visible !important;
    opacity: 1 !important;
  }
  /* Make sure the cursor is above ALL modal/overlay layers */
  #cursor-main { z-index: 2147483647 !important; }
  #cursor-dot  { z-index: 2147483647 !important; }
  #cursor-trail { z-index: 2147483646 !important; }
  /* Inside modals, keep cursor:none so our custom ring shows instead of native arrow */
  #auth-modal, #auth-modal * {
    cursor: none !important;
  }
  /* Preserve text cursor for text inputs inside modals */
  #auth-modal input, #auth-modal textarea, #auth-modal [contenteditable="true"] {
    cursor: text !important;
  }
}

/* ===================================================
   FIX 2: Jawlah Game Layout - Below Main Nav
   The main navbar (#main-nav) is fixed at top with
   height ~65px. The game layout must start BELOW it.
   =================================================== */
.jawlah-game-layout {
  position: fixed !important;
  top: 65px !important;           /* Leave room for main navbar */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* inset removed to not override top/bottom */
  z-index: 40 !important;         /* Below navbar (z-50) so navbar stays clickable */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* On mobile, navbar is smaller / may be different - adjust */
@media (max-width: 768px) {
  .jawlah-game-layout {
    top: 60px !important;
  }
}

/* Header within the game layout - make sure it's visible */
.jawlah-game-header {
  position: relative !important;
  z-index: 5 !important;
  height: 50px !important;
  min-height: 50px !important;
  flex-shrink: 0 !important;
}

/* Body fills remaining space */
.jawlah-game-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ===================================================
   FIX 3: Game Center - Proper Sizing and Scrolling
   The game area should be scrollable if content is too tall
   =================================================== */
.jawlah-game-center {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
}

/* Game container fills width */
.jawlah-game-container,
#game-container {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Ensure glass-cards inside games aren't cut */
#game-container .glass-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 16px auto !important;
  box-sizing: border-box !important;
}

/* Sidebars also scroll properly */
.jawlah-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}

.jawlah-sidebar-left,
.jawlah-sidebar-right {
  display: flex !important;
  flex-direction: column !important;
}

/* Tab content scrolls */
.jawlah-tab-content {
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

/* Settings list spacing */
.jawlah-settings-list {
  padding-bottom: 16px !important;
}

/* ===================================================
   FIX 4: Responsive - stack sidebars on small screens
   =================================================== */
@media (max-width: 1100px) {
  .jawlah-sidebar-left {
    display: none !important;
  }
  .jawlah-sidebar-right {
    width: 280px !important;
    min-width: 280px !important;
  }
}

@media (max-width: 768px) {
  .jawlah-game-body {
    flex-direction: column !important;
  }
  .jawlah-sidebar-left, .jawlah-sidebar-right {
    display: none !important;
  }
  .jawlah-game-center {
    padding: 12px !important;
  }
}

/* ===================================================
   FIX 5: Make sure redo/replay buttons look clickable
   =================================================== */
#game-container button,
.jawlah-game-container button {
  cursor: pointer !important;
}

#game-container button:hover,
.jawlah-game-container button:hover {
  filter: brightness(1.15) !important;
}

/* Give visual feedback on redo buttons specifically */
#game-container button:has(.fa-redo),
.jawlah-game-container button:has(.fa-redo) {
  transition: transform 0.2s ease, background 0.2s ease !important;
}
#game-container button:has(.fa-redo):hover,
.jawlah-game-container button:has(.fa-redo):hover {
  transform: rotate(-90deg) !important;
}