/* 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*="UI" i],
button[aria-label*="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*="UI" i]:hover,
button[aria-label*="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;}
}