/* Hero tiles, stars and layout for players.html / player.html. Was shared with team.css until the
   team page got its own look (2026-11-13); kept separate so changing one page can't break the other. */
/* team.css - the shared Siege Team page (team.html). Look from siege-team.html and web/_mockups/sharing.css. */
:root{--ink:#e8eef9;--dim:#8695ad;--muted:#5e6b82;--gold:#e9c46a;--gold-deep:#b98a2e;--bg:#070b12}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink);font:14px/1.45 "Segoe UI",system-ui,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::before,body::after{content:"";position:fixed;z-index:0;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none}
body::before{width:520px;height:520px;left:-160px;top:-120px;background:radial-gradient(circle,#5a3a12,transparent 70%)}
body::after{width:560px;height:560px;right:-180px;top:180px;background:radial-gradient(circle,#1d3a66,transparent 70%)}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.wrap{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:18px 14px 70px}
.head{text-align:center;margin:6px 0 12px}
.head h1{margin:0;font-family:"Lilita One",system-ui;font-weight:400;font-size:33px;letter-spacing:.5px;background:linear-gradient(180deg,#fbe9b8,#e9c46a 55%,#b98a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.head p{margin:6px auto 0;color:var(--dim);font-size:13.5px;max-width:700px}
.panelwrap{max-width:640px;margin:0 auto}
.dc-parch{padding:24px 16px 26px}
.note{font:500 12.5px/1.45 "Segoe UI",system-ui,sans-serif;color:var(--dc-ink-soft);margin:8px 0 0}
.tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:12px 0 4px}
/* author + boss line */
.by{display:flex;align-items:center;gap:9px;min-width:0}
.by img{width:42px;height:42px;border-radius:9px;object-fit:cover;flex:none;background:#0a0806;border:1px solid #5b3814}
.by .grow{flex:1;min-width:0}
.by b{display:block;font:400 17px/1.2 "Lilita One",system-ui,sans-serif;color:#5a2f0c;letter-spacing:.3px;overflow-wrap:anywhere}
.by small{display:block;color:var(--dc-ink-soft);font-weight:600;font-size:12px;overflow-wrap:anywhere}
.tabh{margin:14px 2px 0;font:400 18px/1.2 "Lilita One",system-ui,sans-serif;color:#5a2f0c}
.lbl2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:8px 2px 4px;font:800 13px/1.2 "Segoe UI",system-ui,sans-serif;color:var(--dc-ink)}
/* hero tiles (6 + 4) */
.slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:6px}
.hx{position:relative;display:block;min-width:0;text-align:center}
.hx .pf{position:relative;display:block}
.hx img.p{display:block;width:100%;aspect-ratio:1;border-radius:6px;object-fit:cover;border:2px solid var(--rc,#777);background:#120d08}
.hx .ph{display:block;width:100%;aspect-ratio:1;border-radius:6px;border:2px dashed rgba(90,55,20,.55);background:rgba(60,35,12,.15)}
.hx .st{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-size:10px;line-height:1;letter-spacing:-1px;text-shadow:0 1px 1px #000,0 0 3px #000;pointer-events:none}
.st .g{color:#ffd24a}.st .b{color:#4fb6ff}.st .r{color:#ff5a4a}
.hx .nm{display:block;margin-top:2px;font:600 9.5px/1.2 system-ui,sans-serif;color:#3b2611;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx .ra{display:block;font:700 8.5px/1.2 system-ui,sans-serif;color:var(--dc-ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hx .rr{display:flex;justify-content:center;gap:1px;margin-top:2px;min-height:12px}
.hx .rr img,.hx .rr i{width:12px;height:12px;border-radius:2px;background:#120d08;border:1px solid #5b3814;object-fit:cover}
.hx .rr i{display:inline-block;background:rgba(60,35,12,.15);border-style:dashed}
.sgn{margin:12px 2px 0;padding:7px 9px;border-radius:8px;background:rgba(255,245,215,.35);border:1px dashed rgba(90,55,20,.45);font:500 13px/1.45 "Segoe UI",system-ui,sans-serif;color:#3b2611;overflow-wrap:anywhere;white-space:pre-line}
.private{text-align:center;padding:26px 12px;color:#3b2611}
.private b{display:block;font:400 22px/1.2 "Lilita One",system-ui,sans-serif;color:#5a2f0c;margin-bottom:4px}
.mine{margin:10px 0 0;padding:7px 9px;border-radius:8px;background:rgba(233,196,106,.3);border:1px solid rgba(160,110,30,.55);font:600 12.5px/1.4 "Segoe UI",system-ui,sans-serif;color:#3b2611}
.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:18px;max-width:700px;margin-left:auto;margin-right:auto}
.foot a{color:var(--gold)}
@media(max-width:480px){.wrap{padding:12px 8px 60px}.head h1{font-size:28px}.slots{gap:4px;padding:4px}.hx .nm{font-size:8.5px}.hx .ra{font-size:7.5px}.hx .rr img,.hx .rr i{width:10px;height:10px}}