/* --- Global Styles --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'TCCC Unity', sans-serif;
    color: #ffffff;
}

body {
    background: url('gawai_bg_kv.png') no-repeat center center fixed;
    background-size: cover;
}

.main-wrapper {
    max-width: 1000px; /* Slightly wider to accommodate 5 items comfortably */
    margin: 0 auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    min-height: 100vh;
    padding: 60px 20px;
    box-sizing: border-box;
}

/* --- Typography --- */
.brand-heading {
    font-family: 'TCCC Unity Head', sans-serif;
    font-weight: bold;
    font-size: 2.8rem;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.welcome-msg {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 50px;
}

.content-block { margin-bottom: 60px; }

.placeholder-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* --- Prize Section (Compact) --- */
.prize-grid {
    display: grid;
    /* This forces 6 equal columns regardless of width */
    grid-template-columns: repeat(6, 1fr); 
    gap: 12px;
    max-width: 100%;
    margin: 0 auto 40px auto;
    padding: 0 5%;
}

.prize-item {
    background: #ffffff; /* White background for the items */
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.prize-item:hover {
    transform: translateY(-3px);
}

.prize-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    object-fit: contain;
}

.prize-item p {
    color: #000;
    font-size: 0.65rem; /* Small font to keep card short */
    font-weight: bold;
    margin: 6px 0 0 0;
    text-transform: uppercase;
    line-height: 1.1;
}

/* --- Mechanic Box (Sized Down) --- */
.mechanic-box {
    background: #F40009;
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 25px;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.mechanic-box p {
    margin: 0;
    font-weight: bold;
    font-size: 0.95rem;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 850px) {
    /* On tablets/small screens, 3 across is more readable than 6 */
    .prize-grid {
        grid-template-columns: repeat(3, 1fr);
    padding: 0 15%;
    }
}

@media (max-width: 480px) {
    /* On small phones, 2 across is best */
    .prize-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    padding: 0 10%;
    }
}

/* --- Form Styles --- */
.form-container {
    background: #fff;
    color: #000;
    padding: 40px;
    border-radius: 15px;
    text-align: left;
    max-width: 500px;
    margin: 0 auto;
}

.form-title { font-family: 'TCCC Unity Head', sans-serif; color: #F40009; margin: 0 0 20px 0; }

input[type="text"], input[type="email"] {
    width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;
}

.btn-submit {
    background: #F40009; color: #fff; border: none; width: 100%; padding: 15px; font-weight: 900; border-radius: 5px; cursor: pointer; margin-top: 10px;
}

.footer-link { margin-top: 60px; padding-bottom: 40px; }
.footer-link a { color: #fff; font-weight: bold; text-decoration: underline; }

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    
    .brand-heading { font-size: 2rem; }
}

/* --- Map/Itinerary Side-by-Side --- */
.map-itinerary-container { display: flex; gap: 20px; justify-content: center; margin-top: 20px; padding: 0 20px; }
.zoom-trigger { position: relative; cursor: pointer; flex: 1; transition: transform 0.3s ease; }
.placeholder-img { width: 100%; height: auto; border-radius: 10px; border: 3px solid #fff; }

/* --- Modal Overlay --- */
/* --- Updated Modal Overlay --- */
.zoom-modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.95); 
    
    /* This is the key: allow scrolling inside the modal */
    overflow: auto; 
    padding: 60px 20px; /* Space for the X button */
    box-sizing: border-box;
}

/* Wrapper that centers the image initially */
.modal-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top so scrolling feels natural */
    min-height: 100%;
    width: 100%;
}

.modal-content { 
    height: auto; /* Keep aspect ratio */
    transition: width 0.1s ease-out; 
    cursor: zoom-in;
    display: block;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* Fixed Close Button - Stays in the corner while you scroll */
.close-btn { 
    position: fixed; 
    top: 20px; 
    right: 20px; 
    color: #fff; 
    font-size: 35px; 
    font-weight: bold; 
    cursor: pointer;
    z-index: 10001; /* Higher than everything */
    background: #F40009; 
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    line-height: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.close-btn:hover {
    background: #cc0000;
    transform: scale(1.1);
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    .zoom-modal { padding: 40px 10px; }
    .close-btn { top: 15px; right: 15px; width: 40px; height: 40px; }
}