/* =============================================================================
   Russian Wordle styles
   -----------------------------------------------------------------------------
   Layout philosophy: minimal — board + keyboard fill the viewport, every
   piece of UI chrome lives behind an icon button or in a modal. The whole
   page is sized off a single CSS var (--tile-size) that the JS recomputes
   when the word length or viewport changes.

   Theme: reuses the global tokens from /styles.css so dark/light mode just
   work. Wordle tile colors are intentionally NOT themed — green/yellow/gray
   are universally recognized as game state.
   ========================================================================== */

/* --- Layout shell ---------------------------------------------------------- */

.wordle-shell {
    max-width: 500px;
    margin: 0 auto;
    padding: 12px 12px 6px;
    display: flex;
    flex-direction: column;
    /* Fill the viewport below the navbar; the board flexes to fit and the
       keyboard pins to the bottom on tall screens. */
    min-height: calc(100vh - 72px);
}

.wordle-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.wordle-logo {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
    letter-spacing: 0.3px;
}

.wordle-topbar-actions {
    display: flex;
    gap: 6px;
}

.icon-btn {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 18px;
    color: var(--text);
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--bg-subtle); border-color: var(--primary); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Game board ------------------------------------------------------------ */

.game-board {
    --tile-size: 56px;
    display: grid;
    grid-template-rows: repeat(6, var(--tile-size));
    gap: 6px;
    justify-content: center;
    align-content: center;
    flex: 1 1 auto;
    padding: 8px 0 16px;
}

.guess-row {
    display: grid;
    /* `--row-length` set on the element by JS. */
    /* --tile-width falls back to --tile-size; overridden on mobile for long words. */
    grid-template-columns: repeat(var(--row-length, 5), var(--tile-width, var(--tile-size)));
    gap: 6px;
    justify-content: center;
}

.tile {
    width: var(--tile-width, var(--tile-size));
    height: var(--tile-size);
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: calc(var(--tile-size) * 0.5);
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: transform 0.08s, border-color 0.15s;
}
.tile.filled { border-color: var(--text-muted); }
.tile.filled.bump { animation: bump 0.12s ease; }
.tile.green  { background: #6aaa64; border-color: #6aaa64; color: #fff; }
.tile.yellow { background: #c9b458; border-color: #c9b458; color: #fff; }
.tile.gray   { background: #787c7e; border-color: #787c7e; color: #fff; }

/* Subtle pop-in when a letter is typed. */
@keyframes bump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Row-shake when guess is invalid (not a word / hard mode violation). */
.guess-row.shake { animation: shake 0.4s ease; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* --- Message bar ----------------------------------------------------------- */

.message {
    min-height: 24px;
    text-align: center;
    color: #c0392b;
    font-weight: 600;
    font-size: 14px;
    margin: 4px 0;
}
[data-theme="dark"] .message { color: #ff7a6b; }

/* Play-again button — shown only after the current game ends. Sits between
   message and keyboard so it's reachable without opening a modal. */
.play-again-btn {
    align-self: center;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin: 4px auto 10px;
    transition: background 0.15s, transform 0.1s;
}
.play-again-btn:hover  { background: var(--primary-dark); }
.play-again-btn:active { transform: scale(0.97); }
.play-again-btn.hidden { display: none; }

/* Challenge-mode banner — replaces the message area when playing a
   shared challenge link. Subtle so it doesn't compete with the board. */
.challenge-banner {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: -4px 0 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.challenge-banner::before { content: "✨ "; }

/* --- Keyboard -------------------------------------------------------------- */

.keyboard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
}

.kb-row {
    display: flex;
    justify-content: center;
    gap: 4px;
}

.kb-key {
    flex: 1 1 0;
    max-width: 44px;
    min-width: 22px;
    height: 52px;
    border: none;
    border-radius: 4px;
    background: var(--bg-subtle);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.15s;
    /* Geometric centering — `<button>`'s default text centering can drift
       when the glyph has asymmetric sidebearings (⌫ in particular is
       weighted to the left in most fonts). Inline-flex centers the actual
       glyph box, killing the empty-space-on-the-left effect. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.kb-key:hover  { filter: brightness(0.95); }
.kb-key:active { filter: brightness(0.85); }
.kb-key.wide   { max-width: 64px; min-width: 44px; font-size: 18px; flex: 1.5 1 0; }
.kb-key.green  { background: #6aaa64; color: #fff; }
.kb-key.yellow { background: #c9b458; color: #fff; }
.kb-key.gray   { background: #787c7e; color: #fff; }

/* Enter is the sole submit key — paint it in the brand color so it's
   obviously different from letter keys at a glance. The .green class
   above doesn't apply to Enter (we never grade the Enter key), so this
   styling stays stable across game states. */
.kb-key-enter {
    background: var(--primary);
    color: #fff;
    font-size: 22px;
}
.kb-key-enter:hover { background: var(--primary-dark); filter: none; }


/* --- Modals ---------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}
.modal.hidden { display: none; }

.modal-card {
    background: var(--bg-card);
    color: var(--text);
    border-radius: 12px;
    padding: 20px;
    max-width: 440px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.modal-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 6px;
}
.modal-close:hover { color: var(--text); }

/* --- Settings modal -------------------------------------------------------- */

.setting-row {
    margin-bottom: 14px;
}
.setting-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pill-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pill {
    flex: 1 1 auto;
    background: var(--bg-subtle);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pill:hover  { border-color: var(--primary); }
.pill.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.length-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
}
.length-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.btn-primary {
    display: block;
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}
.btn-primary:hover    { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
    display: block;
    width: 100%;
    background: var(--bg-subtle);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 6px;
}
.btn-secondary:hover { border-color: var(--primary); }

/* --- Stats modal ----------------------------------------------------------- */

.stats-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    text-align: center;
    margin-bottom: 16px;
}
.stat-cell {
    background: var(--bg-subtle);
    border-radius: 8px;
    padding: 10px 4px;
}
.stat-num {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
}
.stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dist-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 13px;
}
.dist-row-label { width: 16px; color: var(--text-muted); font-weight: 600; }
.dist-row-bar {
    flex: 1;
    height: 18px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}
.dist-row-fill {
    height: 100%;
    background: var(--primary);
    padding-right: 6px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 24px;
}

.recent-games {
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.recent-game {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}
.recent-game:last-child { border-bottom: none; }
.recent-game-word {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 600;
}
.recent-game-status.won  { color: #6aaa64; font-weight: 700; }
.recent-game-status.lost { color: #c0392b; font-weight: 700; }
[data-theme="dark"] .recent-game-status.lost { color: #ff7a6b; }

/* --- Bookmarks modal ------------------------------------------------------- */

.bookmark-item {
    background: var(--bg-subtle);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bookmark-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bookmark-word {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 700;
    font-size: 16px;
}
.bookmark-meta { font-size: 12px; color: var(--text-muted); }
.bookmark-note {
    font-size: 13px;
    color: var(--text);
    word-break: break-word;
    white-space: pre-wrap;
}
.bookmark-delete {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
}
.bookmark-delete:hover { color: #c0392b; }

/* --- Result modal ---------------------------------------------------------- */

.result-headline {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
}
.result-headline.won  { color: #6aaa64; }
.result-headline.lost { color: #c0392b; }
[data-theme="dark"] .result-headline.lost { color: #ff7a6b; }

.result-target {
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 4px;
    padding: 10px 0;
    text-transform: uppercase;
}

/* --- Create-challenge modal ----------------------------------------------- */

.create-intro {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 0 14px;
    line-height: 1.4;
}
.create-word-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 18px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 2px;
    text-align: center;
    box-sizing: border-box;
}
.create-word-input:focus {
    outline: none;
    border-color: var(--primary);
}
.create-error {
    font-size: 13px;
    color: #c0392b;
    font-weight: 600;
    margin-top: 6px;
    min-height: 18px;
}
[data-theme="dark"] .create-error { color: #ff7a6b; }

/* Share-link readout: shown after a successful create. */
.share-row {
    display: flex;
    gap: 6px;
    margin: 6px 0 14px;
}
.share-link-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12px;
    min-width: 0;
}
.share-link-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.share-link-btn:hover { border-color: var(--primary); }
.share-link-btn.copied {
    background: #6aaa64;
    border-color: #6aaa64;
    color: #fff;
}

/* --- Confetti burst (win celebration) ------------------------------------- */
/* Pure-DOM, no canvas, no library. Pieces are absolutely positioned divs
   driven by a single keyframe that handles both fall and rotation. JS
   randomises horizontal position, color, delay, and animation duration.
   Auto-removed from the DOM ~5s after spawn — see launchConfetti() in JS. */

.confetti-burst {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2000;
}
.confetti-piece {
    position: absolute;
    top: -16px;
    width: 8px;
    height: 14px;
    border-radius: 2px;
    opacity: 0.95;
    animation-name: confetti-fall;
    animation-timing-function: cubic-bezier(0.25, 0.9, 0.5, 1);
    animation-fill-mode: forwards;
}
@keyframes confetti-fall {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg);     opacity: 1; }
    100% { transform: translate3d(0, 110vh, 0) rotate(720deg); opacity: 0; }
}
/* Respect users who prefer less motion — disable the celebration entirely. */
@media (prefers-reduced-motion: reduce) {
    .confetti-burst { display: none; }
}
.result-meta {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 14px;
}

.bookmark-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 14px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.bookmark-note-input {
    width: 100%;
    min-height: 64px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.bookmark-char-count {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 2px;
}

.anon-cta {
    background: var(--primary-light);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text);
    margin: 12px 0;
}
.anon-cta a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.anon-cta a:hover { text-decoration: underline; }

/* --- Toast ----------------------------------------------------------------- */
/* The global #toast styles live in /styles.css; this is a fallback that
   ensures our usage works even if a page is loaded standalone. */
.toast.show {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg-card);
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 2000;
    font-size: 14px;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 480px) {
    .wordle-shell { padding: 8px; min-height: calc(100vh - 60px); }
    .game-board { --tile-size: 48px; }
    .kb-key { height: 46px; font-size: 13px; }
    .kb-key.wide { font-size: 10px; }

    /* Long words on mobile: shrink tile WIDTH only (keep height = --tile-size).
       Formula: 48px * 6 / N — same area as a 6-letter grid would use. */
    .game-board[data-length="7"]  { --tile-width: calc(48px * 6 / 7); }
    .game-board[data-length="8"]  { --tile-width: calc(48px * 6 / 8); }
    .game-board[data-length="9"]  { --tile-width: calc(48px * 6 / 9); }
    .game-board[data-length="10"] { --tile-width: calc(48px * 6 / 10); }
    .game-board[data-length="11"] { --tile-width: calc(48px * 6 / 11); }
    .game-board[data-length="12"] { --tile-width: calc(48px * 6 / 12); }
}

/* Long words need smaller tiles even on desktop so the row fits. The
   inline `--row-length` lets us key off that here. The JS clamps to a
   minimum, so this is a finer-grained fallback. */
@media (min-width: 481px) {
    .game-board[data-length="7"] { --tile-size: 52px; }
    .game-board[data-length="8"] { --tile-size: 48px; }
    .game-board[data-length="9"] { --tile-size: 44px; }
    .game-board[data-length="10"] { --tile-size: 40px; }
    .game-board[data-length="11"] { --tile-size: 38px; }
    .game-board[data-length="12"] { --tile-size: 36px; }
}