/* Fifteen premium ID frames. All movement stays in a small decorative perimeter. */
.thread-profile-frame.frame-animated {
  position:relative; isolation:isolate; padding:7px 10px; min-height:30px;
  border:2px solid var(--frame-color); border-radius:8px;
  background:var(--frame-bg,#091322); color:#f2f8ff;
  box-shadow:inset 0 0 0 1px #ffffff0d,0 0 7px var(--frame-halo,#83dfff20);
}
.thread-profile-frame.frame-animated::before,
.thread-profile-frame.frame-animated::after {
  content:''; position:absolute; pointer-events:none; z-index:-1;
  animation-play-state:paused !important;
}
.thread-profile-frame.frame-motion::before,
.thread-profile-frame.frame-motion::after { animation-play-state:running !important; }
/* Cut the center out of moving rails so letters never sit beneath an effect. */
.thread-profile-frame:is([data-frame="comet-trail"],[data-frame="hologram"],[data-frame="magma-vein"],[data-frame="pixel-pulse"])::before {
  inset:-2px; border-radius:inherit; padding:3px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude;
}
/* SATELLITE: two lights trace opposite edges of an elliptical orbit. */
.thread-profile-frame[data-frame="satellite"] { --frame-color:#8ecbff; --frame-bg:#0a1730; border-radius:99px; border-style:double; border-width:3px; }
.thread-profile-frame[data-frame="satellite"]::before,
.thread-profile-frame[data-frame="satellite"]::after { left:10%; right:10%; height:5px; background:radial-gradient(circle,#eefbff 0 1px,#66d9ff 1px 2px,transparent 3px) 0 0/6px 5px no-repeat; animation:frame-satellite 5s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="satellite"]::before { top:-3px; }
.thread-profile-frame[data-frame="satellite"]::after { bottom:-3px; animation-direction:alternate-reverse; }
@keyframes frame-satellite { to { background-position:100% 0; } }
/* CLOCKWORK: two tiny counter-rotating brass cogs in a riveted housing. */
.thread-profile-frame[data-frame="clockwork"] { --frame-color:#c9924d; --frame-bg:#211912; border-radius:3px; border-style:double; border-width:3px; }
.thread-profile-frame[data-frame="clockwork"]::before,
.thread-profile-frame[data-frame="clockwork"]::after { width:10px; height:10px; top:calc(50% - 5px); border:1px dashed #ffe1a2; border-radius:50%; background:radial-gradient(circle,#573912 0 1px,#ffdf98 1px 2px,transparent 2px),repeating-conic-gradient(#e4b769 0 20deg,transparent 20deg 45deg); animation:frame-gear 12s linear infinite; }
.thread-profile-frame[data-frame="clockwork"]::before { left:-5px; }
.thread-profile-frame[data-frame="clockwork"]::after { right:-5px; animation-direction:reverse; }
@keyframes frame-gear { to { transform:rotate(360deg); } }
/* RUNWAY: a travelling pair of white taxi lights over a cyan lamp rail. */
.thread-profile-frame[data-frame="runway"] { --frame-color:#69dbe2; --frame-bg:#092025; border-radius:2px; border-left-width:4px; border-right-width:4px; }
.thread-profile-frame[data-frame="runway"]::before { inset:-3px 2px; background:radial-gradient(circle,#72f2df 0 1px,transparent 2px) 0 0/10px 4px repeat-x,radial-gradient(circle,#72f2df 0 1px,transparent 2px) 0 100%/10px 4px repeat-x; opacity:.5; }
.thread-profile-frame[data-frame="runway"]::after { inset:-3px 2px; background:radial-gradient(circle,#fff 0 1px,#adfff2 1px 2px,transparent 3px) 0 0/8px 4px no-repeat,radial-gradient(circle,#fff 0 1px,#adfff2 1px 2px,transparent 3px) 100% 100%/8px 4px no-repeat; animation:frame-runway 3s linear infinite; }
@keyframes frame-runway { to { background-position:100% 0,0 100%; } }
/* SONAR: a rotating radar dial and a gently answering contact light. */
.thread-profile-frame[data-frame="sonar"] { --frame-color:#7cef9e; --frame-bg:#0b231c; border-radius:10px 2px; border-bottom-style:dashed; }
.thread-profile-frame[data-frame="sonar"]::before { width:13px; height:13px; left:-6px; top:-6px; border:1px solid #9ffab7; border-radius:50%; background:conic-gradient(from 0deg,#79ffac,transparent 100deg),radial-gradient(circle,transparent 0 2px,#235b40 2px 3px,#0b251b 3px); animation:frame-gear 6s linear infinite; }
.thread-profile-frame[data-frame="sonar"]::after { width:4px; height:4px; bottom:-3px; right:8px; border-radius:50%; background:#d0ffe3; box-shadow:0 0 4px #82ffbb; animation:frame-contact 6s ease-in-out infinite; }
@keyframes frame-contact { 0%,55%,100% { opacity:.3; } 70%,80% { opacity:1; } }
/* MARQUEE: a rounded theatre frame with gently alternating gold bulbs. */
.thread-profile-frame[data-frame="marquee"] { --frame-color:#eebf69; --frame-bg:#2a1726; border-radius:12px; border-width:3px; }
.thread-profile-frame[data-frame="marquee"]::before,
.thread-profile-frame[data-frame="marquee"]::after { inset:-4px 4px; background:radial-gradient(circle,#fff0bc 0 1px,#edb750 1px 2px,transparent 3px) 0 0/14px 5px repeat-x,radial-gradient(circle,#fff0bc 0 1px,#edb750 1px 2px,transparent 3px) 7px 100%/14px 5px repeat-x; animation:frame-bulbs 3.6s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="marquee"]::after { background-position:7px 0,0 100%; animation-direction:alternate-reverse; }
@keyframes frame-bulbs { from { opacity:.35; } to { opacity:1; } }
/* EQUALIZER: opposing little audio meters dance along the vertical edges. */
.thread-profile-frame[data-frame="equalizer"] { --frame-color:#b88cff; --frame-bg:#1b1130; border-radius:4px; border-top-color:#f3a4df; border-bottom-color:#78e3f1; }
.thread-profile-frame[data-frame="equalizer"]::before,
.thread-profile-frame[data-frame="equalizer"]::after { width:4px; height:70%; top:15%; background:repeating-linear-gradient(0deg,#8cfff1 0 2px,transparent 2px 4px); transform-origin:center bottom; animation:frame-meter 2.8s ease-in-out infinite; }
.thread-profile-frame[data-frame="equalizer"]::before { left:-3px; }
.thread-profile-frame[data-frame="equalizer"]::after { right:-3px; background:repeating-linear-gradient(0deg,#ffc5ef 0 2px,transparent 2px 4px); animation-delay:-1.4s; }
@keyframes frame-meter { 0%,100% { transform:scaleY(.4); } 24% { transform:scaleY(.8); } 48% { transform:scaleY(.55); } 72% { transform:scaleY(1); } }
/* COMET TRAIL: an icy streak passes around the rim of a midnight capsule. */
.thread-profile-frame[data-frame="comet-trail"] { --frame-color:#5276bb; --frame-bg:#0e1630; border-radius:14px 3px; }
.thread-profile-frame[data-frame="comet-trail"]::before { background:linear-gradient(110deg,transparent 25%,#6cc8ff 42%,#f5ffff 49%,transparent 53%) 100% 0/300% 100%; animation:frame-comet 5.5s linear infinite; }
.thread-profile-frame[data-frame="comet-trail"]::after { right:6px; top:-3px; width:3px; height:3px; background:#e7f6ff; border-radius:50%; box-shadow:-16px 0 #839cc5; }
@keyframes frame-comet { to { background-position:-50% 0; } }
/* REACTOR: three containment bands with slowly breathing corner cells. */
.thread-profile-frame[data-frame="reactor"] { --frame-color:#8dec8e; --frame-bg:#142519; border-width:3px; border-style:double; border-radius:3px; box-shadow:inset 0 0 0 1px #69a560; }
.thread-profile-frame[data-frame="reactor"]::before { inset:-3px; border:1px solid #c8ff7d; border-radius:3px; animation:frame-reactor 4.6s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="reactor"]::after { width:7px; height:7px; left:calc(50% - 3px); top:-5px; border:1px solid #e6ffac; background:#7dce69; transform:rotate(45deg); }
@keyframes frame-reactor { from { opacity:.3; box-shadow:0 0 0 #a5ff73; } to { opacity:.9; box-shadow:0 0 5px #a5ff7370; } }
/* FIREFLY: warm floating lights tucked into a leafy asymmetric border. */
.thread-profile-frame[data-frame="firefly"] { --frame-color:#89b877; --frame-bg:#11231f; border-radius:16px 3px; border-top-style:dotted; }
.thread-profile-frame[data-frame="firefly"]::before { width:4px; height:4px; left:8px; top:-3px; border-radius:50%; background:#fff9b8; box-shadow:0 0 5px #fff4a1; animation:frame-firefly 6s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="firefly"]::after { width:3px; height:3px; right:12px; bottom:-2px; border-radius:50%; background:#dcffa8; box-shadow:0 0 4px #dbff95; animation:frame-firefly 7s ease-in-out -3s infinite alternate-reverse; }
@keyframes frame-firefly { from { opacity:.4; transform:translate(0,0); } to { opacity:1; transform:translate(12px,2px); } }
/* HOLOGRAM: a prismatic edge shifts colors while the center stays opaque. */
.thread-profile-frame[data-frame="hologram"] { --frame-color:#bdc1ff; --frame-bg:#151a2d; border-radius:2px 10px; border-left-style:dashed; }
.thread-profile-frame[data-frame="hologram"]::before { background:linear-gradient(120deg,#73f4f0,#afb3ff,#ffa2d7,#73f4f0) 0 0/250% 100%; animation:frame-holo 7s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="hologram"]::after { inset:3px 0 auto; height:1px; background:linear-gradient(90deg,transparent,#b9e9ff70,transparent); opacity:.55; }
@keyframes frame-holo { to { background-position:100% 0; } }
/* MAGMA VEIN: molten orange fissures creep through a dark volcanic rim. */
.thread-profile-frame[data-frame="magma-vein"] { --frame-color:#794137; --frame-bg:#271414; border-radius:3px 9px 2px 8px; border-width:3px; }
.thread-profile-frame[data-frame="magma-vein"]::before { padding:4px; background:repeating-linear-gradient(125deg,#3e2826 0 9px,#d76236 10px,#ffd084 12px,#a84630 14px,#3e2826 17px) 0 0/200% 100%; animation:frame-magma 14s linear infinite; }
@keyframes frame-magma { to { background-position:100% 0; } }
/* CRYO CELL: crystalline corner shards catch a slow, cool glint. */
.thread-profile-frame[data-frame="cryo-cell"] { --frame-color:#a1e8f5; --frame-bg:#102438; border-radius:1px; border-style:double; border-width:3px; }
.thread-profile-frame[data-frame="cryo-cell"]::before,
.thread-profile-frame[data-frame="cryo-cell"]::after { width:10px; height:10px; background:linear-gradient(135deg,#fbffff,#9cdcf4 45%,#416f9d 47%,#d5fcff); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); animation:frame-ice 5s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="cryo-cell"]::before { left:-6px; top:-6px; }
.thread-profile-frame[data-frame="cryo-cell"]::after { right:-6px; bottom:-6px; animation-delay:-2.5s; }
@keyframes frame-ice { from { opacity:.55; } to { opacity:1; filter:brightness(1.2); } }
/* LASER GATE: two short scanning beams skim opposite horizontal rails. */
.thread-profile-frame[data-frame="laser-gate"] { --frame-color:#fc86cd; --frame-bg:#281429; border-radius:1px; border-left-width:4px; border-right-width:4px; border-top-color:#784668; border-bottom-color:#784668; }
.thread-profile-frame[data-frame="laser-gate"]::before,
.thread-profile-frame[data-frame="laser-gate"]::after { left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,#ffd1f2,transparent) 0 0/35% 100% no-repeat; animation:frame-satellite 3.8s ease-in-out infinite alternate; }
.thread-profile-frame[data-frame="laser-gate"]::before { top:-2px; }
.thread-profile-frame[data-frame="laser-gate"]::after { bottom:-2px; animation-direction:alternate-reverse; }
/* ROYAL SIGNET: a ruby crest above an engraved gold frame catches the light. */
.thread-profile-frame[data-frame="royal-signet"] { --frame-color:#e5c16d; --frame-bg:#281b35; border-radius:10px 10px 4px 4px; border-style:double; border-width:3px; color:#fff0c5; }
.thread-profile-frame[data-frame="royal-signet"]::before { width:15px; height:8px; left:calc(50% - 7px); top:-7px; background:#e6c374; clip-path:polygon(0 0,27% 45%,50% 0,73% 45%,100% 0,85% 100%,15% 100%); }
.thread-profile-frame[data-frame="royal-signet"]::after { width:4px; height:4px; left:calc(50% - 2px); top:-3px; border:1px solid #ffefb0; border-radius:1px; transform:rotate(45deg); background:#f4a3d0; animation:frame-jewel 5.4s ease-in-out infinite alternate; }
@keyframes frame-jewel { from { background:#bb4b94; } to { background:#ffe4f5; box-shadow:0 0 5px #ffcdec80; } }
/* PIXEL PULSE: stepped mint and violet pixels march around an arcade bezel. */
.thread-profile-frame[data-frame="pixel-pulse"] { --frame-color:#918bec; --frame-bg:#111930; border-radius:0; box-shadow:2px 2px 0 #443b70; }
.thread-profile-frame[data-frame="pixel-pulse"]::before { background:repeating-linear-gradient(90deg,#94f4d6 0 5px,#7181c3 5px 10px,#daa5ff 10px 15px,#7181c3 15px 20px) 0 0/40px 100%; animation:frame-pixels 4s steps(8,end) infinite; }
@keyframes frame-pixels { to { background-position:40px 0; } }
/* Keep small leaderboard IDs clear, including multi-line public tags. */
.board-table .thread-profile-frame.frame-animated { padding:6px 7px; margin:0 3px; max-width:calc(100% - 6px); }
.cosmetic-sample .thread-profile-frame.frame-animated { margin:6px; max-width:calc(100% - 12px); }
@media(prefers-reduced-motion:reduce) {
  .thread-profile-frame.frame-animated::before,.thread-profile-frame.frame-animated::after { animation:none !important; }
}
.reduced-motion .thread-profile-frame.frame-animated::before,
.reduced-motion .thread-profile-frame.frame-animated::after { animation:none !important; }