/* ==========================================================================
   宝可梦图鉴 —— 卡通贴纸风格
   设计要点：
     · 粗描边 + 实心投影 = 贴纸感（sticker）
     · 卡片主色取自宝可梦自身的属性色
     · 背景铺一层淡淡的精灵球图案，不抢内容
     · 全部图形用 CSS/SVG 绘制，不依赖任何外部字体或图标库
   ========================================================================== */
:root{
  --ink:#1d2433;
  --ink-2:#4a5568;
  --ink-3:#8a94a6;
  --paper:#fffdf8;
  --line:#1d2433;
  --shadow: 0 8px 0 rgba(29,36,51,.16), 0 14px 30px rgba(29,36,51,.14);
  --shadow-sm: 0 4px 0 rgba(29,36,51,.14);
  --radius: 26px;
  --c1:#7AC74C; --c2:#4e9c2b;   /* 由 JS 按属性覆盖 */
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:#eef2f7;
  min-height:100vh;
  overflow-x:hidden;
}
/* 背景：精灵球图案 + 柔和渐变 */
#bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 700px at 18% -10%, #d7e9ff 0%, transparent 60%),
    radial-gradient(900px 600px at 90% 0%, #ffe8f0 0%, transparent 55%),
    radial-gradient(900px 700px at 50% 110%, #e8ffe9 0%, transparent 60%),
    linear-gradient(180deg,#f3f7fc,#e8eef6);
}
#bg::after{
  content:""; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
<g fill='none' stroke='%231d2433' stroke-opacity='0.064' stroke-width='5'>\
<circle cx='70' cy='70' r='40'/>\
<path d='M30 70h80'/>\
</g>\
<circle cx='70' cy='70' r='14' fill='none' stroke='%231d2433' stroke-opacity='0.064' stroke-width='5'/>\
</svg>");
  background-size:140px 140px;
  animation:drift 60s linear infinite;
}
@keyframes drift{ from{background-position:0 0} to{background-position:140px 280px} }

.wrap{max-width:920px; margin:0 auto; padding:26px 18px 72px}

/* ---------------- 顶部 ---------------- */
header{text-align:center; padding:6px 0 20px}
.brand{display:inline-flex; align-items:center; gap:12px; user-select:none}
.brand .ball{
  width:44px;height:44px;border-radius:50%;
  border:3px solid var(--line);
  background:linear-gradient(#ff5a5a 0 47%, #1d2433 47% 53%, #fff 53% 100%);
  position:relative; box-shadow:var(--shadow-sm);
  animation:bob 3.4s ease-in-out infinite;
}
.brand .ball::after{
  content:""; position:absolute; left:50%; top:50%;
  width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff; border:3px solid var(--line);
}
@keyframes bob{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-5px) rotate(4deg)} }
h1{
  margin:0; font-size:30px; font-weight:900; letter-spacing:1px;
  text-shadow: 0 3px 0 #fff, 0 6px 10px rgba(29,36,51,.12);
}
.sub{margin:8px 0 0; color:var(--ink-3); font-size:13.5px}

/* ---------------- 搜索框 ---------------- */
.searchwrap{position:relative; margin-top:20px}
.searchbar{
  display:flex; align-items:center; gap:10px;
  background:var(--paper);
  border:3px solid var(--line);
  border-radius:999px;
  padding:8px 8px 8px 18px;
  box-shadow:var(--shadow);
  transition: transform .12s ease;
}
.searchbar:focus-within{ transform:translateY(-2px) }
.searchbar .ico{flex:0 0 auto; width:22px;height:22px;opacity:.7}
.searchbar input{
  flex:1 1 auto; min-width:0;
  border:0; outline:0; background:transparent;
  font:inherit; font-size:17px; font-weight:700; color:var(--ink);
  padding:8px 0;
}
.searchbar input::placeholder{ color:#aab3c2; font-weight:600 }
/* 去掉浏览器自带的搜索清除按钮，它的蓝色圆叉和整体配色冲突 */
.searchbar input::-webkit-search-cancel-button,
.searchbar input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none }
.searchbar input::-ms-clear{ display:none }
.btn{
  border:3px solid var(--line); border-radius:999px;
  background:#ffd93d; color:var(--ink);
  font:inherit; font-weight:900; font-size:14px;
  padding:9px 16px; cursor:pointer;
  box-shadow:0 4px 0 rgba(29,36,51,.22);
  transition: transform .08s, box-shadow .08s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 5px 0 rgba(29,36,51,.22) }
.btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(29,36,51,.22) }
.btn.ghost{ background:#fff }

/* 建议列表 */
#sug{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 10px);
  margin:0; padding:8px; list-style:none;
  background:var(--paper); border:3px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow);
  max-height:330px; overflow:auto;
  display:none;
}
#sug.on{display:block; animation:pop .16s ease}
@keyframes pop{ from{opacity:0; transform:translateY(-6px) scale(.98)} to{opacity:1;transform:none} }
#sug li{
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; border-radius:14px; cursor:pointer;
}
#sug li[aria-selected="true"], #sug li:hover{ background:#eef3fb }
#sug li img{ width:44px;height:44px; object-fit:contain; flex:0 0 auto; image-rendering:auto }
#sug li .t{ font-weight:800; font-size:15.5px }
#sug li .d{ font-size:12px; color:var(--ink-3); margin-left:auto; white-space:nowrap }
#sug li .mini{ display:flex; gap:4px }
#sug .none{ padding:14px; text-align:center; color:var(--ink-3); font-size:14px; cursor:default }
#sug .none:hover{ background:transparent }

/* 快捷 chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px }
.chip{
  border:2.5px solid var(--line); border-radius:999px; background:#fff;
  padding:6px 13px; font:inherit; font-size:13px; font-weight:800; color:var(--ink);
  cursor:pointer; box-shadow:0 3px 0 rgba(29,36,51,.14);
  transition:transform .08s;
}
.chip:hover{ transform:translateY(-2px) }
.chip:active{ transform:translateY(2px); box-shadow:none }

/* ---------------- 空状态 ---------------- */
.empty{
  margin-top:34px; text-align:center; color:var(--ink-3);
}
.empty .big{
  width:150px;height:150px;margin:0 auto 18px;border-radius:50%;
  border:6px solid rgba(29,36,51,.23);
  background:linear-gradient(rgba(255,90,90,.28) 0 47%, rgba(29,36,51,.23) 47% 53%, rgba(255,255,255,.75) 53% 100%);
  position:relative; animation:bob 4s ease-in-out infinite;
}
.empty .big::after{
  content:""; position:absolute; left:50%; top:50%; width:44px;height:44px;
  margin:-22px 0 0 -22px; border-radius:50%;
  background:#fff; border:6px solid rgba(29,36,51,.23);
}
.empty p{ margin:6px 0; font-size:15px; font-weight:700; color:var(--ink-2) }
.empty .hint{ font-size:13px; font-weight:600 }

/* ---------------- 主卡片 ---------------- */
.card{
  margin-top:26px;
  background:var(--paper);
  border:3.5px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  animation:cardIn .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes cardIn{ from{opacity:0; transform:translateY(16px) scale(.97)} to{opacity:1;transform:none} }

.hero{
  position:relative;
  padding:22px 18px 8px;
  /* 头图底色：中心白光 + 属性色由浅到深的渐变。
     之前直接 c1→暗色，出来的是一片浑浊的橄榄黄，现在从"提亮版 c1"起步。 */
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 30%, rgba(255,255,255,0) 62%),
    linear-gradient(168deg, var(--tint) 0%, var(--c1) 58%, var(--c2) 100%);
  border-bottom:3.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  min-height:306px;
  overflow:hidden;
}
/* 脚下的柔和投影（让人物"站"在台面上） */
.hero::after{
  content:""; position:absolute; left:50%; bottom:22px; width:190px; height:26px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(29,36,51,.28), rgba(29,36,51,0) 70%);
  z-index:1; pointer-events:none;
}
/* 精灵球水印 */
.hero::before{
  content:""; position:absolute; right:-58px; top:-64px; width:250px;height:250px;
  border-radius:50%; border:16px solid rgba(255,255,255,.22);
  background:linear-gradient(rgba(255,255,255,.22) 0 47%, rgba(29,36,51,.10) 47% 53%, transparent 53%);
  pointer-events:none;
}
.hero img{
  position:relative; z-index:2;
  /* 内嵌的是 96×96 像素精灵，必须显式放大：
     只写 max-* 会按原尺寸 96px 显示，角色在头图里小得可怜。
     object-fit:contain 保证细高的宝可梦（沙奈朵、阿柏怪）不被裁脚，
     pixelated 让放大后保持硬边，呈现复古像素质感。 */
  width:250px; height:250px; max-width:88%; max-height:262px;
  object-fit:contain;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 14px 16px rgba(29,36,51,.30));
  animation:float 3.8s ease-in-out infinite;
}
/* 释放技能时：蓄力 → 前冲 → 回弹 */
.hero img.casting{
  animation: castAnim .86s cubic-bezier(.3,1.4,.5,1) 1;
}
@keyframes castAnim{
  0%   { transform: scale(1) translateY(0) rotate(0) }
  16%  { transform: scale(.88) translateY(10px) rotate(-3deg) }
  34%  { transform: scale(1.14) translateY(-14px) rotate(2deg) }
  52%  { transform: scale(1.02) translateY(-4px) rotate(-1deg) }
  72%  { transform: scale(1.06) translateY(-8px) rotate(1deg) }
  100% { transform: scale(1) translateY(0) rotate(0) }
}

/* 技能特效画布：盖在头图上，不拦点击 */
.hero canvas.fx{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  pointer-events:none;
}

/* 招牌技能横幅 */
.movebanner{
  position:absolute; left:50%; bottom:16px; z-index:4;
  transform:translate(-50%, 26px) scale(.86);
  opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:9px;
  padding:9px 20px; border-radius:999px;
  border:3px solid var(--line);
  box-shadow:0 6px 0 rgba(29,36,51,.22);
  color:#fff; font-weight:900; font-size:16px; letter-spacing:.5px;
  text-shadow:0 2px 0 rgba(0,0,0,.28);
  white-space:nowrap; max-width:92%;
  transition: transform .26s cubic-bezier(.2,1.5,.4,1), opacity .2s;
}
.movebanner.on{ transform:translate(-50%, 0) scale(1); opacity:1 }
.movebanner .tg{
  font-size:11px; padding:2px 8px; border-radius:999px;
  background:rgba(255,255,255,.92); color:var(--ink); text-shadow:none;
  font-weight:900; flex:0 0 auto;
}
.movebanner .pw{ font-size:12px; opacity:.9; text-shadow:none; font-weight:800 }

/* 释放按钮 */
.castbtn{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:14px;
  border:3px solid var(--line); border-radius:999px;
  padding:10px 20px; cursor:pointer;
  font:inherit; font-weight:900; font-size:15px; color:#fff;
  box-shadow:0 5px 0 rgba(29,36,51,.24);
  transition: transform .08s, box-shadow .08s;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
}
.castbtn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 rgba(29,36,51,.24) }
.castbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(29,36,51,.24) }
.castbtn .sp{ font-size:17px }

/* 招式列表 */
.moves{ display:grid; gap:9px }
.mv{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
  background:#fff; border:2.5px solid var(--line); border-radius:15px;
  padding:9px 13px; box-shadow:0 3px 0 rgba(29,36,51,.12);
}
.mv .nm2{ font-weight:900; font-size:14.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.mv .kind{
  font-size:10.5px; font-weight:900; padding:2px 7px; border-radius:999px;
  border:2px solid var(--line); background:#eef2f8; color:var(--ink-2);
}
.mv .stat2{ font-size:12px; color:var(--ink-3); font-weight:800; white-space:nowrap }
.mv .sig{ font-size:10.5px; font-weight:900; color:#b45309 }
.mv.is-sig{ background:#fffbeb; border-color:#e6c86a }
.empty-note{ color:var(--ink-3); font-size:13.5px; font-weight:700 }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero .ph{
  position:relative;z-index:2;
  width:200px;height:200px;border-radius:50%;
  border:8px solid rgba(29,36,51,.32);
  background:linear-gradient(rgba(255,255,255,.6) 0 47%, rgba(29,36,51,.2) 47% 53%, rgba(255,255,255,.85) 53%);
}
.hero .ph::after{
  content:"";position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;
  border-radius:50%;background:#fff;border:8px solid rgba(29,36,51,.28);
}
.dexno{
  position:absolute; left:16px; top:14px; z-index:3;
  background:var(--ink); color:#fff; font-weight:900; font-size:14px;
  padding:6px 13px; border-radius:999px; letter-spacing:.5px;
  box-shadow:0 4px 0 rgba(0,0,0,.18);
}
.tagline{ position:absolute; right:16px; top:16px; z-index:3; display:flex; gap:6px }
.tag{
  font-size:11.5px; font-weight:900; padding:5px 10px; border-radius:999px;
  border:2.5px solid var(--line); background:#fff;
}
.tag.leg{ background:#ffe066 }
.tag.myth{ background:#ffc9e0 }

.body{ padding:18px 22px 24px }
.nm{ margin:0; font-size:31px; font-weight:900; letter-spacing:.5px; line-height:1.15 }
.nm small{ font-size:15px; font-weight:800; color:var(--ink-3); margin-left:8px; letter-spacing:0 }
.genus{ margin-top:4px; color:var(--ink-2); font-size:13.5px; font-weight:700 }

.types{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap }
.type{
  border:3px solid var(--line); border-radius:999px;
  padding:5px 16px; font-weight:900; font-size:13.5px; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
  box-shadow:0 4px 0 rgba(29,36,51,.18);
}

/* 物理数据 */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px }
.fact{
  background:#f4f7fc; border:2.5px solid #dfe6f0; border-radius:16px;
  padding:10px 8px; text-align:center;
}
.fact b{ display:block; font-size:19px; font-weight:900 }
.fact span{ font-size:11.5px; color:var(--ink-3); font-weight:700 }

/* 通用小节 */
.sec{ margin-top:22px }
.sec h3{
  margin:0 0 10px; font-size:14px; font-weight:900; letter-spacing:1px;
  color:var(--ink-2); display:flex; align-items:center; gap:8px;
}
.sec h3::before{
  content:""; width:10px;height:10px;border-radius:3px;background:var(--c1);
  border:2px solid var(--line); transform:rotate(45deg);
}

/* 特性 */
.abils{ display:flex; flex-wrap:wrap; gap:9px }
.abil{
  border:2.5px solid var(--line); border-radius:14px; background:#fff;
  padding:7px 14px; font-weight:800; font-size:13.5px;
  box-shadow:0 3px 0 rgba(29,36,51,.14);
}
.abil i{ font-style:normal; font-size:11px; color:#c2410c; font-weight:900; margin-left:6px }

/* 图鉴描述 */
.flavor{
  background:#fff9e8; border:2.5px dashed #e6c86a; border-radius:18px;
  padding:14px 16px; font-size:14.5px; line-height:1.85; color:#5b4a22; font-weight:600;
  position:relative;
}
.flavor+.flavor{ margin-top:9px }
.flavor .src{
  position:absolute; right:12px; bottom:8px; font-size:11px; color:#b59a4e; font-weight:800;
}

/* 种族值 */
.stats{ display:grid; gap:9px }
.st{
  display:grid; grid-template-columns:52px 1fr 44px; align-items:center; gap:10px;
  font-size:13px; font-weight:800;
}
.st .k{ color:var(--ink-2) }
.st .bar{
  height:14px; background:#e7ecf4; border:2.5px solid var(--line);
  border-radius:999px; overflow:hidden;
}
/* 宽度直接用内联样式写死，动画只用 transform 做「长出来」的效果。
   早期版本把宽度交给 CSS transition 从 0 过渡到目标值 ——
   在一些环境里（例如无头截图、动画被节流时）过渡不推进，
   条子就一直是空的。现在布局不依赖动画，动画只是好看。 */
.st .bar i{
  display:block; height:100%;
  border-radius:999px;
  transform-origin:left center;
  animation: growBar .62s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes growBar{
  from{ transform: scaleX(0) }
  to  { transform: scaleX(1) }
}
/* 用户开启"减少动效"时不做动画；顺带保证即使动画被禁用，
   条子也处于正常显示状态（animation:both 会把起始帧定格在 scaleX(0)）。 */
@media (prefers-reduced-motion: reduce){
  .st .bar i{ animation:none !important }
  .hero img{ animation:none !important }
  .brand .ball, .empty .big{ animation:none !important }
  #bg::after{ animation:none !important }
}
.st .v{ text-align:right; font-weight:900; font-variant-numeric:tabular-nums }
.total{
  margin-top:12px; display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; border-radius:14px; background:#f0f4fa; border:2.5px solid #dfe6f0;
  font-weight:900; font-size:14px;
}
.total b{ font-size:20px; color:var(--c2) }

/* 克制关系 */
.eff{ display:grid; gap:8px }
.effrow{ display:grid; grid-template-columns:78px 1fr; gap:10px; align-items:start }
.effrow .lab{ font-size:12px; font-weight:900; color:#fff; text-align:center; padding:4px 6px; border-radius:10px; border:2.5px solid var(--line) }
.effrow .set{ display:flex; flex-wrap:wrap; gap:6px }
.pill{
  font-size:12px; font-weight:900; padding:3px 10px; border-radius:999px;
  border:2.5px solid var(--line); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.2);
}

footer{ margin-top:40px; text-align:center; color:var(--ink-3); font-size:12px; font-weight:600; line-height:1.9 }
footer a{ color:var(--ink-2) }

/* ==========================================================================
   v3 润色：音效开关、层次感、细节质感
   ========================================================================== */

/* ---- 顶部音频开关 ---- */
#audioctl{
  position:absolute; right:0; top:0;
  display:flex; gap:8px; z-index:20;
}
header{ position:relative }
.abtn{
  width:42px; height:42px; border-radius:50%;
  border:3px solid var(--line);
  background:#fff; color:var(--ink);
  display:grid; place-items:center;
  cursor:pointer; box-shadow:0 4px 0 rgba(29,36,51,.18);
  transition: transform .1s, box-shadow .1s, background .15s;
  position:relative;
}
.abtn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 rgba(29,36,51,.18) }
.abtn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(29,36,51,.18) }
.abtn svg{ width:20px; height:20px; display:block }
.abtn .slash{
  position:absolute; left:50%; top:50%; width:26px; height:3px;
  background:#c0392b; border-radius:2px;
  transform:translate(-50%,-50%) rotate(-45deg);
  opacity:0; transition:opacity .15s;
}
.abtn.off{ background:#eef1f6; color:#9aa5b6 }
.abtn.off .slash{ opacity:1 }
.abtn.on{ background:#fff8e1 }

/* ---- 头图：加一层聚光 + 底部台面 + 漂浮光点 ---- */
.hero{
  background-image:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.5) 26%, rgba(255,255,255,0) 58%),
    radial-gradient(circle at 82% 92%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(168deg, var(--tint) 0%, var(--c1) 55%, var(--c2) 100%);
}
.hero::before{
  /* 精灵球水印再淡一点，避免抢立绘 */
  border-color: rgba(255,255,255,.16);
  opacity:.9;
}
/* 台面：立绘脚下的一块发光椭圆 */
.hero::after{
  height:34px; width:230px;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.55), rgba(255,255,255,0) 68%),
    radial-gradient(ellipse at center, rgba(24,30,42,.22), rgba(24,30,42,0) 72%);
}
.hero img{
  filter: drop-shadow(0 16px 18px rgba(24,30,42,.32)) drop-shadow(0 0 22px rgba(255,255,255,.28));
}

/* ---- 卡片：顶部高光 + 入场扫光 ---- */
.card{ position:relative }
.card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px; z-index:6;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  pointer-events:none;
}
.card::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  border-radius:var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
/* 入场时一道斜向扫光 */
.card .shine{
  position:absolute; top:-40%; left:-60%; width:42%; height:180%;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform:rotate(14deg); pointer-events:none; z-index:7;
  animation:shineSweep .9s ease-out .12s 1 both;
}
@keyframes shineSweep{
  from{ left:-60%; opacity:0 }
  20% { opacity:1 }
  to  { left:130%; opacity:0 }
}

/* ---- 属性胶囊：内高光 ---- */
.type, .pill{
  position:relative; overflow:hidden;
}
.type::after, .pill::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* ---- 数据块：图标感 ---- */
.fact{ position:relative; overflow:hidden }
.fact::after{
  content:""; position:absolute; right:-18px; bottom:-18px;
  width:52px; height:52px; border-radius:50%;
  background:radial-gradient(circle, rgba(43,108,232,.10), transparent 70%);
}

/* ---- 种族值：加斜纹与数值胶囊 ---- */
.st .bar{ position:relative }
.st .bar i{ position:relative; overflow:hidden }
.st .bar i::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg,
    rgba(255,255,255,.28) 0 4px, rgba(255,255,255,0) 4px 9px);
  pointer-events:none;
}
.st .v{
  min-width:44px; padding:1px 6px; border-radius:8px; background:#eef2f8;
  color:var(--ink);
}

/* ---- 招式行：分类图标 + 悬停 ---- */
.mv{ transition: transform .1s, box-shadow .1s, background .15s }
.mv:hover{ transform:translateY(-2px); box-shadow:0 5px 0 rgba(29,36,51,.14) }
.mv .kind::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  margin-right:5px; vertical-align:middle; background:currentColor; opacity:.65;
}
.mv .kind.phys::before{ border-radius:1px; transform:rotate(45deg) }
.mv .kind.spec::before{ background:currentColor; box-shadow:0 0 0 2px rgba(255,255,255,.9) inset }

/* ---- 小节标题：加计数徽标 ---- */
.sec h3{ letter-spacing:1.2px }
.sec h3 .cnt{
  font-size:11px; font-weight:900; color:var(--ink-3);
  background:#eef2f8; border-radius:999px; padding:1px 8px;
  letter-spacing:0;
}

/* ---- 焦点可见性（键盘操作） ---- */
:focus-visible{ outline:3px solid #2b6ce8; outline-offset:3px; border-radius:8px }

/* ---- 空状态：漂浮小球 ---- */
.empty .big{ box-shadow:0 14px 30px rgba(29,36,51,.14) }
.empty .rowhint{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:16px;
}
.empty .rowhint span{
  font-size:12px; font-weight:800; color:var(--ink-3);
  background:#fff; border:2px solid #dfe6f0; border-radius:999px; padding:5px 12px;
}

/* ---- 底栏 ---- */
footer{ padding-top:8px }
footer b{ color:var(--ink-2) }

/* ---- 窄屏适配 ---- */
@media (max-width:560px){
  h1{font-size:24px}
  .brand .ball{width:36px;height:36px}
  .hero{min-height:230px; padding:16px 14px 10px}
  .hero img{width:200px; height:200px; max-width:90%; max-height:210px}
  .nm{font-size:25px}
  .body{padding:15px 15px 20px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .wrap{padding:18px 12px 60px}
  .effrow{grid-template-columns:66px 1fr}
  #audioctl{ position:static; justify-content:center; margin-top:14px }
  .abtn{ width:38px; height:38px }
  .abtn svg{ width:18px; height:18px }
  .hero::after{ height:26px; width:180px }
}