.squad-timer{display:flex;align-items:center;gap:14px;padding:12px 22px;background:#0c164eea;border:1px solid #ffffff45;border-radius:22px;color:#fff;margin:0 0 20px;box-shadow:0 8px 32px #0002}
.squad-timer>span{font-size:11px;letter-spacing:.12em;max-width:100px}.squad-timer strong{font-size:42px;font-variant-numeric:tabular-nums;line-height:1.1;color:#fff}.squad-timer small{font-size:12px;color:#bed8ff}.squad-timer.ending{border-color:#ff9700}.squad-timer.ending strong{color:#ffae49}
.display .squad-timer{position:absolute;left:4vw;bottom:35px;z-index:5;flex-wrap:wrap;max-width:310px;margin:0}.display .squad-timer strong{font-size:58px}.display .squad-timer small{flex-basis:100%;text-align:center}
@media(max-width:700px){.display .squad-timer{left:20px;top:280px;bottom:auto;max-width:calc(100% - 40px);padding:10px 16px;gap:10px}.display .squad-timer strong{font-size:40px}.display .squad-timer small{flex-basis:auto}.display .waiting{top:52%}.squad-timer{padding:12px;gap:10px;flex-wrap:wrap}.squad-timer strong{font-size:36px}.squad-timer small{font-size:11px}}
.cloudscreen { position: fixed; inset: 0; z-index: 50; overflow-y: auto; display: flex;
  background: radial-gradient(ellipse 55% 38% at 50% 100%, rgba(255,150,70,.6), transparent 70%), linear-gradient(180deg, #050833 0%, var(--navy) 35%, #1c1b62 64%, #6a2c5c 84%, #c4532c 100%);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: calc(env(safe-area-inset-top, 0px) + 22px) calc(env(safe-area-inset-bottom, 0px) + 22px); }
.cs-inner { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: auto; display: flex; flex-direction: column; gap: 18px; }
.cs-sun { position: fixed; right: 8%; bottom: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, #fff2d6 0%, #ffc27a 30%, rgba(255,106,13,0) 70%); pointer-events: none; }
.cloudscreen .stars { position: fixed; }
.cs-hud { position: fixed; inset: 0; z-index: 0; pointer-events: none; font-family: var(--font-hud); color: rgba(233,238,248,.7); }
.tape { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); width: min(440px, 36vw); height: 40px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.tape .ticks { display: flex; width: max-content; animation: tape 24s linear infinite; }
.tape .ticks span { width: 56px; flex: none; text-align: center; font-size: 12px; letter-spacing: .08em; padding-top: 16px; background: linear-gradient(rgba(233,238,248,.6), rgba(233,238,248,.6)) center top / 2px 10px no-repeat, linear-gradient(rgba(233,238,248,.35), rgba(233,238,248,.35)) 0 top / 1px 6px no-repeat; }
.tape-caret { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 7px solid transparent; border-top: 9px solid var(--orange); }
@keyframes tape { to { transform: translateX(-50%); } }
.lock { position: absolute; pointer-events: none; }
.lock .c { position: absolute; width: 18px; height: 18px; border: 3px solid var(--orange); }
.lock .c.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.lock .c.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.lock .c.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.lock .c.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.lock-tag { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--font-hud); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.lock-tag::before { content: ""; width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); animation: blink 1s infinite; }
.lock.acquire { animation: lockon .9s cubic-bezier(.2,.8,.2,1) .5s both; }
@keyframes lockon { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.94); } 80% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
.cs-stats { display: flex; gap: 10px; }
.cs-stats .rd { border: 1.5px solid rgba(233,238,248,.5); padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 10px; letter-spacing: .16em; color: var(--ember); }
@media (max-width: 520px) { .lock-tag { font-size: 9.5px; letter-spacing: .1em; } .lock .c { width: 12px; height: 12px; border-width: 2px; } }
.cs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.cs-title { margin: 10px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 64px); line-height: .95; letter-spacing: -.01em; text-wrap: balance; }
.cs-title em { font-style: normal; color: var(--orange); }
.cs-stats { font-family: var(--font-hud); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); font-variant-numeric: tabular-nums; }
.cs-stats b { color: var(--ice); font-size: 22px; }
.cs-stage { position: relative; margin-inline: auto; width: 100%; max-width: 100%; aspect-ratio: 1000 / 600; flex-shrink: 0; container-type: inline-size; }
.cs-page { margin:0; font-size:12px; line-height:1.5; color:var(--ice); text-align:center; }
.cs-page[hidden] { display:none; }
.cs-cloud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cs-cloud .glow { filter: blur(22px); opacity: .55; }
.cs-words { position: absolute; inset: 0; }
.cw { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; line-height: 1; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--navy-2); cursor: default; }
.cw.alt { color: var(--blue-deep); }
.cw.hi { color: var(--blue); }
.cw.top { color: var(--orange); }
.cw.pop { animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes pop { from { opacity: 0; transform: translate(-50%,-50%) scale(.3); } to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
.cs-empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0 22%; color: var(--navy-2); font-size: 18px; text-align: center; }
.cs-empty[hidden] { display: none; }
.cs-actions .fire { font-size: 20px; height: 58px; padding: 0 24px; }
.cs-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.cs-note { color: var(--mist); font-size: 14px; max-width: 60ch; }
.cloudscreen[hidden]{display:none!important}
.cloudscreen{isolation:isolate;animation:debrief-in .7s ease-out both}
.cloudscreen .cs-inner{max-width:min(1240px,94vw,calc((100dvh - 258px)*1.65))}
.cs-sun{right:-120px;bottom:-180px}.cs-actions{color:var(--ice)}
.cs-stage{animation:debrief-rise 1.1s ease both}
.cloud-finished .display-controls{display:none}
body.cloud-finished{overflow:hidden}
@keyframes debrief-in{from{opacity:0}to{opacity:1}}
@keyframes debrief-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(max-height:800px) and (min-width:641px){.cs-inner{gap:8px}.cs-title{font-size:clamp(32px,4.1vw,53px)}.cs-head .eyebrow{font-size:18px}.cs-actions .fire{height:44px;font-size:17px}.cloudscreen{padding-top:55px;padding-bottom:15px}}
@media(max-width:640px){.cloudscreen .cs-inner{max-width:100%;gap:12px}.cs-head{gap:12px}.cs-title{font-size:clamp(32px,8.5vw,48px)}.cs-head .eyebrow{font-size:16px}.cs-stats .rd{font-size:9px;padding:4px 8px}.cs-stats .rd b{font-size:17px}.cs-actions .fire{height:44px;font-size:16px}.cs-note{font-size:13px}.cloudscreen{padding-top:60px}.tape{width:75vw}.lock-tag{font-size:clamp(8px,2.2cqw,11px)}}
@media(max-height:500px){.cloudscreen .cs-inner{max-width:min(760px,100%)}.cs-title{font-size:32px}.cs-stage{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){.cloudscreen,.cs-stage,.cw.pop,.lock.acquire,.tape .ticks,.lock-tag:before{animation:none!important}}

.cloudscreen{overflow-x:hidden}.cs-note{color:var(--ice)}.cloudscreen .cs-sun{pointer-events:none;right:0;bottom:0;transform:translate(48%,50%)}
.cloudscreen .cs-sun{width:min(190px,32vw);height:190px;transform:none;background:radial-gradient(circle at 100% 100%,#fff2d6 0%,#ffc27a 24%,transparent 72%)}