/* pages.css — stili delle pagine costruite con app SPA
   (Total Football, Premi, Gallerie, Archivi, NFT, pagine info/trasversali).
   Usa i token di hih.css. Regola d'oro: ogni contenuto sta in un box leggibile su ogni tema. */

/* ---- titolo di sezione leggibile su sfondo stagionale (chiaro/scuro) ---- */
.sec-h{font-family:var(--fontH);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--text);margin:26px 0 16px}
.hih[data-tone="dark"] .sec-h{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.hih[data-tone="light"] .sec-h{color:#14304a}
.sec-sub{font-size:14px;font-weight:600;color:var(--muted);margin:-10px 0 16px}
.hih[data-tone="dark"] .sec-sub{color:rgba(255,255,255,.85)}

/* ====================== TOTAL FOOTBALL ====================== */
.tf-hero{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:0;background:linear-gradient(135deg,color-mix(in srgb,var(--r4) 16%,var(--surface)),var(--surface));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:20px}
.tf-hero-copy{padding:30px 30px 28px;min-width:0}
.tf-kicker{display:inline-block;font-family:var(--fontH);font-weight:600;font-size:12.5px;letter-spacing:.03em;color:var(--r4);background:color-mix(in srgb,var(--r4) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--r4) 30%,transparent);border-radius:20px;padding:5px 13px;margin-bottom:14px}
.tf-hero-copy h1{font-family:var(--fontH);font-weight:700;font-size:38px;letter-spacing:-.02em;color:var(--text);margin:0 0 10px}
.tf-hero-copy p{margin:0 0 20px;font-size:15px;font-weight:600;color:var(--muted);line-height:1.55;max-width:56ch;text-wrap:pretty}
.tf-hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.tf-hero-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;background:var(--r4);color:#fff;padding:24px 18px}
.tf-hero-gn{font-family:var(--fontH);font-weight:600;font-size:13px;letter-spacing:.05em;text-transform:uppercase;opacity:.9}
.tf-hero-num{font-family:var(--fontH);font-weight:700;font-size:72px;line-height:.95;letter-spacing:-.03em}
.tf-hero-dl{font-size:12px;font-weight:700;line-height:1.4;margin-top:6px;display:inline-flex;flex-direction:column;align-items:center;gap:3px;opacity:.95}
.tf-hero-dl b{font-size:13px}

.tf-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-bottom:8px}
.tf-readonly{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:3px 8px}
.tf-match-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tf-match{display:grid;grid-template-columns:64px 1fr 64px 1fr 96px;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.tf-match.is-big{background:color-mix(in srgb,var(--r4) 8%,var(--surface));border-color:color-mix(in srgb,var(--r4) 26%,transparent)}
.tf-match-when{display:flex;flex-direction:column;font-size:12px;font-weight:800;color:var(--muted);line-height:1.25}
.tf-match-when small{font-size:11px;font-weight:700;color:var(--faint)}
.tf-team{font-family:var(--fontH);font-weight:600;font-size:15.5px;color:var(--text)}
.tf-home{text-align:right}
.tf-away{text-align:left}
.tf-vs{display:flex;flex-direction:column;align-items:center;gap:3px}
.tf-vs b{font-size:12px;font-weight:800;color:var(--faint)}
.tf-derby{font-size:8.5px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--r1);border-radius:5px;padding:1px 5px}
.tf-pred{display:flex;gap:5px;justify-content:flex-end}
.tf-pred i{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:var(--surface);border:1px solid var(--border);font-style:normal;font-family:var(--fontH);font-weight:700;font-size:12px;color:var(--faint)}
.tf-note{display:flex;align-items:flex-start;gap:9px;margin-top:14px;font-size:13px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;line-height:1.45}
.tf-note svg{flex:0 0 auto;color:var(--r4);margin-top:1px}

.tf-side{display:flex;flex-direction:column;gap:20px}
.tf-standings{list-style:none;margin:0;padding:4px 10px}
.tf-rank-row{display:grid;grid-template-columns:26px 1fr auto auto 44px;align-items:center;gap:9px;padding:8px 6px}
.tf-rank-row+.tf-rank-row{border-top:1px solid var(--line)}
.tf-rank-pos{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;font-family:var(--fontH);font-weight:700;font-size:12.5px;color:var(--muted);background:var(--surface-2)}
.tf-rank-row.is-podium .tf-rank-pos[data-pos="1"]{background:#FFC83D;color:#7a5600}
.tf-rank-row.is-podium .tf-rank-pos[data-pos="2"]{background:#cfd4da;color:#444}
.tf-rank-row.is-podium .tf-rank-pos[data-pos="3"]{background:#e0a87a;color:#5a3210}
.tf-rank-user{display:flex;align-items:center;gap:8px;min-width:0}
.tf-rank-user img{width:30px;height:30px;border-radius:8px;background:var(--surface-2);object-fit:cover;object-position:center -2px;flex:0 0 auto}
.tf-rank-user b{font-size:13.5px;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-rank-user:hover b{color:var(--r6)}
.tf-rank-exact{font-size:11px;font-weight:800;color:var(--r4)}
.tf-trend{font-size:10px;font-weight:800}
.tf-trend.is-up{color:var(--r4)}
.tf-trend.is-down{color:var(--r1)}
.tf-trend.is-same{color:var(--faint)}
.tf-rank-pts{font-family:var(--fontH);font-weight:700;font-size:15px;color:var(--text);text-align:right}
.tf-standings-all{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;font-family:var(--fontH);font-weight:600;font-size:13px;color:var(--r6);border-top:1px solid var(--line)}

.tf-rules{margin-bottom:42px}
.tf-rules-h{font-family:var(--fontH);font-weight:700;font-size:22px;color:var(--text);margin:26px 0 16px}
.hih[data-tone="dark"] .tf-rules-h{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.hih[data-tone="light"] .tf-rules-h{color:#14304a}
.tf-rules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tf-rule{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 20px 20px}
.tf-rule::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--radius) 0 0 var(--radius);background:var(--accent)}
.tf-rule-n{position:absolute;top:16px;right:18px;font-family:var(--fontH);font-weight:700;font-size:30px;color:color-mix(in srgb,var(--accent) 26%,transparent);line-height:1}
.tf-rule-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#fff;background:var(--accent);box-shadow:0 4px 0 color-mix(in srgb,var(--accent),#000 26%);margin-bottom:13px}
.tf-rule h4{font-family:var(--fontH);font-weight:600;font-size:16px;color:var(--text);margin:0 0 6px}
.tf-rule p{margin:0;font-size:13.5px;font-weight:600;color:var(--muted);line-height:1.5;text-wrap:pretty}

.hih[data-mobile="true"] .tf-hero{grid-template-columns:1fr}
.hih[data-mobile="true"] .tf-hero-card{flex-direction:row;justify-content:center;gap:14px;padding:16px}
.hih[data-mobile="true"] .tf-hero-num{font-size:48px}
.hih[data-mobile="true"] .tf-layout{grid-template-columns:1fr}
.hih[data-mobile="true"] .tf-rules-grid{grid-template-columns:1fr}
.hih[data-mobile="true"] .tf-match{grid-template-columns:54px 1fr 50px 1fr;gap:7px}
.hih[data-mobile="true"] .tf-pred{display:none}

/* ====================== PREMI (negozio + cassaforte) ====================== */
.pr-balance{display:flex;align-items:center;gap:10px;height:48px;padding:0 16px;background:linear-gradient(135deg,color-mix(in srgb,#FFC83D 22%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,#FFC83D 40%,var(--border));border-radius:14px;box-shadow:var(--shadow-sm)}
.pr-balance svg{color:#E0A200}
.pr-balance span{display:flex;flex-direction:column;line-height:1.15}
.pr-balance small{font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pr-balance b{font-family:var(--fontH);font-weight:700;font-size:16px;color:var(--text)}
.pr-vaultstat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:74px;height:48px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-sm)}
.pr-vaultstat b{font-family:var(--fontH);font-weight:700;font-size:18px;color:var(--text);line-height:1}
.pr-vaultstat small{font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-top:2px}

.pr-tabs{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--border);border-radius:13px;padding:4px;box-shadow:var(--shadow-sm);margin-bottom:18px;flex-wrap:wrap}
.pr-tabs button{font-family:var(--fontH);font-weight:600;font-size:13.5px;color:var(--muted);padding:8px 15px;border-radius:10px;transition:.14s}
.pr-tabs button:hover{color:var(--text)}
.pr-tabs button.is-on{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}

.pr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;margin-bottom:18px}
.pr-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px 16px 16px;transition:transform .14s,box-shadow .14s}
.pr-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pr-card.is-rare{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.pr-rare{position:absolute;top:11px;right:11px;font-size:9px;font-weight:800;letter-spacing:.05em;color:#fff;background:var(--accent);border-radius:6px;padding:2px 7px}
.pr-fig{display:grid;place-items:center;border-radius:16px}
.pr-fig-l{width:88px;height:88px}
.pr-fig-m{width:56px;height:56px;border-radius:13px;flex:0 0 auto}
.pr-fig-badge{background:var(--surface-2);border:1px solid var(--line)}
.pr-fig-furni,.pr-fig-credits,.pr-fig-role{color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent),#000 12%));box-shadow:0 5px 0 color-mix(in srgb,var(--accent),#000 26%)}
.pr-fig-credits{--accent:#FFC83D;color:#7a5600;background:linear-gradient(135deg,#FFD75E,#F2B100);box-shadow:0 5px 0 #c79100}
.pr-name{font-family:var(--fontH);font-weight:600;font-size:15px;color:var(--text);margin:0;line-height:1.2}
.pr-stock{font-size:11.5px;font-weight:700;color:var(--faint)}
.pr-cost{display:inline-flex;align-items:center;gap:6px;font-family:var(--fontH);font-weight:700;font-size:18px;color:var(--text)}
.pr-cost svg{color:#E0A200}
.pr-cost small{font-size:11px;font-weight:800;color:var(--muted)}
.pr-btn{width:100%;justify-content:center;margin-top:2px}
.pr-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.pr-info,.pr-note{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:700;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 15px;box-shadow:var(--shadow-sm);margin-bottom:40px;line-height:1.45}
.pr-info svg{flex:0 0 auto;color:var(--r6);margin-top:1px}
.pr-info a{color:var(--r6);font-weight:800}

.pr-guard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:46px 24px;margin-bottom:40px}
.pr-guard-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;color:#E0A200;background:color-mix(in srgb,#FFC83D 18%,var(--surface))}
.pr-guard b{font-family:var(--fontH);font-weight:600;font-size:18px;color:var(--text)}
.pr-guard p{margin:0;font-size:13.5px;font-weight:600;color:var(--muted);max-width:38ch;line-height:1.55}
.pr-guard-actions{display:flex;gap:10px;margin-top:6px}

.vault-list{display:flex;flex-direction:column;gap:10px;margin-bottom:40px}
.vault-row{display:grid;grid-template-columns:56px minmax(0,1fr) auto auto;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);padding:13px 16px}
.vault-main{min-width:0}
.vault-name{font-family:var(--fontH);font-weight:600;font-size:15.5px;color:var(--text);display:block}
.vault-from{font-size:12.5px;font-weight:700;color:var(--faint)}
.vault-from i{font-style:normal;color:var(--muted)}
.vault-status{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;border-radius:7px;padding:4px 10px;white-space:nowrap}
.vault-status.is-disponibile{color:var(--r4);background:color-mix(in srgb,var(--r4) 14%,transparent)}
.vault-status.is-riscattato{color:var(--muted);background:var(--surface-2)}
.vault-status.is-in-attesa{color:#B07A00;background:color-mix(in srgb,#FFC83D 18%,transparent)}
.vault-done{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;color:var(--r4);background:color-mix(in srgb,var(--r4) 12%,transparent)}

.hih[data-mobile="true"] .pr-grid{grid-template-columns:repeat(2,1fr)}
.hih[data-mobile="true"] .vault-row{grid-template-columns:48px minmax(0,1fr);gap:11px}
.hih[data-mobile="true"] .vault-status,.hih[data-mobile="true"] .vault-row .btn,.hih[data-mobile="true"] .vault-done{grid-column:2;justify-self:start}

/* ====================== GALLERIE (stanze + pixel-art) ====================== */
.gl-sort{display:flex;align-items:center;gap:9px;height:44px;padding:0 6px 0 14px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-sm)}
.gl-sort-lbl{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.gl-sort select{font-family:var(--fontB);font-weight:700;font-size:13.5px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:8px 10px;outline:none;cursor:pointer}
.gl-tabs{margin-bottom:18px}
.gl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;margin-bottom:42px}
.gl-grid-pixel{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.gl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:transform .14s,box-shadow .14s}
.gl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.gl-thumb{position:relative;width:100%;background:
  repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--surface)) 0 12px,color-mix(in srgb,var(--accent) 9%,var(--surface)) 12px 24px)}
.gl-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 80% 110%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%)}
.gl-thumb-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.gl-detail-img-real{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
.gl-thumb-tag{position:absolute;left:11px;bottom:10px;z-index:1;font-family:var(--fontB);font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:3px 9px}
.gl-thumb-zoom{position:absolute;top:11px;right:11px;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;background:rgba(20,18,30,.45);opacity:0;transition:.16s}
.gl-card:hover .gl-thumb-zoom{opacity:1}
.gl-meta{padding:13px 15px 14px}
.gl-title{font-family:var(--fontH);font-weight:600;font-size:16px;color:var(--text);display:block;margin-bottom:8px}
.gl-by{margin-bottom:9px}
.gl-by a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--muted)}
.gl-by img{width:24px;height:24px;border-radius:7px;background:var(--surface-2);object-fit:cover;object-position:center -1px}
.gl-by a:hover{color:var(--r6)}
.gl-stats{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:800;color:var(--muted)}
.gl-votes{display:inline-flex;align-items:center;gap:5px}
.gl-heart{color:var(--r1);font-size:14px}
.gl-views{display:inline-flex;align-items:center;gap:5px;color:var(--faint)}

/* dettaglio in modale */
.gl-detail{max-width:560px;padding:0;position:relative}
.gl-detail-x{position:absolute;top:12px;right:12px;z-index:2;background:rgba(20,18,30,.5);color:#fff}
.gl-detail-img{position:relative;width:100%;border-radius:18px 18px 0 0;background:
  repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,var(--surface)) 0 14px,color-mix(in srgb,var(--accent) 10%,var(--surface)) 14px 28px)}
.gl-detail-body{padding:20px}
.gl-detail-body h3{font-family:var(--fontH);font-weight:700;font-size:21px;color:var(--text);margin:0 0 8px}
.gl-detail-author{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:12px}
.gl-detail-author img{width:28px;height:28px;border-radius:8px;background:var(--surface-2);object-fit:cover;object-position:center -2px}
.gl-detail-author b{color:var(--text)}
.gl-detail-desc{margin:0 0 18px;font-size:14px;font-weight:600;color:var(--muted);line-height:1.55;text-wrap:pretty}
.gl-detail-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;border-top:1px solid var(--line)}
.gl-vote{display:inline-flex;align-items:center;gap:8px;font-family:var(--fontH);font-weight:600;font-size:14px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:10px 16px;transition:.14s}
.gl-vote:hover{border-color:var(--r1)}
.gl-vote.is-on{background:var(--r1);border-color:var(--r1);color:#fff}
.gl-vote.is-on .gl-heart{color:#fff}
.gl-detail-foot .gl-views{margin-right:auto}
.gl-report{display:inline-flex;align-items:center;gap:6px;font-family:var(--fontH);font-weight:600;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:11px;padding:9px 13px;cursor:pointer;transition:.14s}
.gl-report:hover{color:var(--r1);border-color:color-mix(in srgb,var(--r1) 40%,transparent);background:color-mix(in srgb,var(--r1) 8%,transparent)}

.hih[data-mobile="true"] .gl-grid{grid-template-columns:repeat(2,1fr);gap:11px}
.hih[data-mobile="true"] .gl-grid-pixel{grid-template-columns:repeat(2,1fr)}

/* ====================== ARCHIVI (distintivi + furni) ====================== */
.ar-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ar-count{font-size:12.5px;font-weight:800;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:6px 13px;box-shadow:var(--shadow-sm)}
.ar-grid{display:grid;gap:12px;margin-bottom:42px}
.ar-grid-badge{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.ar-grid-furni{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.ar-cell{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm);padding:18px 12px 14px;transition:transform .14s,box-shadow .14s}
.ar-cell:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ar-cell-fig{display:grid;place-items:center;width:54px;height:54px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line)}
.ar-cell-furnifig{display:grid;place-items:center;width:54px;height:54px;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent),#000 14%));box-shadow:0 4px 0 color-mix(in srgb,var(--accent),#000 26%)}
.ar-cell-name{font-family:var(--fontH);font-weight:600;font-size:13.5px;color:var(--text);line-height:1.2}
.ar-cell-rare{position:absolute;top:9px;right:9px;font-size:8.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--r1);border-radius:5px;padding:1px 6px}
.ar-cell-furni.is-rare{border-color:color-mix(in srgb,var(--accent) 40%,transparent)}

/* ---- Archivio Furniture: card "da catalogo" ---- */
.ar-grid-furni{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.ar-furni{position:relative;display:flex;flex-direction:column;gap:0;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.ar-furni:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ar-furni-stage{position:relative;height:108px;display:grid;place-items:center;background:
  radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,var(--accent) 22%,var(--surface)),var(--surface) 72%);
  border-bottom:1px solid var(--line);overflow:hidden}
.ar-furni-glow{position:absolute;top:14px;width:64px;height:64px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 68%);filter:blur(2px)}
.ar-furni-glyph{position:relative;z-index:2;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;color:#fff;background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 88%,#fff),color-mix(in srgb,var(--accent),#000 22%));box-shadow:0 10px 18px -6px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-4px)}
.ar-furni-img{position:relative;z-index:2;max-width:74px;max-height:74px;width:auto;height:auto;object-fit:contain;image-rendering:auto;transform:translateY(-4px);filter:drop-shadow(0 7px 8px rgba(28,20,55,.22))}
.ar-furni-pedestal{position:absolute;bottom:14px;width:62px;height:11px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 32%,transparent),transparent);z-index:1}
.ar-furni-info{display:flex;flex-direction:column;gap:7px;padding:11px 13px 13px}
.ar-furni-name{font-family:var(--fontH);font-weight:600;font-size:14px;color:var(--text);line-height:1.2}
.ar-furni-meta{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ar-furni-cat{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
.ar-furni-code{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;font-weight:700;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-furni-ribbon{position:absolute;top:10px;right:10px;z-index:3;font-size:9px;font-weight:800;letter-spacing:.05em;color:#5a3d00;background:linear-gradient(135deg,#FFE08A,#F5B100);border-radius:6px;padding:2px 7px;box-shadow:0 2px 6px rgba(245,177,0,.4)}
.ar-furni.is-rare{border-color:color-mix(in srgb,#F5B100 55%,transparent)}
.ar-furni.is-rare .ar-furni-stage{background:radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,#FFC400 30%,var(--surface)),var(--surface) 74%)}

/* box contenitore archivio (stacca la griglia dallo sfondo stagionale) */
.ar-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
@media(max-width:600px){.ar-panel{padding:12px}}

/* ---- Archivio Distintivi: card "da collezione" (badge a dimensione nativa) ---- */
.ar-grid-badge{grid-template-columns:repeat(auto-fill,minmax(152px,1fr))}
.ar-badge{position:relative;display:flex;flex-direction:column;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;padding:0;font:inherit;color:inherit}
.ar-badge:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ar-badge-stage{position:relative;height:92px;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,var(--accent) 20%,var(--surface)),var(--surface) 72%);border-bottom:1px solid var(--line);overflow:hidden}
.ar-badge-fig{position:relative;z-index:2;display:grid;place-items:center;transform:translateY(-3px);filter:drop-shadow(0 6px 7px rgba(28,20,55,.25))}
.ar-badge.is-rare{border-color:color-mix(in srgb,#F5B100 55%,transparent)}
.ar-badge.is-rare .ar-badge-stage{background:radial-gradient(120% 90% at 50% 18%,color-mix(in srgb,#FFC400 30%,var(--surface)),var(--surface) 74%)}
.ar-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:11px;padding:46px;color:var(--faint);text-align:center}
.ar-empty p{margin:0;font-weight:700;color:var(--muted)}

.ar-detail-b{display:flex;align-items:center;gap:18px}
.ar-detail-fig{display:grid;place-items:center;width:72px;height:72px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);flex:0 0 auto}
.ar-detail-furni{color:#fff;background:linear-gradient(135deg,var(--r6),var(--r7));border:none}
.ar-detail-meta{flex:1;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.ar-detail-meta div{display:flex;flex-direction:column;gap:2px}
.ar-detail-meta dt{font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.ar-detail-meta dd{margin:0;font-family:var(--fontH);font-weight:600;font-size:15px;color:var(--text)}
.ar-mono{font-family:ui-monospace,Menlo,Consolas,monospace !important;font-size:13px !important;font-weight:600}
.ar-detail-fig img{max-width:56px;max-height:56px;width:auto;height:auto;object-fit:contain}
/* furni: figura dettaglio più grande con immagine reale piena */
.ar-detail-furni{width:104px;height:104px;border-radius:18px;background:radial-gradient(120% 100% at 50% 22%,color-mix(in srgb,var(--r6) 16%,var(--surface)),var(--surface) 74%);border:1px solid var(--line);color:var(--muted)}
.ar-bigfurni{max-width:92px;max-height:92px;width:auto;height:auto;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 8px 10px rgba(28,20,55,.22))}
.ar-detail-foot{display:flex;justify-content:flex-end;padding:0 20px 18px}

/* dettaglio distintivo per hotel (modale Home) */
.badge-hotels{padding:4px 20px 20px}
.badge-hotels-h{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:6px 0 10px}
.badge-hotels-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:230px;overflow-y:auto}
.badge-hotel{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}
.badge-hotel-flag{font-size:19px;line-height:1.2;flex:0 0 auto}
.badge-hotel-txt{min-width:0;flex:1}
.badge-hotel-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge-hotel-top b{font-family:var(--fontH);font-weight:600;font-size:14px;color:var(--text)}
.badge-hotel-tag{font-size:10.5px;font-weight:800;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:1px 7px;border-radius:20px}
.badge-hotel-txt small{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.4}

.hih[data-mobile="true"] .ar-grid-badge{grid-template-columns:repeat(3,1fr)}
.hih[data-mobile="true"] .ar-grid-furni{grid-template-columns:repeat(2,1fr)}