/* ═══════════ 抽卡 v2（pick-v2.js）：撳開始先抽、火仔講解同推薦 ═══════════ */
.pk2 {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
  background: #fff4cf; color: var(--v2-ink); font-family: var(--v2-font);
}
.pk2--moon { background: #ebe5ff; }
.pk2[hidden] { display: none; }
.pk2 button { font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
body.pk2-open { overflow: hidden; }

.pk2-top { position: relative; z-index: 6; display: flex; align-items: center; gap: 6px; padding: 6px 14px 0; }
.pk2-grow { flex: 1; }
.pk2-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 11px; cursor: pointer; white-space: nowrap;
  font: 700 12px/1 var(--v2-mono); background: var(--v2-card); border: 2px solid var(--v2-ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--v2-ink);
}
.pk2-chip--loc { background: var(--v2-flame); }
.pk2-x { width: 36px; height: 36px; padding: 0; cursor: pointer; font: 900 15px/1 var(--v2-font); background: var(--v2-card); border: 2.5px solid var(--v2-ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--v2-ink); }
.pk2-pop {
  position: absolute; left: 14px; top: calc(max(10px, env(safe-area-inset-top)) + 46px); z-index: 8; display: flex; flex-direction: column; gap: 6px; min-width: 190px; padding: 10px;
  background: var(--v2-card); border: 2.5px solid var(--v2-ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--v2-ink); animation: pk2Pop .25s steps(4) both;
}
.pk2-pop--time { left: 120px; }
.pk2-pop .v2-mono { font-weight: 700; }
.pk2-pop button { height: 42px; padding: 0 12px; cursor: pointer; text-align: left; font: 900 15px/1 var(--v2-font); background: var(--v2-card); border: 2px solid var(--v2-ink); border-radius: 10px; }
.pk2-pop button.is-on { background: var(--v2-ink); color: var(--v2-card); }
.pk2-pop__row { display: flex; gap: 6px; }
.pk2-pop__row button { width: 44px; padding: 0; text-align: center; font-family: var(--v2-num); }
.pk2-veil { position: fixed; inset: 0; z-index: 7; padding: 0; background: transparent; border: 0; }
@keyframes pk2Pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* 火仔 + 講解 */
.pk2-me { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 4px; flex-shrink: 0; height: 250px; padding: 0 16px 0 6px; }
.pk2-me__shadow { position: absolute; left: 40px; bottom: 6px; width: 110px; height: 14px; border-radius: 50%; opacity: .3; background-image: repeating-conic-gradient(var(--v2-ink) 0 25%, transparent 0 50%); background-size: 4px 4px; }
.pk2-me__fire { position: relative; width: 164px; height: 240px; flex-shrink: 0; animation: v2bob 1.6s steps(4) infinite; }
.pk2-bub {
  position: relative; flex: 1; min-width: 0; margin: 0 0 64px; padding: 9px 12px; font-size: 14px; font-weight: 700; line-height: 1.55;
  background: var(--v2-card); border: 2.5px solid var(--v2-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--v2-ink); transform-origin: 0 100%;
}
.pk2-bub::before { content: ""; position: absolute; left: -9px; bottom: 22px; width: 12px; height: 12px; background: var(--v2-card); border-left: 2.5px solid var(--v2-ink); border-bottom: 2.5px solid var(--v2-ink); transform: rotate(45deg); }
.pk2-bub .v2-mono { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; color: var(--v2-muted); }
.pk2-bub.is-pop { animation: pk2Pop .28s steps(4) both; }

/* 枱面：三張卡（卡面用返 cv2，縮細） */
.pk2-table { position: relative; flex: 1; min-height: 190px; padding-top: 30px; }
.pk2-cards { display: flex; justify-content: center; gap: 10px; }
.pk2-slot {
  --w: 112px; position: relative; width: var(--w); height: calc(var(--w) * 250 / 168); flex-shrink: 0; padding: 0; cursor: pointer;
  background: none; border: 0; visibility: hidden; transition: transform .25s cubic-bezier(.3, 1.3, .5, 1);
}
.pk2-slot.is-dealt { visibility: visible; }
.pk2-slot.is-in { animation: pk2Deal .32s cubic-bezier(.2, 1.1, .4, 1) both; }
@keyframes pk2Deal { from { transform: translateX(calc((1 - var(--k)) * 122px)) rotate(-6deg); } to { transform: none; } }
.pk2-slot.is-on { z-index: 2; transform: translateY(-14px); }
.pk2-flip { position: absolute; inset: 0; display: block; }
.pk2-flip.is-flip { animation: pk2Flip .34s steps(6) both; }
@keyframes pk2Flip { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pk2-face.deck-card.cv2 { position: absolute; left: 0; top: 0; width: 168px !important; max-width: none !important; min-width: 168px; height: 250px !important; margin: 0 !important; transform: scale(calc(112 / 168)); transform-origin: 0 0; }
.pk2-face .cv2-art { height: 100px; }
.pk2-face .cv2-name { font-size: 18px; }
.pk2-face .cv2-foot { margin-top: auto; }
.pk2-slot.is-on .pk2-face { box-shadow: 5px 5px 0 var(--v2-ink), 0 0 0 4px var(--v2-card), 0 0 0 7px var(--v2-ink); }
.pk2-stamp {
  position: absolute; right: -8px; top: -14px; z-index: 3; padding: 2px 8px; white-space: nowrap; transform: rotate(8deg);
  font: 900 12px/1.3 var(--v2-font); color: #e0341a; border: 2.5px solid #e0341a; border-radius: 7px; background: rgba(255, 253, 247, .95);
  animation: fcStamp .45s cubic-bezier(.2, 1.2, .4, 1) both;
}
.pk2-react {
  position: absolute; left: 50%; top: -28px; z-index: 4; transform: translateX(-50%); padding: 2px 8px; white-space: nowrap;
  font: 900 11px/1.3 var(--v2-font); background: var(--v2-card); border: 2px solid var(--v2-ink); border-radius: 8px; animation: pk2Pop .25s steps(4) both;
}
/* 卡背：稀有度喺邊框提示 */
.pk2-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--v2-ink); border: 2.5px solid var(--v2-ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--v2-ink); }
.pk2-back__pat { position: absolute; inset: 7px; border: 2.5px solid var(--v2-flame); border-radius: 7px; background-image: repeating-conic-gradient(rgba(255, 210, 63, .5) 0 25%, transparent 0 50%); background-size: 6px 6px; }
.pk2-back__emb { position: relative; display: grid; place-items: center; width: 44px; height: 44px; font: 900 20px/1 var(--v2-font); color: var(--v2-flame); background: var(--v2-ink); border: 2.5px solid var(--v2-flame); border-radius: 50%; }
.pk2-back--rare { box-shadow: 4px 4px 0 var(--v2-ink), 0 0 0 3px var(--v2-ember); }
.pk2-back--epic { box-shadow: 4px 4px 0 var(--v2-ink), 0 0 0 4px var(--v2-flame), 0 0 0 6.5px var(--v2-ink); }
.pk2-slot.is-shake .pk2-back { animation: pk2Shake .12s steps(2) 5; }
@keyframes pk2Shake { 0% { transform: translateX(-3px) rotate(-2deg); } 100% { transform: translateX(3px) rotate(2deg); } }
/* 洗牌 */
.pk2-deck { position: absolute; left: 50%; top: 30px; width: 112px; height: calc(112px * 250 / 168); margin-left: -56px; }
.pk2-deck .pk2-back:nth-child(2) { transform: translate(3px, -3px); }
.pk2-deck .pk2-back:nth-child(3) { transform: translate(6px, -6px); }
.pk2-deck.is-shuf .pk2-back:nth-child(1) { animation: pk2Sh1 .3s steps(3) 2 alternate; }
.pk2-deck.is-shuf .pk2-back:nth-child(3) { animation: pk2Sh2 .3s steps(3) 2 alternate; }
@keyframes pk2Sh1 { to { transform: translate(-40px, 6px) rotate(-10deg); } }
@keyframes pk2Sh2 { to { transform: translate(46px, -10px) rotate(10deg); } }
/* 燒入營火 */
.pk2-slot.is-burn { animation: pk2Burn .7s cubic-bezier(.5, 0, .8, .4) both; }
@keyframes pk2Burn { 0% { transform: translateY(-14px); } 60% { transform: translate(calc((1 - var(--k)) * 122px), 150px) scale(.5) rotate(10deg); } 100% { transform: translate(calc((1 - var(--k)) * 122px), 190px) scale(0) rotate(20deg); opacity: 0; } }
.pk2-camp { position: absolute; left: 50%; top: 190px; width: 96px; height: 96px; margin-left: -48px; background: url(./images/v2/camp-fire.png) 0 0 / 400% 400% no-repeat; image-rendering: pixelated; animation: v2b4 .5s steps(4) infinite; }
/* 地圖 */
.pk2-map { position: relative; margin: 0 16px; background: var(--v2-moon); border: 2.5px solid var(--v2-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--v2-ink); overflow: hidden; animation: gfFade .5s steps(5) both; }
.pk2:not(.pk2--moon) .pk2-map { background: var(--v2-flame); }
.pk2-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pk2-map polyline { fill: none; stroke: var(--v2-ink); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pk2-node { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; font: 700 12px/1 var(--v2-num); background: #e4dcff; border: 2.5px dashed var(--v2-ink); border-radius: 50%; }
.pk2-node.is-cur { background: var(--v2-flame); border-style: solid; box-shadow: 0 0 0 3px var(--v2-card), 0 0 0 5.5px var(--v2-ink); }
.pk2-node.is-flag { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: var(--v2-card); border-style: solid; }
.pk2-walker { position: absolute; width: 40px; height: 64px; margin: -76px 0 0 -20px; animation: v2hopA .5s cubic-bezier(.3, 1.3, .5, 1); }
.pk2-first { display: flex; flex-direction: column; gap: 2px; margin: 14px 16px 0; padding: 10px 14px; box-shadow: 3px 3px 0 var(--v2-ink); }
.pk2-first b { font-size: 19px; font-weight: 900; }

/* 下面 */
.pk2-foot { position: relative; z-index: 4; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px max(20px, env(safe-area-inset-bottom)); }
.pk2-hint { margin: 0; text-align: center; font-size: 10px; color: var(--v2-muted); }
.pk2-go { width: 100%; min-height: 58px; font-size: 18px; background: var(--v2-ember); }
.pk2-go[disabled] { opacity: .5; cursor: default; }
.pk2-btns { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.pk2-btns .v2-btn { min-height: 56px; font-size: 16px; }
.pk2-ff { position: absolute; inset: 0; z-index: 3; padding: 0; background: transparent; border: 0; cursor: pointer; }

/* 細機 */
@media (max-height: 720px) {
  .pk2-me { height: 190px; }
  .pk2-me__fire { width: 123px; height: 180px; }
  .pk2-bub { margin-bottom: 40px; font-size: 13px; }
  .pk2-me__shadow { left: 26px; width: 84px; }
}
@media (max-width: 370px) {
  .pk2-slot { --w: 94px; }
  .pk2-face.deck-card.cv2 { transform: scale(calc(94 / 168)); }
  @keyframes pk2Deal { from { transform: translateX(calc((1 - var(--k)) * 104px)) rotate(-6deg); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .pk2 *, .pk2-me__fire { animation: none !important; transition: none !important; }
}