/* Profile cosmetics and the Profile Shop. Classes are .cos-<item id>; all artwork is CSS. */
.token-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#dec78918;border:1px solid #dec78955;color:var(--gold);font-size:13px;white-space:nowrap}
.token-pill b{font-variant-numeric:tabular-nums;color:var(--gold-bright)}
.token-pill::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6d0,#e9c66a 45%,#a8823a);box-shadow:inset 0 0 0 2px #8a6a2c}
#quests .section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.shop-entry{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.shop-entry h3{margin:0 0 4px}
/* Name tag (lists) */
.cos-tag{display:inline-flex;align-items:center;gap:8px;min-width:0;vertical-align:middle;text-align:left}
.cos-tag-text{display:grid;min-width:0}
.cos-tag .cos-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cos-title{display:block;font-size:11px;letter-spacing:.06em;color:var(--text-muted);font-weight:600;text-transform:uppercase}
.cos-compact .cos-title{font-size:9.5px}
.cos-title-lg{margin:4px 0 6px;font-size:12px;color:var(--gold)}
.cos-avatar{--ring:transparent;display:inline-grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#dfc789,#a98b53);color:#1a291c;font-weight:800;font-size:15px;box-shadow:0 0 0 2px var(--ring);position:relative}
.cos-compact .cos-avatar{width:26px;height:26px;font-size:12px}
.cos-avatar-lg{width:78px;height:78px;font-size:36px;box-shadow:0 0 0 4px var(--ring)}
.cos-name{font-weight:700;color:var(--text)}
.cos-plate{display:inline-block;padding:2px 9px;border-radius:6px;line-height:1.35}
/* Frames */
.cos-frame-bronze{--ring:#b87a46;box-shadow:0 0 0 2px #b87a46,0 0 0 4px #5a3a1e}
.cos-frame-silver{--ring:#c9ced3;box-shadow:0 0 0 2px #e4e8ec,0 0 0 4px #6d747b}
.cos-frame-gold{box-shadow:0 0 0 2px #f4dc8f,0 0 0 4px #9c7a32,0 0 10px #e9c66a66}
.cos-frame-neon-red{box-shadow:0 0 0 2px #ff5a5a,0 0 10px #ff3b3b,0 0 18px #ff3b3b66}
.cos-frame-neon-green{box-shadow:0 0 0 2px #5fffa0,0 0 10px #2fe07a,0 0 18px #2fe07a66}
.cos-frame-neon-blue{box-shadow:0 0 0 2px #6cc8ff,0 0 10px #3aa8ff,0 0 18px #3aa8ff66}
.cos-avatar-lg.cos-frame-bronze,.cos-avatar-lg.cos-frame-silver,.cos-avatar-lg.cos-frame-gold{outline:2px solid #0006;outline-offset:5px}
.cos-frame-ember,.cos-frame-aurora,.cos-frame-royal,.cos-frame-hall{isolation:isolate}
.cos-frame-ember::before,.cos-frame-aurora::before,.cos-frame-royal::before,.cos-frame-hall::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:-1;animation:cos-spin 4s linear infinite}
.cos-avatar-lg.cos-frame-ember::before,.cos-avatar-lg.cos-frame-aurora::before,.cos-avatar-lg.cos-frame-royal::before,.cos-avatar-lg.cos-frame-hall::before{inset:-7px}
.cos-frame-ember::before{background:conic-gradient(#ff3b2b,#ffb04a,#ffe28a,#ff7b2a,#ff3b2b);filter:drop-shadow(0 0 6px #ff7b2a)}
.cos-frame-aurora::before{background:conic-gradient(#5fffa0,#6cc8ff,#c9a7ff,#ff9db4,#5fffa0);filter:drop-shadow(0 0 6px #6cc8ff)}
.cos-frame-royal::before{background:conic-gradient(#fff3c4,#e9c66a,#9c7a32,#f4dc8f,#fff3c4);filter:drop-shadow(0 0 8px #e9c66a)}
.cos-frame-royal::after{content:"♛";position:absolute;top:-.95em;left:50%;transform:translateX(-50%);font-size:.6em;color:#f4dc8f;text-shadow:0 0 6px #e9c66a}
.cos-frame-hall::before{background:conic-gradient(#a52e43,#dec789,#2fa25a,#dec789,#a52e43);filter:drop-shadow(0 0 8px #dec789)}
@keyframes cos-spin{to{transform:rotate(360deg)}}
/* Backgrounds (profile card) */
.cos-bg{position:relative;overflow:hidden}
.cos-bg-felt{background:radial-gradient(circle at 30% 20%,#2f5a3a,#173222 70%)}
.cos-bg-midnight{background:#121a2a}
.cos-bg-wine{background:#3a1520}
.cos-bg-sunset{background:linear-gradient(135deg,#5a2f1c,#a8603a 45%,#2a1a24)}
.cos-bg-emerald{background:linear-gradient(160deg,#0f3a2a,#1d6b4a 55%,#0d1f18)}
.cos-bg-steel{background:linear-gradient(135deg,#2b3036,#454c54 50%,#1d2126)}
.cos-bg-cards{background:radial-gradient(circle at 80% 20%,#dec78922,transparent 40%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='%23dec789' fill-opacity='.09' font-size='22' font-family='serif'%3E%3Ctext x='6' y='28'%3E%E2%99%A0%3C/text%3E%3Ctext x='46' y='28'%3E%E2%99%A5%3C/text%3E%3Ctext x='6' y='70'%3E%E2%99%A6%3C/text%3E%3Ctext x='46' y='70'%3E%E2%99%A3%3C/text%3E%3C/g%3E%3C/svg%3E"),linear-gradient(160deg,#173222,#0f1f15)}
.cos-bg-hazard{background:linear-gradient(180deg,#0000,#000a),repeating-linear-gradient(135deg,#3a3320 0 22px,#2a2617 22px 44px),#2a2617}
.cos-bg-hazard::before{content:"A";position:absolute;right:18px;bottom:-30px;font:900 160px/1 Inter,sans-serif;color:#f0c23a14;pointer-events:none}
.cos-bg-stars{background:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#dec789,transparent),radial-gradient(1px 1px at 85% 20%,#fff,transparent),radial-gradient(1px 1px at 55% 40%,#cde,transparent),linear-gradient(180deg,#0b1020,#1a1430);background-size:200px 200px,240px 240px,180px 180px,220px 220px,160px 160px,100% 100%;animation:cos-drift 40s linear infinite}
@keyframes cos-drift{to{background-position:200px 100px,-240px 120px,180px -90px,-220px 110px,160px 80px,0 0}}
.cos-bg-grid{background:linear-gradient(180deg,#120a22,#2a0e3a 60%,#3a1040)}
.cos-bg-grid::before{content:"";position:absolute;left:-50%;right:-50%;bottom:0;height:60%;background:repeating-linear-gradient(90deg,#ff4fd855 0 2px,transparent 2px 40px),repeating-linear-gradient(0deg,#ff4fd855 0 2px,transparent 2px 40px);transform:perspective(300px) rotateX(60deg);transform-origin:bottom;animation:cos-grid 3s linear infinite;pointer-events:none}
@keyframes cos-grid{to{background-position:0 0,0 40px}}
.cos-bg-champion{background:radial-gradient(circle at 50% 0%,#e9c66a44,transparent 60%),linear-gradient(160deg,#2a2210,#4a3a14 50%,#1c170a)}
.cos-bg-champion::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,#fff3c422 50%,transparent 60%);background-size:250% 100%;animation:cos-sheen 5s ease-in-out infinite;pointer-events:none}
@keyframes cos-sheen{from{background-position:120% 0}to{background-position:-120% 0}}
.cos-bg>*{position:relative}
/* Nameplates */
.cos-plate-brass{background:linear-gradient(180deg,#c9a45a,#8a6a2c);color:#20180a!important;box-shadow:inset 0 1px 0 #fff5}
.cos-plate-velvet{background:linear-gradient(180deg,#7a1f33,#4a1220);box-shadow:inset 0 0 0 1px #dec78966}
.cos-plate-carbon{background:repeating-linear-gradient(45deg,#1b1d20 0 4px,#2a2d31 4px 8px);box-shadow:inset 0 0 0 1px #ffffff1a}
.cos-plate-hazard{background:repeating-linear-gradient(135deg,#f0c23a 0 10px,#1d1d1d 10px 20px);color:#fff!important;text-shadow:0 0 3px #000,0 0 3px #000}
.cos-plate-foil{background:linear-gradient(110deg,#a8823a,#fff3c4 45%,#c9a45a 55%,#8a6a2c);color:#20180a!important}
.cos-plate-holo{background:linear-gradient(110deg,#5fffa055,#6cc8ff55,#c9a7ff55,#ff9db455,#5fffa055);background-size:300% 100%;box-shadow:inset 0 0 0 1px #ffffff40;animation:cos-holo 6s linear infinite}
@keyframes cos-holo{to{background-position:300% 0}}
.cos-plate-wire{background:#1a0f0d;box-shadow:inset 0 0 0 1px #ff5a4a,0 0 8px #ff3b2b88;animation:cos-wire 1.4s ease-in-out infinite}
@keyframes cos-wire{50%{box-shadow:inset 0 0 0 1px #ff8a6a,0 0 14px #ff3b2b}}
/* Username colours (curated for contrast on the dark theme) */
.cos-color-gold{color:#e9d191}.cos-color-mint{color:#7fe0a6}.cos-color-sky{color:#86c5ff}.cos-color-rose{color:#ff9db4}
.cos-color-amber{color:#ffb35c}.cos-color-lilac{color:#c9a7ff}.cos-color-ice{color:#bff3ff}.cos-color-crimson{color:#ff6b6b}
.cos-color-gilded{background:linear-gradient(90deg,#fff3c4,#e9c66a,#fff3c4);-webkit-background-clip:text;background-clip:text;color:transparent}
.cos-plate.cos-color-gilded{color:#e9c66a}
/* Showcases */
.cos-showcase{margin-top:18px;padding:14px;border-radius:12px}
.cos-showcase-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:10px}
.cos-showcase-item{display:grid;gap:3px;justify-items:center;text-align:center;padding:10px;border-radius:10px;background:#0006;border-bottom:3px solid var(--rarity)}
.cos-showcase-item .skin-art{width:100%;max-width:140px;height:auto}
.cos-showcase-item small{color:var(--text-muted);font-size:11px}
.cos-show-row{background:#0003}
.cos-show-velvet{background:linear-gradient(180deg,#4a1220,#2a0a12);box-shadow:inset 0 0 0 2px #dec78955}
.cos-show-velvet .cos-showcase-item{background:#ffffff0a;box-shadow:inset 0 0 0 1px #dec78933}
.cos-show-glass{background:linear-gradient(180deg,#ffffff14,#ffffff05);box-shadow:inset 0 0 0 1px #ffffff30,0 8px 20px #0006;backdrop-filter:blur(4px)}
.cos-show-glass .cos-showcase-item{background:linear-gradient(160deg,#ffffff18,#ffffff04);box-shadow:inset 0 1px 0 #ffffff40}
.cos-show-spotlight{background:#07090a;position:relative;overflow:hidden}
.cos-show-spotlight::before{content:"";position:absolute;inset:-40% -10% auto;height:180%;background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,#fff3c41c 175deg,#fff3c42a 180deg,#fff3c41c 185deg,transparent 200deg);animation:cos-sweep 6s ease-in-out infinite alternate;pointer-events:none}
@keyframes cos-sweep{from{transform:translateX(-25%)}to{transform:translateX(25%)}}
.cos-show-spotlight .cos-showcase-item{background:radial-gradient(ellipse at 50% 100%,#dec78922,transparent 70%)}
.cos-show-vault{background:repeating-linear-gradient(90deg,#1c2420 0 3px,#222c27 3px 6px);box-shadow:inset 0 0 0 3px #6d747b,inset 0 0 0 6px #2b3036}
.cos-show-vault .cos-showcase-item{background:#0b100d;box-shadow:inset 0 0 0 1px #c9ced355}
/* Shop dialog */
.shop-dialog{width:min(1180px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:18px;border-radius:16px;border:1px solid #dec78940;background:var(--bg);color:var(--text);overflow:auto}
.shop-dialog::backdrop{background:#000b}
.shop-head{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-bottom:14px}
.shop-head h2{margin:0}
.shop-head>div{margin-right:auto}
.shop-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start}
.shop-left{display:grid;gap:12px;position:sticky;top:0}
.shop-preview{min-height:160px;transition:background .3s}
.shop-preview-note{margin:12px 0 0;font-size:12px;color:var(--text-muted)}
.shop-detail{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.shop-detail .hint{margin:4px 0 0}
.shop-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.shop-cats button{border:1px solid #dec78940;background:var(--surface-sunken);color:var(--text);border-radius:999px;padding:7px 13px;cursor:pointer}
.shop-cats button[aria-selected="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold)}
.shop-filter{display:flex;gap:6px;margin-bottom:10px}
.shop-filter [aria-pressed="true"]{border-color:var(--gold);background:var(--gold);color:var(--on-gold)}
.shop-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shop-item{display:grid;gap:5px;justify-items:center;text-align:center;padding:12px 10px;border-radius:12px;border:1px solid #dec78930;background:var(--surface);color:var(--text);cursor:pointer;position:relative;transition:transform .15s,border-color .15s}
.shop-item:hover{transform:translateY(-2px);border-color:#dec78980}
.shop-item.is-selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.shop-item.is-equipped{border-color:#2fa25a}
.shop-item.tier-premium{background:radial-gradient(circle at 50% 0%,#dec78920,transparent 60%),var(--surface)}
.shop-item.tier-exclusive{background:radial-gradient(circle at 50% 0%,#a52e4333,transparent 60%),var(--surface)}
.shop-item small{font-size:11px;color:var(--text-muted)}
.shop-state{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold)}
.shop-item.is-equipped .shop-state{color:#5fd38a}
.shop-swatch{display:grid;place-items:center;height:56px;width:100%}
.shop-default{font-size:12px;color:var(--text-muted);border:1px dashed #dec78955;border-radius:8px;padding:6px 12px}
.cos-bg-swatch{width:100%;height:52px;border-radius:8px;display:block}
.cos-showcase-mini{margin:0;padding:6px;width:100%}
.cos-showcase-mini .cos-showcase-items{grid-template-columns:repeat(3,1fr);gap:4px}
.cos-showcase-mini i{height:24px;border-radius:4px;background:#ffffff14;border-bottom:2px solid var(--gold)}
.shop-picker{margin-top:12px}
.shop-picker-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.shop-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:340px;overflow:auto}
.shop-picker-grid .is-picked{outline:2px solid var(--gold);outline-offset:-2px}
.battle-host{display:flex;align-items:center;gap:6px;font-size:12px}
.player-card .cos-tag{max-width:100%}
.boardrow .player-name-link{display:inline-flex;min-width:0}
@media (max-width:820px){.shop-layout{grid-template-columns:1fr}.shop-left{position:static}.shop-items{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}
@media (prefers-reduced-motion:reduce){.cos-frame-ember::before,.cos-frame-aurora::before,.cos-frame-royal::before,.cos-frame-hall::before,.cos-bg-stars,.cos-bg-grid::before,.cos-bg-champion::before,.cos-plate-holo,.cos-plate-wire,.cos-show-spotlight::before{animation:none}.shop-item{transition:none}}
/* Player directory: the name tag carries its own avatar, so the card is name column + arrow. */
.player-card:has(.cos-tag){grid-template-columns:minmax(0,1fr) auto}
.player-card:has(.cos-tag) strong{grid-column:1;min-width:0;overflow-wrap:normal}
.player-card:has(.cos-tag)>span:not(.player-monogram){grid-column:1;padding-left:42px}
.player-card:has(.cos-tag) b{grid-column:2}
.player-card .cos-tag{display:flex;width:100%}
.player-card .cos-avatar{width:34px;height:34px;font-size:16px}
.player-card .cos-tag-text,.player-card .cos-name{min-width:0;max-width:100%}