:root{
  --bg:#030604;
  --glass:rgba(8,16,11,.72);
  --line:rgba(148,255,178,.11);
  --line2:rgba(255,255,255,.07);
  --green:#00c805;
  --green2:#55ff91;
  --text:#f3f7f4;
  --muted:#819087;
  --red:#d06666;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 76% 8%,rgba(0,200,5,.09),transparent 25%),
    radial-gradient(circle at 8% 40%,rgba(0,230,118,.045),transparent 27%),
    linear-gradient(155deg,#020403,#061009 53%,#020503);
  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
  cursor:pointer;
}

button:disabled{
  opacity:.35;
  cursor:not-allowed;
}

img{
  display:block;
  width:100%;
}

.grid-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-3;
  opacity:.6;
  background-image:
    linear-gradient(rgba(0,200,5,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,200,5,.022) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom,black,transparent 80%);
}

.ambient{
  position:fixed;
  width:420px;
  height:420px;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  z-index:-2;
}

.ambient-one{
  right:-180px;
  top:150px;
  background:rgba(0,200,5,.11);
}

.ambient-two{
  left:-220px;
  bottom:100px;
  background:rgba(0,230,118,.06);
}

.glass{
  border:1px solid var(--line);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.052),
      rgba(255,255,255,.012)
    ),
    var(--glass);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  box-shadow:
    0 25px 70px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.055);
}

.topbar{
  position:sticky;
  top:12px;
  z-index:100;
  width:min(1480px,calc(100% - 28px));
  min-height:78px;
  margin:14px auto 0;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(4,10,6,.86);
  backdrop-filter:blur(24px);
  box-shadow:0 18px 55px rgba(0,0,0,.42);
}

.brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.brand-face{
  width:50px;
  height:50px;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(0,230,118,.30);
  box-shadow:0 0 25px rgba(0,200,5,.14);
}

.brand-face img{
  height:100%;
  object-fit:cover;
}

.brand strong,
.brand span{
  display:block;
}

.brand strong{
  font-family:Oswald;
  font-size:18px;
  letter-spacing:.12em;
}

.brand span{
  margin-top:2px;
  color:#718078;
  font-size:8px;
  letter-spacing:.20em;
}

.topbar nav{
  display:flex;
  gap:28px;
}

.topbar nav a{
  color:#9aa79f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}

.topbar nav a:hover{
  color:var(--green2);
}

.button{
  min-height:46px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid transparent;
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
  transition:.18s;
}

.button.large{
  min-height:52px;
  padding:0 25px;
}

.button.green{
  color:#021005;
  border-color:rgba(255,255,255,.13);
  background:
    linear-gradient(180deg,#72ff9b,#00c805);
  box-shadow:
    0 12px 30px rgba(0,200,5,.14),
    inset 0 1px 0 rgba(255,255,255,.32);
}

.button.glass-button{
  color:#eaf2ec;
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
}

.button.red{
  color:#ffdcdc;
  border-color:rgba(208,102,102,.28);
  background:rgba(110,35,35,.16);
}

.button:hover:not(:disabled){
  transform:translateY(-2px);
}

main{
  width:min(1480px,calc(100% - 28px));
  margin:24px auto 0;
}

.hero{
  min-height:610px;
  padding:30px;
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:24px;
  border-radius:32px;
}

.hero-copy{
  padding:20px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.eyebrow{
  color:var(--green2);
  font-size:9px;
  font-weight:800;
  letter-spacing:.20em;
}

.hero h1{
  margin:22px 0 20px;
  font-family:Oswald;
  font-size:clamp(74px,8vw,126px);
  line-height:.82;
  letter-spacing:-.04em;
}

.hero h1 em{
  color:var(--green2);
  font-style:normal;
  text-shadow:0 0 26px rgba(0,200,5,.18);
}

.hero p{
  max-width:610px;
  margin:0;
  color:#9dac9f;
  line-height:1.8;
  font-size:14px;
}

.hero-actions{
  display:flex;
  gap:10px;
  margin-top:28px;
}

.contract-line{
  margin-top:29px;
  padding-top:18px;
  border-top:1px solid var(--line2);
}

.contract-line span{
  display:block;
  color:#68766d;
  font-size:8px;
  letter-spacing:.18em;
}

.contract-line code{
  display:block;
  margin-top:8px;
  color:#c9d5cc;
  font-size:10px;
  overflow-wrap:anywhere;
}

.hero-art{
  position:relative;
  min-height:550px;
}

.orb{
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(
      circle,
      rgba(0,230,118,.21),
      rgba(0,200,5,.06) 42%,
      transparent 70%
    );
  filter:blur(15px);
}

.monster{
  position:absolute;
  overflow:hidden;
  border-radius:25px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 25px 65px rgba(0,0,0,.44);
}

.monster img{
  height:100%;
  object-fit:cover;
}

.monster.main{
  width:46%;
  height:72%;
  left:27%;
  top:8%;
  z-index:3;
}

.monster.back{
  width:27%;
  height:44%;
  top:28%;
  filter:brightness(.72);
}

.monster.left{
  left:2%;
  transform:rotate(-9deg);
}

.monster.right{
  right:2%;
  transform:rotate(9deg);
}

.hero-hud{
  position:absolute;
  right:7%;
  bottom:5%;
  z-index:5;
  min-width:205px;
  padding:17px 20px;
  border-radius:18px;
  border:1px solid rgba(0,230,118,.19);
  background:rgba(4,10,6,.84);
  backdrop-filter:blur(18px);
}

.hero-hud span,
.hero-hud strong,
.hero-hud small{
  display:block;
}

.hero-hud span,
.hero-hud small{
  color:#728178;
  font-size:8px;
  letter-spacing:.16em;
}

.hero-hud strong{
  margin:6px 0;
  font-family:Oswald;
  font-size:26px;
}

.stats{
  margin:18px 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}

.stat{
  min-height:135px;
  padding:22px;
  border-radius:22px;
}

.stat span,
.stat small{
  display:block;
  color:#718078;
  font-size:8px;
  letter-spacing:.15em;
}

.stat strong{
  display:block;
  margin:10px 0 5px;
  font-family:Oswald;
  font-size:34px;
}

.reward-section{
  margin-top:28px;
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:25px;
  margin-bottom:18px;
}

.section-heading h2{
  margin:7px 0 0;
  font-family:Oswald;
  font-size:44px;
}

.reward-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

.pending-total{
  text-align:right;
}

.pending-total span,
.pending-total strong{
  display:block;
}

.pending-total span{
  color:#718078;
  font-size:8px;
  letter-spacing:.15em;
}

.pending-total strong{
  margin-top:4px;
  font-size:11px;
}

.reward-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.reward-card{
  position:relative;
  min-height:440px;
  padding:26px;
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    radial-gradient(
      circle at 80% 15%,
      var(--accent-soft),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(6,13,9,.96),
      rgba(3,8,5,.97)
    );
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.reward-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.reward-kicker{
  color:#718078;
  font-size:8px;
  letter-spacing:.16em;
}

.reward-status{
  color:var(--green2);
  font-size:9px;
  font-weight:900;
  letter-spacing:.12em;
}

.reward-title{
  margin:18px 0 0;
  display:flex;
  align-items:center;
  gap:13px;
  font-family:Oswald;
  font-size:54px;
  line-height:.95;
}

.token-icon{
  width:48px;
  height:48px;
  border-radius:13px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:var(--accent);
  color:#031005;
  font-family:Inter;
  font-size:12px;
  font-weight:900;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.reward-rate{
  margin-top:28px;
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.reward-rate strong{
  color:var(--green2);
  font-family:Oswald;
  font-size:44px;
  line-height:.9;
}

.reward-rate span{
  margin-bottom:5px;
  color:#75827a;
  font-size:8px;
  letter-spacing:.12em;
}

.reward-unclaimed{
  margin-top:35px;
}

.reward-unclaimed span{
  color:#718078;
  font-size:8px;
  letter-spacing:.15em;
}

.reward-unclaimed strong{
  display:block;
  margin-top:9px;
  font-family:Oswald;
  font-size:28px;
}

.reward-unclaimed small{
  display:block;
  margin-top:8px;
  color:#78867d;
  font-size:9px;
}

.reward-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:46px;
}

.reward-metric{
  padding:13px;
  min-height:60px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.015);
}

.reward-metric span{
  display:block;
  color:#728078;
  font-size:7px;
  letter-spacing:.14em;
}

.reward-metric strong{
  display:block;
  margin-top:7px;
  font-size:14px;
}

.reward-claim{
  width:100%;
  margin-top:13px;
  min-height:40px;
}

.position{
  margin-top:30px;
  padding:26px;
  border-radius:28px;
}

.position-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.position-column{
  min-width:0;
}

.position-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:15px;
  padding-bottom:15px;
  border-bottom:1px solid var(--line2);
}

.position-head span{
  color:var(--green2);
  font-size:8px;
  letter-spacing:.16em;
}

.position-head h3{
  margin:5px 0 0;
  font-family:Oswald;
  font-size:30px;
}

.position-actions{
  display:flex;
  gap:8px;
}

.empty{
  min-height:145px;
  margin-top:14px;
  padding:20px;
  display:grid;
  place-items:center;
  border-radius:18px;
  border:1px dashed rgba(0,230,118,.16);
  color:#748278;
  text-align:center;
  font-size:9px;
  letter-spacing:.12em;
}

.nft-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.nft-card{
  position:relative;
  overflow:hidden;
  border-radius:17px;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  transition:.18s;
}

.nft-card:hover{
  transform:translateY(-3px);
  border-color:rgba(0,230,118,.20);
}

.nft-card.selected{
  border-color:var(--green);
  box-shadow:0 0 0 1px rgba(0,200,5,.18);
}

.nft-card img{
  aspect-ratio:1;
  object-fit:cover;
}

.nft-info{
  padding:11px;
}

.nft-info span{
  color:#718078;
  font-size:7px;
  letter-spacing:.14em;
}

.nft-info strong{
  display:block;
  margin-top:4px;
  font-family:Oswald;
  font-size:17px;
}

.check{
  position:absolute;
  right:9px;
  top:9px;
  width:28px;
  height:28px;
  z-index:2;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:rgba(4,9,6,.85);
  border:1px solid rgba(255,255,255,.10);
}

.nft-card.selected .check{
  color:#031005;
  background:var(--green2);
}

.contract-section{
  margin:30px 0;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:14px;
}

.contract-panel,
.contract-data{
  padding:28px;
  border-radius:25px;
}

.contract-panel h2{
  margin:10px 0;
  font-family:Oswald;
  font-size:38px;
}

.contract-panel p{
  max-width:620px;
  color:#8c9b91;
  line-height:1.8;
}

.contract-data>div{
  padding:13px 0;
  border-bottom:1px solid var(--line2);
}

.contract-data>div:last-child{
  border-bottom:0;
}

.contract-data span{
  display:block;
  color:#718078;
  font-size:8px;
  letter-spacing:.15em;
}

.contract-data code,
.contract-data strong{
  display:block;
  margin-top:7px;
  color:#c7d3ca;
  font-size:10px;
  overflow-wrap:anywhere;
}

footer{
  width:min(1480px,calc(100% - 28px));
  height:90px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line2);
  color:#637168;
  font-size:8px;
  letter-spacing:.17em;
}

.notice{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translate(-50%,25px);
  z-index:300;
  opacity:0;
  pointer-events:none;
  max-width:calc(100% - 30px);
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(0,230,118,.20);
  background:rgba(5,12,8,.94);
  transition:.2s;
}

.notice.show{
  opacity:1;
  transform:translate(-50%,0);
}

.notice.bad{
  border-color:rgba(208,102,102,.35);
}

.modal{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.70);
}

.hidden{
  display:none!important;
}

.modal-card{
  width:min(460px,calc(100% - 30px));
  padding:30px;
  border-radius:25px;
  text-align:center;
}

.modal-card h3{
  font-family:Oswald;
  font-size:30px;
}

.modal-card p{
  color:#89978e;
}

.modal-card code{
  display:block;
  color:var(--green2);
  font-size:9px;
  overflow-wrap:anywhere;
}

.spinner{
  width:38px;
  height:38px;
  margin:0 auto;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--green2);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

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

@media(max-width:1100px){

  .hero{
    grid-template-columns:1fr;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .position-grid,
  .contract-section{
    grid-template-columns:1fr;
  }

}

@media(max-width:800px){

  .topbar nav{
    display:none;
  }

  .reward-grid{
    grid-template-columns:1fr;
  }

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

  .reward-actions{
    width:100%;
    justify-content:space-between;
  }

}

@media(max-width:600px){

  main,
  .topbar,
  footer{
    width:calc(100% - 18px);
  }

  .hero{
    padding:18px;
  }

  .hero h1{
    font-size:58px;
  }

  .hero-actions{
    flex-direction:column;
  }

  .stats{
    grid-template-columns:1fr 1fr;
  }

  .reward-title{
    font-size:40px;
  }

  .reward-rate strong{
    font-size:36px;
  }

  .position{
    padding:17px;
  }

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

  .position-actions{
    width:100%;
  }

  .position-actions .button{
    flex:1;
  }

  .nft-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* ==========================================================
   CHACHA WALLET SELECTOR V2
========================================================== */

#disconnectBtn{
  margin-left:8px;
}

.wallet-modal-card{
  width:min(520px,calc(100% - 24px));
  padding:26px;
  border-radius:28px;
}

.wallet-modal-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.wallet-modal-top h3{
  margin:8px 0 0;
  font-family:Oswald,Inter,sans-serif;
  font-size:36px;
  line-height:1;
}

.wallet-modal-x{
  width:42px;
  height:42px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.025);
  color:#e7efe9;
  font-size:25px;
}

.wallet-modal-copy{
  margin:17px 0 19px;
  color:#8b9990;
  font-size:11px;
  line-height:1.7;
}

.wallet-provider-list{
  display:grid;
  gap:10px;
}

.wallet-provider{
  width:100%;
  min-height:76px;
  padding:12px 15px;
  display:flex;
  align-items:center;
  gap:14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.075);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.04),
      rgba(255,255,255,.012)
    );
  color:#eff5f1;
  text-align:left;
  transition:.16s ease;
}

.wallet-provider:hover{
  transform:translateY(-1px);
  border-color:rgba(0,230,118,.28);
  background:rgba(0,200,5,.045);
}

.wallet-provider-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}

.wallet-provider-icon img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.wallet-provider-fallback{
  color:#58ff92;
  font-family:Oswald,Inter,sans-serif;
  font-weight:700;
  font-size:16px;
}

.wallet-provider-copy{
  flex:1;
  min-width:0;
}

.wallet-provider-copy strong{
  display:block;
  font-size:14px;
}

.wallet-provider-copy span{
  display:block;
  margin-top:5px;
  color:#718078;
  font-size:8px;
  letter-spacing:.10em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wallet-provider-arrow{
  color:#58ff92;
  font-size:22px;
}

.wallet-provider-empty{
  min-height:90px;
  padding:20px;
  place-items:center;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.10);
  color:#7e8b82;
  text-align:center;
  font-size:10px;
}

.wallet-provider-empty:not(.hidden){
  display:grid;
}

.wallet-modal-foot{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.055);
  color:#5e6c63;
  font-size:8px;
  letter-spacing:.07em;
  line-height:1.6;
}

@media(max-width:620px){

  #disconnectBtn{
    margin-left:4px;
  }

}


/* ==========================================================
   CHACHA MOBILE VIEWPORT LOCK
   Prevent horizontal page movement / off-screen wallet buttons
========================================================== */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  overscroll-behavior-x:none;
}

body{
  position:relative;
}

main,
.topbar,
footer{
  max-width:100%;
}

.topbar{
  overflow:hidden;
}

.wallet-header-actions{
  min-width:0;
  max-width:100%;
  flex-shrink:1;
}

#connectBtn,
#disconnectBtn{
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}


/* ==========================================================
   MOBILE HEADER
========================================================== */

@media(max-width:700px){

  .topbar{
    width:calc(100% - 12px);
    margin:6px auto 0;
    min-height:64px;
    padding:8px 9px;
    gap:8px;
    border-radius:18px;
  }

  .brand{
    min-width:0;
    flex:1 1 auto;
    gap:8px;
    overflow:hidden;
  }

  .brand-face{
    width:39px;
    height:39px;
    flex:0 0 39px;
  }

  .brand > div:last-child{
    min-width:0;
    overflow:hidden;
  }

  .brand strong{
    font-size:13px;
    letter-spacing:.07em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .brand span{
    display:none;
  }

  .wallet-header-actions{
    display:flex;
    flex:0 1 auto;
    align-items:center;
    justify-content:flex-end;
    gap:5px;
    min-width:0;
  }

  .wallet-header-actions .button{
    min-height:39px;
    height:39px;
    padding:0 10px;
    border-radius:11px;
    font-size:7px;
    letter-spacing:.07em;
  }

  #connectBtn{
    max-width:112px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  #disconnectBtn{
    margin-left:0 !important;
    padding-left:8px;
    padding-right:8px;
    flex:0 0 auto;
  }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media(max-width:430px){

  .topbar{
    gap:5px;
    padding-left:7px;
    padding-right:7px;
  }

  .brand-face{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .brand strong{
    font-size:11px;
  }

  .wallet-header-actions{
    gap:4px;
  }

  .wallet-header-actions .button{
    padding-left:7px;
    padding-right:7px;
    font-size:6.5px;
  }

  #connectBtn{
    max-width:92px;
  }

}


/* ==========================================================
   CONNECTED MOBILE MODE
   Address + disconnect always remain inside viewport
========================================================== */

@media(max-width:380px){

  .brand strong{
    max-width:96px;
  }

  #connectBtn{
    max-width:79px;
  }

  #disconnectBtn{
    font-size:0;
    width:38px;
    min-width:38px;
    padding:0;
  }

  #disconnectBtn::after{
    content:"×";
    font-size:19px;
    line-height:1;
  }

}