* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.main-container {
    display: flex;
    gap: 30px;
    max-width: 900px;
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.left-column {
    flex: 1;
}

.right-column {
    width: 180px;
    flex-shrink: 0;
}

.section {
    margin-bottom: 15px;
}

.section-title {
    display: block;
    text-align: center;
    font-size: 14px;
    margin-bottom: 8px;
}

.section-title-bold {
    font-size: 14px;
    font-weight: bold;
}

/* ===== Wordle Grid ===== */

.wordle-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.grid-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Prompt label to the left of each row; only the active row shows text */
.row-prompt {
    width: 190px;
    padding-right: 8px;
    text-align: right;
    font-size: 13px;
    color: #555;
    line-height: 1.2;
}

.grid-cell {
    width: 56px;
    height: 56px;
    border: 2px solid #d3d6da;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    color: #1a1a1b;
    user-select: none;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

/* Active row cells that have no letter yet */
.grid-cell.active {
    border-color: #878a8c;
}

/* Cell with a letter typed but not yet colored (default = gray/absent) */
.grid-cell.filled {
    border-color: #878a8c;
}

/* Cell currently being typed into (cursor position) */
.grid-cell.cursor {
    border-color: #565758;
    border-width: 3px;
}

/* Color states - match Wordle's actual colors */
.grid-cell.state-gray {
    background-color: #787c7e;
    border-color: #787c7e;
    color: white;
    cursor: pointer;
}

.grid-cell.state-yellow {
    background-color: #c9b458;
    border-color: #c9b458;
    color: white;
    cursor: pointer;
}

.grid-cell.state-green {
    background-color: #6aaa64;
    border-color: #6aaa64;
    color: white;
    cursor: pointer;
}

/* Submitted (locked) rows - slightly dimmer to show they're done */
.grid-cell.locked {
    opacity: 0.85;
    cursor: default;
}

/* Inactive empty rows */
.grid-cell.inactive {
    background-color: #f9f9f9;
    border-color: #e0e0e0;
    color: transparent;
}

.grid-hint {
    text-align: center;
    font-size: 12px;
    color: #888;
    font-style: italic;
}

/* ===== Buttons ===== */

.button-row {
    display: flex;
    align-items: center;
    margin: 20px 0;
    position: relative;
}

.buttons-center {
    display: flex;
    gap: 10px;
    margin: 0 auto;
}

.btn {
    padding: 12px 30px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-width: 130px;
}

.btn-submit {
    background: #4CAF50;
}

.btn-submit:hover {
    background: #45a049;
}

.btn-reset {
    background: #f44336;
}

.btn-reset:hover {
    background: #e53935;
}

.submit-status {
    position: absolute;
    right: 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

/* ===== Suggestions header ===== */

.suggestions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.toggle-area {
    display: flex;
    align-items: center;
    gap: 4px;
}

.toggle-area input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.toggle-area label {
    font-size: 12px;
    cursor: pointer;
}

.toggle-area input:disabled,
.toggle-area input:disabled + label {
    opacity: 0.5;
    cursor: default;
}

/* ===== Suggestions table ===== */

.suggestions-scroll-wrapper {
    max-height: 140px;
    overflow-y: scroll;
}

.suggestions-table {
    border-collapse: collapse;
    font-size: 12px;
}

.suggestions-table th {
    font-weight: bold;
    text-align: center;
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

.suggestions-table td {
    text-align: center;
    padding: 3px 6px;
    min-height: 20px;
}

.status-text {
    font-size: 12px;
    font-style: italic;
    color: #666;
    text-align: center;
    margin-top: 5px;
}

/* ===== Remaining answers table ===== */

.remaining-list-wrapper {
    max-height: 140px;
    overflow-y: scroll;
}

.remaining-table {
    border-collapse: collapse;
    font-size: 12px;
}

.remaining-table th {
    font-weight: bold;
    text-align: center;
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    background: white;
}

.remaining-table td {
    text-align: center;
    padding: 3px 6px;
}

.remaining-table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

/* Align first 4 columns of both tables */
.suggestions-table th:nth-child(1),
.suggestions-table td:nth-child(1),
.remaining-table th:nth-child(1),
.remaining-table td:nth-child(1) { width: 40px; }

.suggestions-table th:nth-child(2),
.suggestions-table td:nth-child(2),
.remaining-table th:nth-child(2),
.remaining-table td:nth-child(2) { width: 55px; }

.suggestions-table th:nth-child(3),
.suggestions-table td:nth-child(3),
.remaining-table th:nth-child(3),
.remaining-table td:nth-child(3) { width: 120px; }

.suggestions-table th:nth-child(4),
.suggestions-table td:nth-child(4),
.remaining-table th:nth-child(4),
.remaining-table td:nth-child(4) { width: 55px; }

/* ===== Discovered letters ===== */

.discovered-header {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    padding: 0 4px;
}

.disc-col {
    font-size: 11px;
    text-align: center;
}

.disc-col:nth-child(1) { width: 60px; }
.disc-col:nth-child(2) { width: 45px; }
.disc-col:nth-child(3) { width: 45px; }

.discovered-row {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    padding: 0 4px;
}

.disc-letter {
    width: 60px;
    padding: 4px;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f0f0f0;
}

.disc-input {
    width: 45px;
    padding: 4px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.disc-input:disabled {
    background: #e8e8e8;
}

/* ===== Celebration (row-flip) ===== */

/* Each cell in .celebrating animates with a staggered delay by column */
.grid-row.celebrating .grid-cell {
    animation: cellCelebrate 650ms ease-in-out forwards;
}

.grid-row.celebrating .grid-cell[data-col="0"] { animation-delay: 0ms; }
.grid-row.celebrating .grid-cell[data-col="1"] { animation-delay: 150ms; }
.grid-row.celebrating .grid-cell[data-col="2"] { animation-delay: 300ms; }
.grid-row.celebrating .grid-cell[data-col="3"] { animation-delay: 450ms; }
.grid-row.celebrating .grid-cell[data-col="4"] { animation-delay: 600ms; }

@keyframes cellCelebrate {
    0% {
        transform: rotateX(0deg) scale(1);
        background-color: #6aaa64;
        border-color: #6aaa64;
        color: #ffffff;
    }
    50% {
        transform: rotateX(90deg) scale(1.1);
        background-color: #ffffff;
        border-color: #6aaa64;
        color: #6aaa64;
    }
    100% {
        transform: rotateX(0deg) scale(1);
        background-color: #6aaa64;
        border-color: #6aaa64;
        color: #ffffff;
    }
}

/* ===== Celebration banner ===== */

.celebration-banner {
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: #6aaa64;
    color: #ffffff;
    padding: 18px 36px;
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 1000;
    user-select: none;
    animation: bannerSlideIn 320ms ease-out;
}

.celebration-banner .banner-hint {
    display: block;
    font-size: 11px;
    font-weight: normal;
    font-style: italic;
    opacity: 0.85;
    margin-top: 4px;
    text-align: right;
}

@keyframes bannerSlideIn {
    from { opacity: 0; transform: translate(-50%, -24px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ===== Entropy mode (>threshold remaining) =====
   Average and Max Guesses are both populated via the 1-ply refinement, so
   they stay visible. The Remaining Possible Answers toggle also stays
   available so Hard Mode can default-show that view at any answer-set size. */

/* ===== Pre-submit: hide data columns (Past Ans / Average / Max Guesses) ===== */

body.pre-submit .suggestions-table th:nth-child(4),
body.pre-submit .suggestions-table th:nth-child(5),
body.pre-submit .suggestions-table th:nth-child(6),
body.pre-submit .suggestions-table td:nth-child(4),
body.pre-submit .suggestions-table td:nth-child(5),
body.pre-submit .suggestions-table td:nth-child(6) {
    display: none;
}

/* ===== Game-complete lock: visually indicate grid is frozen ===== */

body.game-complete .grid-cell {
    cursor: default;
}

body.game-complete .grid-hint {
    font-weight: bold;
    color: #2a6e26;
}

/* ===== On-screen keyboard (touch devices only) ===== */

/* Hidden by default — JS adds .is-touch-device to body to reveal */
.onscreen-keyboard {
    display: none;
}

body.is-touch-device .onscreen-keyboard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 6px 4px 0;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.kb-row {
    display: flex;
    gap: 5px;
    width: 100%;
    justify-content: center;
}

.kb-key {
    flex: 1 1 0;
    min-width: 0;
    max-width: 44px;
    height: 54px;
    padding: 0;
    font-family: inherit;
    font-size: 17px;
    font-weight: bold;
    color: #1a1a1b;
    background: #d3d6da;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-transform: uppercase;
    touch-action: manipulation;
}

.kb-key:active {
    background: #a8abae;
}

.kb-enter {
    flex: 1.6 1 0;
    max-width: 70px;
    font-size: 12px;
    background: #6aaa64;
    color: #ffffff;
}

.kb-enter:active {
    background: #5a9954;
}

.kb-backspace {
    flex: 1.6 1 0;
    max-width: 70px;
    font-size: 20px;
    background: #b0b3b6;
    color: #ffffff;
}

.kb-backspace:active {
    background: #95989b;
}

/* On touch devices: hide the Discovered Letters column and stack the layout. */
body.is-touch-device .right-column {
    display: none;
}

body.is-touch-device .main-container {
    flex-direction: column;
    gap: 0;
    padding: 12px;
}

/* Stack the buttons and the "xx words remaining" status vertically — on a
   phone the absolute-positioned status would otherwise land on top of the
   Reset button. */
body.is-touch-device .button-row {
    flex-direction: column;
    gap: 8px;
    margin: 14px 0;
}

body.is-touch-device .submit-status {
    position: static;
    text-align: center;
    white-space: normal;
}

/* Make the page scrollable on touch devices once the suggestions table
   appears below the keyboard. body's default overflow is visible, but we
   want to be explicit and add bottom padding so the last row isn't flush
   against the viewport edge. */
body.is-touch-device {
    align-items: flex-start;       /* don't vertically center a tall page */
    overflow-y: auto;
    padding-bottom: 32px;
}

/* The row-prompt label adds ~190px to the left of every row — drop it on
   touch so the grid centers nicely on a phone. */
body.is-touch-device .row-prompt {
    display: none;
}

/* Hide rows the user hasn't reached yet, so the keyboard sits right under
   the active row (the user is OK with covering the inactive future rows). */
body.is-touch-device .grid-row.future-row {
    display: none;
}

/* ===== Row-6 Options button ===== */

/* Wrapper takes the same width as .row-prompt so cells in row 6 line up
   vertically with the rows above. */
.row-options-wrapper {
    width: 190px;
    padding-right: 8px;
    text-align: right;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.row-options-btn {
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff;
    background: #4a90e2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.row-options-btn:hover {
    background: #3a7bc8;
}

/* On touch, prompts are hidden but we still want the Options button visible
   on row 6. Drop the wide wrapper so it sits compactly to the left of the
   row's cells. */
body.is-touch-device .row-options-wrapper {
    width: auto;
    padding-right: 6px;
}

/* On touch, future rows are hidden so the keyboard sits under the active row.
   Keep row 6 visible (button only — cells suppressed) so Options is reachable
   before the user reaches the last guess. */
body.is-touch-device .grid-row.future-row[data-row="5"] {
    display: flex;
}

body.is-touch-device .grid-row.future-row[data-row="5"] .grid-cell {
    display: none;
}

/* ===== Saved-confirmation modal ===== */

.saved-modal {
    position: fixed;
    inset: 0;
    z-index: 2200;   /* above options modal so it overlays the just-closed Options dialog */
}

.saved-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.saved-dialog {
    position: relative;
    margin: 12vh auto 0;
    max-width: 480px;
    width: calc(100% - 32px);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 22px 24px 18px;
    font-family: Arial, sans-serif;
}

.saved-dialog h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #2a6e26;
}

.saved-dialog p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 12px;
}

.saved-dialog .saved-privacy {
    font-size: 13px;
    color: #444;
    background: #f5f5f5;
    border-left: 3px solid #4a90e2;
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 0;
}

.saved-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/* ===== Error modal (inconsistent input) ===== */

.error-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
}

.error-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.error-dialog {
    position: relative;
    margin: 12vh auto 0;
    max-width: 480px;
    width: calc(100% - 32px);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 22px 24px 18px;
    font-family: Arial, sans-serif;
}

.error-dialog h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: #c0392b;
}

.error-dialog p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.error-actions {
    display: flex;
    justify-content: flex-end;
}

/* ===== Options modal ===== */

.options-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.options-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.options-dialog {
    position: relative;
    margin: 8vh auto 0;
    max-width: 520px;
    width: calc(100% - 32px);
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 22px 24px 18px;
    font-family: Arial, sans-serif;
}

.options-dialog h2 {
    margin: 0 0 14px;
    font-size: 18px;
}

.options-dialog .option-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}

.options-dialog .option-row input {
    margin-top: 2px;
    cursor: pointer;
}

.options-dialog .option-group {
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    padding: 6px 12px 8px;
    margin-top: 12px;
}

.options-dialog .option-group legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: bold;
}

.options-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

.btn-options {
    padding: 8px 18px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    min-width: 90px;
}

.btn-options-cancel {
    background: #e0e0e0;
    color: #333;
}

.btn-options-cancel:hover {
    background: #d0d0d0;
}

.btn-options-ok {
    background: #4CAF50;
    color: #ffffff;
}

.btn-options-ok:hover {
    background: #45a049;
}

/* Tighter sizing on small viewports so a 5-cell row fits a phone screen. */
@media (max-width: 480px) {
    .grid-cell {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .kb-key {
        max-width: 36px;
        height: 50px;
        font-size: 15px;
    }
    .kb-enter {
        max-width: 58px;
        font-size: 11px;
    }
    .kb-backspace {
        max-width: 58px;
        font-size: 18px;
    }

    /* Compress the suggestions / remaining tables so all six columns fit on
       a phone (~390px viewport) instead of overflowing the right edge. */
    .suggestions-table,
    .remaining-table {
        font-size: 11px;
        width: 100%;
    }

    .suggestions-table th,
    .suggestions-table td,
    .remaining-table th,
    .remaining-table td {
        padding: 3px 2px;
    }

    .suggestions-table th:nth-child(1),
    .suggestions-table td:nth-child(1),
    .remaining-table th:nth-child(1),
    .remaining-table td:nth-child(1) { width: 28px; }

    .suggestions-table th:nth-child(2),
    .suggestions-table td:nth-child(2),
    .remaining-table th:nth-child(2),
    .remaining-table td:nth-child(2) { width: 50px; }

    .suggestions-table th:nth-child(3),
    .suggestions-table td:nth-child(3),
    .remaining-table th:nth-child(3),
    .remaining-table td:nth-child(3) { width: 80px; }

    .suggestions-table th:nth-child(4),
    .suggestions-table td:nth-child(4),
    .remaining-table th:nth-child(4),
    .remaining-table td:nth-child(4) { width: 38px; }

    /* Allow horizontal scroll as a fallback if the device is narrower than
       even the compressed column total. */
    .suggestions-scroll-wrapper,
    .remaining-list-wrapper {
        overflow-x: auto;
    }
}