:root{
  --espresso:#17100b; --crimson:#7a1424; --gold:#c9a24a; --gold-2:#e3c677;
  --cream:#f7f0df; --ink:#2a1a10; --glass:rgba(23,16,11,.66);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --body:Georgia,'Times New Roman',serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--espresso);color:var(--cream);font-family:var(--body);overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.hidden{display:none !important}
#app{position:fixed;inset:0;overflow:hidden;user-select:none;-webkit-user-select:none}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#120c08}

/* Loader */
#loader{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;
  background:radial-gradient(ellipse at 50% 30%,rgba(45,20,14,.24),rgba(14,8,5,.30))}
.loader-card{width:min(420px,100%);text-align:center;padding:28px 22px;border:1px solid #d4af37;border-radius:6px;
  background:rgba(22,10,14,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 4px rgba(212,175,55,0.2),0 20px 60px rgba(0,0,0,.6)}
.loader-card h1{font-family:var(--serif);font-weight:700;font-size:28px;line-height:1.2;margin:10px 0 4px;color:var(--gold-2)}
.sub{margin:0 0 20px;letter-spacing:0.14em;text-transform:uppercase;color:#d8c9a8;font-size:12.5px;font-weight:500}
.bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
#barFill{height:100%;width:0;background:linear-gradient(90deg,#a9822f,#e3c677);transition:width .25s ease-out}
.status{margin:12px 0 18px;font-size:14px;color:#eae3d2;min-height:20px}
.error{margin:0 0 14px;color:#ffb4a8;font-size:14px}
.primary,.secondary{display:block;width:100%;min-height:50px;border-radius:4px;font-family:var(--serif);font-size:17px;letter-spacing:.02em}
.primary{background:linear-gradient(180deg,#f3d98b 0%,#c59b3f 100%);color:#1a0f00;border:1px solid #f0d58a;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,0.4)}
.primary:disabled{opacity:.45;cursor:default;box-shadow:none}
.primary:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.secondary{background:transparent;border:1px solid var(--gold);color:var(--gold-2);margin-top:10px}
.fine{margin:16px 0 0;font-size:12px;color:#a8977a;opacity:0.6}
.fine.dark{color:#6b5a45;margin-top:10px}

/* HUD */
#hud{position:absolute;inset:0;z-index:10;pointer-events:none}
#hud>*{pointer-events:none}
#topbar{position:absolute;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
#roomchip{pointer-events:auto;max-width:calc(100% - 170px);padding:8px 14px;border-radius:22px;background:var(--glass);
  border:1px solid rgba(201,162,74,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:1px}
#roomName{font-family:var(--serif);font-size:15px;color:var(--gold-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stamps{font-size:12px;color:#e6dcc3}
.tools{display:flex;gap:6px;pointer-events:auto}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--glass);border:1px solid rgba(201,162,74,.5);color:var(--gold-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:0}
.icon-btn:active{background:rgba(201,162,74,.35)}
.icon-btn[aria-pressed="true"]{background:rgba(201,162,74,.85);color:#241608}
#audWaves{transition:opacity .2s}
#btnAudio[aria-pressed="false"] #audWaves{opacity:.25}

#controls{position:absolute;inset:0}
#stick{pointer-events:auto;position:absolute;left:18px;bottom:26px;width:132px;height:132px;border-radius:50%;touch-action:none;
  background:radial-gradient(circle,rgba(23,16,11,.35),rgba(23,16,11,.62));border:1.5px solid rgba(201,162,74,.55);backdrop-filter:blur(6px)}
#stick::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(201,162,74,.3)}
#knob{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#f0d58a,#a9822f);border:1px solid #f4e3a8;box-shadow:0 4px 12px rgba(0,0,0,.5)}
#prompt{pointer-events:auto;position:absolute;right:16px;bottom:44px;max-width:calc(100% - 200px);min-height:52px;padding:10px 16px 10px 12px;border-radius:26px;
  display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#d9b55a,#a9822f);color:#241608;border:1px solid #f0d58a;
  font-family:var(--serif);font-size:15px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:pop .22s ease-out}
#prompt .eye{display:inline-flex;flex:0 0 auto}
#promptText{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:left;line-height:1.2}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
#hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-size:12px;color:#e6dcc3;background:var(--glass);padding:6px 14px;border-radius:14px;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
@media (pointer:coarse){#hint{display:none}}
@media (pointer:fine){#stick{display:none}}

/* Plaque */
#plaque{position:absolute;z-index:20;left:8px;right:8px;bottom:8px;max-height:46vh;display:flex;flex-direction:column;
  background:var(--cream);color:var(--ink);border-radius:4px;border:1px solid var(--gold);padding:14px 16px 12px;
  box-shadow:inset 0 0 0 4px var(--cream),inset 0 0 0 5px rgba(169,130,47,.7),0 12px 40px rgba(0,0,0,.55);animation:fadeIn .3s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.pclose{position:absolute;top:6px;right:6px;width:38px;height:38px;background:transparent;border:none;color:var(--ink);backdrop-filter:none}
.pbody{overflow-y:auto;padding-right:30px;min-height:0;-webkit-overflow-scrolling:touch}
.pmeta{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8a6a2a}
#pTitle{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.2;margin:4px 0 2px;color:#2a1208}
.pby{margin:0;font-style:italic;font-size:15px;color:#4a3524}
.pmedium{margin:2px 0 8px;font-size:12.5px;color:#7a6a55}
.ptext{margin:0 0 6px;font-size:14.5px;line-height:1.55}
.pactions{display:flex;gap:8px;margin-top:8px}
.pbtn{min-height:44px;min-width:44px;border-radius:4px;border:1px solid #a9822f;background:transparent;color:#4a2c10;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-family:var(--serif);font-size:15px}
.pbtn:first-child{flex:1;background:linear-gradient(180deg,#d9b55a,#b58d38);color:#241608;font-weight:700}
.pbtn.icon{padding:0;width:44px}
.pbtn:active{transform:translateY(1px)}
.pbtn[aria-pressed="true"]{background:var(--crimson);color:#fff;border-color:var(--crimson)}
.pbtn[aria-pressed="true"] path{fill:currentColor}
.phint{margin:8px 0 0;font-size:11.5px;color:#8a7a62;text-align:center}
@media (max-height:640px){.phint{display:none}#plaque{max-height:52vh}}
@media (min-width:900px){
  #plaque{left:auto;right:24px;top:84px;bottom:24px;width:380px;max-height:none}
  #pTitle{font-size:26px}.ptext{font-size:15.5px}
}

/* Overlays */
.overlay{position:absolute;inset:0;z-index:40;background:rgba(10,6,3,.72);display:flex;align-items:center;justify-content:center;padding:10px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sheet{width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);border:1px solid var(--gold);border-radius:4px;padding:14px 14px 16px;
  box-shadow:inset 0 0 0 4px var(--cream),inset 0 0 0 5px rgba(169,130,47,.7),0 20px 60px rgba(0,0,0,.6);overflow:hidden}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sheet-head h2{margin:0;font-family:var(--serif);font-size:22px;color:#2a1208}
.close-ov{background:transparent;color:var(--ink);border-color:#a9822f}
.map-row{display:flex;gap:12px;align-items:flex-start;justify-content:center;min-height:0;overflow:auto}
#mapCanvas{height:min(62vh,640px);width:auto;aspect-ratio:220/640;background:#e9dec4;border:1px solid #a9822f;border-radius:2px;touch-action:manipulation;cursor:pointer;flex:0 0 auto}
.map-side{flex:1;min-width:0}
.legend{margin:0 0 6px;font-size:13px;display:flex;align-items:center;gap:8px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.dot.you{background:#2a5db0}.dot.done{background:#c9a24a;border:1px solid #7a5a1a}.dot.todo{background:#f7f0df;border:2px solid #7a1424}
#mapRooms{display:flex;flex-direction:column;gap:8px;margin-top:12px}
#mapRooms button{min-height:44px;border:1px solid #a9822f;background:transparent;border-radius:4px;color:#4a2c10;font-family:var(--serif);font-size:14px;padding:6px 10px;text-align:left}
#mapRooms button:active{background:rgba(201,162,74,.3)}
.guide-progress{margin:0 0 6px;font-size:14px;color:#4a3524}
.gbar{height:6px;border-radius:3px;background:rgba(0,0,0,.12);overflow:hidden;margin-bottom:10px}
#gbarFill{height:100%;width:0;background:linear-gradient(90deg,#a9822f,#e3c677);transition:width .3s}
.gfilter{display:flex;gap:8px;margin-bottom:8px}
.chip{min-height:38px;padding:0 14px;border-radius:19px;border:1px solid #a9822f;background:transparent;color:#4a2c10;font-size:14px}
.chip.on{background:#a9822f;color:#fff}
#guideList{list-style:none;margin:0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0}
#guideList li{margin:0}
.gitem{width:100%;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 6px;background:transparent;border:none;border-bottom:1px solid rgba(0,0,0,.1);text-align:left;color:var(--ink)}
.gitem:active{background:rgba(201,162,74,.2)}
.seal{flex:0 0 38px;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:13px;border:2px dashed #b9a98a;color:#9a8a6a}
.seal.on{border:2px solid #7a5a1a;background:radial-gradient(circle at 35% 30%,#f0d58a,#b58d38);color:#3a2408;font-weight:700;transform:rotate(-8deg)}
.gtext{flex:1;min-width:0}
.gtext b{display:block;font-family:var(--serif);font-size:15px;line-height:1.25}
.gtext span{display:block;font-size:12.5px;color:#7a6a55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gheart{color:var(--crimson);font-size:18px}
.gempty{padding:20px 6px;color:#7a6a55;font-size:14px}

/* Toast */
#toast{position:absolute;z-index:60;left:50%;top:70px;transform:translateX(-50%);max-width:92vw;padding:10px 18px;border-radius:24px;
  background:rgba(23,16,11,.9);border:1px solid var(--gold);color:var(--gold-2);font-family:var(--serif);font-size:15px;text-align:center;animation:pop .25s ease-out}

@media (prefers-reduced-motion:reduce){#prompt,#plaque,#toast{animation:none}}