/* ads.css - the look of every ad spot on the site (spots are placed by tools/ads/build-ads.js, ads come from /ads/ads.config.json).
   Each box keeps its exact size before the ad loads, so nothing on the page jumps. */
.rm-ad{display:block;box-sizing:border-box;width:100%;max-width:760px;margin:22px auto;padding:0 16px;text-align:center;font-family:Arial,Helvetica,sans-serif;clear:both}
.rm-ad[hidden]{display:none!important}
.rm-ad-label{display:block;margin:0 0 6px;color:#9a9196;font-size:10px;line-height:12px;letter-spacing:.2em;text-transform:uppercase}
.rm-ad-box{position:relative;box-sizing:border-box;width:100%;max-width:728px;margin:0 auto;aspect-ratio:728/90;overflow:hidden;border:1px solid rgba(226,43,58,.42);border-radius:10px;background:#050507;transition:border-color .2s,box-shadow .2s}
.rm-ad-box:hover,.rm-ad-box:focus-within{border-color:#e22b3a;box-shadow:0 0 16px rgba(226,43,58,.25)}

/* the ad itself: one link that fills the box */
.rm-ad-link{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#f4f0f2;text-decoration:none}
.rm-ad-link:focus-visible{outline:2px solid #ff354d;outline-offset:-3px;border-radius:9px}
.rm-ad-link picture,.rm-ad-link img{display:block;width:100%;height:100%}
.rm-ad-link img{object-fit:cover}
.rm-ad-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* text ads (type "html" in the config) */
.rm-ad-link.is-html{justify-content:space-between;gap:16px;padding:0 24px;background:linear-gradient(120deg,#2a0309,#070708 60%);text-align:left}
.rm-ad-txt{min-width:0}
.rm-ad-txt b{display:block;color:#f4f0f2;font:900 20px/1.2 'Orbitron','Arial Black',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.rm-ad-txt span{display:block;margin-top:4px;color:#c9b8bd;font-size:14px;line-height:1.3}
.rm-ad-cta{flex:none;padding:9px 16px;border-radius:8px;background:#e22b3a;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

/* side box: 300x250, computers only */
.rm-ad-side{width:300px;max-width:100%;margin:24px 0 0 auto;padding:0}
.rm-ad-side .rm-ad-box{width:300px;height:250px;aspect-ratio:auto}
.rm-ad-side .rm-ad-link.is-html{flex-direction:column;justify-content:center;gap:18px;padding:20px;text-align:center}
.rm-ad-side .rm-ad-txt span{margin-top:10px}
@media(max-width:1099px){.rm-ad-side{display:none!important}}
/* arcade pages already have side padding, so the banner can use the full 320px on phones */
.content .rm-ad{padding-left:0;padding-right:0}

/* phones: top and bottom banners become 320x50 */
@media(max-width:767px){
  .rm-ad{margin:16px auto}
  .rm-ad-top .rm-ad-box,.rm-ad-bottom .rm-ad-box{max-width:320px;aspect-ratio:320/50;border-radius:8px}
  .rm-ad-top .rm-ad-link.is-html,.rm-ad-bottom .rm-ad-link.is-html{gap:8px;padding:0 10px}
  .rm-ad-top .rm-ad-txt b,.rm-ad-bottom .rm-ad-txt b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rm-ad-top .rm-ad-txt span,.rm-ad-bottom .rm-ad-txt span{margin-top:1px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rm-ad-top .rm-ad-cta,.rm-ad-bottom .rm-ad-cta{padding:5px 9px;border-radius:6px;font-size:10px}
}

@media(prefers-reduced-motion:reduce){.rm-ad-box{transition:none}}