/* V79.7 Group-only patch. Scoped to .starbag-app; Single Model remains untouched. */

.starbag-app {
  --group-glow-soft: drop-shadow(0 0 7px rgba(255, 239, 157, .42)) drop-shadow(0 0 18px rgba(255, 225, 109, .23));
  --group-glow-active: drop-shadow(0 0 9px rgba(255, 244, 185, .72)) drop-shadow(0 0 22px rgba(255, 222, 104, .48));
  --group-glow-strong: drop-shadow(0 0 12px rgba(255, 248, 197, .88)) drop-shadow(0 0 34px rgba(255, 221, 86, .58));
}

/* Group Mode copy only. */
.starbag-app .starbag-eyebrow { letter-spacing: .08em; }
.starbag-app .group-home-copy > p:last-child { display: none; }

/* Reuse the exact Single Model watercolor button assets without touching Single CSS/components. */
.starbag-app .group-primary-action {
  width: 100%;
  min-height: 86px;
  padding: 0 34px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent url("../assets/buttons/button-normal.png") center / 100% 100% no-repeat !important;
  background-color: transparent !important;
  appearance: none;
  -webkit-appearance: none;
  color: #fff8e8;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 950;
  line-height: 1.12;
  text-shadow: 0 2px 8px rgba(0, 20, 45, .72);
  box-shadow: none;
  filter: drop-shadow(0 0 14px rgba(255, 210, 120, .30));
  transition: transform .16s ease, filter .16s ease;
  cursor: pointer;
}
.starbag-app .group-primary-action:hover,
.starbag-app .group-primary-action:focus-visible {
  background: transparent url("../assets/buttons/button-normal.png") center / 100% 100% no-repeat !important;
  transform: translateY(-2px);
  filter: drop-shadow(0 0 20px rgba(255, 220, 140, .58));
}
.starbag-app .group-primary-action:active,
.starbag-app .group-primary-action.is-pressed {
  background: transparent url("../assets/buttons/button-pressed.png") center / 100% 100% no-repeat !important;
  transform: translateY(2px) scale(.985);
  filter: drop-shadow(0 0 22px rgba(255, 235, 170, .72));
}
.starbag-app .group-primary-action:disabled {
  opacity: .48;
  cursor: default;
  transform: none;
  filter: grayscale(.12) drop-shadow(0 0 8px rgba(255, 220, 140, .18));
}
.starbag-app .group-primary-action:focus-visible {
  outline: 4px solid #fff2a9;
  outline-offset: 3px;
}
.starbag-app .result-actions {
  width: min(560px, 76%);
  display: grid;
  gap: 10px;
  justify-items: stretch;
}
.starbag-app .result-overlay .group-primary-action { min-height: 96px; }
.starbag-app .result-secondary-action {
  min-height: 52px;
  border: 1px solid rgba(224,247,255,.52);
  border-radius: 16px;
  background: rgba(3,45,80,.92);
  color: #effbff;
  font-size: 18px;
  font-weight: 850;
  cursor: pointer;
}
.starbag-app .result-secondary-action[hidden] { display: none !important; }

/* Five-point star visual language: alpha-outline glow only, never rectangular box-shadow/brightness. */
.starbag-app img.group-star {
  background: transparent !important;
  box-shadow: none !important;
  filter: var(--group-glow-soft);
}
.starbag-app .activity-star-stack .group-star,
.starbag-app .setup-star,
.starbag-app .research-star,
.starbag-app .prompt-star,
.starbag-app .result-stars img {
  filter: var(--group-glow-active);
}
.starbag-app .sky-star {
  opacity: .38;
  filter: drop-shadow(0 0 6px rgba(255, 239, 157, .26));
}
.starbag-app .progress-cluster img,
.starbag-app .team-cluster img {
  opacity: 1;
  filter: var(--group-glow-active);
}
.starbag-app .falling-star {
  filter: var(--group-glow-active);
}
.starbag-app .falling-star.is-big,
.starbag-app .coop-giant-star {
  filter: var(--group-glow-strong);
}
.starbag-app .calibration-star-halo {
  position: absolute;
  width: 76px;
  height: 76px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  isolation: isolate;
  pointer-events: none;
  animation: calibrationBreathV794 2.9s ease-in-out infinite alternate;
}
.starbag-app .calibration-star-halo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,239,145,.34) 0 18%, rgba(255,228,112,.18) 36%, rgba(255,224,96,.08) 55%, transparent 74%);
  filter: blur(10px);
  opacity: .88;
}
.starbag-app .calibration-dot {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  z-index: 1;
  width: 44px;
  height: 44px;
  opacity: .98;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 7px rgba(255,244,180,.68)) drop-shadow(0 0 18px rgba(255,224,102,.35)) !important;
  animation: none !important;
}
@keyframes calibrationBreathV794 {
  0% { transform: translate(-50%, -50%) scale(.96); opacity: .84; }
  55% { transform: translate(-50%, calc(-50% - 3px)) scale(1.035); opacity: 1; }
  100% { transform: translate(-50%, calc(-50% - 5px)) scale(1.00) rotate(2deg); opacity: .92; }
}

/* Big-star event: keep the watercolor star visible until it physically enters the bag. */
.starbag-app .falling-star.is-big.is-action-ready {
  animation: bigStarReadyPulseV793 1.3s ease-in-out infinite alternate;
}
.starbag-app .falling-star.is-big.is-dropping-to-bag {
  animation: none;
  transition: filter .18s ease;
  filter: var(--group-glow-strong);
}
.starbag-app .falling-star.is-big.is-entering-bag {
  transition: opacity .38s ease, transform .38s ease, filter .38s ease;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.36);
  filter: drop-shadow(0 0 26px rgba(255,244,183,.86));
}
@keyframes bigStarReadyPulseV793 {
  to { transform: translate(-50%, -50%) scale(1.055); }
}
.starbag-app .star-bag.is-expanded .bag-handle {
  left: 11%;
  right: 11%;
  transition: left .22s ease, right .22s ease, filter .22s ease;
  filter: drop-shadow(0 0 13px rgba(255,236,155,.62));
}

/* Full cooperation aggregation / cluster sequence. */
.starbag-app .coop-aggregation-layer {
  position: absolute;
  z-index: 18;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.starbag-app .aggregate-star,
.starbag-app .cluster-particle {
  position: absolute;
  width: 30px;
  height: 30px;
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: var(--group-glow-active);
  will-change: left, top, transform, opacity;
}
.starbag-app .aggregate-star {
  transition: left .82s cubic-bezier(.22,.74,.24,1), top .82s cubic-bezier(.22,.74,.24,1), opacity .5s ease, transform .82s ease;
}
.starbag-app .aggregate-star.is-gathering {
  left: 50% !important;
  top: 44% !important;
  transform: translate(-50%, -50%) scale(.52);
  opacity: .42;
}
.starbag-app .coop-giant-star {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: 44%;
  width: 214px;
  height: 214px;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(.68);
  opacity: 0;
  transition: opacity .34s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.starbag-app .coop-giant-star.is-formed {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.starbag-app .coop-giant-star.is-radiant {
  transform: translate(-50%, -50%) scale(1.12);
  filter: var(--group-glow-strong);
}
.starbag-app .coop-giant-star.is-dispersing {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.34);
}
.starbag-app .cluster-particle {
  left: 50%;
  top: 44%;
  opacity: 0;
  transition-property: left, top, transform, opacity;
  transition-duration: 1.15s, 1.15s, 1.15s, .42s;
  transition-timing-function: cubic-bezier(.2,.75,.25,1), cubic-bezier(.2,.75,.25,1), ease, ease;
}
.starbag-app .cluster-particle.is-flying {
  left: var(--target-x);
  top: var(--target-y);
  opacity: .96;
  transform: translate(-50%, -50%) scale(var(--target-scale, 1)) rotate(var(--target-rot, 0deg));
}
.starbag-app .cluster-particle.is-settled {
  opacity: 1;
  filter: var(--group-glow-active);
  animation: clusterBreatheV793 2.8s ease-in-out infinite alternate;
}
@keyframes clusterBreatheV793 {
  to { transform: translate(-50%, -50%) scale(calc(var(--target-scale, 1) * 1.035)) rotate(var(--target-rot, 0deg)); }
}

/* The facilitator-only simulation tray starts collapsed and stays beside the facilitator rail. */
.starbag-app .simulation-tray {
  top: clamp(390px, 54vh, 520px);
  right: var(--safe-right);
  bottom: auto;
  width: clamp(178px, 13.5vw, 208px);
  max-height: calc(100dvh - 410px - var(--safe-bottom));
}
.starbag-app .simulation-tray details {
  max-height: 100%;
  overflow: auto;
}
.starbag-app .simulation-tray summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: clamp(14px, 1.2vw, 16px);
}
.starbag-app .simulation-status {
  margin: 0;
  padding: 8px 10px;
  color: #ffeaa0;
  font-size: 13px;
  line-height: 1.35;
  background: rgba(1,35,66,.52);
}
.starbag-app .simulation-actions {
  grid-template-columns: 1fr;
  padding: 7px;
}
.starbag-app .simulation-actions button {
  min-height: 40px;
  font-size: 12px;
  white-space: normal;
  line-height: 1.2;
}
.starbag-app .simulation-actions button.is-acknowledged {
  outline: 2px solid rgba(255,234,150,.86);
  background: rgba(23,96,128,.96);
}

/* Keep result copy readable when an error/retry state needs two actions. */
.starbag-app .result-overlay.is-error { border-color: rgba(255,226,145,.72); }
.starbag-app .result-overlay.is-error #resultDetail { max-width: 760px; line-height: 1.5; }

@media (orientation: landscape) and (max-height: 700px) {
  .starbag-app .group-primary-action { min-height: 68px; font-size: 19px; }
  .starbag-app .result-overlay .group-primary-action { min-height: 76px; }
  .starbag-app .simulation-tray { top: 365px; max-height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .starbag-app .aggregate-star,
  .starbag-app .cluster-particle,
  .starbag-app .coop-giant-star { transition-duration: .01ms !important; }
}


/* V79.4: ensure the old Group gradient never leaks through the watercolor CTA. */
.starbag-app button.group-primary-action,
.starbag-app .primary-action.group-primary-action {
  background: transparent url("../assets/buttons/button-normal.png") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.starbag-app button.group-primary-action:active,
.starbag-app button.group-primary-action.is-pressed,
.starbag-app .primary-action.group-primary-action:active,
.starbag-app .primary-action.group-primary-action.is-pressed {
  background: transparent url("../assets/buttons/button-pressed.png") center / 100% 100% no-repeat !important;
}

.starbag-app .aggregate-star { width: 42px; height: 42px; }
.starbag-app .cluster-particle {
  width: var(--particle-size, 28px);
  height: var(--particle-size, 28px);
  transition-delay: var(--particle-delay, 0ms), var(--particle-delay, 0ms), var(--particle-delay, 0ms), var(--particle-delay, 0ms);
}


/* V79.4 facilitator rail: collapsible so the blue team keeps its full play field. */
.starbag-app .facilitator-rail {
  transition: width .2s ease, transform .2s ease, background-color .2s ease;
}
.starbag-app .facilitator-toggle {
  min-height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(2,42,75,.94) !important;
}
.starbag-app .facilitator-toggle .toggle-icon { font-size: 18px; line-height: 1; }
.starbag-app .facilitator-rail.is-collapsed {
  width: 58px;
}
.starbag-app .facilitator-rail.is-collapsed .facilitator-status,
.starbag-app .facilitator-rail.is-collapsed .facilitator-control-action {
  display: none !important;
}
.starbag-app .facilitator-rail.is-collapsed .facilitator-toggle {
  width: 58px;
  padding: 6px !important;
}
.starbag-app .facilitator-rail.is-collapsed .toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.starbag-app[data-state="TEAM_PLAY"] .team-board {
  right: max(4%, calc(var(--safe-right) + 62px));
}
.starbag-app[data-state="TEAM_PLAY"] .simulation-tray {
  right: max(var(--safe-right), 66px);
  max-width: min(250px, 21vw);
}


/* ================================
   V79.5 — gameplay-safe controls + marker camera overlay
   ================================ */
.starbag-app .calibration-visual { position: relative; }
.starbag-app #cameraPreview,
.starbag-app #markerOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.starbag-app #markerOverlay { z-index: 4; pointer-events: none; }
.starbag-app .marker-diagnostics {
  position: absolute;
  z-index: 6;
  left: 14px;
  top: 14px;
  max-width: 72%;
  padding: 7px 10px;
  border-radius: 12px;
  color: #fff7c5;
  background: rgba(2,35,67,.72);
  font-size: 13px;
  line-height: 1.35;
}
.starbag-app .camera-runtime-host {
  /* V79.7: preserve a real Safari video decode surface during gameplay.
     The raw feed is fully occluded by this host cover instead of shrinking the video to 2×2. */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 320px;
  height: 180px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  contain: layout paint size;
}
.starbag-app .camera-runtime-host video {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 320px !important;
  height: 180px !important;
  max-width: none !important;
  max-height: none !important;
  opacity: 1 !important;
  object-fit: cover;
  z-index: 0 !important;
}
.starbag-app .camera-runtime-host::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #073b68;
}
.starbag-app .starbag-screen { position: relative; z-index: 3; }

/* TEAM_PLAY has a real no-overlay gameplay safe area. Collapsed controls live outside it. */
.starbag-app[data-state="TEAM_PLAY"] .facilitator-rail.is-collapsed {
  top: max(8px, env(safe-area-inset-top));
  right: var(--safe-right);
  width: 54px;
  z-index: 46;
}
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="true"] .team-board {
  right: 4% !important;
}
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="true"] .simulation-tray {
  display: none !important;
}

/* When the facilitator deliberately opens controls, reserve a right-side rail instead of covering Blue. */
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .team-board {
  right: max(228px, calc(var(--safe-right) + 218px)) !important;
  transition: right .2s ease;
}
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .facilitator-rail {
  top: 92px;
  right: var(--safe-right);
  width: 204px;
}
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .simulation-tray {
  display: block !important;
  top: min(410px, 52vh);
  right: var(--safe-right) !important;
  bottom: var(--safe-bottom);
  width: 204px !important;
  max-width: 204px !important;
  max-height: calc(100dvh - min(410px, 52vh) - var(--safe-bottom));
  overflow: auto;
}
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .simulation-actions {
  grid-template-columns: 1fr;
}

/* Organic burst still respects the V79.4 minimum-separation layout. */
.starbag-app .cluster-particle {
  transition-timing-function: cubic-bezier(.18,.78,.24,1), cubic-bezier(.18,.78,.24,1), cubic-bezier(.16,.76,.2,1), ease;
}

@media (orientation: landscape) and (max-height: 700px) {
  .starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .facilitator-rail { top: 72px; width: 188px; }
  .starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .team-board { right: 210px !important; }
  .starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .simulation-tray { top: 350px; width: 188px !important; max-width: 188px !important; }
}


/* V79.7 camera privacy: the raw room/person video is hidden in formal Group Mode.
   Use ?debugCamera=1 only for facilitator engineering diagnostics. */
.starbag-app #cameraPreview[hidden] { display: none !important; }
.starbag-app .calibration-visual {
  background: radial-gradient(circle at 50% 42%, rgba(63,148,190,.18), rgba(3,48,82,.24) 48%, rgba(1,31,60,.42) 100%);
}
.starbag-app #markerOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.starbag-app .marker-diagnostics { z-index: 6; }
.starbag-app .camera-privacy-badge { z-index: 6; }
.starbag-app .camera-consent-gate[hidden] { display: none !important; }
.starbag-app .camera-consent-gate {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, var(--safe-top)) max(28px, var(--safe-right)) max(24px, var(--safe-bottom)) max(28px, var(--safe-left));
  background: rgba(0, 28, 54, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.starbag-app .camera-consent-card {
  width: min(700px, 82vw);
  padding: clamp(26px, 4vw, 46px);
  border: 1px solid rgba(224,247,255,.45);
  border-radius: 34px;
  background: rgba(3, 52, 88, .96);
  box-shadow: 0 22px 70px rgba(0, 18, 40, .42);
  color: #f4fbff;
  text-align: center;
}
.starbag-app .camera-consent-card h3 {
  margin: 4px 0 16px;
  color: #ffe99c;
  font-size: clamp(30px, 4vw, 48px);
}
.starbag-app .camera-consent-card p {
  margin: 0 auto 14px;
  max-width: 620px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.55;
}
.starbag-app .camera-consent-card .camera-consent-note {
  color: rgba(233,247,255,.78);
  font-size: clamp(14px, 1.5vw, 18px);
}
.starbag-app .camera-consent-actions {
  width: min(540px, 100%);
  margin: 22px auto 0;
  display: grid;
  gap: 10px;
}
.starbag-app .camera-consent-actions .group-primary-action { min-height: 82px; }
.starbag-app .camera-consent-actions .result-secondary-action { min-height: 52px; }

.starbag-app #cameraPreview.camera-raw-concealed {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  object-fit: cover;
  pointer-events: none !important;
  z-index: 0 !important;
}
.starbag-app .calibration-visual.camera-private-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 42%, rgba(20,92,135,.98), rgba(3,48,82,.99) 55%, rgba(1,31,60,1) 100%);
}
.starbag-app .calibration-visual.camera-private-live .calibration-constellation { z-index: 3; }
.starbag-app .runtime-marker-diagnostics {
  position: absolute;
  left: max(14px, var(--safe-left));
  bottom: max(12px, var(--safe-bottom));
  z-index: 44;
  padding: 7px 11px;
  border: 1px solid rgba(214,244,255,.3);
  border-radius: 999px;
  background: rgba(1,35,66,.84);
  color: #ecfbff;
  font: 700 13px/1.2 Arial, sans-serif;
  letter-spacing: .01em;
  pointer-events: none;
}
.starbag-app .runtime-marker-diagnostics[hidden] { display:none !important; }


/* V79.7 runtime video is kept physically sized but rendered behind the opaque elder stage. */
.starbag-app #activityScreen .elder-stage { z-index: 1; }
.starbag-app .camera-runtime-host { transform: translateZ(0); will-change: transform; }


/* V79.8 runtime/layout recovery. Restore the original gameplay stacking order and
   keep the Safari camera decode surface as an invisible service layer, never as a
   visible rectangle inside the activity screen. */
.starbag-app .starbag-screen { position: absolute; z-index: 2; }
.starbag-app #activityScreen .elder-stage { z-index: auto; }

.starbag-app .camera-runtime-host {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 320px;
  height: 180px;
  overflow: hidden;
  pointer-events: none;
  opacity: .001;
  z-index: 0;
  contain: layout paint size;
  transform: translateZ(0);
  will-change: transform;
  background: transparent !important;
}
.starbag-app .camera-runtime-host::after { display: none !important; content: none !important; }
.starbag-app #cameraRuntimeVideo {
  display: block !important;
  width: 320px !important;
  height: 180px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  opacity: 1 !important;
  pointer-events: none;
}

/* All Group return controls use one safe lower-left position and remain fully inside
   iPad Safari's visual viewport/safe area. */
.starbag-app .shell-link {
  left: max(24px, calc(env(safe-area-inset-left) + 12px));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 10px));
  width: 100px;
  height: 76px;
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 44px);
}
.starbag-app .activity-return-link { z-index: 48; }
.starbag-app .facilitator-return-legacy { display: none !important; }

@media (orientation: landscape) and (max-height: 700px) {
  .starbag-app .shell-link {
    left: max(20px, calc(env(safe-area-inset-left) + 10px));
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
    width: 88px;
    height: 68px;
  }
}

/* Runtime Recovery 2: one active Group entry and a temporary facilitator drawer.
   The shared stage never reserves a persistent right-side layout column. */
.starbag-app .group-entry-lead {
  margin: 8px 0 0;
  color: #e4f8ff;
  font-size: clamp(19px, 2.3vw, 27px);
}
.starbag-app .group-activity-grid {
  width: min(560px, 76vw);
  grid-template-columns: minmax(0, 1fr);
}
.starbag-app .group-activity-card .activity-meta {
  margin-top: 14px;
  color: rgba(229,248,255,.86);
  font-size: clamp(15px, 1.55vw, 19px);
}
.starbag-app .group-activity-card .activity-cta {
  width: fit-content;
  margin: 16px auto 0;
  padding: 8px 22px;
  border: 1px solid rgba(255,242,174,.7);
  border-radius: 999px;
  color: #fff0a8;
  font-size: clamp(16px, 1.65vw, 20px);
}
.starbag-app .group-research-note {
  margin: 18px auto 0;
  color: rgba(220,242,249,.62);
  font-size: clamp(14px, 1.35vw, 17px);
  text-align: center;
}
.starbag-app .setup-form label span strong,
.starbag-app .setup-form label span small { display: block; }
.starbag-app .setup-form label span small {
  margin-top: 3px;
  color: rgba(225,245,251,.72);
  font-size: .75em;
  font-weight: 600;
}

.starbag-app .facilitator-rail {
  position: absolute;
  z-index: 52;
  top: max(82px, calc(env(safe-area-inset-top) + 66px));
  right: 0;
  width: min(310px, 30vw);
  max-height: calc(100dvh - 112px);
  display: grid;
  gap: 10px;
  padding: 12px max(12px, var(--safe-right)) 12px 12px;
  overflow: auto;
  border: 1px solid rgba(217,245,255,.38);
  border-right: 0;
  border-radius: 24px 0 0 24px;
  background: rgba(1,31,60,.94);
  box-shadow: -14px 16px 40px rgba(0,18,42,.32);
}
.starbag-app .facilitator-drawer-content {
  display: grid;
  gap: 8px;
}
.starbag-app .facilitator-rail.is-collapsed {
  width: 50px;
  max-height: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.starbag-app .facilitator-rail.is-collapsed .facilitator-drawer-content { display: none; }
.starbag-app .facilitator-toggle {
  width: 100%;
  min-width: 42px;
}
.starbag-app .facilitator-rail.is-collapsed .facilitator-toggle {
  width: 50px;
  min-height: 62px;
  padding: 0;
  border-radius: 18px 0 0 18px;
  background: rgba(2,42,75,.68);
  opacity: .72;
}
.starbag-app .facilitator-rail.is-collapsed .toggle-label { display: none; }
.starbag-app .facilitator-simulation {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(219,246,255,.24);
}
.starbag-app .facilitator-simulation[hidden] { display: none !important; }
.starbag-app .facilitator-simulation h3 {
  margin: 0 0 6px;
  color: #ffeaa0;
  font-size: 16px;
}
.starbag-app .facilitator-simulation .simulation-actions {
  grid-template-columns: 1fr;
  padding: 0;
}
.starbag-app .facilitator-simulation .simulation-status {
  margin: 0 0 8px;
  color: rgba(229,247,252,.75);
  font: 600 13px/1.4 Arial, sans-serif;
}
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="false"] .team-board,
.starbag-app[data-state="TEAM_PLAY"][data-controls-collapsed="true"] .team-board {
  right: 8% !important;
}

.starbag-app .restart-confirmation[hidden] { display: none !important; }
.starbag-app .restart-confirmation {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,24,48,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.starbag-app .restart-confirmation-card {
  width: min(560px, 82vw);
  padding: 30px;
  border: 1px solid rgba(223,248,255,.48);
  border-radius: 30px;
  background: rgba(3,52,88,.98);
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,15,38,.5);
}
.starbag-app .restart-confirmation-card h2 {
  margin: 0 0 24px;
  color: #fff0a8;
  font-size: clamp(26px, 3.4vw, 40px);
}
.starbag-app .restart-confirmation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.starbag-app .raise-diagnostic[hidden] { display: none !important; }
.starbag-app .raise-diagnostic {
  position: absolute;
  z-index: 70;
  left: max(14px, var(--safe-left));
  bottom: max(12px, var(--safe-bottom));
  width: min(420px, 42vw);
  color: #eafaff;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.starbag-app .raise-diagnostic details {
  padding: 8px 10px;
  border: 1px solid rgba(218,246,255,.35);
  border-radius: 14px;
  background: rgba(0,24,48,.92);
}
.starbag-app .raise-diagnostic pre {
  max-height: 72vh;
  margin: 8px 0 0;
  overflow: auto;
  white-space: pre-wrap;
}
.starbag-app #teamDiagnosticPanel {
  left: auto;
  right: max(14px, var(--safe-right));
  width: min(520px, 48vw);
}

@media (orientation: landscape) and (max-height: 700px) {
  .starbag-app .facilitator-rail { top: 72px; width: min(286px, 31vw); }
  .starbag-app .facilitator-rail.is-collapsed { width: 46px; }
  .starbag-app .facilitator-rail.is-collapsed .facilitator-toggle { width: 46px; min-height: 54px; }
}

/* 15.2 Bag Art Swap 1 — presentation only; runtime bag geometry/logic unchanged. */
.starbag-app .star-bag .bag-handle,
.starbag-app .star-bag .bag-body {
  opacity: 0;
  pointer-events: none;
}
.starbag-app .star-bag .bag-art {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -4%;
  display: block;
  object-fit: contain;
  transform: translateX(-50%);
  transform-origin: 50% 88%;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.starbag-app .coop-bag .bag-art-coop {
  width: 112%;
  height: 154%;
}
.starbag-app .team-bag .bag-art-team {
  width: 92%;
  height: 160%;
}
.starbag-app .star-bag.is-catching .bag-art {
  animation: bagArtGlowUser .55s ease-out;
}
@keyframes bagArtGlowUser {
  50% { filter: drop-shadow(0 0 22px rgba(255,240,164,.82)); }
}


/* Language 3 / simulation QA: bag compositor + pointer presentation stability only. */
.starbag-app .star-bag {
  transform: translateX(-50%);
  will-change: left;
  backface-visibility: hidden;
}
.starbag-app .star-bag.is-expanded {
  transform: translateX(-50%) scaleX(1.4) scaleY(1.06);
}
.starbag-app .star-bag .bag-art {
  backface-visibility: hidden;
}