/* A small editorial rail, in the same navy/yellow palette as the play menu. */
#community-spotlight{position:absolute;right:clamp(20px,4vw,64px);top:clamp(110px,14vh,156px);width:340px;color:#f5f8ff;flex-shrink:0;-webkit-user-select:text;user-select:text}
.spotlight-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}
.spotlight-kicker{display:inline-flex;gap:7px;align-items:center;background:#ffe343;color:#102f48;padding:4px 9px 4px 5px;border-radius:3px;font:800 12px/1.2 var(--font-ui);letter-spacing:.09em;text-transform:uppercase;box-shadow:0 2px 0 #112e49;transform:rotate(-2deg)}
.spotlight-kicker>span{font-size:17px}
#spotlight-title{font:400 27px/1.15 var(--font-display);letter-spacing:.01em;text-transform:uppercase;margin:9px 0 0;text-shadow:0 2px 8px #06233be0}
#community-spotlight .spotlight-pause{display:grid;place-items:center;flex:0 0 38px;width:38px;min-height:38px;padding:0;border:1px solid #b2dafa66;border-radius:50%;background:#10324de8;color:#fff;font:700 15px/1 var(--font-reading);box-shadow:none;text-shadow:none}
.spotlight-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.spotlight-card{position:relative;display:block;min-width:0;height:256px;border:1px solid #a1c4df66;border-top:2px solid #a5dfff;border-radius:7px;background:#0d2b45f5;box-shadow:0 8px 24px #03142535,inset 0 1px 0 #ffffff0c;color:inherit;text-decoration:none;transition:border-color 250ms ease;overflow:hidden}
.spotlight-content{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px 17px 13px}
/* Fade out, then in: the two layouts never show at once (both are fully transparent between 420 and 580 ms of the 1 s swap). */
.spotlight-content.is-outgoing{animation:spotlight-fade-out .42s cubic-bezier(.4,0,1,1) both;visibility:hidden;transition:visibility 0s .42s}
.spotlight-content.is-incoming{animation:spotlight-fade-in .42s .58s cubic-bezier(0,0,.2,1) both;pointer-events:none}
.spotlight-card[data-kind=press]{border-top-color:#ffe343}
.spotlight-card[data-kind=dm]{border-top-color:#b9b2ff}
.spotlight-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0;margin-bottom:9px}
.spotlight-badge{font:800 12px/1.2 var(--font-ui);text-transform:uppercase;letter-spacing:.09em;color:#b6dcf5}
.spotlight-content[data-kind=press] .spotlight-badge{color:#ffe779}
.spotlight-content[data-kind=dm] .spotlight-badge{color:#cdc8ff}
.spotlight-arrow{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #a8cee42b;border-radius:5px;background:#9fcbee0b;color:#b6cde0}
.spotlight-arrow svg{display:block;width:15px;height:15px}
.spotlight-card-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.spotlight-content[data-kind=press] .spotlight-card-body{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:9px}
.spotlight-image{display:block;flex-shrink:0;width:calc(100% + 34px);height:91px;object-fit:cover;object-position:center;margin:0 -17px 9px;background:#183e5b}
.spotlight-content[data-kind=press] .spotlight-image{height:100%;min-height:0;margin-bottom:0}
.spotlight-headline{font:800 19px/1.14 var(--font-ui);margin:0;letter-spacing:.005em;text-wrap:pretty}
.spotlight-quote{position:relative;font:500 20px/1.32 var(--font-reading);letter-spacing:-.025em;text-wrap:pretty;margin:0 3px 10px 8px}
.spotlight-quote::before{content:'“';position:absolute;right:100%;color:#8fc4e8}
.spotlight-quote::after{content:'”';color:#8fc4e8}
.spotlight-quote-long{font-size:16px;line-height:1.35}
.spotlight-card-footer{display:flex;align-items:end;justify-content:space-between;gap:8px;flex-shrink:0;margin-top:12px;padding-top:9px;border-top:1px solid #b1d5ec24}
.spotlight-attribution{min-width:0;display:grid;gap:2px}
.spotlight-name{font:800 14px/1.2 var(--font-ui);overflow-wrap:anywhere;color:#e7f4ff}
.spotlight-content[data-kind=press] .spotlight-name{letter-spacing:.025em;color:#ffe779}
.spotlight-byline{font:11px/1.2 var(--font-reading);color:#bed1df}
.spotlight-destination{white-space:nowrap;font:11px/1.2 var(--font-reading);color:#b4cbdd}
.spotlight-hint{display:flex;justify-content:space-between;gap:12px;margin:11px 0 0;font:11px/1.3 var(--font-reading);color:#e0ecf4;text-shadow:0 1px 4px #06233b}
.spotlight-card:focus-visible,.spotlight-pause:focus-visible{outline:3px solid #ffe343;outline-offset:4px}
@media(hover:hover){.spotlight-card:hover{border-color:#ffe343;background:#123853}.spotlight-card:hover .spotlight-arrow{color:#ffe343}}
@keyframes spotlight-fade-in{from{opacity:0}to{opacity:1}}
@keyframes spotlight-fade-out{from{opacity:1}to{opacity:0}}
@media(min-width:1280px) and (min-height:800px){
 #community-spotlight{width:min(46vw,680px)}
 .spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .spotlight-card{height:clamp(256px,29vh,280px)}
 .spotlight-image{height:clamp(91px,12vh,123px)}
}
/* Smaller viewports keep the two cards in the scrollable menu flow. */
@media(max-width:960px),(max-height:680px){
 #community-spotlight{position:static;width:100%;max-width:680px;order:3;margin-top:4px;align-self:flex-start}
 #menu:has(#entry-gate:not([hidden])) .entry-project-credit{order:4}
 .spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .spotlight-card{height:265px}
 .spotlight-image{height:105px}
 #menu.ssr-interim:has(#entry-gate:not([hidden])){justify-content:flex-start}
 #menu.ssr-interim #entry-gate{margin-top:0}
}
@media(max-width:540px){
 .spotlight-grid{grid-template-columns:minmax(0,1fr)}
 .spotlight-card{height:260px}
 .spotlight-image{height:103px}
 #spotlight-title{font-size:26px}
}
@media(hover:none){.spotlight-hint>span{display:none}}
@media(prefers-reduced-motion:reduce){.spotlight-card{transition:none}.spotlight-content{animation:none!important}}

/* The ready-to-drop screen uses the open area beside the Start controls. */
#community-spotlight[data-mode=deployment]{position:static;width:100%;max-width:660px;margin:0 0 24px}
[data-mode=deployment] .spotlight-grid{grid-template-columns:minmax(0,1fr)}
[data-mode=deployment] .spotlight-card{height:256px}
[data-mode=deployment] .spotlight-image{height:91px}
[data-mode=deployment] .spotlight-heading{margin-bottom:12px}
#community-spotlight[data-mode=deployment] #spotlight-title{font-size:23px;margin-bottom:0}
[data-mode=deployment] .spotlight-hint{display:none}
@media(min-width:1200px){[data-mode=deployment] .spotlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1199px){#community-spotlight[data-mode=deployment]{max-width:380px}}
@media(max-width:650px){
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-actions{grid-row:1}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-brief{grid-row:2}
 #community-spotlight[data-mode=deployment]{max-width:none;margin:0 0 20px}
}

/* Keep all deployment actions together within the initial viewport. */
#menu.ssr-interim:has(#deployment-controls:not([hidden])){padding-block:clamp(16px,2.5dvh,28px);gap:16px}
#menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-heading h1{font-size:clamp(42px,7dvh,72px)}
#menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-dock{padding:20px;gap:12px 32px}
#menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-brief>h2{font-size:26px;margin-bottom:8px}
#menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-brief>p{font-size:14px;line-height:1.45}
#menu.ssr-interim .deployment-options{gap:10px;padding-top:12px;align-self:start}
#menu.ssr-interim .deployment-options>button{padding:10px 16px;min-height:44px;background-color:#20455d;text-align:center}
#community-spotlight[data-mode=deployment]{margin-bottom:16px}
@media(min-width:651px){
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-brief{grid-column:1;grid-row:1/3;align-self:start;min-width:0}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-actions{grid-column:2;grid-row:1;align-self:start}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-options{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:0;padding-top:0}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-options>span:empty{display:none}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-options>span:not(:empty){grid-column:1/-1}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-dock>.project-credit{grid-row:3}
}
@media(max-width:650px){
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-options{grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-brief{grid-row:3}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-dock>.project-credit{grid-row:4}
 #menu:has(#community-spotlight[data-mode=deployment]) .deployment-options>span:empty{display:none}
}
@media(max-height:760px){
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-heading h1{font-size:42px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-dock{padding:16px;gap:10px 24px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) .selected-fighter img{height:44px;width:40px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-actions>button{min-height:44px;padding-block:11px}
 #menu.ssr-interim:has(#deployment-controls:not([hidden])) .deployment-brief>p{display:none}
}