/* Open rails, sliding bars and a lid strap use the iron from concept A. */
#lock {
  --iron: url('assets/forge-reference.png');
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 30px 20px 12px;
  filter: none;
}
#lock::before, #lock::after {
  content: '';
  position: absolute;
  inset: 15px auto -4px 0;
  width: 24px;
  height: auto;
  border: 0;
  border-radius: 4px;
  background: var(--iron) 23% 77% / 2350% 144%;
  opacity: 1;
  mix-blend-mode: normal;
  box-shadow: 2px 4px 3px #000c;
  z-index: 2;
  pointer-events: none;
}
#lock::after {
  left: auto;
  right: 0;
  background-position: 76% 77%;
}
#lock .mechanism {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#lock .plate-row {
  height: 34px;
  margin: 8px 0;
  border: 1px solid #59412b;
  border-top-color: #af8760;
  border-radius: 1px;
  background: #35281d;
  box-shadow: 0 4px 0 #211910, 1px 6px 2px #0b0704, 2px 9px 4px #0008;
}
#lock .holes { inset: 0 5px; display: grid; grid-template-columns: repeat(7,1fr); }
#lock .hole {
  width: 100%; height: 100%; border-radius: 0; box-shadow: none;
  background: var(--iron) 33.24% 33.6% / 1780% 940%;
}
#lock .selected { outline: 1px solid #c59a64; }
#lock .plate-row.selected::before { content: none; }
#lock .pin { top: 5px; width: 19px; height: 19px; margin-left: -9.5px; }
#lock .pick-tool { top: calc(47px + var(--selected-row)*42px); }
.fastener {
  position: absolute; left: 50%; top: -54px;
  width: 140px; height: 86px;
  transform: translateX(-50%); pointer-events: none;
}
.fastener span { position: absolute; }
.hasp {
  left: 42px;
  top: 0;
  width: 56px;
  height: 88px;
  z-index: 1;
  background: url("assets/forged-hasp.svg") center / contain no-repeat;
  filter: drop-shadow(2px 3px 2px #120d09bc);
}
.bolt {
  left: 13px; top: 58px; width: 94px; height: 16px;
  background: url("assets/forged-bolt.svg") center / contain no-repeat;
  filter: drop-shadow(1px 2px 1px #18110ccc);
}
.sleeve {
  left: 4px; top: 52px; width: 35px; height: 32px;
  border: 2px solid #48382d;
  border-top-color: #9b8266;
  border-radius: 3px 2px 3px 1px;
  background: var(--iron) 23% 61% / 2100% 920%;
  box-shadow: inset 2px 0 1px #b49c7544, inset -3px -2px 2px #191411b8, 1px 3px 2px #0009;
}
.lock-open .bolt { transform: translateX(-64px); }
.lock-open .pick-tool, .released-caption, .lock-open .locked-caption,
.lock-open .journal { display: none; }
.lock-open .released-caption { display: inline; }
#victory {
  position: absolute; inset: auto; left: calc(50% + 295px);
  top: calc(var(--chest-seam) - var(--header-height) + 10px);
  width: 240px; padding: 0; align-items: flex-start; text-align: left;
  background: none; backdrop-filter: none; text-shadow: 0 2px 5px #000;
}
#victory h2 { font-size: 35px; }
#victory p { font-size: 20px; margin: 12px 0; }
#victory button { margin: 3px 0; }
@media(max-width:1190px) and (min-width:761px) {
  #victory { left:auto; right:3%; width:190px; }
}
@media(max-width:760px) {
  #lock .plate-row {height:28px; margin:6px 0;}
  #lock .pin {top:3px;}
  #lock .pick-tool {top:calc(43px + var(--selected-row)*34px);}
  #victory {top:1155px; left:8%; width:84%;}
}
/* Bolt carrier is riveted to the left rail of the chest body. */
.fastener::before {
  content: '';
  position: absolute;
  left: calc(70px - var(--half-frame, 155px) + 10px);
  right: 112px;
  top: 61px;
  height: 21px;
  border-top: 9px solid #4d4032;
  border-left: 9px solid #43372b;
  border-radius: 4px 0 0 0;
  filter: drop-shadow(0 1px #a08562) drop-shadow(1px 3px 2px #000);
}
.lock-open .guidance, .lock-open .scene-caption small {display:none;}
@media(max-width:760px){#lock{--half-frame:130px}}

/* Surface finishes follow the chest, independently of plate state. */
#lock {
  --finish: url("assets/finish-hammer.svg");
  --temper: saturate(.8) contrast(1.08);
  --edge: #ab8b69;
}
[data-scene="barracks"] #lock {
  --finish: url("assets/finish-blued.svg");
  --temper: grayscale(.88) sepia(.48) hue-rotate(164deg) saturate(1.6) contrast(1.08);
  --edge: #899bac;
}
[data-scene="swamp"] #lock {
  --finish: url("assets/finish-bronze.svg");
  --temper: sepia(.85) saturate(1.45) brightness(1.18);
  --edge: #bd9a60;
}
[data-scene="mine"] #lock {
  --finish: url("assets/finish-ore.svg");
  --temper: saturate(.7) contrast(1.2);
  --edge: #a87b53;
}
[data-scene="crypt"] #lock {
  --finish: url("assets/finish-inlay.svg");
  --temper: grayscale(.94) contrast(1.16);
  --edge: #b4b5bd;
}
#lock::before, #lock::after, #lock .sleeve {
  background-image: var(--finish), var(--iron);
  background-size: 60px 30px, 2350% 144%;
  background-position: center, 23% 77%;
  filter: var(--temper);
}
#lock::after { background-position: center, 76% 77%; }
#lock .sleeve { background-position: center, 23% 61%; background-size: 55px 26px, 2100% 920%; }
#lock .plate-row { border-top-color: var(--edge); }
#lock .hole { filter: var(--temper); }
#lock .holes::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--finish) left center / 80px 32px repeat;
  mask: radial-gradient(ellipse 32% 37% at center, transparent 84%, black 100%) left center / calc(100% / 7) 100% repeat-x;
  pointer-events: none;
}
#lock .hasp { filter: var(--temper) drop-shadow(2px 3px 2px #120d09bc); }
#lock .bolt { filter: var(--temper) drop-shadow(1px 2px 1px #18110ccc); }
#lock .hasp::after, #lock .bolt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--finish) center / 64px 26px repeat;
  mask: var(--outline) center / contain no-repeat;
}
#lock .hasp { --outline: url("assets/forged-hasp.svg"); }
#lock .bolt { --outline: url("assets/forged-bolt.svg"); }