*{box-sizing:border-box}body{margin:0;background:#061321;color:#f5f8ff;font-family:Arial,sans-serif}main{max-width:760px;margin:auto;padding:16px}header{display:flex;align-items:center;gap:12px;padding:14px 4px 22px}h1,h2,p{margin:0}header h1{font-size:22px;letter-spacing:2px}header p,.muted{color:#91a4ba;font-size:13px}.card{background:#0a1d31;border:1px solid #193652;border-radius:22px;padding:16px;margin-bottom:14px}.hide{display:none!important}.hero,.pricebox,.livebar{display:flex;justify-content:space-between;align-items:center;gap:12px}.hero b{display:block;font-size:19px}.hero span,.pricebox span{display:block;color:#91a4ba;font-size:12px;margin-top:5px}button{border:0;border-radius:13px;padding:13px 14px;background:#173654;color:white;font-weight:700}.pri{background:#6d28ff}.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}#map{height:390px;border-radius:18px;background:#071726;margin:16px 0;overflow:hidden}.mapFallback{height:100%;display:grid;place-items:center;text-align:center;color:#71879e;padding:30px}.tabs{display:flex;gap:7px;margin:10px 0}.tab{padding:8px 12px;font-size:12px}.tab.on{background:#15d7df;color:#061321}.item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;margin:8px 0;border:1px solid #1b3b59;border-radius:15px;background:#0c243c}.item small{display:block;color:#8ea5bc;margin-top:4px}.dot{color:#45e58b}.price{color:#ffe66a;font-weight:800}.item button{padding:9px 12px}label{display:block;color:#9eb0c3;font-size:12px;margin:12px 0}input,select{width:100%;margin-top:6px;padding:13px;border-radius:12px;border:1px solid #294967;background:#071726;color:white}.video{position:relative;background:black;border-radius:18px;overflow:hidden;margin:14px 0;aspect-ratio:9/16;max-height:620px}.video video{width:100%;height:100%;object-fit:cover}.video #empty{position:absolute;inset:0;display:grid;place-items:center;color:#8da1b7}.livebar span:first-child{color:#ff5167;font-weight:800}.livebar #timer{font-size:24px}.pricebox{padding:12px 0}.pricebox b{font-size:22px}.pricebox button{min-width:120px}#requests .req{display:flex;justify-content:space-between;align-items:center;background:#102b47;border-radius:12px;padding:10px;margin:8px 0}@media(max-width:520px){main{padding:10px}#map{height:44vh;min-height:300px}.grid{grid-template-columns:1fr}}
.app-logo{
  width:48px;
  height:48px;
  display:block;
  object-fit:cover;
  border-radius:14px;
  flex:0 0 48px;
}

.live-pin{width:18px;height:18px;border-radius:50%;background:#21df70;border:3px solid white;box-shadow:0 0 0 5px rgba(33,223,112,.18),0 0 14px #21df70}
.thumb{width:92px;height:64px;object-fit:cover;border-radius:10px;margin-right:10px;background:#071726}
.itemMain{display:flex;align-items:center;min-width:0}
.thumbAge{color:#7f96aa;font-size:11px}
.followBadge{color:#ffcf37;font-size:11px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:99999;display:grid;place-items:center;padding:20px}
.modalbox{width:min(430px,100%);background:#0a1d31;border:1px solid #284561;border-radius:22px;padding:20px}
.stars{display:flex;gap:4px;margin:16px 0}
.stars button{font-size:30px;padding:4px;background:transparent;color:#66788c}
.stars button.on{color:#ffd229}
.followRow{display:flex;gap:10px;align-items:center}
.followRow input{width:auto;margin:0}
#switchCam{width:100%;margin:-4px 0 12px}
.familyInvite{width:100%;margin:0 0 12px;background:#6d28ff}.inviteBox{text-align:center}.inviteQr{display:block;width:min(72vw,300px);height:auto;margin:16px auto;border-radius:18px;background:#fff;padding:10px}.inviteBox>button:last-child{width:100%;margin-top:10px}.inviteBox input{text-align:center;font-size:12px}

.updateBtn{margin-left:auto;padding:9px 12px;border-radius:12px;background:#14304b;color:#d7e6f5;font-size:12px}

/* v0.9.10: mirror only the Explorer's own front-camera preview.
   Viewer/WebRTC video remains unmirrored (real-world orientation). */


/* v0.9.11: show camera preview in real-world orientation, never mirror it */


/* v0.9.12: JUMPPANG does not support mirrored camera display.
   Front/rear Explorer preview is always rendered in the camera's real orientation. */




/* v0.9.14
   The Android WebView on the tested phone mirrors the front local preview.
   JS counter-corrects only that local preview. Rear and Viewer video are unchanged. */

/* v0.9.15:
   Viewer front-camera correction is display-only and controlled by JS.
   Rear camera remains transform:none. */


/* v0.9.16 FULLSCREEN LIVE
   Explorer and Viewer video use the entire phone display.
   Controls float above the video and stay usable in portrait/landscape. */
body.live-fullscreen{
  overflow:hidden;
  background:#000;
}
body.live-fullscreen main{
  max-width:none;
  width:100vw;
  height:100dvh;
  padding:0;
  margin:0;
}
body.live-fullscreen header,
body.live-fullscreen #market,
body.live-fullscreen #actions,
body.live-fullscreen #explorerSetup,
body.live-fullscreen #evidenceBanner{
  display:none!important;
}
body.live-fullscreen #preview,
body.live-fullscreen #expSession{
  position:fixed;
  inset:0;
  z-index:1000;
  width:100vw;
  height:100dvh;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:#000;
  overflow:hidden;
}
body.live-fullscreen #preview.hide,
body.live-fullscreen #expSession.hide{
  display:none!important;
}
body.live-fullscreen #preview .video,
body.live-fullscreen #expSession .video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-height:none;
  margin:0;
  border-radius:0;
  aspect-ratio:auto;
  background:#000;
}
body.live-fullscreen #preview .video video,
body.live-fullscreen #expSession .video video{
  width:100%;
  height:100%;
  object-fit:cover;
}
body.live-fullscreen .livebar{
  position:absolute;
  z-index:20;
  top:max(10px,env(safe-area-inset-top));
  left:10px;
  right:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(4,15,27,.58);
  backdrop-filter:blur(7px);
}
body.live-fullscreen #preview .pricebox{
  position:absolute;
  z-index:20;
  left:10px;
  right:10px;
  bottom:calc(68px + max(10px,env(safe-area-inset-bottom)));
  padding:10px 12px;
  border-radius:16px;
  background:rgba(4,15,27,.62);
  backdrop-filter:blur(7px);
}
body.live-fullscreen #preview #leave{
  position:absolute;
  z-index:21;
  left:10px;
  right:10px;
  bottom:max(10px,env(safe-area-inset-bottom));
  background:rgba(24,39,57,.88);
}
body.live-fullscreen #expSession #switchCam{
  position:absolute;
  z-index:21;
  right:12px;
  bottom:calc(82px + max(10px,env(safe-area-inset-bottom)));
  width:auto;
  min-width:150px;
  margin:0;
  background:rgba(23,54,84,.82);
  backdrop-filter:blur(7px);
}
body.live-fullscreen #expSession #stopExp{
  position:absolute;
  z-index:21;
  left:12px;
  right:12px;
  bottom:max(10px,env(safe-area-inset-bottom));
  background:rgba(92,21,35,.82);
}
body.live-fullscreen #expSession #expStatus{
  position:absolute;
  z-index:20;
  left:12px;
  bottom:calc(140px + max(10px,env(safe-area-inset-bottom)));
  margin:0;
  padding:8px 11px;
  border-radius:12px;
  background:rgba(4,15,27,.55);
  color:#d7e6f5;
  font-size:12px;
}
body.live-fullscreen #requests{
  position:absolute;
  z-index:25;
  left:12px;
  right:12px;
  top:72px;
  max-height:34vh;
  overflow:auto;
}
body.live-fullscreen #empty{
  z-index:5;
}
@media (orientation:landscape){
  body.live-fullscreen #expSession #switchCam{
    right:14px;
    bottom:72px;
  }
  body.live-fullscreen #expSession #stopExp{
    left:14px;
    right:auto;
    width:180px;
  }
  body.live-fullscreen #preview .pricebox{
    left:14px;
    right:auto;
    bottom:14px;
    width:min(430px,52vw);
  }
  body.live-fullscreen #preview #leave{
    left:auto;
    right:14px;
    bottom:14px;
    width:150px;
  }
}


/* v0.9.18 optional bidirectional video */
.viewer-pip{
  position:absolute;
  right:12px;
  top:80px;
  width:min(30vw,180px);
  aspect-ratio:9/16;
  object-fit:cover;
  border-radius:16px;
  border:2px solid rgba(255,255,255,.85);
  background:#000;
  z-index:30;
  box-shadow:0 8px 28px rgba(0,0,0,.35);
}
body.live-fullscreen #shareMyView{
  position:absolute;
  z-index:22;
  left:10px;
  bottom:calc(68px + max(10px,env(safe-area-inset-bottom)));
  width:auto;
  min-width:150px;
  background:rgba(26,83,115,.86);
  backdrop-filter:blur(7px);
}
body.live-fullscreen #shareMyView.on{
  background:rgba(25,135,82,.9);
}
@media (orientation:landscape){
  .viewer-pip{
    width:min(24vw,220px);
    aspect-ratio:16/9;
    top:68px;
  }
  body.live-fullscreen #shareMyView{
    left:180px;
    bottom:14px;
  }
}

/* v0.9.19 separate Viewer media request controls */
body.live-fullscreen #requestVideo,
body.live-fullscreen #requestMic{
 position:absolute;z-index:22;bottom:calc(68px + max(10px,env(safe-area-inset-bottom)));
 width:auto;min-width:135px;background:rgba(26,83,115,.86);backdrop-filter:blur(7px);
}
body.live-fullscreen #requestVideo{left:10px}
body.live-fullscreen #requestMic{left:155px}
body.live-fullscreen #requestVideo.on,
body.live-fullscreen #requestMic.on{background:rgba(25,135,82,.9)}
@media (orientation:landscape){
 body.live-fullscreen #requestVideo{left:180px;bottom:14px}
 body.live-fullscreen #requestMic{left:325px;bottom:14px}
}

/* v0.9.22 responsive LIVE control dock. */
body.live-fullscreen #preview .viewerControls{position:absolute;z-index:24;left:10px;right:10px;bottom:max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:8px;border-radius:17px;background:rgba(4,15,27,.74);backdrop-filter:blur(9px)}
/* Keep the Explorer's full camera frame visible on the Viewer device.
   Landscape video on a portrait screen receives black letterbox space instead
   of being enlarged and cropped. Explorer's own camera preview is unchanged. */
#preview .video video,
body.live-fullscreen #preview .video video{object-fit:contain;object-position:center center;background:#000}
body.live-fullscreen #preview .viewerControls button{position:static!important;width:100%!important;min-width:0!important;padding:11px 6px;font-size:11px;white-space:nowrap}
body.live-fullscreen #preview .pricebox{top:calc(max(10px,env(safe-area-inset-top)) + 58px);bottom:auto;left:10px;right:auto;width:auto;max-width:calc(100vw - 20px);padding:8px 10px}
body.live-fullscreen #preview .pricebox b{font-size:17px}
body.live-fullscreen #preview .pricebox span{display:none}
body.live-fullscreen #preview #jumpIn{min-width:96px;padding:10px}
#recordBtn{background:rgba(117,24,43,.9)}
#recordBtn.on{background:#df183f;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.recBadge{position:fixed;z-index:50;top:calc(max(10px,env(safe-area-inset-top)) + 64px);right:12px;padding:8px 11px;border-radius:999px;background:rgba(195,15,49,.92);color:#fff;font-weight:800;font-size:12px;letter-spacing:.5px;animation:recPulse 1.4s infinite}
@keyframes recPulse{50%{opacity:.72}}
@media (orientation:landscape){
 body.live-fullscreen #preview .viewerControls{left:210px;right:14px;grid-template-columns:repeat(5,minmax(90px,1fr))}
 body.live-fullscreen #preview .pricebox{top:auto;left:14px;bottom:14px;width:186px}
 body.live-fullscreen #preview .pricebox{display:block}
 body.live-fullscreen #preview #jumpIn{width:100%;margin-top:6px}
 .recBadge{top:12px;right:14px}
}