:root {
  color-scheme: dark;
  font: 100%/1.5 "Segoe UI", sans-serif;
  color: #faf4e7;
  background: #12100f;
  --muted: #d1c4ae;
  --gold: #f4ce85;
  --surface: #201b18;
  --line: #ffffff19;
  --radius: 22px;
}
* { box-sizing: border-box; }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 19% 6%, #38251c 0%, transparent 48%),
              radial-gradient(ellipse at 92% 15%, #29271a 0%, transparent 38%), #12100f;
}
h1, h2, h3, p { margin: 0; }
.board {
  width: min(100% - 48px, 1160px);
  margin: auto;
  padding: 36px 0 16px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
}
.mast, .intro, .gate, .tile, .empty, .upload-panel {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, #2d2520, #1b1715 72%);
  box-shadow: 0 16px 34px #0005, inset 0 1px #ffffff0b;
}
.mast {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  background: #191614bf;
}
h1 {
  font: 600 clamp(2.5rem, 5vw, 4.7rem)/.93 Georgia, serif;
  letter-spacing: -.055em;
}
.mast h1 span { color: var(--gold); }
.intro, .gate { grid-column: span 6; padding: clamp(24px, 4vw, 54px); }
.full, .empty, footer { grid-column: 1 / -1; }
h2 { font: 500 clamp(2.4rem, 5vw, 4.5rem)/1.06 Georgia, serif; letter-spacing: -.045em; }
.intro p { margin-top: 12px; color: var(--muted); font-size: 1.05rem; }
button, .download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .7em 1.05em;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe2a3, #e5b86a);
  box-shadow: 0 5px 14px #0003, inset 0 1px #fff7;
  color: #20150d;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow .18s, filter .18s, transform .18s;
}
button:hover, .download:hover { filter: brightness(1.07); transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: wait; transform: none; }
.quiet, .keypad button {
  color: #f5eddf;
  border-color: var(--line);
  background: linear-gradient(180deg, #3d342a, #28211c);
  box-shadow: inset 0 1px #ffffff0d;
}
:focus-visible { outline: 2px solid #fff2c7; outline-offset: 4px; }
[hidden] { display: none !important; }
.gate { display: grid; align-content: center; gap: 12px; }
.gate label, .upload-form label { font-weight: 600; }
.gate input, .upload-form input {
  width: 100%;
  min-width: 0;
  padding: .66em .8em;
  border: 1px solid #b19a725c;
  border-radius: 10px;
  background: #141110;
  color: #faf4e7;
  font: inherit;
  box-shadow: inset 0 2px 7px #0006;
}
#error { color: #ffc4b7; }
.locked { min-height: 100svh; align-content: center; }
.lock-intro {
  grid-column: span 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 325px;
  background: radial-gradient(ellipse at 80% 2%, #654024, transparent 65%),
              linear-gradient(125deg, #362721, #211916 83%);
}
.lock-intro h1 { font-size: clamp(2.2rem, 5vw, 5rem); text-wrap: balance; text-shadow: 0 4px 24px #0006; }
.lock-body {
  grid-column: span 5;
  align-self: center;
  justify-self: center;
  width: min(100%, 365px);
  margin-top: 92px;
  padding: 20px;
  position: relative;
  border-color: #c9a36c70;
  background: linear-gradient(145deg, #4f3b2b, #28201b 64%);
  box-shadow: 0 24px 60px #0008, 0 0 44px #d99e3733, inset 0 1px #ffe9b84f;
}
.shackle {
  position: absolute;
  width: 58%;
  height: 92px;
  bottom: calc(100% - 3px);
  left: 21%;
  border: 16px solid #c6a375;
  border-top-color: #eed3a4;
  border-left-color: #e0bc88;
  border-bottom: 0;
  border-radius: 90px 90px 0 0;
  box-shadow: 0 -2px 25px #ebb56d37, inset 0 6px 0 #82603e;
}
.lock-body input {
  text-align: center;
  font-size: 1.55rem;
  letter-spacing: .4em;
  color: #ffe0a2;
  font-variant-numeric: tabular-nums;
}
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.keypad button { padding: .42em .5em; }
.keypad [data-key="0"] { grid-column: 2; }
.upload-panel {
  padding: clamp(20px, 3vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
  background: radial-gradient(ellipse at 0 0, #4c3324, transparent 75%), #211a17;
}
.upload-panel h3 { font: 500 1.75rem/1.1 Georgia, serif; margin-bottom: 8px; }
.upload-panel p { color: var(--muted); }
.upload-form { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; }
.upload-form label, .upload-form input, .upload-form progress, .upload-form [role="status"] { grid-column: 1 / -1; }
.upload-form input::file-selector-button {
  margin-right: .7em;
  border: 0;
  padding: .35em .55em;
  border-radius: 6px;
  color: #20150d;
  background: var(--gold);
  font: inherit;
  cursor: pointer;
}
.upload-form [role="status"]:empty { display: none; }
.tile { grid-column: span 6; min-width: 0; overflow: hidden; }
.frame {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #382f27;
  color: var(--muted);
  text-decoration: none;
  overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s; }
.frame:hover img { transform: scale(1.04); }
.frame:focus-visible { outline-offset: -5px; }
.strip { padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.strip h3 { font-size: clamp(1.05rem, 2vw, 1.45rem); overflow-wrap: anywhere; }
.strip p, footer { color: var(--muted); font-size: .9rem; }
.empty, footer { padding: 16px; }
.transfer { display: grid; padding: 0 18px 18px; gap: 8px; }
progress { width: 100%; accent-color: var(--gold); }
.upload-form progress { height: 2em; }
.upload-wave { color: #fff; }
.upload-wave-word { display: inline-block; }
.upload-status-readable {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.transfer .cancel { justify-self: start; }
@media (max-width: 760px) {
  .board { width: calc(100% - 24px); padding-top: 16px; gap: 12px; }
  .lock-intro, .lock-body, .tile { grid-column: 1 / -1; }
  .lock-intro { min-height: 190px; }
  .lock-body { margin-top: 82px; }
  .shackle { height: 80px; }
  .upload-panel { grid-template-columns: 1fr; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame img, button, .download { transition: none; }
  .frame:hover img, button:hover, .download:hover { transform: none; }
}