/* Per-Pokémon page frame */
.ssg-frame{padding:2rem 1.25rem 3rem;background:var(--bg-deep)}
.ssg-frame-inner{max-width:900px;margin:0 auto;min-height:1200px}
.js-detail-loaded .ssg-frame-inner{min-height:0}
.ssg-back{display:inline-block;font-family:"Outfit",sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);text-decoration:none;margin-bottom:1.25rem;transition:color 0.2s}
.ssg-back:hover{color:var(--gold)}
/* Hero card: hidden by default, revealed after delay only on slow connections.
   On fast/cached loads JS renders the detail before the timeout fires,
   so the card never becomes visible — no layout flash. */
.ssg-hero-card{display:flex;align-items:center;gap:2rem;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:16px;margin-bottom:2rem;opacity:0;pointer-events:none;transition:opacity 0.2s}
.ssg-hero-card.ssg-hero-visible{opacity:1;pointer-events:auto}
.ssg-hero-img{width:180px;height:180px;object-fit:contain;flex-shrink:0}
.ssg-hero-orb{width:120px;height:120px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;color:#fff;flex-shrink:0}
.ssg-hero-info{flex:1;min-width:0}
.ssg-hero-num{font-family:"Outfit",sans-serif;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted);margin:0 0 0.35rem}
.ssg-hero-name{font-family:"Instrument Serif",serif;font-size:2.6rem;color:var(--text-primary);line-height:1.1;margin:0 0 0.6rem;letter-spacing:-0.02em}
.ssg-hero-types{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.75rem}
.ssg-type-badge{display:inline-block;padding:0.2em 0.8em;border-radius:999px;font-family:"Outfit",sans-serif;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.07em;color:#fff}
.ssg-hero-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.65;margin:0}
/* Hide hero card once JS has rendered the full detail (avoids duplicate) */
.js-detail-loaded .ssg-hero-card{display:none!important}
@media(max-width:600px){
    .ssg-hero-card{flex-direction:column;gap:1rem;text-align:center}
    .ssg-hero-types{justify-content:center}
    .ssg-hero-img{width:120px;height:120px}
    .ssg-hero-name{font-size:2rem}
}
/* The inline detail container reuses .modal styling */
.ssg-inline{animation:rise 0.25s ease}
/* "Browse more Pokémon" section heading above the grid */
.ssg-more-heading{max-width:1440px;margin:2.5rem auto 0;padding:0 3rem;font-family:"Instrument Serif",serif;font-size:2rem;color:var(--text-primary);letter-spacing:-0.02em}
/* Hide the big generic page header and modal overlay on per-Pokémon pages */
body.ssg-detail .page-header{display:none}
body.ssg-detail .stats-bar{display:none}
body.ssg-detail #modalOverlay{display:none !important}
@media(max-width:860px){
    .ssg-frame{padding:1rem 0.75rem 2rem}
    .ssg-more-heading{padding:0 1.5rem;font-size:1.5rem;margin-top:2rem}
}
/* ── Sticky search + prev/next bar (per-Pokémon pages) ────────────
   On per-Pokémon pages the prev/next buttons live *inside* the sticky
   search row, flanking the search box, so search and navigation stay
   pinned to the top and visible at all times while you scroll. */
body.ssg-detail .controls{padding-top:0.85rem;padding-bottom:0.85rem;box-shadow:0 8px 24px -16px rgba(0,0,0,0.9)}
body.ssg-detail .search-row{flex-wrap:nowrap;gap:0.55rem;align-items:stretch}
body.ssg-detail .search-box{flex:1 1 auto;min-width:0}
/* The generic "complete National Pokédex" intro is redundant beside the
   per-Pokémon hero description — hide it on detail pages. */
body.ssg-detail .dex-intro{display:none}

.pn-btn{display:flex;align-items:center;gap:0.55rem;flex:0 0 auto;max-width:170px;padding:0 0.95rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--text-primary);font-family:"Outfit",sans-serif;transition:border-color .15s,background .15s,transform .12s}
.pn-btn:hover{border-color:var(--gold);background:var(--bg-card);transform:translateY(-1px)}
.pn-btn:active{transform:translateY(0)}
.pn-next{flex-direction:row-reverse;text-align:right}
.pn-arrow{font-size:1.05rem;font-weight:700;color:var(--gold);flex-shrink:0;line-height:1}
.pn-text{display:flex;flex-direction:column;min-width:0;line-height:1.18}
.pn-hint{font-size:0.55rem;font-weight:800;text-transform:uppercase;letter-spacing:0.12em;color:var(--text-muted)}
.pn-name{font-size:0.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px}
@media(max-width:760px){
    .pn-text{display:none}
    .pn-btn{padding:0 0.8rem}
    .pn-arrow{font-size:1.25rem}
}