html, body {
        font-family: Arial, sans-serif;
        padding: 10px;
        margin: 0;
        width: 100%;
        max-width: 100%;
        position: relative;
        overflow-x: hidden;
        box-sizing: border-box;
        text-overflow: clip;
    }
    h2{text-align:center;}
    #container{
        max-width:640px;
        margin: 0 auto;
    }

    .locked {
        touch-action: none;
        overscroll-behavior: none;
    }

    * {
        box-sizing: border-box;
        max-width: 100%;
    }

    .draggable {
        touch-action: none;
        width: 40px;
        height: 40px;
        padding: 0;
        margin: 2px;
        position: absolute;
        z-index: 1;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #CFE3F5; /*#FFFFE0;#FFFF46; #FFFFE0  #FFFFA0 */
        user-select: none;
        -webkit-user-select: none;
    }

    .droppable {
        touch-action: none;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border-style: solid;
        border-width: 1px;
        z-index: -1;
        background-color: #FFFFFF;
        position: absolute;
        display: block;
    }

    #spacer {
        margin-top: 20px;
    }

    #box, #grid {
        width: 310px;
        max-width: 100%;
        height: 310px;
        border-style: solid;
        border-width: 1px;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        box-sizing: border-box;
    }

    #row {
        width: 100%;
        max-width: 340px;
        height: 100px;
        border-style: solid;
        margin: 0 auto;
    }

    #score {
        width: 100%;
        max-width: 320px;
        /*height: 30px;*/
        padding:5px;
        margin: 0 auto;
        text-align: center;
    }

    #mini-grid-container {
        display: flex;
        flex-direction: column;
        width: 310px;
        margin: 0 auto;
        visibility: visible;
        opacity: 1;
    }

    #mini-grid-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
    }

    #mini-grid-controls {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin-right: 10px;
    }

    #mini-grid {
        display: grid;
        grid-template-columns: repeat(7, 17.14px);
        grid-template-rows: repeat(7, 17.14px);
        gap: 1px;
        background-color: #ccc;
        padding: 1px;
        width: 120px;
        visibility: visible;
        opacity: 1;
    }
    
    .mini-cell {
        width: 17.14px;
        height: 17.14px;
        background-color: white;
        border: 1px solid #999;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        user-select: none;
        visibility: visible;
        opacity: 1;
    }

    #bestScore {
        margin-top: 5px;
        font-size: 14px;
        text-align: center;
        width: 100%;
    }

    #lock-container {
        display: flex;
    }

    @media (hover: hover) {
        #lock-container {
            display: none;
        }
    }

    @media (min-width: 768px) {
        #lock-container {
            display: none;
        }
    }

    #lock-button, #how-to-play-btn, #word-list-btn {
        background-color: #a95475;
        color: white;
        padding: 4px 8px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 12px;
        font-weight: bold;
        transition: background-color 0.3s;
    }

    #lock-button:hover, #how-to-play-btn:hover, #word-list-btn:hover {
        background-color: #8e3f5e;
    }

    #lock-button.locked {
        background-color: #4caf50;
    }

    #lock-button.locked:hover {
        background-color: #45a049;
    }

    .letter {
        font-size: 1.6em;
        font-weight: bold;
        text-align: center;
        margin-top: 4px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .number {
        font-size: .7em;
        text-align: right;
        position: relative;
        top: -8px;
        right: 1px;
    }

    .home-icon {
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    
    .headerText {
        margin: 0 auto;
        padding: 5px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 20px;
        color: #a95475;
        flex-grow: 1;
        text-align: center;
    }
    
    .page_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 5px;
    }

    .clear {
        clear: both;
        height: 1px;
    }

    .tw { background-color: #FF0000; }
    .dw { background-color: #FF8080; }
    .tl { background-color: #0000FF; }
    .dl { background-color: #4CAF50; }/*#228C22*/
    .center { background-color: #FFD700; }
    .black { background-color: black; }
    .centred { text-align: center; }
    .floatL { float: left; }
    .floatR { float: right; }
    .clearB { clear: both; }
    .small{font-size:small;}

    /* Popup Styles */
    
    .slide-container {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: -1000; /* Ensure it appears above other content */
        display: flex; /* Use Flexbox to center the child */
        justify-content: center; /* Center horizontally */

    }
    
    /* Styling for the sliding div */
    .slide-up {
        padding: 25px;
        text-align: center;
        width: 320px; /* Fixed width of 300px */
        transform: translateY(100%); /* Initially hidden below the viewport */
        transition: transform 2s ease-in-out; /* Slow animation over 2 seconds */
                
        background-color: #d3d3d3; /* Light grey background */
        color: #000; /* Black font */
        border-radius: 10px; /* Rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect */
    }

        /* Class to show the div */
    .slide-up.active {
        transform: translateY(-90px); /* Slide up to visible position */
    }
    
    #how-to-play-popup, #word-list-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    #popup-content, #word-list-content {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        max-width: 90%;
        width: 400px;
        text-align: left;
        position: relative;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    #close-popup, #close-word-list {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #a95475;
        color: white;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s;
    }

    #close-popup:hover, #close-word-list:hover {
        background-color: #8e3f5e;
    }

    .example-tile {
        width: 40px;
        height: 40px;
        background-color:#CFE3F5;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        position: relative;
        font-family: Arial, Helvetica, sans-serif;
    }

    .example-letter {
        font-size: 1.6em;
        font-weight: bold;
        text-align: center;
    }

    .example-number {
        font-size: .7em;
        text-align: right;
        position: absolute;
        bottom: 2px; /* Adjusted to bottom */
        right: 2px;  /* Adjusted to align inside the tile */
    }

    .example-row {
        display: flex;
        align-items: center;
        margin: 10px 0;
    }

    .word-list {
        margin-right:25px;
        margin-left:40px;
        max-height: 300px;
        overflow-y: auto;
        float:left;
    }
    
    #gameNo{display:none};

    @media (max-height: 600px) {
        body{
            padding:1px;
            
        }
        /*
        #box, #grid {
            width: 100%;
            height: auto;
            aspect-ratio: 1/1;
        }
        .draggable, .droppable {
            width: 44px;
            height: 44px;
        }
        .droppable {
            border-width: 0.5px;
        }
        .droppable {
            left: calc(var(--col) * 44px);
            top: calc(var(--row) * 44px);
        }
        */
        .page_header {
            padding: 1px;
        }
        .headerText {
            font-size: 16px;
        }
        #spacer{
            margin-top:10px;
        }
        #score{
            height:20px;
        }
        #bestScore {
            font-size: 12px;
        }
        #mini-grid-container {
            width: 90%;
        }
        #lock-button, #how-to-play-btn, #word-list-btn {
            font-size: 12px;
            padding: 6px 12px;
        }
        #popup-content, #word-list-content {
            width: 90%;
            padding: 15px;
        }
    }
    
    
    
            .touch-dot {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: rgba(100, 100, 100, 0.5);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: fadeOut 0.5s forwards;
            animation-delay: 0.3s;
        }
        @keyframes fadeOut {
            to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
        }