/* Transformações (client/transform.mjs): painel no cartão da equipe, aba da Oficina e anúncio. */

/* ---- Insígnia do rank ---- */
.tfbadge { --s: 40px; position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); }
.tfbadge img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.tfbadge.r3 img, .tfbadge.r4 img, .tfbadge.r5 img { animation: tfbglow 2.4s ease-in-out infinite; }
@keyframes tfbglow { 50% { filter: drop-shadow(0 0 calc(var(--s) * .12) rgb(220 140 255 / 80%)) brightness(1.08); } }
.tfbadge.r4::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgb(200 120 255 / 40%), transparent 60%); animation: tfpulse 2s ease-in-out infinite; }
.tfbadge.r5::before { content: ""; position: absolute; inset: -12%; z-index: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, rgb(255 230 150 / 45%) 10%, transparent 12% 33%, rgb(230 170 255 / 40%) 35%, transparent 37% 58%, rgb(255 230 150 / 45%) 60%, transparent 62% 83%, rgb(230 170 255 / 40%) 85%, transparent 87%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 68%); mask: radial-gradient(circle, #000 30%, transparent 68%); animation: tfspin 9s linear infinite; }
@keyframes tfspin { to { transform: rotate(360deg); } }
@keyframes tfpulse { 50% { transform: scale(1.12); opacity: .6; } }
.tfbadge .shine { position: absolute; inset: 0; z-index: 2; pointer-events: none; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 75%) 50%, transparent 65%) no-repeat; background-size: 250% 100%; animation: tfshine 3.2s ease-in-out infinite; }
@keyframes tfshine { 0% { background-position: 150% 0; } 55%, 100% { background-position: -60% 0; } }
.tfbadge.off img { filter: grayscale(1) brightness(.45) contrast(1.1); animation: none; }
.tfbadge.off::before, .tfbadge.off .shine { display: none; }

/* ---- Painel do HUD ---- */
.tfhud { --tf: #ff5d93; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / 8%); display: grid; gap: 5px; cursor: default; }
.tfhud[hidden] { display: none; }
.tfhud .tfbtn { position: relative; width: 100%; height: 52px; padding: 0 8px 0 4px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--tf) 60%, #fff); overflow: hidden;
  display: flex; align-items: center; gap: 8px; color: #fff; font: 800 13px "Segoe UI", sans-serif; letter-spacing: .02em; text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tf) 85%, #fff 0%), color-mix(in srgb, var(--tf) 55%, #200010));
  box-shadow: 0 0 16px color-mix(in srgb, var(--tf) 55%, transparent), inset 0 1px 0 rgb(255 255 255 / 35%); }
.tfbtn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 45%), transparent);
  transform: translateX(-80px) skewX(-20deg); animation: tfsweep 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes tfsweep { 60%, 100% { transform: translateX(330px) skewX(-20deg); } }
.tfbtn .tffill { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--tf) 50%, transparent), color-mix(in srgb, var(--tf) 25%, transparent)); transform-origin: left; transform: scaleX(0); }
.tfbtn .tfthumb { position: relative; flex: none; width: 36px; height: 48px; object-fit: cover; object-position: 50% 10%; filter: drop-shadow(0 0 6px #fff8); }
.tfbtn .tft { position: relative; z-index: 1; flex: 1; min-width: 0; line-height: 1.15; }
.tfbtn .tflabel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfbtn .tft small { display: block; font: 700 10.5px "Segoe UI", sans-serif; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfbtn .tfrk { position: relative; z-index: 1; display: flex; filter: drop-shadow(0 2px 4px #0009); }
.tfbtn.active { background: linear-gradient(135deg, #1a0a14, #2a0c1c); }
.tfbtn.active::after, .tfbtn.cool::after, .tfbtn.locked::after, .tfbtn.wake::after { display: none; }
.tfbtn.wake { background: radial-gradient(circle at 30% 50%, #fff, var(--tf) 40%, #300818); animation: tfwake .5s ease-in-out infinite alternate; }
@keyframes tfwake { to { box-shadow: 0 0 34px var(--tf); } }
.tfbtn.cool { background: #161e27; border-color: #34495b; color: #8aa0b0; box-shadow: none; }
.tfbtn.cool .tfthumb, .tfbtn.cool .tfrk { filter: grayscale(1) brightness(.6); }
.tfbtn.locked { background: #141c24; border-color: color-mix(in srgb, var(--tf) 35%, #34495b); color: #c9d6e0; box-shadow: none; font-weight: 700; }
.tfbtn.locked .tfthumb { filter: grayscale(.7) brightness(.7); }
.tfhud .tfbtn:disabled { opacity: 1; cursor: default; }
.tfinfo { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
.tfinfo .small { color: #9fb0bd; font-size: 11px; }
.tfchip { font: 700 10.5px "Segoe UI", sans-serif; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--tf) 18%, #0a0f16); border: 1px solid color-mix(in srgb, var(--tf) 45%, #1f3446); color: color-mix(in srgb, var(--tf) 45%, #fff); }
.tfchip.dim { opacity: .6; }

/* ---- Aba da Oficina ---- */
.tfforge { display: grid; grid-template-columns: 220px 1fr; border: 1px solid #2a465c; border-radius: 12px; overflow: hidden; background: #0a121a; min-height: 400px; }
.tflist { border-right: 1px solid #1f3446; background: #0c1620; }
.tflist .tfitem { --tf: #ff5d93; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid #14222e; border-radius: 0; background: none; text-align: left; color: inherit; }
.tfitem img { width: 32px; height: 42px; object-fit: cover; object-position: 50% 10%; }
.tfitem > div { flex: 1; min-width: 0; }
.tfitem .tfbadge img { width: 100%; height: 100%; object-fit: contain; }
.tfitem.lock > img { filter: grayscale(1) brightness(.6); }
.tfitem b { display: block; font-size: 12.5px; color: color-mix(in srgb, var(--tf) 60%, #fff); }
.tfitem small { color: #7f95a6; font-size: 11px; }
.tflist .tfitem.on { background: color-mix(in srgb, var(--tf) 14%, #0c1620); box-shadow: inset 3px 0 0 var(--tf); }
.tfdet { --tf: #ff5d93; --tf2: #7a1035; padding: 14px 16px; display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.tfart { position: relative; width: 240px; height: 310px; border-radius: 12px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tf) 40%, #2a465c); background: #070b10; }
.tfart canvas { display: block; }
.tfinfo2 h3 { margin: 0; font: 700 22px Georgia, serif; font-variant: small-caps; letter-spacing: .04em; color: color-mix(in srgb, var(--tf) 60%, #fff); }
.tffam { color: #9fb0bd; font-size: 12px; margin: 2px 0 8px; }
.tftrack { display: flex; gap: 6px; align-items: flex-end; margin: 4px 0 10px; padding: 8px 10px; border-radius: 12px; background: #0b141c; border: 1px solid #1f3446; }
.tftrack .step { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.tftrack .step small { font: 800 10px "Segoe UI", sans-serif; color: #7f95a6; letter-spacing: .05em; }
.tftrack .step.cur small { color: #ffe7a3; }
.tftrack .step.next small { color: #8ff0c0; }
.tftrack .step.next .tfbadge { outline: 1px dashed #8ff0c088; outline-offset: 2px; border-radius: 50%; }
.tfcmp { display: grid; grid-template-columns: 1fr auto 1fr; gap: 5px 10px; align-items: center; background: #0e1a24; border: 1px solid #1f3446; border-radius: 10px; padding: 9px 12px; font-size: 12.5px; margin-bottom: 10px; }
.tfcmp .arrow { color: #ffd76a; } .tfcmp .new { color: #8ff0c0; font-weight: 700; } .tfcmp .k { grid-column: 1 / -1; color: #7f95a6; font-size: 11px; }
.tfultbox { background: rgb(0 0 0 / 28%); border: 1px solid color-mix(in srgb, var(--tf) 40%, #1f3446); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: #cdd8e0; margin-bottom: 10px; }
.tfultbox b { color: color-mix(in srgb, var(--tf) 60%, #fff); }
.tfmats { display: grid; gap: 6px; margin-bottom: 12px; }
.tfmat { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #0e1a24; border: 1px solid #1f3446; }
.tfmat .tfitemart { flex: none; filter: drop-shadow(0 0 5px #0008); }
.tfmat .t { flex: 1; min-width: 0; } .tfmat .t b { font-size: 12.5px; } .tfmat .t small { display: block; color: #7f95a6; font-size: 11px; }
.tfmat .n { font-weight: 800; white-space: nowrap; } .tfmat .n.ok { color: #8ff0c0; } .tfmat .n.no { color: #ff8f8f; }
.tfcraft { height: 42px; padding: 0 20px 0 12px; margin-bottom: 6px; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 860px) { .tfforge, .tfdet { grid-template-columns: 1fr; } }

/* ---- Anúncio ---- */
.tfann { --tf: #ff5d93; --tf2: #7a1035; position: relative; height: 96px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 0 16px 0 136px;
  border: 2px solid #f1c86a; background: linear-gradient(90deg, color-mix(in srgb, var(--tf2) 70%, #000), color-mix(in srgb, var(--tf2) 85%, var(--tf) 15%) 45%, color-mix(in srgb, var(--tf2) 70%, #000));
  box-shadow: 0 0 22px color-mix(in srgb, var(--tf) 45%, transparent); }
.tfann .tfannart { position: absolute; left: -10px; top: -40px; pointer-events: none; }
.tfann .txt { position: relative; z-index: 2; flex: 1; min-width: 0; }
.tfann .txt small { display: block; font: 800 10px "Segoe UI", sans-serif; letter-spacing: .14em; color: #ffd28a; }
.tfann .txt b { display: block; font: 700 20px Georgia, serif; font-variant: small-caps; letter-spacing: .03em; color: #fff; text-shadow: 0 0 10px color-mix(in srgb, var(--tf) 80%, transparent); }
.tfann .txt span { color: color-mix(in srgb, var(--tf) 30%, #fff); font-size: 12px; }
.tfann .rk { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.tfann .rk small { font: 800 9.5px "Segoe UI", sans-serif; letter-spacing: .12em; color: #ffe7a3; margin-top: -4px; }
.tfann::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 80px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 25%), transparent);
  transform: translateX(-100px) skewX(-20deg); animation: tfsweep2 3.4s ease-in-out infinite; pointer-events: none; z-index: 1; }
@keyframes tfsweep2 { 60%, 100% { transform: translateX(1100px) skewX(-20deg); } }
.tfann.max { border-color: #ffe9a6; box-shadow: 0 0 34px color-mix(in srgb, var(--tf) 60%, transparent), 0 0 0 1px #fff4 inset; }
.tfann.max .txt b { background: linear-gradient(90deg, #fff, #ffe7a3, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .tfbtn::after, .tfann::after { animation: none; display: none; }
  .tfbtn.wake { animation: none; }
  .tfbadge img, .tfbadge::before, .tfbadge .shine { animation: none !important; }
}