/* ============================================================
   style.css — PokéTM complete styles
   ============================================================ */
:root {
  --bg:#0a0a14; --surface:#12121f; --card:#1a1a2e; --border:#ffffff0d;
  --accent:#f7d02c; --accent2:#ee6b2f; --purple:#8b5cf6;
  --text:#eeeeff; --muted:#6060a0; --correct:#4ade80; --wrong:#f87171;
  --neutral:#60a5fa; --r:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{overflow-y:scroll;overflow-x:hidden;}
body{
  background:var(--bg);color:var(--text);font-family:'Nunito',sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:0 14px 480px;
  background-image:
    radial-gradient(ellipse at 15% 10%,rgba(238,107,47,.07) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 85%,rgba(139,92,246,.09) 0%,transparent 55%);
}

/* ── TAB BAR ── */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--surface);
  border-top:1.5px solid var(--border);display:flex;height:58px;box-shadow:0 -4px 24px #00000066;}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;color:var(--muted);font-size:.52rem;font-weight:800;
  letter-spacing:1px;text-transform:uppercase;transition:color .15s;border:none;
  background:none;-webkit-tap-highlight-color:transparent;padding:0 2px;}
.tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.tab.active{color:var(--accent);}
.tab.active svg{filter:drop-shadow(0 0 6px var(--accent));}

/* ── LAYOUT ── */
.screen{width:100%;max-width:660px;}
.screen.wide{max-width:960px;}
.header{text-align:center;padding:20px 0 12px;}
.header h1{font-family:'Bangers',cursive;font-size:clamp(1.9rem,7vw,3.2rem);
  letter-spacing:4px;color:var(--accent);
  text-shadow:4px 4px 0 var(--accent2),7px 7px 0 #00000055;line-height:1;}
.header p{color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;margin-top:4px;}

/* ── PANEL ── */
.panel{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  box-shadow:0 10px 60px #00000055;width:100%;overflow:hidden;
  animation:fadeUp .3s cubic-bezier(.4,0,.2,1);position:relative;}
.stripe{height:4px;background:linear-gradient(90deg,var(--accent2),var(--accent),var(--purple));}
.pb{padding:20px 18px 18px;}
@media(max-width:480px){.pb{padding:16px 13px 16px;}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── BUTTONS ── */
.btn-primary{display:block;width:100%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  border:none;border-radius:50px;color:#1a0d00;
  font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:3px;
  padding:13px 0;cursor:pointer;margin-top:8px;
  box-shadow:0 4px 22px #ee6b2f44;transition:transform .13s,box-shadow .13s;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 28px #ee6b2f66;}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-ghost{display:block;width:100%;background:#ffffff08;border:1.5px solid #ffffff14;
  border-radius:50px;color:var(--muted);font-family:'Bangers',cursive;font-size:1.05rem;
  letter-spacing:2px;padding:11px 0;cursor:pointer;margin-top:8px;
  transition:background .13s,border-color .13s,color .13s,transform .11s;}
.btn-ghost:hover{background:#ffffff12;border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}
.btn-sm{border:none;border-radius:50px;font-family:'Bangers',cursive;font-size:1rem;
  letter-spacing:2px;padding:9px 22px;cursor:pointer;transition:transform .12s;}

/* ── PICK GRID ── */
.sec-label{font-size:.62rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);margin:13px 0 7px;}
.pick-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:400px){.pick-grid{grid-template-columns:1fr;}}
.pick-btn{background:#ffffff07;border:1.5px solid #ffffff10;border-radius:12px;
  color:var(--text);font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;
  padding:12px 9px;cursor:pointer;text-align:center;
  transition:background .13s,border-color .13s,transform .11s;}
.pick-btn:hover{background:#ffffff12;border-color:var(--accent);transform:translateY(-2px);}
.pick-btn.sel{background:#f7d02c16;border-color:var(--accent);color:var(--accent);}
.pick-btn .pi{font-size:1.35rem;display:block;margin-bottom:3px;}

/* ── TIER BAR (home) ── */
.tier-bar{display:flex;align-items:center;gap:10px;background:var(--surface);
  border-radius:12px;border:1.5px solid var(--border);padding:10px 13px;margin-bottom:12px;}
.tier-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.tier-info{flex:1;min-width:0;}
.tier-name-row{display:flex;justify-content:space-between;align-items:baseline;}
.tier-nm{font-family:'Bangers',cursive;font-size:.95rem;letter-spacing:2px;}
.tier-pts-txt{font-size:.65rem;font-weight:800;color:var(--muted);}
.tier-track{height:5px;background:#ffffff10;border-radius:99px;margin-top:5px;overflow:hidden;}
.tier-fill{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);}

/* ── DAILY CARD ── */
.daily-card{background:var(--surface);border-radius:12px;border:1.5px solid #f7d02c33;
  padding:13px 14px;margin-bottom:12px;display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:border-color .13s,background .13s;}
.daily-card:hover{border-color:var(--accent);background:#f7d02c0a;}
.daily-card.done{border-color:#ffffff14;cursor:default;opacity:.6;}
.daily-icon{font-size:1.8rem;flex-shrink:0;}
.daily-info{flex:1;}
.daily-title{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:var(--accent);}
.daily-sub{font-size:.65rem;font-weight:700;color:var(--muted);margin-top:2px;}
.daily-arrow{color:var(--muted);font-size:1.2rem;font-weight:800;}

/* ── SCOREBAR ── */
.scorebar{width:100%;display:flex;margin:12px 0 8px;background:var(--surface);
  border-radius:50px;border:1.5px solid var(--border);overflow:hidden;
  font-weight:800;font-size:.76rem;}
.sb{flex:1;text-align:center;padding:8px 3px;color:var(--muted);
  border-right:1.5px solid var(--border);}
.sb:last-child{border-right:none;}
.sb strong{color:var(--accent);}
.prog-wrap{width:100%;height:5px;background:#ffffff10;border-radius:99px;
  margin-bottom:11px;overflow:hidden;}
.prog-bar{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent));
  border-radius:99px;transition:width .45s cubic-bezier(.4,0,.2,1);}

/* ── TIMER ARC ── */
.timer-wrap{position:relative;display:flex;justify-content:center;margin-bottom:6px;}
.timer-svg{position:absolute;top:-8px;left:50%;transform:translateX(-50%);pointer-events:none;}
.timer-circle-bg{fill:none;stroke:#ffffff0a;stroke-width:4;}
.timer-circle{fill:none;stroke-width:4;stroke-linecap:round;
  transition:stroke-dashoffset .1s linear,stroke .3s;}
.timer-num{font-family:'Bangers',cursive;font-size:.85rem;letter-spacing:1px;
  color:var(--muted);text-align:center;margin-top:2px;}

/* ── QUIZ ── */
.q-meta{display:flex;align-items:center;gap:7px;font-size:.62rem;font-weight:800;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:15px;}
.tag{font-size:.58rem;padding:2px 7px;border-radius:20px;letter-spacing:1px;
  color:#fff;font-weight:800;}
.tag-single{background:var(--accent2);}.tag-dual{background:var(--purple);}
.tag-mixed{background:#0891b2;}
.tag-inf{background:#059669;}.tag-challenge{background:#dc2626;}.tag-daily{background:#d97706;}

.vis-matchup{display:flex;align-items:center;justify-content:center;
  gap:15px;margin-bottom:18px;flex-wrap:wrap;}
.type-pill{font-family:'Bangers',cursive;font-size:clamp(1.5rem,5.5vw,2.4rem);
  letter-spacing:2.5px;padding:11px 26px;border-radius:60px;
  border:3px solid currentColor;text-shadow:0 0 26px currentColor;
  box-shadow:0 0 20px -6px currentColor,inset 0 0 20px -12px currentColor;
  background:rgba(0,0,0,.3);white-space:nowrap;}
.type-pill.sm{font-size:clamp(1.1rem,4vw,1.7rem);padding:8px 18px;}
.arrow-vis{font-family:'Bangers',cursive;font-size:clamp(1.8rem,6vw,3rem);
  color:var(--muted);flex-shrink:0;line-height:1;}
.vs-stack{display:flex;flex-direction:column;gap:8px;align-items:center;}
.type-col{text-align:center;}
.type-col-label{font-family:'Bangers',cursive;font-size:.65rem;letter-spacing:2px;
  color:var(--muted);margin-bottom:6px;text-align:center;}
.ctx-label{text-align:center;margin-bottom:15px;font-family:'Bangers',cursive;
  font-size:clamp(.95rem,3.5vw,1.3rem);letter-spacing:2px;color:var(--muted);}

/* ── POKEMON QUIZ VIS ── */
.poke-vis{text-align:center;margin-bottom:16px;}
.poke-sprite{width:96px;height:96px;image-rendering:pixelated;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));}
.poke-name{font-family:'Bangers',cursive;font-size:1.8rem;letter-spacing:2px;
  color:var(--accent);margin-top:4px;}
.poke-gen-tag{font-size:.62rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);}

/* ── RATE BUTTONS ── */
.rate-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.rate-grid.six{grid-template-columns:repeat(3,1fr);}
@media(max-width:400px){.rate-grid.six{grid-template-columns:repeat(2,1fr);}}
.rate-btn{border:2px solid;border-radius:12px;font-family:'Nunito',sans-serif;
  font-weight:800;font-size:.85rem;padding:13px 9px;cursor:pointer;text-align:center;
  transition:transform .11s,opacity .11s,box-shadow .12s;}
.rate-btn:hover:not(:disabled){transform:translateY(-2px);opacity:.85;}
.rate-btn .sym{font-family:'Bangers',cursive;font-size:1.5rem;display:block;
  letter-spacing:1px;margin-bottom:2px;}
.r-super{background:rgba(249,115,22,.16);border-color:#f97316;color:#f97316;}
.r-neutral{background:rgba(96,165,250,.16);border-color:var(--neutral);color:var(--neutral);}
.r-half{background:rgba(139,92,246,.16);border-color:var(--purple);color:#a78bfa;}
.r-immune{background:rgba(120,120,120,.16);border-color:#888;color:#aaa;}
.rate-btn.correct{box-shadow:0 0 0 3px var(--correct);border-color:var(--correct);
  color:var(--correct);background:rgba(74,222,128,.14);}
.rate-btn.wrong{box-shadow:0 0 0 3px var(--wrong);border-color:var(--wrong);
  color:var(--wrong);background:rgba(248,113,113,.14);}

/* ── ID BUTTONS ── */
.id-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
@media(max-width:360px){.id-grid{grid-template-columns:1fr;}}
.id-btn{background:#ffffff08;border:2px solid #ffffff10;border-radius:12px;
  color:var(--text);font-family:'Bangers',cursive;
  font-size:clamp(1.05rem,4vw,1.4rem);letter-spacing:1.5px;
  padding:13px 9px;cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .12s,border-color .12s,transform .11s;}
.id-btn:hover:not(:disabled){background:#ffffff12;border-color:var(--accent);transform:translateY(-2px);}
.id-btn .id-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
.id-btn.correct{background:rgba(74,222,128,.14);border-color:var(--correct);color:var(--correct);}
.id-btn.wrong{background:rgba(248,113,113,.14);border-color:var(--wrong);color:var(--wrong);}

/* Type grid for "what type is this pokemon" quiz */
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
@media(max-width:360px){.type-grid{grid-template-columns:repeat(2,1fr);}}
.type-choice-btn{border:2px solid;border-radius:10px;font-family:'Bangers',cursive;
  font-size:1rem;letter-spacing:1px;padding:10px 6px;cursor:pointer;text-align:center;
  background:rgba(0,0,0,.3);transition:transform .11s,box-shadow .12s;}
.type-choice-btn:hover:not(:disabled){transform:translateY(-2px);}
.type-choice-btn.correct{box-shadow:0 0 0 3px var(--correct)!important;}
.type-choice-btn.wrong{box-shadow:0 0 0 3px var(--wrong)!important;}

/* ── FEEDBACK ── */
.feedback{margin-top:11px;padding:10px 13px;border-radius:10px;font-weight:700;
  font-size:.82rem;line-height:1.5;display:none;animation:pop .18s cubic-bezier(.4,0,.2,1);}
.feedback.show{display:block;}
.feedback.ok{background:rgba(74,222,128,.10);border:1.5px solid var(--correct);color:var(--correct);}
.feedback.bad{background:rgba(248,113,113,.10);border:1.5px solid var(--wrong);color:var(--wrong);}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}

/* ── STUDY CARD ── */
.study-card{margin-top:10px;border-radius:10px;overflow:hidden;border:1.5px solid #ffffff14;
  background:rgba(255,255,255,.02);}
.study-toggle{width:100%;background:#ffffff0a;border:none;color:var(--muted);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.76rem;letter-spacing:1px;
  padding:10px 14px;cursor:pointer;text-align:left;display:flex;align-items:center;
  gap:6px;transition:background .12s;}
.study-toggle:hover{background:#ffffff14;color:var(--text);}
.study-arrow{transition:transform .2s;font-style:normal;margin-left:auto;font-size:.7rem;}
.study-toggle.open .study-arrow{transform:rotate(180deg);}
.study-body{display:none;background:#0d0d1e;}
.study-body.open{display:block;}
.study-tabs{display:flex;border-bottom:1.5px solid #ffffff10;}
.study-tab{flex:1;background:none;border:none;color:var(--muted);
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:1px;
  text-transform:uppercase;padding:8px 4px;cursor:pointer;
  transition:color .12s,background .12s;text-align:center;}
.study-tab:hover{color:var(--text);}
.study-tab.active{color:var(--accent);border-bottom:2px solid var(--accent);margin-bottom:-1.5px;}
.study-pane{display:none;padding:11px 13px;}
.study-pane.active{display:block;}
.study-rows{display:flex;flex-direction:column;gap:7px;}
.study-row{display:flex;gap:6px;align-items:flex-start;}
.study-row-lbl{font-size:.62rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);min-width:66px;padding-top:3px;}
.study-pills{display:flex;flex-wrap:wrap;gap:4px;}
.study-pill{font-family:'Bangers',cursive;font-size:.78rem;letter-spacing:1px;
  padding:2px 9px;border-radius:20px;border:1.5px solid currentColor;background:rgba(0,0,0,.3);}

/* ── NEXT/SKIP ── */
.quiz-action-row{display:flex;flex-direction:column;gap:8px;margin-top:16px;}
.next-btn,.skip-btn{border:none;border-radius:50px;font-family:'Bangers',cursive;
  letter-spacing:2px;cursor:pointer;transition:transform .12s,box-shadow .12s;
  width:100%;text-align:center;display:none;}
.next-btn{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#1a0d00;
  font-size:1.4rem;padding:16px 0;box-shadow:0 4px 20px #ee6b2f55;}
.next-btn:hover{transform:translateY(-2px);box-shadow:0 6px 28px #ee6b2f77;}
.skip-btn{background:#ffffff0d;color:var(--muted);border:1.5px solid var(--border);
  font-size:1rem;padding:11px 0;}
.skip-btn:hover{background:#ffffff16;}
.next-btn.show,.skip-btn.show{display:block;}
.kb-hint{text-align:center;font-size:.62rem;font-weight:700;color:var(--muted);
  letter-spacing:1px;margin-top:7px;}

/* ── GAME OVER (challenge) ── */
.gameover-body{text-align:center;padding:34px 20px 28px;}
.go-emoji{font-size:3rem;margin-bottom:6px;}
.go-title{font-family:'Bangers',cursive;font-size:1.9rem;letter-spacing:3px;
  color:var(--wrong);text-shadow:3px 3px 0 #7f1d1d;}
.go-score{font-size:2.6rem;font-weight:900;margin:10px 0 3px;}
.go-pts{font-size:1.35rem;font-weight:800;color:var(--accent);margin-bottom:3px;}
.go-pct{color:var(--muted);font-size:.82rem;font-weight:700;margin-bottom:14px;}
.go-rank{display:inline-block;background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#1a0d00;font-family:'Bangers',cursive;font-size:.95rem;letter-spacing:2px;
  padding:6px 20px;border-radius:50px;margin-bottom:20px;}
.go-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}

/* pts pop */
.pts-pop{position:fixed;pointer-events:none;font-family:'Bangers',cursive;font-size:1.9rem;
  letter-spacing:2px;color:var(--correct);text-shadow:0 2px 10px #00000099;
  animation:ptsFly .9s cubic-bezier(.2,0,.4,1) forwards;z-index:9999;}
@keyframes ptsFly{0%{opacity:1;transform:translateY(0) scale(1)}
  50%{opacity:1;transform:translateY(-55px) scale(1.15)}
  100%{opacity:0;transform:translateY(-100px) scale(.8)}}

/* ── BACK BUTTON ── */
.back-btn{display:none;align-items:center;gap:7px;background:none;border:none;
  color:var(--muted);font-family:'Nunito',sans-serif;font-weight:800;font-size:.82rem;
  letter-spacing:1px;cursor:pointer;padding:4px 0;transition:color .13s;
  width:100%;max-width:660px;margin-top:8px;}
.back-btn:hover{color:var(--accent);}
.back-btn svg{flex-shrink:0;width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.back-btn.show{display:flex;}

/* ── RESULTS ── */
.results-body{text-align:center;padding:34px 20px 28px;}
.r-emoji{font-size:3rem;margin-bottom:6px;}
.r-title{font-family:'Bangers',cursive;font-size:1.8rem;letter-spacing:3px;
  color:var(--accent);text-shadow:3px 3px 0 var(--accent2);}
.r-score{font-size:2.6rem;font-weight:900;margin:10px 0 3px;}
.r-pts{font-size:1.35rem;font-weight:800;color:var(--accent);margin-bottom:3px;}
.r-pct{color:var(--muted);font-size:.82rem;font-weight:700;margin-bottom:14px;}
.r-rank{display:inline-block;background:linear-gradient(135deg,var(--accent2),var(--accent));
  color:#1a0d00;font-family:'Bangers',cursive;font-size:.95rem;letter-spacing:2px;
  padding:6px 20px;border-radius:50px;margin-bottom:20px;}
.retry-row{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;}
.daily-result-badge{background:#d9770622;border:1.5px solid #d97706;border-radius:10px;
  padding:10px 14px;margin-bottom:16px;font-size:.82rem;font-weight:700;color:#fbbf24;}

/* ── BADGE TOAST ── */
.badge-toast{position:fixed;bottom:70px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card);border:2px solid var(--accent);border-radius:14px;
  padding:11px 18px;display:flex;align-items:center;gap:11px;
  box-shadow:0 8px 40px #00000088;font-weight:800;font-size:.85rem;
  opacity:0;transition:opacity .3s,transform .3s;z-index:500;pointer-events:none;
  min-width:250px;max-width:330px;}
.badge-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.badge-toast-icon{font-size:1.7rem;flex-shrink:0;}
.badge-toast-text small{display:block;font-size:.62rem;color:var(--muted);
  font-weight:600;letter-spacing:1px;text-transform:uppercase;}

/* ── AUTH ── */
.auth-panel{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  overflow:hidden;box-shadow:0 10px 60px #00000055;animation:fadeUp .3s cubic-bezier(.4,0,.2,1);}
.auth-body{padding:28px 24px 24px;}
.auth-title{font-family:'Bangers',cursive;font-size:1.6rem;letter-spacing:3px;
  color:var(--accent);text-shadow:2px 2px 0 var(--accent2);margin-bottom:4px;}
.auth-sub{font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:1px;
  text-transform:uppercase;margin-bottom:20px;}
.auth-field{margin-bottom:14px;position:relative;}
.auth-label{font-size:.65rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:5px;}
.auth-input{width:100%;background:#ffffff08;border:1.5px solid #ffffff14;border-radius:10px;
  color:var(--text);font-family:'Nunito',sans-serif;font-weight:700;font-size:.95rem;
  padding:11px 42px 11px 13px;outline:none;transition:border-color .13s;}
.auth-input:focus{border-color:var(--accent);}
.auth-input.no-icon{padding-right:13px;}
.pw-toggle{position:absolute;right:12px;bottom:11px;background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;padding:0;transition:color .13s;}
.pw-toggle:hover{color:var(--text);}
.auth-error{color:var(--wrong);font-size:.75rem;font-weight:700;margin-top:7px;
  display:none;padding:8px 11px;background:rgba(248,113,113,.08);
  border:1px solid rgba(248,113,113,.3);border-radius:8px;}
.auth-error.show{display:block;}
.auth-switch{text-align:center;margin-top:14px;font-size:.75rem;font-weight:700;color:var(--muted);}
.auth-link{color:var(--accent);cursor:pointer;text-decoration:underline;}
.pw-strength{height:3px;border-radius:99px;margin-top:5px;transition:width .3s,background .3s;width:0;}
.pw-hint{font-size:.62rem;font-weight:700;color:var(--muted);margin-top:4px;}
.auth-loading{text-align:center;padding:12px 0;color:var(--muted);font-size:.8rem;
  font-weight:700;letter-spacing:1px;display:none;}
.auth-loading.show{display:block;}

/* ── PROFILE ── */
.profile-hero{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  overflow:hidden;margin-bottom:11px;box-shadow:0 6px 40px #00000044;
  animation:fadeUp .3s cubic-bezier(.4,0,.2,1);}
.ph-stripe{height:4px;background:linear-gradient(90deg,var(--accent2),var(--accent),var(--purple));}
.ph-body{padding:18px 16px 16px;}
.ph-top{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.avatar-ring{width:54px;height:54px;border-radius:50%;padding:2px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--accent));}
.avatar-inner{width:100%;height:100%;border-radius:50%;background:var(--bg);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;}
.ph-name{font-family:'Bangers',cursive;font-size:1.4rem;letter-spacing:2px;}
.ph-sub{font-size:.65rem;font-weight:700;color:var(--muted);margin-top:1px;}
.ph-edit{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.7rem;
  font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:0;}
.name-input{background:none;border:none;border-bottom:1.5px dashed var(--muted);
  color:var(--text);font-family:'Bangers',cursive;font-size:1.2rem;
  letter-spacing:2px;outline:none;width:160px;}
.tier-block{margin-bottom:14px;}
.tier-row-big{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.tier-ball-big{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.tier-dets{flex:1;}
.tier-title-big{font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:2px;}
.tier-sub-big{font-size:.65rem;font-weight:700;color:var(--muted);margin-top:1px;}
.tier-track-big{height:8px;background:#ffffff10;border-radius:99px;overflow:hidden;}
.tier-fill-big{height:100%;border-radius:99px;transition:width .6s cubic-bezier(.4,0,.2,1);}
.tier-labels{display:flex;justify-content:space-between;margin-top:3px;
  font-size:.6rem;font-weight:700;color:var(--muted);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px;}
@media(max-width:400px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:var(--surface);border-radius:10px;border:1.5px solid var(--border);
  padding:9px 5px;text-align:center;}
.stat-val{font-family:'Bangers',cursive;font-size:1.35rem;letter-spacing:1px;color:var(--accent);}
.stat-lbl{font-size:.56rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-top:1px;}

/* Today stats card */
.today-card{background:var(--surface);border-radius:12px;border:1.5px solid #8b5cf644;
  padding:13px 14px;margin-bottom:11px;}
.today-title{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;
  color:var(--purple);margin-bottom:8px;}
.today-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
.today-stat{background:var(--card);border-radius:10px;padding:8px 5px;text-align:center;
  border:1.5px solid var(--border);}
.today-val{font-family:'Bangers',cursive;font-size:1.25rem;color:var(--purple);}
.today-lbl{font-size:.55rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);margin-top:1px;}

/* Type mastery wheel */
.mastery-section{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  overflow:hidden;margin-bottom:11px;animation:fadeUp .4s cubic-bezier(.4,0,.2,1);}
.mastery-wheel-wrap{padding:16px;display:flex;justify-content:center;}
.mastery-legend{padding:0 12px 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
@media(max-width:360px){.mastery-legend{grid-template-columns:repeat(2,1fr);}}
.mastery-legend-item{display:flex;align-items:center;gap:5px;font-size:.62rem;font-weight:700;}
.mastery-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

/* Perf section */
.perf-section{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  overflow:hidden;margin-bottom:11px;animation:fadeUp .35s cubic-bezier(.4,0,.2,1);}
.section-hdr{padding:13px 14px 9px;border-bottom:1.5px solid var(--border);}
.section-hdr-title{font-family:'Bangers',cursive;font-size:1.05rem;letter-spacing:2px;color:var(--accent);}
.section-hdr-sub{font-size:.62rem;font-weight:700;color:var(--muted);letter-spacing:1px;
  text-transform:uppercase;margin-top:1px;}
.perf-list{padding:9px 11px;}
.perf-item{display:flex;align-items:center;gap:9px;padding:6px 0;
  border-bottom:1px solid #ffffff07;}
.perf-item:last-child{border-bottom:none;}
.perf-pill{font-family:'Bangers',cursive;font-size:.8rem;letter-spacing:1px;
  padding:2px 11px;border-radius:20px;border:1.5px solid currentColor;
  background:rgba(0,0,0,.3);white-space:nowrap;flex-shrink:0;min-width:70px;text-align:center;}
.perf-bar-wrap{flex:1;height:7px;background:#ffffff0a;border-radius:99px;overflow:hidden;}
.perf-bar-fill{height:100%;border-radius:99px;}
.perf-pct{font-family:'Bangers',cursive;font-size:.82rem;min-width:34px;text-align:right;}
.perf-count{font-size:.6rem;color:var(--muted);font-weight:700;min-width:38px;text-align:right;}

/* Challenge history trend */
.trend-section{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  overflow:hidden;margin-bottom:11px;}
.trend-canvas-wrap{padding:14px 12px 8px;}

/* Badges */
.badges-section{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  overflow:hidden;margin-bottom:11px;animation:fadeUp .4s cubic-bezier(.4,0,.2,1);}
.badges-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:13px 11px;}
@media(max-width:360px){.badges-grid{grid-template-columns:repeat(2,1fr);}}
.badge-item{background:var(--surface);border-radius:10px;border:1.5px solid var(--border);
  padding:11px 7px;text-align:center;transition:transform .12s,border-color .12s;}
.badge-item.earned{border-color:#f7d02c44;background:#f7d02c08;}
.badge-item.earned:hover{transform:translateY(-2px);}
.badge-icon{font-size:1.7rem;margin-bottom:3px;filter:grayscale(1);opacity:.3;}
.badge-item.earned .badge-icon{filter:none;opacity:1;}
.badge-name{font-family:'Bangers',cursive;font-size:.72rem;letter-spacing:1px;color:var(--muted);}
.badge-item.earned .badge-name{color:var(--accent);}
.badge-desc{font-size:.56rem;color:var(--muted);font-weight:600;margin-top:2px;line-height:1.3;}

/* Avatar picker */
.avatar-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:14px 12px;}
.av-opt{font-size:1.5rem;padding:8px;border-radius:10px;border:2px solid transparent;
  cursor:pointer;text-align:center;background:#ffffff06;
  transition:border-color .13s,background .13s;}
.av-opt:hover{background:#ffffff10;border-color:var(--accent);}
.av-opt.sel{border-color:var(--accent);background:#f7d02c16;}

/* Daily streak card */
.daily-streak-card{background:var(--surface);border-radius:10px;border:1.5px solid #d9770644;
  padding:11px 13px;margin-bottom:11px;display:flex;align-items:center;gap:11px;}
.ds-flame{font-size:1.8rem;}
.ds-info{flex:1;}
.ds-title{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;color:#fbbf24;}
.ds-sub{font-size:.65rem;font-weight:700;color:var(--muted);margin-top:1px;}

/* ── LEADERBOARD ── */
.lb-tabs{display:flex;gap:0;background:var(--surface);border-radius:12px;
  border:1.5px solid var(--border);overflow:hidden;margin-bottom:12px;}
.lb-tab{flex:1;background:none;border:none;color:var(--muted);font-family:'Bangers',cursive;
  font-size:.8rem;letter-spacing:1.5px;padding:10px 4px;cursor:pointer;
  text-align:center;transition:background .12s,color .12s;border-right:1.5px solid var(--border);}
.lb-tab:last-child{border-right:none;}
.lb-tab.active{background:#f7d02c16;color:var(--accent);}
.lb-row{display:flex;align-items:center;gap:10px;padding:10px 13px;
  border-bottom:1px solid var(--border);transition:background .12s;}
.lb-row:last-child{border-bottom:none;}
.lb-row:hover{background:#ffffff05;}
.lb-row.me{background:#f7d02c0a;border-left:3px solid var(--accent);}
.lb-rank{font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:1px;
  min-width:30px;color:var(--muted);}
.lb-rank.gold{color:#f7d02c;}
.lb-rank.silver{color:#b0b0c0;}
.lb-rank.bronze{color:#cd7f32;}
.lb-ball{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.lb-avatar{font-size:1.3rem;flex-shrink:0;}
.lb-name{flex:1;font-weight:800;font-size:.88rem;}
.lb-pts{font-family:'Bangers',cursive;font-size:1.05rem;color:var(--accent);}
.lb-empty{padding:24px;text-align:center;color:var(--muted);font-size:.82rem;font-weight:700;}

/* ── POKÉDEX ── */
.pokedex-search{width:100%;background:#ffffff08;border:1.5px solid #ffffff14;
  border-radius:12px;color:var(--text);font-family:'Nunito',sans-serif;font-weight:700;
  font-size:.9rem;padding:11px 14px;outline:none;margin-bottom:12px;
  transition:border-color .13s;}
.pokedex-search:focus{border-color:var(--accent);}
.gen-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.gen-btn{background:#ffffff08;border:1.5px solid #ffffff10;border-radius:20px;
  color:var(--muted);font-family:'Bangers',cursive;font-size:.78rem;letter-spacing:1px;
  padding:4px 12px;cursor:pointer;transition:background .12s,border-color .12s,color .12s;}
.gen-btn:hover,.gen-btn.sel{background:#ffffff14;border-color:var(--accent);color:var(--accent);}
.pokedex-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
@media(min-width:500px){.pokedex-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:700px){.pokedex-grid{grid-template-columns:repeat(4,1fr);}}
.poke-card{background:var(--card);border-radius:12px;border:1.5px solid var(--border);
  padding:12px 8px;text-align:center;cursor:pointer;
  transition:border-color .12s,transform .11s,background .12s;}
.poke-card:hover{border-color:var(--accent);transform:translateY(-2px);background:#ffffff04;}
.poke-card-sprite{width:72px;height:72px;image-rendering:pixelated;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));}
.poke-card-num{font-size:.6rem;font-weight:800;color:var(--muted);letter-spacing:1px;}
.poke-card-name{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:1px;margin:2px 0;}
.poke-card-types{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;}
.poke-type-badge{font-family:'Bangers',cursive;font-size:.7rem;letter-spacing:1px;
  padding:1px 8px;border-radius:20px;border:1.5px solid currentColor;background:rgba(0,0,0,.3);}

/* Pokemon detail modal */
.poke-modal-overlay{position:fixed;inset:0;background:#000000bb;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:20px;}
.poke-modal{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  max-width:420px;width:100%;overflow:hidden;max-height:90vh;overflow-y:auto;
  animation:fadeUp .2s cubic-bezier(.4,0,.2,1);}
.poke-modal-header{padding:20px;text-align:center;position:relative;}
.poke-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;
  color:var(--muted);font-size:1.4rem;cursor:pointer;padding:0;line-height:1;}
.poke-modal-sprite{width:120px;height:120px;image-rendering:pixelated;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.5));}
.poke-modal-name{font-family:'Bangers',cursive;font-size:2rem;letter-spacing:2px;color:var(--accent);}
.poke-modal-num{font-size:.7rem;font-weight:800;color:var(--muted);letter-spacing:2px;}
.poke-modal-types{display:flex;gap:7px;justify-content:center;margin-top:8px;flex-wrap:wrap;}
.poke-modal-body{padding:0 16px 20px;}
.matchup-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:8px;}
.matchup-item{background:var(--surface);border-radius:8px;padding:7px;text-align:center;
  border:1.5px solid var(--border);}
.matchup-mult{font-family:'Bangers',cursive;font-size:1.2rem;}
.matchup-type{font-size:.65rem;font-weight:700;color:var(--muted);margin-top:1px;}

/* ── WEAKNESS CALCULATOR / TEAM BUILDER ── */
.team-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:14px;}
@media(min-width:500px){.team-slots{grid-template-columns:repeat(3,1fr);}}
.team-slot{background:var(--surface);border-radius:12px;border:1.5px solid var(--border);
  padding:10px;text-align:center;cursor:pointer;min-height:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:border-color .12s;}
.team-slot:hover,.team-slot.active{border-color:var(--accent);}
.team-slot-empty{color:var(--muted);font-size:.75rem;font-weight:700;}
.heatmap{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;}
@media(min-width:500px){.heatmap{grid-template-columns:repeat(6,1fr);}}
.heatmap-cell{border-radius:8px;padding:8px 4px;text-align:center;}
.heatmap-mult{font-family:'Bangers',cursive;font-size:1rem;}
.heatmap-type{font-size:.55rem;font-weight:800;color:rgba(255,255,255,.6);margin-top:1px;}

/* ── TYPE CHART ── */
.chart-hdr{background:var(--card);border-radius:var(--r);border:1.5px solid var(--border);
  padding:14px 16px 11px;margin-bottom:10px;box-shadow:0 4px 30px #00000044;
  overflow:hidden;position:relative;}
.chart-hdr::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent2),var(--accent),var(--purple));}
.chart-hdr-title{font-family:'Bangers',cursive;font-size:1.45rem;letter-spacing:3px;
  color:var(--accent);text-shadow:2px 2px 0 var(--accent2);}
.chart-hdr-sub{color:var(--muted);font-size:.63rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;margin-top:2px;}
.chart-legend{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}
.leg{display:flex;align-items:center;gap:4px;font-size:.65rem;font-weight:700;}
.leg-sw{width:22px;height:16px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-family:'Bangers',cursive;font-size:.72rem;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  border:1.5px solid var(--border);background:var(--card);box-shadow:0 10px 60px #00000055;}
table.tc{border-collapse:collapse;min-width:580px;width:100%;font-size:.63rem;}
table.tc th.corner{background:var(--bg);position:sticky;left:0;top:0;z-index:4;
  border:1px solid #ffffff08;min-width:58px;font-size:.52rem;color:var(--muted);
  padding:3px 5px;font-weight:800;}
table.tc th.def-lbl{background:var(--surface);font-family:'Bangers',cursive;font-size:.6rem;
  letter-spacing:.5px;padding:4px 2px;text-align:center;white-space:nowrap;
  border:1px solid #ffffff08;position:sticky;top:0;z-index:2;
  writing-mode:vertical-lr;transform:rotate(180deg);height:64px;vertical-align:bottom;cursor:pointer;}
table.tc th.def-lbl:hover{background:#ffffff0d;}
table.tc td.row-type{background:var(--surface);font-family:'Bangers',cursive;font-size:.73rem;
  letter-spacing:.5px;padding:3px 8px;white-space:nowrap;text-align:right;
  border:1px solid #ffffff08;position:sticky;left:0;z-index:1;cursor:pointer;}
table.tc td.row-type:hover{background:#ffffff0d;}
table.tc td.cell{width:25px;min-width:21px;height:25px;text-align:center;vertical-align:middle;
  font-family:'Bangers',cursive;font-size:.78rem;font-weight:900;
  border:1px solid #ffffff06;cursor:default;transition:transform .1s;}
table.tc td.cell:hover{transform:scale(1.3);z-index:5;position:relative;}
.c2{background:#b8390e;color:#ffcfb8;}.c05{background:#2a1a55;color:#a78bfa;}
.c0{background:#1a1a1a;color:#555;}.c1{background:transparent;color:#2a2a4a;}
table.tc tr.hl td{background:#ffffff12!important;}
table.tc tr.hl td.row-type{background:#f7d02c22!important;color:var(--accent)!important;}
table.tc td.hl-col{background:#ffffff12!important;}
table.tc th.def-lbl.hl-col{background:#f7d02c22!important;color:var(--accent)!important;}
table.tc td.cell.hl-cross{background:#f7d02c18!important;outline:1.5px solid #f7d02c55;
  z-index:2;position:relative;}

/* ── POKÉMON QUIZZES TYPE SELECT ── */
.gen-range-wrap{background:var(--surface);border-radius:12px;border:1.5px solid var(--border);
  padding:13px 14px;margin-bottom:12px;}
.gen-range-title{font-family:'Bangers',cursive;font-size:.9rem;letter-spacing:2px;
  color:var(--muted);margin-bottom:8px;}
.gen-range-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.gen-range-label{font-size:.65rem;font-weight:800;color:var(--muted);min-width:36px;}
.gen-select{background:#ffffff08;border:1.5px solid #ffffff14;border-radius:8px;
  color:var(--text);font-family:'Nunito',sans-serif;font-weight:700;font-size:.85rem;
  padding:6px 10px;outline:none;cursor:pointer;}
.gen-select:focus{border-color:var(--accent);}

/* ── UTILS ── */
.hidden{display:none!important;}
.mt8{margin-top:8px;}
.mt12{margin-top:12px;}
.gap8{gap:8px;}
