:root{
  color-scheme:dark;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cream:#f2ead3;--ink:#07110c;--gold:#dfc36f;--muted:#bac1b9;--panel:rgba(6,15,10,.78);
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050a07;color:#f5f2e8}button,a{font:inherit}.app{width:100%;height:100%;height:100dvh;position:relative;overflow:hidden}
.landing{position:absolute;inset:0;z-index:5;padding:max(24px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left));display:flex;flex-direction:column;background:radial-gradient(circle at 52% 21%,rgba(35,79,50,.9),transparent 34%),linear-gradient(180deg,#07110c 0,#050907 100%)}
.brand,.mini-brand{font-size:11px;letter-spacing:.21em;font-weight:900}.brand span,.mini-brand span{opacity:.48;margin-left:.75em}.landing-copy{margin:auto 0 16px}.eyebrow{font-size:10px;letter-spacing:.2em;color:var(--gold);font-weight:900;margin:0 0 13px}.landing h1{font-size:clamp(38px,10vw,74px);line-height:.94;letter-spacing:-.052em;max-width:760px;margin:0}.sub{max-width:590px;margin:18px 0 0;color:var(--muted);font-size:clamp(14px,2.4vw,18px);line-height:1.55}
.target-preview{position:absolute;right:clamp(22px,6vw,86px);top:50%;transform:translateY(-46%);width:min(27vw,260px);opacity:.17;display:grid;gap:12px;text-align:center;font-size:9px;letter-spacing:.2em}.target-preview img{width:100%;border-radius:22px;background:white;padding:10px}.landing-actions{width:min(500px,100%);display:grid;gap:10px}.btn{min-height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.14);padding:0 18px;text-decoration:none;display:flex;align-items:center;justify-content:center;font-weight:850;letter-spacing:-.01em;cursor:pointer}.btn.primary{background:var(--cream);border-color:var(--cream);color:#132017}.btn.ghost{background:rgba(255,255,255,.035);color:#f4f2e9}.privacy{font-size:11px;line-height:1.5;color:#8f9991;margin:2px 4px 0}.privacy.ready{color:#b9d8bd}.privacy.missing{color:#e2c77d}
.ar-view,.ar-host{position:absolute;inset:0;width:100%;height:100%;height:100dvh;overflow:hidden}.ar-view{background:#000}.ar-host{z-index:0}.ar-host>video{object-fit:cover!important}.ar-host,.ar-host canvas{touch-action:none}.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at center,transparent 46%,rgba(0,0,0,.12) 74%,rgba(0,0,0,.38) 100%)}
.ar-topbar{position:absolute;z-index:12;top:0;left:0;right:0;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;pointer-events:none}.mini-brand{background:rgba(3,9,6,.5);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:10px 13px}.icon-btn{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.13);background:rgba(3,9,6,.53);backdrop-filter:blur(10px);color:white;font-size:25px;line-height:1;display:grid;place-items:center;cursor:pointer}
.scan-guide{position:absolute;z-index:9;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 22px 180px;text-shadow:0 1px 12px rgba(0,0,0,.8)}.scan-guide strong{font-size:18px;margin-top:18px}.scan-guide small{font-size:12px;color:#d1d6d1;margin-top:6px}.target-frame{position:relative;width:min(64vw,280px);aspect-ratio:1;border-radius:24px;background:rgba(0,0,0,.025);display:grid;place-items:center}.poopo-head-guide{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(5,18,10,.28);border:1px solid rgba(242,234,211,.34);box-shadow:0 10px 34px rgba(0,0,0,.18);overflow:visible}.poopo-head-guide img{position:relative;z-index:2;width:82px;height:82px;border-radius:50%;object-fit:cover;opacity:.92;filter:none;mix-blend-mode:normal;box-shadow:0 5px 16px rgba(0,0,0,.18)}.poopo-head-pulse{position:absolute;z-index:1;inset:-8px;border-radius:50%;border:1px solid rgba(242,234,211,.28);animation:poopoHeadGuidePulse 2.2s ease-out infinite}.target-frame i{position:absolute;width:36px;height:36px;border-color:rgba(242,234,211,.92);border-style:solid}.target-frame i:nth-of-type(1){left:0;top:0;border-width:2px 0 0 2px;border-radius:14px 0 0 0}.target-frame i:nth-of-type(2){right:0;top:0;border-width:2px 2px 0 0;border-radius:0 14px 0 0}.target-frame i:nth-of-type(3){left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 14px}.target-frame i:nth-of-type(4){right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 14px 0}@keyframes poopoHeadGuidePulse{0%{transform:scale(.88);opacity:0}24%{opacity:.65}72%{opacity:.16}100%{transform:scale(1.28);opacity:0}}.loading{position:absolute;z-index:20;inset:0;background:rgba(3,8,5,.77);backdrop-filter:blur(12px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px}.loading strong{font-size:19px;margin-top:16px}.loading small{margin-top:6px;color:#aeb7af}.spinner{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.14);border-top-color:var(--cream);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.found-note{position:absolute;z-index:11;top:max(74px,calc(env(safe-area-inset-top) + 58px));left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.15em;text-transform:uppercase;background:rgba(10,24,15,.68);border:1px solid rgba(187,220,190,.16);backdrop-filter:blur(12px);padding:8px 11px;border-radius:999px;color:#c8dfc9;pointer-events:none}.dialogue{position:absolute;z-index:11;left:50%;bottom:max(150px,calc(env(safe-area-inset-bottom) + 132px));transform:translateX(-50%);max-width:min(84vw,460px);background:rgba(5,13,8,.7);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:11px 15px;box-shadow:0 12px 42px rgba(0,0,0,.25);pointer-events:none}.dialogue p{margin:0;text-align:center;font-size:14px;line-height:1.35}.ar-bottom{position:absolute;z-index:12;left:0;right:0;bottom:0;padding:12px max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;pointer-events:none}.ar-bottom .btn{pointer-events:auto;width:min(480px,100%)}.cta{box-shadow:0 12px 40px rgba(0,0,0,.34)}.cta.pulse{animation:ctaPulse .62s ease both}@keyframes ctaPulse{50%{transform:scale(1.035);box-shadow:0 12px 50px rgba(223,195,111,.28)}}.tap-hint{font-size:10px;letter-spacing:.04em;margin:8px 0 0;color:#d9dfd9;text-shadow:0 1px 8px #000}
.error-panel{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100% - 32px));padding:25px;border-radius:24px;background:rgba(7,16,10,.94);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);box-shadow:0 24px 80px rgba(0,0,0,.45)}.error-panel>strong{font-size:21px}.error-panel p{color:#b9c1ba;line-height:1.55}.error-actions{display:grid;gap:9px;margin-top:19px}.debug{position:absolute;z-index:40;top:70px;left:8px;max-width:calc(100% - 16px);max-height:36vh;overflow:auto;background:rgba(0,0,0,.76);color:#c9ffcf;padding:9px;border-radius:8px;font:10px/1.35 ui-monospace,monospace;white-space:pre-wrap;pointer-events:none}
[hidden]{display:none!important}
@media(max-width:760px){.target-preview{display:none}.landing-copy{margin-top:auto}.landing{padding-top:max(20px,env(safe-area-inset-top))}.landing h1{max-width:560px}.scan-guide{padding-bottom:170px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}


/* AR01 Camera Focus B */
.camera-focus-ring {
  position: absolute;
  z-index: 18;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 2px solid rgba(255,248,216,.92);
  border-radius: 16px;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.25);
  box-shadow: 0 0 0 1px rgba(7,17,12,.2), inset 0 0 20px rgba(255,248,216,.08);
}
.camera-focus-ring.show { animation: poopi-focus-ring .72s ease-out both; }
@keyframes poopi-focus-ring {
  0% { opacity: 0; transform: scale(1.35); }
  18% { opacity: 1; }
  60% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(.96); }
}

/* AR01 Camera Select C: no visual changes; camera selection/manual focus patch only. */


/* AR01 Main Camera D */
.ar-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
}
.lens-btn{
  min-height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  padding:0 13px;
  background:rgba(3,9,6,.53);
  backdrop-filter:blur(10px);
  color:#fff;
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
  cursor:pointer;
}
.lens-btn:active{transform:scale(.97)}

/* AR02 Standee Dual Target F */
.target-preview img,.target-frame img{object-fit:contain}
.found-note{box-shadow:0 12px 34px rgba(0,0,0,.22)}
.dialogue{background:rgba(5,13,8,.62);border-color:rgba(242,234,211,.14)}
@media(max-width:480px){.ar-bottom{padding-left:14px;padding-right:14px}}
\n/* AR03 Spawn-Latch G */\nbody.poopo-latched .scan-guide,\nbody.poopo-latched .target-frame{opacity:0!important;pointer-events:none!important}\nbody.poopo-latched .tap-hint{opacity:.92}\n
/* AR03 Camera Latch H: true camera-child persistence after summon. */

/* AR04 Persistent Overlay I: persistent 3D is rendered in an independent scene. */


/* AR04 Stable Companion J */
body.poopo-latched .lens-btn{
  display:none !important;
}

/* Debug should not cover most of Poopo while testing. */
#debug{
  max-height:26dvh !important;
  overflow:auto !important;
  font-size:9px !important;
  line-height:1.28 !important;
  background:rgba(0,0,0,.76) !important;
}

body.poopo-latched #debug{
  opacity:.82;
}

@media (max-height:720px){
  #debug{max-height:22dvh !important}
}


/* AR04 Stable Drag L */
body.poopo-latched .ar-host,
body.poopo-latched .ar-host canvas{
  touch-action:none !important;
}
body.poopo-dragging .ar-host canvas{
  cursor:grabbing !important;
}
body.poopo-latched .tap-hint{
  font-size:10px;
  opacity:.94;
}


/* AR04 Scale Fix M */
body.poopo-latched .tap-hint{
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}

/* AR04 Smooth Tap N: animation transition refinement only. */


/* AR04 Aesthetic Spawn O
   Visual-only summon polish. Working persistence / scale / drag remain intact. */


/* AR05 Production Lock P */
.target-preview{display:none !important}

/* Public AR is intentionally quiet: one clear action, one clear instruction. */
.landing-copy{
  max-width:680px;
}
.landing .sub{
  max-width:520px;
}
.privacy{
  min-height:1.25em;
}

/* Hide engineering lens control in production.
   Debug JS may explicitly unhide it while ?debug=1 is active. */
body:not(.debug-mode) .lens-btn{
  display:none;
}

.scan-guide strong{
  font-size:19px;
  letter-spacing:-.015em;
}
.scan-guide small{
  max-width:320px;
  line-height:1.45;
}

.ar-bottom{
  padding-bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px));
}
.ar-bottom .cta{
  min-height:58px;
}
.dialogue{
  bottom:max(164px,calc(env(safe-area-inset-bottom) + 145px));
}

/* Keep UI clear on short landscape phones. */
@media (orientation:landscape) and (max-height:520px){
  .ar-topbar{
    padding-top:max(8px,env(safe-area-inset-top));
  }
  .scan-guide{
    padding:58px 140px 76px;
  }
  .target-frame{
    width:min(32vh,190px);
  }
  .scan-guide strong{
    margin-top:10px;
    font-size:16px;
  }
  .dialogue{
    left:auto;
    right:max(16px,env(safe-area-inset-right));
    bottom:max(76px,calc(env(safe-area-inset-bottom) + 66px));
    transform:none;
    max-width:280px;
  }
  .ar-bottom{
    align-items:flex-end;
    padding-left:46%;
  }
  .ar-bottom .btn{
    width:min(360px,100%);
  }
}

/* Debug remains developer-only and compact. */
.debug{
  max-height:26dvh !important;
}


/* AR06 Interaction Q */
body.poopo-latched .tap-hint{
  max-width:420px;
  padding-inline:10px;
}
@media(max-width:480px){
  body.poopo-latched .tap-hint{
    font-size:9px;
    letter-spacing:.01em;
  }
}


/* AR07 Capture Mode R */
.capture-btn svg{
  width:20px;
  height:20px;
  fill:currentColor;
}
.capture-btn:not([hidden]){
  display:grid;
}
.capture-btn:disabled{
  opacity:.45;
}
.capture-flash{
  position:absolute;
  inset:0;
  z-index:30;
  pointer-events:none;
  background:#fff;
  opacity:0;
}
.capture-flash.fire{
  animation:poopoCaptureFlash .34s ease-out both;
}
@keyframes poopoCaptureFlash{
  0%{opacity:0}
  18%{opacity:.84}
  100%{opacity:0}
}

.capture-modal{
  position:absolute;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:
    max(18px,env(safe-area-inset-top))
    max(16px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left));
  background:rgba(3,8,5,.78);
  backdrop-filter:blur(18px);
}
.capture-modal[hidden]{display:none !important}

.capture-sheet{
  width:min(520px,100%);
  max-height:100%;
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  background:rgba(8,17,11,.95);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  padding:14px;
}
.capture-sheet-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:5px 4px 13px;
}
.capture-sheet-head strong{
  display:block;
  font-size:17px;
  margin-top:4px;
}
.capture-kicker{
  display:block;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
  color:#d7c47d;
}
.capture-close{
  flex:0 0 auto;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:23px;
}
.capture-preview-wrap{
  overflow:hidden;
  border-radius:17px;
  background:#030604;
  border:1px solid rgba(255,255,255,.08);
}
.capture-preview-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-height:62dvh;
  object-fit:contain;
  background:#000;
}
.capture-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  padding-top:12px;
}
.capture-actions .btn{
  width:100%;
}

@media(max-width:480px){
  .capture-sheet{
    border-radius:20px;
    padding:11px;
  }
  .capture-actions{
    grid-template-columns:1fr;
  }
  .capture-preview-wrap img{
    max-height:57dvh;
  }
}

@media(orientation:landscape) and (max-height:560px){
  .capture-sheet{
    width:min(760px,96vw);
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
    grid-template-areas:
      "preview head"
      "preview actions";
    gap:12px;
    align-items:start;
  }
  .capture-sheet-head{grid-area:head}
  .capture-preview-wrap{grid-area:preview}
  .capture-actions{
    grid-area:actions;
    grid-template-columns:1fr;
  }
  .capture-preview-wrap img{max-height:82dvh}
}


/* AR10 QR Direct Launch W */
body.direct-launch .landing{justify-content:center;background:radial-gradient(circle at 50% 42%,rgba(38,83,53,.92),transparent 34%),linear-gradient(180deg,#07110c,#040806)}
body.direct-launch .landing .brand{position:absolute;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left))}
body.direct-launch .landing-copy{margin:auto;width:min(620px,100%);text-align:center}
body.direct-launch .landing h1{margin-inline:auto;font-size:clamp(34px,9vw,66px)}
body.direct-launch .landing .sub{margin:15px auto 0;max-width:470px}
body.direct-launch .landing-actions{position:absolute;left:50%;bottom:max(25px,calc(env(safe-area-inset-bottom) + 18px));transform:translateX(-50%);width:min(480px,calc(100% - 36px))}
body.direct-launch:not(.manual-launch-fallback) .landing-actions .btn{display:none!important}
body.direct-launch:not(.manual-launch-fallback) .privacy{text-align:center;color:#b8c5ba}
body.manual-launch-fallback .landing{justify-content:flex-start}
body.manual-launch-fallback .landing-copy{margin:auto 0 16px;text-align:left}
body.manual-launch-fallback .landing h1{margin-inline:0}
body.manual-launch-fallback .landing .sub{margin-left:0}
body.manual-launch-fallback .landing-actions{position:static;transform:none;width:min(500px,100%)}
body.manual-launch-fallback #start-ar:not([hidden]),body.manual-launch-fallback #landing-site-link:not([hidden]){display:flex}
body:not(.debug-mode) .scan-guide .target-frame{width:min(60vw,270px);aspect-ratio:3/4}
body:not(.debug-mode) .scan-guide .target-frame img{width:86%;height:86%}


/* AR12 Y — Interaction safety + first-person Poopo photo UX */
body.poopo-latched .ar-bottom{gap:10px}
.photo-dock{pointer-events:none;width:min(360px,calc(100vw - 32px));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:10px 12px 11px;border:1px solid rgba(255,255,255,.10);border-radius:22px;background:rgba(4,12,7,.48);backdrop-filter:blur(14px);box-shadow:0 14px 46px rgba(0,0,0,.30)}
.photo-dock[hidden]{display:none!important}
.photo-dock-kicker{font-size:8px;line-height:1;font-weight:950;letter-spacing:.18em;color:#dfc36f}
.photo-dock strong{color:#fff;font-size:13px;line-height:1.2}
.photo-dock small{margin-top:1px;color:rgba(238,243,238,.72);font-size:9px}
.photo-shutter{pointer-events:auto;width:70px;height:70px;margin:5px 0 2px;padding:0;display:grid!important;place-items:center;border:2px solid rgba(255,255,255,.94);border-radius:50%;background:rgba(3,9,6,.38);color:#102017;box-shadow:0 0 0 5px rgba(255,255,255,.13),0 12px 35px rgba(0,0,0,.38);backdrop-filter:blur(10px);cursor:pointer}
.photo-shutter[hidden]{display:none!important}.photo-shutter:active{transform:scale(.94)}
.photo-shutter-ring{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#f2ead3}
.photo-shutter svg{width:23px;height:23px;fill:currentColor}
body.poopo-latched .ar-bottom .cta{width:min(360px,calc(100vw - 32px));min-height:52px}
body.poopo-latched .tap-hint{margin-top:0}
body.poopo-latched .dialogue{bottom:max(316px,calc(env(safe-area-inset-bottom) + 296px))}
.capture-sheet{text-align:center}.capture-sheet-head{text-align:left}
.capture-actions{display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:14px}
.capture-actions .capture-save-primary{width:min(360px,100%);min-height:58px;font-size:15px}
.capture-save-note{color:#aeb8b0;font-size:10px;line-height:1.35}
.capture-actions .capture-share-secondary{width:min(250px,100%);min-height:46px}
@media(max-width:480px){.photo-dock{width:min(330px,calc(100vw - 28px));padding:9px 10px 10px}.photo-shutter{width:66px;height:66px}.photo-shutter-ring{width:50px;height:50px}body.poopo-latched .dialogue{bottom:max(306px,calc(env(safe-area-inset-bottom) + 286px));max-width:min(88vw,420px)}}


/* ==========================================================
   AR15 AA — Photo-op mode + branded capture
   ========================================================== */
.ar-view{touch-action:none}
.photo-op-toolbar{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.photo-op-toggle{
  pointer-events:auto;
  min-height:34px;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#fff9e5;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.20);
}
.photo-op-toggle:active{transform:scale(.97)}
.photo-op-toggle[aria-pressed="true"],
body.photo-arrange-mode .photo-op-toggle{
  border-color:rgba(223,195,111,.45);
  background:rgba(223,195,111,.16);
  color:#fff;
  box-shadow:0 10px 30px rgba(223,195,111,.14);
}
.photo-op-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.20);
  color:rgba(237,242,237,.88);
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.08);
}
body.photo-arrange-mode .photo-dock{
  border-color:rgba(223,195,111,.22);
  background:rgba(7,16,10,.62);
  box-shadow:0 16px 48px rgba(0,0,0,.35),0 0 0 1px rgba(223,195,111,.08) inset;
}
body.photo-arrange-mode .photo-shutter{
  border-color:rgba(223,195,111,.95);
  box-shadow:0 0 0 5px rgba(223,195,111,.13),0 12px 35px rgba(0,0,0,.40);
}
body.photo-arrange-mode .tap-hint{
  color:#f3e3ac;
}
@media(max-width:760px){
  .photo-op-toolbar{gap:6px}
  .photo-op-toggle{font-size:10px;padding:7px 12px}
  .photo-op-status{font-size:9px}
}


/* ==========================================================
   AR16 AB — reliable photo framing controls
   ========================================================== */
.photo-op-controls{
  pointer-events:auto;
  width:100%;
  display:grid;
  gap:7px;
  padding:9px 10px;
  margin-top:3px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(0,0,0,.18);
}
.photo-op-controls[hidden]{display:none!important}
.photo-op-controls label{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  align-items:center;
  gap:8px;
  color:#f1f4ee;
  font-size:9px;
  font-weight:850;
  letter-spacing:.02em;
}
.photo-op-controls input[type="range"]{
  width:100%;
  accent-color:#dfc36f;
}
.photo-op-reset{
  min-height:30px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:9px;
  font-weight:900;
  cursor:pointer;
}
body.photo-arrange-mode .photo-dock{
  max-height:min(390px,72dvh);
  overflow:auto;
}
@media(max-width:480px){
  .photo-op-controls label{
    grid-template-columns:72px minmax(0,1fr);
  }
}


/* ==========================================================
   AR17 AC — direct finger photo framing
   ========================================================== */

/* No arrangement toolbar, no sliders, no bottom positioning controls. */
.photo-op-toolbar,
.photo-op-controls{
  display:none!important;
}

/* Prevent the browser itself from stealing drag/pinch gestures. */
.ar-view,
.ar-host,
.ar-host canvas,
.ar-host video{
  touch-action:none!important;
  overscroll-behavior:none;
}

body.poopo-dragging .ar-host canvas,
body.poopo-transforming .ar-host canvas{
  cursor:grabbing;
}

/* Keep the capture card compact. */
.photo-dock{
  max-height:none!important;
  overflow:visible!important;
}


/* ==========================================================
   AR18 AD — smoother direct manipulation + twist rotation
   ========================================================== */
.ar-view,
.ar-host,
.ar-host canvas,
.ar-host video{
  touch-action:none!important;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
}

body.poopo-dragging .photo-dock small,
body.poopo-transforming .photo-dock small{
  color:#f3e3ac;
}


/* ==========================================================
   AR19 AE — bottom button arranger + pinch zoom
   ========================================================== */

.photo-dock{
  width:min(360px,calc(100vw - 24px));
  gap:6px;
  padding:10px 11px 11px;
  pointer-events:none;
}

.poopo-arranger{
  pointer-events:auto;
  width:100%;
  display:grid;
  grid-template-columns:minmax(150px,1.18fr) minmax(118px,.82fr);
  gap:10px;
  align-items:stretch;
  padding:8px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:rgba(0,0,0,.16);
}

.poopo-move-block,
.poopo-turn-block{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}

.poopo-control-label{
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.16em;
  color:#dfc36f;
}

.poopo-dpad{
  display:grid;
  grid-template-columns:42px 42px 42px;
  grid-template-rows:36px 36px 36px;
  gap:4px;
  place-items:center;
}

.poopo-control-btn,
.poopo-center-btn,
.poopo-turn-btn{
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
}

.poopo-control-btn,
.poopo-center-btn{
  width:42px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:11px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:20px;
  font-weight:900;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}

.poopo-center-btn{
  font-size:18px;
  color:#dfc36f;
  background:rgba(223,195,111,.08);
}

.poopo-down-btn{
  border-color:rgba(223,195,111,.30);
  background:rgba(223,195,111,.10);
}

.poopo-control-btn.is-pressed,
.poopo-turn-btn.is-pressed,
.poopo-control-btn:active,
.poopo-turn-btn:active,
.poopo-center-btn:active{
  transform:scale(.93);
  background:rgba(223,195,111,.18);
  border-color:rgba(223,195,111,.44);
}

.poopo-turn-buttons{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}

.poopo-turn-btn{
  min-height:62px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  padding:6px 4px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
}

.poopo-turn-btn>span{
  font-size:26px;
  line-height:1;
}

.poopo-turn-btn small{
  color:rgba(239,243,238,.78);
  font-size:8px;
  font-weight:850;
}

.poopo-pinch-copy{
  color:rgba(237,242,237,.72)!important;
  font-size:8px!important;
  line-height:1.25;
}

.photo-capture-row{
  pointer-events:auto;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:1px;
}

.photo-capture-row .photo-shutter{
  flex:0 0 auto;
  width:58px;
  height:58px;
  margin:0;
}

.photo-capture-row .photo-shutter-ring{
  width:44px;
  height:44px;
}

.photo-capture-row .photo-shutter svg{
  width:20px;
  height:20px;
}

.photo-capture-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:2px;
}

.photo-capture-copy strong{
  font-size:11px;
}

.photo-capture-copy small{
  font-size:8px;
  color:rgba(238,243,238,.66);
}

body.poopo-latched .dialogue{
  bottom:max(388px,calc(env(safe-area-inset-bottom) + 366px));
}

body.poopo-latched .tap-hint{
  max-width:360px;
  font-size:8px;
  line-height:1.35;
  text-align:center;
}

@media(max-width:480px){
  .photo-dock{
    width:min(344px,calc(100vw - 16px));
    padding:8px 8px 9px;
  }

  .poopo-arranger{
    grid-template-columns:148px minmax(108px,1fr);
    gap:7px;
    padding:7px;
  }

  .poopo-dpad{
    grid-template-columns:39px 39px 39px;
    grid-template-rows:34px 34px 34px;
    gap:3px;
  }

  .poopo-control-btn,
  .poopo-center-btn{
    width:39px;
    height:34px;
  }

  .poopo-turn-btn{
    min-height:58px;
  }

  body.poopo-latched .dialogue{
    bottom:max(372px,calc(env(safe-area-inset-bottom) + 350px));
  }
}

@media(max-height:700px){
  .photo-dock-kicker{display:none}
  .poopo-arranger{padding:6px}
  .poopo-dpad{grid-template-rows:32px 32px 32px}
  .poopo-control-btn,.poopo-center-btn{height:32px}
  .poopo-turn-btn{min-height:52px}
  .photo-capture-row .photo-shutter{width:52px;height:52px}
  .photo-capture-row .photo-shutter-ring{width:40px;height:40px}
}


/* ==========================================================
   AR20 AF — Safe Photo Composition
   ========================================================== */

/* Compact Photo Op controller. */
.photo-dock{
  width:min(292px,calc(100vw - 18px))!important;
  gap:3px!important;
  padding:7px 8px 8px!important;
  border-radius:16px!important;
  background:rgba(4,12,7,.42)!important;
  backdrop-filter:blur(10px)!important;
}

.photo-dock-kicker{
  font-size:7px!important;
}

.photo-dock>strong{
  font-size:10px!important;
}

.poopo-arranger{
  grid-template-columns:132px minmax(94px,1fr)!important;
  gap:6px!important;
  padding:5px!important;
  border-radius:12px!important;
}

.poopo-control-label{
  font-size:7px!important;
}

.poopo-dpad{
  grid-template-columns:34px 34px 34px!important;
  grid-template-rows:29px 29px 29px!important;
  gap:3px!important;
}

.poopo-control-btn,
.poopo-center-btn{
  width:34px!important;
  height:29px!important;
  min-height:0!important;
  border-radius:8px!important;
}

.poopo-control-btn{
  font-size:16px!important;
}

.poopo-center-btn{
  padding:0!important;
  font-size:7px!important;
  font-weight:950!important;
  letter-spacing:.05em!important;
}

.poopo-turn-buttons{
  gap:4px!important;
}

.poopo-turn-btn{
  min-height:45px!important;
  padding:3px!important;
  border-radius:9px!important;
}

.poopo-turn-btn>span{
  font-size:20px!important;
}

.poopo-turn-btn small,
.poopo-pinch-copy{
  font-size:7px!important;
}

.photo-capture-row{
  gap:8px!important;
  margin-top:0!important;
}

.photo-capture-row .photo-shutter{
  width:47px!important;
  height:47px!important;
}

.photo-capture-row .photo-shutter-ring{
  width:36px!important;
  height:36px!important;
}

.photo-capture-row .photo-shutter svg{
  width:17px!important;
  height:17px!important;
}

.photo-capture-copy strong{
  font-size:9px!important;
}

.photo-capture-copy small{
  font-size:7px!important;
}

/* NarraSpace is still available, but photo composition is the primary task. */
body.poopo-latched #enter-narraspace{
  width:auto!important;
  min-height:30px!important;
  margin-top:4px!important;
  padding:6px 13px!important;
  border-radius:999px!important;
  font-size:9px!important;
  line-height:1!important;
  box-shadow:none!important;
  background:rgba(255,255,255,.08)!important;
  color:#f4f0e2!important;
  border:1px solid rgba(255,255,255,.14)!important;
}

body.poopo-latched #enter-narraspace.pulse{
  animation:none!important;
}

body.poopo-latched .tap-hint{
  margin-top:3px!important;
  max-width:290px!important;
  font-size:7px!important;
  opacity:.70;
}

/* Dialogue sits just above the compact controller. */
body.poopo-latched .dialogue{
  bottom:max(210px,calc(env(safe-area-inset-bottom) + 196px))!important;
}

/* Landscape: make the controller even denser. */
@media(orientation:landscape) and (max-height:620px){
  .ar-bottom{
    padding:6px max(10px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
  }

  .photo-dock{
    width:min(276px,calc(100vw - 18px))!important;
    padding:5px 6px 6px!important;
  }

  .photo-dock-kicker{
    display:none!important;
  }

  .poopo-arranger{
    grid-template-columns:126px minmax(90px,1fr)!important;
    padding:4px!important;
  }

  .poopo-dpad{
    grid-template-columns:32px 32px 32px!important;
    grid-template-rows:27px 27px 27px!important;
  }

  .poopo-control-btn,
  .poopo-center-btn{
    width:32px!important;
    height:27px!important;
  }

  .poopo-turn-btn{
    min-height:40px!important;
  }

  .photo-capture-row .photo-shutter{
    width:43px!important;
    height:43px!important;
  }

  .photo-capture-row .photo-shutter-ring{
    width:33px!important;
    height:33px!important;
  }

  body.poopo-latched .dialogue{
    bottom:max(184px,calc(env(safe-area-inset-bottom) + 170px))!important;
  }
}

/* AR21 AG: runtime animation-root grounding. */


/* ==========================================================
   AR22 AH — Free Ground + Tilt
   ========================================================== */

.poopo-tilt-label{
  margin-top:2px;
}

.poopo-tilt-buttons{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}

.poopo-tilt-btn{
  min-height:35px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:3px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(255,255,255,.05);
  color:#fff;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
  user-select:none;
}

.poopo-tilt-btn>span{
  font-size:17px;
  line-height:1;
}

.poopo-tilt-btn small{
  font-size:6.5px;
  font-weight:850;
  color:rgba(239,243,238,.76);
}

.poopo-tilt-btn.is-pressed,
.poopo-tilt-btn:active{
  transform:scale(.94);
  background:rgba(223,195,111,.18);
  border-color:rgba(223,195,111,.42);
}

/* The panel is an overlay only. It is no longer treated as Poopo's floor. */
.poopo-down-btn{
  border-color:rgba(142,220,154,.34)!important;
  background:rgba(91,171,107,.12)!important;
}

/* Keep the extra Tilt row compact in portrait and landscape. */
@media(orientation:landscape) and (max-height:620px){
  .poopo-tilt-btn{
    min-height:29px;
  }

  .poopo-tilt-btn>span{
    font-size:15px;
  }
}


/* ==========================================================
   AR23 AI — Camera-First Compact Controls
   UI-ONLY. No AR behavior changes.
   ========================================================== */

/* GENERAL: reduce glassiness even before small-phone mode */
.photo-dock{
  background:rgba(3,10,6,.24)!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 0 1px rgba(255,255,255,.03) inset!important;
}

.poopo-arranger{
  background:rgba(0,0,0,.10)!important;
  border-color:rgba(255,255,255,.08)!important;
}

.poopo-control-btn,
.poopo-center-btn,
.poopo-turn-btn,
.poopo-tilt-btn{
  background:rgba(8,14,10,.28)!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}

.poopo-control-btn.is-pressed,
.poopo-turn-btn.is-pressed,
.poopo-tilt-btn.is-pressed,
.poopo-control-btn:active,
.poopo-turn-btn:active,
.poopo-tilt-btn:active,
.poopo-center-btn:active{
  background:rgba(223,195,111,.20)!important;
  border-color:rgba(223,195,111,.44)!important;
}

/* ==========================================================
   SMALL PHONE CAMERA-FIRST MODE
   ========================================================== */
@media (max-width:430px), (max-height:720px) {

  /* Let the camera dominate the screen. */
  .ar-bottom{
    padding:
      4px
      max(7px,env(safe-area-inset-right))
      max(6px,env(safe-area-inset-bottom))
      max(7px,env(safe-area-inset-left))!important;
    gap:3px!important;
  }

  .photo-dock{
    width:min(250px,calc(100vw - 14px))!important;
    gap:2px!important;
    padding:5px 6px 6px!important;
    border-radius:14px!important;

    /* Almost transparent; operator can see the live camera behind it. */
    background:rgba(3,10,6,.13)!important;
    backdrop-filter:blur(.6px)!important;
    -webkit-backdrop-filter:blur(.6px)!important;
    border-color:rgba(255,255,255,.07)!important;
    box-shadow:0 5px 18px rgba(0,0,0,.12)!important;
  }

  .photo-dock-kicker,
  .photo-dock-title{
    display:none!important;
  }

  .poopo-arranger{
    grid-template-columns:118px minmax(88px,1fr)!important;
    gap:5px!important;
    padding:4px!important;
    border-radius:11px!important;
    background:rgba(0,0,0,.06)!important;
    border-color:rgba(255,255,255,.06)!important;
  }

  /* Hide redundant labels; icons do the work. */
  .poopo-control-label-move,
  .poopo-control-label-turn,
  .poopo-tilt-label,
  .poopo-pinch-copy{
    display:none!important;
  }

  .poopo-move-block,
  .poopo-turn-block{
    gap:3px!important;
  }

  /* Compact visual buttons, while retaining comfortable hit areas. */
  .poopo-dpad{
    grid-template-columns:36px 36px 36px!important;
    grid-template-rows:34px 34px 34px!important;
    gap:3px!important;
  }

  .poopo-control-btn,
  .poopo-center-btn{
    width:36px!important;
    height:34px!important;
    min-width:36px!important;
    min-height:34px!important;
    border-radius:9px!important;
    background:rgba(7,13,9,.20)!important;
  }

  /* Invisible hit padding via pseudo element-like box shadow area is unreliable,
     so preserve a larger actual touch area with negative visual inset. */
  .poopo-control-btn,
  .poopo-center-btn,
  .poopo-turn-btn,
  .poopo-tilt-btn{
    position:relative;
    touch-action:none!important;
  }

  .poopo-control-btn::after,
  .poopo-center-btn::after,
  .poopo-turn-btn::after,
  .poopo-tilt-btn::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:inherit;
  }

  .poopo-control-btn{
    font-size:17px!important;
  }

  .poopo-center-btn{
    font-size:7px!important;
    letter-spacing:.04em!important;
  }

  .poopo-turn-buttons,
  .poopo-tilt-buttons{
    gap:3px!important;
  }

  .poopo-turn-btn,
  .poopo-tilt-btn{
    min-height:36px!important;
    padding:2px!important;
    border-radius:8px!important;
    background:rgba(7,13,9,.18)!important;
  }

  .poopo-turn-btn>span,
  .poopo-tilt-btn>span{
    font-size:19px!important;
  }

  .control-word{
    display:none!important;
  }

  /* Shutter is visually detached from the arranger card. */
  .photo-capture-row{
    width:auto!important;
    margin-top:3px!important;
    gap:6px!important;
    justify-content:center!important;
    background:transparent!important;
  }

  .photo-capture-row .photo-shutter{
    width:52px!important;
    height:52px!important;
    margin:0!important;
    box-shadow:
      0 0 0 3px rgba(255,255,255,.12),
      0 6px 18px rgba(0,0,0,.18)!important;
  }

  .photo-capture-row .photo-shutter-ring{
    width:40px!important;
    height:40px!important;
  }

  .photo-capture-row .photo-shutter svg{
    width:18px!important;
    height:18px!important;
  }

  .photo-capture-label,
  .photo-capture-help{
    display:none!important;
  }

  /* Enter NarraSpace becomes a minimal text pill. */
  body.poopo-latched #enter-narraspace{
    min-height:26px!important;
    padding:5px 10px!important;
    margin-top:2px!important;
    border-radius:999px!important;
    font-size:8px!important;
    background:rgba(0,0,0,.08)!important;
    border-color:rgba(255,255,255,.09)!important;
    color:rgba(255,255,255,.78)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* Hide redundant long instruction on very small displays. */
  body.poopo-latched .tap-hint{
    display:none!important;
  }

  /* Dialogue sits above the truly compact operator cluster. */
  body.poopo-latched .dialogue{
    bottom:max(
      150px,
      calc(env(safe-area-inset-bottom) + 138px)
    )!important;
  }
}

/* ==========================================================
   EXTRA-SMALL WIDTH
   Typical compact iPhone / narrow Android
   ========================================================== */
@media (max-width:390px) {

  .photo-dock{
    width:min(232px,calc(100vw - 12px))!important;
    padding:4px 5px 5px!important;
  }

  .poopo-arranger{
    grid-template-columns:112px minmax(82px,1fr)!important;
    gap:4px!important;
    padding:3px!important;
  }

  .poopo-dpad{
    grid-template-columns:34px 34px 34px!important;
    grid-template-rows:32px 32px 32px!important;
    gap:2px!important;
  }

  .poopo-control-btn,
  .poopo-center-btn{
    width:34px!important;
    height:32px!important;
    min-width:34px!important;
    min-height:32px!important;
  }

  .poopo-turn-btn,
  .poopo-tilt-btn{
    min-height:33px!important;
  }

  .poopo-turn-btn>span,
  .poopo-tilt-btn>span{
    font-size:18px!important;
  }

  .photo-capture-row .photo-shutter{
    width:48px!important;
    height:48px!important;
  }

  .photo-capture-row .photo-shutter-ring{
    width:37px!important;
    height:37px!important;
  }

  body.poopo-latched .dialogue{
    bottom:max(
      142px,
      calc(env(safe-area-inset-bottom) + 130px)
    )!important;
  }
}

/* ==========================================================
   SHORT LANDSCAPE
   Keep controls to the side but ultra-transparent.
   ========================================================== */
@media (orientation:landscape) and (max-height:560px) {

  .photo-dock{
    width:min(258px,31vw)!important;
    min-width:228px!important;
    background:rgba(3,10,6,.10)!important;
    backdrop-filter:blur(.4px)!important;
    -webkit-backdrop-filter:blur(.4px)!important;
  }

  .poopo-arranger{
    grid-template-columns:118px minmax(86px,1fr)!important;
  }

  .photo-capture-row .photo-shutter{
    width:46px!important;
    height:46px!important;
  }

  .photo-capture-row .photo-shutter-ring{
    width:35px!important;
    height:35px!important;
  }

  body.poopo-latched #enter-narraspace{
    font-size:7.5px!important;
  }
}

/* Keep normal/large devices on the fuller labeled layout. */


/* ==========================================================
   AR24 AJ — Top-centered dialogue / subtitle
   UI-only patch.
   Move Poopo dialogue away from the bottom controls.
   Keep it visible near the top center without colliding with
   the brand pill on the left or the close button on the right.
   ========================================================== */

body.poopo-latched .dialogue{
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  top:max(72px,calc(env(safe-area-inset-top) + 50px))!important;
  transform:translateX(-50%)!important;
  width:auto!important;
  max-width:min(340px,calc(100vw - 176px))!important;
  background:rgba(5,13,8,.52)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
  border-color:rgba(255,255,255,.10)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
}

body.poopo-latched .dialogue p{
  font-size:13px!important;
  line-height:1.3!important;
}

/* Small phones: keep the subtitle centered but shorter so it never
   reaches the close button or mini-brand zone. */
@media (max-width:430px), (max-height:720px){
  body.poopo-latched .dialogue{
    top:max(70px,calc(env(safe-area-inset-top) + 46px))!important;
    max-width:min(230px,calc(100vw - 154px))!important;
    padding:8px 11px!important;
    border-radius:14px!important;
    background:rgba(5,13,8,.34)!important;
    backdrop-filter:blur(2px)!important;
    -webkit-backdrop-filter:blur(2px)!important;
  }

  body.poopo-latched .dialogue p{
    font-size:11px!important;
    line-height:1.25!important;
  }
}

/* Extra small / iPhone X style widths */
@media (max-width:390px){
  body.poopo-latched .dialogue{
    top:max(68px,calc(env(safe-area-inset-top) + 44px))!important;
    max-width:min(210px,calc(100vw - 146px))!important;
    padding:7px 10px!important;
  }

  body.poopo-latched .dialogue p{
    font-size:10.5px!important;
  }
}

/* Short landscape: keep subtitle in the header strip, centered, and away
   from the close button. */
@media (orientation:landscape) and (max-height:560px){
  body.poopo-latched .dialogue{
    left:50%!important;
    right:auto!important;
    top:max(12px,calc(env(safe-area-inset-top) + 4px))!important;
    bottom:auto!important;
    transform:translateX(-50%)!important;
    max-width:min(260px,calc(100vw - 186px))!important;
    padding:7px 11px!important;
    background:rgba(5,13,8,.26)!important;
    backdrop-filter:blur(1px)!important;
    -webkit-backdrop-filter:blur(1px)!important;
  }

  body.poopo-latched .dialogue p{
    font-size:10px!important;
  }
}


/* AR25 AK — Photo Card capture polish. Public AR UI unchanged. */


/* AR27 AM — Reliable Photo Template Loader. No UI/layout changes. */


/* ==========================================================
   AR28 AN — Production QA + Selfie Camera
   ========================================================== */

.camera-flip-btn{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  padding:0 11px;
  background:rgba(3,9,6,.34);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:#fff;
  cursor:pointer;
  touch-action:manipulation;
}

.camera-flip-btn[hidden]{
  display:none!important;
}

.camera-flip-btn>span{
  font-size:17px;
  line-height:1;
  font-weight:900;
}

.camera-flip-btn small{
  font-size:9px;
  line-height:1;
  font-weight:850;
}

.camera-flip-btn.is-selfie{
  border-color:rgba(223,195,111,.42);
  background:rgba(223,195,111,.14);
}

.camera-flip-btn:active{
  transform:scale(.96);
}

.camera-flip-btn:disabled{
  opacity:.52;
  pointer-events:none;
}

/* Mirror only the live front camera. The WebGL Poopo layer stays normal.
   JS mirrors the camera pixels in the exported selfie to match this preview. */
body.selfie-camera .ar-host>video{
  transform:scaleX(-1)!important;
  transform-origin:center center!important;
}

.photo-card-ready{
  position:absolute;
  z-index:13;
  top:max(
    112px,
    calc(env(safe-area-inset-top) + 96px)
  );
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100vw - 40px);
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(198,225,199,.16);
  background:rgba(7,19,11,.36);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  color:#d9eddc;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.06em;
  white-space:nowrap;
  pointer-events:none;
}

.photo-card-ready[hidden]{
  display:none!important;
}

@media (max-width:430px), (max-height:720px){
  .camera-flip-btn{
    width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    border-radius:50%;
    background:rgba(3,9,6,.18);
    backdrop-filter:blur(.8px);
    -webkit-backdrop-filter:blur(.8px);
  }

  .camera-flip-btn small{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .camera-flip-btn>span{
    font-size:19px;
  }

  .photo-card-ready{
    top:max(
      104px,
      calc(env(safe-area-inset-top) + 88px)
    );
    padding:5px 8px;
    font-size:7px;
    background:rgba(7,19,11,.24);
    backdrop-filter:blur(.5px);
    -webkit-backdrop-filter:blur(.5px);
  }
}

@media (orientation:landscape) and (max-height:560px){
  .photo-card-ready{
    top:auto;
    bottom:max(
      70px,
      calc(env(safe-area-inset-bottom) + 58px)
    );
    left:18px;
    transform:none;
  }
}


/* AR34 · Poopo head scanner guide — small phone tuning */
@media (max-width:430px), (max-height:720px){
  .poopo-head-guide{
    width:82px;
    height:82px;
  }
  .poopo-head-guide img{
    width:70px;
    height:70px;
  }
  .target-frame{
    width:min(60vw,248px);
  }
  .scan-guide strong{
    margin-top:16px;
    font-size:17px;
  }
}
@media (prefers-reduced-motion:reduce){
  .poopo-head-pulse{
    animation:none;
    opacity:.24;
  }
}


/* ==========================================================
   AR36 · Directed cinematic summon
   One CSS pseudo-element only; no extra render pass.
   ========================================================== */

.vignette{
  overflow:hidden;
}

.vignette::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  opacity:0;
  transform:scale(.82);
  background:
    radial-gradient(
      circle at 50% 54%,
      rgba(255,244,191,.00) 0%,
      rgba(246,218,126,.00) 16%,
      rgba(118,185,120,.00) 34%,
      rgba(0,0,0,0) 56%
    );
  will-change:opacity,transform;
}

body.poopo-summoning .vignette::after{
  animation:
    poopoSummonBloomV3 1.52s
    cubic-bezier(.16,.72,.22,1)
    both;
}

@keyframes poopoSummonBloomV3{
  0%{
    opacity:0;
    transform:scale(.74);
    background:
      radial-gradient(
        circle at 50% 54%,
        rgba(255,245,202,.00) 0%,
        rgba(245,215,123,.00) 17%,
        rgba(107,176,112,.00) 34%,
        rgba(0,0,0,0) 56%
      );
  }

  20%{
    opacity:.24;
    transform:scale(.86);
    background:
      radial-gradient(
        circle at 50% 54%,
        rgba(255,248,219,.38) 0%,
        rgba(245,215,123,.16) 18%,
        rgba(107,176,112,.055) 36%,
        rgba(0,0,0,0) 58%
      );
  }

  36%{
    opacity:.64;
    transform:scale(1.0);
    background:
      radial-gradient(
        circle at 50% 54%,
        rgba(255,250,227,.56) 0%,
        rgba(245,215,123,.22) 18%,
        rgba(107,176,112,.075) 38%,
        rgba(0,0,0,0) 60%
      );
  }

  57%{
    opacity:.32;
    transform:scale(1.08);
  }

  100%{
    opacity:0;
    transform:scale(1.16);
  }
}

@media (prefers-reduced-motion:reduce){
  body.poopo-summoning .vignette::after{
    animation:
      poopoSummonBloomReduced .42s
      ease-out both;
  }

  @keyframes poopoSummonBloomReduced{
    0%{opacity:0}
    45%{opacity:.22}
    100%{opacity:0}
  }
}


/* ==========================================================
   AR37 · Magic Delight Pass
   Lightweight DOM overlay: 1 ripple + 6 fireflies + dialogue pop
   No extra canvas, no new particle system, no new WebGL pass.
   ========================================================== */

.poopo-delight-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:10;
}

.poopo-delight-ripple,
.poopo-firefly{
  position:absolute;
  opacity:0;
  will-change:transform,opacity;
}

.poopo-delight-ripple{
  left:50%;
  top:57%;
  width:14px;
  height:14px;
  margin-left:-7px;
  margin-top:-7px;
  border-radius:999px;
  border:1.5px solid rgba(245,223,136,.72);
  box-shadow:
    0 0 0 1px rgba(115,184,117,.10),
    0 0 16px rgba(245,223,136,.24);
  background:radial-gradient(circle, rgba(252,246,214,.28) 0%, rgba(252,246,214,0) 70%);
}

.poopo-firefly{
  left:50%;
  top:56%;
  width:6px;
  height:6px;
  margin-left:-3px;
  margin-top:-3px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,251,230,1) 0%, rgba(247,223,126,.94) 42%, rgba(134,201,128,.12) 100%);
  box-shadow:
    0 0 10px rgba(247,223,126,.48),
    0 0 18px rgba(134,201,128,.16);
}

.poopo-firefly.fly-1{ --dx:-58px; --dy:-62px; --rot:-12deg; --delay:0ms; }
.poopo-firefly.fly-2{ --dx:-26px; --dy:-84px; --rot:9deg; --delay:55ms; }
.poopo-firefly.fly-3{ --dx:18px; --dy:-70px; --rot:-4deg; --delay:110ms; }
.poopo-firefly.fly-4{ --dx:58px; --dy:-54px; --rot:12deg; --delay:165ms; }
.poopo-firefly.fly-5{ --dx:-44px; --dy:-28px; --rot:-8deg; --delay:220ms; }
.poopo-firefly.fly-6{ --dx:42px; --dy:-24px; --rot:10deg; --delay:275ms; }

.poopo-delight-layer.active .poopo-delight-ripple{
  animation:poopoDelightRipple 980ms cubic-bezier(.16,.72,.22,1) both;
}

.poopo-delight-layer.active .poopo-firefly{
  animation:poopoFireflyLift 1080ms cubic-bezier(.16,.72,.22,1) both;
  animation-delay:var(--delay);
}

@keyframes poopoDelightRipple{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.25);
  }
  18%{
    opacity:.88;
  }
  72%{
    opacity:.22;
  }
  100%{
    opacity:0;
    transform:translate3d(0,-8px,0) scale(16.0);
  }
}

@keyframes poopoFireflyLift{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.32) rotate(0deg);
    filter:blur(.2px);
  }
  14%{
    opacity:1;
  }
  62%{
    opacity:.88;
  }
  100%{
    opacity:0;
    transform:
      translate3d(var(--dx), var(--dy), 0)
      scale(1.05)
      rotate(var(--rot));
    filter:blur(.4px);
  }
}

#dialogue.delight-dialogue-in,
.dialogue.delight-dialogue-in{
  animation:poopoDialogueDelight 440ms cubic-bezier(.16,.72,.22,1) both;
  transform-origin:center bottom;
}

@keyframes poopoDialogueDelight{
  0%{
    opacity:0;
    transform:translateY(12px) scale(.92);
  }
  58%{
    opacity:1;
    transform:translateY(-2px) scale(1.03);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width:430px), (max-height:720px){
  .poopo-delight-ripple{
    top:59%;
  }

  .poopo-firefly{
    top:58%;
    width:5px;
    height:5px;
    margin-left:-2.5px;
    margin-top:-2.5px;
  }

  .poopo-firefly.fly-1{ --dx:-44px; --dy:-52px; }
  .poopo-firefly.fly-2{ --dx:-20px; --dy:-68px; }
  .poopo-firefly.fly-3{ --dx:16px; --dy:-58px; }
  .poopo-firefly.fly-4{ --dx:42px; --dy:-44px; }
  .poopo-firefly.fly-5{ --dx:-34px; --dy:-22px; }
  .poopo-firefly.fly-6{ --dx:34px; --dy:-18px; }
}

@media (prefers-reduced-motion:reduce){
  .poopo-delight-layer.active .poopo-delight-ripple{
    animation:poopoDelightRippleReduced 380ms ease-out both;
  }

  .poopo-delight-layer.active .poopo-firefly{
    animation:none;
    opacity:0;
  }

  #dialogue.delight-dialogue-in,
  .dialogue.delight-dialogue-in{
    animation:poopoDialogueDelightReduced 220ms ease-out both;
  }

  @keyframes poopoDelightRippleReduced{
    0%{opacity:0;transform:scale(.4)}
    40%{opacity:.48}
    100%{opacity:0;transform:scale(8)}
  }

  @keyframes poopoDialogueDelightReduced{
    0%{opacity:0;transform:translateY(8px)}
    100%{opacity:1;transform:translateY(0)}
  }
}


/* ==========================================================
   AR38 · Kid Wonder Polish
   Professional composition override.
   AR37 remains underneath; these rules intentionally tighten it.
   ========================================================== */

.poopo-delight-ripple{
  top:58%;
  width:12px;
  height:12px;
  margin-left:-6px;
  margin-top:-6px;
  border-width:1px;
  border-color:rgba(245,223,136,.58);
  box-shadow:
    0 0 0 1px rgba(115,184,117,.07),
    0 0 12px rgba(245,223,136,.16);
}

.poopo-delight-star{
  position:absolute;
  left:50%;
  top:53.5%;
  width:8px;
  height:8px;
  margin-left:-4px;
  margin-top:-4px;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}

.poopo-delight-star::before,
.poopo-delight-star::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:rgba(255,246,202,.92);
  border-radius:999px;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px rgba(245,223,136,.28);
}

.poopo-delight-star::before{
  width:8px;
  height:1.5px;
}

.poopo-delight-star::after{
  width:1.5px;
  height:8px;
}

/* Four coherent fireflies in a shallow crown around Poopo.
   They no longer shoot to unrelated areas of the screen. */
.poopo-firefly{
  top:56.5%;
  width:5px;
  height:5px;
  margin-left:-2.5px;
  margin-top:-2.5px;
  box-shadow:
    0 0 8px rgba(247,223,126,.36),
    0 0 13px rgba(134,201,128,.11);
}

.poopo-firefly.fly-1{
  --dx:-34px;
  --dy:-36px;
  --rot:-7deg;
  --delay:15ms;
}
.poopo-firefly.fly-2{
  --dx:-12px;
  --dy:-49px;
  --rot:4deg;
  --delay:60ms;
}
.poopo-firefly.fly-3{
  --dx:13px;
  --dy:-48px;
  --rot:-3deg;
  --delay:105ms;
}
.poopo-firefly.fly-4{
  --dx:35px;
  --dy:-34px;
  --rot:7deg;
  --delay:150ms;
}

/* Old extra AR37 elements no longer exist in markup. */
.poopo-firefly.fly-5,
.poopo-firefly.fly-6{
  display:none!important;
}

.poopo-delight-layer.active .poopo-delight-ripple{
  animation:
    poopoDelightRipple38
    720ms
    cubic-bezier(.16,.72,.22,1)
    both;
}

.poopo-delight-layer.active .poopo-firefly{
  animation:
    poopoFireflyLift38
    760ms
    cubic-bezier(.16,.72,.22,1)
    both;
  animation-delay:var(--delay);
}

.poopo-delight-layer.active .poopo-delight-star{
  animation:
    poopoDelightStar38
    520ms
    cubic-bezier(.16,.72,.22,1)
    90ms both;
}

@keyframes poopoDelightRipple38{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.35);
  }
  22%{
    opacity:.62;
  }
  68%{
    opacity:.16;
  }
  100%{
    opacity:0;
    transform:translate3d(0,-5px,0) scale(9);
  }
}

@keyframes poopoFireflyLift38{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.45);
  }
  18%{
    opacity:.86;
  }
  62%{
    opacity:.68;
  }
  100%{
    opacity:0;
    transform:
      translate3d(var(--dx),var(--dy),0)
      scale(.92)
      rotate(var(--rot));
  }
}

@keyframes poopoDelightStar38{
  0%{
    opacity:0;
    transform:scale(.35) rotate(0deg);
  }
  42%{
    opacity:.84;
    transform:scale(1) rotate(18deg);
  }
  100%{
    opacity:0;
    transform:scale(1.25) rotate(34deg);
  }
}

/* Dialogue: less bounce, more premium. */
#dialogue.delight-dialogue-in,
.dialogue.delight-dialogue-in{
  animation:
    poopoDialogueWonder38
    320ms
    cubic-bezier(.16,.72,.22,1)
    both;
}

@keyframes poopoDialogueWonder38{
  0%{
    opacity:0;
    transform:translateY(8px) scale(.965);
  }
  70%{
    opacity:1;
    transform:translateY(-1px) scale(1.012);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media (max-width:430px), (max-height:720px){
  .poopo-delight-ripple{
    top:59.5%;
  }

  .poopo-delight-star{
    top:55%;
  }

  .poopo-firefly{
    top:58.5%;
  }

  .poopo-firefly.fly-1{--dx:-28px;--dy:-30px}
  .poopo-firefly.fly-2{--dx:-10px;--dy:-39px}
  .poopo-firefly.fly-3{--dx:10px;--dy:-39px}
  .poopo-firefly.fly-4{--dx:28px;--dy:-29px}
}

@media (prefers-reduced-motion:reduce){
  .poopo-delight-layer.active .poopo-firefly,
  .poopo-delight-layer.active .poopo-delight-star{
    animation:none!important;
    opacity:0!important;
  }

  #dialogue.delight-dialogue-in,
  .dialogue.delight-dialogue-in{
    animation:
      poopoDialogueDelightReduced
      180ms
      ease-out both;
  }
}


/* ==========================================================
   AR39 · Reaction Choreography
   No additional screen FX. Dialogue simply follows the character beat.
   ========================================================== */

#dialogue.reaction-dialogue-in,
.dialogue.reaction-dialogue-in{
  animation:
    poopoReactionDialogue39
    280ms
    cubic-bezier(.16,.72,.22,1)
    both;
  transform-origin:center bottom;
}

@keyframes poopoReactionDialogue39{
  0%{
    opacity:0;
    transform:
      translateY(7px)
      scale(.975);
  }

  72%{
    opacity:1;
    transform:
      translateY(-1px)
      scale(1.008);
  }

  100%{
    opacity:1;
    transform:
      translateY(0)
      scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  #dialogue.reaction-dialogue-in,
  .dialogue.reaction-dialogue-in{
    animation:
      poopoReactionDialogue39Reduced
      150ms
      ease-out both;
  }

  @keyframes poopoReactionDialogue39Reduced{
    from{opacity:0}
    to{opacity:1}
  }
}


/* ==========================================================
   AR41 · Staff-only Next Visitor control
   Visible only when URL includes ?staff=1.
   ========================================================== */

.next-visitor-btn{
  pointer-events:auto;
  min-width:54px;
  height:42px;
  padding:0 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(3,9,6,.53);
  backdrop-filter:blur(10px);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  font:inherit;
}

.next-visitor-btn[hidden]{
  display:none!important;
}

.next-visitor-btn span{
  font-size:17px;
  line-height:1;
}

.next-visitor-btn small{
  font-size:9px;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.next-visitor-btn:disabled{
  opacity:.48;
  cursor:default;
}

.next-visitor-btn.is-resetting span{
  animation:nextVisitorSpin41 .8s linear infinite;
}

@keyframes nextVisitorSpin41{
  to{transform:rotate(360deg)}
}

@media (max-width:430px), (max-height:720px){
  .next-visitor-btn{
    min-width:42px;
    width:42px;
    padding:0;
  }

  .next-visitor-btn small{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .next-visitor-btn.is-resetting span{
    animation:none;
  }
}