/* DragonRise Design Atlas – Combat role page, isolated to avoid collisions */
#drachen-rollen { color:#eaf3fc; font-size:16px; line-height:1.6; }
#drachen-rollen .ra-wrap { max-width:1240px; display:grid; gap:26px; }
#drachen-rollen *,#drachen-rollen *::before,#drachen-rollen *::after { box-sizing:border-box; }
#drachen-rollen .ra-overline { display:block; font-size:12px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#8cb6d6; }
#drachen-rollen .ra-hero { padding:clamp(25px,3vw,42px); background:linear-gradient(130deg,#142d44,#0e1a29 73%); border:1px solid #2e4d68; border-radius:18px; }
#drachen-rollen .ra-hero-row { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-top:12px; }
#drachen-rollen .ra-hero h1 { color:#f7fbff; font-size:clamp(34px,3vw,48px); line-height:1.13; letter-spacing:-.035em; margin:0 0 13px; }
#drachen-rollen .ra-hero p { max-width:760px; color:#c1d0e0; font-size:16px; line-height:1.75; margin:0; }
#drachen-rollen .ra-concept { flex:0 0 auto; display:grid; gap:5px; padding:12px 16px; border-radius:9px; border:1px solid #456783; background:#193349; color:#c6e7ff; font-size:12px; font-weight:780; letter-spacing:.04em; }
#drachen-rollen .ra-concept span { color:#93b0c4; font-size:11px; font-weight:650; }
#drachen-rollen .ra-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:31px; border-top:1px solid #33506a; padding-top:23px; }
#drachen-rollen .ra-metrics div { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
#drachen-rollen .ra-metrics strong { font-size:31px; line-height:1; font-weight:760; color:#d5ecff; font-variant-numeric:tabular-nums; }
#drachen-rollen .ra-metrics span { font-size:13px; color:#a7bfd2; }
#drachen-rollen .ra-explainer { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#drachen-rollen .ra-explainer>div { display:flex; gap:13px; padding:19px; border:1px solid #263c50; border-radius:12px; background:#101c2a; min-width:0; }
#drachen-rollen .ra-order { color:#80bfe9; font-size:13px; font-weight:800; }
#drachen-rollen .ra-explainer p { margin:0; color:#b3c6d7; font-size:14px; line-height:1.65; }
#drachen-rollen .ra-explainer strong { color:#eaf5ff; font-weight:760; }
#drachen-rollen .ra-picker { background:#101b28; border:1px solid #293d51; border-radius:16px; padding:clamp(20px,2.5vw,30px); }
#drachen-rollen .ra-section-title { margin-bottom:22px; }
#drachen-rollen .ra-section-title h2 { font-size:27px; font-weight:750; line-height:1.25; margin:6px 0 7px; color:#f2f8ff; }
#drachen-rollen .ra-section-title p { color:#a8bfd2; font-size:15px; margin:0; }
#drachen-rollen .ra-tab-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
#drachen-rollen .ra-switch { display:flex; text-align:left; align-items:center; gap:13px; width:100%; min-width:0; min-height:95px; padding:15px 16px; background:#0b1622; border:1px solid #30465b; border-radius:11px; color:#e3f2ff; cursor:pointer; font:inherit; transition:background .16s,border-color .16s,box-shadow .16s; }
#drachen-rollen .ra-switch:hover { background:#172b3f; border-color:#6c9bbd; }
#drachen-rollen .ra-switch:focus-visible { outline:3px solid #9ddaff; outline-offset:3px; }
#drachen-rollen .ra-switch[aria-selected="true"] { background:#18344a; border-color:#66b7ef; box-shadow:inset 3px 0 0 #64bbfa; }
#drachen-rollen .ra-switch-index { font-size:14px; font-weight:770; color:#74a9d3; align-self:flex-start; line-height:1.7; }
#drachen-rollen .ra-switch-copy { flex:1; display:grid; gap:5px; min-width:0; }
#drachen-rollen .ra-switch-copy strong { font-size:18px; line-height:1.22; color:#f2f9ff; font-weight:750; }
#drachen-rollen .ra-switch-copy small { color:#a8bfd1; font-size:13px; line-height:1.35; }
#drachen-rollen .ra-switch-arrow { font-size:20px; color:#88b7d6; align-self:center; }
#drachen-rollen .ra-role-panel { background:#101b29; border:1px solid #2d455b; border-radius:16px; padding:clamp(18px,2.6vw,30px); scroll-margin-top:95px; }
#drachen-rollen .ra-role-panel[hidden] { display:none !important; }
#drachen-rollen .ra-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid #2d4357; padding-bottom:23px; margin-bottom:22px; }
#drachen-rollen .ra-panel-heading h3 { color:#f4f9ff; font-size:32px; letter-spacing:-.03em; margin:3px 0 5px; line-height:1.22; }
#drachen-rollen .ra-panel-heading p { color:#b9ccdb; font-size:15px; margin:0; }
#drachen-rollen .ra-panel-mark { display:grid; place-items:center; flex:none; width:56px; height:56px; font-size:29px; background:#1a3b54; border:1px solid #497693; color:#c6eaff; border-radius:13px; }
#drachen-rollen .ra-spec-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
#drachen-rollen .ra-spec { display:flex; flex-direction:column; min-width:0; background:#0b1723; border:1px solid #2a4155; border-radius:12px; padding:22px; }
#drachen-rollen .ra-spec-top { display:flex; gap:10px; align-items:center; margin-bottom:11px; }
#drachen-rollen .ra-spec-num { color:#87c3ec; font-size:14px; font-weight:780; }
#drachen-rollen .ra-subtle-label { color:#849eb3; font-size:10px; font-weight:780; letter-spacing:.1em; }
#drachen-rollen .ra-spec h4 { color:#f0f8ff; font-size:22px; line-height:1.28; font-weight:750; margin:0 0 10px; }
#drachen-rollen .ra-desc { color:#bdcfdd; font-size:15px; line-height:1.65; margin:0 0 20px; min-height:75px; }
#drachen-rollen .ra-stat-profile { display:grid; gap:13px; padding-top:18px; border-top:1px solid #2a4055; }
#drachen-rollen .ra-statline { display:grid; gap:7px; }
#drachen-rollen .ra-level { font-size:12px; letter-spacing:.025em; color:#9eb8ca; font-weight:750; }
#drachen-rollen .ra-level-0 .ra-level { color:#98d2fa; }
#drachen-rollen .ra-statlist { display:flex; flex-wrap:wrap; gap:7px; }
#drachen-rollen .ra-stat { display:inline-flex; padding:6px 9px; font-size:13px; font-weight:630; line-height:1.35; background:#172a3a; border:1px solid #35546b; color:#d6e9f7; border-radius:6px; overflow-wrap:anywhere; }
#drachen-rollen .ra-level-0 .ra-stat { background:#1a3d57; border-color:#4b7ea0; color:#e2f5ff; }
#drachen-rollen .ra-level-2 .ra-stat { color:#9cacc0; border-color:#263a4b; background:#101c28; }
#drachen-rollen .ra-note { display:flex; gap:9px; align-items:flex-start; margin:20px 0 0; padding-top:15px; border-top:1px solid #24384a; font-size:13px; line-height:1.6; color:#9eb6c9; }
#drachen-rollen .ra-note span { color:#83bfe9; font-size:17px; }
#drachen-rollen .ra-archive { background:#101b28; border:1px solid #2e4457; border-radius:14px; overflow:hidden; }
#drachen-rollen .ra-archive summary { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:22px 25px; cursor:pointer; list-style:none; }
#drachen-rollen .ra-archive summary::-webkit-details-marker { display:none; }
#drachen-rollen .ra-archive summary>span:first-child { display:grid; gap:3px; }
#drachen-rollen .ra-archive summary strong { font-size:19px; color:#f2f9ff; }
#drachen-rollen .ra-archive summary small { font-size:13px; color:#a2b8c9; }
#drachen-rollen .ra-archive-plus { font-size:27px; line-height:1; color:#a5d8f8; }
#drachen-rollen .ra-archive[open] .ra-archive-plus { transform:rotate(45deg); }
#drachen-rollen .ra-archive-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; padding:0 22px 22px; }
#drachen-rollen .role-legacy-card { background:#0d1926; border:1px solid #2a4256; border-radius:11px; padding:23px; min-width:0; }
#drachen-rollen .role-legacy-card h3 { color:#e9f6ff; font-size:19px; line-height:1.3; margin:5px 0 14px; }
#drachen-rollen .role-legacy-card p { color:#b2c6d7; font-size:15px; line-height:1.7; }
#drachen-rollen .role-legacy-data { display:grid; grid-template-columns:minmax(110px,130px) minmax(0,1fr); }
#drachen-rollen .role-legacy-data > div { min-width:0; padding:11px 6px; border-bottom:1px solid #283f52; color:#b9c9d8; font-size:14px; line-height:1.6; }
#drachen-rollen .role-legacy-data > div:nth-child(odd) { color:#e1f0fb; font-weight:740; }
#drachen-rollen .ra-footer { border-top:1px solid #2b4054; padding:18px 6px 0; color:#a5bbce; font-size:14px; line-height:1.7; }
#drachen-rollen .ra-footer strong { color:#e7f5ff; }
@media(max-width:1320px) {
  #drachen-rollen .ra-spec-grid { grid-template-columns:1fr; }
  #drachen-rollen .ra-desc { min-height:0; }
  #drachen-rollen .ra-tab-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:980px) {
  #drachen-rollen .ra-explainer { grid-template-columns:1fr; }
  #drachen-rollen .ra-archive-body { grid-template-columns:1fr; }
}
@media(max-width:650px) {
  #drachen-rollen .ra-hero-row { display:block; }
  #drachen-rollen .ra-concept { display:inline-grid; margin-top:16px; }
  #drachen-rollen .ra-metrics { grid-template-columns:1fr; gap:15px; }
  #drachen-rollen .ra-tab-grid { grid-template-columns:1fr; }
  #drachen-rollen .ra-switch { min-height:76px; }
  #drachen-rollen .ra-spec { padding:19px; }
  #drachen-rollen .ra-panel-heading h3 { font-size:28px; }
  #drachen-rollen .ra-panel-mark { width:42px; height:42px; font-size:21px; }
  #drachen-rollen .role-legacy-data { grid-template-columns:1fr; }
  #drachen-rollen .role-legacy-data > div:nth-child(odd) { border-bottom:0; padding-bottom:0; }
  #drachen-rollen .role-legacy-data > div:nth-child(even) { padding-top:3px; }
}
@media(prefers-reduced-motion:reduce){#drachen-rollen .ra-switch{transition:none}}

/* Four familiar combat roles: two choices per row on desktop */
#drachen-rollen .ra-tab-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:650px){#drachen-rollen .ra-tab-grid{grid-template-columns:1fr;}}

/* DragonRise RPG archetypes – scoped visual system, avoids page-wide overrides */
#drachen-rollen .ra-v3 {gap:22px}
#drachen-rollen .ra-v3 .ra-hero {background:linear-gradient(125deg,#0f283c,#0a1522 80%); border-color:#2e546e}
#drachen-rollen .ra-v3 .ra-hero strong {color:#f3f9ff}
#drachen-rollen .ra-v3-principle {display:flex;align-items:flex-start;gap:16px;background:#102638;border:1px solid #2c5774;border-radius:14px;padding:19px 23px}
#drachen-rollen .ra-v3-principle-icon {font-size:30px;color:#70c9ff;line-height:1.1}
#drachen-rollen .ra-v3-principle strong {font-size:17px;color:#f1f8ff}
#drachen-rollen .ra-v3-principle p {font-size:14px;line-height:1.6;color:#bad0df;margin:6px 0 0}
#drachen-rollen .ra-v3 .ra-tab-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#drachen-rollen .ra-v3 .ra-switch {min-height:108px;padding:15px;align-items:flex-start;flex-wrap:wrap;gap:9px}
#drachen-rollen .ra-v3 .ra-switch-copy strong{font-size:17px}
#drachen-rollen .ra-v3 .ra-switch-copy small{font-size:12px;line-height:1.4}
#drachen-rollen .ra-v3 .ra-switch-arrow{font-size:17px}
#drachen-rollen .ra-v3 .ra-spec-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
#drachen-rollen .ra-v3 .ra-spec {padding:23px;gap:0;background:#0b1826}
#drachen-rollen .ra-v3 .ra-spec h4 {font-size:25px;margin:0 0 3px}
#drachen-rollen .ra-v3-tagline {color:#8dd1ff;font-size:13px;font-weight:800;letter-spacing:.025em;margin:0 0 13px}
#drachen-rollen .ra-v3 .ra-desc {min-height:0;margin:0 0 17px;font-size:15px;line-height:1.6}
#drachen-rollen .ra-v3-skill {background:linear-gradient(135deg,#153448,#0f2537);border:1px solid #3e6a84;border-radius:10px;padding:17px 19px;margin-bottom:21px}
#drachen-rollen .ra-v3-skill-caption {font-size:10px;letter-spacing:.075em;font-weight:800;color:#95c5df;display:block;margin-bottom:6px}
#drachen-rollen .ra-v3-skill strong {font-size:19px;color:#f1f9ff;display:block}
#drachen-rollen .ra-v3-skill p {font-size:14px;line-height:1.62;color:#c1d8e8;margin:7px 0 0}
#drachen-rollen .ra-v3 .ra-stat-profile{margin-top:auto;gap:10px}
#drachen-rollen .ra-v3 .ra-note {font-size:12px;color:#a6c2d4;margin-top:16px}
@media(max-width:1200px){#drachen-rollen .ra-v3 .ra-tab-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){#drachen-rollen .ra-v3 .ra-spec-grid{grid-template-columns:1fr}}
@media(max-width:540px){#drachen-rollen .ra-v3 .ra-tab-grid{grid-template-columns:1fr}#drachen-rollen .ra-v3 .ra-switch{min-height:70px}#drachen-rollen .ra-v3-principle{padding:17px}}