/* ChausX HUB extracted styles
   Generated from inline <style> blocks in index.html.
   Order preserved.
*/


/* ===== style-block-01 ===== */
*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  background:#070707;
  color:white;
  font-family:Arial,sans-serif;
  overflow:hidden;
}

.bg{
  position:fixed;
  inset:-60px;
  background:
    radial-gradient(circle at 20% 20%,rgba(255,140,60,.22),transparent 38%),
    radial-gradient(circle at 80% 25%,rgba(130,80,255,.18),transparent 34%),
    radial-gradient(circle at 50% 90%,rgba(255,60,120,.16),transparent 36%),
    #070707;
  filter:blur(10px);
  z-index:-2;
}

.shade{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.72));
  z-index:-1;
}

.app{
  position:absolute;
  inset:0;
  overflow:auto;
  padding:34px 0 46px;
}

.inner{
  width:min(1180px,92vw);
  margin:0 auto;
}

.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.title h1{
  margin:0;
  font-size:34px;
  letter-spacing:.5px;
  text-shadow:0 0 18px rgba(255,130,60,.65);
}

.title p{
  margin:8px 0 0;
  color:rgba(255,255,255,.7);
  font-weight:700;
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

button{
  border:none;
  color:white;
  font-weight:900;
  cursor:pointer;
  border-radius:999px;
  padding:13px 18px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 18px rgba(255,120,50,.16);
  backdrop-filter:blur(8px);
}

button.primary{
  background:linear-gradient(135deg,#ff4d00,#ff9b22);
  border-color:rgba(255,220,150,.65);
  box-shadow:0 0 24px rgba(255,120,20,.44);
}

button:active{transform:scale(.97)}

input[type=file]{display:none}

.seriesSection{
  margin:30px 0 40px;
}

.seriesHeader{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}

.seriesHeader h2{
  margin:0;
  font-size:24px;
  letter-spacing:.4px;
  text-shadow:0 0 14px rgba(255,140,60,.5);
}

.seriesCount{
  color:rgba(255,255,255,.7);
  font-size:12px;
  font-weight:1000;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.35);
  padding:5px 8px;
  border-radius:999px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:18px;
}

.card{
  position:relative;
  min-height:292px;
  border-radius:22px;
  overflow:hidden;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  cursor:pointer;
  transform:translateY(0);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,190,90,.65);
  box-shadow:0 0 26px rgba(255,120,20,.32),0 14px 30px rgba(0,0,0,.45);
}

.cover{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.15);
}

.cover.missing{
  background:
    radial-gradient(circle at 50% 35%,rgba(255,145,60,.45),transparent 40%),
    linear-gradient(135deg,#1b1b1b,#070707);
}

.cardShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.84));
}

.info{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
}

.nameRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.name{
  font-size:22px;
  font-weight:1000;
  text-shadow:0 2px 8px #000,0 0 12px rgba(255,145,40,.75);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.completion{
  flex:0 0 auto;
  font-size:13px;
  font-weight:1000;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,145,40,.26);
  border:1px solid rgba(255,220,120,.55);
  box-shadow:0 0 12px rgba(255,140,40,.32);
  text-shadow:0 2px 5px #000;
}

.series{
  margin-top:4px;
  font-size:13px;
  color:rgba(255,255,255,.74);
  font-weight:800;
}

.type{
  display:inline-block;
  margin-top:10px;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(255,140,40,.22);
  border:1px solid rgba(255,210,120,.35);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.5px;
}

.delete{
  position:absolute;
  right:10px;
  top:10px;
  width:32px;
  height:32px;
  padding:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.56);
  border:1px solid rgba(255,255,255,.3);
  z-index:4;
}

.empty{
  margin-top:70px;
  display:grid;
  place-items:center;
  text-align:center;
  color:rgba(255,255,255,.76);
}

.emptyBox{
  width:min(520px,92vw);
  padding:34px;
  border-radius:28px;
  background:rgba(0,0,0,.36);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 28px rgba(255,120,40,.14);
  backdrop-filter:blur(8px);
}

.emptyIcon{
  font-size:46px;
  margin-bottom:14px;
}

.empty h2{
  margin:0;
  font-size:24px;
}

.empty p{
  margin:10px 0 0;
  line-height:1.5;
}

.importOverlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(8px);
}

.importOverlay.show{display:grid}

.importBox{
  width:min(420px,86vw);
  padding:34px;
  text-align:center;
  border-radius:28px;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,220,140,.48);
  box-shadow:0 0 34px rgba(255,120,30,.45),0 18px 44px rgba(0,0,0,.55);
}

.loader{
  width:76px;
  height:76px;
  margin:0 auto 20px;
  border-radius:50%;
  border:6px solid rgba(255,255,255,.14);
  border-top-color:#ff9b22;
  border-right-color:#ffd277;
  animation:spin .85s linear infinite;
  box-shadow:0 0 26px rgba(255,140,40,.45);
}

@keyframes spin{to{transform:rotate(360deg)}}

.importTitle{
  font-size:28px;
  font-weight:1000;
  letter-spacing:.5px;
  text-shadow:0 0 18px rgba(255,140,40,.85);
}

.importText{
  margin-top:10px;
  color:rgba(255,255,255,.75);
  font-weight:800;
  line-height:1.4;
}

.viewer{
  position:fixed;
  inset:0;
  z-index:5000;
  display:none;
  background:#000;
}

.viewer.show{display:block}

.viewerFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#000;
}

.viewerLoading{
  position:absolute;
  inset:0;
  z-index:5001;
  display:none;
  place-items:center;
  gap:16px;
  color:#fff;
  font:1000 15px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:radial-gradient(circle at 50% 50%,rgba(55,105,220,.22),transparent 45%),#000;
}
.viewer.loading .viewerLoading{display:grid}
.viewerLoadingSpinner{
  width:58px;
  height:58px;
  border-radius:50%;
  border:5px solid rgba(255,255,255,.16);
  border-top-color:#ff9b22;
  animation:spin .85s linear infinite;
  box-shadow:0 0 24px rgba(255,140,40,.42);
}

.backBtn{
  position:absolute;
  left:18px;
  top:18px;
  z-index:5002;
  border:1px solid rgba(255,255,255,.48);
  background:rgba(0,0,0,.62);
  color:white;
  border-radius:999px;
  padding:10px 15px;
  font-weight:1000;
  font-size:13px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,140,40,.38);
  backdrop-filter:blur(8px);
  text-shadow:0 2px 5px #000;
}

.viewerTitle{
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%);
  z-index:5002;
  color:white;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.32);
  border-radius:999px;
  padding:10px 16px;
  font-size:13px;
  font-weight:1000;
  text-shadow:0 2px 5px #000;
  backdrop-filter:blur(8px);
  pointer-events:none;
}

@media(max-width:640px){
  .header{
    align-items:flex-start;
    flex-direction:column;
  }

  .actions{
    width:100%;
    justify-content:flex-start;
  }

  button{
    padding:12px 15px;
  }

  .title h1{font-size:28px}

  .grid{
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:12px;
  }

  .card{
    min-height:232px;
    border-radius:18px;
  }

  .name{font-size:18px}
  .completion{font-size:11px}
  .seriesHeader h2{font-size:20px}
  .viewerTitle{display:none}
}

/* Points system */
.pointsPanel{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:10px;
}

.pointsDisplay{
  color:white;
  font-weight:1000;
  padding:11px 15px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,220,140,.45);
  box-shadow:0 0 18px rgba(255,140,40,.25);
  text-shadow:0 2px 5px #000;
  backdrop-filter:blur(8px);
}

.codeBox{
  display:flex;
  gap:6px;
  align-items:center;
}

.codeInput{
  width:150px;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.55);
  color:white;
  border-radius:999px;
  padding:12px 14px;
  font-weight:900;
  outline:none;
  box-shadow:0 0 18px rgba(255,120,50,.12);
}

.pointsMessage{
  width:100%;
  text-align:right;
  color:rgba(255,220,150,.95);
  font-size:12px;
  font-weight:900;
  min-height:15px;
  text-shadow:0 2px 5px #000;
}

@media(max-width:640px){
  .pointsPanel{
    justify-content:flex-start;
  }
  .pointsMessage{
    text-align:left;
  }
}


/* ChausX Hub friendly refresh */
.title h1{
  font-size:40px !important;
  background:linear-gradient(90deg,#fff,#ffd39a,#ff8a3d);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:none !important;
}

.title p{
  max-width:560px;
  line-height:1.45;
  color:rgba(255,255,255,.78) !important;
}

.header{
  padding:22px !important;
  border-radius:30px;
  background:
    radial-gradient(circle at 15% 15%,rgba(255,160,80,.18),transparent 35%),
    rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 34px rgba(255,130,50,.12);
  backdrop-filter:blur(10px);
}

.pointsPanel{
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.12);
  border-radius:24px;
  padding:12px;
}

.pointsDisplay{
  font-size:16px !important;
  background:rgba(255,140,40,.18) !important;
}

.card{
  background:rgba(0,0,0,.42) !important;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 20%,rgba(255,180,90,.16),transparent 42%);
  z-index:2;
}

.info,.delete{
  z-index:3;
}

.emptyBox{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,170,80,.18),transparent 45%),
    rgba(0,0,0,.34) !important;
}

.emptyIcon{
  font-size:58px !important;
}


/* v25 hub points layout */
.pointsPanel{
  justify-content:flex-end !important;
  gap:12px !important;
}

.pointsDisplay{
  font-size:24px !important;
  padding:16px 24px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,230,140,.32),transparent 42%),
    linear-gradient(135deg,rgba(255,150,40,.42),rgba(255,85,20,.24)) !important;
  border:1px solid rgba(255,230,150,.85) !important;
  box-shadow:
    0 0 28px rgba(255,150,40,.62),
    0 6px 18px rgba(0,0,0,.42) !important;
  letter-spacing:.4px;
}

.weeklyBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.bonusDetails{
  width:100%;
  text-align:right;
}

.bonusDetails summary{
  cursor:pointer;
  color:rgba(255,255,255,.58);
  font-size:12px;
  font-weight:900;
  list-style:none;
  user-select:none;
}

.bonusDetails summary::-webkit-details-marker{
  display:none;
}

.bonusDetails[open] summary{
  color:rgba(255,220,150,.9);
  margin-bottom:7px;
}

.codeBox{
  justify-content:flex-end;
}

.codeInput{
  width:130px !important;
  padding:10px 12px !important;
  opacity:.86;
}

.pointsMessage{
  font-size:11px !important;
}

@media(max-width:640px){
  .weeklyBlock{
    align-items:flex-start;
  }
  .bonusDetails{
    text-align:left;
  }
}


/* v26 hub layout refresh */
.heroActions{
  display:none !important;
}

.pointsPanel{
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  justify-content:flex-end !important;
}

.pointsHero{
  margin:22px 0 26px;
  width:min(420px,100%);
  padding:22px 26px;
  border-radius:30px;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,230,140,.36),transparent 42%),
    linear-gradient(135deg,rgba(255,150,40,.5),rgba(255,85,20,.22));
  border:1px solid rgba(255,230,150,.85);
  box-shadow:
    0 0 34px rgba(255,150,40,.55),
    0 10px 28px rgba(0,0,0,.42);
  backdrop-filter:blur(10px);
}

.pointsHeroLabel{
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:1000;
  letter-spacing:1.2px;
  margin-bottom:6px;
}

.pointsHero .pointsDisplay{
  padding:0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:38px !important;
  line-height:1;
  text-shadow:
    0 2px 8px rgba(0,0,0,.7),
    0 0 22px rgba(255,200,100,.75);
}

.collectionHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:8px 0 18px;
}

.collectionHeader h2{
  margin:0;
  font-size:28px;
  text-shadow:0 0 16px rgba(255,145,40,.48);
}

.weeklyBlock{
  align-items:flex-end !important;
}

#openCodeBtn{
  opacity:.76;
  padding:10px 14px;
  font-size:12px;
}

#openCodeBtn:hover{
  opacity:1;
}

.codeOverlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(8px);
}

.codeOverlay.show{
  display:grid;
}

.codeModal{
  position:relative;
  width:min(380px,88vw);
  padding:30px;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,160,80,.18),transparent 45%),
    rgba(0,0,0,.78);
  border:1px solid rgba(255,220,140,.52);
  box-shadow:0 0 34px rgba(255,120,40,.42),0 18px 44px rgba(0,0,0,.55);
  text-align:center;
}

.codeModal h2{
  margin:0 0 8px;
  font-size:26px;
  text-shadow:0 0 18px rgba(255,140,40,.8);
}

.codeModal p{
  margin:0 0 18px;
  color:rgba(255,255,255,.72);
  font-weight:800;
  line-height:1.35;
}

.codeModal .codeInput{
  width:100% !important;
  margin-bottom:12px;
  opacity:1 !important;
  text-align:center;
  font-size:16px;
}

.codeClose{
  position:absolute;
  right:12px;
  top:12px;
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  font-size:20px;
}

@media(max-width:640px){
  .collectionHeader{
    align-items:flex-start;
    flex-direction:column;
  }
  .pointsHero{
    width:100%;
  }
  .pointsHero .pointsDisplay{
    font-size:32px !important;
  }
}


/* v5: remove redundant card title while viewing */
.viewerTitle{
  display:none !important;
}


.hubVersion{
  margin-top:6px;
  color:rgba(255,255,255,.42);
  font-size:11px;
  font-weight:900;
}


.saveStatus{display:none !important}


/* Weekly claim state */
#weeklyClaimBtn.canClaim{
  background:linear-gradient(135deg,rgba(255,185,45,.95),rgba(255,120,20,.82)) !important;
  border-color:rgba(255,235,160,.95) !important;
  box-shadow:
    0 0 20px rgba(255,170,40,.75),
    0 0 42px rgba(255,130,20,.42) !important;
  color:white !important;
}

#weeklyClaimBtn.claimed{
  background:rgba(120,25,25,.28) !important;
  border-color:rgba(255,120,120,.34) !important;
  box-shadow:none !important;
  color:rgba(255,210,210,.78) !important;
  cursor:not-allowed !important;
}


/* Export / Import save system */
.saveActions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:14px auto 8px}
.saveBtn{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;border-radius:14px;padding:10px 14px;font-weight:900;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.20);backdrop-filter:blur(10px)}
.saveBtn:hover{background:rgba(255,200,90,.16);border-color:rgba(255,220,140,.42);transform:translateY(-1px)}
.saveBtn.import{background:rgba(120,180,255,.10)}
.saveNotice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9999;max-width:min(520px,calc(100vw - 28px));padding:12px 16px;border-radius:16px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.16);color:white;font-weight:800;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.saveNotice.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
@media(max-width:700px){.saveBtn{font-size:13px;padding:9px 12px}}


/* Save buttons position fix */
.saveActions{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  justify-content:flex-start !important;
  align-items:stretch !important;
  flex-wrap:nowrap !important;
  margin:10px 0 0 !important;
  position:static !important;
  transform:none !important;
  z-index:auto !important;
}

.saveBtn{
  width:100% !important;
  min-width:166px !important;
  border-radius:999px !important;
  padding:11px 16px !important;
  font-size:13px !important;
  text-align:center !important;
}

@media(max-width:700px){
  .saveActions{
    flex-direction:row !important;
    width:100% !important;
    justify-content:flex-end !important;
    margin-top:10px !important;
  }

  .saveBtn{
    width:auto !important;
    min-width:auto !important;
    font-size:12px !important;
    padding:9px 12px !important;
  }
}


/* Save buttons final placement */
.saveActions{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  z-index:5 !important;

  display:flex !important;
  flex-direction:row !important;
  gap:10px !important;
  justify-content:flex-start !important;
  align-items:center !important;
  flex-wrap:wrap !important;

  width:auto !important;
  max-width:420px !important;
  margin:18px 0 26px !important;
  padding:0 !important;
}

.saveBtn{
  width:auto !important;
  min-width:140px !important;
  border-radius:999px !important;
  padding:11px 16px !important;
  font-size:13px !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
}

.saveNotice{
  z-index:99999 !important;
}

@media(max-width:700px){
  .saveActions{
    justify-content:center !important;
    max-width:none !important;
    margin:14px 0 22px !important;
  }

  .saveBtn{
    min-width:128px !important;
    font-size:12px !important;
    padding:10px 13px !important;
  }
}


/* Series first navigation */
.seriesGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;
}

.seriesCard{
  position:relative;
  overflow:hidden;
  min-height:275px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.40);
  cursor:pointer;
  box-shadow:0 20px 50px rgba(0,0,0,.28);
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.seriesCard:hover{
  transform:translateY(-3px);
  border-color:rgba(255,220,140,.45);
  box-shadow:0 24px 70px rgba(255,140,40,.20);
}

.seriesCover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.78;
  transform:scale(1.03);
}

.seriesCard::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.90),rgba(0,0,0,.14),rgba(0,0,0,.35));
  z-index:1;
}

.seriesInfo{
  position:absolute;
  left:18px;
  right:18px;
  bottom:16px;
  z-index:2;
}

.seriesName{
  color:white;
  font-size:24px;
  font-weight:1000;
  text-shadow:0 3px 12px #000;
}

.seriesCount{
  margin-top:7px;
  color:rgba(255,220,160,.94);
  font-size:13px;
  font-weight:900;
  text-shadow:0 2px 8px #000;
}

.collectionTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:20px 0 14px;
}

.collectionTop h2{
  margin:0;
}

.backSeriesBtn{
  border:1px solid rgba(255,220,140,.38);
  background:rgba(255,180,80,.14);
  color:white;
  border-radius:999px;
  padding:11px 16px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
}

.backSeriesBtn:hover{
  background:rgba(255,200,100,.22);
  border-color:rgba(255,230,160,.58);
}

@media(max-width:640px){
  .seriesGrid{
    grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:12px;
  }

  .seriesCard{
    min-height:230px;
    border-radius:20px;
  }

  .seriesName{
    font-size:19px;
  }

  .collectionTop{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* Rectangular series banners */
.seriesGrid{
  grid-template-columns:1fr !important;
  gap:16px !important;
}

.seriesCard{
  min-height:180px !important;
  border-radius:28px !important;
}

.seriesCover{
  object-position:center top !important;
}

.seriesInfo{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:18px !important;
}

.seriesLogo{
  max-width:min(300px,58%);
  max-height:90px;
  object-fit:contain;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.9));
}

.seriesTextBlock{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-left:auto;
}

@media(max-width:700px){
  .seriesCard{
    min-height:150px !important;
    border-radius:22px !important;
  }

  .seriesLogo{
    max-width:52%;
    max-height:62px;
  }

  .seriesInfo{
    align-items:flex-end !important;
  }
}


/* Series banners: two columns */
.seriesGrid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
}

.seriesCard{
  min-height:170px !important;
}

@media(max-width:760px){
  .seriesGrid{
    grid-template-columns:1fr !important;
  }

  .seriesCard{
    min-height:145px !important;
  }
}


/* Series sorting controls */
.seriesControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.seriesSelect,
.seriesCheck{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.38);
  color:white;
  border-radius:999px;
  padding:10px 13px;
  font-weight:900;
  backdrop-filter:blur(8px);
}

.seriesSelect{
  cursor:pointer;
  outline:none;
}

.seriesCheck{
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}

.seriesCheck input{
  accent-color:#ffb44a;
}

@media(max-width:760px){
  .seriesControls{
    width:100%;
  }
}


.seriesCard.emptySeries{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,170,80,.18),transparent 38%),
    linear-gradient(135deg,rgba(20,20,28,.72),rgba(0,0,0,.50)) !important;
}

.seriesCard.emptySeries::before{
  content:"Coming soon";
  position:absolute;
  right:18px;
  top:16px;
  z-index:2;
  color:rgba(255,220,160,.78);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
}


/* Full banner series cards */
.seriesCard{
  overflow:hidden !important;
  position:relative !important;
  min-height:190px !important;
  padding:0 !important;
  background:#000 !important;
}

.seriesCover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  transform:none !important;
}

.seriesCard::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:
    linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.10) 45%,rgba(0,0,0,.38)),
    linear-gradient(to right,rgba(0,0,0,.42),transparent 30%,transparent 70%,rgba(0,0,0,.42)) !important;
  z-index:1 !important;
}

.seriesInfo{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  padding:16px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  gap:0 !important;
}

.seriesLogo{
  max-width:320px !important;
  width:auto !important;
  max-height:92px !important;
  object-fit:contain !important;
  filter:
    drop-shadow(0 4px 12px rgba(0,0,0,.95))
    drop-shadow(0 0 20px rgba(0,0,0,.65)) !important;
}

.seriesTopRow{
  display:flex;
  justify-content:flex-end;
}

.seriesBottomRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
}

.seriesCount{
  margin:0 !important;
  border:1px solid rgba(255,220,140,.24);
  background:rgba(0,0,0,.44);
  backdrop-filter:blur(8px);
  padding:8px 12px;
  border-radius:999px;
  font-size:13px !important;
  color:#ffd79a !important;
  font-weight:1000 !important;
}

.seriesComingSoon{
  border:1px solid rgba(255,220,140,.22);
  background:rgba(0,0,0,.40);
  backdrop-filter:blur(8px);
  color:#ffd08b;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.seriesCard.emptySeries::before{
  display:none !important;
}

@media(max-width:760px){
  .seriesCard{
    min-height:155px !important;
  }

  .seriesLogo{
    max-width:210px !important;
    max-height:64px !important;
  }

  .seriesCount,
  .seriesComingSoon{
    font-size:11px !important;
    padding:7px 10px !important;
  }
}


/* Final series cover panels: cover image fills the whole card */
.seriesCard{
  min-height:190px !important;
  overflow:hidden !important;
  background:#000 !important;
}

.seriesCover{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:1 !important;
  transform:none !important;
  z-index:0 !important;
}

.seriesCard::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:
    linear-gradient(to top,rgba(0,0,0,.42),rgba(0,0,0,.03) 45%,rgba(0,0,0,.26)),
    linear-gradient(to right,rgba(0,0,0,.20),transparent 30%,transparent 70%,rgba(0,0,0,.20)) !important;
}

.seriesInfo{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  padding:16px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  pointer-events:none !important;
}

.seriesLogo,
.seriesName{
  display:none !important;
}

.seriesTopRow{
  display:flex !important;
  justify-content:flex-end !important;
}

.seriesBottomRow{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-end !important;
}

.seriesCount,
.seriesComingSoon{
  border:1px solid rgba(255,220,140,.24) !important;
  background:rgba(0,0,0,.48) !important;
  backdrop-filter:blur(8px) !important;
  color:#ffd79a !important;
  padding:8px 12px !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:1000 !important;
  text-shadow:0 2px 8px #000 !important;
}

.seriesCard.emptySeries::before{
  display:none !important;
}

@media(max-width:760px){
  .seriesCard{
    min-height:155px !important;
  }

  .seriesCount,
  .seriesComingSoon{
    font-size:11px !important;
    padding:7px 10px !important;
  }
}


/* Official series banner set - full panel display */
.seriesGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:16px !important;}
.seriesCard{min-height:190px !important;overflow:hidden !important;background:#000 !important;}
.seriesCover{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center center !important;opacity:1 !important;transform:none !important;z-index:0 !important;}
@media(max-width:760px){.seriesGrid{grid-template-columns:1fr !important}.seriesCard{min-height:155px !important;}}


/* Empty / active series visual distinction */
.seriesCard{
  isolation:isolate;
}

.seriesCard.hasCharacters{
  border-color:rgba(255,220,120,.62) !important;
  box-shadow:
    0 0 0 1px rgba(255,190,80,.18),
    0 22px 62px rgba(255,130,30,.22),
    0 16px 38px rgba(0,0,0,.42) !important;
}

.seriesCard.hasCharacters::before{
  content:"UNLOCKED";
  position:absolute;
  left:16px;
  top:14px;
  z-index:3;
  padding:7px 11px;
  border-radius:999px;
  color:#fff4d5;
  background:rgba(255,145,30,.38);
  border:1px solid rgba(255,230,150,.48);
  backdrop-filter:blur(8px);
  font-size:11px;
  font-weight:1000;
  letter-spacing:.05em;
  text-shadow:0 2px 8px #000;
}

.seriesCard.emptySeries{
  filter:saturate(.55) brightness(.72);
  opacity:.82;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 14px 38px rgba(0,0,0,.32) !important;
}

.seriesCard.emptySeries:hover{
  filter:saturate(.72) brightness(.86);
  opacity:.95;
}

.seriesCard.missingBanner{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,170,80,.25),transparent 38%),
    radial-gradient(circle at 80% 30%,rgba(120,90,255,.18),transparent 34%),
    linear-gradient(135deg,#24160f,#070707 62%,#120b09) !important;
}

.seriesCard.missingBanner::after{
  background:
    linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.18) 45%,rgba(0,0,0,.42)),
    linear-gradient(135deg,rgba(255,160,60,.18),transparent 55%) !important;
}

.seriesCard.missingBanner .seriesName{
  display:block !important;
  font-size:28px !important;
  font-weight:1000 !important;
  color:white !important;
  text-shadow:0 3px 12px #000,0 0 18px rgba(255,140,40,.6) !important;
}

.seriesCard.emptySeries .seriesCount{
  background:rgba(0,0,0,.62) !important;
  color:rgba(255,220,170,.76) !important;
  border-color:rgba(255,255,255,.16) !important;
}

.seriesCard.hasCharacters .seriesCount{
  background:rgba(255,140,30,.34) !important;
  color:#fff4d5 !important;
  border-color:rgba(255,230,150,.56) !important;
  box-shadow:0 0 18px rgba(255,140,40,.28);
}

.seriesCard.hasCharacters .seriesComingSoon{
  display:none !important;
}


.characterCard .characterPreview,
.characterCard img,
.characterPreview{
  width:100%;
  height:220px;
  object-fit:cover;
  object-position:center top;
  display:block;
  border-radius:18px 18px 0 0;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,140,40,.28),transparent 30%),
    linear-gradient(135deg,#1a120d,#090909);
}

.characterCard{
  overflow:hidden;
}

.characterCard .placeholderPreview{
  width:100%;
  height:220px;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,140,40,.28),transparent 30%),
    linear-gradient(135deg,#1a120d,#090909);
}


/* Requested cleanup */
.seriesCard.hasCharacters::before{
  display:none !important;
  content:none !important;
}


/* Viewer button positioning */
.viewer .backBtn{
  left:auto !important;
  right:18px !important;
  top:92px !important;
  z-index:999999 !important;
}

.viewer .backBtn button,
.viewer .backBtn{
  transform:none !important;
}

.viewer iframe{
  background:#000;
}


/* Remove empty/welcome collection panel completely */
#empty,
.empty,
.emptyBox{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
}


/* Use injected in-card back button instead of hub overlay */
.viewer > .backBtn{
  display:none !important;
}


/* Premium Hide UI Button */
.hideUiBtn,
#hideUiBtn,
button[title="Hide UI" i],
button[title="Show UI" i],
button[aria-label="Hide UI" i],
button[aria-label="Show UI" i]{
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.22) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(70,70,78,.88), rgba(32,32,38,.92)) !important;
  backdrop-filter:blur(14px) !important;
  box-shadow:
    0 8px 25px rgba(0,0,0,.45),
    0 0 18px rgba(255,170,70,.18),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    opacity .18s ease !important;
  overflow:hidden !important;
}

.hideUiBtn:hover,
#hideUiBtn:hover,
button[title="Hide UI" i]:hover,
button[title="Show UI" i]:hover,
button[aria-label="Hide UI" i]:hover,
button[aria-label="Show UI" i]:hover{
  transform:translateY(-2px) scale(1.04) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.52),
    0 0 22px rgba(255,170,70,.35),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.hideUiBtn svg,
#hideUiBtn svg,
.hideUiBtn img,
#hideUiBtn img{
  width:24px !important;
  height:24px !important;
  opacity:.96 !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)) !important;
}

/* Prevent overlap with other controls */
.hideUiBtn,
#hideUiBtn{
  margin-top:10px !important;
}


/* Compact top layout: no title block, controls beside points */
.header{display:none !important;}

.compactTopBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin:24px 0 24px;
}

.compactTopBar .pointsHero{
  width:min(440px,100%) !important;
  margin:0 !important;
}

.compactActions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.compactActions .weeklyBlock{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}

.compactActions #weeklyClaimBtnCompact,
.compactActions #openCodeBtnCompact{
  white-space:nowrap;
}

.compactActions .pointsMessage{
  width:auto !important;
  min-width:0 !important;
  text-align:left !important;
}

@media(max-width:760px){
  .compactTopBar{align-items:stretch;flex-direction:column;}
  .compactActions,.compactActions .weeklyBlock{justify-content:flex-start !important;}
}


/* Refined compact header */
.compactTopBar{
  display:grid !important;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:22px;
}

.compactTopBar .pointsHero{
  min-width:440px;
  max-width:440px;
  padding-top:18px !important;
}

.pointsHeroLabel{
  display:none !important;
}

.compactActions{
  align-self:flex-start;
  margin-top:8px;
}

.compactActions .weeklyBlock{
  gap:12px !important;
}

#weeklyClaimBtnCompact,
#dailyClaimBtnCompact{
  min-width:190px;
}

#openCodeBtnCompact{
  opacity:.72;
  transform:scale(.92);
  padding:10px 18px !important;
  border-radius:999px;
  margin-left:6px;
}

@media(max-width:1100px){
  .compactTopBar{
    grid-template-columns:1fr;
  }

  .compactActions{
    margin-top:0;
  }

  .compactTopBar .pointsHero{
    min-width:0;
    max-width:none;
  }
}


/* Final compact points/header layout */
.compactTopBar{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:22px !important;
  margin:22px 0 24px !important;
}

.compactActions{
  order:1 !important;
  margin:0 !important;
  align-self:center !important;
}

.compactActions .weeklyBlock{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  padding:18px 22px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,230,140,.34),transparent 42%),
    linear-gradient(135deg,rgba(255,150,40,.42),rgba(255,85,20,.18)) !important;
  border:1px solid rgba(255,230,150,.82) !important;
  box-shadow:
    0 0 30px rgba(255,150,40,.38),
    0 10px 25px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(10px) !important;
}

#weeklyClaimBtnCompact,
#dailyClaimBtnCompact{
  min-width:180px !important;
}

#openCodeBtnCompact{
  order:2 !important;
  justify-self:end !important;
  align-self:center !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:0 !important;
  opacity:.62 !important;
  transform:none !important;
  font-size:12px !important;
  color:rgba(255,220,170,.78) !important;
  text-decoration:underline !important;
  text-underline-offset:4px !important;
}

#openCodeBtnCompact:hover{
  opacity:1 !important;
}

.compactTopBar .pointsHero{
  order:3 !important;
  justify-self:end !important;
  width:auto !important;
  min-width:220px !important;
  max-width:280px !important;
  margin:0 !important;
  padding:20px 26px !important;
  text-align:center !important;
}

.compactTopBar .pointsHero .pointsDisplay{
  font-size:28px !important;
  text-align:center !important;
  white-space:nowrap !important;
}

@media(max-width:980px){
  .compactTopBar{
    grid-template-columns:1fr !important;
  }

  .compactActions,
  #openCodeBtnCompact,
  .compactTopBar .pointsHero{
    justify-self:start !important;
  }

  .compactActions .weeklyBlock{
    flex-wrap:wrap !important;
  }
}


/* FINAL HEADER LAYOUT - authoritative */
.compactTopBar{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:22px !important;
  margin:28px 0 26px !important;
}

.compactActions{
  order:0 !important;
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:center !important;
  margin:0 !important;
}

.compactActions .weeklyBlock{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  width:auto !important;
  min-width:0 !important;
  padding:18px 22px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,230,140,.34),transparent 42%),
    linear-gradient(135deg,rgba(255,150,40,.48),rgba(255,85,20,.20)) !important;
  border:1px solid rgba(255,230,150,.84) !important;
  box-shadow:
    0 0 30px rgba(255,150,40,.38),
    0 10px 26px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(10px) !important;
}

#weeklyClaimBtnCompact,
#dailyClaimBtnCompact{
  min-width:185px !important;
  width:auto !important;
  white-space:nowrap !important;
  margin:0 !important;
}

#openCodeBtnCompact{
  order:0 !important;
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:center !important;
  margin-right:14px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  color:rgba(255,218,170,.74) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  text-decoration:underline !important;
  text-underline-offset:4px !important;
  opacity:.72 !important;
  transform:none !important;
  text-shadow:0 2px 8px #000 !important;
}

#openCodeBtnCompact:hover{
  opacity:1 !important;
  color:rgba(255,235,190,.95) !important;
}

.compactTopBar .pointsHero{
  order:0 !important;
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:center !important;
  width:auto !important;
  min-width:220px !important;
  max-width:260px !important;
  margin:0 !important;
  padding:19px 26px !important;
  text-align:center !important;
  border-radius:999px !important;
}

.compactTopBar .pointsHero .pointsDisplay{
  font-size:28px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-align:center !important;
}

.pointsHeroLabel{
  display:none !important;
}

@media(max-width:1100px){
  .compactTopBar{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .compactActions,
  #openCodeBtnCompact,
  .compactTopBar .pointsHero{
    grid-column:1 !important;
    justify-self:start !important;
  }

  .compactActions .weeklyBlock{
    flex-wrap:wrap !important;
  }

  #openCodeBtnCompact{
    margin:0 !important;
  }
}


/* Final fixed header + restored series layout */
.inner{
  width:min(1180px,92vw) !important;
  margin:0 auto !important;
}

.compactTopBar{
  display:grid !important;
  grid-template-columns:auto 1fr auto !important;
  align-items:center !important;
  gap:22px !important;
  margin:28px 0 26px !important;
}

.compactActions{
  grid-column:1 !important;
  justify-self:start !important;
  align-self:center !important;
  margin:0 !important;
}

.compactActions .weeklyBlock{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  width:auto !important;
  min-width:0 !important;
  padding:18px 22px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,230,140,.34),transparent 42%),
    linear-gradient(135deg,rgba(255,150,40,.48),rgba(255,85,20,.20)) !important;
  border:1px solid rgba(255,230,150,.84) !important;
  box-shadow:
    0 0 30px rgba(255,150,40,.38),
    0 10px 26px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(10px) !important;
}

#weeklyClaimBtnCompact,
#dailyClaimBtnCompact{
  min-width:185px !important;
  width:auto !important;
  white-space:nowrap !important;
  margin:0 !important;
}

#openCodeBtnCompact{
  grid-column:2 !important;
  justify-self:end !important;
  align-self:center !important;
  margin-right:14px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  min-width:0 !important;
  width:auto !important;
  height:auto !important;
  color:rgba(255,218,170,.74) !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.04em !important;
  text-decoration:underline !important;
  text-underline-offset:4px !important;
  opacity:.72 !important;
  transform:none !important;
  text-shadow:0 2px 8px #000 !important;
}

#openCodeBtnCompact:hover{
  opacity:1 !important;
  color:rgba(255,235,190,.95) !important;
}

.compactTopBar .pointsHero{
  grid-column:3 !important;
  justify-self:end !important;
  align-self:center !important;
  width:auto !important;
  min-width:220px !important;
  max-width:260px !important;
  margin:0 !important;
  padding:19px 26px !important;
  text-align:center !important;
  border-radius:999px !important;
}

.compactTopBar .pointsHero .pointsDisplay{
  font-size:28px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  text-align:center !important;
}

.pointsHeroLabel{
  display:none !important;
}

.seriesGrid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:16px !important;
  width:100% !important;
}

.seriesCard{
  min-height:190px !important;
  max-height:none !important;
  border-radius:28px !important;
}

.seriesCover{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.collectionHeader,
.collectionTop{
  width:100% !important;
}

@media(max-width:1100px){
  .compactTopBar{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .compactActions,
  #openCodeBtnCompact,
  .compactTopBar .pointsHero{
    grid-column:1 !important;
    justify-self:start !important;
  }

  .compactActions .weeklyBlock{
    flex-wrap:wrap !important;
  }

  #openCodeBtnCompact{
    margin:0 !important;
  }
}

@media(max-width:760px){
  .seriesGrid{
    grid-template-columns:1fr !important;
  }
}


/* Claimed reward buttons + reward pop */
#weeklyClaimBtnCompact.claimed,
#dailyClaimBtnCompact.claimed,
#weeklyClaimBtnCompact:disabled,
#dailyClaimBtnCompact:disabled{
  background:rgba(80,45,35,.55) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:rgba(255,220,190,.48) !important;
  box-shadow:none !important;
  cursor:not-allowed !important;
  opacity:.62 !important;
  filter:saturate(.55) !important;
}

#weeklyClaimBtnCompact.canClaim,
#dailyClaimBtnCompact.canClaim{
  background:linear-gradient(135deg,rgba(255,185,45,.95),rgba(255,120,20,.82)) !important;
  border-color:rgba(255,235,160,.95) !important;
  box-shadow:
    0 0 20px rgba(255,170,40,.65),
    0 0 42px rgba(255,130,20,.34) !important;
  color:white !important;
}

.rewardPop{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.72);
  z-index:999999;
  pointer-events:none;
  padding:22px 34px;
  border-radius:28px;
  color:white;
  font-size:56px;
  font-weight:1000;
  letter-spacing:.04em;
  text-shadow:
    0 4px 14px rgba(0,0,0,.85),
    0 0 28px rgba(255,190,70,.95);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,245,180,.42),transparent 45%),
    linear-gradient(135deg,rgba(255,170,35,.92),rgba(255,90,20,.74));
  border:1px solid rgba(255,240,180,.85);
  box-shadow:
    0 0 42px rgba(255,170,40,.62),
    0 20px 60px rgba(0,0,0,.55);
  opacity:0;
  animation:rewardPopAnim 1.05s ease-out forwards;
}

@keyframes rewardPopAnim{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  14%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
  26%{transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1;transform:translate(-50%,-58%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-72%) scale(.92)}
}

@media(max-width:760px){
  .rewardPop{
    font-size:40px;
    padding:18px 26px;
  }
}


/* Cleaner reward panel buttons + immediate points refresh */
.compactActions .weeklyBlock #weeklyClaimBtnCompact,
.compactActions .weeklyBlock #dailyClaimBtnCompact{
  background:rgba(0,0,0,.34) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}

.compactActions .weeklyBlock #weeklyClaimBtnCompact.canClaim,
.compactActions .weeklyBlock #dailyClaimBtnCompact.canClaim{
  background:rgba(0,0,0,.38) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:none !important;
}

.compactActions .weeklyBlock #weeklyClaimBtnCompact.claimed,
.compactActions .weeklyBlock #dailyClaimBtnCompact.claimed,
.compactActions .weeklyBlock #weeklyClaimBtnCompact:disabled,
.compactActions .weeklyBlock #dailyClaimBtnCompact:disabled{
  background:rgba(0,0,0,.22) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:none !important;
  color:rgba(255,230,210,.46) !important;
}


/* Reward buttons hover */
.compactActions .weeklyBlock #weeklyClaimBtnCompact:not(:disabled):hover,
.compactActions .weeklyBlock #dailyClaimBtnCompact:not(:disabled):hover{
  transform:translateY(-2px) scale(1.025) !important;
  background:rgba(0,0,0,.48) !important;
  border-color:rgba(255,240,190,.48) !important;
  box-shadow:
    0 0 18px rgba(255,185,70,.32),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  filter:brightness(1.08) !important;
}

.compactActions .weeklyBlock #weeklyClaimBtnCompact,
.compactActions .weeklyBlock #dailyClaimBtnCompact{
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    opacity .16s ease !important;
}


/* Ambient music toggle */
.ambientToggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:99999;
  width:44px;
  height:44px;
  border-radius:50%;
  padding:0;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.46);
  border:1px solid rgba(255,220,160,.24);
  color:rgba(255,235,205,.88);
  box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 16px rgba(255,160,70,.14);
  backdrop-filter:blur(10px);
  font-size:18px;
  opacity:.72;
  transition:opacity .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ambientToggle:hover{
  opacity:1;
  transform:translateY(-2px) scale(1.04);
  border-color:rgba(255,230,170,.48);
  box-shadow:0 12px 32px rgba(0,0,0,.42),0 0 22px rgba(255,170,70,.24);
}
.ambientToggle.muted{opacity:.48}


/* Ambient music toggle v2 */
.ambientToggle{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  z-index:2147483647 !important;
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),transparent 54%),
    linear-gradient(145deg,rgba(255,150,45,.32),rgba(0,0,0,.72)) !important;
  border:1px solid rgba(255,230,170,.46) !important;
  color:white !important;
  box-shadow:
    0 12px 34px rgba(0,0,0,.46),
    0 0 22px rgba(255,160,60,.28),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(12px) !important;
  font-size:22px !important;
  opacity:.88 !important;
  transition:opacity .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.ambientToggle:hover{
  opacity:1 !important;
  transform:translateY(-2px) scale(1.05) !important;
  box-shadow:
    0 16px 38px rgba(0,0,0,.52),
    0 0 30px rgba(255,170,70,.42),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.ambientToggle.muted{
  opacity:.58 !important;
  filter:saturate(.65) brightness(.8) !important;
}


/* Embedded music player button */
.ambientToggle{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  z-index:2147483647 !important;
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),transparent 54%),
    linear-gradient(145deg,rgba(255,155,45,.34),rgba(0,0,0,.74)) !important;
  border:1px solid rgba(255,230,170,.44) !important;
  color:white !important;
  font-size:24px !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.46),
    0 0 24px rgba(255,165,60,.28),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(12px) !important;
  opacity:.9 !important;
  transition:all .18s ease !important;
}
.ambientToggle:hover{
  transform:translateY(-2px) scale(1.05) !important;
  opacity:1 !important;
}
.ambientToggle.muted{
  opacity:.55 !important;
  filter:saturate(.65) brightness(.82) !important;
}


/* Audio control buttons */
.audioControls{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  z-index:2147483647 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

.audioToggle{
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),transparent 54%),
    linear-gradient(145deg,rgba(255,155,45,.34),rgba(0,0,0,.74)) !important;
  border:1px solid rgba(255,230,170,.44) !important;
  color:white !important;
  font-size:23px !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.46),
    0 0 24px rgba(255,165,60,.28),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  backdrop-filter:blur(12px) !important;
  opacity:.9 !important;
  transition:all .18s ease !important;
}

.audioToggle:hover{
  transform:translateY(-2px) scale(1.05) !important;
  opacity:1 !important;
}

.audioToggle.muted{
  opacity:.52 !important;
  filter:saturate(.65) brightness(.82) !important;
}


/* UPDATED HUB VIEWER BACK BUTTON */
.viewer .backBtn,
#backBtn{
  position:fixed !important;
  top:18px !important;
  right:18px !important;
  left:auto !important;
  bottom:auto !important;

  z-index:2147483647 !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-width:230px !important;
  min-height:56px !important;
  padding:0 28px !important;

  border-radius:22px !important;
  border:1px solid rgba(255,235,185,.96) !important;

  background:rgba(0,0,0,.88) !important;
  color:#fff !important;

  font-size:18px !important;
  font-weight:1000 !important;
  letter-spacing:.04em !important;
  line-height:1 !important;
  white-space:nowrap !important;

  text-shadow:0 2px 7px #000 !important;

  box-shadow:
    0 0 24px rgba(255,175,60,.72),
    0 0 60px rgba(0,0,0,.68) !important;

  backdrop-filter:blur(10px) !important;
  cursor:pointer !important;
}

.viewer .backBtn:hover,
#backBtn:hover{
  filter:brightness(1.16) !important;
  transform:translateY(-1px) scale(1.02) !important;
}

/* Hide card-owned duplicate Back-to-Hub controls inside iframe cards */
.viewerFrame{
  z-index:5001 !important;
}

@media(max-width:640px){
  .viewer .backBtn,
  #backBtn{
    top:8px !important;
    right:8px !important;
    min-width:170px !important;
    min-height:44px !important;
    padding:0 18px !important;
    border-radius:18px !important;
    font-size:13px !important;
  }
}


/* V2 HUB BACK BUTTON: hide screen-level button, use card-level injected button */
.viewer > #backBtn{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}


/* Arknights banner fix: prevent any series-list background bleed */
#content,
.seriesList,
.seriesGrid,
.seriesCollection,
.seriesWrap,
.seriesSection,
.seriesContainer{
  background-image:none !important;
}

.seriesCard,
.seriesTile,
.seriesBanner,
.seriesItem{
  background-size:cover !important;
  background-position:center !important;
}


/* Daily box reward system */
.dailyBoxBtn{
  background:linear-gradient(180deg,rgba(255,178,50,.95),rgba(210,95,20,.95)) !important;
  border-color:rgba(255,232,170,.85) !important;
  box-shadow:0 0 22px rgba(255,150,40,.42) !important;
}
.dailyBoxBtn.claimed{opacity:.58;filter:saturate(.55)}
.dailyBoxOverlay{position:fixed;inset:0;z-index:7000;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(14px)}
.dailyBoxOverlay.show{display:grid}
.dailyBoxModal{width:min(620px,92vw);border-radius:28px;padding:28px;color:white;background:radial-gradient(circle at 50% 0%,rgba(255,180,70,.24),transparent 48%),rgba(0,0,0,.82);border:1px solid rgba(255,225,160,.58);box-shadow:0 0 44px rgba(255,140,35,.42),0 20px 80px rgba(0,0,0,.72);text-align:center}
.dailyBoxModal h2{margin:0 0 16px;font-size:30px;letter-spacing:.06em;text-shadow:0 0 24px rgba(255,150,40,.9)}
.dailyRewards{display:grid;gap:10px;margin:18px 0 22px}
.dailyReward{border-radius:18px;padding:14px 16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-weight:900;text-align:left}
.dailyReward strong{color:#ffd98a}
.dailyBoxClose{border:1px solid rgba(255,235,180,.76);background:rgba(255,150,35,.88);color:white;border-radius:999px;padding:12px 22px;font-weight:1000;cursor:pointer}


/* SAFE BOX-ONLY ECONOMY PATCH */
/* Hide old points / daily / weekly reward UI without removing DOM nodes */
.pointsHero,
.pointsDisplay,
#weeklyClaimBtn,
#weeklyClaimBtnCompact,
#dailyClaimBtnCompact{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Keep bonus code available */
#openCodeBtn,
#openCodeBtnCompact{
  display:inline-flex !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* New box area uses the old rewards block */
.compactTopBar .weeklyBlock{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:12px !important;
  padding:18px 22px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 30% 20%,rgba(255,230,140,.34),transparent 42%),
    linear-gradient(135deg,rgba(255,150,40,.42),rgba(255,85,20,.18)) !important;
  border:1px solid rgba(255,230,150,.82) !important;
  box-shadow:
    0 0 30px rgba(255,150,40,.38),
    0 10px 25px rgba(0,0,0,.34) !important;
  backdrop-filter:blur(10px) !important;
}

#dailyBoxBtn{
  min-width:220px !important;
  font-size:15px !important;
}

#dailyBoxBtn.extra{
  background:linear-gradient(180deg,rgba(120,210,255,.95),rgba(45,120,220,.92)) !important;
  border-color:rgba(190,235,255,.9) !important;
  box-shadow:0 0 24px rgba(90,190,255,.52) !important;
}

/* Old header points panel becomes useless once compact top bar owns box/code */
.header .pointsPanel{
  display:none !important;
}


/* Minimal box-only UI cleanup */
.pointsDisplay,
.pointsHero,
#weeklyClaimBtn,
#weeklyClaimBtnCompact,
#dailyClaimBtnCompact{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#dailyBoxBtn.extra{
  background:linear-gradient(180deg,rgba(120,210,255,.95),rgba(45,120,220,.92)) !important;
  border-color:rgba(190,235,255,.9) !important;
  box-shadow:0 0 24px rgba(90,190,255,.52) !important;
}


/* v12 Hub gacha box rewards */
#dailyBoxBtn{
  min-width:220px !important;
}

#dailyBoxBtn.has-boxes{
  background:linear-gradient(180deg,rgba(255,185,55,.98),rgba(225,95,20,.95)) !important;
  border-color:rgba(255,235,170,.95) !important;
  box-shadow:
    0 0 24px rgba(255,160,45,.58),
    inset 0 0 14px rgba(255,255,255,.16) !important;
  animation:claimBoxPulse 1.8s ease-in-out infinite;
}

@keyframes claimBoxPulse{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-1px);filter:brightness(1.12)}
}

/* Stronger satisfying gacha box overlay */
.dailyBoxOverlay{
  position:fixed !important;
  inset:0 !important;
  z-index:9000 !important;
  display:none;
  place-items:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,170,50,.18),transparent 36%),
    rgba(0,0,0,.78) !important;
  backdrop-filter:blur(16px) !important;
}

.dailyBoxOverlay.show{
  display:grid !important;
}

.dailyBoxModal{
  width:min(780px,94vw) !important;
  min-height:min(560px,86vh);
  border-radius:34px !important;
  padding:30px !important;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,210,100,.30),transparent 42%),
    linear-gradient(180deg,rgba(42,18,6,.96),rgba(6,6,9,.94)) !important;
  border:1px solid rgba(255,225,150,.78) !important;
  box-shadow:
    0 0 60px rgba(255,150,35,.50),
    0 28px 100px rgba(0,0,0,.82),
    inset 0 0 24px rgba(255,255,255,.06) !important;
}

.dailyBoxModal::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    conic-gradient(from 0deg,transparent,rgba(255,180,65,.16),transparent,rgba(255,235,160,.16),transparent);
  animation:gachaSpin 8s linear infinite;
  pointer-events:none;
}

.dailyBoxModal::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 25% 20%,rgba(255,255,255,.14),transparent 8%),
    radial-gradient(circle at 75% 24%,rgba(255,210,120,.12),transparent 10%),
    radial-gradient(circle at 50% 80%,rgba(255,120,40,.12),transparent 22%);
  pointer-events:none;
}

@keyframes gachaSpin{
  to{transform:rotate(360deg)}
}

.dailyBoxModal > *{
  position:relative;
  z-index:2;
}

.dailyBoxModal h2{
  margin:0 0 8px !important;
  font-size:38px !important;
  letter-spacing:.10em !important;
  text-shadow:
    0 0 18px rgba(255,170,45,.95),
    0 4px 10px rgba(0,0,0,.85) !important;
}

.gachaSubtitle{
  color:rgba(255,232,180,.86);
  font-weight:900;
  letter-spacing:.08em;
  text-align:center;
  margin-bottom:22px;
}

.dailyRewards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px !important;
  margin:22px 0 24px !important;
}

.gachaBox{
  min-height:168px;
  border-radius:24px;
  position:relative;
  display:grid;
  place-items:center;
  padding:16px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,220,140,.22),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  border:1px solid rgba(255,225,150,.38);
  box-shadow:
    0 16px 28px rgba(0,0,0,.34),
    inset 0 0 16px rgba(255,255,255,.05);
  cursor:pointer;
  user-select:none;
  transform:translateY(0) scale(1);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow:hidden;
}

.gachaBox:not(.opened):hover{
  transform:translateY(-4px) scale(1.025);
  box-shadow:
    0 22px 38px rgba(0,0,0,.42),
    0 0 28px rgba(255,170,55,.36),
    inset 0 0 18px rgba(255,255,255,.08);
}

.gachaBox:not(.opened)::before{
  content:"";
  width:86px;
  height:72px;
  border-radius:18px;
  background:
    linear-gradient(135deg,rgba(255,225,130,.98),rgba(255,135,35,.92));
  border:2px solid rgba(255,245,190,.9);
  box-shadow:
    0 0 28px rgba(255,160,35,.72),
    inset 0 0 14px rgba(255,255,255,.28);
  transform:perspective(500px) rotateX(10deg);
}

.gachaBox:not(.opened)::after{
  content:"OPEN";
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  color:white;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.16em;
  text-shadow:0 2px 8px #000;
}

.gachaBox.opened{
  cursor:default;
  animation:gachaReveal .62s cubic-bezier(.2,1.4,.3,1) both;
}

@keyframes gachaReveal{
  0%{transform:scale(.86) rotate(-2deg);filter:brightness(.7);opacity:.55}
  45%{transform:scale(1.08) rotate(1deg);filter:brightness(1.65);opacity:1}
  100%{transform:scale(1) rotate(0);filter:brightness(1)}
}

.gachaReward{
  width:100%;
  text-align:center;
  display:none;
}

.gachaBox.opened .gachaReward{
  display:block;
}

.gachaRewardType{
  font-size:12px;
  color:#ffd98a;
  font-weight:1000;
  letter-spacing:.13em;
  margin-bottom:8px;
}

.gachaRewardMain{
  font-size:18px;
  line-height:1.15;
  color:white;
  font-weight:1000;
  text-shadow:0 2px 8px #000,0 0 16px rgba(255,170,55,.45);
}

.gachaRewardSub{
  margin-top:8px;
  font-size:12px;
  color:rgba(255,238,205,.78);
  font-weight:900;
}

.gachaBox.rare{
  border-color:rgba(120,210,255,.75);
  box-shadow:0 0 32px rgba(95,190,255,.25), inset 0 0 16px rgba(255,255,255,.05);
}

.gachaBox.legend{
  border-color:rgba(255,220,120,.92);
  box-shadow:0 0 38px rgba(255,175,45,.42), inset 0 0 16px rgba(255,255,255,.07);
}

.gachaSpark{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.gachaSpark span{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,225,140,.9);
  box-shadow:0 0 14px rgba(255,190,80,.9);
  animation:sparkFly .9s ease-out both;
}

@keyframes sparkFly{
  from{transform:translate(0,0) scale(.5);opacity:0}
  18%{opacity:1}
  to{transform:translate(var(--x),var(--y)) scale(.05);opacity:0}
}

.gachaProgress{
  color:rgba(255,235,190,.9);
  font-weight:1000;
  text-align:center;
  letter-spacing:.08em;
  margin-top:6px;
}

.dailyBoxClose{
  min-width:180px;
  border:1px solid rgba(255,235,180,.84) !important;
  background:linear-gradient(180deg,rgba(255,165,45,.95),rgba(220,85,22,.92)) !important;
  color:white !important;
  border-radius:999px !important;
  padding:13px 24px !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  box-shadow:0 0 22px rgba(255,145,35,.38) !important;
}

.dailyBoxClose:disabled{
  opacity:.45;
  cursor:not-allowed !important;
}


/* v14 stronger gacha reveal effects + rarity skins */
.gachaBox{
  isolation:isolate;
}

.gachaBox.opened{
  overflow:hidden;
}

.gachaBox.opened::before{
  content:"";
  position:absolute;
  inset:-40%;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.96),rgba(255,220,120,.48) 10%,transparent 34%),
    conic-gradient(from 0deg,transparent,rgba(255,220,120,.34),transparent,rgba(255,150,40,.28),transparent);
  box-shadow:none;
  transform:none;
  animation:gachaOpenBurst .7s ease-out both;
  z-index:0;
}

.gachaBox.opened::after{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    linear-gradient(90deg,transparent 0 42%,rgba(255,255,255,.72) 48%,transparent 54%),
    linear-gradient(0deg,transparent 0 42%,rgba(255,220,120,.40) 49%,transparent 56%);
  opacity:0;
  transform:rotate(25deg) scale(.6);
  animation:gachaCrossFlash .75s ease-out both;
  z-index:1;
}

@keyframes gachaOpenBurst{
  0%{opacity:0;transform:scale(.2) rotate(0deg);filter:blur(2px)}
  25%{opacity:1;transform:scale(.8) rotate(60deg);filter:blur(0)}
  100%{opacity:0;transform:scale(1.55) rotate(180deg);filter:blur(4px)}
}

@keyframes gachaCrossFlash{
  0%{opacity:0;transform:rotate(25deg) scale(.2)}
  35%{opacity:1;transform:rotate(25deg) scale(1.1)}
  100%{opacity:0;transform:rotate(25deg) scale(1.7)}
}

.gachaReward{
  position:relative;
  z-index:3;
}

.gachaBox.outfit-common.opened{
  border-color:rgba(135,210,255,.72) !important;
  box-shadow:
    0 0 34px rgba(90,185,255,.32),
    inset 0 0 18px rgba(120,210,255,.10) !important;
}

.gachaBox.outfit-epic.opened{
  border-color:rgba(210,125,255,.88) !important;
  box-shadow:
    0 0 44px rgba(190,90,255,.52),
    0 0 80px rgba(110,60,255,.22),
    inset 0 0 22px rgba(220,150,255,.12) !important;
}

.gachaBox.outfit-legend.opened{
  border-color:rgba(255,230,130,1) !important;
  box-shadow:
    0 0 56px rgba(255,190,55,.72),
    0 0 110px rgba(255,120,35,.36),
    inset 0 0 30px rgba(255,245,190,.18) !important;
  animation:gachaReveal .62s cubic-bezier(.2,1.4,.3,1) both, legendRewardPulse 1.15s ease-in-out .45s infinite;
}

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

.gachaBox.outfit-epic .gachaRewardType{
  color:#e6a3ff !important;
  text-shadow:0 0 18px rgba(210,100,255,.75);
}

.gachaBox.outfit-legend .gachaRewardType{
  color:#ffe28a !important;
  text-shadow:
    0 0 18px rgba(255,200,70,.95),
    0 0 32px rgba(255,120,35,.55);
}

.gachaBox.outfit-legend .gachaRewardMain{
  font-size:21px !important;
}

.gachaRaritySeal{
  display:inline-grid;
  place-items:center;
  min-width:86px;
  padding:5px 10px;
  border-radius:999px;
  margin:0 auto 8px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  color:white;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
}

.gachaBox.outfit-common .gachaRaritySeal{
  background:rgba(60,160,255,.18);
  border-color:rgba(135,210,255,.65);
}

.gachaBox.outfit-epic .gachaRaritySeal{
  background:rgba(170,65,255,.22);
  border-color:rgba(220,150,255,.75);
}

.gachaBox.outfit-legend .gachaRaritySeal{
  background:rgba(255,170,35,.24);
  border-color:rgba(255,230,130,.9);
}

.gachaScreenFlash{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.85),rgba(255,200,80,.38) 18%,transparent 55%);
  opacity:0;
  animation:gachaScreenFlash .62s ease-out both;
}

.gachaScreenFlash.epic{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.82),rgba(210,90,255,.42) 18%,transparent 58%);
}

.gachaScreenFlash.legend{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,1),rgba(255,215,90,.62) 18%,rgba(255,110,35,.24) 42%,transparent 66%);
  animation:gachaScreenFlashLegend .9s ease-out both;
}

@keyframes gachaScreenFlash{
  0%{opacity:0;transform:scale(.7)}
  24%{opacity:.9;transform:scale(1)}
  100%{opacity:0;transform:scale(1.25)}
}

@keyframes gachaScreenFlashLegend{
  0%{opacity:0;transform:scale(.55) rotate(0deg)}
  22%{opacity:1;transform:scale(1.05) rotate(12deg)}
  48%{opacity:.72;transform:scale(1.16) rotate(-8deg)}
  100%{opacity:0;transform:scale(1.42) rotate(0deg)}
}

/* Music volume popover */
.musicVolumePanel{
  position:fixed;
  right:82px;
  bottom:74px;
  z-index:2147483647;
  width:190px;
  padding:14px 14px 12px;
  border-radius:18px;
  background:rgba(0,0,0,.78);
  border:1px solid rgba(255,225,160,.38);
  box-shadow:0 18px 45px rgba(0,0,0,.48),0 0 24px rgba(255,160,60,.22);
  backdrop-filter:blur(14px);
  color:white;
  display:none;
}

.musicVolumePanel.show{
  display:block;
  animation:volumePanelIn .18s ease-out both;
}

@keyframes volumePanelIn{
  from{opacity:0;transform:translateY(8px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

.musicVolumePanel label{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  color:rgba(255,235,205,.9);
  margin-bottom:10px;
}

.musicVolumePanel input[type="range"]{
  width:100%;
  accent-color:#ffad3c;
}

.musicVolumeQuick{
  display:flex;
  gap:6px;
  margin-top:10px;
}

.musicVolumeQuick button{
  flex:1;
  border-radius:999px;
  border:1px solid rgba(255,220,160,.25);
  background:rgba(255,255,255,.08);
  color:white;
  font-size:11px;
  font-weight:900;
  padding:6px 0;
  cursor:pointer;
}


/* v15 gacha layout: 5 rewards, 2 top + 3 bottom, stronger suspense */
.dailyRewards{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

.gachaBox{
  min-height:178px !important;
}

.gachaBox:nth-child(1){
  grid-column:2 / span 2;
}
.gachaBox:nth-child(2){
  grid-column:4 / span 2;
}
.gachaBox:nth-child(3){
  grid-column:1 / span 2;
}
.gachaBox:nth-child(4){
  grid-column:3 / span 2;
}
.gachaBox:nth-child(5){
  grid-column:5 / span 2;
}

.gachaBox.is-priming{
  animation:gachaPrimeShake .9s ease-in-out infinite;
  filter:brightness(1.2);
}

@keyframes gachaPrimeShake{
  0%,100%{transform:translateY(0) rotate(0)}
  20%{transform:translateY(-2px) rotate(-1deg)}
  40%{transform:translateY(1px) rotate(1deg)}
  60%{transform:translateY(-1px) rotate(-.5deg)}
  80%{transform:translateY(1px) rotate(.5deg)}
}

.gachaBox.is-opening{
  animation:gachaSuspenseCharge 1.15s ease-in-out both;
}

@keyframes gachaSuspenseCharge{
  0%{transform:scale(1);filter:brightness(1)}
  35%{transform:scale(1.045);filter:brightness(1.35)}
  70%{transform:scale(.98);filter:brightness(.75)}
  100%{transform:scale(1.08);filter:brightness(1.75)}
}

.gachaSuspenseText{
  position:absolute;
  inset:auto 0 18px;
  text-align:center;
  color:white;
  font-size:14px;
  font-weight:1000;
  letter-spacing:.14em;
  text-shadow:0 2px 8px #000,0 0 18px rgba(255,180,80,.85);
  opacity:0;
  pointer-events:none;
}

.gachaBox.is-opening .gachaSuspenseText{
  opacity:1;
  animation:gachaSuspenseTextPulse .34s ease-in-out infinite alternate;
}

@keyframes gachaSuspenseTextPulse{
  from{transform:scale(.98);opacity:.62}
  to{transform:scale(1.05);opacity:1}
}

.gachaBox.opened.outfit-legend{
  transform-origin:center;
}

.gachaBox.opened.outfit-legend .gachaRewardMain{
  animation:legendTextPop .9s cubic-bezier(.18,1.6,.22,1) both;
}

@keyframes legendTextPop{
  0%{transform:scale(.6);opacity:0;filter:blur(4px)}
  55%{transform:scale(1.18);opacity:1;filter:blur(0)}
  100%{transform:scale(1);opacity:1}
}

.gachaBox.opened.outfit-epic .gachaRewardMain{
  animation:epicTextPop .65s cubic-bezier(.18,1.4,.22,1) both;
}

@keyframes epicTextPop{
  from{transform:translateY(8px) scale(.82);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

.gachaRewardSub{
  min-height:30px;
}

.gachaComboBanner{
  position:absolute;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 16px;
  border-radius:999px;
  background:rgba(255,165,45,.22);
  border:1px solid rgba(255,225,145,.6);
  color:white;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.16em;
  text-shadow:0 2px 8px #000,0 0 16px rgba(255,170,65,.8);
  box-shadow:0 0 24px rgba(255,150,40,.34);
  z-index:4;
  pointer-events:none;
  opacity:0;
}

.gachaComboBanner.show{
  animation:comboBannerIn .9s ease-out both;
}

@keyframes comboBannerIn{
  0%{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.9)}
  22%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.04)}
  100%{opacity:0;transform:translateX(-50%) translateY(-2px) scale(1)}
}

@media(max-width:760px){
  .dailyRewards{
    grid-template-columns:1fr !important;
  }
  .gachaBox:nth-child(n){
    grid-column:auto !important;
  }
}


/* v16 gacha: fixed 5-box layout + hidden rarity before reveal */
.dailyRewards{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

.dailyRewards .gachaBox:nth-child(1){grid-column:2 / span 2 !important;}
.dailyRewards .gachaBox:nth-child(2){grid-column:4 / span 2 !important;}
.dailyRewards .gachaBox:nth-child(3){grid-column:1 / span 2 !important;}
.dailyRewards .gachaBox:nth-child(4){grid-column:3 / span 2 !important;}
.dailyRewards .gachaBox:nth-child(5){grid-column:5 / span 2 !important;}

/* Closed boxes must not reveal rarity/type */
.gachaBox:not(.opened){
  border-color:rgba(255,225,150,.38) !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.34),
    inset 0 0 16px rgba(255,255,255,.05) !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,220,140,.22),transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)) !important;
  filter:none !important;
}

.gachaBox:not(.opened).outfit-common,
.gachaBox:not(.opened).outfit-epic,
.gachaBox:not(.opened).outfit-legend,
.gachaBox:not(.opened).rare,
.gachaBox:not(.opened).legend{
  border-color:rgba(255,225,150,.38) !important;
  box-shadow:
    0 16px 28px rgba(0,0,0,.34),
    inset 0 0 16px rgba(255,255,255,.05) !important;
}

.gachaBox:not(.opened) .gachaReward{
  display:none !important;
}

/* Reveal rarity only after opened */
.gachaBox.opened.outfit-common{
  border-color:rgba(135,210,255,.72) !important;
  box-shadow:
    0 0 34px rgba(90,185,255,.32),
    inset 0 0 18px rgba(120,210,255,.10) !important;
}

.gachaBox.opened.outfit-epic{
  border-color:rgba(210,125,255,.88) !important;
  box-shadow:
    0 0 44px rgba(190,90,255,.52),
    0 0 80px rgba(110,60,255,.22),
    inset 0 0 22px rgba(220,150,255,.12) !important;
}

.gachaBox.opened.outfit-legend{
  border-color:rgba(255,230,130,1) !important;
  box-shadow:
    0 0 56px rgba(255,190,55,.72),
    0 0 110px rgba(255,120,35,.36),
    inset 0 0 30px rgba(255,245,190,.18) !important;
  animation:gachaReveal .62s cubic-bezier(.2,1.4,.3,1) both, legendRewardPulse 1.15s ease-in-out .45s infinite;
}

@media(max-width:760px){
  .dailyRewards{
    grid-template-columns:1fr !important;
  }
  .dailyRewards .gachaBox:nth-child(n){
    grid-column:auto !important;
  }
}


/* v17 SFX active/inactive clarity */
#sfxToggle:not(.muted){
  opacity:1 !important;
  filter:saturate(1.25) brightness(1.08) !important;
  border-color:rgba(255,230,170,.76) !important;
  box-shadow:
    0 14px 36px rgba(0,0,0,.46),
    0 0 26px rgba(255,175,70,.42),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

#sfxToggle.muted{
  opacity:.48 !important;
  filter:saturate(.45) brightness(.75) !important;
}


/* v18 hide OPEN text while OPENING suspense is active */
.gachaBox.is-opening::after{
  opacity:0 !important;
}

.gachaBox.opened::after{
  opacity:0 !important;
}


/* v20 reward identity colors + full-screen epic/legend reveal */
.gachaBox.opened.reward-outfit{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,205,95,.28),transparent 46%),
    linear-gradient(180deg,rgba(255,145,35,.22),rgba(85,34,8,.32)),
    rgba(255,255,255,.05) !important;
}

.gachaBox.opened.reward-upgrade{
  background:
    radial-gradient(circle at 50% 0%,rgba(95,205,255,.24),transparent 46%),
    linear-gradient(180deg,rgba(40,135,255,.20),rgba(10,32,82,.32)),
    rgba(255,255,255,.05) !important;
}

.gachaBox.opened.reward-empty{
  background:
    radial-gradient(circle at 50% 0%,rgba(180,180,180,.18),transparent 46%),
    linear-gradient(180deg,rgba(120,120,120,.12),rgba(20,20,22,.30)),
    rgba(255,255,255,.04) !important;
}

.rewardCategoryBadge{
  display:inline-grid;
  place-items:center;
  min-width:92px;
  padding:5px 10px;
  border-radius:999px;
  margin:0 auto 7px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  color:white;
  border:1px solid rgba(255,255,255,.26);
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}

.rewardCategoryBadge.outfit{
  background:rgba(255,140,35,.32);
  border-color:rgba(255,205,120,.72);
  box-shadow:0 0 18px rgba(255,150,55,.34);
}

.rewardCategoryBadge.upgrade{
  background:rgba(55,145,255,.28);
  border-color:rgba(130,215,255,.68);
  box-shadow:0 0 18px rgba(80,180,255,.30);
}

.rewardLevelBadge{
  display:inline-grid;
  place-items:center;
  min-width:74px;
  padding:4px 9px;
  border-radius:999px;
  margin:4px auto 8px;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.10em;
  color:rgba(255,255,255,.95);
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.22);
}

.gachaFullReveal{
  position:fixed;
  inset:0;
  z-index:10050;
  pointer-events:none;
  display:grid;
  place-items:center;
  opacity:0;
}

.gachaFullReveal.show{
  animation:fullRevealFade 1.85s ease-out both;
}

.gachaFullReveal.epic{
  background:
    radial-gradient(circle at center,rgba(220,100,255,.58),rgba(90,40,180,.32) 30%,rgba(0,0,0,.72) 68%);
}

.gachaFullReveal.legend{
  background:
    radial-gradient(circle at center,rgba(255,255,255,.84),rgba(255,220,85,.58) 16%,rgba(255,110,35,.42) 36%,rgba(0,0,0,.78) 72%);
}

.gachaFullRevealCore{
  position:relative;
  display:grid;
  place-items:center;
  text-align:center;
  transform:scale(.6);
}

.gachaFullReveal.show .gachaFullRevealCore{
  animation:fullRevealCorePop 1.45s cubic-bezier(.16,1.6,.22,1) both;
}

.gachaFullRevealTitle{
  color:white;
  font-size:clamp(42px,8vw,112px);
  font-weight:1000;
  letter-spacing:.13em;
  text-shadow:
    0 0 22px rgba(255,255,255,.95),
    0 0 46px rgba(255,175,55,.9),
    0 5px 16px rgba(0,0,0,.9);
}

.gachaFullRevealSub{
  margin-top:14px;
  color:rgba(255,245,210,.94);
  font-size:clamp(18px,3vw,36px);
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:0 3px 12px #000;
}

.gachaFullReveal.epic .gachaFullRevealTitle{
  text-shadow:
    0 0 24px rgba(245,200,255,.95),
    0 0 58px rgba(205,80,255,.95),
    0 5px 16px rgba(0,0,0,.9);
}

.gachaFullRevealRays{
  position:absolute;
  width:160vw;
  height:160vw;
  background:
    conic-gradient(from 0deg,transparent 0 7%,rgba(255,255,255,.26) 8% 10%,transparent 11% 18%,rgba(255,220,100,.20) 19% 21%,transparent 22% 100%);
  animation:fullRevealSpin 2.1s linear infinite;
  opacity:.85;
}

.gachaFullReveal.epic .gachaFullRevealRays{
  background:
    conic-gradient(from 0deg,transparent 0 7%,rgba(245,190,255,.28) 8% 10%,transparent 11% 18%,rgba(170,80,255,.22) 19% 21%,transparent 22% 100%);
}

@keyframes fullRevealFade{
  0%{opacity:0}
  12%{opacity:1}
  72%{opacity:1}
  100%{opacity:0}
}

@keyframes fullRevealCorePop{
  0%{transform:scale(.45) rotate(-4deg);filter:blur(6px);opacity:0}
  36%{transform:scale(1.12) rotate(1deg);filter:blur(0);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}

@keyframes fullRevealSpin{
  to{transform:rotate(360deg)}
}


/* v21 full-screen outfit reveal tiers + Level Up wording */
.gachaFullReveal.common{
  background:
    radial-gradient(circle at center,rgba(170,225,255,.62),rgba(55,140,255,.30) 28%,rgba(0,0,0,.70) 68%);
}

.gachaFullReveal.common .gachaFullRevealTitle{
  text-shadow:
    0 0 20px rgba(180,235,255,.9),
    0 0 42px rgba(70,170,255,.75),
    0 5px 16px rgba(0,0,0,.9);
}

.gachaFullReveal.common .gachaFullRevealRays{
  background:
    conic-gradient(from 0deg,transparent 0 9%,rgba(160,220,255,.20) 10% 12%,transparent 13% 23%,rgba(80,170,255,.16) 24% 26%,transparent 27% 100%);
  opacity:.55;
}

.gachaFullReveal.epic .gachaFullRevealCore{
  transform:scale(.7);
}

.gachaFullReveal.legend .gachaFullRevealCore{
  transform:scale(.8);
}

.gachaFullReveal.common .gachaFullRevealTitle{
  font-size:clamp(34px,6.5vw,84px);
}

.gachaFullReveal.epic .gachaFullRevealTitle{
  font-size:clamp(42px,8vw,108px);
}

.gachaFullReveal.legend .gachaFullRevealTitle{
  font-size:clamp(50px,9vw,128px);
}

.gachaBox.opened.reward-upgrade .rewardCategoryBadge.upgrade{
  background:rgba(55,145,255,.34);
  border-color:rgba(150,225,255,.78);
}

.gachaBox.opened.reward-upgrade .gachaRewardType{
  color:#9edfff !important;
  text-shadow:0 0 18px rgba(80,180,255,.65);
}

.gachaBox.opened.reward-upgrade .rewardLevelBadge{
  background:rgba(35,120,255,.32);
  border-color:rgba(125,210,255,.58);
  color:#dff7ff;
}


/* v22 reward readability improvements */
.gachaBox.opened.reward-outfit .gachaRewardMain{
  font-size:26px !important;
  line-height:1.02 !important;
  font-weight:1000 !important;
  letter-spacing:.02em;
  color:white !important;
  text-shadow:
    0 3px 10px rgba(0,0,0,.95),
    0 0 22px rgba(255,200,90,.55);
}

.gachaBox.opened.reward-outfit .gachaRewardSub{
  margin-top:10px;
  font-size:13px !important;
  color:rgba(255,235,205,.82) !important;
  font-weight:900 !important;
  letter-spacing:.04em;
}

.gachaBox.opened.reward-upgrade .gachaRewardMain{
  font-size:22px !important;
  line-height:1.05 !important;
}

.gachaBox.opened.reward-upgrade .gachaRewardSub{
  display:none !important;
}

.gachaBox.opened.reward-upgrade .gachaRewardType{
  font-size:18px !important;
  letter-spacing:.12em !important;
}

.gachaBox.opened.reward-upgrade .rewardLevelBadge{
  margin-top:10px !important;
  font-size:13px !important;
  min-width:92px !important;
}


/* v23 outfit reward labels + fullscreen details */
.gachaBox.opened.reward-outfit .rewardLevelBadge{
  display:none !important;
}

.gachaFullRevealType{
  color:rgba(255,240,205,.92);
  font-size:clamp(14px,2.2vw,28px);
  font-weight:1000;
  letter-spacing:.18em;
  text-shadow:0 3px 12px #000,0 0 16px rgba(255,190,80,.68);
  margin-bottom:10px;
}

.gachaFullRevealCharacter{
  color:white;
  font-size:clamp(30px,6vw,86px);
  font-weight:1000;
  letter-spacing:.08em;
  text-shadow:
    0 0 24px rgba(255,255,255,.9),
    0 0 46px rgba(255,175,55,.75),
    0 5px 16px rgba(0,0,0,.92);
}

.gachaFullRevealOutfit{
  margin-top:12px;
  color:rgba(255,235,205,.94);
  font-size:clamp(17px,3vw,38px);
  font-weight:1000;
  letter-spacing:.06em;
  text-shadow:0 3px 12px #000,0 0 20px rgba(255,170,70,.52);
}

.gachaFullRevealTitle{
  margin-bottom:8px;
}


/* v24 fullscreen readability + simplified Level Up card */
.gachaFullRevealCore{
  padding:clamp(24px,4vw,54px) clamp(28px,5vw,72px) !important;
  border-radius:clamp(22px,3vw,42px) !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,190,80,.16),transparent 46%),
    rgba(0,0,0,.72) !important;
  border:1px solid rgba(255,230,170,.42) !important;
  box-shadow:
    0 0 42px rgba(255,160,60,.34),
    0 22px 80px rgba(0,0,0,.72),
    inset 0 0 20px rgba(255,255,255,.05) !important;
  backdrop-filter:blur(10px) !important;
}

.gachaFullReveal.epic .gachaFullRevealCore{
  background:
    radial-gradient(circle at 50% 0%,rgba(190,90,255,.20),transparent 46%),
    rgba(0,0,0,.74) !important;
  border-color:rgba(220,150,255,.46) !important;
  box-shadow:
    0 0 50px rgba(190,90,255,.42),
    0 22px 80px rgba(0,0,0,.72),
    inset 0 0 20px rgba(255,255,255,.05) !important;
}

.gachaFullReveal.legend .gachaFullRevealCore{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,210,90,.28),transparent 48%),
    rgba(0,0,0,.76) !important;
  border-color:rgba(255,230,140,.62) !important;
  box-shadow:
    0 0 64px rgba(255,185,55,.54),
    0 22px 90px rgba(0,0,0,.76),
    inset 0 0 24px rgba(255,255,255,.07) !important;
}

/* For Level Up cards: remove the blue LEVEL UP line, keep the white +1 TRY line */
.gachaBox.opened.reward-upgrade .rewardCategoryBadge{
  display:none !important;
}

.gachaBox.opened.reward-upgrade .gachaRewardType{
  display:none !important;
}

.gachaBox.opened.reward-upgrade .gachaRewardMain{
  display:none !important;
}

.gachaBox.opened.reward-upgrade .rewardLevelBadge{
  display:inline-grid !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:white !important;
  font-size:22px !important;
  text-shadow:0 2px 8px #000,0 0 18px rgba(120,210,255,.55) !important;
  margin:0 auto !important;
}


/* v25 Level Up display + outfit rarity revealed backgrounds */

/* Revealed outfit backgrounds by rarity */
.gachaBox.opened.reward-outfit.outfit-common{
  background:
    radial-gradient(circle at 50% 0%,rgba(135,210,255,.34),transparent 48%),
    linear-gradient(180deg,rgba(45,155,255,.24),rgba(9,40,80,.38)),
    rgba(255,255,255,.05) !important;
}

.gachaBox.opened.reward-outfit.outfit-epic{
  background:
    radial-gradient(circle at 50% 0%,rgba(220,120,255,.38),transparent 48%),
    linear-gradient(180deg,rgba(165,60,255,.28),rgba(55,16,90,.42)),
    rgba(255,255,255,.05) !important;
}

.gachaBox.opened.reward-outfit.outfit-legend{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,230,130,.46),transparent 48%),
    linear-gradient(180deg,rgba(255,165,35,.32),rgba(96,44,6,.44)),
    rgba(255,255,255,.05) !important;
}

/* Level Up cards: only blue LEVEL UP, character name, +N TRY */
.gachaBox.opened.reward-upgrade .gachaReward{
  display:grid !important;
  place-items:center !important;
  gap:8px !important;
}

.gachaBox.opened.reward-upgrade .rewardCategoryBadge.upgrade{
  display:inline-grid !important;
  margin:0 auto !important;
  background:rgba(55,145,255,.32) !important;
  border:1px solid rgba(150,225,255,.76) !important;
  color:#dff7ff !important;
  box-shadow:0 0 18px rgba(80,180,255,.36) !important;
}

.gachaBox.opened.reward-upgrade .gachaRaritySeal,
.gachaBox.opened.reward-upgrade .gachaRewardType,
.gachaBox.opened.reward-upgrade .gachaRewardSub{
  display:none !important;
}

.gachaBox.opened.reward-upgrade .gachaRewardMain{
  display:block !important;
  font-size:20px !important;
  line-height:1.08 !important;
  color:white !important;
  font-weight:1000 !important;
  text-shadow:0 2px 8px #000,0 0 18px rgba(120,210,255,.42) !important;
  margin:0 !important;
}

.gachaBox.opened.reward-upgrade .rewardLevelBadge{
  display:inline-grid !important;
  min-width:84px !important;
  margin:0 auto !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.36) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  color:white !important;
  font-size:15px !important;
  font-weight:1000 !important;
  text-shadow:0 2px 8px #000 !important;
  box-shadow:none !important;
}


/* v26 distinct LEVEL UP background */
.gachaBox.opened.reward-upgrade{
  background:
    radial-gradient(circle at 50% 0%,rgba(120,255,205,.26),transparent 50%),
    linear-gradient(180deg,rgba(35,255,175,.14),rgba(6,68,52,.40)),
    rgba(255,255,255,.04) !important;

  border-color:rgba(120,255,205,.52) !important;

  box-shadow:
    0 0 34px rgba(60,255,185,.22),
    inset 0 0 18px rgba(120,255,205,.08),
    0 18px 34px rgba(0,0,0,.34) !important;
}

.gachaBox.opened.reward-upgrade .rewardCategoryBadge.upgrade{
  background:rgba(40,255,185,.18) !important;
  border-color:rgba(150,255,220,.72) !important;
  color:#e9fff8 !important;
  box-shadow:0 0 20px rgba(80,255,195,.28) !important;
}

.gachaBox.opened.reward-upgrade .rewardLevelBadge{
  background:rgba(0,0,0,.34) !important;
  border-color:rgba(150,255,220,.34) !important;
  color:#f4fffb !important;
  text-shadow:
    0 2px 8px #000,
    0 0 14px rgba(120,255,205,.24) !important;
}


/* v27 force final reward styling on every opened box, including first */
.gachaBox.opened[data-tier*="reward-outfit"][data-tier*="outfit-common"],
.gachaBox.opened.reward-outfit.outfit-common{
  background:
    radial-gradient(circle at 50% 0%,rgba(135,210,255,.34),transparent 48%),
    linear-gradient(180deg,rgba(45,155,255,.24),rgba(9,40,80,.38)),
    rgba(255,255,255,.05) !important;
  border-color:rgba(135,210,255,.72) !important;
}

.gachaBox.opened[data-tier*="reward-outfit"][data-tier*="outfit-epic"],
.gachaBox.opened.reward-outfit.outfit-epic{
  background:
    radial-gradient(circle at 50% 0%,rgba(220,120,255,.38),transparent 48%),
    linear-gradient(180deg,rgba(165,60,255,.28),rgba(55,16,90,.42)),
    rgba(255,255,255,.05) !important;
  border-color:rgba(210,125,255,.88) !important;
}

.gachaBox.opened[data-tier*="reward-outfit"][data-tier*="outfit-legend"],
.gachaBox.opened.reward-outfit.outfit-legend{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,230,130,.46),transparent 48%),
    linear-gradient(180deg,rgba(255,165,35,.32),rgba(96,44,6,.44)),
    rgba(255,255,255,.05) !important;
  border-color:rgba(255,230,130,1) !important;
}

.gachaBox.opened[data-tier*="reward-upgrade"],
.gachaBox.opened.reward-upgrade{
  background:
    radial-gradient(circle at 50% 0%,rgba(120,255,205,.26),transparent 50%),
    linear-gradient(180deg,rgba(35,255,175,.14),rgba(6,68,52,.40)),
    rgba(255,255,255,.04) !important;
  border-color:rgba(120,255,205,.52) !important;
  box-shadow:
    0 0 34px rgba(60,255,185,.22),
    inset 0 0 18px rgba(120,255,205,.08),
    0 18px 34px rgba(0,0,0,.34) !important;
}

/* ===== chausx-cloud-sync-style ===== */
#chausxCloudPanel{
    position:fixed;left:14px;bottom:14px;z-index:2147483000;
    display:flex;gap:8px;align-items:center;flex-wrap:wrap;
    max-width:min(460px,calc(100vw - 28px));padding:10px 12px;
    border:1px solid rgba(120,180,255,.35);border-radius:14px;
    background:rgba(8,10,18,.82);backdrop-filter:blur(10px);
    box-shadow:0 10px 28px rgba(0,0,0,.38), inset 0 0 18px rgba(80,140,255,.08);
    color:rgba(255,255,255,.86);font:800 11px/1.2 system-ui,-apple-system,Segoe UI,sans-serif;
  }
  #chausxCloudPanel button{
    border:1px solid rgba(160,205,255,.38);border-radius:999px;padding:7px 10px;
    background:linear-gradient(180deg,rgba(45,105,220,.88),rgba(24,58,145,.82));
    color:#fff;font:900 10px/1 system-ui;letter-spacing:.06em;cursor:pointer;
    text-transform:uppercase;
  }
  #chausxCloudPanel button:hover{filter:brightness(1.14)}
  #chausxCloudPanel .cloudDot{width:8px;height:8px;border-radius:50%;background:#888;box-shadow:0 0 10px currentColor;}
  #chausxCloudPanel.ok .cloudDot{background:#46ff9c;color:#46ff9c;}
  #chausxCloudPanel.warn .cloudDot{background:#ffd35e;color:#ffd35e;}
  #chausxCloudPanel.bad .cloudDot{background:#ff5d7e;color:#ff5d7e;}
  #chausxCloudStatus{min-width:155px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ===== chausxAuthGateStyle ===== */
html.chausx-auth-locked,
html.chausx-auth-locked body{
  overflow:hidden!important;
}
html.chausx-auth-locked body > *:not(#chausxAuthGate):not(#chausxRegisterDialog):not(#chausxAuthToast):not(script):not(style){
  filter:blur(10px) brightness(.35);
  pointer-events:none!important;
  user-select:none!important;
}
#chausxAuthGate{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,.32), transparent 32%),
    radial-gradient(circle at 80% 70%, rgba(219,39,119,.26), transparent 34%),
    linear-gradient(135deg, #060612 0%, #111018 45%, #050508 100%);
  color:#fff;
  font-family:Arial,sans-serif;
}
#chausxAuthGate.hidden{
  display:none!important;
}
.chausx-auth-card{
  width:min(440px, calc(100vw - 36px));
  border-radius:28px;
  padding:28px;
  background:rgba(13,13,24,.84);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  backdrop-filter:blur(18px);
}
.chausx-auth-logo{
  font-size:28px;
  font-weight:1000;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.chausx-auth-subtitle{
  font-size:13px;
  line-height:1.45;
  opacity:.78;
  margin-bottom:20px;
}
.chausx-auth-card label{
  display:block;
  margin:10px 0 5px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.82;
}
.chausx-auth-card input{
  width:100%;
  box-sizing:border-box;
  padding:12px 13px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
  font-size:14px;
}
.chausx-auth-card input::placeholder{
  color:rgba(255,255,255,.45);
}
.chausx-auth-row{
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin-top:14px;
}
.chausx-auth-btn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:12px 14px;
  cursor:pointer;
  color:#fff;
  font-weight:1000;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#7c3aed,#db2777);
  box-shadow:0 12px 30px rgba(219,39,119,.22);
}
.chausx-auth-btn.secondary{
  background:rgba(255,255,255,.12);
  box-shadow:none;
}
.chausx-auth-btn.patreon{
  background:linear-gradient(135deg,#ff424d,#ff7a00);
}
.chausx-auth-btn.logout{
  position:fixed;
  top:14px;
  right:14px;
  z-index:2147482500;
  width:auto;
  padding:9px 13px;
  font-size:11px;
  opacity:.88;
}
#chausxAuthStatus,
#chausxRegisterStatus{
  color:rgba(255,255,255,.96);
  margin-top:13px;
  min-height:16px;
  font-size:12px;
  line-height:1.38;
  opacity:.86;
}
#chausxRegisterDialog{
  position:fixed;
  inset:0;
  z-index:2147483200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-family:Arial,sans-serif;
}
#chausxRegisterDialog.show{
  display:flex!important;
  pointer-events:auto!important;
  filter:none!important;
}
#chausxRegisterDialog .chausx-auth-card{
  width:min(420px, calc(100vw - 36px));
}
.chausx-auth-small{
  margin-top:10px;
  font-size:11px;
  opacity:.62;
  line-height:1.35;
}

/* ===== chausxAuthToastRememberStyle ===== */
#chausxAuthToast{
  filter:none!important;
  backdrop-filter:none!important;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(.94);
  z-index:2147483600;
  min-width:320px;
  max-width:calc(100vw - 40px);
  padding:22px 26px;
  border-radius:24px;
  background:linear-gradient(135deg,rgba(185,28,28,.98),rgba(127,29,29,.98));
  color:white;
  font:1000 18px/1.35 Arial,sans-serif;
  text-align:center;
  box-shadow:0 28px 90px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.16) inset;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
#chausxAuthToast::before{
  content:"!";
  display:block;
  width:42px;
  height:42px;
  line-height:42px;
  margin:0 auto 12px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:28px;
}
#chausxAuthToast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
#chausxAuthToast.success{
  background:linear-gradient(135deg,rgba(22,101,52,.98),rgba(21,128,61,.98));
}
#chausxAuthToast.success::before{
  content:"✓";
}
.chausx-remember-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 2px;
  font-size:12px;
  opacity:.85;
  user-select:none;
}
.chausx-remember-row input{
  width:auto!important;
  margin:0!important;
  accent-color:#db2777;
}

/* ===== chausxPatreonAccessGateStyle ===== */
#chausxPatreonAccessGate{
  position:fixed;
  inset:0;
  z-index:2147482300;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,66,77,.22), transparent 34%),
    radial-gradient(circle at 80% 75%, rgba(255,122,0,.18), transparent 34%),
    rgba(4,4,10,.92);
  color:#fff;
  font-family:Arial,sans-serif;
  text-align:center;
}
html.chausx-patreon-locked:not(.chausx-auth-locked) #chausxPatreonAccessGate{
  display:none!important;
}
/* Free users can access the HUB. Individual cards/features are restricted by required_access_level. */
html.chausx-patreon-locked:not(.chausx-auth-locked) body > *{
  filter:none;
}
.chausx-patreon-lock-card{
  width:min(460px, calc(100vw - 36px));
  padding:28px;
  border-radius:28px;
  background:rgba(13,13,24,.88);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.62);
  backdrop-filter:blur(18px);
}
.chausx-patreon-lock-title{
  font-size:26px;
  font-weight:1000;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.chausx-patreon-lock-text{
  font-size:14px;
  line-height:1.45;
  opacity:.82;
  margin-bottom:18px;
}
#chausxPatreonLockConnectBtn{
  width:100%;
  border:0;
  border-radius:999px;
  padding:13px 16px;
  cursor:pointer;
  color:#fff;
  font-weight:1000;
  letter-spacing:.04em;
  background:linear-gradient(135deg,#ff424d,#ff7a00);
  box-shadow:0 12px 30px rgba(255,66,77,.25);
}
#chausxPatreonHubPanel{
  width:230px!important;
}
.chausx-patreon-info-line{
  margin-top:6px;
  font-size:8px;
  line-height:1.25;
  opacity:.86;
  text-align:left;
  word-break:break-word;
}
.chausx-patreon-info-label{
  opacity:.62;
  font-weight:900;
}

/* ===== chausxLockedCardBadgeStyle ===== */
[data-required-access-level]{
  position:relative;
}
[data-required-access-level].chausx-premium-locked::after{
  content:"PREMIUM";
  position:absolute;
  top:8px;
  right:8px;
  z-index:5;
  padding:4px 7px;
  border-radius:999px;
  background:linear-gradient(135deg,#ff424d,#ff7a00);
  color:white;
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:.05em;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

/* ===== chausxOriginalCodeModalFixStyle ===== */
#codeModal,
#bonusCodeModal,
.codeModal,
.bonusCodeModal{
  z-index:2147482000!important;
  pointer-events:auto!important;
}
#codeBtn,
#bonusCodeBtn,
button[id*="code" i],
button[class*="code" i]{
  pointer-events:auto!important;
}

/* ===== chausxCodeOverlayRestoreStyle ===== */
#codeOverlay.show,
.codeOverlay.show{
  display:grid!important;
  place-items:center!important;
  pointer-events:auto!important;
  opacity:1!important;
  visibility:visible!important;
}
#codeOverlay{
  z-index:2147482200!important;
}

/* ===== chausxMockupInspiredStyle ===== */
:root{
  --cx-purple:#8b35ff;
  --cx-pink:#ec2bd5;
  --cx-orange:#ff7a00;
  --cx-red:#ff3e4d;
  --cx-gold:#ffc04d;
}

/* Hide orphan SFX buttons if older patch left them in page flow */
body > .chausxSfxOptions,
body > .chausxSfxOption,
body > button.chausxSfxOption{
  display:none!important;
}

/* Top badges */
#chausxAccessBadge{
  top:32px!important;
  right:238px!important;
  bottom:auto!important;
  left:auto!important;
  height:38px!important;
  min-width:142px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,rgba(91,41,220,.98),rgba(67,26,150,.94))!important;
  border:1px solid rgba(191,122,255,.45)!important;
  color:#fff!important;
  font:1000 13px/1 Arial,sans-serif!important;
  letter-spacing:.04em!important;
  box-shadow:0 0 26px rgba(139,53,255,.35), inset 0 1px 0 rgba(255,255,255,.14)!important;
  opacity:1!important;
}
#chausxLogoutFloating{
  top:32px!important;
  right:18px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#7c3aed,#db2777)!important;
  box-shadow:0 0 26px rgba(219,39,119,.38)!important;
  font-size:12px!important;
}

/* Patreon */
#chausxPatreonHubPanel{
  position:fixed;
  right:172px;
  top:32px;
  z-index:2147482400;
  display:none;
  width:300px;
  padding:18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%,rgba(139,53,255,.22),transparent 42%),
    linear-gradient(180deg,rgba(18,14,30,.96),rgba(6,6,12,.92));
  border:1px solid rgba(206,137,255,.34);
  color:#fff;
  font-family:Arial,sans-serif;
  box-shadow:0 24px 72px rgba(0,0,0,.55),0 0 38px rgba(139,53,255,.18);
  backdrop-filter:blur(16px);
  transition:width .22s ease,height .22s ease,padding .22s ease,border-radius .22s ease,top .22s ease,right .22s ease;
}
html:not(.chausx-auth-locked) #chausxPatreonHubPanel{display:block;}
.patreonPanelHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.patreonPanelTitle{font-size:18px;font-weight:1000;letter-spacing:.08em;text-shadow:0 0 18px rgba(255,255,255,.22);}
.patreonPanelStatus{margin-top:5px;font-size:11px;line-height:1.2;opacity:.72;text-align:left;}
#chausxPatreonPanelToggle{
  flex:0 0 auto;width:30px;height:30px;border:1px solid rgba(255,210,120,.36);
  border-radius:999px;cursor:pointer;color:#ffd36c;background:rgba(0,0,0,.28);
  font:1000 18px/28px Arial,sans-serif;padding:0;box-shadow:0 0 18px rgba(255,190,70,.18);
}
.patreonPanelBody{display:grid;gap:10px;}
.patreonInfoRow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;
  border-radius:14px;background:rgba(255,255,255,.055);font-size:12px;line-height:1.2;
}
.patreonInfoRow span{opacity:.68;font-weight:1000;text-transform:uppercase;}
.patreonInfoRow strong{font-size:12px;max-width:178px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;}
#chausxPatreonHubBtn{
  width:100%;border:0;border-radius:999px;padding:12px 12px;cursor:pointer;color:#fff;
  font-weight:1000;font-size:12px;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--cx-red),var(--cx-orange));
  box-shadow:0 12px 30px rgba(255,66,77,.25);text-align:center;
}
#chausxPatreonHubPanel.connected #chausxPatreonHubBtn{background:linear-gradient(135deg,#e11d48,#ff7a00);}
#chausxPatreonHubPanel.collapsed{
  right:170px!important;top:34px!important;width:38px!important;height:38px!important;padding:0!important;
  overflow:hidden!important;border-radius:999px!important;background:linear-gradient(135deg,#ff3e4d,#ff7a00)!important;
  box-shadow:0 0 28px rgba(255,90,40,.55)!important;
}
#chausxPatreonHubPanel.collapsed .patreonPanelBody,
#chausxPatreonHubPanel.collapsed .patreonPanelTitle,
#chausxPatreonHubPanel.collapsed .patreonPanelStatus{display:none!important;}
#chausxPatreonHubPanel.collapsed .patreonPanelHeader{
  display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;
}
#chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
  width:38px!important;height:38px!important;border:0!important;margin:0!important;padding:0!important;border-radius:999px!important;
  background:transparent!important;color:white!important;font:1000 16px/38px Arial,sans-serif!important;box-shadow:none!important;
}

/* Audio icons same size */
#ambientToggle,#sfxToggle{
  width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;
  font-size:18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;
}

/* Shared Music/SFX premium panels */
.chausxAudioPanel{
  position:fixed;
  right:14px;
  bottom:64px;
  z-index:2147482600;
  display:none;
  width:300px;
  padding:18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,168,40,.18),transparent 46%),
    linear-gradient(180deg,rgba(18,14,22,.96),rgba(6,6,12,.92));
  border:1px solid rgba(255,190,70,.52);
  color:white;
  font-family:Arial,sans-serif;
  box-shadow:0 24px 72px rgba(0,0,0,.55),0 0 34px rgba(255,160,40,.2);
  backdrop-filter:blur(16px);
}
.chausxAudioPanel.show{display:block;}
.chausxAudioPanelTitle{
  font-size:18px;font-weight:1000;letter-spacing:.08em;text-align:center;margin-bottom:14px;
  text-shadow:0 0 18px rgba(255,205,90,.25);
}
.chausxAudioGaugeRow{
  display:grid;grid-template-columns:26px 1fr 42px;align-items:center;gap:10px;margin-bottom:14px;
}
.chausxAudioSpeaker{font-size:20px;color:#ffd36c;text-shadow:0 0 16px rgba(255,190,70,.45);}
.chausxAudioGauge{
  height:10px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
}
.chausxAudioGaugeFill{
  height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#ff9b2f,#ffd35c,#ff7a00);
  transition:width .12s ease;box-shadow:0 0 18px rgba(255,170,40,.45);
}
.chausxAudioPercent{font:1000 12px/1 Arial,sans-serif;text-align:right;}
.chausxAudioOptions{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;}
.chausxAudioOption{
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px 6px;min-height:52px;cursor:pointer;color:white;
  font:1000 10px/1.1 Arial,sans-serif;background:rgba(255,255,255,.075);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;
}
.chausxAudioOption::before{content:attr(data-icon);font-size:17px;line-height:1;}
.chausxAudioOption.active{
  background:linear-gradient(135deg,#ff9b2f,#ff7a00);border-color:rgba(255,220,140,.72);
  box-shadow:0 10px 26px rgba(255,150,40,.25), inset 0 1px 0 rgba(255,255,255,.18);
}
#sfxToggle[data-level="0"]{opacity:.45!important;filter:grayscale(1)!important;}
#sfxToggle[data-level="1"]{opacity:.72!important;}
#sfxToggle[data-level="2"]{opacity:.9!important;}
#sfxToggle[data-level="3"]{opacity:1!important;filter:brightness(1.12) saturate(1.2)!important;}

@media(max-width:720px){
  #chausxAccessBadge{top:72px!important;right:12px!important;}
  #chausxPatreonHubPanel.collapsed{right:104px!important;top:34px!important;}
}

/* ===== chausxQuickRewardHideStyle ===== */
html.chausx-quick-reward-open .gachaFullReveal,
html.chausx-quick-reward-open #gachaFullReveal,
html.chausx-quick-reward-open .fullReveal{
  display:none!important;
  opacity:0;
  pointer-events:none!important;
}

/* ===== chausxQuickRewardHideStyle2 ===== */
html.chausx-quick-reward-open .gachaFullReveal,
html.chausx-quick-reward-open #gachaFullReveal,
html.chausx-quick-reward-open .fullReveal{
  display:none!important;
  opacity:0;
  pointer-events:none!important;
}

/* ===== chausxPatreonLoaderStyle ===== */
#chausxPatreonLoader{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,.28), transparent 36%),
    radial-gradient(circle at 80% 75%, rgba(219,39,119,.22), transparent 34%),
    linear-gradient(135deg,#050510 0%,#111018 50%,#050508 100%);
  color:white;
  font-family:Arial,sans-serif;
}
#chausxPatreonLoader.show{
  display:flex;
}
.chausxPatreonLoaderSpinner{
  width:66px;
  height:66px;
  border-radius:999px;
  border:5px solid rgba(255,255,255,.15);
  border-top-color:#fff;
  animation:chausxBootSpin .9s linear infinite;
}
.chausxPatreonLoaderTitle{
  font-size:14px;
  font-weight:1000;
  letter-spacing:.12em;
}
.chausxPatreonLoaderSub{
  font-size:11px;
  opacity:.58;
  font-weight:800;
  letter-spacing:.08em;
}

/* ===== chausxNativeOpenAllClaimStyle ===== */
#dailyBoxClose.openAllMode{
  opacity:1!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  background:linear-gradient(135deg,rgba(255,120,40,.96),rgba(255,185,55,.9))!important;
  border-color:rgba(255,235,180,.72)!important;
  color:white!important;
  box-shadow:0 0 26px rgba(255,150,40,.42), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#dailyBoxClose.claimMode{
  opacity:1!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  background:linear-gradient(135deg,rgba(255,140,40,.95),rgba(180,95,35,.9))!important;
  border-color:rgba(255,220,160,.7)!important;
  color:white!important;
}
#dailyBoxClose:disabled{
  opacity:1!important;
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* ===== chausxQuickRewardHideStyleFinal ===== */
html.chausx-quick-reward-open .gachaFullReveal,
html.chausx-quick-reward-open #gachaFullReveal,
html.chausx-quick-reward-open .fullReveal,
html.chausx-quick-reward-open .gachaFullRevealOverlay{
  display:none!important;
  opacity:0;
  pointer-events:none!important;
}

/* ===== chausxOpenAllHoverFix ===== */
#dailyBoxClose.openAllMode{
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease!important;
}
#dailyBoxClose.openAllMode:hover{
  transform:translateY(-2px) scale(1.035)!important;
  filter:brightness(1.16)!important;
  box-shadow:
    0 0 34px rgba(255,170,55,.62),
    0 12px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
}
#dailyBoxClose.openAllMode:active{
  transform:translateY(0) scale(.98)!important;
}

/* ===== chausxPatreonRequiredGateStyle ===== */
#chausxPatreonRequiredGate{
  position:fixed!important;
  inset:0!important;
  z-index:2147483600!important;
  display:none!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
  background:
    radial-gradient(circle at 22% 18%, rgba(124,58,237,.28), transparent 34%),
    radial-gradient(circle at 78% 76%, rgba(255,122,0,.22), transparent 34%),
    rgba(4,4,10,.94)!important;
  color:#fff!important;
  font-family:Arial,sans-serif!important;
  text-align:center!important;
  filter:none!important;
  pointer-events:auto!important;
  user-select:auto!important;
}
html.chausx-patreon-required:not(.chausx-auth-locked) #chausxPatreonRequiredGate{
  display:flex!important;
}
html.chausx-patreon-required:not(.chausx-auth-locked) body > *:not(#chausxPatreonRequiredGate):not(#chausxAuthToast):not(#chausxPatreonLoader):not(script):not(style){
  filter:blur(9px) brightness(.32)!important;
  pointer-events:none!important;
  user-select:none!important;
}
#chausxPatreonRequiredGate,
#chausxPatreonRequiredGate *{
  filter:none!important;
  pointer-events:auto!important;
  user-select:auto!important;
}
.chausxPatreonRequiredCard{
  position:relative!important;
  z-index:2147483601!important;
  width:min(480px, calc(100vw - 36px))!important;
  padding:32px!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,122,0,.20), transparent 48%),
    rgba(13,13,24,.96)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.72),0 0 44px rgba(255,120,40,.16)!important;
  backdrop-filter:blur(18px)!important;
}
.chausxPatreonRequiredTitle{
  font-size:28px!important;
  font-weight:1000!important;
  letter-spacing:.08em!important;
  margin-bottom:10px!important;
}
.chausxPatreonRequiredText{
  font-size:14px!important;
  line-height:1.45!important;
  opacity:.84!important;
  margin-bottom:20px!important;
}
#chausxPatreonRequiredConnectBtn{
  width:100%!important;
  border:0!important;
  border-radius:999px!important;
  padding:13px 16px!important;
  cursor:pointer!important;
  color:#fff!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
  background:linear-gradient(135deg,#ff424d,#ff7a00)!important;
  box-shadow:0 12px 30px rgba(255,66,77,.25)!important;
}
#chausxPatreonRequiredConnectBtn:hover{
  filter:brightness(1.12)!important;
  transform:translateY(-1px)!important;
}

/* ===== chausxCheckingLoaderStyle ===== */
html.chausx-checking-account #chausxAuthGate,
html.chausx-checking-account #chausxPatreonRequiredGate,
html.chausx-checking-account #chausxPatreonHubPanel,
html.chausx-checking-account #chausxLogoutFloating,
html.chausx-checking-account #chausxAccessBadge{
  visibility:hidden!important;
}
#chausxCheckingLoader{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
  background:
    radial-gradient(circle at 20% 20%, rgba(124,58,237,.30), transparent 35%),
    radial-gradient(circle at 80% 75%, rgba(219,39,119,.22), transparent 34%),
    linear-gradient(135deg,#050510 0%,#111018 50%,#050508 100%);
  color:white;
  font-family:Arial,sans-serif;
  text-align:center;
}
html.chausx-checking-account #chausxCheckingLoader{
  display:flex!important;
}
#chausxCheckingSpinner{
  width:66px;
  height:66px;
  border-radius:999px;
  border:5px solid rgba(255,255,255,.15);
  border-top-color:#fff;
  animation:chausxCheckingSpin .9s linear infinite;
}
#chausxCheckingText{
  font-size:14px;
  font-weight:1000;
  letter-spacing:.12em;
  opacity:.92;
}
#chausxCheckingSubText{
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  opacity:.56;
}
@keyframes chausxCheckingSpin{
  to{transform:rotate(360deg);}
}

/* ===== chausxTopRightIntegratedLayout ===== */
#chausxAccessBadge{
  position:fixed!important;
  top:24px!important;
  right:232px!important;
  height:40px!important;
  min-width:156px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:999px!important;
  font-size:13px!important;
  line-height:1!important;
  z-index:2147482402!important;
}
#chausxPatreonHubPanel.collapsed{
  position:fixed!important;
  top:24px!important;
  right:174px!important;
  width:40px!important;
  height:40px!important;
  padding:0!important;
  border-radius:999px!important;
  z-index:2147482403!important;
}
#chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
  width:40px!important;
  height:40px!important;
  line-height:40px!important;
  font-size:15px!important;
}
#chausxLogoutFloating{
  position:fixed!important;
  top:24px!important;
  right:24px!important;
  height:40px!important;
  min-width:128px!important;
  padding:0 22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:999px!important;
  line-height:1!important;
  z-index:2147482402!important;
}
#chausxPatreonHubPanel:not(.collapsed){
  position:fixed!important;
  top:78px!important;
  right:24px!important;
  width:320px!important;
  padding:18px!important;
  border-radius:24px!important;
  z-index:2147482401!important;
}
#chausxPatreonHubPanel:not(.collapsed)::before{
  content:"";
  position:absolute;
  top:-10px;
  right:164px;
  width:18px;
  height:18px;
  transform:rotate(45deg);
  background:rgba(18,14,30,.96);
  border-left:1px solid rgba(206,137,255,.34);
  border-top:1px solid rgba(206,137,255,.34);
}
#chausxAccessBadge,
#chausxLogoutFloating,
#chausxPatreonPanelToggle,
#chausxPatreonHubBtn{
  text-align:center!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:760px){
  #chausxAccessBadge{top:18px!important;right:176px!important;min-width:118px!important;height:36px!important;font-size:11px!important;padding:0 12px!important;}
  #chausxPatreonHubPanel.collapsed{top:18px!important;right:126px!important;width:36px!important;height:36px!important;}
  #chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{width:36px!important;height:36px!important;line-height:36px!important;}
  #chausxLogoutFloating{top:18px!important;right:12px!important;height:36px!important;min-width:98px!important;padding:0 14px!important;font-size:11px!important;}
  #chausxPatreonHubPanel:not(.collapsed){top:66px!important;right:12px!important;width:min(320px, calc(100vw - 24px))!important;}
}

/* ===== chausxEmptyCompactWeeklyBlockFix ===== */
.compactTopBar .weeklyBlock.chausx-empty-weekly-block{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ===== chausxFullWidthResponsiveLayout ===== */
/* Full width HUB layout */
html, body{
  width:100%!important;
  max-width:none!important;
  overflow-x:hidden!important;
}

.app,
.inner{
  width:100%!important;
  max-width:none!important;
}

.inner{
  padding-left:clamp(14px, 3vw, 56px)!important;
  padding-right:clamp(14px, 3vw, 56px)!important;
  box-sizing:border-box!important;
}

/* Use the whole available width */
.collection,
.collectionShell,
.collectionContent,
.seriesCollection,
#content{
  width:100%!important;
  max-width:none!important;
}

/* Top collection header adapts */
.collectionTop,
.collectionControls,
.collectionToolbar{
  width:100%!important;
  max-width:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}

/* Series grid: no fixed 2 columns */
.seriesGrid,
.seriesCollection,
#seriesGrid{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit, minmax(min(440px, 100%), 1fr))!important;
  gap:clamp(12px, 1.4vw, 24px)!important;
}

.seriesCard,
.seriesTile,
.seriesItem{
  width:100%!important;
  max-width:none!important;
}

/* Character cards also adapt */
.grid{
  width:100%!important;
  max-width:none!important;
  grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr))!important;
  gap:clamp(14px, 1.3vw, 24px)!important;
}

/* Make large series banners scale nicely */
.seriesCard,
.seriesTile,
.seriesItem,
.seriesBanner{
  min-height:clamp(126px, 9.8vw, 190px)!important;
  border-radius:clamp(16px, 1.5vw, 28px)!important;
}

/* Top right account controls as a responsive group */
#chausxAccessBadge{
  right:clamp(174px, 11vw, 232px)!important;
}
#chausxPatreonHubPanel.collapsed{
  right:clamp(124px, 8vw, 174px)!important;
}
#chausxLogoutFloating{
  right:clamp(12px, 1.5vw, 24px)!important;
}

/* Main top controls: bonus/filter row can use width */
.compactTopBar{
  width:100%!important;
  max-width:none!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  gap:clamp(10px, 1.2vw, 20px)!important;
  padding-left:clamp(14px, 3vw, 56px)!important;
  padding-right:clamp(14px, 3vw, 56px)!important;
  box-sizing:border-box!important;
}

#openCodeBtnCompact,
#dailyBoxBtn,
#dailyBoxBtnCompact,
#weeklyClaimBtnCompact{
  white-space:nowrap!important;
}

/* Filter row */
.collectionFilters,
.seriesFilters,
.filters,
.sortRow{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}

/* Audio buttons stay accessible */
.audioControls,
.soundControls{
  right:clamp(10px, 1.2vw, 18px)!important;
}

/* Wide screens: cards breathe more */
@media (min-width:1600px){
  .inner{
    padding-left:7vw!important;
    padding-right:7vw!important;
  }

  .seriesGrid,
  .seriesCollection,
  #seriesGrid{
    grid-template-columns:repeat(auto-fit, minmax(520px, 1fr))!important;
  }
}

/* Medium screens */
@media (max-width:1100px){
  .inner{
    padding-top:88px!important;
  }

  .compactTopBar{
    grid-template-columns:1fr!important;
    justify-items:center!important;
    text-align:center!important;
  }

  .collectionTop,
  .collectionControls,
  .collectionToolbar{
    justify-content:center!important;
  }

  .collectionFilters,
  .seriesFilters,
  .filters,
  .sortRow{
    justify-content:center!important;
  }

  .seriesGrid,
  .seriesCollection,
  #seriesGrid{
    grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr))!important;
  }
}

/* Mobile layout */
@media (max-width:720px){
  body{
    overflow-x:hidden!important;
  }

  .inner{
    padding-left:12px!important;
    padding-right:12px!important;
    padding-top:112px!important;
  }

  h1,
  .title h1{
    font-size:clamp(28px, 9vw, 40px)!important;
    text-align:center!important;
  }

  .collectionTitle,
  .collection h2,
  .seriesCollectionTitle{
    text-align:center!important;
    width:100%!important;
  }

  .seriesGrid,
  .seriesCollection,
  #seriesGrid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  .seriesCard,
  .seriesTile,
  .seriesItem,
  .seriesBanner{
    min-height:118px!important;
  }

  .grid{
    grid-template-columns:1fr!important;
  }

  #chausxAccessBadge{
    top:12px!important;
    left:12px!important;
    right:auto!important;
    min-width:0!important;
    width:calc(100vw - 152px)!important;
    max-width:220px!important;
    height:36px!important;
    font-size:11px!important;
    padding:0 10px!important;
  }

  #chausxPatreonHubPanel.collapsed{
    top:12px!important;
    right:70px!important;
    width:36px!important;
    height:36px!important;
  }

  #chausxLogoutFloating{
    top:12px!important;
    right:12px!important;
    min-width:0!important;
    width:50px!important;
    height:36px!important;
    padding:0!important;
    font-size:0!important;
  }

  #chausxLogoutFloating::after{
    content:"⎋";
    font-size:16px!important;
    line-height:1!important;
  }

  #chausxPatreonHubPanel:not(.collapsed){
    top:58px!important;
    right:12px!important;
    left:12px!important;
    width:auto!important;
  }

  #chausxPatreonHubPanel:not(.collapsed)::before{
    right:66px!important;
  }

  .compactTopBar{
    padding-left:12px!important;
    padding-right:12px!important;
    gap:10px!important;
  }

  #openCodeBtnCompact,
  #dailyBoxBtn,
  #dailyBoxBtnCompact,
  #weeklyClaimBtnCompact,
  .collectionFilters button,
  .collectionFilters select,
  .filters button,
  .filters select,
  .sortRow button,
  .sortRow select{
    width:100%!important;
    max-width:360px!important;
  }

  .dailyBoxModal{
    width:calc(100vw - 24px)!important;
    padding:22px 12px!important;
    border-radius:24px!important;
  }

  .dailyRewards{
    grid-template-columns:1fr!important;
  }

  .gachaBox{
    min-height:128px!important;
  }
}

/* Very small phones */
@media (max-width:420px){
  .inner{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #chausxAccessBadge{
    width:calc(100vw - 128px)!important;
    font-size:10px!important;
  }

  .seriesCard,
  .seriesTile,
  .seriesItem,
  .seriesBanner{
    min-height:104px!important;
  }

  .seriesName,
  .seriesCount{
    font-size:12px!important;
  }
}

/* ===== chausxPatreonTierButtonAndBonusRow ===== */
#chausxAccessBadge{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* Patreon collapsed pill */
#chausxPatreonHubPanel.collapsed{
  width:auto!important;
  min-width:188px!important;
  height:40px!important;
  right:168px!important;
  top:24px!important;
  padding:0!important;
  border-radius:999px!important;
}
#chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
  width:100%!important;
  min-width:188px!important;
  height:40px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  font-size:12px!important;
  letter-spacing:.03em!important;
  white-space:nowrap!important;
  text-align:center!important;
}
#chausxPatreonHubPanel.collapsed .chausxPatreonGlyph{
  font-size:12px!important;
  transform:none!important;
  width:auto!important;
}

/* Hide the old top-left gold container completely */
.header .pointsPanel,
.header .weeklyBlock{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* The active row containing BONUS CODE + box button */
.chausxBoxActionRow{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  width:100%!important;
  margin:0 auto!important;
}

/* BONUS CODE must be text only */
#openCodeBtn,
#openCodeBtnCompact,
.chausxBonusCodeTextOnly{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  color:#c8a56f!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  text-decoration:underline!important;
  text-underline-offset:5px!important;
  cursor:pointer!important;
  opacity:.92!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}

#openCodeBtn:hover,
#openCodeBtnCompact:hover,
.chausxBonusCodeTextOnly:hover{
  color:#f3cf97!important;
  opacity:1!important;
  text-shadow:0 0 10px rgba(255,196,110,.24)!important;
}

/* Keep the box button normal */
#dailyBoxBtn,
#dailyBoxBtnCompact,
.dailyBoxBtn{
  flex:0 0 auto!important;
}

/* Mobile */
@media(max-width:720px){
  #chausxPatreonHubPanel.collapsed{
    top:12px!important;
    left:12px!important;
    right:auto!important;
    width:calc(100vw - 76px)!important;
    min-width:0!important;
    max-width:300px!important;
    height:36px!important;
  }

  #chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
    min-width:0!important;
    width:100%!important;
    height:36px!important;
    padding:0 12px!important;
    font-size:11px!important;
  }

  #chausxLogoutFloating{
    top:12px!important;
    right:12px!important;
    width:50px!important;
    min-width:50px!important;
    height:36px!important;
  }

  .chausxBoxActionRow{
    flex-wrap:wrap!important;
    gap:10px!important;
  }
}

/* ===== chxRewardsToolbarVisibilityFix ===== */
/* Never hide the actual reward controls after they are moved */
.chxToolbarRight .chausxBoxActionRow,
.chxToolbarRight #openCodeBtn,
.chxToolbarRight #openCodeBtnCompact,
.chxToolbarRight #dailyBoxBtn,
.chxToolbarRight #dailyBoxBtnCompact,
.chxToolbarRight .dailyBoxBtn{
  display:inline-flex!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* The old collection header label is hidden, but the button can be moved by JS */
.collectionHeader{
  display:block!important;
}

.collectionHeader h2{
  display:none!important;
}

/* Once the daily button has been moved, the old header should not occupy space */
.collectionHeader:has(.dailyBoxBtn:not(:only-child)){
  min-height:0!important;
}

/* Final right-side reward row */
.chxToolbarRight{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  margin-left:auto!important;
}

.chxToolbarRight .chausxBoxActionRow{
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Bonus code text only */
.chxToolbarRight #openCodeBtn,
.chxToolbarRight #openCodeBtnCompact,
.chxToolbarRight .chausxBonusCodeTextOnly{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  margin:0!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  color:#d6aa67!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  text-decoration:underline!important;
  text-underline-offset:5px!important;
  cursor:pointer!important;
  opacity:.95!important;
  white-space:nowrap!important;
}

/* Daily/claim box button */
.chxToolbarRight #dailyBoxBtn,
.chxToolbarRight #dailyBoxBtnCompact,
.chxToolbarRight .dailyBoxBtn{
  height:48px!important;
  width:auto!important;
  min-width:245px!important;
  max-width:none!important;
  border-radius:999px!important;
  padding:0 24px!important;
}

/* Hide empty old compact top bar only when it has no moved controls left */
.compactTopBar:empty{
  display:none!important;
}

@media(max-width:720px){
  .chxToolbarRight,
  .chxToolbarRight .chausxBoxActionRow{
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .chxToolbarRight #dailyBoxBtn,
  .chxToolbarRight #dailyBoxBtnCompact,
  .chxToolbarRight .dailyBoxBtn{
    width:100%!important;
    min-width:0!important;
  }

  .chxToolbarRight #openCodeBtn,
  .chxToolbarRight #openCodeBtnCompact,
  .chxToolbarRight .chausxBonusCodeTextOnly{
    justify-content:center!important;
    text-align:center!important;
  }
}


/* ===== chxStep1Step2StableComponentLayout ===== */
/* Step 1: stable native header. Step 2: component-driven toolbar. */
.inner{
  padding-top:58px!important;
}

/* Remove old labels/titles */
.collectionHeader,
.collectionHeader h2,
.collectionTop h2,
.title,
.title h1,
.title p,
.collectionTitle,
.seriesCollectionTitle,
#collectionTitle,
#content > h1,
#content > h2,
.inner > h1,
.inner > h2{
  display:none!important;
}

/* Keep the actual component toolbar visible */
.collectionTop.chxToolbarTop{
  display:flex!important;
  width:100%!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 12px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Account buttons */
#chausxPatreonHubPanel.collapsed{
  top:14px!important;
  min-width:240px!important;
  width:auto!important;
}

#chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
  min-width:240px!important;
  width:auto!important;
  padding:0 22px!important;
  white-space:nowrap!important;
}

#chausxLogoutFloating{
  top:14px!important;
}

/* Toolbar layout */
.chxToolbarLeft,
.chxToolbarRight{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  flex-wrap:wrap!important;
}

.chxToolbarLeft{
  justify-content:flex-start!important;
}

.chxToolbarRight{
  justify-content:flex-end!important;
  margin-left:auto!important;
}

.seriesControls{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:0!important;
  padding:0!important;
}

.seriesSelect,
#seriesSortSelect{
  height:46px!important;
  border-radius:999px!important;
  background:#050505!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#fff!important;
  font-weight:900!important;
  padding:0 18px!important;
  box-shadow:none!important;
}

.seriesCheck{
  height:46px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:#050505!important;
  border:1px solid rgba(255,255,255,.14)!important;
  color:#fff!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

.chxToolbarRewardsRow{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:14px!important;
  margin:0!important;
  padding:0!important;
}

.chxToolbarBonusCode{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  margin:0!important;
  color:#d6aa67!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
  text-decoration:underline!important;
  text-underline-offset:5px!important;
  cursor:pointer!important;
  opacity:.95!important;
  white-space:nowrap!important;
}

.chxToolbarBonusCode:hover{
  color:#ffd79a!important;
  text-shadow:0 0 12px rgba(255,196,110,.30)!important;
}

.chxToolbarDailyBox{
  height:46px!important;
  min-width:245px!important;
  padding:0 24px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,220,160,.34)!important;
  background:linear-gradient(90deg,#5b3920,#8d633a)!important;
  color:#d7c4aa!important;
  font-weight:1000!important;
  box-shadow:0 0 20px rgba(255,170,60,.12)!important;
  cursor:pointer!important;
}

.chxToolbarDailyBox.is-disabled,
.chxToolbarDailyBox:disabled{
  opacity:.72!important;
  cursor:not-allowed!important;
}

/* Old reward controls stay available for proxy clicks but invisible */
.compactTopBar,
.pointsPanel,
.header .weeklyBlock{
  position:absolute!important;
  left:-99999px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0;
  pointer-events:none!important;
}

.seriesGrid{
  margin-top:0!important;
  padding-top:0!important;
}

/* Responsive */
@media(max-width:900px){
  .inner{
    padding-top:54px!important;
  }

  .collectionTop.chxToolbarTop{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }

  .chxToolbarLeft,
  .chxToolbarRight{
    width:100%!important;
    justify-content:center!important;
    margin-left:0!important;
  }
}

@media(max-width:720px){
  .inner{
    padding-top:64px!important;
  }

  .seriesControls,
  .chxToolbarRewardsRow{
    width:100%!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }

  .seriesSelect,
  #seriesSortSelect,
  .seriesCheck,
  .chxToolbarDailyBox{
    width:100%!important;
    min-width:0!important;
  }

  .chxToolbarBonusCode{
    text-align:center!important;
  }
}


/* ===== Supabase series status support ===== */
.seriesCard.comingSoonSeries{
  opacity:.82;
}

.seriesCard.comingSoonSeries::before{
  content:"COMING SOON";
  position:absolute;
  top:14px;
  right:14px;
  z-index:4;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.68);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.08em;
  backdrop-filter:blur(10px);
}


/* ===== Supabase characters support ===== */
.card .type{
  text-transform:uppercase;
  letter-spacing:.05em;
}


/* ===== Character profile viewer back button refinement ===== */
.viewer .backBtn{
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  border-radius:999px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:24px!important;
  line-height:1!important;
  z-index:2147482500!important;
}


/* ===== Character profile final viewer back button ===== */
.viewer .backBtn{
  width:46px!important;
  min-width:46px!important;
  height:46px!important;
  border-radius:999px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:24px!important;
  line-height:1!important;
  z-index:2147482500!important;
}


/* ===== Viewer back flow refinement ===== */
.viewer .backBtn.toCharacterProfile{
  width:auto!important;
  min-width:46px!important;
  max-width:min(280px,42vw)!important;
  padding:0 18px!important;
  font-size:15px!important;
  font-weight:1000!important;
  gap:8px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* ===== FINAL OVERRIDE: viewer back button must be small, not "BACK TO HUB" ===== */
.viewer > #backBtn.backBtn,
body .viewer > #backBtn.backBtn{
  position:fixed!important;
  top:18px!important;
  left:18px!important;
  right:auto!important;
  bottom:auto!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid rgba(240,190,112,.72)!important;
  background:rgba(0,0,0,.60)!important;
  color:#fff!important;
  font-size:24px!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  line-height:1!important;
  text-indent:0!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  box-shadow:0 0 18px rgba(240,190,112,.24)!important;
  backdrop-filter:blur(10px)!important;
  z-index:2147483647!important;
}

.viewer > #backBtn.backBtn.toCharacterProfile,
body .viewer > #backBtn.backBtn.toCharacterProfile{
  width:auto!important;
  min-width:46px!important;
  max-width:min(280px,42vw)!important;
  padding:0 16px!important;
  font-size:15px!important;
}

@media(max-width:640px){
  .viewer > #backBtn.backBtn,
  body .viewer > #backBtn.backBtn{
    top:10px!important;
    left:10px!important;
    width:42px!important;
    min-width:42px!important;
    max-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    font-size:22px!important;
  }
}


/* ===== FINAL OVERRIDE: viewer nav two buttons ===== */
.viewerNav{
  position:fixed!important;
  top:18px!important;
  left:18px!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  pointer-events:auto!important;
}

.viewerNav .viewerNavBtn,
.viewer > #backBtn.backBtn,
body .viewer > #backBtn.backBtn{
  position:static!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  min-width:46px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  border:1px solid rgba(240,190,112,.72)!important;
  background:rgba(0,0,0,.60)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:0 0 18px rgba(240,190,112,.24)!important;
  backdrop-filter:blur(10px)!important;
}

.viewerNav #backBtn{
  width:auto!important;
  max-width:min(320px,42vw)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.viewerNav #hubBackBtn{
  width:auto!important;
  min-width:46px!important;
}

@media(max-width:640px){
  .viewerNav{
    top:10px!important;
    left:10px!important;
    gap:8px!important;
  }

  .viewerNav .viewerNavBtn{
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
    min-width:42px!important;
    padding:0 12px!important;
    font-size:13px!important;
  }
}


/* ===== FINAL FIX: viewer navigation top right ===== */
.viewerNav{
  position:fixed!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  z-index:2147483647!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  pointer-events:auto!important;
}

.viewerNav .viewerNavBtn{
  position:static!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  align-items:center!important;
  justify-content:center!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  min-width:40px!important;
  max-width:min(280px,44vw)!important;
  padding:0 14px!important;
  border-radius:999px!important;
  border:1px solid rgba(240,190,112,.72)!important;
  background:rgba(0,0,0,.62)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:0!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  box-shadow:0 0 18px rgba(240,190,112,.20)!important;
  backdrop-filter:blur(10px)!important;
}

.viewerNav #hubBackBtn{
  text-transform:uppercase!important;
}

@media(max-width:640px){
  .viewerNav{
    top:10px!important;
    right:10px!important;
    gap:6px!important;
  }

  .viewerNav .viewerNavBtn{
    height:36px!important;
    min-height:36px!important;
    max-height:36px!important;
    min-width:36px!important;
    padding:0 10px!important;
    font-size:12px!important;
  }
}

/* ===== FINAL FIX: compact Patreon / Logout aligned to right edge ===== */
#chausxLogoutFloating{
  top:12px!important;
  right:14px!important;
  height:34px!important;
  min-height:34px!important;
  min-width:92px!important;
  padding:0 14px!important;
  font-size:11px!important;
  border-radius:999px!important;
  z-index:2147482402!important;
}

#chausxPatreonHubPanel.collapsed{
  top:12px!important;
  right:116px!important;
  width:auto!important;
  min-width:178px!important;
  max-width:210px!important;
  height:34px!important;
  padding:0!important;
  border-radius:999px!important;
  z-index:2147482403!important;
}

#chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
  height:34px!important;
  min-height:34px!important;
  min-width:178px!important;
  max-width:210px!important;
  padding:0 14px!important;
  font-size:11px!important;
  line-height:34px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border-radius:999px!important;
}

@media(max-width:680px){
  #chausxPatreonHubPanel.collapsed{
    right:94px!important;
    min-width:142px!important;
    max-width:155px!important;
  }

  #chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
    min-width:142px!important;
    max-width:155px!important;
    font-size:10px!important;
    padding:0 10px!important;
  }

  #chausxLogoutFloating{
    min-width:74px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }
}


/* ===== FINAL UI SIZE: compact Patreon/Logout, aligned with audio edge ===== */
#chausxLogoutFloating{
  top:10px!important;
  right:10px!important;
  height:30px!important;
  min-height:30px!important;
  min-width:72px!important;
  padding:0 10px!important;
  font-size:10px!important;
  line-height:1!important;
  border-radius:999px!important;
}

#chausxPatreonHubPanel.collapsed{
  top:10px!important;
  right:90px!important;
  height:30px!important;
  min-height:30px!important;
  width:auto!important;
  min-width:142px!important;
  max-width:172px!important;
  padding:0!important;
  border-radius:999px!important;
}

#chausxPatreonHubPanel.collapsed #chausxPatreonPanelToggle{
  height:30px!important;
  min-height:30px!important;
  min-width:142px!important;
  max-width:172px!important;
  padding:0 10px!important;
  font-size:10px!important;
  line-height:30px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border-radius:999px!important;
}

/* Profile iframe has its own nav inside the visual frame */
.viewer.isCharacterProfileViewer .viewerNav{
  display:none!important;
}

.viewerNav{
  top:14px!important;
  right:14px!important;
  left:auto!important;
}

.viewerNav .viewerNavBtn{
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  min-width:38px!important;
  padding:0 12px!important;
  font-size:12px!important;
}


/* ChausX true fix: hide parent viewer nav/title because card/profile already renders its own nav */
.viewer.show .viewerNav,
.viewer.show #viewerNav,
.viewer.show .viewerTitle,
.viewer.show #viewerTitle{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}


/* ChausX: hide parent viewer nav/title because card has its own controls */
.viewer.show .viewerNav,
.viewer.show #viewerNav,
.viewer.show .viewerTitle,
.viewer.show #viewerTitle{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Wardrobe lootbox outfit preview */
.gachaRewardImageWrap{
  width:72px;
  height:72px;
  margin:4px auto 8px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(112,205,255,.55);
  box-shadow:0 0 16px rgba(66,190,255,.22);
  background:rgba(255,255,255,.05);
}
.gachaRewardImage{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}



/* === ChausX wardrobe visual fixes === */

/* Locked outfits stay visible but unmistakably locked */
.outfit-card.locked,
.outfit-card.is-locked,
.outfit-preview.locked,
.outfit-preview.is-locked,
.wardrobe-outfit.locked,
.wardrobe-outfit.is-locked,
[data-outfit-id].locked,
[data-outfit-id].is-locked {
  position: relative;
  filter: grayscale(0.25) brightness(0.72);
  opacity: 0.92;
}

.outfit-card.locked::after,
.outfit-card.is-locked::after,
.outfit-preview.locked::after,
.outfit-preview.is-locked::after,
.wardrobe-outfit.locked::after,
.wardrobe-outfit.is-locked::after,
[data-outfit-id].locked::after,
[data-outfit-id].is-locked::after {
  content: "LOCKED";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 8;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  background: rgba(0,0,0,.66);
  color: rgba(255,255,255,.94);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .16em;
  text-shadow: 0 2px 10px rgba(0,0,0,.85);
  pointer-events: none;
}

.outfit-card.locked::before,
.outfit-card.is-locked::before,
.outfit-preview.locked::before,
.outfit-preview.is-locked::before,
.wardrobe-outfit.locked::before,
.wardrobe-outfit.is-locked::before,
[data-outfit-id].locked::before,
[data-outfit-id].is-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.58));
  pointer-events: none;
}

/* Hold progress must reset if released */
.outfit-card,
.outfit-preview,
.wardrobe-outfit,
[data-outfit-id] {
  --discover-progress: 0;
}

.outfit-card .discover-progress,
.outfit-card .hold-progress,
.outfit-card .unlock-progress,
.outfit-card .reveal-progress,
.outfit-preview .discover-progress,
.outfit-preview .hold-progress,
.outfit-preview .unlock-progress,
.outfit-preview .reveal-progress,
.wardrobe-outfit .discover-progress,
.wardrobe-outfit .hold-progress,
.wardrobe-outfit .unlock-progress,
.wardrobe-outfit .reveal-progress {
  transform-origin: left center;
  transform: scaleX(var(--discover-progress, 0));
  transition: transform .08s linear;
}

/* Premium shine every ~3s on legendary outfit previews */
.outfit-card.legendary,
.outfit-card.rarity-legendary,
.outfit-preview.legendary,
.outfit-preview.rarity-legendary,
.wardrobe-outfit.legendary,
.wardrobe-outfit.rarity-legendary,
[data-rarity="legendary"] {
  position: relative;
  overflow: hidden;
}

.outfit-card.legendary .legendary-shine,
.outfit-card.rarity-legendary .legendary-shine,
.outfit-preview.legendary .legendary-shine,
.outfit-preview.rarity-legendary .legendary-shine,
.wardrobe-outfit.legendary .legendary-shine,
.wardrobe-outfit.rarity-legendary .legendary-shine,
[data-rarity="legendary"] .legendary-shine {
  display: none;
}

.outfit-card.legendary::before,
.outfit-card.rarity-legendary::before,
.outfit-preview.legendary::before,
.outfit-preview.rarity-legendary::before,
.wardrobe-outfit.legendary::before,
.wardrobe-outfit.rarity-legendary::before,
[data-rarity="legendary"]::before {
  content: "";
  position: absolute;
  z-index: 9;
  top: -35%;
  bottom: -35%;
  width: 42%;
  left: -65%;
  pointer-events: none;
  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0) 22%,
    rgba(255,255,255,.72) 48%,
    rgba(255,228,147,.72) 54%,
    rgba(255,255,255,0) 78%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: wardrobeLegendaryShine 3s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes wardrobeLegendaryShine {
  0%, 62% { left: -70%; opacity: 0; }
  68% { opacity: .95; }
  86% { left: 130%; opacity: .85; }
  100% { left: 130%; opacity: 0; }
}


/* ============================================================
   Outfit reward OK modal
   Shows unlocked outfit image prominently and queues multiple outfits.
============================================================ */
.chxOutfitRewardModal{
  position:fixed!important;
  inset:0!important;
  z-index:2147483600!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,210,120,.18), transparent 34%),
    rgba(0,0,0,.78)!important;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease!important;
}

.chxOutfitRewardModal.show{
  opacity:1;
  pointer-events:auto;
}

.chxOutfitRewardModal.closing{
  opacity:0;
  pointer-events:none;
}

.chxOutfitRewardRays{
  position:absolute!important;
  inset:-20%!important;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255,220,130,.20) 12deg,
      transparent 24deg,
      transparent 44deg,
      rgba(255,170,70,.14) 58deg,
      transparent 72deg)!important;
  animation:chxOutfitRewardRaysSpin 9s linear infinite!important;
  opacity:.9;
  pointer-events:none!important;
}

.chxOutfitRewardModal.epic .chxOutfitRewardRays{
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(180,105,255,.26) 12deg,
      transparent 24deg,
      transparent 44deg,
      rgba(95,190,255,.17) 58deg,
      transparent 72deg)!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardRays{
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255,220,90,.32) 12deg,
      transparent 24deg,
      transparent 44deg,
      rgba(255,115,70,.22) 58deg,
      transparent 72deg)!important;
}

@keyframes chxOutfitRewardRaysSpin{
  to{transform:rotate(360deg)}
}

.chxOutfitRewardCard{
  position:relative!important;
  z-index:2!important;
  width:min(760px,92vw)!important;
  max-height:92vh!important;
  border-radius:34px!important;
  padding:26px 28px 24px!important;
  text-align:center!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,230,160,.18), transparent 42%),
    linear-gradient(180deg, rgba(30,22,16,.96), rgba(8,8,12,.96))!important;
  border:1px solid rgba(255,225,155,.42)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    0 0 52px rgba(255,175,70,.22),
    inset 0 0 22px rgba(255,255,255,.06)!important;
  animation:chxOutfitRewardCardIn .42s cubic-bezier(.16,.9,.16,1) both!important;
}

.chxOutfitRewardModal.epic .chxOutfitRewardCard{
  border-color:rgba(195,130,255,.55)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    0 0 58px rgba(170,90,255,.28),
    inset 0 0 22px rgba(255,255,255,.06)!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardCard{
  border-color:rgba(255,220,100,.70)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.72),
    0 0 72px rgba(255,190,60,.38),
    inset 0 0 28px rgba(255,255,255,.08)!important;
}

@keyframes chxOutfitRewardCardIn{
  0%{opacity:0;transform:translateY(18px) scale(.92)}
  60%{opacity:1;transform:translateY(-4px) scale(1.025)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

.chxOutfitRewardType{
  font-size:clamp(15px,2vw,24px)!important;
  font-weight:1000!important;
  letter-spacing:.18em!important;
  color:#ffd98a!important;
  text-shadow:0 0 18px rgba(255,185,60,.75),0 3px 10px #000!important;
  margin-bottom:10px!important;
}

.chxOutfitRewardModal.epic .chxOutfitRewardType{
  color:#ddb7ff!important;
  text-shadow:0 0 18px rgba(175,95,255,.75),0 3px 10px #000!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardType{
  color:#fff1a6!important;
  text-shadow:0 0 24px rgba(255,210,70,.92),0 3px 10px #000!important;
}

.chxOutfitRewardOutfitName{
  font-size:clamp(28px,4.8vw,62px)!important;
  font-weight:1000!important;
  line-height:.98!important;
  letter-spacing:.03em!important;
  text-shadow:0 4px 18px rgba(0,0,0,.92)!important;
  margin-bottom:18px!important;
}

.chxOutfitRewardImageFrame{
  width:min(560px,78vw)!important;
  height:min(58vh,560px)!important;
  margin:0 auto 16px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), transparent 58%),
    rgba(0,0,0,.30)!important;
  border:1px solid rgba(255,255,255,.13)!important;
  overflow:hidden!important;
}

.chxOutfitRewardImage{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))!important;
}

.chxOutfitRewardCharacter{
  font-size:clamp(18px,2.7vw,34px)!important;
  font-weight:900!important;
  color:rgba(255,255,255,.88)!important;
  letter-spacing:.05em!important;
  text-shadow:0 3px 12px rgba(0,0,0,.9)!important;
  margin-bottom:20px!important;
}

.chxOutfitRewardOk{
  appearance:none!important;
  border:1px solid rgba(255,230,155,.55)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,210,100,.95),rgba(255,130,35,.92))!important;
  color:#1c0d05!important;
  font-weight:1000!important;
  letter-spacing:.16em!important;
  font-size:18px!important;
  padding:13px 54px!important;
  cursor:pointer!important;
  box-shadow:0 0 26px rgba(255,175,70,.40), inset 0 1px 0 rgba(255,255,255,.45)!important;
}

.chxOutfitRewardOk:hover{
  transform:scale(1.045)!important;
  filter:brightness(1.08)!important;
}


/* ============================================================
   Outfit reward rarity impact v2
============================================================ */
.chxOutfitRewardModal.common{
  --reward-main:#ffd98a;
  --reward-glow:rgba(255,185,70,.42);
  --reward-soft:rgba(255,170,70,.16);
}

.chxOutfitRewardModal.epic{
  --reward-main:#dca8ff;
  --reward-glow:rgba(180,90,255,.55);
  --reward-soft:rgba(110,150,255,.18);
}

.chxOutfitRewardModal.legend{
  --reward-main:#fff1a6;
  --reward-glow:rgba(255,205,60,.82);
  --reward-soft:rgba(255,120,35,.26);
}

.chxOutfitRewardImpact{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    radial-gradient(circle at 50% 48%, var(--reward-glow), transparent 24%),
    radial-gradient(circle at 50% 50%, var(--reward-soft), transparent 52%)!important;
  opacity:.78;
  animation:chxRewardImpactPulseCommon 1.6s ease-out both!important;
}

.chxOutfitRewardModal.epic .chxOutfitRewardImpact{
  animation:chxRewardImpactPulseEpic 1.95s ease-out both!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardImpact{
  animation:chxRewardImpactPulseLegend 2.55s ease-out both!important;
}

@keyframes chxRewardImpactPulseCommon{
  0%{opacity:0;transform:scale(.55);filter:brightness(1)}
  24%{opacity:.85;transform:scale(1);filter:brightness(1.35)}
  100%{opacity:.34;transform:scale(1.28);filter:brightness(1)}
}

@keyframes chxRewardImpactPulseEpic{
  0%{opacity:0;transform:scale(.45);filter:brightness(1)}
  18%{opacity:1;transform:scale(1.06);filter:brightness(1.6)}
  48%{opacity:.62;transform:scale(1.22)}
  100%{opacity:.38;transform:scale(1.46);filter:brightness(1)}
}

@keyframes chxRewardImpactPulseLegend{
  0%{opacity:0;transform:scale(.34) rotate(0deg);filter:brightness(1)}
  14%{opacity:1;transform:scale(1.14) rotate(1deg);filter:brightness(1.95)}
  34%{opacity:.86;transform:scale(.98) rotate(-.6deg)}
  58%{opacity:.72;transform:scale(1.28) rotate(.4deg)}
  100%{opacity:.46;transform:scale(1.72) rotate(0deg);filter:brightness(1)}
}

.chxOutfitRewardModal .chxOutfitRewardCard{
  border-color:color-mix(in srgb, var(--reward-main) 62%, transparent)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.74),
    0 0 58px var(--reward-glow),
    inset 0 0 24px rgba(255,255,255,.07)!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardCard{
  animation:
    chxOutfitRewardCardIn .42s cubic-bezier(.16,.9,.16,1) both,
    chxLegendCardAura 2.6s ease-in-out infinite .45s!important;
}

@keyframes chxLegendCardAura{
  0%,100%{
    box-shadow:
      0 28px 80px rgba(0,0,0,.74),
      0 0 60px rgba(255,205,60,.42),
      0 0 110px rgba(255,130,35,.16),
      inset 0 0 26px rgba(255,255,255,.08);
  }
  50%{
    box-shadow:
      0 28px 80px rgba(0,0,0,.74),
      0 0 86px rgba(255,225,95,.72),
      0 0 160px rgba(255,130,35,.30),
      inset 0 0 34px rgba(255,245,170,.14);
  }
}

.chxOutfitRewardRarityStamp{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%) rotate(-8deg);
  z-index:0!important;
  font-size:clamp(52px,9vw,150px)!important;
  line-height:.85!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
  color:transparent!important;
  -webkit-text-stroke:2px color-mix(in srgb, var(--reward-main) 34%, transparent)!important;
  text-shadow:0 0 32px var(--reward-glow)!important;
  opacity:.18;
  white-space:nowrap!important;
  pointer-events:none!important;
  animation:chxRarityStampIn .9s cubic-bezier(.16,.9,.16,1) both!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardRarityStamp{
  opacity:.26;
  -webkit-text-stroke:2px rgba(255,235,130,.46)!important;
  animation:
    chxRarityStampIn .9s cubic-bezier(.16,.9,.16,1) both,
    chxLegendStampPulse 1.9s ease-in-out infinite .8s!important;
}

@keyframes chxRarityStampIn{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.42)}
  42%{opacity:.34;transform:translate(-50%,-50%) rotate(-8deg) scale(1.08)}
  100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
}

@keyframes chxLegendStampPulse{
  0%,100%{filter:brightness(1);opacity:.24}
  50%{filter:brightness(1.55);opacity:.34}
}

.chxOutfitRewardModal .chxOutfitRewardType,
.chxOutfitRewardModal .chxOutfitRewardOutfitName{
  color:var(--reward-main)!important;
  text-shadow:
    0 0 18px var(--reward-glow),
    0 4px 14px rgba(0,0,0,.94)!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardOutfitName{
  animation:chxLegendNameImpact 1.15s cubic-bezier(.16,.9,.16,1) both!important;
}

@keyframes chxLegendNameImpact{
  0%{opacity:0;transform:scale(.72);filter:brightness(1)}
  22%{opacity:1;transform:scale(1.16);filter:brightness(1.8)}
  46%{transform:scale(.96)}
  68%{transform:scale(1.05)}
  100%{opacity:1;transform:scale(1);filter:brightness(1)}
}

.chxOutfitRewardModal.legend .chxOutfitRewardImageFrame{
  box-shadow:
    0 0 34px rgba(255,220,95,.30),
    inset 0 0 24px rgba(255,255,255,.08)!important;
  animation:chxLegendImageGlow 2.1s ease-in-out infinite!important;
}

@keyframes chxLegendImageGlow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.12)}
}


/* ============================================================
   Outfit reward rarity color strict override
============================================================ */
.chxOutfitRewardModal.common{
  --reward-main:#ffd98a!important;
  --reward-glow:rgba(255,185,70,.48)!important;
  --reward-soft:rgba(255,170,70,.18)!important;
}

.chxOutfitRewardModal.epic{
  --reward-main:#dca8ff!important;
  --reward-glow:rgba(180,90,255,.68)!important;
  --reward-soft:rgba(105,150,255,.22)!important;
  background:
    radial-gradient(circle at 50% 38%, rgba(165,95,255,.24), transparent 34%),
    radial-gradient(circle at 50% 60%, rgba(85,170,255,.12), transparent 46%),
    rgba(0,0,0,.80)!important;
}

.chxOutfitRewardModal.legend{
  --reward-main:#fff1a6!important;
  --reward-glow:rgba(255,210,60,.95)!important;
  --reward-soft:rgba(255,120,35,.32)!important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,218,70,.34), transparent 32%),
    radial-gradient(circle at 50% 66%, rgba(255,105,35,.18), transparent 48%),
    rgba(0,0,0,.82)!important;
}

.chxOutfitRewardModal.epic .chxOutfitRewardType,
.chxOutfitRewardModal.epic .chxOutfitRewardOutfitName,
.chxOutfitRewardModal.epic .chxOutfitRewardCharacter{
  color:#dca8ff!important;
  text-shadow:0 0 22px rgba(180,90,255,.82),0 4px 14px rgba(0,0,0,.95)!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardType,
.chxOutfitRewardModal.legend .chxOutfitRewardOutfitName,
.chxOutfitRewardModal.legend .chxOutfitRewardCharacter{
  color:#fff1a6!important;
  text-shadow:0 0 28px rgba(255,220,85,.95),0 0 58px rgba(255,130,35,.42),0 4px 14px rgba(0,0,0,.95)!important;
}

.chxOutfitRewardModal.epic .chxOutfitRewardOk{
  background:linear-gradient(180deg,rgba(210,160,255,.98),rgba(110,75,255,.94))!important;
  color:#12051d!important;
  border-color:rgba(230,200,255,.70)!important;
  box-shadow:0 0 34px rgba(175,90,255,.55), inset 0 1px 0 rgba(255,255,255,.48)!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardOk{
  background:linear-gradient(180deg,rgba(255,245,150,.98),rgba(255,145,35,.96))!important;
  color:#281000!important;
  border-color:rgba(255,240,150,.85)!important;
  box-shadow:0 0 46px rgba(255,205,60,.72),0 0 80px rgba(255,120,35,.28), inset 0 1px 0 rgba(255,255,255,.58)!important;
}


/* ============================================================
   Outfit reward final rarity palette fix
============================================================ */
.chxOutfitRewardModal.common{
  --reward-main:#8fd8ff!important;
  --reward-glow:rgba(95,190,255,.44)!important;
  --reward-soft:rgba(80,170,255,.16)!important;
  background:
    radial-gradient(circle at 50% 38%, rgba(95,190,255,.18), transparent 34%),
    rgba(0,0,0,.78)!important;
}

.chxOutfitRewardModal.common .chxOutfitRewardCard{
  border-color:rgba(130,215,255,.48)!important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.74),
    0 0 46px rgba(95,190,255,.28),
    inset 0 0 22px rgba(255,255,255,.06)!important;
}

.chxOutfitRewardModal.common .chxOutfitRewardType,
.chxOutfitRewardModal.common .chxOutfitRewardOutfitName,
.chxOutfitRewardModal.common .chxOutfitRewardCharacter{
  color:#bfeaff!important;
  text-shadow:0 0 18px rgba(95,190,255,.62),0 4px 14px rgba(0,0,0,.95)!important;
}

.chxOutfitRewardModal.common .chxOutfitRewardOk{
  background:linear-gradient(180deg,rgba(145,220,255,.98),rgba(45,145,230,.94))!important;
  color:#041421!important;
  border-color:rgba(190,235,255,.68)!important;
  box-shadow:0 0 28px rgba(80,180,255,.42), inset 0 1px 0 rgba(255,255,255,.48)!important;
}

.chxOutfitRewardModal.epic{
  --reward-main:#dca8ff!important;
  --reward-glow:rgba(180,90,255,.68)!important;
  --reward-soft:rgba(105,150,255,.22)!important;
}

.chxOutfitRewardModal.legend{
  --reward-main:#fff1a6!important;
  --reward-glow:rgba(255,210,60,.95)!important;
  --reward-soft:rgba(255,120,35,.32)!important;
}


/* ============================================================
   Outfit reward hard rarity palette fix
============================================================ */
.chxOutfitRewardModal.common{
  --reward-main:#8fd8ff!important;
  --reward-glow:rgba(95,190,255,.44)!important;
  --reward-soft:rgba(80,170,255,.16)!important;
  background:
    radial-gradient(circle at 50% 38%, rgba(95,190,255,.18), transparent 34%),
    rgba(0,0,0,.78)!important;
}
.chxOutfitRewardModal.epic{
  --reward-main:#dca8ff!important;
  --reward-glow:rgba(180,90,255,.68)!important;
  --reward-soft:rgba(105,150,255,.22)!important;
  background:
    radial-gradient(circle at 50% 38%, rgba(165,95,255,.24), transparent 34%),
    radial-gradient(circle at 50% 60%, rgba(85,170,255,.12), transparent 46%),
    rgba(0,0,0,.80)!important;
}
.chxOutfitRewardModal.legend{
  --reward-main:#fff1a6!important;
  --reward-glow:rgba(255,210,60,.95)!important;
  --reward-soft:rgba(255,120,35,.32)!important;
  background:
    radial-gradient(circle at 50% 36%, rgba(255,218,70,.34), transparent 32%),
    radial-gradient(circle at 50% 66%, rgba(255,105,35,.18), transparent 48%),
    rgba(0,0,0,.82)!important;
}
.chxOutfitRewardModal.common .chxOutfitRewardType,
.chxOutfitRewardModal.common .chxOutfitRewardOutfitName,
.chxOutfitRewardModal.common .chxOutfitRewardCharacter{
  color:#bfeaff!important;
  text-shadow:0 0 18px rgba(95,190,255,.62),0 4px 14px rgba(0,0,0,.95)!important;
}
.chxOutfitRewardModal.epic .chxOutfitRewardType,
.chxOutfitRewardModal.epic .chxOutfitRewardOutfitName,
.chxOutfitRewardModal.epic .chxOutfitRewardCharacter{
  color:#dca8ff!important;
  text-shadow:0 0 22px rgba(180,90,255,.82),0 4px 14px rgba(0,0,0,.95)!important;
}
.chxOutfitRewardModal.legend .chxOutfitRewardType,
.chxOutfitRewardModal.legend .chxOutfitRewardOutfitName,
.chxOutfitRewardModal.legend .chxOutfitRewardCharacter{
  color:#fff1a6!important;
  text-shadow:0 0 28px rgba(255,220,85,.95),0 0 58px rgba(255,130,35,.42),0 4px 14px rgba(0,0,0,.95)!important;
}





/* ============================================================
   Outfit reward staged reveal
   Existing rarity stamp is shown first, then the outfit panel appears.
   Animated properties intentionally have no !important.
============================================================ */
.chxOutfitRewardModal .chxOutfitRewardRarityStamp{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  z-index:2!important;
  pointer-events:none!important;
  font-size:clamp(72px,13vw,230px)!important;
  line-height:.82!important;
  font-weight:1000!important;
  letter-spacing:.045em!important;
  color:transparent!important;
  -webkit-text-stroke:2px color-mix(in srgb, var(--reward-main) 56%, transparent)!important;
  text-shadow:
    0 0 34px var(--reward-glow),
    0 0 74px var(--reward-glow),
    0 10px 28px rgba(0,0,0,.82)!important;
  opacity:0;
  white-space:nowrap!important;
  transform:translate(-50%,-50%) rotate(-8deg) scale(.28);
  animation:chxRarityFirstReveal 1.25s cubic-bezier(.12,.92,.15,1) both!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardRarityStamp{
  -webkit-text-stroke:2.5px rgba(255,235,130,.72)!important;
  animation:
    chxRarityFirstRevealLegend 1.35s cubic-bezier(.12,.92,.15,1) both,
    chxLegendStampPulse 1.9s ease-in-out infinite 1.35s!important;
}

@keyframes chxRarityFirstReveal{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.22);filter:brightness(1)}
  18%{opacity:.92;transform:translate(-50%,-50%) rotate(-8deg) scale(1.12);filter:brightness(1.65)}
  42%{opacity:.62;transform:translate(-50%,-50%) rotate(-8deg) scale(.96);filter:brightness(1.15)}
  72%{opacity:.48;transform:translate(-50%,-50%) rotate(-8deg) scale(1.03)}
  100%{opacity:.24;transform:translate(-50%,-50%) rotate(-8deg) scale(1);filter:brightness(1)}
}

@keyframes chxRarityFirstRevealLegend{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.18);filter:brightness(1)}
  14%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1.24);filter:brightness(2.05)}
  34%{opacity:.78;transform:translate(-50%,-50%) rotate(-8deg) scale(.94)}
  64%{opacity:.60;transform:translate(-50%,-50%) rotate(-8deg) scale(1.08)}
  100%{opacity:.34;transform:translate(-50%,-50%) rotate(-8deg) scale(1);filter:brightness(1)}
}

.chxOutfitRewardModal .chxOutfitRewardCard{
  z-index:3!important;
  opacity:0;
  transform:translateY(24px) scale(.92);
  animation:chxOutfitRewardPanelDelayedIn .46s cubic-bezier(.16,.9,.16,1) 1s both!important;
}

.chxOutfitRewardModal.legend .chxOutfitRewardCard{
  animation:
    chxOutfitRewardPanelDelayedIn .50s cubic-bezier(.16,.9,.16,1) 1s both,
    chxLegendCardAura 2.6s ease-in-out infinite 1.5s!important;
}

@keyframes chxOutfitRewardPanelDelayedIn{
  0%{opacity:0;transform:translateY(24px) scale(.90);filter:brightness(.92)}
  62%{opacity:1;transform:translateY(-5px) scale(1.025);filter:brightness(1.08)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}
}

.chxOutfitRewardModal .chxOutfitRewardImpact{
  z-index:1!important;
}

.chxOutfitRewardModal .chxOutfitRewardRays{
  z-index:0!important;
}


/* ============================================================
   Music panel now playing + navigation
============================================================ */
.musicNowPlaying{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 34px;
  align-items:center;
  gap:8px;
  margin:10px 0 9px;
}

.musicNavBtn{
  width:34px;
  height:30px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:22px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.musicNavBtn:hover{
  transform:scale(1.05);
  background:rgba(255,255,255,.16);
}

.musicNowPlayingMarquee{
  min-width:0;
  overflow:hidden;
  border-radius:999px;
  padding:7px 11px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);
  white-space:nowrap;
}

#musicNowPlayingText{
  display:inline-block;
  max-width:100%;
  color:rgba(255,255,255,.88);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  vertical-align:middle;
}

#musicNowPlayingText.is-scrolling{
  max-width:none;
  padding-left:100%;
  animation:musicTitleScroll 14s linear infinite;
}

@keyframes musicTitleScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}


/* ============================================================
   Static audio panel music title + navigation
============================================================ */
.chausxMusicNowPlaying{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 30px;
  align-items:center;
  gap:7px;
  margin:9px 0 11px;
}

.chausxMusicNavBtn{
  width:30px;
  height:28px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  color:#fff;
  font-size:20px;
  font-weight:1000;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

.chausxMusicNavBtn:hover{
  transform:scale(1.06);
  background:rgba(255,255,255,.16);
}

.chausxMusicTitleMarquee{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  border-radius:999px;
  padding:7px 10px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
}

#chausxMusicTitleText{
  display:inline-block;
  max-width:100%;
  color:rgba(255,255,255,.90);
  font-size:12px;
  font-weight:900;
  letter-spacing:.035em;
  vertical-align:middle;
}

#chausxMusicTitleText.is-scrolling{
  max-width:none;
  padding-left:100%;
  animation:chausxMusicTitleScroll 15s linear infinite;
}

@keyframes chausxMusicTitleScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-100%)}
}


/* ============================================================
   Music panel fixes + now playing toast
============================================================ */

/* Keep the music panel clear of the floating music button. */
#chausxMusicPanel.chausxAudioPanel{
  bottom:112px!important;
  right:72px!important;
  width:300px!important;
}

/* Keep arrow glyphs visually centered. */
.chausxMusicNavBtn,
.musicNavBtn{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}

.chausxMusicNowPlaying{
  grid-template-columns:32px minmax(0,1fr) 32px!important;
  gap:8px!important;
}

.chausxMusicTitleMarquee,
.musicNowPlayingMarquee,
.chausxNowPlayingToastMarquee{
  position:relative;
  overflow:hidden!important;
  min-width:0!important;
}

#chausxMusicTitleText,
#musicNowPlayingText,
#chausxNowPlayingToastText{
  display:inline-block!important;
  max-width:none!important;
  white-space:nowrap!important;
  will-change:transform;
}

#chausxMusicTitleText.is-scrolling,
#musicNowPlayingText.is-scrolling,
#chausxNowPlayingToastText.is-scrolling{
  animation:chausxMusicSmartScroll 9.5s linear infinite!important;
}

@keyframes chausxMusicSmartScroll{
  0%,18%{transform:translateX(0)}
  92%,100%{transform:translateX(calc(-1 * var(--scroll-distance, 80px)))}
}

/* Temporary now-playing toast */
.chausxNowPlayingToast{
  position:fixed;
  right:82px;
  bottom:28px;
  z-index:2147483646;
  width:min(390px,calc(100vw - 126px));
  min-height:68px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 42px;
  align-items:center;
  gap:12px;
  padding:12px 12px 12px 14px;
  border-radius:20px;
  color:#fff;
  background:linear-gradient(135deg,rgba(20,18,30,.72),rgba(8,8,12,.54));
  border:1px solid rgba(255,210,120,.28);
  box-shadow:0 18px 48px rgba(0,0,0,.46),0 0 26px rgba(255,165,60,.16);
  backdrop-filter:blur(14px);
  pointer-events:none;
  opacity:0;
  transform:translateX(115%) scale(.96);
}

.chausxNowPlayingToast.show{
  pointer-events:auto;
  animation:chausxNowPlayingToastIn .42s cubic-bezier(.16,.9,.16,1) both;
}

.chausxNowPlayingToast.hide{
  animation:chausxNowPlayingToastOut .26s ease-in both;
}

@keyframes chausxNowPlayingToastIn{
  0%{opacity:0;transform:translateX(115%) scale(.96);clip-path:inset(0 0 0 100% round 20px)}
  100%{opacity:1;transform:translateX(0) scale(1);clip-path:inset(0 0 0 0 round 20px)}
}

@keyframes chausxNowPlayingToastOut{
  0%{opacity:1;transform:translateX(0) scale(1)}
  100%{opacity:0;transform:translateX(115%) scale(.96)}
}

.chausxNowPlayingToastIcon{
  width:40px;
  height:40px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.11);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  font-size:20px;
}

.chausxNowPlayingToastBody{
  min-width:0;
}

.chausxNowPlayingToastLabel{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
  color:rgba(255,210,130,.84);
  margin-bottom:5px;
}

.chausxNowPlayingToastMarquee{
  border-radius:999px;
  padding:3px 0;
}

#chausxNowPlayingToastText{
  font-size:14px;
  font-weight:900;
  color:rgba(255,255,255,.94);
  text-shadow:0 2px 8px rgba(0,0,0,.55);
}

.chausxNowPlayingToastNext{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.11);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:28px;
  font-weight:1000;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.14);
}

.chausxNowPlayingToastNext:hover{
  transform:scale(1.06);
  background:rgba(255,255,255,.17);
}


/* Music toast alignment refinement */
.chausxNowPlayingToastNext{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
}


/* ============================================================
   Music marquee true left-start fix
   Text starts fully visible from the left, pauses, then scrolls left.
============================================================ */
#chausxMusicTitleText,
#musicNowPlayingText,
#chausxNowPlayingToastText{
  padding-left:0!important;
  transform:translateX(0);
  text-align:left!important;
}

#chausxMusicTitleText.is-scrolling,
#musicNowPlayingText.is-scrolling,
#chausxNowPlayingToastText.is-scrolling{
  padding-left:0!important;
  animation:chausxMusicSmartScrollLeftStart 8.8s linear infinite!important;
}

@keyframes chausxMusicSmartScrollLeftStart{
  0%,22%{
    transform:translateX(0);
  }
  88%,100%{
    transform:translateX(calc(-1 * var(--scroll-distance, 80px)));
  }
}


/* ============================================================
   ChausX Game Hub Home + Collections
============================================================ */
body.chxHubHomeActive .collectionHeader,
body.chxHubCollectionsActive .collectionHeader,
body.chxHubSeriesActive .collectionHeader{
  display:none !important;
}

.chxGameHome,
.chxCollectionsScreen{
  position:relative;
  z-index:2;
  width:min(1180px,100%);
  margin:0 auto;
  padding:12px 0 50px;
}

.chxGameHomeHero{
  position:relative;
  overflow:hidden;
  min-height:285px;
  padding:44px 48px;
  border:1px solid rgba(255,211,123,.23);
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(9,10,18,.96),rgba(19,16,28,.80) 58%,rgba(31,21,12,.74)),
    radial-gradient(circle at 82% 28%,rgba(255,177,60,.22),transparent 34%);
  box-shadow:0 28px 70px rgba(0,0,0,.38),inset 0 0 46px rgba(255,255,255,.025);
}
.chxGameHomeHero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 55%,rgba(255,210,120,.08) 55.2% 55.5%,transparent 55.7%),
    repeating-linear-gradient(90deg,transparent 0 54px,rgba(255,255,255,.018) 55px);
}
.chxGameHomeEyebrow,
.chxSectionEyebrow{
  color:#f5c574;
  font-size:12px;
  font-weight:900;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.chxGameHomeHero h2{
  position:relative;
  max-width:700px;
  margin:12px 0 10px;
  font-size:clamp(34px,5vw,62px);
  line-height:.98;
  color:#fff;
  text-shadow:0 8px 34px rgba(0,0,0,.55);
}
.chxGameHomeHero > p{
  position:relative;
  max-width:650px;
  margin:0;
  color:rgba(255,255,255,.70);
  font-size:16px;
  line-height:1.6;
}
.chxGameHomeStats{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}
.chxGameHomeStats > div{
  min-width:145px;
  padding:13px 16px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}
.chxGameHomeStats strong{
  display:block;
  color:#ffe0a0;
  font-size:24px;
}
.chxGameHomeStats span{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.55);
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.chxHomeNavGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:22px;
}
.chxHomeNavCard{
  position:relative;
  overflow:hidden;
  min-height:235px;
  padding:28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(145deg,rgba(20,23,36,.96),rgba(7,8,14,.96));
  box-shadow:0 20px 45px rgba(0,0,0,.30),inset 0 0 28px rgba(255,255,255,.025);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.chxHomeNavCard.series{
  background:
    radial-gradient(circle at 84% 20%,rgba(88,151,255,.24),transparent 36%),
    linear-gradient(145deg,rgba(15,23,40,.98),rgba(6,8,15,.98));
}
.chxHomeNavCard.collections{
  background:
    radial-gradient(circle at 84% 20%,rgba(207,111,255,.25),transparent 36%),
    linear-gradient(145deg,rgba(31,17,42,.98),rgba(8,7,15,.98));
}
.chxHomeNavCard:hover{
  transform:translateY(-5px);
  border-color:rgba(255,221,147,.50);
  box-shadow:0 28px 58px rgba(0,0,0,.42),0 0 34px rgba(255,190,75,.10);
}
.chxHomeNavGlow{
  position:absolute;
  width:220px;
  height:220px;
  right:-70px;
  top:-80px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 70px rgba(255,255,255,.05);
}
.chxHomeNavIcon{
  position:absolute;
  right:24px;
  top:24px;
  width:68px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  color:#ffe4a7;
  font-size:29px;
  font-weight:1000;
}
.chxHomeNavContent{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:180px;
}
.chxHomeNavContent strong{
  margin-top:46px;
  font-size:32px;
  letter-spacing:.02em;
}
.chxHomeNavContent em{
  max-width:410px;
  margin-top:10px;
  color:rgba(255,255,255,.60);
  font-size:14px;
  font-style:normal;
  line-height:1.5;
}
.chxHomeNavEnter{
  margin-top:auto;
  color:#f5ca7c;
  font-size:11px;
  font-weight:900;
  letter-spacing:.18em;
}
.chxHomeNavEnter b{font-size:20px;vertical-align:-2px}

.chxHomeSecondary{
  margin-top:26px;
  padding:22px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(8,9,15,.62);
}
.chxHomeSecondaryTitle{
  margin-bottom:14px;
  color:rgba(255,255,255,.48);
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
}
.chxHomeSecondaryGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.chxHomeSecondaryGrid button{
  min-height:82px;
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:10px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:15px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  background:rgba(255,255,255,.04);
}
.chxHomeSecondaryGrid button:hover:not(.disabled){background:rgba(255,255,255,.08);border-color:rgba(255,207,111,.32)}
.chxHomeSecondaryGrid button.disabled{opacity:.45;cursor:default}
.chxHomeSecondaryGrid span{grid-row:1/3;font-size:25px;color:#f3c36f}
.chxHomeSecondaryGrid strong{font-size:13px}
.chxHomeSecondaryGrid em{color:rgba(255,255,255,.45);font-size:11px;font-style:normal}

.chxSectionHeader{
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:22px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:linear-gradient(90deg,rgba(16,17,27,.95),rgba(20,13,29,.78));
}
.chxSectionHeader h2{
  margin:3px 0 2px;
  font-size:34px;
}
.chxSectionHeader p{
  margin:0;
  color:rgba(255,255,255,.52);
}
.chxSectionBack,
.chxSeriesHomeBack{
  flex:none;
  min-height:42px;
  padding:0 16px;
  border:1px solid rgba(255,211,130,.30);
  border-radius:12px;
  color:#f6d18a;
  background:rgba(255,190,80,.08);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.08em;
}
.chxSectionBack:hover,
.chxSeriesHomeBack:hover{
  background:rgba(255,190,80,.15);
  border-color:rgba(255,211,130,.52);
}

.chxCollectionTabs{
  display:flex;
  gap:9px;
  overflow-x:auto;
  padding:4px 2px 16px;
}
.chxCollectionTabs button{
  flex:none;
  min-height:38px;
  padding:0 15px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.035);
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.chxCollectionTabs button.active{
  color:#251306;
  border-color:rgba(255,225,155,.75);
  background:linear-gradient(135deg,#ffe7a7,#e99b35);
  box-shadow:0 0 22px rgba(255,178,62,.20);
}
.chxCollectionCardGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px;
}
.chxCollectionArchiveCard{
  min-height:330px;
}
.chxCollectionEmpty{
  grid-column:1/-1;
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.13);
  border-radius:20px;
  color:rgba(255,255,255,.48);
}
.chxCollectionEmpty strong{color:#fff;font-size:18px;margin-bottom:6px}

.chxToolbarTop{
  position:relative;
}
.chxSeriesHomeBack{
  margin-right:auto;
}

@media(max-width:780px){
  .chxGameHomeHero{padding:32px 24px}
  .chxHomeNavGrid{grid-template-columns:1fr}
  .chxHomeSecondaryGrid{grid-template-columns:1fr}
  .chxSectionHeader{align-items:flex-start;padding:18px}
  .chxCollectionCardGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:480px){
  .chxCollectionCardGrid{grid-template-columns:1fr}
  .chxGameHomeStats > div{min-width:calc(50% - 8px)}
}


/* ============================================================
   Real Supabase Card Collections
============================================================ */
.chxCollectionSummary{
  margin-left:auto;
  min-width:90px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  text-align:center;
  background:rgba(255,255,255,.04);
}
.chxCollectionSummary strong{
  display:block;
  color:#ffe0a0;
  font-size:22px;
}
.chxCollectionSummary span{
  display:block;
  color:rgba(255,255,255,.48);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.chxRealCollectionCardGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
  align-items:start;
}

.chxRealCollectionCard{
  position:relative;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:20px;
  color:#fff;
  text-align:left;
  cursor:pointer;
  background:linear-gradient(180deg,rgba(24,25,36,.98),rgba(9,10,16,.98));
  box-shadow:0 18px 42px rgba(0,0,0,.30),inset 0 0 24px rgba(255,255,255,.025);
  transition:transform .20s ease,border-color .20s ease,box-shadow .20s ease;
}
.chxRealCollectionCard:hover{
  transform:translateY(-5px);
  border-color:rgba(255,211,125,.50);
  box-shadow:0 26px 52px rgba(0,0,0,.42),0 0 28px rgba(255,181,65,.12);
}

.chxRealCollectionImage{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,197,92,.12),transparent 46%),
    rgba(255,255,255,.025);
}
.chxRealCollectionImage img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .25s ease,transform .28s ease;
}
.chxRealCollectionCard.imageLoaded .chxRealCollectionImage img{
  opacity:1;
}
.chxRealCollectionCard:hover .chxRealCollectionImage img{
  transform:scale(1.045);
}
.chxRealCollectionImage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(4,5,10,.72));
}
.chxRealCollectionImageFallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.24);
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-align:center;
}
.chxRealCollectionCard.imageLoaded .chxRealCollectionImageFallback{
  display:none;
}
.chxRealCollectionNumber{
  position:absolute;
  right:11px;
  bottom:10px;
  z-index:2;
  padding:5px 9px;
  border:1px solid rgba(255,221,145,.35);
  border-radius:999px;
  color:#ffe0a0;
  background:rgba(5,5,10,.72);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
  box-shadow:0 0 18px rgba(255,180,70,.10);
}

.chxRealCollectionInfo{
  display:block;
  padding:14px 16px 16px;
}
.chxRealCollectionInfo strong{
  display:block;
  overflow:hidden;
  color:#fff;
  font-size:17px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chxRealCollectionInfo em{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:#f0c878;
  font-size:11px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.06em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chxRealCollectionInfo small{
  display:block;
  margin-top:8px;
  overflow:hidden;
  color:rgba(255,255,255,.40);
  font-size:10px;
  letter-spacing:.08em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.chxCollectionCardPreview{
  position:fixed;
  inset:0;
  z-index:2147483400;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  transition:opacity .20s ease,visibility .20s ease;
}
.chxCollectionCardPreview.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.chxCollectionPreviewBody{
  position:relative;
  width:min(1180px,94vw);
  max-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.chxCollectionPreviewBody img{
  display:block;
  max-width:100%;
  max-height:82vh;
  border:1px solid rgba(255,218,135,.34);
  border-radius:18px;
  object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.70),0 0 50px rgba(255,182,70,.10);
}
.chxCollectionPreviewClose{
  position:absolute;
  top:22px;
  right:24px;
  z-index:2;
  width:46px;
  height:46px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  color:#fff;
  cursor:pointer;
  background:rgba(15,15,22,.82);
  font-size:26px;
}
.chxCollectionPreviewMeta{
  color:#fff;
  text-align:center;
}
.chxCollectionPreviewMeta strong{
  display:block;
  font-size:17px;
}
.chxCollectionPreviewMeta span{
  display:block;
  margin-top:3px;
  color:rgba(255,255,255,.52);
  font-size:11px;
  letter-spacing:.08em;
}

@media(max-width:720px){
  .chxRealCollectionCardGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .chxRealCollectionInfo{
    padding:11px 12px 13px;
  }
  .chxRealCollectionInfo strong{
    font-size:14px;
  }
  .chxCollectionSummary{
    display:none;
  }
}
@media(max-width:460px){
  .chxRealCollectionCardGrid{
    grid-template-columns:1fr;
  }
}


.chxCollectionLoadError .chxCollectionRetry{
  margin-top:16px;
  min-height:40px;
  padding:0 18px;
  border:1px solid rgba(255,211,130,.45);
  border-radius:999px;
  color:#241305;
  background:linear-gradient(135deg,#ffe6a5,#e99b35);
  cursor:pointer;
  font-weight:1000;
  letter-spacing:.10em;
}


/* ============================================================
   Premium Full-Width Collection Gallery
============================================================ */
.chxCollectionsScreen{
  width:100% !important;
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.chxCollectionsScreen .chxSectionHeader,
.chxCollectionsScreen .chxCollectionTabs{
  width:min(1480px,calc(100% - 36px));
  margin-left:auto;
  margin-right:auto;
}

.chxRealCollectionCardGrid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:12px !important;
  padding:0 18px 36px !important;
  box-sizing:border-box !important;
}

.chxRealCollectionCard{
  min-width:0 !important;
  border-radius:14px !important;
  background:#0b0c12 !important;
  aspect-ratio:16/9 !important;
  box-shadow:0 12px 30px rgba(0,0,0,.26) !important;
}

.chxRealCollectionImage{
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  border-radius:inherit !important;
}

.chxRealCollectionImage img{
  object-fit:cover !important;
  object-position:center center !important;
}

.chxRealCollectionNumber{
  top:10px !important;
  right:auto !important;
  bottom:auto !important;
  left:10px !important;
  padding:4px 8px !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
  background:rgba(4,5,10,.70) !important;
  backdrop-filter:blur(8px);
}

.chxRealCollectionCard:hover{
  transform:translateY(-4px) scale(1.01) !important;
  z-index:2;
}

body.chxCollectionPreviewOpen{
  overflow:hidden !important;
}

.chxCollectionCardPreview{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483600 !important;
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr) 88px !important;
  align-items:center !important;
  padding:28px 30px 22px !important;
  background:
    radial-gradient(circle at 50% 45%,rgba(78,48,24,.16),transparent 42%),
    rgba(2,3,7,.96) !important;
  backdrop-filter:blur(14px) !important;
}

.chxCollectionPreviewStage{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.chxCollectionPreviewImageFrame{
  position:relative;
  width:100%;
  min-height:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.chxCollectionPreviewImageFrame img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 145px);
  object-fit:contain;
  opacity:0;
  transform:translateX(28px) scale(.985);
  transition:opacity .22s ease,transform .24s ease;
  border:1px solid rgba(255,220,148,.26);
  border-radius:16px;
  box-shadow:0 30px 100px rgba(0,0,0,.72),0 0 45px rgba(255,184,70,.10);
}

.chxCollectionPreviewImageFrame.slidePrevious img{
  transform:translateX(-28px) scale(.985);
}

.chxCollectionPreviewImageFrame img.visible{
  opacity:1;
  transform:translateX(0) scale(1);
}

.chxCollectionPreviewLoading{
  position:absolute;
  color:rgba(255,255,255,.34);
  font-size:10px;
  font-weight:900;
  letter-spacing:.22em;
}

.chxCollectionPreviewImageFrame.loaded .chxCollectionPreviewLoading{
  display:none;
}

.chxCollectionPreviewMeta{
  flex:none;
  min-height:82px;
  text-align:center;
  color:#fff;
}

.chxCollectionPreviewMeta strong{
  display:block;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif !important;
  font-size:clamp(28px,3vw,46px) !important;
  font-weight:600 !important;
  line-height:1 !important;
  letter-spacing:.02em;
  text-shadow:0 6px 26px rgba(0,0,0,.7);
}

.chxCollectionPreviewSeries{
  display:block;
  margin-top:7px;
  color:#e6bf79 !important;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:clamp(16px,1.5vw,22px) !important;
  letter-spacing:.08em;
}

.chxCollectionPreviewMeta small{
  display:block;
  margin-top:7px;
  color:rgba(255,255,255,.38);
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.chxCollectionPreviewNav{
  width:62px;
  height:96px;
  justify-self:center;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  color:#fff;
  cursor:pointer;
  background:rgba(255,255,255,.045);
  font-family:Georgia,serif;
  font-size:54px;
  line-height:1;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.chxCollectionPreviewNav:hover{
  background:rgba(255,193,85,.12);
  border-color:rgba(255,215,135,.42);
  transform:scale(1.06);
}

.chxCollectionPreviewClose{
  position:absolute !important;
  top:18px !important;
  right:20px !important;
  z-index:4 !important;
}

@media(min-width:1700px){
  .chxRealCollectionCardGrid{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
  }
}

@media(max-width:900px){
  .chxRealCollectionCardGrid{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;
    gap:9px !important;
    padding:0 10px 24px !important;
  }
  .chxCollectionCardPreview{
    grid-template-columns:54px minmax(0,1fr) 54px !important;
    padding:18px 8px 14px !important;
  }
  .chxCollectionPreviewNav{
    width:44px;
    height:72px;
    border-radius:14px;
    font-size:40px;
  }
}

@media(max-width:560px){
  .chxRealCollectionCardGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .chxCollectionCardPreview{
    grid-template-columns:1fr !important;
  }
  .chxCollectionPreviewNav{
    position:absolute;
    top:50%;
    z-index:3;
    transform:translateY(-50%);
    background:rgba(4,5,10,.72);
  }
  .chxCollectionPreviewNav:hover{
    transform:translateY(-50%) scale(1.04);
  }
  .chxCollectionPreviewNav.previous{left:8px}
  .chxCollectionPreviewNav.next{right:8px}
  .chxCollectionPreviewImageFrame img{
    max-height:calc(100vh - 170px);
  }
}


/* ============================================================
   Collection Gallery Loading, Hover Info and Series Groups
============================================================ */
.chxCollectionTabsRow{
  width:min(1480px,calc(100% - 36px));
  margin:0 auto;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.chxCollectionTabsRow .chxCollectionTabs{
  width:auto !important;
  min-width:0;
  flex:1;
  margin:0 !important;
}

.chxCollectionGroupToggle{
  flex:none;
  min-height:38px;
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  color:rgba(255,255,255,.66);
  background:rgba(255,255,255,.035);
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
  white-space:nowrap;
}
.chxCollectionGroupToggle .check{
  width:18px;
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:5px;
  color:#241305;
  background:rgba(255,255,255,.04);
  font-size:12px;
}
.chxCollectionGroupToggle.active{
  color:#ffe1a0;
  border-color:rgba(255,211,130,.38);
  background:rgba(255,184,70,.08);
}
.chxCollectionGroupToggle.active .check{
  border-color:#f4bd61;
  background:linear-gradient(135deg,#ffe7a8,#e99b35);
}

.chxCollectionGalleryHost{
  position:relative;
  width:100%;
  min-height:260px;
}

.chxCollectionGalleryLoading{
  position:absolute;
  inset:0 18px auto;
  z-index:4;
  min-height:260px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(6,7,12,.92);
  transition:opacity .18s ease,visibility .18s ease;
}
.chxCollectionGalleryLoading.show{
  opacity:1;
  visibility:visible;
}
.chxCollectionGalleryLoading strong{
  margin-top:16px;
  color:#fff;
  font-size:18px;
}
.chxCollectionGalleryLoading span{
  margin-top:5px;
  color:rgba(255,255,255,.45);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.chxCollectionGallerySpinner{
  width:42px;
  height:42px;
  border:3px solid rgba(255,255,255,.12);
  border-top-color:#f0b95e;
  border-radius:50%;
  animation:chxCollectionSpin .8s linear infinite;
}
@keyframes chxCollectionSpin{to{transform:rotate(360deg)}}

.chxRealCollectionCardGrid.isPreparing{
  opacity:0;
  visibility:hidden;
}
.chxRealCollectionCardGrid.isReady{
  animation:chxCollectionFadeIn .28s ease both;
}
@keyframes chxCollectionFadeIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

.chxRealCollectionCard,
.chxRealCollectionCard *,
.chxRealCollectionCard:hover,
.chxRealCollectionCard:hover *{
  filter:none !important;
  backdrop-filter:none;
}
.chxRealCollectionCard:hover{
  transform:translateY(-4px) scale(1.015) !important;
}
.chxRealCollectionCard:hover .chxRealCollectionImage img{
  transform:scale(1.035) !important;
  filter:none !important;
}

.chxRealCollectionHoverInfo{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  min-height:72px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:30px 14px 12px;
  opacity:0;
  transform:translateY(8px);
  color:#fff;
  text-align:left;
  background:linear-gradient(180deg,transparent,rgba(3,4,8,.92));
  transition:opacity .18s ease,transform .18s ease;
}
.chxRealCollectionCard:hover .chxRealCollectionHoverInfo,
.chxRealCollectionCard:focus-visible .chxRealCollectionHoverInfo{
  opacity:1;
  transform:none;
}
.chxRealCollectionHoverInfo strong{
  overflow:hidden;
  font-size:15px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chxRealCollectionHoverInfo em{
  margin-top:2px;
  overflow:hidden;
  color:#efc879;
  font-size:10px;
  font-style:normal;
  font-weight:800;
  letter-spacing:.06em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

.chxCollectionSeriesGroup{
  grid-column:1/-1;
  width:100%;
}
.chxCollectionSeriesTitle{
  display:grid;
  grid-template-columns:minmax(24px,1fr) auto minmax(24px,1fr);
  align-items:center;
  gap:18px;
  margin:14px 0 16px;
}
.chxCollectionSeriesTitle span{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(235,182,91,.48));
}
.chxCollectionSeriesTitle span:last-child{
  background:linear-gradient(90deg,rgba(235,182,91,.48),transparent);
}
.chxCollectionSeriesTitle strong{
  color:#f0c879;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:clamp(20px,2vw,30px);
  font-weight:600;
  letter-spacing:.08em;
  text-align:center;
  text-transform:uppercase;
}
.chxCollectionSeriesGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

@media(max-width:900px){
  .chxCollectionTabsRow{
    width:calc(100% - 20px);
    flex-direction:column;
    gap:4px;
  }
  .chxCollectionGroupToggle{
    align-self:flex-end;
    margin:0 0 10px;
  }
  .chxCollectionSeriesGrid{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:9px;
  }
}
@media(max-width:560px){
  .chxCollectionSeriesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .chxRealCollectionHoverInfo{
    opacity:1;
    transform:none;
    min-height:58px;
    padding:22px 10px 8px;
  }
}


/* CHX_COLLECTION_FINAL_REDESIGN */
.chxCollectionCompactHeader{
  width:min(1480px,calc(100% - 36px));
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  gap:16px;
}
.chxCollectionCompactHeader h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,3vw,40px);
  line-height:1;
}

.chxCollectionSeriesGrid,
.chxRealCollectionCardGrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
  gap:12px !important;
}
.chxCollectionSeriesGrid .chxRealCollectionCard,
.chxRealCollectionCardGrid .chxRealCollectionCard{
  width:auto !important;
  max-width:none !important;
  aspect-ratio:16/9 !important;
}

.chxCollectionCardPreview{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483640 !important;
  display:block !important;
  padding:0 !important;
  background:#000 !important;
}
.chxCollectionPreviewBackdrop{
  position:absolute;
  inset:0;
  background:#000;
}
.chxCollectionPreviewStage{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.chxCollectionPreviewStage img{
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  opacity:0;
  transform:translateX(24px) scale(.995);
  transition:opacity .16s ease,transform .18s ease;
}
.chxCollectionPreviewStage.slidePrevious img{
  transform:translateX(-24px) scale(.995);
}
.chxCollectionPreviewStage img.visible{
  opacity:1;
  transform:none;
}
.chxCollectionPreviewOverlayMeta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  padding:100px 24px 30px;
  color:#fff;
  text-align:center;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.84));
  pointer-events:none;
}
.chxCollectionPreviewOverlayMeta strong{
  display:block;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:clamp(32px,4vw,60px);
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
}
.chxCollectionPreviewOverlayMeta span{
  display:block;
  margin-top:8px;
  color:#e8c27d;
  font-family:"Cormorant Garamond","Playfair Display",Georgia,serif;
  font-size:clamp(18px,2vw,28px);
  letter-spacing:.08em;
}
.chxCollectionPreviewClose{
  position:absolute !important;
  top:18px !important;
  left:18px !important;
  right:auto !important;
  z-index:8 !important;
  width:48px !important;
  height:48px !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:50% !important;
  color:#fff !important;
  background:rgba(0,0,0,.52) !important;
  backdrop-filter:blur(6px);
}
.chxCollectionPreviewCounter{
  position:absolute;
  top:24px;
  right:24px;
  z-index:8;
  padding:8px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(0,0,0,.46);
  backdrop-filter:blur(6px);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}
.chxCollectionPreviewNav{
  position:absolute !important;
  top:50% !important;
  z-index:8 !important;
  width:56px !important;
  height:88px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:18px !important;
  color:#fff !important;
  background:rgba(0,0,0,.36) !important;
  backdrop-filter:blur(6px);
  transform:translateY(-50%);
}
.chxCollectionPreviewNav.previous{left:18px !important}
.chxCollectionPreviewNav.next{right:18px !important}
.chxCollectionPreviewNav:hover{
  transform:translateY(-50%) scale(1.05) !important;
  background:rgba(0,0,0,.58) !important;
}
@media(max-width:900px){
  .chxCollectionSeriesGrid,
  .chxRealCollectionCardGrid{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr)) !important;
    gap:9px !important;
  }
}
@media(max-width:560px){
  .chxCollectionCompactHeader{
    width:calc(100% - 20px);
  }
  .chxCollectionSeriesGrid,
  .chxRealCollectionCardGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .chxCollectionPreviewNav{
    width:44px !important;
    height:72px !important;
  }
  .chxCollectionPreviewNav.previous{left:8px !important}
  .chxCollectionPreviewNav.next{right:8px !important}
}


/* CHX_COLLECTION_CACHE_BUST_V2 */
.chxCollectionSeriesGrid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(220px,280px)) !important;
  justify-content:start !important;
  align-items:start !important;
  gap:12px !important;
  width:100% !important;
}
.chxCollectionSeriesGrid .chxRealCollectionCard{
  width:100% !important;
  max-width:280px !important;
  min-width:0 !important;
  aspect-ratio:16/9 !important;
}
@media(max-width:900px){
  .chxCollectionSeriesGrid{
    grid-template-columns:repeat(auto-fill,minmax(180px,240px)) !important;
  }
  .chxCollectionSeriesGrid .chxRealCollectionCard{
    max-width:240px !important;
  }
}
@media(max-width:560px){
  .chxCollectionSeriesGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .chxCollectionSeriesGrid .chxRealCollectionCard{
    max-width:none !important;
  }
}

/* CHX_COLLECTION_COMPACT_HEADER_AND_SERIES_FILTER */
body.chxHubCollectionsActive .hubContent{padding-top:12px !important;}
.chxCollectionsScreen{padding-top:0 !important;}
.chxCollectionCompactHeader{
  min-height:42px;
  margin-bottom:7px !important;
  padding-bottom:7px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.chxCollectionCompactHeader .chxSectionBack{
  min-height:32px !important;
  padding:0 10px !important;
  font-size:10px !important;
}
.chxCollectionCompactHeader h2{
  flex:1;
  font-size:clamp(20px,2vw,28px) !important;
}
.chxCollectionCompactHeader .chxCollectionGroupToggle{
  margin:0 !important;
  min-height:32px;
}
.chxCollectionTabsRow{
  align-items:center !important;
  margin-bottom:8px !important;
}
.chxCollectionTabsRow .chxCollectionTabs{padding:0 !important;}
.chxCollectionSeriesFilterWrap{position:relative;flex:none;}
.chxCollectionSeriesFilterButton{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.045);
  cursor:pointer;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.chxCollectionSeriesFilterButton:hover,.chxCollectionSeriesFilterButton.active{
  color:#ffe2a5;border-color:rgba(244,189,97,.48);background:rgba(255,184,70,.09);
}
.chxCollectionSeriesFilterButton strong{
  min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;color:#261606;background:#efbd68;font-size:10px;
}
.chxCollectionSeriesFilterButton .arrow{font-size:12px;}
.chxCollectionSeriesPopup{
  position:absolute;top:calc(100% + 8px);right:0;z-index:100;
  width:min(340px,calc(100vw - 24px));padding:12px;
  border:1px solid rgba(255,216,145,.24);border-radius:15px;
  color:#fff;background:rgba(10,11,17,.98);box-shadow:0 22px 70px rgba(0,0,0,.62);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s ease;
}
.chxCollectionSeriesPopup.show{opacity:1;visibility:visible;transform:none;}
.chxCollectionSeriesPopupHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.chxCollectionSeriesPopupHead strong{font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.chxCollectionSeriesPopupClose{width:28px;height:28px;border:0;border-radius:8px;color:#fff;background:transparent;cursor:pointer;font-size:20px;}
.chxCollectionSeriesPopupClose:hover{background:rgba(255,255,255,.08);}
.chxCollectionSeriesSearch{height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(255,255,255,.04);}
.chxCollectionSeriesSearch input{width:100%;border:0;outline:0;color:#fff;background:transparent;font:inherit;}
.chxCollectionSeriesSearch input::placeholder{color:rgba(255,255,255,.38);}
.chxCollectionSeriesOptions{max-height:300px;overflow:auto;margin:10px -4px;padding:0 4px;}
.chxCollectionSeriesOption{min-height:35px;display:flex;align-items:center;gap:9px;padding:4px 7px;border-radius:8px;cursor:pointer;font-size:12px;}
.chxCollectionSeriesOption:hover{background:rgba(255,255,255,.055);}
.chxCollectionSeriesOption input{position:absolute;opacity:0;pointer-events:none;}
.chxCollectionSeriesOption .box{width:18px;height:18px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.25);border-radius:5px;background:rgba(255,255,255,.03);}
.chxCollectionSeriesOption input:checked + .box{border-color:#f1bc62;background:linear-gradient(135deg,#ffe7a8,#e99b35);}
.chxCollectionSeriesOption input:checked + .box::after{content:'✓';color:#241305;font-size:12px;font-weight:1000;}
.chxCollectionSeriesNoResult{padding:22px;text-align:center;color:rgba(255,255,255,.42);font-size:12px;}
.chxCollectionSeriesActions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;padding-top:10px;border-top:1px solid rgba(255,255,255,.09);}
.chxCollectionSeriesActions button{min-height:34px;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:rgba(255,255,255,.72);background:rgba(255,255,255,.04);cursor:pointer;font-size:10px;font-weight:900;}
.chxCollectionSeriesActions button:hover{color:#fff;background:rgba(255,255,255,.08);}
.chxCollectionSeriesActions button.apply{color:#261606;border-color:#e9af50;background:linear-gradient(135deg,#ffe5a1,#e59a35);}
.chxRealCollectionNumber{display:none !important;}
.chxRealCollectionCardGrid{padding-top:0 !important;}
.chxCollectionSeriesTitle{margin-top:8px !important;margin-bottom:10px !important;}
@media(max-width:900px){
  .chxCollectionCompactHeader{flex-wrap:wrap;gap:8px;}
  .chxCollectionCompactHeader h2{order:2;flex:1 1 calc(100% - 90px);}
  .chxCollectionCompactHeader .chxCollectionGroupToggle{order:3;margin-left:auto !important;}
  .chxCollectionTabsRow{flex-direction:row !important;align-items:flex-start !important;}
}
@media(max-width:560px){
  .chxCollectionCompactHeader .chxCollectionGroupToggle{width:100%;justify-content:center;}
  .chxCollectionSeriesFilterButton{min-height:34px;padding:0 10px;}
}

/* 2026-07-29 — denser game-style licence selector */
body.chxHubSeriesActive .seriesGrid,
body.chxHubSeriesActive #seriesGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:clamp(12px,1.15vw,22px)!important;
  padding:clamp(14px,1.4vw,26px)!important;
  align-content:start!important;
}
body.chxHubSeriesActive .seriesCard{
  position:relative!important;
  min-height:0!important;
  aspect-ratio:16/7!important;
  overflow:hidden!important;
  border:1px solid rgba(77,211,242,.34)!important;
  border-radius:0!important;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)!important;
  background:#03101a!important;
  box-shadow:0 18px 42px rgba(0,0,0,.24)!important;
  opacity:0;
  animation:chxSeriesTileArrival .58s cubic-bezier(.16,.78,.24,1) both;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease!important;
}
body.chxHubSeriesActive .seriesCard:nth-child(3n+2){animation-delay:.06s}
body.chxHubSeriesActive .seriesCard:nth-child(3n+3){animation-delay:.12s}
body.chxHubSeriesActive .seriesCard:hover{
  transform:translateY(-7px) scale(1.012)!important;
  border-color:#57e5ff!important;
  box-shadow:0 24px 55px rgba(0,0,0,.34),0 0 25px rgba(80,221,255,.17)!important;
}
body.chxHubSeriesActive .seriesCover{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .3s ease!important;
}
body.chxHubSeriesActive .seriesCard:hover .seriesCover{transform:scale(1.055)!important;filter:saturate(1.08) brightness(1.05)!important}
body.chxHubSeriesActive .seriesInfo{
  position:absolute!important;
  inset:0!important;
  padding:0!important;
  background:linear-gradient(0deg,rgba(1,7,12,.94),rgba(1,7,12,.04) 64%)!important;
  pointer-events:none;
}
body.chxHubSeriesActive .seriesBottomRow{
  position:absolute!important;
  left:clamp(16px,1.3vw,26px)!important;
  right:clamp(16px,1.3vw,26px)!important;
  bottom:clamp(14px,1vw,20px)!important;
  display:flex!important;
  align-items:end!important;
  gap:14px!important;
}
body.chxHubSeriesActive .seriesName{
  display:block!important;
  color:#fff!important;
  font-size:clamp(17px,1.45vw,27px)!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  text-shadow:0 3px 12px #000!important;
}
body.chxHubSeriesActive .seriesCount{
  margin-left:auto!important;
  padding:6px 9px!important;
  color:#071018!important;
  background:#61e3fa!important;
  font-size:clamp(8px,.6vw,11px)!important;
  white-space:nowrap!important;
}
@keyframes chxSeriesTileArrival{
  from{opacity:0;transform:translateY(34px) scale(.96)}
  to{opacity:1;transform:none}
}
@media(min-width:2300px){
  body.chxHubSeriesActive .seriesGrid,
  body.chxHubSeriesActive #seriesGrid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:1150px){
  body.chxHubSeriesActive .seriesGrid,
  body.chxHubSeriesActive #seriesGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  body.chxHubSeriesActive .seriesGrid,
  body.chxHubSeriesActive #seriesGrid{grid-template-columns:1fr!important}
}

/* Cards binder archive */
body.chxHubCollectionsActive > .app{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background-color:#030712!important;
  background-image:
    linear-gradient(180deg,rgba(2,7,15,.16),rgba(2,6,13,.38)),
    url("assets/images/cards/cards-japanese-moon-garden-bg-v1.png")!important;
  background-position:center top!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
body.chxHubCollectionsActive #content{background:transparent!important}
body.chxCardsViewerOpen{overflow:hidden!important}
.chxCardsScreen{
  width:100%;
  max-width:none;
  min-height:100%;
  margin:0;
  padding:clamp(10px,.8vw,17px) clamp(12px,1vw,20px) 48px;
  color:#f5fbff;
  background:transparent;
}
.chxCardsHeader{
  display:grid;
  grid-template-columns:auto auto minmax(130px,1fr) minmax(210px,290px) auto auto auto;
  align-items:center;
  gap:clamp(10px,1vw,20px);
  padding:0 0 11px;
  border-bottom:1px solid rgba(97,218,239,.25);
}
.chxMarkAllRead{
  min-height:38px;
  padding:0 14px;
  border:1px solid rgba(99,226,250,.36);
  border-radius:20px;
  color:#bcecf6;
  background:rgba(3,16,28,.7);
  box-shadow:inset 0 0 16px rgba(80,212,242,.05);
  font:900 8px/1 Arial,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  cursor:pointer;
  transition:.2s ease;
}
.chxMarkAllRead:hover,
.chxMarkAllRead:focus-visible{
  outline:0;
  color:#05131a;
  border-color:#66e6ff;
  background:#66e6ff;
  box-shadow:0 0 20px rgba(102,230,255,.2);
}
.chxCardsMarkAllRead{justify-self:end}
.chxCardsTitle{display:flex;align-items:center}
.chxCardsTitle h2{margin:0;font:900 clamp(34px,2.7vw,52px)/.86 Arial,sans-serif;letter-spacing:.09em}
.chxCardsCollectionProgress{
  justify-self:end;
  display:flex;
  align-items:baseline;
  gap:7px;
  min-height:44px;
  padding:8px 14px;
  border:1px solid rgba(99,226,250,.34);
  border-radius:8px;
  color:#91a8b2;
  background:rgba(3,14,25,.58);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
  font:800 15px/1 Arial,sans-serif;
  backdrop-filter:blur(10px);
}
.chxCardsCollectionProgress strong{color:#69e8ff;font-size:28px}
.chxCardsCollectionProgress i{color:#526974;font-style:normal}
.chxCardsCollectionProgress span{font-size:16px}
.chxCardsCollectionProgress small{margin-right:3px;color:#c0d0d7;font:900 9px/1 Arial,sans-serif;letter-spacing:.14em}
.chxCardsSearch{
  width:100%;
  max-width:290px;
  height:42px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 16px;
  border:1px solid rgba(96,218,240,.34);
  border-radius:3px;
  background:rgba(3,13,25,.82);
  box-shadow:inset 0 0 22px rgba(70,199,226,.035),0 12px 35px rgba(0,0,0,.18);
}
.chxCardsSearch:focus-within{border-color:#62e4fb;box-shadow:0 0 0 2px rgba(98,228,251,.09)}
.chxCardsSearch span{color:#62e4fb;font-size:21px}
.chxCardsSearch input{min-width:0;flex:1;border:0;outline:0;color:#fff;background:transparent;font:800 12px/1 Arial,sans-serif}
.chxCardsSearch input::placeholder{color:#829aa5}
.chxCardsVariantTabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:none;
  gap:3px;
  min-width:194px;
  padding:3px;
  overflow:visible;
  border:1px solid rgba(87,196,221,.3);
  border-radius:24px;
  background:rgba(2,13,23,.62);
  box-shadow:inset 0 0 18px rgba(0,0,0,.25);
}
.chxCardsCollectionFilters{display:flex;align-items:center;gap:7px;min-width:0;overflow:auto;scrollbar-width:none}
.chxCardsVariantTabs::-webkit-scrollbar,.chxCardsCollectionFilters::-webkit-scrollbar{display:none}
.chxCardsVariantTabs button{
  min-width:0;
  min-height:34px;
  padding:0 15px;
  border:0;
  border-radius:18px;
  color:#8faab5;
  background:transparent;
  font:900 8px/1 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color .2s ease,background .24s ease,box-shadow .24s ease,transform .24s ease;
}
.chxCardsCollectionFilters button{
  flex:none;
  min-height:36px;
  padding:0 15px;
  border:1px solid rgba(84,185,211,.28);
  border-radius:20px;
  color:#93adb7;
  background:rgba(3,14,25,.76);
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  cursor:pointer;
  transition:.18s ease;
}
.chxCardsVariantTabs button:hover,.chxCardsCollectionFilters button:hover{color:#fff;border-color:rgba(98,228,251,.68)}
.chxCardsVariantTabs button.active{
  color:#031017;
  background:#62e4fb;
  box-shadow:0 0 18px rgba(98,228,251,.2);
}
.chxCardsCollectionFilters button.active{
  color:#031017;
  border-color:#62e4fb;
  background:#62e4fb;
  box-shadow:0 0 18px rgba(98,228,251,.18);
}
.chxCardsGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:clamp(14px,1.15vw,22px);
  align-items:start;
  padding-top:clamp(12px,1vw,20px);
}
.chxCardsTile{
  position:relative;
  min-width:0;
  aspect-ratio:16/9;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  clip-path:none;
  color:#fff;
  background:transparent;
  box-shadow:none;
  text-align:left;
  cursor:pointer;
  animation:none;
  transition:none;
}
.chxCardsTile:hover,.chxCardsTile:focus-visible{
  z-index:3;
  transform:none;
  outline:0;
  filter:none;
}
.chxCardsTileArt{position:absolute;display:block;inset:0;overflow:visible;border-radius:0;background:transparent}
.chxCardsTileArt::after{display:none}
.chxCardsTileArt img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform-origin:center;
  filter:drop-shadow(1px 0 0 #010204) drop-shadow(-1px 0 0 #010204) drop-shadow(0 1px 0 #010204) drop-shadow(0 -1px 0 #010204);
  transition:filter .26s ease,transform .34s cubic-bezier(.18,.72,.2,1);
  will-change:filter,transform;
}
.chxCardsTile:hover .chxCardsTileArt img,.chxCardsTile:focus-visible .chxCardsTileArt img{transform:scale(1.045)}
.chxCardsTile:not(.isLocked):hover .chxCardsTileArt img,.chxCardsTile:not(.isLocked):focus-visible .chxCardsTileArt img{
  filter:brightness(1.12) saturate(1.09) drop-shadow(1px 0 0 #010204) drop-shadow(-1px 0 0 #010204) drop-shadow(0 1px 0 #010204) drop-shadow(0 -1px 0 #010204) drop-shadow(0 11px 15px rgba(28,103,133,.38));
}
.chxCardsTile.isSignature .chxCardsTileArt{background:transparent}
.chxCardsTile.isSignature .chxCardsTileArt img{object-fit:cover;padding:0}
.chxCardsTile.isLocked .chxCardsTileArt img{
  filter:brightness(0) saturate(0) contrast(1.35) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
  opacity:.97;
}
.chxCardsTile.isLocked:hover .chxCardsTileArt img,.chxCardsTile.isLocked:focus-visible .chxCardsTileArt img{
  filter:brightness(0) saturate(0) contrast(1.35) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000) drop-shadow(0 8px 13px rgba(72,192,222,.2));
}
.chxCardsTileLock{
  position:absolute;
  z-index:3;
  left:50%;
  top:45%;
  width:34px;
  height:40px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  color:#73e9ff;
  filter:drop-shadow(0 0 13px rgba(93,226,250,.55));
}
.chxCardsTileLock svg,.chxCardsViewerLock svg{
  width:100%;
  height:100%;
  display:block;
  fill:rgba(4,13,23,.8);
  stroke:currentColor;
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.chxCardsTileMeta{
  position:absolute;
  z-index:4;
  left:15px;
  right:15px;
  bottom:13px;
  display:block;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.chxCardsTile:hover .chxCardsTileMeta,.chxCardsTile:focus-visible .chxCardsTileMeta{opacity:1;transform:none}
.chxCardsTileMeta strong,.chxCardsTileMeta em{display:block}
.chxCardsTileMeta strong{max-width:92%;overflow:hidden;color:#fff;font:900 clamp(12px,1vw,16px)/1.05 Arial,sans-serif;letter-spacing:.045em;text-overflow:ellipsis;text-shadow:0 2px 5px #02070d,0 0 12px rgba(2,7,13,.9);text-transform:uppercase;white-space:nowrap}
.chxCardsTileMeta em{margin-top:5px;overflow:hidden;color:#d5e5eb;font:800 8px/1 Arial,sans-serif;font-style:normal;text-overflow:ellipsis;text-shadow:0 2px 4px #02070d,0 0 10px rgba(2,7,13,.9);text-transform:uppercase;white-space:nowrap}
.chxCardsViewerVariants i svg,.chxCardsViewerFullArt i svg{width:14px;height:16px;display:block;fill:none;stroke:currentColor;stroke-width:3}
.chxCardsEmpty{grid-column:1/-1;min-height:clamp(270px,38vh,480px);display:grid;place-content:center;text-align:center;color:#849ba6}
.chxCardsEmpty strong{color:#fff;font:900 22px/1 Arial,sans-serif}.chxCardsEmpty span{margin-top:11px;font-size:12px}
@keyframes chxCardTileIn{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}

.chxCardsViewer{position:fixed;z-index:2500;inset:0;display:grid;visibility:hidden;opacity:0;outline:0;transition:opacity .24s ease,visibility .24s ease}
.chxCardsViewer.show{visibility:visible;opacity:1}
@media(min-width:1281px){
  .chxCardsViewer:not(.fullArtMode){left:116px}
}
@media(min-width:1041px) and (max-width:1280px){
  .chxCardsViewer:not(.fullArtMode){left:86px}
}
.chxCardsViewerShade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(1,5,12,.48),rgba(3,5,13,.68)),
    url("assets/images/cards/cards-japanese-moon-garden-bg-v1.png") center/cover;
  filter:saturate(.82);
}
.chxCardsViewerPanel{
  --chx-cards-tray-height:clamp(108px,15vh,154px);
  --chx-cards-tray-width-space:clamp(192px,26.6667vh,274px);
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  grid-template-rows:58px minmax(0,1fr);
  padding:6px clamp(8px,.8vw,16px) 0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.chxCardsViewerHeader{
  position:relative;
  z-index:18;
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(220px,1.35fr) auto minmax(130px,1fr);
  align-items:center;
  gap:clamp(10px,1.1vw,22px);
  padding:0 3px 6px;
  border:0;
}
.chxCardsViewerClose{
  position:static;
  justify-self:start;
  width:auto;
  height:38px;
  display:flex!important;
  align-items:center;
  gap:10px;
  padding:0 16px!important;
  border:1px solid rgba(99,224,247,.35);
  border-radius:22px;
  color:#dffaff;
  background:rgba(3,16,28,.76);
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:.1em;
  cursor:pointer;
}
.chxCardsViewerClose:hover{border-color:#65e4fb;color:#fff;background:rgba(12,35,50,.9)}
.chxCardsViewerClose span{color:#65e4fb;font-size:17px}
.chxCardsViewerIdentity{text-align:center}
.chxCardsViewerIdentity span{color:#67e7ff;font:900 8px/1 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.chxCardsViewerIdentity h2{margin:4px 0 0;font:900 clamp(20px,1.55vw,31px)/1 Arial,sans-serif;letter-spacing:.075em;text-transform:uppercase}
.chxCardsViewerCounter{justify-self:end;display:flex;align-items:baseline;gap:8px;color:#8299a4;font:800 13px/1 Arial,sans-serif}
.chxCardsViewerCounter small{margin-right:4px;color:#6f8994;font:900 8px/1 Arial,sans-serif;letter-spacing:.18em}
.chxCardsViewerCounter strong{color:#d5ba71;font-size:22px}.chxCardsViewerCounter i{font-style:normal;color:#516873}.chxCardsViewerCounter span{font-size:13px}
.chxCardsViewerBody{
  min-height:0;
  display:grid;
  grid-template-columns:clamp(38px,3.5vw,68px) minmax(0,1fr) clamp(38px,3.5vw,68px);
  align-items:center;
  gap:2px;
  padding-bottom:var(--chx-cards-tray-height);
  transition:padding-bottom .42s cubic-bezier(.2,.72,.2,1);
}
.chxCardsViewerBody.hasFullArtAction{
  grid-template-columns:clamp(38px,3.5vw,68px) minmax(0,1fr) clamp(94px,7vw,124px) clamp(38px,3.5vw,68px);
  gap:clamp(4px,.55vw,11px);
}
.chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerBody{padding-bottom:0}
.chxCardsViewerStage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:0;overflow:visible}
.chxCardsViewerCardFrame{
  position:relative;
  width:min(100%,calc(177.7778vh - 113.78px - var(--chx-cards-tray-width-space)),1850px);
  aspect-ratio:16/9;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform-origin:center;
  transition:width .42s cubic-bezier(.2,.72,.2,1);
}
.chxCardsViewerStage .chxCardsViewerCardFrame{max-width:100%}
.chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerCardFrame{width:min(100%,calc(177.7778vh - 113.78px),1850px)}
.chxCardsViewerCardFrame>img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  transform:scale(var(--chx-card-zoom,1));
  transform-origin:center;
  filter:drop-shadow(1px 0 0 #010204) drop-shadow(-1px 0 0 #010204) drop-shadow(0 1px 0 #010204) drop-shadow(0 -1px 0 #010204);
  transition:transform .18s ease,filter .22s ease;
}
.chxCardsViewerPanel[data-variant="standard"] .chxCardsViewerCardFrame,
.chxCardsViewerPanel[data-variant="signature"] .chxCardsViewerCardFrame{cursor:pointer}
.chxCardsViewerCardFrame>.chxCardsViewerPrimaryImage{position:relative;z-index:2}
@property --chx-card-reveal{
  syntax:"<percentage>";
  inherits:false;
  initial-value:-24%;
}
.chxCardsViewerCardFrame>.chxCardsViewerTransformLayer{
  --chx-card-reveal:-24%;
  position:absolute;
  z-index:3;
  inset:0;
  opacity:1;
  pointer-events:none;
  clip-path:none;
  -webkit-clip-path:none;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,
    #000 0%,
    #000 calc(var(--chx-card-reveal) - 25%),
    rgba(0,0,0,.92) calc(var(--chx-card-reveal) - 19%),
    rgba(0,0,0,.73) calc(var(--chx-card-reveal) - 13%),
    rgba(0,0,0,.47) calc(var(--chx-card-reveal) - 8%),
    rgba(0,0,0,.22) calc(var(--chx-card-reveal) - 3%),
    rgba(0,0,0,.06) calc(var(--chx-card-reveal) + 1%),
    transparent calc(var(--chx-card-reveal) + 4%));
  mask-image:radial-gradient(circle at 50% 50%,
    #000 0%,
    #000 calc(var(--chx-card-reveal) - 25%),
    rgba(0,0,0,.92) calc(var(--chx-card-reveal) - 19%),
    rgba(0,0,0,.73) calc(var(--chx-card-reveal) - 13%),
    rgba(0,0,0,.47) calc(var(--chx-card-reveal) - 8%),
    rgba(0,0,0,.22) calc(var(--chx-card-reveal) - 3%),
    rgba(0,0,0,.06) calc(var(--chx-card-reveal) + 1%),
    transparent calc(var(--chx-card-reveal) + 4%));
  backface-visibility:hidden;
  transform:translateZ(0);
  will-change:mask-image,-webkit-mask-image;
}
.chxCardsViewerCardFrame.isVariantDissolve{
  --chx-reveal-accent:rgba(255,188,226,.95);
  --chx-reveal-secondary:rgba(255,225,151,.94);
}
.chxCardsViewerCardFrame.isVariantDissolve.isRestoringVariant{
  --chx-reveal-accent:rgba(105,232,255,.96);
  --chx-reveal-secondary:rgba(255,218,135,.94);
}
.chxCardsViewerCardFrame.isVariantDissolve::before,
.chxCardsViewerCardFrame.isVariantDissolve::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:0;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
}
.chxCardsViewerCardFrame.isVariantDissolve::before{
  background:radial-gradient(circle at 50% 50%,
    transparent 0 24%,
    var(--chx-reveal-accent) 26%,
    var(--chx-reveal-secondary) 27%,
    transparent 30%);
  filter:none;
  transform:scale(.18);
}
.chxCardsViewerCardFrame.isVariantDissolve::after{
  inset:auto;
  left:50%;
  top:50%;
  width:6px;
  height:6px;
  margin:-3px 0 0 -3px;
  border-radius:50%;
  background:#fff;
  box-shadow:
    -168px -82px 0 2px var(--chx-reveal-accent),
    -92px 104px 0 1px var(--chx-reveal-secondary),
    2px -126px 0 2px rgba(255,255,255,.96),
    126px -72px 0 1px var(--chx-reveal-accent),
    166px 36px 0 2px rgba(255,255,255,.94),
    82px 108px 0 2px var(--chx-reveal-secondary),
    -152px 42px 0 1px rgba(255,255,255,.94),
    28px 82px 0 1px var(--chx-reveal-accent);
  filter:none;
  transform:scale(.38) rotate(-4deg);
}
.chxCardsViewerCardFrame.isDissolveRunning>.chxCardsViewerTransformLayer{animation:chxCardCenterReveal 1.22s cubic-bezier(.18,.60,.18,1) both}
.chxCardsViewerCardFrame.isDissolveRunning::before{animation:none;opacity:0}
.chxCardsViewerCardFrame.isDissolveRunning::after{animation:chxCardPremiumParticles 1.22s cubic-bezier(.18,.60,.18,1) both}
.chxCardsViewerStage.isFullArt .chxCardsViewerCardFrame{overflow:hidden;cursor:zoom-in}
.chxCardsViewerStage.isLocked .chxCardsViewerCardFrame>img{
  filter:brightness(0) saturate(0) contrast(1.35) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
  opacity:.97;
}
.chxCardsViewerLock{position:absolute;z-index:3;left:50%;top:50%;width:68px;height:78px;display:grid;place-items:center;transform:translate(-50%,-50%);color:#70e8ff;filter:drop-shadow(0 0 25px rgba(98,228,251,.55))}
.chxCardsViewerLock b{position:absolute;top:calc(100% + 11px);font:900 9px/1 Arial,sans-serif;letter-spacing:.2em}
.chxCardsViewerZoom{position:absolute;z-index:4;right:12px;top:12px;padding:8px 10px;border-radius:16px;color:#dffaff;background:rgba(2,11,20,.68);font:800 10px/1 Arial,sans-serif;backdrop-filter:blur(9px)}
.chxCardsViewerZoom b{color:#69e8ff}.chxCardsViewerZoom small{margin-left:7px;color:#829ba6;font:900 7px/1 Arial,sans-serif;letter-spacing:.1em}
.chxCardsViewerArrow{
  justify-self:center;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(102,226,249,.3);
  border-radius:50%;
  color:#d9f8ff;
  background:rgba(3,15,27,.68);
  font:900 18px/1 Arial,sans-serif;
  cursor:pointer;
  transition:.18s ease;
}
.chxCardsViewerArrow small{display:none}
.chxCardsViewerArrow:hover:not(:disabled){color:#031017;border-color:#66e6ff;background:#66e6ff;transform:scale(1.04)}
.chxCardsViewerArrow:disabled{opacity:.22;cursor:default}
.chxCardsViewerVariants{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3px;
  min-width:220px;
  padding:3px;
  border:1px solid rgba(100,226,250,.3);
  border-radius:23px;
  background:rgba(2,13,23,.68);
  box-shadow:inset 0 0 18px rgba(0,0,0,.28);
}
.chxCardsViewerVariants button{position:relative;min-width:0;height:34px;padding:0 18px;border:0;border-radius:18px;color:#94adb7;background:transparent;font:900 8px/1 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:.22s ease}
.chxCardsViewerVariants button:hover{color:#fff}
.chxCardsViewerVariants button.active{color:#031017;background:#66e6ff;box-shadow:0 0 18px rgba(102,230,255,.2)}
.chxCardsViewerVariants i{position:absolute;right:10px;top:7px;color:#ff78b4;font-style:normal}
.chxCardsViewerTray{
  position:absolute;
  z-index:14;
  right:0;
  bottom:0;
  left:0;
  height:var(--chx-cards-tray-height);
  transition:height .42s cubic-bezier(.2,.72,.2,1);
}
.chxCardsViewerTrayContent{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:11px clamp(18px,2vw,36px) 13px;
  border-top:1px solid rgba(101,226,250,.28);
  background:linear-gradient(180deg,rgba(3,15,25,.62),rgba(2,8,15,.82));
  box-shadow:0 -14px 34px rgba(0,0,0,.3);
  backdrop-filter:blur(18px) saturate(1.15);
  transition:transform .42s cubic-bezier(.2,.72,.2,1),opacity .3s ease;
}
.chxCardsViewerTrayScroller{
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:clamp(8px,.8vw,14px);
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(102,230,255,.48) transparent;
  scroll-behavior:smooth;
}
.chxCardsViewerThumbnail{
  position:relative;
  flex:0 0 clamp(126px,10vw,190px);
  aspect-ratio:16/9;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:4px;
  background:transparent;
  opacity:.52;
  cursor:pointer;
  transition:opacity .2s ease,transform .22s ease,filter .22s ease;
}
.chxCardsViewerThumbnail img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(1px 0 0 #010204) drop-shadow(-1px 0 0 #010204) drop-shadow(0 1px 0 #010204) drop-shadow(0 -1px 0 #010204)}
.chxCardsViewerThumbnail:hover{opacity:.88;transform:translateY(-3px)}
.chxCardsViewerThumbnail.active{opacity:1;transform:translateY(-4px);filter:drop-shadow(0 0 12px rgba(102,230,255,.45))}
.chxCardsViewerThumbnail.isLocked img{filter:brightness(0) saturate(0) contrast(1.35) drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)}
.chxCardsViewerThumbnail>i{position:absolute;left:50%;top:50%;width:22px;height:26px;transform:translate(-50%,-50%);color:#6be8ff}
.chxCardsViewerThumbnail>i svg{width:100%;height:100%;fill:rgba(3,12,20,.76);stroke:currentColor;stroke-width:3}
.chxCardsViewerTrayToggle{
  position:absolute;
  z-index:16;
  top:-16px;
  left:50%;
  width:68px;
  height:31px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(102,230,255,.38);
  border-bottom:0;
  color:#66e6ff;
  background:rgba(3,15,25,.82);
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%,0 10px);
  cursor:pointer;
  transform:translateX(-50%);
  backdrop-filter:blur(12px);
  transition:top .42s cubic-bezier(.2,.72,.2,1);
}
.chxCardsViewerTrayToggle span{width:11px;height:11px;border-top:2px solid currentColor;border-left:2px solid currentColor;transform:translateY(-3px) rotate(225deg);transition:transform .42s cubic-bezier(.2,.72,.2,1)}
.chxCardsViewerTray.isCollapsed{height:0}
.chxCardsViewerTray.isCollapsed .chxCardsViewerTrayContent{opacity:0;transform:translateY(100%);pointer-events:none}
.chxCardsViewerTray.isCollapsed .chxCardsViewerTrayToggle{top:-31px}
.chxCardsViewerTray.isCollapsed .chxCardsViewerTrayToggle span{transform:translateY(3px) rotate(45deg)}
.chxCardsViewerFullArt{
  position:relative;
  align-self:center;
  justify-self:center;
  width:clamp(94px,7vw,124px);
  min-width:0;
  height:clamp(138px,21vh,224px);
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(211,184,112,.44);
  border-radius:0;
  color:#d8c48e;
  background:linear-gradient(145deg,rgba(31,26,31,.9),rgba(12,11,18,.94));
  cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
}
.chxCardsViewerFullArt:hover{color:#100d08;border-color:#e0c57c;background:#dfc276;box-shadow:0 0 28px rgba(217,189,114,.25);transform:scale(1.035)}
.chxCardsFullArtEyeIcon{width:clamp(46px,3.7vw,64px);height:auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 12px rgba(216,196,142,.18));transition:transform .22s ease,filter .22s ease}
.chxCardsFullArtEyeGlint{fill:currentColor;stroke:none}
.chxCardsViewerFullArt:hover .chxCardsFullArtEyeIcon{transform:scale(1.08);filter:drop-shadow(0 0 12px rgba(16,13,8,.22))}
.chxCardsViewerFullArt i{position:absolute;right:7px;top:7px;color:#ff78b4;font-style:normal}
.chxCardsViewerFullArt i svg{width:18px;height:21px}

.chxCardsViewer.fullArtMode{z-index:50000;background:#010307}
.chxCardsFullArtView{position:fixed;z-index:1;inset:0;display:grid;place-items:center;overflow:hidden;background:#010307}
.chxCardsFullArtBackdrop{position:absolute;z-index:0;inset:-5%;overflow:hidden;background:#010307}
.chxCardsFullArtBackdrop::after{content:"";position:absolute;inset:0;background:rgba(1,3,7,.28)}
.chxCardsFullArtBackdrop>img{width:100%;height:100%;display:block;object-fit:cover;filter:blur(34px) brightness(.52) saturate(.82);transform:scale(1.12)}
.chxCardsFullArtStage{position:absolute;z-index:2;inset:0;display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
.chxCardsFullArtStage>.chxCardsFullArtImage{
  width:auto;
  height:100%;
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
  transform:scale(var(--chx-card-zoom,1));
  transform-origin:center;
  transition:transform .16s ease-out;
  user-select:none;
}
.chxCardsFullArtStage.isLocked>img{filter:saturate(.42) brightness(.5) contrast(.95)}
.chxCardsFullArtStage .chxCardsViewerLock{z-index:3}
.chxCardsFullArtTray{--chx-full-art-tray-height:clamp(116px,17vh,170px);position:fixed;z-index:7;right:0;bottom:0;left:0;height:var(--chx-full-art-tray-height);transition:height .42s cubic-bezier(.2,.72,.2,1)}
.chxCardsFullArtTrayContent{position:absolute;inset:0;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:clamp(9px,1vw,18px);padding:12px clamp(18px,2.4vw,46px) 14px;border-top:1px solid rgba(101,226,250,.28);background:linear-gradient(180deg,rgba(3,15,25,.6),rgba(2,8,15,.86));box-shadow:0 -16px 38px rgba(0,0,0,.32);backdrop-filter:blur(18px) saturate(1.12);transition:transform .42s cubic-bezier(.2,.72,.2,1),opacity .3s ease}
.chxCardsFullArtTrayScroller{min-width:0;height:100%;display:flex;align-items:center;gap:clamp(9px,.9vw,16px);overflow-x:auto;overflow-y:hidden;padding:3px 5px;scrollbar-width:thin;scrollbar-color:rgba(102,230,255,.48) transparent;scroll-behavior:smooth}
.chxCardsFullArtThumbnail{position:relative;flex:0 0 clamp(132px,11vw,205px);aspect-ratio:16/9;padding:0;overflow:hidden;border:1px solid transparent;border-radius:3px;background:rgba(2,10,17,.62);opacity:.5;cursor:pointer;transition:opacity .2s ease,transform .22s ease,border-color .22s ease,filter .22s ease}
.chxCardsFullArtThumbnail img{width:100%;height:100%;display:block;object-fit:contain}
.chxCardsFullArtThumbnail:hover{opacity:.9;transform:translateY(-3px)}
.chxCardsFullArtThumbnail.active{opacity:1;border-color:rgba(103,231,255,.72);transform:translateY(-4px);filter:drop-shadow(0 0 13px rgba(102,230,255,.42))}
.chxCardsFullArtTrayArrow{width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid rgba(102,226,249,.34);border-radius:50%;color:#d9f8ff;background:rgba(3,15,27,.72);font:900 18px/1 Arial,sans-serif;cursor:pointer;transition:.18s ease}
.chxCardsFullArtTrayArrow:hover:not(:disabled){color:#031017;border-color:#66e6ff;background:#66e6ff;transform:scale(1.04)}
.chxCardsFullArtTrayArrow:disabled{opacity:.24;cursor:default}
.chxCardsFullArtTrayToggle{top:-16px}
.chxCardsFullArtTray.isCollapsed{height:0}
.chxCardsFullArtTray.isCollapsed .chxCardsFullArtTrayContent{opacity:0;transform:translateY(100%);pointer-events:none}
.chxCardsFullArtTray.isCollapsed .chxCardsFullArtTrayToggle{top:-31px}
.chxCardsFullArtTray.isCollapsed .chxCardsFullArtTrayToggle span{transform:translateY(3px) rotate(45deg)}
.chxCardsFullArtClose{
  position:fixed;
  z-index:8;
  top:clamp(16px,2vw,30px);
  right:clamp(16px,2vw,30px);
  width:clamp(58px,4.3vw,72px);
  height:clamp(58px,4.3vw,72px);
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid rgba(110,229,250,.52)!important;
  border-radius:0!important;
  color:#eafbff!important;
  background:rgba(3,15,25,.86)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.38),inset 0 0 24px rgba(96,224,249,.04)!important;
  font:300 clamp(34px,3vw,48px)/1 Arial,sans-serif!important;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease;
}
.chxCardsFullArtClose:hover,.chxCardsFullArtClose:focus-visible{outline:0!important;color:#06131a!important;border-color:#6de8ff!important;background:#6de8ff!important;transform:scale(1.035)}
@keyframes chxCardTransformOut{
  to{opacity:0;transform:perspective(1300px) rotateY(13deg) scale(.93);filter:blur(9px) saturate(1.35)}
}
@keyframes chxCardCenterReveal{
  from{--chx-card-reveal:-24%}
  to{--chx-card-reveal:126%}
}
@keyframes chxCardRevealRing{
  0%{opacity:0;transform:scale(.14)}
  22%{opacity:.5}
  74%{opacity:.25}
  100%{opacity:0;transform:scale(2.55)}
}
@keyframes chxCardPremiumParticles{
  0%{opacity:0;transform:scale(.34) rotate(-5deg)}
  24%{opacity:.72}
  72%{opacity:.55}
  100%{opacity:0;transform:scale(1.18) rotate(3deg)}
}
@keyframes chxCardTransformIn{
  from{opacity:0;transform:perspective(1300px) rotateY(-15deg) scale(1.045);filter:blur(10px) saturate(1.4)}
  55%{opacity:1}
  to{opacity:1;transform:none;filter:none}
}
@keyframes chxCardSlideNext{from{opacity:0;transform:translateX(6vw) scale(.97)}to{opacity:1;transform:none}}
@keyframes chxCardSlidePrevious{from{opacity:0;transform:translateX(-6vw) scale(.97)}to{opacity:1;transform:none}}
.chxCardsViewerCardFrame.isTransformingOut{animation:chxCardTransformOut .2s ease-in both}
.chxCardsViewerCardFrame.isTransformingIn{animation:chxCardTransformIn .42s cubic-bezier(.16,.78,.24,1) both}
.chxCardsViewerCardFrame.isSlidingNext{animation:chxCardSlideNext .32s cubic-bezier(.16,.78,.24,1) both}
.chxCardsViewerCardFrame.isSlidingPrevious{animation:chxCardSlidePrevious .32s cubic-bezier(.16,.78,.24,1) both}
@media(max-width:1040px){
  .chxCardsSearch{max-width:230px}
  .chxCardsVariantTabs{min-width:176px}
  .chxCardsViewerPanel{grid-template-rows:94px minmax(0,1fr)}
  .chxCardsViewerHeader{grid-template-columns:auto minmax(180px,1fr) auto;grid-template-rows:44px 40px}
  .chxCardsViewerClose{grid-column:1;grid-row:1}
  .chxCardsViewerIdentity{grid-column:2;grid-row:1;text-align:center}
  .chxCardsViewerCounter{grid-column:3;grid-row:1}
  .chxCardsViewerVariants{grid-column:1/-1;grid-row:2;justify-self:center}
  .chxCardsViewerCardFrame{width:min(100%,calc(177.7778vh - 177.78px - var(--chx-cards-tray-width-space)))}
  .chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerCardFrame{width:min(100%,calc(177.7778vh - 177.78px))}
  .chxCardsViewerBody.hasFullArtAction{grid-template-columns:42px minmax(0,1fr) 92px 42px}
}
@media(max-width:900px){
  .chxCardsHeader{grid-template-columns:auto auto minmax(170px,1fr) auto auto}
  .chxCardsTitle{grid-column:1;grid-row:1}
  .chxCardsVariantTabs{grid-column:2;grid-row:1}
  .chxCardsSearch{grid-column:3;grid-row:1;max-width:none}
  .chxCardsCollectionProgress{grid-column:4;grid-row:1}
  .chxCardsMarkAllRead{grid-column:5;grid-row:1}
  .chxCardsCollectionFilters{grid-column:1/-1;grid-row:2}
}
@media(max-width:720px){
  .chxCardsScreen{padding:12px 10px 28px}
  .chxCardsHeader{grid-template-columns:auto minmax(140px,1fr) auto auto;gap:9px}
  .chxCardsTitle{grid-column:1;grid-row:1}
  .chxCardsSearch{grid-column:2;grid-row:1}
  .chxCardsCollectionProgress{grid-column:3;grid-row:1;min-height:38px;padding:6px 9px}
  .chxCardsMarkAllRead{grid-column:4;grid-row:1;padding:0 10px;font-size:7px}
  .chxCardsCollectionProgress small{display:none}
  .chxCardsCollectionProgress strong{font-size:22px}
  .chxCardsVariantTabs{grid-column:1;grid-row:2;min-width:170px}
  .chxCardsCollectionFilters{grid-column:2/5;grid-row:2}
  .chxCardsGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .chxCardsViewerPanel{padding:5px 7px 0}
  .chxCardsViewerHeader{gap:7px;padding-bottom:5px}
  .chxCardsViewerIdentity h2{font-size:20px}
  .chxCardsViewerClose{height:36px;padding:0 11px!important;font-size:7px}
  .chxCardsViewerCounter small{display:none}
  .chxCardsViewerBody{grid-template-columns:38px minmax(0,1fr) 38px;gap:3px}
  .chxCardsViewerBody.hasFullArtAction{grid-template-columns:34px minmax(0,1fr) 76px 34px;gap:4px}
  .chxCardsViewerCardFrame{width:min(100%,calc(177.7778vh - 177.78px - var(--chx-cards-tray-width-space)))}
  .chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerCardFrame{width:min(100%,calc(177.7778vh - 177.78px))}
  .chxCardsViewerArrow{width:35px;height:35px;font-size:15px}
  .chxCardsViewerVariants{min-width:190px}
  .chxCardsViewerVariants button{padding:0 12px;font-size:7px}
  .chxCardsViewerTray{height:105px}
  .chxCardsViewerTrayContent{gap:8px;padding:9px 10px 10px}
  .chxCardsViewerThumbnail{flex-basis:118px}
  .chxCardsViewerFullArt{width:74px;min-width:74px;height:112px;padding:0}
  .chxCardsViewerZoom small{display:none}
}
@media(max-width:620px){
  .chxCardsGrid{grid-template-columns:1fr}
  .chxCardsHeader{grid-template-columns:auto 1fr auto}
  .chxCardsSearch{grid-column:1/-1;grid-row:2;max-width:none}
  .chxCardsVariantTabs{grid-column:1;grid-row:3}
  .chxCardsCollectionFilters{grid-column:2/4;grid-row:3}
  .chxCardsCollectionProgress{grid-column:3;grid-row:1}
  .chxCardsMarkAllRead{grid-column:1/-1;grid-row:4;justify-self:end}
}

/* Responsive card catalogue header: every tool receives an explicit grid area,
   so store controls never create an implicit column outside the viewport. */
@media(max-width:1400px) and (min-width:721px){
  .chxCardsHeader{grid-template-columns:auto auto minmax(180px,1fr) auto auto;gap:10px 14px}
  .chxCardsTitle{grid-column:1;grid-row:1}
  .chxCardsVariantTabs{grid-column:2;grid-row:1}
  .chxCardsSearch{grid-column:3;grid-row:1;max-width:none}
  .chxCardsCollectionProgress{grid-column:4;grid-row:1}
  .chxCardsMarkAllRead{grid-column:5;grid-row:1}
  .chxCardsCollectionFilters{grid-column:1/4;grid-row:2}
  .chxCardsStore{grid-column:4/6;grid-row:2;justify-self:end}
}

@media(max-width:720px){
  .chxCardsHeader{grid-template-columns:minmax(0,1fr) auto!important;gap:9px!important}
  .chxCardsTitle{grid-column:1;grid-row:1}
  .chxCardsTitle h2{font-size:32px}
  .chxCardsCollectionProgress{grid-column:2;grid-row:1;justify-self:end}
  .chxCardsSearch{grid-column:1/-1;grid-row:2;width:100%;max-width:none}
  .chxCardsVariantTabs{grid-column:1/-1;grid-row:3;width:100%;min-width:0}
  .chxCardsCollectionFilters{grid-column:1/-1;grid-row:4;width:100%;min-width:0}
  .chxCardsStore{grid-column:1/-1;grid-row:5;width:100%;min-width:0;height:auto;display:grid;grid-template-columns:minmax(78px,.75fr) 1fr 1fr}
  .chxCardsStore>button,.chxCardsSignatureBalance{min-width:0}
  .chxCardsMarkAllRead{grid-column:1/-1;grid-row:6;justify-self:stretch;width:100%}
}

/* 2026-08-04 — gesture-first card viewer. */
.chxCardsViewerPanel{
  grid-template-rows:72px minmax(0,1fr);
  padding:0 clamp(10px,1vw,20px);
}
.chxCardsViewerHeader{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:72px;
  padding:0;
}
.chxCardsViewerClose{
  position:absolute;
  z-index:3;
  left:0;
  top:50%;
  width:48px;
  height:48px;
  justify-content:center;
  padding:0!important;
  border-radius:0;
  transform:translateY(-50%);
}
.chxCardsViewerClose span{font-size:24px;line-height:1}
.chxCardsViewerClose:hover,.chxCardsViewerClose:active{transform:translateY(-50%)}
.chxCardsViewerVariants{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:clamp(284px,24vw,390px);
  min-width:0;
  padding:4px;
  border-color:rgba(112,226,249,.4);
  border-radius:27px;
  background:linear-gradient(180deg,rgba(4,20,32,.88),rgba(2,10,19,.88));
  box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 0 24px rgba(81,217,245,.035);
  transform:translate(-50%,-50%);
}
.chxCardsViewerVariants button{
  height:42px;
  padding:0 24px;
  border-radius:22px;
  font-size:9px;
  letter-spacing:.12em;
  transition:color .2s ease,background .24s ease,box-shadow .24s ease;
}
.chxCardsViewerVariants button:active{transform:none}
.chxCardsViewerVariants button.active{background:linear-gradient(135deg,#59ddf6,#8aecff);box-shadow:0 0 23px rgba(102,230,255,.28)}
.chxCardsViewerVariants button.isLockedEdition{display:grid;place-items:center;padding:0;color:#ff78b4}
.chxCardsViewerVariants button.isLockedEdition i{position:static;width:27px;height:30px;display:block;color:inherit}
.chxCardsViewerVariants button.isLockedEdition i svg{width:100%;height:100%;display:block;fill:rgba(31,4,20,.76);stroke:currentColor;stroke-width:2.5}
.chxCardsViewerVariants button.isLockedEdition.active{color:#260a18}
.chxCardsViewerPanel[data-variant="signature"] .chxCardsViewerVariants button.active,
.chxCardsFullArtHeader .chxCardsViewerVariants button[data-viewer-full-art-mode="signature_full_art"].active{
  color:#260a18;
  background:linear-gradient(135deg,#ff8fc3,#eeb1ff);
  box-shadow:0 0 25px rgba(255,111,181,.3);
}
.chxCardsViewerHeaderTools,.chxCardsFullArtTools{display:flex;align-items:center;gap:11px;margin-left:auto}
.chxCardsViewerTokenBalance{
  position:relative;
  height:52px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 12px 0 5px;
  border:1px solid rgba(255,115,185,.28);
  color:#ffd9ec;
  background:rgba(22,7,22,.72);
  box-shadow:inset 0 0 19px rgba(255,103,180,.045);
  font:900 14px/1 Arial,sans-serif;
  outline:0;
}
.chxCardsViewerTokenBalance img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 9px rgba(229,104,255,.42));transition:transform .24s cubic-bezier(.2,.8,.2,1),filter .24s ease}
.chxCardsViewerTokenBalance strong{white-space:nowrap}
.chxCardsViewerTokenBalance:hover img,.chxCardsViewerTokenBalance:focus-visible img{transform:translateY(-2px) rotate(-7deg) scale(1.1);filter:drop-shadow(0 0 15px rgba(229,104,255,.7))}
.chxCardsViewerTokenTooltip{position:absolute;z-index:30;right:0;top:calc(100% + 9px);width:max-content;max-width:min(280px,80vw);padding:9px 11px;border:1px solid rgba(255,117,187,.42);color:#ffe4f2;background:rgba(25,6,23,.96);box-shadow:0 13px 32px rgba(0,0,0,.45);font:800 10px/1.3 Arial,sans-serif;letter-spacing:.02em;white-space:normal;opacity:0;visibility:hidden;transform:translateY(-5px);transition:opacity .18s ease,visibility .18s ease,transform .18s ease;pointer-events:none}
.chxCardsViewerTokenBalance:hover .chxCardsViewerTokenTooltip,.chxCardsViewerTokenBalance:focus-visible .chxCardsViewerTokenTooltip{opacity:1;visibility:visible;transform:none}
.chxCardsViewerCounter{height:45px;padding:0 7px;gap:5px;border:0;background:rgba(2,12,21,.5)}
.chxCardsViewerCounter strong{font-size:19px}.chxCardsViewerCounter span{font-size:11px}
.chxCardsViewerHelp{
  flex:0 0 52px;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid rgba(104,229,251,.38);
  border-radius:0;
  color:#dffaff;
  background:rgba(3,16,28,.8);
  font:900 24px/1 Arial,sans-serif;
  cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.chxCardsViewerHelp:hover,.chxCardsViewerHelp:focus-visible{outline:0;color:#05131a;border-color:#69e8ff;background:#69e8ff;box-shadow:0 0 20px rgba(105,232,255,.22)}
.chxCardsViewerHelp:active{transform:none}
.chxCardsViewerLoading{position:absolute;z-index:12;left:50%;top:50%;width:62px;height:62px;display:none;place-items:center;transform:translate(-50%,-50%);border:1px solid rgba(101,230,255,.24);border-radius:50%;background:rgba(2,12,21,.72);box-shadow:0 0 32px rgba(74,218,246,.15);backdrop-filter:blur(8px)}
.chxCardsViewerLoading i{width:30px;height:30px;border:3px solid rgba(104,231,255,.2);border-top-color:#68e7ff;border-radius:50%;animation:chxCardsViewerSpin .72s linear infinite}
.chxCardsViewerStage.isLoading .chxCardsViewerLoading,.chxCardsFullArtStage.isLoading .chxCardsViewerLoading{display:grid}
.chxCardsViewerStage.isLoading .chxCardsViewerPrimaryImage,.chxCardsFullArtStage.isLoading>.chxCardsFullArtImage{opacity:0!important}
.chxCardsViewerStage.isLoading .chxCardsViewerLock,.chxCardsViewerStage.isLoading .chxCardsSignatureUnlock,.chxCardsFullArtStage.isLoading .chxCardsViewerLock,.chxCardsFullArtStage.isLoading .chxCardsSignatureUnlock{visibility:hidden}
@keyframes chxCardsViewerSpin{to{transform:rotate(360deg)}}
.chxCardsViewerBody,.chxCardsViewerBody.hasFullArtAction{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  gap:0;
  padding-bottom:var(--chx-cards-tray-height);
}
.chxCardsViewerStage{width:100%;height:100%}
.chxCardsViewerCardFrame,
.chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerCardFrame{
  width:min(100%,calc(177.7778vh - 96px - var(--chx-cards-tray-width-space)),1950px);
}
.chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerCardFrame{width:min(100%,calc(177.7778vh - 96px),1950px)}
.chxCardsViewerCardFrame>img,
.chxCardsViewerThumbnail img{
  filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000) drop-shadow(2px 2px 0 #000) drop-shadow(-2px -2px 0 #000) drop-shadow(2px -2px 0 #000) drop-shadow(-2px 2px 0 #000) drop-shadow(0 14px 22px rgba(0,0,0,.5));
}
.chxCardsViewerStage.isLocked .chxCardsViewerCardFrame>img{
  filter:grayscale(1) brightness(.16) contrast(1.15) drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);
  opacity:1;
}
.chxCardsViewerLock{
  z-index:5;
  top:46%;
  width:88px;
  height:102px;
  color:#ff73b8;
  filter:drop-shadow(0 0 27px rgba(255,87,177,.75));
}
.chxCardsViewerLock svg{fill:rgba(29,4,19,.82);stroke-width:2.5}
.chxCardsSignatureUnlock{
  position:absolute;
  z-index:7;
  left:50%;
  top:calc(46% + 83px);
  min-width:210px;
  min-height:44px;
  padding:0 20px;
  border:1px solid rgba(255,111,184,.7);
  color:#fff0f7;
  background:linear-gradient(135deg,rgba(151,37,93,.92),rgba(78,20,83,.94));
  box-shadow:0 0 28px rgba(255,81,170,.22);
  font:900 9px/1 Arial,sans-serif;
  letter-spacing:.12em;
  cursor:pointer;
  transform:translateX(-50%);
}
.chxCardsSignatureUnlock:hover{border-color:#ffb2d6;background:linear-gradient(135deg,#d64c91,#8c2e9e);box-shadow:0 0 35px rgba(255,81,170,.35)}
.chxCardsSignatureUnlock:active{transform:translateX(-50%)}
.chxCardsViewerThumbnail.isLocked img{filter:grayscale(1) brightness(.16) contrast(1.15) drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000)}
.chxCardsViewerThumbnail>i{color:#ff73b8;filter:drop-shadow(0 0 10px rgba(255,87,177,.62))}
.chxCardsViewerTrayContent{grid-template-columns:minmax(0,1fr)}

.chxCardsViewerHelpLayer,.chxCardsUnlockConfirmLayer{position:fixed;z-index:80;inset:0;display:grid;place-items:center;padding:20px}
.chxCardsViewerHelpBackdrop,.chxCardsUnlockConfirmBackdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(0,5,10,.72);backdrop-filter:blur(8px);cursor:default}
.chxCardsViewerHelpDialog,.chxCardsUnlockConfirmDialog{
  position:relative;
  z-index:1;
  width:min(92vw,520px);
  padding:28px;
  border:1px solid rgba(100,228,251,.38);
  color:#eafaff;
  background:linear-gradient(145deg,rgba(5,25,37,.98),rgba(4,9,20,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.58),0 0 34px rgba(78,215,244,.08);
}
.chxCardsViewerHelpClose,.chxCardsUnlockConfirmClose{position:absolute;right:12px;top:12px;width:38px;height:38px;padding:0;border:1px solid rgba(255,110,141,.36);color:#ffafc0;background:rgba(44,7,20,.8);font:300 25px/1 Arial,sans-serif;cursor:pointer}
.chxCardsViewerHelpDialog>span,.chxCardsUnlockConfirmDialog>span{color:#65e5fc;font:900 7px/1 Arial,sans-serif;letter-spacing:.22em}
.chxCardsViewerHelpDialog h3,.chxCardsUnlockConfirmDialog h3{margin:7px 0 22px;font:900 30px/1 Arial,sans-serif;text-transform:uppercase}
.chxCardsViewerHelpDialog ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.chxCardsViewerHelpDialog li{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:13px;min-height:58px;padding:9px;border:1px solid rgba(95,207,232,.13);background:rgba(4,18,29,.68)}
.chxCardsViewerHelpDialog li i{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(103,226,249,.28);color:#69e8ff;background:#04131e;font-style:normal}
.chxCardsViewerHelpDialog li i::before{font:900 14px/1 Arial,sans-serif}.chxCardsViewerHelpDialog li i.isWheel::before{content:"↕"}.chxCardsViewerHelpDialog li i.isClick::before{content:"1×"}.chxCardsViewerHelpDialog li i.isDouble::before{content:"2×"}.chxCardsViewerHelpDialog li i.isDrag::before{content:"✥"}
.chxCardsViewerHelpDialog li strong,.chxCardsViewerHelpDialog li small{display:block}.chxCardsViewerHelpDialog li strong{font:900 11px/1 Arial,sans-serif;text-transform:uppercase}.chxCardsViewerHelpDialog li small{margin-top:5px;color:#91abb6;font:700 10px/1.35 Arial,sans-serif}

.chxCardsUnlockConfirmDialog{text-align:center;border-color:rgba(255,106,182,.42);box-shadow:0 30px 80px rgba(0,0,0,.62),0 0 42px rgba(255,79,170,.12)}
.chxCardsUnlockConfirmDialog>img{width:118px;height:118px;display:block;margin:0 auto 5px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(222,91,255,.45))}
.chxCardsUnlockConfirmDialog>span{color:#ff8fc3}.chxCardsUnlockConfirmDialog h3{margin-bottom:10px}.chxCardsUnlockConfirmDialog p{margin:0;color:#9fb4bd;font:700 11px/1.5 Arial,sans-serif}.chxCardsUnlockConfirmDialog>strong{display:block;margin:16px 0;color:#ffb6da;font:900 25px/1 Arial,sans-serif}.chxCardsUnlockConfirmDialog>strong small{font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.chxCardsUnlockConfirmDialog>div{display:flex;justify-content:center;gap:8px}.chxCardsUnlockConfirmDialog>div button{min-width:126px;height:42px;padding:0 16px;border:1px solid rgba(107,218,240,.25);color:#a9c4cd;background:#071923;font:900 8px/1 Arial,sans-serif;letter-spacing:.1em;cursor:pointer}.chxCardsUnlockConfirmDialog>div button:last-child{border-color:#ff7dbb;color:#260817;background:#ff91c5}.chxCardsUnlockConfirmDialog>div button:disabled{opacity:.35;cursor:not-allowed}.chxCardsUnlockConfirmDialog.isBusy{pointer-events:none;opacity:.76}

.chxCardsViewerStage.isUnlockRevealing .chxCardsViewerPrimaryImage,
.chxCardsFullArtStage.isUnlockRevealing>.chxCardsFullArtImage{animation:chxCardAfterDarkUnlock 1.35s cubic-bezier(.16,.76,.2,1) both}
.chxCardsUnlockParticles{position:absolute;z-index:8;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:-260px -120px 0 4px #ff76ba,-190px 150px 0 2px #ba6cff,-90px -180px 0 3px #ffb0da,40px -155px 0 2px #d787ff,210px -100px 0 4px #ff6aaf,260px 75px 0 2px #c07aff,120px 165px 0 3px #ffb6da,-220px 55px 0 2px #df83ff;animation:chxCardUnlockParticles 1.35s ease-out both;pointer-events:none}
@keyframes chxCardAfterDarkUnlock{0%{filter:grayscale(1) brightness(.12) contrast(1.2);opacity:.35;transform:scale(.975)}38%{filter:grayscale(.65) brightness(.45) saturate(1.5);opacity:.72}68%{filter:grayscale(0) brightness(1.3) saturate(1.55);opacity:1;transform:scale(1.018)}100%{filter:drop-shadow(3px 0 0 #000) drop-shadow(-3px 0 0 #000) drop-shadow(0 3px 0 #000) drop-shadow(0 -3px 0 #000);opacity:1;transform:none}}
@keyframes chxCardUnlockParticles{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(-8deg)}28%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(9deg)}}

.chxCardsFullArtHeader{position:fixed;z-index:11;top:12px;right:96px;left:12px;height:58px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.chxCardsFullArtHeader .chxCardsViewerVariants{pointer-events:auto}
.chxCardsFullArtTools{position:absolute;right:0;pointer-events:auto}
.chxCardsFullArtStage{cursor:pointer;touch-action:none}
.chxCardsFullArtStage.isZoomed{cursor:grab}.chxCardsFullArtStage.isZoomed.isDragging{cursor:grabbing}
.chxCardsFullArtStage>.chxCardsFullArtImage{transform:translate3d(var(--chx-card-pan-x,0),var(--chx-card-pan-y,0),0) scale(var(--chx-card-zoom,1));transition:transform .14s ease-out;pointer-events:none;will-change:transform}
.chxCardsFullArtStage.isDragging>.chxCardsFullArtImage{transition:none}
.chxCardsFullArtTrayContent{grid-template-columns:minmax(0,1fr)}
.chxCardsFullArtView.isLocked .chxCardsFullArtBackdrop>img{filter:blur(38px) grayscale(1) brightness(.1);opacity:.35}
.chxCardsFullArtStage.isLocked>img{filter:grayscale(1) brightness(.15) contrast(1.1)}
.chxCardsFullArtStage.isLocked .chxCardsViewerLock{color:#ff73b8}
.chxCardsFullArtClose{z-index:12;top:12px;right:12px;width:64px;height:64px}
.chxCardsFullArtClose:active{transform:none}

/* Locked After Dark is a deliberate inactive state, not a selected pink tab. */
.chxCardsViewerVariants button.isLockedEdition,
.chxCardsViewerVariants button.isLockedEdition.active,
.chxCardsViewerPanel[data-variant="signature"] .chxCardsViewerVariants button.isLockedEdition.active,
.chxCardsFullArtHeader .chxCardsViewerVariants button[data-viewer-full-art-mode="signature_full_art"].isLockedEdition.active{
  color:#ff7fba;
  background:linear-gradient(180deg,rgba(37,9,28,.62),rgba(13,5,17,.78));
  box-shadow:inset 0 0 0 1px rgba(255,120,181,.18),inset 0 0 26px rgba(255,91,169,.06);
}
.chxCardsViewerVariants button.isLockedEdition:hover{
  color:#ffb2d4;
  background:linear-gradient(180deg,rgba(49,12,36,.72),rgba(17,6,21,.84));
  box-shadow:inset 0 0 0 1px rgba(255,139,193,.28),0 0 18px rgba(255,91,169,.09);
}
.chxCardsViewerVariants button.isLockedEdition i{
  width:31px;
  height:35px;
  filter:drop-shadow(0 0 9px rgba(255,99,175,.4));
}
.chxCardsViewerVariants button.isLockedEdition i svg{
  fill:rgba(12,4,12,.92);
  stroke-width:2.8;
}
.chxCardsViewerTrayScroller,.chxCardsFullArtTrayScroller{scroll-behavior:auto}

@media(max-width:760px){
  .chxCardsViewerPanel{grid-template-rows:118px minmax(0,1fr);padding-inline:7px}
  .chxCardsViewerHeader{min-height:118px;align-items:flex-start;padding-top:7px}
  .chxCardsViewerClose{top:29px;width:40px;height:40px}
  .chxCardsViewerHeaderTools{position:absolute;right:0;top:7px;gap:5px}
  .chxCardsViewerTokenBalance{height:44px;padding-right:8px}.chxCardsViewerTokenBalance img{width:38px;height:38px}.chxCardsViewerCounter{display:none}.chxCardsViewerHelp{width:44px;height:44px;flex-basis:44px;font-size:21px}
  .chxCardsViewerHeader>.chxCardsViewerVariants{top:auto;bottom:7px;width:min(96%,320px);transform:translateX(-50%)}
  .chxCardsViewerVariants button{height:38px;padding-inline:12px;font-size:8px}
  .chxCardsViewerCardFrame,.chxCardsViewerPanel.isTrayCollapsed .chxCardsViewerCardFrame{width:100%}
  .chxCardsSignatureUnlock{min-width:180px;top:calc(46% + 62px);font-size:7px}.chxCardsViewerLock{width:62px;height:73px}
  .chxCardsFullArtHeader{right:70px;height:105px;align-items:flex-end}.chxCardsFullArtHeader .chxCardsViewerVariants{bottom:0;width:min(88vw,310px)}.chxCardsFullArtTools{left:0;right:auto;top:0}.chxCardsFullArtTools .chxCardsViewerTokenBalance{display:flex}
  .chxCardsFullArtClose{top:10px;right:10px;width:52px;height:52px}
  .chxCardsViewerHelpDialog,.chxCardsUnlockConfirmDialog{padding:22px 16px}.chxCardsViewerHelpDialog h3,.chxCardsUnlockConfirmDialog h3{font-size:24px}
}

/* Shared close controls: their glyph must remain visually centered even when
   older panel styles contribute padding or a custom line-height. */
button[aria-label^="Close" i],
button[aria-label^="Fermer" i],
button[aria-label="Close"],
button[aria-label="Fermer"]{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
}

/* ============================================================
   What's new — latest additions and permanent unseen markers
============================================================ */
body.chxHubNewsActive>.app{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:
    radial-gradient(circle at 18% 6%,rgba(54,215,255,.12),transparent 31%),
    radial-gradient(circle at 88% 14%,rgba(174,91,255,.12),transparent 30%),
    linear-gradient(150deg,#06111c 0%,#030812 52%,#090716 100%)!important;
}
body.chxHubNewsActive #content{min-height:100%;background:transparent!important}
.chxNewsScreen{
  --chx-news-side-space:clamp(360px,24vw,480px);
  --chx-news-pulse-width:clamp(300px,18vw,360px);
  --chx-news-app-inline:clamp(16px,2vw,32px);
  --chx-news-screen-inline:clamp(18px,2vw,48px);
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0;
  padding:clamp(22px,2.5vw,46px) clamp(18px,2vw,48px) 70px;
}
.chxNewsHeader,.chxNewsTabs{width:calc(100% - var(--chx-news-side-space))}
.chxNewsHeader{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:24px;
  padding:0 0 clamp(22px,2.4vw,36px);
  border-bottom:1px solid rgba(105,214,246,.21);
}
.chxNewsHeader::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:min(250px,36vw);
  height:2px;
  background:linear-gradient(90deg,#62e5ff,rgba(172,103,255,.72),transparent);
  box-shadow:0 0 18px rgba(83,218,250,.34);
}
.chxNewsEyebrow{
  display:block;
  color:#67e6ff;
  font:900 9px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.34em;
}
.chxNewsHeader h2{
  margin:10px 0 9px;
  color:#f7fbff;
  font:1000 clamp(42px,4.6vw,78px)/.92 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.08em;
}
.chxNewsHeader p{
  max-width:760px;
  margin:0;
  color:#8fa9b8;
  font:650 clamp(11px,.82vw,14px)/1.55 Inter,"Segoe UI",Arial,sans-serif;
}
.chxNewsPeriod{
  min-width:min(330px,36vw);
  display:grid;
  gap:8px;
}
.chxNewsPeriod>span{
  color:#6fdff6;
  font:900 8px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.18em;
}
.chxNewsPeriod select{
  width:100%;
  min-height:43px;
  padding:0 40px 0 14px;
  border:1px solid rgba(99,226,250,.34);
  border-radius:3px;
  outline:0;
  color:#eafaff;
  background:#071723;
  font:900 9px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.09em;
  cursor:pointer;
}
.chxNewsPeriod select:focus{border-color:#66e6ff;box-shadow:0 0 0 2px rgba(102,230,255,.09)}
.chxNewsControls{
  min-width:min(420px,42vw);
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  align-items:end;
  gap:10px;
}
.chxNewsControls .chxNewsPeriod{min-width:0}
.chxNewsUnseenToggle{
  min-width:190px;
  min-height:43px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:0 11px!important;
  border:1px solid rgba(102,230,255,.28)!important;
  border-radius:3px!important;
  color:#8ca8b5!important;
  background:rgba(5,20,31,.86)!important;
  box-shadow:none!important;
  cursor:pointer;
}
.chxNewsUnseenToggle>i{
  width:15px;
  height:15px;
  display:grid;
  place-items:center;
  border:1px solid rgba(108,224,248,.58);
  border-radius:50%;
}
.chxNewsUnseenToggle>i::after{width:5px;height:5px;border-radius:50%;background:#6ce7ff;content:"";opacity:.2}
.chxNewsUnseenToggle>span{overflow:hidden;font:900 7px/1.15 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.1em;text-align:left;text-overflow:ellipsis;white-space:nowrap}
.chxNewsUnseenToggle>strong{min-width:23px;color:#6ce7ff;font:1000 9px/1 Inter,"Segoe UI",Arial,sans-serif;text-align:right}
.chxNewsUnseenToggle:hover,.chxNewsUnseenToggle:focus-visible{outline:0!important;border-color:#6ce7ff!important;color:#effcff!important}
.chxNewsUnseenToggle.active{color:#04131a!important;border-color:#70e7ff!important;background:linear-gradient(125deg,#69e5ff,#a2efff)!important}
.chxNewsUnseenToggle.active>i{border-color:#061820;background:#061820}
.chxNewsUnseenToggle.active>i::after{background:#7aebff;opacity:1}
.chxNewsUnseenToggle.active>strong{color:#061820}
.chxNewsTabs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding-top:clamp(18px,2.2vw,30px);
}
.chxNewsTabs button{
  min-width:0;
  min-height:64px;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:7px;
  padding:11px 16px;
  border:1px solid rgba(92,197,224,.2);
  color:#8ca8b5;
  background:rgba(4,17,29,.68);
  text-align:left;
  cursor:pointer;
  transition:.2s ease;
}
.chxNewsTabs button:hover,
.chxNewsTabs button:focus-visible{outline:0;color:#fff;border-color:rgba(102,230,255,.55);background:rgba(7,29,43,.82)}
.chxNewsTabs button.active{
  color:#07151c;
  border-color:#66e6ff;
  background:linear-gradient(125deg,#66e6ff,#9aefff);
  box-shadow:0 0 24px rgba(102,230,255,.16);
}
.chxNewsTabs button>span{font:1000 clamp(10px,.75vw,13px)/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.14em}
.chxNewsTabs button>strong{
  color:inherit;
  opacity:.7;
  font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.12em;
}
.chxNewsLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--chx-news-side-space);
  align-items:stretch;
  gap:0;
  padding-top:clamp(28px,3vw,48px);
}
.chxNewsTimeline{
  min-width:0;
  display:grid;
  gap:clamp(30px,3.5vw,54px);
}
.chxNewsDay{min-width:0;scroll-margin-top:clamp(14px,2vh,24px)}
.chxNewsDayHeader{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:15px;
  padding-bottom:10px;
  border-bottom:1px solid rgba(101,220,247,.16);
}
.chxNewsDayHeader time{
  color:#edfaff;
  font:1000 clamp(13px,1vw,17px)/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.12em;
}
.chxNewsDayHeader>span{
  margin-left:auto;
  color:#6ddff7;
  font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.14em;
}
.chxNewsSections{
  display:grid;
  gap:clamp(32px,4vw,66px);
  padding-top:clamp(30px,3.5vw,58px);
}
.chxNewsLoading{
  min-height:280px;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:18px;
  color:#79dff4;
  font:900 9px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.2em;
}
.chxNewsLoading span{
  width:38px;
  height:38px;
  border:2px solid rgba(99,229,255,.14);
  border-top-color:#63e5ff;
  border-radius:50%;
  box-shadow:0 0 22px rgba(85,219,249,.16);
  animation:chxNewsLoadingSpin .8s linear infinite;
}
@keyframes chxNewsLoadingSpin{to{transform:rotate(360deg)}}
.chxNewsCategory{min-width:0}
.chxNewsCategoryHeader{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(12px,1.3vw,22px);
  margin-bottom:17px;
}
.chxNewsCategoryHeader>span{
  color:rgba(97,227,252,.52);
  font:900 10px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.18em;
}
.chxNewsCategoryHeader h3{
  margin:0 0 5px;
  color:#f3fbff;
  font:1000 clamp(18px,1.5vw,25px)/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.13em;
}
.chxNewsCategoryHeader p{
  margin:0;
  color:#76909f;
  font:650 11px/1.35 Inter,"Segoe UI",Arial,sans-serif;
}
.chxNewsCategoryHeader>strong{
  padding:8px 11px;
  border:1px solid rgba(96,226,251,.24);
  color:#6ce8ff;
  background:rgba(9,36,49,.58);
  font:900 8px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.14em;
}
.chxNewsGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(12px,1.2vw,20px);
}
.chxNewsItem{
  position:relative;
  width:100%!important;
  height:100%;
  min-width:0;
  min-height:0;
  display:flex!important;
  align-self:stretch;
  justify-self:stretch;
  flex-direction:column;
  appearance:none;
  padding:0!important;
  overflow:hidden;
  border:1px solid rgba(91,190,221,.19)!important;
  border-radius:3px!important;
  color:#fff;
  background:linear-gradient(160deg,rgba(8,27,40,.92),rgba(5,11,20,.96))!important;
  box-shadow:0 13px 30px rgba(0,0,0,.24)!important;
  text-align:left;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,filter .22s ease;
}
.chxNewsItem:hover,
.chxNewsItem:focus-visible{
  outline:none;
  transform:translateY(-5px);
  border-color:rgba(101,227,252,.72)!important;
  box-shadow:0 20px 38px rgba(0,0,0,.33),0 0 25px rgba(72,211,244,.16)!important;
  filter:brightness(1.07);
}
.chxNewsItemVisual{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:
    linear-gradient(rgba(67,198,232,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(67,198,232,.045) 1px,transparent 1px),
    #06101a;
  background-size:24px 24px;
}
.chxNewsItemVisual::after{
  content:"";
  position:absolute;
  inset:0;
  border-bottom:1px solid rgba(96,220,250,.15);
  background:linear-gradient(180deg,transparent 62%,rgba(2,8,14,.30));
  pointer-events:none;
}
.chxNewsItemVisual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .45s cubic-bezier(.2,.75,.2,1),filter .25s ease;
}
.chxNewsItem:hover .chxNewsItemVisual img{transform:scale(1.035)}
.chxNewsItem-character .chxNewsItemVisual img{object-position:center 16%}
.chxNewsItem-outfit .chxNewsItemVisual img{object-fit:contain;object-position:center top}
.chxNewsItem-card .chxNewsItemVisual img{object-fit:contain}
.chxNewsItemVisual>i{
  color:rgba(101,227,252,.36);
  font:1000 clamp(48px,5vw,84px)/1 Inter,"Segoe UI",Arial,sans-serif;
  font-style:normal;
}
.chxNewsItemCopy{
  flex:1;
  min-width:0;
  min-height:88px;
  display:flex;
  flex-direction:column;
  padding:14px 16px 15px;
}
.chxNewsItemCopy small{
  color:#61dff8;
  font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.15em;
}
.chxNewsItemCopy strong{
  overflow:hidden;
  margin-top:8px;
  color:#f6fbff;
  font:1000 clamp(13px,1vw,17px)/1.16 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.055em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chxNewsItemCopy em{
  overflow:hidden;
  margin-top:6px;
  color:#7f9cac;
  font:700 10px/1.2 Inter,"Segoe UI",Arial,sans-serif;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chxNewsLock{
  position:absolute;
  z-index:4;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:7px;
  color:#b7c6d0;
  background:rgba(2,7,12,.50);
  pointer-events:none;
}
.chxNewsLock svg{width:28px;height:32px;fill:none;stroke:currentColor;stroke-width:2}
.chxNewsLock b{font:900 7px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.18em}
.chxNewsLock small{color:#7fe9ff;font:900 6px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.12em}
.chxNewsItem.isLocked .chxNewsItemVisual img{filter:grayscale(.58) brightness(.48) saturate(.45)}
.chxNewsItem.isUnlocking{pointer-events:none;filter:brightness(.72)}
.chxNewsItem.hasImageFallback .chxNewsItemVisual{background:radial-gradient(circle at center,rgba(82,219,248,.12),transparent 52%),#06101a}
.chxNewsPulse{
  position:fixed;
  z-index:30;
  top:clamp(10px,1.4vh,16px);
  right:calc((var(--chx-news-side-space) + var(--chx-news-app-inline) + var(--chx-news-screen-inline) - var(--chx-news-pulse-width))/2 + (100vw - 100%)/2);
  bottom:clamp(10px,1.4vh,16px);
  width:var(--chx-news-pulse-width);
  min-width:0;
  height:auto;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  padding:18px 16px 15px;
  border:1px solid rgba(104,224,248,.2);
  background:
    linear-gradient(rgba(86,213,242,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(86,213,242,.035) 1px,transparent 1px),
    linear-gradient(155deg,rgba(8,28,42,.92),rgba(4,9,18,.96));
  background-size:22px 22px,22px 22px,auto;
  box-shadow:0 18px 46px rgba(0,0,0,.28),inset 0 0 42px rgba(75,211,243,.025);
  overflow:hidden;
}
.chxNewsPulse>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:13px;border-bottom:1px solid rgba(103,222,247,.15)}
.chxNewsPulse>header>span{display:grid;gap:6px}
.chxNewsPulse>header small{color:#65e3fb;font:900 9px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.18em}
.chxNewsPulse>header b{color:#effcff;font:1000 clamp(15px,1vw,19px)/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.12em}
.chxNewsPulse>header>strong{color:#f7fbff;font:1000 29px/.8 Inter,"Segoe UI",Arial,sans-serif;text-align:right}
.chxNewsPulse>header>strong small{display:block;margin-top:9px;color:#7895a4;font-size:7px;white-space:nowrap}
.chxNewsPulse>p{margin:13px 0 4px;color:#87a5b4;font:900 8px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.14em}
.chxNewsPulse>ol{
  min-height:0;
  height:100%;
  margin:0;
  padding:8px 0 6px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  list-style:none;
  scrollbar-width:thin;
  scrollbar-color:rgba(96,224,249,.35) transparent;
}
.chxNewsPulse li{position:relative;flex:1 1 0;min-height:0}
.chxNewsPulseJump{width:100%;height:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:12px;appearance:none;padding:0;border:0;border-radius:0;outline:0;color:inherit;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;cursor:pointer}
.chxNewsPulseJump:active{transform:none}
.chxNewsPulseJump time{color:#91adba;font:1000 clamp(10px,.72vw,13px)/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.08em;text-align:right;white-space:nowrap;transition:color .2s ease,transform .2s ease}
.chxNewsPulseRail{position:relative;width:28px;height:100%;min-width:0;justify-self:center}
.chxNewsPulseRail::before{position:absolute;top:-50%;bottom:-50%;left:50%;width:1px;background:linear-gradient(rgba(99,225,250,.08),rgba(99,225,250,.5),rgba(165,108,255,.32));box-shadow:0 0 8px rgba(89,220,249,.14);content:"";transform:translateX(-50%)}
.chxNewsPulse li:first-child .chxNewsPulseRail::before{top:50%}
.chxNewsPulse li:last-child .chxNewsPulseRail::before{bottom:50%}
.chxNewsPulseRail::after{position:absolute;z-index:2;top:50%;left:50%;width:11px;height:11px;border:2px solid rgba(116,224,250,.72);border-radius:50%;background:#071724;box-shadow:0 0 0 4px rgba(90,220,247,.055);content:"";transform:translate(-50%,-50%)}
.chxNewsPulseRail>i{position:absolute;z-index:1;top:50%;left:50%;width:32px;height:32px;border-radius:50%;background:radial-gradient(circle,rgba(112,232,255,.62) 0,rgba(155,104,255,.22) 42%,transparent 72%);opacity:var(--news-pulse);transform:translate(-50%,-50%) scale(var(--news-pulse));filter:blur(.2px)}
.chxNewsPulseJump>strong{justify-self:start;min-width:52px;display:grid;place-items:center;padding:10px 13px;border:1px solid rgba(105,220,247,.22);border-radius:3px;color:#c8e0e9;background:rgba(4,15,24,.82);font:1000 clamp(11px,.76vw,14px)/1 Inter,"Segoe UI",Arial,sans-serif;box-shadow:inset 3px 0 0 rgba(101,226,250,.16);transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease}
.chxNewsPulseJump:hover time,.chxNewsPulseJump:focus-visible time{color:#dffaff;transform:translateX(-2px)}
.chxNewsPulseJump:hover>strong,.chxNewsPulseJump:focus-visible>strong{color:#effcff;border-color:rgba(111,230,253,.5);background:rgba(9,35,49,.92);transform:translateX(2px)}
.chxNewsPulse li.active time,.chxNewsPulse li.active .chxNewsPulseJump>strong{color:#75e9ff}
.chxNewsPulse li.active .chxNewsPulseRail::after{border-color:#b6f5ff;background:#72e8ff;box-shadow:0 0 0 5px rgba(100,228,252,.11),0 0 22px rgba(100,228,252,.56)}
.chxNewsPulseEmpty{min-height:180px;display:grid;place-items:center;color:#688492;font:900 7px/1.4 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:.12em;text-align:center}
.chxNewsEmpty{
  grid-column:1/-1;
  min-height:110px;
  display:grid;
  place-items:center;
  border:1px dashed rgba(96,220,250,.18);
  color:#6e8999;
  font:800 10px/1.4 Inter,"Segoe UI",Arial,sans-serif;
  letter-spacing:.08em;
}
.chxCardsTileArt>.chxContentNewBadge{top:8px;right:8px}
@media(max-width:1250px){
  .chxNewsGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1050px){
  .chxNewsHeader,.chxNewsTabs{width:100%}
  .chxNewsLayout{grid-template-columns:1fr}
  .chxNewsPulse{position:relative;z-index:auto;top:auto;right:auto;bottom:auto;width:100%;height:auto;min-height:430px}
  .chxNewsPulse>ol{height:320px}
  .chxNewsPulse li{flex:1 0 64px;min-height:64px}
}
@media(max-width:900px){
  .chxNewsHeader{grid-template-columns:1fr;align-items:start}
  .chxNewsControls{width:100%;min-width:0}
  .chxNewsTabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chxNewsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .chxNewsScreen{padding:18px 10px 48px}
  .chxNewsHeader{grid-template-columns:1fr}
  .chxNewsControls{grid-template-columns:1fr}
  .chxNewsPeriod{min-width:0}
  .chxNewsUnseenToggle{width:100%}
  .chxNewsTabs{grid-template-columns:1fr 1fr}
  .chxNewsCategoryHeader{grid-template-columns:auto minmax(0,1fr)}
  .chxNewsCategoryHeader>strong{grid-column:2;justify-self:start}
  .chxNewsGrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .chxNewsLoading span{animation:none}
}

/* The News controls move below the title before the two columns can collide. */
@media(max-width:1450px) and (min-width:901px){
  .chxNewsHeader{grid-template-columns:1fr;align-items:start}
  .chxNewsControls{width:min(100%,620px);min-width:0;justify-self:end}
}