/* livebar1 (review2, 28-10-2026): «Live now» under the header (templates/components/livebar.html, static/js/livebar.js).
   One slim line as wide as the header, coloured by what is happening (--lb); the rest behind «+N». */
.livebar-slot { margin: 10px 20px 0; }
.livebar-slot:empty { display: none; }
.livebar {
    --lb: #22d3ee;
    position: relative; z-index: 40; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 8px 6px 10px;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); border-color: color-mix(in srgb, var(--lb) 42%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--lb) 20%, transparent), transparent 46%),
        rgba(13, 7, 30, 0.88);
    box-shadow: 0 10px 28px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.03);
    backdrop-filter: blur(8px);
    animation: lvb-in 0.45s cubic-bezier(.2,.8,.2,1);
}
.livebar::before {   /* a thin light along the top edge, in the colour of what is on */
    content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; border-radius: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--lb), transparent); opacity: 0.85;
}
.livebar.is-closing { animation: lvb-out 0.28s ease forwards; }
@keyframes lvb-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes lvb-out { to { opacity: 0; transform: translateY(-6px); } }

.lvb-tag { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 8px; border-radius: 99px;
    font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #fde68a;
    background: rgba(251, 191, 36, 0.14); border: 1px solid rgba(251, 191, 36, 0.4); }
.lvb-tag i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.livebar.is-live .lvb-tag { color: #fff; background: linear-gradient(180deg, #ff2d55, #d9183f); border-color: rgba(255,255,255,0.25);
    box-shadow: 0 0 16px rgba(255, 45, 85, 0.45); }
.livebar.is-live .lvb-tag i { background: #fff; animation: lvb-pulse 1.6s ease-in-out infinite; }
@keyframes lvb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); } 60% { box-shadow: 0 0 0 6px rgba(255,255,255,0); } }

.lvb-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: #fff; }
.lvb-icon { flex: none; font-size: 1.1rem; line-height: 1; }
.lvb-label { flex: none; font-weight: 800; color: var(--lb); filter: brightness(1.15); }
.lvb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: rgba(255,255,255,0.92); }
.lvb-main:hover .lvb-title { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--lb) 60%, transparent); text-underline-offset: 3px; }
.lvb-count { flex: none; padding: 3px 9px; border-radius: 99px; font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); white-space: nowrap; }
.lvb-count.is-hot { color: #fff; background: rgba(255, 45, 85, 0.22); border-color: rgba(255, 45, 85, 0.5); }

.lvb-cta { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 9px; font-weight: 800; font-size: 0.9rem;
    color: #0b0618; background: var(--lb); box-shadow: 0 6px 18px color-mix(in srgb, var(--lb) 35%, transparent); transition: transform 0.15s, filter 0.15s; }
.lvb-cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
.lvb-cta b { transition: transform 0.15s; }
.lvb-cta:hover b { transform: translateX(2px); }

.lvb-more { position: relative; flex: none; }
.lvb-more-btn, .lvb-x { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; cursor: pointer;
    font: inherit; font-weight: 800; color: #fff; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); transition: background 0.15s; }
.lvb-more-btn:hover, .lvb-more-btn[aria-expanded="true"], .lvb-x:hover { background: rgba(255,255,255,0.14); }
.lvb-x { flex: none; min-width: 34px; padding: 0; font-size: 1.25rem; font-weight: 400; line-height: 1; color: rgba(255,255,255,0.7); background: none; border-color: transparent; }
.lvb-x:hover { color: #fff; }

.lvb-list { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(440px, calc(100vw - 40px)); margin: 0; padding: 8px; list-style: none;
    border-radius: 14px; background: rgba(12, 7, 28, 0.98); border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 24px 50px rgba(0,0,0,0.55); }
.lvb-list[hidden] { display: none; }
.lvb-list li + li { margin-top: 2px; }
.lvb-row { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'icon text count' 'icon text cta'; align-items: center; gap: 2px 12px;
    padding: 10px 12px; border-radius: 10px; color: #fff; border-left: 3px solid var(--lb); transition: background 0.15s; }
.lvb-row:hover { background: rgba(255,255,255,0.06); }
.lvb-row .lvb-icon { grid-area: icon; font-size: 1.25rem; }
.lvb-row-text { grid-area: text; min-width: 0; display: grid; }
.lvb-row-text b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--lb); filter: brightness(1.15); }
.lvb-row-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lvb-row .lvb-count { grid-area: count; justify-self: end; font-size: 0.78rem; }
.lvb-row-cta { grid-area: cta; justify-self: end; font-size: 0.8rem; font-weight: 800; color: var(--lb); filter: brightness(1.15); }
.lvb-dot { width: 7px; height: 7px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 8px #ff2d55; }
.lvb-list-foot a { display: block; padding: 10px 12px 6px; font-size: 0.85rem; font-weight: 700; color: var(--cyan, #22d3ee); }
.lvb-list-foot a:hover { text-decoration: underline; }

/* xp5b (29-10-2026): a club event or a Live giveaway is a golden hour of Ape XP */
.lvb-gold { position: relative; flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; overflow: hidden;
    border-radius: 99px; font-size: 0.78rem; font-weight: 900; font-style: normal; letter-spacing: 0.02em; white-space: nowrap; color: #2a1600;
    background: linear-gradient(135deg, #fff1b8, #fbbf24 45%, #f59e0b); border: 1px solid rgba(255, 236, 170, 0.8);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255,255,255,0.6); }
.lvb-gold .gold-spark { flex: none; width: 13px; height: 13px; fill: currentColor; }
.lvb-gold span { font-weight: 800; }
.lvb-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.75) 48%, transparent 66%);
    transform: translateX(-120%); animation: lvb-shine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes lvb-shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.lvb-gold--sm { padding: 1px 7px; font-size: 0.75rem; filter: none; }
.lvb-row-text b .lvb-gold { filter: none; }

@media (max-width: 900px) {
    .lvb-label { display: none; }
}
@media (max-width: 640px) {
    .livebar-slot { margin: 8px 12px 0; }
    .livebar { gap: 8px; min-height: 44px; padding: 5px 4px 5px 8px; }
    .lvb-tag { padding: 3px 7px; font-size: 0.75rem; letter-spacing: 0.08em; }
    .lvb-main { gap: 7px; }
    .lvb-icon { font-size: 1rem; }
    .lvb-title { font-size: 0.9rem; }
    .lvb-count { padding: 2px 7px; font-size: 0.75rem; }
    .lvb-cta { padding: 7px 10px; }
    .lvb-cta span { display: none; }   /* the arrow is the button; the whole line is a link too */
    .lvb-more-btn { min-width: 30px; height: 30px; padding: 0 7px; font-size: 0.85rem; }
    .lvb-x { min-width: 28px; height: 30px; }
    .lvb-list { right: -36px; }
    .lvb-gold { padding: 2px 8px 2px 6px; font-size: 0.75rem; }
    .lvb-main .lvb-gold span { display: none; }   /* «✨ XP ×2» */
}
@media (max-width: 400px) {
    .lvb-main .lvb-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .livebar, .livebar.is-closing { animation: none; }
    .livebar.is-live .lvb-tag i { animation: none; }
    .lvb-cta, .lvb-cta b { transition: none; }
    .lvb-gold::after { animation: none; display: none; }
}