/* =========================================================
   SiTC GAMES HUB
   Main hub styling.

   The laboratory cards themselves now act as the player's
   passport. Each card can show:
   - Lab badge status
   - Lab Master title
   - Separate Main Mission and passive Cases routes

   The layout is designed primarily for phones/tablets but
   scales up cleanly for laptops and larger displays.
   ========================================================= */


/* =========================================================
   GLOBAL SETUP
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    color: #10245c;

    background:
        linear-gradient(
            180deg,
            #eaf8ff 0%,
            #ffffff 48%,
            #f2fbff 100%
        );
}

button,
a {
    font: inherit;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: relative;

    overflow: hidden;

    padding:
        clamp(34px, 7vw, 70px)
        20px
        clamp(32px, 5vw, 52px);

    text-align: center;

    color: white;

    background:
        linear-gradient(
            135deg,
            #076fbd 0%,
            #09a6dc 52%,
            #30c7e8 100%
        );

    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;

    box-shadow:
        0 10px 28px
        rgba(0, 73, 126, 0.18);
}


/* Decorative translucent circles.
   These are purely visual and can later be replaced or supplemented
   by approved MABS / Mater Dei branding. */

.site-header::before,
.site-header::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);
}

.site-header::before {
    width: 260px;
    height: 260px;

    top: -120px;
    left: -70px;
}

.site-header::after {
    width: 340px;
    height: 340px;

    right: -160px;
    bottom: -210px;
}

.header-content {
    position: relative;
    z-index: 1;

    max-width: 850px;

    margin: 0 auto;
}

.header-kicker {
    margin:
        0 0 10px;

    font-size:
        clamp(0.75rem, 1.5vw, 0.95rem);

    font-weight: 900;

    letter-spacing: 3px;

    opacity: 0.9;
}

.site-header h1 {
    margin: 0;

    font-size:
        clamp(2.7rem, 8vw, 5.5rem);

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: 1px;
}

.header-description {
    max-width: 720px;

    margin:
        18px auto 0;

    font-size:
        clamp(1rem, 2.3vw, 1.35rem);

    line-height: 1.45;

    font-weight: 700;
}


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

main {
    width:
        min(
            1180px,
            calc(100% - 28px)
        );

    margin:
        32px auto 70px;
}

.eyebrow {
    margin:
        0 0 5px;

    color: #1282c2;

    font-size: 0.78rem;

    font-weight: 900;

    letter-spacing: 2px;
}


/* =========================================================
   YOUNG SCIENTIST OVERALL PROGRESS
   ========================================================= */

.young-scientist-progress {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    padding:
        clamp(22px, 4vw, 36px);

    background: white;

    border:
        3px solid #8edcff;

    border-radius: 28px;

    box-shadow:
        0 12px 30px
        rgba(0, 80, 140, 0.10);
}

.mission-text h2 {
    margin:
        0 0 8px;

    font-size:
        clamp(1.55rem, 4vw, 2.5rem);
}

.mission-text p:last-child {
    max-width: 700px;

    margin: 0;

    color: #56677e;

    line-height: 1.5;
}

.overall-progress {
    flex-shrink: 0;

    min-width: 125px;

    padding:
        16px 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: #10245c;

    color: white;

    border-radius: 22px;

    box-shadow:
        0 7px 16px
        rgba(16, 36, 92, 0.18);
}

.overall-progress strong {
    font-size:
        clamp(1.5rem, 4vw, 2.1rem);

    line-height: 1;
}

.overall-progress span {
    margin-top: 5px;

    font-size: 0.78rem;

    font-weight: 800;

    opacity: 0.85;
}


/* =========================================================
   YOUNG SCIENTIST COMPLETION
   ========================================================= */

.young-scientist-complete {
    margin-top: 22px;

    padding:
        clamp(22px, 4vw, 34px);

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    background:
        linear-gradient(
            135deg,
            #fff6b9,
            #fffdf0
        );

    border:
        3px solid #efc719;

    border-radius: 28px;

    box-shadow:
        0 10px 24px
        rgba(176, 132, 0, 0.14);
}

.young-scientist-complete.hidden {
    display: none;
}

.completion-symbol {
    flex-shrink: 0;

    font-size:
        clamp(3.5rem, 8vw, 5rem);
}

.young-scientist-complete h2 {
    margin:
        0 0 6px;

    font-size:
        clamp(1.6rem, 4vw, 2.4rem);

    color: #6f5300;
}

.young-scientist-complete p:last-child {
    margin: 0;

    color: #665700;

    line-height: 1.45;
}


/* =========================================================
   LABORATORY SECTION
   ========================================================= */

.laboratories-section {
    margin-top:
        54px;
}

.section-heading {
    max-width: 760px;

    margin:
        0 auto 28px;

    text-align: center;
}

.section-heading h2 {
    margin:
        0 0 9px;

    font-size:
        clamp(1.9rem, 5vw, 3rem);
}

.section-heading p:last-child {
    margin: 0;

    color: #607086;

    line-height: 1.5;
}


/* =========================================================
   LABORATORY GRID
   ========================================================= */

.lab-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(300px, 1fr)
        );

    gap: 22px;
}


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

.lab-card {
    position: relative;

    min-height: 410px;

    padding:
        26px 22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    background: white;

    border:
        3px solid #dceef7;

    border-radius: 27px;

    box-shadow:
        0 9px 23px
        rgba(0, 70, 115, 0.08);

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

.lab-card:hover {
    transform:
        translateY(-4px);

    border-color:
        #75cdec;

    box-shadow:
        0 14px 30px
        rgba(0, 70, 115, 0.13);
}


/* When the main mission has been completed,
   JavaScript adds the badge-earned class. */

.lab-card.badge-earned {
    border-color:
        #f0ca2d;

    background:
        linear-gradient(
            180deg,
            #fffef6 0%,
            #ffffff 45%
        );
}


/* =========================================================
   MASTERED LABORATORY

   Once every case in the laboratory has been completed,
   the entire card becomes gold rather than only changing
   its title/status text.
   ========================================================= */

.lab-card.mastered {
    border-color: #d9a800;

    background:
        linear-gradient(
            145deg,
            #fff1a8 0%,
            #ffd94f 48%,
            #fff4b8 100%
        );

    box-shadow:
        0 14px 32px
        rgba(174, 125, 0, 0.25);
}


/* Keep the main laboratory name strong and readable
   against the gold background. */

.lab-card.mastered h3 {
    color: #624700;
}


/* Description text becomes a darker warm tone. */

.lab-card.mastered .lab-description {
    color: #6f5a24;
}


/* Give the mastered badge itself a stronger gold treatment. */

.lab-card.mastered .lab-badge {
    background:
        linear-gradient(
            145deg,
            #fff9c9,
            #ffd43b
        );

    border-color: #c99500;

    box-shadow:
        0 7px 18px
        rgba(145, 102, 0, 0.22);
}


/* The mastery title becomes dark gold for good contrast. */

.lab-card.mastered .lab-badge-status {
    color: #684900;
}


/* =========================================================
   LAB BADGE
   ========================================================= */

.lab-badge {
    position: relative;

    width: 92px;
    height: 92px;

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f0f5f8;

    border:
        4px solid #d7e2e8;

    border-radius: 50%;

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

.lab-icon {
    display: flex;

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

    font-size: 3.4rem;

    filter: grayscale(1);

    opacity: 0.55;

    transition:
        filter 0.2s ease,
        opacity 0.2s ease;
}

.lab-icon-image {
    display: block;

    width: 54px;
    height: 54px;
}


/* The little star appears on an earned lab badge. */

.badge-mark {
    position: absolute;

    right: -5px;
    bottom: -2px;

    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: transparent;

    color: white;

    font-size: 1.05rem;

    font-weight: 900;
}

.lab-card.badge-earned .lab-badge {
    background:
        linear-gradient(
            145deg,
            #fff5ac,
            #fffce5
        );

    border-color:
        #ecc326;

    transform:
        scale(1.04);
}

.lab-card.badge-earned .lab-icon {
    filter: none;

    opacity: 1;
}

.lab-card.badge-earned .badge-mark {
    background:
        #e4af00;

    box-shadow:
        0 3px 8px
        rgba(156, 113, 0, 0.24);
}


/* =========================================================
   LAB CARD TEXT
   ========================================================= */

.lab-card h3 {
    margin:
        0 0 6px;

    font-size:
        1.55rem;

    color: #10245c;
}

.lab-badge-status {
    min-height: 22px;

    margin-bottom: 13px;

    color: #75818a;

    font-size: 0.82rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}

.lab-card.badge-earned .lab-badge-status {
    color: #a67800;
}

.lab-card.mastered .lab-badge-status {
    color: #8d6100;
}

.lab-description {
    flex-grow: 1;

    margin:
        0 0 19px;

    color: #56677e;

    line-height: 1.45;
}


/* =========================================================
   ENTER LAB BUTTON
   ========================================================= */

.lab-button {
    width: 100%;

    max-width: 220px;

    padding:
        13px 18px;

    display: inline-block;

    border: none;

    border-radius: 999px;

    background: #0877cc;

    color: white;

    text-decoration: none;

    text-align: center;

    font-weight: 900;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.lab-button:hover {
    background: #065fa6;

    transform:
        translateY(-2px);

    box-shadow:
        0 6px 14px
        rgba(0, 90, 160, 0.16);
}

.lab-button.disabled {
    background: #cad4da;

    color: #68767f;

    cursor: default;

    box-shadow: none;
}

.lab-button.disabled:hover {
    transform: none;

    background: #cad4da;
}

.lab-actions {
    width: 100%;
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.lab-actions .lab-button {
    max-width: none;
}

.lab-actions .cases-button {
    color: #07598b;
    background: #dff5fb;
    box-shadow: inset 0 0 0 2px #9ed8ea;
}

.lab-actions .cases-button:hover {
    color: #fff;
    background: #0877cc;
}


/* =========================================================
   BOTTOM PROGRESS CONTROL
   ========================================================= */

.hub-tools {
    margin-top: 46px;
    display: flex;
    justify-content: center;
}

.reset-progress-button {
    padding: 10px 16px;
    border: 1px solid #b9c9d5;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #52677a;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.reset-progress-button:hover {
    background: white;
    border-color: #8aa8bb;
    color: #29485d;
    transform: translateY(-1px);
}

.reset-progress-button:focus-visible {
    outline: 3px solid #8edcff;
    outline-offset: 3px;
}


/* =========================================================
   TABLETS / SMALLER SCREENS
   ========================================================= */

@media (max-width: 760px) {

    main {
        margin-top: 22px;
    }

    .young-scientist-progress {
        align-items: stretch;
    }

    .overall-progress {
        justify-content: center;
    }

}


/* =========================================================
   PHONES
   ========================================================= */

@media (max-width: 600px) {

    main {
        width:
            min(
                calc(100% - 20px),
                1180px
            );

        margin-bottom: 45px;
    }

    .site-header {
        padding-top: 38px;

        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
    }

    .young-scientist-progress {
        flex-direction: column;
    }

    .overall-progress {
        width: 100%;

        min-width: 0;

        flex-direction: row;

        justify-content: center;

        gap: 8px;

        border-radius: 17px;
    }

    .overall-progress span {
        margin-top: 0;
    }

    .young-scientist-complete {
        flex-direction: column;

        text-align: center;
    }

    .completion-symbol {
        line-height: 1;
    }

    .laboratories-section {
        margin-top: 42px;
    }

    .lab-grid {
        grid-template-columns: 1fr;
    }

    .lab-card {
        min-height: 380px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 350px) {

    .site-header h1 {
        font-size: 2.5rem;
    }

    .lab-card {
        padding:
            22px 16px;
    }

    .lab-badge {
        width: 82px;
        height: 82px;
    }

    .lab-icon {
        font-size: 3rem;
    }

}

/* =========================================================
   CLICKABLE LAB CARDS

   Available laboratories behave like large touch targets.
   This is particularly useful on phones and tablets.
   ========================================================= */

.lab-card.clickable {
    cursor: pointer;
}

.lab-card.clickable:active {
    transform:
        translateY(-1px)
        scale(0.99);
}