@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/fonts/dm-sans-500-normal.woff') format('woff')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url('./assets/fonts/dm-sans-600-normal.woff') format('woff')}
/* Customer chatter lives in the margins, below the compact vital strip. */
.client-chatter{position:absolute;inset:105px 0 140px;pointer-events:none;overflow:hidden}
.client-quote{font-family:'DM Sans',Arial,sans-serif;position:absolute;width:clamp(100px,25vw,218px);padding:12px 12px 11px;color:#f4ebdb;text-shadow:0 2px 9px #000,0 1px 3px #000;opacity:.86;will-change:transform;animation:client-drift 8s ease-in-out infinite alternate}
.client-quote>span{display:block;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:1px;color:#ffb184;margin-bottom:9px}
.client-quote>p{font-size:clamp(14px,1.5vw,19px);font-weight:500;line-height:1.34;margin:0;overflow-wrap:break-word}
.client-quote>p:before{content:'“';color:#ffaf84}
.client-quote>p:after{content:'”';color:#ffaf84}
.quote-left{left:max(12px,env(safe-area-inset-left));top:13%;border-left:2px solid #ff985f70;background:linear-gradient(100deg,#142015b8,#13201626);transform:rotate(-3deg)}
.quote-right{right:max(12px,env(safe-area-inset-right));top:43%;border-right:2px solid #c8b7f477;background:linear-gradient(260deg,#142015b8,#13201626);text-align:right;animation-delay:-3.5s;transform:rotate(3deg)}
.quote-right>span{color:#decbff}
.quote-right>p:before,.quote-right>p:after{color:#decbff}
.quote-left.client-warning,.quote-left.client-moving{opacity:1;border-left-color:#ffbd76;background:linear-gradient(100deg,#452711ed,#231c1338);animation:none}
.quote-left.client-warning>span,.quote-left.client-moving>span{color:#ffd69b}
#game-shell:not([data-phase=playing]) .client-chatter,[data-scaring=true] .client-chatter{visibility:hidden}
.jumpscare{position:absolute;inset:0;z-index:18;pointer-events:none;background:#070303;overflow:hidden}
.scare-face{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;animation:scare-lunge 1.1s ease-out both}
.scare-copy{position:absolute;z-index:1;left:20px;right:20px;bottom:calc(4% + env(safe-area-inset-bottom));text-align:center;color:#fff1d9;text-shadow:0 3px 2px #230700,0 0 30px #000,0 4px 40px #000;transform:rotate(-3deg)}
.scare-copy>span{display:block;font:600 clamp(20px,3.8vw,42px)/1.2 'DM Sans',Arial,sans-serif;letter-spacing:.08em}
.scare-copy>strong{display:block;font:600 clamp(50px,12vw,152px)/1.12 'DM Sans',Arial,sans-serif;letter-spacing:-.045em;color:#ffb187}
@keyframes client-drift{from{translate:0 -4px}to{translate:0 9px}}
@keyframes scare-lunge{0%{transform:scale(.8);filter:brightness(1.65)}9%{transform:scale(1.13) rotate(-1.6deg);filter:brightness(1.12)}22%{transform:scale(1.05) rotate(.7deg)}100%{transform:scale(1.09);filter:brightness(1.05)}}
@media(min-width:850px){.client-chatter{top:70px}.quote-left{top:24%;left:28px}.quote-right{right:28px;top:40%}}
@media(max-width:650px){
 .client-quote{width:clamp(100px,28vw,168px);padding:10px 7px}
 .client-quote>span{font-size:12px;letter-spacing:.4px;margin-bottom:7px}
 .client-quote>p{font-size:14px;line-height:1.32}
 .quote-left{top:17%;left:max(8px,env(safe-area-inset-left))}
 .quote-right{top:43%;right:max(8px,env(safe-area-inset-right))}
}
@media(max-height:500px){.client-chatter{top:62px;bottom:100px}.quote-left{top:5%}.quote-right{top:10%}.client-quote{max-width:190px}.client-quote>p{font-size:14px}.scare-copy{bottom:3%}.scare-copy>strong{font-size:54px}}
@media(prefers-reduced-motion:reduce){.client-quote,.scare-face{animation:none;will-change:auto}}