/* ==========================================================================
   RESET
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}


body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at top,
            rgba(155, 119, 69, 0.10),
            transparent 35%
        ),
        #f6f0e4;

    color: #403a31;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


button,
input {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   PAGE
   ========================================================================== */

.page {
    min-height: 100vh;

    width: 100%;

    padding:
        max(24px, env(safe-area-inset-top))
        18px
        max(24px, env(safe-area-inset-bottom))
        18px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.page-top {
    align-items: flex-start;
}


/* ==========================================================================
   CARD
   ========================================================================== */

.card {
    width: 100%;
    max-width: 620px;

    background: #fffdf8;

    border: 1px solid rgba(155, 119, 69, 0.16);

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(64, 58, 49, 0.10),
        0 3px 12px rgba(64, 58, 49, 0.05);
}


.landing-card {
    padding: 34px 24px 28px;

    text-align: center;
}


.games-card,
.game-detail-card {
    padding: 22px 18px 28px;
}


/* ==========================================================================
   ORNAMENT
   ========================================================================== */

.ornament {
    color: #9b7745;

    font-size: 20px;

    letter-spacing: 12px;

    margin-bottom: 16px;
}


.divider {
    color: #9b7745;

    opacity: 0.65;

    margin: 24px 0;

    font-size: 14px;

    letter-spacing: 8px;
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,
h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-weight: 500;

    color: #403a31;
}


.landing-card h1 {
    font-size: clamp(32px, 9vw, 48px);

    line-height: 1.1;

    margin-bottom: 26px;
}


.games-card h1 {
    font-size: 32px;

    line-height: 1.15;

    margin-bottom: 7px;
}


.game-detail-card h1 {
    font-size: 30px;

    line-height: 1.15;
}


h2 {
    font-size: 23px;
}


.subtitle {
    color: #7c7467;

    font-size: 14px;

    margin-bottom: 22px;
}


.intro {
    color: #625a4e;

    font-size: 16px;

    line-height: 1.75;

    text-align: left;
}


.intro p + p {
    margin-top: 16px;
}


small {
    display: block;

    color: #9a9183;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

form {
    width: 100%;
}


label {
    display: block;

    margin-bottom: 8px;

    color: #625a4e;

    font-size: 13px;

    font-weight: 600;

    text-align: left;
}


input[type="text"] {
    width: 100%;

    min-height: 58px;

    padding: 12px 16px;

    border: 1px solid rgba(155, 119, 69, 0.30);

    border-radius: 14px;

    background: #fffefa;

    color: #403a31;

    outline: none;

    font-size: 20px;

    text-align: center;

    letter-spacing: 5px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


input[type="text"]:focus {
    border-color: #9b7745;

    background: #ffffff;

    box-shadow:
        0 0 0 4px rgba(155, 119, 69, 0.10);
}


input::placeholder {
    color: #c9c0b2;

    opacity: 1;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

button {
    border: 0;

    cursor: pointer;

    touch-action: manipulation;
}


form > button {
    width: 100%;

    min-height: 58px;

    margin-top: 14px;

    padding: 13px 20px;

    border-radius: 14px;

    background: #73552e;

    color: #fffdf8;

    font-size: 16px;

    font-weight: 700;

    box-shadow:
        0 8px 18px rgba(115, 85, 46, 0.18);

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        opacity 0.15s ease;
}


form > button:active {
    transform: translateY(1px);

    background: #604523;
}


button:disabled {
    opacity: 0.65;

    cursor: wait;
}


/* ==========================================================================
   ERROR / SUCCESS
   ========================================================================== */

.error,
.success {
    margin-top: 14px;

    padding: 12px 14px;

    border-radius: 12px;

    font-size: 14px;

    line-height: 1.45;
}


.error {
    background: #fbebe7;

    border: 1px solid #edc8c0;

    color: #93483c;
}


.success {
    background: #edf4e9;

    border: 1px solid #cadcc1;

    color: #4f713f;

    margin-bottom: 16px;
}


/* ==========================================================================
   TOPBAR
   ========================================================================== */

.topbar {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 14px;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(155, 119, 69, 0.13);

    margin-bottom: 24px;
}


.topbar strong {
    display: block;

    margin-top: 2px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 500;
}


.topbar a {
    flex-shrink: 0;

    padding: 9px 12px;

    border: 1px solid rgba(155, 119, 69, 0.22);

    border-radius: 10px;

    color: #73552e;

    font-size: 12px;

    font-weight: 600;
}


/* ==========================================================================
   ACTIVE GAME BANNER
   ========================================================================== */

.active-game-banner {
    margin: 0 0 18px;

    padding: 17px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(155, 119, 69, 0.14),
            rgba(155, 119, 69, 0.05)
        );

    border: 1px solid rgba(155, 119, 69, 0.25);

    color: #5d4a33;

    font-size: 14px;
}


.active-game-banner strong {
    display: block;

    margin-bottom: 2px;

    color: #73552e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    font-weight: 600;
}


.small-muted {
    margin-top: 5px;

    color: #8d8374;

    font-size: 12px;
}


.banner-button {
    display: block;

    width: 100%;

    margin-top: 12px;

    padding: 11px;

    border-radius: 11px;

    background: #73552e;

    color: #fffdf8;

    text-align: center;

    font-size: 14px;

    font-weight: 700;
}


/* ==========================================================================
   GAMES GRID
   ========================================================================== */

.games {
    display: flex;

    flex-direction: column;

    gap: 13px;
}


.game-card {
    position: relative;

    display: flex;

    gap: 13px;

    width: 100%;

    padding: 17px;

    overflow: hidden;

    border: 1px solid rgba(155, 119, 69, 0.16);

    border-radius: 18px;

    background: #fffefa;

    transition:
        opacity 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}


.game-card:active {
    transform: scale(0.995);
}


.game-number {
    flex: 0 0 40px;

    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f0e7d7;

    color: #73552e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
}


.game-content {
    flex: 1;

    min-width: 0;
}


.game-content h2 {
    margin-bottom: 5px;

    font-size: 21px;
}


.game-content > p {
    color: #7c7467;

    font-size: 13px;

    line-height: 1.5;

    margin-bottom: 10px;
}


.game-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 13px;
}


.game-meta span {
    padding: 5px 8px;

    border-radius: 8px;

    background: #f7f1e7;

    color: #81786b;

    font-size: 11px;
}


/* ==========================================================================
   GAME STATES
   ========================================================================== */

.game-card.occupied {
    background: #fbf9f5;

    border-color: rgba(170, 116, 93, 0.18);
}


.game-card.completed {
    opacity: 0.72;

    background: #f5f6f1;
}


.game-card.completed .game-number {
    background: #dce8d4;

    color: #55734a;
}


/* ==========================================================================
   GAME ACTION
   ========================================================================== */

.game-action {
    width: 100%;
}


.reserve-button {
    display: block;

    width: 100%;

    min-height: 48px;

    padding: 10px 12px;

    border: 0;

    border-radius: 11px;

    background: #73552e;

    color: #fffdf8;

    text-align: center;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 5px 12px rgba(115, 85, 46, 0.13);

    cursor: pointer;
}


.reserve-button:active {
    transform: translateY(1px);
}


.continue-button {
    background: #9b7745;
}


.status {
    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 9px 10px;

    border-radius: 11px;

    text-align: center;

    font-size: 12px;

    line-height: 1.35;
}


.occupied-status {
    background: #f4ebe7;

    color: #956252;
}


.completed-status {
    background: #e8f0e3;

    color: #567449;

    font-weight: 700;
}


.live-status {
    transition:
        background 0.2s ease,
        opacity 0.2s ease;
}


/* ==========================================================================
   GAME DETAIL
   ========================================================================== */

.back-link {
    display: inline-flex;

    align-items: center;

    min-height: 40px;

    margin-bottom: 18px;

    color: #73552e;

    font-size: 13px;

    font-weight: 600;
}


.game-detail-header {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;
}


.game-detail-number {
    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f0e7d7;

    color: #73552e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 23px;
}


.game-detail-header h1 {
    margin-top: 2px;
}


/* ==========================================================================
   COUNTDOWN
   ========================================================================== */

.countdown {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 22px;

    padding: 15px 17px;

    border-radius: 15px;

    background: #f5efe4;

    border: 1px solid rgba(155, 119, 69, 0.16);
}


.countdown span {
    color: #81786b;

    font-size: 12px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.countdown strong {
    color: #73552e;

    font-variant-numeric: tabular-nums;

    font-size: 24px;

    letter-spacing: 1px;
}


.countdown-expired {
    background: #fbebe7;

    border-color: #edc8c0;
}


.countdown-expired strong {
    color: #93483c;
}


/* ==========================================================================
   GAME DESCRIPTION
   ========================================================================== */

.game-description {
    margin-bottom: 18px;

    color: #625a4e;

    font-size: 15px;

    line-height: 1.65;
}


.instructions {
    margin-top: 20px;

    padding: 20px;

    border-radius: 17px;

    background: #f8f3eb;

    border: 1px solid rgba(155, 119, 69, 0.12);
}


.instructions h2 {
    margin-bottom: 12px;

    font-size: 23px;
}


.instructions > div {
    color: #625a4e;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================================
   SOLUTION
   ========================================================================== */

.solution-box {
    margin-top: 20px;

    padding: 20px;

    border-radius: 17px;

    background: #fffefa;

    border: 1px solid rgba(155, 119, 69, 0.20);

    box-shadow:
        0 7px 20px rgba(64, 58, 49, 0.04);
}


.solution-box h2 {
    margin-bottom: 7px;

    font-size: 22px;
}


.solution-box p {
    margin-bottom: 15px;

    color: #7c7467;

    font-size: 13px;
}


.complete-button {
    background: #73552e;
}


/* ==========================================================================
   TEAM FOOTER
   ========================================================================== */

.team-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 22px;

    padding-top: 16px;

    border-top: 1px solid rgba(155, 119, 69, 0.12);

    color: #9a9183;

    font-size: 12px;
}


.team-footer strong {
    color: #73552e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;
}


/* ==========================================================================
   TABLET / NAGYOBB MOBIL
   ========================================================================== */

@media (min-width: 520px) {

    .page {
        padding-left: 24px;
        padding-right: 24px;
    }


    .landing-card {
        padding: 44px 38px 34px;
    }


    .games-card,
    .game-detail-card {
        padding: 28px 26px 34px;
    }


    .game-card {
        padding: 19px;
    }

}


/* ==========================================================================
   DESKTOP
   ==========================================================================
   
   Nem ez az elsődleges cél, de ha valaki mégis gépről nyitja meg,
   ne nézzen ki úgy, mintha egy szétesett mobiloldalt kapott volna.
   ========================================================================== */

@media (min-width: 800px) {

    .page {
        padding-top: 50px;
        padding-bottom: 50px;
    }


    .card {
        max-width: 680px;
    }


    .landing-card {
        max-width: 650px;

        padding: 52px 55px 42px;
    }


    .landing-card h1 {
        font-size: 48px;
    }


    .intro {
        font-size: 17px;
    }


    .games-card,
    .game-detail-card {
        padding: 32px;
    }


    .games {
        gap: 15px;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }

}

.leaderboard-button {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 54px;

    margin-top: 10px;

    padding: 12px 20px;

    border: 1px solid rgba(155, 119, 69, 0.30);

    border-radius: 14px;

    background: #fffdf8;

    color: #73552e;

    font-size: 15px;

    font-weight: 700;

    text-decoration: none;

    transition:
        background 0.15s ease,
        transform 0.15s ease,
        border-color 0.15s ease;
}


.leaderboard-button:active {
    transform: translateY(1px);

    background: #f5efe4;
}


.leaderboard-button:hover {
    border-color: #9b7745;

    background: #faf5ec;
}

/* ==========================================================================
   LEADERBOARD
   ========================================================================== */

.leaderboard-card {
    padding: 24px 18px 28px;
}


.leaderboard-header {
    text-align: center;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(155, 119, 69, 0.13);
}


.leaderboard-header .back-link {
    display: flex;

    justify-content: flex-start;

    margin-bottom: 10px;
}


.leaderboard-trophy {
    font-size: 42px;

    line-height: 1;

    margin: 5px 0 10px;
}


.leaderboard-header h1 {
    font-size: 34px;

    line-height: 1.1;

    margin-bottom: 6px;
}


.leaderboard-header p {
    color: #8a8174;

    font-size: 13px;
}


/* ==========================================================================
   PODIUM
   ========================================================================== */

.podium {
    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 7px;

    min-height: 245px;

    margin: 24px 0 28px;

    padding: 0 4px;
}


.podium-place {
    flex: 1;

    max-width: 145px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.podium-medal {
    font-size: 31px;

    line-height: 1;

    margin-bottom: 8px;
}


.podium-team {
    width: 100%;

    min-height: 38px;

    padding: 0 3px;

    color: #4d463c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.25;

    overflow-wrap: anywhere;
}


.podium-score {
    margin-top: 5px;

    color: #81786b;

    font-size: 12px;

    font-weight: 600;
}


.podium-block {
    width: 100%;

    margin-top: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(64, 58, 49, 0.38);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 26px;

    font-weight: 600;

    border-radius: 12px 12px 0 0;
}


.podium-first .podium-block {
    height: 100px;

    background:
        linear-gradient(
            to bottom,
            #e7d19d,
            #d8bc79
        );

    color: #73552e;
}


.podium-second .podium-block {
    height: 72px;

    background:
        linear-gradient(
            to bottom,
            #e0ded8,
            #c9c6bd
        );

    color: #625f57;
}


.podium-third .podium-block {
    height: 55px;

    background:
        linear-gradient(
            to bottom,
            #dfc2a5,
            #cda17c
        );

    color: #765237;
}


/* ==========================================================================
   LEADERBOARD LIST
   ========================================================================== */

.leaderboard-list {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.leaderboard-row {
    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 68px;

    padding: 10px 12px;

    border: 1px solid rgba(155, 119, 69, 0.12);

    border-radius: 14px;

    background: #fffefa;
}


.leaderboard-row.top-three {
    background: #fdfaf4;
}


.leaderboard-position {
    flex: 0 0 38px;

    width: 38px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 20px;

    font-weight: 600;

    color: #81786b;
}


.leaderboard-team {
    flex: 1;

    min-width: 0;
}


.leaderboard-team strong {
    display: block;

    color: #4d463c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.25;

    overflow-wrap: anywhere;
}


.leaderboard-team span {
    display: block;

    margin-top: 3px;

    color: #9a9183;

    font-size: 11px;
}


.leaderboard-time {
    flex-shrink: 0;

    color: #73552e;

    font-size: 14px;

    font-weight: 700;

    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   INFO
   ========================================================================== */

.leaderboard-info {
    margin-top: 20px;

    padding: 15px;

    border-radius: 13px;

    background: #f8f3eb;

    color: #7c7467;

    font-size: 12px;

    line-height: 1.55;
}


.leaderboard-info strong {
    display: block;

    margin-bottom: 4px;

    color: #73552e;

    font-size: 13px;
}


/* ==========================================================================
   LEADERBOARD MOBILE
   ========================================================================== */

@media (max-width: 370px) {

    .podium {
        gap: 3px;
    }


    .podium-team {
        font-size: 12px;
    }


    .podium-medal {
        font-size: 27px;
    }


    .leaderboard-row {
        gap: 8px;

        padding-left: 9px;
        padding-right: 9px;
    }


    .leaderboard-position {
        flex-basis: 32px;

        width: 32px;
    }


    .leaderboard-team strong {
        font-size: 14px;
    }

}
.home-admin-link {
    margin-top: 18px;
    text-align: center;
}

.home-admin-link a {
    display: inline-block;
    padding: 10px 18px;

    border: 1px solid rgba(155, 119, 69, 0.35);
    border-radius: 10px;

    color: var(--muted);
    background: transparent;

    font-size: 0.85rem;
    text-decoration: none;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.home-admin-link a:hover {
    background: rgba(155, 119, 69, 0.08);
    color: var(--gold-dark);
    border-color: var(--gold);
}