@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

                            h3 {
                                color: #ff6f61;
                                text-align: center;
                                margin-bottom: 25px;
                                font-weight: 600;
                                text-transform: uppercase;
                                letter-spacing: 2px;
                                font-size: 1.5em;
                            }

                            .wcontainer {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                padding: 25px;
                                overflow: hidden; /* Prevent scrolling in container */
                            }

                            .grid {
                                display: grid;
                                grid-template-columns: repeat(20, 1fr);
                                gap: 1px; /* Reduced gap for smaller grid */
                                width: 90%; /* Scale with viewport width */
                                max-width: 100%;
                                background: #e0e7ff;
                                padding: 5px; /* Reduced padding */
                                border-radius: 10px;
                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                                touch-action: none;
                                margin: 0 auto;
                            }

                            .cell {
                                background-color: #ffffff;
                                border: 1px solid #c3dafe;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                user-select: none;
                                font-size: clamp(14px, 4vw, 24px);
                                font-weight: 700;
                                touch-action: manipulation;
                                aspect-ratio: 1 / 1;
                                transition: background-color 0.3s ease, transform 0.2s ease;
                                font-family: 'Poppins', 'Noto Sans JP', 'Noto Sans KR', sans-serif;
                            }

                            .cell:hover {
                                background-color: #e0f7fa;
                                transform: scale(1.05);
                            }

                            .cell.selected {
                                background-color: #ffeb3b;
                                transform: scale(1.1);
                            }

                            .cell.found {
                                background-color: #81c784;
                                font-weight: 600;
                                color: #fff;
                                transform: scale(1);
                            }

                            .word-list {
                                width: 100%;
                                background: #fff;
                                border-radius: 10px;
                                padding: 20px;
                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                                margin-bottom: 30px;
                                box-sizing: border-box;
                            }

                            .word-list h4 {
                                color: #ff6f61;
                                font-weight: 600;
                                margin-bottom: 20px;
                                text-align: center;
                                border-bottom: 2px solid #ff6f61;
                                padding-bottom: 8px;
                                font-size: 1.2em;
                            }

                            .word-list ul {
                                list-style: none;
                                padding: 0;
                                margin: 0;
                                display: grid;
                                grid-template-columns: repeat(4, 1fr);
                                gap: 15px;
                                overflow: hidden;
                            }

                            .word-list li {
                                padding: 12px;
                                border-radius: 5px;
                                font-size: 1.1em;
                                font-weight: 600;
                                transition: background-color 0.3s ease;
                                text-align: center;
                                word-break: break-word;
                                box-sizing: border-box;
                            }

                            .word-list li:nth-child(5n-4),
                            .word-list li:nth-child(5n-2),
                            .word-list li:nth-child(5n) {
                                background-color: #e3f2fd;
                            }

                            .word-list li:nth-child(5n-3),
                            .word-list li:nth-child(5n-1) {
                                background-color: #f3e5f5;
                            }

                            .word-list li.found {
                                text-decoration: line-through;
                                color: #888;
                                background-color: #c8e6c9 !important;
                            }

                            .word-list li.found::before {
                                content: "✓ ";
                                color: #4caf50;
                            }

                            .result {
                                font-size: 1.5em;
                                margin: 25px 0;
                                color: #4caf50;
                                text-align: center;
                                font-weight: 600;
                                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
                            }

                            .cool-button {
                                display: inline-block;
                                padding: 12px 25px;
                                margin: 15px 0;
                                background: linear-gradient(45deg, #ff6f61, #ff8a65);
                                color: #fff;
                                border: none;
                                border-radius: 25px;
                                font-size: 1.1em;
                                font-weight: 600;
                                cursor: pointer;
                                transition: transform 0.2s ease, box-shadow 0.3s ease;
                                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                                min-width: 150px;
                            }

                            .cool-button:hover {
                                transform: translateY(-3px);
                                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
                            }

                            .cool-button:active {
                                transform: translateY(0);
                                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
                            }

                            .reset-container {
                                text-align: center;
                                margin-top: 20px;
                            }

                            .answer-section {
                                width: 100%;
                                margin-top: 30px;
                                text-align: left;
                                background: #f5f5f5;
                                border-radius: 8px;
                                padding: 20px;
                                border: 1px solid #ddd;
                            }

                            .word-listresult {
                                width: 100%;
                                background: #fff;
                                border-radius: 10px;
                                padding: 20px;
                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
                            }

                            .word-listresult h4 {
                                color: #ff6f61;
                                font-weight: 600;
                                margin-bottom: 20px;
                                text-align: left;
                                border-bottom: 2px solid #ff6f61;
                                padding-bottom: 8px;
                                font-size: 1.2em;
                            }

                            .word-listresult ul {
                                list-style: none;
                                padding: 0;
                                margin: 0;
                            }

                            .word-listresult li {
                                padding: 12px;
                                margin: 5px 0;
                                border-radius: 5px;
                                font-size: 1em;
                                font-weight: 500;
                                transition: background-color 0.3s ease;
                            }

                            .word-listresult li:nth-child(odd) {
                                background-color: #e3f2fd;
                            }

                            .word-listresult li:nth-child(even) {
                                background-color: #f3e5f5;
                            }

                            #final-answer {
                                margin-top: 20px;
                            }

                            #final-answer ul {
                                padding-left: 20px;
                            }

                            #final-answer li {
                                color: #555;
                                font-size: 0.95em;
                            }

                           .iproduct-container {
                                display: flex;
                                align-items: flex-start;
                                gap: 20px;
                                margin-bottom: 25px;
                            }
                            
                            .iproduct-image {
                                background-color: #ffffff; /* White background for Polaroid effect */
                                padding: 10px 10px 20px 10px; /* Thicker padding at the bottom for Polaroid border */
                                border: 1px solid #e0e0e0; /* Light border to mimic Polaroid frame */
                                border-radius: 4px; /* Slightly rounded corners */
                                box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); /* Shadow for lifted Polaroid effect */
                            
                            }
                            
                            .iproduct-image img {
                                width: 150px;
                                height: auto;
                                display: block; /* Ensure image is centered within the Polaroid frame */
                                margin: 0 auto; /* Center the image */
                            }
                            
                            .iproduct-description {
                                background-color: #ffffff; /* White background for Polaroid effect */
                                padding: 15px 15px 25px 15px; /* Thicker padding at the bottom for Polaroid border */
                                border: 1px solid #e0e0e0; /* Light border to mimic Polaroid frame */
                                border-radius: 4px; /* Slightly rounded corners */
                                box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15); /* Shadow for lifted Polaroid effect */
                                 min-height: 150px;
                            
                            }
                            
                            .iproduct-description p {
                                font-family: 'Poppins', sans-serif;
                                font-size: 1.1em;
                                line-height: 1.6;
                                margin: 0;
                            }
                            
                            
                            .two-columns {
    columns: 2;           /* Number of columns */
    -webkit-columns: 2;   /* Safari/Chrome support */
    -moz-columns: 2;      /* Firefox support */
    column-gap: 20px;     /* Space between columns */
    list-style: none;     /* Optional: remove default bullets */
    padding: 0;
}

.two-columns li {
    margin-bottom: 6px;
    break-inside: avoid;  /* Prevent awkward breaks */
}

                            
                            @media (max-width: 900px) {
                                .word-list ul {
                                    grid-template-columns: repeat(4, 1fr);
                                }

                                .word-list li:nth-child(4n-3),
                                .word-list li:nth-child(4n) {
                                    background-color: #e3f2fd;
                                }

                                .word-list li:nth-child(4n-2),
                                .word-list li:nth-child(4n-1) {
                                    background-color: #f3e5f5;
                                }
                            }

                            @media (max-width: 768px) {
                                .main {
                                    padding: 15px;
                                }

                                .wcontainer {
                                    padding: 15px;
                                }

                                .grid {
                                    width: 85vw; /* Slightly smaller to fit better */
                                    max-width: 85vh;
                                    max-height: 85vh;
                                    padding: 5px;
                                }

                                .word-list {
                                    width: 100%;
                                    max-width: 450px;
                                    padding: 15px;
                                    margin-bottom: 20px;
                                }

                                .word-list ul {
                                    grid-template-columns: repeat(2, 1fr);
                                    gap: 10px;
                                }

                                .word-list li {
                                    padding: 10px;
                                    font-size: 1em;
                                }

                                .word-list li:nth-child(2n-1) {
                                    background-color: #e3f2fd;
                                }

                                .word-list li:nth-child(2n) {
                                    background-color: #f3e5f5;
                                }

                                .cell {
                                    font-size: clamp(6px, 1.5vw, 14px); /* Adjusted for smaller grid */
                                    touch-action: manipulation;
                                }

                                .iproduct-container {
                                    flex-direction: column;
                                    align-items: center;
                                    text-align: center;
                                }

                                .iproduct-image img {
                                    width: 120px;
                                }

                                .iproduct-description p {
                                    font-size: 1em;
                                }

                                .result {
                                    font-size: 1.3em;
                                    margin: 20px 0;
                                }

                                .cool-button {
                                    padding: 10px 20px;
                                    font-size: 1em;
                                    min-width: 130px;
                                }

                                .answer-section {
                                    padding: 15px;
                                    margin-top: 20px;
                                }

                                #final-answer li {
                                    font-size: 0.9em;
                                }
                            }

                            @media (max-width: 600px) {
                                .word-list ul {
                                    grid-template-columns: 1fr;
                                    gap: 8px;
                                }

                                .word-list li {
                                    padding: 8px;
                                    font-size: 0.95em;
                                }

                                .word-list li:nth-child(odd) {
                                    background-color: #e3f2fd;
                                }

                                .word-list li:nth-child(even) {
                                    background-color: #f3e5f5;
                                }
                            }

                            @media (max-width: 480px) {
                                .grid {
                                    width: 80vw; /* Further scale down for smaller screens */
                                    max-width: 80vh;
                                    max-height: 80vh;
                                    padding: 3px;
                                }

                                .word-list {
                                    max-width: 300px;
                                    padding: 12px;
                                }

                                .word-list ul {
                                    grid-template-columns: 1fr;
                                    gap: 8px;
                                }

                                .word-list li {
                                    padding: 8px;
                                    font-size: 0.95em;
                                }

                                .cell {
                                    font-size: clamp(5px, 1.2vw, 12px); /* Further adjusted for readability */
                                }

                                .cool-button {
                                    padding: 8px 15px;
                                    font-size: 0.95em;
                                    min-width: 120px;
                                }
                            }

                            /* Fine-tune for portrait orientation */
                            @media (orientation: portrait) {
                                .grid {
                                    width: 80vw;
                                    max-width: 80vh;
                                    max-height: 80vh;
                                }

                                .cell {
                                    font-size: clamp(5px, 1.2vw, 12px);
                                }
                            }

                            /* Fine-tune for landscape orientation */
                            @media (orientation: landscape) {
                                .grid {
                                    width: 80vh;
                                    max-width: 80vw;
                                    max-height: 80vw;
                                }

                                .cell {
                                    font-size: clamp(5px, 1.2vh, 12px);
                                }
                            }