/* ================================================================== */
/* CSS VARIABLES: Centralized design tokens for consistency           */
/* ================================================================== */
:root {
  --bg-dark: #05060a;
  --text-gold: #eaba28;
  --alliance: #0096be;
  --horde: #d2321e;
  --tooltip-bg-solid: rgba(15, 17, 24, 0.95);
  --tooltip-border: 1px solid rgba(255, 255, 255, 0.15);
  --map-width: 966px;
  --map-height: 732px;
}

/* ================================================================== */
/* RESET & BASE STYLES                                                */
/* ================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg-dark);
  color: var(--text-gold);
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-top: 40px;
}

/* ================================================================== */
/* MAP CONTAINER & LAYERS                                             */
/* ================================================================== */
#map-container { position: relative; width: var(--map-width); height: var(--map-height); }
.map-layer {
  position: absolute; inset: 0; background-size: cover; background-position: center; 
  visibility: hidden; z-index: 10;
}
.map-layer.active { visibility: visible; }
#world       { background-image: url('img/map/azeroth.jpg'); }
#outland     { background-image: url('img/map/outland.jpg'); }
#northrend   { background-image: url('img/map/northrend.jpg'); }

/* Player marker layers */
#points-container, .points-layer { position: absolute; inset: 0; }
.points-layer { visibility: hidden; z-index: 100; pointer-events: none; }
.points-layer.active { visibility: visible; pointer-events: auto; }

.point-marker { 
  position: absolute; width: 16px; height: 16px; cursor: pointer; 
  transition: transform 0.15s ease, filter 0.2s; z-index: 101;
}
.point-marker:hover { transform: scale(1.3); filter: drop-shadow(0 0 4px rgba(255,255,255,0.7)); }
.faction-alliance { border: 2px solid var(--alliance); background: transparent; border-radius: 50%; box-sizing: border-box; }
.faction-horde    { border: 2px solid var(--horde);   background: transparent; border-radius: 50%; box-sizing: border-box; }

/* ================================================================== */
/* CONTROL BARS (Two-row layout)                                      */
/* ================================================================== */
.main-controls { 
    display: flex; align-items: center; justify-content: space-between; gap: 20px; 
    margin-top: 20px; padding: 14px 28px; background: rgba(255,255,255,0.04); 
    border-radius: 10px; width: var(--map-width);
}

.filter-row { 
    display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 6px 28px; 
    background: rgba(255,255,255,0.03); border-radius: 8px; width: var(--map-width);
}

/* Realm status indicator */
.realm-status-container { display:flex; flex-direction:column; align-items:center; gap:4px; min-width: 70px; }
.realm-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; font-weight: 600; }
.status-indicator { width: 20px; height: 20px; border-radius: 50%; background: #333; transition: all 0.3s ease; cursor: default; box-shadow: 0 0 4px rgba(0,0,0,0.3); }
.status-indicator.online { background: #2ecc71; box-shadow: 0 0 12px rgba(46,204,113,0.85); transform: scale(1.15); }

/* Player counters */
.total-count { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 15px; color: #e0e6f0; text-align: center; }
.line-1 { font-size: 18px; font-weight: bold; letter-spacing: 0.3px; }
.line-2 { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #ccc; margin-top: -2px;}

/* Map tabs */
.map-tabs { display: flex; gap: 12px; }
.map-tab-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: var(--text-gold); font-weight: bold; cursor: pointer; padding: 8px 16px; border-radius: 6px; transition: all 0.15s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 14px; }
.map-tab-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(234,186,40,0.5); transform: translateY(-1px); }
.map-tab-btn.active { background: rgba(234,186,40,0.18); border-color: var(--text-gold); box-shadow: 0 0 10px rgba(234,186,40,0.35); }
.tab-counts { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 12px; color: #ccc; }

/* ================================================================== */
/* FILTER BUTTONS                                                     */
/* ================================================================== */
.filter-label { font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 2px; }
.filter-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--text-gold); padding: 4px 9px; border-radius: 4px; cursor: pointer; font-size: 12px; transition: all 0.15s; }
.filter-btn:hover { background: rgba(234,186,40,0.1); }
.filter-btn.active { background: rgba(234,186,40,0.2); border-color: var(--text-gold); box-shadow: 0 0 6px rgba(234,186,40,0.25); }

/* ================================================================== */
/* PLAYER TOOLTIP (JS handles visibility completely)                  */
/* ================================================================== */
#tooltip-box {
    position: fixed; /* 👈 THIS IS THE MAGIC WORD. It makes it stick to the viewport */
    top: 0;          /* Start at the very top (JS will move it immediately) */
    left: 0;         /* Start at the very left */
    z-index: 9999;   /* Make sure it sits on TOP of everything else */
    pointer-events: none; /* 👈 Important! Lets you click through the tooltip if needed */
}
.tooltip { 
    position: fixed; z-index: 9999; pointer-events: none; padding: 12px 16px; 
    border-radius: 8px; font-size: 13px; line-height: 1.5; opacity: 0; 
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tooltip.player { background: var(--tooltip-bg-solid); border: var(--tooltip-border); box-shadow: 0 8px 24px rgba(0,0,0,0.7); max-width: 320px; }
.name-row { display: flex; align-items:center; gap:6px; margin-bottom: 4px; }
.tooltip.player .name { font-weight: bold; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.info-row { color: #e0e6f0; font-size: 13px; line-height: 1.4; margin-bottom: 2px; }
.location-row { color:#99a !important; font-size: 12px; }

/* ================================================================== */
/* POLISH LAYER: Micro-interactions & visual elegance                 */
/* ================================================================== */

/* Status indicator breathing pulse */
@keyframes status-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(46,204,113,0.85); transform: scale(1.15); }
    50%      { box-shadow: 0 0 22px rgba(46,204,113,1);     transform: scale(1.25); }
}

.status-indicator.online {
    animation: status-pulse 2s infinite ease-in-out;
}

/* Tab hover lift & active glow refinement */
.map-tab-btn {
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.map-tab-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234,186,40,0.2);
}

.map-tab-btn.active {
    animation: tab-glow 3s infinite alternate ease-in-out;
}

@keyframes tab-glow {
    from { box-shadow: 0 0 10px rgba(234,186,40,0.35); }
    to   { box-shadow: 0 0 18px rgba(234,186,40,0.55); }
}

/* Tooltip fade transition (completes the polish) */
#tooltip-box {
    transition: opacity 0.15s ease;
}