:root{
  --cream:#F3F1E6;--ink:#2F2B36;--rust:#9E3B1B;--moss:#5E6B4A;--line:rgba(47,43,54,.14);
  --display:'Cormorant Garamond',Georgia,serif;--body:'Work Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;background:#d9d3c2;font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#c.drag{cursor:grabbing}
button{font:inherit;color:inherit;cursor:pointer}
.btn{background:var(--ink);color:var(--cream);border:0;border-radius:999px;padding:14px 26px;font-weight:600;font-size:15px;letter-spacing:.02em;transition:background .2s}
.btn:hover{background:var(--rust)}
.btn.sm{padding:10px 18px;font-size:14px;margin-top:12px}
.chip{background:rgba(243,241,230,.92);border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:500;backdrop-filter:blur(8px)}
.chip:hover{border-color:var(--ink)}
.eyebrow,.k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);font-weight:600}

.intro{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.intro::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(47,43,54,.15),rgba(47,43,54,.55))}
.intro-card{position:relative;z-index:1;background:rgba(243,241,230,.95);max-width:520px;padding:36px 36px 28px;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.intro h1{font-family:var(--display);font-weight:600;font-size:clamp(34px,6vw,50px);line-height:1.02;margin:10px 0 12px}
.intro p{font-size:16px;line-height:1.55;color:#4a4552}
.howto{list-style:none;padding:0;margin:18px 0 22px;display:grid;gap:8px;font-size:14px;color:#4a4552}
.howto li{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:baseline}
.howto b{color:var(--ink);font-weight:600}
.fine{font-size:12px;color:#7a7480;margin-top:16px}
.intro.gone{opacity:0;pointer-events:none;transition:opacity .5s}

.hud-top{position:fixed;top:14px;left:14px;right:14px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;z-index:10;pointer-events:none}
.hud-top>*{pointer-events:auto}
.brand{background:rgba(243,241,230,.92);border:1px solid var(--line);border-radius:6px;padding:9px 14px;backdrop-filter:blur(8px)}
.brand span{display:block;font-family:var(--display);font-size:20px;font-weight:600;line-height:1.1}
.brand small{font-size:12px;color:#6b6570}
#roomsBtn{margin-right:334px}

.roomlist{position:fixed;top:66px;right:348px;z-index:12;background:rgba(243,241,230,.97);border:1px solid var(--line);border-radius:6px;padding:6px;display:grid;min-width:230px;box-shadow:0 14px 40px rgba(0,0,0,.15)}
.roomlist[hidden]{display:none}
.roomlist button{background:none;border:0;text-align:left;padding:10px 12px;border-radius:4px;font-size:14px}
.roomlist button:hover,.roomlist button:focus-visible{background:rgba(94,107,74,.14)}
.roomlist button small{display:block;color:#7a7480;font-size:12px}

.mapwrap{position:fixed;top:14px;right:14px;z-index:10;background:rgba(243,241,230,.92);border:1px solid var(--line);border-radius:6px;padding:6px;backdrop-filter:blur(8px)}
#map{display:block;width:308px;height:212px;cursor:pointer}

.card{position:fixed;left:14px;bottom:14px;z-index:10;max-width:380px;background:rgba(243,241,230,.94);border:1px solid var(--line);border-radius:6px;padding:16px 18px;backdrop-filter:blur(8px);transition:transform .3s}
.card h2{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.05;margin:4px 0 6px}
.card p{font-size:14px;line-height:1.5;color:#4a4552}

.hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9;background:rgba(47,43,54,.75);color:var(--cream);padding:8px 14px;border-radius:999px;font-size:13px;transition:opacity .6s;pointer-events:none}
.hint.off{opacity:0}

.joy{position:fixed;z-index:11;width:120px;height:120px;border-radius:50%;border:2px solid rgba(243,241,230,.8);background:rgba(47,43,54,.18);pointer-events:none;transform:translate(-50%,-50%)}
.joy .knob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(243,241,230,.9)}

.lightbox{position:fixed;inset:0;z-index:60;background:rgba(30,27,34,.86);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{max-width:min(1200px,100%);max-height:100%;display:grid;gap:12px}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;border-radius:4px}
.lightbox figcaption{color:var(--cream);font-size:14px;line-height:1.5}
.lightbox figcaption b{font-family:var(--display);font-size:24px;font-weight:600;display:block}
.lightbox .close{position:absolute;top:16px;right:16px}

@media (max-width:760px){
  .brand small{display:none}
  .brand span{font-size:17px}
  #roomsBtn{margin-right:0;margin-top:0}
  .mapwrap{top:auto;bottom:auto;top:62px;padding:4px}
  #map{width:176px;height:121px}
  .roomlist{right:14px;top:190px}
  .card{left:10px;right:10px;bottom:10px;max-width:none;padding:12px 14px}
  .card h2{font-size:22px}
  .card p{font-size:13px}
  .hint{bottom:auto;top:200px}
  .intro-card{padding:26px 22px 22px}
  .howto li{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}