/* TutorPulse · Phase 3 app deck: Brain Break Generator, Phonics & Spelling Bee,
 * Focus Beats and Class Marble Jar. Shares tokens/components (.screen, .btn-ui,
 * .level-pill, .progress-track, .a11y-toggle-row) from style-v5.css.
 */

/* ============ BRAIN BREAK GENERATOR ============ */

.bb-mode-grid {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.bb-mode-btn {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    padding: 0.9rem 1.4rem;
    font-weight: 800;
    font-size: 1.05rem;
    cursor: pointer;
    box-shadow: 0 5px 0 var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    transition: all 0.15s;
}

.bb-mode-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 var(--border-color);
}

.bb-mode-btn:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--border-color);
}

.bb-mode-btn.active {
    color: #ffffff;
    border-color: var(--mode-color-dark, var(--color-purple-dark));
    background: var(--mode-color, var(--color-purple));
    box-shadow: 0 5px 0 var(--mode-color-dark, var(--color-purple-dark));
}

.bb-mode-btn[data-mode="energiser"] {
    --mode-color: var(--color-red);
    --mode-color-dark: var(--color-red-dark);
}

.bb-mode-btn[data-mode="calm"] {
    --mode-color: var(--color-blue);
    --mode-color-dark: var(--color-blue-dark);
}

.bb-mode-btn[data-mode="logic"] {
    --mode-color: var(--color-purple);
    --mode-color-dark: var(--color-purple-dark);
}

.bb-duration-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.bb-duration-label {
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

.bb-timer-bar {
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.bb-reel-stage {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    border: 4px solid var(--border-color);
    border-radius: 26px;
    background: #ffffff;
    box-shadow: 0 10px 0 var(--border-color);
    overflow: hidden;
    position: relative;
    height: 120px;
}

.bb-reel-stage::before,
.bb-reel-stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 42px;
    pointer-events: none;
    z-index: 2;
}

.bb-reel-stage::before {
    top: 0;
    background: linear-gradient(to bottom, #ffffff, transparent);
}

.bb-reel-stage::after {
    bottom: 0;
    background: linear-gradient(to top, #ffffff, transparent);
}

.bb-reel-window {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    height: 44px;
    border-top: 3px dashed var(--app-theme-color, var(--color-purple));
    border-bottom: 3px dashed var(--app-theme-color, var(--color-purple));
    z-index: 1;
    pointer-events: none;
}

.bb-reel-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 2.2s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.bb-reel-item {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--text-main);
    flex-shrink: 0;
}

.bb-reel-item i {
    width: 1.35rem;
    height: 1.35rem;
    color: var(--app-theme-color, var(--color-purple));
}

.bb-reel-stage.spinning .bb-reel-item {
    opacity: 0.55;
}

.bb-activity-card {
    max-width: 640px;
    margin: 0 auto 1.75rem;
    background: transparent;
    border: none;
    border-radius: 28px;
    padding: 2rem;
    text-align: center;
    box-shadow: none;
    animation: bb-card-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes bb-card-pop {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.bb-activity-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.bb-activity-body {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--text-main);
    font-weight: 600;
}

.bb-activity-tag {
    display: inline-block;
    margin-top: 1rem;
    background: var(--app-theme-color-light, var(--color-purple));
    color: var(--app-theme-color-dark, var(--color-purple-dark));
    border: 2px solid var(--app-theme-color-dark, var(--color-purple-dark));
    border-radius: 50px;
    padding: 0.3rem 1rem;
    font-weight: 800;
    font-size: 0.85rem;
}

.bb-breath-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
}

.bb-breath-svg {
    width: 220px;
    height: 220px;
}

.bb-breath-ring-bg {
    fill: none;
    stroke: color-mix(in oklch, var(--color-blue) 18%, transparent);
    stroke-width: 6;
}

.bb-breath-circle {
    fill: color-mix(in oklch, var(--color-blue) 22%, white);
    stroke: var(--color-blue);
    stroke-width: 5;
    transform-origin: 110px 110px;
    transition: r 4s ease-in-out, transform 4s ease-in-out;
}

.bb-breath-label {
    font-size: 1.6rem;
    font-weight: 800;
    fill: var(--color-blue-dark);
    text-anchor: middle;
    dominant-baseline: middle;
    transition: opacity 0.3s;
}

.bb-breath-instruction {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--color-blue-dark);
}

.bb-controls-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.bb-icon-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--border-color);
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--border-color);
}

.bb-icon-toggle:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--border-color);
}

.bb-icon-toggle.muted {
    background: #fee2e2;
    color: #b91c1c;
}

/* ---- Brain Break: "My Activities" manager ---- */

.bb-manage-panel {
    max-width: 640px;
    margin: 1.5rem auto 0;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 22px;
    box-shadow: 0 6px 0 var(--border-color);
    padding: 1.5rem;
    text-align: left;
}

.bb-manage-panel h3 {
    margin: 0 0 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
}

.bb-manage-hint {
    margin: 0 0 1.1rem;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
}

.bb-manage-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.bb-manage-form > label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-weight: 800;
    font-size: 0.9rem;
}

.bb-manage-form select,
.bb-manage-form input[type="text"],
.bb-manage-form textarea {
    font: inherit;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    background: #fff;
    width: 100%;
}

.bb-manage-form textarea {
    resize: vertical;
    min-height: 3.5rem;
}

.bb-manage-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
}

.bb-manage-check input {
    margin-top: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.bb-manage-error {
    margin: 0;
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.9rem;
}

.bb-manage-actions {
    display: flex;
    justify-content: flex-end;
}

.bb-manage-list {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bb-manage-empty {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.92rem;
}

.bb-manage-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-subtle, #f8f8fb);
}

.bb-manage-item-main {
    flex: 1;
    min-width: 0;
}

.bb-manage-item-mode {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.1rem 0.5rem;
    border-radius: 50px;
    border: 2px solid currentColor;
    margin-bottom: 0.35rem;
}

.bb-manage-mode-energiser { color: var(--color-red-dark); }
.bb-manage-mode-calm { color: var(--color-blue-dark); }
.bb-manage-mode-logic { color: var(--color-purple-dark); }

.bb-manage-item-title {
    display: block;
    font-weight: 800;
    font-size: 1rem;
}

.bb-manage-item-body {
    margin: 0.2rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
}

.bb-manage-delete {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b91c1c;
}

.bb-manage-delete:hover {
    background: #fee2e2;
}

.bb-activity-tag-own {
    background: #fef9c3;
    color: #854d0e;
    border-color: #854d0e;
    margin-left: 0.4rem;
}

/* ============ FLUENCY SPRINT ============ */

/* Top: every setup control (mode, key stage, duration, live stats) in one
   full-width band, like a toolbar - matches the .puzzle-toolbar pattern
   used by the classroom-puzzle-screen apps. */
.fs-top-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    width: 100%;
    margin-bottom: 1rem;
}

/* Middle: question on the left, keypad on the right - the two things a
   pupil is actually looking at and tapping, given equal weight. */
.fs-main-row {
    display: flex;
    gap: 2rem;
    align-items: stretch;
    width: 100%;
}

.fs-question-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.fs-keypad-col {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-mode-row {
    margin-bottom: 0;
}

.fs-duration-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    flex-wrap: wrap;
}

.fs-stats-row {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.fs-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 18px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 4px 0 var(--border-color);
    min-width: 90px;
}

.fs-stat-value {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-purple-dark);
}

.fs-stat-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.fs-bottom-timer {
    max-width: none;
    width: 100%;
    margin: 1.5rem 0 0;
}

.fs-stage {
    max-width: 480px;
    margin: 0 auto;
    background: transparent;
    border: none;
    border-radius: 26px;
    padding: 1.75rem;
    text-align: center;
    box-shadow: none;
}

.fs-question {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 4.2rem);
    font-weight: 800;
    color: var(--text-main);
}

.fs-answer-readout {
    margin-top: 0.75rem;
    min-height: 2.6rem;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-blue-dark);
    border-bottom: 4px solid var(--color-blue);
    display: inline-block;
    min-width: 4rem;
    padding: 0 0.5rem;
}

.fs-stage.correct {
    animation: fs-flash-correct 0.4s ease;
}

.fs-stage.wrong {
    animation: fs-flash-wrong 0.4s ease;
}

@keyframes fs-flash-correct {
    0% { background: color-mix(in oklch, var(--color-green) 45%, white); }
    100% { background: #ffffff; }
}

@keyframes fs-flash-wrong {
    0% { background: color-mix(in oklch, var(--color-red) 35%, white); }
    100% { background: #ffffff; }
}

.fs-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 1.1rem;
    max-width: 620px;
    width: 100%;
    height: 100%;
    max-height: 620px;
    aspect-ratio: 3 / 4;
    margin: 0 auto;
}

.fs-keypad .fs-key {
    aspect-ratio: auto;
}

.fs-key {
    aspect-ratio: 1;
    border: 3px solid var(--border-color);
    border-radius: 20px;
    background: #ffffff;
    font-family: var(--font-display);
    font-size: 3.2rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 0 var(--border-color);
    transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}

.fs-key:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--border-color);
}

.fs-key:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 var(--border-color);
}

.fs-key.fs-key-enter {
    background: var(--color-green);
    border-color: var(--color-green-dark);
    box-shadow: 0 4px 0 var(--color-green-dark);
    color: #06381f;
}

.fs-key.fs-key-back {
    background: #fee2e2;
    border-color: #b91c1c;
    box-shadow: 0 4px 0 #b91c1c;
    color: #7f1d1d;
}

.fs-controls-row {
    display: flex;
    justify-content: center;
    margin: 0;
}

.fs-summary {
    max-width: 480px;
    margin: 0 auto;
    background: color-mix(in oklch, var(--color-purple) 20%, white);
    border: 3px solid var(--color-purple-dark);
    border-radius: 22px;
    padding: 1.5rem;
    text-align: center;
}

.fs-summary h3 {
    margin-top: 0;
}

/* ============ TEAM SHUFFLER ============ */

.ts-controls-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.ts-team-count {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ts-avoid-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

.ts-avoid-toggle input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ts-roster-status {
    text-align: center;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.ts-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    max-width: 1000px;
    margin: 0 auto 2rem;
}

.ts-team-card {
    background: #ffffff;
    border: 4px solid var(--team-color, var(--border-color));
    border-radius: 22px;
    padding: 1.1rem;
    box-shadow: 0 6px 0 var(--team-color, var(--border-color));
}

.ts-team-heading {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--team-color, var(--border-color));
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ts-team-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.ts-team-list li {
    background: color-mix(in oklch, var(--team-color, var(--color-blue)) 12%, white);
    border-radius: 10px;
    padding: 0.4rem 0.7rem;
    font-weight: 700;
    opacity: 0;
    animation: ts-deal-in 0.35s ease forwards;
}

@keyframes ts-deal-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.9);
    }

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

/* ============ WORD CLOUD LIVE ============ */

.wcl-setup-panel {
    max-width: 560px;
    margin: 0 auto 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.wcl-setup-panel[hidden] {
    display: none;
}

.wcl-question-input {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 3px solid var(--border-color);
    border-radius: 18px;
    font-size: 1.15rem;
    font-weight: 700;
    box-sizing: border-box;
    text-align: center;
}

.wcl-question-display {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    max-width: 700px;
    margin: 0 auto 1rem;
}

.wcl-status-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.wcl-qr {
    background: #ffffff;
    border: 3px solid var(--border-color);
    border-radius: 14px;
    padding: 0.4rem;
    line-height: 0;
}

.wcl-qr canvas {
    display: block;
    width: 84px;
    height: 84px;
}

.wcl-cloud {
    max-width: 900px;
    min-height: 260px;
    margin: 0 auto 1.5rem;
    background: #ffffff;
    border: 4px solid var(--border-color);
    border-radius: 26px;
    box-shadow: 0 8px 0 var(--border-color);
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
}

.wcl-cloud-empty {
    color: var(--text-muted);
    font-weight: 700;
    font-style: italic;
}

.wcl-word {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1;
    display: inline-block;
    animation: wcl-pop-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
    transform: rotate(var(--wcl-rot, 0deg));
}

@keyframes wcl-pop-in {
    from {
        opacity: 0;
        transform: rotate(var(--wcl-rot, 0deg)) scale(0.5);
    }

    to {
        opacity: 1;
        transform: rotate(var(--wcl-rot, 0deg)) scale(1);
    }
}

.wcl-controls-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}