/* ════════════════════════════════════
   npc/style.css
   Galleria NPC con poster stile wanted
   Estratto da npc-gallery.js (_injectNpcCSS)
   JS: scripts/js/pages/npc/script.js
════════════════════════════════════ */

.npc-layout{display:grid;grid-template-columns:200px 1fr;gap:0;width:calc(100% + 80px);margin-left:-40px;min-height:600px;border:1px solid rgba(200,155,60,.2);border-radius:2px;overflow:hidden;}
.npc-sidebar{border-right:1px solid rgba(200,155,60,.15);background:rgba(4,3,2,.9);overflow-y:auto;}
.npc-sidebar-title{font-family:'Cinzel',serif;font-size:7px;font-weight:700;letter-spacing:.3em;color:rgba(200,155,60,.45);padding:18px 18px 10px;text-transform:uppercase;border-bottom:1px solid rgba(200,155,60,.1);}
.npc-city-list{list-style:none;margin:0;padding:10px 0;}
.npc-city-item{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.05em;color:rgba(220,205,170,.55);padding:11px 18px;cursor:pointer;transition:all .2s;border-left:2px solid transparent;display:flex;align-items:center;gap:8px;}
.npc-city-item:hover{color:rgba(220,205,170,.9);background:rgba(200,155,60,.05);}
.npc-city-item.active{color:#c89b3c;background:rgba(200,155,60,.08);border-left-color:#c89b3c;font-weight:600;}
.npc-main{display:flex;flex-direction:column;background:rgba(8,6,3,.7);overflow:hidden;}
.npc-filter-bar{display:flex;gap:8px;padding:14px 28px;border-bottom:1px solid rgba(200,155,60,.12);background:rgba(4,3,2,.6);flex-shrink:0;}
.npc-filter-btn{font-family:'Cinzel',serif;font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(200,180,140,.45);background:transparent;border:1px solid rgba(200,155,60,.15);border-radius:1px;padding:6px 16px;cursor:pointer;transition:all .2s;}
.npc-filter-btn:hover{color:rgba(200,180,140,.8);border-color:rgba(200,155,60,.4);}
.npc-filter-btn.active{color:#c89b3c;border-color:#c89b3c;background:rgba(200,155,60,.08);}
.npc-board{padding:28px 32px;overflow-y:auto;max-height:82vh;flex:1;}
.npc-board-placeholder{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.12em;color:rgba(200,155,60,.2);padding:80px 0;text-align:center;}
.npc-city-title{font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:#c89b3c;letter-spacing:.08em;margin-bottom:28px;padding-bottom:14px;border-bottom:1px solid rgba(200,155,60,.25);display:flex;align-items:center;gap:12px;}
.npc-section{margin-bottom:36px;}
.npc-section-header{font-family:'Cinzel',serif;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px;padding-bottom:9px;border-bottom:1px solid;display:flex;align-items:center;gap:8px;}
.npc-section-count{margin-left:auto;font-size:8px;opacity:.45;font-weight:400;}
.npc-posters{display:flex;flex-wrap:wrap;gap:16px;}
.npc-poster{width:148px;min-height:215px;position:relative;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;border-radius:1px;display:flex;flex-direction:column;background:linear-gradient(160deg,#1e1a0e 0%,#161208 40%,#100e06 70%,#1a1508 100%);border:1px solid rgba(200,155,60,.3);box-shadow:0 4px 18px rgba(0,0,0,.65),inset 0 0 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(200,155,60,.12);overflow:hidden;}
.npc-poster:hover{transform:translateY(-6px) rotate(.4deg);box-shadow:0 14px 36px rgba(0,0,0,.8),0 0 18px rgba(200,155,60,.07);}
.npc-poster-texture{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(200,155,60,.013) 2px,rgba(200,155,60,.013) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(200,155,60,.008) 3px,rgba(200,155,60,.008) 6px);}
.npc-poster-corner{position:absolute;width:11px;height:11px;border-color:rgba(200,155,60,.45);border-style:solid;z-index:2;}
.npc-corner-tl{top:6px;left:6px;border-width:1px 0 0 1px;}
.npc-corner-tr{top:6px;right:6px;border-width:1px 1px 0 0;}
.npc-corner-bl{bottom:6px;left:6px;border-width:0 0 1px 1px;}
.npc-corner-br{bottom:6px;right:6px;border-width:0 1px 1px 0;}
.npc-poster-inner{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;padding:14px 12px 10px;gap:7px;}
.npc-poster-imp{font-family:'Cinzel',serif;font-size:6px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border:1px solid;border-radius:1px;}
.npc-poster-avatar{font-size:2.5em;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));margin:2px 0;}
.npc-poster-divider{width:55%;border-top:1px solid;opacity:.5;}
.npc-poster-name{font-family:'Cinzel',serif;font-size:10.5px;font-weight:700;letter-spacing:.03em;color:rgba(235,220,185,.95);text-align:center;line-height:1.45;text-shadow:0 1px 4px rgba(0,0,0,.8);}
.npc-poster-lore-badge{font-family:'Cinzel',serif;font-size:7px;letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border:1px solid;border-radius:1px;text-align:center;opacity:.85;}
.npc-poster-footer{position:relative;z-index:1;font-family:'Cinzel',serif;font-size:7px;letter-spacing:.14em;color:rgba(200,155,60,.8);text-align:center;padding:7px 6px;border-top:1px solid rgba(200,155,60,.12);background:rgba(0,0,0,.3);opacity:0;transition:opacity .2s;}
.npc-poster:hover .npc-poster-footer{opacity:1;}
.npc-loading{display:flex;justify-content:center;padding:60px 0;}
.npc-err{font-family:'Cinzel',serif;font-size:11px;color:rgba(200,155,60,.35);padding:60px;text-align:center;}
@media(max-width:640px){
  .npc-layout{grid-template-columns:1fr;width:100%;margin-left:0;}
  .npc-sidebar{border-right:none;border-bottom:1px solid rgba(200,155,60,.15);max-height:150px;}
  .npc-board{padding:18px 14px;max-height:none;}
  .npc-filter-bar{padding:10px 14px;flex-wrap:wrap;}
  .npc-poster{width:130px;min-height:190px;}
}