/* Conquest Challenge Pass — dark imperial panel, responsive on mobile. */
.challenge-pass-dialog{max-width:1060px;width:min(96vw,1060px);max-height:91dvh;overflow-y:auto;background:linear-gradient(145deg,#11283b 0%,#0d1c2c 56%,#121e2c 100%);border:1px solid rgba(226,193,116,.37);color:#f2f1ee;box-shadow:0 30px 100px rgba(0,0,0,.7)}
.challenge-pass-dialog h2,.challenge-pass-dialog h3{color:#f7efd9}
.cp-overlay .challenge-pass-dialog button{cursor:pointer}
.cp-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 30px 12px;border-bottom:1px solid rgba(227,193,116,.16)}
.cp-header h2{margin:7px 0;font-size:clamp(23px,3vw,34px);line-height:1.13;letter-spacing:.025em}
.cp-header p{margin:0 0 14px;color:#b8c6d2}
.cp-header>button,.cp-footer button{background:#20384a;color:#f9ebc9;border:1px solid rgba(226,193,116,.3);border-radius:6px;padding:9px 16px}
.cp-eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#d1b87f;font-weight:700}
.cp-progress{padding:20px 30px 16px;background:rgba(5,18,31,.38)}
.cp-progress-top{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:15px}
.cp-progress-top b{font-size:21px;color:#f5d18d}
.cp-progress-top span,.cp-progress small{font-size:12px;color:#bccbd7}
.cp-progress-rail{height:11px;border-radius:12px;background:#284252;overflow:hidden;margin:10px 0}
.cp-progress-rail span{height:100%;display:block;background:linear-gradient(90deg,#906b3e,#e7c781);border-radius:12px;transition:width .16s}
.cp-equipped{margin:12px 30px 0;padding:8px 12px;border:1px solid #9f8047;border-radius:5px;color:#f3d49b;background:#58472c44;font-size:13px}
.cp-tabs{display:flex;gap:6px;padding:13px 26px 11px;overflow:auto;border-bottom:1px solid #d0af7433}
.cp-tabs button{white-space:nowrap;font-size:13px;background:#1a3346;color:#bdcbd7;padding:10px 14px;border:1px solid #395263;border-radius:6px}
.cp-tabs button.active{background:#56472d;color:#f9e2a6;border-color:#c4a563}
.cp-content{padding:18px 28px 25px}
.cp-intro{font-size:13px;color:#bdcbd5;margin:0 0 16px;max-width:900px}
.cp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cp-card{border:1px solid #364e5b;border-radius:9px;padding:16px;background:linear-gradient(155deg,#173044,#15293a);min-width:0}
.cp-card.cp-ready,.cp-milestone.cp-ready{border-color:#c9a96d;background:linear-gradient(155deg,#36402c,#203344)}
.cp-card.cp-done,.cp-milestone.cp-done{opacity:.83;border-color:#43765e}
.cp-card-top{display:flex;justify-content:space-between;gap:12px;align-items:center}
.cp-card h3{font-size:18px;margin:13px 0 7px;line-height:1.2}
.cp-card p{font-size:13px;color:#d5dee5;min-height:38px;margin:0 0 14px}
.cp-small{color:#bccbd5;font-size:12px;white-space:nowrap}
.cp-card-foot{border-top:1px solid #43607566;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;color:#e5d2a5;font-size:12px}
.cp-card-foot button,.cp-milestone button{padding:8px 13px;border-radius:5px;font-weight:700;white-space:nowrap;min-width:68px}
.cp-overlay button.primary{background:#bb995a;color:#121c28;border:1px solid #ebc785}
.cp-history{margin-top:10px;color:#9fb3c1;font-size:12px}
.cp-history summary{cursor:pointer}
.cp-history div{padding:4px 0}
.cp-milestone-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cp-milestone{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid #385365;border-radius:7px;background:#142f41}
.cp-milestone-number{color:#e8c786;min-width:69px;font-weight:700;font-size:13px}
.cp-milestone-label{font-size:13px;color:#e3edf2;flex:1}
.cp-cosmetics{display:flex;flex-wrap:wrap;gap:9px;margin:10px 0 16px}
.cp-cosmetics button{background:#273e50;color:#f4ead5;border:1px solid #8f774b;padding:9px 11px;border-radius:5px}
.cp-cosmetics button.active{background:#8c6f3d;color:#fff}
.cp-footer{border-top:1px solid #344d5a;padding:13px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#a9bdcc;font-size:12px}
.cp-result-notice{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cp-result-notice button{margin-left:auto}
.cp-menu-button{border-color:#b39455!important;color:#f0d496!important}
@media(max-width:700px){
.challenge-pass-dialog{max-height:96dvh;width:98vw}
.cp-header{padding:17px 15px 10px}
.cp-progress{padding:14px 15px}
.cp-progress-top{align-items:flex-start}
.cp-progress-top b{font-size:18px}
.cp-tabs{padding:9px 10px}
.cp-tabs button{font-size:12px;padding:9px 11px}
.cp-content{padding:14px 12px}
.cp-grid,.cp-milestone-list{grid-template-columns:1fr}
.cp-card{padding:13px}
.cp-card p{min-height:0}
.cp-footer{padding:13px}
.cp-milestone{padding:9px 11px}
}

/* Cosmetic rewards are equipped as visible profile insignia and pass-frame accents. */
.start-hq-actions .cp-menu-button{grid-column:1/-1;background:#493e2b;color:#f7dfab!important;border-color:#cba967!important}
.cp-hq-emblem{display:inline-block;margin-top:9px;padding:5px 10px;background:linear-gradient(90deg,#40351f,#243747);border:1px solid #ac8a51;box-shadow:inset 0 0 0 1px #e7ce8b33;color:#f0cd82;font-size:12px;letter-spacing:.06em}
.cp-equipped{font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-left:4px solid #d5b270;background:linear-gradient(90deg,#53432a66,#18314433)}
.cp-live{padding:12px 15px;margin-bottom:16px;border:1px solid #4a6476;background:#0d2232;border-radius:7px;color:#d5e5e9}
.cp-live>b{display:block;margin-bottom:9px;font-size:12px;color:#efd08f;letter-spacing:.05em}
.cp-live-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 12px;font-size:12px}
.cp-live-grid span{color:#a9c2cf}
.cp-live-grid strong{color:#f1eee5}
@media(max-width:700px){.cp-live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Reward roadmap: connected milestone nodes, four campaign chapters, horizontal touch scrolling. */
.cp-roadmap{display:flex;flex-direction:column;gap:20px}
.cp-roadmap-chapter{padding:15px 14px 16px;border:1px solid #4a5961;border-radius:11px;background:linear-gradient(160deg,#101e2c,#152c3d)}
.cp-roadmap-chapter-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:0 2px 13px}
.cp-roadmap-chapter-head h3{font-size:17px;margin:4px 0 0}
.cp-roadmap-chapter-head>span{font-size:12px;color:#bac9d6;text-align:right}
.cp-roadmap-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#9b804f #182b3a;scrollbar-width:thin;padding:5px 0 12px}
.cp-roadmap-lane{display:flex;gap:12px;position:relative;min-width:max-content;isolation:isolate}
.cp-roadmap-rail{position:absolute;left:60px;right:60px;top:49px;height:5px;border-radius:5px;background:#3d5261;z-index:-1}
.cp-roadmap-rail>span{display:block;height:100%;border-radius:5px;background:#bf9b5d}
.cp-roadmap-tile{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:9px;width:163px;min-height:214px;padding:9px 10px 11px;text-align:center;border:1px solid #4a6071;border-radius:9px;background:linear-gradient(170deg,#1d3749,#14293a);white-space:normal;position:relative}
.cp-roadmap-tile.cp-ready{border-color:#e1bc78;box-shadow:0 0 0 1px #e1bc7855,0 0 18px #d7ac5338;background:linear-gradient(165deg,#403d2d,#1a3746)}
.cp-roadmap-tile.cp-done{border-color:#688f79}
.cp-roadmap-step{font-size:12px;color:#efd399;font-weight:800;font-variant-numeric:tabular-nums}
.cp-roadmap-node{display:grid;place-items:center;height:57px;width:57px;flex:none;border:3px solid #a38755;border-radius:50%;background:radial-gradient(circle at 34% 28%,#586270,#1b2c3e 70%);box-shadow:0 4px 11px #0007}
.cp-roadmap-glyph{font-family:Georgia,serif;font-size:28px;color:#f6d798;line-height:1}
.cp-kind-fragments .cp-roadmap-node{border-color:#a8a4d2;background:radial-gradient(circle at 30% 20%,#55567b,#252a49)}
.cp-kind-cosmetic .cp-roadmap-node{border-color:#edc77f;background:radial-gradient(circle at 32% 25%,#896a3b,#342d2c)}
.cp-kind-capacity .cp-roadmap-node{border-color:#f7e5a4;background:radial-gradient(circle at 35% 20%,#b4893d,#58451b);box-shadow:0 0 16px #d6a94a77}
.cp-roadmap-reward{display:flex;flex:1;flex-direction:column;justify-content:center;gap:6px;max-width:100%}
.cp-roadmap-type{font-size:10px;font-weight:800;letter-spacing:.09em;color:#a9bfcd}
.cp-kind-capacity .cp-roadmap-type,.cp-kind-cosmetic .cp-roadmap-type{color:#eecb85}
.cp-roadmap-reward strong{font-size:12px;font-weight:700;color:#f1ede0;line-height:1.3;overflow-wrap:anywhere}
.cp-roadmap-status{font-size:11px;color:#b7c5d0;min-height:25px;display:flex;align-items:center;justify-content:center}
.cp-roadmap-tile.cp-done .cp-roadmap-status{color:#a3dab9}
.cp-roadmap-tile button{min-width:80px;padding:6px 10px;font-size:12px;border-radius:6px}
.cp-roadmap-tile:focus-within{outline:2px solid #e6bf74;outline-offset:2px}
@media(max-width:700px){
  .cp-roadmap{gap:14px}
  .cp-roadmap-chapter{padding:12px 10px}
  .cp-roadmap-chapter-head{align-items:start}
  .cp-roadmap-chapter-head h3{font-size:15px}
  .cp-roadmap-chapter-head>span{font-size:11px;max-width:130px}
  .cp-roadmap-tile{width:146px;min-height:210px}
}


/* Actual distinct vector insignia for the five non-currency Challenge Pass cosmetics. */
.cp-roadmap-glyph{display:grid;place-items:center;position:relative}
.cp-roadmap-glyph .cp-reward-symbol{width:43px;height:43px}
.cp-roadmap-cap-star{position:absolute;right:-15px;bottom:0;background:#f3d590;color:#1e2e3a;border:1px solid #fff3c1;border-radius:12px;padding:2px 4px;font-size:9px;font-weight:900;white-space:nowrap}
.cp-reward-symbol{display:block;width:48px;height:48px;flex:none}
.cp-cosmetics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.cp-cosmetics .cp-cosmetic-card{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:144px;padding:12px 9px;border-radius:9px;background:#233d4d;border:1px solid #a58c5b;color:#f1e9d9;text-align:center}
.cp-cosmetic-card .cp-reward-symbol{width:62px;height:62px}
.cp-cosmetic-card b{font-size:12px;line-height:1.3}
.cp-cosmetic-card small{font-size:11px;color:#d8bf89}
.cp-cosmetics .cp-cosmetic-card.active{background:#554632;border-color:#e9cc91}
.cp-cosmetics .cp-cosmetic-card.cp-cosmetic-locked{opacity:.69;border-style:dashed}
.cp-equipped,.cp-hq-emblem{display:flex;align-items:center;gap:7px}
.cp-equipped .cp-reward-symbol,.cp-hq-emblem .cp-reward-symbol{width:33px;height:33px}
@media(max-width:700px){.cp-cosmetics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Preserve the original symbolic cosmetic designs in roadmap, gallery and HQ. */
.cp-cosmetic-symbol{display:inline-flex;align-items:center;justify-content:center;font-size:32px;line-height:1;color:#f1d49a}
.cp-cosmetic-card .cp-cosmetic-symbol{width:62px;height:62px;font-size:42px}