/* sitesfx1 (Mortimer, 23-10-2026): /sites. The follow of each card, shown and changed right on it, the "All sites ·
   Following" switch, and the cards coming alive under the pointer with the look of their site (sites-fx.js sets
   .is-hot, --rx/--ry = tilt and --mx/--my = where the pointer is; data-frame = the header style or 'xe', data-fx = the
   particles or the XE element). Only on /sites. Nothing moves under prefers-reduced-motion. */
@property --apx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* The card and its light */
.apx-card { position: relative; height: 100%; border-radius: 20px; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
    transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.apx-card.is-hot { z-index: 4; transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-7px); transition: transform 0.16s ease-out; }
.apx-card--featured { margin-bottom: 22px; border-radius: 22px; }
.apx-card--featured .aps-featured { margin-bottom: 0; }
.apx-card .aps-tile:hover, .apx-card .aps-tile:focus-visible, .apx-card .aps-featured:hover { transform: none; }
.apx-card .aps-tile, .apx-card .aps-featured { transition: border-color 0.3s, box-shadow 0.35s, background 0.35s; }
.apx-card.is-hot .aps-tile, .apx-card.is-hot .aps-featured { border-color: transparent; background: color-mix(in srgb, var(--a1) 6%, rgba(255,255,255,0.04));
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.6), 0 0 70px -10px color-mix(in srgb, var(--a1) 45%, transparent); }
/* the turning ring of the theme's colours */
.apx-card::before { content: ''; position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--apx-a), var(--a1), var(--a2), var(--a3), var(--a1));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    transition: opacity 0.35s; }
.apx-card.is-hot::before { opacity: 1; animation: apx-spin 3.2s linear infinite; }
.apx-card.is-following:not(.is-hot)::before { opacity: 0.55; }
@keyframes apx-spin { to { --apx-a: 360deg; } }
/* the light that follows the pointer */
.apx-card .aps-tile::after, .apx-card .aps-featured::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; border-radius: inherit;
    background: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--a1) 22%, rgba(255,255,255,0.12)), transparent 45%);
    mix-blend-mode: screen; transition: opacity 0.35s; }
.apx-card.is-hot .aps-tile::after, .apx-card.is-hot .aps-featured::after { opacity: 1; }
/* the particles (sites-fx.js): a little larger than the card, so the light can spill out */
.aps-fx { position: absolute; left: -28px; top: -28px; width: calc(100% + 56px); height: calc(100% + 56px); z-index: 3; pointer-events: none; }

/* Banner, avatar and Visit under the pointer */
.apx-card .aps-tile-banner, .apx-card .aps-featured-banner { position: relative; overflow: hidden; }
.apx-card .aps-tile-banner img, .apx-card .aps-featured-banner img { transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.6s; transform-origin: var(--mx) 40%; }
.apx-card.is-hot .aps-tile-banner img, .apx-card.is-hot .aps-featured-banner img { transform: scale(1.09); filter: saturate(1.15) brightness(1.06); }
.aps-av { position: relative; display: inline-block; margin-top: -36px; z-index: 2; transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.aps-av .aps-tile-avatar { display: block; margin: 0; transition: box-shadow 0.4s; }
.apx-card.is-hot .aps-av { transform: translateY(-4px) scale(1.06); }
.apx-card.is-hot .aps-av .aps-tile-avatar { box-shadow: 0 0 0 2px var(--a1), 0 0 26px color-mix(in srgb, var(--a1) 70%, transparent), 0 0 60px color-mix(in srgb, var(--a2) 35%, transparent); }
.aps-featured-body .aps-av { margin-top: 0; }
.apx-card .aps-tile-go { position: relative; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.apx-card .aps-tile-go::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%); transform: translateX(-120%); }
.apx-card.is-hot .aps-tile-go { transform: translateY(-1px); box-shadow: 0 8px 22px color-mix(in srgb, var(--a1) 45%, transparent); }
.apx-card.is-hot .aps-tile-go::after { animation: apx-shine 1.6s ease-in-out 0.15s infinite; }
@keyframes apx-shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
/* the check on the avatar of a site you follow */
.aps-av-check { position: absolute; right: -2px; bottom: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--a1), var(--a2)); border: 3px solid #12052a; box-shadow: 0 4px 12px rgba(0,0,0,0.4); transform: scale(0); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.aps-av-check::before { content: ''; width: 8px; height: 4px; margin-top: -2px; border: solid var(--a-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
.apx-card.is-following .aps-av-check { transform: scale(1); }
.aps-featured-body .aps-av-check { width: 28px; height: 28px; right: 0; bottom: 4px; }

/* The frame of each header style, over the banner */
.aps-frame { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.45s; }
.apx-card.is-hot .aps-frame { opacity: 1; }
/* Cinematic: a sweep of light and a soft letterbox */
[data-frame="cinematic"] .aps-frame { background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent 22%, transparent 78%, rgba(0,0,0,0.5)); }
[data-frame="cinematic"] .aps-frame::before { content: ''; position: absolute; inset: -20% -60%; background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--a3) 35%, rgba(255,255,255,0.35)) 50%, transparent 60%); transform: translateX(-60%); }
[data-frame="cinematic"].is-hot .aps-frame::before { animation: apx-sweep 2.4s ease-in-out infinite; }
@keyframes apx-sweep { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
/* Hologram: scan lines and a foil that shifts with the pointer */
[data-frame="hologram"] .aps-frame { background: repeating-linear-gradient(180deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 4px); }
[data-frame="hologram"] .aps-frame::before { content: ''; position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: 0.55;
    background: linear-gradient(115deg, transparent 20%, #22d3ee 35%, #f0abfc 50%, #facc15 65%, transparent 80%); background-size: 260% 100%; background-position: var(--mx) 0; }
[data-frame="hologram"] .aps-frame::after { content: ''; position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgba(165,243,252,0.28), transparent); }
[data-frame="hologram"].is-hot .aps-frame::after { animation: apx-scan 1.9s linear infinite; }
[data-frame="hologram"].is-hot .aps-tile-banner img, [data-frame="hologram"].is-hot .aps-featured-banner img { filter: saturate(1.3) hue-rotate(-12deg) contrast(1.05); }
@keyframes apx-scan { to { top: 100%; } }
/* Synthwave: a neon grid running towards the horizon and a sunset glow */
[data-frame="synthwave"] .aps-frame { background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--a2) 40%, transparent) 60%, transparent 62%); perspective: 160px; }
[data-frame="synthwave"] .aps-frame::before { content: ''; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform-origin: 50% 100%; transform: rotateX(62deg);
    background: linear-gradient(90deg, color-mix(in srgb, var(--a1) 80%, transparent) 1.5px, transparent 1.5px) 0 0 / 28px 28px,
                linear-gradient(0deg, color-mix(in srgb, var(--a1) 80%, transparent) 1.5px, transparent 1.5px) 0 0 / 28px 28px;
    -webkit-mask: linear-gradient(0deg, #000 20%, transparent); mask: linear-gradient(0deg, #000 20%, transparent); }
[data-frame="synthwave"].is-hot .aps-frame::before { animation: apx-grid 0.9s linear infinite; }
[data-frame="synthwave"] .aps-frame::after { content: ''; position: absolute; left: 50%; top: 18%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; opacity: 0.55;
    background: repeating-linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,0.6) 58% 64%), linear-gradient(180deg, var(--a3), var(--a2)); filter: blur(0.3px); mix-blend-mode: screen; }
@keyframes apx-grid { to { background-position: 0 28px, 0 28px; } }
/* Cosmic: a field of stars that drifts and twinkles over a nebula */
[data-frame="cosmic"] .aps-frame { background: radial-gradient(70% 90% at var(--mx) 30%, color-mix(in srgb, var(--a2) 32%, transparent), transparent 70%); }
[data-frame="cosmic"] .aps-frame::before, [data-frame="cosmic"] .aps-frame::after { content: ''; position: absolute; inset: -40%;
    background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 72%, #fff, transparent), radial-gradient(1.6px 1.6px at 58% 34%, #fff, transparent),
                      radial-gradient(1px 1px at 76% 82%, #fff, transparent), radial-gradient(1.2px 1.2px at 88% 22%, #fff, transparent), radial-gradient(1px 1px at 46% 52%, #fff, transparent);
    background-size: 160px 120px; }
[data-frame="cosmic"] .aps-frame::after { background-size: 230px 170px; opacity: 0.6; }
[data-frame="cosmic"].is-hot .aps-frame::before { animation: apx-stars 14s linear infinite, apx-twinkle 2.2s ease-in-out infinite alternate; }
[data-frame="cosmic"].is-hot .aps-frame::after { animation: apx-stars 22s linear infinite reverse; }
@keyframes apx-stars { to { transform: translate(-80px, 40px); } }
@keyframes apx-twinkle { from { opacity: 0.55; } to { opacity: 1; } }
/* Classic: only a soft lift of the light */
[data-frame="classic"] .aps-frame { background: radial-gradient(80% 120% at var(--mx) 0%, rgba(255,255,255,0.14), transparent 60%); }

/* The XElementia looks: the atmosphere of their element */
[data-frame="xe"] .aps-frame::before, [data-frame="xe"] .aps-frame::after { content: ''; position: absolute; inset: 0; }
[data-fx="xe-news"] .aps-frame { background: radial-gradient(90% 140% at 50% 120%, rgba(56,189,248,0.32), transparent 60%), radial-gradient(60% 90% at 0% 0%, rgba(255,122,61,0.3), transparent 60%), radial-gradient(60% 90% at 100% 0%, rgba(167,139,250,0.32), transparent 60%); }
[data-fx="xe-news"] .aps-frame::before { inset: -60%; background: conic-gradient(from 0deg, rgba(255,122,61,0.22), rgba(56,189,248,0.22), rgba(132,204,22,0.2), rgba(167,139,250,0.22), rgba(226,243,255,0.18), rgba(255,122,61,0.22)); mix-blend-mode: screen; }
[data-fx="xe-news"].is-hot .aps-frame::before { animation: apx-rot 9s linear infinite; }
[data-fx="xe-fire"] .aps-frame { background: linear-gradient(0deg, rgba(255,80,10,0.55), rgba(255,140,40,0.18) 45%, transparent 75%); }
[data-fx="xe-fire"] .aps-frame::before { background: radial-gradient(50% 70% at 30% 110%, rgba(255,200,80,0.55), transparent 70%), radial-gradient(45% 60% at 75% 115%, rgba(255,90,20,0.6), transparent 70%); mix-blend-mode: screen; }
[data-fx="xe-fire"].is-hot .aps-frame::before { animation: apx-flicker 1.3s ease-in-out infinite alternate; }
[data-fx="xe-fire"].is-hot .aps-tile-banner img, [data-fx="xe-fire"].is-hot .aps-featured-banner img { filter: saturate(1.25) contrast(1.06) sepia(0.15); }
[data-fx="xe-water"] .aps-frame { background: linear-gradient(180deg, rgba(14,116,144,0.2), rgba(8,47,73,0.5)); }
[data-fx="xe-water"] .aps-frame::before { inset: -30%; opacity: 0.55; mix-blend-mode: screen;
    background: radial-gradient(14px 8px at 20% 30%, rgba(186,230,253,0.6), transparent), radial-gradient(18px 9px at 60% 55%, rgba(94,234,212,0.5), transparent),
                radial-gradient(12px 7px at 80% 20%, rgba(186,230,253,0.55), transparent), radial-gradient(16px 8px at 40% 80%, rgba(147,197,253,0.5), transparent);
    background-size: 90px 60px; }
[data-fx="xe-water"].is-hot .aps-frame::before { animation: apx-caustic 5s ease-in-out infinite alternate; }
[data-fx="xe-water"].is-hot .aps-tile-banner img, [data-fx="xe-water"].is-hot .aps-featured-banner img { filter: saturate(1.1) hue-rotate(8deg) brightness(1.04); }
[data-fx="xe-air"] .aps-frame { background: linear-gradient(180deg, rgba(240,249,255,0.2), transparent 55%), radial-gradient(70% 100% at var(--mx) 0%, rgba(186,230,253,0.3), transparent 70%); }
[data-fx="xe-air"] .aps-frame::before { inset: 0 -100%; opacity: 0.7;
    background: linear-gradient(90deg, transparent 0 20%, rgba(255,255,255,0.35) 26%, transparent 32%, transparent 60%, rgba(224,242,254,0.3) 66%, transparent 72%);
    -webkit-mask: linear-gradient(180deg, transparent 10%, #000 30%, #000 70%, transparent 90%); mask: linear-gradient(180deg, transparent 10%, #000 30%, #000 70%, transparent 90%); }
[data-fx="xe-air"].is-hot .aps-frame::before { animation: apx-wind 1.6s linear infinite; }
[data-fx="xe-earth"] .aps-frame { background: linear-gradient(0deg, rgba(120,72,20,0.55), rgba(101,163,13,0.14) 50%, transparent 80%); }
[data-fx="xe-earth"] .aps-frame::before { background: radial-gradient(60% 50% at 50% 120%, rgba(212,163,115,0.5), transparent 70%); }
[data-fx="xe-earth"].is-hot .aps-frame::before { animation: apx-quake 2.6s ease-in-out infinite; }
[data-fx="xe-earth"].is-hot .aps-tile-banner img, [data-fx="xe-earth"].is-hot .aps-featured-banner img { filter: saturate(1.1) sepia(0.18) contrast(1.05); }
[data-fx="xe-aether"] .aps-frame { background: radial-gradient(80% 120% at 50% 50%, rgba(192,132,252,0.32), transparent 70%), linear-gradient(180deg, rgba(49,15,94,0.35), rgba(30,10,60,0.45)); }
[data-fx="xe-aether"] .aps-frame::before { inset: -60%; mix-blend-mode: screen; opacity: 0.7;
    background: conic-gradient(from 0deg at 50% 50%, transparent, rgba(240,171,252,0.35), transparent 30%, rgba(129,140,248,0.35), transparent 60%, rgba(233,213,255,0.3), transparent); }
[data-fx="xe-aether"].is-hot .aps-frame::before { animation: apx-rot 7s linear infinite; }
[data-fx="xe-aether"].is-hot .aps-tile-banner img, [data-fx="xe-aether"].is-hot .aps-featured-banner img { filter: saturate(1.2) hue-rotate(-10deg); }
@keyframes apx-rot { to { transform: rotate(360deg); } }
@keyframes apx-flicker { 0% { opacity: 0.65; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.06); } 100% { opacity: 0.8; transform: scaleY(0.97); } }
@keyframes apx-caustic { from { transform: translate(0, 0) scale(1); } to { transform: translate(-30px, 12px) scale(1.15); } }
@keyframes apx-wind { to { transform: translateX(50%); } }
@keyframes apx-quake { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4%); } }
/* an XE card keeps its element's colours on the ring and the glow */
.apx-card[data-fx="xe-fire"], .apx-card[data-fx="xe-fire"] [class*="ape-t-"] { --a1: #ff7a1a; --a2: #ff3b0a; --a3: #ffd27a; }
.apx-card[data-fx="xe-water"], .apx-card[data-fx="xe-water"] [class*="ape-t-"] { --a1: #38bdf8; --a2: #2dd4bf; --a3: #e0f7ff; }
.apx-card[data-fx="xe-air"], .apx-card[data-fx="xe-air"] [class*="ape-t-"] { --a1: #bae6fd; --a2: #e0f2fe; --a3: #7dd3fc; }
.apx-card[data-fx="xe-earth"], .apx-card[data-fx="xe-earth"] [class*="ape-t-"] { --a1: #d4a373; --a2: #84cc16; --a3: #a16207; }
.apx-card[data-fx="xe-aether"], .apx-card[data-fx="xe-aether"] [class*="ape-t-"] { --a1: #c084fc; --a2: #818cf8; --a3: #f0abfc; }
.apx-card[data-fx="xe-news"], .apx-card[data-fx="xe-news"] [class*="ape-t-"] { --a1: #ff7a3d; --a2: #38bdf8; --a3: #a78bfa; }
.apx-card[data-frame="xe"], .apx-card[data-frame="xe"] [class*="ape-t-"] { --a-ink: #0b0618; }

/* Follow on the card */
.apf { position: absolute; top: 10px; right: 10px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 6px; border-radius: 999px;
    font: inherit; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.01em; color: #fff; cursor: pointer; white-space: nowrap;
    background: rgba(12, 5, 28, 0.58); border: 1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.25s; }
.apf:hover { border-color: color-mix(in srgb, var(--a1) 75%, #fff); background: rgba(12, 5, 28, 0.75); box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 18px color-mix(in srgb, var(--a1) 40%, transparent); }
.apf:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; }
.apf-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--a-ink); background: linear-gradient(135deg, var(--a1), var(--a2)); transition: background 0.25s, color 0.25s, transform 0.35s; }
.apf-ic svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.apf-plus { transform-origin: 10px 10px; transition: transform 0.3s; }
.apf-check { stroke-dasharray: 20; stroke-dashoffset: 20; opacity: 0; transition: stroke-dashoffset 0.4s 0.05s, opacity 0.15s; }
.apf-l--on, .apf-l--un { display: none; }
.apf.is-on { color: var(--a-ink); border-color: transparent; background: linear-gradient(135deg, var(--a1), var(--a2)); box-shadow: 0 6px 20px color-mix(in srgb, var(--a1) 45%, rgba(0,0,0,0.35)); }
.apf.is-on .apf-ic { color: #fff; background: rgba(0,0,0,0.28); }
.apf.is-on .apf-plus { opacity: 0; transform: rotate(45deg) scale(0.6); }
.apf.is-on .apf-check { stroke-dashoffset: 0; opacity: 1; }
.apf.is-on .apf-l--off { display: none; }
.apf.is-on .apf-l--on { display: inline; }
/* over a site you follow: "Unfollow", and the + turns into × */
.apf.is-on:not(.is-fresh):hover { color: #fecaca; background: rgba(40, 6, 14, 0.78); border-color: rgba(248,113,113,0.65); box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 18px rgba(239,68,68,0.3); }
.apf.is-on:not(.is-fresh):hover .apf-ic { color: #fff; background: rgba(239,68,68,0.85); }
.apf.is-on:not(.is-fresh):hover .apf-plus { opacity: 1; transform: rotate(45deg); }
.apf.is-on:not(.is-fresh):hover .apf-check { opacity: 0; }
.apf.is-on:not(.is-fresh):hover .apf-l--on { display: none; }
.apf.is-on:not(.is-fresh):hover .apf-l--un { display: inline; }
.apf.is-busy { pointer-events: none; }
.apf.is-busy .apf-ic { animation: apx-busy 0.8s ease-in-out infinite; }
@keyframes apx-busy { 50% { transform: scale(0.8); opacity: 0.6; } }
.apf.is-pop { animation: apx-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.apf.is-pop::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--a1); animation: apx-shock 0.7s ease-out forwards; pointer-events: none; }
.apf.is-drop { animation: apx-drop 0.4s ease-out; }
@keyframes apx-pop { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes apx-shock { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.7, 2.1); } }
@keyframes apx-drop { 40% { transform: scale(0.9); } 100% { transform: scale(1); } }
.apf--own { cursor: default; padding: 0 13px 0 8px; color: #fde68a; border-color: rgba(250,204,21,0.45); }
.apf--own:hover { border-color: rgba(250,204,21,0.7); box-shadow: 0 6px 18px rgba(0,0,0,0.35); background: rgba(12, 5, 28, 0.58); }
.apf--own .apf-ic { width: auto; height: auto; background: none; color: #facc15; font-size: 0.9rem; }
.apx-card--featured .apf { top: 14px; right: 14px; height: 36px; font-size: 0.84rem; padding-right: 15px; }
.apx-card--featured .apf-ic { width: 25px; height: 25px; }

/* All sites · Following */
.apf-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.apf-chip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 0.86rem; font-weight: 800; color: #cbd5e1; cursor: pointer;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line); transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s; }
.apf-chip b { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 0.74rem; text-align: center; color: #fff; background: rgba(255,255,255,0.1); font-variant-numeric: tabular-nums; }
.apf-chip:hover { color: #fff; border-color: var(--line-strong); }
.apf-chip.is-on { color: #fff; border-color: rgba(255,255,255,0.28); background: linear-gradient(135deg, rgba(249,115,22,0.22), rgba(0,221,235,0.16)); box-shadow: 0 6px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
.apf-chip.is-on b { color: #12052a; background: linear-gradient(135deg, var(--orange), var(--cyan)); }
.apf-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.apf-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--cyan)); box-shadow: 0 0 10px rgba(0,221,235,0.6); }
.apf-chip.is-on .apf-chip-dot { animation: apx-dot 1.8s ease-in-out infinite; }
@keyframes apx-dot { 50% { box-shadow: 0 0 0 5px rgba(0,221,235,0.12), 0 0 14px rgba(0,221,235,0.8); } }
.apf-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 20px; border-radius: 20px; text-align: center; border: 1px dashed var(--line-strong); background: rgba(255,255,255,0.025); }
.apf-empty[hidden] { display: none; }
.apf-empty b { font-size: 1.12rem; font-weight: 900; }
.apf-empty > span:not(.apf-empty-mark) { max-width: 440px; color: var(--muted); }
.apf-empty i { font-style: normal; font-weight: 800; color: #fff; }
.apf-empty .btn { margin-top: 6px; }
.apf-empty-mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; color: #12052a; background: linear-gradient(135deg, var(--orange), var(--cyan)); box-shadow: 0 0 30px rgba(0,221,235,0.3); }
.apf-empty-mark svg { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

@media (max-width: 600px) {
    .apf { height: 34px; top: 8px; right: 8px; }
    .apf-chip { flex: 1 1 0; justify-content: center; }
    .apx-card.is-hot { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .apx-card, .apx-card.is-hot, .aps-av, .apx-card .aps-tile-banner img, .apf, .apf-ic, .apf-plus, .apf-check, .aps-av-check { transition: none; transform: none; }
    .apx-card:hover::before { opacity: 1; }
    /* sotwfx1: the ✓ on the avatar is shown by its size, so it keeps it here (it was on every card, followed or not) */
    .aps-av-check { transform: scale(0); }
    .apx-card.is-following .aps-av-check { transform: scale(1); }
    .apf.is-pop, .apf.is-pop::after, .apf.is-drop, .apf-chip.is-on .apf-chip-dot { animation: none; }
    .apf.is-pop::after { display: none; }
    .apx-card.is-following .aps-av-check { transform: scale(1); }
}

/* the card's inside: Visit always at the bottom, so the cards of a row line up whatever they say */
.apx-card .aps-tile { display: flex; flex-direction: column; align-items: center; }
.apx-card .aps-tile-banner { flex-shrink: 0; }
.apx-card .aps-tile-text { width: 100%; margin-bottom: 14px; }
.apx-card .aps-tile-go { margin-top: auto; }
.apx-card .aps-tile-meta span { display: inline; -webkit-line-clamp: unset; font-size: inherit; color: inherit; overflow: visible; }
.apx-card .aps-tile-meta [hidden], .apx-card .aps-tile-meta[hidden] { display: none; }

/* sitesfx2 (Mortimer, 23-10-2026: «las labels Featured site debería sale arriba en la izquierda, justo al lado opuesto pero
   misma altura que la label following»): the Featured tag sits top left, the same height and line as the follow button */
.apx-card--featured .aps-featured-tag { position: absolute; top: 13px; left: 13px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 15px;
    font-size: 0.84rem; letter-spacing: 0.01em; box-shadow: 0 6px 20px color-mix(in srgb, var(--a1) 40%, rgba(0,0,0,0.35)); }

/* sitesxp1 (Mortimer, 25-10-2026: «la label del Lv N … da a entender que ese nivel es del site y no del usuario»): the level
   no longer sits next to the site's address. It goes with the owner: their picture inside an Ape XP ring (progress to the
   next level, in their rank's colour, as in the menu), «by Name» and the level badge, all in one chip (app._site_owner). */
.apo { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; margin-top: 4px; padding: 3px 4px 3px 3px; border-radius: 999px;
    font-style: normal; font-size: 0.76rem; font-weight: 700; line-height: 1; color: #cbd5e1; cursor: default;
    background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); justify-self: center; }
.apo--xp { background: color-mix(in srgb, var(--xp-c) 7%, rgba(255, 255, 255, 0.03)); border-color: color-mix(in srgb, var(--xp-c) 26%, transparent); }
.apo i { font-style: normal; }
.apo-ring { position: relative; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14); }
.apo--xp .apo-ring { background: conic-gradient(var(--xp-c) calc(var(--apo-p, 0) * 1%), rgba(255, 255, 255, 0.13) 0); }
.apo-ring img { width: 22px; height: 22px; margin: 0; padding: 0; border-radius: 50%; border: 1.5px solid #12052a; object-fit: cover; box-shadow: none; display: block; }
.apo-by { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted, #94a3b8); font-weight: 600; }
.apo-by b { color: #f1f5f9; font-size: inherit; font-weight: 800; }
.apo-lv { flex: none; padding: 4px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
    color: var(--xp-c); background: #0d0920; border: 1px solid color-mix(in srgb, var(--xp-c) 70%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--xp-c) 35%, transparent); }
.apo:not(.apo--xp) { padding-right: 11px; }
.apx-card:hover .apo--xp .apo-ring, .apx-card.is-hot .apo--xp .apo-ring { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--xp-c) 60%, transparent)); }
/* basc.css shortens every span of a card's text to two lines: not this chip */
.aps-tile-text .apo, .aps-featured-body .apo { display: inline-flex; -webkit-line-clamp: unset; overflow: visible; font-size: 0.76rem; color: #cbd5e1; }
.aps-featured-body .apo { justify-self: start; margin-top: 6px; }
@media (max-width: 600px) { .aps-featured-body .apo { justify-self: center; } }
/* a long owner name is cut with … instead of widening the card (the text column never grows past the card) */
.apx-card .aps-tile-text, .aps-featured-body > span { grid-template-columns: minmax(0, 1fr); }
.apo { min-width: 0; }
/* sotwby1 (Mortimer, 25-10-2026: «debería salir bien la parte que dice by usuario, dentro de una bonita label, como sale en
   las cards de los sites»): the same owner chip in the Site of the Week block, a size up and on glass over the banner. */
.sotw-text .apo { justify-self: start; margin-top: 6px; padding: 4px 5px 4px 4px; gap: 9px; font-size: 0.86rem; color: #e2e8f0;
    background: rgba(10, 4, 24, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sotw-text .apo--xp { background: color-mix(in srgb, var(--xp-c) 12%, rgba(10, 4, 24, 0.6)); border-color: color-mix(in srgb, var(--xp-c) 40%, transparent); }
.sotw-text .apo:not(.apo--xp) { padding-right: 13px; }
.sotw-text .apo-ring { width: 32px; height: 32px; }
.sotw-text .apo-ring img { width: 27px; height: 27px; }
.sotw-text .apo-by { color: #cbd5e1; }
.sotw-text .apo-lv { font-size: 0.74rem; padding: 5px 10px; }
.sotw:hover .apo--xp .apo-ring { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--xp-c) 60%, transparent)); }

/* sitespage1 (Mortimer, 25-10-2026: «un paginador … en computer 12 cards … hazlo profesional»): one page of cards at a time
   (sites-directory.js). Under the grid: «Showing 1–12 of 40 sites», Prev · 1 … 4 5 6 … 12 · Next, and a thin line of how far
   you are in the list. On a phone: Prev · 2 / 5 · Next, the numbers would not fit. */
.apg { display: grid; justify-items: center; gap: 12px; margin: 26px auto 6px; }
.apg[hidden] { display: none; }
.apg-count { margin: 0; font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.apg-count b { color: #f1f5f9; font-weight: 800; }
.apg-row { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,0.035);
    border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06); }
.apg-pages { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.apg-num, .apg-step { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 999px; font: inherit;
    font-weight: 800; color: #cbd5e1; background: transparent; border: 1px solid transparent; cursor: pointer; font-variant-numeric: tabular-nums;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s; }
.apg-num { min-width: 40px; padding: 0 6px; font-size: 0.9rem; }
.apg-step { padding: 0 16px; font-size: 0.86rem; }
.apg-step svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.apg-num:hover, .apg-step:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.07); border-color: var(--line-strong); }
.apg-num.is-on { color: #12052a; cursor: default; background: linear-gradient(135deg, var(--orange), var(--cyan));
    box-shadow: 0 6px 18px rgba(0,221,235,0.25), 0 0 0 1px rgba(255,255,255,0.18) inset; }
.apg-step:disabled { opacity: 0.35; cursor: default; }
.apg-num:focus-visible, .apg-step:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.apg-gap { min-width: 22px; text-align: center; color: var(--muted); font-weight: 800; letter-spacing: 0.1em; user-select: none; }
.apg-of { display: none; min-width: 64px; text-align: center; font-weight: 800; color: #f1f5f9; font-variant-numeric: tabular-nums; }
.apg-bar { display: block; width: min(260px, 70%); height: 3px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,0.08); }
.apg-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--cyan));
    transition: width 0.45s cubic-bezier(.2,.8,.2,1); }
/* the new page comes in softly */
.aps-grid.is-paging > li:not([hidden]) { animation: apg-in 0.45s cubic-bezier(.2,.8,.2,1) both; }
.aps-grid.is-paging > li:not([hidden]) { animation-delay: calc(var(--apg-i, 0) * 35ms); }
@keyframes apg-in { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 600px) {
    .apg-pages { display: none; }
    .apg-of { display: block; }
    .apg-row { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .aps-grid.is-paging > li:not([hidden]) { animation: none; }
    .apg-bar i, .apg-num, .apg-step { transition: none; }
}

/* sotwfx1 (Mortimer, 26-10-2026: «aumentarles y añadirle efectos cuando se le hace over a la card de SOTW … extremadamente
   COOL, piensa que debe ser la más importante, más que las de featured site»): the Site of the Week, bigger than the
   Featured site, with the winner on a gold medal (laurel, crown, rays, «#1 this week») and a gold title. Under the pointer
   (sites-fx.js sets .is-hot, --rx/--ry = tilt, --px/--py = -1…1 and --mx/--my = where the pointer is) it tilts, the banner
   moves behind it, a gold light and a foil sweep cross it, the ring runs faster, the medal rises, the numbers light up one
   by one and gold sparkles and a confetti pop come out of it (canvas .sotw-fx). Nothing follows the pointer. On a phone it
   plays while it is on screen. Under prefers-reduced-motion nothing moves (a still gold glow on hover only). */
@property --sotw-ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sotw-stage { position: relative; z-index: 1; margin-bottom: 18px; --rx: 0deg; --ry: 0deg; --px: 0; --py: 0; --mx: 60%; --my: 40%;
    transform: perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sotw-stage.is-hot { z-index: 5; transform: perspective(1600px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); transition: transform 0.18s ease-out; }
/* the gold halo under the card: breathes slowly, flares under the pointer */
.sotw-stage::before { content: ''; position: absolute; inset: 6% 3% -4%; z-index: -1; border-radius: 40px; pointer-events: none; filter: blur(46px); opacity: 0.5;
    background: radial-gradient(60% 70% at 70% 50%, rgba(251,191,36,0.55), transparent 70%), radial-gradient(50% 80% at 20% 60%, color-mix(in srgb, var(--a1) 60%, transparent), transparent 70%);
    animation: sotw-breathe 5s ease-in-out infinite; transition: opacity 0.5s; }
.sotw-stage.is-hot::before { opacity: 1; }
@keyframes sotw-breathe { 50% { transform: scale(1.04); opacity: 0.75; } }
.sotw-fx { position: absolute; left: -40px; top: -40px; width: calc(100% + 80px); height: calc(100% + 80px); z-index: 6; pointer-events: none; }

.sotw-stage .sotw { margin-bottom: 0; border-radius: 30px; border-color: rgba(251,191,36,0.7);
    box-shadow: 0 34px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(251,191,36,0.2) inset, 0 0 80px rgba(251,191,36,0.2);
    transition: box-shadow 0.45s, border-color 0.45s; }
.sotw-stage.is-hot .sotw { border-color: #fde68a; box-shadow: 0 46px 100px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(253,230,138,0.45) inset, 0 0 120px rgba(251,191,36,0.38); }
.sotw-stage .sotw::before { padding: 2px; }
/* the second ring: full gold, running fast while the card is looked at */
.sotw-stage .sotw::after { content: ''; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 2px; pointer-events: none; opacity: 0;
    background: conic-gradient(from var(--sotw-ring), #fde68a, var(--a1), #fbbf24, #fff7cc, var(--a2), #fde68a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    transition: opacity 0.4s; }
.sotw-stage.is-hot .sotw::after { opacity: 1; animation: sotw-ring 2.4s linear infinite; }
@keyframes sotw-ring { to { --sotw-ring: 360deg; } }

/* the banner behind: a little brighter and moving against the pointer */
.sotw-stage .sotw-bg img { opacity: 0.62; transform: scale(1.06); transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s, filter 0.6s; }
.sotw-stage.is-hot .sotw-bg img { opacity: 0.78; filter: saturate(1.25); transform: scale(1.12) translate(calc(var(--px) * -14px), calc(var(--py) * -9px)); transition-duration: 0.35s; }
.sotw-stage .sotw-bg::after { background: linear-gradient(90deg, rgba(8,3,20,0.95) 0%, rgba(8,3,20,0.8) 42%, rgba(8,3,20,0.3) 72%, rgba(8,3,20,0.55) 100%),
    linear-gradient(0deg, rgba(8,3,20,0.92), transparent 50%); }
.sotw-stage .sotw-rays { top: -30%; right: -6%; width: 62%; opacity: 0.6; transition: opacity 0.5s; }
.sotw-stage.is-hot .sotw-rays { opacity: 1; }
/* the light where the pointer is, and a gold foil sweeping across */
.sotw-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity 0.4s; mix-blend-mode: screen;
    background: radial-gradient(480px circle at var(--mx) var(--my), rgba(253,230,138,0.13), rgba(251,191,36,0.04) 40%, transparent 62%); }
.sotw-glare::after { content: ''; position: absolute; inset: -30% -40%; transform: translateX(-70%) rotate(0.001deg);
    background: linear-gradient(105deg, transparent 42%, rgba(255,247,204,0.0) 44%, rgba(255,247,204,0.2) 50%, rgba(251,191,36,0.08) 54%, transparent 58%); }
.sotw-stage.is-hot .sotw-glare { opacity: 1; }
.sotw-stage.is-hot .sotw-glare::after { animation: sotw-sweep 3.2s cubic-bezier(0.45, 0, 0.2, 1) 0.1s infinite; }
@keyframes sotw-sweep { 0% { transform: translateX(-70%); } 55%, 100% { transform: translateX(70%); } }

/* the layout: the copy on the left, the medal on the right */
.sotw-stage .sotw-body { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px; padding: 40px 48px 18px; min-height: 420px; position: relative; z-index: 4; }
.sotw-copy { display: grid; gap: 20px; min-width: 0; }
.sotw-stage .sotw-ribbon { position: relative; overflow: hidden; padding: 8px 18px 8px 9px; font-size: 0.84rem; gap: 10px;
    box-shadow: 0 10px 30px rgba(245,158,11,0.45), 0 0 0 1px rgba(255,255,255,0.35) inset; }
.sotw-stage .sotw-ribbon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%);
    transform: translateX(-120%); animation: sotw-glint 5s ease-in-out 1s infinite; }
@keyframes sotw-glint { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
.sotw-stage .sotw-cup { width: 28px; height: 28px; font-size: 1rem; }
.sotw-stage.is-hot .sotw-cup { animation: sotw-cup 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes sotw-cup { 0% { transform: rotate(0); } 25% { transform: rotate(-16deg) scale(1.2); } 55% { transform: rotate(12deg) scale(1.15); } 100% { transform: rotate(0); } }
.sotw-stage .sotw-text { gap: 6px; }
.sotw-stage .sotw-text h2 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.03em; }
.sotw-stage .sotw-text h2 a { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 260% 100%; background-position: 100% 0;
    background-image: linear-gradient(100deg, #ffffff 0%, #ffffff 34%, #fff3b0 42%, #fbbf24 50%, #fff3b0 58%, #ffffff 66%, #ffffff 100%);
    filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45)); animation: sotw-foil 7s ease-in-out infinite; transition: filter 0.4s; }
.sotw-stage .sotw-text h2 a:hover { color: transparent; }
.sotw-stage.is-hot .sotw-text h2 a { filter: drop-shadow(0 0 22px rgba(251,191,36,0.45)) drop-shadow(0 4px 18px rgba(0,0,0,0.45)); }
@keyframes sotw-foil { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
.sotw-stage .sotw-text p { font-size: 1.12rem; }
.sotw-stage .sotw-text small { font-size: 0.9rem; }

/* last week's numbers: big gold tiles that light up one after another */
.sotw-stage .sotw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 12px; }
.sotw-stage .sotw-stats li { position: relative; overflow: hidden; display: grid; gap: 2px; align-content: start; padding: 12px 18px 13px; border-radius: 18px;
    background: linear-gradient(160deg, rgba(251,191,36,0.13), rgba(0,0,0,0.42) 60%); border-color: rgba(251,191,36,0.32);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.35s, box-shadow 0.35s; }
.sotw-stage .sotw-stats b { font-size: 2rem; line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 0 22px rgba(251,191,36,0.35); }
.sotw-stage .sotw-stats span { font-size: 0.8rem; color: #e2e8f0; }
.sotw-stage .sotw-stats li::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,247,204,0.22) 50%, transparent 65%); transform: translateX(-120%); }
.sotw-stage.is-hot .sotw-stats li { transform: translateY(-4px); border-color: rgba(253,230,138,0.75); box-shadow: 0 14px 30px -10px rgba(245,158,11,0.55); }
.sotw-stage.is-hot .sotw-stats li::after { animation: sotw-tile 0.9s ease-out both; }
.sotw-stage.is-hot .sotw-stats li:nth-child(2), .sotw-stage.is-hot .sotw-stats li:nth-child(2)::after { transition-delay: 0.08s; animation-delay: 0.12s; }
.sotw-stage.is-hot .sotw-stats li:nth-child(3), .sotw-stage.is-hot .sotw-stats li:nth-child(3)::after { transition-delay: 0.16s; animation-delay: 0.24s; }
@keyframes sotw-tile { to { transform: translateX(120%); } }

/* Visit: bigger, gold, with a shine that runs while the card is looked at */
.sotw-stage .sotw-acts { gap: 14px; }
.sotw-stage .sotw-acts .btn-primary { position: relative; overflow: hidden; height: 54px; padding: 0 30px; display: inline-flex; align-items: center; font-size: 1.06rem; border-radius: 16px;
    box-shadow: 0 14px 34px rgba(245,158,11,0.45), 0 0 0 1px rgba(255,255,255,0.4) inset; transition: transform 0.3s, box-shadow 0.3s; }
.sotw-stage .sotw-acts .btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%); transform: translateX(-120%); }
.sotw-stage.is-hot .sotw-acts .btn-primary { box-shadow: 0 18px 44px rgba(245,158,11,0.6), 0 0 0 1px rgba(255,255,255,0.5) inset; }
.sotw-stage.is-hot .sotw-acts .btn-primary::after { animation: apx-shine 1.8s ease-in-out 0.2s infinite; }
.sotw-stage .sotw-acts .btn-primary:hover { transform: translateY(-2px); }
.sotw-stage .sotw-acts .apf { height: 54px; border-radius: 16px; padding: 0 20px 0 12px; font-size: 0.95rem; }
.sotw-stage .sotw-how { position: relative; z-index: 4; padding: 0 48px 22px; }

/* the medal: laurel, the winner's picture in a running gold ring, the crown and the plaque */
.sotw-medal { position: relative; display: grid; place-items: center; width: 330px; aspect-ratio: 1; margin: -10px 0 -14px;
    transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px)); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sotw-stage.is-hot .sotw-medal { transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px)) scale(1.04); transition-duration: 0.3s; }
.sotw-medal-rays { position: absolute; inset: -22%; border-radius: 50%; pointer-events: none; opacity: 0.75;
    background: repeating-conic-gradient(from 0deg, rgba(253,230,138,0.3) 0 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 75%); mask: radial-gradient(closest-side, #000 30%, transparent 75%);
    animation: sotw-spin 40s linear infinite; transition: opacity 0.5s; }
.sotw-medal::before { content: ''; position: absolute; inset: 2%; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(251,191,36,0.5), rgba(10,4,24,0.72) 58%, rgba(10,4,24,0.45) 78%, transparent); filter: blur(12px); transition: opacity 0.5s, transform 0.5s; }
.sotw-stage.is-hot .sotw-medal-rays { opacity: 1; }
.sotw-stage.is-hot .sotw-medal::before { transform: scale(1.15); }
.sotw-laurel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 0 10px rgba(251,191,36,0.3)); transition: filter 0.4s; }
.sotw-stage.is-hot .sotw-laurel { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 0 16px rgba(251,191,36,0.75)) brightness(1.12); }
.sotw-stage .sotw-av { position: relative; padding: 6px; border-radius: 50%; background: conic-gradient(from var(--sotw-ring), #fff3b0, #f59e0b, var(--a1), #fde68a, #b45309, #fff3b0);
    box-shadow: 0 0 0 2px rgba(28,16,2,0.6), 0 0 46px rgba(251,191,36,0.5), 0 18px 40px rgba(0,0,0,0.55); animation: sotw-ring 9s linear infinite; }
.sotw-stage.is-hot .sotw-av { animation-duration: 2.6s; box-shadow: 0 0 0 2px rgba(28,16,2,0.6), 0 0 70px rgba(251,191,36,0.8), 0 22px 50px rgba(0,0,0,0.6); }
.sotw-stage .sotw-av img { display: block; width: 196px; height: 196px; border-width: 4px; }
.sotw-crown { position: absolute; top: 2px; left: 50%; width: 84px; margin-left: -42px; transform: rotate(-9deg); transform-origin: 50% 100%;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)) drop-shadow(0 0 10px rgba(251,191,36,0.45)); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s; }
.sotw-stage.is-hot .sotw-crown { transform: translateY(-8px) rotate(0deg) scale(1.08); filter: drop-shadow(0 10px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(253,230,138,0.85)); }
.sotw-plaque { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 6px 16px; border-radius: 999px;
    font-size: 0.74rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: #1c1002;
    background: linear-gradient(135deg, #fff3b0, #fbbf24 45%, #f59e0b); box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.45) inset, 0 0 0 3px rgba(28,16,2,0.55); }

@media (max-width: 960px) {
    .sotw-stage .sotw-body { padding: 30px 30px 14px; gap: 20px 24px; }
    .sotw-medal { width: 230px; }
    .sotw-stage .sotw-av img { width: 138px; height: 138px; }
    .sotw-crown { width: 62px; margin-left: -31px; top: 2px; }
    .sotw-stage .sotw-how { padding: 0 30px 20px; }
    .sotw-stage .sotw-stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
    .sotw-stage .sotw-stats li { padding: 12px 14px; }
}
@media (max-width: 720px) {
    /* one column: the medal on top, in the middle */
    .sotw-stage .sotw-body { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 22px 18px 12px; gap: 6px; }
    .sotw-medal { order: -1; width: 220px; margin: 0 0 4px; }
    .sotw-copy { justify-items: center; gap: 16px; width: 100%; }
    .sotw-stage .sotw-ribbon { order: -2; font-size: 0.7rem; letter-spacing: 0.1em; padding: 7px 14px 7px 8px; }
    .sotw-stage .sotw-text { justify-items: center; }
    .sotw-stage .sotw-text .apo { justify-self: center; }
    .sotw-stage .sotw-text h2 { font-size: clamp(2.1rem, 10vw, 2.8rem); }
    .sotw-stage .sotw-text p { font-size: 1rem; }
    .sotw-stage .sotw-stats { width: 100%; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
    .sotw-stage .sotw-stats li { flex: none; padding: 10px 8px; justify-items: center; text-align: center; }
    .sotw-stage .sotw-stats b { font-size: 1.6rem; }
    .sotw-stage .sotw-stats span { font-size: 0.7rem; line-height: 1.25; }
    .sotw-stage .sotw-acts { width: 100%; flex-wrap: nowrap; }
    .sotw-stage .sotw-acts .btn-primary { flex: 1 1 auto; justify-content: center; height: 52px; padding: 0 16px; }
    .sotw-stage .sotw-acts .apf { flex: none; height: 52px; }
    .sotw-stage .sotw-how { padding: 0 18px 18px; text-align: center; font-size: 0.74rem; }
    .sotw-stage .sotw-bg::after { background: linear-gradient(180deg, rgba(8,3,20,0.5), rgba(8,3,20,0.86) 42%, rgba(8,3,20,0.95)); }
    .sotw-stage .sotw-rays { top: -12%; right: auto; left: 50%; width: 130%; transform-origin: 50% 50%; margin-left: -65%; }
}
@media (prefers-reduced-motion: reduce) {
    .sotw-stage, .sotw-stage::before, .sotw-stage .sotw-ribbon::after, .sotw-stage .sotw-text h2 a, .sotw-medal-rays, .sotw-stage .sotw-av { animation: none; transition: none; }
    .sotw-stage, .sotw-medal { transform: none; }
    .sotw-stage:hover .sotw { border-color: #fde68a; box-shadow: 0 34px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(253,230,138,0.45) inset, 0 0 110px rgba(251,191,36,0.35); }
}