/* TierList: current Warband palette. Shared navigation/account styles stay global. */
.classes-page{--gold:#ffd100;--muted:#b8b8b8;--text:#eee;--bg:#111;--body:Verdana,Tahoma,sans-serif;background:#111;color:#eee;font:17px/1.65 Verdana,Tahoma,sans-serif}
.classes-page main{min-width:0}
.classes-page .class-hero{min-height:350px;background:#111;border-bottom:1px solid #655b36}
.classes-page .class-hero .hero-art{background-image:url('assets/hero-sylvanas-v1.svg');background-position:center 30%;filter:saturate(.65) brightness(.68)}
.classes-page .class-hero:before{background:linear-gradient(90deg,#111111f2,#111111c2 40%,#11111133 80%),linear-gradient(0deg,#111,transparent 70%)}
.classes-page .class-hero .hero-content{max-width:1280px;padding:46px 24px 38px}
.classes-page .class-hero h1{font-size:clamp(42px,5vw,68px);line-height:1.15;color:#f0d891;letter-spacing:-1px}
.classes-page .class-hero .launch-label{color:#d6c28d;font-size:14px;letter-spacing:1.5px}
.classes-page .class-hero .hero-copy{color:#eee;font-size:17px;line-height:1.7;max-width:70ch;margin-top:17px}
.classes-page .class-hero .primary{background:#302b17;border-color:#b49b42;color:#ffd100;box-shadow:none;font-size:16px;white-space:normal}
.classes-page .class-guide{max-width:1280px;margin:32px auto 48px;padding:0 24px}
.classes-page .guide-context{padding:26px;background:#1a1a1a;border:1px solid #71633e;border-top:2px solid #b19957;gap:28px;align-items:start;border-radius:3px}
.classes-page .guide-context h2{font-size:29px;color:#f0d891;line-height:1.3}
.classes-page .guide-context p{color:#ddd;font-size:17px;line-height:1.7;max-width:70ch}
.classes-page .section-kicker{color:#d6c28d;font-size:13px}
.classes-page .guide-build{border-left:1px solid #71633e;padding-left:24px;max-width:255px}
.classes-page .guide-build strong{color:#ffd100;font-size:28px;line-height:1.2}
.classes-page .guide-build span{color:#eee;font-size:16px}
.classes-page .guide-build small{color:#b8b8b8;font-size:13px;line-height:1.65}
.classes-page .guide-role-tabs{gap:12px;margin:26px 0 20px}
.classes-page .guide-role-tabs .choice{min-width:140px;font-size:17px;font-weight:600;padding:12px 20px;min-height:48px;background:#202020;border:1px solid #645d3d;color:#ddd;border-radius:3px}
.classes-page .guide-role-tabs .choice[aria-pressed=true]{background:#302b17;border-color:#b49b42;color:#ffd100;box-shadow:inset 0 -2px #b49b42}
.classes-page .guide-role-tabs .choice:hover{border-color:#ffd100}
.classes-page .guide-source{padding:20px 0 24px;border-color:#55513e;gap:22px}
.classes-page .guide-source>div{min-width:0}
.classes-page .guide-source strong{font-size:17px;color:#eee}
.classes-page .guide-source small{font-size:14px;color:#b8b8b8;line-height:1.7}
.classes-page .guide-source .button{background:#202020;border-color:#81713b;color:#ffd100;font-size:15px;white-space:normal;flex-shrink:0;box-shadow:none}
.classes-page .tier-board{gap:16px}
.classes-page .tier-row{grid-template-columns:76px minmax(0,1fr);background:#191919;border:1px solid #645d3d;border-radius:3px;overflow:hidden}
.classes-page .tier-letter{font-size:43px;color:#f2dc9d;background:#302b1b;border-right:1px solid #71633e;line-height:1.2}
.classes-page .tier-letter small{font-size:12px;color:#d0bd89;letter-spacing:1px;margin-top:7px}
.classes-page .tier-a .tier-letter{background:#28261d}.classes-page .tier-b .tier-letter{background:#22221e}.classes-page .tier-c .tier-letter{background:#202020}
.classes-page .tier-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:16px;gap:12px;min-width:0}
.classes-page .tier-character{width:100%;min-width:0;max-width:none;min-height:87px;background:#242424;border:1px solid #4e4e45;border-radius:3px;padding:16px;gap:12px;color:#eee;transition:border-color .15s,background .15s}
.classes-page .tier-character:hover{background:#2b291e;border-color:#b49b42}
.classes-page .tier-character>span:not(.tier-choose){min-width:0;flex:1}
.classes-page .tier-character img{width:40px;height:40px;object-fit:contain;border-radius:2px;flex:none}
.classes-page .tier-character strong{font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.classes-page .tier-character small{font-size:14px;color:#ccc;line-height:1.55;margin-top:3px;overflow-wrap:anywhere}
.classes-page .tier-choose{color:#ffd100;font-size:20px;flex:none}
.classes-page .guide-note{padding:26px;background:#1a1a1a;border:1px solid #55513e;border-left:3px solid #b19957;border-radius:3px}
.classes-page .guide-note h3{font-size:25px;color:#f0d891}
.classes-page .guide-note p{font-size:17px;color:#ddd;line-height:1.75;max-width:75ch}
.classes-page footer{font-size:13px;color:#b8b8b8;line-height:1.7;gap:20px}
.classes-page a:focus-visible,.classes-page button:focus-visible{outline:2px solid #ffd100;outline-offset:4px}
@media(max-width:760px){.classes-page .class-hero{min-height:330px}.classes-page .class-hero .hero-content{padding:34px 20px}.classes-page .class-hero .hero-copy br{display:none}.classes-page .class-guide{padding:0 20px;margin-top:24px}.classes-page .guide-context{grid-template-columns:minmax(0,1fr);padding:20px;gap:20px}.classes-page .guide-context h2{font-size:25px}.classes-page .guide-build{max-width:none;padding:17px 0 0;border-left:0;border-top:1px solid #71633e}.classes-page .guide-role-tabs{gap:8px}.classes-page .guide-role-tabs .choice{flex:1;min-width:0;font-size:16px;padding:12px 6px}.classes-page .guide-source{flex-direction:column;align-items:stretch;gap:15px}.classes-page .guide-source .button{width:100%}.classes-page .tier-row{grid-template-columns:48px minmax(0,1fr)}.classes-page .tier-letter{font-size:32px}.classes-page .tier-letter small{font-size:10px}.classes-page .tier-items{grid-template-columns:minmax(0,1fr);padding:10px;gap:10px}.classes-page .tier-character{padding:12px;gap:9px;min-height:85px}.classes-page .tier-character img{width:33px;height:33px}.classes-page .tier-character strong{font-size:16px}.classes-page .tier-character small{font-size:13px}.classes-page .tier-choose{font-size:17px}.classes-page .guide-note{padding:20px}.classes-page .guide-note h3{font-size:23px}}
@media(max-width:350px){.classes-page .class-guide{padding:0 14px}.classes-page .class-hero .hero-content{padding:30px 14px}.classes-page .guide-context{padding:17px}.classes-page .tier-items{padding:8px}.classes-page .tier-character{padding:10px;gap:7px}.classes-page .tier-character img{width:28px;height:28px}.classes-page .tier-character strong{font-size:15px}.classes-page .tier-character small{font-size:13px}.classes-page .tier-choose{display:none}}
@media(prefers-reduced-motion:reduce){.classes-page .tier-character{transition:none}}