/* ===== LAYOUT: screens, navs, grids, responsive breakpoints ===== */

.screen{display:none;min-height:100vh;}.screen.active{display:block;}

/* NAV */
.top-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;border-bottom:1px solid rgba(139,0,0,.2);background:rgba(10,6,8,.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;}
.nav-brand{display:flex;align-items:center;cursor:pointer;}.nav-brand img{height:52px;width:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(139,0,0,.35));transition:filter .3s;}.nav-brand:hover img{filter:drop-shadow(0 0 14px rgba(201,168,76,.5));}
.nav-brand span{color:var(--blood-bright);}
.nav-user{display:flex;align-items:center;gap:1.5rem;font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;}
.nav-user-name{color:var(--silver);}

/* Burger menu */
.burger-btn{background:none;border:none;color:var(--silver);font-size:1.2rem;cursor:pointer;padding:.2rem .4rem;line-height:1;transition:color .2s;flex-shrink:0;}
.burger-btn:hover{color:var(--bone);}
.burger-item{background:none;border:none;border-bottom:1px solid rgba(139,0,0,.08);color:var(--silver);font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;padding:.85rem 1.4rem;text-align:left;cursor:pointer;transition:all .2s;width:100%;}
.burger-item:hover{background:rgba(139,0,0,.08);color:var(--bone);}
.burger-item.burger-sep{border-top:1px solid rgba(139,0,0,.15);margin-top:.3rem;}
.nav-desktop-only{display:inline-flex;}
.burger-only{display:none !important;}
.nav-edit-only{display:none !important;}
@media(max-width:640px){.nav-desktop-only{display:none !important;}}

/* Version picker popup */
#ver-picker{position:fixed;z-index:9999;background:var(--shadow,#12090e);border:1px solid rgba(139,0,0,.4);border-top:2px solid var(--blood);min-width:200px;max-width:300px;box-shadow:0 8px 32px rgba(0,0,0,.8);display:none;}
#ver-picker.open{display:block;}
.ver-picker-title{font-family:'Cinzel',serif;font-size:.52rem;letter-spacing:.25em;text-transform:uppercase;color:var(--silver);opacity:.6;padding:.5rem .8rem .3rem;border-bottom:1px solid rgba(139,0,0,.15);}
.ver-picker-item{padding:.55rem .8rem;font-family:'EB Garamond',serif;font-size:.9rem;color:var(--silver);cursor:pointer;display:flex;align-items:center;gap:.5rem;border-bottom:1px solid rgba(139,0,0,.08);}
.ver-picker-item:last-child{border-bottom:none;}
.ver-picker-item:hover{background:rgba(139,0,0,.15);color:var(--pale);}
.ver-badge{font-family:'Cinzel',serif;font-size:.45rem;letter-spacing:.12em;text-transform:uppercase;padding:.1rem .35rem;border:1px solid rgba(139,0,0,.3);color:var(--blood);flex-shrink:0;}
.ver-badge.public{border-color:rgba(74,222,128,.3);color:#4ade80;}
.ver-badge.unlisted{border-color:rgba(250,204,21,.3);color:#facc15;}

/* Admin lock notification banner */
.lock-notification-banner{background:rgba(139,0,0,.08);border-bottom:2px solid rgba(248,113,113,.25);padding:0;}
.lock-notification-item{display:flex;align-items:flex-start;gap:.9rem;padding:.75rem 2.5rem;border-bottom:1px solid rgba(248,113,113,.1);}
.lock-notification-item:last-child{border-bottom:none;}
.lock-notification-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem;}
.lock-notification-body{flex:1;min-width:0;}
.lock-notification-title{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:#fca5a5;margin-bottom:.2rem;}
.lock-notification-msg{font-family:'EB Garamond',serif;font-size:.88rem;color:rgba(252,165,165,.8);line-height:1.4;}
.lock-notification-dismiss{background:none;border:none;color:rgba(252,165,165,.5);font-size:.85rem;cursor:pointer;padding:0;flex-shrink:0;transition:color .2s;align-self:flex-start;margin-top:.1rem;}
.lock-notification-dismiss:hover{color:#fca5a5;}

/* DASHBOARD */
#dashboard-screen{animation:fadeIn .5s ease;}
.dashboard-hero{padding:3rem 2.5rem 2rem;border-bottom:1px solid rgba(139,0,0,.15);}
.dashboard-hero h2{font-family:'Cinzel',serif;font-size:.65rem;letter-spacing:.5em;text-transform:uppercase;color:var(--blood-bright);margin-bottom:.5rem;}
.dashboard-hero .welcome{font-family:'Cinzel Decorative',serif;font-size:1.8rem;color:var(--bone);}
.dashboard-body{padding:2.5rem;}

/* Bulk selection */
.bulk-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.8rem;padding:.7rem 0 1rem;border-bottom:1px solid rgba(139,0,0,.15);margin-bottom:1.2rem;}
.bulk-bar-info{display:flex;align-items:center;gap:.8rem;font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--silver);}
.bulk-bar-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
@media(max-width:640px){.bulk-bar{flex-direction:column;align-items:flex-start;}.bulk-bar-actions{flex-wrap:wrap;}}

.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}
.section-title{font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.4em;text-transform:uppercase;color:var(--silver);}
.sheets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;}

/* SHEET EDITOR */
#sheet-screen{animation:fadeIn .3s ease;}
.sheet-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;border-bottom:1px solid rgba(139,0,0,.2);background:rgba(10,6,8,.9);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;gap:1rem;flex-wrap:wrap;}
.sheet-nav-left{display:flex;align-items:center;gap:1rem;}
.sheet-title-display{font-family:'Cinzel',serif;font-size:1rem;color:var(--bone);}
.sheet-body{max-width:1260px;margin:0 auto;padding:2rem 2.5rem 4rem;overflow-x:hidden;}
.sheet-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(500px,1fr));gap:1.5rem;align-items:start;}
.sheet-col-left,.sheet-col-right{min-width:0;}
/* Two-column right basics for field-heavy sheet types */
#sheet-right-basics.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;align-items:start;}
/* Fields marked .dnd-classes-field span the full width of the two-col
   basics grid so the class > subclass > level row has room to breathe. */
#sheet-right-basics.two-col > .dnd-classes-field{grid-column:1 / -1;}
@media(max-width:860px){#sheet-right-basics.two-col{grid-template-columns:1fr;}}
/* col-left and col-right are natural grid children (column 1 and 2) */

.sheet-header-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;}
.sheet-header-grid--portrait{grid-template-columns:auto 1fr 1fr;gap:1.5rem 2rem;}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;align-items:start;min-width:0;}
.attributes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.disciplines-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.vitals-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
/* Full-width sheet sections for non-WoD systems */
.sheet-full-width{display:flex;flex-direction:column;gap:0;}

/* PUBLIC BROWSE SCREEN */
#browse-screen{animation:fadeIn .5s ease;}
.browse-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;border-bottom:1px solid rgba(139,0,0,.2);background:rgba(10,6,8,.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;}
.browse-search{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;}
.browse-hero{padding:2.5rem 2.5rem 1.5rem;border-bottom:1px solid rgba(139,0,0,.12);}
.browse-hero h2{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--blood-bright);margin-bottom:.4rem;}
.browse-hero .browse-title{font-family:'Cinzel Decorative',serif;font-size:1.6rem;color:var(--bone);}
.browse-hero .browse-sub{font-size:.85rem;color:var(--silver);margin-top:.3rem;}
.browse-body{padding:2.5rem;}
.browse-empty{text-align:center;padding:4rem 2rem;color:var(--silver);}
.browse-empty .empty-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.35;}

/* ===== ACCOUNT / SETTINGS SCREEN ===== */
#account-screen{animation:fadeIn .4s ease;}
.account-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;border-bottom:1px solid rgba(139,0,0,.2);background:rgba(10,6,8,.8);backdrop-filter:blur(10px);position:sticky;top:0;z-index:100;}
.account-body{max-width:640px;margin:0 auto;padding:2.5rem;}
.account-hero{padding:2.5rem 2.5rem 1.5rem;border-bottom:1px solid rgba(139,0,0,.12);max-width:640px;margin:0 auto;}
.account-hero h2{font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.5em;text-transform:uppercase;color:var(--blood-bright);margin-bottom:.4rem;}
.account-hero .account-title{font-family:'Cinzel Decorative',serif;font-size:1.6rem;color:var(--bone);}

/* ===== ADMIN PANEL ===== */
.admin-hero{text-align:center;padding:2.5rem 2rem 1.5rem;border-bottom:1px solid rgba(139,0,0,.15);}
.admin-hero h2{font-family:'Cinzel Decorative',serif;font-size:1.4rem;color:var(--gold);margin-bottom:.4rem;}
.admin-stats-bar{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;padding:1rem 2rem;border-bottom:1px solid rgba(139,0,0,.1);}
.admin-table-wrap{padding:0 2rem 2rem;overflow-x:auto;}
.admin-tab-bar{display:flex;gap:0;border-bottom:1px solid rgba(139,0,0,.2);padding:0 2rem;margin-top:.5rem;}

/* ===== RESPONSIVE (mobile) ===== */
@media(max-width:640px){
  /* ---- Nav ---- */
  .top-nav,.sheet-nav,.account-nav,.browse-nav{padding:.8rem 1rem;}
  .nav-brand{font-size:.9rem;}
  .nav-user{gap:.6rem;}
  .btn-ghost{padding:.3rem .6rem;font-size:.6rem;}

  /* ---- Login ---- */
  .login-emblem h1{font-size:1.5rem;}
  .login-box{padding:1.5rem 1.2rem;}

  /* ---- Dashboard ---- */
  .dashboard-hero{padding:1.5rem 1rem 1rem;}
  .dashboard-body{padding:1rem;}
  .sheets-grid{grid-template-columns:1fr;}

  /* ---- Browse ---- */
  .browse-hero{padding:1.5rem 1rem;}
  .browse-body{padding:1rem;}
  .browse-search{flex-wrap:wrap;gap:.4rem;}
  .browse-search-input{width:100%;min-width:0;}
  .browse-type-select{width:100%;}

  /* ---- Sheet body & header ---- */
  .sheet-body{padding:1rem 1rem 3rem;}
  .sheet-section{padding:1.2rem;}
  .sheet-columns{grid-template-columns:1fr;}
  /* Override the portrait header grid */
  .sheet-header-grid--portrait{
    display:flex!important;
    flex-direction:column!important;
    gap:1rem!important;
  }
  .sheet-header-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:1rem!important;
  }
  .portrait-panel{flex-direction:row;align-items:flex-start;gap:.8rem;width:100%;}
  .portrait-frame{width:100px;height:130px;flex-shrink:0;}
  .gallery-strip{width:auto;flex:1;}
  .gallery-strip-row{flex-wrap:wrap;}

  /* ---- All 3-col grids → 1 col ---- */
  .attributes-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr;}
  /* Attributes and skills: keep dots from wrapping */
  .attr-name,.skill-name{font-size:.78rem;}
  .attr-row,.skill-row{margin-bottom:.4rem;}
  .spec-input{font-size:.68rem;}

  /* ---- 2-col grids → 1 col ---- */
  .disciplines-grid{grid-template-columns:1fr;}
  .vitals-grid{grid-template-columns:1fr;}

  /* ---- Renown: wrap pips ---- */
  .renown-row{flex-wrap:wrap;gap:.3rem;}
  .renown-pips{flex-wrap:wrap;}

  /* ---- Pool tracks: wrap ---- */
  .vital-track{flex-wrap:wrap;}

  /* ---- Modal & type toggle ---- */
  .modal{padding:1.2rem;}
  .type-toggle{flex-wrap:wrap;}
  .type-btn{flex:1 1 40%;font-size:.6rem;padding:.5rem .4rem;}

  /* ---- Account ---- */
  .account-hero{padding:1.5rem 1rem;}
  .account-body{padding:1rem;}
  .account-row{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .inline-form{flex-direction:column;}
  .inline-input{width:100%;}

  /* ---- Gallery modal ---- */
  .gallery-modal{padding:1.2rem;max-height:95vh;}
  .gallery-modal-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));}

  /* ---- Sheet textarea grids → single col ---- */
  .sheet-section [style*="grid-template-columns:1fr 1fr"]{
    display:flex!important;
    flex-direction:column!important;
  }
  .sheet-section [style*="grid-template-columns:span 2"]{
    grid-column:auto!important;
  }

  /* ---- Sphere grid: 2-col on mobile ---- */
  #spheres-content > div{grid-template-columns:repeat(2,1fr)!important;}

  /* ---- Wolf forms: 1 col ---- */
  #forms-content > div{display:flex!important;flex-direction:column!important;}
}