/* =========================================================
   QUIZVIDS PLAYER – iPhone-safe stable CSS
   Goals:
   • Black background everywhere
   • Video always fully visible
   • No clipping in portrait on iPhone
   • Matte disabled for now
   ========================================================= */

:root{
  --bg: #000;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.70);
  --btn: rgba(255,255,255,0.12);
  --btnBorder: rgba(255,255,255,0.22);
}

/* ----------------- Global ----------------- */

html, body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  background:#000;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}

*, *::before, *::after{
  box-sizing:inherit;
}

body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:#000;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* ----------------- Layout ----------------- */

.wrap{
  width:min(1280px,96vw);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:12px;
  padding-bottom:12px;
}

/* ----------------- Top bar ----------------- */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-weight:600;
  font-size:12px;
  color:var(--muted);
}

.topbar .left,
.topbar .right{
  white-space:nowrap;
}

.topbar .center{
  flex:1;
  text-align:center;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ----------------- Video stage ----------------- */

.stage{
  display:flex;
  justify-content:center;
  width:100%;
}

.videoWrap{
  position:relative;
  width:100%;
  max-width:1280px;
  background:#000;
  border-radius:18px;
  overflow:hidden;
  outline:1px solid rgba(255,255,255,0.12);
}

/* ----------------- Video ----------------- */

video{
  display:block;
  width:100%;
  height:auto !important;
  max-height:none !important;
  min-height:0;
  background:#000;
  object-fit:contain;
  border-radius:18px;
}

/* Kill any overlay for testing / iPhone safety */
.matte{
  display:none !important;
}

/* ----------------- Controls ----------------- */

.controls{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.controls .group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button{
  appearance:none;
  border:1px solid var(--btnBorder);
  background:var(--btn);
  color:var(--text);
  padding:10px 16px;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

button:active{
  transform:translateY(1px);
}

/* ----------------- Mobile tuning ----------------- */

@media (max-width:520px){
  .wrap{
    width:96vw;
    gap:10px;
    padding-top:10px;
    padding-bottom:10px;
  }

  .topbar{
    font-size:10px;
  }

  button{
    padding:12px 18px;
    font-size:16px;
  }

  .videoWrap,
  video{
    border-radius:16px;
  }
}