/* Readable HUD and forged steel. Game-state calculations remain in engine.js. */
:root{--bg:#161311;--panel:#211c19;--cream:#f1e6d6;--muted:#c8b9a8;--line:#66574a;--gold:#dab98b}
body{--stage-height:max(940px,100svh);min-height:940px;background:#161311;color:var(--cream)}
.world{min-height:940px}
.vignette{background:linear-gradient(0deg,#100d0bf5,transparent 28%,transparent 75%,#100d0ba0),linear-gradient(90deg,#100d0b90,transparent 34%,transparent 65%,#100d0b90)}
[data-level="2"] .room-shed{filter:saturate(.65)}
header{height:72px;border-color:#d8bb9133;background:linear-gradient(90deg,#17110b65,transparent);margin:0 3%;}
.brand{font-size:17px;color:#f1e6d6}
main{height:calc(var(--stage-height) - 72px)}
.scene-intro{display:block;top:20px}
.scene-intro .eyebrow{font-size:14px;letter-spacing:3px;color:#e5c9a4;margin-bottom:8px}
.scene-subtitle{display:none}
.bench-heading{top:66px;width:min(620px,94%);gap:12px}
.bench-heading .eyebrow{font-size:16px;letter-spacing:1.8px;color:#f1dfc5;margin-bottom:10px;font-weight:700}
.bench-heading h2{font-size:43px}
.difficulty{font-size:14px;color:#ead5b8}
.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){top:47%;transform:translate(-50%,-40%);width:410px;padding-bottom:35px}
.lock-case{width:310px;padding:29px 26px 13px;border-radius:38px 38px 12px 12px;border-color:#8b9297;background:repeating-linear-gradient(112deg,transparent 0 21px,#d3d7da18 22px,transparent 23px 47px),radial-gradient(ellipse at 0 10%,#b2b8bd66,transparent 42%),radial-gradient(ellipse at 94% 90%,#4a291eaa,transparent 38%),linear-gradient(125deg,#767d83,#363b40 24%,#1f2429 58%,#555c62 88%,#363436);box-shadow:0 0 0 3px #16191d,0 0 0 6px #62686d,6px 11px 7px #000b,14px 25px 28px #0009,inset 2px 2px 3px #e0e5e9a0,inset -6px -5px 12px #0d1014}
.lock-case:before{opacity:.48;mix-blend-mode:soft-light}
.lock-case:after{background:linear-gradient(90deg,#1c2025,#939ba1 24%,#454d55 70%,#181c22);border-color:#a1a5a9}
.engraving{color:#b5b9bf;text-shadow:0 -1px #080a0c;font-size:8px}
.rivet{background:radial-gradient(circle at 30% 20%,#d4d9de,#727b83 35%,#1c2229 70%);box-shadow:1px 2px 2px #000,inset 0 1px #d1d6da}
.mechanism{background:#111317;border-color:#7d858c;box-shadow:inset 0 4px 10px #000,0 1px #a5a6a8}
.plate-row{height:29px;margin:6px 0;background:linear-gradient(#b6a189,#82705b 15%,#554638 48%,#78634e 60%,#a78e6d 94%,#362a21);border-color:#b29c7d;box-shadow:0 3px 3px #000b,inset 0 1px #dfc8a8}
.plate-row:hover{background:linear-gradient(#c8b298,#937b60,#796249);border-color:#f5dec0}
.hole{background:radial-gradient(circle,#090b0e 45%,#292b30 66%,#b8aa96 85%,#383436);box-shadow:0 1px #c4b29c88}
.pin{top:5px}
.plate-number{font-size:12px;color:#f1ddc0}
.lock-bottom{color:#c0c4c8}.keyhole{background:#06080b}
.pick-tool{top:calc(75px + var(--selected-row,3)*35px)}
.pick-shaft,.pick-shaft:before{background:linear-gradient(#d6dbe2,#515964 45%,#9ea7af 65%,#252b32)}
.pick-handle:before{background:linear-gradient(#bfc6cc,#4d5660 40%,#969ca3)}
.tension-tool{background:linear-gradient(90deg,#3c444e,#c1c7ce 35%,#737d88 70%,#252c35)}
.tension-tool:after{background:linear-gradient(#bfc5cc,#4b5560)}
.scene-caption{display:flex;top:calc(100% + 13px);left:5px;right:5px;gap:7px;padding:13px 16px;background:#000b;border:1px solid #bcb0a43b;border-radius:4px;font-size:15px;letter-spacing:1px;font-weight:700;color:#f6eadb;box-shadow:0 8px 25px #0004}
.scene-caption .ornament-line{display:none}.scene-caption small{font-size:15px;letter-spacing:.5px;font-weight:600;color:#e3d5c4}
.journal,.guidance{position:absolute;top:29%;width:clamp(240px,23vw,350px);padding:20px;text-shadow:0 2px 6px #000;background:linear-gradient(90deg,#100d0bc9,#100d0b70);border-top:1px solid #c7ab7c55;border-bottom:1px solid #c7ab7c33}
.journal{right:3%;left:auto;bottom:auto;display:block}
.journal>.eyebrow{display:block;font-size:16px;letter-spacing:1.5px;color:#ebcfaa;margin:0}
.journal h3{display:block;font-size:68px;margin:14px 0 18px;color:#f2e2cb}
.story{display:block;font:500 30px/1.4 'Cormorant Garamond',Georgia,serif;color:#f1e5d6;margin:0}
.guidance{left:3%;top:34%;}
.tip{display:flex;border:0;margin:0 0 24px;padding:0;gap:10px}.tip-number{font-size:30px;color:#e5c394}.tip p{font-size:20px;line-height:1.65;color:#f0e2d0}
.hint-button{display:block;width:100%;font-size:18px;font-weight:600;letter-spacing:0;padding:17px 10px;background:#34271de8;color:#f6e4c9;border-color:#c3a37e}
.hint-button:hover{background:#503b2b}.hint-note{display:block;font-size:16px;line-height:1.6;color:#e1cdb6;margin:12px 0 0}
.bench-status{bottom:155px;width:min(680px,90%);background:#100c09c9;border:1px solid #d8bb9133;padding:12px 20px;border-radius:3px}
.bench-status #message{font-size:16px;color:#f4e8d8}.bench-status #aligned{font-size:15px}
.game-toolbar{position:absolute;bottom:58px;left:3%;right:3%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;min-height:82px;padding:14px 18px;background:linear-gradient(#2e241de6,#181311ed);border:1px solid #b89f7755;box-shadow:0 10px 30px #0006}
.inventory{position:static;display:flex;align-items:center;justify-content:flex-start;width:auto;margin:0;padding:0;gap:24px;animation:none}
.inventory>div{display:flex;flex-direction:column;gap:4px;font-size:12px;letter-spacing:.6px;color:#dfcfba;text-align:left;flex:none}
.inventory>div:first-child:before{display:none}
.inventory strong{font:26px/1.1 Georgia,serif;letter-spacing:1px;color:#f2d6b0}
.inventory>div:nth-child(2) strong{font-size:19px;line-height:29px}
.controls{position:static;transform:none;width:auto;padding:0;gap:18px;justify-content:center}
.control-group{gap:5px}.control-group button{width:36px;height:38px;background:#191412;border-color:#b6a08a;color:#f0e4d5;font-size:20px}
.control-group span,.reset span{font-size:13px;color:#f0dfc9;margin-left:4px}.reset{margin:0;font-size:24px}.reset span{display:inline}
.settings{display:flex;align-items:center;justify-content:flex-end;gap:8px}.settings .quiet{font-size:15px;color:#f0dfc9;padding:12px 8px;letter-spacing:0;white-space:nowrap}#locations-toggle{margin:0}.menu-count{display:inline;font-size:12px;margin-left:4px;color:#d7baa0}#sound{width:auto;font-size:15px}#sound:before{content:none}
footer{height:48px;left:3%;right:3%;font-size:11px;letter-spacing:.5px;color:#cfc0ae;gap:14px;padding:12px 0;border-color:#b8a38b55}
footer .text-button{font-size:12px;color:#e0cbb2}footer>span:last-child{font-size:10px}footer i{color:#c0a78b}
.locations{background:linear-gradient(90deg,#211a16fa,#171313fa)}.locations>.eyebrow{font-size:14px}.level strong{font-size:15px}.level small{font-size:13px;color:#ccbcaa}.level .number{color:#c5af96}.level.done:after{color:#e9c390}.aside-note p{color:#e0cbb2}.locations #about{font-size:13px}
dialog{background:linear-gradient(135deg,#30251f,#191411);box-shadow:0 0 0 4px #171210,0 0 0 5px #9a815650,0 30px 100px #000}dialog p:not(.eyebrow){color:#e2d2bf;font-size:15px}dialog .eyebrow{font-size:13px}.victory{background:radial-gradient(ellipse at center,#30231de8,#100c0bf0)}.victory p{color:#ead7c3}.primary{background:#3b2a20;color:#f5d7af}
@media(min-width:1600px){.journal,.guidance{width:340px}.journal{right:6%}.guidance{left:6%}.journal h3{font-size:82px}.story{font-size:34px}}
@media(max-width:1190px) and (min-width:761px){.game-toolbar{grid-template-columns:1fr 1fr;row-gap:16px}.controls{grid-column:1/-1;grid-row:1}.inventory{grid-column:1;grid-row:2}.settings{grid-column:2;grid-row:2}.bench-status{bottom:215px}.journal,.guidance{width:23%;padding:14px;left:2%}.journal{left:auto;right:2%}.story{font-size:26px}.journal h3{font-size:58px}.tip p{font-size:18px}.hint-button{font-size:17px}.hint-note{font-size:15px}.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){transform:translate(-50%,-40%) scale(.85);top:43%}footer>span:last-child{display:none}}
@media(max-width:760px){body{--stage-height:1580px;min-height:1580px}.world{min-height:1580px}.room{background-size:auto 1100px;background-repeat:no-repeat;background-position:center top}.world{background:#16110e}header{height:64px}.brand{font-size:14px}main{height:1516px}.scene-intro{top:20px}.scene-intro .eyebrow{font-size:12px}.bench-heading{top:57px}.bench-heading .eyebrow{font-size:13px;line-height:1.5;letter-spacing:1px}.bench-heading h2{font-size:36px}.difficulty{font-size:12px}.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){top:240px;transform:translateX(-50%);width:100%;padding-bottom:20px}.lock-case{width:260px;padding:27px 20px 12px}.plate-row{height:27px;margin:5px 0}.pin{top:4px}.pick-tool{top:calc(73px + var(--selected-row,3)*32px)}.scene-caption{left:6%;right:6%;font-size:13px;padding:12px 10px}.scene-caption small{font-size:13px}.bench-status{top:685px;bottom:auto;width:92%}.bench-status #message{font-size:14px}.guidance{top:770px;left:5%;right:5%;width:90%;padding:18px}.tip{margin-bottom:16px}.tip p{font-size:20px}.tip p br{display:none}.hint-button{font-size:18px}.hint-note{font-size:16px}.journal{top:1030px;left:5%;right:5%;width:90%;padding:18px}.journal>.eyebrow{font-size:14px}.journal h3{font-size:48px;margin:8px 0}.story{font-size:24px;line-height:1.35}.game-toolbar{bottom:70px;left:4%;right:4%;padding:14px 10px;display:flex;flex-wrap:wrap;gap:16px;justify-content:center}.controls{order:2;gap:13px;width:100%}.inventory{order:1;justify-content:space-around;width:100%;gap:12px}.inventory>div{font-size:11px;text-align:center}.inventory strong{font-size:23px}.settings{order:3;justify-content:center;width:100%;gap:20px}.settings .quiet{font-size:15px;padding:5px}.control-group span,.reset span{font-size:11px}.control-group button{width:31px;height:34px}.reset{gap:1px}footer{height:60px;justify-content:center;flex-wrap:wrap;gap:6px;font-size:10px;line-height:1.5;padding:8px 0}footer .text-button{font-size:12px}footer>span:last-child{display:none}.locations{width:min(350px,94%)}.locations>.eyebrow{display:block}.locations #about{font-size:13px}}
/* Reserve room for all seven plates and readable captions. */
@media(min-width:761px){body{--stage-height:max(1040px,100svh);min-height:1040px}.world{min-height:1040px}.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){top:calc(225px + (var(--stage-height) - 1040px)*.25);transform:translateX(-50%)}.journal{top:27%}.guidance{top:32%}}
@media(min-width:761px) and (max-width:1190px){.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){transform:translateX(-50%) scale(.85);transform-origin:top center}}
@media(max-width:760px){body{--stage-height:1770px;min-height:1770px}.world{min-height:1770px}main{height:1706px}.bench-status{top:735px}.guidance{top:820px}.journal{top:1080px}}
/* A shared image coordinate keeps the lock attached to the chest seam. */
body{--stage-height:max(1200px,100svh);--scene-height:calc(var(--stage-height) - 220px);--image-height:max(var(--scene-height),56.2799vw);--header-height:72px;--chest-seam:calc(var(--scene-height)*.5 - var(--image-height)*.033);min-height:1200px}
body[data-scene=crypt]{--chest-seam:calc(var(--scene-height)*.5 + var(--image-height)*.02)}
.world{min-height:1200px;background:#16110e}.room{height:var(--scene-height);bottom:auto;transform:none;background-size:cover;background-position:center}
.lock-logo{width:28px;height:34px;flex:none;color:#d9b98b;filter:drop-shadow(0 2px 2px #000)}
.scene-intro .eyebrow{font-weight:400;color:#d5c3a9}
.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){top:calc(var(--chest-seam) - var(--header-height) - 12px);left:50%;transform:translateX(-50%);transform-origin:top center}
.lock-scene:has(.plate-row:nth-child(6)),.lock-scene:has(.plate-row:nth-child(7)){transform:translateX(-50%) scale(.85)}
.lock-case{transform:none;box-shadow:0 0 0 3px #16191d,0 0 0 6px #62686d,3px 5px 4px #000c,7px 12px 14px #0008,inset 2px 2px 3px #e0e5e9a0,inset -6px -5px 12px #0d1014}
.lock-case:after{top:-64px;height:66px;width:44px;left:calc(50% - 22px);border-radius:8px 8px 2px 2px;border:2px solid #555b61;background:radial-gradient(circle at 50% 12px,#a2a7ac 0 3px,#272b30 4px 6px,transparent 7px),linear-gradient(90deg,#22262b,#737b82 20%,#434a52 48%,#252b31 80%,#5c6369);box-shadow:2px 3px 3px #000b,inset 0 1px #c2c6ca88}
.journal,.guidance{width:240px;padding:0;background:none;border:0;box-shadow:none;text-shadow:0 2px 5px #000,0 0 18px #000;top:calc(var(--chest-seam) - var(--header-height) + 10px)}
.guidance{left:calc(50% - 535px);right:auto}.journal{right:calc(50% - 535px);left:auto}
.journal>.eyebrow{font-size:12px;letter-spacing:1.8px;font-weight:500}.journal h3{font-size:52px;margin:12px 0 16px}.story{font:400 23px/1.5 'Cormorant Garamond',Georgia,serif;color:#eee0cc}
.tip{margin-bottom:20px;gap:10px}.tip-number{font-size:24px}.tip p{font-size:15px;line-height:1.8;font-weight:400}.hint-button{font-size:14px;font-weight:500;padding:13px 8px;background:#241a1190}.hint-note{font-size:12px;margin-top:10px}
@media(min-width:761px) and (max-width:1190px){.journal,.guidance{width:190px}.guidance{left:3%}.journal{right:3%}.story{font-size:21px}.journal h3{font-size:46px}.tip p{font-size:14px}.hint-button{font-size:13px}.lock-scene,.lock-scene:has(.plate-row:nth-child(7)),.lock-scene:has(.plate-row:nth-child(6)):not(:has(.plate-row:nth-child(7))){transform:translateX(-50%) scale(.78)}}
@media(max-width:760px){body{--stage-height:1840px;--scene-height:800px;--image-height:800px;--header-height:64px;min-height:1840px}.world{min-height:1840px}main{height:1776px}.room{background-size:auto 800px}.lock-logo{width:23px;height:29px}.lock-scene:has(.plate-row:nth-child(6)),.lock-scene:has(.plate-row:nth-child(7)){transform:translateX(-50%)}.lock-case:after{top:-50px;height:52px;width:36px;left:calc(50% - 18px)}.bench-status{top:815px}.guidance,.journal{width:84%;left:8%;right:8%;padding:0}.guidance{top:925px}.journal{top:1155px}.tip p{font-size:16px}.hint-button{font-size:15px}.hint-note{font-size:13px}.story{font-size:22px}.journal h3{font-size:45px}.scene-intro .eyebrow{font-weight:400}}
@media(min-width:1101px){.pick-shaft{width:113px}.pick-handle{left:88px;width:64px}}

/* Lid seams measured in each 1672 × 941 scene, relative to image center. */
body[data-scene="barracks"] { --chest-seam: calc(var(--scene-height)*.5 - var(--image-height)*.005); }
body[data-scene="swamp"]   { --chest-seam: calc(var(--scene-height)*.5 + var(--image-height)*.011); }
body[data-scene="mine"]    { --chest-seam: calc(var(--scene-height)*.5 + var(--image-height)*.052); }
body[data-scene="barracks"] .room-shed { background-image:url("assets/barracks.jpg"); filter:none; }
body[data-scene="swamp"] .room-shed { background-image:url("assets/swamp.jpg"); filter:none; }
body[data-scene="mine"] .room-shed { background-image:url("assets/mine.jpg"); filter:none; }

.scene-caption .gesture-tip { display: none; }
#rows { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 600px) {
  .game-toolbar {
    position: fixed; z-index: 20; inset: auto 0 0;
    display: grid; grid-template-columns: 1fr auto; gap: 3px 8px;
    padding: 5px max(10px, env(safe-area-inset-right)) max(5px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: linear-gradient(#30251f, #181311); min-height: 0;
  }
  .game-toolbar .inventory { grid-area: 1 / 1; width: auto; gap: 8px; justify-content: space-around; }
  .game-toolbar .inventory > div { gap: 0; font-size: 11px; }
  .game-toolbar .inventory strong { font-size: 18px; line-height: 22px; }
  .game-toolbar .settings { grid-area: 1 / 2; width: auto; flex-direction: column; gap: 0; }
  .game-toolbar .settings .quiet { padding: 3px 5px; font-size: 12px; min-height: 24px; }
  .game-toolbar .controls { grid-area: 2 / 1 / 3 / 3; width: 100%; gap: 12px; }
  .game-toolbar .control-group button, .game-toolbar .reset { min-width: 34px; height: 34px; }
  .scene-caption .gesture-tip { display: block; font-size: 13px; line-height: 1.4; letter-spacing: normal; }
  .lock-open .gesture-tip { display: none; }
  footer { bottom: calc(110px + env(safe-area-inset-bottom)); }
  footer > span { display: none; }
}
#entry { width: min(92vw, 430px); }
#entry label { display: grid; gap: 7px; color: #edd8b6; }
#entry input { width: 100%; font: inherit; font-size: 18px; color: #f5e6ce; background: #211913; border: 1px solid #a28a62; padding: 10px; }
#entry .primary { margin-top: 20px; }