/* Radio entries read as a small header followed by the whole message.
   Newest first keeps fresh reports visible without a polling/scroll timer. */
#mesh ol { display: flex; flex-direction: column; max-height: min(42vh, 340px); overflow-y: auto; overscroll-behavior: contain; pointer-events: auto; touch-action: pan-y; }
/* Monitor retains at most seven entries. Normal scroll origin stays at the
   newest row; older reports remain reachable by scrolling down. */
#mesh li:nth-last-child(1) { order: -7; }
#mesh li:nth-last-child(2) { order: -6; }
#mesh li:nth-last-child(3) { order: -5; }
#mesh li:nth-last-child(4) { order: -4; }
#mesh li:nth-last-child(5) { order: -3; }
#mesh li:nth-last-child(6) { order: -2; }
#mesh li:nth-last-child(7) { order: -1; }
body #mesh ol li, body #mesh ol li:last-child, body #mesh ol li.mesh {
  grid-template-columns: max-content minmax(0, 1fr);
  flex: none; align-items: baseline; gap: 3px 8px; padding: 6px 0;
  white-space: normal;
}
#mesh li > time { grid-column: 1; white-space: nowrap; }
#mesh li > em { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
body #mesh ol li > span, body #mesh ol li:last-child > span, body #mesh ol li.mesh > span {
  grid-column: 1 / -1; min-width: 0; overflow: visible;
  text-overflow: clip; overflow-wrap: anywhere; line-height: 1.5;
}
body.side #mesh ol li:last-child > span { display: block; -webkit-line-clamp: unset; overflow: visible; }

/* Spectator follow owns its framing; player help and camera/zoom controls do not apply. */
body.observer #nav :is(#helpbtn, #cam, #zin, #zout, #guide, #ctlpick) { display: none; }

/* Reuse the existing music-note symbol for one spectator sound control.
   Existing text/ARIA labels and gesture-unlock behavior remain authoritative. */
body.observer:has(#watch-audio) #nav #mute { display: none; }
body.observer #mesh { top: calc(64px + var(--st)); }
body.observer #watch-controls { top: calc(8px + var(--st)); right: 12px; bottom: auto; left: auto; gap: 6px; }
body.observer > #watch-audio { position: fixed; top: calc(8px + var(--st)); right: 12px; bottom: auto; left: auto; z-index: 25; }
body.observer #watch-audio, body.observer #watch-voice {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  min-width: 44px; min-height: 44px; padding: 0; font-size: 0; letter-spacing: 0;
}
body.observer > #watch-audio { position: fixed; }
body.observer #nav #watch-audio {
  position: static; inset: auto; width: 44px; height: 44px; padding: 0; font-size: 0;
}
body.observer #nav #full { width: 44px; height: 44px; padding: 10px; }
body.observer #nav :is(#watch-audio, #full):not([hidden]) { display: grid !important; }
body.observer #nav #watch-audio::before, body.observer #nav #watch-audio::after { grid-area: 1 / 1; }
body.observer #nav #watch-audio[data-state="muted"]::after,
body.observer #nav #watch-audio[data-state="locked"]::after { position: static; }
body.observer #watch-audio::before { content: "♪"; font: 500 25px/1 var(--mono); }
body.observer #watch-voice::before {
  content: ""; width: 21px; height: 21px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-7l-5 4v-4H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z M7 9h10M7 13h7' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.observer :is(#watch-audio, #watch-voice)[data-state="muted"]::after,
body.observer #watch-audio[data-state="locked"]::after {
  content: ""; position: absolute; width: 27px; height: 2px;
  background: currentColor; transform: rotate(-45deg); box-shadow: 0 0 2px #061215;
}
body.observer :is(#watch-audio, #watch-voice):focus-visible { outline: 2px solid var(--lead); outline-offset: 3px; }
@media (min-width: 760px) {
  body.side.observer #watch-controls, body.side.observer > #watch-audio { right: 104px; }
}

/* A portrait spectator needs a clear centre, rather than a tall side overlay.
   Scope these positions to observers so touch/gamepad play keeps its controls. */
@media (max-width: 600px) and (orientation: portrait) {
  body.observer { --radio-height: min(230px, 34vh); }
  body.observer #nav { width: 96px; left: 8px; top: calc(8px + var(--st)); }
  body.observer #compass { width: 88px; height: 88px; }
  body.observer #nav .tools { gap: 4px; margin-top: 3px; flex-wrap: wrap; }
  body.observer #nav .tools button { width: 28px; height: 28px; padding: 5px; }
  body.observer #me {
    left: 108px; right: 8px; top: calc(10px + var(--st)); width: auto;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  }
  body.observer #me .sep { display: none; }
  body.observer #me .g { min-width: 0; gap: 3px; }
  body.observer #me .cube { width: 21px; height: 24px; }
  body.observer #me .g b { font-size: 13px; }
  body.observer #me .g i { font-size: 6px; line-height: 1.35; letter-spacing: .02em; white-space: normal; text-align: center; }
  body.observer #me .g em.keep { max-width: 100%; padding: 2px; font-size: 6.5px; line-height: 1.4; letter-spacing: 0; white-space: normal; overflow-wrap: anywhere; }
  body.observer #carried { top: calc(100px + var(--st)); }
  body.observer #carried b { font-size: 25px; }
  body.observer #ammo { top: calc(108px + var(--st)); right: 12px; bottom: auto; font-size: 22px; }
  body.observer #mesh {
    left: 8px; right: 8px; top: auto; bottom: calc(8px + var(--sb));
    width: auto; height: var(--radio-height); padding: 8px 10px;
    display: flex; flex-direction: column; z-index: 8;
    background: linear-gradient(135deg, #0a161af2, #060c0fe8);
  }
  body.observer #mesh header { flex: none; margin-bottom: 5px; gap: 6px; }
  body.observer #mesh header b { font-size: 8px; letter-spacing: .18em; }
  body.observer #mesh .stats { flex: none; margin-bottom: 5px; }
  body.observer #mesh .stats div { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 4px 0; }
  body.observer #mesh .stats b { font-size: 15px; }
  body.observer #mesh .stats i { font-size: 7px; min-height: 0; }
  body.observer #mesh .minds { flex: none; display: flex; flex-wrap: wrap; gap: 3px 10px; margin-bottom: 4px; }
  body.observer #mesh .minds p { width: 100%; margin-bottom: 0; font-size: 6px; letter-spacing: .08em; }
  body.observer #mesh .minds div { display: flex; gap: 4px; padding: 0; }
  body.observer #mesh .minds em { font-size: 8px; letter-spacing: 0; }
  body.observer #mesh .minds span { display: none; }
  body.observer #mesh .minds b { font-size: 11px; min-width: 0; }
  body.observer #mesh .feed-clock { flex: none; margin-bottom: 2px; font-size: 7px; }
  body.observer #mesh ol { flex: 1; min-height: 0; max-height: none; }
  body.observer #mesh ol li:nth-last-child(n + 4) { display: grid; }
  body.observer #mesh li { font-size: 10px; }
  body.observer #watch-controls { top: auto; right: 8px; left: auto; bottom: calc(16px + var(--sb) + var(--radio-height)); gap: 6px; }
  body.observer > #watch-audio { top: auto; right: 8px; left: auto; bottom: calc(16px + var(--sb) + var(--radio-height)); }
  body.observer #watch-audio, body.observer #watch-voice { padding: 0; font-size: 0; }
  body.observer #ai-reason { left: 8px; bottom: calc(16px + var(--sb) + var(--radio-height)); width: calc(100vw - 116px); padding: 6px 8px; font-size: 9px; }
  body.observer #ai-reason strong { font-size: 8px; margin-bottom: 2px; }
  body.observer #meshmoment { top: 36%; width: calc(100vw - 24px); }
  body.observer #alertsign { top: calc(160px + var(--st)); width: calc(100vw - 24px); }
  body.observer #alertsign svg { display: none; }
  body.observer #alertsign span b { font-size: 17px; }
  body.observer #alertsign span small { font-size: 9px; letter-spacing: 1px; }
}

/* Observer radio is one paragraph: metadata and message share the first line,
   and continuation lines use the full entry width. */
body.observer #mesh ol li,
body.observer #mesh ol li:last-child,
body.observer #mesh ol li.mesh,
body.observer #mesh ol li:nth-last-child(n + 4),
body.side.observer #mesh ol li:nth-last-child(n + 4) {
  display: block; grid-template-columns: none; white-space: normal; text-indent: 0;
}
body.observer #mesh ol li > time,
body.observer #mesh ol li > em,
body.observer #mesh ol li > span,
body.observer #mesh ol li:last-child > span,
body.observer #mesh ol li.mesh > span {
  display: inline; grid-column: auto; min-width: 0; overflow: visible;
  -webkit-line-clamp: unset; text-overflow: clip; overflow-wrap: anywhere;
}
body.observer #mesh ol li > time { white-space: nowrap; margin-right: .65em; }
body.observer #mesh ol li > em { margin-right: .65em; }

/* Resident terrain and GPU programs settle behind an opaque, full-frame entry stage.
   This reuses the Live standby composition, not a second card inside the game frame. */
body #render-loading{position:fixed;inset:0;z-index:10000;box-sizing:border-box;padding:0;background:#000;color:#d5f6ed;display:block;font:12px/1.7 var(--mono);pointer-events:all;overflow:hidden}
body #render-loading[hidden]{display:none}
body #render-loading .loading-glass{position:relative;isolation:isolate;box-sizing:border-box;width:100%;height:100%;padding:64px 38px;border:0;text-align:left;background:radial-gradient(ellipse at 84% 52%,#163b3d55,transparent 65%),#050e12;overflow:hidden}
body #render-loading .loading-glass::before{content:"";position:absolute;inset:0;z-index:0;background-image:radial-gradient(#52767755 .6px,transparent .7px);background-size:6px 6px;opacity:.26;mask-image:linear-gradient(to right,transparent,#000);pointer-events:none}
body #render-loading .loading-glass::after{content:"";position:absolute;inset:0;z-index:3;background:repeating-linear-gradient(0deg,#00161800 0,#00161800 3px,#02080b60 4px);opacity:.38;pointer-events:none}
body #render-loading .loading-world{position:relative;z-index:2;display:block;margin:0;color:#a5c4bd;font:500 9px/1.4 var(--mono);letter-spacing:.22em}
body #render-loading .loading-island{position:absolute;z-index:1;display:block;width:75%;height:94%;margin:0;aspect-ratio:auto;object-fit:contain;right:-3%;top:4%;opacity:.78;pointer-events:none}
body #render-loading .loading-title{position:relative;z-index:2;max-width:460px;margin:29px 0 21px;font:900 clamp(28px,3.6vw,56px)/1.14 var(--dot);letter-spacing:-.8px;color:#ecf7f4;text-shadow:0 0 24px #57d6c116}
body #render-loading .loading-status{position:relative;z-index:2;max-width:33ch;min-height:3.4em;margin:0;padding:0;color:#b9cece;overflow-wrap:anywhere;text-wrap:pretty}
@media(max-width:1100px){body #render-loading .loading-glass{padding:58px 28px}body #render-loading .loading-title{font-size:42px}body #render-loading .loading-island{right:-5%;width:80%;opacity:.62}}
@media(max-width:520px){body #render-loading .loading-glass{padding:38px 21px}body #render-loading .loading-world{font-size:8px}body #render-loading .loading-title{font-size:37px;line-height:1.17;letter-spacing:-1px;margin:24px 0 20px}body #render-loading .loading-status{font-size:11px;line-height:1.8;max-width:27ch}body #render-loading .loading-island{width:100%;height:68%;right:0;top:31%;opacity:.47}}
@media(max-height:480px){body #render-loading .loading-glass{padding:28px}body #render-loading .loading-title{font-size:28px;margin:20px 0 14px}body #render-loading .loading-status{min-height:0}}

body #render-loading .loading-status::before{content:none;display:none}