/* === Czysty player – mobile-first === */
.simple-player { width: 100%; max-width: 100%; margin: 0 auto; }

.simple-player__stage{
  position: relative; width: 100%;
  background: #000; border-radius: 14px; overflow: hidden;
}

/* RATIO BOX 16:9 */
.simple-player__media{ position: relative; width: 100%; }
.simple-player__media::before{ content: ""; display:block; padding-top:56.25%; }

.simple-player__media.is-locked::after{
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.35); pointer-events:none;
}

/* Wideo */
.simple-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; outline:none; border-radius:14px;
}

/* === HUD: LIVE + licznik widzów === */
.hud{
  position:absolute; top:10px; left:10px; right:10px;
  display:flex; align-items:center; justify-content:space-between;
  z-index:4; pointer-events:none;
}

.hud__live{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(15, 9, 20, .55);
  border: 1px solid rgba(255,118,206,.35);
  padding:6px 10px; border-radius:999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.hud__dot{
  width:10px; height:10px; border-radius:50%;
  background:#ff375f; box-shadow:0 0 0 6px rgba(255,55,95,.18);
  animation: liveBlink 1.4s infinite ease-in-out;
}
@keyframes liveBlink {
  0%,100% { transform: scale(.9); opacity:.9; }
  50%     { transform: scale(1.15); opacity:1; }
}
.hud__label{
  color:#fff; font-weight:800; letter-spacing:.3px; font-size:12px;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}

.hud__viewers{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(15, 9, 20, .55);
  border: 1px solid rgba(168,85,247,.35);
  padding:6px 10px; border-radius:999px;
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.hud__eye{ font-size:13px; }
#viewersCount{
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.2px;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}

/* Overlay – przycisk start */
.spui-center{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:3;
}

/* Ukryj natywne UI (tam gdzie to możliwe) */
.simple-video::-webkit-media-controls,
.simple-video::-webkit-media-controls-enclosure,
.simple-video::-webkit-media-controls-overlay-play-button,
.simple-video::-webkit-media-controls-play-button,
.simple-video::-webkit-media-controls-timeline,
.simple-video::-webkit-media-controls-current-time-display,
.simple-video::-webkit-media-controls-time-remaining-display,
.simple-video::-webkit-media-controls-mute-button,
.simple-video::-webkit-media-controls-volume-slider,
.simple-video::-webkit-media-controls-fullscreen-button,
.simple-video::-webkit-media-controls-rewind-button,
.simple-video::-webkit-media-controls-return-to-realtime-button,
.simple-video::-webkit-media-controls-seek-back-button,
.simple-video::-webkit-media-controls-seek-forward-button { display:none !important; }

/* === START • LIVE – wygląd i animacje === */
.spui{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  border:0; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  pointer-events:auto;
}
.spui--playlive{
  padding:14px 20px; border-radius:999px;
  font-weight:700; font-size:15px; letter-spacing:.3px; color:#fff;
  background: linear-gradient(135deg, #ff3ea6 0%, #a855f7 100%);
  box-shadow:0 10px 30px rgba(255,62,166,.35);
  user-select:none; position:relative; overflow:hidden;
}
.spui--playlive:before{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  background: radial-gradient(closest-side, rgba(255,62,166,.35), transparent);
  filter: blur(8px); animation: livePulse 1.6s infinite ease-in-out; z-index:-1;
}
@keyframes livePulse { 0%{opacity:.5;transform:scale(.98)} 70%{opacity:.15;transform:scale(1.08)} 100%{opacity:.5;transform:scale(.98)} }
.spui__dot{ width:14px; height:14px; border-radius:50%; background:#ff375f; box-shadow:0 0 0 6px rgba(255,55,95,.15); }
.spui__label{ color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.25); }
.spui__shine{
  position:absolute; top:0; left:-120%; width:120%; height:100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform:skewX(-20deg); animation: shineSweep 2.5s infinite; pointer-events:none;
}
@keyframes shineSweep { 0%{left:-120%} 60%{left:-120%} 100%{left:120%} }
.spui__ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); opacity:.8; pointer-events:none; animation:ripple .6s ease-out forwards; }
@keyframes ripple { to{ transform:scale(1); opacity:0 } }
.spui__eq{ display:none; align-items:end; gap:3px; }
.spui__eq i{ display:block; width:3px; height:8px; background:#fff; opacity:.9; border-radius:2px; animation:eqBeat .5s infinite ease-in-out; }
.spui__eq i:nth-child(2){ animation-delay:.1s; height:12px; }
.spui__eq i:nth-child(3){ animation-delay:.2s; height:9px; }
@keyframes eqBeat { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
.spui.is-connecting .spui__dot{ display:none; }
.spui.is-connecting .spui__eq{ display:inline-flex; }
.spui.is-hidden{ opacity:0; pointer-events:none; transition: opacity .25s ease; }
@media (prefers-reduced-motion: reduce){ .spui--playlive:before, .spui__shine { animation: none; } }

/* === LOCKER (bez zmian wizualnych poza wcześniejszymi stylami) === */
.locker{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center; z-index:5;
}
.locker[aria-hidden="false"]{ display:flex; }

.locker__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.locker__card{
  position:relative; width:min(92%, 520px);
  border-radius:16px;
  background: linear-gradient(180deg, #16121A 0%, #0E0A11 100%);
  box-shadow: 0 10px 36px rgba(0,0,0,.55);
  padding: 18px 18px 16px;
  color:#fff; z-index:1;
}

.locker__head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.locker__dot{ width:10px; height:10px; border-radius:50%; background:#ff375f; box-shadow:0 0 0 6px rgba(255,55,95,.15); }
.locker__live{ font-weight:800; letter-spacing:.3px; color:#ff84cc; }
.locker__title{ font-weight:800; letter-spacing:.2px; opacity:.95; margin:0; font-size:1.05rem; }

.locker__body{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.locker__age{ display:flex; align-items:center; gap:10px; font-weight:800; margin: 8px 0 12px; user-select:none; }
.locker__age input{ position:absolute; opacity:0; width:0; height:0; }
.locker__age-box{ width:18px; height:18px; border-radius:6px; border:2px solid rgba(255,118,206,.8); display:inline-block; position:relative; }
.locker__age input:checked + .locker__age-box{ background:rgba(255,118,206,.15); }
.locker__age input:checked + .locker__age-box::after{ content:""; position:absolute; left:4px; top:0px; width:6px; height:12px; border:2px solid #ffd6f3; border-left:0; border-top:0; transform:rotate(45deg); }

.locker__actions{ width:100%; display:flex; justify-content:center; }
.locker__btn{ display:inline-block; text-decoration:none; text-align:center; padding:10px 16px; border-radius:999px; font-weight:800; letter-spacing:.3px; transition:all .2s ease; margin:2px auto 0; font-size:.95rem; max-width:100%; }
.locker__btn--outline{ border:2px solid rgba(255,118,206,.7); color:#ffd6f3; background:transparent; box-shadow:none; }
.locker__btn--outline:hover{ border-color:rgba(255,118,206,.95); color:#fff; background:rgba(255,118,206,.08); }
.locker__btn--outline:active{ transform:translateY(1px); }
.locker__btn.is-disabled{ opacity:.5; pointer-events:none; border-color:rgba(255,118,206,.45); color:#eec7e6; }

@media (max-width: 360px){
  .locker__title{ font-size:1.08rem; }
  .locker__btn{ padding:10px 16px; font-size:.9rem; }
}