html {
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    min-height: 100vh;
    background: url("images/Background.png") no-repeat center top;
    background-size: cover;
    background-color: black;
    color: black;
}


hr {
    margin-top: 0;
    margin-bottom: 0;
    border: none;
    border-top: 4px solid #E4DABD;
    box-shadow: 0 -2px 0 #3C4383, 0 2px 0 #3C4383;
}
.site-logo-wrap {
    width: 700px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}
.site-logo {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -190px;
}
.site-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}

.site-logo-link {
    display: block;
}

.ui-container {
    position: relative;
    width: 1200px;
    margin: -365px auto 0;
}

.ui-background {
    width: 100%;
    display: block;
}

/* Fixed to the exact black-square cutouts baked into Basic_UI.png —
   these frames can't be enlarged without the photo spilling past its border */
.burgers {
    position: absolute;
    top: 69.14%;
    left: 7.55%;
    width: 24.87%;
    height: 11.13%;
}

.outside-photo {
    position: absolute;
    top: 79.3%;
    left: 67.45%;
    width: 24.87%;
    height: 11.13%;
}

/* Positioned to exactly match the navy plaque inside the notch of Basic_UI.png */
.title {
    position: absolute;
    top: 24.7%;
    left: 23.7%;
    width: 52.47%;
    height: 8.6%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.title p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

/* Sits inside the top of the gray video box (there's no dedicated slot for this
   in the art, so it lives as a caption strip above the iframe, within the box) */
.video-caption {
    position: absolute;
    top: 33.3%;
    left: 20.05%;
    width: 56.38%;
    height: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.video-caption p {
    margin: 0;
    font-family: "Skranji", cursive;
    font-size: 13px;
    color: #2b1d00;
    letter-spacing: 0.3px;
}

/* Sits in the open tan gap between the bottom of the video box (53.4%)
   and the top of the lower gray panel (68.85%) */
.info {
  position: absolute;
  top: 54.5%;
  left: 6%;
  width: 88%;
  max-height: 13.5%;
  padding: 2px 4px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.info p {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0.2px;
}

/* Sits in the lower gray panel, to the right of the left photo cutout
   (which ends at 32.4%) and above the right photo cutout (which starts at 79.3%) */
.infonext {
  position: absolute;
  top: 69.3%;
  left: 34%;
  width: 59%;
  max-height: 9.8%;
  padding: 2px 4px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

.infonext p {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

/* Sits below the left photo cutout (ends at 80.27%) and left of the
   right photo cutout (starts at 67.45%) */
.infothree {
  position: absolute;
  top: 82%;
  left: 6%;
  width: 59%;
  max-height: 11%;
  padding: 2px 4px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.infothree p {
  margin: 0;
  font-family: "Fredoka", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.ui-container iframe {
    position: absolute;
    top: 36.8%;
    left: 22%;
    width: 52.5%;
    height: 16%;
    border: none;
}


.site-footer {
    width: 100%;
    padding: 20px 0 45px;
    background-color: #3C4383;
    color: #E4DABD;
    text-align: center;
    font-family: "Skranji", cursive;
    font-size: 16px;
    border-top: 4px solid #3C4383;
    box-sizing: border-box;
    position: relative;
}

.bsi-logo {
    position: absolute;
    bottom: 5px;
    left: 20px;
    width: 120px;
    height: auto;
}

.cyberfun-logo {
    position: absolute;
    bottom: 5px;
    right: 20px;
    width: 135px;
    height: auto;
}

.game-nav {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.nav-box.active {
    background: linear-gradient(180deg, #ffd76b 0%, #e0a72a 45%, #c98f1a 55%, #a8760f 100%);
    border-color: #7a5608;
    color: #2b1d00;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.6),
        inset 0 -3px 4px rgba(0,0,0,0.4),
        2px 3px 0 #5c3f06;
    pointer-events: none;
}

.nav-box {
    display: inline-block;
    padding: 14px 40px;
    font-family: 'Skranji', cursive;
    font-size: 40px;
    color: #e8e8ff;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    background: linear-gradient(180deg, #7b7bd6 0%, #4a4aa8 45%, #3a3a8c 55%, #2b2b6e 100%);
    border: 3px solid #1c1c4d;
    border-radius: 4px;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.4),
        inset 0 -3px 4px rgba(0,0,0,0.4),
        2px 3px 0 #16163d;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.nav-box:hover {
    background: linear-gradient(180deg, #8b8be6 0%, #5a5ab8 45%, #4a4a9c 55%, #3b3b7e 100%);
    transform: translateY(-5px);
}
.nav-box:active {
    transform: translateY(1px);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.5),
        1px 1px 0 #16163d;
}
.banner-characters {
    display: block;
    margin: 0 auto;
    margin-top: 100px;
    max-width: 78%;
    height: auto;
}
.copyright-claim {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 0px;

    font-family: 'Skranji', cursive;
    font-size: 14px;
    color: #cfcfcf;

    text-shadow:
        1px 1px 2px black,
        0 0 5px rgba(255,255,255,0.2);

    opacity: 0.85;
}

.video-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.video-container iframe {
    max-width: 90%;
    border: 4px solid #3a3a8c;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.ticker-bar {
    position: relative;
    width: 100%;
    height: 80px;
    overflow: hidden;
    background: #3C4383;
    border-top: 4px solid #E4DABD;
    border-bottom: 4px solid #E4DABD;
    top: 20px;
}
.ticker-track {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ticker-text {
    white-space: nowrap;
    width: auto;
    font-family: 'Skranji', cursive;
    font-size: 70px;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    letter-spacing: 1px;
    animation: scroll-horizontal 10s linear infinite;
}

@keyframes scroll-horizontal {
    from { transform: translateX(100vw); }
    to { transform: translateX(-100vw); }
}



html, body {
    overflow-x: hidden;
}

@media (max-width:768px) {

    body {
        background-color: #E4DABD;
    }

    .site-logo-wrap {
        width: 90%;
        height: auto;
    }

    .site-logo {
        margin-top: -28%;
    }

    .game-nav {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        width: 96%;
        margin: 15px auto;
    }

    .nav-box {
        width: 22%;
        padding: 8px 0;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* --- Fullscreen UI panel --- */

    .ui-container,
    .aui-container {
        width: 100vw;
        margin: 0;
    }

    .ui-background,
    .aui-background {
        width: 100vw;
        height: auto;
        display: block;
    }

    .title p {
        font-size: 10px;
        line-height: 1.25;
    }

    .video-caption p {
        font-size: 9px;
    }

    .info p {
        font-size: 11px;
        line-height: 1.4;
    }

    .infonext p {
        font-size: 10px;
        line-height: 1.4;
    }

    .infothree p {
        font-size: 9px;
        line-height: 1.4;
    }

    .ui-container iframe {
        width: 50% !important;
        left: 23.5% !important;
        height: 19.5% !important;
    }

    .ticker-bar,
    .scroll-bar {
        height: 45px;
    }

    .ticker-text,
    .scroll-text {
        font-size: 26px;
    }

    .social-buttons {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        justify-content: center;
        width: 100%;
        margin: 30px auto;
        gap: 15px;
    }

    .social-buttons img {
        width: 40px;
        height: 40px;
    }

    .site-footer {
        padding: 20px 10px;
    }

    .bsi-logo,
    .cyberfun-logo {
        position: static;
        display: inline-block;
        width: 70px;
        margin: 10px;
    }

    .copyright-claim {
        font-size: 11px;
    }

    .ui-container {
        overflow: visible;
    }
}