/* ============================================================
   WLL Teacher Tools — Classroom-ready UI
   Bold, high-contrast, projector-friendly design
   ============================================================ */


/* ── Shared wrapper ────────────────────────────────────────── */
.wtt-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: system-ui, -apple-system, sans-serif;
    color: #1a1a2e;
}

.wtt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.wtt-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #1a1a2e !important;
    letter-spacing: 0;
}

/* ── Filter bar ─────────────────────────────────────────────── */
.wtt-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    align-items: center;
}

.wtt-select {
    padding: 8px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    color: #1a1a2e;
    min-width: 130px;
}
.wtt-select:focus { outline: none; border-color: #1D9E75; }

/* ── Buttons ─────────────────────────────────────────────────── */
.wtt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.wtt-btn:active { transform: scale(.97); }
.wtt-btn-primary { background: #1D9E75 !important; color: #fff !important; }
.wtt-btn-primary:hover { background: #0F6E56 !important; }
.wtt-btn-secondary { background: #f4f6f8 !important; color: #1a1a2e !important; border: 1.5px solid #e5e7eb !important; }
.wtt-btn-secondary:hover { background: #e9ecef !important; }
.wtt-btn-lg { padding: 14px 28px !important; font-size: 16px !important; }
.wtt-btn-xl { padding: 18px 48px !important; font-size: 20px !important; border-radius: 12px !important; }
.wtt-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Mode toggle ──────────────────────────────────────────────── */
.wtt-mode-toggle {
    display: flex;
    background: #f4f6f8;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.wtt-mode-btn {
    padding: 7px 14px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.wtt-mode-btn.wtt-mode-active {
    background: #fff;
    color: #1a1a2e;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.wtt-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-family: 'DM Mono', monospace;
    font-size: 13px;
    resize: vertical;
    color: #1a1a2e;
}

/* ══════════════════════════════════════════════════════════════
   SPIN THE WHEEL
   ══════════════════════════════════════════════════════════════ */

.wtt-wheel-layout {
    display: grid;
    grid-template-columns: 440px 1fr;
    gap: 32px;
    align-items: center;
    margin-top: 16px;
}

.wtt-wheel-container {
    position: relative;
    width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

#spin-canvas {
    border-radius: 50%;
    box-shadow: 0 8px 40px rgba(0,0,0,.15);
    display: block;
}

.wtt-wheel-pointer {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px;
    color: #1D9E75;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
    z-index: 10;
}

.wtt-spin-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1D9E75, #0F6E56);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 20px;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 900;
    letter-spacing: .1em;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(29,158,117,.4);
    transition: all .2s;
}
.wtt-spin-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(29,158,117,.5); }
.wtt-spin-btn:active { transform: scale(.98); }
.wtt-spin-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* Result panel */
.wtt-wheel-result {
    background: #f4f6f8;
    border-radius: 16px;
    padding: 32px 24px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.wtt-result-placeholder { color: #9ca3af; }
.wtt-result-placeholder p { margin: 12px 0 0; font-size: 15px; }

.wtt-result-word {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 48px;
    font-weight: 900;
    color: #1a1a2e;
    line-height: 1.1;
    margin-bottom: 8px;
    animation: wtt-pop .4s cubic-bezier(.34,1.56,.64,1);
}
.wtt-result-pos  { font-size: 13px; color: #6b7280; font-style: italic; margin-bottom: 12px; }
.wtt-result-def  { font-size: 16px; color: #374151; line-height: 1.5; }
.wtt-result-level {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    background: #1D9E75;
    color: #fff;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
}

@keyframes wtt-pop {
    from { opacity: 0; transform: scale(.7) rotate(-3deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (max-width: 700px) {
    .wtt-wheel-layout { grid-template-columns: 1fr; }
    .wtt-wheel-container { width: 100%; }
    #spin-canvas { width: 100%; height: auto; }
}

/* ══════════════════════════════════════════════════════════════
   TIMER
   ══════════════════════════════════════════════════════════════ */

.wtt-timer-wrap { text-align: center; }

.wtt-timer-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.wtt-preset-btn {
    padding: 8px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.wtt-preset-btn:hover,
.wtt-preset-btn.wtt-preset-active {
    border-color: #1D9E75;
    background: #1D9E75;
    color: #fff;
}

.wtt-custom-time {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #f4f6f8;
    border-radius: 8px;
    padding: 4px 8px;
}

.wtt-time-input {
    width: 52px;
    padding: 6px 8px;
    border: 1.5px solid #e5e7eb;
    border-radius: 6px;
    font-size: 15px;
    font-family: 'DM Mono', monospace;
    text-align: center;
    color: #1a1a2e;
}
.wtt-time-input:focus { outline: none; border-color: #1D9E75; }

/* Ring timer display */
.wtt-timer-display {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 24px;
}

.wtt-timer-ring {
    width: 220px;
    height: 220px;
    transform: rotate(-90deg);
}
.wtt-ring-bg   { fill: none; stroke: #e5e7eb; stroke-width: 12; }
.wtt-ring-fill {
    fill: none;
    stroke: #1D9E75;
    stroke-width: 12;
    stroke-linecap: round;
    transition: stroke-dashoffset .5s linear, stroke .5s;
}

.wtt-timer-time {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -54%);
    font-family: 'DM Mono', monospace;
    font-size: 42px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1;
}
.wtt-timer-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 28px);
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

/* Timer states */
.wtt-timer-wrap.wtt-timer-running .wtt-ring-fill { stroke: #1D9E75; }
.wtt-timer-wrap.wtt-timer-warning .wtt-ring-fill { stroke: #F59E0B; }
.wtt-timer-wrap.wtt-timer-danger  .wtt-ring-fill { stroke: #EF4444; }
.wtt-timer-wrap.wtt-timer-danger  .wtt-timer-time { color: #EF4444; animation: wtt-pulse-red 1s ease-in-out infinite; }
.wtt-timer-wrap.wtt-timer-done    .wtt-ring-fill { stroke: #10B981; }

@keyframes wtt-pulse-red {
    0%, 100% { opacity: 1; }
    50%       { opacity: .5; }
}

.wtt-timer-controls {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.wtt-text-input {
    width: 100%;
    max-width: 400px;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
    color: #1a1a2e;
    font-family: inherit;
}
.wtt-text-input:focus { outline: none; border-color: #1D9E75; }

.wtt-timer-activity { margin-bottom: 12px; }
.wtt-timer-sound    { color: #6b7280; font-size: 14px; }

/* ── Timer tabs ────────────────────────────────────────────── */
.wtt-timer-tabs {
    display: flex;
    gap: 4px;
    margin-left: auto;
}
.wtt-timer-tab {
    padding: 5px 14px;
    border-radius: 999px;
    border: 0.5px solid var(--wll-border, #e2e8f0);
    background: transparent;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.wtt-timer-tab.active {
    background: #185FA5;
    border-color: #185FA5;
    color: #fff;
}

/* ── Sequence builder ──────────────────────────────────────── */
.wtt-seq-builder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.wtt-seq-builder-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.wtt-seq-empty {
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
    padding: 12px 0;
}
.wtt-seq-stage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 0.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
}
.wtt-seq-stage-num {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #378ADD;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wtt-seq-label-input {
    flex: 1;
    border: 0.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 13px;
    background: #fff;
    color: #1a202c;
}
.wtt-seq-min-input, .wtt-seq-sec-input {
    width: 48px;
    border: 0.5px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 13px;
    text-align: center;
    background: #fff;
    color: #1a202c;
}
.wtt-seq-colon { font-size: 14px; font-weight: 600; color: #9ca3af; }
.wtt-seq-stage-dur { font-size: 12px; color: #6b7280; min-width: 36px; text-align: right; }
.wtt-seq-del-btn {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 16px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color .15s;
}
.wtt-seq-del-btn:hover { color: #EF4444; }
.wtt-seq-add-btn {
    margin-top: 6px;
    font-size: 13px !important;
}
.wtt-seq-total {
    font-size: 12px;
    color: #6b7280;
    margin: 8px 0 16px;
}
.wtt-seq-presets-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.wtt-seq-presets-lbl { font-size: 12px; color: #9ca3af; }
.wtt-seq-tpl-btn {
    padding: 5px 12px;
    border-radius: 999px;
    border: 0.5px solid #e2e8f0;
    background: #fff;
    font-size: 12px;
    color: #374151;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.wtt-seq-tpl-btn:hover { background: #E6F1FB; border-color: #85B7EB; color: #0C447C; }
.wtt-seq-actions { text-align: center; margin-top: 8px; }

/* ── Sequence runner ───────────────────────────────────────── */
.wtt-seq-progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 16px;
    overflow: hidden;
}
.wtt-seq-progress-fill {
    height: 100%;
    background: #0F6E56;
    border-radius: 2px;
    transition: width .5s;
    width: 0%;
}
.wtt-seq-stage-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 16px;
}
.wtt-seq-pill {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    background: #f1f5f9;
    border: 0.5px solid #e2e8f0;
    color: #9ca3af;
    transition: all .3s;
}
.wtt-seq-pill.current {
    background: #378ADD;
    border-color: #378ADD;
    color: #fff;
}
.wtt-seq-pill.done {
    background: #D1FAE5;
    border-color: #9FE1CB;
    color: #065F46;
}
.wtt-seq-next-lbl {
    font-size: 13px;
    color: #6b7280;
    display: block;
    text-align: center;
    margin-bottom: 8px;
}

/* ── Fullscreen overlay ────────────────────────────────────── */
#wtt-fs-overlay {
    position: fixed;
    inset: 0;
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 99999;
    padding: 40px;
}
.wtt-fs-exit {
    position: absolute;
    top: 20px;
    right: 24px;
    color: #475569;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.wtt-fs-exit:hover { color: #fff; background: #1e293b; }

.wtt-fs-stage-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 800px;
}
.wtt-fs-stage-pills .wtt-seq-pill {
    font-size: 14px;
    padding: 5px 14px;
}

.wtt-fs-progress-bar {
    width: 360px;
    height: 4px;
    background: #1e293b;
    border-radius: 2px;
    overflow: hidden;
}
.wtt-fs-progress-fill {
    height: 100%;
    background: #0F6E56;
    border-radius: 2px;
    transition: width .5s;
}

.wtt-fs-display {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wtt-fs-ring {
    position: absolute;
    inset: 0;
    width: 320px;
    height: 320px;
}
.wtt-fs-ring .wtt-ring-bg  { stroke: #1e293b; }
.wtt-fs-ring .wtt-ring-fill { stroke: #1D9E75; }
.wtt-fs-time {
    position: absolute;
    font-size: 72px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -2px;
    line-height: 1;
    margin-top: -16px;
}
.wtt-fs-label {
    position: absolute;
    font-size: 18px;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 52px;
    text-align: center;
    max-width: 280px;
}

.wtt-fs-next {
    font-size: 15px;
    color: #64748b;
}

.wtt-fs-controls {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}
.wtt-fs-btn {
    padding: 10px 28px;
    border-radius: 8px;
    border: 1px solid #334155;
    background: #1e293b;
    color: #94a3b8;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.wtt-fs-btn:hover { background: #334155; color: #f1f5f9; }

/* Danger / warning / done states */
#wtt-fs-overlay.wtt-fs-danger  .wtt-fs-time   { color: #EF4444; animation: wtt-pulse-red 1s ease-in-out infinite; }
#wtt-fs-overlay.wtt-fs-danger  .wtt-fs-ring .wtt-ring-fill { stroke: #EF4444; }
#wtt-fs-overlay.wtt-fs-warning .wtt-fs-ring .wtt-ring-fill { stroke: #F59E0B; }
#wtt-fs-overlay.wtt-fs-done    .wtt-fs-label  { color: #10B981; }
.wtt-toggle-label   { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }

/* ══════════════════════════════════════════════════════════════
   RANDOM WORD
   ══════════════════════════════════════════════════════════════ */

.wtt-word-stage {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

.wtt-word-placeholder {
    text-align: center;
    color: #9ca3af;
}
.wtt-word-placeholder p { margin: 12px 0 0; font-size: 16px; }

.wtt-word-card {
    width: 100%;
    background: linear-gradient(135deg, #0F6E56 0%, #1D9E75 100%);
    border-radius: 20px;
    padding: 40px 36px;
    color: #fff;
    box-shadow: 0 12px 48px rgba(29,158,117,.3);
    animation: wtt-card-in .4s cubic-bezier(.34,1.56,.64,1);
}

@keyframes wtt-card-in {
    from { opacity: 0; transform: translateY(20px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.wtt-word-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.wtt-word-main {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    color: #fff;
}

.wtt-word-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.wtt-word-pos {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    font-style: italic;
}
.wtt-word-level {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255,255,255,.2);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
}

.wtt-word-reveals { display: flex; flex-direction: column; gap: 12px; }

.wtt-reveal-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.25);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
    text-align: left;
}
.wtt-reveal-btn:hover { background: rgba(255,255,255,.25); }
.wtt-reveal-icon { font-size: 18px; }

.wtt-word-def,
.wtt-word-sent {
    padding: 14px 18px;
    background: rgba(0,0,0,.15);
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.95);
    animation: wtt-fade-in .3s ease;
}
.wtt-word-sent { font-style: italic; }

@keyframes wtt-fade-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wtt-word-audio { margin-top: 12px; }
.wtt-audio-play {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background .15s;
}
.wtt-audio-play:hover { background: rgba(255,255,255,.25); }

.wtt-word-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
}

/* Starred words */
.wtt-starred {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}
.wtt-starred-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    color: #92400E !important;
}
.wtt-starred-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.wtt-starred-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #fff;
    border: 1.5px solid #fde68a;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    color: #92400E;
}

/* ── Dark mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .wtt-wrap { color: #E2E8F0; }
    .wtt-title { color: #E2E8F0 !important; }
    .wtt-select, .wtt-text-input, .wtt-time-input, .wtt-textarea {
        background: #1A2332; border-color: #2D3748; color: #E2E8F0;
    }
    .wtt-btn-secondary { background: #1A2332 !important; color: #CBD5E0 !important; border-color: #2D3748 !important; }
    .wtt-preset-btn { background: #1A2332; border-color: #2D3748; color: #E2E8F0; }
    .wtt-wheel-result { background: #1A2332; }
    .wtt-result-word { color: #E2E8F0; }
    .wtt-result-def { color: #CBD5E0; }
    .wtt-timer-time { color: #E2E8F0; }
    .wtt-ring-bg { stroke: #2D3748; }
    .wtt-custom-time { background: #0F172A; }
    .wtt-starred { background: #1A1A00; border-color: #854F0B; }
    .wtt-starred-chip { background: #1A2332; border-color: #854F0B; color: #FBBF24; }
    .wtt-word-placeholder { color: #4B5563; }
    .wtt-mode-toggle { background: #0F172A; }
    .wtt-mode-btn.wtt-mode-active { background: #1A2332; color: #E2E8F0; }
}

/* ── Fullscreen mode (projector) ───────────────────────────── */
.wtt-fullscreen-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    z-index: 9999;
    display: none;
}
.wtt-wrap:hover .wtt-fullscreen-btn { display: block; }

@media (max-width: 600px) {
    .wtt-wheel-layout { grid-template-columns: 1fr; }
    .wtt-word-main { font-size: 40px; }
    .wtt-timer-controls { flex-wrap: wrap; }
}


/* ── Student instructions ────────────────────────────────────── */
.wtt-instructions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.wtt-instruction-step {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4f6f8;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}
.wtt-step-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;
}

/* ── Step progress on card ───────────────────────────────────── */
.wtt-word-steps {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.wtt-word-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.5);
    transition: all .3s;
}
.wtt-word-step.wtt-step-active {
    background: rgba(255,255,255,.25);
    color: #fff;
}
.wtt-word-step.wtt-step-done {
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
    text-decoration: line-through;
}
.wtt-step-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,.3);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}
.wtt-step-active .wtt-step-dot { background: rgba(255,255,255,.6); color: #0F6E56; }
.wtt-step-done  .wtt-step-dot  { background: rgba(255,255,255,.2); }

/* ── Score bar ───────────────────────────────────────────────── */
.wtt-score-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4f6f8;
    border-radius: 12px;
    padding: 14px 20px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.wtt-score-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}
.wtt-score-yes { background: #D1FAE5; color: #065F46; }
.wtt-score-yes:hover { background: #A7F3D0; }
.wtt-score-no  { background: #FEE2E2; color: #991B1B; }
.wtt-score-no:hover  { background: #FECACA; }
.wtt-score-display {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    min-width: 140px;
}
.wtt-score-track {
    height: 8px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    margin-top: 6px;
}
.wtt-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #1D9E75, #10B981);
    border-radius: 99px;
    transition: width .4s ease;
    min-width: 0;
}

@media (max-width: 700px) {
    .wtt-instructions { grid-template-columns: repeat(2, 1fr); }
    .wtt-score-bar { flex-direction: column; align-items: stretch; }
    .wtt-score-btn { width: 100%; }
}

@media (prefers-color-scheme: dark) {
    .wtt-instruction-step { background: #1A2332; color: #CBD5E0; }
    .wtt-score-bar { background: #1A2332; }
    .wtt-score-display { color: #CBD5E0; }
    .wtt-score-track { background: #2D3748; }
    .wtt-score-yes { background: #064E3B; color: #6EE7B7; }
    .wtt-score-no  { background: #7F1D1D; color: #FCA5A5; }
}


/* ── Spin wheel result enhancements ─────────────────────────── */

/* Dark reveal buttons (sit on light grey result panel) */
.wtt-reveal-dark {
    background: #1a1a2e !important;
    border-color: #1a1a2e !important;
    color: #fff !important;
}
.wtt-reveal-dark:hover {
    background: #2d3748 !important;
}

.wtt-result-sent {
    font-style: italic;
    font-size: 15px;
    color: #374151;
    background: #f4f6f8;
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 4px;
    line-height: 1.6;
    animation: wtt-fade-in .3s ease;
}

.wtt-spin-reveals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 4px;
}

.wtt-btn-remove {
    background: #f4f6f8 !important;
    color: #6b7280 !important;
    border: 1.5px solid #e5e7eb !important;
    font-size: 13px !important;
    width: 100%;
    justify-content: center;
}
.wtt-btn-remove:hover {
    background: #e9ecef !important;
    color: #374151 !important;
}

/* Spin score bar sits below the wheel layout */
#spin-score-bar {
    margin-top: 16px;
}

@media (prefers-color-scheme: dark) {
    .wtt-reveal-dark { background: #0F172A !important; border-color: #0F172A !important; }
    .wtt-result-sent { background: #0F172A; color: #CBD5E0; }
    .wtt-btn-remove  { background: #0F172A !important; color: #64748B !important; border-color: #2D3748 !important; }
}


/* ── Keyboard legend ─────────────────────────────────────────── */
.wtt-kb-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    padding: 10px 16px;
    background: #f4f6f8;
    border-radius: 8px;
    font-size: 12px;
    color: #6b7280;
}
.wtt-kb-title {
    font-weight: 600;
    margin-right: 4px;
    color: #374151;
}
.wtt-kb-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 2px 7px;
    background: #fff;
    border: 1.5px solid #d1d5db;
    border-bottom-width: 3px;
    border-radius: 5px;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    box-shadow: 0 1px 0 #d1d5db;
}
.wtt-kb-label {
    color: #6b7280;
    margin-right: 6px;
}

@media (prefers-color-scheme: dark) {
    .wtt-kb-legend { background: #0F172A; }
    .wtt-kb-title  { color: #CBD5E0; }
    .wtt-kb-key    { background: #1A2332; border-color: #2D3748; color: #CBD5E0; box-shadow: 0 1px 0 #2D3748; }
}


/* ══════════════════════════════════════════════════════════════
   VOCABULARY BINGO
   ══════════════════════════════════════════════════════════════ */

.wtt-bingo-teacher-layout {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
    margin-top: 16px;
    align-items: start;
}

/* Caller panel */
.wtt-bingo-caller {
    background: linear-gradient(135deg, #0F6E56, #1D9E75);
    border-radius: 16px;
    padding: 28px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.wtt-bingo-call-number {
    font-size: 13px;
    font-weight: 700;
    opacity: .7;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.wtt-bingo-call-card {
    background: rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 20px;
    min-height: 100px;
}
.wtt-bingo-def-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .7;
    margin-bottom: 8px;
}
.wtt-bingo-def-text {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 500;
    min-height: 56px;
}
.wtt-bingo-reveal-row { margin-top: 12px; }
.wtt-bingo-revealed-word {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 36px;
    font-weight: 900;
    text-align: center;
    padding: 8px 0;
    animation: wtt-pop .35s cubic-bezier(.34,1.56,.64,1);
}

/* Called words log */
.wtt-bingo-called {
    background: #f4f6f8;
    border-radius: 12px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}
.wtt-bingo-called-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6b7280;
    margin-bottom: 10px;
}
.wtt-bingo-called-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wtt-bingo-chip {
    display: inline-block;
    padding: 3px 10px;
    background: #1D9E75;
    color: #fff;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    animation: wtt-fade-in .3s ease;
}
.wtt-bingo-chip.wtt-chip-hidden {
    background: #6b7280;
    opacity: .5;
}

/* Student bingo grid */
.wtt-bingo-grid {
    display: grid;
    grid-template-columns: repeat(var(--bingo-size, 5), 1fr);
    gap: 6px;
    max-width: 500px;
    margin: 0 auto 16px;
}
.wtt-bingo-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    padding: 6px;
    cursor: pointer;
    transition: all .15s;
    user-select: none;
    color: #1a1a2e;
    line-height: 1.2;
}
.wtt-bingo-cell:hover { border-color: #1D9E75; background: #E1F5EE; }
.wtt-bingo-cell.wtt-bingo-marked {
    background: #1D9E75;
    border-color: #0F6E56;
    color: #fff;
    transform: scale(.96);
}
.wtt-bingo-cell.wtt-bingo-free {
    background: #0F6E56;
    border-color: #0F6E56;
    color: #fff;
    font-size: 11px;
    cursor: default;
}

.wtt-bingo-status {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}
.wtt-bingo-win-banner {
    text-align: center;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 32px;
    font-weight: 900;
    color: #1D9E75;
    padding: 20px;
    background: #E1F5EE;
    border-radius: 12px;
    animation: wtt-pop .5s cubic-bezier(.34,1.56,.64,1);
    margin-top: 12px;
}

@media (max-width: 700px) {
    .wtt-bingo-teacher-layout { grid-template-columns: 1fr; }
    .wtt-bingo-cell { font-size: 11px; padding: 4px; }
}


/* ══════════════════════════════════════════════════════════════
   TEAM PICKER
   ══════════════════════════════════════════════════════════════ */

.wtt-teams-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 32px;
    align-items: start;
}

.wtt-teams-input-panel { display: flex; flex-direction: column; gap: 12px; }

.wtt-teams-label {
    font-size: 14px;
    font-weight: 700;
    color: #374151;
}
.wtt-teams-label span { font-weight: 400; color: #6b7280; }

.wtt-teams-textarea { min-height: 180px; }

.wtt-teams-options { display: flex; flex-direction: column; gap: 10px; }

.wtt-teams-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.wtt-teams-num-control {
    display: flex;
    align-items: center;
    gap: 0;
    background: #f4f6f8;
    border-radius: 8px;
    overflow: hidden;
    border: 1.5px solid #e5e7eb;
}
.wtt-num-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    color: #374151;
    transition: background .1s;
}
.wtt-num-btn:hover { background: #e9ecef; }
.wtt-num-display {
    min-width: 36px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #1D9E75;
}

/* Result panel */
.wtt-teams-placeholder {
    text-align: center;
    color: #9ca3af;
    padding: 48px 0;
}
.wtt-teams-placeholder p { margin: 12px 0 0; font-size: 15px; }

.wtt-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.wtt-team-card {
    background: var(--team-color);
    border-radius: 14px;
    padding: 20px 16px;
    color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.wtt-team-name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid rgba(255,255,255,.3);
}
.wtt-team-members { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.wtt-team-member {
    background: rgba(255,255,255,.18);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    animation: wtt-slide-in .4s ease forwards;
}
@keyframes wtt-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
.wtt-team-count {
    font-size: 11px;
    opacity: .7;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.wtt-teams-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

@media (max-width: 700px) {
    .wtt-teams-layout { grid-template-columns: 1fr; }
    .wtt-teams-grid   { grid-template-columns: 1fr 1fr; }
}

@media (prefers-color-scheme: dark) {
    .wtt-bingo-called  { background: #1A2332; }
    .wtt-bingo-cell    { background: #1A2332; border-color: #2D3748; color: #E2E8F0; }
    .wtt-bingo-cell:hover { background: #0D2E22; border-color: #1D9E75; }
    .wtt-bingo-status  { color: #CBD5E0; }
    .wtt-teams-option-row { color: #CBD5E0; }
    .wtt-teams-num-control { background: #0F172A; border-color: #2D3748; }
    .wtt-num-btn       { color: #CBD5E0; }
    .wtt-num-btn:hover { background: #1A2332; }
}

/* Bingo instructions — 2 cols so text isn't too cramped */
.wtt-bingo-instructions {
    grid-template-columns: repeat(2, 1fr) !important;
    margin-bottom: 16px !important;
}
@media (min-width: 600px) {
    .wtt-bingo-instructions {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   HOT SEAT
   ══════════════════════════════════════════════════════════════ */

.wtt-hotseat-stage {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}
.wtt-hotseat-placeholder {
    text-align: center;
    color: #9ca3af;
}
.wtt-hotseat-placeholder p { font-size: 16px; margin-top: 12px; }

.wtt-hotseat-card {
    width: 100%;
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    border-radius: 20px;
    padding: 40px 36px;
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 48px rgba(239,68,68,.35);
    animation: wtt-card-in .4s cubic-bezier(.34,1.56,.64,1);
    transition: transform .2s;
}
.wtt-hotseat-card.hs-correct {
    animation: hs-correct-flash .4s ease !important;
}
@keyframes hs-correct-flash {
    0%   { background: linear-gradient(135deg,#EF4444,#B91C1C); transform: scale(1); }
    50%  { background: linear-gradient(135deg,#1D9E75,#0F6E56); transform: scale(1.03); }
    100% { background: linear-gradient(135deg,#EF4444,#B91C1C); transform: scale(1); }
}
.wtt-hotseat-count {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .7;
    margin-bottom: 16px;
}
.wtt-hotseat-word {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.wtt-hotseat-pos {
    font-size: 16px;
    opacity: .75;
    font-style: italic;
    margin-bottom: 20px;
}
.wtt-hotseat-hints { margin-top: 8px; }
.wtt-hint-btn {
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: 8px;
    color: #fff;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
.wtt-hint-btn:hover { background: rgba(255,255,255,.25); }
.wtt-hint-text {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.6;
    font-style: italic;
}

.wtt-hotseat-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
    background: #f4f6f8;
    border-radius: 12px;
    padding: 16px 20px;
}
.wtt-hotseat-score { font-size: 18px; font-weight: 700; color: #1a1a2e; }
.wtt-hotseat-btns  { display: flex; gap: 12px; }

.wtt-hotseat-start, .wtt-hotseat-done { text-align: center; margin-top: 8px; }
.wtt-hotseat-result {
    font-size: 20px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 16px;
    line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════
   ODD ONE OUT
   ══════════════════════════════════════════════════════════════ */

.wtt-ooo-stage {
    margin: 20px 0;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wtt-ooo-placeholder {
    text-align: center;
    color: #9ca3af;
}
.wtt-ooo-placeholder p { font-size: 16px; margin-top: 12px; }

.wtt-ooo-counter {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 16px;
    text-align: center;
}

.wtt-ooo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .wtt-ooo-grid { grid-template-columns: repeat(4, 1fr); }
}

.wtt-ooo-word-card {
    background: #fff;
    border: 2.5px solid #e5e7eb;
    border-radius: 14px;
    padding: 20px 14px;
    text-align: center;
    cursor: pointer;
    transition: all .2s;
    position: relative;
    user-select: none;
}
.wtt-ooo-word-card:hover { border-color: #1D9E75; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.wtt-ooo-num {
    position: absolute;
    top: 8px;
    left: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
}
.wtt-ooo-word {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 22px;
    font-weight: 900;
    color: #1a1a2e;
    margin-bottom: 8px;
}
.wtt-ooo-def {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* Revealed states */
.wtt-ooo-word-card.wtt-ooo-odd {
    background: #FEF3C7;
    border-color: #F59E0B;
    transform: scale(1.03);
    box-shadow: 0 8px 24px rgba(245,158,11,.3);
}
.wtt-ooo-word-card.wtt-ooo-odd .wtt-ooo-word { color: #92400E; }
.wtt-ooo-word-card.wtt-ooo-same {
    background: #F0FDF4;
    border-color: #86EFAC;
    opacity: .8;
}
.wtt-ooo-word-card.wtt-ooo-selected.wtt-ooo-same {
    background: #FEE2E2;
    border-color: #EF4444;
}
.wtt-ooo-word-card.wtt-ooo-selected.wtt-ooo-odd {
    box-shadow: 0 0 0 4px rgba(245,158,11,.4), 0 8px 24px rgba(245,158,11,.3);
}


.wtt-ooo-topic-badge {
    display: none;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b7280;
    background: rgba(0,0,0,.06);
    border-radius: 4px;
    padding: 2px 8px;
    align-self: center;
}
.wtt-ooo-word-card.wtt-ooo-odd .wtt-ooo-topic-badge {
    background: rgba(245,158,11,.15);
    color: #92400E;
}
.wtt-ooo-word-card.wtt-ooo-same .wtt-ooo-topic-badge {
    background: rgba(22,163,74,.1);
    color: #166534;
}

.wtt-ooo-answer {
    background: #1a1a2e;
    color: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 8px;
    animation: wtt-fade-in .3s ease;
}
.wtt-ooo-answer-text {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
}
.wtt-ooo-connection {
    font-size: 13px;
    opacity: .7;
}

.wtt-ooo-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 8px;
}

@media (prefers-color-scheme: dark) {
    .wtt-hotseat-controls { background: #1A2332; }
    .wtt-hotseat-score { color: #E2E8F0; }
    .wtt-hotseat-result { color: #CBD5E0; }
    .wtt-ooo-word-card { background: #1A2332; border-color: #2D3748; }
    .wtt-ooo-word { color: #E2E8F0; }
    .wtt-ooo-word-card:hover { border-color: #1D9E75; }
    
.wtt-ooo-topic-badge {
    display: none;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b7280;
    background: rgba(0,0,0,.06);
    border-radius: 4px;
    padding: 2px 8px;
    align-self: center;
}
.wtt-ooo-word-card.wtt-ooo-odd .wtt-ooo-topic-badge {
    background: rgba(245,158,11,.15);
    color: #92400E;
}
.wtt-ooo-word-card.wtt-ooo-same .wtt-ooo-topic-badge {
    background: rgba(22,163,74,.1);
    color: #166534;
}

.wtt-ooo-answer { background: #0F172A; }
    .wtt-ooo-word-card.wtt-ooo-same { background: #0D2E22; border-color: #065F46; }
    .wtt-ooo-word-card.wtt-ooo-odd  { background: #451A03; border-color: #B45309; }
}


/* ══════════════════════════════════════════════════════════════
   TEACHER HUB
   ══════════════════════════════════════════════════════════════ */

.wtt-hub-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    font-family: system-ui, -apple-system, sans-serif;
}

.wtt-hub-section { margin-bottom: 40px; }

.wtt-hub-section-header { margin-bottom: 20px; }

.wtt-hub-section-title {
    font-family: 'Fraunces', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #1a1a2e !important;
    margin: 0 0 6px !important;
    letter-spacing: -.02em;
}
.wtt-hub-section-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.wtt-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.wtt-hub-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 14px;
    padding: 18px 16px;
    text-decoration: none !important;
    color: inherit !important;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}
.wtt-hub-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--hub-color);
    border-radius: 4px 0 0 4px;
}
.wtt-hub-card:hover {
    border-color: var(--hub-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.1);
    text-decoration: none !important;
}

.wtt-hub-card-emoji {
    font-size: 36px;
    line-height: 1;
    flex-shrink: 0;
}

.wtt-hub-card-body { flex: 1; min-width: 0; }

.wtt-hub-card-title {
    font-weight: 800;
    font-size: 16px;
    color: #1a1a2e;
    margin-bottom: 4px;
}
.wtt-hub-card-desc {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 6px;
}
.wtt-hub-card-keys {
    font-size: 11px;
    color: #9ca3af;
    font-family: 'DM Mono', monospace;
}

.wtt-hub-card-arrow {
    font-size: 18px;
    color: var(--hub-color);
    flex-shrink: 0;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-4px);
    transition: all .2s;
}
.wtt-hub-card:hover .wtt-hub-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Login prompt */
.wtt-hub-login-prompt {
    background: #f4f6f8;
    border-radius: 16px;
    padding: 36px 28px;
    text-align: center;
    border: 2px dashed #e5e7eb;
}
.wtt-hub-lock { font-size: 40px; margin-bottom: 12px; }
.wtt-hub-login-prompt h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin: 0 0 8px !important;
}
.wtt-hub-login-prompt p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px !important;
}

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

@media (prefers-color-scheme: dark) {
    .wtt-hub-section-title { color: #E2E8F0 !important; }
    .wtt-hub-card { background: #1A2332; border-color: #2D3748; }
    .wtt-hub-card-title { color: #E2E8F0; }
    .wtt-hub-login-prompt { background: #1A2332; border-color: #2D3748; }
    .wtt-hub-login-prompt h3 { color: #E2E8F0 !important; }
}

/* ── Word Sort ────────────────────────────────────────────────────────── */
.ws-pool-label { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 8px; font-weight: 500; }
.ws-words-pool { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: var(--color-background-secondary); border-radius: 12px; min-height: 60px; margin-bottom: 20px; }
.ws-word-tile { background: var(--color-background-primary); border: 1.5px solid var(--color-border-secondary); border-radius: 8px; padding: 8px 16px; font-size: 15px; font-weight: 500; cursor: pointer; -webkit-user-select: none; user-select: none; transition: border-color .15s, background .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.ws-word-tile:hover { border-color: #7F77DD; background: #EEEDFE; }
.ws-word-tile.ws-selected { border-color: #7F77DD; background: #EEEDFE; box-shadow: 0 0 0 3px #AFA9EC; }
.ws-word-tile.ws-dragging { opacity: 0.4; }
.ws-word-tile.ws-correct { border-color: #0F6E56 !important; background: #E1F5EE !important; color: #0F6E56; }
.ws-word-tile.ws-wrong { border-color: #A32D2D !important; background: #FCEBEB !important; color: #A32D2D; }
.ws-buckets-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ws-bucket { background: var(--color-background-primary); border: 1.5px solid var(--color-border-tertiary); border-radius: 12px; overflow: hidden; }
.ws-bucket-label { background: var(--color-background-secondary); padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--color-text-primary); text-transform: capitalize; border-bottom: 0.5px solid var(--color-border-tertiary); }
.ws-bucket-drop { min-height: 100px; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; transition: background .15s; }
.ws-bucket-drop.ws-drag-over { background: #EEEDFE; }

/* ── Score +/- buttons (Word Sort, Definition Auction) — override theme styles ── */
#wtt-word-sort .wtt-score-btn,
#wtt-def-auction .wtt-score-btn {
    padding: 2px 10px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 6px !important;
    background: var(--color-background-secondary) !important;
    color: var(--color-text-primary) !important;
    border: 0.5px solid var(--color-border-secondary) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#wtt-word-sort .wtt-score-btn:hover,
#wtt-def-auction .wtt-score-btn:hover {
    background: var(--color-background-tertiary) !important;
}
#wtt-word-sort .wtt-score-display,
#wtt-def-auction .wtt-score-display {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
}
#wtt-word-sort .wtt-score-val,
#wtt-def-auction .wtt-score-val {
    font-size: 18px !important;
    font-weight: 600 !important;
    min-width: 28px !important;
    text-align: center !important;
}
#wtt-word-sort .wtt-score-sep {
    color: var(--color-text-secondary);
    font-size: 12px;
    padding: 0 4px;
}
#wtt-word-sort .wtt-filters {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}
#wtt-word-sort .wtt-select {
    width: auto !important;
    min-width: 120px !important;
}

/* ── OOO mode toggle ──────────────────────────────────────────────────── */
.ooo-mode-toggle { display:flex; gap:4px; background:var(--color-background-secondary,#f3f4f6); border-radius:10px; padding:3px; }
.ooo-mode-btn { padding:5px 12px; border-radius:8px; border:none; background:transparent; font-size:13px; font-weight:500; cursor:pointer; color:var(--color-text-secondary,#6b7280); transition:background .15s,color .15s; white-space:nowrap; }
.ooo-mode-btn.ooo-mode-active { background:#fff; color:#534AB7; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.ooo-def-hidden { visibility:hidden; height:0; overflow:hidden; margin:0; padding:0; }

/* v2.30.0 — visible keyboard focus in the teacher tools; reduced motion. */
.wtt-wrap :focus-visible, .wtt-hub-wrap :focus-visible { outline: 3px solid #2563EB !important; outline-offset: 2px !important; }
@media (prefers-reduced-motion: reduce) {
    .wtt-wrap *, .wtt-wrap *::before, .wtt-wrap *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── v2.52.0 — grammar games: shared header and settings panel ─────────────
   Gap Fill, Spot the Mistake, Word Formation and Sentence Scramble. Each game sets its accent with
   a modifier class; the game card below stays as it was. The panel stays light in every colour
   scheme, like the cards. */
.wtt-wrap.wgg { --wgg-a:#534AB7; --wgg-a-dark:#3C3489; --wgg-tint:#F7F6FE; --wgg-tint-b:#E4E2FB; --wgg-line:#DCD9F7; --wgg-line-h:#B9B3F2; --wgg-label:#6B6894; --wgg-pill:#EEEDFE; --wgg-ring:rgba(83,74,183,.18); }
.wtt-wrap.wgg-spot     { --wgg-a:#A32D2D; --wgg-a-dark:#7F1D1D; --wgg-tint:#FDF6F6; --wgg-tint-b:#F5DADA; --wgg-line:#EDCACA; --wgg-line-h:#DFA3A3; --wgg-label:#8A5A5A; --wgg-pill:#FCEBEB; --wgg-ring:rgba(163,45,45,.16); }
/* Word Formation and Sentence Scramble keep the purple of their game cards; Spot the Mistake is red like its card. */
.wtt-wrap.wgg-scramble .wgg-toolbar, .wtt-wrap.wgg-scramble .wgg-settings, .wtt-wrap.wgg-scramble > .wtt-instructions { max-width:720px; }   /* its card is 720 px */
.wtt-wrap.wgg .wgg-toolbar, .wtt-wrap.wgg .wgg-settings, .wtt-wrap.wgg > .wtt-instructions { max-width:680px; margin-left:auto; margin-right:auto; }
.wtt-wrap.wgg .wgg-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.wtt-wrap.wgg .wgg-toolbar .wtt-title { margin:0 !important; color:#1f2937 !important; }
.wtt-wrap.wgg .wgg-score { display:inline-flex; align-items:center; gap:8px; background:var(--wgg-pill); color:var(--wgg-a); border-radius:999px; padding:4px 14px 4px 12px; position:relative; }
.wtt-wrap.wgg .wgg-score-label { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.wtt-wrap.wgg .wgg-score-val { font-size:18px; font-weight:700; color:var(--wgg-a) !important; min-width:0; }
.wtt-wrap.wgg .wgg-streak { font-size:13px; color:#B45309; }
.wtt-wrap.wgg .wgg-instr-btn { margin-left:auto; background:#fff !important; color:var(--wgg-a) !important; border:1.5px solid var(--wgg-line) !important; padding:7px 14px !important; border-radius:999px !important; font-size:13px !important; font-weight:600 !important; cursor:pointer !important; line-height:1.2 !important; }
.wtt-wrap.wgg .wgg-instr-btn:hover { background:var(--wgg-pill) !important; }
.wtt-wrap.wgg .wgg-settings { display:flex; flex-wrap:wrap; gap:12px 14px; align-items:flex-end; background:var(--wgg-tint); border:1px solid var(--wgg-tint-b); border-radius:16px; padding:14px 16px; margin-top:4px; margin-bottom:22px; }
.wtt-wrap.wgg .wgg-field { display:flex; flex-direction:column; gap:5px; margin:0; min-width:0; flex:1 1 120px; }
.wtt-wrap.wgg .wgg-field-wide { flex:2 1 200px; }
.wtt-wrap.wgg .wgg-field-narrow { flex:0 1 96px; }
.wtt-wrap.wgg .wgg-field-label { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wgg-label); }
.wtt-wrap.wgg .wgg-select { -webkit-appearance:none; appearance:none; width:100%; min-width:0; height:40px; margin:0; padding:0 34px 0 12px; font:inherit; font-size:14px; line-height:38px; color:#1f2937; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; border:1.5px solid var(--wgg-line); border-radius:10px; cursor:pointer; box-shadow:none; }
.wtt-wrap.wgg .wgg-select:hover { border-color:var(--wgg-line-h); }
.wtt-wrap.wgg .wgg-select:focus { outline:none; border-color:var(--wgg-a); box-shadow:0 0 0 3px var(--wgg-ring); }
.wtt-wrap.wgg .wgg-field-actions { flex:0 0 auto; flex-direction:row; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; }
.wtt-wrap.wgg .wgg-timed { display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 12px; margin:0; font-size:13px; font-weight:600; color:#4B4870; background:#fff; border:1.5px solid var(--wgg-line); border-radius:10px; cursor:pointer; white-space:nowrap; }
.wtt-wrap.wgg .wgg-timed input { margin:0; accent-color:var(--wgg-a); }
.wtt-wrap.wgg .wgg-timed:has(input:checked) { border-color:var(--wgg-a); background:var(--wgg-pill); color:var(--wgg-a); }
.wtt-wrap.wgg .wgg-new-btn { height:40px; padding:0 18px; border:none; border-radius:10px; background:var(--wgg-a); color:#fff; font:inherit; font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .15s,transform .1s; }
.wtt-wrap.wgg .wgg-new-btn:hover { background:var(--wgg-a-dark); }
.wtt-wrap.wgg .wgg-new-btn:active { transform:scale(.97); }
.wtt-wrap.wgg .wgg-new-btn:disabled { opacity:.6; cursor:default; }
.wtt-wrap.wgg .wgg-placeholder { text-align:center; padding:3rem 1rem; color:#6b7280; }
.wtt-wrap.wgg .wgg-placeholder-icon { font-size:2.6rem; margin-bottom:.75rem; }
.wtt-wrap.wgg .wgg-placeholder p { margin:0; font-size:15px; }
@media (max-width:640px) {
    .wtt-wrap.wgg .wgg-settings { padding:12px; }
    .wtt-wrap.wgg .wgg-field { flex:1 1 40%; }
    .wtt-wrap.wgg .wgg-field-wide, .wtt-wrap.wgg .wgg-field-actions { flex:1 1 100%; }
    .wtt-wrap.wgg .wgg-field-actions { justify-content:space-between; margin-left:0; }
    .wtt-wrap.wgg .wgg-new-btn { flex:1; }
}
@media (prefers-color-scheme: dark) {
    .wtt-wrap.wgg .wgg-toolbar .wtt-title { color:#1f2937 !important; }
}

/* ── v2.53.0 — Grammar Snap: the shared header and panel, a ready card, and the game card ───────
   Amber, like its Grammar Hub card. Snap is timed, so it waits on a ready card instead of starting
   by itself. The cards stay light in every colour scheme, like the other grammar games. */
.wtt-wrap.wgg-snap { --wgg-a:#B45309; --wgg-a-dark:#92400E; --wgg-tint:#FFFAF2; --wgg-tint-b:#F6E3C3; --wgg-line:#EFD6AA; --wgg-line-h:#E0B56C; --wgg-label:#8A6537; --wgg-pill:#FEF3E2; --wgg-ring:rgba(180,83,9,.18); }
.wtt-wrap.wgg-snap .snap-toolbar-end { margin-left:auto; display:flex; align-items:center; gap:10px; }
.wtt-wrap.wgg-snap .snap-toolbar-end .wgg-instr-btn { margin-left:0; }
.wtt-wrap.wgg-snap .snap-card, .wtt-wrap.wgg-snap .snap-progress { max-width:680px; margin-left:auto; margin-right:auto; }
.wtt-wrap.wgg-snap .snap-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:16px; padding:24px 28px; margin-bottom:20px; color:#1f2937; box-sizing:border-box; }
/* Ready card */
.wtt-wrap.wgg-snap .snap-ready { text-align:center; padding:32px 28px; }
.wtt-wrap.wgg-snap .snap-ready-icon { font-size:2.4rem; line-height:1; margin-bottom:10px; }
.wtt-wrap.wgg-snap .snap-ready-title { font-size:1.3rem !important; font-weight:700 !important; line-height:1.3 !important; margin:0 0 8px !important; padding:0 !important; border:0 !important; color:#1f2937 !important; text-transform:none !important; letter-spacing:0 !important; }
.wtt-wrap.wgg-snap .snap-ready-desc { font-size:15px; line-height:1.55; color:#4b5563; max-width:520px; margin:0 auto 14px; }
.wtt-wrap.wgg-snap .snap-ready-desc strong { color:#1f2937; }
.wtt-wrap.wgg-snap .snap-exams { display:block; font-size:13px; color:var(--wgg-label); margin-top:4px; }
.wtt-wrap.wgg-snap .snap-ready-rules { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 0 12px; }
.wtt-wrap.wgg-snap .snap-ready-rules span { background:var(--wgg-pill); color:var(--wgg-a); font-size:13px; font-weight:600; border-radius:999px; padding:3px 12px; }
.wtt-wrap.wgg-snap .snap-ready-guru { font-size:14px; color:#4b5563; margin:0 0 12px; }
.wtt-wrap.wgg-snap .snap-go { height:48px; padding:0 30px; margin-top:6px; border:none; border-radius:12px; background:var(--wgg-a); color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; transition:background .15s,transform .1s; }
.wtt-wrap.wgg-snap .snap-go:hover { background:var(--wgg-a-dark); }
.wtt-wrap.wgg-snap .snap-go:active { transform:scale(.97); }
.wtt-wrap.wgg-snap .snap-go:disabled { opacity:.6; cursor:default; }
.wtt-wrap.wgg-snap .snap-start-err { color:#A32D2D; font-size:14px; font-weight:600; margin-top:12px; }
.wtt-wrap.wgg-snap .snap-start-err:empty { display:none; }
/* Progress and answer dots */
.wtt-wrap.wgg-snap .snap-progress { margin-bottom:12px; }
.wtt-wrap.wgg-snap .snap-progress-track { height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.wtt-wrap.wgg-snap .snap-progress-fill { height:100%; width:0; background:var(--wgg-a); transition:width .4s ease; }
.wtt-wrap.wgg-snap .snap-progress-row { display:flex; align-items:center; gap:12px; margin-top:6px; min-height:16px; }
.wtt-wrap.wgg-snap .snap-trail { display:flex; flex-wrap:wrap; gap:4px; }
.wtt-wrap.wgg-snap .snap-dot { width:8px; height:8px; border-radius:50%; }
.wtt-wrap.wgg-snap .snap-dot.is-right { background:#1D9E75; }
.wtt-wrap.wgg-snap .snap-dot.is-wrong { background:#E24B4A; }
.wtt-wrap.wgg-snap .snap-progress-label { font-size:12px; color:#6b7280; white-space:nowrap; margin-left:auto; }
/* Game card */
.wtt-wrap.wgg-snap .snap-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:56px; }
.wtt-wrap.wgg-snap .wll-snap-q-badge.wll-snap-q-badge-normal { background:var(--wgg-pill); color:var(--wgg-a-dark); }
.wtt-wrap.wgg-snap .wll-snap-q-badge.wll-snap-q-badge-guru { background:#EEEDFE; color:#3C3489; }
.wtt-wrap.wgg-snap .snap-timer { position:relative; width:56px; height:56px; flex:none; }
.wtt-wrap.wgg-snap .snap-timer canvas { display:block; }
.wtt-wrap.wgg-snap .snap-timer-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:700; color:#1f2937; }
.wtt-wrap.wgg-snap .snap-sentence { font-size:clamp(1.15rem,3.2vw,1.5rem); line-height:1.6; text-align:center; margin:14px 0 6px; min-height:2.4em; color:#1f2937; }
.wtt-wrap.wgg-snap .snap-hint { text-align:center; font-size:13px; color:#6b7280; margin:0 0 18px; }
.wtt-wrap.wgg-snap .snap-play.wll-snap-card-guru { border-color:#AFA9EC; box-shadow:0 0 0 3px #EEEDFE; }
.wtt-wrap.wgg-snap .snap-btns { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wtt-wrap.wgg-snap .snap-btn { display:flex; align-items:center; justify-content:center; gap:10px; height:60px; margin:0; padding:0 12px; border:2px solid; border-radius:12px; font:inherit; font-size:17px; font-weight:700; line-height:1.2; cursor:pointer; transition:transform .1s,opacity .15s,background .15s,border-color .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.wtt-wrap.wgg-snap .snap-btn-correct { background:#E1F5EE; border-color:#9FD9C3; color:#0F6E56; }
.wtt-wrap.wgg-snap .snap-btn-correct:hover:not(:disabled) { background:#CBEFE1; border-color:#0F6E56; }
.wtt-wrap.wgg-snap .snap-btn-wrong { background:#FCEBEB; border-color:#F0B4B4; color:#A32D2D; }
.wtt-wrap.wgg-snap .snap-btn-wrong:hover:not(:disabled) { background:#F9D9D9; border-color:#A32D2D; }
.wtt-wrap.wgg-snap .snap-btn:active { transform:scale(.97); }
.wtt-wrap.wgg-snap .snap-btn:disabled { cursor:default; }
.wtt-wrap.wgg-snap .snap-btn.snap-unchosen { opacity:.35; }
.wtt-wrap.wgg-snap .snap-btn-key { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; border:1px solid currentColor; background:rgba(255,255,255,.7); font-size:12px; font-weight:700; }
.wtt-wrap.wgg-snap .snap-feedback { margin-top:18px; }
.wtt-wrap.wgg-snap .snap-next-row { text-align:center; margin-top:14px; }
.wtt-wrap.wgg-snap .snap-next { height:44px; padding:0 22px; border:none; border-radius:10px; background:var(--wgg-a); color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wtt-wrap.wgg-snap .snap-next:hover { background:var(--wgg-a-dark); }
/* End card */
.wtt-wrap.wgg-snap .snap-end { text-align:center; padding:32px 28px; }
.wtt-wrap.wgg-snap .snap-end-score-block { display:flex; align-items:baseline; justify-content:center; gap:6px; margin-bottom:14px; }
.wtt-wrap.wgg-snap .snap-end-score { font-size:52px; font-weight:800; line-height:1; color:var(--wgg-a); }
.wtt-wrap.wgg-snap .snap-end-total { font-size:22px; color:#6b7280; }
.wtt-wrap.wgg-snap .snap-end-breakdown { max-width:360px; margin:0 auto 20px; padding:4px 16px; text-align:left; border:1px solid #eef0f3; border-radius:12px; }
.wtt-wrap.wgg-snap .snap-end-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.wtt-wrap.wgg-snap .snap-outline-btn { height:48px; padding:0 22px; margin-top:6px; border:1.5px solid var(--wgg-line); border-radius:12px; background:#fff; color:var(--wgg-a); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wtt-wrap.wgg-snap .snap-outline-btn:hover { background:var(--wgg-pill); }
@media (max-width:640px) {
    .wtt-wrap.wgg-snap .snap-card { padding:18px 16px; }
    .wtt-wrap.wgg-snap .snap-ready, .wtt-wrap.wgg-snap .snap-end { padding:24px 16px; }
    .wtt-wrap.wgg-snap .snap-btn { height:56px; font-size:16px; }
    .wtt-wrap.wgg-snap .snap-btn-key { display:none; }
    .wtt-wrap.wgg-snap .snap-end-score { font-size:40px; }
}
.wtt-wrap.wgg-snap, .wtt-wrap.wgg-snap *, .wtt-wrap.wgg-snap *::before, .wtt-wrap.wgg-snap *::after { box-sizing:border-box; }
.wtt-wrap.wgg-snap .wgg-settings .snap-actions { flex:1 1 100%; }
.wtt-wrap.wgg-snap .snap-actions .wgg-new-btn { margin-left:auto; }
@media (max-width:640px) {
    .wtt-wrap.wgg-snap .wgg-settings .snap-actions { flex-wrap:wrap; }
    .wtt-wrap.wgg-snap .snap-actions .wgg-timed { flex:1 1 0; justify-content:center; }
    .wtt-wrap.wgg-snap .snap-actions .wgg-new-btn { flex:1 1 100%; margin-left:0; }
}

/* ── v2.54.0 — Daily Grammar: five questions a day. ESLe blue, like the Daily Word button on the
   dashboard. Light in every colour scheme, like the other grammar games. ─────────────────────── */
.wtt-wrap.wgg-daily { --wgg-a:#1F4E82; --wgg-a-dark:#173B63; --wgg-tint:#F4F8FC; --wgg-tint-b:#DCE7F4; --wgg-line:#C9D9EE; --wgg-line-h:#9DB8DD; --wgg-label:#4F6A8C; --wgg-pill:#E7EFF9; --wgg-ring:rgba(31,78,130,.18); }
.wtt-wrap.wgg-daily, .wtt-wrap.wgg-daily *, .wtt-wrap.wgg-daily *::before, .wtt-wrap.wgg-daily *::after { box-sizing:border-box; }
.wtt-wrap.wgg-daily .dg-date-field { flex:1 1 160px; }
.wtt-wrap.wgg-daily .dg-date { display:flex; align-items:center; height:40px; font-size:15px; font-weight:600; color:#1f2937; }
.wtt-wrap.wgg-daily .dg-progress, .wtt-wrap.wgg-daily .dg-card { max-width:680px; margin-left:auto; margin-right:auto; }
.wtt-wrap.wgg-daily .dg-progress { display:flex; align-items:center; gap:6px; margin-bottom:12px; min-height:16px; }
.wtt-wrap.wgg-daily .dg-dot { width:12px; height:12px; border-radius:50%; background:#e5e7eb; }
.wtt-wrap.wgg-daily .dg-dot.is-now { background:#fff; box-shadow:inset 0 0 0 2px var(--wgg-a); }
.wtt-wrap.wgg-daily .dg-dot.is-right { background:#1D9E75; }
.wtt-wrap.wgg-daily .dg-dot.is-wrong { background:#E24B4A; }
.wtt-wrap.wgg-daily .dg-progress-label { margin-left:auto; font-size:12px; color:#6b7280; white-space:nowrap; }
.wtt-wrap.wgg-daily .dg-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:16px; padding:24px 28px; margin-bottom:20px; color:#1f2937; }
.wtt-wrap.wgg-daily .dg-status { text-align:center; color:#6b7280; font-size:15px; margin:24px 0; }
.wtt-wrap.wgg-daily .dg-kind { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px; }
.wtt-wrap.wgg-daily .dg-chip { background:var(--wgg-pill); color:var(--wgg-a); font-size:12px; font-weight:700; border-radius:999px; padding:3px 12px; }
.wtt-wrap.wgg-daily .dg-gp { font-size:12px; color:#6b7280; }
.wtt-wrap.wgg-daily .dg-ask { font-size:14px; color:#4b5563; margin:0 0 12px; }
.wtt-wrap.wgg-daily .dg-prompt { display:inline-block; font-size:15px; font-weight:800; letter-spacing:.06em; color:var(--wgg-a); background:var(--wgg-pill); border-radius:8px; padding:4px 12px; margin-bottom:10px; }
.wtt-wrap.wgg-daily .dg-sentence { font-size:clamp(1.1rem,3vw,1.4rem); line-height:1.7; text-align:center; margin:8px 0 20px; }
.wtt-wrap.wgg-daily .dg-gap { display:inline-block; min-width:80px; padding:0 10px; border-radius:6px; background:var(--wgg-pill); color:var(--wgg-a); font-weight:700; }
.wtt-wrap.wgg-daily .dg-wrong-word { background:#FCEBEB; color:#A32D2D; border-radius:5px; padding:0 6px; font-weight:700; }
.wtt-wrap.wgg-daily .dg-opts { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wtt-wrap.wgg-daily .dg-opt { display:flex; align-items:center; gap:10px; min-height:52px; margin:0; padding:10px 14px; text-align:left; background:#f8f9fa; border:2px solid #e5e7eb; border-radius:12px; font:inherit; font-size:16px; font-weight:500; color:#1f2937; cursor:pointer; transition:border-color .15s,background .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.wtt-wrap.wgg-daily .dg-opt:hover:not(:disabled) { border-color:var(--wgg-a); background:var(--wgg-pill); }
.wtt-wrap.wgg-daily .dg-opt:disabled { cursor:default; }
.wtt-wrap.wgg-daily .dg-opt.is-right { border-color:#0F6E56; background:#E1F5EE; color:#0F6E56; }
.wtt-wrap.wgg-daily .dg-opt.is-wrong { border-color:#A32D2D; background:#FCEBEB; color:#A32D2D; }
.wtt-wrap.wgg-daily .dg-key { display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid #d1d5db; font-size:12px; font-weight:700; color:#6b7280; }
.wtt-wrap.wgg-daily .dg-target { display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:56px; padding:10px; border:2px dashed var(--wgg-line); border-radius:12px; background:var(--wgg-tint); margin:4px 0 14px; }
.wtt-wrap.wgg-daily .dg-target.is-right { border-style:solid; border-color:#0F6E56; background:#E1F5EE; }
.wtt-wrap.wgg-daily .dg-target.is-wrong { border-style:solid; border-color:#A32D2D; background:#FCEBEB; }
.wtt-wrap.wgg-daily .dg-target-hint { font-size:13px; color:#9ca3af; }
.wtt-wrap.wgg-daily .dg-bank { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:14px; }
.wtt-wrap.wgg-daily .dg-tile, .wtt-wrap.wgg-daily .dg-placed { margin:0; padding:8px 14px; border-radius:10px; border:2px solid #e5e7eb; background:#fff; font:inherit; font-size:16px; font-weight:500; color:#1f2937; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.wtt-wrap.wgg-daily .dg-tile:hover:not(:disabled) { border-color:var(--wgg-a); background:var(--wgg-pill); }
.wtt-wrap.wgg-daily .dg-placed { border-color:var(--wgg-line-h); background:#fff; }
.wtt-wrap.wgg-daily .dg-tile.is-used { visibility:hidden; }
.wtt-wrap.wgg-daily .dg-tile:disabled, .wtt-wrap.wgg-daily .dg-placed:disabled { cursor:default; }
.wtt-wrap.wgg-daily .dg-order-actions { display:flex; justify-content:center; gap:10px; }
.wtt-wrap.wgg-daily .dg-btn { height:44px; padding:0 22px; margin:0; border:none; border-radius:10px; background:var(--wgg-a); color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wtt-wrap.wgg-daily .dg-btn:hover:not(:disabled) { background:var(--wgg-a-dark); }
.wtt-wrap.wgg-daily .dg-btn:disabled { opacity:.5; cursor:default; }
.wtt-wrap.wgg-daily .dg-btn-ghost { height:44px; padding:0 18px; margin:0; border:1.5px solid var(--wgg-line); border-radius:10px; background:#fff; color:var(--wgg-a); font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wtt-wrap.wgg-daily .dg-btn-ghost:hover:not(:disabled) { background:var(--wgg-pill); }
.wtt-wrap.wgg-daily .dg-feedback:empty { display:none; }
.wtt-wrap.wgg-daily .dg-feedback { margin-top:16px; padding:14px 16px; border-radius:12px; background:#f8f9fa; border-left:4px solid var(--wgg-a); }
.wtt-wrap.wgg-daily .dg-verdict { font-size:16px; font-weight:800; margin:0 0 4px; }
.wtt-wrap.wgg-daily .dg-verdict.is-right { color:#0F6E56; }
.wtt-wrap.wgg-daily .dg-verdict.is-wrong { color:#A32D2D; }
.wtt-wrap.wgg-daily .dg-show { font-size:15px; margin:0 0 6px; color:#1f2937; }
.wtt-wrap.wgg-daily .dg-expl { font-size:14px; line-height:1.55; margin:0; color:#374151; }
.wtt-wrap.wgg-daily .dg-error { margin:0; color:#A32D2D; font-weight:600; }
.wtt-wrap.wgg-daily .dg-next-row { text-align:center; margin-top:14px; }
.wtt-wrap.wgg-daily .dg-complete { text-align:center; padding:32px 28px; }
.wtt-wrap.wgg-daily .dg-end-score { font-size:22px; color:#6b7280; margin-bottom:12px; }
.wtt-wrap.wgg-daily .dg-end-score span { font-size:52px; font-weight:800; line-height:1; color:var(--wgg-a); }
.wtt-wrap.wgg-daily .dg-row { display:flex; justify-content:center; gap:8px; margin-bottom:12px; }
.wtt-wrap.wgg-daily .dg-sq { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:8px; color:#fff; font-size:18px; font-weight:800; }
.wtt-wrap.wgg-daily .dg-sq.is-right { background:#1D9E75; }
.wtt-wrap.wgg-daily .dg-sq.is-wrong { background:#E24B4A; }
.wtt-wrap.wgg-daily .dg-end-msg { font-size:16px; font-weight:600; margin:0 0 8px; }
.wtt-wrap.wgg-daily .dg-xp { display:inline-block; font-size:13px; font-weight:700; color:#0F6E56; background:#D1FAE5; border-radius:999px; padding:3px 12px; margin:0 0 12px; }
.wtt-wrap.wgg-daily .dg-note { font-size:14px; color:#6b7280; margin:0 0 12px; }
.wtt-wrap.wgg-daily .dg-end-btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:8px 0 6px; }
.wtt-wrap.wgg-daily .dg-copied { font-size:13px; color:#0F6E56; margin:6px 0 0; }
.wtt-wrap.wgg-daily .dg-copied:empty { display:none; }
.wtt-wrap.wgg-daily .dg-next-day { font-size:13px; color:#6b7280; margin:6px 0 0; }
@media (max-width:640px) {
    .wtt-wrap.wgg-daily .dg-card { padding:18px 16px; }
    .wtt-wrap.wgg-daily .dg-complete { padding:24px 16px; }
    .wtt-wrap.wgg-daily .dg-opts { grid-template-columns:1fr; }
    .wtt-wrap.wgg-daily .dg-date-field { flex:1 1 100%; }
    .wtt-wrap.wgg-daily .dg-end-score span { font-size:40px; }
}

/* v2.54.1 — some themes capitalise every button ("How To Play", every word tile): the grammar games keep the words as written. */
.wtt-wrap.wgg button, .wtt-wrap.wgg .wgg-select, .wtt-wrap.wgg .wgg-timed { text-transform:none !important; }

/* ── v2.55.0 — Adjective or Adverb?: teal. ───────────────────────────────────────────────── */
.wtt-wrap.wgg-adjadv { --wgg-a:#0F766E; --wgg-a-dark:#115E59; --wgg-tint:#F2FAF9; --wgg-tint-b:#CDEBE7; --wgg-line:#B6E0DA; --wgg-line-h:#7CC7BC; --wgg-label:#4D7C76; --wgg-pill:#E3F4F1; --wgg-ring:rgba(15,118,110,.18); }
.wtt-wrap.wgg-adjadv, .wtt-wrap.wgg-adjadv *, .wtt-wrap.wgg-adjadv *::before, .wtt-wrap.wgg-adjadv *::after { box-sizing:border-box; }
.wtt-wrap.wgg-adjadv .aa-progress, .wtt-wrap.wgg-adjadv .aa-card { max-width:680px; margin-left:auto; margin-right:auto; }
.wtt-wrap.wgg-adjadv .aa-progress { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.wtt-wrap.wgg-adjadv .aa-progress-track { flex:1; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.wtt-wrap.wgg-adjadv .aa-progress-fill { height:100%; width:0; background:var(--wgg-a); transition:width .4s ease; }
.wtt-wrap.wgg-adjadv .aa-progress-label { font-size:12px; color:#6b7280; white-space:nowrap; }
.wtt-wrap.wgg-adjadv .aa-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:16px; padding:24px 28px; margin-bottom:20px; color:#1f2937; }
.wtt-wrap.wgg-adjadv .aa-status { text-align:center; color:#6b7280; font-size:15px; margin:24px 0; }
.wtt-wrap.wgg-adjadv .aa-ask { font-size:14px; color:#4b5563; margin:0 0 8px; }
.wtt-wrap.wgg-adjadv .aa-sentence { font-size:clamp(1.15rem,3.2vw,1.45rem); line-height:1.7; text-align:center; margin:10px 0 22px; }
.wtt-wrap.wgg-adjadv .aa-gap { display:inline-block; min-width:90px; padding:0 10px; border-radius:6px; background:var(--wgg-pill); color:var(--wgg-a); font-weight:700; }
.wtt-wrap.wgg-adjadv .aa-opts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wtt-wrap.wgg-adjadv .aa-opt { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:72px; margin:0; padding:10px 14px; border:2px solid #e5e7eb; border-radius:14px; background:#f8f9fa; color:#1f2937; font:inherit; cursor:pointer; transition:border-color .15s,background .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.wtt-wrap.wgg-adjadv .aa-opt:hover:not(:disabled) { border-color:var(--wgg-a); background:var(--wgg-pill); }
.wtt-wrap.wgg-adjadv .aa-opt:disabled { cursor:default; }
.wtt-wrap.wgg-adjadv .aa-opt.is-right { border-color:#0F6E56; background:#E1F5EE; color:#0F6E56; }
.wtt-wrap.wgg-adjadv .aa-opt.is-wrong { border-color:#A32D2D; background:#FCEBEB; color:#A32D2D; }
.wtt-wrap.wgg-adjadv .aa-word { font-size:20px; font-weight:700; }
.wtt-wrap.wgg-adjadv .aa-pos { font-size:12px; color:#6b7280; letter-spacing:.04em; }
.wtt-wrap.wgg-adjadv .aa-key { position:absolute; top:8px; left:10px; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid #d1d5db; font-size:12px; font-weight:700; color:#6b7280; }
.wtt-wrap.wgg-adjadv .aa-feedback:empty { display:none; }
.wtt-wrap.wgg-adjadv .aa-feedback { margin-top:16px; padding:14px 16px; border-radius:12px; background:#f8f9fa; border-left:4px solid var(--wgg-a); }
.wtt-wrap.wgg-adjadv .aa-verdict { font-size:16px; font-weight:800; margin:0 0 4px; }
.wtt-wrap.wgg-adjadv .aa-verdict.is-right { color:#0F6E56; }
.wtt-wrap.wgg-adjadv .aa-verdict.is-wrong { color:#A32D2D; }
.wtt-wrap.wgg-adjadv .aa-full { font-size:15px; margin:0 0 6px; }
.wtt-wrap.wgg-adjadv .aa-rule { font-size:14px; color:#374151; margin:0; }
.wtt-wrap.wgg-adjadv .aa-next-row { text-align:center; margin-top:14px; }
.wtt-wrap.wgg-adjadv .aa-btn { height:44px; padding:0 22px; margin:0; border:none; border-radius:10px; background:var(--wgg-a); color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wtt-wrap.wgg-adjadv .aa-btn:hover { background:var(--wgg-a-dark); }
.wtt-wrap.wgg-adjadv .aa-end { text-align:center; padding:32px 28px; }
.wtt-wrap.wgg-adjadv .aa-end-score { font-size:22px; color:#6b7280; margin-bottom:10px; }
.wtt-wrap.wgg-adjadv .aa-end-score span { font-size:52px; font-weight:800; line-height:1; color:var(--wgg-a); }
.wtt-wrap.wgg-adjadv .aa-end-msg { font-size:16px; font-weight:600; margin:0 0 6px; }
.wtt-wrap.wgg-adjadv .aa-best { font-size:14px; color:#4b5563; margin:0 0 8px; }
.wtt-wrap.wgg-adjadv .aa-xp { display:inline-block; font-size:13px; font-weight:700; color:#0F6E56; background:#D1FAE5; border-radius:999px; padding:3px 12px; margin:0 0 12px; }
.wtt-wrap.wgg-adjadv .aa-missed { text-align:left; max-width:560px; margin:8px auto 16px; padding:12px 16px; border:1px solid #eef0f3; border-radius:12px; }
.wtt-wrap.wgg-adjadv .aa-missed-h { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wgg-label); margin:0 0 6px; }
.wtt-wrap.wgg-adjadv .aa-missed ul { margin:0; padding-left:18px; }
.wtt-wrap.wgg-adjadv .aa-missed li { font-size:14px; line-height:1.6; margin:2px 0; }
.wtt-wrap.wgg-adjadv .aa-kind { font-size:12px; color:#6b7280; }
.wtt-wrap.wgg-adjadv .aa-end-btns { display:flex; justify-content:center; gap:10px; }
@media (max-width:640px) {
    .wtt-wrap.wgg-adjadv .aa-card { padding:18px 16px; }
    .wtt-wrap.wgg-adjadv .aa-end { padding:24px 16px; }
    .wtt-wrap.wgg-adjadv .aa-word { font-size:18px; }
    .wtt-wrap.wgg-adjadv .aa-key { display:none; }
}
/* ── v2.57.0 — Collocations: burnt orange. ───────────────────────────────────────────────── */
.wtt-wrap.wgg-colloc { --wgg-a:#B4470F; --wgg-a-dark:#8F380B; --wgg-tint:#FDF6F1; --wgg-tint-b:#F5D9C6; --wgg-line:#EFC9AE; --wgg-line-h:#DE9B6E; --wgg-label:#8A4B24; --wgg-pill:#FBEADF; --wgg-ring:rgba(180,71,15,.18); }
.wtt-wrap.wgg-colloc, .wtt-wrap.wgg-colloc *, .wtt-wrap.wgg-colloc *::before, .wtt-wrap.wgg-colloc *::after { box-sizing:border-box; }
.wtt-wrap.wgg-colloc .co-progress, .wtt-wrap.wgg-colloc .co-card { max-width:680px; margin-left:auto; margin-right:auto; }
.wtt-wrap.wgg-colloc .co-progress { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.wtt-wrap.wgg-colloc .co-progress-track { flex:1; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; }
.wtt-wrap.wgg-colloc .co-progress-fill { height:100%; width:0; background:var(--wgg-a); transition:width .4s ease; }
.wtt-wrap.wgg-colloc .co-progress-label { font-size:12px; color:#6b7280; white-space:nowrap; }
.wtt-wrap.wgg-colloc .co-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:16px; padding:24px 28px; margin-bottom:20px; color:#1f2937; }
.wtt-wrap.wgg-colloc .co-status { text-align:center; color:#6b7280; font-size:15px; margin:24px 0; }
.wtt-wrap.wgg-colloc .co-ask { font-size:14px; color:#4b5563; margin:0 0 8px; }
.wtt-wrap.wgg-colloc .co-sentence { font-size:clamp(1.15rem,3.2vw,1.45rem); line-height:1.7; text-align:center; margin:10px 0 22px; }
.wtt-wrap.wgg-colloc .co-gap { display:inline-block; min-width:90px; padding:0 10px; border-radius:6px; background:var(--wgg-pill); color:var(--wgg-a); font-weight:700; }
.wtt-wrap.wgg-colloc .co-opts { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.wtt-wrap.wgg-colloc .co-opt { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:72px; margin:0; padding:10px 14px; border:2px solid #e5e7eb; border-radius:14px; background:#f8f9fa; color:#1f2937; font:inherit; cursor:pointer; transition:border-color .15s,background .15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.wtt-wrap.wgg-colloc .co-opt:hover:not(:disabled) { border-color:var(--wgg-a); background:var(--wgg-pill); }
.wtt-wrap.wgg-colloc .co-opt:disabled { cursor:default; }
.wtt-wrap.wgg-colloc .co-opt.is-right { border-color:#0F6E56; background:#E1F5EE; color:#0F6E56; }
.wtt-wrap.wgg-colloc .co-opt.is-wrong { border-color:#A32D2D; background:#FCEBEB; color:#A32D2D; }
.wtt-wrap.wgg-colloc .co-word { font-size:20px; font-weight:700; }
.wtt-wrap.wgg-colloc .co-pos { font-size:12px; color:#6b7280; letter-spacing:.04em; }
.wtt-wrap.wgg-colloc .co-key { position:absolute; top:8px; left:10px; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:#fff; border:1px solid #d1d5db; font-size:12px; font-weight:700; color:#6b7280; }
.wtt-wrap.wgg-colloc .co-feedback:empty { display:none; }
.wtt-wrap.wgg-colloc .co-feedback { margin-top:16px; padding:14px 16px; border-radius:12px; background:#f8f9fa; border-left:4px solid var(--wgg-a); }
.wtt-wrap.wgg-colloc .co-verdict { font-size:16px; font-weight:800; margin:0 0 4px; }
.wtt-wrap.wgg-colloc .co-verdict.is-right { color:#0F6E56; }
.wtt-wrap.wgg-colloc .co-verdict.is-wrong { color:#A32D2D; }
.wtt-wrap.wgg-colloc .co-full { font-size:15px; margin:0 0 6px; }
.wtt-wrap.wgg-colloc .co-rule { font-size:14px; color:#374151; margin:0; }
.wtt-wrap.wgg-colloc .co-next-row { text-align:center; margin-top:14px; }
.wtt-wrap.wgg-colloc .co-btn { height:44px; padding:0 22px; margin:0; border:none; border-radius:10px; background:var(--wgg-a); color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.wtt-wrap.wgg-colloc .co-btn:hover { background:var(--wgg-a-dark); }
.wtt-wrap.wgg-colloc .co-end { text-align:center; padding:32px 28px; }
.wtt-wrap.wgg-colloc .co-end-score { font-size:22px; color:#6b7280; margin-bottom:10px; }
.wtt-wrap.wgg-colloc .co-end-score span { font-size:52px; font-weight:800; line-height:1; color:var(--wgg-a); }
.wtt-wrap.wgg-colloc .co-end-msg { font-size:16px; font-weight:600; margin:0 0 6px; }
.wtt-wrap.wgg-colloc .co-best { font-size:14px; color:#4b5563; margin:0 0 8px; }
.wtt-wrap.wgg-colloc .co-xp { display:inline-block; font-size:13px; font-weight:700; color:#0F6E56; background:#D1FAE5; border-radius:999px; padding:3px 12px; margin:0 0 12px; }
.wtt-wrap.wgg-colloc .co-missed { text-align:left; max-width:560px; margin:8px auto 16px; padding:12px 16px; border:1px solid #eef0f3; border-radius:12px; }
.wtt-wrap.wgg-colloc .co-missed-h { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--wgg-label); margin:0 0 6px; }
.wtt-wrap.wgg-colloc .co-missed ul { margin:0; padding-left:18px; }
.wtt-wrap.wgg-colloc .co-missed li { font-size:14px; line-height:1.6; margin:2px 0; }
.wtt-wrap.wgg-colloc .co-kind { font-size:12px; color:#6b7280; }
.wtt-wrap.wgg-colloc .co-end-btns { display:flex; justify-content:center; gap:10px; }
.wtt-wrap.wgg-colloc .co-opt { min-height:60px; }
.wtt-wrap.wgg-colloc .co-type-row { display:flex; gap:10px; max-width:420px; margin:0 auto; }
.wtt-wrap.wgg-colloc .co-input { flex:1; min-width:0; height:46px; margin:0; padding:0 14px; border:2px solid #d1d5db; border-radius:10px; background:#fff; color:#1f2937; font:inherit; font-size:18px; }
.wtt-wrap.wgg-colloc .co-input:focus { outline:none; border-color:var(--wgg-a); box-shadow:0 0 0 3px var(--wgg-ring); }
.wtt-wrap.wgg-colloc .co-input.is-right { border-color:#0F6E56; background:#E1F5EE; color:#0F6E56; }
.wtt-wrap.wgg-colloc .co-input.is-wrong { border-color:#A32D2D; background:#FCEBEB; color:#A32D2D; }
.wtt-wrap.wgg-colloc .co-btn:disabled { opacity:.5; cursor:default; }
.wtt-wrap.wgg-colloc .co-note { font-size:14px; color:#374151; margin:0; }
.wtt-wrap.wgg-colloc .co-also { font-size:13px; color:#4b5563; margin:6px 0 0; }
.wtt-wrap.wgg-colloc .co-missed-key { color:var(--wgg-a); }
@media (max-width:640px) {
    .wtt-wrap.wgg-colloc .co-card { padding:18px 16px; }
    .wtt-wrap.wgg-colloc .co-end { padding:24px 16px; }
    .wtt-wrap.wgg-colloc .co-word { font-size:18px; }
    .wtt-wrap.wgg-colloc .co-key { display:none; }
}