/* Outer WordPress staging shell only. Original CS Viewer owns ALL internal CSS,
   scoreboard, roster, controls and canvas within its Shadow DOM. */
.nas-hlx-upstream{border:1px solid #394459;border-radius:12px;background:#101826;color:#e6ecf6;padding:10px;margin:18px 0;max-width:100%;box-sizing:border-box}
.nas-hlx-upstream-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 5px 10px}
.nas-hlx-upstream-heading strong{font-size:15px;color:#f0f5ff}
.nas-hlx-upstream [data-upstream-status]{color:#bdd3e9;font-size:12px;max-width:70%;overflow-wrap:anywhere}
.nas-hlx-upstream [data-upstream-host]{height:clamp(450px,67vh,760px);min-height:450px;margin:0;border-radius:8px;overflow:hidden;position:relative;background:#0b0e13}
.nas-hlx-upstream [data-upstream-host] canvas{box-shadow:none}
.nas-hlx-upstream button{cursor:pointer;padding:7px 11px;border:1px solid #6f88a4;background:#1c344b;color:#fff;border-radius:6px;font-size:13px}
.nas-hlx-upstream button:hover:not([disabled]){background:#2a4d6c}
.nas-hlx-upstream button[disabled]{opacity:.5;cursor:not-allowed}
.nas-hlx-upstream button[hidden]{display:none}
.nas-hlx-upstream-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 5px 6px}
.nas-hlx-upstream-info{border-top:1px solid #344153;margin:8px 5px 0;padding:8px 3px;color:#c3d0df;font-size:12px;line-height:1.55}
.nas-hlx-upstream-info summary{cursor:pointer;font-size:12px;color:#abc0d7}
.nas-hlx-upstream-info p{margin:10px 0}
.nas-hlx-upstream kbd{background:#273445;padding:2px 6px;border-radius:3px}
@media(max-width:720px){.nas-hlx-upstream [data-upstream-host]{height:520px}.nas-hlx-upstream{padding:6px}.nas-hlx-upstream [data-upstream-status]{max-width:100%}}

/* beta8.29: the original CS Viewer shell mounts for guests but only members
   can retrieve the replay data/maps/models or start the recording. */
.nas-hlx-viewer-frame { position: relative; }
.nas-hlx-guest-poster { position: absolute; z-index: 5; inset: 0 0 58px; display: grid; place-items: center; background: linear-gradient(120deg,#101823df,#101823a8),var(--nas-hlx-demo-poster,linear-gradient(#1b3045,#0a1221)) center/cover no-repeat; color: #f4f7fb; }
.nas-hlx-guest-poster-center { display: grid; justify-items: center; gap: 10px; font-weight: 700; letter-spacing: .04em; text-shadow: 0 2px 8px #000; }
.nas-hlx-upstream .nas-hlx-guest-play { display: grid; place-items: center; width: 82px; height: 82px; padding: 0 0 0 5px; border: 2px solid #6ad9ff; border-radius: 50%; color: #fff; background: linear-gradient(#159bd9,#046693); box-shadow: 0 0 25px #008dde77; font-size: 32px; }
.nas-hlx-upstream .nas-hlx-guest-play:hover { background: #14a8d9; transform: scale(1.04); }
.nas-hlx-guest-transport { position: absolute; z-index: 6; left: 0; bottom: 0; right: 0; height: 59px; box-sizing: border-box; padding: 8px 16px; display: flex; gap: 14px; align-items: center; background: #111b2b; color: #cad7e6; font-size: 12px; }
.nas-hlx-guest-transport-track { flex: 1; height: 5px; background: #32465b; border-radius: 7px; overflow: hidden; }
.nas-hlx-guest-transport-track span { display: block; width: 0; height: 100%; background: #14bced; }
.nas-hlx-guest-legacy { padding: 70px 20px; text-align: center; background: linear-gradient(#132538,#0c1927); border: 1px solid #394c5d; }
.nas-hlx-guest-legacy button { background: #118dbf; color: white; border: 1px solid #1fc8f0; padding: 12px 20px; cursor: pointer; }
@media(max-width:620px) { .nas-hlx-upstream .nas-hlx-guest-play { width: 65px; height: 65px; font-size: 26px; } }

/* beta8.53: first-play model loading must be visible over the replay canvas. */
.nas-hlx-model-wait:not([hidden]){position:absolute;z-index:8;top:46%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:12px;max-width:min(92%,480px);padding:14px 18px;border:1px solid #46b4df;border-radius:10px;background:rgba(10,24,39,.95);box-shadow:0 8px 35px rgba(0,0,0,.55);color:#eef8ff;font-size:14px;font-weight:600;pointer-events:none;text-align:center}
.nas-hlx-model-wait[hidden]{display:none!important}
.nas-hlx-model-spinner{display:block;flex:none;width:23px;height:23px;border:3px solid rgba(94,190,226,.3);border-top-color:#39c8f4;border-radius:50%;animation:nas-hlx-model-spin .8s linear infinite}
@keyframes nas-hlx-model-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.nas-hlx-model-spinner{animation:none;border-top-color:#fff}}