/* UNLUCKY CASINO ads (js/ads.js): the ad units, the rotating ad spots, the mini page every ad opens into, and the ad rolodex. Loaded on every page. */

/* example ads under each template: real phone size, stock-video backgrounds, animated logos */
.ex { display: grid; gap: 8px; justify-items: center; margin: 2px 0 14px; }
.ex-l { font: 800 10px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.exad { position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box; color: #fff; font-weight: 800; background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 4px 14px rgba(0, 0, 0, .45); }
.exad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.exad::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.exad .tag { position: absolute; top: 2px; right: 3px; z-index: 5; font: 700 5.5px/1 var(--f-body); letter-spacing: .14em; color: rgba(255, 255, 255, .5); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; }
.exad .mark { flex: none; display: grid; place-items: center; }
.exad .mark i { font-style: normal; display: block; line-height: 1; }
.exad .go { flex: none; display: inline-flex; align-items: center; gap: 3px; font: 800 10px/1 var(--f-body); padding: 4px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.exad .go i { font-style: normal; display: inline-block; animation: exnudge 1s ease-in-out infinite; }
.exad .sh { position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); animation: exsheen 5.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
/* the thin top bar: 378 x 32 */
.exad.bar { width: min(378px, 100%); height: 32px; border-radius: 8px; display: flex; align-items: center; gap: 7px; padding: 0 5px; }
.exad.bar .mark { width: 23px; height: 23px; }
.exad.bar .nm { white-space: nowrap; }
.exad.bar .ln { min-width: 0; display: flex; flex-direction: column; gap: 1px; font: 700 9.5px/1.1 var(--f-body); white-space: nowrap; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.exad.bar .ln span { overflow: hidden; text-overflow: ellipsis; }
.exad.bar .go { margin-left: auto; }
/* the half tile: 185 x 76 */
.ex-row { display: grid; grid-template-columns: repeat(2, minmax(0, 185px)); gap: 8px; justify-content: center; width: 100%; }
.exad.tile { height: 76px; border-radius: 14px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 5px; padding: 8px 9px; }
.exad.tile .ar { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.exad.tile .mark { width: 28px; height: 28px; }
.exad.tile .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
/* Big Tony's: red, a pizza that spins in its badge */
.exad.tony::before { background: linear-gradient(90deg, rgba(140, 10, 10, .82) 0, rgba(140, 10, 10, .45) 20%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 76%, rgba(0, 0, 0, .3)); }
.tony .mark { border-radius: 50%; background: #c8102e; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0, 0, 0, .3); }
.tony .mark i { font-size: 13px; animation: exspin 6s linear infinite; }
.tony .nm { font: 400 13px/1 'Archivo Black', var(--f-head); letter-spacing: .02em; text-shadow: 0 2px 0 #6b0000, 0 0 8px rgba(0, 0, 0, .55); }
.tony .go { background: #ffd23f; color: #3a0a00; }
/* Iron Den Gym: black and gold, a dumbbell that lifts */
.exad.iron::before { background: linear-gradient(90deg, rgba(8, 8, 10, .92) 0, rgba(8, 8, 10, .6) 30%, rgba(0, 0, 0, .12) 58%, rgba(0, 0, 0, .1) 76%, rgba(0, 0, 0, .4)); }
.exad.iron video { filter: brightness(1.35) contrast(1.1); }
.iron .mark { clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: linear-gradient(160deg, #ffe58a, #c8931a); }
.iron .mark i { font-size: 12px; animation: exlift 1.3s ease-in-out infinite; }
.iron .nm { font: 400 17px/1 'Bebas Neue', var(--f-head); letter-spacing: .1em; color: #f6cf5f; }
.iron .go { background: linear-gradient(180deg, #ffe58a, #d9a014); color: #221500; }
/* Smash Shack: orange, a burger that gets smashed */
.exad.smash::before { background: linear-gradient(0deg, rgba(60, 14, 0, .9), rgba(60, 14, 0, .25) 62%, rgba(0, 0, 0, .05)), linear-gradient(90deg, rgba(255, 122, 26, .35), transparent 60%); }
.smash .mark { border-radius: 9px; background: #ff7a1a; box-shadow: inset 0 0 0 2px #ffd9a8; }
.smash .mark i { font-size: 17px; transform-origin: 50% 100%; animation: exsmash 1.8s ease-in-out infinite; }
.smash .nm { font: 400 14px/1 'Archivo Black', var(--f-head); }
.smash .go { background: #ff7a1a; color: #2a0d00; }
/* Bassline FM: purple, live equaliser bars */
.exad.bass::before { background: linear-gradient(0deg, rgba(24, 8, 60, .92), rgba(24, 8, 60, .3) 62%, rgba(0, 0, 0, .1)), linear-gradient(90deg, rgba(124, 58, 237, .35), transparent 60%); }
.bass .mark { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a78bfa, #5b21b6); box-shadow: 0 0 10px rgba(167, 139, 250, .7); }
.bass .eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.bass .eq i { width: 3px; height: 4px; border-radius: 2px; background: #fff; animation: exeq .8s ease-in-out infinite alternate; }
.bass .eq i:nth-child(2) { animation-delay: -.3s; } .bass .eq i:nth-child(3) { animation-delay: -.55s; } .bass .eq i:nth-child(4) { animation-delay: -.15s; }
.bass .nm { font: 400 14px/1 'Archivo Black', var(--f-head); }
.bass .live { display: inline-flex; align-items: center; gap: 3px; font: 800 8px/1 var(--f-body); letter-spacing: .08em; padding: 2px 5px; border-radius: 4px; background: #e11d48; }
.bass .live::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: expulse 1.2s ease-in-out infinite; }
.bass .go { background: linear-gradient(90deg, #c084fc, #f472b6); color: #1e0533; }
@keyframes exsheen { 0%, 62% { left: -60%; } 100% { left: 140%; } }
@keyframes exnudge { 50% { transform: translateX(3px); } }
@keyframes exspin { to { transform: rotate(360deg); } }
@keyframes exlift { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }
@keyframes exsmash { 0%, 55%, 100% { transform: none; } 65% { transform: scale(1.3, .62); } 76% { transform: scale(.9, 1.15); } 86% { transform: scale(1.04, .96); } }
@keyframes exeq { from { height: 4px; } to { height: 14px; } }
@keyframes expulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .exad *, .exad .go i { animation: none !important; } .exad .sh { display: none; } }

/* ---------- sponsors without a clip: their own colors, a drifting glow and a bobbing emoji ---------- */
.exad { cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.exad:focus-visible { outline: 2px solid #f6cf5f; outline-offset: 2px; }
.exad.grad { color: var(--fg); background: linear-gradient(90deg, var(--c1), var(--c2)); }
.exad.tile.grad { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.exad.grad::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .34), transparent) no-repeat; background-size: 45% 260%; background-position: 0 50%; animation: exglow 7s ease-in-out infinite alternate; }
.grad .mark { border-radius: 50%; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 2px 6px rgba(0, 0, 0, .22); }
.grad .mark i { animation: exbob 2.6s ease-in-out infinite; }
.exad.bar.grad .mark i { font-size: 13px; }
.exad.grad .nm { font: 800 13.5px/1 var(--f-serif, Georgia, serif); letter-spacing: .01em; }
.exad.tile.grad .nm { font-size: 15px; }
.exad.grad .ln { text-shadow: none; opacity: .95; }
.exad.grad .go { background: var(--gob); color: var(--gof); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
@keyframes exglow { to { background-position: 100% 50%; } }
@keyframes exbob { 50% { transform: translateY(-2px) rotate(-8deg); } }

/* the house ad: the gold "advertise here" tile */
.exad.tile.house { color: #201400; justify-content: flex-end; gap: 4px; padding: 10px; background: linear-gradient(135deg, #fff6c4 0%, #f6cf5f 34%, #d9a014 66%, #8a5e00 100%); box-shadow: inset 0 0 0 1px rgba(255, 230, 150, .6), inset 0 1px 0 rgba(255, 255, 255, .85); }
.exad.tile.house::before { background: radial-gradient(60% 90% at 85% 15%, rgba(255, 255, 255, .55), transparent 60%); }
.house .chip { position: absolute; top: 8px; left: 10px; font: 800 8px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; background: rgba(0, 0, 0, .35); color: #fff; padding: 3px 7px; border-radius: 999px; }
.house .hh { font: 800 17px/1 var(--f-head); letter-spacing: .01em; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.house .adp { display: flex; align-items: center; gap: 7px; }
.house .adp i { font: 800 14px var(--f-head); font-style: normal; background: #1a1000; color: #f6cf5f; padding: 2px 10px; border-radius: 999px; animation: ahpulse 2.2s ease-in-out infinite; }
.house .adp small { color: #3b2a00; font: 700 10.5px var(--f-body); }
.house .sh { background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .7), transparent); }

/* ---------- the rotating ad spots: each ad flips over like a card ---------- */
.adslot { position: relative; min-width: 0; perspective: 700px; border-radius: 10px; }
.adslot.bar { height: 32px; border-radius: 8px; }
.adslot.tile { min-height: 76px; border-radius: 14px; }
.adslot > .exad { position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; opacity: 0; transform: rotateX(-92deg); transform-origin: 50% 50%; backface-visibility: hidden; pointer-events: none; transition: transform .75s cubic-bezier(.3, 1.35, .45, 1), opacity .3s; }
.adslot > .exad.on { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
.adslot > .exad.out { opacity: 0; transform: rotateX(92deg); transition: transform .45s ease-in, opacity .45s ease-in; }
.adslot .exad:hover .go, .adslot .exad:focus-visible .go { transform: translateX(2px); }
.adslot .exad .go { transition: transform .2s; }
.d-btns .adslot.tile { box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.d-btns .adslot.tile > .exad { border-radius: 14px; }
@media (min-width: 901px) {
  .adslot.bar .exad.bar { gap: 10px; padding: 0 6px; }
  .adslot.bar .ln { flex-direction: row; gap: 12px; font-size: 11px; }
  .adslot.bar .ln span + span::before { content: '·'; margin-right: 12px; opacity: .7; }
  .adslot.bar .exad.grad .nm { font-size: 15px; }
}

/* ---------- the ad window: drops open right under the ad you tapped, which stays put and lights up ---------- */
.exad.ad-lit { box-shadow: 0 0 0 2px #f6cf5f, 0 0 20px rgba(246, 207, 95, .55), 0 4px 14px rgba(0, 0, 0, .45); }
.adpop { position: absolute; z-index: 95; width: var(--w, 360px); height: var(--h, 520px); }
.adpop[hidden] { display: none; }
.ap-caret { position: absolute; z-index: 3; top: -7px; left: var(--cx, 50%); width: 15px; height: 15px; margin-left: -7.5px; border-radius: 3px 0 0 0; transform: rotate(45deg); background: #16161c; border: 1px solid rgba(246, 207, 95, .5); border-right: 0; border-bottom: 0; }
.adpop.up .ap-caret { top: auto; bottom: -7px; transform: rotate(225deg); background: #0b0b0f; }
.ap-frame { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; outline: 0; border-radius: 20px; background: linear-gradient(180deg, #16161c, #0b0b0f 46%); border: 1px solid rgba(246, 207, 95, .42); box-shadow: 0 26px 70px rgba(0, 0, 0, .75), 0 0 60px color-mix(in srgb, var(--c1, #f6cf5f) 22%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.ap-top { flex: none; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 5px 0 13px; font: 800 9.5px/1 var(--f-body); letter-spacing: .13em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.ap-up b { color: #f6cf5f; }
.ap-up i { display: inline-block; font-style: normal; color: #f6cf5f; animation: apup 1.5s ease-in-out infinite; }
.ap-up { margin-right: auto; }
.ap-x { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; }
.ap-x svg { width: 12px; height: 12px; }
.ap-stage { position: relative; flex: 1; min-height: 0; margin: 0 7px 7px; overflow: hidden; border-radius: 16px; touch-action: none; user-select: none; -webkit-user-select: none; }
.ap-stage::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 40; pointer-events: none; background: linear-gradient(#16161c 0, rgba(22, 22, 28, .75) 35%, rgba(22, 22, 28, 0)); } /* the stack fades off toward the top */
.ap-stage.drag .ap-post { cursor: grabbing; }

/* one ad: the advertiser's own little page, laid out like a post */
.ap-post { position: absolute; left: 0; right: 0; top: 0; height: var(--ch, 480px); display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; transform-origin: 50% 0; will-change: transform, opacity; color: #f4f1ea; background: #101014; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 -8px 22px rgba(0, 0, 0, .5); }
.ap-post::after { content: ''; position: absolute; inset: 0; z-index: 9; border-radius: inherit; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.ap-post:not(.on) { cursor: pointer; }
.ap-post:not(.on) * { pointer-events: none; }
/* stacked behind: just the logo and name, nudged up so they show in the strip that peeks out */
.ap-head { transition: padding .3s; }
.ap-post:not(.on) .ap-head { padding-bottom: 14px; }
.ap-follow, .ap-who small { transition: opacity .25s; }
.ap-post:not(.on) .ap-follow, .ap-post:not(.on) .ap-who small { opacity: 0; }
.ap-head { flex: none; height: 40px; display: flex; align-items: center; gap: 9px; padding: 0 9px 0 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 34%, #16161b), #16161b 72%); border-bottom: 1px solid rgba(255, 255, 255, .07); }
.ap-head .mark { flex: none; width: 26px; height: 26px; display: grid; place-items: center; box-shadow: 0 0 0 2px #16161b, 0 0 0 3.5px var(--c1); }
.ap-head .mark i { font-size: 14px; }
.ap-post.grad .mark { background: linear-gradient(135deg, var(--c1), var(--c2)); }
.ap-head .eq { height: 13px; }
.ap-who { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ap-who b { font: 800 13px/1 var(--f-head); letter-spacing: .02em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-who small { font: 600 10.5px/1 var(--f-body); color: rgba(255, 255, 255, .58); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-follow { flex: none; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 800 12px var(--f-body); background: #fff; color: #111; transition: background .2s, color .2s, transform .15s; }
.ap-follow:active { transform: scale(.94); }
.ap-follow.on { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.ap-hero { position: relative; flex: 1 1 auto; min-height: 70px; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.ap-hero > video, .ap-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.ap-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 10, 13, .92) 0%, rgba(10, 10, 13, .35) 38%, transparent 62%); }
.ap-post.plain .ap-hero::before { content: ''; position: absolute; inset: -40%; z-index: -2; background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .4), transparent 30%), repeating-conic-gradient(from 0deg at 50% 42%, rgba(255, 255, 255, .07) 0 10deg, transparent 10deg 20deg); animation: apspin 40s linear infinite; }
.ap-em { position: absolute; left: 50%; top: 40%; z-index: -1; font-size: 44px; line-height: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35)); animation: apfloat 3.8s ease-in-out infinite; }
.ap-fx i { position: absolute; bottom: -24px; left: var(--x); z-index: -1; font-size: var(--s); font-style: normal; opacity: 0; animation: aprise var(--d) linear var(--l) infinite; }
.ap-tag { position: absolute; top: 7px; left: 8px; font: 800 8.5px/1 var(--f-body); letter-spacing: .16em; color: #fff; background: rgba(0, 0, 0, .5); padding: 4px 7px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ap-hero h3 { position: absolute; left: 11px; right: 11px; bottom: 8px; margin: 0; font: 800 17px/1.08 var(--f-head); color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.ap-body { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px 7px; }
.ap-txt { margin: 0; font-size: 12px; line-height: 1.35; color: #cdc9c1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ap-perks { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; overflow: hidden; }
.ap-perks li { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 999px; font: 700 11px/1 var(--f-body); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); }
.ap-perks li i { width: 15px; height: 15px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 900 9px/1 var(--f-body); font-style: normal; background: var(--c1); color: var(--on1); }
/* the reward: a character, an outfit or a level for the game */
.ap-rw { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 5px; border-radius: 12px; background: linear-gradient(100deg, rgba(246, 207, 95, .17), rgba(246, 207, 95, .04) 70%); border: 1px solid rgba(246, 207, 95, .38); }
.ap-rw::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 240, 190, .22), transparent); transform: skewX(-18deg); animation: exsheen 5s ease-in-out infinite; pointer-events: none; }
.ap-rw-ic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: radial-gradient(circle at 35% 28%, #4a3a12, #120d03); box-shadow: inset 0 0 0 1px rgba(246, 207, 95, .55), 0 3px 10px rgba(0, 0, 0, .4); }
.ap-rw-ic i { font-style: normal; font-size: 20px; line-height: 1; animation: apbob 2.8s ease-in-out infinite; }
.ap-rw-ic img { width: 100%; height: 100%; object-fit: cover; }
.ap-rw.rw-character .ap-rw-ic { background: radial-gradient(circle at 35% 28%, #2b3d6b, #0a1022); box-shadow: inset 0 0 0 1px rgba(147, 197, 253, .6), 0 3px 10px rgba(0, 0, 0, .4); }
.ap-rw-tx { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ap-rw-tx small { font: 800 8.5px/1 var(--f-body); letter-spacing: .13em; text-transform: uppercase; color: #f6cf5f; }
.ap-rw.rw-character .ap-rw-tx small { color: #93c5fd; }
.ap-rw-tx b { font: 800 13px/1.05 var(--f-head); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-rw-tx em { font: 600 10.5px/1.1 var(--f-body); font-style: normal; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-claim { flex: none; height: 28px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer; font: 800 12.5px var(--f-body); color: #1a1000; background: linear-gradient(180deg, #ffe58a, #d9a014); box-shadow: 0 4px 12px rgba(217, 160, 20, .35), inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .15s; }
.ap-claim:active { transform: scale(.94); }
.ap-claim.done { cursor: default; color: #9be3a9; background: rgba(155, 227, 169, .08); box-shadow: inset 0 0 0 1px rgba(155, 227, 169, .45); }
.ap-rw.pop { animation: apclaim .6s cubic-bezier(.2, 1.4, .4, 1); }
.ap-rw.pop .ap-rw-ic { animation: apclaimic .7s cubic-bezier(.2, 1.4, .4, 1); }
/* the advertiser's socials */
.ap-soc { display: flex; gap: 5px; min-width: 0; }
.ap-soc > * { flex: 0 1 auto; min-width: 0; height: 22px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px 0 7px; border-radius: 999px; cursor: pointer; text-decoration: none; font: 700 10.5px var(--f-body); color: #e9e6df; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.ap-soc > *:hover { background: rgba(255, 255, 255, .11); }
.ap-soc svg { flex: none; width: 12px; height: 12px; }
.ap-soc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-cta { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 8px; border: 0; border-radius: 11px; cursor: pointer; text-decoration: none; font: 800 14px var(--f-body); color: var(--on1); background: var(--c1); background: linear-gradient(135deg, var(--c1), color-mix(in srgb, var(--c1) 60%, var(--c2))); box-shadow: 0 8px 22px color-mix(in srgb, var(--c1) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
.ap-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-18deg); animation: exsheen 4.2s ease-in-out infinite; }
.ap-cta i { font-style: normal; display: inline-block; animation: exnudge 1s ease-in-out infinite; }
.ap-note { margin: -2px 0 0; padding: 7px 9px; border-radius: 10px; font-size: 11.5px; line-height: 1.4; color: #e5d193; background: rgba(246, 207, 95, .08); border: 1px solid rgba(246, 207, 95, .25); }
.ap-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ap-foot small { font: 600 10px var(--f-body); color: #8a877f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-foot a { flex: none; font: 800 11px var(--f-body); color: #f6cf5f; text-decoration: none; }
.ap-new { height: 22px; padding: 0 10px; border: 1px solid rgba(246, 207, 95, .6); border-radius: 999px; cursor: pointer; font: 800 10.5px var(--f-body); letter-spacing: .02em; color: #1a1000; background: linear-gradient(180deg, #ffe58a, #d9a014); animation: apnew .3s cubic-bezier(.2, 1.4, .4, 1); }
.ap-new[hidden] { display: none; }
@keyframes apup { 50% { transform: translateY(-3px); } }
@keyframes apfloat { 50% { transform: translate(-50%, -56%) rotate(-6deg); } }
@keyframes aprise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(-260px) rotate(var(--r)); opacity: 0; } }
@keyframes apspin { to { transform: rotate(1turn); } }
@keyframes apbob { 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes apclaim { 0% { transform: scale(.96); } 40% { transform: scale(1.03); border-color: #ffe58a; } 100% { transform: none; } }
@keyframes apclaimic { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-10deg); } 100% { transform: none; } }
@keyframes apnew { from { opacity: 0; transform: scale(.7); } }

@media (prefers-reduced-motion: reduce) {
  .adslot > .exad, .adslot > .exad.out { transition: opacity .3s; transform: none; }
  .grad .mark i, .exad.grad::before, .house .adp i, .ap-up i, .ap-em, .ap-fx, .ap-post.plain .ap-hero::before, .ap-rw::before, .ap-rw-ic i, .ap-cta::after, .ap-cta i, .ap-rw.pop, .ap-rw.pop .ap-rw-ic, .ap-new { animation: none !important; }
}

/* the window: the open ad's page hangs straight off the ad, and the other ads roll out underneath */
.adpop { height: auto !important; }
.adpop .ap-frame { position: relative; inset: auto; display: block; max-height: var(--mh, 80vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 8px; }
.adpop .ap-frame::-webkit-scrollbar { display: none; }
.ap-x { position: absolute; top: 14px; right: 14px; z-index: 12; width: 28px; height: 28px; background: rgba(0, 0, 0, .55); border-color: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ap-page .ap-post { position: relative; height: auto; transform: none !important; opacity: 1 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 26px rgba(0, 0, 0, .45); }
.ap-page .ap-head { padding-right: 46px; }
.ap-page .ap-hero { flex: none; height: 168px; }
.ap-more { margin-top: 10px; }
.ap-more[hidden] { display: none; }
.ap-ml { display: flex; align-items: center; gap: 8px; margin: 0 4px 7px; font: 800 9.5px/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ap-ml::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(246, 207, 95, .4), transparent); }
.ap-bars { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.ap-bar .exad.bar { width: 100%; height: 40px; border-radius: 10px; transition: transform .18s var(--press), box-shadow .2s; }
.ap-bar .exad.bar:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px rgba(246, 207, 95, .7), 0 8px 18px rgba(0, 0, 0, .5); }
.ap-bar .exad.bar:active { transform: scale(.98); }
.ap-bar .exad.bar .mark { width: 28px; height: 28px; }
.ap-bar .exad.bar .ln { font-size: 10.5px; }

/* livelier ad bars: colors that drift, a breathing button, a logo that won't sit still */
.exad.grad { background-size: 220% 100%; animation: adgrad 7s ease-in-out infinite alternate; }
.exad.grad.bar { background-image: linear-gradient(90deg, var(--c1), var(--c2), var(--c1)); }
.exad .go { animation: adgo 2.6s ease-in-out infinite; }
.exad.bar .mark { animation: admark 3.2s ease-in-out infinite; }
@keyframes adgrad { to { background-position: 100% 0; } }
@keyframes adgo { 0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, .35); } 50% { box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 16px rgba(255, 255, 255, .35); } }
@keyframes admark { 0%, 100% { transform: none; } 10% { transform: rotate(-10deg) scale(1.08); } 20% { transform: rotate(6deg); } 30% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .exad.grad, .exad .go, .exad.bar .mark { animation: none !important; } }