*{box-sizing:border-box}html,body{margin:0;background:#080d10;color:#e7e1d0;font-family:Consolas,monospace;height:100%;overflow:hidden}main{height:100dvh;position:relative}canvas{width:100%;height:100%;display:block;image-rendering:pixelated;outline:none}header{position:absolute;top:0;left:0;right:0;padding:28px 34px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(#060c11e6,transparent);pointer-events:none}.brand{font-size:24px;letter-spacing:4px;text-shadow:0 2px 6px #000}.brand small{display:block;font-size:8px;letter-spacing:3px;color:#b3a68c;margin-top:7px}nav{display:flex;gap:8px;pointer-events:auto}button{background:#0e191dde;border:1px solid #68716b66;color:#d9d9ca;padding:12px 16px;font:inherit;font-size:12px;cursor:pointer}button:hover{background:#384944}button:focus-visible{outline:2px solid #d8b879}kbd{margin-left:12px;color:#8f9c97;font:inherit}#location{position:absolute;top:110px;left:34px;display:flex;gap:16px;pointer-events:none;text-shadow:0 2px 12px #000}#level{font-size:50px;color:#c6b387}small{font-size:10px;letter-spacing:3px;color:#c8b181}h1{font-size:18px;font-weight:normal;margin:6px 0}#location p{font-size:10px;color:#b0bbb8;margin:4px 0}#hint{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);background:#081318eb;border:1px solid #c7b07a66;padding:12px 20px;white-space:nowrap;font-size:12px}#toast{position:absolute;right:34px;top:110px;font-size:12px;color:#e3cf9e;max-width:260px;line-height:1.8}#intro{position:absolute;inset:0;background:linear-gradient(90deg,#050d13eb,#050d1360 65%,#050d1310);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:8%;transition:opacity .6s}#intro h2{font-family:Georgia,serif;font-weight:normal;font-size:clamp(40px,6vw,90px);line-height:1.08;margin:25px 0;color:#ede4cf}#intro p{font-size:14px;line-height:1.9;color:#b8c0b9}#start{background:#cab48a;color:#111c20;font-size:14px;padding:18px 26px;margin-top:20px}#start:disabled{opacity:.5}#intro span{font-size:10px;color:#87928e;margin-top:22px}footer{position:absolute;bottom:0;left:0;right:0;padding:28px 34px;display:flex;gap:20px;align-items:center;justify-content:space-between;background:linear-gradient(transparent,#060c11ef);font-size:10px;color:#a8b7b2}#count{color:#d0be95}.zoom{display:flex;gap:10px;align-items:center}.zoom button{padding:6px 12px}#mapView{position:absolute;inset:0;background:#091015f5;padding:25px 4% 70px;overflow:auto}#mapView[hidden],#hint[hidden],#intro[hidden]{display:none}.maphead{display:flex;align-items:center;justify-content:space-between}.maphead h2{font:normal 24px Georgia,serif;margin:10px 0 20px}.mapimage{position:relative;max-width:1200px;margin:auto}.mapimage img{width:100%;display:block;image-rendering:pixelated}#floors{position:absolute;inset:0;display:flex;flex-direction:column;padding-top:1%;padding-bottom:1%}#floors button{flex:1;padding:0 12px;background:transparent;border:0;border-bottom:1px solid #d3d7cf13;text-align:left;font-size:11px;text-shadow:0 1px 5px #000;color:#eee}#floors button:hover{background:#f0c47c30;outline:1px solid #b99b6c}#floors span{background:#081218cc;padding:5px 10px}#mapView>p{text-align:center;font-size:11px;color:#98aaa5}dialog{width:min(490px,90vw);background:#101c20ed;border:1px solid #bdab7e;padding:34px;color:#e4decb;box-shadow:0 20px 90px #000}dialog::backdrop{background:#07101777}dialog h2{font:normal 30px Georgia,serif;margin:18px 0}dialog p{font-size:14px;line-height:1.85;white-space:pre-line;color:#bac7c2}#touch{display:none}@media(max-width:760px){header{padding:18px}.brand{font-size:18px}nav button{padding:9px}kbd{display:none}#location{left:18px;top:80px}#level{font-size:35px}footer{padding:20px 18px 80px}footer>span:nth-child(2){display:none}#touch{position:absolute;display:flex;bottom:16px;left:18px;right:18px;justify-content:space-between;gap:8px;touch-action:none}#touch button{flex:1;background:#17252acf;padding:13px 0}#hint{bottom:130px;max-width:95%;white-space:normal}#toast{top:160px;right:18px;font-size:10px}#intro{padding:8%}#intro p{font-size:12px}.maphead small{font-size:8px}.maphead h2{font-size:18px}}
