/* ============================================================
 * WORDLEPLAY — legacy multi-board games (dordle, quordle, octordle, sedecordle, math-wordle)
 * in the home Wordle look. Loaded after the game bundle CSS and css/board.css.
 * Tile sizes come from js/multi.js as CSS variables on .wp-multi (the values below are fallbacks).
 * Board markup per bundle:
 *   quordle/octordle:  .game__boards > .game__boards-row > .row__field > .Row > .Row-letter
 *   sedecordle:        .boards-wrapper > .board-row > .board-item > .row__field > ...
 *   dordle:            .Game-fields > table.Game-rows > tbody > tr.Row > td.Row-letter
 *   math-wordle:       table.Game-rows (one board)
 * The editable row is the one whose cells have aria-live="assertive".
 * ============================================================ */

.wp-multi {
    --mq-cw: 32px;
    --mq-ch: 32px;
    --mq-fs: 17px;
    --mq-r: 7px;
    --mq-bw: 2px;
    --mq-gap: 4px;
    --mq-bgap: 12px;
    --mq-cols: 2;
    --mq-key-h: 48px;
    --mq-key: var(--key-bg, #e7ebf3);
    --mq-correct: var(--letter-correct, #16a34a);
    --mq-elsewhere: var(--letter-elsewhere, #eab308);
    --mq-absent: var(--letter-absent, #94a3b8);
    --mq-ink: var(--wp-ink, #14181f);
    --mq-bg: var(--wp-bg, #f7f8fa);
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
    font-family: Nunito, sans-serif;
    color: var(--mq-ink);
}
.wp-multi *, .wp-multi *::before, .wp-multi *::after { box-sizing: border-box; }
html body:has(.wp-multi) { background-color: var(--wp-bg, #f7f8fa) !important; }
html body .wp-multi #root,
html body.dark .wp-multi #root { background: transparent !important; background-color: transparent !important; }

/* ---------- Toolbar: Unlimited/Today on the left, Hint + icons on the right (as on the home page) ---------- */
html body .wp-multi .App-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    max-width: 650px;
    height: 48px;
    min-height: 48px;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none;
    background: transparent !important;
}
.wp-multi .mq-left, .wp-multi .mq-right { display: flex; align-items: center; min-width: 0; }
.wp-multi .mq-right { justify-content: flex-end; gap: 4px; }
.wp-multi .mq-right .App-icon-container, .wp-multi .mq-right .App-ext-container { display: flex; margin: 0; }
.wp-multi .mq-right .page-icon { margin: 0; }
html body .wp-multi #open_archive { display: none !important; }
.wp-multi .logo_img { display: block; height: 26px; width: auto; }

.wp-multi .mq-modes { display: flex; align-items: center; gap: 5px; }
.wp-multi .mq-modes .mode-button {
    height: 33px;
    margin: 0;
    padding: 0 13px;
    border: 1px solid var(--cell-empty-border, #dbe1ee);
    border-radius: 999px;
    background: var(--wp-surface, #fff);
    color: var(--mq-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wp-multi .mq-modes .mode-button:hover { border-color: rgba(22, 163, 74, .45); }
.wp-multi .mq-modes .mode-button.active { background: #00ac4a; border-color: #16a34a; color: #fff; cursor: default; }

/* Icons: the bundles portal svg icons (.page-icon) or <input type=image> (math-wordle) into the header */
html body .wp-multi .page-icon,
html body .wp-multi .page-icon svg { width: 34px; height: 34px; }
html body .wp-multi .page-icon svg {
    padding: 6px;
    border: 1px solid var(--cell-empty-border, #dbe1ee) !important;
    border-radius: 12px;
    background-color: #ebedf3;
    color: #69758e;
}
html body .wp-multi .App-ext-container > input {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 7px;
    border: 1px solid var(--cell-empty-border, #dbe1ee);
    border-radius: 12px;
    background: #ebedf3;
    cursor: pointer;
}
html body .wp-multi .App-ext-container > input:hover { background: #eafaf0; }
body.dark .wp-multi .App-ext-container > input,
body.dark .wp-multi .page-icon svg { background-color: #2a3852; border-color: rgba(255, 255, 255, .10) !important; }

/* Hint pill (js/wp-reward.js button) */
.wp-multi .wp-hint-btn { position: relative; margin: 0 2px 0 0; }
.wp-multi .wp-hint-btn:disabled { background: #cbd5e1; color: #fff; cursor: default; }
.wp-multi .mq-hint-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 2px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #12833c;
    font-size: 11px;
    font-weight: 900;
}
.wp-multi .wp-hint-btn:disabled .mq-hint-n { color: #94a3b8; }

/* Phones: Hint moves to its own row above the boards, like on the home page */
.wp-multi .mq-strip { display: none; }

/* Give up / Start over: taken out of the flow and laid over the middle of the toolbar */
html body .wp-multi .Game-options {
    position: absolute !important;
    top: 8px;
    left: 50%;
    z-index: 6;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: none !important;
    height: 32px;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
    pointer-events: none;
}
.wp-multi .Game-options > * { pointer-events: auto; }
html body .wp-multi .Game-options { z-index: 30; }
html body .wp-multi .App-container { position: static !important; }
html body .wp-multi .Game-options .Timer-bar {
    display: inline-flex !important; align-items: center; height: 32px !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 12px !important; border-radius: 999px !important;
    background: var(--key-bg, #e7ebf3) !important; color: inherit !important;
    font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; line-height: 32px;
}
html body .wp-multi .Game-options .App-button {
    height: 32px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: hidden;
    border: 1px solid var(--cell-empty-border, #dbe1ee) !important;
    border-radius: 999px !important;
    background: #eef2f9 !important;
    color: #3a4457 !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
}
html body .wp-multi .Game-options .App-button:hover { background: #fde7ea !important; border-color: rgba(220, 60, 80, .35) !important; color: #8a1c2b !important; }
html body .wp-multi .Game-options .App-button + .App-button { background: #e5fbec !important; color: #14532d !important; }
html body .wp-multi .Game-options .App-button + .App-button:hover { background: #c9f6d8 !important; border-color: rgba(22, 163, 74, .35) !important; color: #14532d !important; }

/* ---------- Game area ---------- */
html body .wp-multi .App-container {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
html body .wp-multi .Game { padding: 6px 0 0 !important; margin: 0 !important; }
html body .wp-multi .game__container-outer,
html body .wp-multi .game__container-inner,
html body .wp-multi .game-wrapper,
html body .wp-multi .Game-container {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* One grid of boards; the bundles' row/item wrappers are flattened */
html body .wp-multi .game__boards-row,
html body .wp-multi .board-row,
html body .wp-multi .board-item { display: contents !important; }
html body .wp-multi .board-row-title,
html body .wp-multi .game__boards-anchor { display: none !important; }
html body .wp-multi .game__boards,
html body .wp-multi .boards-wrapper,
html body .wp-multi .Game-fields {
    display: grid !important;
    grid-template-columns: repeat(var(--mq-cols), max-content);
    justify-content: center;
    align-items: start;
    gap: var(--mq-bgap);
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

html body .wp-multi .row__field,
html body .wp-multi table.Game-rows {
    display: flex !important;
    flex-direction: column;
    flex: none !important;
    gap: var(--mq-gap);
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: calc(var(--mq-r) + 4px);
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color .3s ease;
}
html body .wp-multi table.Game-rows > tbody { display: contents !important; }
html body .wp-multi .Row,
html body .wp-multi .Row-current {
    display: flex !important;
    gap: var(--mq-gap);
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: var(--mq-fs) !important;
}
html body .wp-multi .Row-annotation { display: none !important; }

/* Tiles: white with a light border; solid colour once scored */
html body .wp-multi .Row-letter,
html body .wp-multi .Row-current .Row-letter {
    display: flex !important;
    flex: none !important;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--mq-cw) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--mq-ch) !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: var(--mq-bw) solid var(--cell-empty-border, #dbe1ee) !important;
    border-radius: var(--mq-r) !important;
    background: var(--cell-empty-bg, #fff) !important;
    color: var(--mq-ink) !important;
    box-shadow: none;
    font-size: var(--mq-fs) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-transform: uppercase;
    transition: border-color .12s ease, background-color .12s ease !important;
    user-select: none;
}
html body .wp-multi .Row-letter[aria-live="assertive"] { border-color: #ccd4e4 !important; }
html body .wp-multi .Row-letter[aria-live="assertive"]:not(:empty) {
    border-color: var(--cell-filled-border, #8f9bb8) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
html body .wp-multi .Row-letter.letter-correct,
html body .wp-multi .Row-letter.letter-elsewhere,
html body .wp-multi .Row-letter.letter-absent {
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .10);
}
html body .wp-multi .Row-letter.letter-correct { background: var(--mq-correct) !important; }
html body .wp-multi .Row-letter.letter-elsewhere { background: var(--mq-elsewhere) !important; }
html body .wp-multi .Row-letter.letter-absent { background: var(--mq-absent) !important; }
body.dark .wp-multi .Row-letter { color: #e6e8ec !important; }

/* Solved board: its leftover empty rows fade out (data-mq-solved is set by js/multi.js) */
html body .wp-multi [data-mq-solved] .Row-letter:empty { opacity: .35; }

/* Hint: dashed green tile in the editable row of the hinted board, ring around that board, marked key */
html body .wp-multi [data-mq-hinted] { outline-color: rgba(22, 163, 74, .38); }
html body .wp-multi [data-mq-flash] { animation: mq-flash 1.4s ease-out; }
@keyframes mq-flash {
    0%, 40% { outline-color: rgba(22, 163, 74, .95); }
    100% { outline-color: rgba(22, 163, 74, .38); }
}
html body .wp-multi .Row-letter[data-mq-hint]:empty {
    border-style: dashed !important;
    border-color: var(--mq-correct) !important;
    background: #ecfdf3 !important;
}
html body .wp-multi .Row-letter[data-mq-hint]:empty::after {
    content: attr(data-mq-hint);
    color: #15803d;
    font-weight: 900;
}
body.dark .wp-multi .Row-letter[data-mq-hint]:empty { background: rgba(34, 165, 93, .16) !important; }
body.dark .wp-multi .Row-letter[data-mq-hint]:empty::after { color: #4ade80; }

/* ---------- Keyboard ---------- */
html body .wp-multi .keyboard__container {
    position: sticky !important;
    bottom: 0;
    z-index: 5;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--mq-bg) !important;
    box-shadow: 0 -10px 14px -12px rgba(15, 23, 42, .18);
}
html body .wp-multi .Game-keyboard {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 8px 0 calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--mq-bg);
}
html body .wp-multi .keyboard__container .Game-keyboard { position: static; padding: 0 !important; background: transparent; }
html body .wp-multi .Game-keyboard-row { display: flex !important; align-items: stretch; }
html body .wp-multi .Game-keyboard-button {
    display: flex !important;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: var(--mq-key-h) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 3px !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 10px !important;
    background-color: var(--mq-key);
    color: var(--mq-ink) !important;
    box-shadow: 0 2px 0 rgba(15, 23, 42, .10);
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: transform .08s ease, box-shadow .08s ease;
}
html body .wp-multi .Game-keyboard-button:active { transform: translateY(1px); box-shadow: none; }
html body .wp-multi .Game-keyboard-button-wide {
    flex: 1.6 1 0;
    background: #d7e3f6 !important;
    font-size: 13px !important;
    letter-spacing: .3px;
    text-transform: uppercase;
}
html body .wp-multi .Game-keyboard-button-wide:hover { background: #c3d4f0 !important; }
html body .wp-multi .Game-keyboard-button[data-mq-key="bs"] { font-size: 20px !important; }
/* math-wordle colours its keys with classes instead of inline gradients */
html body .wp-multi .Game-keyboard-button.letter-correct { background-color: var(--mq-correct); color: #fff !important; box-shadow: none; }
html body .wp-multi .Game-keyboard-button.letter-elsewhere { background-color: var(--mq-elsewhere); color: #fff !important; box-shadow: none; }
html body .wp-multi .Game-keyboard-button.letter-absent { background-color: var(--mq-absent); color: #fff !important; box-shadow: none; }
html body .wp-multi .Game-keyboard-button[data-mq-hint] { box-shadow: inset 0 0 0 2px var(--mq-correct), 0 2px 0 rgba(15, 23, 42, .10); }
html body .wp-multi .Game-keyboard-button[data-mq-hint]::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mq-correct);
    box-shadow: 0 0 0 1.5px #fff;
}
html body .wp-multi .Game-keyboard-button { position: relative; }
body.dark .wp-multi .Game-keyboard-button { color: #e6e8ec !important; }
body.dark .wp-multi .Game-keyboard-button-wide { background: #3a4a67 !important; }

html body .wp-multi .Game-challenge-bar { min-height: 0 !important; margin: 6px 0 0 !important; }
html body .wp-multi .Game-challenge-bar button {
    width: auto !important;
    max-width: 100%;
    padding: 0 18px !important;
    border-radius: 999px !important;
}
html body .wp-multi .Game-seed-info { margin: 2px 0 0; font-size: 12px; }

/* ---------- Phones ---------- */
@media (max-width: 480px) {
    .wp-multi { padding: 0 10px; }
    .wp-multi .mq-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
    }
    .wp-multi[data-game="octordle"] .mq-strip,
    .wp-multi[data-game="sedecordle"] .mq-strip {
        position: sticky;
        top: 0;
        z-index: 7;
        margin: 0 -10px;
        background: var(--mq-bg);
    }
    .wp-multi .mq-modes .mode-button { height: 32px; padding: 0 11px; font-size: 13.5px; }
    html body .wp-multi .Game-options {
        top: 54px;
        left: 10px;
        right: 10px;
        justify-content: space-between;
        transform: none;
    }
    html body .wp-multi .Game-options .App-button {
        max-width: calc(50% - 56px);
        height: 30px !important;
        padding: 0 11px !important;
        font-size: 12.5px !important;
    }
    html body .wp-multi .Game-options .App-button + .App-button { margin-left: auto !important; }
    html body .wp-multi .Game-keyboard-button { margin: 2.5px !important; border-radius: 8px !important; }
    html body .wp-multi .Game-keyboard-button-wide { font-size: 12px !important; }
}