/* /escape/ — The Silk Mill. Dark mill interior, chalk and brass. Special Elite for everything typed or chalked. */
@font-face { font-family: "Special Elite"; src: url(/assets/fonts/special-elite.woff2) format("woff2"); font-weight: 400; font-display: swap; }
.xr-page {
  --pg-bg: #16110d; --pg-ink: #efe4cf; --f-display: "Special Elite", "Courier New", monospace; --h-weight: 400;
  --brass: #d9a441; --rust: #b3462a; --chalk: #f3ead7; --muted: #a8998a;
  --bar-bg: #0e0a07; --bar-fg: #efe4cf; --tag: #d9a441; --btn-bg: #d9a441; --btn-fg: #16110d; --order-bg: #221a13; --order-fg: #efe4cf;
}
.xr-page h1, .xr-page h2, .xr-page h3 { letter-spacing: 0; line-height: 1.02; font-weight: 400; }
.xr-page em { font-style: normal; color: var(--rust); }
.xr-page .dm-bar__name { font: 400 1.25rem "Special Elite", monospace; }
.xr-kick { margin: 0; font: 500 .72rem var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.xr-clock { margin: 0 0 0 auto; font: 500 .95rem var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.is-running .xr-clock { color: var(--brass); }
.xr-skip { font-size: .82rem; opacity: .75; }
.xr-page .dm-bar__name { margin-right: 0; }

/* hero */
.xr-hero { position: relative; min-height: calc(100svh - 52px); display: grid; align-content: center; justify-items: center; text-align: center; gap: 1.2rem; padding: 4rem 16px;
  background: radial-gradient(60% 50% at 50% 40%, #3a2b1e, #16110d 70%); overflow: hidden; }
.xr-hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(0, 0, 0, .25) 58px 60px); opacity: .5; pointer-events: none; }
.xr-hero h1 { font-size: clamp(3.4rem, 10vw, 8rem); margin: 0; }
.xr-lead { max-width: 34rem; margin: 0; color: var(--muted); font-size: 1.1rem; }
.xr-steps { list-style: none; margin: .6rem 0; padding: 0; display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; font: 500 .8rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.xr-steps li { display: flex; align-items: center; gap: .5rem; transition: color .4s; }
.xr-steps i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.xr-steps li.is-done { color: var(--brass); }
.xr-steps li.is-done i::after { content: "✓"; font-style: normal; font-size: .8rem; }
.xr-small { margin: 0; font-size: .85rem; color: var(--muted); }
.xr-hero > * { position: relative; }

/* rooms */
.xr-room { padding: 4rem max(16px, (100vw - 1100px) / 2); display: grid; gap: 1.2rem; border-top: 1px solid rgba(239, 228, 207, .08); }
.xr-room__head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: .5rem 0 .6rem; }
.xr-room__head p:last-child { margin: 0; color: var(--muted); max-width: 40rem; }
.xr-hint { color: var(--muted); font-size: .92rem; }
.xr-hint summary { cursor: pointer; color: var(--brass); width: max-content; }
.xr-hint p { margin: .6rem 0 0; max-width: 40rem; }

/* "Next clue" step, shown once a room is solved */
.xr-next { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; border-radius: 12px;
  background: rgba(217, 164, 65, .1); border: 1.5px solid var(--brass); opacity: 0; translate: 0 12px; transition: opacity .5s, translate .5s; }
.xr-next.on { opacity: 1; translate: 0 0; }
.xr-next p { margin: 0; font-size: 1.05rem; } .xr-next p b { color: var(--brass); font-weight: 600; }
.xr-next .dm-btn { animation: xr-nudge 1.6s ease-in-out 1s 3; }
@keyframes xr-nudge { 50% { transform: translateY(4px); } }

/* room 1: the dark wall + torch */
.xr-dark { position: relative; height: min(56svh, 540px); border-radius: 10px; overflow: hidden; cursor: none; touch-action: none; outline-offset: 4px;
  background: #5b4a3b; }
.xr-wall { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 52px, rgba(40, 28, 20, .7) 52px 56px),
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(40, 28, 20, .6) 118px 122px),
    radial-gradient(120% 80% at 50% 30%, #8a6e55, #5a4533 70%); }
.xr-wall::after { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.xr-stone { position: absolute; left: 62%; top: 22%; width: 250px; padding: 1rem .9rem; text-align: center; z-index: 1; color: #3a2e25;
  background: linear-gradient(160deg, #cfc2ad, #a8997f); border-radius: 4px; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .12), 0 8px 18px rgba(0, 0, 0, .35); font-family: "Special Elite", monospace; transition: box-shadow .5s; }
.xr-stone b { display: block; font-size: 2.6rem; font-weight: 400; letter-spacing: .08em; }
.xr-stone b span { color: rgba(58, 46, 37, .3); }
.xr-stone small { font-size: .62rem; letter-spacing: .14em; }
.xr-stone.is-found { box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .12), 0 0 0 3px var(--brass), 0 0 40px rgba(217, 164, 65, .55); }
.xr-chalk { position: absolute; z-index: 1; margin: 0; font: 400 1.35rem "Special Elite", monospace; color: rgba(243, 234, 215, .82); text-shadow: 0 0 1px rgba(243, 234, 215, .6); filter: blur(.3px); }
.xr-chalk--1 { left: 7%; top: 12%; rotate: -3deg; }
.xr-chalk--2 { left: 10%; top: 58%; rotate: 2deg; letter-spacing: .1em; }
.xr-chalk--3 { left: 34%; top: 72%; rotate: -5deg; font-size: 1.15rem; }
.xr-chalk--4 { left: 58%; top: 70%; rotate: 3deg; font-size: 1rem; opacity: .7; }
.xr-pipe { position: absolute; left: 44%; top: 0; bottom: 0; width: 26px; background: linear-gradient(90deg, #3c3a36, #807a70 45%, #3a3834); z-index: 1; }
.xr-hook { position: absolute; left: 22%; top: 34%; width: 16px; height: 16px; border-radius: 50%; background: #2c2620; box-shadow: 0 0 0 4px #4b4036; z-index: 1; }
.xr-web { position: absolute; right: 0; top: 0; width: 140px; height: 140px; z-index: 1; opacity: .5;
  background: repeating-radial-gradient(circle at 100% 0, transparent 0 16px, rgba(243, 234, 215, .35) 16px 17px), repeating-conic-gradient(from 180deg at 100% 0, transparent 0 8deg, rgba(243, 234, 215, .3) 8deg 8.6deg); -webkit-mask-image: radial-gradient(circle at 100% 0, #000 60%, transparent 70%); mask-image: radial-gradient(circle at 100% 0, #000 60%, transparent 70%); }
.xr-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle var(--r, 120px) at var(--x, 30%) var(--y, 35%), rgba(255, 214, 150, .12) 0, rgba(8, 5, 3, .15) 55%, rgba(8, 5, 3, .985) 100%); }
.xr-found { position: absolute; left: 50%; bottom: 1rem; translate: -50% 20px; z-index: 3; margin: 0; padding: .6rem 1rem; border-radius: 8px; background: rgba(22, 17, 13, .9); border: 1px solid var(--brass); color: var(--chalk); font-size: .95rem; opacity: 0; transition: opacity .4s, translate .4s; text-align: center; width: max-content; max-width: calc(100% - 2rem); }
.xr-found.on { opacity: 1; translate: -50% 0; }

/* room 2: the cipher */
.xr-cipher { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: center; }
.xr-note { position: relative; padding: 2.4rem 2rem 1.6rem; background: linear-gradient(170deg, #efe3c8, #d9c7a2); color: #2f241b; border-radius: 3px; rotate: -2deg; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8);
  clip-path: polygon(0 3%, 6% 0, 14% 2%, 26% 0, 40% 2%, 55% 0, 70% 2%, 84% 0, 100% 3%, 98% 100%, 88% 97%, 72% 100%, 58% 97%, 44% 100%, 30% 97%, 15% 100%, 2% 97%); }
.xr-note__msg { margin: 0; font: 400 clamp(2rem, 4.6vw, 3.4rem)/1.1 "Special Elite", monospace; letter-spacing: .12em; text-align: center; transition: color .3s; }
.xr-note.is-right .xr-note__msg { color: var(--rust); }
.xr-note__foot { margin: 1.2rem 0 0; font: italic 400 1rem "Special Elite", monospace; text-align: right; opacity: .75; }
.xr-wheel { display: grid; justify-items: center; gap: .8rem; outline-offset: 6px; }
.xr-wheel svg { width: min(100%, 470px, 50svh); height: auto; touch-action: none; cursor: grab; user-select: none; }
.xr-wheel svg:active { cursor: grabbing; }
.xr-wheel__rim { fill: #7a5a26; stroke: #b3862f; stroke-width: 6; }
.xr-wheel__plate { fill: #c8923a; stroke: #7a5a26; stroke-width: 3; }
.xr-wheel__hub { fill: #2a2018; stroke: #b3862f; stroke-width: 4; }
.xr-l { font: 400 20px "Special Elite", monospace; text-anchor: middle; dominant-baseline: middle; }
.xr-l--out { fill: #f6e2b5; } .xr-l--in { fill: #2a2018; }
.xr-tick { stroke: rgba(0, 0, 0, .35); stroke-width: 1.5; }
.xr-wheel__key { fill: var(--rust); }
.xr-wheel__n { fill: var(--brass); font: 400 30px "Special Elite", monospace; text-anchor: middle; }
.xr-wheel__btns { display: flex; gap: .6rem; }
.xr-wheel__btns button, .xr-dial button { border: 1px solid rgba(217, 164, 65, .5); background: transparent; color: var(--brass); border-radius: 999px; width: 3rem; height: 2.4rem; font-size: 1.2rem; cursor: pointer; }
.xr-wheel__btns button:hover, .xr-dial button:hover { background: rgba(217, 164, 65, .12); }

/* room 3: padlock */
.xr-door { display: grid; place-items: center; padding: 2rem 0; }
.xr-lock { position: relative; width: min(420px, 100%); padding-top: 110px; }
.xr-shackle { position: absolute; left: 50%; top: 0; width: 200px; height: 190px; translate: -50% 0; border: 26px solid #9aa0a6; border-bottom: 0; border-radius: 110px 110px 0 0;
  background: none; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); transition: translate .6s cubic-bezier(.3, 1.6, .5, 1); z-index: 0; }
.xr-shackle::after { content: ""; position: absolute; right: -26px; bottom: -40px; width: 26px; height: 40px; background: #9aa0a6; }
.xr-shackle::before { content: ""; position: absolute; left: -26px; bottom: -40px; width: 26px; height: 40px; background: #9aa0a6; }
.xr-lock.is-open .xr-shackle { translate: -50% -60px; }
.xr-body { position: relative; z-index: 1; padding: 2rem 1.6rem 1.4rem; border-radius: 22px; background: linear-gradient(160deg, #e4b456, #b5832e 55%, #8c6220); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 30px 60px -30px rgba(0, 0, 0, .9); text-align: center; }
.xr-dials { display: flex; justify-content: center; gap: .7rem; }
.xr-dial { display: grid; gap: .35rem; justify-items: center; }
.xr-dial button { color: #3a2a12; border-color: rgba(58, 42, 18, .4); width: 2.6rem; height: 2rem; font-size: .8rem; }
.xr-dial output { width: 3.2rem; height: 4.2rem; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(#1e1813, #3a2e24 50%, #1e1813); color: #f6e2b5; font: 400 2.4rem "Special Elite", monospace; box-shadow: inset 0 4px 8px rgba(0, 0, 0, .6); touch-action: none; cursor: ns-resize; }
.xr-dial output.roll { animation: xr-roll .22s ease-out; }
@keyframes xr-roll { from { transform: translateY(-30%); opacity: .3; } }
.xr-lockmsg { margin: 1rem 0 0; font: 400 1.1rem "Special Elite", monospace; color: #3a2a12; }
.xr-lock.is-open .xr-body { animation: xr-shake .5s; }
@keyframes xr-shake { 20% { rotate: -2deg; } 40% { rotate: 2deg; } 60% { rotate: -1deg; } 80% { rotate: 1deg; } }

/* booking, behind the door */
.xr-book { position: relative; padding: 5rem 0; background: linear-gradient(#221a13, #16110d); overflow: hidden; }
.xr-book h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); margin: .6rem 0 .8rem; }
.xr-fact { color: var(--muted); margin: 0 0 2rem; }
.xr-rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.xr-rooms article { padding: 1.4rem; border-radius: 12px; background: #2a2018; border: 1px solid rgba(217, 164, 65, .2); }
.xr-rooms h3 { font-size: 1.6rem; margin: .5rem 0; } .xr-rooms p:last-child { margin: 0; color: var(--muted); }
.xr-book__cover { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 2rem; text-align: center;
  background: repeating-linear-gradient(90deg, #3a2a1d 0 70px, #33251a 70px 140px); box-shadow: inset 0 0 0 14px #231910; transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.6, 0, .2, 1), opacity .4s 1.1s; font: 400 1.2rem "Special Elite", monospace; color: var(--muted); }
.xr-book__cover a { color: var(--brass); }
.is-escaped .xr-book__cover { transform: perspective(1400px) rotateY(-100deg); opacity: 0; pointer-events: none; }
.xr-confetti { position: fixed; inset: 0; z-index: 99; pointer-events: none; }

@media (max-width: 800px) {
  .xr-clock { display: none; }
  .xr-cipher { grid-template-columns: minmax(0, 1fr); }
  .xr-rooms { grid-template-columns: minmax(0, 1fr); }
  .xr-stone { left: 38%; top: 16%; width: 190px; } .xr-stone b { font-size: 2rem; }
  .xr-chalk { font-size: 1rem; } .xr-chalk--3 { left: 8%; top: 76%; } .xr-chalk--4 { display: none; }
  .xr-dark { height: 52svh; }
}
@media (prefers-reduced-motion: reduce) { .xr-book__cover, .xr-shackle { transition: none; } }

/* Own fonts (not the studio's Hanken Grotesk / IBM Plex Mono): body text and labels */
@font-face { font-family: "Courier Prime"; src: url(/assets/fonts/courier-prime-normal-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/assets/fonts/courier-prime-normal-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
.xr-page { --f-body: "Courier Prime", "Courier New", monospace; --f-mono: "Courier Prime", "Courier New", monospace; }