/* ── Ordle game styles ── */

/* ── Page layout ── */
.ordle-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    padding: 1.5rem 1rem;
    min-height: calc(100dvh - 4rem);
}

/* ── Title ── */
.ordle-title {
    font-family: var(--fn-font-heading);
    font-size: 1.6rem;
    margin: 0 0 1rem 0;
    color: var(--fn-ink);
    text-align: center;
}

.ordle-level-num {
    font-size: 1.1rem;
    color: var(--fn-ink-light);
}

/* ── Letter sidebar ── */
.ordle-letters {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding-top: 3.5rem; /* align with target row */
}

.ordle-letters-label {
    font-family: var(--fn-font-body);
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fn-ink-light);
}

.ordle-letter-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.ordle-letter-item {
    font-family: var(--fn-font-heading);
    font-size: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--fn-border-light);
    border-radius: 5px;
    background: var(--fn-surface);
    color: var(--fn-ink);
    text-transform: uppercase;
    transition: opacity 0.2s, background 0.2s;
}

.ordle-letter-item.used {
    opacity: 0.25;
    background: var(--fn-surface-muted);
}

/* ── Main area ── */
.ordle-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Target row ── */
.ordle-target-wrap {
    margin-bottom: 0.2rem;
}

.ordle-target-row {
    border: 2px solid var(--fn-ink);
    background: var(--fn-surface);
    pointer-events: none;
    margin-left: calc(1.8rem + 0.25rem + 0.3rem); /* offset for drag handle width so right edges align */
}

/* ── Error / hint messages ── */
.ordle-hint {
    font-family: var(--fn-font-body);
    font-size: 0.9rem;
    color: #3b82f6;
    min-height: 1.4em;
    margin: 0 0 0.25rem 0;
    text-align: center;
}

.ordle-error {
    font-family: var(--fn-font-body);
    font-size: 0.9rem;
    color: var(--fn-error);
    min-height: 1.4em;
    margin: 0 0 0.25rem 0;
    text-align: center;
}

/* ── Word rows container ── */
.ordle-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* ── Individual row ── */
.ordle-row {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem;
    border-radius: 8px;
    border: 2px solid transparent;
    transition: border-color 0.15s, opacity 0.15s;
    user-select: none;
}

.ordle-row.is-active {
    border-color: var(--fn-border-light);
}

.ordle-row.is-locked {
    opacity: 0.85;
}

/* ── Drag handle (left-side grab circle) ── */
.ordle-drag-handle {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    align-self: center;
    order: -1;
    border-radius: 50%;
    border: 2px solid var(--fn-ink);
    opacity: 0.18;
    cursor: grab;
    transition: opacity 0.15s;
    margin-right: 0.25rem;
}

.ordle-drag-handle:hover {
    opacity: 0.42;
}

.ordle-row.is-locked .ordle-drag-handle {
    visibility: hidden;
    pointer-events: none;
}

.ordle-row.drag-over {
    border-color: var(--fn-accent);
    background: rgba(212, 168, 67, 0.08);
}

/* ── Cells ── */
.ordle-cell {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 2px solid var(--fn-border-light);
    background: var(--fn-surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.ordle-cell.blue {
    background: #bfdbfe;
    border-color: #3b82f6;
}

.ordle-cell input {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: center;
    font-family: var(--fn-font-heading);
    font-size: 1.3rem;
    color: var(--fn-ink);
    text-transform: uppercase;
    caret-color: transparent;
    padding: 0;
}

.ordle-cell input:disabled {
    color: var(--fn-ink);
    opacity: 1;
    -webkit-text-fill-color: var(--fn-ink);
}

.ordle-cell:focus-within {
    border-color: var(--fn-ink);
    border-width: 2.5px;
    background: #fff;
}

.ordle-cell.blue:focus-within {
    background: #bfdbfe;
}

/* Target row cells show letters, not inputs */
.ordle-target-row .ordle-cell {
    font-family: var(--fn-font-heading);
    font-size: 1.3rem;
    color: var(--fn-ink);
    text-transform: uppercase;
    background: var(--fn-surface);
    border-color: var(--fn-ink);
    transition: background 0.25s, border-color 0.25s;
}

.ordle-target-row .ordle-cell.unlocked {
    background: #bfdbfe;
    border-color: #3b82f6;
}

/* Locked row colour: submitted word accepted */
.ordle-row.is-locked .ordle-cell {
    background: #d1fae5;
    border-color: #10b981;
}

.ordle-row.is-locked .ordle-cell.blue {
    background: #bfdbfe;
    border-color: #3b82f6;
}

/* ── Controls (right side) ── */
.ordle-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding-top: 3.5rem;
}

/* ── Shake animation for errors ── */
@keyframes ordle-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

.ordle-row.shake {
    animation: ordle-shake 0.35s ease;
}

/* ── Completion modal (mirrors housegame style) ── */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--fn-ink) 50%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    animation: modal-fade-in 0.2s ease;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    background: var(--fn-surface);
    border: 2.5px solid var(--fn-ink);
    box-shadow: var(--fn-shadow);
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    text-align: center;
    animation: modal-slide-in 0.3s ease;
}

@keyframes modal-slide-in {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.completion-modal h2 {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: var(--fn-ink);
}


.completion-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: bounce 0.6s ease infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(-10px); }
}

.completion-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.completion-btn {
    flex: 1;
}

/* ── Tutorial button ── */
.ordle-tutorial-btn {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2rem;
    padding: 0;
    z-index: 800;
    font-size: 1.2rem;
    font-weight: bold;
    min-height: unset;
}

/* ── Tutorial cursor (not defined globally — frogscotch.css owns it there) ── */
.tutorial-cursor {
    position: absolute;
    pointer-events: none;
    z-index: 200;
    transform: translate(-20%, -10%);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    transition: opacity 0.3s ease;
}

.tutorial-cursor.pressing {
    transform: translate(-20%, -10%) scale(0.82);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    transition: transform 0.1s ease, filter 0.1s ease !important;
}

.tut-btn-pressed {
    transform: translate(1px, 1px) !important;
    box-shadow: none !important;
    filter: brightness(0.9);
}

/* ── Tutorial mini-game area ── */
.ordle-tut-game-area {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 0.75rem;
}

/* Letter sidebar inside tutorial game area */
.ordle-tut-letter-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.5rem;
}

.ordle-tut-letter-sidebar .ordle-letter-item {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.85rem;
}

/* Game wrap: stacks target row, word rows, and submit button */
.ordle-tut-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* Row container for the 5 word rows */
.ordle-tut-rows-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Highlight the topmost word row like the active row in gameplay */
.ordle-tut-rows-wrap > .ordle-tut-row:first-child {
    border: 2px solid var(--fn-ink);
    border-radius: 8px;
    padding: 0.15rem;
}

/* Individual row (target or word) */
.ordle-tut-row {
    display: flex;
    gap: 0.25rem;
}

/* Override cell size for tutorial context */
.ordle-tut-row .ordle-cell {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    font-family: var(--fn-font-heading);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

/* Target row alignment — offset for left-side drag handle so right edges align */
.ordle-tut-target-row {
    margin-left: calc(1.8rem + 0.25rem + 0.25rem); /* handle + handle-margin + tut-row gap */
}

/* Target row cells */
.ordle-tut-tc {
    background: var(--fn-surface);
    border-color: var(--fn-ink);
}

/* Unlocked target cell (blue) */
.ordle-tut-tc-unlocked {
    background: #bfdbfe !important;
    border-color: #3b82f6 !important;
    transition: background 0.25s, border-color 0.25s;
}

/* Locked (submitted) word row */
.ordle-tut-locked .ordle-cell {
    background: #d1fae5;
    border-color: #10b981;
}

.ordle-tut-locked .ordle-cell.blue {
    background: #bfdbfe;
    border-color: #3b82f6;
}

.ordle-tut-locked .ordle-drag-handle {
    visibility: hidden;
    pointer-events: none;
}

/* Tutorial submit button */
.ordle-tut-submit {
    margin-top: 0.25rem;
}

/* ── Slide 1 annotated layout ── */
.ordle-tut-annotated-layout {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.ordle-tut-game-column {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.ordle-tut-annot-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.ordle-tut-annot-box {
    border: 2px solid #ef4444;
    border-radius: 6px;
    padding: 3px;
}

.ordle-tut-annot-label {
    font-family: var(--fn-font-body);
    font-size: 0.62rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ef4444;
}

.ordle-tut-annot-letter-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.ordle-tut-annot-letter-item {
    font-family: var(--fn-font-heading);
    font-size: 0.85rem;
    width: 1.6rem;
    height: 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--fn-border-light);
    border-radius: 4px;
    background: var(--fn-surface);
    color: var(--fn-ink);
    text-transform: uppercase;
}

/* ── Solutions slide: compact cells and two-board layout ── */
.ordle-tut-compact.ordle-tut-row .ordle-cell,
.ordle-tut-compact .ordle-cell {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
    border-radius: 4px;
}

.ordle-tut-solutions-wrapper {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.ordle-tut-solution-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.ordle-tut-solution-label {
    font-family: var(--fn-font-body);
    font-size: 0.72rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fn-ink-light);
    margin-bottom: 0.15rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .ordle-page {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .ordle-letters {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
        justify-content: center;
        max-width: 320px;
    }

    .ordle-letter-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .ordle-controls {
        flex-direction: row;
        padding-top: 0;
    }
}