:root {
    --bg: #12151e;
    --board: #1c2030;
    --border: #2a3048;
    --tile-bg: #f4eed8;
    --tile-text: #181028;
    --tile-shadow: #7a7060;
    --hole-bg: #0f1220;
    --hole-border: #252c40;
    --ghost-col: rgba(180, 190, 220, 0.14);
    --accent: #e8b84b;
    --muted: #4a5470;
    --text: #b8c4dc;
    --green: #52b570;
    --wc0-bg: #f5e8c4;
    --wc0-tx: #3a2200;
    --wc0-sh: #9a7020;
    --wc1-bg: #d6ecdb;
    --wc1-tx: #0e3018;
    --wc1-sh: #2a6a38;
    --wc2-bg: #d4e8f5;
    --wc2-tx: #0e2840;
    --wc2-sh: #1a4a7a;
    --wc3-bg: #f2dce0;
    --wc3-tx: #3a1018;
    --wc3-sh: #7a1828;
    --T: 95px;
    --G: 8px;
    --BR: 10px;
}

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

html {
    overflow: hidden;
    height: 100%;
    height: 100dvh;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'DM Mono', monospace;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 14px 52px;
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: .4;
}

/* ── MODE SELECT OVERLAY ─────────────────────── */
#mode-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(8, 10, 18, .96);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 40px 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    overflow-y: auto;
}

#mode-overlay::before,
#mode-overlay::after {
    content: '';
    margin: auto;
}

#mode-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.mo-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -.03em;
    text-align: center;
    animation: win-pop .45s cubic-bezier(.2, .8, .3, 1.2) both;
}

.mo-subtitle {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);
    text-align: center;
    margin-top: -18px;
}

.mo-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 700px;
    width: 100%;
}

.mo-card {
    flex: 1 1 180px;
    max-width: 210px;
    background: #1a1f2e;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: border-color .2s, transform .15s;
    cursor: default;
}

.mo-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
}

.mo-icon {
    font-size: 1.8rem;
    line-height: 1;
}

.mo-name {
    font-family: 'Fraunces', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: .02em;
}

.mo-desc {
    font-size: .62rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.75;
    flex: 1;
}

.mo-play {
    width: 100%;
    padding: 10px 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, transform .1s;
}

.mo-play:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #18100c;
}

.mo-play:active {
    transform: scale(.96);
}

.mo-card[data-mode="easy"] {
    border-color: #1e3028;
}

.mo-card[data-mode="easy"]:hover {
    border-color: #52b570;
}

.mo-card[data-mode="easy"] .mo-play {
    background: #1e3a28;
    border-color: #52b570;
    color: #7de0a0;
}

.mo-card[data-mode="easy"] .mo-play:hover {
    background: #52b570;
    border-color: #52b570;
    color: #0e1c10;
}

.mo-card[data-mode="medium"] {
    border-color: #3a3020;
}

.mo-card[data-mode="medium"]:hover {
    border-color: var(--accent);
}

.mo-card[data-mode="medium"] .mo-play {
    background: #3a2e10;
    border-color: var(--accent);
    color: var(--accent);
}

.mo-card[data-mode="medium"] .mo-play:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #18100c;
}

.mo-card[data-mode="hard"] {
    border-color: #3a1820;
}

.mo-card[data-mode="hard"]:hover {
    border-color: #d05060;
}

.mo-card[data-mode="hard"] .mo-play {
    background: #3a1018;
    border-color: #d05060;
    color: #f08090;
}

.mo-card[data-mode="hard"] .mo-play:hover {
    background: #d05060;
    border-color: #d05060;
    color: #1e0810;
}

/* Solution overlay */
#solution-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(8, 10, 18, .85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

#solution-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.sol-word {
    padding: 9px 16px;
    background: #1c2030;
    border: 1px solid rgba(232, 184, 75, .35);
    border-radius: 8px;
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--text);
    animation: word-in .35s ease both;
}

.sol-word.c0 {
    border-color: rgba(245, 232, 196, .4);
    background: rgba(245, 232, 196, .07);
}

.sol-word.c1 {
    border-color: rgba(214, 236, 219, .4);
    background: rgba(214, 236, 219, .07);
}

.sol-word.c2 {
    border-color: rgba(212, 232, 245, .4);
    background: rgba(212, 232, 245, .07);
}

.sol-word.c3 {
    border-color: rgba(242, 220, 224, .4);
    background: rgba(242, 220, 224, .07);
}

#confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(8, 10, 18, .8);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

#confirm-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.confirm-box {
    background: #1a1f2e;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-width: 260px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .7);
    animation: win-pop .25s cubic-bezier(.2, .8, .3, 1.2) both;
}

.confirm-msg {
    font-family: 'Fraunces', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    text-align: center;
    line-height: 1.4;
}

.confirm-sub {
    font-size: .62rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    margin-top: -12px;
}

.confirm-btns {
    display: flex;
    gap: 10px;
    width: 100%;
}

.confirm-btn {
    flex: 1;
    padding: 10px 0;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: background .15s, transform .1s;
    border: 1px solid var(--border);
}

.confirm-btn:active {
    transform: scale(.96);
}

.confirm-btn.yes {
    background: rgba(208, 80, 96, .15);
    color: #f08090;
    border-color: rgba(208, 80, 96, .4);
}

.confirm-btn.yes:hover {
    background: #d05060;
    color: white;
    border-color: #d05060;
}

.confirm-btn.no {
    background: rgba(82, 181, 112, .1);
    color: #7de0a0;
    border-color: rgba(82, 181, 112, .3);
}

.confirm-btn.no:hover {
    background: #52b570;
    color: #0e1c10;
    border-color: #52b570;
}

.mode-badge {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 500;
    transition: background .3s, color .3s, border-color .3s;
    border: 1px solid transparent;
}

.mode-badge.easy {
    background: rgba(82, 181, 112, .12);
    color: #7de0a0;
    border-color: rgba(82, 181, 112, .3);
}

.mode-badge.medium {
    background: rgba(232, 184, 75, .12);
    color: var(--accent);
    border-color: rgba(232, 184, 75, .3);
}

.mode-badge.hard {
    background: rgba(208, 80, 96, .12);
    color: #f08090;
    border-color: rgba(208, 80, 96, .3);
}

header {
    text-align: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

header h1 {
    font-family: 'Fraunces', serif;
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 4px;
}

header p {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
}

#board {
    background: linear-gradient(145deg, #222840 0%, #181e2e 50%, #1a1f30 100%);
    border: 1px solid #35405a;
    border-radius: 16px;
    padding: calc(var(--G) + 6px);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, .7),
        0 2px 8px rgba(0, 0, 0, .4),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(0, 0, 0, .3);
}

#grid {
    position: relative;
    width: calc(4*var(--T) + 3*var(--G));
    height: calc(4*var(--T) + 3*var(--G));
}

/* ── LINE OVERLAYS ──────────────────────────── */
.line-ov {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    transition: box-shadow .35s, border-color .35s;
}

.line-ov.row {
    height: var(--T);
    left: 0;
    width: calc(4*var(--T)+3*var(--G));
    border-bottom: 2px solid transparent;
    border-radius: 0 0 calc(var(--BR)+2px) calc(var(--BR)+2px);
}

.line-ov.row.solved {
    border-bottom-color: var(--green);
    box-shadow: 0 4px 12px -2px rgba(82, 181, 112, .4);
}

.line-ov.col {
    width: var(--T);
    top: 0;
    height: calc(4*var(--T)+3*var(--G));
    border-right: 2px solid transparent;
    border-radius: 0 calc(var(--BR)+2px) calc(var(--BR)+2px) 0;
}

.line-ov.col.solved {
    border-right-color: var(--green);
    box-shadow: 4px 0 12px -2px rgba(82, 181, 112, .4);
}

.line-ov.row-0 {
    top: 0;
}

.line-ov.row-1 {
    top: calc(1*(var(--T)+var(--G)));
}

.line-ov.row-2 {
    top: calc(2*(var(--T)+var(--G)));
}

.line-ov.row-3 {
    top: calc(3*(var(--T)+var(--G)));
}

.line-ov.col-0 {
    left: 0;
}

.line-ov.col-1 {
    left: calc(1*(var(--T)+var(--G)));
}

.line-ov.col-2 {
    left: calc(2*(var(--T)+var(--G)));
}

.line-ov.col-3 {
    left: calc(3*(var(--T)+var(--G)));
}

#hole-slot {
    position: absolute;
    width: var(--T);
    height: var(--T);
    border-radius: var(--BR);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background:
        radial-gradient(ellipse at 50% 110%, rgba(255, 255, 255, .03) 0%, transparent 70%),
        linear-gradient(175deg, #090c14 0%, #0d1020 60%, #111428 100%);
    box-shadow:
        inset 0 6px 16px rgba(0, 0, 0, .85),
        inset 0 2px 6px rgba(0, 0, 0, .7),
        inset 4px 0 10px rgba(0, 0, 0, .4),
        inset -4px 0 10px rgba(0, 0, 0, .4),
        inset 0 -2px 8px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 255, 255, .07),
        0 0 0 1px rgba(0, 0, 0, .6);
    transition:
        left .13s cubic-bezier(.25, .1, .25, 1),
        top .13s cubic-bezier(.25, .1, .25, 1);
}

#hole-slot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--BR);
    border: 1px solid rgba(255, 255, 255, .06);
    border-bottom-color: rgba(0, 0, 0, .4);
    pointer-events: none;
}

#ghost-letter {
    font-family: 'Fraunces', serif;
    font-size: calc(var(--T) * 0.55);
    font-weight: 900;
    text-transform: uppercase;
    color: rgba(180, 195, 225, 0.35);
    text-shadow:
        0 2px 10px rgba(0, 0, 0, .9),
        0 0 18px rgba(140, 160, 210, .18);
    user-select: none;
    position: relative;
    z-index: 1;
}

/* ── TILES ──────────────────────────────────── */
/* --tile-drop: drop-shadow color (varies per word-colour class)    */
/* --tile-glow: outer glow on solved lines (transparent by default) */
.tile {
    position: absolute;
    width: var(--T);
    height: var(--T);
    border-radius: var(--BR);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: default;
    z-index: 3;
    --tile-drop: #5a5244;
    --tile-glow: transparent;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #faf4e2 0%, #ede4c8 100%);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .85),
        inset -1px -1px 0 rgba(0, 0, 0, .16),
        inset 0 -3px 6px rgba(0, 0, 0, .09),
        0 6px 0 var(--tile-drop),
        0 8px 20px rgba(0, 0, 0, .45),
        0 2px 4px rgba(0, 0, 0, .3);
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .75),
        0 -1px 0 rgba(0, 0, 0, .20),
        0 2px 4px rgba(0, 0, 0, .12);
    color: var(--tile-text);
    transition:
        left .14s cubic-bezier(.3, .0, .2, 1),
        top .14s cubic-bezier(.3, .0, .2, 1),
        background .3s, color .3s, box-shadow .2s, transform .08s;
    will-change: left, top, transform;
}

@keyframes slide-h {
    0% {
        transform: scaleX(1) scaleY(1);
    }

    30% {
        transform: scaleX(.92) scaleY(1.04);
    }

    65% {
        transform: scaleX(1.03) scaleY(.98);
    }

    100% {
        transform: scaleX(1) scaleY(1);
    }
}

@keyframes slide-v {
    0% {
        transform: scaleX(1) scaleY(1);
    }

    30% {
        transform: scaleX(1.04) scaleY(.92);
    }

    65% {
        transform: scaleX(.98) scaleY(1.03);
    }

    100% {
        transform: scaleX(1) scaleY(1);
    }
}

.tile.anim-h {
    animation: slide-h .18s ease-out;
}

.tile.anim-v {
    animation: slide-v .18s ease-out;
}

.tile-letter {
    position: relative;
    z-index: 1;
    pointer-events: none;
    font-family: 'Fraunces', serif;
    font-size: calc(var(--T) * 0.55);
    font-weight: 900;
    text-transform: uppercase;
}

/* Movable tiles */
.tile.can-move {
    cursor: pointer;
}

.tile.can-move::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--BR);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
    transform: translateZ(0);
    animation: glowFade 3s ease-in-out infinite alternate;
    background: radial-gradient(ellipse at 50% 55%, rgba(232, 184, 75, .85) 0%, rgba(232, 184, 75, .4) 45%, transparent 72%);
}

/* Per word-colour glow override — wc-0 matches default so no rule needed */
.tile.can-move.wc-1::before {
    background: radial-gradient(ellipse at 50% 55%, rgba(82, 181, 112, .85) 0%, rgba(82, 181, 112, .4) 45%, transparent 72%);
}

.tile.can-move.wc-2::before {
    background: radial-gradient(ellipse at 50% 55%, rgba(80, 144, 208, .85) 0%, rgba(80, 144, 208, .4) 45%, transparent 72%);
}

.tile.can-move.wc-3::before {
    background: radial-gradient(ellipse at 50% 55%, rgba(208, 80, 96, .85) 0%, rgba(208, 80, 96, .4) 45%, transparent 72%);
}

.tile.can-move {
    animation: glowBright 1.4s ease-in-out infinite alternate, tilebeat 3s ease-in-out infinite alternate;
    will-change: transform, filter;
    transform: translateZ(0);
}

.tile.can-move:hover {
    transform: translateY(-2px) scale(1.035);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .90),
        inset -1px -1px 0 rgba(0, 0, 0, .15),
        inset 0 -3px 6px rgba(0, 0, 0, .08),
        0 9px 0 var(--tile-drop),
        0 12px 28px rgba(0, 0, 0, .55),
        0 3px 6px rgba(0, 0, 0, .30),
        0 0 22px rgba(232, 184, 75, .14);
    filter: brightness(1.04);
}

.tile.can-move:active {
    transform: translateY(4px) scale(.97);
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .70),
        inset -1px -1px 0 rgba(0, 0, 0, .22),
        inset 0 -2px 4px rgba(0, 0, 0, .12),
        0 2px 0 var(--tile-drop),
        0 3px 8px rgba(0, 0, 0, .40);
    filter: brightness(.97);
}

/* ── WORD-COLOUR TILES ───────────────────────── */
/* Only the gradient, text colour, and --tile-drop differ per class. */
/* box-shadow is fully inherited from .tile via the --tile-drop var. */
.tile.wc-0 {
    --tile-drop: var(--wc0-sh);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #f9e8b8 0%, #edda98 100%);
    color: var(--wc0-tx);
}

.tile.wc-1 {
    --tile-drop: var(--wc1-sh);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #d8f0de 0%, #b8dcc4 100%);
    color: var(--wc1-tx);
}

.tile.wc-2 {
    --tile-drop: var(--wc2-sh);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #d8ecf8 0%, #b8d4ec 100%);
    color: var(--wc2-tx);
}

.tile.wc-3 {
    --tile-drop: var(--wc3-sh);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #f5dce0 0%, #e4c0c8 100%);
    color: var(--wc3-tx);
}

/* ── LINE-SOLVED TINT ────────────────────────── */
/* Shared shadow (--tile-glow provides the per-colour outer glow). */
.tile.line-solved {
    box-shadow:
        inset 2px 2px 0 rgba(255, 255, 255, .85),
        inset -1px -1px 0 rgba(0, 0, 0, .14),
        0 6px 0 var(--tile-drop),
        0 8px 20px rgba(0, 0, 0, .4),
        0 0 22px var(--tile-glow);
}

.tile.wc-0.line-solved {
    --tile-glow: rgba(255, 200, 50, .22);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #ffe898 0%, #f0d060 100%);
}

.tile.wc-1.line-solved {
    --tile-glow: rgba(60, 180, 80, .18);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #a8e8b8 0%, #80cc98 100%);
}

.tile.wc-2.line-solved {
    --tile-glow: rgba(60, 150, 220, .18);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #98d0f0 0%, #70b4e4 100%);
}

.tile.wc-3.line-solved {
    --tile-glow: rgba(220, 60, 90, .18);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .0) 38%),
        linear-gradient(180deg, #f4a8b8 0%, #e08898 100%);
}

@keyframes flash-in {
    0% {
        filter: brightness(1)
    }

    30% {
        filter: brightness(1.55)
    }

    100% {
        filter: brightness(1)
    }
}

.tile.flash {
    animation: flash-in .55s ease forwards;
}

/* ── LAYOUT ─────────────────────────────────── */
.layout {
    display: grid;
    grid-template-columns: auto 200px;
    grid-template-areas: "board words" "board progress";
    gap: 16px;
    align-items: start;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.board-wrap {
    grid-area: board;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sidebar-words {
    grid-area: words;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 200px;
}

.sidebar-prog {
    grid-area: progress;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 200px;
}



/* ── PANELS ─────────────────────────────────── */
.panel {
    background: #1a1f2e;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 13px;
}

.panel-label {
    font-size: .57rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--muted);
    margin-bottom: 10px;
}

/* Stat value colour tracks current mode */
.stat-val {
    color: #7de0a0;
}

/* easy (default) */
body.mode-medium .stat-val {
    color: var(--accent);
}

body.mode-hard .stat-val {
    color: #f08090;
}

#orient-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .64rem;
    color: var(--accent);
    letter-spacing: .06em;
    margin-bottom: 10px;
    padding: 6px 8px;
    background: rgba(232, 184, 75, .06);
    border: 1px solid rgba(232, 184, 75, .2);
    border-radius: 6px;
}

.legend {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.leg-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .62rem;
    color: var(--muted);
}

.leg-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    flex-shrink: 0;
}

.leg-row.s0 .leg-swatch {
    background: var(--wc0-bg);
}

.leg-row.s1 .leg-swatch {
    background: var(--wc1-bg);
}

.leg-row.s2 .leg-swatch {
    background: var(--wc2-bg);
}

.leg-row.s3 .leg-swatch {
    background: var(--wc3-bg);
}

.btn {
    width: 100%;
    background: #1a1f2e;
    color: var(--text);
    border: 1px solid var(--border);
    font-family: 'DM Mono', monospace;
    font-size: .7rem;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: border-color .15s, color .15s, transform .1s;
}

.btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn:active {
    transform: scale(.97);
}

.help-text {
    font-size: .62rem;
    line-height: 1.75;
    color: var(--muted);
}

.help-text .hi {
    color: var(--text);
}

/* ── WIN OVERLAY ────────────────────────────── */
#win-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 10, 18, .93);
    backdrop-filter: blur(18px);
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s;
}

#win-overlay.show {
    opacity: 1;
    pointer-events: all;
}

.win-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    color: var(--accent);
    text-align: center;
    animation: win-pop .5s cubic-bezier(.2, .8, .3, 1.3) both;
}

@keyframes win-pop {
    from {
        transform: scale(.4) translateY(20px);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

.win-words {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 480px;
}

.win-word {
    padding: 10px 20px;
    background: #1a1f2e;
    border: 1px solid rgba(232, 184, 75, .4);
    border-radius: 8px;
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--text);
    animation: word-in .4s ease both;
}

@keyframes word-in {
    from {
        opacity: 0;
        transform: translateY(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.win-meta {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted);
    text-align: center;
    line-height: 1.9;
}

.win-meta strong {
    color: var(--accent);
}

.win-btn {
    padding: 12px 36px;
    background: var(--accent);
    color: #18100c;
    font-family: 'DM Mono', monospace;
    font-size: .8rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    animation: word-in .4s ease .65s both;
}

/* ── SHARE CARD ──────────────────────────────── */
.share-card {
    background: #141828;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    animation: word-in .45s ease .3s both;
}

.share-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.share-cell {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    border: 1px solid rgba(255, 255, 255, .06);
    background: #1c2030;
}

.share-cell.sc-hole {
    background: #0c0f18;
    border-style: dashed;
}

.share-cell.sc-solved {
    border-color: rgba(82, 181, 112, .35);
}

.share-tagline {
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);
}

.share-row {
    display: flex;
    gap: 10px;
    animation: word-in .4s ease .5s both;
}

.share-btn,
.copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'DM Mono', monospace;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    border: 1px solid;
    transition: background .15s, transform .1s, color .15s;
}

.share-btn:active,
.copy-btn:active {
    transform: scale(.96);
}

.share-btn {
    background: var(--accent);
    color: #18100c;
    border-color: var(--accent);
}

.share-btn:hover {
    background: #f5cf70;
}

.copy-btn {
    background: transparent;
    color: var(--muted);
    border-color: var(--border);
}

.copy-btn:hover {
    border-color: var(--text);
    color: var(--text);
}

.copy-toast {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--green);
    opacity: 0;
    transition: opacity .25s;
    height: 14px;
}

.copy-toast.show {
    opacity: 1;
}

/* ── WORD ROW ─────────────────────────────────── */
.word-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 5px;
    transition: border-color .4s, background .4s;
}

.word-row:last-child {
    margin-bottom: 0;
}

.word-row.solved-row {
    border-color: rgba(82, 181, 112, .4);
    background: rgba(82, 181, 112, .05);
}

.word-letters {
    display: flex;
    gap: 3px;
    flex: 1;
}

.wl-wrap {
    perspective: 300px;
}

.wl {
    width: 25px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Fraunces', serif;
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: background .3s, color .3s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.wl.c0 {
    background: var(--wc0-bg);
    color: var(--wc0-tx);
}

.wl.c1 {
    background: var(--wc1-bg);
    color: var(--wc1-tx);
}

.wl.c2 {
    background: var(--wc2-bg);
    color: var(--wc2-tx);
}

.wl.c3 {
    background: var(--wc3-bg);
    color: var(--wc3-tx);
}

.wl.hidden {
    background: var(--border);
    color: transparent;
}

.word-row.solved-row .wl:not(.hidden) {
    filter: brightness(1.08) saturate(1.2);
}

@keyframes wl-flip-in {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0deg);
        opacity: 1;
    }
}

.wl.flip-reveal {
    animation: wl-flip-in .35s ease both;
}

.word-pip {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .5rem;
    color: transparent;
    transition: all .35s;
    flex-shrink: 0;
    transform: scale(0);
    opacity: 0;
}

.word-row.solved-row .word-pip {
    border-color: var(--green);
    background: var(--green);
    color: white;
    transform: scale(1);
    opacity: 1;
}

/* Ghost letter word-group colours */
#ghost-letter.gh-wc0 {
    color: rgba(245, 232, 196, .5);
}

#ghost-letter.gh-wc1 {
    color: rgba(214, 236, 219, .5);
}

#ghost-letter.gh-wc2 {
    color: rgba(212, 232, 245, .5);
}

#ghost-letter.gh-wc3 {
    color: rgba(242, 220, 224, .5);
}

/* Win tile flash animations */
@keyframes win-flash-unsolved {
    0% {
        filter: brightness(1);
    }

    40% {
        filter: brightness(1.3) saturate(.4);
        background-color: #c8b898;
    }

    100% {
        filter: brightness(1);
    }
}

@keyframes win-flash-solved {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.5);
    }

    100% {
        filter: brightness(1);
    }
}

.tile.win-flash-u {
    animation: win-flash-unsolved .35s ease forwards;
}

.tile.win-flash-s {
    animation: win-flash-solved .35s ease forwards;
}

/* ── HOLE POP ─────────────────────────────────── */
#hole-slot.hole-pop {
    animation: holePop .6s cubic-bezier(.2, .8, .3, 1.4) forwards;
    z-index: 10;
}

#hole-slot.hole-wc-0.hole-pop {
    --hp-bg1: #f9e8b8;
    --hp-bg2: #edda98;
    --hp-sh: var(--wc0-sh);
    --hp-glow: rgba(232, 184, 75, .6);
}

#hole-slot.hole-wc-1.hole-pop {
    --hp-bg1: #d8f0de;
    --hp-bg2: #b8dcc4;
    --hp-sh: var(--wc1-sh);
    --hp-glow: rgba(82, 181, 112, .6);
}

#hole-slot.hole-wc-2.hole-pop {
    --hp-bg1: #d8ecf8;
    --hp-bg2: #b8d4ec;
    --hp-sh: var(--wc2-sh);
    --hp-glow: rgba(80, 144, 208, .6);
}

#hole-slot.hole-wc-3.hole-pop {
    --hp-bg1: #f5dce0;
    --hp-bg2: #e4c0c8;
    --hp-sh: var(--wc3-sh);
    --hp-glow: rgba(208, 80, 96, .6);
}

#hole-slot.hole-pop:not([class*="hole-wc"]) {
    --hp-bg1: #faf4e2;
    --hp-bg2: #ede4c8;
    --hp-sh: #5a5244;
    --hp-glow: rgba(232, 184, 75, .5);
}

@keyframes holePop {
    0% {
        transform: scale(.85) translateY(4px);
        background: linear-gradient(175deg, #090c14, #0d1020);
        box-shadow: inset 0 6px 16px rgba(0, 0, 0, .85);
    }

    40% {
        transform: scale(1.12) translateY(-10px);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%),
            linear-gradient(180deg, var(--hp-bg1), var(--hp-bg2));
        box-shadow:
            inset 2px 2px 0 rgba(255, 255, 255, .9),
            0 6px 0 var(--hp-sh),
            0 16px 32px rgba(0, 0, 0, .55),
            0 0 32px var(--hp-glow);
    }

    70% {
        transform: scale(1.04) translateY(-4px);
    }

    100% {
        transform: scale(1) translateY(0);
        background:
            linear-gradient(160deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 38%),
            linear-gradient(180deg, var(--hp-bg1), var(--hp-bg2));
        box-shadow:
            inset 2px 2px 0 rgba(255, 255, 255, .9),
            inset -1px -1px 0 rgba(0, 0, 0, .18),
            0 6px 0 var(--hp-sh),
            0 8px 20px rgba(0, 0, 0, .5),
            0 0 20px var(--hp-glow);
    }
}

#hole-slot.hole-pop #ghost-letter {
    animation: ghostReveal .6s ease .2s both;
}

@keyframes ghostReveal {
    from {
        color: rgba(180, 195, 225, .35);
    }

    to {
        color: var(--hp-glow, rgba(232, 184, 75, .9));
        font-size: calc(var(--T) * 0.55);
        text-shadow: 0 1px 0 rgba(255, 255, 255, .75), 0 -1px 0 rgba(0, 0, 0, .2);
    }
}

/* ── PROGRESS PANEL ──────────────────────────── */
.stats {
    display: flex;
}

.stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px;
}

.stat+.stat {
    border-left: 1px solid var(--border);
}

.stat-val {
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    transition: color .4s;
}

.stat-lbl {
    font-size: .53rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
}

/* ── HINT BAR ───────────────────────────────── */
.hint-bar {
    font-size: .6rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    text-align: center;
    height: 16px;
    transition: color .3s;
}

.hint-bar.lit {
    color: var(--accent);
}

@keyframes glowFade {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes tilebeat {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }

    50% {
        filter: brightness(1.2);
        transform: scale(.95);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

/* ── FLIP ICON PANEL ─────────────────────────── */
.icon-panel {
    background: #1a1f2e;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    perspective: 900px;
}

.icon-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    background: #1a1f2e;
}

.icon-tab {
    flex: 1;
    padding: 9px 4px;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .15s, border-color .15s;
    line-height: 1;
}

.icon-tab:hover {
    background: rgba(255, 255, 255, .04);
}

.icon-tab.active {
    border-bottom-color: var(--accent);
}

.icon-panel-body {
    flex: 1;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    min-height: 0;
}

.icon-panel-body.flipped {
    transform: rotateY(180deg);
}

.panel-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    padding: 12px;
}

.panel-front {
    position: relative;
}

.panel-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── STATS PANES ─────────────────────────────── */
.mode-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mode-tab {
    flex: 1;
    padding: 5px 4px;
    text-align: center;
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    font-family: 'DM Mono', monospace;
}

.mode-tab.active {
    border-bottom-color: var(--accent);
    color: var(--text);
}

.mode-tab:hover {
    color: var(--text);
}

.stats-pane {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 10px 0 0;
    overflow: hidden;
}

.stats-pane.active {
    display: flex;
}

.st-row {
    display: flex;
    gap: 5px;
}

.st-cell {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.st-val {
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: var(--accent);
    transition: color .3s;
}

.st-lbl {
    font-size: .48rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--muted);
    text-align: center;
}

.stats-pane[data-m="easy"] .st-val {
    color: #7de0a0;
}

.stats-pane[data-m="medium"] .st-val {
    color: var(--accent);
}

.stats-pane[data-m="hard"] .st-val {
    color: #f08090;
}

.st-bar-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
}

.st-bar-lbl {
    font-size: .5rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
}

.st-bar-track {
    height: 5px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.st-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--green);
    transition: width .6s ease .1s;
}

.st-streak-pair {
    display: flex;
    gap: 5px;
}

.st-streak-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 7px;
    font-size: .55rem;
    color: var(--muted);
}

.st-streak-val {
    font-size: .9rem;
    font-weight: 500;
    color: var(--accent);
    margin-left: 4px;
}

/* ── HELP TEXT ───────────────────────────────── */
.help-section {
    font-size: .62rem;
    line-height: 1.75;
    color: var(--muted);
    padding: 12px 0 0;
    overflow: hidden;
}

.help-section .hi {
    color: var(--text);
}

/* Mode overlay misc */
.mo-play-random {
    background: transparent !important;
    opacity: .7;
    font-size: .65rem !important;
    padding: 7px 0 !important;
}

.mo-play-random:hover {
    opacity: 1;
}

.mo-daily-status {
    font-size: .6rem;
    min-height: 18px;
    text-align: center;
    letter-spacing: .06em;
}

.mo-daily-done {
    color: var(--green);
    font-size: .62rem;
}

.mo-play[disabled] {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

.daily-badge {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(232, 184, 75, .15);
    color: var(--accent);
    border: 1px solid rgba(232, 184, 75, .3);
    animation: word-in .4s ease both;
}

@media (max-width: 660px) {
    :root {
        --G: 6px;
        --board-pad: 24px;
        --avail-w: calc(100vw - 28px);
        --avail-h: calc(100dvh - 350px);
        --t-w: calc((var(--avail-w) - 3 * var(--G) - var(--board-pad)) / 4);
        --t-h: calc((var(--avail-h) - 3 * var(--G) - var(--board-pad)) / 4);
        --T: max(20px, min(79px, min(var(--t-w), var(--t-h))));
    }

    .layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "board board" "words progress";
        width: 100%;
        max-width: 400px;
        gap: 10px;
        align-items: stretch;
    }

    .board-wrap {
        width: 100%;
        align-items: center;
    }

    .sidebar-words,
    .sidebar-prog {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        height: 100%;
    }

    .sidebar-words .panel {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    #word-targets {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .sidebar-prog .panel {
        flex: 1;
    }

    .panel-label {
        font-size: .52rem;
        margin-bottom: 8px;
    }

    .stat-val {
        font-size: 1.1rem;
    }

    .stat-lbl {
        font-size: .49rem;
    }

    /* 1. Compact Panels General */
    .panel,
    .panel-face {
        padding: 8px;
        /* Reduce inner spacing of all panels */
    }

    .panel-label {
        font-size: 0.5rem;
        margin-bottom: 6px;
    }

    /* 2. Compact Target Words */
    .word-row {
        padding: 4px 6px;
        /* Tighter padding around each word */
        gap: 4px;
        margin-bottom: 3px;
    }

    .wl {
        width: 20px;
        /* Smaller letter tiles */
        height: 24px;
        font-size: 0.75rem;
    }

    .word-pip {
        width: 12px;
        /* Smaller checkmark circle */
        height: 12px;
        font-size: 0.45rem;
    }

    /* 3. Compact Stats (Both main progress and back-panel stats) */
    .stat {
        padding: 4px 2px;
    }

    .stat-val {
        font-size: 1rem;
        /* Smaller numbers */
    }

    .stat-lbl {
        font-size: 0.45rem;
    }

    .st-cell {
        padding: 4px 2px;
    }

    .st-val {
        font-size: 0.9rem;
    }

    .st-lbl {
        font-size: 0.45rem;
    }

    .st-streak-cell {
        padding: 4px 6px;
        font-size: 0.5rem;
    }

    .st-streak-val {
        font-size: 0.8rem;
    }

    /* 4. Compact Help Section & Tabs */
    .icon-tab {
        padding: 6px 4px;
        /* Thinner tabs */
    }

    .help-section {
        font-size: 0.55rem;
        /* Smaller text */
        line-height: 1.5;
        /* Tighter line height */
        padding: 8px 0 0;
    }
}

/* 2. SHORT SCREEN OVERRIDE (iPhone SE, etc.) */
@media (max-width: 660px) and (max-height: 740px) {
    body {
        padding: 10px 10px 15px;
    }

    header h1 {
        font-size: 1.6rem;
        /* Slightly smaller header */
        margin-bottom: 2px;
    }

    :root {
        /* INCREASED from 250px to 330px to force the board to leave enough room for the panels */
        --avail-h: calc(100dvh - 330px);
    }

    /* -- SQUISH THE PANEL CONTENTS -- */
    .panel {
        padding: 6px;
    }

    .panel-face {
        padding: 8px;
        overflow-y: auto;
        /* Allows scrolling inside the panel if it gets too tight */
    }

    .icon-tab {
        padding: 6px 4px;
        /* Thinner tabs */
    }

    /* Shrink the target words list so it fits vertically */
    .word-row {
        padding: 4px 6px;
        margin-bottom: 4px;
    }

    .wl {
        width: 20px;
        height: 20px;
        font-size: .65rem;
    }

    .mode-tab {
        padding: 0px;
    }

    .stat-val {
        font-size: 1rem;
    }
}