/* Physical doors. Release availability remains owned by app.js. */
.vault {
  width: 100%;
  min-width: 0;
  min-height: 300px;
  aspect-ratio: 1.25;
  border: clamp(10px, 1.5vw, 22px) solid #27312e;
  outline: 1px solid #5c6862;
  background: #030605;
  box-shadow: 0 2px 0 #7c8880 inset, 0 -4px 1px #111815 inset, 0 22px 50px #020403;
  isolation: isolate;
  perspective: 1300px;
}
.vault-door {
  display: grid;
  place-items: center;
  background: #26312c;
  border: 1px solid #64736a;
  box-shadow: 0 0 0 5px #0a100d inset, 0 0 0 7px #4b5950 inset, 0 14px 22px #050906 inset;
  transition: transform 1.5s cubic-bezier(.3, .05, .2, 1);
}
.vault-door.left,
.vault-door.right {
  justify-content: stretch;
  background:
    radial-gradient(circle at 11% 7%, #8c978f 0 2px, #121b16 3px 5px, transparent 6px),
    radial-gradient(circle at 89% 7%, #8c978f 0 2px, #121b16 3px 5px, transparent 6px),
    radial-gradient(circle at 11% 93%, #8c978f 0 2px, #121b16 3px 5px, transparent 6px),
    radial-gradient(circle at 89% 93%, #8c978f 0 2px, #121b16 3px 5px, transparent 6px),
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 4px),
    linear-gradient(110deg, #35423a, #1b2720 62%, #29382e);
}
.vault-door.left { border-right: 5px solid #030705; transform-origin: left center; }
.vault-door.right { border-left: 5px solid #030705; transform-origin: right center; }
.vault-door::before {
  content: "";
  position: absolute;
  inset: 12% 15%;
  border: 1px solid #647369;
  background: linear-gradient(135deg, #0c1710, #1c2c22 80%);
  box-shadow: 0 3px 10px #020503 inset, 0 1px 0 #7a887b, 0 -2px 0 #0b120d;
}
.vault-door::after {
  content: "";
  top: 20%;
  bottom: auto;
  width: clamp(10px, 1.4vw, 22px);
  height: 13%;
  opacity: 1;
  border: 1px solid #7b877d;
  border-radius: 2px;
  background: linear-gradient(90deg, #111b15, #6a776d 36%, #2c3a30 63%, #101911);
  box-shadow: 0 0 0 2px #101811, 0 130px 0 -1px #455348, 0 130px 0 1px #101811;
}
.vault-door.left::after { right: auto; left: 2%; }
.vault-door.right::after { left: auto; right: 2%; }
.vault-door span {
  z-index: 1;
  color: #bac8b9;
  font-size: clamp(58px, 9.5vw, 150px);
  letter-spacing: .04em;
  text-shadow: 0 -2px 0 #030805, 0 1px 0 #ffffff26;
  opacity: .85;
}
.vault-door.left span,
.vault-door.right span { margin: -5% 0 0; }
.vault-hardware { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vault-handle {
  position: absolute;
  top: 45%;
  width: clamp(9px, 1.2vw, 18px);
  height: 20%;
  border: 1px solid #9ba79a;
  border-radius: 3px;
  background: linear-gradient(90deg, #142017, #82907f 40%, #334733 80%, #111d14);
  box-shadow: 5px 5px 3px #030805, 0 -7px 0 3px #19271b, 0 7px 0 3px #19271b;
}
.vault-handle.left { right: 57%; }
.vault-handle.right { left: 57%; }
.vault-attempt {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vault-attempt:focus-visible { outline: 3px solid var(--orchid); outline-offset: -5px; }
.vault-lock {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(54px, 8vw, 108px);
  aspect-ratio: 1;
  margin-top: 19%;
  border: 3px solid #71806d;
  border-radius: 50%;
  background: radial-gradient(circle, #354433 0 30%, #101c12 32% 50%, #4c5e47 52% 56%, #18251a 58%);
  box-shadow: 0 0 0 5px #08100a, 0 0 0 6px #596952, 3px 7px 9px #020503;
  transition: border-color .2s, filter .2s;
}
.vault-lock::before {
  content: "";
  width: 19%;
  height: 25%;
  position: absolute;
  top: 24%;
  border: 3px solid #d7dfcd;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.vault-lock span { width: 36%; height: 29%; margin-top: 15%; border: 1px solid #e9f1df; border-radius: 2px; background: #a0ad94; box-shadow: 0 2px 3px #050a06; }
.vault-lock::after {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 47%, #7d8f8b 47% 53%, transparent 53%),
    linear-gradient(30deg, transparent 47.5%, #7d8f8b 47.5% 52.5%, transparent 52.5%),
    linear-gradient(150deg, transparent 47.5%, #7d8f8b 47.5% 52.5%, transparent 52.5%);
  opacity: .55;
  pointer-events: none;
}
.vault-hud {
  position: absolute;
  top: 4%;
  left: 4%;
  right: 4%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 9px;
  letter-spacing: .16em;
  color: #c9d4cf;
  font-variant-numeric: tabular-nums;
}
.vault::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
.vault.open::after, .vault[data-open="true"]::after { display: none; }
.vault-prompt {
  padding: 7px 12px;
  border: 1px solid #59674f;
  background: #0b130de8;
  color: #d0ddc4;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: .12em;
}
.vault-prompt > span { margin-inline: 8px; color: var(--orchid); }
.vault-attempt:hover .vault-lock { border-color: var(--orchid); filter: brightness(1.15); }
.vault-attempt:active .vault-lock { filter: brightness(1.35); }
.vault-feedback {
  position: absolute;
  bottom: 4%;
  left: 4%;
  right: 4%;
  z-index: 5;
  margin: 0;
  color: #bccbb5;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  pointer-events: none;
}
.vault-trying .vault-door.left { animation: vault-left-attempt .75s ease-out; }
.vault-trying .vault-door.right { animation: vault-right-attempt .75s ease-out; }
.vault-trying .vault-lock { animation: vault-lock-attempt .75s ease-out; }
.vault-trying { animation: vault-frame-thud .4s ease-out; }
.vault-trying .vault-feedback { color: #f1d5f7; }
.vault-trying .vault-prompt { border-color: var(--orchid); color: #f1d5f7; background: #27142c; }
.vault.open .vault-hardware,
.vault[data-open="true"] .vault-hardware,
.vault.open .vault-attempt,
.vault[data-open="true"] .vault-attempt,
.vault.open .vault-feedback,
.vault[data-open="true"] .vault-feedback { display: none; }
/* The doors strain against the lock, then slam back. They never open here. */
@keyframes vault-left-attempt {
  0%, 100% { transform: translateX(0) rotateY(0); }
  22% { transform: translateX(-7px) rotateY(-4deg); }
  40% { transform: translateX(2px) rotateY(1deg); }
  58% { transform: translateX(-3px) rotateY(-1.5deg); }
  76% { transform: translateX(0) rotateY(.4deg); }
}
@keyframes vault-right-attempt {
  0%, 100% { transform: translateX(0) rotateY(0); }
  22% { transform: translateX(7px) rotateY(4deg); }
  40% { transform: translateX(-2px) rotateY(-1deg); }
  58% { transform: translateX(3px) rotateY(1.5deg); }
  76% { transform: translateX(0) rotateY(-.4deg); }
}
@keyframes vault-lock-attempt {
  0%, 100% { transform: rotate(0); }
  22% { transform: rotate(16deg); }
  42% { transform: rotate(-6deg); }
  60% { transform: rotate(4deg); }
  78% { transform: rotate(-1deg); }
}
@keyframes vault-frame-thud {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(1px); }
  45% { transform: translateY(-1px); }
}
@media (min-width: 721px) {
  .vault { min-height: 200px; aspect-ratio: 16 / 9; }
  .vault-hud { font-size: 12px; top: 5%; left: 5%; right: 5%; }
  .vault-lock { margin-top: 16%; }
  .vault-attempt { gap: 20px; }
  .vault-feedback { bottom: 5%; left: 9%; right: 9%; }
  .vault-door::after { box-shadow: 0 0 0 3px #101811, 0 clamp(100px, 21vw, 320px) 0 -1px #455348, 0 clamp(100px, 21vw, 320px) 0 2px #101811; }
}
@media (prefers-reduced-motion: reduce) {
  .vault-door, .vault-lock { transition: none; }
  .vault-trying, .vault-trying .vault-door, .vault-trying .vault-lock { animation: none; }
  .vault-trying .vault-lock { border-color: var(--orchid); filter: brightness(1.35); }
  .vault-trying .vault-feedback { background: #27142c; outline: 1px solid var(--orchid); }
}