:root { --tn-accent: #FEDD00; }

.tdf-notify-stack {
  position: fixed;
  top: clamp(14px, 2.4vh, 30px);
  right: clamp(14px, 1.8vw, 34px);
  z-index: 100050;
  display: flex;
  flex-direction: column;
  gap: clamp(9px, 1.1vh, 15px);
  pointer-events: none;
  max-width: min(92vw, 440px);
}

.tn-card {
  --tn-card-bg: rgba(16, 21, 33, 0.92);
  --tn-card-ink: #f2f5fb;
  --tn-card-sub: #aab4c6;
  --tn-card-border: rgba(255, 255, 255, 0.10);
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(11px, 1.1vw, 16px);
  padding: clamp(11px, 1.2vh, 16px) clamp(15px, 1.5vw, 22px) clamp(13px, 1.3vh, 18px) clamp(12px, 1.2vw, 17px);
  min-width: clamp(240px, 21vw, 360px);
  border-radius: 16px;
  background: var(--tn-card-bg);
  color: var(--tn-card-ink);
  border: 1px solid var(--tn-card-border);
  border-left: 4px solid var(--tn-accent);
  box-shadow: 0 16px 44px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.15),
    0 0 26px -8px color-mix(in srgb, var(--tn-accent) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  overflow: hidden;
  opacity: 0;
  transform: translateX(30px) scale(0.94);
  transition: opacity 0.44s cubic-bezier(0.18, 0.9, 0.24, 1.05), transform 0.44s cubic-bezier(0.18, 0.9, 0.24, 1.05);
  will-change: opacity, transform;
}
.tn-card.show { opacity: 1; transform: translateX(0) scale(1); }
.tn-card.leave { opacity: 0; transform: translateX(30px) scale(0.94); }
.tn-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--tn-accent) 16%, transparent) 50%, transparent 62%);
  background-size: 250% 100%;
  animation: tnCardShine 1.1s ease-out 0.15s;
  pointer-events: none;
}
@keyframes tnCardShine { from { background-position: 170% 0; } to { background-position: -90% 0; } }

.tn-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--tn-accent);
  transform-origin: left center;
  animation: tnBar var(--tn-life, 5200ms) linear forwards;
  opacity: 0.85;
}
@keyframes tnBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.tn-ico {
  flex: 0 0 auto;
  width: clamp(32px, 3vw, 44px);
  height: clamp(32px, 3vw, 44px);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--tn-accent) 20%, transparent);
  color: var(--tn-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tn-accent) 35%, transparent),
    0 0 18px -4px color-mix(in srgb, var(--tn-accent) 60%, transparent);
  animation: tnIcoFlip 0.6s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.tn-ico > * { width: 78%; height: 78%; }
.tn-ico .tdf-jersey-svg, .tn-ico svg { width: 82%; height: 82%; }
@keyframes tnIcoFlip { 0% { transform: rotateY(90deg) scale(0.6); opacity: 0; } 100% { transform: rotateY(0) scale(1); opacity: 1; } }

.tn-figure {
  position: relative;
  flex: 0 0 auto;
  width: clamp(38px, 3.6vw, 52px);
  height: clamp(38px, 3.6vw, 52px);
  animation: tnIcoFlip 0.6s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.tn-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: color-mix(in srgb, var(--tn-accent) 26%, #1a2030);
  color: #fff; font-weight: 800; font-size: 0.9em;
  box-shadow: 0 0 0 2px var(--tn-accent), 0 0 16px -3px color-mix(in srgb, var(--tn-accent) 70%, transparent);
}
.tn-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-av-ini { display: none; }
.tn-av-fb .tn-av-ini { display: block; }
.tn-fig-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 46%; height: 46%;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--tn-card-bg, #141a26);
  color: var(--tn-accent);
  box-shadow: 0 0 0 2px var(--tn-card-bg, #141a26), 0 1px 6px rgba(0,0,0,.4);
}
.tn-fig-badge > * { width: 74%; height: 74%; }
.tn-av svg { width: 62%; height: 62%; }

.tn-pass { position: relative; flex: 0 0 auto; display: inline-block; width: clamp(58px, 5.6vw, 80px); height: clamp(38px, 3.6vw, 52px); }
.tn-pass.is-big { width: clamp(108px, 10.5vw, 158px); height: clamp(66px, 6.4vw, 104px); }
.tn-pass-r { position: absolute; top: 0; width: clamp(38px, 3.6vw, 52px); height: 100%; }
.tn-pass.is-big .tn-pass-r { width: clamp(66px, 6.4vw, 104px); }
.tn-pass-r .tn-av { width: 100%; height: 100%; }
.tn-pass-b { left: 0; z-index: 1; filter: saturate(0.65) brightness(0.78); animation: tnPassBack 1.15s cubic-bezier(0.3, 0, 0.4, 1); }
.tn-pass-b .tn-av { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.tn-pass-a { right: 0; z-index: 2; animation: tnPassFwd 1.15s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tn-pass-a::before {
  content: ''; position: absolute; top: 50%; right: 100%; width: 60%; height: 3px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--tn-accent)); border-radius: 2px; opacity: 0;
  animation: tnPassSpeed 1.15s ease-out;
}
@keyframes tnPassFwd { 0% { transform: translateX(16px) scale(0.88); } 60% { transform: translateX(-3px) scale(1.05); } 100% { transform: translateX(0) scale(1); } }
@keyframes tnPassBack { 0% { transform: translateX(-3px); } 100% { transform: translateX(7px); } }
@keyframes tnPassSpeed { 0% { opacity: 0; } 35% { opacity: 0.9; } 100% { opacity: 0; } }

.tn-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; z-index: 1; }
.tn-label {
  font-size: clamp(0.56rem, 0.7vw, 0.68rem);
  font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--tn-accent); filter: brightness(1.08);
}
.tn-title {
  font-size: clamp(0.94rem, 1.15vw, 1.14rem);
  font-weight: 760; line-height: 1.14; color: var(--tn-card-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tn-sub {
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  font-weight: 550; color: var(--tn-card-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.tn-card.k-onfire { animation: tnFirePulse 1.1s ease-in-out infinite alternate, opacity 0.44s, transform 0.44s; }
.tn-card.k-onfire.show { animation: tnFirePulse 1.1s ease-in-out infinite alternate; }
@keyframes tnFirePulse {
  from { box-shadow: 0 16px 44px -12px rgba(0,0,0,.6), 0 0 22px -8px color-mix(in srgb, var(--tn-accent) 40%, transparent); }
  to   { box-shadow: 0 16px 44px -12px rgba(0,0,0,.6), 0 0 40px -4px color-mix(in srgb, var(--tn-accent) 85%, transparent); }
}



.tdf-notify-splash, .tdf-notify-mega {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.45s ease;
  --tn-k: 1;
  --tn-ink: #ffffff;
  --tn-ink-dim: #c9d2e2;
  font-family: 'Saira Condensed', 'Archivo', system-ui, sans-serif;
}
.tdf-notify-splash { z-index: 100051; }
.tdf-notify-mega   { z-index: 100052; --tn-k: 1.22; }
.tdf-notify-splash.show, .tdf-notify-mega.show { opacity: 1; }
.tdf-notify-splash.leave, .tdf-notify-mega.leave { opacity: 0; }

.tn-scene .tn-bgx {
  position: absolute; inset: 0;
  background:
    radial-gradient(120vmax 70vmax at 18% 30%, color-mix(in srgb, var(--tn-accent) 24%, transparent), transparent 55%),
    radial-gradient(ellipse at center, rgba(8, 11, 19, 0.84), rgba(5, 7, 12, 0.94) 78%);
  backdrop-filter: blur(7px) saturate(1.15);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
}
.tn-scene .tn-flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
.tn-scene.show .tn-flash { animation: tnFlash 0.55s ease-out; }

.tn-scene .tn-diag {
  position: absolute; inset: -12% -6%;
  background:
    linear-gradient(104deg, transparent 0 7%, color-mix(in srgb, var(--tn-accent) 82%, #000 6%) 7% 11.4%, transparent 11.4% 100%),
    linear-gradient(104deg, transparent 0 12.6%, color-mix(in srgb, var(--tn-accent) 34%, transparent) 12.6% 14.6%, transparent 14.6% 100%),
    linear-gradient(104deg, transparent 0 86%, rgba(255, 255, 255, 0.07) 86% 96%, transparent 96% 100%);
  opacity: 0; transform: translateX(-9%);
}
.tn-scene.show .tn-diag { animation: tnDiagIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.06s forwards; }
@keyframes tnDiagIn { 0% { opacity: 0; transform: translateX(-9%); } 100% { opacity: 1; transform: translateX(0); } }

.tn-scene .tn-speed {
  position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(100deg,
    transparent 0 42px,
    color-mix(in srgb, var(--tn-accent) 15%, transparent) 42px 45px);
}
.tn-scene.show .tn-speed { animation: tnSpeedSweep 1s ease-out 0.1s; }
@keyframes tnSpeedSweep { 0% { opacity: 0; transform: translateX(10%); } 28% { opacity: 0.85; } 100% { opacity: 0; transform: translateX(-9%); } }

.tn-scene .tn-checker {
  position: absolute; left: -4%; right: -4%; bottom: 11vh; height: clamp(34px, 5.2vh, 62px);
  background: repeating-conic-gradient(#f4f6fa 0% 25%, #0c0f16 25% 50%) 0 0 / clamp(17px, 2.6vh, 31px) clamp(17px, 2.6vh, 31px);
  transform: skewY(-1.6deg);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 18px 44px -14px rgba(0, 0, 0, 0.7);
  opacity: 0;
}
.tn-scene.show .tn-checker { animation: tnCheckerIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s forwards; }
@keyframes tnCheckerIn { 0% { opacity: 0; transform: skewY(-1.6deg) translateX(14%); } 100% { opacity: 0.92; transform: skewY(-1.6deg) translateX(0); } }

.tn-scene .tn-stagebox {
  position: relative; z-index: 3;
  display: flex; align-items: center;
  gap: calc(clamp(26px, 3.4vw, 64px) * var(--tn-k));
  max-width: 86vw;
  padding: 0 3vw;
}

.tn-scene .tn-ghost {
  position: absolute; top: 50%; right: -3vw; z-index: 1; pointer-events: none;
  width: 66vh; height: 66vh; color: var(--tn-accent);
  transform: translateY(-50%) rotate(-9deg) scale(1.12); opacity: 0;
}
.tn-scene .tn-ghost svg { width: 100%; height: 100%; opacity: 0.62; filter: drop-shadow(0 0 60px color-mix(in srgb, var(--tn-accent) 45%, transparent)); }
.tn-scene.show .tn-ghost { animation: tnGhostIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }
@keyframes tnGhostIn { 0% { opacity: 0; transform: translateY(-50%) rotate(-9deg) scale(1.3); } 100% { opacity: 0.13; transform: translateY(-50%) rotate(-9deg) scale(1.12); } }
.tdf-notify-mega .tn-ghost { width: 82vh; height: 82vh; }
.tn-scene.is-reduced .tn-ghost { animation: none !important; opacity: 0.1 !important; transform: translateY(-50%) rotate(-9deg) scale(1.12) !important; }

.tn-scene .tn-fig {
  position: relative; flex: 0 0 auto;
  width: calc(clamp(190px, 21vw, 330px) * var(--tn-k));
  height: calc(clamp(190px, 21vw, 330px) * var(--tn-k));
  display: flex; align-items: center; justify-content: center;
}
.tn-scene .tn-rays {
  position: absolute; left: 50%; top: 50%; width: 340%; height: 340%;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 8deg,
    color-mix(in srgb, var(--tn-accent) 20%, transparent) 0deg 7deg,
    transparent 7deg 17deg);
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 66%);
  mask-image: radial-gradient(circle, #000 22%, transparent 66%);
  opacity: 0;
}
.tn-scene.show .tn-rays { animation: tnRaysSpin 4.4s linear 0.12s; }
@keyframes tnRaysSpin { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); } 10% { opacity: 0.85; } 88% { opacity: 0.85; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(34deg); } }
.tn-scene .tn-motif {
  position: relative; z-index: 1; width: 84%; height: 84%;
  display: flex; align-items: center; justify-content: center;
  color: var(--tn-accent);
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 34px color-mix(in srgb, var(--tn-accent) 55%, transparent));
  transform: scale(0.4) rotate(-8deg); opacity: 0;
}
.tn-scene.show .tn-motif { animation: tnMotifPop 0.72s cubic-bezier(0.18, 1.5, 0.32, 1) 0.1s forwards; }
@keyframes tnMotifPop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
.tn-scene .tn-motif svg { width: 100%; height: 100%; }
.tn-scene .tn-motif .tdf-jsvg svg, .tn-scene .tn-motif > svg { width: 100%; height: 100%; }
.tn-scene.k-onfire .tn-motif { transform-origin: 50% 78%; }
.tn-scene.k-onfire.show .tn-motif { animation: tnMotifPop 0.72s cubic-bezier(0.18, 1.5, 0.32, 1) 0.1s forwards, tnFirePump 0.9s ease-in-out 0.9s 3 alternate; }
@keyframes tnFirePump { from { transform: scale(1); } to { transform: scale(1.06); } }

.tn-scene .tn-medal {
  position: absolute; z-index: 2; right: 2%; bottom: 1%;
  width: 44%; height: 44%; border-radius: 50%; overflow: hidden;
  background: #10151f;
  box-shadow: 0 0 0 calc(3px * var(--tn-k)) #fff,
              0 0 0 calc(8px * var(--tn-k)) var(--tn-accent),
              0 18px 40px -8px rgba(0, 0, 0, 0.7),
              0 0 56px -6px color-mix(in srgb, var(--tn-accent) 70%, transparent);
  transform: scale(0); opacity: 0;
  display: flex; align-items: center; justify-content: center;
}
.tn-scene.show .tn-medal { animation: tnMedalPop 0.6s cubic-bezier(0.2, 1.6, 0.36, 1) 0.34s forwards; }
@keyframes tnMedalPop { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.tn-scene .tn-medal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-scene .tn-medal .tn-medal-ini { display: none; }
.tn-scene .tn-medal.tn-medal-fb .tn-medal-ini {
  display: block; font-weight: 800; font-style: italic; color: #fff;
  font-size: calc(clamp(2rem, 3.4vw, 3.4rem) * var(--tn-k));
}

.tn-scene .tn-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 52vw; }

.tn-scene .tn-plate {
  display: inline-block; transform: skewX(-10deg) translateX(-120%); opacity: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tn-accent) 92%, #fff 8%), var(--tn-accent));
  box-shadow: 0 8px 26px -8px color-mix(in srgb, var(--tn-accent) 80%, transparent), 0 2px 0 rgba(0,0,0,.25) inset;
  padding: calc(0.3em * var(--tn-k)) calc(1.05em * var(--tn-k)) calc(0.24em * var(--tn-k));
  margin-bottom: calc(clamp(8px, 1.2vh, 16px) * var(--tn-k));
  border-left: calc(6px * var(--tn-k)) solid rgba(0, 0, 0, 0.38);
}
.tn-scene.show .tn-plate { animation: tnPlateIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.16s forwards; }
@keyframes tnPlateIn { 0% { transform: skewX(-10deg) translateX(-120%); opacity: 0; } 100% { transform: skewX(-10deg) translateX(0); opacity: 1; } }
.tn-scene .tn-plate span {
  display: inline-block; transform: skewX(10deg);
  font-weight: 800; font-style: italic; text-transform: uppercase; letter-spacing: 0.1em;
  color: #0b0e14;
  font-size: calc(clamp(0.95rem, 1.55vw, 1.6rem) * var(--tn-k));
}
.tn-scene.k-milestone .tn-plate {
  background: #f7f8fb;
  background-image: radial-gradient(circle at 5px 5px, rgba(200, 16, 46, 0.20) 2.2px, transparent 2.8px);
  background-size: 15px 15px;
  border-left-color: #C8102E;
}
.tn-scene.k-milestone .tn-plate span { color: #C8102E; }

.tn-scene .tn-name {
  font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: calc(clamp(2.7rem, 5.6vw, 6rem) * var(--tn-k));
  line-height: 0.98; letter-spacing: 0.005em;
  color: var(--tn-ink);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.28), 0 14px 44px rgba(0, 0, 0, 0.6);
  transform: translateY(26px); opacity: 0; filter: blur(6px);
  overflow-wrap: anywhere;
}
.tn-scene.show .tn-name { animation: tnNameIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.24s forwards; }
@keyframes tnNameIn { 0% { transform: translateY(26px); opacity: 0; filter: blur(6px); } 100% { transform: translateY(0); opacity: 1; filter: blur(0); } }

.tn-scene .tn-namebar {
  height: calc(clamp(6px, 0.62vw, 11px) * var(--tn-k));
  width: 0; opacity: 0.95;
  margin: calc(clamp(6px, 1vh, 12px) * var(--tn-k)) 0;
  background: linear-gradient(90deg, var(--tn-accent), color-mix(in srgb, var(--tn-accent) 30%, transparent));
  transform: skewX(-24deg);
  box-shadow: 0 0 24px -2px color-mix(in srgb, var(--tn-accent) 70%, transparent);
}
.tn-scene.show .tn-namebar { animation: tnBarWipe 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards; }
@keyframes tnBarWipe { 0% { width: 0; } 100% { width: clamp(140px, 16vw, 300px); } }

.tn-scene .tn-sub {
  font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: calc(clamp(1.15rem, 2.1vw, 2.2rem) * var(--tn-k));
  color: color-mix(in srgb, var(--tn-accent) 72%, #fff);
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(14px);
}
.tn-scene.show .tn-sub { animation: tnSubIn 0.5s ease-out 0.5s forwards; }
@keyframes tnSubIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }

.tn-scene .tn-duel {
  display: flex; align-items: center;
  gap: calc(clamp(8px, 0.9vw, 14px) * var(--tn-k));
  margin-top: calc(clamp(10px, 1.6vh, 20px) * var(--tn-k));
  opacity: 0;
}
.tn-scene.show .tn-duel { animation: tnDuelIn 0.55s ease-out 0.62s forwards; }
@keyframes tnDuelIn { 0% { opacity: 0; transform: translateX(18px); } 100% { opacity: 1; transform: translateX(0); } }
.tn-scene .tn-duel-lbl {
  font-weight: 700; font-style: italic; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: calc(clamp(0.8rem, 1.15vw, 1.15rem) * var(--tn-k));
  color: var(--tn-ink-dim);
}
.tn-scene .tn-duel-rival { display: inline-flex; align-items: center; gap: calc(clamp(7px, 0.7vw, 11px) * var(--tn-k)); animation: tnRivalDrift 2.6s ease-in-out 1s forwards; }
@keyframes tnRivalDrift { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(-10px); opacity: 0.72; } }
.tn-scene .tn-duel-rival .tn-av {
  width: calc(clamp(34px, 3vw, 52px) * var(--tn-k)); height: calc(clamp(34px, 3vw, 52px) * var(--tn-k));
  border-radius: 50%; overflow: hidden; flex: 0 0 auto; position: relative;
  background: #131926; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 6px 18px -6px rgba(0, 0, 0, 0.6);
  filter: saturate(0.75);
}
.tn-scene .tn-duel-rival .tn-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tn-scene .tn-duel-rival .tn-av .tn-av-ini { font-weight: 800; font-style: italic; color: #dfe5f0; font-size: calc(clamp(0.85rem, 1vw, 1.1rem) * var(--tn-k)); }
.tn-scene .tn-duel-name {
  font-weight: 700; font-style: italic; text-transform: uppercase;
  font-size: calc(clamp(1rem, 1.5vw, 1.5rem) * var(--tn-k));
  color: var(--tn-ink-dim);
}

.tn-scene .tn-roadline {
  position: absolute; left: 0; right: 0; bottom: 8.2vh; height: 3px; opacity: 0.35;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 44px, transparent 44px 92px);
}
.tn-scene .tn-rider { position: absolute; color: var(--tn-accent); opacity: 0; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--tn-accent) 70%, transparent)); }
.tn-scene .tn-rider svg { width: 100%; height: auto; }
.tn-scene .tn-rider-1 { bottom: 9vh; width: calc(clamp(80px, 8vw, 150px) * var(--tn-k)); }
.tn-scene .tn-rider-2 { bottom: 12.6vh; width: calc(clamp(56px, 5.6vw, 104px) * var(--tn-k)); }
.tn-scene.show .tn-rider-1 { animation: tnRide 2.4s cubic-bezier(0.3, 0, 0.42, 1) 0.18s; }
.tn-scene.show .tn-rider-2 { animation: tnRide 2.4s cubic-bezier(0.3, 0, 0.42, 1) 0.55s; }
@keyframes tnRide {
  0% { opacity: 0; transform: translateX(-16vw); }
  12% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(112vw); }
}

.tdf-notify-mega .tn-bgx { backdrop-filter: blur(9px) saturate(1.2); -webkit-backdrop-filter: blur(9px) saturate(1.2); }
.tdf-notify-mega .tn-name { font-size: calc(clamp(3.2rem, 6.8vw, 7.6rem) * 1); }
.tdf-notify-mega .tn-rays { width: 420%; height: 420%; }

.tn-scene.k-reward .tn-name {
  color: #FEDD00;
  -webkit-text-stroke: 2px #C9972B;
  text-shadow: 0 4px 0 rgba(160, 110, 0, 0.55), 0 18px 60px rgba(254, 221, 0, 0.55), 0 0 90px rgba(254, 221, 0, 0.4);
}
.tdf-notify-mega.k-reward .tn-name { font-size: calc(clamp(3.2rem, 6.8vw, 7.6rem) * 1.15); }
.tn-scene.k-reward.show .tn-name {
  animation: tnNameIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.24s forwards, tnCoinPulse 0.9s ease-in-out 1s 4 alternate;
}
@keyframes tnCoinPulse { from { transform: scale(1); } to { transform: scale(1.07); } }
.tn-scene.k-reward .tn-sub { font-weight: 800; letter-spacing: 0.02em; }
.tn-scene.k-reward .tn-motif svg { filter: drop-shadow(0 0 28px rgba(254, 221, 0, 0.65)); }
.tn-scene.k-reward.is-reduced .tn-name { animation: none; }

.tn-scene .tn-coins { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.tn-scene .tn-coin {
  position: absolute; left: 50%; top: 56%; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  will-change: transform, opacity; opacity: 0;
  filter: drop-shadow(0 7px 11px rgba(0, 0, 0, 0.4));
  animation: tnCoinFly var(--cdur, 1.6s) cubic-bezier(0.22, 0.62, 0.3, 1) both;
}
.tn-scene .tn-coin svg { width: 100%; height: 100%; display: block; }
@keyframes tnCoinFly {
  0%   { transform: translate(0, 0) scale(0.35) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  42%  { transform: translate(calc(var(--tx) * 0.5), var(--peak)) scale(1) rotate(calc(var(--rot) * 0.5)); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--fall)) scale(0.82) rotate(var(--rot)); opacity: 0; }
}
.tn-scene.is-reduced .tn-coins { display: none; }
@media (prefers-reduced-motion: reduce) { .tn-scene .tn-coins { display: none !important; } }

.tn-scene.tn-skin-lys { --tn-ink: #10151f; --tn-ink-dim: #46506a; }
.tn-scene.tn-skin-lys .tn-bgx {
  background:
    radial-gradient(120vmax 70vmax at 18% 30%, color-mix(in srgb, var(--tn-accent) 30%, transparent), transparent 55%),
    radial-gradient(ellipse at center, rgba(244, 246, 251, 0.88), rgba(226, 231, 240, 0.95) 78%);
}
.tn-scene.tn-skin-lys .tn-name { text-shadow: 0 3px 0 rgba(255, 255, 255, 0.5), 0 12px 34px rgba(20, 30, 60, 0.35); }
.tn-scene.tn-skin-lys .tn-sub { color: color-mix(in srgb, var(--tn-accent) 62%, #1c2434); text-shadow: none; }
.tn-scene.tn-skin-lys .tn-checker { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4), 0 18px 44px -14px rgba(20, 30, 60, 0.4); }
.tn-scene.tn-skin-gul .tn-bgx {
  background:
    radial-gradient(120vmax 70vmax at 18% 30%, color-mix(in srgb, var(--tn-accent) 30%, transparent), transparent 55%),
    radial-gradient(ellipse at center, rgba(26, 22, 6, 0.86), rgba(14, 12, 5, 0.94) 78%);
}

.tn-scene.is-reduced .tn-flash, .tn-scene.is-reduced .tn-speed,
.tn-scene.is-reduced .tn-rider, .tn-scene.is-reduced .tn-rays { animation: none !important; opacity: 0 !important; }
.tn-scene.is-reduced .tn-diag, .tn-scene.is-reduced .tn-checker { animation: none !important; opacity: 0.9; transform: none; }
.tn-scene.is-reduced .tn-motif, .tn-scene.is-reduced .tn-medal, .tn-scene.is-reduced .tn-name,
.tn-scene.is-reduced .tn-sub, .tn-scene.is-reduced .tn-duel, .tn-scene.is-reduced .tn-plate { animation: none !important; opacity: 1; transform: none; filter: none; }
.tn-scene.is-reduced .tn-namebar { animation: none !important; width: clamp(140px, 16vw, 300px); }
@media (prefers-reduced-motion: reduce) {
  .tn-scene .tn-flash, .tn-scene .tn-speed, .tn-scene .tn-rider, .tn-scene .tn-rays { animation: none !important; opacity: 0 !important; }
  .tn-scene .tn-diag, .tn-scene .tn-checker { animation: none !important; opacity: 0.9; transform: none; }
  .tn-scene .tn-motif, .tn-scene .tn-medal, .tn-scene .tn-name,
  .tn-scene .tn-sub, .tn-scene .tn-duel, .tn-scene .tn-plate { animation: none !important; opacity: 1; transform: none; filter: none; }
  .tn-scene .tn-namebar { animation: none !important; width: clamp(140px, 16vw, 300px); }
}

.tn-skin-karbon .tn-card { --tn-card-bg: rgba(9, 11, 17, 0.95); --tn-card-ink: #eef1f7; --tn-card-sub: #97a0b2; --tn-card-border: rgba(255, 255, 255, 0.07); }
.tn-skin-gul .tn-card {
  --tn-card-bg: linear-gradient(135deg, rgba(38, 32, 6, 0.95), rgba(24, 21, 8, 0.95));
  --tn-card-ink: #fff6d6; --tn-card-sub: #d8c98f; --tn-card-border: color-mix(in srgb, var(--tn-accent) 30%, transparent);
}
.tn-skin-glas .tn-card { --tn-card-bg: rgba(28, 34, 48, 0.55); --tn-card-ink: #f4f7fc; --tn-card-sub: #c3cbdb; --tn-card-border: rgba(255, 255, 255, 0.16); backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); }
.tn-skin-lys .tn-card { --tn-card-bg: rgba(255, 255, 255, 0.95); --tn-card-ink: #141a26; --tn-card-sub: #5a6478; --tn-card-border: rgba(0, 0, 0, 0.08); box-shadow: 0 14px 38px -12px rgba(20, 30, 60, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.tn-skin-lys .tn-fig-badge { background: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 6px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) {
  .tn-card, .tn-card.show, .tn-card.leave { transition: opacity 0.28s ease; transform: none; }
  .tn-card::before, .tn-bar, .tn-ico, .tn-figure { animation: none; }
  .tn-pass-a, .tn-pass-b, .tn-pass-a::before { animation: none; }
  .tn-pass-b { transform: translateX(7px); }
}