/* ================================================================
   ZILLA TOWNSHIP — VISUAL BRANDING
   ================================================================ */

html {
    min-height: 100%;
    background: #0c1410;
}

body {
    min-height: 100vh;

    background-image:
        linear-gradient(
            rgba(7, 15, 11, 0.38),
            rgba(7, 15, 11, 0.58)
        ),
        url("/static/ztwall.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* ---------------------------------------------------------------
   TOP HEADER
   --------------------------------------------------------------- */

.topbar {
    min-height: 105px;

    background:
        linear-gradient(
            180deg,
            rgba(7, 16, 11, .91),
            rgba(9, 18, 12, .82)
        ) !important;

    backdrop-filter: blur(5px);

    border-bottom:
        2px solid rgba(225, 186, 98, .85);
}

/* ---------------------------------------------------------------
   REAL LOGO
   --------------------------------------------------------------- */

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
}

.zt-logo {
    width: 190px;
    height: 92px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(0,0,0,.65)
        );
}

.brand {
    font-size: 29px !important;

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

.subtitle,
.game-date {
    text-shadow:
        0 2px 3px rgba(0,0,0,.85);
}

/* ---------------------------------------------------------------
   TRANSLUCENT GAME UI
   --------------------------------------------------------------- */

.stats {
    background:
        rgba(11, 20, 14, .78) !important;

    backdrop-filter: blur(4px);
}

.stat {
    background:
        rgba(28, 42, 31, .86) !important;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.20);
}

.message,
.edu-banner {
    background:
        rgba(21, 31, 22, .91) !important;

    backdrop-filter: blur(4px);
}

.panel {
    background:
        linear-gradient(
            180deg,
            rgba(35, 52, 39, .94),
            rgba(20, 31, 23, .94)
        ) !important;

    backdrop-filter: blur(5px);

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.28);
}

/* ---------------------------------------------------------------
   MAKE GAME BOARD STAND OUT FROM WALLPAPER
   --------------------------------------------------------------- */

.map-wrap {
    box-shadow:
        0 8px 24px
        rgba(0,0,0,.45);

    border:
        2px solid
        rgba(218, 190, 108, .58) !important;
}

/* ---------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------- */

@media(max-width: 750px) {

    .zt-logo {
        width: 145px;
        height: 72px;
    }

    .brand {
        font-size: 22px !important;
    }

}



/* ================================================================
   ZILLA TOWNSHIP — WALLPAPER VISIBILITY FIX V2
   ================================================================ */

/*
   The page already had the wallpaper, but the SVG land rectangle
   completely covered it.

   We now put the wallpaper directly behind the CITY MAP itself.
*/

.map-wrap {

    background-image:
        linear-gradient(
            rgba(20, 40, 24, .12),
            rgba(20, 40, 24, .18)
        ),
        url("/static/ztwall.png?v=3") !important;

    background-size:
        cover !important;

    background-position:
        center center !important;

    background-repeat:
        no-repeat !important;

}


/*
   Remove the old solid green CSS background from the SVG.
*/

.citymap {

    background:
        transparent !important;

}


/*
   The first direct rectangle inside the SVG is the giant green
   land layer. Make it translucent so the wallpaper actually shows.
*/

svg.citymap > rect:first-of-type {

    opacity:
        .22 !important;

}


/*
   Keep roads/buildings readable against the scenery.
*/

.citymap line,
.citymap path,
.citymap polygon {

    filter:
        drop-shadow(
            0 1px 1px
            rgba(0,0,0,.12)
        );

}


/*
   Builder logos.
*/

.zilla-builder-logo {

    display:
        block;

    max-width:
        170px;

    max-height:
        48px;

    object-fit:
        contain;

    margin:
        2px 0 6px 0;

    padding:
        3px 6px;

    border-radius:
        4px;

    background:
        rgba(255,255,255,.96);

}


.zilla-builder-logo-wrap {

    display:
        flex;

    align-items:
        center;

    min-height:
        46px;

    margin-bottom:
        4px;

}