/* ============================================================
   PlayHub — Sticky right-rail ad (300×600 skyscraper)
   ============================================================ */

.ph-ad{
  position:relative;
  margin:0 auto;
  max-width:100%;
  text-align:center;
}
.ph-ad .ad-slot,
.ph-ad .ad-slot > *{
  max-width:100%;
  margin:0 auto;
}
.ph-ad .ad-slot iframe,
.ph-ad .ad-slot img{
  max-width:100%;
  border-radius:14px;
  display:block;
  margin:0 auto;
}

.ph-ad-ph{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:16px;
  background:linear-gradient(145deg,
    color-mix(in srgb,var(--panel) 88%,#000),
    color-mix(in srgb,var(--bg) 92%,#000));
  border:1px dashed color-mix(in srgb,var(--line) 70%,#555);
  color:var(--txt-dim);
  overflow:hidden;
}
.ph-ad-ph-label{
  font-weight:800;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 70%,var(--txt-dim));
}
.ph-ad-ph-size{
  font-size:12px;
  font-weight:700;
  opacity:.75;
}

.ph-ad--banner-lg{
  width:100%;
  max-width:600px;
  margin:24px auto 28px;
}
/* Play page — full-width horizontal 720×300 under player */
.ph-ad--banner-wide{
  width:100%;
  max-width:100%;
  margin:0 auto 24px;
}
.ph-ad--banner-wide .ph-ad-ph,
.ph-ad--banner-wide .ad-slot{
  width:100%;
  max-width:100%;
  aspect-ratio:720/300;
  min-height:clamp(80px, 26vw, 300px);
  max-height:300px;
}
.ph-ad--leaderboard{
  width:100%;
  max-width:728px;
  margin:0 auto;
}
.ph-ad--leaderboard .ph-ad-ph,
.ph-ad--leaderboard .ad-slot{
  min-height:90px;
  aspect-ratio:728/90;
}
.ph-ad--rectangle{
  width:100%;
  max-width:336px;
  margin:20px auto 24px;
}
.ph-ad--rectangle .ph-ad-ph,
.ph-ad--rectangle .ad-slot{
  min-height:250px;
  aspect-ratio:336/250;
}
.ph-ad--banner-lg .ph-ad-ph,
.ph-ad--banner-lg .ad-slot{
  min-height:300px;
  aspect-ratio:2/1;
}
/* Homepage featured banner — full width of content column (matches Featured Games grid) */
.ph-ad--banner-lg.ph-ad--home-featured{
  width:100%;
  max-width:100%;
  margin:8px 0 20px;
}
.ph-ad--banner-lg.ph-ad--home-featured .ph-ad-ph,
.ph-ad--banner-lg.ph-ad--home-featured .ad-slot{
  width:100%;
  max-width:100%;
  min-height:clamp(120px, 14vw, 220px);
  aspect-ratio:unset;
}
.ph-ad--banner-lg.ph-ad--home-featured .ad-slot iframe,
.ph-ad--banner-lg.ph-ad--home-featured .ad-slot ins,
.ph-ad--banner-lg.ph-ad--home-featured .ad-slot > *{
  width:100% !important;
  max-width:100% !important;
}

.ph-ad--skyscraper{
  width:100%;
  max-width:300px;
}
.ph-ad--skyscraper .ph-ad-ph,
.ph-ad--skyscraper .ad-slot{
  min-height:600px;
  aspect-ratio:1/2;
}

.ph-ad--card .ph-ad-ph,
.ph-ad--card .ad-slot{
  border-radius:18px;
  box-shadow:0 8px 28px color-mix(in srgb,var(--txt) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 65%,transparent);
}

/* ---- Sticky right rail ---- */
.ad-rail-close{
  position:absolute;top:6px;right:6px;z-index:2;
  width:28px;height:28px;border:none;border-radius:8px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
  color:var(--txt-dim,#9a93b0);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px color-mix(in srgb,var(--txt) 10%,transparent);
  transition:background .15s,color .15s,transform .12s;
}
.ad-rail-close svg{width:14px;height:14px;display:block}
.ad-rail-close:hover{background:var(--panel-2);color:var(--txt);transform:scale(1.06)}
.main-ad-rail{position:relative}
html.ad-rail-dismissed .main-ad-rail{display:none !important}
html.ad-rail-dismissed .main.main--ads.has-ad-rail{
  display:block;
  grid-template-columns:none;
  width:calc(100vw - var(--rail-w));
  margin-left:var(--rail-w);
}
html.ad-rail-dismissed body.rail-closed .main.main--ads.has-ad-rail{
  margin-left:0;width:100vw;
}
.main--ads{
  display:block;
  max-width:none;
  /* never override .main margin-top — fixed header clearance */
  margin-top:var(--top-h);
}
.main--ads .main-body{
  min-width:0;
  scroll-margin-top:calc(var(--top-h) + 12px);
}
.main-ad-rail{
  display:none;
}
@media (min-width:1280px){
  .main.main--ads.has-ad-rail{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:0 16px;
    align-items:start;
    width:calc(100vw - var(--rail-w));
    max-width:none;
    margin-top:var(--top-h);
    margin-right:0;
    margin-bottom:0;
    margin-left:var(--rail-w);
    padding-right:12px;
    box-sizing:border-box;
  }
  body.rail-closed .main.main--ads.has-ad-rail{
    margin-left:0;
    width:100vw;
  }
  .main--ads.has-ad-rail .main-ad-rail{
    display:block;
    justify-self:end;
    position:sticky;
    /* header (fixed) + main top padding + small gap — never tuck under topbar */
    top:calc(var(--top-h) + var(--ph-main-pad-y, 26px) + 10px);
    z-index:40;
    align-self:start;
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
    overflow:visible;
  }
  .main--ads.has-ad-rail .main-ad-rail .ph-ad--skyscraper{
    margin:0;
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
  }
  .main--ads.has-ad-rail .main-ad-rail .ph-ad--skyscraper .ph-ad-ph,
  .main--ads.has-ad-rail .main-ad-rail .ph-ad--skyscraper .ad-slot{
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
    min-height:min(600px, calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px));
    overflow:hidden;
  }
}

/* Game & play — inline horizontal slots (never vertical; sticky rail excluded) */
.game-page .ph-ad--inline-h,
.play-page .ph-ad--inline-h,
.ph-ad--inline-h{
  width:100% !important;
  max-width:100% !important;
  margin-left:0;
  margin-right:0;
  box-sizing:border-box;
}
.ph-ad--inline-h .ph-ad-ph,
.ph-ad--inline-h .ad-slot,
.ph-ad--inline-h .ad-slot--lazy{
  width:100% !important;
  max-width:100% !important;
  min-height:90px;
  height:auto;
  max-height:none;
  aspect-ratio:unset;
  box-sizing:border-box;
  display:block;
}
/* All media inside inline slots (lazy + eager) */
.ph-ad--inline-h img,
.ph-ad--inline-h iframe,
.ph-ad--inline-h ins,
.ph-ad--inline-h video,
.ph-ad--inline-h .ad-slot iframe,
.ph-ad--inline-h .ad-slot ins,
.ph-ad--inline-h .ad-slot img,
.ph-ad--inline-h .ad-slot a,
.ph-ad--inline-h .ad-slot > *,
.ph-ad--inline-h .ad-slot--lazy iframe,
.ph-ad--inline-h .ad-slot--lazy ins,
.ph-ad--inline-h .ad-slot--lazy img,
.ph-ad--inline-h .ad-slot--lazy > *{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:320px;
  object-fit:contain;
  object-position:center;
  display:block;
  margin-left:auto;
  margin-right:auto;
}
/* Neutralize legacy demo .ad styles when pasted into inline slots */
.ph-ad--inline-h .ad-slot .ad{
  width:100% !important;
  max-width:100% !important;
  display:block !important;
  min-height:0 !important;
  margin-top:0;
  flex-direction:unset !important;
}
.ph-ad--inline-h .ad-slot .ad .ad-label{display:none !important}

.ph-ad--game-below-hero{margin:0 0 32px}
.ph-ad--play-below{margin:0 0 24px}
.ph-ad--between-related{margin:8px auto 20px}

/* Play page — hero row: left ad | player | right ad (aligned height) */
.play-hero-row{
  --play-hero-h:600px;
  width:100%;
  max-width:100%;
  display:grid;
  gap:16px;
  align-items:stretch;
  margin:0 0 24px;
}
.play-hero-col{
  min-width:0;
}
.play-hero-col--ad{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:var(--play-hero-h);
  height:var(--play-hero-h);
}
.play-hero-col--player .player-wrap{
  min-height:var(--play-hero-h);
  height:var(--play-hero-h);
  display:flex;
  flex-direction:column;
}
.play-hero-col--player .player{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  aspect-ratio:unset;
  width:100%;
}
.play-hero-col--player .gamebar{
  flex:0 0 auto;
}
/* Side ad wrappers — center unit inside fixed 600px column */
.play-hero-col--ad .play-left-ad-rail,
.play-hero-col--ad .play-hero-ad-rail,
.play-hero-col--ad .main-ad-rail{
  position:relative;
  width:100%;
  max-width:300px;
  height:100%;
  min-height:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  top:auto;
  align-self:stretch;
}
.play-hero-col--ad .ph-ad--skyscraper,
.play-hero-col--ad .ph-ad--play-left-sky{
  width:100%;
  max-width:300px;
  height:100%;
  max-height:100%;
  min-height:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.play-hero-col--ad .ph-ad--skyscraper .ad-slot,
.play-hero-col--ad .ph-ad--skyscraper .ph-ad-ph,
.play-hero-col--ad .ph-ad--play-left-sky .ad-slot,
.play-hero-col--ad .ph-ad--play-left-sky .ph-ad-ph{
  width:100%;
  max-width:300px;
  height:auto;
  max-height:100%;
  min-height:0;
  aspect-ratio:unset;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.play-hero-col--ad .ad-slot iframe,
.play-hero-col--ad .ad-slot ins,
.play-hero-col--ad .ad-slot img,
.play-hero-col--ad .ad-slot > *{
  max-width:100% !important;
  max-height:100% !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain;
  margin:auto !important;
  display:block;
}
@media (min-width:1100px){
  .play-hero-row--left{
    grid-template-columns:300px minmax(0,1fr);
  }
  .play-hero-row--left.play-hero-row--right{
    grid-template-columns:300px minmax(0,1fr) 300px;
  }
}
@media (min-width:1280px){
  .play-hero-row--right:not(.play-hero-row--left){
    grid-template-columns:minmax(0,1fr) 300px;
  }
}
@media (max-width:1099px){
  .play-hero-col--left{
    display:none !important;
  }
  .play-hero-row--left:not(.play-hero-row--right){
    display:block;
  }
  .play-hero-row--left:not(.play-hero-row--right) .play-hero-col--player .player-wrap{
    min-height:0;
    height:auto;
  }
  .play-hero-row--left:not(.play-hero-row--right) .play-hero-col--player .player{
    aspect-ratio:16/9;
    max-height:min(72vh,820px);
  }
}
@media (max-width:1279px){
  .play-hero-col--right{
    display:none !important;
  }
}
/* No side ads — default player sizing */
.play-hero-row:not(.play-hero-row--left):not(.play-hero-row--right) .play-hero-col--player .player-wrap{
  min-height:0;
  height:auto;
}
.play-hero-row:not(.play-hero-row--left):not(.play-hero-row--right) .play-hero-col--player .player{
  aspect-ratio:16/9;
  max-height:min(72vh,820px);
}

/* Legacy alias — play-stage maps to play-hero-row */
.play-stage{width:100%;max-width:100%}

/* Blog list + single post — left | content | right skyscrapers */
.main--blog-ads{
  display:block;
  max-width:none;
  margin-top:var(--top-h);
}
.main--blog-ads .main-body{
  min-width:0;
  scroll-margin-top:calc(var(--top-h) + 12px);
}
.blog-left-ad-rail{
  display:none;
}
@media (min-width:1280px){
  .main.main--blog-ads.has-blog-left-ad.has-blog-right-ad.has-ad-rail{
    display:grid;
    grid-template-columns:300px minmax(0,1fr) 300px;
    gap:0 16px;
    align-items:start;
    width:calc(100vw - var(--rail-w));
    max-width:none;
    margin-top:var(--top-h);
    margin-right:0;
    margin-bottom:0;
    margin-left:var(--rail-w);
    padding-right:12px;
    box-sizing:border-box;
  }
  .main.main--blog-ads.has-blog-left-ad:not(.has-blog-right-ad){
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:0 16px;
    align-items:start;
    width:calc(100vw - var(--rail-w));
    max-width:none;
    margin-top:var(--top-h);
    margin-right:0;
    margin-bottom:0;
    margin-left:var(--rail-w);
    padding-right:12px;
    box-sizing:border-box;
  }
  body.rail-closed .main.main--blog-ads.has-blog-left-ad,
  body.rail-closed .main.main--blog-ads.has-blog-left-ad.has-blog-right-ad.has-ad-rail{
    margin-left:0;
    width:100vw;
  }
  .main--blog-ads.has-blog-left-ad .blog-left-ad-rail{
    display:block;
    position:sticky;
    top:calc(var(--top-h) + var(--ph-main-pad-y, 26px) + 10px);
    z-index:40;
    align-self:start;
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
    overflow:visible;
  }
  .main--blog-ads.has-blog-right-ad.has-ad-rail .main-ad-rail{
    display:block;
    justify-self:end;
    position:sticky;
    top:calc(var(--top-h) + var(--ph-main-pad-y, 26px) + 10px);
    z-index:40;
    align-self:start;
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
    overflow:visible;
  }
  .main--blog-ads .blog-left-ad-rail .ph-ad--skyscraper,
  .main--blog-ads.has-blog-right-ad .main-ad-rail .ph-ad--skyscraper{
    margin:0;
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
  }
  .main--blog-ads .blog-left-ad-rail .ph-ad--skyscraper .ph-ad-ph,
  .main--blog-ads .blog-left-ad-rail .ph-ad--skyscraper .ad-slot,
  .main--blog-ads.has-blog-right-ad .main-ad-rail .ph-ad--skyscraper .ph-ad-ph,
  .main--blog-ads.has-blog-right-ad .main-ad-rail .ph-ad--skyscraper .ad-slot{
    max-height:calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px);
    min-height:min(600px, calc(100vh - var(--top-h) - var(--ph-main-pad-y, 26px) - 20px));
    overflow:hidden;
  }
}
@media (max-width:1279px){
  .main--blog-ads .blog-left-ad-rail{
    display:none !important;
  }
  .main.main--blog-ads.has-blog-left-ad:not(.has-blog-right-ad){
    display:block;
    width:calc(100vw - var(--rail-w));
    margin-left:var(--rail-w);
  }
  body.rail-closed .main.main--blog-ads.has-blog-left-ad:not(.has-blog-right-ad){
    margin-left:0;
    width:100vw;
  }
}

/* Header banner — below fixed topbar, site-wide */
.ph-ad-header-wrap{
  width:100%;
  max-width:100%;
  padding:8px 12px 0;
  box-sizing:border-box;
  margin-left:var(--rail-w, 0);
}
body.rail-closed .ph-ad-header-wrap{
  margin-left:0;
}
.ph-ad--site-header{
  width:100%;
  max-width:min(728px, calc(100vw - var(--rail-w, 0) - 24px));
  margin:0 auto 8px;
}
.ph-ad--site-header .ph-ad-ph,
.ph-ad--site-header .ad-slot{
  min-height:90px;
  max-height:120px;
}

/* Lazy slots reserve space until js/ads.js mounts code */
.ph-ad[data-ad-lazy="1"] .ph-ad-ph{
  opacity:.92;
}

/* Mobile: max one above-the-fold ad — hide secondary units when header ad is active */
@media (max-width:767px){
  body.ph-mobile-header-ad .ph-ad--game-below-hero,
  body.ph-mobile-header-ad .ph-ad--home-featured{
    display:none !important;
  }
  .main.main--ads.has-ad-rail,
  html.ad-rail-dismissed body.rail-closed .main.main--ads.has-ad-rail{
    width:100%!important;
    margin-left:0!important;
  }
  .ph-ad-header-wrap{
    margin-left:0;
    padding:6px 10px 0;
  }
  .ph-ad--site-header{
    max-width:100%;
  }
  .ph-ad--site-header .ph-ad-ph,
  .ph-ad--site-header .ad-slot{
    min-height:50px;
    max-height:100px;
  }
}

/* Mobile / tablet: rail hidden, content full-width */
@media (max-width:1279px){
  .main--ads.has-ad-rail .main-ad-rail{
    display:none;
  }
}
@media (max-width:767px){
  .ph-ad--inline-h .ph-ad-ph,
  .ph-ad--inline-h .ad-slot{
    min-height:72px;
  }
  .ph-ad--banner-lg:not(.ph-ad--home-featured):not(.ph-ad--inline-h) .ph-ad-ph,
  .ph-ad--banner-lg:not(.ph-ad--home-featured):not(.ph-ad--inline-h) .ad-slot{
    min-height:150px;
    aspect-ratio:auto;
  }
  .ph-ad--banner-lg.ph-ad--home-featured .ph-ad-ph,
  .ph-ad--banner-lg.ph-ad--home-featured .ad-slot{
    min-height:110px;
  }
  .main-ad-rail .ph-ad--skyscraper .ph-ad-ph,
  .main-ad-rail .ph-ad--skyscraper .ad-slot{
    min-height:400px;
    aspect-ratio:auto;
  }
}