/* The challenge is the first action; the live dungeon ledger closes the lobby. */
#intro.active{justify-content:flex-start}
#intro .intro-copy{display:flex;flex-direction:column;align-items:center;flex:1;min-height:0}
#intro .intro-copy .actions{display:flex;flex-direction:column;align-items:center;gap:5px;margin:clamp(8px,1.1svh,13px) auto 0}
#intro .intro-hall-link{box-sizing:border-box;min-width:min(92vw,300px);min-height:43px;margin:0!important}
#intro .intro-hall{position:relative;z-index:10;margin:clamp(10px,2svh,25px) auto 0;margin-top:auto}
#intro .intro-copy>.fine{margin:clamp(4px,.8svh,9px) auto clamp(8px,1.3svh,15px)}
@media(max-width:700px){#intro .intro-copy .actions{margin-top:5px;gap:2px}#intro .intro-hall-link{min-width:min(90vw,300px);min-height:42px;font-size:13px}#intro .intro-hall{margin-top:auto;padding:6px 9px}#intro .intro-copy>.fine{margin:3px auto 7px}}
@media(max-width:420px) and (max-height:750px){#intro .intro-hall-link{min-height:36px}#intro .intro-hall{padding:5px 8px}}

/* Move the original head sprite and its flame sprites around the same pivot. */
.host .skull-head>img{animation:none!important}
.host .skull-head,.host .eye{animation:reaperIdleFace 7.5s ease-in-out infinite}
.host.mood-question .skull-head,.host.mood-question .eye{animation:reaperQuestions 1.4s ease-in-out infinite}
.host.mood-laugh .skull-head,.host.mood-laugh .eye{animation:reaperLaughs .38s ease-in-out infinite alternate}
.host.mood-snarl .skull-head,.host.mood-snarl .eye{animation:reaperSnarls .24s ease-in-out 4 alternate}
.host.mood-taunt .skull-head,.host.mood-taunt .eye{animation:reaperTaunts 1.2s ease-in-out 2}
.host .skull-head{transform-origin:50% 43%}
/* These pivots point back to the skull's centre, so both flames remain in the sockets. */
.avatar .eye.left{left:18.3%;top:28.8%;width:19.5%;height:19.8%;transform-origin:163% 72%;overflow:visible;clip-path:none}
.avatar .eye.right{left:63%;top:28.5%;width:19.5%;height:20%;transform-origin:-67% 72%;overflow:visible;clip-path:none}
.avatar .eye-motion{transform-origin:50% 76%;animation:reaperFlameGaze 2.6s ease-in-out infinite alternate;will-change:transform}
.avatar .eye.right .eye-motion{animation-delay:-1.1s}
.host.mood-question .eye-motion{animation:reaperFlameSurprise .55s ease-in-out infinite alternate}
.host.mood-snarl .eye-motion{animation:reaperFlameAnger .19s ease-in-out 5 alternate}
.host.mood-taunt .eye-motion{animation:reaperFlameAwkward 1.2s ease-in-out 2}
.avatar .eye .fire-layer{transform-origin:50% 92%;object-fit:contain}
@keyframes reaperFlameGaze{from{transform:translate(calc(var(--eye-x,0px) - 2px),calc(var(--eye-y,0px) + 1px)) scale(.86) rotate(-4deg)}to{transform:translate(calc(var(--eye-x,0px) + 2px),calc(var(--eye-y,0px) - 2px)) scale(.94) rotate(4deg)}}
@keyframes reaperFlameSurprise{from{transform:translate(var(--eye-x,0px),calc(var(--eye-y,0px) + 2px)) scale(.72,.83)}to{transform:translate(var(--eye-x,0px),calc(var(--eye-y,0px) - 3px)) scale(.9,1.04)}}
@keyframes reaperFlameAnger{from{transform:translate(calc(var(--eye-x,0px) - 2px),var(--eye-y,0px)) scale(.88,.76) rotate(-5deg)}to{transform:translate(calc(var(--eye-x,0px) + 2px),var(--eye-y,0px)) scale(.88,.83) rotate(5deg)}}
@keyframes reaperFlameAwkward{0%,100%{transform:translate(var(--eye-x,0px),var(--eye-y,0px)) scale(.84)}50%{transform:translate(calc(var(--eye-x,0px) + 3px),calc(var(--eye-y,0px) + 4px)) scale(.71,.78) rotate(7deg)}}
/* The first rush starts shut, then the jaw drops and laughs near the viewer. */
.scare-blackout .scare-tier-1 .skull-jaw{transform-origin:50% 3%;animation:reaperFirstScareJaw 1.75s linear both!important}
@keyframes reaperFirstScareJaw{0%,18%{transform:translateY(-11%) scaleY(.88) rotate(0);animation-timing-function:cubic-bezier(.72,0,.94,.32)}42%{transform:translateY(31%) scaleY(1.12) rotate(-3deg);animation-timing-function:ease-in-out}54%{transform:translateY(20%) scaleY(1.04) rotate(2deg);animation-timing-function:ease-in-out}65%{transform:translateY(34%) scaleY(1.12) rotate(-2deg);animation-timing-function:ease-in-out}78%{transform:translateY(24%) scaleY(1.05) rotate(2deg);animation-timing-function:ease-in-out}100%{transform:translateY(29%) scaleY(1.08)}}
.scare-blackout .scare-tier-2 .eye-motion,.scare-blackout .scare-tier-3 .eye-motion{animation:reaperFlameGaze .36s ease-in-out infinite alternate!important}
@media(prefers-reduced-motion:reduce){.host .skull-head,.host .eye,.avatar .eye-motion,.scare-blackout .scare-tier-1 .skull-jaw{animation:none!important}}

/* Keep all visible hosts touchable; first-tier scare clones keep their unlit eyes. */
.host .avatar{pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.host .avatar.angry .eye:not(.wink){opacity:1}
.host .avatar .eye.wink{opacity:0!important}
.scare-active #hallAvatar{visibility:hidden!important}