/* =============================================================================
   Russian Hangman + Anagram — styles
   -----------------------------------------------------------------------------
   Mobile-first vertical layout: hangman SVG + lives on top, then the tile
   row, then the keyboard. No side-by-side anywhere — works the same on
   phone and desktop.
   Tile + keyboard design intentionally mirrors russian-wordle.css so both
   games feel like they belong to the same family.
   ========================================================================== */

/* ── Global hidden utility — must come first ────────────────────────────── */
.hidden { display: none !important; }

/* ── Shell / layout ─────────────────────────────────────────────────────── */

.hangman-shell {
    max-width: 520px;
    margin: 0 auto;
    padding: 12px 12px 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: calc(100vh - 72px);
    gap: 10px;
}

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

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

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

/* Icon buttons in the topbar — mirrors the wordle styling so both
   games' headers look identical (card-bg pill with a thin border,
   18px glyph). Without this the buttons inherit native browser
   styling, which is much chunkier and white on dark mode. */
.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; }

/* ── Hangman drawing + lives ────────────────────────────────────────────── */

.hangman-drawing-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hangman-svg {
    width: 170px;
    height: 195px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--bg-subtle);
    overflow: visible;
}

/* Default = dotted preview. Each line/circle starts with a dashed outline at
   reduced opacity so the user can see what the full figure looks like before
   they ever get a wrong guess. */
.hangman-svg line,
.hangman-svg circle,
.hangman-svg path {
    stroke: var(--text);
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 2 4;
    opacity: 0.32;
    transition: opacity 0.25s, stroke-dasharray 0.25s;
}

/* The face's path (mouth) needs a thinner stroke for proportion. */
#hm-face path { stroke-width: 2.2; }
#hm-face line { stroke-width: 2.5; }

/* Solidified parts: full stroke, full opacity. */
.hm-part.solid line,
.hm-part.solid circle,
.hm-part.solid path {
    stroke-dasharray: none;
    opacity: 1;
    stroke-width: 3.5;
}
#hm-face.solid path { stroke-width: 2.6; }
#hm-face.solid line { stroke-width: 3; }

/* Head body fill once solidified, for drama. */
#hm-head.solid circle { fill: var(--bg-card); }

/* Reveal animation when a part flips to solid. */
.hm-part.solid.reveal {
    animation: hm-appear 0.40s ease;
    transform-origin: center;
}

@keyframes hm-appear {
    0%   { opacity: 0.32; transform: scale(0.85); }
    50%  { opacity: 1;    transform: scale(1.08); }
    100% { opacity: 1;    transform: scale(1);    }
}

/* Lives counter */
.lives-counter {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.3px;
    line-height: 1.4;
    /* Avoid weird wrapping by keeping hearts tight. */
    word-spacing: 1px;
}

.lives-counter .lives-num   { color: var(--text); font-size: 15px; }
.lives-counter .lives-empty { color: #c0392b;     font-size: 15px; opacity: 0.6; }
[data-theme="dark"] .lives-counter .lives-empty { color: #ff7a6b; }

/* ── Tile section (centered, full width) ───────────────────────────────── */

.tile-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.tile-area {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-content: center;
    min-height: 60px;
    padding: 4px 0;
}

/* ── Individual tiles ──────────────────────────────────────────────────── */

.hm-tile {
    --tile-sz: 52px;
    width: var(--tile-sz);
    height: var(--tile-sz);
    border: 2px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: calc(var(--tile-sz) * 0.46);
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: transform 0.12s, border-color 0.15s, background 0.2s, box-shadow 0.15s;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
}

/* Blank (no letter yet) */
.hm-tile.blank {
    border-color: var(--border);
    border-style: dashed;
    color: transparent;
}

/* Yellow — letter is in the word but the player still has to commit it. */
.hm-tile.yellow {
    background: #c9b458;
    border-color: #c9b458;
    color: #fff;
}

/* Green — locked correctly at this position. */
.hm-tile.green {
    background: #6aaa64;
    border-color: #6aaa64;
    color: #fff;
}

/* Draggable yellow tiles get a grab cursor. */
.hm-tile.draggable {
    cursor: grab;
    touch-action: none;
}
.hm-tile.draggable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.hm-tile.dragging {
    opacity: 0.4;
    cursor: grabbing;
}
.hm-tile.drag-over {
    box-shadow: 0 0 0 3px var(--primary);
    transform: scale(1.06);
}

/* ── Animation: slide-in from the right edge (subsequent correct guesses) */
.hm-tile.slide-in-right {
    animation: slide-in-right 0.45s cubic-bezier(0.2, 0.85, 0.4, 1.05);
}
@keyframes slide-in-right {
    0%   { transform: translateX(120%); opacity: 0; }
    70%  { transform: translateX(-6px); opacity: 1; }
    100% { transform: translateX(0);    opacity: 1; }
}

/* ── Animation: travel from spawn slot to true position (first guess) ──
   The JS sets `--travel-x` and `--travel-y` to the delta px each tile
   should move. Tile starts at slot 0 visually (yellow), animates to delta,
   then JS swaps it into place and applies .green for the locked color. */
.hm-tile.travel {
    animation: hm-travel 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 5;
}
@keyframes hm-travel {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(var(--travel-x, 0), var(--travel-y, 0)); }
}

/* ── Animation: wiggle right-1/left-1 (first guess lands at slot 0) ───── */
.hm-tile.wiggle {
    animation: hm-wiggle 0.65s ease;
}
@keyframes hm-wiggle {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(110%); }
    50%  { transform: translateX(0); }
    75%  { transform: translateX(-110%); }
    100% { transform: translateX(0); }
}

/* ── Pop animation when a tile turns green (after Enter or first-guess lock) */
.hm-tile.pop-green {
    animation: tile-pop-green 0.35s ease;
}
@keyframes tile-pop-green {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.16); box-shadow: 0 0 0 4px rgba(106,170,100,0.45); }
    100% { transform: scale(1); }
}

/* ── Animation: wrong-position blink (red ↔ yellow, a few times) ──────── */
.hm-tile.wrong-blink {
    animation: hm-wrong-blink 0.95s ease;
}
@keyframes hm-wrong-blink {
    0%   { background: #c9b458; border-color: #c9b458; }
    15%  { background: #e74c3c; border-color: #e74c3c; }
    30%  { background: #c9b458; border-color: #c9b458; }
    45%  { background: #e74c3c; border-color: #e74c3c; }
    60%  { background: #c9b458; border-color: #c9b458; }
    75%  { background: #e74c3c; border-color: #e74c3c; }
    100% { background: #c9b458; border-color: #c9b458; }
}

/* ── Win celebration flash on green tiles ─────────────────────────────── */
.hm-tile.win-flash {
    animation: win-flash 0.6s ease;
}
@keyframes win-flash {
    0%   { background: #6aaa64; border-color: #6aaa64; }
    50%  { background: #8bc34a; border-color: #8bc34a; box-shadow: 0 0 0 4px rgba(106,170,100,0.5); }
    100% { background: #6aaa64; border-color: #6aaa64; }
}

/* ── Message bar ──────────────────────────────────────────────────────── */

.hangman-message {
    min-height: 22px;
    text-align: center;
    color: #c0392b;
    font-weight: 600;
    font-size: 13px;
}
[data-theme="dark"] .hangman-message { color: #ff7a6b; }

/* ── Keyboard (Wordle-style) ──────────────────────────────────────────── */

.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: 42px;
    min-width: 20px;
    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, transform 0.08s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.kb-key.wide {
    flex: 1.6 1 0;
    max-width: 64px;
    font-size: 16px;
}

.kb-key:hover  { filter: brightness(0.95); }
.kb-key:active { filter: brightness(0.85); transform: scale(0.96); }
.kb-key.green  { background: #6aaa64; color: #fff; }
.kb-key.yellow { background: #c9b458; color: #fff; }
.kb-key.gray   { background: #787c7e; color: #fff; }
.kb-key:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

/* Enter-key — always blue (matches the wordle keyboard) so it reads
   as the primary action on the keyboard. The reminder blink below
   then flashes it against this blue base, which is what the user
   sees as the "blink blink" notification on a correct guess. */
.kb-key-enter {
    background: var(--primary);
    color: #fff;
}
.kb-key-enter:hover { background: var(--primary-dark); filter: none; }

/* Enter-key reminder blink — fired by JS each time a new yellow appears
   to teach the user the key exists. */
.kb-key-enter.blink {
    animation: enter-blink 0.9s ease;
}
@keyframes enter-blink {
    0%   { background: var(--bg-subtle); box-shadow: none; }
    25%  { background: var(--primary, #4a90e2); color: #fff;
           box-shadow: 0 0 0 3px rgba(74,144,226,0.35); }
    50%  { background: var(--bg-subtle); box-shadow: none; }
    75%  { background: var(--primary, #4a90e2); color: #fff;
           box-shadow: 0 0 0 3px rgba(74,144,226,0.35); }
    100% { background: var(--bg-subtle); box-shadow: none; }
}

/* ── Play again button ────────────────────────────────────────────────── */

.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: 6px 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; }

/* ── 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: 400px;
    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); }

.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: 80px;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-subtle);
    color: var(--text);
}

.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); }

/* ── Result modal content ─────────────────────────────────────────────── */

.result-headline {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.result-headline.won  { color: #6aaa64; }
.result-headline.lost { color: #c0392b; }

[data-theme="dark"] .result-headline.lost { color: #ff7a6b; }

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

.result-meta {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 14px;
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.toast {
    position: fixed;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg-card);
    padding: 10px 16px;
    border-radius: 8px;
    z-index: 2000;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s, bottom 0.2s;
}
.toast.show {
    bottom: 24px;
    opacity: 1;
}

/* ── Confetti (win celebration) ───────────────────────────────────────── */

.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; }
}

@media (prefers-reduced-motion: reduce) {
    .confetti-burst { display: none; }
    .hm-tile.travel,
    .hm-tile.wiggle,
    .hm-tile.slide-in-right,
    .hm-tile.pop-green,
    .hm-tile.wrong-blink,
    .hm-tile.win-flash {
        animation: none !important;
    }
}

/* =============================================================================
   Challenge-mode banner — shown above the tile area when playing a shared link.
   Mirrors the wordle .challenge-banner styling for visual consistency.
   ============================================================================= */
.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: "✨ "; }

/* =============================================================================
   Create-challenge modal — same shape as wordle's create modal so users
   transitioning between the two games see the same surface area.
   ============================================================================= */

.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;
}