/* CIS - Candle Interaction System Styles */
:root {
    --bullish: #26a69a;
    --bearish: #ef5350;
    --gold-primary: #ffbf00;
    --gold-glow: rgba(255, 191, 0, 0.35);
    --aura-tint: rgba(255, 191, 0, 0.06);
    --custom-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23ffbf00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10' stroke-opacity='0.3'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") 16 16, pointer;
}

/* Container for Overlays - Sits on top of Canvas */
.highlighter-container {
    position: absolute;
    inset: 0;
    pointer-events: none; /* Let clicks pass unless hitting an interactive element */
    z-index: 50;
    overflow: hidden;
}

/* The Highlighter Element (replaces .cis-interactive-overlay from demo) */
.cis-overlay {
    position: absolute;
    pointer-events: auto; /* Catch clicks */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centered Content */
    transition: all 0.1s linear; /* Fast syncing */
    cursor: default;
}

/* Active State (Base - Brackets & Icon Only) */
.cis-overlay.active {
    background: transparent; /* No background by default */
    cursor: var(--custom-cursor); /* Custom Cursor */
    z-index: 60;
}

/* Active State HOVER (Glow & Aura) */
.cis-overlay.active:hover {
    background: var(--aura-tint);
    box-shadow: inset 0 0 8px rgba(255, 191, 0, 0.25);
    animation: cis-aura-pulse 3s infinite ease-in-out;
    transform: scale(1.02); /* Subtle pop */
    z-index: 70;
}

/* Precision Caps (Top & Bottom Bars) - "Data Lane" Look */
.cis-overlay.active::before,
.cis-overlay.active::after {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    height: 2px; /* Thin precision bar */
    background: var(--gold-primary);
    border-radius: 2px;
    /* transition: box-shadow 0.3s ease; -- Optional */
}

/* Top Cap */
.cis-overlay.active::before {
    top: 0;
}

/* Bottom Cap */
.cis-overlay.active::after {
    bottom: 0;
}

/* Hide old corner elements if they exist in DOM */
.cis-bracket-bottom {
    display: none;
}

/* Hover Glow for Caps */
.cis-overlay.active:hover::before,
.cis-overlay.active:hover::after {
    box-shadow: 0 0 10px var(--gold-primary); /* Simple glow */
}

@keyframes cis-aura-pulse {
    0%, 100% { background: var(--aura-tint); }
    50% { background: rgba(255, 191, 0, 0.12); }
}

/* Completed State (Green Fade) */
.cis-overlay.completed {
    background: rgba(0, 230, 118, 0.08);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Touch Clue (Icon) - CENTERED */
.cis-touch-clue {
    opacity: 0;
    transform: scale(0.15); /* User requested "very very smaller" */
    color: #00E5FF; /* User requested "Blue Dot" */
    /* filter: drop-shadow(0 0 15px var(--gold-primary)); -- Moved to Hover */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 25;
    pointer-events: none;
}

.cis-overlay.active:hover .cis-touch-clue {
    filter: drop-shadow(0 0 15px var(--gold-primary));
}

.cis-overlay.active .cis-touch-clue {
    opacity: 1;
    transform: scale(0.25); /* Active state also smaller */
}

/* Ripple */
.cis-ripple {
    position: absolute;
    background: white;
    border-radius: 50%;
    transform: scale(0);
    animation: cis-ripple-out 0.6s ease-out;
    pointer-events: none;
    z-index: 15;
    opacity: 0.35;
}

@keyframes cis-ripple-out {
    to { transform: scale(4.5); opacity: 0; }
}

/* --- TruthSight v3.0 CSS --- */
@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

.counter-anim {
    transition: --num 1s ease-out;
    counter-reset: num var(--num);
}

.counter-anim::before {
    content: "$" counter(num);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.2s ease-out forwards;
}

:root {
    --green: #00FF41;
    --red: #FF3131;
    --blue: #00E5FF;
}

.chart-dimmed {
    filter: saturate(0) brightness(0.15);
    opacity: 0.15;
    pointer-events: none;
    transition: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Individual Candle Hint (Pulsing Bubble) */
.candle-hint {
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgba(0, 229, 255, 0.4);
    border: 1px solid rgba(0, 229, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
    transform: translate(-50%, -50%);
    /* Centered on coord */
    animation: candle-pulse 1.5s infinite;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

@keyframes candle-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.7;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.9);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.7;
    }
}

/* "Cutout" Dimmer */
/* This element is sized to the "Active Zone" (the last N candles) */
/* It casts a huge shadow to dim everything else */
.cutout-dimmer {
    position: absolute;
    pointer-events: none;
    /* Let clicks pass through to hints */
    z-index: 90;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85);
    /* The Dim */
    border-radius: 4px;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
}

.dimmer-active {
    opacity: 1;
}

/* Legacy hints - Keep until fully replaced or use as fallback */
.interaction-hint-container {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 60;
}

.hint-active {
    opacity: 1;
}

/* Position helpers */
.hint-context {
    top: 50%;
    left: 75%;
    /* Right side of 1H chart */
    transform: translate(-50%, -50%);
}

.hint-trade {
    top: 50%;
    left: 50%;
    /* Center of 15M chart */
    transform: translate(-50%, -50%);
}

/* Ripple Effect */
.hint-ripple {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(0, 229, 255, 0.6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: hint-ripple-anim 2s infinite;
}

@keyframes hint-ripple-anim {
    0% {
        width: 40px;
        height: 40px;
        opacity: 0.8;
        border-width: 3px;
    }

    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
        border-width: 0px;
    }
}

/* Finger Icon */
.hint-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%, -20%);
    font-size: 24px;
    color: rgba(0, 229, 255, 0.9);
    animation: hint-press-anim 2s infinite;
}

@keyframes hint-press-anim {

    0%,
    100% {
        transform: translate(-20%, -20%) scale(1);
    }

    50% {
        transform: translate(-20%, -20%) scale(0.9);
    }
}

/* Clean up old spotlight classes if any remain */
.chart-spotlight-container {
    position: relative;
    overflow: hidden;
}

.chart-pan-layer {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

@keyframes pulse-guide {
    0% {
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 229, 255, 0.5);
    }

    100% {
        box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
    }
}

/* Neon Pulsing Ring */
#touch-guide {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid var(--blue);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--blue), inset 0 0 10px var(--blue);
    top: 50%;
    left: 80%;
    /* Approximate position for last candles after pan */
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    pointer-events: none;
    z-index: 60;
}

.guide-active {
    animation: pulse-ring 2s infinite;
    opacity: 1 !important;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
        box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7);
    }

    70% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
        box-shadow: 0 0 0 20px rgba(0, 229, 255, 0);
    }

    100% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }
}


/* 3D Dial */
#dial-root {
    position: fixed;
    width: 220px;
    height: 220px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
    transition: opacity 0.2s;
}

.dial-glass {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0.85) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dial-seg {
    position: absolute;
    width: 76px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20px;
    transition: all 0.2s;
    color: white;
}

.seg-active {
    border-color: var(--blue);
    background: rgba(0, 229, 255, 0.2) !important;
    color: var(--blue);
    box-shadow: 0 0 25px var(--blue);
    transform: translateZ(40px) scale(1.15);
}

#seg-up {
    transform: translateY(-70px);
}

#seg-right {
    transform: translateX(70px);
}

#seg-left {
    transform: translateX(-70px);
}

#dial-center {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 7px;
    color: #555;
    text-transform: uppercase;
}

.center-active {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
    transform: scale(1.1);
}

/* Effects */
@keyframes selection-flash {
    0% {
        background: white;
        opacity: 0.8;
    }

    100% {
        background: transparent;
        opacity: 0;
    }
}

.flash-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    display: none;
}

#ghost-target {
    display: none !important;
}



#game-status-text {
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}