/* 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', -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, sans-serif;
}
/* 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; }

* { 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.72rem; 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.74rem; 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.68rem; 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.72rem; 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.74rem; 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.7rem; 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.7rem; 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.74rem; 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.68rem; 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.68rem; 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.74rem; 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.68rem; 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.72rem; 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.74rem; 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.74rem; 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.74rem; 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.64rem; 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.74rem/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.64rem/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; }

/* 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.66rem; }
    .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.72rem; 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.7rem; 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.7rem; 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.68rem; 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.7rem; 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.74rem; 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.72rem; 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.62rem; font-weight: 700; line-height: 1.5; color: #fff; background: #5865f2; }
.ape-dc-bot time { font-size: 0.74rem; 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.74rem; 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.72rem; 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.74rem; 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; } }