@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================
   Deep Emerald Timer 
   ========================================================= */

.ct-timer {
    --ct-size: 210px;
    --ct-ring-bg: #022c22;      /* deep emerald track */
    --ct-ring-fill: #064e3b;    /* solid emerald */
    --ct-core-bg: #0a1116;      /* ultra dark center */
    --ct-text: #eafff7;         /* soft aqua-white */

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;   /* prevents overlap with CTA */
    gap: 22px;
    text-align: center;
    user-select: none;
    position: relative;
}

/* =========================================================
   RING — solid deep emerald, no pulse, no glow
   ========================================================= */

.ct-ring {
    width: var(--ct-size);
    height: var(--ct-size);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(
        var(--ct-ring-fill) var(--progress),
        var(--ct-ring-bg) var(--progress)
    );

    box-shadow:
        0 0 32px rgba(16, 185, 129, 0.22),
        0 0 12px rgba(16, 185, 129, 0.35) inset;
}


/* Inner core */
.ct-ring::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--ct-size) - 48px);
    height: calc(var(--ct-size) - 48px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ct-core-bg);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}


/* Timer text */
.ct-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--ct-size) * 0.24);
    font-weight: 600;
    color: var(--ct-text);
    letter-spacing: -0.01em;
    pointer-events: none; /* never block clicks */
}

/* =========================================================
   CTA — optional BrainKiss deep emerald button
   ========================================================= */

.ct-btn {
    width: 170px;
    min-width: 170px;
    padding: 14px 32px;
    background: #022c22;
    color: #34d399;
    border: 1.5px solid #34d399;
    border-radius: 4px;
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .03em;
    cursor: pointer;
    box-shadow: none;
    transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ct-btn:hover {
    transform: translateY(-1px);
    background: rgba(52,211,153,.10);
    color: #34d399;
    border-color: #34d399;
    box-shadow: none;
}

.ct-btn:active {
    transform: translateY(0);
}

.ct-btn.hidden {
    display: none;
}

/* If you don't use the timer's own CTA, hide it */
.ct-btn.hidden {
    display: none;
}