/* Solo Word Mines: Sweeper Mode */
.solo-header-timer {
    display: none !important;
}

.solo-word-mines-game {
    position: relative;
    width: 100%;
    min-height: 0;
    height: 100%;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: clamp(7px, 1.1vh, 12px);
    padding: clamp(12px, 1.8vw, 18px);
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,.10);
    background:
            radial-gradient(circle at 50% 0%, rgba(250,199,117,.12), transparent 44%),
            linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.10),
            0 18px 40px rgba(21, 12, 33, .22);
}


.word-mines-device-skills {
    width: 100%;
    padding: 8px 14px 14px;
}

.word-mines-device-skills[hidden] {
    display: none !important;
}

.word-mines-device-skills .word-mines-skills {
    justify-content: flex-start;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 7px;
    min-height: 0;
}

.word-mines-device-skills .word-mines-skill {
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

.word-mines-hud {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
}

.word-mines-pill {
    min-width: 68px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    padding: 7px 12px;
    color: #fff2c7;
    background: rgba(20, 12, 33, .76);
    border: 1px solid rgba(250,199,117,.22);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 10px 22px rgba(0,0,0,.16);
    font-weight: 1000;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.word-mines-word-timer {
    min-width: 86px;
}

.word-mines-notice {
    justify-self: center;
    width: min(420px, 100%);
    max-width: 100%;
    height: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(250,199,117,.22);
    color: #fff2c7;
    background: rgba(20, 12, 33, .76);
    box-shadow: 0 14px 30px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.06);
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 32px;
    contain: layout paint;
}

.word-mines-notice.good {
    color: #ffffff;
    border-color: rgba(88, 204, 139, .44);
    background: rgba(42, 136, 87, .76);
}

.word-mines-notice.bad {
    color: #ffffff;
    border-color: rgba(239, 100, 97, .46);
    background: rgba(144, 45, 62, .78);
}

.word-mines-notice.selecting {
    color: #fff2c7;
    letter-spacing: normal;
    font-weight: 900;
}

.word-mines-notice.selecting,
.word-mines-notice.good,
.word-mines-notice.bad {
    height: 32px;
    min-height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13px;
    line-height: 1;
}

.word-mines-board-wrap {
    min-height: 0;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    justify-self: stretch;
    align-self: stretch;
    display: grid;
    place-items: center;
    overflow: visible;
    padding: 2px 0 0;
}

.word-mines-grid {
    display: grid;
    gap: var(--word-mines-cell-gap, 5px);
    width: var(--word-mines-grid-width, auto);
    max-width: 100%;
    max-height: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Cells are intentionally copied close to the original Word Mines mockup. */
.solo-word-mines-game .word-mines-grid > .word-mines-tile,
.solo-word-mines-game .word-mines-grid > .tile {
    position: relative !important;
    width: var(--word-mines-cell-size, 48px) !important;
    height: var(--word-mines-cell-size, 48px) !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    appearance: none;
    -webkit-appearance: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
    cursor: pointer;
    color: #eef0ff !important;
    background: #252c4a !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(15px, calc(var(--word-mines-cell-size, 48px) * .50), 24px) !important;
    line-height: 1 !important;
    transition: background .08s ease !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile:hover,
.solo-word-mines-game .word-mines-grid > .tile:hover {
    transform: none !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-covered,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.covered,
.solo-word-mines-game .word-mines-grid > .tile.covered {
    background: linear-gradient(145deg, #39406b, #2a3055) !important;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.08) !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-covered::before,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.covered::before,
.solo-word-mines-game .word-mines-grid > .tile.covered::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,0) 56%);
    pointer-events: none;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-covered .word-mines-letter,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.covered .word-mines-letter,
.solo-word-mines-game .word-mines-grid > .tile.covered .ch {
    visibility: hidden;
}

/* Revealed but not found yet: visible letter, NOT green. */
.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-revealed,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.cleared,
.solo-word-mines-game .word-mines-grid > .tile.cleared {
    background: #252c4a !important;
    color: #eef0ff !important;
    box-shadow: none !important;
}

/* Cells that were already used in a found word stay green. */
.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-used,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.used,
.solo-word-mines-game .word-mines-grid > .tile.used {
    background: #1c3a2d !important;
    color: #79dfa8 !important;
    box-shadow: inset 0 0 0 1px rgba(121, 223, 168, .16) !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-selected,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.sel,
.solo-word-mines-game .word-mines-grid > .tile.sel {
    z-index: 3;
    transform: none !important;
    background: #ffb020 !important;
    color: #1a1200 !important;
    box-shadow: none !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-mine,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-exploded,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.exploded,
.solo-word-mines-game .word-mines-grid > .tile.exploded {
    background: #ff5470 !important;
    color: #eef0ff !important;
    box-shadow: none !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-boom-now,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.boom-now,
.solo-word-mines-game .word-mines-grid > .tile.boom-now {
    animation: wordMinesBoom .5s ease;
}

@keyframes wordMinesBoom {
    0% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

.word-mines-grid.shake {
    animation: wordMinesShake .35s;
}

@keyframes wordMinesShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.word-mines-letter,
.ch {
    position: relative;
    z-index: 1;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-revealed:not(.is-used):not(.used) .word-mines-letter,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.cleared:not(.is-used):not(.used) .word-mines-letter {
    color: #eef0ff !important;
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-used .word-mines-letter,
.solo-word-mines-game .word-mines-grid > .word-mines-tile.used .word-mines-letter {
    color: #79dfa8 !important;
}

.word-mines-count,
.cnt {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 2;
    font-size: max(10px, calc(var(--word-mines-cell-size, 48px) * .22));
    font-weight: 800;
    line-height: 1;
}

.word-mines-count.c1, .cnt.c1 { color: #6bb4ff; }
.word-mines-count.c2, .cnt.c2 { color: #7ee08a; }
.word-mines-count.c3, .cnt.c3 { color: #ffb020; }
.word-mines-count.c4, .cnt.c4 { color: #ff8a5c; }
.word-mines-count.c5,
.word-mines-count.c6,
.word-mines-count.c7,
.word-mines-count.c8,
.cnt.c5,
.cnt.c6,
.cnt.c7,
.cnt.c8 { color: #ff5470; }

.word-mines-flag,
.flag {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(15,18,32,.35);
    font-size: calc(var(--word-mines-cell-size, 48px) * .46);
}

.word-mines-dock {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: 8px;
    padding-bottom: 2px;
}

.word-mines-found {
    width: 100%;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    overflow: hidden;
}

.word-mines-found span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 999px;
    padding: 4px 10px;
    color: #2f5130;
    background: linear-gradient(180deg, #dff7cc, #a8df83);
    font-size: 12px;
    font-weight: 1000;
    white-space: nowrap;
}

.word-mines-found span.is-found {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-right: 5px;
}

.word-mines-found span.is-found b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.word-mines-word-remove {
    width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(47, 81, 48, .18);
    color: #2f5130;
    font-size: 14px;
    font-weight: 1000;
    line-height: 1;
    cursor: pointer;
}

.word-mines-word-remove:hover {
    background: rgba(47, 81, 48, .28);
}

.word-mines-found span.is-missing,
.word-mines-found span.is-removed {
    color: rgba(255, 242, 199, .66);
    background: rgba(126, 123, 143, .28);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: none;
}

.word-mines-found span.is-removed {
    color: rgba(255, 242, 199, .82);
}

.word-mines-hint {
    max-width: 480px;
    color: rgba(255,242,199,.72);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
}

@media (max-width: 760px) {
    .solo-word-mines-game {
        padding: 10px;
        gap: 7px;
    }

    
    .word-mines-hud {
        gap: 6px;
    }

    .word-mines-pill {
        min-width: 58px;
        padding: 6px 9px;
        font-size: 12px;
    }

    .word-mines-notice {
        width: 100%;
        min-height: 30px;
        padding: 6px 10px;
        font-size: 12px;
        max-width: 100%;
    }

    .word-mines-hint {
        display: none;
    }
}

.duplicate-session-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(17,24,39,.62);
    backdrop-filter: blur(10px);
}

.duplicate-session-card {
    width: min(430px, 100%);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,238,.94));
    box-shadow: 0 28px 80px rgba(42,28,8,.35);
    padding: 24px;
    text-align: center;
    color: #3c2916;
}

.duplicate-session-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg,#ffe59d,#ffb45c);
    box-shadow: 0 14px 32px rgba(238,146,47,.38);
    font-size: 36px;
}

.duplicate-session-card h2 {
    margin: 0 0 8px;
    font-size: 26px;
    line-height: 1.1;
    color: #2f2115;
}

.duplicate-session-card p {
    margin: 0 auto 18px;
    max-width: 330px;
    color: #6d5842;
    font-size: 15px;
    line-height: 1.45;
}

.duplicate-session-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.duplicate-session-btn {
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 900;
    cursor: pointer;
}

.duplicate-session-btn.primary {
    color: #fff;
    background: linear-gradient(135deg,#ff9f43,#ff6f3c);
    box-shadow: 0 14px 28px rgba(255,111,60,.28);
}


.solo-timeup-rewards .word-mines-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: min(260px, 100%);
    padding: 7px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #eef0ff;
    font-weight: 800;
}

.solo-timeup-rewards .word-mines-result-row b {
    color: rgba(238,240,255,.78);
    font-weight: 800;
}

.solo-timeup-rewards .word-mines-result-ok {
    color: #79dfa8;
    font-size: 18px;
}

.solo-timeup-rewards .word-mines-result-panel {
    display: grid;
    gap: 8px;
    width: 100%;
}

.solo-timeup-rewards .word-mines-result-note {
    display: block;
    margin-top: 2px;
    color: rgba(238,240,255,.72);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-align: center;
}

.solo-timeup-rewards .word-mines-result-panel {
    justify-items: center;
    margin-bottom: 12px;
}

.solo-timeup-rewards .word-mines-result-panel + .solo-rewards-title {
    margin-top: 0;
}

.word-mines-skills {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 7px;
    min-height: 42px;
}

.word-mines-skills[hidden] {
    display: none !important;
}

.word-mines-skill {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(112, 203, 255, .24);
    border-radius: 13px;
    color: #eaf8ff;
    background:
            radial-gradient(circle at 18% 0%, rgba(98, 196, 255, .22), transparent 44%),
            linear-gradient(180deg, rgba(16, 76, 126, .86), rgba(4, 28, 54, .94));
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.12),
            inset 0 -1px 0 rgba(0,0,0,.22),
            0 8px 18px rgba(0, 8, 24, .22);
    cursor: pointer;
    font-weight: 1000;
    line-height: 1;
}

.word-mines-skill:not(:disabled):hover {
    border-color: rgba(146, 221, 255, .42);
    background:
            radial-gradient(circle at 18% 0%, rgba(115, 211, 255, .30), transparent 44%),
            linear-gradient(180deg, rgba(21, 92, 149, .92), rgba(5, 34, 64, .96));
    box-shadow:
            inset 0 1px 0 rgba(255,255,255,.16),
            inset 0 -1px 0 rgba(0,0,0,.22),
            0 10px 22px rgba(0, 12, 30, .28);
}

.word-mines-skill:disabled {
    cursor: default;
    opacity: .56;
    color: rgba(223, 241, 250, .66);
    border-color: rgba(99, 150, 183, .18);
    background:
            linear-gradient(180deg, rgba(11, 51, 87, .58), rgba(4, 23, 44, .78));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 14px rgba(0, 8, 20, .16);
}

.word-mines-skill:not(:disabled):active {
    transform: translateY(1px);
}

.word-mines-skill-toggle {
    cursor: pointer;
}

.word-mines-skill-toggle:has(.word-mines-skill-checkbox:disabled) {
    cursor: default;
    opacity: .56;
}

.word-mines-skill-checkbox {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #79d8ff;
    cursor: pointer;
}

.word-mines-skill-checkbox:disabled {
    cursor: default;
}

.word-mines-skill-icon {
    color: #bfefff;
    font-size: 14px;
    line-height: 1;
}

.word-mines-skill:disabled .word-mines-skill-icon {
    opacity: .66;
}

.word-mines-skill-name {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    color: #edf9ff;
    text-shadow: 0 1px 0 rgba(0,0,0,.28);
    font-size: 11px;
    line-height: 1.12;
    text-align: left;
}

.word-mines-skill-coin {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #3e2500;
    background: url("/static/img/emoji/coin.png");
    background-size: 22px;
    /*background: radial-gradient(circle at 35% 28%, #fff5aa, #ffc64a 58%, #d6840d 100%);*/
    /*border: 1px solid rgba(255, 247, 176, .68);*/
    /*box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 4px 10px rgba(0,0,0,.26);*/
    font-size: 10px;
    font-weight: 1000;
    line-height: 1;
}

.word-mines-skill-coin b {
    display: block;
    transform: translateY(.5px);
}

.solo-word-mines-game .word-mines-grid > .word-mines-tile.is-highlighted:not(.is-covered):not(.covered) {
    box-shadow: inset 0 0 0 2px rgba(255, 176, 32, .88), 0 0 16px rgba(255, 176, 32, .42) !important;
}

.word-mines-found span.is-highlighted-word {
    color: #1a1200;
    background: linear-gradient(180deg, #ffd782, #ffb020);
    border-color: rgba(255, 236, 160, .72);
}

@media (max-width: 760px) {
    .word-mines-device-skills {
        padding-left: 10px;
        padding-right: 10px;
    }

    .word-mines-skills,
    .word-mines-device-skills .word-mines-skills {
        --word-mines-skill-gap: 7px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: var(--word-mines-skill-gap);
        min-height: 38px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .word-mines-skill,
    .word-mines-device-skills .word-mines-skill {
        width: calc((100% - var(--word-mines-skill-gap)) / 2);
        flex: 0 0 calc((100% - var(--word-mines-skill-gap)) / 2);
        min-width: calc((100% - var(--word-mines-skill-gap)) / 2);
        max-width: calc((100% - var(--word-mines-skill-gap)) / 2);
        min-height: 36px;
        padding: 6px 8px;
        border-radius: 11px;
        scroll-snap-align: start;
    }

    .word-mines-skill-name {
        font-size: 10px;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .word-mines-skill-coin {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
}