.nonogram-container {
                    background-color: #fff;
                    padding: 20px;
                    border-radius: 15px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Same as article section */
                    text-align: center;
                    margin-bottom: 30px;
                }
                .subtitle {
                    text-align: center;
                    color: #7f8c8d;
                    margin-bottom: 20px;
                }
                .game-container {
                    display: flex;
                    justify-content: center;
                    margin-bottom: 20px;
                }
                .col-clues {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 5px;
                    margin-bottom: 5px;
                }
                .row-clues {
                    display: flex;
                    flex-direction: column;
                }
                .clue-cell {
                    width: 25px;
                    height: 25px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    font-weight: bold;
                    color: #2c3e50;
                }
                .clue-cell.col-clue {
                    height: auto;
                    min-height: 25px;
                    flex-direction: column;
                    justify-content: flex-end;
                    text-align: center;
                }
                .grid {
                    display: grid;
                    grid-template-columns: repeat(var(--size), 30px);
                    grid-template-rows: repeat(var(--size), 30px);
                    gap: 1px;
                    background-color: #95a5a6;
                    border: 2px solid #7f8c8d;
                }
                .cell {
                    width: 30px;
                    height: 30px;
                    background-color: #ecf0f1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    user-select: none;
                    transition: all 0.2s;
                }
                .cell.filled {
                    background-color: #2c3e50;
                }
                .cell.marked {
                    background-color: #e74c3c;
                    position: relative;
                }
                .cell.marked::after {
                    content: "✕";
                    color: white;
                    font-size: 18px;
                }
                .cell.error {
                    background-color: #f39c12;
                }
                .cell.hint {
                    background-color: #27ae60;
                }
                .cell.selected {
                    outline: 2px solid #3498db;
                }
                .difficulty-selector {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-bottom: 20px;
                }
                .difficulty-selector label {
                    margin-right: 10px;
                }
                .difficulty-selector select {
                    padding: 5px;
                    border-radius: 4px;
                    border: 1px solid #ccc;
                }
                .button-group {
                    display: flex;
                    justify-content: center;
                    gap: 10px;
                    margin-bottom: 20px;
                    flex-wrap: wrap;
                }
                .btn-game {
                    padding: 8px 16px;
                    background-color: #3498db;
                    color: white;
                    border: none;
                    border-radius: 4px;
                    cursor: pointer;
                    font-size: 14px;
                    transition: background-color 0.2s;
                }
                .btn-game:hover {
                    background-color: #2980b9;
                }
                .btn-warning {
                    background-color: #f39c12;
                }
                .btn-warning:hover {
                    background-color: #e67e22;
                }
                .stats {
                    text-align: center;
                    font-size: 18px;
                    margin: 10px 0;
                }
                .win-message {
                    text-align: center;
                    font-size: 24px;
                    color: #27ae60;
                    font-weight: bold;
                    margin: 20px 0;
                    display: none;
                }
                .puzzle-pack {
                    margin: 20px 0;
                    padding: 15px;
                    background-color: #ecf0f1;
                    border-radius: 5px;
                }
                .pack-title {
                    font-weight: bold;
                    margin-bottom: 10px;
                    color: #2c3e50;
                }
                .pack-puzzles {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                }
                .pack-puzzle {
                    padding: 8px 12px;
                    background-color: #3498db;
                    color: white;
                    border-radius: 4px;
                    cursor: pointer;
                    position: relative;
                }
                .pack-puzzle.completed {
                    background-color: #27ae60;
                    opacity: 0.8;
                }
                .puzzle-preview {
                    position: absolute;
                    background: #fff;
                    border: 1px solid #333;
                    padding: 5px;
                    z-index: 1000;
                }
                .result-message {
                    text-align: center;
                    margin: 10px 0;
                }
                #progress {
                    width: 100%;
                    background-color: #ddd;
                    border-radius: 5px;
                    margin-top: 10px;
                }
                #progress-bar {
                    height: 10px;
                    background-color: #3498db;
                    width: 100%;
                    border-radius: 5px;
                    transition: width 1s;
                }
                @media (max-width: 600px) {
                    .clue-cell {
                        width: 20px;
                        height: 20px;
                        font-size: 10px;
                    }
                    .grid {
                        grid-template-columns: repeat(var(--size), 25px);
                        grid-template-rows: repeat(var(--size), 25px);
                    }
                    .cell {
                        width: 25px;
                        height: 25px;
                    }
                    .btn-game {
                        padding: 6px 12px;
                        font-size: 12px;
                    }
                }