/* DROAM.CITY V2 cinematic gallery: exact static original chamber, movable camera only at transitions */
html,body{margin:0;height:100%;overflow:hidden;background:#fff}
#site{height:100%;overflow:hidden}
.cinema-gallery{position:fixed;inset:0;z-index:5;overflow:hidden;background:#050403;touch-action:pan-y}
.room-stage{position:absolute;top:0;left:0;width:1536px;height:1024px;transform-origin:top left;will-change:transform;pointer-events:none}
.room-background,.room-foreground{position:absolute;inset:0;width:1536px;height:1024px;display:block}
.room-background{z-index:0}
.room-foreground{z-index:5;pointer-events:none}
.screen-overlay{position:absolute;inset:0;z-index:2;clip-path:path('M 219 213 Q 767 291 1318 211 L 1327 681 Q 766 664 209 682 Z');background:linear-gradient(175deg,#fff 0%,#fff 67%,#fbfaf8 100%)}
.screen-white{position:absolute;inset:0;background:#fff;opacity:1;pointer-events:none}
.screen-content{position:absolute;left:219px;top:235px;width:1100px;height:433px;display:flex;align-items:center;justify-content:center;color:#171717;overflow:hidden;text-align:center}
.screen-title{position:relative;top:4px}
.screen-title h1,.void-type h1{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;letter-spacing:.28em;font-size:48px;margin:0 0 23px;line-height:1.2;white-space:nowrap}
.screen-title p,.void-type p{margin:0;font-family:'Helvetica Neue',Arial,sans-serif;font-size:15px;font-weight:400;letter-spacing:.56em;line-height:1.7}
.screen-title p span{letter-spacing:0}
.screen-photo{position:absolute;top:-34px;bottom:-22px;left:-14px;right:-14px;margin:0;overflow:hidden;background:#fff}
.screen-photo img{width:100%;height:100%;object-fit:contain;display:block;filter:contrast(1.035) saturate(.94);opacity:1;transition:opacity .34s ease}
.screen-photo figcaption{position:absolute;bottom:0;left:0;right:0;text-align:left;padding:29px 38px 17px;color:white;font-size:13px;font-weight:600;letter-spacing:.14em;text-shadow:0 2px 9px #000;line-height:1.4;background:linear-gradient(transparent,#000b)}
.screen-words{padding:28px 94px;text-align:center;max-width:100%;}
.screen-words .type-label{display:block;font-size:12px;font-weight:600;letter-spacing:.25em;color:#666;margin-bottom:24px}
.screen-words h2{font-size:clamp(36px,3.2vw,55px);font-weight:300;letter-spacing:.07em;line-height:1.18;margin:0 0 25px}
.screen-words p{font-size:17px;line-height:1.7;color:#555;max-width:720px;margin:0 auto}
.screen-words a{display:inline-block;margin-top:22px;font-size:11px;letter-spacing:.16em;color:#555}
.screen-enter h2{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:300;font-size:65px;letter-spacing:.27em;margin:0 0 26px}
.screen-enter button{pointer-events:auto;border:1px solid #111;border-radius:0;color:#111;background:transparent;padding:15px 34px;font-size:17px;letter-spacing:.18em;min-width:210px;transition:background .2s,color .2s}
.screen-enter button:hover,.screen-enter button:focus-visible{background:#151515;color:#fff}
.screen-enter button span{padding-left:16px}
.photo-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff;color:#111;gap:25px}
.photo-fallback p{font-size:22px;letter-spacing:.17em}
.photo-fallback a{font-size:14px;letter-spacing:.13em;text-decoration:underline}
.opening-void{position:absolute;inset:0;z-index:10;background:#fff;display:grid;place-items:center;transition:opacity .1s;pointer-events:none;color:#111}
.void-type{text-align:center;opacity:0;will-change:opacity}
.void-type p{opacity:0}
.void-type h1{font-size:clamp(27px,4.1vw,72px)}
.void-type p{font-size:clamp(9px,1vw,17px)}
.cinema-controls{position:absolute;z-index:8;bottom:clamp(14px,3vh,31px);left:clamp(16px,3vw,52px);right:clamp(16px,3vw,52px);display:flex;align-items:end;justify-content:space-between;color:#fff;gap:15px;opacity:0;transition:opacity .65s;pointer-events:none;text-shadow:0 1px 7px #000a}
.cinema-controls.ready{opacity:1;pointer-events:auto}
.cinema-left{display:flex;flex-direction:column;gap:9px;max-width:42%;min-width:0}
#galleryKind{font-size:9px;letter-spacing:.21em;line-height:1.65;font-weight:600}
#gallerySource{font-size:9px;letter-spacing:.14em;text-decoration:none;border-bottom:1px solid #fffc;align-self:start;padding-bottom:4px}
.cinema-nav{display:flex;align-items:center;gap:19px}
.cinema-nav button{color:white;border:1px solid #fff8;width:47px;height:47px;border-radius:50%;font-size:22px;background:#0005;backdrop-filter:blur(9px);transition:background .2s}
.cinema-nav button:hover{background:#ffffff38}
#slideCounter{font-size:11px;letter-spacing:.22em;min-width:72px;text-align:center;font-weight:600}
.cinema-about{font-size:10px;letter-spacing:.23em;color:#fff;background:#0005;border:1px solid #fff6;padding:14px 16px;backdrop-filter:blur(6px)}
.cinema-about span{padding-left:8px}
.cinema-skip{position:absolute;bottom:24px;right:24px;z-index:13;font-size:10px;letter-spacing:.2em;padding:16px 18px;color:#3d3d3d;border:1px solid #ddd;opacity:1}
.cinema-skip.done{display:none}
.white-flash{position:fixed;z-index:120;inset:0;background:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .18s linear}
.white-flash.active{opacity:1;pointer-events:auto}
.white-flash span{font-size:12px;letter-spacing:.2em;color:#888;opacity:0;transition:opacity .4s;text-align:center;padding:25px}
.white-flash.loading span{opacity:1}
#world{z-index:20}
@media(max-width:650px){.cinema-controls{bottom:16px;left:12px;right:12px}.cinema-left{max-width:31%}#galleryKind{font-size:8px;letter-spacing:.09em}#gallerySource{font-size:8px;letter-spacing:.05em}.cinema-nav{gap:6px}.cinema-nav button{width:42px;height:42px;font-size:18px}#slideCounter{font-size:9px;min-width:52px;letter-spacing:.09em}.cinema-about{font-size:8px;letter-spacing:.08em;padding:14px 9px}.cinema-about span{display:none}}
@media(prefers-reduced-motion:reduce){.room-stage{will-change:auto}}

.screen-photo .archive-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:#171717;gap:24px}.screen-photo .archive-loading a{font-size:15px;letter-spacing:.15em;color:#222;text-decoration:underline;text-underline-offset:5px}.screen-photo .archive-loading span{font-size:12px;letter-spacing:.2em;color:#777}.screen-photo:not(.loaded) figcaption{color:#222;background:none;text-shadow:none}.screen-photo.loaded .archive-loading{display:none}

/* V5 permanent, screen-width-centered navigation: independent of caption width/content. */
.cinema-controls{position:absolute;display:block;min-height:50px;left:0;right:0;bottom:clamp(16px,3vh,32px);pointer-events:none}
.cinema-controls.ready{pointer-events:none}
.cinema-left{position:absolute;left:clamp(15px,3vw,52px);bottom:0;max-width:min(31vw,360px);width:29vw;min-width:0;pointer-events:auto}
.cinema-nav{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:19px;width:220px;min-height:50px;pointer-events:auto}
.cinema-nav button{flex:0 0 auto}
#slideCounter{flex:0 0 76px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cinema-about{position:absolute;right:clamp(15px,3vw,52px);bottom:0;pointer-events:auto}
@media(max-width:650px){.cinema-controls{left:0;right:0;bottom:18px}.cinema-nav{left:50%;width:158px;gap:5px}.cinema-nav button{width:42px;height:42px}.cinema-left{left:10px;bottom:0;width:23vw;max-width:23vw}.cinema-about{right:10px;bottom:0;padding:14px 9px}#slideCounter{flex:0 0 56px}}

/* V6: photographs fill the giant screen; publisher attribution is optional footer metadata.
   Never substitute an enormous link block for a missing photo. */
.screen-photo .archive-loading a{display:none!important}
.screen-photo .archive-loading{gap:0}
.screen-photo .archive-loading span{font-size:10px;letter-spacing:.21em;text-align:center;max-width:70%;line-height:1.65}
.screen-photo img{object-fit:contain}

/* V9 first-run resilience: don't strand a high-stakes presentation at a loading screen. */
.engine-fallback{position:fixed;z-index:130;inset:0;background:rgba(16,14,12,.94);color:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:26px}
.engine-fallback.hidden{display:none!important}
.engine-fallback h2{font-size:clamp(29px,5vw,63px);font-weight:300;letter-spacing:.13em;margin:0 0 25px}
.engine-fallback p{max-width:570px;font-size:16px;line-height:1.8;color:#d7cbb8}
.engine-fallback a,.engine-fallback button{border:1px solid #eee;color:#fff;padding:17px 27px;margin:8px;font-size:13px;letter-spacing:.14em;text-decoration:none;background:transparent}
.engine-fallback a{background:#f7f3e9;color:#17120f}

/* V11: 3 fixed slideshow controls, never linked to caption width. */
.cinema-nav{width:300px;gap:12px;bottom:0;align-items:center;justify-content:center;}
.cinema-nav .enter-anytime{width:116px;height:47px;flex:0 0 116px;border:1px solid rgba(255,255,255,.85);border-radius:4px;font:600 11px/1 Arial,sans-serif;letter-spacing:.2em;color:#fff;background:rgba(17,15,13,.75);backdrop-filter:blur(10px);}
.cinema-nav .enter-anytime span{margin-left:5px;letter-spacing:0;}
.cinema-nav .enter-anytime:hover,.cinema-nav .enter-anytime:focus-visible{background:#fff;color:#161616}
.cinema-nav #slideCounter{position:absolute;bottom:59px;left:50%;transform:translateX(-50%);width:auto;min-width:70px;pointer-events:none;text-align:center;background:#0006;padding:6px 9px;border-radius:3px;}
@media(max-width:650px){.cinema-nav{width:244px;gap:8px}.cinema-nav .enter-anytime{width:96px;height:42px;flex-basis:96px;font-size:9px}.cinema-nav #slideCounter{bottom:52px}}

#gallerySource{display:none !important;}

/* V14 requested removal: suppress the entire lower-left credit label. */
.cinema-left{display:none!important}

/* V16: always-white display on click; gradual threshold avoids white snap. */
.screen-overlay.entering-white{background:#fff!important}
.room-foreground{transition:none;will-change:opacity}
.white-flash{transition:opacity .52s cubic-bezier(.22,1,.36,1)}

/* V20: mobile gallery ambient extension. Original approved room imagery is
   retained (not stretched); blurred continuation fills extra viewport height. */
@media(max-width:700px){
  .cinema-gallery{height:100dvh;min-height:100vh}
  .cinema-gallery:before{content:"";position:absolute;inset:-38px;z-index:0;background-image:linear-gradient(180deg,#0c0b0a38,#0c0b0a24),url('../assets/cinema/room-fast.webp?v=2368');background-size:cover;background-position:center;filter:blur(24px) brightness(.65);pointer-events:none}
  .room-stage{z-index:1}
  .cinema-controls,.opening-void{z-index:10}
}


/* V20.2 — approved single-layer mobile portrait gallery.  Only the new
   approved oculus/brown-jacket image supplies the room, bench, and bear.
   Screen content remains live/interactive and is physically bounded above
   the bear's ears (photo starts ~55.4% down original 941x1672 image). */
@media (max-width:700px) and (orientation:portrait) {
  .cinema-gallery { background:#100b08; height:100dvh; min-height:0; isolation:isolate; }
  .cinema-gallery::before { display:none!important; content:none!important; }
  .room-stage {
    position:absolute;
    top:50%;left:50%;
    width:max(100vw, 56.2799dvh);
    height:max(100dvh, 177.6833vw);
    min-width:0;min-height:0;
    transform:translate(-50%,-50%) scale(var(--portrait-intro-scale,1))!important;
    transform-origin:center center;
    background:url('../assets/cinema/mobile-oculus-bear-v202.webp') center/100% 100% no-repeat;
    will-change:auto;pointer-events:none;
    z-index:1;
  }
  /* No duplicate original room, blurred filler, or separately composited bear. */
  .room-stage .room-background,.room-stage .room-foreground { display:none!important; }
  .screen-overlay,.screen-overlay.entering-white {
    clip-path:none!important;
    position:absolute;
    /* Explicit *important* longhands are essential: V20.2's inset:auto!important
       won over non-important top/left, leaving slides at the TOP of the viewport. */
    inset:unset!important;
    left:3.0%!important;
    right:auto!important;
    top:39.8%!important;
    bottom:auto!important;
    width:94.0%!important;
    height:14.0%!important;
    background:transparent!important;
    z-index:2;
    overflow:hidden;
    pointer-events:none;
  }
  .screen-white { display:none!important; }
  .screen-content {
    position:absolute;inset:0;
    left:0;right:0;top:0;bottom:0;
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    pointer-events:none;
  }
  .screen-title {position:relative;top:0;max-width:96%;}
  .screen-title h1 {font-size:clamp(22px,7.3vw,36px);letter-spacing:.12em;margin:0 0 8px;white-space:nowrap;}
  .screen-title p {font-size:clamp(9px,2.75vw,13px);letter-spacing:.22em;}
  /* Let the white wall in the ONE approved photo remain the unbroken surface: no opaque rectangle seam. */
  .screen-photo {position:absolute;inset:0;margin:0;background:transparent;}
  .screen-photo .archive-loading {background:transparent;}
  .photo-fallback {background:transparent;}
  .screen-photo img {width:100%;height:100%;object-fit:contain;object-position:center;max-height:100%;}
  .screen-photo figcaption {display:none!important;}
  .screen-photo .archive-loading span {font-size:clamp(8px,2vw,11px);}
  .screen-words {width:100%;height:100%;padding:4px 7%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;}
  .screen-words.hidden {display:none!important;}
  .screen-words .type-label {font-size:clamp(7px,1.7vw,9px);letter-spacing:.08em;margin-bottom:4px;}
  .screen-words h2 {font-size:clamp(14px,4vw,22px);line-height:1.12;letter-spacing:0;margin:0 0 5px;}
  .screen-words p {font-size:clamp(9px,2.5vw,12px);line-height:1.32;max-width:100%;}
  .screen-words a {font-size:8px;margin-top:6px;}
  .screen-enter h2 {font-size:clamp(21px,6vw,32px);margin:0 0 10px;}
  .screen-enter button {pointer-events:auto;min-width:0;padding:8px 15px;font-size:clamp(10px,2.8vw,13px);}
  .screen-photo,.screen-enter,.screen-words,.screen-title {max-height:100%;}
  .photo-fallback {gap:8px;padding:7px;}
  .photo-fallback p {font-size:11px;}
  /* Controls are anchored to the viewport, below the actual bear, never to
     the photo's screen or to a frame transform. */
  .cinema-controls {position:absolute;z-index:11;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));height:82px;min-height:82px;}
  .cinema-nav {bottom:0;width:min(75vw,290px);gap:clamp(5px,2vw,13px);height:46px;}
  .cinema-nav button {width:44px;height:44px;min-width:44px;border:1px solid #fff9;background:#0d0b0b99;}
  .cinema-nav .enter-anytime {height:44px;width:clamp(100px,34vw,142px);flex-basis:clamp(100px,34vw,142px);font-size:10px;}
  .cinema-nav #slideCounter {bottom:53px;min-width:75px;background:#0009;font-size:11px;padding:5px 9px;letter-spacing:.17em;}
  .cinema-about {right:8px;bottom:0;padding:14px 9px;font-size:10px;}
  .cinema-about span {display:none;}
  .opening-void {z-index:12;}
  .cinema-skip {display:none!important;}
}
/* V22: one shared portrait composition through tablet sizes. The live screen
   follows the wall, while a clipped copy of the ORIGINAL head occludes it. */
@media (max-width:900px) and (orientation:portrait){
 .room-stage{position:absolute;top:50%;left:50%;width:max(100vw,56.2799dvh);height:max(100dvh,177.6833vw);min-width:0;min-height:0;transform:translate(-50%,-50%) scale(var(--portrait-intro-scale,1))!important;background:url('../assets/cinema/mobile-oculus-bear-v202.webp') center/100% 100% no-repeat;pointer-events:none}
 .room-background,.room-foreground{display:none!important}
 .screen-overlay,.screen-overlay.entering-white{inset:unset!important;left:0!important;top:38.6%!important;width:100%!important;height:20.6%!important;background:#fff!important;overflow:hidden;clip-path:polygon(0 0,15% 5%,35% 9%,50% 10%,65% 9%,85% 5%,100% 0,100% 100%,80% 98%,50% 97%,20% 98%,0 100%)!important;z-index:2}
 .screen-content{position:absolute;inset:0!important;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
 .screen-white{display:none!important}
 .screen-photo{position:absolute;inset:0;margin:0;background:#fff;isolation:isolate}
 .screen-photo::before{content:"";position:absolute;inset:-12%;background:var(--v22-slide-image) center/cover no-repeat;filter:blur(12px);z-index:-1}
 .screen-photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;max-height:100%}
 .screen-photo figcaption{display:none!important}
 .room-stage::after{content:"";position:absolute;inset:0;background:url('../assets/cinema/mobile-oculus-bear-v202.webp') center/100% 100% no-repeat;z-index:3;pointer-events:none;clip-path:polygon(45.7% 56.4%,46.2% 56%,47.2% 56.1%,48% 56.5%,50% 56.4%,52% 56.4%,53% 56%,54% 56.2%,54.5% 56.7%,54% 57.4%,53.4% 57.5%,53.4% 58.8%,55% 59.8%,45% 59.8%,46.5% 58.8%,46.5% 57.5%)}
 .screen-title{position:relative;top:0;max-width:96%}.screen-title h1{font-size:clamp(22px,7.3vw,45px)}
 .screen-words{padding:4px 7%;overflow:auto}.screen-words h2{font-size:clamp(14px,4vw,27px)}.screen-words p{font-size:clamp(9px,2.5vw,16px)}
 .screen-enter h2{font-size:clamp(21px,6vw,38px)}.screen-enter button{pointer-events:auto;padding:8px 15px}
 .cinema-controls{z-index:11;bottom:max(12px,env(safe-area-inset-bottom))}
}
/* V22.2: smooth, subject-shaped head mask, aligned to the original source pixels. */
@media(max-width:900px) and (orientation:portrait){
 .room-stage::after{clip-path:none!important;mask-image:url('../assets/cinema/bear-head-mask-v228.png');mask-size:100% 100%;mask-position:center;mask-repeat:no-repeat;-webkit-mask-image:url('../assets/cinema/bear-head-mask-v228.png');-webkit-mask-size:100% 100%;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat}
}

/* V22.7 — the portrait room photograph itself moves as a single layer.
   All mask geometry scales along with the photograph; no ear separation. */
@media(max-width:900px) and (orientation:portrait){
 .room-stage.portrait-dolly-active{will-change:transform;}
 .cinema-skip:not(.done){display:block!important;top:max(12px,env(safe-area-inset-top));right:12px;bottom:auto;background:#fffdf4eb;z-index:20;padding:10px 13px;font-size:9px;}
 .opening-void .void-type{max-width:94vw;padding:0 3vw;}
 .opening-void .void-type h1{font-size:clamp(25px,8vw,48px);letter-spacing:.17em;}
 .opening-void .void-type p{font-size:clamp(10px,2.7vw,16px);letter-spacing:.24em;}
}

/* V23.5: the cinematic screen is not a text-selection surface on touch devices. */
.cinema-gallery,.cinema-gallery .cinema-controls,.opening-void{
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
 -webkit-tap-highlight-color:transparent;
}

/* V23.6.8: user supplied tweet credit remains bottom-left on portrait phones. */
@media(max-width:900px){
 .screen-photo.ye-tweet-credit figcaption{display:block!important;bottom:0;left:0;right:auto;max-width:100%;color:white;background:#171717aa;text-shadow:0 1px 2px #0008;padding:8px 13px;font-size:clamp(8px,1.7vw,12px);letter-spacing:.045em;line-height:1.25}
}

/* V23.7.4 recovery: never clip diagnostics or the real 3D retry on phone screens. */
.engine-fallback{overflow-y:auto;justify-content:safe center;box-sizing:border-box;gap:3px}
.engine-fallback h2{margin-bottom:10px}
.engine-fallback #worldErrorDetail{font:12px/1.45 ui-monospace,monospace;max-height:22vh;overflow:auto;white-space:pre-wrap;word-break:break-word;color:#f7e1ba}
.engine-fallback #retry3d{background:#fff;color:#17120f;font-weight:700}
@media(max-width:600px){.engine-fallback{justify-content:flex-start;padding:32px 14px}.engine-fallback h2{font-size:clamp(23px,7vw,35px)}.engine-fallback p{font-size:13px}.engine-fallback a,.engine-fallback button{padding:12px 15px;font-size:11px;margin:5px}}

@media (pointer:coarse){.cinema-gallery,.cinema-gallery *:not(input):not(textarea):not([contenteditable="true"]){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.cinema-gallery img{-webkit-user-drag:none;user-drag:none}}