/* Ash & Blood v5.62 — Character Roster lifecycle + visual refresh */
body.roster-page .page-header{z-index:2!important}
body.roster-page .ab-global-crumbs{position:relative;z-index:40}
body.roster-page #roster{z-index:1!important;padding-top:2.25rem!important}

body.roster-page .roster-controls{
  grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(150px,.8fr));
  width:min(1180px,100%);max-width:1180px;margin:0 auto .85rem;
  gap:1px;padding:1px;border:1px solid rgba(199,163,90,.16);border-radius:14px;
  background:linear-gradient(135deg,rgba(199,163,90,.12),rgba(139,26,26,.08));
  box-shadow:0 18px 50px rgba(0,0,0,.25);overflow:hidden
}
body.roster-page .roster-controls .control-input{
  border:0!important;border-radius:0!important;background:rgba(8,8,9,.94)!important;
  padding:0 .95rem!important;color:#d9d1c4!important;font-size:.68rem!important;letter-spacing:.08em
}
body.roster-page .roster-controls .control-input:focus{
  position:relative;z-index:2;outline:1px solid rgba(209,170,88,.72)!important;outline-offset:-1px!important;
  box-shadow:inset 0 0 0 1px rgba(209,170,88,.12)!important
}
body.roster-page .roster-status-summary{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.48rem;
  width:min(900px,100%);margin:.75rem auto 1.35rem
}
body.roster-page .roster-status-chip{
  appearance:none;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(15,15,16,.72);
  color:#8f8980;padding:.48rem .72rem;display:inline-flex;align-items:center;gap:.42rem;cursor:pointer;
  font:700 .62rem/1 'Cinzel',serif;letter-spacing:.08em;text-transform:uppercase;transition:.18s ease
}
body.roster-page .roster-status-chip b{font-size:.66rem;color:#d6d0c6}
body.roster-page .roster-status-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#747474;box-shadow:0 0 0 3px rgba(255,255,255,.03)}
body.roster-page .roster-status-chip[data-status-quick="active"]::before{background:#55b97d;box-shadow:0 0 0 3px rgba(85,185,125,.1)}
body.roster-page .roster-status-chip[data-status-quick="missing"]::before{background:#d8aa4c;box-shadow:0 0 0 3px rgba(216,170,76,.1)}
body.roster-page .roster-status-chip[data-status-quick="dead"]::before{background:#373737;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
body.roster-page .roster-status-chip:hover,body.roster-page .roster-status-chip.is-active{color:#f0e7d8;border-color:rgba(204,165,85,.32);background:rgba(31,27,22,.86);transform:translateY(-1px)}

body.roster-page .roster-count{margin:.7rem auto 1.7rem!important;color:#766f66!important;letter-spacing:.12em}
body.roster-page .roster-grid{gap:22px!important}
body.roster-page .char-card{
  height:475px!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:4px!important;
  background:#090909!important;box-shadow:0 18px 45px rgba(0,0,0,.33)!important;transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease!important
}
body.roster-page .char-card:hover{transform:translateY(-5px)!important;border-color:rgba(196,70,48,.34)!important;box-shadow:0 26px 60px rgba(0,0,0,.45)!important}
body.roster-page .char-card::after{content:"";position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.92) 100%)!important;opacity:1!important}
body.roster-page .char-card[data-status="active"]{--status-accent:#55b97d}
body.roster-page .char-card[data-status="missing"]{--status-accent:#d8aa4c}
body.roster-page .char-card[data-status="dead"]{--status-accent:#191919}
body.roster-page .char-card[data-status="dead"] img{filter:grayscale(.78) brightness(.72) contrast(1.08)!important}
body.roster-page .char-card[data-status="missing"] img{filter:saturate(.78) brightness(.88)!important}
body.roster-page .char-card .char-info{z-index:5!important;padding:1.3rem 1.15rem 1.05rem!important;background:linear-gradient(180deg,transparent,rgba(5,5,5,.38))!important;border-top:0!important}
body.roster-page .char-card .char-info::after{background:linear-gradient(90deg,var(--status-accent,#8b1a1a),transparent)!important;opacity:.72!important}
body.roster-page .char-card .char-name{font-size:1.12rem!important;letter-spacing:.02em!important;margin-bottom:.42rem!important}
body.roster-page .char-card .char-meta{display:flex!important;align-items:center!important;gap:.35rem!important;flex-wrap:wrap!important;font-size:.66rem!important}
body.roster-page .char-card .char-meta b{opacity:.35}
body.roster-page .char-heart{z-index:8!important}

body.roster-page .char-status-badge,
body.roster-page .modal-status-badge{
  display:inline-flex;align-items:center;gap:.34rem;width:max-content;max-width:100%;
  padding:.28rem .55rem;border:1px solid transparent;border-radius:999px;
  font:800 .62rem/1 'Cinzel',serif;letter-spacing:.08em;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);white-space:nowrap
}
body.roster-page .char-status-badge{position:absolute;top:12px;left:12px;z-index:8;box-shadow:0 8px 24px rgba(0,0,0,.3)}
body.roster-page .char-status-badge.status-active,
body.roster-page .modal-status-badge.status-active{color:#bdf3cf;border-color:rgba(79,180,116,.52);background:rgba(18,77,42,.78)}
body.roster-page .char-status-badge.status-missing,
body.roster-page .modal-status-badge.status-missing{color:#ffe4a1;border-color:rgba(218,173,74,.58);background:rgba(98,69,16,.82)}
body.roster-page .char-status-badge.status-dead,
body.roster-page .modal-status-badge.status-dead{color:#e4e4e4;border-color:rgba(255,255,255,.18);background:rgba(4,4,4,.92);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
body.roster-page .char-status-badge i,body.roster-page .modal-status-badge i{font-size:.68rem}
body.roster-page .modal-status-badge{padding:.38rem .68rem;font-size:.68rem}
body.roster-page #mBadgeRow{min-height:30px}
body.roster-page #mDeathReasonWrap{margin:.75rem 0 0;padding:.78rem .85rem;border-left:2px solid rgba(255,255,255,.16);background:rgba(0,0,0,.22);color:#aaa39a;font-size:.72rem;line-height:1.55}
body.roster-page #mDeathReasonWrap strong{color:#ded7cb;font-family:'Cinzel',serif;font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}

@media(max-width:980px){
  body.roster-page .roster-controls{grid-template-columns:1fr 1fr}
  body.roster-page .char-card{height:450px!important}
}
@media(max-width:620px){
  body.roster-page .roster-controls{grid-template-columns:1fr!important;border-radius:11px}
  body.roster-page .roster-status-summary{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.25rem;scrollbar-width:none}
  body.roster-page .roster-status-summary::-webkit-scrollbar{display:none}
  body.roster-page .roster-status-chip{flex:0 0 auto}
  body.roster-page .char-card{height:min(128vw,510px)!important}
}

/* Loading states use card-shaped skeletons so the roster never collapses into a blank spinner. */
body.roster-page .roster-skeleton-row{
  grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;width:100%;padding:.1rem 0 1rem
}
body.roster-page .roster-skeleton-row>span{
  min-height:420px;border:1px solid rgba(255,255,255,.06);border-radius:4px;overflow:hidden;
  background:linear-gradient(110deg,rgba(255,255,255,.025) 18%,rgba(255,255,255,.075) 32%,rgba(255,255,255,.025) 46%);
  background-size:230% 100%;animation:abRosterSkeleton 1.35s linear infinite
}
@keyframes abRosterSkeleton{to{background-position:-230% 0}}
@media(max-width:980px){body.roster-page .roster-skeleton-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){body.roster-page .roster-skeleton-row{grid-template-columns:1fr;gap:14px}body.roster-page .roster-skeleton-row>span:nth-child(n+3){display:none}}
@media(prefers-reduced-motion:reduce){body.roster-page .roster-skeleton-row>span{animation:none}}


/* Ash & Blood v5.62.1 — roster interaction polish */
/* The roster deliberately has no floating breadcrumb layer. Its hero contains
   interactive elements and must stay completely unobstructed. */
body.roster-page .ab-global-crumbs{display:none!important;pointer-events:none!important;visibility:hidden!important}
body.roster-page .page-header{position:relative!important;z-index:3!important;pointer-events:auto!important}
body.roster-page .page-header .hero-content,
body.roster-page .page-header .roster-rune-trigger{position:relative;z-index:4;pointer-events:auto!important}

/* Status owns the upper-right corner. */
body.roster-page .char-status-badge{
  top:12px!important;right:12px!important;left:auto!important;
  min-height:34px;padding:.42rem .68rem!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

/* Rebuild social actions as a tidy vertical action rail on the upper-left. */
body.roster-page .char-heart,
body.roster-page .ab-card-favorite{
  position:absolute!important;left:12px!important;right:auto!important;z-index:9!important;
  border:1px solid rgba(231,220,200,.16)!important;
  background:linear-gradient(180deg,rgba(15,16,18,.92),rgba(8,9,10,.88))!important;
  color:#b9b0a3!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.035)!important;
  backdrop-filter:blur(12px) saturate(1.1)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.1)!important;
  transition:transform .16s ease,border-color .16s ease,color .16s ease,background .16s ease!important;
}
body.roster-page .char-heart{
  top:12px!important;min-width:52px!important;width:auto!important;height:38px!important;
  padding:0 .72rem!important;border-radius:12px!important;gap:.42rem!important;
  font:800 .69rem/1 'Cinzel',serif!important;letter-spacing:.035em!important;
}
body.roster-page .char-heart i{font-size:1rem!important}
body.roster-page .char-heart:hover{
  transform:translateY(-1px)!important;border-color:rgba(205,74,66,.52)!important;
  color:#f4cbc7!important;background:linear-gradient(180deg,rgba(78,22,22,.9),rgba(36,12,12,.9))!important;
}
body.roster-page .char-heart.is-liked{
  color:#ffaaa4!important;border-color:rgba(220,75,67,.62)!important;
  background:linear-gradient(180deg,rgba(100,26,24,.92),rgba(48,13,13,.92))!important;
}
body.roster-page .ab-card-favorite{
  top:58px!important;width:38px!important;height:38px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;padding:0!important;
}
body.roster-page .ab-card-favorite i{font-size:.98rem!important}
body.roster-page .ab-card-favorite:hover{
  transform:translateY(-1px)!important;border-color:rgba(212,162,58,.48)!important;
  color:#ead08e!important;background:linear-gradient(180deg,rgba(70,54,20,.9),rgba(31,24,11,.9))!important;
}
body.roster-page .ab-card-favorite.active{
  color:#f1d47c!important;border-color:rgba(212,162,58,.58)!important;
  background:linear-gradient(180deg,rgba(86,62,18,.92),rgba(38,27,10,.92))!important;
  box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 18px rgba(212,162,58,.08),inset 0 1px rgba(255,255,255,.035)!important;
}
body.roster-page .char-heart:focus-visible,
body.roster-page .ab-card-favorite:focus-visible,
body.roster-page .char-status-badge:focus-visible{
  outline:2px solid rgba(232,195,112,.88)!important;outline-offset:3px!important;
}

/* Keep controls readable and separated on compact cards. */
@media(max-width:620px){
  body.roster-page .char-status-badge{top:10px!important;right:10px!important;font-size:.57rem!important;padding:.38rem .56rem!important}
  body.roster-page .char-heart{top:10px!important;left:10px!important;height:36px!important;min-width:48px!important;padding:0 .6rem!important}
  body.roster-page .ab-card-favorite{top:52px!important;left:10px!important;width:36px!important;height:36px!important}
}