/* WARO Street v3: the painted world. JS sets --ground (curb line in px), --pave (street strip height) and sizes each building. */
@font-face { font-family: "Lilita"; src: url("../fonts/lilita.woff2") format("woff2"); font-display: swap; }
:root { --sign: "Lilita", "Bricolage", system-ui, sans-serif; --pave: 300px; --wet: 40px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sr a:focus { position: fixed; z-index: 300; left: 16px; top: 70px; width: auto; height: auto; clip: auto; clip-path: none; padding: 10px 14px; border-radius: 12px; background: var(--orange); color: #1a0d06; }

/* ---------- planes ---------- */
.scroller { width: 1px; pointer-events: none; }
.world { position: fixed; inset: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; background: #120c22; }
.world.is-dragging { cursor: grabbing; }
.layer { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.sky { position: absolute; inset: 0; overflow: hidden; }
.sky__img { position: absolute; left: 0; top: 0; height: calc(var(--ground) + 30px); width: 140vw; background: url("../img/v3/sky.webp") 50% 100% / cover no-repeat; will-change: transform; }
.layer--mid { top: auto; bottom: calc(100% - var(--ground) - 6px); height: calc(var(--ground) * 0.6); background: url("../img/v3/mid-tile.webp") 0 100% / auto 100% repeat-x; filter: brightness(0.82) saturate(0.95); }
.pave { position: absolute; left: 0; right: 0; top: calc(var(--ground) - var(--pave) * 0.11); height: calc(var(--pave) + 40px); background: url("../img/v3/street-tile.webp") 0 0 / auto var(--pave) repeat-x; }
.layer--street { z-index: 2; }
.layer--front { z-index: 4; pointer-events: none; }
.fog { position: absolute; left: 0; right: 0; pointer-events: none; background-repeat: repeat-x; z-index: 1; }
.fog--back { top: calc(var(--ground) - 130px); height: 170px; background-image: radial-gradient(40% 60% at 50% 60%, rgba(190, 150, 210, 0.16), transparent 70%); background-size: 900px 170px; animation: fog 70s linear infinite; }
.fog--front { z-index: 5; top: calc(var(--ground) - 30px); height: 140px; background-image: radial-gradient(40% 50% at 50% 50%, rgba(210, 180, 220, 0.09), transparent 70%); background-size: 760px 140px; animation: fog 40s linear infinite reverse; }
@keyframes fog { to { background-position: 900px 0; } }
.rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 6; }
.glass { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(8, 4, 16, 0.55) 100%); }

/* ---------- stops & buildings ---------- */
.stop { position: absolute; top: 0; height: 100%; }
.bld { position: absolute; left: 50%; bottom: calc(100% - var(--ground) - 4px); transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; container-type: inline-size; -webkit-tap-highlight-color: transparent; transition: filter 0.5s var(--ease), transform 0.6s var(--ease); filter: brightness(0.78) saturate(0.9); }
.stop.is-here .bld { filter: none; }
.bld:hover { filter: brightness(1.08); transform: translateX(-50%) translateY(-3px); }
.bld:focus-visible { outline: 3px solid var(--orange); outline-offset: 8px; border-radius: 18px; }
.bld__img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)); pointer-events: none; }
.bld > span { position: absolute; pointer-events: none; }
.bld__mirror { position: absolute; left: 50%; top: calc(var(--ground) + var(--wet)); transform: translateX(-50%) scaleY(-1) scaleX(1.02); transform-origin: 50% 50%; opacity: 0.55; mix-blend-mode: screen; pointer-events: none; filter: blur(1.2px) saturate(1.3) brightness(1.1); -webkit-mask-image: linear-gradient(to top, #000, transparent 45%); mask-image: linear-gradient(to top, #000, transparent 45%); z-index: 0; }
.bld__mirror img { width: 100%; height: 100%; object-fit: contain; }
.stop .bld { z-index: 1; }
.lite .bld__mirror { display: none; }

/* live light over the paint */
.glow { border-radius: 10%; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 196, 120, 0.55), rgba(255, 150, 70, 0.18) 70%, transparent); animation: candle 4.2s ease-in-out infinite; }
.glow--b { animation-delay: -1.4s; } .glow--c { animation-delay: -2.6s; animation-duration: 5.5s; }
.glow--door { border-radius: 40% 40% 4px 4px; background: radial-gradient(60% 70% at 50% 70%, rgba(255, 190, 110, 0.6), transparent 75%); animation-duration: 3.4s; }
.glow--door::after { content: ""; position: absolute; left: -60%; right: -60%; top: 92%; height: 70%; background: radial-gradient(50% 50% at 50% 0%, rgba(255, 170, 90, 0.45), transparent 70%); }
.glow--wide { border-radius: 6%; background: radial-gradient(closest-side, rgba(255, 190, 120, 0.42), rgba(255, 140, 80, 0.12) 75%, transparent); }
.glow--red { background: radial-gradient(60% 70% at 50% 60%, rgba(255, 90, 80, 0.45), transparent 75%); }
.glow--orange { background: radial-gradient(closest-side, rgba(255, 150, 70, 0.5), rgba(255, 120, 40, 0.14) 75%, transparent); }
.glow--leak { border-radius: 4%; background: radial-gradient(40% 40% at 40% 30%, rgba(255, 70, 160, 0.5), transparent 70%), radial-gradient(40% 40% at 60% 60%, rgba(80, 255, 210, 0.45), transparent 70%); animation: leak 2.8s steps(1, end) infinite; }
@keyframes candle { 0%, 100% { opacity: 0.85; } 22% { opacity: 1; } 47% { opacity: 0.72; } 52% { opacity: 0.95; } 76% { opacity: 0.8; } }
@keyframes leak { 0%, 100% { opacity: 0.9; } 12% { opacity: 0.35; } 14% { opacity: 1; } 48% { opacity: 0.6; } 63% { opacity: 1; } 80% { opacity: 0.45; } }
.lamp { width: 0; height: 0; }
.lamp::before { content: ""; position: absolute; left: -9cqw; top: -9cqw; width: 18cqw; height: 18cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 140, 0.75), rgba(255, 150, 60, 0.25) 45%, transparent); mix-blend-mode: screen; animation: candle 2.6s ease-in-out infinite; }
.lamp--b::before { animation-delay: -1.1s; }
.lamp--small::before { left: -5cqw; top: -5cqw; width: 10cqw; height: 10cqw; }

/* signs filled with live text */
.sign--inn { display: grid; place-content: center; text-align: center; transform-origin: 50% 0; animation: signswing 5s ease-in-out infinite; }
.sign--inn b { font: 400 4.3cqw/0.95 var(--sign); color: #f6dcaa; text-shadow: 0 0.25cqw 0 #3a1c0c, 0 0 1.5cqw rgba(255, 180, 90, 0.35); letter-spacing: 0.02em; }
.sign--inn b:first-child { transform: rotate(-3deg); }
@keyframes signswing { 50% { transform: rotate(1.6deg); } }
.chalk { display: grid; place-items: center; text-align: center; font: 400 2.5cqw/1 var(--sign); color: rgba(255, 252, 240, 0.86); transform: rotate(-4deg); text-shadow: 0 0 0.3cqw rgba(255, 255, 255, 0.4); letter-spacing: 0.03em; }
.smoke { width: 0; height: 0; }
.smoke i { position: absolute; left: -2cqw; top: -2cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 150, 190, 0.35), transparent); animation: puff 6s linear infinite; }
.smoke i:nth-child(2) { animation-delay: -2s; } .smoke i:nth-child(3) { animation-delay: -4s; }
@keyframes puff { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(6cqw, -16cqw) scale(2.4); opacity: 0; } }

.neon { display: grid; place-items: center; text-align: center; white-space: nowrap; font-family: var(--sign); }
.neon--munch { font-size: 5.3cqw; line-height: 1; color: #fff1f4; text-shadow: 0 0 0.4cqw #ff6a8a, 0 0 1.4cqw #ff2f63, 0 0 3.6cqw rgba(255, 47, 99, 0.7); opacity: 0.15; }
.stop.is-lit .neon--munch { animation: buzzon 1.6s steps(1, end) forwards, neon 7s 1.6s infinite; }
.neon--open { font-size: 2.4cqw; letter-spacing: 0.12em; color: #eafff8; text-shadow: 0 0 0.3cqw #6ff0c6, 0 0 1.2cqw #20d9a0; border: 0.25cqw solid rgba(111, 240, 198, 0.8); border-radius: 1cqw; box-shadow: 0 0 1.2cqw rgba(32, 217, 160, 0.6), inset 0 0 1cqw rgba(32, 217, 160, 0.4); animation: neon 5s 0.8s infinite; }
.neon--friend { font-size: 5.6cqw; color: #fff0f6; transform: rotate(-5deg); text-shadow: 0 0 0.4cqw #ff6b9b, 0 0 1.6cqw #ff2f73, 0 0 4cqw rgba(255, 47, 115, 0.65); animation: neon 3.2s infinite; }
.neon--ball { width: 0; height: 0; }
.neon--ball::before { content: ""; position: absolute; left: -5cqw; top: -5cqw; width: 10cqw; height: 10cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 80, 120, 0.85), rgba(255, 40, 100, 0.2) 55%, transparent); mix-blend-mode: screen; animation: blink 1.8s steps(2, jump-none) infinite; }
@keyframes buzzon { 0% { opacity: 0.15; } 10% { opacity: 1; } 14% { opacity: 0.2; } 30% { opacity: 1; } 34% { opacity: 0.3; } 40%, 100% { opacity: 1; } }
@keyframes neon { 0%, 100% { opacity: 1; } 42% { opacity: 1; } 43% { opacity: 0.35; } 44% { opacity: 1; } 46% { opacity: 0.55; } 48% { opacity: 1; } }
@keyframes blink { 50% { opacity: 0.2; } }
.steam { width: 0; height: 0; }
.steam i { position: absolute; left: -2cqw; top: -2cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 235, 230, 0.32), transparent); animation: puff 3.6s linear infinite; }
.steam i:nth-child(2) { animation-delay: -1.2s; } .steam i:nth-child(3) { animation-delay: -2.4s; }

.blade { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; }
.blade b { font: 400 6.2cqw/1 var(--sign); color: #fff3d0; text-shadow: 0 0 0.5cqw #ffd27a, 0 0 2cqw rgba(232, 168, 56, 0.85); animation: chase 2.8s infinite; }
.blade b:nth-child(2) { animation-delay: 0.2s; } .blade b:nth-child(3) { animation-delay: 0.4s; } .blade b:nth-child(4) { animation-delay: 0.6s; }
.blade b:nth-child(5) { animation-delay: 0.8s; } .blade b:nth-child(6) { animation-delay: 1s; } .blade b:nth-child(7) { animation-delay: 1.2s; }
@keyframes chase { 0%, 70%, 100% { opacity: 1; } 80% { opacity: 0.35; } }
.marq { display: grid; place-content: center; justify-items: center; gap: 0.6cqw; }
.marq b { font: 400 3.5cqw/1 var(--sign); color: #ffe7b0; text-shadow: 0 0 1.2cqw rgba(255, 200, 110, 0.75); white-space: nowrap; }
.marq i { font: 700 1.55cqw/1 var(--body); font-style: normal; letter-spacing: 0.35em; text-transform: uppercase; color: #ff9fb5; text-shadow: 0 0 1cqw rgba(255, 90, 130, 0.9); }
.plate { display: grid; place-items: center; }
.plate img { width: 62%; height: auto; filter: drop-shadow(0 0 0.8cqw rgba(255, 138, 61, 0.9)) brightness(0.95); }

.fireflies { position: absolute; left: 50%; bottom: calc(100% - var(--ground)); width: 70vmin; height: 40vh; transform: translateX(-50%); pointer-events: none; z-index: 2; }
.fireflies i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff3a8; box-shadow: 0 0 10px 3px rgba(255, 230, 120, 0.7); opacity: 0; animation: firefly 7s ease-in-out infinite; }
.fireflies i:nth-child(1) { left: 6%; top: 70%; } .fireflies i:nth-child(2) { left: 30%; top: 82%; animation-delay: -2s; } .fireflies i:nth-child(3) { left: 82%; top: 64%; animation-delay: -4s; }
.fireflies i:nth-child(4) { left: 92%; top: 86%; animation-delay: -1s; } .fireflies i:nth-child(5) { left: 58%; top: 76%; animation-delay: -5s; }
.fireflies--orange i { background: #ffc58a; box-shadow: 0 0 10px 3px rgba(255, 138, 61, 0.7); }
@keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 20% { opacity: 1; } 50% { opacity: 0.8; transform: translate(22px, -40px); } 80% { opacity: 0.2; transform: translate(-14px, -70px); } }

/* ---------- welcome + hints ---------- */
.welcome { position: absolute; left: 50%; top: calc(76px + 6vh); width: min(calc(100vw - 32px), 640px); transform: translateX(-50%); text-align: center; }
.welcome__t { font: 400 clamp(2.3rem, 9.6vw, 5.2rem)/0.98 var(--sign); color: #fff3e2; letter-spacing: 0.005em; text-shadow: 0 4px 0 rgba(40, 14, 30, 0.7), 0 0 40px rgba(255, 170, 90, 0.35); }
.welcome__t span { display: block; margin-top: 0.12em; color: var(--orange); font-size: 0.62em; text-shadow: 0 3px 0 rgba(60, 20, 8, 0.7), 0 0 30px rgba(255, 138, 61, 0.6); }
.welcome__hint { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 8px 14px 8px 8px; border-radius: 99px; background: rgba(18, 10, 30, 0.55); border: 1px solid rgba(255, 220, 180, 0.18); font-size: 0.88rem; font-weight: 600; color: rgba(255, 240, 225, 0.9); animation: nudge 2.4s var(--ease) infinite; }
.welcome__keys { display: flex; gap: 4px; }
.welcome__keys b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); }
@keyframes nudge { 50% { transform: translateX(8px); } }
@media (min-width: 900px) { .welcome { left: 7vw; transform: none; text-align: left; top: calc(110px + 6vh); width: min(46vw, 640px); } }

.tap { position: fixed; z-index: 15; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); margin: 0; padding: 9px 16px; border-radius: 99px; background: rgba(18, 10, 30, 0.6); border: 1px solid rgba(255, 210, 150, 0.3); font: 700 0.82rem/1 var(--body); letter-spacing: 0.06em; text-transform: uppercase; color: #ffd9a8; opacity: 0; transition: opacity 0.4s, transform 0.5s var(--spring); pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tap.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { .tap { bottom: 28px; } }

/* ---------- painted rooms ---------- */
.room { background-color: #0d0b14; background-size: cover; background-position: 50% 50%; }
.room::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 5, 12, 0.65), transparent 22%, transparent 62%, rgba(8, 5, 12, 0.85)); }
.room > * { position: relative; }
.room--inn { background-image: url("../img/v3/room_inn.webp"); }
.room--diner { background-image: url("../img/v3/room_diner.webp"); }
.room--theater { background-image: url("../img/v3/room_theater.webp"); }
.room--arcade { background-image: url("../img/v3/room_arcade.webp"); }
.room--hq { background-image: none; background: #140b08; }
@media (max-width: 899px) {
  .room--inn { background-image: url("../img/v3/room_inn-960.webp"); }
  .room--diner { background-image: url("../img/v3/room_diner-960.webp"); }
  .room--theater { background-image: url("../img/v3/room_theater-960.webp"); }
  .room--arcade { background-image: url("../img/v3/room_arcade-960.webp"); }
}
.room__bar { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
.room__close { background: rgba(10, 6, 14, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.room__info { background: linear-gradient(180deg, transparent, rgba(8, 5, 12, 0.6) 30%); }
@media (min-width: 900px) { .room__info { background: rgba(10, 6, 14, 0.62); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
.room__tip { color: rgba(255, 240, 225, 0.85); }

/* ---------- HQ room: a painted scene with things to touch ---------- */
.room__stage--hq { overflow: hidden; }
.pan { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 61, 0.7) transparent; overscroll-behavior-x: contain; }
.pan::-webkit-scrollbar { height: 6px; }
.pan::-webkit-scrollbar-thumb { background: rgba(255, 138, 61, 0.7); border: 0; border-radius: 99px; }
.pan::-webkit-scrollbar-track { background: transparent; }
.scene { position: relative; height: 100%; aspect-ratio: 16 / 9; margin: 0 auto; min-width: 100%; }
@media (min-width: 900px) { .pan { display: grid; place-items: center; overflow: hidden; } .scene { height: auto; min-width: 0; width: min(100%, calc((100vh - 96px) * 16 / 9)); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } }
@supports not (aspect-ratio: 1) { .scene { width: 178vh; } }
.scene__img { width: 100%; height: 100%; object-fit: cover; }
.spot { position: absolute; display: block; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 14px; transition: box-shadow 0.3s, background 0.3s; }
.spot:hover, .spot:focus-visible, .spot.is-open { background: rgba(255, 190, 110, 0.12); box-shadow: 0 0 0 2px rgba(255, 210, 150, 0.7), 0 0 50px 8px rgba(255, 160, 70, 0.4); outline: 0; }
.spot__tag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: rgba(14, 8, 10, 0.82); border: 1px solid rgba(255, 210, 150, 0.4); font: 700 0.78rem/1 var(--body); color: #ffe2b8; white-space: nowrap; animation: tag 2.6s ease-in-out infinite; }
.spot__tag svg { width: 15px; height: 15px; }
.spot--jukebox .spot__tag { animation-delay: -0.9s; } .spot--screen .spot__tag { animation-delay: -1.7s; } .spot--window .spot__tag { bottom: auto; top: -12px; }
@keyframes tag { 50% { transform: translateX(-50%) translateY(-4px); } }
.juke-glow, .screen-glow { position: absolute; inset: 0; border-radius: 40% 40% 10% 10%; mix-blend-mode: screen; pointer-events: none; }
.juke-glow { background: radial-gradient(50% 40% at 50% 30%, rgba(255, 120, 60, 0.5), transparent 70%); animation: juke 1.6s ease-in-out infinite alternate; opacity: 0.5; }
.spot--jukebox.is-open .juke-glow { opacity: 1; animation-duration: 0.45s; }
@keyframes juke { to { filter: hue-rotate(60deg); } }
.screen-glow { border-radius: 6px; inset: 6% 8% 22%; background: linear-gradient(160deg, rgba(255, 176, 112, 0.45), rgba(255, 138, 61, 0.25)); opacity: 0; transition: opacity 0.4s; }
.spot--screen.is-open .screen-glow { opacity: 1; }
.room__info--hq { align-content: start; }
.panel { display: none; gap: 10px; padding: 0; background: none; border: 0; animation: roomin 0.4s var(--ease); }
.panel.is-open { display: grid; }
.panel h3 { font: 400 1.6rem/1 var(--sign); color: #ffe2b8; }
.panel p { color: rgba(255, 240, 225, 0.82); }
.panel__row { display: flex; align-items: center; gap: 14px; }
.panel__clip { width: 92px; flex: none; border-radius: 12px; overflow: hidden; border: 3px solid #1a0a10; }
.rules { display: grid; gap: 8px; padding-left: 1.2rem; color: rgba(255, 240, 225, 0.82); font-size: 0.92rem; }
.rules b { color: #fff3e2; }
@media (min-width: 900px) {
  .room--hq[open] { grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; }
  .room--hq .room__info { padding-top: 24px; }
  .panel__clip { width: 120px; }
}
@media (max-width: 899px) {
  .room--hq[open] { grid-template-rows: auto minmax(0, 1fr) auto; }
  .room--hq .room__info { max-height: 44vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 61, 0.6) transparent; }
}

/* ---------- lite & reduced motion ---------- */
.lite .rain, .lite .fog, .lite .fireflies, .lite .smoke, .lite .steam { display: none; }
@media (prefers-reduced-motion: reduce) { .neon--munch { opacity: 1; } .rain, .fireflies, .smoke, .steam { display: none; } }


/* ---------- lore rooms: painted backdrop, a page of story, pictures on the wall ---------- */
.room--lore[open] { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.room--lore::before { background: linear-gradient(180deg, rgba(8, 5, 12, 0.7), rgba(8, 5, 12, 0.35) 30%, rgba(8, 5, 12, 0.55) 70%, rgba(8, 5, 12, 0.9)); }
.lore { position: relative; display: grid; gap: 22px; align-content: start; padding: 8px 16px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 138, 61, 0.65) transparent; }
.lore::-webkit-scrollbar { width: 8px; } .lore::-webkit-scrollbar-thumb { background: rgba(255, 138, 61, 0.65); border: 0; border-radius: 99px; } .lore::-webkit-scrollbar-track { background: transparent; }
.lore__page { max-width: 34rem; padding: 22px 22px 24px; border-radius: 6px 6px 14px 14px; color: #3a2414; background: linear-gradient(180deg, #f6e7c8, #ecd5a8); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(150, 90, 40, 0.25); transform: rotate(-0.6deg); font-size: 0.98rem; line-height: 1.6; }
.lore__page p + p { margin-top: 0.8em; }
.lore__lede { font: 400 clamp(1.35rem, 5.4vw, 1.75rem)/1.15 var(--sign); color: #7a2a12; }
.lore__sign { font: 400 1.15rem/1.2 var(--sign); color: #a3401a; }
.wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.frame { margin: 0; padding: 7px; border-radius: 6px; background: linear-gradient(135deg, #8a5a2a, #5a3416 50%, #a06a30); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 2px rgba(255, 210, 140, 0.25); transform: rotate(var(--r, 0deg)); transition: transform 0.4s var(--spring); }
.frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); }
.frame:hover { transform: rotate(0deg) scale(1.04); }

.room--tease .lore { align-content: center; min-height: 100%; justify-items: center; text-align: center; }
.room--tease .lore__page { transform: rotate(0.8deg); }
@media (min-width: 900px) {
  .lore { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); grid-template-rows: auto auto; gap: 28px 40px; padding: 16px 40px 40px; align-items: start; }
  .lore__page { grid-row: 1; padding: 30px 32px 32px; font-size: 1.02rem; }
  .lore .cta { grid-column: 1; grid-row: 2; }
  .wall { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; padding-top: 10px; }
  .room--tease .lore { grid-template-columns: minmax(0, 34rem); justify-content: center; }
  .room--tease .lore .cta { grid-column: 1; }
}
@media (max-width: 899px) { .room--lore:not(.room--tease) .lore .cta { position: sticky; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 2; } .room--lore:not(.room--tease) .lore { display: flex; flex-direction: column; } .room--lore:not(.room--tease) .lore .cta { order: 3; } .room--lore:not(.room--tease) .lore__page { order: 1; } .wall { order: 2; } }

/* ---------- the rooms' doors: objects from each world, never a pill ---------- */
.cta { position: relative; display: block; width: 100%; max-width: 30rem; justify-self: start; color: inherit; -webkit-tap-highlight-color: transparent; }
.cta:focus-visible { outline: 3px solid #ffd28a; outline-offset: 6px; border-radius: 16px; }
.room--tease .cta { justify-self: center; }

/* Inn: a carved plaque with a little studded door that swings open */
.cta--inn { --u: 1px; display: flex; align-items: center; gap: 0; padding: 0 0 0 6px; }
.inn-door { position: relative; flex: none; width: 92px; height: 124px; margin-right: -16px; z-index: 2; border-radius: 38px 38px 4px 4px; background: #1a0c06; box-shadow: 0 0 0 6px #4a2c16, 0 0 0 8px #24130a, 0 14px 30px rgba(0, 0, 0, 0.7), 0 0 34px 4px rgba(255, 160, 60, 0.35); perspective: 320px; }
.inn-door__light { position: absolute; inset: 4px 4px 0; border-radius: 34px 34px 2px 2px; background: radial-gradient(70% 80% at 30% 70%, #fff3cf, #ffc46e 45%, #e0711e); box-shadow: 0 0 22px 4px rgba(255, 170, 70, 0.45); transition: box-shadow 0.6s var(--ease); }
.inn-door__leaf { position: absolute; inset: 4px 4px 0; border-radius: 34px 34px 2px 2px; transform-origin: 0 50%; transform: rotateY(-22deg); transition: transform 0.7s var(--spring);
  background:
    linear-gradient(90deg, transparent 31%, rgba(0, 0, 0, 0.35) 32%, transparent 34%, transparent 64%, rgba(0, 0, 0, 0.35) 65%, transparent 67%),
    linear-gradient(180deg, transparent 22%, #2a1a10 22% 27%, transparent 27% 70%, #2a1a10 70% 75%, transparent 75%),
    repeating-linear-gradient(90deg, #7a4a24 0 3px, #6a3e1c 3px 7px, #82522a 7px 9px),
    #6a3e1c;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.6), inset -3px 0 0 rgba(255, 210, 150, 0.12); }
.stud { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9d2c4, #5a524a 60%, #2a2622); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
.stud:nth-child(1) { left: 14%; top: 22%; } .stud:nth-child(2) { right: 14%; top: 22%; } .stud:nth-child(3) { left: 14%; top: 70%; } .stud:nth-child(4) { right: 14%; top: 70%; }
.inn-door__ring { position: absolute; right: 12%; top: 48%; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #e8b860; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6), inset 0 0 2px rgba(0, 0, 0, 0.5); transform-origin: 50% 0; animation: ring 3.6s ease-in-out infinite; }
.inn-door__ring::before { content: ""; position: absolute; left: 50%; top: -6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #c89848; }
@keyframes ring { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } }
.inn-plaque { position: relative; flex: 1; display: grid; gap: 5px; padding: 20px 22px 20px 34px; border-radius: 10px 16px 16px 10px; color: #ffe8c2;
  background:
    radial-gradient(120% 140% at 0% 50%, rgba(255, 170, 70, 0.25), transparent 50%),
    repeating-linear-gradient(176deg, rgba(0, 0, 0, 0.0) 0 6px, rgba(0, 0, 0, 0.12) 6px 7px, rgba(255, 220, 170, 0.05) 7px 9px),
    linear-gradient(180deg, #8a5428, #5e3618 55%, #4a2810);
  box-shadow: inset 0 0 0 3px #2e180a, inset 0 0 0 5px rgba(232, 184, 96, 0.55), inset 0 2px 10px rgba(255, 220, 160, 0.25), 0 18px 36px rgba(0, 0, 0, 0.65), 0 0 50px -6px rgba(255, 150, 60, 0.45);
  transition: box-shadow 0.5s var(--ease), transform 0.4s var(--spring); }
.inn-plaque::before, .inn-plaque::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0d090, #8a6020 70%); }
.inn-plaque::before { left: 14px; } .inn-plaque::after { right: 10px; }
.inn-plaque b { font: 400 clamp(1.45rem, 6vw, 1.9rem)/1 var(--sign); letter-spacing: 0.01em; color: #ffe2a8; text-shadow: 0 2px 0 #2a1406, 0 -1px 0 rgba(255, 240, 210, 0.25), 0 0 18px rgba(255, 170, 70, 0.35); }
.inn-plaque small { font: 600 0.82rem/1.2 var(--body); color: rgba(255, 232, 194, 0.82); }
.chalk-tag { position: absolute; right: 22px; top: -14px; z-index: 3; padding: 5px 10px 6px; border-radius: 4px; background: #23262a; border: 3px solid #6a4424; font: 400 0.82rem/1 var(--sign); color: rgba(255, 255, 250, 0.9); letter-spacing: 0.03em; transform: rotate(4deg); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.55); transform-origin: 50% -12px; animation: tagswing 4.5s ease-in-out infinite; }
.chalk-tag::before { content: ""; position: absolute; left: 50%; top: -14px; width: 26px; height: 12px; margin-left: -13px; border: 1.5px solid rgba(200, 170, 120, 0.8); border-bottom: 0; border-radius: 12px 12px 0 0; }
@keyframes tagswing { 50% { transform: rotate(-3deg); } }
.cta--inn:hover .inn-door__leaf, .cta--inn:focus-visible .inn-door__leaf { transform: rotateY(-64deg); }
.cta--inn:hover .inn-door__light, .cta--inn:focus-visible .inn-door__light { box-shadow: 0 0 40px 12px rgba(255, 170, 70, 0.65); }
.cta--inn:hover .inn-plaque { transform: translateY(-2px); box-shadow: inset 0 0 0 3px #2e180a, inset 0 0 0 5px rgba(232, 184, 96, 0.8), inset 0 2px 10px rgba(255, 220, 160, 0.3), 0 22px 44px rgba(0, 0, 0, 0.7), 0 0 70px -4px rgba(255, 160, 60, 0.7); }
.cta--inn.is-open .inn-door__leaf { transform: rotateY(-100deg); transition-duration: 0.4s; }
.cta--inn.is-open .inn-door__light { box-shadow: 0 0 90px 40px rgba(255, 180, 80, 0.9); }

/* Diner: a chrome plate with "Grab a seat" in neon tubes */
.chrome { position: relative; display: grid; justify-items: center; gap: 6px; padding: 16px 22px 14px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #f4f6f8, #b9c0c8 18%, #eef1f4 38%, #8d959e 62%, #d6dbe0 82%, #9aa2aa);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7), inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 0 0 4px #b8202f, 0 0 0 6px #5a0c18, 0 18px 36px rgba(0, 0, 0, 0.65); transition: transform 0.4s var(--spring); }
.chrome::before { content: ""; position: absolute; inset: 9px 12px 30px; border-radius: 10px; background: radial-gradient(60% 80% at 50% 50%, rgba(255, 47, 99, 0.28), transparent 70%), linear-gradient(180deg, #1a0a12, #2a0e1a); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.6); }
.screw { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8a9098 70%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
.screw::after { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: rgba(0, 0, 0, 0.45); transform: rotate(35deg); }
.screw:nth-child(1) { left: 5px; top: 5px; } .screw:nth-child(2) { right: 5px; top: 5px; } .screw:nth-child(3) { left: 5px; bottom: 5px; } .screw:nth-child(4) { right: 5px; bottom: 5px; }
.tube { position: relative; z-index: 1; padding: 10px 6px 8px; font: 400 clamp(1.7rem, 7.4vw, 2.3rem)/1 var(--sign); letter-spacing: 0.02em; color: #fff4f6; -webkit-text-stroke: 0.6px rgba(255, 150, 180, 0.9);
  text-shadow: 0 0 2px #fff, 0 0 6px #ff5c86, 0 0 14px #ff2f63, 0 0 30px rgba(255, 47, 99, 0.75); }
.room[open] .tube { animation: buzzon 1.4s steps(1, end) 0.3s both, neon 6s 1.8s infinite; }
.chrome small { position: relative; z-index: 1; font: 700 0.78rem/1 var(--body); letter-spacing: 0.04em; color: #3a2a30; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.cta--diner:hover .chrome { transform: translateY(-2px); }
.cta--diner:hover .tube { text-shadow: 0 0 2px #fff, 0 0 8px #ff7aa0, 0 0 20px #ff2f63, 0 0 44px rgba(255, 47, 99, 0.95); }
.cta--diner.is-open .tube { animation: buzzon 0.5s steps(1, end) both; }
.cta--diner.is-open .chrome { transform: scale(0.98); }

/* Theater: a ticket you tear */
.ticket2 { display: flex; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6)); transform: rotate(-1.5deg); transition: transform 0.4s var(--spring); }
.ticket2__main, .ticket2__stub { background: linear-gradient(180deg, #f6e4bc, #e8cc92); color: #4a1424; }
.ticket2__main { display: grid; gap: 6px; padding: 16px 20px; border-radius: 10px 0 0 10px; -webkit-mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom right / 100% 51% no-repeat; mask: radial-gradient(circle 9px at 100% 0, transparent 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle 9px at 100% 100%, transparent 98%, #000) bottom right / 100% 51% no-repeat; box-shadow: inset 0 0 0 2px rgba(163, 33, 63, 0.35); }
.ticket2__main small { font: 700 0.7rem/1 var(--body); letter-spacing: 0.22em; text-transform: uppercase; color: #a3213f; }
.ticket2__main b { font: 400 clamp(1.3rem, 5.6vw, 1.6rem)/1 var(--sign); }
.ticket2__stub { display: grid; place-items: center; width: 72px; border-radius: 0 10px 10px 0; border-left: 2px dashed rgba(74, 20, 36, 0.4); -webkit-mask: radial-gradient(circle 9px at 0 0, transparent 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, transparent 98%, #000) bottom left / 100% 51% no-repeat; mask: radial-gradient(circle 9px at 0 0, transparent 98%, #000) top left / 100% 51% no-repeat, radial-gradient(circle 9px at 0 100%, transparent 98%, #000) bottom left / 100% 51% no-repeat; transition: transform 0.5s var(--spring); }
.ticket2__stub svg { width: 28px; height: 28px; color: #5865f2; }
.cta--ticket:hover .ticket2 { transform: rotate(0deg) translateY(-2px); }
.cta--ticket:hover .ticket2__stub { transform: translateX(4px) rotate(4deg); }
.cta--ticket.is-open .ticket2__stub { transform: translate(18px, 10px) rotate(16deg); }

/* Arcade: a coin-door panel with an LED readout and a glowing slot */
.slot2 { display: grid; justify-items: center; gap: 10px; padding: 16px 22px 16px; border-radius: 14px; background: linear-gradient(180deg, #2a3058, #161a36); box-shadow: inset 0 0 0 2px rgba(182, 169, 255, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.12), 0 18px 36px rgba(0, 0, 0, 0.65), 0 0 60px -10px rgba(111, 240, 198, 0.45); transition: transform 0.4s var(--spring); }
.slot2__led { padding: 6px 12px; border-radius: 4px; background: #05060f; font: 700 0.95rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.24em; color: #ff6b9b; text-shadow: 0 0 6px #ff2f73; box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.9); animation: blink 1.2s steps(2, jump-none) infinite; }
.slot2__mouth { position: relative; width: 82px; height: 46px; border-radius: 8px; background: linear-gradient(180deg, #c8ccd4, #6a707c); box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0, 0, 0, 0.6); }
.slot2__mouth i { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 6px; margin-left: -3px; border-radius: 3px; background: #05060f; box-shadow: 0 0 10px 2px rgba(111, 240, 198, 0.7), inset 0 0 3px #6ff0c6; animation: slotglow 2s ease-in-out infinite; }
@keyframes slotglow { 50% { box-shadow: 0 0 18px 5px rgba(111, 240, 198, 0.9), inset 0 0 3px #6ff0c6; } }
.slot2__go { display: inline-flex; align-items: center; gap: 8px; font: 400 1.15rem/1 var(--sign); color: #eafff8; text-shadow: 0 0 8px rgba(111, 240, 198, 0.6); }
.slot2__go svg { width: 18px; height: 18px; }
.cta--slot:hover .slot2 { transform: translateY(-2px); }
.cta--slot.is-open .slot2__mouth i { box-shadow: 0 0 30px 10px rgba(111, 240, 198, 1), inset 0 0 3px #fff; }

/* phones: the same objects, a little smaller, pinned */
@media (max-width: 899px) {
  .cta { max-width: none; }
  .inn-door { width: 70px; height: 94px; }
  .inn-plaque { padding: 12px 16px 12px 26px; }
  .chrome { padding: 12px 18px 12px; }
  .tube { padding: 8px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) { .inn-door__leaf, .ticket2__stub { transition: none; } }