.brief{position:fixed;inset:0;z-index:35;display:none;flex-direction:column;background:#02040a;color:#e6eefc}
.brief.on{display:flex}
.brief .bstage{position:relative;flex:1 1 auto;min-height:0;background:radial-gradient(ellipse at 50% 40%,#0b1a3a 0%,#02040a 70%);cursor:pointer;overflow:hidden}
.brief .bstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.2s;filter:saturate(.9)}
.brief .bstage img.on{opacity:1}
.brief .bstage:after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.brief .bcap{position:absolute;left:1rem;top:calc(.8rem + env(safe-area-inset-top));max-width:70%;font:600 .66rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#93c5fd;text-shadow:0 0 8px #000;background:rgba(2,4,10,.55);padding:.3rem .5rem}
.brief .bclose{position:absolute;right:1rem;top:calc(.8rem + env(safe-area-inset-top));border:1px solid rgba(96,165,250,.4);background:rgba(2,4,10,.6);color:#93c5fd;font:600 .72rem var(--mono);padding:.4rem .7rem;cursor:pointer}
.brief .bbot{flex:0 0 auto;padding:.9rem 1.1rem calc(1rem + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(2,4,10,0),#02040a 30%);display:grid;gap:.45rem;grid-template-columns:1fr auto;align-items:end}
.brief .bnum{grid-column:1/-1;font:600 .66rem var(--mono);letter-spacing:.2em;color:#f87171;text-transform:uppercase}
.brief h2{grid-column:1/-1;margin:0;font:700 clamp(1.15rem,4.2vw,1.8rem)/1.1 var(--mono)}
.brief .bsub{grid-column:1/-1;margin:0;min-height:2.8em;font-size:1.02rem;line-height:1.4;color:#e6eefc}
.brief .blinks{display:flex;gap:.4rem;flex-wrap:wrap}
.brief .blinks a{border:1px solid rgba(96,165,250,.35);color:#bfdbfe;text-decoration:none;font:600 .68rem var(--mono);letter-spacing:.06em;padding:.4rem .6rem;background:rgba(10,20,45,.7)}
.brief .bnext{border:0;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font:700 .75rem var(--mono);letter-spacing:.08em;padding:.6rem .9rem;cursor:pointer;justify-self:end}
.brief .bbar{grid-column:1/-1;height:2px;background:rgba(96,165,250,.2)}
.brief .bbar i{display:block;height:100%;width:0;background:#60a5fa;box-shadow:0 0 8px #60a5fa;transition:width .3s}
body.brief-on .ui,body.brief-on .mask,body.brief-on .top{display:none}
body.brief-on .scene{height:30vh;width:auto;left:auto;right:.6rem;top:auto;bottom:calc(11.5rem + env(safe-area-inset-bottom));transform:none;z-index:36;pointer-events:none;filter:drop-shadow(0 0 18px rgba(59,130,246,.5))}
body.brief-on .scene .frameglow,body.brief-on .scene .ball{display:none}
@media(orientation:portrait){body.brief-on .scene{height:26vh;min-height:0;bottom:calc(13rem + env(safe-area-inset-bottom))}}

.brief .bstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s;background:#000}
.brief .bstage video.on{opacity:1}
/* home UI tidy-up */
.ui{gap:.6rem}
.cta{width:100%;max-width:480px;justify-content:center;padding:.9rem 1rem;font-size:.95rem}
.cta.files{margin-top:0}
.fine{font:500 .62rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(191,219,254,.55);text-align:center}
@media(min-width:900px){.cta{max-width:420px}}
/* briefing loader, johnny label, prev/next */
.brief .bload{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;flex-direction:column;align-items:center;gap:.6rem;font:600 .68rem var(--mono);letter-spacing:.2em;color:#93c5fd;text-transform:uppercase;pointer-events:none;text-align:center}
.brief .bload.on{display:flex}
.brief .bload i{width:34px;height:34px;border-radius:50%;border:2px solid rgba(96,165,250,.25);border-top-color:#60a5fa;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brief .jn{color:#fbbf24;font-weight:700;letter-spacing:.12em;font-size:.7em}
.brief .bnav{display:flex;gap:.4rem;justify-self:end}
.brief .bprev{border:1px solid rgba(96,165,250,.4);background:none;color:#93c5fd;font:700 .75rem var(--mono);padding:.6rem .8rem;cursor:pointer}
.brief .bprev:disabled{opacity:.35;cursor:default}
.brief .bcap{max-width:60%;font-size:.6rem}

.relrow{display:flex;gap:.35rem;width:100%;max-width:480px;justify-content:space-between}
.relrow button{flex:1 1 0;border:1px solid rgba(96,165,250,.35);background:rgba(10,20,45,.7);color:#bfdbfe;font:700 .68rem var(--mono);letter-spacing:.06em;padding:.5rem 0;cursor:pointer}
.relrow button:disabled{opacity:.3;cursor:default}
.relrow button:not(:disabled):hover{background:rgba(37,99,235,.4);color:#fff}
@media(min-width:900px){.relrow{max-width:420px}}