@import url('/assets/css/theme.css');

/* ============================================
   Activity Maker — Player Styles
   Learner-facing game pages
   --------------------------------------------
   Tokens (--pl-*, --ls-*) live in /assets/css/theme.css.
   Reset (* margin/padding/box-sizing) lives there too.
   ============================================ */

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--pl-paper);
    color: var(--pl-ink);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Loading ---- */
.player-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1rem;
    color: var(--pl-muted);
}

.player-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--pl-border);
    border-top-color: var(--pl-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---- Start Screen ---- */
.player-start {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    background: var(--pl-paper);
}

.player-start-inner {
    text-align: center;
    max-width: 450px;
    animation: startFadeIn 0.5s ease;
}

@keyframes startFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.player-start-icon {
    font-size: 4.5rem;
    margin-bottom: 1.25rem;
}

.player-start-title {
    font-family: 'Fraunces', serif;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--pl-ink);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.player-start-desc {
    color: var(--pl-muted);
    font-size: 1.05rem;
    margin-bottom: 2.5rem;
}

.player-start-btn {
    padding: 1.15rem 3.5rem;
    font-size: 1.25rem;
    border-radius: var(--pl-radius);
    animation: startPulse 2s ease-in-out infinite;
}

@keyframes startPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(45,106,79,0.3); }
    50% { box-shadow: 0 0 0 14px rgba(45,106,79,0); }
}

.player-start-actions {
    margin-top: 1rem;
}

.player-fs-start-btn {
    padding: 0.55rem 1.5rem;
    font-size: 0.9rem;
    min-height: auto;
}

.player-start-hint {
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--pl-muted);
    opacity: 0.6;
}

/* ---- Error ---- */
.player-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
}

.player-error-icon { font-size: 4rem; margin-bottom: 1rem; }
.player-error h2 { font-family: 'Fraunces', serif; margin-bottom: 0.5rem; }
.player-error p { color: var(--pl-muted); margin-bottom: 1.5rem; }

/* ---- Game Container ----
   Fills the whole viewport. The stage inside scales responsively
   so the playable area is as large as the window allows, with a
   small breathing-room buffer. Works the same in fullscreen or not. */
.player-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    margin: 0 auto;
    padding: 0.65rem 1rem;
    box-sizing: border-box;
}

.player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.player-title {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--pl-ink);
}

.player-progress {
    font-size: 1.15rem;
    color: var(--pl-ink);
    font-weight: 700;
    background: var(--pl-paper);
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    min-width: 64px;
    text-align: center;
}

.player-game {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    min-height: 0;
    width: 100%;
}

.player-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.45rem 0 0.65rem;
    font-size: 0.75rem;
    color: var(--pl-muted);
    flex-shrink: 0;
}

.player-footer a {
    color: var(--pl-primary);
    text-decoration: none;
}

/* ---- Buttons ---- */
.player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 2rem;
    border: none;
    border-radius: var(--pl-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: white;
    background: var(--pl-primary);
    transition: all 0.15s ease;
    min-height: 48px;
}

.player-btn:hover { background: var(--pl-primary-light); }
.player-btn:active { transform: scale(0.97); }

.player-btn-outline {
    background: transparent;
    color: var(--pl-primary);
    border: 2px solid var(--pl-primary);
}
.player-btn-outline:hover {
    background: var(--pl-primary-pale);
}

.player-btn-accent {
    background: var(--pl-accent);
}
.player-btn-accent:hover { background: #d9634a; }

.player-btn-lg {
    padding: 1rem 3rem;
    font-size: 1.15rem;
    border-radius: var(--pl-radius);
}

/* ---- Flash Cards ---- */
.fc-scene {
    width: 100%;
    max-width: 500px;
    perspective: 1000px;
    margin: 0 auto;
}

.fc-card {
    width: 100%;
    aspect-ratio: 3/2;
    position: relative;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.fc-card.flipped {
    transform: rotateY(180deg);
}

.fc-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--pl-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    box-shadow: var(--pl-shadow);
    overflow: hidden;
}

.fc-front {
    background: var(--pl-card-bg);
    border: 3px solid var(--pl-primary);
}

.fc-back {
    background: var(--pl-primary);
    color: white;
    transform: rotateY(180deg);
}

.fc-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.fc-text {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

/* Card images — auto-fit within card */
.fc-image {
    margin-bottom: 0.5rem;
    max-width: 100%;
    max-height: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-image img {
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
}

/* TTS button on cards */
.fc-tts-btn {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(0,0,0,0.08);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.fc-tts-btn:hover {
    background: rgba(0,0,0,0.15);
    transform: scale(1.1);
}

.fc-back .fc-tts-btn {
    background: rgba(255,255,255,0.2);
}

.fc-back .fc-tts-btn:hover {
    background: rgba(255,255,255,0.35);
}

/* Single-sided card (no flip) */
.fc-card.fc-single {
    cursor: default;
}

.fc-card.fc-single .fc-face {
    backface-visibility: visible;
}

.fc-hint {
    margin-top: 1rem;
    font-size: 0.8rem;
    opacity: 0.5;
}

.fc-nav {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 500px;
    justify-content: center;
}

.fc-nav-btn {
    padding: 0.75rem 2rem;
    border: 2px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    background: white;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 48px;
    flex: 1;
    max-width: 200px;
}

.fc-nav-btn:hover {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
}

.fc-nav-btn:active {
    transform: scale(0.97);
}

.fc-nav-btn.fc-know {
    background: var(--pl-primary);
    border-color: var(--pl-primary);
    color: white;
}

.fc-nav-btn.fc-know:hover {
    background: var(--pl-primary-light);
}

/* ---- Quiz ---- */
.quiz-question {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;         /* centre horizontally inside .pl-stage-main */
    align-self: center;     /* belt & braces for the column flex parent */
    text-align: center;
}

.quiz-question-image {
    margin-bottom: 1.25rem;
}

.quiz-question-image img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--pl-radius-sm);
    box-shadow: var(--pl-shadow-sm);
}

.quiz-question-text {
    font-family: 'Fraunces', serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.4;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.quiz-tts-btn {
    background: rgba(0,0,0,0.08);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
    vertical-align: middle;
}

.quiz-tts-btn:hover {
    background: rgba(0,0,0,0.15);
    transform: scale(1.1);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-option {
    padding: 1rem 1.25rem;
    background: var(--pl-card-bg);
    border: 3px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    min-height: 56px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quiz-option:hover {
    border-color: var(--pl-primary);
    background: var(--pl-primary-pale);
}

.quiz-option.correct {
    border-color: var(--pl-correct);
    background: var(--pl-correct-bg);
    color: var(--pl-correct);
}

.quiz-option.wrong {
    border-color: var(--pl-wrong);
    background: var(--pl-wrong-bg);
    color: var(--pl-wrong);
}

.quiz-option.disabled {
    pointer-events: none;
    opacity: 0.5;
}

.quiz-option.disabled.correct {
    opacity: 1;
}

.quiz-option-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pl-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* Optional image inside a quiz option (square thumbnail on the left) */
.quiz-option-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Option text: allow rich formatting from sanitizeRich to render inline */
.quiz-option-text {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Option speaker icon — lets the learner replay the answer without picking it */
.quiz-option-tts {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    font-size: 1.05rem;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.12s, background 0.12s;
}

.quiz-option-tts:hover {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.08);
}

.quiz-next {
    margin-top: 1.5rem;
}

/* ---- Match Up ---- */
.mu-container {
    width: 100%;
    max-width: 700px;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.mu-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mu-column-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pl-muted);
    margin-bottom: 0.25rem;
    text-align: center;
}

.mu-item {
    padding: 0.85rem 1rem;
    background: var(--pl-card-bg);
    border: 3px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    user-select: none;
    position: relative;
    flex-wrap: wrap;
}

.mu-item-img {
    max-width: 80px;
    max-height: 60px;
    object-fit: contain;
    border-radius: 6px;
}

.mu-item-text {
    flex: 1;
    min-width: 0;
}

.mu-tts-btn {
    background: rgba(0,0,0,0.08);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.mu-tts-btn:hover {
    background: rgba(0,0,0,0.15);
    transform: scale(1.1);
}

.mu-item:hover {
    border-color: var(--pl-primary);
}

.mu-item.selected {
    border-color: var(--pl-accent);
    background: var(--pl-accent-pale);
    box-shadow: 0 0 0 2px var(--pl-accent);
}

.mu-item.matched {
    border-color: var(--pl-correct);
    background: var(--pl-correct-bg);
    color: var(--pl-correct);
    pointer-events: none;
    opacity: 0.7;
}

.mu-item.wrong-flash {
    animation: wrongShake 0.4s ease;
    border-color: var(--pl-wrong);
    background: var(--pl-wrong-bg);
}

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

/* ---- Completion ---- */
.player-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    background: var(--pl-paper);
}

.player-complete-inner {
    text-align: center;
    max-width: 400px;
}

.player-complete-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: celebrateBounce 0.6s ease;
}

@keyframes celebrateBounce {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.player-complete h2 {
    font-family: 'Fraunces', serif;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.player-complete p {
    color: var(--pl-muted);
    margin-bottom: 1.5rem;
}

.player-complete-score {
    margin: 1.5rem 0 2rem;
}

.player-score-ring {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--pl-primary) calc(var(--pct) * 1%), var(--pl-border) 0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
}

.player-score-ring::before {
    content: '';
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--pl-paper);
    position: absolute;
}

.player-score-ring span {
    position: relative;
    z-index: 1;
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--pl-primary);
}

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

/* ---- Review List (end of game) ---- */
.player-complete-review {
    text-align: left;
    margin-bottom: 1.5rem;
}

.review-list h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.review-item {
    padding: 0.75rem 1rem;
    border-radius: var(--pl-radius-sm);
    margin-bottom: 0.5rem;
    border-left: 4px solid var(--pl-border);
    background: var(--pl-card-bg);
}

.review-item.review-correct {
    border-left-color: var(--pl-correct);
}

.review-item.review-wrong {
    border-left-color: var(--pl-wrong);
}

.review-q {
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.review-a {
    font-size: 0.9rem;
    color: var(--pl-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.review-correct-a {
    font-size: 0.9rem;
    color: var(--pl-correct);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.review-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--pl-border);
    background: #fff;
    flex-shrink: 0;
}

.review-audio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--pl-border);
    background: #fff;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--pl-ink);
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.review-audio-btn:hover {
    background: var(--pl-bg-soft, #f1f5f9);
}

.review-audio-btn:active {
    transform: scale(0.94);
}

.review-empty {
    font-style: italic;
    opacity: 0.7;
}

/* ---- Options Panel (start screen) ---- */
.player-start-layout {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5rem;
    width: 100%;
    max-width: 900px;
}

.po-panel {
    width: 340px;
    flex-shrink: 0;
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-sm);
    border: 1px solid var(--pl-border);
    animation: startFadeIn 0.5s ease;
    overflow: hidden;
}

.po-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid var(--pl-border);
}

.po-title {
    font-weight: 700;
    font-size: 1rem;
}

.po-save-status {
    font-size: 0.8rem;
    font-weight: 500;
    transition: opacity 0.3s;
}

.po-save-status.saving { color: var(--pl-muted); font-style: italic; }
.po-save-status.saved { color: var(--pl-correct); }
.po-save-status.error { color: var(--pl-wrong); }

.po-toggle {
    display: none;
    width: 100%;
    padding: 0.75rem;
    background: var(--pl-card-bg);
    border: 1px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--pl-ink);
}

.po-body {
    padding: 0.5rem 1.15rem 1rem;
}

.po-group {
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--pl-border);
}

.po-group:last-child {
    border-bottom: none;
}

.po-group-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pl-muted);
    margin-bottom: 0.5rem;
}

.po-group-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Radio groups — inline when few options */
.po-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.po-radio, .po-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 32px;
}

.po-radio input, .po-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--pl-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.po-number {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.po-number input {
    width: 56px;
    padding: 0.35rem 0.5rem;
    border: 2px solid var(--pl-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9rem;
    text-align: center;
    outline: none;
}

.po-number input:focus {
    border-color: var(--pl-primary);
}

.po-number-label {
    font-size: 0.85rem;
    color: var(--pl-muted);
    font-weight: 500;
}

.po-range {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.po-range input[type="range"] {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--pl-border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.po-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pl-primary);
    cursor: pointer;
}

.po-range input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--pl-primary);
    border: none;
    cursor: pointer;
}

.po-range-value {
    font-size: 0.9rem;
    font-weight: 700;
    min-width: 70px;
    text-align: center;
    color: var(--pl-ink);
    background: var(--pl-paper);
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}

/* ---- Timer & Lives (game header) ----
   These sit top-right while the game is running. They need to be readable
   from across the room for the QQI Level 1-3 audience, so the font sizes
   are deliberately big and the pills have generous padding. */
.player-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.player-timer {
    font-family: 'DM Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--pl-primary);
    background: var(--pl-primary-pale);
    padding: 0.5rem 1.1rem;
    border-radius: 24px;
    min-width: 84px;
    text-align: center;
    letter-spacing: 0.02em;
}

.player-timer.warning {
    color: var(--pl-wrong);
    background: var(--pl-wrong-bg);
    animation: timerPulse 0.5s ease infinite alternate;
}

@keyframes timerPulse {
    to { transform: scale(1.05); }
}

.player-lives {
    font-size: 1.6rem;
    letter-spacing: 4px;
    color: var(--pl-wrong);
    line-height: 1;
}

/* Fullscreen toggle button */
.player-fs-btn {
    background: none;
    border: 2px solid var(--pl-border);
    border-radius: 10px;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pl-muted);
    transition: all 0.15s;
    flex-shrink: 0;
}

.player-fs-btn:hover {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
    background: var(--pl-primary-pale);
}

/* ---- Match Up: Mixed Layout ---- */
.mu-mixed-grid {
    width: 100%;
    max-width: 700px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.mu-mixed-grid .mu-item {
    min-height: 64px;
}

/* ---- Match Up: Pagination ---- */
.mu-page-nav {
    margin-top: 1.5rem;
    text-align: center;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .player-start-layout {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .po-panel {
        width: 100%;
        max-width: 500px;
    }

    /* On mobile, hide the card header and use the toggle button instead */
    .po-header {
        display: none;
    }

    .po-toggle {
        display: block;
    }

    .po-body {
        display: none;
    }

    .po-body.open {
        display: block;
    }

    .po-panel .po-save-status {
        display: block;
        text-align: center;
        padding: 0.25rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 600px) {
    .player-container {
        padding: 0.75rem;
    }

    .player-start-title {
        font-size: 1.6rem;
    }

    .player-start-btn {
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
    }

    .fc-text {
        font-size: 1.2rem;
    }

    .quiz-question-text {
        font-size: 1.25rem;
    }

    .quiz-question-image img {
        max-height: 180px;
    }

    .mu-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .mu-item-img {
        max-width: 60px;
        max-height: 45px;
    }

    .player-title {
        font-size: 1.1rem;
    }

    .player-header-right {
        gap: 0.55rem;
    }

    .player-timer {
        font-size: 1.1rem;
        padding: 0.35rem 0.75rem;
        min-width: 68px;
    }

    .player-lives {
        font-size: 1.25rem;
        letter-spacing: 3px;
    }

    .player-progress {
        font-size: 1rem;
        padding: 0.3rem 0.65rem;
    }

    .player-fs-btn {
        width: 40px;
        height: 40px;
        font-size: 1.15rem;
    }

    .review-list {
        max-height: 300px;
        overflow-y: auto;
    }
}

/* ============================================
   Phase 8 — Shared game stage
   --------------------------------------------
   Every template renders into .pl-stage so visual
   rhythm stays consistent across pc/tablet/mobile.
   The stage holds a fixed 16:10 aspect ratio on
   desktop and flips to vertical full-bleed on
   phones (≤ 600px).
   ============================================ */
.pl-stage {
    /* Fill whichever dimension is the limiter, keeping 16:10.
       --pl-stage-buffer is the height eaten by header + footer + page padding;
       tweak it if the chrome around the stage changes. */
    --pl-stage-buffer: 150px;
    width: min(96vw, calc((100dvh - var(--pl-stage-buffer)) * 16 / 10));
    aspect-ratio: 16 / 10;
    margin: 0 auto;
    padding: clamp(1rem, 2.4vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: clamp(0.6rem, 1.6vw, 1.1rem);
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    position: relative;
    overflow: hidden;
    /* themeable hooks — later phases swap these via .pl-theme-* class on body */
    background-image: var(--pl-stage-bg, none);
    background-size: cover;
    background-position: center;
}

/* Fullscreen — let the stage take essentially the whole screen.
   The buffer drops because the page header is still rendered, but
   the body padding shrinks too. */
:fullscreen .pl-stage,
:-webkit-full-screen .pl-stage {
    --pl-stage-buffer: 120px;
    width: min(98vw, calc((100dvh - var(--pl-stage-buffer)) * 16 / 10));
    border-radius: 0;
}

:fullscreen .player-container,
:-webkit-full-screen .player-container {
    padding: 0.4rem 0.6rem;
}

.pl-stage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
}

.pl-stage-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    min-height: 0;
    overflow: hidden;       /* never scroll — content must fit the stage */
    width: 100%;
}

.pl-stage-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Big readable prompt at the top of .pl-stage-main */
.pl-prompt-bar {
    position: relative;         /* anchor for the stream timer bar */
    width: 100%;
    flex: 0 0 auto;            /* never grow into the choice grid's space */
    max-height: 35%;            /* hard cap so the grid below always has room */
    text-align: center;
    padding: 0.6rem 1rem;
    background: var(--pl-primary-pale);
    border-radius: var(--pl-radius-sm);
    font-family: 'Fraunces', serif;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-weight: 700;
    color: var(--pl-ink);
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    overflow: hidden;
}

.pl-prompt-bar img {
    max-height: clamp(48px, 16vh, 110px);
    max-width: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* Slide-in animation for a freshly rendered prompt — used by find-the-match
   when stream mode is OFF, so each new "thing to find" drops in from the top
   instead of just appearing. */
.pl-prompt-bar.is-sliding {
    animation: promptSlideIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes promptSlideIn {
    0%   { transform: translateY(-120%); opacity: 0; }
    60%  { transform: translateY(8%);    opacity: 1; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* Stream mode: the prompt rides a horizontal traveler that crosses the bar
   from off-left to the centre of the bar over half the stream window, then
   stops there until the learner answers (zips off right) or the fuse runs
   out (explodes). The bar itself becomes a fixed-width track that holds the
   absolutely-positioned traveler plus the burning fuse along the bottom.

   We force a generous min-height because the traveler is absolutely
   positioned and contributes nothing to intrinsic layout — without this
   the bar would collapse to just the fuse strip and the image would
   visually overlap the wick. */
.pl-prompt-bar.is-streaming {
    overflow: hidden;
    padding: 0 0 24px 0;            /* room for the fuse strip at the bottom */
    min-height: clamp(140px, 26vh, 220px);
    max-height: 42%;                /* relax the global 35% cap so image fits */
}

.pl-prompt-traveler {
    position: absolute;
    top: 0;
    left: 0;
    height: calc(100% - 24px);      /* match padding-bottom on .is-streaming */
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1rem;
    white-space: nowrap;
    will-change: transform, left;
    animation-name: promptTravel;
    animation-duration: var(--travel-dur, 2.5s);
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    transform-origin: center center;
}
.pl-prompt-traveler img {
    max-height: clamp(70px, 18vh, 140px);
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}
.pl-prompt-traveler span {
    flex-shrink: 0;
}

/* Slide in from off-left to centre. animation-fill-mode: forwards keeps
   the prompt parked at centre until something else (zip/explode) takes
   over. Drives the first half of streamSeconds. */
@keyframes promptTravel {
    0%   { left: 0;   transform: translateX(-100%); }
    100% { left: 50%; transform: translateX(-50%); }
}

/* Correct answer: zip off the right edge. The 0% keyframe matches the
   end of promptTravel so there's no visual jump when the class swaps. */
.pl-prompt-traveler.is-zipping {
    animation: promptZipOff 0.45s cubic-bezier(0.5, 0, 0.85, 0.4) forwards;
}
@keyframes promptZipOff {
    0%   { left: 50%;  transform: translateX(-50%);                      opacity: 1; }
    100% { left: 100%; transform: translateX(20%) skewX(-12deg);         opacity: 0; }
}

/* Fuse runs out: the prompt swells, rotates, and blurs out. Same 0%
   matches the parked-at-centre state. */
.pl-prompt-traveler.is-exploding {
    animation: promptExplode 0.6s ease-out forwards;
    transform-origin: center center;
}
@keyframes promptExplode {
    0%   { left: 50%; transform: translateX(-50%) scale(1)    rotate(0deg);  opacity: 1; filter: blur(0); }
    35%  { left: 50%; transform: translateX(-50%) scale(1.35) rotate(8deg);  opacity: 1; filter: blur(0); }
    100% { left: 50%; transform: translateX(-50%) scale(0.2)  rotate(35deg); opacity: 0; filter: blur(8px); }
}

/* ---- Burning fuse (stream-mode countdown) ----
   A wick that runs along the bottom of the prompt bar with a glowing spark
   on the burning tip. The track shrinks from right-to-left as time runs
   out, and the spark slides along with it so it always sits on the tip. */
.pl-prompt-fuse {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    pointer-events: none;
}
.pl-prompt-fuse-track {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleX(1);
    transform-origin: right center;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background:
        repeating-linear-gradient(
            90deg,
            #6b4226 0 6px,
            #4a2e1a 6px 10px
        );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.pl-prompt-fuse-spark {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 22px;
    height: 22px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.pl-prompt-fuse-flame {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 50% 50%,
        #ffffff 0%,
        #ffe66b 22%,
        #ffa524 48%,
        #ff5a1f 72%,
        rgba(255, 80, 0, 0) 90%
    );
    box-shadow:
        0 0 10px 3px rgba(255, 170, 30, 0.85),
        0 0 22px 8px rgba(255, 100, 0, 0.55),
        0 0 36px 14px rgba(255, 60, 0, 0.25);
    animation: fuseFlicker 0.16s ease-in-out infinite alternate;
}
@keyframes fuseFlicker {
    0%   { transform: scale(0.92) rotate(-4deg); opacity: 0.92; }
    100% { transform: scale(1.12) rotate(4deg);  opacity: 1; }
}

.pl-prompt-tts {
    background: rgba(0, 0, 0, 0.08);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.05rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    flex-shrink: 0;
}

.pl-prompt-tts:hover {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.08);
}

/* Generic clickable card grid (Find the Match, Memory pairs, etc.) */
.pl-choice-grid {
    width: 100%;
    flex: 1 1 auto;          /* fill remaining vertical space below the prompt */
    min-height: 0;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    justify-items: stretch;
}

.pl-choice-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-choice-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pl-choice-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Generic clickable card primitive — sized by its grid cell, not its content */
.pl-cell {
    background: var(--pl-card-bg);
    border: 3px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    padding: 0.6rem 0.8rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pl-ink);
    transition: all 0.15s ease;
    user-select: none;
    word-break: break-word;
    position: relative;
    gap: 0.4rem;
    flex-direction: column;
    overflow: hidden;
}

.pl-cell:hover {
    border-color: var(--pl-primary);
    background: var(--pl-primary-pale);
}

.pl-cell:active {
    transform: scale(0.97);
}

.pl-cell img {
    max-width: 100%;
    max-height: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;
    border-radius: 6px;
}

.pl-cell.is-selected {
    border-color: var(--pl-accent);
    background: var(--pl-accent-pale);
    box-shadow: 0 0 0 2px var(--pl-accent);
}

.pl-cell.is-correct {
    border-color: var(--pl-correct);
    background: var(--pl-correct-bg);
    color: var(--pl-correct);
    pointer-events: none;
    animation: cellCorrectPulse 0.4s ease;
}

.pl-cell.is-wrong {
    border-color: var(--pl-wrong);
    background: var(--pl-wrong-bg);
    color: var(--pl-wrong);
    animation: wrongShake 0.4s ease;
}

.pl-cell.is-faded {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
    transition: all 0.4s ease;
}

@keyframes cellCorrectPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* ---- Memory Pairs tiles ----
   Grid fills the parent .pl-stage-main exactly. Rows are 1fr so the
   tiles distribute the available height instead of growing past it,
   which is what was forcing the stage to scroll. */
.mp-grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(var(--mp-cols, 4), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    align-content: stretch;
    justify-items: stretch;
    min-height: 0;
}

.mp-tile {
    perspective: 800px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.mp-tile-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mp-tile.is-up .mp-tile-inner {
    transform: rotateY(180deg);
}

.mp-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: var(--pl-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.55rem;
    text-align: center;
    box-shadow: var(--pl-shadow-sm);
    overflow: hidden;
}

.mp-back {
    background: var(--pl-primary);
    color: white;
    font-size: 1.8rem;
    font-weight: 800;
    border: 3px solid var(--pl-primary);
}

.mp-front {
    background: var(--pl-card-bg);
    border: 3px solid var(--pl-border);
    transform: rotateY(180deg);
    color: var(--pl-ink);
    font-size: 0.9rem;
    font-weight: 600;
    word-break: break-word;
    gap: 0.3rem;
}

.mp-front img {
    max-width: 100%;
    max-height: 70%;
    object-fit: contain;
    border-radius: 4px;
}

.mp-tile.is-matched .mp-front {
    border-color: var(--pl-correct);
    background: var(--pl-correct-bg);
    color: var(--pl-correct);
}

.mp-tile.is-matched {
    pointer-events: none;
    animation: cellCorrectPulse 0.45s ease;
}

.mp-tile.is-faded {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* Wrong-state on the parent .mp-tile so the shake doesn't clobber
   .mp-front's static rotateY(180deg) — that was the flip-back glitch. */
.mp-tile.is-wrong {
    animation: wrongShake 0.4s ease;
}

.mp-tile.is-wrong .mp-front {
    border-color: var(--pl-wrong);
    background: var(--pl-wrong-bg);
    color: var(--pl-wrong);
}

/* Phone breakpoint — let the stage grow tall, full-bleed */
@media (max-width: 600px) {
    .pl-stage {
        --pl-stage-buffer: 130px;
        width: 100vw;
        aspect-ratio: auto;
        min-height: calc(100dvh - var(--pl-stage-buffer));
        border-radius: 0;
        padding: 0.85rem;
    }

    .player-container {
        padding: 0.4rem 0.5rem;
    }

    .pl-cell {
        min-height: 56px;
        font-size: 0.9rem;
    }

    .mp-grid {
        gap: 0.45rem;
    }

    .mp-front {
        font-size: 0.78rem;
    }

    .mp-back {
        font-size: 1.4rem;
    }
}

/* ============================================
   Phase 9 — Completion flow + leaderboard
   --------------------------------------------
   Game-end shows a brief "Game Complete" splash,
   then a summary card with score + time and
   three actions (Leaderboard, Show Answers,
   Start Again). Each action swaps which "page"
   is visible inside the same complete screen.
   ============================================ */

.pc-splash {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.92);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: pcSplashIn 0.35s ease;
}

.pc-splash.is-on { display: flex; }

.pc-splash-text {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.2rem, 7vw, 4rem);
    font-weight: 800;
    color: white;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    animation: pcSplashPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pcSplashIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pcSplashPop {
    0%   { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.pc-card {
    background: var(--pl-card-bg);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow);
    padding: clamp(1.25rem, 3vw, 2.25rem);
    width: min(94vw, 560px);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    text-align: center;
}

.pc-page { display: none; }
.pc-page.is-active { display: block; }

.pc-summary-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 0.5rem 0 1.4rem;
    flex-wrap: wrap;
}

.pc-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.pc-stat-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pl-muted);
    font-weight: 700;
}

.pc-stat-value {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--pl-ink);
}

/* Assessment-mode status banner — shown only when ?assessment= is active.
   Sits between the score stats and the action buttons on the summary card. */
.pc-assessment-status {
    margin: 0.25rem auto 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    font-size: 0.92rem;
    line-height: 1.35;
    max-width: 32rem;
    background: #f1f5f9;
    color: var(--pl-ink);
    border: 1px solid #e2e8f0;
}
.pc-assessment-status.is-sending { background: #f1f5f9; color: var(--pl-muted); }
.pc-assessment-status.is-done    { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.pc-assessment-status.is-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.pc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.65rem;
    margin-top: 1rem;
}

.pc-actions .player-btn,
.pc-actions .player-btn-outline {
    width: 100%;
    padding: 0.85rem 0.6rem;
    font-size: 0.92rem;
}

@media (max-width: 520px) {
    .pc-actions {
        grid-template-columns: 1fr;
    }
}

.pc-back-row {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
}

/* ---- Leaderboard table ---- */
.pc-leaderboard {
    text-align: left;
}

.pc-leaderboard h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.25rem;
    margin: 0 0 0.85rem;
    text-align: center;
    color: var(--pl-ink);
}

.pc-name-form {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}

.pc-name-form input {
    flex: 1;
    padding: 0.7rem 0.85rem;
    border: 2px solid var(--pl-border);
    border-radius: var(--pl-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    background: var(--pl-card-bg);
    color: var(--pl-ink);
}

.pc-name-form input:focus {
    outline: none;
    border-color: var(--pl-primary);
}

.pc-name-form button {
    padding: 0.7rem 1.1rem;
    white-space: nowrap;
}

.pc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.pc-table thead th {
    background: var(--pl-primary);
    color: white;
    font-weight: 700;
    padding: 0.6rem 0.55rem;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
}

.pc-table thead th:first-child { border-top-left-radius: var(--pl-radius-sm); }
.pc-table thead th:last-child  { border-top-right-radius: var(--pl-radius-sm); }

.pc-table tbody td {
    padding: 0.55rem;
    border-bottom: 1px solid var(--pl-border);
    color: var(--pl-ink);
}

.pc-table tbody tr:nth-child(even) td {
    background: var(--pl-bg-soft, rgba(0, 0, 0, 0.02));
}

.pc-table tbody tr.is-me td {
    background: var(--pl-primary-pale);
    font-weight: 700;
}

.pc-table .pc-rank {
    width: 2.2rem;
    color: var(--pl-muted);
    font-weight: 700;
    text-align: center;
}

.pc-table .pc-score,
.pc-table .pc-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.pc-empty {
    text-align: center;
    color: var(--pl-muted);
    padding: 1.5rem 0;
    font-style: italic;
}

.pc-loading {
    text-align: center;
    padding: 1.5rem 0;
    color: var(--pl-muted);
}

/* Make the legacy review list re-flow inside the new card */
.pc-review .review-list { margin: 0; }

/* ============================================
   Big audio buttons — used when a card / cell
   has no text and no image, just a recorded
   audio clip or TTS. The speaker icon becomes
   the primary tap target so non-readers can
   work the activity entirely by sound.
   ============================================ */
.fc-tts-big,
.quiz-tts-big,
.mu-tts-big,
.pl-prompt-tts-big {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 18vw, 120px);
    height: clamp(72px, 18vw, 120px);
    margin: 0.5rem auto;
    border-radius: 50%;
    background: var(--pl-primary, #1976d2);
    color: white;
    border: none;
    font-size: clamp(2rem, 6vw, 3rem);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fc-tts-big:hover,
.quiz-tts-big:hover,
.mu-tts-big:hover,
.pl-prompt-tts-big:hover {
    transform: scale(1.06);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.fc-tts-big:active,
.quiz-tts-big:active,
.mu-tts-big:active,
.pl-prompt-tts-big:active {
    transform: scale(0.96);
}

/* Inline audio icon inside a Find-the-Match choice cell when the
   answer side has no text or image — sits in the middle of the cell. */
.pl-cell-audio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(54px, 12vw, 88px);
    height: clamp(54px, 12vw, 88px);
    border-radius: 50%;
    background: var(--pl-primary, #1976d2);
    color: white;
    font-size: clamp(1.4rem, 4vw, 2rem);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

/* Memory-pairs audio-only tile face — fills the front of the tile
   with a big speaker glyph so a flipped tile is still recognisable. */
.mp-audio-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: clamp(2rem, 8vw, 3.5rem);
    color: var(--pl-primary, #1976d2);
}

/* ============================================
   Open the Box — grid of closed boxes that
   reveal a pair when tapped.
   ============================================ */
.otb-grid {
    display: grid;
    grid-template-columns: repeat(var(--otb-cols, 4), minmax(0, 1fr));
    gap: clamp(0.5rem, 1.5vw, 1rem);
    width: 100%;
    margin: 0 auto;
    align-content: center;
    justify-content: center;
    flex: 1;
    align-self: center;
    max-width: min(90vh, 100%);
}

.otb-box {
    position: relative;
    aspect-ratio: 1;
    border: none;
    border-radius: clamp(8px, 1.5vw, 14px);
    background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%);
    box-shadow:
        0 6px 0 rgba(0, 0, 0, 0.18),
        0 8px 18px rgba(0, 0, 0, 0.18),
        inset 0 -4px 0 rgba(0, 0, 0, 0.1);
    cursor: pointer;
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    overflow: hidden;
}
.otb-box:not(:disabled):hover {
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.06);
}
.otb-box:not(:disabled):active {
    transform: translateY(2px);
    box-shadow:
        0 3px 0 rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.18),
        inset 0 -4px 0 rgba(0, 0, 0, 0.1);
}

.otb-box-lid {
    position: absolute;
    inset: 0 0 60% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: clamp(8px, 1.5vw, 14px) clamp(8px, 1.5vw, 14px) 0 0;
    pointer-events: none;
}

.otb-box-number {
    position: relative;
    z-index: 1;
}

.otb-box.is-opened {
    background: #e2e8f0;
    color: #94a3b8;
    cursor: default;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.6);
    text-shadow: none;
}
.otb-box.is-opened .otb-box-lid {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ---- Reveal modal (shared shape with .stw-modal) ---- */
.otb-modal-backdrop,
.stw-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1rem;
    animation: otb-fade 0.18s ease;
}

@keyframes otb-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.otb-modal,
.stw-modal {
    background: var(--pl-card-bg, #fff);
    border-radius: var(--pl-radius, 14px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    width: min(640px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: otb-pop 0.22s cubic-bezier(.2, 1.2, .3, 1);
}

@keyframes otb-pop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.otb-modal-header,
.stw-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--pl-primary, #1976d2);
    color: #fff;
}

.otb-modal-title,
.stw-modal-title {
    font-weight: 700;
    font-size: 1.1rem;
}

.otb-modal-close,
.stw-modal-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.otb-modal-close:hover,
.stw-modal-close:hover { background: rgba(255, 255, 255, 0.3); }

.otb-modal-body,
.stw-modal-body {
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: stretch;
    flex: 1;
    overflow: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.otb-side,
.stw-side {
    flex: 1 1 220px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}

.otb-side-label,
.stw-side-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pl-text-muted, #64748b);
    font-weight: 700;
}

.otb-side-body,
.stw-side-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--pl-bg-soft, #f8fafc);
    border-radius: var(--pl-radius-sm, 10px);
    width: 100%;
    flex: 1;
}

.otb-side-body img,
.stw-side-body img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 8px;
}

.otb-side-text,
.stw-side-text {
    font-size: clamp(1.05rem, 2.4vw, 1.4rem);
    font-weight: 600;
    color: var(--pl-text, #0f172a);
    word-break: break-word;
}

.otb-side-sep,
.stw-side-sep {
    flex: 0 0 1px;
    align-self: stretch;
    background: var(--pl-border, #e2e8f0);
}

.otb-speak,
.stw-speak {
    background: rgba(0, 0, 0, 0.08);
    border: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease, transform 0.18s ease;
}
.otb-speak:hover,
.stw-speak:hover {
    background: rgba(0, 0, 0, 0.16);
    transform: scale(1.08);
}
.otb-speak-big,
.stw-speak-big {
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
}

.otb-modal-footer,
.stw-modal-footer {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--pl-border, #e2e8f0);
    background: var(--pl-bg-soft, #f8fafc);
}

/* ============================================
   Spin the Wheel — SVG wheel + pointer + spin
   button. The wheel itself rotates via CSS
   transform on the inner <g>; the SVG path
   geometry is generated in JS.
   ============================================ */
.stw-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    flex: 1;
    width: 100%;
    position: relative;
}

.stw-wheel-wrap {
    position: relative;
    width: min(72vh, 92%, 540px);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 50% 18%;
}

/* Zoom into the landed slice — applied after the spin stops, removed
   when the reveal closes. The picked slice sits at the top of the
   wheel under the pointer; transform-origin near the top puts it
   roughly in the centre of the visible area when scaled up. */
.stw-wheel-wrap.is-zoomed {
    transform: scale(2);
}

.stw-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.18));
}

.stw-wheel {
    /* Rotation is applied via the SVG `transform` attribute by JS so the
       pivot is exactly the user-space centre (100, 100). Don't add CSS
       transform here — it would compose with the attribute and shift
       the visual centre off the actual centre circle. */
}

.stw-slice {
    stroke: rgba(255, 255, 255, 0.85);
    stroke-width: 0.8;
    cursor: pointer;
    transition: opacity 0.25s ease, filter 0.25s ease;
}
.stw-slice:hover:not(.is-used) {
    filter: brightness(1.06);
}
.stw-slice.is-used {
    opacity: 0.28;
    cursor: default;
}

.stw-label {
    font-size: 9px;
    font-weight: 700;
    fill: #1f2937;
    pointer-events: none;
    user-select: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.stw-label.is-used {
    opacity: 0.4;
}

/* Hub — central white circle + instruction text. Drawn outside the
   rotating <g> so the text stays upright while the wheel spins. */
.stw-hub {
    pointer-events: none;
}
.stw-hub-main {
    font-size: 8px;
    font-weight: 800;
    fill: #1f2937;
    text-anchor: middle;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    pointer-events: none;
    user-select: none;
    letter-spacing: 0.05em;
}
.stw-hub-sub {
    font-size: 4.5px;
    font-weight: 600;
    fill: #6b7280;
    text-anchor: middle;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    pointer-events: none;
    user-select: none;
}

/* Pointer sits at the top of the wheel pointing down into it.
   Anchored to .stw-wheel-wrap so it always tracks the wheel size. */
.stw-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 26px solid var(--pl-primary, #1976d2);
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
    z-index: 5;
    pointer-events: none;
}

.stw-spin-btn {
    min-width: 140px;
    letter-spacing: 0.08em;
    font-weight: 800;
}
.stw-spin-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Questions-mode reveal: full quiz screen takes over the stage area
   while the question is on-screen, then the wheel comes back. */
.stw-question-screen {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    animation: stwQuizFadeIn 0.35s ease-out;
}

.stw-question-screen .quiz-question.stw-quiz {
    width: 100%;
}

.stw-quiz-next {
    margin-top: 1.25rem;
    text-align: center;
}

@keyframes stwQuizFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .stw-wheel-wrap {
        width: min(80vw, 380px);
    }
    .stw-wheel-wrap.is-zoomed {
        transform: scale(1.7);
    }
    .otb-grid {
        max-width: 100%;
    }
}

/* ============================================
   True or False template
   ============================================ */
.tf-statement {
    text-align: center;
    font-size: clamp(1.2rem, 2.4vw, 1.8rem);
    margin-bottom: 1.25rem;
}

.tf-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.tf-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: clamp(1.25rem, 4vw, 2.5rem) 1rem;
    border: 3px solid transparent;
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit;
    background: var(--pl-card-bg, #ffffff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tf-btn:hover:not(.disabled):not(.correct):not(.wrong) {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.tf-btn-icon {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1;
}

.tf-btn-label {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.05em;
}

.tf-btn-true {
    color: #2d6a4f;
    border-color: #b7e4c7;
    background: #f0f9f4;
}

.tf-btn-false {
    color: #c1432a;
    border-color: #f4c6bd;
    background: #fdf3f0;
}

.tf-btn.correct {
    background: #d8f3dc;
    border-color: #2d6a4f;
    color: #1b4332;
    transform: scale(1.03);
}

.tf-btn.wrong {
    background: #ffd6d0;
    border-color: #c1432a;
    color: #7a1a0a;
    animation: tfShake 0.4s ease;
}

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

@keyframes tfShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

@media (max-width: 600px) {
    .tf-buttons {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Type the Answer template
   ============================================ */
.tta-input-row {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
    width: 100%;
    max-width: 640px;
    margin: 1.5rem auto 0.5rem;
}

.tta-input {
    flex: 1;
    padding: 0.85rem 1rem;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    font-family: inherit;
    border: 2px solid var(--pl-border, #d0d7de);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tta-input:focus {
    outline: none;
    border-color: var(--pl-primary, #2d6a4f);
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18);
}

.tta-input.correct {
    border-color: #2d6a4f;
    background: #d8f3dc;
    color: #1b4332;
}

.tta-input.wrong {
    border-color: #c1432a;
    background: #ffd6d0;
    color: #7a1a0a;
    animation: tfShake 0.4s ease;
}

.tta-check-btn {
    min-width: 110px;
}

.tta-feedback {
    text-align: center;
    margin-top: 0.85rem;
    font-size: clamp(1rem, 2vw, 1.2rem);
    min-height: 1.6em;
}

.tta-feedback-correct {
    color: #2d6a4f;
    font-weight: 700;
}

.tta-feedback-wrong {
    color: #c1432a;
    font-weight: 700;
}

.tta-feedback-reveal {
    margin-left: 0.4rem;
    color: var(--pl-text, #333);
}

.tta-last-response {
    margin-top: 0.35rem;
    font-size: 0.9em;
    color: var(--pl-muted, #666);
    font-style: italic;
}

.tta-last-response strong {
    color: var(--pl-text, #333);
    font-style: normal;
}

@media (max-width: 600px) {
    .tta-input-row {
        flex-direction: column;
    }
    .tta-check-btn {
        width: 100%;
    }
}

/* ============================================
   Group Sort — Phase 11
   Drag (or tap) items from a pool into the
   correct category box.
   ============================================ */
.gs-groups {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin-bottom: 0.85rem;
}

.gs-group-box {
    background: var(--pl-card-soft, #f5f7fa);
    border: 2px dashed var(--pl-border, #c8d0d8);
    border-radius: 14px;
    padding: 0.65rem 0.75rem 0.85rem;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.gs-group-box.is-drop-target {
    border-color: var(--pl-primary, #2d6a4f);
    background: rgba(45, 106, 79, 0.08);
    transform: scale(1.01);
}

.gs-group-box.is-wrong-flash {
    border-color: #c1432a;
    background: rgba(193, 67, 42, 0.12);
    animation: tfShake 0.45s ease;
}

.gs-group-header {
    font-weight: 700;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    text-align: center;
    color: var(--pl-text, #2a2a2a);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--pl-border-soft, #e3e8ee);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gs-group-header-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.gs-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
    align-content: flex-start;
    min-height: 36px;
}

.gs-pool-wrap {
    background: var(--pl-card-bg, #fff);
    border: 1px solid var(--pl-border-soft, #e3e8ee);
    border-radius: 14px;
    padding: 0.65rem 0.75rem 0.85rem;
    margin-top: auto;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.gs-pool-wrap.is-drop-target {
    border-color: var(--pl-primary, #2d6a4f);
    background: rgba(45, 106, 79, 0.06);
}

.gs-check-bar {
    display: flex;
    justify-content: center;
    padding: 0.85rem 0 0.25rem;
}

.gs-check-btn {
    min-width: 220px;
}

.gs-pool-label {
    font-size: 0.8rem;
    color: var(--pl-muted, #6b7280);
    text-align: center;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gs-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    min-height: 44px;
}

.gs-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.8rem;
    background: var(--pl-primary, #2d6a4f);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: clamp(0.85rem, 1.8vw, 1rem);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    max-width: 100%;
}

.gs-item-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    background: #fff;
}

.gs-item-text {
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14ch;
}

.gs-item-speak {
    background: rgba(255, 255, 255, 0.22);
    border: none;
    color: inherit;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background 0.12s ease;
}

.gs-item-speak:hover {
    background: rgba(255, 255, 255, 0.4);
}

.gs-item.is-placed .gs-item-speak {
    background: rgba(0, 0, 0, 0.06);
    color: var(--pl-text, #2a2a2a);
}

.gs-item.is-placed .gs-item-speak:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Items with an image switch to a card-style layout: big image on top,
   text label underneath, speaker as a corner overlay. Pill style is kept
   for text-only items. */
.gs-item.has-image {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 0.55rem 0.5rem 0.5rem;
    border-radius: 14px;
    width: 116px;
    gap: 0.4rem;
    position: relative;
}

.gs-item.has-image .gs-item-img {
    width: 84px;
    height: 84px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.9);
}

.gs-item.has-image .gs-item-text {
    max-width: 100%;
    white-space: normal;
    font-size: 0.82rem;
    line-height: 1.2;
    word-break: break-word;
}

.gs-item.has-image .gs-item-speak {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    font-size: 0.78rem;
}

.gs-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
}

.gs-item:focus {
    outline: 3px solid rgba(45, 106, 79, 0.35);
    outline-offset: 2px;
}

.gs-item.is-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

.gs-item.is-selected {
    background: var(--pl-accent, #f4a261);
    transform: scale(1.04);
    box-shadow: 0 0 0 3px rgba(244, 162, 97, 0.35);
}

/* Items inside a category box (pre-check) — white pill, still draggable. */
.gs-item.is-placed {
    background: var(--pl-card-bg, #fff);
    color: var(--pl-text, #2a2a2a);
    border: 1px solid var(--pl-border, #c8d0d8);
}

/* Post-check grading: prominent green border for correct, red for wrong.
   Applied on top of any layout class (pill or card). */
.gs-item.is-correct {
    border: 3px solid #2d6a4f;
    box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.18);
    cursor: default;
}

.gs-item.is-wrong {
    border: 3px solid #c1432a;
    box-shadow: 0 0 0 2px rgba(193, 67, 42, 0.18);
    cursor: default;
}

/* Make the green/red border read clearly against both the primary-coloured
   pool item and the white placed item. */
.gs-item.is-correct.is-placed,
.gs-item.is-wrong.is-placed {
    background: #fff;
    color: var(--pl-text, #2a2a2a);
}

@media (max-width: 600px) {
    .gs-groups {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .gs-group-box {
        min-height: 90px;
        padding: 0.5rem 0.5rem 0.65rem;
    }
    .gs-item {
        padding: 0.5rem 0.7rem;
    }
    .gs-item.has-image {
        width: 96px;
        padding: 0.45rem 0.4rem 0.45rem;
    }
    .gs-item.has-image .gs-item-img {
        width: 68px;
        height: 68px;
    }
    .gs-check-btn {
        min-width: 180px;
    }
}

@media (max-width: 380px) {
    .gs-groups {
        grid-template-columns: 1fr;
    }
    .gs-item.has-image {
        width: 88px;
    }
    .gs-item.has-image .gs-item-img {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   Complete the Sentence (cs-*)
   Same place-then-Check rhythm as group sort:
   drag words from a shared pool into bracket
   slots, then click Check to grade everything.
   ============================================ */
.cs-sentences {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 100%;
}

.cs-sentence {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--pl-card-bg, #fff);
    border: 1px solid var(--pl-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cs-sentence-img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 8px;
}

.cs-sentence-text {
    flex: 1;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 2.1;
    color: var(--pl-text, #1f2937);
    word-break: break-word;
}

.cs-text {
    /* Plain text segments — vertical-align middle so they sit nicely
       next to slot pills that are taller than the line. */
    vertical-align: middle;
}

.cs-sentence .cs-speak-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--pl-border, #e2e8f0);
    background: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.cs-sentence .cs-speak-btn:hover {
    background: var(--pl-bg-soft, #f3f4f6);
    transform: scale(1.05);
}

.cs-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    min-height: 38px;
    padding: 0.15rem 0.4rem;
    margin: 0 0.2rem;
    border: 2px dashed var(--pl-border, #cbd5e1);
    border-radius: 8px;
    background: var(--pl-bg-soft, #f8fafc);
    vertical-align: middle;
    transition: all 0.15s;
}
.cs-slot.is-empty::after {
    content: '';
    display: inline-block;
    width: 70px;
}
.cs-slot.is-filled {
    border-style: solid;
    background: #fff;
    border-color: var(--pl-primary, #2563eb);
}
.cs-slot.is-drop-target {
    background: var(--pl-primary-pale, #dbeafe);
    border-color: var(--pl-primary, #2563eb);
    border-style: solid;
    transform: scale(1.04);
}
.cs-slot.is-correct {
    border: 3px solid #2d6a4f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18);
}
.cs-slot.is-wrong {
    border: 3px solid #c1432a;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(193, 67, 42, 0.18);
}

.cs-pool-wrap {
    margin-top: 0.5rem;
    padding: 0.85rem 1rem 1rem;
    background: var(--pl-bg-soft, #f3f4f6);
    border: 2px dashed var(--pl-border, #cbd5e1);
    border-radius: 12px;
    transition: all 0.15s;
}
.cs-pool-wrap.is-drop-target {
    background: var(--pl-primary-pale, #dbeafe);
    border-color: var(--pl-primary, #2563eb);
    border-style: solid;
}
.cs-pool-label {
    font-size: 0.85rem;
    color: var(--pl-muted, #64748b);
    margin-bottom: 0.6rem;
    font-weight: 500;
}
.cs-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 44px;
}

.cs-token {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.95rem;
    background: #fff;
    border: 2px solid var(--pl-border, #cbd5e1);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pl-text, #1f2937);
    cursor: grab;
    user-select: none;
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.cs-token:hover {
    border-color: var(--pl-primary, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
.cs-token.is-dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.cs-token.is-selected {
    border-color: var(--pl-primary, #2563eb);
    background: var(--pl-primary-pale, #dbeafe);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.cs-token.cs-token-in-slot {
    /* Slightly more compact when sitting inside a sentence slot. */
    padding: 0.3rem 0.7rem;
    font-size: 0.95rem;
    margin: 0;
    box-shadow: none;
    border-color: var(--pl-primary, #2563eb);
}

.cs-check-bar {
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
}
.cs-check-btn {
    min-width: 220px;
}

@media (max-width: 600px) {
    .cs-sentence {
        flex-wrap: wrap;
        gap: 0.6rem;
    }
    .cs-sentence-img {
        width: 56px;
        height: 56px;
    }
    .cs-sentence-text {
        font-size: 1.02rem;
        line-height: 2;
    }
    .cs-slot {
        min-width: 78px;
        min-height: 34px;
    }
    .cs-token {
        padding: 0.5rem 0.8rem;
        font-size: 0.95rem;
    }
    .cs-check-btn {
        min-width: 180px;
    }
}

@media (max-width: 380px) {
    .cs-sentence-text {
        font-size: 0.95rem;
    }
    .cs-slot {
        min-width: 64px;
    }
    .cs-token {
        padding: 0.45rem 0.7rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   Hangman template
   ============================================ */
.hg-top {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.hg-figure {
    width: 160px;
    flex-shrink: 0;
}
.hg-figure-svg {
    width: 100%;
    height: auto;
    display: block;
}
.hg-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 180px;
}
.hg-clue {
    font-size: 1.05rem;
    color: var(--pl-text, #1f2937);
    background: var(--pl-bg-soft, #f3f4f6);
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
}
.hg-strikes {
    font-size: 1rem;
    color: #c1432a;
    font-weight: 600;
}
.hg-word {
    display: flex;
    gap: 0.45rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5rem 0 0.75rem;
}
.hg-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 46px;
    border-bottom: 3px solid var(--pl-text, #1f2937);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pl-text, #1f2937);
    text-transform: uppercase;
    padding: 0 4px;
}
.hg-letter.is-revealed {
    color: var(--pl-primary, #2563eb);
}
.hg-keyboard {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.5rem;
}
.hg-keyboard-row {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.hg-key {
    min-width: 38px;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    border: 2px solid var(--pl-border, #d1d5db);
    background: #fff;
    color: var(--pl-text, #1f2937);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.hg-key:hover:not([disabled]) {
    background: var(--pl-bg-soft, #f3f4f6);
    transform: translateY(-1px);
}
.hg-key[disabled] {
    cursor: not-allowed;
    opacity: 0.85;
}
.hg-key.is-hit {
    background: #d1fae5;
    border-color: #10b981;
    color: #065f46;
}
.hg-key.is-miss {
    background: #fee2e2;
    border-color: #ef4444;
    color: #991b1b;
}
.hg-result {
    text-align: center;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 600;
}
.hg-result.is-won {
    background: #d1fae5;
    color: #065f46;
}
.hg-result.is-lost {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 600px) {
    .hg-figure {
        width: 130px;
    }
    .hg-letter {
        min-width: 28px;
        height: 40px;
        font-size: 1.35rem;
    }
    .hg-key {
        min-width: 32px;
        min-height: 40px;
        padding: 0.4rem 0.45rem;
        font-size: 0.95rem;
    }
}

/* ============================================
   Wordsearch template
   ============================================ */
.ws-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
}
.ws-grid-wrap {
    flex: 1 1 320px;
    max-width: 560px;
    display: flex;
    justify-content: center;
}
.ws-grid {
    display: grid;
    gap: 3px;
    width: 100%;
    background: var(--pl-border, #d1d5db);
    padding: 3px;
    border-radius: 8px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.ws-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: clamp(0.7rem, 2.2vw, 1.1rem);
    color: var(--pl-text, #1f2937);
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
    padding: 0;
}
.ws-cell:hover {
    background: var(--pl-bg-soft, #f3f4f6);
}
.ws-cell.is-dragging {
    background: #bfdbfe;
    color: #1e3a8a;
}
.ws-cell.is-found {
    background: #d1fae5;
    color: #065f46;
}
.ws-cell.is-found.is-dragging {
    background: #6ee7b7;
}
.ws-side {
    flex: 0 1 200px;
    min-width: 160px;
}
.ws-side-label {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--pl-text, #1f2937);
}
.ws-wordlist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.ws-word {
    padding: 0.4rem 0.75rem;
    background: var(--pl-bg-soft, #f3f4f6);
    border-radius: 6px;
    font-weight: 600;
    color: var(--pl-text, #1f2937);
}
.ws-word.is-found {
    background: #d1fae5;
    color: #065f46;
    text-decoration: line-through;
}
.ws-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media (max-width: 600px) {
    .ws-layout {
        gap: 0.75rem;
    }
    .ws-side {
        flex-basis: 100%;
        max-width: 100%;
    }
    .ws-wordlist {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .ws-word {
        padding: 0.3rem 0.6rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   Anagram template
   ============================================ */
.ag-clue {
    font-size: 1.1rem;
    color: var(--pl-text, #1f2937);
    background: var(--pl-bg-soft, #f3f4f6);
    padding: 0.7rem 1rem;
    border-radius: 8px;
    text-align: center;
}
.ag-slots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.75rem 0;
}
.ag-slot {
    width: 56px;
    height: 64px;
    border: 3px dashed var(--pl-border, #d1d5db);
    border-radius: 10px;
    background: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pl-text, #1f2937);
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
    padding: 0;
}
.ag-slot.is-empty {
    background: #fafafa;
}
.ag-slot.is-filled {
    background: var(--pl-primary, #2563eb);
    color: #fff;
    border-style: solid;
    border-color: var(--pl-primary, #2563eb);
}
.ag-slot.is-drop-target {
    border-color: var(--pl-primary, #2563eb);
    background: #eff6ff;
    transform: scale(1.05);
}
.ag-slot.is-correct {
    background: #10b981;
    border-color: #10b981;
    color: #fff;
}
.ag-slot.is-wrong {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
    animation: ag-shake 0.4s ease;
}
@keyframes ag-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.ag-pool-label {
    text-align: center;
    color: var(--pl-text-soft, #6b7280);
    font-size: 0.95rem;
    margin-top: 0.5rem;
}
.ag-pool {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
    min-height: 64px;
}
.ag-tile {
    width: 56px;
    height: 64px;
    border: 2px solid var(--pl-border, #d1d5db);
    border-radius: 10px;
    background: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--pl-text, #1f2937);
    text-transform: uppercase;
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.ag-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}
.ag-tile.is-selected {
    border-color: var(--pl-primary, #2563eb);
    background: #eff6ff;
}
.ag-tile.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}
.ag-result {
    text-align: center;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 600;
}
.ag-result.is-won {
    background: #d1fae5;
    color: #065f46;
}
.ag-result.is-lost {
    background: #fee2e2;
    color: #991b1b;
}
.ag-actions {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

@media (max-width: 600px) {
    .ag-slot,
    .ag-tile {
        width: 46px;
        height: 54px;
        font-size: 1.35rem;
    }
}

@media (max-width: 380px) {
    .ag-slot,
    .ag-tile {
        width: 38px;
        height: 46px;
        font-size: 1.15rem;
        border-radius: 8px;
    }
}

/* ---- Anagram image-mode tiles ---- */
.ag-slots-img .ag-slot,
.ag-pool-img .ag-tile {
    width: 92px;
    height: 92px;
    padding: 4px;
    overflow: hidden;
}
.ag-tile-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    pointer-events: none;
}
.ag-slots-img .ag-slot.is-filled {
    background: #fff;
    border-color: var(--pl-primary, #2563eb);
}
.ag-slots-img .ag-slot.is-correct {
    background: #d1fae5;
    border-color: #10b981;
}
.ag-slots-img .ag-slot.is-wrong {
    background: #fee2e2;
    border-color: #ef4444;
}
.ag-answer-preview {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.6rem 0 0;
}
.ag-answer-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 42px;
    padding: 0 0.5rem;
    background: rgba(255,255,255,0.9);
    border: 2px solid var(--pl-primary, #2563eb);
    border-radius: 8px;
    font-weight: 700;
    color: var(--pl-text, #1f2937);
    text-transform: uppercase;
}
.ag-answer-tile img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
}
.ag-answer-preview .ag-answer-tile:has(img) {
    height: auto;
    padding: 4px;
    min-width: auto;
}

@media (max-width: 600px) {
    .ag-slots-img .ag-slot,
    .ag-pool-img .ag-tile {
        width: 72px;
        height: 72px;
    }
}

@media (max-width: 380px) {
    .ag-slots-img .ag-slot,
    .ag-pool-img .ag-tile {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   Visual themes (Phase 9 — CSS-only stage palette swap).
   Each theme overrides --pl-* tokens via a body class.
   The default classic theme leaves tokens untouched.
   When commissioned background images land, swap each
   theme's --pl-stage-bg url() in place — no markup change.
   ============================================ */

html.pl-theme-spring {
    --pl-paper:        #eef9ed;
    --pl-primary:      #2e8b57;
    --pl-primary-light:#3aa770;
    --pl-primary-pale: #d6efdf;
    --pl-card-bg:      #ffffff;
    --pl-stage-bg:     linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(46,139,87,0.06) 100%);
}

html.pl-theme-summer {
    --pl-paper:        #fff9e6;
    --pl-primary:      #e07a1f;
    --pl-primary-light:#f08a2f;
    --pl-primary-pale: #fde9cc;
    --pl-card-bg:      #ffffff;
    --pl-stage-bg:     linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(224,122,31,0.07) 100%);
}

html.pl-theme-halloween {
    --pl-paper:        #1a0e2c;
    --pl-ink:          #f5f0ff;
    --pl-primary:      #ff7a18;
    --pl-primary-light:#ff8c33;
    --pl-primary-pale: #3a204a;
    --pl-card-bg:      #2a1a3e;
    --pl-muted:        #b6a8c6;
    --pl-border:       #4a2f60;
    --pl-stage-bg:     linear-gradient(180deg, rgba(255,122,24,0.08) 0%, rgba(26,14,44,0) 60%);
}

html.pl-theme-christmas {
    --pl-paper:        #f6efe7;
    --pl-primary:      #b91c1c;
    --pl-primary-light:#cc2929;
    --pl-primary-pale: #f5dada;
    --pl-card-bg:      #ffffff;
    --pl-stage-bg:     linear-gradient(180deg, rgba(185,28,28,0.05) 0%, rgba(34,139,34,0.05) 100%);
}

html.pl-theme-readable {
    --pl-paper:        #ffffff;
    --pl-ink:          #000000;
    --pl-primary:      #0044aa;
    --pl-primary-light:#0055cc;
    --pl-primary-pale: #d6e4ff;
    --pl-card-bg:      #ffffff;
    --pl-muted:        #444444;
    --pl-border:       #000000;
    --pl-stage-bg:     none;
    font-size: 18px;
}
html.pl-theme-readable .pl-stage,
html.pl-theme-readable .player-start,
html.pl-theme-readable .player-complete {
    border: 2px solid #000;
}

/* ============================================
   Start screen pickers — Switch Template + Theme.
   Both sit below the main start button in their own row.
   ============================================ */
.player-start-pickers {
    width: 100%;
    max-width: 560px;
    margin: 1.25rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ps-picker {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
}
.ps-picker-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pl-muted);
    font-weight: 700;
}

/* Switch Template buttons */
.ps-switch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
.ps-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--pl-border);
    background: var(--pl-card-bg);
    color: var(--pl-ink);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.ps-switch-btn:hover {
    border-color: var(--pl-primary);
    color: var(--pl-primary);
    transform: translateY(-1px);
}
.ps-switch-btn.is-active {
    background: var(--pl-primary);
    color: #fff;
    border-color: var(--pl-primary);
    cursor: default;
    pointer-events: none;
}
.ps-switch-btn .ps-switch-icon {
    font-size: 1.1rem;
    line-height: 1;
}

/* Theme picker swatches */
.ps-theme-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}
.ps-theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.ps-theme-swatch {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 3px solid transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.ps-theme-btn:hover .ps-theme-swatch {
    transform: scale(1.08);
}
.ps-theme-btn.is-active .ps-theme-swatch {
    border-color: var(--pl-primary);
}
.ps-theme-name {
    font-size: 0.72rem;
    color: var(--pl-muted);
    font-weight: 600;
}
.ps-theme-btn.is-active .ps-theme-name {
    color: var(--pl-primary);
}

/* Swatch colour overrides per theme — match the body class palettes */
.ps-theme-swatch.theme-classic   { background: linear-gradient(135deg, #4f8edc 0%, #d9eaff 100%); }
.ps-theme-swatch.theme-spring    { background: linear-gradient(135deg, #2e8b57 0%, #d6efdf 100%); }
.ps-theme-swatch.theme-summer    { background: linear-gradient(135deg, #e07a1f 0%, #fde9cc 100%); }
.ps-theme-swatch.theme-halloween { background: linear-gradient(135deg, #ff7a18 0%, #1a0e2c 100%); }
.ps-theme-swatch.theme-christmas { background: linear-gradient(135deg, #b91c1c 0%, #228b22 100%); }
.ps-theme-swatch.theme-readable  { background: linear-gradient(135deg, #000 0%, #fff 100%); }

@media (max-width: 600px) {
    .ps-switch-btn { font-size: 0.85rem; padding: 0.45rem 0.75rem; }
    .ps-theme-swatch { width: 32px; height: 32px; }
    .ps-theme-name { font-size: 0.65rem; }
}

/* ============================================
   External-link — HTML game iframe
   Fills all available viewport space so games
   render at the screen's natural aspect ratio.
   ============================================ */
.el-frame-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    width: 100%;
}

.el-iframe {
    flex: 1;
    width: 100%;
    border: none;
    border-radius: var(--pl-radius);
    min-height: 0;
    background: #fff;
}

.el-finish-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--pl-card-bg, #fff);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.el-score-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.el-score-label {
    font-size: 0.85rem;
    color: var(--pl-muted, #666);
    font-weight: 600;
}

.el-score-inputs {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.el-score-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.el-score-field span {
    font-size: 0.72rem;
    color: var(--pl-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.el-score-field input {
    width: 70px;
    padding: 0.4rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid var(--pl-border, #ccc);
    border-radius: 6px;
    background: #fff;
}

.el-score-field input:focus {
    border-color: var(--pl-primary, #4f8edc);
    outline: none;
}

.el-score-sep {
    font-size: 0.85rem;
    color: var(--pl-muted, #666);
    padding-bottom: 0.45rem;
}

.el-submit-btn {
    padding: 0.45rem 1rem;
}

.el-skip-btn {
    background: none;
    border: none;
    font-size: 0.78rem;
    color: var(--pl-muted, #999);
    cursor: pointer;
    text-decoration: underline;
    padding: 0.2rem;
}

.el-skip-btn:hover {
    color: var(--pl-ink, #333);
}

.el-score-done {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pl-primary, #4f8edc);
    padding: 0.4rem 0;
}

@media (max-width: 600px) {
    .el-iframe {
        border-radius: 0;
    }
    .el-score-inputs {
        gap: 0.4rem;
    }
    .el-score-field input {
        width: 60px;
    }
}

/* ---- External-link: strip player chrome ---- */

/* The game container header shrinks when running an HTML game */
.is-external .player-header {
    padding: 0.2rem 0;
    margin-bottom: 0.25rem;
}

.is-external .player-footer {
    padding: 0.2rem 0;
    font-size: 0.65rem;
}

/* Game area: stretch children full-width for external-link */
.is-external .player-game {
    align-items: stretch;
    padding: 0;
}

/* Mobile landscape — minimise chrome so the game gets maximum screen */
@media (orientation: landscape) and (max-height: 500px) {
    .is-external .player-header {
        display: none;
    }
    .is-external .player-footer {
        display: none;
    }
    .is-external {
        padding: 0;
    }
    .el-iframe {
        border-radius: 0;
    }
    .el-finish-bar {
        flex-direction: row;
        padding: 0.3rem 0.5rem;
        gap: 0.4rem;
    }
    .el-score-form {
        flex-direction: row;
        gap: 0.4rem;
    }
    .el-score-label {
        display: none;
    }
}

/* Small screens portrait — keep full width, minimal radius */
@media (max-width: 600px) {
    .is-external .player-header {
        padding: 0.15rem 0;
        margin-bottom: 0.15rem;
    }
    .is-external .player-footer {
        display: none;
    }
    .is-external {
        padding: 0.3rem;
    }
}