/* Seven classes: rail of emblems grouped by race, the stage with an astrolabe, and the class card. */
.heroes-section { --class-c:#dab164; position:relative; overflow:hidden; margin-block:clamp(40px,4vw,100px) 0; padding-block:var(--section-y);
  border-block:1px solid var(--line); background:radial-gradient(ellipse 55% 60% at 72% 50%,color-mix(in srgb,var(--class-c) 16%,transparent),transparent 70%),var(--ink-2);
  transition:--class-c .8s linear; }
@property --class-c { syntax:'<color>'; inherits:true; initial-value:#dab164; }
.heroes-section[data-character="paladin"] { --class-c:#e8cf8f; }
.heroes-section[data-character="rogue"] { --class-c:#5d8fd0; }
.heroes-section[data-character="sorceress"] { --class-c:#a671e6; }
.heroes-section[data-character="archer"] { --class-c:#5bb39a; }
.heroes-section[data-character="mystic"] { --class-c:#e0924f; }
.heroes-section[data-character="cannoneer"] { --class-c:#c4a35f; }

.heroes-inner { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); grid-template-areas:"head stage" "rail stage" "copy stage"; grid-template-rows:auto auto 1fr; column-gap:clamp(32px,5vw,140px); row-gap:clamp(22px,2vw,44px); align-items:start; }
.heroes-head { grid-area:head; }
.class-rail { grid-area:rail; display:flex; flex-wrap:wrap; gap:clamp(8px,.7vw,26px); }
.hero-class-copy { grid-area:copy; }
.character-stage { grid-area:stage; align-self:center; }

/* Rail: medallions with the собственные символы классов. */
.race-group { display:grid; gap:8px; }
.race-label { font:600 var(--fs-micro)/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--faint); padding-left:4px; border-left:1px solid var(--line-gold); }
.race-group>div { display:flex; gap:4px; }
.class-rail [role="tab"] { position:relative; display:grid; justify-items:center; align-content:start; gap:6px; width:clamp(66px,1.5vw + 52px,112px); min-height:44px; padding:8px 4px 10px; border-radius:2px; color:var(--muted); font:600 clamp(13px,.25vw + 11px,17px)/1.1 var(--display); letter-spacing:.03em; transition:color var(--t-fast),background-color var(--t-fast); }
.class-rail .class-emblem { width:clamp(46px,1.4vw + 30px,80px); height:clamp(54px,1.4vw + 34px,88px); border:1px solid color-mix(in srgb,var(--class-c) 45%,transparent); border-radius:50%; filter:grayscale(.55) brightness(.8); transition:filter var(--t-mid),transform var(--t-mid) var(--ease-spring); }
.class-rail [role="tab"]:hover { color:var(--text); background:#ffffff06; }
.class-rail [role="tab"]:hover .class-emblem { filter:none; transform:translateY(-3px); }
.class-rail [aria-selected="true"] { color:var(--gold-bright); background:linear-gradient(180deg,color-mix(in srgb,var(--class-c) 22%,transparent),transparent); }
.class-rail [aria-selected="true"] .class-emblem { filter:drop-shadow(0 0 14px color-mix(in srgb,var(--class-c) 70%,transparent)); transform:scale(1.08); }
/* Selected: the star under the name, not only colour. */
.class-rail [role="tab"]::after { content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; translate:-50% 0; background:var(--gold); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; scale:0; transition:scale var(--t-mid) var(--ease-spring); }
.class-rail [aria-selected="true"]::after { scale:1; }

/* Class card. */
.hero-class-copy { display:grid; justify-items:start; gap:clamp(8px,.8vw,16px); max-width:40em; }
.hero-class-copy h3 { font-size:clamp(40px,1.8vw + 26px,84px); line-height:1; font-weight:400; }
.class-role { font:italic 500 var(--fs-h4)/1.2 var(--serif); color:var(--class-c); filter:brightness(1.25); }
#class-description { color:var(--text-soft); }
.class-traits { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; padding:0; list-style:none; color:var(--text-soft); font-size:var(--fs-small); }
.class-traits li { display:flex; align-items:center; gap:.5em; }
.class-traits li::before { content:''; width:.8em; height:.8em; background:var(--gold); -webkit-mask:var(--star) center/contain no-repeat; mask:var(--star) center/contain no-repeat; }
.class-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:8px; }
.class-switch { display:flex; align-items:center; gap:10px; }
.class-count { font:500 var(--fs-small)/1 var(--sans); font-variant-numeric:tabular-nums; color:var(--muted); min-width:4.4em; text-align:center; }
.class-count b { font-weight:600; color:var(--gold-bright); }
.heroes-note { font-size:var(--fs-small); color:var(--muted); max-width:36em; }

/* Сцена класса: портрет, аура и астролябия. */
.character-stage { position:relative; isolation:isolate; aspect-ratio:1122 / 1300; max-height:min(86svh,1150px); width:100%; justify-self:center; touch-action:pan-y; }
.character-glow { position:absolute; inset:8% 0; z-index:-2; border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--class-c) 38%,transparent),transparent); filter:blur(30px); animation:breathe 7s ease-in-out infinite; }
.astrolabe { position:absolute; left:50%; top:46%; z-index:-1; width:min(118%,calc(86svh * 1.02)); translate:-50% -50%; overflow:visible; fill:none; stroke:var(--gold); }
.astrolabe circle { stroke-width:.4; opacity:.3; }
.astrolabe-dash { stroke-dasharray:1 3; opacity:.4 !important; animation:spin 160s linear infinite; transform-origin:100px 100px; }
.astrolabe-ring { transform-origin:100px 100px; rotate:var(--turn,0deg); transition:rotate .9s var(--ease-in-out); }
.astrolabe-marks { stroke-width:1.2; opacity:.7; stroke-linecap:round; }
.astrolabe-pointer { fill:var(--class-c); stroke:var(--gold-2); stroke-width:.6; filter:drop-shadow(0 0 4px var(--class-c)); }
.portrait-frame { position:absolute; inset:0; display:grid; place-items:end center; }
.portrait-frame>img { grid-area:1 / 1; width:auto; max-width:100%; height:100%; object-fit:contain; object-position:bottom;
  -webkit-mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(0deg,transparent,#000 20%,#000 92%,transparent); -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent) intersect,linear-gradient(0deg,transparent,#000 20%,#000 92%,transparent); }
.class-emblem .ui-icon { width:60%; height:60%; }
.character-caption { position:absolute; right:0; bottom:7%; text-align:right; display:grid; gap:6px; }
.character-caption>span { font:600 var(--fs-micro)/1 var(--sans); letter-spacing:.2em; color:var(--gold); }
.character-caption strong { font:400 clamp(30px,1.4vw + 18px,64px)/1 var(--display); letter-spacing:.12em; color:#e9dff0; text-shadow:0 2px 20px #000; }
.character-caption small { font:600 var(--fs-micro)/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* Phones and tablets: heading, stage, rail in thumb reach, then the card. */
@media (max-width:1099.98px) {
  .heroes-inner { grid-template-columns:1fr; grid-template-areas:"head" "stage" "rail" "copy"; grid-template-rows:none; }
  .character-stage { max-height:none; width:min(100%,560px); aspect-ratio:auto; height:min(118vw,calc(100svh - 260px),720px); min-height:300px; }
  .class-rail { justify-content:center; }
}
@media (max-width:560px) {
  .class-rail { display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; }
  .race-group>div { justify-content:flex-start; }
  .class-rail [role="tab"] { width:auto; flex:1; }
  .character-caption { right:4px; }
}
@media (prefers-reduced-motion:reduce) { .astrolabe-ring { transition:none; } }