/* WordlyPlay — the badge a player wears (website and app, same file). Colour = how hard it was to earn. */
.bdg{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 10px 3px 7px;border-radius:999px;font:800 12.5px/1.25 var(--font-body,'Nunito',system-ui,sans-serif);border:1px solid;white-space:nowrap;position:relative;overflow:hidden;vertical-align:middle;text-overflow:ellipsis}
.bdg__i{font-size:14px;line-height:1;flex:none}
.bdg--common{background:rgba(148,163,184,.13);border-color:rgba(148,163,184,.38);color:#CBD5E1}
.bdg--rare{background:rgba(59,130,246,.15);border-color:#3B82F6;color:#BFDBFE}
.bdg--epic{background:rgba(168,85,247,.17);border-color:#A855F7;color:#E9D5FF}
.bdg--legend{background:linear-gradient(135deg,#78350F,#B45309 45%,#78350F);border-color:#FBBF24;color:#FEF3C7;box-shadow:0 0 10px rgba(251,191,36,.35)}
.bdg--legend::after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 48%,transparent 62%);transform:translateX(-120%);animation:bdg-shine 3.2s ease-in-out infinite;pointer-events:none}
@keyframes bdg-shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
[data-theme=light] .bdg--common{color:#334155;background:rgba(100,116,139,.12);border-color:rgba(100,116,139,.45)}
[data-theme=light] .bdg--rare{color:#1D4ED8;background:rgba(59,130,246,.1)}
[data-theme=light] .bdg--epic{color:#7E22CE;background:rgba(168,85,247,.1)}
/* where it sits: under the title on the profile card and the duel card */
.pc__badge,.lookcard__badge{margin-top:6px;display:flex;justify-content:center}
#player-opp-badge{display:inline-block;vertical-align:middle}
/* icon only, for tight rows; tap shows the name */
.bdgc{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;margin:0 0 0 5px;border-radius:50%;font-size:12px;line-height:1;border:1.5px solid;vertical-align:middle;flex:none;cursor:pointer;background:none;position:relative;font-family:inherit}
.bdgc--common{border-color:rgba(148,163,184,.55);background:rgba(148,163,184,.12)}.bdgc--rare{border-color:#3B82F6;background:rgba(59,130,246,.15)}
.bdgc--epic{border-color:#A855F7;background:rgba(168,85,247,.17)}.bdgc--legend{border-color:#FBBF24;background:#78350F;box-shadow:0 0 8px rgba(251,191,36,.5)}
.bdg-tip{position:fixed;z-index:10050;transform:translate(-50%,calc(-100% - 8px));pointer-events:none;animation:bdg-in .15s ease-out}
@keyframes bdg-in{from{opacity:0;transform:translate(-50%,calc(-100% - 2px))}}
/* Wear / Take off on an achievements grid */
[data-earned="1"]:has(.bdg-act){flex-wrap:wrap}
.bdg-act{flex:1 0 100%;width:100%;display:flex;align-items:center;gap:8px;margin-top:8px}
.bdg-wearing{display:none}
.is-worn .bdg-wearing{display:inline-block}
.bdg-wear{display:block;flex:1;min-width:0;border:0;border-radius:10px;padding:6px 0;font:800 13px/1.2 var(--font-body,'Nunito',sans-serif);color:#fff;background:linear-gradient(180deg,#3B82F6,#2563EB);box-shadow:0 3px 0 #1D4ED8;cursor:pointer}
.bdg-wear:disabled{opacity:.6;cursor:default}
.is-worn .bdg-wear{background:transparent;box-shadow:none;border:1px solid rgba(148,163,184,.45);color:inherit;opacity:.85}
.is-worn{outline:2px solid #22C55E;outline-offset:-2px;box-shadow:0 0 14px rgba(34,197,94,.25)}
.is-worn .bdg-wearing{background:#22C55E;color:#052E16;font:900 10px/1.4 var(--font-body,'Nunito',sans-serif);letter-spacing:.05em;padding:1px 8px;border-radius:999px;text-transform:uppercase}
/* "New badge" popup after a game */
.bdg-new{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10040;width:min(92vw,380px);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#111827;color:#F1F5F9;border:1px solid #F59E0B;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:bdg-up .25s ease-out}
@keyframes bdg-up{from{opacity:0;transform:translate(-50%,16px)}}
.bdg-new__i{font-size:30px;line-height:1;flex:none}.bdg-new__t{flex:1;min-width:0}
.bdg-new__t b{display:block;font:400 15px/1.2 var(--font-heading,'Fredoka One',sans-serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bdg-new__t small{color:#94A3B8;font-size:12px}
.bdg-new__go{border:0;border-radius:10px;padding:8px 12px;font:400 13px/1 var(--font-heading,'Fredoka One',sans-serif);color:#fff;background:linear-gradient(180deg,#22C55E,#16A34A);box-shadow:0 3px 0 #15803D;cursor:pointer;flex:none}
.bdg-new__x{border:0;background:none;color:#94A3B8;font-size:20px;line-height:1;padding:4px;cursor:pointer;flex:none}
.bdg-msg{position:fixed;left:50%;top:calc(72px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:10060;padding:9px 16px;border-radius:12px;background:#065F46;color:#ECFDF5;font:800 14px/1.3 var(--font-body,'Nunito',sans-serif);box-shadow:0 8px 24px rgba(0,0,0,.35);animation:bdg-in2 .2s ease-out}
.bdg-msg.is-bad{background:#7F1D1D;color:#FEE2E2}
@keyframes bdg-in2{from{opacity:0;transform:translate(-50%,-8px)}}
@media (prefers-reduced-motion:reduce){.bdg--legend::after{animation:none;display:none}.bdg-new,.bdg-tip{animation:none}}