#faceoff { position:fixed; inset:0; z-index:100; overflow:hidden; color:#fff5df; background:#46403d url('assets/cartoon-arena-solid-floor.png') center/cover no-repeat; font-family:'Barlow Condensed',sans-serif; }
.faceoff-logo { position:absolute; width:clamp(90px,11vw,175px); height:14%; object-fit:contain; top:2%; left:50%; transform:translateX(-50%); }
#faceoff header { position:absolute; top:16%; width:100%; text-align:center; text-transform:uppercase; }
#faceoff h1 { font-size:clamp(16px,1.8vw,28px); margin:0; letter-spacing:2px; }
#faceoff header p { margin:6px 0; letter-spacing:4px; font-size:16px; }
.faceoff-player { position:absolute; top:24%; width:32%; height:67%; }
.faceoff-left { left:7%; }.faceoff-right { right:7%; }
#faceoff .hud-card { position:relative; z-index:4; width:var(--profile-width); height:var(--profile-height); margin:0 auto; display:flex; }
#faceoff .hud-name,#faceoff .hud-title { display:block; }
#faceoff .faceoff-right .hud-card { flex-direction:row-reverse; text-align:right; }
#faceoff .lobby-character { width:min(34vw,50vh,calc(67vh - var(--profile-height) - 24px)); right:auto; bottom:0; left:50%; transform:translateX(-50%); }
#faceoff .faceoff-right .lobby-character { transform:translateX(-50%) scaleX(-1); }
#faceoff .character-joint img,#faceoff .character-body { animation-play-state:running; }
.faceoff-status,.faceoff-other { position:relative; z-index:3; text-align:center; font-size:15px; margin:8px auto; }
#faceoff .faceoff-other { display:block; color:#fff5df; background:#25252c66; border:0; padding:5px 12px; font-family:inherit; cursor:pointer; }
.faceoff-vs { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) skew(-10deg); font-size:clamp(52px,7vw,110px); font-weight:900; font-style:italic; text-shadow:0 3px 10px #0003; }
.faceoff-actions { position:absolute; top:62%; left:50%; transform:translateX(-50%); width:19%; text-align:center; }
.faceoff-timer { font-size:clamp(24px,3.7vw,58px); line-height:1.2; margin-bottom:14px; }.faceoff-timer span { font-size:.65em; }
#faceoff .faceoff-ready { width:100%; background:#fff5df; color:#151922; border:0; border-radius:2px; box-shadow:none; padding:12px; font-family:inherit; font-size:clamp(20px,2.5vw,38px); font-weight:700; text-transform:uppercase; cursor:pointer; }
#faceoff .faceoff-ready:hover:not(:disabled) { background:#e52b3f; color:white; }
#faceoff button:focus-visible { outline:2px solid #fff5df; outline-offset:4px; }
.faceoff-actions p { text-transform:uppercase; letter-spacing:2px; font-size:clamp(10px,1vw,16px); }
@media(max-aspect-ratio:1/1){.faceoff-player{width:38%;top:25%;height:52%}.faceoff-left{left:3%}.faceoff-right{right:3%}#faceoff .lobby-character{width:min(36vw,calc(52vh - var(--profile-height) - 24px))}.faceoff-actions{top:76%;width:40%}.faceoff-vs{top:52%;font-size:42px}.faceoff-other{font-size:12px}.faceoff-logo{height:12%}#faceoff header{top:16%}}
#faceoff header { display:block; padding:0; margin:0; }


@media(max-aspect-ratio:4/3){.faceoff-player{width:36%;height:53%}.faceoff-left{left:5%}.faceoff-right{right:5%}#faceoff .lobby-character{width:min(34vw,calc(53vh - var(--profile-height) - 24px))}.faceoff-actions{top:78%;width:30%}.faceoff-vs{top:52%}}

#faceoff .faceoff-other[hidden] { display:none; }
#faceoff .faceoff-count { margin:8px 0 0; font-size:18px; letter-spacing:2px; }


.start-countdown { position:fixed; inset:0; z-index:110; display:grid; place-items:center; pointer-events:auto; color:#fff5df; font-family:'Barlow Condensed',sans-serif; font-size:clamp(100px,14vw,210px); font-weight:900; font-style:italic; text-shadow:0 3px 10px #0006; }
.start-countdown span { transform:skew(-10deg); animation:countdown-pop 1s ease-out both; }
@keyframes countdown-pop { from { opacity:0; transform:skew(-10deg) scale(1.2); } 15%,75% { opacity:1; transform:skew(-10deg) scale(1); } to { opacity:0; transform:skew(-10deg) scale(.95); } }
.reduce-motion .start-countdown span { animation:none; }
@media(prefers-reduced-motion:reduce){.start-countdown span{animation:none;}}

/* Centre the actual glyphs; responsive layouts must not shift VS downward. */
#faceoff .faceoff-vs { top:50%; line-height:1; transform:translate(calc(-50% + var(--ink-x,0px)),calc(-50% + var(--ink-y,0px))); }
.start-countdown span { display:block; line-height:1; transform:translate(var(--ink-x,0px),var(--ink-y,0px)); }
@keyframes countdown-pop { from { opacity:0; transform:translate(var(--ink-x,0px),var(--ink-y,0px)) scale(1.12); } 15%,75% { opacity:1; transform:translate(var(--ink-x,0px),var(--ink-y,0px)) scale(1); } to { opacity:0; transform:translate(var(--ink-x,0px),var(--ink-y,0px)) scale(.97); } }