.codex-body{background:#0b121a;position:relative;isolation:isolate}.codex-body [hidden]{display:none!important}.codex-art{position:absolute;inset:0 0 auto;height:690px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#07101ad9,#0b121af0 72%,#0b121a),url('../assets/c1-battle-hd.webp') center 35%/cover no-repeat}.codex-header,.codex-main,.codex-footer{width:min(1360px,100%);margin-inline:auto;padding-inline:42px}.codex-header{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:30px;border-bottom:1px solid #b59a612b}.codex-header .brand-name{font-size:34px;letter-spacing:1.5px}.codex-header .brand-name>b{font-size:15px;padding:7px 8px;margin-left:10px}.codex-header .brand-subtitle{font-size:8px;letter-spacing:2px}.codex-nav{display:flex;align-items:center;gap:27px;flex-wrap:wrap}.codex-nav a{font-size:11px;line-height:1.7;text-decoration:none;color:#b8c3c8;padding-block:12px;border-bottom:1px solid transparent}.codex-nav a:hover,.codex-nav a[aria-current]{color:#efdbb0;border-color:#c9aa6d}.codex-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;padding-block:58px 38px}.codex-eyebrow{font-size:9px;line-height:1.8;letter-spacing:2px;color:#b5a27e;margin:0 0 10px}.codex-intro h1{font:400 clamp(37px,4.2vw,60px)/1.25 var(--serif);letter-spacing:-1.5px;margin:0 0 19px;color:#f1eee4}.codex-intro h1 span{color:#e9c98c}.codex-lead{font-size:13px;line-height:1.9;color:#b8c6cc;margin:0}.codex-counts{display:flex;gap:33px;flex-shrink:0;margin:0 0 5px}.codex-counts>div{display:flex;flex-direction:column-reverse;gap:8px}.codex-counts dt{font-size:9px;color:#a8b4bb;line-height:1.7}.codex-counts dd{font:400 33px/1 var(--serif);color:#dec28d;margin:0}.race-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #b59a613b;background:#0b1620a6}.race-choice{display:flex;align-items:center;gap:15px;min-width:0;min-height:85px;padding:17px 20px;border-right:1px solid #b59a612b;text-decoration:none;color:#b7c3c7;position:relative;transition:background .15s}.race-choice:last-child{border-right:0}.race-number{font:400 21px/1.2 var(--serif);color:#8f805f;min-width:29px}.race-choice>span:last-child{font:400 14px/1.6 var(--serif)}.race-choice small{display:block;font:400 9px/1.5 var(--sans);color:#8d9ca5;margin-top:4px}.race-choice:hover{background:#e0bf7910;color:#f5e4c4}.race-choice[aria-current="true"]{background:linear-gradient(135deg,#cbaa5926,#bda06008);color:#f0d7a4}.race-choice[aria-current="true"]:after{position:absolute;content:'';height:2px;background:#d3b475;inset:auto 18px -1px}.race-choice[aria-current="true"] .race-number{color:#eed5a0}.race-overview{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-block:30px}.race-overview .codex-eyebrow{font-size:8px;margin-bottom:3px}.race-overview h2{font:400 25px/1.5 var(--serif);color:#e9d8b5;margin:0 0 8px}.race-overview p#race-description{font-size:12px;line-height:1.9;color:#aabcc7;max-width:650px;margin:0}.transfer-key{display:flex;gap:17px;align-items:center;margin:0;flex-shrink:0}.transfer-key span{color:#cfb786;font-size:11px;line-height:1.8;white-space:nowrap}.transfer-key small{display:block;font-size:8px;color:#8498a5}.transfer-key b{color:#6d6a5b;font-size:12px;font-weight:400}.codex-layout{display:grid;grid-template-columns:265px minmax(0,1fr);align-items:start;gap:25px}.class-sidebar{border:1px solid #a88c5036;background:#0d1822c9;min-width:0}.sidebar-heading{padding:23px 20px 16px;border-bottom:1px solid #a88c5029}.sidebar-heading .codex-eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:7px}.sidebar-heading h2{font:400 15px/1.5 var(--serif);margin:0;color:#dec99d}.class-tree{padding:15px 12px 18px}.class-tree ul{list-style:none;margin:0;padding:0}.class-tree>ul>li+li{margin-top:19px}.class-tree li>ul{margin:3px 0 5px 13px;padding-left:10px;border-left:1px solid #a88c503d}.tree-node{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;min-height:37px;padding:7px 9px;border:1px solid transparent;border-radius:2px;font-size:10px;line-height:1.6;color:#adbdc7;text-decoration:none;transition:background .15s}.tree-node span{min-width:0;overflow-wrap:anywhere}.tree-node small{font-size:8px;color:#6e8797;flex-shrink:0}.tree-node:hover{color:#f4e2bb;background:#f0d6a510}.tree-node[aria-current="page"]{background:#c4a76518;border-color:#c4a76561;color:#f5d99c}.tree-node[aria-current="page"] small{color:#c4ac78}.tree-node[data-stage="0"]{font-weight:600;color:#d0cebd}.tree-note{font-size:10px;line-height:1.8;color:#8097a7;margin:0;padding:15px 20px;border-top:1px solid #a88c5029}.class-content{min-width:0;scroll-margin-top:20px}.class-content:focus{outline:none}.class-select-wrap{display:none}.class-profile{border:1px solid #bda16447;background:linear-gradient(120deg,#152535,#0e1b27 70%);padding:27px 30px 23px;position:relative;overflow:hidden}.class-profile:after{content:'◇';position:absolute;right:12px;top:18px;font:400 170px/1 var(--serif);color:#d4b57106;pointer-events:none}.class-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:9px;color:#a6a797;margin-bottom:22px;position:relative;z-index:1}.class-breadcrumbs a{text-decoration:none;color:#a4b7c6;min-height:24px;display:inline-flex;align-items:center}.class-breadcrumbs a:hover{color:#f3ddb1}.class-breadcrumbs span[aria-current]{color:#dcc99d}.profile-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;z-index:1}.profile-heading .codex-eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:6px}.profile-heading h2{font:400 clamp(26px,3vw,37px)/1.35 var(--serif);color:#f0ddba;margin:0;overflow-wrap:anywhere}.class-role{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 10px;border:1px solid #d1b5704d;background:#d8bb7c0c;color:#d2bd90;font-size:9px;line-height:1.6;white-space:nowrap}.class-description{font-size:12px;line-height:1.9;color:#adbfcc;margin:15px 0 21px;position:relative;z-index:1;max-width:660px}.class-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding-top:17px;border-top:1px solid #bda16429;gap:10px}.class-stats>div{display:flex;align-items:center;gap:10px}.class-stats dt{font-size:9px;color:#7e9aaf}.class-stats dd{font:400 16px/1.5 var(--serif);color:#c5d0ce;margin:0}.skillbook{padding-top:31px}.skillbook-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:19px}.skillbook-heading .codex-eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:5px}.skillbook-heading h3{font:400 23px/1.4 var(--serif);color:#e3d2af;margin:0}.skill-count{font-size:10px;color:#9bafbb;line-height:1.7}.skill-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 140px 160px;gap:12px}.skill-toolbar label,.class-select-wrap label{display:block;font-size:9px;color:#a3b4bf;margin-bottom:8px;line-height:1.5}.skill-toolbar input,.skill-toolbar select,.class-select-wrap select{width:100%;min-width:0;border:1px solid #8d9ba33d;background:#0e1a25;border-radius:2px;color:#d9dfdc;font:400 11px/1.5 var(--sans);padding:12px;min-height:42px;color-scheme:dark}.skill-toolbar input::placeholder{color:#728896}.skill-toolbar input:focus-visible,.skill-toolbar select:focus-visible,.class-select-wrap select:focus-visible{outline:2px solid #d7bd83;outline-offset:3px}.skill-options{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:16px 0 0;min-height:25px}.skill-options label{display:flex;align-items:center;gap:9px;font-size:10px;line-height:1.8;color:#9fb3c0;cursor:pointer}.skill-options input{accent-color:#c9aa70;width:15px;height:15px;flex-shrink:0}.clear-filters{border:0;background:none;color:#d2b984;font:400 10px/1.5 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px;padding:4px 0}.results-status{font-size:10px;line-height:1.7;color:#7e98aa;margin:15px 0 12px;min-height:17px}.skill-list{display:flex;flex-direction:column;gap:9px}.skill-card{border:1px solid #8295a526;background:#0f1b26;transition:border-color .15s}.skill-card[open]{border-color:#bda16378;background:#112130}.skill-card>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:42px minmax(0,1fr) auto 14px;align-items:center;gap:15px;padding:16px 19px;min-height:88px}.skill-card>summary::-webkit-details-marker{display:none}.skill-card>summary:hover{background:#d4b66f08}.skill-card>summary:focus-visible{outline:2px solid #d7bd83;outline-offset:2px}.skill-icon{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;position:relative;border:1px solid #b69d5f54;background:radial-gradient(circle at 35% 30%,#385164,#142535 65%);border-radius:2px;color:#d9bd80;font:400 20px/1 var(--serif);overflow:hidden}.skill-icon img{display:block;width:100%;height:100%;object-fit:cover}.skill-icon[data-type="passive"]{background:radial-gradient(circle at 35% 30%,#4d4931,#272c27 65%)}.skill-icon[data-type="toggle"]{background:radial-gradient(circle at 35% 30%,#4a3f5b,#252236 65%)}.skill-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#e1ddce;font-size:12px;font-weight:500;line-height:1.6;margin:0 0 3px}.skill-type{font-size:8px;font-weight:400;color:#8fa5b2;line-height:1.6}.skill-brief{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.8;color:#91a9b9;margin:0;max-width:600px}.skill-summary-metrics{display:flex;gap:17px;text-align:right;flex-shrink:0}.skill-summary-metrics>span{font-size:11px;line-height:1.5;color:#c7c9b9;min-width:28px}.skill-summary-metrics small{display:block;color:#738fa1;font-size:8px;margin-bottom:4px}.skill-chevron{color:#a28e65;font-size:15px;line-height:1;transition:transform .15s}.skill-card[open] .skill-chevron{transform:rotate(180deg)}.skill-expanded{padding:0 22px 23px 76px}.skill-effect{font-size:12px;line-height:1.9;color:#bdcbd2;white-space:pre-line;margin:0 0 18px}.skill-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin:0 0 22px;padding:18px 0;border-top:1px solid #9badb52b;border-bottom:1px solid #9badb52b}.skill-facts dt{font-size:9px;line-height:1.5;color:#809caf;margin-bottom:5px}.skill-facts dd{font-size:11px;line-height:1.8;color:#d3d9d6;margin:0;overflow-wrap:anywhere}.learned-in{font-size:9px;line-height:1.8;color:#8fa8ba;margin:8px 0 0}.learned-in a{color:#cbb789;text-decoration:none}.skill-ranks{overflow:auto;max-height:330px;scrollbar-color:#5d655e #101b25;scrollbar-width:thin;border:1px solid #8fa3b32b}.skill-ranks table{border-collapse:collapse;width:100%;font-size:10px;line-height:1.7;white-space:nowrap;text-align:left}.skill-ranks caption{text-align:left;padding:12px 14px;color:#b9bdac;font-size:10px;background:#111f2c;caption-side:top}.skill-ranks th{padding:9px 14px;font-weight:400;color:#93aebb;background:#162634;border-bottom:1px solid #9badb52b;position:sticky;top:0;z-index:1}.skill-ranks td{padding:8px 14px;color:#b5c3c9;border-bottom:1px solid #8295a51c}.skill-ranks tr:last-child td{border-bottom:0}.skill-ranks .current-rank td{background:#d0b47112;color:#ebd7ad}.skill-ranks .future-rank td{opacity:.5}.skill-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:15px;font-size:9px;line-height:1.8;color:#7690a4}.skill-meta a{color:#c4b386}.empty-skills{text-align:center;padding:40px 20px;border:1px dashed #9b8b634d;margin-top:10px}.empty-skills>span{color:#bca16c;font-size:35px}.empty-skills h4{font:400 18px/1.6 var(--serif);color:#d1c5a9;margin:12px 0}.empty-skills p{font-size:11px;color:#94a9b6}.empty-skills button,.catalog-error button{background:#bb9e5b1a;border:1px solid #c3a46570;color:#e2cca1;font:400 11px/1.6 var(--sans);padding:10px 17px;cursor:pointer;min-height:42px}.load-status{font-size:12px;color:#beab82;padding:35px 0}.catalog-error{font-size:12px;line-height:1.8;padding:25px;border:1px solid #d0af6b66;background:#302a1f44;color:#e0cda3}.codex-source{display:flex;align-items:flex-start;gap:16px;margin-block:38px 35px;border-top:1px solid #b29a6133;padding-top:23px}.codex-source>span{color:#ac966d;font-size:19px}.codex-source p{font-size:10px;line-height:1.9;color:#869eae;margin:0}.codex-source strong{font-weight:400;color:#c7bc9f}.codex-source p>span{font-size:9px;color:#718b9e}.codex-source a{color:#a8b6bd}.codex-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-block:24px 32px;border-top:1px solid #a58f5b2e;font-size:10px;line-height:1.8;color:#7f98a9}.codex-footer a{color:#c5b58e;text-decoration:none}
@media(min-width:1500px){.codex-intro{padding-top:70px}.codex-layout{grid-template-columns:285px minmax(0,1fr);gap:32px}.tree-node{font-size:11px}}
@media(max-width:1100px){.codex-header,.codex-main,.codex-footer{padding-inline:28px}.codex-layout{grid-template-columns:235px minmax(0,1fr);gap:18px}.race-choice{padding-inline:14px;gap:10px}.race-choice>span:last-child{font-size:12px}.race-number{font-size:18px;min-width:24px}.class-profile{padding:23px}.class-stats{gap:10px 6px}.class-stats>div{gap:6px}.skill-toolbar{grid-template-columns:minmax(0,1fr) 120px 140px;gap:9px}.skill-card>summary{padding:14px;gap:12px}.skill-summary-metrics{gap:10px}.skill-expanded{padding-left:68px;padding-right:17px}.transfer-key{gap:11px}.codex-counts{gap:20px}.skill-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.class-role{white-space:normal;text-align:center;max-width:110px}.class-stats dt{font-size:8px}.class-stats dd{font-size:14px}}
@media(max-width:850px){.codex-layout{grid-template-columns:minmax(0,1fr)}.class-sidebar{display:none}.class-select-wrap{display:block;margin-bottom:15px}.class-select-wrap select{font-size:12px;min-height:47px}.race-overview{gap:20px}.transfer-key{display:none}.codex-counts{gap:23px}.codex-counts dd{font-size:28px}.codex-nav{gap:17px}.codex-intro{padding-top:42px}.skill-toolbar{grid-template-columns:minmax(0,1fr) 140px 160px}.skill-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.class-stats>div{gap:12px}.class-stats dt{font-size:9px}.class-stats dd{font-size:17px}.race-choice{flex-direction:column;justify-content:center;gap:7px;padding:16px 8px;text-align:center}.race-number{font-size:16px;min-width:0}.race-choice>span:last-child{font-size:11px}.race-choice small{font-size:8px}.race-choice[aria-current="true"]:after{inset-inline:10px}}
@media(max-width:600px){.codex-header,.codex-main,.codex-footer{padding-inline:20px}.codex-header{flex-direction:column;gap:14px;padding-block:24px 15px}.codex-header .brand-name{font-size:32px}.codex-nav{gap:24px;justify-content:center}.codex-nav a{font-size:10px;padding-block:10px}.codex-intro{display:block;padding-top:33px;padding-bottom:27px}.codex-eyebrow{font-size:8px;letter-spacing:1.5px}.codex-intro h1{font-size:37px;letter-spacing:-1px;margin-bottom:15px}.codex-lead{font-size:12px;line-height:1.9}.codex-counts{margin-top:27px;gap:35px}.codex-counts dd{font-size:25px}.codex-counts dt{font-size:8px}.race-picker{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:0}.race-choice{min-height:83px;border-bottom:1px solid #b59a612b}.race-choice:nth-child(3){border-right:0}.race-choice:last-child{border-right:1px solid #b59a612b}.race-choice>span:last-child{font-size:11px}.race-overview{padding-block:24px}.race-overview h2{font-size:23px}.race-overview p#race-description{font-size:11px}.class-profile{padding:22px 19px 20px}.class-breadcrumbs{font-size:8px;gap:5px;margin-bottom:18px}.profile-heading{align-items:flex-start;gap:10px}.profile-heading h2{font-size:26px}.class-role{font-size:8px;max-width:90px;padding:5px 7px}.class-description{font-size:11px;margin-block:14px 19px}.class-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px}.class-stats>div{gap:13px}.class-stats dt{font-size:9px}.class-stats dd{font-size:16px}.skillbook{padding-top:26px}.skillbook-heading h3{font-size:21px}.skill-count{font-size:9px;max-width:110px;text-align:right}.skill-toolbar{grid-template-columns:1fr 1fr;gap:12px}.skill-search{grid-column:1/-1}.skill-toolbar input,.skill-toolbar select{font-size:11px}.skill-options{margin-top:15px}.skill-options label{font-size:9px;gap:8px}.skill-card>summary{grid-template-columns:35px minmax(0,1fr) 11px;gap:11px;padding:14px 12px;min-height:93px}.skill-icon{width:35px;height:35px;font-size:17px}.skill-name{font-size:11px;gap:6px}.skill-type{font-size:7px}.skill-brief{font-size:9px;line-height:1.8}.skill-summary-metrics{grid-column:2;grid-row:2;text-align:left;gap:19px;margin-top:-6px}.skill-summary-metrics>span{display:flex;gap:5px;font-size:9px;align-items:center}.skill-summary-metrics small{margin:0;font-size:8px}.skill-chevron{grid-column:3;grid-row:1/3}.skill-expanded{padding:4px 16px 20px}.skill-effect{font-size:11px}.skill-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;padding-block:15px}.skill-facts dt{font-size:8px}.skill-facts dd{font-size:10px}.skill-ranks caption{font-size:9px;padding:10px}.skill-ranks th,.skill-ranks td{padding:8px 10px}.skill-ranks table{font-size:9px}.codex-source{gap:11px;margin-top:29px}.codex-source p{font-size:9px}.codex-source p>span{font-size:8px}.codex-footer{flex-direction:column;gap:10px;font-size:9px}}
@media(max-width:350px){.codex-header,.codex-main,.codex-footer{padding-inline:15px}.codex-nav{gap:15px}.codex-nav a{font-size:9px}.codex-intro h1{font-size:31px}.codex-counts{gap:26px}.race-choice>span:last-child{font-size:10px}.profile-heading{flex-wrap:wrap}.profile-heading h2{font-size:24px}.class-stats>div{gap:9px}.skill-name{font-size:10px}}
@media(prefers-reduced-motion:reduce){.codex-body *{scroll-behavior:auto;transition:none!important}}
/* Keep the skill descriptions and numeric details readable on phones. */
@media(max-width:600px){.codex-lead{font-size:13px}.race-choice>span:last-child{font-size:12px}.race-choice small{font-size:9px}.race-overview p#race-description,.class-description{font-size:12px}.skill-name{font-size:12px}.skill-type{font-size:9px}.skill-brief{font-size:11px}.skill-toolbar label{font-size:10px}.skill-options label,.results-status{font-size:11px}.skill-effect{font-size:12px}.skill-facts dt{font-size:10px}.skill-facts dd{font-size:12px}.skill-ranks table{font-size:11px}}
/* Original game skill artwork, kept at its native size inside the frame. */
.skill-icon img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
@media(max-width:600px){.skill-icon{width:36px;height:36px}.skill-card>summary{grid-template-columns:36px minmax(0,1fr) 11px}}