/* Compendio BG3 — tema minimal dark */
:root{
  --bg:#0c0c0e;
  --bg2:#121214;
  --card:#151518;
  --card2:#1a1a1e;
  --border:#26262b;
  --border-soft:#1e1e22;
  --gold:#c9a86a;
  --gold-bright:#e0c285;
  --text:#e4e2dd;
  --muted:#8e8c94;
  --accent:#c9a86a;
  --conc:#a395e0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  font-size:15px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{font-weight:500}

::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#2a2a30;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#3a3a42}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== header ===== */
header{
  text-align:center;
  padding:34px 16px 26px;
  border-bottom:1px solid var(--border-soft);
}
header h1{
  font-size:2.3rem;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--gold-bright);
  font-weight:300;
}

/* ===== nav ===== */
nav{
  display:flex;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:12px;position:sticky;top:0;z-index:10;
  background:rgba(12,12,14,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
nav button{
  background:transparent;color:var(--muted);
  border:1px solid transparent;border-radius:7px;
  padding:8px 16px;font-size:.9rem;
  transition:color .15s, background .15s, border-color .15s;
}
nav button:hover{color:var(--text);background:var(--card)}
nav button.active{
  background:var(--card2);
  color:var(--gold-bright);
  border-color:var(--border);
}
nav .lang-btn{
  margin-left:10px;
  color:var(--gold);
  border:1px solid var(--border);
}
nav .lang-btn:hover{border-color:var(--gold);background:var(--card)}

main{max-width:1020px;margin:0 auto;padding:24px 16px 80px}

/* ===== filtri ===== */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;align-items:center;animation:fadeIn .3s both}
.filters input[type=search]{
  flex:1;min-width:200px;
  background:var(--bg2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:9px 13px;font-size:.92rem;font-family:inherit;
  transition:border-color .15s;
}
.filters input[type=search]:focus{outline:none;border-color:var(--gold)}
.filters select, select{
  background:var(--bg2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:9px 11px;font-size:.88rem;font-family:inherit;
  transition:border-color .15s;
}
.filters select:hover, select:hover{border-color:#3a3a42}
.count{color:var(--muted);font-size:.82rem;margin-left:auto}

/* ===== griglia classi ===== */
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:12px}
.class-card{
  background:var(--card);
  border:1px solid var(--border);border-radius:10px;
  padding:22px 16px 18px;text-align:center;
  cursor:pointer;
  transition:border-color .15s, background .15s;
  animation:fadeUp .35s both;
  animation-delay:calc(var(--i,0) * 30ms);
}
.class-card:hover{border-color:var(--accent);background:var(--card2)}
.icon-ring{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);
  border:1px solid var(--border);
  transition:border-color .15s;
}
.class-card:hover .icon-ring{border-color:var(--accent)}
.icon-ring .icon{font-size:1.9rem}
.class-card h3{color:var(--text);font-size:1.1rem;letter-spacing:.3px}
.class-card .meta{color:var(--muted);font-size:.78rem;margin:5px 0 8px}
.class-card .tagline{font-size:.84rem;color:var(--muted);line-height:1.5}

/* ===== dettaglio classe ===== */
.detail{animation:fadeIn .3s both}
.back-btn{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:7px;padding:7px 14px;margin-bottom:18px;font-size:.85rem;
  transition:color .15s, border-color .15s;
}
.back-btn:hover{color:var(--text);border-color:#3a3a42}
.class-header{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.class-header .icon-ring{margin:0;width:56px;height:56px}
.class-header .icon-ring .icon{font-size:1.6rem}
.class-header h2{color:var(--text);font-size:1.5rem;letter-spacing:.5px;border-bottom:2px solid var(--accent);padding-bottom:5px}
.class-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.badge{
  background:var(--bg2);border:1px solid var(--border);border-radius:6px;
  padding:4px 12px;font-size:.8rem;color:var(--muted);
}
.badge b{color:var(--gold);font-weight:500}
.class-desc{line-height:1.65;margin-bottom:24px;max-width:800px;color:#c9c7c1}

h3.section{
  color:var(--gold);font-weight:500;letter-spacing:1.5px;text-transform:uppercase;
  font-size:.85rem;padding-bottom:8px;margin:32px 0 14px;
  border-bottom:1px solid var(--border-soft);
}
h3.section .pts{color:var(--muted);text-transform:none;letter-spacing:0;font-weight:400}
h3.section .pts.over{color:#d97862}

/* tabella progressione */
.prog-table{width:100%;border-collapse:collapse;font-size:.88rem}
.prog-table th{
  text-align:left;color:var(--muted);font-weight:500;letter-spacing:.5px;
  padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap;font-size:.8rem;
  text-transform:uppercase;
}
.prog-table tbody tr{animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 20ms)}
.prog-table td{padding:9px 12px;border-bottom:1px solid var(--border-soft);vertical-align:top;line-height:1.55}
.prog-table tr:hover td{background:var(--bg2)}
.prog-table .lvl{color:var(--gold-bright);width:44px;text-align:center}
.prog-table .slots{color:var(--muted);white-space:nowrap;font-size:.82rem}
.feat-item{display:block;margin:2px 0}
.feat-item b{color:var(--gold);font-weight:500}

/* sottoclassi */
.sub-card{
  background:var(--card);
  border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:8px;
  margin-bottom:8px;overflow:hidden;
  animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 35ms);
}
.sub-card summary{
  cursor:pointer;padding:13px 16px;list-style:none;
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  transition:background .15s;
}
.sub-card summary::-webkit-details-marker{display:none}
.sub-card summary::after{
  content:"▾";margin-left:auto;color:var(--muted);
  transition:transform .2s;align-self:center;font-size:.8rem;
}
.sub-card[open] summary::after{transform:rotate(180deg)}
.sub-card summary:hover{background:var(--card2)}
.sub-card summary .name{color:var(--text);font-size:.98rem;font-weight:500}
.sub-card summary .sdesc{color:var(--muted);font-size:.83rem}
.sub-card[open] summary{border-bottom:1px solid var(--border-soft)}
.sub-body{padding:4px 16px 12px;animation:fadeIn .25s both}
.sub-feat{padding:9px 0;border-bottom:1px solid var(--border-soft);line-height:1.55;font-size:.88rem}
.sub-feat:last-child{border-bottom:none}
.sub-feat .flvl{
  display:inline-block;background:var(--bg2);border:1px solid var(--border);
  border-radius:4px;color:var(--muted);font-size:.72rem;padding:1px 7px;margin-right:8px;
}
.sub-feat b{color:var(--gold);font-weight:500}

/* ===== liste ===== */
.spell-list{display:flex;flex-direction:column;gap:7px}
.lvl-divider{
  color:var(--muted);letter-spacing:2px;text-transform:uppercase;font-size:.75rem;
  margin:18px 0 4px;padding-bottom:6px;
  border-bottom:1px solid var(--border-soft);
  animation:fadeIn .3s both;
}
.spell-card{
  background:var(--card);
  border:1px solid var(--border);border-radius:8px;
  padding:12px 15px;
  animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 18ms);
  transition:border-color .15s;
}
.spell-card:hover{border-color:#3a3a42}
.spell-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.spell-top .sname{color:var(--text);font-size:.98rem;font-weight:500}
.spell-top .ename{color:var(--muted);font-size:.8rem;font-style:italic}
.tags{display:flex;gap:5px;flex-wrap:wrap;margin-left:auto}
.tag{
  font-size:.7rem;border-radius:4px;padding:2px 8px;letter-spacing:.3px;
  background:var(--bg2);border:1px solid var(--border);color:var(--muted);
}
.tag.school{color:var(--gold)}
.tag.conc{color:var(--conc);border-color:#3a3458}
.tag.action{color:#86c498;border-color:#2a4232}
.spell-desc{margin-top:7px;line-height:1.55;font-size:.88rem;color:#c9c7c1}
.spell-classes{margin-top:6px;font-size:.78rem;color:var(--muted)}
.spell-classes span{color:#b5b3ad}

/* oggetti: rarità e posizione */
.tag.r-noncomune{color:#85c285;border-color:#2c4a2c}
.tag.r-raro{color:#7eb2e0;border-color:#2a4360}
.tag.r-moltoraro{color:#bd97e0;border-color:#473560}
.tag.r-leggendario{color:#e0b060;border-color:#5e4824}
.spell-card.legendary{border-color:#4a3a1e}
.spell-card.legendary .sname{color:var(--gold-bright)}
.item-loc{
  margin-top:8px;padding:8px 11px;font-size:.82rem;line-height:1.55;
  background:var(--bg2);border-left:2px solid var(--gold);border-radius:0 6px 6px 0;
  color:var(--muted);
}

.empty{color:var(--muted);text-align:center;padding:40px;animation:fadeIn .3s both}

/* ===== build planner ===== */
.gold-btn{
  background:var(--card2);
  color:var(--gold-bright);border:1px solid var(--gold);border-radius:7px;
  padding:9px 16px;font-size:.88rem;
  transition:background .15s;
}
.gold-btn:hover{background:#22221f}
.gold-btn.danger{color:#d49184;border-color:#6b4036}
.ghost-btn{
  background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:7px;
  padding:9px 16px;font-size:.88rem;
  transition:color .15s, border-color .15s;
}
.ghost-btn:hover{color:var(--text);border-color:#3a3a42}

.planner-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;animation:fadeIn .3s both}
.planner-bar input{
  flex:1;min-width:200px;
  background:var(--bg2);border:1px solid var(--border);border-radius:7px;
  color:var(--text);padding:9px 13px;font-size:.95rem;font-family:inherit;
}
.planner-bar input:focus{outline:none;border-color:var(--gold)}

.saved-list{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.saved-label{color:var(--muted);font-size:.8rem}
.pchip{
  display:inline-flex;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:6px;
  overflow:hidden;font-size:.8rem;
  transition:border-color .15s;
}
.pchip:hover{border-color:var(--gold)}
.pchip a{padding:4px 10px;cursor:pointer;color:var(--gold)}
.pchip a.del{color:#b07466;border-left:1px solid var(--border);padding:4px 8px}
.pchip a.del:hover{background:#241814}

.planner-summary{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;
  margin-bottom:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  background:var(--bg2);
}
.planner-summary .count{margin-left:auto}

.prows{display:flex;flex-direction:column;gap:5px}
.prow{
  display:flex;align-items:center;gap:10px;
  background:var(--card);
  border:1px solid var(--border-soft);border-radius:7px;
  padding:7px 10px;
  animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 20ms);
  transition:border-color .15s;
}
.prow:hover{border-color:var(--border)}
.plvl{
  min-width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);border:1px solid var(--border);
  color:var(--muted);font-size:.8rem;
  flex-shrink:0;
}
.pclass{min-width:150px;padding:7px 9px!important}
.pinfo{flex:1;font-size:.82rem;line-height:1.5;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pinfo b{color:var(--gold);font-weight:500}
.pinfo b.subfeat{color:var(--gold-bright)}
.pempty{opacity:.5}
.pclasslvl{
  background:var(--bg2);border:1px solid var(--accent,var(--border));border-radius:4px;
  color:var(--text);font-size:.74rem;padding:2px 8px;white-space:nowrap;
}
.psub{border-color:var(--gold)!important;color:var(--gold-bright)!important;font-size:.8rem!important;padding:5px 8px!important}
.pchoice{
  border-color:#3a3a42!important;color:var(--text)!important;
  font-size:.8rem!important;padding:5px 8px!important;max-width:230px;
}
.pchoice:hover{border-color:var(--gold)!important}
.planner-note{margin-top:18px;color:var(--muted);font-size:.8rem;line-height:1.6}

/* statistiche */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.stat-box{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:12px;text-align:center;
}
.stat-name{color:var(--muted);font-size:.75rem;letter-spacing:1.5px;margin-bottom:8px}
.stat-controls{display:flex;align-items:center;justify-content:center;gap:8px}
.stat-btn{
  width:26px;height:26px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--border);color:var(--text);
  font-size:1rem;line-height:1;
  transition:border-color .15s;
}
.stat-btn:hover:not(:disabled){border-color:var(--gold)}
.stat-btn:disabled{opacity:.3;cursor:default}
.stat-val{font-size:1.25rem;color:var(--text);min-width:46px}
.stat-val i{display:block;font-size:.65rem;color:var(--muted);font-style:normal}
.stat-mod{margin-top:6px;color:var(--gold);font-size:.85rem}
.bonus-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-size:.85rem}
.bonus-row select{margin-left:6px}

/* talenti */
.feats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.feat-box{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px}
.feat-box select{width:100%}
.feat-desc{margin-top:8px;font-size:.8rem;color:var(--muted);line-height:1.5}

/* skill */
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.skill-chk{
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--border-soft);border-radius:7px;
  padding:8px 11px;font-size:.84rem;color:var(--muted);cursor:pointer;
  transition:border-color .15s, color .15s;
}
.skill-chk:hover{border-color:var(--border)}
.skill-chk.on{border-color:var(--gold);color:var(--text)}
.skill-chk i{margin-left:auto;font-style:normal;font-size:.7rem;color:var(--muted);opacity:.7}
.skill-chk input{accent-color:var(--gold)}

/* equipaggiamento */
.gear-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px}
.gear-box{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px}
.gear-label{color:var(--muted);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.gear-box select{width:100%}
.gear-desc{margin-top:8px;font-size:.8rem;color:var(--muted);line-height:1.5}
.gear-desc .tag{margin-right:6px}

/* ===== build famose ===== */
.builds-intro{color:var(--muted);margin-bottom:16px;line-height:1.6;font-size:.9rem;animation:fadeIn .3s both}
.build-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.build-card{
  background:var(--card);
  border:1px solid var(--border);border-radius:10px;
  padding:16px;
  display:flex;flex-direction:column;gap:10px;
  animation:fadeUp .35s both;animation-delay:calc(var(--i,0) * 30ms);
  transition:border-color .15s;
}
.build-card:hover{border-color:var(--gold)}
.build-head{display:flex;gap:12px;align-items:center}
.bicon{
  width:46px;height:46px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;
  background:var(--bg2);border:1px solid var(--border);
}
.bicon.big{width:60px;height:60px;font-size:1.8rem}
.build-card h3{color:var(--text);font-size:1.02rem}
.bsplit{color:var(--muted);font-size:.78rem;margin-top:3px}
.btags{display:flex;gap:5px;flex-wrap:wrap}
.bdesc{line-height:1.55;font-size:.87rem;color:#c9c7c1}
.build-btns{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}

/* guida build */
.guide-head{margin-bottom:14px;animation:fadeIn .3s both}
.guide-title{color:var(--text);font-size:1.4rem}
.guide-stats{
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:13px 16px;font-size:.95rem;color:var(--gold-bright);letter-spacing:.5px;
}
.guide-timeline{display:flex;flex-direction:column;gap:8px}
.guide-step{
  display:flex;gap:14px;
  background:var(--card);border:1px solid var(--border);border-radius:8px;
  padding:13px 16px;
  animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 60ms);
}
.guide-lv{
  flex-shrink:0;min-width:110px;
  color:var(--gold);font-size:.85rem;font-weight:500;
}
.guide-txt{font-size:.88rem;line-height:1.6;color:#c9c7c1}
.guide-play{
  background:var(--card);border:1px solid var(--border);border-left:3px solid var(--gold);
  border-radius:8px;padding:14px 16px;line-height:1.65;font-size:.9rem;color:#c9c7c1;
}
.guide-choices{display:flex;flex-direction:column;gap:5px}
.gchoice{
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border-soft);border-radius:7px;
  padding:9px 13px;font-size:.86rem;
  animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 30ms);
}
.gchoice-cls{
  background:var(--bg2);border:1px solid var(--border);border-radius:4px;
  color:var(--muted);font-size:.76rem;padding:2px 8px;white-space:nowrap;
}
.gchoice-name{color:var(--muted)}
.gchoice b{color:var(--gold);font-weight:500}
.guide-acts{display:flex;flex-direction:column;gap:6px}
.guide-act{
  background:var(--card);border:1px solid var(--border-soft);border-radius:7px;
  padding:11px 14px;font-size:.86rem;line-height:1.55;color:var(--muted);
  animation:fadeUp .3s both;animation-delay:calc(var(--i,0) * 50ms);
}

footer{
  text-align:center;color:#5a585f;font-size:.75rem;padding:20px;
  border-top:1px solid var(--border-soft);
}

/* ===== ottimizzazioni mobile / PWA ===== */
/* icone della tab bar: nascoste su desktop, visibili su mobile */
nav .nicon{display:none}

/* impostazioni */
.set-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.set-row.set-col{flex-direction:column;align-items:flex-start}
.set-val{color:var(--gold-bright);font-size:1.05rem;min-width:54px;text-align:center}
.ghost-btn:disabled{opacity:.35;cursor:default}

/* animazioni disattivate dalle impostazioni */
.no-anim *, .no-anim *::before, .no-anim *::after{animation:none!important;transition:none!important}

/* ===== ingranaggio impostazioni (in alto a sinistra) ===== */
header{position:relative}
header .apptag{color:var(--muted);font-size:.78rem;margin-top:4px;letter-spacing:1px}
#settingsbtn{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--card);border:1px solid var(--border);
  font-size:1.15rem;line-height:1;
  transition:border-color .15s;
}
#settingsbtn:hover{border-color:var(--gold)}
@media(max-width:640px){
  #settingsbtn{top:auto;bottom:10px;transform:none;left:12px}
  header{padding-left:64px;padding-right:64px}
}

/* ===== hub builds: controllo segmentato ===== */
.segmented{
  display:flex;gap:6px;margin-bottom:16px;
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:4px;
}
.seg{
  flex:1;padding:10px;border:none;border-radius:7px;
  background:transparent;color:var(--muted);font-size:.92rem;
  transition:background .15s,color .15s;
}
.seg.on{background:var(--card2);color:var(--gold-bright);box-shadow:inset 0 -2px 0 var(--gold)}

/* ===== rating a stelle ===== */
.rating-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stars{cursor:pointer;user-select:none;letter-spacing:2px}
.star{color:#3a3a42;font-size:1.05rem;transition:color .1s}
.star.on{color:var(--gold)}
.stars:hover .star{color:#6b5a36}
.rateinfo{color:var(--muted);font-size:.78rem}
.bauthor{color:var(--gold);font-weight:500}

@media(max-width:640px){
  header{padding:calc(16px + env(safe-area-inset-top)) 16px 14px}
  header h1{font-size:1.3rem;letter-spacing:2px}
  .prog-table{font-size:.8rem}
  .prog-table th,.prog-table td{padding:6px 8px}
  .tags{margin-left:0;width:100%}
  .prow{flex-wrap:wrap}
  .guide-step{flex-direction:column;gap:6px}

  /* tab bar fissa in basso: 6 voci sempre visibili, icona sopra etichetta */
  nav{
    position:fixed;top:auto;bottom:0;left:0;right:0;
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:0;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    border-bottom:none;border-top:1px solid var(--border);
    background:rgba(12,12,14,.97);
  }
  nav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:0;min-height:52px;
    padding:4px 2px;border:none;border-radius:8px;
    font-size:1rem;
  }
  nav button.active{background:var(--card2);border:none;box-shadow:inset 0 -2px 0 var(--gold)}
  nav .nicon{display:block;font-size:1.15rem;line-height:1}
  nav .nlbl{
    display:block;font-size:.56rem;letter-spacing:0;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  main{padding-bottom:calc(95px + env(safe-area-inset-bottom))}
  footer{padding-bottom:calc(85px + env(safe-area-inset-bottom))}

  /* controlli più grandi al tocco */
  .filters input[type=search], .filters select, select, .gold-btn, .ghost-btn, .back-btn{
    min-height:44px;
  }
  .stat-btn{width:38px;height:38px;font-size:1.2rem}
  .skill-chk{min-height:44px}
  .class-card:hover{transform:none}  /* niente effetti hover su touch */
}

/* iPhone con notch in landscape */
@supports(padding:max(0px)){
  body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* ===== profilo, account e commenti ===== */
header{position:relative}
#profilebtn{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border-radius:50%;
  background:var(--card2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;overflow:hidden;cursor:pointer;padding:0;
}
#profilebtn:hover{border-color:var(--gold)}
#profilebtn .hava{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
#profilebtn img.hava{object-fit:cover}
#profilemenu{
  position:absolute;right:12px;top:calc(50% + 26px);z-index:40;
  background:var(--card2);border:1px solid var(--border);border-radius:12px;
  min-width:170px;padding:6px;display:flex;flex-direction:column;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
#profilemenu button{
  background:none;border:none;color:var(--text);text-align:left;
  padding:11px 14px;border-radius:8px;font-size:.95rem;cursor:pointer;
}
#profilemenu button:hover{background:var(--bg2)}

.auth-box{display:flex;flex-direction:column;gap:8px;max-width:420px;margin-bottom:6px}
.auth-box input{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:12px 14px;font-family:inherit;font-size:.95rem;
}
.auth-box input:focus{outline:none;border-color:var(--gold)}
.auth-box .gold-btn{align-self:flex-start}
.auth-err{color:#d97862;margin-top:10px;min-height:1.2em;font-size:.9rem}

.profile-card{
  display:flex;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:14px;margin-bottom:10px;
}
.ava-big{
  width:72px;height:72px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;
  background:var(--bg2);border:1px solid var(--border);overflow:hidden;
}
img.ava-big{object-fit:cover}
.profile-info{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.profile-info input{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:10px 12px;font-family:inherit;font-size:1rem;
}
.ava-grid{display:flex;flex-wrap:wrap;gap:8px}
.ava-pick{
  width:52px;height:52px;border-radius:50%;font-size:1.5rem;
  background:var(--card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.ava-pick.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,168,106,.3)}
.ava-pick:hover{border-color:var(--gold)}

.bicon-ava{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%}
img.bicon-ava{object-fit:cover}

.cmts{margin-top:10px;border-top:1px solid var(--border-soft);padding-top:10px;display:flex;flex-direction:column;gap:9px}
.cmt{display:flex;gap:10px}
.cmt-ava{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.05rem;
  background:var(--bg2);border:1px solid var(--border);overflow:hidden;vertical-align:middle;
}
img.cmt-ava{object-fit:cover}
.cmt-body{flex:1;min-width:0}
.cmt-head{display:flex;gap:8px;align-items:baseline}
.cmt-head b{color:var(--gold);font-weight:500;font-size:.85rem}
.cmt-date{color:var(--muted);font-size:.72rem}
.cmt-text{font-size:.86rem;line-height:1.5;color:#c9c7c1;margin-top:2px;word-wrap:break-word}
.cmt-empty{color:var(--muted);font-size:.84rem}
.cmt-form{display:flex;gap:8px}
.cmt-form input{
  flex:1;min-width:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:9px 12px;font-family:inherit;font-size:.88rem;
}
.cmt-form input:focus{outline:none;border-color:var(--gold)}


/* fix: il menu si chiude davvero (hidden vince su display:flex) */
#profilemenu[hidden]{display:none!important}

/* link-pulsante donazioni */
a.gold-btn{display:inline-block;text-decoration:none;text-align:center}
.donate-btn{margin-top:4px}

/* liste guida: punti di forza / debolezze / consigli */
.guide-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0}
.guide-list li{
  position:relative;padding:10px 14px 10px 34px;line-height:1.5;font-size:.92rem;
  background:var(--card);border:1px solid var(--border-soft);border-radius:10px;
}
.guide-list li::before{position:absolute;left:12px;top:10px;font-size:.95rem}
.guide-list.pros li::before{content:"✓";color:#7bc47b}
.guide-list.cons li::before{content:"✕";color:#d98a7a}
.guide-list:not(.pros):not(.cons) li::before{content:"💡"}

/* form di pubblicazione */
.pubform{display:flex;flex-direction:column;gap:12px;max-width:640px}
.pubform label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;color:var(--muted)}
.pubform input,.pubform textarea,.pubform select{
  background:var(--card);border:1px solid var(--border);border-radius:10px;
  color:var(--text);padding:10px 12px;font-family:inherit;font-size:.92rem;width:100%;resize:vertical;
}
.pubform input:focus,.pubform textarea:focus,.pubform select:focus{outline:none;border-color:var(--gold)}
.pubform textarea{min-height:44px}

/* ===== spoiler posizioni oggetti ===== */
.item-loc.spoiler{cursor:pointer;position:relative}
.item-loc.spoiler .spoiler-text{
  filter:blur(5px);
  transition:filter .2s;
  user-select:none;
  -webkit-user-select:none;
}
.item-loc.spoiler::after{
  content:"👁 " attr(title);
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:.72rem;color:var(--gold);opacity:.75;
  pointer-events:none;white-space:nowrap;
}
.item-loc.spoiler:hover .spoiler-text{filter:blur(4px)}

/* ===== schermata "serve un account" ===== */
.gate-card{
  max-width:420px;margin:32px auto;text-align:center;
  background:var(--card);border:1px solid var(--border);border-radius:16px;padding:32px 24px;
}
.gate-icon{font-size:3rem;margin-bottom:12px}
.gate-card .gold-btn{margin-top:16px}

/* ===== pulsante avatar nel profilo ===== */
.ava-big-btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;flex-shrink:0;position:relative}
.ava-big-btn::after{
  content:"✎";position:absolute;right:-2px;bottom:-2px;
  width:24px;height:24px;border-radius:50%;
  background:var(--gold);color:#1a1a1a;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}

/* ===== righe build nel profilo ===== */
.mybuild{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:10px 14px;margin-bottom:8px;
}
.mybuild-info{flex:1;min-width:120px;display:flex;flex-direction:column;gap:2px}
.mybuild-name{font-weight:600;color:var(--gold-bright)}
.ghost-btn.sm{padding:5px 12px;font-size:.8rem;min-width:auto}

/* pulsante "riempi sotto" nel planner */
.filldown{
  flex-shrink:0;width:30px;height:30px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--border);color:var(--gold);
  font-size:1rem;cursor:pointer;line-height:1;
}
.filldown:hover{border-color:var(--gold);background:var(--card)}

/* ===== modale scelta immagine ===== */
.modal-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,0);
  transition:background .22s ease;
}
.modal-overlay[hidden]{display:none!important}
.modal-overlay.open{background:rgba(0,0,0,.6)}
.modal-card{
  width:100%;max-width:380px;
  background:var(--card2);border:1px solid var(--border);border-radius:18px;
  padding:22px 20px;position:relative;
  transform:scale(.85) translateY(12px);opacity:0;
  transition:transform .24s cubic-bezier(.2,.9,.3,1.2), opacity .2s ease;
}
.modal-overlay.open .modal-card{transform:scale(1) translateY(0);opacity:1}
.modal-close{
  position:absolute;right:12px;top:10px;
  width:32px;height:32px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--border);color:var(--text);
  font-size:1.2rem;line-height:1;cursor:pointer;
}
.modal-close:hover{border-color:var(--gold);color:var(--gold)}
.modal-card .ava-grid{justify-content:center}
@media (prefers-reduced-motion: reduce){
  .modal-card{transition:opacity .15s ease}
}