/* ===== BG3 Compendio — tema iOS "Liquid Glass" =====
   Override caricato dopo style.css: superfici traslucide con blur,
   bordi luminosi, angoli ampi, tab bar flottante a pillola. */

:root{
  --glass: rgba(255,255,255,.065);
  --glass-2: rgba(255,255,255,.04);
  --glass-hi: rgba(255,255,255,.12);
  --glass-border: rgba(255,255,255,.13);
  --glass-border-soft: rgba(255,255,255,.07);
  --blur: blur(22px) saturate(170%);
  --radius: 18px;
  --gold: #d9b97c;
  --gold-bright: #ecd2a0;
}

body{
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  background:#050507;
}
/* bagliori di profondità dietro al vetro */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 15% -5%, rgba(217,185,124,.13), transparent 60%),
    radial-gradient(ellipse 50% 35% at 90% 25%, rgba(120,90,200,.10), transparent 60%),
    radial-gradient(ellipse 70% 45% at 50% 110%, rgba(80,120,180,.08), transparent 60%);
}

/* ===== header ===== */
header{
  border-bottom:1px solid var(--glass-border-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
header h1{font-weight:600;letter-spacing:1px}

/* ===== superfici di vetro ===== */
.class-card, .spell-card, .sub-card, .build-card, .stat-box, .feat-box,
.gear-box, .skill-chk, .prow, .planner-summary, .guide-stats, .guide-step,
.guide-play, .guide-act, .gchoice, .pchip, .badge{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-border-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.25);
}
.class-card, .build-card{border-radius:var(--radius)}
.spell-card, .sub-card, .guide-step, .guide-play, .guide-stats, .stat-box,
.feat-box, .gear-box, .planner-summary{border-radius:16px}
.prow, .guide-act, .gchoice, .skill-chk{border-radius:13px}

.class-card:hover, .spell-card:hover, .build-card:hover, .sub-card:hover{
  border-color:var(--glass-border);
  background:var(--glass-hi);
}
.spell-card.legendary{
  border-color:rgba(217,185,124,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(217,185,124,.10);
}
.icon-ring, .bicon, .plvl{
  background:var(--glass-2);
  border:1px solid var(--glass-border-soft);
}
.item-loc{
  background:var(--glass-2);
  border-left:2px solid var(--gold);
  border-radius:0 12px 12px 0;
}
.lvl-divider{border-bottom-color:var(--glass-border-soft)}
h3.section{border-bottom-color:var(--glass-border-soft)}
.prog-table th{border-bottom-color:var(--glass-border)}
.prog-table td{border-bottom-color:var(--glass-border-soft)}
.prog-table tr:hover td{background:var(--glass-2)}
.sub-card[open] summary{border-bottom-color:var(--glass-border-soft)}
.sub-feat{border-bottom-color:var(--glass-border-soft)}

/* ===== controlli: pillole iOS ===== */
.gold-btn, .ghost-btn, .back-btn{
  border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
}
.gold-btn{border:1px solid rgba(217,185,124,.5);color:var(--gold-bright)}
.gold-btn:hover{background:rgba(217,185,124,.12)}
.ghost-btn, .back-btn{border:1px solid var(--glass-border)}
.tag{border-radius:999px;background:var(--glass-2);border-color:var(--glass-border-soft)}
.filters input[type=search], .filters select, select, .planner-bar input{
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-border-soft);
  border-radius:13px;
}
.filters input[type=search]:focus, .planner-bar input:focus{border-color:rgba(217,185,124,.5)}
.stat-btn{border-radius:999px;background:var(--glass-2);border-color:var(--glass-border)}
.skill-chk.on{border-color:rgba(217,185,124,.5);background:rgba(217,185,124,.08)}
.skill-chk input{accent-color:var(--gold)}
.set-row .gold-btn, .set-row .ghost-btn{min-width:130px}

/* ===== nav desktop (>640px): barra di vetro ===== */
nav{
  background:rgba(8,8,10,.55);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--glass-border-soft);
}
nav button{border-radius:999px}
nav button.active{
  background:var(--glass-hi);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

/* ===== tab bar mobile: pillola flottante ===== */
@media(max-width:640px){
  nav{
    left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));
    border:1px solid var(--glass-border);
    border-radius:28px;
    background:rgba(10,10,14,.55);
    -webkit-backdrop-filter:blur(28px) saturate(180%);
    backdrop-filter:blur(28px) saturate(180%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 32px rgba(0,0,0,.5);
    padding:6px 6px;
  }
  nav button{border-radius:20px}
  nav button.active{
    background:var(--glass-hi);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    border:none;
  }
  main{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}

/* scrollbar minimale */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border:none;border-radius:4px}

/* profilo & commenti in vetro */
#profilebtn{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-border)}
#profilemenu{background:rgba(12,12,16,.6);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);border-color:var(--glass-border);border-radius:16px}
#profilemenu button{border-radius:10px}
#profilemenu button:hover{background:var(--glass-hi)}
.profile-card,.ava-pick{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-border-soft)}
.auth-box input,.profile-info input,.cmt-form input{background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-border-soft);border-radius:13px}
.cmts{border-top-color:var(--glass-border-soft)}

/* guida estesa & form pubblicazione in vetro */
.guide-list li{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-border-soft)}
.pubform input,.pubform textarea,.pubform select{background:var(--glass-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-color:var(--glass-border-soft);border-radius:13px}

/* modale immagine in vetro */
.modal-card{
  background:rgba(20,20,26,.72);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  backdrop-filter:blur(30px) saturate(180%);
  border-color:var(--glass-border);
  box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.modal-close{background:var(--glass);border-color:var(--glass-border)}