:root {
  --prompt-bg: #0c0a08;
  --prompt-felt: #1a1410;
  --prompt-felt-mid: #241c16;
  --prompt-gold: #c9a227;
  --prompt-gold-soft: #e8d48b;
  --prompt-gold-dim: #8a7020;
  --prompt-ink: #f3ebe0;
  --prompt-muted: #b8a894;
  --prompt-dim: #7a6d5c;
  --prompt-persona: #c4a035;
  --prompt-persona-inner: #f0d878;
  --prompt-playbook: #2d7a4f;
  --prompt-playbook-inner: #4caf75;
  --prompt-guard: #8b3a5c;
  --prompt-guard-inner: #c45a84;
  --prompt-recipe: #2a6d8f;
  --prompt-recipe-inner: #4aa3c9;
  --prompt-asset: #a66b2b;
  --prompt-asset-inner: #d4924a;
}

body.prompt-card-overlay-open { overflow: hidden; }

/* 仅在图鉴页解除 Butterfly 的文章卡片宽度和白色背景，不影响普通文章。 */
#page:has(.prompt-cards-app) {
  max-width: none;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.prompt-cards-app {
  width: 100vw;
  min-height: 100vh;
  margin-left: calc(50% - 50vw);
  color: var(--prompt-ink);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgb(201 162 39 / 12%), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgb(139 58 92 / 8%), transparent 50%),
    var(--prompt-bg);
}

.prompt-cards-hero { padding: clamp(3rem, 8vw, 6rem) 1.25rem 2rem; text-align: center; }
.prompt-cards-brand { margin: 0; color: var(--prompt-gold-soft); font: 700 clamp(2rem, 6vw, 3.6rem) Georgia, serif; letter-spacing: .18em; text-transform: uppercase; }
.prompt-cards-hero h1 { margin: 1rem 0 .5rem; color: var(--prompt-ink); font-size: clamp(1.1rem, 2.8vw, 1.5rem); letter-spacing: .12em; }
.prompt-cards-hero > p:last-child { color: var(--prompt-muted); }
.prompt-cards-main { max-width: 1100px; margin: 0 auto; padding: .5rem clamp(1.25rem, 4vw, 2rem) 3rem; }
.prompt-cards-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .75rem; }
.prompt-cards-search { display: flex; align-items: center; gap: .45rem; min-width: 0; padding: .35rem .6rem; border: 1px solid rgb(201 162 39 / 35%); border-radius: 6px; background: rgb(8 6 4 / 62%); transition: border-color .15s, background .15s, box-shadow .15s; }
.prompt-cards-search:focus-within { border-color: var(--prompt-gold); background: rgb(16 12 8 / 78%); box-shadow: 0 0 0 2px rgb(201 162 39 / 20%); }
.prompt-cards-search input { width: 100%; min-width: 0; padding: .2rem; color: var(--prompt-ink); background: transparent; border: 0; outline: 0; }
.prompt-cards-search input::placeholder { color: var(--prompt-dim); }
.prompt-cards-tabs { display: flex; overflow: hidden; border: 1px solid rgb(201 162 39 / 35%); border-radius: 6px; }
.prompt-cards-tabs button { padding: .45rem .75rem; color: var(--prompt-muted); background: transparent; border: 0; cursor: pointer; }
.prompt-cards-tabs button[aria-pressed="true"] { color: var(--prompt-gold-soft); background: rgb(201 162 39 / 22%); }
.prompt-cards-filter { display: flex; align-items: center; gap: .35rem; color: var(--prompt-muted); font-size: .8rem; }
.prompt-cards-filter select { padding: .4rem; color: var(--prompt-ink); background: #17110d; border: 1px solid rgb(201 162 39 / 35%); border-radius: 6px; }
.prompt-cards-count { padding: .8rem 0; color: var(--prompt-gold-dim); border-bottom: 1px solid rgb(201 162 39 / 22%); }
.prompt-cards-status { padding: 2rem 1rem; color: var(--prompt-muted); text-align: center; }
.prompt-cards-reset,
.prompt-cards-retry { display: block; margin: 0 auto 1rem; padding: .5rem 1rem; color: var(--prompt-gold-soft); background: rgb(201 162 39 / 18%); border: 1px solid var(--prompt-gold); border-radius: 6px; cursor: pointer; }
.prompt-cards-reset:focus-visible,
.prompt-cards-retry:focus-visible { outline: 2px solid var(--prompt-gold-soft); outline-offset: 3px; }
.prompt-cards-reset[hidden],
.prompt-cards-retry[hidden] { display: none; }

/* 三档最小列宽复现目标站在手机、平板和桌面下的卡面密度。 */
.prompt-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); align-items: start; gap: clamp(1rem, 2.5vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.prompt-cards-grid li { min-width: 0; }

.prompt-card {
  --frame: var(--prompt-persona);
  --frame-inner: var(--prompt-persona-inner);
  --rarity: #9a9a9a;
  --shine-x: 50%;
  --shine-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: 100%;
  aspect-ratio: 59 / 86;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 55%);
  perspective: 900px;
  transform: translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}

/* 入场动画只绑定首次创建标记，筛选复用或重新插入节点时不会再次闪烁。 */
.prompt-card-entering { animation: prompt-card-enter .7s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: var(--enter-delay, 0ms); }

/* 五种卡牌类型各自拥有固定边框色，稀有度仅控制右上角徽标。 */
.prompt-card-playbook { --frame: var(--prompt-playbook); --frame-inner: var(--prompt-playbook-inner); }
.prompt-card-guard { --frame: var(--prompt-guard); --frame-inner: var(--prompt-guard-inner); }
.prompt-card-recipe { --frame: var(--prompt-recipe); --frame-inner: var(--prompt-recipe-inner); }
.prompt-card-asset { --frame: var(--prompt-asset); --frame-inner: var(--prompt-asset-inner); }
.prompt-card-rarity-R { --rarity: #4a9fd4; }
.prompt-card-rarity-SR { --rarity: #c9a227; }
.prompt-card-rarity-UR { --rarity: #e8c878; }
.prompt-card[data-card-slug] { cursor: pointer; }
.prompt-card[data-card-slug]:hover,
.prompt-card[data-card-slug]:focus-visible { z-index: 2; outline: 0; box-shadow: 0 22px 40px rgb(0 0 0 / 65%); transform: translateY(-10px) scale(1.03) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }

/* 5.5% 是目标站卡框与内容的固定比例，避免不同列宽下边框显得忽粗忽细。 */
.prompt-card-inner { display: flex; flex-direction: column; height: 100%; padding: 5.5%; overflow: hidden; border-radius: 6px; background: linear-gradient(145deg, rgb(255 255 255 / 18%), transparent 40%), linear-gradient(180deg, var(--frame-inner), var(--frame) 38%, color-mix(in srgb, var(--frame) 70%, #1a1008)); box-shadow: inset 0 0 0 2px rgb(255 230 160 / 35%), inset 0 0 0 4px rgb(40 24 8 / 55%), 0 0 0 1px rgb(0 0 0 / 50%); }
.prompt-card-namebar { display: flex; flex: none; align-items: center; gap: .35em; margin-bottom: 4%; padding: .35em .5em; border-radius: 3px; background: linear-gradient(#f7f0df, #e8d9b8); box-shadow: inset 0 1px rgb(255 255 255 / 70%), 0 1px 2px rgb(0 0 0 / 25%); }
.prompt-card-name { min-width: 0; flex: auto; overflow: hidden; color: #1a1208; font: 900 clamp(.68rem, 2.5vw, .9rem)/1.2 SimSun, "Songti SC", serif; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; }
.prompt-card-rarity { flex: none; color: var(--rarity); font: 700 clamp(.55rem, 2.2vw, .72rem)/1 Georgia, serif; }
.prompt-card-rarity-UR .prompt-card-rarity { color: transparent; background: linear-gradient(110deg, #ff6b9d, #ffd56b 18%, #7dffb3 36%, #6bc5ff 54%, #c9a0ff 72%, #ff6b9d 90%); background-size: 220% 100%; background-clip: text; animation: prompt-ur 2.8s linear infinite; }

.prompt-card-art { position: relative; flex: auto; min-height: 0; margin-bottom: 3.5%; overflow: hidden; border-radius: 2px; background: radial-gradient(circle at 50% 38%, rgb(255 244 190 / 45%), transparent 24%), repeating-radial-gradient(circle at 50% 44%, transparent 0 14px, rgb(25 14 5 / 13%) 15px 17px), linear-gradient(160deg, var(--frame-inner), #1a1008); box-shadow: inset 0 0 0 2px rgb(30 20 8 / 70%), 0 1px rgb(255 240 200 / 25%); }
.prompt-card-art::before { position: absolute; inset: 0; display: grid; place-items: center; color: rgb(255 247 207 / 72%); font: 700 clamp(2.8rem, 10vw, 5.5rem)/1 Georgia, serif; text-shadow: 0 4px 18px rgb(0 0 0 / 48%); content: "✦"; }
.prompt-card-art[data-kind="playbook"]::before { content: "⌘"; }
.prompt-card-art[data-kind="guard"]::before { content: "♜"; }
.prompt-card-art[data-kind="recipe"]::before { content: "◈"; }
.prompt-card-art[data-kind="asset"]::before { content: "◇"; }
.prompt-card-art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.prompt-card-shine { position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgb(255 255 255 / 35%), transparent 45%); mix-blend-mode: soft-light; transition: opacity .25s; }
.prompt-card:hover .prompt-card-shine,
.prompt-card:focus-visible .prompt-card-shine { opacity: 1; }

.prompt-card-typerow { display: flex; flex: none; justify-content: space-between; align-items: baseline; gap: .35em; margin-bottom: 2.5%; padding: .15em .35em; color: #2a1c0c; font: 700 clamp(.48rem, 1.8vw, .62rem) SimSun, "Songti SC", serif; background: rgb(250 242 220 / 92%); border-radius: 2px; }
.prompt-card-typerow span { max-width: 55%; overflow: hidden; color: #5a4630; font-size: clamp(.4rem, 1.5vw, .52rem); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
/* 效果框固定占卡片 22%，与目标站卡面分区一致。 */
.prompt-card-effect { flex: none; height: 22%; padding: .4em .45em; overflow: hidden; background: rgb(250 244 228 / 95%); border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(80 55 20 / 25%); }
.prompt-card-summary { display: -webkit-box; overflow: hidden; color: #1f160c; font: 500 clamp(.5rem, 1.9vw, .68rem)/1.4 SimSun, "Songti SC", serif; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }

.prompt-card-overlay { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); opacity: 0; pointer-events: none; background: rgb(6 4 2 / 72%); backdrop-filter: blur(6px); transition: opacity .28s cubic-bezier(.22, 1, .36, 1); }
.prompt-card-overlay[hidden] { display: none; }
.prompt-card-overlay.is-open { opacity: 1; pointer-events: auto; }
.prompt-card-overlay.is-closing { opacity: 0; pointer-events: auto; }
.prompt-card-dialog { position: relative; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); width: min(920px, 100%); max-height: min(90vh, 880px); overflow: auto; padding: clamp(1.25rem, 3vw, 2rem); opacity: 0; transform: translateY(16px) scale(.96); background: linear-gradient(160deg, rgb(201 162 39 / 12%), transparent 40%), linear-gradient(var(--prompt-felt-mid), var(--prompt-felt)); border: 1px solid rgb(201 162 39 / 35%); border-radius: 14px; box-shadow: 0 24px 64px rgb(0 0 0 / 55%); transition: opacity .28s cubic-bezier(.22, 1, .36, 1), transform .36s cubic-bezier(.22, 1, .36, 1); }
.prompt-card-overlay.is-open:not(.is-closing) .prompt-card-dialog { opacity: 1; transform: translateY(0) scale(1); }
/* 测量和飞行阶段固定为最终几何位置，只淡入外观，防止目标位自身移动造成落地瞬移。 */
.prompt-card-overlay.is-transitioning .prompt-card-dialog { transform: none; transition-property: opacity; }
.prompt-card-preview { align-self: start; width: 270px; }
.prompt-card-overlay.is-transitioning .prompt-card-preview { visibility: hidden; }
.prompt-card-flip-scene { width: 100%; aspect-ratio: 59 / 86; perspective: 1200px; cursor: grab; touch-action: pan-y; user-select: none; }
.prompt-card-flip-scene.is-dragging { cursor: grabbing; }
.prompt-card-flipper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.prompt-card-flipper.is-springing { transition: transform .32s cubic-bezier(.2, .8, .2, 1.08); }
.prompt-card-face { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; backface-visibility: hidden; }
.prompt-card-face > .prompt-card,
.prompt-card-face > .prompt-card-back { width: 100%; height: 100%; }
.prompt-card-face-back { transform: rotateY(180deg); }
.prompt-card-back { display: grid; place-items: center; color: var(--prompt-gold-soft); background: repeating-radial-gradient(circle at 50% 50%, transparent 0 18px, rgb(232 212 139 / 8%) 19px 21px), radial-gradient(circle, rgb(201 162 39 / 18%), transparent 48%), linear-gradient(145deg, #291d10, #0d0906); border: 7px double rgb(201 162 39 / 70%); border-radius: 6px; box-shadow: inset 0 0 0 4px #120c07, inset 0 0 28px rgb(201 162 39 / 18%); }
.prompt-card-back span { padding: 1.25rem; font: 700 clamp(1.15rem, 5vw, 2rem)/1.25 Georgia, serif; letter-spacing: .16em; text-align: center; text-shadow: 0 2px 16px rgb(232 212 139 / 35%); border: 1px solid rgb(201 162 39 / 45%); transform: rotate(-4deg); }
.prompt-card-art[data-action="open-image"] { cursor: zoom-in; }
.prompt-card-art[data-action="open-image"]:focus-visible { outline: 2px solid var(--prompt-gold-soft); outline-offset: -4px; }
.prompt-card-close { position: absolute; z-index: 1; top: .75rem; right: .85rem; width: 2.25rem; height: 2.25rem; color: var(--prompt-gold-soft); font-size: 1.4rem; background: rgb(12 8 4 / 55%); border: 1px solid rgb(201 162 39 / 35%); border-radius: 50%; cursor: pointer; }
.prompt-card-detail { min-width: 0; opacity: 0; transition: opacity .2s cubic-bezier(.22, 1, .36, 1); }
.prompt-card-overlay.is-content-visible .prompt-card-detail { opacity: 1; }
.prompt-card-meta,
.prompt-card-dialog-summary { color: var(--prompt-muted); }
.prompt-card-detail h2 { color: var(--prompt-gold-soft); font-family: SimSun, "Songti SC", serif; }
.prompt-card-prompt-block { overflow: hidden; background: rgb(8 6 4 / 55%); border: 1px solid rgb(201 162 39 / 22%); border-radius: 10px; }
.prompt-card-prompt-head { display: flex; justify-content: space-between; align-items: center; padding: .65rem .9rem; color: var(--prompt-gold-dim); border-bottom: 1px solid rgb(201 162 39 / 18%); }
.prompt-card-prompt-head button,
.prompt-card-dialog-actions a { display: inline-block; padding: .35rem .9rem; color: var(--prompt-gold-soft); background: rgb(201 162 39 / 20%); border: 1px solid rgb(201 162 39 / 45%); border-radius: 999px; cursor: pointer; }
.prompt-cards-tabs button:focus-visible,
.prompt-cards-filter select:focus-visible,
.prompt-card-close:focus-visible,
.prompt-card-prompt-head button:focus-visible,
.prompt-card-dialog-actions a:focus-visible { outline: 2px solid var(--prompt-gold-soft); outline-offset: 3px; }
.prompt-card-prompt-block pre { max-height: min(42vh, 360px); margin: 0; padding: .9rem 1rem 1.1rem; overflow: auto; color: var(--prompt-ink); font: .9rem/1.65 "Segoe UI", "Microsoft YaHei", sans-serif; white-space: pre-wrap; word-break: break-word; background: transparent; }
.prompt-card-dialog-actions { margin-top: 1rem; text-align: right; }
.prompt-card-live { min-height: 1.5em; color: var(--prompt-gold-soft); }

/* 灯箱层级高于详情和飞行卡；图片本身不接管点击，只有遮罩空白与关闭按钮关闭。 */
.prompt-card-lightbox { position: fixed; z-index: 1010; inset: 0; display: grid; place-items: center; padding: 3rem 1rem 1rem; opacity: 0; background: rgb(3 2 1 / 86%); backdrop-filter: blur(10px); transition: opacity .2s ease; }
.prompt-card-lightbox[hidden] { display: none; }
.prompt-card-lightbox.is-open { opacity: 1; }
.prompt-card-lightbox img { display: block; max-width: 92vw; max-height: 88dvh; object-fit: contain; border-radius: 8px; box-shadow: 0 24px 72px rgb(0 0 0 / 72%); transform: scale(.96); transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
.prompt-card-lightbox.is-open img { transform: scale(1); }
.prompt-card-lightbox-close { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); z-index: 1; width: 2.5rem; height: 2.5rem; color: var(--prompt-gold-soft); font-size: 1.55rem; background: rgb(12 8 4 / 78%); border: 1px solid rgb(201 162 39 / 55%); border-radius: 50%; cursor: pointer; }
.prompt-card-lightbox-close:focus-visible { outline: 2px solid var(--prompt-gold-soft); outline-offset: 3px; }

/* 飞行层脱离弹层布局，保证卡片在缩放和旋转期间不会推动页面内容。 */
.prompt-card-flight-layer { z-index: 1001; inset: 0; pointer-events: none; position: fixed; }
.prompt-card-flyer { position: fixed; transform-origin: 0 0; perspective: 1200px; will-change: transform; }
.prompt-card-flyer-card { width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }

@keyframes prompt-ur { to { background-position: 220% 0; } }
@keyframes prompt-card-enter { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (min-width: 720px) {
  .prompt-cards-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

@media (min-width: 1100px) {
  .prompt-cards-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 820px) {
  .prompt-cards-toolbar { grid-template-columns: 1fr 1fr; }
  .prompt-cards-search { grid-column: 1 / -1; }
  /* 窄屏锁住弹层本体，只允许提示词正文滚动，确保复制和文章入口始终可达。 */
  .prompt-card-dialog { max-height: calc(100dvh - 2rem); overflow: hidden; }
  .prompt-card-detail { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .prompt-card-meta { margin: 0 0 .35rem; }
  .prompt-card-detail h2 { margin: .35rem 0 .55rem; }
  .prompt-card-dialog-summary { margin: 0 0 .65rem; }
  .prompt-card-prompt-block { display: flex; flex: 1; flex-direction: column; min-height: 6rem; }
  .prompt-card-prompt-head { flex: none; }
  .prompt-card-prompt-block pre { flex: 1; min-height: 0; max-height: none; }
  .prompt-card-dialog-actions,
  .prompt-card-live { flex: none; }
}

@media (min-width: 641px) and (max-width: 820px) {
  /* 平板保留目标站双栏关系，同时压缩预览卡为 180px 给正文留出宽度。 */
  .prompt-card-dialog { grid-template-columns: 180px minmax(0, 1fr); gap: 1.15rem; }
  .prompt-card-preview { width: 180px; }
}

@media (max-width: 640px) {
  .prompt-card-overlay { padding: .75rem; }
  .prompt-card-dialog { display: flex; flex-direction: column; padding: 1rem; }
  .prompt-card-preview { flex: none; width: min(150px, 42vw); margin: 0 auto; }
  .prompt-card-dialog-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

@media (max-width: 480px) {
  /* 390px 视口下为两张 175px 卡片留出空间：366 - 16 间距 = 350。 */
  .prompt-cards-main { padding-inline: .75rem; }
  .prompt-card-summary { -webkit-line-clamp: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .prompt-card-entering,
  .prompt-card,
  .prompt-card:hover,
  .prompt-card:focus-visible { animation: none; transition: box-shadow .2s; transform: none; }
  .prompt-card-rarity-UR .prompt-card-rarity { animation: none; background-position: 40%; }
  .prompt-card-overlay,
  .prompt-card-dialog,
  .prompt-card-detail,
  .prompt-card-flipper.is-springing,
  .prompt-card-lightbox,
  .prompt-card-lightbox img { transition: none; }
}