:root{
  --cx-bg:#05080d;
  --cx-panel:#08111c;
  --cx-line:rgba(142,180,214,.22);
  --cx-text:#f4f7fb;
  --cx-muted:#8e99a9;
  --cx-cyan:#37d7ff;
  --cx-purple:#a66cff;
}
body.cx-command-home{overflow:hidden;background:#03060a;}
body.cx-command-home > .app{display:none!important;}
body:not(.cx-command-home) > #cxCommandCenter{display:none!important;}
#cxCommandCenter{position:fixed;inset:0;z-index:40;padding:3.4vh 3.6vw;background:
 radial-gradient(circle at 52% 42%,rgba(64,75,146,.10),transparent 28%),
 radial-gradient(circle at 26% 50%,rgba(0,178,255,.06),transparent 27%),
 radial-gradient(circle at 76% 50%,rgba(121,55,255,.08),transparent 28%),#03060a;color:var(--cx-text);font-family:Inter,Segoe UI,Arial,sans-serif;box-sizing:border-box;}
#cxCommandCenter *{box-sizing:border-box}
.cx-shell{height:100%;border:1px solid rgba(139,164,190,.28);border-radius:28px;position:relative;overflow:hidden;box-shadow:inset 0 0 60px rgba(73,110,150,.05),0 0 70px rgba(0,0,0,.6);background:linear-gradient(135deg,rgba(7,11,17,.94),rgba(2,5,9,.96));}
.cx-shell:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(90,130,170,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(90,130,170,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(circle at center,#000,transparent 75%)}
.cx-brand{position:absolute;left:30px;top:25px;z-index:3;letter-spacing:.48em;font-size:20px;font-weight:700}.cx-brand small{display:block;margin-top:9px;font-size:8px;color:#8d98a8;letter-spacing:.52em;font-weight:500}
.cx-status{position:absolute;right:28px;top:28px;display:flex;align-items:center;gap:12px;border:1px solid var(--cx-line);border-radius:8px;padding:11px 16px;color:#aeb8c7;font-size:9px;letter-spacing:.28em}.cx-status i{width:7px;height:7px;border-radius:50%;background:#26edbf;box-shadow:0 0 12px #26edbf}
.cx-sidebar{position:absolute;z-index:4;left:0;top:110px;bottom:34px;width:116px;border-right:1px solid rgba(134,164,196,.14);display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:0 0 0 0}
.cx-nav{appearance:none;border:0;background:transparent;color:#aeb5c1;height:84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;position:relative;font-size:9px;letter-spacing:.18em;text-transform:uppercase;transition:.25s}.cx-nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}.cx-nav:hover{color:white;background:rgba(56,187,255,.05)}.cx-nav.active{color:#5ee2ff;background:linear-gradient(90deg,rgba(42,161,224,.18),rgba(42,161,224,.03));box-shadow:inset 3px 0 0 #46d7ff}.cx-nav.active:after{content:"";position:absolute;right:-2px;bottom:0;width:5px;height:5px;border-radius:50%;background:#43d9ff;box-shadow:0 0 12px #43d9ff}
.cx-main{position:absolute;left:116px;right:0;top:0;bottom:0;display:grid;grid-template-columns:minmax(310px,1fr) 250px minmax(310px,1fr);align-items:center;gap:7%;padding:120px 9% 70px;}
.cx-orbit{position:absolute;left:50%;top:45%;width:330px;height:330px;transform:translate(-50%,-50%);border:1px solid rgba(108,139,190,.12);border-radius:50%;pointer-events:none}.cx-orbit:before,.cx-orbit:after{content:"";position:absolute;border:1px solid rgba(108,139,190,.1);border-radius:50%;inset:47px}.cx-orbit:after{inset:95px}
.cx-center{text-align:center;z-index:2}.cx-logo{width:126px;height:126px;margin:0 auto 40px;border-radius:50%;border:1px solid rgba(77,215,255,.62);display:grid;place-items:center;box-shadow:inset 0 0 30px rgba(78,149,255,.12),0 0 32px rgba(51,191,255,.08);position:relative}.cx-logo:before{content:"";position:absolute;inset:14px;border-radius:50%;border-top:1px solid #50e0ff;border-right:1px solid #a66cff;transform:rotate(20deg)}.cx-x{font-size:64px;font-weight:900;font-style:italic;line-height:1;background:linear-gradient(120deg,#4de8ff,#c883ff);-webkit-background-clip:text;color:transparent;text-shadow:0 0 28px rgba(79,214,255,.45)}
.cx-welcome{color:#8f98a7;font-size:14px;letter-spacing:.1em}.cx-commander{margin-top:9px;letter-spacing:.42em;font-size:17px;font-weight:700}.cx-center-line{width:50px;height:1px;margin:18px auto;background:linear-gradient(90deg,transparent,#3ee3ff,transparent)}.cx-center p{color:#727d8c;font-size:12px;line-height:1.7;margin:0}
.cx-card{height:min(510px,60vh);min-height:390px;position:relative;padding:58px 42px 34px;clip-path:polygon(8% 0,92% 0,100% 7%,100% 93%,92% 100%,8% 100%,0 93%,0 7%);background:linear-gradient(145deg,rgba(7,22,35,.95),rgba(2,10,17,.95));border:1px solid transparent;isolation:isolate;cursor:pointer;transition:transform .3s,filter .3s}.cx-card:before{content:"";position:absolute;inset:0;z-index:-2;clip-path:inherit;background:linear-gradient(135deg,rgba(94,223,255,.95),rgba(48,110,150,.25),rgba(70,221,255,.95))}.cx-card:after{content:"";position:absolute;inset:1px;z-index:-1;clip-path:inherit;background:radial-gradient(circle at 15% 10%,rgba(13,70,102,.25),transparent 38%),linear-gradient(145deg,#071521,#020a11)}.cx-card.purple:before{background:linear-gradient(135deg,rgba(190,120,255,.95),rgba(76,41,131,.28),rgba(190,120,255,.95))}.cx-card.purple:after{background:radial-gradient(circle at 82% 8%,rgba(89,35,170,.27),transparent 42%),linear-gradient(145deg,#140b26,#090511)}.cx-card:hover{transform:translateY(-7px);filter:brightness(1.12)}
.cx-kicker{display:inline-block;border:1px solid rgba(58,209,255,.18);padding:8px 15px;border-radius:4px;color:#53dfff;font-size:9px;letter-spacing:.25em}.purple .cx-kicker{color:#bd80ff;border-color:rgba(182,107,255,.18)}.cx-card h2{font-size:30px;letter-spacing:.08em;margin:32px 0 20px;font-weight:600}.cx-card .dash{width:52px;height:1px;background:linear-gradient(90deg,#42dfff,transparent);margin-bottom:20px}.purple .dash{background:linear-gradient(90deg,#b16fff,transparent)}.cx-card p{font-size:13px;line-height:1.75;color:#9aa5b5;max-width:270px}.cx-card-icon{width:70px;height:70px;border:1px solid rgba(61,215,255,.24);border-radius:50%;display:grid;place-items:center;margin-top:40px;color:#42ddff}.purple .cx-card-icon{color:#b778ff;border-color:rgba(184,119,255,.28)}.cx-card-icon svg{width:29px;height:29px;stroke:currentColor;fill:none;stroke-width:1.5}.cx-enter{position:absolute;left:42px;right:42px;bottom:30px;border-top:1px solid rgba(130,164,192,.14);padding-top:24px;text-align:center;color:#45ddff;font-size:11px;letter-spacing:.32em}.purple .cx-enter{color:#bc78ff}
@media(max-width:980px){#cxCommandCenter{padding:0}.cx-shell{border-radius:0}.cx-main{grid-template-columns:1fr 1fr;left:86px;padding:120px 5% 35px;gap:24px}.cx-center,.cx-orbit{display:none}.cx-sidebar{width:86px}.cx-card{height:58vh;padding-left:28px;padding-right:28px}.cx-enter{left:28px;right:28px}}
@media(max-width:680px){body.cx-command-home{overflow:auto}.cx-shell{min-height:100vh}.cx-brand{font-size:15px}.cx-status{display:none}.cx-sidebar{position:absolute;top:80px;bottom:auto;right:0;width:auto;height:68px;left:0;border-right:0;border-bottom:1px solid rgba(134,164,196,.14);flex-direction:row;padding-left:10px}.cx-nav{height:68px;width:100px}.cx-main{position:relative;left:0;top:148px;display:flex;flex-direction:column;padding:22px 18px 190px}.cx-card{width:100%;height:430px;min-height:0}.cx-center{display:none}}

/* ============================================================
   Persistent ChausX shell — Series screen
============================================================ */
body:not(.cx-command-home){
  overflow:hidden;
  background:#03060a;
}
body:not(.cx-command-home) > #cxCommandCenter{
  display:block!important;
  pointer-events:none;
  z-index:20;
}
body:not(.cx-command-home) #cxCommandCenter{
  background:
    radial-gradient(circle at 30% 20%,rgba(38,184,255,.08),transparent 30%),
    radial-gradient(circle at 78% 70%,rgba(139,75,255,.07),transparent 35%),
    #03060a;
}
body:not(.cx-command-home) #cxCommandCenter .cx-shell{
  pointer-events:none;
}
body:not(.cx-command-home) #cxCommandCenter .cx-main{
  display:none;
}
body:not(.cx-command-home) #cxCommandCenter .cx-brand,
body:not(.cx-command-home) #cxCommandCenter .cx-status,
body:not(.cx-command-home) #cxCommandCenter .cx-sidebar{
  pointer-events:auto;
}
body:not(.cx-command-home) > .bg,
body:not(.cx-command-home) > .shade{
  display:none;
}
body:not(.cx-command-home) > .app{
  display:block!important;
  position:fixed;
  z-index:21;
  left:calc(3.6vw + 117px);
  right:3.6vw;
  top:calc(3.4vh + 91px);
  bottom:3.4vh;
  padding:26px 32px 42px;
  overflow:auto;
  background:transparent;
  scrollbar-color:rgba(77,216,255,.36) transparent;
}
body:not(.cx-command-home) > .app::-webkit-scrollbar{width:8px}
body:not(.cx-command-home) > .app::-webkit-scrollbar-track{background:transparent}
body:not(.cx-command-home) > .app::-webkit-scrollbar-thumb{background:rgba(77,216,255,.25);border-radius:999px}
body:not(.cx-command-home) > .app > .inner{
  width:min(1380px,100%);
  margin:0 auto;
  padding:0!important;
}
body.chxHubSeriesActive .header,
body.chxHubSeriesActive .compactTopBar,
body.chxHubSeriesActive .collectionHeader,
body.chxHubSeriesActive .saveNotice{
  display:none!important;
}
body.chxHubSeriesActive #content{
  width:100%;
  min-height:100%;
}
body.chxHubSeriesActive .chxSeriesHomeBack{
  display:none!important;
}
.cxSeriesPageHeader{
  position:relative;
  margin:0 0 22px;
  padding:8px 4px 20px;
  border-bottom:1px solid rgba(116,170,211,.16);
}
.cxSeriesPageHeader:after{
  content:"";
  position:absolute;
  left:4px;
  bottom:-1px;
  width:92px;
  height:1px;
  background:linear-gradient(90deg,#43ddff,transparent);
  box-shadow:0 0 14px rgba(67,221,255,.55);
}
.cxSeriesEyebrow{
  display:block;
  margin-bottom:10px;
  color:#4edfff;
  font-size:9px;
  font-weight:800;
  letter-spacing:.34em;
}
.cxSeriesPageHeader h2{
  margin:0;
  color:#f4f7fb;
  font-size:34px;
  font-weight:600;
  letter-spacing:.14em;
}
.cxSeriesPageHeader p{
  margin:9px 0 0;
  color:#7f8b9c;
  font-size:12px;
  letter-spacing:.035em;
}
body.chxHubSeriesActive .collectionTop.chxToolbarTop{
  min-height:58px;
  margin:0 0 24px!important;
  padding:10px 14px!important;
  border:1px solid rgba(104,163,203,.17)!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,rgba(9,24,37,.84),rgba(9,12,23,.72))!important;
  box-shadow:inset 0 0 28px rgba(42,173,225,.035)!important;
}
body.chxHubSeriesActive .collectionTop.chxToolbarTop button,
body.chxHubSeriesActive .collectionTop.chxToolbarTop select,
body.chxHubSeriesActive .collectionTop.chxToolbarTop label{
  border-color:rgba(76,203,242,.20)!important;
  color:#a9b8c8!important;
  background:rgba(7,19,30,.72)!important;
}
body.chxHubSeriesActive .seriesGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
  margin:0!important;
  padding:0 2px 30px!important;
}
body.chxHubSeriesActive .seriesCard{
  min-height:215px!important;
  height:auto!important;
  border:1px solid rgba(80,204,243,.20)!important;
  border-radius:4px!important;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px);
  overflow:hidden!important;
  background:linear-gradient(145deg,rgba(7,22,35,.96),rgba(3,9,16,.97))!important;
  box-shadow:inset 0 0 30px rgba(41,154,206,.045),0 14px 28px rgba(0,0,0,.26)!important;
  transform:none!important;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,filter .25s ease!important;
}
body.chxHubSeriesActive .seriesCard:nth-child(3n+2){
  border-color:rgba(166,108,255,.22)!important;
  background:linear-gradient(145deg,rgba(18,10,37,.96),rgba(6,5,15,.98))!important;
}
body.chxHubSeriesActive .seriesCard:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(81,224,255,.62)!important;
  box-shadow:inset 0 0 36px rgba(48,178,236,.09),0 18px 38px rgba(0,0,0,.4),0 0 20px rgba(47,197,255,.08)!important;
  filter:brightness(1.08);
}
body.chxHubSeriesActive .seriesCard:nth-child(3n+2):hover{
  border-color:rgba(187,122,255,.66)!important;
  box-shadow:inset 0 0 36px rgba(142,72,238,.10),0 18px 38px rgba(0,0,0,.4),0 0 20px rgba(147,82,255,.09)!important;
}
body.chxHubSeriesActive .seriesCard.seriesCardOpening{
  pointer-events:none;
  animation:cxSeriesCardOpening .32s cubic-bezier(.2,.75,.24,1) both!important;
}
@keyframes cxSeriesCardOpening{
  0%{filter:brightness(1.08)}
  52%{filter:brightness(1.30) saturate(1.14)}
  100%{filter:brightness(1.08)}
}
body.chxHubSeriesActive .seriesCover{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:.66!important;
  filter:saturate(.78) contrast(1.08)!important;
  transition:transform .5s ease,opacity .3s ease,filter .3s ease!important;
}
body.chxHubSeriesActive .seriesCard:hover .seriesCover{
  transform:scale(1.045)!important;
  opacity:.82!important;
  filter:saturate(.95) contrast(1.08)!important;
}
body.chxHubSeriesActive .seriesCard:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(2,8,14,.04) 20%,rgba(3,8,14,.40) 58%,rgba(2,7,12,.96) 100%)!important;
}
body.chxHubSeriesActive .seriesInfo{
  z-index:3!important;
  padding:22px!important;
}
body.chxHubSeriesActive .seriesName{
  color:#f4f7fb!important;
  font-size:20px!important;
  font-weight:650!important;
  letter-spacing:.08em!important;
  text-shadow:0 2px 16px #000!important;
}
body.chxHubSeriesActive .seriesCount{
  color:#56dcfa!important;
  font-size:9px!important;
  letter-spacing:.15em!important;
  text-transform:uppercase!important;
}
body.chxHubSeriesActive .seriesCard:nth-child(3n+2) .seriesCount{color:#bb80ff!important}
body.chxHubSeriesActive .seriesComingSoon{
  border:1px solid rgba(119,150,177,.22)!important;
  color:#8d9bad!important;
  background:rgba(4,10,17,.72)!important;
  letter-spacing:.12em!important;
}
body.chxHubSeriesActive .seriesCard.emptySeries{
  opacity:.58!important;
  filter:saturate(.5)!important;
}

@media(max-width:1120px){
  body.chxHubSeriesActive .seriesGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  body:not(.cx-command-home) > .app{
    left:0;right:0;top:148px;bottom:0;padding:20px 16px 40px;
  }
  body:not(.cx-command-home) #cxCommandCenter .cx-shell{min-height:100vh}
  body.chxHubSeriesActive .seriesGrid{grid-template-columns:1fr!important;gap:14px!important}
  body.chxHubSeriesActive .seriesCard{min-height:190px!important}
  .cxSeriesPageHeader h2{font-size:27px}
}


/* Series layout refinements: maximize content and contain toolbar */
body.chxHubSeriesActive > .app{
  top:calc(3.4vh + 76px);
  padding-top:12px;
}
body.chxHubSeriesActive .cxSeriesPageHeader{
  display:none!important;
}
body.chxHubSeriesActive .collectionTop.chxToolbarTop{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  flex-wrap:wrap!important;
  gap:10px 14px!important;
  margin-bottom:18px!important;
}
body.chxHubSeriesActive .chxToolbarLeft,
body.chxHubSeriesActive .chxToolbarRight,
body.chxHubSeriesActive .seriesControls,
body.chxHubSeriesActive .chxToolbarRewardsRow{
  min-width:0!important;
  max-width:100%!important;
}
body.chxHubSeriesActive .chxToolbarLeft{
  flex:1 1 auto!important;
}
body.chxHubSeriesActive .chxToolbarRight{
  flex:0 1 auto!important;
  margin-left:auto!important;
}
body.chxHubSeriesActive .seriesControls,
body.chxHubSeriesActive .chxToolbarRewardsRow{
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:10px!important;
}
body.chxHubSeriesActive .collectionTop.chxToolbarTop button,
body.chxHubSeriesActive .collectionTop.chxToolbarTop select,
body.chxHubSeriesActive .collectionTop.chxToolbarTop label{
  max-width:100%!important;
  flex-shrink:1!important;
}
@media(max-width:900px){
  body.chxHubSeriesActive .chxToolbarRight{
    width:100%!important;
    margin-left:0!important;
  }
}

/* ============================================================
   Full-screen shell cleanup + integrated Settings screen
============================================================ */
#cxCommandCenter .cx-status,
#chausxCloudPanel,
#chausxCloudSyncBadge,
.audioControls{
  display:none!important;
}

.cx-sidebar{
  top:0;
  bottom:0;
  padding:12px 0;
}

.cx-nav-separator{
  width:calc(100% - 30px);
  height:1px;
  flex:none;
  margin:auto auto 0;
  background:linear-gradient(90deg,transparent,rgba(112,166,204,.34),transparent);
}

.cx-settings-nav{
  flex:none;
  color:#8f9aaa;
}

.cx-sidebar-economy{
  position:relative;
  flex:none;
  display:grid;
  width:calc(100% - 16px);
  min-height:58px;
  align-content:center;
  gap:7px;
  margin:0 8px;
  padding:9px 6px;
  overflow:hidden;
  border:1px solid rgba(67,217,255,.2);
  color:#dff9ff;
  background:linear-gradient(135deg,rgba(10,55,72,.68),rgba(2,18,28,.72));
  cursor:pointer;
}
.cx-sidebar-economy::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:28px;height:2px;
  background:#43d9ff;
  box-shadow:0 0 10px rgba(67,217,255,.5);
}
.cx-sidebar-economy:hover{
  border-color:rgba(67,217,255,.5);
  background:linear-gradient(135deg,rgba(13,83,105,.76),rgba(3,29,42,.8));
}
.cx-sidebar-credit-line{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:4px;
}
.cx-sidebar-credit-line strong{font:900 16px/1 Arial,sans-serif}
.cx-sidebar-credit-line small{color:#52def9;font:900 7px/1 Arial,sans-serif;letter-spacing:.08em}
.cx-sidebar-tier{
  max-width:100%;
  overflow:hidden;
  color:#7f9aa8;
  font:900 6px/1.15 Arial,sans-serif;
  letter-spacing:.1em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.cx-settings-nav.active{
  color:#5ee2ff;
  background:linear-gradient(90deg,rgba(42,161,224,.18),rgba(42,161,224,.03));
  box-shadow:inset 3px 0 0 #46d7ff;
}

.cx-settings-panel{
  position:fixed;
  z-index:60;
  left:116px;
  right:0;
  top:0;
  bottom:0;
  box-sizing:border-box;
  display:none;
  flex-direction:column;
  min-width:0;
  overflow:auto;
  padding:clamp(22px,3.2vw,54px);
  color:#f4f7fb;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 24% 10%,rgba(37,181,235,.10),transparent 30%),
    radial-gradient(circle at 88% 76%,rgba(132,75,231,.08),transparent 34%),
    linear-gradient(145deg,#06101a,#03060b 58%,#080713);
}

.cx-settings-panel.show{display:flex}

.cx-settings-panel:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.20;
  background-image:
    linear-gradient(rgba(90,130,170,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,130,170,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center,#000,transparent 78%);
}

.cx-settings-header{
  width:100%;
  max-width:1220px;
  margin:0 auto clamp(20px,3vh,34px);
  padding:0 0 20px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid rgba(103,171,212,.18);
}

.cx-settings-kicker{
  display:block;
  margin-bottom:10px;
  color:#50ddfb;
  font-size:9px;
  font-weight:800;
  letter-spacing:.34em;
}

.cx-settings-header h2{
  margin:0;
  font-size:clamp(30px,4vw,48px);
  font-weight:600;
  letter-spacing:.14em;
}

.cx-settings-header p{
  margin:9px 0 0;
  color:#7f8b9c;
  font-size:12px;
  letter-spacing:.04em;
}

.cx-settings-close{
  width:42px;
  height:42px;
  flex:none;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(76,203,242,.22);
  border-radius:10px;
  color:#9eb0c2;
  background:rgba(7,19,30,.74);
  box-shadow:none;
}

.cx-settings-close:hover{
  color:#fff;
  border-color:rgba(77,216,255,.55);
  background:rgba(25,91,119,.34);
}

.cx-settings-audio-host{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:clamp(16px,2vw,28px);
}

.cx-settings-account{
  width:100%;
  max-width:1220px;
  margin:0 auto clamp(18px,2.5vw,30px);
  padding:clamp(18px,2.2vw,28px);
  border:1px solid rgba(76,203,242,.22);
  border-radius:16px;
  background:
    radial-gradient(circle at 5% 0,rgba(50,199,240,.13),transparent 42%),
    linear-gradient(145deg,rgba(8,25,39,.94),rgba(6,8,17,.96));
  box-shadow:inset 0 0 34px rgba(43,178,225,.035),0 20px 44px rgba(0,0,0,.24);
}

.cx-settings-language{
  width:100%;
  max-width:1220px;
  margin:0 auto clamp(18px,2.5vw,30px);
  padding:clamp(17px,2vw,24px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border:1px solid rgba(76,203,242,.22);
  border-radius:16px;
  background:
    radial-gradient(circle at 7% 0,rgba(50,199,240,.10),transparent 44%),
    linear-gradient(145deg,rgba(8,25,39,.92),rgba(6,8,17,.95));
  box-shadow:inset 0 0 30px rgba(43,178,225,.03),0 18px 38px rgba(0,0,0,.20);
}

.cx-settings-language h3{
  margin:0;
  color:#effbff;
  font-size:18px;
  font-weight:900;
  letter-spacing:.12em;
}

.cx-settings-language p{
  margin:8px 0 0;
  color:#7f91a1;
  font-size:11px;
  line-height:1.45;
}

.cx-settings-language label{
  width:min(310px,42%);
  display:grid;
  gap:8px;
}

.cx-settings-language label>span{
  color:#6f8193;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.cx-settings-language select{
  width:100%;
  min-height:44px;
  padding:0 42px 0 14px;
  border:1px solid rgba(91,218,247,.32);
  border-radius:9px;
  color:#e8faff;
  background-color:rgba(4,14,24,.86);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cx-settings-account-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(103,171,212,.15);
}

.cx-settings-section-kicker{
  display:block;
  margin-bottom:6px;
  color:#55d9f7;
  font-size:8px;
  font-weight:900;
  letter-spacing:.26em;
}

.cx-settings-account-head h3{
  margin:0;
  color:#effbff;
  font-size:18px;
  font-weight:900;
  letter-spacing:.12em;
}

.cx-settings-connection-state{
  padding:7px 10px;
  border:1px solid rgba(140,154,171,.22);
  border-radius:999px;
  color:#8e9baa;
  background:rgba(57,66,78,.22);
  font-size:9px;
  font-weight:900;
  letter-spacing:.11em;
}

.cx-settings-connection-state.connected{
  border-color:rgba(65,221,181,.42);
  color:#8ff5d7;
  background:rgba(33,139,113,.18);
  box-shadow:0 0 20px rgba(49,210,171,.10);
}

.cx-settings-account-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.cx-settings-account-field{
  min-width:0;
  min-height:70px;
  padding:13px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(95,161,196,.13);
  border-radius:11px;
  background:rgba(4,13,23,.54);
}

.cx-settings-account-field span{
  color:#6f8193;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.cx-settings-account-field strong{
  overflow:hidden;
  color:#dcebf2;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.cx-settings-account-field.tier strong{
  color:#7fe8ff;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.cx-settings-account-field.role strong{
  color:#f3c66d;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cx-settings-account-actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px;
}

.cx-settings-account-actions button{
  min-height:38px;
  padding:0 16px;
  border-radius:9px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.10em;
}

.cx-settings-patreon-action{
  border:1px solid rgba(72,210,244,.38);
  color:#bdf4ff;
  background:linear-gradient(135deg,rgba(30,128,164,.65),rgba(50,77,150,.65));
}

.cx-settings-patreon-action.disconnect{
  border-color:rgba(241,162,81,.36);
  color:#ffd5a5;
  background:rgba(131,69,28,.34);
}

.cx-settings-logout{
  border:1px solid rgba(240,92,111,.32);
  color:#ffb5bf;
  background:rgba(125,30,48,.30);
}

.cx-settings-logout:hover{
  border-color:rgba(255,109,127,.58);
  color:#fff;
  background:rgba(168,39,60,.48);
}

.cx-settings-audio-host .chausxAudioPanel,
.cx-settings-audio-host #chausxMusicPanel.chausxAudioPanel,
.cx-settings-audio-host #chausxSfxPanel.chausxAudioPanel{
  position:relative!important;
  inset:auto!important;
  right:auto!important;
  bottom:auto!important;
  display:block!important;
  box-sizing:border-box!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(20px,2.4vw,32px)!important;
  border:1px solid rgba(76,203,242,.22)!important;
  border-radius:16px!important;
  color:#f4f7fb!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(50,199,240,.12),transparent 48%),
    linear-gradient(145deg,rgba(8,25,39,.94),rgba(6,8,17,.96))!important;
  box-shadow:inset 0 0 34px rgba(43,178,225,.035),0 20px 44px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px)!important;
}

.cx-settings-audio-host .chausxAudioPanelTitle{
  margin-bottom:24px;
  color:#eafaff;
  text-align:left;
  font-size:18px;
  letter-spacing:.12em;
  text-shadow:0 0 18px rgba(74,217,255,.20);
}

.cx-settings-audio-host .chausxAudioSpeaker{color:#59daf7}

.cx-settings-audio-host .chausxAudioGaugeFill{
  background:linear-gradient(90deg,#269bc2,#59ddf8,#7f8cff);
  box-shadow:0 0 18px rgba(66,205,244,.36);
}

.cx-settings-audio-host .chausxAudioOption.active{
  border-color:rgba(94,223,255,.68);
  background:linear-gradient(135deg,#257fa4,#476dcc);
  box-shadow:0 10px 26px rgba(42,163,218,.18),inset 0 1px 0 rgba(255,255,255,.16);
}

@media(max-width:1280px){
  .cx-settings-panel{left:86px}
}

@media(max-width:760px){
  .cx-settings-audio-host{grid-template-columns:1fr}
  .cx-settings-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-settings-language{align-items:stretch;flex-direction:column}
  .cx-settings-language label{width:100%}
}

@media(max-width:680px){
  .cx-sidebar{
    top:0;
    height:68px;
    gap:0;
    padding:0 4px;
    overflow-x:auto;
    overflow-y:hidden;
  }

  .cx-sidebar .cx-nav{
    width:clamp(68px,22vw,92px);
  }

  .cx-nav-separator{
    width:1px;
    height:38px;
    margin:15px 0 15px auto;
    background:linear-gradient(180deg,transparent,rgba(112,166,204,.34),transparent);
  }

  .cx-settings-nav{width:clamp(68px,22vw,92px)}
  .cx-sidebar-economy{
    width:88px;
    min-height:56px;
    margin:6px 4px;
    padding:6px 4px;
  }

  .cx-main{top:68px}

  body:not(.cx-command-home) > .app,
  body.chxHubSeriesActive > .app,
  body.chxHubCollectionsActive > .app{
    top:68px!important;
  }

  .cx-settings-panel{
    left:0;
    top:68px;
    padding:20px 14px 32px;
  }

  .cx-settings-header{margin-bottom:18px}
  .cx-settings-header h2{font-size:28px}
  .cx-settings-kicker{letter-spacing:.22em}
  .cx-settings-account-grid{grid-template-columns:1fr}
  .cx-settings-account-actions{justify-content:stretch}
  .cx-settings-account-actions button{flex:1 1 100%}
}

/* Account controls are available only from Settings. */
#chausxPatreonHubPanel,
#chausxLogoutFloating,
#chausxAccessBadge{
  display:none!important;
}

/* ============================================================
   Full viewport + responsive containment
   Keep the command-center visual language while using every
   available pixel and preventing wide children from overflowing.
============================================================ */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

#cxCommandCenter{
  padding:0;
  overflow:hidden;
}

.cx-shell{
  width:100%;
  max-width:100%;
  border:0;
  border-radius:0;
}

.cx-main,
.cx-main > *,
body:not(.cx-command-home) > .app,
body:not(.cx-command-home) > .app > .inner,
body:not(.cx-command-home) #content{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

body:not(.cx-command-home) > .app{
  left:116px;
  right:0;
  top:90px;
  bottom:0;
  width:auto!important;
  max-width:none!important;
  padding:clamp(16px,2vw,32px);
  overflow-x:hidden;
}

body:not(.cx-command-home) > .app > .inner{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body.chxHubSeriesActive > .app{
  top:76px;
}

/* The three-column home needs more room than its old breakpoint allowed. */
@media(max-width:1280px){
  .cx-main{
    left:86px;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(18px,3vw,36px);
    padding:110px clamp(24px,5vw,64px) 40px;
  }

  .cx-sidebar{width:86px}
  .cx-center,
  .cx-orbit{display:none}
  .cx-card{min-width:0}

  body:not(.cx-command-home) > .app{left:86px}
}

@media(max-width:680px){
  #cxCommandCenter{overflow-y:auto}
  .cx-shell{overflow:visible}

  .cx-main{
    left:0;
    right:0;
    width:100%;
    padding:22px 16px 190px;
  }

  body:not(.cx-command-home) > .app{
    left:0;
    right:0;
    top:148px;
    bottom:0;
    width:100%;
    padding:16px;
  }

  body.chxHubSeriesActive > .app{top:148px}
}

/* ============================================================
   Collections command bar
   Reuse the Series screen chrome so navigation and filtering feel
   like parts of the same application.
============================================================ */
body.chxHubCollectionsActive > .app{
  top:76px;
  padding-top:12px;
}

body.chxHubCollectionsActive .chxCollectionsScreen{
  width:100%!important;
  max-width:none!important;
  padding:0 0 40px!important;
}

body.chxHubCollectionsActive .chxCollectionCompactHeader{
  display:none!important;
}

body.chxHubCollectionsActive .compactTopBar,
body.chxHubCollectionsActive .collectionHeader{
  display:none!important;
}

body.chxHubCollectionsActive .chxCollectionTabsRow{
  position:relative;
  z-index:12;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:58px;
  margin:0 0 18px!important;
  padding:10px 14px!important;
  display:flex!important;
  flex-flow:row wrap!important;
  align-items:center!important;
  gap:10px!important;
  overflow:visible!important;
  border:1px solid rgba(104,163,203,.17)!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,rgba(9,24,37,.84),rgba(9,12,23,.72))!important;
  box-shadow:inset 0 0 28px rgba(42,173,225,.035)!important;
}

body.chxHubCollectionsActive .chxCollectionTabs{
  width:auto!important;
  min-width:0!important;
  max-width:100%!important;
  flex:1 1 auto!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
}

body.chxHubCollectionsActive .chxCollectionTabs button,
body.chxHubCollectionsActive .chxCollectionSeriesFilterButton,
body.chxHubCollectionsActive .chxCollectionGroupToggle,
body.chxHubCollectionsActive .chxCollectionRewardsRow button{
  min-height:38px!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  flex:0 1 auto!important;
  border:1px solid rgba(76,203,242,.20)!important;
  border-radius:999px!important;
  color:#a9b8c8!important;
  background:rgba(7,19,30,.72)!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}

body.chxHubCollectionsActive .chxCollectionTabs button:hover,
body.chxHubCollectionsActive .chxCollectionSeriesFilterButton:hover,
body.chxHubCollectionsActive .chxCollectionSeriesFilterButton.active,
body.chxHubCollectionsActive .chxCollectionGroupToggle:hover,
body.chxHubCollectionsActive .chxCollectionRewardsRow button:hover{
  color:#eafaff!important;
  border-color:rgba(77,216,255,.48)!important;
  background:rgba(25,91,119,.32)!important;
}

body.chxHubCollectionsActive .chxCollectionTabs button.active,
body.chxHubCollectionsActive .chxCollectionGroupToggle.active{
  color:#62e3ff!important;
  border-color:rgba(77,216,255,.55)!important;
  background:linear-gradient(90deg,rgba(34,139,180,.28),rgba(34,92,146,.18))!important;
  box-shadow:inset 0 0 18px rgba(58,208,255,.06)!important;
}

body.chxHubCollectionsActive .chxCollectionGroupToggle .check{
  flex:none;
  border-color:rgba(76,203,242,.28)!important;
  color:#031018!important;
  background:rgba(7,19,30,.72)!important;
}

body.chxHubCollectionsActive .chxCollectionGroupToggle.active .check{
  border-color:#5edfff!important;
  background:linear-gradient(135deg,#9af0ff,#39c4ec)!important;
}

body.chxHubCollectionsActive .chxCollectionSeriesFilterWrap{
  position:relative;
  flex:0 1 auto;
  min-width:0;
}

body.chxHubCollectionsActive .chxCollectionRewardsRow{
  min-width:0!important;
  max-width:100%!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}

body.chxHubCollectionsActive .chxCollectionRewardsRow .chxToolbarBonusCode{
  border-color:transparent!important;
  color:#91a3b7!important;
  background:transparent!important;
  text-decoration:underline;
  text-underline-offset:4px;
}

body.chxHubCollectionsActive .chxCollectionRewardsRow .chxToolbarDailyBox{
  color:#a9b8c8!important;
}

body.chxHubCollectionsActive .chxCollectionSeriesFilterButton strong{
  color:#031018!important;
  background:#60dcf7!important;
}

body.chxHubCollectionsActive .chxCollectionGalleryHost,
body.chxHubCollectionsActive .chxRealCollectionCardGrid{
  min-width:0!important;
  max-width:100%!important;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid{
  padding:0 2px 36px!important;
}

@media(max-width:900px){
  body.chxHubCollectionsActive .chxCollectionTabs{
    flex-basis:100%!important;
  }
}

@media(max-width:680px){
  body.chxHubCollectionsActive > .app{
    top:148px;
    padding-top:16px;
  }

  body.chxHubCollectionsActive .chxCollectionTabsRow{
    padding:10px!important;
  }

  body.chxHubCollectionsActive .chxCollectionTabs button,
  body.chxHubCollectionsActive .chxCollectionSeriesFilterButton,
  body.chxHubCollectionsActive .chxCollectionGroupToggle,
  body.chxHubCollectionsActive .chxCollectionRewardsRow button{
    min-height:36px!important;
    padding:0 11px!important;
    font-size:10px!important;
  }
}

/* Authoritative full-screen offsets (kept last in the cascade). */
body:not(.cx-command-home) > .app,
body.chxHubSeriesActive > .app,
body.chxHubCollectionsActive > .app{
  top:0!important;
  padding-top:0!important;
}

@media(max-width:680px){
  body:not(.cx-command-home) > .app,
  body.chxHubSeriesActive > .app,
  body.chxHubCollectionsActive > .app{
    top:68px!important;
    padding-top:0!important;
  }
}

/* ============================================================
   Collections grouped by series
   Treat each series as a compact command panel. Two panels share
   a row on wide screens and collapse naturally when space is tight.
============================================================ */
body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:start!important;
  gap:16px!important;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped > .chxCollectionSeriesGroup{
  position:relative;
  grid-column:auto!important;
  min-width:0!important;
  padding:0 12px 12px!important;
  overflow:hidden;
  border:1px solid rgba(92,191,230,.25);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(10,29,44,.94),rgba(7,12,23,.94)),
    radial-gradient(circle at 100% 0,rgba(61,201,246,.10),transparent 45%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 14px 34px rgba(0,0,0,.20);
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped > .chxCollectionSeriesGroup::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,#47d5f5,rgba(71,213,245,.26) 62%,transparent);
  box-shadow:0 0 18px rgba(71,213,245,.28);
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped > .chxCollectionSeriesGroup:hover{
  border-color:rgba(84,214,250,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 16px 38px rgba(0,0,0,.26),
    0 0 24px rgba(48,187,232,.045);
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesTitle{
  min-height:70px;
  margin:0 -12px 12px!important;
  padding:11px 14px 10px;
  display:grid!important;
  grid-template-columns:5px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:12px!important;
  border-bottom:1px solid rgba(92,191,230,.14);
  background:
    linear-gradient(90deg,rgba(29,107,139,.20),rgba(13,34,51,.08)),
    repeating-linear-gradient(135deg,transparent 0 10px,rgba(95,220,250,.018) 10px 11px);
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesMarker{
  width:5px!important;
  height:40px!important;
  border-radius:99px;
  background:linear-gradient(180deg,#83edff,#25a9da)!important;
  box-shadow:0 0 16px rgba(70,211,252,.52);
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesIdentity{
  width:auto!important;
  height:auto!important;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  background:none!important;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesIdentity small{
  color:#55cde9;
  font-size:8px;
  font-weight:900;
  letter-spacing:.22em;
  line-height:1;
  text-transform:uppercase;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesTitle strong{
  min-width:0;
  overflow:hidden;
  color:#f5fcff!important;
  font-family:Arial,sans-serif!important;
  font-size:clamp(16px,1.15vw,21px)!important;
  font-weight:1000!important;
  letter-spacing:.075em!important;
  line-height:1.05;
  text-align:left!important;
  text-shadow:0 0 18px rgba(93,221,255,.18);
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesTitle em{
  padding:6px 9px;
  border:1px solid rgba(86,204,239,.27);
  border-radius:999px;
  color:#a7eaff;
  background:rgba(13,64,84,.52);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesGrid{
  grid-template-columns:repeat(auto-fill,minmax(220px,280px))!important;
  justify-content:start!important;
  gap:12px!important;
}

body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesGrid .chxRealCollectionCard{
  width:100%!important;
  max-width:280px!important;
  min-width:0!important;
}

@media(max-width:1120px){
  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped{
    grid-template-columns:1fr!important;
  }

  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesGrid{
    grid-template-columns:repeat(auto-fill,minmax(180px,240px))!important;
  }

  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesGrid .chxRealCollectionCard{
    max-width:240px!important;
  }
}

@media(max-width:560px){
  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped{
    gap:11px!important;
  }

  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped > .chxCollectionSeriesGroup{
    padding:0 9px 9px!important;
    border-radius:11px;
  }

  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesTitle{
    min-height:62px;
    margin:0 -9px 9px!important;
    padding:9px 11px 8px;
  }

  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:stretch!important;
    gap:7px!important;
  }

  body.chxHubCollectionsActive .chxRealCollectionCardGrid.isGrouped .chxCollectionSeriesGrid .chxRealCollectionCard{
    max-width:none!important;
  }
}

/* Reward actions live exclusively inside the Rewards screen. The legacy
   controls remain in the DOM only as hidden hooks for the gacha module. */
#openCodeBtn,
#openCodeBtnCompact,
#dailyBoxBtn,
#dailyBoxBtnCompact{
  display:none!important;
}

/* ============================================================
   Rewards screen
============================================================ */
#chxSlotOpenBtn.chxSlotFloatingBtn{
  display:none!important;
}

.cx-rewards-nav .cx-nav-count{
  position:absolute;
  top:9px;
  right:18px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(91,224,255,.48);
  border-radius:999px;
  color:#07131a;
  background:#5de0fa;
  box-shadow:0 0 14px rgba(65,211,246,.28);
  font-size:9px;
  line-height:1;
  letter-spacing:0;
}

.cx-rewards-panel{
  position:fixed;
  z-index:55;
  left:116px;
  right:0;
  top:0;
  bottom:0;
  box-sizing:border-box;
  display:none;
  min-width:0;
  overflow:auto;
  padding:clamp(22px,3.2vw,54px);
  color:#f4f7fb;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 22% 18%,rgba(34,190,232,.10),transparent 30%),
    radial-gradient(circle at 82% 74%,rgba(143,69,237,.11),transparent 34%),
    linear-gradient(145deg,#06101a,#03060b 58%,#090713);
}

.cx-rewards-panel.show{display:block}

.cx-rewards-panel:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(90,130,170,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,130,170,.04) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at center,#000,transparent 78%);
}

.cx-rewards-header h2{
  margin:0;
  font-size:clamp(30px,4vw,48px);
  font-weight:600;
  letter-spacing:.14em;
}

.cx-rewards-grid{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);
}

.cx-reward-card{
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:clamp(390px,55vh,570px);
  overflow:hidden;
  padding:clamp(26px,3vw,44px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  border:1px solid rgba(83,207,242,.24);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(7,27,42,.96),rgba(4,9,17,.98));
  box-shadow:inset 0 0 38px rgba(45,181,226,.045),0 24px 50px rgba(0,0,0,.30);
}

.cx-reward-card-slots{
  border-color:rgba(180,112,255,.26);
  background:linear-gradient(145deg,rgba(24,13,43,.96),rgba(7,6,16,.98));
  box-shadow:inset 0 0 38px rgba(141,73,230,.05),0 24px 50px rgba(0,0,0,.30);
}

.cx-reward-card-glow{
  position:absolute;
  z-index:-1;
  width:340px;
  height:340px;
  top:-170px;
  right:-130px;
  border:1px solid rgba(83,219,250,.14);
  border-radius:50%;
  box-shadow:0 0 90px rgba(49,196,236,.10),inset 0 0 70px rgba(49,196,236,.05);
}

.cx-reward-card-slots .cx-reward-card-glow{
  border-color:rgba(187,113,255,.16);
  box-shadow:0 0 90px rgba(146,68,235,.12),inset 0 0 70px rgba(146,68,235,.06);
}

.cx-reward-eyebrow{
  color:#5adff9;
  font-size:9px;
  font-weight:900;
  letter-spacing:.28em;
}

.cx-reward-card-slots .cx-reward-eyebrow{color:#bd83ff}

.cx-reward-box-icon{
  width:84px;
  height:84px;
  margin-top:32px;
  display:grid;
  place-items:center;
  border:1px solid rgba(85,221,252,.36);
  border-radius:20px;
  color:#65e5ff;
  background:rgba(29,116,151,.14);
  box-shadow:0 0 30px rgba(58,205,241,.10),inset 0 0 24px rgba(58,205,241,.06);
  font-size:38px;
}

.cx-reward-count-wrap{
  margin-top:28px;
  display:flex;
  align-items:flex-end;
  gap:14px;
}

.cx-reward-count-wrap strong{
  color:#fff;
  font-size:clamp(58px,7vw,92px);
  font-weight:300;
  line-height:.78;
  text-shadow:0 0 32px rgba(79,220,250,.22);
}

.cx-reward-count-wrap span{
  padding-bottom:3px;
  color:#7e91a3;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
}

.cx-reward-card p{
  max-width:500px;
  margin:22px 0 28px;
  color:#8e9aaa;
  font-size:13px;
  line-height:1.7;
}

.cx-reward-slot-symbol{
  width:100%;
  max-width:360px;
  margin:50px 0 32px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

.cx-reward-slot-symbol span{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(185,116,255,.25);
  border-radius:14px;
  color:#c58cff;
  background:rgba(75,34,125,.14);
  box-shadow:inset 0 0 24px rgba(154,81,238,.06);
  font-size:clamp(26px,3vw,44px);
}

.cx-reward-card h3{
  margin:0;
  color:#fff;
  font-size:clamp(27px,3vw,38px);
  font-weight:600;
  letter-spacing:.1em;
}

.cx-reward-development{
  margin-top:auto;
  padding:7px 11px;
  border:1px solid rgba(188,123,255,.24);
  border-radius:5px;
  color:#b989ee;
  background:rgba(91,43,140,.12);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}

.cx-reward-action{
  width:100%;
  min-height:50px;
  margin-top:auto;
  border:1px solid rgba(85,221,252,.46);
  border-radius:8px;
  color:#eafbff;
  background:linear-gradient(90deg,rgba(27,132,172,.40),rgba(30,82,139,.34));
  box-shadow:inset 0 0 24px rgba(64,211,245,.06),0 0 24px rgba(44,189,229,.06);
  font-size:10px;
  letter-spacing:.22em;
}

.cx-reward-card-slots .cx-reward-action{
  border-color:rgba(191,124,255,.46);
  background:linear-gradient(90deg,rgba(111,54,169,.38),rgba(74,43,139,.34));
}

.cx-reward-action:hover:not(:disabled){
  filter:brightness(1.22);
  transform:translateY(-2px);
}

.cx-reward-action:disabled{
  opacity:.38;
  cursor:not-allowed;
  filter:saturate(.45);
}

.cx-reward-development + .cx-reward-action{
  margin-top:18px;
}

@media(max-width:1280px){
  .cx-rewards-panel{left:86px}
}

@media(max-width:820px){
  .cx-rewards-grid{grid-template-columns:1fr}
  .cx-reward-card{min-height:400px}
}

@media(max-width:680px){
  .cx-sidebar .cx-nav,
  .cx-settings-nav{
    width:clamp(56px,18vw,78px);
    font-size:8px;
    letter-spacing:.10em;
  }

  .cx-rewards-nav .cx-nav-count{
    top:7px;
    right:7px;
  }

  .cx-rewards-panel{
    left:0;
    top:68px;
    padding:20px 14px 32px;
  }

  .cx-rewards-header h2{font-size:28px}
  .cx-reward-card{padding:24px;min-height:380px}
  .cx-reward-slot-symbol{margin-top:32px}
}

/* Rewards bonus-code console */
.cx-reward-code-panel{
  box-sizing:border-box;
  width:100%;
  max-width:1220px;
  margin:clamp(18px,2.5vw,30px) auto 0;
  padding:clamp(22px,2.6vw,34px);
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(320px,1.2fr);
  align-items:center;
  gap:clamp(22px,4vw,64px);
  border:1px solid rgba(84,204,239,.20);
  border-radius:16px;
  background:linear-gradient(90deg,rgba(8,27,41,.90),rgba(9,11,23,.88));
  box-shadow:inset 0 0 34px rgba(41,175,222,.035),0 20px 42px rgba(0,0,0,.24);
}

.cx-reward-code-panel h3{
  margin:10px 0 0;
  color:#f4f7fb;
  font-size:clamp(20px,2vw,28px);
  font-weight:600;
  letter-spacing:.10em;
}

.cx-reward-code-panel p{
  margin:9px 0 0;
  color:#7f8b9b;
  font-size:12px;
  line-height:1.6;
}

.cx-reward-code-form{
  min-width:0;
}

.cx-reward-code-form > label{
  display:block;
  margin-bottom:8px;
  color:#6f8497;
  font-size:8px;
  font-weight:900;
  letter-spacing:.20em;
}

.cx-reward-code-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:9px;
}

.cx-reward-code-row input{
  min-width:0;
  height:46px;
  padding:0 15px;
  outline:0;
  border:1px solid rgba(78,200,236,.22);
  border-radius:8px;
  color:#eefbff;
  background:rgba(3,12,20,.78);
  font:700 13px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.05em;
  box-shadow:inset 0 0 18px rgba(42,178,225,.025);
}

.cx-reward-code-row input:focus{
  border-color:rgba(83,219,250,.64);
  box-shadow:0 0 0 3px rgba(54,196,233,.08),inset 0 0 20px rgba(42,178,225,.04);
}

.cx-reward-code-row input::placeholder{color:#506170}

.cx-reward-code-row button{
  min-width:126px;
  height:46px;
  padding:0 20px;
  border:1px solid rgba(83,219,250,.48);
  border-radius:8px;
  color:#eafbff;
  background:linear-gradient(90deg,rgba(27,132,172,.44),rgba(30,82,139,.38));
  box-shadow:inset 0 0 20px rgba(64,211,245,.06);
  font-size:9px;
  letter-spacing:.18em;
}

.cx-reward-code-row button:hover{
  filter:brightness(1.2);
  transform:translateY(-1px);
}

.cx-reward-code-feedback{
  min-height:18px;
  margin-top:8px;
  color:#708497;
  font-size:11px;
  font-weight:700;
}

.cx-reward-code-feedback.success{color:#60dfba}
.cx-reward-code-feedback.error{color:#ff758c}

@media(max-width:760px){
  .cx-reward-code-panel{grid-template-columns:1fr}
}

@media(max-width:480px){
  .cx-reward-code-row{grid-template-columns:1fr}
  .cx-reward-code-row button{width:100%}
}

/* ============================================================
   Full-screen loot-box opening — Command Center theme
============================================================ */
body #dailyBoxOverlay:not(.characterSlotLootbox){
  position:fixed!important;
  inset:0!important;
  z-index:2147483500!important;
  display:none!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:clamp(14px,3vw,38px)!important;
  background:
    radial-gradient(circle at 24% 16%,rgba(35,188,232,.11),transparent 31%),
    radial-gradient(circle at 80% 76%,rgba(137,71,231,.10),transparent 35%),
    rgba(2,6,10,.72)!important;
  backdrop-filter:blur(18px)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox).show{
  display:grid!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal{
  box-sizing:border-box!important;
  width:min(1180px,calc(100vw - clamp(28px,6vw,76px)))!important;
  max-width:1180px!important;
  min-height:0!important;
  height:auto!important;
  max-height:92vh!important;
  margin:auto!important;
  padding:clamp(26px,3.2vw,46px)!important;
  overflow:auto!important;
  border:1px solid rgba(79,205,240,.30)!important;
  border-radius:18px!important;
  color:#f4f7fb!important;
  text-align:center!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(44,191,230,.08),transparent 32%),
    linear-gradient(145deg,rgba(4,15,24,.98),rgba(3,6,12,.99) 58%,rgba(8,6,18,.98))!important;
  box-shadow:inset 0 0 46px rgba(44,181,225,.045),0 32px 110px rgba(0,0,0,.74),0 0 42px rgba(52,199,237,.08)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.22!important;
  transform:none!important;
  animation:none!important;
  background-image:
    linear-gradient(rgba(90,130,170,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,130,170,.04) 1px,transparent 1px)!important;
  background-size:64px 64px!important;
  mask-image:radial-gradient(circle at center,#000,transparent 80%);
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal:after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(115deg,transparent 0 58%,rgba(72,209,244,.035) 58.1% 58.3%,transparent 58.4%),
    radial-gradient(circle at 50% 50%,transparent 40%,rgba(0,0,0,.28) 100%)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal > *{
  position:relative;
  z-index:2;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal h2{
  max-width:1220px;
  margin:0 auto 8px!important;
  color:#f4f7fb!important;
  font-size:clamp(30px,4vw,48px)!important;
  font-weight:600!important;
  letter-spacing:.16em!important;
  text-shadow:0 0 24px rgba(67,217,250,.16)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaSubtitle{
  margin:0 auto clamp(22px,4vh,40px)!important;
  color:#6f8294!important;
  font-size:9px!important;
  letter-spacing:.28em!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyRewards{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:1220px!important;
  margin:0 auto clamp(20px,3vh,32px)!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:clamp(10px,1.4vw,18px)!important;
  align-items:stretch!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyRewards .gachaBox:nth-child(n){
  grid-column:auto!important;
  grid-row:auto!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:clamp(190px,30vh,290px)!important;
  padding:18px!important;
  overflow:hidden!important;
  border:1px solid rgba(79,203,239,.20)!important;
  border-radius:8px!important;
  color:#f4f7fb!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(52,195,232,.09),transparent 48%),
    linear-gradient(145deg,rgba(8,29,44,.94),rgba(5,9,17,.97))!important;
  box-shadow:inset 0 0 28px rgba(42,177,223,.035),0 18px 34px rgba(0,0,0,.28)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox:not(.opened):hover{
  transform:translateY(-5px)!important;
  border-color:rgba(85,222,252,.58)!important;
  box-shadow:inset 0 0 32px rgba(49,191,234,.07),0 22px 42px rgba(0,0,0,.38),0 0 24px rgba(53,201,239,.08)!important;
  filter:brightness(1.1)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox:not(.opened):before{
  content:"◆"!important;
  width:82px!important;
  height:82px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(89,225,255,.42)!important;
  border-radius:18px!important;
  color:#66e5ff!important;
  background:rgba(24,103,133,.16)!important;
  box-shadow:0 0 28px rgba(55,202,238,.12),inset 0 0 22px rgba(55,202,238,.06)!important;
  font-size:36px!important;
  transform:none!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox:not(.opened):after{
  content:"OPEN"!important;
  bottom:22px!important;
  color:#69dff7!important;
  font-size:9px!important;
  letter-spacing:.24em!important;
  text-shadow:0 0 14px rgba(70,215,248,.30)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened{
  background:linear-gradient(145deg,rgba(10,24,36,.96),rgba(6,8,16,.98))!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaRewardType{
  color:#60def8!important;
  letter-spacing:.16em!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaRewardMain{
  color:#f6fbff!important;
  text-shadow:0 2px 12px #000,0 0 18px rgba(71,210,244,.18)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaRewardSub{
  color:#8799aa!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaProgress{
  margin:0 auto 16px!important;
  color:#698094!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.20em!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxClose{
  width:min(340px,100%)!important;
  min-height:50px!important;
  margin:0 auto!important;
  padding:0 24px!important;
  border:1px solid rgba(84,219,250,.48)!important;
  border-radius:8px!important;
  color:#eafbff!important;
  background:linear-gradient(90deg,rgba(28,133,173,.44),rgba(42,75,143,.38))!important;
  box-shadow:inset 0 0 22px rgba(67,212,245,.06),0 0 26px rgba(51,197,235,.07)!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxClose:hover{
  filter:brightness(1.22)!important;
  transform:translateY(-2px)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaComboBanner{
  top:20px!important;
  border-color:rgba(84,219,250,.42)!important;
  color:#eafbff!important;
  background:rgba(25,112,145,.24)!important;
  box-shadow:0 0 24px rgba(55,201,238,.12)!important;
}

@media(max-width:950px){
  body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyRewards{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media(max-width:560px){
  body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    padding:24px 14px 30px!important;
    border-radius:14px!important;
  }

  body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyRewards{
    grid-template-columns:1fr!important;
  }

  body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox{
    min-height:160px!important;
  }
}

/* Gain-reactive visual states */
body #dailyBoxOverlay:not(.characterSlotLootbox).gain-upgrade{
  background:
    radial-gradient(circle at 50% 42%,rgba(48,224,190,.13),transparent 36%),
    radial-gradient(circle at 22% 18%,rgba(35,188,232,.11),transparent 31%),
    rgba(2,7,11,.76)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox).gain-outfit{
  background:
    radial-gradient(circle at 50% 42%,rgba(54,175,255,.16),transparent 38%),
    radial-gradient(circle at 80% 76%,rgba(91,103,235,.10),transparent 35%),
    rgba(2,6,12,.77)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox).gain-epic{
  background:
    radial-gradient(circle at 50% 42%,rgba(179,75,255,.24),transparent 40%),
    radial-gradient(circle at 16% 16%,rgba(69,153,255,.12),transparent 31%),
    rgba(4,2,11,.79)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox).gain-legend{
  background:
    radial-gradient(circle at 50% 42%,rgba(255,197,65,.28),transparent 39%),
    radial-gradient(circle at 18% 16%,rgba(255,116,35,.14),transparent 31%),
    rgba(8,5,1,.80)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal.gain-upgrade{
  border-color:rgba(72,232,195,.48)!important;
  box-shadow:inset 0 0 48px rgba(55,220,189,.06),0 32px 110px rgba(0,0,0,.74),0 0 44px rgba(53,221,187,.14)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal.gain-outfit{
  border-color:rgba(92,194,255,.52)!important;
  box-shadow:inset 0 0 48px rgba(71,177,251,.07),0 32px 110px rgba(0,0,0,.74),0 0 52px rgba(59,164,245,.17)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal.gain-epic{
  border-color:rgba(206,117,255,.70)!important;
  box-shadow:inset 0 0 58px rgba(179,75,255,.10),0 32px 110px rgba(0,0,0,.78),0 0 70px rgba(172,68,255,.30)!important;
  animation:cxEpicModalPulse 1.8s ease-in-out infinite!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .dailyBoxModal.gain-legend{
  border-color:rgba(255,218,105,.90)!important;
  box-shadow:inset 0 0 68px rgba(255,196,68,.13),0 32px 120px rgba(0,0,0,.82),0 0 90px rgba(255,178,42,.42)!important;
  animation:cxLegendModalPulse 1.25s ease-in-out infinite!important;
}

@keyframes cxEpicModalPulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.08);transform:scale(1.002)}
}

@keyframes cxLegendModalPulse{
  0%,100%{filter:brightness(1);transform:scale(1)}
  50%{filter:brightness(1.13);transform:scale(1.003)}
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened.reward-upgrade{
  border-color:rgba(76,229,195,.62)!important;
  background:
    radial-gradient(circle at 50% 12%,rgba(71,224,190,.18),transparent 48%),
    linear-gradient(145deg,rgba(6,43,42,.96),rgba(4,13,20,.98))!important;
  box-shadow:inset 0 0 32px rgba(58,222,190,.09),0 0 34px rgba(48,210,180,.20),0 18px 38px rgba(0,0,0,.34)!important;
  animation:cxGainCardPop .58s cubic-bezier(.18,1.5,.26,1) both!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened.reward-outfit.outfit-common{
  border-color:rgba(94,195,255,.72)!important;
  background:
    radial-gradient(circle at 50% 10%,rgba(76,174,255,.22),transparent 48%),
    linear-gradient(145deg,rgba(8,31,57,.96),rgba(5,10,23,.98))!important;
  box-shadow:inset 0 0 34px rgba(73,173,255,.10),0 0 38px rgba(67,164,248,.24),0 18px 38px rgba(0,0,0,.36)!important;
  animation:cxGainCardPop .62s cubic-bezier(.18,1.5,.26,1) both!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened.reward-outfit.outfit-epic{
  border-color:rgba(214,121,255,.92)!important;
  background:
    radial-gradient(circle at 50% 8%,rgba(197,83,255,.30),transparent 50%),
    linear-gradient(145deg,rgba(43,13,68,.97),rgba(10,7,25,.99))!important;
  box-shadow:inset 0 0 42px rgba(195,78,255,.14),0 0 52px rgba(180,70,255,.46),0 0 100px rgba(93,57,244,.20),0 20px 42px rgba(0,0,0,.38)!important;
  animation:cxEpicCardReveal .88s cubic-bezier(.16,1.5,.24,1) both,cxEpicCardGlow 1.5s ease-in-out .9s infinite!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened.reward-outfit.outfit-legend{
  border-color:rgba(255,229,126,1)!important;
  background:
    radial-gradient(circle at 50% 4%,rgba(255,218,94,.38),transparent 52%),
    linear-gradient(145deg,rgba(68,37,7,.98),rgba(18,10,4,.99))!important;
  box-shadow:inset 0 0 48px rgba(255,216,102,.18),0 0 66px rgba(255,192,53,.68),0 0 130px rgba(255,116,25,.30),0 22px 46px rgba(0,0,0,.42)!important;
  animation:cxLegendCardReveal 1s cubic-bezier(.13,1.65,.22,1) both,cxLegendCardGlow 1.05s ease-in-out 1s infinite!important;
}

@keyframes cxGainCardPop{
  0%{opacity:.35;transform:scale(.78) translateY(12px);filter:brightness(.6)}
  55%{opacity:1;transform:scale(1.08) translateY(-4px);filter:brightness(1.5)}
  100%{opacity:1;transform:scale(1);filter:brightness(1)}
}

@keyframes cxEpicCardReveal{
  0%{opacity:.2;transform:scale(.68) rotate(-3deg);filter:brightness(.5) blur(3px)}
  48%{opacity:1;transform:scale(1.12) rotate(1deg);filter:brightness(1.8) blur(0)}
  100%{opacity:1;transform:scale(1);filter:brightness(1)}
}

@keyframes cxLegendCardReveal{
  0%{opacity:.1;transform:scale(.55) rotate(-5deg);filter:brightness(.4) blur(5px)}
  42%{opacity:1;transform:scale(1.18) rotate(2deg);filter:brightness(2.15) blur(0)}
  72%{transform:scale(.96) rotate(-.5deg);filter:brightness(1.3)}
  100%{opacity:1;transform:scale(1);filter:brightness(1)}
}

@keyframes cxEpicCardGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.16)}
}

@keyframes cxLegendCardGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.22)}
}

body #dailyBoxOverlay:not(.characterSlotLootbox).gain-upgrade .gachaComboBanner{
  border-color:rgba(75,230,196,.62)!important;
  color:#bdfff0!important;
  background:rgba(29,130,111,.40)!important;
  box-shadow:0 0 32px rgba(53,221,187,.24)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox).gain-epic .gachaComboBanner{
  border-color:rgba(215,126,255,.74)!important;
  color:#f2d5ff!important;
  background:rgba(107,38,157,.48)!important;
  box-shadow:0 0 42px rgba(183,72,255,.40)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox).gain-legend .gachaComboBanner{
  border-color:rgba(255,228,128,.94)!important;
  color:#fff5c7!important;
  background:rgba(154,88,17,.62)!important;
  box-shadow:0 0 54px rgba(255,185,45,.58)!important;
  font-size:14px!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaScreenFlash{
  background:rgba(67,215,247,.28)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaScreenFlash.epic{
  background:rgba(188,75,255,.42)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaScreenFlash.legend{
  background:rgba(255,210,83,.58)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened.outfit-epic .gachaSpark span{
  background:#d994ff!important;
  box-shadow:0 0 18px rgba(197,92,255,.95)!important;
}

body #dailyBoxOverlay:not(.characterSlotLootbox) .gachaBox.opened.outfit-legend .gachaSpark span{
  width:8px!important;
  height:8px!important;
  background:#ffe68d!important;
  box-shadow:0 0 22px rgba(255,199,63,1)!important;
}

/* ============================================================
   Account confirmation
============================================================ */
.cx-account-confirm{
  position:fixed;
  inset:0;
  z-index:2147483645;
  display:none;
  place-items:center;
  padding:20px;
  color:#eefaff;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  background:rgba(1,5,10,.76);
  backdrop-filter:blur(12px);
}

.cx-account-confirm.show{display:grid}

.cx-account-confirm-card{
  position:relative;
  width:min(500px,calc(100vw - 28px));
  padding:30px;
  overflow:hidden;
  border:1px solid rgba(248,103,122,.38);
  border-radius:16px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0,rgba(210,54,83,.18),transparent 48%),
    linear-gradient(145deg,rgba(10,25,38,.98),rgba(7,8,17,.99));
  box-shadow:0 28px 90px rgba(0,0,0,.62),0 0 42px rgba(222,58,90,.13);
}

.cx-account-confirm-card:before{
  content:"";
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:2px;
  background:linear-gradient(90deg,transparent,#ff6d82,transparent);
  box-shadow:0 0 20px rgba(255,86,112,.62);
}

.cx-account-confirm-icon{
  width:46px;
  height:46px;
  margin:0 auto 17px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,105,125,.48);
  border-radius:50%;
  color:#ff9aaa;
  background:rgba(147,29,52,.24);
  box-shadow:0 0 26px rgba(239,62,92,.20);
  font-size:22px;
  font-weight:900;
}

.cx-account-confirm-card h3{
  margin:5px 0 10px;
  color:#fff;
  font-size:24px;
  letter-spacing:.10em;
}

.cx-account-confirm-card p{
  max-width:410px;
  margin:0 auto;
  color:#8fa1b2;
  font-size:13px;
  line-height:1.6;
}

.cx-account-confirm-actions{
  margin-top:24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.cx-account-confirm-actions button{
  min-height:42px;
  border:1px solid rgba(91,184,220,.22);
  border-radius:9px;
  color:#b7c8d5;
  background:rgba(12,34,49,.72);
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
}

.cx-account-confirm-actions button.danger{
  border-color:rgba(255,94,117,.42);
  color:#ffd6dc;
  background:linear-gradient(135deg,rgba(159,37,60,.78),rgba(103,24,48,.84));
}

.cx-account-confirm-actions button:disabled{opacity:.62;cursor:wait}

/* ============================================================
   Authentication screens — Command Center visual language
============================================================ */
#chausxAuthGate,
#chausxRegisterDialog,
#chausxPatreonRequiredGate{
  padding:clamp(18px,4vw,48px)!important;
  color:#f3fbff!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  background:
    linear-gradient(rgba(69,146,187,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(69,146,187,.03) 1px,transparent 1px),
    radial-gradient(circle at 18% 16%,rgba(35,180,229,.16),transparent 32%),
    radial-gradient(circle at 84% 82%,rgba(102,65,213,.12),transparent 34%),
    linear-gradient(145deg,#06101a,#020509 62%,#080713)!important;
  background-size:64px 64px,64px 64px,auto,auto,auto!important;
}

#chausxAuthGate .chausx-auth-card,
#chausxRegisterDialog .chausx-auth-card,
.chausxPatreonRequiredCard{
  position:relative!important;
  width:min(500px,calc(100vw - 28px))!important;
  padding:clamp(24px,3.2vw,38px)!important;
  overflow:hidden!important;
  border:1px solid rgba(75,205,242,.28)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 50% 0,rgba(44,184,226,.12),transparent 44%),
    linear-gradient(145deg,rgba(8,26,40,.97),rgba(5,8,17,.98))!important;
  box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 50px rgba(45,186,228,.08),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(18px)!important;
}

#chausxAuthGate .chausx-auth-card:before,
#chausxRegisterDialog .chausx-auth-card:before,
.chausxPatreonRequiredCard:before{
  content:"";
  position:absolute;
  top:0;
  left:8%;
  right:8%;
  height:2px;
  background:linear-gradient(90deg,transparent,#52ddfa 45%,#7678f4 65%,transparent);
  box-shadow:0 0 22px rgba(66,213,246,.50);
}

.chausx-auth-kicker{
  margin-bottom:8px;
  color:#50d9f7;
  font-size:8px;
  font-weight:900;
  letter-spacing:.28em;
}

.chausx-auth-logo,
.chausxPatreonRequiredTitle{
  margin:0 0 9px!important;
  color:#f4fcff!important;
  font-size:clamp(27px,4vw,38px)!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
  line-height:1.05!important;
  text-shadow:0 0 24px rgba(79,218,250,.20)!important;
}

.chausx-auth-subtitle,
.chausxPatreonRequiredText{
  margin:0 0 24px!important;
  color:#8395a7!important;
  font-size:12px!important;
  line-height:1.55!important;
  opacity:1!important;
}

.chausx-auth-card label:not(.chausx-remember-row){
  margin:13px 0 6px!important;
  color:#79cfe6!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.17em!important;
  opacity:1!important;
}

.chausx-auth-card input:not([type="checkbox"]){
  min-height:46px!important;
  padding:0 14px!important;
  border:1px solid rgba(84,170,205,.20)!important;
  border-radius:9px!important;
  color:#eefaff!important;
  background:rgba(2,12,21,.72)!important;
  box-shadow:inset 0 0 18px rgba(40,151,193,.025)!important;
}

.chausx-auth-card input:not([type="checkbox"]):focus{
  border-color:rgba(75,216,251,.62)!important;
  box-shadow:0 0 0 3px rgba(65,196,231,.08),inset 0 0 22px rgba(40,151,193,.05)!important;
}

.chausx-auth-card input::placeholder{color:#506273!important}

.chausx-remember-row{
  margin:12px 0 2px!important;
  color:#8b9bab!important;
  font-size:11px!important;
  opacity:1!important;
}

.chausx-remember-row input{accent-color:#45d6f5!important}

.chausx-auth-row{
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:20px!important;
}

.chausx-auth-row .chausx-auth-btn,
#chausxPatreonRequiredConnectBtn{
  min-height:44px!important;
  padding:0 15px!important;
  border:1px solid rgba(78,218,250,.45)!important;
  border-radius:9px!important;
  color:#eafcff!important;
  background:linear-gradient(135deg,rgba(27,140,178,.94),rgba(56,82,176,.94))!important;
  box-shadow:0 12px 30px rgba(34,147,197,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
  font-size:9px!important;
  font-weight:900!important;
  letter-spacing:.11em!important;
}

.chausx-auth-row .chausx-auth-btn.secondary{
  border-color:rgba(108,147,173,.20)!important;
  color:#9cafbd!important;
  background:rgba(8,26,39,.68)!important;
  box-shadow:none!important;
}

#chausxAuthStatus,
#chausxRegisterStatus{
  min-height:18px!important;
  margin:15px 0 0!important;
  color:#88dff5!important;
  font-size:11px!important;
  line-height:1.4!important;
  opacity:.86!important;
}

.chausx-auth-small{
  margin-top:7px!important;
  color:#596b7b!important;
  font-size:10px!important;
  opacity:1!important;
}

#chausxRegisterDialog{background-color:rgba(2,6,11,.96)!important;backdrop-filter:blur(16px)!important}

.chausxPatreonRequiredCard{text-align:left!important}
.chausxPatreonRequiredCard:after{
  content:"PATREON LINK REQUIRED";
  display:block;
  margin-top:13px;
  color:#637687;
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
  text-align:center;
}

#chausxPatreonRequiredConnectBtn{
  width:100%!important;
  background:linear-gradient(135deg,rgba(216,58,72,.96),rgba(220,105,32,.96))!important;
  border-color:rgba(255,143,92,.48)!important;
  box-shadow:0 12px 30px rgba(215,70,48,.18)!important;
}

@media(max-width:560px){
  .chausx-auth-row,
  .cx-account-confirm-actions{grid-template-columns:1fr!important}
}

/* Character profiles are a nested Hub screen: preserve the primary menu. */
.viewer.isCharacterProfileViewer{
  left:116px!important;
  right:0!important;
  width:auto!important;
  background:transparent!important;
}
.viewer.isCharacterProfileViewer .viewerFrame{background:transparent!important}

/* Interactive outfits remain inside the persistent game shell. */
.viewer.isInteractiveWardrobeViewer{
  left:116px!important;
  right:0!important;
  width:auto!important;
  background:#02070d!important;
}
.viewer.isInteractiveWardrobeViewer .viewerFrame{
  background:#02070d!important;
}
body.chxCharacterProfileVisible > .app{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

@media(max-width:1280px){
  .viewer.isCharacterProfileViewer,
  .viewer.isInteractiveWardrobeViewer{left:86px!important}
}

@media(max-width:680px){
  .viewer.isCharacterProfileViewer,
  .viewer.isInteractiveWardrobeViewer{
    left:0!important;
    top:68px!important;
  }
}

/* Character profile transitions: full boot reveal and faster roster switch. */
.viewer.isCharacterProfileViewer.loading .viewerLoading{
  display:none!important;
}

.viewer.isCharacterProfileViewer::before,
.viewer.isCharacterProfileViewer::after{
  content:"";
  position:absolute;
  z-index:5004;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.viewer.isCharacterProfileViewer::before{
  background:
    linear-gradient(rgba(89,204,238,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(89,204,238,.045) 1px,transparent 1px),
    radial-gradient(circle at 50% 50%,rgba(35,148,193,.17),transparent 48%),
    linear-gradient(110deg,#020914,#061b2b 54%,#050817);
  background-size:48px 48px,48px 48px,auto,auto;
}

.viewer.isCharacterProfileViewer::after{
  left:-18%;
  right:auto;
  width:18%;
  background:linear-gradient(90deg,transparent,rgba(91,226,251,.18),rgba(109,225,250,.88),rgba(139,106,255,.52),transparent);
  filter:blur(.2px) drop-shadow(0 0 22px rgba(77,217,249,.72));
  transform:skewX(-12deg) translateX(-120vw);
}

.characterProfileTransitionIdentity{
  position:absolute;
  z-index:5006;
  left:50%;
  top:50%;
  width:min(82vw,1500px);
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0;
  pointer-events:none;
  color:#f6fcff;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  text-align:center;
  transform:translate(-50%,-50%);
}

.characterProfileTransitionIdentity strong{
  max-width:100%;
  color:#f7fcff;
  font-family:Impact,"Arial Narrow",Inter,"Segoe UI",sans-serif;
  font-size:clamp(58px,9.2vw,176px);
  font-weight:900;
  line-height:.84;
  letter-spacing:.025em;
  overflow-wrap:anywhere;
  text-transform:uppercase;
  text-shadow:0 5px 26px rgba(0,0,0,.82),0 0 42px rgba(75,215,248,.24);
}

.characterProfileTransitionIdentity span{
  margin-top:clamp(17px,2.4vh,30px);
  color:#66def7;
  font-size:clamp(12px,1.25vw,22px);
  font-weight:900;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  text-shadow:0 2px 15px rgba(0,0,0,.74),0 0 18px rgba(77,218,248,.32);
}

.characterProfileTransitionIdentity i{
  width:min(420px,48vw);
  height:2px;
  margin-top:15px;
  background:linear-gradient(90deg,transparent,#55ddf8 36%,#9a76ff 66%,transparent);
  box-shadow:0 0 17px rgba(80,216,248,.48);
  transform:scaleX(.18);
}

.viewer.isCharacterProfileViewer.characterProfileEntering::before{
  animation:cxCharacterProfileEnterCurtain 1.08s cubic-bezier(.2,.76,.22,1) both;
}

.viewer.isCharacterProfileViewer.characterProfileEntering::after{
  animation:cxCharacterProfileEnterScan 1.02s cubic-bezier(.18,.72,.2,1) .05s both;
}

.viewer.isCharacterProfileViewer.characterProfileEntering .viewerFrame{
  animation:cxCharacterProfileFrameEnter 1.02s ease-out both;
}

.viewer.isCharacterProfileViewer.characterProfileEntering .characterProfileTransitionIdentity{
  animation:cxCharacterProfileIdentityEnter 1.08s cubic-bezier(.18,.74,.22,1) both;
}

.viewer.isCharacterProfileViewer.characterProfileEntering .characterProfileTransitionIdentity i{
  animation:cxCharacterProfileIdentityRail 1.02s ease-out .08s both;
}

.viewer.isCharacterProfileViewer.characterProfileSwitching::before{
  animation:cxCharacterProfileSwitchCurtain .90s cubic-bezier(.7,0,.22,1) both;
}

.viewer.isCharacterProfileViewer.characterProfileSwitching::after{
  animation:cxCharacterProfileSwitchScan .82s cubic-bezier(.72,0,.24,1) both;
}

.viewer.isCharacterProfileViewer.characterProfileSwitching .viewerFrame{
  animation:cxCharacterProfileFrameSwitch .90s ease-in-out both;
}

.viewer.isCharacterProfileViewer.characterProfileSwitching .characterProfileTransitionIdentity{
  animation:cxCharacterProfileIdentitySwitch .90s cubic-bezier(.22,.75,.2,1) both;
}

.viewer.isCharacterProfileViewer.characterProfileSwitching .characterProfileTransitionIdentity i{
  animation:cxCharacterProfileIdentityRail .78s ease-out .10s both;
}

@keyframes cxCharacterProfileEnterCurtain{
  0%,22%{opacity:1;clip-path:inset(0 0 0 0)}
  58%{opacity:.96;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 0 0 100%)}
}

@keyframes cxCharacterProfileEnterScan{
  0%{opacity:0;transform:skewX(-12deg) translateX(-120vw)}
  14%{opacity:1}
  82%{opacity:1}
  100%{opacity:0;transform:skewX(-12deg) translateX(140vw)}
}

@keyframes cxCharacterProfileFrameEnter{
  0%,24%{opacity:0;filter:brightness(.48) saturate(.5)}
  68%{opacity:1;filter:brightness(1.16) saturate(.9)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}

@keyframes cxCharacterProfileIdentityEnter{
  0%,8%{opacity:0;transform:translate(-50%,-45%) scale(1.10);filter:blur(8px)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  64%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-54%) scale(.98);filter:blur(2px)}
}

@keyframes cxCharacterProfileIdentitySwitch{
  0%,13%{opacity:0;transform:translate(-50%,-50%) scaleX(.74);filter:blur(7px)}
  30%{opacity:1;transform:translate(-50%,-50%) scaleX(1);filter:blur(0)}
  66%{opacity:1;transform:translate(-50%,-50%) scaleX(1);filter:blur(0)}
  100%{opacity:0;transform:translate(-50%,-50%) scaleX(1.06);filter:blur(3px)}
}

@keyframes cxCharacterProfileIdentityRail{
  0%{opacity:0;transform:scaleX(.12)}
  38%{opacity:1;transform:scaleX(1)}
  78%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(.48)}
}

@keyframes cxCharacterProfileSwitchCurtain{
  0%{opacity:1;transform:translateX(105%)}
  28%,55%{opacity:1;transform:translateX(0)}
  100%{opacity:1;transform:translateX(-105%)}
}

@keyframes cxCharacterProfileSwitchScan{
  0%{opacity:0;transform:skewX(-12deg) translateX(130vw)}
  18%{opacity:1}
  84%{opacity:1}
  100%{opacity:0;transform:skewX(-12deg) translateX(-125vw)}
}

@keyframes cxCharacterProfileFrameSwitch{
  0%{opacity:1;filter:brightness(1)}
  28%,50%{opacity:.08;filter:brightness(.36) saturate(.35)}
  78%{opacity:1;filter:brightness(1.16) saturate(.86)}
  100%{opacity:1;filter:brightness(1) saturate(1)}
}

@media(prefers-reduced-motion:reduce){
  .viewer.isCharacterProfileViewer::before,
  .viewer.isCharacterProfileViewer::after,
  .viewer.isCharacterProfileViewer .viewerFrame,
  .viewer.isCharacterProfileViewer .characterProfileTransitionIdentity,
  .viewer.isCharacterProfileViewer .characterProfileTransitionIdentity i{animation:none!important}
}

/* The character theme also colours the persistent shell surrounding the
   iframe. This keeps series themes coherent without changing its geometry. */
html[data-character-theme="scarlet-dojo"],
#cxCommandCenter[data-character-theme="scarlet-dojo"]{
  --cx-cyan:#e0aa70;
  --cx-purple:#d8755e;
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter,
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-shell,
#cxCommandCenter[data-character-theme="scarlet-dojo"],
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-shell{
  background-image:none;
  background-color:#09090d;
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-sidebar,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-sidebar{
  border-right-color:rgba(224,170,112,.20);
  background:linear-gradient(90deg,rgba(18,9,12,.92),rgba(14,10,14,.68));
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-nav:hover,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-nav:hover{
  color:#fff3e7;
  background:rgba(216,117,94,.07);
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-nav.active,
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-settings-nav.active,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-nav.active,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-settings-nav.active{
  color:#f0b47d;
  background:linear-gradient(90deg,rgba(165,66,54,.24),rgba(112,44,40,.04));
  box-shadow:inset 3px 0 0 #e0aa70;
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-nav.active::after,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-nav.active::after{
  background:linear-gradient(180deg,transparent,#e0aa70 28%,#d8755e 72%,transparent);
  box-shadow:0 0 12px rgba(224,170,112,.72);
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-nav-separator,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-nav-separator{
  background:linear-gradient(90deg,transparent,rgba(224,170,112,.32),transparent);
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-nav-count,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-nav-count{
  color:#211015;
  background:#e0aa70;
  box-shadow:0 0 12px rgba(218,125,88,.36);
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-sidebar-economy,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-sidebar-economy{
  border-color:rgba(224,170,112,.24);
  color:#fff1e2;
  background:linear-gradient(135deg,rgba(92,40,34,.62),rgba(26,13,16,.76));
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-sidebar-economy::before,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-sidebar-economy::before{
  background:#e0aa70;
  box-shadow:0 0 10px rgba(224,170,112,.5);
}
html[data-character-theme="scarlet-dojo"] #cxCommandCenter .cx-sidebar-credit-line small,
#cxCommandCenter[data-character-theme="scarlet-dojo"] .cx-sidebar-credit-line small{
  color:#e0aa70;
}

/* Character changes are now animated inside the profile iframe, on the PNG
   only. Parent-level curtains are disabled so they can never cover either
   of the two navigation menus on the left. */
.viewer.isCharacterProfileViewer::before,
.viewer.isCharacterProfileViewer::after{
  content:none!important;
  display:none!important;
}
.viewer.isCharacterProfileViewer.characterProfileEntering .viewerFrame,
.viewer.isCharacterProfileViewer.characterProfileSwitching .viewerFrame{
  animation:none!important;
}

/* Angular game-menu language from the character roster concept. */
@media(min-width:681px){
  .cx-sidebar .cx-nav{
    width:calc(100% - 10px);
    margin-left:5px;
    margin-right:5px;
    clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);
  }

  .cx-sidebar .cx-nav.active:after{
    top:13px;
    right:0;
    bottom:13px;
    width:2px;
    height:auto;
    border-radius:0;
    background:linear-gradient(180deg,transparent,#43d9ff 28%,#43d9ff 72%,transparent);
    box-shadow:0 0 12px #43d9ff;
  }
}

/* ============================================================
   Shared full-screen menu environment
   The upscaled artwork always fills the viewport. `cover` may
   crop the edges on narrow screens, but never leaves black bars.
============================================================ */
:root{
  --cx-menu-background:url("assets/images/menu-bg-futuristic-upscaled.png");
}

body.cx-command-home,
body:not(.cx-command-home){
  background-color:#02070d;
}

#cxCommandCenter,
body:not(.cx-command-home) #cxCommandCenter{
  background-color:#02070d;
  background-image:
    linear-gradient(110deg,rgba(1,7,14,.58),rgba(2,10,18,.26) 48%,rgba(1,6,12,.48)),
    var(--cx-menu-background);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}

.cx-shell,
body:not(.cx-command-home) #cxCommandCenter .cx-shell{
  background:
    linear-gradient(90deg,rgba(2,9,16,.42),rgba(2,9,16,.12) 46%,rgba(2,9,16,.32));
}

.cx-sidebar{
  background:linear-gradient(90deg,rgba(1,7,13,.84),rgba(2,9,16,.52));
  backdrop-filter:blur(5px);
}

.cx-settings-panel,
.cx-rewards-panel{
  background:
    linear-gradient(125deg,rgba(2,12,21,.78),rgba(2,9,17,.56) 54%,rgba(2,7,14,.68))!important;
  background-color:transparent!important;
}

@media(max-width:680px){
  #cxCommandCenter,
  body:not(.cx-command-home) #cxCommandCenter{
    background-position:center center;
    background-size:cover;
  }

  .cx-sidebar{
    background:linear-gradient(180deg,rgba(1,7,13,.90),rgba(2,9,16,.67));
  }
}

/* Settings is a central application view, never a translucent overlay. */
body.cx-settings-open > .app,
body.cx-settings-open > .cx-rewards-panel,
body.cx-settings-open > .cx-admin-panel{
  display:none!important;
}

body.cx-settings-open #cxCommandCenter .cx-main{
  visibility:hidden;
  pointer-events:none;
}

.cx-settings-panel{
  background-color:#02070d!important;
  background-image:
    linear-gradient(125deg,rgba(2,12,21,.82),rgba(2,9,17,.66) 54%,rgba(2,7,14,.78)),
    var(--cx-menu-background)!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}

/* Rewards is a standalone central application view, never an overlay. */
body.cx-rewards-open > .app,
body.cx-rewards-open > .bg,
body.cx-rewards-open > .shade,
body.cx-rewards-open > .cx-settings-panel,
body.cx-rewards-open > .cx-admin-panel{
  display:none!important;
}

body.cx-rewards-open #cxCommandCenter .cx-main{
  visibility:hidden;
  pointer-events:none;
}

.cx-rewards-panel{
  background-color:#02070d!important;
  background-image:
    linear-gradient(125deg,rgba(2,12,21,.94),rgba(2,9,17,.90) 54%,rgba(2,7,14,.94)),
    var(--cx-menu-background)!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
}

/* Rewards command layout: credits and code on the left, activities on the right. */
.cx-rewards-panel.show{
  display:grid;
  grid-template-columns:minmax(500px,760px) minmax(380px,560px);
  grid-template-areas:
    "heading heading"
    "terminal activities"
    "code activities";
  align-content:start;
  align-items:start;
  justify-content:center;
  gap:clamp(18px,2vw,30px);
}

.cx-rewards-panel.show > .cx-rewards-header{
  grid-area:heading;
  max-width:none;
  margin-bottom:0;
}

.cx-rewards-panel.show > .cx-rewards-grid{
  grid-area:activities;
  grid-template-columns:1fr;
  max-width:none;
  margin:0;
  gap:14px;
}

.cx-rewards-panel.show .cx-reward-card{
  min-height:255px;
  padding:clamp(22px,2vw,30px);
}

.cx-rewards-panel.show .cx-reward-box-icon{
  width:58px;
  height:58px;
  margin-top:18px;
  border-radius:14px;
  font-size:27px;
}

.cx-rewards-panel.show .cx-reward-count-wrap{margin-top:18px}
.cx-rewards-panel.show .cx-reward-count-wrap strong{font-size:58px}
.cx-rewards-panel.show .cx-reward-card p{margin:14px 0 18px;line-height:1.45}
.cx-rewards-panel.show .cx-reward-slot-symbol{
  max-width:260px;
  margin:22px 0 18px;
}
.cx-rewards-panel.show .cx-reward-slot-symbol span{font-size:25px}
.cx-rewards-panel.show .cx-reward-card h3{font-size:26px}
.cx-rewards-panel.show .cx-reward-action{min-height:44px}

.cx-rewards-panel.show > .cx-reward-code-panel{
  grid-area:code;
  grid-template-columns:1fr;
  max-width:none;
  margin:0;
  padding:22px;
  gap:18px;
}

.cx-rewards-panel.show > .cx-credit-store{
  grid-area:terminal;
  position:relative;
  top:auto;
  min-width:0;
  margin:0;
}

.cx-rewards-panel.show .cx-credit-store-body{display:block}
.cx-rewards-panel.show .cx-credit-store-column{width:100%}

@media(max-width:1180px){
  .cx-rewards-panel.show{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "heading"
      "terminal"
      "code"
      "activities";
  }
  .cx-rewards-panel.show > .cx-rewards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cx-rewards-panel.show > .cx-credit-store{position:relative;top:auto}
}

@media(max-width:760px){
  .cx-rewards-panel.show > .cx-rewards-grid{grid-template-columns:1fr}
}

/* ============================================================
   Character selection — game roster
============================================================ */
body.chxCharacterSelectActive > .app{
  padding-top:clamp(12px,2vh,24px);
}

body.chxCharacterSelectActive #content{
  display:flex;
  min-height:100%;
  margin-left:40px;
  width:calc(100% - 40px);
}

.characterSelectScreen{
  --select-cyan:#54dcfa;
  width:100%;
  min-width:0;
  margin:auto 0;
  padding:0 2px clamp(24px,4vh,52px);
  color:#f4fbff;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.characterSelectHeader{
  position:relative;
  min-height:120px;
  margin-bottom:clamp(20px,3vh,34px);
  padding:14px clamp(86px,7.5vw,136px) 22px 4px;
  display:flex;
  align-items:flex-end;
  gap:24px;
  border-bottom:1px solid rgba(99,185,223,.22);
}

.characterSelectHeader:after{
  content:"";
  position:absolute;
  left:4px;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--select-cyan) 0 18%,rgba(84,220,250,.20) 45%,transparent 82%);
  box-shadow:-20px 0 20px rgba(71,211,245,.32);
}

.characterSelectIdentity{min-width:0}

.characterSelectKicker{
  display:block;
  margin-bottom:8px;
  color:var(--select-cyan);
  font-size:9px;
  font-weight:900;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.characterSelectIdentity h1{
  max-width:min(900px,72vw);
  margin:0;
  overflow:hidden;
  color:#f7fcff;
  font-size:clamp(34px,4vw,64px);
  font-weight:950;
  line-height:.98;
  letter-spacing:.09em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 0 28px rgba(77,214,249,.16),0 3px 20px rgba(0,0,0,.7);
}

.characterSelectIdentity p{
  margin:10px 0 0;
  color:#71889b;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.characterSelectBack{
  position:fixed!important;
  left:106px!important;
  bottom:auto!important;
  right:auto!important;
  top:14px!important;
  z-index:36!important;
  width:54px!important;
  min-width:54px!important;
  height:clamp(128px,17vh,166px)!important;
  min-height:116px!important;
  padding:13px 0 11px!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:11px!important;
  overflow:hidden!important;
  border:1px solid rgba(79,205,238,.45)!important;
  border-radius:0!important;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%)!important;
  color:#dff9ff!important;
  background:linear-gradient(180deg,rgba(20,92,118,.42),rgba(4,19,31,.94) 58%),rgba(3,14,24,.96)!important;
  box-shadow:inset 0 0 28px rgba(65,210,246,.08),0 10px 28px rgba(0,0,0,.42),0 0 18px rgba(68,214,247,.12)!important;
  writing-mode:vertical-rl!important;
  text-orientation:mixed!important;
  font-size:10px!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}

.characterSelectBack:before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:42%;
  background:linear-gradient(180deg,#5ae2fa,transparent);
  box-shadow:0 0 12px rgba(90,226,250,.62);
}
.characterSelectBack strong{font-size:10px;font-weight:1000;letter-spacing:.18em}
.characterSelectBack:hover{border-color:rgba(97,228,255,.86)!important;color:#fff!important;background:linear-gradient(180deg,rgba(27,127,161,.62),rgba(5,28,43,.96))!important;box-shadow:inset 0 0 34px rgba(65,210,246,.13),0 14px 32px rgba(0,0,0,.46),0 0 24px rgba(68,214,247,.28)!important;transform:translateX(3px)}

.characterSelectDepthNav{
  position:fixed;
  z-index:36;
  top:14px;
  left:106px;
  width:54px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.characterSelectDepthNav ~ .characterSelectDepthNav{display:none!important}
.characterSelectDepthNav .characterSelectBack{position:relative!important;top:auto!important;left:auto!important}
.characterSelectDepthTab{
  position:relative;
  width:54px;
  height:clamp(128px,17vh,166px);
  min-height:116px;
  padding:13px 0 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid rgba(79,205,238,.28);
  border-radius:0;
  color:#84a7b8;
  background:linear-gradient(180deg,rgba(8,34,49,.76),rgba(3,13,23,.94));
  box-shadow:inset 0 0 22px rgba(65,210,246,.04),0 10px 28px rgba(0,0,0,.34);
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  text-transform:uppercase;
}
.characterSelectDepthTab.current{
  border-color:rgba(91,222,249,.68);
  color:#e4fbff;
  background:linear-gradient(180deg,rgba(22,106,136,.52),rgba(4,22,34,.97));
  box-shadow:inset 0 0 28px rgba(71,211,244,.1),0 0 20px rgba(74,214,247,.15),0 12px 28px rgba(0,0,0,.36);
}
.characterSelectDepthTab.current:before{
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:2px;
  height:42%;
  background:linear-gradient(180deg,#5ae2fa,transparent);
  box-shadow:0 0 12px rgba(90,226,250,.62);
}
.characterSelectDepthTab strong{font-size:10px;font-weight:1000;letter-spacing:.18em}

.characterSelectGrid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(174px,1fr));
  gap:clamp(12px,1.2vw,20px);
  align-items:start;
}

.characterSelectCard{
  --card-accent:var(--select-cyan);
  position:relative;
  width:100%;
  min-width:0;
  aspect-ratio:1;
  padding:0;
  overflow:hidden;
  isolation:isolate;
  appearance:none;
  border:1px solid rgba(84,220,250,.38);
  border-radius:3px;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
  color:#fff;
  background:linear-gradient(145deg,rgba(6,23,37,.92),rgba(3,9,17,.97));
  box-shadow:inset 0 0 34px rgba(55,183,230,.045),0 15px 30px rgba(0,0,0,.24);
  cursor:pointer;
  transform:translateY(0) scale(1);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,filter .24s ease;
}

/* Back navigation is part of the roster grid, never a separate depth tab. */
.characterSelectDepthNav,.characterSelectBack{display:none!important}
.characterSelectBackCard{
  border-color:rgba(91,222,249,.58);
  background:linear-gradient(145deg,rgba(13,58,78,.94),rgba(3,13,23,.98));
}
.characterSelectBackArrow{
  position:absolute;
  z-index:3;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:15px;
  color:#68e3fb;
}
.characterSelectBackArrow svg{
  width:clamp(62px,6vw,92px);
  height:clamp(62px,6vw,92px);
  overflow:visible;
  stroke:currentColor;
  stroke-width:4;
  stroke-linecap:square;
  stroke-linejoin:miter;
  filter:drop-shadow(0 0 14px rgba(82,220,249,.38));
}
.characterSelectBackArrow strong{
  color:#e8fbff;
  font-size:clamp(10px,1vw,14px);
  font-weight:1000;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.characterSelectBackCard:hover .characterSelectBackArrow,
.characterSelectBackCard:focus-visible .characterSelectBackArrow{color:#fff}

.characterSelectBackdrop{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    linear-gradient(rgba(100,189,224,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,189,224,.045) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,rgba(48,167,214,.23),transparent 56%),
    linear-gradient(145deg,rgba(8,34,52,.98),rgba(3,10,18,.98));
  background-size:28px 28px,28px 28px,auto,auto;
  transition:filter .3s ease,transform .4s ease;
}

.characterSelectPortrait{position:absolute;inset:0;z-index:-1;display:grid;place-items:center;overflow:hidden}

.characterSelectPortrait:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,transparent 43%,rgba(2,9,16,.12) 62%,rgba(2,7,13,.94) 100%),
    linear-gradient(90deg,rgba(2,8,15,.16),transparent 28%,transparent 72%,rgba(2,8,15,.18));
  pointer-events:none;
}

.characterSelectPortraitImage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--thumb-x,50%) var(--thumb-y,9%);
  filter:saturate(.92) contrast(1.03) drop-shadow(0 8px 16px rgba(0,0,0,.42));
  transform:scale(var(--thumb-zoom,1.05));
  transform-origin:var(--thumb-x,50%) var(--thumb-y,9%);
  transition:transform .38s cubic-bezier(.2,.75,.25,1),filter .3s ease;
}

.characterSelectInitials{
  color:rgba(126,207,231,.22);
  font-size:clamp(42px,4vw,68px);
  font-weight:200;
  letter-spacing:.08em;
  text-shadow:0 0 30px rgba(68,201,238,.12);
}

.characterSelectCard.hasPortrait .characterSelectInitials{opacity:0}

.characterSelectSweep{
  position:absolute;
  z-index:2;
  left:-10%;
  right:-10%;
  top:-18%;
  height:22%;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(98,224,252,.18),transparent);
  transform:translateY(-30%);
}

.characterSelectName{
  position:absolute;
  z-index:5;
  left:15px;
  right:15px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  text-align:left;
  opacity:1;
  transform:none;
}

.characterSelectName strong{
  max-width:100%;
  overflow:hidden;
  color:#f6fcff;
  font-size:clamp(13px,1.05vw,18px);
  font-weight:900;
  letter-spacing:.07em;
  line-height:1.05;
  text-overflow:ellipsis;
  text-transform:uppercase;
  text-shadow:0 2px 10px #000,0 0 15px rgba(64,205,241,.15);
  transform:scale(1);
  transform-origin:left bottom;
  transition:transform .22s ease,color .22s ease;
  white-space:nowrap;
}

.characterSelectCorner{
  position:absolute;
  z-index:7;
  width:20px;
  height:20px;
  opacity:.48;
  pointer-events:none;
  transition:width .24s ease,height .24s ease,opacity .24s ease,filter .24s ease;
}

.characterSelectCorner.topLeft{left:7px;top:7px;border-left:2px solid var(--card-accent);border-top:2px solid var(--card-accent)}
.characterSelectCorner.topRight{right:7px;top:7px;border-right:2px solid var(--card-accent);border-top:2px solid var(--card-accent)}
.characterSelectCorner.bottomRight{right:7px;bottom:7px;border-right:2px solid var(--card-accent);border-bottom:2px solid var(--card-accent)}

.characterSelectCard:hover,
.characterSelectCard:focus-visible{
  z-index:3;
  outline:none;
  border-color:var(--card-accent);
  box-shadow:inset 0 0 44px rgba(66,205,241,.10),0 20px 38px rgba(0,0,0,.40),0 0 28px rgba(69,205,242,.25);
  filter:brightness(1.08);
  transform:translateY(-6px) scale(1.025);
}

.characterSelectCard:hover .characterSelectBackdrop,
.characterSelectCard:focus-visible .characterSelectBackdrop{filter:brightness(1.16) saturate(1.12);transform:scale(1.035)}

.characterSelectCard:hover .characterSelectPortraitImage,
.characterSelectCard:focus-visible .characterSelectPortraitImage{
  filter:saturate(1.08) contrast(1.05) brightness(1.05) drop-shadow(0 10px 18px rgba(0,0,0,.48));
  transform:scale(var(--thumb-hover-zoom,1.11));
}

.characterSelectCard:hover .characterSelectName,
.characterSelectCard:focus-visible .characterSelectName{opacity:1;transform:translateY(0)}

.characterSelectCard:hover .characterSelectName strong,
.characterSelectCard:focus-visible .characterSelectName strong{color:#fff;transform:scale(1.06)}

.characterSelectCard:hover .characterSelectCorner,
.characterSelectCard:focus-visible .characterSelectCorner{
  width:29px;
  height:29px;
  opacity:1;
  filter:drop-shadow(0 0 7px var(--card-accent));
}

.characterSelectCard:hover .characterSelectSweep,
.characterSelectCard:focus-visible .characterSelectSweep{animation:cxCharacterSelectSweep .9s ease-out both}

.characterSelectCard.cx-content-locked{
  border-color:color-mix(in srgb,var(--card-accent) 52%,rgba(255,255,255,.12));
}
.characterSelectCard.cx-content-locked::after{
  z-index:4;
  background:linear-gradient(180deg,rgba(2,7,12,.28),rgba(2,6,11,.54))!important;
}
.characterSelectCard.cx-content-locked .characterSelectPortraitImage{
  filter:saturate(.42) contrast(.96) brightness(.52) drop-shadow(0 8px 16px rgba(0,0,0,.52));
}
.characterSelectCard.cx-content-locked .characterSelectBackdrop{
  filter:brightness(.62) saturate(.52);
}
.characterSelectCard.cx-content-locked:hover .characterSelectPortraitImage,
.characterSelectCard.cx-content-locked:focus-visible .characterSelectPortraitImage{
  filter:saturate(.48) contrast(.98) brightness(.57) drop-shadow(0 10px 18px rgba(0,0,0,.58));
}
.characterSelectCard.cx-content-locked:hover .characterSelectBackdrop,
.characterSelectCard.cx-content-locked:focus-visible .characterSelectBackdrop{
  filter:brightness(.68) saturate(.58);
}
.characterSelectCard.cx-content-locked>.cx-content-access-badge-visual{
  z-index:9;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  padding:0;
  border:0;
  color:var(--cx-lock-color,#f6fcff);
  background:transparent;
  pointer-events:none;
}
.characterSelectCard.cx-content-locked>.cx-content-access-badge-visual svg{
  width:clamp(54px,5.4vw,84px);
  height:clamp(54px,5.4vw,84px);
  overflow:visible;
  opacity:.72;
  fill:rgba(3,13,21,.68);
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--cx-lock-color,#57ddf8) 54%,transparent)) drop-shadow(0 8px 14px rgba(0,0,0,.62));
}
.characterSelectCard.cx-content-locked>.cx-content-access-badge-visual .cx-content-access-tier{
  position:absolute;
  top:8px;
  right:9px;
  max-width:72%;
  overflow:hidden;
  padding:4px 6px;
  border:1px solid color-mix(in srgb,var(--cx-lock-color,#57ddf8) 58%,transparent);
  color:var(--cx-lock-color,#f4fbff);
  background:rgba(2,9,15,.72);
  font:900 clamp(8px,.7vw,11px)/1 Arial,sans-serif;
  letter-spacing:.12em;
  text-overflow:ellipsis;
  text-shadow:0 2px 8px #000;
  text-transform:uppercase;
  white-space:nowrap;
}

/* The series background is a fixed stage: only the selection UI moves. */
body.chxCharacterSelectLeaving .characterSelectHeader{
  pointer-events:none;
  animation:cxCharacterSelectHeaderExit .30s cubic-bezier(.65,0,.35,1) both;
}
body.chxCharacterSelectLeaving .characterSelectCard{
  --select-motion-x:110vw;
  --select-nudge-x:4vw;
  pointer-events:none;
  animation:cxCharacterSelectTileExit .28s cubic-bezier(.7,0,.32,1) both;
  animation-delay:calc(var(--select-order,0) * 12ms);
}
body.chxCharacterSelectLeaving .characterSelectCard:nth-child(odd){--select-motion-x:-110vw;--select-nudge-x:-4vw}
body.chxCharacterSelectLeaving .characterSelectCard.transitionSelected{
  filter:brightness(1.2) saturate(1.12);
  z-index:4;
}
body.chxCharacterSelectEntering .characterSelectHeader{
  animation:cxCharacterSelectHeaderEnter .48s cubic-bezier(.18,.78,.22,1) both;
}
body.chxCharacterSelectEntering .characterSelectCard{
  --select-motion-x:110vw;
  --select-nudge-x:2vw;
  --select-overshoot-x:-2vw;
  animation:cxCharacterSelectTileEnter .40s cubic-bezier(.16,.82,.24,1) both;
  animation-delay:calc(var(--select-order,0) * 14ms);
}
body.chxCharacterSelectEntering .characterSelectCard:nth-child(odd){--select-motion-x:-110vw;--select-nudge-x:-2vw;--select-overshoot-x:2vw}

@keyframes cxCharacterSelectTileExit{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1)}
  35%{opacity:1;transform:translate3d(var(--select-nudge-x),-3px,0) scale(.985)}
  100%{opacity:0;transform:translate3d(var(--select-motion-x),0,0) scale(.94)}
}
@keyframes cxCharacterSelectTileEnter{
  0%{opacity:0;transform:translate3d(var(--select-motion-x),0,0) scale(.94)}
  68%{opacity:1;transform:translate3d(var(--select-overshoot-x),0,0) scale(1.01)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes cxCharacterSelectHeaderExit{
  to{opacity:0;transform:translate3d(54px,-8px,0)}
}
@keyframes cxCharacterSelectHeaderEnter{
  from{opacity:0;transform:translate3d(54px,-8px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

@keyframes cxCharacterSelectSweep{
  0%{top:-18%;opacity:0}
  18%{opacity:1}
  80%{opacity:.65}
  100%{top:108%;opacity:0}
}

@media(min-width:1500px){
  .characterSelectGrid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
}

@media(max-width:900px){
  .characterSelectHeader{padding-right:4px;padding-top:58px}
  .characterSelectDepthNav{left:86px;top:12px;width:48px}
  .characterSelectBack{left:auto!important;bottom:auto!important;right:auto!important;top:auto!important;width:48px!important;min-width:48px!important}
  .characterSelectDepthTab{width:48px}
  .characterSelectIdentity h1{max-width:72vw}
  .characterSelectGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}

@media(max-width:680px){
  body.chxCharacterSelectActive > .app{padding:12px 14px 32px}
  body.chxCharacterSelectActive #content{margin-left:0;width:100%}
  .characterSelectScreen{margin:0;padding-bottom:26px}
  .characterSelectHeader{min-height:0;padding:54px 0 17px;align-items:flex-end}
  .characterSelectDepthNav{left:8px;top:76px;width:44px;gap:5px}
  .characterSelectBack{left:auto!important;top:auto!important;width:44px!important;min-width:44px!important;height:112px!important;min-height:100px!important;padding:9px 0!important}
  .characterSelectDepthTab{width:44px;height:112px;min-height:100px;padding:9px 0}
  .characterSelectIdentity h1{max-width:68vw;font-size:clamp(25px,8vw,38px)}
  .characterSelectIdentity p{display:none}
  .characterSelectGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .characterSelectName{opacity:1;transform:none;left:11px;right:11px;bottom:11px}
  .characterSelectName strong{font-size:13px}
  .characterSelectCorner{width:14px;height:14px}
}

@media(prefers-reduced-motion:reduce){
  .characterSelectCard,
  .characterSelectPortraitImage,
  .characterSelectBackdrop,
  .characterSelectName{transition:none}
  .characterSelectCard:hover .characterSelectSweep,
  .characterSelectCard:focus-visible .characterSelectSweep{animation:none}
  body.chxCharacterSelectLeaving .characterSelectHeader,
  body.chxCharacterSelectLeaving .characterSelectCard,
  body.chxCharacterSelectEntering .characterSelectHeader,
  body.chxCharacterSelectEntering .characterSelectCard{animation-duration:.01ms!important;animation-delay:0ms!important}
}

/* Series themes start on character selection, before opening a profile. */
html[data-character-theme="scarlet-dojo"] .characterSelectScreen,
.characterSelectScreen[data-character-theme="scarlet-dojo"]{--select-cyan:#e0aa70}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectHeader{border-bottom-color:rgba(224,170,112,.24)}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectHeader::after{
  background:linear-gradient(90deg,#e0aa70 0 18%,rgba(216,117,94,.22) 45%,transparent 82%);
  box-shadow:-20px 0 20px rgba(218,125,88,.26);
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectIdentity h1{
  text-shadow:0 0 28px rgba(218,125,88,.14),0 3px 20px rgba(0,0,0,.7);
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectCard{
  border-color:rgba(224,170,112,.40);
  background:linear-gradient(145deg,rgba(42,20,22,.94),rgba(12,10,14,.98));
  box-shadow:inset 0 0 34px rgba(218,125,88,.045),0 15px 30px rgba(0,0,0,.28);
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectBackCard{
  border-color:rgba(224,170,112,.62);
  background:linear-gradient(145deg,rgba(103,40,37,.94),rgba(18,11,16,.98));
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectBackArrow{color:#f0b47d}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectBackArrow svg{filter:drop-shadow(0 0 14px rgba(218,125,88,.34))}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectBackdrop{
  background:
    linear-gradient(rgba(224,170,112,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(224,170,112,.04) 1px,transparent 1px),
    radial-gradient(circle at 50% 42%,rgba(174,76,60,.22),transparent 56%),
    linear-gradient(145deg,rgba(42,20,22,.98),rgba(12,10,14,.98));
  background-size:28px 28px,28px 28px,auto,auto;
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectInitials{
  color:rgba(224,170,112,.24);
  text-shadow:0 0 30px rgba(218,125,88,.12);
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectSweep{
  background:linear-gradient(180deg,transparent,rgba(224,170,112,.18),transparent);
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectName strong{
  text-shadow:0 2px 10px #000,0 0 15px rgba(218,125,88,.14);
}
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectCard:hover,
.characterSelectScreen[data-character-theme="scarlet-dojo"] .characterSelectCard:focus-visible{
  box-shadow:inset 0 0 44px rgba(218,125,88,.10),0 20px 38px rgba(0,0,0,.40),0 0 28px rgba(224,170,112,.22);
}

/* Character selection shares the same 21:9 series background as profiles. */
body.chxSeriesCharacterBackground #cxCommandCenter{
  background-color:#05070a;
  background-image:
    linear-gradient(100deg,rgba(3,7,11,.50),rgba(4,7,10,.22) 48%,rgba(3,6,9,.55)),
    linear-gradient(180deg,rgba(3,6,9,.12),transparent 50%,rgba(2,5,8,.42)),
    var(--cx-series-character-background);
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
}
body.chxSeriesCharacterBackground #cxCommandCenter .cx-shell{
  background-color:transparent;
  background-image:linear-gradient(90deg,rgba(2,7,11,.22),transparent 42%,rgba(2,6,10,.18));
}

/* Screen-to-screen wipe. It begins after the persistent menu, so navigation
   always remains visible and interactive-looking during the transition. */
.characterScreenTransition{
  --transition-accent:var(--cx-cyan,#55ddf8);
  --transition-secondary:var(--cx-purple,#9a76ff);
  position:fixed;
  z-index:6000;
  top:0;
  right:0;
  bottom:0;
  left:116px;
  display:none;
  overflow:hidden;
  pointer-events:none;
  backdrop-filter:blur(1px) saturate(.88);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    radial-gradient(circle at 48% 46%,rgba(55,177,218,.17),transparent 48%),
    linear-gradient(115deg,rgba(3,9,16,.62) 0%,rgba(9,32,42,.52) 54%,rgba(8,8,17,.64) 100%);
  background-size:52px 52px,52px 52px,auto,auto;
}
.characterScreenTransition::after{
  content:"";
  position:absolute;
  top:-8%;
  bottom:-8%;
  left:44%;
  width:9%;
  opacity:.82;
  background:linear-gradient(90deg,transparent,var(--transition-accent),var(--transition-secondary),transparent);
  filter:blur(1px) drop-shadow(0 0 24px var(--transition-accent));
  transform:skewX(-10deg);
}
.characterScreenTransition.covering,
.characterScreenTransition.covered,
.characterScreenTransition.revealing{display:block}
.characterScreenTransition.forward.covering{animation:cxScreenCoverForward .31s cubic-bezier(.72,0,.28,1) both}
.characterScreenTransition.backward.covering{animation:cxScreenCoverBack .31s cubic-bezier(.72,0,.28,1) both}
.characterScreenTransition.covered{clip-path:inset(0)}
.characterScreenTransition.forward.revealing{animation:cxScreenRevealForward .50s cubic-bezier(.18,.72,.2,1) both}
.characterScreenTransition.backward.revealing{animation:cxScreenRevealBack .50s cubic-bezier(.18,.72,.2,1) both}
@keyframes cxScreenCoverForward{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes cxScreenCoverBack{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes cxScreenRevealForward{from{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes cxScreenRevealBack{from{clip-path:inset(0)}to{clip-path:inset(0 100% 0 0)}}

.viewer.isCharacterProfileViewer.profilePreparing{
  background:transparent!important;
  pointer-events:none;
}
.viewer.isCharacterProfileViewer.profilePreparing .viewerFrame{opacity:0!important}

html[data-character-theme="scarlet-dojo"] .characterScreenTransition{
  --transition-accent:#e0aa70;
  --transition-secondary:#d8755e;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px),
    radial-gradient(circle at 48% 46%,rgba(218,125,88,.17),transparent 48%),
    linear-gradient(115deg,rgba(16,8,11,.62) 0%,rgba(43,23,24,.52) 54%,rgba(13,9,13,.64) 100%);
  background-size:52px 52px,52px 52px,auto,auto;
}

@media(max-width:1280px){.characterScreenTransition{left:86px}}
@media(max-width:680px){.characterScreenTransition{left:0;top:68px}}
@media(prefers-reduced-motion:reduce){
  .characterScreenTransition.covering,
  .characterScreenTransition.revealing{animation-duration:.12s!important}
}

/* Two permanent background layers prevent a black frame while entering or
   leaving a series. The menu artwork remains rendered below the decoded
   series artwork and the switch only changes the upper layer opacity. */
#cxCommandCenter{
  isolation:isolate;
  background-color:#02070d!important;
  background-image:none!important;
}
#cxCommandCenter::before,
#cxCommandCenter::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  transform:translateZ(0) scale(1.001);
  backface-visibility:hidden;
}
#cxCommandCenter::before{
  opacity:1;
  background-image:
    linear-gradient(110deg,rgba(1,7,14,.58),rgba(2,10,18,.26) 48%,rgba(1,6,12,.48)),
    var(--cx-menu-background);
}
#cxCommandCenter::after{
  opacity:0;
  background-image:
    linear-gradient(100deg,rgba(3,7,11,.50),rgba(4,7,10,.22) 48%,rgba(3,6,9,.55)),
    linear-gradient(180deg,rgba(3,6,9,.12),transparent 50%,rgba(2,5,8,.42)),
    var(--cx-series-character-background,none);
  transition:opacity .28s cubic-bezier(.22,.72,.24,1);
}
body.chxSeriesBackgroundVisible #cxCommandCenter::after{opacity:1}
#cxCommandCenter > .cx-shell{position:relative;z-index:1}