@layer components{.hp{gap:22px;max-width:860px;margin:0 auto;display:grid}.hp-head{text-align:center;flex-direction:column;align-items:center;gap:18px;display:flex;padding:28px 22px 24px!important}.hp-boards{padding:34px 22px 18px!important}@media (min-width:640px){.hp-head,.hp-boards{padding-left:30px!important;padding-right:30px!important}.hp-head{text-align:left;flex-direction:row;gap:28px}}.hp-portrait{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-crystal) 25%, transparent), 0 0 40px color-mix(in srgb, var(--color-crystal) 30%, transparent)}.hp-id{min-width:0}.hp-eyebrow{letter-spacing:.35em;color:var(--color-crystal);font-size:11px}.hp-name{font-family:var(--font-display);color:var(--color-pearl);overflow-wrap:anywhere;margin-top:4px;font-size:clamp(2rem,6vw,3.2rem);font-weight:900;line-height:1.05}.hp-class{color:var(--color-silver);margin-top:4px;font-size:15px}.hp-guild{min-height:32px;color:var(--color-gold);align-items:center;gap:8px;margin-top:10px;font-size:14px;display:inline-flex}a.hp-guild:hover span{text-underline-offset:3px;text-decoration:underline}.hp-guild.is-none{color:var(--color-muted)}.hp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}@media (min-width:640px){.hp-stats{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}}.hp-stats>div{border:1px solid var(--color-line);background:color-mix(in srgb, var(--color-void) 70%, transparent);text-align:center;border-radius:12px;padding:14px 10px}.hp-stats dt{letter-spacing:.2em;text-transform:uppercase;color:var(--color-muted);font-size:11px}.hp-stats dd{font-family:var(--font-sans);color:var(--color-pearl);font-variant-numeric:tabular-nums;margin-top:4px;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800}.hp-boards ul{gap:4px;display:grid}.hp-board{border-bottom:1px solid color-mix(in srgb, var(--color-line) 60%, transparent);grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name rank""moves moves""spark spark";align-items:center;gap:6px 14px;padding:12px 0;display:grid}@media (min-width:640px){.hp-board{grid-template-columns:150px 80px minmax(0,1fr) 160px;grid-template-areas:"name rank moves spark"}}.hp-board:last-child{border-bottom:0}.hp-board-name{color:var(--color-pearl);grid-area:name;font-size:14px;font-weight:700}.hp-board-name:hover{color:var(--color-crystal)}.hp-rank{font-family:var(--font-sans);color:var(--color-crystal);font-variant-numeric:tabular-nums;text-align:right;grid-area:rank;font-size:1.7rem;font-weight:900}.hp-rank small{color:var(--color-muted);margin-right:1px;font-size:.55em}.hp-moves{color:var(--color-muted);flex-wrap:wrap;grid-area:moves;gap:6px 14px;font-size:13px;display:flex}.hp-move b{font-variant-numeric:tabular-nums}.hp-move.is-up b{color:#5fe0a0}.hp-move.is-down b{color:#ff8fa8}.hp-move.is-flat b,.hp-move.is-none b{color:var(--color-silver)}.hp-spark{grid-area:spark;justify-self:start}@media (min-width:640px){.hp-spark{justify-self:end}}.hp-spark path{stroke:var(--color-crystal)}.hp-spark circle{fill:var(--color-crystal);stroke:var(--color-void);stroke-width:2px}.hp-out{color:var(--color-muted);text-align:right;grid-column:2/-1;font-size:13px}@media (max-width:639px){.hp-out{grid-area:rank}}.hp-note{color:var(--color-muted);margin-top:10px;font-size:12px}.gp-mark{border:1px solid var(--color-line);box-shadow:0 0 30px color-mix(in srgb, var(--color-crystal) 22%, transparent);background:#0008;border-radius:10px;padding:10px}.gp-lord{letter-spacing:.08em;color:var(--color-gold);margin-top:8px;font-size:13px;font-weight:700}.gp-score{grid-column:1/-1}@media (min-width:640px){.gp-score{grid-area:spark;justify-content:flex-end}}.gp-master{color:var(--color-gold)}.gp-master:hover{text-underline-offset:3px;text-decoration:underline}.gp-mix{flex-wrap:wrap;gap:10px;display:flex!important}.gp-mix li{border:1px solid var(--color-line);color:var(--color-silver);border-radius:999px;align-items:center;gap:8px;padding:4px 12px 4px 4px;font-size:13px;display:inline-flex}.gp-mix b{color:var(--color-pearl);font-variant-numeric:tabular-nums}.hp-foot{text-align:center;color:var(--color-muted);font-size:13px}.hp-foot a{color:var(--color-crystal);text-underline-offset:3px;text-decoration:underline}}:is([data-template=icarus],[data-template=grove],[data-template=bazaar]) .hp-stats>div{background:#fffc}:is([data-template=icarus],[data-template=grove],[data-template=bazaar]) .hp-move.is-up b{color:#0f7a46}:is([data-template=icarus],[data-template=grove],[data-template=bazaar]) .hp-move.is-down b{color:#b3263f}:is([data-template=icarus],[data-template=grove],[data-template=bazaar]) .hp-guild{color:#8a5a00}
