/* Ape Sites: <name>.bascdao.com (ape_sites.py; 18-10-2026). Its own small stylesheet: the club look (dark, glass
   cards, one accent) with a colour theme chosen by the owner from a fixed list (.ape-t-*). Never CSS from an owner. */
:root {
    --bg-0: #07020f; --bg-1: #0d0420; --text: #f4f6fb; --muted: #a9b3c9; --line: rgba(255,255,255,0.10);
    --line-strong: rgba(255,255,255,0.18); --card: rgba(255,255,255,0.045); --radius: 22px;
    --a1: #f97316; --a2: #ec4899; --a3: #facc15; --a-ink: #1a0b00;
    --font: 'Inter', 'Roboto', 'BASC Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, sans-serif;   /* fonts1: fonts.css */
}
/* The 20 looks (ape_sites.THEMES; 18-10-2026). a1 main, a2 second, a3 third (gradients and the glow), a-ink = text on them. */
.ape-t-sunset { --a1: #f97316; --a2: #ec4899; --a3: #facc15; --a-ink: #1f0a00; }
.ape-t-solana { --a1: #9945ff; --a2: #14f195; --a3: #00c2ff; --a-ink: #0b0418; }
.ape-t-aurora { --a1: #22d3ee; --a2: #a855f7; --a3: #34d399; --a-ink: #04121a; }
.ape-t-neon { --a1: #ff2bd6; --a2: #00f0ff; --a3: #7c3aed; --a-ink: #14001a; }
.ape-t-vaporwave { --a1: #ff71ce; --a2: #01cdfe; --a3: #b967ff; --a-ink: #1a0420; }
.ape-t-holo { --a1: #ff6b6b; --a2: #ffd93d; --a3: #6bcbff; --a-ink: #1a0a00; }
.ape-t-gold { --a1: #f59e0b; --a2: #fde047; --a3: #fb923c; --a-ink: #1f1300; }
.ape-t-banana { --a1: #fde047; --a2: #facc15; --a3: #a3e635; --a-ink: #1a1600; }
.ape-t-fire { --a1: #ff3d00; --a2: #ffb300; --a3: #ff006e; --a-ink: #1a0500; }
.ape-t-red { --a1: #ef4444; --a2: #f97316; --a3: #be123c; --a-ink: #ffffff; }
.ape-t-blood { --a1: #dc2626; --a2: #9f1239; --a3: #f43f5e; --a-ink: #ffffff; }
.ape-t-violet { --a1: #8b5cf6; --a2: #d946ef; --a3: #6366f1; --a-ink: #ffffff; }
.ape-t-cyan { --a1: #00ddeb; --a2: #3b82f6; --a3: #22d3ee; --a-ink: #001a1d; }
.ape-t-ocean { --a1: #0ea5e9; --a2: #2563eb; --a3: #14b8a6; --a-ink: #ffffff; }
.ape-t-ice { --a1: #93c5fd; --a2: #e0e7ff; --a3: #a5f3fc; --a-ink: #0b1530; }
.ape-t-green { --a1: #10b981; --a2: #a3e635; --a3: #22c55e; --a-ink: #03170f; }
.ape-t-jungle { --a1: #16a34a; --a2: #facc15; --a3: #65a30d; --a-ink: #071a00; }
.ape-t-toxic { --a1: #a3ff12; --a2: #00ff9c; --a3: #d9f99d; --a-ink: #071a00; }
.ape-t-rose { --a1: #fb7185; --a2: #f9a8d4; --a3: #e879f9; --a-ink: #2a0612; }
.ape-t-chrome { --a1: #e5e7eb; --a2: #94a3b8; --a3: #ffffff; --a-ink: #0b1020; }
/* xp5c: Club Ape's two colours (Ape XP, level 10; ape_sites.XP_THEMES) */
.ape-t-royal { --a1: #3d8bff; --a2: #ffc94a; --a3: #8b5cf6; --a-ink: #ffffff; }
.ape-t-jade { --a1: #10b981; --a2: #f5d27a; --a3: #2dd4bf; --a-ink: #02170f; }
/* xpladder1: the colours a level of Ape XP unlocks: Platinum (22), Crimson (32), Elder Amber (42), Legendary (50) */
.ape-t-platinum { --a1: #dfe7f3; --a2: #8fd3ff; --a3: #c4b5fd; --a-ink: #0b1020; }
.ape-t-crimson { --a1: #e11d48; --a2: #ffc94a; --a3: #9f1239; --a-ink: #ffffff; }
.ape-t-amber { --a1: #f59e0b; --a2: #14f195; --a3: #fde68a; --a-ink: #1f1300; }
.ape-t-legendary { --a1: #ffd76a; --a2: #ff7ae0; --a3: #7df9ff; --a-ink: #2a1a00; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body.ape {
    min-height: 100vh; overflow-x: hidden; font-family: var(--font); line-height: 1.6; color: var(--text);
    background:
        radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb, var(--a2) 22%, transparent), transparent 62%),
        radial-gradient(900px 640px at -12% 18%, color-mix(in srgb, var(--a1) 20%, transparent), transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 70%);
    background-color: var(--bg-0);
    display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; border-radius: 10px; }

/* Preview strip (owner and superadmin only) */
.ape-preview {
    position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
    width: min(760px, calc(100% - 24px)); padding: 12px 16px; border-radius: 16px; font-size: 0.88rem;
    background: rgba(12, 6, 28, 0.94); border: 1px solid color-mix(in srgb, var(--a1) 55%, transparent);
    box-shadow: 0 18px 50px rgba(0,0,0,0.55); backdrop-filter: blur(10px);
}
.ape-preview b { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); }
.ape-preview span { color: #d7dcea; }
.ape-preview a { font-weight: 800; color: var(--a1); }
.ape-preview a:hover { text-decoration: underline; }

/* Slim BASC bar */
.ape-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(1080px, calc(100% - 32px)); margin: 14px auto 0; padding: 8px 10px 8px 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); backdrop-filter: blur(8px); }
.ape-bar-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 0.86rem; color: var(--muted); }
.ape-bar-brand img { width: 28px; height: 28px; border-radius: 50%; }
.ape-bar-brand b { color: #fff; letter-spacing: 0.04em; }
.ape-bar-link { padding: 6px 12px; border-radius: 10px; font-size: 0.84rem; font-weight: 700; color: #e6e9f2; transition: background 0.2s, color 0.2s; }
.ape-bar-link:hover { background: rgba(255,255,255,0.07); color: #fff; }

.ape-main { flex: 1; display: grid; gap: 22px; align-content: start; width: min(1080px, calc(100% - 32px)); margin: 18px auto 56px; }

/* Hero: banner, avatar, name, socials */
.ape-hero { position: relative; border-radius: calc(var(--radius) + 6px); overflow: hidden; background: linear-gradient(180deg, #0d0520, #0a0418); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.ape-banner { position: relative; aspect-ratio: 3 / 1; overflow: hidden; background: #120726; }
.ape-banner img { width: 100%; height: 100%; object-fit: cover; }
.ape-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13,5,32,0.7) 78%, #0d0520 100%); }
.ape-banner-art { position: absolute; inset: 0; background:
    radial-gradient(60% 120% at 15% 110%, color-mix(in srgb, var(--a1) 75%, transparent), transparent 60%),
    radial-gradient(55% 120% at 85% -10%, color-mix(in srgb, var(--a2) 70%, transparent), transparent 62%),
    radial-gradient(40% 90% at 55% 120%, color-mix(in srgb, var(--a3) 45%, transparent), transparent 65%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 14px),
    linear-gradient(120deg, #1a0838, #0c0420); }
.ape-id { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 22px; padding: 0 30px 28px; margin-top: -64px; }
.ape-avatar { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; background: #160a2e; border: 5px solid var(--bg-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--a1) 80%, transparent), 0 18px 46px rgba(0,0,0,0.5), 0 0 60px color-mix(in srgb, var(--a1) 30%, transparent); }
.ape-id-text { min-width: 0; padding-bottom: 6px; }
.ape-id .ape-hero-title { display: block; margin: 0; font-size: clamp(2rem, 4.2vw, 3.1rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ape-tagline { margin: 8px 0 0; font-size: 1.1rem; color: #dfe4f0; overflow-wrap: anywhere; }
.ape-owner { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 0.82rem; color: var(--muted); background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.ape-owner img { width: 22px; height: 22px; border-radius: 50%; }
.ape-owner b { color: #fff; }
.ape-socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 0; padding: 0 0 8px; list-style: none; max-width: 380px; }
.ape-social { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid var(--line-strong); transition: transform 0.2s, background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
.ape-social svg { width: 20px; height: 20px; }
.ape-social:hover, .ape-social:focus-visible { transform: translateY(-3px); color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); border-color: transparent; box-shadow: 0 10px 26px color-mix(in srgb, var(--a1) 40%, transparent); }

/* Link buttons (link-in-bio) */
.ape-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ape-link { position: relative; display: grid; gap: 2px; padding: 18px 54px 18px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform 0.22s, border-color 0.22s, background 0.22s, box-shadow 0.22s; }
.ape-link::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, var(--a1), var(--a2)); }
.ape-link:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ape-link span { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.ape-link small { font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-link i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-style: normal; font-weight: 900; color: var(--a1); transition: transform 0.22s; }
.ape-link:hover, .ape-link:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,0.07); border-color: color-mix(in srgb, var(--a1) 55%, transparent); box-shadow: 0 14px 34px rgba(0,0,0,0.35); }
.ape-link:hover i { transform: translate(3px, -50%); }

/* Cards */
.ape-card { padding: 26px 30px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,0.28); }
.ape-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--a1); }
.ape-card h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 45%, transparent), transparent); }
.ape-about p { margin: 0 0 14px; font-size: 1.04rem; color: #dde2ee; overflow-wrap: anywhere; }
.ape-about p:last-child { margin-bottom: 0; }
.ape-about a { color: var(--a1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--a1) 45%, transparent); text-underline-offset: 3px; }
.ape-about a:hover { text-decoration-color: currentColor; }

/* Messages: paused, not found, coming soon */
.ape-main--message { align-content: center; }
.ape-message { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin: 4vh auto 0; padding: 44px 32px; text-align: center; }
.ape-message-mark img { width: 88px; height: 88px; border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--a1) 70%, transparent), 0 0 50px color-mix(in srgb, var(--a1) 35%, transparent); }
.ape-message-host { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; color: var(--a1); }
.ape-message h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 900; }
.ape-message p { margin: 0; color: var(--muted); }
.ape-message-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 10px; }
.ape-btn { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 12px; font-weight: 800; font-size: 0.92rem; background: rgba(255,255,255,0.06); border: 1px solid var(--line-strong); transition: background 0.2s, transform 0.2s; }
.ape-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.ape-btn--primary { color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); border-color: transparent; }
.ape-btn--primary:hover { background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); filter: brightness(1.08); }

/* Footer */
.ape-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: min(1080px, calc(100% - 32px)); margin: 0 auto 28px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.ape-foot-brand { display: inline-flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--muted); }
.ape-foot-brand img { width: 36px; height: 36px; border-radius: 50%; }
.ape-foot-brand b { color: #fff; }
.ape-foot nav { display: flex; gap: 6px; flex-wrap: wrap; }
.ape-foot nav a { padding: 6px 10px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; color: #d5dbe8; transition: background 0.2s; }
.ape-foot nav a:hover { background: rgba(255,255,255,0.07); color: #fff; }

@media (max-width: 860px) {
    .ape-id { grid-template-columns: auto minmax(0, 1fr); }
    .ape-socials { grid-column: 1 / -1; justify-content: flex-start; max-width: none; padding: 0; }
}
@media (max-width: 600px) {
    .ape-bar, .ape-main, .ape-foot { width: calc(100% - 24px); }
    .ape-bar-brand span { font-size: 0.8rem; }
    .ape-main { margin-top: 12px; gap: 16px; }
    .ape-banner { aspect-ratio: 2 / 1; }
    .ape-id { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; padding: 0 18px 22px; margin-top: -58px; }
    .ape-avatar { width: 116px; height: 116px; border-width: 4px; }
    .ape-id-text { padding: 0; }
    .ape-tagline { font-size: 1rem; }
    .ape-socials { justify-content: center; }
    .ape-social { width: 44px; height: 44px; }
    .ape-links { grid-template-columns: 1fr; gap: 10px; }
    .ape-card { padding: 20px 18px; }
    .ape-foot { justify-content: center; text-align: center; }
    .ape-preview { bottom: 10px; font-size: 0.82rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ape-social, .ape-link, .ape-link i, .ape-btn, .ape-bar-link { transition: none; }
    .ape-social:hover, .ape-link:hover, .ape-btn:hover { transform: none; }
    .ape-link:hover i { transform: translateY(-50%); }
}

/* Wallets (18-10-2026) */
.ape-wallets ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ape-wallet { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 12px 12px 16px; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); }
.ape-wallet-chain { display: grid; line-height: 1.2; }
.ape-wallet-chain b { font-size: 0.95rem; font-weight: 900; letter-spacing: 0.06em; }
.ape-wallet-chain small { font-size: 0.75rem; color: var(--muted); }
.ape-wallet--sol .ape-wallet-chain b { background: linear-gradient(90deg, #9945ff, #14f195); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ape-wallet--eth .ape-wallet-chain b { color: #a5b4fc; }
.ape-wallet--btc .ape-wallet-chain b { color: #f7931a; }
.ape-wallet-address { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 0.9rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e6e9f2; }
.ape-wallet-copy { padding: 8px 14px; font-size: 0.84rem; cursor: pointer; font-family: inherit; color: #fff; }
.ape-wallet-copy.is-done { color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); border-color: transparent; }
.ape-wallets-note { margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }
.ape-message-owner { margin: 8px 0 0; font-size: 0.86rem; color: var(--muted); }
.ape-message-owner a { font-weight: 800; color: var(--a1); }
.ape-message-owner a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .ape-wallet { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
    .ape-wallet-address { grid-column: 1 / -1; grid-row: 2; font-size: 0.82rem; white-space: normal; overflow-wrap: anywhere; }
}
.ape-verified { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-top: 4px; padding: 2px 8px 2px 5px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.04em; color: #a7f3d0; background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.45); cursor: help; }
.ape-verified svg { width: 13px; height: 13px; }
.ape-wallet.is-verified { border-color: rgba(16,185,129,0.35); }
.ape-wallets-note b { color: #a7f3d0; }
.ape-wallet-actions { display: inline-flex; gap: 8px; }
.ape-wallet-qr-btn { padding: 8px 12px; font-size: 0.84rem; cursor: pointer; font-family: inherit; color: #fff; }
/* QR modal (18-10-2026: "un modal cool que salga en el centro de la pantalla") */
.ape-qr-modal { padding: 0; border: 0; background: none; color: var(--text); max-width: calc(100% - 24px); overflow: visible; }
.ape-qr-modal::backdrop { background: rgba(5, 1, 14, 0.72); backdrop-filter: blur(8px); }
.ape-qr-modal[open] { animation: ape-qr-in 0.22s ease-out; }
@keyframes ape-qr-in { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.ape-qr-card { --c1: var(--a1); --c2: var(--a2); position: relative; display: grid; justify-items: center; gap: 12px; width: min(380px, calc(100vw - 24px)); padding: 30px 26px 24px; border-radius: 26px; text-align: center;
    background: radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--c1) 28%, transparent), transparent 60%), linear-gradient(180deg, #140a2c, #0b0418);
    border: 1px solid color-mix(in srgb, var(--c1) 45%, transparent); box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 80px color-mix(in srgb, var(--c1) 22%, transparent); }
.ape-qr--sol { --c1: #9945ff; --c2: #14f195; } .ape-qr--eth { --c1: #818cf8; --c2: #c7d2fe; } .ape-qr--btc { --c1: #f7931a; --c2: #fbbf24; }
.ape-qr-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; font: inherit; font-weight: 800; color: #e6e9f2; background: rgba(255,255,255,0.06); border: 1px solid var(--line); cursor: pointer; transition: background 0.2s; }
.ape-qr-close:hover { background: rgba(255,255,255,0.12); }
.ape-qr-eyebrow { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); max-width: 85%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-qr-card h3 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.ape-qr-card h3 b { background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ape-qr-card h3 span { color: #e6e9f2; font-weight: 700; }
.ape-qr-card .ape-verified { margin-top: -4px; }
.ape-qr-code { padding: 10px; border-radius: 22px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.ape-qr-code svg { display: block; width: 236px; height: 236px; border-radius: 14px; }
.ape-qr-address { display: block; width: 100%; padding: 10px 12px; border-radius: 12px; font: 0.84rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #f4f6fb; background: rgba(0,0,0,0.3); border: 1px solid var(--line); overflow-wrap: anywhere; }
.ape-qr-copy { width: 100%; justify-content: center; cursor: pointer; font-family: inherit; }
.ape-qr-copy.is-done { filter: brightness(1.1); }
.ape-qr-note { margin: 0; font-size: 0.78rem; color: var(--muted); }
@media (max-width: 600px) { .ape-qr-code svg { width: 220px; height: 220px; } .ape-qr-card { padding: 28px 18px 20px; } }
@media (prefers-reduced-motion: reduce) { .ape-qr-modal[open] { animation: none; } .ape-qr-close { transition: none; } }
.ape-verified[hidden] { display: none; }
.ape-qr-card .ape-verified { justify-self: center; }
.ape-qr-copy, .ape-qr-copy:hover { color: #0b0418; background: linear-gradient(135deg, var(--c1), var(--c2)); }

/* ---------- Phase 2 (18-10-2026): site menu, news, comments, gallery, lightbox, login ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ape-bar-right { display: inline-flex; align-items: center; gap: 8px; }
.ape-bar-login { padding: 7px 14px; border-radius: 10px; font-size: 0.84rem; font-weight: 800; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); transition: filter 0.2s; }
.ape-bar-login:hover { filter: brightness(1.08); }
.ape-me { display: inline-flex; align-items: center; gap: 8px; padding: 3px 4px 3px 3px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid var(--line); }
.ape-me img { width: 26px; height: 26px; border-radius: 50%; }
.ape-me > span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-me-out { padding: 4px 10px; border-radius: 999px; font-size: 0.76rem; color: var(--muted); background: rgba(0,0,0,0.25); }
.ape-me-out:hover { color: #fff; }

.ape-tabs { display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ape-tabs::-webkit-scrollbar { display: none; }
.ape-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; font-weight: 800; font-size: 0.92rem; color: #d7dcea; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.ape-tabs a span { padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; background: rgba(255,255,255,0.08); color: var(--muted); }
.ape-tabs a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.ape-tabs a.is-on { color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); }
.ape-tabs a.is-on span { background: rgba(0,0,0,0.18); color: var(--a-ink); }

.ape-mini { display: flex; align-items: center; gap: 14px; justify-self: start; padding: 8px 18px 8px 8px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); transition: border-color 0.2s; min-width: 0; max-width: 100%; }
.ape-mini:hover { border-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.ape-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--a1); flex: none; }
.ape-mini span { display: grid; min-width: 0; }
.ape-mini b { font-size: 1.15rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-mini small { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ape-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ape-section-head h2 { flex: 1; margin: 0 !important; }
.ape-section-head a { font-size: 0.85rem; font-weight: 800; color: var(--a1); white-space: nowrap; }
.ape-section-head a:hover { text-decoration: underline; }
.ape-empty { margin: 0; color: var(--muted); }

.ape-posts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ape-post-card { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(0,0,0,0.2); border: 1px solid var(--line); transition: border-color 0.22s, transform 0.22s, background 0.22s; }
.ape-post-card.no-image { grid-template-columns: 1fr; padding: 16px 18px; }
.ape-post-card:hover, .ape-post-card:focus-within { transform: translateY(-2px); border-color: color-mix(in srgb, var(--a1) 55%, transparent); background: rgba(255,255,255,0.05); }
.ape-post-thumb { display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: #160a2e; }
.ape-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ape-post-text { display: grid; gap: 4px; min-width: 0; }
.ape-post-text time { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a1); }
.ape-post-link b { font-size: 1.12rem; font-weight: 900; overflow-wrap: anywhere; }
.ape-post-text > span { font-size: 0.9rem; color: #cfd5e3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ape-post-text small { display: flex; align-items: center; gap: 14px; font-size: 0.8rem; color: var(--muted); }
/* The title's link covers the whole card; only the like button sits above it (apesites23) */
.ape-post-link { color: inherit; text-decoration: none; }
.ape-post-link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.ape-post-link:focus-visible { outline: none; }
.ape-post-link:focus-visible::after { outline: 2px solid var(--a1); outline-offset: 2px; }
.ape-card-like { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; margin: -6px -4px; padding: 6px 4px;
    border: 0; border-radius: 6px; font: inherit; font-weight: 800; color: inherit; background: none; cursor: pointer;
    transition: color 0.2s; }
.ape-card-like b { font-weight: 800; }
/* only the heart and the number take the colour (Mortimer, 18-10-2026: a pill looked cramped) */
@media (hover: hover) { .ape-card-like:hover { color: #fda4af; } }
.ape-card-like:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.ape-card-like.is-on { color: #fb7185; }
.ape-card-like.is-on .ape-heart { fill: currentColor; }
.ape-card-like svg { transition: transform 0.15s; }
.ape-card-like:active svg { transform: scale(0.85); }
.ape-card-like:disabled { cursor: progress; }

.ape-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.ape-gallery-item { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: #160a2e; box-shadow: 0 0 0 1px var(--line); transition: transform 0.22s, box-shadow 0.22s; }
.ape-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.ape-gallery-item:hover, .ape-gallery-item:focus-visible { box-shadow: 0 0 0 2px var(--a1), 0 14px 30px rgba(0,0,0,0.4); }
.ape-gallery-item:hover img { transform: scale(1.05); }

.ape-article { display: grid; gap: 16px; }
.ape-article header { display: grid; gap: 6px; }
.ape-article time { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--a1); }
.ape-article h1 { margin: 0; font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ape-article > p { margin: 0; font-size: 1.05rem; color: #dde2ee; overflow-wrap: anywhere; }
.ape-article > p a { color: var(--a1); text-decoration: underline; text-underline-offset: 3px; }
.ape-article-images { display: grid; gap: 10px; }
.ape-article-images--2 { grid-template-columns: 1fr 1fr; }
.ape-article-images--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ape-article-img { display: block; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in; background: #160a2e; box-shadow: 0 0 0 1px var(--line); }
.ape-article-images--1 .ape-article-img img { width: 100%; height: auto; max-height: 640px; object-fit: contain; background: #0b0418; }
.ape-article-images--2 .ape-article-img, .ape-article-images--3 .ape-article-img { aspect-ratio: 1; }
.ape-article-images--2 .ape-article-img img, .ape-article-images--3 .ape-article-img img { width: 100%; height: 100%; object-fit: cover; }
.ape-article-foot { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); }
.ape-react { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; font: inherit; font-size: 0.9rem; font-weight: 800; color: #e6e9f2; background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ape-react:hover { background: rgba(255,255,255,0.1); }
.ape-react.is-on { color: #fda4af; border-color: rgba(244,63,94,0.55); background: rgba(244,63,94,0.12); }
.ape-share { margin-left: auto; }
.ape-share.is-done { color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); border-color: transparent; }

.ape-comments { display: grid; gap: 14px; padding-top: 8px; }
.ape-comments h2 { margin: 0 !important; }
.ape-comments h2 span { margin-left: 4px; color: var(--muted); }
.ape-composer { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); }
.ape-composer img { width: 36px; height: 36px; border-radius: 50%; }
.ape-composer > div { display: grid; gap: 8px; min-width: 0; }
.ape-composer textarea, .ape-report textarea { width: 100%; padding: 10px 12px; border-radius: 12px; font: inherit; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); resize: vertical; }
.ape-composer textarea:focus, .ape-report textarea:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent); }
.ape-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ape-composer-foot small { font-size: 0.78rem; color: var(--muted); }
.ape-composer-foot .ape-btn { padding: 9px 18px; cursor: pointer; font-family: inherit; }
.ape-composer-reply { margin: 0; font-size: 0.82rem; color: var(--muted); }
.ape-composer-reply b { color: #fff; }
.ape-composer-reply button { margin-left: 6px; padding: 0; font: inherit; font-weight: 800; color: var(--a1); background: none; border: 0; cursor: pointer; }
.ape-error { margin: 0; font-size: 0.84rem; font-weight: 700; color: #fca5a5; }
.ape-login-cta { display: block; padding: 16px; border-radius: 16px; text-align: center; font-weight: 800; color: var(--a1); background: rgba(0,0,0,0.22); border: 1px dashed color-mix(in srgb, var(--a1) 55%, transparent); transition: background 0.2s; }
.ape-login-cta:hover { background: rgba(255,255,255,0.05); }
.ape-c-list, .ape-c-replies { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ape-c-replies { margin: 10px 0 0 18px; padding-left: 16px; border-left: 2px solid color-mix(in srgb, var(--a1) 35%, transparent); }
.ape-c { position: relative; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.035); border: 1px solid var(--line); scroll-margin-top: 90px; }
.ape-c:target, .ape-c.is-new { border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 18%, transparent); }
.ape-c.is-hidden { opacity: 0.7; border-style: dashed; }
.ape-c.is-gone > .ape-c-gone { margin: 0; font-size: 0.86rem; font-style: italic; color: var(--muted); }
.ape-c-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.86rem; }
.ape-c-head time { font-size: 0.76rem; color: var(--muted); }
.ape-c-owner { padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); }
.ape-c-hidden { padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; color: #fde68a; background: rgba(245,158,11,0.14); border: 1px solid rgba(245,158,11,0.45); }
.ape-c-text { margin: 6px 0 8px; font-size: 0.96rem; color: #e6e9f2; white-space: pre-line; overflow-wrap: anywhere; }
.ape-c-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.ape-c-tool { padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 800; color: var(--muted); background: none; border: 1px solid transparent; cursor: pointer; transition: background 0.2s, color 0.2s; }
.ape-c-tool:hover { color: #fff; background: rgba(255,255,255,0.06); }
.ape-c-tool.is-on { color: #fda4af; }
.ape-c-tool--owner { color: #fde68a; border-color: rgba(245,158,11,0.35); }
.ape-reasons { display: grid; gap: 6px; width: 100%; text-align: left; }
.ape-reasons label { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 12px; font-size: 0.9rem; background: rgba(255,255,255,0.04); border: 1px solid var(--line); cursor: pointer; }
.ape-reasons label:has(input:checked) { border-color: var(--a1); background: color-mix(in srgb, var(--a1) 12%, transparent); }
.ape-report .ape-btn { width: 100%; justify-content: center; cursor: pointer; font-family: inherit; }

.ape-lightbox { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5, 1, 14, 0.94); color: #fff; }
.ape-lightbox[open] { display: grid; place-items: center; }
.ape-lightbox::backdrop { background: rgba(5, 1, 14, 0.8); }
.ape-lightbox figure { display: grid; justify-items: center; gap: 12px; margin: 0; padding: 56px 72px; max-width: 100%; max-height: 100%; }
.ape-lightbox img { max-width: min(1400px, 100%); max-height: calc(100vh - 160px); border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.ape-lightbox figcaption { font-size: 0.95rem; color: #dfe4f0; text-align: center; }
.ape-lb-close, .ape-lb-nav { position: absolute; display: grid; place-items: center; border-radius: 14px; font: inherit; font-weight: 800; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid var(--line-strong); cursor: pointer; transition: background 0.2s; }
.ape-lb-close { top: 16px; right: 16px; width: 44px; height: 44px; }
.ape-lb-nav { top: 50%; width: 52px; height: 52px; margin-top: -26px; font-size: 1.8rem; }
.ape-lb-prev { left: 16px; } .ape-lb-next { right: 16px; }
.ape-lb-close:hover, .ape-lb-nav:hover { background: rgba(255,255,255,0.16); }
.ape-lightbox.is-single .ape-lb-nav { display: none; }
.ape-lb-count { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-size: 0.84rem; font-weight: 800; color: var(--muted); }

@media (max-width: 860px) { .ape-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
    .ape-bar-more { display: none; }
    .ape-me > span { display: none; }
    .ape-post-card { grid-template-columns: 1fr; gap: 10px; }
    .ape-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ape-article-images--3 { grid-template-columns: 1fr 1fr; }
    .ape-article-images--3 .ape-article-img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
    .ape-c-replies { margin-left: 6px; padding-left: 10px; }
    .ape-share { margin-left: 0; }
    .ape-lightbox figure { padding: 64px 10px 70px; }
    .ape-lb-nav { top: auto; bottom: 14px; margin-top: 0; }
    .ape-lb-prev { left: calc(50% - 64px); } .ape-lb-next { right: calc(50% - 64px); }
    .ape-mini b { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ape-post-card, .ape-gallery-item, .ape-gallery-item img, .ape-tabs a, .ape-react, .ape-c-tool { transition: none; }
    .ape-post-card:hover, .ape-post-card:focus-within { transform: none; }
    .ape-card-like, .ape-card-like svg { transition: none; } .ape-card-like:active svg { transform: none; } .ape-gallery-item:hover img { transform: none; }
}
.ape-c-head img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: #160a2e; }

/* 18-10-2026 (Mortimer): the reply box under the comment it answers, SVG hearts, the same header on every page */
a.ape-hero-title:hover { color: var(--a1); }
.ape-react svg, .ape-c-tool svg { width: 18px; height: 18px; flex: none; }
.ape-c-tool svg { width: 15px; height: 15px; }
.ape-c-tool { display: inline-flex; align-items: center; gap: 5px; }
.ape-like.is-on { color: #fb7185; }
.ape-like.is-on .ape-heart { fill: currentColor; }
.ape-like:active svg { transform: scale(0.85); }
.ape-like svg { transition: transform 0.15s; }
.ape-react.ape-like.is-on { border-color: rgba(251,113,133,0.55); background: rgba(251,113,133,0.12); }
.ape-reply-box { display: grid; gap: 10px; margin-top: 10px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--a1) 7%, rgba(0,0,0,0.3));
    border: 1px solid color-mix(in srgb, var(--a1) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 12%, transparent); animation: ape-reply-in 0.18s ease-out; }
@keyframes ape-reply-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ape-reply-to { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--a1); }
.ape-reply-to svg { width: 16px; height: 16px; }
.ape-reply-to b { color: #fff; }
.ape-reply-quote { margin: 0; padding: 6px 12px; border-left: 3px solid color-mix(in srgb, var(--a1) 60%, transparent); font-size: 0.84rem; color: var(--muted); font-style: italic; white-space: pre-line; overflow-wrap: anywhere; }
.ape-reply-quote:empty { display: none; }
.ape-reply-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.ape-reply-row img { width: 30px; height: 30px; border-radius: 50%; }
.ape-reply-row textarea { width: 100%; padding: 10px 12px; border-radius: 12px; font: inherit; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); resize: vertical; }
.ape-reply-row textarea:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent); }
.ape-reply-box .ape-composer-foot > span { display: inline-flex; gap: 8px; }
/* icons1: the icons panel button next to Post / Reply / Save */
.ape-foot-btns { display: inline-flex; align-items: center; gap: 8px; }
.ape-icons-btn { width: 38px; height: 36px; padding: 0; border-radius: 12px; }
.ape-reply-box .ape-btn { padding: 8px 16px; cursor: pointer; font-family: inherit; color: #fff; }
.ape-reply-box .ape-btn--primary { color: var(--a-ink); }
@media (max-width: 600px) {
}
@media (prefers-reduced-motion: reduce) { .ape-reply-box { animation: none; } .ape-like svg { transition: none; } }
.ape-post-text small span { display: inline-flex; align-items: center; gap: 5px; }
.ape-post-text small svg { width: 14px; height: 14px; }

/* ---------- The glow around the header (Mortimer, 18-10-2026: "un glow vivo mega chulo, dependiendo del look") ----------
   A thin ring of the look's three colours turns slowly around the header, with a soft breathing light behind it. */
@property --ape-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* Owner shortcuts to the editor (apesites25): the pencil on the header, + New post, + Add images, Edit on a post.
   apesites26 (Mortimer, 18-10-2026): all of them share ONE look, the one of + Add images (same rules, no new colours). */
.ape-section-head a.ape-owner-add, .ape-edit-pill, .ape-react.ape-owner-edit {
    color: var(--a1); border: 1px solid color-mix(in srgb, var(--a1) 45%, transparent); background: color-mix(in srgb, var(--a1) 10%, transparent);
    transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ape-section-head a.ape-owner-add:hover, .ape-section-head a.ape-owner-add:focus-visible,
.ape-edit-pill:hover, .ape-edit-pill:focus-visible,
.ape-react.ape-owner-edit:hover, .ape-react.ape-owner-edit:focus-visible {
    color: var(--a-ink, #0b0418); border-color: transparent; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.ape-section-head a.ape-owner-add:focus-visible, .ape-edit-pill:focus-visible, .ape-react.ape-owner-edit:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.ape-section-head:has(.ape-owner-add) { align-items: center; }
.ape-section-head a.ape-owner-add { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; line-height: 1.2; border-radius: 999px; }
.ape-owner-add svg { width: 15px; height: 15px; }
/* the pencil: round, the size of the X / Discord buttons (46 px, 44 px on a phone) */
.ape-edit-pill { position: absolute; top: 14px; right: 14px; z-index: 6; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; }
.ape-edit-pill svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .ape-edit-pill { top: 10px; right: 10px; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .ape-section-head a.ape-owner-add, .ape-edit-pill, .ape-react.ape-owner-edit { transition: none; } }
.ape-hero-wrap { position: relative; border-radius: calc(var(--radius) + 6px); }
.ape-hero-wrap::before, .ape-hero-wrap::after { content: ''; position: absolute; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--ape-ang), var(--a1), var(--a2), var(--a3), var(--a1)); animation: ape-spin 9s linear infinite; }
.ape-hero-wrap::before { inset: -2.5px; z-index: 0; }
.ape-hero-wrap::after { inset: 6px -8px; z-index: -1; filter: blur(20px); opacity: 0.45; animation: ape-spin 9s linear infinite, ape-breathe 4.5s ease-in-out infinite; }
.ape-hero-wrap > .ape-hero { position: relative; z-index: 1; border-color: transparent; background: linear-gradient(180deg, #0d0520, #0a0418); box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
@keyframes ape-spin { to { --ape-ang: 360deg; } }
@keyframes ape-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .ape-hero-wrap::before, .ape-hero-wrap::after { animation: none; } .ape-hero-wrap::after { opacity: 0.4; } }

/* The glow stays around the header only (Mortimer, 18-10-2026: "más sutil… que no tape los contenedores"): the bar above
   and the menu below sit over it, on their own solid background. */
.ape-bar, .ape-tabs { position: relative; z-index: 2; background: linear-gradient(rgba(255,255,255,0.045), rgba(255,255,255,0.045)), #0c0420; }
.ape-article-video { border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line); }
.ape-article-video video { display: block; width: 100%; max-height: 640px; background: #000; }

/* BBCode texts of the sites (About and news), rendered by news_render like the BASC news (18-10-2026) */
.ape-rich { font-size: 1.04rem; line-height: 1.65; color: #dde2ee; overflow-wrap: anywhere; }
.ape-rich h3, .ape-rich h4, .ape-rich h5 { margin: 18px 0 8px; line-height: 1.25; font-weight: 900; color: #fff; }
.ape-rich h3 { font-size: 1.45rem; } .ape-rich h4 { font-size: 1.22rem; } .ape-rich h5 { font-size: 1.06rem; color: var(--a1); }
.ape-rich > h3:first-child, .ape-rich > h4:first-child, .ape-rich > h5:first-child { margin-top: 0; }
.ape-rich strong { color: #fff; font-weight: 800; }
.ape-rich a { color: var(--a1); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--a1) 45%, transparent); text-underline-offset: 3px; }
.ape-rich a:hover { text-decoration-color: currentColor; }
.ape-rich .nb-list { margin: 8px 0; padding-left: 22px; }
.ape-rich .nb-list li { margin: 4px 0; }
.ape-rich .nb-list li::marker { color: var(--a1); }
.ape-rich .nb-center { text-align: center; } .ape-rich .nb-right { text-align: right; } .ape-rich .nb-left { text-align: left; }

/* ---------- Phase 3 (18-10-2026): Follow, My apes, share ---------- */
.ape-owner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.ape-owner-row .ape-owner { margin: 0; }
.ape-follow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 16px; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 900; color: var(--a-ink);
    background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); border: 0; cursor: pointer; box-shadow: 0 8px 22px color-mix(in srgb, var(--a1) 35%, transparent); transition: filter 0.2s, transform 0.2s; }
.ape-follow b { padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; background: rgba(0,0,0,0.22); color: inherit; }
.ape-follow:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ape-follow.is-on { color: #fff; background: rgba(255,255,255,0.08); border: 1px solid color-mix(in srgb, var(--a1) 55%, transparent); box-shadow: none; }
.ape-follow.is-on b { background: color-mix(in srgb, var(--a1) 22%, transparent); }
.ape-follow-static { font-size: 0.84rem; color: var(--muted); }
.ape-follow-static b { color: #fff; }
.ape-apes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ape-ape { display: grid; gap: 4px; padding: 8px 8px 12px; border-radius: 16px; background: rgba(0,0,0,0.22); border: 1px solid var(--line); text-align: center; transition: transform 0.22s, border-color 0.22s; }
.ape-ape:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.ape-ape-img { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #160a2e; }
.ape-ape-img img { width: 100%; height: 100%; object-fit: cover; }
.ape-ape b { font-size: 0.86rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-ape small { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-ape-tags { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; }
.ape-tier { padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; font-style: normal; color: #e6e9f2; background: rgba(255,255,255,0.08); border: 1px solid var(--line-strong); }
.ape-tier--mythic { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff4d5e, #b3001b); box-shadow: 0 0 12px rgba(255,42,61,0.45); }   /* rarity2: Mythic red (Mortimer 19-10-2026), as on /rarity */
.ape-tier--legendary { color: #fde68a; border-color: rgba(251,191,36,0.6); background: rgba(251,191,36,0.12); }
.ape-tier--epic { color: #e9d5ff; border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.14); }
.ape-tier--rare { color: #bae6fd; border-color: rgba(56,189,248,0.6); background: rgba(56,189,248,0.12); }
.ape-tier--uncommon { color: #bbf7d0; border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.1); }
.ape-share-row { display: inline-flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.ape-share-net { padding: 9px 12px; }
.ape-share-net svg { width: 17px; height: 17px; }
.ape-share-net:hover { color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); border-color: transparent; }
.ape-share-row .ape-share { margin-left: 0; }
@media (max-width: 600px) {
    .ape-owner-row { justify-content: center; }
    .ape-apes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .ape-share-row { margin-left: 0; width: 100%; }
    .ape-share-row .ape-share { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ape-follow, .ape-ape { transition: none; } .ape-follow:hover, .ape-ape:hover { transform: none; } }

/* Polls on posts (apesites18; ape_site/_poll.html): the BASC posts' poll, in the site's colours */
.ape-poll { display: grid; gap: 12px; margin: 18px 0 6px; padding: 18px 20px; border-radius: 18px; background: rgba(255,255,255,0.035);
    border: 1px solid color-mix(in srgb, var(--a1) 38%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
.ape-section .ape-poll { margin: 0; }
.ape-poll-head { display: grid; gap: 8px; }
.ape-poll-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2)); }
.ape-poll.is-closed .ape-poll-tag { color: var(--muted); background: rgba(255,255,255,0.08); }
.ape-poll-q { margin: 0; font-size: 1.12rem; line-height: 1.35; font-weight: 800; overflow-wrap: anywhere; }
.ape-poll-options { display: grid; gap: 8px; }
.ape-poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px;
    padding: 10px 14px; border-radius: 12px; font: inherit; text-align: left; color: var(--text); cursor: pointer; background: rgba(0,0,0,0.28);
    border: 1px solid var(--line-strong); transition: border-color 0.2s, transform 0.1s; }
.ape-poll-opt:hover:not(:disabled) { border-color: color-mix(in srgb, var(--a1) 70%, transparent); }
.ape-poll-opt:active:not(:disabled) { transform: scale(0.995); }
.ape-poll-opt:disabled { cursor: default; }
.ape-poll-opt:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.ape-poll-fill { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--a1) 20%, transparent); transition: width 0.5s ease; pointer-events: none; }
.ape-poll-opt.is-mine { border-color: var(--a1); }
.ape-poll-opt.is-mine .ape-poll-fill { background: color-mix(in srgb, var(--a1) 34%, transparent); }
.ape-poll-opt.is-leading .ape-poll-text { font-weight: 800; }
.ape-poll-text, .ape-poll-num { position: relative; display: inline-flex; align-items: center; gap: 10px; }
.ape-poll-text { min-width: 0; overflow-wrap: anywhere; }
.ape-poll-num { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.ape-poll-num small { margin-left: 6px; font-weight: 600; color: var(--muted); }
.ape-poll-mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); }
.ape-poll-mark--box { border-radius: 4px; }
.ape-poll-opt.is-mine .ape-poll-mark { border-color: var(--a1); background: var(--a1); box-shadow: inset 0 0 0 3px #12062a; }
.ape-poll-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 0.8rem; color: var(--muted); }
.ape-poll-change { color: #a7f3d0; }
.ape-poll-more { margin-left: auto; font-weight: 800; color: var(--a1); }
.ape-poll-more:hover { text-decoration: underline; }
.ape-poll-note { margin: 0; font-size: 0.75rem; color: var(--muted); opacity: 0.85; }
.ape-poll-error[hidden] { display: none; }
.ape-post-poll { justify-self: start; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--a1); background: color-mix(in srgb, var(--a1) 15%, transparent); }
.ape-post-poll.is-closed { color: var(--muted); background: rgba(255,255,255,0.07); }
@media (max-width: 600px) {
    .ape-poll { padding: 16px 14px; }
    .ape-poll-more { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ape-poll-fill, .ape-poll-opt { transition: none; } }
.ape-section-note { font-size: 0.78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
@media (max-width: 600px) { .ape-section-head:has(.ape-section-note) { flex-wrap: wrap; } .ape-section-head:has(.ape-section-note) h2 { flex-basis: 100%; } }

/* Buttons with a background image (apesites19): the image covers the button, a dark layer keeps the text readable */
.ape-link.has-bg { isolation: isolate; min-height: 84px; align-content: center; border-color: color-mix(in srgb, var(--a1) 30%, var(--line)); }
.ape-link-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ape-link.has-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ape-link--light::after { background: linear-gradient(90deg, rgba(7, 2, 15, 0.72) 0%, rgba(7, 2, 15, 0.38) 60%, rgba(7, 2, 15, 0.12) 100%); }
.ape-link--medium::after { background: linear-gradient(90deg, rgba(7, 2, 15, 0.84) 0%, rgba(7, 2, 15, 0.58) 60%, rgba(7, 2, 15, 0.32) 100%); }
.ape-link--strong::after { background: linear-gradient(90deg, rgba(7, 2, 15, 0.92) 0%, rgba(7, 2, 15, 0.78) 60%, rgba(7, 2, 15, 0.6) 100%); }
.ape-link.has-bg span { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.ape-link.has-bg small { color: #dbe2ef; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.ape-link.has-bg i { display: grid; place-items: center; width: 30px; height: 30px; right: 14px; border-radius: 50%; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2)); }
.ape-link.has-bg:hover, .ape-link.has-bg:focus-visible { background: var(--card); }
.ape-link.has-bg:hover .ape-link-bg { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .ape-link-bg { transition: none; } .ape-link.has-bg:hover .ape-link-bg { transform: none; } }

/* My favorite apes: filter by rarity (apesites20) */
.ape-tier-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.ape-chip { --dot: var(--muted); display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 13px; border-radius: 999px; font: inherit;
    font-size: 0.8rem; font-weight: 800; color: var(--text); cursor: pointer; background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong);
    transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ape-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px var(--dot); }
.ape-chip[data-tier=""]::before { display: none; }
.ape-chip b { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ape-chip:hover { border-color: color-mix(in srgb, var(--a1) 60%, transparent); background: rgba(255,255,255,0.08); }
.ape-chip:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.ape-chip.is-on { color: var(--a-ink); border-color: transparent; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.ape-chip.is-on b { color: inherit; opacity: 0.75; }
.ape-chip--mythic { --dot: #ff2a3d; } .ape-chip--legendary { --dot: #fbbf24; } .ape-chip--epic { --dot: #a855f7; }   /* rarity2: the /rarity colours */
.ape-chip--rare { --dot: #38bdf8; } .ape-chip--uncommon { --dot: #22c55e; } .ape-chip--common { --dot: #94a3b8; }
.ape-apes > li[hidden] { display: none; }

/* favmenu1 (Mortimer 21-10-2026): a favourite ape opens a small menu over its card, like the NFT cards of /profile
   (basc.css .nft-pick): Rarity, and the Locker Room only for the NFT's own holder (ape-site.js asks the server) */
.ape-ape { position: relative; }
.ape-ape-open { display: grid; gap: 4px; min-width: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: center; text-decoration: none;
    background: none; border: 0; border-radius: 12px; }
a.ape-ape-open, button.ape-ape-open { cursor: pointer; }
.ape-ape-open:focus-visible { outline: 2px solid var(--a1); outline-offset: 4px; }
.ape-ape:has(.ape-pick) { transform: none; border-color: color-mix(in srgb, var(--a1) 70%, transparent); }
.ape-pick { position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; gap: 8px; padding: 34px 12px 12px; border-radius: 16px;
    background: rgba(10, 4, 22, 0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.14);
    animation: apePickIn 0.16s ease-out; }
.ape-pick-btn { display: grid; gap: 1px; padding: 9px 12px; border-radius: 11px; text-align: center; color: #fff; text-decoration: none;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); transition: transform 0.15s, background-color 0.15s, filter 0.15s; }
.ape-pick-btn b { font-size: 0.92rem; font-weight: 900; }
.ape-pick-btn b, .ape-pick-btn small { overflow: visible; white-space: normal; text-overflow: clip; }   /* not the card's one-line name rule */
.ape-pick-btn small { font-size: 0.75rem; color: rgba(255,255,255,0.72); }
.ape-pick-btn.is-locker { background: linear-gradient(135deg, #9945ff, #14f195); border-color: transparent; box-shadow: 0 8px 20px rgba(153,69,255,0.3); }
.ape-pick-btn.is-locker small { color: rgba(255,255,255,0.9); }
.ape-pick-btn:hover, .ape-pick-btn:focus-visible { transform: translateY(-1px); background-color: rgba(255,255,255,0.15); outline: none; }
.ape-pick-btn.is-locker:hover, .ape-pick-btn.is-locker:focus-visible { filter: brightness(1.08); }
.ape-pick-wait { padding: 9px 10px; border-radius: 11px; font-size: 0.75rem; text-align: center; color: rgba(255,255,255,0.7);
    border: 1px dashed rgba(255,255,255,0.18); animation: apePickWait 1.2s ease-in-out infinite alternate; }
.ape-pick-wait.is-note { animation: none; border-style: solid; }
.ape-pick-x { position: absolute; top: 6px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; font: inherit; font-size: 1.1rem; line-height: 1;
    color: #fff; background: rgba(255,255,255,0.1); cursor: pointer; }
.ape-pick-x:hover, .ape-pick-x:focus-visible { background: rgba(255,255,255,0.2); outline: none; }
@keyframes apePickIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes apePickWait { from { opacity: 0.55; } to { opacity: 1; } }
.ape-pick-btn b { white-space: nowrap; }
@media (max-width: 600px) { .ape-pick { padding: 34px 8px 10px; gap: 6px; } .ape-pick-btn { padding: 8px 6px; } .ape-pick-btn b { font-size: 0.86rem; } }
@media (prefers-reduced-motion: reduce) { .ape-pick, .ape-pick-wait { animation: none; } .ape-pick-btn { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ape-chip { transition: none; } }

/* Page background (apesites21; Mortimer: "muy sosos y muy oscuros… que el texto siempre se lea bien y que vaya ligero en
   el móvil"). .ape-bgfx sits behind everything, fixed:
   banner (default): the site's banner enlarged and blurred, so the page takes its colours (Aurora if there is none);
   aurora: three big glows in the site's colours, drifting slowly; mesh: a bright neon mesh with a fine grid;
   image: the owner's own image; classic: the old dark look.
   A layer on top sets the brightness (light, medium, dark) and a fine texture. Cards turn into tinted glass.
   Phones: smaller blur and no backdrop-filter (cheap to draw); the slow movement stays (apesites22). */
.ape-bgfx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #170a3a; }
body.ape:not(.ape-bg--classic) { background: #170a3a; }
.ape-bgfx > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ape-bgfx > i { position: absolute; display: none; border-radius: 50%; }   /* soft edges come from the gradient: no blur filter on a moving layer */
.ape-bgfx::before, .ape-bgfx::after { content: ''; position: absolute; inset: 0; }
/* the fine texture (every style) */
.ape-bgfx::before { z-index: 2; opacity: 0.5; background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.09) 1px, transparent 1.4px) 0 0 / 22px 22px,
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 7px); }
/* banner: enlarged and blurred, a little more colour */
.ape-bgfx > img { max-width: none; }   /* the global img { max-width: 100% } cut the enlarged banner on the right */
.ape-bg--banner .ape-bgfx > img { inset: 0; width: 100%; height: 100%; transform: scale(1.3); }   /* the image is already blurred (ape_sites.banner_backdrop) */
/* aurora and mesh: in the look's colours, alive but not dark */
.ape-bg--aurora .ape-bgfx { background: radial-gradient(130% 100% at 50% 115%, color-mix(in srgb, var(--a1) 40%, #170a3a), #170a3a 65%); }
.ape-bg--aurora .ape-bgfx > i { display: block; opacity: 0.85; will-change: transform; }
.ape-bg--aurora .ape-bgfx > i:nth-of-type(1) { width: 64vmax; height: 64vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, var(--a1) 0%, color-mix(in srgb, var(--a1) 45%, transparent) 38%, transparent 68%); animation: ape-drift-a 38s ease-in-out infinite alternate; }
.ape-bg--aurora .ape-bgfx > i:nth-of-type(2) { width: 58vmax; height: 58vmax; right: -20vmax; top: 4vmax; background: radial-gradient(circle, var(--a2) 0%, color-mix(in srgb, var(--a2) 45%, transparent) 38%, transparent 68%); animation: ape-drift-b 46s ease-in-out infinite alternate; }
.ape-bg--aurora .ape-bgfx > i:nth-of-type(3) { width: 50vmax; height: 50vmax; left: 20vmax; bottom: -26vmax; background: radial-gradient(circle, var(--a3) 0%, color-mix(in srgb, var(--a3) 45%, transparent) 38%, transparent 68%); opacity: 0.7; animation: ape-drift-c 54s ease-in-out infinite alternate; }
.ape-bg--mesh .ape-bgfx { background:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(60% 55% at 12% 10%, var(--a1), transparent 70%),
    radial-gradient(55% 60% at 92% 18%, var(--a2), transparent 70%),
    radial-gradient(70% 60% at 50% 105%, var(--a3), transparent 72%),
    radial-gradient(45% 45% at 70% 60%, color-mix(in srgb, var(--a1) 55%, transparent), transparent 70%), #1a0b40;
    inset: -8%; animation: ape-drift-layer 44s ease-in-out infinite alternate; }
/* brightness: the layer between the background and the content */
.ape-bgfx::after { z-index: 1; }
.ape-bg--dark-light .ape-bgfx::after { background: linear-gradient(180deg, rgba(14,6,36,0.12), rgba(14,6,36,0.38)); }
.ape-bg--dark-medium .ape-bgfx::after { background: linear-gradient(180deg, rgba(14,6,36,0.34), rgba(14,6,36,0.58)); }
.ape-bg--dark-strong .ape-bgfx::after { background: linear-gradient(180deg, rgba(14,6,36,0.58), rgba(14,6,36,0.8)); }
.ape-bg--classic .ape-bgfx { display: none; }
/* tinted glass over the lively backgrounds */
body.ape:not(.ape-bg--classic) .ape-card, body.ape:not(.ape-bg--classic) .ape-link:not(.has-bg), body.ape:not(.ape-bg--classic) .ape-foot,
body.ape:not(.ape-bg--classic) .ape-bar, body.ape:not(.ape-bg--classic) .ape-tabs {
    background: rgba(16, 8, 38, 0.66); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25);
    border-color: rgba(255,255,255,0.13); }
@keyframes ape-drift-a { to { transform: translate(14vmax, 10vmax) scale(1.12); } }
@keyframes ape-drift-b { to { transform: translate(-12vmax, 14vmax) scale(0.92); } }
@keyframes ape-drift-c { to { transform: translate(-10vmax, -12vmax) scale(1.1); } }
@keyframes ape-drift-layer { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3%, -2.5%) scale(1.06); } }
@media (max-width: 760px) {
    body.ape:not(.ape-bg--classic) .ape-card, body.ape:not(.ape-bg--classic) .ape-link:not(.has-bg), body.ape:not(.ape-bg--classic) .ape-foot,
    body.ape:not(.ape-bg--classic) .ape-bar, body.ape:not(.ape-bg--classic) .ape-tabs { background: rgba(16, 8, 38, 0.82); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .ape-bgfx > i, .ape-bg--mesh .ape-bgfx { animation: none !important; } }


/* ---------- apesites22 (Mortimer, 18-10-2026: "podrían tener vida propia muy sutil los backgrounds… los buttons deberían
   tener un poco más de vida también, efectos chulos, con y sin hover… cualquier botón que se coloree con el look") ----------
   Everything moves with transform, opacity or background-position only (cheap, also on phones) and stops with
   prefers-reduced-motion. */

/* Backgrounds: every style breathes, very slowly */
.ape-bg--banner .ape-bgfx > img { animation: ape-kenburns 46s ease-in-out infinite alternate; }
.ape-bg--image .ape-bgfx > img { animation: ape-kenburns-soft 60s ease-in-out infinite alternate; }
.ape-bgfx::before { inset: -220px; animation: ape-grain 90s linear infinite; }
.ape-bg--classic .ape-bgfx { display: block; background:
    radial-gradient(1100px 620px at 88% -8%, color-mix(in srgb, var(--a2) 26%, transparent), transparent 62%),
    radial-gradient(900px 640px at -12% 18%, color-mix(in srgb, var(--a1) 24%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 70%);
    inset: -8%; animation: ape-drift-layer 50s ease-in-out infinite alternate; }
.ape-bg--classic .ape-bgfx::after { background: none; }
@keyframes ape-kenburns { from { transform: scale(1.3) translate(0, 0); } to { transform: scale(1.42) translate(-2.5%, -2%); } }
@keyframes ape-kenburns-soft { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.2%, -1%); } }
@keyframes ape-grain { to { transform: translate(176px, 176px); } }

/* Coloured buttons painted with the look. The main ones (Follow, Log in, the active tab, primary buttons) have a wide
   gradient layer that slides behind the text (transform: cheap) and a light that sweeps over on hover. The small ones
   (chips, arrows, poll tag, owner tag, socials and share on hover) keep their gradient without a loop. */
.ape-btn--primary, .ape-bar-login, .ape-tabs a.is-on, .ape-follow:not(.is-on) { position: relative; overflow: hidden; isolation: isolate; background: var(--a1); }
.ape-btn--primary::before, .ape-bar-login::before, .ape-tabs a.is-on::before, .ape-follow:not(.is-on)::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 260%; z-index: -2; pointer-events: none;
    background: linear-gradient(110deg, var(--a1), var(--a2) 22%, var(--a3) 34%, var(--a2) 46%, var(--a1) 60%, var(--a2) 80%, var(--a1));
    animation: ape-slide 9s ease-in-out infinite alternate; }
.ape-btn--primary::after, .ape-bar-login::after, .ape-tabs a.is-on::after, .ape-follow::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); }
.ape-btn--primary:hover::after, .ape-bar-login:hover::after, .ape-tabs a.is-on:hover::after, .ape-follow:hover::after { animation: ape-sheen 0.9s ease; }
.ape-btn--primary:hover, .ape-bar-login:hover, .ape-follow:not(.is-on):hover { box-shadow: 0 10px 28px color-mix(in srgb, var(--a1) 45%, transparent), 0 0 0 1px rgba(255,255,255,0.15) inset; }
.ape-chip.is-on, .ape-link.has-bg i, .ape-poll-tag, .ape-c-owner, .ape-social:hover, .ape-share-net:hover {
    background-image: linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3)); }
@keyframes ape-slide { from { transform: translateX(0); } to { transform: translateX(-61.5%); } }
@keyframes ape-sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* Tabs (Home, News, Gallery): a glowing line grows under the one you point at */
.ape-tabs a { position: relative; }
.ape-tabs a:not(.is-on)::before { content: ''; position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: 0 0 10px var(--a1); transform: scaleX(0); transition: transform 0.3s ease; }
.ape-tabs a:not(.is-on):hover::before, .ape-tabs a:not(.is-on):focus-visible::before { transform: scaleX(1); }
.ape-tabs a:not(.is-on):hover { background: color-mix(in srgb, var(--a1) 10%, transparent); }

/* Link buttons: the side bar flows (a tall gradient that slides: transform), a light passes now and then (one after
   the other), and on hover the border glows. The arrow circles of buttons with an image send out a soft ring. */
.ape-link::before { top: -200%; bottom: auto; height: 300%; background: linear-gradient(180deg, var(--a1), var(--a2), var(--a3), var(--a1), var(--a2), var(--a3), var(--a1));
    animation: ape-bar 6s linear infinite; }
.ape-link-shine { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ape-link-shine::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; transform: translateX(-130%) skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent); animation: ape-pass 9s ease-in-out infinite; }
.ape-link:nth-child(2) .ape-link-shine::before { animation-delay: 1.5s; } .ape-link:nth-child(3) .ape-link-shine::before { animation-delay: 3s; }
.ape-link:nth-child(4) .ape-link-shine::before { animation-delay: 4.5s; } .ape-link:nth-child(5) .ape-link-shine::before { animation-delay: 6s; }
.ape-link:nth-child(6) .ape-link-shine::before { animation-delay: 7.5s; } .ape-link:nth-child(7) .ape-link-shine::before { animation-delay: 2.2s; }
.ape-link:nth-child(8) .ape-link-shine::before { animation-delay: 5.2s; }
.ape-link > span, .ape-link > small { position: relative; z-index: 1; }
.ape-link > i { z-index: 1; }   /* stays absolute, on the right */
.ape-link:hover, .ape-link:focus-visible { border-color: color-mix(in srgb, var(--a1) 70%, transparent);
    box-shadow: 0 16px 38px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--a1) 40%, transparent), 0 0 34px color-mix(in srgb, var(--a1) 28%, transparent); }
.ape-link:hover .ape-link-shine::before { animation: ape-pass-now 0.9s ease forwards; }
.ape-link:hover i { transform: translate(4px, -50%) rotate(-8deg) scale(1.1); }
.ape-link.has-bg i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--a1); opacity: 0;
    pointer-events: none; animation: ape-ring 3.2s ease-out infinite; }
@keyframes ape-bar { from { transform: translateY(0); } to { transform: translateY(33.333%); } }
@keyframes ape-pass { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes ape-pass-now { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }
@keyframes ape-ring { 0% { transform: scale(1); opacity: 0.65; } 80%, 100% { transform: scale(1.75); opacity: 0; } }

/* Socials and the other small buttons: a little bounce and glow */
.ape-social:hover svg { animation: ape-pop 0.45s ease; }
.ape-btn:not(.ape-btn--primary):hover { border-color: color-mix(in srgb, var(--a1) 55%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--a1) 22%, transparent); }
@keyframes ape-pop { 40% { transform: scale(1.22) rotate(-6deg); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .ape-bgfx > img, .ape-bgfx::before, .ape-bg--classic .ape-bgfx, .ape-link::before, .ape-link-shine::before, .ape-link.has-bg i::after,
    .ape-btn--primary::before, .ape-bar-login::before, .ape-tabs a.is-on::before, .ape-follow::before, .ape-follow:not(.is-on)::before,
    .ape-social:hover svg, .ape-btn--primary::after, .ape-bar-login::after, .ape-tabs a.is-on::after, .ape-follow::after,
    .ape-btn--primary:hover::after, .ape-bar-login:hover::after, .ape-tabs a.is-on:hover::after, .ape-follow:hover::after,
    .ape-link:hover .ape-link-shine::before, .ape-bg--banner .ape-bgfx > img, .ape-bg--image .ape-bgfx > img, .ape-bg--mesh .ape-bgfx,
    .ape-bg--aurora .ape-bgfx > i:nth-of-type(1), .ape-bg--aurora .ape-bgfx > i:nth-of-type(2), .ape-bg--aurora .ape-bgfx > i:nth-of-type(3) { animation: none !important; }
    .ape-tabs a::before { transition: none; }
}

/* A comment's link (?comment=, apesites26): the comment glows in the look's colour for a few seconds (opacity only) */
.ape-c.is-arrived::before { content: ''; position: absolute; left: -5px; right: -5px; top: -5px; height: calc(var(--arrive-h, 100%) + 10px); border-radius: 17px;
    border: 2px solid var(--a1); background: color-mix(in srgb, var(--a1) 12%, transparent); box-shadow: 0 0 26px color-mix(in srgb, var(--a1) 35%, transparent);
    pointer-events: none; animation: ape-arrive 4.2s ease forwards; }
@keyframes ape-arrive { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ape-c.is-arrived::before { animation: none; } }

/* The shared like heart (components/_heart.html, apesites28): the same states on cards, posts and comments, and the same
   as bascdao.com's comments (basc.css): grey outline, pink on hover, pink and filled once liked, a small pop and a press. */
@media (hover: hover) {
    .ape-c-tool.ape-like:hover { color: #fda4af; }
    .ape-like:hover svg, .ape-card-like:hover svg { transform: scale(1.12); }
}
.ape-c-tool.ape-like.is-on, .ape-c-tool.ape-like.is-on:hover, .ape-card-like.is-on:hover { color: #fb7185; }
@media (prefers-reduced-motion: reduce) {
    .ape-like:hover svg, .ape-card-like:hover svg, .ape-like:active svg { transform: none; }
}

/* Scrollbars (apesites28, Mortimer, 19-10-2026): the same as bascdao.com (thin, dark track, round thumb that lights up on
   hover) with the colours of the site's look (a1 → a2); without a look, the Solana gradient. The look class is also on
   <html> (_layout.html), because the page scrollbar belongs to <html>. ::-webkit-scrollbar parts for Chrome, Edge and
   Safari; scrollbar-color / scrollbar-width only for Firefox. Hidden scrollbars (.ape-tabs) stay hidden. */
html { scrollbar-gutter: stable; }
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-color: var(--a1, #9945ff) #0b0518; }
    * { scrollbar-color: color-mix(in srgb, var(--a1, #9945ff) 75%, transparent) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-track { background: #0b0518; box-shadow: inset 1px 0 0 rgba(255,255,255,0.05); }
::-webkit-scrollbar-thumb { min-height: 40px; border: 2px solid transparent; border-radius: 999px; background-clip: padding-box;
    background-color: var(--a1, #9945ff); background-image: linear-gradient(180deg, var(--a1, #9945ff), var(--a2, #14f195)); }
::-webkit-scrollbar-thumb:horizontal { min-width: 40px; background-image: linear-gradient(90deg, var(--a1, #9945ff), var(--a2, #14f195)); }
::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, color-mix(in srgb, var(--a1, #9945ff) 70%, #fff), color-mix(in srgb, var(--a2, #14f195) 70%, #fff)); }
::-webkit-scrollbar-thumb:horizontal:hover { background-image: linear-gradient(90deg, color-mix(in srgb, var(--a1, #9945ff) 70%, #fff), color-mix(in srgb, var(--a2, #14f195) 70%, #fff)); }
::-webkit-scrollbar-thumb:active { background-image: linear-gradient(180deg, color-mix(in srgb, var(--a1, #9945ff) 55%, #fff), color-mix(in srgb, var(--a2, #14f195) 55%, #fff)); }
::-webkit-scrollbar-corner { background: transparent; }

/* Native drop-downs (daohub5, 19-10-2026): dark controls and dark option lists, never white on white. */
:root { color-scheme: dark; }
select option, select optgroup { background-color: #140a26; color: #f4f6fb; }
select option:checked { background-color: #2a1a52; color: #fff; }

/* apeframe1 (Mortimer, 19-10-2026: "cambiar un poco los colores de sus respectivos backgrounds con colores dependiendo del
   look aplicado pero sin darle tampoco demasiado color"): the two club blocks, the BASC bar on top and the club footer,
   take a soft wash of the site's look and a thin line in its colours, so they frame the owner's site. Only a light
   tint over the same dark glass: buttons and texts keep all their colour. The owner's own blocks do not change. */
body.ape .ape-bar, body.ape .ape-foot,
body.ape:not(.ape-bg--classic) .ape-bar, body.ape:not(.ape-bg--classic) .ape-foot {
    --frame: linear-gradient(105deg, color-mix(in srgb, var(--a1) 15%, transparent), color-mix(in srgb, var(--a2) 8%, transparent) 55%, color-mix(in srgb, var(--a3) 13%, transparent));
    background: var(--frame), rgba(14, 7, 34, 0.74);
    border-color: color-mix(in srgb, var(--a1) 26%, rgba(255,255,255,0.1));
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--a1) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.06); }
body.ape .ape-foot, body.ape:not(.ape-bg--classic) .ape-foot {
    --frame: linear-gradient(285deg, color-mix(in srgb, var(--a1) 15%, transparent), color-mix(in srgb, var(--a2) 8%, transparent) 55%, color-mix(in srgb, var(--a3) 13%, transparent));
    position: relative; overflow: hidden; }
body.ape.ape-bg--classic .ape-bar { background: var(--frame), #0c0420; }   /* classic: still solid over the header glow */
/* the thin line in the look's colours: under the bar, over the footer */
.ape-bar::after, .ape-foot::before { content: ''; position: absolute; left: 18px; right: 18px; height: 1px; pointer-events: none; opacity: 0.7;
    background: linear-gradient(90deg, transparent, var(--a1) 20%, var(--a2) 50%, var(--a3) 80%, transparent); }
.ape-bar::after { bottom: -1px; }
.ape-foot::before { top: -1px; }
body.ape .ape-bar-link:hover, body.ape .ape-foot nav a:hover { background: color-mix(in srgb, var(--a1) 14%, rgba(255,255,255,0.05)); }
body.ape .ape-me { background: color-mix(in srgb, var(--a1) 9%, rgba(255,255,255,0.04)); border-color: color-mix(in srgb, var(--a1) 22%, rgba(255,255,255,0.1)); }
@media (max-width: 760px) {
    body.ape .ape-bar, body.ape .ape-foot,
    body.ape:not(.ape-bg--classic) .ape-bar, body.ape:not(.ape-bg--classic) .ape-foot { background: var(--frame), rgba(14, 7, 34, 0.86); }
}

/* apecomments1 (Mortimer, 20-10-2026): comment dates as in the BASC News («5m ago», full date in the tooltip) and the
   owner's Hide / Unhide in the comment's top right corner */
.ape-c-head .ape-c-dot { color: var(--muted); opacity: 0.7; }
.ape-article .ape-c-head time { font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); cursor: default; }
.ape-c:has(> .ape-c-hide) > .ape-c-head { padding-right: 96px; }
.ape-c-hide { position: absolute; top: 9px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px;
    border-radius: 999px; font: inherit; font-size: 0.75rem; font-weight: 800; color: #fde68a; cursor: pointer;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.32); transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ape-c-hide svg { width: 14px; height: 14px; flex: none; }
.ape-c-hide:hover { color: #fff3c4; background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.6); }
.ape-c-hide.is-on { color: #bbf7d0; background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.4); }
.ape-c-hide.is-on:hover { color: #dcfce7; background: rgba(34,197,94,0.18); border-color: rgba(34,197,94,0.65); }
@media (max-width: 600px) {
    .ape-c:has(> .ape-c-hide) > .ape-c-head { padding-right: 40px; }
    .ape-c-hide { padding: 6px; }
    .ape-c-hide span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* The club's custom tooltips (static/js/tips.js, as on bascdao.com), in the site's own colours */
.tip { position: fixed; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: 9px 12px; border-radius: 12px; pointer-events: none;
    display: grid; gap: 4px; font-size: 0.8rem; line-height: 1.4; color: #eef2fa; text-align: left;
    background: linear-gradient(160deg, rgba(36,14,64,0.97), rgba(10,5,22,0.97)); border: 1px solid color-mix(in srgb, var(--a1) 55%, transparent);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 22px color-mix(in srgb, var(--a1) 20%, transparent), inset 0 1px 0 rgba(255,255,255,0.06);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; transform: translateY(4px) scale(0.98); transition: opacity 0.14s ease, transform 0.14s ease; }
.tip.is-below { transform: translateY(-4px) scale(0.98); }
.tip.is-on { opacity: 1; transform: none; }
.tip::after { content: ''; position: absolute; left: var(--tip-arrow, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: rgba(12,6,26,0.97);
    border-right: 1px solid color-mix(in srgb, var(--a1) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--a1) 55%, transparent); transform: rotate(45deg); }
.tip.is-below::after { bottom: auto; top: -6px; transform: rotate(225deg); }
.tip-text { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .tip, .ape-c-hide { transition: none; } }

/* apedraft1 (Mortimer, 20-10-2026): a new post is a preview only its owner sees, until they publish it */
.ape-draft-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: #fde68a;
    background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.45); }
.ape-draft-chip i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; }
.ape-draft-chip i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fbbf24; animation: ape-draft-pulse 2.2s ease-out infinite; }
@keyframes ape-draft-pulse { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.ape-article.is-draft { border-style: dashed; border-color: rgba(245,158,11,0.45); }
body:has(.ape-preview--post) .ape-foot { margin-bottom: 120px; }
.ape-preview--post { width: min(860px, calc(100% - 24px)); justify-content: space-between; text-align: left; }
.ape-preview--post > span:first-of-type { flex: 1 1 300px; }
.ape-preview-acts { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ape-preview .ape-preview-btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 800;
    color: #fff; background: rgba(255,255,255,0.07); border: 1px solid var(--line-strong); cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
.ape-preview .ape-preview-btn:hover { text-decoration: none; background: rgba(255,255,255,0.13); }
.ape-preview .ape-preview-btn--go { color: var(--a-ink); border-color: transparent; background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--a1) 30%, transparent); }
.ape-preview .ape-preview-btn--go:hover { background: linear-gradient(135deg, var(--a1), var(--a2) 62%, var(--a3)); transform: translateY(-1px); box-shadow: 0 12px 28px color-mix(in srgb, var(--a1) 42%, transparent); }
.ape-preview .ape-preview-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.ape-preview-error { flex-basis: 100%; }
@media (max-width: 600px) {
    .ape-preview--post { gap: 8px 10px; bottom: 10px; padding: 10px 12px; font-size: 0.8rem; line-height: 1.45; }
    .ape-preview--post > b { display: none; }      /* the post already wears its "Preview" chip */
    .ape-preview .ape-preview-btn { padding: 7px 12px; font-size: 0.82rem; }
    .ape-preview-acts { width: 100%; }
    .ape-preview-acts .ape-preview-btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ape-draft-chip i::after { animation: none; opacity: 0; } .ape-preview .ape-preview-btn { transition: none; } }

/* xeteam1 (20-10-2026): the team pill next to a commenter, «Water · Admin» in the tribe colour, «Superadmin» or «BASC Team» */
.team-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; line-height: 1.5;
    color: color-mix(in srgb, var(--xc, #e72363) 42%, #fff); background: color-mix(in srgb, var(--xc, #e72363) 20%, transparent); border: 1px solid color-mix(in srgb, var(--xc, #e72363) 60%, transparent); }

/* xeteam2 (20-10-2026): the owner's team pill in the header («Superadmin», «Water · Leader», «BASC Team»), else «BASC member» */
.ape-owner .team-pill { vertical-align: 1px; }

/* ===== apehero1 (Mortimer, 20-10-2026: «unos headers en los subdomains de ESCANDALO!? para que nuestros usuarios quieran
   tener sus subdominios en bascdao si o si … llevamos a otro nivel!») =====
   Five header styles chosen in /my-site (ape_sites.HERO_STYLES): Cinematic (default), Hologram, Synthwave, Cosmic and
   Classic (the header as it was). Every layer is decoration in the look's colours (--a1/--a2/--a3), drawn with gradients;
   the loops move only transform and opacity (no filter on a moving layer), stop while the header is off screen (.is-off,
   static/js/ape-hero.js) and under prefers-reduced-motion. The banner pans a little with the mouse (--hx/--hy) and the
   particles of the chosen FX (data-hero-fx) float over it and burst where it is clicked. */
.ape-hero .ah-pan { position: absolute; inset: 0; display: block; }
.ape-hero:not(.ape-hero--classic) .ah-pan { inset: -14px; transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ape-hero .ah-pan > img { width: 100%; height: 100%; object-fit: cover; }
.ape-banner > span:not(.ah-pan) { position: absolute; pointer-events: none; }
.ape-banner .ah-fx { inset: 0; z-index: 3; overflow: hidden; }
.ah-pic { position: relative; display: grid; place-items: center; align-self: end; }
.ah-pic > .ape-avatar { position: relative; z-index: 1; }
.ah-pic > i, .ah-pic > svg { position: absolute; pointer-events: none; border-radius: 50%; }
.ah-deco { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.ape-hero:not(.ape-hero--classic) .ape-id { z-index: 2; }

/* the spotlight that follows the mouse, and the address of the site, proudly on top */
.ape-hero:not(.ape-hero--classic)::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.5s;
    background: radial-gradient(520px 320px at var(--mx, 50%) var(--my, 30%), color-mix(in srgb, var(--a1) 16%, transparent), transparent 70%); }
.ape-hero.is-lit::before { opacity: 1; }
.ah-domain { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px;
    font: 700 0.75rem/1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; letter-spacing: 0.04em; color: #fff;
    background: rgba(10, 4, 26, 0.62); border: 1px solid color-mix(in srgb, var(--a1) 45%, rgba(255,255,255,0.15));
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 22px color-mix(in srgb, var(--a1) 22%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ah-domain i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--a2); box-shadow: 0 0 10px var(--a2); }
.ah-domain i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--a2); animation: ah-ping 2.4s ease-out infinite; }

/* the picture: a halo that breathes, a ring of light that turns and an orbit with three moons */
.ah-halo { inset: -26px; background: radial-gradient(closest-side, color-mix(in srgb, var(--a1) 55%, transparent), color-mix(in srgb, var(--a2) 22%, transparent) 60%, transparent);
    animation: ah-breathe 4.8s ease-in-out infinite; }
.ah-ring { inset: -7px; background: conic-gradient(var(--a1), var(--a2), var(--a3), transparent 70%, var(--a1));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    animation: ah-turn 5s linear infinite; }
.ah-orbit { inset: -22px; border: 1px dashed rgba(255,255,255,0.22); animation: ah-turn 22s linear infinite reverse; }
.ah-orbit b { position: absolute; inset: 0; transform: rotate(calc(var(--n, 0) * 120deg)); }
.ah-orbit b:nth-child(2) { --n: 1; } .ah-orbit b:nth-child(3) { --n: 2; }
.ah-orbit b::before { content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%;
    background: var(--a2); box-shadow: 0 0 12px var(--a2), 0 0 2px #fff; }
.ah-orbit b:nth-child(2)::before { width: 6px; height: 6px; top: -3px; margin-left: -3px; background: var(--a3); box-shadow: 0 0 10px var(--a3); }
.ah-orbit b:nth-child(3)::before { width: 5px; height: 5px; top: -2.5px; margin-left: -2.5px; background: #fff; box-shadow: 0 0 10px var(--a1); }
.ape-hero:not(.ape-hero--classic) .ape-avatar { box-shadow: 0 18px 46px rgba(0,0,0,0.55); }

/* the name: once it arrives, a flash of light runs over it (again when the header is hovered) */
.ape-hero:not(.ape-hero--classic) .ape-hero-title { position: relative; }
.ape-hero:not(.ape-hero--classic) .ape-hero-title::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; color: color-mix(in srgb, var(--a3) 35%, #fff);
    text-shadow: 0 0 18px rgba(255,255,255,0.6); filter: none; background: none; -webkit-text-fill-color: currentColor;
    -webkit-mask: linear-gradient(105deg, transparent 40%, #000 49%, #000 51%, transparent 60%) 130% 0 / 260% 100% no-repeat;
    mask: linear-gradient(105deg, transparent 40%, #000 49%, #000 51%, transparent 60%) 130% 0 / 260% 100% no-repeat; }
.ape-hero.is-in:not(.ape-hero--classic) .ape-hero-title::after { animation: ah-shine 1.6s 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.ape-hero.is-in.is-lit:not(.ape-hero--classic) .ape-hero-title::after { animation: ah-shine-hover 1.4s cubic-bezier(0.3, 0.6, 0.2, 1) both; }
.ape-hero:not(.ape-hero--classic) .ape-socials li { animation: ah-pop 0.6s calc(0.7s + var(--i, 0) * 0.07s) cubic-bezier(0.2, 1.4, 0.4, 1) backwards; }
.ape-hero:not(.ape-hero--classic) .ape-social:hover, .ape-hero:not(.ape-hero--classic) .ape-social:focus-visible { transform: translateY(-4px) scale(1.06); }

/* the arrival (every page: the header is the site's signature) */
.ape-hero:not(.ape-hero--classic) .ah-pic { animation: ah-pic-in 1s 0.15s cubic-bezier(0.2, 1.2, 0.3, 1) backwards; }
.ape-hero:not(.ape-hero--classic) .ape-id-text > * { animation: ah-rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ape-hero:not(.ape-hero--classic) .ape-id-text > :nth-child(1) { animation-delay: 0.3s; }
.ape-hero:not(.ape-hero--classic) .ape-id-text > :nth-child(2) { animation-delay: 0.42s; }
.ape-hero:not(.ape-hero--classic) .ape-id-text > :nth-child(3) { animation-delay: 0.54s; }
.ape-hero:not(.ape-hero--classic) .ah-domain { animation: ah-rise 0.8s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* --- Cinematic: the banner as a film still: slow push-in, colour grade, a light that crosses it, a lens flare --- */
.ape-hero--cinematic .ah-pan > img { animation: ah-kenburns 32s ease-in-out infinite alternate; }
.ape-hero--cinematic .ah-grade { inset: 0; z-index: 1; mix-blend-mode: soft-light; opacity: 0.85;
    background: linear-gradient(90deg, var(--a1), transparent 32%, transparent 68%, var(--a2)), radial-gradient(120% 120% at 50% 40%, transparent 55%, rgba(0,0,0,0.65)); }
.ape-hero--cinematic .ah-sweep { top: -30%; bottom: -30%; left: 0; width: 26%; z-index: 1; mix-blend-mode: screen;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.05) 30%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.05) 70%, transparent);
    transform: translateX(-130%) skewX(-14deg); animation: ah-sweep 9s 1.6s ease-in-out infinite; }
.ape-hero--cinematic .ah-flare { left: -10%; right: -10%; top: 66%; height: 70px; margin-top: -35px; z-index: 1; mix-blend-mode: screen;
    background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--a2) 55%, transparent), transparent 70%); animation: ah-flare 7s ease-in-out infinite; }
.ape-hero--cinematic .ah-flare::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a2) 80%, transparent) 30%, #fff 50%, color-mix(in srgb, var(--a1) 80%, transparent) 70%, transparent); }
.ape-hero--cinematic .ape-hero-title { text-shadow: 0 6px 34px color-mix(in srgb, var(--a1) 45%, transparent), 0 2px 2px rgba(0,0,0,0.35); }
.ape-hero-wrap--cinematic::after { opacity: 0.6; }

/* --- Hologram: a transmission: scan lines, a scanning bar, colour ghosts that glitch, a HUD frame, a hexagon picture --- */
.ape-hero--hologram .ah-pan > img { filter: saturate(0.9) contrast(1.08) brightness(0.95); }
.ape-hero--hologram .ah-tint { inset: 0; z-index: 1; mix-blend-mode: overlay; opacity: 0.7;
    background: linear-gradient(180deg, color-mix(in srgb, var(--a2) 45%, transparent), color-mix(in srgb, var(--a1) 50%, transparent)); }
.ape-hero--hologram .ah-lines { inset: 0; z-index: 1; opacity: 0.6; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.32) 0 1px, transparent 1px 3px); }
.ape-hero--hologram .ah-scan { left: 0; right: 0; top: 0; height: 22%; z-index: 2; border-bottom: 1px solid color-mix(in srgb, var(--a2) 80%, #fff);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--a2) 26%, transparent)); box-shadow: 0 6px 18px color-mix(in srgb, var(--a2) 35%, transparent);
    transform: translateY(-120%); animation: ah-scan 4.6s linear infinite; }
.ape-hero--hologram .ah-ghost { inset: -14px; z-index: 1; opacity: 0; mix-blend-mode: screen; background: var(--a1); }
.ape-hero--hologram .ah-ghost--b { background: var(--a2); }
.ape-hero--hologram .ah-ghost img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.ape-hero--hologram .ah-ghost--a { animation: ah-glitch-a 7s steps(1) infinite; }
.ape-hero--hologram .ah-ghost--b { animation: ah-glitch-b 7s steps(1) infinite; }
.ape-hero--hologram .ah-hud i { position: absolute; width: 30px; height: 30px; border: 2px solid var(--a2); filter: drop-shadow(0 0 6px var(--a2)); opacity: 0.9; }
.ape-hero--hologram .ah-hud i:nth-child(1) { top: 10px; left: 10px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.ape-hero--hologram .ah-hud i:nth-child(2) { top: 10px; right: 10px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.ape-hero--hologram .ah-hud i:nth-child(3) { bottom: 10px; left: 10px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.ape-hero--hologram .ah-hud i:nth-child(4) { bottom: 10px; right: 10px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.ape-hero--hologram .ah-hud { position: absolute; inset: 0; z-index: 2; }
.ape-hero--hologram .ah-deco::before { content: ''; position: absolute; inset: 0;
    background: linear-gradient(color-mix(in srgb, var(--a2) 10%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
                linear-gradient(90deg, color-mix(in srgb, var(--a2) 10%, transparent) 1px, transparent 1px) 0 0 / 28px 28px;
    -webkit-mask: linear-gradient(180deg, transparent 50%, #000); mask: linear-gradient(180deg, transparent 50%, #000); }
.ape-hero--hologram .ah-readout { position: absolute; top: 50px; left: 16px; z-index: 3; font: 700 0.75rem/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.18em;
    color: color-mix(in srgb, var(--a2) 70%, #fff); text-shadow: 0 0 8px var(--a2); }
.ape-hero--hologram .ah-readout b { color: var(--a1); font-weight: 700; }
.ape-hero--hologram .ah-readout::after { content: '_'; margin-left: 4px; animation: ah-blink 1s steps(1) infinite; }
.ape-hero--hologram .ah-domain { border-radius: 6px; border-color: color-mix(in srgb, var(--a2) 60%, transparent); }
.ape-hero--hologram .ape-avatar { border-radius: 0; border: 0; background: #0b0420;
    clip-path: polygon(50% 2%, 91.5% 26%, 91.5% 74%, 50% 98%, 8.5% 74%, 8.5% 26%); }
.ape-hero--hologram .ah-hex { inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 0; overflow: visible; z-index: 2; }
.ape-hero--hologram .ah-hex polygon { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ape-hero--hologram .ah-hex polygon:first-child { stroke: var(--a2); filter: drop-shadow(0 0 6px var(--a2)); }
.ape-hero--hologram .ah-hex polygon:last-child { stroke: var(--a1); stroke-width: 2; stroke-dasharray: 14 10; animation: ah-dash 6s linear infinite; }
.ape-hero--hologram .ah-ring { display: none; }
.ape-hero--hologram .ah-halo { inset: -30px; border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ape-hero--hologram .ape-hero-title { color: #effcff; text-shadow: -2px 0 color-mix(in srgb, var(--a1) 85%, transparent), 2px 0 color-mix(in srgb, var(--a2) 85%, transparent), 0 0 24px color-mix(in srgb, var(--a2) 40%, transparent); }
.ape-hero--hologram .ape-hero-title::before { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; color: var(--a2); opacity: 0;
    clip-path: inset(40% 0 44% 0); text-shadow: none; animation: ah-glitch-text 6s steps(1) infinite; }
.ape-hero-wrap--hologram::before { background: conic-gradient(from var(--ape-ang), var(--a2), transparent 25%, var(--a1) 50%, transparent 75%, var(--a2)); }

/* --- Synthwave: an 80s sunset: a striped sun rising on the horizon, stars, a neon grid floor, a name in neon tubes --- */
.ape-hero--synthwave .ah-tint { inset: 0; z-index: 1; mix-blend-mode: screen; opacity: 0.6;
    background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--a2) 40%, transparent) 78%, color-mix(in srgb, var(--a1) 75%, transparent)); }
.ape-hero--synthwave .ah-stars { inset: 0 0 40% 0; z-index: 1;
    background: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.6px 1.6px at 46% 14%, #fff, transparent),
                radial-gradient(1px 1px at 63% 40%, #fff, transparent), radial-gradient(1.4px 1.4px at 79% 18%, #fff, transparent), radial-gradient(1px 1px at 91% 56%, #fff, transparent),
                radial-gradient(1.2px 1.2px at 7% 70%, #fff, transparent), radial-gradient(1px 1px at 55% 72%, #fff, transparent);
    animation: ah-twinkle 3.2s ease-in-out infinite alternate; }
.ape-hero--synthwave .ah-sun { left: 80%; bottom: -12%; z-index: 1; width: 21%; aspect-ratio: 1; margin-left: -10.5%; border-radius: 50%; mix-blend-mode: screen; opacity: 0.62;
    background: linear-gradient(180deg, var(--a3), var(--a1) 55%, var(--a2));
    -webkit-mask: linear-gradient(180deg, #000 48%, transparent 48%), repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 10.5%);
    mask: linear-gradient(180deg, #000 48%, transparent 48%), repeating-linear-gradient(180deg, #000 0 7%, transparent 7% 10.5%);
    animation: ah-sunrise 1.8s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.ape-hero--synthwave .ah-horizon { left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, transparent, var(--a1) 20%, #fff 50%, var(--a1) 80%, transparent);
    box-shadow: 0 0 18px var(--a1), 0 0 40px var(--a2); }
.ape-hero--synthwave { container-type: inline-size; }
.ape-hero--synthwave .ah-floor { position: absolute; left: 0; right: 0; bottom: 0; top: 33.333cqw; perspective: 260px; perspective-origin: 50% 0;
    -webkit-mask: linear-gradient(180deg, transparent, #000 35%); mask: linear-gradient(180deg, transparent, #000 35%); opacity: 0.32; }
.ape-hero--synthwave .ah-floor i { position: absolute; left: -50%; right: -50%; top: 0; height: 220%; transform-origin: 50% 0;
    background: linear-gradient(color-mix(in srgb, var(--a1) 85%, transparent) 2px, transparent 2px) 0 0 / 60px 40px,
                linear-gradient(90deg, color-mix(in srgb, var(--a2) 75%, transparent) 2px, transparent 2px) 0 0 / 60px 40px;
    transform: rotateX(72deg) translateY(0); animation: ah-floor 1.6s linear infinite; }
.ape-hero--synthwave .ape-hero-title { color: #fff; font-style: italic; letter-spacing: 0;
    text-shadow: 0 0 4px #fff, 0 0 14px var(--a1), 0 0 34px var(--a1), 0 0 70px var(--a2); animation: ah-neon 8s 1.4s linear infinite; }
.ape-hero--synthwave .ape-hero-title::after { display: none; }
.ape-hero--synthwave .ah-ring { inset: -6px; background: none; -webkit-mask: none; mask: none; border: 3px solid var(--a1); box-shadow: 0 0 14px var(--a1), inset 0 0 14px var(--a1); animation: ah-neon-ring 3.6s ease-in-out infinite; }
.ape-hero--synthwave .ah-orbit { inset: -16px; border: 2px solid color-mix(in srgb, var(--a2) 80%, transparent); box-shadow: 0 0 12px var(--a2); animation: ah-turn 16s linear infinite; }
.ape-hero--synthwave .ah-orbit b:nth-child(n+2) { display: none; }
.ape-hero--synthwave .ah-domain { border-color: var(--a1); box-shadow: 0 0 16px color-mix(in srgb, var(--a1) 55%, transparent); }

/* --- Cosmic: the banner in deep space: drifting stars, a nebula in the look's colours, comets, planets around the picture --- */
.ape-hero--cosmic .ah-tint { inset: 0; z-index: 1; background: radial-gradient(130% 120% at 50% 30%, transparent 40%, rgba(4, 0, 18, 0.8)); }
.ape-hero--cosmic .ah-nebula { inset: -40%; z-index: 1; mix-blend-mode: screen; opacity: 0.8;
    background: radial-gradient(28% 24% at 30% 45%, color-mix(in srgb, var(--a1) 70%, transparent), transparent 70%),
                radial-gradient(30% 26% at 68% 55%, color-mix(in srgb, var(--a2) 65%, transparent), transparent 70%),
                radial-gradient(20% 20% at 52% 38%, color-mix(in srgb, var(--a3) 55%, transparent), transparent 70%);
    animation: ah-turn 90s linear infinite; }
.ape-hero--cosmic .ah-stars { top: 0; bottom: 0; left: 0; width: 200%; z-index: 2; }
.ape-hero--cosmic .ah-stars--far { opacity: 0.7; animation: ah-stars 140s linear infinite;
    background: radial-gradient(1px 1px at 10px 20px, #fff, transparent), radial-gradient(1px 1px at 70px 90px, #fff, transparent), radial-gradient(1px 1px at 130px 40px, #fff, transparent),
                radial-gradient(1px 1px at 170px 120px, #fff, transparent), radial-gradient(1px 1px at 40px 140px, #fff, transparent),
                radial-gradient(1.2px 1.2px at 100px 10px, #fff, transparent), radial-gradient(1px 1px at 150px 75px, #fff, transparent) 0 0 / 190px 160px; }
.ape-hero--cosmic .ah-stars--near { animation: ah-stars 70s linear infinite;
    background: radial-gradient(1.6px 1.6px at 30px 50px, #fff, transparent), radial-gradient(2px 2px at 160px 30px, color-mix(in srgb, var(--a3) 60%, #fff), transparent),
                radial-gradient(1.6px 1.6px at 240px 150px, #fff, transparent), radial-gradient(1.3px 1.3px at 110px 190px, #fff, transparent),
                radial-gradient(2.4px 2.4px at 200px 90px, color-mix(in srgb, var(--a2) 50%, #fff), transparent) 0 0 / 300px 220px; }
.ape-hero--cosmic .ah-comet { top: 12%; left: 0; z-index: 2; width: 160px; height: 2px; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a3) 60%, #fff)); box-shadow: 0 0 10px #fff;
    transform: translate(-200px, 0) rotate(18deg); animation: ah-comet 9s 2s ease-in infinite; }
.ape-hero--cosmic .ah-comet--2 { top: 4%; width: 110px; animation-duration: 13s; animation-delay: 6.5s; }
.ape-hero--cosmic .ah-deco::before { content: ''; position: absolute; inset: 0;
    background: radial-gradient(40% 70% at 30% 100%, color-mix(in srgb, var(--a1) 22%, transparent), transparent 70%), radial-gradient(35% 60% at 85% 95%, color-mix(in srgb, var(--a2) 20%, transparent), transparent 70%); }
.ape-hero--cosmic .ah-dust { position: absolute; inset: 0; opacity: 0.6;
    background: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #fff, transparent), radial-gradient(1.4px 1.4px at 200px 20px, color-mix(in srgb, var(--a2) 60%, #fff), transparent) 0 0 / 260px 120px;
    -webkit-mask: linear-gradient(180deg, transparent 45%, #000); mask: linear-gradient(180deg, transparent 45%, #000); }
.ape-hero--cosmic .ah-orbit { inset: -14px -38px; border: 1.5px solid rgba(255,255,255,0.32); box-shadow: 0 0 12px color-mix(in srgb, var(--a2) 40%, transparent); z-index: 0; animation: ah-orbit3d 12s linear infinite; }
.ape-hero--cosmic .ah-orbit--2 { inset: -26px -54px; border-color: color-mix(in srgb, var(--a2) 35%, transparent); animation-duration: 19s; animation-direction: reverse; }
.ape-hero--cosmic .ah-orbit b::before { width: 14px; height: 14px; top: -7px; margin-left: -7px; box-shadow: 0 0 14px var(--a2); background: radial-gradient(circle at 35% 35%, #fff, var(--a2) 45%, color-mix(in srgb, var(--a2) 40%, #000)); }
.ape-hero--cosmic .ah-orbit--2 b::before { background: radial-gradient(circle at 35% 35%, #fff, var(--a3) 45%, color-mix(in srgb, var(--a3) 40%, #000)); }
.ape-hero--cosmic .ah-ring { background: conic-gradient(color-mix(in srgb, var(--a3) 70%, #fff), transparent 30%, var(--a2) 55%, transparent 80%, color-mix(in srgb, var(--a3) 70%, #fff)); animation-duration: 9s; }
.ape-hero--cosmic .ape-hero-title { background: linear-gradient(180deg, #fff 35%, color-mix(in srgb, var(--a3) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--a2) 45%, transparent)); }
a.ape-hero-title.ape-hero-title:hover { color: var(--a1); }
.ape-hero--cosmic a.ape-hero-title:hover { color: transparent; }

/* --- Legendary (xp5c, 29-10-2026: what Legendary Ape unlocks, level 50 of Ape XP; ape_sites.XP_HEROES): the banner as a hall of
   fame: gold rays turning slowly behind everything, a gilded inner frame, gold dust, a light that crosses it; the picture
   crowned, with a ring of gold, pink and prism light. Its own gold, pink and cyan on top of the look's colours. --- */
.ape-hero--legend { --lg1: #ffd76a; --lg2: #ff7ae0; --lg3: #7df9ff; }
.ape-hero--legend .ah-pan > img { animation: ah-kenburns 36s ease-in-out infinite alternate; }
.ape-hero--legend .ah-tint { inset: 0; z-index: 1;
    background: radial-gradient(90% 80% at 50% -25%, rgba(255, 215, 106, 0.32), transparent 62%), radial-gradient(80% 90% at 50% 125%, rgba(255, 122, 224, 0.3), transparent 60%),
                linear-gradient(180deg, rgba(12, 4, 26, 0.1), rgba(12, 4, 26, 0.5)); }
.ape-hero--legend .ah-rays { left: 50%; top: 6%; z-index: 1; width: 260%; aspect-ratio: 1; margin: -130% 0 0 -130%; mix-blend-mode: screen; opacity: 0.42;
    background: repeating-conic-gradient(from 0deg, rgba(255, 215, 106, 0) 0deg, rgba(255, 222, 130, 0.3) 2.5deg, rgba(255, 215, 106, 0) 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, transparent 3%, #000 12%, rgba(0, 0, 0, 0.5) 30%, transparent 58%);
    mask: radial-gradient(closest-side, transparent 3%, #000 12%, rgba(0, 0, 0, 0.5) 30%, transparent 58%);
    animation: ah-turn 80s linear infinite; }
.ape-hero--legend .ah-gild { inset: 10px; z-index: 2; border-radius: calc(var(--radius) - 2px); border: 1px solid rgba(255, 215, 106, 0.5);
    box-shadow: inset 0 0 0 1px rgba(255, 244, 194, 0.08), inset 0 0 46px rgba(255, 215, 106, 0.16); }
.ape-hero--legend .ah-gild::before, .ape-hero--legend .ah-gild::after { content: ''; position: absolute; width: 26px; height: 26px; border: 2px solid var(--lg1);
    filter: drop-shadow(0 0 5px rgba(255, 215, 106, 0.8)); }
.ape-hero--legend .ah-gild::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.ape-hero--legend .ah-gild::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.ape-hero--legend .ah-sweep { top: -30%; bottom: -30%; left: 0; width: 24%; z-index: 2; mix-blend-mode: screen;
    background: linear-gradient(100deg, transparent, rgba(255, 236, 170, 0.06) 30%, rgba(255, 236, 170, 0.34) 50%, rgba(255, 236, 170, 0.06) 70%, transparent);
    transform: translateX(-130%) skewX(-14deg); animation: ah-sweep 8s 1.2s ease-in-out infinite; }
.ape-hero--legend .ah-deco::before { content: ''; position: absolute; inset: 0;
    background: radial-gradient(40% 70% at 22% 100%, rgba(255, 215, 106, 0.2), transparent 70%), radial-gradient(35% 60% at 88% 100%, rgba(255, 122, 224, 0.18), transparent 70%); }
.ape-hero--legend .ah-dust { position: absolute; left: 0; top: 0; bottom: 0; width: 200%; opacity: 0.75; animation: ah-stars 90s linear infinite;
    background: radial-gradient(1.6px 1.6px at 24px 40px, #fff4c2, transparent), radial-gradient(1.2px 1.2px at 140px 18px, var(--lg1), transparent),
                radial-gradient(2px 2px at 220px 120px, #fff4c2, transparent), radial-gradient(1.3px 1.3px at 90px 150px, var(--lg2), transparent),
                radial-gradient(1.5px 1.5px at 280px 70px, var(--lg3), transparent) 0 0 / 320px 190px;
    -webkit-mask: linear-gradient(180deg, transparent 30%, #000); mask: linear-gradient(180deg, transparent 30%, #000); }
.ape-hero--legend .ah-crest { position: absolute; top: 16px; left: 50%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    transform: translateX(-50%); font-size: 0.75rem; font-weight: 900; line-height: 1; letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; color: #2a1a00;
    background: linear-gradient(180deg, #fff4c2, var(--lg1) 55%, #d49a2a); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4), 0 0 22px rgba(255, 215, 106, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.ape-hero--legend .ah-crest svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.ape-hero--legend .ah-halo { background: radial-gradient(closest-side, rgba(255, 215, 106, 0.6), rgba(255, 122, 224, 0.26) 60%, transparent); }
.ape-hero--legend .ah-ring { inset: -8px; background: conic-gradient(var(--lg1), #fff4c2, var(--lg2), var(--lg3), var(--lg1), #fff4c2, var(--lg1)); animation-duration: 4s;
    filter: drop-shadow(0 0 8px rgba(255, 215, 106, 0.55)); }
.ape-hero--legend .ah-orbit { border-color: rgba(255, 215, 106, 0.35); }
.ape-hero--legend .ah-orbit b::before { background: var(--lg1); box-shadow: 0 0 12px var(--lg1), 0 0 2px #fff; }
.ape-hero--legend .ah-orbit b:nth-child(2)::before { background: var(--lg2); box-shadow: 0 0 10px var(--lg2); }
.ape-hero--legend .ah-orbit b:nth-child(3)::before { background: var(--lg3); box-shadow: 0 0 10px var(--lg3); }
.ape-hero--legend .ah-crown { position: absolute; top: -34px; left: 50%; z-index: 2; width: 52px; height: 36px; margin-left: -26px; border-radius: 0; overflow: visible;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(255, 215, 106, 0.55)); animation: ah-crown 4.6s ease-in-out infinite; }
.ape-hero--legend .ape-avatar { border-color: var(--lg1); }
.ape-hero--legend .ape-hero-title { background: linear-gradient(180deg, #fffaf0 18%, var(--lg1) 58%, #e2a23a); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 20px rgba(255, 180, 60, 0.35)); }
.ape-hero--legend a.ape-hero-title:hover { color: transparent; }
.ape-hero--legend .ah-domain { border-color: rgba(255, 215, 106, 0.6); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 215, 106, 0.28); }
.ape-hero--legend .ah-domain i, .ape-hero--legend .ah-domain i::after { background: var(--lg1); box-shadow: 0 0 10px var(--lg1); }
.ape-hero-wrap--legend::before, .ape-hero-wrap--legend::after { background: conic-gradient(from var(--ape-ang), #ffd76a, #fff4c2, #ff7ae0, #7df9ff, #ffd76a); }
.ape-hero-wrap--legend::after { opacity: 0.6; }
@keyframes ah-crown { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@media (max-width: 760px) { .ape-hero--legend .ah-crest { display: none; } }
@media (max-width: 600px) { .ape-hero--legend .ah-crown { top: -28px; width: 42px; height: 30px; margin-left: -21px; } .ape-hero--legend .ah-gild { inset: 7px; } }
@media (prefers-reduced-motion: reduce) {
    .ape-hero--legend .ah-pan > img, .ape-hero--legend .ah-rays, .ape-hero--legend .ah-sweep, .ape-hero--legend .ah-dust, .ape-hero--legend .ah-crown { animation: none; }
    .ape-hero--legend .ah-sweep { opacity: 0; }
}

/* the particles of the header FX (static/js/ape-hero.js puts them in .ah-fx: shape, colour, place and timing) */
.ah-p, .ah-b { position: absolute; width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); pointer-events: none; }
.ah-p { left: var(--x); top: var(--y, 100%); opacity: 0; animation: var(--m, ah-rise-p) var(--t, 6s) var(--d, 0s) linear infinite; will-change: transform, opacity; }
.ah-p--ember { width: calc(var(--s) * 0.8); height: calc(var(--s) * 0.8); background: radial-gradient(circle, #fff 0 20%, var(--c) 55%); box-shadow: 0 0 10px var(--c), 0 0 18px color-mix(in srgb, var(--c) 50%, transparent); }
.ah-p--bubble { background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.85) 0 12%, transparent 18%), color-mix(in srgb, var(--c) 20%, transparent); border: 1px solid color-mix(in srgb, var(--c) 80%, #fff); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.ah-p--wisp { width: calc(var(--s) * 5); height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--c), transparent); box-shadow: none; }
.ah-p--rock { border-radius: 3px 5px 2px 4px; background: var(--c); box-shadow: none; }
.ah-p--star, .ah-p--sparkle { border-radius: 0; background: var(--c); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); box-shadow: none; filter: drop-shadow(0 0 4px var(--c)); }
.ah-p--bolt { width: calc(var(--s) * 1.4); height: calc(var(--s) * 3); border-radius: 0; background: var(--c); clip-path: polygon(60% 0, 10% 55%, 45% 55%, 30% 100%, 90% 40%, 55% 40%); box-shadow: none; filter: drop-shadow(0 0 6px var(--c)); }
.ah-p--bit { width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; color: var(--c); font: 700 calc(var(--s) * 2) / 1 ui-monospace, Menlo, monospace; text-shadow: 0 0 8px var(--c); }
.ah-p--ring { width: calc(var(--s) * 3); height: calc(var(--s) * 3); background: none; border: 2px solid var(--c); box-shadow: 0 0 10px var(--c), inset 0 0 8px var(--c); }
.ah-p--shard { border-radius: 0; background: linear-gradient(135deg, #fff, var(--c)); clip-path: polygon(50% 0, 100% 40%, 60% 100%, 0 60%); box-shadow: none; }
.ah-p--splat { border-radius: 50% 50% 50% 0; background: var(--c); box-shadow: none; }
.ah-p--bar { width: calc(var(--s) * 3); height: calc(var(--s) * 0.7); border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.ah-p--gem { border-radius: 0; background: linear-gradient(160deg, #fff, var(--c) 60%); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); box-shadow: none; filter: drop-shadow(0 0 5px var(--c)); }
.ah-p--cube { border-radius: 2px; background: var(--c); box-shadow: inset -2px -2px 0 rgba(0,0,0,0.3), 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); }
.ah-p--candle { width: calc(var(--s) * 0.9); height: calc(var(--s) * 2.6); border-radius: 1px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.ah-p--candle::before { content: ''; position: absolute; left: 50%; top: -40%; bottom: -40%; width: 1px; margin-left: -0.5px; background: var(--c); }
.ah-p--coin { background: radial-gradient(circle at 35% 35%, #fff7cc, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000)); box-shadow: 0 0 10px var(--c); }
/* the click bursts */
.ah-burst { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: inherit; }
.ah-b--flash { width: 150px; height: 150px; background: radial-gradient(circle, #fff 0 6%, color-mix(in srgb, var(--c) 85%, #fff) 14%, color-mix(in srgb, var(--c) 40%, transparent) 38%, transparent 66%); box-shadow: none; }
.ape-hero:not(.ape-hero--classic) .ape-banner { cursor: crosshair; }

@keyframes ah-turn { to { transform: rotate(360deg); } }
@keyframes ah-orbit3d { from { transform: rotateX(66deg) rotate(0deg); } to { transform: rotateX(66deg) rotate(360deg); } }
@keyframes ah-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes ah-ping { 0% { transform: scale(1); opacity: 0.7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes ah-kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.6%, -1.2%); } }
@keyframes ah-sweep { 0% { transform: translateX(-130%) skewX(-14deg); } 26%, 100% { transform: translateX(520%) skewX(-14deg); } }
@keyframes ah-flare { 0%, 100% { opacity: 0.18; transform: scaleX(0.7); } 50% { opacity: 0.7; transform: scaleX(1.05); } }
@keyframes ah-shine { from { -webkit-mask-position: 130% 0; mask-position: 130% 0; } to { -webkit-mask-position: -30% 0; mask-position: -30% 0; } }
@keyframes ah-shine-hover { from { -webkit-mask-position: 130% 0; mask-position: 130% 0; } to { -webkit-mask-position: -30% 0; mask-position: -30% 0; } }
@keyframes ah-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ah-pic-in { from { opacity: 0; transform: scale(0.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes ah-pop { from { opacity: 0; transform: translateY(10px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes ah-scan { from { transform: translateY(-120%); } to { transform: translateY(520%); } }
@keyframes ah-blink { 50% { opacity: 0; } }
@keyframes ah-dash { to { stroke-dashoffset: -240; } }
@keyframes ah-glitch-a { 0%, 88% { opacity: 0; transform: none; clip-path: none; } 89% { opacity: 0.55; transform: translateX(-8px); clip-path: inset(12% 0 58% 0); }
    91% { opacity: 0.5; transform: translateX(6px); clip-path: inset(62% 0 14% 0); } 93% { opacity: 0.45; transform: translateX(-4px); clip-path: inset(30% 0 40% 0); } 95%, 100% { opacity: 0; transform: none; clip-path: none; } }
@keyframes ah-glitch-b { 0%, 89% { opacity: 0; transform: none; clip-path: none; } 90% { opacity: 0.5; transform: translateX(8px); clip-path: inset(44% 0 30% 0); }
    92% { opacity: 0.55; transform: translateX(-6px); clip-path: inset(6% 0 76% 0); } 94% { opacity: 0.4; transform: translateX(5px); clip-path: inset(70% 0 6% 0); } 96%, 100% { opacity: 0; transform: none; clip-path: none; } }
@keyframes ah-glitch-text { 0%, 90% { opacity: 0; transform: none; } 91% { opacity: 0.9; transform: translateX(-5px); clip-path: inset(18% 0 60% 0); }
    93% { opacity: 0.8; transform: translateX(4px); clip-path: inset(58% 0 20% 0); } 95%, 100% { opacity: 0; transform: none; } }
@keyframes ah-twinkle { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes ah-sunrise { from { opacity: 0; transform: translateY(35%); } to { opacity: 0.62; transform: none; } }
@keyframes ah-floor { from { transform: rotateX(72deg) translateY(0); } to { transform: rotateX(72deg) translateY(40px); } }
@keyframes ah-neon { 0%, 91%, 93%, 96%, 100% { opacity: 1; } 92%, 95% { opacity: 0.55; } }
@keyframes ah-neon-ring { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
@keyframes ah-stars { to { transform: translateX(-50%); } }
@keyframes ah-comet { 0% { opacity: 0; transform: translate(-200px, 0) rotate(18deg); } 4% { opacity: 1; } 16% { opacity: 0; transform: translate(min(110vw, 1300px), 400px) rotate(18deg); } 100% { opacity: 0; transform: translate(min(110vw, 1300px), 400px) rotate(18deg); } }
/* particle motions: up (fire, bubbles, candles), down (earth, cyber), across (air), twinkle in place (stars, gems), float (the rest) */
@keyframes ah-rise-p { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 12% { opacity: 1; } 80% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--dx, 10px), -220px) scale(1); } }
@keyframes ah-fall-p { 0% { opacity: 0; transform: translate(0, -40px) rotate(0deg); } 12% { opacity: 1; } 85% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--dx, 10px), 240px) rotate(240deg); } }
@keyframes ah-drift-p { 0% { opacity: 0; transform: translate(-60px, 0); } 20% { opacity: 0.9; } 80% { opacity: 0.8; } 100% { opacity: 0; transform: translate(260px, var(--dy, -20px)); } }
@keyframes ah-twinkle-p { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 50% { opacity: 1; transform: scale(1.2) rotate(90deg); } }
@keyframes ah-float-p { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 20% { opacity: 0.95; } 80% { opacity: 0.85; } 100% { opacity: 0; transform: translate(var(--dx, 20px), -120px) rotate(200deg); } }
@keyframes ah-flash-p { 0%, 86%, 100% { opacity: 0; transform: scale(0.7); } 88% { opacity: 1; transform: scale(1.15); } 90% { opacity: 0.2; } 92% { opacity: 1; } 96% { opacity: 0; } }

.ape-hero.is-off *, .ape-hero.is-off *::before, .ape-hero.is-off *::after, .ape-hero-wrap.is-off::before, .ape-hero-wrap.is-off::after { animation-play-state: paused !important; }

@media (max-width: 860px) {
    .ape-hero--hologram .ah-readout { display: none; }
}
@media (max-width: 600px) {
    .ah-domain { top: 10px; left: 10px; padding: 5px 10px 5px 8px; font-size: 0.75rem; }
    .ah-halo { inset: -18px; }
    .ah-orbit { inset: -16px; }
    .ape-hero--cosmic .ah-orbit { inset: -10px -34px; }
    .ape-hero--cosmic .ah-orbit--2 { inset: -22px -50px; }
    .ape-hero--synthwave .ah-sun { width: 30%; margin-left: -15%; }
    .ape-hero--synthwave .ah-floor { top: 50cqw; opacity: 0.2; }
    .ape-hero--hologram .ah-hud i { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .ape-hero [class^="ah-"], .ape-hero [class*=" ah-"], .ape-hero .ah-pan > img, .ape-hero .ah-orbit b, .ape-hero .ah-domain i::after, .ape-hero .ape-hero-title,
    .ape-hero .ape-hero-title::before, .ape-hero .ape-hero-title::after, .ape-hero .ape-id-text > *, .ape-hero .ape-socials li, .ape-hero .ah-hex polygon { animation: none !important; transition: none !important; }
    .ape-hero .ah-fx, .ape-hero .ah-sweep, .ape-hero .ah-scan, .ape-hero .ah-ghost, .ape-hero .ah-comet { display: none; }
    .ape-hero:not(.ape-hero--classic) .ah-pan { transform: none; }
}

/* apehero2 (Mortimer, 20-10-2026: «un preview muchísimo mas real y ancho para ver rápidamente como quedaría nuestro
   header»): /my-site shows the owner's preview in small frames; embed=hero keeps only the header. */
body.ape-embed--hero { min-height: 0; }
body.ape-embed--hero .ape-bar, body.ape-embed--hero .ape-foot, body.ape-embed--hero .ape-main > :not(.ape-hero-wrap) { display: none; }
body.ape-embed--hero .ape-main { margin: 18px auto; }

/* mentioncard1 (21-10-2026): editing your own comment for 5 minutes (as in the BASC News) and @mentions in comments */
.ape-c-edited { font-size: 0.75rem; font-style: italic; color: var(--muted); }
.ape-c-timer { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #a7f3d0; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.35); font-variant-numeric: tabular-nums; }
.ape-c-timer.is-low { color: #fde68a; background: rgba(245,158,11,0.14); border-color: rgba(245,158,11,0.45); }
.ape-c-tool svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.ape-edit-box textarea { width: 100%; padding: 10px 12px; border-radius: 12px; font: inherit; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); resize: vertical; }
.ape-edit-box textarea:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent); }
.ape-c-text .cm-mention, .ape-rich .cm-mention { color: var(--a1); font-weight: 800; text-shadow: 0 0 10px color-mix(in srgb, var(--a1) 30%, transparent); }

/* threadglow1 (Mortimer, 21-10-2026: «los hilos conforme se van engordando deberíamos destacarlos más … el color/degradado
   un poco más intenso/largo (que avance más en la card)»): a first comment with replies gets ape-c--hot ape-c--heat1..5
   (1, 3, 5, 8, 12 replies). Each step: the wash of the site's colour reaches further across the card (--hr), the corner
   glow grows (--hx, --ha), a thicker left bar (--hb), an outer glow (--hg) and a brighter line by its replies. */
.ape-c.ape-c--hot { border-color: color-mix(in srgb, var(--a1) var(--hbo), transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--a1) var(--hl), transparent) 0%, transparent var(--hr)),
        radial-gradient(var(--hx) 120% at 0% 0%, color-mix(in srgb, var(--a1) var(--ha), transparent), transparent 72%), rgba(255,255,255,0.035);
    box-shadow: inset var(--hb) 0 0 color-mix(in srgb, var(--a1) 85%, transparent), 0 0 var(--hg) color-mix(in srgb, var(--a1) var(--hga), transparent); }
.ape-c.ape-c--hot:target, .ape-c.ape-c--hot.is-new { border-color: var(--a1);
    box-shadow: inset var(--hb) 0 0 color-mix(in srgb, var(--a1) 85%, transparent), 0 0 0 3px color-mix(in srgb, var(--a1) 18%, transparent); }
.ape-c--heat1 { --hx: 70%;  --ha: 14%; --hl: 6%;  --hr: 20%; --hb: 3px; --hg: 0px;  --hga: 0%;  --hbo: 34%; }
.ape-c--heat2 { --hx: 95%;  --ha: 18%; --hl: 9%;  --hr: 36%; --hb: 3px; --hg: 12px; --hga: 9%;  --hbo: 42%; }
.ape-c--heat3 { --hx: 125%; --ha: 22%; --hl: 12%; --hr: 54%; --hb: 4px; --hg: 20px; --hga: 14%; --hbo: 52%; }
.ape-c--heat4 { --hx: 160%; --ha: 26%; --hl: 15%; --hr: 74%; --hb: 4px; --hg: 28px; --hga: 19%; --hbo: 62%; }
.ape-c--heat5 { --hx: 200%; --ha: 30%; --hl: 18%; --hr: 96%; --hb: 5px; --hg: 36px; --hga: 25%; --hbo: 72%; }
.ape-c--heat3 > .ape-c-replies { border-left-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.ape-c--heat4 > .ape-c-replies { border-left-color: color-mix(in srgb, var(--a1) 70%, transparent); }
.ape-c--heat5 > .ape-c-replies { border-left-color: color-mix(in srgb, var(--a1) 85%, transparent); }
.ape-c--heat4 > .ape-c-head img, .ape-c--heat5 > .ape-c-head img { box-shadow: 0 0 0 2px color-mix(in srgb, var(--a1) 80%, transparent), 0 0 14px color-mix(in srgb, var(--a1) 45%, transparent); }
.ape-c-hot { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; cursor: default;
    color: color-mix(in srgb, var(--a1) 35%, #fff); background: color-mix(in srgb, var(--a1) 18%, rgba(0,0,0,0.25)); border: 1px solid color-mix(in srgb, var(--a1) 50%, transparent); }
.ape-c-hot--5 { color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 55%, #000), color-mix(in srgb, var(--a1) 30%, #000)); box-shadow: 0 0 12px color-mix(in srgb, var(--a1) 35%, transparent); }

/* commentviews1 (Mortimer, 21-10-2026: the eye with the views bottom right on every comment system): unique views per day
   of each comment (comment_views.py), like the BASC News and XElementia */
.ape-c-views { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 5px 4px; font-size: 0.78rem; font-weight: 700;
    color: var(--muted); font-variant-numeric: tabular-nums; cursor: default; }
.ape-c-views .eye-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* icons2 (21-10-2026, Mortimer: «porqué sale lo de :akasha: ?? debería salir el icono»): the comment, reply and edit
   boxes show the club icons as pictures while writing. club-icons.js swaps each <textarea data-ci-field> for a .ci-field
   box (the textarea stays in the form, hidden, with the same text); same look as the textarea. */
.ape-composer .ci-field, .ape-reply-row .ci-field, .ape-edit-box .ci-field { width: 100%; min-height: calc(var(--ci-rows, 2) * 1.5em + 22px); max-height: 260px; overflow-y: auto; padding: 10px 12px; border-radius: 12px; font: inherit; line-height: 1.5; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid var(--line-strong); }
.ape-composer .ci-field:focus, .ape-reply-row .ci-field:focus, .ape-edit-box .ci-field:focus { outline: none; border-color: var(--a1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--a1) 22%, transparent); }

/* headcard1 (Mortimer, 21-10-2026): the picture, name and team pill of a comment open the person's card (mention-card.js) */
.ape-c-who { cursor: pointer; }
.ape-c-head img.ape-c-who { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.ape-c-head img.ape-c-who:hover, .ape-c-head img.ape-c-who[aria-expanded="true"] { transform: scale(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--a1) 75%, transparent), 0 0 14px color-mix(in srgb, var(--a1) 40%, transparent); }
.ape-c-head b.ape-c-who { text-decoration: underline transparent; text-underline-offset: 3px; transition: text-decoration-color 0.18s ease; }
.ape-c-head b.ape-c-who:hover, .ape-c-head b.ape-c-who[aria-expanded="true"] { text-decoration-color: color-mix(in srgb, var(--a1) 80%, transparent); }
.ape-c-head b.ape-c-who:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; border-radius: 4px; }
.ape-c-head .team-pill.ape-c-who:hover, .ape-c-head .team-pill.ape-c-who[aria-expanded="true"] { filter: brightness(1.18); }
@media (prefers-reduced-motion: reduce) { .ape-c-head img.ape-c-who { transition: none; } .ape-c-head img.ape-c-who:hover { transform: none; } }

/* siteclub1 (Mortimer, 21-10-2026: «mantener la radio y las notificaciones también en los subdomains»): the BASC Radio
   record (radio.css, same player as bascdao.com) and the 🔔 of the person logged in on this site, in the club bar.
   The colours radio.css takes from bascdao.com, and the bell and its panel as there (basc.css "Notifications"). */
body.ape { --cyan: #00ddeb; --navy-line: #334155; --panel: rgba(255,255,255,0.04); --orange: #f97316; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ape-bar { z-index: 30; }
.ape-bar .rdock, .ape-bar .notif { margin-right: 0; }
.notif { position: relative; display: inline-flex; }
.notif-bell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; color: #e2e8f0; cursor: pointer; background: rgba(0,0,0,0.25); border: 1px solid var(--navy-line); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.notif-bell:hover, .notif-bell[aria-expanded="true"] { color: #fff; background: rgba(0,0,0,0.45); border-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.notif-bell svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.notif-count { position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; line-height: 19px; text-align: center; color: #fff; background: #ef4444; box-shadow: 0 0 0 2px #12052a; }
.notif-panel { position: absolute; z-index: 60; top: calc(100% + 12px); right: -8px; width: min(400px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; border-radius: 16px; text-align: left; background: #120a24; border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
.notif-panel[hidden] { display: none; }
.notif-list-wrap { display: grid; }
.notif-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: #120a24; border-bottom: 1px solid var(--line); }
.notif-head b { font-size: 1rem; }
.notif-all { padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--cyan); cursor: pointer; background: none; border: 1px solid rgba(0,221,235,0.35); }
.notif-all:hover { background: rgba(0,221,235,0.1); }
.notif-section { margin: 0; padding: 10px 16px 4px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.notif-list { margin: 0; padding: 6px; list-style: none; display: grid; gap: 2px; }
.notif-item a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px; border-radius: 12px; color: #e2e8f0; text-decoration: none; transition: background 0.2s; }
.notif-item a:hover, .notif-item a:focus-visible { background: rgba(255,255,255,0.06); }
.notif-item.is-unread a { background: rgba(0,221,235,0.06); }
.notif-item img { border-radius: 50%; }
.notif-body { display: grid; gap: 3px; min-width: 0; }
.notif-text { font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere; }
.notif-text span { color: #ff6b8a; }
.notif-quote { font-size: 0.84rem; color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-meta { font-size: 0.76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif-list--xe .notif-meta { color: color-mix(in srgb, var(--cyan) 55%, var(--muted)); }
.notif-dot { width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px rgba(0,221,235,0.6); }
.notif-empty { margin: 0; padding: 26px 18px; text-align: center; font-size: 0.9rem; color: var(--muted); }
.notif-more { display: block; padding: 12px; text-align: center; font-size: 0.86rem; font-weight: 700; color: var(--cyan); border-top: 1px solid var(--line); }
.notif-more:hover { background: rgba(255,255,255,0.04); }
@media (max-width: 600px) {
    /* on a phone the panel opens under the whole bar, its full width */
    .ape-bar .notif { position: static; }
    .ape-bar .notif-panel { left: 0; right: 0; width: auto; top: calc(100% + 8px); max-height: 72vh; }
    .ape-bar-right { gap: 6px; }
}
@media (max-width: 460px) {
    .ape-me > span { display: none; }   /* the picture stays; the name is in the bell and on bascdao.com */
    .ape-bar-brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .notif-bell, .notif-item a { transition: none; } }

/* engage1 (Mortimer, 23-10-2026): «Sites I recommend» on the home of a site, and the same sites in a small card right
   after following. Each recommended site keeps its own look's colours (.ape-t-<key> on its card). */
.ape-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ape-recs--n1, .ape-recs--n2, .ape-recs--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ape-recs--n1 { max-width: 50%; }
.ape-rec { min-width: 0; }
.ape-rec-link { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; overflow: hidden; border-radius: 18px;
    color: var(--text); text-decoration: none; background: rgba(0,0,0,0.24); border: 1px solid var(--line);
    transition: transform 0.22s, border-color 0.22s, box-shadow 0.22s; }
.ape-rec-link:hover, .ape-rec-link:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a1) 60%, transparent);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--a1) 22%, transparent); }
.ape-rec-link:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
.ape-rec-banner { display: block; aspect-ratio: 3 / 1; overflow: hidden;
    background: linear-gradient(120deg, color-mix(in srgb, var(--a1) 70%, #000), color-mix(in srgb, var(--a2) 55%, #000) 55%, color-mix(in srgb, var(--a3) 45%, #000)); }
.ape-rec-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ape-rec-avatar { width: 56px; height: 56px; margin: -28px 0 0 16px; border-radius: 50%; object-fit: cover; background: #111;
    border: 3px solid color-mix(in srgb, var(--a1) 80%, #000); box-shadow: 0 6px 18px rgba(0,0,0,0.45); }
.ape-rec-text { display: grid; gap: 3px; padding: 8px 16px 0; min-width: 0; }
.ape-rec-text b { font-size: 1.02rem; font-weight: 900; line-height: 1.25; overflow-wrap: anywhere; }
.ape-rec-text small { font-size: 0.84rem; color: var(--muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ape-rec-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; font-size: 0.76rem; color: var(--muted); min-width: 0; }
.ape-rec-foot i { font-style: normal; font-weight: 700; color: var(--a1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ape-rec-foot em { font-style: normal; white-space: nowrap; }
.ape-rec-go { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%;
    font-weight: 900; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2)); transition: transform 0.22s; }
.ape-rec-link:hover .ape-rec-go { transform: translateX(3px); }

.ape-recpop { position: fixed; z-index: 60; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px));
    width: min(360px, calc(100vw - 40px)); padding: 16px; border-radius: 20px; text-align: left;
    background: rgba(12,6,26,0.94); border: 1px solid color-mix(in srgb, var(--a1) 45%, transparent);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset; animation: ape-recpop-in 0.32s ease-out both; }
.ape-recpop[hidden] { display: none; }
@keyframes ape-recpop-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ape-recpop-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
    background: rgba(255,255,255,0.04); color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; }
.ape-recpop-close:hover { color: var(--text); border-color: var(--line-strong); }
.ape-recpop-title { display: grid; gap: 2px; margin: 0 36px 12px 0; }
.ape-recpop-title b { font-size: 0.95rem; font-weight: 900; color: var(--text); }
.ape-recpop-title span { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--a1); }
.ape-recpop ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ape-recpop li a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 14px;
    color: var(--text); text-decoration: none; background: rgba(255,255,255,0.04); border: 1px solid transparent; transition: border-color 0.2s, background 0.2s; }
.ape-recpop li a:hover, .ape-recpop li a:focus-visible { border-color: color-mix(in srgb, var(--a1) 55%, transparent); background: rgba(255,255,255,0.07); }
.ape-recpop li img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--a1); }
.ape-recpop li span { display: grid; min-width: 0; }
.ape-recpop li b { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-recpop li small { font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ape-recpop li i { font-style: normal; font-weight: 900; color: var(--a1); }
.ape-recpop-more { display: block; margin-top: 10px; font-size: 0.82rem; font-weight: 800; color: var(--a1); text-align: center; }
@media (max-width: 900px) { .ape-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ape-recs--n1 { max-width: none; } }
@media (max-width: 560px) {
    .ape-recs, .ape-recs--n1, .ape-recs--n2, .ape-recs--n4 { grid-template-columns: minmax(0, 1fr); }
    .ape-recpop { left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .ape-rec-link, .ape-rec-go, .ape-recpop li a { transition: none; }
    .ape-rec-link:hover, .ape-rec-link:focus-visible, .ape-rec-link:hover .ape-rec-go { transform: none; }
    .ape-recpop { animation: none; }
}

/* engage2 (Mortimer, 23-10-2026: «un botón a los post de 1 sólo uso … algo que nos dé calidad»): on the owner's preview
   of a post, the card as the club Discord will show it (Discord's own dark look, the line in the site's colour), every
   minimum with ✓ or what to change, and the one-use switch next to Publish now. */
.ape-dc { margin-top: 22px; }
.ape-dc-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.ape-dc-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; color: #fff;
    background: linear-gradient(135deg, #5865f2, #7983f5); box-shadow: 0 10px 26px rgba(88,101,242,0.35); }
.ape-dc-mark svg { width: 24px; height: 24px; }
.ape-dc .ape-dc-head h2 { margin: 2px 0 4px; font-size: 1.12rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.ape-dc .ape-dc-head h2::after { display: none; }
.ape-dc-head p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.5; }
.ape-dc-state { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 800;
    color: #c9cdfb; background: rgba(88,101,242,0.16); border: 1px solid rgba(88,101,242,0.4); }
.ape-dc-state--sent { color: #86efac; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); }
.ape-dc-state--rejected, .ape-dc-state--retracted { color: #fca5a5; background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.4); }
.ape-dc-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }

/* the Discord message, drawn like Discord draws it */
.ape-dc-msg { padding: 14px 16px 16px; border-radius: 16px; background: #313338; color: #dbdee1; border: 1px solid rgba(255,255,255,0.06);
    font-family: 'gg sans', 'Noto Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: 0 16px 40px rgba(0,0,0,0.35); }
.ape-dc-bot { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.ape-dc-bot img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1e1f22; }
.ape-dc-bot span { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ape-dc-bot b { font-size: 0.96rem; color: #f2f3f5; font-weight: 600; }
.ape-dc-bot i { padding: 0 5px; border-radius: 4px; font-style: normal; font-size: 0.75rem; font-weight: 700; line-height: 1.5; color: #fff; background: #5865f2; }
.ape-dc-bot time { font-size: 0.75rem; color: #949ba4; }
.ape-dc-embed { display: grid; gap: 8px; margin-left: 52px; max-width: 440px; padding: 10px 14px 12px 12px; border-radius: 4px;
    background: #2b2d31; border-left: 4px solid var(--dc, #5865f2); }
.ape-dc-embed-text { display: grid; gap: 6px; min-width: 0; }
.ape-dc-author { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: #f2f3f5; min-width: 0; overflow-wrap: anywhere; }
.ape-dc-author img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.ape-dc-title { font-size: 0.98rem; font-weight: 600; color: #00a8fc; overflow-wrap: anywhere; }
.ape-dc-text { margin: 0; font-size: 0.88rem; line-height: 1.45; color: #dbdee1; overflow-wrap: anywhere; }
.ape-dc-read { margin: 0; font-size: 0.88rem; font-weight: 700; color: #00a8fc; }
.ape-dc-img { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 4px; }
.ape-dc-foot { font-size: 0.75rem; color: #b5bac1; overflow-wrap: anywhere; }

/* the minimums */
.ape-dc-checks { display: grid; gap: 12px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.035); border: 1px solid var(--line); }
.ape-dc-verdict { font-size: 0.98rem; font-weight: 900; color: #fca5a5; }
.ape-dc.is-ready .ape-dc-verdict { color: #86efac; }
.ape-dc-checks ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ape-dc-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.88rem; line-height: 1.4; color: #dde2ee; }
.ape-dc-checks li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 0.75rem; font-weight: 900; }
.ape-dc-checks li.is-ok i { color: #052e16; background: #4ade80; }
.ape-dc-checks li.is-bad { color: #fecaca; }
.ape-dc-checks li.is-bad i { color: #fff; background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.16); }
.ape-dc-note { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.ape-dc-checks .ape-btn { justify-self: start; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 800; }
.ape-dc-checks .ape-btn:disabled { opacity: 0.65; cursor: default; transform: none; }

/* the one-use switch in the preview bar, next to Publish now */
.ape-dc-switch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 999px; cursor: pointer;
    background: rgba(88,101,242,0.14); border: 1px solid rgba(88,101,242,0.45); }
.ape-dc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ape-dc-switch-ui { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,0.16); transition: background 0.2s; }
.ape-dc-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.ape-dc-switch input:checked + .ape-dc-switch-ui { background: #5865f2; }
.ape-dc-switch input:checked + .ape-dc-switch-ui::after { transform: translateX(16px); }
.ape-dc-switch input:focus-visible + .ape-dc-switch-ui { outline: 2px solid #fff; outline-offset: 2px; }
.ape-preview .ape-dc-switch-text { display: grid; line-height: 1.25; color: #f4f6fb; }
.ape-dc-switch-text b { padding: 0; font-size: 0.82rem; letter-spacing: 0; text-transform: none; color: #fff; background: none; }
.ape-preview .ape-dc-switch-text a { font-size: 0.75rem; font-weight: 700; color: #c9cdfb; }
.ape-dc-switch.is-locked { cursor: default; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.4); }
.ape-dc-switch.is-locked .ape-dc-switch-ui { opacity: 0.5; }
.ape-preview .ape-dc-switch.is-locked .ape-dc-switch-text a { color: #fca5a5; }
@media (max-width: 760px) {
    .ape-dc-grid { grid-template-columns: minmax(0, 1fr); }
    .ape-dc-embed { margin-left: 0; max-width: none; }
    .ape-dc-msg { padding: 12px; }
    .ape-dc-switch { flex: 1 1 100%; justify-content: flex-start; }
    body:has(.ape-dc-switch) .ape-foot { margin-bottom: 200px; }
}
.ape-preview-acts:has(.ape-dc-switch) { align-items: center; }
@media (prefers-reduced-motion: reduce) { .ape-dc-switch-ui, .ape-dc-switch-ui::after { transition: none; } }
/* engage3 (24-10-2026): the line above the card with the owner's mention, drawn as Discord draws a mention */
.ape-dc-content { margin: 0 0 8px 52px; font-size: 0.92rem; line-height: 1.4; color: #dbdee1; overflow-wrap: anywhere; }
.ape-dc-at { padding: 0 3px; border-radius: 3px; font-weight: 600; color: #c9cdfb; background: rgba(88,101,242,0.3); }
@media (max-width: 760px) { .ape-dc-content { margin-left: 0; } }
/* engage3: the owner's "Share in Discord" on the published post, top right of the article (nobody else sees it) */
.ape-article { position: relative; }
.ape-dc-owner { position: absolute; top: 22px; right: 26px; display: grid; justify-items: end; gap: 6px; max-width: 46%; }
.ape-article header:has(.ape-dc-owner) h1 { padding-right: 190px; }
.ape-dc-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 0.8rem; font-weight: 800;
    line-height: 1.2; white-space: nowrap; color: #c9cdfb; background: rgba(88,101,242,0.14); border: 1px solid rgba(88,101,242,0.4); }
.ape-dc-pill svg { flex: none; width: 14px; height: 14px; }   /* the icon is inline in post.html: this file never loads images */
.ape-dc-pill--go { cursor: pointer; color: #fff; border-color: transparent; background: linear-gradient(135deg, #5865f2, #7983f5); box-shadow: 0 8px 22px rgba(88,101,242,0.35); transition: transform 0.2s, filter 0.2s; }
.ape-dc-pill--go:hover { transform: translateY(-1px); filter: brightness(1.08); }
.ape-dc-pill--go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ape-dc-pill--go:disabled { cursor: default; transform: none; }
.ape-dc-pill--go.is-done { background: rgba(34,197,94,0.16); color: #86efac; border-color: rgba(34,197,94,0.4); box-shadow: none; }
.ape-dc-pill--sent { color: #86efac; background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.4); }
.ape-dc-pill--locked, .ape-dc-pill--rejected, .ape-dc-pill--retracted { color: #fca5a5; background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.36); }
.ape-dc-pill--closed { color: var(--muted); background: rgba(255,255,255,0.04); border-color: var(--line); }
.ape-dc-owner .ape-error { max-width: 260px; font-size: 0.78rem; text-align: right; white-space: normal; }
@media (max-width: 760px) {
    .ape-dc-owner { position: static; justify-items: start; max-width: none; order: -1; }
    .ape-article header:has(.ape-dc-owner) h1 { padding-right: 0; }
    .ape-dc-owner .ape-error { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .ape-dc-pill--go { transition: none; } .ape-dc-pill--go:hover { transform: none; } }

/* ---------- engage4 (Mortimer, 24-10-2026) ----------
   The post's views (like its comments) and the Report flag of the post footer */
.ape-react.ape-views { cursor: default; color: var(--muted); background: transparent; border-color: transparent; padding-left: 8px; padding-right: 8px; }
.ape-react.ape-views:hover { background: transparent; }
.ape-react.ape-views b { color: #e6e9f2; }
.ape-react.ape-report-post { padding: 9px 12px; color: var(--muted); }
.ape-react.ape-report-post:hover, .ape-react.ape-report-post:focus-visible { color: #fca5a5; border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.1); }
.ape-react.ape-report-post:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }
@media (max-width: 600px) {   /* phones: the flag goes up to the likes' row, on the right; the share buttons keep their row */
    .ape-article-foot .ape-report-post { order: 1; margin-left: auto; }
    .ape-article-foot .ape-share-row { order: 2; }
}

/* Nebula, the page background that takes the place of «My image» («crea otro ejemplo muy cool como los otros»): deep
   space. A galaxy turns very slowly (clouds in the look's colours, a bright band of star dust across it and its glowing
   core); two layers of stars drift down at different speeds (the near ones twinkle in two groups, never all at once);
   now and then a shooting star. Gradients only; everything moves with transform or opacity, and stops with
   prefers-reduced-motion. */
.ape-bg--nebula .ape-bgfx { background:
    radial-gradient(110% 70% at 50% 120%, color-mix(in srgb, var(--a3) 34%, #050114), transparent 70%),
    radial-gradient(70% 60% at -6% -8%, color-mix(in srgb, var(--a1) 30%, #050114), transparent 66%),
    radial-gradient(60% 55% at 108% 6%, color-mix(in srgb, var(--a2) 26%, #050114), transparent 64%), #050114; }
.ape-bg--nebula .ape-bgfx > i { display: block; border-radius: 0; will-change: transform; }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(1) { width: 160vmax; height: 160vmax; left: 50%; top: 50%; margin: -80vmax 0 0 -80vmax; border-radius: 50%;
    background:
        radial-gradient(3.5% 2.6% at 52% 49%, rgba(255,255,255,0.8), transparent 72%),
        radial-gradient(11% 7% at 52% 49%, color-mix(in srgb, var(--a1) 50%, #fff), transparent 74%),
        radial-gradient(30% 13% at 36% 41%, color-mix(in srgb, var(--a1) 92%, transparent), transparent 72%),
        radial-gradient(22% 17% at 67% 57%, color-mix(in srgb, var(--a2) 88%, transparent), transparent 72%),
        radial-gradient(20% 10% at 45% 66%, color-mix(in srgb, var(--a3) 80%, transparent), transparent 72%),
        radial-gradient(16% 22% at 62% 33%, color-mix(in srgb, var(--a3) 46%, transparent), transparent 72%),
        radial-gradient(44% 26% at 52% 50%, color-mix(in srgb, var(--a2) 34%, transparent), transparent 76%);
    animation: ape-nebula-turn 300s linear infinite; }
/* the band of star dust and its glow, turning with the galaxy */
.ape-bg--nebula .ape-bgfx > i:nth-of-type(1)::before, .ape-bg--nebula .ape-bgfx > i:nth-of-type(1)::after { content: ''; position: absolute; inset: 0; border-radius: 50%; }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(1)::after { background: linear-gradient(152deg, transparent 36%, color-mix(in srgb, var(--a2) 20%, transparent) 44%,
    rgba(255,255,255,0.12) 48.5%, rgba(4,1,16,0.3) 50.5%, color-mix(in srgb, var(--a1) 20%, transparent) 55%, transparent 64%);
    -webkit-mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,0.5) 46%, transparent 78%);
    mask-image: radial-gradient(closest-side, #000 18%, rgba(0,0,0,0.5) 46%, transparent 78%); }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(1)::before { background-image:
        radial-gradient(1.1px 1.1px at 37px 111px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.3px 1.3px at 105px 111px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.0px 1.0px at 73px 155px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.0px 1.0px at 57px 51px, rgba(255,255,255,0.85), transparent),
        radial-gradient(0.9px 0.9px at 14px 41px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 6px 88px, rgba(255,255,255,0.6), transparent),
        radial-gradient(0.8px 0.8px at 22px 23px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.0px 1.0px at 7px 98px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.0px 1.0px at 36px 154px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.1px 1.1px at 102px 50px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 62px 67px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.1px 1.1px at 145px 54px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.0px 1.0px at 127px 24px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.1px 1.1px at 31px 13px, rgba(255,255,255,0.6), transparent),
        radial-gradient(0.9px 0.9px at 65px 104px, rgba(255,255,255,0.6), transparent),
        radial-gradient(0.9px 0.9px at 79px 137px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.0px 1.0px at 36px 62px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.3px 1.3px at 75px 58px, rgba(255,255,255,0.85), transparent),
        radial-gradient(0.9px 0.9px at 8px 21px, rgba(255,255,255,0.6), transparent),
        radial-gradient(0.8px 0.8px at 67px 19px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.1px 1.1px at 98px 139px, rgba(255,255,255,0.85), transparent),
        radial-gradient(0.9px 0.9px at 27px 96px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.1px 1.1px at 88px 137px, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.3px 1.3px at 155px 12px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.3px 1.3px at 95px 83px, rgba(255,255,255,0.85), transparent),
        radial-gradient(0.8px 0.8px at 23px 127px, rgba(255,255,255,0.6), transparent);
    background-size: 160px 160px;
    -webkit-mask-image: linear-gradient(152deg, transparent 39%, #000 47%, #000 53%, transparent 61%);
    mask-image: linear-gradient(152deg, transparent 39%, #000 47%, #000 53%, transparent 61%); }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(2) { inset: -280px 0 0; background-image:
        radial-gradient(1.3px 1.3px at 235px 242px, rgba(214,222,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 101px 98px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.3px 1.3px at 99px 52px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.4px 1.4px at 50px 25px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.4px 1.4px at 235px 84px, rgba(214,222,255,0.85), transparent),
        radial-gradient(1.0px 1.0px at 36px 34px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.2px 1.2px at 19px 241px, rgba(214,222,255,0.85), transparent),
        radial-gradient(1.1px 1.1px at 104px 269px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.4px 1.4px at 259px 6px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.6px 1.6px at 146px 212px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.5px 1.5px at 134px 165px, rgba(214,222,255,0.85), transparent),
        radial-gradient(1.0px 1.0px at 151px 19px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.5px 1.5px at 209px 59px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 38px 12px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.6px 1.6px at 113px 111px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.6px 1.6px at 244px 196px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.3px 1.3px at 218px 41px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.1px 1.1px at 142px 176px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 11px 213px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.4px 1.4px at 72px 130px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.5px 1.5px at 34px 242px, rgba(255,255,255,0.95), transparent),
        radial-gradient(1.3px 1.3px at 100px 233px, rgba(214,222,255,0.85), transparent);
    background-size: 280px 280px; animation: ape-stars-far 190s linear infinite; }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(3) { inset: -460px 0 0; animation: ape-stars-near 140s linear infinite; }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(3)::before, .ape-bg--nebula .ape-bgfx > i:nth-of-type(3)::after { content: ''; position: absolute; inset: 0;
    background-size: 460px 460px; will-change: opacity; filter: drop-shadow(0 0 3px rgba(255,255,255,0.7)); }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(3)::before { background-image:
        radial-gradient(2.8px 2.8px at 167px 73px, #fff, transparent),
        radial-gradient(2.2px 2.2px at 235px 283px, #fff, transparent),
        radial-gradient(2.5px 2.5px at 381px 381px, color-mix(in srgb, var(--a1) 40%, #fff), transparent),
        radial-gradient(2.5px 2.5px at 184px 47px, #fff, transparent),
        radial-gradient(2.2px 2.2px at 450px 442px, #fff, transparent),
        radial-gradient(2.4px 2.4px at 446px 259px, color-mix(in srgb, var(--a2) 40%, #fff), transparent),
        radial-gradient(2.2px 2.2px at 343px 199px, #fff, transparent);
    animation: ape-twinkle 4.6s ease-in-out infinite alternate; }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(3)::after { background-image:
        radial-gradient(1.7px 1.7px at 315px 40px, color-mix(in srgb, var(--a2) 35%, #fff), transparent),
        radial-gradient(2.5px 2.5px at 63px 135px, color-mix(in srgb, var(--a2) 35%, #fff), transparent),
        radial-gradient(2.5px 2.5px at 173px 202px, color-mix(in srgb, var(--a2) 35%, #fff), transparent),
        radial-gradient(2.0px 2.0px at 301px 238px, color-mix(in srgb, var(--a2) 35%, #fff), transparent),
        radial-gradient(2.4px 2.4px at 46px 269px, #fff, transparent),
        radial-gradient(1.7px 1.7px at 162px 311px, #fff, transparent),
        radial-gradient(1.7px 1.7px at 121px 361px, color-mix(in srgb, var(--a2) 35%, #fff), transparent);
    background-position: 150px 230px; animation: ape-twinkle 6.2s ease-in-out -3s infinite alternate; }
/* shooting stars: a thin light that crosses part of the sky every few seconds, each on its own beat */
.ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::before, .ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::after { content: ''; position: absolute; width: 190px; height: 2px;
    border-radius: 2px; opacity: 0; background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--a1) 70%, transparent) 30%, transparent);
    box-shadow: 0 0 12px rgba(255,255,255,0.6); }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::before { top: calc(280px + 16vh); left: 80%; animation: ape-shoot 11s ease-in 1.5s infinite; }
.ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::after { top: calc(280px + 48vh); left: 56%; animation: ape-shoot 17s ease-in 7s infinite; }
@keyframes ape-nebula-turn { to { transform: rotate(360deg); } }
@keyframes ape-stars-far { to { transform: translateY(280px); } }
@keyframes ape-stars-near { to { transform: translateY(460px); } }
@keyframes ape-twinkle { from { opacity: 0.3; } to { opacity: 1; } }
@keyframes ape-shoot { 0%, 88% { opacity: 0; transform: rotate(-24deg) translateX(0); } 90% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-24deg) translateX(-46vw); } }
/* the brightness layer is a little lighter on Nebula: its sky is already deep */
.ape-bg--nebula.ape-bg--dark-light .ape-bgfx::after { background: linear-gradient(180deg, rgba(5,1,20,0.04), rgba(5,1,20,0.24)); }
.ape-bg--nebula.ape-bg--dark-medium .ape-bgfx::after { background: linear-gradient(180deg, rgba(5,1,20,0.2), rgba(5,1,20,0.42)); }
@media (max-width: 760px) { .ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::before, .ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::after { width: 120px; }
    .ape-bg--nebula .ape-bgfx > i:nth-of-type(3)::before, .ape-bg--nebula .ape-bgfx > i:nth-of-type(3)::after { filter: none; } }
@media (prefers-reduced-motion: reduce) {
    .ape-bg--nebula .ape-bgfx > i, .ape-bg--nebula .ape-bgfx > i::before, .ape-bg--nebula .ape-bgfx > i::after { animation: none !important; }
    .ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::before, .ape-bg--nebula .ape-bgfx > i:nth-of-type(2)::after { display: none; }
}
/* engage4: the post cards of the site show their views on the right of the likes and comments, as on /sites */
.ape-post-text small .ape-post-views { margin-left: auto; position: relative; z-index: 2; }

/* ---------- engage5: the RSS pill next to «News» (copies the feed's address; the button says Copied ✓) ---------- */
.ape-section-head:has(.ape-rss) { align-items: center; }
.ape-rss { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font: inherit; font-size: 0.82rem; font-weight: 800; line-height: 1.2;
    color: #fdba74; background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.4); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.ape-rss svg { width: 14px; height: 14px; }
.ape-rss:hover, .ape-rss:focus-visible { color: #1a0b02; border-color: transparent; background: linear-gradient(135deg, #fb923c, #f97316); }
.ape-rss:focus-visible { outline: 2px solid #fb923c; outline-offset: 2px; }
.ape-rss.is-done { color: #04121a; border-color: transparent; background: linear-gradient(135deg, #4ade80, #22d3ee); }
@media (prefers-reduced-motion: reduce) { .ape-rss { transition: none; } }

/* ---------- sotw1: the 🏆 next to Follow on the header of the Site of the Week (gold), or of a past winner (quiet) ---------- */
.ape-sotw { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 900; line-height: 1.2;
    color: #fde68a; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.4); transition: background 0.2s, border-color 0.2s; }
.ape-sotw:hover, .ape-sotw:focus-visible { background: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.75); }
.ape-sotw b { font-weight: 900; color: #fff; }
.ape-sotw.is-now { color: #1c1002; border-color: transparent; background: linear-gradient(135deg, #fde68a, #fbbf24 45%, #f59e0b);
    box-shadow: 0 6px 22px rgba(245,158,11,0.45), 0 0 0 1px rgba(255,255,255,0.25) inset; }
.ape-sotw.is-now b { color: #1c1002; }
.ape-sotw.is-now:hover, .ape-sotw.is-now:focus-visible { background: linear-gradient(135deg, #fef3c7, #fcd34d 45%, #fbbf24); }
@media (prefers-reduced-motion: reduce) { .ape-sotw { transition: none; } }
/* newsnotif1: comments and likes on your BASC post in the 🔔: a 💬 or ♥ badge on the picture, the comment's picture on the right */
.notif-ava { position: relative; display: block; line-height: 0; }
.notif-ava > i { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 0 0 2px #120a24, 0 4px 10px rgba(0,0,0,0.45); }
.notif-ava > i svg { width: 11px; height: 11px; fill: #fff; }
.notif-ava--like > i { background: linear-gradient(135deg, #ff5f8f, #ff2d6f 55%, #e11d48); }
.notif-ava--comment > i { background: linear-gradient(135deg, #00ddeb, #6366f1 60%, #9945ff); }
.notif-item.is-unread .notif-ava > i { animation: notif-pop 0.5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes notif-pop { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.notif-side { display: flex; align-items: flex-start; gap: 8px; }
.notif-item img.notif-thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); }
@media (prefers-reduced-motion: reduce) { .notif-item.is-unread .notif-ava > i { animation: none; } }

/* pagefx1 (review3, 28-10-2026, point 19 of the site review): the pages of an Ape Site fade into each other, as on
   bascdao.com (a cross-document view transition; a browser without them loads the page as before). Nothing moves with
   prefers-reduced-motion. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.16s ease-out both ape-pfx-out; }
::view-transition-new(root) { animation: 0.28s ease-out 0.04s both ape-pfx-in; }
@keyframes ape-pfx-out { to { opacity: 0; } }
@keyframes ape-pfx-in { from { opacity: 0; } }   /* opacity only: the site's background covers the whole window */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* ===== xpladder1 (Mortimer, 01-11-2026: «se irán desbloqueando más looks para /my-site … es una muy buena idea para
   incentivar a subir de lvl»; then «hazlo muy COOL y originales pero respetando el escalado, un low level nunca es mejor que
   un high level»): between the ranks of Ape XP, something new for the site every two or three levels (xp.SITE_LADDER).
   Richer the higher: light particles low down (Bananas 3, Gold Dust 12), layered scenes in the middle (Jungle Canopy 7, Club
   Lounge 15, Velvet buttons 17, Moonlight 22, Arena 25, Glowing posts 27), whole worlds with their own light near the top
   (Thunder and Crimson 32, Volcano 35, Ancient Temple 42, Elder Aura 45) and the Legendary set at 50. Fixed drawings only; the loops
   move only transform and opacity, stop while off screen (.is-off) and under prefers-reduced-motion. ===== */

/* --- Header: Arena (level 25): the banner as a stadium at night: two spotlights sweeping, camera flashes in the crowd, a
   light ribbon running at the bottom; the picture in a silver ring under the lights, the name in chrome. --- */
.ape-hero--arena .ah-pan > img { animation: ah-kenburns 30s ease-in-out infinite alternate; }
.ape-hero--arena .ah-tint { inset: 0; z-index: 1;
    background: radial-gradient(70% 60% at 50% 115%, color-mix(in srgb, var(--a1) 38%, transparent), transparent 70%),
                linear-gradient(180deg, rgba(6, 8, 22, 0.6), rgba(6, 8, 22, 0.08) 42%, rgba(6, 8, 22, 0.72)); }
.ape-hero--arena .ah-beam { bottom: -6%; z-index: 1; width: 30%; height: 160%; opacity: 0.6; mix-blend-mode: screen; transform-origin: 50% 100%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(235, 242, 255, 0.16) 52%, transparent 86%);
    clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); }
.ape-hero--arena .ah-beam--l { left: 2%; animation: ah-beam-l 9s ease-in-out infinite alternate; }
.ape-hero--arena .ah-beam--r { right: 2%; animation: ah-beam-r 11s ease-in-out infinite alternate;
    background: linear-gradient(0deg, color-mix(in srgb, var(--a2) 65%, #fff), color-mix(in srgb, var(--a2) 18%, transparent) 52%, transparent 86%); }
.ape-hero--arena .ah-crowd { left: 0; right: 0; bottom: 0; height: 42%; z-index: 2; }
.ape-hero--arena .ah-crowd i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; opacity: 0;
    box-shadow: 0 0 8px 2px #fff, 0 0 22px 6px color-mix(in srgb, var(--a3) 60%, transparent); animation: ah-camflash 3.6s ease-out infinite; }
.ape-hero--arena .ah-crowd i:nth-child(1) { left: 6%; top: 62%; animation-delay: 0.2s; }
.ape-hero--arena .ah-crowd i:nth-child(2) { left: 15%; top: 38%; animation-delay: 1.9s; animation-duration: 4.4s; }
.ape-hero--arena .ah-crowd i:nth-child(3) { left: 27%; top: 70%; animation-delay: 0.9s; }
.ape-hero--arena .ah-crowd i:nth-child(4) { left: 36%; top: 30%; animation-delay: 2.7s; animation-duration: 5s; }
.ape-hero--arena .ah-crowd i:nth-child(5) { left: 58%; top: 64%; animation-delay: 1.4s; }
.ape-hero--arena .ah-crowd i:nth-child(6) { left: 67%; top: 34%; animation-delay: 3.1s; animation-duration: 4.2s; }
.ape-hero--arena .ah-crowd i:nth-child(7) { left: 76%; top: 72%; animation-delay: 0.5s; animation-duration: 3.2s; }
.ape-hero--arena .ah-crowd i:nth-child(8) { left: 85%; top: 44%; animation-delay: 2.2s; }
.ape-hero--arena .ah-crowd i:nth-child(9) { left: 93%; top: 66%; animation-delay: 3.6s; animation-duration: 4.8s; }
.ape-hero--arena .ah-crowd i:nth-child(10) { left: 47%; top: 80%; animation-delay: 1.1s; animation-duration: 5.4s; }
.ape-hero--arena .ah-ribbon { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.ape-hero--arena .ah-ribbon i { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; opacity: 0.9;
    background: repeating-linear-gradient(90deg, var(--a1) 0 46px, transparent 46px 64px, #ffffff 64px 76px, transparent 76px 94px, var(--a2) 94px 140px, transparent 140px 158px);
    animation: ah-ribbon 7s linear infinite; }
.ape-hero--arena .ah-stage { position: absolute; left: 0; right: 0; bottom: 0; height: 52%;
    background: radial-gradient(60% 90% at 50% 100%, color-mix(in srgb, var(--a1) 24%, transparent), transparent 70%); }
.ape-hero--arena .ah-halo { inset: -34px; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), color-mix(in srgb, var(--a1) 30%, transparent) 55%, transparent); }
.ape-hero--arena .ah-ring { inset: -8px; background: conic-gradient(#ffffff, #c9d3df, var(--a1), #ffffff, #8a96ab, var(--a2), #ffffff); animation-duration: 3.4s; }
.ape-hero--arena .ah-orbit { border: 1px solid rgba(255, 255, 255, 0.26); }
.ape-hero--arena .ah-orbit b::before { background: #fff; box-shadow: 0 0 12px #fff, 0 0 2px #fff; }
.ape-hero--arena .ape-avatar { border-color: #e8eef8; }
.ape-hero--arena .ape-hero-title { background: linear-gradient(180deg, #ffffff 26%, #d7deea 50%, #7f8ba1 52%, #eef3fa 82%); -webkit-background-clip: text; background-clip: text;
    color: transparent; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45)); }
.ape-hero--arena a.ape-hero-title:hover { color: transparent; }
.ape-hero--arena .ah-domain { border-color: rgba(232, 238, 248, 0.55); }
.ape-hero-wrap--arena::before, .ape-hero-wrap--arena::after { background: conic-gradient(from var(--ape-ang), #ffffff, #8a96ab, var(--a1), #ffffff, #c9d3df, var(--a2), #ffffff); }
@keyframes ah-beam-l { from { transform: rotate(-26deg); } to { transform: rotate(14deg); } }
@keyframes ah-beam-r { from { transform: rotate(24deg); } to { transform: rotate(-16deg); } }
@keyframes ah-camflash { 0%, 9%, 100% { opacity: 0; transform: scale(0.4); } 2% { opacity: 1; transform: scale(1.5); } 5% { opacity: 0.25; transform: scale(1); } }
@keyframes ah-ribbon { to { transform: translateX(-50%); } }

/* --- Header: Ancient Temple (level 42): the banner framed by two stone columns with torches, the light of the gods
   falling from above, motes of amber and jade rising; behind the picture three rings of glyphs turning. --- */
.ape-hero--temple { --tp1: #f5c451; --tp2: #14f195; --tp3: #fff1c7; }
.ape-hero--temple .ah-pan > img { animation: ah-kenburns 40s ease-in-out infinite alternate; }
.ape-hero--temple .ah-tint { inset: 0; z-index: 1;
    background: radial-gradient(70% 90% at 50% -20%, rgba(255, 214, 120, 0.34), transparent 60%), radial-gradient(120% 110% at 50% 50%, transparent 52%, rgba(8, 4, 0, 0.62)),
                linear-gradient(180deg, rgba(20, 12, 2, 0.18), rgba(12, 6, 2, 0.62)); }
.ape-hero--temple .ah-godrays { left: 50%; top: -30%; z-index: 1; width: 130%; height: 170%; margin-left: -65%; opacity: 0.5; mix-blend-mode: screen; transform-origin: 50% 0;
    background: repeating-conic-gradient(from 150deg at 50% 0%, rgba(255, 226, 150, 0) 0deg, rgba(255, 226, 150, 0.32) 2.5deg, rgba(255, 226, 150, 0) 5deg, transparent 5deg 12deg);
    -webkit-mask: radial-gradient(60% 70% at 50% 0%, #000 25%, transparent 78%); mask: radial-gradient(60% 70% at 50% 0%, #000 25%, transparent 78%);
    animation: ah-godrays 14s ease-in-out infinite alternate; }
.ape-hero--temple .ah-col { top: 0; bottom: 0; z-index: 2; width: clamp(40px, 6.5%, 84px);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 22%, rgba(255, 240, 200, 0.08) 50%, transparent 78%, rgba(0, 0, 0, 0.6)),
                repeating-linear-gradient(90deg, #5f5038 0 7px, #b19c71 7px 9px, #7c6847 9px 13px, #3e3323 13px 15px), linear-gradient(180deg, #8f7b55, #3b301f);
    box-shadow: 0 0 34px rgba(0, 0, 0, 0.65); }
.ape-hero--temple .ah-col--l { left: 3%; } .ape-hero--temple .ah-col--r { right: 3%; }
.ape-hero--temple .ah-col i, .ape-hero--temple .ah-col::after { position: absolute; left: -16%; right: -16%; height: 18px; border-radius: 3px;
    background: linear-gradient(180deg, #e2c98d, #8d7448 60%, #5a4a2e); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 246, 214, 0.6); }
.ape-hero--temple .ah-col i { top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
.ape-hero--temple .ah-col::after { content: ''; bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ape-hero--temple .ah-col b { position: absolute; left: 50%; top: 30%; width: 64px; height: 92px; margin-left: -32px; border-radius: 50%; mix-blend-mode: screen; transform-origin: 50% 88%;
    background: radial-gradient(50% 58% at 50% 72%, #fff6d0 0 10%, #ffbe55 30%, rgba(255, 128, 30, 0.55) 52%, transparent 72%); animation: ah-torch 1.4s ease-in-out infinite alternate; }
.ape-hero--temple .ah-col b::before { content: ''; position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 170, 70, 0.26), transparent); }
.ape-hero--temple .ah-col--r b { animation-duration: 1.7s; animation-delay: -0.6s; }
.ape-hero--temple .ah-motes { position: absolute; left: 0; right: 0; top: 0; height: 200%; opacity: 0.85; animation: ah-motes 34s linear infinite;
    background: radial-gradient(1.8px 1.8px at 30px 50px, #ffe39a, transparent), radial-gradient(1.4px 1.4px at 150px 140px, #9dffd7, transparent),
                radial-gradient(2.2px 2.2px at 240px 90px, #fff1c7, transparent), radial-gradient(1.5px 1.5px at 90px 210px, #f5c451, transparent),
                radial-gradient(1.6px 1.6px at 300px 20px, #6ff7c1, transparent) 0 0 / 340px 240px;
    -webkit-mask: linear-gradient(180deg, transparent 5%, #000 40%); mask: linear-gradient(180deg, transparent 5%, #000 40%); }
.ape-hero--temple svg.ah-glyphs { inset: -40px; z-index: 0; overflow: visible; border-radius: 0; }
.ah-glyphs circle { fill: none; transform-box: fill-box; transform-origin: center; }
.ah-glyphs-a { stroke: #f5c451; stroke-width: 1.4; stroke-dasharray: 2 6 12 6 4 6; opacity: 0.8; animation: ah-turn 46s linear infinite; }
.ah-glyphs-b { stroke: #14f195; stroke-width: 3.2; stroke-dasharray: 1.5 9; stroke-linecap: round; opacity: 0.75; animation: ah-turn 28s linear infinite reverse; }
.ah-glyphs-c { stroke: #fff1c7; stroke-width: 1; stroke-dasharray: 16 5 3 5; opacity: 0.55; animation: ah-turn 64s linear infinite; }
.ape-hero--temple .ah-halo { background: radial-gradient(closest-side, rgba(245, 196, 81, 0.55), rgba(20, 241, 149, 0.22) 60%, transparent); }
.ape-hero--temple .ah-ring { inset: -8px; background: conic-gradient(var(--tp1), var(--tp3), var(--tp2), var(--tp1), #a8741c, var(--tp2), var(--tp1)); animation-duration: 6s; }
.ape-hero--temple .ah-orbit { display: none; }
.ape-hero--temple .ape-avatar { border-color: var(--tp1); }
.ape-hero--temple .ape-hero-title { background: linear-gradient(180deg, #fff6d8 12%, #f5c451 50%, #a8741c 53%, #ffe6a0 86%); -webkit-background-clip: text; background-clip: text;
    color: transparent; filter: drop-shadow(0 2px 0 rgba(60, 30, 0, 0.55)) drop-shadow(0 0 18px rgba(245, 196, 81, 0.35)); }
.ape-hero--temple a.ape-hero-title:hover { color: transparent; }
.ape-hero--temple .ah-domain { left: calc(3% + clamp(40px, 6.5%, 84px) + 14px); border-color: rgba(245, 196, 81, 0.55); }
.ape-hero--temple .ah-domain i, .ape-hero--temple .ah-domain i::after { background: var(--tp2); box-shadow: 0 0 10px var(--tp2); }
.ape-hero-wrap--temple::before, .ape-hero-wrap--temple::after { background: conic-gradient(from var(--ape-ang), #f5c451, #fff1c7, #14f195, #a8741c, #f5c451); }
@keyframes ah-godrays { from { transform: rotate(-5deg); opacity: 0.38; } to { transform: rotate(5deg); opacity: 0.62; } }
@keyframes ah-torch { from { transform: scale(0.92, 0.88); opacity: 0.82; } to { transform: scale(1.06, 1.1); opacity: 1; } }
@keyframes ah-motes { to { transform: translateY(-50%); } }
@media (max-width: 600px) {
    .ape-hero--temple .ah-col { width: 26px; } .ape-hero--temple .ah-col--l { left: 2%; } .ape-hero--temple .ah-col--r { right: 2%; }
    .ape-hero--temple .ah-col b { width: 40px; height: 58px; margin-left: -20px; } .ape-hero--temple .ah-col b::before { display: none; }
    .ape-hero--temple .ah-domain { left: calc(2% + 36px); }
    .ape-hero--temple svg.ah-glyphs { inset: -20px; }
    .ape-hero--arena .ah-beam { width: 44%; }
}

/* --- The Elder Aura (level 45, any header but Classic): runes of light turning round the picture, a living aura of jade
   and gold, and four sparks in orbit. --- */
.ape-hero.has-aura .ah-aura { inset: -46px; z-index: 0;
    background: radial-gradient(closest-side, transparent 52%, rgba(20, 241, 149, 0.34) 64%, rgba(245, 196, 81, 0.26) 76%, transparent); animation: ah-aura 3.8s ease-in-out infinite; }
.ape-hero.has-aura svg.ah-aura-runes { inset: -32px; z-index: 0; overflow: visible; border-radius: 0; }
.ah-aura-runes circle { fill: none; transform-box: fill-box; transform-origin: center; stroke-linecap: round; }
.ah-aura-runes circle:nth-child(1) { stroke: #9dffd7; stroke-width: 2; stroke-dasharray: 1 7 6 7 2 7; opacity: 0.85; animation: ah-turn 18s linear infinite; }
.ah-aura-runes circle:nth-child(2) { stroke: #ffe39a; stroke-width: 1.2; stroke-dasharray: 10 4 2 4; opacity: 0.7; animation: ah-turn 24s linear infinite reverse; }
.ape-hero.has-aura .ah-aura-orbit { inset: -38px; z-index: 0; animation: ah-turn 7s linear infinite; }
.ah-aura-orbit b { position: absolute; inset: 0; transform: rotate(calc(var(--n, 0) * 90deg)); }
.ah-aura-orbit b:nth-child(2) { --n: 1; } .ah-aura-orbit b:nth-child(3) { --n: 2; } .ah-aura-orbit b:nth-child(4) { --n: 3; }
.ah-aura-orbit b::before { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
    background: #eafff6; box-shadow: 0 0 10px 2px #14f195, 0 0 18px 4px rgba(20, 241, 149, 0.4); }
.ah-aura-orbit b:nth-child(even)::before { background: #fff6d6; box-shadow: 0 0 10px 2px #f5c451, 0 0 18px 4px rgba(245, 196, 81, 0.4); }
.ape-hero.has-aura .ape-avatar { box-shadow: 0 18px 46px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(20, 241, 149, 0.35), 0 0 34px rgba(20, 241, 149, 0.35); }
@keyframes ah-aura { 0%, 100% { opacity: 0.65; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } }
@media (max-width: 600px) { .ape-hero.has-aura .ah-aura { inset: -28px; } .ape-hero.has-aura svg.ah-aura-runes { inset: -16px; } .ape-hero.has-aura .ah-aura-orbit { inset: -20px; } }

/* --- Header effects that a level unlocks: the shapes (static/js/ape-hero.js), the storm of Thunder and the glory of Legendary --- */
.ah-p--banana { width: calc(var(--s) * 2.6); height: calc(var(--s) * 1.3); border-radius: 0; box-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
    background: linear-gradient(90deg, #4a2c0a 0 5%, var(--c) 13%, #facc15 58%, #c9dc4a 90%, #3f2a0b 95%);
    clip-path: polygon(2% 36%, 8% 68%, 20% 88%, 36% 98%, 52% 100%, 68% 94%, 82% 80%, 92% 60%, 98% 32%, 100% 20%, 96% 16%, 88% 44%, 76% 62%, 62% 72%, 48% 76%, 34% 72%, 20% 60%, 10% 44%, 4% 28%); }
.ah-p--dust { background: radial-gradient(circle, #ffffff 0 22%, var(--c) 52%, transparent 72%); box-shadow: 0 0 6px var(--c), 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.ah-p--glint { width: calc(var(--s) * 3); height: calc(var(--s) * 3); border-radius: 0; box-shadow: none; background: radial-gradient(closest-side, #fff, var(--c) 30%, transparent 70%);
    clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%); }
.ah-p--spark { width: calc(var(--s) * 0.3); height: calc(var(--s) * 2.2); border-radius: 2px; background: linear-gradient(180deg, #ffffff, var(--c)); box-shadow: 0 0 8px var(--c); }
.ah-p--crown { width: calc(var(--s) * 1.6); height: calc(var(--s) * 1.2); border-radius: 0; box-shadow: none; filter: drop-shadow(0 0 5px rgba(255, 215, 106, 0.8));
    background: linear-gradient(180deg, #fff4c2, var(--c) 55%, #c98a1f); clip-path: polygon(0 100%, 4% 22%, 28% 58%, 50% 0, 72% 58%, 96% 22%, 100% 100%); }
@keyframes ah-tumble-p { 0% { opacity: 0; transform: translate(0, -40px) rotate(0deg); } 10% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 10px), 260px) rotate(var(--r, 360deg)); } }
@keyframes ah-shimmer-p { 0% { opacity: 0; transform: translate(0, 0) scale(0.3); } 18% { opacity: 1; transform: translate(calc(var(--dx, 10px) * 0.25), -14px) scale(1); }
    42% { opacity: 0.25; transform: translate(calc(var(--dx, 10px) * 0.5), -30px) scale(0.7); } 64% { opacity: 1; transform: translate(calc(var(--dx, 10px) * 0.75), -46px) scale(1.1); }
    100% { opacity: 0; transform: translate(var(--dx, 10px), -70px) scale(0.4); } }
.ape-banner svg.ah-strike { position: absolute; top: 0; z-index: 2; width: 54px; height: 82%; overflow: visible; pointer-events: none; opacity: 0; transform-origin: 50% 0;
    fill: #f2f7ff; filter: drop-shadow(0 0 6px #a5b4fc) drop-shadow(0 0 16px rgba(165, 180, 252, 0.7)); }
.ape-banner .ah-strike--a { left: 21%; animation: ah-strike 9s 1s linear infinite; }
.ape-banner .ah-strike--b { left: 73%; width: 44px; height: 70%; animation: ah-strike 11s 5.5s linear infinite; }
.ape-banner .ah-sky { inset: 0; z-index: 2; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(70% 90% at 22% 0%, rgba(200, 215, 255, 0.75), rgba(150, 170, 255, 0.2) 50%, transparent 75%); animation: ah-sky 9s 1s linear infinite; }
.ape-banner .ah-glory { left: 0; right: 0; bottom: 0; height: 80%; z-index: 2; opacity: 0; mix-blend-mode: screen;
    background: radial-gradient(55% 100% at 50% 100%, rgba(255, 215, 106, 0.42), rgba(255, 122, 224, 0.12) 55%, transparent 75%); animation: ah-glory 7s ease-in-out infinite; }
@keyframes ah-strike { 0%, 100% { opacity: 0; transform: scaleY(0.4); } 1% { opacity: 1; transform: scaleY(1); } 2% { opacity: 0.15; } 3.2% { opacity: 1; } 4% { opacity: 0.5; } 7% { opacity: 0; transform: scaleY(1); } }
@keyframes ah-sky { 0%, 100% { opacity: 0; } 1% { opacity: 0.7; } 2% { opacity: 0.08; } 3.2% { opacity: 0.55; } 8% { opacity: 0; } }
@keyframes ah-glory { 0%, 100% { opacity: 0; transform: translateY(26%) scaleX(0.8); } 45% { opacity: 1; transform: translateY(0) scaleX(1); } 70% { opacity: 0.5; } }
@media (max-width: 600px) { .ape-banner svg.ah-strike { width: 34px; } }

/* --- Buttons: Velvet (level 17): deep velvet in the look's colours, a fine nap, gold piping, a gold coin for the arrow and a
   gold light that passes. --- */
body.ape.ape-btn--velvet .ape-link:not(.has-bg) {
    background: radial-gradient(90% 140% at 12% 0%, color-mix(in srgb, var(--a1) 30%, transparent), transparent 55%),
                radial-gradient(70% 120% at 100% 100%, rgba(0, 0, 0, 0.45), transparent 60%),
                repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0 2px, rgba(0, 0, 0, 0.035) 2px 4px),
                linear-gradient(135deg, color-mix(in srgb, var(--a1) 26%, #2e0719), color-mix(in srgb, var(--a3) 22%, #17040e) 66%, #0c0208);
    border: 1px solid rgba(255, 215, 106, 0.62);
    box-shadow: inset 0 0 0 3px rgba(10, 3, 8, 0.55), inset 0 0 0 4px rgba(255, 215, 106, 0.32), inset 0 12px 24px rgba(255, 255, 255, 0.06),
                inset 0 -16px 28px rgba(0, 0, 0, 0.42), 0 10px 26px rgba(0, 0, 0, 0.35); }
body.ape.ape-btn--velvet .ape-link::before { display: none; }
body.ape.ape-btn--velvet .ape-link > span { color: #fff3d6; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); letter-spacing: 0.01em; }
body.ape.ape-btn--velvet .ape-link:not(.has-bg) > small { color: color-mix(in srgb, #ffe7b0 70%, var(--muted)); }
body.ape.ape-btn--velvet .ape-link > i { display: grid; place-items: center; width: 30px; height: 30px; right: 14px; border-radius: 50%; color: #3a2300;
    background: radial-gradient(circle at 35% 30%, #fff6d0, #ffd76a 46%, #b07a1c); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 -2px 3px rgba(120, 70, 0, 0.5); }
body.ape.ape-btn--velvet .ape-link-shine::before { background: linear-gradient(90deg, transparent, rgba(255, 226, 150, 0.2), transparent); }
body.ape.ape-btn--velvet .ape-link:not(.has-bg):hover, body.ape.ape-btn--velvet .ape-link:not(.has-bg):focus-visible { border-color: #ffd76a;
    box-shadow: inset 0 0 0 3px rgba(10, 3, 8, 0.55), inset 0 0 0 4px rgba(255, 215, 106, 0.55), inset 0 12px 24px rgba(255, 255, 255, 0.08),
                inset 0 -16px 28px rgba(0, 0, 0, 0.42), 0 16px 34px rgba(0, 0, 0, 0.42), 0 0 26px rgba(255, 215, 106, 0.22); }
body.ape.ape-btn--velvet .ape-link.has-bg { border-color: rgba(255, 215, 106, 0.66); }
body.ape.ape-btn--velvet .ape-link.has-bg:hover { border-color: #ffd76a; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), 0 0 26px rgba(255, 215, 106, 0.22); }

/* --- Post cards: Glowing (level 27): a border of light in the look's colours that turns round each card. --- */
body.ape.ape-posts--glow .ape-post-card { isolation: isolate; overflow: hidden; border-color: transparent; background: transparent;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), 0 0 24px color-mix(in srgb, var(--a1) 16%, transparent); }
body.ape.ape-posts--glow .ape-post-card::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -2; width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%;
    background: conic-gradient(from 0deg, var(--a1), transparent 20%, var(--a2) 36%, transparent 56%, var(--a3) 72%, transparent 88%, var(--a1)); animation: ape-postglow 7s linear infinite; }
body.ape.ape-posts--glow .ape-post-card::after { content: ''; position: absolute; inset: 1.5px; z-index: -1; border-radius: 16.5px;
    background: linear-gradient(180deg, rgba(24, 13, 48, 0.95), rgba(14, 7, 32, 0.97)); }
body.ape.ape-posts--glow .ape-post-card:hover, body.ape.ape-posts--glow .ape-post-card:focus-within { background: transparent;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36), 0 0 34px color-mix(in srgb, var(--a1) 30%, transparent); }
body.ape.ape-posts--glow .ape-post-card:nth-child(2n)::before { animation-duration: 9s; animation-direction: reverse; }
@keyframes ape-postglow { to { transform: rotate(1turn); } }

/* --- Page backgrounds that a level unlocks (ape_site/_xp_bg.html draws the scenery) --- */
.ape-xbg { position: absolute; inset: 0; overflow: hidden; }
.ape-xbg > span { position: absolute; display: block; }
.ape-xbg svg { position: absolute; overflow: visible; }
.ape-bg--canopy .ape-bgfx, .ape-bg--lounge .ape-bgfx, .ape-bg--moonlight .ape-bgfx, .ape-bg--volcano .ape-bgfx, .ape-bg--legendary .ape-bgfx { background-color: #0b0418; }
.ape-bg--canopy.ape-bg--dark-light .ape-bgfx::after, .ape-bg--lounge.ape-bg--dark-light .ape-bgfx::after, .ape-bg--moonlight.ape-bg--dark-light .ape-bgfx::after,
.ape-bg--volcano.ape-bg--dark-light .ape-bgfx::after, .ape-bg--legendary.ape-bg--dark-light .ape-bgfx::after { background: linear-gradient(180deg, rgba(5, 1, 20, 0), rgba(5, 1, 20, 0.2)); }
.ape-bg--canopy.ape-bg--dark-medium .ape-bgfx::after, .ape-bg--lounge.ape-bg--dark-medium .ape-bgfx::after, .ape-bg--moonlight.ape-bg--dark-medium .ape-bgfx::after,
.ape-bg--volcano.ape-bg--dark-medium .ape-bgfx::after, .ape-bg--legendary.ape-bg--dark-medium .ape-bgfx::after { background: linear-gradient(180deg, rgba(5, 1, 20, 0.12), rgba(5, 1, 20, 0.4)); }

/* Jungle Canopy (level 7): big leaves hanging from the top corners and swaying, light through them, fireflies */
.ape-bg--canopy .ape-bgfx { background: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--a1) 16%, #3f8a4e), transparent 70%),
    radial-gradient(70% 50% at 50% 110%, rgba(20, 90, 50, 0.45), transparent 70%), linear-gradient(180deg, #0d2c19, #071c10 55%, #030d07); }
.xb-leaves { top: -3vh; width: min(50vw, 680px); height: auto; aspect-ratio: 400 / 420; }
.xb-leaves--l { left: -3vw; } .xb-leaves--r { right: -3vw; }
.xb-sway { transform-box: view-box; animation: xb-sway 9s ease-in-out infinite alternate; }
.xb-sway--a { transform-origin: 100px 0; } .xb-sway--b { transform-origin: 40px 0; animation-duration: 12s; animation-direction: alternate-reverse; }
.xb-sway--c { transform-origin: 320px 0; animation-duration: 10s; animation-direction: alternate-reverse; } .xb-sway--d { transform-origin: 370px 0; animation-duration: 13s; }
.xb-vine { transform-box: view-box; transform-origin: 150px 0; animation: xb-sway 7s ease-in-out infinite alternate; }
.xb-shafts { inset: -10% -20% 0; opacity: 0.7; -webkit-mask: linear-gradient(180deg, #000, transparent 78%); mask: linear-gradient(180deg, #000, transparent 78%);
    background: repeating-linear-gradient(104deg, transparent 0 7vw, rgba(200, 255, 190, 0.07) 7vw 10vw, transparent 10vw 18vw); animation: xb-shafts 11s ease-in-out infinite alternate; }
.xb-flies { left: 0; right: 0; top: 0; height: 200%; animation: xb-up 70s linear infinite;
    background: radial-gradient(5px 5px at 40px 60px, rgba(236, 255, 140, 0.95), rgba(236, 255, 140, 0.2) 45%, transparent), radial-gradient(6px 6px at 210px 250px, rgba(200, 255, 120, 0.85), rgba(200, 255, 120, 0.15) 45%, transparent),
                radial-gradient(4px 4px at 320px 120px, rgba(255, 250, 170, 0.9), transparent), radial-gradient(5px 5px at 130px 360px, rgba(220, 255, 140, 0.8), transparent) 0 0 / 380px 420px; }
.xb-flies--2 { animation: xb-up 110s linear infinite, xb-blink 4s ease-in-out infinite alternate; background-size: 520px 470px; opacity: 0.7; }
@keyframes xb-sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
@keyframes xb-shafts { from { opacity: 0.45; transform: translateX(-1.5vw); } to { opacity: 0.85; transform: translateX(1.5vw); } }
@keyframes xb-up { to { transform: translateY(-50%); } }
@keyframes xb-blink { from { opacity: 0.25; } to { opacity: 0.85; } }

/* Club Lounge (level 15): the club's own room: velvet curtains with gold ties, gold art deco on the wall, two warm
   spotlights, bokeh and a gold light that crosses the room */
.ape-bg--lounge .ape-bgfx { background: radial-gradient(80% 60% at 50% 0%, rgba(255, 196, 120, 0.2), transparent 70%),
    radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--a1) 32%, #3a0a24), transparent 70%), linear-gradient(180deg, #1e0818, #13040f 60%, #090208); }
.xb-deco { inset: 0; opacity: 0.2; -webkit-mask: linear-gradient(180deg, #000 5%, transparent 85%); mask: linear-gradient(180deg, #000 5%, transparent 85%);
    background: radial-gradient(circle at 50% 100%, transparent 36%, #ffd27f 37% 38.5%, transparent 39.5% 52%, #ffd27f 53% 54%, transparent 55% 68%, #ffd27f 69% 70%, transparent 71%) 0 0 / 132px 66px,
                radial-gradient(circle at 50% 100%, transparent 36%, #ffd27f 37% 38.5%, transparent 39.5% 52%, #ffd27f 53% 54%, transparent 55% 68%, #ffd27f 69% 70%, transparent 71%) 66px 33px / 132px 66px; }
.xb-spot { top: -8vh; width: 36vw; height: 120vh; opacity: 0.55; mix-blend-mode: screen; transform-origin: 50% 0;
    background: linear-gradient(180deg, rgba(255, 224, 166, 0.42), rgba(255, 224, 166, 0.07) 70%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.xb-spot--l { left: 12vw; animation: xb-spot-l 15s ease-in-out infinite alternate; } .xb-spot--r { right: 12vw; animation: xb-spot-r 18s ease-in-out infinite alternate; }
.xb-bokeh { left: 0; right: 0; top: 0; height: 200%; opacity: 0.7; animation: xb-up 120s linear infinite;
    background: radial-gradient(18px 18px at 60px 80px, rgba(255, 210, 130, 0.35), transparent), radial-gradient(26px 26px at 300px 220px, rgba(255, 150, 190, 0.22), transparent),
                radial-gradient(14px 14px at 480px 120px, rgba(255, 230, 170, 0.32), transparent), radial-gradient(22px 22px at 180px 400px, rgba(255, 190, 120, 0.25), transparent) 0 0 / 560px 480px; }
.xb-curtain { top: 0; bottom: 0; width: clamp(70px, 13vw, 230px); transform-origin: 0 0; box-shadow: 0 0 60px rgba(0, 0, 0, 0.7);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.35)),
                repeating-linear-gradient(90deg, #3d0820 0, #8e1a44 1.4vw, #651032 2.4vw, #2a0414 3.2vw);
    clip-path: polygon(0 0, 100% 0, 96% 26%, 74% 54%, 52% 64%, 62% 76%, 88% 90%, 100% 100%, 0 100%); animation: xb-curtain 9s ease-in-out infinite alternate; }
.xb-curtain--l { left: 0; } .xb-curtain--r { right: 0; transform: scaleX(-1); transform-origin: 50% 0; animation-name: xb-curtain-r; }
.xb-curtain::after { content: ''; position: absolute; left: 0; width: 60%; top: 62%; height: 10px; border-radius: 6px; background: linear-gradient(180deg, #fff1b8, #d9a33a 55%, #8a5a12); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.xb-valance { left: 0; right: 0; top: 0; height: 44px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
    background: radial-gradient(circle at 50% 0, #7c1640 0 62%, transparent 64%) 0 18px / 64px 26px repeat-x, linear-gradient(180deg, #4a0b26, #6d1236) top / 100% 22px no-repeat; }
.xb-valance::after { content: ''; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: linear-gradient(90deg, transparent, #ffd76a 20%, #fff1b8 50%, #ffd76a 80%, transparent); }
.xb-sheen { top: -20%; bottom: -20%; left: 0; width: 28vw; opacity: 0.9; background: linear-gradient(100deg, transparent, rgba(255, 220, 150, 0.1), transparent);
    transform: translateX(-40vw) skewX(-12deg); animation: xb-sheen 13s ease-in-out infinite; }
@keyframes xb-spot-l { from { transform: rotate(-16deg); } to { transform: rotate(10deg); } }
@keyframes xb-spot-r { from { transform: rotate(14deg); } to { transform: rotate(-12deg); } }
@keyframes xb-curtain { from { transform: scaleX(1); } to { transform: scaleX(1.035); } }
@keyframes xb-curtain-r { from { transform: scaleX(-1); } to { transform: scaleX(-1.035); } }
@keyframes xb-sheen { 0% { transform: translateX(-40vw) skewX(-12deg); } 45%, 100% { transform: translateX(140vw) skewX(-12deg); } }

/* Moonlight (level 22): a silver moon with its halo, clouds passing in front of it, two skies of stars, a shooting star */
.ape-bg--moonlight .ape-bgfx { background: radial-gradient(60% 50% at 80% 16%, rgba(200, 220, 255, 0.24), transparent 70%), radial-gradient(60% 40% at 50% 110%, color-mix(in srgb, var(--a1) 16%, transparent), transparent 70%),
    linear-gradient(180deg, #0b1434, #0b1029 50%, #070818); }
.xb-stars { left: 0; right: 0; top: 0; height: 100%; animation: xb-blink 5s ease-in-out infinite alternate;
    background: radial-gradient(1.4px 1.4px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 120px 80px, #dbe6ff, transparent), radial-gradient(1.6px 1.6px at 200px 160px, #fff, transparent),
                radial-gradient(1px 1px at 70px 190px, #c7d6ff, transparent), radial-gradient(1.2px 1.2px at 260px 40px, #fff, transparent) 0 0 / 300px 220px;
    -webkit-mask: linear-gradient(180deg, #000 30%, transparent 85%); mask: linear-gradient(180deg, #000 30%, transparent 85%); }
.xb-stars--2 { background-size: 430px 310px; animation-duration: 7s; animation-direction: alternate-reverse; }
.xb-halo { right: -10vw; top: -10vh; width: 70vw; height: 80vh; background: radial-gradient(closest-side at 80% 40%, rgba(200, 215, 255, 0.2), transparent); animation: xb-blink 8s ease-in-out infinite alternate; }
.xb-moon { right: -5vw; top: 12vh; width: clamp(150px, 25vw, 400px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 36% 34%, #ffffff, #e9eefb 34%, #bcc8e6 70%, #8e9cc4);
    box-shadow: 0 0 60px rgba(210, 225, 255, 0.5), 0 0 170px rgba(180, 200, 255, 0.28), inset -20px -16px 42px rgba(60, 70, 120, 0.45); }
.xb-moon i { position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 30% 62%, rgba(120, 134, 182, 0.3), rgba(120, 134, 182, 0.14) 6%, transparent 10%), radial-gradient(circle at 62% 30%, rgba(120, 134, 182, 0.26), rgba(120, 134, 182, 0.1) 4%, transparent 7%),
                radial-gradient(circle at 70% 70%, rgba(120, 134, 182, 0.22), rgba(120, 134, 182, 0.1) 8%, transparent 13%), radial-gradient(circle at 46% 42%, rgba(120, 134, 182, 0.18), transparent 5%),
                radial-gradient(circle at 22% 36%, rgba(120, 134, 182, 0.18), transparent 6%), radial-gradient(60% 40% at 40% 70%, rgba(150, 162, 200, 0.16), transparent 70%); }
.xb-moon::before { content: ''; position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(closest-side, transparent 60%, rgba(205, 220, 255, 0.14) 68%, transparent 77%);
    animation: xb-ring 9s ease-in-out infinite alternate; }
.xb-cloud { left: -60vw; width: 72vw; height: 24vh; opacity: 0.9; animation: xb-cloud 95s linear infinite;
    background: radial-gradient(closest-side at 26% 60%, rgba(190, 205, 240, 0.24), transparent), radial-gradient(closest-side at 50% 44%, rgba(215, 226, 252, 0.3), transparent),
                radial-gradient(closest-side at 74% 62%, rgba(180, 196, 236, 0.22), transparent); }
.xb-cloud--a { top: 13vh; animation-delay: -30s; } .xb-cloud--b { top: 36vh; width: 90vw; animation-duration: 140s; animation-delay: -90s; opacity: 0.6; }
.xb-cloud--c { top: 64vh; width: 60vw; animation-duration: 120s; animation-delay: -10s; opacity: 0.5; }
.xb-shoot { top: 16vh; left: 52vw; width: 190px; height: 2px; opacity: 0; transform-origin: 0 50%;
    background: linear-gradient(90deg, #ffffff, rgba(200, 215, 255, 0.4) 30%, transparent); animation: xb-shoot 13s ease-in 3s infinite; }
.xb-mist { left: 0; right: 0; bottom: 0; height: 34vh; background: linear-gradient(0deg, rgba(150, 172, 230, 0.16), transparent); animation: xb-blink 10s ease-in-out infinite alternate; }
@keyframes xb-ring { from { opacity: 0.55; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes xb-cloud { from { transform: translateX(0); } to { transform: translateX(170vw); } }
@keyframes xb-shoot { 0% { opacity: 0; transform: translate(0, 0) rotate(-20deg); } 1.5% { opacity: 1; } 6% { opacity: 0; transform: translate(-30vw, 11vw) rotate(-20deg); } 100% { opacity: 0; transform: translate(-30vw, 11vw) rotate(-20deg); } }

/* Volcano (level 35): a volcano breathing fire: the crater glows and pulses, lava runs down, smoke and embers rise */
.ape-bg--volcano .ape-bgfx { background: radial-gradient(70% 50% at 50% 100%, rgba(255, 90, 30, 0.42), transparent 70%), radial-gradient(40% 60% at 0% 70%, rgba(255, 80, 30, 0.3), transparent 70%),
    radial-gradient(40% 60% at 100% 70%, rgba(255, 80, 30, 0.3), transparent 70%), radial-gradient(60% 40% at 50% 40%, color-mix(in srgb, var(--a1) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #1a040b, #3a0a12 55%, #571210); }
.xb-glow--s { animation-duration: 2.8s; animation-direction: alternate-reverse; }
.xb-mount { left: 0; bottom: 0; width: 100%; height: 64vh; }
.xb-glow { transform-box: fill-box; transform-origin: center; animation: xb-pulse 3.4s ease-in-out infinite alternate; }
.xb-lava { animation: xb-lava 2.6s ease-in-out infinite alternate; } .xb-lava--glow { animation-duration: 1.9s; }
.xb-heat { left: 0; right: 0; bottom: 0; height: 50vh; background: radial-gradient(60% 80% at 50% 100%, rgba(255, 110, 40, 0.3), transparent 70%); animation: xb-blink 4s ease-in-out infinite alternate; }
.xb-smoke { left: 50%; bottom: 34vh; width: 34vw; height: 34vw; margin-left: -17vw; border-radius: 50%; opacity: 0;
    background: radial-gradient(closest-side, rgba(120, 60, 50, 0.5), rgba(60, 26, 28, 0.25) 55%, transparent); animation: xb-smoke 16s ease-out infinite; }
.xb-smoke--b { animation-delay: -5.3s; } .xb-smoke--c { animation-delay: -10.6s; }
.xb-embers { left: 0; right: 0; bottom: -100%; height: 200%; animation: xb-up 22s linear infinite;
    -webkit-mask: linear-gradient(0deg, #000 40%, transparent 90%); mask: linear-gradient(0deg, #000 40%, transparent 90%);
    background: radial-gradient(5px 5px at 30px 40px, #ffe1a0, rgba(255, 140, 50, 0.4) 45%, transparent), radial-gradient(2.4px 2.4px at 140px 160px, #ff8a3d, transparent), radial-gradient(6px 6px at 240px 90px, #fff0c0, rgba(255, 120, 40, 0.35) 45%, transparent),
                radial-gradient(2.4px 2.4px at 90px 260px, #ff6a2b, transparent), radial-gradient(3px 3px at 290px 210px, #ffb44d, transparent) 0 0 / 320px 300px; }
.xb-embers--2 { animation-duration: 34s; background-size: 460px 420px; opacity: 0.75; }
@keyframes xb-pulse { from { opacity: 0.6; transform: scale(0.92); } to { opacity: 1; transform: scale(1.08); } }
@keyframes xb-lava { from { opacity: 0.72; } to { opacity: 1; } }
@keyframes xb-smoke { 0% { opacity: 0; transform: translate(0, 0) scale(0.3); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translate(6vw, -48vh) scale(1.6); } }

/* Legendary (level 50): the hall of the Legendary: gold rays turning, aurora in gold, pink and cyan, the crown drawn in the
   stars, gold dust falling and a light that crosses it all */
.ape-bg--legendary .ape-bgfx { background: radial-gradient(70% 55% at 50% 0%, rgba(255, 215, 106, 0.3), transparent 70%), radial-gradient(60% 50% at 12% 100%, rgba(255, 122, 224, 0.24), transparent 70%),
    radial-gradient(60% 50% at 88% 100%, rgba(125, 249, 255, 0.18), transparent 70%), linear-gradient(180deg, #1c0c30, #130725 60%, #0b0418); }
.xb-rays { left: 50%; top: -70vmax; width: 180vmax; height: 180vmax; margin-left: -90vmax; mix-blend-mode: screen; opacity: 1;
    background: repeating-conic-gradient(from 0deg, rgba(255, 215, 106, 0) 0deg, rgba(255, 228, 150, 0.34) 2.4deg, rgba(255, 215, 106, 0) 4.8deg, transparent 4.8deg 11deg);
    -webkit-mask: radial-gradient(closest-side, transparent 3%, #000 12%, rgba(0, 0, 0, 0.7) 45%, transparent 86%); mask: radial-gradient(closest-side, transparent 3%, #000 12%, rgba(0, 0, 0, 0.7) 45%, transparent 86%);
    animation: xb-turn 140s linear infinite; }
.xb-aurora { left: -25vw; width: 150vw; height: 34vh; border-radius: 50%; opacity: 1;
    -webkit-mask: radial-gradient(closest-side, #000 25%, transparent); mask: radial-gradient(closest-side, #000 25%, transparent);
    background: linear-gradient(90deg, transparent, rgba(255, 215, 106, 0.46), rgba(255, 122, 224, 0.4), rgba(125, 249, 255, 0.34), transparent); animation: xb-aurora 20s ease-in-out infinite alternate; }
.xb-aurora--a { top: 18vh; } .xb-aurora--b { top: 46vh; animation-duration: 26s; animation-direction: alternate-reverse;
    background: linear-gradient(90deg, transparent, rgba(125, 249, 255, 0.2), rgba(255, 215, 106, 0.26), rgba(255, 122, 224, 0.22), transparent); }
.xb-aurora--c { top: 72vh; height: 24vh; animation-duration: 32s; opacity: 0.6; }
.xb-crown { left: 50%; top: 6vh; width: clamp(180px, 26vw, 340px); height: auto; aspect-ratio: 320 / 200; transform: translateX(-50%); }
.xb-crown-stars { animation: xb-blink 3.2s ease-in-out infinite alternate; } .xb-crown-halo { animation: xb-blink 4.4s ease-in-out infinite alternate-reverse; }
.xb-crown-gems { animation: xb-blink 2.4s ease-in-out infinite alternate; }
.xb-dust { left: 0; right: 0; top: -100%; height: 200%; animation: xb-fall 60s linear infinite;
    background: radial-gradient(5px 5px at 20px 30px, #fff6d0, rgba(255, 215, 106, 0.35) 40%, transparent), radial-gradient(2px 2px at 130px 90px, #ffd76a, transparent), radial-gradient(4px 4px at 220px 170px, #fff7da, rgba(255, 215, 106, 0.3) 45%, transparent),
                radial-gradient(2.4px 2.4px at 80px 220px, #ff9be9, transparent), radial-gradient(2.6px 2.6px at 260px 40px, #a6fbff, transparent), radial-gradient(1.6px 1.6px at 170px 240px, #fff1b8, transparent) 0 0 / 300px 260px; }
.xb-dust--2 { animation-duration: 110s; background-size: 440px 380px; opacity: 0.7; }
.xb-sweep { top: -20%; bottom: -20%; left: 0; width: 26vw; background: linear-gradient(100deg, transparent, rgba(255, 228, 160, 0.14), transparent);
    transform: translateX(-40vw) skewX(-12deg); animation: xb-sheen 10s ease-in-out 2s infinite; }
.ape-xbg--legendary::before, .ape-xbg--legendary::after { content: ''; position: absolute; top: 0; bottom: 0; width: 22vw; mix-blend-mode: screen; animation: xb-blink 5s ease-in-out infinite alternate;
    background: radial-gradient(60% 50% at 50% 30%, rgba(255, 215, 106, 0.32), transparent 70%), repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 228, 160, 0.06) 18px 20px); }
.ape-xbg--legendary::before { left: -4vw; } .ape-xbg--legendary::after { right: -4vw; animation-delay: -2.5s;
    background: radial-gradient(60% 50% at 50% 30%, rgba(255, 122, 224, 0.28), transparent 70%), repeating-linear-gradient(90deg, transparent 0 18px, rgba(160, 250, 255, 0.06) 18px 20px); }
@keyframes xb-turn { to { transform: rotate(1turn); } }
@keyframes xb-aurora { from { transform: translateX(-4vw) rotate(-7deg) scaleY(0.85); } to { transform: translateX(4vw) rotate(-3deg) scaleY(1.15); } }
@keyframes xb-fall { to { transform: translateY(50%); } }

@media (max-width: 760px) {
    .xb-leaves { width: 70vw; } .xb-spot { width: 60vw; } .xb-curtain { width: 54px; } .xb-curtain::after { height: 7px; }
    .xb-moon { right: 8vw; top: 6vh; } .xb-smoke { width: 60vw; height: 60vw; margin-left: -30vw; bottom: 30vh; } .xb-mount { height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
    .ape-xbg *, .ape-xbg *::before, .ape-xbg *::after, body.ape.ape-posts--glow .ape-post-card::before { animation: none !important; }
    .xb-shoot, .xb-sheen, .xb-sweep, .xb-smoke { display: none; }
}