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

/* ===================================================
   FIX 1: Glowing Circle Cursor (Desktop only)
   - KEEP native arrow/pointer visible (so user knows exactly where they click)
   - Add a decorative glowing ring + dot that FOLLOWS the native cursor
   - The ring has pointer-events:none so it never blocks clicks
   =================================================== */
@media (hover: hover) and (pointer: fine) {
  /* 2026-04-17 UPDATE: Hide native cursor so custom glowing cursor becomes the primary pointer */
  html, body, body * {
    cursor: none !important;
  }
  /* Text cursor for text fields (keep I-beam so typing is usable) */
  input[type="text"], input[type="email"], input[type="number"], input[type="search"],
  input[type="password"], input[type="url"], input[type="tel"],
  textarea, [contenteditable="true"] {
    cursor: text !important;
  }
  /* Not-allowed for disabled */
  button:disabled, input:disabled, [disabled] {
    cursor: not-allowed !important;
  }
  /* Iframes keep native cursor (we cannot control cursor inside them) */
  iframe {
    cursor: auto !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: 26px !important;
  height: 26px !important;
  border: 1.5px solid rgba(232, 183, 48, 0.65); /* Golden fallback - softer */
  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 12px rgba(232, 183, 48, 0.35),
    0 0 24px rgba(232, 183, 48, 0.15);
  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 the decorative glowing ring/dot stays visible above modals/overlays.
   The native cursor is always visible (we no longer hide it). */
@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;
    pointer-events: none !important;
  }
  /* Decoration layer above modals but click-through */
  #cursor-main { z-index: 2147483647 !important; }
  #cursor-dot  { z-index: 2147483647 !important; }
  #cursor-trail { z-index: 2147483646 !important; }
  /* Inside auth modal, keep native cursor visible so users can precisely click buttons */
  #auth-modal, #auth-modal * {
    cursor: auto;
  }
  #auth-modal a, #auth-modal button, #auth-modal [onclick], #auth-modal [role="button"] {
    cursor: pointer !important;
  }
  #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;
}