/* ================================
   XHELOS 2: VISUALIZATIONS SYSTEM
   Data Visualization Components
   ================================ */

/* #region ===== HEX GRID SYSTEM ===== */

/* Hex Grid Container */
.hex-grid {
    display: flex;
    flex-wrap: wrap;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    gap: 2px;
    justify-content: center;
}

/* Individual Hex */
.hex {
    width: 60px;
    height: 52px;
    position: relative;
    margin: 26px 2px;
    background: var(--bg-secondary);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.hex::before,
.hex::after {
    content: '';
    position: absolute;
    width: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

.hex::before {
    bottom: 100%;
    border-bottom: 26px solid var(--bg-secondary);
}

.hex::after {
    top: 100%;
    border-top: 26px solid var(--bg-secondary);
}

/* Hex States */
.hex:hover {
    background: var(--bg-tertiary);
    transform: scale(1.1);
    z-index: 10;
}

.hex:hover::before {
    border-bottom-color: var(--bg-tertiary);
}

.hex:hover::after {
    border-top-color: var(--bg-tertiary);
}

/* Hex Variants */
.hex--empty {
    opacity: 0.3;
    pointer-events: none;
}

.hex--occupied {
    background: var(--accent-bio);
}

.hex--occupied::before {
    border-bottom-color: var(--accent-bio);
}

.hex--occupied::after {
    border-top-color: var(--accent-bio);
}

.hex--enemy {
    background: var(--accent-chem);
}

.hex--enemy::before {
    border-bottom-color: var(--accent-chem);
}

.hex--enemy::after {
    border-top-color: var(--accent-chem);
}

.hex--selected {
    background: var(--accent-crystal);
    animation: pulse 1s ease-in-out infinite;
}

.hex--selected::before {
    border-bottom-color: var(--accent-crystal);
}

.hex--selected::after {
    border-top-color: var(--accent-crystal);
}

/* Hex Content */
.hex__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    z-index: 1;
}

.hex__label {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* #endregion */

/* #region ===== RADAR CHART (Stats Pentagon) ===== */

/* Radar Container */
.radar-chart {
    width: 300px;
    height: 300px;
    position: relative;
    margin: var(--space-xl) auto;
}

.radar-chart svg {
    width: 100%;
    height: 100%;
}

/* Radar Grid */
.radar-grid {
    stroke: var(--border);
    stroke-width: 1;
    fill: none;
    opacity: 0.3;
}

.radar-axis {
    stroke: var(--border);
    stroke-width: 1;
    opacity: 0.5;
}

/* Radar Shape */
.radar-shape {
    fill: rgba(74, 222, 128, 0.2);
    stroke: var(--accent-bio);
    stroke-width: 2;
    transition: all var(--transition-normal);
}

.radar-shape:hover {
    fill: rgba(74, 222, 128, 0.3);
    stroke-width: 3;
}

/* Radar Points */
.radar-point {
    fill: var(--accent-bio);

    transition: all var(--transition-fast);
}

.radar-point:hover {

    fill: var(--accent-crystal);
}

/* Radar Labels */
.radar-label {
    font-size: var(--fs-small);
    fill: var(--text-primary);
    text-anchor: middle;
    font-weight: 600;
}

/* Radar Legend */
.radar-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.radar-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-small);
}

.radar-legend__color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--accent-bio);
}

/* #endregion */

/* #region ===== TECH TREE ===== */

/* Tech Tree Container */
.tech-tree {
    position: relative;
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    min-height: 500px;
}

/* Tech Tree Levels */
.tech-tree__level {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
    position: relative;
}

/* Tech Node */
.tech-node {
    width: 80px;
    height: 80px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tech-node:hover {
    transform: scale(1.1);
    border-color: var(--accent-bio);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
}

/* Node States */
.tech-node--unlocked {
    background: var(--bg-primary);
    border-color: var(--accent-bio);
}

.tech-node--available {
    border-color: var(--accent-crystal);
    animation: pulse-border 2s ease-in-out infinite;
}

.tech-node--locked {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Node Icon */
.tech-node__icon {
    font-size: 2rem;
    margin-bottom: var(--space-xs);
}

.tech-node__name {
    font-size: var(--fs-xs);
    text-align: center;
    color: var(--text-secondary);
}

/* Node Connections */
.tech-connection {
    position: absolute;
    width: 2px;
    background: var(--border);
    transform-origin: top;
    z-index: 0;
}

.tech-connection--active {
    background: var(--accent-bio);
    box-shadow: 0 0 5px rgba(74, 222, 128, 0.5);
}

.tech-connection--available {
    background: var(--accent-crystal);
    animation: flow-energy 2s linear infinite;
}

@keyframes flow-energy {
    0% {
        background: linear-gradient(to bottom, 
            var(--accent-crystal) 0%, 
            transparent 50%, 
            transparent 100%);
    }
    100% {
        background: linear-gradient(to bottom, 
            transparent 0%, 
            transparent 50%, 
            var(--accent-crystal) 100%);
    }
}

/* #endregion */

/* #region ===== RESOURCE FLOW DIAGRAM ===== */

/* Flow Diagram Container */
.flow-diagram {
    position: relative;
    padding: var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    min-height: 300px;
}

/* Flow Node */
.flow-node {
    position: absolute;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-width: 120px;
    text-align: center;
    transition: all var(--transition-fast);
}

.flow-node:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

/* Node Types */
.flow-node--source {
    border-color: var(--accent-bio);
    background: rgba(74, 222, 128, 0.05);
}

.flow-node--process {
    border-color: var(--accent-tech);
    background: rgba(245, 158, 11, 0.05);
}

.flow-node--sink {
    border-color: var(--accent-chem);
    background: rgba(236, 72, 153, 0.05);
}

/* Flow Pipe */
.flow-pipe {
    position: absolute;
    height: 4px;
    background: var(--border);
    transform-origin: left center;
}

.flow-pipe--active {
    background: linear-gradient(90deg, 
        var(--accent-bio) 0%, 
        var(--accent-crystal) 50%, 
        var(--accent-bio) 100%);
    background-size: 200% 100%;
    animation: flow-pipe 2s linear infinite;
}

@keyframes flow-pipe {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

/* Flow Rate Indicator */
.flow-rate {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--accent-tech);
}

/* #endregion */

/* #region ===== AREA OF EFFECT (AoE) ===== */

/* AoE Container */
.aoe-indicator {
    position: relative;
    width: 200px;
    height: 200px;
    margin: var(--space-lg) auto;
}

/* AoE Circle */
.aoe-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--accent-chem);
    opacity: 0.6;
}

.aoe-circle--inner {
    width: 60%;
    height: 60%;
    background: rgba(236, 72, 153, 0.2);
    animation: pulse-aoe 2s ease-in-out infinite;
}

.aoe-circle--outer {
    width: 100%;
    height: 100%;
    background: rgba(236, 72, 153, 0.1);
    animation: pulse-aoe 2s ease-in-out infinite 0.5s;
}

@keyframes pulse-aoe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.3;
    }
}

/* AoE Cone */
.aoe-cone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 50px 0 50px;
    border-color: rgba(236, 72, 153, 0.3) transparent transparent transparent;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(0deg);
    transition: transform var(--transition-fast);
}

/* AoE Line */
.aoe-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 150px;
    background: linear-gradient(to top, 
        transparent 0%, 
        var(--accent-chem) 50%, 
        transparent 100%);
    transform: translate(-50%, -100%);
    animation: scan-line 1s ease-in-out infinite;
}

@keyframes scan-line {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

/* #endregion */

/* #region ===== PROGRESS RINGS ===== */

/* Progress Ring Container */
.progress-ring {
    width: 120px;
    height: 120px;
    position: relative;
}

.progress-ring svg {
    transform: rotate(-90deg);
}

/* Ring Background */
.progress-ring__bg {
    fill: none;
    stroke: var(--bg-tertiary);
    stroke-width: 8;
}

/* Ring Progress */
.progress-ring__progress {
    fill: none;
    stroke: var(--accent-bio);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset var(--transition-normal);
}

/* Ring Center */
.progress-ring__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.progress-ring__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.progress-ring__label {
    font-size: var(--fs-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Ring Variants */
.progress-ring--energy .progress-ring__progress {
    stroke: var(--accent-tech);
}

.progress-ring--health .progress-ring__progress {
    stroke: #ef4444;
}

.progress-ring--shield .progress-ring__progress {
    stroke: var(--accent-crystal);
}

/* #endregion */

/* #region ===== MINI MAP ===== */

/* Mini Map Container */
.mini-map {
    width: 200px;
    height: 200px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

/* Map Regions */
.mini-map__region {
    position: absolute;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.mini-map__region:hover {
    background: var(--bg-primary);
    border-color: var(--accent-bio);
    z-index: 10;
}

/* Region States */
.mini-map__region--owned {
    background: rgba(74, 222, 128, 0.3);
    border-color: var(--accent-bio);
}

.mini-map__region--enemy {
    background: rgba(236, 72, 153, 0.3);
    border-color: var(--accent-chem);
}

.mini-map__region--neutral {
    background: rgba(107, 114, 128, 0.3);
    border-color: #6b7280;
}

.mini-map__region--contested {
    background: linear-gradient(135deg, 
        rgba(74, 222, 128, 0.3) 50%, 
        rgba(236, 72, 153, 0.3) 50%);
    border-color: var(--accent-tech);
    animation: pulse-border 2s ease-in-out infinite;
}

/* Player Indicator */
.mini-map__player {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--accent-crystal);
    border: 2px solid white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    animation: pulse 2s ease-in-out infinite;
}

/* Map Icons */
.mini-map__icon {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* #endregion */

/* #region ===== DAMAGE NUMBERS ===== */

/* Floating Damage Container */
.damage-float {
    position: absolute;
    pointer-events: none;
    animation: float-up 1s ease-out forwards;
}

@keyframes float-up {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
}

/* Damage Number */
.damage-number {
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Damage Types */
.damage-number--normal {
    color: #fbbf24;
}

.damage-number--critical {
    color: #ef4444;
    font-size: 2rem;
    animation: critical-shake 0.3s ease-out;
}

.damage-number--heal {
    color: #10b981;
}

.damage-number--shield {
    color: var(--accent-crystal);
}

.damage-number--miss {
    color: #6b7280;
    font-style: italic;
}

@keyframes critical-shake {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(1.2) rotate(-5deg);
    }
    75% {
        transform: scale(1.2) rotate(5deg);
    }
}

/* #endregion */

/* #region ===== SKILL COOLDOWN ===== */

/* Cooldown Overlay */
.cooldown-overlay {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Cooldown Sweep */
.cooldown-sweep {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(0, 0, 0, 0.7) 0deg
    );
    transition: all var(--transition-normal);
}

/* Cooldown Timer */
.cooldown-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Ready State */
.cooldown-overlay--ready {
    animation: skill-ready 0.5s ease-out;
}

@keyframes skill-ready {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.8);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(74, 222, 128, 0);
    }
}

/* #endregion */

/* #region ===== ORBIT SYSTEM ===== */

/* Orbit Container */
.orbit-system {
    width: 300px;
    height: 300px;
    position: relative;
    margin: var(--space-xl) auto;
}

/* Central Body */
.orbit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--accent-tech);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.5);
}

/* Orbit Path */
.orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dashed var(--border);
    border-radius: 50%;
    opacity: 0.3;
}

.orbit-path--inner {
    width: 150px;
    height: 150px;
}

.orbit-path--middle {
    width: 200px;
    height: 200px;
}

.orbit-path--outer {
    width: 250px;
    height: 250px;
}

/* Orbiting Object */
.orbit-object {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--accent-crystal);
    border-radius: 50%;
}

.orbit-object--inner {
    animation: orbit-inner 5s linear infinite;
}

.orbit-object--middle {
    animation: orbit-middle 8s linear infinite;
}

.orbit-object--outer {
    animation: orbit-outer 12s linear infinite;
}

@keyframes orbit-inner {
    from {
        transform: rotate(0deg) translateX(75px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(75px) rotate(-360deg);
    }
}

@keyframes orbit-middle {
    from {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
    }
}

@keyframes orbit-outer {
    from {
        transform: rotate(0deg) translateX(125px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(125px) rotate(-360deg);
    }
}

/* #endregion */

/* #region ===== RESPONSIVE ===== */

@media (max-width: 768px) {
    .hex-grid {
        transform: scale(0.8);
    }
    
    .tech-tree {
        overflow-x: scroll;
    }
    
    .radar-chart {
        width: 250px;
        height: 250px;
    }
    
    .orbit-system {
        width: 250px;
        height: 250px;
    }
    
    .mini-map {
        width: 150px;
        height: 150px;
    }
}

/* #endregion */