/* 拼豆宝可梦图鉴 —— 官方图鉴机风 UI + 洛托姆小电话搜索 */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --dex-red: #e3352f;
  --dex-red-d: #b71d1c;
  --dex-dark: #27252a;
  --paper: #f4f1e8;
  --ink: #2c2a26;
  --screen: #fbfaf5;
  --line: #e2ddd0;
  --type-bg: #fff;
}
html, body { min-height: 100%; }
body {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 400px at 80% -100px, rgba(227, 53, 47, .08), transparent 60%),
    radial-gradient(600px 300px at 10% 20%, rgba(255, 200, 80, .05), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  background-attachment: fixed;
}
a { color: var(--dex-red-d); }
button { font-family: inherit; }

/* ================= 图鉴机外壳 ================= */
.dex-device {
  background:
    linear-gradient(160deg, #ef4a42 0%, var(--dex-red) 42%, var(--dex-red-d) 100%);
  border-bottom: 6px solid #8f1615;
  border-radius: 0 0 26px 26px;
  padding: 18px clamp(14px, 3vw, 34px) 0;
  box-shadow: 0 10px 30px rgba(150, 30, 25, .28);
  position: relative;
}
.dex-top {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  max-width: 1240px; margin: 0 auto; flex-wrap: wrap;
}
.dex-brand { display: flex; align-items: center; gap: 16px; flex: 1 1 320px; min-width: 260px; }
.dex-lens {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #cfeaff 0%, #5da6d6 38%, #2a5f96 70%, #163a5f 100%);
  border: 5px solid #f5f1e6;
  box-shadow: 0 0 0 3px #8f1615, 0 4px 8px rgba(0, 0, 0, .35),
              inset -4px -5px 8px rgba(0, 0, 0, .35);
}
.dex-title h1 {
  font-size: clamp(20px, 2.6vw, 28px); color: #fff7e8; letter-spacing: .14em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .22);
}
.dex-title p { margin-top: 5px; font-size: 11.5px; letter-spacing: .22em; color: rgba(255, 245, 230, .82); }
.dex-title p i { font-style: normal; margin: 0 5px; }
.dex-led { width: 11px; height: 11px; border-radius: 50%; flex: none;
  border: 2px solid rgba(0, 0, 0, .35); box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4); }
.led-r { background: #ff7a6e; box-shadow: 0 0 8px rgba(255, 120, 100, .9), inset 0 -1px 2px rgba(0,0,0,.4);
  animation: ledblink 2.4s infinite; }
.led-y { background: #ffd34d; }
.led-g { background: #7be08a; }
@keyframes ledblink { 0%, 70%, 100% { opacity: 1; } 80%, 88% { opacity: .25; } }

/* ================= 洛托姆小电话(屏幕即搜索栏) ================= */
.rotom {
  flex: 0 0 auto;
  position: relative;
  display: flex; align-items: center;
  padding: 26px 0 58px; /* 上方留焰,下方留对话泡 */
}
.rotom-unit {
  position: relative;
  width: clamp(236px, 27vw, 290px);
  animation: rotomfloat 3.6s ease-in-out infinite;
  filter: drop-shadow(0 10px 16px rgba(80, 10, 10, .35));
}
@keyframes rotomfloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-6px) rotate(1.2deg); }
}
/* 等离子焰 */
.ru-flames {
  position: absolute; left: -6%; right: -6%; top: -26px;
  width: 112%; height: 40px;
  transform-origin: 50% 100%;
  animation: plasmaflick 1.7s ease-in-out infinite;
}
@keyframes plasmaflick {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(1.14) translateY(-2px); }
  72% { transform: scaleY(.92) translateY(1px); }
}
.plasma, .plasma-sm { fill: #ff9a2e; stroke: #d96a10; stroke-width: 2.5; stroke-linejoin: round; }
.plasma-sm { fill: #ffac45; }
/* 手臂 */
.ru-arm {
  position: absolute; top: 46%; width: 26px; height: 50px; z-index: 0;
  animation: armwiggle 2.8s ease-in-out infinite;
}
.ru-arm-l { left: -20px; }
.ru-arm-r { right: -20px; transform: scaleX(-1); animation-delay: .35s; }
@keyframes armwiggle { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(5deg); } }
.ru-arm-r { }
.plasma-arm { fill: none; stroke: #ff9a2e; stroke-width: 8; stroke-linecap: round; }
/* 闪电尾 */
.ru-tail {
  position: absolute; bottom: -26px; left: 50%; margin-left: -22px;
  width: 44px; height: 36px; z-index: 0;
  animation: tailflick 2.2s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes tailflick { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(6deg); } }
.plasma-tail { fill: #ff9a2e; stroke: #d96a10; stroke-width: 2; stroke-linejoin: round; }

/* 手机壳 */
.ru-shell {
  position: relative; z-index: 2;
  background: linear-gradient(160deg, #e2473d, #c52e29 55%, #a82320);
  border: 2.5px solid #8f1b18;
  border-radius: 30px;
  padding: 9px 12px 11px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), inset 0 -6px 12px rgba(0, 0, 0, .18);
}
.ru-bezel {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  height: 30px; position: relative;
}
.ru-cam {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #8fd0ff, #1b3a55);
  box-shadow: inset 0 0 2px #000;
}
.ru-speaker {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 4px; border-radius: 4px; background: #7a1716;
}
/* 洛托姆眼睛 */
.ru-eye {
  width: 23px; height: 27px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d7ecf7 80%);
  border: 1.5px solid #8f1b18;
  position: relative;
  transition: transform .12s;
}
.ru-eye .iris {
  position: absolute; left: 50%; top: 52%;
  width: 11px; height: 12px; margin: -6px 0 0 -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6fc0ff, #1e6fb0);
  transition: transform .25s;
}
.ru-eye .iris b {
  position: absolute; left: 2px; top: 2px;
  width: 3.4px; height: 3.4px; border-radius: 50%; background: #fff;
}
.rotom.blink .ru-eye { transform: scaleY(.08); }
.rotom.focus .ru-eye .iris { transform: translateY(3px) scaleY(.7); }
.rotom.search .ru-eye .iris { animation: eyeroll 1s linear infinite; }
@keyframes eyeroll {
  0% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 100% { transform: translateX(-3px); }
}
/* 屏幕 = 搜索 */
.ru-screen { position: relative; }
.ru-screen input {
  width: 100%; height: 50px;
  border: 2.5px solid #6e1614;
  border-radius: 14px;
  background: linear-gradient(180deg, #15373e, #0d282f);
  color: #9ff0e0;
  font-size: 16px; letter-spacing: .04em;
  padding: 0 38px 0 16px;
  outline: none;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6);
  text-shadow: 0 0 8px rgba(159, 240, 224, .5);
  transition: box-shadow .25s, border-color .25s;
}
.ru-screen input::placeholder { color: rgba(159, 240, 224, .52); text-shadow: none; }
.ru-screen input::-webkit-search-cancel-button { -webkit-appearance: none; }
.rotom.focus .ru-screen input {
  border-color: #ffd34d;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.55), 0 0 22px rgba(255, 180, 60, .6);
}
#qClear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: #ff9a2e; color: #5a2208; font-size: 15px;
  cursor: pointer; line-height: 1; padding: 0;
}
.ru-chin { display: flex; justify-content: center; padding-top: 7px; }
.ru-chin span { width: 34px; height: 4px; border-radius: 4px; background: #7a1716; }

/* 对话泡 */
.rotom-bubble {
  position: absolute; left: 8%; top: calc(100% - 46px);
  max-width: 320px;
  background: #fff8e8; color: #5a4632;
  font-size: 12px; line-height: 1.6;
  padding: 8px 13px; border-radius: 12px;
  border: 2px solid #d9b878;
  box-shadow: 0 6px 16px rgba(100, 30, 20, .25);
  white-space: nowrap;
}
.rotom-bubble::before {
  content: ""; position: absolute; left: 22px; top: -9px;
  border: 6px solid transparent; border-bottom-color: #d9b878;
}
.rotom-bubble b { color: var(--dex-red-d); }

/* ================= 世代按键 ================= */
.dex-keys {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 1240px; margin: 14px auto 0; padding-bottom: 16px;
}
.key {
  border: 2px solid #8f1615;
  background: linear-gradient(180deg, #f8f3e6, #ded5c0);
  color: #6f1715;
  font-size: 13px; letter-spacing: .08em;
  padding: 7px 13px; border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 0 #7a1413, 0 4px 8px rgba(0, 0, 0, .2);
  transition: transform .1s, box-shadow .1s, background .2s;
  display: inline-flex; align-items: center; gap: 5px;
}
.key b {
  display: inline-grid; place-items: center;
  min-width: 17px; height: 17px; padding: 0 3px;
  border-radius: 50%; background: var(--dex-red); color: #fff;
  font-size: 10.5px; font-weight: 700;
}
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #7a1413; }
.key.on {
  background: linear-gradient(180deg, #3a353b, #221f25);
  border-color: #16141a; color: #ffe6a0;
  box-shadow: 0 3px 0 #0e0d11, inset 0 1px 0 rgba(255, 255, 255, .12);
}
.key.on b { background: #ffd34d; color: #5a2208; }
.key-pattern { margin-left: auto; }
.key-pattern.on { background: linear-gradient(180deg, #b8862e, #8a5e17); color: #fff8e8; border-color: #5e3f0c; }

/* ================= 屏幕 ================= */
.dex-screen {
  max-width: 1240px; margin: 22px auto 40px;
  background: linear-gradient(180deg, #3a353b, #26222a);
  border-radius: 22px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .22), inset 0 2px 0 rgba(255, 255, 255, .08);
  position: relative;
}
.screen-inner {
  background:
    linear-gradient(180deg, var(--screen), #f4f1e6);
  border-radius: 14px;
  padding: 16px clamp(10px, 1.6vw, 22px) 26px;
  min-height: 60vh;
}
.screen-hi {
  position: absolute; inset: 14px; border-radius: 14px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 28%, transparent 70%, rgba(0, 0, 0, .05));
}
.screen-status {
  font-size: 12.5px; letter-spacing: .12em; color: #8a8272;
  padding: 2px 4px 14px;
  display: flex; align-items: center; gap: 8px;
}
.screen-status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #57b96b; box-shadow: 0 0 8px rgba(87, 185, 107, .7);
}

/* ================= 卡片网格 ================= */
.pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.pd-item {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px 9px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
  animation: cardfadein .4s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cardfadein {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.pd-item::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--tc, #ccc);
}
.pd-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--tc) 8%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.pd-item:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: var(--tc, var(--dex-red));
  box-shadow: 0 14px 32px rgba(0, 0, 0, .14), 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent);
}
.pd-item:hover::after { opacity: 1; }
.pd-item:hover img,
.pd-item:hover .fallback-ball { transform: scale(1.08); }
.pd-item img,
.pd-item .fallback-ball {
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.pd-item .num {
  position: absolute; left: 9px; top: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #a79d89; font-variant-numeric: tabular-nums;
}
.pd-item .gen {
  position: absolute; right: 9px; top: 10px;
  font-size: 10px; color: #b3a995;
}
.pd-item .gen-bead {
  color: #8a5e17; background: linear-gradient(135deg, #fff1cf, #ffe4a0);
  border: 1px solid #e8c677; border-radius: 999px; padding: 1px 7px;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(200, 150, 50, .2);
}
.pd-item .gen-queue {
  color: #9b9487; background: rgba(120, 114, 100, .1);
  border: 1px dashed rgba(150, 142, 124, .5); border-radius: 999px; padding: 1px 7px;
}
/* 排队中的卡片:压暗 + 斜纹 + 像素图变灰 */
.pd-item.is-wip { opacity: .62; border-style: dashed; }
.pd-item.is-wip::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0) 0 10px, rgba(90, 84, 70, .05) 10px 20px);
  pointer-events: none;
}
.pd-item.is-wip img { filter: grayscale(.82) brightness(.9); }
.pd-item.is-wip:hover { opacity: .85; transform: translateY(-2px); }
.pd-item img {
  width: 88px; height: 88px; object-fit: contain;
  margin: 12px auto 4px; display: block;
  image-rendering: pixelated;
}
.fallback-ball {
  width: 88px; height: 88px;
  margin: 12px auto 4px; display: block;
}
.pd-item .nm { font-size: 14px; font-weight: 600; color: #33302a; letter-spacing: .03em; }
.pd-item .sub { font-size: 10px; color: #a39a88; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-types { display: flex; justify-content: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.t-type {
  font-size: 10.5px; letter-spacing: .08em;
  color: #fff; border-radius: 999px;
  padding: 2px 9px; line-height: 1.5;
  background: var(--tc2, #888);
}
.fallback-ball {
  background: radial-gradient(circle at 50% 38%, #fff 0 22%, #eee 23% 46%, #e8472f 47% 72%, #c1312a 73% 100%);
  border-radius: 50%;
  position: relative;
}
.fallback-ball::after {
  content: ""; position: absolute; left: 0; right: 0; top: 44%; height: 12%;
  background: #2b2b2b;
}

/* ================= 属性配色(官方近似) ================= */
.t-normal, .tp-normal { --tc: #9099a1; --tc2: #9099a1; }
.t-fire, .tp-fire { --tc: #ff9448; --tc2: #ff9448; }
.t-water, .tp-water { --tc: #4b90dd; --tc2: #4b90dd; }
.t-electric, .tp-electric { --tc: #f5c518; --tc2: #d9a900; }
.t-grass, .tp-grass { --tc: #5cb85c; --tc2: #5cb85c; }
.t-ice, .tp-ice { --tc: #74cfc0; --tc2: #74cfc0; }
.t-fighting, .tp-fighting { --tc: #e0523f; --tc2: #e0523f; }
.t-poison, .tp-poison { --tc: #aa5fb0; --tc2: #aa5fb0; }
.t-ground, .tp-ground { --tc: #d48a3c; --tc2: #d48a3c; }
.t-flying, .tp-flying { --tc: #8fa8dd; --tc2: #8fa8dd; }
.t-psychic, .tp-psychic { --tc: #f56e8c; --tc2: #f56e8c; }
.t-bug, .tp-bug { --tc: #9bb52e; --tc2: #9bb52e; }
.t-rock, .tp-rock { --tc: #b8a05e; --tc2: #b8a05e; }
.t-ghost, .tp-ghost { --tc: #7b6cad; --tc2: #7b6cad; }
.t-dragon, .tp-dragon { --tc: #4b6cc4; --tc2: #4b6cc4; }
.t-dark, .tp-dark { --tc: #5a5048; --tc2: #5a5048; }
.t-steel, .tp-steel { --tc: #7a929e; --tc2: #7a929e; }
.t-fairy, .tp-fairy { --tc: #e88fb0; --tc2: #e88fb0; }
/* ================= 精灵球样式 ================= */
.ball-sprite {
  width: 88px; height: 88px;
  margin: 12px auto 4px;
  border-radius: 50%;
  position: relative;
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.ball-sprite::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 46%;
  height: 8%;
  background: #222;
}
.ball-sprite::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22%; height: 22%;
  margin-left: -11%; margin-top: -11%;
  background: #fff;
  border: 3px solid #222;
  border-radius: 50%;
  z-index: 2;
}
.pd-item:hover .ball-sprite { transform: scale(1.08) rotate(-6deg); }

/* 大尺寸详情页用 */
.ball-sprite-big {
  width: 180px; height: 180px;
  margin: 10px auto;
  border-radius: 50%;
  position: relative;
}
.ball-sprite-big::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 46%;
  height: 7%;
  background: #222;
}
.ball-sprite-big::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20%; height: 20%;
  margin-left: -10%; margin-top: -10%;
  background: #fff;
  border: 4px solid #222;
  border-radius: 50%;
  z-index: 2;
}

/* 精灵球 - 红白 */
.ball-poke {
  background: linear-gradient(to bottom, #e8472f 0%, #e8472f 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 超级球 - 蓝白红 */
.ball-great {
  background: linear-gradient(to bottom, #4b90dd 0%, #4b90dd 30%, #e8472f 30%, #e8472f 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 高级球 - 黑黄 */
.ball-ultra {
  background: linear-gradient(to bottom, #2a2a2e 0%, #2a2a2e 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}
.ball-ultra::after {
  background: #ffd34d;
  height: 6%;
  top: 47%;
}

/* 大师球 - 紫白M */
.ball-master {
  background: linear-gradient(to bottom, #7b5aa6 0%, #7b5aa6 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 狩猎球 - 绿黄斑点 */
.ball-safari {
  background: radial-gradient(circle at 30% 30%, #5cb85c 8%, transparent 9%),
              radial-gradient(circle at 70% 25%, #5cb85c 10%, transparent 11%),
              radial-gradient(circle at 50% 50%, #5cb85c 7%, transparent 8%),
              radial-gradient(circle at 25% 65%, #5cb85c 9%, transparent 10%),
              radial-gradient(circle at 75% 60%, #5cb85c 8%, transparent 9%),
              linear-gradient(to bottom, #ffd34d 0%, #ffd34d 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 爱心球 - 粉红 */
.ball-love {
  background: linear-gradient(to bottom, #f094b4 0%, #f094b4 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 月亮球 - 紫黄月亮 */
.ball-moon {
  background: linear-gradient(to bottom, #5a3d82 0%, #5a3d82 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 朋友球 - 绿 */
.ball-friend {
  background: linear-gradient(to bottom, #5cb85c 0%, #5cb85c 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 豪华球 - 黑金 */
.ball-luxury {
  background: linear-gradient(to bottom, #2a2a2e 0%, #2a2a2e 46%, #fff 46%, #fff 100%);
  border: 3px solid #b8860b;
}
.ball-luxury::after {
  background: #b8860b;
  height: 6%;
  top: 47%;
}
.ball-luxury::before {
  border-color: #b8860b;
  background: #fff8dc;
}

/* 治愈球 - 粉白 */
.ball-heal {
  background: linear-gradient(to bottom, #fff 0%, #fff 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 先机球 - 蓝黄 */
.ball-quick {
  background: linear-gradient(to bottom, #4b90dd 0%, #4b90dd 46%, #fff 46%, #fff 100%);
  border: 3px solid #222;
}

/* 黑暗球 - 黑绿 */
.ball-dusk {
  background: linear-gradient(to bottom, #1a1a2e 0%, #1a1a2e 46%, #2a4a3a 46%, #2a4a3a 100%);
  border: 3px solid #222;
}
.ball-dusk::after {
  background: #222;
}

/* 精灵球标签 */
.gen-ball {
  color: #8a5e17;
  background: linear-gradient(135deg, #fff1cf, #ffe4a0);
  border: 1px solid #e8c677;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
  font-size: 10px;
}
.ball-card .num {
  color: #b38620;
}

/* 精灵球Tab按钮 */
.key-balls {
  background: linear-gradient(180deg, #ffe4a0, #e8c677);
  border-color: #8a5e17;
  color: #5a3d0c;
}
.key-balls:hover { background: linear-gradient(180deg, #fff0c0, #f0d080); }
.key-balls.on {
  background: linear-gradient(180deg, #8a5e17, #5a3d0c);
  border-color: #3a2808;
  color: #fff8dc;
  box-shadow: 0 3px 0 #2a1a05, inset 0 1px 0 rgba(255, 255, 255, .12);
}

/* ================= 详情卡 ================= */
.pd-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(30, 24, 22, .55);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
}
.pd-modal[hidden] { display: none; }
.pd-card {
  width: min(920px, 100%);
  max-height: 92vh; overflow-y: auto;
  background: var(--screen);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 70px rgba(0, 0, 0, .4);
  animation: cardup .4s cubic-bezier(.2, .8, .2, 1);
}
@keyframes cardup { from { transform: translateY(60px); opacity: .4; } to { transform: none; opacity: 1; } }
.pd-x {
  position: absolute; position: sticky; top: 12px; margin-left: calc(100% - 56px);
  z-index: 5;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid #8f1615; background: var(--dex-red); color: #fff;
  font-size: 20px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.3);
}
#detail { padding: 0 clamp(14px, 3vw, 34px) 34px; margin-top: -40px; }

.d-hero {
  display: grid; grid-template-columns: 230px 1fr; gap: 24px;
  background: linear-gradient(160deg, var(--hc, #e8e4d8), #fff);
  border: 1.5px solid var(--line); border-radius: 18px;
  padding: 22px; align-items: center;
}
.d-artwrap {
  background: radial-gradient(circle at 50% 42%, #fff, rgba(0, 0, 0, .05));
  border: 1.5px dashed var(--hc2, #cfc6b2);
  border-radius: 14px; padding: 8px;
}
.d-artwrap img { max-width: 100%; display: block; margin: 0 auto; }

/* 大图叠层:像素图垫底,CDN 淡入 */
.art-stack { position: relative; height: 214px; }
.art-stack img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.art-stack .art-sprite { width: 92px; image-rendering: pixelated; }
.art-stack .art-cdn {
  max-width: 100%; max-height: 214px; width: auto;
  opacity: 0; transition: opacity .45s ease;
}
.art-stack .art-cdn.in { opacity: 1; }
.art-stack-sm { height: 230px; }
.art-stack-sm .art-cdn { max-height: 230px; }
.d-num { font-size: 12px; font-weight: 700; color: #a79d89; letter-spacing: .1em; }
.d-name { font-size: clamp(26px, 4vw, 34px); margin: 2px 0 6px; color: #2c2a26; letter-spacing: .05em; }
.d-name small { font-size: 14px; color: #a39a88; font-weight: 400; margin-left: 10px; letter-spacing: .02em; }
.d-meta .genus { font-size: 13.5px; color: #7d7565; margin: 2px 0 10px; }
.intro { font-size: 14.5px; line-height: 1.95; color: #5a544a; margin-top: 10px; }
.dex-entry {
  margin-top: 12px; font-size: 13.5px; line-height: 1.9; color: #6a6456;
  background: #f7f3e4; border-left: 3px solid var(--hc2, #c9a050);
  border-radius: 0 10px 10px 0; padding: 9px 14px;
}
.dex-entry b { color: #8a6a2c; letter-spacing: .1em; margin-right: 8px; }
.pattern-flag {
  display: inline-block; margin-top: 12px;
  font-size: 12px; color: #8a5e17; background: #fff1cf;
  border: 1px solid #e8c677; border-radius: 999px; padding: 4px 12px;
}
.no-pattern {
  margin-top: 14px; padding: 16px 18px;
  border: 1.5px dashed #d3cbb8; border-radius: 14px;
  color: #918876; font-size: 13px; line-height: 1.9;
  background: rgba(255, 255, 255, .6);
}

/* 视图块 */
.d-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 18px; }
.d-view {
  background: #fff; border: 1.5px solid var(--line); border-radius: 16px;
  padding: 16px;
}
.d-view h3 { font-size: 14px; letter-spacing: .12em; color: #8a8272; font-weight: 600; margin-bottom: 10px; }
.d-view .big { text-align: center; }
.d-view .big img { max-width: 100%; max-height: 230px; image-rendering: pixelated; }
.d-view .cap { font-size: 11.5px; color: #b0a793; text-align: center; margin-top: 8px; }
.d-view.bead { grid-column: 1 / -1; }
.bead-pattern-img {
  text-align: center;
  background: #fffef9;
  border: 1.5px solid #e8e0cc;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.bead-pattern-img img {
  width: 100%;
  border-radius: 6px;
  cursor: zoom-in;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  transition: transform .2s;
}
.bead-pattern-img img:hover {
  transform: scale(1.01);
}
.d-view.bead-detail { grid-column: 1 / -1; }
.bead-tip { font-size: 12px; color: #a39a88; margin-top: 8px; }

.pd-foot { max-width: 1240px; margin: 0 auto 30px; padding: 0 20px;
  font-size: 11.5px; line-height: 1.9; color: #a39a88; }
.pd-foot a { text-decoration: none; }

/* ================= 移动端 ================= */
@media (max-width: 760px) {
  .dex-device { border-radius: 0 0 18px 18px; }
  .dex-brand { min-width: 100%; }
  .dex-lens { width: 42px; height: 42px; border-width: 4px; }
  .dex-led { width: 9px; height: 9px; }
  .rotom { margin: 0 auto; padding: 24px 0 56px; }
  .rotom-unit { width: min(72vw, 268px); }
  .rotom-bubble { left: 4%; font-size: 11px; max-width: 230px; white-space: normal; }
  .key { padding: 6px 10px; font-size: 12px; }
  .key-pattern { margin-left: 0; }
  .pd-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
  .pd-item img, .fallback-ball { width: 68px; height: 68px; }
  .pd-item .nm { font-size: 12.5px; }
  .d-hero { grid-template-columns: 1fr; }
  .art-stack { height: 180px; }
  .art-stack .art-cdn { max-height: 180px; }
  .art-stack-sm { height: 200px; }
  .art-stack-sm .art-cdn { max-height: 200px; }
}

/* ================= 打印:只出图纸 ================= */
@media print {
  .dex-device, .pd-foot, .pd-x, .d-hero, .d-view:not(.bead), .screen-hi { display: none !important; }
  body { background: #fff; }
  .dex-screen, .pd-modal { position: static; background: none; box-shadow: none; border-radius: 0; padding: 0;
    max-width: none; display: block; }
  .pd-card { max-height: none; overflow: visible; box-shadow: none; border-radius: 0; }
  #detail { margin: 0; padding: 0; }
  .d-view.bead { display: block; border: 0; padding: 0; }
  .bead-board { border: 0; overflow: visible; }
  .bead { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==================== 施工中(游戏内半成品版) ==================== */
.wip-tag {
  display: inline-block; margin-left: 10px; vertical-align: middle;
  font-style: normal; font-size: 12px; letter-spacing: .1em;
  color: #5a4a26; background: repeating-linear-gradient(-45deg, #ffe9a8 0 8px, #ffd978 8px 16px);
  border: 1px solid #c99a3c; border-radius: 5px;
  padding: 2px 9px; vertical-align: middle;
  animation: wip-sway 2.4s ease-in-out infinite;
}
@keyframes wip-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }

/* 施工横幅 */
.wip-banner {
  position: relative; margin: 0 0 16px;
  border: 1.5px dashed #d8b878; border-radius: 14px;
  background:
    repeating-linear-gradient(-45deg, rgba(232, 198, 119, .06) 0 14px, rgba(232, 198, 119, 0) 14px 28px),
    linear-gradient(180deg, #fdf8ea, #f7edd2);
  padding: 14px 18px 16px;
}
.wip-banner-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.wip-tape {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #7a5a1e;
  background: #fff6d8; border: 1px solid #e0c074; border-radius: 6px;
  padding: 3px 10px;
}
.wip-update { font-size: 11.5px; color: #a08a56; letter-spacing: .03em; }
.wip-text { margin: 10px 0 12px; font-size: 13.5px; line-height: 1.9; color: #6a5c40; }
.wip-text b { color: #8a5e17; }
.wip-text s { color: #b3a78c; }
.wip-progress { display: flex; align-items: center; gap: 12px; }
.wip-bar {
  flex: 1; height: 10px; border-radius: 999px;
  background: rgba(120, 98, 50, .14); overflow: hidden;
  border: 1px solid rgba(180, 145, 70, .35);
}
.wip-bar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #f0b94e, #e0902c);
  border-radius: 999px;
  transition: width .8s ease;
}
.wip-percent { font-size: 12px; color: #8a6a2c; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 排队徽章 / 排队详情 */
.pattern-wip {
  color: #7c6a44 !important; background: #f2ece0 !important; border-color: #d3c6ac !important;
}
.bead-wip { background: repeating-linear-gradient(-45deg, #fbf7ec 0 18px, #f5efdf 18px 36px) !important; }
.wip-placeholder {
  border: 2px dashed #d8c8a4; border-radius: 14px;
  background: rgba(255, 252, 244, .7);
  padding: 34px 24px; text-align: center;
}
.wip-hammer { font-size: 38px; animation: wip-sway 1.8s ease-in-out infinite; }
.wip-ph-title { margin: 10px 0 8px; font-size: 17px; font-weight: 700; color: #7c6a44; letter-spacing: .06em; }
.wip-ph-text { font-size: 13.5px; line-height: 2; color: #8a7c5e; }
.wip-ph-text b { color: #b5682a; }
.wip-order {
  display: inline-block; margin-top: 14px;
  font-size: 12px; color: #9b8a62; background: rgba(150, 125, 70, .1);
  border-radius: 999px; padding: 4px 14px;
}

/* 留言板 */
.guestbook { margin-top: 34px; }
.gb-title {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 19px; letter-spacing: .12em; color: #4a3f28;
  border-bottom: 2px solid #e6dcc2; padding-bottom: 10px; margin-bottom: 16px;
}
.gb-title small { font-size: 12px; color: #a08a56; letter-spacing: .05em; font-weight: 400; }
.gb-list { display: flex; flex-direction: column; gap: 12px; }
.gb-item {
  display: flex; gap: 12px;
  background: #fffdf7; border: 1px solid #ece3cc; border-radius: 12px;
  padding: 12px 15px;
}
.gb-avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 15px; font-weight: 700;
}
.gb-body { min-width: 0; }
.gb-meta { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.gb-meta b { font-size: 13.5px; color: #53462c; }
.gb-meta time { font-size: 11px; color: #b0a484; }
.gb-body p { margin: 0; font-size: 13px; line-height: 1.85; color: #6a5f46; }
.gb-write {
  margin-top: 16px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  opacity: .7;
}
.gb-write input {
  flex: 1; min-width: 220px; height: 38px;
  border: 1.5px dashed #cbbf9f; border-radius: 999px;
  background: #faf6ea; padding: 0 16px;
  font-size: 13px; color: #a89c7e; outline: none;
}
.gb-write button {
  height: 38px; padding: 0 20px; border-radius: 999px;
  border: 1.5px solid #cbbf9f; background: #e8e0cc; color: #8a7e60;
  font-size: 13px; cursor: not-allowed;
}
.gb-tip { font-size: 11.5px; color: #b3a786; }

@media (max-width: 760px) {
  .wip-text { font-size: 12.5px; }
  .gb-item { padding: 10px 12px; }
}

/* 半成品版:对话泡允许换行,避免长文本溢出 */
.rotom-bubble { white-space: normal; max-width: 300px; line-height: 1.7; }
@media (max-width: 760px) { .rotom-bubble { max-width: 230px; } }