/* ============================================
   Compass Rose Component - Micro Variant
   Fixed bottom-right, transparent background
   ============================================ */

/* Container - fixed position above hotkey bar */
#compass-rose-container {
  position: fixed;
  bottom: 90px; /* Above hotkey bar (42px) + command input (~36px) + gap */
  right: 312px; /* Right of text area, not over group panel */
  z-index: 100;
}

/* Wrapper - fully transparent */
.compass-wrapper.compass-micro {
  background: transparent;
  border: none;
  padding: 6px;
  width: 88px;
}

.compass-micro .compass-rose {
  position: relative;
  width: 76px;
  height: 76px;
}

/* Direction Button Base */
.compass-rose .dir-btn {
  position: absolute;
  width: 22px;
  height: 22px;
  background: #2a2a2a;
  border: 1px solid #444444;
  border-radius: 3px;
  color: #e0e0e0;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Consolas', 'Courier New', monospace;
  padding: 0;
}

.compass-rose .dir-btn .dir-label {
  font-size: 12px;
  line-height: 1;
}

.compass-rose .dir-btn:hover:not(:disabled) {
  background: #3a3a3a;
  border-color: #4CAF50;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.compass-rose .dir-btn:active:not(:disabled) {
  background: #4CAF50;
  color: #000;
}

/* Disabled buttons - fully transparent */
.compass-rose .dir-btn:disabled {
  background: transparent;
  border-color: transparent;
  color: #333333;
  cursor: not-allowed;
}

/* Flash animation for keyboard/click feedback */
.compass-rose .dir-btn-flash {
  background: #4CAF50 !important;
  color: #000 !important;
}

/* Destination theme coloring (matches components.css .themed-exit) */
.compass-rose .dir-btn.themed-exit {
  color: var(--exit-theme-color);
  background: color-mix(in srgb, var(--exit-theme-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--exit-theme-color) 30%, transparent);
}

.compass-rose .dir-btn.themed-exit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--exit-theme-color) 20%, transparent);
  border-color: var(--exit-theme-color);
  box-shadow: 0 0 4px var(--exit-theme-color);
}

.compass-rose .dir-btn.themed-exit:active:not(:disabled) {
  background: color-mix(in srgb, var(--exit-theme-color) 30%, transparent);
}

/* Cardinal Directions */
.compass-rose .dir-n {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.compass-rose .dir-s {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.compass-rose .dir-w {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.compass-rose .dir-e {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* Diagonal Directions */
.compass-micro .dir-nw { top: 4px; left: 4px; }
.compass-micro .dir-ne { top: 4px; right: 4px; }
.compass-micro .dir-sw { bottom: 4px; left: 4px; }
.compass-micro .dir-se { bottom: 4px; right: 4px; }

/* Center Up/Down buttons */
.compass-rose .vertical-btns {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.compass-micro .dir-up,
.compass-micro .dir-down {
  position: relative;
  width: 20px;
  height: 14px;
  font-size: 10px;
}

.compass-micro .dir-up .dir-label,
.compass-micro .dir-down .dir-label {
  font-size: 8px;
}

/* Last direction indicator - subtle glow showing where you came from */
.compass-rose .dir-btn-last {
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.5);
  border-color: #2196F3;
}

.compass-rose .dir-btn-last::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #2196F3;
  border-radius: 50%;
}

/* ============================================
   Exit State Indicators (Exit Metadata System)
   ============================================ */

/* Status icon inline with direction arrow */
.compass-rose .exit-status-icon {
  font-size: 8px;
  margin-left: 1px;
  opacity: 0.9;
}

/* Blocked Exit - NPC blocking */
.compass-rose .dir-btn.exit-blocked {
  background: rgba(139, 0, 0, 0.3);
  border-color: #8B0000;
  color: #ff6666;
}

.compass-rose .dir-btn.exit-blocked:hover {
  cursor: not-allowed;
  background: rgba(139, 0, 0, 0.4);
}

/* Locked Exit - Requires key or lockpicking */
.compass-rose .dir-btn.exit-locked {
  background: rgba(139, 119, 42, 0.3);
  border-color: #8B772A;
  color: #D4AF37;
}

.compass-rose .dir-btn.exit-locked:hover {
  cursor: help;
  background: rgba(139, 119, 42, 0.4);
}

/* Sealed Exit - Magical barrier (boss fights) */
.compass-rose .dir-btn.exit-sealed {
  background: rgba(148, 0, 211, 0.3);
  border-color: #9400D3;
  color: #DDA0DD;
  animation: seal-pulse 2s ease-in-out infinite;
}

@keyframes seal-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(148, 0, 211, 0.5); }
  50% { box-shadow: 0 0 12px rgba(148, 0, 211, 0.8); }
}

.compass-rose .dir-btn.exit-sealed:hover {
  cursor: not-allowed;
}

/* Restricted Exit - Level/faction/quest requirements */
.compass-rose .dir-btn.exit-restricted {
  background: rgba(255, 165, 0, 0.3);
  border-color: #FFA500;
  color: #FFD700;
}

.compass-rose .dir-btn.exit-restricted:hover {
  cursor: help;
  background: rgba(255, 165, 0, 0.4);
}

/* Hazardous Exit - Dangerous but passable */
.compass-rose .dir-btn.exit-hazardous {
  background: rgba(255, 69, 0, 0.2);
  border-color: #FF4500;
  color: #FF6347;
}

.compass-rose .dir-btn.exit-hazardous:hover:not(:disabled) {
  background: rgba(255, 69, 0, 0.3);
  box-shadow: 0 0 8px rgba(255, 69, 0, 0.5);
}