/* DrawGuess shop, avatars and neon names. Shared by the Android app and the website. */

/* ---------- avatars ---------- */
.dg-av-img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.av:has(>.dg-av-img),.a2:has(>.dg-av-img){padding:0;overflow:hidden;background:transparent!important;box-shadow:0 0 0 2px var(--s1),0 0 0 3px var(--line)}
.av.big.has-img{box-shadow:0 0 0 3px var(--s1),0 0 0 4px var(--pri-2),0 8px 18px -8px rgba(0,0,0,.35)}
.a2:has(>.dg-av-img){width:44px;height:44px;border-radius:50%}

/* ---------- neon names ---------- */
.dg-neon{font-weight:800;letter-spacing:0;-webkit-text-fill-color:currentColor}
.dg-neon-pink{color:#ffd1f1;text-shadow:0 0 2px #ff7fd6,0 0 7px #ff2fb3,0 0 15px #ff2fb388}
.dg-neon-cyan{color:#d6fdff;text-shadow:0 0 2px #5ff0ff,0 0 7px #12d8ee,0 0 15px #12d8ee88}
.dg-neon-lime{color:#efffc9;text-shadow:0 0 2px #b6ff3a,0 0 7px #8bf000,0 0 15px #8bf00088}
.dg-neon-violet{color:#efe2ff;text-shadow:0 0 2px #b98aff,0 0 7px #8a4dff,0 0 15px #8a4dff88}
.dg-neon-gold{color:#fff4c4;text-shadow:0 0 2px #ffd24a,0 0 7px #ffb400,0 0 15px #ffb40088}
.dg-neon-fire{color:#ffe3c2;text-shadow:0 0 2px #ff9a4d,0 0 7px #ff5a00,0 0 14px #ff2a0099}
.dg-neon-ice{color:#f2fbff;text-shadow:0 0 2px #8fdcff,0 0 7px #3aa8ff,0 0 15px #2f9bff77}
.dg-neon-rainbow{background:linear-gradient(90deg,#ff4d6d,#ffb400,#7bd500,#18c8ff,#9b5de5,#ff4d6d);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 4px #ff7ad9aa);animation:dgNeonSlide 5s linear infinite}
@keyframes dgNeonSlide{to{background-position:-250% 0}}
/* Light cards wash out glow text, so neon names sit on a dark chip wherever the card is light. */
.pl b.dg-neon,.pv2 b.dg-neon,.rk b.dg-neon,.pcard .pi b.dg-neon{display:inline-block;width:fit-content;max-width:100%;justify-self:start;padding:1px 10px;border-radius:9px;background:#1b1530}
.dg-neon-rainbow.dg-neon{background-color:transparent}
.pl b.dg-neon-rainbow,.pv2 b.dg-neon-rainbow,.rk b.dg-neon-rainbow,.pcard .pi b.dg-neon-rainbow{background-image:linear-gradient(90deg,#ff4d6d,#ffb400,#7bd500,#18c8ff,#9b5de5,#ff4d6d);background-color:#1b1530;background-size:250% 100%;background-clip:text;-webkit-background-clip:text}
@media(prefers-reduced-motion:reduce){.dg-neon-rainbow{animation:none}}

/* ---------- shop layout ---------- */
#p-shop .shop-top{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;margin-bottom:12px}
#p-shop .shop-wallet,#p-shop .shop-collect{padding:14px 16px;border-radius:var(--r3);border:1px solid var(--line);background:var(--s1);box-shadow:var(--sh1)}
#p-shop .shop-wallet{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff3c6,#f6d97c);border-color:#e6c66c}
#p-shop .shop-wallet .cn{width:38px;height:38px}
#p-shop .shop-wallet small,#p-shop .shop-collect small{display:block;color:var(--mut);font-size:12px;font-weight:700}
#p-shop .shop-wallet b{font-size:26px;line-height:1.1;color:var(--pri-ink)}
#p-shop .shop-collect b{display:block;font-size:19px;margin:2px 0 8px}
#p-shop .shop-prog{height:7px;border-radius:99px;background:var(--s3);overflow:hidden}
#p-shop .shop-prog span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pri-2),var(--pri));transition:width .5s var(--ease,ease)}
#p-shop .shop-sec-head h3{margin:0 0 2px;font-size:17px}
#p-shop .shop-sec-head p{margin:0 0 10px;color:var(--mut);font-size:13px}
#p-shop .shop-packs{margin-bottom:16px}
#p-shop .coin-pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
#p-shop .coin-pack-card{display:grid;gap:8px;padding:12px;border-radius:var(--r3);border:1px solid var(--line);background:var(--s1);box-shadow:var(--sh1);text-align:center}
#p-shop .coin-pack-card .pack-art{display:grid;place-items:center;height:64px}
#p-shop .coin-pack-card .pack-art img{height:100%}
#p-shop .coin-pack-card b{display:block;font-size:14px}
#p-shop .coin-pack-card strong{display:block;color:var(--pri-3);font-size:16px}
#p-shop .coin-pack-card small{color:var(--mut);font-size:12px}
#p-shop .coin-pack-card button{min-height:38px;border:0;border-radius:12px;background:var(--s2);color:var(--mut);font-weight:800}

#p-shop .grid-shop{grid-template-columns:repeat(2,1fr);gap:10px}
#p-shop .sc{cursor:default;align-content:start;padding:10px 10px 12px;overflow:hidden}
#p-shop .sc .sv{min-height:104px;background:var(--s2)}
#p-shop .sc .tier-tag{position:absolute;z-index:2;top:8px;inset-inline-end:8px;padding:1px 8px;border-radius:99px;font-size:10.5px;font-weight:800;background:#ffffffcc;color:var(--mut);border:1px solid var(--line)}
#p-shop .sc.tier-rare .tier-tag{background:#e3f1ff;color:#2a69b5;border-color:#b9d8f6}
#p-shop .sc.tier-epic .tier-tag{background:#f0e6ff;color:#7440c8;border-color:#d6c1f7}
#p-shop .sc.tier-legend .tier-tag{background:linear-gradient(90deg,#ffe58a,#ffc13d);color:#6a4300;border-color:#e8b53b}
#p-shop .sc.tier-legend{border-color:#e8b53b;box-shadow:0 0 0 1px #f4d37b,0 10px 24px -14px #d99a12}
#p-shop .sc.tier-epic{border-color:#cdb6f1}
#p-shop .sc.tier-rare{border-color:#bcd8f3}
#p-shop .sc.own{background:linear-gradient(180deg,var(--s1),#f4fbe9);border-color:#b6dc8a}
#p-shop .sc.eq{box-shadow:0 0 0 2px var(--pri),var(--sh1)}
#p-shop .sc .btn{width:100%;min-height:40px;padding:0 12px;font-size:14px}
#p-shop .sc .btn.need{background:var(--s2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
#p-shop .sc .shop-prog{margin:4px 2px 2px}
#p-shop .shop-missing{font-size:11.5px;color:var(--mut)}
#p-shop .shop-missing.ok{color:#3f8a1f;font-weight:800}
#p-shop .sc .tagc{inset-inline-start:8px;top:8px;z-index:2}

/* previews */
.sp{position:relative;display:grid;place-items:center;width:100%;height:104px}
.sp.locked>:not(.shop-lock){opacity:.92}
.sp-avatar.locked img{filter:saturate(.55)}
.shop-lock{position:absolute;inset-inline-end:8px;bottom:8px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#3a2c0bdd;color:#fff}
.shop-lock svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sp-color i{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#ffffff88,transparent 46%),var(--c);box-shadow:0 8px 16px -8px var(--c),inset 0 0 0 3px #ffffff66}
.sp-frame .fr{width:76px;height:62px;border:5px solid;border-radius:14px;background:var(--s1)}
.sp-avatar img{width:82px;height:82px;border-radius:50%;box-shadow:0 8px 16px -8px rgba(0,0,0,.4)}
.sp-neon{background:#1b1530;border-radius:inherit}
.sp-neon span{font-size:25px;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-title .dg-profile-title{font-size:13px}

@media(max-width:380px){#p-shop .shop-top{grid-template-columns:1fr}}
@media(min-width:700px){#p-shop .grid-shop{grid-template-columns:repeat(3,1fr)}#p-shop .coin-pack-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1100px){#p-shop .grid-shop{grid-template-columns:repeat(4,1fr)}}