.armory { position: absolute; inset: 0; overflow: hidden; --ly: 230px; }
.arm-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 36px; transform-origin: 50% 100%; }
.arm-box { position: relative; z-index: 2; line-height: 0; will-change: transform; filter: drop-shadow(0 8px 0 rgba(0,0,0,.45)); }
.arm-box canvas { display: block; image-rendering: pixelated; }
.arm-halo { position: absolute; left: calc(50% - 320px); top: calc(var(--ly) - 210px); width: 640px; height: 360px; background: radial-gradient(closest-side, color-mix(in srgb, var(--lc) 42%, transparent), transparent); opacity: 0; transition: opacity .45s; pointer-events: none; }
.armory.lit .arm-halo { opacity: .55; }
.armory.open .arm-halo { opacity: 1; animation: throb 1.4s infinite; }
.arm-rays { position: absolute; left: calc(50% - 400px); top: calc(var(--ly) - 400px); width: 800px; height: 800px; opacity: 0; transition: opacity .6s; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--lc) 38%, transparent) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent); mask-image: radial-gradient(closest-side, #000 18%, transparent); }
.armory.rays .arm-rays { opacity: 1; animation: arm-spin 16s linear infinite; }
@keyframes arm-spin { to { transform: rotate(360deg); } }

.arm-reel { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 1.2s cubic-bezier(.2,.8,.3,1); }
.arm-window { background: color-mix(in srgb, var(--bg) 90%, transparent); box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), 0 -6px 0 0 color-mix(in srgb, var(--lc) 60%, var(--ink)), 0 6px 0 0 color-mix(in srgb, var(--lc) 60%, var(--ink)); }
.arm-marker { background: var(--mc, var(--accent)); box-shadow: 0 0 0 2px var(--ink), 0 0 16px var(--mc, var(--accent)); }
.armory.zoom1 .arm-reel { transform: scale(1.16); }
.armory.slowmo .arm-reel { transform: scale(1.32); transition-duration: .9s; }
.armory::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.7)); opacity: 0; transition: opacity .8s; }
.armory.zoom1::after, .armory.slowmo::after { opacity: 1; }
.armory.slowmo .arm-marker { width: 6px; margin-left: -3px; }

.arm-slot { position: relative; flex: none; }
.arm-sil { position: absolute; inset: 0; opacity: 0; transition: opacity .3s steps(3); }
.arm-strip.masked .arm-sil { opacity: 1; transition: none; }
.arm-sil .card { --rc: #34363f !important; margin: 0; }
.arm-sil .card-name { visibility: hidden; }
.arm-strip .card.gold { --g: #f2c23a; --gd: #8a5c10; transform: scale(1.12); z-index: 1;
  box-shadow: 0 -4px 0 0 var(--g), 0 4px 0 0 var(--g), -4px 0 0 0 var(--g), 4px 0 0 0 var(--g), 0 -8px 0 0 var(--gd), 0 8px 0 0 var(--gd), -8px 0 0 0 var(--gd), 8px 0 0 0 var(--gd), 0 0 28px 6px color-mix(in srgb, var(--g) 45%, transparent);
  animation: arm-gold .6s steps(2) infinite, arm-pop .3s steps(3); }
@keyframes arm-gold { 50% { --g: #fff1b0; } }
@keyframes arm-pop { from { transform: scale(1.3); } }
.arm-strip.goldwin .card:not(.gold) { filter: brightness(.4) saturate(.4); transition: filter .3s steps(3); }
.arena.forced .armory:not(.lit) .arm-halo { z-index: 2; opacity: .5; background: radial-gradient(closest-side, rgba(242, 196, 90, .4), transparent); animation: throb 1s infinite; }

.arm-lock { position: absolute; inset: 0; z-index: 6; overflow: hidden; }
.arm-door { position: absolute; top: 0; bottom: 0; width: 50%; background: repeating-linear-gradient(0deg, #16181e 0 8px, #1d2028 8px 16px); }
.arm-door.l { left: 0; box-shadow: inset -6px 0 0 0 #0a0b0e, inset 6px 0 0 0 #2a2e38; }
.arm-door.r { right: 0; box-shadow: inset 6px 0 0 0 #0a0b0e, inset -6px 0 0 0 #2a2e38; }
.arm-door::before { content: ''; position: absolute; top: 0; bottom: 0; width: 24px; background: repeating-linear-gradient(0deg, #f2c23a 0 12px, #121317 12px 24px); }
.arm-door.l::before { right: 6px; }
.arm-door.r::before { left: 6px; }
.arm-door::after { content: ''; position: absolute; left: 40px; right: 40px; top: 50%; height: 6px; margin-top: -3px; background: #2a2e38; box-shadow: 0 -60px 0 0 #2a2e38, 0 60px 0 0 #2a2e38, 0 -120px 0 0 #2a2e38, 0 120px 0 0 #2a2e38; }
.arm-red { position: absolute; inset: 0; z-index: 2; background: #e3262b; opacity: 0; pointer-events: none; }
.arm-lock.alarm .arm-red { animation: arm-red .8s steps(1) infinite; }
@keyframes arm-red { 50% { opacity: .16; } }
.arm-sweep { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 240px; background: linear-gradient(90deg, transparent, rgba(255,60,50,.34) 45%, rgba(255,120,90,.5) 50%, rgba(255,60,50,.34) 55%, transparent); transform: translateX(-240px); opacity: 0; pointer-events: none; }
.arm-lock.alarm .arm-sweep { opacity: 1; animation: arm-sweep 1.15s linear infinite; }
@keyframes arm-sweep { to { transform: translateX(960px); } }
.arm-pad { position: absolute; z-index: 4; left: 50%; top: 50%; width: 224px; margin: -128px 0 0 -112px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: #0d0f13;
  box-shadow: 0 -4px 0 0 #3a3f4a, 0 4px 0 0 #3a3f4a, -4px 0 0 0 #3a3f4a, 4px 0 0 0 #3a3f4a, 0 -8px 0 0 var(--ink), 0 8px 0 0 var(--ink), -8px 0 0 0 var(--ink), 8px 0 0 0 var(--ink); }
.arm-msg { width: 100%; text-align: center; font-size: 16px; line-height: 20px; color: #ff4a3d; letter-spacing: 1px; }
.arm-lock.alarm .arm-msg { animation: blink .5s steps(1) infinite; }
.arm-lock.granted .arm-msg { color: #4fe06a; }
.arm-code { display: flex; gap: 8px; }
.arm-digit { width: 34px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: #4a2020; background: #170a0b; box-shadow: inset 0 0 0 3px #2a1214; }
.arm-digit.set { color: #ff5a4a; }
.arm-lock.granted .arm-digit.set { color: #4fe06a; background: #0a170c; box-shadow: inset 0 0 0 3px #12301a; }
.arm-keys { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; }
.arm-key { height: 26px; display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; color: #9aa0ad; background: #22252e; box-shadow: inset 0 -3px 0 0 #121419; }
.arm-key.on { color: #0b0b0e; background: #ff5a4a; box-shadow: inset 0 3px 0 0 #b02a22; transform: translateY(2px); }

.flip.climbing .back-art { transition: box-shadow .12s; }
.arm-sil canvas { filter: brightness(2.4); }