:root {
    color-scheme: light;
    --ink: #34512c;
    --leaf-dark: #385c35;
    --leaf: #659447;
    --cream: #fff9df;
    --wood: #8c572f;
    --wood-dark: #58381f;
    --gold: #ffcf57;
}

* { box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; margin: 0; }

body {
    font-family: "Fredoka", Arial, sans-serif;
    background: #a9d5c6;
    color: var(--ink);
}

button, input { font: inherit; }

.game-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    isolation: isolate;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    padding: clamp(18px, 3.4vw, 56px) clamp(20px, 6vw, 110px);
}

.game-menu__scenery {
    position: absolute;
    z-index: -2;
    inset: 0;
    background: url("../images/backgrounds/bg-student-login.webp") center / cover no-repeat;
}

/* A very light fade only behind the menu maintains contrast without obscuring the school. */
.game-menu::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, transparent 48%, rgba(228, 245, 231, .18) 67%, rgba(222, 244, 229, .28) 100%);
    pointer-events: none;
}

.game-menu__header {
    position: absolute;
    top: clamp(15px, 3vh, 34px);
    left: clamp(20px, 3vw, 48px);
}

.game-menu__brand {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 15px 7px 7px;
    border: 2px solid rgba(50, 83, 57, .7);
    border-radius: 15px;
    background: rgba(255, 250, 228, .92);
    box-shadow: 0 5px 0 rgba(48, 72, 42, .24);
    color: #294b39;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .6px;
}

.game-menu__brand img {
    display: block;
    width: 36px;
    height: 36px;
    padding: 2px;
    object-fit: contain;

    background: transparent;
    border-radius: 0;

    filter: brightness(0) saturate(100%)
            invert(24%) sepia(18%)
            saturate(1190%) hue-rotate(89deg)
            brightness(95%) contrast(90%);
}

.menu-board {
    width: min(100%, 405px);
    filter: drop-shadow(0 14px 12px rgba(26, 48, 35, .18));
}

.menu-board__rim {
    padding: 9px;
    border: 3px solid #5c3921;
    border-radius: 28px;
    background: linear-gradient(140deg, #c38b4f, #81502b 65%, #a97039);
    box-shadow: inset 0 3px 0 #e4ae71, inset 0 -5px 0 #694020, 0 7px 0 #593820;
}

.menu-board__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: clamp(19px, 2.7vw, 30px);
    border: 3px solid #e5bb6e;
    border-radius: 18px;
    background: linear-gradient(#fffbe7, #fbefc8);
    box-shadow: inset 0 2px 0 #fff, inset 0 -4px 0 #edddaa;
    text-align: center;
}

.menu-board h1 {
    margin: 0;
    color: #4d733c;
    font-size: clamp(38px, 4.4vw, 56px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 1.2px;
    text-shadow: 0 3px 0 #d1e0a8;
}

.menu-board__arabic {
    margin: 6px 0 1px;
    color: #8b6633;
    font: 800 clamp(18px, 2vw, 23px)/1.6 "Cairo", sans-serif;
}

.menu-board__rule {
    height: 18px;
    margin: 3px 0 8px;
    color: #c8a45e;
    font-size: 18px;
    line-height: 18px;
}

.menu-board__rule::before, .menu-board__rule::after {
    content: "";
    display: inline-block;
    width: 30%;
    height: 2px;
    margin: 0 12px 5px;
    background: #e8d5a5;
}

.session-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d6c599;
    border-radius: 11px;
    background: #f3e9c9;
    color: #786543;
    font-size: 13px;
    font-weight: 600;
}

.session-status__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #bca36d;
}

.session-status[data-state="live"] {
    border-color: #aad19e;
    background: #e8f7db;
    color: #3a793b;
}
.session-status[data-state="live"] .session-status__dot { background: #49a14a; }
.session-status[data-state="closed"],
.session-status[data-state="error"] {
    border-color: #e9c0aa;
    background: #fff0e2;
    color: #a05c45;
}
.session-status[data-state="closed"] .session-status__dot,
.session-status[data-state="error"] .session-status__dot { background: #ce8068; }

.entry-form { margin-top: 19px; text-align: left; }
.entry-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 600;
}
.entry-form input {
    display: block;
    width: 100%;
    height: 49px;
    padding: 0 14px;
    outline: none;
    border: 2px solid #bbaa77;
    border-radius: 11px;
    background: #fffdf5;
    color: #314631;
    font-size: 16px;
    transition: border-color .15s, box-shadow .15s;
}
.entry-form input:focus {
    border-color: #689d59;
    box-shadow: 0 0 0 3px rgba(101, 148, 71, .18);
}
.entry-form input::placeholder { color: #9c987f; }

.play-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 65px;
    margin-top: 17px;
    border: 3px solid #74501f;
    border-radius: 16px;
    background: linear-gradient(#ffe977 0%, #ffc53f 65%, #f4a92e 100%);
    box-shadow: inset 0 3px 0 #fff1a5, 0 6px 0 #95621e;
    color: #5c431d;
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.play-button span {
    font: 800 28px/1 "Cairo", sans-serif;
}
.play-button svg { width: 24px; height: 24px; fill: currentColor; }
.play-button:not(:disabled):hover { filter: brightness(1.035); transform: translateY(-1px); }
.play-button:not(:disabled):active { transform: translateY(4px); box-shadow: inset 0 2px 0 #fff1a5, 0 2px 0 #95621e; }
.play-button:disabled { cursor: not-allowed; opacity: .64; filter: saturate(.55); }

.ranking-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 9px;
    min-height: 38px;
    margin-top: 22px;
    padding: 7px 22px;
    border: 2px solid #66865b;
    border-radius: 11px;
    background: #e7f2d5;
    box-shadow: 0 3px 0 #b9caa2;
    color: #40683b;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}
.ranking-button svg { width: 18px; height: 18px; }
.ranking-button:hover { background: #f1f8e5; }


@media (max-width: 760px) {
    .game-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: safe center;
    
        min-height: 100dvh;
        padding: 80px 15px 24px;
    }

    .game-menu__scenery {
        background-position: 35% center;
    }

    .game-menu::before {
        background: linear-gradient(
            to bottom,
            transparent 4%,
            rgba(241, 250, 229, 0.08) 32%,
            rgba(241, 250, 229, 0.5) 100%
        );
    }

    .game-menu__header {
        top: 16px;
        left: 15px;
    }

    .game-menu__brand {
        font-size: 15px;
    }

    .game-menu__brand img {
        width: 30px;
        height: 30px;
    }

    .menu-board {
        width: min(100%, 410px);
    }
}

@media (max-height: 670px) and (min-width: 761px) {
    .game-menu { padding-block: 10px; }
    .menu-board__inner { padding: 14px 26px; }
    .menu-board h1 { font-size: 40px; }
    .menu-board__arabic { font-size: 18px; }
    .entry-form { margin-top: 10px; }
    .ranking-button { margin-top: 12px; }
}

@media (max-height: 630px) and (max-width: 760px) {
    .game-menu { min-height: 630px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}