/* ============================================================
   灵宠图鉴 —— 模块样式（二级页 /pets/ 与首页内嵌共用同一份）
   页面外壳（reset / 导航 / 页脚 / .wrap）在 pets.html 的内联 <style> 里，
   不要写回这里 —— 首页也引这份文件，外壳规则会覆盖首页版式。
   ============================================================ */
/* 模块头部 */
.pet-sub-head{display:flex;align-items:baseline;gap:18px;margin-bottom:10px}
.pet-sub-title{font-family:var(--font-title);font-size:34px;font-weight:400;letter-spacing:.16em;color:#f2ead8}
.pet-sub-title em{color:var(--cinnabar-l);font-style:normal;margin:0 .1em}
.pet-sub-en{font-family:var(--font-title);font-size:12px;letter-spacing:.42em;color:var(--gold-l)}
.pet-sub-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid rgba(200,164,92,.22)}
.pet-sub-desc{font-size:13.5px;letter-spacing:.1em;color:#93a49a}
.pet-search{display:flex;align-items:center;gap:9px;margin-left:auto;padding:9px 16px;
  border:1px solid var(--line-gold);background:rgba(6,14,16,.6);min-width:240px;transition:.3s}
.pet-search:focus-within{border-color:var(--gold);box-shadow:0 0 0 2px rgba(200,164,92,.14)}
.pet-search svg{width:15px;height:15px;color:var(--gold-l);flex:none}
.pet-search input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:13.5px;letter-spacing:.08em;color:#e7dfd0}
.pet-search input::placeholder{color:#6f7c76}
.pet-filters{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 12px}
.pet-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 15px;font-size:12.5px;letter-spacing:.1em;
  color:#a9b3ad;border:1px solid rgba(200,164,92,.22);background:rgba(6,14,16,.5);transition:.26s}
.pet-chip:hover{color:#e7dfd0;border-color:var(--line-gold)}
.pet-chip.on{color:#0c1a1c;background:var(--gold-l);border-color:var(--gold-l)}
.pet-chip i{width:8px;height:8px;border-radius:50%;flex:none}

/* 布局：左=圆台舞台，右=宠物属性面板；灵宠名录另起一段全宽放在下方。
   左栏固定 440px（约为原来 669px 的 2/3），两栏都用 stretch 拉齐，
   再加上编号行已移出两栏，左右两个框才能顶底完全对齐。 */
.pet-layout{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:44px;margin-top:24px;align-items:stretch}
.pet-side{min-width:0;display:flex}
.pet-side .pet-info{flex:1}

/* ===== 03 展示舞台 =====
   几何：.pet-pod 宽度 86%，SVG viewBox 640×250 —— 所以 pod 高度 = pod宽 × 250/640。
   圆台顶面中心在 viewBox 的 y=88 → 距 pod 底 (250-88)/250 = 64.8%。
   灵宠脚底落在 y=95 → 距 pod 底 62%（略微靠前，透视更自然）。
   所有台面上的效果元素都挂在 .pet-pod 下，用这两个百分比对齐。 */
.pet-stage{position:relative;width:100%;aspect-ratio:720/660;isolation:isolate;overflow:hidden;
  border:1px solid rgba(200,164,92,.20);background:
    radial-gradient(ellipse at 50% 88%,rgba(31,111,107,.22),transparent 66%),
    radial-gradient(ellipse at 50% 20%,rgba(200,164,92,.10),transparent 62%),
    linear-gradient(180deg,#07100f,#04090a)}
.pet-stage::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.75;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 22%,rgba(255,255,255,.75),transparent),
    radial-gradient(1.2px 1.2px at 72% 14%,rgba(255,255,255,.55),transparent),
    radial-gradient(1.6px 1.6px at 42% 8%,rgba(224,196,137,.7),transparent),
    radial-gradient(1.2px 1.2px at 86% 38%,rgba(255,255,255,.5),transparent),
    radial-gradient(1.4px 1.4px at 12% 52%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.2px 1.2px at 58% 30%,rgba(224,196,137,.5),transparent),
    radial-gradient(1.5px 1.5px at 32% 62%,rgba(255,255,255,.4),transparent);
  animation:petStars 9s ease-in-out infinite}

/* 光柱：从台面位置往上打，压在圆台后面，只露出台上那一段 */
.pet-beam{position:absolute;left:50%;bottom:30%;width:30%;height:56%;transform:translateX(-50%);
  pointer-events:none;z-index:1;opacity:0;transition:opacity .6s ease;
  background:linear-gradient(180deg,transparent,rgba(224,196,137,.13) 40%,rgba(224,196,137,.30) 92%,transparent);
  filter:blur(17px)}
.pet-stage.is-live .pet-beam{opacity:1;animation:petBeam 5.4s ease-in-out infinite}

/* 悬浮火星 */
.pet-sparks{position:absolute;inset:0;pointer-events:none;z-index:1}
.pet-sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:#e8d3a0;opacity:0;
  box-shadow:0 0 9px 2px rgba(232,211,160,.55);animation:petFloat 7.6s linear infinite}
.pet-sparks i:nth-child(1){left:26%;animation-duration:7.4s}
.pet-sparks i:nth-child(2){left:36%;animation-delay:-2.2s;animation-duration:6.6s}
.pet-sparks i:nth-child(3){left:48%;animation-delay:-4.6s;animation-duration:8.4s}
.pet-sparks i:nth-child(4){left:60%;animation-delay:-1.4s;animation-duration:6.9s}
.pet-sparks i:nth-child(5){left:71%;animation-delay:-5.2s;animation-duration:7.9s}
.pet-sparks i:nth-child(6){left:42%;animation-delay:-3.1s;animation-duration:6.2s}

/* 圆台本体 */
.pet-pod{position:absolute;left:50%;bottom:6%;width:86%;transform:translateX(-50%);z-index:2}
.pet-pod-svg{width:100%;height:auto;overflow:visible;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.72))}
.pet-pod-top{opacity:.62;transition:opacity .5s ease}
.pet-stage.is-live .pet-pod-top{opacity:1}

/* 台面光斑 */
.pet-glow{position:absolute;left:50%;bottom:64.8%;width:74%;aspect-ratio:576/112;
  transform:translate(-50%,50%);border-radius:50%;pointer-events:none;z-index:1;
  opacity:0;transition:opacity .55s ease;
  background:radial-gradient(ellipse at 50% 50%,rgba(224,196,137,.46),rgba(31,111,107,.22) 46%,transparent 76%);
  filter:blur(12px)}
.pet-stage.is-live .pet-glow{opacity:1}

/* 台面上缓缓旋转的刻度环。
   椭圆没法在 2D 里自转（转 90° 就翻个个儿），所以外面套一层 rotateX(76deg)
   把圆压成椭圆，里层圆再在斜面内自转 —— 与 destiny.html 法阵同一套做法。 */
.pet-halo{position:absolute;left:50%;bottom:64.8%;width:72%;aspect-ratio:1;
  transform:translate(-50%,50%) rotateX(76deg);pointer-events:none;z-index:1;
  opacity:0;transition:opacity .55s ease}
.pet-stage.is-live .pet-halo{opacity:.9}
.pet-halo i{position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(224,196,137,.62) 0 .8deg,transparent .8deg 6.5deg);
  -webkit-mask:radial-gradient(circle,transparent 0 76%,#000 79% 93%,transparent 96%);
  mask:radial-gradient(circle,transparent 0 76%,#000 79% 93%,transparent 96%);
  animation:petHaloSpin 26s linear infinite;will-change:transform}

/* 选中时从台面扩散的冲击波 */
.pet-burst{position:absolute;left:50%;bottom:64.8%;width:72%;aspect-ratio:1;
  transform:translate(-50%,50%) rotateX(76deg);pointer-events:none;z-index:2;opacity:0}
.pet-burst i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(224,196,137,.8);
  box-shadow:0 0 22px rgba(224,196,137,.5)}
.pet-stage.is-burst .pet-burst i{animation:petBurst .8s ease-out}

/* 灵宠本体：脚底站在台面上，整数倍 pixelated 放大。
   容器尺寸 = 单帧尺寸（由 pets.js 写入），overflow 裁掉精灵条上其余的帧；
   图片 left/bottom 归零，靠 translateX 切帧。

   ⚠ 入场动效（淡入 + 上浮）必须挂在「容器」上，绝不能挂在 img 上。
   img 的 transform 被逐帧切帧复用：一旦给 img 加 transition，每切一帧都会变成
   一次 .5s 的补间，画面就成了横向滑动（看起来像宠物在往右滑），而不是逐帧播放。 */
.pet-holder{position:absolute;left:50%;bottom:62%;
  transform:translateX(-50%) translateY(18px);opacity:0;
  overflow:hidden;pointer-events:none;z-index:3;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.pet-stage.is-live .pet-holder{opacity:1;transform:translateX(-50%) translateY(0)}
.pet-holder img{position:absolute;left:0;bottom:0;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.6))}

/* 空闲提示 */
.pet-hint{position:absolute;left:0;right:0;bottom:7%;z-index:4;text-align:center;pointer-events:none;
  font-size:12.5px;letter-spacing:.18em;color:#93a49a;text-shadow:0 2px 10px rgba(0,0,0,.9);
  transition:opacity .3s ease}
.pet-stage.is-live .pet-hint{opacity:0}

/* ===== 04 属性面板（圆台右侧） ===== */
.pet-side{min-width:0}
.pet-info{padding:22px 24px 22px;border:1px solid rgba(200,164,92,.26);
  background:linear-gradient(160deg,rgba(14,28,30,.9),rgba(6,14,16,.92));position:relative}
.pet-info::before{content:"";position:absolute;inset:5px;border:1px solid rgba(200,164,92,.13);pointer-events:none}
.pet-info-name{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pet-info-name h3{font-family:var(--font-title);font-size:26px;font-weight:400;letter-spacing:.14em;color:#f2ead8}
.pet-q{display:inline-flex;align-items:center;font-size:12px;letter-spacing:.14em;padding:3px 11px;border-radius:2px;
  color:#0c1a1c;font-family:var(--font-title)}
.pet-info-id{margin-left:auto;font-size:12px;letter-spacing:.24em;color:#7d8a83}
.pet-info-div{height:1px;margin:14px 0 13px;
  background:linear-gradient(90deg,rgba(200,164,92,.5),rgba(200,164,92,.06))}
.pet-info-cap{font-family:var(--font-title);font-size:11.5px;letter-spacing:.3em;color:#8f887a;margin-bottom:9px}
.pet-attrs{display:flex;flex-wrap:wrap;gap:9px}
.pet-attrs span{font-size:13.5px;letter-spacing:.06em;color:#ffe4ad;padding:5px 14px;border-radius:2px;
  background:rgba(200,164,92,.12);border:1px solid rgba(200,164,92,.34)}
.pet-intro{margin-top:13px;font-size:13.5px;line-height:1.9;color:#a3aeaa}
.pet-stats{display:flex;gap:26px;margin-top:15px;padding-top:12px;border-top:1px solid rgba(200,164,92,.16);
  font-size:12.5px;letter-spacing:.1em;color:#8b8578}
.pet-stats b{font-family:var(--font-title);font-weight:400;color:var(--gold-l);letter-spacing:.14em}
.pet-info.is-flip{animation:petInfoIn .4s ease}

/* ===== 05 灵宠名录（展示区下方，全宽）
   套一个固定高度的框、框内滚动：209 只铺开会把页面拉得很长，
   手机上点选灵宠时上方的属性面板就被顶出视野了。
   高度用 vh 为主，短屏（手机）自动收得更矮。 ===== */
.pet-index{min-width:0;margin-top:26px;padding-top:20px;border-top:1px solid rgba(200,164,92,.22)}
.pet-grid-head{display:flex;align-items:baseline;gap:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(200,164,92,.22);
  font-family:var(--font-title);font-size:12px;letter-spacing:.32em;color:#8f887a}
.pet-grid-head b{margin-left:auto;font-weight:400;color:var(--gold-l)}
.pet-kbd{font-size:11.5px;letter-spacing:.16em;color:#6f7c76}
/* 名录框：带边框与底色，框内滚动。高度 clamp(280px, 50vh, 560px)，
   短屏自动变矮，保证上方的圆台 + 属性面板始终留在视野里。
   滚动条单独铺色，与站点金色描边一致。 */
.pet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px;
  margin-top:4px;padding:16px 14px;
  max-height:clamp(280px, 50vh, 560px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid rgba(200,164,92,.24);background:rgba(4,10,11,.4);
  scrollbar-width:thin;scrollbar-color:rgba(200,164,92,.5) transparent}
.pet-grid::-webkit-scrollbar{width:8px}
.pet-grid::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
.pet-grid::-webkit-scrollbar-thumb{background:rgba(200,164,92,.42);border-radius:4px}
.pet-grid::-webkit-scrollbar-thumb:hover{background:rgba(200,164,92,.62)}
.pet-card{position:relative;padding:7px 6px 5px;border:1px solid rgba(200,164,92,.16);
  background:linear-gradient(170deg,rgba(16,32,34,.72),rgba(6,14,16,.82));
  transition:border-color .24s,transform .24s,box-shadow .24s;cursor:pointer;text-align:center}
.pet-card:hover,.pet-card.is-hover{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 18px rgba(200,164,92,.16)}
.pet-card.is-on{border-color:var(--cinnabar-l);box-shadow:0 0 0 1px rgba(201,73,61,.5),0 10px 24px rgba(0,0,0,.6)}
/* 卡片里的灵宠：图片区固定高度（最高本体 118px，低了会切头）。
   容器宽度由 pets.js 设成「正好一帧宽」并 margin:0 auto 居中 ——
   宽度必须等于单帧宽，靠 overflow 把同一张精灵条上相邻的帧裁掉，
   否则会看到好几只并排（容器比一帧宽就会漏出邻帧）。
   ⚠ 这里同样不能给 img 加 transition，否则切帧会变成横滑。 */
.pet-card-img{position:relative;height:100px;margin:0 auto;overflow:hidden}
.pet-card-img img{position:absolute;left:0;bottom:0;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges}
.pet-card-tag{position:absolute;top:5px;left:5px;width:8px;height:8px;border-radius:50%}
.pet-card-name{display:block;margin-top:5px;font-size:12px;line-height:1.5;letter-spacing:.06em;color:#d6cdba;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pet-card-at{display:block;font-size:10.5px;line-height:1.4;letter-spacing:.04em;color:#79857e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pet-grid-empty{grid-column:1/-1;text-align:center;padding:60px 0;color:#6f7c76;font-size:13px}

/* ===== 07 动效 ===== */
@keyframes petStars{0%,100%{opacity:.5}50%{opacity:.95}}
@keyframes petBeam{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes petHaloSpin{to{transform:rotate(360deg)}}
@keyframes petBurst{
  0%{opacity:.95;transform:scale(.5)}
  100%{opacity:0;transform:scale(1.85)}}
@keyframes petFloat{
  0%{opacity:0;bottom:42%;transform:scale(.5)}
  16%{opacity:.9}
  70%{opacity:.45}
  100%{opacity:0;bottom:86%;transform:scale(1.1)}}
@keyframes petInfoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .pet-stage::before,.pet-halo i,.pet-beam,.pet-sparks i,.pet-burst i{animation:none !important}}

/* ===== 08 响应式 ===== */
@media (max-width:1120px){
  .pet-layout{grid-template-columns:minmax(0,1fr);gap:38px}
  .pet-grid{max-height:420px}
  .pet-stage{aspect-ratio:720/600}}
@media (max-width:900px){
  .pet-sub-title{font-size:27px}
  .pet-sub-en{display:none}
  .pet-search{margin-left:0;width:100%}
  .pet-info{padding:18px}}
@media (max-width:560px){
  .pet-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}