/* profile.css — Profilo utente (identità Habbo + fansite). Usa i token di hih.css */

/* cover */
.pcover{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin:18px 0 20px}
.pcover-bg{height:124px;background:var(--spectrum);position:relative}
.pcover-bg::after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.1) 0deg 6deg,transparent 6deg 12deg)}
.pcover-in{display:flex;align-items:flex-end;gap:20px;padding:0 24px 18px;margin-top:-46px;position:relative;flex-wrap:wrap}
.pcover-avatar{position:relative;width:120px;height:132px;border-radius:20px;background:var(--surface);border:4px solid var(--surface);box-shadow:var(--shadow);display:grid;place-items:end center;overflow:hidden;flex:0 0 auto}
.pcover-avatar img{width:118px;height:auto;transform:translateY(8px)}
.pcover-on{position:absolute;right:10px;top:10px;width:15px;height:15px;border-radius:50%;background:var(--r4);border:3px solid var(--surface)}
.pcover-id{flex:1;min-width:0;padding-bottom:4px}
.pcover-name{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pcover-name h1{font-family:var(--fontH);font-weight:700;font-size:28px;letter-spacing:-.02em;margin:0;color:var(--text)}
.pcover-plaques{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* targhette di grado (pill con icona + gradiente, stile plaque fansite) */
.targhetta{display:inline-flex;align-items:center;gap:6px;font-family:var(--fontH);font-weight:600;font-size:12.5px;color:#fff;
  padding:4px 12px 4px 5px;border-radius:20px;background:linear-gradient(180deg,var(--c1),var(--c2));
  box-shadow:0 2px 0 color-mix(in srgb,var(--c2),#000 22%),0 3px 7px color-mix(in srgb,var(--c2) 40%,transparent);
  text-shadow:0 1px 1px rgba(0,0,0,.18);white-space:nowrap}
.targhetta-ic{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:rgba(255,255,255,.28);font-size:11px;line-height:1}
.pcover-motto{margin:7px 0 8px;font-size:14.5px;font-weight:600;color:var(--muted)}
.pcover-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--faint)}
.pcover-meta span{display:inline-flex;align-items:center;gap:5px}
.pcover-dot{color:var(--border)}
.pcover-actions{display:flex;gap:10px;padding-bottom:4px;flex-wrap:wrap}
.pcover-report{padding:0;width:42px;justify-content:center;flex:0 0 auto;font-size:15px}
.pcover-report:hover{color:var(--r1);border-color:color-mix(in srgb,var(--r1) 40%,transparent)}
.gcover-report{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--faint);font-size:14px;cursor:pointer;transition:.14s;margin-left:2px}
.gcover-report:hover{color:var(--r1);border-color:color-mix(in srgb,var(--r1) 40%,transparent)}
.pcover-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:0 0 20px}
.stat-pill{display:flex;flex-direction:column;gap:2px;padding:13px 15px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);border-bottom:3px solid var(--accent)}
.stat-pill b{font-family:var(--fontH);font-weight:600;font-size:21px;color:var(--text);line-height:1}
.stat-pill small{font-size:11px;color:var(--faint);font-weight:700}

/* griglia */
.profile-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start;padding-bottom:40px}
.profile-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.profile-side{display:flex;flex-direction:column;gap:20px}
.card-count{font-family:var(--fontB);font-weight:800;font-size:12px;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:2px 10px}
.card-action{margin-left:auto;font-family:var(--fontB);font-weight:800;font-size:13px;color:var(--r6);text-decoration:none}
.card-action:hover{text-decoration:underline}

/* "I miei Avatar" — vetrina multi-hotel */
.phabbo-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;padding:16px}
.phabbo-main{display:flex;flex-direction:column;gap:12px}
.phabbo-stage{position:relative;display:grid;place-items:end center;height:200px;border-radius:14px;background:
  radial-gradient(120% 80% at 50% 18%, color-mix(in srgb,var(--r6) 26%,var(--surface)), var(--surface) 70%),
  repeating-linear-gradient(135deg,color-mix(in srgb,var(--text) 5%,var(--surface)) 0 12px,transparent 12px 24px);
  border:1px solid var(--line);padding-top:20px;overflow:hidden}
.phabbo-av{width:140px;height:auto;position:relative;z-index:1;filter:drop-shadow(0 8px 10px rgba(0,0,0,.18))}
.phabbo-shadow{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:92px;height:17px;border-radius:50%;background:rgba(0,0,0,.16);filter:blur(5px)}
.phabbo-badge{position:absolute;font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:4px 10px;border-radius:20px}
.phabbo-badge-main{top:12px;left:12px;color:#7a5a00;background:linear-gradient(180deg,#FFE08A,#F4C04A);box-shadow:0 2px 0 #D89A2E}
.phabbo-meta{display:flex;flex-direction:column;gap:4px;text-align:center}
.phabbo-name{font-family:var(--fontH);font-weight:700;font-size:18px;color:var(--text)}
.phabbo-hotel{font-size:12.5px;font-weight:700;color:var(--muted)}
.phabbo-row{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted)}
.phabbo-state{width:9px;height:9px;border-radius:50%;background:var(--faint)}
.phabbo-state.on{background:var(--r4);box-shadow:0 0 0 3px color-mix(in srgb,var(--r4) 28%,transparent)}
.phabbo-verified{display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:800;color:var(--r4)}
.phabbo-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.phabbo-mini{padding:7px 12px;font-size:12.5px}

.phabbo-others{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;align-content:start;max-height:336px;overflow-y:auto;padding-right:4px}
.phabbo-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 10px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);transition:.14s;cursor:pointer}
.phabbo-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.phabbo-tile.is-hidden{opacity:.6}
.phabbo-tile.is-sel{border-color:var(--r6);box-shadow:0 0 0 2px color-mix(in srgb,var(--r6) 40%,transparent)}
.phabbo-tile-flag{position:absolute;top:7px;left:8px;font-size:13px;line-height:1}
.phabbo-tile-star{position:absolute;top:6px;right:8px;font-size:12px;color:#F4C04A;text-shadow:0 1px 1px rgba(0,0,0,.2)}
.phabbo-tile-av{position:relative;width:46px;height:46px;border-radius:12px;background:var(--surface);display:grid;place-items:center;overflow:hidden}
.phabbo-tile-av img{width:46px;height:46px;object-fit:cover;object-position:center -2px}
.phabbo-tile-hide{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,18,30,.55);color:#fff}
.phabbo-tile-on{position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;background:var(--r4);border:2px solid var(--surface-2)}
.phabbo-tile-name{font-family:var(--fontH);font-weight:600;font-size:12.5px;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phabbo-tile-hotel{font-size:10.5px;font-weight:700;color:var(--faint)}
.phabbo-tile-add{border:1.5px dashed var(--border);background:none;justify-content:center}
.phabbo-tile-add:hover{border-color:var(--r6);background:color-mix(in srgb,var(--r6) 7%,transparent);transform:translateY(-2px);box-shadow:none}
.phabbo-tile-add .phabbo-add-ic{font-family:var(--fontH);font-weight:600;font-size:22px;color:var(--r6);line-height:1;margin-top:2px}
.phabbo-tile-add b{font-family:var(--fontH);font-weight:600;font-size:12.5px;color:var(--text)}
.phabbo-tile-add small{font-size:10px;font-weight:700;color:var(--faint)}

/* gallerie (stanze / pixel-art) */
.pgallery{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pgallery-3{grid-template-columns:1fr 1fr 1fr}
.pg-item{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:inherit;transition:transform .14s}
.pg-item:hover{transform:translateY(-2px)}
.pg-art{height:104px;border-radius:12px;border:1px solid var(--line);background:
  repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,var(--surface)) 0 10px,color-mix(in srgb,var(--accent) 9%,var(--surface)) 10px 20px)}
.pg-art-wide{height:84px}
.pg-item small{font-size:12px;font-weight:700;color:var(--muted)}

/* distintivi */
.pbadges{display:grid;grid-template-columns:repeat(8,1fr);gap:9px}
.pbadge{aspect-ratio:1;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;transition:transform .14s}
.pbadge:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.pbadge img{width:32px;height:32px;image-rendering:pixelated}
.pbadges-all{width:100%;margin-top:12px}

/* info / bio */
.pbio{margin:0 0 14px;font-size:13.5px;font-weight:600;line-height:1.6;color:var(--text)}
.pinfo{margin:0;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:13px}
.pinfo div{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pinfo dt{font-size:12.5px;font-weight:700;color:var(--faint)}
.pinfo dd{margin:0;font-family:var(--fontH);font-weight:600;font-size:14px;color:var(--text)}

/* attività */
.pact{list-style:none;margin:0;padding:6px 10px 12px}
.pact-row+.pact-row{border-top:1px solid var(--line)}
.pact-row a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 8px;border-radius:12px;text-decoration:none;color:inherit;transition:background .14s}
.pact-row a:hover{background:var(--surface-2)}
.pact-row a>svg{color:var(--faint)}
.pact-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent)}
.pact-ic img{width:24px;height:24px;image-rendering:pixelated}
.pact-body{min-width:0}
.pact-body b{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
.pact-body small{font-size:11.5px;color:var(--faint);font-weight:700}

/* amici */
.pfriends{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.pfriend{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:inherit}
.pfriend img{width:46px;height:46px;border-radius:12px;background:var(--surface-2);object-fit:cover;object-position:center -2px;transition:transform .14s}
.pfriend:hover img{transform:translateY(-2px)}
.pfriend small{font-size:10.5px;font-weight:700;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* modale */
.modal-overlay{position:fixed;inset:0;z-index:300;background:rgba(20,18,30,.5);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.modal-panel{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.modal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface)}
.modal-h h3{font-family:var(--fontH);font-weight:600;font-size:17px;margin:0;color:var(--text)}
.modal-x{width:32px;height:32px;border-radius:9px;border:none;background:var(--surface-2);color:var(--muted);cursor:pointer;font-size:14px;font-weight:800}
.modal-x:hover{color:var(--text)}
.modal-b{padding:18px}
.modal-intro{margin:0 0 14px;font-size:13px;font-weight:600;color:var(--muted);line-height:1.5}

/* ====== profilo ridotto (Habbo non registrato) ====== */
.pcover-bg--guest{background:linear-gradient(120deg,#8E9BB3,#AAB6C8 60%,#C7B6D6)}
.guest-flag{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);padding:4px 11px;border-radius:20px}
.pcover-meta .phabbo-state{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--faint);margin-right:2px}
.pcover-meta .phabbo-state.on{background:var(--r4)}

.claim{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:20px;border-left:4px solid var(--r4)}
.claim-ic{flex:0 0 auto}
.claim-hex{display:block;width:42px;height:42px;background:var(--spectrum);clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.claim-txt{flex:1;min-width:200px}
.claim-txt b{display:block;font-family:var(--fontH);font-weight:600;font-size:17px;color:var(--text);margin-bottom:3px}
.claim-txt p{margin:0;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.5}
.claim-actions .btn{white-space:nowrap}
.claim-actions{flex:0 0 auto}

.guest-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.guest-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start;padding-bottom:40px}
.src-tag{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);padding:3px 9px;border-radius:7px}

.guest-groups{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.guest-group{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-family:var(--fontB);font-weight:700;font-size:13.5px;color:var(--text)}
.gg-emblem{width:30px;height:30px;border-radius:8px;flex:0 0 auto;clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}

.claim-side .card-b{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 18px}
.claim-side-ic{font-size:30px}
.claim-side b{font-family:var(--fontH);font-weight:600;font-size:16px;color:var(--text)}
.claim-side p{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}

/* mobile */
.hih[data-mobile="true"] .profile-grid{grid-template-columns:1fr}
.hih[data-mobile="true"] .guest-grid{grid-template-columns:1fr}
.hih[data-mobile="true"] .guest-stats{grid-template-columns:repeat(2,1fr)}
.hih[data-mobile="true"] .pcover-in{flex-direction:column;align-items:flex-start;gap:12px}
.hih[data-mobile="true"] .pcover-actions{width:100%}
.hih[data-mobile="true"] .phabbo-body{grid-template-columns:1fr}
.hih[data-mobile="true"] .pbadges{grid-template-columns:repeat(6,1fr)}