/* Dragonium: obsidian armor, copper edges and restrained molten light. */
#classes { --dragon-ember:#f1843c; --dragon-copper:#a44e28; --dragon-ivory:#f6e6cf; }
#classes .section-header .eyebrow { color:#e89561; font-weight:700; letter-spacing:.28em; }
#classes .section-header h2 { font-family:'Teko','Impact',sans-serif; font-weight:500; font-size:clamp(2.6rem,5.3vw,4.7rem); letter-spacing:.055em; line-height:1.03; text-shadow:0 3px 20px #0009; }
#classes .section-header h2 em { color:#f39b59; }
#classes .section-header p { font-size:1rem; letter-spacing:.04em; color:#bfae9e; }
#classes .panel-stage { background:#0d0a09; border-color:#84452380; box-shadow:inset 0 1px #f0ae6526,0 15px 50px #0006; border-radius:0 8px 8px 0; }
#classes .ic-panel::before {
 opacity:1;
 background:
 linear-gradient(90deg,rgba(10,8,8,.97) 0%,rgba(10,8,8,.88) 31%,rgba(10,8,8,.48) 58%,rgba(10,8,8,.49)),
 linear-gradient(0deg,rgba(7,7,8,.86),rgba(11,8,8,.18) 40%,rgba(10,8,8,.35)),
 url('../images/class/dragonium-portal.webp') 68% center / cover no-repeat;
}
#classes .tab-rail { border-color:#84452380; border-radius:8px 0 0 8px; background:linear-gradient(110deg,#211512,#0d0a09 85%); }
#classes .tab-btn { border-left-width:3px; }
#classes .tab-btn::before { background:linear-gradient(90deg,#e15a2026,transparent); }
#classes .tab-btn.is-active { border-left-color:#f4944e; background:linear-gradient(90deg,#b34d292e,transparent); box-shadow:inset 0 1px #f5974222,inset 0 -1px #f597421a; }
#classes .tab-btn .btn-name { font-family:'Teko','Impact',sans-serif; font-size:1.1rem; font-weight:500; letter-spacing:.085em; color:#c9b4a5; line-height:1.05; }
#classes .tab-btn.is-active .btn-name { color:#ffe2bf; }
#classes .tab-btn .btn-role { color:#a97a5a; font-size:.62rem; font-weight:600; }
#classes .tab-btn.is-active .btn-role { color:#ee9b61; }
#classes .tab-btn .btn-icon { border-color:#a9673d66; background:linear-gradient(145deg,#49302266,#0d0a09); border-radius:9px 3px 9px 3px; }
#classes .tab-btn.is-active .btn-icon { border-color:#ef9d55aa; box-shadow:0 0 14px #fa631b26,inset 0 0 12px #b64c2426; }
#classes .ic-box-detail h2 { font-family:'Teko','Impact',sans-serif; font-weight:500; font-size:clamp(2.8rem,4.8vw,4.4rem); letter-spacing:.045em; line-height:.98; color:#fae4cc; text-shadow:0 2px 3px #000,0 0 25px #d4571726; margin-bottom:20px; }
#classes .class-num-badge { font-family:'Rajdhani',sans-serif; color:#f0a067; border-color:#b660354d; background:#1e100acc; font-weight:600; font-size:.67rem; border-radius:0; }
#classes .class-role-tag { color:#bc9c85; font-weight:600; letter-spacing:.12em; }
#classes .class-desc { color:#d5c3b4; font-weight:500; text-shadow:0 1px 4px #000; }
#classes .gold-divider span { width:42px; background:linear-gradient(90deg,#f58f43,transparent); }
#classes .gold-divider i { background:#f69b56; box-shadow:0 0 10px #f76d2b99; }
#classes .ic-stat-label, #classes .ic-stat-val { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:.72rem; }
#classes .ic-stat-val { color:#f6ad72; }
#classes .ic-stat-bar { background:linear-gradient(90deg,#8c351d,#ed7638,#ffd497); }
#classes .ic-video-wrap { border-color:#9b542d99; border-radius:2px; box-shadow:0 8px 25px #0008,inset 0 1px #ffc68a33; }
#classes .ic-video-wrap::before, #classes .video-br-corner { border-color:#f0a065; }
#classes .motion-toggle { border-color:#8b4c2c; color:#eabc97; background:linear-gradient(#251610,#100d0b); border-radius:3px; letter-spacing:.05em; }
@media(max-width:860px) {
 #classes .tab-rail { border-radius:8px 8px 0 0; }
 #classes .panel-stage { border-radius:0 0 8px 8px; }
 #classes .ic-panel::before {
 background:linear-gradient(0deg,#0d0a09 12%,#0d0a09dd 38%,#0d0a0955 75%,#0d0a0970),url('../images/class/dragonium-portal.webp') 68% top / auto 470px no-repeat;
 }
 #classes .ic-box-detail h2 { font-size:3rem; }
}
@media(max-width:540px) {
 #classes .tab-btn .btn-name { font-size:.95rem; }
 #classes .section-header .eyebrow { font-size:.68rem; letter-spacing:.2em; }
 #classes .class-role-tag { font-size:.58rem; }
}

/* Keep the alignment anchor while hiding the platform and its contact shadow. */
#classes .stone-dais { visibility:hidden; }

/* Lower characters onto the foreground without changing their scale. */
#classes .ic-panel .class-hero-video { translate:0 calc(var(--foot-shift,0px) + 30px); }
@media(max-width:860px) {
 #classes .ic-panel .class-hero-video { translate:0 calc(var(--foot-shift,0px) + 18px); }
}

/* Dragonium class titles: heated metal with a restrained flame flicker. */
#classes .ic-box-detail h2 {
 position:relative; width:fit-content; max-width:100%;
 padding:5px 3px 7px 0;
 color:#ffdca5;
 background:linear-gradient(180deg,#fff3d4 8%,#ffe3ac 36%,#ffb65b 61%,#ee672d 84%,#a93418 100%);
 -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
 -webkit-text-stroke:.35px #ffc98955;
 filter:drop-shadow(0 2px 1px #210703) drop-shadow(0 -2px 7px #ff6c214f);
 text-shadow:0 0 17px #f15a1c30;
 animation:dragonium-title-fire 3.6s ease-in-out infinite alternate;
}
#classes .ic-box-detail h2::after {
 content:''; position:absolute; left:0; bottom:0; width:min(100%,180px); height:2px;
 background:linear-gradient(90deg,#ffdd98,#ff873e 38%,#e2441b55 75%,transparent);
 box-shadow:0 -3px 12px #ff6d314d;
}
@keyframes dragonium-title-fire {
 0%,100% { filter:drop-shadow(0 2px 1px #210703) drop-shadow(0 -2px 6px #ff6c214f); }
 22% { filter:drop-shadow(0 2px 1px #210703) drop-shadow(0 -4px 9px #ff74276b); }
 47% { filter:drop-shadow(0 2px 1px #210703) drop-shadow(0 -2px 5px #ed451c55); }
 71% { filter:drop-shadow(0 2px 1px #210703) drop-shadow(0 -5px 11px #ff8d326b); }
}
@media(prefers-reduced-motion:reduce) {
 #classes .ic-box-detail h2 { animation:none; }
}

/* Equipment and difficulty from the supplied class references. */
#classes .class-loadout {
 display:grid; grid-template-columns:minmax(0,1fr) 112px; align-items:center; gap:8px;
 margin:0 0 20px; padding:13px 0; border-top:1px solid #b96a3533; border-bottom:1px solid #b96a3533;
 background:linear-gradient(90deg,#1e110c55,transparent);
}
#classes .loadout-details { margin:0; font-size:.86rem; line-height:1.4; }
#classes .loadout-details > div { display:grid; grid-template-columns:61px minmax(0,1fr); gap:5px; margin:5px 0; }
#classes .loadout-details dt { color:#bd9275; font-weight:500; }
#classes .loadout-details dd { margin:0; color:#f1d9c2; font-weight:500; overflow-wrap:anywhere; }
#classes .difficulty-stars { letter-spacing:1px; font-size:1rem; line-height:1; }
#classes .difficulty-stars b { color:#ffbd59; font-weight:400; text-shadow:0 0 7px #f6732144; }
#classes .difficulty-stars i { color:#8a7265; font-style:normal; }
#classes .class-profile { width:112px; height:100px; overflow:visible; }
#classes .profile-grid { fill:none; stroke:#b581594d; stroke-width:1; }
#classes .profile-axis { fill:none; stroke:#b5815933; stroke-width:1; }
#classes .profile-fill { fill:#f2964a40; stroke:#f1b575; stroke-width:1.3; stroke-linejoin:round; }
#classes .class-profile text { fill:#d8ad87; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:11px; letter-spacing:1px; }
@media(min-width:861px) and (max-width:1100px) {
 #classes .class-loadout { grid-template-columns:minmax(0,1fr) 88px; }
 #classes .class-profile { width:88px; height:88px; }
 #classes .loadout-details { font-size:.8rem; }
}
@media(max-width:860px) { #classes .class-loadout { max-width:460px; } }

@media(min-width:861px) {
 #classes .ic-box-detail { padding-top:22px; padding-bottom:22px; }
 #classes .class-desc { margin-bottom:14px; }
 #classes .class-loadout { padding:6px 0; margin-bottom:16px; }
}

#classes .difficulty-stars { display:flex; align-items:center; gap:2px; }
#classes .difficulty-star { display:block; width:15px; height:15px; flex:0 0 15px; fill:none; stroke:#8a7265; stroke-width:1.4; stroke-linejoin:round; }
#classes .difficulty-star.is-filled { fill:#ffbd59; stroke:#ffbd59; filter:drop-shadow(0 0 3px #f6732144); }