/* ==========================================================================
   Sophicly Keystone — v3.1.16 styles
   Brand: Sophicly purple → teal. Replaces CodePen lime/black palette.
   ========================================================================== */

.sck-widget {
    --sck-bg-from:   #2c003e;
    --sck-bg-to:     #5333ed;
    --sck-surface:   rgba(20, 6, 36, 0.72);
    --sck-surface-2: rgba(255, 255, 255, 0.04);
    --sck-border:    rgba(255, 255, 255, 0.08);
    --sck-border-on: rgba(81, 218, 207, 0.35);
    --sck-text:      #f5f0ff;
    --sck-muted:     rgba(245, 240, 255, 0.45);
    --sck-accent:    #51dacf;
    --sck-accent-glow: rgba(81, 218, 207, 0.18);
    --sck-success:   #1CD991;
    --sck-danger:    #ff6b6b;
    --sck-danger-glow: rgba(255, 107, 107, 0.12);

    display: block;
    width: 100%;
    margin: 24px auto;
    max-width: 720px;
    font-family: 'Proxima Soft Complete', 'Inter', system-ui, sans-serif;
}

.sck-root {
    background: linear-gradient(140deg, var(--sck-bg-from) 0%, var(--sck-bg-to) 100%);
    border-radius: 24px;
    padding: clamp(20px, 4vw, 32px);
    color: var(--sck-text);
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vw, 24px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 52px -12px rgba(44, 0, 62, 0.4);
}

/* ── Header ───────────────────────────────────────────────────────── */

.sck-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sck-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sck-title {
    font-size: clamp(0.78rem, 2vw, 0.85rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-q-counter {
    font-size: 0.75rem;
    color: var(--sck-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;
}

.sck-prompt {
    font-size: clamp(1.05rem, 2.6vw, 1.28rem);
    line-height: 1.45;
    color: var(--sck-text);
    font-weight: 500;
}

.sck-lives-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.sck-lives-label {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sck-muted);
}

.sck-lives {
    display: flex;
    gap: 6px;
}

.sck-life {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--sck-accent);
    transition: background 0.3s, transform 0.3s;
}

.sck-life--lost {
    background: var(--sck-border);
    transform: scale(0.65);
}

/* ── Grid ─────────────────────────────────────────────────────────── */

.sck-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 12px);
}

@media (max-width: 380px) {
    .sck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sck-card {
    background: var(--sck-surface);
    border: 1px solid var(--sck-border);
    border-radius: 14px;
    padding: clamp(12px, 2.6vw, 16px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 1.8vw, 12px);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.12s, box-shadow 0.18s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 84px;
}

.sck-card:not(.sck-card--locked):active {
    transform: scale(0.97);
}

.sck-card:not(.sck-card--locked):hover {
    border-color: rgba(81, 218, 207, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.sck-card--locked {
    cursor: default;
}

.sck-card--on {
    border-color: var(--sck-border-on);
    background: var(--sck-accent-glow);
    box-shadow: 0 0 0 1px var(--sck-border-on) inset;
}

.sck-card--cascade {
    border-color: var(--sck-border-on);
    background: var(--sck-accent-glow);
    box-shadow: 0 0 0 1px var(--sck-border-on) inset, 0 0 22px -6px var(--sck-accent-glow);
    animation: sck-pop 0.36s ease forwards;
}

.sck-card--wrong {
    border-color: rgba(255, 107, 107, 0.45);
    background: var(--sck-danger-glow);
    animation: sck-shake 0.36s ease;
}

.sck-card-label {
    font-size: clamp(0.86rem, 2.2vw, 0.95rem);
    font-weight: 500;
    color: var(--sck-text);
    line-height: 1.25;
    flex: 1;
}

.sck-card-toggle {
    width: 32px;
    height: 18px;
    border-radius: 40px;
    background: var(--sck-border);
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.sck-card-toggle::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sck-muted);
    top: 2px;
    left: 2px;
    transition: transform 0.22s, background 0.2s;
}

.sck-card--on .sck-card-toggle,
.sck-card--cascade .sck-card-toggle {
    background: var(--sck-accent);
    border-color: var(--sck-accent);
}

.sck-card--on .sck-card-toggle::after,
.sck-card--cascade .sck-card-toggle::after {
    transform: translateX(13px);
    background: var(--sck-bg-from);
}

.sck-card-value {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: clamp(0.78rem, 1.8vw, 0.85rem);
    color: var(--sck-muted);
    transition: color 0.2s;
    letter-spacing: 0.04em;
}

.sck-card--on .sck-card-value,
.sck-card--cascade .sck-card-value {
    color: var(--sck-accent);
}

@keyframes sck-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

@keyframes sck-pop {
    0%   { transform: scale(0.92); opacity: 0.6; }
    50%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ── Footer ───────────────────────────────────────────────────────── */

.sck-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--sck-border);
    padding-top: clamp(12px, 2.6vw, 16px);
}

.sck-attempts {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--sck-muted);
    letter-spacing: 0.06em;
}

.sck-attempts span { color: var(--sck-text); }

.sck-restart {
    font-family: inherit;
    font-size: 0.72rem;
    color: var(--sck-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--sck-border);
    padding: 8px 16px;
    border-radius: 40px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    min-height: 36px;
    font-weight: 500;
}

.sck-restart:hover {
    border-color: var(--sck-accent);
    color: var(--sck-text);
}

/* ── Overlay ──────────────────────────────────────────────────────── */

.sck-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(20, 6, 36, 0.96) 0%, rgba(44, 0, 62, 0.96) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: clamp(20px, 5vw, 36px);
    border-radius: 24px;
    text-align: center;
    animation: sck-overlay-in 0.34s ease forwards;
}

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

.sck-overlay-title {
    font-size: clamp(1rem, 3vw, 1.2rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-overlay-title--lose {
    color: var(--sck-danger);
}

.sck-overlay-master {
    font-size: 0.92rem;
    color: var(--sck-text);
    letter-spacing: 0.04em;
}

.sck-overlay-master strong {
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-overlay-explanation {
    font-size: clamp(0.9rem, 2.3vw, 1rem);
    color: var(--sck-text);
    line-height: 1.55;
    font-weight: 400;
    max-width: 560px;
    opacity: 0.92;
}

.sck-overlay-meta {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--sck-muted);
    letter-spacing: 0.06em;
}

.sck-overlay-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.sck-btn {
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 12px 24px;
    border-radius: 40px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    font-weight: 600;
    min-height: 44px;
}

.sck-btn--primary {
    background: var(--sck-accent);
    color: var(--sck-bg-from);
    border-color: var(--sck-accent);
}

.sck-btn--primary:hover {
    background: #7DF9E9;
    border-color: #7DF9E9;
}

.sck-btn--ghost {
    background: transparent;
    color: var(--sck-text);
    border-color: var(--sck-border);
}

.sck-btn--ghost:hover {
    border-color: var(--sck-accent);
    color: var(--sck-accent);
}

.sck-empty {
    padding: 24px;
    text-align: center;
    color: var(--sck-muted);
    font-style: italic;
}

/* ── v3.1.19 additions ────────────────────────────────────────────── */

.sck-loading {
    padding: 48px 24px;
    text-align: center;
    color: var(--sck-muted);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sck-progress {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--sck-muted);
    letter-spacing: 0.06em;
}

.sck-progress span { color: var(--sck-text); }

/* Per-Q flash after cascade-win — short overlay before auto-advance. */
.sck-q-flash {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    margin: 0 auto;
    padding: clamp(14px, 3vw, 20px) clamp(16px, 4vw, 28px);
    max-width: 92%;
    background: rgba(13, 4, 25, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--sck-border);
    border-radius: 0 0 24px 24px;
    animation: sck-overlay-in 0.34s ease forwards;
    z-index: 5;
}

.sck-q-flash-explanation {
    font-size: clamp(0.86rem, 2.1vw, 0.94rem);
    color: var(--sck-text);
    line-height: 1.55;
    text-align: center;
    opacity: 0.92;
}

/* End-card — full-game summary on game_over. */
.sck-root--complete {
    /* Same layout as in-game; just swaps grid for endcard. */
}

.sck-endcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 22px);
    padding: clamp(16px, 4vw, 28px) 0;
    text-align: center;
}

.sck-endcard-headline {
    font-size: clamp(1.1rem, 3.2vw, 1.4rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-endcard-headline--lose {
    color: var(--sck-danger);
}

/* ── Results Banner (branded score + GCSE grade) ──────────────────────── */
/* Mirror of scenario's .scs-results-banner, swapped to the keystone prefix
   and dark surface. Grade-tinted gradient layered via inline backgroundImage
   (GRADE_PANEL). No border — the tint defines the edge. */

.sck-results-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    padding: 18px 22px;
    border-radius: 14px;
    color: var(--sck-text);
    background-color: var(--sck-surface-2);
    animation: none;
}
.sck-results-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
}
.sck-results-note {
    font-size: 13px;
    font-weight: 500;
    color: var(--sck-muted);
    line-height: 1.4;
}
.sck-results-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sck-muted);
}
.sck-results-fraction { font-size: 26px; font-weight: 800; line-height: 1; }
.sck-results-pct {
    font-size: 14px;
    font-weight: 600;
    color: var(--sck-muted);
}
.sck-results-grade {
    margin-left: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    align-self: center;
    /* background + color set inline per grade (canonical GRADE_BG scale) */
}

.sck-endcard-score {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.sck-endcard-score-num {
    font-size: clamp(2.4rem, 8vw, 3.4rem);
    font-weight: 600;
    color: var(--sck-accent);
    line-height: 1;
}

.sck-endcard-score-of {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    color: var(--sck-muted);
    font-weight: 400;
}

.sck-endcard-score-pct {
    font-size: clamp(0.95rem, 2.4vw, 1.05rem);
    color: var(--sck-text);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.sck-endcard-band {
    font-size: clamp(0.9rem, 2.3vw, 1rem);
    color: var(--sck-text);
    letter-spacing: 0.04em;
    font-style: italic;
    opacity: 0.88;
}

.sck-endcard-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 560px;
    margin-top: 8px;
}

.sck-endcard-q {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--sck-border);
    background: var(--sck-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    text-align: center;
}

.sck-endcard-q--won {
    border-color: var(--sck-border-on);
    background: var(--sck-accent-glow);
}

.sck-endcard-q--lost {
    border-color: rgba(255, 107, 107, 0.35);
    background: var(--sck-danger-glow);
}

.sck-endcard-q-idx {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.72rem;
    color: var(--sck-muted);
    letter-spacing: 0.06em;
}

.sck-endcard-q-status {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--sck-text);
}

.sck-endcard-q--won .sck-endcard-q-status { color: var(--sck-accent); }
.sck-endcard-q--lost .sck-endcard-q-status { color: var(--sck-danger); }

.sck-endcard-q-meta {
    font-size: 0.7rem;
    color: var(--sck-muted);
    letter-spacing: 0.03em;
}

.sck-endcard-note {
    font-size: 0.8rem;
    color: var(--sck-muted);
    max-width: 480px;
    line-height: 1.5;
    font-style: italic;
    margin-top: 8px;
}

/* v3.1.22: retry-to-100% encouragement when student has not yet mastered. */
.sck-endcard-aim {
    font-size: 0.92rem;
    color: var(--sck-accent);
    max-width: 520px;
    line-height: 1.55;
    text-align: center;
    margin-top: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(115, 247, 220, 0.28);
    border-radius: 14px;
    background: rgba(115, 247, 220, 0.06);
}

/* ── v3.1.20 additions / v3.1.21 centered modal ───────────────────── */

/* Dim + blur backdrop so review panel reads as a true modal, not a
   bottom-anchored card competing with the grid behind it. */
.sck-q-review-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 2, 16, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 7;
    animation: sck-overlay-in 0.22s ease forwards;
    pointer-events: auto;
    overscroll-behavior: contain;
}

/* Persistent per-Q review panel — centered modal over the grid. */
.sck-q-review-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 560px;
    max-height: calc(100% - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(140deg, rgba(20, 6, 36, 0.98) 0%, rgba(44, 0, 62, 0.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--sck-border);
    border-radius: 18px;
    padding: clamp(18px, 3vw, 26px) clamp(20px, 4vw, 30px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 8;
    animation: sck-overlay-in 0.32s ease forwards;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
}

.sck-q-review-panel--lost {
    border-color: rgba(255, 107, 107, 0.32);
}

.sck-q-review-headline {
    font-size: clamp(0.86rem, 2.2vw, 0.96rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-q-review-headline--lost {
    color: var(--sck-danger);
}

.sck-q-review-master {
    font-size: clamp(0.86rem, 2.2vw, 0.94rem);
    color: var(--sck-text);
}

.sck-q-review-master strong {
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-q-review-explanation {
    font-size: clamp(0.88rem, 2.2vw, 0.96rem);
    color: var(--sck-text);
    line-height: 1.55;
    opacity: 0.92;
}

.sck-q-review-meta {
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.74rem;
    color: var(--sck-muted);
    letter-spacing: 0.06em;
}

.sck-q-review-panel .sck-btn {
    align-self: flex-end;
    margin-top: 4px;
}

/* End-card Q tiles — clickable variant. */
.sck-endcard-q--clickable {
    cursor: pointer;
    transition: transform 0.14s, box-shadow 0.18s, border-color 0.18s;
}

.sck-endcard-q--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.4);
    border-color: var(--sck-accent);
}

.sck-endcard-q-review-hint {
    font-size: 0.66rem;
    color: var(--sck-muted);
    margin-top: 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sck-endcard-q--clickable:hover .sck-endcard-q-review-hint {
    color: var(--sck-accent);
}

/* Review modal — opens from end-card Q tile click. */
.sck-review-modal {
    position: fixed;
    inset: 0;
    background: rgba(8, 2, 16, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 3vw, 24px);
    z-index: 100;
    animation: sck-overlay-in 0.28s ease forwards;
}

.sck-review-modal-card {
    background: linear-gradient(140deg, #2c003e 0%, #5333ed 100%);
    border-radius: 22px;
    padding: clamp(20px, 4vw, 32px);
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    color: var(--sck-text);
    box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.4vw, 18px);
}

.sck-review-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: 1px solid var(--sck-border);
    color: var(--sck-text);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.sck-review-modal-close:hover {
    border-color: var(--sck-accent);
    color: var(--sck-accent);
}

.sck-review-modal-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sck-accent);
    font-weight: 600;
}

.sck-review-modal-prompt {
    font-size: clamp(0.98rem, 2.4vw, 1.1rem);
    line-height: 1.45;
    color: var(--sck-text);
}

.sck-review-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2vw, 12px);
}

.sck-review-modal-grid .sck-card {
    min-height: 64px;
    position: relative;
}

.sck-card--master-reveal {
    outline: 2px solid var(--sck-accent);
    outline-offset: -2px;
}

.sck-card-master-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--sck-accent);
    color: var(--sck-bg-from);
    font-family: 'Playfair Display Complete', 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
}

.sck-review-modal-explanation {
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--sck-text);
    opacity: 0.92;
}

.sck-review-modal-nav {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sck-review-modal-nav .sck-btn {
    flex: 1;
    min-width: 110px;
}

.sck-review-modal-nav .sck-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}