/* =========================================================
   CSS: Root / Variables
   ======================================================== */
:root {
  --bg:#000;
  --fg:#fff;
  --muted:#888;
  --logo:60px;
  --headline:clamp(28px, 6.5vw, 56px);
  --twb:#00D9FF;
  --safeSide:16px;

  /* === BOTTOM VIDEO (MATCH TWINCHER) === */
  --navPadX:12px;
  --navIconBox:48px;
  --navH:78px;
  --iconSide:32px;
  --iconBottom:28px;

  --glass: rgba(255,255,255,.06);
  --glassStroke: rgba(255,255,255,.12);
  --gateMuted:#A5A5A5;
  --gateBlue:#00E5E5;
  --gateWhite:#FFFFFF;
  --cardMax:520px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display:grid; grid-template-rows:auto 1fr auto; min-height:100dvh;
  position:relative; overflow:hidden;
}

/* =========================================================
   CSS: Video Stack (DO NOT TOUCH)
   ========================================================= */
/* === VIDEO STACK (TWINCHER STYLE) === */
#video-stack{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-1;
  background:#000;
}
.twincher-layer{
  position:absolute;
  inset:0;
  transform:translateY(0px);
  will-change:transform;
  background:#000;
}
.twincher-layer video,
.twincher-layer img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
  display:none;
}
.twincher-layer img{
  opacity:0;
  transition: opacity 120ms linear;
  -webkit-user-drag:none;
  user-select:none;
}

/* =========================================================
   CSS: Top UI
   ========================================================= */
/* === TOP LEFT LIVE === */
.top{
  position:fixed;
  top:2px;
  left:4px;
  right:auto;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:3;
  padding:0;
  background:none;
  border:0;
}

.top img{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

/* === TOP CENTER TOGGLE === */
.top-toggle{
  position: fixed;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  color:#fff;
  cursor:pointer;
  z-index:3;
  -webkit-tap-highlight-color:transparent;
}
.top-toggle .ph{
  font-size:38px;
  color: rgba(255,255,255,0.8);
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}

.top-toggle.spin .ph{
  animation: uiArrowSpin 1600ms cubic-bezier(.14,.92,.18,1) forwards;
}

@keyframes uiArrowSpin{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(720deg); }
}

/* === STAGE (EMPTY HERO) === */
.stage{
  display:grid; place-items:center;
  padding:24px var(--safeSide);
  text-align:center; position:relative; z-index:1;
  padding-bottom: calc(var(--navH) + 28px);
}

/* =========================================================
   CSS: Right Column
   ========================================================= */
/* === SCRUBBING MODE (hide right column during seek) === */
.side.scrubbing{
  opacity:0;
  pointer-events:none;
  transition:opacity 120ms ease;
}

/* === RIGHT SIDE ACTIONS === */
.side{
  position: fixed;
  right: 6px;
  top: 59%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ✅ AVATAR (40x40) — overlay above column (does NOT push the column down) */
.stack.avatar-stack{
  position: absolute;
  left: 0;
  right: 0;
  top: -55px; /* 40px avatar + 10px gap */
  pointer-events: auto;
}
.avatar{
  width:40px;
  height:40px;
  border-radius:999px;
  object-fit:cover;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.side button{
  appearance: none;
  background: transparent;
  border: 0;
  width: 48px;
  height: 48px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
}
.side .ph{
  font-size: var(--iconSide);
}
#likeIcon{transition:transform .12s ease,color .12s ease;}
#likeIcon.pop{transform:scale(1.18);}
#likeIcon.liked{color:#FF0000;}
.count {
  font-size: 11px;
  color: rgba(255,255,255,0.9);
  user-select: none;
  line-height: 1;
  margin-top: -5px;
}

/* =========================================================
   CSS: Bottom Nav
   ========================================================= */
/* === BOTTOM NAV (MATCH TWINCHER) === */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -6px;
  z-index: 2;
  background: transparent;
  padding: 0 var(--navPadX) env(safe-area-inset-bottom);
  height: calc(var(--navIconBox) + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav button {
  appearance: none;
  background: transparent;
  border: 0;
  width: var(--navIconBox);
  height: var(--navIconBox);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  outline: none;
  box-shadow: none;
}
.nav i {
  font-size: var(--iconBottom);
}

/* =========================================================
   CSS: Seekbar (LAST STEP)
   ========================================================= */
/* === VIDEO SEEK BAR (PILL) === */
.seek-wrap{
  position:absolute;
  left:var(--navPadX);
  right:var(--navPadX);
  bottom: calc(var(--navIconBox) - 5px);
  top:auto;

  /* huge hitbox */
  height:36px;
  display:none;               /* necháváme jako u tebe (showSeek řídí) */
  align-items:flex-end;
  justify-content:center;
  padding-bottom:0px;

  z-index:3;
  pointer-events:auto;

  /* seek má prioritu */
  touch-action:none;
}

.seek-pill{
  width:100%;
  height:3px;
  border-radius:999px;
  background: rgba(255,255,255,.18);
  position:relative;
  overflow:visible;

  transition: height 140ms ease, background 140ms ease;
}

.seek-pill.is-active{
  height:8px;
  background: rgba(255,255,255,.16);
}

.seek-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  border-radius:999px;
  background: rgba(255,255,255,.34);
}

/* === TIMER === */
.seek-time{
  position:absolute;
  left:50%;
  transform:translateX(-50%) scaleX(0.90);
  bottom:44px;

  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:30px;
  font-weight:600;
  letter-spacing:0.02em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 14px rgba(0,0,0,.55);

  opacity:0;
  transition:opacity 140ms ease;
  pointer-events:none;
  user-select:none;
  white-space:nowrap;
}

.seek-time.is-active{ opacity:1; }

.seek-time .t-cur{
  color:rgba(255,255,255,.96);
  font-weight:600;
}

.seek-time .t-sep{
  color:rgba(255,255,255,.60);
  font-weight:600;
  font-size:0.60em;
  letter-spacing:0;
  padding:0 18px;
  position:relative;
  top:-5px;
  transform:rotate(-5deg);
}

.seek-time .t-tot{
  color:rgba(255,255,255,.60);
  font-weight:600;
}

/* =========================================================
   CSS: (Other) Profile Modal
   ========================================================= */
/* === PROFILE MODAL === */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:5}
.modal-backdrop.show{display:flex}
.modal{width:min(92vw,560px);background:var(--glass);border:1px solid var(--glassStroke);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:20px}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 12px}
.modal-title{margin:0;font-size:18px;font-weight:700;letter-spacing:.02em}
.modal-close{appearance:none;background:transparent;border:0;color:#fff;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.note{font-size:12px;color:#cbd5e1;opacity:.7;text-align:center;margin-top:6px}
.btn{appearance:none;border:0;border-radius:999px;padding:12px 18px;font-weight:600;cursor:pointer}
.btn.secondary{background:rgba(255,255,255,.1);color:#fff}
.btn.primary{background:rgba(255,255,255,.1);color:#fff}

/* =========================================================
   CSS: Age Gate
   ========================================================= */
/* === AGE GATE OVERLAY === */
#gateOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
#gateOverlay.hidden{ display:none; }

.wrap{
  height:100svh;
  padding:24px 18px calc(24px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
}
.card{
  width:min(var(--cardMax), 100%);
  height:100%;
  max-height:calc(100svh - 48px - env(safe-area-inset-bottom));
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;

  /* keep the whole gate visually centered */
  justify-content:center;
}
.top-g{
  flex:0 0 auto;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* === GATE BRAND TEXT === */
.gate-brand{
  font-size:32px;
  font-weight:700;
  color:#fff;
  letter-spacing:0.01em;
  margin-bottom:20px;
  user-select:none;
}

.legalScroll{
  flex:0 1 auto;
  width:100%;
  max-width:44ch;

  /* keep it centered and not pushing everything down */
  max-height:34svh;

  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 0;
  margin:0 auto 18px;
}
.legal{
  font-size:14px;
  line-height:1.45;
  color:var(--gateMuted);
  opacity:0.95;
  margin:0;
  text-align:left;
}

/* === GATE BOTTOM (BUTTON + CONSENT LINKS) === */
.bottom{
  flex:0 0 auto;
  width:100%;
  padding-top:8px;
  padding-bottom:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* === THE BLUE PILL === */
.enterBtn{
  width: fit-content;
  max-width:320px;
  min-width:280px;
  margin:0 auto;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;

  border:0;
  border-radius:999px;
  padding:10px 34px;
  font-weight:800;
  letter-spacing:0;
  color:#FFFFFF;
  background:#FE2C55;
  box-shadow:0 10px 26px rgba(10,102,255,0.35);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.enterBtn:active{
  transform:scale(0.98);
  filter:brightness(0.92);
}

.enterTop{
  font-size:14px;
  line-height:1;
  text-transform:none;
  letter-spacing:0;
  opacity:1;
}

.enterBottom{
  font-size:14px;
  line-height:1;
  text-transform:none;
  letter-spacing:0.02em;
  opacity:1;
}

/* === CONSENT TEXT UNDER THE PILL === */
.consent{
  width:100%;
  max-width:44ch;
  margin-top:20px;
  font-size:13px;
  line-height:1.45;
  color:var(--gateMuted);
  text-align:center;
  opacity:0.95;
}
.consent a{
  color:var(--gateMuted);
  font-weight:800;
}

/* FIX: right column icon size (Fill/Regular) */
aside .stack i{
  font-size: 34px;
  line-height: 1;
}
aside .stack i { 
  color: rgba(255,255,255,0.95); 
}

.icon-talk{
width:32px;
height:32px;
display:block;
filter:brightness(0) invert(1);
}

.icon-bookmark{
width:34px;
height:34px;
display:block;
filter:brightness(0) invert(1);
}

.icon-share{
width:35px;
height:35px;
display:block;
filter:brightness(0) invert(1);
transform: translateY(4px);   
}

/* Avatar micro-adjust */
.stack.avatar-stack{
  top: -65px;
}

/* Fik.Porn LOGO EFEKT */
.gate-brand{
  font-size:32px;
  font-weight:700;
  color:#fff;
  letter-spacing:-0.01em;
  margin-bottom:20px;
  user-select:none;
  white-space:nowrap;
}

.gate-brand-fik,
.gate-brand-dot,
.gate-brand-porn{
  display:inline-block;
  transform-origin:center;
  will-change:transform;
}

.gate-brand-fik{
  animation:fikPulse 9s linear infinite;
  margin-right:2px; 
}

.gate-brand-dot{
  animation:dotPulse 9s linear infinite;
}

.gate-brand-porn{
  animation:pornPulse 9s linear infinite;
}

/* FIK */
@keyframes fikPulse{

  0%,32%{ transform:translateY(0) scale(1); }

  33%{ transform:translateY(-14px) scale(1.70); }
  34%{ transform:translateY(6px) scale(.80); }
  35%{ transform:translateY(-6px) scale(1.20); }
  36%{ transform:translateY(3px) scale(.92); }
  37%{ transform:translateY(-2px) scale(1.05); }
  38%{ transform:translateY(0) scale(1); }

}

/* DOT */
@keyframes dotPulse{

  0%,65%{ transform:translateY(0) scale(1); }

  66%{ transform:translateY(-16px) scale(1.9); }
  67%{ transform:translateY(8px) scale(.70); }
  68%{ transform:translateY(-7px) scale(1.25); }
  69%{ transform:translateY(3px) scale(.90); }
  70%{ transform:translateY(-2px) scale(1.05); }
  71%{ transform:translateY(0) scale(1); }

}

/* PORN */
@keyframes pornPulse{

  0%,86%{ transform:translateY(0) scale(1); }

  87%{ transform:translateY(-14px) scale(1.70); }
  88%{ transform:translateY(6px) scale(.80); }
  89%{ transform:translateY(-6px) scale(1.20); }
  90%{ transform:translateY(3px) scale(.92); }
  91%{ transform:translateY(-2px) scale(1.05); }
  92%{ transform:translateY(0) scale(1); }

}

/* [+] JAKO TikTok */
.add-btn{
  position:relative;
  width:52px;
  height:32px;
  border:0;
  background:transparent;
  padding:0;
}

/* základ pilulky */
.pill{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:36px;
  height:28px;
  border-radius:8px;
}

/* střed */
.pill-core{
  background:#fff;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* levá barevná */
.pill-left{
  background:#2af0ea;
  transform:translate(calc(-50% - 4px),-50%);
  z-index:1;
}

/* pravá barevná */
.pill-right{
  background:#fe2858;
  transform:translate(calc(-50% + 4px),-50%);
  z-index:1;
}

/* plus */
.add-plus-svg{
  width:22px;
  height:22px;
  display:block;
  transform: translate(-1px, 1.6px);
}