/* A drawing's profile: a big panel where the drawing lives (role colour along the top, its role mark as a watermark,
   focus lines when it moves, move tiles along the bottom), its name and numbers beside it, then its kit, its moves on
   the training page, three cards (record, voice, build) and rows of more drawings. */
.profile { max-width: 1180px; }
.crumbs { display: flex; align-items: center; gap: 10px; margin: 4px 0 16px; font-size: 14px; font-weight: 700; color: var(--on-mat-dim); min-width: 0; }
.crumbs a { color: var(--on-mat); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.crumbs a::before { content: ""; display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -.2em; background: currentColor; -webkit-mask: var(--ink-back) center / contain no-repeat; mask: var(--ink-back) center / contain no-repeat; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs span:not(:empty)::before { content: "/"; margin-right: 10px; opacity: .5; }
.missing { padding: 34px 30px; max-width: 640px; box-shadow: 8px 8px 0 var(--drop); } .missing h1 { margin: 0 0 8px; font-size: 32px; } .missing p { color: var(--graphite); margin: 0 0 18px; }

/* ---- the banner -------------------------------------------------------------------------------------------------- */
.pf { --rc: var(--ink); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); overflow: hidden; border-width: 4px; border-top: 14px solid var(--rc); box-shadow: 10px 10px 0 var(--drop); animation: pfin .55s cubic-bezier(.2, 1.3, .5, 1) both; }
@keyframes pfin { from { transform: translateY(26px) scale(.97); opacity: 0; } }
.pf-stage { position: relative; min-height: 560px; overflow: hidden; cursor: pointer; border-right: 3px solid var(--ink); background: radial-gradient(70% 55% at 50% 64%, color-mix(in srgb, var(--rc) 17%, #fff), #fff 76%); -webkit-tap-highlight-color: transparent; }
.pf-stage::before { content: ""; position: absolute; inset: 16px; border: 1.5px solid var(--guide); opacity: .55; pointer-events: none; }
.pf-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; background: radial-gradient(circle, rgba(20, 20, 22, .15) 1.2px, transparent 1.4px) 0 0 / 8px 8px; -webkit-mask: linear-gradient(transparent, #000 60%); mask: linear-gradient(transparent, #000 60%); pointer-events: none; }
.pf-stage canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.pf-stage .burst { inset: -55%; }
.pf-mark { position: absolute; right: -40px; top: 30px; width: 300px; height: 300px; color: var(--rc); opacity: .09; transform: rotate(-14deg); pointer-events: none; }
.pf-mark .ic { width: 100%; height: 100%; }
.pf-stage .ribbon { position: absolute; z-index: 2; left: 18px; top: 20px; font-size: 15px; }
.pf-moves { position: absolute; z-index: 2; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 12px; }
.mv { position: relative; width: 62px; height: 62px; padding: 0; border: 3px solid var(--ink); background: var(--el); box-shadow: 3px 3px 0 var(--drop); cursor: pointer; transition: transform .1s, box-shadow .1s; }
.mv.ult { border-width: 4px; width: 68px; height: 68px; }
.mv:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--drop); }
.mv:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.mv b { position: absolute; z-index: 2; left: -8px; top: -10px; background: var(--ink); color: #fff; font: 400 13px/1 var(--display); padding: 4px 6px 3px; border-radius: 2px; }
.mv .pic { position: absolute; inset: 0; overflow: hidden; } .mv .pic img { display: block; width: 100%; height: 100%; }
.mv.cast { animation: castpop .38s cubic-bezier(.2, 1.6, .5, 1); } .mv.cast b { background: var(--hi); color: var(--ink); }
@keyframes castpop { 40% { transform: scale(1.16) rotate(-4deg); } }

.pf-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 30px 30px 26px; }
.pf-info .eyebrow { color: var(--gold-deep); margin: 0; }
.pf-info h1 { margin: 0; font-size: clamp(34px, 4.2vw, 58px); line-height: 1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.pf-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.elchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 3px 6px; background: var(--el); color: var(--on); border: 2px solid var(--ink); font: 900 12.5px/1.2 var(--text); }
.elchip .ic { width: 14px; height: 14px; }
.pf-tags .tchip { font-size: 13px; }
.pf .bio { margin: 0; font-size: 16.5px; line-height: 1.55; color: #2a2b30; quotes: "“" "”"; } .pf .bio:empty { display: none; }
.artnote { margin: 0; padding: 9px 13px 10px; background: #fffbe0; border-left: 5px solid var(--hi); } .artnote small { font-weight: 900; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); } .artnote p { margin: 2px 0 0; font-size: 15px; }
.pf .byline { font-size: 14.5px; }
/* the strip of versions: how the drawing looked at first and after each addition */
.versions { margin: 10px 0 4px; } .versions .vlabel { display: block; font-weight: 900; font-size: 13px; margin-bottom: 6px; }
.vstrip { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.vstrip figure { margin: 0; flex: none; width: 92px; text-align: center; } .vstrip img { width: 84px; height: 84px; border: 2.5px solid var(--ink); background: #fff; object-fit: contain; display: block; margin: 0 auto 4px; }
.vstrip figure.now img { box-shadow: 3px 3px 0 var(--ink); border-color: var(--ink); background: var(--hi); }
.vstrip figcaption b { display: block; font-size: 12px; font-weight: 900; line-height: 1.15; } .vstrip figcaption small { display: block; font-size: 10.5px; font-weight: 700; color: var(--graphite); line-height: 1.2; margin-top: 2px; }
.vstrip .varrow { font-weight: 900; color: var(--graphite); flex: none; }
.pf-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cnt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; padding: 11px 12px 10px; background: #fff; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 rgba(20, 20, 22, .18); min-width: 0; }
.cnt .ic { width: 20px; height: 20px; } .cnt.heart .ic { color: var(--red); } .cnt.eye .ic { color: var(--blue); } .cnt.swords .ic { color: var(--ink); } .cnt.trophy .ic { color: var(--gold-deep); }
.cnt b { font: 400 clamp(20px, 2.1vw, 27px)/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnt small { grid-column: 1 / -1; margin-top: 5px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.pf-act { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.pf-act .btn.big { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; font-size: 18px; padding: 13px 16px; }
.pf-act .btn.big small { font: 700 12px var(--text); opacity: .82; }
.pf-act .btn.heart, #pfShare { flex-direction: row; gap: 9px; }
.pf-act .btn.heart .ic { width: 22px; height: 22px; }
#pfShare .ic { width: 20px; height: 20px; }
.pf-report { margin: 0; text-align: right; } .pf-report .linkish { color: #6b6e76; font-size: 13px; }
.pf-own { margin: 0; padding: 9px 12px; background: #eef4ff; border: 2px dashed var(--blue); font-size: 14px; } .pf-own a { color: var(--blue); font-weight: 900; } .pf-own .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--blue); }

/* ---- the kit ----------------------------------------------------------------------------------------------------- */
.kitbox { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; padding: 24px; box-shadow: 7px 7px 0 var(--drop); }
.kit { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-content: start; }
.ktile { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; animation: slam .32s cubic-bezier(.2, 1.5, .5, 1) both; }
@keyframes slam { from { transform: translateY(-18px) scale(1.25); opacity: 0; } }
.ktile .pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--el); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--drop); transition: transform .1s, box-shadow .1s; }
.ktile.ult .pic { border-width: 4px; }
.ktile .pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ktile .elb { position: absolute; z-index: 1; right: 3px; bottom: 3px; width: 30%; aspect-ratio: 1; display: grid; place-items: center; background: var(--el); color: var(--on); border: 2px solid var(--ink); font-style: normal; }
.ktile .elb .ic { width: 70%; height: 70%; }
.ktile .cap { position: absolute; z-index: 2; left: -7px; top: -9px; background: var(--ink); color: #fff; font: 400 13px/1 var(--display); padding: 4px 6px 3px; border-radius: 2px; }
.ktile .nm { margin-top: 8px; font-weight: 900; font-size: 13.5px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ktile small { font-size: 11.5px; font-weight: 700; color: var(--graphite); }
.ktile:hover .pic { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--drop); }
.ktile[aria-pressed="true"] .pic { transform: translate(-2px, -3px); box-shadow: 5px 6px 0 var(--gold); }
.ktile[aria-pressed="true"] .cap { background: var(--hi); color: var(--ink); }
.ktile:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.kdet { --el: var(--ink); padding: 14px 18px 16px; background: #fff; border: 3px solid var(--ink); border-left: 10px solid var(--el); align-self: start; min-height: 170px; }
.kd-head { display: flex; align-items: center; gap: 10px; } .kd-head h3 { margin: 0; font-size: 22px; line-height: 1.1; }
.kd-head .cap { background: var(--ink); color: #fff; font: 400 14px/1 var(--display); padding: 5px 7px 4px; border-radius: 2px; }
.kd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; } .kd-tags > span .ic { margin-right: 4px; vertical-align: -.16em; } .kd-tags > span:not(.elchip) { padding: 3px 8px 2px; border: 2px solid var(--ink); font-size: 12px; font-weight: 900; }
.kdet p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; } .kd-nums { color: var(--graphite); font-weight: 700; font-size: 13.5px !important; } .kd-shout { font-family: var(--display); font-size: 17px !important; }

.movebox { padding: 18px 20px 20px; box-shadow: 7px 7px 0 var(--drop); }

/* ---- record, voice, build --------------------------------------------------------------------------------------- */
.pf-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 46px; }
.pf-card { padding: 18px 20px 20px; box-shadow: 6px 6px 0 var(--drop); min-width: 0; }
.pf-card h3 { margin: 0 0 14px; font-size: 21px; } .pf-card h4 { margin: 18px 0 8px; font-size: 15px; font-family: var(--display); font-weight: 400; }
.rec { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.ring { position: relative; width: 120px; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; } .ring .bg { stroke: var(--rule); } .ring .fg { stroke: var(--rc); stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .3, 1); }
.ring b { position: relative; font: 400 26px/1 var(--display); } .ring small { position: relative; margin-top: 4px; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--graphite); }
.recl { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.recl li { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 5px; border-bottom: 1.5px solid var(--rule); font-size: 14px; }
.recl li span { color: var(--graphite); font-weight: 700; } .recl b { font-weight: 900; text-align: right; } .recl small { font-weight: 700; color: var(--graphite); }
.vstyle { margin: 0 0 10px; color: var(--graphite); font-size: 14px; } .vstyle b { color: var(--ink); }
.vlines { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.vlines li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; }
.vlines span { font-size: 14.5px; line-height: 1.35; } .vlines small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.vbtn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; background: var(--ink); color: var(--hi); border: 2.5px solid var(--ink); border-radius: 50%; cursor: pointer; box-shadow: 2px 2px 0 var(--rc); }
.vbtn .ic { width: 16px; height: 16px; margin-left: 2px; } .vbtn:hover { background: #2a2b30; } .vbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.pips { display: grid; gap: 8px; margin: 0; }
.pips div { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 8px; }
.pips dt { font-size: 13px; font-weight: 700; color: var(--graphite); }
.pips dd { margin: 0; display: flex; gap: 3px; } .pips dd i { flex: 1; height: 10px; border: 2px solid var(--ink); background: var(--board); transform: skewX(-12deg); } .pips dd i.on { background: var(--rc); }
.pips b { font: 400 14px var(--display); min-width: 3.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.ups { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ups li { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13px; }
.ups .lv { font-weight: 900; color: var(--graphite); font-size: 12px; }
.ups .cap { display: grid; place-items: center; height: 24px; background: var(--el); color: #fff; border: 2px solid var(--ink); font: 400 12px/1 var(--display); text-shadow: 0 0 3px rgba(0, 0, 0, .5); }
.ups .ch { min-width: 0; } .ups .ch b { font-weight: 900; } .ups .ch em { font-style: normal; color: var(--graphite); margin: 0 5px; }

@media (max-width: 1020px) {
  .pf { grid-template-columns: 1fr; }
  .pf-stage { min-height: 440px; border-right: none; border-bottom: 3px solid var(--ink); }
  .kitbox { grid-template-columns: 1fr; }
  .pf-three { grid-template-columns: 1fr 1fr; } .pf-three > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .pf { box-shadow: 6px 6px 0 var(--drop); border-top-width: 10px; }
  .pf-stage { min-height: 360px; } .pf-stage::before { inset: 10px; }
  .pf-mark { width: 200px; height: 200px; right: -30px; }
  .pf-moves { gap: 10px; bottom: 14px; } .mv { width: 52px; height: 52px; } .mv.ult { width: 58px; height: 58px; }
  .pf-info { padding: 18px 16px 18px; gap: 12px; }
  .pf-count { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pf-act { gap: 10px; } .pf-act .btn.big { font-size: 16px; padding: 12px 10px; }
  .kitbox { padding: 16px 14px; gap: 18px; } .kit { gap: 10px; } .ktile .nm { font-size: 11.5px; } .ktile small { display: none; } .ktile .cap { font-size: 11px; padding: 3px 5px 2px; left: -5px; top: -7px; }
  .pf-three { grid-template-columns: 1fr; } .movebox { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .pf, .ktile { animation: none; } }
/* a fight link: the Fight button pulses so the friend who followed it knows what to press */
.pf .pulse { animation: pfpulse 1.1s ease-in-out 4; } @keyframes pfpulse { 50% { transform: scale(1.06); box-shadow: 6px 6px 0 var(--ink); } }
.pf .pf-chal { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--graphite); } .pf .pf-chal b { color: var(--ink); }
.pf .pf-act #pfChal { grid-column: 1 / -1; flex-direction: row; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .pf .pulse { animation: none; outline: 4px solid var(--hi); outline-offset: 2px; } }
.retirednote { margin: 4px 0 8px; padding: 4px 10px; display: inline-block; border: 2px dashed var(--ink); background: #f4f1ea; color: var(--ink); font-weight: 700; font-size: 14px; }