/* Character effects are layered over the existing mirrored/glitch portrait. */
.portrait-fx{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .3s ease;contain:paint}.is-masked .portrait-fx{opacity:1}.portrait-fx *{animation-play-state:paused!important}.is-masked .portrait-fx *{animation-play-state:running!important}.racer-card[data-effect=fire] .portrait-toggle.is-masked{box-shadow:inset 0 -30px 60px #ff5a2540}.racer-card[data-effect=code] .portrait-counter:before{background:#62ffc4}.racer-card[data-effect=lightning] .portrait-counter:before{background:#9de7ff}
/* Flame tongues and embers rise from the bottom, leaving the face readable. */
.fire-glow{position:absolute;inset:40% -20% -12%;background:radial-gradient(ellipse at bottom,#ffaf1855,#ff3c1825 40%,transparent 70%);mix-blend-mode:screen;animation:fire-breathe 1.8s ease-in-out infinite alternate}.flame{position:absolute;left:var(--x);bottom:-32px;width:17%;height:var(--height);border-radius:50% 12% 45% 45%;background:radial-gradient(ellipse at 50% 95%,#fff1a4 0%,#ffcb35 24%,#ff641d 49%,#d5230570 72%,transparent 85%);transform-origin:50% 100%;filter:blur(2px);mix-blend-mode:screen;animation:flame-dance var(--duration) ease-in-out var(--delay) infinite alternate}.flame:nth-child(3n){border-radius:10% 70% 45% 45%;width:21%;filter:blur(4px)}.ember{position:absolute;left:var(--x);bottom:6%;width:3px;height:7px;border-radius:50%;background:#ffd477;box-shadow:0 0 9px #ff671b;opacity:0;animation:ember-rise 2.8s ease-out var(--delay) infinite}
@keyframes flame-dance{0%{transform:scale(.8,.65) skewX(-12deg);opacity:.7}45%{transform:scale(1,1.05) skewX(6deg);opacity:.95}100%{transform:scale(.9,.82) skewX(-5deg);opacity:.8}}@keyframes fire-breathe{from{opacity:.65;transform:scaleX(.95)}to{opacity:1;transform:scaleX(1.08)}}@keyframes ember-rise{0%{translate:0 0;opacity:0}12%{opacity:.9}75%{opacity:.7}100%{translate:var(--drift) -290px;opacity:0}}
/* Moving terminal fragments, with a translucent center to preserve the portrait. */
.fx-code{background:linear-gradient(0deg,#001b1570,transparent 65%);mask-image:linear-gradient(90deg,#000 0%,#0009 35%,#0004 50%,#0009 70%,#000 100%)}.code-stream{position:absolute;top:-75%;left:calc(var(--column)*16% - 4%);width:42%;white-space:pre;font:10px/2.1 'Courier New',monospace;letter-spacing:.3px;color:#73ffd2;text-shadow:0 0 8px #00e8a8;opacity:.65;transform:rotate(90deg);transform-origin:0 0;animation:code-fall var(--duration) linear var(--delay) infinite}.code-stream:nth-child(2n){color:#c4ffe3;opacity:.42;font-size:9px}.code-terminal{position:absolute;left:15px;right:15px;bottom:53px;padding:10px 9px;border-left:2px solid #62ffc4;background:#001b15c9;font:10px/1.5 'Courier New',monospace;color:#9fffdc;text-shadow:0 0 9px #28ffb9;letter-spacing:.5px}
@keyframes code-fall{from{translate:0 -15%}to{translate:0 245%}}
/* Localized electric strikes: two pulses per cycle, no full-screen flash. */
.lightning-bolts{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 5px #4dbeff) drop-shadow(0 0 12px #8bdaff)}.bolt{fill:none;stroke:#e9fbff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:lightning-strike 3.2s linear infinite}.bolt-branch{stroke-width:1.2;animation-delay:.08s}.bolt-secondary{stroke:#91d5ff;stroke-width:1.3;animation-delay:1.6s}.lightning-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 35%,#7acaff35,transparent 68%);opacity:0;animation:electric-glow 3.2s ease-out infinite}
@keyframes lightning-strike{0%,15%,100%{opacity:0}2%,6%{opacity:1}8%{opacity:.18}10%{opacity:.85}14%{opacity:0}}@keyframes electric-glow{0%,18%,100%{opacity:0}3%{opacity:.9}12%{opacity:.25}}
/* Faceted gems rise around the portrait, catching a cool silver-blue light. */
.racer-card[data-effect=diamond] .portrait-counter:before{background:#b0f0ff}.fx-diamond{background:linear-gradient(0deg,#629cb31c,transparent 65%)}.floating-gem{position:absolute;bottom:-20%;left:var(--x);width:var(--size);height:var(--size);opacity:0;filter:drop-shadow(0 0 5px #6bdcffaa);animation:gem-rise var(--duration) linear var(--delay) infinite}.floating-gem svg{width:100%;height:100%;overflow:visible}.gem-outline{fill:#9be7ff22;stroke:#d3f9ff;stroke-width:1.5;stroke-linejoin:round}.gem-facets{fill:none;stroke:#8de5ff;stroke-width:1;stroke-linejoin:round}.diamond-aura{position:absolute;inset:55% -20% -20%;background:radial-gradient(ellipse,#9ae3ff22,transparent 65%);animation:diamond-glow 2.4s ease-in-out infinite alternate}
@keyframes gem-rise{0%{translate:0 0;rotate:-15deg;opacity:0}15%{opacity:.8}65%{opacity:.65}100%{translate:var(--drift) -570px;rotate:55deg;opacity:0}}@keyframes diamond-glow{from{opacity:.4;scale:.9}to{opacity:1;scale:1.1}}
/* Paired diagonal tire tracks reveal as if a wheel has just passed over them. */
.racer-card[data-effect=tire] .portrait-counter:before{background:#d9dfbf}.skid-tracks{position:absolute;inset:-30% -20%;display:flex;justify-content:space-around;padding:0 18%;gap:22%;transform:rotate(-24deg);opacity:.85;filter:drop-shadow(1px 0 1px #d7d8c544);clip-path:inset(0 0 100% 0)}.skid-strip{width:30%;height:100%;flex-shrink:0}.is-masked .skid-tracks{animation:skid-reveal 1s cubic-bezier(.2,.65,.2,1) both}.tire-smoke{position:absolute;inset:60% -25% -20%;background:radial-gradient(ellipse at 40% 80%,#c2c5af35,transparent 60%);filter:blur(10px);opacity:0}.is-masked .tire-smoke{animation:skid-smoke 3s ease-out infinite}
@keyframes skid-reveal{from{clip-path:inset(0 0 100% 0);translate:0 -15px}to{clip-path:inset(0 0 0 0);translate:0 0}}@keyframes skid-smoke{0%{opacity:0;translate:0 30px}35%{opacity:.7}100%{opacity:0;translate:25px -40px}}
/* ROD: brighter layered fire, edge flames, a hot core and a dense ember shower. */
.fx-fire{background:radial-gradient(ellipse at bottom,#ff510b38,transparent 72%);mix-blend-mode:screen}.fx-fire .fire-glow{inset:12% -25% -15%;background:radial-gradient(ellipse at bottom,#ffd657a0 0%,#ff621b80 28%,#f02b1245 48%,transparent 73%);filter:blur(10px);animation:fire-breathe .9s ease-in-out infinite alternate}.fx-fire .flame{width:16%;bottom:-40px;border-radius:70% 6% 45% 45%;background:linear-gradient(0deg,#fff5c3 2%,#ffdc60 16%,#ff9d21 40%,#ff4816b3 67%,#e72b0720 87%,transparent 100%);filter:blur(1.8px);animation:inferno-tongue var(--duration) ease-in-out var(--delay) infinite alternate}.fx-fire .flame:before{content:'';position:absolute;inset:25% 23% -3%;background:linear-gradient(0deg,#fffde8,#ffe48c 35%,#ffb32b66 70%,transparent);border-radius:80% 0 50% 40%;filter:blur(1px)}.fx-fire .flame:nth-child(3n){width:19%;filter:blur(3px);border-radius:5% 80% 45% 45%}.fx-fire .flame:nth-child(4n){filter:blur(.8px);width:12%;opacity:.85}.fx-fire .ember{width:2px;height:9px;background:#ffe9a3;box-shadow:0 0 4px #fff2bc,0 0 10px #ff9b21,0 0 18px #ff3c0f;animation:inferno-embers var(--duration) linear var(--delay) infinite}.fx-fire .ember:nth-child(3n){width:4px;height:4px}.fire-edge{position:absolute;top:0;bottom:0;width:20%;background:linear-gradient(0deg,#ffbd3f8c,#ff3e1930 60%,transparent);filter:blur(15px);animation:fire-breathe 1.3s ease-in-out infinite alternate}.fire-edge-left{left:-8%}.fire-edge-right{right:-8%;animation-delay:-.6s}.fire-heat{position:absolute;inset:40% 0 0;background:radial-gradient(ellipse at bottom,#fff6b344,transparent 60%);mix-blend-mode:screen;animation:heat-swell 1.5s ease-in-out infinite alternate}.racer-card[data-effect=fire]:has(.is-masked){border-color:#ff9c48;box-shadow:0 0 20px #ff4e1935,0 10px 55px #ff4e1920}.racer-card[data-effect=fire]:has(.is-masked) .racer-meta{background:linear-gradient(110deg,#3c1b0d,#19180f)}
@keyframes inferno-tongue{0%{transform:scale(.8,.72) skewX(-14deg);opacity:.7}40%{transform:scale(1.05,1.12) skewX(9deg);opacity:1}75%{transform:scale(.88,.88) skewX(-3deg);opacity:.9}100%{transform:scale(.94,1.03) skewX(13deg);opacity:.85}}@keyframes inferno-embers{0%{translate:0 0;rotate:-15deg;opacity:0}8%{opacity:1}70%{opacity:.9}100%{translate:var(--drift) -510px;rotate:30deg;opacity:0}}@keyframes heat-swell{from{scale:1;opacity:.5}to{scale:1.2;opacity:.9}}
/* bl1tz.: white-hot branches, broad blue halos and continuous perimeter arcs. */
.fx-lightning{background:radial-gradient(ellipse at 50% 80%,#1949ff28,transparent 75%)}.fx-lightning .lightning-bolts{filter:drop-shadow(0 0 3px #93e8ff) drop-shadow(0 0 9px #218cff)}.fx-lightning .bolt{stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:0;animation:storm-arc var(--bolt-duration) ease-in-out var(--bolt-delay) infinite;opacity:.5}.fx-lightning .bolt-halo{stroke:#3d94ff;stroke-width:8;filter:blur(3px);mix-blend-mode:screen}.fx-lightning .bolt-core{stroke:#f1fcff;stroke-width:2.3;filter:drop-shadow(0 0 2px #fff)}.fx-lightning .bolt-branch.bolt-core{stroke-width:1.3}.fx-lightning .bolt-branch.bolt-halo{stroke-width:6}.fx-lightning .lightning-glow{opacity:.5;background:radial-gradient(ellipse at top right,#72c9ff50,transparent 63%),radial-gradient(ellipse at bottom left,#3f7bff55,transparent 64%);animation:storm-light 2.2s ease-in-out infinite alternate}.racer-card[data-effect=lightning]:has(.is-masked){border-color:#98dfff;box-shadow:0 0 24px #3999ff40,0 10px 55px #287bff20}.racer-card[data-effect=lightning]:has(.is-masked) .racer-meta{background:linear-gradient(110deg,#10233f,#131b23)}.racer-card{transition:border-color .35s,box-shadow .35s}
@keyframes storm-arc{0%{opacity:.16;stroke-dashoffset:35}12%{opacity:1;stroke-dashoffset:0}28%{opacity:.42}42%{opacity:.9;stroke-dashoffset:-15}65%{opacity:.25}100%{opacity:.16;stroke-dashoffset:35}}@keyframes storm-light{from{opacity:.35}to{opacity:.85}}
/* calico: sweeping rubber ribbons with fine tread grain, silver edges and drift haze. */
.fx-tire{background:linear-gradient(0deg,#ad9b7520,transparent 65%);mask-image:radial-gradient(ellipse 35% 24% at 48% 29%,transparent 12%,#000 90%)}.drift-tracks{position:absolute;inset:0;width:100%;height:100%;opacity:.88;filter:drop-shadow(2px 4px 4px #0005)}.drift-track{clip-path:inset(0 0 100% 0);transform-origin:80% 0}.is-masked .drift-track{animation:drift-lay 1.1s cubic-bezier(.2,.7,.15,1) var(--track-delay) both}.drift-track path{stroke-linecap:butt;stroke-linejoin:round}.drift-rim{stroke:#b8b39b;stroke-width:27;opacity:.35}.drift-rubber{stroke:#0a0d0b;stroke-width:25;opacity:.8}.drift-grain{stroke:#958f78;stroke-width:21;stroke-dasharray:1 5;opacity:.28}.drift-center{stroke:#c5b995;stroke-width:1.2;opacity:.3}.drift-haze{position:absolute;width:100%;height:55%;left:-20%;bottom:-12%;border-radius:50%;background:radial-gradient(ellipse,#c2c3b050 0%,#aeaf9b18 34%,transparent 67%);filter:blur(16px);opacity:0;animation:drift-haze 5s ease-out var(--haze-delay) infinite}.drift-haze-1{left:20%;bottom:0%;width:120%;background:radial-gradient(ellipse,#d6c5a830,transparent 65%)}.drift-haze-2{left:-40%;bottom:18%;height:35%}.drift-dust{position:absolute;inset:0;background:radial-gradient(circle at 12% 87%,#e4cfa5aa 0 1px,transparent 2px),radial-gradient(circle at 24% 81%,#e4cfa570 0 1px,transparent 2px),radial-gradient(circle at 79% 65%,#e4cfa570 0 1px,transparent 2px),radial-gradient(circle at 91% 56%,#e4cfa555 0 1px,transparent 2px);animation:drift-dust 3s ease-out infinite;opacity:.7}.racer-card[data-effect=tire]:has(.is-masked){border-color:#a69f82;box-shadow:0 0 20px #a69f821a}.racer-card[data-effect=tire]:has(.is-masked) .racer-meta{background:linear-gradient(115deg,#28281e,#171b15)}
@keyframes drift-lay{from{clip-path:inset(0 0 100% 0);opacity:0}20%{opacity:1}to{clip-path:inset(0);opacity:1}}@keyframes drift-haze{0%{translate:-10px 30px;scale:.8;opacity:0}25%{opacity:.65}100%{translate:45px -65px;scale:1.35;opacity:0}}@keyframes drift-dust{from{translate:0 10px;opacity:0}25%{opacity:.7}to{translate:-15px -45px;opacity:0}}
@media(prefers-reduced-motion:reduce){.portrait-fx{transition:none}.portrait-fx *,.is-masked .portrait-fx *{animation:none!important}.flame{transform:scale(.85,.75);opacity:.7}.code-stream{top:10%;translate:none}.bolt{opacity:.6}.fx-lightning .bolt{opacity:.6;stroke-dashoffset:0}.lightning-glow{opacity:.25}.ember{opacity:0}.floating-gem{bottom:calc(12% + var(--size));opacity:.7}.drift-track{clip-path:inset(0)}.drift-haze{opacity:.25}.drift-dust{opacity:0}}
/* calico: dark mist along the background and shoulders, keeping the face clear. */
.fx-fog{isolation:isolate;mask-image:radial-gradient(ellipse 32% 39% at 50% 43%,transparent 25%,#0008 70%,#000 100%);background:radial-gradient(ellipse at 50% 45%,transparent 20%,#05060855 72%,#000a 100%)}.black-fog{position:absolute;width:145%;height:68%;left:-55%;bottom:-12%;border-radius:48%;background:radial-gradient(ellipse at 38% 55%,#030405ed 0%,#0c0e10d9 24%,#24272b60 46%,transparent 69%);filter:blur(15px);transform-origin:center;opacity:.85;animation:black-fog-roll var(--fog-duration) ease-in-out var(--fog-delay) infinite alternate}.black-fog-1{left:10%;bottom:9%;background:radial-gradient(ellipse,#020304eb 0%,#0a0c0fd9 30%,#31343a45 52%,transparent 72%)}.black-fog-2{left:-58%;bottom:44%;width:125%;height:64%}.black-fog-3{left:30%;bottom:49%;width:115%;height:60%}.black-fog-4{left:-25%;bottom:67%;height:54%;background:radial-gradient(ellipse,#010203cc,#16191c88 35%,transparent 70%)}.black-fog-5{left:-5%;bottom:-28%;height:72%;background:radial-gradient(ellipse,#020304f2,#111418a6 40%,transparent 72%)}.black-fog-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,transparent 32%,#0005 69%,#000d 100%);box-shadow:inset 0 0 45px #000b}.racer-card[data-effect=fog] .portrait-counter:before{background:#a8adb4}.racer-card[data-effect=fog]:has(.is-masked){border-color:#51565e;box-shadow:0 0 26px #0009}.racer-card[data-effect=fog]:has(.is-masked) .racer-meta{background:linear-gradient(115deg,#111316,#171914)}
@keyframes black-fog-roll{0%{translate:-12px 22px;scale:.94;rotate:-8deg;opacity:.65}50%{translate:12px -10px;scale:1.12;rotate:3deg;opacity:.95}100%{translate:34px -35px;scale:1.24;rotate:10deg;opacity:.8}}
@media(prefers-reduced-motion:reduce){.black-fog{animation:none!important;opacity:.8}}
/* Balanced intensity: keep the character effects visible without dominating the portrait. */
.fx-fire{opacity:0}.is-masked .fx-fire{opacity:.72}.fx-fire .flame{height:calc(var(--height)*.8)}.fx-fire .flame:before{opacity:.72}.fx-fire .fire-glow{filter:blur(15px);opacity:.7}.fx-fire .ember:nth-of-type(2n){display:none}.fire-edge{width:15%;opacity:.65}.racer-card[data-effect=fire]:has(.is-masked){border-color:#c77b43;box-shadow:0 0 14px #ff4e1920,0 8px 35px #ff4e1914}
.is-masked .fx-lightning{opacity:.68}.fx-lightning .lightning-bolts{filter:drop-shadow(0 0 2px #93e8ff) drop-shadow(0 0 6px #218cff)}.fx-lightning .bolt-halo{stroke-width:5;filter:blur(2px)}.fx-lightning .bolt-core{stroke-width:1.65}.fx-lightning .bolt-branch.bolt-core{stroke-width:1}.fx-lightning .bolt-branch.bolt-halo{stroke-width:3.5}.racer-card[data-effect=lightning]:has(.is-masked){border-color:#6da9c3;box-shadow:0 0 15px #3999ff25,0 8px 35px #287bff14}
/* calico keeps its dark mist, with restrained twin tire marks around the shoulders. */
.calico-tire-overlay{position:absolute;inset:0;width:100%;height:100%;opacity:.72;filter:drop-shadow(1px 2px 2px #0008)}.calico-tire-band{clip-path:inset(0 0 100% 0)}.is-masked .calico-tire-band{animation:drift-lay 1.1s ease-out both}.is-masked .calico-tire-band:nth-child(2){animation-delay:.08s}.calico-tire-rim{stroke:#b7b8ac;stroke-width:18;opacity:.38}.calico-tire-rubber{stroke:#030504;stroke-width:16;opacity:.9}.calico-tire-grain{stroke:#9da095;stroke-width:13;stroke-dasharray:1 4;opacity:.35}
@media(prefers-reduced-motion:reduce){.calico-tire-band{clip-path:inset(0)}.fx-fire .ember{opacity:0}}
