:root {
  --ivory: #fbf9f4;
  --champ: #f4eee2;
  --sand: #e7dcc6;
  --gold: #c8a96a;
  --gold-d: #9c7c3c;
  --ink: #2b2620;
  --mute: #8a8070;
  --amber: #ffb347;
  --glass: rgba(251, 249, 244, 0.7);
  --line: rgba(156, 124, 60, 0.28);
  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", "Avenir", sans-serif;
  --deva: "Kohinoor Devanagari", "Devanagari Sangam MN", "Noto Sans Devanagari", Mangal, sans-serif;
  --shadow: 0 18px 50px rgba(60, 45, 20, 0.18), 0 2px 6px rgba(60, 45, 20, 0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #e9e3d6; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; }
#view { position: fixed; inset: 0; }
#view canvas { display: block; width: 100%; height: 100%; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.9em; padding: 0 0.45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--ivory); font: 500 11px var(--sans); letter-spacing: 0.06em; color: var(--gold-d); }
button { font-family: var(--sans); cursor: pointer; }
.eyebrow { font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-d); }
.deva { font-family: var(--deva); color: var(--gold-d); }
.ghost { margin-top: 18px; padding: 9px 18px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mute); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; gap: 10px; align-items: center; transition: all .2s; }
.ghost:hover { color: var(--ink); border-color: var(--gold); background: rgba(200, 169, 106, 0.08); }

#start { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: auto; background: radial-gradient(120% 90% at 50% 0%, #fffdf8 0%, #f5efe3 45%, #e6dbc4 100%); transition: opacity .7s ease, visibility .7s; }
#start.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.coffers { position: absolute; left: -20%; right: -20%; top: -30%; height: 75%; transform: perspective(700px) rotateX(58deg); transform-origin: top; opacity: .55; background:
  linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(245,239,227,1) 92%),
  repeating-linear-gradient(90deg, transparent 0 46px, rgba(170,150,110,.35) 46px 52px),
  repeating-linear-gradient(0deg, transparent 0 46px, rgba(170,150,110,.35) 46px 52px),
  linear-gradient(#eaf4fb, #fdfcf8); }
.sweep { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 250% 100%; animation: sweep 7s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.start-inner { position: relative; width: min(1040px, 92vw); padding: 6vh 0; }
.brand { text-align: center; }
.brand > * { opacity: 0; animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.brand .eyebrow { animation-delay: .1s; }
.brand h1 { animation-delay: .25s; font-weight: 200; font-size: clamp(56px, 10vw, 148px); letter-spacing: .38em; margin-right: -.38em; line-height: 1.05; color: #3a3226; text-shadow: 0 1px 0 #fff, 0 22px 60px rgba(200,169,106,.35); }
.brand .deva { animation-delay: .4s; font-size: 20px; letter-spacing: .2em; margin-top: 4px; }
.rule { animation-delay: .5s; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto 18px; }
.rule span { width: 110px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.rule span:last-child { transform: scaleX(-1); }
.rule i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gold); }
.sub { animation-delay: .6s; max-width: 620px; margin: 0 auto; color: #6c624f; font-size: 15px; line-height: 1.7; font-weight: 400; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.start-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 38px; opacity: 0; animation: rise .9s .8s cubic-bezier(.2,.7,.2,1) forwards; }
.pylon, .goal { background: var(--glass); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: var(--shadow); padding: 26px 28px; }
.pylon-head, .goal-head { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold-d); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
.keys { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; }
.keys li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.keys li span { display: inline-flex; gap: 3px; min-width: 68px; }
.keys em { font-style: normal; color: #5f5646; }
.goal { position: relative; overflow: hidden; }
.goal p { font-size: 14px; line-height: 1.65; color: #5f5646; margin-top: 8px; }
.goal .goal-head { margin-bottom: 0; border: 0; padding-bottom: 0; }
.goal-deva { font-family: var(--deva); color: var(--gold); font-size: 15px; margin-top: 2px !important; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.goal-kite { position: absolute; right: 26px; top: 20px; animation: bob 3.2s ease-in-out infinite; }
.goal-kite i, .ico.kite { display: block; width: 26px; height: 26px; transform: rotate(45deg); background: conic-gradient(from 45deg, #e63946 0 25%, #f4a261 0 50%, #2a9d8f 0 75%, #ffbe0b 0); border-radius: 3px; box-shadow: 0 6px 14px rgba(230,57,70,.3); }
.goal-kite::after { content: ""; position: absolute; left: 12px; top: 30px; width: 2px; height: 34px; background: repeating-linear-gradient(#e63946 0 5px, transparent 5px 9px); transform: rotate(-12deg); transform-origin: top; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(4deg); } }
.start-cta { text-align: center; margin-top: 34px; opacity: 0; animation: rise .9s 1s forwards; }
#startBtn { padding: 17px 52px; border-radius: 999px; border: 1px solid var(--gold); background: linear-gradient(180deg, #fffaf0, #f1e4c6); color: #4a3c22; font-size: 13px; letter-spacing: .36em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(200,169,106,.35), inset 0 1px 0 #fff; transition: transform .2s, box-shadow .2s; }
#startBtn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(200,169,106,.5), inset 0 1px 0 #fff; }
#startBtn:disabled { opacity: .6; cursor: progress; }
#loading { margin-top: 12px; font-size: 12px; letter-spacing: .14em; color: var(--mute); min-height: 1em; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: 0; transition: opacity .6s; }
body.live #hud { opacity: 1; }
#floorBadge { position: absolute; left: 22px; top: 20px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; max-width: 380px; padding: 12px 20px 12px 16px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.75); border-radius: 18px; box-shadow: var(--shadow); }
#floorId { font-size: 54px; font-weight: 200; line-height: 1; color: var(--gold-d); min-width: 44px; text-align: center; }
#floorId.flip { animation: flip .5s ease; }
@keyframes flip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
#floorName { font-size: 13px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; }
#floorTag { font-size: 11px; color: var(--mute); line-height: 1.45; margin-top: 3px; }
#place { grid-column: 1 / -1; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5a5040; display: flex; align-items: center; gap: 8px; }
#place::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }
#place:empty { display: none; }
.mapwrap { position: absolute; right: 22px; top: 20px; padding: 6px; border-radius: 20px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.75); box-shadow: var(--shadow); }
#minimap { display: block; width: 200px; height: 200px; border-radius: 15px; }
#hud.mapbig .mapwrap { right: 50%; top: 50%; transform: translate(50%, -50%); padding: 10px; border-radius: 24px; }
#hud.mapbig::before { content: ""; position: absolute; inset: 0; background: rgba(40, 32, 20, .35); backdrop-filter: blur(3px); }
#counts { position: absolute; left: 22px; bottom: 22px; display: flex; gap: 10px; }
.chip { display: flex; align-items: center; gap: 9px; padding: 9px 15px 9px 12px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.75); border-radius: 999px; box-shadow: var(--shadow); font-size: 14px; }
.chip span { font-weight: 500; font-variant-numeric: tabular-nums; }
.chip span small { color: var(--mute); font-weight: 400; }
.chip b { font-weight: 400; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.chip.bump { animation: bump .6s ease; }
@keyframes bump { 40% { transform: scale(1.12); background: #fff6e0; } }
.ico { display: block; flex: none; }
.ico.kite { width: 14px; height: 14px; border-radius: 2px; box-shadow: none; }
.ico.star { width: 15px; height: 15px; background: var(--gold); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
.ico.bag { width: 14px; height: 13px; border: 1.6px solid var(--gold-d); border-radius: 2px 2px 4px 4px; position: relative; margin-top: 3px; }
.ico.bag::before { content: ""; position: absolute; left: 3px; top: -6px; width: 5px; height: 5px; border: 1.6px solid var(--gold-d); border-bottom: 0; border-radius: 5px 5px 0 0; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(60,45,20,.35); }
#prompt { position: absolute; left: 50%; bottom: 96px; transform: translate(-50%, 10px); display: flex; align-items: center; gap: 12px; padding: 10px 20px 10px 10px; background: rgba(43, 38, 32, .78); color: #fbf6ea; border-radius: 999px; font-size: 14px; letter-spacing: .04em; opacity: 0; transition: opacity .2s, transform .2s; backdrop-filter: blur(10px); }
#prompt.show { opacity: 1; transform: translate(-50%, 0); }
#prompt kbd { background: var(--gold); color: #2b2620; border-color: #e6cf98; font-size: 13px; font-weight: 600; }
#toasts { position: absolute; left: 50%; top: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.toast { display: flex; align-items: center; gap: 14px; min-width: 300px; max-width: 460px; padding: 12px 22px 12px 14px; background: rgba(251, 249, 244, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.85); border-left: 3px solid var(--gold); border-radius: 14px; box-shadow: var(--shadow); animation: tin .5s cubic-bezier(.2,.8,.2,1); }
.toast.out { animation: tout .45s ease forwards; }
.toast .ti { font-size: 24px; width: 34px; text-align: center; }
.toast h4 { font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.toast p { font-size: 12px; color: var(--mute); margin-top: 2px; }
@keyframes tin { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes tout { to { opacity: 0; transform: translateY(-10px); } }
#help { position: absolute; right: 24px; bottom: 24px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.45); }

.overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(40, 32, 20, .32); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.overlay.show { opacity: 1; visibility: visible; }
.card { width: min(480px, 90vw); padding: 30px 34px; text-align: center; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.85); border-radius: 24px; box-shadow: var(--shadow); }
.card h2 { font-weight: 300; font-size: 30px; letter-spacing: .06em; margin: 8px 0 6px; }
.card p { color: #6c624f; font-size: 14px; }
#pause { cursor: pointer; }

.lift { width: 330px; padding: 22px 24px 20px; border-radius: 26px; text-align: center; background: linear-gradient(160deg, #f7f3ea 0%, #d9d3c6 45%, #f1ece2 55%, #cfc8b8 100%); border: 1px solid #fff; box-shadow: var(--shadow), inset 0 1px 0 #fff, inset 0 -2px 10px rgba(0,0,0,.08); }
.lift-display { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 auto 10px; width: 150px; padding: 8px 0; border-radius: 10px; background: #15120e; box-shadow: inset 0 2px 8px #000; font: 600 30px "Courier New", monospace; color: var(--amber); text-shadow: 0 0 10px rgba(255,179,71,.8); }
.lift-display em { font-style: normal; font-size: 16px; opacity: .8; }
.lift-title { font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: #6f6650; margin-bottom: 14px; }
#liftButtons { display: flex; flex-direction: column; gap: 10px; }
#liftButtons button { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(255,255,255,.35); text-align: left; transition: background .2s; }
#liftButtons button:hover:not(:disabled) { background: rgba(255,255,255,.75); }
#liftButtons .lb { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 500; color: #3a3226; background: radial-gradient(circle at 35% 30%, #fff, #c9c2b2 70%, #9d958a); border: 2px solid #b9b1a2; box-shadow: 0 3px 6px rgba(0,0,0,.18); }
#liftButtons button:hover:not(:disabled) .lb, #liftButtons button.current .lb { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,179,71,.35), 0 0 16px rgba(255,179,71,.6); color: #8a4b00; }
#liftButtons .ln { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
#liftButtons .lt { display: block; font-size: 10.5px; letter-spacing: .02em; text-transform: none; color: var(--mute); font-weight: 400; margin-top: 2px; line-height: 1.35; }
#liftButtons button.current { cursor: default; }
#liftButtons button.current .ln::after { content: " · you are here"; color: var(--gold-d); letter-spacing: .06em; text-transform: none; font-weight: 400; }

.dir { width: 300px; padding: 26px 26px 20px; border-radius: 8px; background: #f4f1ea; box-shadow: var(--shadow), inset 0 0 0 6px #ebe5d8; text-align: left; }
.dir .big { font-size: 96px; font-weight: 200; line-height: .9; color: #6f6650; margin-bottom: 18px; }
.dir .row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid rgba(111,102,80,.18); }
.dir .row .id { font-size: 22px; font-weight: 300; color: #6f6650; line-height: 1.1; }
.dir .row ul { list-style: none; font-size: 12.5px; color: #5b5446; line-height: 1.5; }
.dir .row.cur { background: linear-gradient(90deg, rgba(200,169,106,.22), transparent); margin: 0 -10px; padding: 9px 10px; border-radius: 4px; }
.dir .row.cur .id { color: var(--gold-d); font-weight: 500; }
.dir .ghost { width: 100%; justify-content: center; }

.journal-card { width: min(520px, 92vw); text-align: left; }
.journal-card h2, .journal-card .eyebrow { text-align: center; }
#journalList { list-style: none; margin-top: 16px; max-height: 52vh; overflow: auto; columns: 2; column-gap: 22px; }
#journalList li { break-inside: avoid; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--line); }
#journalList li i { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px dashed #bdb19a; }
#journalList li.got i { border: 0; background: var(--gold); clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%); }
#journalList li:not(.got) { color: #a0957f; }
.journal-card .ghost { display: flex; margin: 18px auto 0; }

#celebrate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, rgba(255,214,140,.35), rgba(40,25,10,.55)); opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; overflow: hidden; }
#celebrate.show { opacity: 1; visibility: visible; }
#sky { position: absolute; inset: 0; pointer-events: none; }
.fkite { position: absolute; bottom: -80px; width: 34px; height: 34px; animation: fly linear forwards; }
.fkite i { display: block; width: 100%; height: 100%; transform: rotate(45deg); border-radius: 3px; }
.fkite::after { content: ""; position: absolute; left: 16px; top: 38px; width: 2px; height: 46px; background: repeating-linear-gradient(currentColor 0 5px, transparent 5px 9px); animation: sway 1.2s ease-in-out infinite alternate; transform-origin: top; }
@keyframes fly { 0% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(var(--dx), -60vh) rotate(10deg); } 100% { transform: translate(calc(var(--dx) * -0.5), -125vh) rotate(-6deg); } }
@keyframes sway { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.confetti { position: absolute; top: -20px; width: 8px; height: 14px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(720deg); } }
.cele-card { position: relative; text-align: center; padding: 36px 44px; background: rgba(251,249,244,.88); backdrop-filter: blur(16px); border-radius: 26px; box-shadow: var(--shadow); border: 1px solid #fff; animation: rise .8s .2s both; }
.cele-card h2 { font-weight: 300; font-size: clamp(30px, 4.5vw, 52px); letter-spacing: .04em; margin: 6px 0 8px; }
.cele-card .deva { font-size: 17px; }
.cele-card p { color: #6c624f; }

#touch { display: none; position: fixed; inset: 0; z-index: 20; pointer-events: none; }
#touch.show { display: block; }
#stick { position: absolute; left: 34px; bottom: 90px; width: 128px; height: 128px; border-radius: 50%; background: rgba(251,249,244,.32); border: 1.5px solid rgba(255,255,255,.7); backdrop-filter: blur(6px); pointer-events: auto; touch-action: none; }
#stick .knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e6d7b5); border: 1px solid var(--gold); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
#lookpad { position: absolute; right: 0; top: 0; width: 55%; height: 100%; pointer-events: auto; touch-action: none; }
.tbtns { position: absolute; right: 26px; bottom: 90px; display: flex; gap: 12px; align-items: flex-end; pointer-events: auto; }
.tbtns button { width: 62px; height: 62px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); background: rgba(251,249,244,.55); backdrop-filter: blur(8px); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); touch-action: none; }
.tbtns #tE { width: 76px; height: 76px; background: var(--gold); color: #2b2620; font-size: 22px; font-weight: 600; }
body.touch #help, body.touch #crosshair { display: none; }

#fade { position: fixed; inset: 0; z-index: 60; background: #0d0b08; opacity: 0; pointer-events: none; transition: opacity .35s ease; }
#fade.on { opacity: 1; }

@media (max-width: 760px) {
  .start-grid { grid-template-columns: 1fr; }
  .keys { grid-template-columns: 1fr; }
  #floorBadge { max-width: 60vw; padding: 8px 12px; }
  #floorId { font-size: 38px; }
  #floorTag { display: none; }
  #minimap { width: 128px; height: 128px; }
  #counts { bottom: auto; top: 128px; flex-direction: column; }
  .chip b { display: none; }
}