/* Viewport crops preserve the approved C2 artwork. */
.service-sprite{background-image:url('/assets/offdev-characters-c2.png');background-size:558.5455% 193.2075%;background-position:var(--portrait-x) 43.3198%;mix-blend-mode:normal;aspect-ratio:275/530;image-rendering:auto}
.architect{--portrait-x:1.7446%}.mechanic{--portrait-x:25.7732%}.robot{--portrait-x:49.8810%}.wizard{--portrait-x:73.9889%}.wildcard{--portrait-x:98.0967%}
.category-art{height:255px;gap:14px;margin:22px 0}.category-art .service-sprite{width:132px;height:255px;flex:0 1 132px;aspect-ratio:275/530;border:1px solid #617849}
.category-roster .character-thumbnail{width:100%;max-width:123px;height:auto;aspect-ratio:275/530;margin:7px 0 13px;overflow:hidden;border:1px solid #526b3f}
.character-option{padding-top:20px}.character-option.is-selected .character-thumbnail{border-color:var(--green)}
.character-panel{grid-template-columns:minmax(165px,.5fr) minmax(0,1.5fr);gap:clamp(24px,4vw,56px);padding:clamp(24px,3vw,42px)}
.character-profile{padding-top:0}.character-portrait{max-width:250px;aspect-ratio:275/530;height:auto;border:1px solid #718d4d;box-shadow:6px 6px 0 #0b1b12;background:none;overflow:hidden}
.character-profile>p{font-size:29px;line-height:1.15}.character-description>.eyebrow{line-height:1.7}
.inner-screen .character-description>h2{font-size:clamp(36px,3.5vw,53px);line-height:1.03;max-width:650px;margin:0 0 18px}
.character-description>p:not(.eyebrow){color:#c5d0bb;max-width:710px}
.detail-label{font:9px/1.7 var(--mono);letter-spacing:.9px;color:#9bb586;margin:0 0 18px}
.character-benefits{margin:29px 0}.character-benefits ol{list-style:none;padding:0;margin:0}.character-benefits li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:15px;padding:17px 0;border-top:1px solid #344b30}.benefit-number{font:12px/1.7 var(--mono);color:#819c6b;padding-top:2px}
.inner-screen .character-benefits h3,.inner-screen .character-combo h3{font:600 17px/1.4 var(--body);color:#deebd2;margin:0 0 6px}
.character-benefits li p{font-size:14px;line-height:1.75;color:#aebfa0;margin:0;max-width:650px}
.character-stats{max-width:none;padding:22px 0}.stat-row{grid-template-columns:minmax(0,1fr) minmax(110px,.7fr);max-width:550px;margin:14px 0}.stat-row>span{font:12px/1.5 var(--body)}.stat-meter i{height:9px}.character-stats small{display:block;font-size:11px;line-height:1.6;color:#92aa81;margin-top:18px;max-width:470px}
.character-combo{display:grid;grid-template-columns:58px minmax(0,1fr);gap:20px;border-left:3px solid var(--green);background:#21321f;padding:22px;margin-top:26px}.combo-portrait{width:58px;height:112px;overflow:hidden;border:1px solid #637d4b}.character-combo .detail-label{font-size:8px;margin-bottom:8px}.character-combo p:not(.detail-label){font-size:13px;line-height:1.7;color:#b7c9a7;margin:0 0 12px}.character-combo p.combo-note{font-size:11px;color:#9ab485}.character-combo a{display:inline-block;font-size:13px;font-weight:600;line-height:1.6;text-decoration:underline;text-underline-offset:4px;color:var(--green)}.character-combo a:hover{color:#e5ffc6}.character-combo a:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.character-description>p.scope-note{font-size:11px;line-height:1.65;color:#94ad82;margin:18px 0 0}.character-cta .solid-button{line-height:1.5;text-align:left}.hub-wildcard-portrait{display:block;width:80px;aspect-ratio:275/530;overflow:hidden;border:1px solid #617849}
@media(max-width:1050px){.character-panel{grid-template-columns:minmax(145px,.5fr) minmax(0,1.5fr);gap:25px}.character-combo{gap:14px;padding:18px}.category-art{height:220px}.category-art .service-sprite{width:114px;height:220px;flex-basis:114px}}
@media(max-width:700px){.category-roster .character-thumbnail{max-width:97px;aspect-ratio:275/530;margin-top:8px}.category-roster .character-option{padding-top:16px}.character-number{font-size:8px;top:6px;left:7px}.character-panel{display:block;padding:24px 18px}.character-profile{display:grid;grid-template-columns:92px minmax(0,1fr);column-gap:20px;row-gap:8px;margin:0 0 30px}.character-portrait{width:92px;height:auto;grid-row:1/3;margin:0}.character-profile>p{font-size:27px;align-self:end;margin:0}.character-profile>span{align-self:start;font-size:7px;line-height:1.7;margin:0;width:auto}.character-benefits{margin:25px 0}.character-benefits li{gap:9px;grid-template-columns:24px minmax(0,1fr);padding:17px 0}.inner-screen .character-benefits h3,.inner-screen .character-combo h3{font-size:16px}.character-description>.eyebrow{font-size:8px;letter-spacing:.6px}.stat-row{gap:12px;grid-template-columns:minmax(0,1fr) minmax(80px,.65fr)}.stat-row>span{font-size:12px}.character-combo{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:17px 12px}.combo-portrait{width:40px;height:77px}.category-art{height:235px;gap:16px}.category-art .service-sprite{height:235px;width:122px;aspect-ratio:275/530;flex-basis:122px}.hub-wildcard-portrait{width:44px}.character-cta .solid-button{font-size:13px;justify-content:space-between}.character-profile .service-sprite{height:100%}}