/* Haveli Escape — warm evening palace: navy room, glowing objects. */
:root {
  --desk: #141721; --panel: #20253a; --panel-2: #2a3049; --line: #363d5c; --ink: #f5f3ff; --muted: #a9abc6;
  --orange: #ff9a3c; --pink: #f04fa8; --violet: #8b5cf6; --teal: #2fd4c8; --acc: #ff9a3c;
  --grad: linear-gradient(100deg, var(--orange), var(--pink) 50%, var(--violet));
  --display: "Outfit", "Trebuchet MS", system-ui, sans-serif; --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--desk); color: var(--ink); font-family: var(--body); font-size: 16px; -webkit-tap-highlight-color: transparent; min-height: 100vh; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 10px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
svg { display: block; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 6px 18px rgba(240, 79, 168, .28); }
.btn.teal { background: var(--teal); color: #08221f; }
.btn.ghost { border: 2px solid var(--line); }
.btn.small { min-height: 42px; padding: 8px 14px; font-size: 15px; }
.btn.big { min-height: 56px; min-width: 200px; font-size: 20px; }
.btn:disabled { opacity: .45; cursor: default; }

/* ---------- places ---------- */
.places { max-width: 1120px; margin: 0 auto; padding: 14px 16px 60px; display: flex; flex-direction: column; gap: 24px; }
.ptop { display: flex; gap: 14px; align-items: flex-start; }
.ptop h1 { font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; }
.ptop .sub { color: var(--muted); font-weight: 700; margin-top: 4px; }
.back { min-height: 44px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--line); font-weight: 800; white-space: nowrap; }
.kind { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.kind span { color: var(--muted); font-size: 15px; font-weight: 700; margin-left: 8px; font-family: var(--body); }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pcard { display: flex; flex-direction: column; text-align: left; border-radius: 20px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: transform .15s, border-color .15s; }
.pcard:hover { transform: translateY(-2px); border-color: var(--acc); }
.part { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.part svg { width: 100%; height: 100%; }
.pbody { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.pbody b { font-family: var(--display); font-size: 20px; }
.pbody > span { color: var(--muted); font-weight: 700; font-size: 14px; }
.pmeta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pmeta i { font-style: normal; font-weight: 800; font-size: 13px; color: var(--muted); }
.pmeta .lvl { color: var(--acc); letter-spacing: 2px; }
.stars { color: #ffc23d; letter-spacing: 2px; }

/* ---------- playing ---------- */
.play { max-width: 1180px; margin: 0 auto; padding: 8px 12px 110px; display: flex; flex-direction: column; gap: 10px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bar-t { display: flex; flex-direction: column; min-width: 0; }
.bar-t b { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--acc); }
.bar-t span { color: var(--muted); font-weight: 700; font-size: 14px; }
.bar-n { display: flex; gap: 8px; }
.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scene-wrap { display: flex; justify-content: center; }
.scene { position: relative; width: min(100%, calc((100vh - 260px) * 1.6)); min-width: min(100%, 560px); aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.45); background: #000; }
.room-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hot { position: absolute; display: flex; flex-direction: column; align-items: center; border-radius: 14px; }
.hot.door { border-radius: 40% 40% 6px 6px / 22% 22% 6px 6px; }
.hot.door.open { animation: doorglow 1.8s ease-in-out infinite; }
@keyframes doorglow { 50% { box-shadow: 0 0 0 4px rgba(255,255,255,.6), 0 0 40px 10px rgba(255,220,150,.7); } }
.hot.thing svg { width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); transition: transform .15s; }
.hot.thing:hover svg { transform: translateY(-4px) scale(1.04); }
.hot.thing span { margin-top: -6%; font-size: clamp(9px, 1.1vw, 13px); font-weight: 800; background: rgba(20,23,33,.78); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.hot.thing.lock span { background: rgba(240,79,168,.85); }
.hot.thing.done span { background: rgba(47,212,200,.85); color: #08221f; }
.hot.thing.theirs svg { opacity: .8; }
.hot.ping, .tcard.ping { animation: ping .5s ease-in-out 5; }
@keyframes ping { 50% { box-shadow: 0 0 0 5px var(--gc, #ffd23c), 0 0 30px var(--gc, #ffd23c); } }
.team { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 8px 10px; }
.who { display: flex; gap: 6px; flex-wrap: wrap; }
.pp { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--panel-2); font-weight: 800; font-size: 13px; }
.pp i { width: 12px; height: 12px; border-radius: 50%; background: var(--oc); }
.pp.me { box-shadow: 0 0 0 2px var(--oc) inset; }
.th-h { font-size: 16px; color: var(--muted); font-family: var(--body); font-weight: 800; margin: 4px 2px 6px; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.tcard { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 16px; background: var(--panel); border: 2px solid var(--line); text-align: left; min-height: 64px; }
.tcard:hover { border-color: var(--muted); }
.tcard .ti { width: 48px; height: 48px; flex: none; }
.tcard .ti svg { width: 100%; height: 100%; }
.tcard .tt { display: flex; flex-direction: column; min-width: 0; }
.tcard b { font-size: 15px; }
.tcard small { color: var(--muted); font-weight: 700; font-size: 12.5px; }
.tcard.lock { border-color: rgba(240,79,168,.5); }
.tcard.done { border-color: rgba(47,212,200,.6); }
.tcard.done small { color: var(--teal); }
.tcard.clue[style] { border-color: var(--oc); }
.tcard.theirs { opacity: .78; }
.tcard.door.open { border-color: #ffd08a; animation: doorglow 1.8s ease-in-out infinite; }

/* ---------- sheets ---------- */
.scrim { position: fixed; inset: 0; z-index: 2147483000; background: rgba(8,10,18,.72); display: grid; place-items: center; padding: 14px; }
.box { width: min(480px, 100%); max-height: calc(100vh - 28px); overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.box.wide { width: min(640px, 100%); }
.box h2 { font-size: 25px; font-weight: 800; }
.box h3 { font-size: 18px; }
.box p { color: #d2d1e8; line-height: 1.5; }
.box .small, .small { font-size: 13px; color: var(--muted); }
.box .kick, .kick { color: var(--acc); font-weight: 800; font-size: 14px; }
.box .how { color: var(--muted); }
.btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 4px; }
.btns.col { flex-direction: column; align-items: stretch; }
.row2 { display: flex; gap: 10px; flex-wrap: wrap; } .row2 .btn { flex: 1; }
.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; color: #d2d1e8; }
.story-art { border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; } .story-art svg { width: 100%; height: 100%; }
.phrases, .plist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .phrases .btn, .plist .btn { white-space: normal; text-align: center; min-height: 52px; font-size: 15px; }
.plist small { color: var(--acc); }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 2147483100; background: #f5f3ff; color: #141721; font-weight: 800; padding: 10px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: calc(100vw - 32px); text-align: center; pointer-events: none; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* clue cards */
.cc-paper, .cc-wood, .cc-cloth, .cc-frieze, .cc-niche, .cc-slate, .cc-wax, .cc-frame { border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.cc-paper { background: #fbf2dc; color: #3a2a10; } .cc-paper .cc-s, .cc-paper p { color: #5c4520 !important; }
.cc-paper.scroll { border-top: 10px solid #c9965a; border-bottom: 10px solid #c9965a; }
.cc-t { font-family: var(--display); font-weight: 800; font-size: 19px; color: inherit !important; } .cc-t.light { color: #fbf2dc !important; }
.cc-s { font-size: 14px; color: var(--muted) !important; }
.cc-big { font-size: 22px; font-weight: 800; color: #3a2a10 !important; line-height: 1.35; }
.cc-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.cc-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; }
.cc-slot .ic { width: 60px; height: 60px; }
.cc-slot b { font-size: 22px; } .cc-slot span { font-size: 12px; opacity: .7; } .cc-slot small { font-size: 12px; }
.cc-arrow { font-style: normal; font-size: 22px; opacity: .6; }
.cc-frame { background: #c9a24a; padding: 10px; } .mural { width: 100%; height: auto; border-radius: 6px; }
.cc-wood { background: #7a4a26; color: #fbf2dc; }
.cc-prow { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 12px; border: 5px solid var(--rc); background: #5c3518; width: 100%; justify-content: center; }
.cc-prow .ic { width: 54px; height: 54px; }
.cc-rlab { font-weight: 800; font-size: 13px; color: var(--rc); width: 46px; text-align: left; text-transform: capitalize; }
.cc-cloth { background: #fde7f2; color: #5a1a3a; } .cc-pair { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 360px; font-weight: 800; }
.cc-pair .ic { width: 40px; height: 40px; } .cc-pair span { width: 90px; text-align: left; text-transform: capitalize; } .cc-pair i { font-style: normal; opacity: .6; font-weight: 700; } .cc-pair b { text-transform: capitalize; }
.cc-frieze { background: #e8bd6a; color: #4a2a10; } .cc-frieze .cc-s { color: #5c3518 !important; }
.cc-niche { background: #5c3518; color: #fbf2dc; } .cc-niche .cc-s { color: #e8d4b0 !important; }
.cc-slate { background: #2f3b33; border: 10px solid #a8703a; } .cc-chalk { color: #eef4ee !important; font-size: 22px; font-weight: 800; line-height: 1.4; font-family: var(--display); } .cc-chalk.small { font-size: 15px; font-weight: 700; opacity: .8; }
.cc-wax { background: #3a2210; } .cc-wax .key { width: 100%; max-width: 360px; height: auto; }
.cc-num { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #47a9f0; color: #fff; font-family: var(--display); font-size: 24px; } .cc-num.small { width: 34px; height: 34px; font-size: 18px; background: #fbf2dc; color: #3a2a10; }
.cc-paper.map .maze { width: 100%; max-width: 420px; height: auto; }
.maze .mw { stroke: #5c3518; stroke-width: 12; stroke-linecap: round; }
.theirs-card { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; border: 3px dashed var(--oc); background: var(--panel-2); }
.theirs-card svg { width: 90px; height: 90px; flex: none; filter: blur(2px) grayscale(.4); }

/* locks */
.lockui { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0; }
.opened { font-size: 20px; padding: 18px; border-radius: 16px; background: rgba(47,212,200,.14); border: 2px solid var(--teal); width: 100%; text-align: center; }
.wheels { display: flex; gap: 10px; justify-content: center; }
.wheel { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wb { width: 60px; height: 48px; border-radius: 14px; background: var(--panel-2); border: 2px solid var(--line); font-size: 20px; touch-action: manipulation; }
.wb:active { background: var(--line); }
.wf { width: 72px; height: 84px; border-radius: 14px; background: #fbf2dc; color: #2a2140; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 4px #c9a24a; }
.wf .dig { font-family: var(--display); font-size: 44px; } .wf .ic { width: 50px; height: 50px; } .wf small { font-size: 11px; font-weight: 800; }
.safe .wf { background: #2b3140; color: #ffd23c; box-shadow: inset 0 0 0 4px #6f7a8e; }
.lamps { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lamp { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; touch-action: manipulation; }
.lamp svg { width: 64px; height: 86px; filter: drop-shadow(0 0 10px var(--lc)); }
.levers { display: flex; gap: 14px; justify-content: center; padding: 10px 18px; border-radius: 16px; background: #8a6a2a; }
.lever { position: relative; width: 46px; height: 140px; border-radius: 12px; background: #3a2a10; display: flex; justify-content: center; touch-action: manipulation; }
.lever i { position: absolute; left: 50%; width: 16px; height: 62px; margin-left: -8px; top: 66px; border-radius: 8px; background: #d8b04a; transition: top .15s; }
.lever i::after { content: ""; position: absolute; left: 50%; top: 46px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: #e5484d; transition: top .15s; }
.lever.up i { top: 12px; } .lever.up i::after { top: -12px; }
.lever span { position: absolute; bottom: -24px; font-weight: 800; }
.levers { margin-bottom: 24px; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.keyb { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 14px; background: var(--panel-2); border: 2px solid var(--line); font-weight: 800; touch-action: manipulation; }
.keyb .key { width: 100%; height: auto; } .keyb span { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--line); display: grid; place-items: center; }
.bells { display: flex; gap: 10px; justify-content: center; }
.bellb { display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; text-transform: capitalize; touch-action: manipulation; }
.bellb svg { width: 70px; height: 88px; transform-origin: 50% 5%; }
.bellb:active svg { animation: swing .5s; }
@keyframes swing { 25% { transform: rotate(12deg); } 75% { transform: rotate(-10deg); } }
.dots { display: flex; gap: 6px; } .dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); } .dots i.on { background: var(--teal); border-color: var(--teal); }
.maze-wrap { width: min(100%, 340px); } .maze-wrap .maze { width: 100%; height: auto; }
.walker { transition: transform .18s ease-out; }
.pad { display: flex; flex-direction: column; align-items: center; gap: 6px; } .pad > div { display: flex; gap: 70px; } .pad .wb { width: 64px; height: 56px; font-size: 22px; }
.hintbox { display: flex; flex-direction: column; gap: 6px; } .hint { background: rgba(255,210,60,.1); border: 1px solid rgba(255,210,60,.4); border-radius: 12px; padding: 10px 12px; font-size: 15px; }

/* win */
.box.win { text-align: center; }
.win-stars { display: flex; justify-content: center; gap: 8px; font-size: 52px; line-height: 1; }
.win-stars span { color: #3a4060; } .win-stars span.on { color: #ffc23d; animation: starin .5s cubic-bezier(.2,1.6,.4,1) both; text-shadow: 0 0 20px rgba(255,194,61,.5); }
@keyframes starin { from { transform: scale(0) rotate(-40deg); } }
.win-line { font-weight: 800; color: var(--ink) !important; }
body.won .scene { animation: wonglow 1.6s ease-out; }
@keyframes wonglow { 30% { filter: brightness(1.3) drop-shadow(0 0 30px var(--acc)); } }

@media (max-width: 860px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
  .scene { min-width: 0; width: 100%; border-radius: 12px; }
  .hot.thing span { display: none; }
  .tgrid { grid-template-columns: 1fr 1fr; }
  .tcard { padding: 6px 8px 6px 6px; gap: 6px; min-height: 58px; } .tcard .ti { width: 40px; height: 40px; } .tcard b { font-size: 13.5px; } .tcard small { font-size: 11.5px; }
  .wheels { gap: 6px; } .wb { width: 52px; } .wf { width: 60px; height: 76px; } .wf .dig { font-size: 38px; }
  .lamp svg { width: 52px; height: 70px; }
  .bellb svg { width: 58px; height: 74px; }
  .keys { grid-template-columns: 1fr; }
  .phrases, .plist { grid-template-columns: 1fr; }
  .bar-t b { font-size: 19px; }
  .levers { gap: 10px; padding: 10px 12px; } .lever { width: 40px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
/* clue rows stay on one line on phones */
.cc-row { flex-wrap: nowrap; }
.cc-slot .ic { width: min(60px, 12.5vw); height: min(60px, 12.5vw); }
.cc-num { width: min(46px, 11vw); height: min(46px, 11vw); font-size: min(24px, 6vw); }
@media (max-width: 560px) { .cc-arrow { display: none; } .cc-row { gap: 4px; } .cc-paper, .cc-wood, .cc-cloth, .cc-frieze, .cc-niche, .cc-slate, .cc-wax, .cc-frame { padding: 12px 8px; } .cc-prow .ic { width: 44px; height: 44px; } .cc-pair .ic { width: 34px; height: 34px; } .cc-pair span { width: 76px; } }