/* Reset and Base Styles */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sudoku-wrapper {
    height: 100vh;
    padding: 1vh;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    overflow: hidden;
    box-sizing: border-box;
}

/* Game Header */
.game-header {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 0.5vh 2vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    min-height: 6vh;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    flex-wrap: wrap;
    gap: 1vh;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 2vw;
}

.header-actions {
    display: flex;
    gap: 1vw;
    align-items: center;
}

/* Header Control Groups */
.header-control-group {
    display: flex;
    align-items: center;
    gap: 1vw;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    padding: 1vh 1.5vw;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.control-icon {
    font-size: min(3vw, 4vh);
    color: #764ba2;
    display: flex;
    align-items: center;
    margin-right: 0.8vw;
}

.theme-group .control-icon {
    color: #e91e63; /* Pink for theme/palette */
}

.difficulty-group .control-icon {
    color: #ff9800; /* Orange for difficulty/chart */
}

.game-title {
    font-family: 'Bubblegum Sans', cursive;
    font-size: min(4vw, 6vh);
    color: #764ba2;
    margin: 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.score-timer {
    display: flex;
    gap: 3vw;
    font-size: min(2vw, 3vh);
    color: #555;
}

.timer, .moves {
    display: flex;
    align-items: center;
    gap: 0.5vw;
}

/* Game Controls */
.game-controls {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 1.5vh 2vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4vw;
    min-height: 14vh;
    align-items: flex-start;
    overflow: visible;
}

.control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
}

.control-group label {
    font-weight: 600;
    color: #333;
    font-size: min(2vw, 2.5vh);
}

.theme-selector, .difficulty-selector {
    display: flex;
    gap: 0.5vw;
    align-items: center;
}

.theme-btn, .difficulty-btn {
    padding: 1vh 1.5vw;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: white;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Fredoka', cursive;
    font-size: min(2.5vw, 3vh);
    min-width: 4vw;
    min-height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-btn:hover, .difficulty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.theme-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

.difficulty-btn.active {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border-color: transparent;
}

.header-btn {
    padding: 1vh 1.5vw;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: white;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Fredoka', cursive;
    font-size: min(2.5vw, 3vh);
    min-width: 4vw;
    min-height: 4vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-btn.new-game {
    background: #4caf50;
    color: white;
    border-color: transparent;
}

.header-btn.hint {
    background: #ffc107;
    color: white;
    border-color: transparent;
}

/* Game Container */
.game-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1vh 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.game-board-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vh;
    width: 100%;
    padding-bottom: 2vh;
}

/* Element Palette Above Board */
.element-palette-above {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 90vw;
    max-width: 900px;
    box-sizing: border-box;
}


.palette-grid-above {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.palette-grid-above .palette-item {
    padding: 0;
    border-radius: 8px;
}

/* Sudoku Board */
.sudoku-board-wrapper {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(85vw, 60vh);
    height: min(85vw, 60vh);
    max-width: 600px;
    max-height: 600px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.sudoku-board {
    display: grid;
    gap: 2px;
    background: #e0e0e0;
    padding: 4px;
    border-radius: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.sudoku-board.size-3 {
    grid-template-columns: repeat(3, 1fr);
}
.sudoku-board.size-3 .sudoku-cell {
    font-size: clamp(50px, 8vw, 90px);
}

.sudoku-board.size-4 {
    grid-template-columns: repeat(4, 1fr);
}
.sudoku-board.size-4 .sudoku-cell {
    font-size: clamp(40px, 6vw, 70px);
}

.sudoku-board.size-5 {
    grid-template-columns: repeat(5, 1fr);
}
.sudoku-board.size-5 .sudoku-cell {
    font-size: clamp(32px, 5vw, 56px);
}

.sudoku-board.size-6 {
    grid-template-columns: repeat(6, 1fr);
}
.sudoku-board.size-6 .sudoku-cell {
    font-size: clamp(26px, 4vw, 45px);
}

.sudoku-board.size-7 {
    grid-template-columns: repeat(7, 1fr);
}
.sudoku-board.size-7 .sudoku-cell {
    font-size: clamp(22px, 3.5vw, 38px);
}

.sudoku-board.size-8 {
    grid-template-columns: repeat(8, 1fr);
}
.sudoku-board.size-8 .sudoku-cell {
    font-size: clamp(20px, 3vw, 33px);
}

.sudoku-board.size-9 {
    grid-template-columns: repeat(9, 1fr);
}
.sudoku-board.size-9 .sudoku-cell {
    font-size: clamp(18px, 2.5vw, 28px);
}

.sudoku-cell {
    background: white;
    border: 1px solid #e0e0e0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    position: relative;
    border-radius: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font-size: 40px;
}

.sudoku-cell.drag-over {
    background: #e3f2fd;
    border-color: #2196f3;
    transform: scale(1.05);
    box-shadow: 0 0 0 min(0.5vw, 0.8vh) rgba(33, 150, 243, 0.3);
}

.sudoku-cell.selected {
    background: #e3f2fd;
    border-color: #2196f3;
    box-shadow: 0 0 0 min(0.5vw, 0.8vh) rgba(33, 150, 243, 0.3);
}

.sudoku-cell.fixed {
    background: #f5f5f5;
}

.sudoku-cell.invalid {
    background: #ffebee;
    border-color: #f44336;
}

.sudoku-cell.highlight {
    background: #fff9c4;
}

/* Sudoku Cell Icons */
.cell-element {
    font-size: calc(100% - 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: move;
    touch-action: none;
    -webkit-touch-callout: none;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.sudoku-cell.fixed .cell-element {
    pointer-events: none;
    cursor: default;
}

.cell-icon {
    font-size: inherit;
}

.cell-color-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

/* Element Palette */
.element-palette {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 250px;
    overflow-y: auto;
    max-height: calc(100vh - 400px);
}

.palette-title {
    color: #333;
    margin: 0 0 10px 0;
    font-size: 1.3rem;
    text-align: center;
}

.instructions {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    color: #666;
}

.instructions p {
    margin: 5px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.instructions i {
    color: #764ba2;
    width: 16px;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.palette-item {
    background: white;
    border: 3px solid #ddd;
    border-radius: 15px;
    padding: 0;
    cursor: move;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    aspect-ratio: 1;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
}

.palette-item:hover {
    transform: translateY(-0.5vh);
    box-shadow: 0 1vh 2vh rgba(0, 0, 0, 0.15);
}

.palette-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.palette-item.selected {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

.palette-icon {
    font-size: 30px;
}


.palette-actions {
    display: flex;
    justify-content: center;
}

.eraser-btn {
    width: 100%;
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    background: white;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Fredoka', cursive;
}

.eraser-btn:hover {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

.eraser-btn.active {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

/* Game Actions */
.game-actions {
    display: flex;
    justify-content: center;
    gap: 2vw;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    padding: 0.5vh 0;
}

/* Size Selection */
.size-selection {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
    padding: 1vh 0;
    width: 100%;
}

.size-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 10px;
}

.game-actions .difficulty-group {
    display: flex;
    align-items: center;
}

.game-actions .difficulty-selector {
    display: flex;
    gap: 0.5vw;
    align-items: center;
}

.action-btn {
    padding: 2vh 4vw;
    border: none;
    border-radius: 15px;
    background: white;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Fredoka', cursive;
    font-size: min(4vw, 5vh);
    box-shadow: 0 0.5vh 1.5vh rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    min-width: 10vw;
    min-height: 6vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    transform: translateY(-0.3vh);
    box-shadow: 0 1vh 2.5vh rgba(0, 0, 0, 0.15);
}

.action-btn.new-game {
    background: #4caf50;
    color: white;
}

.action-btn.hint {
    background: #ffc107;
    color: white;
}

.size-btn {
    padding: 8px 12px;
    border: 2px solid #ddd;
    border-radius: 12px;
    background: white;
    color: #555;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Fredoka', cursive;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    min-width: 50px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.size-btn:hover {
    transform: translateY(-0.2vh);
    box-shadow: 0 0.8vh 2vh rgba(0, 0, 0, 0.15);
}

.size-btn.active {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    border-color: transparent;
}



/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    text-align: center;
}

.loading-spinner i {
    font-size: 3rem;
    color: #764ba2;
}

.loading-spinner p {
    margin-top: 10px;
    color: #555;
    font-size: 1.2rem;
}

/* Success Overlay */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.success-overlay.active {
    display: flex;
}

.success-content {
    text-align: center;
    color: #FFD700;
}

.success-animation {
    animation: successBounce 1s ease-in-out infinite;
}

.success-animation i {
    font-size: 8rem;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.stars {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.stars i {
    font-size: 3rem;
    color: #FFD700;
    animation: starTwinkle 0.5s ease-in-out infinite alternate;
}

.stars i:nth-child(2) {
    animation-delay: 0.2s;
}

.stars i:nth-child(3) {
    animation-delay: 0.4s;
}

/* Wrong Drop Overlay */
.wrong-drop-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(244, 67, 54, 0.9);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
}

.wrong-drop-overlay.active {
    display: flex;
    animation: wrongShake 0.5s ease-in-out;
}

.wrong-drop-content i {
    font-size: 4rem;
    color: white;
}

/* Hint Highlight */
.hint-highlight {
    background: #fff3cd !important;
    border: 3px solid #ffc107 !important;
    animation: hintPulse 2s ease-in-out infinite;
}

.hint-target {
    background: #d1ecf1 !important;
    border: 3px solid #17a2b8 !important;
    animation: targetPulse 2s ease-in-out infinite;
}

/* Color themes for elements */
.color-red { color: #f44336; }
.color-blue { color: #2196f3; }
.color-green { color: #4caf50; }
.color-yellow { color: #ffc107; }
.color-orange { color: #ff9800; }
.color-purple { color: #9c27b0; }
.color-pink { color: #e91e63; }
.color-cyan { color: #00bcd4; }
.color-magenta { color: #e91e63; }
.color-lime { color: #cddc39; }
.color-gold { color: #ffd700; }
.color-silver { color: #c0c0c0; }
.color-indigo { color: #3f51b5; }
.color-violet { color: #9c27b0; }
.color-turquoise { color: #26c6da; }
.color-brown { color: #795548; }
.color-black { color: #212121; }
.color-white { color: #9e9e9e; }

/* Mobile Portrait Adjustments */
@media (orientation: portrait) and (max-width: 767px) {
    .sudoku-board-wrapper {
        width: min(95vw, 400px);
        height: min(95vw, 400px);
    }
    
    .element-palette-above {
        width: 95vw;
        max-width: 450px;
    }
    
    .palette-item {
        width: 45px;
        height: 45px;
    }
    
    /* Smaller boards (3x3, 4x4, 5x5) */
    .sudoku-board.size-3,
    .sudoku-board.size-4,
    .sudoku-board.size-5 {
        gap: min(0.4vw, 0.6vh);
        padding: min(0.6vw, 1vh);
    }
    
    /* Medium boards (6x6, 7x7) */
    .sudoku-board.size-6,
    .sudoku-board.size-7 {
        gap: min(0.2vw, 0.3vh);
        padding: min(0.4vw, 0.6vh);
    }
    
    /* Large boards (8x8, 9x9) */
    .sudoku-board.size-8,
    .sudoku-board.size-9 {
        gap: min(0.1vw, 0.2vh);
        padding: min(0.2vw, 0.4vh);
    }
    
    /* Fix mobile border visibility with outline approach */
    .sudoku-cell {
        border: 1px solid #e0e0e0;
        border-radius: 0;
        outline: 1px solid #e0e0e0;
        outline-offset: -1px;
        -webkit-appearance: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        background: white;
        position: relative;
    }
    
    .sudoku-cell::after {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border: 1px solid #e0e0e0;
        pointer-events: none;
    }
    
    /* Ensure larger boards have visible borders */
    .sudoku-board.size-6 .sudoku-cell,
    .sudoku-board.size-7 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    .sudoku-board.size-8 .sudoku-cell,
    .sudoku-board.size-9 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    .game-header {
        min-height: 8vh;
        padding: 0.8vh 2vw;
    }
    
    .header-content {
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        gap: 1vh;
    }
    
    .header-left {
        gap: 1.5vw;
    }
    
    .header-control-group {
        padding: 1vh 1.5vw;
        gap: 1vw;
    }
    
    .header-btn {
        font-size: min(3.5vw, 3.5vh);
        padding: 1.2vh 1.5vw;
        min-width: 6vw;
        min-height: 5vh;
    }
    
    .theme-selector, .difficulty-selector {
        gap: 0.8vw;
    }
    
    .theme-btn, .difficulty-btn {
        font-size: min(3.5vw, 3.5vh);
        padding: 1.2vh 1.5vw;
        min-width: 6vw;
        min-height: 5vh;
    }
    
    .control-icon {
        font-size: min(4vw, 4.5vh);
    }
    
    .action-btn {
        padding: 2vh 4vw;
        font-size: min(5vw, 5vh);
        min-width: 12vw;
        min-height: 6vh;
    }
    
    .size-btn {
        padding: 1.5vh 2vw;
        font-size: min(4vw, 4vh);
        min-width: 10vw;
        min-height: 5vh;
    }
}

/* Mobile Landscape Adjustments */
@media (orientation: landscape) and (max-height: 600px) {
    .game-header {
        height: 8vh;
    }
    
    .sudoku-board-wrapper {
        width: min(65vw, 55vh);
        height: min(65vw, 55vh);
    }
    
    .element-palette-above {
        width: min(65vw, 55vh);
        padding: 0.6vh 0.8vw;
    }
    
    .palette-item {
        width: min(8vw, 5vh);
        height: min(8vw, 5vh);
    }
    
    /* Size-specific adjustments for landscape */
    .sudoku-board.size-3,
    .sudoku-board.size-4,
    .sudoku-board.size-5 {
        gap: min(0.3vw, 0.4vh);
        padding: min(0.5vw, 0.7vh);
    }
    
    .sudoku-board.size-6,
    .sudoku-board.size-7 {
        gap: min(0.15vw, 0.2vh);
        padding: min(0.3vw, 0.4vh);
    }
    
    .sudoku-board.size-8,
    .sudoku-board.size-9 {
        gap: min(0.1vw, 0.15vh);
        padding: min(0.15vw, 0.25vh);
    }
    
    /* Mobile landscape border fixes */
    .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
        outline-offset: -1px;
        border-radius: 0;
        background: white;
    }
    
    .sudoku-board.size-8 .sudoku-cell,
    .sudoku-board.size-9 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    .theme-btn, .difficulty-btn {
        font-size: min(2vw, 2.5vh);
        padding: 0.8vh 1.2vw;
        min-width: 4.5vw;
        min-height: 3.5vh;
    }
    
    .control-icon {
        font-size: min(2.5vw, 3vh);
    }
    
    .header-btn {
        font-size: min(2vw, 2.5vh);
        padding: 0.8vh 1.2vw;
        min-width: 4.5vw;
        min-height: 3.5vh;
    }
    
    .action-btn {
        padding: 1.5vh 3vw;
        font-size: min(3vw, 4vh);
        min-width: 8vw;
        min-height: 5vh;
    }
    
    .size-btn {
        padding: 1vh 1.5vw;
        font-size: min(2.5vw, 3vh);
        min-width: 6vw;
        min-height: 4vh;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .sudoku-board-wrapper {
        width: min(98vw, 70vh);
        height: min(98vw, 70vh);
    }
    
    .element-palette-above {
        width: min(98vw, 70vh);
        padding: min(1vw, 1.5vh);
    }
    
    /* Ultra-small grid adjustments for small screens */
    .sudoku-board.size-6,
    .sudoku-board.size-7 {
        gap: min(0.1vw, 0.2vh);
        padding: min(0.2vw, 0.3vh);
    }
    
    .sudoku-board.size-8,
    .sudoku-board.size-9 {
        gap: 1px;
        padding: min(0.1vw, 0.2vh);
    }
    
    /* Small screen border visibility fixes */
    .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
        outline-offset: -1px;
        border-radius: 0;
        -webkit-appearance: none;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background: white;
    }
    
    .sudoku-board.size-6 .sudoku-cell,
    .sudoku-board.size-7 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    .sudoku-board.size-8 .sudoku-cell,
    .sudoku-board.size-9 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    /* Adjust icons for mobile screens */
    .sudoku-board.size-3 .sudoku-cell {
        font-size: 45px;
    }
    
    .sudoku-board.size-4 .sudoku-cell {
        font-size: 38px;
    }
    
    .sudoku-board.size-5 .sudoku-cell {
        font-size: 30px;
    }
    
    .sudoku-board.size-6 .sudoku-cell {
        font-size: 25px;
    }
    
    .sudoku-board.size-7 .sudoku-cell {
        font-size: 22px;
    }
    
    .sudoku-board.size-8 .sudoku-cell {
        font-size: 18px;
    }
    
    .sudoku-board.size-9 .sudoku-cell {
        font-size: 16px;
    }
    
    .game-title {
        font-size: min(5vw, 4vh);
    }
    
    .score-timer {
        font-size: min(3vw, 2.5vh);
        gap: 2vw;
    }
    
    .theme-btn, .difficulty-btn {
        font-size: min(4vw, 4vh);
        padding: 1.5vh 2vw;
        min-width: 8vw;
        min-height: 6vh;
    }
    
    .control-icon {
        font-size: min(5vw, 5vh);
    }
    
    .header-btn {
        font-size: min(4vw, 4vh);
        padding: 1.5vh 2vw;
        min-width: 8vw;
        min-height: 6vh;
    }
    
    .palette-item {
        width: 40px;
        height: 40px;
    }
    
    .palette-icon {
        font-size: 28px;
    }
    
    .action-btn {
        padding: 2.5vh 4vw;
        font-size: min(5vw, 6vh);
        min-width: 15vw;
        min-height: 8vh;
    }
    
    .size-btn {
        padding: 1.8vh 2.5vw;
        font-size: min(4vw, 5vh);
        min-width: 12vw;
        min-height: 6vh;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    /* Even more aggressive sizing for tiny screens */
    .sudoku-board.size-7,
    .sudoku-board.size-8,
    .sudoku-board.size-9 {
        gap: 1px;
        padding: 1px;
    }
    
    /* Extra small screen border fixes with stronger visibility */
    .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
        outline-offset: -1px;
        border-radius: 0;
        -webkit-tap-highlight-color: transparent;
        background: white;
        box-shadow: none;
    }
    
    .sudoku-board.size-7 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    .sudoku-board.size-8 .sudoku-cell,
    .sudoku-board.size-9 .sudoku-cell {
        border: 1px solid #e0e0e0;
        outline: 1px solid #e0e0e0;
    }
    
    /* Extremely small boards on tiny screens */
    .sudoku-board.size-7 .sudoku-cell {
        font-size: 18px;
    }
    
    .sudoku-board.size-8 .sudoku-cell {
        font-size: 16px;
    }
    
    .sudoku-board.size-9 .sudoku-cell {
        font-size: 14px;
    }
    
    .theme-btn, .difficulty-btn {
        font-size: min(5vw, 5vh);
        padding: 2vh 2.5vw;
        min-width: 10vw;
        min-height: 7vh;
    }
    
    .control-icon {
        font-size: min(6vw, 6vh);
    }
    
    .header-btn {
        font-size: min(5vw, 6vh);
        padding: 2vh 2.5vw;
        min-width: 10vw;
        min-height: 7vh;
    }
    
    .palette-item {
        width: 38px;
        height: 38px;
    }
    
    .palette-icon {
        font-size: 25px;
    }
    
    .action-btn {
        padding: 3vh 5vw;
        font-size: min(6vw, 7vh);
        min-width: 18vw;
        min-height: 9vh;
    }
    
    .size-btn {
        padding: 2vh 3vw;
        font-size: min(5vw, 6vh);
        min-width: 14vw;
        min-height: 7vh;
    }
}

/* Tablet and Desktop screens */
@media (min-width: 768px) {
    .sudoku-board-wrapper {
        width: min(65vh, 550px);
        height: min(65vh, 550px);
    }
    
    .element-palette-above {
        width: min(90vw, 900px);
        padding: 15px;
    }
    
    .palette-grid-above {
        gap: 15px;
    }
    
    .palette-item {
        width: 55px;
        height: 55px;
    }
    
    .palette-icon {
        font-size: 35px;
    }
}

/* Large Desktop screens */
@media (min-width: 1200px) {
    .sudoku-board-wrapper {
        width: min(65vh, 600px);
        height: min(65vh, 600px);
    }
    
    .element-palette-above {
        width: min(85vw, 1000px);
        padding: 20px;
    }
    
    .palette-grid-above {
        gap: 20px;
    }
    
    .palette-item {
        width: 60px;
        height: 60px;
    }
    
    .palette-icon {
        font-size: 38px;
    }
}

/* Extra Large Desktop screens */
@media (min-width: 1920px) {
    .sudoku-board-wrapper {
        width: min(65vh, 600px);
        height: min(65vh, 600px);
    }
    
    .element-palette-above {
        width: min(80vw, 1200px);
    }
}

/* Animations */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes successBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes starTwinkle {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.2) rotate(15deg); }
}

@keyframes wrongShake {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(-45%, -50%) scale(1.1); }
    75% { transform: translate(-55%, -50%) scale(1.1); }
}

@keyframes hintPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
        transform: scale(1.05);
    }
}

@keyframes targetPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.7);
        transform: scale(1);
    }
    50% { 
        box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
        transform: scale(1.05);
    }
}

.win-animation {
    animation: bounce 0.5s ease-in-out infinite;
}

.hint-animation {
    animation: pulse 0.5s ease-in-out 3;
}