/* /media/duo/live: the iPhone Duo simulator. One screenshot fills the safe
   area at its real aspect; nothing scrolls, zooms or selects. */
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body.duo-live {
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; color: #fff;
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}
#duo {
  position: fixed; height: auto; max-height: 100dvh;
  top: env(safe-area-inset-top, 0); right: env(safe-area-inset-right, 0);
  bottom: env(safe-area-inset-bottom, 0); left: env(safe-area-inset-left, 0);
}
#duo-shot { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#duo-shot:not([src]) { visibility: hidden; }

/* state + screen name; fades out after 2 s (the script toggles .show) */
.duo-label {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0;
  padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: rgba(255, 255, 255, .9);
  white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity .6s ease; pointer-events: none;
}
.duo-label.show { opacity: 1; transition: opacity .15s ease; }

/* long-press menu: force a state for testing (Auto follows the window) */
.duo-menu {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  min-width: 220px; padding: 6px; border-radius: 14px;
  background: rgba(40, 40, 44, .96); box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}
.duo-menu[hidden] { display: none; }
.duo-menu button {
  display: block; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: #fff; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
}
.duo-menu button:hover, .duo-menu button:focus-visible { background: rgba(255, 255, 255, .12); outline: none; }
.duo-menu button[aria-checked="true"]::after { content: "✓"; float: right; color: #f07a3a; }
.duo-menu hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .15); margin: 4px 6px; }
.duo-menu .duo-hint { margin: 6px 12px 4px; color: rgba(255, 255, 255, .55); font-size: 12px; }
.duo-noscript { padding: 24px; }
.duo-noscript a { color: #f07a3a; }

/* how-to: the first screen; one tap closes it */
.duo-help { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .82); padding: 16px; }
.duo-help[hidden] { display: none; }
.duo-help-card { max-width: 420px; padding: 20px 22px; border-radius: 16px; background: rgba(40, 40, 44, .96); font-size: 15px; line-height: 1.45; }
.duo-help h1 { font-size: 19px; margin: 0 0 10px; }
.duo-help ol { margin: 0 0 12px; padding-left: 1.3em; }
.duo-help li { margin: 4px 0; }
.duo-a2hs { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(240, 122, 58, .18); }
.duo-standalone .duo-a2hs { display: none; }
.duo-help-tap { margin: 0; color: rgba(255, 255, 255, .6); font-size: 13px; text-align: center; }