@font-face {
  font-family: VerdanaLocal;
  src: url("/verdana.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root{
  --bg:#f6f6f6;
  --panel:#ffffff;
  --accent:#2b7a78;
  --muted:#666;
  --text: #111;
  --control-bg: #fff;
  --control-border: rgba(0,0,0,0.08);
  --button-text: #111;
}

/* dark theme overrides */
:root[data-theme="dark"],
[data-theme="dark"] {
  --bg: #0b0f16;
  --panel: #0f1720;
  --accent: #59c1b4;
  --muted: #9aa4ad;
  --text: #e6eef0;
  --control-bg: #0f1720;
  --control-border: rgba(255,255,255,0.06);
  --button-text: #e6eef0;
}

/* apply theme-aware variables to existing elements */
html,body{background:var(--bg);color:var(--text)}
.controls{background:var(--panel);border:1px solid var(--control-border)}
.controls button{background:var(--control-bg);color:var(--button-text);border:1px solid var(--control-border)}
.controls input[type="number"]{background:transparent;color:var(--text);border:1px solid var(--control-border)}
main{background:var(--panel);color:var(--text)}
.name{color:var(--text)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:VerdanaLocal,Arial,Helvetica,sans-serif;background:var(--bg);color:#111}
body{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px;gap:12px}
.controls{width:100%;max-width:1200px;background:var(--panel);border-radius:10px;padding:12px;box-shadow:0 4px 12px rgba(0,0,0,0.06)}
.controls .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.controls .row.small{font-size:13px;color:var(--muted)}
.controls button{
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--button-text);
  cursor:pointer;
}
.controls input[type="number"]{width:80px;padding:6px;border-radius:6px;border:1px solid #ccc}
main{width:100%;max-width:1200px;background:var(--panel);border-radius:12px;padding:22px;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.name{font-size:22px;line-height:1.25;text-align:center;color:#0b3b3a}

/* fullscreen styles for the number word element */
.name:fullscreen,
.name:-webkit-full-screen,
.name:-moz-full-screen,
.name:-ms-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin: 0;
  background: var(--panel);
  box-shadow: none;
  z-index: 9999;
  font-size: clamp(32px, 8vw + 8px, 120px);
  line-height: 1.05;
  text-align: center;
  overflow: hidden;
}

/* ensure the content inside .name wraps nicely and stays centered */
.name:fullscreen > * {
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
  text-align: center;
  word-break: break-word;
}
.numeric{font-size:40px;font-weight:700;color:var(--accent);margin-top:8px;text-align:center}

/* highlight all 'illion' substrings (default) */
.illion{ color: #b33; font-weight:600; }

/* Tier color palette (tier1..tier12). Adjusted contrast for readability. */
.tier1    { color: #1b5e20; font-weight:600; } /* deep green */
.tier2    { color: #0b5394; font-weight:600; } /* blue */
.tier3    { color: #7f6000; font-weight:600; } /* brown/gold */
.tier4    { color: #6a1b9a; font-weight:600; } /* purple */
.tier5    { color: #c62828; font-weight:600; } /* red */
.tier6    { color: #2e7d32; font-weight:600; } /* green variant */
.tier7    { color: #1565c0; font-weight:600; } /* blue variant */
.tier8    { color: #ad1457; font-weight:600; } /* magenta */
.tier9    { color: #ef6c00; font-weight:600; } /* orange */
.tier10   { color: #6d4c41; font-weight:600; } /* brown */
.tier11   { color: #00897b; font-weight:600; } /* teal */
.tier12   { color: #4527a0; font-weight:600; } /* indigo */
.tier13   { color: #0a8754; font-weight:700; } /* sea green for Tier 13 */
.tier14   { color: #b21f6f; font-weight:700; animation: hueShift 6s linear infinite; } /* animated hue for Tier 14 */

/* hue-rotation animation for tier14 to give a subtle shifting color */
@keyframes hueShift {
  0%   { filter: hue-rotate(0deg); }
  50%  { filter: hue-rotate(45deg); }
  100% { filter: hue-rotate(0deg); }
}

/* Tier 15: light pastel color for very-high tiers */
.tier15   { color: #e8aef0; font-weight:700; } /* light pastel (soft pink-lavender) */
/* Tier 16: very light, readable color for the highest tier */
.tier16   { color: #f6e7ff; font-weight:700; } /* ultra-light lavender */
/* Tier 17: very light warm/cream color for the next highest tier */
.tier17   { color: #fff5e1; font-weight:700; } /* ultra-light cream */
/* Tier 18: light colored variant for even higher tiers */
.tier18   { color: #e7fff2; font-weight:700; } /* pale mint/seafoam for Tier 18 */
/* Tier 19: light colored variant (added) */
.tier19   { color: #fff0d9; font-weight:700; } /* pale warm peach for Tier 19 */
/* Tier 20: dark colored variant for highest-extreme tier */
.tier20   { color: #0b0f1a; font-weight:700; } /* very dark navy/charcoal for Tier 20 */
/* Tier 21: darkest variant for the ultra-extreme tier */
.tier21   { color: #05060a; font-weight:700; } /* near-black deep charcoal for Tier 21 */
/* Tier 22: dark-colored variant for an additional ultra-extreme tier */
.tier22   { color: #001018; font-weight:700; } /* deep midnight navy for Tier 22 */
/* Tier 23: dark-colored variant (added) */
.tier23   { color: #020306; font-weight:700; } /* near-black obsidian for Tier 23 */
/* Tier 24: additional dark-colored ultra-extreme tier */
.tier24   { color: #000408; font-weight:700; } /* absolute obsidian / deepest near-black for Tier 24 */
/* Tier 25: added dark-colored ultra-extreme tier */
.tier25   { color: #03050a; font-weight:700; } /* near-absolute black with a hint of navy for Tier 25 */
/* Tier 26: new dark-colored ultra-extreme tier */
.tier26   { color: #00010a; font-weight:700; } /* deepest near-black with a subtle cool tint for Tier 26 */
/* Tier 27: new deep, nearly-black tier for extended ultra-extreme values */
.tier27   { color: #000006; font-weight:700; } /* absolute near-black with an ultra-cool tint for Tier 27 */
/* Tier 28: additional dark-colored ultra-extreme tier */
.tier28   { color: #000003; font-weight:700; } /* ultra near-black / deepest tint for Tier 28 */
/* Tier 29: added darkest/near-absolute-black for the new ultra-extreme tier */
.tier29   { color: #000001; font-weight:700; } /* nearly absolute black for Tier 29 */

/* Tier 30: gradient-colored ultra-extreme tier */
.tier30 {
  font-weight: 800;
  background: linear-gradient(135deg, #ff6a00 0%, #ff0080 35%, #8a3ffc 65%, #00c6ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* Tier 31: gradient-colored ultra-extreme tier */
.tier31 {
  font-weight: 900;
  /* cool-to-warm diagonal gradient clipped to text for a distinct ultra-extreme look */
  background: linear-gradient(135deg, #00ffd5 0%, #00b4ff 30%, #7a4bff 65%, #ff4db6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* Tier 32: new gradient-colored ultra-extreme tier */
.tier32 {
  font-weight: 900;
  /* bold multi-stop gradient shifted toward vivid neon hues, clipped to text */
  background: linear-gradient(120deg, #00ff9e 0%, #00c6ff 25%, #8a3ffc 60%, #ff0066 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 12px rgba(0,0,0,0.45);
}

/* Tier 33: gradient-colored ultra-extreme tier (new) */
.tier33 {
  font-weight: 900;
  background: linear-gradient(135deg, #ff3cac 0%, #ffbd00 25%, #00d4ff 60%, #8aff6e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

/* Tier 34: gradient-colored ultra-extreme tier */
.tier34 {
  font-weight: 900;
  /* bold cinematic gradient clipped to text for a dramatic ultra-extreme look */
  background: linear-gradient(135deg, #00ffd2 0%, #00aaff 28%, #7b5bff 62%, #ff2d9c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 5px 18px rgba(0,0,0,0.55);
}

/* Tier 35: new gradient-colored ultra-extreme tier */
.tier35 {
  font-weight: 900;
  /* vivid multi-stop aurora gradient clipped to text for an elevated ultra-extreme look */
  background: linear-gradient(120deg, #00ffd8 0%, #00a8ff 20%, #6b5bff 45%, #ff6ab3 70%, #ffd66b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 22px rgba(0,0,0,0.6);
}

/* Tier 36: added gradient-colored ultra-extreme tier */
.tier36 {
  font-weight: 900;
  /* dramatic multi-hue gradient clipped to text for the new top-tier effect */
  background: linear-gradient(120deg, #ff416c 0%, #ff4b2b 25%, #ffd200 50%, #3be0ff 75%, #7bff6e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 26px rgba(0,0,0,0.65);
}

/* Tier 37: new gradient-colored ultra-extreme tier */
.tier37 {
  font-weight: 900;
  /* luminous aurora gradient clipped to text for a fresh apex-tier look */
  background: linear-gradient(135deg, #00ffd1 0%, #00b3ff 25%, #7a5bff 55%, #ff5ea8 80%, #ffb84d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,0.66);
}

/* Tier 38: new gradient-colored ultra-extreme tier */
.tier38 {
  font-weight: 900;
  /* dramatic sunrise gradient clipped to text for a distinct apex-tier look */
  background: linear-gradient(135deg, #ff7a18 0%, #ffb347 30%, #ffd86b 60%, #ff5fc4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 32px rgba(0,0,0,0.68);
}

/* Tier 39: latest gradient-colored apex tier */
.tier39 {
  font-weight: 900;
  /* bold aurora-to-solar gradient clipped to text for a standout apex-tier appearance */
  background: linear-gradient(145deg, #00ffe1 0%, #4bc0ff 25%, #7b5bff 55%, #ff6ad5 80%, #ffd86b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 12px 36px rgba(0,0,0,0.7);
}

/* Tier 40: animated rainbow text effect for extremely large illion names */
.tier40 {
  font-weight: 900;
  background: linear-gradient(90deg,
    #ff0000 0%, #ff7f00 14%, #ffff00 28%, #00ff00 42%, #0000ff 56%, #4b0082 70%, #8f00ff 84%, #ff0000 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 24px rgba(0,0,0,0.6);
  animation: rainbowShift 6s linear infinite;
}

/* Tier 41: pronounced textured/glow text effect for enormous illion names */
.tier41 {
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #fff 0%, #ffeaa7 20%, #ffd1ff 45%, #c3f7ff 70%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    0 6px 30px rgba(255,160,200,0.08),
    0 12px 60px rgba(0,200,255,0.04);
  /* subtle shimmer to emphasize ultra-extreme tier */
  background-size: 200% 100%;
  animation: shimmer41 7s linear infinite;
  transform: translateZ(0); /* promote to its own rendering layer */
}

/* Tier 42: pronounced oversized textured/glow + stroke for "Alot Of Larger illion Names 2.0" */
.tier42 {
  display: inline-block;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.02em;
  /* layered multi-stop gradient for a textured look */
  background: linear-gradient(90deg, #fff 0%, #ffeecf 10%, #ffd1ff 30%, #d1f0ff 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* strong multi-layer glow and subtle black stroke effect */
  text-shadow:
    0 2px 6px rgba(255,220,240,0.12),
    0 8px 28px rgba(200,180,255,0.08),
    0 18px 54px rgba(0,200,255,0.04),
    0 0 0 1px rgba(0,0,0,0.18);
  /* faux stroke by using text-shadow spread combined with a thin backdrop-filter */
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.25);
  transform: translateZ(0);
  /* gentle pulsate to draw attention for very large names */
  animation: tier42Pulse 6.5s ease-in-out infinite;
  font-size: 1.02em; /* scaled slightly so tier spans remain consistent */
}

/* pulse animation for tier42 */
@keyframes tier42Pulse {
  0%   { filter: drop-shadow(0 6px 28px rgba(0,0,0,0.55)) saturate(1); transform: scale(1) translateZ(0); }
  50%  { filter: drop-shadow(0 14px 44px rgba(0,0,0,0.66)) saturate(1.08); transform: scale(1.03) translateZ(0); }
  100% { filter: drop-shadow(0 6px 28px rgba(0,0,0,0.55)) saturate(1); transform: scale(1) translateZ(0); }
}

/* Tier 43: "Alot Of Larger illion Names 3.0" — pronounced metallic/iridescent text effect */
.tier43 {
  font-weight: 900;
  letter-spacing: 0.01em;
  display: inline-block;
  /* polished chrome + iridescent overlay clipped to text */
  background: linear-gradient(90deg, #f8f9fb 0%, #d6e3ff 18%, #ffd6f0 38%, #ffe9b8 62%, #f1fff8 85%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* pronounced multi-layer glow with subtle metallic sheen */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.08) inset,
    0 6px 24px rgba(200,180,255,0.08),
    0 14px 48px rgba(0,180,255,0.06);
  -webkit-text-stroke: 0.8px rgba(0,0,0,0.18);
  transform: translateZ(0);
  /* sweeping glossy highlight + slow scale for presence */
  animation: tier43Gloss 6.8s linear infinite, tier43Pulse 8s ease-in-out infinite;
  font-size: clamp(20px, 4.5vw, 88px);
  will-change: transform, background-position;
}

/* glossy sweep for tier43 */
@keyframes tier43Gloss {
  0% { background-position: 0% 50%; filter: saturate(1); }
  50% { background-position: 100% 50%; filter: saturate(1.06) drop-shadow(0 8px 28px rgba(0,0,0,0.12)); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* slow, subtle pulsing scale for tier43 */
@keyframes tier43Pulse {
  0% { transform: translateZ(0) scale(1); }
  50% { transform: translateZ(0) scale(1.035); }
  100% { transform: translateZ(0) scale(1); }
}

/* Tier 44: "Alot Of Larger illion Names 4.0" — pronounced textured stroke + kinetic shimmer */
.tier44 {
  font-weight: 900;
  display: inline-block;
  letter-spacing: 0.01em;
  background: linear-gradient(90deg, #fff 0%, #ffe8d6 12%, #ffd6ff 28%, #d6f7ff 52%, #f8ffd6 78%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* stronger multi-layer glow + thin dark stroke for contrast */
  text-shadow:
    0 2px 6px rgba(255,255,255,0.12) inset,
    0 6px 22px rgba(180,160,220,0.09),
    0 14px 42px rgba(0,160,200,0.06),
    0 0 0 1px rgba(0,0,0,0.22);
  -webkit-text-stroke: 1px rgba(0,0,0,0.22);
  transform: translateZ(0);
  /* kinetic shimmer and subtle scale to emphasize mega-tier names */
  animation: tier44Shimmer 7.5s linear infinite, tier44Pulse 9s ease-in-out infinite;
  font-size: clamp(22px, 5vw, 96px);
  will-change: transform, background-position, filter;
}

/* shimmer sweep for tier44 */
@keyframes tier44Shimmer {
  0% { background-position: -25% 50%; filter: saturate(1); opacity: 0.96; }
  30% { background-position: 40% 50%; filter: saturate(1.08) drop-shadow(0 12px 34px rgba(0,0,0,0.12)); opacity: 1; }
  70% { background-position: 75% 50%; filter: saturate(1.02); opacity: 0.98; }
  100% { background-position: -25% 50%; filter: saturate(1); opacity: 0.96; }
}

/* slow pulsing scale for tier44 */
@keyframes tier44Pulse {
  0% { transform: translateZ(0) scale(1); filter: drop-shadow(0 6px 22px rgba(0,0,0,0.5)); }
  50% { transform: translateZ(0) scale(1.045); filter: drop-shadow(0 18px 48px rgba(0,0,0,0.58)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 6px 22px rgba(0,0,0,0.5)); }
}
}

/* shimmer for tier41 to create a soft traveling highlight */
@keyframes shimmer41 {
  0% { background-position: 0% 50%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 12px 36px rgba(0,0,0,0.45)); }
  100% { background-position: 0% 50%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
}

/* subtle horizontal pan animation for the rainbow effect */
@keyframes rainbowShift {
  0% { background-position: 0% 50%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)); }
  100% { background-position: 0% 50%; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
}

/* Tier 45: "Alot Of Larger illion Names 5.0" — pronounced kinetic metallic + chromatic-texture effect */
.tier45 {
  display: inline-block;
  font-weight: 950;
  letter-spacing: 0.01em;
  /* layered metallic base with chromatic sheen overlay */
  background:
    linear-gradient(90deg, #f5f7fa 0%, #dfe8ff 18%, #ffdff2 38%, #fff8d8 62%, #e8fffb 85%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,80,160,0.06), rgba(80,160,255,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* multi-layer strokes and glows for depth */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 6px 18px rgba(0,0,0,0.28),
    0 12px 40px rgba(0,120,200,0.06);
  -webkit-text-stroke: 1px rgba(10,10,10,0.22);
  transform: translateZ(0);
  /* dual animations: a slow chroma shift + subtle metallic ripple */
  animation: tier45Chroma 6.8s ease-in-out infinite, tier45Ripple 9.2s ease-in-out infinite;
  font-size: clamp(22px, 5vw, 96px);
  will-change: transform, background-position, filter;
}

/* soft chromatic sweep that subtly shifts the overlay hue */
@keyframes tier45Chroma {
  0%   { background-position: 0% 50%, 0% 50%; filter: saturate(1); }
  35%  { background-position: 50% 50%, 30% 60%; filter: saturate(1.06) drop-shadow(0 10px 34px rgba(0,0,0,0.12)); }
  70%  { background-position: 100% 50%, 60% 40%; filter: saturate(1.02); }
  100% { background-position: 0% 50%, 0% 50%; filter: saturate(1); }
}

/* metallic ripple that subtly scales and tilts for perceived depth */
@keyframes tier45Ripple {
  0%   { transform: translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.5)); }
  50%  { transform: translateZ(0) rotateX(1deg) scale(1.035); filter: drop-shadow(0 22px 60px rgba(0,0,0,0.58)); }
  100% { transform: translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.5)); }
}

/* Tier 46: "Alot Of Larger illion Names 6.0" — pronounced crystalline chromatic-texture + kinetic foil effect */
.tier46 {
  display: inline-block;
  font-weight: 950;
  letter-spacing: 0.01em;
  background:
    linear-gradient(90deg, #ffffff 0%, #ffedf8 18%, #e7fff8 45%, #fff7d6 70%, #ffffff 100%),
    radial-gradient(1200px 200px at 10% 10%, rgba(120,200,255,0.06), transparent 20%),
    conic-gradient(from 120deg, rgba(255,200,255,0.06), rgba(200,255,240,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.65) inset,
    0 6px 18px rgba(0,0,0,0.28),
    0 14px 40px rgba(120,160,200,0.06);
  -webkit-text-stroke: 0.9px rgba(0,0,0,0.20);
  transform: translateZ(0);
  /* layered kinetic foil + chroma sweep animations */
  animation: tier46Foil 6.5s ease-in-out infinite, tier46Chroma 9s linear infinite;
  font-size: clamp(22px, 5vw, 96px);
  will-change: transform, background-position, filter;
}

/* subtle foil ripple that tilts and shifts for depth */
@keyframes tier46Foil {
  0%   { transform: translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.48)); }
  50%  { transform: translateZ(0) rotateX(1.5deg) scale(1.03); filter: drop-shadow(0 20px 56px rgba(0,0,0,0.56)); }
  100% { transform: translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.48)); }
}

/* chromatic sweep to shift subtle hues across the text */
@keyframes tier46Chroma {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 45% 60%, 10% 5%, 15% 10%; filter: saturate(1.06) brightness(1.02); }
  80%  { background-position: 90% 40%, 20% 10%, 30% 20%; filter: saturate(1.02); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

/* Tier 47: "Alot Of Larger illion Names 7.0" — crystalline-neon prismatic foil with kinetic shimmer */
.tier47 {
  display: inline-block;
  font-weight: 950;
  letter-spacing: 0.02em;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(240,230,255,0.9) 15%, rgba(220,255,250,0.9) 40%, rgba(255,240,230,0.95) 70%, rgba(255,255,255,0.98) 100%),
    linear-gradient(120deg, rgba(255,0,140,0.08), rgba(0,200,255,0.06), rgba(120,255,120,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 6px 20px rgba(0,0,0,0.32),
    0 18px 48px rgba(60,120,160,0.06);
  -webkit-text-stroke: 0.8px rgba(0,0,0,0.18);
  transform: translateZ(0);
  animation: tier47Prism 7.2s linear infinite, tier47Pulse 8.6s ease-in-out infinite;
  font-size: clamp(22px, 5.2vw, 100px);
  will-change: transform, background-position, filter;
}

/* prismatic sweep — subtle band of neon glides across the text */
@keyframes tier47Prism {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  35%  { background-position: 55% 45%, 40% 20%; filter: saturate(1.08) drop-shadow(0 10px 36px rgba(0,0,0,0.14)); }
  70%  { background-position: 100% 50%, 80% 40%; filter: saturate(1.02); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

/* gentle pulsing + tilt for presence */
@keyframes tier47Pulse {
  0%   { transform: translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.52)); }
  50%  { transform: translateZ(0) rotateX(0.8deg) scale(1.038); filter: drop-shadow(0 20px 56px rgba(0,0,0,0.6)); }
  100% { transform: translateZ(0) rotateX(0deg) scale(1); filter: drop-shadow(0 8px 30px rgba(0,0,0,0.52)); }
}

/* Tier 48: "Alot Of Larger illion Names 8.0" — ultra-embossed holo-foil with slow prismatic rotation */
.tier48 {
  display: inline-block;
  font-weight: 960;
  letter-spacing: 0.02em;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98) 0%, rgba(245,240,255,0.96) 18%, rgba(230,255,250,0.96) 40%, rgba(255,245,235,0.98) 70%, rgba(255,255,255,1) 100%),
    conic-gradient(from 180deg at 50% 50%, rgba(255,120,200,0.06), rgba(120,200,255,0.06), rgba(160,255,180,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 2px 6px rgba(255,255,255,0.8) inset,
    0 10px 30px rgba(0,0,0,0.36),
    0 22px 56px rgba(30,80,120,0.08);
  -webkit-text-stroke: 1px rgba(0,0,0,0.22);
  transform: translateZ(0);
  will-change: transform, background-position, filter;
  font-size: clamp(28px, 7vw, 140px);
  animation: tier48Prism 9.5s linear infinite, tier48Rotate 18s linear infinite;
}

/* slow prismatic sweep across the holo surface */
@keyframes tier48Prism {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  30%  { background-position: 45% 40%, 20% 10%; filter: saturate(1.07) drop-shadow(0 14px 40px rgba(0,0,0,0.14)); }
  60%  { background-position: 80% 60%, 40% 20%; filter: saturate(1.03); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

/* very slow, subtle 3D rotation for a dramatic embossed appearance */
@keyframes tier48Rotate {
  0%   { transform: rotateX(0deg) rotateY(0deg) scale(1); }
  50%  { transform: rotateX(1.2deg) rotateY(1.8deg) scale(1.03); }
  100% { transform: rotateX(0deg) rotateY(0deg) scale(1); }
}

/* small adjustments so multi-span replacements keep line-height and wrapping consistent */
.name .tier1, .name .tier2, .name .tier3, .name .tier4,
.name .tier5, .name .tier6, .name .tier7, .name .tier8,
.name .tier9, .name .tier10, .name .tier11, .name .tier12, .name .tier13, .name .tier14, .name .tier15, .name .tier16, .name .tier17, .name .tier18, .name .tier19, .name .tier20, .name .tier21, .name .tier22, .name .tier23, .name .tier24, .name .tier25, .name .tier26, .name .tier27, .name .tier28, .name .tier29, .name .tier30, .name .tier31, .name .tier32, .name .tier33, .name .tier34, .name .tier35, .name .tier36, .name .tier37, .name .tier38, .name .tier39, .name .tier46 {
  white-space: pre-wrap;
}

/* small-screen adjustments */
@media (max-width:520px){
  .controls .row{justify-content:center}
  .controls button{padding:10px 12px;min-width:48px}
  .name{font-size:18px}
  .numeric{font-size:28px}
}

/* Tier 49: "Alot Of Larger illion Names 9.0" — luminous ultra-holo + kinetic corona */
.tier49 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.01em;
  background:
    radial-gradient(1200px 300px at 20% 20%, rgba(255,240,220,0.08), transparent 20%),
    linear-gradient(90deg, #fff 0%, #fffbf2 12%, #eaffff 38%, #ffe6fb 62%, #fffbe6 88%, #ffffff 100%),
    conic-gradient(from 180deg at 50% 50%, rgba(255,150,220,0.06), rgba(120,220,255,0.06), rgba(200,255,180,0.04));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 2px 6px rgba(255,245,240,0.15),
    0 10px 30px rgba(0,0,0,0.36),
    0 30px 80px rgba(120,180,220,0.08);
  -webkit-text-stroke: 1px rgba(0,0,0,0.20);
  transform: translateZ(0);
  font-size: clamp(28px, 7vw, 160px);
  animation: tier49Corona 10s ease-in-out infinite, tier49Pulse 12s linear infinite;
  will-change: transform, background-position, filter;
}

@keyframes tier49Corona {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 45% 60%, 10% 8%, 12% 10%; filter: saturate(1.08) brightness(1.02); }
  80%  { background-position: 90% 40%, 20% 16%, 24% 20%; filter: saturate(1.03); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

@keyframes tier49Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 10px 34px rgba(0,0,0,0.54)); }
  50%  { transform: translateZ(0) scale(1.06) rotateX(0.8deg); filter: drop-shadow(0 30px 84px rgba(0,0,0,0.62)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 10px 34px rgba(0,0,0,0.54)); }
}

/* Tier 50: White & Black Gradient Colored (Alot Much Of Larger illion Names) */
.tier50 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.01em;
  /* monochrome diagonal gradient clipped to text for stark contrast */
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 35%, #bdbdbd 65%, #000000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* subtle high-contrast glow and thin stroke to make black areas pop on light backgrounds */
  text-shadow:
    0 2px 6px rgba(0,0,0,0.12),
    0 10px 28px rgba(0,0,0,0.18);
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(28px, 7vw, 160px);
  /* gentle sheen sweep for a polished monochrome effect */
  background-size: 200% 200%;
  animation: tier50Sheen 8s linear infinite, tier49Pulse 12s linear infinite;
  will-change: transform, background-position, filter;
}

@keyframes tier50Sheen {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  50%  { background-position: 100% 50%; filter: saturate(1.02) brightness(1.02); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* Tier 51: White & Black Gradient Colored (alt variant, high-contrast reversed sheen) */
.tier51 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.01em;
  /* reversed diagonal monochrome gradient clipped to text for a stark contrasting effect */
  background: linear-gradient(135deg, #000000 0%, #1f1f1f 25%, #9e9e9e 60%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* subtle high-contrast outer glow and thin light stroke to make edges readable on dark areas */
  text-shadow:
    0 2px 6px rgba(255,255,255,0.06),
    0 10px 28px rgba(0,0,0,0.22);
  -webkit-text-stroke: 0.9px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(28px, 7vw, 160px);
  background-size: 220% 220%;
  /* slow sheen that moves opposite direction to tier50 for visual distinction */
  animation: tier51Sheen 9s linear infinite, tier50Sheen 12s linear infinite;
  will-change: transform, background-position, filter;
}

/* sheen for tier51 (reversed sweep) */
@keyframes tier51Sheen {
  0%   { background-position: 100% 50%; filter: saturate(1); }
  50%  { background-position: 0% 50%; filter: saturate(1.03) brightness(1.01); }
  100% { background-position: 100% 50%; filter: saturate(1); }
}

/* Tier 52-59: White & Black Gradient Colored (monochrome variants with subtle sheen) */
.tier52, .tier53, .tier54, .tier55, .tier56, .tier57, .tier58, .tier59 {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.5vw, 120px);
  will-change: transform, background-position, filter;
  text-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.14);
}

/* Tier 52: high-contrast diagonal white->black with gentle sheen */
.tier52 {
  background: linear-gradient(135deg, #ffffff 0%, #f2f2f2 30%, #bfbfbf 70%, #000000 100%);
  animation: tier50Sheen 8.5s linear infinite;
}

/* Tier 53: reversed diagonal (black->white) with slower sheen */
.tier53 {
  background: linear-gradient(135deg, #000000 0%, #3f3f3f 40%, #dedede 80%, #ffffff 100%);
  animation: tier51Sheen 10s linear infinite, tier50Sheen 14s linear infinite;
}

/* Tier 54: softer mid-gray ramp with fast sheen for a polished look */
.tier54 {
  background: linear-gradient(135deg, #ffffff 0%, #efefef 25%, #9e9e9e 60%, #050505 100%);
  animation: tier50Sheen 7s linear infinite;
}

/* Tier 55: stark black center with white edges for strong contrast */
.tier55 {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 20%, #000000 50%, #ffffff 80%, #ffffff 100%);
  animation: tier51Sheen 9s linear infinite;
}

/* Tier 56: subtle textured monochrome with alternating sheen */
.tier56 {
  background: linear-gradient(135deg, #fafafa 0%, #e6e6e6 30%, #b8b8b8 65%, #070707 100%);
  animation: tier50Sheen 8s linear infinite, tier51Sheen 16s linear infinite;
}

/* Tier 57: darker-weight monochrome leaning toward black-heavy finish */
.tier57 {
  background: linear-gradient(135deg, #f7f7f7 0%, #d2d2d2 30%, #8f8f8f 65%, #000002 100%);
  animation: tier50Sheen 9s linear infinite;
}

/* Tier 58: reversed subtle sheen with crisp mid-contrast */
.tier58 {
  background: linear-gradient(135deg, #020202 0%, #404040 30%, #cfcfcf 70%, #ffffff 100%);
  animation: tier51Sheen 11s linear infinite, tier50Sheen 13s linear infinite;
}

/* Tier 59: polished monochrome with gentle shimmer and slightly increased stroke for readability */
.tier59 {
  background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 28%, #bdbdbd 66%, #000000 100%);
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  animation: tier50Sheen 8s linear infinite, tier51Sheen 12s linear infinite;
}

/* Tier 60: Red & White Gradient Colored */
.tier60 {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.01em;
  /* bold two-tone red -> white diagonal gradient clipped to text */
  background: linear-gradient(135deg, #ff0000 0%, #ff4d4d 45%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* subtle contrast shadow and thin light stroke for readability on mixed backgrounds */
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.5vw, 120px);
  will-change: transform, background-position, filter;
  /* gentle sheen sweep to animate the gradient slightly */
  background-size: 200% 200%;
  animation: tier60Sheen 7.5s linear infinite;
}

/* sheen animation for tier60 */
@keyframes tier60Sheen {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  50%  { background-position: 100% 50%; filter: saturate(1.03) brightness(1.03); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* Tier 61-69: Red & White Gradient Colored (more illion names variants) */
/* These are monochrome-red themed variants with slightly different gradients, sizes and sheen timing to provide visual variety. */

.tier61 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #ff0a0a 0%, #ff6b6b 40%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,0.16);
  -webkit-text-stroke: 0.7px rgba(255,255,255,0.06);
  font-size: clamp(20px, 5.4vw, 124px);
  background-size: 220% 220%;
  animation: tier61Sheen 8s linear infinite;
}

@keyframes tier61Sheen {
  0%   { background-position: 0% 60%; filter: saturate(1); }
  50%  { background-position: 100% 40%; filter: saturate(1.02) brightness(1.02); }
  100% { background-position: 0% 60%; filter: saturate(1); }
}

.tier62 {
  display: inline-block;
  font-weight: 940;
  letter-spacing: 0.01em;
  background: linear-gradient(145deg, #ff1f1f 0%, #ff7a7a 48%, #fffaf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 12px rgba(0,0,0,0.18);
  -webkit-text-stroke: 0.85px rgba(255,255,255,0.05);
  font-size: clamp(22px, 5.6vw, 128px);
  background-size: 210% 210%;
  animation: tier62Sheen 7s ease-in-out infinite;
}

@keyframes tier62Sheen {
  0%   { background-position: 10% 50%; filter: saturate(1); }
  50%  { background-position: 90% 50%; filter: saturate(1.04) brightness(1.04); }
  100% { background-position: 10% 50%; filter: saturate(1); }
}

.tier63 {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: linear-gradient(120deg, #ff3333 0%, #ff8f8f 46%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 8px rgba(0,0,0,0.14);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  font-size: clamp(20px, 5.2vw, 116px);
  background-size: 200% 200%;
  animation: tier63Sheen 9s linear infinite;
}

@keyframes tier63Sheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; filter: brightness(1.03); }
  100% { background-position: 0% 50%; }
}

.tier64 {
  display: inline-block;
  font-weight: 930;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #ff0000 0%, #ff5a5a 35%, #fff6f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 14px rgba(0,0,0,0.2);
  -webkit-text-stroke: 0.9px rgba(255,255,255,0.04);
  font-size: clamp(24px, 6vw, 140px);
  background-size: 240% 240%;
  animation: tier64Sheen 6.8s linear infinite;
}

@keyframes tier64Sheen {
  0%   { background-position: 20% 60%; filter: saturate(1); }
  50%  { background-position: 80% 40%; filter: saturate(1.05) brightness(1.04); }
  100% { background-position: 20% 60%; filter: saturate(1); }
}

.tier65 {
  display: inline-block;
  font-weight: 960;
  letter-spacing: 0.01em;
  background: linear-gradient(150deg, #ff2a2a 0%, #ff9b9b 55%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 18px rgba(0,0,0,0.22);
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  font-size: clamp(26px, 6.2vw, 148px);
  background-size: 230% 230%;
  animation: tier65Sheen 7.6s ease-in-out infinite;
}

@keyframes tier65Sheen {
  0%   { background-position: 0% 70%; filter: saturate(1); }
  50%  { background-position: 100% 30%; filter: saturate(1.06) brightness(1.05); }
  100% { background-position: 0% 70%; filter: saturate(1); }
}

.tier66 {
  display: inline-block;
  font-weight: 940;
  letter-spacing: 0.01em;
  background: linear-gradient(140deg, #ff4a4a 0%, #ffc0c0 50%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 12px rgba(0,0,0,0.18);
  -webkit-text-stroke: 0.85px rgba(255,255,255,0.05);
  font-size: clamp(22px, 5.8vw, 136px);
  background-size: 200% 200%;
  animation: tier66Sheen 8.2s linear infinite;
}

@keyframes tier66Sheen {
  0%   { background-position: 0% 40%; }
  50%  { background-position: 100% 60%; filter: brightness(1.03); }
  100% { background-position: 0% 40%; }
}

.tier67 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.01em;
  background: linear-gradient(125deg, #ff1010 0%, #ff6060 42%, #fff8f8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 24px rgba(0,0,0,0.24);
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  font-size: clamp(28px, 6.5vw, 160px);
  background-size: 250% 250%;
  animation: tier67Sheen 7.2s linear infinite;
}

@keyframes tier67Sheen {
  0%   { background-position: 10% 50%; filter: saturate(1); }
  50%  { background-position: 90% 50%; filter: saturate(1.07) brightness(1.06); }
  100% { background-position: 10% 50%; filter: saturate(1); }
}

.tier68 {
  display: inline-block;
  font-weight: 900;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #ff5f5f 0%, #ffdede 48%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,0.16);
  -webkit-text-stroke: 0.7px rgba(255,255,255,0.06);
  font-size: clamp(20px, 5.2vw, 118px);
  background-size: 200% 200%;
  animation: tier68Sheen 9.2s linear infinite;
}

@keyframes tier68Sheen {
  0%   { background-position: 0% 55%; }
  50%  { background-position: 100% 45%; filter: brightness(1.02); }
  100% { background-position: 0% 55%; }
}

.tier69 {
  display: inline-block;
  font-weight: 1000;
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #ff0000 0%, #ff9999 50%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,0.28);
  -webkit-text-stroke: 1.1px rgba(255,255,255,0.03);
  font-size: clamp(30px, 7vw, 176px);
  background-size: 260% 260%;
  animation: tier69Sheen 6.5s ease-in-out infinite;
}

@keyframes tier69Sheen {
  0%   { background-position: 20% 40%; filter: saturate(1); }
  50%  { background-position: 80% 60%; filter: saturate(1.08) brightness(1.07); }
  100% { background-position: 20% 40%; filter: saturate(1); }
}

/* Tier 70: Orange & White Gradient Colored (EVEN MORE ILLION NAMES) */
.tier70 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  /* warm orange -> white diagonal gradient clipped to text */
  background: linear-gradient(135deg, #ff8c00 0%, #ffb347 45%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* soft warm glow and subtle thin stroke for readability on varied backgrounds */
  text-shadow: 0 6px 18px rgba(255,140,0,0.12), 0 10px 30px rgba(0,0,0,0.12);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.2vw, 132px);
  background-size: 220% 220%;
  animation: tier70Sheen 7.2s linear infinite;
  will-change: transform, background-position, filter;
}

@keyframes tier70Sheen {
  0%   { background-position: 0% 55%; filter: saturate(1); }
  50%  { background-position: 100% 45%; filter: saturate(1.04) brightness(1.04); }
  100% { background-position: 0% 55%; filter: saturate(1); }
}

/* Tier 71-79: Additional Orange & White Gradient Colored variants (ALOT ILLION NAMES) */
.tier71, .tier72, .tier73, .tier74, .tier75, .tier76, .tier77, .tier78, .tier79 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 16px rgba(0,0,0,0.12);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.2vw, 136px);
  background-size: 220% 220%;
  will-change: transform, background-position, filter;
}

/* Slight variations on the orange->white gradient and sheen timing to give each tier a distinct look */
.tier71 { background: linear-gradient(135deg, #ff7a00 0%, #ffb04a 45%, #ffffff 100%); animation: tier71Sheen 7.0s linear infinite; }
.tier72 { background: linear-gradient(135deg, #ff8f1a 0%, #ffc273 48%, #ffffff 100%); animation: tier72Sheen 6.8s linear infinite; font-weight:930; }
.tier73 { background: linear-gradient(145deg, #ff9c2b 0%, #ffd09a 50%, #ffffff 100%); animation: tier73Sheen 8.0s ease-in-out infinite; }
.tier74 { background: linear-gradient(125deg, #ff6f00 0%, #ff9f41 40%, #ffffff 100%); animation: tier74Sheen 7.6s linear infinite; }
.tier75 { background: linear-gradient(135deg, #ff5e00 0%, #ff9a3a 42%, #fff9f2 100%); animation: tier75Sheen 7.4s linear infinite; font-weight:940; }
.tier76 { background: linear-gradient(150deg, #ff8a00 0%, #ffc066 46%, #ffffff 100%); animation: tier76Sheen 7.8s linear infinite; }
.tier77 { background: linear-gradient(135deg, #ff7300 0%, #ffab55 44%, #ffffff 100%); animation: tier77Sheen 6.6s linear infinite; }
.tier78 { background: linear-gradient(140deg, #ff9600 0%, #ffd288 50%, #ffffff 100%); animation: tier78Sheen 8.4s ease-in-out infinite; }
.tier79 { background: linear-gradient(135deg, #ff8300 0%, #ffb96a 45%, #ffffff 100%); animation: tier79Sheen 7.1s linear infinite; font-weight:950; }

/* Individual sheen keyframes (small timing/position differences for variety) */
@keyframes tier71Sheen { 0%{background-position:0% 56%}50%{background-position:100% 44%}100%{background-position:0% 56%} }
@keyframes tier72Sheen { 0%{background-position:10% 60%}50%{background-position:90% 40%}100%{background-position:10% 60%} }
@keyframes tier73Sheen { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes tier74Sheen { 0%{background-position:20% 55%}50%{background-position:80% 45%}100%{background-position:20% 55%} }
@keyframes tier75Sheen { 0%{background-position:0% 52%}50%{background-position:100% 48%}100%{background-position:0% 52%} }
@keyframes tier76Sheen { 0%{background-position:5% 58%}50%{background-position:95% 42%}100%{background-position:5% 58%} }
@keyframes tier77Sheen { 0%{background-position:0% 54%}50%{background-position:100% 46%}100%{background-position:0% 54%} }
@keyframes tier78Sheen { 0%{background-position:12% 60%}50%{background-position:88% 40%}100%{background-position:12% 60%} }
@keyframes tier79Sheen { 0%{background-position:0% 55%}50%{background-position:100% 45%}100%{background-position:0% 55%} }

/* Tier 80: Yellow & White Gradient Colored (Tier 80 illion Is A Full Limit) */
.tier80 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.01em;
  /* warm yellow -> white diagonal gradient clipped to text */
  background: linear-gradient(135deg, #fff176 0%, #ffeb3b 40%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* soft contrast shadow and thin light stroke for readability */
  text-shadow: 0 6px 18px rgba(0,0,0,0.14);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.2vw, 160px);
  background-size: 200% 200%;
  animation: tier80Sheen 7.2s linear infinite;
  will-change: transform, background-position, filter;
}

@keyframes tier80Sheen {
  0%   { background-position: 0% 55%; filter: saturate(1); }
  50%  { background-position: 100% 45%; filter: saturate(1.04) brightness(1.04); }
  100% { background-position: 0% 55%; filter: saturate(1); }
}

/* Tier 81-89: Green & White Gradient Colored (variants) */
.tier81, .tier82, .tier83, .tier84, .tier85, .tier86, .tier87, .tier88, .tier89 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 6px 14px rgba(0,0,0,0.12);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.2vw, 140px);
  background-size: 220% 220%;
  will-change: transform, background-position, filter;
}

/* Individual green->white variants with subtle differences in hue and sheen */
.tier81 { background: linear-gradient(135deg, #4caf50 0%, #80e27e 45%, #ffffff 100%); animation: tier81Sheen 7.0s linear infinite; }
.tier82 { background: linear-gradient(145deg, #43a047 0%, #7fff9e 48%, #ffffff 100%); animation: tier82Sheen 7.6s linear infinite; font-weight:930; }
.tier83 { background: linear-gradient(120deg, #2e7d32 0%, #6fe79a 46%, #ffffff 100%); animation: tier83Sheen 8.2s ease-in-out infinite; }
.tier84 { background: linear-gradient(135deg, #388e3c 0%, #8bc34a 35%, #ffffff 100%); animation: tier84Sheen 7.4s linear infinite; }
.tier85 { background: linear-gradient(150deg, #66bb6a 0%, #b9f6ca 55%, #ffffff 100%); animation: tier85Sheen 7.8s ease-in-out infinite; font-weight:940; }
.tier86 { background: linear-gradient(140deg, #43a047 0%, #a7f3bf 50%, #ffffff 100%); animation: tier86Sheen 8.0s linear infinite; }
.tier87 { background: linear-gradient(125deg, #1b5e20 0%, #69f0ae 42%, #ffffff 100%); animation: tier87Sheen 7.2s linear infinite; font-weight:950; }
.tier88 { background: linear-gradient(140deg, #2e7d32 0%, #a8f5c8 50%, #ffffff 100%); animation: tier88Sheen 8.4s ease-in-out infinite; }
.tier89 { background: linear-gradient(135deg, #00796b 0%, #48e5b3 45%, #ffffff 100%); animation: tier89Sheen 6.8s ease-in-out infinite; font-weight:960; }

/* Sheen keyframes for the new green tiers (small timing/position differences for variety) */
@keyframes tier81Sheen { 0%{background-position:0% 56%}50%{background-position:100% 44%}100%{background-position:0% 56%} }
@keyframes tier82Sheen { 0%{background-position:10% 60%}50%{background-position:90% 40%}100%{background-position:10% 60%} }
@keyframes tier83Sheen { 0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%} }
@keyframes tier84Sheen { 0%{background-position:20% 55%}50%{background-position:80% 45%}100%{background-position:20% 55%} }
@keyframes tier85Sheen { 0%{background-position:0% 52%}50%{background-position:100% 48%}100%{background-position:0% 52%} }
@keyframes tier86Sheen { 0%{background-position:5% 58%}50%{background-position:95% 42%}100%{background-position:5% 58%} }
@keyframes tier87Sheen { 0%{background-position:0% 54%}50%{background-position:100% 46%}100%{background-position:0% 54%} }
@keyframes tier88Sheen { 0%{background-position:12% 60%}50%{background-position:88% 40%}100%{background-position:12% 60%} }
@keyframes tier89Sheen { 0%{background-position:0% 55%}50%{background-position:100% 45%}100%{background-position:0% 55%} }

/* Tier 90: Text Effects 2.0 — layered neon-glow + kinetic scanline for dramatic ultra-high illion names */
.tier90 {
  display: inline-block;
  font-weight: 950;
  letter-spacing: 0.02em;
  font-style: normal;
  /* base gradient with strong neon highlights */
  background:
    linear-gradient(90deg, #ffffff 0%, #cff6ff 20%, #ffd7ff 50%, #fff6c8 80%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,0,140,0.06), rgba(0,200,255,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* intense layered glow for neon effect */
  text-shadow:
    0 2px 6px rgba(255,255,255,0.6) inset,
    0 8px 28px rgba(255,100,180,0.18),
    0 18px 48px rgba(0,150,255,0.12);
  -webkit-text-stroke: 0.9px rgba(0,0,0,0.18);
  transform: translateZ(0);
  font-size: clamp(22px, 5.6vw, 160px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma sweep + fast subtle scanline */
  animation: tier90Chroma 8.5s linear infinite, tier90Scan 0.9s linear infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* slow chromatic sweep to shift highlight colors */
@keyframes tier90Chroma {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 45% 60%, 30% 20%; filter: saturate(1.08) brightness(1.03); }
  80%  { background-position: 90% 40%, 60% 40%; filter: saturate(1.02); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

/* fast subtle vertical scanline to create kinetic "text effects 2.0" look */
@keyframes tier90Scan {
  0%   { text-shadow: 0 8px 28px rgba(255,100,180,0.18), 0 2px 6px rgba(255,255,255,0.6) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 12px 36px rgba(0,150,255,0.16), 0 3px 8px rgba(255,255,255,0.6) inset; transform: translateY(-0.6px) scale(1.002); }
  100% { text-shadow: 0 8px 28px rgba(255,100,180,0.18), 0 2px 6px rgba(255,255,255,0.6) inset; transform: translateY(0) scale(1); }
}

/* Tier 91: Text Effects 2.0 (variant) — stronger neon contrast + dual-scanline kinetic effect */
.tier91 {
  display: inline-block;
  font-weight: 960;
  letter-spacing: 0.02em;
  font-style: normal;
  /* dual-layer neon gradient for punchier highlights */
  background:
    linear-gradient(90deg, #fff 0%, #aaffff 18%, #ffb3ff 48%, #fff9b0 78%, #fff 100%),
    linear-gradient(120deg, rgba(0,240,220,0.06), rgba(255,40,180,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* stronger multi-layer glow */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.65) inset,
    0 10px 34px rgba(0,220,200,0.20),
    0 22px 56px rgba(255,60,160,0.12);
  -webkit-text-stroke: 1px rgba(0,0,0,0.16);
  transform: translateZ(0);
  font-size: clamp(24px, 5.8vw, 168px);
  will-change: transform, background-position, filter;
  /* combined animations: slightly faster chroma + dual scanlines for kinetic shimmer */
  animation: tier91Chroma 7.2s linear infinite, tier91ScanA 0.75s linear infinite, tier91ScanB 1.4s linear infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* slightly faster chroma sweep for tier91 */
@keyframes tier91Chroma {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 55% 62%, 35% 22%; filter: saturate(1.1) brightness(1.04); }
  80%  { background-position: 95% 38%, 65% 36%; filter: saturate(1.03); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

/* fast subtle vertical scanline layer A */
@keyframes tier91ScanA {
  0%   { text-shadow: 0 10px 36px rgba(0,220,200,0.18), 0 3px 8px rgba(255,255,255,0.65) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 14px 44px rgba(255,60,160,0.16), 0 4px 10px rgba(255,255,255,0.65) inset; transform: translateY(-1px) scale(1.003); }
  100% { text-shadow: 0 10px 36px rgba(0,220,200,0.18), 0 3px 8px rgba(255,255,255,0.65) inset; transform: translateY(0) scale(1); }
}

/* slower complementary scanline layer B for depth */
@keyframes tier91ScanB {
  0%   { filter: drop-shadow(0 8px 28px rgba(255,60,160,0.12)); transform: translateY(0) scale(1); }
  50%  { filter: drop-shadow(0 16px 48px rgba(0,220,200,0.14)); transform: translateY(-0.8px) scale(1.001); }
  100% { filter: drop-shadow(0 8px 28px rgba(255,60,160,0.12)); transform: translateY(0) scale(1); }
}

/* Tier 92: Text Effects 2.0 (alternate) — high-contrast neon + dual shimmer layers for extra punch */
.tier92 {
  display: inline-block;
  font-weight: 970;
  letter-spacing: 0.02em;
  font-style: normal;
  /* layered bright neon base with contrasting cool overlay */
  background:
    linear-gradient(90deg, #ffffff 0%, #bfffff 18%, #ffb6f9 48%, #fff6a8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(0,200,255,0.08), rgba(255,80,200,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* pronounced twin-glow for strong neon effect */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.7) inset,
    0 12px 44px rgba(255,90,170,0.22),
    0 28px 72px rgba(0,160,220,0.14);
  -webkit-text-stroke: 1px rgba(0,0,0,0.14);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 168px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma, fast vertical shimmer, and a gentle pulse */
  animation: tier92Chroma 7.2s linear infinite, tier92Shimmer 0.75s linear infinite, tier92Pulse 9s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes tier92Chroma {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 55% 62%, 35% 22%; filter: saturate(1.12) brightness(1.05); }
  80%  { background-position: 95% 38%, 65% 36%; filter: saturate(1.04); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

@keyframes tier92Shimmer {
  0%   { text-shadow: 0 12px 44px rgba(255,90,170,0.22), 0 3px 8px rgba(255,255,255,0.7) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 18px 56px rgba(0,160,220,0.20), 0 4px 10px rgba(255,255,255,0.7) inset; transform: translateY(-1.2px) scale(1.004); }
  100% { text-shadow: 0 12px 44px rgba(255,90,170,0.22), 0 3px 8px rgba(255,255,255,0.7) inset; transform: translateY(0) scale(1); }
}

@keyframes tier92Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 10px 36px rgba(0,0,0,0.5)); }
  50%  { transform: translateZ(0) scale(1.05); filter: drop-shadow(0 28px 78px rgba(0,0,0,0.62)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 10px 36px rgba(0,0,0,0.5)); }
}

/* Tier 93: Text Effects 2.0 (alternate variant) — layered neon + chromatic pulse with a fast shimmer */
.tier93 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.02em;
  font-style: normal;
  /* bright layered base with warm-cool overlay */
  background:
    linear-gradient(90deg, #ffffff 0%, #bfffe6 18%, #ffc6ff 48%, #fff8b8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,100,200,0.07), rgba(0,220,240,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* deep twin-glow for neon punch */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.72) inset,
    0 14px 48px rgba(255,90,180,0.26),
    0 32px 88px rgba(0,160,220,0.16);
  -webkit-text-stroke: 1px rgba(0,0,0,0.12);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 176px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma + fast shimmer + small pulse */
  animation: tier93Chroma 7.0s linear infinite, tier93Shimmer 0.6s linear infinite, tier93Pulse 8.5s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* slow chromatic sweep */
@keyframes tier93Chroma {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 50% 62%, 30% 20%; filter: saturate(1.12) brightness(1.06); }
  80%  { background-position: 100% 38%, 60% 40%; filter: saturate(1.04); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

/* very fast vertical shimmer for kinetic energy */
@keyframes tier93Shimmer {
  0%   { text-shadow: 0 14px 46px rgba(255,90,170,0.26), 0 3px 9px rgba(255,255,255,0.72) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 20px 62px rgba(0,160,220,0.22), 0 4px 11px rgba(255,255,255,0.72) inset; transform: translateY(-1.6px) scale(1.006); }
  100% { text-shadow: 0 14px 46px rgba(255,90,170,0.26), 0 3px 9px rgba(255,255,255,0.72) inset; transform: translateY(0) scale(1); }
}

/* gentle pulsing scale for presence */
@keyframes tier93Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 42px rgba(0,0,0,0.52)); }
  50%  { transform: translateZ(0) scale(1.06); filter: drop-shadow(0 34px 94px rgba(0,0,0,0.64)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 42px rgba(0,0,0,0.52)); }
}

/* Tier 94: Text Effects 2.0 (variant) — ultra-chromatic neon + metallic shimmer */
.tier94 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.02em;
  font-style: normal;
  /* multi-layered chromatic base with a subtle metallic foil overlay */
  background:
    linear-gradient(90deg, #ffffff 0%, #c8fff8 18%, #ffd9ff 50%, #fff7c4 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,120,200,0.06), rgba(0,200,255,0.06));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* pronounced twin-glow for neon punch plus metallic sheen */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.76) inset,
    0 16px 56px rgba(255,110,180,0.28),
    0 36px 96px rgba(0,170,220,0.16);
  -webkit-text-stroke: 1px rgba(0,0,0,0.11);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 176px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma sweep, fast metallic shimmer, subtle pulse */
  animation: tier94Chroma 7.5s linear infinite, tier94Shimmer 0.6s linear infinite, tier94Pulse 9.2s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes tier94Chroma {
  0%   { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 55% 62%, 35% 22%; filter: saturate(1.14) brightness(1.06); }
  80%  { background-position: 95% 38%, 65% 36%; filter: saturate(1.05); }
  100% { background-position: 0% 50%, 0% 0%; filter: saturate(1); }
}

@keyframes tier94Shimmer {
  0%   { text-shadow: 0 16px 56px rgba(255,110,180,0.28), 0 4px 10px rgba(255,255,255,0.76) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 22px 68px rgba(0,170,220,0.24), 0 5px 12px rgba(255,255,255,0.76) inset; transform: translateY(-1.8px) scale(1.007); }
  100% { text-shadow: 0 16px 56px rgba(255,110,180,0.28), 0 4px 10px rgba(255,255,255,0.76) inset; transform: translateY(0) scale(1); }
}

@keyframes tier94Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 48px rgba(0,0,0,0.54)); }
  50%  { transform: translateZ(0) scale(1.07); filter: drop-shadow(0 38px 108px rgba(0,0,0,0.66)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 48px rgba(0,0,0,0.54)); }
}

/* Tier 95: Text Effects 2.0 (extra variant) — ultra-neon + dual shimmer + subtle inner chrome */
.tier95 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.02em;
  font-style: normal;
  /* layered bright chromatic base with a subtle metallic inner gloss */
  background:
    linear-gradient(90deg, #ffffff 0%, #dffeff 18%, #ffdfff 48%, #fff8c8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,120,200,0.06), rgba(0,200,255,0.06)),
    radial-gradient(800px 200px at 10% 10%, rgba(255,255,255,0.06), transparent 20%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* multi-layer neon glow for strong punch, with a subtle inner chrome sheen */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.78) inset,
    0 18px 56px rgba(255,100,180,0.30),
    0 36px 92px rgba(0,160,220,0.18);
  -webkit-text-stroke: 1px rgba(0,0,0,0.10);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 180px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma shift + fast twin-shimmer + gentle pulse */
  animation: tier95Chroma 8s linear infinite, tier95Shimmer 0.6s linear infinite, tier95Pulse 9s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* gentle chroma sweep for overall hue movement */
@keyframes tier95Chroma {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 50% 62%, 35% 22%, 20% 10%; filter: saturate(1.12) brightness(1.06); }
  80%  { background-position: 100% 38%, 65% 36%, 40% 20%; filter: saturate(1.04); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

/* fast vertical shimmer layer to add kinetic energy */
@keyframes tier95Shimmer {
  0%   { text-shadow: 0 18px 56px rgba(255,100,180,0.30), 0 3px 10px rgba(255,255,255,0.78) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 24px 72px rgba(0,160,220,0.22), 0 4px 12px rgba(255,255,255,0.78) inset; transform: translateY(-1.8px) scale(1.006); }
  100% { text-shadow: 0 18px 56px rgba(255,100,180,0.30), 0 3px 10px rgba(255,255,255,0.78) inset; transform: translateY(0) scale(1); }
}

/* slow presence pulse to add perceived depth */
@keyframes tier95Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 44px rgba(0,0,0,0.52)); }
  50%  { transform: translateZ(0) scale(1.06); filter: drop-shadow(0 34px 92px rgba(0,0,0,0.64)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 44px rgba(0,0,0,0.52)); }
}

/* Tier 96: Text Effects 2.0 (new variant) — heavy neon + kinetic glint + subtle metallic inner sheen */
.tier96 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.02em;
  font-style: normal;
  /* layered chromatic base with warm-cool highlights */
  background:
    linear-gradient(90deg, #ffffff 0%, #caffff 18%, #ffd6ff 50%, #fff9b8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,90,170,0.06), rgba(0,190,240,0.06)),
    radial-gradient(600px 120px at 12% 12%, rgba(255,255,255,0.06), transparent 18%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* layered neon glow + inner metallic sheen */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.78) inset,
    0 18px 60px rgba(255,100,180,0.34),
    0 36px 96px rgba(0,160,220,0.18);
  -webkit-text-stroke: 1px rgba(0,0,0,0.10);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 180px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma sweep, medium glint, subtle pulse */
  animation: tier96Chroma 8s linear infinite, tier96Glint 0.9s linear infinite, tier96Pulse 10s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* slow chromatic sweep */
@keyframes tier96Chroma {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 55% 62%, 35% 22%, 20% 10%; filter: saturate(1.12) brightness(1.05); }
  80%  { background-position: 95% 38%, 65% 36%, 40% 20%; filter: saturate(1.04); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

/* fast vertical glint for kinetic energy */
@keyframes tier96Glint {
  0%   { text-shadow: 0 18px 60px rgba(255,100,180,0.34), 0 3px 10px rgba(255,255,255,0.78) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 24px 76px rgba(0,160,220,0.26), 0 4px 12px rgba(255,255,255,0.78) inset; transform: translateY(-1.6px) scale(1.004); }
  100% { text-shadow: 0 18px 60px rgba(255,100,180,0.34), 0 3px 10px rgba(255,255,255,0.78) inset; transform: translateY(0) scale(1); }
}

/* slow presence pulse to add perceived depth */
@keyframes tier96Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 44px rgba(0,0,0,0.52)); }
  50%  { transform: translateZ(0) scale(1.05); filter: drop-shadow(0 34px 92px rgba(0,0,0,0.64)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 44px rgba(0,0,0,0.52)); }
}

/* Tier 97: Text Effects 2.0 (new variant) — ultra neon + dual shimmer + kinetic chrome */
.tier97 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.02em;
  font-style: normal;
  /* layered bright chromatic base with a strong cool-pink contrast */
  background:
    linear-gradient(90deg, #ffffff 0%, #bffaff 18%, #ffc8ff 48%, #fff8b8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,80,180,0.08), rgba(0,200,255,0.06)),
    radial-gradient(800px 160px at 12% 12%, rgba(255,255,255,0.06), transparent 18%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* intense twin-glow for a punchy neon effect + inner sheen */
  text-shadow:
    0 2px 8px rgba(255,255,255,0.78) inset,
    0 20px 64px rgba(255,90,170,0.32),
    0 40px 96px rgba(0,160,220,0.18);
  -webkit-text-stroke: 1px rgba(0,0,0,0.10);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 180px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma sweep + fast vertical shimmer + subtle pulse */
  animation: tier97Chroma 8s linear infinite, tier97Shimmer 0.6s linear infinite, tier97Pulse 9.5s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes tier97Chroma {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  35%  { background-position: 50% 62%, 35% 22%, 20% 10%; filter: saturate(1.14) brightness(1.06); }
  70%  { background-position: 95% 38%, 65% 36%, 40% 20%; filter: saturate(1.05); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

@keyframes tier97Shimmer {
  0%   { text-shadow: 0 20px 68px rgba(255,90,170,0.32), 0 3px 10px rgba(255,255,255,0.78) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 26px 82px rgba(0,160,220,0.24), 0 4px 12px rgba(255,255,255,0.78) inset; transform: translateY(-2px) scale(1.006); }
  100% { text-shadow: 0 20px 68px rgba(255,90,170,0.32), 0 3px 10px rgba(255,255,255,0.78) inset; transform: translateY(0) scale(1); }
}

@keyframes tier97Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 48px rgba(0,0,0,0.54)); }
  50%  { transform: translateZ(0) scale(1.07); filter: drop-shadow(0 38px 100px rgba(0,0,0,0.66)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 48px rgba(0,0,0,0.54)); }
}

/* Tier 98: Text Effects 2.0 (new variant) — golden-neon foil with kinetic flare + slow chroma sweep */
.tier98 {
  display: inline-block;
  font-weight: 980;
  letter-spacing: 0.02em;
  font-style: normal;
  /* layered base with warm-gold and neon cool overlay */
  background:
    linear-gradient(90deg, #fffaf0 0%, #fff1d6 20%, #ffe6b8 48%, #fff6e8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,120,40,0.06), rgba(0,200,255,0.05)),
    radial-gradient(700px 160px at 12% 12%, rgba(255,255,255,0.06), transparent 18%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* layered glow: warm gold core + neon cool rim */
  text-shadow:
    0 2px 8px rgba(255,250,240,0.8) inset,
    0 18px 60px rgba(255,160,40,0.30),
    0 34px 84px rgba(0,160,240,0.14);
  -webkit-text-stroke: 0.9px rgba(0,0,0,0.10);
  transform: translateZ(0);
  font-size: clamp(24px, 6vw, 180px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma sweep, medium kinetic flare, and subtle presence pulse */
  animation: tier98Chroma 8.8s linear infinite, tier98Flare 0.85s linear infinite, tier98Pulse 9.6s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* warm-to-cool slow chroma sweep across the gold+neon surface */
@keyframes tier98Chroma {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 50% 62%, 35% 22%, 20% 10%; filter: saturate(1.10) brightness(1.04); }
  80%  { background-position: 100% 38%, 65% 36%, 40% 20%; filter: saturate(1.03); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

/* medium-speed kinetic flare: quick vertical micro-shifts to simulate glints */
@keyframes tier98Flare {
  0%   { text-shadow: 0 18px 60px rgba(255,160,40,0.30), 0 3px 10px rgba(255,250,240,0.8) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 24px 76px rgba(0,160,240,0.22), 0 4px 12px rgba(255,250,240,0.8) inset; transform: translateY(-1.4px) scale(1.003); }
  100% { text-shadow: 0 18px 60px rgba(255,160,40,0.30), 0 3px 10px rgba(255,250,240,0.8) inset; transform: translateY(0) scale(1); }
}

/* slow presence pulse for perceived depth */
@keyframes tier98Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 44px rgba(0,0,0,0.50)); }
  50%  { transform: translateZ(0) scale(1.04); filter: drop-shadow(0 32px 86px rgba(0,0,0,0.62)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 12px 44px rgba(0,0,0,0.50)); }
}

/* Tier 99: Text Effects 2.0 (new apex variant) — ultra-neon chromatic + layered kinetic glint */
.tier99 {
  display: inline-block;
  font-weight: 990;
  letter-spacing: 0.02em;
  font-style: normal;
  /* layered luminous base with cool-magenta overlay */
  background:
    linear-gradient(90deg, #ffffff 0%, #dffefe 14%, #ffdfff 44%, #fff9d8 78%, #ffffff 100%),
    linear-gradient(120deg, rgba(255,90,180,0.09), rgba(0,210,240,0.08)),
    radial-gradient(900px 180px at 12% 12%, rgba(255,255,255,0.06), transparent 18%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* intense multi-layer glow, inner gloss, and crisp stroke */
  text-shadow:
    0 2px 10px rgba(255,255,255,0.80) inset,
    0 22px 72px rgba(255,100,180,0.36),
    0 44px 112px rgba(0,170,240,0.20);
  -webkit-text-stroke: 1px rgba(0,0,0,0.09);
  transform: translateZ(0);
  font-size: clamp(24px, 6.2vw, 192px);
  will-change: transform, background-position, filter;
  /* combined animations: slow chroma sweep, quick glint, and pronounced presence pulse */
  animation: tier99Chroma 8.6s linear infinite, tier99Glint 0.55s linear infinite, tier99Pulse 10s ease-in-out infinite;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* slow wide chroma sweep for sweeping color movement */
@keyframes tier99Chroma {
  0%   { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
  40%  { background-position: 54% 62%, 34% 22%, 18% 10%; filter: saturate(1.16) brightness(1.07); }
  80%  { background-position: 98% 38%, 64% 36%, 38% 20%; filter: saturate(1.06); }
  100% { background-position: 0% 50%, 0% 0%, 0% 0%; filter: saturate(1); }
}

/* very fast vertical glint to create a sharp kinetic shimmer */
@keyframes tier99Glint {
  0%   { text-shadow: 0 22px 72px rgba(255,100,180,0.36), 0 4px 12px rgba(255,255,255,0.80) inset; transform: translateY(0) scale(1); }
  50%  { text-shadow: 0 30px 96px rgba(0,170,240,0.28), 0 5px 14px rgba(255,255,255,0.80) inset; transform: translateY(-2px) scale(1.008); }
  100% { text-shadow: 0 22px 72px rgba(255,100,180,0.36), 0 4px 12px rgba(255,255,255,0.80) inset; transform: translateY(0) scale(1); }
}

/* slow, bold presence pulse for apex-tier emphasis */
@keyframes tier99Pulse {
  0%   { transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 52px rgba(0,0,0,0.56)); }
  50%  { transform: translateZ(0) scale(1.08); filter: drop-shadow(0 40px 110px rgba(0,0,0,0.70)); }
  100% { transform: translateZ(0) scale(1); filter: drop-shadow(0 14px 52px rgba(0,0,0,0.56)); }
}

/* Tier 100: Colored Gradient & Darker Gradient — bright-to-deep gradient with subtle sheen and optional dark variant */
.tier100 {
  display: inline-block;
  font-weight: 990;
  letter-spacing: 0.02em;
  /* vibrant colored gradient flowing into deep tones */
  background: linear-gradient(120deg, #ff7a6b 0%, #ffb56b 28%, #ffd86b 52%, #7be0ff 78%, #6b8cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 28px rgba(0,0,0,0.28);
  -webkit-text-stroke: 0.9px rgba(255,255,255,0.04);
  transform: translateZ(0);
  font-size: clamp(24px, 6.2vw, 200px);
  will-change: transform, background-position, filter;
  background-size: 240% 240%;
  animation: tier100Sheen 9s ease-in-out infinite, tier99Pulse 10s ease-in-out infinite;
}

/* Darker variant: use when contrast needs to be deep/dark (apply .tier100.darken) */
.tier100.darken {
  background: linear-gradient(120deg, #3b2f5a 0%, #2b2b3a 35%, #0e0f1a 70%, #000003 100%);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.02);
  text-shadow: 0 10px 36px rgba(0,0,0,0.65);
  animation: tier100DarkPulse 8.5s ease-in-out infinite;
}

/* slow sheen sweep for tier100 bright gradient */
@keyframes tier100Sheen {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  50%  { background-position: 100% 50%; filter: saturate(1.06) brightness(1.04); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* subtle dark pulse for the darker variant */
@keyframes tier100DarkPulse {
  0%   { filter: drop-shadow(0 12px 44px rgba(0,0,0,0.6)) saturate(0.95); transform: scale(1); }
  50%  { filter: drop-shadow(0 30px 86px rgba(0,0,0,0.75)) saturate(1.03); transform: scale(1.03); }
  100% { filter: drop-shadow(0 12px 44px rgba(0,0,0,0.6)) saturate(0.95); transform: scale(1); }
}

/* ------------------------------------------------------------
   Tier 101 - 200: Colored Gradient & Darker Gradient variants
   A compact grouped rule applies a bright multi-stop gradient
   to tiers 101..200 and a darker variant when .darken is present.
   ------------------------------------------------------------*/

/* Bright colored gradient for tiers 101–200 */
.tier101, .tier102, .tier103, .tier104, .tier105, .tier106, .tier107, .tier108, .tier109, .tier110,
.tier111, .tier112, .tier113, .tier114, .tier115, .tier116, .tier117, .tier118, .tier119, .tier120,
.tier121, .tier122, .tier123, .tier124, .tier125, .tier126, .tier127, .tier128, .tier129, .tier130,
.tier131, .tier132, .tier133, .tier134, .tier135, .tier136, .tier137, .tier138, .tier139, .tier140,
.tier141, .tier142, .tier143, .tier144, .tier145, .tier146, .tier147, .tier148, .tier149, .tier150,
.tier151, .tier152, .tier153, .tier154, .tier155, .tier156, .tier157, .tier158, .tier159, .tier160,
.tier161, .tier162, .tier163, .tier164, .tier165, .tier166, .tier167, .tier168, .tier169, .tier170,
.tier171, .tier172, .tier173, .tier174, .tier175, .tier176, .tier177, .tier178, .tier179, .tier180,
.tier181, .tier182, .tier183, .tier184, .tier185, .tier186, .tier187, .tier188, .tier189, .tier190,
.tier191, .tier192, .tier193, .tier194, .tier195, .tier196, .tier197, .tier198, .tier199, .tier200 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.5vw, 160px);
  will-change: transform, background-position, filter;
  text-shadow: 0 6px 18px rgba(0,0,0,0.12);
  /* default bright gradient: warm → cool → vivid */
  background: linear-gradient(120deg, #ff8a6b 0%, #ffc46b 25%, #fff47a 50%, #7be0ff 75%, #6b8cff 100%);
  background-size: 220% 220%;
  animation: tier101to200Sheen 8s linear infinite;
}

/* darker gradient variant for improved contrast */
.tier101.darken, .tier102.darken, .tier103.darken, .tier104.darken, .tier105.darken, .tier106.darken, .tier107.darken, .tier108.darken, .tier109.darken, .tier110.darken,
.tier111.darken, .tier112.darken, .tier113.darken, .tier114.darken, .tier115.darken, .tier116.darken, .tier117.darken, .tier118.darken, .tier119.darken, .tier120.darken,
.tier121.darken, .tier122.darken, .tier123.darken, .tier124.darken, .tier125.darken, .tier126.darken, .tier127.darken, .tier128.darken, .tier129.darken, .tier130.darken,
.tier131.darken, .tier132.darken, .tier133.darken, .tier134.darken, .tier135.darken, .tier136.darken, .tier137.darken, .tier138.darken, .tier139.darken, .tier140.darken,
.tier141.darken, .tier142.darken, .tier143.darken, .tier144.darken, .tier145.darken, .tier146.darken, .tier147.darken, .tier148.darken, .tier149.darken, .tier150.darken,
.tier151.darken, .tier152.darken, .tier153.darken, .tier154.darken, .tier155.darken, .tier156.darken, .tier157.darken, .tier158.darken, .tier159.darken, .tier160.darken,
.tier161.darken, .tier162.darken, .tier163.darken, .tier164.darken, .tier165.darken, .tier166.darken, .tier167.darken, .tier168.darken, .tier169.darken, .tier170.darken,
.tier171.darken, .tier172.darken, .tier173.darken, .tier174.darken, .tier175.darken, .tier176.darken, .tier177.darken, .tier178.darken, .tier179.darken, .tier180.darken,
.tier181.darken, .tier182.darken, .tier183.darken, .tier184.darken, .tier185.darken, .tier186.darken, .tier187.darken, .tier188.darken, .tier189.darken, .tier190.darken,
.tier191.darken, .tier192.darken, .tier193.darken, .tier194.darken, .tier195.darken, .tier196.darken, .tier197.darken, .tier198.darken, .tier199.darken, .tier200.darken {
  /* darker, high-contrast gradient suitable for light backgrounds */
  background: linear-gradient(120deg, #36283f 0%, #2b2b3a 30%, #12121a 60%, #000006 100%);
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.04);
  text-shadow: 0 10px 36px rgba(0,0,0,0.6);
  animation: tier101to200DarkPulse 9s ease-in-out infinite;
}

/* sheen animation for the bright variants */
@keyframes tier101to200Sheen {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  50%  { background-position: 100% 50%; filter: saturate(1.04) brightness(1.03); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* darker pulse animation for darken variants */
@keyframes tier101to200DarkPulse {
  0%   { filter: drop-shadow(0 10px 34px rgba(0,0,0,0.5)) saturate(0.95); transform: scale(1); }
  50%  { filter: drop-shadow(0 28px 84px rgba(0,0,0,0.66)) saturate(1.02); transform: scale(1.025); }
  100% { filter: drop-shadow(0 10px 34px rgba(0,0,0,0.5)) saturate(0.95); transform: scale(1); }
}

/* ------------------------------------------------------------
   Tier 201 - 300: Colored Gradient & Darker Gradient variants
   A compact grouped rule applies a bright multi-stop gradient
   to tiers 201..300 and a darker variant when .darken is present.
   ------------------------------------------------------------*/

/* Bright colored gradient for tiers 201–300 */
.tier201, .tier202, .tier203, .tier204, .tier205, .tier206, .tier207, .tier208, .tier209, .tier210,
.tier211, .tier212, .tier213, .tier214, .tier215, .tier216, .tier217, .tier218, .tier219, .tier220,
.tier221, .tier222, .tier223, .tier224, .tier225, .tier226, .tier227, .tier228, .tier229, .tier230,
.tier231, .tier232, .tier233, .tier234, .tier235, .tier236, .tier237, .tier238, .tier239, .tier240,
.tier241, .tier242, .tier243, .tier244, .tier245, .tier246, .tier247, .tier248, .tier249, .tier250,
.tier251, .tier252, .tier253, .tier254, .tier255, .tier256, .tier257, .tier258, .tier259, .tier260,
.tier261, .tier262, .tier263, .tier264, .tier265, .tier266, .tier267, .tier268, .tier269, .tier270,
.tier271, .tier272, .tier273, .tier274, .tier275, .tier276, .tier277, .tier278, .tier279, .tier280,
.tier281, .tier282, .tier283, .tier284, .tier285, .tier286, .tier287, .tier288, .tier289, .tier290,
.tier291, .tier292, .tier293, .tier294, .tier295, .tier296, .tier297, .tier298, .tier299, .tier300 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.5vw, 160px);
  will-change: transform, background-position, filter;
  text-shadow: 0 6px 18px rgba(0,0,0,0.12);
  /* default bright gradient: warm → cool → vivid */
  background: linear-gradient(120deg, #ff8a6b 0%, #ffc46b 25%, #fff47a 50%, #7be0ff 75%, #6b8cff 100%);
  background-size: 220% 220%;
  animation: tier201to300Sheen 8s linear infinite;
}

/* darker gradient variant for improved contrast */
.tier201.darken, .tier202.darken, .tier203.darken, .tier204.darken, .tier205.darken, .tier206.darken, .tier207.darken, .tier208.darken, .tier209.darken, .tier210.darken,
.tier211.darken, .tier212.darken, .tier213.darken, .tier214.darken, .tier215.darken, .tier216.darken, .tier217.darken, .tier218.darken, .tier219.darken, .tier220.darken,
.tier221.darken, .tier222.darken, .tier223.darken, .tier224.darken, .tier225.darken, .tier226.darken, .tier227.darken, .tier228.darken, .tier229.darken, .tier230.darken,
.tier231.darken, .tier232.darken, .tier233.darken, .tier234.darken, .tier235.darken, .tier236.darken, .tier237.darken, .tier238.darken, .tier239.darken, .tier240.darken,
.tier241.darken, .tier242.darken, .tier243.darken, .tier244.darken, .tier245.darken, .tier246.darken, .tier247.darken, .tier248.darken, .tier249.darken, .tier250.darken,
.tier251.darken, .tier252.darken, .tier253.darken, .tier254.darken, .tier255.darken, .tier256.darken, .tier257.darken, .tier258.darken, .tier259.darken, .tier260.darken,
.tier261.darken, .tier262.darken, .tier263.darken, .tier264.darken, .tier265.darken, .tier266.darken, .tier267.darken, .tier268.darken, .tier269.darken, .tier270.darken,
.tier271.darken, .tier272.darken, .tier273.darken, .tier274.darken, .tier275.darken, .tier276.darken, .tier277.darken, .tier278.darken, .tier279.darken, .tier280.darken,
.tier281.darken, .tier282.darken, .tier283.darken, .tier284.darken, .tier285.darken, .tier286.darken, .tier287.darken, .tier288.darken, .tier289.darken, .tier290.darken,
.tier291.darken, .tier292.darken, .tier293.darken, .tier294.darken, .tier295.darken, .tier296.darken, .tier297.darken, .tier298.darken, .tier299.darken, .tier300.darken {
  /* darker, high-contrast gradient suitable for light backgrounds */
  background: linear-gradient(120deg, #36283f 0%, #2b2b3a 30%, #12121a 60%, #000006 100%);
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.04);
  text-shadow: 0 10px 36px rgba(0,0,0,0.6);
  animation: tier201to300DarkPulse 9s ease-in-out infinite;
}

/* sheen animation for the bright variants */
@keyframes tier201to300Sheen {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  50%  { background-position: 100% 50%; filter: saturate(1.04) brightness(1.03); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* darker pulse animation for darken variants */
@keyframes tier201to300DarkPulse {
  0%   { filter: drop-shadow(0 10px 34px rgba(0,0,0,0.5)) saturate(0.95); transform: scale(1); }
  50%  { filter: drop-shadow(0 28px 84px rgba(0,0,0,0.66)) saturate(1.02); transform: scale(1.025); }
  100% { filter: drop-shadow(0 10px 34px rgba(0,0,0,0.5)) saturate(0.95); transform: scale(1); }
}

/* ------------------------------------------------------------
   Tier 301 - 400: Colored Gradient & Darker Gradient variants
   A compact grouped rule applies a bright multi-stop gradient
   to tiers 301..400 and a darker variant when .darken is present.
   ------------------------------------------------------------*/

/* Bright colored gradient for tiers 301–400 */
.tier301, .tier302, .tier303, .tier304, .tier305, .tier306, .tier307, .tier308, .tier309, .tier310,
.tier311, .tier312, .tier313, .tier314, .tier315, .tier316, .tier317, .tier318, .tier319, .tier320,
.tier321, .tier322, .tier323, .tier324, .tier325, .tier326, .tier327, .tier328, .tier329, .tier330,
.tier331, .tier332, .tier333, .tier334, .tier335, .tier336, .tier337, .tier338, .tier339, .tier340,
.tier341, .tier342, .tier343, .tier344, .tier345, .tier346, .tier347, .tier348, .tier349, .tier350,
.tier351, .tier352, .tier353, .tier354, .tier355, .tier356, .tier357, .tier358, .tier359, .tier360,
.tier361, .tier362, .tier363, .tier364, .tier365, .tier366, .tier367, .tier368, .tier369, .tier370,
.tier371, .tier372, .tier373, .tier374, .tier375, .tier376, .tier377, .tier378, .tier379, .tier380,
.tier381, .tier382, .tier383, .tier384, .tier385, .tier386, .tier387, .tier388, .tier389, .tier390,
.tier391, .tier392, .tier393, .tier394, .tier395, .tier396, .tier397, .tier398, .tier399, .tier400 {
  display: inline-block;
  font-weight: 920;
  letter-spacing: 0.01em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.06);
  transform: translateZ(0);
  font-size: clamp(20px, 5.5vw, 160px);
  will-change: transform, background-position, filter;
  text-shadow: 0 6px 18px rgba(0,0,0,0.12);
  /* default bright gradient: vivid multi-stop warm → cool */
  background: linear-gradient(120deg, #ff6a88 0%, #ffb56b 28%, #fff47a 52%, #76e6ff 78%, #7b8bff 100%);
  background-size: 220% 220%;
  animation: tier301to400Sheen 8.2s linear infinite;
}

/* darker gradient variant for improved contrast */
.tier301.darken, .tier302.darken, .tier303.darken, .tier304.darken, .tier305.darken, .tier306.darken, .tier307.darken, .tier308.darken, .tier309.darken, .tier310.darken,
.tier311.darken, .tier312.darken, .tier313.darken, .tier314.darken, .tier315.darken, .tier316.darken, .tier317.darken, .tier318.darken, .tier319.darken, .tier320.darken,
.tier321.darken, .tier322.darken, .tier323.darken, .tier324.darken, .tier325.darken, .tier326.darken, .tier327.darken, .tier328.darken, .tier329.darken, .tier330.darken,
.tier331.darken, .tier332.darken, .tier333.darken, .tier334.darken, .tier335.darken, .tier336.darken, .tier337.darken, .tier338.darken, .tier339.darken, .tier340.darken,
.tier341.darken, .tier342.darken, .tier343.darken, .tier344.darken, .tier345.darken, .tier346.darken, .tier347.darken, .tier348.darken, .tier349.darken, .tier350.darken,
.tier351.darken, .tier352.darken, .tier353.darken, .tier354.darken, .tier355.darken, .tier356.darken, .tier357.darken, .tier358.darken, .tier359.darken, .tier360.darken,
.tier361.darken, .tier362.darken, .tier363.darken, .tier364.darken, .tier365.darken, .tier366.darken, .tier367.darken, .tier368.darken, .tier369.darken, .tier370.darken,
.tier371.darken, .tier372.darken, .tier373.darken, .tier374.darken, .tier375.darken, .tier376.darken, .tier377.darken, .tier378.darken, .tier379.darken, .tier380.darken,
.tier381.darken, .tier382.darken, .tier383.darken, .tier384.darken, .tier385.darken, .tier386.darken, .tier387.darken, .tier388.darken, .tier389.darken, .tier390.darken,
.tier391.darken, .tier392.darken, .tier393.darken, .tier394.darken, .tier395.darken, .tier396.darken, .tier397.darken, .tier398.darken, .tier399.darken, .tier400.darken {
  /* darker, high-contrast gradient suitable for light backgrounds */
  background: linear-gradient(120deg, #2e2434 0%, #261f2b 30%, #0d0e14 60%, #000004 100%);
  -webkit-text-stroke: 0.8px rgba(255,255,255,0.04);
  text-shadow: 0 10px 36px rgba(0,0,0,0.6);
  animation: tier301to400DarkPulse 9.2s ease-in-out infinite;
}

/* sheen animation for the bright variants (slightly offset timing from previous groups) */
@keyframes tier301to400Sheen {
  0%   { background-position: 0% 50%; filter: saturate(1); }
  45%  { background-position: 100% 50%; filter: saturate(1.05) brightness(1.03); }
  100% { background-position: 0% 50%; filter: saturate(1); }
}

/* darker pulse animation for the darken variants (slightly slower feel) */
@keyframes tier301to400DarkPulse {
  0%   { filter: drop-shadow(0 12px 38px rgba(0,0,0,0.52)) saturate(0.94); transform: scale(1); }
  50%  { filter: drop-shadow(0 30px 92px rgba(0,0,0,0.68)) saturate(1.03); transform: scale(1.03); }
  100% { filter: drop-shadow(0 12px 38px rgba(0,0,0,0.52)) saturate(0.94); transform: scale(1); }
}