/* Independent seven-card layout: do not align labels over a six-card bitmap. */
#classes{height:auto;min-height:0;padding:28px 3.5% 20px;background:linear-gradient(120deg,#f4f2eb,#fffef9 48%,#eeede7);border-top:1px solid #c9bd9f;border-bottom:3px double #b5a581;color:#243b50}
#classes .classes-heading{position:static;margin:0 0 22px;text-align:center}
#classes .classes-heading h2{font-size:clamp(22px,2.2vw,32px);line-height:1.4;letter-spacing:3px}
#classes .classes-heading p{font-size:13px;letter-spacing:2px;line-height:1.7;margin-top:6px;color:#686c66}
#classes .class-grid{position:static;inset:auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;height:auto}
#classes .class-card{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;min-width:0;height:auto;padding:3px;border:1px solid #bcb092;border-radius:3px;background:#fcfaf4;box-shadow:0 3px 8px #2d354014;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
#classes .class-card:hover{transform:translateY(-4px);border-color:#697f8a;box-shadow:0 7px 16px #25384425;filter:none}
#classes .class-card .class-card-art{display:block;flex:none;width:100%;aspect-ratio:134/68;min-height:0;padding:0;background-image:url('http://s.haory.cn/x/x137/artwork-textless.png');background-size:702.239% auto;background-position:calc(var(--art-x) / 807 * 100%) 90.399%;background-repeat:no-repeat;border-bottom:1px solid #bcad8d}
#classes .class-card .class-card-copy{width:100%;min-height:66px;padding:10px 15px 10px 7px;background:#fcfaf4}
#classes .class-card strong{font:700 clamp(16px,1.45vw,23px)/1.35 'Microsoft JhengHei','PingFang TC',sans-serif;letter-spacing:1px}
#classes .class-card small{font-size:clamp(10px,.9vw,13px);line-height:1.6;white-space:normal;margin-top:5px;color:#526477}
#classes .class-card i{right:7px;bottom:20px;font:23px/1 Georgia,serif;color:#85734e}
#classes .classes-hint{text-align:center;font-size:12px;line-height:1.7;color:#777766;margin-top:18px;letter-spacing:1px}
#classes .class-card .class-art-lingjian,.class-portrait.class-art-lingjian{background-image:url('https://image.tw.ncsoft.com/bns/pc/event/update/1501/bg.jpg');background-size:512% auto;background-position:27.2% 16.5%;background-repeat:no-repeat}
dialog .class-detail{grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:start}
dialog .class-portrait{width:200px;height:auto;aspect-ratio:134/68;min-height:0;max-width:100%;border:1px solid #a99c7e;background-size:702.239% auto;background-position:calc(var(--portrait-x) / 807 * 100%) 90.399%;background-repeat:no-repeat}
dialog .class-role{font-size:13px;letter-spacing:1px;color:#c9b27f;margin-bottom:12px}
dialog .class-description>p{font-size:15px;line-height:1.85}
dialog .class-description .class-slogan{font:600 21px/1.5 'Microsoft JhengHei','PingFang TC',sans-serif;color:#f0e4c9;margin-bottom:8px}
dialog .class-skills{list-style:none;padding:0;margin:18px 0;display:grid;gap:8px}
dialog .class-skills li{padding:10px 12px;border-left:2px solid #a68c57;background:#c7d7e709;font-size:14px;line-height:1.7}
dialog .class-skills strong{display:block;color:#eedbb5;font-size:15px;margin-bottom:3px}
dialog .class-playstyle{border-top:1px solid #51677a80;padding-top:13px}
dialog .class-playstyle h3{font:600 16px/1.6 'Microsoft JhengHei','PingFang TC',sans-serif;letter-spacing:1px;margin:10px 0 4px}
dialog .class-playstyle p{font-size:14px;line-height:1.8}
dialog .class-version-note{font-size:12px;line-height:1.7;color:#91aabf;margin-top:18px}
@media(max-width:1100px){#classes .class-grid{gap:8px}#classes .class-card .class-card-copy{min-height:74px}#classes .class-card small{font-size:11px}}
@media(min-width:761px) and (max-width:900px){#classes .class-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){#classes{padding:26px 15px 20px}#classes .class-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#classes .class-card .class-card-copy{min-height:70px;padding:10px 20px 10px 8px}#classes .class-card strong{font-size:19px}#classes .class-card small{font-size:12px}#classes .classes-heading p{letter-spacing:1px}dialog .class-detail{grid-template-columns:1fr;gap:18px}dialog .class-portrait{width:240px;margin:0 auto}dialog .class-description .class-slogan{font-size:20px}}
@media(prefers-reduced-motion:reduce){#classes .class-card{transition:none}#classes .class-card:hover{transform:none}}