.region-home {
  position: relative;
  z-index: 80;
  min-height: 0;
  height: clamp(190px, 27dvh, 232px);
  margin-top: 0;
  padding: 18px 24px 6px;
  border-color: rgba(77, 143, 255, .22);
  background: transparent;
  overflow: visible;
}

.region-home .region-tag {
  display: none;
}

.region-center {
  background: linear-gradient(180deg, rgba(120, 180, 255, .04) 0%, rgba(120, 180, 255, .08) 100%);
}

.region-center {
  border: 0;
  border-bottom: 0;
  border-radius: 0;
}

.region-home {
  border: 0;
  border-top: 0;
  border-radius: 0;
}

.region-center .region-tag {
  color: #8bb6ff;
  background: rgba(120, 180, 255, .1);
}

.region-home #resource-version-badge {
  position: absolute;
  top: 20px;
  left: 14px;
  right: auto;
  z-index: 1;
  width: clamp(300px, 34vw, 560px);
  overflow: hidden;
  color: rgba(205, 213, 196, .62);
  font-size: 11px;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.region-home #cards.hand-fan {
  display: block;
  min-height: clamp(166px, 22dvh, 190px);
  padding: 0;
  margin: 0 auto;
  width: min(640px, calc(100% - 120px));
  max-width: 640px;
  position: relative;
  z-index: 2;
  perspective: 800px;
  overflow: visible;
  transform: translateY(92px);
}

.region-home #cards.hand-fan .card {
  position: absolute;
  left: 50%;
  bottom: 0;
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  margin: 0;
  padding: 9px;
  overflow: hidden;
  z-index: var(--fan-z, 1);
  --fan-x: 0px;
  --fan-y: 0px;
  --fan-r: 0deg;
  --fan-hover-r: 0deg;
  --fan-shift-x: 0px;
  --discard-dx: -550px;
  --discard-dy: 170px;
  transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), var(--fan-y)) rotate(var(--fan-r));
  transform-origin: 50% 100%;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.region-home #cards.hand-fan > .hand-hover-guard {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 998;
  --fan-x: 0px;
  --fan-y: 0px;
  --fan-r: 0deg;
  --fan-shift-x: 0px;
  transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), var(--fan-y)) rotate(var(--fan-r));
  transform-origin: 50% 100%;
  pointer-events: none;
}

.region-home #cards.hand-fan > .hand-hover-guard.is-active {
  display: block;
  pointer-events: auto;
}

.region-home #cards.hand-fan.cards-resolving > .hand-hover-guard,
body.result-review .region-home #cards.hand-fan > .hand-hover-guard {
  display: none;
  pointer-events: none;
}

.region-home #cards.hand-fan .card.atk:not(.locked),
.region-home #cards.hand-fan .card.surge:not(.locked) {
  --hand-card-glow: rgba(240, 197, 116, .28);
  --hand-card-glow-strong: rgba(240, 197, 116, .44);
  --hand-card-glow-peak: rgba(240, 197, 116, .62);
}

.region-home #cards.hand-fan .card.def:not(.locked) {
  --hand-card-glow: rgba(109, 179, 255, .27);
  --hand-card-glow-strong: rgba(109, 179, 255, .46);
  --hand-card-glow-peak: rgba(109, 179, 255, .64);
}

.region-home #cards.hand-fan .card.tempo:not(.locked) {
  --hand-card-glow: rgba(199, 156, 255, .24);
  --hand-card-glow-strong: rgba(199, 156, 255, .40);
  --hand-card-glow-peak: rgba(199, 156, 255, .58);
}

.region-home #cards.hand-fan .card.two-stage-role-build_chance:not(.locked) {
  --hand-card-glow: rgba(240, 217, 155, .26);
  --hand-card-glow-strong: rgba(240, 217, 155, .44);
  --hand-card-glow-peak: rgba(240, 217, 155, .62);
}

.region-home #cards.hand-fan .card.two-stage-role-finish:not(.locked) {
  --hand-card-glow: rgba(255, 119, 82, .25);
  --hand-card-glow-strong: rgba(255, 119, 82, .46);
  --hand-card-glow-peak: rgba(255, 119, 82, .66);
}

.region-home #cards.hand-fan .card.two-stage-role-defense_shape:not(.locked) {
  --hand-card-glow: rgba(109, 179, 255, .25);
  --hand-card-glow-strong: rgba(109, 179, 255, .46);
  --hand-card-glow-peak: rgba(109, 179, 255, .64);
}

.region-home #cards.hand-fan .card.two-stage-role-defense_answer:not(.locked) {
  --hand-card-glow: rgba(110, 232, 221, .25);
  --hand-card-glow-strong: rgba(110, 232, 221, .46);
  --hand-card-glow-peak: rgba(110, 232, 221, .64);
}

.region-home #cards.hand-fan .card.locked {
  opacity: 1;
  filter: grayscale(1) brightness(.55);
  cursor: not-allowed;
}

.region-home #cards.hand-fan .card.locked::before {
  display: none;
  content: none;
}

.region-home #cards.hand-fan .card.cant-afford {
  opacity: 1;
  filter: none;
  overflow: visible;
  cursor: not-allowed;
}

.region-home #cards.hand-fan .card.cant-afford::before {
  border: 0;
}

.region-home #cards.hand-fan .card.cant-afford::after {
  content: '⚡ 能量不足';
  position: absolute;
  top: 94px;
  bottom: auto;
  left: 50%;
  z-index: 6;
  padding: 4px 12px;
  border-radius: 0;
  color: #fff;
  background: rgba(196, 74, 74, .92);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .38), 0 0 12px rgba(196, 74, 74, .32);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}

.region-home #cards.hand-fan .card.cant-afford .pc-cost,
.region-home #cards.hand-fan .card.cant-afford .cost-pill {
  filter: none;
}

.region-home #cards.hand-fan .card.cant-afford .c-lock-reason {
  display: none;
}

.region-home #cards.hand-fan .card::before {
  content: '';
  position: absolute;
  inset: -8px;
  z-index: -1;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

@keyframes draw-card-in {
  0% {
    transform: translate(calc(-50% + var(--fan-x) + 220px), var(--fan-y)) rotate(var(--fan-r)) scale(1);
    opacity: 0;
  }
  25% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--fan-x)), var(--fan-y)) rotate(var(--fan-r)) scale(1);
    opacity: 1;
  }
}

.region-home #cards.hand-fan .card.is-drawing {
  animation: draw-card-in .48s cubic-bezier(.25, .8, .4, 1) both;
  transition: none;
}

.region-home #cards.hand-fan .card.draw-settling {
  transition: none;
}

.region-home #cards.hand-fan.cards-drawing .card {
  transition: none;
}

/* B(2026-07-08):发牌飞入期间压掉飞行中那张牌的 hover 视觉,
   避免鼠标提前在手牌区时飞行中的牌在默认态/hover 态之间来回跳。
   只压视觉——transform 钉回静止扇形位、关放大/滤镜/呼吸辉光/抬层——【不用 pointer-events】。
   历史坑:上次给 cards-drawing 加 pointer-events:none,class 靠 animationend 清、没走完就整副手牌灰死锁。
   这里纯视觉:万一 is-drawing 残留,最坏是"这张牌没 hover 高亮",牌仍可点、绝不锁死。
   只挂在单张 .is-drawing 上(每张飞完就靠 animationend/setTimeout 可靠摘掉),
   不挂容器 .cards-drawing(它清除偶有残留),以免整批 hover 高亮被长期压住。 */
.region-home #cards.hand-fan .card.is-drawing.is-hovered,
.region-home #cards.hand-fan .card.is-drawing:hover,
.region-home #cards.hand-fan .card.is-drawing:focus-visible {
  transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), var(--fan-y)) rotate(var(--fan-r)) !important;
  filter: none !important;
  z-index: auto;
  animation: none !important;
}

.region-home #cards.hand-fan .card.is-play-measuring,
.region-home #cards.hand-fan .card.is-play-measuring:hover,
.region-home #cards.hand-fan .card.is-play-measuring:focus-visible {
  transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), var(--fan-y)) rotate(var(--fan-r)) !important;
  filter: none !important;
  animation: none !important;
}

/* 2026-07-14 · 手牌无意 hover 抑制：出牌/抽牌导致重排时，牌自己挪过来套住静止鼠标触发
   的假 hover，JS 判定后会给这张牌挂 is-passively-hovered（cards.js openCardPreview）。
   主压制手段是 376-478 行那 9 组规则的 :not() 排除链——整条规则不匹配，含 box-shadow/
   border-color 在内的所有属性都不生效；这条是兜底双保险，钉住位移/滤镜/动画，
   万一漏改了某条排除链也不至于完全失效。 */
.region-home #cards.hand-fan .card.is-passively-hovered {
  transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), var(--fan-y)) rotate(var(--fan-r)) !important;
  filter: none !important;
  animation: none !important;
  z-index: auto;
}

/* B:飞入期间锁「结束回合」按钮防误点,只锁按钮不锁手牌;
   锁靠 JS 加 .is-draw-locked + 自带 setTimeout 兜底解除(不只依赖 animationend),最坏按钮短暂不可点、不会死锁。 */
#hand-bar.is-draw-locked #end-turn-btn {
  pointer-events: none;
  opacity: .55;
}

@keyframes play-card-flow {
  0% {
    transform: translate(calc(-50% + var(--fan-x)), var(--fan-y)) rotate(var(--fan-r)) scale(1);
    opacity: 1;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  }
  35% {
    transform: translate(calc(-50% + var(--fan-x) + var(--play-mid-dx, 0px)), var(--play-mid-dy, -240px)) rotate(0deg) scale(1.28);
    opacity: 1;
    box-shadow: 0 22px 44px rgba(212, 160, 74, .45), 0 0 28px rgba(212, 160, 74, .35);
  }
  100% {
    transform: translate(calc(-50% + var(--fan-x) + var(--play-dx, 0px)), var(--play-dy, -270px)) rotate(0deg) scale(.42);
    opacity: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  }
}

.region-home #cards.hand-fan .card.is-playing {
  animation: play-card-flow .58s cubic-bezier(.4, .05, .35, 1) forwards;
  pointer-events: none;
  z-index: 120;
}

.region-home #cards.hand-fan.cards-resolving .card:not(.is-playing) {
  pointer-events: none;
}

/* 出牌结算窗口（cards-resolving）内锁住 hand-bar / 结束回合按钮，
   防止飞牌 0.6s 里误点结束回合触发结算竞态（配合 finishTurn 的 waiting 守卫）。 */
.region-home #cards.cards-resolving + #hand-bar {
  pointer-events: none;
}

body.result-review .region-home #cards,
body.result-review .region-home #hand-bar {
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

/* === 2026-07-13 · 终场弹窗：手牌区只恢复可见，不恢复可点击 ===
   只覆写 opacity；pointer-events:none 继续沿用上面那条规则，手牌看得见但摸不动。 */
body.result-review:has(.rb-final-whistle) .region-home #cards,
body.result-review:has(.rb-final-whistle) .region-home #hand-bar {
  opacity: 1;
}

body.result-review .region-home #cards .card {
  animation: none !important;
  transition: none !important;
  pointer-events: none !important;
}

@keyframes discard-card {
  0% {
    transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), var(--fan-y)) rotate(var(--fan-r)) scale(1);
    opacity: 1;
    filter: brightness(1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
  }
  38% {
    transform: translate(
      calc(-50% + var(--fan-x) + var(--fan-shift-x) + var(--discard-mid-dx, -260px)),
      calc(var(--fan-y) + var(--discard-mid-dy, -110px))
    ) rotate(-10deg) scale(.9);
    opacity: .98;
    filter: brightness(1.16);
    box-shadow: 0 18px 36px rgba(212, 160, 74, .32), 0 0 22px rgba(212, 160, 74, .24);
  }
  74% {
    transform: translate(
      calc(-50% + var(--fan-x) + var(--fan-shift-x) + var(--discard-dx)),
      calc(var(--fan-y) + var(--discard-dy))
    ) rotate(-18deg) scale(.32);
    opacity: .9;
    filter: brightness(1.05);
  }
  100% {
    transform: translate(
      calc(-50% + var(--fan-x) + var(--fan-shift-x) + var(--discard-dx)),
      calc(var(--fan-y) + var(--discard-dy))
    ) rotate(-24deg) scale(.1);
    opacity: 0;
    filter: brightness(.8);
  }
}

.region-home #cards.hand-fan .card.is-discarding {
  animation: discard-card .74s cubic-bezier(.2, .72, .18, 1) forwards;
  pointer-events: none;
  z-index: 110;
  will-change: transform, opacity, filter;
}

.region-home #hand-bar #deck-row .pile-icon {
  transform-origin: center center;
}

@keyframes draw-pile-pulse {
  0% { transform: scale(1); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(212, 160, 74, .25); }
  35% { transform: scale(1.18); box-shadow: 0 6px 18px rgba(212, 160, 74, .5), inset 0 0 0 1px rgba(212, 160, 74, .95), 0 0 26px rgba(212, 160, 74, .55); }
  100% { transform: scale(1); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(212, 160, 74, .25); }
}

@keyframes discard-pile-pulse {
  0% { transform: scale(1); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(196, 74, 74, .25); }
  35% { transform: scale(1.18); box-shadow: 0 6px 18px rgba(196, 74, 74, .5), inset 0 0 0 1px rgba(196, 74, 74, .95), 0 0 26px rgba(196, 74, 74, .55); }
  100% { transform: scale(1); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(196, 74, 74, .25); }
}

.region-home #hand-bar #deck-row .pile-icon.is-pulse-draw {
  animation: draw-pile-pulse .42s cubic-bezier(.22, 1, .36, 1) both;
}

.region-home #hand-bar #deck-row .pile-icon.is-pulse-discard {
  animation: discard-pile-pulse .42s cubic-bezier(.22, 1, .36, 1) both;
}

.region-home #cards.hand-fan .card.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered) {
  z-index: 999;
  transform: translate(calc(-50% + var(--fan-x) + var(--fan-shift-x)), -64px) rotate(var(--fan-hover-r)) scale(1.16) !important;
  border-color: rgba(240, 197, 116, .82);
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 26px var(--hand-card-glow-strong, rgba(255, 215, 100, .34));
  filter: brightness(1.2);
  animation: hand-card-hover-breathe 1.85s ease-in-out infinite;
}

@keyframes hand-card-hover-breathe {
  0%, 100% {
    box-shadow:
      5px 5px 0 rgba(0, 0, 0, .8),
      0 0 30px var(--hand-card-glow-strong, rgba(240, 197, 116, .44));
  }
  50% {
    box-shadow:
      5px 5px 0 rgba(0, 0, 0, .8),
      0 0 52px var(--hand-card-glow-peak, rgba(240, 197, 116, .62));
  }
}

.region-home #cards.hand-fan .card.atk.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.atk:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.surge.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.surge:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered) {
  border-color: rgba(240, 197, 116, .95);
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 26px rgba(240, 197, 116, .44);
}

.region-home #cards.hand-fan .card.def.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.def:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered) {
  border-color: rgba(109, 179, 255, .96);
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 26px rgba(109, 179, 255, .46);
}

.region-home #cards.hand-fan .card.tempo.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.tempo:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered) {
  border-color: rgba(199, 156, 255, .88);
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 26px rgba(199, 156, 255, .40);
}

.region-home #cards.hand-fan .card.two-stage-role-build_chance.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-build_chance:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-build_chance.is-selected {
  border-color: rgba(255, 230, 156, .98) !important;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 30px rgba(240, 217, 155, .48),
    inset 0 0 0 1px rgba(240, 217, 155, .22);
}

.region-home #cards.hand-fan .card.two-stage-role-finish.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-finish:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-finish.is-selected {
  border-color: rgba(255, 119, 82, 1) !important;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 32px rgba(255, 119, 82, .52),
    inset 0 0 0 1px rgba(255, 119, 82, .22);
}

.region-home #cards.hand-fan .card.two-stage-role-defense_shape.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-defense_shape:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-defense_shape.is-selected {
  border-color: rgba(109, 179, 255, 1) !important;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 32px rgba(109, 179, 255, .52),
    inset 0 0 0 1px rgba(109, 179, 255, .20);
}

.region-home #cards.hand-fan .card.two-stage-role-defense_answer.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-defense_answer:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card.two-stage-role-defense_answer.is-selected {
  border-color: rgba(110, 232, 221, 1) !important;
  box-shadow:
    5px 5px 0 rgba(0, 0, 0, .8),
    0 0 32px rgba(110, 232, 221, .52),
    inset 0 0 0 1px rgba(110, 232, 221, .20);
}

.region-home #cards.hand-fan .card.is-hovered:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered),
.region-home #cards.hand-fan .card:focus-visible:not(.locked):not(.is-playing):not(.is-play-measuring):not(.is-passively-hovered) {
  animation: hand-card-hover-breathe 1.85s ease-in-out infinite;
}

.region-home #cards.hand-fan .card.locked.is-hovered,
.region-home #cards.hand-fan .card.locked:focus-visible {
  transform: translate(calc(-50% + var(--fan-x)), var(--fan-y)) rotate(var(--fan-r)) scale(1) !important;
  border-color: rgba(148, 163, 184, .44);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
  filter: grayscale(1) brightness(.62);
  cursor: not-allowed;
  animation: none;
}

.region-home #cards.hand-fan .card.cant-afford.is-hovered,
.region-home #cards.hand-fan .card.cant-afford:focus-visible {
  border-color: rgba(196, 74, 74, .55);
  cursor: not-allowed;
}

/* C 线手牌当前价值常驻档：曾经用 opacity 把 val-aux / val-unfit 变透明，
   但变透明会让牌像坏了、像没加载出来，属于误导，已取消。
   能量不足（cant-afford）不是惩罚牌：保留正常读卡和 hover，只用标签说明现在不能打。 */

.region-home #cards.hand-fan .card .type,
.region-home #cards.hand-fan .card .card-status,
.region-home #cards.hand-fan .card .c-chips,
.region-home #cards.hand-fan .card .card-conditions {
  display: none;
}

.region-home #hand-bar {
  position: absolute;
  inset: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.region-home #deck-row {
  display: contents;
  color: #a8afbd;
  font-size: 11px;
}

.hud-corner {
  position: absolute;
  z-index: 20;
  pointer-events: auto;
}

.hud-corner.left-in {
  top: 50%;
  left: clamp(92px, 10vw, 138px);
  transform: translateY(-50%);
}

.hud-corner.right-in {
  top: 50%;
  right: clamp(92px, 10vw, 138px);
  transform: translateY(-50%);
}

.hud-corner.left-out {
  bottom: 12px;
  left: 24px;
  display: flex;
  align-items: flex-end;
  gap: 22px;
}

.hud-corner.right-out {
  right: 24px;
  bottom: 12px;
}

.region-home #hand-bar #deck-row .pile {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 10px;
  border: 2px solid rgba(255, 255, 255, .08);
  border-radius: 0;
  background: rgba(40, 40, 52, .54);
  white-space: nowrap;
}

.region-home #hand-bar #deck-row .pile::after {
  display: none;
}

.region-home #hand-bar #deck-row .pile-hand {
  display: none;
}

.region-home #hand-bar #deck-row .pile strong {
  color: #dce2ed;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.region-home #hand-bar #deck-row .pile-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 56px;
  padding: 0;
  border: 2px solid #6b4a2a;
  border-radius: 0;
  color: #f0d99b;
  background: linear-gradient(135deg, #3a2a1a 0%, #1a0a00 100%);
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, .5),
    inset 0 0 0 1px rgba(212, 160, 74, .25);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease;
}

.region-home #hand-bar #deck-row .pile-icon:hover,
.region-home #hand-bar #deck-row .pile-icon:focus-visible {
  border-color: #f0d99b;
  color: #fff0c2;
  background: #3a2610;
  transform: translateY(-2px);
  outline: none;
}

.region-home #hand-bar #deck-row .pile-icon::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 0;
  height: 0;
  border-bottom: 6px solid rgba(212, 160, 74, .4);
  border-left: 6px solid transparent;
}

.region-home #hand-bar #deck-row .pile-icon .badge {
  position: absolute;
  right: -6px;
  bottom: -6px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid #1a1a1c;
  border-radius: 50%;
  color: #fff;
  background: #c44a4a;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.region-home #energy {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  border: 0;
  background: transparent;
}

.energy-crystal-big {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 2px solid #6db3ff;
  border-radius: 0;
  background: linear-gradient(135deg, #6db3ff 0%, #2a78e0 50%, #1a4880 100%);
  box-shadow:
    0 0 0 rgba(90, 170, 255, .6),
    inset 0 0 0 rgba(255, 255, 255, .15),
    3px 3px 0 rgba(0, 0, 0, .5);
  transform: rotate(45deg);
}

.energy-crystal-big::before {
  display: none;
}

/* === v1.11 hotfix-35 · 能量耗尽红色提示 === */
.energy-crystal-big.is-empty {
  border-color: #ff7a7a;
  background: linear-gradient(135deg, #ff6b6b 0%, #d23b3b 50%, #7a1a1a 100%);
  box-shadow:
    0 0 0 rgba(255, 107, 107, .55),
    inset 0 0 0 rgba(255, 255, 255, .15),
    3px 3px 0 rgba(0, 0, 0, .5);
}

.energy-crystal-big .energy-num {
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .6);
  transform: rotate(-45deg);
}

.energy-crystal-big .energy-num .small {
  margin-left: -2px;
  font-size: 10px;
  opacity: .8;
}

.region-home #hand-tip {
  position: absolute;
  top: 12px;
  right: clamp(116px, 18vw, 190px);
  left: clamp(116px, 18vw, 190px);
  z-index: 1002;
  display: none;
  min-height: 28px;
  max-height: 58px;
  padding: 6px 10px;
  overflow: hidden;
  border: 1px solid rgba(125, 211, 252, .22);
  border-radius: 0;
  color: #dce8f7;
  background: rgba(13, 18, 27, .78);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .28);
  font-size: 11px;
  line-height: 1.35;
  pointer-events: none;
}

.region-home #hand-tip .chain-readout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  align-items: center;
}

.region-home #hand-tip .chain-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.region-home #hand-tip .chain-label {
  flex: 0 0 auto;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 900;
}

.region-home #hand-tip .chain-steps {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
}

.region-home #hand-tip .chain-token {
  max-width: 118px;
  overflow: hidden;
  color: #eef5ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-home #hand-tip .chain-token.empty {
  color: rgba(184, 190, 201, .8);
}

.region-home #hand-tip .chain-token.ok {
  color: #9be5ad;
}

.region-home #hand-tip .chain-token.fail {
  color: #f0a3a3;
}

.region-home #hand-tip .chain-arrow {
  color: rgba(184, 190, 201, .62);
}

.region-home #hand-tip .chain-plan,
.region-home #hand-tip .chain-stop {
  color: #f0d99b;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}

.region-home #hand-tip .chain-plan {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.region-home #hand-tip .chain-plan .cost-core {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: #6db3ff;
}

.region-home #hand-tip .chain-stop i {
  display: none;
}

.region-home #hand-tip .chain-next {
  grid-column: 1 / -1;
  min-width: 0;
  overflow: hidden;
  color: rgba(220, 232, 247, .82);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.region-home #end-turn-btn {
  margin: 0;
  min-width: 92px;
  padding: 8px 18px;
  border: 2px solid #f0c574;
  border-radius: 0;
  color: #fff;
  background: linear-gradient(135deg, #f0d99b 0%, #b07a1a 100%);
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
}

.region-home #end-turn-btn:hover,
.region-home #end-turn-btn:focus-visible {
  filter: brightness(1.03);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  box-shadow: 0 0 0 1px rgba(240, 217, 155, .35), 3px 3px 0 rgba(0, 0, 0, .42);
}

.region-home #end-turn-btn:disabled {
  opacity: .5;
  cursor: wait;
  filter: none;
}

.region-home #end-turn-btn.is-cooling,
.continue-btn.is-cooling,
#continue-turn.is-cooling {
  opacity: .5;
  cursor: wait;
  filter: grayscale(.35) brightness(.82);
  animation: none;
  box-shadow: none;
}

/* === v1.11 hotfix-31 · fresh turn 按钮视觉降级（防误点） === */
.region-home #end-turn-btn.is-skip {
  background: linear-gradient(135deg, #5a5a5a 0%, #3c3c3c 100%);
  border-color: #6a6a6a;
  color: rgba(255, 255, 255, .72);
  box-shadow:
    3px 3px 0 rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: .88;
  font-weight: 600;
}

.region-home #end-turn-btn.is-skip:hover,
.region-home #end-turn-btn.is-skip:focus-visible {
  filter: brightness(1.15);
  color: rgba(255, 255, 255, .9);
  border-color: #8a8a8a;
  box-shadow:
    0 0 0 1px rgba(200, 200, 200, .22),
    3px 3px 0 rgba(0, 0, 0, .42);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.region-home #end-turn-btn.is-confirm-skip {
  border-color: #f0d99b;
  color: #1a1202;
  background: linear-gradient(135deg, #fff1ad 0%, #f0d99b 48%, #c9953a 100%);
  box-shadow:
    0 0 0 1px rgba(240, 217, 155, .28),
    3px 3px 0 rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .32);
  opacity: 1;
  font-weight: 800;
}

.region-home #end-turn-btn.is-confirm-skip:hover,
.region-home #end-turn-btn.is-confirm-skip:focus-visible {
  filter: brightness(1.05);
  color: #120d05;
  border-color: #ffe6a3;
  box-shadow:
    0 0 0 1px rgba(240, 217, 155, .42),
    3px 3px 0 rgba(0, 0, 0, .42);
}

@media (prefers-reduced-motion: reduce) {
  .region-home #cards.hand-fan .card:not(.is-drawing):not(.is-playing):not(.is-discarding),
  .region-home #cards.hand-fan .card.is-hovered,
  .region-home #cards.hand-fan .card:hover,
  .region-home #cards.hand-fan .card:focus-visible {
    animation: none;
  }
}