/* ---------------------------------------------------------------- base
   A procedural canvas (theme-sky.js) paints the rarity's aura behind the page. */
.interface-sky{display:none;position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
html[data-interface-theme]:not([data-interface-theme=default]) .interface-sky{display:block}
html[data-interface-theme]:not([data-interface-theme=default]) body{background:var(--site-bg)}
html[data-interface-theme]:not([data-interface-theme=default]) #root{background:transparent!important;color:var(--prose)}
/* Full-page containers let the procedural backdrop show through; cards keep their own surfaces. */
html[data-interface-theme]:not([data-interface-theme=default]) :is(.account-page,.leaderboard-page,.codes-page,.replay-loading,.rare-roll-main){background:transparent!important}
html[data-interface-theme]:not([data-interface-theme=default]) #root>header{background:color-mix(in srgb,var(--site-bg) 70%,transparent)!important}
html[data-interface-theme]:not([data-interface-theme=default]) .roll-button-charged{--cta-ring-a:var(--theme-accent);--cta-ring-b:var(--theme-second);animation:cta-breathe 3s ease-in-out infinite}
html[data-interface-theme]:not([data-interface-theme=default]) .nav-pill[aria-current],html[data-interface-theme]:not([data-interface-theme=default]) .account-settings-link:hover{color:var(--theme-accent)}
html[data-interface-theme]:not([data-interface-theme=default]) ::selection{background:color-mix(in srgb,var(--theme-accent) 40%,transparent)}
/* Aberration: the whole interface is seen through a dispersive lens. */
html[data-theme-motif=prism] #root :is(h1,h2,h3,p,span,a,button,li,td,th,label,small,strong){text-shadow:-.7px 0 #ff466a8c,.7px 0 #459dff8c}
html[data-theme-motif=prism] #root :is(img,canvas,svg){filter:drop-shadow(-1px 0 #ff466a70) drop-shadow(1px 0 #459dff70)}
html[data-theme-motif=prism] #root :is(button,input,select,textarea,section,article){box-shadow:-1px 0 0 #ff466a40,1px 0 0 #459dff40}
/* Cosmic horror and singularity pull the edges of the world inward. */
html[data-theme-motif=gaze] .interface-sky,html[data-theme-motif=orbit] .interface-sky{filter:contrast(1.05)}
@media(prefers-reduced-motion:reduce){.account-identity h1,.account-identity h1::before,.account-identity h1::after{animation:none!important}}

/* ---------------------------------------------------------------- picker */
.interface-theme-picker{margin:22px 0 30px;padding-bottom:26px;border-bottom:1px solid var(--outline)}
.interface-theme-picker h3{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;margin:0 0 14px}
.theme-playtest-tag{font:600 10px/1 var(--font-ui),system-ui;letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:99px;border:1px dashed var(--outline-strong);color:var(--prose-3)}
.interface-theme-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.interface-theme-options button{display:flex;align-items:start;flex-direction:column;text-align:left;padding:9px;border-radius:9px;border:1px solid var(--outline);background:var(--surface);color:var(--prose);gap:7px;font:500 12px/1.35 var(--font-ui),system-ui;transition:border-color .15s,transform .15s}
.interface-theme-options button:hover{transform:translateY(-1px);border-color:var(--swatch)}
.interface-theme-options button[aria-pressed=true]{border-color:var(--swatch);box-shadow:0 0 0 1px var(--swatch),0 0 18px -6px var(--swatch)}
.interface-theme-options small{color:var(--prose-3);font-size:10px}
.interface-theme-picker>p{font-size:12px;line-height:1.6;color:var(--prose-3);margin:12px 0 0}
.theme-swatch{height:53px;width:100%;border-radius:5px;position:relative;overflow:hidden;background:radial-gradient(ellipse 70% 60% at 30% 0,var(--swatch),transparent 70%),radial-gradient(ellipse 70% 60% at 75% 10%,var(--swatch-other),transparent 70%),var(--swatch-bg)}
.theme-swatch i{display:none}
.theme-swatch--default{background:linear-gradient(125deg,#2a2833,#55525f)}
.theme-swatch--prism{background:radial-gradient(ellipse 60% 60% at 40% 10%,#ff466a99,transparent 70%),radial-gradient(ellipse 60% 60% at 60% 10%,#459dff99,transparent 70%),var(--swatch-bg)}
.theme-swatch--orbit,.theme-swatch--eclipse{background:radial-gradient(circle at 50% 30%,#000 0 18%,var(--swatch) 21%,transparent 34%),var(--swatch-bg)}
.theme-swatch--halo{background:radial-gradient(circle at 50% 10%,transparent 0 30%,var(--swatch) 34%,transparent 44%),var(--swatch-bg)}
.theme-swatch--gaze{background:radial-gradient(ellipse 50% 16% at 50% 40%,var(--swatch) 0 15%,var(--swatch-other) 40%,transparent 70%),radial-gradient(ellipse at 50% 130%,var(--swatch),transparent 60%),var(--swatch-bg)}
/* ---------------------------------------------------------------- themed username (account / profile page) */
html[data-interface-theme]:not([data-interface-theme=default]) .account-identity h1{position:relative;display:inline-flex;align-items:center;gap:.32em;background:linear-gradient(100deg,var(--theme-accent),var(--theme-second) 55%,var(--theme-accent));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--theme-accent) 45%,transparent));animation:name-sheen 6s ease-in-out infinite}
html[data-interface-theme]:not([data-interface-theme=default]) .account-identity h1::before,html[data-interface-theme]:not([data-interface-theme=default]) .account-identity h1::after{font-size:.55em;-webkit-text-fill-color:var(--theme-accent);color:var(--theme-accent);text-shadow:0 0 8px var(--theme-accent);letter-spacing:0}
html[data-interface-theme]:not([data-interface-theme=default]) .account-identity h1::after{transform:scaleX(-1)}
@keyframes name-sheen{50%{background-position:100% 0}}
html[data-theme-motif=silk] .account-identity h1::before,html[data-theme-motif=silk] .account-identity h1::after{content:'❖';animation:flicker 1.6s ease-in-out infinite}
html[data-theme-motif=aurora] .account-identity h1::before{content:'ᚱ'}html[data-theme-motif=aurora] .account-identity h1::after{content:'ᛟ';transform:none}
html[data-theme-motif=prism] .account-identity h1{background:none;color:var(--prose);-webkit-text-fill-color:currentColor;text-shadow:-2px 0 #ff3d8caa,2px 0 #2ff2ffaa,0 0 14px #ffffff30;filter:none;animation:prism-name 3.5s ease-in-out infinite}
html[data-theme-motif=prism] .account-identity h1::before,html[data-theme-motif=prism] .account-identity h1::after{content:'◆';-webkit-text-fill-color:currentColor;text-shadow:-2px 0 #ff3d8c,2px 0 #2ff2ff}
@keyframes prism-name{50%{text-shadow:-3px 1px #ff3d8caa,3px -1px #2ff2ffaa,0 0 14px #ffffff30}}
html[data-theme-motif=rays] .account-identity h1::before,html[data-theme-motif=rays] .account-identity h1::after{content:'✸';animation:spin 12s linear infinite}
html[data-theme-motif=pearl] .account-identity h1::before{content:'✧'}html[data-theme-motif=pearl] .account-identity h1::after{content:'✦';transform:none}
html[data-theme-motif=orbit] .account-identity h1::before,html[data-theme-motif=orbit] .account-identity h1::after{content:'◉';-webkit-text-fill-color:#05040b;text-shadow:0 0 0 1px,0 0 6px var(--theme-accent),0 0 2px var(--theme-second)}
html[data-theme-motif=gaze] .account-identity h1::before,html[data-theme-motif=gaze] .account-identity h1::after{content:'👁';filter:hue-rotate(60deg) saturate(.6);animation:blink 5s ease-in-out infinite}
html[data-theme-motif=halo] .account-identity h1::before,html[data-theme-motif=eclipse] .account-identity h1::before{content:'';position:absolute;left:50%;top:-.45em;width:2.2em;height:.42em;margin-left:-1.1em;border-radius:50%;border:2px solid var(--theme-accent);box-shadow:0 0 10px var(--theme-accent),inset 0 0 6px var(--theme-accent);animation:halo-float 4s ease-in-out infinite}
html[data-theme-motif=halo] .account-identity h1::after{content:none}
html[data-theme-motif=eclipse] .account-identity h1::after{content:'∞';transform:none}
@keyframes flicker{50%{opacity:.6;transform:translateY(-1px) scale(.95)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes halo-float{50%{transform:translateY(-3px)}}

@keyframes spin{to{transform:rotate(360deg)}}

.interface-theme-options .theme-mastery{opacity:.7;font-size:.68rem;font-variant-numeric:tabular-nums}

html[data-theme-motif=gaze] .account-identity h1::before,html[data-theme-motif=gaze] .account-identity h1::after{content:'◉';color:#b1ff76;filter:none;text-shadow:0 0 12px #b1ff7670;font-size:.55em;vertical-align:middle}
html[data-theme-motif=gaze] .nav-pill:hover,html[data-theme-motif=gaze] .number-card{border-color:#b1ff7640;box-shadow:inset 0 0 18px #5b286518,0 0 14px #b1ff7610}
@media(prefers-reduced-motion:reduce){html[data-theme-motif=gaze] .account-identity h1::before,html[data-theme-motif=gaze] .account-identity h1::after{animation:none}}
html[data-theme-motif=ufo] .account-identity h1::before,html[data-theme-motif=ufo] .account-identity h1::after{content:'🛸';transform:none;animation:halo-float 2.6s ease-in-out infinite}
html[data-theme-motif=meteor] .account-identity h1{text-shadow:0 0 10px #ff4a1c88,0 -2px 12px #ffb13b55}
html[data-theme-motif=meteor] .account-identity h1::before,html[data-theme-motif=meteor] .account-identity h1::after{content:'☄';transform:none;animation:flicker 1.1s ease-in-out infinite}
html[data-theme-motif=meteor] #root :is(button,section,article){box-shadow:0 6px 18px -10px #ff4a1c80}
html[data-theme-motif=glitch] .account-identity h1{background:none;color:var(--prose);-webkit-text-fill-color:currentColor;filter:none;animation:error-jitter 2.4s steps(1) infinite}
html[data-theme-motif=glitch] .account-identity h1::before,html[data-theme-motif=glitch] .account-identity h1::after{content:'▚';-webkit-text-fill-color:currentColor;text-shadow:-2px 0 #ff2e9a,2px 0 #50dcff}
html[data-theme-motif=glitch] #root :is(h1,h2,h3){text-shadow:-1px 0 #ff2e9a80,1px 0 #50dcff70}
html[data-theme-motif=glitch] #root :is(button,section,article){box-shadow:-1px 0 0 #ff2e9a33,1px 0 0 #50dcff33}
/* Real UI glitches, driven by glitch-ui.js. */
html[data-theme-motif=glitch] #root.ui-glitching{filter:url(#ui-glitch)}
html[data-theme-motif=glitch] .ui-glitch-tear{animation:ui-tear .07s steps(1) infinite}
@keyframes ui-tear{0%{clip-path:polygon(0 0,100% 0,100% var(--gl-cut),0 var(--gl-cut),0 calc(var(--gl-cut) + var(--gl-h)),100% calc(var(--gl-cut) + var(--gl-h)),100% 100%,0 100%);filter:drop-shadow(-2px 0 #ff2e9acc) drop-shadow(2px 0 #50dcffcc)}50%{transform:translateX(var(--gl-dx));filter:drop-shadow(-3px 0 #ff2e9a) drop-shadow(3px 0 #50dcff)}}
@media(prefers-reduced-motion:reduce){html[data-theme-motif=glitch] .account-identity h1{animation:none}}