/* Melhorias de Pokémon: selo de raridade, abas Boost/Equipar da Equipe e a Oficina (client/upgrades-ui.mjs). */

/* ---- Selo de raridade (N…SSS): moldura octogonal neon, letras em degradê ---- */
.tierbadge {
  --c: #8a9aa6; --c2: #eef3f6; --cut: 4px; --edge: 1.5px;
  position: relative; display: inline-grid; place-items: center; align-content: center; flex: none;
  padding: 0 5px; line-height: 1; vertical-align: middle;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
  background: linear-gradient(160deg, var(--c2), var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000));
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 70%, transparent));
}
.tierbadge::before {
  content: ""; position: absolute; inset: var(--edge);
  clip-path: inherit;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 28%, #05090d), #05090d 70%);
}
.tierbadge > * { position: relative; }
.tierbadge .tbletters {
  font: 900 13px/1 "Arial Black", "Segoe UI", sans-serif; letter-spacing: 0.02em;
  background: linear-gradient(#fff 15%, var(--c2) 45%, var(--c) 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tierbadge .tblabel { font: 700 7.5px/1 "Segoe UI", sans-serif; letter-spacing: 0.12em; color: var(--c2); margin-top: 2px; white-space: nowrap; }
.tierbadge.tb-xs { height: 15px; min-width: 17px; padding: 0 3px; --cut: 3px; --edge: 1px; }
.tierbadge.tb-xs .tbletters { font-size: 9px; }
.tierbadge.tb-sm { height: 21px; min-width: 24px; }
.tierbadge.tb-md { height: 36px; min-width: 76px; padding: 0 8px; --cut: 7px; }
.tierbadge.tb-md .tbletters { font-size: 17px; }
.tierbadge.tb-md::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 26px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--c2), transparent);
}
.tier-R { --c: #2f7dff; --c2: #9cc8ff; }
.tier-SR { --c: #a24dff; --c2: #e0b4ff; }
.tier-S { --c: #10c8dc; --c2: #a6f6ff; }
.tier-SS { --c: #f0a800; --c2: #ffe792; }
.tier-SSS { --c: #ff2e2e; --c2: #ffb08a; }
.tierbadge.tier-SS, .tierbadge.tier-SSS { animation: tierglow 2.4s ease-in-out infinite; }
@keyframes tierglow {
  50% { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 90%, transparent)); }
}
@media (prefers-reduced-motion: reduce) { .tierbadge { animation: none !important; } }

.depotcard .tierbadge.depottier { position: absolute; top: 20px; right: 3px; }
.depotpicked .teamtitle h3 .tierbadge, .marketfoot .shoptext b .tierbadge { margin-right: 4px; vertical-align: 3px; }
.wildname .tierbadge, .outcome .head .tierbadge { margin-right: 3px; }
.prow:has(.prowtier) { position: relative; }
.prow .tierbadge.prowtier { position: absolute; left: 3px; top: 3px; }
.outcome .head b .tierbadge { vertical-align: 2px; }
.tiername { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tiername > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiertitle { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teamlvs { display: grid; gap: 4px; justify-items: end; }
.boostpill { color: #ffb4f0; border-color: #8a2f7a; background: #200a1c; font-weight: 800; letter-spacing: 0.03em; }

/* ---- Equipe: 5 abas ---- */
body.playing .teamwin { width: min(880px, 96vw); height: min(800px, 94vh); }
body.playing .teamtabs { grid-template-columns: repeat(5, 1fr); }
body.playing .teamtabs button { padding-inline: 4px; }

/* Composição do valor final (aba Atributos) */
.modbreak { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #08131b; border: 1px solid #1f4256; }
.modbreakhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.modbreakhead .chip { font-size: 11px; color: #ffb4f0; border-color: #8a2f7a; background: #200a1c; }
.modtable { display: grid; grid-template-columns: 46px repeat(6, 1fr) 62px; gap: 4px 8px; align-items: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.modtable .th { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.modtable .th:first-child { text-align: left; }
.modtable .mv { text-align: right; color: var(--text); }
.modtable .mv.zero { color: #4a5b68; }
.modtable .mv.flat { color: #ffb4f0; }
.modtable .mv.pct { color: var(--green); }
.modtable .mv.tier { color: var(--cyan); }
.modtable .sfinal { text-align: right; color: var(--gold); font-size: 14px; }
.modtable .sname.up { color: #ff9a8a; }
.modtable .sname.up::after { content: " ▲"; font-size: 8px; }
.modtable .sname.down { color: #8ab4ff; }
.modtable .sname.down::after { content: " ▼"; font-size: 8px; }

/* ---- Aba Boost ---- */
.boostpanel { display: grid; gap: 12px; }
.boosttop { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; padding: 12px; border-radius: 10px; background: linear-gradient(160deg, #1a0d1d, #09121a); border: 1px solid #5a2a52; box-shadow: inset 0 0 22px rgb(255 120 220 / 8%); }
.boostbig { display: grid; justify-items: center; gap: 2px; }
.boostbig b { font: 900 38px/1 "Arial Black", sans-serif; background: linear-gradient(#fff, #ffb4f0 55%, #c2409f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgb(255 100 210 / 45%)); }
.boostinfo { display: grid; gap: 6px; font-size: 13px; }
.bar.boost { height: 8px; }
.bar.boost span { background: linear-gradient(90deg, #7a2bd6, #ff5fc8); box-shadow: 0 0 8px rgb(255 95 200 / 50%); }
.booststones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.booststones .label { width: 100%; }
body.playing .stonepick { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); color: var(--text); font-size: 12px; }
body.playing .stonepick b { color: var(--gold); }
body.playing .stonepick.picked { border-color: #ff8fdc; box-shadow: 0 0 0 1px #ff8fdc, 0 0 10px rgb(255 95 200 / 30%); background: #1a0d1d; }
body.playing .stonepick.empty { opacity: 0.55; }
.boostnext { display: grid; gap: 6px; }
.boostnext .chip.ok, .gearsets .chip.ok, .forgecost .chip.ok { color: var(--green); border-color: #1e5a30; background: #0b1f12; }
.boostnext .chip.miss, .forgecost .chip.miss { color: #ff8a80; border-color: #5a2020; background: #1f0c0c; }
.boostnext .chip.warn { color: var(--yellow); border-color: #6a5418; background: #2a2008; }
.boostactions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.boostbands .here { color: #ffb4f0; font-weight: 700; }
.boostbands .bandnote { grid-column: 1 / -1; color: var(--muted); }
.boostbands { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 3px 10px; font-size: 12px; padding: 8px 10px; border-radius: 8px; background: #08131b; border: 1px solid var(--edge); }
.boostbands .th { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---- Aba Equipar: boneco com 4 peças + 2 helds ---- */
.gearpanel { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: auto auto; gap: 12px; }
.geardoll {
  display: grid; grid-template-columns: repeat(3, 70px); grid-template-rows: repeat(3, 70px) 58px; gap: 6px; justify-content: center; align-content: start;
  grid-template-areas: ". helmet ." "weapon pk armor" ". boots ." "x . y";
  padding: 10px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #12283a, #08121a 70%); border: 1px solid #1f4256;
}
.geardoll .slot-helmet { grid-area: helmet; }
.geardoll .slot-armor { grid-area: armor; }
.geardoll .slot-weapon { grid-area: weapon; }
.geardoll .slot-boots { grid-area: boots; }
.geardoll .slot-x { grid-area: x; }
.geardoll .slot-y { grid-area: y; }
.geardoll .dollpk { grid-area: pk; display: grid; place-items: center; }
.geardoll .dollpk .thumb.big { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #2f7fd6; background: radial-gradient(#183048, #0a141c); box-shadow: 0 0 14px rgb(74 163 255 / 25%); }
.geardoll .dollpk img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; }
body.playing .gearslot {
  position: relative; display: grid; place-items: center; padding: 14px 2px 2px; border-radius: 8px;
  background: #0a141c; border: 1px dashed #2a4357; color: var(--muted);
}
body.playing .gearslot.filled { border-style: solid; border-color: var(--gold-dim); background: linear-gradient(#16202a, #0b141c); }
body.playing .gearslot.focus { border-color: #8fd3ff; box-shadow: 0 0 0 1px #8fd3ff, 0 0 12px rgb(74 163 255 / 35%); }
body.playing .gearslot:hover { border-color: var(--gold); }
.gearslot .slotlabel { position: absolute; top: 3px; left: 0; right: 0; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--muted); }
.gearslot .slotempty, .fuseslot .slotempty { font-size: 22px; color: #3a5468; }
.gearslot .slottier { position: absolute; right: 3px; bottom: 2px; font-size: 9px; font-weight: 800; color: var(--gold); }
.slot-x, .slot-y { padding-top: 12px !important; }
.gearslot .ithumb canvas, .gearslot .ithumb img, .gearitem .ithumb canvas, .gearitem .ithumb img { width: 32px; height: 32px; image-rendering: pixelated; }
.ithumb img.animicon { image-rendering: pixelated; display: block; }
.gearpick { display: grid; gap: 6px; align-content: start; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.gearpickhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
body.playing .gearitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); color: var(--text); }
body.playing .gearitem:hover:not(:disabled) { border-color: var(--gold-dim); background: #0e1b26; }
body.playing .gearitem:disabled { opacity: 0.55; }
body.playing .gearitem.worn.none { border-style: dashed; color: var(--muted); }
.gearitem.worn .slotempty { width: 32px; text-align: center; }
.gearitem.worn .pill { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.gearitem .pill.miss { color: #ff8a80; border-color: #5a2020; }
.gearsets { grid-column: 1 / -1; display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #08131b; border: 1px solid #1f4256; }
.setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; }
.setrow.full b { color: var(--gold); }
.setrow .chip { font-size: 11px; }
.setrow .chip.off { color: #5d6f7c; }
body.playing .gearshop { justify-self: start; display: inline-flex; align-items: center; gap: 6px; }

/* ---- Oficina (Forja e Fusão) ---- */
body.playing .workshopwin { width: min(860px, 96vw); height: min(620px, 94vh); }
.workshopwin .wbody { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; overflow: hidden; }
body.playing .workshoptabs { grid-template-columns: repeat(2, 1fr); }
.workshoppane { min-height: 0; overflow-y: auto; padding-right: 4px; }
.forgegrid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; min-height: 0; }
.forgesets { display: grid; gap: 5px; align-content: start; }
body.playing .forgeset { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; text-align: left; padding: 6px 8px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); color: var(--text); }
body.playing .forgeset.picked { border-color: #8fd3ff; background: linear-gradient(#13283a, #0c1a26); box-shadow: 0 0 0 1px #8fd3ff; }
body.playing .forgeset.locked { opacity: 0.6; }
.forgeset .ithumb canvas, .forgeset .ithumb img { width: 32px; height: 32px; image-rendering: pixelated; }
.forgedetail { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 10px; background: linear-gradient(160deg, #0d1c28, #09121a); border: 1px solid #1f4256; }
.forgehead { display: flex; align-items: center; justify-content: space-between; }
.forgehead h3 { margin: 0; font: 700 20px Georgia, serif; font-variant: small-caps; letter-spacing: 0.06em; color: var(--gold); }
.forgecost { display: grid; gap: 5px; }
.forgecost .chips, .forgedetail > .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.forgecost .chip, .forgedetail .chip { font-size: 11px; }
.forgecost .itemchip { display: inline-flex; align-items: center; gap: 4px; }
.forgepieces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.forgepiece { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 8px; background: #0a141c; border: 1px solid var(--edge); text-align: center; font-size: 12px; }
.forgepiece .forgeicon canvas, .forgepiece .forgeicon img { width: 48px; height: 48px; image-rendering: pixelated; }
.forgepiece b { color: var(--text); }
.fusegrid { display: grid; gap: 10px; }
.fuseslots { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 10px; background: radial-gradient(circle, #12283a, #08121a 75%); border: 1px solid #1f4256; }
body.playing .fuseslot { width: 96px; height: 78px; display: grid; place-items: center; align-content: center; gap: 3px; border-radius: 8px; background: #0a141c; border: 1px dashed #2a4357; color: var(--muted); font-size: 11px; text-align: center; }
body.playing .fuseslot.filled { border-style: solid; border-color: var(--gold-dim); color: var(--text); }
.fuseslot.result { border-style: solid; border-color: #8fd3ff; color: #8fd3ff; }
.fuseslot.result b { color: var(--gold); font-size: 15px; }
.fuseplus { font-size: 20px; color: var(--gold); }
.fuselist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fusegrid > .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fusegrid > .chips .chip { font-size: 11px; }