*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#000;--on-primary:#fff;--primary-container:#1b1b1b;--on-primary-container:#848484;
  --secondary:#5e5e5d;--on-secondary:#fff;--secondary-container:#e0dfde;
  --tertiary:#000;--on-tertiary:#fff;--tertiary-container:#261900;--on-tertiary-container:#a17f3b;
  --background:#fbf9f8;--on-background:#1b1c1c;
  --surface:#fbf9f8;--surface-dim:#dbd9d9;--surface-bright:#fbf9f8;
  --surface-container-lowest:#fff;--surface-container-low:#f5f3f3;--surface-container:#efeded;
  --surface-container-high:#eae8e7;--surface-container-highest:#e4e2e2;
  --on-surface:#1b1c1c;--on-surface-variant:#4c4546;
  --outline:#7e7576;--outline-variant:#cfc4c5;
  --error:#ba1a1a;--on-error:#fff;--error-container:#ffdad6;--on-error-container:#93000a;
  --inverse-surface:#303030;--inverse-on-surface:#f2f0f0;
  --margin-mobile:20px;--gutter:24px;--section-gap:128px
}
html{font-size:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  background:var(--background);color:var(--on-background);
  min-height:max(884px,100dvh);padding-top:64px;padding-bottom:96px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font:inherit;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

.font-display{font-family:'Bodoni Moda',Georgia,serif;font-weight:400}
.font-display-lg{font-size:clamp(2.5rem,10vw,4.5rem);line-height:1.1;letter-spacing:-0.02em}
.font-display-lg-mobile{font-size:clamp(2rem,8vw,3rem);line-height:1.083;letter-spacing:-0.01em}
.font-headline-lg{font-size:clamp(1.75rem,5vw,2.5rem);line-height:1.2}
.font-headline-md{font-size:clamp(1.5rem,4vw,2rem);line-height:1.25}
.font-headline-sm{font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.3}
.font-body-lg{font-size:1.125rem;line-height:1.555;letter-spacing:0.01em}
.font-body-md{font-size:1rem;line-height:1.5}
.font-body-sm{font-size:.875rem;line-height:1.428}
.font-label-caps{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase}
.font-label-sm{font-size:.875rem;line-height:1.428}

.text-primary{color:var(--primary)}.text-on-primary{color:var(--on-primary)}
.text-surface{color:var(--surface)}.text-on-surface{color:var(--on-surface)}
.text-on-surface-variant{color:var(--on-surface-variant)}
.text-outline{color:var(--outline)}.text-outline-variant{color:var(--outline-variant)}
.text-tertiary{color:var(--tertiary)}.text-on-tertiary-container{color:var(--on-tertiary-container)}
.text-error{color:var(--error)}.text-secondary{color:var(--secondary)}

.bg-primary{background:var(--primary)}.bg-on-primary{background:var(--on-primary)}
.bg-surface{background:var(--surface)}.bg-surface-container{background:var(--surface-container)}
.bg-surface-container-lowest{background:var(--surface-container-lowest)}
.bg-surface-container-low{background:var(--surface-container-low)}
.bg-surface-container-high{background:var(--surface-container-high)}
.bg-surface-container-highest{background:var(--surface-container-highest)}
.bg-surface-dim{background:var(--surface-dim)}
.bg-surface-variant{background:var(--surface-variant)}
.bg-secondary-container{background:var(--secondary-container)}
.bg-inverse-surface{background:var(--inverse-surface)}
.bg-error{background:var(--error)}.bg-primary\/5{background:rgba(0,0,0,.05)}

.border-outline-variant{border-color:var(--outline-variant)}
.border-primary{border-color:var(--primary)}.border-surface{border-color:var(--surface)}
.border-on-surface-variant{border-color:var(--on-surface-variant)}
.border-outline{border-color:var(--outline)}

.top-app-bar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--surface);
  border-bottom:1px solid var(--outline-variant);height:64px
}
.top-app-bar .inner{
  display:flex;align-items:center;justify-content:space-between;
  height:100%;padding:0 var(--margin-mobile)
}
.top-app-bar .brand{
  display:flex;align-items:center;height:100%;color:var(--on-surface)
}
.top-bar-action{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;line-height:1;letter-spacing:0.1em;font-weight:600;text-transform:uppercase;
  padding:8px 16px;min-height:36px;border-radius:9999px;
  background:var(--primary);color:var(--on-primary);transition:all .15s;cursor:pointer;
  white-space:nowrap;border:none;font-family:inherit
}
.top-bar-action:active{background:var(--inverse-surface)}
.top-bar-action .material-symbols-outlined{font-size:1.25rem}
.top-bar-label{
  font-size:.75rem;line-height:1;letter-spacing:0.1em;font-weight:600;text-transform:uppercase;
  color:var(--on-surface-variant)
}

.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:var(--surface);
  border-top:1px solid var(--outline-variant);height:80px;
  padding-bottom:env(safe-area-inset-bottom,0)
}
.bottom-nav .inner{
  display:flex;justify-content:space-around;align-items:center;height:100%;padding:0 var(--gutter)
}
.bottom-nav .tab{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:.625rem;line-height:1;letter-spacing:0.1em;font-weight:600;text-transform:uppercase;
  color:var(--on-surface-variant);opacity:.6;transition:opacity .15s;padding:8px;min-width:56px
}
.bottom-nav .tab.active{color:var(--primary);opacity:1}
.bottom-nav .tab .material-symbols-outlined{font-size:1.5rem}
.bottom-nav .tab:active{opacity:.8}

.page{padding:0 var(--margin-mobile) var(--gutter)}
.page-header{padding:24px 0;text-align:center}
.page-header h2{font-family:'Bodoni Moda',Georgia,serif;font-size:clamp(1.5rem,4vw,2rem);line-height:1.25}
.page-header p{font-size:1rem;line-height:1.5;color:var(--on-surface-variant);margin-top:8px}

.aspect-square{aspect-ratio:1/1;width:100%;overflow:hidden;position:relative}

.hero-frame{background:var(--surface-container-lowest);position:relative}
.hero-frame .overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 100%);
  pointer-events:none
}
.hero-frame .bottom-text{
  position:absolute;bottom:20px;left:20px;right:20px;color:#fff;z-index:1
}
.hero-frame .bottom-text .label{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;opacity:.8}
.hero-frame .bottom-text .value{font-size:1.125rem;line-height:1.555;font-weight:500}

.stats-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  border-top:1px solid var(--outline-variant)
}
.stats-grid .stat{
  padding:16px;border-bottom:1px solid var(--outline-variant)
}
.stats-grid .stat:nth-child(odd){border-right:1px solid var(--outline-variant)}
.stats-grid .stat .stat-label{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;color:var(--on-surface-variant)}
.stats-grid .stat .stat-value{font-size:1rem;line-height:1.5;margin-top:4px;color:var(--on-surface)}

.progress-track{height:1px;background:var(--outline-variant);position:relative;width:100%}
.progress-fill{height:100%;background:var(--primary);transition:width 2s cubic-bezier(.4,0,.2,1);width:0}
.progress-labels{display:flex;justify-content:space-between;margin-top:8px}
.progress-labels span{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;color:var(--on-surface-variant)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;
  padding:16px 24px;min-height:48px;transition:all .15s;text-align:center
}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:active{background:var(--inverse-surface)}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-ghost:active{background:var(--surface-container)}
.btn-block{width:100%;display:flex}

.filter-bar{
  display:flex;gap:0;overflow-x:auto;padding:0 0 16px;
  -ms-overflow-style:none;scrollbar-width:none
}
.filter-bar::-webkit-scrollbar{display:none}
.filter-tab{
  white-space:nowrap;padding:8px 16px 12px;
  font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;
  color:var(--on-surface-variant);border-bottom:2px solid transparent;transition:all .15s;flex-shrink:0
}
.filter-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.filter-tab:active{color:var(--primary)}

.collection-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}
.pokemon-card{position:relative;cursor:pointer}
.pokemon-card .img-wrap{
  aspect-ratio:1/1;background:var(--surface-container-lowest);display:flex;
  align-items:center;justify-content:center;overflow:hidden
}
.pokemon-card .img-wrap img{width:75%;height:75%;object-fit:contain;opacity:.9;transition:transform .2s}
.pokemon-card:active .img-wrap img{transform:scale(1.05)}
.pokemon-card .info{padding:8px 0}
.pokemon-card .num{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;color:var(--on-surface-variant)}
.pokemon-card .name{font-size:1.125rem;line-height:1.555;letter-spacing:0.01em;margin-top:2px}
.pokemon-card.locked .img-wrap{background:var(--surface-container)}
.pokemon-card.locked .img-wrap img{opacity:.2;filter:grayscale(1)}
.pokemon-card.locked .num{color:var(--outline)}
.pokemon-card.locked .name{color:var(--outline);font-style:italic}

.inventory-list{}
.inventory-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 0;border-bottom:1px solid var(--outline-variant);transition:background .15s
}
.inventory-item:active{background:var(--surface-container-low)}
.inventory-item .icon-wrap{
  width:48px;height:48px;border-radius:9999px;
  background:var(--surface-container);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-right:16px;font-size:1.25rem
}
.inventory-item .item-info{flex:1;min-width:0}
.inventory-item .item-name{font-size:1rem;line-height:1.5}
.inventory-item .item-desc{font-size:.875rem;line-height:1.428;color:var(--on-surface-variant);margin-top:2px}
.inventory-item .qty{font-family:'Bodoni Moda',Georgia,serif;font-size:1.5rem;line-height:1.25;flex-shrink:0;margin-left:12px}

.carousel{
  display:flex;gap:16px;overflow-x:auto;padding:4px 0 16px;
  scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none
}
.carousel::-webkit-scrollbar{display:none}
.carousel-card{
  flex:0 0 280px;scroll-snap-align:center;
  aspect-ratio:3/4;position:relative;overflow:hidden;
  transition:opacity .2s;cursor:pointer
}
.carousel-card.inactive{opacity:.6}
.carousel-card:active{opacity:1}
.carousel-card .check-badge{
  position:absolute;top:12px;right:12px;width:28px;height:28px;
  border-radius:9999px;background:var(--primary);color:var(--on-primary);
  display:flex;align-items:center;justify-content:center;font-size:1rem;z-index:2
}
.carousel-card .card-image{width:100%;height:100%;object-fit:cover;display:block}
.carousel-card .card-overlay{
  position:absolute;inset:0;border:1px solid var(--outline-variant);
  transition:border-color .2s;pointer-events:none
}
.carousel-card:active .card-overlay{border-color:var(--primary)}
.carousel-card .card-label{
  position:absolute;bottom:16px;left:16px;right:16px;color:#fff;z-index:1
}
.carousel-card .card-label h3{font-family:'Bodoni Moda',Georgia,serif;font-size:1.25rem;line-height:1.3}
.carousel-card .card-label p{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;opacity:.8;margin-top:4px}

.duration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.duration-btn{
  padding:16px 8px;text-align:center;
  border:1px solid var(--outline-variant);transition:all .15s;
  font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase
}
.duration-btn:active{border-color:var(--primary)}
.duration-btn.active{border-color:var(--primary)}
.duration-btn.active::after{content:'';display:block;height:2px;background:var(--primary);margin-top:8px}
.duration-btn .dur-label{display:block}
.duration-btn .dur-sub{display:block;margin-top:4px;color:var(--on-surface-variant);font-weight:400}

.reward-card{
  background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  padding:24px;margin-bottom:16px;position:relative
}
.reward-card:active{background:rgba(0,0,0,.03)}
.reward-card .reward-img{width:48px;height:48px;object-fit:contain;margin-bottom:12px}
.reward-card .reward-num{font-size:.75rem;line-height:1.333;letter-spacing:0.15em;font-weight:600;text-transform:uppercase;color:var(--on-surface-variant)}
.reward-card .reward-name{font-family:'Bodoni Moda',Georgia,serif;font-size:1.5rem;line-height:1.25;margin-top:4px}

.item-circle{
  width:64px;height:64px;border-radius:9999px;
  border:1px solid var(--outline-variant);display:flex;
  align-items:center;justify-content:center;font-size:1.5rem;
  transition:border-color .2s;background:var(--surface-container-lowest)
}
.item-circle:active{border-color:var(--primary)}

.settings-section{margin-bottom:32px}
.settings-section h3{
  font-family:'Bodoni Moda',Georgia,serif;
  font-size:1.25rem;line-height:1.3;margin-bottom:16px
}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;border-bottom:1px solid var(--outline-variant)
}
.setting-row:last-child{border-bottom:none}
.setting-row .setting-label{font-size:1rem;line-height:1.5}
.setting-row .setting-desc{font-size:.875rem;line-height:1.428;color:var(--on-surface-variant)}

.toggle{position:relative;width:44px;height:24px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle .slider{
  position:absolute;cursor:pointer;inset:0;
  background:var(--surface-container-highest);border-radius:9999px;transition:.2s
}
.toggle .slider::before{
  content:'';position:absolute;left:2px;bottom:2px;width:20px;height:20px;
  background:var(--on-primary);border-radius:50%;transition:.2s
}
.toggle input:checked+.slider{background:var(--primary)}
.toggle input:checked+.slider::before{transform:translateX(20px)}

.msg-toast{
  position:fixed;bottom:96px;left:20px;right:20px;z-index:100;
  padding:16px 20px;background:var(--inverse-surface);color:var(--inverse-on-surface);
  font-size:.875rem;line-height:1.428;border-radius:4px;
  opacity:0;transform:translateY(16px);transition:all .3s;pointer-events:none
}
.msg-toast.show{opacity:1;transform:translateY(0);pointer-events:auto}

.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:64px 20px;text-align:center
}
.empty-state .icon{font-size:3rem;margin-bottom:16px;color:var(--outline)}
.empty-state h3{font-family:'Bodoni Moda',Georgia,serif;font-size:1.25rem;line-height:1.3}
.empty-state p{font-size:1rem;line-height:1.5;color:var(--on-surface-variant);margin-top:8px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

.type-badge{
  display:inline-block;padding:2px 8px;
  font-size:.625rem;line-height:1.2;letter-spacing:0.1em;font-weight:600;text-transform:uppercase;
  border:1px solid var(--outline-variant);border-radius:2px;margin:2px
}
.type-badge.type-grass{color:#2d8a4e;border-color:#2d8a4e}
.type-badge.type-fire{color:#c72500;border-color:#c72500}
.type-badge.type-water{color:#1565c0;border-color:#1565c0}
.type-badge.type-electric{color:#b8860b;border-color:#b8860b}
.type-badge.type-psychic{color:#a040a0;border-color:#a040a0}
.type-badge.type-ice{color:#006978;border-color:#006978}
.type-badge.type-dragon{color:#6c3fa0;border-color:#6c3fa0}
.type-badge.type-dark{color:#3e3e3e;border-color:#3e3e3e}
.type-badge.type-fairy{color:#c44a8b;border-color:#c44a8b}
.type-badge.type-fighting{color:#8b3a2a;border-color:#8b3a2a}
.type-badge.type-flying{color:#6b5fa0;border-color:#6b5fa0}
.type-badge.type-poison{color:#7b3fa0;border-color:#7b3fa0}
.type-badge.type-ground{color:#8b6b2a;border-color:#8b6b2a}
.type-badge.type-rock{color:#6b6b6b;border-color:#6b6b6b}
.type-badge.type-bug{color:#6b8b2a;border-color:#6b8b2a}
.type-badge.type-ghost{color:#5b5b8b;border-color:#5b5b8b}
.type-badge.type-steel{color:#5b7b8b;border-color:#5b7b8b}
.type-badge.type-normal{color:#6b6b6b;border-color:#6b6b6b}

.rare-indicator{
  display:inline-flex;align-items:center;gap:4px;padding:2px 8px;
  font-size:.625rem;line-height:1.2;letter-spacing:0.1em;font-weight:600;text-transform:uppercase;
  background:var(--primary);color:var(--on-primary);border-radius:2px
}

.loading-dots::after{content:'';animation:dots 1.5s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}100%{content:''}}

.fade-in{animation:fadeIn .6s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (min-width:768px){
  .collection-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .stats-grid .stat:nth-child(odd){border-right:none}
  .stats-grid .stat:nth-child(-n+4){border-bottom:1px solid var(--outline-variant)}
}