/* ════════════════════════════════════
   galleria-pg/style.css
   Character Select Screen — Galleria PG
   Estratto da gallery.js (_injectGalleryCSS)
   JS: scripts/js/pages/galleria-pg/script.js
════════════════════════════════════ */

.gs-wrap{position:relative;width:100%;min-height:520px;background:linear-gradient(180deg,rgba(4,6,14,0) 0%,rgba(4,6,14,.8) 100%);overflow:hidden;}
.gs-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px;padding:0 2px;}
.gs-filter-btn{font-family:'Cinzel',serif;font-size:8px;font-weight:700;letter-spacing:.15em;padding:5px 14px;border:1px solid rgba(200,155,60,.2);background:rgba(200,155,60,.04);color:rgba(200,155,60,.5);cursor:pointer;transition:.2s;text-transform:uppercase;}
.gs-filter-btn:hover{border-color:rgba(200,155,60,.4);color:rgba(200,155,60,.8)}
.gs-filter-btn.active{border-color:rgba(200,155,60,.7);background:rgba(200,155,60,.12);color:var(--gold2);box-shadow:0 0 12px rgba(200,155,60,.2);}
.gs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-bottom:24px;}
.gs-card{position:relative;height:160px;cursor:pointer;overflow:hidden;border:1px solid rgba(255,255,255,.06);background:#0a0c14;transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s,box-shadow .22s;}
.gs-card:hover{transform:translateY(-6px) scale(1.03);border-color:rgba(200,155,60,.35);box-shadow:0 12px 32px rgba(0,0,0,.7),0 0 20px var(--gs-glow,rgba(200,155,60,.3));}
.gs-card.selected{border-color:var(--gs-c,rgba(200,155,60,.8))!important;box-shadow:0 0 0 1px var(--gs-c,rgba(200,155,60,.5)),0 8px 32px rgba(0,0,0,.8),0 0 28px var(--gs-glow,rgba(200,155,60,.4))!important;transform:translateY(-4px) scale(1.02)!important;}
.gs-card-bg{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform .4s ease;filter:brightness(.75) saturate(.9);}
.gs-card:hover .gs-card-bg,.gs-card.selected .gs-card-bg{transform:scale(1.06);filter:brightness(.9) saturate(1.1);}
.gs-card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,6,14,.97) 0%,rgba(4,6,14,.4) 50%,transparent 100%);}
.gs-card-name{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-family:'Cinzel',serif;font-size:9px;font-weight:700;letter-spacing:.06em;color:var(--white);padding:0 4px;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.9);}
.gs-card-tag{position:absolute;top:5px;left:5px;font-family:'Cinzel',serif;font-size:7px;letter-spacing:.1em;padding:2px 6px;border:1px solid var(--gs-c,rgba(200,155,60,.5));background:rgba(0,0,0,.6);color:var(--gs-c,rgba(200,155,60,.8));backdrop-filter:blur(4px);}
.gs-detail{display:grid;grid-template-columns:280px 1fr;gap:0;background:rgba(6,8,18,.95);border:1px solid rgba(200,155,60,.18);overflow:hidden;position:relative;min-height:320px;box-shadow:0 20px 60px rgba(0,0,0,.8);transition:opacity .3s,transform .3s;}
.gs-detail.hidden{opacity:0;transform:translateY(10px);pointer-events:none;height:0;overflow:hidden;border:none;margin:0}
.gs-detail-cover{position:relative;overflow:hidden;min-height:320px;}
.gs-detail-cover-img{position:absolute;inset:0;background-size:cover;background-position:center top;filter:brightness(.8);transition:transform .6s ease;}
.gs-detail:hover .gs-detail-cover-img{transform:scale(1.03)}
.gs-detail-cover-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,8,18,0) 60%,rgba(6,8,18,.95) 100%),linear-gradient(0deg,rgba(6,8,18,.6) 0%,transparent 50%);}
.gs-detail-body{padding:28px 28px 24px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;}
.gs-detail-eyebrow{font-family:'Cinzel',serif;font-size:8px;letter-spacing:.3em;color:var(--gs-acc,rgba(200,155,60,.7));text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.gs-detail-eyebrow::before{content:'';width:24px;height:1px;background:var(--gs-acc,rgba(200,155,60,.5))}
.gs-detail-name{font-family:'Cinzel',serif;font-size:26px;font-weight:900;color:var(--white);letter-spacing:.05em;line-height:1.15;margin-bottom:14px;text-shadow:0 2px 20px rgba(0,0,0,.8);}
.gs-detail-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.gs-detail-tag{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.12em;padding:4px 12px;border:1px solid var(--gs-acc,rgba(200,155,60,.4));color:var(--gs-acc,rgba(200,155,60,.8));background:rgba(0,0,0,.4);text-transform:uppercase;}
.gs-detail-btn{display:inline-flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:9px;font-weight:700;letter-spacing:.18em;padding:10px 22px;border:1px solid var(--gs-acc,rgba(200,155,60,.5));background:rgba(200,155,60,.08);color:var(--gs-acc,rgba(200,155,60,.9));cursor:pointer;transition:.2s;align-self:flex-start;text-transform:uppercase;}
.gs-detail-btn:hover{background:rgba(200,155,60,.18);box-shadow:0 0 20px var(--gs-glow,rgba(200,155,60,.3));}
.gs-corner{position:absolute;width:12px;height:12px;opacity:.5}
.gs-corner-tl{top:8px;left:8px;border-top:1px solid var(--gs-acc,rgba(200,155,60,.6));border-left:1px solid var(--gs-acc,rgba(200,155,60,.6))}
.gs-corner-tr{top:8px;right:8px;border-top:1px solid var(--gs-acc,rgba(200,155,60,.6));border-right:1px solid var(--gs-acc,rgba(200,155,60,.6))}
.gs-corner-bl{bottom:8px;left:8px;border-bottom:1px solid var(--gs-acc,rgba(200,155,60,.6));border-left:1px solid var(--gs-acc,rgba(200,155,60,.6))}
.gs-corner-br{bottom:8px;right:8px;border-bottom:1px solid var(--gs-acc,rgba(200,155,60,.6));border-right:1px solid var(--gs-acc,rgba(200,155,60,.6))}
.gs-loading{display:flex;align-items:center;justify-content:center;height:200px;color:rgba(200,155,60,.4);font-family:'Cinzel',serif;font-size:10px;letter-spacing:.2em;flex-direction:column;gap:14px;}
.gs-loading-spin{width:28px;height:28px;border:2px solid rgba(200,155,60,.15);border-top-color:rgba(200,155,60,.7);border-radius:50%;animation:gs-spin .8s linear infinite;}
@keyframes gs-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){
  .gs-detail{grid-template-columns:1fr}
  .gs-detail-cover{min-height:200px}
  .gs-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}
  .gs-card{height:130px}
}