/* ============================================
   ABILITY BOOK — Float-only draggable panel
   Toggle with K key. Shows 12-ability Deadeye pool
   in a 4-column tile grid. Drag from header,
   resize from edges/corners. Never docks.
   ============================================ */

/* ============================================
   PANEL CONTAINER
   ============================================ */
#ability-book {
  position: fixed;
  z-index: 60; /* Above game panels (50), below dialogs (100) */
  pointer-events: auto; /* Re-enable inside #gui-layer (pointer-events: none) */
  background: var(--bg-panel-alpha);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-display);
  min-width: 300px;
  max-width: 700px;
  min-height: 250px;
  max-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* GPU layer */
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

#ability-book.hidden {
  display: none;
}

/* ============================================
   TILE GRID
   ============================================ */
.ability-book-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gui-gap-sm);
  padding: var(--gui-padding);
  overflow-y: auto;
  flex: 1;
}

/* ============================================
   ABILITY TILE
   ============================================ */
.ability-tile {
  position: relative;
  background: var(--bg-surface);
  padding: var(--gui-padding-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: grab;
  user-select: none;
  transition: transform var(--fade-snappy) ease, opacity var(--fade-snappy) ease;
  /* GPU layer for hover transform */
  backface-visibility: hidden;
}

.ability-tile:hover {
  transform: translate3d(0, -2px, 0);
  background: var(--bg-hover);
}

.ability-tile:active {
  cursor: grabbing;
}

/* Prevent children from being independently draggable */
.ability-tile > * {
  pointer-events: none;
}

/* --- Icon --- */
.ability-tile .tile-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: 2px;
}

/* --- Name --- */
.ability-tile .tile-name {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* --- Charge info --- */
.ability-tile .tile-charge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--text-muted);
  text-align: center;
}

.ability-tile .tile-charge.builder {
  color: var(--accent);
}

/* --- Rank badge --- */
.ability-tile .tile-rank {
  position: absolute;
  top: 2px;
  right: 3px;
  font-family: var(--font-mono);
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.02em;
}

/* --- Level tag (bottom-left) --- */
.ability-tile .tile-level {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  color: var(--text-muted);
}

/* ============================================
   TILE STATES
   ============================================ */

/* Equipped — accent highlight via box-shadow (no border to avoid GPU compositing hairlines) */
.ability-tile.equipped {
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 0 2px var(--accent-dim);
}

/* Locked — greyed out but still draggable (WoW-style: can slot above-level abilities) */
.ability-tile.locked {
  opacity: 0.35;
  cursor: grab;
}

.ability-tile.locked:hover {
  transform: none;
  background: var(--bg-surface);
}

/* Lock overlay with level number */
.ability-tile .tile-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-disabled);
  pointer-events: none;
}

.ability-tile:not(.locked) .tile-lock-overlay {
  display: none;
}

/* Builder ability — subtle charge accent (outline so it doesn't override equipped box-shadow) */
.ability-tile.builder {
  outline: 1px solid var(--accent-dim);
  outline-offset: -1px;
}

/* New ability — gold pulse for freshly unlocked, not-yet-seen abilities */
.ability-tile.new-ability:not(.locked) {
  animation: new-tile-pulse 2s ease-in-out infinite;
}

@keyframes new-tile-pulse {
  0%, 100% { box-shadow: 0 0 10px 3px var(--proc-glow-ambient); }
  50% { box-shadow: 0 0 5px 1px oklch(0.75 0.130 85 / 0.15); }
}

/* Dragging state — source tile fades + desaturates */
.ability-tile.dragging {
  opacity: 0.3;
  filter: grayscale(0.5);
}

/* ============================================
   DRAG GHOST (custom pointer-based DnD)
   ============================================ */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(0, 0, 0);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
  transition: none;
}

/* "Poof" animation for bar-to-void removal (Mac Dock style) */
.drag-ghost.poof {
  animation: poofAnim 300ms ease-out forwards;
}

@keyframes poofAnim {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, -8px, 0) scale3d(1.3, 1.3, 1);
    opacity: 0.6;
  }
  100% {
    transform: translate3d(0, -16px, 0) scale3d(0.4, 0.4, 1);
    opacity: 0;
  }
}

/* ============================================
   RESIZE HANDLES (same pattern as gui-panel)
   ============================================ */
#ability-book .resize-handle {
  position: absolute;
  z-index: 10;
}

#ability-book .resize-handle-n,
#ability-book .resize-handle-s {
  left: 0;
  right: 0;
  height: 4px;
  cursor: ns-resize;
}

#ability-book .resize-handle-n { top: 0; }
#ability-book .resize-handle-s { bottom: 0; }

#ability-book .resize-handle-e,
#ability-book .resize-handle-w {
  top: 0;
  bottom: 0;
  width: 4px;
  cursor: ew-resize;
}

#ability-book .resize-handle-e { right: 0; }
#ability-book .resize-handle-w { left: 0; }

#ability-book .resize-handle-se,
#ability-book .resize-handle-sw,
#ability-book .resize-handle-ne,
#ability-book .resize-handle-nw {
  width: 8px;
  height: 8px;
}

#ability-book .resize-handle-se { bottom: 0; right: 0; cursor: se-resize; }
#ability-book .resize-handle-sw { bottom: 0; left: 0; cursor: sw-resize; }
#ability-book .resize-handle-ne { top: 0; right: 0; cursor: ne-resize; }
#ability-book .resize-handle-nw { top: 0; left: 0; cursor: nw-resize; }

/* ============================================
   RICH TOOLTIP (shared by book tiles + action bar)
   Fixed-position singleton — escapes all stacking contexts.
   ============================================ */
.ability-tooltip {
  position: fixed;
  z-index: 200;
  background: oklch(from var(--bg-panel) calc(l * 0.85) c h / 0.96);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  box-shadow:
    0 4px 20px oklch(0 0 0 / 0.4),
    0 1px 4px oklch(0 0 0 / 0.2);
  padding: 0;
  pointer-events: none;
  min-width: 220px;
  max-width: 300px;
  font-family: var(--font-display);
  opacity: 0;
  transition: opacity 100ms ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ability-tooltip.visible {
  opacity: 1;
}

/* --- Pointer caret (anchored mode — action bar) --- */
.ability-tooltip.anchored.above-anchor::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--border-subtle);
}
/* Inner caret for background fill */
.ability-tooltip.anchored.above-anchor::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid oklch(from var(--bg-panel) calc(l * 0.85) c h / 0.96);
  z-index: 1;
}

/* --- Header --- */
.ability-tooltip .tt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
}

.ability-tooltip .tt-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}

.ability-tooltip .tt-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  letter-spacing: 0.01em;
}

.ability-tooltip .tt-rank {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}

/* Divider under header */
.ability-tooltip .tt-header + .tt-type {
  border-top: 1px solid var(--border-subtle);
}

/* --- Type label --- */
.ability-tooltip .tt-type {
  font-size: var(--font-size-xs);
  font-style: italic;
  color: var(--text-muted);
  padding: 6px 14px 2px;
  letter-spacing: 0.02em;
}

/* --- Body --- */
.ability-tooltip .tt-body {
  padding: 6px 14px 10px;
}

.ability-tooltip .tt-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Stats row --- */
.ability-tooltip .tt-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ability-tooltip .tt-stat b {
  color: var(--text-primary);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
}

.ability-tooltip .tt-rank-info {
  font-size: var(--font-size-xs);
  color: var(--accent-bright);
  margin-top: 6px;
  font-style: italic;
}

/* --- Footer — cost/cooldown row --- */
.ability-tooltip .tt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  gap: 12px;
}

.ability-tooltip .tt-cost {
  color: var(--text-secondary);
  font-weight: 600;
}

.ability-tooltip .tt-cost.builder {
  color: var(--accent);
}

.ability-tooltip .tt-cd {
  color: var(--text-secondary);
  font-weight: 600;
}

/* --- Unlock level footer --- */
.ability-tooltip .tt-unlock {
  font-size: 0.65rem;
  color: var(--text-disabled);
  padding: 4px 14px 8px;
  letter-spacing: 0.02em;
}

/* ============================================
   DROP TARGET HIGHLIGHTS (drag-and-drop)
   ============================================ */
.action-slot.drop-target {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.action-slot.drop-hover {
  background: var(--accent-hover);
}

/* ============================================
   RESPONSIVE — smaller screens
   ============================================ */
@media (max-width: 600px) {
  .ability-book-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #ability-book {
    min-width: 240px;
    max-width: 95vw;
    max-height: 80vh;
  }
}

@media (max-width: 400px) {
  .ability-book-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}