/* Watching comes first on a phone. The full controls live in one native sheet. */
body.stream-opening .topbar,
body.stream-opening .scene-heading,
body.stream-opening .intro,
body.stream-opening .footer {
  visibility: hidden;
}
#watch-dock[hidden],
#watch-sheet:not([open]) {
  display: none;
}
#watch-dock {
  position: fixed;
  z-index: 20;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
#watch-dock button {
  pointer-events: auto;
  min-height: 46px;
  border: 1px solid #b8d6aa66;
  border-radius: 12px;
  background: #102b22ed;
  color: #f0f6de;
  padding: 0 12px;
  font:
    600 12px Arial,
    sans-serif;
  box-shadow: 0 4px 16px #0003;
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#watch-dock #feed-toggle {
  margin: 0;
  flex: 0 1 138px;
  background: #d3e7a8;
  color: #21391f;
  width: 138px;
}
#watch-dock #motion-toggle {
  flex: 0 0 46px;
  width: 46px;
  padding: 0;
}
#watch-dock #motion-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#watch-dock #motion-toggle[aria-pressed='true'] svg {
  display: none;
}
#watch-dock #motion-toggle[aria-pressed='true']::before {
  content: '▶';
  font-size: 16px;
}
#watch-dock svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  stroke-width: 1.5;
}
#watch-dock #music-quick {
  display: none;
}
#watch-toggle {
  flex: 0 1 140px;
}
#watch-sheet {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  width: min(620px, 100%);
  max-width: 100%;
  max-height: 82dvh;
  padding: 0;
  border: 1px solid #83977e;
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #10251ff7;
  color: #e4eedc;
  box-shadow: 0 -12px 60px #0006;
  overflow: auto;
  overscroll-behavior: contain;
}
#watch-sheet::backdrop {
  background: #04110d55;
}
.watch-sheet-header {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #10251f;
  border-bottom: 1px solid #c8dfb52b;
}
.watch-sheet-header h2 {
  font:
    600 18px Arial,
    sans-serif;
  letter-spacing: 0;
  margin: 0;
}
body.mobile-watch #watch-sheet .watch-sheet-header h2 {
  display: block;
  font-size: 18px;
  letter-spacing: 0;
}
#watch-close {
  min-width: 64px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #a7bf8866;
  color: #e1edbc;
  background: #244333;
  cursor: pointer;
}
.watch-sheet-content {
  display: grid;
  gap: 20px;
  padding: 16px 16px max(24px, env(safe-area-inset-bottom));
}
.watch-sheet-content section {
  min-width: 0;
}
.watch-sheet-content h3 {
  margin: 0 0 10px;
  font:
    600 12px Arial,
    sans-serif;
  color: #b8c8a5;
  letter-spacing: 1px;
  text-transform: uppercase;
}
#watch-share {
  grid-column: 1 / -1;
}
#watch-stream {
  grid-column: 1 / -1;
}
#watch-stream .share-action {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}
#stream-toggle {
  background: #d3e7a8;
  color: #21391f;
}
.stream-description {
  color: #b8c8a5;
  font:
    13px/1.5 Arial,
    sans-serif;
  margin: 8px 0 12px;
}
.music-volume {
  display: flex;
  justify-content: space-between;
  font:
    12px Arial,
    sans-serif;
  margin-top: 18px;
}
#music-volume {
  width: 100%;
  min-height: 44px;
  accent-color: #d3e7a8;
}
body.stream-view .topbar,
body.stream-view .weather-badge,
body.stream-view .bug-energy {
  display: none;
}
body.stream-view .bug-energy[data-feeling='friendly']:not([hidden]),
body.stream-view .bug-energy[data-feeling='annoyed']:not([hidden]) {
  display: block;
  width: 76px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}
body.stream-view .bug-energy > :not(.bug-feeling),
body.stream-view .bug-energy::after,
body.stream-view .bug-energy::before {
  display: none;
}
body.stream-view #watch-dock {
  left: auto;
  right: max(12px, env(safe-area-inset-right));
}
body.stream-view #watch-dock #watch-toggle,
body.stream-view #watch-dock #music-quick {
  display: flex;
  flex: none;
  min-height: 48px;
  background: #102b22bf;
}
body.stream-view #watch-dock #music-quick[aria-pressed='true'] {
  background: #d3e7a8;
  color: #21391f;
}
body.stream-view #director-caption {
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(620px, calc(100% - 36px));
  box-sizing: border-box;
  overflow-wrap: anywhere;
  text-align: center;
  font:
    clamp(16px, 1.4vw, 28px)/1.4 Arial,
    sans-serif;
  padding: 10px 16px;
  background: #0e2019de;
  text-shadow: 0 1px 2px #0008;
  border-left: 3px solid #cbe795;
}
/* The same landscape source can be center-cropped to 9:16 by YouTube. */
@media (min-width: 900px) and (min-height: 500px) {
  body.stream-view #director-caption {
    max-width: min(620px, calc(56.25vh - 48px));
    bottom: max(28px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 899px), (max-height: 499px) {
  body.stream-view #director-caption {
    bottom: max(70px, calc(env(safe-area-inset-bottom) + 60px));
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
}
#watch-share [hidden] {
  display: none;
}
.share-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.share-actions > button {
  flex: 1;
  justify-content: center;
}
.share-action {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #a7bf8866;
  border-radius: 12px;
  background: #244333;
  color: #f0f6de;
  text-decoration: none;
  cursor: pointer;
  font:
    600 14px Arial,
    sans-serif;
}
.share-action:hover {
  background: #31533f;
}
.share-action:disabled {
  opacity: 0.6;
  cursor: wait;
}
.share-action svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#share-native {
  background: #d3e7a8;
  color: #21391f;
}
#share-native:hover {
  background: #e0edc1;
}
#share-status {
  margin: 8px 0;
  color: #d3e7a8;
  font:
    12px/1.5 Arial,
    sans-serif;
}
#share-status:empty {
  display: none;
}
#share-manual {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 8px 0;
  padding: 8px 12px;
  border: 1px solid #a7bf8866;
  border-radius: 8px;
  background: #10251f;
  color: #f0f6de;
  font:
    14px Arial,
    sans-serif;
}
.share-x-mark {
  font-size: 24px;
  line-height: 1;
}
.share-x-arrow {
  margin-left: auto;
  font-size: 20px;
}
#share-x-note {
  margin: 8px 0 0;
  color: #b8c8a5;
  font:
    12px/1.5 Arial,
    sans-serif;
}
body.mobile-watch .intro,
body.mobile-watch .scene-heading,
body.mobile-watch .side-note,
body.mobile-watch .footer {
  display: none;
}
body.mobile-watch .topbar {
  padding: max(8px, env(safe-area-inset-top)) 12px 0;
  height: 48px;
  pointer-events: none;
}
body.mobile-watch .topbar .live-label {
  display: none;
}
body.mobile-watch .brand {
  font-size: 10px;
  gap: 8px;
}
body.mobile-watch .brand-mark {
  width: 30px;
  height: 30px;
}
body.mobile-watch .weather-badge {
  right: max(10px, env(safe-area-inset-right));
  top: max(8px, env(safe-area-inset-top));
  width: auto;
  min-width: 78px;
  height: 44px;
  padding: 5px 8px;
  grid-template-columns: 22px auto;
}
body.mobile-watch .weather-badge #weather-detail {
  display: none;
}
body.mobile-watch .weather-badge strong {
  font-size: 8px;
}
body.mobile-watch #weather-icon {
  font-size: 20px;
}
body.mobile-watch .bug-energy,
body.mobile-watch .bug-energy[data-compact='true'] {
  width: 86px;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 6px;
  background: #102b22c9;
}
body.mobile-watch .bug-energy-label,
body.mobile-watch .bug-energy[data-compact='true'] .bug-energy-label {
  font:
    600 11px Arial,
    sans-serif;
  margin: 0 0 3px;
  letter-spacing: 0;
}
body.mobile-watch .bug-energy-label b {
  font:
    9px Arial,
    sans-serif;
}
body.mobile-watch .bug-energy .bug-identity,
body.mobile-watch .bug-energy .bug-reaction {
  display: none;
}
body.mobile-watch .bug-energy .bug-energy-track {
  height: 2px;
}
body.mobile-watch .bug-feeling {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 24px;
  margin: 0;
}
body.mobile-watch .neighbor-heart {
  display: none;
}
body.watch-menu-open .bug-energy {
  visibility: hidden;
}
body.mobile-watch #watch-sheet .colony-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 6px;
}
body.mobile-watch #watch-sheet .colony-tabs {
  width: 100%;
}
body.mobile-watch #watch-sheet .colony-picker button {
  min-height: 44px;
  flex: 1 1 70px;
  padding: 8px;
  font-size: 12px;
}
body.mobile-watch #watch-sheet .character-note {
  position: static;
  display: block;
  width: auto;
  max-width: none;
  margin: 10px 0 0;
  padding: 12px;
  text-align: left;
}
body.mobile-watch #watch-sheet .character-note > span {
  display: block;
  font-size: 12px;
}
body.mobile-watch #watch-sheet #friendship-panel {
  transform: none;
  position: static;
  width: auto;
  max-width: none;
  max-height: none;
}
body.mobile-watch #watch-sheet .habitat-landmarks {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  max-height: none;
  width: auto;
  gap: 6px;
  padding: 0;
  margin: 0;
  mask-image: none;
}
body.mobile-watch #watch-sheet .habitat-landmarks .landmark-caption {
  display: none;
}
body.mobile-watch #watch-sheet .habitat-landmarks button {
  display: flex;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  margin: 0;
  font-size: 10px;
}
body.mobile-watch #watch-sheet .controls {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: auto;
  margin: 0;
  gap: 6px;
}
body.mobile-watch #watch-sheet .controls button {
  min-height: 44px;
}
body.mobile-watch #watch-sheet .state-line,
body.mobile-watch #watch-sheet .instinct-line {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 10px 0;
}
body.mobile-watch #watch-sheet .feed-note,
body.mobile-watch #watch-sheet .rumble-bond,
body.mobile-watch #watch-sheet .memory-note {
  position: static;
  display: block;
  margin: 8px 0;
  font-size: 9px;
}
#director-caption {
  position: fixed;
  z-index: 8;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #e3edce;
  background: #0e281ec7;
  border-radius: 10px;
  padding: 6px 12px;
  max-width: calc(100% - 24px);
  font:
    11px Arial,
    sans-serif;
  text-align: center;
  pointer-events: none;
}
#director-caption:empty {
  display: none;
}
#director-caption[data-dialogue='true'] {
  border-left-color: var(--speaker-color, #cbe795);
  color: #fff9ed;
}
.dialogue-option {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  font:
    14px/1.4 Arial,
    sans-serif;
}
.dialogue-option input {
  width: 20px;
  height: 20px;
  accent-color: #cbe795;
}
body.mobile-watch:not(.stream-view) #director-caption {
  bottom: max(65px, calc(env(safe-area-inset-bottom) + 55px));
  font-size: 10px;
  padding: 5px 10px;
}
body.watch-menu-open #director-caption {
  display: none;
}
.fallback #director-caption,
.fallback #director-toggle {
  display: none;
}
@media (max-height: 500px) {
  #watch-sheet {
    max-height: 94dvh;
  }
  .watch-sheet-content {
    grid-template-columns: 1fr 1fr;
  }
  #watch-settings,
  #watch-details {
    grid-column: auto;
  }
}
@media (max-width: 360px) {
  #watch-dock {
    gap: 4px;
  }
  #watch-dock button {
    padding: 0 8px;
    font-size: 11px;
  }
  #watch-dock #feed-toggle {
    width: 126px;
  }
}

#load-error:not([hidden]) {
  position: fixed;
  z-index: 100;
  inset: auto 20px 24px;
  margin: auto;
  max-width: 500px;
  padding: 22px;
  border: 1px solid #cbe795;
  border-radius: 12px;
  background: #13291f;
  color: #edf3dc;
  display: grid;
  gap: 10px;
  font:
    16px/1.5 Arial,
    sans-serif;
}
#load-error a {
  color: #d3e7a8;
  padding: 10px 0;
}

/* Clean encoded picture, including opening/error states. Captions and scene
   labels remain visible; ordinary website controls retain their existing style. */
html[data-broadcast='true']
  :is(button, a, input, select, textarea, summary, dialog, [role='button'], #watch-dock, .topbar) {
  display: none !important;
}
html[data-broadcast='true'] #director-caption {
  display: block;
}
html[data-broadcast='true'] #director-caption:empty {
  display: none;
}
html[data-broadcast='true'] #habitat {
  cursor: none;
}