/* Map view: a paper maquette of the gallery in CSS 3D, plus the full-screen room page.
   Loaded after styles.css; reuses its tokens and room styles. */

:root[data-view="map"] .skip { display: none; }

:root[data-view="map"] { --wall: oklch(97.2% 0.013 85); --wall-2: oklch(93.5% 0.02 82); }
:root[data-view="map"][data-theme="dark"] {
  --wall: oklch(19.5% 0.045 258); --wall-2: oklch(25% 0.05 258);
  --ink: oklch(94% 0.015 85); --ink-soft: oklch(80% 0.03 85);
  --line: oklch(94% 0.015 85 / .14); --accent: var(--gold-bright);
}
:root[data-view="map"] body {
  background:
    linear-gradient(180deg, oklch(90% 0.035 228) 0, oklch(94.5% 0.022 215) 24%, oklch(95.5% 0.022 80) 60%, oklch(96.5% 0.018 82)) fixed;
}
:root[data-view="map"][data-theme="dark"] body {
  background:
    radial-gradient(ellipse 70% 40% at 70% 0%, oklch(40% 0.08 250 / .45), transparent 70%),
    linear-gradient(180deg, oklch(15% 0.05 265) 0, oklch(21% 0.055 252) 55%, oklch(19.5% 0.045 258)) fixed;
}

/* Lanterns from the invitation drifting behind the map. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
:root[data-view="scroll"] .sky { display: none; }
.sky img {
  position: absolute; width: clamp(90px, 20vw, 190px); height: auto; opacity: .55;
  filter: drop-shadow(0 0 22px oklch(88% 0.14 85 / .5));
  animation: rise 46s linear infinite;
}
.sky img:nth-child(1) { left: -6%; top: 58%; }
.sky img:nth-child(2) { right: -4%; top: 80%; width: clamp(60px, 12vw, 120px); animation-duration: 58s; animation-delay: -21s; }
.sky img:nth-child(3) { right: 1%; top: 104%; width: clamp(50px, 9vw, 90px); animation-duration: 64s; animation-delay: -40s; opacity: .4; }
:root[data-theme="dark"] .sky img { opacity: .85; filter: drop-shadow(0 0 26px oklch(85% 0.16 80 / .75)); }
@keyframes rise {
  0% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(3vw, -60vh, 0) rotate(3deg); }
  100% { transform: translate3d(-1vw, -120vh, 0) rotate(-2deg); }
}

:root {
  --plinth-1: oklch(63% 0.105 45);       /* terracotta: Wing I, Adat */
  --plinth-2: oklch(67% 0.055 155);      /* sage: Wing II, Kontemporer & Eksploratif */
  --plinth-cinema: oklch(33% 0.075 15);  /* velvet: the cinema */
  --paint: oklch(97.5% 0.018 85);        /* ivory paint on the plinths */
  --floor-adat: oklch(94.5% 0.028 78);   /* sand */
  --floor-kont: oklch(95.5% 0.012 205);  /* mist */
  --ink-terra: oklch(58% 0.12 42);
  --ink-gold: oklch(74% 0.12 82);
  --ink-sage: oklch(58% 0.07 155);
  --ink-blue: oklch(62% 0.06 235);
  --m-paper: oklch(97.5% 0.008 80);      /* wall faces lit from the front */
  --m-shade: oklch(91.5% 0.014 75);      /* side faces */
  --m-rim: oklch(99% 0.004 80);
  --m-line: oklch(25% 0.07 10 / .14);
  --m-ground: oklch(92% 0.028 78);
  --m-hall: oklch(96% 0.014 80);
}
:root[data-theme="dark"] {
  --plinth-1: oklch(40% 0.075 45);
  --plinth-2: oklch(40% 0.04 155);
  --plinth-cinema: oklch(27% 0.06 15);
  --paint: oklch(90% 0.03 85);
  --floor-adat: oklch(31% 0.035 55);
  --floor-kont: oklch(30% 0.02 210);
}
:root[data-theme="dark"] {           /* moonlit ivory model on a night-blue plinth */
  --m-paper: oklch(43% 0.02 80);
  --m-shade: oklch(35% 0.02 80);
  --m-rim: oklch(55% 0.025 82);
  --m-line: oklch(94% 0.015 85 / .12);
  --m-ground: oklch(25% 0.04 255);
  --m-hall: oklch(29% 0.025 250);
}

/* ---------- Page ---------- */
.mapview {
  max-width: 1240px; margin: 0 auto;
  padding: calc(var(--bar-h) + clamp(22px, 6vw, 48px)) clamp(12px, 4vw, 48px) clamp(40px, 8vw, 80px);
  display: grid; gap: clamp(8px, 3vw, 24px);
}
.mapview__head { text-align: center; }
.mapview__mono { width: clamp(44px, 12vw, 84px); margin: 0 auto 10px; color: var(--gold); display: block; }
.mapview h1 { font-size: clamp(2.1rem, 9.5vw, 5rem); line-height: .98; letter-spacing: -.01em; text-wrap: balance; }
.mapview h1 .of { display: block; font-style: italic; font-size: .45em; color: var(--ink-soft); margin-bottom: .15em; }
.mapview__intro { margin: 14px auto 0; max-width: 34ch; color: var(--ink-soft); font-size: var(--fs-md); text-wrap: pretty; }
.mapview__progress {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 0; font-style: italic; font-size: var(--fs-sm); color: var(--accent);
}
.mapview__progress:empty { display: none; }
.mapview__progress.is-complete::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px color-mix(in oklch, var(--gold) 30%, transparent); }

/* ---------- The maquette ---------- */
/* Not inherited: only the scene uses them, so a pointer tilt re-styles one element, not the whole model. */
@property --tilt { syntax: "<angle>"; inherits: false; initial-value: 48deg; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: -12deg; }

.maq {
  --u: 26px;
  --W: 9.2; --D: 17.6;
  --h: calc(var(--u) * 1.3);    /* full wall height */
  --hl: calc(var(--u) * .3);     /* low wall (cutaway) */
  position: relative; width: 100%; height: var(--maq-h, 520px);
  max-width: none;
  touch-action: manipulation;
}
.maq__camera { position: absolute; inset: 0; }
.maq__scene {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--W) * var(--u)); height: calc(var(--D) * var(--u));
  margin-left: calc(var(--W) * var(--u) / -2); margin-top: calc(var(--D) * var(--u) / -2);
  transform-style: preserve-3d;
  transform: translate(var(--shift, 0px), var(--nudge, 0px)) rotateX(var(--tilt)) rotateZ(var(--spin));
}
.maq__scene * { transform-style: preserve-3d; }
.maq__scene img, .maq__scene svg { transform-style: flat; }
.maq__scene .m-ground, .maq__scene .m-ground * { transform-style: flat; }

/* Ground plate */
.m-ground {
  position: absolute; left: calc(var(--u) * -2.4); top: calc(var(--u) * -8.8); right: calc(var(--u) * -2.4); bottom: calc(var(--u) * -1.7);
  background: var(--m-ground);
  background-image: linear-gradient(135deg, oklch(100% 0 0 / .18), transparent 55%); border-radius: calc(var(--u) * .3);
  box-shadow: 0 0 0 1px var(--m-line), 0 calc(var(--u) * 1.4) calc(var(--u) * 2.6) oklch(25% 0.05 20 / .18);
  transform: translateZ(-4px);
}
/* Flat pieces inside the ground plate: positions are in model units, offset by the plate's own origin. */
.m-ground .m-flat { left: calc((var(--x) + 2.4) * var(--u)); top: calc((var(--y) + 8.8) * var(--u)); transform: none; }
.m-ground .m-wingname span, .m-ground .m-entrance span { transform-origin: center; }

/* Flat pieces laid on the ground plane: plinths and painted labels. */
.m-flat {
  position: absolute; pointer-events: none;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--d) * var(--u));
}
.m-plinth { border-radius: calc(var(--u) * .22); }
.m-plinth--1 { background: var(--plinth-1); box-shadow: 0 calc(var(--u) * .14) 0 color-mix(in oklch, var(--plinth-1) 70%, black); }
.m-plinth--cinema { background: var(--plinth-cinema); box-shadow: 0 calc(var(--u) * .14) 0 color-mix(in oklch, var(--plinth-cinema) 60%, black); }
.m-marquee { color: var(--ink-gold); }
.m-walk { background: var(--m-hall); background-image: linear-gradient(90deg, transparent calc(50% - .75px), color-mix(in oklch, var(--accent) 45%, transparent) calc(50% - .75px) calc(50% + .75px), transparent 0); }
.m-marquee span {
  font-size: max(9.5px, calc(var(--u) * .3)); letter-spacing: .2em; text-transform: uppercase;
  padding: calc(var(--u) * .08) calc(var(--u) * .2);
  border: 1px dotted currentColor; border-radius: 2px;
}
.m-plinth--2 { background: var(--plinth-2); box-shadow: 0 calc(var(--u) * .14) 0 color-mix(in oklch, var(--plinth-2) 70%, black); }
.m-paint { display: grid; place-items: center; white-space: nowrap; color: var(--paint); transform: translateZ(1px); font-variant-numeric: lining-nums; }
.m-no { font-size: calc(var(--u) * .8); line-height: 1; }
.m-no::after { content: ""; position: absolute; top: 50%; width: calc(var(--u) * .22); height: 1.5px; background: currentColor; opacity: .75; }
.m-no--left::after { left: 100%; }
.m-no--right::after { right: 100%; }
.m-no { border-radius: 50%; transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .45s var(--ease-out), transform .45s var(--ease-out); }
.m-ground .m-no.is-selected {                 /* spotlight: a lit disc, the number takes the plinth colour */
  background: oklch(97% 0.035 88); transform: scale(1.25);
  box-shadow: 0 0 0 calc(var(--u) * .12) oklch(97% 0.035 88 / .35), 0 0 calc(var(--u) * 1.2) oklch(92% 0.12 85 / .85);
}
.m-no--left.is-selected { color: var(--plinth-1); }
.m-no--right.is-selected { color: var(--plinth-2); }
.m-no.is-selected::after { opacity: 0; }
.m-wingname { overflow: visible; }
.m-wingname span { position: absolute; left: 50%; top: 50%; width: max-content; transform: translate(-50%, -50%) rotate(-90deg); font-size: max(9.5px, calc(var(--u) * .44)); letter-spacing: .16em; text-transform: uppercase; }
.m-wingname--2 span { transform: translate(-50%, -50%) rotate(90deg); }
.m-entrance { color: var(--ink-soft); }
.m-entrance span { font-size: max(10px, calc(var(--u) * .5)); letter-spacing: .3em; text-transform: uppercase; }

/* A room: floor button plus paper walls */
.m-room {
  position: absolute;
  left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--d) * var(--u));
  --floor: oklch(95% 0.012 80);
}
.m-floor {
  position: absolute; inset: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
  background-color: var(--floor); background-image: var(--pat, none); background-size: var(--pat-size, auto);
  background-position: var(--pat-pos, 0 0); background-repeat: var(--pat-repeat, repeat); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--m-line);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.m-floor:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .m-room:hover .m-floor, .m-room.is-hot .m-floor { box-shadow: inset 0 0 0 2px var(--accent); } }

.m-wall { position: absolute; cursor: pointer; background: var(--m-paper); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .35); }
.m-wall--n { left: 0; width: 100%; top: calc(var(--h) * -1); height: var(--h); transform-origin: bottom; transform: rotateX(-90deg); border-top: 2px solid var(--m-rim); }
.m-wall--e { left: 100%; top: 0; width: var(--h); height: 100%; transform-origin: left; transform: rotateY(-90deg); background: var(--m-shade); border-right: 2px solid var(--m-rim); flex-direction: column; }
.m-wall--w { left: calc(var(--hl) * -1); top: 0; width: var(--hl); height: 100%; transform-origin: right; transform: rotateY(90deg); background: var(--m-shade); border-left: 2px solid var(--m-rim); }
.m-wall--s { left: 0; width: 100%; top: 100%; height: var(--hl); transform-origin: top; transform: rotateX(90deg); background: var(--m-paper); border-bottom: 2px solid var(--m-rim); }
.m-wall--s.is-split { background: linear-gradient(90deg, var(--m-paper) 0 42%, transparent 42% 58%, var(--m-paper) 58%); border-bottom-color: transparent; }

/* Framed prints on the walls */
.m-print {
  display: block; height: 66%; aspect-ratio: 4 / 5; flex: none;
  padding: 2px; background: oklch(99% 0.003 80);
  box-shadow: 0 0 0 1px oklch(40% 0.03 40 / .35), 0 1px 3px oklch(20% 0.03 30 / .25);
}
.m-wall--e .m-print { height: auto; width: 62%; aspect-ratio: 5 / 4; }
.m-print img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root[data-theme="dark"] .m-print { background: oklch(88% 0.03 80); box-shadow: 0 0 0 1px oklch(0% 0 0 / .4), 0 0 12px oklch(85% 0.1 80 / .35); }

/* Room floors. Wing I (Adat): sand with terracotta and gold motifs. Wing II: mist with sage and blue. */
.m-room--bugis {            /* lipa' sabbe plaid */
  --floor: var(--floor-adat);
  --pat:
    linear-gradient(90deg, color-mix(in oklch, var(--ink-terra) 26%, transparent) 0 26%, transparent 26% 44%, color-mix(in oklch, var(--ink-gold) 34%, transparent) 44% 52%, transparent 52%),
    linear-gradient(0deg, color-mix(in oklch, var(--ink-terra) 20%, transparent) 0 26%, transparent 26% 44%, color-mix(in oklch, var(--ink-gold) 28%, transparent) 44% 52%, transparent 52%);
  --pat-size: calc(var(--u) * .95) calc(var(--u) * .95);
}
.m-room--jawa {             /* kawung */
  --floor: var(--floor-adat);
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff8ec' fill-opacity='.75' stroke='%23b0613a' stroke-opacity='.4' stroke-width='.8'%3E%3Cellipse cx='20' cy='9' rx='6' ry='9'/%3E%3Cellipse cx='20' cy='31' rx='6' ry='9'/%3E%3Cellipse cx='9' cy='20' rx='9' ry='6'/%3E%3Cellipse cx='31' cy='20' rx='9' ry='6'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1.8' fill='%23c9a14f' fill-opacity='.8'/%3E%3C/svg%3E");
  --pat-size: calc(var(--u) * 1.1) calc(var(--u) * 1.1);
}
.m-room--palembang {        /* songket lattice with gold points */
  --floor: var(--floor-adat);
  --pat:
    radial-gradient(circle, color-mix(in oklch, var(--ink-gold) 80%, transparent) 12%, transparent 15%),
    repeating-linear-gradient(45deg, color-mix(in oklch, var(--ink-gold) 45%, transparent) 0 1px, transparent 1px calc(var(--u) * .5)),
    repeating-linear-gradient(-45deg, color-mix(in oklch, var(--ink-gold) 45%, transparent) 0 1px, transparent 1px calc(var(--u) * .5));
  --pat-size: calc(var(--u) * .707) calc(var(--u) * .707), auto, auto;
}
.m-room--woven {            /* cloth bands in the wing's cool inks */
  --floor: var(--floor-kont);
  --pat: linear-gradient(90deg,
    color-mix(in oklch, var(--ink-sage) 38%, transparent) 0 18%, transparent 18% 26%,
    color-mix(in oklch, var(--ink-blue) 34%, transparent) 26% 40%, transparent 40% 46%,
    color-mix(in oklch, var(--ink-terra) 26%, transparent) 46% 56%, transparent 56% 64%,
    color-mix(in oklch, var(--ink-sage) 24%, transparent) 64% 82%, transparent 82% 88%,
    color-mix(in oklch, var(--ink-blue) 22%, transparent) 88%);
  --pat-size: calc(var(--u) * 1.8) 100%;
}
.m-room--peranakan {        /* Peranakan tiles in sage and blue */
  --floor: var(--floor-kont);
  --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%236e9a80' fill-opacity='.38'%3E%3Cellipse cx='30' cy='15' rx='7' ry='12'/%3E%3Cellipse cx='30' cy='45' rx='7' ry='12'/%3E%3Cellipse cx='15' cy='30' rx='12' ry='7'/%3E%3Cellipse cx='45' cy='30' rx='12' ry='7'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='5' fill='%236d8fb3' fill-opacity='.6'/%3E%3Cg fill='%236d8fb3' fill-opacity='.35'%3E%3Cpath d='M0 0h9L0 9zM60 0h-9l9 9zM0 60h9l-9-9zM60 60h-9l9-9z'/%3E%3C/g%3E%3C/svg%3E");
  --pat-size: calc(var(--u) * .9) calc(var(--u) * .9);
}
.m-room--bappenas {         /* paving grid and a zebra crossing */
  --floor: var(--floor-kont);
  --pat:
    repeating-linear-gradient(90deg, oklch(99% 0.005 220 / .95) 0 calc(var(--u) * .22), transparent 0 calc(var(--u) * .44)),
    linear-gradient(90deg, color-mix(in oklch, var(--ink-blue) 30%, transparent) 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in oklch, var(--ink-blue) 30%, transparent) 1px, transparent 1px);
  --pat-size: 70% calc(var(--u) * .55), calc(var(--u) * .6) calc(var(--u) * .6), calc(var(--u) * .6) calc(var(--u) * .6);
  --pat-pos: 90% 82%, 0 0, 0 0;
  --pat-repeat: no-repeat, repeat, repeat;
}
.m-room--projection {       /* dark room with scan lines of projected light */
  --floor: oklch(16% 0.015 280);
  --pat: repeating-linear-gradient(0deg, oklch(86% 0.13 150 / .07) 0 1px, transparent 1px 6px);
}
.m-room--projection .m-wall { background: oklch(21% 0.015 280); border-color: oklch(30% 0.02 280); }
.m-room--projection .m-glyph {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-family: "Noto Sans Buginese", "Noto Sans Javanese", serif; font-size: calc(var(--u) * .95); white-space: nowrap;
  color: oklch(86% 0.13 150 / .8); text-shadow: 0 0 8px oklch(86% 0.13 150 / .9);
  transform: translateZ(1px);
}
.m-room--out-of-character { /* lamp-lit hotel carpet */
  --floor: oklch(30% 0.06 45);
  --pat:
    radial-gradient(ellipse at 60% 30%, oklch(62% 0.13 60 / .7), transparent 65%),
    repeating-conic-gradient(oklch(42% 0.09 40 / .55) 0 25%, transparent 0 50%);
  --pat-size: auto, calc(var(--u) * .7) calc(var(--u) * .7);
}
.m-room--out-of-character .m-wall { background: oklch(34% 0.05 40); border-color: oklch(45% 0.06 45); }
.m-room--film { --floor: oklch(20% 0.04 15); }   /* the theatre: dark velvet room */
.m-room--film .m-wall { background: oklch(22% 0.035 15); border-color: oklch(34% 0.05 15); }
.m-room--film .m-wall--e, .m-room--film .m-wall--w {   /* warm wall sconces */
  background-color: oklch(19% 0.035 15);
  background-image: radial-gradient(circle at 50% 35%, oklch(88% 0.12 80 / .9) 0 5%, oklch(80% 0.12 70 / .25) 12%, transparent 26%);
  background-size: 100% calc(var(--u) * 1.4);
}
.m-room--film .m-wall--n {                      /* the screen between red curtains */
  background:
    repeating-linear-gradient(90deg, oklch(38% 0.13 22) 0 calc(var(--u) * .12), oklch(30% 0.11 20) calc(var(--u) * .12) calc(var(--u) * .24)) left / 14% 100% no-repeat,
    repeating-linear-gradient(90deg, oklch(38% 0.13 22) 0 calc(var(--u) * .12), oklch(30% 0.11 20) calc(var(--u) * .12) calc(var(--u) * .24)) right / 14% 100% no-repeat,
    oklch(14% 0.02 15);
}
.m-room--film .m-wall--n .m-print { height: 80%; aspect-ratio: 16 / 9; padding: 0; background: oklch(95% 0.02 80); box-shadow: 0 0 calc(var(--u) * .8) oklch(92% 0.08 80 / .7); }
.m-room--film .m-wall--s { background: oklch(22% 0.035 15); }
.m-seats {                                      /* two blocks of red seats with an aisle */
  position: absolute; left: 10%; right: 10%; top: 34%; bottom: 10%; pointer-events: none; transform: translateZ(1px);
  background: radial-gradient(ellipse 38% 32% at 50% 55%, oklch(48% 0.16 25) 78%, transparent 84%);
  background-size: calc(var(--u) * .42) calc(var(--u) * .5);
  -webkit-mask-image: linear-gradient(90deg, #000 44%, transparent 44% 56%, #000 56%);
          mask-image: linear-gradient(90deg, #000 44%, transparent 44% 56%, #000 56%);
}
.m-screenglow {                                 /* light spilling from the screen onto the floor */
  position: absolute; left: 12%; right: 12%; top: 0; height: 40%; pointer-events: none; transform: translateZ(.5px);
  background: radial-gradient(ellipse 60% 90% at 50% 0%, oklch(90% 0.06 80 / .28), transparent 70%);
}
:root[data-theme="dark"] .m-room--jawa { --pat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23fff8ec' fill-opacity='.14' stroke='%23e0a47e' stroke-opacity='.35' stroke-width='.8'%3E%3Cellipse cx='20' cy='9' rx='6' ry='9'/%3E%3Cellipse cx='20' cy='31' rx='6' ry='9'/%3E%3Cellipse cx='9' cy='20' rx='9' ry='6'/%3E%3Cellipse cx='31' cy='20' rx='9' ry='6'/%3E%3C/g%3E%3C/svg%3E"); }
:root[data-theme="dark"] .m-room--bappenas { --pat: repeating-linear-gradient(90deg, oklch(90% 0 0 / .3) 0 calc(var(--u) * .22), transparent 0 calc(var(--u) * .44)), linear-gradient(90deg, oklch(90% 0 0 / .07) 1px, transparent 1px), linear-gradient(0deg, oklch(90% 0 0 / .07) 1px, transparent 1px); }
:root[data-theme="dark"] .m-room.is-visited .m-floor { box-shadow: inset 0 0 calc(var(--u) * 1.2) oklch(80% 0.1 75 / .35), inset 0 0 0 1px var(--m-line); }

/* Hall and lobby */
.m-hall .m-floor, .m-lobby .m-floor { cursor: default; background-color: var(--m-hall); }
.m-lobby .m-floor { background-image: repeating-conic-gradient(oklch(50% 0.02 80 / .07) 0 25%, transparent 0 50%); background-size: calc(var(--u) * 1.2) calc(var(--u) * 1.2); }
.m-hall .m-path { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed color-mix(in oklch, var(--accent) 45%, transparent); transform: translateZ(1px); pointer-events: none; }
.m-lobby .m-mono { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); margin: calc(var(--u) * -.75) 0 0 calc(var(--u) * -.75); color: var(--gold); transform: translateZ(1px); pointer-events: none; }

/* You are here */
.m-you {
  position: absolute; left: 0; top: 0; width: calc(var(--u) * .5); height: calc(var(--u) * .5);
  margin: calc(var(--u) * -.25) 0 0 calc(var(--u) * -.25);
  border-radius: 50%; background: var(--accent); pointer-events: none;
  box-shadow: 0 0 0 3px var(--m-hall);
}
.m-you::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--accent); animation: ping 2.2s var(--ease-out) infinite; }
@keyframes ping { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

/* Flat overlay for the entrance caption. */
.maq__tags { position: absolute; inset: 0; pointer-events: none; }
.m-tag--entrance {
  position: absolute; left: 0; top: 0; transform: translate(-50%, 0);
  font-size: var(--fs-xs); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.maq.is-flying .m-tag--entrance { opacity: 0; }
.mapview__head, .sheet { transition: opacity .35s var(--ease-out); }
.mapview.is-flying .mapview__head { opacity: 0; }
@media (min-width: 1024px) { .mapview.is-flying .sheet { opacity: 0; } }

/* Room numbers painted on the floor, near the back wall where they stay visible. */
.m-num {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * .25);
  text-align: center; pointer-events: none; transform: translateZ(1px);
  font-size: calc(var(--u) * .95); line-height: 1; font-variant-numeric: lining-nums;
  color: color-mix(in oklch, var(--ink) 55%, transparent);
}
.m-room--projection .m-num, .m-room--out-of-character .m-num, .m-room--film .m-num { color: oklch(92% 0.02 80 / .75); }
.m-room--film .m-num { display: none; }
:root[data-theme="dark"] .m-num { color: oklch(92% 0.02 80 / .6); }

/* Selected room: lit floor, gold rims, glowing prints. */
.m-room.is-selected .m-floor { background-color: color-mix(in oklch, var(--accent) 22%, var(--floor)); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 calc(var(--u) * 1.4) color-mix(in oklch, var(--accent) 35%, transparent); }
.m-room--projection.is-selected .m-floor, .m-room--out-of-character.is-selected .m-floor, .m-room--film.is-selected .m-floor { box-shadow: inset 0 0 0 2px var(--gold-bright), inset 0 0 calc(var(--u) * 1.4) oklch(80% 0.1 80 / .45); }
.m-room.is-selected .m-wall { border-color: var(--gold); }
.m-room.is-selected .m-num { color: var(--accent); }
.m-room.is-hot .m-num { animation: num-glow 1.2s var(--ease-out) both; }
@keyframes num-glow { 40% { text-shadow: 0 0 12px var(--gold-bright), 0 0 26px var(--gold-bright); color: var(--gold-bright); } 100% { text-shadow: 0 0 6px var(--gold-bright); } }
.m-room.is-pressed .m-floor { box-shadow: inset 0 0 0 3px var(--accent); filter: brightness(1.05); }
.m-room.is-selected .m-print { box-shadow: 0 0 0 1px var(--gold), 0 0 10px oklch(85% 0.1 80 / .6); }

/* ---------- Wall label card ---------- */
.maqcard {
  width: 100%; max-width: 560px; margin: 0 auto;
  padding: 16px 16px 18px;
  background: var(--wall); border-radius: var(--r-card);
  box-shadow: 0 0 0 1px var(--line), 0 24px 40px -30px oklch(25% 0.06 15 / .5);
}
.maqcard__wing { margin: 0 0 6px; text-align: center; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.maqcard__row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.maqcard__name { margin: 0; text-align: center; font-weight: 400; line-height: 1.05; min-height: 3.1em; display: flex; flex-direction: column; justify-content: center; }
.maqcard__name span { font-size: var(--fs-xs); letter-spacing: .16em; color: var(--accent); font-variant-numeric: lining-nums; }
.maqcard__name b { font-weight: 400; font-size: clamp(1.6rem, 7.2vw, 2.2rem); text-wrap: balance; }
.maqcard__name em { font-size: var(--fs-md); color: var(--ink-soft); margin-top: 3px; }
.maqcard__desc { margin: 6px auto 0; max-width: 34ch; text-align: center; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-soft); text-wrap: pretty; }
.maqcard__step {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--wall-2); color: var(--ink); cursor: pointer;
}
.maqcard__step svg { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .maqcard__step:hover { border-color: var(--accent); color: var(--accent); } }
.maqcard__prints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 14px; }
.maqcard__prints img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; background: var(--wall-2); }
.maqcard__prints.is-swapping img { animation: print-in .45s var(--ease-out) both; }
.maqcard__prints.is-swapping img:nth-child(2) { animation-delay: .05s; }
.maqcard__prints.is-swapping img:nth-child(3) { animation-delay: .1s; }
@keyframes print-in { from { opacity: 0; transform: translateY(8px); } }
.maqcard__enter {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 52px; border: 0; border-radius: var(--r-btn);
  background: var(--accent); color: var(--wall);
  font: inherit; font-size: var(--fs-md); letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 14px 26px -16px color-mix(in oklch, var(--accent) 85%, transparent);
}
.maqcard__enter svg { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .maqcard__enter:hover svg { transform: translateX(3px); } }

/* ---------- Room list (text alternative) ---------- */
.roomlist { display: grid; gap: 18px; max-width: 560px; margin: 8px auto 0; width: 100%; }
.roomlist__head { margin: 0 0 4px; font-size: var(--fs-lg); }
.roomlist__head b { font-weight: 400; font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.roomlist__head span { display: block; font-style: italic; font-size: var(--fs-sm); color: var(--ink-soft); }
.roomlist ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.roomlist button {
  display: flex; align-items: baseline; gap: 12px; width: 100%; min-height: 48px; padding: 10px 2px;
  border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink);
  font: inherit; font-size: var(--fs-md); text-align: left; cursor: pointer;
}
.roomlist button > span:first-child { width: 1.6em; flex: none; font-size: var(--fs-xs); color: var(--accent); font-variant-numeric: lining-nums tabular-nums; }
.roomlist button em { margin-left: auto; font-size: var(--fs-sm); color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) { .roomlist button:hover { color: var(--accent); } }
.roomlist button.is-visited::after { content: "Visited"; margin-left: 10px; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.roomlist button.is-visited em { display: none; }

/* ---------- Room page ---------- */
html:has(.roomview[open]) { overflow: hidden; }
.roomview {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--rv-tint, var(--wall)); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.roomview::backdrop { background: transparent; }
.curtain {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  display: grid; place-content: center; text-align: center; gap: 6px; padding: 24px;
  background: var(--c-bg, var(--wall)); color: var(--c-ink, var(--ink));
  opacity: 0; visibility: hidden;
}
.curtain.is-on { visibility: visible; }
.roomview.is-entering { background: transparent; }
.roomview.is-entering .roomview__body, .roomview.is-entering .roomview__nav { visibility: hidden; }
.curtain__no { margin: 0; font-size: var(--fs-xs); letter-spacing: .32em; text-transform: uppercase; opacity: .8; }
.curtain__name { margin: 0; font-size: clamp(2.8rem, 13vw, 6.5rem); line-height: .98; text-wrap: balance; }
.curtain__sub { margin: 4px 0 0; font-style: italic; font-size: var(--fs-sub); opacity: .85; }
.curtain__rule { width: 64px; height: 1px; margin: 14px auto 0; background: currentColor; opacity: .5; transform-origin: center; }
.roomview__bar {
  position: sticky; top: 0; z-index: 21;   /* above the curtain: Close is always there */
  display: flex; align-items: center; gap: 12px; height: var(--bar-h); padding: 0 12px;
  background: color-mix(in oklch, var(--rv-tint, var(--wall)) 74%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  color: var(--rv-ink, var(--ink));
  border-bottom: 1px solid color-mix(in oklch, var(--rv-ink, var(--ink)) 10%, transparent);
}
.roomview__back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 1px solid color-mix(in oklch, var(--rv-ink, var(--ink)) 18%, transparent); border-radius: 999px;
  background: color-mix(in oklch, var(--rv-ink, var(--ink)) 7%, transparent); color: inherit;
  font: inherit; font-size: var(--fs-md); cursor: pointer;
}
.roomview__back svg { width: 14px; height: 14px; }
.roomview__title:focus { outline: none; }
.roomview__title { margin: 0; flex: 1; min-width: 0; text-align: right; font-size: var(--fs-sm); color: inherit; opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roomview .room { padding-top: clamp(40px, 9vw, 96px); }
.roomview .room { transition: none; }   /* the page reads this colour for its bar; no fade-in from transparent */
@media (max-width: 380px) { .roomview__no { display: none; } }   /* narrow phones: the room name alone */
.roomview .room__plaque { top: calc(var(--bar-h) + 40px); }
.roomview .epilogue { min-height: calc(100svh - var(--bar-h)); }
.roomview__nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: color-mix(in oklch, var(--rv-ink, var(--ink)) 12%, transparent); border-top: 1px solid color-mix(in oklch, var(--rv-ink, var(--ink)) 12%, transparent);
}
/* The room already names itself in the bar: no second "Ruang 0X" label, and the end panel needs no kicker. */
.roomview .room__no, .roomview .continue__kicker { display: none; }
.roomview__step {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 88px; padding: 18px clamp(16px, 5vw, 40px) calc(18px + env(safe-area-inset-bottom));
  border: 0; background: var(--rv-tint, var(--wall)); color: var(--rv-ink, var(--ink)); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .25s var(--ease-out), scale .16s var(--ease-out);
}
.roomview__step span { font-size: var(--fs-xs); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.roomview__step b { font-weight: 400; font-size: var(--fs-sub); line-height: 1.15; }
.roomview__step--next { align-items: flex-end; text-align: right; }
@media (hover: hover) and (pointer: fine) { .roomview__step:hover { background: color-mix(in oklch, var(--rv-tint, var(--wall)) 92%, var(--rv-ink, var(--ink))); } }
::view-transition-group(root) { animation-duration: .3s; }

/* Landscape phones: size the title by height so the header and panel both fit. */
@media (max-height: 500px) and (max-width: 1023px) { .mapview h1 { font-size: clamp(1.8rem, 10vh, 2.6rem); } .mapview { padding-top: calc(var(--bar-h) + 14px); } }

/* Phones and tablets: let the model use the full screen width. */
@media (max-width: 1023px) {
  .mapview > .maq { width: auto; margin-inline: calc(-1 * clamp(12px, 4vw, 48px)); }
  /* The header keeps only what orients: kicker, title, progress and the guide. */
  .mapview__mono, .mapview__intro { display: none; }
  .mapview { padding-bottom: calc(var(--sheet-space, 88px) + 20px); }

  /* One panel, Apple Maps style: a translucent material that rests low and rises with the finger. */
  .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 26;
    height: var(--sheet-h, 88svh); transform: translate3d(0, 100%, 0);
    display: flex; flex-direction: column;
    background: color-mix(in oklch, var(--wall) 80%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
    border-radius: 20px 20px 0 0;
    box-shadow: inset 0 1px 0 oklch(100% 0 0 / .45), 0 -1px 0 color-mix(in oklch, var(--ink) 8%, transparent), 0 -18px 44px -20px oklch(22% 0.05 250 / .38);
    touch-action: none; will-change: transform;
  }
  :root[data-theme="dark"] .sheet { box-shadow: inset 0 1px 0 oklch(100% 0 0 / .1), 0 -18px 44px -16px oklch(5% 0.03 260 / .7); }
  .sheet__grip { flex: none; padding: 8px 16px 6px; cursor: grab; }
  .sheet.is-dragging .sheet__grip { cursor: grabbing; }
  .sheet__handle { display: block; width: 38px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: color-mix(in oklch, var(--ink) 24%, transparent); }
  .sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  .sheet__prompt { margin: 0; font-size: var(--fs-md); color: var(--ink); }
  .sheet.has-room .sheet__prompt { visibility: hidden; }
  .sheet__all {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
    border: 0; border-radius: 999px; background: color-mix(in oklch, var(--ink) 7%, transparent); color: var(--ink);
    font: inherit; font-size: var(--fs-sm); cursor: pointer;
  }
  .sheet__all svg { width: 12px; height: 12px; transition: rotate .3s var(--ease-out); }
  .sheet[data-state="list"] .sheet__all svg { rotate: 180deg; }
  .sheet__scroll { flex: 1; min-height: 0; overflow: hidden; padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
  .sheet[data-state="list"] .sheet__scroll { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  .sheet[data-state="rest"] .sheet__scroll { visibility: hidden; }
  .sheet__all { white-space: nowrap; flex: none; }
  .sheet__prompt { min-width: 0; line-height: 1.25; }
  .sheet:not(.has-room) .maqcard, .sheet[data-state="list"] .maqcard { display: none; }
  .sheet .maqcard { max-width: 520px; padding: 2px 0 6px; background: none; border: 0; box-shadow: none; }
  .sheet .maqcard__name { min-height: 0; }
  .sheet .maqcard__prints { margin: 12px 0; }
  .sheet .maqcard__prints img { aspect-ratio: 1; border-radius: 8px; }
  .sheet .maqcard__wing { margin-bottom: 2px; }
  .sheet .roomlist { margin-top: 4px; }

  /* Short screens: the panel keeps to name, subtitle and Enter, so the model stays in view. */
  @media (max-height: 740px) {
    .sheet .maqcard__wing, .sheet .maqcard__desc { display: none; }
    .sheet .maqcard__prints { grid-template-columns: repeat(3, 1fr); margin: 8px 0; }
    .sheet .maqcard__prints img { aspect-ratio: 16 / 10; }
    .sheet .maqcard__enter { min-height: 48px; }
  }
  @media (max-height: 600px) {
    .sheet .maqcard__prints { display: none; }
    .sheet .maqcard__name { padding-bottom: 8px; }
  }
  /* Room pages lead with photographs on small screens. */
  .roomview .room .house { display: none; }
  .roomview .room { padding-top: 28px; }
}
@media (prefers-reduced-transparency: reduce) {
  .sheet, .roomview__bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet { background: var(--wall); }
  .roomview__bar { background: var(--rv-tint, var(--wall)); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) and (max-height: 920px) { .mapview__mono { display: none; } .mapview__intro { margin-top: 10px; } }
@media (min-width: 1024px) {
  .mapview {
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); align-items: start; column-gap: clamp(32px, 4vw, 64px);
    padding-top: calc(var(--bar-h) + 24px);
  }
  .mapview__head { text-align: left; grid-column: 1; grid-row: 1; }
  .mapview__mono { margin-left: 0; }
  .mapview__intro { margin-left: 0; }
  .mapview > .maq { grid-column: 2; grid-row: 1 / 4; align-self: start; position: sticky; top: calc(var(--bar-h) + 16px); }
  .sheet { grid-column: 1; grid-row: 2 / 4; display: grid; gap: 22px; align-self: start; }
  .mapview h1 { font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
  .maqcard__prints img { aspect-ratio: 1; border-radius: 8px; }
  .maqcard { padding: 14px 16px 16px; }
  .sheet__grip { display: none; }
  .roomview .room .house { height: clamp(90px, 12vw, 150px); }
}

@media (prefers-reduced-motion: reduce) {
  .sky img { animation: none; }
}