:root {
    --keyboard-space: 30vh; /* fallback - will be calculated dynamically */
    --page-padding: 0rem;
    --max-container-width: 720px;
    
    /* Calculated keyboard height - all values proportional to key-width for consistency */
    --key-width: clamp(1.7rem, 5.5vw, 2.1rem);
    --key-height: calc(var(--key-width) * 1.4);
    --keyboard-gap: calc(var(--key-width) * 0.2);        /* gap between rows, proportional to key size */
    --keyboard-padding: calc(var(--key-width) * 0.4);    /* keyboard padding, proportional to key size */
    --handle-height: calc(var(--key-width) * 0.8);       /* handle height, proportional to key size */
    --handle-padding: calc(var(--key-width) * 0.2);      /* handle padding, proportional to key size */
    --keyboard-border: 2px;                              /* fixed border */
    --keyboard-buffer: calc(var(--key-width) * 0.3);     /* bottom buffer, proportional to key size */
    
    --keyboard-height: calc(
        (var(--key-height) * 4) +            /* 4 rows of keys */
        (var(--keyboard-gap) * 3) +          /* 3 gaps between rows */
        (var(--keyboard-padding) * 2) +      /* keyboard padding top/bottom */
        var(--keyboard-border) +             /* keyboard border-top */
    );
    
    /* Crossword color palette - lighter, more paper-like */
    --paper-bg: #f9f7f3;
    --paper-light: #fcfaf8;
    --paper-dark: #e6e2db;
    --ink-dark: #1a1815;
    --ink-light: #3a3530;
    --wall-dark: #2a2520;
    --wall-light: #1a1815;
    --highlight-current: #fffbee;
    --highlight-mode: #ecf8fb;
    --accent-wall: #d4696b;
}

html, body { -webkit-text-size-adjust: 100%; }
body { 
    font-family: 'Segoe UI', 'Helvetica Neue', system-ui, Roboto, Arial; 
    margin: 0; 
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
        radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
        radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
        linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
    color: var(--ink-dark); 
    -webkit-font-smoothing: antialiased; 
    font-size: 100%;
    min-height: 100vh;
}

main { 
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    padding: var(--page-padding); 
    min-height: 100vh; 
    box-sizing: border-box; 
}

/* On mobile devices, expand main to fill more space when keyboard is collapsed */
@media (max-width: 900px) {
    main {
        min-height: calc(100vh - var(--keyboard-space));
    }
}
.container { 
    width: fit-content;  /* Size exactly to content */
    max-width: 100%;  /* But don't exceed viewport */
}

#grid-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    display: flex;
    justify-content: center;  /* Center small grids */
}
crossword-grid { display: block; margin: 0 auto; }
mobile-keyboard { display: block; }
h2, h3 { 
    margin: 0.5rem 0; 
    color: #f5f1ed; 
    text-align: center; 
    font-weight: 600;
    letter-spacing: 0.01em;
}

crossword-grid { display: block; margin: 0 auto; }


.grid-container {
    display: inline-block;
    gap: 0;
    overflow: visible;
    /* padding only top and bottom for better centering */
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.grid {
    display: grid; 
    gap: 0;
    background: transparent;
    padding: 0;
    grid-template-columns: repeat(var(--cols), var(--cell-size));
    border: none;
}

/* Grid glow animation removed - now using solution letter glow */

.cell {
    width: var(--cell-size, 4rem); 
    height: var(--cell-size, 4rem); 
    display: flex; 
    align-items: center; 
    justify-content: center;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.025) 4px, rgba(0,0,0,.025) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.04) 4px, rgba(255,255,255,.04) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.05) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 900px 700px at 25% 35%, rgba(255,255,255,.35) 0%, transparent 45%),
        radial-gradient(ellipse 700px 600px at 75% 65%, rgba(0,0,0,.03) 0%, transparent 50%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.025) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.025) 0%, transparent 70%),
        linear-gradient(135deg, #fefdfb 0%, #f9f7f3 100%);
    color: var(--ink-dark); 
    font-weight: 700; 
    font-size: 1.05rem; 
    user-select: none; 
    touch-action: manipulation;
    border: 1px solid #c0bbb5;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.9), 
        inset 0 -0.5px 1px rgba(0,0,0,0.03), 
        0 0.5px 1px rgba(0,0,0,0.05),
        inset -1px -1px 2px rgba(0,0,0,0.015),
        inset 1px 1px 2px rgba(255,255,255,0.5);
    border-radius: 0; 
    box-sizing: border-box;
    position: relative;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cell:active {
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), inset 0 0 4px rgba(0,0,0,0.03);
}

.cell.wall { 
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.025) 3px, rgba(0,0,0,.025) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.02) 4px, rgba(0,0,0,.02) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.035) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(255,255,255,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(0,0,0,.025) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(0,0,0,.15) 0%, transparent 50%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
        linear-gradient(135deg, #3a3530 0%, #2a2520 100%);
    color: transparent; 
    border-color: var(--wall-dark);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.1), 
        0 0.5px 1px rgba(0,0,0,0.2),
        inset -1px -1px 2px rgba(0,0,0,0.3),
        inset 1px 1px 2px rgba(255,255,255,0.05);
}

.cell.wall .cell-letter {
    font-size: 0;
    text-shadow: none;
}

.cell.wall.selected { 
    border-color: var(--accent-wall); 
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.1), inset 0 0 0 1px var(--accent-wall), 0 0 6px rgba(212,105,107,0.3);
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
        linear-gradient(135deg, #3a3530 0%, #2a2520 100%);
}

.cell.wall.mode-highlighted { 
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
        linear-gradient(135deg, #3a3530 0%, #2a2520 100%);
}

/* Clue number styling - only in grid cells */
.cell .clue-number {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    color: #000000 !important;
    pointer-events: none;
}

.cell-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    filter: contrast(1.05);
    letter-spacing: 0.02em;
}

.solution-index {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 0.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000000 !important;
    pointer-events: none;
}

.solution-circle {
    position: absolute;
    width: calc(var(--cell-size) * 0.75);
    height: calc(var(--cell-size) * 0.75);
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + var(--cell-size) * 0.0625), calc(-50% + var(--cell-size) * 0.0625));
    border: 1.5px solid rgba(26, 24, 21, 0.7);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    /* Hide bottom-right quarter with clip-path for 270 degree arc */
    clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 50%, 50% 100%, 0 100%);
}

.solution-word-grid .solution-circle {
    display: block;
}

.solution-word-grid {
    max-width: 100%;
    width: fit-content; /* Only take the space needed */
    overflow-x: auto;
    overflow-y: hidden;
}

.grid .cell .solution-circle {
    display: block;
}

.cell.mode-highlighted {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,180,200,.15) 3px, rgba(100,180,200,.15) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,180,200,.1) 4px, rgba(100,180,200,.1) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,180,200,.08) 3px, rgba(100,180,200,.08) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,180,200,.05) 4px, rgba(100,180,200,.05) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(100,180,200,.07) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,180,200,.09) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(100,180,200,.04) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,180,200,.02) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.3) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(100,180,200,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(100,180,200,.02) 0%, transparent 70%),
        linear-gradient(135deg, #f0fafb 0%, #e8f4f8 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.9), 
        inset 0 0 0 1px #c8e6f0, 
        0 0.5px 1px rgba(0,0,0,0.05),
        inset -1px -1px 2px rgba(100,180,200,0.08),
        inset 1px 1px 2px rgba(255,255,255,0.4);
    border-color: #a8d4e8;
}

/* Solved cells - green background and not editable */
@keyframes cell-bounce {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.15);
    }
    50% {
        transform: scale(1.25);
    }
    75% {
        transform: scale(1.15);
    }
}

.cell.solved {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,200,100,.1) 3px, rgba(100,200,100,.1) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,200,100,.08) 4px, rgba(100,200,100,.08) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,200,100,.06) 3px, rgba(100,200,100,.06) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,200,100,.04) 4px, rgba(100,200,100,.04) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(100,200,100,.06) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,200,100,.07) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(100,200,100,.03) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,200,100,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.2) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(100,200,100,.015) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(100,200,100,.015) 0%, transparent 70%),
        linear-gradient(135deg, #d4f4d4 0%, #c8ead4 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.8), 
        inset 0 0 0 1px #a8d4a8, 
        0 0.5px 1px rgba(0,0,0,0.05),
        inset -1px -1px 2px rgba(100,200,100,0.08),
        inset 1px 1px 2px rgba(255,255,255,0.3);
}

/* Solved cells that are also highlighted - keep green background but yellow border */
.cell.solved.mode-highlighted {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,200,100,.1) 3px, rgba(100,200,100,.1) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,200,100,.08) 4px, rgba(100,200,100,.08) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,200,100,.06) 3px, rgba(100,200,100,.06) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,200,100,.04) 4px, rgba(100,200,100,.04) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(100,200,100,.06) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,200,100,.07) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(100,200,100,.03) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,200,100,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.2) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(100,200,100,.015) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(100,200,100,.015) 0%, transparent 70%),
        linear-gradient(135deg, #d4f4d4 0%, #c8ead4 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.8), 
        inset 0 0 0 1px #c8e6f0, 
        0 0.5px 1px rgba(0,0,0,0.05),
        inset -1px -1px 2px rgba(100,200,100,0.08),
        inset 1px 1px 2px rgba(255,255,255,0.3);
    border-color: #a8d4e8;
}


@keyframes cell-bounce {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.15);
    }
    50% {
        transform: scale(1.25);
    }
    75% {
        transform: scale(1.15);
    }
}





.cell.selected { 
    outline: none; 
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,200,0,.15) 3px, rgba(255,200,0,.15) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,200,0,.1) 4px, rgba(255,200,0,.1) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,200,0,.08) 3px, rgba(255,200,0,.08) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,200,0,.05) 4px, rgba(255,200,0,.05) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,200,0,.07) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,200,0,.09) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,200,0,.04) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(255,200,0,.02) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.4) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(255,200,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(255,200,0,.02) 0%, transparent 70%),
        linear-gradient(135deg, #fffef9 0%, #fff8e6 100%);
    border-color: var(--ink-dark);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.9), 
        inset 0 0 0 1.5px #ffc107, 
        0 0 8px rgba(255,193,7,0.25),
        inset -1px -1px 2px rgba(255,200,0,0.1),
        inset 1px 1px 2px rgba(255,255,255,0.5);
}

/* Solved cells that are also selected - keep green background but yellow border */
.cell.solved.selected {
    outline: none;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,200,100,.1) 3px, rgba(100,200,100,.1) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,200,100,.08) 4px, rgba(100,200,100,.08) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,200,100,.06) 3px, rgba(100,200,100,.06) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,200,100,.04) 4px, rgba(100,200,100,.04) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(100,200,100,.06) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,200,100,.07) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(100,200,100,.03) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,200,100,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.2) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(100,200,100,.015) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(100,200,100,.015) 0%, transparent 70%),
        linear-gradient(135deg, #d4f4d4 0%, #c8ead4 100%) !important;
    border-color: var(--ink-dark) !important;
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.8), 
        inset 0 0 0 1.5px #ffc107, 
        0 0 8px rgba(255,193,7,0.25),
        inset -1px -1px 2px rgba(100,200,100,0.08),
        inset 1px 1px 2px rgba(255,255,255,0.3) !important;
}

.cell.selected.mode-highlighted { 
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(200,150,0,.15) 3px, rgba(200,150,0,.15) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(200,150,0,.1) 4px, rgba(200,150,0,.1) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(200,150,0,.08) 3px, rgba(200,150,0,.08) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(200,150,0,.05) 4px, rgba(200,150,0,.05) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(200,150,0,.07) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(200,150,0,.09) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(200,150,0,.04) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(200,150,0,.02) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.4) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(200,150,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(200,150,0,.02) 0%, transparent 70%),
        linear-gradient(135deg, #fffaf0 0%, #fff5d6 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255,255,255,0.9), 
        inset 0 0 0 1.5px #ffc107, 
        0 0 8px rgba(255,193,7,0.25),
        inset -1px -1px 2px rgba(200,150,0,0.1),
        inset 1px 1px 2px rgba(255,255,255,0.5);
}

@media (max-width: 900px) { 
    .cell { font-size: 1.05rem; } 
}

/* ========= mobile-keyboard (light DOM) ========= */
mobile-keyboard {
    display: none; /* Hidden by default (desktop) */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    --key-width: clamp(1.7rem, 5.5vw, 2.1rem);
    --key-height: calc(var(--key-width) * 1.4);
    --stagger-factor: 0.4;
    --stagger-factor-deep: 0.8;
    --up-arrow-offset: calc(0 - var(--key-width) * var(--stagger-factor-deep));
}

/* Show keyboard only on mobile devices */
@media (max-width: 900px) {
    mobile-keyboard {
        display: block;
    }
}

mobile-keyboard .keyboard-container {
    position: relative;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Hide keyboard wrapper when collapsed */
mobile-keyboard[collapsed] .keyboard-wrapper {
    display: none;
}

mobile-keyboard .keyboard {
    display: flex;
    flex-direction: column;
    gap: var(--keyboard-gap);
    padding: var(--keyboard-padding);
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
        radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
        radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
        linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
    border-top: 2px solid #3a3530;
    box-shadow: 0 -0.6rem 1.4rem rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    margin: 0 auto;
    max-width: calc(var(--key-width) * 10 + 5.25rem);
    align-items: left;
}

mobile-keyboard .row {
    display: flex;
    gap: 0.35rem;
    align-items: left;
}

mobile-keyboard .row .keys { transform: none; }
mobile-keyboard .row.stagger .keys {
    transform: translateX(calc(var(--key-width) * var(--stagger-factor)));
}
mobile-keyboard .row.stagger-deep .keys {
    transform: translateX(calc(var(--key-width) * var(--stagger-factor-deep)));
}

mobile-keyboard .row .keys {
    display: flex;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
}

mobile-keyboard .row .arrows {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--key-width);
    gap: 0.35rem;
    align-items: left;
}

mobile-keyboard button {
    width: var(--key-width);
    height: var(--key-height);
    padding: 0;
    border-radius: 0.5rem;
    border: none;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
        linear-gradient(180deg, #fffef9 0%, #f5f1ed 100%);
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--ink-dark);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
    transform-origin: center;
}

mobile-keyboard button:active {
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 3px rgba(0,0,0,0.2);
    transform: translateY(2px) rotateZ(-1deg);
}

mobile-keyboard button:hover {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.025) 3px, rgba(0,0,0,.025) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.018) 4px, rgba(0,0,0,.018) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.04) 4px, rgba(255,255,255,.04) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.05) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.04) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.45) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
        linear-gradient(180deg, #fffbf5 0%, #f8f4ef 100%);
    transform: scale(1.05);
}

mobile-keyboard button.backspace {
    width: calc(var(--key-width) * 1.3);
}

mobile-keyboard button[aria-pressed="true"] { 
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.03) 3px, rgba(0,0,0,.03) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.02) 4px, rgba(0,0,0,.02) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,200,0,.12) 3px, rgba(255,200,0,.12) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,200,0,.08) 4px, rgba(255,200,0,.08) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,200,0,.08) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(255,200,0,.05) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,200,0,.06) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.3) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
        linear-gradient(180deg, #fffef5 0%, #fffbf0 100%);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 0 0 2px #ffc107, inset 0 1px 0 rgba(255,255,255,0.8);
}

mobile-keyboard .nav {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.08) 3px, rgba(0,0,0,.08) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.05) 4px, rgba(0,0,0,.05) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.04) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.06) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.03) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(255,255,255,.02) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(0,0,0,.04) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
        linear-gradient(180deg, #5a8ca4 0%, #4a7c94 100%);
    color: #f0f8ff;
    width: var(--key-width);
    height: var(--key-height);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    border: none;
    border-radius: 0.5rem;
}

mobile-keyboard .nav:hover {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.06) 3px, rgba(255,255,255,.06) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.04) 4px, rgba(255,255,255,.04) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.1) 3px, rgba(0,0,0,.1) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.06) 4px, rgba(0,0,0,.06) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.05) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.08) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.04) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(255,255,255,.025) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(0,0,0,.05) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.04) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.04) 0%, transparent 70%),
        linear-gradient(180deg, #6a9cb4 0%, #5a8ca4 100%);
}

mobile-keyboard .space {
    width: calc(var(--key-width) * 8.4);
    min-width: calc(var(--key-width) * 8.4);
    height: var(--key-height);
    padding: 0;
    border-radius: 0.5rem;
    border: none;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
        linear-gradient(180deg, #fffef9 0%, #f5f1ed 100%);
    font-family: inherit;
    font-weight: 600;
    font-size: clamp(1rem, 2.4vw, 1.25rem);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: var(--ink-dark);
    box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 3px rgba(0,0,0,0.2);
}

mobile-keyboard .key-spacer {
    width: var(--key-width);
    height: var(--key-height);
}

mobile-keyboard .handle {
    position: absolute;
    top: calc(-1 * var(--handle-height));
    left: var(--keyboard-padding);
    transform: none;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.01) 3px, rgba(255,255,255,.01) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.008) 4px, rgba(255,255,255,.008) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.012) 3px, rgba(0,0,0,.012) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.008) 4px, rgba(0,0,0,.008) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.01) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.015) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.008) 1.5px, transparent 1.5px),
        linear-gradient(135deg, #1a1512 0%, #0f0c09 100%);
    color: #7a7268;
    padding: var(--handle-padding) calc(var(--handle-padding) * 1.5);
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid rgba(58, 53, 48, 0.4);
    cursor: pointer;
    box-shadow: 0 -1px 3px rgba(0,0,0,0.3);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.75;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
}

mobile-keyboard .handle:hover {
    opacity: 0.95;
}

mobile-keyboard[collapsed] .keyboard-container { transform: translateY(calc(100% - 2.6rem)); }
mobile-keyboard:not([collapsed]) .keyboard-container { transform: translateY(0); }

@media (max-width: 980px) and (orientation: portrait) {
    mobile-keyboard .keyboard { padding-bottom: 1.6rem; }
    
    /* Override :root variables globally for portrait mode */
    :root {
        --keyboard-height: calc(
            (calc(8vw * 1.4) * 4) +          /* 4 rows with 8vw-based key-height */
            (calc(8vw * 0.2) * 3) +          /* 3 gaps between rows (8vw-based) */
            calc(8vw * 0.4) +                /* bottom padding (8vw-based) - the 1.6rem is separate */
            calc(8vw * 0.8) +                /* handle height (8vw-based) */
            2px +                            /* keyboard border-top */
            0.6rem                           /* visual buffer for shadow effects */
        );
    }
    
    mobile-keyboard {
        width: 100%;
        --key-width: 8vw;
    }
}

mobile-keyboard.wide-screen .keyboard-wrapper { display: flex; align-items: flex-end; justify-content: center; gap: 0.75rem; }
mobile-keyboard.wide-screen .keyboard-controls { display: none; }

/* ========= crossword-menu ========= */
crossword-menu {
    display: block;
}

.menu-container {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
        radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
        radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
        linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.menu {
    background: #f9f7f3;
    background-image: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
        radial-gradient(ellipse 600px 500px at 70% 60%, rgba(0,0,0,.02) 0%, transparent 50%),
        linear-gradient(135deg, #fefdfb 0%, #f9f7f3 100%);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 
        0 10px 40px rgba(0,0,0,0.3),
        inset 0 0 60px rgba(0,0,0,0.08),
        inset 0 0 100px rgba(0,0,0,0.04);
    max-width: 400px;
    width: 100%;
}

.menu h1 {
    color: #1a1815;
    text-align: center;
    margin: 0 0 2rem 0;
    font-size: 2rem;
    font-weight: 700;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    color: #1a1815;
    font-weight: 600;
    margin-bottom: 0.3rem;
    font-size: 0.95rem;
}

.form-group select, 
.form-group input[type="text"] {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #c0bbb5;
    border-radius: 0.25rem;
    font-size: 1rem;
    box-sizing: border-box;
    background: #fefdfb;
    color: #1a1815;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), inset 0 -0.5px 1px rgba(0,0,0,0.03);
    font-family: inherit;
}

.form-group select:focus, 
.form-group input[type="text"]:focus {
    outline: none;
    border-color: #1a1815;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.9), inset 0 0 0 2px rgba(26,24,21,0.1);
}

.menu button {
    width: 100%;
    padding: 0.6rem;
    margin-bottom: 0.7rem;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(255,255,255,.05) 3px, rgba(255,255,255,.05) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.04) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(0,0,0,.015) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(255,255,255,.03) 0.8px, transparent 0.8px),
        radial-gradient(ellipse 800px 600px at 30% 40%, rgba(255,255,255,.35) 0%, transparent 40%),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%),
        linear-gradient(180deg, #fffef9 0%, #f5f1ed 100%);
    color: #1a1815;
    border: 1px solid #c0bbb5;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.8);
    transition: all 0.15s ease;
    font-family: inherit;
}

.menu button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.8);
}

.menu button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 2px rgba(0,0,0,0.1);
}

.menu button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Session management styles */
.saved-sessions {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.saved-sessions h3 {
    margin: 0 0 1rem 0;
    color: #232842;
    font-size: 1.1rem;
}

.session-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.session-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.session-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.session-id {
    font-family: monospace;
    font-weight: bold;
    color: #222c55;
}

.session-time, .session-lang, .session-completion {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
}

.session-completion {
    font-weight: 600;
    color: #4a7a9e;
}

.session-actions {
    display: flex;
    gap: 0.5rem;
}

.reconnect-btn {
    padding: 0.4rem 0.8rem;
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.reconnect-btn:hover {
    background: rgba(76, 175, 80, 0.3);
    border-color: rgba(76, 175, 80, 0.5);
}

.remove-btn {
    padding: 0.4rem 0.6rem;
    background: rgba(244, 67, 54, 0.2);
    color: #ef5350;
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s ease;
}

.remove-btn:hover {
    background: rgba(244, 67, 54, 0.3);
    border-color: rgba(244, 67, 54, 0.5);
}

.clear-all-btn {
    padding: 0.5rem 1rem;
    background: rgba(255, 152, 0, 0.2);
    color: #ffab40;
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    width: 100%;
}

.clear-all-btn:hover {
    background: rgba(255, 152, 0, 0.3);
    border-color: rgba(255, 152, 0, 0.5);
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #1a1815;
    font-size: 1.2rem;
}

.error {
    background: #ffebee;
    color: #c62828;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid #c62828;
}

.hidden {
    display: none;
}

/* Notification Area */
.notification-area {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10000;
    pointer-events: none;
}

.notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    font-weight: 500;
    animation: slideIn 0.3s ease-out;
    pointer-events: auto;
    gap: 0.75rem;
    max-width: 350px;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 2px, rgba(0,0,0,.015) 2px, rgba(0,0,0,.015) 3px),
        repeating-linear-gradient(22deg, transparent, transparent 3px, rgba(0,0,0,.01) 3px, rgba(0,0,0,.01) 4px),
        repeating-linear-gradient(59deg, transparent, transparent 2px, rgba(255,255,255,.03) 2px, rgba(255,255,255,.03) 3px),
        repeating-linear-gradient(-11deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px),
        repeating-radial-gradient(circle at 12% 18%, rgba(0,0,0,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 67% 77%, rgba(255,255,255,.02) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.02) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.02) 0%, transparent 70%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-success {
    background: rgba(76, 175, 80, 0.95);
    color: #f5f5f5;
    border-left: 4px solid #45a049;
}

.notification-info {
    background: rgba(33, 150, 243, 0.95);
    color: #f5f5f5;
    border-left: 4px solid #1976d2;
}

.notification-error {
    background: rgba(244, 67, 54, 0.95);
    color: #f5f5f5;
    border-left: 4px solid #d32f2f;
}

.notification-message {
    flex-grow: 1;
    word-break: break-word;
}

.notification-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.notification-close:hover {
    opacity: 1;
}

/* Loading and Game States */
.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    font-size: 1.5rem;
    color: #f5f1ed;
    position: relative;
}

.loading-spinner::before {
    content: '';
    position: absolute;
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(245, 241, 237, 0.3);
    border-top-color: #f5f1ed;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.game-loaded {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    color: #f5f1ed;
    text-align: center;
    padding: 2rem;
    background: rgba(26, 24, 21, 0.5);
    border-radius: 0.5rem;
    backdrop-filter: blur(2px);
}

.game-loaded h2 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.game-loaded p {
    margin: 0.5rem 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* Game Header with Close Button */
.game-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.2rem;
    padding: 0.5rem 0.5rem;
    position: relative;
}

.game-header h2 {
    margin: 0;
}

/* On very small screens, align title to the left */
@media (max-width: 600px) {
    .game-header {
        justify-content: flex-start;
    }
}

.header-buttons {
    display: flex;
    gap: 0.5rem;
    position: absolute;
    right: 0.5rem;
}

.share-game-btn {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,180,255,.04) 3px, rgba(100,180,255,.04) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,180,255,.025) 4px, rgba(100,180,255,.025) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,180,255,.03) 3px, rgba(100,180,255,.03) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,180,255,.02) 4px, rgba(100,180,255,.02) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(100,180,255,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,180,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(100,180,255,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,180,255,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(100,180,255,.015) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
        linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border: 1px solid rgba(100, 180, 255, 0.3);
    color: #f5f1ed;
    cursor: pointer;
    /* width: 2.5rem; */
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    font-size: 1.1rem;
}

.share-game-btn:hover {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(100,180,255,.05) 3px, rgba(100,180,255,.05) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(100,180,255,.03) 4px, rgba(100,180,255,.03) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,180,255,.04) 3px, rgba(100,180,255,.04) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,180,255,.025) 4px, rgba(100,180,255,.025) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(100,180,255,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,180,255,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(100,180,255,.025) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,180,255,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(100,180,255,.02) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(100,180,255,.05) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(100,180,255,.05) 0%, transparent 70%),
        linear-gradient(180deg, #5a6a7a 0%, #4a5a6a 100%);
    border-color: rgba(100, 180, 255, 0.5);
}

.close-game-btn {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.025) 4px, rgba(255,255,255,.025) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(180,80,80,.03) 3px, rgba(180,80,80,.03) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(180,80,80,.02) 4px, rgba(180,80,80,.02) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(180,80,80,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(180,80,80,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(180,80,80,.015) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
        linear-gradient(180deg, #5a4a4a 0%, #4a3a3a 100%);
    border: 1px solid rgba(160, 90, 90, 0.3);
    color: #f5f1ed;
    font-size: 1.5rem;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}

.close-game-btn:hover {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.045) 3px, rgba(255,255,255,.045) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(180,80,80,.04) 3px, rgba(180,80,80,.04) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(180,80,80,.025) 4px, rgba(180,80,80,.025) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(180,80,80,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.025) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(180,80,80,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(180,80,80,.02) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.035) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.035) 0%, transparent 70%),
        linear-gradient(180deg, #6a5a5a 0%, #5a4a4a 100%);
    border-color: rgba(160, 90, 90, 0.4);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}

.close-game-btn:active {
    background: rgba(245, 241, 237, 0.2);
    transform: scale(0.95);
}

.game-content {
    display: block;
    overflow-y: auto;
    overflow-x: auto; /* Allow horizontal scrolling */
    max-height: calc(100vh - 200px); /* Leave space for header, clue area, and keyboard */
    width: 100%;
    text-align: center;  /* Center inline-block children */
}

crossword-grid {
    display: block;
    width: 100%;
    border-radius: 0px;
    position: relative;
}

/* Completely independent scroll containers */
.main-grid-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    margin-bottom: 1rem;
    align-items: center;
}

.main-grid-scroll-container .grid-container {
    display: inline-block;
    min-width: fit-content;
    align-items: center;
}

.solution-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    display: inline-block; /* Behave like inline-block to only take needed space */
    width: auto; /* Auto width to fit content */
}

/* Clue Area */
.clue-area {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.015) 4px, rgba(255,255,255,.015) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(0,0,0,.02) 3px, rgba(0,0,0,.02) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(0,0,0,.015) 4px, rgba(0,0,0,.015) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(0,0,0,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.015) 1.5px, transparent 1.5px),
        radial-gradient(ellipse 900px 700px at 25% 35%, rgba(0,0,0,.3) 0%, transparent 45%),
        radial-gradient(ellipse 700px 600px at 75% 65%, rgba(255,255,255,.02) 0%, transparent 50%),
        linear-gradient(135deg, #0a0805 0%, #0f0c09 100%);
    backdrop-filter: blur(8px);
    border-bottom: 2px solid rgba(245, 241, 237, 0.2);
    z-index: 1000;
    padding: 1rem;
    box-sizing: border-box;
    max-height: 3.5rem;
    transition: max-height 0.3s ease;
    overflow-y: hidden;
}

/* Expanded clue area - show all clues */
.clue-area.expanded {
    max-height: 100vh;
}

.clue-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.current-clue {
    font-weight: 600;
    color: #a8b8ff;
    font-size: 0.875rem;
    min-width: 2rem;
}

.clue-number {
    font-weight: 700;
    color: #ffd700;
    margin-right: 0.25rem;
}

.clue-text {
    color: #f5f1ed;
    font-size: 0.95rem;
    line-height: 1.7;
    flex-grow: 1;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: scroll;
    padding-bottom: 0.5rem;
}

.clue-text.empty {
    opacity: 0.6;
    font-style: italic;
}

.clue-toggle {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.04) 3px, rgba(255,255,255,.04) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.025) 4px, rgba(255,255,255,.025) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,130,180,.03) 3px, rgba(100,130,180,.03) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,130,180,.02) 4px, rgba(100,130,180,.02) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.025) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,130,180,.02) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.02) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,130,180,.01) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(100,130,180,.015) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.03) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.03) 0%, transparent 70%),
        linear-gradient(180deg, #3a4a5a 0%, #2a3a4a 100%);
    border: 1px solid rgba(100, 130, 180, 0.3);
    color: #f5f1ed;
    font-size: 1rem;
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}

.clue-toggle:hover {
    background: 
        repeating-linear-gradient(87deg, transparent, transparent 3px, rgba(255,255,255,.045) 3px, rgba(255,255,255,.045) 5px),
        repeating-linear-gradient(22deg, transparent, transparent 4px, rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 6px),
        repeating-linear-gradient(59deg, transparent, transparent 3px, rgba(100,130,180,.04) 3px, rgba(100,130,180,.04) 5px),
        repeating-linear-gradient(-11deg, transparent, transparent 4px, rgba(100,130,180,.025) 4px, rgba(100,130,180,.025) 6px),
        repeating-radial-gradient(circle at 12% 18%, rgba(255,255,255,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 67% 77%, rgba(100,130,180,.03) 1px, transparent 1px),
        repeating-radial-gradient(circle at 34% 51%, rgba(255,255,255,.025) 1.5px, transparent 1.5px),
        repeating-radial-gradient(circle at 23% 67%, rgba(100,130,180,.015) 0.8px, transparent 0.8px),
        repeating-radial-gradient(circle at 78% 22%, rgba(100,130,180,.02) 0.8px, transparent 0.8px),
        radial-gradient(circle at 0% 0%, rgba(0,0,0,.035) 0%, transparent 70%),
        radial-gradient(circle at 100% 100%, rgba(0,0,0,.035) 0%, transparent 70%),
        linear-gradient(180deg, #4a5a6a 0%, #3a4a5a 100%);
    border-color: rgba(100, 130, 180, 0.4);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.1);
}

.clue-toggle:active {
    background: rgba(245, 241, 237, 0.2);
    transform: scale(0.95);
}

.clue-toggle-group {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;

}

/* All Clues View */
.clue-area h3 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    color: #f5f1ed;
}

.clue-list-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .clue-list-container {
        grid-template-columns: 1fr;
    }
}

.clue-section h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: #a8b8ff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.clue-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
}

.clue-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.2s ease;
}

.clue-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.clue-item.solved .clue-text {
    text-decoration: line-through;
    opacity: 0.6;
}

.clue-item .clue-number {
    flex-shrink: 0;
    min-width: 2rem;
}

.clue-item .clue-text {
    flex-grow: 1;
    font-size: 0.9rem;
}

/* Adjust main content for clue area */
main {
    padding-top: calc(var(--page-padding) + 4rem);
}

/* Solution circle rotation animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Solution circles spin continuously when complete */
@keyframes spin-with-translate {
    from {
        transform: translate(calc(-50% + var(--cell-size) * 0.0625), calc(-50% + var(--cell-size) * 0.0625)) rotate(0deg);
    }
    to {
        transform: translate(calc(-50% + var(--cell-size) * 0.0625), calc(-50% + var(--cell-size) * 0.0625)) rotate(360deg);
    }
}

.solution-word-grid.complete .solution-circle,
.grid-container.complete .solution-circle {
    animation: spin-with-translate 3s linear infinite;
}

/* Pulse animation for all grid cells when puzzle is solved */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

.grid-container.complete .cell {
    animation: pulse 0.6s ease-in-out;
}

/* Staggered animation delays using CSS custom property */
.grid-container.complete .cell {
    animation-delay: var(--pulse-delay, 0s);
}