:root {
  --bg: #0a0a0b;
  --line: #2a2a2e;
  --text: #e9e7e2;
  --muted: #9a978f;
  --faint: #5e5c57;
  --silver: #f2f2f2;
  --stroke: #d9d9dc;
  --glow: rgba(235, 240, 255, 0.55);
  --ok: #cfe8d0;
  --err: #e7a7a1;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 15px; line-height: 1.65;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background-image: radial-gradient(1000px 640px at 50% 38%, #17181d 0%, transparent 65%);
  background-attachment: fixed;
  transition: background-color .8s;
}
body.lights-out { background-color: #000; background-image: none; }
body.lights-out .grain { opacity: .03; }
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--text); }
header, main, footer { position: relative; z-index: 1; }

/* ── top bar ── */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; width: 100%; max-width: 1100px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand span { font-family: var(--serif); font-weight: 700; font-size: 26px; letter-spacing: 0.08em; }
.rings { width: 38px; height: 19px; }
.rings circle { fill: none; stroke: var(--silver); stroke-width: 2.2; }
.top-right { display: flex; align-items: center; gap: 14px; }
.progress { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.progress b { color: var(--silver); font-weight: 500; }
.shop { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; transition: border-color .2s, background .2s; }
.shop:hover { border-color: var(--silver); background: #ffffff0d; }
.signin { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: #d6c496; border: 1px solid #5c5a54; padding: 8px 14px; border-radius: 999px; transition: border-color .2s, box-shadow .2s; }
.signin:hover { border-color: #b8a77a; box-shadow: 0 0 16px rgba(214, 196, 150, .25); }
body.lights-out .signin { opacity: .35; }

/* ── stage ── */
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 20px 10px; min-width: 0; }
.screen { width: 100%; max-width: 620px; text-align: center; animation: rise .6s ease both; }
.phase { animation: rise .6s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.eyebrow { font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 8vw, 60px); line-height: 1.05; margin: 0 0 22px; }
.story { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--silver); margin: 0 auto 20px; max-width: 520px; }
.story.dim { color: var(--muted); }
.sub { color: #c9c6bf; max-width: 460px; margin: -6px auto 22px; }
.fine { max-width: 420px; margin: 18px auto 0; font-size: 12px; line-height: 1.6; color: var(--faint); }
.fine-hint { margin: 12px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rings.big { width: 96px; height: 48px; display: block; margin: 0 auto 22px; filter: drop-shadow(0 0 10px var(--glow)); }

/* ── forms / buttons ── */
form.entry { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
input { flex: 1; min-width: 0; background: #0b0b0c; color: var(--text); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; font: inherit; font-size: 16px; outline: none; transition: border-color .2s; }
input:focus { border-color: #8a8a90; }
button[type="submit"], .ghost {
  background: var(--silver); color: #0a0a0b; border: 0; border-radius: 4px; padding: 0 22px;
  font: inherit; font-weight: 500; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  min-height: 48px; transition: transform .1s, box-shadow .2s;
}
button[type="submit"]:hover, .ghost:hover { box-shadow: 0 0 18px var(--glow); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .5; cursor: wait; }
.ghost { background: transparent; color: var(--silver); border: 1px solid #55555b; margin-top: 18px; }
.ghost.small { min-height: 38px; font-size: 11px; padding: 0 14px; color: var(--muted); border-color: var(--line); }
.msg { min-height: 1.4em; margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }
.shake { animation: shake .35s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }

/* ── line art ── */
.art { display: block; margin: 0 auto; overflow: visible; }
.art :is(rect, path, line, circle, polygon) { fill: none; stroke: var(--stroke); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.art { filter: drop-shadow(0 0 6px rgba(255,255,255,.12)); }

/* Level 1: door + keys */
.door-wrap { position: relative; width: 170px; margin: 0 auto 6px; }
.door { width: 170px; height: 255px; }
.door .panel-fill { fill: #101012; }
.door .glow-behind { fill: #fff; stroke: none; opacity: 0; transition: opacity .9s; }
.door .plate { fill: #141416; }
.door .hole { fill: var(--stroke); stroke: none; }
.door-panel { transform-box: view-box; transform-origin: 20px 150px; transition: transform 1s cubic-bezier(.6,.05,.3,1); }
.door.open .door-panel { transform: scaleX(.16) skewY(-6deg); }
.door.open .glow-behind { opacity: .9; }
.door.open { filter: drop-shadow(0 0 22px var(--glow)); }
#lockPlate { cursor: pointer; }
.door.target #lockPlate .plate { stroke: #fff; stroke-width: 3; }
.door.armed #lockPlate .plate { animation: armed 1.2s ease-in-out infinite; }
@keyframes armed { 50% { stroke: #fff; stroke-width: 3; } }
.door.rattle { animation: shake .35s; }
.inserted-key { position: absolute; left: calc(150 / 200 * 100% - 2px); top: calc(160 / 300 * 100% - 7px); width: 44px; height: 14px; opacity: 0; pointer-events: none; transform-origin: 0 50%; transform: translateX(10px); }
.inserted-key svg { width: 44px; height: 14px; overflow: visible; }
.inserted-key svg :is(circle, line, path) { fill: none; stroke: var(--silver); stroke-width: 2; }
.inserted-key.in { opacity: 1; transform: translateX(-2px); transition: transform .35s, opacity .2s; }
.inserted-key.turn { transform: translateX(-2px) rotateX(80deg); transition: transform .4s; }

.keypile { position: relative; width: 100%; max-width: 560px; height: 300px; margin: 6px auto 0; border-top: 1px solid #1f1f23; touch-action: none; }
.k {
  position: absolute; display: flex; align-items: center; gap: 2px; padding: 3px 4px; cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none; border-radius: 4px; transition: filter .15s;
}
.k svg { width: 30px; height: 11px; overflow: visible; flex: none; }
.k svg :is(circle, line, path) { fill: none; stroke: #a9a9ad; stroke-width: 1.8; }
.k span { font-size: 9px; line-height: 1; color: #8d8b85; font-family: var(--mono); background: #0d0d0f; border: 1px solid #2a2a2e; border-radius: 2px; padding: 1px 2px; }
.k:hover svg :is(circle, line, path), .k.sel svg :is(circle, line, path) { stroke: #fff; }
.k:hover span, .k.sel span { color: #fff; border-color: #77777c; }
.k.sel { filter: drop-shadow(0 0 6px var(--glow)); }
.k.drag { cursor: grabbing; z-index: 50; filter: drop-shadow(0 0 8px var(--glow)); transition: none; }
.k.back { transition: transform .35s ease; }
.k.used { opacity: 0; pointer-events: none; }

/* Level 2: room, note, case */
.room { width: 100%; max-width: 420px; height: auto; }
.room .beam { fill: rgba(255,255,255,.04); stroke: none; }
.room .floor { stroke: #3a3a3e; }
.room .seam { stroke-width: 1.2; opacity: .7; }
.room .hit { fill: transparent; stroke: none; }
.clickable { cursor: pointer; outline: none; }
.clickable rect:not(.hit), .clickable path { transition: stroke .2s; }
#caseClosed { animation: pulse 2.4s ease-in-out infinite; }
#caseClosed:hover, #caseClosed:focus-visible { animation: none; filter: drop-shadow(0 0 10px var(--glow)); }
@keyframes pulse { 50% { filter: drop-shadow(0 0 9px rgba(255,255,255,.45)); } }

.paper { background: #e9e5da; color: #1d1c1a; border-radius: 3px; box-shadow: 0 24px 50px -12px #000, inset 0 0 40px rgba(120,100,60,.18); }
.note { max-width: 460px; margin: 0 auto; padding: 26px 26px 20px; transform: rotate(-1.2deg); animation: slidein .6s cubic-bezier(.2,.9,.3,1.2) both; text-align: left; }
@keyframes slidein { from { transform: translateY(40px) rotate(4deg); opacity: 0; } to { transform: rotate(-1.2deg); opacity: 1; } }
.note-hint { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.35; margin: 0 0 18px; color: #2a2825; }
.note-lines { list-style: none; padding: 0; margin: 0; }
.note-lines li { font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: .14em; padding: 9px 0; border-top: 1px solid rgba(0,0,0,.12); }

.case-lock { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.case-top {
  display: flex; align-items: center; gap: 16px; padding: 22px 22px; border: 2px solid var(--stroke); border-radius: 12px;
  background: linear-gradient(180deg, #141416, #0e0e10); box-shadow: 0 0 18px rgba(255,255,255,.08); transition: transform .6s;
}
.latch { width: 22px; height: 40px; border: 2px solid var(--stroke); border-radius: 4px; transition: transform .35s ease; transform-origin: 50% 0; }
.case-top.open .latch { transform: rotateX(70deg) translateY(-6px); }
.case-top.open { box-shadow: 0 0 30px var(--glow); }
.wheels { display: flex; gap: 7px; }
.wheel {
  display: flex; flex-direction: column; align-items: center; width: 50px;
  background: linear-gradient(180deg, #070708, #19191c 30%, #19191c 70%, #070708);
  border: 1px solid #3a3a3f; border-radius: 7px; outline: none; touch-action: none; user-select: none; cursor: ns-resize;
}
.wheel:focus-visible { border-color: #8a8a90; box-shadow: 0 0 0 2px #ffffff18; }
.w-up, .w-down { background: none; border: 0; color: var(--faint); font-size: 11px; padding: 7px 0; width: 100%; cursor: pointer; }
.w-up:hover, .w-down:hover { color: var(--silver); }
.w-window { display: flex; flex-direction: column; align-items: center; height: 92px; justify-content: center; overflow: hidden; width: 100%; font-family: var(--serif); font-weight: 600; line-height: 1; border-top: 1px solid #222226; border-bottom: 1px solid #222226; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.w-prev, .w-next { font-size: 19px; color: #3d3c39; height: 25px; display: grid; place-items: center; }
.w-cur { font-size: 38px; color: var(--silver); height: 42px; display: grid; place-items: center; }
.wheel.tick .w-cur { animation: tick .14s ease; }
@keyframes tick { from { transform: translateY(var(--dir, -6px)); opacity: .5; } to { transform: none; opacity: 1; } }

/* Level 3: phone */
.phone {
  width: 260px; margin: 0 auto; padding: 22px 18px 24px; border-radius: 34px 34px 44px 44px;
  background: linear-gradient(160deg, #2a2b2f 0%, #17181b 45%, #0f1012 100%);
  border: 1px solid #34353a; box-shadow: 0 30px 60px -20px #000, inset 0 1px 0 #ffffff14, inset 0 -2px 6px #00000080;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.earpiece { width: 54px; height: 6px; margin: 0 auto 10px; border-radius: 6px; background: #08080a; box-shadow: inset 0 1px 2px #000; }
.brandmark { font-family: var(--serif); font-weight: 700; letter-spacing: .28em; font-size: 11px; color: #8d8d92; margin-bottom: 10px; }
.lcd { background: linear-gradient(180deg, #a9b79b, #93a284); border-radius: 8px; padding: 8px 10px 6px; box-shadow: inset 0 2px 8px #00000066, 0 0 0 4px #0b0b0d, 0 0 0 5px #2c2d31; font-family: "VT323", ui-monospace, monospace; color: #1b2416; text-align: left; }
.lcd-top { display: flex; justify-content: space-between; font-size: 14px; line-height: 1; opacity: .75; }
.lcd-title { font-size: 26px; line-height: 1.1; margin: 6px 0 8px; letter-spacing: .04em; }
.slots { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.slots span { width: 34px; height: 40px; display: grid; place-items: center; font-size: 34px; line-height: 1; border-bottom: 3px solid #1b2416; }
.slots span.active { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { border-bottom-color: transparent; } }
.lcd-soft { display: flex; justify-content: space-between; font-size: 16px; opacity: .8; }
.lcd.bad { animation: shake .35s; }
.lcd.calling .slots span { border-bottom-color: transparent; }
.nav { display: flex; align-items: center; justify-content: space-between; margin: 16px 2px 12px; }
.nav button { width: 64px; height: 34px; border-radius: 17px; border: 0; cursor: pointer; font-size: 18px; box-shadow: inset 0 1px 0 #ffffff30, 0 2px 4px #000; transition: transform .06s; }
.nav .call { background: linear-gradient(180deg, #4f8f5a, #2f5f37); color: #e8ffe9; }
.nav .end { background: linear-gradient(180deg, #8f4f4f, #5f2f2f); color: #ffeaea; }
.nav button:active, .key:active, .key.down { transform: translateY(1px) scale(.97); filter: brightness(1.25); }
.dpad { width: 56px; height: 34px; border-radius: 17px; background: radial-gradient(circle at 50% 40%, #3a3b40, #1c1d20); box-shadow: inset 0 1px 0 #ffffff20, 0 2px 4px #000; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 10px; }
.key { height: 46px; border-radius: 14px; border: 0; cursor: pointer; color: #ececee; background: linear-gradient(180deg, #3b3c41, #232428); box-shadow: inset 0 1px 0 #ffffff26, 0 2px 3px #000; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; transition: transform .06s; }
.key b { font-family: var(--mono); font-weight: 500; font-size: 18px; }
.key small { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #9a9aa0; margin-top: 3px; min-height: 9px; }

/* Level 4: voicemail, bottle, dark */
.machine { width: 200px; height: auto; margin-bottom: 8px; }
.machine .led { fill: #e05555; stroke: none; animation: led 1s steps(2) infinite; }
@keyframes led { 50% { opacity: .15; } }
.machine .reel { transform-box: fill-box; transform-origin: center; }
.machine.playing .reel { animation: spin 1.4s linear infinite; stroke-dasharray: 8 6; }
@keyframes spin { to { transform: rotate(360deg); } }
.vm-label { font-family: "VT323", monospace; font-size: 20px; letter-spacing: .1em; color: #e05555; margin: 0 0 14px; }
.voicemail { font-family: var(--serif); font-style: italic; font-size: 23px; line-height: 1.45; color: var(--silver); max-width: 500px; margin: 0 auto 18px; min-height: 3em; }
.voicemail .caret { display: inline-block; width: 2px; height: 1em; background: var(--silver); vertical-align: -0.12em; margin-left: 2px; animation: blink 1s steps(2) infinite; }
.bottle-wrap { animation: rise .6s ease both; }
.bottle-btn { background: none; border: 0; cursor: pointer; padding: 6px; }
.bottle { width: 70px; height: 140px; animation: drop .9s cubic-bezier(.4,1.6,.6,1) both, pulse 2.4s 1s ease-in-out infinite; }
@keyframes drop { from { transform: translateY(-220px) rotate(-30deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
.bottle .scroll { fill: #e9e5da; stroke: none; opacity: .85; }
.bottle .scroll-lines { stroke: #555; stroke-width: 1.2; }
.bottle .cork { fill: #8a6a48; stroke: none; }

.flicker { animation: flicker .9s steps(1) both; }
@keyframes flicker { 0% { opacity: 1; } 10% { opacity: .1; } 20% { opacity: 1; } 35% { opacity: 0; } 45% { opacity: .6; } 60%, 100% { opacity: 0; } }

.flashlight { --x: -300px; --y: -300px; position: relative; max-width: 760px; overflow: hidden; margin: 0 auto; cursor: none; touch-action: none; border-radius: 4px; }
.morse { padding: 26px 18px 34px; border-radius: 3px; text-align: center; }
.paper-dark { background: #060606; color: #0a0a0a; border: 1px solid #0f0f10; }
.morse.lit {
  position: absolute; inset: 0; background: #e9e5da; color: #1d1c1a; pointer-events: none;
  transform-origin: var(--x) var(--y); transform: scale(var(--zoom, 1));
  -webkit-mask-image: radial-gradient(circle var(--r, 95px) at var(--x) var(--y), #000 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(circle var(--r, 95px) at var(--x) var(--y), #000 0%, #000 40%, transparent 100%);
}
.morse-head { font-family: var(--serif); font-weight: 700; letter-spacing: .3em; font-size: 15px; margin: 0 0 14px; }
.morse-code { margin: 18px 0 6px; }
.morse-svg { display: block; width: 100%; height: auto; overflow: visible; }
.morse-svg :is(circle, rect) { fill: currentColor; }
.morse-svg .sep { stroke: currentColor; stroke-width: .35; opacity: .45; }

.door-pad { max-width: 300px; margin: 22px auto 0; }
.pad-display {
  font-family: "VT323", monospace; font-size: 32px; letter-spacing: .32em; text-indent: .32em; white-space: nowrap; color: #9fe0a8; background: #050806;
  border: 1px solid #1d2a1f; border-radius: 4px; padding: 6px 8px; min-height: 48px; box-shadow: inset 0 0 12px #000, 0 0 12px rgba(120,220,140,.08);
}
.pad-display.bad { color: #e07070; animation: shake .35s; }
.pad-display.good { color: #c9ffd0; text-shadow: 0 0 8px #7fe08f; }
.pad-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pad-keys button {
  min-height: 48px; border-radius: 6px; border: 1px solid #26262a; background: #0e0e10; color: #c8c8cc; font: inherit; font-size: 18px; cursor: pointer;
  box-shadow: 0 0 10px rgba(255,255,255,.04), inset 0 1px 0 #ffffff10; padding: 0; letter-spacing: 0;
}
.pad-keys button:hover { border-color: #55555b; color: #fff; }
.pad-keys .fn { font-size: 12px; letter-spacing: .14em; }
.pad-keys .ent { background: #1b2a1d; color: #bff0c6; border-color: #2e4a32; min-height: 48px; padding: 0; }

/* finish */
.finish h1 { margin-bottom: 12px; }
.member { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver); font-variant-numeric: lining-nums; }
.code-label { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; margin: 22px 0 4px; color: var(--muted); }
.code { font-size: 30px; letter-spacing: 0.14em; color: var(--silver); margin: 0 0 18px; text-shadow: 0 0 12px var(--glow); user-select: all; }
body.flash-in { animation: flashin 1.4s ease both; }
@keyframes flashin { 0% { background-color: #fff; } 100% { background-color: var(--bg); } }

/* footer */
footer { text-align: center; padding: 18px 20px 30px; transition: opacity .6s; }
body.lights-out footer, body.lights-out .topbar { opacity: .35; }
.spots { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); font-variant-numeric: lining-nums; }
.tag { margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--muted); }

@media (max-width: 560px) {
  .topbar { padding: 14px 16px; }
  .brand span { font-size: 22px; }
  .rings { width: 32px; height: 16px; }
  .top-right { gap: 10px; }
  .progress, .shop { font-size: 11px; letter-spacing: 0.12em; }
  .shop, .signin { padding: 7px 11px; }
  .signin { font-size: 11px; letter-spacing: 0.12em; }
  .top-right { gap: 8px; }
  .progress, .shop, .signin { white-space: nowrap; }
  .shop span { display: none; }
  .stage { padding: 12px 16px; }
  form.entry { flex-direction: column; }
  .story { font-size: 20px; }
  .keypile { height: 330px; }
  .note { padding: 20px 18px 16px; }
  .note-hint { font-size: 19px; }
  .note-lines li { font-size: 17px; letter-spacing: .1em; }
  .case-top { gap: 8px; padding: 16px 10px; }
  .latch { width: 14px; height: 32px; }
  .wheel { width: 46px; }
  .wheels { gap: 5px; }
  .pad-display { font-size: 28px; letter-spacing: .22em; text-indent: .22em; }
  .code { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.inserted-key svg { transform: scaleX(-1); }
[data-screen="escape"] { max-width: 760px; }

/* finish: text list opt-in */
.textlist { width: 100%; max-width: 460px; margin: 6px auto 0; padding: 20px 18px; border: 1px solid var(--line); border-radius: 8px; text-align: left; animation: rise .6s .3s ease both; }
.tl-title { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--silver); margin: 0 0 12px; text-align: center; }
.tl-row { display: flex; gap: 8px; }
.tl-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 10.5px; line-height: 1.55; color: var(--faint); cursor: pointer; }
.tl-consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; padding: 0; accent-color: #d9d9dc; }
.tl-done { margin: 0; text-align: center; color: var(--ok); font-size: 13px; }
@media (max-width: 560px) { .tl-row { flex-direction: column; } }
.textlist .msg { min-height: 0; margin-top: 8px; }

/* finish: perks */
.perks { max-width: 440px; margin: 4px auto 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.perks-title { margin: 0 0 10px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); text-align: center; }
.perks ul { list-style: none; margin: 0; padding: 0; }
.perks li { padding: 9px 0; border-top: 1px solid #1f1f23; color: #c9c6bf; font-size: 13.5px; line-height: 1.5; }
.perks li:first-child { border-top: 0; }
.perks b { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--silver); display: block; }

/* ── Level 5: hallway + Master lock ── */
.hall { width: 100%; max-width: 440px; height: auto; }
.hall .frame { stroke: #2a2a2e; }
.hall .floor, .hall .rail { stroke: #3a3a3e; stroke-width: 1.4; }
.hall .lamp { stroke-width: 3; filter: drop-shadow(0 0 6px #fff); }
.hall .hit { fill: transparent; stroke: none; }
.hall .exit-sign { fill: #e05555; stroke: none; font: 600 9px var(--mono); letter-spacing: .2em; text-anchor: middle; filter: drop-shadow(0 0 4px #e05555); }
.hall .chain { stroke-width: 1.4; stroke-dasharray: 2.5 1.5; }
.hall .padlock { fill: #141416; }
#exitDoor { animation: pulse 2.4s ease-in-out infinite; }
#exitDoor:hover, #exitDoor:focus-visible { animation: none; filter: drop-shadow(0 0 10px var(--glow)); }

.exit-door { max-width: 420px; margin: 0 auto 18px; padding: 18px 16px; border: 2px solid var(--stroke); border-radius: 4px; background: linear-gradient(180deg, #141416, #0d0d0f); box-shadow: inset 0 0 30px #000; }
.engrave-big { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 40px; letter-spacing: .12em; color: #cfcfd2; text-shadow: 0 1px 0 #000, 0 -1px 0 #3a3a3e; }
.engrave-small { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 20px; color: #a9a9ad; }

.master { width: 210px; margin: 0 auto; }
.shackle-svg { display: block; width: 120px; height: 70px; margin: 0 auto -6px; overflow: visible; }
.shackle-svg path { fill: none; stroke: #c9c9cd; stroke-width: 12; stroke-linecap: butt; transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.master.open .shackle-svg path { transform: translateY(-22px); }
.master-body { position: relative; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, #3a3b40, #1a1b1e 60%, #111214); border: 1px solid #45464c; box-shadow: 0 20px 40px -14px #000, inset 0 1px 0 #ffffff22; }
.dial-wrap { position: relative; width: 174px; height: 174px; margin: 0 auto; touch-action: none; cursor: grab; outline: none; border-radius: 50%; }
.dial-wrap:focus-visible { box-shadow: 0 0 0 2px #ffffff40; }
.dial { width: 100%; height: 100%; display: block; }
#dialFace { transition: transform .08s linear; }
.dial-rim { fill: #0d0d0f; stroke: #5a5a60; stroke-width: 3; }
.dial .tk { stroke: #8d8d92; stroke-width: 1.2; }
.dial .tk.big { stroke: #e9e9ec; stroke-width: 2; }
.dial .tn { fill: #e9e9ec; font: 600 12px var(--mono); text-anchor: middle; dominant-baseline: middle; }
.dial-hub { fill: #1d1e21; stroke: #4a4a50; stroke-width: 2; }
.dial-pointer { position: absolute; left: 50%; top: -10px; width: 0; height: 0; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 11px solid #e05555; filter: drop-shadow(0 0 4px #e05555); }

.dial-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 4px; }
.dial-ctrl .ghost.small { margin: 0; min-width: 48px; }
.dial-now { font-family: var(--serif); font-weight: 600; font-size: 34px; min-width: 56px; color: var(--silver); font-variant-numeric: lining-nums tabular-nums; }
.combo-slots { display: flex; justify-content: center; align-items: center; gap: 8px; font-family: "VT323", monospace; font-size: 30px; color: #9fe0a8; margin: 6px 0 10px; }
.combo-slots span { min-width: 40px; padding: 2px 6px; border-bottom: 2px solid #2e4a32; }
.combo-slots i { font-style: normal; color: var(--faint); }
.combo-slots.bad { color: #e07070; animation: shake .35s; }
.dial-actions { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.dial-actions .ghost { margin: 0; }
.dial-actions .pull { background: var(--silver); color: #0a0a0b; border: 0; border-radius: 4px; padding: 0 24px; font: inherit; font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; min-height: 48px; cursor: pointer; }
.dial-actions .pull:hover { box-shadow: 0 0 18px var(--glow); }
@media (max-width: 560px) { .engrave-big { font-size: 34px; } .engrave-small { font-size: 18px; } }
.perks b { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.enter-room { display: inline-block; margin: 0 0 18px; padding: 14px 26px; background: var(--silver); color: #0a0a0b; border-radius: 4px; text-decoration: none; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.enter-room:hover { box-shadow: 0 0 18px var(--glow); }

/* public "The Founders Room" button */
.club-pill {
  position: relative; z-index: 2; align-self: center; display: inline-flex; align-items: center; gap: 10px;
  margin: 0 auto 4px; padding: 9px 18px 9px 14px; border-radius: 999px; text-decoration: none; color: var(--silver);
  border: 1px solid #5c5a54; background: linear-gradient(180deg, #1a1a1d, #0e0e10);
  box-shadow: 0 0 0 1px #00000080 inset, 0 0 18px rgba(214, 196, 150, .10); transition: box-shadow .25s, border-color .25s;
}
.club-pill:hover { border-color: #b8a77a; box-shadow: 0 0 22px rgba(214, 196, 150, .28); }
.lock-ic { width: 13px; height: 15px; flex: none; }
.lock-ic path, .lock-ic rect { fill: none; stroke: #d6c496; stroke-width: 1.6; }
.club-name { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; }
.club-sub { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: #b8a77a; border-left: 1px solid #3a3a3e; padding-left: 10px; }
body.lights-out .club-pill { opacity: .35; }
@media (max-width: 560px) { .club-name { font-size: 15px; } .club-sub { font-size: 9px; } }

/* discreet admin entry, bottom left */
.admin-corner { position: fixed; left: 14px; bottom: 14px; z-index: 5; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; opacity: .18; transition: opacity .2s; }
.admin-corner:hover, .admin-corner:focus-visible { opacity: .7; }
.admin-corner svg { width: 11px; height: 13px; fill: none; stroke: var(--muted); stroke-width: 1.4; }
body.lights-out .admin-corner { display: none; }

/* puzzle 2: make "Look at the lock" easy to spot */
#noteDown { border-color: #cfcfd4; color: #fff; box-shadow: 0 0 14px rgba(235, 240, 255, .35), inset 0 0 10px rgba(235, 240, 255, .08); animation: glowPulse 2.4s ease-in-out infinite; }
#noteDown:hover { box-shadow: 0 0 26px rgba(235, 240, 255, .6), inset 0 0 12px rgba(235, 240, 255, .12); }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 10px rgba(235, 240, 255, .25), inset 0 0 8px rgba(235, 240, 255, .06); } 50% { box-shadow: 0 0 24px rgba(235, 240, 255, .55), inset 0 0 12px rgba(235, 240, 255, .12); } }
@media (prefers-reduced-motion: reduce) { #noteDown { animation: none; } }

/* eligibility note on the start screen */
.eligibility { margin-top: 10px; padding-top: 10px; border-top: 1px solid #1f1f23; font-size: 11px; letter-spacing: .02em; color: var(--muted); }

@media (max-width: 380px) { .topbar .progress { display: none; } }

.fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }