.game-view-container {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
}

.front-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.front-view.hidden {
    display: none;
}

.back-view {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.main-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

.back-view-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    pointer-events: none;
}

.back-view.active {
    display: flex;
    justify-content: space-between;
}

.game-hud {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    z-index: 1000;
    border-bottom: 2px solid #444;
}

.hud-timer {
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 48px;
    font-weight: bold;
    color: var(--nd-red-strong);
    text-shadow: 0 0 10px rgb(var(--nd-root-rgb) / 0.5);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 15px;
}

.hud-door-status {
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 24px;
    color: var(--nd-red-strong);
    position: absolute;
    right: 2.5%;
    width: 285px;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.hud-hearts {
    display: flex;
    gap: 10px;
    align-items: center;
}

.heart {
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.heart.full {
    background-color: var(--nd-red-strong);
    box-shadow: 0 0 10px rgb(var(--nd-root-strong-rgb) / 0.2);
}

.heart.empty {
    background-color: rgba(128, 128, 128, 0.65);
}

.front-view-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    align-items: center;
    position: relative;
}

.game-hud,
.front-view .camera-grid,
.front-view .battery-gauge-container,
.front-view .door-button {
    transition: opacity var(--wing-completion-ui-fade-duration, 1200ms) ease;
}

body.wing-completion-ui-fade .game-hud,
body.wing-completion-ui-fade .front-view .camera-grid,
body.wing-completion-ui-fade .front-view .battery-gauge-container,
body.wing-completion-ui-fade .front-view .door-button {
    opacity: 0;
    pointer-events: none;
}

body.wing-completion-back-ui-hidden .back-view .vent-button,
body.wing-completion-back-ui-hidden .back-view .vent-hit-area,
body.wing-completion-back-ui-hidden .back-view .wing-map-panel,
body.wing-completion-back-ui-hidden .back-view .danger-guide-panel {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.top-section {
    height: 247px;
    display: flex;
    gap: 15px;
    align-items: center;
    width: 792px;
    position: relative;
    left: 5px;
    top: 243px;
    transform: rotate(-0.2deg);
}

.door-visual {
    width: 120px;
    height: 100%;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    transition: transform 0.18s ease;
}

.door-visual::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
    box-shadow: inset 0 0 0 1px rgba(210, 236, 241, 0.3), inset 0 0 24px rgba(12, 34, 39, 0.16);
    transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.door-visual:hover {
    transform: translateY(-1px);
}

.door-visual:hover::after {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(220, 240, 244, 0.38), inset 0 0 28px rgba(14, 40, 46, 0.22);
}
.door-visual.left {
    background-position: -19px -164px;
    -webkit-clip-path: polygon(
        89.78% 82.97%,
        20.34% 87.00%,
        14.97% 19.60%,
        85.30% 18.97%,
        89.78% 82.97%
    );
    clip-path: polygon(
        89.78% 82.97%,
        20.34% 87.00%,
        14.97% 19.60%,
        85.30% 18.97%,
        89.78% 82.97%
    );
}

.door-visual.right {
    background-position: -1600px -164px;
    -webkit-clip-path: polygon(
        10.92% 17.07%,
        83.88% 16.93%,
        76.59% 90.90%,
        6.25% 85.16%,
        10.92% 17.07%
    );
    clip-path: polygon(
        10.92% 17.07%,
        83.88% 16.93%,
        76.59% 90.90%,
        6.25% 85.16%,
        10.92% 17.07%
    );
}

.door-visual-recharge-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.door-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center top;
    z-index: 1;
    pointer-events: none;
    transform: translate3d(0, -100%, 0);
    transition: 2s ease-in-out;
    will-change: transform;
}

.bay-window-area {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
/*     border: solid 2px rgba(155, 25, 25);
 */}

.bay-window-recharge-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1100;
}

.bay-window-recharge-overlay-main {
    background: #000;
    -webkit-clip-path: polygon(
        61.39% 52.46%,
        61.45% 51.71%,
        61.54% 51.04%,
        61.68% 50.43%,
        61.85% 49.90%,
        62.05% 49.44%,
        62.27% 49.04%,
        62.52% 48.71%,
        62.79% 48.45%,
        63.07% 48.25%,
        63.36% 48.12%,
        63.66% 48.05%,
        63.95% 48.04%,
        64.25% 48.10%,
        64.55% 48.21%,
        64.83% 48.38%,
        65.10% 48.62%,
        65.35% 48.91%,
        65.58% 49.25%,
        65.79% 49.66%,
        65.97% 50.11%,
        66.11% 50.62%,
        66.22% 51.18%,
        66.29% 51.80%,
        66.31% 52.46%,
        69.94% 52.51%,
        70.12% 30.66%,
        30.27% 31.00%,
        30.42% 52.17%,
        38.45% 52.20%,
        38.43% 42.31%,
        49.06% 42.31%,
        49.49% 42.65%,
        49.55% 52.45%,
        61.39% 52.46%,
        61.39% 52.46%,
        61.39% 52.46%
    );
    clip-path: polygon(
        61.39% 52.46%,
        61.45% 51.71%,
        61.54% 51.04%,
        61.68% 50.43%,
        61.85% 49.90%,
        62.05% 49.44%,
        62.27% 49.04%,
        62.52% 48.71%,
        62.79% 48.45%,
        63.07% 48.25%,
        63.36% 48.12%,
        63.66% 48.05%,
        63.95% 48.04%,
        64.25% 48.10%,
        64.55% 48.21%,
        64.83% 48.38%,
        65.10% 48.62%,
        65.35% 48.91%,
        65.58% 49.25%,
        65.79% 49.66%,
        65.97% 50.11%,
        66.11% 50.62%,
        66.22% 51.18%,
        66.29% 51.80%,
        66.31% 52.46%,
        69.94% 52.51%,
        70.12% 30.66%,
        30.27% 31.00%,
        30.42% 52.17%,
        38.45% 52.20%,
        38.43% 42.31%,
        49.06% 42.31%,
        49.49% 42.65%,
        49.55% 52.45%,
        61.39% 52.46%,
        61.39% 52.46%,
        61.39% 52.46%
    );
}

.bay-window {
    width: 96%;
    height: 95%;
    display: flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 4px;
}

.door-button {
    width: 58px;
    height: 50px;
    padding: 0;
    background: url('../assets/icons/button_off.png') center / 100% 100% no-repeat;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    transition: none;
    position: absolute;
    top: 57%;
    z-index: 300;
    overflow: hidden;
    pointer-events: auto;
    transform-style: preserve-3d;
    transform-origin: center;
    filter: brightness(0.65);
    --button-perspective: 900px;
    --button-rotate-x: 0deg;
    --button-rotate-y: 0deg;
    --button-rotate-z: 0deg;
    --button-scale-x: 0.9;
    --button-scale-y: 0.9;
    --button-skew-x: 0deg;
    --button-skew-y: 0deg;
    transform:
        perspective(var(--button-perspective))
        rotateX(var(--button-rotate-x))
        rotateY(var(--button-rotate-y))
        rotateZ(var(--button-rotate-z))
        skewX(var(--button-skew-x))
        skewY(var(--button-skew-y))
        scaleX(var(--button-scale-x))
        scaleY(var(--button-scale-y));
}

.door-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../assets/icons/button_on.png') center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.door-button.closed::before {
    opacity: 1;
}

.door-button.left {
    left: 304px !important;
    top: 546px !important;
    --button-rotate-y: 40deg !important;
}

.door-button.right {
    right: 335px;
    top: 546px !important;
    --button-rotate-y: -40deg !important;
}

.door-button:hover {
    filter: brightness(1.08);
}

.door-button.closed {
    filter: brightness(1.0);
}

.door-button:focus,
.door-button:focus-visible,
.vent-button:focus,
.vent-button:focus-visible,
.recharge-button:focus,
.recharge-button:focus-visible {
    outline: none;
    box-shadow: none;
}

.door-button:disabled,
.door-button.disabled {
    filter: grayscale(0.5) brightness(0.7);
    box-shadow: none;
    transform:
        perspective(var(--button-perspective))
        rotateX(var(--button-rotate-x))
        rotateY(var(--button-rotate-y))
        rotateZ(var(--button-rotate-z))
        skewX(var(--button-skew-x))
        skewY(var(--button-skew-y))
        scaleX(var(--button-scale-x))
        scaleY(var(--button-scale-y));
    opacity: 1;
}

.night-duty-tutorial {
    position: absolute;
    inset: 0;
    z-index: 35000;
    pointer-events: auto;
}

.night-duty-tutorial.night-duty-tutorial-no-focus {
    background: rgba(0, 0, 0, 0.78);
}

.night-duty-tutorial-focus {
    position: absolute;
    /* border-radius: 26px; */
    background: transparent;
    /* border: 2px solid rgba(255, 234, 214, 0.92); */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 0 26px rgba(255, 233, 198, 0.35);
    pointer-events: none;
    animation: night-duty-tutorial-focus-pulse 1.7s ease-in-out infinite;
    filter: brightness(3);
}

.night-duty-tutorial-card {
    position: absolute;
    width: 686px;
    min-height: 190px;
    padding: 22px 24px 20px;
    border-radius: 20px;
    border: 1px solid rgba(232, 208, 176, 0.5);
    /* background: linear-gradient(180deg, rgba(20, 14, 11, 0.96) 0%, rgba(8, 6, 5, 0.96) 100%); */
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55), 0 0 20px rgba(143, 26, 29, 0.18);
    color: #f0e4d4;
    font-family: 'Courier New', monospace;
}

.night-duty-tutorial-step {
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #c78d70;
    margin-bottom: 14px;
}

.night-duty-tutorial-body {
    font-size: 20px;
    line-height: 1.5;
    color: #f7efe4;
    font-family: 'Rebelton';
}

.night-duty-tutorial-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
}

.night-duty-tutorial-button {
    min-width: 124px;
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(232, 208, 176, 0.4);
    background: rgba(31, 22, 18, 0.95);
    color: #f7efe4;
    cursor: pointer;
    font-family: 'Rebelton';
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.night-duty-tutorial-button:hover {
    background: rgba(64, 39, 30, 0.98);
}

.night-duty-tutorial-button-next {
    margin-left: auto;
    background: linear-gradient(180deg, rgba(127, 35, 37, 0.98) 0%, rgba(84, 18, 19, 0.98) 100%);
    border-color: rgba(232, 145, 132, 0.62);
}

.night-duty-tutorial-button-next:hover {
    background: linear-gradient(180deg, rgba(158, 44, 46, 0.98) 0%, rgba(104, 22, 24, 0.98) 100%);
}

.night-duty-tutorial-arrow {
    position: absolute;
    width: 36px;
    height: 70px;
    pointer-events: none;
    transform: translateX(-50%);
    animation: night-duty-tutorial-arrow-bounce 1s ease-in-out infinite;
}

.night-duty-tutorial-arrow-shaft {
    position: absolute;
    left: 16px;
    top: 0;
    width: 4px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 246, 228, 0.95) 0%, rgba(242, 177, 123, 0.95) 100%);
    box-shadow: 0 0 14px rgba(242, 177, 123, 0.42);
}

.night-duty-tutorial-arrow-head {
    position: absolute;
    left: 5px;
    top: 33px;
    width: 26px;
    height: 26px;
    border-right: 4px solid rgba(255, 246, 228, 0.95);
    border-bottom: 4px solid rgba(255, 246, 228, 0.95);
    transform: rotate(45deg);
    box-shadow: 4px 4px 12px rgba(242, 177, 123, 0.28);
}

@keyframes night-duty-tutorial-focus-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 9999px rgba(0, 0, 0, 0.78),
            0 0 0 1px rgba(255, 255, 255, 0.2) inset,
            0 0 18px rgba(255, 233, 198, 0.28);
    }

    50% {
        box-shadow:
            0 0 0 9999px rgba(0, 0, 0, 0.78),
            0 0 0 1px rgba(255, 255, 255, 0.28) inset,
            0 0 32px rgba(255, 233, 198, 0.5);
    }
}

@keyframes night-duty-tutorial-arrow-bounce {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

.control-button-label.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;
}

.door-button:hover {
    filter: brightness(0.8);
    /* box-shadow: 0 0 12px rgba(255, 0, 0, 0.6); */
}

.door-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.center-room-view {
    flex: 1;
    text-align: center;
    color: #555;
    font-family: 'Courier New', monospace;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desk-area {
    height: 280px;
    padding: 20px 50px;
    display: flex;
    gap: 30px;
    position: relative;
    top: -166px;
    width: 615px;
    align-items: flex-end;
}

.cat-frame-hitbox {
    position: absolute;
    left: -116px;
    top: 472px;
    width: 58px;
    height: 73px;
    z-index: 320;
    background: transparent;
    cursor: default;
    pointer-events: auto;
    user-select: none;
}

.camera-grid {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border-radius: 4px 4px 10px 10px;
    height: 122px;
    width: 171px;
    position: absolute;
    top: 317px;
    left: 102px;
    overflow: hidden;
}

.camera-feed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    border: solid 1px black;
    overflow: hidden;
}

.cam1 {
    border-radius: 6px 0 0 0;
}

.cam2 {
    border-radius: 0 6px 0 0;
}

.cam3 {
    border-radius: 0 0 0 10px;
}

.cam4 {
    border-radius: 0 0 10px 0;
}

.camera-feed:hover {
    border-color: #00ff00;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);

}

.camera-overlay-button {
    position: absolute;
    z-index: 2;
    display: none;
    border: 2px solid #00ff99;
    background: rgba(0, 0, 0, 0.82);
    color: #f3fff9;
    font-family: 'Courier New', monospace;
    cursor: pointer;
}

.camera-back-button {
    top: 24px;
    left: 24px;
    min-width: 120px;
    padding: 14px 20px;
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.08em;
}

.camera-fullscreen-overlay.active .camera-overlay-button {
    display: block;
}

.camera-nav-button {
    top: 50%;
    transform: translateY(-50%);
    width: 72px;
    height: 120px;
    border-radius: 16px;
    font-size: 54px;
    font-weight: bold;
    line-height: 1;
}

.camera-nav-button-left {
    left: 24px;
}

.camera-nav-button-right {
    right: 24px;
}

.camera-fullscreen-overlay {
    position: absolute;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.96);
}

.camera-fullscreen-overlay.active {
    display: flex;
}

.camera-fullscreen-media {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.camera-fullscreen-variant-switcher {
    position: absolute;
    right: 32px;
    bottom: 32px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.camera-fullscreen-variant-button {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(0, 255, 153, 0.45);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.82);
    color: #f3fff9;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
}

.camera-fullscreen-variant-button:hover {
    border-color: #8affca;
    color: #ffffff;
}

.camera-fullscreen-variant-button.active {
    border-color: #00ff99;
    background: rgba(0, 255, 153, 0.2);
    color: #00ff99;
    box-shadow: 0 0 10px rgba(0, 255, 153, 0.28);
}

.camera-fullscreen-variant-button:disabled,
.camera-fullscreen-variant-button.disabled {
    border-color: rgba(136, 136, 136, 0.5);
    background: rgba(28, 28, 28, 0.88);
    color: #8e8e8e;
    box-shadow: none;
}

.camera-fullscreen-variant-button:disabled:hover,
.camera-fullscreen-variant-button.disabled:hover {
    border-color: rgba(136, 136, 136, 0.5);
    color: #8e8e8e;
}

.camera-fullscreen-media-element {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

.camera-overlay-button:hover {
    border-color: #8affca;
    box-shadow: 0 0 16px rgba(0, 255, 153, 0.35);
}

.camera-label {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: #00ff00;
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0, 0, 0, 0.7);
    padding: 2px 8px;
    border-radius: 3px;
}

.camera-view {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 12px;
}

.back-view-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 100px 50px 50px;
    gap: 30px;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.back-view-top {
    display: flex;
    /* gap: 516px; */
    height: 600px;
}

.wing-map-panel {
    --wing-board-width: 320px;
    --wing-board-height: 493px;
    width: var(--wing-board-width);
    height: var(--wing-board-height);
    position: relative;
    padding: 28px;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
    transform: scale(1.2) translate(20px, 70px);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42), inset 0 0 24px rgba(0, 0, 0, 0.2);
}

.phase-indicator {
        position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    font-family: 'Arial', monospace;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #c8d8e8;
    text-align: center;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    text-shadow: 0 0 8px rgba(0, 180, 255, 0.35);
}

.wing-map-panel img {
    position: absolute;
    width: var(--wing-board-height);
    height: var(--wing-board-width);
    object-fit: cover;
    top: 50%;
    left: 50%;
    z-index: 0;
    pointer-events: none;
    filter: brightness(0.4);
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
    max-width: none;
}

.panel-title {
        font-family: 'arial', monospace;
    font-size: 32px;
    font-weight: 900;
    color: #e7e7e7;
    text-align: center;
    margin-bottom: 13px;
}

.wing-map-content {
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    height: calc(100% - 74px);
    margin-top: 10px;
    position: relative;
    z-index: 1;
}

.wing-item {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    color: #c3cedb;
}

.wing-map-layout {
    position: relative;
    width: min(100%, 200px);
    height: 100%;
    margin: 0 auto;
    --room-size: 56px;
    --room-radius: calc(var(--room-size) / 2);
    --route-step: 120px;
    --route-gap: calc(var(--route-step) - var(--room-size));
    --route-overlap: 18px;
    --left-column: 54px;
    --right-column: calc(var(--left-column) + var(--route-step));
    --top-row: 58px;
    --middle-row: calc(var(--top-row) + var(--route-step));
    --bottom-row: calc(var(--middle-row) + var(--route-step));
    border-radius: 24px;
    transform: scale(1.1);
    top: 11px;
    left: -15px;
    /* left: 6px;
    /* background:
        radial-gradient(circle at center, rgba(64, 114, 180, 0.18), transparent 58%),
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.03) 0,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 28px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 0,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 28px
        ),
        linear-gradient(180deg, rgba(8, 16, 24, 0.92), rgba(4, 8, 14, 0.96));
    border: 1px solid rgba(146, 171, 205, 0.25); */
}

.wing-map-layout::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 20px;
    pointer-events: none;
}

.wing-corridor {
    position: absolute;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    z-index: 1;
    transition: background 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.wing-corridor.active {
    box-shadow:
        inset 0 0 0 1px rgba(255, 216, 132, 0.18),
        0 0 14px rgba(255, 181, 71, 0.38),
        0 0 28px rgba(214, 133, 21, 0.16);
}

.wing-corridor.locked {
    opacity: 0.9;
}

.corridor-lock {
    position: absolute;
    top: 56%;
    left: 50%;
    width: 20px;
    height: 15px;
    transform: translate(-50%, -50%);
    border: 2px solid #f1d28c;
    border-radius: 4px;
    background: linear-gradient(180deg, #7f5c1d, #4d3408);
    box-shadow: 0 0 10px rgba(255, 204, 102, 0.22);
    z-index: 2;
    opacity: 0;
    transition: opacity 180ms ease;
}

.corridor-lock::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 12px;
    height: 10px;
    transform: translateX(-50%);
    border: 2px solid #f1d28c;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.corridor-gold-diamond .corridor-lock {
    border-color: #b9f4ff;
    background: linear-gradient(180deg, #7be9ff, #2d8fb3);
    box-shadow: 0 0 12px rgba(123, 233, 255, 0.35);
}

.corridor-gold-diamond .corridor-lock::before {
    border-color: #b9f4ff;
    border-bottom: 0;
}

.wing-corridor.locked:not(.passed) .corridor-lock {
    opacity: 1;
}

.wing-corridor.debug-unlocked .corridor-lock {
    opacity: 0 !important;
}

.corridor-west-east {
    top: calc(var(--top-row) - 6px);
    left: calc(var(--left-column) + var(--room-radius) - var(--route-overlap));
    width: calc(var(--route-gap) + (var(--route-overlap) * 2));
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
}

.corridor-north-gold.locked:not(.active),
.corridor-gold-diamond.locked:not(.active),
.wing-corridor.locked:not(.active).wing-route-lock-gold {
    background: linear-gradient(90deg, rgba(71, 57, 34, 0.22), rgba(51, 37, 18, 0.8), rgba(71, 57, 34, 0.22));
}

.wing-corridor.locked:not(.active).wing-route-lock-diamond {
    background: linear-gradient(90deg, rgba(30, 58, 74, 0.22), rgba(18, 40, 57, 0.82), rgba(30, 58, 74, 0.22));
}

.corridor-east-south {
    top: calc(var(--top-row) + var(--room-radius) - var(--route-overlap));
    left: calc(var(--right-column) - 6px);
    width: 12px;
    height: calc(var(--route-gap) + (var(--route-overlap) * 2));
}

.corridor-east-south.active,
.corridor-north-gold.active,
.wing-route-step-1.active,
.wing-route-step-3.active {
    background: linear-gradient(180deg, rgba(154, 185, 214, 0.18), rgba(102, 134, 166, 0.75), rgba(154, 185, 214, 0.18));
}

.corridor-west-east.active,
.corridor-south-north.active,
.corridor-gold-diamond.active,
.wing-route-step-0.active,
.wing-route-step-2.active,
.wing-route-step-4.active {
    background: linear-gradient(90deg, rgba(154, 185, 214, 0.18), rgba(102, 134, 166, 0.75), rgba(154, 185, 214, 0.18));
}

.corridor-south-north {
    top: calc(var(--middle-row) - 6px);
    left: calc(var(--left-column) + var(--room-radius) - var(--route-overlap));
    width: calc(var(--route-gap) + (var(--route-overlap) * 2));
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
}

.corridor-north-gold {
    top: calc(var(--middle-row) + var(--room-radius) - var(--route-overlap));
    left: calc(var(--left-column) - 6px);
    width: 12px;
    height: calc(var(--route-gap) + (var(--route-overlap) * 2));
}

.corridor-gold-diamond {
    top: calc(var(--bottom-row) - 6px);
    left: calc(var(--left-column) + var(--room-radius) - var(--route-overlap));
    width: calc(var(--route-gap) + (var(--route-overlap) * 2));
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
}

.wing-route-step-0 {
    top: calc(var(--top-row) - 6px);
    left: calc(var(--left-column) + var(--room-radius) - var(--route-overlap));
    width: calc(var(--route-gap) + (var(--route-overlap) * 2));
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
}

.wing-route-step-1 {
    top: calc(var(--top-row) + var(--room-radius) - var(--route-overlap));
    left: calc(var(--right-column) - 6px);
    width: 12px;
    height: calc(var(--route-gap) + (var(--route-overlap) * 2));
}

.wing-route-step-2 {
    top: calc(var(--middle-row) - 6px);
    left: calc(var(--left-column) + var(--room-radius) - var(--route-overlap));
    width: calc(var(--route-gap) + (var(--route-overlap) * 2));
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
}

.wing-route-step-3 {
    top: calc(var(--middle-row) + var(--room-radius) - var(--route-overlap));
    left: calc(var(--left-column) - 6px);
    width: 12px;
    height: calc(var(--route-gap) + (var(--route-overlap) * 2));
}

.wing-route-step-4 {
    top: calc(var(--bottom-row) - 6px);
    left: calc(var(--left-column) + var(--room-radius) - var(--route-overlap));
    width: calc(var(--route-gap) + (var(--route-overlap) * 2));
    height: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4), rgba(245, 245, 245, 0.95), rgba(255, 255, 255, 0.4));
}

.wing-room.route-hidden,
.wing-corridor.route-hidden {
    display: none;
}

.wing-room {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: translate(-50%, -50%) scale(1.3, 1.3);
}

.wing-room {
    width: var(--room-size);
    height: var(--room-size);
    --wing-room-name-font-size: 14px;
    --wing-room-status-font-size: 10px;
    font-size: 12px;
    padding: 10px 8px 8px;
    box-sizing: border-box;
    border: 0;
    border-radius: 6px;
    background: url('../assets/icons/post_it.png') center / 100% 100% no-repeat;
    /* box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); */
    z-index: 2;
    color: #35312b;
    filter: grayscale(1) brightness(0.88) contrast(0.95);
}

.wing-room::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.04));
    opacity: 0.35;
    pointer-events: none;
}

.wing-room-north {
    top: var(--middle-row);
    left: var(--left-column);
}

.wing-route-slot-0 {
    top: var(--top-row);
    left: var(--left-column);
}

.wing-route-slot-1 {
    top: var(--top-row);
    left: var(--right-column);
}

.wing-route-slot-2 {
    top: var(--middle-row);
    left: var(--right-column);
}

.wing-route-slot-3 {
    top: var(--middle-row);
    left: var(--left-column);
}

.wing-route-slot-4 {
    top: var(--bottom-row);
    left: var(--left-column);
}

.wing-route-slot-5 {
    top: var(--bottom-row);
    left: var(--right-column);
}

.wing-room-west {
    top: var(--top-row);
    left: var(--left-column);
}

.wing-room-east {
    top: var(--top-row);
    left: var(--right-column);
}

.wing-room-south {
    top: var(--middle-row);
    left: var(--right-column);
}

.wing-room-gold {
    top: var(--bottom-row);
    left: var(--left-column);
}

.wing-room-diamond {
    top: var(--bottom-row);
    left: var(--right-column);
}

.wing-room-gold,
.wing-room-diamond {
    overflow: visible;
    cursor: pointer;
    transition: filter 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.wing-room-gold {
    --wing-preview-image: url('assets/mainmenu/5.mp4');
}

.wing-room-diamond {
    --wing-preview-image: url('assets/mainmenu/6.mp4');
    --wing-room-name-font-size: 10px;
    --wing-room-status-font-size: 9px;
}

.wing-room-preview-frame {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 16px);
    width: 120px;
    height: 84px;
    transform: translateX(-50%) scale(0.92);
    transform-origin: bottom center;
    border: 2px solid rgba(219, 231, 248, 0.28);
    border-radius: 12px;
    background:
        linear-gradient(rgba(3, 8, 14, 0.18), rgba(3, 8, 14, 0.18)),
        var(--wing-preview-image) center / cover no-repeat,
        rgba(6, 10, 16, 0.98);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 4;
}

.wing-room-preview-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(rgba(3, 8, 14, 0.18), rgba(3, 8, 14, 0.18));
    pointer-events: none;
}

.wing-room-preview-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    background: rgba(6, 10, 16, 0.98);
}

.wing-room-gold:hover,
.wing-room-gold:focus-visible {
    filter: grayscale(0.18) sepia(0.38) saturate(1.15) hue-rotate(-8deg) brightness(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.wing-room-diamond:hover,
.wing-room-diamond:focus-visible {
    filter: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.wing-room-gold:hover .wing-room-preview-frame,
.wing-room-gold:focus-visible .wing-room-preview-frame,
.wing-room-diamond:hover .wing-room-preview-frame,
.wing-room-diamond:focus-visible .wing-room-preview-frame {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.wing-room-name {
    position: relative;
    z-index: 1;
    display: block;
    white-space: nowrap;
    font-size: 11px;
}

.wing-room-name {
    color: #403227;
    font-weight: 800;
    line-height: 1.05;
}

.wing-room-status {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    font-size: var(--wing-room-status-font-size);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wing-room-status {
    color: #6e5f4c;
    display: none;
}

.wing-item.completed {
    filter: grayscale(0.08) sepia(0.55) saturate(1.2) hue-rotate(42deg) brightness(0.98);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.wing-item.current {
    filter: grayscale(0.02) sepia(0.62) saturate(1.18) hue-rotate(-18deg) brightness(1.03);
    animation: pulse 2s ease-in-out infinite;
}

.wing-item.completed .wing-room-status {
    color: #31513f;
}

.wing-item.current .wing-room-status {
    color: #744d22;
}

.wing-item.locked {
    filter: grayscale(1) brightness(0.88) contrast(0.95);
}

.wing-item.locked.wing-room-gold:hover,
.wing-item.locked.wing-room-gold:focus-visible {
    filter: grayscale(0.18) sepia(0.38) saturate(1.15) hue-rotate(-8deg) brightness(1.02);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.wing-item.locked.wing-room-diamond:hover,
.wing-item.locked.wing-room-diamond:focus-visible {
    filter: none;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}

.wing-item.locked .wing-room-status {
    font-size: 6px;
    letter-spacing: 0.02em;
    line-height: 1.05;
    white-space: normal;
    max-width: 58px;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1.3, 1.3) rotate(-2deg);
        filter: grayscale(0.02) sepia(0.62) saturate(1.18) hue-rotate(-18deg) brightness(1.03);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3, 1.3) rotate(1deg);
        filter: grayscale(0) sepia(0.7) saturate(1.24) hue-rotate(-16deg) brightness(1.1);
    }
}

.danger-guide-panel {
    width: 500px;
    height: 723px;
    flex-shrink: 0;
    box-sizing: border-box;
    left: 1000px;
    top: 25px;
    position: relative;
    padding: 33px;
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.42), inset 0 0 24px rgba(0, 0, 0, 0.2);
}

.danger-guide-panel img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 0;
    filter: brightness(0.4);
}

.danger-guide-content {
    height: 265%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #9a9a9a transparent;
    z-index: 1;
    position: relative;
    margin-top: 23px;
}

.danger-guide-content::-webkit-scrollbar {
    width: 8px;
}

.danger-guide-content::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.danger-guide-content::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 4px;
}

.danger-item {
    width: 100%;
    height: auto;
    margin-bottom: 17px;
}


.danger-title {
    font-family: 'Rebelton', 'Courier New', monospace;
    font-weight: bold;
    font-size: 17px;
    color: #ff9a9a;
    margin-bottom: 5px;
}

.danger-description {
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    line-height: 1.4;
    opacity: 0.7;
}

/* Vent Video */
.vent-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

#vent-no-light {
    pointer-events: none;
}

.vent-hit-area {
    position: absolute;
    left: 50%;
    bottom: 161px;
    width: 244px;
    height: 479px;
    transform: translateX(-50%);
    z-index: 4;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.vent-hit-area::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 62%, rgba(216, 237, 240, 0.12) 0%, rgba(216, 237, 240, 0.07) 28%, rgba(216, 237, 240, 0.03) 52%, rgba(216, 237, 240, 0) 76%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.015) 0%, rgba(10, 26, 30, 0.09) 100%);
    transition: opacity 0.18s ease, transform 0.18s ease, filter 0.18s ease;
}

.vent-hit-area:hover::after,
.vent-hit-area:focus-visible::after {
    opacity: 1;
    transform: scale(1.02);
    filter: saturate(1.05);
}

.vent-hit-area:focus-visible {
    outline: none;
}

.vent-button {
    position: absolute;
    top: auto;
    left: auto;
    width: 75px;
    height: 75px;
    right: 735px;
    bottom: 240px;
    z-index: 3;
    background: url('../assets/icons/button_off.png') center / 70% 70% no-repeat;
    --button-rotate-x: 0deg;
    --button-rotate-y: 0deg;
    --button-rotate-z: 0deg;
    --button-scale-x: 0.9;
    --button-scale-y: 0.9;
    --button-skew-x: 0deg;
    --button-skew-y: 0deg;
    transform: scaleX(var(--button-scale-x)) scaleY(var(--button-scale-y));
    filter: brightness(0.65);
}

.vent-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../assets/icons/button_on.png') center / 70% 70% no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.vent-button.closed::before {
    opacity: 1;
}

.vent-button,
.vent-button:active,
.vent-button.active,
.vent-button.locked-flash,
.vent-button:disabled {
    transform: scaleX(var(--button-scale-x)) scaleY(var(--button-scale-y));
    filter: brightness(0.65);
}

.vent-button.closed {
    filter: brightness(1.0);
}

.vent-button:hover {
    transform: scaleX(var(--button-scale-x)) scaleY(var(--button-scale-y));
    filter: brightness(0.8);
}

.view-switch-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 999;
}

.bay-window {
    display: flex;
    flex-direction: row;
    gap: 0;
    margin: 0;
    padding: 0;
}

.bay-section {
    flex: 1;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.bay-window-video {
    position: absolute;
    width: 1920px;
    height: 1080px;
    /* top/left offsets are computed by JS at runtime */
    pointer-events: none;
}

.door-presence {
    position: absolute;
    width: 1920px;
    height: 1080px;
    z-index: 0;
    pointer-events: none;
}

.door-panel {
    position: absolute;
    z-index: 1;
    width: 1920px;
    height: 1080px;
    pointer-events: none;
    object-fit: none;
    max-width: none;
    max-height: none;
}

#video-presence-LD {
    top: -164px;
    left: -19px;
}

#video-presence-RD {
    top: -164px;
    left: -1600px;
}

.camera-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* Per-inmate full-frame preview renders for cam4.
    JS clips each one to its corresponding bed zone before compositing. */
.bed-inmate-overlay {
    z-index: 1;
}

/* Battery Gauge */
.battery-gauge-container {
    position: absolute;
    top: 161%;
    left: 28.5%;
    transform: translate(calc(-50% + 400px), -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    z-index: 100;
}

.battery-gauge {
    position: relative;
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    z-index: 1;
/*     filter: drop-shadow(0 0 10px rgba(255, 170, 0, 0.3));
 */}

.battery-percentage-overlay {
    position: absolute;
    top: 44px;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 0;
    color: #00c853;
    font-family: 'Courier New', monospace;
    font-size: 17px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.85);
}

.recharge-button {
    width: 75px;
    height: 75px;
    padding: 0;
    background: url('../assets/icons/button_off.png') center / 70% 70% no-repeat;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    transition: none;
    position: relative;
    z-index: 3;
    top: 8px;
    --recharge-scale-x: 0.8;
    --recharge-scale-y: 0.8;
    transform: scaleX(var(--recharge-scale-x)) scaleY(var(--recharge-scale-y));
    filter: brightness(0.65);
}

.recharge-button:disabled,
.recharge-button.disabled {
    cursor: not-allowed;
}

.recharge-button,
.recharge-button:active,
.recharge-button.active,
.recharge-button.disabled,
.recharge-button:disabled {
    transform: scaleX(var(--recharge-scale-x)) scaleY(var(--recharge-scale-y));
    filter: brightness(0.65);
    box-shadow: none;
    opacity: 1;
}

.recharge-button:hover {
    transform: scaleX(var(--recharge-scale-x)) scaleY(var(--recharge-scale-y));
    filter: brightness(0.8);
}

.recharge-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../assets/icons/button_on.png') center / 70% 70% no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.recharge-button.active::before,
.recharge-button.charging::before {
    opacity: 1;
}

.recharge-button.active {
    transform: scaleX(var(--recharge-scale-x)) scaleY(var(--recharge-scale-y));
    filter: brightness(1.0);
}

.recharge-button.active:hover {
    transform: scaleX(var(--recharge-scale-x)) scaleY(var(--recharge-scale-y));
    filter: brightness(1.1);
}

.door-button:disabled,
.door-button:disabled:hover {
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
    transform:
        perspective(var(--button-perspective))
        rotateX(var(--button-rotate-x))
        rotateY(var(--button-rotate-y))
        rotateZ(var(--button-rotate-z))
        skewX(var(--button-skew-x))
        skewY(var(--button-skew-y))
        scaleX(var(--button-scale-x))
        scaleY(var(--button-scale-y));
}

.vent-button:disabled,
.vent-button:disabled:hover {
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
    transform: scaleX(var(--button-scale-x)) scaleY(var(--button-scale-y));
}

.recharge-button:disabled,
.recharge-button.disabled,
.recharge-button:disabled:hover,
.recharge-button.disabled:hover {
    pointer-events: none;
    cursor: not-allowed;
    filter: grayscale(1) brightness(0.5);
    transform: scaleX(var(--recharge-scale-x)) scaleY(var(--recharge-scale-y));
}

/* Hide elements during camera zoom */
.camera-zoom-hidden {
    display: none !important;
}

/* Camera glitch effect when inmate leaves a room */
.camera-glitching {
    animation: cameraGlitch 0.15s steps(2) 6;
}

@keyframes cameraGlitch {
    0%   { filter: hue-rotate(90deg) brightness(1.5) contrast(2); transform: translate(2px, -1px); }
    25%  { filter: hue-rotate(180deg) brightness(0.5) saturate(3); transform: translate(-3px, 2px); }
    50%  { filter: hue-rotate(270deg) brightness(2) contrast(0.5); transform: translate(1px, 3px); }
    75%  { filter: invert(1) brightness(1.3); transform: translate(-2px, -2px); }
    100% { filter: none; transform: translate(0, 0); }
}

/* Psycho wing color-shifting effect */
.psycho-wing-effect {
    animation: psychoShift 3s ease-in-out infinite;
}

@keyframes psychoShift {
    0%   { filter: saturate(1.18) hue-rotate(0deg); }
    25%  { filter: saturate(1.32) hue-rotate(8deg); }
    50%  { filter: saturate(1.12) hue-rotate(-5deg) brightness(0.96); }
    75%  { filter: saturate(1.26) hue-rotate(4deg) brightness(1.04); }
    100% { filter: saturate(1.18) hue-rotate(0deg); }
}

.completion-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    background: #050203;
    overflow: hidden;
    font-family: 'Rebelton', 'Courier New', monospace;
}

.completion-preview-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 48%, rgba(170, 42, 58, 0.18), transparent 30%),
        linear-gradient(90deg, rgba(4, 2, 2, 0.88) 0%, rgba(4, 2, 2, 0.56) 28%, rgba(4, 2, 2, 0.16) 52%, rgba(4, 2, 2, 0.55) 100%);
    pointer-events: none;
}

.completion-preview-upgrade-overlay {
    z-index: 1200;
}

#wing-completion-edition-upgrade-overlay {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0 0 58%;
}

#wing-completion-edition-upgrade-overlay .gallery_popup {
    width: min(460px, 30vw);
    max-width: 460px;
    margin-top: -28px;
}

.completion-preview-background-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.9;
    z-index: 0;
    pointer-events: none;
}

.completion-preview-background-image.is-hidden {
    display: none;
}

.completion-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    opacity: 0;
    transition: none;
    pointer-events: none;
    z-index: 1;
}

.completion-preview-video.is-active {
    opacity: 1;
}

.completion-preview-video.is-idle {
    opacity: 0;
}

.completion-preview-controls-toggle {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 1000;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(255 255 255);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.82);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
    z-index: 10000;
}

.completion-preview-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1000;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--nd-root-strong-rgb) / 0.4);
    border-radius: 999px;
    background: linear-gradient(145deg, rgb(var(--nd-root-rgb) / 0.76), rgba(10, 10, 12, 0.84));
    color: rgb(var(--nd-root-soft-rgb) / 1);
    font-family: inherit;
    font-size: 36px;
    line-height: 1;
    padding: 0 0 16px;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.completion-preview-close:hover {
    transform: scale(1.04);
    background: linear-gradient(145deg, rgb(var(--nd-root-strong-rgb) / 0.26), rgb(var(--nd-root-rgb) / 0.92));
    border-color: rgb(var(--nd-root-strong-rgb) / 0.72);
}

.completion-preview-controls-toggle:hover {
    transform: scale(1.04);
    background: rgba(12, 12, 12, 0.94);
    border-color: rgba(255, 255, 255, 0.3);
}

.completion-preview-controls-toggle-icon {
    width: 45px;
    height: 45px;
    object-fit: contain;
    display: block;
}

.completion-preview-controls {
    position: relative;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 100%;
    left: 10px;
    justify-content: center;
}

.completion-preview-status {
    margin-top: 16px;
    color: rgba(245, 197, 108, 0.92);
    font-size: 15px;
    line-height: 1.4;
}

.completion-preview-button-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: opacity 160ms ease, transform 160ms ease;
}

.completion-preview-button-list.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-32px);
}

.completion-preview-option {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border: 2px solid rgba(255, 221, 226, 0.12);
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.50);
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.completion-preview-option:hover {
    transform: translateX(4px);
    border-color: rgba(255, 221, 226, 0.26);
}

.completion-preview-option.selected {
    background: rgba(78, 22, 31, 0.85);
    border-color: rgba(255, 211, 218, 0.42);
    box-shadow: 0 0 0 1px rgba(255, 211, 218, 0.08), 0 18px 36px rgba(0, 0, 0, 0.28);
}

.completion-preview-option.is-locked {
    opacity: 0.62;
    border-style: dashed;
}

.completion-preview-option.is-locked:hover {
    transform: none;
    border-color: rgba(255, 221, 226, 0.12);
}

.completion-preview-option--titsjob.selected {
    background: rgba(78, 22, 31, 0.85);
    border-color: rgba(255, 211, 218, 0.42);
    box-shadow: 0 0 0 1px rgba(255, 211, 218, 0.08), 0 18px 36px rgba(0, 0, 0, 0.28);
}

.completion-preview-option--blowjob.selected {
    background: rgba(92, 72, 18, 0.88);
    border-color: rgba(255, 220, 120, 0.46);
    box-shadow: 0 0 0 1px rgba(255, 220, 120, 0.12), 0 18px 36px rgba(0, 0, 0, 0.28);
}

.completion-preview-option--cum.selected {
    background: rgba(28, 56, 92, 0.9);
    border-color: rgba(164, 222, 255, 0.5);
    box-shadow: 0 0 0 1px rgba(164, 222, 255, 0.14), 0 18px 36px rgba(0, 0, 0, 0.28);
}

.completion-preview-option-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: 16px;
    display: block;
}

.completion-preview-option-label {
    color: #fff2f4;
    font-size: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wing-completion-cinematic-overlay {
    position: fixed;
    inset: 0;
    z-index: 20020;
    background: #000;
    overflow: hidden;
}

.wing-completion-cinematic-stage {
    position: absolute;
    inset: 0;
}

.wing-completion-cinematic-video,
.wing-completion-cinematic-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 320ms ease;
    background: #000;
}

.wing-completion-cinematic-video.is-visible,
.wing-completion-cinematic-image.is-visible {
    opacity: 1;
}

.wing-completion-banner-overlay {
    position: fixed;
    inset: 0;
    z-index: 20030;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(180deg, rgba(4, 1, 2, 0.14), rgba(4, 1, 2, 0.46));
    cursor: pointer;
}

.wing-completion-banner-text {
    color: #ffe3e8;
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 62px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 24px rgba(255, 170, 184, 0.26), 0 10px 36px rgba(0, 0, 0, 0.42);
}

.wing-completion-banner-hint {
    color: rgba(255, 234, 238, 0.72);
    font-size: 17px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.wing-completion-overview-overlay {
    position: fixed;
    inset: 0;
    z-index: 20030;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    /* background:
        radial-gradient(circle at 18% 20%, rgba(255, 207, 132, 0.12), transparent 22%),
        radial-gradient(circle at 82% 16%, rgba(134, 232, 255, 0.16), transparent 28%),
        linear-gradient(180deg, rgba(4, 1, 2, 0.72), rgba(4, 1, 2, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); */
}

.wing-completion-overview-card {
    pointer-events: auto;
    width: min(1406px, calc(100% - -35px));
    display: grid;
    grid-template-columns: minmax(420px, 480px) minmax(0, 1fr);
    gap: 156px;
    padding: 40px 42px;
    /* border: 1px solid rgba(214, 238, 244, 0.14); */
    /* border-radius: 34px; */
    /* background: linear-gradient(180deg, rgba(13, 21, 29, 0.96), rgba(7, 12, 18, 0.98)), linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%); */
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition: opacity 260ms ease, transform 460ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease;
}

.wing-completion-overview-overlay.is-visible .wing-completion-overview-card {
    opacity: 1;
    transform: translateY(0) scale(1.3);
}

.wing-completion-overview-card.is-actions-ready {
    box-shadow: 0 30px 88px rgba(0, 0, 0, 0.46), 0 0 32px rgba(134, 232, 255, 0.08);
}

.wing-completion-overview-board-stage {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wing-completion-selector-board {
    --wing-board-width: 448px;
    --wing-board-height: 605px;
    width: var(--wing-board-width);
    height: var(--wing-board-height);
    padding: 34px 28px 86px;
    transform: none;
    border-radius: 30px;
    /* border: 1px solid rgba(222, 210, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(76, 57, 30, 0.96), rgba(44, 30, 15, 0.98)),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.03) 0,
            rgba(255, 255, 255, 0.03) 3px,
            transparent 3px,
            transparent 28px
        ); */
    box-shadow:
        0 24px 42px rgba(0, 0, 0, 0.36),
        inset 0 1px 0 rgba(255, 248, 233, 0.08),
        inset 0 -22px 32px rgba(20, 10, 3, 0.24);
    margin-left: 45px;
}

/* .wing-completion-selector-board::before {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 18% 14%, rgba(255, 236, 196, 0.1), transparent 24%),
        radial-gradient(circle at 84% 20%, rgba(255, 208, 120, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.02));
    pointer-events: none;
}

.wing-completion-selector-board::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 24px;
    border: 1px solid rgba(255, 246, 228, 0.06);
    pointer-events: none;
} */

.wing-completion-selector-board-title {
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
    top: -11px;
    color: #f1eadb;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.34);
}

.wing-completion-selector-board-content {
    height: calc(100% - 118px);
    margin-top: 0;
    justify-content: center;
}

.wing-completion-selector-board-layout {
    width: 292px;
    height: 472px;
    --room-size: 72px;
    --route-step: 164px;
    --route-gap: calc(var(--route-step) - var(--room-size));
    --route-overlap: 22px;
    --left-column: 70px;
    --right-column: calc(var(--left-column) + var(--route-step));
    --top-row: 64px;
    --middle-row: calc(var(--top-row) + var(--route-step));
    --bottom-row: calc(var(--middle-row) + var(--route-step));
    transform: none;
    top: 0;
    left: 0;
}

.wing-completion-selector-board .wing-room {
    transform: translate(-50%, -50%) scale(1.5, 1.5);
    padding: 23px 8px 8px;
}


.wing-completion-selector-board .wing-room-status {
    display: block;
    min-height: 10px;
}

.wing-completion-selector-board .wing-room-gold,
.wing-completion-selector-board .wing-room-diamond {
    cursor: default;
}

.wing-completion-selector-board .wing-room-preview-frame {
    display: none;
}

.wing-completion-selector-board .wing-completion-selector-target:not(.locked) {
    filter: grayscale(0.02) sepia(0.54) saturate(1.28) hue-rotate(-18deg) brightness(1.04);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
}

.wing-completion-selector-board .wing-completion-selector-target.locked {
    filter: grayscale(0.7) sepia(0.18) saturate(1.14) brightness(0.96);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.wing-completion-selector-board-note {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 9px;
    z-index: 1;
    padding: 10px 14px 14px 10px;
    border: 1px solid rgba(255, 242, 217, 0.08);
    border-radius: 16px;
    background: rgba(14, 20, 24, 0.34);
    color: #f6eedf;
    font-size: 18px;
    line-height: 1.08;
    letter-spacing: 0em;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Rebelton';
    text-wrap: nowrap;
}

.wing-completion-overview-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    /* margin-left: 12px; */
    margin-bottom: 24px;
    transform: translateY(-26px);
}

.wing-completion-overview-eyebrow {
    color: rgba(140, 233, 255, 0.78);
    font-size: 15px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.wing-completion-overview-summary,
.wing-completion-overview-note {
    color: rgba(220, 233, 239, 0.86);
    font-size: 18px;
    line-height: 1.5;
}

.wing-completion-overview-destination-badge {
    align-self: flex-start;
    margin-top: 4px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid rgba(140, 233, 255, 0.24);
    background: rgba(13, 32, 42, 0.76);
    color: #dff8ff;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wing-completion-overview-destination-title {
    color: #fff5e6;
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 34px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wing-completion-overview-destination-status {
    color: rgba(221, 229, 234, 0.8);
    font-size: 17px;
    line-height: 1.45;
}

.wing-completion-overview-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: -6px;
}

.wing-completion-overview-preview-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wing-completion-overview-preview-media {
    --wing-completion-preview-poster: linear-gradient(180deg, rgba(32, 44, 54, 0.95), rgba(8, 12, 18, 0.98));
    position: relative;
    min-height: 220px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(214, 238, 244, 0.16);
    cursor: pointer;
    background:
        linear-gradient(180deg, rgba(5, 8, 14, 0.12), rgba(5, 8, 14, 0.46)),
        var(--wing-completion-preview-poster) center / cover no-repeat,
        #030507;
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.wing-completion-overview-preview-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 5, 8, 0.08), rgba(3, 5, 8, 0.4));
    pointer-events: none;
}

.wing-completion-overview-preview-card-gold .wing-completion-overview-preview-media {
    border-color: rgba(216, 180, 74, 0.85);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(216, 180, 74, 0.2);
}

.wing-completion-overview-preview-card-diamond .wing-completion-overview-preview-media {
    border-color: rgba(134, 232, 255, 0.9);
    box-shadow: 0 18px 28px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(134, 232, 255, 0.22);
}

.wing-completion-overview-preview-media:hover,
.wing-completion-overview-preview-media:focus-visible {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 22px 36px rgba(0, 0, 0, 0.32);
    outline: none;
}

.wing-completion-overview-preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    filter: blur(7.8px);
    transform: scale(1.04);
    transition: opacity 220ms ease;
}

.wing-completion-overview-preview-card.is-ready .wing-completion-overview-preview-video {
    opacity: 1;
}

body[data-edition="gold"] .wing-completion-overview-preview-card-gold .wing-completion-overview-preview-video {
    filter: none;
}

.wing-completion-overview-preview-card.is-fallback .wing-completion-overview-preview-video {
    opacity: 0;
}

.wing-completion-overview-preview-title {
    position: static;
    z-index: 1;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #f0fbff;
    font-size: 22px;
    text-transform: uppercase;
    font-family: 'Rebelton', 'Courier New', monospace;
    letter-spacing: 0.08em;
    text-align: center;
}

.wing-completion-overview-preview-card-gold .wing-completion-overview-preview-title {
    color: rgba(216, 180, 74, 0.85);
}

.wing-completion-overview-preview-card-diamond .wing-completion-overview-preview-title {
    color: rgba(134, 232, 255, 0.9);
}

.wing-completion-overview-preview-inmates {
    color: rgba(232, 240, 245, 0.88);
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
}

.wing-completion-overview-preview-card-gold .wing-completion-overview-preview-inmates {
    color: rgba(255, 231, 157, 0.92);
}

.wing-completion-overview-preview-card-diamond .wing-completion-overview-preview-inmates {
    color: rgba(205, 246, 255, 0.94);
}

.wing-completion-overview-next-wing {
    color: #f0fbff;
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 22px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 2px;
}

.wing-completion-overview-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: -1px;
    justify-content: center;
}

.wing-completion-overview-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 14px 14px;
    border: 1px solid rgba(140, 233, 255, 0.2);
    border-radius: 15px;
    background: rgba(12, 26, 34, 0.94);
    color: #dff8ff;
    font-family: 'Rebelton', 'Courier New', monospace;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
    line-height: -2.2em;
    /* letter-spacing: -0.1em; */
    font-family: 'arial';
    font-weight: 800;
}

.wing-completion-overview-button:hover {
    transform: translateY(-1px);
    border-color: rgba(140, 233, 255, 0.44);
    background: rgba(18, 38, 51, 0.98);
}

.wing-completion-overview-button-primary {
    border-color: rgba(255, 192, 201, 0.28);
    background: rgba(78, 24, 33, 0.94);
    color: #fff2f4;
}

.wing-completion-overview-button-primary:hover {
    border-color: rgba(255, 192, 201, 0.5);
    background: rgba(110, 31, 45, 0.98);
}

.wing-completion-overview-button-patreon {
    gap: 10px;
    border-color: rgba(255, 145, 197, 0.34);
    background: linear-gradient(180deg, rgb(213 0 97 / 92%), rgb(126 0 59 / 98%));
    color: #fff0f7;
}

.wing-completion-overview-button-patreon:hover {
    border-color: rgba(255, 145, 197, 0.56);
    background: linear-gradient(180deg, rgba(104, 31, 64, 0.96), rgba(63, 20, 40, 0.98));
}

.wing-completion-overview-button-offer-gold {
    border-color: rgba(216, 180, 74, 0.42);
    background: linear-gradient(180deg, rgba(130, 93, 8, 0.96), rgba(79, 55, 4, 0.98));
    color: #fff4c9;
}

.wing-completion-overview-button-offer-gold:hover {
    border-color: rgba(255, 226, 126, 0.64);
    background: linear-gradient(180deg, rgba(158, 113, 10, 0.98), rgba(96, 66, 4, 0.99));
}

.wing-completion-overview-button-offer-diamond {
    border-color: rgba(134, 232, 255, 0.46);
    background: linear-gradient(180deg, rgba(19, 88, 118, 0.96), rgba(10, 56, 77, 0.98));
    color: #e5fbff;
}

.wing-completion-overview-button-offer-diamond:hover {
    border-color: rgba(182, 243, 255, 0.68);
    background: linear-gradient(180deg, rgba(24, 107, 143, 0.98), rgba(12, 70, 96, 0.99));
}

.wing-completion-overview-button-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.wing-completion-overview-button.is-disabled,
.wing-completion-overview-button.is-disabled:hover {
    opacity: 0.46;
    cursor: wait;
    transform: none;
    border-color: rgba(140, 233, 255, 0.12);
    background: rgba(12, 26, 34, 0.72);
    box-shadow: none;
}

.wing-completion-route-reveal {
    animation: wingCompletionRouteReveal 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wing-completion-route-reveal.wing-completion-route-locked {
    box-shadow:
        inset 0 0 0 1px rgba(255, 214, 137, 0.34),
        0 0 18px rgba(255, 176, 61, 0.34),
        0 0 30px rgba(255, 120, 180, 0.14);
}

.wing-completion-route-target {
    animation: wingCompletionTargetReveal 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wing-completion-route-target.wing-completion-route-locked {
    animation: wingCompletionLockedTarget 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wing-completion-route-phase-reset {
    animation: wingCompletionPhaseResetPulse 2.1s ease-in-out infinite;
}

@keyframes wingCompletionRouteReveal {
    0% {
        opacity: 0.45;
        transform: scale(0.9);
        box-shadow: 0 0 0 rgba(255, 210, 128, 0);
    }
    45% {
        opacity: 1;
        transform: scale(1.04);
        box-shadow: 0 0 22px rgba(255, 210, 128, 0.3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wingCompletionTargetReveal {
    0% {
        transform: translate(-50%, -50%) scale(1.18, 1.18) rotate(-7deg);
    }
    55% {
        transform: translate(-50%, -50%) scale(1.72, 1.72) rotate(2deg);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-1deg);
    }
}

@keyframes wingCompletionLockedTarget {
    0% {
        transform: translate(-50%, -50%) scale(1.24, 1.24) rotate(-6deg);
    }
    30% {
        transform: translate(-50%, -50%) scale(1.62, 1.62) rotate(3deg);
        box-shadow: 0 0 26px rgba(255, 164, 93, 0.32);
    }
    60% {
        transform: translate(-50%, -50%) scale(1.44, 1.44) rotate(-2deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(-1deg);
    }
}

@keyframes wingCompletionPhaseResetPulse {
    0%,
    100% {
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    }
    50% {
        box-shadow: 0 10px 26px rgba(255, 215, 138, 0.28), 0 0 26px rgba(140, 233, 255, 0.12);
    }
}