/* --- Layout styles --- */
.layout-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.layout-content {
    flex: 1 0 auto;
}

.perim-layout-wrapper {
    min-height: 100dvh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.perim-layout-content {
    flex: 1 0 auto;
}
@media (max-width: 576px) {
    .perim-navbar {
        position: sticky !important;
        z-index: 5;
        top: 0;
        width: 100%;
    }
    .perim-center-viewport {
        display: flex !important;
        height: 100dvh;
        /*overflow: hidden !important; /* Prevent vertical scroll */
    }
    .parallax-stack {
        position: relative;
        width: 100%;
        max-width: 1273px; /* widest image */
        height: 100dvh; /* image height */
        height: 100vh;
        margin: 0 auto;
        min-width: 320px;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: 100vw;
        max-width: 100vw;
    }
    .parallax-stack img {
        display: inline-block;
        max-width: none;
        max-height: none;
    }
    perim-no-scroll {
        margin: 0;
        padding: 0;
        overflow-y: hidden !important;
    }
}

/* --- Scanner styles --- */
.scanner-container {
    position: relative;
    width: 395px;
    height: 580px;
    margin: 0px auto;
    overflow: hidden;
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
}

.scan-img {
    position: absolute;
    width: 296px;
    height: 450px;
    left: 50%;
    top: 50%;
    transform: translate(-49%, -56%);
    object-fit: cover;
    z-index: 0;
    pointer-events: auto;
}

.scanner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 395px;
    height: 580px;
    pointer-events: none;
    z-index: 5;
}


/* --- Perim styles --- */
@font-face {
    font-family: 'QTEurotype';
    src: url('/fonts/QTEurotype.woff2') format('woff2'), url('/fonts/QTEurotype.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'QTEurotype';
    src: url('/fonts/QTEurotype-Bold.woff2') format('woff2'), url('/fonts/QTEurotype-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Digital Dream';
    src: url('/fonts/digital-dream.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    font-family: 'QTEurotype', 'Segoe UI', 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

.custom-cursor {
    cursor: url('/media/blue_cursor.png'), auto;
}

.custom-cursor-port {
    cursor: url('/media/blue_hand.png'), auto;
}

.modal-content {
    border: none !important;
    background: transparent !important;
    box-shadow: 0 4px 32px rgba(0,0,0,0.25);
    border-radius: 0.5rem !important;
    overflow: hidden;
}

.modal-header,
.modal-footer,
.modal-body {
    border: none !important;
    margin: 0;
    border-radius: 0 !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.7), 0 1px 4px rgba(0,0,0,0.4);
}

.modal-header {
    background: linear-gradient(180deg, #5bb0f5 0%, #3576a8 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 -2px 4px rgba(255,255,255,0.10) inset;
    color: #fff;
    border-top-left-radius: 0.5rem !important;
    border-top-right-radius: 0.5rem !important;
}

.modal-footer {
    background: linear-gradient(180deg, #5bb0f5 0%, #3576a8 100%) !important;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.10) inset, 0 2px 4px rgba(255,255,255,0.08) inset;
    color: #fff;
    border-bottom-left-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
    justify-content: center !important;
    display: flex !important;
    min-height: 61px; /* Adjust to match your button's height */
    align-items: center;
}

.btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

.btn-port {
    background: linear-gradient(180deg, #e5e5e5 0%, #d1d1d1 100%);
    color: #111;
    border: 3px solid #f62423;
    border-radius: 0.4rem;
    font-weight: bold;
    box-shadow: 0 0 0 1px rgba(246,36,35,0.25), 0 2px 4px rgba(0,0,0,0.10), 0 -2px 4px rgba(255,255,255,0.10) inset, 0 1px 0 #fff inset;
    padding: 0.0rem 2.5rem;
    text-shadow: 0 1px 0 #fff, 0 -1px 0 #bbb;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    font-size: 1rem;
}

    .btn-port:hover,
    .btn-port:focus {
        background: linear-gradient(180deg, #f0f0f0 0%, #c7c7c7 100%);
        color: #111 !important;
        border: 3px solid #f62423 !important;
        box-shadow: 0 0 0 1.5px rgba(246,36,35,0.30), 0 2px 4px rgba(0,0,0,0.12), 0 -2px 4px rgba(255,255,255,0.12) inset, 0 1px 0 #fff inset;
        text-decoration: none;
    }

    .btn-port:active {
        background: linear-gradient(180deg, #d1d1d1 0%, #e5e5e5 100%);
        color: #111 !important;
        border: 3px solid #f62423 !important;
        box-shadow: 0 0 0 1px rgba(246,36,35,0.18), 0 1px 2px rgba(0,0,0,0.10) inset, 0 2px 4px rgba(255,255,255,0.10) inset;
    }

#modalBody {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 200px;
    color: #fff;
    z-index: 1;
    position: relative;
    background-image: none;
}

    #modalBody::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(40, 40, 40, 0.6);
        z-index: 0;
        pointer-events: none;
        border-radius: inherit;
    }

#modalBodyContent {
    position: relative;
    z-index: 1;
}

button.btn-port.custom-cursor-port {
    cursor: url('/media/blue_hand.png'), auto;
}

button.btn-close.custom-cursor-port {
    cursor: url('/media/blue_hand.png'), auto;
}

/* --- Parallax styles --- */
.parallax-stack {
    position: relative;
    width: 100%;
    max-width: 1253px; /* widest image */
    height: 870px;     /* image height */
    margin: 0 auto;
    overflow: hidden;
    min-width: 320px;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100vw;
    max-width: 100vw;
}

.overworld-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1253px;
    height: 839px;
    object-fit: contain;
    display: block;
    z-index: 2;
    transition: opacity 0.5s;
}

.underworld-img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1212px;
    height: 839px;
    transform: translateX(-50%);
    object-fit: contain;
    display: block;
    z-index: 1;
    transition: opacity 0.5s;
}

#countdown-timer {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.0);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 2rem;
    z-index: 2;
    font-family: 'Digital Dream', monospace, sans-serif;
    letter-spacing: 2px;
    pointer-events: none;
}

/* Source: https://www.w3schools.com/howto/howto_css_flip_card.asp */
.flip-card,
.flip-card-inner,
.flip-card-front,
.flip-card-back {
    width: 395px !important;
    height: 580px !important;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
}

.flip-card {
    background: transparent;
    margin: auto;
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    position: relative;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(.4,2,.6,1);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    z-index: 1;
}

#imageOnlyModalImg {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    box-shadow: 0 2px 16px rgba(0,0,0,0.25);
    border-radius: 0.5rem;
    background: transparent;
}
.flip-card-img-wrapper {
    position: relative;
    display: inline-block;
    width: 296px;
    height: 450px;
    margin-top: -55px;
}

.flip-card-img {
    width: 296px;
    height: 450px;
    object-fit: cover;
    display: block;
    border-radius: 1rem;
    background: transparent;
}

.flip-card-img-wrapper .shimmer {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    pointer-events: none;
    /* Use transparent and white for shimmer. Consider changing color in the future based on rarity. */
    background: linear-gradient(
        -45deg,
        rgba(255,255,255,0) 40%,
        rgba(250,250,250,0.7) 50%,
        rgba(255,255,255,0) 60%
    );
    background-size: 300%;
    background-position-x: 100%;
    animation: shimmer 1s infinite linear;
    opacity: 1; /* or adjust for effect */
}

.shimmer {
    width: 296px;
    height: 450px;
    background: linear-gradient(-45deg, rgba(255,255,255,0) 40%, rgba(250,250,250,0.7) 50%, rgba(255,255,255,0) 60%);
    background-size: 300%;
    background-position-x: 100%;
    animation: shimmer 1s infinite linear;
}

@keyframes shimmer {
    to {
        background-position-x: 0%
    }
}

.scan-bg {
    position: absolute;
    width: 296px;
    height: 450px;
    left: 50%;
    top: 50%;
    transform: translate(-49%, -56%);
    background: #000;
    border-radius: 1rem;
    z-index: -1; /* Ensure it's behind the images */
    pointer-events: none;
}

.rotate-90 {
    transform-origin: center center;
    /* Swap width and height for the rotated image */
    width: 450px !important;
    height: 296px !important;
    /* Center the rotated image in its container */
    position: absolute;
    left: 50%;
    top: 50%;
    /* Adjust translation to center the rotated image */
    transform: translate(-50%, -50%) rotate(90deg);
    margin: 0 !important;
}

.navbar.bg-dark {
    background: linear-gradient(180deg, #5bb0f5 0%, #3576a8 100%) !important;
    /* Remove Bootstrap's default background */
    background-color: unset !important;
}

.message-screen {
    position: absolute;
    width: 300px;
    height: 460px;
    left:13%;
    top: 6%;
    z-index: -2;
    pointer-events: none;
    background: #FFFFFF; 
    color: #000000;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    transition: z-index 0.2s;
    padding: 15px;
}

.message-screen,
.message-screen * {
    color: #fff !important;
    text-shadow:
        0 0 2px rgba(0,0,0,0.7),
        0 1px 4px rgba(0,0,0,0.4);
}

.overworld-gradient {
    background-image: radial-gradient(at right center, rgb(56, 189, 248), rgb(49, 46, 129));
}

#circle-btn {
    position: absolute;
    left: 176px; /* 258 - 20 */
    top: 498px; /* 663 - 20 */
    width: 56px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    z-index: 7;
    padding: 0;
    margin: 0;
    outline: none;
}

    #circle-btn:focus {
        outline: 2px solid #5bb0f5;
    }

#circle-btn.custom-cursor-port {
    cursor: url('/media/blue_hand.png'), auto !important;
}

/* Fixed height for narrative-events carousel */
#narrative-events .carousel-inner,
#narrative-events .carousel-item {
    height: 270px;
    min-height: 270px;
    max-height: 270px;
}

.checkbox-wrapper-25 input[type="checkbox"] {
    background-image: -webkit-linear-gradient(hsla(0,0%,0%,.1), hsla(0,0%,100%,.1)), -webkit-linear-gradient(left, #f66 50%, #6cf 50%);
    background-size: 100% 100%, 200% 100%;
    background-position: 0 0, 15px 0;
    border-radius: 25px;
    box-shadow: inset 0 1px 4px hsla(0,0%,0%,.5), inset 0 0 10px hsla(0,0%,0%,.5), 0 0 0 1px hsla(0,0%,0%,.1), 0 -1px 2px 2px hsla(0,0%,0%,.25), 0 2px 2px 2px hsla(0,0%,100%,.75);
    cursor: pointer;
    height: 25px;
    padding-right: 25px;
    width: 150px;
    -webkit-appearance: none;
    -webkit-transition: .25s;
    transform: rotate(-90deg);
}

    .checkbox-wrapper-25 input[type="checkbox"]:after {
        background-color: #eee;
        background-image: -webkit-linear-gradient(hsla(0,0%,100%,.1), hsla(0,0%,0%,.1));
        border-radius: 25px;
        box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,1), inset 0 -1px 1px 1px hsla(0,0%,0%,.25), 0 1px 3px 1px hsla(0,0%,0%,.5), 0 0 2px hsla(0,0%,0%,.25);
        content: '';
        display: block;
        height: 25px;
        width: 50px;
        position: absolute;
        left: 0;
        top: 0;
        transition: transform 0.25s;
    }

    .checkbox-wrapper-25 input[type="checkbox"]:checked {
        background-position: 0 0, 150px 0;
        padding-left: 25px;
        padding-right: 0;
    }

        .checkbox-wrapper-25 input[type="checkbox"]:checked:after {
            transform: translateX(100px); /* Move the knob to the right */
        }

.tribe-logo {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.tribe-logo:hover {
    transform: scale(1.15);
    z-index: 2;
}

/* Custom popover style for tribe selection */
.popover.tribe-popover {
    background: linear-gradient(135deg, #2e3c5d 0%, #4e7ac7 100%);
    color: #fff;
    border: none;
    box-shadow: 0 0 16px 2px #000a;
    max-width: 340px;
    width: 340px;
    min-width: 340px;
    min-height: 180px;
    box-sizing: border-box;
    padding: 0;
}
.popover.tribe-popover .popover-header {
    background: linear-gradient(180deg, #5bb0f5 0%, #3576a8 100%) !important;
    color: #fff;
    border-bottom: 1px solid #ffffff33;
    font-weight: bold;
}
.popover.tribe-popover .popover-body {
    color: #fff;
}
.popover.tribe-popover-underworld {
    background: linear-gradient(135deg, #3a1c1c 0%, #b13b3b 100%);
    color: #fff;
    border: none;
    box-shadow: 0 0 16px 2px #000a;
    max-width: 340px;
    width: 340px;
    min-width: 340px;
    min-height: 180px;
    box-sizing: border-box;
    padding: 0;
}
.popover.tribe-popover-underworld .popover-header {
    background: linear-gradient(180deg, #b13b3b 0%, #3a1c1c 100%) !important;
    color: #fff;
    border-bottom: 1px solid #ffffff33;
    font-weight: bold;
}
.popover.tribe-popover-underworld .popover-body {
    color: #fff;
}

.popover .popover-arrow {
    display: none !important;
}

.popover.tribe-popover,
.popover.tribe-popover-underworld,
.popover.tribe-popover .popover-header,
.popover.tribe-popover .popover-body,
.popover.tribe-popover-underworld .popover-header,
.popover.tribe-popover-underworld .popover-body {
    font-family: 'QTEurotype', 'Segoe UI', 'Arial', 'Helvetica Neue', Helvetica, sans-serif !important;
}

.perim-bg-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-color: #1f1f1f; /* Solid fallback color */
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(24px) brightness(0.7);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.5s;
    transform: scale(1.1);
    opacity: 0;
}
.perim-bg-blur.active {
    opacity: 1;
    pointer-events: auto;
}

.perim-center-viewport {
    min-height: 80vh; /* Adjust as needed for your layout */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.footer-gradient {
    background: linear-gradient(to top, #3576a8 0%, #5bb0f5 100%) !important;
}

.scan-failed-message {
    position: absolute;
    top: 46%;
    left: 51%;
    width: 65%;
    transform: translate(-50%, -50%);
    background: rgba(33, 150, 243, 0.95);
    color: #fff;
    border: 2px solid #1565c0;
    border-radius: 1rem;
    padding: 1rem 1rem;
    font-size: 1rem;
    box-shadow: 0 4px 16px rgba(33,150,243,0.18);
    z-index: 10;
    pointer-events: none;
    text-shadow: 0 1px 4px #1565c0;
}

.parallax-stack img {
    display: inline-block;
    max-width: none;
    height: auto;
}

@media (max-width: 900px) {
    .parallax-stack {
        width: 1253px !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 100dvh !important;
        height: 100vh !important;
        max-height: none !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .underworld-img,
    .overworld-img {
        position: absolute;
        width: 1253px; /* or 1253px for     OverWorld */
        height: 839px;
        left: 0;
        top: 0;
        transform: none;
        margin: 0;
        display: block;
    }
}


.btn-large {
    font-size: 2rem;
    height: 4rem;
    width: 26rem;
    padding: 0 2.5rem;
}

.fullpage-flex {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #1F1F1F;
    background-image: url('https://chaoticbackup.github.io/public/img/base/visual-bkgrnd_05.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top; /* Center horizontally, align to top */
}

.center-flex-grow {
    flex: 1 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 18rem; /* Adjust this value as needed */
}

.announcements-box {
    background: #1f1f1f;
    border: 4px solid #2196f3;
    border-radius: 1rem;
    box-shadow: 0 4px 12px 0 rgba(33,150,243,0.25), 0 2px 4px 0 #1565c0 inset;
    padding: 2rem 2.5rem;
    color: #fff;
    max-width: 800px;
    min-width: 260px;
    position: fixed;
    bottom: 9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    max-height: 25vh; /* Set maximum height to 50% of viewport */
    overflow-y: auto; /* Enable vertical scrollbar if needed */
    scrollbar-width: thin; /* For Firefox: makes the bar thin */
    scrollbar-color: #2196f3 transparent; /* For Firefox: blue thumb, transparent track */
}

    .announcements-box h2 {
        color: #90caf9;
        margin-bottom: 1rem;
    }

.announcement-date {
    color: #64b5f6;
    font-weight: bold;
    margin-right: 0.5rem;
}

.announcement-item {
    margin-bottom: 1rem;
    border-bottom: 1px solid #333;
    padding-bottom: 0.5rem;
}
/* Chrome, Edge, Safari */
.announcements-box::-webkit-scrollbar {
    width: 8px; /* Only the bar, no track */
    background: transparent;
}

.announcements-box::-webkit-scrollbar-track {
    background: transparent; /* Hide the track */
}

.announcements-box::-webkit-scrollbar-thumb {
    background: #2196f3; /* Blue bar */
    border-radius: 4px;
}

.announcements-box::-webkit-scrollbar-button {
    display: none; /* Hide arrows */
    height: 0;
    width: 0;
}

.site-title-embossed {
    /* Blue outline */
    /*-webkit-text-stroke: 3px #2196f3;*/
    text-stroke: 3px #2196f3; /* For future compatibility */
    color: #fff;
    font-weight: bold;
    /* Embossed effect using gradient fill */
    background: linear-gradient(180deg, #b3e0fc 0%, #3576a8 60%, #1a2a40 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Optional: crisp up the text on some browsers */
    text-rendering: geometricPrecision;
    /* Remove any shadow */
    text-shadow: none;
}

.overlay-image {
    position: absolute; /* Position relative to the container */
    display: block; /* Hide images initially */
    /* Add top/left coordinates here to place the top-left corner of the overlay */
    /* e.g., top: 50px; left: 100px; */
    top: 353px;
    left: 588px;
    z-index: 3;
    width:60px;
    pointer-events: none;
}

.pin-hover {
    position: absolute;
    display: block;
    height: 30px;
    width: 30px;
    top: 363px; /* overlay-image top +10px */
    left: 602px; /* overlay-image top +4px */
    z-index: 5;
}

@media (max-width: 576px) {
    .announcements-box {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto !important;
        width: 96vw !important;
        max-width: 98vw !important;
        min-width: 0 !important;
        z-index: auto !important;
        padding-top: 1rem !important;
        max-height: 30vh !important;
        margin-bottom: 6rem !important;
    }

    .btn-large {
        font-size: 1.1rem !important;
        width: 90vw !important;
        min-width: 0 !important;
        max-width: 100vw !important;
        margin-left: 1vw !important;
        margin-right: 1vw !important;
        padding: 0 1rem !important;
        height: 3rem !important;
    }

    .center-flex-grow {
        margin-top: 6rem !important;
    }

    .display-1.site-title-embossed {
        font-size: 2.2rem !important;
    }
}

@media (max-width: 576px) {
    .tribe-logo-stack {
        flex-direction: column !important;
        height: auto !important;
        gap: 2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .tribe-logo-link {
        margin: 0 !important;
        width: 100vw;
        display: flex;
        justify-content: center;
    }

    .tribe-logo {
        max-width: 70vw;
        width: 70vw;
        height: auto;
    }
    /* Popover should be centered above logo */
    .popover.tribe-popover,
    .popover.tribe-popover-underworld {
        left: 50% !important;
        transform: translateX(-50%) translateY(-100%) !important;
        min-width: 220px;
        max-width: 90vw;
        width: auto;
    }
}

@media (min-width: 577px) {
    .tribe-logo-stack {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        gap: 6vw; /* space between logos, adjust as needed */
        width: 100%;
        max-width: 90vw;
        margin: 0 auto;
    }

    .tribe-logo-link {
        margin: 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tribe-logo {
        width: 20vw; /* Each logo takes up 18% of viewport width */
        max-width: 32vw; /* Prevents logos from getting too large on huge screens */
        min-width: 8vw; /* Prevents logos from getting too small on small desktops */
        height: auto;
        display: block;
    }

    .popover.tribe-popover,
    .popover.tribe-popover-underworld {
        min-width: 8vw;
        max-width: 23vw;
        width: auto;
    }
}