/* Legacy — the Sapphire shop, upgraded (sapphire-luxe.js). Loads after sapphire.css.
   Diary styles grow with the price: Basic paper is still, Shimmer and Glow add a soft fade of light, Living ones move,
   the two Masterpieces (Sapphire codex, Royal decree) are illuminated pages. Only the newest three pages animate,
   so a long diary stays smooth on phones. */

/* ---------- diary: every style ---------- */
.modal.sp-dy .diary-e, .sp-dyp.sp-dy { position: relative; overflow: hidden; isolation: isolate; }
.modal.sp-dy .diary-e h5 { position: relative; z-index: 1; }
.modal.sp-dy .diary-e p { position: relative; z-index: 1; }

/* Basic */
.sp-dy-note, .modal.sp-dy-note .diary-e { background-image: linear-gradient(90deg, transparent 22px, rgb(220 38 38 / .35) 22px 23px, transparent 23px), repeating-linear-gradient(180deg, transparent 0 21px, rgb(30 58 138 / .16) 21px 22px); padding-left: 30px; }
.sp-dy-parch, .modal.sp-dy-parch .diary-e { background-image: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgb(120 70 10 / .28) 100%); box-shadow: inset 0 0 22px rgb(120 80 20 / .35); }

/* Shimmer: a slow fade of light */
.sp-dy-rose, .modal.sp-dy-rose .diary-e { background-image: radial-gradient(60% 80% at 100% 0%, rgb(255 182 206 / .55), transparent 70%), linear-gradient(180deg, #fff6fa, #ffe6ef); }
.modal.sp-dy-rose .diary-e::after, .sp-dyp.sp-dy-rose::after { content: '🌹'; position: absolute; right: 8px; bottom: 4px; font-size: 26px; opacity: .22; z-index: 0; }
.modal.sp-dy-rose .diary-e:nth-child(-n+3)::after, .sp-dyp.sp-dy-rose::after { animation: lxBreathe 4.5s ease-in-out infinite; }
.sp-dy-type, .modal.sp-dy-type .diary-e { background-image: radial-gradient(circle at 6px 50%, rgb(0 0 0 / .12) 2.5px, transparent 3px); background-size: 100% 18px; background-repeat: repeat-y; padding-left: 20px; }
.modal.sp-dy-type .diary-e p, .sp-dyp.sp-dy-type small { text-shadow: .4px .3px 0 rgb(0 0 0 / .35); }
.modal.sp-dy-type .diary-e:nth-child(-n+3) h5::after { content: '▌'; margin-left: 2px; animation: lxCaret 1s steps(1, end) infinite; }

/* Glow: moonlight and stitched leather, gently alive */
.sp-dy-night, .modal.sp-dy-night .diary-e { background-image: radial-gradient(70% 60% at 85% 10%, rgb(203 213 255 / .22), transparent 70%); box-shadow: inset 0 0 0 1px rgb(203 213 255 / .18); }
.modal.sp-dy-night .diary-e:nth-child(-n+3), .sp-dyp.sp-dy-night { animation: lxMoon 6s ease-in-out infinite; }
.modal.sp-dy-night .diary-e p { text-shadow: 0 0 6px rgb(203 213 255 / .45); }
.sp-dy-leather, .modal.sp-dy-leather .diary-e { background-image: radial-gradient(circle at 30% 20%, rgb(255 255 255 / .06), transparent 60%), repeating-radial-gradient(circle at 50% 50%, rgb(0 0 0 / .05) 0 2px, transparent 2px 5px); border: 0; outline: 2px dashed rgb(243 220 176 / .45); outline-offset: -7px; }
.modal.sp-dy-leather .diary-e::before, .sp-dyp.sp-dy-leather::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 0 0, #d4af37 0 7px, transparent 8px), radial-gradient(circle at 100% 0, #d4af37 0 7px, transparent 8px), radial-gradient(circle at 0 100%, #d4af37 0 7px, transparent 8px), radial-gradient(circle at 100% 100%, #d4af37 0 7px, transparent 8px); z-index: 0; pointer-events: none; }

/* Living: gold leaf that catches the light, a sky that twinkles */
.sp-dy-gold, .modal.sp-dy-gold .diary-e { background-color: #1c1408; background-image: linear-gradient(100deg, transparent 38%, rgb(255 215 110 / .28) 50%, transparent 62%), radial-gradient(circle at 15% 30%, rgb(255 215 110 / .35) 0 1px, transparent 2px), radial-gradient(circle at 70% 70%, rgb(255 215 110 / .3) 0 1px, transparent 2px), radial-gradient(circle at 45% 15%, rgb(255 215 110 / .3) 0 1.5px, transparent 2.5px); background-size: 300% 100%, 60px 60px, 80px 80px, 70px 70px; border: 1px solid #b8860b; box-shadow: inset 0 0 0 3px #1c1408, inset 0 0 0 4px rgb(212 175 55 / .6); }
.modal.sp-dy-gold .diary-e:nth-child(-n+3), .sp-dyp.sp-dy-gold { animation: lxGold 5s ease-in-out infinite; }
.modal.sp-dy-gold .diary-e h5, .sp-dyp.sp-dy-gold b { background: linear-gradient(90deg, #b8860b, #fff6c8, #d4af37, #b8860b); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rkSlide 4s linear infinite; }
.modal.sp-dy-gold .diary-e p::first-letter { color: #ffd36b; font-size: 1.6em; line-height: 1; float: left; margin: 2px 4px 0 0; text-shadow: 0 0 8px rgb(255 200 80 / .6); }
.sp-dy-starry, .modal.sp-dy-starry .diary-e { background-color: #0b1030; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 80%, #cfe2ff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent), radial-gradient(1px 1px at 10% 75%, #ffe9a8, transparent), radial-gradient(80% 60% at 50% 120%, rgb(99 102 241 / .35), transparent); background-size: 120px 90px, 160px 120px, 140px 100px, 100px 80px, 180px 130px, 100% 100%; }
.modal.sp-dy-starry .diary-e:nth-child(-n+3), .sp-dyp.sp-dy-starry { animation: lxStars 40s linear infinite; }
.modal.sp-dy-starry .diary-e:nth-child(-n+3)::after, .sp-dyp.sp-dy-starry::after { content: ''; position: absolute; top: 10%; left: -30%; width: 70px; height: 1.5px; background: linear-gradient(90deg, transparent, #fff); transform: rotate(18deg); animation: lxShoot 6s ease-in infinite; z-index: 0; }

/* Masterpiece 1: the Sapphire codex, an illuminated page with a living border of light */
.sp-dy-codex, .modal.sp-dy-codex .diary-e { background-color: #06102e; background-image: radial-gradient(90% 70% at 50% 0%, rgb(47 107 255 / .28), transparent 70%), repeating-linear-gradient(45deg, rgb(124 180 255 / .04) 0 6px, transparent 6px 12px); border: 0; padding: 14px 16px; animation: none; box-shadow: inset 0 0 18px rgb(47 107 255 / .3); }
.modal.sp-dy-codex .diary-e::before, .sp-dyp.sp-dy-codex::before { content: ''; position: absolute; inset: -60%; background: conic-gradient(from 0deg, transparent 0 70%, #2f7bff 80%, #bfe0ff 85%, #2f7bff 90%, transparent 100%); z-index: -2; }
.modal.sp-dy-codex .diary-e::after, .sp-dyp.sp-dy-codex::after { content: ''; position: absolute; inset: 2px; border-radius: 8px; background: inherit; background-color: #06102e; z-index: -1; box-shadow: inset 0 0 0 1px rgb(124 180 255 / .35); }
.modal.sp-dy-codex .diary-e:nth-child(-n+3)::before, .sp-dyp.sp-dy-codex::before { animation: lxSpin 4s linear infinite; }
.modal.sp-dy-codex .diary-e h5, .sp-dyp.sp-dy-codex b { background: linear-gradient(90deg, #7fb4ff, #ffffff, #2f7bff, #7fb4ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rkSlide 3.5s linear infinite; letter-spacing: .06em; }
.modal.sp-dy-codex .diary-e h5::before { content: '✦ '; -webkit-text-fill-color: #9cc0ff; }
.modal.sp-dy-codex .diary-e p { text-shadow: 0 0 6px rgb(124 180 255 / .45); }
.modal.sp-dy-codex .diary-e p::first-letter { float: left; font-size: 2.3em; line-height: .9; margin: 3px 6px 0 0; padding: 2px 6px; border-radius: 6px; color: #fff; background: radial-gradient(circle at 30% 30%, #9cc0ff, #2f6bff 55%, #06104a); box-shadow: 0 0 10px rgb(47 123 255 / .7); text-shadow: 0 0 6px #bfe0ff; }

/* Masterpiece 2: the Royal decree, the best page in the game. Cream vellum in a gilded frame that light runs around,
   a velvet ribbon, a gold illuminated first letter, a crown in a wax seal, gold dust drifting over the page. */
.modal.sp-dy-royal { background: radial-gradient(120% 80% at 50% 0%, #3b1a6b, #12062a 70%); color: #fff7e0; }
.modal.sp-dy-royal .modal-head, .modal.sp-dy-royal h3 { color: #ffe9a8; text-shadow: 0 0 10px rgb(255 200 80 / .5); }
.sp-dy-royal, .modal.sp-dy-royal .diary-e { background-color: #fff7e0; background-image: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgb(150 100 20 / .22) 100%), radial-gradient(circle at 20% 30%, rgb(212 175 55 / .5) 0 1px, transparent 1.5px), radial-gradient(circle at 75% 65%, rgb(212 175 55 / .45) 0 1px, transparent 1.5px); background-size: 100% 100%, 70px 60px, 90px 70px; border: 0; padding: 18px 18px 22px 26px; box-shadow: inset 0 0 0 3px #fff7e0, inset 0 0 0 5px #d4af37, inset 0 0 0 7px #fff7e0, inset 0 0 0 8px #8a5a00, 0 4px 18px rgb(0 0 0 / .45); color: #3a1a6b; }
.modal.sp-dy-royal .diary-e::before, .sp-dyp.sp-dy-royal::before { content: ''; position: absolute; left: 8px; top: -4px; bottom: -4px; width: 9px; background: linear-gradient(90deg, #4c1d95, #7c3aed 45%, #4c1d95); box-shadow: 1px 0 3px rgb(0 0 0 / .35); z-index: 0; }
.modal.sp-dy-royal .diary-e::after { content: '👑'; position: absolute; right: 10px; bottom: 6px; width: 34px; height: 34px; display: grid; place-items: center; font-size: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e25555, #9b1c1c 60%, #5a0a0a); box-shadow: 0 2px 4px rgb(0 0 0 / .4), inset 0 0 0 3px rgb(255 255 255 / .12); z-index: 1; }
.modal.sp-dy-royal .diary-e h5, .sp-dyp.sp-dy-royal b { font-variant: small-caps; letter-spacing: .08em; background: linear-gradient(90deg, #8a5a00, #ffe9a8, #d4af37, #fff6c8, #8a5a00); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal.sp-dy-royal .diary-e h5::before { content: '⚜ '; -webkit-text-fill-color: #b8860b; }
.modal.sp-dy-royal .diary-e p { padding-right: 34px; line-height: 1.55; }
.modal.sp-dy-royal .diary-e p::first-letter { float: left; font-family: Georgia, serif; font-size: 2.6em; line-height: .85; margin: 4px 7px 0 0; padding: 4px 7px; border-radius: 4px; color: #fff6c8; background: linear-gradient(135deg, #5b21b6, #2e1065); border: 2px solid #d4af37; box-shadow: 0 0 0 2px #fff7e0, 0 0 0 3px #8a5a00, 0 2px 8px rgb(0 0 0 / .35); text-shadow: 0 0 6px rgb(255 220 120 / .8); }
.modal.sp-dy-royal .diary-pages { position: relative; }
.modal.sp-dy-royal .diary-e:nth-child(-n+3) h5, .sp-dyp.sp-dy-royal b { animation: rkSlide 4s linear infinite; }
.modal.sp-dy-royal .diary-e:nth-child(-n+3), .sp-dyp.sp-dy-royal { animation: lxRoyal 3.2s linear infinite; }
.modal.sp-dy-royal .diary-e:nth-child(-n+3) p::first-letter { animation: lxLetter 3s ease-in-out infinite; }
.sp-dyp.sp-dy-royal { padding-left: 24px; }
.sp-dyp.sp-dy-codex { padding: 8px 12px; }

/* ---------- titles: Living and Masterpiece tags ---------- */
.rk-tag.spx { position: relative; isolation: isolate; overflow: visible; gap: .3em; }
.rk-tag.spx .spx-txt { font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .8), 0 0 2px rgb(0 0 0 / .8); }
.rk-tag.spx .spx-ring { position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--spa, 0deg), var(--c1), #ffffff, var(--c2), var(--c1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; pointer-events: none; }
.rk-tag.spx .spx-ic { display: inline-block; filter: drop-shadow(0 0 4px var(--c1)); animation: rkBob 2.2s ease-in-out infinite; }
.rk-tag.spx-top { padding-inline: .75em; color: #fff; background: linear-gradient(110deg, var(--c2), var(--c1) 45%, var(--c2)) !important; background-size: 200% 100% !important; text-shadow: 0 0 6px rgb(0 0 0 / .45), 0 0 10px var(--c1); box-shadow: 0 0 14px color-mix(in srgb, var(--c1) 70%, transparent), 0 0 28px color-mix(in srgb, var(--c2) 45%, transparent); animation: rkSlide 3s linear infinite, spPulse 1.8s ease-in-out infinite !important; }
.rk-tag.spx-top .spx-txt { color: #fff; background: none; text-shadow: 0 1px 2px rgb(0 0 0 / .85), 0 0 2px rgb(0 0 0 / .9), 0 0 10px var(--c1); letter-spacing: .02em; }
.rk-tag.spx-top .spx-ic { font-size: 1.15em; animation: lxCrown 2.6s ease-in-out infinite; }
.rk-tag.spx-top .spx-sp { position: absolute; width: 6px; height: 6px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 3px #fff); animation: lxTwinkle 1.8s ease-in-out infinite; pointer-events: none; }
.rk-tag.spx-top .spx-s1 { top: -4px; left: 14%; } .rk-tag.spx-top .spx-s2 { bottom: -4px; left: 58%; animation-delay: .6s; } .rk-tag.spx-top .spx-s3 { top: 20%; right: -4px; animation-delay: 1.2s; }
.rk-tag.spx-top .spx-ring { inset: -3px; padding: 3px; animation: lxRing 3s linear infinite; }
.rk-tag.spx-top::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .5) 50%, transparent 65%); background-size: 300% 100%; animation: rkShine 3.2s ease-in-out infinite; pointer-events: none; z-index: 1; }
@property --spa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Age button: the two shaped Masterpiece skins ---------- */
html:root[data-ab-shape="sp-star"] #ageBtn b, html:root[data-ab-shape="sp-star"] #ageBtn span { color: #fff; text-shadow: 0 1px 2px #06104a, 0 0 8px #2f7bff; transform: translateY(8px); }
html:root[data-ab-shape="sp-galaxy"] #ageBtn b, html:root[data-ab-shape="sp-galaxy"] #ageBtn span { color: #fff; text-shadow: 0 1px 2px #12062a, 0 0 8px #c08aff; transform: translateY(2px); }
.sp-abp.sp-abp-shaped { border-radius: 0; box-shadow: none; filter: drop-shadow(0 3px 6px rgb(0 0 0 / .35)); }

@keyframes lxBreathe { 50% { opacity: .42; transform: scale(1.06) rotate(-4deg); } }
@keyframes lxCaret { 50% { opacity: 0; } }
@keyframes lxMoon { 50% { background-position: 18% 0; box-shadow: inset 0 0 0 1px rgb(203 213 255 / .3), inset 0 0 26px rgb(203 213 255 / .14); } }
@keyframes lxGold { 0%, 30% { background-position: 150% 0, 0 0, 0 0, 0 0; } 100% { background-position: -150% 0, 0 0, 0 0, 0 0; } }
@keyframes lxStars { to { background-position: 120px 0, -160px 0, 140px 0, -100px 0, 180px 0, 0 0; } }
@keyframes lxShoot { 0%, 70% { transform: translate(0, 0) rotate(18deg); opacity: 0; } 72% { opacity: 1; } 100% { transform: translate(260%, 120%) rotate(18deg); opacity: 0; } }
@keyframes lxSpin { to { transform: rotate(360deg); } }
@keyframes lxRoyal { 0% { box-shadow: inset 0 0 0 3px #fff7e0, inset 0 0 0 5px #d4af37, inset 0 0 0 7px #fff7e0, inset 0 0 0 8px #8a5a00, 0 4px 18px rgb(0 0 0 / .45), 0 0 0 rgb(255 215 110 / 0); } 50% { box-shadow: inset 0 0 0 3px #fff7e0, inset 0 0 0 5px #ffe9a8, inset 0 0 0 7px #fff7e0, inset 0 0 0 8px #d4af37, 0 4px 18px rgb(0 0 0 / .45), 0 0 18px rgb(255 215 110 / .55); } 100% { box-shadow: inset 0 0 0 3px #fff7e0, inset 0 0 0 5px #d4af37, inset 0 0 0 7px #fff7e0, inset 0 0 0 8px #8a5a00, 0 4px 18px rgb(0 0 0 / .45), 0 0 0 rgb(255 215 110 / 0); } }
@keyframes lxLetter { 50% { box-shadow: 0 0 0 2px #fff7e0, 0 0 0 3px #d4af37, 0 0 14px rgb(255 210 100 / .8); } }
@keyframes lxCrown { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg) scale(1.1); } }
@keyframes lxTwinkle { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
@keyframes lxRing { to { --spa: 360deg; } }
@media (prefers-reduced-motion: reduce) { .modal.sp-dy .diary-e, .modal.sp-dy .diary-e::before, .modal.sp-dy .diary-e::after, .modal.sp-dy .diary-e h5, .modal.sp-dy .diary-e p::first-letter, .rk-tag.spx, .rk-tag.spx *, .sp-dyp, .sp-dyp::before, .sp-dyp::after { animation: none !important; } }
/* the Royal decree window: gold dust drifting up through it, a gilded frame */
.modal.sp-dy-royal { box-shadow: 0 0 0 2px #d4af37, 0 0 0 5px #3b1a6b, 0 0 0 6px #ffe9a8, 0 20px 60px rgb(0 0 0 / .6), 0 0 40px rgb(212 175 55 / .35); }
.modal.sp-dy-royal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5; background-image: radial-gradient(2px 2px at 10% 20%, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 60% 70%, #fff6c8, transparent), radial-gradient(2.5px 2.5px at 85% 35%, #ffd36b, transparent), radial-gradient(1.5px 1.5px at 35% 90%, #ffe9a8, transparent), radial-gradient(1px 1px at 75% 10%, #ffffff, transparent); background-size: 180px 260px, 220px 300px, 260px 340px, 200px 280px, 160px 220px; opacity: .8; animation: lxDust 16s linear infinite; }
@keyframes lxDust { to { background-position: 20px -260px, -30px -300px, 25px -340px, -15px -280px, 10px -220px; } }
@media (prefers-reduced-motion: reduce) { .modal.sp-dy-royal::after { animation: none; } }
/* ---------- more Age buttons: the Legendary section of the shop and the shaped skins' labels ---------- */
.sp-grid:empty, .sp-th:has(+ .sp-grid:empty) { display: none; }
.sp-item.sp-t5 { position: relative; border-color: #d4af37; background: radial-gradient(120% 80% at 50% 0%, rgb(255 215 110 / .22), transparent 70%), linear-gradient(180deg, color-mix(in srgb, #7c3aed 14%, var(--surface, #fff)), var(--surface, #fff)); box-shadow: 0 0 0 1px rgb(212 175 55 / .5), 0 0 14px rgb(212 175 55 / .35); }
.sp-item.sp-t5 b::before { content: '👑 '; }
.sp-item.sp-t5.on { animation: lxLegend 2.4s ease-in-out infinite; }
.sp-detail.sp-t5 { border-color: #d4af37; box-shadow: 0 0 18px rgb(212 175 55 / .35); }
@keyframes lxLegend { 50% { box-shadow: 0 0 0 2px #ffe9a8, 0 0 22px rgb(255 200 80 / .6); } }
html:root[data-ab-shape="sp-crown"] #ageBtn b, html:root[data-ab-shape="sp-crown"] #ageBtn span { color: #3b1a00; text-shadow: 0 0 3px #fff6c8, 0 0 7px #ffe08a; transform: translateY(4px); }
html:root[data-ab-shape="sp-heart"] #ageBtn b, html:root[data-ab-shape="sp-heart"] #ageBtn span { color: #fff; text-shadow: 0 1px 2px #4a0410, 0 0 8px #ff3b5c; transform: translateY(2px); }
html:root[data-ab-shape="sp-dragonegg"] #ageBtn b, html:root[data-ab-shape="sp-dragonegg"] #ageBtn span { color: #ffe08a; text-shadow: 0 1px 2px #1a0500, 0 0 8px #ff6a00; transform: translateY(14px); }
html:root[data-ab-shape="sp-astrolabe"] #ageBtn b, html:root[data-ab-shape="sp-astrolabe"] #ageBtn span { color: #fff6c8; text-shadow: 0 1px 2px #030818, 0 0 8px #2f7bff; transform: translateY(2px); }
html:root[data-ab-shape="sp-bluesun"] #ageBtn b, html:root[data-ab-shape="sp-bluesun"] #ageBtn span { color: #0b1f4d; text-shadow: 0 0 4px #fff, 0 0 8px #bfe0ff; transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .sp-item.sp-t5.on { animation: none; } }
/* Legendary themes are objects too: labels on Thunder God and the four Legendary sapphire themes */
html:root[data-ab-shape="storm"] #ageBtn b, html:root[data-ab-shape="storm"] #ageBtn span { color: #fff8d0; text-shadow: 0 1px 2px #0b1026, 0 0 6px #3b5bdb, 0 0 10px #ffd84a; transform: translateY(14px); }
html:root[data-ab-shape="sp-crystal"] #ageBtn b, html:root[data-ab-shape="sp-crystal"] #ageBtn span { color: #fff; text-shadow: 0 1px 2px #1a1030, 0 0 8px #8a7aff; transform: translateY(12px); }
html:root[data-ab-shape="sp-lanterns"] #ageBtn b, html:root[data-ab-shape="sp-lanterns"] #ageBtn span { color: #5a1a00; text-shadow: 0 0 3px #fff3c0, 0 0 8px #ffb347; transform: translateY(4px); }
html:root[data-ab-shape="sp-heaven"] #ageBtn b, html:root[data-ab-shape="sp-heaven"] #ageBtn span { color: #8a5a00; text-shadow: 0 0 3px #fff, 0 0 8px #fff6c8; transform: translateY(6px); }
html:root[data-ab-shape="sp-ocean"] #ageBtn b, html:root[data-ab-shape="sp-ocean"] #ageBtn span { color: #fff; text-shadow: 0 1px 2px #062a5a, 0 0 8px #2f7bff; transform: translateY(16px); }