/* Character dossiers — one cinematic MMORPG hero at a time.
   The selected hero's class, realm and stats change together on arrow clicks.
   No thumbnail row or character-preview tiles are displayed. */
.characters-section{padding:clamp(44px,5vw,70px) 0 clamp(57px,7vw,92px);background:
  radial-gradient(ellipse at 8% 18%,#fcf4df8c,transparent 32%),
  linear-gradient(180deg,#e6f2f9,#e9f1f3 70%,#e4eced)}
.character-stage{width:min(1250px,calc(100% - 10%));background:
 linear-gradient(135deg,#2b628f,#518ab3 39%,#3777a5 84%,#285e83);border:1px solid #dcb97a}
.character-stage-inner{padding:24px clamp(32px,3.5vw,54px) 30px;
 background:
 radial-gradient(circle at 30% 38%,#b6d8e7a2,transparent 49%),
 radial-gradient(circle at 90% 90%,#1c4764a8,transparent 54%),
 linear-gradient(135deg,#2c6794cc,#4c8cbb7d),
 url('/skyline.svg') center / cover no-repeat}
.character-stage-heading h2{font-size:clamp(24px,2.9vw,39px);letter-spacing:.05em}
.character-stage-heading{gap:20px}
.character-stage-heading>span{font-size:23px}
.character-stage-intro{color:#e3f2fa;letter-spacing:.16em;margin:6px auto 19px;font-size:10px}
.character-stage-inner>.character-feature{
  --profile-accent:#ab91dc;--profile-ink:#293d53;--profile-faint:#ece6ff;
  display:grid;grid-template-columns:minmax(0,50%) minmax(0,50%);
  gap:clamp(15px,2.3vw,35px);min-height:clamp(510px,42vw,590px);align-items:stretch;
  padding:0 10px;position:relative
}
.character-stage-inner .character-feature-art{
  position:relative;width:100%;height:auto;min-height:clamp(510px,42vw,590px);
  border:3px solid #ead5a8;outline:1px solid #7eb2d2;
  background:radial-gradient(ellipse at 50% 33%,#9abfe0,#2e5d8a);
  box-shadow:inset 0 0 0 1px #e2faff66,0 0 0 2px #204865,0 7px 21px #0d2741a8;
}
.character-feature-art::before{
 content:"";position:absolute;z-index:2;inset:7px;border:1px solid #ffead575;
 pointer-events:none
}
.character-feature-art::after{background:linear-gradient(0deg,#0e2f4eaf,transparent 23%,transparent 80%,#0e2b4a44)}
.character-feature-art img{object-fit:cover;object-position:50% 32%;
  filter:saturate(1.07) contrast(1.045);transform:scale(1.007)}
.character-art-glow{z-index:1;inset:0;opacity:.55;mix-blend-mode:screen}
.character-aura{
 position:absolute;z-index:2;pointer-events:none;inset:0;
 background:radial-gradient(ellipse at 53% 51%,transparent 23%,#142a4133 83%),
 linear-gradient(90deg,#d0ebfc23,transparent 28%,transparent 83%,#c0dff830)
}
.character-art-number{
 padding:7px 10px;background:#173956d6;border:1px solid #dbc59d88;
 font-size:12px;letter-spacing:.12em;top:18px;left:17px
}
.character-art-caption{bottom:16px;left:17px;background:#0f3556d4;
 padding:6px 10px;letter-spacing:.08em;color:#f8dfaa;z-index:6}
.character-portrait-title{
 position:absolute;bottom:46px;right:18px;z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:3px;
 text-shadow:0 2px 7px #0a1e32,0 0 12px #0b233e
}
.character-portrait-title span{font:700 10px var(--sans);letter-spacing:.28em;color:#f5dcad}
.character-portrait-title strong{
 font:700 clamp(22px,2.8vw,38px)/1.1 var(--serif);letter-spacing:.05em;color:#fff9e6
}
.character-feature-details{
 min-width:0;align-self:stretch;
 padding:clamp(18px,2vw,29px) clamp(15px,1.8vw,27px);
 background:
 radial-gradient(circle at 88% 20%,#fffdf9df,transparent 35%),
 repeating-linear-gradient(140deg,transparent 0 120px,#bca4841a 121px,transparent 122px),
 linear-gradient(125deg,#f8f3e7f7,#e5ebf0f1);
 border:1px solid #edd8ad;outline:1px solid #1a537b;
 box-shadow:inset 0 0 0 5px #ffffff55,inset 0 0 0 6px #c8ac775e,0 7px 19px #1739548f;
 text-shadow:none;color:#354554;position:relative
}
.character-feature-details::before{
 content:"";position:absolute;pointer-events:none;inset:12px;border:1px solid #bd9d6c55
}
.character-profile-header{display:flex;justify-content:space-between;gap:10px;
 font:700 clamp(7px,.83vw,10px)/1.35 var(--serif);
 letter-spacing:.12em;color:#9b7951;border-bottom:1px solid #c9b28c;padding-bottom:10px;margin-bottom:15px
}
.character-profile-header span:last-child{white-space:nowrap;color:#866a48}
.character-feature-kicker{font:700 11px var(--serif);color:#8e7049;letter-spacing:.12em;margin-bottom:10px}
.character-feature-title-row{gap:11px;border-bottom:1px solid #c8b292;padding-bottom:16px}
.character-feature-title-row h3{font-size:clamp(23px,2.3vw,34px);color:#2e4255}
.character-feature-title-row p{color:#647684;font-size:11px}
.character-feature .character-class-label{color:#9b7245;font-size:10px}
.character-role-emblem{
 width:clamp(49px,5.1vw,62px);height:clamp(49px,5.1vw,62px);
 border-color:#f7dea1;box-shadow:0 0 0 2px #926c48b9,0 3px 8px #765f4877
}
.character-class-badge{
 background:linear-gradient(#a8834e,#74512d);color:#fff8d8;border:1px solid #edcf94;
 font:700 10px var(--serif);letter-spacing:.08em
}
.character-description{color:#596775;font-size:clamp(11px,.96vw,13px);line-height:1.65;margin:13px 0}
.character-tags{margin-bottom:16px}
.character-tags span{
 background:#ede3d3;border:1px solid #c7b08d;color:#6f5c44;font-size:9px;padding:6px 10px
}
.character-feature-heading{color:#846341;border-color:#c8b393;margin-top:14px;margin-bottom:10px;font-size:11px}
.character-feature-heading small{color:#987e63}
.character-quick-stats{gap:8px;margin-bottom:17px}
.character-quick-stats>div{border:1px solid #c7b28f;background:linear-gradient(#fcf8f1,#e3e9ea);padding:10px 6px}
.character-quick-stats span{color:#8b7760;font-size:8px}
.character-quick-stats strong{color:#28455c;font-size:clamp(14px,1.5vw,20px)}
.character-attributes{gap:12px 15px;margin-bottom:19px}
.character-attribute{grid-template-columns:minmax(57px,1fr) minmax(55px,1.7fr) 22px}
.character-attribute>span:first-child{color:#556574;font-size:9px}
.character-meter{background:#d9d4c9;border-color:#b6aa9a;height:7px}
.character-meter i{background:linear-gradient(90deg,#9db9cd,#518cb9 65%,#d9b97a)}
.character-attribute b{color:#7d694f;font-size:10px}
.character-feature-skills{gap:8px}
.character-skill{padding:7px 4px;border:1px solid #c9b39491;background:#ffffff61;gap:7px}
.character-skill-icon{width:clamp(30px,3.25vw,41px);height:clamp(30px,3.25vw,41px)}
.character-skill-icon svg{width:74%;height:74%}
.character-skill span:last-child{color:#76573c;font:700 clamp(8px,.84vw,11px)/1.2 var(--serif)}
.character-feature[data-affinity="ember-knight"]{--profile-accent:#e88d61}
.character-feature[data-affinity="lion-guardian"]{--profile-accent:#f1c877}
.character-feature[data-affinity="azure-sorceress"]{--profile-accent:#b691ee}
.character-feature[data-affinity="silver-elf"]{--profile-accent:#89dbf0}
.character-feature[data-affinity="ember-knight"] .character-feature-art{border-color:#ffc28e}
.character-feature[data-affinity="lion-guardian"] .character-feature-art{border-color:#f2d48d}
.character-feature[data-affinity="azure-sorceress"] .character-feature-art{border-color:#d1abf9}
.character-feature[data-affinity="silver-elf"] .character-feature-art{border-color:#c0eefa}
.character-feature[data-affinity="ember-knight"] .character-meter i{background:linear-gradient(90deg,#e3af8a,#c05d46)}
.character-feature[data-affinity="lion-guardian"] .character-meter i{background:linear-gradient(90deg,#d9c69b,#b99348)}
.character-feature[data-affinity="azure-sorceress"] .character-meter i{background:linear-gradient(90deg,#c0b4da,#825bbb)}
.character-feature[data-affinity="silver-elf"] .character-meter i{background:linear-gradient(90deg,#b7dfdf,#61afc7)}
.character-arrow{top:56%;width:47px;height:47px;background:linear-gradient(#1a4c70,#0e2d4b);border-color:#f3d59f}
.character-pagination{margin-top:24px}
.character-concept-note{font-size:11px}
@media(max-width:1060px){
 .character-stage{width:calc(100% - 10%)}
 .character-stage-inner{padding:20px 30px 24px}
 .character-stage-inner>.character-feature{grid-template-columns:minmax(0,44%) minmax(0,56%);gap:16px;min-height:500px}
 .character-stage-inner .character-feature-art{min-height:500px;height:auto}
 .character-feature-details{padding:18px 14px}
 .character-profile-header{margin-bottom:11px}
 .character-feature-title-row h3{font-size:25px}
 .character-description{font-size:11px}
 .character-feature-skills{gap:4px}
 .character-skill{gap:5px;padding:5px 3px}
 .character-skill-icon{width:30px;height:30px}
 .character-skill span:last-child{font-size:8px}
 .character-arrow{top:52%}
}
@media(max-width:760px){
 .character-stage{width:calc(100% - 22px)}
 .character-stage-inner{padding:17px 18px 20px}
 .character-stage-inner>.character-feature{grid-template-columns:1fr;gap:16px;min-height:0;padding:0 10px}
 .character-stage-inner .character-feature-art{height:clamp(340px,85vw,550px);min-height:0;max-width:560px;margin:auto}
 .character-feature-art img{object-position:center 31%}
 .character-feature-details{padding:22px 20px}
 .character-portrait-title strong{font-size:27px}
 .character-feature-title-row h3{font-size:28px}
 .character-description{font-size:12px}
 .character-attribute{grid-template-columns:minmax(70px,1fr) minmax(55px,1.7fr) 23px}
 .character-feature-skills{gap:8px}
 .character-skill{padding:8px 5px}
 .character-skill span:last-child{font-size:9px}
 .character-arrow{top:30%;width:38px;height:38px}
 .character-prev{left:-13px}.character-next{right:-13px}
}
@media(max-width:440px){
 .character-stage-inner{padding:17px 12px 20px}
 .character-stage-inner>.character-feature{padding:0 5px}
 .character-stage-inner .character-feature-art{height:355px}
 .character-portrait-title strong{font-size:22px}
 .character-feature-details{padding:19px 13px}
 .character-feature-title-row h3{font-size:24px}
 .character-feature-title-row .character-identity{gap:10px}
 .character-class-badge{padding:5px;font-size:8px}
 .character-attributes{gap:9px 7px}
 .character-attribute{grid-template-columns:minmax(53px,1fr) minmax(25px,1.2fr) 18px;gap:4px}
 .character-attribute>span:first-child{font-size:8px}
 .character-arrow{top:27%;width:33px;height:33px}
 .character-prev{left:-7px}.character-next{right:-7px}
 .character-feature-skills{grid-template-columns:1fr 1fr}
 .character-skill:nth-child(3){grid-column:1/-1}
 .character-skill{padding:5px 6px}
 .character-skill span:last-child{font-size:10px}
}

/* November 9: declutter hero card and make signature skills legible. */
.character-stage-heading{margin-bottom:clamp(20px,2.25vw,30px)}
.character-skill{
  background:linear-gradient(135deg,#fcfcf9f2,#e3edf4ee);
  border:1px solid #bdaf94;
  border-radius:3px;
  min-height:56px;
  gap:8px;
  padding:6px 8px;
  box-shadow:inset 0 1px 0 #ffffff,0 2px 5px #37557313
}
.character-skill-icon{
  flex:0 0 auto;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:10px;
  padding:3px;
  border:2px solid #f5d89e;
  background:linear-gradient(140deg,#a1d7fb,#3273ab 62%,#203f79);
  box-shadow:inset 0 0 0 1px #effcff90,0 1px 3px #213c4c6b;
}
.character-skill-icon svg{
  display:block;
  width:36px;
  height:36px;
  overflow:visible;
  filter:none;
  shape-rendering:geometricPrecision;
}
.character-skill span:last-child{
  color:#614832;
  line-height:1.22;
  font-size:clamp(9px,.91vw,12px);
  letter-spacing:0;
  font-weight:700;
  overflow-wrap:anywhere;
  text-shadow:none;
}
.character-feature[data-affinity="seraph"] .character-skill-icon{background:linear-gradient(145deg,#bdaef7,#6956ab 64%,#332a68)}
.character-feature[data-affinity="ember-knight"] .character-skill-icon{background:linear-gradient(145deg,#ffcf8c,#cc7244 64%,#702e2c)}
.character-feature[data-affinity="lion-guardian"] .character-skill-icon{background:linear-gradient(145deg,#fff0b4,#b28a40 64%,#665033)}
.character-feature[data-affinity="azure-sorceress"] .character-skill-icon{background:linear-gradient(145deg,#b7a5ff,#6455c1 64%,#2f377a)}
.character-feature[data-affinity="silver-elf"] .character-skill-icon{background:linear-gradient(145deg,#c5fbf9,#489faf 64%,#285e80)}
.character-level{
  display:inline-block;
  font-size:11px;
  color:#926e40;
  font-weight:800;
  letter-spacing:.06em
}
@media(max-width:1060px){
  .character-skill{padding:5px;gap:5px;min-height:49px}
  .character-skill-icon{width:35px;height:35px;padding:2px;border-width:1px}
  .character-skill-icon svg{width:30px;height:30px}
  .character-skill span:last-child{font-size:8.5px}
}
@media(max-width:760px){
  .character-skill{min-height:56px;padding:6px;gap:8px}
  .character-skill-icon{width:42px;height:42px;padding:3px}
  .character-skill-icon svg{width:34px;height:34px}
  .character-skill span:last-child{font-size:10px}
}
@media(max-width:440px){
  .character-stage-heading{margin-bottom:16px}
  .character-skill{min-height:50px}
  .character-skill-icon{width:39px;height:39px}
  .character-skill-icon svg{width:32px;height:32px}
  .character-skill span:last-child{font-size:10px}
}