@import "ErModalShell.css";
@import "escapesite3.css";

/******************symbol-box*****************/
/* =========================
   Puzzle layout
   ========================= */
.puzzle-stage {
    width: min(1536px, 100%);
    margin: 0 auto;
    display: grid;
    gap: 22px;
}

.room-image-wrapper {
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 3 / 2; /* 1536x1024 */
    background-color: #000;
}

.footer-actions {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

/* =========================
   Symbol prompt / cloud
   ========================= */
.symbol-prompt {
    margin-top: 14px;
    animation: cloudIn .35s ease-out both;
}

@keyframes cloudIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.symbol-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.symbol-drag {
    font-size: clamp(44px, 6vw, 60px);
    width: fit-content;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(0,0,0,0.14);
    border: 1px solid rgba(255,255,255,0.18);
}

    .symbol-drag:active {
        cursor: grabbing;
    }

.symbol-arrow {
    opacity: 0.9;
    font-size: 18px;
}

.symbol-target-hint {
    opacity: 0.9;
    font-size: 14px;
}

.symbol-drag--selected {
    outline: 2px solid #f9c74f;
    box-shadow: 0 0 10px rgba(249,199,79,.35);
}

@keyframes symbolFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* =========================
   Chest bar
   ========================= */
.loot-chest-bar {
    position: relative;
    width: 100%;
    height: 132px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 14px 35px rgba(0,0,0,0.45);
}

.loot-chest-bar__slots {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 12px;
    padding: 14px;
    z-index: 5;
}

.loot-slot {
    width: 92px;
    height: 92px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    background: rgba(0,0,0,0.22);
    border: 2px dashed rgba(255,255,255,0.28);
    color: rgba(255,255,255,0.92);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.loot-slot__symbol {
    font-size: 32px;
    line-height: 1;
    min-height: 32px;
}

.loot-slot__name {
    font-size: 12px;
    line-height: 1.1;
    color: rgba(255,255,255,0.92);
}

.loot-slot--filled {
    border-style: solid;
    border-color: rgba(255,255,255,0.45);
}

.loot-slot--choice {
    border-color: rgba(249, 199, 79, 0.55);
    box-shadow: 0 0 0 1px rgba(249, 199, 79, 0.10), 0 0 8px rgba(249, 199, 79, 0.12);
}

.loot-slot--target {
    border-color: rgba(249, 199, 79, 0.75);
}

.loot-slot--wrong:hover {
    animation: lootWrongShake .28s ease-in-out 1;
    border-color: rgba(255, 170, 170, 0.8);
    box-shadow: 0 0 10px rgba(255, 120, 120, 0.18);
    cursor: not-allowed;
}

.loot-slot--target:hover {
    border-color: rgba(249, 199, 79, 0.95);
    box-shadow: 0 0 10px rgba(249, 199, 79, 0.18);
    cursor: pointer;
}

.loot-slot,
.symbol-drag {
    touch-action: manipulation;
}

@@keyframes lootWrongShake {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }

    100% {
        transform: translateX(0);
    }
}

@@keyframes lootChoiceGlow {
    0%, 100% {
        box-shadow: 0 0 0 1px rgba(249, 199, 79, 0.12), 0 0 8px rgba(249, 199, 79, 0.16);
    }

    50% {
        box-shadow: 0 0 0 1px rgba(249, 199, 79, 0.20), 0 0 14px rgba(249, 199, 79, 0.24);
    }
}

@@keyframes lootQuestionPulse {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@@keyframes lootSlotGlow {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(249, 199, 79, 0.14), 0 0 10px rgba(249, 199, 79, 0.35), 0 0 20px rgba(249, 199, 79, 0.18);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 3px rgba(249, 199, 79, 0.24), 0 0 18px rgba(249, 199, 79, 0.60), 0 0 34px rgba(249, 199, 79, 0.32);
        transform: scale(1.03);
    }
}

/* =========================
   Small screens
   ========================= */
@@media (max-width: 420px) {
    .cloud-bubble-svg {
        position: relative;
        width: min(560px, 92vw);
        aspect-ratio: 600 / 300;
    }

    .cloud-bubble-svg__content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
        padding: clamp(34px, 10%, 52px) clamp(48px, 12%, 84px) clamp(28px, 10%, 44px);
    }

    .symbol-drag--incloud {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-size: clamp(36px, 5vw, 52px);
        padding: 4px 10px;
    }

    .loot-chest-bar {
        height: 108px;
    }

    .loot-chest-bar__slots {
        gap: 8px;
        bottom: 8px;
    }

    .loot-slot {
        width: 72px;
        height: 72px;
    }

    .loot-slot__symbol {
        font-size: 30px;
    }
}
/************************************/
    /* _Host.cshtml */
    #blazor-error-ui {
        display: none !important;
    }

    h1:focus {
        outline: none;
    }

    .welcome-page {
        text-align: center;
        padding: 20px;
    }

    .header-image {
        max-width: 100%;
        height: auto;
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .welcome-box {
        background-color: #1e1e2f;
        color: white;
        padding: 30px;
        border-radius: 12px;
        max-width: 600px;
        margin: 0 auto;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    }
    /************************************/
    @media (max-width: 768px) {
        .room1-background {
            max-width: 100%;
        }
    }
    /********UserAnswer****************************/
    .limited-width-input {
        width: 300px;
        max-width: 100%;
    }
    /********Room1****************************/
    .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9999; /* above everything */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .popup-content {
        position: relative;
        background-color: #111;
        padding: 20px;
        border-radius: 12px;
        max-width: 80%;
        max-height: 80%;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }
    /* when open game/puzzle on each room*/
    .popupgame-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.85); /* dim background */
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999; /* on top */
    }
    /* when open game/puzzle on each room*/
    .popupgame-content {
        width: 100vw;
        height: 100vh;
        background: #111; /* optional, gives a background color */
        overflow: auto;
        position: relative;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-image {
        width: 100%;
        height: auto;
        border-radius: 8px;
        max-height: 70vh;
    }
    /* Close button for puzzle modal */
    .close-button--puzzle {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 99999;
    }
    /***************Rooms*********************/

    .room-container {
        position: relative;
        display: flex;
        flex-direction: column; /* stack elements top → bottom */
        align-items: center; /* center horizontally */
        text-align: center; /* center text inside */
    }

        .room-container h4,
        .room-container h1 {
            margin: 0.5rem 0;
            color: #fff; /* optional: make it pop over bg */
            text-shadow: 0 2px 4px rgba(0,0,0,0.6); /* glow for readability */
        }

.room-image-stage {
    position: relative;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    aspect-ratio: 1536 / 1024; /* exact bg ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.room-image-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* full image visible */
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.room-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
}


/* to be remove and replace by .room-image-stage and .room-image-base  */
    .room-image-wrapper {
        position: relative;
        width: min(1536px, 100%); /* ✅ match bg.jpg size */
        height: min(70vh, 740px);
        min-height: 420px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 12px;
        overflow: hidden;
        flex: 0 0 auto;
    }
/* overlay on top of bg */
.symbol-prompt-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 6000;
    pointer-events: none;
}

.cloud-wrap {
    pointer-events: auto;
    display: grid;
    justify-items: center;
}

/* cloud box size */
.cloud-bubble-svg {
    position: relative;
    width: min(520px, 92vw);
    aspect-ratio: 600 / 220; /* MUST match SVG viewBox */
}
/* cloud outline */
.cloud-bubble-svg__shape {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    filter: drop-shadow(0 18px 35px rgba(0,0,0,0.45));
    z-index: 1;
}

    .cloud-bubble-svg__shape path {
        fill: rgba(255,255,255,0.10);
        stroke: rgba(255,255,255,0.28);
        stroke-width: 4;
        stroke-linejoin: round;
    }

/* ✅ THIS clips everything (text + symbol + its background) to the cloud shape */
.cloud-mask {
    position: absolute;
    inset: 0;
    z-index: 2;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220'%3E%3Cpath fill='white' transform='translate(0,-18) scale(1,1.18)' d='M90 170 C45 170 25 135 45 110 C20 80 45 45 90 55 C110 20 160 20 180 45 C220 10 280 20 300 55 C340 20 400 20 420 55 C460 40 500 65 495 110 C525 125 520 170 470 170 Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220'%3E%3Cpath fill='white' transform='translate(0,-18) scale(1,1.18)' d='M90 170 C45 170 25 135 45 110 C20 80 45 45 90 55 C110 20 160 20 180 45 C220 10 280 20 300 55 C340 20 400 20 420 55 C460 40 500 65 495 110 C525 125 520 170 470 170 Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* content centered perfectly */
.cloud-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    box-sizing: border-box;
    /* ✅ more vertical room */
    padding: 52px 70px 52px 70px;
}

.cloud-title {
    font-weight: 700;
    font-size: clamp(16px, 2vw, 22px);
    line-height: 1.1;
}

.cloud-subtitle {
    opacity: .95;
    font-size: clamp(12px, 1.5vw, 15px);
    line-height: 1.25;
    max-width: 34ch;
}

/* symbol centered + no “emoji hanging” */
.symbol-drag--incloud {
    margin-top: -3px; /* ✅ symbol goes up a bit */
    line-height: 1;
    font-size: clamp(38px, 5.5vw, 52px);
    box-shadow: 0 6px 10px rgba(0,0,0,0.35); /* ✅ tighter shadow */
    filter: none;
    padding: 2px 2px; /* slightly smaller */
    text-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

    .symbol-drag--incloud:active {
        cursor: grabbing;
    }


.room-image {
    display: block;
    width: 100%; /* makes image responsive */
    height: auto;
}

.collected-toast {
    position: fixed; /* stays visible even if content scrolls */
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(20, 20, 20, 0.75);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    z-index: 99999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/*****************************clickable regions***************************************/
/* Invisible clickable regions (position these as needed) */
.clickable-region {
    position: absolute;
    width: 15%; /* size relative to image width */
    height: 15%;
    cursor: pointer;
    border: none; /* remove button border */
    padding: 0;
    margin: 0;
    outline: none;
    z-index: 1000;
    user-select: none;
    -webkit-user-drag: none;
    /* iOS fixes */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    pointer-events: auto;
    /* Make sure it’s clickable (iOS doesn’t like pure 0 alpha) */
    background-color: transparent; /* semi-visible for picture testing */
    /*background-color: pink; /* semi-visible for picture testing */
}

    .clickable-region.disabled {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed;
    }
    /*.demo-hidden */
    .demo-hidden {
        top: 46%;
        left: 35%;
    }

    .es1-room1-region1 {
        top: 46%; /* 30% from top of image */
        left: 35%; /* 20% from left */
    }

    .es1-room1-region2 {
        top: 70%;
        left: 40%;
    }

    .es1-room2-region1 {
        top: 70%; /* Adjust to desired position */
        left: 70%; /* Adjust to desired position */
    }

    .es1-room2-region2 {
        top: 55%; /* Adjust to desired position */
        left: 70%; /* Adjust to desired position */
    }

    .es2-room1-region1 {
        top: 85%; /* Adjust to desired position */
        left: 67%; /* Adjust to desired position */
    }

    .es2-room1-region2 {
        top: 50%; /* Adjust to desired position */
        left: 80%; /* Adjust to desired position */
    }

    .es2-room1-region3 {
        top: 75%; /* Adjust to desired position */
        left: 40%; /* Adjust to desired position */
    }

    .es2-room1-region4 {
        top: 53%; /* Adjust to desired position */
        left: 3%; /* Adjust to desired position */
    }

    .es2-room1-region5 {
        top: 30%; /* Adjust to desired position */
        left: 3%; /* Adjust to desired position */
    }

    .es2-room2-region1 {
        top: 20%; /* Adjust to desired position */
        left: 80%; /* Adjust to desired position */
    }

    .es2-room2-region2 {
        top: 65%; /* Adjust to desired position */
        left: 40%; /* Adjust to desired position */
    }

    .es2-room2-region3 {
        top: 75%; /* Adjust to desired position */
        left: 75%; /* Adjust to desired position */
    }

    .es2-room2-region4 {
        top: 48%; /* Adjust to desired position */
        left: 70%; /* Adjust to desired position */
    }

    .es2-room2-region5 {
        top: 70%; /* Adjust to desired position */
        left: 10%; /* Adjust to desired position */
    }

    .es2-room3-region1 {
        top: 80%; /* Adjust to desired position */
        left: 85%; /* Adjust to desired position */
    }

    .es2-room3-region2 {
        top: 55%; /* Adjust to desired position */
        left: 5%; /* Adjust to desired position */
    }

    .es2-room3-region3 {
        top: 68%; /* Adjust to desired position */
        left: 68%; /* Adjust to desired position */
    }

    .es2-room3-region4 {
        top: 10%; /* Adjust to desired position */
        left: 15%; /* Adjust to desired position */
    }

    .es2-room3-region5 {
        top: 65%; /* Adjust to desired position */
        left: 50%; /* Adjust to desired position */
    }

    .es2-room4-region1 {
        top: 93%; /* Adjust to desired position */
        left: 74%; /* Adjust to desired position */
    }

    .es2-room4-region2 {
        top: 75%; /* adjust this */
        left: 50%; /* adjust this */
    }
    /***********************************/
    /* Shared base for all input groups */
    .code-inputs-es2 {
        position: absolute;
        display: flex;
        gap: 0.6vw; /* responsive spacing */
        transform: translate(-50%, -50%);    
        z-index: 5000 !important;
        pointer-events: auto;
    }

    /* Shared base for all code digit inputs */
    .code-digit-es2 {
        width: clamp(80px, 8vw, 160px); /* responsive but not too small */
        height: clamp(30px, 4vh, 60px); /* readable touch size */
        font-size: clamp(16px, 5vh, 24px); /* always legible */
        text-align: center;
        border: none;
        border-radius: 8px;
        background-color: transparent;
        color: firebrick;
        outline: none;
        caret-color: transparent;
        z-index: 10;
        padding: 0.4rem;
        letter-spacing: 0rem;
        display: block;
    }
    /* Room-specific overrides */
    .code-inputs-es2-room1 {
        top: 30%;
        left: 46%;
    }

    .code-inputs-es2-room2 {
        top: 58%;
        left: 14%;
    }

    .code-inputs-es2-room3 {
        top: 65%;
        left: 32%;
    }
    /* Optional per-room width tuning if needed */
    .code-digit-es2-room1 {
        width: clamp(80px, 10vw, 160px);
    }

    .code-digit-es2-room2 {
        width: clamp(80px, 4vw, 160px);
    }

    .code-digit-es2-room3 {
        width: clamp(80px, 10vw, 160px);
    }
    /***********************************/

.result-message {
    position: absolute;
    bottom: 100%; /* Position above input */
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.8), rgba(255, 128, 128, 0.8)); /* Gradient red background */
    color: white; /* White text */
    padding: 6px 12px; /* Larger padding for better readability */
    border-radius: 10px; /* Rounded corners */
    font-size: 1rem; /* Slightly bigger font size */
    font-weight: bold; /* Make text bold */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* Light shadow for better contrast */
    white-space: nowrap;
    /* Add a subtle animation for the message's appearance */
    opacity: 0;
    animation: fadeIn 0.3s forwards; /* Fade in animation */
    z-index: 5001 !important;
    pointer-events: none; /* So it doesn't block clicks */
}
    /* Animation for smooth fade-in effect */
    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }
    /* Optional: Add an animated hover effect for better user feedback (if needed) */
    .result-message:hover {
        transform: translateX(-50%) translateY(-8px) scale(1.05);
        transition: transform 0.2s ease-in-out;
    }
    /************************************/
    .completed {
        background-color: #d4edda !important; /* light green */
    }

    .in-progress {
        background-color: #fff3cd !important; /* light yellow */
    }

    .not-started {
        background-color: #f8f9fa !important; /* light gray */
    }
    /* Used for total time progress container */
    .total-time-bar {
        height: 48px; /* Increased thickness */
        overflow: visible;
        position: relative;
        background-color: #e9ecef; /* light gray for contrast */
        border-radius: 8px;
    }
    /* Inner progress bar text and alignment */
    .progress-text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 1rem;
        white-space: nowrap;
        overflow: visible;
        position: relative;
        z-index: 3;
        color: #fff; /* ensure text is visible on blue */
        height: 100%; /* Fill full height of container */
        border-radius: 6px;
    }

    .progress-bar2 {
        height: 100%; /* Fills full height of outer container */
        line-height: 48px; /* Vertically center text based on height */
        font-size: 1.1rem;
        font-weight: bold;
        text-align: center;
        white-space: nowrap;
        overflow: visible;
        border-radius: 8px;
    }
    /* Tooltip styling */
    .tooltip-wrapper {
        position: relative;
        display: inline-block;
        cursor: help;
    }

    .tooltip-text {
        visibility: hidden;
        width: 160px;
        background-color: #343a40;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        padding: 5px;
        position: absolute;
        z-index: 1000;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    .tooltip-wrapper:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }

    .bg-primary {
        background-color: #007bff !important;
        color: white !important;
    }
    /************************************/
    /* Team Link Table Custom Styling */
    .team-link-table {
        border-radius: 0.5rem;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
        margin-top: 1.5rem;
    }

        .team-link-table th,
        .team-link-table td {
            padding: 1rem;
            vertical-align: middle;
            font-size: 1rem;
        }

        .team-link-table thead {
            background-color: #343a40;
            color: #fff;
        }

        .team-link-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .team-link-table tbody tr:hover {
            background-color: #e2e6ea;
            transition: background-color 0.3s ease;
        }

    .launch-link {
        display: inline-block;
        padding: 0.5rem 1rem;
        background-color: #0d6efd;
        color: #fff !important;
        border-radius: 0.375rem;
        text-decoration: none;
        font-weight: 500;
        transition: background-color 0.3s ease;
    }

        .launch-link:hover {
            background-color: #0b5ed7;
            text-decoration: none;
        }
    /************************************/

    .status-container {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .card-default {
        width: 95%;
        max-width: 1100px;
        background: #f9f9f9;
        padding: 2rem;
        color: #212529;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .total-complete .badge {
        background-color: #198754 !important; /* Bootstrap 'success' green */
        color: white;
    }

    .total-running .badge.bg-light::before {
        content: "";
        width: 8px;
        height: 8px;
        background-color: green;
        border-radius: 50%;
        display: inline-block;
        margin-right: 0.3rem;
        animation: pulse 1.5s infinite;
        vertical-align: middle;
    }

    .room-meta {
        font-size: 0.75rem;
        color: #555;
        margin-top: 0.25rem;
    }

    .total-time-cell {
        vertical-align: middle;
        text-align: center;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.9);
            opacity: 0.6;
        }

        50% {
            transform: scale(1.2);
            opacity: 1;
        }

        100% {
            transform: scale(0.9);
            opacity: 0.6;
        }
    }

    .completed {
        background-color: #d4edda;
    }

    .in-progress {
        background-color: #fff3cd;
    }

    .not-started {
        background-color: #f8d7da;
    }
    /***************competition-status*********************/

    .circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        text-decoration: none;
        border: 2px solid gray;
        color: gray;
        cursor: default;
        transition: 0.3s ease;
    }

        .circle.current {
            border: 3px solid #4CAF50;
            color: #4CAF50;
            cursor: pointer;
        }

        .circle.completed {
            border-color: #4CAF50;
            color: #4CAF50;
            cursor: pointer;
        }

        .circle.locked {
            opacity: 0.3;
        }
    /************************************/
    .uppercase-input {
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    /************************************/
    /* Modal container */
    .modal-container {
        background-color: #ffffff;
        color: #1a1a1a; /* Stronger contrast for text */
        padding: 24px;
        border-radius: 12px;
        width: 90%;
        max-width: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        position: relative;
        z-index: 1001;
        font-family: 'Segoe UI', sans-serif;
    }
    /* Close (X) button */
    .close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        background: transparent;
        border: none;
        color: #888;
        font-size: 1.2rem;
        cursor: pointer;
    }

        .close-button:hover {
            color: #000;
        }
    /************************************/
    /* Hint number button */
    .hint-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background-color: #ccc;
        color: #333;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s, border 0.3s;
    }
        /* Revealed (used) hint */
        .hint-circle.revealed {
            border: 2px solid #ffc107;
            background-color: #ffc107;
            color: #fff;
        }
        /* Disabled hint button */
        .hint-circle:disabled {
            background-color: #e0e0e0;
            color: #666; /* Improved readability */
            cursor: not-allowed;
        }
    /* Hint display box */
    .hint-display {
        margin-top: 1rem;
        font-size: 1.1rem;
        text-align: center;
        padding: 12px;
        border: 2px solid #333;
        background-color: #f9f9f9;
        border-radius: 8px;
        color: #222;
    }
    /************************************/
    .hint-status {
        font-size: 10px;
        font-weight: bold;
    }

        .hint-status.revealed-text {
            color: green;
        }

        .hint-status.unlocked-text {
            color: orange;
        }

    .hint-circle.revealed {
        background-color: green;
        color: white;
    }

    .hint-circle.current-revealed {
        background-color: orange; /* standout color */
        color: white;
        border: 2px solid orange;
    }
    /************************************/

    .register-page {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 80vh;
        background-color: #f9f9f9;
    }

    .register-box {
        max-width: 500px;
        width: 100%;
        align-items: center;
    }

    .register-box-title {
        text-align: center;
    }
    /************************************/
    .button-column {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* spacing between buttons */
        width: 100%;
        max-width: 300px; /* optional: limit button width */
        margin: 0 auto; /* optional: center the column */
    }

        .button-column button {
            width: 100%;
            padding: 0.75rem;
            font-size: 1rem;
        }
    /************************************/

    .escape-layout {
        background-color: #111;
        color: #eee;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .escape-header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
    }

        .escape-header a {
            color: #fff;
            text-decoration: none;
        }

            .escape-header a:hover {
                text-decoration: underline;
            }

    .header-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .header-top-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .room-title {
        font-size: 1.5rem;
        font-weight: bold;
    }
    /* Simple “pill button” style (adjust to match your theme) */
    .header-action {
        border: 1px solid rgba(255,255,255,.25);
        background: rgba(255,255,255,.06);
        color: inherit;
        padding: .35rem .6rem;
        border-radius: 10px;
        cursor: pointer;
    }

        .header-action:hover {
            background: rgba(255,255,255,.12);
        }

    .header-action--small {
        padding: .3rem .45rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        color: #fff;
    }

    .timer {
        font-size: 1.2rem;
        background-color: #000;
        color: #0f0;
        padding: 0.3rem 0.6rem;
        border-radius: 5px;
        border: 1px solid #555;
        font-family: monospace;
    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }

    .status-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .status-svg {
        fill: #0f0;
    }

    .nav-button {
        background-color: #2b2b2b;
        color: white;
        border: none;
        padding: 6px 12px;
        margin-bottom: 8px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        transition: background-color 0.3s;
    }

        .nav-button:hover {
            background-color: #444;
        }

    @media (max-width: 520px) {
        .room-title {
            font-size: 1.15rem;
        }

        .timer {
            font-size: 1rem;
            padding: .25rem .5rem;
        }

        .header-action {
            padding: .3rem .55rem;
            border-radius: 999px;
        }
    }
    /************* Modal-backdrop ***********************/
    .modal-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal.iframe-modal {
        background: #111;
        color: white;
        padding: 0;
        border-radius: 10px;
        width: 90%;
        max-width: 960px;
        height: 80%;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-header {
        background: #111;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid #222;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .modal-header h3 {
            margin: 0;
            font-size: 1.2rem;
            color: #fff;
        }

        .modal-header .close-button {
            background: transparent !important;
            color: #fff !important;
            border: none !important;
            font-size: 20px !important;
            cursor: pointer;
            line-height: 1;
            transition: color 0.2s ease;
        }

            .modal-header .close-button:hover {
                color: #f44336 !important;
            }

    .modal-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1.25rem;
        background: #111;
    }
    /* Make RulesGuide’s internal background match modal */
    .rules-body .alert {
        background: #181818 !important;
        color: #f0f0f0 !important;
        border: 1px solid #222 !important;
    }

    .status-iframe {
        width: 100%;
        height: 100%;
        scrollbar-width: none;
        overflow: hidden; /* stop internal iframe scrollbars */
    }
    /* Custom Scrollbar */
    .modal-body::-webkit-scrollbar {
        width: 10px;
    }

    .modal-body::-webkit-scrollbar-track {
        background: #222;
        border-radius: 10px;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 10px;
        border: 2px solid #222;
    }

        .modal-body::-webkit-scrollbar-thumb:hover {
            background-color: #888;
        }

    .modal-body {
        scrollbar-width: thin;
        scrollbar-color: #555 #222;
    }
    /************************************/
    .room-nav-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1rem;
    }

    .room-nav {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin: 1rem 0;
    }
    /************************************/
    .progress-bar-container {
        width: 100%; /* take full available width */
        max-width: 800px; /* optional: prevent it from being too wide */
        margin: 0.5rem auto 1rem; /* center it, with spacing */
        padding: 0 1rem; /* keep some breathing space */
    }
    /* Outer bar track */
    .progress-bar {
        width: 100%;
        height: 5px;
        background: rgba(255, 255, 255, 0.2); /* subtle track background */
        border-radius: 6px;
        overflow: hidden;
    }
    /* The actual progress fill */
    .progress {
        height: 100%;
        background: linear-gradient(90deg, #4caf50, #81c784); /* modern green gradient */
        border-radius: 6px;
        transition: width 0.4s ease;
    }    

/***************** escape-footer *******************/
.escape-footer {
    margin-top: 0;
    padding: 24px 16px;
    background: #111827;
    color: #f9fafb;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.escape-footer-content {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.escape-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.footer-link-button {
    background: none;
    border: none;
    padding: 0;
    color: #facc15;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline;
}

    .footer-link-button:hover {
        text-decoration: underline;
    }

.footer-separator {
    color: #9ca3af;
}

.escape-footer-copy {
    font-size: 0.85rem;
    color: #d1d5db;
}

.policy-modal-content {
    text-align: left;
    color: #111827;
    line-height: 1.6;
}

    .policy-modal-content h1,
    .policy-modal-content h2,
    .policy-modal-content h3 {
        text-align: left;
    }

    .policy-modal-content ul,
    .policy-modal-content ol {
        text-align: left;
        padding-left: 1.5rem;
    }
/************************************/

    .story-container {
        display: flex;
        flex-direction: column; /* stack content top to bottom */
        align-items: center; /* horizontally center */
        justify-content: flex-start; /* always stick to the top */
        min-height: 100vh;
        background: url('/images/mystery-background.jpg') no-repeat center center fixed;
        background-size: cover;
    }

    .story-content {
        background-color: transparent;
        max-width: 100%; /* Slightly narrower content box */
        width: 90%;
        text-align: center;
        margin: 0 auto;
    }

        .story-content h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-family: 'Cinzel', serif;
        }

        .story-content p {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            line-height: 1.6;
        }

    .game-button {
        background-color: #d4af37; /* gold */
        border: none;
        color: #000;
        padding: 0.75rem 2rem;
        font-size: 1.2rem;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
        font-weight: bold;
        margin-bottom: 2rem; /* always space at bottom */
    }

        .game-button:hover {
            background-color: #b28a2f;
        }
    /*************** Story box *********************/
    .story-box {
        margin: 2rem auto;
        width: 98%;
        max-width: 100ch;
        max-height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        border-radius: 16px;
        background: rgba(25, 35, 55, 0.7);
        backdrop-filter: blur(10px) saturate(150%);
        border: 1px solid rgba(76, 175, 80, 0.5); /* modern green border */
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        font-family: 'Georgia', serif;
        line-height: 1.6;
        color: #f0f7ff;
    }
    /*************** Audio controls *********************/
    .audio-controls {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 1rem;
        background: transparent;
    }
    /* scrollable story text */
    .story-text {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 1rem 1.5rem;
        scrollbar-width: thin;
        scrollbar-color: #66bb6a transparent; /* modern green */
    }
        /* Chrome / Edge / Safari */
        .story-text::-webkit-scrollbar {
            width: 6px;
        }

        .story-text::-webkit-scrollbar-track {
            background: transparent;
            margin: 4px;
        }

        .story-text::-webkit-scrollbar-thumb {
            background: linear-gradient(#81c784, #4caf50); /* smooth green gradient */
            border-radius: 4px;
            box-shadow: 0 0 6px rgba(76, 175, 80, 0.5);
        }

            .story-text::-webkit-scrollbar-thumb:hover {
                background: linear-gradient(#a5d6a7, #66bb6a); /* lighter hover */
            }
    /* Play button */
    .audio-toggle {
        background: transparent;
        border: none;
        cursor: pointer;
        transition: transform 0.2s ease;
        flex: 0 0 auto;
    }

        .audio-toggle:hover {
            transform: scale(1.2);
        }
    /* Progress bar in modern green */
    #audio-progress {
        flex: 1 1 auto;
        height: 6px;
        border-radius: 3px;
        accent-color: #4caf50; /* modern green */
    }
    /***************modal confirmDialog*********************/
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6); /* dark overlay */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999 !important;
    }

    .modal-box {
        background-color: #1e1e2f; /* dark, mysterious background */
        color: #f5f5f5; /* light text */
        padding: 2rem;
        border-radius: 10px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), /* outer dark shadow */
        inset 0 0 10px rgba(255, 255, 255, 0.1); /* subtle inner glow */
    }

        .modal-box h3 {
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

    .modal-actions {
        display: flex;
        justify-content: space-around;
        margin-top: 1.5rem;
    }

    .btn {
        padding: 0.5rem 1.2rem;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
    }

    .btn-confirm {
        background-color: #28a745;
        color: white;
    }

    .btn-cancel {
        background-color: #dc3545;
        color: white;
    }
    /* =========================
   btn-primary
   ========================= */
    .btn-primary {
        color: #000;
        background-color: #f9c74f;
        border-color: #f9c74f;
    }

        .btn-primary:hover {
            color: #000;
            background-color: #f6bf35; /* slightly darker */
            border-color: #f6bf35;
        }

        .btn-primary:focus,
        .btn-check:focus + .btn-primary {
            color: #000;
            background-color: #f6bf35;
            border-color: #f6bf35;
            box-shadow: 0 0 0 .25rem rgba(249, 199, 79, .5);
        }

        .btn-primary:active,
        .btn-primary.active,
        .btn-check:active + .btn-primary,
        .btn-check:checked + .btn-primary,
        .show > .btn-primary.dropdown-toggle {
            color: #000;
            background-color: #eab308; /* pressed */
            border-color: #eab308;
        }
        /* Disabled: “grayed” but still nice */
        .btn-primary:disabled,
        .btn-primary.disabled {
            color: #6c757d;
            background-color: #f3f4f6;
            border-color: #e5e7eb;
            opacity: 1; /* keep text readable */
            cursor: not-allowed;
        }
    /* =========================
   btn-secondary (filled)
   ========================= */
    .btn-secondary {
        color: #fff;
        background-color: #343a40; /* charcoal */
        border-color: #343a40;
    }

        .btn-secondary:hover {
            color: #fff;
            background-color: #2b3035;
            border-color: #2b3035;
        }

        .btn-secondary:active,
        .btn-secondary.active,
        .btn-check:active + .btn-secondary,
        .btn-check:checked + .btn-secondary,
        .show > .btn-secondary.dropdown-toggle {
            color: #fff;
            background-color: #23272b; /* pressed */
            border-color: #23272b;
        }
        /* Focus behavior: no ring on mouse click, ring on keyboard (accessible) */
        .btn-secondary:focus {
            outline: 0;
        }

            .btn-secondary:focus:not(:focus-visible),
            .btn-check:focus + .btn-secondary:not(:focus-visible) {
                box-shadow: none;
            }

        .btn-secondary:focus-visible,
        .btn-check:focus + .btn-secondary:focus-visible {
            box-shadow: 0 0 0 .25rem rgba(52,58,64,.35);
        }
        /* Disabled */
        .btn-secondary:disabled,
        .btn-secondary.disabled {
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
            opacity: 1;
            cursor: not-allowed;
        }
    /* =========================
   Validation messages red + clear 
   ========================= */
    .validation-message {
        color: #b02a37;
        font-weight: 500;
    }
    /* =========================
   btn-outline-secondary (outline)
   ========================= */
    .btn-outline-secondary {
        color: #343a40;
        border-color: #343a40;
        background-color: transparent;
    }

        .btn-outline-secondary:hover {
            color: #fff;
            background-color: #343a40;
            border-color: #343a40;
        }

        .btn-outline-secondary:active,
        .btn-outline-secondary.active,
        .btn-check:active + .btn-outline-secondary,
        .btn-check:checked + .btn-outline-secondary,
        .show > .btn-outline-secondary.dropdown-toggle {
            color: #fff;
            background-color: #2b3035;
            border-color: #2b3035;
        }
        /* Focus behavior: no ring on mouse click, ring on keyboard (accessible) */
        .btn-outline-secondary:focus {
            outline: 0;
        }

            .btn-outline-secondary:focus:not(:focus-visible),
            .btn-check:focus + .btn-outline-secondary:not(:focus-visible) {
                box-shadow: none;
            }

        .btn-outline-secondary:focus-visible,
        .btn-check:focus + .btn-outline-secondary:focus-visible {
            box-shadow: 0 0 0 .25rem rgba(52,58,64,.35);
        }
        /* Disabled */
        .btn-outline-secondary:disabled,
        .btn-outline-secondary.disabled {
            color: #adb5bd;
            border-color: #ced4da;
            background-color: transparent;
            opacity: 1;
            cursor: not-allowed;
        }