/* A player's own page (1 Nov 2026, work list 15c2b; playerpage.py, player_page.html). The night green of the account
   pages, the trophy case as the site draws it (site.css .tcase), a 16 px gutter on a phone and nothing wider than the
   screen. */

main:has(.pp) { max-width: none; padding: 0; }
body:has(.pp) { background: var(--g-night); }
.pp { color: var(--g-cream); background: var(--g-night); font: 400 calc(17px * var(--text, 1))/1.5 var(--g-font-body); overflow-x: clip; min-height: 70vh; }
.pp a { color: var(--g-gold-1); }
.pp a.g-btn { color: var(--g-gold-ink); }
.pp a.g-btn-green { color: var(--g-cream); }
.pp-in { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.pp-band { background: var(--g-felt-bg); border-bottom: 2px solid rgba(255, 233, 163, 0.25); padding: 24px 0; }
.pp-who { display: flex; align-items: center; gap: 18px; }
.pp-face { position: relative; width: 112px; height: 112px; flex: none; display: block; }
.pp-pic { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--g-cream);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); }
.pp-face.framed .pp-pic { inset: 14px; }
.pp-pic img, .pp-pic svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.pp-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pp-name { min-width: 0; }
.pp-name h1 { font: 400 2.4rem/1.05 var(--g-font-display); margin: 0 0 8px; color: var(--g-cream); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pp-chip { padding: 5px 12px; border-radius: 999px; background: rgba(8, 36, 26, 0.55); border: 1px solid var(--g-line); font-weight: 700; font-size: 1rem; }

.pp-body { padding-top: 20px; padding-bottom: 48px; display: grid; gap: 16px; }
.pp-glass { background: var(--g-glass); border: 1px solid var(--g-line); border-radius: 16px; padding: 18px; min-width: 0; }
.pp h2 { font: 400 1.45rem/1.1 var(--g-font-display); color: var(--g-gold-1); margin: 0 0 12px; }
.pp-soft { color: var(--g-cream-soft); margin: 0 0 10px; }
.pp-acts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.pp-acts .g-btn, .pp-acts .g-btn-green { padding: 0.8em 1.3em; font-size: 1.1rem; }
.pp-own { border-color: var(--g-gold-3); background: rgba(246, 196, 67, 0.12); }
.pp-list { margin: 12px 0 0; padding-left: 1.2em; }
.pp-end { justify-content: center; margin-top: 8px; }

.pp-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pp-item { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 12px 8px; border-radius: 14px;
  background: rgba(255, 246, 226, 0.06); border: 2px solid var(--g-common-1); min-width: 0; }
.pp-item.r-rare { border-color: var(--g-rare-1); box-shadow: 0 0 14px var(--g-rare-glow); }
.pp-item.r-epic { border-color: var(--g-epic-1); box-shadow: 0 0 14px var(--g-epic-glow); }
.pp-item.r-legendary { border-color: var(--g-legend-1); box-shadow: 0 0 18px var(--g-legend-glow); }
.pp-art { width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 6px; overflow: hidden; }
/* a fixed box: a percentage max-height inside a grid cell does not resolve, so tall art (the ghost, the haunted
   lantern) spilled over its own name (5 Nov) */
.pp-art img { width: 84px; height: 84px; object-fit: contain; }
/* items with no painted picture are drawn from their own colours, as the shop draws them (5 Nov: Eva's plaid cloth
   showed blank) */
.pp-art .pp-swatch { width: 72px; height: 72px; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.35); }
.pp-art .pp-back { width: 54px; height: 72px; border-radius: 8px; box-shadow: inset 0 0 0 3px rgba(255,255,255,0.25), 0 2px 6px rgba(0,0,0,0.35); }
.pp-art .pp-sound { width: 56px; height: 56px; color: #f2d27a; }
.pp-item strong { font-size: 1.02rem; overflow-wrap: anywhere; }
.pp-kind { color: var(--g-cream-soft); font-size: 0.95rem; }
.pp-rarity { font-weight: 700; font-size: 0.95rem; color: #c7d3cc; }
.r-rare .pp-rarity { color: #9cc8ff; } .r-epic .pp-rarity { color: #d7b8ff; } .r-legendary .pp-rarity { color: #ffe58a; }
.pp-serial { margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--g-gold-2); color: var(--g-gold-ink); font-weight: 700; font-size: 0.95rem; }

.pp-sets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pp-sets li { display: grid; gap: 4px; padding: 16px; border-radius: 14px; min-height: 90px; align-content: end; border: 1px solid var(--g-line);
  background: linear-gradient(180deg, rgba(8, 36, 26, 0.1), rgba(8, 36, 26, 0.85)) , var(--g-green-2); background-size: cover; background-position: center; }
.pp-sets strong { font: 400 1.25rem/1.1 var(--g-font-display); color: var(--g-gold-1); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.pp-sets span { color: var(--g-cream); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

.pp-certs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pp-certs li, .pp-certs li a { display: grid; justify-items: center; text-align: center; gap: 4px; }
.pp-certs li { padding: 12px 8px; border-radius: 14px; background: rgba(255, 246, 226, 0.06); border: 1px solid var(--g-line); }
.pp-certs li a { text-decoration: none; color: var(--g-cream); }
.pp-certs img { width: 72px; height: 72px; object-fit: contain; }
.pp-certs span { color: var(--g-cream-soft); font-size: 0.95rem; }

@media (max-width: 600px) {
  .pp-band { padding: 16px 0; }
  .pp-face { width: 80px; height: 80px; }
  .pp-face.framed .pp-pic { inset: 10px; }
  .pp-name h1 { font-size: 1.8rem; }
  .pp-glass { padding: 14px; }
  .pp-items, .pp-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-acts > * { flex: 1 1 100%; text-align: center; }
}