@charset "utf-8";
/* CSS Document */

    #puzzle-container,
    #full-image {
        width: min(600px, 100dvh);
        aspect-ratio: 600 / 574;
        margin: 20px auto;
        border: 2px solid #333;
        position: relative;
        background: #ccc;
        overflow: hidden;
    }

    .tile {
        position: absolute;
        width: 16.6666667%;
        height: 16.6666667%;
        border: 1px solid #999;
        background-image: url("./puzzle3.jpg");
        background-repeat: no-repeat;
        background-size: 600% 600%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(12px, 2.5vw, 20px);
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px 3px black;
        transition: left 0.15s ease, top 0.15s ease;
    }

    .tile.no-hint {
        color: transparent;
        text-shadow: none;
    }

    #full-image {
        display: none;
        background-image: url("./puzzle3.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    #controls {
    margin: 15px 0 0 12px;
    }

    button {
        font-size: 16px;
        padding: 10px 14px;
        margin: 4px;
        cursor: pointer;
    }

    #timer {
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        margin: 10px;
    }

    #message {
        font-size: 22px;
        font-weight: bold;
        color: green;
        margin-top: 10px;
    }

    #image-error {
        display: none;
        color: #c00;
        font-weight: bold;
        margin: 15px auto;
    }