/* Shared composition coordinates keep the background, counter and patrons aligned. */
#wall .tavern-stage{position:absolute;left:50%;top:50%;width:max(100vw,177.6833vh);height:max(56.281vw,100vh);transform:translate(-50%,-50%)}
#wall .tavern-stage .scene-world{z-index:0;transform:none!important}
#wall .tavern-room{object-fit:fill;opacity:1;animation:none;transform:none}
#wall .guild-bar-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
#wall .guild-jordain-layer{position:absolute;left:0;top:23.7%;width:56%;height:99.5%;z-index:4;pointer-events:none;object-fit:contain}
#wall .tavern-actor{display:none}
#wall .guest-position{position:absolute;left:55.5%;top:20%;bottom:auto;width:44%;height:78.18%;max-width:none;max-height:none;z-index:4;mix-blend-mode:normal}
#wall .tavern-guest{width:100%;height:100%;transition:none;filter:none}
#wall .guest-sprite{animation:none;mix-blend-mode:normal;transform:scaleX(-1);transform-origin:50% 50%}
#wall .tavern-guest[data-variant="2"] .guest-sprite{transform:none}
#wall .tavern-guest img{left:33.5%;top:30%;width:32%;height:34%;mix-blend-mode:multiply;transform:rotate(-3deg) skewY(-2deg);filter:none}
#wall .tavern-guest[data-variant="1"] img{left:34%;top:28%;width:32%;height:34%;transform:rotate(2deg) skewY(2deg)}
#wall .tavern-guest[data-variant="2"] img{left:31.5%;top:28%;width:31%;height:34%;transform:rotate(2deg) skewY(1deg)}
#wall .scene-atmosphere{z-index:5;pointer-events:none}
#wall .tavern-title{position:absolute;left:9%;right:auto;top:4%;width:340px;max-width:42vw;height:112px;padding:12px 24px;display:flex;flex-direction:column;justify-content:center;text-align:center;z-index:6;background:#fffffff2}
#wall .tavern-title h2{font-size:40px;line-height:1.1}
#wall .tavern-title .eyebrow{font-size:9px;margin:0 0 6px;letter-spacing:.14em}
#wall .tavern-title>p:last-child{font:italic 16px/1.3 IMFellEnglish,Georgia,serif;margin:5px 0 0}
#wall .guild-guestbook{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-height) + 45px);z-index:7;text-align:center}
#wall .crest-study-link{display:inline-block;font:italic 14px IMFellEnglish,Georgia,serif;padding:7px 16px;background:#ffffffe6;border:1px solid #777;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
#wall .crest-study-link:hover{background:#fff}
@media(max-width:700px){
 #wall .tavern-stage{left:50%;width:177.6833vh;height:100vh}
 #wall .guild-jordain-layer{left:27%;top:42.5%;width:34%;height:60.41%}
 #wall .guest-position{left:44.5%;top:43%;width:27%;height:47.98%}
 #wall .tavern-title{left:50%;transform:translateX(-50%);top:5%;width:75%;max-width:none;height:92px;padding:10px 15px}
 #wall .tavern-title h2{font-size:32px}
 #wall .tavern-title>p:last-child{font-size:15px}
 #wall .guild-guestbook{bottom:calc(var(--dock-height) + 37px)}
}

/* The name belongs to the room: a suspended sign behind the patrons. */
#wall .guild-wall-sign{left:50%;top:1.5%;transform:translateX(-50%);width:35%;max-width:none;height:19%;padding:0;z-index:1;background:none;filter:drop-shadow(1px 4px 2px #0005);display:block}
#wall .guild-sign-art{position:absolute;inset:0;width:100%;height:100%}
#wall .guild-sign-lettering{position:absolute;inset:29% 5% 13%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#wall .guild-sign-lettering h2{font-size:clamp(24px,2.55vw,43px);line-height:1.05;margin:0;white-space:nowrap}
#wall .guild-sign-lettering p{font:italic clamp(11px,1.18vw,18px)/1.2 IMFellEnglish,Georgia,serif;margin:7px 0 0;text-align:center}
@media(max-width:700px){#wall .guild-wall-sign{width:27%;height:16%;top:3%}#wall .guild-sign-lettering h2{font-size:22px}#wall .guild-sign-lettering p{font-size:12px;max-width:230px;margin-top:5px}}

/* Rope suspension moves with the plaque; the attachments stay joined. */
#wall .guild-sign-art{overflow:visible}
#wall .guild-wall-sign{transform-origin:50% -45%;animation:guildSignSway 8.4s ease-in-out infinite;will-change:transform}
@keyframes guildSignSway{0%,100%{transform:translateX(-50%) rotate(-.4deg)}50%{transform:translateX(-50%) rotate(.4deg)}}
body.reduced-motion #wall .guild-wall-sign{animation:none;transform:translateX(-50%);will-change:auto}


/* Original client marks travel inside the face of the hanging plaque. */
#wall .guild-sign-lettering{inset:34% 6% 10%;justify-content:flex-start}
#wall .guild-sign-lettering p{margin-top:4px}
#wall .guild-logo-marquee{flex:none;width:94%;height:clamp(14px,1.6vw,21px);margin-top:clamp(10px,1vw,15px);overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
#wall .guild-logo-track{display:flex;width:max-content;height:100%;animation:guildLogoDrift 36s linear infinite;will-change:transform}
#wall .guild-logo-group{display:flex;align-items:center;flex:none;gap:clamp(18px,2vw,30px);padding-right:clamp(18px,2vw,30px);height:100%}
#wall .guild-logo{display:flex;align-items:center;justify-content:center;flex:none;width:clamp(58px,6vw,88px);height:100%}
#wall .guild-logo img{display:block;max-width:100%;width:auto;height:100%;object-fit:contain;filter:brightness(0)}
@keyframes guildLogoDrift{to{transform:translateX(-50%)}}
#wall[hidden] .guild-logo-track,body:has(dialog[open]) #wall .guild-logo-track{animation-play-state:paused}
body.reduced-motion #wall .guild-logo-track{animation:none;transform:none;will-change:auto}

@media(max-width:700px){#wall .guild-wall-sign{width:min(27%,calc(100vw - 40px));height:19%;min-height:148px}#wall .guild-sign-lettering{inset:35% 6% 10%}#wall .guild-sign-lettering p{margin-top:4px}#wall .guild-logo-marquee{margin-top:10px;height:16px}}

/* Full opaque room footage removes the need to key white clothing and prop gaps. */
#wall .guild-fullbar .guild-bar-layer{display:none}
#wall .guild-fullbar-poster,#wall .guild-fullbar-video{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
#wall .guild-fullbar-poster{z-index:1}
#wall .guild-fullbar-video{z-index:2;opacity:0}
#wall .guild-fullbar .guild-wall-sign{z-index:3}
#wall .guild-fullbar-reduced .guild-fullbar-video{visibility:hidden}

/* The visitor and crest are one memory; Jordain stays untouched. */
#wall .guild-memory-figure{position:absolute;inset:0;filter:url(#guild-memory-crt);opacity:.99;isolation:isolate}

/* Each visiting companion has a permanent crest and a distinct silhouette. */
#wall .tavern-guest[data-variant="3"] .guest-sprite{background-image:url('assets/guild-guests/made-cutout-v5.png');background-size:100% 100%;background-position:0 0;transform:none}
#wall .tavern-guest[data-variant="4"] .guest-sprite{background-image:url('assets/guild-guests/motorola-cutout-v5.png');background-size:100% 100%;background-position:0 0;transform:none}
#wall .tavern-guest[data-variant="5"] .guest-sprite{background-image:url('assets/guild-guests/milk-cutout-v5.png');background-size:100% 100%;background-position:0 0;transform:none}
#wall .tavern-guest[data-variant="6"] .guest-sprite{background-image:url('assets/guild-guests/hospital-cutout-v5.png');background-size:100% 100%;background-position:0 0;transform:none}
#wall .tavern-guest[data-variant="3"] img{left:36.5%;top:29%;width:26%;height:27%;transform:rotate(-1deg)}
#wall .tavern-guest[data-variant="4"] img{left:37.5%;top:32%;width:25%;height:25%;transform:rotate(1.5deg)}
#wall .tavern-guest[data-variant="5"] img{left:38%;top:32%;width:24%;height:25%;transform:rotate(-1.5deg)}
#wall .tavern-guest[data-variant="6"] img{left:35%;top:32%;width:24%;height:24%;transform:rotate(1deg)}

/* Treat the whole bar plate as a CRT memory, with solid coverage beneath. */
#wall .guild-fullbar-surface{position:absolute;inset:0;z-index:2;isolation:isolate;overflow:hidden;pointer-events:none}
#wall .guild-fullbar-surface.has-crt::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 2px,rgba(0,0,0,.12) 2px,rgba(0,0,0,.12) 3px,rgba(0,0,0,.25) 3px,rgba(0,0,0,.25) 4px),radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.1) 100%)}
#wall .guild-fullbar-surface.has-crt::before{content:"";position:absolute;left:0;right:0;top:-18%;height:16%;z-index:3;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.10),transparent);animation:guildBarScan 15s linear infinite;will-change:transform}
@keyframes guildBarScan{from{transform:translateY(0)}to{transform:translateY(850%)}}
#wall .guild-fullbar-surface.crt-paused::before{animation-play-state:paused}
#wall .guild-fullbar-reduced .guild-fullbar-surface::before{display:none}


/* Fit every line inside the sign on short desktop windows. */
html:not(.handheld-scene) #wall .guild-sign-lettering h2{font-size:clamp(20px,4vh,43px)}
html:not(.handheld-scene) #wall .guild-sign-lettering p{font-size:clamp(10px,1.7vh,18px)}
html:not(.handheld-scene) #wall .guild-logo-marquee{height:clamp(12px,2vh,21px);margin-top:clamp(4px,.65vh,10px)}

/* Original marks are baked into the hand-drawn cloth; never mirror the lettering. */
#wall .tavern-guest[data-baked-crest="true"] .guest-sprite{background-image:var(--baked-guest-art);background-size:100% 100%;background-position:center;transform:none}
#wall .tavern-guest[data-baked-crest="true"] #jacket-logo{display:none}

/* Remove the residual skin tint from the Netflix drawing. */
#wall .tavern-guest[data-guest-slug="netflix"] .guest-sprite{filter:grayscale(1)}

/* Bring Jordain closer to the table edge; hold his inner elbow horizontally. */
#wall .guild-jordain-layer{scale:1.10;transform-origin:77% 38%}