/* WHOOPS Bounty Hunter — base resets, typography, shared primitives */
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:var(--color-bg);}
body{
  min-height:100vh;
  background:var(--grad-hero-glow), var(--color-bg);
  background-attachment:fixed;
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h-mobile-header);
  padding-bottom:calc(var(--nav-h-bottom) + env(safe-area-inset-bottom));
}
@media (min-width:768px){ body{ padding-top:var(--nav-h-top); padding-bottom:0; } }

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* icon set (icons.js) */
.wb-uic{width:1.2em;height:1.2em;display:inline-block;vertical-align:-.22em;flex-shrink:0;}
.wb-ic{width:100%;height:100%;display:block;}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-4);}
@media (min-width:768px){ .container{max-width:var(--max-w-desktop);padding:0 var(--sp-7);} }

.view{min-height:calc(100vh - var(--nav-h-mobile-header));}
@media (min-width:768px){ .view{min-height:calc(100vh - var(--nav-h-top));} }

.section{padding:var(--sp-6) 0;}
.section-head{margin-bottom:var(--sp-4);}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:400;letter-spacing:.5px;}
h1{font-size:clamp(2.3rem,8vw,3.6rem);line-height:.98;text-shadow:3px 3px 0 var(--color-red), 0 0 40px rgba(255,193,7,.18);}
h2{font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.05;}
h3{font-size:1.25rem;line-height:1.1;}
p{margin:0 0 var(--sp-3);color:var(--color-text-dim);}

/* buttons — glossy, lifted, with a top sheen so they read as physical controls */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-display);font-weight:400;letter-spacing:1px;font-size:.95rem;
  padding:14px 22px;border-radius:var(--r-lg);border:none;cursor:pointer;position:relative;overflow:hidden;
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease;
  text-align:center;
}
.btn::after{content:"";position:absolute;inset:0;background:var(--grad-gold-sheen);opacity:0;transition:opacity var(--dur-fast);pointer-events:none;}
.btn:hover::after{opacity:1;}
.btn:active{transform:translateY(2px);}
.btn-yellow{background:var(--color-yellow);color:var(--color-on-yellow);box-shadow:0 5px 0 var(--color-yellow-deep), 0 10px 20px rgba(255,193,7,.25);}
.btn-yellow:active{box-shadow:0 2px 0 var(--color-yellow-deep), 0 4px 10px rgba(255,193,7,.2);}
.btn-red{background:var(--color-red);color:#fff;box-shadow:0 5px 0 var(--color-red-deep), 0 10px 20px rgba(232,35,26,.25);}
.btn-red:active{box-shadow:0 2px 0 var(--color-red-deep), 0 4px 10px rgba(232,35,26,.2);}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--color-text);border:1.5px solid var(--color-line);box-shadow:none;}
.btn-ghost:hover{border-color:var(--color-yellow);color:var(--color-yellow-bright);}
.btn-block{display:flex;width:100%;}
.btn:disabled{filter:grayscale(.6) brightness(.55);cursor:default;box-shadow:none;transform:none;}
.btn-sm{padding:9px 16px;font-size:.78rem;border-radius:var(--r-md);}
.btn-lg{padding:18px 26px;font-size:1.1rem;letter-spacing:1.5px;}

/* cards & panels — glossy metal gradient instead of flat fill */
.panel{background:var(--grad-panel);border:1px solid var(--color-line);border-radius:var(--r-lg);padding:var(--sp-4);box-shadow:var(--shadow-card);}
.card{background:var(--grad-panel);border:1px solid var(--color-line);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--shadow-card);}
.card-interactive{transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;}
.card-interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-card-hover);border-color:rgba(255,193,7,.4);}

/* 7-bounty progress (shared: home teaser + bounty hunter header) */
.bounty-progress{background:var(--grad-panel-raised);border:1px solid var(--color-line);border-radius:var(--r-lg);
  padding:16px 16px 18px;box-shadow:var(--shadow-card), inset 0 0 0 1px rgba(255,193,7,.08);position:relative;}
.bounty-progress .bp-label{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-display);font-size:.76rem;letter-spacing:2px;color:var(--color-text-dim);margin-bottom:var(--sp-3);text-transform:uppercase;}
.bounty-progress .bp-label span:first-child{color:var(--color-text);}
.bp-count{display:inline-flex;align-items:center;justify-content:center;padding:4px 12px;border-radius:var(--r-pill);
  background:var(--grad-gold);color:var(--color-on-yellow);font-family:var(--font-display);font-size:.8rem;letter-spacing:1px;box-shadow:0 2px 10px rgba(255,193,7,.4);}
.bp-track{display:grid;grid-template-columns:repeat(7,1fr) 1.4fr;gap:6px;align-items:center;}
.bp-slot{aspect-ratio:1;border:2px dashed var(--color-line);border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.3);transition:transform .3s,box-shadow .3s,border-color .3s,background .3s;}
.bp-slot .wb-ic{width:62%;height:62%;}
.bp-slot.filled{border:2px solid var(--color-yellow);background:linear-gradient(160deg,#3a3000,#241f00);
  box-shadow:0 0 14px rgba(255,196,0,.5);}
.bp-slot.pop{animation:bpPop .55s ease;}
@keyframes bpPop{0%{transform:scale(.2) rotate(-20deg);}60%{transform:scale(1.35) rotate(8deg);}100%{transform:scale(1);}}
.bp-chest{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:14%;
  background:linear-gradient(160deg,#a05500,#3a1c00);border:2px solid var(--color-yellow-deep);
  box-shadow:0 0 14px rgba(255,196,0,.35);}
.bp-chest .wb-ic{width:100%;height:100%;}

/* toast */
.toast{position:fixed;bottom:calc(var(--nav-h-bottom) + 18px);left:50%;transform:translateX(-50%) translateY(40px);
  background:var(--grad-gold);color:var(--color-on-yellow);font-family:var(--font-body);font-weight:700;font-size:13px;
  padding:12px 18px;border-radius:10px;opacity:0;transition:.35s;z-index:80;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.5);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (min-width:768px){ .toast{bottom:22px;} }

.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--color-red);color:#fff;font-size:.68rem;font-weight:700;font-family:var(--font-body);
  box-shadow:0 0 8px rgba(232,35,26,.6);}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* status chip — shared by wallet preview (Home) + wallet list (Rewards) */
.status-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-display);font-size:.62rem;
  letter-spacing:1px;padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap;}
.status-chip.status-ready{background:rgba(255,193,7,.14);color:var(--color-yellow-bright);border:1px solid rgba(255,193,7,.4);}
.status-chip.status-activated{background:rgba(46,204,113,.14);color:#7be3a3;border:1px solid rgba(46,204,113,.4);animation:statusPulse 1.6s ease-in-out infinite;}
.status-chip.status-used{background:rgba(255,255,255,.06);color:var(--color-text-mute);border:1px solid var(--color-line);}
.status-chip.status-expired{background:rgba(232,35,26,.1);color:#ff8b8b;border:1px solid rgba(232,35,26,.35);}
@keyframes statusPulse{0%,100%{box-shadow:0 0 0 rgba(46,204,113,0);}50%{box-shadow:0 0 10px rgba(46,204,113,.5);}}