/* ═══════════════════════════════════════════════════════════════
   WORD ORDER — "Curious Play" Edition
   Palette: #fff8f3 bg · #8f4e00 primary · #fd9937 primary-container
   Font: Plus Jakarta Sans
   ═══════════════════════════════════════════════════════════════ */

/* ── Page layout ───────────────────────────────────────── */
.wo-page {
    min-height: 100vh;
    background: var(--bg, #fff8f3);
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 3rem;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
}

/* ── Header ────────────────────────────────────────────── */
.wo-header {
    width: 100%;
    max-width: 760px;
    text-align: center;
    margin-bottom: 1.5rem;
}

.wo-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
}

.wo-title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--ink, #241a08) !important;
    -webkit-text-fill-color: var(--ink, #241a08) !important;
    margin: 0;
}

.wo-subtitle {
    color: var(--ink-muted, #887364);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.2rem 0 0.8rem;
}

.wo-badges { display: flex; gap: 0.5rem; }

.wo-badge {
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.25rem 1rem;
}

.wo-badge-score {
    background: var(--yellow-light, #fff2e1);
    color: var(--yellow-dark, #AE5600);
    -webkit-text-fill-color: var(--yellow-dark, #AE5600);
    border: 1.5px solid rgba(253, 153, 55, .4);
}

.wo-badge-streak {
    background: rgba(186, 26, 26, .12);
    color: #ba1a1a;
    -webkit-text-fill-color: #ba1a1a;
    border: 1.5px solid rgba(186, 26, 26, .3);
}

/* ── Progress bar ──────────────────────────────────────── */
.wo-progress-wrap {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    max-width: 500px;
    margin: 0 auto;
}

.wo-progress-bar {
    flex: 1;
    height: 10px;
    background: var(--primary-light, #ffebcf);
    border-radius: 999px;
    overflow: hidden;
}

.wo-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-container, #fd9937);
    border-radius: 999px;
    transition: width 0.5s ease;
}

.wo-progress-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-muted, #887364);
    white-space: nowrap;
}

/* ── Main card ─────────────────────────────────────────── */
.wo-main {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* ── Emoji banner ──────────────────────────────────────── */
.wo-emoji-banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    background: #ffffff;
    border: 1.5px solid rgba(143, 78, 0, .15);
    border-radius: 32px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(143,78,0,.08));
}

.wo-emoji {
    font-size: 3.2rem;
    animation: woEmojiIn 0.45s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes woEmojiIn {
    from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    to   { transform: scale(1) rotate(0);        opacity: 1; }
}

/* ── Built sentence area ───────────────────────────────── */
.wo-built-area {
    background: #ffffff;
    border: 2.5px dashed rgba(143, 78, 0, .4);
    border-radius: 28px;
    padding: 1.2rem 1.5rem;
    min-height: 90px;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(143,78,0,.08));
    transition: border-color .2s, background .2s;
}

.wo-built-area:focus-within {
    border-color: var(--primary, #8f4e00);
    background: var(--primary-light, #ffebcf);
}

.wo-built-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-muted, #887364);
    margin-bottom: 0.5rem;
}

.wo-built-sentence {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 2.5rem;
    align-items: center;
}

.wo-placeholder {
    color: var(--ink-muted, #887364);
    font-style: italic;
    font-size: 0.95rem;
    opacity: 0.7;
}

.wo-built-word {
    background: var(--primary-light, #ffebcf);
    border: 1.5px solid rgba(143, 78, 0, .4);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-dark, #693700) !important;
    -webkit-text-fill-color: var(--primary-dark, #693700) !important;
    cursor: pointer;
    transition: all 0.15s;
}

.wo-built-word:hover {
    background: rgba(186, 26, 26, .12);
    border-color: #ba1a1a;
    color: #ba1a1a !important;
    -webkit-text-fill-color: #ba1a1a !important;
    text-decoration: line-through;
}

/* ── Feedback ──────────────────────────────────────────── */
.wo-feedback {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    min-height: 1.5rem;
    transition: all 0.2s;
}

.wo-correct {
    color: var(--primary, #8f4e00) !important;
    -webkit-text-fill-color: var(--primary, #8f4e00) !important;
    animation: woFeedIn 0.3s ease;
}

.wo-wrong {
    color: #ba1a1a !important;
    -webkit-text-fill-color: #ba1a1a !important;
    animation: woFeedIn 0.3s ease;
}

@keyframes woFeedIn {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Word bank ─────────────────────────────────────────── */
.wo-word-bank {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    background: #ffffff;
    border: 1.5px solid rgba(143, 78, 0, .12);
    border-radius: 28px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(143,78,0,.08));
}

.wo-word-btn {
    background: var(--yellow-light, #fff2e1);
    border: 1.5px solid rgba(253, 153, 55, .5);
    border-radius: 999px;
    padding: 0.5rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink, #241a08) !important;
    -webkit-text-fill-color: var(--ink, #241a08) !important;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(.34, 1.56, .64, 1);
    box-shadow: 0 2px 8px rgba(253, 153, 55, .20);
}

.wo-word-btn:hover:not(:disabled) {
    background: var(--primary-container, #fd9937);
    border-color: var(--yellow-dark, #AE5600);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 18px rgba(253, 153, 55, .35);
}

.wo-word-btn:disabled,
.wo-word-used {
    opacity: 0.3 !important;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Controls ──────────────────────────────────────────── */
.wo-controls {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
}

.wo-ctrl-btn {
    background: #ffffff;
    border: 1.5px solid rgba(143, 78, 0, .2);
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ink-secondary, #544336) !important;
    -webkit-text-fill-color: var(--ink-secondary, #544336) !important;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: var(--shadow-sm, 0 2px 10px rgba(143,78,0,.08));
}

.wo-ctrl-btn:hover {
    background: var(--primary-light, #ffebcf);
    border-color: var(--primary, #8f4e00);
    color: var(--primary-dark, #693700) !important;
    -webkit-text-fill-color: var(--primary-dark, #693700) !important;
    transform: translateY(-2px);
}

/* ── Completion screen ─────────────────────────────────── */
.wo-complete {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--ink, #241a08);
}

.wo-complete h2 {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary, #8f4e00) !important;
    -webkit-text-fill-color: var(--primary, #8f4e00) !important;
    margin: 0.5rem 0;
}

.wo-complete p {
    color: var(--ink-muted, #887364);
    margin-bottom: 1.5rem;
}

/* ── Active Phrase progress bar ────────────────────────── */
#ap-progress-wrap {
    max-width: 600px;
    margin: 0 auto 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 1rem;
}

#ap-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--primary-light, #ffebcf);
    border-radius: 999px;
    overflow: hidden;
}

#ap-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-container, #fd9937);
    border-radius: 999px;
    transition: width 0.4s ease;
}

#ap-progress-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-muted, #887364);
    white-space: nowrap;
}

.ap-complete {
    text-align: center;
    padding: 2.5rem 1rem;
}

.ap-complete h2 {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary, #8f4e00);
    -webkit-text-fill-color: var(--primary, #8f4e00);
}

.ap-complete p {
    color: var(--ink-muted, #887364);
    margin-bottom: 1.2rem;
}