/* Original dark arcade visuals, with retained interface motion and phone layouts. */
.join-card{animation:card-enter .45s ease-out}.pixel-ship{animation:ship-float 2.4s ease-in-out infinite}.join-card button{position:relative;overflow:hidden;transition:transform .15s}.join-card button:active{transform:translateY(2px)}.join-card button::after{content:'';position:absolute;inset:-100% auto -100% -40%;width:25%;background:#ffffff26;transform:rotate(22deg);animation:button-glint 5s ease-in-out infinite}.live-link::before{content:'';height:7px;width:7px;background:#70ecd2;border-radius:50%;animation:beacon 2s ease-out infinite}
.game-overlay.finished strong::before{content:'★';display:block;font-size:30px;color:var(--amber);margin-bottom:8px;animation:medal-pop .65s cubic-bezier(.16,1.5,.4,1) both}.game-overlay.finished{animation:card-enter .35s ease-out}.leader-first{background:#f9c66d17;border-radius:8px}
.play-shell{height:100dvh;min-height:0;padding:8px 12px;gap:6px}.play-shell .game-wrap{width:min(100%,calc((100dvh - 175px) * 9 / 16));height:auto;aspect-ratio:9/16;flex:none}.play-shell .error:empty{display:none}.play-shell #rejoin{margin:0;min-height:34px;padding:6px 12px;font-size:13px}
.broadcast-shell{container-type:inline-size;width:min(100vw,56.25svh);height:min(100svh,177.7778vw);max-width:none;min-height:0;padding:0;margin:0 auto}.broadcast-brand{display:none}.broadcast-stage{width:100%;height:100%;display:flex;flex-direction:column;gap:2cqw;padding:3cqw}.broadcast-board{order:0;border:1px solid var(--line);border-radius:2cqw;padding:1.5cqw 2cqw;background:var(--panel)}.broadcast-board>.eyebrow,.broadcast-board footer,.broadcast-game-label{display:none}.broadcast-board h2{font-size:3cqw;letter-spacing:.15cqw;margin:0 0 1cqw}.broadcast-shell .leaderboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1cqw}.broadcast-shell .leaderboard li{padding:1cqw;gap:.8cqw;font-size:3cqw;line-height:1.2;border:0;border-radius:1cqw;background:#1d2c40;min-width:0}.broadcast-shell .leaderboard .leader-first{background:#f9c66d24}.broadcast-shell .rank{display:none}.broadcast-shell .player-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.broadcast-shell .points{font-size:3.5cqw}.broadcast-shell .empty{grid-column:1/-1}.broadcast-game{order:1;display:flex;flex-direction:column;align-items:center;gap:2cqw;min-height:0}.broadcast-player{width:100%;height:10cqw;flex:none;padding:0 3cqw;margin:0;align-items:center}.broadcast-player>div:first-child{min-width:0}.broadcast-player .eyebrow{font-size:2.4cqw;letter-spacing:.2cqw}.broadcast-player h1{font-size:4.8cqw;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.broadcast-score strong{font-size:6cqw;margin:0}.broadcast-shell .game-wrap{height:138.7cqw;width:78cqw;flex:none;aspect-ratio:9/16;border-radius:2cqw}.broadcast-shell .game-overlay strong{font-size:4.5cqw}.broadcast-shell .game-overlay span{font-size:3.2cqw}.broadcast-shell .game-overlay{padding:3cqw}
@media(max-width:760px){.topbar{padding:10px 16px}.join-intro{display:none}.join-layout{min-height:0;padding:16px}.join-card{padding:20px}.join-card h2{font-size:26px}.join-card .muted{margin-bottom:14px}.join-card label{margin:14px 0 7px}.join-card .full{margin-top:14px}.join-card .fineprint{margin:14px 0 0;font-size:12px}.join-card .error:empty{display:none}.join-card input{min-height:46px;padding:10px 12px}}
@media(max-height:650px){.join-layout{padding:10px 16px}.join-card{padding:16px}.join-card h2{margin:10px 0 6px;font-size:23px}.join-card .muted{font-size:13px;line-height:1.4;margin-bottom:8px}.join-card label{margin-top:10px}.join-card .fineprint{display:none}.join-card input.code{font-size:26px}.join-card .full{min-height:42px;padding:9px 12px}}
@keyframes card-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes ship-float{50%{transform:translateY(-8px) rotate(-3deg)}}@keyframes button-glint{0%,70%{left:-40%}100%{left:140%}}@keyframes beacon{50%{box-shadow:0 0 0 5px #70ecd220}}@keyframes medal-pop{from{opacity:0;transform:scale(.35) rotate(-25deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* A visible flight loop inside the form, including on narrow phones. */
.flight-animation{height:34px;width:100%;position:relative;overflow:hidden;border-radius:8px;background:linear-gradient(90deg,#102436,#18394a,#102436);margin-bottom:12px}
.flight-animation img{position:absolute;width:30px;height:30px;left:45%;top:2px;animation:lobby-flight 2s ease-in-out infinite;z-index:1}
.flight-animation i{position:absolute;left:100%;top:8px;width:3px;height:3px;background:#70ecd2;border-radius:50%;animation:star-pass 2.2s linear infinite}
.flight-animation i:nth-child(2){top:24px;animation-delay:-.8s;background:#f9c66d}.flight-animation i:nth-child(3){top:16px;animation-delay:-1.5s}
.flight-animation span{position:absolute;left:35%;top:16px;width:24px;height:2px;background:linear-gradient(90deg,transparent,#f9c66d);animation:trail-breathe .6s ease-in-out infinite alternate}
@keyframes lobby-flight{0%,100%{transform:translate(-5px,3px) rotate(4deg)}50%{transform:translate(7px,-3px) rotate(-5deg)}}@keyframes star-pass{to{transform:translateX(-420px)}}@keyframes trail-breathe{from{opacity:.3;transform:scaleX(.6)}to{opacity:1;transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.flight-animation *{animation:none!important}}
.remove-score,#clear-scores{min-height:34px;padding:6px 9px;font-size:12px}.demo-active::after{content:'DEMO · WAITING FOR NEXT PLAYER';position:absolute;left:8%;right:8%;bottom:12%;padding:8px 5px;text-align:center;font-size:clamp(9px,2.5cqw,16px);font-weight:800;letter-spacing:.5px;background:#101d30dd;color:#70ecd2;border:1px solid #70ecd255;border-radius:8px;pointer-events:none}
.sound-toggle{position:absolute;right:6px;top:6px;z-index:3;min-height:28px;padding:5px 8px;font-size:11px;background:#102037df;color:#fff;border:1px solid #ffffff55;border-radius:7px}.game-wrap canvas{image-rendering:auto}

/* Artwork decorates the existing compact HUD; no additional mobile layout space. */
.play-info,.broadcast-player{background:#092b2e url('/art/algeria-v2/plaque.webp') center/100% 100% no-repeat;border-radius:8px;color:#fff2cf;padding:8px 20px}
.play-info .points,.broadcast-score strong{color:#ffdc8e}
.game-wrap[aria-busy=true] canvas{visibility:hidden}
.play-info,.broadcast-player{background:#092b2e;border:4px solid transparent;border-image:url('/art/algeria-v2/plaque.webp') 180 340 fill / 4px 16px / 0 stretch;padding:3px 16px}
.broadcast-player{height:11.5cqw}
/* Keep the same join form usable when a phone is held sideways. */
@media (max-height:450px) and (orientation:landscape){
 .join-intro,.join-card>.muted,.join-card .fineprint,.flight-animation{display:none}
 .topbar{padding:4px 12px}.topbar .brand{font-size:16px}.topbar .brand img{width:28px;height:28px}
 .join-layout{display:block;min-height:0;max-width:640px;padding:6px 12px;margin:0 auto}
 .join-card{padding:10px 16px}.join-card h2{font-size:20px;margin:0 0 6px}
 #join{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
 #join label{margin:0;font-size:12px}#join label[for=code]{grid-column:1;grid-row:1}#join label[for=name]{grid-column:2;grid-row:1}
 #join #code{grid-column:1;grid-row:2}#join #name{grid-column:2;grid-row:2}
 #join input,#join input.code{min-height:36px;padding:5px 9px;font-size:18px}
 #join button,#join .error{grid-column:1/-1}.join-card .full{min-height:34px;padding:6px;margin-top:5px}
}