/* components.phase-tracker.css */

/* Position phase tracker in header right section (after AI banner) */
.gl-header .cmp-phase-tracker {
  display: none; /* Hidden by default, shown via settings */
  pointer-events: none; /* Don't block clicks */
  margin-left: 16px; /* Space between AI banner and phase tracker */
  position: relative;
  top: auto;
  right: auto;
  z-index: 6600;
}

.cmp-phase-tracker {
  display: none;
}

.phase-tracker-content {
  background: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* Frosty glass effect with nice border */
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  padding: 8px 20px;
  font-family: 'Bangers', cursive;
  font-size: 19px;
  letter-spacing: 1.5px;
  color: #fff;
  /* Font smoothing for crisp text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Black outline for text */
  text-shadow: 
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0   -1px 0 #000,
     0    1px 0 #000,
    -1px  0   0 #000,
     1px  0   0 #000;
  /* Enhanced shadow with inner glow */
  box-shadow: 
    0 0 0 2px rgba(0, 0, 0, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Phase-specific colors with distinct backgrounds (matching action menu style) */

/* Setup/Pre-Game Phases - Gray/Purple (like "My Cards" button) */
.phase-tracker-content[data-phase="GAME_LAUNCH_SPLASH"],
.phase-tracker-content[data-phase="MONSTER_SELECTION"],
.phase-tracker-content[data-phase="ROLL_FOR_FIRST"],
.phase-tracker-content[data-phase="GAME_INIT"],
.phase-tracker-content[data-phase="GAME_START_SPLASH"],
.phase-tracker-content[data-phase="SETUP"],
.phase-tracker-content[data-phase="PRE_GAME"] {
  background: linear-gradient(135deg, rgba(46, 37, 64, 0.85), rgba(29, 23, 41, 0.85));
  border-color: rgba(74, 59, 99, 0.6);
}

/* Roll Phase - Yellow/Gold (like "Roll" button) */
.phase-tracker-content[data-phase="ROLL"] {
  background: linear-gradient(135deg, rgba(255, 224, 102, 0.85), rgba(255, 180, 0, 0.85));
  border-color: rgba(255, 180, 0, 0.6);
}

/* Resolve Phase - Orange (like "Accept Dice" button) */
.phase-tracker-content[data-phase="RESOLVE"] {
  background: linear-gradient(135deg, rgba(255, 179, 71, 0.85), rgba(255, 122, 24, 0.85));
  border-color: rgba(179, 84, 0, 0.6);
}

/* Yield Decision Phase - Red/Orange (danger gradient) */
.phase-tracker-content[data-phase="YIELD_DECISION"] {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.85), rgba(247, 127, 0, 0.85));
  border-color: rgba(230, 57, 70, 0.6);
}

/* Buy Phases - Teal/Cyan (success color) */
.phase-tracker-content[data-phase="BUY"],
.phase-tracker-content[data-phase="BUY_WAIT"] {
  background: linear-gradient(135deg, rgba(6, 214, 160, 0.85), rgba(27, 154, 170, 0.85));
  border-color: rgba(6, 214, 160, 0.6);
}

/* Cleanup Phase - Blue (like "Keep" button) */
.phase-tracker-content[data-phase="CLEANUP"] {
  background: linear-gradient(135deg, rgba(31, 110, 212, 0.85), rgba(8, 76, 153, 0.85));
  border-color: rgba(5, 45, 87, 0.6);
}

/* Game Over Phase - Red (like "End Turn" button) */
.phase-tracker-content[data-phase="GAME_OVER"] {
  background: linear-gradient(135deg, rgba(139, 44, 44, 0.85), rgba(92, 26, 26, 0.85));
  border-color: rgba(166, 69, 69, 0.6);
}

/* Mobile - always hide */
@media (max-width: 1024px), (pointer: coarse) {
  .cmp-phase-tracker {
    display: none !important;
  }
}