/* v4 S5: about.html "THE PLAYER" trading card. CSP: self only. */

.pl{position:relative;isolation:isolate;overflow:hidden;padding:clamp(2.4rem,5.5vw,4.2rem) 0 clamp(2rem,4vw,3rem);
  background:radial-gradient(ellipse 70% 60% at 30% 40%,#2a0f55 0,#0d0820 42%,#05040a 78%);border-bottom:1px solid var(--line)}
.pl-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 78% 22%,rgba(255,46,154,.2),transparent 34%),radial-gradient(circle at 12% 70%,rgba(25,230,255,.14),transparent 36%)}
.pl-head{text-align:center;margin-bottom:clamp(1.6rem,4vw,2.8rem)}
.pl-title{margin:.9rem 0 .3rem;font:900 clamp(3.2rem,12vw,10rem)/.86 var(--f-disp);letter-spacing:.02em;text-transform:uppercase}
.pl-the{display:block;font:700 clamp(.95rem,2vw,1.45rem)/1 var(--f-ui);letter-spacing:.9em;color:var(--cyan);text-shadow:0 0 14px rgba(25,230,255,.8);margin-bottom:.35rem}
.pl-word{position:relative;display:inline-block;background:linear-gradient(180deg,#fff 0,#f1e6ff 36%,#c58bff 60%,#ff2e9a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(139,61,255,.65)) drop-shadow(0 4px 0 rgba(255,46,154,.4))}
.pl-word::after{content:attr(data-text);position:absolute;left:0;top:0;z-index:-1;color:transparent;-webkit-text-stroke:2px rgba(25,230,255,.55);transform:translate(.045em,.04em)}
.pl-sub{margin:1rem auto 0;max-width:40rem;color:var(--muted);font-size:clamp(.98rem,1.4vw,1.1rem)}

.pl-stage{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}

/* trading card */
.pcard{position:relative;isolation:isolate;display:flex;flex-direction:column;border-radius:18px;padding:14px;background:linear-gradient(155deg,#3a2a68,#120c28 55%,#1a0a30);
  box-shadow:0 0 0 2px rgba(255,210,63,.55),0 0 0 6px #0a0618,0 24px 60px rgba(0,0,0,.65),0 0 50px rgba(139,61,255,.45);
  transform:rotate(-1.2deg);transition:transform .35s}
.pcard:hover{transform:rotate(0) translateY(-4px)}
.pcard-holo{position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;opacity:.35;
  background:conic-gradient(from 120deg,transparent,rgba(25,230,255,.35),transparent 30%,rgba(255,46,154,.3),transparent 55%,rgba(255,210,63,.25),transparent 80%);
  animation:holo 10s linear infinite;mix-blend-mode:color-dodge}
@keyframes holo{to{transform:rotate(1turn)}}
.pcard-top,.pcard-body,.pcard-foot,.pcard-art{position:relative;z-index:1}
.pcard-top{display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.2rem .4rem .7rem;font:700 .72rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#d9ccff}
.pcard-rarity{color:var(--gold);display:inline-flex;align-items:center;gap:.45rem}
.pcard-art{position:relative;border-radius:12px;overflow:hidden;background:#05040a;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 0 30px rgba(255,46,154,.35)}
.pcard-art img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pcard-foil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 62%);mix-blend-mode:screen;animation:foil 5.5s ease-in-out infinite}
@keyframes foil{50%{transform:translateX(12%)}}
.pcard-lvl{position:absolute;left:12px;bottom:14px;background:rgba(7,6,13,.92);border:2px solid var(--cyan);padding:.65rem .9rem;font:900 1.15rem/1 var(--f-disp);box-shadow:0 0 22px rgba(25,230,255,.45)}
.pcard-lvl small{display:block;font:700 .62rem/1 var(--f-ui);letter-spacing:.24em;color:var(--cyan);margin-bottom:.3rem}
.pcard-body{padding:1.1rem .55rem .4rem}
.pcard-name{margin:0;font:900 clamp(1.6rem,3vw,2.2rem)/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pcard-role{margin:.45rem 0 0;font:700 .9rem/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.pcard-bio{margin:.85rem 0 0;color:var(--muted);font-size:.98rem}
.pcard-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin:1.2rem 0 0;padding:0}
.pcard-stats li{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.7rem .3rem;background:rgba(0,0,0,.35);border:1px solid var(--line);clip-path:var(--cham)}
.pcard-stats b{font:900 clamp(1rem,2vw,1.35rem)/1 var(--f-disp);color:#fff;text-shadow:0 0 12px rgba(255,46,154,.55)}
.pcard-stats span{margin-top:.35rem;font:700 .62rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pcard-note{margin:.8rem 0 0;font-size:.85rem;color:var(--muted)}
.pcard-foot{display:flex;justify-content:space-between;padding:.7rem .5rem 0;font:700 .68rem/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:#8a7fb0;border-top:1px solid rgba(185,149,255,.25);margin-top:.8rem}

.pl-side{display:grid;gap:1.2rem}
.pl-panel{padding:1.3rem 1.35rem;background:linear-gradient(160deg,rgba(25,230,255,.06),rgba(139,61,255,.1));border:1px solid var(--line);clip-path:var(--cham)}
.pl-h2{margin:.55rem 0 1rem;font:900 clamp(1.35rem,2.6vw,1.9rem)/1.05 var(--f-disp)}
.pl-h2 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-skills{margin:0}
.pl-skills .bar i{width:0;display:block;height:100%;background:var(--grad);border-radius:3px;box-shadow:0 0 10px var(--violet)}
.pl-skills .sk-94{width:94%}.pl-skills .sk-81{width:81%}.pl-skills .sk-76{width:76%}.pl-skills .sk-99{width:99%}
.pl-traits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pl-traits li{display:flex;flex-direction:column;gap:.25rem;padding:.85rem .9rem;background:rgba(7,6,13,.55);border:1px solid rgba(185,149,255,.35);border-radius:4px}
.pt-n{font:800 .95rem/1.1 var(--f-disp);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.pt-d{font:600 .8rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.pl-more{padding:clamp(3rem,7vw,5rem) 0;background:linear-gradient(180deg,#05040a,var(--bg) 28%)}
.pl-load{list-style:none;margin:0 0 2.2rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pl-load li{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.2rem;background:var(--panel);border:1px solid var(--line);clip-path:var(--cham)}
.pl-k{font:700 .72rem/1 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.pl-v{font:700 1.05rem/1.25 var(--f-ui);letter-spacing:.06em}
.pl-cta{display:flex;flex-wrap:wrap;gap:.8rem}

@media (max-width:900px){
  .pl-stage{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .pcard{transform:none}
  .pl-load{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pcard-stats{grid-template-columns:1fr 1fr}
  .pl-traits{grid-template-columns:1fr}
  .pl-load{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pcard-holo,.pcard-foil{animation:none}
  .pcard,.pcard:hover{transition:none;transform:none}
}