#ticker-container { position: fixed; top: 0; left: 0; right: 0; z-index: 900; pointer-events: none; }
#ticker-strip {
    display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap;
    background: rgba(10, 12, 20, 0.82); color: #cfd6e4; font-size: 12px; line-height: 24px;
    height: 24px; padding: 0 12px;
}
.ticker-item { opacity: 0.9; }
.ticker-kind-item { color: #ff8c42; }
.ticker-kind-mvp { color: #ffd43b; }
.ticker-kind-era { color: #74c0fc; font-weight: 600; }
.ticker-sep { color: #4a5266; }
#ticker-banner {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, #1b2a4a, #22406e); color: #fff; font-weight: 700;
    padding: 10px 22px; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
    opacity: 0; transition: opacity .25s, transform .25s; z-index: 980; pointer-events: none;
}
#ticker-banner.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (max-width: 640px) { #ticker-strip { font-size: 11px; } }

/* Descent Phase B1 VP1-fix fix round 1, Ruling R-VP1-2 (I1): the ticker goes live on every page with the layouts' tag helpers.
   - The strip takes no space and shows nothing while it is empty (ticker.js marks it .has-items, and the body .ticker-on, once it holds one).
   - The Application layout: its navbar, brand and content are in the page's flow, so while the strip shows the page moves down by its height;
     the banner sits under the navbar (its bottom at 72 px), never over it.
   - The Game layout: only on its menus (main menu, character, mode select, Season), where its header and view move down by the strip's height
     and the banner sits under the header; never over Solo or Raid (the combat view) or the dungeon (dungeon.css hides it there too). */
#ticker-strip:empty, #ticker-strip:not(.has-items) { display: none; }
body.ticker-on:not(.game-body) { padding-top: 24px; }
body.ticker-on:not(.game-body) #ticker-banner { top: 104px; }
.game-body #ticker-container, .game-body #ticker-banner { display: none; }
.game-body:has(#view-mainmenu.active, #view-character.active, #view-modeselect.active, #view-season.active) #ticker-container,
.game-body:has(#view-mainmenu.active, #view-character.active, #view-modeselect.active, #view-season.active) #ticker-banner { display: block; }
.game-body #ticker-banner { top: calc(var(--header-height, 50px) + 8px); z-index: 240; }
/* fix round 2: one z-order on both layouts, the herald over the banner (herald.css: 990 on the site, 250 on the Game layout); and the banner
   waits while a herald toast shows (ticker.js), so the two never share their anchor at once */
.game-body.ticker-on:has(#view-mainmenu.active, #view-character.active, #view-modeselect.active, #view-season.active) .game-header { top: 24px; }
.game-body.ticker-on:has(#view-mainmenu.active, #view-character.active, #view-modeselect.active, #view-season.active) .game-container { top: calc(var(--header-height) + 24px); }
.game-body.ticker-on:has(#view-mainmenu.active, #view-character.active, #view-modeselect.active, #view-season.active) #ticker-banner { top: calc(var(--header-height, 50px) + 32px); }