/* Current facade: the November 2 moonlit Dallas master.
   All former facade and mobile-layout rules are superseded by this file. */
html,body{height:auto;min-height:100%;overflow-x:hidden;background:#05080b}
.facade-splash.splash{height:100svh;height:100dvh;min-height:0;isolation:isolate;background:#05080b;overflow:hidden}
.facade-scene.scene{position:absolute;left:50%;top:0;width:max(100vw,177.777778svh);width:max(100vw,177.777778dvh);height:auto;aspect-ratio:16/9;display:block;transform:translateX(-50%);margin:0;isolation:isolate;container-type:inline-size;mask-image:none;-webkit-mask-image:none;background:none}
.facade-scene.scene::before,.facade-scene.scene::after{display:none;content:none}
.facade-scene.scene #facade{display:block;position:relative;inset:auto;width:100%;height:auto;margin:0;filter:none;opacity:1;user-select:none;pointer-events:none}
.facade-cell,.facade-door,.facade-dot{position:absolute;margin:0;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;text-decoration:none;outline:none}
.facade-cell{z-index:3;border-radius:6%;--glow-color:#ba8fff}
.facade-cell[data-tone=pink]{--glow-color:#f89bcf}
.facade-cell[data-tone=orange]{--glow-color:#ffab54}
.facade-cell[data-tone=gold]{--glow-color:#ffd38b}
.facade-cell[data-tone=red]{--glow-color:#ed685e}
.cell-face,.cell-recess{position:absolute;inset:0;pointer-events:none;transform-origin:50% 58%;border-radius:6%}
.cell-face{transition:transform 105ms cubic-bezier(.2,.7,.2,1)}
.cell-photo{display:block;position:absolute;inset:0;width:100%;height:100%;border-radius:6%;opacity:0;transition:opacity 220ms ease,filter 220ms ease;mask-image:linear-gradient(90deg,transparent,#000 4% 96%,transparent),linear-gradient(transparent,#000 4% 96%,transparent);mask-composite:intersect}
.cell-recess{opacity:0;background:#030507;box-shadow:inset 0 3px 6px #000d;transition:opacity 140ms ease;mask-image:radial-gradient(ellipse,#000 54%,transparent 76%)}
.cell-glow{position:absolute;max-width:none;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 330ms ease}
.facade-cell:is(:hover,:focus-visible,[aria-expanded=true]) .cell-glow{opacity:.92}
.facade-skull:is(:hover,:focus-visible,[aria-expanded=true]) .cell-glow{animation:glass-ignite .8s ease-out both}
.facade-cell:is(:hover,:focus-visible) .cell-photo{opacity:1;filter:brightness(1.035)}
.facade-cell[data-press-phase=held] .cell-recess{opacity:.82}
.facade-cell[data-press-phase=held] .cell-face{transform:translateY(1.6px) scale(.967)}
.facade-cell[data-press-phase=held] .cell-photo{opacity:1;filter:brightness(.9)}
.facade-cell[data-press-phase=release] .cell-face{transform:none;transition:transform 340ms cubic-bezier(.16,1.3,.35,1)}
.facade-cell[data-press-phase=release] .cell-photo{opacity:1}
.facade-cell[data-art-ready=fallback]:is(:hover,:focus-visible){box-shadow:inset 0 0 12px #ffdabb35,0 0 13px #ffc36c28}
.facade-cell:focus-visible,.facade-door:focus-visible{outline:1px solid #ddd1eb;outline-offset:4px}
.cell-label{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(3px);padding:7px 10px;border:1px solid #d2c2ab29;border-radius:6px;background:#0c0c10ed;color:#e8dfd2;font:11px/1.3 Arial,sans-serif;letter-spacing:.04em;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 160ms ease,transform 160ms ease}
.facade-cell:focus-visible .cell-label,.facade-door:focus-visible .cell-label{opacity:1;transform:translateX(-50%)}

/* The two original glass dot mounts remain independent, fixed hit targets. */
.facade-dot{z-index:5;width:max(2.4%,44px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}
.dot-face,.dot-socket{position:absolute;left:50%;top:50%;width:2.392344cqw;height:2.392344cqw;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.dot-face{transition:transform 90ms cubic-bezier(.2,.7,.2,1);mask-image:radial-gradient(circle,#000 53%,#000e 59%,transparent 72%)}
.dot-face canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.dot-champagne,.dot-dark{opacity:0}
.facade-dot[aria-pressed=true] .dot-champagne{opacity:1}
.facade-dot[aria-pressed=true] .dot-rest{opacity:0}
.facade-dot[aria-pressed=true] .dot-face{filter:drop-shadow(0 0 2px #fff1da90)}
.dot-socket{background:radial-gradient(circle,#07090be8 0%,#07090bbd 41%,transparent 69%);opacity:0;transition:opacity 110ms ease}
.facade-dot[data-press-phase=held] .dot-socket{opacity:1}
.facade-dot[data-press-phase=held] .dot-face{animation:none!important;transform:translate(-50%,calc(-50% + 1.8px)) scale(.82);filter:brightness(.92) drop-shadow(0 -1px 1px #000)}
.facade-dot[data-press-phase=release] .dot-face{animation:none!important;transform:translate(-50%,-50%) scale(1);transition:transform 360ms cubic-bezier(.16,1.45,.38,1)}
.facade-dot:focus-visible{outline:1px solid #fff6e699;outline-offset:2px}
.facade-dot:focus-visible .dot-face{filter:brightness(1.08)}
.dot-dark{z-index:2}
.facade-dot[data-spark=burst] .dot-dark{animation:dot-burnout 460ms linear both}
.facade-dot[data-spark=burst] .dot-face{animation:dot-sputter 460ms linear both}
.facade-dot[data-spark=off] .dot-dark{opacity:1}
.facade-dot[data-spark=off] .dot-face{filter:none}
.dot-sparks{position:absolute;left:50%;top:50%;width:.06cqw;height:.06cqw;border-radius:50%;background:#c0dded;opacity:0;z-index:3;box-shadow:.39cqw -.27cqw 1px #c6e6ff90,-.32cqw .23cqw 1px #b8dcff70,.18cqw .38cqw 1px #c6e6ff60;pointer-events:none}
.facade-dot[data-spark=burst] .dot-sparks{animation:dot-spark 300ms ease-out both}
.facade-dot[data-art-ready=fallback][aria-pressed=true] .dot-face{background:#fff1da;box-shadow:0 0 5px #fff1da;border:2px solid #fffaf0;width:1.25cqw;height:1.25cqw}
.facade-dot[data-art-ready=fallback][data-spark] .dot-face{background:#101316;box-shadow:none;filter:brightness(.15)}
@keyframes dot-burnout{0%,12%{opacity:0}28%{opacity:.74}42%{opacity:.56}72%,100%{opacity:1}}
@keyframes dot-sputter{0%{filter:brightness(1)}12%{filter:brightness(1.035)}28%,100%{filter:none}}
@keyframes dot-spark{0%{opacity:0;transform:scale(.85)}18%{opacity:.16}100%{opacity:0;transform:scale(1.5)}}
@keyframes glass-ignite{0%{opacity:.3}23%{opacity:.95}43%{opacity:.38}68%,100%{opacity:.92}}

/* Pale champagne-white o-tubes frame transparent centers; deep red crescents rest low. */
.facade-eye{position:absolute;z-index:4;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 300ms ease,visibility 300ms;isolation:isolate}
.cat-eyes-active .facade-eye{opacity:1;visibility:visible}
.eye-tubes{position:absolute;inset:0;width:100%;height:100%;mask-image:radial-gradient(ellipse,#000 56%,#000e 66%,transparent 75%)}
.eye-iris{position:absolute;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;background:transparent}
.eye-pupil{position:absolute;left:50%;top:70%;width:52%;aspect-ratio:1;background:transparent;transform:translate(calc(-50% + var(--gaze-x,0px)),calc(-50% + var(--gaze-y,0px)));transition:transform 100ms ease-out;will-change:transform}
.eye-pupil::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 68%,#ff203d70 0%,#d608283d 18%,#9b04151a 38%,transparent 65%);filter:blur(.055cqw);mix-blend-mode:screen}
.pupil-crescent{position:relative;display:block;width:100%;height:100%;opacity:.96;filter:drop-shadow(0 0 .09cqw #ff183cb0) drop-shadow(0 0 .24cqw #b0003060)}

/* The bottle and arch follow this photograph's small stained-glass window. */
.facade-door{z-index:4;border-radius:7%}
.door-illumination{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bottle-aura{opacity:.24;mix-blend-mode:screen;transition:opacity .4s ease}
.bottle-light{fill:#ffd489;fill-opacity:.1;stroke:#ffdf9f;stroke-width:.65;stroke-linejoin:round;stroke-linecap:round;opacity:.48;filter:drop-shadow(0 0 1.5px #ffb447);transition:opacity .4s ease,fill-opacity .4s ease,filter .4s ease}
.bottle-shine{fill:none;stroke:#fff1ce;stroke-width:.7;stroke-linecap:round;opacity:.15;transition:opacity .4s ease}
.door-window-outline{fill:none;stroke:#c9a2ef;stroke-width:.75;opacity:0;filter:drop-shadow(0 0 2px #a073ec);transition:opacity .4s ease}
.facade-door:is(:hover,:focus-visible,[aria-expanded=true]) .bottle-aura{opacity:.85}
.facade-door:is(:hover,:focus-visible,[aria-expanded=true]) .bottle-light{opacity:1;fill-opacity:.28;filter:drop-shadow(0 0 2px #ffd99f) drop-shadow(0 0 4px #e7a04f)}
.facade-door:is(:hover,:focus-visible,[aria-expanded=true]) .bottle-shine{opacity:.8}
.facade-door:is(:hover,:focus-visible,[aria-expanded=true]) .door-window-outline{opacity:.68}
.facade-door[data-press-phase=held] .door-illumination{filter:brightness(1.2)}

/* Keep live temperature wirework in the new photograph's three tube cells. */
.facade-weather .weather-nixie-display{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.95;filter:none;overflow:visible}
.facade-weather .nixie-digit .nixie-halo{stroke-width:13;stroke:#fc6807;opacity:.5;filter:blur(5px)}
.facade-weather .nixie-digit .nixie-glow{stroke-width:5;stroke:#ff872c;opacity:.9;filter:blur(1.1px)}
.facade-weather .nixie-digit .nixie-wire{stroke-width:2.8;stroke:#ffe0a3;opacity:1}
.facade-weather .nixie-electrode path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.facade-weather .weather-detail{left:auto;right:-6px;top:auto;bottom:calc(100% + 12px);width:230px;padding:10px 12px;border-radius:7px;border:1px solid #e5c09630;color:#e3d9cd;background:#0b0e12f5;font:12px/1.45 Arial,sans-serif;text-align:left;box-shadow:0 8px 22px #0006;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(3px);transition:opacity .18s ease;z-index:10}
.facade-weather:is(:hover,:focus-visible) .weather-detail{opacity:1;visibility:visible;transform:none}
.facade-utilities{position:absolute;bottom:max(13px,env(safe-area-inset-bottom));right:max(19px,env(safe-area-inset-right));display:flex;gap:17px;z-index:6}
.facade-utility{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:transparent;color:#c5bdb0a6;font:11px/1.3 Arial,sans-serif;letter-spacing:.07em;text-shadow:0 2px 6px #000;cursor:pointer;touch-action:manipulation;transition:color .2s ease}
.facade-utility:hover,.facade-utility:focus-visible{color:#fff1d3}
.facade-utility:focus-visible{outline:1px solid #d9c7aa;outline-offset:5px;border-radius:2px}
.facade-mobile-links{display:none}
@media(orientation:portrait){
  .facade-splash.splash{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:30px 0 max(24px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 40% 32%,#10100e,#05080b 66%)}
  .facade-scene.scene{position:relative;left:-13.14vw;top:auto;width:164vw;max-width:none;height:auto;flex:none;transform:none;margin:0 0 25px;mask-image:linear-gradient(#000 89%,transparent 100%)}
  .facade-mobile-links{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 22px;width:calc(100% - 40px);max-width:460px;margin:0 auto 12px}
  .facade-mobile-links a{display:flex;align-items:center;justify-content:center;min-height:44px;color:#d5c7b5;text-decoration:none;font:12px/1.4 Arial,sans-serif;letter-spacing:.045em;border-bottom:1px solid #a8967526}
  .facade-mobile-links a:focus-visible{outline:1px solid #edc78e;outline-offset:4px}
  .facade-utilities{position:relative;inset:auto;justify-content:center;gap:28px;min-height:44px}
  .facade-utility{font-size:11px}
  .facade-cell:focus-visible,.facade-door:focus-visible{outline-offset:2px}
  .facade-door::after{content:"";position:absolute;right:0;top:0;width:max(100%,44px);height:100%}
  .facade-weather .weather-detail{right:-2px;width:210px;font-size:11px}
  dialog.floating-panel{left:12px!important;top:max(12px,env(safe-area-inset-top))!important;width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px);max-width:calc(100vw - 24px)}
  .floating-panel>.panel-titlebar{cursor:default;touch-action:auto}
  .floating-panel>.panel-resize{display:none}
  .access-dialog .access-input{font-size:16px}
}
@media(max-height:500px) and (orientation:landscape){.facade-utilities{bottom:3px;right:12px;gap:14px}.facade-utility{font-size:10px}}
@media(prefers-reduced-motion:reduce){
  .facade-scene *,.facade-scene *::before,.facade-scene *::after{animation:none!important;transition:none!important}
  .facade-dot[data-press-phase] .dot-face{transform:translate(-50%,-50%)}
  .facade-cell[data-press-phase] .cell-face{transform:none}
  .facade-dot[data-spark] .dot-dark{opacity:1}
  .facade-dot[data-spark] .dot-face{filter:none}
  .dot-sparks{display:none}
  .facade-skull:is(:hover,:focus-visible,[aria-expanded=true]) .cell-glow{opacity:.92}
}

/* Fullscreen stage: preserve the complete composition on any aspect ratio.
   A dark, soft continuation of the same photograph fills the spare space. */
.facade-splash.splash{height:100vh;height:100dvh;min-height:0;padding:0;box-sizing:border-box;display:block}
.facade-splash.splash::before{content:"";position:absolute;inset:-24px;z-index:-1;background:url('./assets/facade-art/moonlit-dallas-cateye-copy-3840x2160.png') center/cover no-repeat;filter:blur(20px) brightness(.31);pointer-events:none}
.facade-scene.scene{position:absolute;left:50%;top:50%;width:min(100vw,177.777778vh);width:min(100vw,177.777778dvh);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);margin:0;max-width:none;mask-image:none;-webkit-mask-image:none}
.facade-dot[aria-pressed=true] .dot-face{filter:drop-shadow(0 0 .10cqw #fff4e3c9) drop-shadow(0 0 .32cqw #eedcc078)}
.eye-tubes{mask-image:none;-webkit-mask-image:none;filter:drop-shadow(0 0 .12cqw #fff4e3c0) drop-shadow(0 0 .40cqw #eedcc075)}
.facade-utilities{position:absolute;bottom:max(13px,env(safe-area-inset-bottom));right:max(19px,env(safe-area-inset-right))}
@media(orientation:portrait){
 .facade-splash.splash{display:flex;flex-direction:column;justify-content:center;gap:20px;padding:max(14px,env(safe-area-inset-top)) 0 max(14px,env(safe-area-inset-bottom));overflow-y:auto}
 .facade-scene.scene{position:relative;left:auto;top:auto;width:100%;transform:none;flex:none;margin:0}
 .facade-mobile-links{position:relative;z-index:6;margin:0 auto;flex:none}
 .facade-utilities{position:relative;inset:auto;justify-content:center;gap:24px;flex:none}
 .facade-splash.splash::before{background-position:38% center}
}