/* ---------- page switching ---------- */
.pages{pointer-events:auto;display:flex;gap:2px;padding:3px;background:var(--panel);border:1px solid var(--panel-line);border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pages a{color:var(--ink);text-decoration:none;font-size:15px;padding:6px 14px;border-radius:999px;line-height:1.2;white-space:nowrap}
.pages a[aria-current="page"]{background:var(--genda);color:var(--shyam-deep);font-weight:700}
.pages .short{display:none}
body.on-pk .sky,body.on-pk #stars,body.on-pk .clock{display:none}
body.on-pk{background:#211812}
body.on-pk .pages,body.on-pk .sound{background:rgba(33,24,18,.86);border-color:rgba(233,162,59,.5)}
body.on-pk .pages a[aria-current="page"]{background:#E9A23B;color:#211812}
.close-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.close-actions a.btn{text-decoration:none}
.hint a{color:var(--genda-soft)}
@media (max-width:640px){
  .pages .long{display:none}.pages .short{display:inline}
  .pages a{padding:6px 11px;font-size:14px}
  #sound-l{display:none}
  .sound{padding:8px 10px}
}

/* ---------- parikrama tokens ---------- */
.pk{--earth:#211812;--earth-2:#2E231B;--earth-3:#3B2E24;--dust:#E4D3B6;--paper:#F1E6D2;--muted:#C9B79B;--sand:#C4643E;--sand-d:#8E3F24;--marigold:#E9A23B;--tulsi:#6E8B4E;--line:rgba(233,162,59,.35);
  color:var(--paper);background:var(--earth);font-family:var(--body)}
.pk[hidden]{display:none}

/* hero */
.pk-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding:0 clamp(18px,5vw,64px) clamp(36px,8vh,80px)}
.pk-hero-art{position:absolute;inset:0;width:100%;height:100%}
.pk-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,24,18,0) 35%,rgba(33,24,18,.55) 65%,rgba(33,24,18,.96) 100%);pointer-events:none}
.pk-hero-copy{position:relative;z-index:2;max-width:40rem}
.pk-deva{font-family:var(--display);color:var(--marigold);font-size:clamp(30px,4.2vw,52px);margin:0;line-height:1.2}
.pk h1{font-family:var(--body);font-weight:700;font-size:clamp(34px,5.4vw,68px);line-height:1.02;margin:.1em 0 .35em;letter-spacing:-.01em;color:var(--paper)}
.pk-lede{font-size:clamp(17px,1.2vw + 10px,21px);color:var(--dust);margin:0 0 1.2em;max-width:36em}
.pk .btn{background:var(--marigold);color:var(--earth);box-shadow:0 3px 0 #8a5a12;text-decoration:none;display:inline-block}
.pk .btn:hover{background:#F2B85B}
.pk .btn.ghost{background:transparent;color:var(--paper);border:1.5px solid var(--marigold);box-shadow:none}
.pk .btn.ghost:hover{background:rgba(233,162,59,.14)}

/* body layout */
.pk-body{display:grid;grid-template-columns:minmax(260px,330px) minmax(0,1fr);gap:clamp(20px,3.5vw,48px);max-width:1320px;margin:0 auto;padding:clamp(28px,5vh,56px) clamp(14px,3vw,40px) 40px;align-items:start}
.pk-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 74px)}
.pk-panel{background:var(--earth-2);border:1px solid var(--line);border-radius:8px;padding:14px}
.pk-map{display:block;width:100%;height:auto;background:#EADCC2;border-radius:5px}
.pk-map-note{font-size:13px;color:var(--muted);margin:6px 2px 10px;font-style:italic}
.pk-map .stop-dot{cursor:pointer}
.pk-map .stop-dot circle{transition:r .2s}
.pk-map .stop-dot.here circle.ring{stroke:#C4643E;stroke-width:2.5}
.pk-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.pk-stats div{background:var(--earth-3);border-radius:5px;padding:7px 10px}
.pk-stats dt{font-size:13px;color:var(--muted)}
.pk-stats dd{margin:0;font-size:20px;font-weight:700;color:var(--paper);font-variant-numeric:tabular-nums}
.pk-kit{display:grid;gap:6px}
.pk-kit-h{margin:0 0 2px;font-size:14px;color:var(--muted)}
.kit{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;text-align:left;background:var(--earth-3);border:1px solid transparent;color:var(--paper);border-radius:6px;padding:8px 10px;font-size:15px}
.kit:hover{border-color:var(--line)}
.kit-i{font-size:19px;line-height:1}
.kit-s{font-size:13px;color:var(--marigold);text-align:right}
.kit.alert{border-color:#E46A4A;background:#4A2A20}
.kit.alert .kit-s{color:#FF9C7E}
.pk .pk-mapbtn{display:none}

/* stops */
.pk-stops{display:grid;gap:clamp(56px,10vh,110px)}
.stop{scroll-margin-top:90px}
.view{position:relative;margin:0;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.45);line-height:0}
.view svg{display:block;width:100%;height:auto;aspect-ratio:16/9}
.view::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(20,12,6,.42) 100%);z-index:2}
.view::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);background-size:180px;mix-blend-mode:overlay;opacity:.55;z-index:3}
.stop-text{max-width:40rem;padding:18px 2px 0}
.stop-meta{margin:0 0 .25em;color:var(--marigold);font-size:.95em;font-variant-numeric:tabular-nums}
.stop h2{font-family:var(--body);font-weight:700;font-size:clamp(26px,1.6vw + 16px,38px);line-height:1.12;margin:0 0 .5em;color:var(--paper)}
.stop h2 span{display:block;font-family:var(--deva);font-weight:400;font-size:.62em;color:var(--dust);margin-top:.15em}
.stop p{margin:0 0 .85em;color:var(--dust)}
.stop .tip{color:var(--paper);border-left:3px solid var(--sand);padding:.1em 0 .1em .8em;font-size:.95em}
.stop-actions{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0}
.recap{font-size:1.1em;color:var(--paper)!important}

/* monkey hostage card */
.hostage{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;line-height:1.45;background:rgba(33,24,18,.93);border:1px solid var(--marigold);border-radius:8px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:rise .35s ease-out}
.hostage[hidden]{display:none}
.hostage p{margin:0;flex:1 1 16rem;color:var(--paper);font-size:16px}
.hostage .btn{font-size:15px;padding:.5em 1em}
@keyframes rise{from{transform:translateY(12px);opacity:0}}

/* speech bubbles in scenes */
.bubble{font-family:var(--body);font-size:17px;font-weight:700;fill:#211812}
.bubble-bg{fill:#F1E6D2;opacity:.94}

.pk-foot{text-align:center;color:var(--muted);font-size:14px;padding:40px 20px calc(env(safe-area-inset-bottom,0px) + 40px);max-width:44rem;margin:0 auto}

/* silence */
.pk.silent .view{filter:saturate(.75) brightness(.92);transition:filter 1.5s}

@media (max-width:900px){
  .pk-body{grid-template-columns:1fr;padding-top:0}
  .pk-side{top:calc(env(safe-area-inset-top,0px) + 62px);z-index:15;margin:0 -14px;padding:8px 14px;background:rgba(33,24,18,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;gap:8px;align-items:center}
  .pk-panel{flex:1;background:none;border:0;padding:0;display:flex;gap:8px;align-items:center;min-width:0}
  .pk-map-wrap{display:none}
  .pk-side.map-open .pk-map-wrap{display:block;position:fixed;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 124px);background:var(--earth-2);border:1px solid var(--line);border-radius:10px;padding:10px;max-width:420px;margin:0 auto;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  .pk-stats{display:flex;gap:6px;margin:0;flex:1;min-width:0}
  .pk-stats div{padding:4px 8px;flex:1;min-width:0}
  .pk-stats div:nth-child(3),.pk-stats div:nth-child(4){display:none}
  .pk-body>*{min-width:0}
  .pk{overflow-x:clip}
  .pk-stats dt{font-size:11px}
  .pk-stats dd{font-size:15px;white-space:nowrap}
  .pk-kit{display:flex;gap:6px}
  .pk-kit-h{display:none}
  .kit{grid-template-columns:auto;padding:6px 7px;position:relative}
  .kit-i{font-size:17px}
  #kit-frooti .kit-i::after{content:attr(data-n);position:absolute;right:1px;bottom:0;font-size:11px;font-weight:700;color:#E9A23B;font-style:normal}
  .kit-l,.kit-s{display:none}
  .kit.alert::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#FF6B4A}
  .pk .pk-mapbtn{display:block;padding:.45em .8em;font-size:14px}
  .pk-stops{padding-top:20px}
  .view{margin:0 -14px;border-radius:0}
  .stop-text{padding-top:14px}
  .view{overflow:visible;background:transparent;box-shadow:none}
  .hostage{position:relative;left:auto;right:auto;bottom:auto;margin:0;border-radius:0;border-left:0;border-right:0;padding:12px 14px}
  .hostage p{font-size:15px}
}
@media (max-width:360px){ .pk-stats div:nth-child(2){display:none} }