/* Final production polish shared across the site. Keeps the Classic & Friendly identity consistent. */
:root{color-scheme:light;--content-reading:760px}
html{background:#f7fbff}
body{min-height:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Header / navigation */
.site-header{backdrop-filter:saturate(1.1) blur(12px);-webkit-backdrop-filter:saturate(1.1) blur(12px)}
.brand:hover{text-decoration:none}.brand span{min-width:0}.brand img{flex:none}
.nav a{transition:background-color .16s ease,color .16s ease,transform .16s ease}
.nav a:hover{background:#f4f1ff;color:var(--primary-dark);text-decoration:none;transform:translateY(-1px)}
.icon-btn,.menu-toggle{transition:transform .16s ease,background-color .16s ease,border-color .16s ease}
.icon-btn:hover,.menu-toggle:hover{background:#fff;border-color:#cfc7f6;transform:translateY(-1px)}

/* Inner page hero / content surfaces */
.page-title{position:relative;overflow:hidden;padding:34px clamp(20px,4vw,42px);margin-top:18px;border:1px solid #e6edf8;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,242,255,.94) 56%,rgba(235,248,255,.92));box-shadow:0 18px 44px rgba(39,65,120,.11)}
.page-title::after{content:'✦';position:absolute;right:28px;top:18px;color:#c8b9ff;font-size:44px;opacity:.45;transform:rotate(14deg)}
.page-title h1{margin-bottom:9px;text-wrap:balance}.page-title p{max-width:68ch;margin-bottom:0;font-size:15px}
.breadcrumb{margin-top:22px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.breadcrumb a{font-weight:700}.breadcrumb span[aria-current=page]{color:#65708c}

.box{border:1px solid #e2eaf6;border-radius:22px;background:rgba(255,255,255,.96);box-shadow:0 12px 30px rgba(39,65,120,.09)}
.article{max-width:900px;margin-inline:auto;padding:clamp(22px,4vw,44px)}
.article>p,.article>section>p,.article>section>ul,.article>section>ol{max-width:var(--content-reading)}
.article section{scroll-margin-top:120px}.article section+section{margin-top:34px}.article h2{margin-top:0;margin-bottom:10px}.article h3{margin-bottom:8px}
.article ul,.article ol{color:var(--text-soft);padding-left:1.2rem}.article li+li{margin-top:7px}
.toc{border:1px solid #e5eafa;background:linear-gradient(135deg,#f8f7ff,#f4fbff);border-radius:17px;padding:14px 16px;margin:22px 0 30px}.toc a{font-weight:700}.toc a:hover{text-decoration:none;color:var(--primary)}
.callout{border-radius:18px}.callout strong{font-family:var(--font-heading)}

/* Cards */
.pet-card,.guide-card,.link-card,.trend-card,.update-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.pet-card:hover,.guide-card:hover,.link-card:hover,.trend-card:hover,.update-card:hover{transform:translateY(-3px);box-shadow:0 15px 32px rgba(39,65,120,.13);border-color:#cfc8f4;text-decoration:none}
.pet-art{overflow:hidden;position:relative}.pet-art::after{content:'';position:absolute;inset:auto -20% -50% -20%;height:68%;background:radial-gradient(ellipse,#fff9,transparent 70%);pointer-events:none}
.pet-card img,.item-choice img,.table-item img,.config-layout>img{transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s ease;transform-origin:50% 85%}
.pet-card:hover img,.pet-card:focus-within img,.item-choice:hover img,.item-choice:focus-visible img{transform:translateY(-4px) rotate(-1deg) scale(1.035);filter:drop-shadow(0 8px 8px rgba(50,65,105,.12))}

/* Search / filters / tables */
.search-field{background:#fff;box-shadow:0 8px 20px rgba(39,65,120,.07)}
.search-field:focus-within{border-color:#a998f8;box-shadow:0 0 0 4px rgba(108,85,245,.11),0 9px 24px rgba(39,65,120,.09)}
.chip{transition:transform .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease}.chip:hover{transform:translateY(-1px)}
.filters{align-items:end}.filters label{font-weight:700}.filters select{background-color:#fff}
.table-wrap{border:1px solid #e1e9f5;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(39,65,120,.08);overflow:hidden}
.directory-table tbody tr{transition:background-color .14s ease}.directory-table tbody tr:hover{background:#faf9ff}
.directory-table th{background:#f5f7ff;color:#3b456d}.directory-table td,.directory-table th{border-color:#edf1f7}
.table-item a{font-weight:700}.table-item a:hover{color:var(--primary);text-decoration:none}
.rarity{text-transform:capitalize}

/* Forms */
input,select,textarea{border-color:#d9e3f2}.contact-form input,.contact-form select,.contact-form textarea,#share-text{background:#fff}
textarea{resize:vertical}.field-label{font-weight:700}
.btn{box-shadow:0 3px 0 rgba(78,61,160,.08)}.btn:hover{text-decoration:none}.btn.primary{box-shadow:0 5px 0 #523bc8,0 10px 20px rgba(82,59,200,.15)}.btn.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #523bc8}

/* Footer */
.site-footer{margin-top:72px;background:linear-gradient(180deg,#eef7ff,#f5f0ff);border-top:1px solid #dce7f5}
.site-footer .footer-grid{padding-top:38px}.site-footer h3{font-size:15px;margin-bottom:10px}.site-footer a{color:#505a79}.site-footer a:hover{color:var(--primary-dark);text-decoration:none}.footer-bottom{border-top-color:#dbe4f1}

/* Item-picker motion: interaction-triggered rather than constant animation. */
.item-choice{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.item-choice:hover,.item-choice:focus-visible{transform:translateY(-2px);border-color:#b9acf5;box-shadow:0 10px 22px rgba(39,65,120,.11)}
.config-layout>img{animation:pet-idle 3.4s ease-in-out infinite}

/* Homepage mascot / pet micro-animation. */
body.classic-home .classic-pet{transition:transform .2s ease,filter .2s ease;animation:pet-breathe 3.8s ease-in-out infinite}
body.classic-home .slot:hover .classic-pet,body.classic-home .slot:focus-within .classic-pet{animation:none;transform:translateY(-4px) scale(1.05);filter:drop-shadow(0 6px 6px rgba(25,42,87,.14))}
body.classic-home .trade-swap{transition:transform .18s ease,box-shadow .18s ease}.classic-home .trade-swap:hover{box-shadow:0 8px 18px rgba(77,55,190,.34)}
body.classic-home .data-note{border:1px solid rgba(255,255,255,.75);box-shadow:0 4px 12px rgba(39,65,120,.07)}

@keyframes pet-idle{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-5px) rotate(.6deg)}}
@keyframes pet-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.015)}}

@media(max-width:720px){
 .wrap{width:min(100% - 24px,1120px)}
 .page-title{padding:26px 20px;border-radius:22px}.page-title::after{font-size:34px;right:16px}
 .article{padding:22px 18px}
 .site-footer{margin-top:52px}
 .directory-table tr:hover{background:transparent}
}
@media(prefers-reduced-motion:reduce){
 .config-layout>img,body.classic-home .classic-pet{animation:none!important}
 .pet-card img,.item-choice img,.table-item img,.config-layout>img{transition:none}
 .pet-card:hover img,.pet-card:focus-within img,.item-choice:hover img,.item-choice:focus-visible img{transform:none}
}

/* Recent searches inside the item picker. */
.recent-searches{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:8px 0 12px;padding:9px 10px;border:1px solid #e6eaf6;border-radius:14px;background:#fbfbff}
.recent-search-chips{display:flex;gap:6px;flex-wrap:wrap;min-width:0}.recent-chip{min-height:32px!important;padding:5px 10px!important;font-size:12px!important}
.recent-clear{border:0;background:transparent;color:var(--primary-dark);font:700 12px/1.2 var(--font-body);padding:7px;cursor:pointer}.recent-clear:hover{text-decoration:underline}
@media(max-width:520px){.recent-searches{grid-template-columns:1fr auto}.recent-searches>.small{grid-column:1/-1}.recent-search-chips{grid-column:1/2}}

/* Character motion: subtle and performance-conscious. */
.slot img{transition:transform .2s ease,filter .2s ease;transform-origin:50% 85%}
.slot:hover img,.slot:focus-within img{transform:translateY(-3px) scale(1.035);filter:drop-shadow(0 6px 7px rgba(31,48,94,.13))}
.detail-image{transform-origin:50% 85%;animation:pet-idle 4.2s ease-in-out infinite;filter:drop-shadow(0 12px 16px rgba(39,65,120,.12))}
@media(prefers-reduced-motion:reduce){.detail-image{animation:none!important}.slot img{transition:none}.slot:hover img,.slot:focus-within img{transform:none}}

/* Footer copyright line: centred now that it is the only item. */
.footer-bottom{justify-content:center;text-align:center}