/* Ojerk V18 — mobile-first header, centered controls and continuous live player. */

:root{
  --oj-v18-vh:100dvh;
  --oj-v18-header-height:62px;
  --oj-v18-control:42px;
}

/* Every close control uses real centered geometry instead of a font glyph. */
.oj-language-close,
.oj-explore-close,
.oj-v13-filter-panel>header button[data-oj-v13-filter-close],
.oj-mobile-filter-head button[data-oj-filter-close]{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 var(--oj-v18-control)!important;
  width:var(--oj-v18-control)!important;
  height:var(--oj-v18-control)!important;
  min-width:var(--oj-v18-control)!important;
  min-height:var(--oj-v18-control)!important;
  padding:0!important;
  overflow:hidden;
  color:#fff!important;
  font-size:0!important;
  line-height:0!important;
}
.oj-language-close::before,.oj-language-close::after,
.oj-explore-close::before,.oj-explore-close::after,
.oj-v13-filter-panel>header button[data-oj-v13-filter-close]::before,
.oj-v13-filter-panel>header button[data-oj-v13-filter-close]::after,
.oj-mobile-filter-head button[data-oj-filter-close]::before,
.oj-mobile-filter-head button[data-oj-filter-close]::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:17px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
}
.oj-language-close::before,.oj-explore-close::before,
.oj-v13-filter-panel>header button[data-oj-v13-filter-close]::before,
.oj-mobile-filter-head button[data-oj-filter-close]::before{transform:translate(-50%,-50%) rotate(45deg)}
.oj-language-close::after,.oj-explore-close::after,
.oj-v13-filter-panel>header button[data-oj-v13-filter-close]::after,
.oj-mobile-filter-head button[data-oj-filter-close]::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* The hamburger becomes one perfectly centered close icon while the menu is open. */
.oj-mobile-menu-button{position:relative;overflow:hidden}
.oj-mobile-menu-button span{position:absolute!important;left:50%;top:50%;margin:0!important;transition:transform .2s ease,opacity .16s ease}
.oj-mobile-menu-button span:nth-child(1){transform:translate(-50%,calc(-50% - 6px))}
.oj-mobile-menu-button span:nth-child(2){transform:translate(-50%,-50%)}
.oj-mobile-menu-button span:nth-child(3){transform:translate(-50%,calc(-50% + 6px))}
.oj-mobile-menu-button[aria-expanded="true"] span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.oj-mobile-menu-button[aria-expanded="true"] span:nth-child(2){opacity:0}
.oj-mobile-menu-button[aria-expanded="true"] span:nth-child(3){transform:translate(-50%,-50%) rotate(-45deg)}

/* Layering: live player stays above content but never above menus or filters. */
.oj-site-header{z-index:1200!important}
.oj-player-column.is-oj-floating{z-index:1100!important}
.oj-mobile-sticky-cta{z-index:1120!important}
.oj-explore-overlay{z-index:120000!important}
.oj-v13-filter-overlay{z-index:120100!important}
.oj-language-overlay{z-index:120200!important}
body.oj-v18-any-overlay-open .oj-player-column.is-oj-floating{z-index:1000!important}

/* Player continuity: the exact iframe/video node is never hidden or detached. */
.oj-player[data-oj-player-stage]{
  isolation:isolate;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.oj-player[data-oj-player-stage] iframe,
.oj-player[data-oj-player-stage] video,
.oj-player[data-oj-player-stage] .webcam-embed-container{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.oj-player-column.is-oj-floating{
  width:min(500px,calc(100vw - 36px));
  right:18px;
  bottom:18px;
  left:auto;
  top:auto;
  min-width:0;
  will-change:transform;
}
.oj-player-column.is-oj-floating .oj-player{overflow:hidden;background:#000!important}
.oj-player-column.is-oj-floating .oj-player::before{display:none!important}

/* Tablet/mobile header: logo + language + menu, without crowded duplicate actions. */
@media(max-width:782px){
  :root{--oj-v18-control:40px}
  .oj-site-header{
    position:sticky!important;
    top:0!important;
    background:rgba(7,8,11,.97)!important;
    border-bottom-color:rgba(255,255,255,.09)!important;
    box-shadow:0 12px 34px rgba(0,0,0,.24);
  }
  .admin-bar .oj-site-header{top:46px!important}
  .oj-header-main{
    min-height:60px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:8px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }
  .oj-brand-wrap{min-width:0!important;overflow:hidden}
  .oj-wordmark{font-size:clamp(23px,7vw,28px)!important}
  .custom-logo{max-width:min(44vw,168px)!important;max-height:38px!important}
  .oj-utility-nav{display:flex!important;align-items:center!important;margin:0!important;gap:0!important}
  .oj-utility-nav>*:not(.oj-language-button){display:none!important}
  .oj-language-button{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.11)!important;
    border-radius:11px!important;
    background:#11141a!important;
  }
  .oj-language-button>svg:first-child{width:18px!important;height:18px!important}
  .oj-language-button .oj-language-name,
  .oj-language-button .oj-language-code,
  .oj-language-button .oj-language-chevron{display:none!important}
  .oj-mobile-menu-button{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    display:flex!important;
    flex:0 0 40px!important;
    border-color:rgba(255,255,255,.11)!important;
    background:#11141a!important;
  }
  /* The old dropdown bar is retired on mobile; the full explorer is the menu. */
  .oj-category-bar{display:none!important}

  .oj-explore-overlay{inset:0!important;padding:0!important}
  .oj-explore-panel{
    width:100%!important;
    height:var(--oj-v18-vh)!important;
    max-height:var(--oj-v18-vh)!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .oj-explore-panel>header{
    min-height:68px!important;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important;
  }
  .oj-explore-panel h2{font-size:25px!important}
  .oj-explore-content{grid-template-columns:1fr!important;gap:28px!important;padding:24px 16px!important}
  .oj-explore-links{grid-template-columns:1fr!important}
  .oj-explore-panel>footer{padding:17px 16px calc(17px + env(safe-area-inset-bottom))!important}

  .oj-language-overlay{padding:0!important;align-items:stretch!important}
  .oj-language-panel{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:var(--oj-v18-vh)!important;
    max-height:var(--oj-v18-vh)!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
  }
  .oj-language-panel>header{min-height:68px!important;padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important}
  .oj-language-content{max-height:none!important;height:calc(var(--oj-v18-vh) - 68px)!important;padding:14px 14px calc(18px + env(safe-area-inset-bottom))!important}
  .oj-language-grid{grid-template-columns:1fr!important;gap:7px!important}
  .oj-language-grid button{min-height:56px!important}

  .oj-v13-filter-overlay{align-items:stretch!important;justify-items:stretch!important}
  .oj-v13-filter-panel{
    width:100%!important;
    height:var(--oj-v18-vh)!important;
    max-height:var(--oj-v18-vh)!important;
    border:0!important;
    box-shadow:none!important;
  }
  .oj-v13-filter-panel>header{min-height:68px!important;padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important}
  .oj-v13-filter-fields{grid-template-columns:1fr!important;gap:12px!important;padding:16px!important;-webkit-overflow-scrolling:touch}
  .oj-v13-filter-fields label:first-child,.oj-v13-check{grid-column:auto!important}
  .oj-v13-filter-panel>footer{padding:14px 16px calc(14px + env(safe-area-inset-bottom))!important}

  /* Webcam profiles: stable 16:9 player and top-pinned continuous mini player. */
  .oj-v18-webcam-page .oj-main{padding-bottom:92px!important}
  .oj-v18-webcam-page .oj-single-layout{
    width:min(calc(100% - 16px),var(--oj-shell))!important;
    margin-top:8px!important;
    gap:12px!important;
  }
  .oj-v18-webcam-page .oj-player-column{min-width:0!important}
  .oj-v18-webcam-page .oj-player{
    aspect-ratio:16/9!important;
    min-height:0!important;
    margin-inline:0!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:12px!important;
  }
  .oj-v18-webcam-page .oj-model-profile{padding:18px!important;border-radius:14px!important}
  .oj-v18-webcam-page .oj-profile-title h1{font-size:clamp(28px,8vw,38px)!important}
  .oj-v18-webcam-page .oj-profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .oj-v18-webcam-page .oj-profile-stats>div{min-width:0!important}

  .oj-player-column.is-oj-floating{
    position:fixed!important;
    top:var(--oj-v18-header-height)!important;
    right:0!important;
    bottom:auto!important;
    left:0!important;
    width:100%!important;
    padding:6px max(6px,env(safe-area-inset-right)) 7px max(6px,env(safe-area-inset-left))!important;
    background:linear-gradient(180deg,rgba(5,6,8,.98),rgba(5,6,8,.93))!important;
    border-bottom:1px solid rgba(255,255,255,.09);
    box-shadow:0 18px 48px rgba(0,0,0,.48)!important;
    animation:none!important;
  }
  .admin-bar .oj-player-column.is-oj-floating{top:calc(46px + var(--oj-v18-header-height))!important}
  .oj-player-column.is-oj-floating .oj-player{
    width:100%!important;
    max-height:min(42dvh,360px)!important;
    aspect-ratio:16/9!important;
    border-radius:10px!important;
    box-shadow:0 10px 32px rgba(0,0,0,.45)!important;
  }
  .oj-player-sticky-placeholder.is-active{min-height:var(--oj-sticky-placeholder-height,1px)!important}

  /* Player actions become touch-friendly instead of a fragile horizontal scroller. */
  .oj-v18-webcam-page .oj-v1502-room-bar{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:1px!important;
    min-height:0!important;
    overflow:hidden!important;
    border-radius:11px!important;
    background:rgba(255,255,255,.08)!important;
  }
  .oj-v18-webcam-page .oj-v1502-room-tools{grid-column:1/-1;display:grid!important;grid-template-columns:repeat(3,1fr)!important}
  .oj-v18-webcam-page .oj-v1502-icon-action{width:auto!important;min-height:46px!important}
  .oj-v18-webcam-page .oj-v1601-chat-form{grid-column:1/-1;min-width:0!important;min-height:52px!important;border-left:0!important;background:#232126!important}
  .oj-v18-webcam-page .oj-v1601-chat-form input{min-width:0!important;min-height:52px!important;padding-left:14px!important}
  .oj-v18-webcam-page .oj-v1601-chat-send{height:52px!important}
  .oj-v18-webcam-page .oj-v1502-room-action{min-height:44px!important;padding:0 8px!important;border-left:0!important;background:#211f23!important;font-size:10px!important}
  .oj-v18-webcam-page .oj-v1502-room-action.is-tokens{display:flex!important}

  .oj-v18-webcam-page .oj-related{padding-top:32px!important;margin-top:18px!important}
  .oj-v18-webcam-page .oj-section-title{align-items:flex-end!important;gap:12px!important}
  .oj-v18-webcam-page .oj-section-title h2{font-size:clamp(24px,7vw,34px)!important}
  .oj-v18-webcam-page .oj-v17-model-tags-seo{margin-top:24px!important}
}

@media(max-width:520px){
  .oj-shell{width:min(calc(100% - 16px),var(--oj-shell))!important}
  .oj-v18-webcam-page .oj-single-layout{width:100%!important;padding-inline:8px!important}
  .oj-v18-webcam-page .oj-player-column.is-oj-floating{padding-inline:4px!important}
  .oj-v18-webcam-page .oj-player-column.is-oj-floating .oj-player{border-radius:8px!important}
  .oj-v18-webcam-page .oj-model-profile{padding:16px!important}
  .oj-v18-webcam-page .oj-profile-stats{grid-template-columns:1fr 1fr!important}
  .oj-v18-webcam-page .oj-v1601-sidebar-about{padding:16px!important}
  .oj-v18-webcam-page .oj-v17-bonus-cta{border-radius:13px!important}
  .oj-v18-webcam-page .oj-model-grid.related{gap:7px!important}
  .oj-v18-webcam-page .oj-mobile-sticky-cta{left:8px!important;right:8px!important;min-height:54px!important}
}

@media(prefers-reduced-motion:reduce){
  .oj-mobile-menu-button span,
  .oj-player-column.is-oj-floating{transition:none!important;animation:none!important}
}