:root{
 --ink:#f8f0d9;--panel:#093b34;--muted:#c7d7ce;--mint:#77dfb2;--amber:#e2c276;--line:#d6bc795c;
 color:var(--ink);background:#052a27;color-scheme:dark;
 font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{min-height:100svh;background:#052a27;color:var(--ink)}
body.home-body{position:relative;isolation:isolate;background:#072e29}
body.home-body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,#05292377 0%,#07322c99 55%,#041f1ee8 100%),url('/art/algeria-v2/site-backdrop.webp') 53% center/cover no-repeat}
body.home-body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;background-image:radial-gradient(circle at 1px 1px,#edcf8459 1px,transparent 1.8px);background-size:18px 18px;mask-image:linear-gradient(90deg,#000 0,transparent 28%,transparent 78%,#000)}
.topbar{max-width:1280px;padding:16px clamp(16px,4vw,36px);border-color:#d3b97940}
.brand{color:#fff4d9;font-size:13px;letter-spacing:1.7px}.brand img{width:38px;height:38px;filter:drop-shadow(0 2px 7px #0007)}
.topbar nav{gap:12px}.topbar nav a{color:#e5d9b9}
.join-layout{max-width:1140px;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:clamp(30px,8vw,96px);min-height:calc(100svh - 70px);padding:30px clamp(20px,5vw,50px)}
.join-intro{padding:10px 0 30px}.join-intro .eyebrow,.eyebrow{color:#94e5bd}
.join-intro h1{max-width:560px;margin:18px 0;color:#fff4d9;font-size:clamp(48px,6.2vw,76px);letter-spacing:-3.6px;text-wrap:balance}
.join-intro h1 span{color:#e7cb83}.join-intro p{max-width:370px;color:#e0e5d3;line-height:1.6}
.pixel-scene{border-color:#d7bd7a82;background-image:radial-gradient(circle at 10% 28%,#e9d094 1px,transparent 2px),radial-gradient(circle at 60% 12%,#8ce4bb 1px,transparent 2px),radial-gradient(circle at 40% 68%,#f2e1b7 1px,transparent 2px)}
.pixel-ship{background:#e5c47a;box-shadow:12px -12px 0 -2px #e5c47a,22px 0 0 -4px #7fddaf,-16px 4px 0 -6px #d76555}
.pixel-tower{background:#104239;border-top-color:#d5b873;box-shadow:8px 0 #0c332d}
.card{background:#073a33ed;border:1px solid #d2b76d7a;border-radius:22px;box-shadow:0 24px 72px #00130fb0,inset 0 1px #fff1d20c;backdrop-filter:blur(18px)}
.join-card{position:relative;overflow:hidden;border-top:1px solid #e2c77a;animation:card-enter .55s cubic-bezier(.2,.8,.2,1) both}
.join-card::before{content:"";position:absolute;pointer-events:none;right:-37px;top:-40px;width:144px;height:144px;opacity:.13;background:repeating-conic-gradient(from 45deg,#e6c975 0 5deg,transparent 5deg 45deg);mask-image:radial-gradient(circle,#000 8%,transparent 71%)}
.flight-animation{height:42px;margin:0 0 20px;border:1px solid #e0c47a57;background:linear-gradient(100deg,#052923d9,#10463be8 50%,#082d29d9),url('/art/algeria-v2/site-backdrop.webp') center 54%/cover;border-radius:10px}
.flight-animation img{width:34px;height:34px;top:3px;filter:drop-shadow(0 3px 4px #00130fcc)}
.flight-animation i{background:#e8ce83;box-shadow:0 0 7px #ffe2a5aa}.flight-animation i:nth-child(2){background:#ecf0d8}.flight-animation span{background:linear-gradient(90deg,transparent,#9be3b1)}
.join-card h2{position:relative;margin:0 0 22px;font-size:28px;color:#fff2d3}.join-card label{margin:19px 0 8px;color:#f2e8cc;font-size:13px;letter-spacing:.15px}
input{min-height:54px;border:1px solid #d5c38f61;border-radius:11px;background:#032c28d9;color:#fff6df;transition:border-color .2s,box-shadow .2s}
input:focus{border-color:#a3e3bb;box-shadow:0 0 0 3px #77dfb226;outline:0}
input::placeholder{color:#bfccbd99}input.code{font-size:29px;color:#f0d483;letter-spacing:.22em}
button,.button{min-height:50px;border-radius:11px;background:linear-gradient(110deg,#d0b36a,#edda9c 52%,#d6b871);color:#163a2d;box-shadow:0 4px 12px #021d1660;transition:transform .16s,filter .16s}
button:hover,.button:hover{filter:brightness(1.07);transform:translateY(-1px)}
button.secondary,.button.secondary{color:#f4e8c9;background:#0b473b;border:1px solid #d5bd7c99;box-shadow:none}
button.danger{background:#622f31;color:#ffe7d0;border:1px solid #da8d7270}
.join-card .full{margin-top:15px}.join-card form .full{min-height:54px;font-size:16px}.join-card .error{margin:9px 0 0;color:#ffc0ad;line-height:1.3}.live-link{margin-top:13px!important;background:#0b473b!important;color:#fff0d1!important;border-color:#cfb66f8a!important}
.live-link::before{background:#dc4f43;box-shadow:0 0 0 4px #dc4f432b;animation:beacon 2s ease-out infinite}
.dashboard{max-width:1280px}.dashboard-grid{grid-template-columns:minmax(0,1fr) minmax(310px,380px)}
.login{max-width:440px;margin:clamp(24px,8vh,72px) auto;padding:clamp(22px,5vw,34px)}
.code-display{background:#062f2b;border-color:#d3b97985}.pill{background:#0e473d;border-color:#d1b77758;color:#efe4c9}
.leaderboard li{border-color:#d1b77732}.game-overlay{background:#06231fcc;backdrop-filter:blur(2px)}
.play-info,.broadcast-player{color:#fff1cd}
.play-body{background:#052722;overscroll-behavior:none}
.play-shell{height:100svh;height:100dvh;min-height:0;width:min(100%,440px);padding:env(safe-area-inset-top,0px) 12px env(safe-area-inset-bottom,0px);gap:7px;overflow:hidden}
.play-info{flex:0 0 43px;min-height:43px;border-color:#dfc17799;background-color:#084035;padding:3px 15px}
.play-info>strong{max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff0d1}
.play-shell .game-wrap{width:min(100%,calc((100dvh - 135px)*9/16));height:auto;aspect-ratio:9/16;flex:0 0 auto;min-height:0;max-height:calc(100dvh - 135px);align-self:center;border:1px solid #d6be79a3;border-radius:14px;box-shadow:0 8px 28px #00110e66}
.play-shell canvas{width:100%;height:100%;max-height:none}
.play-shell #rejoin{flex:0 0 54px;width:100%;min-height:54px;margin:0;padding:9px 12px;font-size:16px}
.play-shell .play-footer{flex:0 0 auto;min-height:18px;line-height:18px;font-size:12px;color:#c2d6c5}
.play-shell .error{flex:0 0 auto;font-size:12px;line-height:1.15;margin:0}.play-shell .error:empty{display:none}
.broadcast-body{background:#05231f;overscroll-behavior:none}.broadcast-board{border-color:#cfb56a88;background:#063c34eb}.broadcast-shell .leaderboard li{background:#10483b;color:#f7ebcb}
.broadcast-shell .leaderboard .leader-first{background:#b8943b44}.broadcast-player{border-image:url('/art/algeria-v2/plaque.webp') 180 340 fill/4px 16px/0 stretch}
.admin-body,.login-body{background:radial-gradient(ellipse at 50% 0,#125042,#061f1d 68%);color:var(--ink)}
.admin-body .topbar,.login-body .topbar{border-color:#cbb47455}.admin-body .card,.login-body .card{background:#07392ff2;border-color:#d1b87569}
.admin-body .dashboard{padding-top:26px}.admin-body .card-head{margin-bottom:18px}.admin-body .table-wrap{border-color:#d1b8753d}
.admin-body th{color:#c5d8c5}.admin-body td{border-color:#d4bd7938}.admin-body .metric{border-color:#d4bd7980}
.admin-body input,.login-body input{background:#042d28;border-color:#cbb67666}.admin-body .code-display{border-color:#cbb67691}
@media(max-width:760px){
 .topbar{padding:9px 15px;min-height:56px}.brand{font-size:11px;letter-spacing:1.35px}.brand img{width:36px;height:36px}
 .join-layout{display:grid;grid-template-columns:1fr;min-height:calc(100svh - 56px);align-content:center;padding:14px 16px}
 .join-intro{display:none}.join-card{width:min(100%,460px);margin:auto;padding:22px 21px;border-radius:19px}
 .join-card h2{margin:0 0 17px;font-size:25px}.join-card label{margin:15px 0 7px}.join-card .full{margin-top:13px}
 .join-card input{min-height:49px;padding:10px 12px}.join-card input.code{font-size:27px}
 .join-card .error:empty{display:none}.dashboard{padding:20px 14px}.dashboard-grid{grid-template-columns:1fr}.admin-body .topbar nav{gap:8px}
}
@media(max-height:650px) and (orientation:portrait){.join-layout{padding-block:8px}.join-card{padding:17px 20px}.flight-animation{height:34px;margin-bottom:12px}.join-card h2{margin-bottom:11px;font-size:23px}.join-card label{margin:11px 0 6px}.join-card input{min-height:43px}.join-card .full{min-height:45px;margin-top:10px}.live-link{min-height:43px;margin-top:9px!important}}
@media(max-height:450px) and (orientation:landscape){
 .topbar{min-height:40px;padding:3px 12px}.topbar .brand img{width:30px;height:30px}
 .join-layout{min-height:calc(100svh - 40px);max-width:780px;padding:4px 12px;gap:12px}.join-card{padding:9px 14px}.flight-animation,.join-card>h2{display:none}
 .join-card label{margin:2px 0 3px;font-size:11px}.join-card input{min-height:32px;padding:4px 8px}.join-card input.code{font-size:17px}.join-card .full{min-height:31px;margin-top:4px;padding:4px;font-size:12px}
 .play-shell{padding-top:max(3px,env(safe-area-inset-top,0px));padding-bottom:max(3px,env(safe-area-inset-bottom,0px));gap:3px}
 .play-info{flex-basis:34px;min-height:34px}.play-shell .game-wrap{width:min(calc(100% - 4px),calc((100dvh - 120px)*9/16));max-height:calc(100dvh - 120px)}
 .play-shell #rejoin{flex-basis:54px;min-height:54px;padding:5px;font-size:14px}.play-shell .play-footer{min-height:14px;line-height:14px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.join-card,.live-link::before{animation:none!important}}
.game-wrap,.game-wrap *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.game-wrap{touch-action:none}
.play-shell .game-wrap{width:min(100%,calc((100dvh - 105px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))*9/16));max-height:calc(100dvh - 105px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.tap-cue{position:absolute;left:50%;top:67%;width:64px;height:70px;transform:translateX(-50%);z-index:4;pointer-events:none;display:block;filter:drop-shadow(0 2px 3px #062922)}
.tap-hand{position:absolute;left:18px;top:13px;font-size:44px;line-height:1;color:#fff4d4;animation:tap-gesture 1.3s ease-in-out infinite}
.tap-ring{position:absolute;left:18px;top:4px;width:28px;height:28px;border:3px solid #fff4d4;border-radius:50%;animation:tap-ripple 1.3s ease-out infinite}
@keyframes tap-gesture{0%,100%{transform:translateY(8px)}35%,55%{transform:translateY(0)}}
@keyframes tap-ripple{0%{transform:scale(.65);opacity:1}100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.tap-hand,.tap-ring{animation:none}}
.game-wrap img{-webkit-user-drag:none;user-drag:none}
.broadcast-sound-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:12;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(7,35,31,.94);color:#fff;padding:12px 18px;font:700 14px/1 system-ui,sans-serif;box-shadow:0 8px 28px rgba(0,0,0,.28);cursor:pointer;white-space:nowrap;animation:soundPromptPulse 1.8s ease-in-out infinite}
.broadcast-sound-prompt span{margin-right:6px}
@keyframes soundPromptPulse{0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.28)}50%{box-shadow:0 8px 34px rgba(255,209,76,.48)}}
.broadcast-sound-prompt[hidden]{display:none!important}