/* ── Word Puzzle — Frontend Styles ────────────────────────────────────────── */

.word-puzzle-wrap {
    --wp-bg:        #0f0e0d;
    --wp-surface:   #1a1917;
    --wp-border:    #2e2c29;
    --wp-focus:     #c9a84c;
    --wp-text:      #f0ece4;
    --wp-muted:     #6b6660;
    --wp-gold:      #c9a84c;
    --wp-correct:   #4caf7d;
    --wp-incorrect: #e05c5c;
    --wp-cell:      52px;

    background:  var(--wp-bg);
    color:       var(--wp-text);
    font-family: 'DM Mono', 'Courier New', monospace;
    padding:     2.5rem 1.5rem;
    border-radius: 6px;
    text-align:  center;
    max-width:   640px;
    margin:      0 auto 2rem;
    box-sizing:  border-box;
}

/* ── Typography ── */

.word-puzzle-wrap .wp-eyebrow {
    font-size:      0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--wp-gold);
    margin:         0 0 0.75rem;
    opacity:        0.85;
}

.word-puzzle-wrap .wp-heading {
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    color:       var(--wp-text);
    margin:      0 0 0.4rem;
    line-height: 1.15;
}

.word-puzzle-wrap .wp-subtext {
    font-size:      0.78rem;
    color:          var(--wp-muted);
    letter-spacing: 0.05em;
    margin:         0 0 1.5rem;
}

.word-puzzle-wrap .wp-divider {
    width:      40px;
    height:     2px;
    background: var(--wp-gold);
    margin:     0 auto 2rem;
    opacity:    0.55;
}

/* ── Cells ── */

.word-puzzle-wrap .wp-cells {
    display:         flex;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             18px;
    margin-bottom:   1.75rem;
}

.word-puzzle-wrap .wp-word-group {
    display:  flex;
    gap:      7px;
}

.word-puzzle-wrap .wp-cell-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
}

.word-puzzle-wrap .wp-cell {
    width:        var(--wp-cell);
    height:       var(--wp-cell);
    background:   var(--wp-surface);
    border:       1.5px solid var(--wp-border);
    border-radius: 4px;
    font-family:  Georgia, 'Times New Roman', serif;
    font-size:    1.45rem;
    font-weight:  700;
    color:        var(--wp-text);
    text-align:   center;
    text-transform: uppercase;
    caret-color:  var(--wp-gold);
    outline:      none;
    padding:      0;
    box-shadow:   none;
    transition:   border-color 0.15s ease, background 0.15s ease;
    box-sizing:   border-box;
}

.word-puzzle-wrap .wp-cell:focus {
    border-color: var(--wp-focus);
    background:   #201f1c;
}

.word-puzzle-wrap .wp-cell.wp-cell-filled {
    border-color: #3a3835;
}

/* Results */
.word-puzzle-wrap .wp-cell.wp-cell-correct {
    border-color: var(--wp-correct);
    background:   rgba(76, 175, 125, 0.12);
    animation:    wp-pop-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.word-puzzle-wrap .wp-cell.wp-cell-incorrect {
    border-color: var(--wp-incorrect);
    background:   rgba(224, 92, 92, 0.1);
    animation:    wp-shake 0.42s ease forwards;
}

@keyframes wp-pop-in {
    0%   { transform: scale(0.82); }
    60%  { transform: scale(1.10); }
    100% { transform: scale(1);    }
}

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

.word-puzzle-wrap .wp-cell-num {
    font-size:   0.55rem;
    color:       var(--wp-muted);
    line-height: 1;
}

/* ── Submitter fields ── */

.word-puzzle-wrap .wp-submitter-fields {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0.6rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.word-puzzle-wrap .wp-text-input {
    background:   var(--wp-surface);
    border:       1.5px solid var(--wp-border);
    border-radius: 4px;
    color:        var(--wp-text);
    font-family:  inherit;
    font-size:    0.8rem;
    padding:      0.55rem 0.9rem;
    outline:      none;
    width:        220px;
    transition:   border-color 0.15s;
    box-sizing:   border-box;
}

.word-puzzle-wrap .wp-text-input:focus {
    border-color: var(--wp-focus);
}

.word-puzzle-wrap .wp-text-input::placeholder {
    color: var(--wp-muted);
}

/* ── Submit button ── */

.word-puzzle-wrap .wp-submit-btn {
    display:        inline-block;
    padding:        0.7rem 2.4rem;
    background:     transparent;
    border:         1.5px solid var(--wp-gold);
    border-radius:  4px;
    color:          var(--wp-gold);
    font-family:    inherit;
    font-size:      0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background 0.2s, color 0.2s, transform 0.1s;
    margin-bottom:  1.25rem;
}

.word-puzzle-wrap .wp-submit-btn:hover:not(:disabled) {
    background: var(--wp-gold);
    color:      var(--wp-bg);
}

.word-puzzle-wrap .wp-submit-btn:active {
    transform: scale(0.97);
}

.word-puzzle-wrap .wp-submit-btn:disabled {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ── Feedback ── */

.word-puzzle-wrap .wp-feedback {
    min-height:     1.5rem;
    font-size:      0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity:        0;
    transform:      translateY(6px);
    transition:     opacity 0.3s ease, transform 0.3s ease;
    margin-bottom:  0.5rem;
}

.word-puzzle-wrap .wp-feedback.wp-feedback-visible {
    opacity:   1;
    transform: translateY(0);
}

.word-puzzle-wrap .wp-feedback.wp-feedback-correct {
    color: var(--wp-correct);
}

.word-puzzle-wrap .wp-feedback.wp-feedback-incorrect {
    color: var(--wp-incorrect);
}

/* ── Reset link ── */

.word-puzzle-wrap .wp-reset-btn {
    display:        inline;
    background:     none;
    border:         none;
    color:          var(--wp-muted);
    font-family:    inherit;
    font-size:      0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor:         pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding:        0;
    transition:     color 0.2s;
}

.word-puzzle-wrap .wp-reset-btn:hover {
    color: var(--wp-text);
}

/* ── Notify section (revealed on correct answer) ── */

.word-puzzle-wrap .wp-notify-section {
    margin-top:   1.5rem;
    padding-top:  1.5rem;
}

.word-puzzle-wrap .wp-notify-divider {
    width:      60px;
    height:     1px;
    background: var(--wp-border);
    margin:     0 auto 1.5rem;
}

.word-puzzle-wrap .wp-notify-heading {
    font-family:  Georgia, 'Times New Roman', serif;
    font-size:    clamp(0.95rem, 2.5vw, 1.15rem);
    font-weight:  700;
    color:        var(--wp-gold);
    margin:       0 0 1.25rem;
    line-height:  1.35;
}

.word-puzzle-wrap .wp-notify-btn {
    display:        inline-block;
    padding:        0.65rem 2rem;
    background:     var(--wp-gold);
    border:         1.5px solid var(--wp-gold);
    border-radius:  4px;
    color:          var(--wp-bg);
    font-family:    inherit;
    font-size:      0.72rem;
    font-weight:    500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    cursor:         pointer;
    transition:     background 0.2s, color 0.2s, transform 0.1s;
    margin-bottom:  0.75rem;
}

.word-puzzle-wrap .wp-notify-btn:hover:not(:disabled) {
    background: transparent;
    color:      var(--wp-gold);
}

.word-puzzle-wrap .wp-notify-btn:active {
    transform: scale(0.97);
}

.word-puzzle-wrap .wp-notify-btn:disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}

.word-puzzle-wrap .wp-notify-feedback {
    min-height:     1.4rem;
    font-size:      0.75rem;
    letter-spacing: 0.08em;
    opacity:        0;
    transform:      translateY(4px);
    transition:     opacity 0.3s ease, transform 0.3s ease;
}

.word-puzzle-wrap .wp-notify-feedback.wp-notify-visible {
    opacity:   1;
    transform: translateY(0);
}

.word-puzzle-wrap .wp-notify-feedback.wp-notify-sent {
    color: var(--wp-correct);
}

.word-puzzle-wrap .wp-notify-feedback.wp-notify-error {
    color: var(--wp-incorrect);
}

/* ── Error ── */

.puzzle-error {
    color:     #e05c5c;
    font-style: italic;
    font-size:  0.9rem;
    padding:    0.5rem;
    border:     1px dashed #e05c5c;
    display:    inline-block;
    border-radius: 4px;
}

/* ── Responsive: smaller cells on mobile ── */

@media (max-width: 480px) {
    .word-puzzle-wrap { --wp-cell: 40px; }
    .word-puzzle-wrap .wp-cell { font-size: 1.15rem; }
    .word-puzzle-wrap .wp-cells { gap: 14px; }
    .word-puzzle-wrap .wp-word-group { gap: 4px; }
}