:root{
  --bg0:#07080f; --bg1:#0d0f1c; --panel:#151829; --panel2:#1c2038;
  --line:#2a2f4d; --txt:#eef0ff; --dim:#8a90b8; --dim2:#5a5f85;
  --red:#e3350d; --red2:#ff5c33; --yellow:#ffcb05; --blue:#3b6cff;
  --green:#2fd573; --purple:#b06cff; --pink:#ff5ca8; --gold:#ffd76a;
  --r-common:#9aa0c0; --r-uncommon:#5ecf8d; --r-rare:#57a8ff; --r-holo:#57a8ff;
  --r-ex:#b06cff; --r-ultra:#ff9d3b; --r-ir:#ff5ca8; --r-sir:#ff3b6b;
  --r-hyper:#ffd76a; --r-ace:#ff5c33; --r-shiny:#7de8ff;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Outfit',system-ui,sans-serif;color:var(--txt);
  background:
    radial-gradient(1200px 700px at 50% -10%, #1a1f3d 0%, transparent 60%),
    radial-gradient(900px 500px at 85% 110%, #241033 0%, transparent 55%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 60%,#0a0714);
  min-height:100vh;overflow-x:hidden;user-select:none;
}
.beb{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em}
#app{max-width:560px;margin:0 auto;padding:0 14px 96px;position:relative}
/* ---------- header ---------- */
header{display:flex;align-items:center;justify-content:space-between;padding:16px 2px 10px;position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(7,8,15,.96) 70%,transparent)}
.logo{display:flex;align-items:center;gap:10px}
.pokeball{width:30px;height:30px;border-radius:50%;position:relative;flex:none;
  background:linear-gradient(180deg,var(--red) 0 46%, #fff 46% 54%, #f2f3fa 54% 100%);
  border:2px solid #0c0d18;box-shadow:0 4px 14px rgba(227,53,13,.45)}
.pokeball::after{content:'';position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2.5px solid #0c0d18}
.logo h1{font-size:24px;line-height:1;color:var(--txt)}
.logo h1 span{color:var(--yellow)}
.wallet{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#1d2240,#141830);
  border:1px solid var(--line);padding:8px 15px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
/* gold wallet glyph */
.wicon{width:22px;height:22px;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));transform-origin:center}
.coin{width:19px;height:19px;border-radius:50%;position:relative;flex:none;
  background:radial-gradient(circle at 34% 28%,#fff3bf,#ffcb05 52%,#c78a00 100%);
  box-shadow:0 0 8px rgba(255,203,5,.5),inset 0 -2px 3px rgba(120,80,0,.5),inset 0 1.5px 2px rgba(255,255,255,.6)}
.coin::after{content:'$';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue';font-size:13px;line-height:1;color:#8a5c00;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.wallet b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.wallet.flash-up{animation:pillup .6s ease}
.wallet.flash-down{animation:pilldown .55s ease}
.wallet.flash-up b{animation:cashup .7s ease}
.wallet.flash-down b{animation:cashdown .5s ease}
.wallet.flash-up .wicon{animation:walletpop .55s ease}
.wallet.flash-down .wicon{animation:walletdip .5s ease}
@keyframes walletpop{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.22) rotate(-9deg)}60%{transform:scale(1.05) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes walletdip{0%,100%{transform:scale(1)}30%{transform:scale(.82) rotate(4deg)}}
@keyframes cashup{0%{color:#3ff08a;transform:scale(1.25)}100%{color:var(--txt);transform:scale(1)}}
@keyframes cashdown{0%{color:#ff6a6a;transform:scale(.85)}100%{color:var(--txt);transform:scale(1)}}
@keyframes pillup{0%{box-shadow:0 0 0 2px #3ff08a,0 0 22px rgba(63,240,138,.6),0 6px 18px rgba(0,0,0,.4);transform:scale(1.06)}100%{box-shadow:0 6px 18px rgba(0,0,0,.4);transform:scale(1)}}
@keyframes pilldown{0%,55%{box-shadow:0 0 0 2px #ff5c5c,0 0 18px rgba(255,92,92,.5),0 6px 18px rgba(0,0,0,.4)}18%{transform:translateX(-3px)}38%{transform:translateX(3px)}100%{box-shadow:0 6px 18px rgba(0,0,0,.4);transform:none}}
/* wallet gain/loss floating feedback */
.walletdelta{position:fixed;z-index:140;transform:translate(-50%,0);font-family:'Outfit';font-weight:800;font-size:15px;
  pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.55);font-variant-numeric:tabular-nums;animation:wdelta 1.1s ease-out forwards}
.walletdelta.up{color:#3ff08a}.walletdelta.down{color:#ff6a6a}
@keyframes wdelta{0%{opacity:0;transform:translate(-50%,-2px) scale(.82)}22%{opacity:1;transform:translate(-50%,3px) scale(1.06)}100%{opacity:0;transform:translate(-50%,-24px) scale(1)}}
.coinpop{position:fixed;z-index:139;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#fff3bf,#ffcb05 55%,#c78a00);box-shadow:0 0 6px rgba(255,203,5,.6),inset 0 -1px 2px rgba(120,80,0,.5);
  animation:coinpop var(--cd,.9s) ease-out forwards}
.coinpop::after{content:'$';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-family:'Bebas Neue';color:#8a5c00}
@keyframes coinpop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1) rotate(300deg)}}
/* ---------- views / nav ---------- */
.view{display:none;animation:fadein .25s ease}
.view.active{display:block}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
nav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:center;
  background:linear-gradient(0deg,rgba(5,6,12,.98) 60%,rgba(5,6,12,.7) 85%,transparent);padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
.navin{display:flex;gap:6px;background:#12152a;border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 -4px 30px rgba(0,0,0,.5)}
.navbtn{position:relative;border:none;background:transparent;color:var(--dim);font-family:'Outfit';font-weight:600;font-size:12px;
  padding:9px 16px;border-radius:13px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.18s}
.navbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navbtn.active{background:linear-gradient(180deg,#2a2f55,#1d2240);color:var(--txt);box-shadow:inset 0 0 0 1px #3a4070}
.badge{position:absolute;top:2px;right:6px;background:var(--red);color:#fff;font-size:10px;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;
  box-shadow:0 2px 8px rgba(227,53,13,.6)}