/* shop.css — avatar frames + shop grid */

/* ---------- AVATAR (frame + costume) ---------- */
.avatar{ --sz:54px; width:var(--sz); height:var(--sz); border-radius:50%; padding:3px; box-sizing:border-box; position:relative; flex:0 0 auto; }
.avatar .av-disc{ width:100%; height:100%; border-radius:50%; background:var(--surface2); overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; }
.avatar .av-disc .otto{ width:138%; transform:translateY(7%); }

.frame-none{ background:var(--line); }
.frame-gold{ background:linear-gradient(135deg,#ffe79a,#ffcb45,#f5a800); box-shadow:0 0 14px rgba(255,203,69,.5); }
.frame-neon{ background:var(--cyan); box-shadow:0 0 16px rgba(51,225,255,.55); }
.frame-fire{ background:conic-gradient(#ffd23d,#ff7a2f,#ff2e88,#ff7a2f,#ffd23d); box-shadow:0 0 16px rgba(255,122,47,.5); }
.frame-pixel{ background:repeating-conic-gradient(#c6ff3c 0 15deg,#0c0a14 15deg 30deg); }
.frame-rainbow{ background:conic-gradient(#ff2e88,#ffd23d,#c6ff3c,#33e1ff,#9b6cff,#ff2e88); box-shadow:0 0 16px rgba(155,108,255,.4); animation:spinFrame 6s linear infinite; }
.frame-royal{ background:linear-gradient(135deg,#c8a8ff,#9b6cff,#6a3fd0); box-shadow:0 0 14px rgba(155,108,255,.5); }
.frame-hearts{ background:repeating-conic-gradient(#ff2e88 0 18deg,#ff8ac4 18deg 36deg); }
@keyframes spinFrame{ to{ transform:rotate(360deg); } }

/* ---------- SHOP ---------- */
.shop-bal{ display:flex; align-items:center; justify-content:center; gap:7px; background:var(--surface2);
  border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-weight:700; color:var(--yellow);
  width:fit-content; margin:0 auto 14px; font-size:15px; }
.shop-tabs{ display:flex; gap:6px; background:var(--surface2); border:1px solid var(--line); border-radius:12px; padding:4px; margin-bottom:16px; }
.shop-tabs button{ flex:1; border:none; background:transparent; color:var(--muted); font-family:Anton; font-size:14px; letter-spacing:.3px; padding:9px; border-radius:8px; cursor:pointer; }
.shop-tabs button.on{ background:var(--magenta); color:#fff; }

.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.shop-item{ display:flex; flex-direction:column; align-items:center; gap:7px; background:var(--surface);
  border:2px solid var(--line); border-radius:16px; padding:13px 8px 11px; position:relative; transition:border-color .15s; }
.shop-item.equipped{ border-color:var(--lime); box-shadow:0 0 18px rgba(198,255,60,.16); }
.shop-item .si-name{ font-weight:700; font-size:12px; color:var(--text); text-align:center; line-height:1.1; }
.shop-item .si-btn{ width:100%; border:none; border-radius:9px; padding:7px 4px; font-family:Anton; font-size:12px; letter-spacing:.3px; cursor:pointer; }
.si-btn.buy{ background:var(--surface2); border:1px solid var(--line); color:var(--yellow); }
.si-btn.buy:disabled{ opacity:.45; cursor:not-allowed; }
.si-btn.equip{ background:transparent; border:1.5px solid var(--cyan); color:var(--cyan); }
.si-btn.on{ background:var(--lime); color:#0c0a14; }
.shop-item .si-lock{ position:absolute; top:8px; right:9px; font-size:12px; opacity:.7; }
.shop-item .si-tick{ position:absolute; top:7px; right:9px; font-size:13px; color:var(--lime); }
.shop-note{ text-align:center; font-size:11.5px; color:var(--muted); margin-top:14px; line-height:1.4; }
.shop-buycoins{ width:100%; margin-top:12px; background:linear-gradient(135deg,#ffd23d,#ff7a2f); color:#0c0a14;
  border:none; border-radius:13px; padding:13px; font-family:Anton; font-size:15px; letter-spacing:.3px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.3); }

/* ---- nuove cornici (Asset Kit) ---- */
.frame-speed{ background:repeating-conic-gradient(#fff 0 7deg,#0c0a14 7deg 14deg); }
.frame-sakura{ background:repeating-conic-gradient(#ff8ac4 0 14deg,#fff0f6 14deg 28deg); box-shadow:0 0 12px rgba(255,138,196,.5); }
.frame-electric{ background:conic-gradient(#33e1ff,#9b6cff,#33e1ff,#c6ff3c,#33e1ff); box-shadow:0 0 18px rgba(51,225,255,.6); animation:spinFrame 3s linear infinite; }
.frame-holo{ background:conic-gradient(from 0deg,#a0f0ff,#ffd1f5,#d6c8ff,#c6ffe0,#a0f0ff); box-shadow:0 0 16px rgba(200,180,255,.5); animation:spinFrame 5s linear infinite; }
.frame-star{ background:linear-gradient(135deg,#ffe79a,#ffcb45); box-shadow:0 0 14px rgba(255,203,69,.5); }
.frame-star::after{ content:"★"; position:absolute; top:-7px; right:-4px; font-size:calc(var(--sz)*.32); color:#ffd23d; text-shadow:0 1px 2px rgba(0,0,0,.5); }
.frame-toxic{ background:repeating-conic-gradient(#9dff1c 0 16deg,#0c1f0a 16deg 32deg); box-shadow:0 0 16px rgba(157,255,28,.5); }
.frame-bubble{ background:repeating-conic-gradient(#ff4fd8 0 20deg,#33e1ff 20deg 40deg); box-shadow:0 0 14px rgba(255,79,216,.45); }
.frame-thunder{ background:conic-gradient(#ffd23d,#0c0a14,#ffd23d,#0c0a14,#ffd23d); box-shadow:0 0 18px rgba(255,210,61,.6); }
.frame-ghost{ background:conic-gradient(#9b6cff,#1a1030,#9b6cff,#1a1030); box-shadow:0 0 18px rgba(155,108,255,.55); animation:spinFrame 4s linear infinite; }
.frame-blossom{ background:linear-gradient(135deg,#ff8ac4,#ff4f9d); box-shadow:0 0 12px rgba(255,79,157,.5); }
.frame-blossom::after{ content:"\2740"; position:absolute; top:-8px; right:-5px; font-size:calc(var(--sz)*.34); color:#ff8ac4; text-shadow:0 1px 2px rgba(0,0,0,.5); }

/* ---- stili del nome (Asset Kit) ---- */
.ns-default{ }
.ns-neon{ color:#aef6ff; text-shadow:0 0 6px #33e1ff,0 0 12px #33e1ff; }
.ns-chrome{ background:linear-gradient(180deg,#fff,#9fb0c8 55%,#5e6b82); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-manga{ color:#fff; -webkit-text-stroke:1.2px #0c0a14; text-shadow:1.5px 1.5px 0 #0c0a14; font-weight:700; }
.ns-fire{ background:linear-gradient(180deg,#ffe14d,#ff7a2f 60%,#ff2e88); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 10px rgba(255,122,47,.5); }
.ns-glitch{ color:#fff; text-shadow:1.5px 0 #ff2e88,-1.5px 0 #33e1ff; }
.ns-gold{ background:linear-gradient(180deg,#fff3c4,#ffcb45 55%,#d99000); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-holo{ background:linear-gradient(90deg,#ff2e88,#ffd23d,#c6ff3c,#33e1ff,#9b6cff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-toxic{ color:#d6ff7a; text-shadow:0 0 7px #9dff1c,0 0 14px #9dff1c; }
.ns-sakura{ background:linear-gradient(180deg,#ffd1ec,#ff8ac4 55%,#ff4f9d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ns-shadow{ color:#fff; text-shadow:3px 3px 0 #ff2e88; font-weight:700; }
.ns-ice{ background:linear-gradient(180deg,#eafcff,#a7e9ff 55%,#33e1ff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 8px rgba(51,225,255,.4); }
.ns-royal{ background:linear-gradient(180deg,#e0ccff,#9b6cff 60%,#6a3fd0); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---- profilo ---- */
.prof-head{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:6px; }
.prof-name{ font-family:Anton; font-size:26px; letter-spacing:.5px; }
.prof-badge{ font-size:11px; color:var(--muted); }
.prof-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:12px 0; }
.prof-stat{ background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:11px 13px; }
.prof-stat .ps-v{ font-family:Anton; font-size:21px; }
.prof-stat .ps-k{ font-size:11px; color:var(--muted); margin-top:1px; }
.ach-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.ach{ display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:9px 11px; }
.ach.locked{ opacity:.45; filter:grayscale(.5); }
.ach .a-ico{ font-size:21px; flex:0 0 auto; }
.ach .a-n{ font-weight:700; font-size:12px; }
.ach .a-d{ font-size:10px; color:var(--muted); line-height:1.2; }
.ach.unlocked{ border-color:var(--lime); box-shadow:0 0 12px rgba(198,255,60,.12); }
.prof-cta{ width:100%; margin-top:4px; background:linear-gradient(135deg,var(--lime),var(--cyan)); color:#0c0a14; border:none; border-radius:13px; padding:12px; font-family:Anton; font-size:14px; letter-spacing:.3px; cursor:pointer; }