/* ═══════════════════════════════════════════════
   CARDS.CSS — Attack on Titan Theme
   ═══════════════════════════════════════════════ */

.cards-page{
  min-height:100vh; background:transparent; padding:84px 20px 20px;
  position:relative; overflow-x:hidden;
}
.cards-page::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%, rgba(200,160,80,.07) 0%, transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(204,34,0,.06) 0%, transparent 60%);
}

.cards-header{position:relative; z-index:2; text-align:center; margin-bottom:32px;}
.cards-eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.35em; color:rgba(200,160,80,.8);
  text-transform:uppercase; margin-bottom:12px; font-family:'JetBrains Mono',monospace;
}
.cards-title{
  font-family:'Cinzel',serif;
  font-size:clamp(32px,9vw,56px); font-weight:900; letter-spacing:.14em; color:#e8ddc8;
  text-shadow:0 0 30px rgba(200,160,80,.5), 0 0 70px rgba(200,80,0,.2);
  margin-bottom:14px;
}
.cards-subtitle{
  font-size:14px; letter-spacing:.03em; color:rgba(180,160,120,.8);
  max-width:34ch; margin:0 auto; line-height:1.7;
}

.cards-controls{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  gap:12px; margin-bottom:26px; flex-wrap:wrap;
}
.cards-search{
  background:rgba(4,4,8,.92); border:1px solid rgba(200,160,80,.25);
  color:#e8ddc8; padding:13px 18px; border-radius:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
  outline:none; min-width:220px; flex:1;
}
.cards-search::placeholder{color:rgba(200,160,80,.35);}
.cards-search:focus{border-color:rgba(200,160,80,.65); box-shadow:0 0 0 3px rgba(200,160,80,.12);}
.cards-count{
  font-size:12px; font-weight:700; color:rgba(200,160,80,.6);
  white-space:nowrap; font-family:'JetBrains Mono',monospace; letter-spacing:.04em;
}

.cards-grid{
  position:relative; z-index:2; display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:14px;
  max-width:1200px; margin:0 auto;
}

.cards-loading{
  grid-column:1/-1; text-align:center; padding:60px 20px;
  color:rgba(200,160,80,.7); font-size:14px; font-weight:600; letter-spacing:.04em;
}
.cards-loading::before{
  content:''; display:block; width:32px; height:32px; margin:0 auto 16px;
  border-radius:50%; border:2px solid rgba(200,160,80,.2); border-top-color:rgba(200,160,80,.85);
  animation:cards-spin 0.8s linear infinite;
}
@keyframes cards-spin{to{transform:rotate(360deg);}}

/* ── Character Cards ── */
.char-card{
  position:relative;
  background:linear-gradient(160deg, rgba(10,11,16,.97), rgba(4,4,8,.99));
  border:1px solid rgba(200,160,80,.2); border-radius:10px; overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s; cursor:pointer;
}
.char-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 36px -8px rgba(200,160,80,.25);
  border-color:rgba(200,160,80,.45);
}
.char-card:active{transform:scale(.97);}

/* Titan / shifter tier variant */
.char-card.tier-titan{border-color:rgba(180,40,20,.3);}
.char-card.tier-titan:hover{
  border-color:rgba(200,60,20,.6);
  box-shadow:0 10px 36px -8px rgba(200,40,20,.35);
}

.char-img-wrap{
  position:relative; width:100%; padding-top:130%; overflow:hidden;
  background:linear-gradient(180deg,#0a0808,#040404);
}
.char-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  filter:saturate(1.05) brightness(.9) contrast(1.05);
}
.char-img-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:900; letter-spacing:.04em; color:rgba(200,160,80,.4);
  background:radial-gradient(ellipse at center, rgba(40,25,10,.5),#040404);
  text-align:center; padding:10px; font-family:'Cinzel',serif;
}
.char-img-wrap::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:55%;
  background:linear-gradient(transparent,rgba(4,4,8,.97)); pointer-events:none;
}

.char-tier{
  position:absolute; top:9px; right:9px; z-index:3;
  background:rgba(2,2,4,.85); border:1px solid rgba(200,160,80,.4); border-radius:5px;
  padding:3px 8px; font-size:9px; font-weight:700; color:rgba(200,160,80,.95);
  letter-spacing:.08em; backdrop-filter:blur(6px);
  font-family:'JetBrains Mono',monospace; text-transform:uppercase;
}
.char-tier.titan-badge{
  border-color:rgba(180,40,20,.5); color:rgba(255,120,100,.9);
  background:rgba(20,4,2,.85);
}

.char-body{position:relative; z-index:2; padding:12px 13px 15px;}
.char-name{
  font-size:14px; font-weight:700; color:#e8ddc8; line-height:1.25;
  margin-bottom:3px; font-family:'Cinzel',serif; letter-spacing:.03em;
}
.char-role{
  font-size:10.5px; font-weight:700; letter-spacing:.09em;
  color:rgba(200,160,80,.75); text-transform:uppercase; font-family:'JetBrains Mono',monospace;
}
.char-role.titan-role{color:rgba(200,60,30,.85);}

/* ── Status badge ── */
.char-status{
  position:absolute; top:9px; left:9px; z-index:3;
  width:8px; height:8px; border-radius:50%;
  border:1px solid rgba(0,0,0,.5);
}
.char-status.alive{background:#4a9a60; box-shadow:0 0 6px rgba(74,154,96,.6);}
.char-status.deceased{background:#9a3030; box-shadow:0 0 6px rgba(154,48,48,.5);}
.char-status.unknown{background:#7a6a40;}

/* ───── detail modal ───── */
#card-modal{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.94); backdrop-filter:blur(12px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
#card-modal.open{opacity:1; pointer-events:auto;}

.modal-inner{
  position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:linear-gradient(160deg, rgba(10,10,14,.99), rgba(4,4,8,.99));
  border:1px solid rgba(200,160,80,.35); border-radius:14px;
}

.modal-hero{
  position:relative; width:100%; height:240px; overflow:hidden; border-radius:14px 14px 0 0;
  background:#060408;
}
.modal-hero img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block;}
.modal-hero::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:70%;
  background:linear-gradient(transparent,rgba(6,4,8,.96));
}
.modal-close{
  position:absolute; top:12px; right:12px; z-index:10;
  width:34px; height:34px; border-radius:50%;
  background:rgba(6,4,8,.85); border:1px solid rgba(200,160,80,.3);
  color:rgba(200,160,80,.8); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px);
}

.modal-body{padding:20px 22px 28px;}
.modal-body h2{
  font-family:'Cinzel',serif; font-size:22px; font-weight:900;
  color:#e8ddc8; margin-bottom:6px; letter-spacing:.05em;
  text-shadow:0 0 20px rgba(200,160,80,.25);
}
.modal-body .role{
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(200,160,80,.75); margin-bottom:16px;
  font-family:'JetBrains Mono',monospace;
}
.modal-body .role.titan-role{color:rgba(200,60,30,.85);}
.modal-body p{
  font-size:14px; color:rgba(180,165,140,.9); line-height:1.75;
  margin-bottom:12px;
}

/* Modal species / groups chips */
.modal-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.chip{
  padding:4px 10px; border-radius:4px; font-size:10px; font-weight:700;
  letter-spacing:.06em; font-family:'JetBrains Mono',monospace;
  border:1px solid rgba(200,160,80,.28);
  background:rgba(200,160,80,.08); color:rgba(200,160,80,.85);
}
.chip.red{
  border-color:rgba(180,40,20,.4); background:rgba(180,40,20,.1);
  color:rgba(220,100,80,.9);
}

/* ── Titan Cards section ── */
.cards-section-divider{
  grid-column:1/-1; display:flex; align-items:center; gap:14px;
  margin:12px 0 6px; color:rgba(200,160,80,.5);
  font-size:10px; font-weight:700; letter-spacing:.18em;
  font-family:'JetBrains Mono',monospace; text-transform:uppercase;
}
.cards-section-divider::before,.cards-section-divider::after{
  content:''; flex:1; height:1px; background:rgba(200,160,80,.15);
}

/* Footer spacing for cards page */
.cards-pf{margin-top:40px;}