/* Home folio additions, memory room and gallery additions (docs/experience.md, docs/design_review.md). Load after
   journal.css/refine.css. Every loop here pauses under .is-still / body.motion-paused and is removed for reduced motion. */
:root{
 --xp-wall:#e9eef6;--xp-wall-2:#dde5f1;--xp-wall-line:#c9d4e4;--xp-floor:#d6dce6;--xp-floor-2:#c7cfdc;
 --xp-wood:#c9b498;--xp-wood-2:#a99173;--xp-wood-3:#8d775c;--xp-paper:#fffdf8;--xp-paper-1:#eef3fb;--xp-paper-2:#fbf0f3;
 --xp-paper-ink:#283246;--xp-paper-muted:#6a7488;--xp-sky-a:#b7cdee;--xp-sky-b:#f4e3d7;--xp-orb:#fff6e2;--xp-cloud:#ffffffd9;
 --xp-curtain:#c5d3ea;--xp-shadow:#18243a33;--xp-shadow-2:#18243a59;--xp-lamp:#ffd8a6;--xp-brass-a:#e6d3a3;--xp-brass-b:#b59a5f;--xp-pin:#b84d72;
 --xp-pencil:#6f87b3;--xp-grid:#d6e2f1;--xp-desk:#e8e1d4;--xp-note:#fffdf8
}
:root[data-theme=dark]{
 --xp-wall:#18212f;--xp-wall-2:#131a26;--xp-wall-line:#26324a;--xp-floor:#111823;--xp-floor-2:#0d131c;
 --xp-wood:#5a4a3b;--xp-wood-2:#46392d;--xp-wood-3:#352b22;--xp-paper:#e8e3d8;--xp-paper-1:#d5dceb;--xp-paper-2:#e6d6dc;
 --xp-paper-ink:#1f2633;--xp-paper-muted:#4d5568;--xp-sky-a:#1b2a48;--xp-sky-b:#3b4670;--xp-orb:#e4ebfb;--xp-cloud:#c9d4ec33;
 --xp-curtain:#2f3e5c;--xp-shadow:#00000066;--xp-shadow-2:#000000a6;--xp-lamp:#ffc977;--xp-brass-a:#bfa874;--xp-brass-b:#86703f;--xp-pin:#ec8fb0;
 --xp-pencil:#9db4dc;--xp-grid:#2b3c57;--xp-desk:#0d121c;--xp-note:#1f2839
}

/* The bare `header{}` / `footer{}` rules of style.css and theme.css are for the site bar and the page foot. Inside <main>
   a header or footer is a section part: start it from nothing (specificity 0,0,1, last stylesheet), class rules add back. */
:where(#main) :is(header,footer){position:static;top:auto;z-index:auto;display:block;height:auto;min-height:0;margin:0;padding:0;gap:normal;
 background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;border-radius:0;box-shadow:none;font-size:inherit;color:inherit}

/* ================================================================ home
   The editorial folio (homeFolio in experience.mjs) is laid out by journal.css (.folio, .folio-index, .refrain, .reel).
   Only what the mount adds lives here: the jewel butterflies fly over the hero figure (butterfly_flight.css) under the
   caption, and the still butterfly perches on the photo's upper right, away from the inset and the credit. */
.folio-figure{--bf-z:2;--bf-still-top:9%;--bf-still-right:7%}
.folio-figure figcaption{position:relative;z-index:3}

/* broken media */
[data-xp-media].is-broken{position:relative;background:var(--mist-2)}
[data-xp-media].is-broken>img,[data-xp-media].is-broken>video,img[data-xp-media].is-broken{visibility:hidden}
[data-xp-media].is-broken::after{content:'불러오지 못했어요';position:absolute;inset:0;display:grid;place-items:center;padding:8px;font-size:11px;color:var(--muted);text-align:center}
img[data-xp-media].is-broken::after{content:none}
.folio-inset.is-broken{position:absolute}

/* Chaennum (2D) in the memory room */
.xp-chaennum{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 12px var(--xp-shadow));animation:xp-bob 4.8s ease-in-out infinite;transform-origin:50% 100%}
[data-xp-media].xp-chaennum.is-broken{visibility:hidden}
@keyframes xp-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}

/* ================================================================ memory room (#memory-room, docs/memory_map.md)
   The page: head, one bar, the filter drawer (closed), the diary preview with its enter button, the walk-to strip.
   Sketched controls: ink outline + a pencil-blue offset shadow. `.is-immersive` turns the room into the full-screen view. */
.xp-room{margin:clamp(8px,1.5vw,18px) 0 clamp(48px,6vw,88px)}
/* A section heading, not the site bar: undo the bare `header` rules of style.css/theme.css (fixed height, sticky blurred
   background, page-wide padding that grows past 1500px, mobile min-height) at every width. */
.xp-room-head{position:static;top:auto;z-index:auto;display:grid;align-items:start;gap:8px;height:auto;min-height:0;margin:0 0 18px;padding:0;max-width:640px;
 background:none;backdrop-filter:none;border:0;box-shadow:none}
.xp-room-head h1{margin:0;font-family:var(--serif-ko);font-size:clamp(30px,3.6vw,46px);font-weight:400;line-height:1.25;word-break:keep-all}
.xp-room-head p{margin:0;color:var(--ink-2);line-height:1.75;word-break:keep-all}

/* one bar: where you are (status), the drawer button, the view switch; 나가기 only in the immersive view */
.xp-room-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:0 0 10px;border-bottom:1.5px dashed var(--xp-pencil)}
.xp-tally{flex:1 1 220px;min-width:0;margin:0;font-size:13px;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.xp-exit,.xp-tools-toggle,.xp-tools-close{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:2px 2px 0 var(--xp-pencil)}
.xp-exit:hover,.xp-tools-toggle:hover,.xp-tools-close:hover{background:var(--mist);transform:none}
.xp-tools-toggle[aria-expanded=true]{background:var(--ink);color:var(--on-ink)}
.xp-exit .icon{width:16px;height:16px}
/* the filter drawer: a panel under the bar here, a side sheet in the immersive view */
.xp-tools{margin:0 0 14px;padding:12px 16px 16px;border:1.5px solid var(--line-2);border-radius:var(--r-m);background:var(--surface)}
.xp-tools-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px}
.xp-tools-title{font-family:var(--serif-ko);font-size:18px}

/* controls, by rank: year (1), months (2), summary words (3) */
.xp-controls{display:grid;gap:12px;margin:0}
.xp-controls button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap}
.xp-controls button:hover{background:var(--mist);color:var(--ink);transform:none}
.xp-controls sup{font-size:10px;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums}
.xp-ctl-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 24px;border-bottom:1px solid var(--line)}
.xp-years,.xp-modes,.xp-months,.xp-facets{display:flex;flex-wrap:wrap;align-items:center;min-width:0}
.xp-years{gap:0 22px}
.xp-controls .xp-years button{position:relative;padding:0 2px;border-radius:0;color:var(--muted);font-family:var(--serif-en);font-size:clamp(22px,2.4vw,28px);font-weight:400}
.xp-controls .xp-years button:hover{background:none;color:var(--ink)}
.xp-years button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.xp-controls .xp-years button[aria-pressed=true]{background:none;color:var(--ink)}
.xp-years button[aria-pressed=true]::after{transform:scaleX(1)}
.xp-modes{flex-wrap:nowrap;gap:2px;padding:2px;border:1px solid var(--line-2);border-radius:999px}
.xp-modes button{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap}
.xp-modes button:hover{background:var(--mist);color:var(--ink);transform:none}
.xp-modes button[aria-pressed=true],.xp-controls .xp-months button[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}
.xp-months{flex-wrap:nowrap;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:0 0 4px;scrollbar-width:thin}
.xp-controls .xp-months button{flex:none;min-width:60px;scroll-snap-align:start;font-size:14px}
.xp-facets{gap:6px}
.xp-facets-label{margin-right:6px;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--brand-ink)}
.xp-controls .xp-facets button{min-height:40px;padding:0 12px;border:1px solid var(--line);font-size:12.5px}
.xp-controls .xp-facets button[aria-pressed=true]{border-color:var(--ink);color:var(--ink);background:var(--mist)}

/* the walkable diary. The view box is the only fixed-height thing; the canvas fills it. On the page it is a preview:
   the canvas takes no pointer, the enter button covers it (a button never blocks scrolling). Touch in the immersive view:
   the canvas still leaves vertical swipes alone (pan-y), only the pad takes every touch. */
.xp-map{display:grid;gap:12px}
.xp-map-stage{position:relative;min-height:0}
.xp-map-view{position:relative;height:clamp(360px,52vw,680px);overflow:hidden;border-radius:var(--r-l);isolation:isolate;
 background:var(--xp-desk);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.xp-map-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;outline:none;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent;pointer-events:none}
.xp-room.is-immersive .xp-map-canvas{pointer-events:auto}
.xp-map-canvas:focus-visible{outline:3px solid var(--brand-ink);outline-offset:-3px}
/* the way in: the whole preview is one button, its label a sketched tag at the bottom */
.xp-map-enter{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;width:100%;padding:0 16px clamp(18px,4vw,36px);border:0;border-radius:0;
 background:linear-gradient(to top,color-mix(in srgb,var(--xp-desk) 75%,transparent),transparent 42%);color:var(--ink);cursor:pointer}
.xp-map-enter:hover{transform:none}
.xp-map-enter:focus-visible{outline:3px solid var(--brand-ink);outline-offset:-3px}
.xp-enter-pill{display:inline-flex;align-items:center;min-height:52px;padding:0 26px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);
 font-family:var(--serif-ko);font-size:clamp(16px,1.7vw,19px);box-shadow:3px 3px 0 var(--xp-pencil);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.xp-map-enter:is(:hover,:focus-visible) .xp-enter-pill{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--xp-pencil)}
.xp-map:is([data-map-state=idle],[data-map-state=error]) .xp-map-enter,.xp-room.is-immersive .xp-map-enter{display:none}
/* poster: Chaennum + what is happening, until the map draws (and instead of it when it cannot) */
.xp-map-poster{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}
.xp-map[data-map-state=ready] .xp-map-poster{display:none}
.xp-map-poster .xp-mascot{width:clamp(96px,14vw,150px);margin:0}
.xp-mascot.is-broken .xp-chaennum{visibility:hidden}
.xp-mascot-canvas{display:block;width:100%;aspect-ratio:1;pointer-events:auto;touch-action:none}
/* 3d = mounted by experience.mjs; ready = the state name mascot_viewer.js uses once a model is drawn */
.xp-mascot:is([data-state="3d"],[data-state="ready"]):has(canvas:not([hidden])) .xp-chaennum{display:none}
.xp-map:not([data-map-state=loading]) .xp-map-poster .xp-chaennum{animation:none}
.xp-map-msg{margin:0;max-width:32ch;color:var(--ink-2);font-size:14px;line-height:1.65;word-break:keep-all}
.xp-map-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.xp-map-actions button,.xp-map-overview{min-height:44px;padding:0 16px;border:1.5px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:700;box-shadow:2px 2px 0 var(--xp-pencil)}
.xp-map-actions button:hover,.xp-map-overview:hover{background:var(--ink);border-color:var(--ink);color:var(--on-ink);transform:none}
.xp-map-overview{display:none;position:absolute;top:12px;right:12px;z-index:3;align-items:center}
.xp-map-overview[aria-pressed=true]{background:var(--ink);color:var(--on-ink)}
.xp-room.is-immersive .xp-map[data-map-state=ready] .xp-map-overview{display:inline-flex}
/* touch pad: immersive view on coarse pointers only, bottom right (the nearby note owns bottom left) */
.xp-map-pad{display:none;position:absolute;right:16px;bottom:16px;z-index:3;width:120px;height:120px;border:1.5px solid var(--ink);border-radius:50%;
 background:var(--surface);opacity:.92;box-shadow:3px 3px 0 var(--xp-pencil);touch-action:none;-webkit-user-select:none;user-select:none}
@media(pointer:coarse){.xp-room.is-immersive .xp-map[data-map-state=ready] .xp-map-pad{display:grid;place-items:center}}
.xp-map-knob{width:52px;height:52px;border-radius:50%;background:var(--ink);opacity:.72;pointer-events:none;transition:transform .15s var(--ease)}
.xp-map-pad.is-active .xp-map-knob{transition:none}
/* the nearby note: a paper slip over the bottom left of the immersive view (hidden in the preview) */
.xp-map-near{position:absolute;left:12px;bottom:12px;z-index:3;display:none;gap:8px;width:min(360px,calc(100% - 24px));max-height:calc(100% - 84px);overflow:auto;overscroll-behavior:contain;
 padding:14px 16px;border:1.5px solid var(--ink);border-radius:var(--r-m);background:var(--xp-note);box-shadow:3px 3px 0 var(--xp-pencil)}
.xp-room.is-immersive .xp-map[data-map-state=ready] .xp-map-near{display:grid}
@media(pointer:coarse){.xp-room.is-immersive .xp-map-near{width:min(360px,calc(100% - 160px))}}
.xp-map-where{margin:0;font-size:12.5px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.xp-near-card{display:grid;gap:8px;min-width:0}
.xp-near-title{display:flex;align-items:baseline;gap:8px;margin:0;font-family:var(--serif-ko);font-size:19px;font-weight:400;line-height:1.35;overflow-wrap:anywhere}
.xp-near-no,.xp-go-no{font-family:var(--serif-en);font-size:13px;color:var(--xp-pencil);font-variant-numeric:tabular-nums}
.xp-near-rule{margin:0;font-size:12px;color:var(--muted);line-height:1.55;word-break:keep-all}
.xp-near-card .xp-fact{justify-self:start}
.xp-near-open{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:700}
.xp-near-open:hover{transform:none}
.xp-near-open kbd{padding:0 6px;border:1px solid currentColor;border-radius:5px;font:inherit;font-size:11px;opacity:.8}
@media(pointer:coarse){.xp-near-open kbd{display:none}}
.xp-near-list{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.xp-near-rec{display:grid;justify-items:start;gap:3px;width:100%;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:var(--mist);color:var(--ink);text-align:left}
.xp-near-rec:hover{background:var(--mist-2);transform:none}
.xp-near-rec time{font-family:var(--serif-en);font-size:16px;line-height:1.2}
.xp-near-line{max-width:100%;padding:1px 8px;border-radius:999px;background:var(--mist-2);font-size:11px;font-weight:700;color:var(--brand-ink);overflow-wrap:anywhere}
.xp-near-rec small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.5;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.xp-near-empty{margin:0;font-size:12.5px;line-height:1.6;color:var(--ink-2);word-break:keep-all}
.xp-map-help{margin:0;font-size:12px;line-height:1.6;color:var(--muted);word-break:keep-all}
.xp-map-go{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 4px;scrollbar-width:thin}
.xp-map-go button{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink);font-size:12.5px;font-weight:600;white-space:nowrap}
.xp-map-go button:hover{background:var(--mist);transform:none}
.xp-map-go button.is-empty{color:var(--muted)}
.xp-map-go sup{font-size:10px;opacity:.75;font-variant-numeric:tabular-nums}

/* the immersive view: the room covers the screen (bar · diary · walk-to strip), the page behind stops scrolling */
html.xp-locked,html.xp-locked body{overflow:hidden;overscroll-behavior:none}
.xp-room.is-immersive{position:fixed;inset:0;z-index:40;display:grid;grid-template-rows:auto minmax(0,1fr);margin:0;background:var(--xp-desk);overscroll-behavior:contain}
.xp-room.is-immersive>:is(.xp-room-head,.xp-list,[data-xp-empty],.xp-room-note){display:none}
.xp-room.is-immersive .xp-room-bar{flex-wrap:nowrap;margin:0;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));background:var(--surface)}
.xp-room.is-immersive .xp-modes{display:none}
.xp-room.is-immersive .xp-tally{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-room.is-immersive .xp-scene{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0;min-height:0}
.xp-room.is-immersive .xp-map-stage{height:100%}
.xp-room.is-immersive .xp-map-view{height:100%;border-radius:0;box-shadow:none}
.xp-room.is-immersive .xp-map-help{display:none}
.xp-room.is-immersive .xp-map-go{padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--surface);border-top:1.5px dashed var(--xp-pencil)}
.xp-room.is-immersive .xp-tools{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(380px,100%);margin:0;overflow:auto;overscroll-behavior:contain;
 padding:max(14px,env(safe-area-inset-top)) 18px 24px;border-width:0 0 0 1.5px;border-radius:0;box-shadow:-18px 0 40px -28px var(--xp-shadow-2)}

/* list mode (the same content, always fully readable) */
.xp-list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.xp-list-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}
.xp-list-item>time{font-family:var(--serif-en);font-size:17px;color:var(--ink-2)}
.xp-parts{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.xp-part{display:grid;gap:6px;min-width:0}
.xp-part-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:0;font-family:var(--serif-ko);font-size:16px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.xp-part-label{padding:1px 8px;border-radius:999px;background:var(--mist-2);font-family:inherit;font-size:11px;font-weight:700;color:var(--brand-ink)}
.xp-part-time{font-size:11px;color:var(--muted)}
.xp-part-summary{margin:0;white-space:pre-line;line-height:1.75;color:var(--ink-2);overflow-wrap:anywhere}
.xp-source{display:inline-flex;align-items:center;gap:6px;justify-self:start;min-height:44px;color:var(--brand-ink);font-size:13px;font-weight:600}
.xp-source .icon{width:14px;height:14px}
.xp-photos{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0;padding:0;list-style:none}
.xp-photo-open{display:grid;gap:4px;width:112px;min-height:44px;padding:0;border:0;border-radius:0;background:none;text-align:left}
.xp-photo-open:hover{background:none;transform:none}
.xp-photo-open>span{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--mist-2)}
.xp-photo-open img{display:block;width:100%;height:100%;object-fit:cover}
.xp-photo-open small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xp-empty{margin:16px 0 0;color:var(--ink-2)}
.xp-room-note{margin-top:14px}

/* memory dialog body (#dialog.memory-dialog) */
#dialog.memory-dialog{width:min(720px,calc(100vw - 24px))}
.xp-detail{display:grid;gap:14px}
.xp-detail h2{margin:0;font-family:var(--serif-ko);font-size:clamp(22px,3vw,28px);font-weight:400}
.xp-detail h2:focus{outline:none}
.xp-fact{justify-self:start;margin:0;padding:6px 12px;border-radius:999px;background:linear-gradient(140deg,var(--xp-brass-a),var(--xp-brass-b));color:#3a2e14;font-size:12px;font-weight:700}
.xp-detail .xp-parts{gap:22px;padding-top:6px;border-top:1px solid var(--line)}
.xp-detail .xp-part{padding-top:16px}

@media(max-width:720px){
 .xp-room-bar>.xp-tally{flex-basis:100%}
 .xp-room.is-immersive .xp-room-bar>.xp-tally{flex-basis:auto}
 .xp-modes{margin-left:auto}
 .xp-map-view{height:clamp(340px,92vw,480px)}
 .xp-room.is-immersive .xp-map-near{max-height:min(46%,calc(100% - 84px))}
 .xp-list-item{grid-template-columns:minmax(0,1fr);gap:8px}
}

/* ================================================================ games: the door to the memory room */
.game-room-entry{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 22px;margin:0 0 clamp(22px,3vw,34px);padding:clamp(16px,2.4vw,28px);
 border:1.5px solid var(--ink);border-radius:var(--r-l);color:var(--ink);text-decoration:none;box-shadow:4px 4px 0 var(--xp-pencil);
 background:linear-gradient(var(--xp-grid) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,var(--xp-grid) 1px,transparent 1px) 0 0/22px 22px,var(--surface);
 transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.game-room-entry:hover,.game-room-entry:focus-visible{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--xp-pencil)}
.game-room-art{position:relative;display:block;width:clamp(64px,8vw,88px)}
.game-room-art img{display:block;width:100%;height:auto}
.game-room-art .game-room-mark{position:absolute;top:-6px;right:-14px;width:28px;height:28px;color:var(--brand)}
.game-room-text{display:grid;gap:4px;min-width:0}
.game-room-title{font-family:var(--serif-ko);font-size:clamp(22px,2.6vw,30px);line-height:1.3}
.game-room-line{color:var(--ink-2);font-size:14px;line-height:1.65;word-break:keep-all}
.game-room-entry .game-cta{grid-column:auto;grid-row:auto;display:inline-flex;align-items:center;gap:4px;font-weight:700;white-space:nowrap}
@media(max-width:600px){.game-room-entry{grid-template-columns:auto minmax(0,1fr)}.game-room-entry .game-cta{grid-column:1/-1;justify-self:end}}
@media(prefers-reduced-motion:reduce){.game-room-entry{transition:none}.game-room-entry:hover,.game-room-entry:focus-visible{transform:none}}

/* ================================================================ gallery additions */
.gallery-tile.is-broken .tile-frame{background:var(--mist-2)}
.gallery-tile.is-broken :is(img,video){visibility:hidden}
.tile-broken{position:absolute;inset:0;display:grid;place-items:center;padding:8px;font-size:12px;color:var(--muted);text-align:center}
.lightbox-caption h2:focus{outline:none}
.lightbox-caption h2:focus-visible{outline:3px solid var(--brand-ink);outline-offset:4px}
.lightbox-stage.is-broken{min-height:240px}
.lightbox-broken{margin:0;padding:24px;color:#d5deeb;text-align:center;line-height:1.7}
.lightbox-related{display:grid;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.lightbox-related h3{margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--brand-ink)}
.lightbox-related ul{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.related-open{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:52px;padding:4px;border:0;border-radius:var(--r-s);background:none;color:var(--ink);text-align:left}
.related-open:hover{background:var(--mist);transform:none}
.related-thumb{display:grid;place-items:center;width:52px;height:52px;overflow:hidden;border-radius:8px;background:var(--mist-2)}
.related-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.related-thumb.is-text{font-size:11px;font-weight:700;color:var(--brand-ink)}
.related-text{display:grid;gap:2px;min-width:0}
.related-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.related-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--muted)}

/* `hidden` must win over the display values above */
.xp-scene[hidden],.xp-list[hidden],.xp-mascot-canvas[hidden],.xp-near-list[hidden],.xp-map-actions[hidden],.xp-tools[hidden],.xp-exit[hidden],.lightbox-stage>[hidden]{display:none!important}

/* ================================================================ stillness */
:is(.home-folio,.xp-room).is-still :is(*,*::before,*::after),
body.motion-paused :is(.home-folio,.xp-room) :is(*,*::before,*::after){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
 :is(.home-folio,.xp-room) :is(*,*::before,*::after){animation:none!important;transition-duration:.01ms!important}
}