/* =========================================================
   STEP 1
   ========================================================= */
.tool-card-tall { min-height: 95px; height: auto; padding: 16px 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; cursor: pointer; pointer-events: auto; text-align: left; transition: border-color .2s ease, background .2s ease, transform .15s ease; }

.tool-card-tall strong { display: block; width: 100%; font-size: 1.15rem; line-height: 1.3; text-align: left; }

.tool-card-tall small { display: block; width: 100%; font-size: .95rem; font-weight: 300; line-height: 1.45; text-align: left; }

.tool-card-tall:hover { transform: translateY(-2px); }

.tool-card-tall.selected { background: #12382f; border-color: #3f806d; color: #fff; }

.tool-card-tall.selected::after { content: '✓ Done'; display: block; margin-top: auto; font-size: .82rem; font-weight: 400; color: #8fc7b5; opacity: 1; }

#stage1Message { margin-top: 22px; }

#stage1Next { margin-top: 18px; }

/* =========================================================
   STEP 2
   ========================================================= */

#needPanel { margin-top: 28px; }

.need-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.response-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }

#stage2 .need-grid .tool-card { min-height: 52px; }

#stage2 .response-grid .tool-card { min-height: 78px; padding: 16px 18px; line-height: 1.35; }

#stage2Next { margin-top: 22px; }


/* =========================================================
   STEP 3
   ========================================================= */

#movePanel { margin-top: 30px; }

.next-move-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.tool-card-action { min-height: 150px; padding: 24px 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; gap: 12px; }

.tool-card-action strong { font-size: 1.05rem; line-height: 1.35; }

.tool-card-action small { font-size: .9rem; font-weight: 300; line-height: 1.4; }

.tool-card-action.selected { background: #12382f; border-color: #3f806d; color: #fff; }


/* =========================================================
   INTERNAL BRAIN KISS TIMER
   ========================================================= */

#timerMount { display: flex; justify-content: center; margin: 32px auto 18px; }

.ct-timer { --ct-size: 210px; --ct-ring-bg: #022c22; --ct-ring-fill: #064e3b; --ct-core-bg: #0a1116; --ct-text: #eafff7; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 22px; text-align: center; user-select: none; position: relative; }

.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,.22), 0 0 12px rgba(16,185,129,.35) inset; }

.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,.55); pointer-events: none; }

.ct-ring.is-complete { box-shadow: 0 0 38px rgba(31,191,133,.3), 0 0 14px rgba(31,191,133,.4) inset; }
.ct-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: calc(var(--ct-size) * .24); font-weight: 600; color: var(--ct-text); letter-spacing: -.01em; pointer-events: none; }

.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;
}

/* =========================================================
   COMPLETION
   ========================================================= */

.timer-complete-message { margin: 18px auto 10px; }

.try-again-btn { margin-top: 16px; }

/* =========================================================
   GENERAL
   ========================================================= */
[hidden] { display: none !important; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .tool-card-tall {
        min-height: 90px;
        padding: 15px 12px;
    }
    .need-grid,
    .response-grid,
    .next-move-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }
}

@media (max-width: 640px) {
    .tool-card-tall {
        min-height: 82px;
        padding: 12px 8px;
    }
    .tool-card-tall strong {
        font-size: .95rem;
    }
    .tool-card-tall small {
        font-size: .8rem;
    }
    .need-grid,
    .response-grid,
    .next-move-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .tool-card-action {
        min-height: 120px;
        padding: 12px 8px;
    }
    .tool-card-action strong {
        font-size: .9rem;
    }
    .tool-card-action small {
        font-size: .78rem;
    }

    .ct-ring {
        --ct-size: 190px;
    }
}
/* =========================================================
   DOOMSCROLLING — KEEP 3 CARDS PER ROW ON ALL DEVICES
========================================================= */

#stage1 .tool-cards,
#stage2 .tool-cards,
#stage3 .tool-cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

#stage1 .tool-card,
#stage2 .tool-card,
#stage3 .tool-card {
    min-width: 0;
    margin-bottom: 0;
    padding: 14px 10px;
    overflow-wrap: anywhere;
}

/* Keep card text readable on small screens */
@media (max-width: 480px) {
    #stage1 .tool-cards,
    #stage2 .tool-cards,
    #stage3 .tool-cards {
        gap: 7px;
    }

    #stage1 .tool-card,
    #stage2 .tool-card,
    #stage3 .tool-card {
        padding: 12px 6px;
        font-size: 0.82rem;
    }

    #stage1 .tool-card strong,
    #stage2 .tool-card strong,
    #stage3 .tool-card strong {
        font-size: 0.85rem;
    }

    #stage1 .tool-card small,
    #stage3 .tool-card small {
        font-size: 0.72rem;
    }
}
/* Hide completion buttons until the tool is finished */
.completion-cta[hidden] {
    display: none !important;
}

.completion-cta:not([hidden]) {
    display: flex;
}