/* Core theme */
:root{
  --bg:#052e16;           /* deep green */
  --bg-2:#064e1a;         /* mid green */
  --accent:#10b981;       /* emerald */
  --accent-2:#34d399;     /* lighter emerald */
  --brand:#0e7a30;        /* daumen green */
  --ink:#eafff0;          /* light text */
  --muted:#b7f3ce;        /* muted */
  --card:#08351aee;       /* translucent card */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 20% -10%, #0a3c1a 0%, transparent 60%),
              radial-gradient(1000px 500px at 120% 10%, #0c4c23 0%, transparent 60%),
              linear-gradient(180deg, var(--bg) 0%, #031c0d 100%);
}

/* playful grid dots */
.bg-grid{
  position: fixed; inset: 0; pointer-events: none; opacity:.15;
  background-image: radial-gradient(#7ee4a7 1px, transparent 1px);
  background-size: 18px 18px; mask-image: radial-gradient(ellipse at center, black, transparent 70%);
}

.site-header{ text-align:center; padding:48px 16px 12px }
.brand{ margin:0; font-weight:800; letter-spacing:.2px; font-size: clamp(28px, 4vw, 44px); color:#d6ffe7 }
.subtitle{ margin:8px 0 0; color:var(--muted) }

.card{
  width:min(860px, 92%);
  margin: 18px auto;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding: 28px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.form{ display:flex; flex-direction:column; gap:10px }
.label{ color:var(--muted); font-size:14px }
.input-row{ display:flex; gap:10px; align-items:center }
.input{
  flex:1; padding:14px 16px; font-size:16px; border-radius:14px; border:1px solid #1a5f33; outline:none;
  background: linear-gradient(180deg, #0a3a1b, #092e17);
  color:var(--ink);
}
.input::placeholder{ color:#8dddb3 }
.input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px #10b98140 }

.btn{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#052e16; font-weight:700; border:none; padding:14px 18px; border-radius:14px; cursor:pointer; min-width:120px;
}
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(1px) }

/* Meter */
.meter-wrap{ margin-top:18px }
.meter{
  position:relative; width:100%; height:36px; border-radius:999px; overflow:hidden;
  background: linear-gradient(180deg, #0a3b1c, #082e17);
  border:1px solid #144c2a;
}
.bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, #32e875, #10b981 40%, #7cffc1);
  box-shadow: inset 0 0 12px #ffffff30, 0 8px 20px #0b2d1720;
  transition: width .9s cubic-bezier(.2,.9,.2,1);
}

.ticks{
  position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center;
  padding:0 10px; font-size:12px; color:#a5f2c4; mix-blend-mode:screen; opacity:.9;
}

.result{ margin:10px 4px 0; color:#d7ffe9; font-weight:600; letter-spacing:.2px }

.site-footer{ text-align:center; color:#95dfb8; padding:24px; font-size:13px }

/* Lucky PFP */
.lucky{ margin-top:22px; padding-top:12px; border-top:1px solid #155c32 }
.lucky-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.lucky-title{ margin:8px 0; font-size:18px; color:#d6ffe7 }
.lucky-body{ display:flex; align-items:center; gap:16px; margin-top:10px; flex-wrap:wrap }
.lucky-img{ max-width:220px; max-height:220px; border-radius:14px; border:1px solid #1a5f33; box-shadow: var(--shadow); background:#0a3a1b }
.lucky-download{ color:#052e16; background:#b7f3ce; padding:10px 12px; border-radius:12px; text-decoration:none; font-weight:700 }
.lucky-download:hover{ filter:brightness(1.05) }

.rarity{ display:inline-block; padding:8px 12px; border-radius:999px; font-weight:800; letter-spacing:.3px; font-size:14px; background:linear-gradient(180deg,#d6ffe7,#a4f2c5); color:#044321; border:1px solid #8ae0b7 }
[data-rarity="Common"].rarity{ background:linear-gradient(180deg,#d9f7e6,#bdeed2) }
[data-rarity="Uncommon"].rarity{ background:linear-gradient(180deg,#b8ffd7,#86f2bb) }
[data-rarity="Rare"].rarity{ background:linear-gradient(180deg,#aef0ff,#6bd6ff); color:#04314a; border-color:#6bd6ff }
[data-rarity="Ultra Rare"].rarity{ background:linear-gradient(180deg,#ffe2b3,#ffc26b); color:#4a2a04; border-color:#ffc26b }
[data-rarity="Secret Rare"].rarity{ background:linear-gradient(180deg,#fff7b0,#ffe76b); color:#3e3003; border-color:#ffe76b; box-shadow:0 0 20px #ffe76b60 }

.x-link{ color:#8fe9be; font-weight:700; text-decoration:none }
.x-link:hover{ text-decoration:underline }

.banner {
  width: 100%;
  text-align: center;
  padding: 10px 0;
}

.banner img {
  max-width: 100%;
  height: auto;
}

/* Responsive tweaks */
@media (max-width:560px){
  .input-row{ flex-direction:column; align-items:stretch }
  .btn{ width:100% }
}