/* Legacy — the themed Age button (js/agebtn.js draws the living orb on .ab-cv). Halloween keeps its pumpkin. */
#ageBtn .ab-cv { display: none; }
html:root[data-ab] #ageBtn { background: #05040a; border-color: var(--surface); overflow: visible; isolation: isolate;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ab-a) 70%, transparent), 0 0 18px color-mix(in srgb, var(--ab-a) 55%, transparent), 0 8px 18px rgb(0 0 0 / .45); animation: abBreath 3.2s ease-in-out infinite; }
html:root[data-ab] #ageBtn .ab-cv { display: block; position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 0; pointer-events: none; }
html:root[data-ab] #ageBtn .ab-skin, html:root[data-ab] #ageBtn .pk { display: none !important; }
/* a turning ring of the theme's two colors */
html:root[data-ab] #ageBtn::before { content: ''; display: block; position: absolute; inset: -9px; border-radius: 50%; z-index: -1; pointer-events: none; opacity: 1;
  background: conic-gradient(from 0deg, var(--ab-a), transparent 22%, var(--ab-b) 45%, transparent 62%, var(--ab-a) 80%, transparent 92%, var(--ab-a));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  animation: spin 5s linear infinite; filter: drop-shadow(0 0 4px var(--ab-a)); }
/* glass: a soft shine on top of the orb */
html:root[data-ab] #ageBtn::after { content: ''; display: block; position: absolute; inset: 0; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 40% at 38% 22%, rgb(255 255 255 / .42), transparent 70%), radial-gradient(circle at 50% 50%, transparent 62%, rgb(0 0 0 / .35)); }
html:root[data-ab] #ageBtn b, html:root[data-ab] #ageBtn span { position: relative; z-index: 2; color: #fff; text-shadow: 0 0 6px var(--ab-b), 0 0 12px var(--ab-a), 0 2px 3px rgb(0 0 0 / .7); }
html:root[data-ab] #ageBtn b { font-size: 30px; }
html:root[data-ab] #ageBtn span { font-size: 10px; letter-spacing: .14em; }
html:root[data-ab] #ageBtn:hover:not(:disabled) { transform: scale(1.07); }
html:root[data-ab] #ageBtn:active:not(:disabled) { transform: scale(.93); }
html:root[data-ab] #ageBtn:disabled { filter: none; opacity: 1; }
html:root[data-ab] #ageBtn:disabled::before { animation-duration: 1s; }
html:root[data-ab] #ageBtn.lost { filter: grayscale(.8); opacity: .5; }
@keyframes abBreath { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ab-a) 90%, transparent), 0 0 28px color-mix(in srgb, var(--ab-a) 75%, transparent), 0 8px 18px rgb(0 0 0 / .45); } }
@media (prefers-reduced-motion: reduce) { html:root[data-ab] #ageBtn, html:root[data-ab] #ageBtn::before { animation: none; } }
/* objects instead of orbs (AB.SHAPED): Phoenix a ball of fire, Desert a pharaoh mask, Fairy a glowing mushroom, Abyss a bubble with a fish, Sky a cloud with rainbows, Moon Garden a lantern, Glitch a glitching key, Eternity a black hole, Empire gold bars. Like the Halloween pumpkin, no
   circle: the canvas is bigger than the button and the flames rise above the bar */
html:root[data-ab-shape] #ageBtn { background: none; border: 0; border-radius: 0; box-shadow: none; animation: none; overflow: visible; }
html:root[data-ab-shape] #ageBtn::before, html:root[data-ab-shape] #ageBtn::after { display: none; }
html:root[data-ab-shape] #ageBtn .ab-cv { inset: auto; left: -30%; top: -46%; width: 160%; height: 160%; border-radius: 0; }
html:root[data-ab-shape] #ageBtn b, html:root[data-ab-shape] #ageBtn span { transform: translateY(6px); }
html:root[data-ab-shape="phoenix"] #ageBtn b, html:root[data-ab-shape="phoenix"] #ageBtn span { color: #5a1400; text-shadow: 0 0 4px #fff2bf, 0 0 8px #ffc233; }
/* the mask keeps its face clear: only AGE, written on the collar */
html:root[data-ab-shape="desert"] #ageBtn b { display: none; }
html:root[data-ab-shape="desert"] #ageBtn span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; transform: none; color: #fff8e0; text-shadow: 0 1px 2px #1d1000, 0 0 5px rgb(20 30 80 / .9); }
html:root[data-ab-shape="fairy"] #ageBtn b, html:root[data-ab-shape="fairy"] #ageBtn span { color: #073b1f; text-shadow: 0 0 4px #eafff2, 0 0 10px #5dffb0; }
html:root[data-ab-shape="fairy"] #ageBtn b, html:root[data-ab-shape="fairy"] #ageBtn span { transform: translateY(10px); }
html:root[data-ab-shape="abyss"] #ageBtn b, html:root[data-ab-shape="abyss"] #ageBtn span { color: #fff; text-shadow: 0 1px 3px #022338, 0 0 8px #3ad4ff; }
html:root[data-ab-shape="sky"] #ageBtn b, html:root[data-ab-shape="sky"] #ageBtn span { color: #2a5bd7; text-shadow: 0 0 4px #fff, 0 0 8px #fff; }
html:root[data-ab-shape="sky"] #ageBtn b, html:root[data-ab-shape="sky"] #ageBtn span { transform: translateY(9px); }
html:root[data-ab-shape="sakura"] #ageBtn b, html:root[data-ab-shape="sakura"] #ageBtn span { color: #ffe08a; text-shadow: 0 1px 2px #5a0000, 0 0 6px #ff3b3b; }
html:root[data-ab-shape="empire"] #ageBtn b, html:root[data-ab-shape="empire"] #ageBtn span { color: #4a3000; text-shadow: 0 0 3px #fff6c8, 0 0 6px #ffe08a; }
html:root[data-ab-shape="eternity"] #ageBtn b, html:root[data-ab-shape="eternity"] #ageBtn span { color: #fff; text-shadow: 0 0 6px #ff5ec4, 0 0 12px #a75eff; }
/* Glitch: the key jitters now and then, its label splits into red and cyan */
html:root[data-ab-shape="matrix"] #ageBtn b, html:root[data-ab-shape="matrix"] #ageBtn span { color: #c8ffe0; font-family: ui-monospace, Consolas, monospace; text-shadow: -1px 0 #ff2a6d, 1px 0 #00e5ff, 0 0 6px #22ff88; animation: abGlitch 2.6s steps(1, end) infinite; }
html:root[data-ab-shape="matrix"] #ageBtn { animation: abJitter 3.4s steps(1, end) infinite; }
@keyframes abGlitch { 0%, 100% { transform: translateY(6px); } 90% { transform: translate(2px, 6px) skewX(-10deg); } 93% { transform: translate(-2px, 5px); } 96% { transform: translateY(6px); } }
@keyframes abJitter { 0%, 100% { translate: 0 0; } 86% { translate: 1px 0; } 88% { translate: -1px 1px; } 90% { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html:root[data-ab-shape="matrix"] #ageBtn, html:root[data-ab-shape="matrix"] #ageBtn b, html:root[data-ab-shape="matrix"] #ageBtn span { animation: none; } }
html:root[data-ab-shape] #ageBtn:hover:not(:disabled) { transform: scale(1.06); }
html:root[data-ab-shape] #ageBtn:active:not(:disabled) { transform: scale(.94); }