html:has(body.starlight-community), body.starlight-community { height: auto; min-height: 100%; overflow: auto; background: #071b2b; }
.starlight-community [hidden] { display: none !important; }
/* Reserve the same header safe area as the existing StarBag screen.
   Header typography/position and CTA interactions come from the shared CSS. */
.starlight-community #starlightApp { width: 100%; height: auto; min-height: 100dvh; overflow: visible; background: #071b2b; padding: clamp(88px, 12vh, 122px) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.starlight-panel { width: min(720px, 100%); margin: clamp(20px, 8vh, 80px) auto; padding: clamp(20px, 4vw, 38px); border: 1px solid var(--line); border-radius: 28px; background: var(--panel); }
.starlight-panel h2 { color: var(--gold); font-size: clamp(26px, 3vw, 36px); }
.starlight-panel p { line-height: 1.7; font-size: 20px; }
.starlight-panel .primary-action, .starlight-panel .secondary-action { display: block; width: 100%; margin-top: 16px; text-align: center; text-decoration: none; }
.starlight-grammar { color: var(--gold); }
#runtimeHost iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #071b2b; }
.starlight-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.starlight-actions button, .starlight-actions summary { padding: 10px 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 16px; background: #073954; color: var(--ink); font: inherit; cursor: pointer; }
.starlight-actions button:disabled { opacity: .5; cursor: default; }
#developerTools { width: 100%; }
#developerTools summary { width: fit-content; }
#activityStatus, #shellError { line-height: 1.6; }
.starlight-community.is-projecting { overflow: hidden; }
.is-projecting .starlight-header, .is-projecting .starlight-actions, .is-projecting #activityStatus { display: none; }
.is-projecting #runtimeHost { position: fixed; inset: 0; z-index: 100; background: #071b2b; }
.is-projecting #runtimeHost iframe { height: 100dvh; aspect-ratio: auto; }
@media (max-width: 600px) {
  .starlight-panel { margin: 20px auto; }
  .starlight-actions { gap: 8px; }
  .starlight-actions button { flex: 1 1 auto; }
}

/* Exact StarBag screen clearances, without its gameplay/orientation gate. */
@media (orientation: landscape) and (max-height: 700px) {
  .starlight-community #starlightApp { padding-top: 74px; }
}
@media (orientation: portrait) {
  html[data-device="phone"] .starlight-community #starlightApp { padding: 100px 16px 110px; }
}
html .starlight-community.is-projecting #starlightApp { padding: 0; }

/* Facilitator-only projection control: collapsed by default and layered above the iframe.
   It does not change field geometry; completion inherits the exact active viewport size. */
.starlight-projection-facilitator {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 190;
  align-items: flex-end;
  gap: 8px;
}
.is-projecting .starlight-projection-facilitator:not([hidden]) { display: flex; }
.starlight-projection-facilitator-toggle {
  width: 46px; height: 46px; min-width: 46px; padding: 0;
  border: 1px solid rgba(255,240,186,.45); border-radius: 999px;
  background: rgba(7,27,43,.64); color: #fff0ba;
  font: 700 18px/1 system-ui, sans-serif; letter-spacing: 1px;
  box-shadow: 0 4px 18px rgba(0,0,0,.22); opacity: .58;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.starlight-projection-facilitator-toggle:hover,
.starlight-projection-facilitator-toggle:focus-visible,
.starlight-projection-facilitator[data-open="true"] .starlight-projection-facilitator-toggle { opacity: 1; }
.starlight-projection-facilitator-menu {
  min-width: 164px; padding: 8px; border: 1px solid rgba(255,240,186,.34);
  border-radius: 16px; background: rgba(7,27,43,.9);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.starlight-projection-facilitator-menu button {
  display: block; width: 100%; min-height: 42px; margin: 0; padding: 8px 12px;
  border: 1px solid rgba(255,240,186,.28); border-radius: 12px;
  background: rgba(7,57,84,.88); color: #fff; font: inherit;
}
.starlight-projection-facilitator-menu button + button { margin-top: 7px; }
.starlight-projection-facilitator-menu button:disabled { opacity: .42; }
.starlight-result-view .starlight-projection-facilitator { display: none !important; }

/* Ending only: the actual field remains visible, controls sit below it. */
.starlight-result-view .starlight-live-guide,
.starlight-result-view .starlight-actions,
.starlight-result-view #activityStatus { display:none; }
/* Result mode must never resize the shared field. Keep the exact gameplay/projection geometry.
   Only the delayed action control floats above the preserved result. */
.starlight-result-view #sessionResult { position:fixed; z-index:140; left:50%; bottom:max(20px, env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(340px, calc(100vw - 32px)); margin:0; padding:0; border:0; border-radius:0; background:transparent; pointer-events:none; }
.starlight-result-view #sessionResult .starlight-result-star,
.starlight-result-view #resultTitle,
.starlight-result-view #resultCopy { display:none; }
.starlight-result-view #sessionResult button { width:100%; max-width:340px; margin:0 auto; pointer-events:auto; }