html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:#000;}
#app{height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.frame{
  position:relative;
  width:min(420px, 100vw);
  aspect-ratio: 9 / 16;
  max-height:100vh;
  overflow:hidden;
}
.media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.placeholder{position:absolute;inset:0;background:#111;}
.button{
  position:absolute;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:transparent;
  opacity:0;
  cursor:pointer;
  border-radius:12px;
}
.blockedHint{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,0.55);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  pointer-events:none;
  display:none;
}
.blockedHint.show{display:block;}