/* ==========================================
   GLOBAL SETTINGS
========================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin:0;

    padding:0;

    width:100%;

    min-height:100%;

    overflow-x:hidden;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

}



/* ==========================================
   SKY BACKGROUND
========================================== */

.sky {

    position:fixed;

    inset:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

    z-index:0;

    background:

    linear-gradient(

        to bottom,

        #8fd8ff 0%,

        #70c8ff 25%,

        #55b3f5 50%,

        #438bd2 75%,

        #214d8a 100%

    );

}




/* ==========================================
   CLOUD LAYER
========================================== */

#cloudLayer {

    position:absolute;

    inset:0;

    overflow:hidden;

}



.cloud {

    position:absolute;

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    pointer-events:none;

    will-change:transform;

}



/* ==========================================
   MAIN CONTENT
========================================== */

.content {

    position:relative;

    z-index:10;

    width:100%;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding-top:35px;

    color:white;

    text-align:center;


    text-shadow:

        0 3px 8px rgba(0,0,0,.35);

}



/* ==========================================
   STEAM LOGO
========================================== */

.festival-logo {


    width:min(

        80vw,

        900px

    );


    height:auto;


    max-height:30vh;


    object-fit:contain;


    display:block;


    margin: 30px auto 50px auto;


    filter:

        drop-shadow(

            0 8px 15px rgba(0,0,0,.25)

        );


    animation:

        logoFloat 5s ease-in-out infinite;

}



@keyframes logoFloat {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-8px);

    }


    100% {

        transform:translateY(0);

    }

}



/* ==========================================
   TITLES
========================================== */

h1 {

    margin:10px 20px;

    font-size:

        clamp(

            2rem,

            5vw,

            4rem

        );

}



p {

    margin:0 20px;

    font-size:

        clamp(

            1rem,

            2vw,

            1.4rem

        );

}



/* ==========================================
   PASSPORT BACKGROUND
========================================== */

.passport-container {


    position:relative;


    width:min(

        1200px,

        95vw

    );


    aspect-ratio:17 / 22;


    margin-top:80px;


    margin-left:-1%;


    background-image:

        url("assets/passport.png");


    background-repeat:no-repeat;


    background-position:center;


    background-size:contain;


    z-index:15;

}



/* ==========================================
   BINGO GRID
========================================== */

#bingo {


    position:relative;


    top:25%;


    right:-3%;


    width:93%;


    height:45%;


    display:grid;


    grid-template-columns:

        repeat(10,minmax(0,1fr));


    grid-template-rows:

        repeat(5,minmax(0,1fr));


    gap:4px;


    z-index:20;

}



/* ==========================================
   BINGO SQUARES
========================================== */

.square {


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-align:center;


    overflow:hidden;


    padding:2px;


    cursor:pointer;


    user-select:none;


    background:

        rgba(255,255,255,.15);


    backdrop-filter:

        blur(4px);


    border:

        2px solid rgba(255,255,255,.1);


    border-radius:10px;


    transition:.2s ease;

}



.square:hover {


    transform:scale(1.05);


    background:

        rgba(255,255,255,.95);

}



/* ==========================================
   BINGO IMAGE
========================================== */

.square-icon {


    width:70%;


    height:70%;


    object-fit:contain;


    flex-shrink:1;


    pointer-events:none;

}



/* ==========================================
   BINGO TEXT
========================================== */

.square-text {


    width:95%;


    font-size:

        clamp(

            8px,

            .75vw,

            14px

        );


    line-height:1.1;


    overflow:hidden;


    display:-webkit-box;


    -webkit-line-clamp:3;


    -webkit-box-orient:vertical;

}



/* ==========================================
   COMPLETED SQUARE
========================================== */

.marked {


    background:

        rgba(255,255,255,.05);


    color:white;

}



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

button {


    margin-top:30px;


    padding:

        12px 30px;


    border:none;


    border-radius:25px;


    font-size:16px;


    cursor:pointer;

}


/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width: 700px) {

    .content {

        padding-top: 20px;

    }
	
    .map-section {

        margin-bottom: 350px;

    }

    .festival-logo {

        width: 90vw;

        max-height: 22vh;

    }

    /* Passport artwork */

    .passport-container {

        width: 180vw;          /* Make passport much larger */

        max-width: 100vw;       /* Ignore desktop max width */

        margin-top: -500px;
		
		

    }

    /* Bingo overlay */

    #bingo {

        top: 24%;

        right: auto;

        width: 96%;

        height: 44%;

        gap: 2px;

    }

    .square {

        padding: 2px;

    }

    .square-icon {

        width: 75%;

        height: 75%;

    }

    .square-text {

        font-size: clamp(
            6px,
            1.8vw,
            10px
        );

        line-height: 1.05;

    }

}

/* ==========================================
   STAMP IMAGE BEHAVIOR
========================================== */

.square-icon {

    width:75%;

    height:75%;

    object-fit:contain;

    flex-shrink:1;

    pointer-events:none;

    opacity:0;

    transform-origin:center;

}



/* ==========================================
   STAMP LANDING ANIMATION
========================================== */

.stamp-animation {

    animation:

        stampLand

        .55s

        cubic-bezier(.18,1.4,.3,1);

}



@keyframes stampLand {


    0% {

        opacity:0;

        transform:

            translateY(-80px)

            scale(2.5)

            rotate(var(--stamp-rotation));


        filter:

            blur(3px);

    }



    45% {

        opacity:1;

        transform:

            translateY(10px)

            scale(.8)

            rotate(var(--stamp-rotation));


        filter:none;

    }



    70% {

        transform:

            translateY(-5px)

            scale(1.12)

            rotate(var(--stamp-rotation));

    }



    100% {

        opacity:1;

        transform:

            translateY(0)

            scale(var(--stamp-scale))

            rotate(var(--stamp-rotation));

    }

}



/* ==========================================
   ACTIVITY TEXT FADE OUT
========================================== */


.square-text {

    width:95%;

    font-size:

        clamp(

            8px,

            .75vw,

            14px

        );


    line-height:1.1;


    overflow:hidden;


    display:-webkit-box;


    -webkit-line-clamp:3;


    -webkit-box-orient:vertical;


    transition:

        opacity .25s ease,

        transform .25s ease;

}



.text-fade {


    opacity:0;


    transform:

        scale(.85);

}



/* ==========================================
   PASSPORT IMPACT EFFECT
========================================== */


.passport-hit {


    animation:

        passportShake

        .25s ease;

}



@keyframes passportShake {


    0% {

        transform:

            translateY(0);

    }


    25% {

        transform:

            translateY(3px);

    }


    50% {

        transform:

            translateY(-3px);

    }


    75% {

        transform:

            translateY(2px);

    }


    100% {

        transform:

            translateY(0);

    }

}

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

.reset-button{

    display:block;

    margin:40px auto 60px auto;

    padding:14px 32px;

    font-size:18px;

    font-weight:600;

    color:white;

    background:#1d5fa7;

    border:none;

    border-radius:999px;

    cursor:pointer;

    box-shadow:

        0 8px 20px rgba(0,0,0,.25);

    transition:

        transform .2s ease,

        background .2s ease;

    z-index:100;

    position:relative;

}

.reset-button:hover{

    transform:translateY(-2px);

    background:#2d73c0;

}

.reset-button:active{

    transform:translateY(1px);

}

#schedule {
    display: block !important;
    position: relative;
    z-index: 99999;

    background: transparent;
    color: white;

    padding: 30px;
    min-height: 200px;

    max-width: 900px;
    margin: 40px auto;
}


/* Individual schedule cards */
.schedule-event {

    background: rgba(255, 255, 255, 0.85);

    color: #222;

    border-left: 6px solid rgba(255,255,255,0.5);

    border-radius: 12px;

    padding: 16px;

    margin-bottom: 18px;

    box-shadow: 0 3px 10px rgba(0,0,0,.15);

    backdrop-filter: blur(6px);

}


/* Current event */
.schedule-event.current {

    border-left-color: #2ecc71;

    background: rgba(235, 255, 240, 0.9);

}


/* Current event indicator */
.schedule-event.current h3::before {

    content:"🟢 ";

}


/* Event title */
.schedule-event h3 {

    margin:0 0 8px;

    font-size:1.3rem;

}


/* Event details */
.schedule-event p {

    margin:6px 0;

}


/* Countdown */
.countdown {

    font-weight:bold;

    color:#0066cc;

}


/* Section headings */
#schedule h2 {

    color:white;

    text-shadow:
        0 2px 4px rgba(0,0,0,.4);

}

.light-rays{

    background:

    radial-gradient(

        circle at 12% 14%,

        rgba(255,245,190,.55),

        rgba(255,220,120,.20) 20%,

        rgba(255,255,255,0) 60%

    ),

    repeating-linear-gradient(

        115deg,

        rgba(255,225,120,.08) 0px,

        rgba(255,245,190,.16) 50px,

        transparent 170px,

        transparent 320px

    );

    background-size:

        100% 100%,

        700px 100%;

}

.layer2{

    background:

    repeating-linear-gradient(

        108deg,

        rgba(255,255,220,.08) 0px,

        rgba(255,250,200,.16) 25px,

        transparent 90px,

        transparent 180px

    );

    background-size:

        450px 100%;

}

.layer3{

    background:

    repeating-linear-gradient(

        100deg,

        rgba(255,255,255,.12) 0px,

        rgba(255,255,240,.18) 8px,

        transparent 20px,

        transparent 70px

    );

    background-size:

        180px 100%;

}

#festivalMapSection {

    position: relative;

    width: min(700px, 85vw);

    margin: 50px auto;

    padding: 40px;

    background: rgba(255,255,255,0.15);

    border-radius: 20px;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);

}


#mapImageWrapper {

    position: relative;

    width: 100%;

}


#festivalMap {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 12px;

}


#mapIcons {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.mapIcon {

    position: absolute;

    cursor: pointer;

    transform:
        translate(-50%, -100%)
        scale(var(--map-icon-scale, .8));

    transition: .25s;

}

.mapIcon.selected {

    transform:
        translate(-50%, -100%)
        scale(calc(var(--map-icon-scale, .8) * 1.4));

    filter:
        drop-shadow(0 0 10px gold);

}

.checkin-link {
    position: relative;
    z-index: 100;
    pointer-events: auto;
    cursor: pointer;
}

```css
/* ==========================================
   FESTIVAL THANK YOU / EVALUATION
========================================== */

.thank-you-section {

    position: relative;

    z-index: 100;

    width: min(800px, 90vw);

    margin: 80px auto 50px;

    padding: 40px 30px;

    text-align: center;

    background: rgba(255, 255, 255, 0.85);

    border-radius: 20px;

    box-sizing: border-box;

    pointer-events: auto;

}


/* Thank-you message */

.thank-you-section h1 {

    margin-bottom: 15px;

}


.thank-you-message {

    line-height: 1.5;

    margin-bottom: 30px;

}


/* Evaluation box */

.evaluation-reminder {

    position: relative;

    z-index: 101;

    pointer-events: auto;

    padding: 25px;

    background: rgba(255, 255, 255, 0.7);

    border-radius: 15px;

}


.evaluation-reminder h2 {

    margin-top: 0;

}


.evaluation-reminder p {

    line-height: 1.5;

}


/* Evaluation button */

.evaluation-link {

    position: relative;

    z-index: 102;

    display: inline-block;

    margin-top: 15px;

    padding: 12px 24px;

    border-radius: 25px;

    text-decoration: none;

    cursor: pointer;

    pointer-events: auto;

}


/* Make sure the background clouds cannot block clicks */

#cloudLayer {

    pointer-events: none;

}
```
/* ==========================================
   MAP INFORMATION POPUP
========================================== */

#mapPopup {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: min(500px, 85vw);

    max-height: 80vh;

    overflow-y: auto;

    padding: 30px;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);

    z-index: 1000;

    text-align: center;

}


/* Hidden state */

#mapPopup.hidden {

    display: none;

}


/* Close button */

#closePopup {

    position: absolute;

    top: 10px;

    right: 15px;

    margin: 0;

    padding: 5px 10px;

    border: none;

    background: transparent;

    font-size: 22px;

    cursor: pointer;

}


/* Popup image */

#popupImage {

    display: block;

    width: 100%;

    max-height: 300px;

    object-fit: contain;

    margin: 20px auto;

    border-radius: 12px;

}


/* Popup link */

#popupLink {

    display: inline-block;

    margin-top: 15px;

    padding: 10px 20px;

    border-radius: 20px;

    text-decoration: none;

    cursor: pointer;

}