/* ===== Advanced Banner slot on the match result screen (js/ui/resultBanner.js, platform/bannerLayout.js) ===== */
/* .mr-ad is exactly the rectangle the Bridge fills with the creative (same % of the window as the Bridge config);
   the dark framed panel is drawn around it, like the other panels of the result screen. */
.mr-ad { position: absolute; z-index: 3; box-sizing: border-box; font-size: clamp(11px, 2.2cqmin, 34px); opacity: 0; transform: translateY(.4em); transition: opacity .4s ease, transform .4s var(--ease-out, ease-out); pointer-events: none; }
.mr-ad[hidden] { display: none; }
.mr-ad.on { opacity: 1; transform: none; }
.mr-ad::before { content: ''; position: absolute; inset: -.5em; border-radius: .9em; background: rgba(12, 6, 26, .72); border: .12em solid var(--ink); box-shadow: 0 0 0 .08em rgba(255, 255, 255, .07), 0 .25em .6em rgba(0, 0, 0, .25); }
.mr-ad::after { content: ''; position: absolute; inset: 0; border-radius: .4em; background: rgba(255, 255, 255, .04); transition: opacity .3s; }
.mr-ad.live::after { opacity: 0; }
.mr-ad-tag { position: absolute; left: .7em; top: -1.5em; z-index: 1; padding: .1em .65em .08em; font-size: .62em; line-height: 1.3; letter-spacing: .16em; font-weight: 800; color: var(--text-dim); background: #1b1033; border: .14em solid var(--ink); border-radius: 1em; }
.mr-ad-gap { flex: none; display: none; height: 0; margin-bottom: -1.2cqmin; }
@media (prefers-reduced-motion: reduce) { .mr-ad { transition: none; transform: none; } }