/* ═══════════════════════════════════════════════════════════════
   作品区 · 牌桌
   ---------------------------------------------------------------
   阶段 1  牌堆      桌布上的两摞牌，边框发柔和暗金光
   阶段 2  发牌      选中的牌堆滑到视口最上方当「发牌器」，
                     其余牌堆向两侧滑出，卡牌依次抽出码成网格
   阶段 3  翻面      悬停 3D 翻转，边缘迸出金色流沙
   铁律：卡面永远 ≥ 整卡面积；移动端砍一半装饰；
        灯箱打开时装饰全部退场
   ═══════════════════════════════════════════════════════════════ */

.deck {
  position: relative;
  z-index: var(--z-deck);
  padding: clamp(4rem, 10vw, 8rem) var(--gutter);
  scroll-margin-top: 4.5rem;
  /* 背景改成「固定在视口底部的整幅占卜桌布」（见 base.css 的 .siteview__cloth），
     作品区本身要透明，才透得出那张桌布。 */
  background: none;
  border-top: 1px solid var(--gold-dim);
  /* ⚠️ 牌堆退场时会被 translateX 推出 ±150vw（deck.js 的 --out-x）。
     位移过的盒子会计入文档的「可滚动溢出宽度」，于是整页的横向宽度被撑到 ~976px，
     手机浏览器随即触发「缩放适配」：整页被压到 40% 显示（桌面宽度 390 的页面
     缩成 157），观影背景发黑、灯箱被挤到边上，全是它干的。
     这里把溢出裁在作品区自己的框里（框宽 = 屏幕宽），牌堆看起来照旧是「飞出屏幕」，
     但不会再把整页撑宽。 */
  overflow-x: clip;
}

.deck__head { max-width: 44rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.deck__title {
  font-size: var(--step-4);
  letter-spacing: 0.12em;
  margin-bottom: 0.4em;
}
.deck__lede { color: var(--text-300); max-width: var(--measure); }

/* ── 舞台：牌堆和牌桌共用同一块地方 ───────────────────── */
.deck__stage {
  --deck-top: clamp(1rem, 3vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  min-height: clamp(24rem, 46vh, 34rem);
}

/* 牌堆（绝对定位 → 不占布局，牌桌长大时页面不会被顶）
   靠上摆：牌堆占牌桌的上半部分，下半留空给之后摊开的牌阵 */
.deck__piles {
  grid-area: 1 / 1;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(2.5rem, 7vw, 5.5rem);
  padding-top: var(--deck-top);
  transition: opacity 0.45s var(--ease-out);
}
.deck.is-dealt .deck__piles { opacity: 0; pointer-events: none; }

/* 牌桌（发牌后出现） */
.deck__board {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  max-width: 62rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.deck.is-dealt .deck__board {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0s;
}

/* ── 牌堆 ───────────────────────────────────────────────── */
.pile {
  position: relative;
  display: block;
  width: clamp(9rem, 15vw, 13rem);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  transition: transform 0.55s var(--ease-out), opacity 0.4s var(--ease-out);
}
/* 未选中的牌堆：向两侧滑出并淡出 */
.pile.is-out {
  transform: translateX(var(--out-x, 0)) rotate(7deg);
  opacity: 0;
  pointer-events: none;
}
/* 选中的牌堆：本体淡出，由「发牌器」接手 */
.pile.is-gone { opacity: 0; transform: scale(0.96); pointer-events: none; }

.pile__stack {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 512 / 683;
}

/* 图标本身：透明底，用 drop-shadow 沿着轮廓发暗金光 */
.pile__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 26px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 9px rgba(201, 168, 106, 0.30))
    drop-shadow(0 0 24px rgba(201, 168, 106, 0.16));
  transition: filter 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.pile:hover .pile__img,
.pile:focus-visible .pile__img {
  filter:
    drop-shadow(0 22px 32px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 14px rgba(242, 216, 160, 0.70))
    drop-shadow(0 0 40px rgba(201, 168, 106, 0.34));
  transform: translateY(-4px);
}

/* 背后的一团柔光 */
.pile__glow {
  position: absolute;
  z-index: 0;
  inset: -16%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 168, 106, 0.16), transparent 72%);
  opacity: 0.5;
  transition: opacity 0.45s var(--ease-out);
}
.pile:hover .pile__glow { opacity: 1; }

/* 内里：平时微微压暗，悬停时压得更暗，文字才跳得出来 */
.pile__scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 68% at 50% 72%, rgba(11, 7, 16, 0.62), transparent 74%),
    linear-gradient(to bottom, rgba(11, 7, 16, 0.34), rgba(11, 7, 16, 0.10) 42%, rgba(11, 7, 16, 0.52) 76%, rgba(11, 7, 16, 0.86));
  opacity: 0.3;
  transition: opacity 0.45s var(--ease-out);
}
.pile:hover .pile__scrim,
.pile:focus-visible .pile__scrim { opacity: 1; }

/* 中间文字 */
.pile__label {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18em;
  pointer-events: none;
}
/* 文字下面垫一块暗牌，免得压在花纹上读不清 */
.pile__label::before {
  content: "";
  position: absolute;
  inset: -0.55em -0.45em -0.7em;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(11, 7, 16, 0), rgba(11, 7, 16, 0.58) 28%, rgba(11, 7, 16, 0.7) 70%, rgba(11, 7, 16, 0));
  pointer-events: none;
}
.pile__name {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.7vw, 1.22rem);
  letter-spacing: 0.1em;
  color: var(--text-100);
  opacity: 0.7;
  transition: opacity 0.4s var(--ease-out), color 0.4s var(--ease-out), text-shadow 0.4s var(--ease-out);
}
.pile__en {
  font-family: var(--font-num);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--gold);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease-out);
}
.pile__count {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--text-500);
  opacity: 0.75;
}
.pile:hover .pile__name,
.pile:focus-visible .pile__name {
  opacity: 1;
  color: #F6E9C8;
  text-shadow: 0 0 18px rgba(233, 203, 140, 0.55);
}
.pile:hover .pile__en,
.pile:focus-visible .pile__en { opacity: 1; }

/* ── 发牌器（选中的牌堆飞到视口最上方） ────────────────── */
.deck__dealer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  aspect-ratio: 512 / 683;
  transform: translate3d(0, -200vh, 0);
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.deck__dealer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 12px 20px rgba(0, 0, 0, 0.75))
    drop-shadow(0 0 13px rgba(201, 168, 106, 0.42))
    drop-shadow(0 0 36px rgba(201, 168, 106, 0.22));
}
/* 发牌器钉在视口顶上，牌阵滚上去会从它底下过 —— 垫一层暗底光晕，
   让被压住的标题沉进背景里，而不是被齐刷刷切掉一半。 */
.deck__dealer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(76% 48% at 50% 74%,
      rgba(11, 7, 16, 0.94) 0%,
      rgba(11, 7, 16, 0.66) 44%,
      rgba(11, 7, 16, 0) 78%);
}
/* 滚出作品区时把发牌器收起来。
   ⚠️ 发牌器的 opacity 是 deck.js 用行内样式写的（淡入淡出），
   行内样式优先级高于这条规则 —— 不加 !important 它根本收不起来，
   于是滚到「关于我 / 联系方式」时它还挂在视口顶上。 */
.deck.is-dealer-off .deck__dealer { opacity: 0 !important; }

/* ── 牌桌工具条 ─────────────────────────────────────────── */
.deck__bar {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(1.2rem, 2.6vw, 2rem);
}
.deck__back {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--text-500);
  background: none;
  border: 1px solid var(--gold-dim);
  border-radius: 2px;
  padding: 0.45em 1.15em;
  cursor: pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.deck__back:hover { color: var(--text-100); border-color: var(--gold); }

/* ── 空牌堆 ─────────────────────────────────────────────── */
.deck__empty {
  display: none;
  padding: clamp(2rem, 6vw, 4rem) 1rem clamp(2.5rem, 7vw, 5rem);
  text-align: center;
}
.deck.is-empty .deck__empty { display: block; }
.deck.is-empty .deck__grid { display: none; }
.deck__empty-mark {
  display: block;
  font-size: 1.8rem;
  color: var(--gold);
  opacity: 0.65;
}
.deck__empty-title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  color: var(--text-100);
  margin: 0.5em 0 0;
}
.deck__empty-note { color: var(--text-500); margin: 0.45em 0 0; }

/* ── 卡牌网格 ───────────────────────────────────────────── */
.deck__grid {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: center;
  align-content: start;
  padding: clamp(0.5rem, 1.5vw, 1.2rem) 0 clamp(1rem, 2vw, 2rem);
}

/* 只有一张牌时（互动那一摞），别贴着网格左边站 —— 居中摆 */
.deck__grid.is-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 11.2rem;
  margin-inline: auto;
}
/* 两张牌同理：收成两列居中，别摊在 5 列网格的头两格 */
.deck__grid.is-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 23.9rem;
  margin-inline: auto;
}

/* ── 一张卡牌 ───────────────────────────────────────────── */
.tcard {
  position: relative;
  aspect-ratio: 9 / 16;
  perspective: 1100px;
  margin: 0;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 0.35s var(--ease-out);
}
.tcard:hover,
.tcard:focus-visible { transform: translateY(-7px); }

.tcard__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform var(--deck-flip, 720ms) cubic-bezier(0.22, 0.72, 0.2, 1);
}
.tcard.is-flipped .tcard__inner { transform: rotateY(180deg); }

.tcard__side {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid var(--gold-dim);
  background: var(--ink-900);
  backface-visibility: hidden;
  box-shadow: 0 18px 42px -24px rgba(0, 0, 0, 0.92);
}
.tcard__side--back { transform: rotateY(0deg); }
.tcard__side--front { transform: rotateY(180deg); }

/* 背面：满幅塔罗牌背 + 作品名 / 日期 */
.tcard__back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcard__cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 0.7em 0.6em 1.7em;
  background: linear-gradient(to bottom, rgba(11, 7, 16, 0.88), rgba(11, 7, 16, 0.42) 58%, transparent);
  text-align: center;
}
.tcard__no {
  font-family: var(--font-num);
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: var(--gold);
}
.tcard__title {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.45vw, 1.02rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--text-100);
  margin: 0.25em 0 0;
}
.tcard__meta {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-300);
  margin: 0.3em 0 0;
}

/* 正面：顶部信息带 + 完整 3:4 封面 + 底部文字带 */
.tcard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.5rem 0.55rem 0.6rem;
  background:
    radial-gradient(130% 62% at 50% 0%, rgba(84, 62, 122, 0.5), transparent 64%),
    linear-gradient(to bottom, #241b3c 0%, #16111f 58%, #1d1634 100%);
}
.tcard__fhead {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.45em;
  border-bottom: 1px solid rgba(201, 168, 106, 0.22);
}
.tcard__fno {
  font-family: var(--font-num);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  color: var(--gold);
}
.tcard__ftype {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-300);
  text-align: right;
}
/* 封面：面积正好 3:4，object-fit: cover 也一格不裁 */
.tcard__fpic {
  position: relative;
  flex: 0 1 auto;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(201, 168, 106, 0.26),
    0 10px 24px -14px rgba(0, 0, 0, 0.92);
}
.tcard__cover,
.tcard__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tcard__video {
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
}
.tcard.is-flipped .tcard__video.is-ready { opacity: 1; }
.tcard__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 62%, rgba(22, 17, 31, 0.55));
}
.tcard__fbody {
  flex: 0 0 auto;
  padding-top: 0.55em;
}
.tcard__fname {
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1.35vw, 0.95rem);
  line-height: 1.25;
  color: var(--text-100);
  margin: 0;
}
.tcard__fmeta {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-300);
  margin: 0.3em 0 0;
}

/* 互动作品：原图铺满整面（不裁 3:4），右下角注明角色来源 */
.tcard__bleed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0710;
}
.tcard__bleedimg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上下各压一点暗，底图上的字才立得住 */
.tcard__bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(11, 7, 16, 0.46) 0%,
    rgba(11, 7, 16, 0) 24%,
    rgba(11, 7, 16, 0) 58%,
    rgba(11, 7, 16, 0.66) 100%);
}
/* 角色来源署名：烫金行楷 */
.tcard__credit {
  position: absolute;
  right: 0.44rem;
  bottom: 0.4rem;
  z-index: 2;
  font-family: var(--font-hand);
  font-size: 0.68rem;
  line-height: 1.1;
  letter-spacing: 0.06em;
  color: #f0d79a;
  text-shadow:
    0 0 10px rgba(233, 203, 140, 0.65),
    0 0 26px rgba(201, 168, 106, 0.34),
    0 1px 3px rgba(0, 0, 0, 0.95);
}

/* ── 灯箱 ───────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  /* ⚠️ 这一行是「灯箱被挤成一条窄缝」的真正修法。
     .lightbox 是 grid 容器，里面只放一个 .lightbox__stage。
     默认的 auto 轨道会按「子项的 max-content 宽度」来定尺寸，
     而子项写的是 width:100%（百分比在算内在尺寸时按 auto 处理）+
     max-width:40rem → 轨道直接取 640px，手机上（视口 393）就撑破了，
     整页被浏览器缩放到 40%，舞台于是被摆到屏幕中间偏右、视频只剩一条 44px 的缝。
     显式写成 minmax(0,1fr)，轨道才会老老实实取容器的可用宽度。 */
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 1rem;                                  /* 兜底：clamp() 不被支持时也留边 */
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 4, 10, 0.985);
  animation: lbFade var(--dur-mid) var(--ease-out);
}
.lightbox[hidden] { display: none; }
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

/* 左：放映；右：作品档案
   ⚠️ 宽度别用 min(1560px, 96vw) —— 手机上这条声明一被丢弃，
   整块舞台就退回「内容撑出来的宽度」，视频被压成一条缝（手机上看到的窄条）。
   width:100% + max-width 不依赖 min()，任何浏览器都算得对。 */
.lightbox__stage {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(1rem, 2.6vw, 2.2rem);
  align-items: start;
  width: 100%;
  max-width: 1560px;
  max-height: 94vh;
}
.lightbox__screen { min-width: 0; }
/* 视频框按作品的真实比例走（deck.js 会把 aspect-ratio 改成 1440/2560 这种），
   两个方向都留 auto，浏览器就用 max-width / max-height 在不破坏比例的前提下
   反推另一边 —— 竖版片子在窄屏上占满高度、不会被压成中间一条；横版占满宽度。 */
.lightbox__video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 82vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  margin: 0 auto;
  background: #000;
  border: 1px solid var(--gold-dim);
}
.lightbox__video[hidden] { display: none; }

/* 互动作品：2:3 的细框，里面跑着真的能玩的小网页 */
.lightbox__embed {
  aspect-ratio: 2 / 3;
  width: 92%;
  max-width: 22rem;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  background: #0b0710;
  overflow: hidden;
  box-shadow: 0 20px 54px -28px rgba(0, 0, 0, 0.95);
}
.lightbox__embed[hidden] { display: none; }
.lightbox__embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.lightbox__info {
  min-width: 0;
  max-height: 86vh;
  overflow-y: auto;
  padding-right: 0.6rem;
}
.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8em;
  font-family: var(--font-display);
  color: var(--text-300);
}
.lightbox__no { font-family: var(--font-num); color: var(--gold); letter-spacing: 0.24em; }
.lightbox__name { font-size: var(--step-1); color: var(--text-100); }
.lightbox__meta { font-family: var(--font-body); font-size: var(--step--1); color: var(--text-500); }

/* 作品档案：一句话 + 背景 / 做法 / 反思 */
.lightbox__lead {
  margin: 1em 0 1.6em;
  padding-left: 0.95em;
  border-left: 1px solid var(--gold-dim);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--text-100);
}
.lightbox__lead:empty { display: none; }

.dblock { margin-bottom: 1.6em; }
.dblock:last-child { margin-bottom: 0; }
.dblock h4 {
  font-family: var(--font-num);
  font-size: var(--step--1);
  letter-spacing: 0.3em;
  color: var(--gold);
  margin: 0 0 0.75em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid rgba(201, 168, 106, 0.16);
}
.dblock p {
  color: var(--text-300);
  font-size: var(--step--1);
  line-height: 1.9;
}
.dblock ul { margin: 0; padding-left: 1.15em; }
.dblock li {
  color: var(--text-300);
  font-size: var(--step--1);
  line-height: 1.9;
  margin-bottom: 0.5em;
}
.dblock li::marker { color: var(--gold); }

.lightbox__close {
  position: absolute;
  top: clamp(0.8rem, 2.5vw, 1.6rem);
  right: clamp(0.8rem, 2.5vw, 1.6rem);
  width: 2.6rem; height: 2.6rem;
  border: 1px solid var(--gold-dim);
  background: none;
  color: var(--text-300);
  cursor: pointer;
  font-size: 1rem;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.lightbox__close:hover { color: var(--text-100); border-color: var(--gold); }

/* 灯箱打开时，全站装饰退场 */
body.is-lightbox-open .masthead,
body.is-lightbox-open .lanyard,
body.is-lightbox-open .phase,
body.is-lightbox-open .sound,
body.is-lightbox-open .scroll-cue { opacity: 0; pointer-events: none; }

/* 金色流沙画布：全屏固定，鼠标穿过去 */
.dust {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
}

/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .deck__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 灯箱单栏（上面视频、下面作品档案）。
   断点用 980px —— 和初版一致，别再往下挪。
   往回挪的理由：页面上只要残留一点横向溢出，手机浏览器会把布局宽度撑到 ~976px；
   万一布局宽度落在 900~980 这一段，900 的断点就漏掉了，灯箱会退回桌面双栏
   （视频被压成右边一条 44px 的缝、档案文字溢出屏幕 —— 就是手机上看到的那一幕）。
   980 刚好兜住这一段。 */
@media (max-width: 980px) {
  .lightbox {
    place-items: start center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lightbox__stage {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 40rem;
    max-height: none;
  }
  .lightbox__video { max-height: 58vh; }
  .lightbox__embed { width: 100%; max-width: 22rem; }
  .lightbox__info {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}
@media (max-width: 900px) {
  .deck__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deck__piles { gap: clamp(1.5rem, 5vw, 3rem); }
}
@media (max-width: 620px) {
  /* 两列牌阵收窄居中：留出两侧的桌布，别让牌铺满整屏把桌面全遮掉 */
  .deck__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 20.5rem;
    margin-inline: auto;
  }
  .deck__grid.is-single { max-width: 13rem; }
  .deck__grid.is-pair { max-width: 20.5rem; }
  .deck { padding-top: 5.5rem; }
  /* 窄屏：两摞牌要挤得下 */
  .pile { width: clamp(6.5rem, 38vw, 9rem); }
  .pile__name { font-size: 0.92rem; }
  .deck__piles { gap: clamp(1rem, 4vw, 2rem); }
}

/* 减少动效：只留状态变化，去掉位移与翻转 */
@media (prefers-reduced-motion: reduce) {
  .tcard__inner { transition: opacity 0.01s linear; }
  .tcard.is-flipped .tcard__inner { transform: none; }
  .tcard__side--front { opacity: 0; }
  .tcard.is-flipped .tcard__side--front { opacity: 1; }
  .tcard.is-flipped .tcard__side--back { opacity: 0; }
  .pile.is-out { transform: none; }
}