/* The vault opens in three seconds; the game owns playback and cancellation. */
body.tg-vault-celebrating .tg-reveal-verdict-success { visibility: hidden; }

.tg-vault-cinematic {
    --tg-cinematic-duration: 3000ms;
    --tg-vault-gold: #d8bc83;
    position: fixed;
    inset: 0;
    z-index: 65;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #f7eedb;
    background: #061412;
    pointer-events: none;
    isolation: isolate;
}

.tg-vault-cinematic-backdrop {
    position: absolute;
    inset: -3%;
    z-index: -2;
    background: linear-gradient(90deg, rgba(4, 16, 15, .89), rgba(4, 16, 15, .55) 50%, rgba(4, 16, 15, .89)),
        linear-gradient(0deg, #061412 2%, transparent 65%, rgba(6, 20, 18, .5)),
        url('/images/gang/noir-vault.webp') center 50% / cover;
    opacity: .8;
}

.tg-vault-cinematic::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 40%, rgba(164, 134, 76, .15), transparent 58%);
}

.tg-vault-cinematic-frame {
    position: absolute;
    inset: clamp(14px, 3vw, 42px);
    border: 1px solid rgba(216, 188, 131, .25);
}

.tg-vault-cinematic-frame::before,
.tg-vault-cinematic-frame::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 34px;
    border: 1px solid var(--tg-vault-gold);
}

.tg-vault-cinematic-frame::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.tg-vault-cinematic-frame::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

.tg-vault-cinematic-content {
    width: min(680px, calc(100% - 56px));
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: clamp(16px, 3vh, 28px);
}

.tg-vault-cinematic-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #d8bc83;
    font: 600 10px/1.5 'Manrope', 'Segoe UI', sans-serif;
    letter-spacing: .22em;
}

.tg-vault-cinematic-eyebrow span { width: 30px; height: 1px; background: currentColor; opacity: .55; }

.tg-vault-mechanism {
    --tg-vault-size: min(34vh, 270px);
    position: relative;
    width: var(--tg-vault-size);
    height: var(--tg-vault-size);
    margin: 6px 0 0;
    perspective: 950px;
}

.tg-vault-housing {
    position: absolute;
    inset: 0;
    border: 2px solid #827451;
    border-radius: 50%;
    background: #020a09;
    box-shadow: 0 0 0 6px #0c1c19, 0 0 0 7px rgba(216, 188, 131, .26), 0 24px 70px rgba(0, 0, 0, .6);
    transform-style: preserve-3d;
}

.tg-vault-interior {
    position: absolute;
    inset: 8%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(216, 188, 131, .4);
    border-radius: 50%;
    background: radial-gradient(ellipse, #b39251 -75%, #142b23 62%, #050f0d 100%);
    box-shadow: inset 0 0 28px #000, 0 0 24px rgba(237, 210, 145, .12);
}

.tg-vault-interior::after {
    content: '';
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(216, 188, 131, .25);
    transform: rotate(45deg);
}

.tg-vault-monogram {
    position: relative;
    z-index: 1;
    color: #f0d59d;
    font: 400 clamp(58px, 12vh, 106px)/1 Georgia, 'Times New Roman', serif;
    text-shadow: 0 0 24px rgba(234, 203, 139, .7);
}

.tg-vault-door {
    position: absolute;
    inset: 1%;
    border: 2px solid #b59a64;
    border-radius: 50%;
    background: repeating-conic-gradient(from 14deg, rgba(211, 188, 138, .025) 0deg 2deg, transparent 2deg 4deg),
        linear-gradient(135deg, #34433a 0%, #11241e 40%, #06110f 72%, #475044 100%);
    box-shadow: inset 0 0 0 5px #10231d, inset 0 0 0 6px #736a4c, 9px 7px 20px rgba(0, 0, 0, .6);
    transform-origin: 3% 50%;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.tg-vault-door-rim {
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(216, 188, 131, .5);
    border-radius: 50%;
    box-shadow: inset 0 0 0 9px rgba(0, 0, 0, .18), 0 0 0 3px rgba(4, 12, 10, .6);
}

.tg-vault-dial {
    position: absolute;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, #a88e5b 0deg 1deg, transparent 1deg 10deg);
    -webkit-mask: radial-gradient(transparent 65%, #000 66% 70%, transparent 71%);
    mask: radial-gradient(transparent 65%, #000 66% 70%, transparent 71%);
}

.tg-vault-dial-outer { inset: 10%; opacity: .8; }
.tg-vault-dial-inner { inset: 24%; opacity: .45; }

.tg-vault-wheel {
    position: absolute;
    inset: 34%;
    border: 5px solid #bda473;
    border-radius: 50%;
    background: radial-gradient(circle, #ead4a5 0 12%, #7d704f 14% 20%, transparent 22%);
    box-shadow: 0 4px 8px #020806, inset 0 2px 5px rgba(242, 225, 184, .2);
}

.tg-vault-wheel i {
    position: absolute;
    width: 50%;
    height: 5px;
    top: calc(50% - 2.5px);
    left: 50%;
    transform-origin: left center;
    background: linear-gradient(#ead6ac, #8f794f);
    border-radius: 3px;
}

.tg-vault-wheel i:nth-child(2) { transform: rotate(120deg); }
.tg-vault-wheel i:nth-child(3) { transform: rotate(240deg); }

.tg-vault-bolts { position: absolute; inset: 0; }
.tg-vault-bolts i {
    position: absolute;
    width: 10%;
    height: 4%;
    top: 48%;
    left: 0;
    background: linear-gradient(#c3ac7d, #615b40);
    border: 1px solid #0f1710;
    border-radius: 2px;
}
.tg-vault-bolts i:nth-child(2) { left: auto; right: 0; }
.tg-vault-bolts i:nth-child(3) { left: 45%; top: 3%; transform: rotate(90deg); }
.tg-vault-bolts i:nth-child(4) { left: 45%; top: auto; bottom: 3%; transform: rotate(90deg); }

.tg-vault-light {
    position: absolute;
    inset: -45%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(234, 211, 146, .24), rgba(204, 178, 111, .07) 40%, transparent 66%);
    opacity: 0;
}

.tg-vault-coordinate {
    position: absolute;
    top: 48%;
    color: rgba(216, 188, 131, .45);
    white-space: nowrap;
    font: 400 9px/1.5 'Manrope', 'Segoe UI', sans-serif;
    letter-spacing: .15em;
}
.tg-vault-coordinate-left { right: calc(100% + 36px); }
.tg-vault-coordinate-right { left: calc(100% + 36px); }

.tg-vault-cinematic-copy { position: relative; }
.tg-vault-cinematic-index {
    color: #d8bc83;
    font: 600 10px/1.5 'Manrope', 'Segoe UI', sans-serif;
    letter-spacing: .3em;
    margin-bottom: 8px;
}
.tg-vault-cinematic-copy h2 {
    margin: 0;
    color: #f7eedb;
    font: 400 clamp(36px, 5.7vw, 64px)/1.12 'Cormorant Garamond', Georgia, serif;
    letter-spacing: -.025em;
}
.tg-vault-cinematic-copy p {
    margin: 12px 0 0;
    color: #b6c1b6;
    font: 400 12px/1.6 'Manrope', 'Segoe UI', sans-serif;
    letter-spacing: .08em;
}
.tg-vault-progress { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.tg-vault-progress i { width: 7px; height: 7px; border: 1px solid rgba(216, 188, 131, .45); transform: rotate(45deg); }
.tg-vault-progress i.tg-vault-progress-complete { background: #d8bc83; border-color: #d8bc83; box-shadow: 0 0 14px rgba(216, 188, 131, .2); }

.tg-vault-cinematic-playing { animation: tg-vault-scene var(--tg-cinematic-duration) ease both; }
.tg-vault-cinematic-playing .tg-vault-cinematic-backdrop { animation: tg-vault-backdrop var(--tg-cinematic-duration) ease-out both; }
.tg-vault-cinematic-playing .tg-vault-door { animation: tg-vault-open var(--tg-cinematic-duration) cubic-bezier(.2, .65, .2, 1) both; }
.tg-vault-cinematic-playing .tg-vault-wheel { animation: tg-vault-unlock var(--tg-cinematic-duration) cubic-bezier(.5, 0, .25, 1) both; }
.tg-vault-cinematic-playing .tg-vault-dial-outer { animation: tg-vault-dial-turn var(--tg-cinematic-duration) ease-in-out both; }
.tg-vault-cinematic-playing .tg-vault-light { animation: tg-vault-illuminate var(--tg-cinematic-duration) ease both; }
.tg-vault-cinematic-playing .tg-vault-cinematic-copy { animation: tg-vault-title var(--tg-cinematic-duration) ease both; }

@keyframes tg-vault-scene {
    0% { opacity: 0; }
    9%, 88% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes tg-vault-backdrop {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
}
@keyframes tg-vault-unlock {
    0%, 8% { transform: rotate(0deg); }
    31%, 100% { transform: rotate(150deg); }
}
@keyframes tg-vault-dial-turn {
    0%, 5% { transform: rotate(0deg); }
    29%, 100% { transform: rotate(-70deg); }
}
@keyframes tg-vault-open {
    0%, 30% { transform: rotateY(0deg); }
    57%, 100% { transform: rotateY(-78deg); }
}
@keyframes tg-vault-illuminate {
    0%, 30% { opacity: 0; transform: scale(.75); }
    62%, 100% { opacity: 1; transform: scale(1.1); }
}
@keyframes tg-vault-title {
    0%, 31% { opacity: 0; transform: translateY(12px); }
    49%, 100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 520px) {
    .tg-vault-cinematic-eyebrow { font-size: 8px; letter-spacing: .15em; gap: 10px; }
    .tg-vault-cinematic-eyebrow span { width: 16px; }
    .tg-vault-coordinate { display: none; }
    .tg-vault-mechanism { --tg-vault-size: min(33vh, 210px); }
    .tg-vault-cinematic-copy p { font-size: 11px; }
}

@media (max-height: 520px) and (min-width: 600px) {
    .tg-vault-cinematic-content { flex-flow: row wrap; justify-content: center; gap: 24px; width: min(800px, calc(100% - 80px)); }
    .tg-vault-cinematic-eyebrow { width: 100%; }
    .tg-vault-mechanism { --tg-vault-size: min(45vh, 210px); }
    .tg-vault-cinematic-copy { width: 48%; }
    .tg-vault-cinematic-copy h2 { font-size: 40px; }
    .tg-vault-coordinate { display: none; }
    .tg-vault-progress { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .tg-vault-cinematic-playing,
    .tg-vault-cinematic-playing .tg-vault-cinematic-backdrop,
    .tg-vault-cinematic-playing .tg-vault-door,
    .tg-vault-cinematic-playing .tg-vault-wheel,
    .tg-vault-cinematic-playing .tg-vault-dial-outer,
    .tg-vault-cinematic-playing .tg-vault-light,
    .tg-vault-cinematic-playing .tg-vault-cinematic-copy { animation: none; }
    .tg-vault-cinematic-playing .tg-vault-door { display: none; }
    .tg-vault-cinematic-playing .tg-vault-light { opacity: 1; }
}