/* ============================================================
   WLL Language Games — Styles
   ============================================================ */

:root {
    --wll-green:      #1D9E75;
    --wll-green-dark: #085041;
    --wll-green-light:#E1F5EE;
    --wll-red:        #E53E3E;
    --wll-red-light:  #FED7D7;
    --wll-grey:       #718096;
    --wll-grey-light: #F7FAFC;
    --wll-border:     #E2E8F0;
    --wll-radius:     10px;
    --wll-shadow:     0 2px 12px rgba(0,0,0,.08);
    --wll-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.wll-game-wrap,
.wll-dashboard {
    font-family: var(--wll-font);
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}

.wll-notice {
    background: var(--wll-grey-light);
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 12px 16px;
}

/* ── Buttons ─────────────────────────────────────────────── */
.wll-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, transform .1s;
}
.wll-btn:active { transform: scale(.97); }
.wll-btn-primary   { background: var(--wll-green) !important; color: #fff !important; }
.wll-btn-primary:hover { background: var(--wll-green-dark) !important; }
.wll-btn-secondary { background: var(--wll-grey-light) !important; color: #2D3748 !important; border: 1px solid var(--wll-border) !important; }
.wll-btn-secondary:hover { background: var(--wll-border); }
.wll-btn-correct   { background: var(--wll-green); color: #fff; flex: 1; justify-content: center; padding: 12px; font-size: 16px; }
.wll-btn-wrong     { background: var(--wll-red); color: #fff; flex: 1; justify-content: center; padding: 12px; font-size: 16px; }

.wll-audio-btn {
    background: none;
    border: 1px solid var(--wll-border);
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.wll-audio-btn:hover { background: var(--wll-green-light); }
.wll-audio-btn-sm {
    background: none; border: none;
    cursor: pointer; font-size: 14px;
    padding: 0 4px;
}

/* ── Game header ─────────────────────────────────────────── */
.wll-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--wll-border);
}
.wll-game-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--wll-green-dark);
}
.wll-game-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.wll-toggle-label {
    font-size: 13px;
    color: var(--wll-grey);
    display: flex;
    align-items: center;
    gap: 6px;
}
.wll-toggle-label select {
    font-size: 13px;
    border: 1px solid var(--wll-border);
    border-radius: 6px;
    padding: 4px 8px;
}

/* ── Loading spinner ─────────────────────────────────────── */
.wll-loading {
    text-align: center;
    padding: 40px;
    color: var(--wll-grey);
    font-size: 14px;
}
.wll-spinner {
    display: inline-block;
    width: 20px; height: 20px;
    border: 2px solid var(--wll-border);
    border-top-color: var(--wll-green);
    border-radius: 50%;
    animation: wll-spin .7s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes wll-spin { to { transform: rotate(360deg); } }

/* ============================================================
   WORD SEARCH
   ============================================================ */

.wll-ws-layout {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 640px) {
    .wll-ws-layout { grid-template-columns: 1fr; }
    .wll-ws-grid-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wll-ws-grid { width: 100% !important; }
    /* cell size now set by JS */
    #wll-ws-controls { gap: 6px; }
    #wll-ws-controls select,
    #wll-ws-controls .wll-filter-select { min-width: 90px !important; font-size: 12px !important; padding: 6px 8px !important; }
    #wll-ws-controls .wll-filter-btn { padding: 6px 10px !important; font-size: 12px !important; }
    .wll-cw-spelling-toggle { padding: 3px 6px; }
    #wll-ws-controls .wll-size-btn { padding: 5px 9px !important; font-size: 12px !important; }
}

/* Grid */
.wll-ws-grid-wrap {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}
.wll-ws-grid {
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    background: #fff;
    box-shadow: var(--wll-shadow);
    width: 100%;
}
.wll-ws-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    cursor: pointer;
    border-right: 1px solid #F0F0F0;
    border-bottom: 1px solid #F0F0F0;
    transition: background .1s;
    box-sizing: border-box;
    flex-shrink: 0;
}
.wll-ws-cell:hover    { background: var(--wll-green-light); }
.wll-ws-cell.wll-selecting  { background: #BEE3F8; }
.wll-ws-cell.wll-found-cell { background: var(--wll-green-light); color: var(--wll-green-dark); }

/* Word list */
.wll-ws-sidebar {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 12px;
    box-shadow: var(--wll-shadow);
}
.wll-ws-word-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 480px;
    overflow-y: auto;
}
.wll-ws-word-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    transition: background .1s;
}
.wll-ws-word-item.wll-found {
    background: var(--wll-green-light);
    color: var(--wll-green-dark);
    text-decoration: line-through;
    opacity: .7;
}
.wll-ws-score {
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    color: var(--wll-grey);
    font-weight: 500;
}
.wll-ws-win {
    margin-top: 16px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--wll-green);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

/* ============================================================
   FLASHCARD
   ============================================================ */


.wll-fc-counter {
    text-align: right;
    font-size: 12px;
    color: var(--wll-grey);
    margin-bottom: 20px;
}

/* Card flip scene */
.wll-fc-scene {
    perspective: 1200px;
    cursor: pointer;
    margin-bottom: 20px;
}
.wll-fc-card {
    width: 100%;
    min-height: 280px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    border-radius: var(--wll-radius);
    box-shadow: var(--wll-shadow);
}
.wll-fc-card.wll-flipped { transform: rotateY(180deg); }

.wll-fc-front,
.wll-fc-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--wll-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    gap: 12px;
}
.wll-fc-front { background: #fff; border: 1px solid var(--wll-border); }
.wll-fc-back  { background: var(--wll-green-light); border: 1px solid #9AE6B4; transform: rotateY(180deg); }

.wll-fc-image { max-width: 140px; max-height: 120px; border-radius: 8px; object-fit: cover; }
.wll-fc-image-wrap { min-height: 0; }

.wll-fc-prompt {
    font-size: clamp(20px, 5vw, 36px);
    font-weight: 700;
    color: #1A202C;
    line-height: 1.2;
}
.wll-fc-pos {
    font-size: 13px;
    color: var(--wll-grey);
    font-style: italic;
}

.wll-fc-audio-wrap {
    margin-top: 4px;
}
.wll-fc-answer {
    font-size: clamp(22px, 5vw, 40px);
    font-weight: 700;
    color: var(--wll-green-dark);
    line-height: 1.2;
}
.wll-fc-sentence {
    font-size: 14px;
    color: #4A5568;
    font-style: italic;
    max-width: 340px;
}

/* Action buttons */
.wll-fc-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* Complete screen */
.wll-fc-complete {
    text-align: center;
    padding: 40px 20px;
}
.wll-fc-complete-inner {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 40px 24px;
    box-shadow: var(--wll-shadow);
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.wll-fc-complete-emoji { font-size: 52px; line-height: 1; }
.wll-fc-complete h3,
#wll-fc-complete-heading { font-size: 20px; font-weight: 700; margin: 0; color: #1a1a2e; }
.wll-fc-results { width: 100%; }
.wll-fc-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 8px;
    width: 100%;
    margin-bottom: 4px;
}
.wll-fc-stat {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}
.wll-fc-stat-num { font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.wll-fc-stat-lbl { font-size: 11px; color: #6b7280; font-weight: 500; }
.wll-fc-complete-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Tap hint — pulse to draw attention */
.wll-fc-tap-hint {
    font-size: 13px;
    color: #9CA3AF;
    margin-top: 8px;
    animation: wll-tap-pulse 2s ease-in-out infinite;
}
@keyframes wll-tap-pulse {
    0%, 100% { opacity: .5; transform: scale(1); }
    50%       { opacity: 1;  transform: scale(1.04); }
}

/* Progress bar — colour shifts as deck progresses */
.wll-fc-progress-bar {
    height: 5px;
    background: #E2E8F0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.wll-fc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #378ADD, #0F6E56);
    border-radius: 999px;
    transition: width .3s ease;
    width: 0%;
}

/* ============================================================
   DASHBOARD
   ============================================================ */

.wll-dashboard {
    max-width: 700px;
}
.wll-dash-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wll-border);
    margin-bottom: 20px;
}
.wll-dash-header h2 { margin: 0 0 4px; font-size: 22px; }
.wll-dash-subtitle  { margin: 0; color: var(--wll-grey); font-size: 14px; }

.wll-dash-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.wll-dash-stat {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 16px;
    text-align: center;
    box-shadow: var(--wll-shadow);
}
.wll-stat-num   { font-size: 32px; font-weight: 700; color: var(--wll-green); }
.wll-stat-label { font-size: 12px; color: var(--wll-grey); margin-top: 4px; }
.wll-stat-due .wll-stat-num { color: #D69E2E; }

.wll-dash-section {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--wll-shadow);
}
.wll-dash-section h3 { margin: 0 0 12px; font-size: 15px; }

.wll-dash-due-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wll-dash-due-item { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.wll-dash-due-def  { color: var(--wll-grey); font-size: 13px; flex: 1; }

.wll-dash-topic-row {
    display: grid;
    grid-template-columns: 140px 1fr 120px;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 13px;
}
.wll-dash-topic-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wll-dash-topic-bar-wrap { background: var(--wll-border); border-radius: 4px; height: 8px; overflow: hidden; }
.wll-dash-topic-bar { height: 100%; background: var(--wll-green); border-radius: 4px; transition: width .4s; }
.wll-dash-topic-meta { font-size: 11px; color: var(--wll-grey); text-align: right; }

.wll-dash-game-links { display: flex; gap: 12px; }
.wll-dash-game-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    text-decoration: none;
    color: #2D3748;
    font-weight: 500;
    font-size: 14px;
    transition: background .15s, border-color .15s;
}
.wll-dash-game-card:hover { background: var(--wll-green-light); border-color: var(--wll-green); }
.wll-dash-game-icon { font-size: 32px; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
    .wll-dash-stats      { grid-template-columns: repeat(2, 1fr); }
    .wll-dash-topic-row  { grid-template-columns: 100px 1fr; }
    .wll-dash-topic-meta { display: none; }
    .wll-fc-card         { min-height: 240px; }
    .wll-game-header     { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   FLASHCARD — QUIZ MODE
   ============================================================ */

/* ── Flashcard controls bar — outside game wrap ──────────────────────────── */
#wll-fc-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
#wll-fc-controls select,
#wll-fc-controls .wll-filter-select {
    padding: 7px 10px !important;
    border: 0.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
    min-width: 110px !important;
    max-width: none !important;
    width: auto !important;
    box-shadow: none !important;
}
#wll-fc-controls .wll-filter-btn {
    padding: 7px 16px !important;
    border: 0.5px solid #378ADD !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #378ADD !important;
    color: #fff !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
#wll-fc-controls .wll-filter-btn:hover {
    background: #185FA5 !important;
    border-color: #185FA5 !important;
}
@media (max-width: 640px) {
    #wll-fc-controls { gap: 6px; }
    #wll-fc-controls select,
    #wll-fc-controls .wll-filter-select { min-width: 90px !important; font-size: 12px !important; padding: 6px 8px !important; }
    #wll-fc-controls .wll-filter-btn { padding: 6px 12px !important; font-size: 12px !important; }
}

/* Score bar */
.wll-fc-scorebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    margin-bottom: 12px;
    box-shadow: var(--wll-shadow);
}
.wll-fc-score-display {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.wll-fc-score-num {
    font-size: 28px;
    font-weight: 700;
    color: var(--wll-green);
    transition: transform .15s;
}
.wll-fc-score-num.wll-score-bump {
    transform: scale(1.3);
}
.wll-fc-score-label {
    font-size: 13px;
    color: var(--wll-grey);
}
.wll-fc-streak {
    font-size: 18px;
    font-weight: 700;
    color: #E67E22;
    animation: wll-streak-pop .3s ease;
}
@keyframes wll-streak-pop {
    0%   { transform: scale(.8); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Multiple choice options */
.wll-fc-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
}
.wll-fc-option {
    padding: 14px 12px;
    border: 2px solid var(--wll-border) !important;
    border-radius: var(--wll-radius);
    background: #fff !important;
    color: #2D3748 !important;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .1s;
    text-align: center;
    line-height: 1.3;
    min-height: 56px;
    font-family: var(--wll-font);
}
.wll-fc-option:hover:not(.wll-opt-disabled) {
    border-color: var(--wll-green);
    background: var(--wll-green-light);
    transform: translateY(-1px);
}
.wll-fc-option:active:not(.wll-opt-disabled) {
    transform: translateY(0);
}
.wll-fc-option.wll-opt-correct {
    border-color: var(--wll-green) !important;
    background: var(--wll-green-light) !important;
    color: var(--wll-green-dark) !important;
}
.wll-fc-option.wll-opt-wrong {
    border-color: var(--wll-red) !important;
    background: var(--wll-red-light) !important;
    color: var(--wll-red) !important;
}
.wll-fc-option.wll-opt-disabled {
    cursor: default;
    opacity: .75;
}

/* Keyboard hint labels (1-4) */
.wll-fc-option::before {
    content: attr(data-index);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 11px;
    font-weight: 700;
    background: var(--wll-border);
    border-radius: 4px;
    margin-right: 8px;
    vertical-align: middle;
}
.wll-fc-option[data-index="0"]::before { content: "1"; }
.wll-fc-option[data-index="1"]::before { content: "2"; }
.wll-fc-option[data-index="2"]::before { content: "3"; }
.wll-fc-option[data-index="3"]::before { content: "4"; }

/* Card flash on answer */
.wll-fc-card.wll-correct-flash .wll-fc-front {
    border-color: var(--wll-green);
    background: var(--wll-green-light);
    transition: background .2s, border-color .2s;
}
.wll-fc-card.wll-wrong-flash .wll-fc-front {
    border-color: var(--wll-red);
    background: var(--wll-red-light);
    transition: background .2s, border-color .2s;
}

/* Sentence shown below card after wrong answer */
.wll-fc-sentence {
    font-size: 13px;
    color: var(--wll-grey);
    font-style: italic;
    text-align: center;
    min-height: 20px;
    margin-top: 4px;
}

/* Quiz mode: card not flippable so remove cursor/hint */
#wll-fc-scene.wll-quiz-mode {
    cursor: default;
}

/* Mobile: stack options 1 column */
@media (max-width: 480px) {
    .wll-fc-options { grid-template-columns: 1fr; }
    .wll-fc-scorebar { padding: 8px 12px; }
    .wll-fc-score-num { font-size: 22px; }
}

/* ============================================================
   CROSSWORD
   ============================================================ */

.wll-crossword-wrap { max-width: 1200px; }

/* ── Score bar ────────────────────────────────────────────────────────── */
.wll-cw-scorebar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0 14px;
    border-bottom: 1px solid #F1F5F9;
    margin-bottom: 4px;
}
.wll-cw-progress {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 500;
    margin-left: auto;
}

.wll-cw-layout {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: start;
    margin-top: 12px;
}

/* ── Grid container ───────────────────────────────────────────────────── */
.wll-cw-grid-wrap {
    overflow-x: auto;
    background: #F7F8FA;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #E2E8F0;
    flex-shrink: 0;
    width: fit-content;
}
.wll-cw-grid {
    display: grid;
    width: fit-content;
    max-width: 100%;
    border: 1.5px solid #94A3B8;
    border-radius: 4px;
    gap: 0;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* ── Cells ────────────────────────────────────────────────────────────── */
.wll-cw-cell {
    border: 1px solid #CBD5E0;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
}
.wll-cw-black {
    background: #2D3748 !important;
    border-color: #2D3748 !important;
}
.wll-cw-letter {
    background: #fff;
    cursor: pointer;
    transition: background .1s;
}
.wll-cw-letter:hover { background: #EBF8FF; }

/* ── Cell number ──────────────────────────────────────────────────────── */
.wll-cw-num {
    position: absolute;
    top: 1px;
    left: 2px;
    font-weight: 600;
    color: #64748B;
    line-height: 1;
    pointer-events: none;
}

/* ── Input ────────────────────────────────────────────────────────────── */
.wll-cw-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    color: #1A202C !important;
    caret-color: transparent;
    cursor: pointer;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── Selection states ─────────────────────────────────────────────────── */
.wll-cw-active-word { background: #DBEAFE !important; }
.wll-cw-active-cell { background: #BFDBFE !important; }
.wll-cw-correct     { background: #DCFCE7 !important; }
.wll-cw-correct .wll-cw-input { color: #166534 !important; font-weight: 800 !important; }
.wll-cw-wrong       { background: #FEE2E2 !important; animation: wll-shake .3s ease; }
.wll-cw-revealed    { background: #FEF9C3 !important; }
.wll-cw-revealed .wll-cw-input { color: #854D0E !important; }
.wll-cw-hint        { background: #E0F2FE !important; }
.wll-cw-hint .wll-cw-input { color: #0369A1 !important; font-weight: 700 !important; }
.wll-score-penalty  { animation: wll-score-flash .5s ease; }
@keyframes wll-score-flash {
    0%   { color: inherit; }
    30%  { color: #EF4444; transform: scale(1.2); }
    100% { color: inherit; transform: scale(1); }
}

@keyframes wll-shake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* ── Clues panel ──────────────────────────────────────────────────────── */
.wll-cw-clues {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    scrollbar-width: thin;
    scrollbar-color: #CBD5E0 transparent;
}

.wll-cw-clues-across,
.wll-cw-clues-down { padding: 14px 14px 6px; }

.wll-cw-clues-down { border-top: 1px solid #F1F5F9; }

.wll-cw-clue-heading {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .09em !important;
    color: #94A3B8 !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    border: none !important;
    line-height: 1 !important;
}

.wll-cw-clue-item {
    display: flex;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 1px;
    transition: background .1s;
    align-items: baseline;
}
.wll-cw-clue-item:hover     { background: #F8FAFC; }
.wll-cw-clue-item.wll-cw-clue-active {
    background: #EFF6FF;
    border-left: 3px solid #3B82F6;
    padding-left: 5px;
}
.wll-cw-clue-item.wll-cw-clue-solved {
    opacity: .38;
    text-decoration: line-through;
}

.wll-cw-clue-num {
    font-size: 11px;
    font-weight: 700;
    color: #6b7280;
    min-width: 20px;
    flex-shrink: 0;
    padding-top: 2px;
    text-align: right;
}
.wll-cw-clue-text {
    color: #374151;
    font-size: 13px;
    flex: 1;
}
.wll-cw-clue-pos {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #185FA5;
    background: #E6F1FB;
    border-radius: 4px;
    padding: 1px 6px;
    vertical-align: middle;
    text-transform: lowercase;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .wll-cw-layout { flex-direction: column; }
    .wll-cw-grid-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .wll-cw-clues  { max-height: 320px; overflow-y: auto; }
    .wll-cw-grid   { margin: 0 auto; }
    .wll-cw-grid-wrap { padding: 8px; }
    #wll-cw-controls { gap: 6px; }
    #wll-cw-controls select,
    #wll-cw-controls .wll-filter-select { min-width: 90px !important; font-size: 12px !important; padding: 6px 8px !important; }
    #wll-cw-controls .wll-filter-btn { padding: 6px 10px !important; font-size: 12px !important; }
    .wll-cw-spelling-toggle { padding: 3px 6px; }
}
@media (max-width: 480px) {
    #wll-cw-controls { flex-wrap: wrap; }
    #wll-cw-controls select,
    #wll-cw-controls .wll-filter-select { min-width: 80px !important; max-width: calc(50% - 4px) !important; }
    .wll-cw-clues { max-height: 220px; }
    .wll-cw-clue-text { font-size: 12px; }
    .wll-cw-result-grid { grid-template-columns: 1fr !important; }
}


/* ============================================================
   MATCHING PAIRS
   ============================================================ */

.wll-mp-wrap { max-width: 900px; }

.wll-mp-scorebar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--wll-border);
    margin-bottom: 16px;
}
.wll-mp-pairs-counter,
.wll-mp-moves-display {
    font-size: 14px;
    color: var(--wll-grey);
}

/* Shared score display (used by MP + Anagram) */
.wll-score-display { display: flex; align-items: baseline; gap: 4px; }
.wll-score-num  { font-size: 26px; font-weight: 700; color: var(--wll-green); }
.wll-score-label { font-size: 13px; color: var(--wll-grey); }

/* Card grid */
.wll-mp-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

.wll-mp-card {
    perspective: 700px;
    cursor: pointer;
    min-height: 80px;
    aspect-ratio: 1 / 1;
}
.wll-mp-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 80px;
    transition: transform .4s ease;
    transform-style: preserve-3d;
}
.wll-mp-card.wll-mp-flipped .wll-mp-card-inner { transform: rotateY(180deg); }

.wll-mp-card-front,
.wll-mp-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    border: 2px solid var(--wll-border);
    box-shadow: var(--wll-shadow);
    line-height: 1.3;
    overflow: hidden;
    box-sizing: border-box;
}
.wll-mp-card-front {
    background: var(--wll-green);
    color: #fff;
    font-size: 24px;
    border-color: var(--wll-green-dark);
    cursor: pointer;
}
.wll-mp-card-back {
    transform: rotateY(180deg);
    background: #fff;
    color: #1A202C;
}
.wll-mp-card-word {
    background: #EFF6FF;
    color: #1E3A8A;
    font-size: clamp(11px, 2.5vw, 17px);
    letter-spacing: .02em;
    word-break: break-word;
}
.wll-mp-card-match {
    background: #fff;
    color: #374151;
    font-size: clamp(9px, 1.8vw, 13px);
    font-weight: 500;
    line-height: 1.35;
    align-items: center;
    word-break: break-word;
    hyphens: auto;
}
.wll-mp-card-match span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
}

/* States */
.wll-mp-card.wll-mp-matched .wll-mp-card-inner { pointer-events: none; }
.wll-mp-card.wll-mp-matched .wll-mp-card-back  { background: var(--wll-green-light); border-color: var(--wll-green); }
.wll-mp-card.wll-mp-wrong   .wll-mp-card-back  { background: var(--wll-red-light); border-color: #F87171; }

/* Complete */
.wll-mp-complete {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.wll-mp-complete-inner {
    text-align: center;
    max-width: 340px;
}
.wll-mp-complete-emoji { font-size: 52px; margin-bottom: 12px; }
.wll-mp-complete-inner h3 { font-size: 22px; margin-bottom: 12px; }
.wll-mp-results { font-size: 15px; color: var(--wll-grey); margin-bottom: 20px; }

@media (max-width: 480px) {
    .wll-mp-card { min-height: 64px; }
    .wll-mp-card-inner { min-height: 64px; }
    .wll-mp-card-front  { font-size: 18px; }
    .wll-mp-card-word   { font-size: clamp(10px, 3.5vw, 14px); }
    .wll-mp-card-match  { font-size: clamp(8px, 2.5vw, 11px); }
    .wll-mp-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
}
/* ============================================================
   ANAGRAM
   ============================================================ */

.wll-ag-wrap { max-width: 700px; }

.wll-ag-scorebar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--wll-border);
    margin-bottom: 14px;
}
.wll-ag-counter { font-size: 14px; color: var(--wll-grey); margin-left: auto; }

/* Hint */
.wll-ag-hint-area {
    background: #F8FAFC;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
    min-height: 48px;
}
.wll-ag-pos {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wll-green-dark);
    background: var(--wll-green-light);
    border-radius: 4px;
    padding: 2px 6px;
    margin-bottom: 6px;
}
.wll-ag-hint-def  { font-size: 15px; color: #2D3748; line-height: 1.5; margin: 0; }
.wll-ag-hint-l1   { font-size: 14px; color: var(--wll-grey); margin: 4px 0 0; }
.wll-ag-hint-missing { font-size: 13px; color: #92400E; margin: 0; }

/* Tile bank */
.wll-ag-tiles-wrap { margin-bottom: 12px; min-height: 56px; }
.wll-ag-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.wll-ag-tile {
    width: 48px;
    height: 48px;
    border: 2px solid var(--wll-green) !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: var(--wll-green-dark) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background .12s, transform .08s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,.10) !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.wll-ag-tile:hover:not(.wll-ag-tile-used) { background: var(--wll-green-light) !important; transform: translateY(-2px); }
.wll-ag-tile-used { opacity: .22; cursor: default !important; pointer-events: none; }

/* Answer slots */
.wll-ag-answer-wrap {
    background: #F8FAFC;
    border: 2px dashed #CBD5E0;
    border-radius: 12px;
    padding: 16px 12px;
    margin-bottom: 16px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wll-ag-answer-slots {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
}
.wll-ag-slot {
    width: 48px;
    height: 48px;
    border: 2px dashed #CBD5E0;
    border-radius: 10px;
    background: #fff;
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1A202C;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
}
.wll-ag-slot-filled {
    background: #EFF6FF !important;
    border: 2px solid #93C5FD !important;
    color: #1E3A8A !important;
    box-shadow: 0 2px 6px rgba(59,130,246,.15);
    cursor: pointer;
}
.wll-ag-slot-filled:hover { background: #DBEAFE !important; }
.wll-ag-slot-correct { background: var(--wll-green-light) !important; border-color: var(--wll-green) !important; color: var(--wll-green-dark) !important; }
.wll-ag-slot-wrong   { background: var(--wll-red-light) !important;   border-color: #F87171 !important; animation: wll-shake .3s ease; }
.wll-ag-slot-gap     { width: 16px; height: 48px; border: none; background: transparent; cursor: default; box-shadow: none; }

/* Feedback */
.wll-ag-feedback { min-height: 40px; margin-bottom: 10px; }

/* Actions */
.wll-ag-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .wll-ag-tile, .wll-ag-slot { width: 38px !important; height: 38px !important; font-size: 16px !important; }
    .wll-ag-slot-gap { width: 10px; height: 38px; }
}


/* ============================================================
   LEVEL PICKER
   ============================================================ */

/* Hide game until level is chosen */
.wll-game-hidden { display: none !important; }

.wll-lp-overlay {
    max-width: 600px;
    margin: 40px auto;
    text-align: center;
    padding: 0 16px;
}
.wll-lp-inner { }

.wll-lp-intro {
    font-size: 18px;
    font-weight: 600;
    color: var(--wll-text, #1A202C);
    margin-bottom: 24px;
}

.wll-lp-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.wll-lp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 12px 18px;
    border: 2px solid var(--wll-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    text-align: center;
    box-shadow: var(--wll-shadow) !important;
    color: inherit !important;
}
.wll-lp-card:hover {
    border-color: var(--wll-green) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
    transform: translateY(-3px);
}
.wll-lp-card-chosen {
    border-color: var(--wll-green) !important;
    background: var(--wll-green-light) !important;
}
.wll-lp-card-dim { opacity: .4; }

.wll-lp-emoji  { font-size: 32px; line-height: 1; }
.wll-lp-label  { font-size: 16px; font-weight: 700; color: #1A202C; }
.wll-lp-cefr   { font-size: 12px; font-weight: 600; color: var(--wll-green); letter-spacing: .04em; }
.wll-lp-desc   { font-size: 12px; color: var(--wll-grey); line-height: 1.4; }

.wll-lp-login-hint {
    font-size: 13px;
    color: var(--wll-grey);
}
.wll-lp-login-hint a { color: var(--wll-green); text-decoration: underline; }

/* Change level button */
.wll-lp-change {
    font-size: 12px !important;
    color: var(--wll-grey) !important;
    background: none !important;
    border: 1px solid var(--wll-border) !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    cursor: pointer;
    margin-left: auto;
    transition: border-color .12s;
    box-shadow: none !important;
}
.wll-lp-change:hover { border-color: var(--wll-green) !important; color: var(--wll-green) !important; }

@media (max-width: 480px) {
    .wll-lp-cards { grid-template-columns: 1fr; gap: 10px; }
    .wll-lp-card  { flex-direction: row; padding: 14px 16px; text-align: left; gap: 12px; }
    .wll-lp-emoji { font-size: 26px; flex-shrink: 0; }
    .wll-lp-desc  { display: none; }
}


/* ============================================================
   WORD DETECTIVE
   ============================================================ */

.wll-wd-wrap { max-width: 680px; }

.wll-wd-scorebar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--wll-border);
    margin-bottom: 14px;
}
.wll-wd-counter { font-size: 14px; color: var(--wll-grey); margin-left: auto; }

/* Clue */
.wll-wd-clue-area {
    background: #F8FAFC;
    border: 1px solid var(--wll-border);
    border-radius: var(--wll-radius);
    padding: 14px 16px;
    margin-bottom: 18px;
    min-height: 52px;
}

/* Lives / wrong guesses */
.wll-wd-lives {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.wll-wd-life {
    font-size: 20px;
    color: var(--wll-green);
    transition: color .2s;
}
.wll-wd-life-lost { color: #F87171; }
.wll-wd-wrong-letters {
    margin-left: 10px;
    font-size: 13px;
    color: #F87171;
    font-weight: 600;
    letter-spacing: .08em;
}

/* Letter slots */
.wll-wd-slots-wrap {
    margin-bottom: 20px;
    min-height: 56px;
}
.wll-wd-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.wll-wd-slot {
    width: 42px;
    height: 48px;
    border-bottom: 3px solid #2D3748;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #1A202C;
    text-transform: uppercase;
    transition: border-color .15s;
}
.wll-wd-slot-revealed { border-color: var(--wll-green); color: var(--wll-green-dark); }
.wll-wd-slot-correct  { border-color: var(--wll-green) !important; color: var(--wll-green-dark) !important; background: var(--wll-green-light) !important; border-radius: 6px; }
.wll-wd-slot-failed   { border-color: #F87171 !important; color: #991B1B !important; background: #FEE2E2 !important; border-radius: 6px; }
.wll-wd-slot-gap      { width: 20px; height: 48px; border: none; }
.wll-wd-slot-hyphen   { width: 18px; height: 48px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; color: #1A202C; border: none; }

/* Long words — keep slots compact so the full word fits on one row */
.wll-wd-slots[data-long="1"] .wll-wd-slot         { width: 30px; height: 42px; font-size: 18px; }
.wll-wd-slots[data-long="1"] .wll-wd-slot-gap     { width: 14px; height: 42px; }
.wll-wd-slots[data-long="1"] .wll-wd-slot-hyphen  { width: 12px; height: 42px; font-size: 18px; }

/* Alphabet keyboard */
.wll-wd-keyboard {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-bottom: 14px;
}
.wll-wd-key {
    width: 36px;
    height: 36px;
    border: 1.5px solid #CBD5E0 !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: #2D3748 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background .1s, border-color .1s, transform .08s;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.wll-wd-key:hover:not(.wll-wd-key-used) {
    background: var(--wll-green-light) !important;
    border-color: var(--wll-green) !important;
    transform: translateY(-2px);
}
.wll-wd-key-correct {
    background: var(--wll-green-light) !important;
    border-color: var(--wll-green) !important;
    color: var(--wll-green-dark) !important;
}
.wll-wd-key-wrong {
    background: #FEE2E2 !important;
    border-color: #FCA5A5 !important;
    color: #991B1B !important;
}
.wll-wd-key-used { opacity: .55; cursor: default !important; pointer-events: none; }

/* Feedback + actions */
.wll-wd-feedback { min-height: 40px; margin-bottom: 10px; }
.wll-wd-actions  { display: flex; justify-content: center; margin-bottom: 20px; }

@media (max-width: 480px) {
    .wll-wd-key  { width: 30px; height: 30px; font-size: 11px !important; }
    .wll-wd-slot { width: 34px; height: 40px; font-size: 18px; }
}


/* ============================================================
   DASHBOARD — XP, LEVEL & STATS
   ============================================================ */

.wll-dashboard { max-width: 800px; }

/* Header */
.wll-dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.wll-dash-header h2 { font-size: 22px; margin: 0 0 2px; }
.wll-dash-subtitle  { font-size: 14px; color: var(--wll-grey); margin: 0; }

/* Level badge */
.wll-dash-level-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F8FAFC;
    border: 1px solid var(--wll-border);
    border-radius: 12px;
    padding: 10px 16px;
}
.wll-dash-level-icon { font-size: 28px; line-height: 1; }
.wll-dash-level-name { font-size: 15px; font-weight: 700; color: #1A202C; }
.wll-dash-level-num  { font-size: 12px; color: var(--wll-grey); }

/* XP bar */
.wll-dash-xp-section {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    box-shadow: var(--wll-shadow);
}
.wll-dash-xp-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
}
.wll-dash-xp-total { font-size: 16px; font-weight: 700; color: var(--wll-green); }
.wll-dash-xp-next  { font-size: 12px; color: var(--wll-grey); }
.wll-dash-xp-bar-wrap {
    height: 10px;
    background: #EDF2F7;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.wll-dash-xp-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--wll-green), #38A169);
    border-radius: 99px;
    transition: width .6s ease;
    min-width: 4px;
}
.wll-dash-rank { font-size: 13px; color: var(--wll-grey); }
.wll-dash-rank strong { color: #1A202C; }

/* Stat cards */
.wll-dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.wll-dash-stat {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 12px;
    padding: 14px 12px;
    text-align: center;
    box-shadow: var(--wll-shadow);
}
.wll-stat-num   { font-size: 26px; font-weight: 700; color: var(--wll-green); line-height: 1.1; }
.wll-stat-label { font-size: 12px; color: var(--wll-grey); margin-top: 4px; }

/* Sections */
.wll-dash-section { margin-bottom: 24px; }
.wll-dash-section-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2D3748 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    border: none !important;
}

/* Due list */
.wll-dash-due-list { list-style: none; margin: 0; padding: 0; }
.wll-dash-due-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 10px;
    margin-bottom: 6px;
    box-shadow: var(--wll-shadow);
}
.wll-dash-due-word { font-weight: 700; font-size: 15px; min-width: 100px; }
.wll-dash-due-def  { font-size: 13px; color: var(--wll-grey); flex: 1; }

/* Topic bars */
.wll-dash-topics { display: flex; flex-direction: column; gap: 10px; }
.wll-dash-topic-row {
    display: grid;
    grid-template-columns: 140px 1fr 130px;
    align-items: center;
    gap: 12px;
}
.wll-dash-topic-name { font-size: 13px; font-weight: 500; color: #2D3748; }
.wll-dash-topic-bar-wrap {
    height: 8px;
    background: #EDF2F7;
    border-radius: 99px;
    overflow: hidden;
}
.wll-dash-topic-bar {
    height: 100%;
    background: var(--wll-green);
    border-radius: 99px;
    transition: width .5s ease;
    min-width: 3px;
}
.wll-dash-topic-meta { font-size: 12px; color: var(--wll-grey); text-align: right; }

/* Game links */
.wll-dash-game-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.wll-dash-game-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 10px;
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 12px;
    text-decoration: none;
    color: #2D3748;
    font-size: 13px;
    font-weight: 500;
    transition: border-color .12s, box-shadow .12s, transform .1s;
    box-shadow: var(--wll-shadow);
    text-align: center;
}
.wll-dash-game-card:hover {
    border-color: var(--wll-green);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform: translateY(-2px);
    color: var(--wll-green-dark);
    text-decoration: none;
}
.wll-dash-game-icon { font-size: 26px; }

/* Mobile */
@media (max-width: 600px) {
    .wll-dash-stats          { grid-template-columns: repeat(2, 1fr); }
    .wll-dash-game-links     { grid-template-columns: repeat(2, 1fr); }
    .wll-dash-topic-row      { grid-template-columns: 100px 1fr; }
    .wll-dash-topic-meta     { display: none; }
    .wll-dash-level-badge    { padding: 8px 12px; }
}


/* ============================================================
   LEADERBOARD
   ============================================================ */

.wll-lb-wrap { max-width: 700px; }

.wll-lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.wll-lb-title { font-size: 20px; margin: 0; }

.wll-lb-my-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--wll-green-light);
    border: 1px solid var(--wll-green);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 13px;
}
.wll-lb-my-icon  { font-size: 18px; }
.wll-lb-my-level { font-weight: 700; color: var(--wll-green-dark); }
.wll-lb-my-xp    { color: var(--wll-grey); }

.wll-lb-table-wrap {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--wll-shadow);
}
.wll-lb-table { width: 100%; border-collapse: collapse; }
.wll-lb-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #94A3B8;
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid #F1F5F9;
    background: #FAFAFA;
}
.wll-lb-th-rank, .wll-lb-td-rank { text-align: center; width: 48px; }
.wll-lb-th-xp, .wll-lb-td-xp,
.wll-lb-th-words, .wll-lb-td-words { text-align: right; }

.wll-lb-row td {
    padding: 12px 14px;
    border-bottom: 1px solid #F8FAFC;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
}
.wll-lb-row:last-child td { border-bottom: none; }
.wll-lb-row:hover td { background: #FAFAFA; }
.wll-lb-row-me td {
    background: #F0FDF4 !important;
    font-weight: 600;
}

.wll-lb-rank-num  { font-size: 13px; font-weight: 600; color: #94A3B8; }
.wll-lb-level-icon { margin-right: 4px; }
.wll-lb-level-name { font-size: 13px; color: var(--wll-grey); }
.wll-lb-td-xp   { font-weight: 700; color: var(--wll-green); }
.wll-lb-you {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--wll-green);
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}
.wll-lb-empty {
    text-align: center;
    color: var(--wll-grey);
    padding: 30px !important;
    font-size: 14px;
}

@media (max-width: 500px) {
    .wll-lb-th-words, .wll-lb-td-words { display: none; }
    .wll-lb-level-name { display: none; }
}


/* ============================================================
   GAMES HUB
   ============================================================ */

.wll-hub-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px 40px;
    font-family: var(--wll-font);
}

/* ── Hero ─────────────────────────────────────────────────── */
.wll-hub-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
    padding: 32px 0 28px;
    border-bottom: 1px solid var(--wll-border);
    margin-bottom: 32px;
}
.wll-hub-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    margin: 0 0 8px !important;
    line-height: 1.15 !important;
}
.wll-hub-subtitle {
    font-size: 16px;
    color: var(--wll-grey);
    margin: 0;
    max-width: 480px;
    line-height: 1.6;
}

/* ── XP card (logged in) ─────────────────────────────────── */
.wll-hub-xp-card {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 16px;
    padding: 18px 20px;
    min-width: 240px;
    box-shadow: var(--wll-shadow);
}
.wll-hub-xp-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.wll-hub-xp-icon  { font-size: 32px; line-height: 1; }
.wll-hub-xp-level { font-size: 16px; font-weight: 700; color: #0F172A; }
.wll-hub-xp-sub   { font-size: 12px; color: var(--wll-grey); margin-top: 1px; }

.wll-hub-xp-bar-wrap {
    height: 8px;
    background: #EDF2F7;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 6px;
}
.wll-hub-xp-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--wll-green), #38A169);
    border-radius: 99px;
    min-width: 4px;
}
.wll-hub-xp-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--wll-grey);
    margin-bottom: 14px;
}
.wll-hub-xp-meta span:first-child { font-weight: 700; color: var(--wll-green); }

.wll-hub-stats-row {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--wll-border);
    padding-top: 12px;
}
.wll-hub-stat {
    flex: 1;
    text-align: center;
    border-right: 1px solid var(--wll-border);
}
.wll-hub-stat:last-child { border-right: none; }
.wll-hub-stat strong { display: block; font-size: 18px; font-weight: 700; color: #0F172A; }
.wll-hub-stat span   { font-size: 11px; color: var(--wll-grey); }

/* ── Guest card ──────────────────────────────────────────── */
.wll-hub-guest-card {
    background: #fff;
    border: 1px solid var(--wll-border);
    border-radius: 16px;
    padding: 18px 20px;
    min-width: 260px;
    box-shadow: var(--wll-shadow);
    text-align: center;
}
.wll-hub-guest-title {
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 12px;
}
.wll-hub-guest-levels {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.wll-hub-level-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 6px !important;
    border: 1.5px solid var(--wll-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    cursor: pointer;
    transition: border-color .12s, background .12s;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    color: #374151 !important;
}
.wll-hub-level-btn span { font-size: 11px !important; font-weight: 600 !important; color: #374151 !important; }
.wll-hub-level-btn small { font-size: 10px !important; color: var(--wll-grey) !important; font-weight: 400 !important; }
.wll-hub-level-btn:hover,
.wll-hub-level-btn-active {
    border-color: var(--wll-green) !important;
    background: var(--wll-green-light) !important;
}
.wll-hub-login-hint { font-size: 12px; color: var(--wll-grey); margin: 0; }
.wll-hub-login-hint a { color: var(--wll-green); }

/* ── Game card grid ──────────────────────────────────────── */
.wll-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}
.wll-hub-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid var(--wll-border);
    border-radius: 16px;
    padding: 20px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    box-shadow: var(--wll-shadow);
    position: relative;
    overflow: hidden;
}
.wll-hub-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--hub-color, var(--wll-green));
    border-radius: 16px 16px 0 0;
}
.wll-hub-card:hover {
    border-color: var(--hub-color, var(--wll-green));
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    transform: translateY(-3px);
    text-decoration: none !important;
    color: inherit;
}

.wll-hub-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.wll-hub-card-icon { font-size: 30px; line-height: 1; }
.wll-hub-card-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hub-color, var(--wll-green));
    background: color-mix(in srgb, var(--hub-color, var(--wll-green)) 12%, white);
    padding: 3px 8px;
    border-radius: 20px;
}
.wll-hub-card-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin: 0 0 8px !important;
    line-height: 1.2 !important;
}
.wll-hub-card-desc {
    font-size: 13px;
    color: #64748B;
    line-height: 1.55;
    margin: 0 0 12px;
    flex: 1;
}
.wll-hub-card-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 14px;
}
.wll-hub-skill {
    font-size: 11px;
    background: #F8FAFC;
    border: 1px solid var(--wll-border);
    border-radius: 4px;
    padding: 2px 7px;
    color: #64748B;
}
.wll-hub-card-play {
    font-size: 13px;
    font-weight: 700;
    color: var(--hub-color, var(--wll-green));
    margin-top: auto;
}

/* ── Footer ──────────────────────────────────────────────── */
.wll-hub-footer { text-align: center; font-size: 14px; color: var(--wll-grey); padding-top: 8px; border-top: 1px solid var(--wll-border); }
.wll-hub-footer a { color: var(--wll-green) !important; font-weight: 500; text-decoration: none; }
.wll-hub-footer a:hover { text-decoration: underline; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .wll-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .wll-hub-hero  { grid-template-columns: 1fr; }
    .wll-hub-grid  { grid-template-columns: 1fr; }
    .wll-hub-title { font-size: 26px !important; }
    .wll-hub-xp-card, .wll-hub-guest-card { min-width: unset; }
}


/* ============================================================
   INTEGRATED DASHBOARD (sits inside ESLe student dashboard)
   ============================================================ */

.wll-integrated {
    max-width: 960px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
    padding: 0 0 40px;
}

/* Divider with label */
.wll-int-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 32px 0 24px;
}
.wll-int-divider::before,
.wll-int-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.wll-int-divider span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #1D9E75;
    white-space: nowrap;
}

/* Level row */
.wll-int-level-row {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #f4f6f8;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.wll-int-level-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.wll-int-level-icon { font-size: 28px; line-height: 1; }
.wll-int-level-name { font-size: 15px; font-weight: 700; color: #1a1a2e; }
.wll-int-level-num  { font-size: 12px; color: #6b7280; margin-top: 1px; }

.wll-int-xp-wrap { flex: 1; min-width: 160px; }
.wll-int-xp-bar-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.wll-int-xp-num  { font-size: 14px; font-weight: 700; color: #1D9E75; }
.wll-int-xp-next { font-size: 12px; color: #6b7280; }
.wll-int-xp-track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
}
.wll-int-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #1D9E75, #38A169);
    border-radius: 99px;
    min-width: 4px;
    transition: width .5s ease;
}

/* Stat row — reuses ESLe .eslem-summary-row/.eslem-summary-card */
.wll-int-stats { margin-bottom: 24px; }

/* Sections */
.wll-int-section { margin-bottom: 28px; }

/* Due word list */
.wll-int-due-list { list-style: none; margin: 0; padding: 0; }
.wll-int-due-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 6px;
}
.wll-int-due-word { font-weight: 700; font-size: 14px; min-width: 100px; color: #1a1a2e; }
.wll-int-due-def  { font-size: 13px; color: #6b7280; flex: 1; }

/* Topics — reuse existing wll-dash-topic-row */
.wll-int-topics { display: flex; flex-direction: column; gap: 10px; }

/* Game cards — reuse existing wll-dash-game-links */

@media (max-width: 600px) {
    .wll-int-level-row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .wll-int-xp-wrap  { width: 100%; }
}


/* ============================================================
   TABBED STUDENT DASHBOARD
   ============================================================ */

.wll-tabs-wrap {
    max-width: 960px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
    padding-bottom: 40px;
}

/* Header */
.wll-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
    flex-wrap: wrap;
    gap: 12px;
}
.wll-tabs-name {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    color: #1a1a2e !important;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wll-tabs-streak {
    font-size: 14px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
    padding: 3px 10px;
    border-radius: 20px;
}
.wll-tabs-sub { font-size: 14px; color: #6b7280; margin: 0; }

.wll-tabs-level {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4f6f8;
    border-radius: 10px;
    padding: 10px 16px;
    flex-shrink: 0;
}
.wll-tabs-level-icon { font-size: 26px; line-height: 1; }
.wll-tabs-level-name { font-size: 14px; font-weight: 700; color: #1a1a2e; }
.wll-tabs-level-num  { font-size: 12px; color: #6b7280; }

/* Tab nav */
.wll-tabs-nav {
    display: flex;
    gap: 2px;
    background: #f4f6f8;
    border-radius: 10px;
    padding: 4px;
    margin: 16px 0;
}
.wll-tab-btn {
    flex: 1;
    padding: 9px 8px !important;
    border: none !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    box-shadow: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.wll-tab-btn:hover { background: #fff !important; color: #1a1a2e !important; }
.wll-tab-btn.wll-tab-active {
    background: #fff !important;
    color: #1a1a2e !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.10) !important;
}
.wll-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #EF4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    padding: 0 4px;
    line-height: 1;
}

/* Panels */
.wll-tab-panel { display: none; padding-top: 4px; }
.wll-tab-panel.wll-tab-active { display: block; }

/* Overview quick actions */
.wll-ov-xp-card {
    background: #f4f6f8;
    border-radius: 10px;
    padding: 14px 16px;
}
.wll-ov-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.wll-ov-action-btn {
    flex: 1;
    min-width: 140px;
    padding: 11px 16px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #1a1a2e !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
    box-shadow: none !important;
    text-align: center;
}
.wll-ov-action-btn:hover { border-color: #185FA5 !important; color: #185FA5 !important; box-shadow: 0 2px 8px rgba(0,0,0,.08) !important; }
.wll-ov-action-green:hover { border-color: #1D9E75 !important; color: #1D9E75 !important; }

/* Mobile */
@media (max-width: 600px) {
    .wll-tabs-nav   { overflow-x: auto; }
    .wll-tab-btn    { font-size: 12px !important; padding: 8px 6px !important; }
    .wll-ov-actions { flex-direction: column; }
    .wll-tabs-level { display: none; }
}


/* ============================================================
   DARK MODE
   ============================================================ */

@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    :root {
        --wll-green:       #2DD4A0;
        --wll-green-dark:  #0F9B70;
        --wll-green-light: #0D2E22;
        --wll-red:         #F87171;
        --wll-red-light:   #2D1515;
        --wll-grey:        #94A3B8;
        --wll-grey-light:  #1E2533;
        --wll-border:      #2D3748;
        --wll-shadow:      0 2px 12px rgba(0,0,0,.4);
    }

    .wll-game-wrap,
    .wll-dashboard,
    .wll-integrated,
    .wll-tabs-wrap,
    .wll-hub-wrap { color: #E2E8F0; }

    /* Base surfaces */
    .wll-cw-clues,
    .wll-fc-complete-inner,
    .wll-mp-complete-inner,
    .wll-hub-xp-card,
    .wll-hub-guest-card,
    .wll-hub-card,
    .wll-lb-table-wrap,
    .wll-ov-xp-card,
    .wll-dash-stat,
    .wll-dash-due-item,
    .wll-int-due-item,
    .wll-int-level-row,
    .wll-tabs-level,
    .wll-dash-level-badge,
    .wll-dash-xp-section,
    .wll-dash-section,
    .wll-ag-hint-area,
    .wll-wd-clue-area,
    .eslem-lesson-card,
    .eslem-summary-card { background: #1A2332 !important; border-color: #2D3748 !important; }

    /* Tab nav */
    .wll-tabs-nav { background: #0F172A; }
    .wll-tab-btn.wll-tab-active,
    .wll-tab-btn:hover { background: #1A2332 !important; color: #E2E8F0 !important; }
    .wll-tab-btn { color: #64748B !important; }

    /* Game grid */
    .wll-cw-grid-wrap { background: #0F172A; border-color: #2D3748; }
    .wll-cw-letter    { background: #1A2332 !important; }
    .wll-cw-letter:hover { background: #1E3A5F !important; }
    .wll-cw-input     { color: #E2E8F0 !important; }
    .wll-cw-num       { color: #64748B; }

    /* Word search */
    .wll-ws-cell      { background: #1A2332; color: #E2E8F0; border-color: #2D3748; }
    .wll-ws-sidebar   { background: #0F172A; border-color: #2D3748; }

    /* Crossword clues */
    .wll-cw-clue-text { color: #CBD5E0; }
    .wll-cw-clue-item:hover { background: #1A2332; }
    .wll-cw-clue-item.wll-cw-clue-active { background: #1E3A5F; border-left-color: #2DD4A0; }

    /* Matching pairs */
    .wll-mp-card-front { background: var(--wll-green-dark) !important; }
    .wll-mp-card-back,
    .wll-mp-card-word  { background: #1A2332 !important; color: #E2E8F0 !important; border-color: #2D3748 !important; }

    /* Anagram / Word Detective tiles */
    .wll-ag-tile  { background: #1A2332 !important; border-color: var(--wll-green) !important; color: var(--wll-green) !important; }
    .wll-ag-slot  { background: #0F172A; border-color: #2D3748; color: #E2E8F0; }
    .wll-ag-slot-filled { background: #1E3A5F !important; border-color: #3B82F6 !important; }
    .wll-ag-answer-wrap { background: #0F172A; border-color: #2D3748; }
    .wll-ag-hint-area   { background: #0F172A !important; }
    .wll-wd-key   { background: #1A2332 !important; border-color: #2D3748 !important; color: #E2E8F0 !important; }
    .wll-wd-slot  { border-color: #475569; color: #E2E8F0; }
    .wll-wd-slot-gap { border-color: transparent; }

    /* Flashcard */
    .wll-fc-card,
    .wll-fc-front,
    .wll-fc-back   { background: #1A2332; border-color: #2D3748; color: #E2E8F0; }
    .wll-fc-option { background: #1A2332 !important; border-color: #2D3748 !important; color: #E2E8F0 !important; }
    .wll-fc-option:hover { background: #1E3A5F !important; }

    /* Hub cards */
    .wll-hub-card { background: #1A2332 !important; border-color: #2D3748 !important; }
    .wll-hub-card:hover { border-color: var(--hub-color, var(--wll-green)) !important; }
    .wll-hub-card-name { color: #E2E8F0 !important; }
    .wll-hub-card-desc { color: #94A3B8; }
    .wll-hub-skill { background: #0F172A; border-color: #2D3748; color: #94A3B8; }
    .wll-hub-guest-levels { gap: 8px; }
    .wll-hub-level-btn { background: #1A2332 !important; border-color: #2D3748 !important; color: #E2E8F0 !important; }
    .wll-hub-level-btn span { color: #E2E8F0 !important; }

    /* Leaderboard */
    .wll-lb-table thead th { background: #0F172A; color: #64748B; border-color: #2D3748; }
    .wll-lb-row td { border-color: #1E2D40; color: #CBD5E0; }
    .wll-lb-row:hover td { background: #1A2332; }
    .wll-lb-row-me td { background: #0D2E22 !important; }

    /* Dashboard */
    .wll-dash-game-card { background: #1A2332 !important; border-color: #2D3748 !important; color: #CBD5E0 !important; }
    .wll-dash-game-card:hover { border-color: var(--wll-green) !important; color: var(--wll-green) !important; }
    .wll-dash-topic-bar-wrap { background: #2D3748; }
    .wll-xp-bar-wrap,
    .wll-int-xp-track,
    .wll-hub-xp-bar-wrap,
    .wll-dash-xp-bar-wrap { background: #2D3748; }

    /* Buttons */
    .wll-btn-secondary { background: #1A2332 !important; color: #CBD5E0 !important; border-color: #2D3748 !important; }
    .wll-ov-action-btn { background: #1A2332 !important; border-color: #2D3748 !important; color: #CBD5E0 !important; }

    /* General text */
    .wll-ag-hint-def,
    .wll-wd-clue-area p { color: #CBD5E0; }
    .eslem-section-title { color: #CBD5E0 !important; }
    .eslem-summary-number { color: inherit; }
    .wll-int-divider span { color: var(--wll-green); }
    .wll-int-divider::before,
    .wll-int-divider::after { background: #2D3748; }
    .wll-fc-progress-bar { background: #2D3748; }
    .wll-ws-score-display { color: #E2E8F0; }
}


/* ============================================================
   ENHANCED LOADING STATES
   ============================================================ */

/* Full-screen game loader */
.wll-game-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    gap: 20px;
    padding: 40px;
}
.wll-game-loader-ring {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid var(--wll-border);
    border-top-color: var(--wll-green);
    animation: wll-spin .8s cubic-bezier(.4,0,.2,1) infinite;
}
.wll-game-loader-text {
    font-size: 15px;
    color: var(--wll-grey);
    font-weight: 500;
    animation: wll-pulse 1.8s ease-in-out infinite;
}
@keyframes wll-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

/* Skeleton shimmer for word list */
.wll-skeleton {
    background: linear-gradient(90deg, var(--wll-border) 25%, var(--wll-grey-light) 50%, var(--wll-border) 75%);
    background-size: 200% 100%;
    animation: wll-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    height: 14px;
}
@keyframes wll-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Progress dots (used in new game AJAX loading) */
.wll-dots {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.wll-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wll-green);
    animation: wll-bounce .8s ease-in-out infinite;
}
.wll-dot:nth-child(2) { animation-delay: .15s; }
.wll-dot:nth-child(3) { animation-delay: .30s; }
@keyframes wll-bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40%            { transform: scale(1);  opacity: 1;  }
}


/* ============================================================
   GAME COMPLETION ANIMATIONS
   ============================================================ */

/* Confetti canvas overlay */
#wll-confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
}

/* Enhanced complete screen */
.wll-fc-complete-inner {
    animation: wll-complete-in .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes wll-complete-in {
    from { opacity: 0; transform: scale(.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Emoji bounce on complete */
.wll-fc-complete-emoji {
    display: inline-block;
    animation: wll-emoji-bounce .6s cubic-bezier(.34,1.56,.64,1) .3s both;
}
@keyframes wll-emoji-bounce {
    from { transform: scale(0) rotate(-15deg); }
    to   { transform: scale(1) rotate(0deg); }
}

/* Score count-up pulse */
.wll-score-flash {
    animation: wll-score-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes wll-score-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.4); color: var(--wll-green); }
    100% { transform: scale(1); }
}

/* Star rating animation on complete */
.wll-stars {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 8px 0;
}
.wll-star {
    font-size: 28px;
    opacity: 0;
    transform: scale(0) rotate(-30deg);
    animation: wll-star-in .4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.wll-star:nth-child(1) { animation-delay: .4s; }
.wll-star:nth-child(2) { animation-delay: .55s; }
.wll-star:nth-child(3) { animation-delay: .70s; }
@keyframes wll-star-in {
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* XP earned badge */
.wll-xp-earned {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--wll-green-light);
    color: var(--wll-green-dark);
    font-size: 18px;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 99px;
    border: 2px solid var(--wll-green);
    animation: wll-complete-in .4s cubic-bezier(.34,1.56,.64,1) .6s both;
}

/* Level-up banner */
.wll-levelup {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: linear-gradient(135deg, #1D9E75, #0F6E56);
    color: #fff;
    padding: 14px 32px;
    border-radius: 0 0 16px 16px;
    font-size: 16px;
    font-weight: 700;
    z-index: 10000;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
    animation: wll-levelup-drop .5s cubic-bezier(.34,1.56,.64,1) forwards,
               wll-levelup-rise .4s ease-in 2.5s forwards;
    white-space: nowrap;
}
@keyframes wll-levelup-drop {
    to { transform: translateX(-50%) translateY(0); }
}
@keyframes wll-levelup-rise {
    to { transform: translateX(-50%) translateY(-100%); opacity: 0; }
}


/* ══════════════════════════════════════════════════════════════
   SENTENCE BUILDER
   ══════════════════════════════════════════════════════════════ */


.wll-sb-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 0 16px 48px;
    font-family: system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
}

/* Header */
.wll-sb-header { margin-bottom: 20px; }
.wll-sb-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.wll-sb-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    margin: 0 !important;
    color: #1a1a2e !important;
    letter-spacing: -.02em;
}
.wll-sb-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.wll-sb-progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.wll-sb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #1D9E75, #10B981);
    border-radius: 99px;
    transition: width .5s ease;
    width: 0%;
}
.wll-sb-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.wll-sb-counter { font-size: 13px; color: #6b7280; font-weight: 600; }
.wll-sb-score-row { display: flex; gap: 10px; }
.wll-sb-score-chip {
    font-size: 13px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
}
.wll-sb-correct-chip { background: #D1FAE5; color: #065F46; }
.wll-sb-wrong-chip   { background: #FEE2E2; color: #991B1B; }

/* Loading */
.wll-sb-loading { text-align: center; padding: 40px 0; color: #6b7280; }

/* Hint */
.wll-sb-hint {
    background: #EFF6FF;
    border: 1.5px solid #BFDBFE;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 14px;
    color: #1E40AF;
    margin-bottom: 16px;
    animation: wll-fade-in .3s ease;
}

/* Build zone */
.wll-sb-build-zone { margin-bottom: 16px; }
.wll-sb-drop-area {
    min-height: 72px;
    background: #f8fafc;
    border: 2.5px dashed #d1d5db;
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color .2s;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.wll-sb-drop-area:focus-within { border-color: #1D9E75; }
.wll-sb-drop-placeholder {
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
    user-select: none;
}
.wll-sb-built { display: flex; flex-wrap: wrap; gap: 8px; }

/* Word tiles */
.wll-sb-word-tile,
.wll-sb-built-tile {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all .15s;
    user-select: none;
}

/* Bank tiles */
.wll-sb-word-bank {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    min-height: 48px;
}
.wll-sb-word-tile {
    background: #fff;
    color: #1a1a2e;
    border: 2px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    text-transform: lowercase !important;
}
.wll-sb-word-tile.wll-sb-tile-first,
.wll-sb-built-tile.wll-sb-tile-first {
    text-transform: none; /* first word keeps its JS-set capital */
}
.wll-sb-word-tile:hover:not(.wll-sb-tile-used) {
    border-color: #1D9E75;
    background: #E1F5EE;
    transform: translateY(-1px);
}
.wll-sb-word-tile.wll-sb-tile-used {
    background: #f4f6f8;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: default;
    text-decoration: line-through;
}

/* Built tiles */
.wll-sb-built-tile {
    background: #1D9E75;
    color: #fff;
    box-shadow: 0 2px 8px rgba(29,158,117,.3);
    text-transform: lowercase !important;
}
.wll-sb-built-tile:hover { background: #0F6E56; transform: translateY(-1px); }
.wll-sb-built-tile.wll-sb-tile-correct { background: #059669; }
.wll-sb-built-tile.wll-sb-tile-wrong   { background: #EF4444; }

/* Actions */
.wll-sb-actions { display: flex; gap: 10px; margin-bottom: 16px; }
.wll-sb-btn {
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all .15s;
}
.wll-sb-btn:disabled { opacity: .4; cursor: not-allowed; }
.wll-sb-btn-ghost {
    background: #f4f6f8;
    color: #6b7280;
    border: 1.5px solid #e5e7eb;
}
.wll-sb-btn-ghost:hover { background: #e9ecef; color: #374151; }
.wll-sb-btn-check {
    flex: 1;
    background: linear-gradient(135deg, #1D9E75, #0F6E56);
    color: #fff;
    box-shadow: 0 4px 16px rgba(29,158,117,.3);
}
.wll-sb-btn-check:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(29,158,117,.4); }
.wll-sb-btn-next {
    background: #1a1a2e;
    color: #fff;
    padding: 12px 28px;
}
.wll-sb-btn-next:hover { background: #2d3748; }
.wll-sb-btn-start {
    background: linear-gradient(135deg, #1D9E75, #0F6E56);
    color: #fff;
    padding: 14px 40px;
    font-size: 17px;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(29,158,117,.35);
}
.wll-sb-btn-start:hover { transform: translateY(-2px); }

/* Feedback */
.wll-sb-feedback {
    background: #f8fafc;
    border-radius: 14px;
    padding: 20px;
    text-align: center;
    animation: wll-fade-in .3s ease;
}
.wll-sb-feedback-icon { font-size: 40px; margin-bottom: 8px; }
.wll-sb-feedback-text { font-size: 16px; font-weight: 600; color: #374151; margin-bottom: 12px; }
.wll-sb-correct-sentence {
    font-size: 16px;
    color: #1D9E75;
    font-weight: 700;
    font-style: italic;
    padding: 10px 16px;
    background: #E1F5EE;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Start / Results screens */
.wll-sb-start,
.wll-sb-results {
    text-align: center;
    padding: 40px 20px;
}
.wll-sb-start-icon { font-size: 64px; margin-bottom: 16px; }
.wll-sb-start h3,
.wll-sb-results-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #1a1a2e !important;
    margin: 0 0 10px !important;
}
.wll-sb-start p { color: #6b7280; font-size: 15px; margin: 0 0 24px; }
.wll-sb-results-emoji { font-size: 64px; margin-bottom: 12px; }
.wll-sb-results-score { font-size: 20px; color: #374151; margin-bottom: 24px; }

/* Review */
.wll-sb-review { text-align: left; margin-bottom: 24px; }
.wll-sb-review h4 { font-size: 15px; font-weight: 700; color: #374151; margin: 0 0 12px; }
.wll-sb-review-item {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
    font-size: 14px;
}
.wll-sb-review-correct { color: #065F46; font-weight: 600; margin-bottom: 4px; }
.wll-sb-review-wrong   { color: #991B1B; }

/* Dark mode */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    .wll-sb-wrap { color: #E2E8F0; }
    .wll-sb-title { color: #E2E8F0 !important; }
    .wll-sb-hint { background: #1A2332; border-color: #2D3748; color: #93C5FD; }
    .wll-sb-drop-area { background: #1A2332; border-color: #2D3748; }
    .wll-sb-word-tile { background: #1A2332; border-color: #2D3748; color: #E2E8F0; }
    .wll-sb-word-tile:hover:not(.wll-sb-tile-used) { background: #0D2E22; border-color: #1D9E75; }
    .wll-sb-word-tile.wll-sb-tile-used { background: #0F172A; color: #4B5563; }
    .wll-sb-feedback { background: #1A2332; }
    .wll-sb-feedback-text { color: #CBD5E0; }
    .wll-sb-review-item { background: #1A2332; }
    .wll-sb-start h3, .wll-sb-results-title { color: #E2E8F0 !important; }
    .wll-sb-results-score { color: #CBD5E0; }
}

/* ── Grammar-style toolbar & instructions for vocab games ─────────── */
.wll-game-wrap .wll-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}
.wll-game-wrap .wll-toolbar-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary, #1a1a2e);
    margin: 0;
}
.wll-game-wrap .wll-instructions-bar {
    background: var(--color-background-secondary, #f4f6f8);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: none;
}
.wll-game-wrap .wll-instructions-bar.wll-instructions-open {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}
.wll-game-wrap .wll-instr-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.wll-game-wrap .wll-instr-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: #1D9E75;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.wll-game-wrap .wll-filters-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
/* Crossword controls bar sits outside wll-game-wrap */
#wll-cw-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
#wll-cw-controls .wll-filter-select,
#wll-cw-controls select {
    padding: 7px 10px !important;
    border: 0.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #fff !important;
    cursor: pointer !important;
    color: #1a1a2e !important;
    min-width: 120px !important;
    max-width: none !important;
    width: auto !important;
    box-shadow: none !important;
}
#wll-cw-controls .wll-filter-btn {
    padding: 7px 16px;
    border: 0.5px solid #85B7EB;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    background: #E6F1FB;
    color: #0C447C;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    white-space: nowrap;
}
#wll-cw-controls .wll-filter-btn:hover {
    background: #B5D4F4;
    border-color: #378ADD;
    color: #042C53;
}
#wll-cw-controls #wll-cw-new {
    background: #378ADD;
    border-color: #378ADD;
    color: #fff;
    font-weight: 600;
}
#wll-cw-controls #wll-cw-new:hover {
    background: #185FA5;
    border-color: #185FA5;
}
.wll-cw-spelling-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
}
.wll-cw-spelling-label {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}
.wll-cw-spell-btn {
    padding: 4px 12px !important;
    border: 0.5px solid #B5D4F4 !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    background: #E6F1FB !important;
    color: #185FA5 !important;
    transition: background .15s, color .15s !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.wll-cw-spell-btn.active {
    background: #185FA5 !important;
    border-color: #185FA5 !important;
    color: #fff !important;
}
.wll-cw-spell-btn:not(.active):hover {
    background: #B5D4F4 !important;
    border-color: #378ADD !important;
    color: #042C53 !important;
}
.wll-game-wrap .wll-filter-select {
    padding: 7px 10px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
    color: #1a1a2e;
    min-width: 90px;
    max-width: 160px;
}
.wll-game-wrap .wll-filter-btn {
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    background: #1D9E75;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wll-game-wrap .wll-filter-btn:hover {
    background: #178a64;
}
.wll-game-wrap .wll-instr-toggle {
    padding: 7px 14px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    background: #1D9E75;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    transition: background .15s;
}
.wll-game-wrap .wll-instr-toggle:hover { background: #178a64; }
/* Hide old game header */
.wll-game-wrap .wll-game-header { display: none !important; }

/* ── Word Search size picker ───────────────────────────────────────── */
.wll-size-picker { display:inline-flex; border:1.5px solid #e5e7eb; border-radius:8px; overflow:hidden; }
.wll-size-btn { padding:7px 13px !important; border:none !important; border-right:1px solid #e5e7eb !important; background:#fff !important; cursor:pointer !important; font-size:13px !important; font-weight:600 !important; color:#6b7280 !important; transition:background .15s,color .15s; }
.wll-size-btn:last-child { border-right:none; }
.wll-size-btn:hover { background:#f4f6f8; color:#1a1a2e; }
.wll-size-btn.wll-size-active { background:#1D9E75 !important; color:#fff !important; }

/* ── Word search controls bar — outside game wrap ─────────────────────── */
#wll-ws-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
}
#wll-ws-controls select,
#wll-ws-controls .wll-filter-select {
    padding: 7px 10px !important;
    border: 0.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #fff !important;
    color: #1a1a2e !important;
    cursor: pointer !important;
    min-width: 120px !important;
    max-width: none !important;
    width: auto !important;
    box-shadow: none !important;
}
#wll-ws-controls .wll-filter-btn {
    padding: 7px 16px !important;
    border: 0.5px solid #85B7EB !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: #E6F1FB !important;
    color: #0C447C !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}
#wll-ws-controls .wll-filter-btn:hover {
    background: #B5D4F4 !important;
    border-color: #378ADD !important;
    color: #042C53 !important;
}
#wll-ws-controls #wll-new-puzzle {
    background: #378ADD !important;
    border-color: #378ADD !important;
    color: #fff !important;
    font-weight: 600 !important;
}
#wll-ws-controls #wll-new-puzzle:hover {
    background: #185FA5 !important;
    border-color: #185FA5 !important;
}
/* Sound label readable outside game wrap */
#wll-ws-controls .wll-sound-sw-label {
    color: #374151 !important;
}
/* Size picker pill inside controls */
#wll-ws-controls .wll-size-picker {
    display: inline-flex;
    border: 0.5px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
@keyframes wll-bonus-pop { 0%{opacity:1;transform:translateY(0) scale(1);} 80%{opacity:1;transform:translateY(-18px) scale(1.1);} 100%{opacity:0;transform:translateY(-28px) scale(.9);} }
.wll-bonus-flash { display:inline-block; margin-left:8px; color:#1D9E75; font-weight:700; font-size:13px; animation:wll-bonus-pop 1.2s ease forwards; pointer-events:none; }

/* ── Game navigation dropdown ─────────────────────────────────────── */
.wll-game-nav { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.wll-game-nav-label { font-size:12px; font-weight:600; color:#6b7280; white-space:nowrap; text-transform:uppercase; letter-spacing:.05em; }
.wll-nav-dropdown { position:relative; }
.wll-nav-trigger { display:inline-flex!important; align-items:center!important; gap:6px!important; padding:7px 14px!important; background:#fff!important; border:1.5px solid #e5e7eb!important; border-radius:8px!important; font-size:13px!important; font-weight:500!important; color:#374151!important; cursor:pointer!important; transition:border-color .15s!important; white-space:nowrap!important; }
.wll-nav-trigger:hover { border-color:#1D9E75!important; color:#1D9E75!important; }
.wll-nav-menu { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:9999; padding:6px 0; overflow:hidden; }
.wll-nav-menu.wll-nav-open { display:block; }
.wll-nav-item { display:block!important; padding:9px 16px!important; font-size:13px!important; font-weight:500!important; color:#374151!important; text-decoration:none!important; transition:background .12s!important; white-space:nowrap!important; }
.wll-nav-item:hover { background:#f4f6f8!important; color:#1D9E75!important; }
.wll-nav-item.wll-nav-item-current { background:#f0fdf9!important; color:#1D9E75!important; font-weight:600!important; pointer-events:none; }

/* ── XP flash ───────────────────────────────────────────────────── */
@keyframes wll-xp-pop {
    0%   { opacity:1; transform:translateY(0) scale(1); }
    70%  { opacity:1; transform:translateY(-20px) scale(1.15); }
    100% { opacity:0; transform:translateY(-32px) scale(0.9); }
}
.wll-xp-flash {
    display: inline-block;
    margin-left: 10px;
    color: #1D9E75;
    font-weight: 700;
    font-size: 15px;
    animation: wll-xp-pop 1.5s ease forwards;
    pointer-events: none;
    vertical-align: middle;
}

/* ── Translation tip ───────────────────────────────────────────── */
.wll-translation-tip {
    display: none;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    background: #f0fdf9;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 13px;
    color: #065f46;
    margin-bottom: 12px;
    line-height: 1.5;
}
.wll-translation-tip.wll-tip-visible { display: flex; }
.wll-tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ══ Blockbusters ═══════════════════════════════════════════════════════ */
.wll-bb-game-wrap .wll-toolbar-title{letter-spacing:-.03em}
.wll-bb-mode-tabs{display:inline-flex;border:.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);overflow:hidden;margin-left:8px}
.wll-bb-tab{padding:6px 16px!important;border:none!important;background:var(--color-background-secondary)!important;color:var(--color-text-secondary)!important;font-size:13px!important;font-weight:500!important;cursor:pointer!important;font-family:inherit!important;transition:background .12s!important}
.wll-bb-tab:hover{background:var(--color-border-tertiary)!important;color:var(--color-text-primary)!important}
.wll-bb-tab-active{background:#1D9E75!important;color:#fff!important}
.wll-bb-instructions{margin-bottom:8px}
.wll-bb-layout{display:flex;gap:24px;align-items:flex-start;margin-top:4px}
.wll-bb-grid-wrap{flex:1 1 auto;min-width:0}
.wll-bb-svg{width:100%;max-width:620px;height:auto;display:block}
.wll-bb-grid-legend{display:none}
.wll-bb-legend-blue{color:#5DCAA5}
.wll-bb-legend-gold{color:#FAC775}
.wll-bb-side{flex:0 0 300px;min-width:220px;max-width:320px;display:flex;flex-direction:column;gap:10px}
.wll-bb-scores{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:2px}
.wll-bb-score-card{padding:6px 8px;border-radius:var(--border-radius-md);text-align:center;border:1.5px solid;transition:border-width .15s}
.wll-bb-card-blue{border-color:#378ADD;background:#EBF4FD}
.wll-bb-card-gold{border-color:#BA7517;background:#fef9ee}
.wll-bb-active-turn{border-width:3px!important;box-shadow:0 0 0 1px currentColor}
.wll-bb-sname{font-size:10px;color:var(--color-text-secondary);margin-bottom:1px}
.wll-bb-snum{font-size:18px;font-weight:700;line-height:1.1}
.wll-bb-snum-blue{color:#185FA5}
.wll-bb-snum-gold{color:#BA7517}
.wll-bb-tbadge{display:inline-block;font-size:10px;padding:2px 8px;border-radius:4px;margin-top:2px;font-weight:600}
.wll-bb-tbadge-blue{background:#E6F1FB;color:#185FA5}
.wll-bb-tbadge-gold{background:#FAEEDA;color:#854F0B}
.wll-bb-qbox{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:16px;min-height:120px}
.wll-bb-qlabel{font-size:11px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.wll-bb-qdef{font-size:16px;line-height:1.6;color:var(--color-text-primary);font-style:italic;font-weight:500}
.wll-bb-qword{font-size:17px;font-weight:700;color:#1D9E75;margin-top:10px;letter-spacing:.01em}
.wll-bb-letter-hint{font-size:11px;color:var(--color-text-secondary);margin-top:6px}
.wll-bb-btn-row{display:flex;gap:6px}
.wll-bb-btn{flex:1;padding:8px 10px;border-radius:var(--border-radius-md);border:.5px solid var(--color-border-secondary);background:var(--color-background-primary);font-size:13px;cursor:pointer;color:var(--color-text-primary);font-family:inherit;transition:background .12s}
.wll-bb-btn:hover{background:var(--color-background-secondary)}
.wll-bb-btn-blue{background:#1D9E75!important;color:#fff!important;border-color:#1D9E75!important}
.wll-bb-btn-blue:hover{background:#0F6E56!important}
.wll-bb-btn-gold{background:#EF9F27!important;color:#fff!important;border-color:#EF9F27!important}
.wll-bb-btn-gold:hover{background:#BA7517!important}
.wll-bb-btn-check{background:#1D9E75!important;color:#fff!important;border-color:#1D9E75!important;flex:0 0 auto;padding:8px 16px!important}
.wll-bb-btn-check:hover{background:#0F6E56!important}
.wll-bb-input-wrap{display:flex;gap:6px;margin-bottom:4px}
.wll-bb-input{flex:1;padding:8px 12px;border-radius:var(--border-radius-md);border:1.5px solid var(--color-border-secondary);font-size:14px;font-family:inherit;color:var(--color-text-primary);outline:none;background:var(--color-background-primary);transition:border-color .15s}
.wll-bb-input:focus{border-color:#1D9E75}
.wll-bb-correct{border-color:#1D9E75!important;background:#f0fdf9!important}
.wll-bb-wrong{border-color:#E24B4A!important;animation:wll-bb-shake .35s ease}
@keyframes wll-bb-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.wll-bb-feedback{font-size:12px;min-height:18px;color:var(--color-text-secondary)}
.wll-bb-fb-correct{color:#1D9E75!important;font-weight:600}
.wll-bb-fb-wrong{color:#E24B4A!important;font-weight:600}
.wll-bb-xp{font-size:15px;font-weight:700;color:#1D9E75;text-align:center;padding:4px;animation:wll-xp-pop 2s ease forwards}
.wll-bb-win{padding:20px 16px;border-radius:var(--border-radius-md);font-size:16px;font-weight:700;text-align:center;animation:wll-bb-appear .6s cubic-bezier(.34,1.56,.64,1) both;line-height:1.6;letter-spacing:-.01em}
@keyframes wll-bb-appear{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.wll-bb-win-blue{background:#E1F5EE;color:#0F6E56;border:1.5px solid #1D9E75}
.wll-bb-win-gold{background:#FAEEDA;color:#854F0B;border:1.5px solid #EF9F27}
.wll-bb-win-crown{font-size:18px}
.wll-bb-hex{cursor:pointer}
.wll-bb-hex polygon{transition:fill .3s ease,filter .2s ease}
.wll-bb-hex:hover polygon{filter:brightness(1.25)}
.wll-bb-winner polygon{animation:wll-bb-pulse 1s ease infinite;filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}
@keyframes wll-bb-pulse{0%,100%{opacity:1}50%{opacity:.65}}
@media(max-width:680px){.wll-bb-layout{flex-direction:column}.wll-bb-svg{max-width:100%}.wll-bb-side{min-width:0}}

/* ── Blockbusters quick bar ──────────────────────────────────────── */
.wll-bb-quick-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* ── Blockbusters How To Play button consistency ─────────────────── */
/* Gold Run MCQ options */
.wll-bb-gold-opt {
    width: 100%;
    padding: 10px 8px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}
.wll-bb-gold-opt:hover:not(:disabled) {
    border-color: #EF9F27;
    background: #FEF3C7;
    transform: translateY(-2px);
}
.wll-bb-gold-opt-correct {
    border-color: #0F6E56 !important;
    background: #D1FAE5 !important;
    color: #065F46 !important;
}
.wll-bb-gold-opt-wrong {
    border-color: #A32D2D !important;
    background: #FEE2E2 !important;
    color: #A32D2D !important;
}
.wll-bb-gold-opt:disabled { cursor: default; opacity: 0.85; }

.wll-bb-game-wrap .wll-bb-instr-btn {
    padding: 7px 14px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: #1D9E75 !important;
    cursor: pointer !important;
    color: #fff !important;
    font-weight: 600 !important;
    margin-left: auto !important;
}
.wll-bb-game-wrap .wll-bb-instr-btn:hover { background: #0F6E56 !important; }

/* ── Instruction step number padding ─────────────────────────────── */
.wll-bb-game-wrap .wll-instr-num {
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
}
.wll-bb-game-wrap .wll-instr-step {
    gap: 14px !important;
    padding: 4px 0 !important;
}

/* ── Blockbusters pairs fallback ─────────────────────────────────── */
.wll-bb-pairs-fallback{display:flex;gap:6px;margin-top:6px}
.wll-bb-btn-reveal{background:var(--color-background-secondary)!important;color:var(--color-text-secondary)!important;border:.5px solid var(--color-border-secondary)!important;font-size:12px!important}
.wll-bb-btn-reveal:hover{color:var(--color-text-primary)!important;border-color:var(--color-border-primary)!important}
.wll-bb-btn-skip{background:var(--color-background-secondary)!important;color:var(--color-text-secondary)!important;border:.5px solid var(--color-border-secondary)!important;font-size:12px!important}
.wll-bb-btn-skip:hover{background:#FCEBEB!important;color:#A32D2D!important;border-color:#F09595!important}
.wll-bb-fb-reveal{color:var(--color-text-secondary)!important;font-style:italic}

.wll-bb-qpos{font-size:12px;color:var(--color-text-secondary);font-style:italic;margin-bottom:4px}
.wll-bb-pairs-fallback{display:flex;gap:6px;margin-top:6px}
.wll-bb-btn-reveal,.wll-bb-btn-skip{background:var(--color-background-secondary)!important;color:var(--color-text-secondary)!important;border:.5px solid var(--color-border-secondary)!important;font-size:12px!important}
.wll-bb-btn-reveal:hover{color:var(--color-text-primary)!important}
.wll-bb-btn-skip:hover{background:#FCEBEB!important;color:#A32D2D!important;border-color:#F09595!important}
.wll-bb-fb-reveal{color:var(--color-text-secondary)!important;font-style:italic}
.wll-bb-score-card{padding:4px 8px!important}
.wll-bb-snum{font-size:15px!important}
.wll-bb-sname{font-size:10px!important}
.wll-bb-tbadge{font-size:9px!important;padding:1px 5px!important}

/* ── Legend under scorecards ─────────────────────────────────────── */
.wll-bb-legend-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.wll-bb-legend-row .wll-bb-legend-blue,
.wll-bb-legend-row .wll-bb-legend-gold {
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--border-radius-md);
}
.wll-bb-legend-row .wll-bb-legend-blue {
    background: #EBF4FD;
    color: #185FA5;
}
.wll-bb-legend-row .wll-bb-legend-gold {
    background: #FAEEDA;
    color: #854F0B;
}

/* ── Bob Holness memorial ────────────────────────────────────────── */
.wll-bb-bob-note {
    margin-top: 16px;
    padding: 10px 14px;
    background: var(--color-background-secondary);
    border-radius: var(--border-radius-md);
    font-size: 12px;
    color: var(--color-text-secondary);
    text-align: center;
    line-height: 1.6;
    border-top: 2px solid #EF9F27;
}
.wll-bb-bob-star {
    color: #EF9F27;
    font-size: 13px;
    margin: 0 3px;
}

/* ── Blockbusters steal ───────────────────────────────────────────── */
.wll-bb-fb-steal {
    color: #EF9F27 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
}

/* ══ Countdown ══════════════════════════════════════════════════════════ */
.wll-cd-wrap .wll-toolbar-title{letter-spacing:-.04em;color:#378ADD}
.wll-cd-mode-tabs{display:inline-flex;border:.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);overflow:hidden;margin-left:8px}
.wll-cd-tab{padding:6px 14px;border:none;background:var(--color-background-secondary);color:var(--color-text-secondary);font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .12s}
.wll-cd-tab:hover{color:var(--color-text-primary)}
.wll-cd-tab-active{background:#378ADD!important;color:#fff!important}
.wll-cd-toolbar-controls{display:flex;align-items:center;gap:6px;margin-left:10px}
.wll-cd-layout{display:flex;gap:20px;align-items:flex-start;margin-top:12px;flex-wrap:wrap}
.wll-cd-clock-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.wll-cd-clock-label{font-size:11px;font-weight:500;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em}
.wll-cd-canvas{display:block}
.wll-cd-mode-label{font-size:11px;color:var(--color-text-secondary);text-align:center}
.wll-cd-main{flex:1;min-width:260px;display:flex;flex-direction:column;gap:10px}
.wll-cd-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.wll-cd-stat{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:8px;text-align:center}
.wll-cd-stat-label{font-size:10px;color:var(--color-text-secondary);margin-bottom:2px}
.wll-cd-stat-val{font-size:18px;font-weight:500;color:var(--color-text-primary)}
.wll-cd-tiles{display:flex;gap:6px;justify-content:flex-start;flex-wrap:wrap;min-height:70px;align-items:center}
.wll-cd-tile{width:52px;height:62px;border-radius:6px;background:#378ADD;border-bottom:4px solid #185FA5;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:#fff;opacity:0;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease}
.wll-cd-tile-shown{opacity:1;transform:translateY(0)}
.wll-cd-hints{display:flex;gap:5px;flex-wrap:wrap}
.wll-cd-hint{padding:5px 10px;border-radius:var(--border-radius-md);border:.5px solid var(--color-border-secondary);font-size:12px;cursor:pointer;background:var(--color-background-primary);color:var(--color-text-secondary);font-family:inherit;transition:background .12s}
.wll-cd-hint:hover{background:var(--color-background-secondary)}
.wll-cd-hint-used{opacity:.4;pointer-events:none;text-decoration:line-through}
.wll-cd-deduct{color:#378ADD;font-weight:600}
.wll-cd-hint-display{display:flex;flex-direction:column;gap:4px}
.wll-cd-hint-val{font-size:12px;padding:5px 10px;border-radius:var(--border-radius-md);background:#FAEEDA;color:#633806;border:.5px solid #EF9F27}
.wll-cd-input-row{display:flex;gap:8px}
.wll-cd-input{flex:1;padding:10px 14px;border-radius:var(--border-radius-md);border:1.5px solid var(--color-border-secondary);font-size:18px;font-family:inherit;color:var(--color-text-primary);background:var(--color-background-primary);letter-spacing:.1em;text-transform:uppercase;outline:none;transition:border-color .15s}
.wll-cd-input:focus{border-color:#378ADD}
.wll-cd-correct{border-color:#1D9E75!important;background:#f0fdf9!important}
.wll-cd-wrong{border-color:#378ADD!important;animation:wll-cd-shake .35s ease}
@keyframes wll-cd-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.wll-cd-btn{padding:9px 16px;border-radius:var(--border-radius-md);border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:background .12s}
.wll-cd-btn-red{background:#378ADD;color:#fff}
.wll-cd-btn-red:hover{background:#185FA5}
.wll-cd-btn-sec{background:var(--color-background-secondary);color:var(--color-text-primary);border:.5px solid var(--color-border-secondary)}
.wll-cd-btn-sec:hover{background:var(--color-background-tertiary)}
.wll-cd-btn-row{display:flex;gap:8px}
.wll-cd-feedback{font-size:13px;min-height:18px;color:var(--color-text-secondary)}
.wll-cd-fb-ok{color:#1D9E75!important;font-weight:600}
.wll-cd-fb-bad{color:#378ADD!important;font-weight:600}
.wll-cd-fb-partial{color:#BA7517!important;font-weight:600}
.wll-cd-result{padding:12px;border-radius:var(--border-radius-md);font-size:14px;font-weight:500;text-align:center;line-height:1.55}
.wll-cd-result-ok{background:#E1F5EE;color:#0F6E56;border:.5px solid #1D9E75}
.wll-cd-result-bad{background:#FCEBEB;color:#791F1F;border:.5px solid #E24B4A}
.wll-cd-result-partial{background:#FAEEDA;color:#633806;border:.5px solid #EF9F27}
.wll-cd-xp{font-size:14px;font-weight:700;color:#1D9E75;text-align:center;padding:4px}
.wll-cd-memorial{text-align:center;font-size:12px;color:var(--color-text-secondary);margin-top:16px;padding-top:10px;border-top:.5px solid var(--color-border-tertiary);line-height:1.6;border-top:2px solid #378ADD}
@media(max-width:640px){.wll-cd-layout{flex-direction:column}.wll-cd-main{min-width:0}.wll-cd-scores{grid-template-columns:repeat(2,1fr)}}

/* ── Countdown scoped overrides ─────────────────────────────────────── */

/* Instruction numbers — blue */
.wll-cd-wrap .wll-instr-num {
    background: #378ADD !important;
}

/* Instruction bar padding */
.wll-cd-wrap .wll-instructions-bar {
    padding: 14px 18px !important;
    gap: 10px !important;
}
.wll-cd-wrap .wll-instr-step {
    padding: 3px 0 !important;
}

/* How To Play button — blue */
.wll-cd-wrap .wll-cd-instr-btn,
.wll-cd-wrap .wll-instr-toggle {
    background: #378ADD !important;
    color: #fff !important;
    border: none !important;
}
.wll-cd-wrap .wll-cd-instr-btn:hover,
.wll-cd-wrap .wll-instr-toggle:hover {
    background: #185FA5 !important;
}

/* Hint buttons — blue with white text, deductions visible */
.wll-cd-hint {
    background: #378ADD !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
}
.wll-cd-hint:hover {
    background: #185FA5 !important;
}
.wll-cd-hint.wll-cd-hint-used {
    background: var(--color-background-secondary) !important;
    color: var(--color-text-secondary) !important;
    opacity: .5 !important;
}
.wll-cd-deduct {
    color: #B5D4F4 !important;
    font-weight: 700 !important;
}

/* Mode tabs — inactive: warm charcoal (something Alan would like) */
.wll-cd-tab {
    background: #2C2C2A !important;
    color: #D3D1C7 !important;
    border: none !important;
}
.wll-cd-tab:hover {
    background: #444441 !important;
    color: #fff !important;
}
.wll-cd-tab-active {
    background: #378ADD !important;
    color: #fff !important;
}

/* Check + Skip buttons */
.wll-cd-btn-red {
    background: #378ADD !important;
    color: #fff !important;
}
.wll-cd-btn-red:hover {
    background: #185FA5 !important;
}

/* Next word button */
.wll-cd-btn-sec {
    background: #2C2C2A !important;
    color: #fff !important;
    border: none !important;
}
.wll-cd-btn-sec:hover {
    background: #444441 !important;
}

/* Start game button */
#wll-cd-start {
    background: #378ADD !important;
    color: #fff !important;
}
#wll-cd-start:hover {
    background: #185FA5 !important;
}

.wll-cd-pairs-scores{display:flex;align-items:center;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.wll-cd-pairs-card{flex:1;padding:10px 14px;border-radius:var(--border-radius-md);text-align:center;border:2px solid var(--color-border-secondary);background:var(--color-background-secondary);transition:border-color .2s,background .2s;min-width:100px}
.wll-cd-pairs-active{border-color:#378ADD!important;background:#E6F1FB!important}
.wll-cd-pairs-name{font-size:11px;color:var(--color-text-secondary);margin-bottom:2px;font-weight:500}
.wll-cd-pairs-pts{font-size:28px;font-weight:700;color:#378ADD;line-height:1.1}
.wll-cd-pairs-turn{font-size:10px;background:#378ADD;color:#fff;border-radius:4px;padding:2px 8px;margin-top:4px;display:inline-block;font-weight:600;animation:wll-cd-pulse-turn 1s ease infinite}
@keyframes wll-cd-pulse-turn{0%,100%{opacity:1}50%{opacity:.6}}
.wll-cd-pairs-vs{font-size:14px;font-weight:700;color:var(--color-text-secondary);flex:0 0 auto}

/* ── Countdown padding tweaks ────────────────────────────────────────── */
.wll-cd-hints { gap: 8px !important; margin-bottom: 10px !important; }
.wll-cd-hint { padding: 7px 14px !important; }
.wll-cd-hint-display { gap: 6px !important; margin-bottom: 10px !important; }
.wll-cd-hint-val { padding: 10px 14px !important; font-size: 13px !important; }
#wll-cd-reveal { padding: 12px 20px !important; font-size: 14px !important; margin-top: 4px !important; }

/* ── Countdown solo scores layout fix ───────────────────────────────── */
#wll-cd-scores-solo {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
}
@media (max-width: 500px) {
    #wll-cd-scores-solo {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ══ Countdown — Mobile & Tablet responsive ═══════════════════════════ */

/* Toolbar: stack on mobile */
@media (max-width: 680px) {
    .wll-cd-wrap .wll-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .wll-cd-mode-tabs {
        order: 2;
        width: 100%;
        margin-left: 0 !important;
    }
    .wll-cd-tab {
        flex: 1;
        text-align: center;
        font-size: 11px !important;
        padding: 7px 4px !important;
    }
    .wll-cd-toolbar-controls {
        order: 3;
        width: 100%;
        margin-left: 0 !important;
    }
    .wll-cd-toolbar-controls .wll-filter-select {
        flex: 1;
    }
    .wll-cd-wrap .wll-cd-instr-btn,
    .wll-cd-wrap .wll-instr-toggle {
        order: 1;
        margin-left: auto !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* Layout: always stack clock above board on mobile */
@media (max-width: 680px) {
    .wll-cd-layout {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .wll-cd-clock-col {
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }
    .wll-cd-clock-label {
        display: none !important;
    }
    .wll-cd-canvas {
        width: 80px !important;
        height: 80px !important;
    }
    .wll-cd-mode-label {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: var(--color-text-primary) !important;
    }
}

/* Tiles: shrink on small screens so all fit in one row */
@media (max-width: 520px) {
    .wll-cd-tile {
        width: 36px !important;
        height: 46px !important;
        font-size: 18px !important;
        border-radius: 4px !important;
    }
    .wll-cd-tiles {
        gap: 4px !important;
    }
}
@media (max-width: 380px) {
    .wll-cd-tile {
        width: 30px !important;
        height: 38px !important;
        font-size: 15px !important;
    }
    .wll-cd-tiles {
        gap: 3px !important;
    }
}

/* Input row: stack Check/Skip below input on very small screens */
@media (max-width: 420px) {
    .wll-cd-input-row {
        flex-wrap: wrap !important;
    }
    .wll-cd-input {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .wll-cd-input-row .wll-cd-btn {
        flex: 1 !important;
    }
}

/* Hint buttons: wrap and full width on mobile */
@media (max-width: 520px) {
    .wll-cd-hints {
        gap: 6px !important;
    }
    .wll-cd-hint {
        flex: 1 1 calc(50% - 6px) !important;
        text-align: center !important;
        font-size: 11px !important;
        padding: 8px 6px !important;
    }
}

/* Pairs scorecard: stack vertically on mobile */
@media (max-width: 520px) {
    .wll-cd-pairs-scores {
        gap: 6px !important;
    }
    .wll-cd-pairs-card {
        padding: 8px 10px !important;
        min-width: 80px !important;
    }
    .wll-cd-pairs-pts {
        font-size: 22px !important;
    }
}

/* Solo scores: 2 cols on mobile */
@media (max-width: 480px) {
    #wll-cd-scores-solo {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Btn row: full width buttons on mobile */
@media (max-width: 480px) {
    .wll-cd-btn-row {
        flex-direction: column !important;
    }
    .wll-cd-btn-row .wll-cd-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
    #wll-cd-reveal {
        padding: 14px !important;
        font-size: 15px !important;
    }
}

/* Memorial: smaller on mobile */
@media (max-width: 480px) {
    .wll-cd-memorial {
        font-size: 10px !important;
    }
}

/* ── Countdown picker phase ──────────────────────────────────────────── */
#wll-cd-picker-row { display:flex; flex-direction:column; align-items:center; gap:10px; padding:8px 0; }
.wll-cd-pick-badges { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.wll-cd-pick-badge { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:13px; font-weight:500; }
.wll-cd-pick-cons  { background:#2C2C2A; color:#D3D1C7; }
.wll-cd-pick-vowel { background:#E6F1FB; color:#0C447C; border:.5px solid #378ADD; }
.wll-cd-pick-rem   { background:var(--color-background-secondary); color:var(--color-text-secondary); border:.5px solid var(--color-border-secondary); }
.wll-cd-pick-dot   { width:8px; height:8px; border-radius:50%; display:inline-block; }
.wll-cd-pick-dot.cons  { background:#D3D1C7; }
.wll-cd-pick-dot.vowel { background:#378ADD; }
.wll-cd-pick-btns  { display:flex; gap:10px; justify-content:center; }
.wll-cd-pick-cbtn  { background:#2C2C2A !important; color:#fff !important; }
.wll-cd-pick-cbtn:hover { background:#444441 !important; }
.wll-cd-pick-vbtn  { background:#378ADD !important; color:#fff !important; }
.wll-cd-pick-vbtn:hover { background:#185FA5 !important; }
/* Tile colour for consonants — dark charcoal to match buttons */
.wll-cd-tile { background:#2C2C2A; border-color:#111; }

/* ══ The Letters Game ═══════════════════════════════════════════════════ */
.wll-lg-wrap .wll-toolbar-title { color:#378ADD; letter-spacing:-.04em; }
.wll-lg-mode-tabs { display:inline-flex; border:.5px solid var(--color-border-secondary); border-radius:var(--border-radius-md); overflow:hidden; margin-left:8px; }
.wll-lg-tab { padding:6px 14px; border:none; background:#2C2C2A; color:#D3D1C7; font-size:12px; font-weight:500; cursor:pointer; font-family:inherit; transition:background .12s; }
.wll-lg-tab:hover { background:#444441; color:#fff; }
.wll-lg-tab-active { background:#378ADD !important; color:#fff !important; }
.wll-lg-layout { display:flex; gap:20px; align-items:flex-start; margin-top:12px; flex-wrap:wrap; }
.wll-lg-clock-col { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.wll-lg-clock-label { font-size:11px; font-weight:500; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.08em; }
.wll-lg-canvas { display:block; }
.wll-lg-mode-label { font-size:11px; color:var(--color-text-secondary); text-align:center; }
.wll-lg-main { flex:1; min-width:260px; display:flex; flex-direction:column; gap:10px; }
/* Tile colours */
.wll-lg-tile-cons  { background:#2C2C2A !important; border-color:#111 !important; color:#fff !important; }
.wll-lg-tile-vowel { background:#378ADD !important; border-color:#185FA5 !important; color:#fff !important; }
.wll-lg-tile-empty { background:var(--color-background-secondary) !important; border-color:var(--color-border-secondary) !important; color:var(--color-text-secondary) !important; opacity:1 !important; transform:none !important; font-size:14px !important; }
/* Picker badges */
.wll-lg-pick-badges { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.wll-lg-badge { display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:13px; font-weight:500; }
.wll-lg-badge-cons  { background:#2C2C2A; color:#D3D1C7; }
.wll-lg-badge-vowel { background:#E6F1FB; color:#0C447C; border:.5px solid #378ADD; }
.wll-lg-badge-rem   { background:var(--color-background-secondary); color:var(--color-text-secondary); border:.5px solid var(--color-border-secondary); }
.wll-lg-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.wll-lg-dot-cons  { background:#D3D1C7; }
.wll-lg-dot-vowel { background:#378ADD; }
#wll-lg-picker { display:flex; flex-direction:column; align-items:center; gap:10px; padding:4px 0; }
.wll-lg-pick-btns { display:flex; gap:10px; justify-content:center; }
.wll-lg-cbtn { background:#2C2C2A !important; color:#fff !important; }
.wll-lg-cbtn:hover { background:#444441 !important; }
.wll-lg-vbtn { background:#378ADD !important; color:#fff !important; }
.wll-lg-vbtn:hover { background:#185FA5 !important; }
/* Scoring note */
.wll-lg-scoring-note { font-size:12px; color:var(--color-text-secondary); text-align:center; padding:6px; background:var(--color-background-secondary); border-radius:var(--border-radius-md); margin-bottom:8px; }
.wll-lg-scoring-note span { color:#378ADD; font-weight:500; }
/* Found word chips */
.wll-lg-found { display:flex; gap:6px; flex-wrap:wrap; min-height:4px; }
.wll-lg-chip { padding:3px 9px; border-radius:12px; font-size:12px; font-weight:500; background:#E6F1FB; color:#0C447C; border:.5px solid #378ADD; }
/* How to play button */
.wll-lg-wrap .wll-lg-instr-btn,
.wll-lg-wrap .wll-instr-toggle { background:#378ADD !important; color:#fff !important; border:none !important; }
.wll-lg-wrap .wll-lg-instr-btn:hover,
.wll-lg-wrap .wll-instr-toggle:hover { background:#185FA5 !important; }
.wll-lg-wrap .wll-instr-num { background:#378ADD !important; }
/* Memorial */
.wll-lg-wrap .wll-cd-memorial { border-top:2px solid #378ADD; }
/* Mobile */
@media(max-width:640px){
    .wll-lg-layout { flex-direction:column; }
    .wll-lg-clock-col { flex-direction:row; align-items:center; gap:14px; width:100%; }
    .wll-lg-clock-label { display:none; }
    .wll-lg-canvas { width:80px !important; height:80px !important; }
    .wll-cd-tile { width:32px !important; height:42px !important; font-size:16px !important; }
}

/* ── Letters Game instruction padding ───────────────────────────────── */
.wll-lg-wrap .wll-instructions-bar { padding: 14px 18px !important; gap: 10px !important; }
.wll-lg-wrap .wll-instr-step { padding: 4px 0 !important; }
.wll-lg-wrap .wll-instr-step span:last-child { font-size: 15px !important; }

/* ── Letters Game quick pick + vowel tip ─────────────────────────────── */
.wll-lg-rbtn { background:var(--color-background-secondary) !important; color:var(--color-text-secondary) !important; border:.5px solid var(--color-border-secondary) !important; font-size:12px !important; }
.wll-lg-rbtn:hover { background:var(--color-background-tertiary) !important; color:var(--color-text-primary) !important; }
.wll-lg-vowel-tip { font-size:12px; color:#BA7517; background:#FAEEDA; border:.5px solid #EF9F27; border-radius:var(--border-radius-md); padding:5px 12px; text-align:center; }

/* ── Letters Game mode tabs — gap between pills ──────────────────────── */
.wll-lg-mode-tabs { gap: 6px !important; border: none !important; background: none !important; }
.wll-lg-tab { border-radius: var(--border-radius-md) !important; border: .5px solid var(--color-border-secondary) !important; }

/* ── Letters Game mode tabs — fully rounded pills ────────────────────── */
.wll-lg-tab { border-radius: 999px !important; }

/* ══ Letters Game — Mobile & Tablet responsive ══════════════════════════ */

/* Toolbar: wrap mode tabs + How to Play on mobile */
@media (max-width: 680px) {
    .wll-lg-wrap .wll-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .wll-lg-mode-tabs {
        order: 2;
        width: 100%;
        margin-left: 0 !important;
        justify-content: center;
    }
    .wll-lg-tab {
        flex: 1;
        text-align: center;
        font-size: 11px !important;
        padding: 7px 6px !important;
    }
    .wll-lg-wrap .wll-lg-instr-btn,
    .wll-lg-wrap .wll-instr-toggle {
        order: 1;
        margin-left: auto !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}

/* Layout: stack clock above board on mobile */
@media (max-width: 680px) {
    .wll-lg-layout {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .wll-lg-clock-col {
        flex-direction: row !important;
        align-items: center !important;
        gap: 14px !important;
        width: 100% !important;
    }
    .wll-lg-clock-label { display: none !important; }
    .wll-lg-canvas { width: 80px !important; height: 80px !important; }
    .wll-lg-mode-label { font-size: 13px !important; }
}

/* Tiles: shrink so 9 fit on a phone screen */
@media (max-width: 520px) {
    .wll-lg-wrap .wll-cd-tile {
        width: 34px !important;
        height: 44px !important;
        font-size: 17px !important;
        border-radius: 4px !important;
    }
    .wll-lg-wrap .wll-cd-tiles { gap: 4px !important; }
}
@media (max-width: 380px) {
    .wll-lg-wrap .wll-cd-tile {
        width: 28px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    .wll-lg-wrap .wll-cd-tiles { gap: 3px !important; }
}

/* Picker badges: wrap on mobile */
@media (max-width: 480px) {
    .wll-lg-pick-badges {
        gap: 6px !important;
    }
    .wll-lg-badge {
        font-size: 12px !important;
        padding: 4px 10px !important;
    }
    .wll-lg-pick-btns {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .wll-lg-cbtn,
    .wll-lg-vbtn,
    .wll-lg-rbtn {
        flex: 1 !important;
        min-width: 120px !important;
        text-align: center !important;
    }
}

/* Input row: stack on very small screens */
@media (max-width: 420px) {
    #wll-lg-input-row {
        flex-wrap: wrap !important;
    }
    #wll-lg-input {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    #wll-lg-check,
    #wll-lg-giveup {
        flex: 1 !important;
    }
}

/* Scoring note: smaller on mobile */
@media (max-width: 480px) {
    .wll-lg-scoring-note { font-size: 11px !important; }
}

/* Found word chips: smaller on mobile */
@media (max-width: 480px) {
    .wll-lg-chip {
        font-size: 11px !important;
        padding: 2px 7px !important;
    }
}

/* Pairs scorecard: compact on mobile */
@media (max-width: 520px) {
    .wll-lg-wrap .wll-cd-pairs-scores {
        gap: 6px !important;
    }
    .wll-lg-wrap .wll-cd-pairs-card {
        padding: 8px 10px !important;
        min-width: 80px !important;
    }
    .wll-lg-wrap .wll-cd-pairs-pts { font-size: 22px !important; }
}

/* Start/Next buttons: full width on mobile */
@media (max-width: 480px) {
    .wll-lg-wrap .wll-cd-btn-row {
        flex-direction: column !important;
    }
    .wll-lg-wrap .wll-cd-btn-row .wll-cd-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* Memorial: smaller on mobile */
@media (max-width: 480px) {
    .wll-lg-wrap .wll-cd-memorial { font-size: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   UNIFIED GAME STYLING — Letters Game design applied across all games
   Blue #378ADD primary · Charcoal #2C2C2A accents · Rounded pills
   ══════════════════════════════════════════════════════════════════════ */

/* ── Primary action buttons — blue across all games ─────────────────── */
.wll-game-wrap .wll-btn-primary,
.wll-game-wrap .wll-cd-btn-red,
.wll-game-wrap button[class*="btn-green"],
.wll-game-wrap button[class*="btn-start"],
.wll-ws-btn-primary,
.wll-fc-btn, .wll-fc-btn-primary,
.wll-cw-btn-primary,
.wll-mp-btn-primary,
.wll-ag-btn-primary,
.wll-wd-btn-primary { 
    background: #378ADD !important; 
    color: #fff !important; 
    border-color: #185FA5 !important; 
}

/* ── Toolbar instruction toggle buttons ─────────────────────────────── */
.wll-game-wrap .wll-instr-toggle,
.wll-game-wrap .wll-instr-btn,
.wll-game-wrap [class*="instr-toggle"],
.wll-game-wrap [class*="instr-btn"] {
    background: #378ADD !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

/* ── Instruction step numbers ────────────────────────────────────────── */
.wll-game-wrap .wll-instr-num {
    background: #378ADD !important;
    color: #fff !important;
}

/* ── Tab/mode selectors — rounded pills with gaps ────────────────────── */
.wll-game-wrap [class*="mode-tabs"],
.wll-game-wrap [class*="-tabs"] {
    border: none !important;
    background: none !important;
    gap: 6px !important;
}
.wll-game-wrap [class*="-tab"],
.wll-game-wrap [class*="mode-btn"] {
    border-radius: 999px !important;
    border: .5px solid var(--color-border-secondary) !important;
}
.wll-game-wrap [class*="-tab-active"],
.wll-game-wrap [class*="mode-btn"].active {
    background: #378ADD !important;
    color: #fff !important;
    border-color: #378ADD !important;
}

/* ── Word Search specific green → blue ───────────────────────────────── */
.wll-ws-wrap .wll-ws-found { color: #378ADD !important; }
.wll-ws-wrap .wll-ws-cell-found { background: #E6F1FB !important; color: #0C447C !important; }
.wll-ws-wrap .wll-ws-progress { background: #378ADD !important; }

/* ── Flashcard specific green → blue ─────────────────────────────────── */
.wll-fc-wrap [class*="correct"],
.wll-fc-wrap [class*="streak"] { color: #378ADD !important; }

/* ── Crossword specific green → blue ─────────────────────────────────── */
.wll-cw-wrap .wll-cw-cell-active { 
    background: #E6F1FB !important; 
    border-color: #378ADD !important; 
}
.wll-cw-wrap .wll-cw-cell-correct { background: #378ADD !important; color: #fff !important; }

/* ── Matching Pairs specific ─────────────────────────────────────────── */
.wll-mp-wrap .wll-mp-card-matched { 
    background: #E6F1FB !important; 
    border-color: #378ADD !important; 
    color: #0C447C !important;
}

/* ── Anagram specific ────────────────────────────────────────────────── */
.wll-ag-wrap [class*="tile-active"],
.wll-ag-wrap [class*="letter-active"] { 
    background: #378ADD !important; 
    border-color: #185FA5 !important; 
    color: #fff !important; 
}

/* ── Word Detective specific ─────────────────────────────────────────── */
.wll-wd-wrap .wll-wd-key-correct { 
    background: #378ADD !important; 
    color: #fff !important; 
}

/* ── Hardcoded green overrides in game CSS ───────────────────────────── */
/* Word Search uses #1D9E75 and #128161 as primary */
.wll-ws-wrap *[style*="#1D9E75"],
.wll-ws-wrap *[style*="#128161"] { color: #378ADD !important; }
.wll-fc-wrap *[style*="#128161"] { color: #378ADD !important; }
.wll-cw-wrap *[style*="#128161"] { color: #378ADD !important; }
.wll-mp-wrap *[style*="#128161"] { color: #378ADD !important; }
.wll-ag-wrap *[style*="#128161"] { color: #378ADD !important; }
.wll-wd-wrap *[style*="#128161"] { color: #378ADD !important; }

/* ── Score/streak values — blue accent ───────────────────────────────── */
.wll-game-wrap [class*="-score"],
.wll-game-wrap [class*="-streak"],
.wll-game-wrap [class*="-stat-val"] { color: #378ADD !important; }

/* ── XP / correct feedback — keep green (semantic) ──────────────────── */
.wll-game-wrap [class*="-correct"],
.wll-game-wrap [class*="fb-ok"],
.wll-game-wrap [class*="result-ok"] { 
    color: #0F6E56 !important; 
    border-color: #1D9E75 !important;
}

/* ── Memorial border — consistent blue across all ────────────────────── */
.wll-game-wrap .wll-cd-memorial {
    border-top: 2px solid #378ADD !important;
}

/* ── Blockbusters — intentionally keeps its own green/gold theme ─────── */
/* No overrides for .wll-bb-wrap */

/* ── Game nav — force above all WordPress theme containers ──────────── */
.wll-nav-menu {
    /* Use fixed positioning to escape any overflow:hidden parent */
    position: fixed !important;
    z-index: 999999 !important;
    min-width: 200px !important;
}

/* ══ Green → Blue: remaining inline style overrides ═══════════════════ */

/* Instruction toggle buttons across ALL tools */
[style*="background:#1D9E75"] { background: #378ADD !important; }
[style*="background: #1D9E75"] { background: #378ADD !important; }

/* Word Search score display */
.wll-ws-wrap [style*="color:#1D9E75"] { color: #378ADD !important; }
.wll-ws-wrap [style*="color: #1D9E75"] { color: #378ADD !important; }

/* Student dashboard score numbers — keep as accent */
.wll-ws-wrap .wll-ws-found-top { color: #378ADD !important; }
.wll-ws-wrap .wll-ws-bonus-notice { color: #378ADD !important; }

/* Teacher tools score values */
.wtt-score-num,
[class*="score-num"],
[class*="score-val"] { color: #378ADD !important; }

/* Teacher tools card icon backgrounds */
.wtt-tool-card [style*="background:#1D9E75"],
.wtt-tool-card [style*="background: #1D9E75"] {
    background: #378ADD !important;
}

/* Keep correct-answer states GREEN — these are semantic */
[class*="correct"],
[class*="gf-correct"],
[class*="sm-correct"],
[class*="sc-correct"],
[class*="ws-correct"],
[class*="cf-correct"],
[class*="-result-ok"],
[class*="fb-ok"] {
    /* preserve original green for correct answer feedback */
}

/* ── Multi-group nav bar ─────────────────────────────────────────────── */
.wll-multi-nav { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.wll-nav-group { position:relative; }
.wll-multi-nav .wll-nav-trigger { background:var(--color-background-primary)!important; border:1.5px solid #e5e7eb!important; border-radius:8px!important; font-size:13px!important; font-weight:500!important; color:#374151!important; padding:7px 14px!important; cursor:pointer!important; display:inline-flex!important; align-items:center!important; gap:6px!important; }
.wll-multi-nav .wll-nav-trigger:hover { border-color:#378ADD!important; color:#378ADD!important; }
@media(max-width:520px){ .wll-multi-nav{gap:6px} .wll-multi-nav .wll-nav-trigger{font-size:12px!important;padding:6px 10px!important} }

/* ══════════════════════════════════════════════════════════════
   WHO WANTS TO BE PROFICIENT? — [wll_millionaire]
   ══════════════════════════════════════════════════════════════ */

.wll-mil-wrap .wll-toolbar-title { color: #378ADD; letter-spacing: -.02em; }

/* Instruction toggle */
.wll-mil-instr-btn {
    padding: 6px 14px; border: none; border-radius: 999px;
    font-size: 12px; background: #378ADD; cursor: pointer;
    color: #fff; font-weight: 500; transition: background .12s;
    font-family: var(--wll-font);
}
.wll-mil-instr-btn:hover { background: #185FA5; }
.wll-mil-wrap .wll-instr-num { background: #378ADD !important; }

/* Quit button (header) */
.wll-mil-quit-btn {
    padding: 6px 14px; background: var(--wll-grey-light) !important; color: #2D3748 !important;
    border: 1px solid var(--wll-border) !important; border-radius: 999px;
    font-size: 12px; font-weight: 500; cursor: pointer;
    font-family: var(--wll-font); transition: border-color .15s, color .15s;
}
.wll-mil-quit-btn:hover { border-color: var(--wll-red) !important; color: var(--wll-red) !important; }

/* ── Setup ───────────────────────────────────────────────────── */
.wll-mil-setup-card {
    background: #fff; border: 1px solid var(--wll-border);
    border-radius: 14px; padding: 24px; box-shadow: var(--wll-shadow);
    max-width: 600px;
}
.wll-mil-setup-section { margin-bottom: 22px; }
.wll-mil-setup-section:last-child { margin-bottom: 0; }
.wll-mil-setup-lbl {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--wll-grey); margin-bottom: 10px;
}
.wll-mil-gametype-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.wll-mil-gt-btn {
    background: #fff !important; border: 2px solid var(--wll-border) !important;
    border-radius: var(--wll-radius); padding: 14px 16px;
    cursor: pointer; font-family: var(--wll-font); text-align: left;
    transition: border-color .15s, background .15s;
}
.wll-mil-gt-btn:hover { border-color: #378ADD !important; }
.wll-mil-gt-btn.active { border-color: #378ADD !important; background: #E6F1FB !important; }
.wll-mil-gt-name { font-size: 14px; font-weight: 700; color: #1A202C !important; margin-bottom: 3px; }
.wll-mil-gt-desc { font-size: 12px; color: var(--wll-grey) !important; }

.wll-mil-level-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.wll-mil-lv-pill {
    padding: 6px 16px; border-radius: 999px;
    border: 1.5px solid var(--wll-border) !important; background: #fff !important;
    font-size: 13px; font-weight: 600; color: #718096 !important;
    cursor: pointer; font-family: var(--wll-font); transition: all .15s;
}
.wll-mil-lv-pill:hover { border-color: #378ADD !important; color: #1A202C !important; }
.wll-mil-lv-pill.active { background: #378ADD !important; border-color: #378ADD !important; color: #fff !important; }

.wll-mil-pm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wll-mil-pm-btn {
    padding: 8px 16px; border: 1.5px solid var(--wll-border) !important;
    border-radius: 999px; background: #fff !important;
    font-size: 13px; font-weight: 500; color: #718096 !important;
    cursor: pointer; font-family: var(--wll-font); transition: all .15s;
}
.wll-mil-pm-btn:hover { border-color: #378ADD !important; color: #1A202C !important; }
.wll-mil-pm-btn.active { background: #378ADD !important; border-color: #378ADD !important; color: #fff !important; }

.wll-mil-start-btn {
    display: block; width: 100%; max-width: 600px; margin-top: 20px;
    padding: 13px; background: #378ADD !important; color: #fff !important; border: none !important;
    border-radius: var(--wll-radius); font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: var(--wll-font);
    transition: background .15s, transform .1s;
}
.wll-mil-start-btn:hover { background: #185FA5 !important; transform: translateY(-1px); }
.wll-mil-start-btn:active { transform: translateY(0); }

/* ── Game screen ─────────────────────────────────────────────── */
.wll-mil-progress-bar {
    height: 4px; background: var(--wll-border); border-radius: 2px;
    margin-bottom: 14px; overflow: hidden;
}
.wll-mil-progress-fill {
    height: 100%; background: #378ADD; border-radius: 2px; transition: width .5s ease;
}

.wll-mil-stats-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.wll-mil-chip {
    display: flex; align-items: center; gap: 5px; padding: 5px 12px;
    border-radius: 999px; font-size: 12px; font-weight: 600;
    background: #fff; border: 1px solid var(--wll-border); color: var(--wll-grey);
}
.wll-mil-chip-blue { background: #E6F1FB; border-color: #378ADD; color: #185FA5; }
.wll-mil-chip-green { background: var(--wll-green-light); border-color: var(--wll-green); color: var(--wll-green-dark); }

.wll-mil-pairs-scores { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wll-mil-pairs-card {
    text-align: center; padding: 6px 14px;
    border-radius: var(--wll-radius);
    background: var(--wll-grey-light);
    border: 2px solid var(--wll-border); transition: border-color .2s, background .2s;
    min-width: 80px;
}
.wll-mil-pairs-card.turn-active {
    border-color: #378ADD; background: #E6F1FB;
    box-shadow: 0 0 0 3px rgba(55,138,221,.15);
}
.wll-mil-pc-name { font-size: 10px; color: var(--wll-grey); font-weight: 600; margin-bottom: 2px; }
.wll-mil-pc-score { font-size: 22px; font-weight: 700; color: #378ADD; line-height: 1.1; }
.wll-mil-pc-turn {
    font-size: 10px; background: #378ADD; color: #fff;
    border-radius: 4px; padding: 2px 8px; margin-top: 4px;
    display: inline-block; font-weight: 600;
    animation: wll-mil-pulse-turn 1s ease-in-out infinite;
}
@keyframes wll-mil-pulse-turn { 0%,100%{opacity:1;} 50%{opacity:.55;} }

/* Layout — responsive handled in mobile section below */
.wll-mil-layout {
    display: grid; grid-template-columns: 180px 1fr;
    gap: 16px; align-items: start;
}

/* ── Ladder ──────────────────────────────────────────────────── */
.wll-mil-ladder {
    background: #fff; border: 1px solid var(--wll-border);
    border-radius: 14px; padding: 10px 8px; box-shadow: var(--wll-shadow);
    position: sticky; top: 16px; max-height: 80vh; overflow-y: auto;
}
.wll-mil-ladder-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--wll-grey);
    padding: 4px 6px 8px; border-bottom: 1px solid var(--wll-border); margin-bottom: 6px;
}
.wll-mil-rung {
    display: flex; align-items: center; gap: 6px; padding: 5px 6px;
    border-radius: 7px; transition: background .15s; position: relative;
}
.wll-mil-rn { font-size: 10px; font-weight: 600; color: #CBD5E0; width: 14px; text-align: right; flex-shrink: 0; }
.wll-mil-rl { font-size: 12px; font-weight: 500; color: var(--wll-grey); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wll-mil-rv {
    font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 4px; background: var(--wll-grey-light);
    color: var(--wll-grey); border: 1px solid var(--wll-border); flex-shrink: 0;
}
.wll-mil-rung.safe { background: #F0FDF4; }
.wll-mil-rung.safe .wll-mil-rl { color: #065F46; font-weight: 600; }
.wll-mil-rung.safe .wll-mil-rv { background: var(--wll-green-light); border-color: var(--wll-green); color: var(--wll-green-dark); }
.wll-mil-rung.current { background: #E6F1FB; }
.wll-mil-rung.current .wll-mil-rl { color: #185FA5; font-weight: 700; }
.wll-mil-rung.current .wll-mil-rv { background: #378ADD; border-color: #378ADD; color: #fff; }
.wll-mil-rung.current .wll-mil-rn { color: #378ADD; }
.wll-mil-rung.current::before { content: '\25B6'; position: absolute; left: -2px; font-size: 7px; color: #378ADD; }
.wll-mil-rung.done { opacity: .45; }
.wll-mil-rung.done .wll-mil-rl { text-decoration: line-through; }

/* ── Stage ───────────────────────────────────────────────────── */
.wll-mil-stage { display: flex; flex-direction: column; gap: 12px; }

/* Lifelines */
.wll-mil-lifelines { display: flex; gap: 8px; flex-wrap: wrap; }
.wll-mil-ll-btn {
    display: flex; align-items: center; gap: 6px; padding: 7px 14px;
    background: #fff !important; border: 1.5px solid var(--wll-border) !important; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: #1A202C !important;
    cursor: pointer; font-family: var(--wll-font); transition: border-color .15s, background .15s;
}
.wll-mil-ll-btn:hover:not(.used) { border-color: #378ADD !important; background: #E6F1FB !important; }
.wll-mil-ll-btn.used { opacity: .35; cursor: not-allowed; text-decoration: line-through; pointer-events: none; }
.wll-mil-ll-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 4px;
    background: #378ADD; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0;
}

/* Question meta */
.wll-mil-q-meta { display: flex; align-items: center; gap: 8px; }
.wll-mil-q-counter { font-size: 12px; color: var(--wll-grey); font-weight: 500; }
.wll-mil-q-badge {
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600;
}
.wll-mil-q-vocab { background: #E6F1FB; color: #185FA5; border: 1px solid #B5D4F4; }
.wll-mil-q-grammar { background: var(--wll-amber-light); color: var(--wll-amber); border: 1px solid #FAC775; }

/* Question box */
.wll-mil-q-box {
    background: #fff; border: 1.5px solid var(--wll-border);
    border-radius: 14px; padding: 24px 28px; text-align: center;
    box-shadow: var(--wll-shadow); transition: border-color .3s;
}
.wll-mil-q-box.sel  { border-color: #EF9F27; }
.wll-mil-q-box.ok   { border-color: var(--wll-green); }
.wll-mil-q-box.bad  { border-color: var(--wll-red); }
.wll-mil-q-box.dramatic { border-color: #378ADD; box-shadow: 0 0 0 3px rgba(55,138,221,.1); }
.wll-mil-q-text { font-size: 17px; font-weight: 500; line-height: 1.55; color: #1A202C; }
.wll-mil-q-text strong { color: #185FA5; font-weight: 700; }

/* Answer buttons */
.wll-mil-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wll-mil-ans-btn {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    border: 2px solid var(--wll-border) !important; border-radius: var(--wll-radius);
    background: #fff !important; font-size: 14px; font-weight: 500; color: #2D3748 !important;
    cursor: pointer; text-align: left; font-family: var(--wll-font);
    transition: border-color .15s, background .15s, transform .1s; min-height: 54px;
}
.wll-mil-ans-btn:hover:not(.disabled) { border-color: #378ADD !important; background: #E6F1FB !important; transform: translateY(-1px); }
.wll-mil-ans-btn:active:not(.disabled) { transform: translateY(0); }
.wll-mil-ans-btn.selected { border-color: #EF9F27 !important; background: var(--wll-amber-light) !important; animation: wll-mil-pulse-amber .8s ease infinite; }
.wll-mil-ans-btn.correct { border-color: var(--wll-green) !important; background: var(--wll-green-light) !important; color: var(--wll-green-dark) !important; animation: none; }
.wll-mil-ans-btn.wrong   { border-color: var(--wll-red) !important; background: var(--wll-red-light) !important; color: var(--wll-red) !important; animation: wll-shake .3s ease; }
.wll-mil-ans-btn.eliminated { opacity: .3; pointer-events: none; text-decoration: line-through; }
.wll-mil-ans-btn.disabled { cursor: default; }
.wll-mil-ans-letter {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
    background: #E6F1FB; border: 1px solid #B5D4F4;
    font-size: 11px; font-weight: 700; color: #185FA5; flex-shrink: 0;
}
.wll-mil-ans-btn.selected .wll-mil-ans-letter { background: var(--wll-amber-light); border-color: #FAC775; color: var(--wll-amber); }
.wll-mil-ans-btn.correct  .wll-mil-ans-letter { background: var(--wll-green-light); border-color: var(--wll-green); color: var(--wll-green-dark); }
.wll-mil-ans-btn.wrong    .wll-mil-ans-letter { background: var(--wll-red-light); border-color: var(--wll-red); color: var(--wll-red); }

/* Feedback */
.wll-mil-feedback { display: none; padding: 12px 16px; border-radius: var(--wll-radius); font-size: 14px; font-weight: 500; line-height: 1.5; }
.wll-mil-fb-ok  { display: block; background: var(--wll-green-light); color: var(--wll-green-dark); border: 1px solid var(--wll-green); }
.wll-mil-fb-bad { display: block; background: var(--wll-red-light); color: #742A2A; border: 1px solid var(--wll-red); }

/* Actions */
.wll-mil-actions { display: flex; gap: 10px; align-items: center; }
.wll-mil-lock-btn {
    padding: 10px 28px; background: #378ADD !important; color: #fff !important;
    border: none !important; border-radius: var(--wll-radius);
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s, transform .1s;
}
.wll-mil-lock-btn:hover { background: #185FA5 !important; }
.wll-mil-next-btn {
    padding: 10px 28px; background: #378ADD !important; color: #fff !important;
    border: none !important; border-radius: var(--wll-radius);
    font-size: 14px; font-weight: 600; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s;
}
.wll-mil-next-btn:hover { background: #185FA5 !important; }

/* Memorial */
.wll-mil-memorial {
    text-align: center; font-size: 11px; color: var(--wll-grey);
    margin-top: 16px; padding-top: 10px;
    border-top: 2px solid #378ADD; line-height: 1.6;
}

/* ── Modals ──────────────────────────────────────────────────── */
.wll-mil-modal-overlay {
    position: fixed !important; inset: 0; background: rgba(10,16,30,.6);
    display: none; align-items: center; justify-content: center;
    z-index: 99999 !important; padding: 20px;
}
.wll-mil-modal-overlay.open { display: flex !important; }
.wll-mil-modal-box {
    background: #fff; border: 1px solid var(--wll-border);
    border-radius: 14px; padding: 28px;
    max-width: 440px; width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,.18); position: relative;
    transform: scale(.96); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.wll-mil-modal-overlay.open .wll-mil-modal-box { transform: scale(1); }
.wll-mil-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: var(--wll-grey-light); border: 1px solid var(--wll-border);
    border-radius: 6px; width: 28px; height: 28px;
    font-size: 13px; cursor: pointer; color: var(--wll-grey);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--wll-font);
}
.wll-mil-modal-close:hover { background: var(--wll-border); }
.wll-mil-modal-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #378ADD; margin-bottom: 6px; }
.wll-mil-modal-title { font-size: 18px; font-weight: 700; color: #1A202C; margin-bottom: 14px; }
.wll-mil-modal-body { font-size: 14px; line-height: 1.6; color: #4A5568; }
.wll-mil-modal-sentence {
    margin-top: 12px; padding: 10px 14px;
    background: #E6F1FB; border-left: 3px solid #378ADD;
    border-radius: 0 6px 6px 0; font-style: italic;
    color: #185FA5; font-size: 14px;
}
.wll-mil-modal-hint {
    margin-top: 10px; padding: 8px 12px;
    background: var(--wll-amber-light); border-radius: 6px;
    font-size: 12px; color: var(--wll-amber); border: 1px solid #FAC775;
}
.wll-mil-phone-ring {
    width: 48px; height: 48px; border-radius: 50%;
    background: #E6F1FB; border: 2px solid #378ADD;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; color: #185FA5; letter-spacing: .05em;
    margin: 0 auto 14px; animation: wll-mil-ring-pulse .6s ease infinite alternate;
}
.wll-mil-aud-chart {
    display: flex; align-items: flex-end; gap: 12px;
    justify-content: center; height: 80px; margin: 16px 0 8px;
}
.wll-mil-aud-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wll-mil-aud-bar { width: 32px; min-height: 3px; border-radius: 4px 4px 0 0; background: #378ADD; transition: height .5s cubic-bezier(.34,1.56,.64,1); }
.wll-mil-aud-pct { font-size: 11px; font-weight: 700; color: #185FA5; }
.wll-mil-aud-ltr { font-size: 12px; font-weight: 700; color: var(--wll-grey); }
.wll-mil-aud-note { text-align: center; font-size: 12px; color: var(--wll-grey); margin-top: 4px; }

/* ── Celebration ─────────────────────────────────────────────── */
.wll-mil-cel-box {
    text-align: center; max-width: 420px; overflow: hidden;
    position: relative;
}
.wll-mil-cel-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #378ADD, #1D9E75);
}
.wll-mil-confetti-wrap { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wll-mil-cel-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: #378ADD; color: #fff; font-size: 20px; font-weight: 800;
    margin: 0 auto 14px; border: 3px solid #E6F1FB; letter-spacing: .02em;
}
.wll-mil-cel-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--wll-green-dark);
    background: var(--wll-green-light); padding: 3px 12px;
    border-radius: 999px; display: inline-block; margin-bottom: 10px;
}
.wll-mil-cel-title { font-size: 24px; font-weight: 800; color: #1A202C; margin-bottom: 8px; letter-spacing: -.02em; }
.wll-mil-cel-sub { font-size: 14px; color: var(--wll-grey); margin-bottom: 24px; }
.wll-mil-cel-btn {
    padding: 12px 32px; background: var(--wll-green) !important; color: #fff !important;
    border: none !important; border-radius: var(--wll-radius);
    font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s;
}
.wll-mil-cel-btn:hover { background: var(--wll-green-dark) !important; }

/* ── End screen / Scorecard ──────────────────────────────────── */
.wll-mil-end-box {
    text-align: center; max-width: 580px !important;
    overflow: hidden; overflow-y: auto; max-height: 90vh;
    position: relative;
}
.wll-mil-end-box::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: #378ADD;
}
.wll-mil-end-title { font-size: 22px; font-weight: 800; color: #1A202C; margin-bottom: 4px; letter-spacing: -.02em; }
.wll-mil-end-sub   { font-size: 13px; color: var(--wll-grey); margin-bottom: 20px; }
.wll-mil-scorecard { margin: 0 0 16px; text-align: left; }
.wll-mil-sc-heading {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--wll-grey); margin-bottom: 8px;
}
.wll-mil-sc-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 6px; margin-bottom: 14px;
}
.wll-mil-sc-tile {
    border-radius: 8px; padding: 7px 4px 6px; text-align: center;
    border: 1.5px solid var(--wll-border); background: var(--wll-grey-light);
    transition: transform .1s; cursor: default; position: relative;
}
.wll-mil-sc-tile:hover { transform: scale(1.06); z-index: 1; }
.wll-mil-sc-tile.ok  { background: var(--wll-green-light); border-color: var(--wll-green); }
.wll-mil-sc-tile.bad { background: var(--wll-red-light); border-color: var(--wll-red); }
.wll-mil-sc-tile.safe-q { outline: 2px solid var(--wll-green); outline-offset: 1px; }
.wll-mil-sc-q { font-size: 9px; font-weight: 600; color: var(--wll-grey); margin-bottom: 2px; }
.wll-mil-sc-lv { font-size: 11px; font-weight: 800; color: #1A202C; line-height: 1; }
.wll-mil-sc-result { font-size: 13px; font-weight: 700; margin-top: 3px; line-height: 1; }
.wll-mil-sc-tile.ok  .wll-mil-sc-q,
.wll-mil-sc-tile.ok  .wll-mil-sc-lv   { color: var(--wll-green-dark); }
.wll-mil-sc-tile.bad .wll-mil-sc-q,
.wll-mil-sc-tile.bad .wll-mil-sc-lv   { color: #742A2A; }
.wll-mil-sc-tile.ok  .wll-mil-sc-result { color: var(--wll-green); }
.wll-mil-sc-tile.bad .wll-mil-sc-result { color: var(--wll-red); }
.wll-mil-sc-type {
    display: inline-block; font-size: 8px; font-weight: 700;
    letter-spacing: .04em; padding: 1px 4px; border-radius: 3px;
    margin-top: 3px; text-transform: uppercase;
}
.wll-mil-sc-type.v { background: #E6F1FB; color: #185FA5; }
.wll-mil-sc-type.g { background: var(--wll-amber-light); color: var(--wll-amber); }
.wll-mil-sc-tile.ok  .wll-mil-sc-type { background: rgba(29,158,117,.15); color: var(--wll-green-dark); }
.wll-mil-sc-tile.bad .wll-mil-sc-type { background: rgba(229,62,62,.12); color: #742A2A; }
.wll-mil-sc-dots { position: absolute; top: 3px; right: 3px; display: flex; gap: 1px; }
.wll-mil-sc-dot  { width: 5px; height: 5px; border-radius: 50%; background: #378ADD; opacity: .6; }
.wll-mil-sc-summary {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px;
}
.wll-mil-sc-stat {
    background: var(--wll-grey-light); border: 1px solid var(--wll-border);
    border-radius: 8px; padding: 10px 8px; text-align: center;
}
.wll-mil-sc-val { font-size: 20px; font-weight: 700; color: #378ADD; line-height: 1.1; }
.wll-mil-sc-val.green { color: var(--wll-green); }
.wll-mil-sc-lbl { font-size: 10px; color: var(--wll-grey); margin-top: 3px; font-weight: 500; }
.wll-mil-end-meta {
    display: flex; gap: 8px; justify-content: center;
    flex-wrap: wrap; margin-bottom: 20px;
}
.wll-mil-meta-chip { padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.wll-mil-meta-chip.blue  { background: #E6F1FB; border: 1px solid #378ADD; color: #185FA5; }
.wll-mil-meta-chip.green { background: var(--wll-green-light); border: 1px solid var(--wll-green); color: var(--wll-green-dark); }
.wll-mil-meta-chip.grey  { background: var(--wll-grey-light); border: 1px solid var(--wll-border); color: var(--wll-grey); }
.wll-mil-end-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.wll-mil-setup-btn {
    padding: 10px 24px; border-radius: var(--wll-radius);
    font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s;
    background: var(--wll-grey-light) !important; color: #2D3748 !important;
    border: 1px solid var(--wll-border) !important;
}
.wll-mil-setup-btn:hover { background: var(--wll-border) !important; }

/* ── Animations ──────────────────────────────────────────────── */
@keyframes wll-mil-pulse-amber {
    0%   { border-color: #FAC775; }
    50%  { border-color: #EF9F27; box-shadow: 0 0 0 3px rgba(239,159,39,.12); }
    100% { border-color: #FAC775; }
}
@keyframes wll-mil-ring-pulse {
    0%   { transform: scale(1); }
    100% { transform: scale(1.1); box-shadow: 0 0 16px rgba(55,138,221,.25); }
}
@keyframes wll-confetti-fall {
    0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* ── Dark mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    .wll-mil-setup-card,
    .wll-mil-gt-btn,
    .wll-mil-q-box,
    .wll-mil-ans-btn,
    .wll-mil-modal-box,
    .wll-mil-ladder { background: #1A2332 !important; border-color: #2D3748 !important; }
    .wll-mil-gt-btn.active { background: #1E3A5F !important; }
    .wll-mil-q-text,
    .wll-mil-ans-btn,
    .wll-mil-end-title,
    .wll-mil-cel-title { color: #E2E8F0 !important; }
    .wll-mil-ans-letter { background: #1E3A5F !important; border-color: #378ADD !important; }
    .wll-mil-ans-btn:hover:not(.disabled) { background: #1E3A5F !important; }
    .wll-mil-sc-tile { background: #0F172A !important; border-color: #2D3748 !important; }
    .wll-mil-sc-tile.ok  { background: #0D2E22 !important; border-color: var(--wll-green) !important; }
    .wll-mil-sc-tile.bad { background: #2D1515 !important; border-color: var(--wll-red) !important; }
    .wll-mil-sc-stat { background: #1A2332 !important; border-color: #2D3748 !important; }
    .wll-mil-sc-lv { color: #E2E8F0 !important; }
}

/* Quit confirmation modal */
.wll-mil-quit-box { max-width: 360px !important; text-align: center; }
.wll-mil-quit-title { font-size: 18px; font-weight: 700; color: #1A202C; margin-bottom: 8px; }
.wll-mil-quit-note  { font-size: 13px; color: var(--wll-grey); margin-bottom: 24px; line-height: 1.5; }
.wll-mil-quit-btns  { display: flex; gap: 10px; justify-content: center; }
.wll-mil-quit-confirm {
    padding: 10px 24px; background: var(--wll-red) !important; color: #fff !important;
    border: none !important; border-radius: var(--wll-radius);
    font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s;
}
.wll-mil-quit-confirm:hover { background: #C53030 !important; }
.wll-mil-quit-cancel {
    padding: 10px 24px; background: var(--wll-grey-light) !important; color: #2D3748 !important;
    border: 1px solid var(--wll-border) !important; border-radius: var(--wll-radius);
    font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s;
}
.wll-mil-quit-cancel:hover { background: var(--wll-border) !important; }

/* Gate failed notice */
.wll-mil-gate-box { max-width: 400px !important; text-align: center; }
.wll-mil-gate-icon {
    font-size: 32px; color: var(--wll-amber); margin-bottom: 10px;
}
.wll-mil-gate-title {
    font-size: 18px; font-weight: 700; color: #1A202C; margin-bottom: 12px;
}
.wll-mil-gate-body {
    font-size: 14px; color: #4A5568; line-height: 1.6;
    padding: 12px 16px; background: var(--wll-amber-light);
    border: 1px solid #FAC775; border-radius: var(--wll-radius);
    margin-bottom: 10px;
}
.wll-mil-gate-sub {
    font-size: 13px; color: var(--wll-grey); margin-bottom: 20px;
}

/* Timer */
.wll-mil-timer-wrap {
    position: relative; width: 80px; height: 80px;
    margin: 0 auto; display: flex;
    align-items: center; justify-content: center;
}
.wll-mil-timer-wrap canvas { position: absolute; top: 0; left: 0; }
.wll-mil-timer-num {
    font-size: 22px; font-weight: 700; color: #378ADD;
    position: relative; z-index: 1; font-variant-numeric: tabular-nums;
    transition: color .3s;
}

/* ══ MILLIONAIRE — MOBILE & TABLET RESPONSIVE ═════════════════
   Breakpoints: 760px (tablet), 540px (large phone), 380px (small phone)
   ══════════════════════════════════════════════════════════════ */

/* Tablet — 760px: shrink ladder, tighten layout */
@media (max-width: 760px) {
    .wll-mil-layout { grid-template-columns: 150px 1fr; gap: 10px; }
    .wll-mil-q-box  { padding: 16px 18px; }
    .wll-mil-q-text { font-size: 15px; }
}

/* Large phone — 640px: hide ladder, stack everything */
@media (max-width: 640px) {
    .wll-mil-layout          { grid-template-columns: 1fr; }
    .wll-mil-ladder          { display: none; }
    .wll-mil-gametype-grid   { grid-template-columns: 1fr; }
    .wll-mil-q-box           { padding: 14px 16px; }
    .wll-mil-q-text          { font-size: 15px; }
    .wll-mil-setup-card      { padding: 18px 16px; }

    /* Lifelines: wrap to 2×2 grid on phones */
    .wll-mil-lifelines       { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .wll-mil-ll-btn          { justify-content: center; padding: 8px 10px !important; font-size: 11px !important; }

    /* Stats bar: wrap pairs scores below chips */
    .wll-mil-stats-bar       { flex-wrap: wrap; }
    .wll-mil-pairs-scores    { margin-left: 0; width: 100%; justify-content: center; }

    /* Lock / Next buttons: full width */
    .wll-mil-actions         { flex-wrap: wrap; }
    .wll-mil-lock-btn,
    .wll-mil-next-btn        { flex: 1; min-width: 120px; }
    .wll-mil-quit-btn        { margin-left: 0; }

    /* Modal max-height with scroll for short viewports */
    .wll-mil-modal-box       { max-height: 88vh; overflow-y: auto; }

    /* Scorecard: 3 columns on mobile */
    .wll-mil-sc-grid         { grid-template-columns: repeat(3, 1fr) !important; }
    .wll-mil-sc-summary      { grid-template-columns: repeat(2, 1fr); }

    /* Timer: smaller on mobile */
    .wll-mil-timer-wrap      { width: 64px; height: 64px; }
    .wll-mil-timer-num       { font-size: 18px; }
}

/* Small phone — 420px: further reductions */
@media (max-width: 420px) {
    .wll-mil-q-text          { font-size: 14px; }
    .wll-mil-ans-btn         { padding: 10px 12px !important; min-height: 46px; font-size: 13px !important; }
    .wll-mil-ans-letter      { width: 22px; height: 22px; min-width: 22px; font-size: 10px; }
    .wll-mil-ll-btn          { font-size: 10px !important; padding: 7px 6px !important; }

    /* End screen: tighten */
    .wll-mil-end-box         { padding: 20px 16px !important; }
    .wll-mil-end-btns        { flex-direction: column; }
    .wll-mil-end-btns button { width: 100%; }
}

/* Lifeline locked — advanced lifelines unavailable at A1/A2 */
.wll-mil-ll-btn.locked {
    opacity: .45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: var(--wll-grey-light) !important;
    border-color: var(--wll-border) !important;
    color: var(--wll-grey) !important;
    position: relative;
}
.wll-mil-ll-btn.locked::after {
    content: 'B1+';
    position: absolute; top: -7px; right: -4px;
    background: var(--wll-amber); color: #fff;
    font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 999px; letter-spacing: .03em;
    pointer-events: none;
}
.wll-mil-ll-btn.locked .wll-mil-ll-icon {
    background: var(--wll-grey) !important;
}

/* Wrong answer rich feedback */
.wll-mil-fb-rich {
    display: block !important;
    padding: 16px !important;
    line-height: 1.6;
}
.wll-mil-fb-header {
    font-size: 16px; font-weight: 700; margin-bottom: 6px; color: #742A2A;
}
.wll-mil-fb-correct {
    font-size: 14px; margin-bottom: 10px; color: #742A2A;
}
.wll-mil-fb-explanation {
    font-size: 13px; color: #4A5568; line-height: 1.6;
    padding: 10px 12px; background: #fff;
    border-radius: 8px; border: 1px solid #FCA5A5;
    margin-bottom: 14px;
}
.wll-mil-fb-end-btn {
    display: inline-block; padding: 9px 22px;
    background: #E53E3E !important; color: #fff !important;
    border: none !important; border-radius: var(--wll-radius);
    font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: var(--wll-font); transition: background .15s;
}
.wll-mil-fb-end-btn:hover { background: #C53030 !important; }

/* Spot-the-mistake highlighted wrong word */
.wll-mil-spot-word {
    background: #FEF3C7;
    border-bottom: 2.5px solid var(--wll-amber);
    padding: 0 3px 1px;
    border-radius: 3px;
    font-weight: 700;
    color: #92400E;
    font-style: normal;
}

/* Shared sound toggle button */
.wll-sound-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    user-select: none;
}
.wll-sound-sw-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--wll-text-muted) !important;
    line-height: 1 !important;
}
.wll-sound-sw-track {
    display: inline-flex !important;
    align-items: center !important;
    width: 34px !important;
    height: 18px !important;
    border-radius: 999px !important;
    background: var(--wll-border-mid, #CBD5E1) !important;
    position: relative !important;
    transition: background .2s !important;
    flex-shrink: 0 !important;
}
.wll-sound-on .wll-sound-sw-track {
    background: #378ADD !important;
}
.wll-sound-sw-thumb {
    position: absolute !important;
    left: 2px !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #fff !important;
    transition: transform .2s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.wll-sound-on .wll-sound-sw-thumb {
    transform: translateX(16px) !important;
}
.wll-sound-toggle:hover .wll-sound-sw-track {
    opacity: .85 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRAMMAR SNAP
   ═══════════════════════════════════════════════════════════════════════════ */

.wll-snap-wrap { max-width: 900px; margin: 0 auto; }

/* ── Setup ────────────────────────────────────────────────────────────────── */
.wll-snap-setup-title { font-size: 16px; font-weight: 600; color: var(--wll-text); }
.wll-snap-setup-body  { padding: 28px 32px; max-width: 640px; margin: 0 auto; }
.wll-snap-field       { margin-bottom: 22px; }
.wll-snap-label       { font-size: 11px; font-weight: 600; color: var(--wll-text-muted);
                         text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }

.wll-snap-level-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; margin-bottom: 8px; }
.wll-snap-level-tile {
    border: 0.5px solid var(--wll-border); border-radius: 10px;
    padding: 9px 4px; text-align: center; cursor: pointer;
    background: var(--wll-bg); transition: border-color .15s, background .15s;
}
.wll-snap-level-tile.active { border: 1.5px solid #378ADD; background: #E6F1FB; }
.wll-snap-level-code { font-size: 14px; font-weight: 600; color: var(--wll-text); }
.wll-snap-level-tile.active .wll-snap-level-code { color: #0C447C; }
.wll-snap-level-name { font-size: 9px; color: var(--wll-text-muted); margin-top: 2px; line-height: 1.3; }
.wll-snap-level-tile.active .wll-snap-level-name { color: #185FA5; }
.wll-snap-level-desc {
    background: #E6F1FB; border-radius: 8px; padding: 10px 14px;
    font-size: 12px; color: #0C447C; line-height: 1.6;
}
.wll-snap-level-desc .wll-snap-exams {
    display: inline-block; background: #B5D4F4; color: #0C447C;
    border-radius: 20px; padding: 1px 8px; font-size: 11px; margin-left: 4px;
}

.wll-snap-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.wll-snap-pill {
    padding: 7px 18px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500;
    border: 0.5px solid var(--wll-border); background: var(--wll-bg); color: var(--wll-text-muted);
    transition: background .15s, border-color .15s, color .15s;
}
.wll-snap-pill.active { background: #378ADD !important; border-color: #378ADD !important; color: #fff !important; }

.wll-snap-guru-card {
    border: 1.5px solid #AFA9EC; border-radius: 12px;
    padding: 14px 16px; background: #EEEDFE;
    display: flex; align-items: flex-start; gap: 12px;
}
.wll-snap-guru-card.guru-active { border-color: #534AB7; }
.wll-snap-guru-icon   { font-size: 22px; flex-shrink: 0; }
.wll-snap-guru-body   { flex: 1; }
.wll-snap-guru-title  { font-size: 13px; font-weight: 600; color: #26215C; margin-bottom: 3px; }
.wll-snap-guru-desc   { font-size: 12px; color: #3C3489; line-height: 1.5; }
.wll-snap-guru-badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.wll-snap-guru-badge  {
    background: #CECBF6; color: #26215C; border-radius: 20px;
    padding: 2px 10px; font-size: 11px; font-weight: 500;
}
.wll-snap-guru-toggle-wrap { display: flex; align-items: center; }
.wll-snap-guru-toggle {
    width: 36px; height: 20px; background: var(--wll-border-mid);
    border-radius: 10px; position: relative; cursor: pointer; flex-shrink: 0;
    transition: background .2s;
}
.wll-snap-guru-toggle.active { background: #534AB7; }
.wll-snap-guru-thumb {
    position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
    background: #fff; border-radius: 50%; transition: transform .2s;
}
.wll-snap-guru-toggle.active .wll-snap-guru-thumb { transform: translateX(16px); }

.wll-snap-start-row { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.wll-snap-start-btn { flex: 1; }
.wll-snap-start-err { font-size: 13px; color: var(--wll-red); }

/* ── Game layout ─────────────────────────────────────────────────────────── */
.wll-snap-game-wrap {
    display: grid; grid-template-columns: 210px 1fr;
    border: 0.5px solid var(--wll-border); border-radius: 12px;
    overflow: hidden; background: var(--wll-bg);
}

/* Sidebar */
.wll-snap-game-sidebar {
    padding: 22px 18px; border-right: 0.5px solid var(--wll-border);
    display: flex; flex-direction: column; gap: 16px;
    background: var(--wll-bg-alt);
}
.wll-snap-sidebar-stat {}
.wll-snap-sidebar-lbl { font-size: 10px; font-weight: 600; color: var(--wll-text-muted);
                         text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.wll-snap-sidebar-val { font-size: 28px; font-weight: 600; color: var(--wll-text); line-height: 1; }
.wll-snap-score-val   { color: #0F6E56 !important; }
.wll-snap-wrong-val   { color: #A32D2D !important; }
.wll-snap-prog-label  { font-size: 12px; color: var(--wll-text-muted); margin-bottom: 4px; }
.wll-snap-prog-bar    { height: 5px; background: var(--wll-border); border-radius: 3px; overflow: hidden; }
.wll-snap-prog-fill   { height: 100%; background: #378ADD; border-radius: 3px; transition: width .3s; }
.wll-snap-history     { display: flex; flex-direction: column; gap: 5px; }
.wll-snap-hist-row    { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--wll-text-muted); white-space: nowrap; overflow: hidden; }
.wll-snap-hist-dot    { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.wll-snap-sidebar-sound { display: flex; align-items: center; gap: 6px; margin-top: auto;
                           padding-top: 12px; border-top: 0.5px solid var(--wll-border); }

/* Stage */
.wll-snap-game-stage  { padding: 26px 30px; display: flex; flex-direction: column; }
.wll-snap-stage-meta  { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.wll-snap-q-badge     { border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; }
.wll-snap-q-badge-normal { background: #E6F1FB; color: #0C447C; }
.wll-snap-q-badge-guru   { background: #EEEDFE; color: #26215C; }
.wll-snap-q-num       { font-size: 12px; color: var(--wll-text-muted); margin-left: auto; }
.wll-snap-streak      { display: flex; align-items: center; gap: 5px;
                         background: #FAEEDA; border-radius: 999px; padding: 3px 10px;
                         font-size: 12px; font-weight: 600; color: #633806; }
.wll-snap-streak.wll-snap-streak-guru { background: #EEEDFE; color: #26215C; }
.wll-snap-streak-dot  { width: 6px; height: 6px; border-radius: 50%; background: #EF9F27; }
.wll-snap-streak-guru .wll-snap-streak-dot { background: #7F77DD; }

/* Timer */
.wll-snap-timer-row  { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.wll-snap-timer-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.wll-snap-timer-inner {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; color: var(--wll-text);
}
.wll-snap-timer-hint { font-size: 13px; color: var(--wll-text-muted); }

/* Sentence card */
.wll-snap-sentence-card {
    background: var(--wll-bg-alt); border: 0.5px solid var(--wll-border);
    border-radius: 12px; padding: 22px 26px; margin-bottom: 20px;
    font-size: 18px; line-height: 1.75; color: var(--wll-text);
    min-height: 80px;
}
.wll-snap-sentence-card.wll-snap-card-guru { border-color: #AFA9EC; background: #EEEDFE; }

/* Wrong word highlight */
.wll-snap-wrong-word   { background: #FEE2E2; color: #7F1D1D !important; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.wll-snap-correct-word { background: #D1FAE5; color: #065F46 !important; border-radius: 4px; padding: 1px 5px; font-weight: 600; }

/* Answer buttons */
.wll-snap-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wll-snap-btn  {
    border-radius: 12px; padding: 16px; font-size: 15px; font-weight: 600;
    border: none !important; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity .15s, transform .1s;
}
.wll-snap-btn:active { transform: scale(.97); }
.wll-snap-btn.snap-unchosen { opacity: .35; }
.wll-snap-btn-correct { background: #D1FAE5 !important; color: #065F46 !important; }
.wll-snap-btn-wrong   { background: #FEE2E2 !important; color: #7F1D1D !important; }
.wll-snap-btn-key     {
    width: 22px; height: 22px; border-radius: 5px; display: inline-flex;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.6); font-size: 10px; font-weight: 600;
}

/* Feedback */
.wll-snap-feedback    { margin-top: 16px; }
.wll-snap-fb-inner    { border-radius: 10px; padding: 14px 16px; margin-bottom: 10px; }
.wll-snap-fb-result   { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.wll-snap-fb-exp      { font-size: 13px; line-height: 1.6; color: var(--wll-text); }
.wll-snap-fb-sentence { font-size: 15px; line-height: 1.65; color: var(--wll-text);
                         padding: 10px 14px; background: var(--wll-bg-alt);
                         border-radius: 8px; margin-bottom: 14px; }
.wll-snap-xp-badge    {
    display: inline-block; background: #A7F3D0; color: #065F46;
    border-radius: 999px; padding: 1px 10px; font-size: 11px; font-weight: 600; margin-left: 6px;
}
.wll-snap-next-btn    { float: right; }

/* End screen */
.wll-snap-end-wrap        { padding: 40px 32px; max-width: 500px; margin: 0 auto; text-align: center; }
.wll-snap-end-score-block { display: flex; align-items: baseline; justify-content: center; gap: 4px; margin-bottom: 16px; }
.wll-snap-end-score       { font-size: 52px; font-weight: 600; color: var(--wll-text); line-height: 1; }
.wll-snap-end-total       { font-size: 22px; color: var(--wll-text-muted); }
.wll-snap-end-badges      { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.wll-snap-end-badge       { border-radius: 999px; padding: 4px 14px; font-size: 12px; font-weight: 600; }
.wll-snap-badge-xp        { background: #D1FAE5; color: #065F46; }
.wll-snap-badge-streak    { background: #FAEEDA; color: #633806; }
.wll-snap-badge-guru      { background: #EEEDFE; color: #26215C; }
.wll-snap-badge-level     { background: #E6F1FB; color: #0C447C; }
.wll-snap-end-breakdown   {
    background: var(--wll-bg-alt); border: 0.5px solid var(--wll-border);
    border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; text-align: left;
}
.wll-snap-breakdown-row   {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; padding: 5px 0; border-bottom: 0.5px solid var(--wll-border);
    color: var(--wll-text-muted);
}
.wll-snap-breakdown-row:last-child { border-bottom: none; }
.wll-snap-bd-right, .wll-snap-bd-streak, .wll-snap-bd-pct { font-weight: 600; color: var(--wll-text); }
.wll-snap-end-btns        { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Mobile ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wll-snap-game-wrap        { grid-template-columns: 1fr; }
    .wll-snap-game-sidebar     { display: none; }
    .wll-snap-game-stage       { padding: 18px 16px; }
    .wll-snap-sentence-card    { font-size: 16px; padding: 16px 18px; }
    .wll-snap-btn              { padding: 18px 8px; font-size: 16px; }
    .wll-snap-btn-key          { display: none; }
    .wll-snap-setup-body       { padding: 18px 16px; }
    .wll-snap-level-grid       { grid-template-columns: repeat(3,1fr); }
    .wll-snap-end-wrap         { padding: 28px 18px; }
}
@media (max-width: 420px) {
    .wll-snap-sentence-card    { font-size: 15px; }
    .wll-snap-end-score        { font-size: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v2.5.42 — Student dashboard improvements
   Per-skill tiles, exam-type filter, collapsible lesson cards, pagination
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Six per-skill summary tiles (replaces single Average) ─────────────── */
.eslem-skills-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.eslem-skill-tile {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}
.eslem-skill-tile-num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: #185FA5;
}
.eslem-skill-tile-label {
    font-size: 11px;
    color: #64748B;
    margin-top: 4px;
    line-height: 1.2;
}
.eslem-skill-tile-good  { background: #ECFDF5; border-color: #A7F3D0; }
.eslem-skill-tile-good  .eslem-skill-tile-num { color: #047857; }
.eslem-skill-tile-mid   { background: #FFFBEB; border-color: #FCD34D; }
.eslem-skill-tile-mid   .eslem-skill-tile-num { color: #92400E; }
.eslem-skill-tile-low   { background: #FEF2F2; border-color: #FECACA; }
.eslem-skill-tile-low   .eslem-skill-tile-num { color: #B91C1C; }
.eslem-skill-tile-empty .eslem-skill-tile-num { color: #94A3B8; }

@media (max-width: 640px) {
    .eslem-skills-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .eslem-skill-tile-num   { font-size: 18px; }
    .eslem-skill-tile-label { font-size: 10px; }
}

/* ── Exam-type filter pills ─────────────────────────────────────────────── */
.eslem-exam-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 0;
}
.eslem-exam-pill {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #475569;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    font-family: inherit;
}
.eslem-exam-pill:hover  { background: #F1F5F9; border-color: #94A3B8; }
.eslem-exam-pill-active {
    background: #185FA5;
    border-color: #185FA5;
    color: #FFFFFF;
}
.eslem-exam-pill-active:hover { background: #134d87; border-color: #134d87; }

/* ── Lesson card header — now a button with chevron and last-attempted ─── */
.eslem-lesson-card .eslem-lesson-header {
    /* v2.6.16: explicit background colour. Was 'transparent' (added to
       defeat astra/elementor button styling) but transparent in dark
       OS mode let the hover-state #243049 stick, producing dark-on-dark.
       Specific colour still beats the inherited button styling because
       this selector has higher specificity (0,2,0) than the bleed rules. */
    width: 100%;
    background: #f9fafb;
    border: 0;
    padding: 16px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: background 0.15s;
}
.eslem-lesson-card .eslem-lesson-header:hover { background: #F8FAFC; }
.eslem-lesson-card .eslem-lesson-header:focus-visible {
    outline: 2px solid #185FA5;
    outline-offset: -2px;
}
.eslem-lesson-info  { flex: 1; min-width: 0; }
.eslem-lesson-name  { font-size: 16px; font-weight: 600; line-height: 1.3; color: #0F172A; }
.eslem-lesson-meta  {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.eslem-lesson-when  { font-size: 12px; color: #64748B; }
.eslem-lesson-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.eslem-lesson-chevron {
    font-size: 14px;
    color: #94A3B8;
    transition: transform 0.2s ease;
    display: inline-block;
    width: 16px;
    text-align: center;
}
.eslem-lesson-card[data-collapsed="true"] .eslem-lesson-chevron {
    transform: rotate(-90deg);
}

/* ── Collapsible lesson body ────────────────────────────────────────────── */
.eslem-lesson-body {
    overflow: hidden;
    padding: 0 16px 16px;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.2s ease;
}
.eslem-lesson-card[data-collapsed="true"] .eslem-lesson-body {
    max-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}
.eslem-lesson-link-row { margin-bottom: 10px; }
.eslem-lesson-link {
    color: #185FA5;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.eslem-lesson-link:hover { text-decoration: underline; }

/* ── Pagination — hidden cards revealed by Show More ────────────────────── */
.eslem-lesson-paged-hidden { display: none; }
.eslem-load-more-wrap {
    text-align: center;
    margin: 16px 0 8px;
}
.eslem-load-more-btn {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #185FA5;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.eslem-load-more-btn:hover {
    background: #F1F5F9;
    border-color: #185FA5;
}

/* ── Filtered-out cards (when an exam filter is active) ─────────────────── */
.eslem-lesson-card[data-filter-hidden="true"] { display: none; }

/* ── Dark mode overrides ────────────────────────────────────────────────── */
/* v2.6.27: neutered with (min-width: 99999px) — student dashboard tiles
   were rendering as dark navy (#1A2332) on devices in dark mode, looking
   black to students with poorly calibrated screens. Matches the same
   neutering pattern used elsewhere in this file (lines 2165, 2717, 4409).
   Future: revisit dark mode as a deliberate opt-in feature rather than
   auto-applied via prefers-color-scheme. */
@media (prefers-color-scheme: dark) and (min-width: 99999px) {
    .eslem-skill-tile         { background: #1A2332; border-color: #2D3748; }
    .eslem-skill-tile-num     { color: #93C5FD; }
    .eslem-skill-tile-good    { background: #064E3B; border-color: #047857; }
    .eslem-skill-tile-good    .eslem-skill-tile-num { color: #6EE7B7; }
    .eslem-skill-tile-mid     { background: #422006; border-color: #92400E; }
    .eslem-skill-tile-mid     .eslem-skill-tile-num { color: #FBBF24; }
    .eslem-skill-tile-low     { background: #450A0A; border-color: #B91C1C; }
    .eslem-skill-tile-low     .eslem-skill-tile-num { color: #FCA5A5; }
    .eslem-exam-pill          { background: #1A2332; border-color: #2D3748; color: #94A3B8; }
    .eslem-exam-pill:hover    { background: #243049; }
    .eslem-exam-pill-active   { background: #1E3A5F; border-color: #1E3A5F; color: #E2E8F0; }
    .eslem-lesson-card .eslem-lesson-header       { background: #1A2332; }
    .eslem-lesson-card .eslem-lesson-header:hover { background: #243049; }
    .eslem-lesson-name        { color: #E2E8F0; }
    .eslem-load-more-btn      { background: #1A2332; border-color: #2D3748; color: #93C5FD; }
    .eslem-load-more-btn:hover{ background: #243049; }
}


/* ==========================================================================
   v2.6.19 Dashboard rework — new components
   ========================================================================== */

/* ── Course/level badge (header right) ──────────────────────────────────── */
.eslem-course-badge {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    flex-shrink: 0;
}
.eslem-course-badge-icon { font-size: 20px; line-height: 1; }
.eslem-course-badge-name { font-size: 13px; font-weight: 600; color: #185FA5; line-height: 1.3; }
.eslem-course-badge-level { font-size: 11px; color: #64748B; margin-top: 2px; }
.eslem-course-badge-link {
    display: inline-block;
    font-size: 11px;
    color: #185FA5;
    text-decoration: none;
    margin-top: 4px;
}
.eslem-course-badge-link:hover { text-decoration: underline; }
.eslem-course-badge-empty {
    background: #fef3c7;
    border-color: #fcd34d;
}
.eslem-course-badge-empty .eslem-course-badge-name { color: #92400E; }
.eslem-course-badge-empty .eslem-course-badge-link { color: #92400E; }

/* ── Continue card (Overview, primary CTA) ──────────────────────────────── */
.eslem-continue-card {
    background: linear-gradient(135deg, #185FA5 0%, #0C447C 100%);
    color: #fff;
    border-radius: 12px;
    padding: 18px 22px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.eslem-continue-info { flex: 1; min-width: 240px; }
.eslem-continue-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 4px;
}
.eslem-continue-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 4px;
}
.eslem-continue-meta {
    font-size: 12px;
    opacity: 0.85;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.eslem-continue-meta-item::before {
    content: "·";
    margin-right: 8px;
    opacity: 0.5;
}
.eslem-continue-meta-item:first-child::before { display: none; }
.eslem-continue-cta {
    background: #fff;
    color: #185FA5;
    border: 0;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}
.eslem-continue-cta:hover {
    background: #f8fafc;
    color: #0C447C;
    text-decoration: none;
}

/* ── Gap-flag banner (Lessons tab) ──────────────────────────────────────── */
.eslem-gap-flag {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-left: 4px solid #d97706;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.eslem-gap-flag-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.eslem-gap-flag-text { font-size: 14px; line-height: 1.5; color: #1f2937; }
.eslem-gap-flag-text strong { color: #78350F; }
.eslem-gap-flag-cta {
    display: inline-block;
    margin-top: 6px;
    color: #92400E;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.eslem-gap-flag-severe {
    background: #fef2f2;
    border-color: #fecaca;
    border-left-color: #B91C1C;
}
.eslem-gap-flag-severe .eslem-gap-flag-text strong { color: #7f1d1d; }
.eslem-gap-flag-severe .eslem-gap-flag-cta { color: #991b1b; }

/* ── Quick action buttons — purple variant ──────────────────────────────── */
.wll-ov-action-purple {
    background: #534AB7;
}
.wll-ov-action-purple:hover {
    background: #3D3690;
}

/* ── Achievements drawer (collapsed by default) ─────────────────────────── */
.eslem-achievements {
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 24px;
}
.eslem-achievements summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    font-weight: 600;
    color: #64748B;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.eslem-achievements summary::-webkit-details-marker { display: none; }
.eslem-achievements summary:hover { color: #0F172A; }
.eslem-achievements summary::after {
    content: '▾';
    transition: transform 0.2s;
    color: #64748B;
}
.eslem-achievements[open] summary::after { transform: rotate(180deg); }
.eslem-achievements-body { padding: 0 18px 18px; }
.eslem-achievements-section { margin-top: 18px; }
.eslem-achievements-section:first-child { margin-top: 0; }
.eslem-achievements-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}

/* Level/XP mini-card inside achievements (replaces XP card on Overview) */
.eslem-level-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}
.eslem-level-mini-icon { font-size: 22px; line-height: 1; }
.eslem-level-mini-text { flex: 1; }
.eslem-level-mini-name { font-size: 13px; font-weight: 600; color: #185FA5; }
.eslem-level-mini-num { font-size: 11px; color: #64748B; }
.eslem-level-mini-bar {
    width: 120px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}
.eslem-level-mini-fill {
    height: 100%;
    background: #185FA5;
    border-radius: 999px;
}

/* Mobile: stack continue card vertically; shrink course badge */
@media (max-width: 640px) {
    .eslem-continue-card {
        flex-direction: column;
        align-items: stretch;
    }
    .eslem-continue-cta {
        text-align: center;
    }
    .eslem-course-badge {
        padding: 8px 12px;
    }
    .eslem-course-badge-name { font-size: 12px; }
    .eslem-level-mini-bar { width: 80px; }
}


/* ==========================================================================
   v2.6.20 Recent attempts list — used on Vocab and Grammar tabs
   ========================================================================== */
.wll-recent-list {
    display: flex;
    flex-direction: column;
}
.wll-recent-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}
.wll-recent-row:last-child { border-bottom: 0; }
.wll-recent-icon { font-size: 18px; flex-shrink: 0; line-height: 1; }
.wll-recent-info { flex: 1; min-width: 0; }
.wll-recent-game {
    font-size: 13px;
    font-weight: 500;
    color: #0F172A;
    /* Don't break long grammar sentences across many lines */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wll-recent-date { font-size: 11px; color: #64748B; }
.wll-recent-score {
    font-size: 13px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    flex-shrink: 0;
    white-space: nowrap;
}
.wll-recent-good { background: #ECFDF5; color: #047857; }
.wll-recent-mid  { background: #FFFBEB; color: #92400E; }
.wll-recent-low  { background: #FEF2F2; color: #B91C1C; }

/* Mobile: stack score under text rather than crowd it */
@media (max-width: 480px) {
    .wll-recent-row { flex-wrap: wrap; }
    .wll-recent-info { flex-basis: calc(100% - 30px); }
    .wll-recent-score { margin-left: 30px; margin-top: 4px; }
}

/* ── v2.30.0 — accessibility baseline ─────────────────────────────────────
   Visible keyboard focus in every game (mouse clicks don't show it), a
   screen-reader-only helper for the live announcements, and reduced motion. */
.wll-sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.wll-game-wrap :focus-visible,
.wll-game-wrap .wll-sound-toggle:focus-visible,
.wll-lp-overlay :focus-visible,
.wtt-wrap :focus-visible,
.wtt-hub-wrap :focus-visible {
    outline: 3px solid #2563EB !important;
    outline-offset: 2px !important;
}
.wll-ws-cell:focus-visible,
.wll-mp-card:focus-visible {
    outline: 3px solid #2563EB !important;
    outline-offset: -1px !important;
    position: relative;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .wll-game-wrap *,
    .wll-game-wrap *::before,
    .wll-game-wrap *::after,
    .wll-lp-overlay * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Daily Word (v2.36.0) ─────────────────────────────────────────────── */
.wll-dw-wrap { max-width: 560px; margin: 0 auto; }
.wll-dw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wll-dw-level-label { font-weight: 600; font-size: 14px; color: #334155; }
.wll-dw-key-g { color: #15803D; } .wll-dw-key-y { color: #B45309; } .wll-dw-key-x { color: #64748B; }
.wll-dw-status { text-align: center; font-weight: 600; color: #1E293B; min-height: 1.5em; margin: 10px 0 6px; }
.wll-dw-hints { max-width: 460px; margin: 0 auto; }
.wll-dw-hint { background: #FEF3C7; border-left: 4px solid #B45309; padding: 6px 10px; margin: 4px 0; border-radius: 6px; font-size: 14px; color: #1E293B; }
.wll-dw-board { display: grid; gap: 6px; max-width: 330px; margin: 10px auto 16px; }
.wll-dw-board.is-long { max-width: 380px; }
.wll-dw-row { display: grid; gap: 6px; }
.wll-dw-row.is-shake { animation: wll-dw-shake .4s; }
.wll-dw-tile { aspect-ratio: 1 / 1; border: 2px solid #CBD5E1; border-radius: 6px; background: #fff; color: #0F172A;
    display: flex; align-items: center; justify-content: center; font: 700 clamp(20px, 6vw, 30px)/1 'DM Mono', monospace; text-transform: uppercase; }
.wll-dw-tile.is-typed { border-color: #475569; }
.wll-dw-tile.is-g, .wll-dw-key.is-g { background: #15803D !important; border-color: #15803D !important; color: #fff !important; }
.wll-dw-tile.is-y, .wll-dw-key.is-y { background: #B45309 !important; border-color: #B45309 !important; color: #fff !important; }
.wll-dw-tile.is-x, .wll-dw-key.is-x { background: #64748B !important; border-color: #64748B !important; color: #fff !important; }
.wll-dw-tile.is-flip { animation: wll-dw-flip .3s ease both; }
.wll-dw-keyboard { max-width: 500px; margin: 0 auto; user-select: none; }
.wll-dw-krow { display: flex; justify-content: center; margin-bottom: 6px; }   /* margins, not gap: flex gap needs iOS 14.5 */
.wll-dw-key { flex: 1 1 0; min-width: 0; max-width: 44px; height: 50px; margin: 0 2.5px; border: 0; border-radius: 6px; background: #E2E8F0; color: #0F172A;
    font: 700 15px/1 system-ui, sans-serif; cursor: pointer; padding: 0; touch-action: manipulation; }
.wll-dw-key.is-wide { max-width: 70px; flex-grow: 1.5; font-size: 13px; }
.wll-dw-key:focus-visible { outline: 3px solid #2563EB; outline-offset: 2px; }
.wll-dw-complete { text-align: center; border: 2px solid #E2E8F0; border-radius: 12px; padding: 14px 16px; margin: 14px auto 0; max-width: 460px; background: #F8FAFC; }
.wll-dw-result { margin: 0 0 6px; font-size: 22px; }
.wll-dw-answer { font-size: 20px; margin: 4px 0; } .wll-dw-answer i { color: #64748B; font-size: 14px; }
.wll-dw-def { margin: 4px 0; color: #1E293B; } .wll-dw-sent { margin: 4px 0; color: #475569; font-style: italic; }
.wll-dw-xp { font-weight: 700; color: #15803D; font-size: 18px; margin: 8px 0 4px; }
.wll-dw-note { font-size: 13px; color: #475569; margin: 6px 0; }
.wll-dw-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.wll-dw-next { font-size: 13px; color: #334155; }
.wll-dw-copy { position: absolute; left: -9999px; }
@keyframes wll-dw-shake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes wll-dw-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@media (max-width: 420px) { .wll-dw-key { height: 46px; font-size: 14px; margin: 0 2px; } }
@supports not (aspect-ratio: 1 / 1) { .wll-dw-tile { height: 52px; } }   /* iOS 14 and older */

/* v2.36.1 — the theme styles every <button> (green, shadow, padding): the Daily Word keys must
   keep their own look, or an unused key looks like a green "right place" letter. */
#wll-daily-word .wll-dw-key, #wll-daily-word .wll-dw-key:hover, #wll-daily-word .wll-dw-key:focus, #wll-daily-word .wll-dw-key:active {
    background: #E2E8F0 !important; background-image: none !important; color: #0F172A !important; border: 0 !important;
    border-radius: 6px !important; box-shadow: none !important; text-shadow: none !important; padding: 0 !important;
    min-width: 0 !important; min-height: 0 !important; height: 50px !important; line-height: 1 !important;
    text-transform: none !important; letter-spacing: 0 !important; font: 700 15px/1 system-ui, sans-serif !important;
    transform: none !important; opacity: 1 !important;
}
#wll-daily-word .wll-dw-key.is-wide { font-size: 13px !important; }
#wll-daily-word .wll-dw-key:hover { background: #CBD5E1 !important; }
#wll-daily-word .wll-dw-key.is-g { background: #15803D !important; color: #fff !important; }
#wll-daily-word .wll-dw-key.is-y { background: #B45309 !important; color: #fff !important; }
#wll-daily-word .wll-dw-key.is-x { background: #64748B !important; color: #fff !important; }
@media (max-width: 420px) { #wll-daily-word .wll-dw-key { height: 46px !important; font-size: 14px !important; } }

/* ── Listen & Spell (v2.39.0) ─────────────────────────────────────────── */
.wll-ls-wrap { max-width: 640px; }
.wll-ls-scorebar { display: flex; align-items: center; gap: 20px; padding: 10px 0 12px; border-bottom: 1px solid var(--wll-border); margin-bottom: 14px; }
.wll-ls-counter { font-size: 14px; color: #475569; margin-left: auto; }
.wll-ls-stage { text-align: center; padding: 6px 0 4px; }
.wll-ls-listen { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 4px; }
.wll-ls-voice { font-size: 12px; color: #64748B; min-height: 1.2em; margin: 2px 0 10px; }
.wll-ls-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 6px auto 12px; max-width: 100%; }
.wll-ls-box { width: 34px; height: 42px; border: 2px solid #CBD5E1; border-radius: 6px; background: #fff; color: #0F172A;
    display: inline-flex; align-items: center; justify-content: center; font: 700 20px/1 'DM Mono', ui-monospace, monospace; text-transform: lowercase; }
.wll-ls-box-filled { border-color: #475569; }
.wll-ls-box.wll-ls-ok { background: #15803D; border-color: #15803D; color: #fff; }
.wll-ls-box.wll-ls-bad { background: #FEE2E2; border-color: #DC2626; color: #991B1B; }
.wll-ls-revealed .wll-ls-box { background: #EFF6FF; border-color: #2563EB; color: #1E3A8A; }
.wll-ls-gap { width: 14px; }
.wll-ls-try { min-height: 1.4em; margin: -4px auto 10px; font: 700 16px/1.4 'DM Mono', ui-monospace, monospace; }
.wll-ls-try-label { font: 600 13px/1 system-ui, sans-serif; color: #475569; margin-right: 4px; }
.wll-ls-tl { display: inline-block; min-width: 1em; padding: 1px 3px; margin: 0 1px; border-radius: 4px; }
.wll-ls-tl.wll-ls-ok { background: #DCFCE7; color: #166534; }
.wll-ls-tl.wll-ls-bad { background: #FEE2E2; color: #991B1B; text-decoration: line-through; }
.wll-ls-extra { align-self: center; font-size: 13px; font-weight: 700; color: #B91C1C; margin-left: 4px; }
.wll-ls-input { display: block; width: 100%; max-width: 360px; margin: 0 auto 10px; padding: 12px 14px; font-size: 20px; text-align: center;
    border: 2px solid #CBD5E1; border-radius: 10px; background: #fff; color: #0F172A; letter-spacing: .04em; box-sizing: border-box; }
.wll-ls-input:focus { outline: none; border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.2); }
.wll-ls-input:disabled { background: #F1F5F9; color: #475569; }
.wll-ls-hint { max-width: 460px; margin: 0 auto; text-align: left; }
.wll-ls-hint:not(:empty) { background: #FEF3C7; border-left: 4px solid #B45309; padding: 8px 12px; border-radius: 6px; font-size: 14px; color: #1E293B; margin-bottom: 8px; }
.wll-ls-pos { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #92400E; margin-right: 4px; }
.wll-ls-clue { margin: 6px 0 0; font-style: italic; color: #334155; }
.wll-ls-tr { margin: 6px 0 0; color: #334155; }
.wll-ls-feedback { min-height: 1.5em; max-width: 460px; margin: 0 auto 8px; }
.wll-ls-msg { border: 1px solid; border-radius: 8px; padding: 8px 14px; font-size: 14px; margin: 0; }
.wll-ls-ok.wll-ls-msg { background: #DCFCE7; color: #166534; border-color: #86EFAC; }
.wll-ls-bad.wll-ls-msg { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }
.wll-ls-info.wll-ls-msg, .wll-ls-reveal.wll-ls-msg { background: #EFF6FF; color: #1E40AF; border-color: #BFDBFE; }
.wll-ls-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.wll-ls-missed { text-align: left; max-width: 420px; margin: 10px auto; }
.wll-ls-missed-title { font-weight: 700; margin: 0 0 4px; }
.wll-ls-missed-list { list-style: none; margin: 0; padding: 0; }
.wll-ls-missed-list li { padding: 5px 0; border-bottom: 1px solid #E2E8F0; font-size: 14px; color: #1E293B; }
.wll-ls-saved { font-weight: 700; color: #15803D; min-height: 1.3em; margin: 8px 0; }

/* The theme styles every <button>: keep the play and replay buttons' own look. */
#wll-listen-spell .wll-ls-play, #wll-listen-spell .wll-ls-play:hover, #wll-listen-spell .wll-ls-play:focus {
    display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 14px 28px !important; min-height: 60px !important;
    border: 0 !important; border-radius: 999px !important; background: #2563EB !important; background-image: none !important; color: #fff !important;
    font: 700 20px/1 system-ui, sans-serif !important; box-shadow: 0 4px 14px rgba(37,99,235,.3) !important; text-transform: none !important; cursor: pointer; }
#wll-listen-spell .wll-ls-play:hover { background: #1D4ED8 !important; }
#wll-listen-spell .wll-ls-play:focus-visible { outline: 3px solid #1E3A8A !important; outline-offset: 3px !important; }
#wll-listen-spell .wll-ls-play-icon { font-size: 26px; }
#wll-listen-spell .wll-ls-play.wll-ls-playing { animation: wll-ls-pulse 1s ease-in-out infinite; }
#wll-listen-spell .wll-ls-replay, #wll-listen-spell .wll-ls-replay:hover, #wll-listen-spell .wll-ls-replay:focus {
    background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; padding: 0 6px 0 0 !important;
    min-height: 0 !important; color: inherit !important; font-size: 16px !important; cursor: pointer; }
@keyframes wll-ls-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { #wll-listen-spell .wll-ls-play.wll-ls-playing { animation: none; } }
@media (max-width: 420px) { .wll-ls-box { width: 28px; height: 36px; font-size: 17px; } .wll-ls-boxes { gap: 4px; } }
/* v2.39.0 — Listen & Spell voice switch (the theme styles every <button>). */
#wll-listen-spell .wll-ls-voices { display: inline-flex; margin: 2px auto 4px; border: 1px solid #CBD5E1; border-radius: 999px; overflow: hidden; }
#wll-listen-spell .wll-ls-vbtn, #wll-listen-spell .wll-ls-vbtn:hover, #wll-listen-spell .wll-ls-vbtn:focus {
    background: #fff !important; background-image: none !important; color: #334155 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 6px 14px !important; min-height: 0 !important; font: 600 13px/1.2 system-ui, sans-serif !important; text-transform: none !important; cursor: pointer; }
#wll-listen-spell .wll-ls-vbtn.is-on { background: #1E3A8A !important; color: #fff !important; }
#wll-listen-spell .wll-ls-vbtn:focus-visible { outline: 3px solid #2563EB !important; outline-offset: -3px !important; }
/* v2.39.1 — Matching Pairs: the line under the grid while a wrong pair is shown. */
.wll-mp-note { text-align: center; min-height: 1.5em; margin: 8px 0 0; font-size: 14px; color: #991B1B; font-weight: 600; }

/* ── Matching Pairs v2.40.0 — Word / Meaning card backs, text that fits, word audio, pairs list ── */
.wll-mp-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.wll-mp-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.wll-mp-grid[data-cols] .wll-mp-card { aspect-ratio: 5 / 4; }                 /* wide screens: cards a little wider than tall */
.wll-mp-grid[data-text="xl"] .wll-mp-card { aspect-ratio: 1 / 1; }
.wll-mp-card .wll-mp-card-front { flex-direction: column; gap: 4px; }
/* rev b — soft card backs: a light tint with a faint diagonal pattern, a coloured edge, line icons. */
.wll-mp-card.wll-mp-is-word .wll-mp-card-front {
    background: #EEF2FF repeating-linear-gradient(135deg, rgba(79,70,229,.06) 0 8px, transparent 8px 16px) !important;
    border: 2px solid #A5B4FC !important; color: #3730A3 !important; box-shadow: 0 2px 6px rgba(55,48,163,.10) !important; }
.wll-mp-card.wll-mp-is-match .wll-mp-card-front {
    background: #FFF7ED repeating-linear-gradient(135deg, rgba(234,88,12,.06) 0 8px, transparent 8px 16px) !important;
    border: 2px solid #FDBA74 !important; color: #9A3412 !important; box-shadow: 0 2px 6px rgba(154,52,18,.10) !important; }
.wll-mp-card.wll-mp-is-word:hover  .wll-mp-card-front { border-color: #6366F1 !important; }
.wll-mp-card.wll-mp-is-match:hover .wll-mp-card-front { border-color: #F97316 !important; }
.wll-mp-front-icon  { display: inline-flex; line-height: 0; opacity: .9; }
.wll-mp-front-label { font: 700 12px/1.1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
/* the faces once turned: the word on a light indigo card, the meaning on a light peach card */
.wll-mp-card.wll-mp-is-word  .wll-mp-card-back { background: #F5F7FF; border-color: #C7D2FE; color: #312E81; }
.wll-mp-card.wll-mp-is-match .wll-mp-card-back { background: #FFFBF5; border-color: #FED7AA; color: #431407; }
.wll-mp-card-match { font-size: 13px; }
.wll-mp-card-match span.wll-mp-text { display: block; -webkit-line-clamp: unset; overflow: visible; width: 100%; }
.wll-mp-card.wll-mp-nudge { animation: wll-mp-nudge .35s; }
@keyframes wll-mp-nudge { 0%,100% { transform: translateX(0); } 25%,75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .wll-mp-card.wll-mp-nudge { animation: none; } }
#wll-matching-pairs .wll-mp-say, #wll-matching-pairs .wll-mp-say:hover, #wll-matching-pairs .wll-mp-say:focus {
    position: absolute; right: 4px; bottom: 4px; background: transparent !important; background-image: none !important; border: 0 !important;
    box-shadow: none !important; padding: 3px !important; min-height: 0 !important; line-height: 0 !important; cursor: pointer; color: #4F46E5 !important; opacity: .8; }
#wll-matching-pairs .wll-mp-say:hover { opacity: 1; }
.wll-mp-complete-inner { max-width: 520px; }
.wll-mp-pairs-list { text-align: left; margin: 0 0 18px; }
.wll-mp-list-title { font-weight: 700; margin: 0 0 6px; color: #1E293B; }
.wll-mp-list { list-style: none; margin: 0; padding: 0; }
.wll-mp-list li { padding: 6px 0; border-bottom: 1px solid #E2E8F0; font-size: 14px; color: #334155; }
.wll-mp-list li strong { color: #1E3A8A; }
.wll-mp-list li.is-hard strong { color: #B91C1C; }
.wll-mp-list-note { font-size: 13px; color: #475569; margin: 8px 0 0; }
#wll-matching-pairs .wll-mp-say-list, #wll-matching-pairs .wll-mp-say-list:hover, #wll-matching-pairs .wll-mp-say-list:focus {
    background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
    padding: 0 6px 0 0 !important; min-height: 0 !important; font-size: 15px !important; color: inherit !important; cursor: pointer; }
@media (max-width: 600px) {
    .wll-mp-grid[data-cols] { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; }
    .wll-mp-grid[data-cols] .wll-mp-card { aspect-ratio: 1 / 1; }
    .wll-mp-grid[data-text="l"] .wll-mp-card, .wll-mp-grid[data-text="xl"] .wll-mp-card { aspect-ratio: 4 / 5; }
    .wll-mp-card-match { font-size: 12px; }
    .wll-mp-card-word  { font-size: 14px; }
}
@media (max-width: 480px) {
    .wll-mp-grid[data-text="xl"] { grid-template-columns: repeat(2, 1fr) !important; }
    .wll-mp-grid[data-text="xl"] .wll-mp-card { aspect-ratio: 5 / 4; }
    .wll-mp-front-icon svg { width: 24px; height: 24px; }
    .wll-mp-front-label { font-size: 11px; }
}
/* matched and wrong colours win over the word / meaning faces */
#wll-matching-pairs .wll-mp-card.wll-mp-matched .wll-mp-card-back { background: var(--wll-green-light); border-color: var(--wll-green); color: #064E3B; }
#wll-matching-pairs .wll-mp-card.wll-mp-wrong   .wll-mp-card-back { background: var(--wll-red-light); border-color: #F87171; }

/* ── Matching Pairs v2.41.0 — mode switch and "Show all" ───────────────── */
.wll-mp-modes { display: inline-flex; margin: 0 0 12px; border: 1px solid #CBD5E1; border-radius: 999px; overflow: hidden; }
#wll-matching-pairs .wll-mp-mode, #wll-matching-pairs .wll-mp-mode:hover, #wll-matching-pairs .wll-mp-mode:focus {
    background: #fff !important; background-image: none !important; color: #334155 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 7px 14px !important; min-height: 0 !important; font: 600 13px/1.2 system-ui, sans-serif !important; text-transform: none !important; cursor: pointer; }
#wll-matching-pairs .wll-mp-mode.is-on { background: #3730A3 !important; color: #fff !important; }
#wll-matching-pairs .wll-mp-mode:focus-visible { outline: 3px solid #6366F1 !important; outline-offset: -3px !important; }

#wll-matching-pairs .wll-mp-grid[data-mode="show"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important; gap: 14px; align-items: start; }
.wll-mp-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wll-mp-col-head { margin: 0 0 2px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #64748B; }
#wll-matching-pairs .wll-mp-item, #wll-matching-pairs .wll-mp-item:hover, #wll-matching-pairs .wll-mp-item:focus {
    display: flex !important; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px !important; text-align: left !important;
    padding: 10px 12px !important; border-radius: 10px !important; border: 2px solid #CBD5E1 !important; background: #fff !important; background-image: none !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06) !important; color: #1E293B !important; font: 500 15px/1.35 system-ui, sans-serif !important; text-transform: none !important;
    cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s; word-break: break-word; }
#wll-matching-pairs .wll-mp-item-word, #wll-matching-pairs .wll-mp-item-word:hover, #wll-matching-pairs .wll-mp-item-word:focus { font-weight: 700 !important; color: #312E81 !important; border-color: #C7D2FE !important; background: #F5F7FF !important; }
#wll-matching-pairs .wll-mp-item-match, #wll-matching-pairs .wll-mp-item-match:hover, #wll-matching-pairs .wll-mp-item-match:focus { border-color: #FED7AA !important; background: #FFFBF5 !important; color: #431407 !important; font-size: 14px !important; }
#wll-matching-pairs .wll-mp-item-word:hover  { border-color: #6366F1 !important; }
#wll-matching-pairs .wll-mp-item-match:hover { border-color: #F97316 !important; }
#wll-matching-pairs .wll-mp-item.wll-mp-item-word.is-sel { border-color: #3730A3 !important; background: #E0E7FF !important; box-shadow: 0 0 0 3px rgba(99,102,241,.35) !important; transform: translateY(-1px); }
#wll-matching-pairs .wll-mp-item.wll-mp-item-match.is-sel { border-color: #C2410C !important; background: #FFEDD5 !important; box-shadow: 0 0 0 3px rgba(249,115,22,.35) !important; transform: translateY(-1px); }
#wll-matching-pairs .wll-mp-item.is-done.is-done { background: var(--wll-green-light) !important; border-color: var(--wll-green) !important; color: #064E3B !important; cursor: default; opacity: .75; }
#wll-matching-pairs .wll-mp-item.is-wrong.is-wrong { background: var(--wll-red-light) !important; border-color: #F87171 !important; animation: wll-mp-nudge .35s; }
#wll-matching-pairs .wll-mp-item:focus-visible { outline: 3px solid #2563EB !important; outline-offset: 1px !important; }
.wll-mp-item-say { display: inline-flex; color: #6366F1; opacity: .75; flex: none; }
@media (prefers-reduced-motion: reduce) { #wll-matching-pairs .wll-mp-item { transition: none; } #wll-matching-pairs .wll-mp-item.is-wrong { animation: none; } }
@media (max-width: 480px) {
    #wll-matching-pairs .wll-mp-grid[data-mode="show"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important; gap: 8px; }
    #wll-matching-pairs .wll-mp-item { padding: 8px 9px !important; font-size: 14px !important; }
    #wll-matching-pairs .wll-mp-item-match { font-size: 13px !important; }
    #wll-matching-pairs .wll-mp-mode { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ============================================================
   v2.42.0 — Daily Word: Today / Practice switch and Hard mode
   ============================================================ */
.wll-dw-modes { display: flex; justify-content: center; margin: 0 auto 10px; width: max-content; max-width: 100%; border: 1px solid #CBD5E1; border-radius: 999px; overflow: hidden; }
#wll-daily-word .wll-dw-mode, #wll-daily-word .wll-dw-mode:hover, #wll-daily-word .wll-dw-mode:focus {
    background: #fff !important; background-image: none !important; color: #334155 !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; padding: 7px 16px !important; min-height: 0 !important; font: 600 14px/1.2 system-ui, sans-serif !important; text-transform: none !important; cursor: pointer; }
#wll-daily-word .wll-dw-mode:hover { background: #F1F5F9 !important; }
#wll-daily-word .wll-dw-mode.is-on, #wll-daily-word .wll-dw-mode.is-on:hover, #wll-daily-word .wll-dw-mode.is-on:focus { background: #15803D !important; color: #fff !important; }
#wll-daily-word .wll-dw-mode:focus-visible { outline: 3px solid #2563EB !important; outline-offset: -3px !important; }
.wll-dw-hard { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: #334155; cursor: pointer; padding: 4px 6px; }
.wll-dw-hard input { width: 18px; height: 18px; margin: 0; accent-color: #15803D; cursor: pointer; }
#wll-daily-word.is-practice .wll-dw-board { background: #F8FAFC; border-radius: 10px; padding: 8px; }
#wll-daily-word.is-practice .wll-dw-complete { border-color: #BBF7D0; background: #F0FDF4; }
#wll-daily-word .wll-dw-next-btn { background: #15803D !important; color: #fff !important; border-color: #15803D !important; }
@media (max-width: 420px) { #wll-daily-word .wll-dw-mode { padding: 6px 12px !important; font-size: 13px !important; } }

/* ============================================================
   v2.42.0 — Word Search: find from meanings / my language
   ============================================================ */
.wll-ws-find-label { font-size: 13px; font-weight: 600; color: #334155; margin-right: -2px; }
.wll-ws-layout.is-clues { grid-template-columns: 1fr 300px; }
@media (max-width: 640px) { .wll-ws-layout.is-clues { grid-template-columns: 1fr; } }
.wll-ws-word-list.is-clues { gap: 2px; max-height: 560px; }
.wll-ws-word-item.wll-ws-clue { align-items: flex-start; gap: 6px; padding: 7px 6px; border-bottom: 1px solid #F1F5F9; line-height: 1.4; }
.wll-ws-word-item.wll-ws-clue:last-child { border-bottom: 0; }
.wll-ws-word-item.wll-ws-clue:focus { outline: 2px solid #93C5FD; outline-offset: 1px; }
.wll-ws-clue-num { font-weight: 700; color: #64748B; min-width: 1.7em; flex: none; }
.wll-ws-clue-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; word-break: break-word; }
.wll-ws-clue .wll-word-text { color: #1E293B; }
.wll-ws-clue-ans { font-size: 12px; color: #64748B; }
.wll-ws-word-item.wll-ws-clue.wll-found { text-decoration: none; opacity: 1; background: var(--wll-green-light); }
.wll-ws-word-item.wll-ws-clue.wll-found .wll-word-text { color: #475569; }
.wll-ws-word-item.wll-ws-clue.wll-found .wll-ws-clue-ans b { color: var(--wll-green-dark); font-size: 13px; letter-spacing: .05em; }
#wll-word-search .wll-ws-hint-btn, #wll-word-search .wll-ws-hint-btn:hover, #wll-word-search .wll-ws-hint-btn:focus {
    flex: none; width: 30px; height: 30px; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important;
    background: #fff !important; background-image: none !important; box-shadow: none !important; font-size: 15px !important; line-height: 1 !important; cursor: pointer; }
#wll-word-search .wll-ws-hint-btn:hover { border-color: #F59E0B !important; background: #FFFBEB !important; }
#wll-word-search .wll-ws-hint-btn:disabled { opacity: .35; cursor: default; }
#wll-word-search .wll-ws-hint-btn:focus-visible { outline: 3px solid #2563EB !important; outline-offset: 1px; }
.wll-ws-cell.wll-ws-hint-cell { background: #FEF3C7; color: #92400E; box-shadow: inset 0 0 0 2px #F59E0B; animation: wll-ws-hint 1.2s ease-in-out 3; }
@keyframes wll-ws-hint { 50% { background: #FDE68A; } }
@media (prefers-reduced-motion: reduce) { .wll-ws-cell.wll-ws-hint-cell { animation: none; } }
.wll-ws-cell.wll-ws-hint-cell.wll-selecting { background: #BEE3F8; }

/* ============================================================
   v2.43.0 — Flashcards: Type it
   ============================================================ */
.wll-fc-type { max-width: 460px; margin: 14px auto 0; text-align: center; }
.wll-fc-type-shape { font: 700 20px/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; color: #475569; margin: 0 0 10px; white-space: pre-wrap; word-break: break-word; }
.wll-fc-type-row { display: flex; gap: 8px; }
#wll-flashcard .wll-fc-type-input { flex: 1; min-width: 0; height: 48px; padding: 0 14px !important; border: 2px solid #CBD5E1 !important; border-radius: 10px !important;
    font: 600 18px/1 system-ui, sans-serif !important; color: #0F172A !important; background: #fff !important; box-shadow: none !important; }
#wll-flashcard .wll-fc-type-input:focus { border-color: #2563EB !important; outline: 3px solid rgba(37,99,235,.2) !important; outline-offset: 0 !important; }
#wll-flashcard .wll-fc-type-input.is-wrong { border-color: #DC2626 !important; background: #FEF2F2 !important; }
#wll-flashcard .wll-fc-type-input.is-right { border-color: #15803D !important; background: #F0FDF4 !important; }
#wll-flashcard #wll-fc-type-check { height: 48px; padding: 0 18px !important; flex: none; }
.wll-fc-type-tools { display: flex; justify-content: center; gap: 10px; margin-top: 10px; min-height: 38px; }
.wll-fc-type-msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 600; color: #334155; }
.wll-fc-type-msg.is-right { color: #15803D; }
.wll-fc-type-msg.is-wrong { color: #B91C1C; }
@media (max-width: 420px) { .wll-fc-type-shape { font-size: 17px; } #wll-flashcard #wll-fc-type-check { padding: 0 12px !important; } }

/* ============================================================
   v2.43.0 — Grammar Snap: Fix it
   ============================================================ */
.wll-snap-fix { margin-top: 4px; }
.wll-snap-fix-q { font-size: 15px; color: #1E293B; margin: 0 0 6px; }
.wll-snap-fix-sentence { font-size: 15px; color: #334155; margin: 0 0 10px; line-height: 1.5; }
.wll-snap-fix-opts { display: flex; flex-wrap: wrap; gap: 8px; }
#wll-grammar-snap .wll-snap-fix-opt, #wll-grammar-snap .wll-snap-fix-opt:hover, #wll-grammar-snap .wll-snap-fix-opt:focus {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px !important; border: 2px solid #CBD5E1 !important; border-radius: 10px !important;
    background: #fff !important; background-image: none !important; color: #0F172A !important; box-shadow: none !important; font: 600 16px/1.2 system-ui, sans-serif !important; text-transform: none !important; cursor: pointer; }
#wll-grammar-snap .wll-snap-fix-opt:hover { border-color: #6366F1 !important; background: #F5F7FF !important; }
#wll-grammar-snap .wll-snap-fix-opt:focus-visible { outline: 3px solid #2563EB !important; outline-offset: 2px !important; }
#wll-grammar-snap .wll-snap-fix-opt:disabled { cursor: default; opacity: .7; }
#wll-grammar-snap .wll-snap-fix-opt.is-right.is-right { border-color: #15803D !important; background: #DCFCE7 !important; color: #14532D !important; opacity: 1; }
#wll-grammar-snap .wll-snap-fix-opt.is-wrong.is-wrong { border-color: #DC2626 !important; background: #FEE2E2 !important; color: #7F1D1D !important; opacity: 1; }
.wll-snap-fix-key { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; background: #E2E8F0; color: #475569; font-size: 12px; }
.wll-snap-fix-result { margin-top: 10px; font-weight: 700; }
.wll-snap-fix-result.is-right { color: #15803D; } .wll-snap-fix-result.is-wrong { color: #B91C1C; }
.wll-snap-fix-corrected { margin-top: 4px; font-weight: 400; font-size: 14px; color: #0F6E56; }

/* ============================================================
   FLASHCARD — library cards and picture layout (30 Oct 2026)
   ============================================================ */

/* The card grows with its content: both faces share one grid cell instead of
   being absolutely positioned over a fixed-height card, so a picture plus a
   two-line definition no longer runs over itself. The flip is unchanged. */
.wll-fc-card { display: grid; }
.wll-fc-front,
.wll-fc-back {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-height: inherit;
}

/* The picture keeps its own space above the definition. */
.wll-fc-image-wrap { height: auto !important; flex: 0 0 auto; line-height: 0; }
.wll-fc-front img,
.wll-fc-image {
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
}

/* Library cards (media.esleschool.com/cards/) carry their own warm off-white
   background, so the card face takes the same colour and the square disappears.
   Old pictures keep the white face. The answer flashes still win (more specific). */
.wll-fc-front:has(img[src*="media.esleschool.com/cards/"]) {
    background: #FBF4E8;
    color: #1A202C;
}
.wll-fc-front img[src*="media.esleschool.com/cards/"] { border-radius: 0; }

/* v2.84.0 — picture play */
#wll-mp-grid .wll-mp-pic { display: block; width: 100%; height: 100%; object-fit: contain; }
#wll-matching-pairs .wll-mp-item .wll-mp-pic { display: block; width: 96px; height: 96px; object-fit: contain; }
.wll-mp-col-meanings:has(.wll-mp-pic) { flex-direction: row; flex-wrap: wrap; }
.wll-ws-clue-pic { display: block; width: 72px; height: 72px; object-fit: contain; }
.wll-cw-clue-pic { display: none; flex: none; width: 56px; height: 56px; object-fit: contain; margin-right: 8px; }
.wll-cw-pics-on .wll-cw-clue-pic { display: block; }
#wll-cw-pics[aria-pressed="true"] { color: #fff !important; background: #2563EB !important; border-color: #2563EB !important; }