/* Speaking Spin — dark, immersive practice tool.
   Palette/fonts intentionally match unprompted.cool. Scoped to .speaking-spin-page
   so it never leaks into the rest of the (light-themed) site. */

.speaking-spin-page {
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-body: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
    --bg: #121816;
    --ink: #f4e8d6;
    --muted: #f4e8d6ad;
    --accent: #c47a4a;
    --accent-bright: #e0925c;
    --research: #6fc3d8;
    --card: #1a201d;
    --border: #f4e8d61f;

    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    min-height: 100vh;
    padding: clamp(1.5rem, 4vw, 3rem) 1.25rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.speaking-spin-page.part2-mode {
    padding-top: clamp(1rem, 3vw, 1.5rem);
    padding-bottom: 1.5rem;
}

.speaking-spin-page *,
.speaking-spin-page *::before,
.speaking-spin-page *::after {
    box-sizing: border-box;
}

.spin-header {
    position: relative;
    width: min(720px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
}

.spin-back-link {
    align-self: flex-start;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s;
}

.spin-back-link:hover {
    color: var(--ink);
}

.mute-toggle {
    position: absolute;
    top: 0;
    right: 0;
    appearance: none;
    cursor: pointer;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, border-color 0.2s;
}

.mute-toggle:hover {
    color: var(--ink);
    border-color: var(--ink);
}

.spin-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin: 0.5rem 0 0;
    letter-spacing: -0.01em;
}

.spin-subtitle {
    color: var(--muted);
    max-width: 36ch;
    font-size: 0.98rem;
    line-height: 1.45;
    margin: 0;
}

/* Frees up vertical space for Part 2's extra content (prep picker, Start
   planning button) - the description is most useful before a part is picked. */
.speaking-spin-page.part2-mode .spin-subtitle {
    display: none;
}

.made-by {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.3rem 0 0;
}

.made-by-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.8rem 0.3rem 0.6rem;
    color: var(--ink);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.85rem;
    transition: border-color 0.2s, color 0.2s;
}

.made-by-badge:hover {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
}

/* Part selector */
.part-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem;
    width: min(420px, 100%);
}

.part-tab {
    flex: 1;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.part-tab.active {
    background: var(--accent);
    color: #1a120c;
}

/* Stage */
.stage {
    width: min(720px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(1.5rem, 4vw, 2.25rem);
    margin-top: clamp(2rem, 5vw, 3rem);
}

.topic-card {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(2rem, 6vw, 3rem) clamp(1.5rem, 5vw, 2.5rem);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Part 2 has extra content below the topic (prep picker, Start planning
   button) that Part 1/3 don't, so it gets a more compact layout to fit
   without scrolling on most screens. */
.speaking-spin-page.part2-mode .spin-header {
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.speaking-spin-page.part2-mode .stage {
    margin-top: clamp(1rem, 3vw, 1.5rem);
    gap: clamp(1rem, 3vw, 1.5rem);
}

.speaking-spin-page.part2-mode .topic-card {
    padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
    min-height: 0;
}

.speaking-spin-page.part2-mode .topic-prompt {
    font-size: clamp(1.1rem, 3.2vw, 1.5rem);
}

/* The old and new topic briefly occupy the same grid cell so they crossfade
   over one another, instead of the new one simply appearing after the old
   one vanishes. Matches unprompted.cool's spin transition. */
.topic-text-stack {
    display: grid;
    width: 100%;
}

.topic-text {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* animation-duration is set inline per-call (JS) so fast spin ticks fade
   quickly and the final settle fades in more gracefully. */
.topic-text.entering {
    animation-name: crossfade-in;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 220ms;
}

.topic-text.leaving {
    animation-name: crossfade-out;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 220ms;
    pointer-events: none;
}

@keyframes crossfade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes crossfade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Quick spin feedback on the button itself while the topic settles in. */
.btn-primary.spinning {
    animation: pulse 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pulse {
    0% { transform: scale(1); }
    35% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.topic-prompt {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 4vw, 1.9rem);
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.topic-empty {
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 1rem;
}

/* Buttons */
.btn {
    appearance: none;
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: 0.01em;
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform 0.2s, background 0.2s, color 0.2s, opacity 0.2s, box-shadow 0.2s;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.btn-primary {
    background: var(--accent);
    color: #1a120c;
}

.btn-primary:not(:disabled):hover {
    background: var(--accent-bright);
}

.btn-research {
    background: var(--research);
    color: #0c2429;
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--border);
}

.btn-ghost:not(:disabled):hover {
    border-color: var(--ink);
}

.stage-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

/* Part 2 planning/speaking panel */
.part2-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.speaking-spin-page.part2-mode .part2-panel {
    gap: 0.85rem;
}

.prep-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.prep-select-label {
    color: var(--muted);
    font-size: 0.95rem;
    margin: 0;
}

.prep-length {
    display: flex;
    gap: 0.4rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem;
}

.prep-length-option {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.prep-length-option.active {
    background: var(--research);
    color: #0c2429;
}

.timer-ring-wrap {
    position: relative;
    width: clamp(280px, 78vmin, 460px);
    height: clamp(280px, 78vmin, 460px);
}

.timer-ring {
    width: 100%;
    height: 100%;
    /* start the progress arc at 12 o'clock instead of SVG's default 3 o'clock */
    transform: rotate(-90deg);
}

.timer-ring-track {
    fill: none;
    stroke: var(--border);
    stroke-width: 8;
}

.timer-ring-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    /* stroke-dasharray/dashoffset are set from JS (they depend on the
       circle's exact circumference) */
    transition: stroke-dashoffset 1s linear;
}

.timer-ring-progress.planning {
    stroke: var(--research);
}

.timer-ring-progress.speaking {
    stroke: var(--accent-bright);
}

.timer-display {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: clamp(3rem, 13vmin, 5.5rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0;
}

.timer-display.planning {
    color: var(--research);
}

.timer-display.speaking {
    color: var(--accent-bright);
}

.timer-label {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* The topic itself, shown at the top of the timer overlay so it stays
   readable while the full-screen overlay covers the topic card below. */
.timer-topic {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3.2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
    color: var(--ink);
    max-width: 46ch;
    margin: 0;
}

/* Full-screen overlay: the topic/spin button/tabs stay in the DOM
   underneath but are visually pushed to the background behind the blur
   while a Part 2 timer is running. */
.timer-panel {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem 1.25rem;
    background: rgba(9, 13, 12, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: timer-overlay-in 0.35s ease both;
}

@keyframes timer-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.timer-done-message {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--ink);
}

.timer-close-link {
    color: var(--muted);
    text-decoration: underline;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.timer-close-link:hover {
    color: var(--ink);
}

[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .part-tabs {
        width: 100%;
    }
    .stage-actions {
        width: 100%;
        flex-direction: column;
    }
    .stage-actions .btn {
        width: 100%;
    }
}