:root{color-scheme:dark;font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:#111d24;color:#e8eeeb}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 22%,#263740 0%,#14222a 53%,#111d24 90%)}
.shell{max-width:1440px;margin:auto;padding:0 clamp(15px,4vw,70px);min-height:100vh;display:flex;flex-direction:column}
header,footer,.identity,.heading{display:flex;align-items:center;justify-content:space-between}
header{min-height:66px;border-bottom:1px solid #42535a}.identity{gap:9px;font-size:18px;font-weight:650}
a{color:inherit;text-decoration:none}a:hover,.exit:hover{color:#f7dc95}
a:focus-visible,button:focus-visible{outline:2px solid #ffe08a;outline-offset:3px}
header a,footer a{min-height:44px;display:inline-flex;align-items:center}header>a:last-child,.exit{font:inherit;font-size:14px}
main{flex:1;padding:clamp(22px,3.2vw,45px) 0}
h1{font-size:clamp(31px,4vw,54px);line-height:1.16;letter-spacing:.035em;margin:0}
footer span{font-family:ui-monospace,monospace;font-size:12px;color:#abb8b7}
.room{display:flex;flex-direction:column}.empty{flex:1;min-height:45vh;display:grid;place-content:center;justify-items:center;color:#bac6c1}.empty svg{width:105px;color:#cbad77}
.exit{border:1px solid #6a7b80;background:transparent;padding:9px 13px;border-radius:5px;cursor:pointer;min-height:44px}
footer{min-height:55px;border-top:1px solid #42535a;color:#aab9ba;font-size:12px}
@media(max-width:620px){.shell{padding:0 12px}header{min-height:56px}}

/* The lock plate uses the same face, lid and latch as the homepage number boxes. */
.vault {
  --brass: #e1bc81;
  --ink: #f1ede2;
  --soft: #b1c0c8;
  --rule: #879ca53b;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: url("/assets/night-sky.svg") center top / 1100px 760px repeat,
              radial-gradient(ellipse at 61% 9%, #1a303c, #0e1e2a 44%, #0b1520 92%);
  color: var(--ink);
}
.vault .shell {
  max-width: 1540px;
  min-height: 100svh;
  padding-inline: clamp(16px, 5.4vw, 92px);
}
.vault header { min-height: 72px; border-color: var(--rule); }
.vault .identity { letter-spacing: .07em; }
.vault .identity img { display: block; }
.home-link { gap: 7px; color: #d4dce0; }
.home-link svg, .quantity svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.45;
  stroke-linecap: round; stroke-linejoin: round;
}
.vault main { padding: clamp(22px, 3.2vh, 40px) 0 clamp(24px, 3.5vh, 47px); }
.heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.vault h1 {
  margin: 0 0 6px;
  font: 500 clamp(38px, 4.05vw, 59px)/1.18 "Songti SC", STSong, "Noto Serif CJK SC", SimSun, serif;
  letter-spacing: .035em;
}
.caption { display: grid; font-size: 14px; line-height: 1.65; }
.caption p { grid-area: 1 / 1; margin: 0; }
.prompt { color: var(--soft); }
#message { color: #efcf95; }
#message:not(:empty) + .prompt { visibility: hidden; }
.quantity {
  display: flex; align-items: center; gap: 12px; padding-bottom: 3px;
  color: #e4cfab; font: 15px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.quantity svg { color: #c5a77a; width: 16px; height: 16px; }
.dash { margin-inline: .55em; color: #998c74; }
.case {
  position: relative; isolation: isolate; border-radius: 9px; border: 1px solid #616258;
  padding: clamp(12px, 1.5vw, 22px);
  background: linear-gradient(135deg, #40505a, #202f39 21%, #192731 74%, #3a484d);
  box-shadow: inset 0 0 0 3px #17252e, 0 8px 28px #030c152c;
}
.case::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none;
  --pin: radial-gradient(circle, #b5a083 0 1px, #43443f 1.5px 2.2px, transparent 2.6px);
  background: var(--pin) left top, var(--pin) right top, var(--pin) left bottom, var(--pin) right bottom;
  background-size: 8px 8px; background-repeat: no-repeat;
}
#field {
  margin: 0; padding: clamp(10px, 1.25vw, 19px);
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  column-gap: clamp(4px, 1vw, 16px); row-gap: clamp(4px, .65vh, 10px);
  overflow: clip; overflow-anchor: none;
  border: 1px solid #53646c; border-radius: 3px;
  background: radial-gradient(#6b87902a .7px, transparent .9px) 0 0 / 10px 10px,
              linear-gradient(120deg, #172d36, #122731 70%, #142a33);
  box-shadow: inset 0 1px 9px #050e1699;
}
.box {
  --x: 0px; --y: 0px; --angle: -2deg;
  position: relative; display: grid; place-items: center;
  min-width: 0; height: clamp(46px, 5.9vh, 59px); padding: 0;
  border: 0; background: transparent; border-radius: 6px; cursor: pointer;
  transform-style: preserve-3d;
  touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
}
/* Small offsets keep the collection scattered without reducing the tap targets. */
.box:nth-child(4n+1) { --x: -3%; --y: 2px; --angle: -5deg; }
.box:nth-child(4n+2) { --x: 4%; --y: -2px; --angle: 4deg; }
.box:nth-child(7n+3) { --x: -5%; --y: 1px; --angle: 2deg; }
.box:nth-child(7n+5) { --x: 4%; --y: 2px; --angle: -3deg; }
.box:nth-child(5n) { --x: 2%; --angle: 1deg; }
.crate {
  position: relative; display: grid; place-items: center; pointer-events: none;
  width: min(82%, 59px); height: clamp(40px, 5.25vh, 49px);
  color: #f3e3c6; font: 500 clamp(14px, 1.18vw, 18px)/1 var(--mono);
  font-variant-numeric: tabular-nums; transform-style: preserve-3d;
  transform: translate(var(--x), var(--y)) rotate(var(--angle));
}
.crate::before, .crate::after { content: ""; position: absolute; pointer-events: none; }
.crate::before {
  inset: 7px 1px 3px; border: 1px solid #8a7757; border-bottom: 2px solid #796a4f;
  border-radius: 3px 3px 5px 5px; background: linear-gradient(112deg, #433e34, #35342f 78%);
  box-shadow: inset 0 -3px #272926, 0 3px 4px #030a1080;
}
.crate::after {
  inset: 3px 1px auto; height: 7px; border: 1px solid #a68e65;
  border-radius: 4px 4px 1px 1px; background: linear-gradient(#71634c, #524c41);
  transform: translateZ(3px) perspective(35px) rotateX(26deg); transform-origin: center bottom;
}
.crate-base { position: absolute; inset: 7px 1px 3px; transform-style: preserve-3d; }
.crate-base::before, .crate-base::after { position: absolute; content: ""; pointer-events: none; }
.crate-base::before {
  inset: 0; border: 1px solid #89785b; border-radius: 4px;
  background: radial-gradient(circle, #998669 0 1px, transparent 1.4px) 4px 4px / 4px 4px no-repeat,
              radial-gradient(circle, #998669 0 1px, transparent 1.4px) right 4px bottom 4px / 4px 4px no-repeat,
              linear-gradient(122deg, #534b3e, #39362f);
  box-shadow: inset 0 0 0 2px #393831;
  transform: translateZ(-6px) rotateY(180deg); backface-visibility: hidden;
}
.crate-base::after {
  inset: auto 0 0; height: 6px; border-radius: 0 0 2px 2px;
  background: linear-gradient(#8d7959, #4e473a);
  transform: rotateX(90deg); transform-origin: center bottom;
}
.tag {
  position: relative; display: block; margin-top: 7px; transform: translateZ(1px);
  backface-visibility: hidden;
}
.tag::before {
  content: ""; position: absolute; height: 2px; width: 8px; left: calc(50% - 4px); top: -5px;
  border-radius: 0 0 2px 2px; background: #9f8965;
}
#field[aria-busy="true"] .box { cursor: progress; }
.box[data-picked] { z-index: 2; }
.box[data-picked] .crate::before, .box:focus-visible .crate::before {
  background: #594c38; border-color: #e5c285;
}
.vault .box:focus-visible { outline: none; }
.vault .box:focus-visible .crate { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 5px; }
@media (hover: hover) {
  #field:not([aria-busy]) .box:hover .crate::before { background: #554b3b; border-color: var(--brass); }
}
.vault footer { min-height: 50px; border-color: var(--rule); font-size: 11px; color: #a7b6be; }
@media (max-width: 900px) {
  #field { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 630px) {
  .vault .shell { padding-inline: clamp(10px, 3.5vw, 21px); }
  .vault header { min-height: 57px; }
  .vault .identity { font-size: 15px; gap: 5px; }
  .vault .identity img { width: 29px; height: 29px; }
  .vault main { padding-block: 20px; }
  .heading { margin-bottom: 13px; }
  .vault h1 { font-size: 37px; }
  .caption { font-size: 13px; }
  .quantity { font-size: 13px; gap: 6px; }
  .case { padding: 7px; }
  .case::after { inset: 1px; }
  #field { grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 8px 3px; gap: 3px 1px; }
  .box { height: 45px; }
  .crate { width: min(88%, 44px); height: 40px; font-size: 14px; }
}
@media (max-width: 383px) {
  #field { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .vault header { min-height: 58px; }
  .vault main { padding-block: 16px; }
  .heading { margin-bottom: 12px; }
  .case { padding: 12px; }
  #field { padding-block: 10px; row-gap: 4px; }
}