body { 
            font-family: Arial; 
            padding: 20px;
            background-color: white;
        }
        a { margin-right: 15px; }
        .record-container, .draw-Container {
            max-width: 900px;
            margin: 40px auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-family: Arial, sans-serif;
        }
        .draw-results-container {
            margin: 5px auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-family: Arial, sans-serif;
        }
        .max400{
            padding-top: 30px;
            max-width: 400px;          /* or any width you want */
            margin: 0 auto;        /* centers the box itself */
        }
        .centre-box {
            max-width: 800px;          /* or any width you want */
            margin: 0 auto;        /* centers the box itself */
            padding: 0;
            background: white;
            border-radius: 8px;
            display: flex;         /* enables flexbox */
            flex-direction: column; 
            justify-content: center; /* centers content horizontally */
            align-items: center ;    /* centers content vertically */
            text-align: center;      /* optional: centers text inside */
        }
         .admin-box {
            max-width: 800px;          /* or any width you want */
            margin: 0 auto;        /* centers the box itself */
            padding: 0;
            background: white;
            border-radius: 8px;
            display: flex;         /* enables flexbox */
            flex-direction: column; 
            justify-content: center; 
            text-align: right;      
        }
        .centre-box p {
            font-size: clamp(12px, 4vw, 22px);
        }

        .record-header,
        .record-row,
        .draw-numbers-row,
        .winning-lines-header {
            display: grid;
            text-align: center;
            padding: 12px;
            border-radius: 6px;
        }
        .draw-numbers-row { grid-template-columns: repeat(8, 1fr);}
        .record-header,.record-row { grid-template-columns: repeat(7, 1fr);}

        .record-header, .winning-lines-header {
            background: #333;
            color: #fff;
            font-weight: bold;
        }

        .record-row {
            background: #f5f5f5;
            border: 1px solid #ddd;
        }

        .record-row:hover {
            background: #e9e9e9;
        }



        .record-row div {
            overflow: visible;
            padding: 4px;
        }

        .responsive-img {
            display: block;
            margin: 0 auto;
            height: auto;
            padding: 4px;
        }

        .responsive-img.match {
            border: 3px solid white;          /* border */
            border-radius: 50%;              /* optional rounding */

            filter:
                brightness(1.1)
                drop-shadow(0 0 6px yellow);
               /* drop-shadow(0 0 10px gold);  /* multiple shadows allowed */

            transform: scale(1);
            transition: all 0.2s ease;
            max-width: none;
        }

        select {
            max-width: 800px;
            padding: 10px;
            margin: 8px 0;
            border: 2px solid #0078d4;
            border-radius: 6px;
            background: #fff;
            font-size: 20px;
            cursor: pointer;
        }

select:focus {
    outline: none;
    border-color: #005a9e;
    box-shadow: 0 0 5px rgba(0, 120, 212, 0.5);
}

.ball-wrapper {
    position: relative;
    display: inline-block;
}

.dot {
    width: 4px;
    height: 4px;
    background: lightgrey; /* placeholder */
    border-radius: 50%;
    position: absolute;
}

/* Round 1 dot (top) */
.dot-top {
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
}

/* Round 2 dots (bottom, side-by-side, perfectly centred) */
.dot-bottom {
    bottom: -6px;
}

/* left dot: 8px left of centre */
.dot-bottom.left {
    left: calc(50% - 8px);
}

/* right dot: 8px right of centre */
.dot-bottom.right {
    left: calc(50% + 2px);
}

/* ####################################################### */
/* ####################################################### */

.edit-link {
    color: #0066cc;          /* classic link blue */
    text-decoration: underline;
    cursor: pointer;         /* makes it feel clickable */
}
.edit-link:hover {
    color: #004999;
}

.round-box {
    display: inline-block;
    margin: 0 auto 25px auto;   /* center horizontally */
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 5px 15px 5px 15px;
    margin-bottom: 15px;
    position: relative;
    background: #fff;
}

/* The label that sits ON the border */
.round-label {
    position: absolute;
    top: -12px;              /* moves it up onto the border */
    left: 20px;
    background: #fff;        /* same as container background */
    padding: 0 8px;
    font-weight: bold;
    font-size: 14px;
    color: #333;
}

/* Numbers row */
.draw-numbers-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bonus-label {
    font-weight: bold;
    margin-left: 4px;
}
/* ####################################################### */
    /* desktop */
    @media (min-width: 600px) {
        .responsive-img {
            transform: scale(0.7);
        }
    }

    /* Mobile:  */
    @media (max-width: 600px) {
        /*scale image to 70% of its natural size */
        .responsive-img {
            width: 70%;
        }
    }