#profile[data-game="rivals"] .ident.skinned::after { inset: 1px 1px 1px auto; width: min(360px, 60%); background-position: center 22%; opacity: .2; mask-image: linear-gradient(90deg, transparent, #000 65%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); animation: art-in .8s ease both; }
@keyframes art-in { from { opacity: 0; } }

.pun-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pun-flag { padding: 2px 8px; border-radius: 2px; font-size: 12px; font-weight: 600; color: var(--loss); background: color-mix(in srgb, var(--loss) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--loss) 30%, transparent); }
.tab-count { margin-left: 7px; padding: 0 5px; border-radius: 2px; font-size: 11px; font-weight: 700; color: var(--muted); box-shadow: var(--frame); pointer-events: none; }
.lb { color: #f3cf6b; font-weight: 700; white-space: nowrap; }

.role-main small .win, .role-main small .loss { font-weight: 600; }

.pun-active { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 14px var(--inset); border-top: 1px solid #000; box-shadow: inset 0 1px 0 var(--edge-soft); background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 7%, transparent), transparent 45%); }
.pun-active:first-child { border-top: 0; box-shadow: none; }
.pun-main, .pun-when { display: flex; flex-direction: column; }
.pun-main b { font-size: 16px; color: var(--bright); }
.pun-main span, .pun-when small { font-size: 13px; color: var(--muted); }
.pun-when { text-align: right; }
.pun-when b { font-size: 15px; }
.pun-when small b { color: var(--text); font-weight: 600; }
.pun-sum { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 14px var(--inset); background: var(--well); border-bottom: 1px solid #000; }
.pun-sum .cell { text-align: left; }
.pun-archived { margin-left: 8px; padding: 1px 6px; border-radius: 2px; font: 600 10px/1.5 var(--body); font-style: normal; vertical-align: 1px; color: var(--muted); background: rgba(255,255,255,.06); }
.pun-clean { display: flex; flex-direction: column; gap: 2px; }
.pun-clean b { font: 700 18px/1.2 var(--display); color: var(--win); }
.pun-clean span { font-size: 14px; color: var(--muted); }

.tile .unit { margin-left: 6px; font: 600 13px var(--body); color: var(--muted); }
.fav { display: flex; align-items: center; gap: 10px; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-icon { width: 30px; height: 30px; flex: none; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px #000; }

.bp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.bp { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 3px; background: var(--well); box-shadow: var(--frame); }
.bp-head { display: flex; align-items: baseline; justify-content: space-between; }
.bp-head b { font-size: 13px; color: var(--muted); }
.bp-head small { font-size: 12px; font-weight: 700; color: var(--text); }
.bp.full .bp-head small { color: var(--win); }
.bp.none { opacity: .5; }
.bp-name { font-size: 13px; font-weight: 600; color: var(--bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp .pbar { margin-top: 6px; }

.skin-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 12px var(--inset); background: var(--well); border-bottom: 1px solid #000; }
.skin-hero .mode-menu { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.skin-srcs { display: flex; flex-wrap: wrap; gap: 4px; }
.skin-src { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border: 0; border-radius: 3px; background: none; color: var(--muted); font: 600 13px var(--body); cursor: pointer; transition: color .2s ease, background .2s ease; }
.skin-src small { font-size: 11px; color: var(--faint); }
.skin-src:hover { color: var(--bright); background: rgba(255,255,255,.04); }
.skin-src[aria-pressed="true"] { color: var(--bright); background: var(--raised); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.05); }
.skin-src[aria-pressed="true"] small { color: var(--muted); }

.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; padding: 14px var(--inset); }
.skin { --q: #6b6b6b; margin: 0; min-width: 0; border-radius: 3px; overflow: hidden; background: var(--well); box-shadow: var(--frame); transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s ease; }
.skin:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px color-mix(in srgb, var(--q) 45%, var(--edge)), 0 10px 20px -10px rgba(0,0,0,.9); }
.skin.q-legendary { --q: #d9954a; }
.skin.q-epic { --q: #a98be0; }
.skin.q-rare { --q: #6ba4e6; }
.skin-art { position: relative; aspect-ratio: 1; background: radial-gradient(110% 80% at 50% 100%, color-mix(in srgb, var(--q) 32%, transparent), transparent 72%), #101010; }
.skin-art img { width: 100%; height: 100%; object-fit: cover; }
.skin-on { position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 2px; font: 700 10px/1.6 var(--body); font-style: normal; color: #241800; background: linear-gradient(180deg, #f6d77a, #d9a83a); }
.skin figcaption { display: flex; flex-direction: column; padding: 8px 10px 9px; line-height: 1.3; }
.skin figcaption b { font-size: 13px; color: color-mix(in srgb, var(--q) 35%, var(--bright)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin figcaption small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skin-none { padding: 18px var(--inset); }
.skin-more { display: block; width: calc(100% - 2 * var(--inset)); margin: 0 var(--inset) 14px; padding: 10px; }

@media (max-width: 960px) {
  .pun-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pun-when { text-align: left; }
  .skin-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; padding: 10px; }
  .pun-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  #profile[data-game="rivals"] .ident.skinned::after { animation: none; }
  .skin { transition: none; }
  .skin:hover { transform: none; }
}