/* Vault Code: a brushed-steel vault door with a guess log. */
.vc-vault { width: min(100%, 440px); margin: 6px auto 0; padding: 14px; border-radius: 24px; background: linear-gradient(160deg, #E9EEF7, #C3CCDD); border: 1px solid rgba(255,255,255,.6); box-shadow: inset 0 2px 0 rgba(255,255,255,.7), var(--glass-shadow); }
:root[data-theme="dark"] .vc-vault { background: linear-gradient(160deg, #2F3A52, #1C2436); border-color: rgba(255,255,255,.08); }
.vc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vc-row { display: grid; grid-template-columns: 22px auto auto 1fr; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 14px; background: rgba(255,255,255,.55); }
:root[data-theme="dark"] .vc-row { background: rgba(255,255,255,.06); }
.vc-n { font: 700 12px var(--body); color: var(--muted); }
.vc-digits { display: flex; gap: 4px; }
.vc-d { width: 30px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #1E2A44; color: #F5D88A; font: 800 20px var(--display); }
.vc-pegs { display: grid; grid-template-columns: repeat(3, 12px); gap: 4px; }
.vc-peg { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(30, 42, 68, .15); vertical-align: middle; }
.vc-peg.exact { background: #1B9E5E; box-shadow: 0 0 6px rgba(27, 158, 94, .6); }
.vc-peg.near { background: #F0B423; box-shadow: 0 0 6px rgba(240, 180, 35, .6); }
.vc-txt { font: 600 12px var(--body); color: var(--muted); text-align: right; }
.vc-entry { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.vc-slot { width: 46px; height: 54px; display: grid; place-items: center; border-radius: 12px; border: 2px dashed rgba(30, 42, 68, .3); font: 800 28px var(--display); color: var(--text); }
.vc-slot.full { border: 2px solid #1E2A44; background: #1E2A44; color: #F5D88A; animation: vc-in .15s ease-out; }
@keyframes vc-in { from { transform: scale(.7); } }
.vc-pad { display: grid; grid-template-columns: repeat(5, 54px); justify-content: center; gap: 8px; margin-top: 14px; }
.vc-key { height: 54px; border-radius: 14px; border: 1px solid var(--glass-edge); background: var(--tile-top); box-shadow: var(--lift); font: 800 24px var(--display); color: var(--text); cursor: pointer; position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.vc-key.used { opacity: .45; }
.vc-key.crossed { color: var(--muted); }
.vc-key.crossed::after { content: ''; position: absolute; left: 18%; right: 18%; top: 50%; height: 3px; background: #D43C3C; transform: rotate(-35deg); border-radius: 2px; }
@media (max-width: 400px) { .vc-txt { display: none; } .vc-row { grid-template-columns: 18px auto 1fr; } }
@media (prefers-reduced-motion: reduce) { .vc-slot.full { animation: none; } }
:root[data-theme="dark"] .vc-slot { border-color: rgba(255, 255, 255, .3); }
:root[data-theme="dark"] .vc-slot.full { border-color: #0E1526; background: #0E1526; }
:root[data-theme="dark"] .vc-peg { background: rgba(255, 255, 255, .15); }