:root {
  --bg: #07040e;
  --phone: #100818;
  --panel: #1c122aee;
  --panel-solid: #1a1028;
  --ink: #0a0610;
  --neon-pink: #ff2d95;
  --neon-cyan: #2de2ff;
  --neon-gold: #ffd36a;
  --neon-lime: #b8ff4a;
  --cha-yellow: #ffcc33;
  --cha-red: #e83a3a;
  --text: #f7f0fa;
  --muted: #b49ec4;
  --danger: #ff5a6a;
  --ok: #5dffb0;
  --bar-bg: #2a1a38;
  --frame: 390px;
  --frame-h: 844px;
  --ink-border: 3px solid #0a0610;
  --comic-radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 10%, #2a1048 0%, transparent 45%),
    radial-gradient(ellipse at 80% 80%, #1a0830 0%, var(--bg) 55%);
  color: var(--text);
  font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Outer phone bezel */
.phone {
  width: min(100vw - 24px, var(--frame));
  height: min(96vh, var(--frame-h));
  aspect-ratio: 390 / 844;
  max-height: 96vh;
  background: #0a0612;
  border: 3px solid #1a0a28;
  border-radius: 32px;
  box-shadow:
    0 0 0 2px #ff2d9544,
    0 0 0 5px #0a0610,
    0 0 48px rgba(255, 45, 149, 0.28),
    0 0 96px rgba(45, 226, 255, 0.12),
    inset 0 0 80px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
}

.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  border-radius: 30px;
  box-shadow: inset 0 0 0 2px rgba(255,211,106,0.12);
}

/* Shared screen — no vertical scrollbar anywhere in the phone frame */
.screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* t363：上下留白收細（12px 12px 14px → 8px 10px 10px；gap 8 → 6） */
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  background: #100818;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.screen::-webkit-scrollbar { display: none; width: 0; height: 0; }
.phone *,
.screen * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.phone *::-webkit-scrollbar,
.screen *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }


/* Screen scene backgrounds */
.screen.has-bg {
  background-color: #0a0610;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
/* t360：背景底圖由手繪 SVG 佔位圖換成真實插畫 JPG
   （SVG 內含洋紅／青色長條方塊，玩家會當成破圖；JPG 係 896x1200 完整場景）
   遮罩比原本薄，保留插畫質感但確保 UI 可讀 */
.screen.bg-title { background-image: linear-gradient(180deg, rgba(8,4,16,0.18) 0%, rgba(8,4,16,0.3) 46%, rgba(8,4,16,0.8) 100%), url("assets/ui/bg-title.jpg"); background-position: center 28%; }
.screen.bg-home { background-image: linear-gradient(180deg, rgba(8,4,16,0.22) 0%, rgba(8,4,16,0.14) 30%, rgba(8,4,16,0.6) 66%, rgba(8,4,16,0.9) 100%), url("assets/ui/bg-home.jpg"); background-position: center 34%; padding-bottom: 78px; }
/* no-scrollbar-global-home */
.screen.bg-home {
  overflow: hidden;
  gap: 6px;
}
.screen.bg-home .bubble {
  margin: 0;
  font-size: 0.82rem;
  padding: 8px 10px;
}

/* t359：故事包列表／詳情同用 bg-home 背景，但冇主頁底欄——
   之前誤用 78px padding-bottom（留俾 tab-bar），令列表少 78px 高又要捲，
   底部又多一截空白。呢兩頁要還原正常 padding，列表食晒剩餘高度。 */
.screen.bg-home[data-screen="storyPacks"],
.screen.bg-home[data-screen="storyPackDetail"] {
  padding-bottom: 14px;
}
.screen.bg-home[data-screen="storyPacks"] > .pack-list,
.screen.bg-home[data-screen="storyPackDetail"] > .pack-detail {
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(45, 226, 255, 0.35) transparent;
}
.screen.bg-home[data-screen="storyPacks"] > .pack-list::-webkit-scrollbar,
.screen.bg-home[data-screen="storyPackDetail"] > .pack-detail::-webkit-scrollbar {
  width: 4px;
}
.screen.bg-home[data-screen="storyPacks"] > .pack-list::-webkit-scrollbar-thumb,
.screen.bg-home[data-screen="storyPackDetail"] > .pack-detail::-webkit-scrollbar-thumb {
  background: rgba(45, 226, 255, 0.35);
  border-radius: 2px;
}
.screen.bg-home[data-screen="storyPacks"] > .sub {
  flex: 0 0 auto;
}
.screen.bg-home .home-side .side-icon {
  padding: 4px 2px;
  font-size: 0.62rem;
}
.screen.bg-home .home-side .side-icon .ico {
  font-size: 1rem;
  margin-bottom: 0;
}

.screen.bg-events { background-image: linear-gradient(180deg, rgba(8,4,16,0.34) 0%, rgba(8,4,16,0.26) 40%, rgba(8,4,16,0.76) 100%), url("assets/ui/bg-events.jpg"); background-position: center 34%; }
.screen.bg-team { background-image: linear-gradient(180deg, rgba(8,4,16,0.36) 0%, rgba(8,4,16,0.26) 38%, rgba(8,4,16,0.8) 100%), url("assets/ui/bg-team.jpg"); background-position: center 42%; }
.screen.bg-encounter { background-image: linear-gradient(180deg, rgba(8,4,16,0.32) 0%, rgba(8,4,16,0.24) 40%, rgba(8,4,16,0.78) 100%), url("assets/ui/bg-encounter.jpg"); background-position: center 40%; }
.screen.bg-battle { background-image: linear-gradient(180deg, rgba(8,4,16,0.36) 0%, rgba(8,4,16,0.14) 38%, rgba(8,4,16,0.26) 60%, rgba(8,4,16,0.74) 100%), url("assets/ui/bg-battle-scene.jpg"); padding: 10px 8px 12px; background-position: center center; }
.screen.bg-result { background-image: linear-gradient(180deg, rgba(8,4,16,0.22) 0%, rgba(8,4,16,0.36) 46%, rgba(8,4,16,0.86) 100%), url("assets/ui/bg-result.jpg"); background-position: center 36%; }
.screen.bg-soft { background-image: linear-gradient(180deg, rgba(8,4,16,0.3) 0%, rgba(8,4,16,0.72) 100%), url("assets/ui/bg-events.jpg"); background-position: center 34%; }

/* Halftone / noise / neon wash overlays */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.08;
  background-image:
    radial-gradient(circle, #fff 0.6px, transparent 0.8px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.04) 3px 4px);
  background-size: 5px 5px, 100% 100%;
  mix-blend-mode: soft-light;
}
.screen > * { position: relative; z-index: 2; }

/* Title neon */
.neon-title {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-align: center;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink), var(--neon-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,45,149,0.55));
  margin-top: 12px;
  margin-bottom: 4px;
}

.title-banner {
  margin: 8px 8px 4px;
  background: linear-gradient(180deg, #ff3a4a 0%, #c81828 100%);
  border: 3px solid #0a0610;
  border-radius: 9px;
  box-shadow:
    0 0 0 2px #ffd36a88,
    0 5px 0 #0a0610,
    0 0 24px rgba(255,45,149,0.4);
  /* t363：標題橫額收細（padding 14/12 → 7/10；margin-top 28 → 8） */
  padding: 7px 10px 6px;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}
.title-banner::before,
.title-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border: 2.5px solid #0a0610;
  background: var(--cha-yellow);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 10px rgba(255,211,106,0.5);
}
.title-banner::before { left: -8px; }
.title-banner::after { right: -8px; }
.title-banner .neon-title {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.15;
  color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  filter: drop-shadow(2px 2px 0 #0a0610) drop-shadow(0 0 8px rgba(255,255,255,0.35));
}
.title-banner .tagline {
  margin-top: 2px;
  font-size: 0.72rem;
  line-height: 1.2;
  font-weight: 700;
  color: #ffe8a0;
  letter-spacing: 0.08em;
}

.sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}
.screen.bg-title .sub {
  margin: 0 20px;
  padding: 5px 10px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #f7f0fa;
  background: rgba(8, 4, 16, 0.82);
  border: 2px solid rgba(255, 211, 106, 0.45);
  border-radius: 10px;
}

.spacer { flex: 1; }

/* Speech / bubble flourish */
.bubble {
  align-self: center;
  max-width: 88%;
  background: #fff8ec;
  color: #1a1020;
  border: 3px solid #0a0610;
  border-radius: 18px 18px 18px 6px;
  padding: 10px 14px;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.45;
  box-shadow: 4px 4px 0 #0a0610, 0 0 18px rgba(255,211,106,0.25);
  position: relative;
  margin: 6px 0;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -12px;
  border: 7px solid transparent;
  border-top-color: #0a0610;
}
.bubble::before {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -7px;
  border: 5px solid transparent;
  border-top-color: #fff8ec;
  z-index: 1;
}
.bubble.neon {
  background: linear-gradient(180deg, #2a1840, #180c28);
  color: var(--text);
  border-color: var(--neon-cyan);
  box-shadow: 4px 4px 0 #0a0610, 0 0 18px rgba(45,226,255,0.35);
}
.bubble.neon::after { border-top-color: var(--neon-cyan); }
.bubble.neon::before { border-top-color: #180c28; }

/* Buttons — 茶記 plastic + neon ink */
.btn {
  appearance: none;
  border: 3px solid #0a0610;
  background:
    linear-gradient(180deg, #ff4d9e 0%, #c41868 48%, #8a1048 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 13px 16px;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  /*
   * t379：主掣唔好斷行（總導演：「金掣斷行」）。
   * 原本冇 nowrap，「繼續上次未完人生」等長文案喺窄屏會斷成兩行，
   * 按鈕高度由 55px 變 78px，擠壓下方版面。
   * 改為 nowrap + 自動縮字級（clamp），窄屏仍然一行。
   */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.82rem, 3.6vw, 1.05rem);
  transition: transform 0.08s, box-shadow 0.15s;
  box-shadow:
    0 4px 0 #0a0610,
    0 0 18px rgba(255, 45, 149, 0.35);
  font-family: inherit;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #0a0610;
  position: relative;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0a0610, 0 0 12px rgba(255,45,149,0.3); }
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.btn.cyan {
  background: linear-gradient(180deg, #4ef0ff 0%, #1ab8d0 48%, #0e7a90 100%);
  box-shadow: 0 4px 0 #0a0610, 0 0 18px rgba(45, 226, 255, 0.4);
}
.btn.gold {
  background: linear-gradient(180deg, #ffe07a 0%, #f0b020 48%, #c88810 100%);
  color: #1a1020;
  text-shadow: none;
  box-shadow: 0 4px 0 #0a0610, 0 0 18px rgba(255, 211, 106, 0.4);
}
.btn.pink {
  background: linear-gradient(180deg, #ff6eb4 0%, #ff2d95 48%, #c01868 100%);
  color: #fff8fc;
  text-shadow: 0 1px 0 #8a1048;
  box-shadow: 0 4px 0 #0a0610, 0 0 18px rgba(255, 45, 149, 0.45);
}
.btn.ghost {
  background: linear-gradient(180deg, #2a1a3ccc, #160c24cc);
  border-color: #5a4078;
  box-shadow: 0 3px 0 #0a0610;
  color: var(--muted);
  font-weight: 700;
  text-shadow: none;
}
.btn.small {
  padding: 8px 12px;
  font-size: 0.88rem;
  width: auto;
}
.btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Resource chips / HUD */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  /* t363：頂欄收細（8px 10px → 4px 8px；邊框 3px → 2.5px） */
  padding: 4px 8px;
  min-height: 0;
  flex-shrink: 0;
  /* t382：missions 頂欄有 4 個 chip（差事／膠幣／金幣／聲望），窄機 390px 時
     合計寬度超過容器 → nowrap 令最後一個「聲望」被擠出畫面右邊（實測右緣 431px > 390px）。
     允許換行並限定最寬，確保任何 chip 都留在畫面內。 */
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #241630ee, #140a20ee);
  border: 2.5px solid #0a0610;
  border-radius: 10px;
  box-shadow: 0 2px 0 #0a0610, inset 0 0 20px rgba(45,226,255,0.08);
}
.hud > .chip {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 2px solid #0a0610;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 1.15;
  /* t363：頂欄過高元兇——冇 nowrap，中文會喺藥丸內斷成 2–3 行
     實測 chip 高 50px（正常應 30px），整條 .hud 74px → 55px */
  white-space: nowrap;
  background: #1a1028;
  box-shadow: 0 0 10px rgba(255,211,106,0.15);
}
.chip.year {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(45,226,255,0.35);
}
.chip.soul {
  color: var(--neon-gold);
  border-color: var(--neon-gold);
  box-shadow: 0 0 12px rgba(255,211,106,0.35);
}
.chip .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

.section-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  margin: 2px 0;
  padding: 8px 14px;
  background: linear-gradient(90deg, transparent, #ff2d9588, #2de2ff66, transparent);
  border-top: 2px solid #0a0610;
  border-bottom: 2px solid #0a0610;
  text-shadow: 2px 2px 0 #0a0610, 0 0 12px rgba(255,45,149,0.5);
  letter-spacing: 0.12em;
}

.ribbon {
  align-self: center;
  background: linear-gradient(180deg, #6b3ad8, #3a1a88);
  border: 2.5px solid #0a0610;
  color: #fff;
  font-weight: 900;
  /* t363：頂部收細（0.95rem／6px 28px／3px → 0.82rem／3px 20px／2.5px） */
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 3px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 0 #0a0610, 0 0 14px rgba(120,80,220,0.4);
  letter-spacing: 0.12em;
  position: relative;
  flex-shrink: 0;
  white-space: nowrap;
}
.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 8px solid transparent;
  transform: translateY(-50%);
}
.ribbon::before { left: -13px; border-right-color: #3a1a88; border-left-width: 0; }
.ribbon::after { right: -13px; border-left-color: #3a1a88; border-right-width: 0; }

/* Comic panel frames */
.comic-frame {
  border: 4px solid #0a0610;
  border-radius: var(--comic-radius);
  background: var(--panel);
  box-shadow:
    0 0 0 2px #ffd36a55,
    0 5px 0 #0a0610,
    inset 0 0 30px rgba(0,0,0,0.35);
  overflow: hidden;
  position: relative;
}
.comic-frame.glow-cyan {
  box-shadow: 0 0 0 2px #2de2ff88, 0 5px 0 #0a0610, 0 0 22px rgba(45,226,255,0.35);
}
.comic-frame.glow-pink {
  box-shadow: 0 0 0 2px #ff2d9588, 0 5px 0 #0a0610, 0 0 22px rgba(255,45,149,0.35);
}

/* Home hero — compact so 今世主頁 fits without scroll */
.home-hero {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}
.hero-card {
  width: 58%;
  max-width: 168px;
  border: 4px solid #0a0610;
  border-radius: 16px;
  overflow: hidden;
  background: #12081c;
  box-shadow:
    0 0 0 3px #ffd36a99,
    0 8px 0 #0a0610,
    0 0 28px rgba(255,45,149,0.35);
  position: relative;
}
.hero-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.hero-card .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(8,4,16,0.92));
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
  text-shadow: 1px 1px 0 #0a0610;
}
.home-side {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
  gap: 6px;
}
.side-icon {
  flex: 1;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
  padding: 6px 2px;
  border: 2px solid #0a0610;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a1840cc, #140a24cc);
  box-shadow: 0 2px 0 #0a0610, 0 0 10px rgba(45,226,255,0.12);
}
.side-icon .ico {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 2px;
  filter: drop-shadow(0 0 6px rgba(255,211,106,0.5));
}
.side-icon.active {
  color: var(--neon-gold);
  border-color: var(--neon-gold);
  box-shadow: 0 2px 0 #0a0610, 0 0 14px rgba(255,211,106,0.4);
}
button.side-icon {
  appearance: none;
  font: inherit;
  cursor: pointer;
  color: inherit;
}
.home-actions {
  margin-top: 4px;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.home-life-row {
  gap: 8px;
  align-items: stretch;
}
.home-life-row .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  white-space: normal;
  line-height: 1.25;
}
.home-life-row #btn-continue-life {
  font-size: 0.72rem;
}
.home-actions-row2 {
  margin-top: 10px;
  grid-template-columns: 1fr;
}
.home-toast {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 88px;
  z-index: 40;
  padding: 10px 12px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: #1a1028f2;
  color: #ffd36a;
  font-weight: 800;
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 4px 0 #0a0610, 0 0 18px rgba(255,211,106,0.25);
}
.hero-card {
  max-width: 168px;
}

/* Bottom tab bar — life-run density */
.tab-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 10px;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px 4px;
  background: linear-gradient(180deg, #2a1a38f2, #12081cf5);
  border: 3px solid #0a0610;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px #ff2d9544,
    0 -4px 24px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,211,106,0.15);
}
.tab {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 4px 2px 2px;
  cursor: pointer;
  border-radius: 10px;
  line-height: 1.2;
}
.tab .ico {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 2px;
}
.tab.on {
  color: #fff;
  background: linear-gradient(180deg, #ff2d9588, #8a104844);
  box-shadow: inset 0 0 0 2px var(--neon-pink), 0 0 12px rgba(255,45,149,0.35);
}
.tab:disabled,
.tab[aria-disabled="true"] { opacity: 0.55; cursor: default; }

/* Event 2×2 */
.event-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.event-card {
  background: linear-gradient(180deg, #241630, #140a20);
  border: 4px solid #0a0610;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 0 #0a0610, 0 0 0 1px #ffd36a44;
  padding: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.event-card:hover, .event-card:focus {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #0a0610, 0 0 0 2px var(--neon-cyan), 0 0 18px rgba(45,226,255,0.4);
}
.event-card img {
  width: 100%;
  aspect-ratio: 5 / 3;
  max-height: 78px;
  object-fit: cover;
  display: block;
  background: #0d0818;
  border-bottom: 3px solid #0a0610;
  flex: 0 1 auto;
  min-height: 0;
}
.event-card .label {
  padding: 8px 8px 12px;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.3;
  background: linear-gradient(180deg, #1e1230, #12081c);
  flex: 0 0 auto;
  min-height: 0;
}
.event-card .tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #1a1020;
  background: var(--cha-yellow);
  border: 2px solid #0a0610;
  border-radius: 6px;
  padding: 1px 6px;
}
.event-card .tag.minigame {
  background: rgba(255, 120, 200, 0.85);
  color: #1a0814;
}
.event-card .tag.faction {
  background: rgba(255, 170, 80, 0.9);
  color: #1a1008;
}
.event-card .tag.gift {
  background: rgba(120, 255, 170, 0.9);
  color: #08200f;
}
.event-card .tag.fight {
  background: var(--neon-pink);
  color: #fff;
}

/* Fighter book / team grid — 3×5 original thumbs, no inner scrollbar */
.fighter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-right: 0;
}
.fighter-grid.thumbs-3x5 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, auto);
  gap: 6px;
  max-height: none;
  overflow: visible;
  flex: 0 0 auto;
}
.fighter-thumb {
  appearance: none;
  background: linear-gradient(180deg, #241630, #140a20);
  border: 3px solid #0a0610;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  padding: 0;
  color: inherit;
  font-family: inherit;
  text-align: center;
  box-shadow: 0 2px 0 #0a0610;
}
.fighter-thumb.selected {
  border-color: var(--neon-pink);
  box-shadow: 0 0 0 2px var(--neon-gold), 0 0 14px rgba(255, 45, 149, 0.45), 0 2px 0 #0a0610;
}
.fighter-thumb.selected::after {
  content: "已揀";
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--neon-pink);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 5px;
  border: 2px solid #0a0610;
}
.fighter-thumb img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #0d0818;
}
.fighter-thumb .thumb-name {
  display: block;
  padding: 3px 2px 4px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #12081c;
  border-top: 2px solid #0a0610;
}
.screen.bg-team,
.screen.bg-prep {
  overflow: hidden; /* no page scrollbar on prep/team */
  scrollbar-width: none;
  padding-bottom: 10px;
  gap: 6px;
}
.screen.bg-team::-webkit-scrollbar,
.screen.bg-prep::-webkit-scrollbar { display: none; width: 0; height: 0; }
.fighter-grid.thumbs-3x5::-webkit-scrollbar { display: none; width: 0; height: 0; }
.fighter-card {
  background: linear-gradient(180deg, #241630, #140a20);
  border: 3px solid #0a0610;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
  padding: 0;
  color: inherit;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 3px 0 #0a0610;
}
.fighter-card.selected {
  border-color: var(--neon-pink);
  box-shadow: 0 0 0 2px var(--neon-gold), 0 0 18px rgba(255, 45, 149, 0.5), 0 3px 0 #0a0610;
}
.fighter-card.selected::after {
  content: "已揀";
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--neon-pink);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 6px;
  border: 2px solid #0a0610;
  box-shadow: 0 2px 0 #0a0610;
}
.fighter-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  background: #0d0818;
  border-bottom: 2px solid #0a0610;
}
.fighter-card .meta {
  padding: 6px 8px 8px;
  font-size: 0.75rem;
  line-height: 1.35;
}
.fighter-card .name {
  font-weight: 900;
  font-size: 0.82rem;
}
.fighter-card .stats {
  color: var(--muted);
  margin-top: 2px;
}
.fighter-card .rarity {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1.5px solid #0a0610;
  background: #3a2458;
  color: var(--neon-gold);
}

.pick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: #140a20cc;
  border: 2px solid #0a0610;
  border-radius: 10px;
}
.pick-count {
  font-weight: 800;
  color: var(--neon-cyan);
  font-size: 0.95rem;
}

.enemy-preview {
  text-align: center;
  padding: 8px;
}
.enemy-preview img {
  width: 72%;
  max-width: 230px;
  border-radius: 16px;
  border: 4px solid #0a0610;
  box-shadow: 0 0 0 3px var(--neon-pink), 0 0 28px rgba(255, 45, 149, 0.4), 0 6px 0 #0a0610;
  aspect-ratio: 1;
  object-fit: cover;
}
.enemy-preview h2 {
  margin-top: 12px;
  font-size: 1.35rem;
  color: var(--neon-gold);
  text-shadow: 2px 2px 0 #0a0610, 0 0 12px rgba(255,211,106,0.4);
}
.enemy-preview .stats {
  color: var(--muted);
  margin-top: 6px;
}

.enemy-preview.multi h2 {
  margin-bottom: 10px;
}
.enemy-preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: start;
}
.enemy-preview-card {
  background: linear-gradient(180deg, #241630ee, #12081cee);
  border: 3px solid #0a0610;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #ff2d9544, 0 3px 0 #0a0610;
}
.enemy-preview-card img {
  width: 100%;
  max-width: none;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #0a0610;
  box-shadow: none;
  display: block;
}
.enemy-preview-card .ep-name {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enemy-preview-card .ep-stats {
  font-size: 0.62rem;
  color: var(--muted);
  padding: 2px 4px 6px;
  font-weight: 700;
}

/* Battle */
.battle {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.battle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 6px 10px;
  background: #12081cee;
  border: 3px solid #0a0610;
  border-radius: 10px;
  box-shadow: 0 2px 0 #0a0610;
}
.enemy-slot {
  /* legacy single-boss slot — unused; kept for safety */
  display: none;
}
.hp-bar {
  width: 100%;
  height: 11px;
  background: var(--bar-bg);
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #0a0610;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.hp-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--neon-cyan), var(--ok));
  width: 100%;
  transition: width 0.18s ease-out;
}
.hp-bar.enemy > i {
  background: linear-gradient(90deg, var(--danger), var(--neon-pink));
}
.hp-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.team-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  width: 100%;
  align-items: stretch;
}
.team-row.enemy-row {
  /* same 3 columns as player-row — aligned stand positions */
}
.vs-strip {
  align-self: center;
  font-weight: 900;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(255,211,106,0.5), 1px 1px 0 #0a0610;
  opacity: 0.85;
  padding: 2px 0;
}
.unit-slot {
  background: linear-gradient(180deg, #241630ee, #12081cee);
  border: 3px solid #0a0610;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  position: relative;
  transition: transform 0.12s;
  box-shadow: 0 0 0 1px #2de2ff44, 0 3px 0 #0a0610;
  min-width: 0;
}
.unit-slot.enemy {
  box-shadow: 0 0 0 1px #ff2d9544, 0 3px 0 #0a0610;
}
.unit-slot.enemy img {
  /* full card art with background — same framing as player */
}

/* ---------- Battle status icons (above card) ---------- */
.status-row {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: flex-start;
  align-items: flex-start;
  pointer-events: none;
}
.st-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  border-radius: 5px;
  background: #0a0610f0;
  border: 1.5px solid var(--neon-cyan);
  box-shadow: 0 1px 0 #0a0610, 0 0 6px rgba(45, 226, 255, 0.25);
}
.st-icon.buff {
  border-color: var(--neon-gold);
  box-shadow: 0 0 0 1px #2de2ff55, 0 1px 0 #0a0610, 0 0 8px rgba(255, 211, 106, 0.35);
}
.st-icon.debuff {
  border-color: var(--neon-pink);
  box-shadow: 0 0 0 1px #ff2d9555, 0 1px 0 #0a0610, 0 0 8px rgba(255, 45, 149, 0.35);
}
.st-icon .st-turns {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-style: normal;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
     0 0 3px #000;
  pointer-events: none;
}

.card-inspect-body .ci-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.card-inspect-body .ci-st {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: #12081cee;
  border: 1.5px solid #2de2ff66;
  color: var(--neon-cyan);
}
.card-inspect-body .ci-st.buff {
  border-color: var(--neon-gold);
  color: var(--neon-gold);
}
.card-inspect-body .ci-st.debuff {
  border-color: var(--neon-pink);
  color: var(--neon-pink);
}

.unit-slot.down {
  opacity: 0.35;
  filter: grayscale(0.8);
}
.unit-slot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-bottom: 2px solid #0a0610;
  transition: filter 0.1s;
  background: #0d0818;
}
.unit-slot .uname {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-slot .uhp {
  padding: 2px 4px 6px;
}

.battle-log {
  flex: 1;
  min-height: 100px;
  max-height: 28vh;
  overflow-y: auto;
  background: #0d0814;
  border: 1px solid #2a1a40;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #d8c8e8;
  display: none !important;
}
.battle-log .line { margin-bottom: 3px; }
.battle-log .skill { color: var(--neon-gold); }
.battle-log .dmg { color: var(--neon-pink); }
.battle-log .sys { color: var(--neon-cyan); }

.battle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
  z-index: 55; /* above card-inspect (40) so 放棄 stays findable while paused */
  pointer-events: auto;
}
.battle-actions .btn { flex: 1; min-width: 0; }
.battle-actions .btn.danger {
  background: linear-gradient(180deg, #ff7a88 0%, #c4283a 48%, #8a1020 100%);
  color: #fff;
  box-shadow: 0 4px 0 #0a0610, 0 0 14px rgba(255, 90, 106, 0.35);
}
.forfeit-confirm {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #12081cf2;
  border: 3px solid #0a0610;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--neon-pink), 0 4px 0 #0a0610;
  animation: inspect-fade-in 0.12s ease-out;
}
.forfeit-confirm .ff-q {
  flex: 1;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
}
.forfeit-confirm .btn { flex: 0 0 auto; width: auto; }

.battle-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 6px;
  min-height: 0;
  position: relative;
}
.battle-stage .team-row {
  flex: 1 1 0;
  min-height: 0;
  align-items: stretch;
}
.battle-stage .unit-slot {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.battle-stage .unit-slot img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center top;
}
.battle-stage .unit-slot .uname,
.battle-stage .unit-slot .uhp {
  flex-shrink: 0;
}
.battle-actions {
  flex-shrink: 0;
}

.result-banner {
  text-align: center;
  margin: 18px 8px 10px;
  font-size: 1.35rem;
  font-weight: 900;
  padding: 12px 14px;
  border: 4px solid #0a0610;
  border-radius: 12px;
  box-shadow: 0 5px 0 #0a0610, 0 0 24px rgba(255,211,106,0.3);
  letter-spacing: 0.06em;
}
.result-banner.win {
  color: #0a2010;
  background: linear-gradient(180deg, #9dffc8, #3ad88a);
  text-shadow: none;
}
.result-banner.lose {
  color: #fff;
  background: linear-gradient(180deg, #ff7a8a, #c82840);
  text-shadow: 1px 1px 0 #0a0610;
}
.result-art {
  width: 55%;
  margin: 0 auto 12px;
  display: block;
  border-radius: 14px;
  border: 4px solid #0a0610;
  box-shadow: 0 0 0 2px #ffd36a66, 0 5px 0 #0a0610;
}

.toast {
  text-align: center;
  color: var(--neon-gold);
  font-size: 0.9rem;
  padding: 8px;
}

.soft-panel {
  background: linear-gradient(180deg, #241630ee, #140a20ee);
  border: 3px solid #0a0610;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  line-height: 1.6;
  box-shadow: 0 4px 0 #0a0610, inset 0 0 24px rgba(45,226,255,0.06);
}

/* Speed-line decorative strip (static, non-FX) */
.speed-strip {
  /* t363：純裝飾分隔條，14px → 5px（連 margin 由 28px 佔位降到 ~11px） */
  height: 5px;
  margin: 0 0 2px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -18deg,
    transparent 0 8px,
    rgba(255,211,106,0.22) 8px 10px,
    transparent 10px 18px
  );
  opacity: 0.7;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* ===== Battle impact (no text log) ===== */
.battle.shake {
  animation: battle-shake 0.28s ease-out;
}
.battle.shake-hard {
  animation: battle-shake-hard 0.38s ease-out;
}
@keyframes battle-shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 2px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 1px); }
  80% { transform: translate(3px, -1px); }
}
@keyframes battle-shake-hard {
  0%,100% { transform: translate(0,0) scale(1); }
  15% { transform: translate(-10px, 4px) scale(1.02); }
  30% { transform: translate(9px, -5px) scale(0.99); }
  50% { transform: translate(-7px, 3px); }
  70% { transform: translate(5px, -2px); }
  85% { transform: translate(-3px, 1px); }
}

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}
.fx-dmg {
  position: absolute;
  font-weight: 900;
  font-size: 1.85rem;
  color: #fff;
  text-shadow:
    0 0 4px #ff2d95,
    0 0 12px #ff2d95,
    2px 2px 0 #1a0010;
  animation: float-dmg 0.85s ease-out forwards;
  z-index: 30;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.fx-dmg.skill {
  font-size: 2.35rem;
  color: var(--neon-gold);
  text-shadow:
    0 0 6px #ffd36a,
    0 0 18px #ff2d95,
    2px 2px 0 #1a0010;
}
.fx-dmg.crit {
  font-size: 2.6rem;
  color: #fff;
  animation: float-dmg-crit 0.95s ease-out forwards;
}
@keyframes float-dmg {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  15% { opacity: 1; transform: translate(-50%, -8px) scale(1.25); }
  40% { transform: translate(-50%, -28px) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.9); }
}
@keyframes float-dmg-crit {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.2) rotate(-8deg); }
  20% { opacity: 1; transform: translate(-50%, -12px) scale(1.4) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -80px) scale(1) rotate(0deg); }
}

.fx-slash {
  position: absolute;
  width: 120px;
  height: 8px;
  background: linear-gradient(90deg, transparent, #fff, var(--neon-pink), transparent);
  border-radius: 4px;
  transform: translate(-50%, -50%) rotate(-25deg) scaleX(0.2);
  opacity: 0;
  animation: slash-fx 0.32s ease-out forwards;
  box-shadow: 0 0 16px var(--neon-pink);
}
.fx-slash.skill {
  height: 14px;
  background: linear-gradient(90deg, transparent, #fff, var(--neon-gold), var(--neon-pink), transparent);
  animation: slash-fx 0.4s ease-out forwards;
}
@keyframes slash-fx {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-25deg) scaleX(0.2); }
  30% { opacity: 1; transform: translate(-50%, -50%) rotate(-25deg) scaleX(1.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-25deg) scaleX(1.4) translateX(20px); }
}

.fx-burst {
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--neon-gold);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: burst-ring 0.45s ease-out forwards;
  box-shadow: 0 0 24px var(--neon-gold), inset 0 0 20px rgba(255,211,106,0.4);
}
@keyframes burst-ring {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}

.unit-slot.hit, .enemy-slot.hit {
  animation: hit-flash 0.35s ease-out;
}
.unit-slot.hit img, .enemy-slot.hit img {
  filter: brightness(2.4) contrast(1.2) saturate(0.3);
}
@keyframes hit-flash {
  0% { transform: translateX(0); filter: none; }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.unit-slot.attack, .enemy-slot.attack {
  animation: lunge 0.28s ease-out;
  z-index: 5;
}
.unit-slot.enemy.attack, .enemy-slot.attack {
  animation: lunge-down 0.28s ease-out;
}
@keyframes lunge {
  0% { transform: translateY(0); }
  40% { transform: translateY(-18px) scale(1.06); }
  100% { transform: translateY(0); }
}
@keyframes lunge-down {
  0% { transform: translateY(0); }
  40% { transform: translateY(16px) scale(1.06); }
  100% { transform: translateY(0); }
}

.unit-slot.skill-glow, .enemy-slot.skill-glow {
  box-shadow: 0 0 22px rgba(255, 211, 106, 0.7);
  border-color: var(--neon-gold) !important;
}

.impact-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.35), transparent 55%);
  opacity: 0;
  pointer-events: none;
  z-index: 15;
}
.impact-flash.on {
  animation: impact-white 0.22s ease-out;
}
.impact-flash.skill.on {
  background: radial-gradient(circle at 50% 40%, rgba(255,211,106,0.45), transparent 60%);
  animation: impact-white 0.3s ease-out;
}
@keyframes impact-white {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.fx-skill-name {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 40;
  pointer-events: none;
  text-align: center;
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: 0.08em;
  color: #fff;
  padding: 10px 22px;
  border-radius: 10px;
  border: 3px solid var(--neon-gold);
  background: linear-gradient(180deg, rgba(40,20,10,0.92), rgba(20,8,16,0.95));
  box-shadow:
    0 0 0 2px #1a0010,
    0 0 28px rgba(255, 211, 106, 0.7),
    0 0 48px rgba(255, 45, 149, 0.35);
  text-shadow:
    0 0 8px var(--neon-gold),
    2px 2px 0 #1a0010;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: skill-banner 0.95s ease-out forwards;
}
.fx-skill-name.enemy {
  border-color: var(--danger);
  box-shadow:
    0 0 0 2px #1a0010,
    0 0 28px rgba(255, 90, 106, 0.75),
    0 0 48px rgba(255, 45, 149, 0.4);
  text-shadow:
    0 0 8px var(--neon-pink),
    2px 2px 0 #1a0010;
}
.fx-skill-name .who {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  text-shadow: none;
}
@keyframes skill-banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
  35% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  75% { opacity: 1; transform: translate(-50%, -54%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(0.92); }
}

.fx-speedlines {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 200%;
  height: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 18;
  background: repeating-linear-gradient(
    -18deg,
    transparent 0 10px,
    rgba(255,211,106,0.15) 10px 12px,
    transparent 12px 22px
  );
  opacity: 0;
  animation: speedlines 0.4s ease-out forwards;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.fx-speedlines.enemy {
  background: repeating-linear-gradient(
    -18deg,
    transparent 0 10px,
    rgba(255,45,149,0.18) 10px 12px,
    transparent 12px 22px
  );
}
@keyframes speedlines {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Card inspect overlay (battle pause) ---------- */
.unit-slot.inspectable,
.enemy-slot.inspectable {
  cursor: pointer;
}
.unit-slot.inspectable:hover,
.enemy-slot.inspectable:hover {
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 18px rgba(45, 226, 255, 0.45), 0 3px 0 #0a0610;
}
.unit-slot.enemy.inspectable:hover {
  box-shadow: 0 0 0 2px var(--neon-pink), 0 0 18px rgba(255, 45, 149, 0.5), 0 3px 0 #0a0610;
}
.enemy-slot.inspectable:hover img {
  box-shadow: 0 0 0 2px var(--neon-pink), 0 0 28px rgba(255, 45, 149, 0.55);
}
.fx-skill-name.inspectable {
  cursor: pointer;
  pointer-events: auto;
}

.card-inspect {
  position: absolute;
  inset: 0;
  z-index: 60; /* 蓋過 battle-actions(55)，卡面文案唔好被「快啲／放棄」擋 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 16px;
  background: rgba(4, 2, 10, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: inspect-fade-in 0.15s ease-out;
  cursor: pointer;
}
/* inspect 開緊：底欄唔好擋字（仍可撳遮罩關閉） */
.battle:has(.card-inspect) .battle-actions {
  opacity: 0.25;
  pointer-events: none;
}
@keyframes inspect-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.card-inspect-panel {
  position: relative;
  width: min(90%, 300px);
  max-height: min(88vh, 92%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(165deg, #2a1838 0%, #140a20 55%, #0c0614 100%);
  border: 4px solid #0a0610;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px var(--neon-gold),
    0 0 0 5px #0a0610,
    0 0 28px rgba(255, 45, 149, 0.3),
    0 0 40px rgba(45, 226, 255, 0.15),
    0 10px 0 #0a0610;
  padding: 0 0 10px;
  cursor: default;
  animation: inspect-pop 0.2s cubic-bezier(0.2, 1.2, 0.4, 1);
}
.card-inspect-panel.enemy {
  box-shadow:
    0 0 0 2px var(--neon-pink),
    0 0 0 5px #0a0610,
    0 0 36px rgba(255, 90, 106, 0.4),
    0 12px 0 #0a0610;
}
@keyframes inspect-pop {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.card-inspect-art {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 16vh;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
  border-bottom: 3px solid #0a0610;
  background: #0d0818;
}
.card-inspect-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.card-inspect-art .rarity-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #0a0610ee;
  border: 2px solid var(--neon-gold);
  color: var(--neon-gold);
  font-size: 0.72rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 8px;
  letter-spacing: 0.06em;
  box-shadow: 0 0 12px rgba(255, 211, 106, 0.35);
}
.card-inspect-art .paused-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff2d95dd;
  border: 2px solid #0a0610;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 0 #0a0610;
}

.card-inspect-body {
  padding: 8px 12px 6px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}
.card-inspect-body .ci-name {
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 #0a0610, 0 0 12px rgba(255, 45, 149, 0.35);
  margin-bottom: 4px;
}
.card-inspect-body .ci-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.card-inspect-body .ci-stat {
  background: #12081cee;
  border: 2px solid #0a0610;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 0 0 1px #2de2ff55;
}
.card-inspect-body .ci-stat.hp { box-shadow: 0 0 0 1px #5dffb055; color: var(--ok); }
.card-inspect-body .ci-stat.atk { box-shadow: 0 0 0 1px #ff2d9555; color: var(--neon-pink); }
.card-inspect-body .ci-stat.spd { box-shadow: 0 0 0 1px #2de2ff55; color: var(--neon-cyan); }

.card-inspect-body .ci-section {
  margin-top: 4px;
  flex-shrink: 0;
}
.card-inspect-body .ci-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--neon-gold);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-transform: none;
}
.card-inspect-body .ci-skill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 6px;
}
.card-inspect-body .ci-skill-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(90deg, #241630, #1a0e28);
  border: 2px solid #0a0610;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.74rem;
  font-weight: 800;
  box-shadow: 0 0 0 1px #ffd36a66, 0 2px 0 #0a0610;
}
.card-inspect-body .ci-skill-pill .tag {
  font-size: 0.62rem;
  background: var(--neon-cyan);
  color: #0a0610;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 900;
}
.card-inspect-body .ci-skill-pill.ultimate .tag {
  background: var(--neon-pink);
  color: #fff;
}
.card-inspect-body .ci-equip-block {
  margin-top: 6px;
}
.card-inspect-body .ci-equip-block .ci-skill-effect {
  margin-top: 3px;
}
.card-inspect-body .ci-skill-effect {
  font-size: 0.72rem;
  color: var(--muted);
  padding: 0 4px 2px 8px;
  line-height: 1.35;
}
.card-inspect-body .ci-section:has(.ci-flavor) {
  flex: 0 0 auto;
  margin-top: 4px;
}
.card-inspect-body .ci-flavor {
  margin-top: 4px;
  background: #0d0814ee;
  border: 2px solid #0a0610;
  border-left: 4px solid var(--neon-pink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #e8d8f0;
  box-shadow: 0 0 0 1px #ff2d9544;
  text-align: left;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
  flex-shrink: 0;
}
.card-inspect-body .ci-hint {
  margin-top: 6px;
  margin-bottom: 2px;
  text-align: center;
  font-size: 0.64rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.card-inspect-body .ci-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}
.card-inspect-body .ci-tag {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  background: #1a1030;
  border: 1px solid #2de2ff66;
  color: var(--neon-cyan);
}


/* ---------- Long-press formal help tip ---------- */
.has-help {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.help-tip {
  position: absolute;
  z-index: 500; /* t320：蓋過扭蛋 UI */
  max-width: min(280px, 86%);
  padding: 10px 12px;
  background: linear-gradient(165deg, #2a1838f5 0%, #12081cf5 100%);
  border: 3px solid #0a0610;
  border-radius: 12px;
  box-shadow:
    0 0 0 2px var(--neon-gold),
    0 0 0 5px #0a0610,
    0 8px 24px rgba(0,0,0,0.55),
    0 0 18px rgba(255, 211, 106, 0.25);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  pointer-events: auto;
  animation: help-tip-in 0.14s ease-out;
  white-space: pre-wrap;
}
.help-tip.help-tip-rich {
  max-width: min(340px, 92%);
  white-space: normal;
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(70vh, 420px);
}
/* t361：長按卡牌嘅技能說明要夠大——接近全寬、字級同技能格一齊放大，
   唔好再係細細一個角仔（實測只得 344x197，佔屏高 25%） */
.help-tip.help-tip-rich.help-tip-top {
  left: 10px;
  right: 10px;
  width: auto;
  max-width: 720px;
  max-height: min(82vh, 640px);
  margin: 0 auto;
  padding: 12px 14px 10px;
  font-size: 0.86rem;
  line-height: 1.5;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.help-tip.help-tip-rich.help-tip-top .ht-rich {
  gap: 8px;
}
.help-tip.help-tip-rich.help-tip-top .ht-title {
  font-size: 1.16rem;
  line-height: 1.3;
}
.help-tip.help-tip-rich.help-tip-top .ht-line {
  font-size: 0.82rem;
  line-height: 1.5;
}
.help-tip.help-tip-rich.help-tip-top .ht-flavor {
  font-size: 0.79rem;
  line-height: 1.55;
  padding: 7px 9px;
  border-left-width: 4px;
}
/* 技能格放大：5 格一排唔夠位就自己換行，唔好硬縮 */
.help-tip.help-tip-rich.help-tip-top .bc-skills {
  flex-wrap: wrap;
  gap: 8px;
  overflow-x: visible;
  padding: 3px 0 5px;
}
/* t364：放大版裝備數值格 */
.help-tip.help-tip-rich.help-tip-top .ht-eq-stat {
  font-size: 0.95rem;
  padding: 4px 10px;
  gap: 4px;
}
.help-tip.help-tip-rich.help-tip-top .ht-eq-stat b { font-size: 0.8rem; }
.help-tip.help-tip-rich.help-tip-top .ht-eq-stat i { font-size: 0.72rem; }
.help-tip.help-tip-rich.help-tip-top .ht-eq-stats { gap: 6px 8px; }
.help-tip.help-tip-rich.help-tip-top .bc-skill.fd-skill {
  width: 86px;
  min-width: 86px;
  min-height: 86px;
  max-width: none;
  border-radius: 11px;
  border-width: 2.5px;
  gap: 2px;
  padding: 5px 3px 5px;
}
.help-tip.help-tip-rich.help-tip-top .fds-ico {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}
.help-tip.help-tip-rich.help-tip-top .fds-ico img {
  width: 40px;
  height: 40px;
  border-radius: 7px;
}
.help-tip.help-tip-rich.help-tip-top .fds-name {
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.help-tip.help-tip-rich.help-tip-top .fds-tag {
  font-size: 0.6rem;
}
.help-tip.help-tip-rich.help-tip-top::after {
  /* t361：放大後佔屏面積大，保留「點其他處關閉」提示 */
  display: block;
  content: "點其他位置關閉 · 20 秒自動收起";
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(45, 226, 255, 0.18);
  font-size: 0.7rem;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
}
.help-tip.help-tip-top {
  max-width: min(360px, 92%);
  transform: none;
}
/* t361：rich 版（長按卡牌）要壓過上面嘅 360px 上限 */
.help-tip.help-tip-top.help-tip-rich {
  left: 10px;
  right: 10px;
  width: auto;
  max-width: 720px;
  max-height: min(82vh, 640px);
  margin: 0 auto;
  transform: none;
}
.help-tip.help-tip-top::after {
  display: none; /* 頂端置中唔使指向箭咀 */
}
.help-tip .ht-rich {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.help-tip .ht-title {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--neon-gold);
  letter-spacing: 0.04em;
}
.help-tip .ht-line {
  font-size: 0.72rem;
  font-weight: 700;
  color: #e8d8f0;
  line-height: 1.35;
}
.help-tip .ht-flavor {
  font-size: 0.68rem;
  font-weight: 600;
  color: #c9b8d8;
  line-height: 1.4;
  padding: 4px 6px;
  border-left: 3px solid var(--neon-pink);
  background: #0d0814aa;
  border-radius: 0 6px 6px 0;
}
/* t364：裝備 rich 說明的星級行（亮／暗分開，比純文字 ★1／5 清楚） */
.help-tip .ht-eq-starrow {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--neon-gold);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(255, 211, 106, 0.55);
}
.help-tip .ht-eq-stardim { color: #3a2a48; text-shadow: none; }
.help-tip .ht-eq-starnum {
  font-size: 0.66rem;
  font-weight: 800;
  color: #c9b8d8;
  letter-spacing: 0;
  text-shadow: none;
}
/* t364：裝備 rich 說明的數值表（底數／升星分開顯示） */
.help-tip .ht-eq-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  padding: 4px 0 2px;
}
.help-tip .ht-eq-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 7px;
  border: 1.5px solid #0a0610;
  background: linear-gradient(180deg, #241630, #150c20);
  box-shadow: 0 0 0 1.5px rgba(255, 211, 106, 0.4);
  color: var(--neon-gold);
  font-weight: 900;
  font-size: 0.78rem;
  white-space: nowrap;
}
.help-tip .ht-eq-stat b {
  font-size: 0.66rem;
  color: #ffe8a0;
  font-weight: 900;
}
.help-tip .ht-eq-stat i {
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 700;
  color: #a99bb8;
}
.bc-skills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 4px;
  -webkit-overflow-scrolling: touch;
}
.bc-skills .bc-skill.fd-skill {
  flex: 0 0 auto;
  width: 58px;
  min-height: 58px;
}
.card-inspect-body .ci-skill .bc-skills {
  margin-bottom: 4px;
}
.card-inspect-body .ci-skill .bc-skills .bc-skill.fd-skill {
  width: 64px;
  min-height: 64px;
}
.help-tip::after {
  content: "正規說明 · 點其他處關閉";
  display: block;
  margin-top: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}
@keyframes help-tip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ---- Equip / 配技 ---- */
.equip-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.equip-tab {
  flex: 1;
  min-width: 0;
  padding: 8px 6px;
  border-radius: 10px;
  border: 2px solid #0a0610;
  background: linear-gradient(165deg, #2a1a3a, #140a1c);
  color: var(--text);
  font-weight: 800;
  font-size: 0.72rem;
  box-shadow: 0 0 0 1px var(--neon-pink);
  cursor: pointer;
}
.equip-tab small {
  display: block;
  font-weight: 600;
  opacity: 0.75;
  margin-top: 2px;
}
.equip-tab.on {
  background: linear-gradient(165deg, #3a2848, #1c1028);
  box-shadow: 0 0 0 2px var(--neon-gold), 0 0 12px rgba(255,211,106,0.35);
}
.equip-hero {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: rgba(12,6,20,0.72);
  box-shadow: 0 0 0 2px var(--neon-cyan);
}
.equip-hero img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #0a0610;
}
.equip-hero-meta .name { font-weight: 900; font-size: 0.95rem; }
.equip-hero-meta .stats { font-size: 0.72rem; color: var(--muted); margin: 2px 0; }
.equip-hero-meta .flavor-mini {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text);
  opacity: 0.85;
  margin-top: 4px;
  max-height: 2.7em;
  overflow: hidden;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mini-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  background: #1a0e28;
  border: 1px solid var(--neon-pink);
  color: var(--neon-pink);
}
.equip-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 8px;
  max-height: 340px;
  overflow: auto;
}
.equip-slot {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 2px 8px;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 2px solid #0a0610;
  background: linear-gradient(165deg, #24162f, #12081a);
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,80,180,0.35);
}
.equip-slot.filled {
  box-shadow: 0 0 0 2px var(--neon-gold);
}
.equip-slot.empty {
  opacity: 0.85;
  border-style: dashed;
}
.equip-slot .es-idx {
  grid-row: 1 / span 3;
  align-self: center;
  font-weight: 900;
  color: var(--neon-gold);
}
.equip-slot .es-name { font-weight: 800; font-size: 0.82rem; grid-column: 2; }
.equip-slot .es-meta { font-size: 0.65rem; color: var(--muted); grid-column: 2; }
.equip-slot .es-fx {
  grid-column: 2;
  font-size: 0.64rem;
  line-height: 1.3;
  color: #f0e6ff;
  opacity: 0.92;
  margin-top: 1px;
}
.equip-slot .es-x {
  grid-row: 1 / span 3;
  align-self: center;
  font-weight: 900;
  color: var(--neon-pink);
  padding: 0 4px;
}
.skill-picker {
  margin: 6px 0 10px;
  padding: 8px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: rgba(8,4,16,0.92);
  box-shadow: 0 0 0 2px var(--neon-cyan);
  max-height: 220px;
  display: flex;
  flex-direction: column;
}
.skill-picker .sp-title {
  font-weight: 900;
  font-size: 0.78rem;
  margin-bottom: 6px;
  color: var(--neon-gold);
}
.skill-picker .sp-list {
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.skill-pick-row {
  text-align: left;
  padding: 7px 8px;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #1a1024;
  color: var(--text);
  cursor: pointer;
}
.skill-pick-row:disabled,
.skill-pick-row.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.skill-pick-row .sp-name { font-weight: 800; font-size: 0.78rem; display: block; }
.skill-pick-row .sp-meta { font-size: 0.62rem; color: var(--muted); }
.skill-pick-row .sp-blurb {
  display: block;
  font-size: 0.62rem;
  opacity: 0.8;
  margin-top: 2px;
  line-height: 1.3;
  max-height: 2.6em;
  overflow: hidden;
}
.fighter-card .tag-row { margin-top: 4px; }
.event-grid {
  /* keep 2x2 feel when 4 cards */
  grid-template-columns: 1fr 1fr;
}


/* ---- Prep / 出戰前 (merged team+equip, reference layout) ---- */
.screen.bg-team.prep-fit,
.screen.has-bg.bg-team {
  /* tighten when prep is active — class set on root already bg-team */
}
.prep-hud {
  margin-bottom: 0;
  flex-shrink: 0;
}
.prep-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 6px;
  align-items: stretch;
}
.prep-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 0;
  background: linear-gradient(180deg, #1a1028ee, #100818f2);
  border: 3px solid #0a0610;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--neon-pink), 0 3px 0 #0a0610;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
}
.prep-left-head {
  font-weight: 900;
  font-size: 0.78rem;
  color: var(--neon-gold);
  text-align: center;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.prep-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #0a0610;
  background: #0a0612;
}
.prep-hero-art {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: 0.98;
}
.prep-hero-art.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  height: 100%;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--muted);
  background: repeating-linear-gradient(135deg, #140a1c 0 8px, #100818 8px 16px);
}
.prep-hero-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 6px;
  font-size: 0.62rem;
  font-weight: 800;
  background: linear-gradient(transparent, #0a0610ee);
  color: var(--text);
  z-index: 2;
  pointer-events: none;
}
/* 裝備槽疊喺主人像上（左右兩欄） */
.prep-gear-overlay {
  position: absolute;
  inset: 8px 4px 8px 4px;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: 6px 0;
  pointer-events: none;
  align-content: space-between;
}
.prep-gear-overlay .prep-gear-slot:nth-child(odd) { justify-self: start; }
.prep-gear-overlay .prep-gear-slot:nth-child(even) { justify-self: end; }
.prep-gear-grid {
  display: none; /* legacy */
}
.prep-gear-slot {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 2px 4px;
  width: 52px;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #12081cee;
  color: var(--text);
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(255,211,106,0.45), 0 2px 0 #0a0610;
  font-family: inherit;
  min-height: 0;
}
.prep-gear-slot.focus-slot {
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 10px rgba(45,226,255,0.45);
}
.prep-gear-slot.empty {
  border-style: dashed;
  opacity: 0.92;
}
.prep-gear-slot.locked .pg-name { color: var(--neon-cyan); }
.prep-gear-slot .pg-label {
  font-size: 0.5rem;
  font-weight: 900;
  color: var(--neon-gold);
  line-height: 1;
}
.prep-gear-slot .pg-art {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1.5px solid #0a0610;
  background: linear-gradient(165deg, #2a1a3a, #140a1c);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.prep-gear-slot .pg-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prep-gear-slot .pg-glyph {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--muted);
}
.prep-gear-slot .pg-name {
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prep-gear-slot .pg-hint,
.prep-gear-slot .pg-stars {
  font-size: 0.42rem;
  color: var(--neon-gold);
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prep-gear-slot .pg-empty-hint { color: var(--muted); }
.prep-change-gear {
  flex-shrink: 0;
  align-self: center;
  padding: 3px 10px !important;
  font-size: 0.62rem !important;
  font-weight: 800 !important;
  border-color: var(--neon-gold) !important;
  color: var(--neon-gold) !important;
}
.prep-six-attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  flex-shrink: 0;
  padding: 2px 0 0;
}
.prep-six-attrs .psa {
  font-size: 0.55rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
  background: #1a1028;
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(45,226,255,0.25);
}
.stars-row {
  color: var(--neon-gold);
  letter-spacing: -0.05em;
  font-size: 0.55rem;
  line-height: 1;
  font-weight: 900;
}
.stars-row .stars-dim { color: #3a2a4a; }
.prep-skill-rail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  flex-shrink: 0;
  max-height: 88px;
  overflow: hidden;
}
.prep-skill-chip {
  display: grid;
  grid-template-columns: 12px 16px 1fr;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 7px;
  border: 2px solid #0a0610;
  background: #1a1024;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
  box-shadow: 0 0 0 1px rgba(45,226,255,0.25);
}
.prep-skill-chip.filled { box-shadow: 0 0 0 1.5px var(--neon-gold); }
.prep-skill-chip.empty { border-style: dashed; opacity: 0.8; }
.prep-skill-chip.picking { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 10px rgba(45,226,255,0.4); }
.prep-skill-chip .psc-idx { font-size: 0.55rem; font-weight: 900; color: var(--neon-gold); }
.prep-skill-chip .psc-glyph {
  font-size: 0.55rem;
  font-weight: 900;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: #2a1a3a;
  border: 1px solid #0a0610;
  display: flex; align-items: center; justify-content: center;
}
.prep-skill-chip .psc-name {
  font-size: 0.52rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.prep-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  flex-shrink: 0;
}
.prep-stat {
  font-size: 0.55rem;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
  background: #1a1028;
  color: var(--text);
}
.prep-stat b { color: var(--neon-gold); margin-right: 2px; }
.prep-stat.tags { color: var(--neon-pink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.prep-stat.muted { color: var(--muted); }

.prep-team-bonus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  flex-shrink: 0;
  padding: 4px 6px;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #1a1028;
  box-shadow: 0 0 0 1px rgba(255,211,106,0.35);
}
.prep-team-bonus .ptb-label {
  font-size: 0.58rem;
  font-weight: 900;
  color: var(--neon-gold);
  letter-spacing: 0.04em;
}
.prep-team-bonus .ptb-vals {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--neon-cyan);
  line-height: 1.2;
}


.prep-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  min-height: 0;
}
.prep-panel {
  background: #12081cee;
  border: 3px solid #0a0610;
  border-radius: 12px;
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 3px 0 #0a0610;
  padding: 5px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: hidden;
}
.prep-panel.fighters-panel {
  flex: 0 1 52%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prep-panel.skills-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prep-panel-title {
  font-weight: 900;
  font-size: 0.72rem;
  color: var(--neon-gold);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
}
.prep-count {
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--neon-cyan);
}
.prep-panel-title .prep-change-btn {
  flex-shrink: 0;
  padding: 3px 8px !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  border-color: var(--neon-gold) !important;
  color: var(--neon-gold) !important;
}
.prep-f-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.prep-f-grid.team-only {
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 2px 1px 4px;
}
@media (min-width: 400px) {
  .prep-f-grid.team-only { grid-template-columns: repeat(4, 1fr); }
}
.prep-f-thumb .pf-stars {
  position: absolute;
  left: 2px; right: 2px;
  bottom: 22px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
}
.prep-f-thumb.add-slot,
.prep-s-thumb.add-slot {
  border-style: dashed;
  border-color: #4a3a5a;
  background: #0c0814aa;
}
.prep-f-grid::-webkit-scrollbar { display: block; width: 4px; height: 0; }
.prep-f-grid::-webkit-scrollbar-thumb { background: rgba(45,226,255,0.35); border-radius: 4px; }
.prep-f-thumb {
  position: relative;
  padding: 0;
  border: 2px solid #0a0610;
  border-radius: 8px;
  overflow: hidden;
  background: #0a0612;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
  box-shadow: 0 2px 0 #0a0610;
  min-width: 0;
  /* t382：aspect-ratio + min-height 會反推寬度（118px × 3/4 = 88.5px），
     喺窄欄（43–61px）就撐破 grid 儲存格、甚至漏出畫面右邊。
     max-width 鎖住唔可以超欄，高度由 min-height 決定。 */
  max-width: 100%;
  min-height: 96px;
}
.prep-f-grid.team-only .prep-f-thumb {
  min-height: 118px;
}
.prep-f-thumb.empty-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: #3a2a4a;
  background: #0c0814;
  min-height: 118px;
  /* t382：唔再用 aspect-ratio 反推寬度（見上）；寬度跟死儲存格 */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.prep-f-thumb .pf-plus {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--neon-cyan);
  line-height: 1;
}
.prep-f-thumb img,
.prep-f-thumb .pf-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 88px;
}
.prep-f-thumb .pf-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--muted);
  background: repeating-linear-gradient(135deg, #140a1c 0 8px, #100818 8px 16px);
}
.prep-f-thumb .pf-name {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 2px 4px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #12081c;
  border-top: 1px solid #0a0610;
  text-align: center;
}
.prep-f-thumb .pf-ord {
  position: absolute;
  top: 3px; left: 3px;
  z-index: 2;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--neon-pink);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #0a0610;
}
.prep-f-thumb.selected {
  border-color: var(--neon-pink);
  box-shadow: 0 0 0 1.5px var(--neon-gold), 0 0 8px rgba(255,45,149,0.45);
}
.prep-f-thumb.focus {
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 10px rgba(45,226,255,0.4);
}

.prep-f-thumb.dead,
.prep-s-thumb.burned {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.85);
  pointer-events: none;
}
.prep-f-thumb.dead {
  border-color: #5a3040;
  box-shadow: none;
}
.prep-f-thumb .pf-dead {
  position: absolute;
  top: 2px; right: 2px;
  z-index: 2;
  font-size: 0.4rem;
  font-weight: 900;
  line-height: 1;
  padding: 2px 3px;
  border-radius: 3px;
  background: #6a2030;
  color: #ffc8d0;
  border: 1px solid #0a0610;
}
.prep-s-thumb.burned .ps-badge {
  color: #ff8a9a;
}

.prep-f-slot,
.prep-s-slot {
  position: relative;
  min-width: 0;
  border-radius: 7px;
  border: 2px solid #0a0610;
  background: #0a0612;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 0 #0a0610;
  box-sizing: border-box;
}
.prep-f-slot.empty,
.prep-s-slot.empty {
  border-style: dashed;
  border-color: #3a2a4a;
  background: #0c0814;
  opacity: 0.72;
}
.prep-f-slot.locked,
.prep-s-slot.locked {
  border-style: dashed;
  border-color: #2a2035;
  background: #08060e;
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
  filter: grayscale(0.5);
}
.prep-f-slot .slot-lock,
.prep-s-slot .slot-lock,
.prep-f-slot .slot-empty,
.prep-s-slot .slot-empty {
  font-size: 0.48rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  padding: 2px;
}
.prep-s-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  align-content: start;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.prep-s-grid.life-only {
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}
.prep-s-grid.life-only .prep-s-thumb {
  min-height: 72px;
}
.prep-s-grid.life-only .prep-s-thumb .ps-name {
  font-size: 0.5rem;
}
.prep-s-grid.life-only .prep-s-thumb.empty-slot {
  border-style: dashed;
  border-color: #3a2a4a;
  opacity: 0.85;
}
.prep-s-thumb.life-selected {
  box-shadow: 0 0 0 1.5px var(--neon-cyan), 0 2px 0 #0a0610;
}
.prep-s-grid::-webkit-scrollbar { display: none; width: 0; height: 0; }
.prep-s-grid.life-only::-webkit-scrollbar { display: block; width: 4px; height: 0; }
.prep-s-grid.life-only::-webkit-scrollbar-thumb { background: rgba(45,226,255,0.35); border-radius: 4px; }
.prep-s-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0;
  border-radius: 7px;
  border: 2px solid #0a0610;
  background: linear-gradient(165deg, #24162f, #12081a);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  min-width: 0;
  box-shadow: 0 2px 0 #0a0610;
  overflow: hidden;
}
.prep-s-thumb .ps-art {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.prep-s-thumb .ps-art img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 5px 5px 0 0;
}
.prep-s-thumb .ps-art .ps-glyph {
  margin: 4px auto 2px;
}
.prep-s-thumb .ps-glyph {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid #0a0610;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 900;
  background: #2a1a3a;
  color: var(--neon-gold);
}
.prep-s-thumb .ps-glyph.kind-防護 { color: var(--neon-cyan); }
.prep-s-thumb .ps-glyph.kind-回復 { color: var(--ok); }
.prep-s-thumb .ps-glyph.kind-群攻 { color: var(--neon-pink); }
.prep-s-thumb .ps-glyph.kind-機動 { color: var(--neon-lime); }
.prep-s-thumb .ps-glyph.kind-常駐 { color: #c9a0ff; }
.prep-s-thumb .ps-name {
  font-size: 0.42rem;
  font-weight: 800;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 1px 2px 0;
  width: 100%;
  box-sizing: border-box;
  background: #12081c;
  border-top: 1px solid #0a0610;
}
.prep-s-thumb .ps-badge {
  font-size: 0.4rem;
  font-weight: 800;
  color: var(--muted);
  padding: 0 2px 2px;
}
.prep-s-thumb.mine {
  box-shadow: 0 0 0 1.5px var(--neon-gold), 0 2px 0 #0a0610;
}
.prep-s-thumb.taken,
.prep-s-thumb.mismatch,
.prep-s-thumb:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.prep-empty-hint {
  grid-column: 1 / -1;
  font-size: 0.62rem;
  color: var(--muted);
  text-align: center;
  padding: 8px 4px;
}
.prep-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  margin-top: 2px;
}
.prep-ready {
  width: 100%;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  padding: 12px 16px !important;
  letter-spacing: 0.12em;
  box-shadow: 0 0 0 2px #0a0610, 0 0 0 4px rgba(255,211,106,0.55), 0 4px 0 #0a0610 !important;
}
.prep-ready:disabled {
  opacity: 0.45;
  filter: grayscale(0.3);
}
.prep-cta-row {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.prep-toast {
  position: absolute;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%);
  z-index: 40;
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid #0a0610;
  background: #1a1028f2;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 0 0 2px var(--neon-cyan), 0 6px 20px rgba(0,0,0,0.45);
  pointer-events: none;
}

/* Result screen: keep CTAs inside phone, always tappable */
.screen.bg-result {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 10px;
}
.screen.bg-result .result-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  overflow: hidden;
}
.screen.bg-result .result-banner {
  margin: 8px 6px 4px;
  font-size: 1.05rem;
  padding: 8px 10px;
  flex-shrink: 0;
}
.screen.bg-result .result-art {
  width: 36%;
  max-height: 18vh;
  object-fit: cover;
  object-position: center top;
  margin: 0 auto 2px;
  flex-shrink: 1;
  min-height: 0;
}
.screen.bg-result .result-panel {
  padding: 8px 10px;
  font-size: 0.74rem;
  line-height: 1.45;
  flex-shrink: 0; /* 字唔好被裁 */
  overflow: visible;
}
.screen.bg-result .result-ev {
  margin-bottom: 4px;
  opacity: 0.85;
  font-weight: 800;
}
.screen.bg-result .result-cta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 4px 8px 2px;
  z-index: 5;
}
.screen.bg-result .result-bubble {
  width: 100%;
  max-width: 100%;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 12px;
  font-size: 0.78rem;
  box-sizing: border-box;
}
.screen.bg-result .result-btns {
  margin: 0;
  display: block; /* 唔用 1fr 1fr 半闊 */
  width: 100%;
}
.screen.bg-result .result-cta .btn.gold#btn-ding,
.screen.bg-result .result-cta #btn-ding {
  width: 100%;
  padding: 8px 14px !important;
  font-size: 0.88rem !important;
  min-height: 0 !important;
  box-shadow: 0 2px 0 #0a0610, 0 0 12px rgba(255, 211, 106, 0.35) !important;
}
.screen.bg-result .result-cta #btn-abandon {
  width: auto;
  align-self: center;
  max-width: 48%;
  margin: 0 auto;
  padding: 4px 10px !important;
  font-size: 0.68rem !important;
  min-height: 0 !important;
  border-width: 1.5px !important;
  box-shadow: none !important;
  opacity: 0.88;
}
.screen.bg-result .speed-strip { display: none; }

/* t293：結果 body 優先保 panel 完整；圖可再縮 */
.screen.bg-result .result-body {
  overflow: hidden;
}
.screen.bg-result .result-banner {
  margin: 4px 6px 2px;
  font-size: 0.95rem;
  padding: 6px 8px;
}

/* === life-flow: origin / event-confirm / deploy slots === */
.modal-mask {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 2, 14, 0.62);
  padding: 12px 10px 18px;
  box-sizing: border-box;
}
.modal-sheet {
  width: 100%;
  max-height: 78%;
  overflow: auto;
  border-radius: 16px 16px 14px 14px;
  border: 2.5px solid #0a0610;
  background: linear-gradient(180deg, #2a1838 0%, #160e22 100%);
  box-shadow: 0 0 0 2px rgba(255,211,106,0.35), 0 12px 28px rgba(0,0,0,0.55);
  padding: 14px 12px 12px;
  color: var(--text);
}
.modal-title {
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--neon-gold);
  text-align: center;
  margin-bottom: 8px;
}
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.modal-actions .btn { flex: 1; }

/* prep 揀卡／揀技／揀裝備 modal（參考樣式：搜尋＋選擇／取消） */
.prep-pick-sheet {
  position: relative;
  max-height: 86%;
  width: min(96vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px 12px;
  background: linear-gradient(180deg, #22162fee, #140a1cf5);
  border: 3px solid #8a8a9a;
  box-shadow: 0 0 0 2px #2a1a3a, 0 12px 40px #000a;
}
.prep-pick-x {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}
.prep-pick-x:hover { color: var(--neon-pink); }
.prep-pick-sheet .modal-title {
  text-align: center;
  font-weight: 900;
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.06em;
  padding-right: 24px;
}
.prep-pick-sheet .pick-count {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--neon-cyan);
  letter-spacing: 0.04em;
}
.pick-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pick-search {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #0a0612;
  color: var(--text);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.pick-search:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--neon-cyan);
}
.pick-filter-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #0a0610;
  background: linear-gradient(165deg, #ff4d7a, #c01848);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0610;
  font-family: inherit;
}
.prep-pick-sheet .pick-grid {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 180px;
  max-height: 52vh;
  align-content: start;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.prep-pick-sheet .pick-grid.cols4,
.prep-pick-sheet .pick-grid.fighters,
.prep-pick-sheet .pick-grid.skills,
.prep-pick-sheet .pick-grid.gear {
  grid-template-columns: repeat(4, 1fr);
}
.pick-card {
  position: relative;
  padding: 0 0 4px;
  border: 2px solid #0a0610;
  border-radius: 9px;
  overflow: hidden;
  background: #0a0612;
  color: inherit;
  font-family: inherit;
  box-shadow: 0 2px 0 #0a0610;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.pick-card .pick-art-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #12081a;
}
.pick-card .pick-art-wrap > img,
.pick-card .pick-art-wrap > .pf-placeholder,
.pick-card .pick-art-wrap .pick-art img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  display: block;
  min-height: 56px;
}
.pick-card .pick-art {
  display: block;
  width: 100%;
  overflow: hidden;
}
.pick-card .pick-art .ps-glyph,
.pick-card .pick-art-wrap .ps-glyph {
  margin: 12px auto;
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 1.5px solid #0a0610;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 900;
  background: #2a1a3a;
  color: var(--neon-gold);
}
.pick-card .pick-stars {
  display: block;
  text-align: center;
  padding: 2px 0 0;
  line-height: 1;
}
.pick-card .pick-name {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 2px 2px 3px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #fff;
}
.pick-card .pick-meta {
  display: block;
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  padding: 0 2px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick-card .pick-check {
  position: absolute;
  top: 4px; right: 4px;
  z-index: 2;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--neon-cyan);
  color: #0a0610;
  font-size: 0.7rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #0a0610;
  box-shadow: 0 0 6px rgba(45,226,255,0.55);
}
.pick-card .pick-act {
  display: block;
  margin: 2px 4px 4px;
  padding: 5px 0;
  border-radius: 6px;
  border: 2px solid #0a0610;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0610;
}
.pick-card .pick-act.select {
  background: linear-gradient(180deg, #3a6adf, #2548a8);
  color: #fff;
}
.pick-card .pick-act.cancel {
  background: linear-gradient(180deg, #7ef0ff, #3ad0e8);
  color: #0a2030;
}
.pick-card .pick-act:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pick-card.selected {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 2px rgba(45,226,255,0.65), 0 0 12px rgba(45,226,255,0.35);
}
.pick-card.dead,
.pick-card.burned {
  opacity: 0.42;
  filter: grayscale(0.8);
}
.prep-pick-sheet .modal-hint {
  margin: 0;
  text-align: center;
  font-size: 0.62rem;
  color: #ddd;
  opacity: 0.85;
}

.event-confirm-sheet .ec-name {
  font-weight: 900;
  font-size: 0.95rem;
  text-align: center;
  margin-bottom: 6px;
}
.event-confirm-sheet {
  max-height: 78vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-confirm-sheet .ec-desc {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--muted);
  margin: 0 4px 6px;
  text-align: center;
  flex-shrink: 0;
  max-height: 4.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.dlg-line {
  margin: 0 0 8px;
  text-align: left;
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 700;
}
.dlg-who {
  color: var(--neon-gold);
}
.pack-dialogue,
.event-confirm-sheet .ec-dialogue {
  overflow: auto;
  max-height: 32vh;
  padding-right: 4px;
}
.event-confirm-sheet .ec-dialogue {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 26vh;
}
.event-confirm-sheet .ec-enemy-row {
  flex-shrink: 0;
}
.event-confirm-sheet .modal-actions {
  flex-shrink: 0;
  margin-top: 6px;
}
.event-confirm-sheet .ec-enemy img {
  width: 52px;
  height: 52px;
}
.ec-enemy-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ec-enemy {
  width: 72px;
  text-align: center;
}
.ec-enemy img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  border: 2px solid #0a0610;
  box-shadow: 0 0 0 1.5px var(--neon-pink);
  display: block;
  margin: 0 auto 4px;
}
.ec-en-name {
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.2;
}

/* 身世四揀一：2×2 有圖（同 fate／event-card） */
.origin-grid.pick-4-grid,
.origin-grid.event-grid,
.event-grid.origin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 4px 2px 2px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: start;
}
.event-card.origin-card {
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.event-card.origin-card:active { transform: translateY(1px); }
/*
 * t386：身世卡唔再用綠／紅邊暗示「好／壞」。
 * 四張一律同一個中性邊框，玩家睇故事自己判斷。
 * （.kind-buff / .kind-debuff 的舊規則已移除；class 亦唔再輸出。）
 */
.event-card.origin-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 12px 12px 0 0;
}
/* legacy text-only classes kept harmless if any leftover */
.origin-name {
  font-weight: 900;
  font-size: 1rem;
  color: var(--neon-gold);
  margin-bottom: 4px;
}
.origin-blurb {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}

.deploy-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 6px 4px; /* 對齊 enemy-preview-row */
  align-items: stretch;
}
.deploy-slot {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-height: 0;
  border-radius: 12px;
  border: 3px dashed rgba(45,226,255,0.55);
  background: linear-gradient(180deg, #241630ee, #12081cee);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 0 1px #2de2ff44, 0 3px 0 #0a0610;
}
.deploy-slot.filled {
  border-style: solid;
  border-color: #0a0610;
  box-shadow: 0 0 0 1px #ffd36a66, 0 3px 0 #0a0610;
  background: linear-gradient(180deg, #241630ee, #12081cee);
  padding: 0;
}
.deploy-slot img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* 同敵方卡 */
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  border: none;
  border-bottom: 2px solid #0a0610;
  display: block;
  flex: 0 0 auto;
}
.deploy-slot .ds-plus {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 8px rgba(45,226,255,0.6);
  margin: auto;
  padding: 28% 0;
}
.deploy-slot .ds-hint {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--muted);
}
.deploy-slot .ds-name {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 2px 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.deploy-slot .ds-hp {
  position: relative;
  width: 90%;
  height: 10px;
  margin: 2px auto 6px;
  border-radius: 3px;
  background: #2a1018;
  border: 1px solid #0a0610;
  overflow: hidden;
  align-self: center;
}
.deploy-slot .ds-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e23a4a, #ff7a8a);
}
.deploy-slot .ds-hp b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 1px #000;
}
.deploy-slot .ds-x {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--neon-pink);
  opacity: 0.85;
}
#btn-fight:disabled,
.enc-fight:disabled {
  opacity: 0.42;
  filter: grayscale(0.35);
}

.encounter-stage {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
  margin: 2px 0 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* 玩家出戰卡唔使拉落先見 */
}
.encounter-stage .enemy-preview {
  margin: 0 6px;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.encounter-stage .enemy-preview-row {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  align-items: stretch;
}
.encounter-stage .enemy-preview-card {
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.encounter-stage .enemy-preview-card img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center top;
}
.encounter-stage .enemy-preview-card .ep-name,
.encounter-stage .enemy-preview-card .ep-hp {
  flex-shrink: 0;
}
.encounter-stage .enemy-preview.multi h2 { display: none; }
.encounter-stage .enemy-preview .stats { display: none; }
.encounter-stage .deploy-row {
  min-height: 0;
  height: 100%;
  margin: 0 6px;
  align-items: stretch;
}
.encounter-stage .deploy-slot {
  min-height: 0;
  height: 100%;
}
.encounter-stage .deploy-slot img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: unset;
  object-fit: cover;
  object-position: center top;
}
.encounter-stage .deploy-slot .ds-name,
.encounter-stage .deploy-slot .ds-hp,
.encounter-stage .deploy-slot .ds-plus {
  flex-shrink: 0;
}
.encounter-stage .deploy-slot .ds-plus {
  padding: 12% 0;
  font-size: 1.6rem;
}
.enc-fight {
  width: auto !important;
  max-width: 42%;
  min-width: 0;
  align-self: center;
  justify-self: center;
  margin: 2px auto;
  padding: 6px 16px !important;
  font-size: 0.82rem !important;
  font-weight: 900;
  letter-spacing: 0.06em;
  flex-shrink: 0;
  box-shadow: 0 2px 0 #0a0610, 0 0 12px rgba(255, 211, 106, 0.35) !important;
}
.enc-back {
  margin: 0 24% 2px;
  flex-shrink: 0;
  padding: 4px 8px !important;
  min-height: 0 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  opacity: 0.85;
  border-width: 1.5px !important;
  box-shadow: none !important;
  align-self: center;
  width: auto;
  max-width: 52%;
}
.enemy-preview-card .ep-hp {
  position: relative;
  width: 90%;
  height: 10px;
  margin: 2px auto 2px;
  border-radius: 3px;
  background: #2a1018;
  border: 1px solid #0a0610;
  overflow: hidden;
}
.enemy-preview-card .ep-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e23a4a, #ff7a8a);
}
.enemy-preview-card .ep-hp span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 900;
  color: #fff;
}

.ally-mask { z-index: 70; align-items: center; padding-bottom: 64px; }
.detail-mask { z-index: 80; align-items: center; padding: 6px 0 8px; }
.ally-sheet {
  border: 2.5px solid #0a0610;
  box-shadow: 0 0 0 2px rgba(45,226,255,0.55), 0 0 0 4px rgba(255,80,200,0.25), 0 14px 32px rgba(0,0,0,0.55);
  background: linear-gradient(180deg, #2a1840 0%, #120a1c 100%);
  max-height: 72%;
}
.ally-sheet .modal-title {
  color: var(--neon-gold);
  text-shadow: 0 0 10px rgba(255,211,106,0.35);
}
.modal-hint {
  text-align: center;
  font-size: 0.68rem;
  color: var(--muted);
  margin: 10px 4px 2px;
  font-weight: 700;
}
/* 進入人生後扭蛋入口鎖住（灰、刪除線、不可按） */
.chip.gacha-entry.locked {
  opacity: 0.45;
  filter: grayscale(0.7);
  cursor: not-allowed;
  text-decoration: line-through;
}
.chip.gacha-entry.locked:hover,
.chip.gacha-entry.locked:focus {
  filter: grayscale(0.7);
  box-shadow: none;
}
.global-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  z-index: 9000;
  max-width: 82%;
  text-align: center;
}

.deploy-hint {
  color: var(--neon-gold);
  font-size: 0.66rem;
  line-height: 1.45;
  padding: 5px 8px;
  border: 1px solid rgba(255, 211, 106, 0.5);
  border-radius: 8px;
  background: rgba(255, 211, 106, 0.08);
}
.ally-sheet .ally-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
  max-height: 46vh;
  overflow: auto;
}
.ally-pick {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #0a0610;
  border-radius: 12px;
  background: #1a1028;
  color: var(--text);
  padding: 6px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 0 0 1.5px rgba(45,226,255,0.35);
}
.ally-pick.cur { box-shadow: 0 0 0 2px var(--neon-gold); }
.ally-pick .ap-face {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.ally-pick img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  object-position: center top;
  border-radius: 8px;
  border: 1.5px solid #0a0610;
}
.ally-pick .ap-stars {
  font-size: 0.55rem;
  color: var(--neon-gold);
  letter-spacing: -1px;
}
.ally-pick .ap-name {
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ally-pick .ap-slang {
  font-size: 0.52rem;
  color: var(--neon-cyan);
  font-weight: 800;
}
.ally-pick .ap-act {
  appearance: none;
  -webkit-appearance: none;
  width: 88%;
  margin-top: 2px;
  border: 2px solid #0a0610;
  border-radius: 8px;
  padding: 4px 0;
  font-size: 0.72rem;
  font-weight: 900;
  background: linear-gradient(180deg, #2ec8e8, #1a8aaa);
  color: #061018;
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0610;
}
.ally-pick .ap-act.cancel {
  background: linear-gradient(180deg, #ff6a9a, #c03060);
  color: #fff;
}
.ally-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

/* 戰鬥卡詳情／裝技細窗 — t291：全內容同屏，唔使拉落先見技能 */
.fighter-detail {
  width: 94%;
  max-width: 360px;
  max-height: min(92vh, 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 2.5px solid #0a0610;
  box-shadow: 0 0 0 2px rgba(255,80,200,0.55), 0 0 0 4px rgba(45,226,255,0.3), 0 16px 36px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #321848 0%, #140a20 100%);
  padding: 8px 8px 6px;
  box-sizing: border-box;
}
.fd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.fd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  background: linear-gradient(135deg, #c040ff, #6020aa);
  color: #fff;
  border: 1.5px solid #0a0610;
}
.fd-title {
  font-weight: 900;
  font-size: 1rem;
  color: var(--neon-gold);
}
.fd-stars {
  width: 100%;
  font-size: 0.68rem;
  color: var(--neon-cyan);
  font-weight: 800;
}
.fd-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(96px, 0.85fr);
  gap: 6px;
  align-items: stretch;
  margin-bottom: 0;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 34vh;
}
.fd-art {
  width: 100%;
  height: 100%;
  max-height: 34vh;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  border: 2px solid #0a0610;
  box-shadow: 0 0 0 1.5px rgba(45,226,255,0.45);
  background: #0a0610;
}
.fd-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  align-content: start;
  min-height: 0;
  overflow: hidden;
}
.fd-stats span {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 0.66rem;
  font-weight: 800;
  background: rgba(0,0,0,0.28);
  border-radius: 6px;
  padding: 3px 6px;
  border: 1px solid rgba(255,211,106,0.2);
}
.fd-stats b { color: var(--neon-gold); font-weight: 900; }
.fd-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 2px;
  flex-shrink: 0;
  justify-content: flex-start;
}
.fd-skill {
  width: calc((100% - 16px) / 5);
  max-width: 58px;
  min-width: 48px;
  min-height: 52px;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #1a1028;
  box-shadow: 0 0 0 1.5px rgba(45,226,255,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px 1px 3px;
  color: var(--text);
  position: relative;
  box-sizing: border-box;
}
.fd-skill.fixed { box-shadow: 0 0 0 1.5px rgba(255,211,106,0.4); }
.fd-skill.innate { box-shadow: 0 0 0 1.5px rgba(255,80,200,0.45); }
.fd-skill.empty {
  appearance: none;
  cursor: pointer;
  border-style: dashed;
  border-color: rgba(45,226,255,0.55);
}
.fd-skill .fds-ico {
  font-size: 0.75rem;
  line-height: 1;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-skill .fds-ico img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 5px;
}
.fd-skill .fds-name {
  font-size: 0.5rem;
  font-weight: 800;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fd-skill .fds-tag {
  font-size: 0.45rem;
  color: var(--muted);
  font-weight: 800;
}
.fd-skill .fds-plus {
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
}
.fd-skill .fds-off {
  appearance: none;
  border: 0;
  background: rgba(255,80,120,0.85);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 900;
  border-radius: 4px;
  padding: 1px 4px;
  cursor: pointer;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.fd-pool-note {
  display: block;
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--neon-gold, #ffd36a);
  line-height: 1.2;
  margin-top: 2px;
}
.fd-skill-pick {
  margin: 2px 0 4px;
  padding: 6px;
  border-radius: 10px;
  border: 2px solid #0a0610;
  background: rgba(8,4,16,0.85);
  box-shadow: 0 0 0 1.5px rgba(45,226,255,0.35);
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.fd-sp-title {
  font-size: 0.75rem;
  font-weight: 900;
  color: var(--neon-gold);
  margin-bottom: 6px;
  text-align: center;
}
.fd-pool {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-height: 28vh;
  overflow: auto;
  margin-bottom: 6px;
}
.fd-pool-item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 8px;
  border: 1.5px solid #0a0610;
  background: #221430;
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}
.fd-pool-item.locked {
  opacity: 0.55;
  filter: grayscale(0.4);
  cursor: not-allowed;
  background: #18101f;
  color: #8a7a96;
  border-color: #2a2030;
  /* 保留 pointer-events，長按／data-help 仍可看說明 */
}
.fd-pool-item.locked .fd-pool-note {
  color: #b0a0c0;
}
.fd-sp-lock-hint {
  margin: 0 0 4px;
  flex-shrink: 0;
  color: #c9b8d8;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}
.fd-pool-item img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
}
.fd-pool-glyph {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a2048;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 900;
}
/* t292／t297：揀技另開大彈窗（蓋住出戰詳情；格大易撳） */
.skill-pick-mask {
  z-index: 95;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  background: rgba(6, 2, 14, 0.82);
}
.skill-pick-sheet {
  width: min(96vw, 420px);
  max-width: none;
  min-height: min(62vh, 520px);
  max-height: 86vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 2.5px solid #0a0610;
  box-shadow: 0 0 0 2px rgba(45,226,255,0.55), 0 0 0 4px rgba(255,80,200,0.28), 0 16px 36px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, #2a1840 0%, #120a1c 100%);
  padding: 14px 12px 12px;
  box-sizing: border-box;
}
.skill-pick-sheet .modal-title {
  margin-bottom: 0;
  flex-shrink: 0;
  font-size: 1.05rem;
}
.skill-pick-sheet .fd-sp-sub {
  margin: 0 0 2px;
  flex-shrink: 0;
  color: var(--neon-cyan);
  font-size: 0.78rem;
  font-weight: 800;
}
.skill-pick-sheet .fd-pool {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  margin-bottom: 4px;
  gap: 8px;
  align-content: start;
}
.skill-pick-sheet .fd-pool-item {
  min-height: 56px;
  padding: 8px 10px;
  gap: 8px;
  font-size: 0.82rem;
  border-radius: 10px;
  align-items: flex-start;
}
.skill-pick-sheet .fd-pool-item > span:not(.fd-pool-glyph):not(.fd-pool-note) {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.25;
}
.skill-pick-sheet .fd-pool-item {
  flex-wrap: wrap;
}
.skill-pick-sheet .fd-pool-item img,
.skill-pick-sheet .fd-pool-item .fd-pool-glyph {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.skill-pick-sheet .fd-pool-item .fd-pool-glyph {
  font-size: 0.85rem;
}
.skill-pick-sheet .fd-pool-item .fd-pool-note {
  flex: 1 1 100%;
  margin: 0 0 0 56px;
  font-size: 0.58rem;
}
.skill-pick-sheet #fd-sp-cancel {
  width: 100%;
  flex-shrink: 0;
  padding: 10px 12px !important;
  font-size: 0.9rem !important;
  min-height: 0 !important;
}
.skill-pick-sheet > .modal-hint:last-child {
  flex-shrink: 0;
  margin: 2px 2px 0;
  font-size: 0.62rem;
}
/* 揀技開緊時唔好透視到出戰詳情底嘅關閉提示 */
.detail-mask:has(+ .skill-pick-mask) .fighter-detail > .modal-hint,
.modal-mask.detail-mask:has(~ .skill-pick-mask) .fighter-detail > .modal-hint {
  visibility: hidden;
}

.fighter-detail #fd-undeploy {
  width: 100%;
  margin-top: 2px;
  flex-shrink: 0;
  padding: 8px 10px !important;
  font-size: 0.82rem !important;
  min-height: 0 !important;
}
.fighter-detail > .modal-hint {
  flex-shrink: 0;
  margin: 2px 2px 0;
  font-size: 0.58rem;
}
.fighter-detail #fd-undeploy:disabled {
  opacity: 0.45;
  filter: grayscale(0.3);
}
.btn.sm { padding: 6px 10px; font-size: 0.75rem; }

/* ---------- 人生六維 HUD + 故事底欄 7 掣 ---------- */
.life-hud {
  display: grid;
  /* t363：由「左／中／右三欄 + 獨立勢力行」改成兩行兩欄，99px → ~64px
     第一行：Lv+XP ｜ 六維
     第二行：勢力好感 ｜ 膠幣／金幣 */
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "left attrs"
    "factions right";
  align-items: center;
  gap: 2px 5px;
  padding: 3px 6px;
  background: linear-gradient(180deg, #241630f2, #140a20f2);
  border: 2.5px solid #0a0610;
  border-radius: 10px;
  box-shadow: 0 2px 0 #0a0610, inset 0 0 18px rgba(45,226,255,0.08);
  flex-shrink: 0;
}
.lh-left {
  grid-area: left;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.lh-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #0a0610;
  background: linear-gradient(145deg, #3a2a50, #1a1028);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  box-shadow: 0 0 0 1.5px var(--neon-cyan), 0 2px 0 #0a0610;
  flex-shrink: 0;
}
.lh-lv {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 48px;
}
.lh-lv-label {
  font-weight: 900;
  font-size: 0.66rem;
  color: var(--neon-gold);
  letter-spacing: 0.03em;
  line-height: 1;
}
.lh-xp {
  position: relative;
  height: 8px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
  background: #0a0610;
  overflow: hidden;
  min-width: 48px;
}
.lh-xp > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2de2ff, #ffd36a);
  border-radius: 999px;
}
.lh-xp > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.52rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 1px #000;
  pointer-events: none;
}
.lh-attrs {
  grid-area: attrs;
  display: flex;
  /* t363：六維預設排一行（6 × 2 位數約 187px < 218px）。
     後期屬性升到 3 位數（約 228px）會超出，所以容許換行，
     但**絕不可**裁切 —— 否則最後一格（⏳）會無聲消失。 */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1px 2px;
  min-width: 0;
}
.lh-attrs[hidden] { display: none !important; }

/* ===== t379：六維收摺開關 ===== */
.lh-attrs-wrap {
  grid-area: attrs;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex-wrap: wrap;
}
.lh-attrs-wrap .lh-attrs { grid-area: auto; flex: 1 1 auto; }
.lh-attrs-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
  background: #1a1028;
  color: #9fb4c8;
  font-family: inherit;
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(45, 226, 255, 0.25);
  transition: color 0.15s ease, box-shadow 0.15s ease;
}
.lh-attrs-toggle:hover,
.lh-attrs-toggle:focus-visible {
  color: var(--neon-cyan);
  box-shadow: 0 0 0 1px rgba(45, 226, 255, 0.65);
}
.lh-attrs-toggle.collapsed { color: var(--neon-gold); }
.lhat-ico { font-size: 0.62rem; line-height: 1; }
.lhat-txt { letter-spacing: 0.04em; }
.lhat-caret { font-size: 0.54rem; opacity: 0.85; }
.lh-a {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  /* t363：六維 chip 收細（2px 5px → 0 3px），6 粒才擠得入 218px 一行 */
  padding: 0 3px;
  border-radius: 6px;
  border: 1.5px solid #0a0610;
  background: #1a1028;
  font-weight: 900;
  font-size: 0.6rem;
  line-height: 1.5;
  color: #fff;
  box-shadow: 0 0 8px rgba(255,211,106,0.12);
  white-space: nowrap;
  flex: 0 0 auto;
  cursor: help;
}
.lh-right {
  grid-area: right;
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: 0;
  /* t363：同第一行（六維）右緣對齊成一條直線 */
  justify-self: stretch;
}
.lh-right .chip {
  font-size: 0.62rem;
  padding: 1px 6px;
  line-height: 1.15;
  white-space: nowrap;
}
/* t363：人生 HUD 內的扭蛋入口再收（原本 6px 12px／0.82rem，152px 寬推高第二行） */
.lh-right .chip.gacha-entry {
  font-size: 0.56rem;
  padding: 1px 6px;
  letter-spacing: 0;
  margin-top: 0;
}
.lh-factions {
  grid-area: factions;
  /* t363：由獨立整行改為第二行第一欄（20px → 16px），同貨幣同一行 */
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffb86b;
  text-align: left;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(40, 20, 8, 0.55);
  border: 1px solid rgba(255, 184, 107, 0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  justify-self: start;
  max-width: 100%;
}
.chip.gold {
  color: var(--neon-gold);
  border-color: #c9a227;
  box-shadow: 0 0 10px rgba(255,211,106,0.28);
}

.story-dock {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin: 8px -4px -2px;
  padding: 6px 4px 8px;
  background: linear-gradient(180deg, #1a1028ee, #0e0818f5);
  border-top: 3px solid #0a0610;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.45);
}
.sd-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #0a0610;
  border-radius: 10px;
  background: linear-gradient(180deg, #2a1a40, #181028);
  color: var(--text);
  font-weight: 800;
  font-size: 0.55rem;
  letter-spacing: -0.02em;
  padding: 4px 1px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  box-shadow: 0 2px 0 #0a0610;
  min-width: 0;
  line-height: 1.1;
}
.sd-btn .ico {
  font-size: 0.95rem;
  line-height: 1;
}
.sd-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 #0a0610;
}

/* 故事流畫面留底給 7 掣 */
.screen.bg-events,
.screen.bg-soft,
.screen.bg-encounter,
.screen.bg-result {
  padding-bottom: 78px;
}

/* 人生命運／遭遇四揀一：2×2 有圖，唔俾底欄遮 */
.pick-4-grid.event-grid,
.event-grid.fate-grid,
.fate-grid.pick-4-grid,
.event-grid.origin-grid,
.origin-grid.pick-4-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* t364：四格要佔滿介面中央 —— 用 1fr 1fr 兩行平分剩餘高度，
     之前 align-content: start 令卡片只佔 280px，網格 529px 白蝕 249px */
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  margin: 4px 2px 2px;
  flex: 1 1 auto;
  min-height: 0;
  align-content: stretch;
}
.event-card.fate-card {
  padding: 0;
}
/*
 * t386：命運卡唔再用綠／紅／金邊暗示「增益／減益／混合」。
 * 四張一律同色，玩家睇故事自己判斷。
 */
.event-card .label {
  padding: 4px 6px 10px;
  font-size: 0.68rem;
}
.pick-4-grid.event-grid .event-card img,
.event-grid.pick-4-grid .event-card img,
.event-grid.fate-grid .event-card img,
.fate-grid.pick-4-grid .event-card img,
.event-grid.origin-grid .event-card img,
.origin-grid.pick-4-grid .event-card img {
  /* t364：卡片變高，圖亦要跟住大（原本硬鎖 48px，浪費成張卡嘅高度） */
  max-height: none;
  aspect-ratio: 5 / 3;
  flex: 1 1 auto;
  min-height: 52px;
}
.pick-4-grid.event-grid .event-card .label,
.event-grid.pick-4-grid .event-card .label,
.event-grid.fate-grid .event-card .label,
.fate-grid.pick-4-grid .event-card .label,
.event-grid.origin-grid .event-card .label,
.origin-grid.pick-4-grid .event-card .label {
  flex: 1 1 auto;
  min-height: 0;
  /* t364：卡片撐滿高度，label 亦要食晒剩餘空間，唔好留白 */
  padding: 5px 7px 7px;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3px;
}
.pick-4-grid.event-grid .event-card,
.event-grid.pick-4-grid .event-card {
  overflow: hidden; /* radius */
  min-height: 0;
}
.pick-4-grid.event-grid .event-card .ev-card-blurb,
.event-grid.pick-4-grid .event-card .ev-card-blurb {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-shrink: 0;
}
.event-card .label .ev-name {
  /* t364：卡名加大（0.72rem → 0.88rem），四揀一清單一睇就知揀咩 */
  font-size: 0.88rem;
  line-height: 1.25;
  max-height: 2.5em;
  overflow: hidden;
}
.event-card .ev-rewards {
  margin-top: 2px;
  gap: 2px;
}
.event-card .ev-reward.fate-blurb-line {
  display: -webkit-box;
  /* t364：事件文字要加大 —— 原本 10px，且只 2 行就截斷 */
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  text-align: left;
  background: transparent;
  border: none;
  color: #efe6f8;
  padding: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  /* 四揀一卡片的說明係主角，要食到剩餘高度 */
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
/* t364：四揀一／身世卡片，說明區要撐滿 label 剩餘高度 */
.pick-4-grid .event-card .ev-rewards,
.fate-grid .event-card .ev-rewards,
.origin-grid .event-card .ev-rewards {
  flex: 1 1 auto;
  min-height: 0;
  align-content: flex-start;
}
.pick-4-grid .event-card .label,
.fate-grid .event-card .label,
.origin-grid .event-card .label {
  justify-content: flex-start;
}
/* t386：fate-tag（增益／減益／混合）已唔再輸出，舊色塊規則移除 */
.btn-abandon-compact {
  margin: 4px 6px 2px;
  padding: 6px 10px;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.screen.bg-events,
.screen.bg-soft,
.screen.bg-encounter,
.screen.bg-result {
  display: flex;
  flex-direction: column;
  padding-bottom: 4px !important;
  overflow: hidden;
}
.screen.bg-events .story-dock,
.screen.bg-soft .story-dock,
.screen.bg-encounter .story-dock,
.screen.bg-result .story-dock {
  position: relative;
  margin-top: auto;
  flex-shrink: 0;
  margin-bottom: 0;
}
.screen.bg-events .event-grid,
.screen.bg-soft .event-grid {
  flex: 1 1 auto;
  min-height: 0;
}

/* --- yearly event category pills / rewards (t203u) --- */
.event-card {
  position: relative;
}
.event-card .ev-cat-pill {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(20, 12, 28, 0.82);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.event-card .ev-cat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.event-card .ev-cat-pill.cat-trial { color: #ff6b8a; }
.event-card .ev-cat-pill.cat-adventure { color: #6bcbff; }
.event-card .ev-cat-pill.cat-swap { color: #c9a0ff; }
.event-card .ev-cat-pill.cat-special { color: #ffd76b; }
.event-card .ev-cat-pill.cat-sbattle { color: #ff4d4d; }
.event-card .ev-cat-pill.cat-main { color: #ffb347; }
.event-card .ev-cat-pill.cat-side { color: #7dffb3; }
.event-card .ev-cat-pill.cat-shop { color: #7dfff0; }
.event-card .ev-cat-pill.cat-default { color: #ddd; }
.event-card .ev-cat-pill.cat-minigame { color: #ff9ecd; }
.event-card .label .ev-name {
  font-weight: 800;
  /* t364：16px（1rem）—— 原本 13px，四揀一睇唔清卡名 */
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 2px;
}
.event-card .ev-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  justify-content: center;
}
.event-card .ev-reward {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255, 215, 100, 0.35);
  color: var(--neon-gold, #ffd76b);
}
.event-card .ev-fight-hint {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  background: rgba(180, 20, 40, 0.55);
  border: 1px solid rgba(255, 100, 120, 0.5);
  color: #ffb0bc;
}
/* Under gold chips: reward_blurb — muted but readable on dark purple (t275) */
.event-card .ev-card-blurb {
  margin-top: 4px;
  padding: 0 2px;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.3;
  color: #c9b8d8;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}
.pick-4-grid.event-grid .event-card .ev-rewards,
.event-grid.pick-4-grid .event-card .ev-rewards {
  flex-wrap: wrap;
  margin-top: 4px;
  gap: 3px;
}


/* —— 每日差事（missions） —— */
.dm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 8px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28, 18, 48, 0.92), rgba(14, 10, 28, 0.95));
  border: 1px solid rgba(255, 120, 200, 0.28);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35) inset;
}
.dm-row.ready {
  border-color: rgba(255, 210, 80, 0.55);
  box-shadow: 0 0 12px rgba(255, 190, 60, 0.22);
}
.dm-row.claimed {
  opacity: 0.55;
  filter: grayscale(0.35);
}
.dm-main { flex: 1; min-width: 0; }
.dm-name {
  font-weight: 700;
  font-size: 0.98rem;
  color: #ffe8f6;
  letter-spacing: 0.02em;
}
.dm-desc {
  margin-top: 2px;
  font-size: 0.78rem;
  color: rgba(220, 200, 230, 0.78);
  line-height: 1.35;
}
.dm-bar {
  margin-top: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.dm-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff4d8d, #ffd36b);
}
.dm-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 0.75rem;
}
.dm-prog { color: var(--neon-cyan, #6ef0ff); font-weight: 600; }
.dm-reward { color: var(--neon-gold, #ffd36b); }
.dm-act { flex-shrink: 0; }
.dm-act .btn[disabled] { opacity: 0.55; cursor: default; }
.btn.small.cyan {
  border-color: rgba(80, 220, 255, 0.55);
  color: #9ef6ff;
  background: rgba(20, 60, 80, 0.45);
}


/* ---------- Story packs（可選模組；唔取代人生骨架） ---------- */
.pack-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  padding: 2px 2px 8px;
  /* t377：淡出遮罩提示「仲有更多」（捲到底會自動消失） */
  background-image: linear-gradient(to top, rgba(8, 4, 16, 0.95), rgba(8, 4, 16, 0));
  background-repeat: no-repeat;
  background-size: 100% 46px;
  background-position: bottom;
  background-attachment: local;
}
/* t379：清單底部提示（有更多時顯示；hidden 屬性控制） */
.pack-list-more[hidden] { display: none !important; }
.pack-list-more {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--neon-cyan);
  letter-spacing: 0.06em;
  padding: 2px 0 0;
  animation: pack-more-bounce 1.4s ease-in-out infinite;
}
.pack-list-more b { color: var(--neon-gold); font-size: 0.72rem; }
@keyframes pack-more-bounce {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(2px); }
}
/* t359：橫屏列表只有 ~214px 高、一次見唔到兩張卡 —— 改兩欄，一屏睇多幾張 */
@media (orientation: landscape) and (max-width: 1024px) {
  .screen.bg-home[data-screen="storyPacks"] > .pack-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 8px;
    flex-direction: unset;
  }
  .screen.bg-home[data-screen="storyPacks"] .pack-card {
    grid-template-columns: 56px 1fr;
    gap: 7px;
    padding: 6px;
    border-radius: 11px;
    align-items: start;
  }
  .screen.bg-home[data-screen="storyPacks"] .pack-card img {
    width: 56px;
    height: 74px;
  }
  .screen.bg-home[data-screen="storyPacks"] .pack-name {
    font-size: 0.74rem;
    line-height: 1.2;
  }
  .screen.bg-home[data-screen="storyPacks"] .pack-blurb {
    font-size: 0.6rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .screen.bg-home[data-screen="storyPacks"] .pack-status {
    margin-top: 3px;
    padding: 1px 6px;
    font-size: 0.58rem;
    border-width: 1.5px;
  }
  .screen.bg-home[data-screen="storyPacks"] > .sub {
    font-size: 0.66rem;
  }
  .screen.bg-home[data-screen="storyPacks"] > .hud {
    margin-bottom: 0;
  }
  .screen.bg-home[data-screen="storyPacks"] > .ribbon {
    font-size: 0.72rem;
    padding: 2px 14px;
  }
  .screen.bg-home[data-screen="storyPacks"] > #btn-pack-back {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 0.72rem;
  }
}
.pack-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 8px;
  border-radius: 14px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #2a1838ee, #160c24ee);
  box-shadow: 0 3px 0 #0a0610, 0 0 14px rgba(45, 226, 255, 0.12);
  color: inherit;
  font: inherit;
  cursor: pointer;
  appearance: none;
}
.pack-card img {
  width: 72px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #0a0610;
}
.pack-card.active-pack {
  box-shadow: 0 0 0 2px var(--neon-pink), 0 3px 0 #0a0610, 0 0 18px rgba(255, 45, 149, 0.4);
}
.pack-card.coming {
  opacity: 0.72;
}
.pack-meta { min-width: 0; }
.pack-name {
  font-weight: 900;
  font-size: 1rem;
  color: #ffe9a8;
  letter-spacing: 0.04em;
}
.pack-blurb {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
.pack-status {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  border: 2px solid #0a0610;
}
.pack-status.ok {
  background: #1a3a38;
  color: var(--neon-cyan);
}
.pack-status.soon {
  background: #3a2030;
  color: #ffb0d0;
}
.pack-empty {
  text-align: center;
  line-height: 1.5;
}
.pack-empty-sub {
  color: var(--muted);
  font-size: 0.82rem;
}
.pack-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
/* t357：詳情頁子項唔可以被 flex 壓扁（封面圖曾縮成 8px、對白區變 0 高） */
.pack-detail > * {
  flex: 0 0 auto;
}
.pack-detail .pack-dialogue {
  overflow: auto;
  max-height: 32vh;
}
.pack-detail-art {
  align-self: center;
  max-width: 200px;
  width: 100%;
  flex: 0 0 auto;
}
.pack-detail-art img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.pack-detail-note {
  font-size: 0.82rem;
  line-height: 1.4;
}
.pack-ev-title {
  font-weight: 900;
  color: var(--neon-cyan);
  margin-top: 4px;
}
.pack-beat {
  margin: 0 0 8px;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 700;
}
.pack-ev-list {
  margin: 0;
  padding-left: 1.2em;
  color: #ffe9a8;
  font-weight: 700;
}
.pack-detail-actions {
  margin-top: 8px;
  margin-bottom: 8px;
}

/* t357：橫屏時詳情頁只得百幾 px 高，封面／場面／對白全部堆埋一齊會互相擠壓。
   改為左右兩欄：左邊封面（自己一欄），右邊場面／事件／對白順序流動並可滾動。 */
@media (orientation: landscape) and (max-width: 1024px) {
  .pack-detail {
    display: grid;
    grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
    gap: 5px 10px;
    align-content: start;
    overflow: auto;
    padding-right: 4px;
  }
  .pack-detail > * {
    grid-column: 2;
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
  }
  .pack-detail > .pack-detail-art {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    max-width: none;
    width: 100%;
  }
  .pack-detail-art img {
    max-height: 46vh;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  .pack-detail > .bubble {
    font-size: 0.76rem;
    padding: 5px 8px;
  }
  .pack-detail > .pack-detail-note {
    font-size: 0.64rem;
    padding: 4px 6px;
    line-height: 1.35;
  }
  .pack-detail > .pack-ev-title {
    font-size: 0.66rem;
    margin-top: 2px;
  }
  .pack-detail > .pack-beats,
  .pack-detail > .pack-ev-list,
  .pack-detail > .pack-dialogue {
    overflow: visible;
    max-height: none;
  }
  .pack-detail > .pack-beat {
    font-size: 0.68rem;
    line-height: 1.42;
    margin-bottom: 5px;
  }
  .pack-detail > .pack-dialogue .dlg-line {
    font-size: 0.68rem;
    line-height: 1.4;
  }
  /* 底部兩行大掣橫屏時合併收窄，讓出高度給詳情內容 */
  .btn-row.pack-detail-actions {
    gap: 6px;
    margin: 2px 0;
    flex: 0 0 auto;
  }
  .btn-row.pack-detail-actions .btn {
    min-height: 34px;
    padding: 4px 10px;
    font-size: 0.74rem;
  }
  #btn-pack-home {
    min-height: 30px;
    padding: 4px 10px;
    font-size: 0.72rem;
    align-self: center;
    flex: 0 0 auto;
    width: auto;
    max-width: 180px;
    margin: 0 auto;
  }
}


/* soft 結算：t261 CTA 貼底 + t294／t296 唔使下拉、獎勵字唔好被擋 */
.screen.bg-soft .soft-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden; /* 禁下拉 */
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
  justify-content: flex-start;
}
.screen.bg-soft .soft-art,
.screen.bg-soft .result-art.soft-art {
  max-height: 11vh;
  width: 34%;
  margin: 0 auto;
  object-fit: cover;
  border-radius: 10px;
  flex: 0 1 auto;
  min-height: 0;
}
.screen.bg-soft .soft-scroll > .bubble {
  flex: 0 1 auto;
  min-height: 0;
  max-width: 100%;
  margin: 0;
  padding: 6px 8px;
  font-size: 0.68rem;
  max-height: 12vh;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.screen.bg-soft .soft-scroll > .soft-panel {
  flex: 0 0 auto; /* 獎勵／入袋字優先全見 */
  padding: 8px 10px;
  font-size: 0.72rem;
  line-height: 1.35;
  overflow: visible;
  margin-top: auto;
}
/* t357：無戰但有對白的主線（例如「熄燈之前」）——結算頁保留對白，可滾動 */
.screen.bg-soft .soft-scroll > .soft-dialogue {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  max-height: 26vh;
  padding: 2px 6px 2px 2px;
  font-size: 0.7rem;
}
.screen.bg-soft .soft-scroll > .soft-dialogue .dlg-line {
  font-size: 0.7rem;
  line-height: 1.4;
  margin-bottom: 5px;
}
.screen.bg-soft .soft-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 8px 2px;
  background: transparent; /* 唔用遮罩擋 soft-panel */
  z-index: 5;
}
.screen.bg-soft .soft-cta .btn.gold {
  width: 100%;
  padding: 8px 14px !important;
  font-size: 0.88rem !important;
  min-height: 0 !important;
  box-shadow: 0 2px 0 #0a0610, 0 0 12px rgba(255, 211, 106, 0.35) !important;
}
.screen.bg-soft .soft-cta .btn-abandon-compact {
  width: auto;
  align-self: center;
  max-width: 48%;
  margin: 0 auto;
  padding: 4px 10px !important;
  font-size: 0.68rem !important;
}


/* 開始事件彈窗：敵方預覽長按睇內容（t262） */
.ec-enemy.has-help {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.ec-enemy.has-help img {
  pointer-events: none;
  -webkit-user-drag: none;
}


/* ---------- Album / 卡冊（t270 full-screen neon 港風） ---------- */
.screen.bg-home:has(.album-screen),
.screen:has(.album-screen) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 8px 8px 10px;
}

.album-screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.album-head {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* t363：標題列收細（34px 掣 → 28px；padding 2px → 0） */
  padding: 0 32px;
  min-height: 26px;
  flex-shrink: 0;
}
.album-title {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: var(--text);
  text-shadow: 0 0 12px rgba(45, 226, 255, 0.35);
}
.album-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2.5px solid #0a0610;
  background: linear-gradient(160deg, #3a2048, #1a0e28);
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255, 45, 149, 0.35), 0 2px 0 #0a0610;
}
.album-close:active { transform: translateY(-50%) scale(0.94); }

.album-tabs {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1fr 1fr;
  gap: 5px;
  flex-shrink: 0;
}
.album-tab {
  appearance: none;
  border: 2.5px solid #0a0610;
  border-radius: 7px;
  /* t363：tabs 收細（8px → 4px） */
  padding: 4px 3px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--muted);
  background: linear-gradient(180deg, #2a1a38 0%, #140a1c 100%);
  box-shadow: 0 2px 0 #0a0610, inset 0 1px 0 rgba(255,255,255,0.06);
  cursor: pointer;
}
.album-tab.on {
  color: var(--text);
  background: linear-gradient(180deg, #3a2a55 0%, #221436 100%);
  box-shadow:
    0 0 0 2px rgba(45, 226, 255, 0.55),
    0 2px 0 #0a0610,
    inset 0 0 12px rgba(45, 226, 255, 0.12);
}
.album-tab.coming {
  opacity: 0.45;
  font-size: 0.58rem;
  letter-spacing: 0;
  cursor: not-allowed;
  color: #7a6a88;
}

.album-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.album-search {
  flex: 1;
  min-width: 0;
  height: 30px;
  border-radius: 8px;
  border: 2.5px solid #0a0610;
  background: #0c0614;
  color: var(--text);
  padding: 0 10px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.18);
}
.album-search::placeholder { color: #6a5878; }
.album-filter-btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 9px;
  border-radius: 15px;
  border: 2.5px solid #0a0610;
  background: linear-gradient(160deg, #e83a3a, #a01828);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(232, 58, 58, 0.35), 0 2px 0 #0a0610;
  white-space: nowrap;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-grid-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 8px;
  scrollbar-width: thin;
}
.album-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 6px;
  align-content: start;
}
.album-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 28px 8px;
  color: var(--muted);
  font-weight: 800;
}

.album-cell {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  margin: 0;
  border: 2.5px solid #0a0610;
  border-radius: 10px;
  overflow: hidden;
  background: #0a0612;
  box-shadow: 0 2px 0 #0a0610;
  cursor: pointer;
  color: inherit;
  text-align: center;
  min-width: 0;
}
.album-cell.r-common { box-shadow: 0 0 0 2px rgba(45, 226, 255, 0.45), 0 2px 0 #0a0610; }
.album-cell.r-rare { box-shadow: 0 0 0 2px rgba(168, 85, 255, 0.55), 0 2px 0 #0a0610; }
.album-cell.r-epic { box-shadow: 0 0 0 2px rgba(255, 211, 106, 0.55), 0 2px 0 #0a0610; }
.album-cell.r-legend { box-shadow: 0 0 0 2px rgba(255, 45, 149, 0.6), 0 2px 0 #0a0610; }
.album-cell:active { transform: scale(0.97); }

.album-cell-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #1a1028;
  overflow: hidden;
}
.album-cell-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/*
 * t393：橫圖卡（art_landscape: true）
 * 卡冊格係 1:1，16:9 橫圖用 cover 會左右各裁約 22%（主體容易被切走）。
 * 改用 contain + 上下留底色，保留完整畫面。
 */
.album-cell-art img.art-landscape {
  object-fit: contain;
  object-position: center;
  background: #0f0818;
}
.album-cell-ph {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--muted);
  background: repeating-linear-gradient(135deg, #140a1c 0 8px, #100818 8px 16px);
}
.album-cell-art { position: relative; }

.album-cell-lv,
.ds-lv,
.pf-lv,
.ci-lv,
.fd-lv,
.album-lv-inline {
  font-weight: 900;
  color: #b8ff6a;
  text-shadow: 0 1px 2px #000, 0 0 6px rgba(184, 255, 106, 0.45);
  letter-spacing: 0.02em;
}
.album-cell-lv {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 2;
  font-size: 0.58rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(8, 4, 14, 0.78);
  border: 1px solid rgba(184, 255, 106, 0.35);
  pointer-events: none;
}
.ds-lv {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  font-size: 0.62rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(8, 4, 14, 0.8);
  border: 1px solid rgba(184, 255, 106, 0.4);
  pointer-events: none;
}
.pf-lv {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 3;
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(8, 4, 14, 0.8);
  border: 1px solid rgba(184, 255, 106, 0.35);
  pointer-events: none;
}
.fd-lv {
  font-size: 0.78rem;
  margin-left: 4px;
  color: #b8ff6a;
}
.album-lv-inline {
  font-size: 0.85em;
  margin-left: 4px;
}
.album-level-block {
  margin: 6px 10px 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(20, 12, 28, 0.9);
  border: 1px solid rgba(184, 255, 106, 0.28);
}
.album-level-title {
  font-size: 1rem;
  font-weight: 900;
  color: #b8ff6a;
}
.album-level-max {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 700;
}
.album-level-xp,
.album-level-bonus {
  margin: 4px 0 0;
  font-size: 0.72rem;
  color: #d8cce8;
  line-height: 1.35;
}
.fd-grow {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  color: #b8ff6a;
  font-weight: 800;
}
.ci-lv {
  font-size: 0.85em;
  margin-left: 4px;
}

.album-cell-stars {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  justify-content: center;
  gap: 1px;
  pointer-events: none;
  text-shadow: 0 1px 2px #000;
  z-index: 1;
}
.album-star {
  font-size: 0.58rem;
  color: #4a3a58;
  line-height: 1;
}
.album-star.on {
  color: #ffd36a;
  text-shadow: 0 0 6px rgba(255, 211, 106, 0.65);
}
.album-cell-name {
  display: block;
  padding: 4px 2px 5px;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #12081c;
  border-top: 1px solid #0a0610;
  color: var(--text);
}
.album-cell-name .album-qty {
  color: var(--neon-cyan);
  font-weight: 900;
}
.album-cell.unowned .album-cell-art img,
.album-cell.unowned .album-cell-art {
  filter: brightness(0.35) saturate(0.5);
}
.album-cell.unowned .album-cell-name {
  color: #ff4d5e;
}
.album-cell.unowned .album-cell-name .album-qty {
  color: #ff4d5e;
}

/* Detail modal */
.album-mask {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 2, 10, 0.72);
  padding: 18px 14px 22px;
  box-sizing: border-box;
}
.album-detail-sheet {
  position: relative;
  width: 100%;
  /*
   * t388：卡圖要「全圖」顯示，彈窗亦要盡量用盡屏幕寬度。
   * 原本 max-width: 340px，喺 390px 手機上左右各蝕 25px；
   * 放寬到 420px（窄於手機者仍取 100%），卡圖由 304px 闊變 328px。
   */
  max-width: 420px;
  max-height: 94%;
  overflow-y: auto;
  border-radius: 16px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #241830 0%, #12081c 55%, #0c0612 100%);
  box-shadow:
    0 0 0 2px rgba(255, 211, 106, 0.35),
    0 16px 40px rgba(0, 0, 0, 0.65);
  padding: 12px 12px 10px;
  color: var(--text);
  -webkit-overflow-scrolling: touch;
}
.album-detail-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #0a0610;
  background: #2a1838;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.album-detail-top {
  text-align: center;
  padding: 4px 28px 8px;
}
.album-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 2px solid #0a0610;
  font-size: 0.68rem;
  font-weight: 900;
  margin-bottom: 6px;
}
.album-badge-fighters {
  background: linear-gradient(160deg, #e83a3a, #8a1828);
  color: #fff;
}
.album-badge-skills {
  background: linear-gradient(160deg, #8b5cf6, #4c1d95);
  color: #fff;
}
.album-badge-gear {
  background: linear-gradient(160deg, #2de2ff, #0a6a88);
  color: #061018;
}
.album-detail-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
}
.album-detail-stars .album-star { font-size: 0.95rem; }
.album-detail-name {
  display: inline-block;
  margin: 0 auto;
  padding: 4px 16px;
  background: linear-gradient(90deg, transparent, #e83a3aee, transparent);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}
/*
 * t388：卡冊詳情要顯示「全圖」。
 *
 * 改前：容器鎖死 aspect-ratio 3/4 + img object-fit: cover
 *   → 實際素材比例五花八門（2:3 佔 248 張、3:4 佔 67 張、1:1 佔 28 張、3:2 橫圖 12 張），
 *     355 張之中有 288 張被裁（橫圖甚至裁走近半）。
 * 改後：容器唔再鎖比例；img 用 width:auto + max-width:100% + max-height，
 *   框自動貼合圖片真實比例 → 直圖、橫圖、方圖都完整顯示，冇裁切亦冇多餘留白。
 */
.album-detail-art {
  width: 100%;
  height: auto;
  max-height: min(68vh, 620px);
  margin: 8px auto 10px;
  border-radius: 12px;
  border: 2.5px solid #0a0610;
  overflow: hidden;
  background: #0f0818;
  box-shadow: 0 0 0 2px rgba(255, 45, 149, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-detail-art img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(68vh, 620px);
  object-fit: contain;
  object-position: center;
  display: block;
}
.album-detail-art.unowned img { filter: brightness(0.4) saturate(0.5); }
.album-detail-ph {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 160px;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--muted);
  background: #1a1028;
}
.album-detail-body {
  background: #1a1028cc;
  border: 2px solid #0a0610;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.album-detail-line {
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 4px;
  white-space: pre-wrap;
}
.album-detail-line:last-child { margin-bottom: 0; }
.album-starup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 6px 4px;
  border-top: 1px dashed #3a2a48;
  /*
   * t379：升星區改為 sticky 貼底（總導演：「卡詳情裁切」）。
   * 實測 sheet 高 735px、內容 779px → 溢出 44px，升星按鈕被推到視野外。
   * sticky 之後按鈕常駐底部，內容可以正常滾動。
   */
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(18, 8, 28, 0.86), #0c0612 55%);
  margin-top: 2px;
}
.album-starup-label {
  font-size: 0.85rem;
  font-weight: 900;
  color: var(--neon-gold);
}
.album-starup-label b { color: var(--neon-cyan); }
.album-detail-next {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}
.album-starup-btn {
  width: 100%;
  max-width: 220px;
  border: 2.5px solid #0a0610 !important;
  background: #3a3a48 !important;
  color: #9a9aaa !important;
  font-weight: 900 !important;
  box-shadow: 0 2px 0 #0a0610 !important;
  opacity: 0.75;
}
.album-starup-btn.ready {
  background: linear-gradient(180deg, #6dff9a, #1a9a4a) !important;
  color: #061410 !important;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(93, 255, 176, 0.35), 0 2px 0 #0a0610 !important;
}
.album-starup-btn:disabled { cursor: not-allowed; }
.album-detail-foot {
  margin-top: 10px;
  text-align: center;
  font-size: 0.62rem;
  color: #c8b8d8;
  font-weight: 700;
  letter-spacing: 0.02em;
}


/* 主頁置中＝已選故事包封面（t266） */
#home-pack-cover {
  cursor: pointer;
}
.home-pack-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  min-height: 180px;
  background: linear-gradient(160deg, #2a1840, #12081c);
  color: var(--neon-cyan);
  font-weight: 900;
  font-size: 1rem;
}



/* ===== t294：事件／戰鬥介面零下拉、字唔好被擋 ===== */
.screen.bg-events .sub {
  flex-shrink: 0;
  margin: 0 6px;
  font-size: 0.64rem;
  line-height: 1.25;
}
.screen.bg-events .ribbon,
.screen.bg-soft .ribbon,
.screen.bg-fate .ribbon,
.screen.bg-origin .ribbon {
  flex-shrink: 0;
}
.screen.bg-events .btn-abandon-compact,
.screen.bg-fate .btn-abandon-compact,
.screen.bg-origin .btn-abandon-compact {
  flex-shrink: 0;
}
.screen.bg-fate,
.screen.bg-origin {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 4px !important;
}
.screen.bg-fate .story-dock,
.screen.bg-origin .story-dock {
  position: relative;
  margin-top: auto;
  flex-shrink: 0;
}

/* ===== minigame：街機記憶破關（直向手機框） ===== */
/* EV39 UX：說明／計時列唔好左右裁；廢 line-clamp 同 overflow 衝突，改可換行全見 */
.screen.bg-soft .mg-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
  overflow: hidden; /* 禁整頁下拉；子項靠 wrap 唔好橫溢 */
  box-sizing: border-box;
}
.screen.bg-soft .mg-sub {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 2px;
  font-size: 0.66rem;
  line-height: 1.4;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: block;
  max-height: none;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
}
.mg-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--neon-cyan, #3dfff0);
  padding: 4px 8px;
  background: rgba(10, 6, 20, 0.55);
  border-radius: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  overflow: visible;
}
.mg-hud > span {
  flex: 0 1 auto;
  white-space: nowrap;
  min-width: 0;
}
.mg-msg {
  flex: 0 0 auto !important;
  align-self: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
}
.mg-pads {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 6px 4px 4px;
  align-content: center;
}
.mg-pad {
  aspect-ratio: 1.15 / 1;
  max-height: 18vh;
  border: 2px solid color-mix(in srgb, var(--mg-c, #fff) 70%, #000);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(20,10,30,0.9), rgba(8,4,16,0.95));
  box-shadow: 0 4px 0 #0a0610, 0 0 0 1px rgba(255,255,255,0.06);
  color: var(--mg-c, #fff);
  font-weight: 900;
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.mg-pad:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0a0610, 0 0 16px color-mix(in srgb, var(--mg-c, #fff) 55%, transparent);
}
.mg-pad.lit {
  filter: brightness(1.35);
  box-shadow: 0 4px 0 #0a0610, 0 0 22px color-mix(in srgb, var(--mg-c, #fff) 75%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--mg-c, #fff) 45%, #1a1020), rgba(8,4,16,0.9));
}
.mg-pad:disabled {
  opacity: 0.85;
  cursor: default;
}
.mg-pad-label {
  pointer-events: none;
  text-shadow: 0 0 10px color-mix(in srgb, var(--mg-c, #fff) 50%, transparent);
}
.mg-cta .btn.ghost {
  width: auto;
  align-self: center;
  max-width: 70%;
  margin: 0 auto;
  padding: 6px 12px !important;
  font-size: 0.72rem !important;
}

  /* ===== t378：記憶小遊戲・霓虹街機美化 ===== */
  .mg-arcade {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 10px 12px;
    border-radius: 16px;
    border: 2px solid #0a0610;
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(45, 226, 255, 0.12), transparent 60%),
      radial-gradient(100% 70% at 50% 100%, rgba(255, 45, 149, 0.14), transparent 62%),
      linear-gradient(180deg, #1a1028 0%, #0d0616 60%, #08040e 100%);
    box-shadow:
      0 0 0 2px rgba(255, 211, 106, 0.28),
      0 6px 0 #0a0610,
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 -28px 46px rgba(0, 0, 0, 0.55);
    overflow: hidden;
  }
  /* 掃描線（CRT 質感） */
  .mg-arcade::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035) 0 1px,
      transparent 1px 3px
    );
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 1;
  }
  /* 頂部霓虹光條 */
  .mg-arcade::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: -1px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--neon-cyan, #3dfff0), var(--neon-pink, #ff2d95), transparent);
    filter: blur(0.4px);
    opacity: 0.85;
    z-index: 2;
  }
  .mg-arcade > * { position: relative; z-index: 3; }

  /* 關卡指示燈 */
  .mg-rounds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
  }
  .mg-round-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: #1a1028;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .mg-round-dot.done {
    background: var(--neon-cyan, #3dfff0);
    border-color: var(--neon-cyan, #3dfff0);
    box-shadow: 0 0 10px rgba(45, 226, 255, 0.85);
  }
  .mg-round-dot.now {
    background: var(--neon-gold, #ffd36a);
    border-color: var(--neon-gold, #ffd36a);
    box-shadow: 0 0 12px rgba(255, 211, 106, 0.9);
    transform: scale(1.25);
    animation: mg-dot-pulse 1.1s ease-in-out infinite;
  }
  @keyframes mg-dot-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255, 211, 106, 0.7); }
    50% { box-shadow: 0 0 18px rgba(255, 211, 106, 1); }
  }

  /* 計時條 */
  .mg-timebar {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: #14091f;
    border: 1.5px solid #0a0610;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  }
  .mg-timebar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-cyan, #3dfff0), var(--neon-gold, #ffd36a));
    box-shadow: 0 0 10px rgba(45, 226, 255, 0.7);
    transition: width 0.35s linear, background 0.35s ease;
  }
  .mg-timebar.warn > i {
    background: linear-gradient(90deg, #ffb347, #ff4d6a);
    box-shadow: 0 0 12px rgba(255, 77, 106, 0.9);
  }

  /* 狀態顯示（取代舊 mg-hud） */
  .mg-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    color: #9fb4c8;
  }
  .mg-status b { color: var(--neon-cyan, #3dfff0); }
  .mg-status .mg-phase {
    color: var(--neon-gold, #ffd36a);
    text-shadow: 0 0 8px rgba(255, 211, 106, 0.55);
  }

  /* 訊息條 */
  .mg-arcade .mg-msg {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    border: 1.5px solid rgba(45, 226, 255, 0.35) !important;
    background: rgba(8, 4, 16, 0.72) !important;
    color: #d8ecff !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: inset 0 0 14px rgba(45, 226, 255, 0.08);
  }

  /* 鍵位區：圓形霓虹按鈕 */
  .mg-pads.mg-pads-neon {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 8px 4px 6px;
    align-content: center;
    justify-items: center;
    align-items: center;
  }
  .mg-pad-neon {
    position: relative;
    width: min(100%, 148px);
    aspect-ratio: 1 / 1;
    /* t378：改為跟格高自適應，唔再固定 15vh（細屏會縮得太細） */
    max-height: 100%;
    border-radius: 50%;
    border: 2.5px solid color-mix(in srgb, var(--mg-c, #fff) 62%, #000);
    background:
      radial-gradient(60% 50% at 50% 34%, color-mix(in srgb, var(--mg-c, #fff) 26%, transparent), transparent 72%),
      linear-gradient(160deg, rgba(26, 14, 38, 0.96), rgba(8, 4, 16, 0.98));
    color: color-mix(in srgb, var(--mg-c, #fff) 78%, #fff);
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow:
      0 5px 0 #0a0610,
      0 0 0 1px rgba(255, 255, 255, 0.05) inset,
      0 0 14px color-mix(in srgb, var(--mg-c, #fff) 22%, transparent);
    transition: transform 0.07s ease, box-shadow 0.14s ease, filter 0.14s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
  }
  .mg-pad-neon .mg-pad-label { text-shadow: 0 0 10px color-mix(in srgb, var(--mg-c, #fff) 55%, transparent); }
  .mg-pad-neon:not(:disabled):active {
    transform: translateY(3px) scale(0.97);
    box-shadow:
      0 2px 0 #0a0610,
      0 0 26px color-mix(in srgb, var(--mg-c, #fff) 65%, transparent);
  }
  .mg-pad-neon:disabled { cursor: default; }
  /* 亮起：整顆發光 + 波紋 */
  .mg-pad-neon.lit {
    background:
      radial-gradient(60% 55% at 50% 40%, #fff, color-mix(in srgb, var(--mg-c, #fff) 68%, #fff) 42%, color-mix(in srgb, var(--mg-c, #fff) 42%, #1a1020) 100%);
    color: #061018;
    filter: brightness(1.18) saturate(1.25);
    box-shadow:
      0 0 0 2px #fff inset,
      0 6px 0 #0a0610,
      0 0 38px color-mix(in srgb, var(--mg-c, #fff) 85%, transparent),
      0 0 66px color-mix(in srgb, var(--mg-c, #fff) 45%, transparent);
    transform: scale(1.05);
  }
  .mg-pad-neon.lit .mg-pad-label { color: #061018; text-shadow: none; }
  /* 亮起時的波紋擴散（記憶階段更易追） */
  .mg-pad-neon.lit::after {
    content: "";
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--mg-c, #fff) 80%, transparent);
    animation: mg-ripple 0.48s ease-out forwards;
    pointer-events: none;
  }
  @keyframes mg-ripple {
    0% { transform: scale(0.85); opacity: 0.9; }
    100% { transform: scale(1.42); opacity: 0; }
  }
  /* 命中提示 */
  .mg-pad-neon.hit {
    animation: mg-hit-flash 0.3s ease-out;
  }
  @keyframes mg-hit-flash {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mg-c, #fff) 90%, transparent), 0 6px 0 #0a0610; }
    100% { box-shadow: 0 0 0 16px color-mix(in srgb, var(--mg-c, #fff) 0%, transparent), 0 6px 0 #0a0610; }
  }
  /* 錯誤抖動 */
  .mg-pad-neon.miss { animation: mg-miss-shake 0.36s ease-in-out; }
  @keyframes mg-miss-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
  }

  /* 進度點（輸入時已按對幾多） */
  .mg-input-progress {
    display: flex;
    gap: 5px;
    justify-content: center;
    flex: 0 0 auto;
  }
  .mg-input-progress i {
    width: 16px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    transition: background 0.16s ease, box-shadow 0.16s ease;
  }
  .mg-input-progress i.on {
    background: var(--neon-cyan, #3dfff0);
    box-shadow: 0 0 8px rgba(45, 226, 255, 0.85);
  }

  /* ===== t379：輸入階段倒數（總導演：加長輸入窗或顯示剩餘時間） ===== */
  .mg-input-timer {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 8px;
    background: rgba(10, 6, 20, 0.72);
    border: 1.5px solid rgba(45, 226, 255, 0.35);
  }
  .mit-label {
    font-size: 0.58rem;
    font-weight: 900;
    color: #9fb4c8;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }
  .mit-bar {
    flex: 1 1 auto;
    min-width: 40px;
    height: 5px;
    border-radius: 999px;
    background: #14091f;
    border: 1px solid #0a0610;
    overflow: hidden;
  }
  .mit-bar > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neon-cyan, #3dfff0), var(--neon-gold, #ffd36a));
    transition: width 0.9s linear;
    box-shadow: 0 0 8px rgba(45, 226, 255, 0.6);
  }
  .mit-num {
    font-size: 0.62rem;
    font-weight: 900;
    color: var(--neon-cyan, #3dfff0);
    min-width: 22px;
    text-align: right;
    white-space: nowrap;
  }
  .mg-input-timer.urgent {
    border-color: rgba(255, 77, 106, 0.75);
    animation: mg-urgent-pulse 0.7s ease-in-out infinite;
  }
  .mg-input-timer.urgent .mit-bar > i {
    background: linear-gradient(90deg, #ffb347, #ff4d6a);
    box-shadow: 0 0 10px rgba(255, 77, 106, 0.9);
  }
  .mg-input-timer.urgent .mit-num { color: #ff8fa3; }
  @keyframes mg-urgent-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 106, 0); }
    50% { box-shadow: 0 0 0 3px rgba(255, 77, 106, 0.28); }
  }

  /* 結果橫幅 */
  .mg-result-banner {
    flex: 0 0 auto;
    text-align: center;
    padding: 8px 10px;
    border-radius: 10px;
    border: 2px solid #0a0610;
    font-weight: 900;
    letter-spacing: 0.08em;
  }
  .mg-result-banner.win {
    background: linear-gradient(180deg, rgba(45, 226, 255, 0.22), rgba(45, 226, 255, 0.06));
    color: var(--neon-cyan, #3dfff0);
    box-shadow: 0 0 0 2px rgba(45, 226, 255, 0.5), 0 0 22px rgba(45, 226, 255, 0.35);
    text-shadow: 0 0 12px rgba(45, 226, 255, 0.7);
  }
  .mg-result-banner.lose {
    background: linear-gradient(180deg, rgba(255, 77, 106, 0.2), rgba(255, 77, 106, 0.05));
    color: #ff8fa3;
    box-shadow: 0 0 0 2px rgba(255, 77, 106, 0.5), 0 0 22px rgba(255, 77, 106, 0.3);
  }

  /* ===== t379：事件結算結果條（半秒回饋） ===== */
  .soft-result-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 7px 10px;
    border-radius: 10px;
    border: 2px solid #0a0610;
    border-left: 4px solid var(--neon-lime, #b8ff4a);
    background: linear-gradient(90deg, rgba(184, 255, 74, 0.16), rgba(184, 255, 74, 0.03));
    box-shadow: 0 0 0 1.5px rgba(184, 255, 74, 0.35), 0 2px 0 #0a0610;
    flex: 0 0 auto;
    animation: srb-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .soft-result-bar.ending {
    border-left-color: var(--neon-gold, #ffd36a);
    background: linear-gradient(90deg, rgba(255, 211, 106, 0.18), rgba(255, 211, 106, 0.03));
    box-shadow: 0 0 0 1.5px rgba(255, 211, 106, 0.4), 0 2px 0 #0a0610;
  }
  .soft-result-bar.muted {
    border-left-color: #6a5878;
    background: rgba(30, 20, 40, 0.7);
    box-shadow: 0 2px 0 #0a0610;
  }
  .srb-ico {
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--neon-lime, #b8ff4a);
    text-shadow: 0 0 10px rgba(184, 255, 74, 0.8);
    flex: 0 0 auto;
  }
  .soft-result-bar.ending .srb-ico {
    color: var(--neon-gold, #ffd36a);
    text-shadow: 0 0 10px rgba(255, 211, 106, 0.8);
  }
  .srb-text {
    font-size: 0.72rem;
    font-weight: 900;
    color: #eaf6ff;
    letter-spacing: 0.02em;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .srb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-left: auto;
  }
  .srb-chip {
    font-size: 0.62rem;
    font-weight: 900;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1.5px solid #0a0610;
    background: #1a1028;
    color: #c9b8d8;
    white-space: nowrap;
    animation: srb-chip-pop 0.4s ease-out both;
  }
  .srb-chip.soul { color: var(--neon-gold, #ffd36a); box-shadow: 0 0 0 1px rgba(255,211,106,0.4); }
  .srb-chip.xp { color: var(--neon-cyan, #3dfff0); box-shadow: 0 0 0 1px rgba(45,226,255,0.4); }
  .srb-chip.gold { color: #ffc857; box-shadow: 0 0 0 1px rgba(255,200,87,0.4); }
  .srb-chip.attr { color: var(--neon-lime, #b8ff4a); }
  @keyframes srb-slide-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @keyframes srb-chip-pop {
    0% { opacity: 0; transform: scale(0.82); }
    60% { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
  }

/* --- faction side-quest choice (v0) --- */
.fac-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
}
.btn.fac-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: linear-gradient(160deg, rgba(60, 28, 12, 0.92), rgba(18, 10, 20, 0.95));
  border: 2px solid rgba(255, 184, 107, 0.55);
  color: #ffe6c2;
  border-radius: 10px;
  box-shadow: 0 0 14px rgba(255, 160, 60, 0.18);
}
.btn.fac-choice:active {
  transform: translateY(1px);
  filter: brightness(1.08);
}
.fac-choice-label {
  font-weight: 800;
  font-size: 0.95rem;
}
.fac-choice-hint {
  font-size: 0.72rem;
  opacity: 0.85;
  color: #ffd29a;
}
.fac-meta .muted {
  opacity: 0.8;
  font-size: 0.78rem;
}

.screen.bg-soft .soft-scroll > .fac-choices {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  justify-content: flex-start;
  margin-top: 4px;
}
.screen.bg-soft .soft-scroll > .soft-panel.fac-meta {
  margin-top: 0;
  flex: 0 0 auto;
}
.screen.bg-soft .btn.fac-choice {
  padding: 8px 10px;
}
.screen.bg-soft .fac-choice-label { font-size: 0.88rem; }
.screen.bg-soft .fac-choice-hint { font-size: 0.68rem; }



/* ===== t315 人生店鋪／交換／升星（四選一 2×2；禁下拉裁字） ===== */
  .event-card .ev-cat-pill.cat-trade { color: #ffc978; }
.event-card .ev-cat-pill.cat-starup { color: #ffe066; }
.event-card .ev-cat-pill.cat-gift { color: #8bffb0; }
.event-card .ev-cat-pill.cat-faction { color: #ffb07a; }

/* 送卡：免費三選一 */
.gift-banner {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #1a1020;
  background: linear-gradient(180deg, #b6ffcd, #59e08a);
  border: 2px solid #0a0610;
  border-radius: 8px;
  padding: 5px 8px;
  margin: 4px 0 8px;
  box-shadow: 0 0 12px rgba(89, 224, 138, 0.45);
}
.shop-card.gift-tag,
.gift-tag {
  color: #8bffb0 !important;
  font-weight: 800;
}
.shop-card.gift-card.picked {
  outline: 2px solid #8bffb0;
  box-shadow: 0 0 14px rgba(139, 255, 176, 0.5);
}
.shop-card.gift-card.dimmed {
  opacity: 0.42;
  filter: grayscale(0.5);
}
.gift-grid .shop-card {
  cursor: pointer;
}

.shop-wrap {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.shop-gold-banner {
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--neon-gold, #ffd36a);
  padding: 4px 8px;
  background: rgba(10, 6, 20, 0.55);
  border-radius: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.shop-gold-banner b { color: #ffe9a8; font-size: 0.95rem; }
.shop-sub {
  flex: 0 0 auto;
  margin: 0;
  padding: 0 2px;
  font-size: 0.66rem;
  line-height: 1.35;
  text-align: center;
  color: #c9b8d8;
  white-space: normal;
  overflow-wrap: anywhere;
}
.shop-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-content: start;
  /* t381：卡片一多（例如練功場列出全部已擁有戰鬥卡），隱含列會被壓縮——
     .shop-card 有 min-height:0 + overflow:hidden，令最小內容貢獻變 0，
     於是 50 張卡時每列淨返 27px，圖被裁成一條條橫切片（玩家報「全部亂了」）。
     鎖死列高跟內容走，超出就交畀 .shop-grid-scroll 垂直捲。 */
  grid-auto-rows: max-content;
  overflow: hidden;
}
.shop-grid.shop-grid-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop-grid.shop-grid-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.shop-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 2px solid rgba(125, 255, 240, 0.45);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(28, 18, 40, 0.95), rgba(10, 6, 18, 0.98));
  box-shadow: 0 3px 0 #0a0610, 0 0 10px rgba(125, 255, 240, 0.12);
  color: #f2e9ff;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.shop-card img {
  width: 100%;
  max-height: 52px;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  flex: 0 0 auto;
  background: #120a1a;
}
.shop-card-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: visible;
}
.shop-card-name {
  font-weight: 800;
  font-size: 0.7rem;
  line-height: 1.25;
  max-height: 2.5em;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.shop-card-rare {
  font-size: 0.58rem;
  color: #c9b8d8;
  overflow-wrap: anywhere;
}
.shop-price {
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--neon-gold, #ffd36a);
  overflow-wrap: anywhere;
}
.shop-price.trade-tag { color: #7dfff0; }
.shop-price.insufficient { color: #ff8aa8; opacity: 0.9; }
.shop-insuff {
  font-size: 0.55rem;
  color: #ff8aa8;
  font-weight: 700;
}
.shop-card.disabled,
.shop-card[aria-disabled="true"] {
  opacity: 0.55;
  filter: grayscale(0.35);
  border-color: rgba(160, 140, 180, 0.35);
  box-shadow: 0 2px 0 #0a0610;
}
.shop-card:not(.disabled):active {
  transform: translateY(1px);
  filter: brightness(1.08);
}
.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.72rem;
  color: #c9b8d8;
  padding: 16px 8px;
}
.screen.bg-soft .shop-wrap {
  flex: 1 1 auto;
  min-height: 0;
}
.screen.bg-soft .soft-cta #btn-shop-leave,
.screen.bg-soft .soft-cta #btn-trade-leave,
.screen.bg-soft .soft-cta #btn-starup-leave {
  width: auto;
  align-self: center;
  max-width: 70%;
  margin: 0 auto;
  padding: 6px 14px;
  font-size: 0.78rem;
}

/* ---------- 廟街霓虹扭蛋機（t318／t318b 華麗演出） ---------- */
.chip.gacha-entry {
  cursor: pointer;
  color: #fff;
  border: 2px solid #ffe08a;
  box-shadow:
    0 0 0 1px #0a0610,
    0 0 14px rgba(255,45,149,0.75),
    0 0 22px rgba(45,226,255,0.35);
  background: linear-gradient(180deg, #ff4db8 0%, #c2186e 48%, #6b3ad8 100%);
  font-weight: 900;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
  /* t363：扭蛋入口 chip 收細（6px 12px → 3px 9px） */
  padding: 3px 9px;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 0 #0a0610, 0 0 8px rgba(255,255,255,0.35);
  animation: gacha-entry-pulse 1.8s ease-in-out infinite;
}
.chip.gacha-entry:hover,
.chip.gacha-entry:focus {
  box-shadow:
    0 0 0 1px #fff8,
    0 0 20px rgba(255,45,149,0.95),
    0 0 28px rgba(255,211,106,0.55);
  filter: brightness(1.08);
}
/* t363：row 版面後唔再需要上邊距（原本 2px 會推高第二行） */
.lh-right .chip.gacha-entry { margin-top: 0; }
@keyframes gacha-entry-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #0a0610, 0 0 12px rgba(255,45,149,0.65), 0 0 18px rgba(45,226,255,0.3); }
  50% { box-shadow: 0 0 0 1px #ffe08a, 0 0 18px rgba(255,45,149,0.95), 0 0 28px rgba(255,211,106,0.45); }
}

.gacha-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 4px 6px 6px;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,45,149,0.18), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(45,226,255,0.12), transparent 50%),
    linear-gradient(180deg, #1a0c28 0%, #0c0614 100%);
}
.gacha-panel.phase-idle .gacha-machine,
.gacha-panel.phase-coin .gacha-machine,
.gacha-panel.phase-spin .gacha-machine {
  max-height: 70%;
  min-height: 300px;
  flex: 1 1 auto;
}
.gacha-panel.phase-idle .gacha-sub {
  font-size: 0.68rem;
}
.gacha-panel.phase-idle .gacha-pity {
  font-size: 0.72rem;
}
.gacha-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}
.gacha-soul-big {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(255,45,149,0.65);
}
.gacha-soul-big b {
  color: var(--neon-gold);
  font-size: 1.2em;
}
.gacha-soul-big .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--neon-pink);
  box-shadow: 0 0 10px var(--neon-pink);
}
.gacha-skip {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  min-height: 0 !important;
  white-space: nowrap;
}
.gacha-ribbon {
  background: linear-gradient(180deg, #ff2d95, #6b3ad8);
  box-shadow: 0 3px 0 #0a0610, 0 0 22px rgba(255,45,149,0.55);
  flex-shrink: 0;
}
.gacha-sub {
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.74rem;
  color: #c9b8d8;
  white-space: normal;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}
.gacha-pity {
  text-align: center;
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--neon-cyan);
  white-space: normal;
  flex-shrink: 0;
}
.gacha-pity b { color: var(--neon-gold); }

/* —— CSS 扭蛋機身 t320：高瘦經典街邊／遊戲廳扭蛋機 silhouette —— */
.gacha-machine {
  position: relative;
  width: min(248px, 74%);
  margin: 2px auto 4px;
  flex: 1 1 auto;
  min-height: 300px;
  max-height: 68%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  filter: drop-shadow(0 0 16px rgba(45,226,255,0.28));
  z-index: 1;
  transition: max-height 0.35s ease, opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}
.gacha-panel.phase-idle .gacha-machine,
.gacha-panel.phase-coin .gacha-machine,
.gacha-panel.phase-spin .gacha-machine,
.gacha-panel.phase-egg_out .gacha-machine {
  max-height: 70%;
  min-height: 300px;
}

/* —— t323：主視覺改 machine-ref.webp；純 CSS 示意機降級 —— */
.gacha-machine.gm-has-art {
  width: min(220px, 68%);
  min-height: 0;
  max-height: 72%;
  justify-content: flex-start;
  gap: 0;
  filter: drop-shadow(0 0 14px rgba(255,45,149,0.35));
}
.gacha-panel.phase-idle .gacha-machine.gm-has-art,
.gacha-panel.phase-coin .gacha-machine.gm-has-art,
.gacha-panel.phase-spin .gacha-machine.gm-has-art,
.gacha-panel.phase-egg_out .gacha-machine.gm-has-art {
  max-height: 72%;
  min-height: 0;
}
.gm-brand-tag {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  width: 100%;
  margin: 0 0 4px;
  padding: 3px 6px 4px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1.5px solid #0a0610;
  background: linear-gradient(180deg, #2a1438 0%, #14081c 100%);
  box-shadow:
    0 0 0 1px rgba(255,45,149,0.4),
    inset 0 0 10px rgba(255,45,149,0.25),
    0 0 10px rgba(45,226,255,0.15);
  flex-shrink: 0;
  z-index: 3;
  line-height: 1.05;
}
.gm-brand-tag .gm-neon-cn {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}
.gm-brand-tag .gm-neon-en {
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  margin-top: 0;
}
.gm-art-wrap {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  /* t358：主視覺曾經溢出容器 340px>201px，蓋住價錢牌與提示橫條 —— 一定要裁剪 */
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 2;
}
.gm-art {
  display: block;
  /* t358：以高度為準縮放，確保整部機（含底座）都入框，唔會被裁走底部 */
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
  user-select: none;
  pointer-events: none;
  /* 透明底 webp —— 唔加灰底 */
  background: transparent;
  transform-origin: 50% 55%;
}
/* t323：spin 對 img 輕微 rotate／shake，唔重畫機身 */
.gacha-panel.phase-spin .gm-art {
  animation: gm-art-shake 0.56s ease-in-out both;
}
@keyframes gm-art-shake {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  15% { transform: rotate(-2.2deg) translateX(-3px); }
  30% { transform: rotate(2.4deg) translateX(3px); }
  45% { transform: rotate(-1.8deg) translateX(-2px); }
  60% { transform: rotate(2deg) translateX(2px); }
  75% { transform: rotate(-1deg) translateX(-1px); }
  90% { transform: rotate(0.6deg) translateX(1px); }
}
.gacha-panel.phase-coin .gacha-machine {
  filter: drop-shadow(0 0 22px rgba(255, 211, 106, 0.9));
}
.gacha-panel.phase-spin .gm-art-wrap::after {
  content: "";
  position: absolute;
  inset: 6% 16% 18%;
  border-radius: 50%;
  border: 3px solid rgba(45, 226, 255, 0.75);
  box-shadow: 0 0 18px rgba(255, 45, 149, 0.65);
  animation: gm-ring 0.56s linear both;
  pointer-events: none;
}
@keyframes gm-ring {
  from { transform: rotate(0deg) scale(0.92); opacity: 0.2; }
  to { transform: rotate(180deg) scale(1.05); opacity: 1; }
}
.gacha-panel.phase-egg_out .gm-art {
  filter: drop-shadow(0 0 18px rgba(255, 45, 149, 0.85)) drop-shadow(0 0 10px rgba(255, 211, 106, 0.6));
}
.gm-price-board {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  flex-shrink: 0;
}
.gm-price-board span {
  flex: 1;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 800;
  color: #1a1020;
  background: linear-gradient(180deg, #ffe7a8, #ffd36a);
  border: 2px solid #0a0610;
  border-radius: 8px;
  padding: 4px 4px 3px;
  box-shadow: 0 2px 0 #0a0610;
}
.gm-price-board b {
  font-size: 0.95rem;
  color: #c81828;
}
.gacha-card { position: relative; }
.gacha-new-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 6;
  padding: 1px 5px 2px;
  border-radius: 4px;
  border: 2px solid #0a0610;
  background: #ff2d95;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  box-shadow: 0 0 8px rgba(255, 45, 149, 0.85);
  animation: gacha-new-pop 0.4s ease-out both;
}
@keyframes gacha-new-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.gacha-card-blurb {
  margin: 2px 0 0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  color: #f3e6ff;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gacha-results.result-grid .gacha-card-blurb {
  -webkit-line-clamp: 2;
  font-size: 0.55rem;
}
.gacha-panel.phase-egg_out .gm-art {
  filter: drop-shadow(0 0 12px rgba(255,45,149,0.55));
}
/* 純 CSS 示意機：隱藏／降級（.gm-dome 等） */
.gm-css-schematic,
.gacha-machine.gm-has-art .gm-dome,
.gacha-machine.gm-has-art .gm-lightbox,
.gacha-machine.gm-has-art .gm-cabinet,
.gacha-machine.gm-has-art .gm-base {
  display: none !important;
}
/* coin-fly 改相對圖中段 */
.gacha-machine.gm-has-art .gm-coin-fly {
  left: 28%;
  top: 58%;
}
.gacha-machine.gm-has-art .gm-hint-bar {
  width: 100%;
  margin-top: 6px;
}
/* t358：主視覺圖已經自帶「廟街扭蛋／NEON」燈箱 —— 頂部重複標籤唔再顯示，
   把高度讓返俾機身（之前機圖只餘 113×201） */
.gacha-machine.gm-has-art .gm-brand-tag {
  display: none;
}

/* t358：主視覺圖載入失敗 → 顯示純 CSS 示意機（唔好退成「廟」字圓圈佔位圖） */
.gacha-machine.gm-art-failed .gm-art-wrap {
  display: none !important;
}
.gacha-machine.gm-art-failed .gm-css-schematic {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  /* 降級示意機：允許內部輕微收縮，確保整部機（含底座）都見到 */
  overflow: hidden;
}
.gacha-machine.gm-art-failed .gm-cabinet {
  flex: 0 1 auto;
  min-height: 0;
}
.gacha-machine.gm-art-failed .gm-base {
  flex: 0 0 auto;
}
.gacha-machine.gm-art-failed .gm-dome,
.gacha-machine.gm-art-failed .gm-lightbox,
.gacha-machine.gm-art-failed .gm-cabinet,
.gacha-machine.gm-art-failed .gm-base {
  display: block !important;
}
/* 降級示意機要整部機都入框（之前罩佔滿高度，機櫃被裁走） */
.gacha-machine.gm-art-failed .gm-dome {
  flex: 0 0 auto;
  width: 56%;
  min-height: 0;
  aspect-ratio: 1 / 0.8;
}
.gacha-machine.gm-art-failed .gm-lightbox {
  width: 78%;
  padding: 3px 6px 4px;
  margin-top: -2px;
}
.gacha-machine.gm-art-failed .gm-lightbox-text .gm-neon-cn {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}
.gacha-machine.gm-art-failed .gm-lightbox-text .gm-neon-en {
  font-size: 0.44rem;
}
.gacha-machine.gm-art-failed .gm-cabinet {
  width: 72%;
  padding: 5px 5px 4px;
  gap: 4px;
}
.gacha-machine.gm-art-failed .gm-controls {
  min-height: 0;
  padding: 1px 3px 3px;
  gap: 4px;
}
.gacha-machine.gm-art-failed .gm-coin-slot {
  width: 22px;
  height: 22px;
  margin-top: 0;
}
.gacha-machine.gm-art-failed .gm-coin-slot em {
  width: 13px;
  height: 3px;
}
.gacha-machine.gm-art-failed .gm-coin-slot span {
  bottom: -9px;
  font-size: 0.4rem;
}
.gacha-machine.gm-art-failed .gm-knob {
  width: 36px;
  height: 36px;
  margin-right: 0;
  box-shadow:
    0 0 0 2.5px #0a0610,
    0 0 0 4px #6a7080,
    0 0 0 5.5px #0a0610,
    0 3px 0 #0a0610,
    0 0 12px rgba(255,211,106,0.5),
    inset 0 -4px 6px #0005,
    inset 0 3px 4px #fff6;
}
.gacha-machine.gm-art-failed .gm-knob-handle {
  width: 8px;
  height: 18px;
  transform-origin: center 14px;
}
.gacha-machine.gm-art-failed .gm-knob-grip {
  width: 11px;
  height: 7px;
  top: -4px;
}
.gacha-machine.gm-art-failed .gm-knob-hub {
  width: 10px;
  height: 10px;
}
.gacha-machine.gm-art-failed .gm-chute {
  height: 24px;
  margin: 2px 4px 0;
}
.gacha-machine.gm-art-failed .gm-chute-door {
  top: 4px;
  height: 9px;
}
.gacha-machine.gm-art-failed .gm-chute-label {
  top: -8px;
  font-size: 0.4rem;
  padding: 0 4px;
}
.gacha-machine.gm-art-failed .gm-chute-lip {
  bottom: 3px;
  height: 4px;
}
.gacha-machine.gm-art-failed .gm-base {
  width: 76%;
  height: 8px;
}

/* 大半球透明罩——機視覺主角 */
.gm-dome {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.02;
  flex: 0 0 auto;
  min-height: 150px;
  max-height: none;
  z-index: 3;
}
.gm-dome-glass {
  position: absolute;
  inset: 0 2% 10% 2%;
  border-radius: 50%;
  border: 3px solid #0a0610;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 88%, #241438 0%, #12081c 55%, #080410 100%),
    linear-gradient(180deg, #3a2060aa 0%, #100818 100%);
  box-shadow:
    inset 0 -14px 28px rgba(45,226,255,0.18),
    inset 0 16px 22px rgba(255,255,255,0.12),
    inset -10px 0 18px rgba(255,45,149,0.08),
    0 0 0 2px rgba(45,226,255,0.4),
    0 0 28px rgba(255,45,149,0.22);
}
.gm-dome-rim {
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 0;
  height: 16%;
  border-radius: 50% / 100%;
  border: 3px solid #0a0610;
  background:
    linear-gradient(180deg, #c0c8d4 0%, #7a8494 35%, #3a4050 70%, #1a1e28 100%);
  box-shadow:
    0 3px 0 #0a0610,
    inset 0 2px 4px rgba(255,255,255,0.45),
    inset 0 -2px 4px #0006;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12%;
}
.gm-rim-bolt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #eee, #666);
  border: 1px solid #0a0610;
  box-shadow: 0 0 3px #2de2ff55;
}
.gm-eggs-pile {
  position: absolute;
  inset: 12% 8% 18%;
}
.gm-ball {
  position: absolute;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid #0a0610;
  box-shadow: inset -3px -3px 0 #0005, inset 2px 2px 3px #fff5, 0 0 5px #fff2;
}
.gm-ball.b1 { left: 18%; top: 22%; width: 16px; height: 16px; background: radial-gradient(circle at 32% 28%, #fff9, #ff2d95 52%, #8a1048); }
.gm-ball.b2 { left: 32%; top: 18%; width: 17px; height: 17px; background: radial-gradient(circle at 32% 28%, #fff9, #2de2ff 52%, #0a6a80); }
.gm-ball.b3 { left: 48%; top: 20%; width: 18px; height: 18px; background: radial-gradient(circle at 32% 28%, #fff9, #ffd36a 52%, #a07820); }
.gm-ball.b4 { left: 62%; top: 17%; width: 19px; height: 19px; background: radial-gradient(circle at 32% 28%, #fff9, #c06bff 52%, #5a2088); }
.gm-ball.b5 { left: 76%; top: 22%; width: 15px; height: 15px; background: radial-gradient(circle at 32% 28%, #fff9, #b8ff4a 52%, #4a7810); }
.gm-ball.b6 { left: 10%; top: 34%; width: 16px; height: 16px; background: radial-gradient(circle at 32% 28%, #fff9, #ff6b4a 52%, #8a2810); }
.gm-ball.b7 { left: 24%; top: 32%; width: 21px; height: 21px; background: radial-gradient(circle at 32% 28%, #fff9, #4affc8 52%, #0a6850); }
.gm-ball.b8 { left: 38%; top: 30%; width: 18px; height: 18px; background: radial-gradient(circle at 32% 28%, #fff9, #ff2d95 52%, #8a1048); }
.gm-ball.b9 { left: 52%; top: 33%; width: 19px; height: 19px; background: radial-gradient(circle at 32% 28%, #fff9, #2de2ff 52%, #0a6a80); }
.gm-ball.b10 { left: 66%; top: 31%; width: 15px; height: 15px; background: radial-gradient(circle at 32% 28%, #fff9, #ffd36a 52%, #a07820); }
.gm-ball.b11 { left: 80%; top: 35%; width: 16px; height: 16px; background: radial-gradient(circle at 32% 28%, #fff9, #c06bff 52%, #5a2088); }
.gm-ball.b12 { left: 6%; top: 48%; width: 17px; height: 17px; background: radial-gradient(circle at 32% 28%, #fff9, #b8ff4a 52%, #4a7810); }
.gm-ball.b13 { left: 20%; top: 46%; width: 18px; height: 18px; background: radial-gradient(circle at 32% 28%, #fff9, #ff6b4a 52%, #8a2810); }
.gm-ball.b14 { left: 34%; top: 44%; width: 21px; height: 21px; background: radial-gradient(circle at 32% 28%, #fff9, #4affc8 52%, #0a6850); }
.gm-ball.b15 { left: 48%; top: 47%; width: 15px; height: 15px; background: radial-gradient(circle at 32% 28%, #fff9, #ff2d95 52%, #8a1048); }
.gm-ball.b16 { left: 62%; top: 45%; width: 16px; height: 16px; background: radial-gradient(circle at 32% 28%, #fff9, #2de2ff 52%, #0a6a80); }
.gm-ball.b17 { left: 76%; top: 48%; width: 17px; height: 17px; background: radial-gradient(circle at 32% 28%, #fff9, #ffd36a 52%, #a07820); }
.gm-ball.b18 { left: 12%; top: 60%; width: 18px; height: 18px; background: radial-gradient(circle at 32% 28%, #fff9, #c06bff 52%, #5a2088); }
.gm-ball.b19 { left: 26%; top: 58%; width: 19px; height: 19px; background: radial-gradient(circle at 32% 28%, #fff9, #b8ff4a 52%, #4a7810); }
.gm-ball.b20 { left: 40%; top: 56%; width: 15px; height: 15px; background: radial-gradient(circle at 32% 28%, #fff9, #ff6b4a 52%, #8a2810); }
.gm-ball.b21 { left: 54%; top: 59%; width: 21px; height: 21px; background: radial-gradient(circle at 32% 28%, #fff9, #4affc8 52%, #0a6850); }
.gm-ball.b22 { left: 68%; top: 57%; width: 17px; height: 17px; background: radial-gradient(circle at 32% 28%, #fff9, #ff2d95 52%, #8a1048); }
.gm-ball.b23 { left: 82%; top: 61%; width: 18px; height: 18px; background: radial-gradient(circle at 32% 28%, #fff9, #2de2ff 52%, #0a6a80); }
.gm-ball.b24 { left: 16%; top: 70%; width: 19px; height: 19px; background: radial-gradient(circle at 32% 28%, #fff9, #ffd36a 52%, #a07820); }
.gm-ball.b25 { left: 30%; top: 68%; width: 15px; height: 15px; background: radial-gradient(circle at 32% 28%, #fff9, #c06bff 52%, #5a2088); }
.gm-ball.b26 { left: 44%; top: 72%; width: 16px; height: 16px; background: radial-gradient(circle at 32% 28%, #fff9, #b8ff4a 52%, #4a7810); }
.gm-ball.b27 { left: 58%; top: 69%; width: 17px; height: 17px; background: radial-gradient(circle at 32% 28%, #fff9, #ff6b4a 52%, #8a2810); }
.gm-ball.b28 { left: 72%; top: 71%; width: 21px; height: 21px; background: radial-gradient(circle at 32% 28%, #fff9, #4affc8 52%, #0a6850); }
.gm-glass-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, #fff7 0%, transparent 28%, transparent 62%, #fff2 100%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 2;
}
.gm-glass-shine-2 {
  inset: 8% 55% 55% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #fffc 0%, transparent 70%);
  opacity: 0.55;
}

/* 中段品牌霓虹燈箱 */
.gm-lightbox {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 96%;
  margin-top: -4px;
  padding: 5px 8px 6px;
  border: 3px solid #0a0610;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #2a1438 0%, #14081c 100%);
  box-shadow:
    0 0 0 2px rgba(255,45,149,0.45),
    inset 0 0 16px rgba(255,45,149,0.35),
    0 0 18px rgba(45,226,255,0.2);
  z-index: 2;
  flex-shrink: 0;
}
.gm-lightbox-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}
.gm-neon-cn {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--neon-pink);
  text-shadow:
    0 0 6px rgba(255,45,149,0.95),
    0 0 14px rgba(255,45,149,0.65),
    0 0 2px #fff;
}
.gm-neon-en {
  font-style: normal;
  font-weight: 900;
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(45,226,255,0.9);
  margin-top: 1px;
}
.gm-bulb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-gold);
  box-shadow: 0 0 8px var(--neon-gold);
  animation: gm-bulb-blink 1.2s ease-in-out infinite;
  flex-shrink: 0;
}
.gm-lightbox .gm-bulb:nth-child(1) { background: var(--neon-pink); box-shadow: 0 0 7px var(--neon-pink); }
.gm-lightbox .gm-bulb:nth-child(2) { background: var(--neon-cyan); box-shadow: 0 0 7px var(--neon-cyan); animation-delay: 0.25s; }
.gm-lightbox .gm-bulb:nth-child(4) { background: var(--neon-cyan); box-shadow: 0 0 7px var(--neon-cyan); animation-delay: 0.45s; }
.gm-lightbox .gm-bulb:nth-child(5) { background: var(--neon-pink); box-shadow: 0 0 7px var(--neon-pink); animation-delay: 0.65s; }
@keyframes gm-bulb-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* 機櫃：窄身＋粗大轉扭＋金屬出蛋槽 */
.gm-cabinet {
  position: relative;
  width: 92%;
  margin-top: 0;
  border: 3px solid #0a0610;
  border-radius: 6px 6px 12px 12px;
  background:
    linear-gradient(180deg, #4a2a60 0%, #2a1838 40%, #160c22 100%);
  box-shadow:
    0 0 0 2px rgba(255,45,149,0.3),
    inset 0 0 22px rgba(45,226,255,0.1),
    inset 0 2px 0 rgba(255,255,255,0.08);
  padding: 10px 8px 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  z-index: 1;
  flex-shrink: 0;
}
.gm-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 6px 8px;
  min-height: 72px;
}
.gm-coin-slot {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 2.5px solid #0a0610;
  background: #0a0610;
  box-shadow: inset 0 0 12px #2de2ff66, 0 0 8px #2de2ff44;
  display: grid;
  place-items: center;
  position: relative;
  margin-top: 4px;
}
.gm-coin-slot em {
  display: block;
  width: 24px;
  height: 5px;
  border-radius: 2px;
  background: linear-gradient(90deg, #666, #ddd, #666);
  box-shadow: 0 0 4px #fff4;
}
.gm-coin-slot span {
  position: absolute;
  bottom: -14px;
  font-size: 0.55rem;
  font-weight: 800;
  color: #8878a0;
  letter-spacing: 0.1em;
}

/* 粗大金屬轉扭——實體感 */
.gm-knob {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: none;
  background:
    radial-gradient(circle at 35% 28%, #fff8 0%, #d8dce4 22%, #8a90a0 55%, #3a4048 85%);
  box-shadow:
    0 0 0 4px #0a0610,
    0 0 0 7px #6a7080,
    0 0 0 9px #0a0610,
    0 5px 0 #0a0610,
    0 0 22px rgba(255,211,106,0.55),
    inset 0 -6px 10px #0005,
    inset 0 4px 6px #fff6;
  display: grid;
  place-items: center;
  position: relative;
  margin-right: -2px;
  flex-shrink: 0;
}
.gm-knob-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 2px solid #0a061088;
  background: radial-gradient(circle at 40% 30%, #ffd36a88, transparent 60%);
  pointer-events: none;
}
.gm-knob-handle {
  position: absolute;
  width: 14px;
  height: 34px;
  border-radius: 5px;
  background: linear-gradient(90deg, #1a1e28, #e8ecf4 38%, #9aa0b0 70%, #3a4048);
  border: 2px solid #0a0610;
  box-shadow:
    0 2px 6px #000a,
    inset 1px 0 0 #fff6,
    inset -1px 0 0 #0004;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center 26px;
  z-index: 2;
}
.gm-knob-grip {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  border-radius: 6px;
  border: 2px solid #0a0610;
  background: linear-gradient(180deg, #ffd36a, #c49a20 55%, #6a5010);
  box-shadow: 0 0 6px rgba(255,211,106,0.7), inset 0 1px 0 #fff6;
}
.gm-knob {
  width: 74px;
  height: 74px;
}
.gm-knob-hub {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #0a0610;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd36a 45%, #8a6a10);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 0 8px rgba(255,211,106,0.7);
}

/* 明顯金屬出蛋槽／門 */
.gm-chute {
  height: 52px;
  margin: 4px 8px 0;
  border: 3px solid #0a0610;
  border-radius: 6px 6px 14px 14px;
  background:
    linear-gradient(180deg, #7a8490 0%, #3a4450 28%, #1a1e28 70%, #050608 100%);
  position: relative;
  box-shadow:
    inset 0 8px 14px #000c,
    inset 0 -2px 0 #fff1,
    0 0 0 2px #c0c8d466,
    0 4px 0 #0a0610,
    0 6px 10px #0008;
}
.gm-chute-frame {
  position: absolute;
  inset: 4px 8px 10px;
  border: 2px solid #0a061088;
  border-radius: 4px;
  pointer-events: none;
  box-shadow: inset 0 0 8px #0008;
}
.gm-chute-label {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #c9b8d8;
  background: #1a0c28;
  padding: 0 6px;
  border-radius: 3px;
  border: 1px solid #0a0610;
  z-index: 2;
}
.gm-chute-door {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8px;
  height: 18px;
  border-radius: 3px;
  border: 2px solid #0a0610;
  background:
    repeating-linear-gradient(90deg, #3a4048 0 4px, #2a3038 4px 8px);
  box-shadow: inset 0 2px 4px #fff2, inset 0 -2px 4px #0006;
}
.gm-chute-lip {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #8a90a0, #3a4048);
  border: 1px solid #0a0610;
}
.gm-chute-hole {
  position: absolute;
  left: 28%;
  right: 28%;
  bottom: 4px;
  height: 5px;
  border-radius: 3px;
  background: #000;
  box-shadow: inset 0 0 6px #2de2ff44;
}
.gm-base {
  width: 98%;
  height: 14px;
  margin-top: -1px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #5a6470, #2a3038 60%, #1a1e28);
  border: 2.5px solid #0a0610;
  border-top: none;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  box-sizing: border-box;
  flex-shrink: 0;
}
.gm-base span {
  width: 12px;
  height: 9px;
  margin-top: 2px;
  border-radius: 2px;
  background: #0a0610;
  box-shadow: 0 0 4px #2de2ff44;
}
.gm-coin-fly {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--neon-gold) 50%, #a07820);
  border: 1.5px solid #0a0610;
  opacity: 0;
  pointer-events: none;
  left: 22%;
  top: 68%;
  z-index: 5;
}

/* 階段機身動畫 */
.gacha-panel.phase-coin .gm-coin-fly {
  animation: gm-coin-drop 0.4s ease-in both;
}
@keyframes gm-coin-drop {
  0% { opacity: 1; transform: translate(0, -28px) scale(1.15); }
  70% { opacity: 1; transform: translate(4px, 18px) scale(0.9); }
  100% { opacity: 0; transform: translate(6px, 28px) scale(0.55); }
}
.gacha-panel.phase-spin .gm-knob {
  animation: gm-knob-spin 0.56s ease-in-out both;
}
.gacha-panel.phase-spin .gm-knob-handle {
  animation: gm-knob-handle 0.56s ease-in-out both;
}
.gacha-panel.phase-spin .gm-eggs-pile {
  animation: gm-eggs-shake 0.56s ease-in-out both;
}
@keyframes gm-knob-spin {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(120deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gm-knob-handle {
  0% { transform: translateX(-50%) rotate(0deg); }
  100% { transform: translateX(-50%) rotate(360deg); }
}
@keyframes gm-eggs-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px) rotate(-3deg); }
  75% { transform: translateX(4px) rotate(3deg); }
}
.gacha-panel.phase-egg_out .gm-chute {
  box-shadow: inset 0 6px 12px #000a, 0 0 18px rgba(255,45,149,0.65), 0 0 0 1px #ff2d95;
}
.gacha-panel.phase-egg_out .gm-chute-door {
  transform: translateY(4px);
  opacity: 0.85;
}

/* P0 UX：reveal／result 機身幾乎收起，結果層主導，卡完整可見（禁灰框裁切） */
.gacha-panel.phase-reveal .gacha-machine,
.gacha-panel.phase-result .gacha-machine {
  display: none; /* 結果時完全讓位給卡面，唔再留「微波爐」殘影 */
}
.gacha-panel.phase-reveal .gacha-sub,
.gacha-panel.phase-result .gacha-sub,
.gacha-panel.phase-reveal .gacha-pity,
.gacha-panel.phase-result .gacha-pity {
  display: none;
}
.gacha-panel.phase-reveal .gacha-ribbon,
.gacha-panel.phase-result .gacha-ribbon {
  font-size: 0.78rem;
  padding: 4px 8px;
  margin: 0;
  flex-shrink: 0;
}
.gacha-panel.phase-reveal .gacha-stage,
.gacha-panel.phase-result .gacha-stage {
  position: relative;
  z-index: 8;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* 單抽結果：卡面縮入可視區，立繪＋名＋稀有＋旗標一齊露 */
.gacha-panel.phase-reveal .gacha-results.single,
.gacha-panel.phase-result .gacha-results.single {
  max-width: 210px;
  margin: 0 auto;
  width: 100%;
  flex: 1 1 auto;
  align-content: center;
}
.gacha-panel.phase-reveal .gacha-card-big,
.gacha-panel.phase-result .gacha-card-big {
  max-width: 210px;
  max-height: 100%;
}
.gacha-panel.phase-reveal .gacha-card-art,
.gacha-panel.phase-result .gacha-card-art {
  aspect-ratio: 3 / 4;
  max-height: 240px;
  width: 100%;
}
.gacha-panel.phase-result .gacha-card-meta {
  flex-shrink: 0;
}

/* 舞台區 */
.gacha-stage {
  position: relative;
  flex: 0 1 auto;
  min-height: 48px;
  max-height: 28%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  transition: max-height 0.3s ease, flex-grow 0.3s ease;
}
.gacha-panel.phase-idle .gacha-stage,
.gacha-panel.phase-coin .gacha-stage,
.gacha-panel.phase-spin .gacha-stage {
  max-height: 28px;
  min-height: 0;
  flex: 0 0 auto;
}
.gacha-panel.phase-idle .gacha-stage:empty {
  display: none;
}
.gacha-panel.phase-egg_out .gacha-stage,
.gacha-panel.phase-crack .gacha-stage {
  max-height: 36%;
  flex: 1 1 auto;
  z-index: 6;
}
/* t322：機底提示——實色橫條＋高對比，唔半透明蓋旋鈕 */
.gm-hint-bar {
  width: 96%;
  margin: 6px auto 2px;
  padding: 8px 10px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  color: #fff8e8;
  background: linear-gradient(180deg, #2a1438 0%, #12081c 100%);
  border: 2.5px solid #0a0610;
  border-radius: 8px;
  box-shadow:
    0 3px 0 #0a0610,
    0 0 0 1px rgba(255,211,106,0.45),
    0 0 14px rgba(255,45,149,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
  text-shadow:
    0 1px 0 #0a0610,
    0 0 6px rgba(255,211,106,0.55),
    -1px -1px 0 #0a0610,
    1px 1px 0 #0a0610;
  flex-shrink: 0;
  z-index: 4;
  position: relative;
}
.gacha-panel.phase-reveal .gm-hint-bar,
.gacha-panel.phase-result .gm-hint-bar,
.gacha-panel.phase-egg_out .gm-hint-bar,
.gacha-panel.phase-crack .gm-hint-bar {
  display: none;
}
.gacha-idle-hint,
.gacha-phase-label {
  text-align: center;
  font-weight: 900;
  font-size: 0.9rem;
  color: #fff8e8;
  padding: 8px 10px;
  letter-spacing: 0.06em;
}
.gacha-idle-hint.solid,
.gacha-idle-hint {
  background: linear-gradient(180deg, #2a1438 0%, #12081c 100%);
  border: 2.5px solid #0a0610;
  border-radius: 8px;
  box-shadow: 0 3px 0 #0a0610, 0 0 0 1px rgba(255,211,106,0.4);
  text-shadow: 0 1px 0 #0a0610, -1px -1px 0 #0a0610, 1px 1px 0 #0a0610;
  color: #fff8e8;
  opacity: 1;
}
.gacha-phase-label {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(45,226,255,0.45);
  flex-shrink: 0;
}
.gacha-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex-shrink: 0;
  padding: 2px 0;
  position: relative;
  z-index: 9;
}
.gacha-actions.is-locked {
  opacity: 0.55;
  pointer-events: none;
}
/* 魂焰不足：視覺灰但保留 pointer-events → toast */
.gacha-actions .btn.is-broke,
.gacha-actions .btn.disabled:not(:disabled) {
  opacity: 0.5;
  filter: grayscale(0.4);
  pointer-events: auto !important;
  cursor: pointer;
}
.gacha-actions .btn:disabled {
  opacity: 0.45;
  filter: grayscale(0.35);
}
.gacha-pull-btn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 52px !important;
  font-size: 1rem !important;
  padding: 8px 6px !important;
  box-shadow: 0 3px 0 #0a0610, 0 0 16px rgba(45,226,255,0.35) !important;
}
.gacha-pull-btn.gold {
  box-shadow: 0 3px 0 #0a0610, 0 0 18px rgba(255,211,106,0.45) !important;
}
.gacha-pull-main {
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1.05em;
}
.gacha-pull-cost {
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.9;
}
.gacha-cta {
  display: flex;
  justify-content: center;
  padding: 2px 0 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 9;
}
.gacha-cta .btn {
  min-width: 160px;
  min-height: 40px;
  font-weight: 900;
  opacity: 1 !important;
  color: #fff !important;
  border-color: var(--neon-cyan, #2de2ff) !important;
  box-shadow: 0 0 12px rgba(45,226,255,0.35);
  pointer-events: auto !important;
}
.gacha-cta .btn:disabled {
  opacity: 1 !important;
  pointer-events: auto !important;
  filter: none !important;
}

.gacha-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  min-width: 0;
  align-content: start;
  padding: 2px 2px 8px;
  position: relative;
  z-index: 3;
}
.gacha-results.single {
  grid-template-columns: 1fr;
  max-width: 220px;
  margin: 0 auto;
}
.gacha-results.ten {
  grid-template-columns: 1fr 1fr;
}
.gacha-results.result-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 2px 0 4px;
}
.gacha-results.result-grid .gacha-card {
  font-size: 0.72rem;
}
.gacha-results.result-grid .gacha-card-art {
  aspect-ratio: 3 / 4;
  max-height: 78px;
}
.gacha-results.result-grid .gacha-card-name {
  font-size: 0.62rem;
  line-height: 1.15;
  max-height: 2.3em;
  overflow: hidden;
}
.gacha-results.result-grid .gacha-card-rare {
  font-size: 0.58rem;
}
.gacha-results.result-grid .gacha-card-flag {
  font-size: 0.55rem;
}
.gacha-results.result-grid .gacha-card-hint {
  display: none;
}
.gacha-panel.phase-result .gacha-results.result-grid {
  overflow: visible;
}
@media (max-width: 360px) {
  .gacha-results.result-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
  }
}
.gacha-panel.phase-reveal .gacha-results.single,
.gacha-panel.phase-result .gacha-results.single,
.gacha-panel.phase-result .gacha-results.result-grid:has(.gacha-card:only-child) {
  max-width: 240px;
}

/* 塑膠蛋＋裂開兩半 */
.gacha-egg {
  position: relative;
  aspect-ratio: 1;
  max-height: 120px;
  margin: 0 auto;
  width: min(100%, 110px);
  border-radius: 50% 50% 48% 48%;
  display: grid;
  place-items: center;
  animation: gacha-egg-drop 0.45s ease-out both;
  filter: drop-shadow(0 4px 10px rgba(45,226,255,0.4));
  overflow: visible;
}
.gacha-egg-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 52%;
  border: 3px solid #0a0610;
  pointer-events: none;
  z-index: 1;
  box-shadow: inset -3px -3px 0 #0003;
}
.gacha-egg-half.half-top {
  top: 0;
  border-radius: 50% 50% 8% 8% / 70% 70% 12% 12%;
  border-bottom-width: 1.5px;
  background: linear-gradient(160deg, #fff9, transparent 42%), radial-gradient(circle at 50% 40%, #ff8ec8, #ff2d95 55%, #8a1048);
  transform-origin: center bottom;
}
.gacha-egg-half.half-bot {
  bottom: 0;
  border-radius: 8% 8% 48% 48% / 12% 12% 70% 70%;
  border-top-width: 1.5px;
  background: linear-gradient(200deg, #fff5, transparent 35%), radial-gradient(circle at 50% 20%, #ff2d95, #8a1048 70%);
  transform-origin: center top;
}
.gacha-egg.egg-2 .half-top { background: linear-gradient(160deg, #fff9, transparent 42%), radial-gradient(circle at 50% 40%, #9af0ff, #2de2ff 55%, #0a6a80); }
.gacha-egg.egg-2 .half-bot { background: linear-gradient(200deg, #fff5, transparent 35%), radial-gradient(circle at 50% 20%, #2de2ff, #0a6a80 70%); }
.gacha-egg.egg-3 .half-top { background: linear-gradient(160deg, #fff9, transparent 42%), radial-gradient(circle at 50% 40%, #ffe9a8, #ffd36a 55%, #a07820); }
.gacha-egg.egg-3 .half-bot { background: linear-gradient(200deg, #fff5, transparent 35%), radial-gradient(circle at 50% 20%, #ffd36a, #a07820 70%); }
.gacha-egg.egg-4 .half-top { background: linear-gradient(160deg, #fff9, transparent 42%), radial-gradient(circle at 50% 40%, #d6b0ff, #c06bff 55%, #5a2088); }
.gacha-egg.egg-4 .half-bot { background: linear-gradient(200deg, #fff5, transparent 35%), radial-gradient(circle at 50% 20%, #c06bff, #5a2088 70%); }
.gacha-egg.egg-5 .half-top { background: linear-gradient(160deg, #fff9, transparent 42%), radial-gradient(circle at 50% 40%, #c8ff9a, #b8ff4a 55%, #4a7810); }
.gacha-egg.egg-5 .half-bot { background: linear-gradient(200deg, #fff5, transparent 35%), radial-gradient(circle at 50% 20%, #b8ff4a, #4a7810 70%); }
.gacha-egg-crack {
  position: absolute;
  inset: 18% 22%;
  z-index: 3;
  opacity: 0;
  background:
    linear-gradient(115deg, transparent 46%, #fff 48%, #0a0610 50%, transparent 52%),
    linear-gradient(70deg, transparent 48%, #fff9 50%, transparent 52%),
    linear-gradient(20deg, transparent 47%, #fff6 49%, transparent 51%);
  pointer-events: none;
}
.gacha-egg-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 65%);
}
.gacha-egg-shard {
  position: absolute;
  width: 8px;
  height: 10px;
  border-radius: 2px 40% 2px 40%;
  border: 1px solid #0a0610;
  background: linear-gradient(135deg, #fff8, #ff2d95);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  top: 42%;
  left: 48%;
}
.gacha-egg.egg-2 .gacha-egg-shard { background: linear-gradient(135deg, #fff8, #2de2ff); }
.gacha-egg.egg-3 .gacha-egg-shard { background: linear-gradient(135deg, #fff8, #ffd36a); }
.gacha-egg.egg-4 .gacha-egg-shard { background: linear-gradient(135deg, #fff8, #c06bff); }
.gacha-egg.egg-5 .gacha-egg-shard { background: linear-gradient(135deg, #fff8, #b8ff4a); }

.gacha-results.cracking .gacha-egg {
  animation: gacha-egg-shake 0.42s ease-in-out both;
}
.gacha-results.cracking .gacha-egg-crack {
  opacity: 1;
  animation: gacha-crack-line 0.42s ease-out both;
}
.gacha-results.cracking .gacha-egg-glow {
  opacity: 1;
  animation: gacha-egg-glow-pulse 0.42s ease-out both;
}
.gacha-results.cracking .half-top {
  animation: gacha-half-top 0.42s ease-in both;
}
.gacha-results.cracking .half-bot {
  animation: gacha-half-bot 0.42s ease-in both;
}
.gacha-results.cracking .gacha-egg-shard.s1 { animation: gacha-shard-fly 0.42s ease-out both; --dx: -28px; --dy: -22px; --rot: -40deg; }
.gacha-results.cracking .gacha-egg-shard.s2 { animation: gacha-shard-fly 0.42s ease-out 0.04s both; --dx: 30px; --dy: -18px; --rot: 50deg; }
.gacha-results.cracking .gacha-egg-shard.s3 { animation: gacha-shard-fly 0.42s ease-out 0.06s both; --dx: -18px; --dy: 24px; --rot: 25deg; }
.gacha-results.cracking .gacha-egg-shard.s4 { animation: gacha-shard-fly 0.42s ease-out 0.08s both; --dx: 22px; --dy: 20px; --rot: -30deg; }

@keyframes gacha-egg-drop {
  0% { transform: translateY(-28px) scale(0.55); opacity: 0; }
  70% { transform: translateY(4px) scale(1.08); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes gacha-egg-shake {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20% { transform: scale(1.06) rotate(-5deg); }
  40% { transform: scale(0.97) rotate(5deg); }
  60% { transform: scale(1.1) rotate(-4deg); }
  80% { transform: scale(1.02) rotate(3deg); }
}
@keyframes gacha-half-top {
  0% { transform: translateY(0) rotate(0deg); }
  55% { transform: translateY(-4px) rotate(-6deg); }
  100% { transform: translate(-10px, -22px) rotate(-28deg); opacity: 0.85; }
}
@keyframes gacha-half-bot {
  0% { transform: translateY(0) rotate(0deg); }
  55% { transform: translateY(4px) rotate(6deg); }
  100% { transform: translate(10px, 20px) rotate(24deg); opacity: 0.85; }
}
@keyframes gacha-crack-line {
  0% { opacity: 0; transform: scaleY(0.15); }
  35% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0.7; }
}
@keyframes gacha-egg-glow-pulse {
  0% { opacity: 0; transform: scale(0.6); }
  40% { opacity: 0.9; transform: scale(1.1); }
  100% { opacity: 0.35; transform: scale(1.25); }
}
@keyframes gacha-shard-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.9); }
}
.gacha-egg-label {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 0.72rem;
  color: #fff;
  text-shadow: 0 1px 2px #000, 0 0 8px #0008;
  letter-spacing: 0.12em;
}
.gacha-results.eggs .gacha-egg:nth-child(1) { animation-delay: 0.00s; }
.gacha-results.eggs .gacha-egg:nth-child(2) { animation-delay: 0.05s; }
.gacha-results.eggs .gacha-egg:nth-child(3) { animation-delay: 0.10s; }
.gacha-results.eggs .gacha-egg:nth-child(4) { animation-delay: 0.15s; }
.gacha-results.eggs .gacha-egg:nth-child(5) { animation-delay: 0.20s; }
.gacha-results.eggs .gacha-egg:nth-child(6) { animation-delay: 0.25s; }
.gacha-results.eggs .gacha-egg:nth-child(7) { animation-delay: 0.30s; }
.gacha-results.eggs .gacha-egg:nth-child(8) { animation-delay: 0.35s; }
.gacha-results.eggs .gacha-egg:nth-child(9) { animation-delay: 0.40s; }
.gacha-results.eggs .gacha-egg:nth-child(10) { animation-delay: 0.45s; }

/* 開蛋卡面 */
.gacha-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  border-radius: 12px;
  border: 2.5px solid #0a0610;
  background: linear-gradient(160deg, #241630, #140a20);
  overflow: hidden;
  animation: gacha-card-reveal 0.55s ease-out both;
  z-index: 2;
}
.gacha-card-big {
  max-width: 240px;
  margin: 0 auto;
  width: 100%;
}
.gacha-card-shell {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #0a0610;
  opacity: 0.85;
  pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #fff8, #ff2d95 60%);
  z-index: 2;
}
.gacha-card-shell.egg-2 { background: radial-gradient(circle at 35% 30%, #fff8, #2de2ff 60%); }
.gacha-card-shell.egg-3 { background: radial-gradient(circle at 35% 30%, #fff8, #ffd36a 60%); }
.gacha-card-shell.egg-4 { background: radial-gradient(circle at 35% 30%, #fff8, #c06bff 60%); }
.gacha-card-shell.egg-5 { background: radial-gradient(circle at 35% 30%, #fff8, #b8ff4a 60%); }
.gacha-card-beam,
.gacha-card-sparkles,
.gacha-card-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}
.gacha-card-particles i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #fff;
  opacity: 0;
}
.gacha-card-particles i:nth-child(1) { left: 12%; top: 18%; }
.gacha-card-particles i:nth-child(2) { left: 78%; top: 14%; background: #ffb0ff; }
.gacha-card-particles i:nth-child(3) { left: 22%; top: 72%; background: #2de2ff; }
.gacha-card-particles i:nth-child(4) { left: 70%; top: 68%; background: #ffd36a; }
.gacha-card-particles i:nth-child(5) { left: 48%; top: 10%; }
.gacha-card-particles i:nth-child(6) { left: 88%; top: 42%; background: #c06bff; }
.gacha-card-particles i:nth-child(7) { left: 8%; top: 48%; background: #ff2d95; }
.gacha-card-particles i:nth-child(8) { left: 55%; top: 80%; background: #b8ff4a; }

/* 普通：淡光＋scale */
.gacha-card.rarity-普通 {
  box-shadow: 0 0 0 1px #c8c0d0, 0 2px 0 #0a0610, 0 0 14px rgba(200,192,208,0.35);
}
.gacha-card.rarity-普通::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.5), transparent 55%);
  animation: gacha-flash-common 0.5s ease-out both;
}

/* 稀有：藍光柱／邊框脈衝 */
.gacha-card.rarity-稀有 {
  box-shadow: 0 0 0 1px #4aa3ff, 0 2px 0 #0a0610, 0 0 18px rgba(74,163,255,0.55);
  animation: gacha-card-reveal 0.55s ease-out both, gacha-rare-pulse 0.7s ease-in-out 0.15s 2 both;
}
.gacha-card.rarity-稀有 .gacha-card-beam {
  opacity: 1;
  background: linear-gradient(180deg, rgba(100,180,255,0.55), transparent 70%);
  animation: gacha-beam-rare 0.65s ease-out both;
}
.gacha-card.rarity-稀有::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(100,180,255,0.7), transparent 55%);
  animation: gacha-flash-rare 0.6s ease-out both;
}

/* 史詩：紫光＋更多閃片／粒子 */
.gacha-card.rarity-史詩 {
  box-shadow: 0 0 0 1px #c06bff, 0 2px 0 #0a0610, 0 0 26px rgba(192,107,255,0.75);
  animation: gacha-card-reveal 0.65s ease-out both;
}
.gacha-card.rarity-史詩 .gacha-card-sparkles {
  opacity: 1;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 22%, #ffb0ff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 40% 70%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 82% 60%, #e0a0ff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 55% 40%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 30% 50%, #d080ff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 60% 15%, #fff 0 1px, transparent 2px);
  animation: gacha-sparkle 0.85s ease-out both;
}
.gacha-card.rarity-史詩 .gacha-card-particles { opacity: 1; }
.gacha-card.rarity-史詩 .gacha-card-particles i {
  animation: gacha-particle-pop 0.85s ease-out both;
}
.gacha-card.rarity-史詩 .gacha-card-particles i:nth-child(odd) { animation-delay: 0.08s; }
.gacha-card.rarity-史詩 .gacha-card-particles i:nth-child(even) { animation-delay: 0.16s; }
.gacha-card.rarity-史詩::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(200,120,255,0.8), transparent 55%);
  animation: gacha-flash-epic 0.75s ease-out both;
}

/* 最高級：金／霓虹＋全屏 glow／光柱 */
.gacha-card.rarity-最高級 {
  box-shadow: 0 0 0 1px var(--neon-gold), 0 2px 0 #0a0610, 0 0 28px rgba(255,211,106,0.85), 0 0 42px rgba(255,45,149,0.45);
  animation: gacha-card-reveal 0.7s ease-out both, gacha-legend-pulse 1.1s ease-in-out 0.2s 2 both;
}
.gacha-card.rarity-最高級 .gacha-card-sparkles {
  opacity: 1;
  background:
    radial-gradient(circle at 15% 25%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 75% 18%, #ffe08a 0 2px, transparent 3px),
    radial-gradient(circle at 35% 65%, #ff2d95 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 55%, #2de2ff 0 2px, transparent 3px),
    radial-gradient(circle at 50% 35%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 25% 45%, #ffd36a 0 1.5px, transparent 2.5px);
  animation: gacha-sparkle 1.1s ease-out both;
}
.gacha-card.rarity-最高級 .gacha-card-particles { opacity: 1; }
.gacha-card.rarity-最高級 .gacha-card-particles i {
  animation: gacha-particle-pop 1.1s ease-out both;
}
.gacha-card.rarity-最高級 .gacha-card-beam {
  opacity: 1;
  background: linear-gradient(180deg, rgba(255,230,140,0.7), rgba(255,45,149,0.25) 45%, transparent 75%);
  animation: gacha-beam-legend 1s ease-out both;
}
.gacha-card.rarity-最高級::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,230,140,0.9), transparent 50%),
    linear-gradient(120deg, transparent 30%, rgba(255,45,149,0.4), transparent 70%);
  animation: gacha-flash-legend 1s ease-out both;
}

/* 十連最後一張加強 */
.gacha-card.gacha-finale {
  grid-column: 1 / -1;
  max-width: 220px;
  margin: 4px auto 0;
  transform-origin: center;
  animation: gacha-card-reveal 0.65s ease-out both, gacha-finale-pop 0.7s ease-out 0.1s both;
  z-index: 2;
}
@keyframes gacha-finale-pop {
  0% { transform: scale(0.85); filter: brightness(1.4); }
  55% { transform: scale(1.08); filter: brightness(1.15); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* 全屏爆光（最高級 reveal） */
.gacha-legend-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,230,140,0.6), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,45,149,0.4), transparent 70%);
  animation: gacha-legend-boom 1.15s ease-out both;
  overflow: hidden;
}
.gacha-legend-pillar {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 36%;
  height: 120%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,211,106,0.55) 30%, rgba(255,45,149,0.25) 70%, transparent);
  filter: blur(2px);
  animation: gacha-pillar 1.15s ease-out both;
}
.gacha-legend-burst {
  position: absolute;
  inset: 10% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 60%);
  animation: gacha-burst-ring 1.15s ease-out both;
}
.gacha-legend-overlay span {
  position: relative;
  z-index: 2;
  font-weight: 900;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  color: #fff;
  text-shadow:
    0 0 12px #ffd36a,
    0 0 28px #ff2d95,
    0 0 42px #2de2ff,
    0 3px 0 #0a0610;
  animation: gacha-boom-glyph 1.15s ease-out both;
}
.gacha-epic-flash {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(192,107,255,0.5), transparent 60%);
  animation: gacha-epic-wash 0.8s ease-out both;
}
@keyframes gacha-legend-boom {
  0% { opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes gacha-pillar {
  0% { opacity: 0; transform: translateX(-50%) scaleY(0.2); }
  25% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.15); }
}
@keyframes gacha-burst-ring {
  0% { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes gacha-boom-glyph {
  0% { transform: scale(0.35); opacity: 0; }
  22% { transform: scale(1.3); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}
@keyframes gacha-epic-wash {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}
@keyframes gacha-particle-pop {
  0% { opacity: 0; transform: scale(0.4) translateY(6px); }
  35% { opacity: 1; transform: scale(1.2) translateY(-4px); }
  100% { opacity: 0; transform: scale(0.6) translateY(-18px); }
}
@keyframes gacha-beam-legend {
  0% { opacity: 0.95; transform: scaleY(0.2); transform-origin: top; }
  40% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.3); }
}

@keyframes gacha-card-reveal {
  0% { transform: scale(0.5); opacity: 0; filter: brightness(1.9); }
  55% { transform: scale(1.07); opacity: 1; filter: brightness(1.25); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}
@keyframes gacha-flash-common {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}
@keyframes gacha-flash-rare {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gacha-flash-epic {
  0% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes gacha-flash-legend {
  0% { opacity: 1; }
  60% { opacity: 0.55; }
  100% { opacity: 0; }
}
@keyframes gacha-legend-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--neon-gold), 0 2px 0 #0a0610, 0 0 18px rgba(255,211,106,0.55); }
  50% { box-shadow: 0 0 0 2px #fff, 0 2px 0 #0a0610, 0 0 36px rgba(255,211,106,1), 0 0 54px rgba(255,45,149,0.55); }
}
@keyframes gacha-rare-pulse {
  0%, 100% { box-shadow: 0 0 0 1px #4aa3ff, 0 2px 0 #0a0610, 0 0 14px rgba(74,163,255,0.45); }
  50% { box-shadow: 0 0 0 2px #9ad0ff, 0 2px 0 #0a0610, 0 0 26px rgba(74,163,255,0.85); }
}
@keyframes gacha-beam-rare {
  0% { opacity: 0.9; transform: scaleY(0.3); transform-origin: top; }
  40% { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1.2); }
}
@keyframes gacha-sparkle {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

/* 十連／結果 stagger */
.gacha-results.revealed .gacha-card:nth-child(1) { animation-delay: 0.00s; }
.gacha-results.revealed .gacha-card:nth-child(2) { animation-delay: 0.06s; }
.gacha-results.revealed .gacha-card:nth-child(3) { animation-delay: 0.12s; }
.gacha-results.revealed .gacha-card:nth-child(4) { animation-delay: 0.18s; }
.gacha-results.revealed .gacha-card:nth-child(5) { animation-delay: 0.24s; }
.gacha-results.revealed .gacha-card:nth-child(6) { animation-delay: 0.30s; }
.gacha-results.revealed .gacha-card:nth-child(7) { animation-delay: 0.36s; }
.gacha-results.revealed .gacha-card:nth-child(8) { animation-delay: 0.42s; }
.gacha-results.revealed .gacha-card:nth-child(9) { animation-delay: 0.48s; }
.gacha-results.revealed .gacha-card:nth-child(10) { animation-delay: 0.54s; }
.gacha-results.revealed .gacha-card.gacha-finale { animation-delay: 0.58s, 0.62s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(1) { animation-delay: 0.00s, 0.15s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(2) { animation-delay: 0.06s, 0.21s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(3) { animation-delay: 0.12s, 0.27s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(4) { animation-delay: 0.18s, 0.33s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(5) { animation-delay: 0.24s, 0.39s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(6) { animation-delay: 0.30s, 0.45s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(7) { animation-delay: 0.36s, 0.51s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(8) { animation-delay: 0.42s, 0.57s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(9) { animation-delay: 0.48s, 0.63s; }
.gacha-results.revealed .gacha-card.rarity-最高級:nth-child(10) { animation-delay: 0.54s, 0.69s; }

.gacha-card-art {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #0a0610;
  background: #0a0610;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 2;
}
.gacha-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gacha-ph {
  color: #8878a0;
  font-weight: 800;
  font-size: 0.75rem;
}
.gacha-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  position: relative;
  z-index: 2;
}
.gacha-card-name {
  font-weight: 900;
  font-size: 0.78rem;
  color: #fff;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.gacha-card-rare {
  font-weight: 800;
  font-size: 0.68rem;
  color: var(--neon-cyan);
}
.gacha-card.rarity-稀有 .gacha-card-rare { color: #7ec0ff; }
.gacha-card.rarity-史詩 .gacha-card-rare { color: #d4a0ff; }
.gacha-card.rarity-最高級 .gacha-card-rare { color: var(--neon-gold); }
.gacha-card-flag {
  font-weight: 900;
  font-size: 0.68rem;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.gacha-card-flag.new { color: var(--neon-lime, #b8ff4a); }
.gacha-card-flag.refund { color: var(--neon-pink); }
.gacha-card-flag.dupe { color: #c9b8d8; }
/* t364：重複卡顯示同名張數（升星材料），位置同 NEW 徽章相對（NEW 在右，張數在左） */
.gacha-card-qty {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 6;
  padding: 1px 5px 2px;
  border-radius: 4px;
  border: 2px solid #0a0610;
  background: #1a1028;
  color: var(--neon-cyan);
  font-size: 0.54rem;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 0 0 1px rgba(45, 226, 255, 0.55), 0 0 8px rgba(45, 226, 255, 0.45);
}
/* t364：結果頁底部一句，講清楚升星去邊度按 */
.gacha-result-tip {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(10, 6, 16, 0.82);
  border: 1px solid rgba(45, 226, 255, 0.35);
  color: #cfe9f5;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

/* result 階段唔再重播入場大動畫，避免閃爍；卡面靜態全露 */

/* t320：結果卡可撳睇說明 */
.gacha-panel.phase-reveal .gacha-card,
.gacha-panel.phase-result .gacha-card {
  cursor: pointer;
}
.gacha-card-hint {
  display: none;
  font-size: 0.58rem;
  font-weight: 700;
  color: #8878a0;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.gacha-panel.phase-result .gacha-card-hint {
  display: block;
}
.gacha-panel.phase-result .gacha-card {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}
.gacha-panel.phase-result .gacha-card::after,
.gacha-panel.phase-result .gacha-card-beam,
.gacha-panel.phase-result .gacha-card-sparkles,
.gacha-panel.phase-result .gacha-card-particles {
  animation: none;
  opacity: 0;
}
.gacha-panel.phase-result .gacha-card.rarity-普通,
.gacha-panel.phase-result .gacha-card.rarity-稀有,
.gacha-panel.phase-result .gacha-card.rarity-史詩,
.gacha-panel.phase-result .gacha-card.rarity-最高級 {
  /* 保留靜態光暈 */
}


/* ================= 手機自適應：豎屏／橫屏 ================= */
html, body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* 手機或細屏：拆機殼，全屏用（避開瀏海／手勢區） */
@media (max-width: 560px), (max-height: 640px) {
  .page { padding: 0; height: 100dvh; }
  .phone {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
  .phone::before { display: none; }
  .screen {
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(8px, env(safe-area-inset-right));
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    padding-left: max(8px, env(safe-area-inset-left));
    gap: 6px;
  }
}

/* ---------- 橫屏（手機打橫） ---------- */
@media (orientation: landscape) and (max-height: 620px),
       (orientation: landscape) and (max-width: 1024px) {
  .screen {
    gap: 4px;
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .ribbon { font-size: 0.76rem; padding: 2px 14px; letter-spacing: 0.08em; }
  .speed-strip { display: none; }
  .sub { font-size: 0.7rem; line-height: 1.35; }
  /* t363：橫屏同樣收細（唔好蓋返大） */
  .hud { padding: 3px 8px; gap: 5px; }
  .chip { font-size: 0.72rem; padding: 2px 7px; }
  .chip.gacha-entry { font-size: 0.7rem; padding: 2px 7px; }
  .life-hud { padding: 2px 6px; gap: 1px 5px; }
  .home-toast, .prep-toast { bottom: 58px; }
  .global-toast { bottom: 62px; }

  /* 底欄收薄，唔好食高度 */
  .tab-bar {
    left: 6px; right: 6px;
    bottom: max(4px, env(safe-area-inset-bottom));
    padding: 2px;
    gap: 3px;
    border-radius: 10px;
  }
  .tab { font-size: 0.5rem; padding: 2px 0; gap: 0; }
  .tab .ico { font-size: 0.9rem; margin-bottom: 0; }
  .screen.bg-home { padding-bottom: 50px; }

  /* 主頁：左封面、中對話、右側鍵排成一行 */
  .home-hero {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .hero-card {
    width: auto;
    flex: 0 1 128px;
    max-width: 128px;
    max-height: 100%;
  }
  .home-hero > .bubble {
    flex: 1 1 0;
    margin: 0;
    text-align: left;
    font-size: 0.76rem;
  }
  .home-side {
    flex-direction: column;
    width: auto;
    flex: 0 0 auto;
    gap: 4px;
    padding: 0;
  }
  .screen.bg-home .home-side .side-icon { padding: 2px 6px; font-size: 0.58rem; }
  .home-life-row { gap: 6px; }

  /* 四揀一：一橫排四張 */
  .event-grid.pick-4-grid,
  .fate-grid.pick-4-grid,
  .origin-grid.pick-4-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }
  .event-grid.pick-4-grid .event-card img,
  .event-grid.fate-grid .event-card img,
  .event-grid.origin-grid .event-card img {
    max-height: 76px;
  }
  .screen.bg-events { padding-bottom: 46px; }
  .screen.bg-events .btn-abandon-compact,
  .screen.bg-soft .btn-abandon-compact { margin: 0 auto 2px; padding: 2px 10px; font-size: 0.62rem; }

  /* 遇敵：敵方｜開打｜我方 三欄 */
  .encounter-stage {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: stretch;
  }
  .encounter-stage .enemy-preview { grid-column: 1; grid-row: 1; margin: 0; }
  .encounter-stage .enc-fight {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    max-width: none;
    width: auto;
    padding: 10px 8px;
    font-size: 0.72rem;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.1em;
    margin: 0;
  }
  .encounter-stage .deploy-row { grid-column: 3; grid-row: 1; margin: 0; }
  .encounter-stage > .modal-hint { grid-column: 1 / -1; grid-row: 2; margin: 2px 0 0; }
  .screen.bg-encounter { padding-bottom: 6px !important; }
  .enc-back { padding: 3px 10px; font-size: 0.66rem; margin-top: 0; }

  /* 戰鬥：敵我左右分欄 */
  .battle { gap: 5px; }
  .battle-top { padding: 3px 8px; font-size: 0.72rem; }
  .battle-stage { flex-direction: row; align-items: stretch; gap: 4px; }
  .battle-stage .team-row { flex: 1 1 0; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .battle-stage .vs-strip {
    align-self: center;
    writing-mode: vertical-rl;
    padding: 0 2px;
    font-size: 0.68rem;
  }
  .battle-actions { gap: 6px; }
  .battle-actions .btn { padding: 5px 8px; font-size: 0.72rem; }

  /* 結果：橫排，字唔好被裁 */
  .screen.bg-result .result-body { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
  .screen.bg-result .result-banner { flex: 1 1 100%; margin: 0 0 2px; font-size: 0.92rem; padding: 5px 8px; }
  .screen.bg-result .result-art { flex: 0 0 26%; width: 26%; max-height: 30vh; margin: 0; }
  .screen.bg-result .result-panel { flex: 1 1 60%; font-size: 0.7rem; padding: 6px 8px; }
  .screen.bg-result .result-cta { padding: 2px 6px 0; gap: 3px; }
  .screen.bg-result .result-bubble { padding: 5px 10px; font-size: 0.72rem; }
  .screen.bg-result .result-cta .btn.gold#btn-ding { padding: 6px 12px !important; font-size: 0.8rem !important; }

  /* Soft／小遊戲／勢力：圖左字右 */
  .screen.bg-soft { padding-bottom: 6px; }
  .screen.bg-soft .soft-scroll { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 6px; padding: 0 2px; }
  .screen.bg-soft .soft-art,
  .screen.bg-soft .result-art.soft-art { flex: 0 0 22%; width: 22%; max-height: 34vh; margin: 0; }
  .screen.bg-soft .soft-scroll > .bubble { flex: 1 1 66%; max-height: 34vh; font-size: 0.68rem; -webkit-line-clamp: 5; }
  .screen.bg-soft .soft-scroll > .soft-panel { flex: 1 1 100%; margin-top: 2px; padding: 6px 8px; font-size: 0.68rem; }
  .screen.bg-soft .soft-cta { padding: 2px 4px; gap: 6px; }
  .screen.bg-soft .soft-cta .btn { padding: 6px 10px; font-size: 0.76rem; }
  .screen.bg-soft .soft-scroll > .fac-choices { flex: 1 1 100%; flex-direction: row; gap: 6px; margin-top: 2px; }
  .screen.bg-soft .soft-scroll > .fac-choices .btn.fac-choice { flex: 1 1 0; padding: 6px 6px; }
  .mg-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mg-wrap { gap: 4px; }

  /* 店鋪／送卡／換卡／升星：一橫排 */
  .shop-wrap { gap: 2px; padding: 0 2px; }
  .shop-sub, .shop-gold-banner, .gift-banner { font-size: 0.66rem; padding: 2px 6px; margin: 0 0 2px; }
  .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .shop-grid .shop-card img { max-height: 34vh; }

  /* 扭蛋：機身左、資訊右 */
  .gacha-panel {
    display: grid;
    grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto;
    column-gap: 10px;
    row-gap: 3px;
    padding: 2px 4px 4px;
  }
  .gacha-topbar { grid-column: 1 / -1; grid-row: 1; }
  .gacha-ribbon { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .gacha-sub { grid-column: 2; grid-row: 3; text-align: left; font-size: 0.66rem; }
  .gacha-pity { grid-column: 2; grid-row: 4; text-align: left; font-size: 0.7rem; }
  .gacha-machine, .gacha-machine.gm-has-art {
    grid-column: 1;
    /* t358：左欄只有機器，跨到最底行，唔好只跨 4 行（圖只剩 101x135） */
    grid-row: 3 / -1;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0;
    margin: 0;
    align-self: stretch;
  }
  .gacha-machine .gm-art { max-height: 58vh; }
  /* t358：橫屏機器被壓到 50x67px（左欄有 312px 寬卻只用 67px 高）——
     讓主視覺按可用高度撐滿左欄，並以高度為準等比縮放 */
  .gacha-machine.gm-has-art,
  .gacha-panel.phase-idle .gacha-machine.gm-has-art,
  .gacha-panel.phase-coin .gacha-machine.gm-has-art,
  .gacha-panel.phase-spin .gacha-machine.gm-has-art,
  .gacha-panel.phase-egg_out .gacha-machine.gm-has-art {
    /* 放開 72% 上限，否則機器只餘 152px 高、圖縮到 57x76 */
    max-height: none;
    justify-content: center;
    gap: 4px;
  }
  .gacha-machine.gm-has-art .gm-art-wrap {
    flex: 1 1 auto;
    align-items: center;
    min-height: 0;
  }
  .gacha-machine .gm-art {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    object-position: center center;
  }
  .gacha-machine .gm-price-board { margin-top: 2px; }
  .gacha-machine .gm-hint-bar { margin-top: 2px; padding: 4px 6px; font-size: 0.66rem; }
  .gacha-stage { grid-column: 2; grid-row: 5; max-height: none; overflow: auto; }
  .gacha-actions { grid-column: 2; grid-row: 6; }
  .gacha-cta { grid-column: 2; grid-row: 7; padding: 0; }
  .gacha-cta .btn { min-width: 0; width: 100%; min-height: 34px; }
  .gacha-results.result-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gacha-results.result-grid .gacha-card-art { max-height: 62px; }
  .gm-price-board span { font-size: 0.6rem; }

  /* 彈窗：橫屏用闊版 */
  .modal-sheet { max-height: 92%; padding: 10px 10px 8px; }
  .prep-pick-sheet, .ally-sheet, .fighter-detail { max-height: 94%; }
  .prep-body { grid-template-columns: 38% 1fr; }
  .modal-hint { font-size: 0.6rem; margin: 4px 4px 0; }
}

/* 極矮（橫屏手機 + 瀏覽器工具列）再收一收 */
@media (orientation: landscape) and (max-height: 430px) {
  .screen { gap: 3px; }
  .ribbon { font-size: 0.7rem; padding: 2px 12px; }
  .hero-card { flex: 0 1 96px; max-width: 96px; }
  .event-grid.pick-4-grid .event-card img,
  .event-grid.fate-grid .event-card img,
  .event-grid.origin-grid .event-card img { max-height: 48px; }
  .battle-stage .vs-strip { font-size: 0.6rem; }
  .gacha-machine .gm-art { max-height: 46vh; }
}

/* 橫屏：準備出發畫面收緊（主人左、卡右、按鈕唔好壓到底） */
@media (orientation: landscape) and (max-width: 1024px) {
  .screen.bg-team { gap: 4px; padding-bottom: 4px; }
  .prep-body { gap: 5px; }
  .prep-left { padding: 4px; gap: 2px; }
  .prep-left-head { font-size: 0.6rem; padding: 1px 4px; }
  .prep-hero { min-height: 0; }
  .prep-hero-art, .prep-hero .prep-hero-art { max-height: 30vh; }
  .prep-gear-grid { gap: 3px; }
  .prep-gear-slot { padding: 2px; border-width: 2px; }
  .prep-gear-slot .pg-label { font-size: 0.52rem; }
  .prep-gear-slot .pg-art { max-height: 22px; }
  .prep-gear-slot .pg-art img { max-height: 22px; }
  .prep-panel { padding: 4px 5px; gap: 2px; }
  .prep-panel-head { font-size: 0.62rem; }
  .prep-f-grid, .prep-s-grid { gap: 3px; }
  .prep-f-thumb { min-height: 0; }
  .prep-f-thumb img { max-height: 15vh; }
  .prep-f-thumb .pf-name { font-size: 0.54rem; }
  .prep-s-thumb .ps-name { font-size: 0.5rem; }
  .prep-actions { gap: 5px; padding: 2px 0 0; }
  .prep-actions .btn { padding: 5px 10px; font-size: 0.74rem; min-height: 0; }
  .prep-footer { gap: 4px; }
  .prep-six-attrs, .prep-team-bonus { font-size: 0.56rem; padding: 1px 4px; }
  .screen.bg-team .speed-strip { display: none; }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .prep-ready {
    font-size: 0.86rem !important;
    padding: 6px 12px !important;
    letter-spacing: 0.06em;
  }
  .prep-cta-row .btn { padding: 4px 10px; font-size: 0.68rem; min-height: 0; }
  .prep-cta-row { gap: 4px; }
}

/* 橫屏：底部故事功能列收做細圖示，唔好搶高度 */
@media (orientation: landscape) and (max-width: 1024px) {
  .story-dock {
    gap: 2px;
    padding: 3px 2px 4px;
    margin: 4px -2px 0;
  }
  .story-dock .sd-item,
  .story-dock > * {
    font-size: 0.5rem;
    padding: 2px 0;
  }
  .story-dock .sd-ico,
  .story-dock .ico { font-size: 0.85rem; }
  .screen.bg-events .pick-4-grid .event-card .label { padding: 3px 4px 4px; }
  .screen.bg-events .pick-4-grid .event-card .ev-name { font-size: 0.66rem; }
  .screen.bg-events .pick-4-grid .event-card .ev-reward { font-size: 0.52rem; }
  .screen.bg-events .pick-4-grid .event-card .ev-cat-pill { font-size: 0.5rem; padding: 0 4px; }
  .screen.bg-events .pick-4-grid .event-card .tag { font-size: 0.5rem; padding: 0 4px; }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .sd-btn { font-size: 0.48rem; gap: 0; padding: 2px 0; border-width: 2px; border-radius: 7px; }
  .sd-btn .ico { font-size: 0.8rem; }
}

/* 橫屏：卡格數目唔一定係 4（送卡三選一／換卡四選一）——用 auto-fit 平均分配，避免右邊留空 */
@media (orientation: landscape) and (max-width: 1024px) {
  .shop-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    justify-content: center;
  }
}

/* 橫屏：扭蛋結果／見卡階段，機身讓位，結果用滿寬（否則卡面會爆出畫面底部） */
@media (orientation: landscape) and (max-width: 1024px) {
  .gacha-panel.phase-result,
  .gacha-panel.phase-reveal {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  }
  .gacha-panel.phase-result .gacha-topbar,
  .gacha-panel.phase-reveal .gacha-topbar { grid-row: 1; }
  .gacha-panel.phase-result .gacha-ribbon,
  .gacha-panel.phase-reveal .gacha-ribbon { grid-row: 2; }
  .gacha-panel.phase-result .gacha-sub,
  .gacha-panel.phase-reveal .gacha-sub { grid-column: 1; grid-row: 3; text-align: center; }
  .gacha-panel.phase-result .gacha-pity,
  .gacha-panel.phase-reveal .gacha-pity { display: none; }
  .gacha-panel.phase-result .gacha-machine,
  .gacha-panel.phase-reveal .gacha-machine { display: none; }
  .gacha-panel.phase-result .gacha-stage,
  .gacha-panel.phase-reveal .gacha-stage {
    grid-column: 1;
    grid-row: 4;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }
  .gacha-panel.phase-result .gacha-actions,
  .gacha-panel.phase-reveal .gacha-actions { grid-column: 1; grid-row: 5; }
  .gacha-panel.phase-result .gacha-cta,
  .gacha-panel.phase-reveal .gacha-cta { grid-column: 1; grid-row: 6; }
  .gacha-results.result-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-content: start;
    max-height: 100%;
    overflow: hidden;
  }
  .gacha-results.result-grid .gacha-card { min-height: 0; }
  .gacha-results.result-grid .gacha-card-art { max-height: 12vh; }
  .gacha-results.result-grid .gacha-card-name { font-size: 0.55rem; }
  .gacha-results.result-grid .gacha-card-rare { font-size: 0.5rem; }
  .gacha-results.result-grid .gacha-card-flag { font-size: 0.48rem; }
  .gacha-results.result-grid .gacha-card-hint { display: none; }
  .gacha-panel.phase-result .gacha-results.revealed .gacha-card.gacha-card-big,
  .gacha-panel.phase-reveal .gacha-results.revealed .gacha-card.gacha-card-big {
    grid-column: auto;
    max-width: none;
  }
}

/* ===== 盟友面板：今世可出場戰鬥卡詳情 ===== */
.screen.bg-soft .al-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
  overflow: hidden;
}
.al-top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
  justify-content: center;
}
.al-pill {
  font-size: 0.64rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  border: 2px solid #0a0610;
  background: linear-gradient(180deg, #2a1a40, #16101f);
  color: var(--neon-gold);
}
.al-pill.cyan { color: var(--neon-cyan); }
.al-pill.pink { color: var(--neon-pink); }
.al-hint {
  margin: 0;
  text-align: center;
  font-size: 0.6rem;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}
.al-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-bottom: 4px;
}
.al-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  padding: 7px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #241630f2, #12081cf2);
  box-shadow: 0 0 0 1px rgba(255, 211, 106, 0.28), 0 3px 0 #0a0610;
  flex-shrink: 0;
}
.al-card.infield { box-shadow: 0 0 0 2px var(--neon-cyan), 0 0 12px rgba(45, 226, 255, 0.35); }
.al-card.dead { opacity: 0.62; filter: grayscale(0.5); }
.al-art {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid #0a0610;
  background: #0d0814;
  min-height: 84px;
}
.al-art img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 84px;
  max-height: 132px;
  object-fit: cover;
  object-position: center top;
}
.al-badge {
  position: absolute;
  left: 3px;
  top: 3px;
  font-size: 0.5rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1.5px solid #0a0610;
  letter-spacing: 0.04em;
}
.al-badge.field { background: var(--neon-cyan); color: #06202a; }
.al-badge.dead { background: var(--neon-pink); color: #fff; }
.al-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.al-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.al-name {
  font-weight: 900;
  font-size: 0.82rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-lv { font-size: 0.62rem; font-weight: 800; color: var(--neon-lime); flex-shrink: 0; }
.al-sub {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.al-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 1px 0;
}
.al-stats span {
  font-size: 0.58rem;
  font-weight: 800;
  color: #fff;
  background: #1a1028;
  border: 1.5px solid #0a0610;
  border-radius: 6px;
  padding: 1px 5px;
  white-space: nowrap;
}
.al-stats span b { color: var(--neon-gold); font-weight: 900; margin-right: 2px; }
.al-stats .al-dead { color: var(--neon-pink); background: rgba(40, 10, 20, 0.7); }
.al-line {
  font-size: 0.62rem;
  font-weight: 700;
  color: #ece0f6;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  line-height: 1.3;
}
.al-line .al-k {
  flex-shrink: 0;
  font-size: 0.54rem;
  font-weight: 900;
  color: #0b0714;
  background: var(--neon-gold);
  border-radius: 4px;
  padding: 0 4px;
}
.al-line em { font-style: normal; color: var(--neon-cyan); font-size: 0.56rem; }
.al-line .al-cd { color: var(--neon-pink); font-size: 0.54rem; }
.al-eff {
  font-size: 0.58rem;
  line-height: 1.35;
  color: #d9c8ea;
  background: rgba(10, 6, 16, 0.55);
  border-left: 3px solid var(--neon-pink);
  border-radius: 4px;
  padding: 3px 6px;
}
.al-skills { display: flex; flex-wrap: wrap; gap: 3px; }
.al-skill {
  font-size: 0.55rem;
  font-weight: 800;
  color: #0b0714;
  background: linear-gradient(180deg, #b8ff4a, #6fbf1f);
  border-radius: 5px;
  padding: 0 5px;
}
.al-skill.empty { background: #2a2038; color: var(--muted); }
.al-blurb {
  font-size: 0.56rem;
  line-height: 1.35;
  color: #b9a8c9;
  margin: 1px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.screen.bg-soft .al-wrap + .soft-cta { flex-direction: row; }

/* 橫屏：盟友卡兩欄並排 */
@media (orientation: landscape) and (max-width: 1024px) {
  .al-list { flex-direction: row; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
  .al-card { flex: 1 1 calc(50% - 6px); min-width: 240px; grid-template-columns: 64px minmax(0, 1fr); }
  .al-art, .al-art img { min-height: 64px; max-height: 84px; }
  .al-hint { display: none; }
}

/* 橫屏盟友：卡唔好高過列表，超出就滾動（唔好壓住返回鍵） */
@media (orientation: landscape) and (max-width: 1024px) {
  .al-list {
    overflow-y: auto;
    max-height: 100%;
    align-items: flex-start;
  }
  .al-card {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    padding: 5px;
    gap: 6px;
    max-height: none;
  }
  .al-art, .al-art img { min-height: 52px; max-height: 66px; }
  .al-name { font-size: 0.74rem; }
  .al-sub { font-size: 0.52rem; }
  .al-stats span { font-size: 0.52rem; padding: 0 4px; }
  .al-line { font-size: 0.56rem; }
  .al-line .al-k { font-size: 0.5rem; }
  .al-eff { font-size: 0.52rem; line-height: 1.25; padding: 2px 4px; }
  .al-blurb { display: none; }
  .al-top .al-pill { font-size: 0.56rem; padding: 1px 6px; }
  .screen.bg-soft .al-wrap + .soft-cta .btn { padding: 5px 14px; font-size: 0.76rem; }
}

/* 橫屏：盟友／送卡／店鋪等列表頁，頂欄收成單行，把高度讓給內容 */
@media (orientation: landscape) and (max-width: 1024px) {
  .screen.bg-soft .life-hud {
    grid-template-columns: auto 1fr auto;
    padding: 3px 6px;
    gap: 4px;
    row-gap: 0;
  }
  .screen.bg-soft .lh-avatar { width: 22px; height: 22px; font-size: 0.72rem; border-width: 2px; }
  .screen.bg-soft .lh-lv { min-width: 0; flex-direction: row; align-items: center; gap: 4px; }
  .screen.bg-soft .lh-lv-label { font-size: 0.56rem; }
  .screen.bg-soft .lh-xp { display: none; }
  .screen.bg-soft .lh-attrs { flex-wrap: nowrap; overflow: hidden; gap: 2px; justify-content: flex-start; }
  .screen.bg-soft .lh-a { font-size: 0.56rem; padding: 0 3px; border-width: 1px; }
  .screen.bg-soft .lh-right { flex-direction: row; align-items: center; gap: 3px; }
  .screen.bg-soft .lh-right .chip { font-size: 0.56rem; padding: 0 5px; }
  .screen.bg-soft .lh-right .chip.gacha-entry { display: none; }
  .screen.bg-soft .lh-factions { display: none; }
  .screen.bg-soft .ribbon { font-size: 0.66rem; padding: 1px 10px; }
  .screen.bg-soft .soft-cta { padding: 2px 4px 0; gap: 5px; }
  .screen.bg-soft .soft-cta .btn { padding: 4px 12px; font-size: 0.72rem; min-height: 0; }
  .al-top .al-pill { font-size: 0.52rem; padding: 0 5px; }
}

/* t361：橫屏長按卡牌技能說明——唔好留住 720px 上限，善用橫向空間，
   技能格可以大少少，一排放得落就唔換行 */
@media (orientation: landscape) and (max-width: 1024px) {
  .help-tip.help-tip-rich.help-tip-top {
    left: 8px;
    right: 8px;
    top: 8px;
    max-width: 980px;
    max-height: calc(100vh - 16px);
    padding: 10px 14px 8px;
    font-size: 0.8rem;
    line-height: 1.42;
  }
  .help-tip.help-tip-rich.help-tip-top .ht-title { font-size: 1.02rem; }
  .help-tip.help-tip-rich.help-tip-top .ht-line { font-size: 0.76rem; }
  .help-tip.help-tip-rich.help-tip-top .ht-flavor { font-size: 0.73rem; padding: 5px 8px; }
  .help-tip.help-tip-rich.help-tip-top .bc-skills { gap: 7px; padding: 2px 0 4px; }
  .help-tip.help-tip-rich.help-tip-top .bc-skill.fd-skill {
    width: 92px;
    min-width: 92px;
    min-height: 84px;
    padding: 4px 3px;
  }
  .help-tip.help-tip-rich.help-tip-top .fds-ico,
  .help-tip.help-tip-rich.help-tip-top .fds-ico img { width: 42px; height: 42px; }
  .help-tip.help-tip-rich.help-tip-top::after { margin-top: 5px; padding-top: 4px; font-size: 0.66rem; }
}

/* ================= t364：故事包分支畫面「打工仔輓歌」 ================= */
.screen.bg-soft:has(.office-node) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.office-node {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 8px 9px 10px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #1a1028f2, #100818f7);
  box-shadow: 0 0 0 2px rgba(45, 226, 255, 0.28), 0 3px 0 #0a0610;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 上一步揭曉（選擇後才出現） */
.of-reveal {
  border-radius: 9px;
  border: 2px solid #0a0610;
  border-left: 4px solid var(--neon-pink);
  background: linear-gradient(90deg, rgba(255, 45, 149, 0.16), rgba(255, 45, 149, 0.04));
  padding: 6px 9px 7px;
  flex: 0 0 auto;
}
.of-reveal-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: var(--neon-pink);
  margin-bottom: 2px;
}
.of-reveal-choice {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
}
.of-reveal-hint {
  margin: 3px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--neon-gold);
  line-height: 1.35;
}

/* ===== t369：通用故事鏈（角色弧線） ===== */
.of-reveal-outcome {
  margin: 4px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #e8d8f0;
  line-height: 1.45;
}
.tl-bond-note {
  margin: 3px 0 0;
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--neon-cyan);
  line-height: 1.35;
  letter-spacing: 0.02em;
}
.tl-cast {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 2px;
  flex: 0 0 auto;
}
.tl-char {
  border-radius: 9px;
  border: 2px solid #0a0610;
  border-left: 4px solid var(--neon-cyan);
  background: linear-gradient(90deg, rgba(45, 226, 255, 0.12), rgba(45, 226, 255, 0.02));
  padding: 5px 8px 6px;
}
.tl-char-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.tl-char-name {
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.03em;
}
.tl-char-role {
  font-size: 0.62rem;
  font-weight: 700;
  color: #a99bb8;
}
.tl-bond {
  margin-left: auto;
  font-size: 0.6rem;
  font-weight: 900;
  padding: 0 6px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
}
.tl-bond.warm { color: #061018; background: var(--neon-lime, #b8ff4a); }
.tl-bond.cold { color: #fff; background: #b3243c; }
.tl-char-line {
  margin: 3px 0 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: #dfe8f5;
  line-height: 1.5;
}
.tl-bonds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 2px 0 4px;
  flex: 0 0 auto;
}
.tl-bonds-label {
  font-size: 0.6rem;
  font-weight: 900;
  color: var(--neon-gold);
  letter-spacing: 0.08em;
}
.tl-bond-chip {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
  background: #1a1028;
  color: #c9b8d8;
  white-space: nowrap;
}
.tl-bond-chip.warm { color: #061018; background: var(--neon-lime, #b8ff4a); }
.tl-bond-chip.cold { color: #fff; background: #b3243c; }
.of-trail-bond {
  display: block;
  margin-top: 1px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 800;
  color: var(--neon-cyan);
}
  .tl-node .of-choices {
    margin-top: 4px;
  }

  /* ===== t379：故事步之間嘅場面過渡 ===== */
  .tl-transition {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: 100%;
    padding: 1px 0 2px;
    animation: tl-fade-in 0.42s ease-out both;
  }
  .tl-transition-rule {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 226, 255, 0.5), transparent);
  }
  .tl-transition-label {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    color: rgba(45, 226, 255, 0.92);
    text-shadow: 0 0 10px rgba(45, 226, 255, 0.55);
    white-space: nowrap;
  }
  @keyframes tl-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* 整個節點內容淡入（減少「跳戲」） */
  .tl-node {
    animation: tl-node-in 0.34s ease-out both;
  }
  @keyframes tl-node-in {
    from { opacity: 0.55; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }

/* t369：故事包詳情頁的人物介紹 */
.tl-profile-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 2px 0 6px;
}
.tl-profile {
  border-radius: 9px;
  border: 2px solid #0a0610;
  border-left: 4px solid var(--neon-cyan);
  background: rgba(20, 12, 32, 0.85);
  padding: 7px 9px 8px;
}
.tl-profile-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.tl-profile-name {
  font-size: 0.84rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.04em;
}
.tl-profile-role {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--neon-gold);
}
.tl-profile-blurb {
  margin: 3px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #c9b8d8;
  line-height: 1.5;
}
.tl-arc-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed rgba(45, 226, 255, 0.25);
}
.tl-arc-step {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1.5px solid #0a0610;
  background: linear-gradient(180deg, #2a1a3a, #160c22);
  color: #9fb4c8;
  white-space: nowrap;
}
.tl-arc-arrow {
  font-style: normal;
  font-size: 0.6rem;
  color: #5a4a6a;
}

/* ===== t371：換卡「最後一張」警告與確認 ===== */
.shop-card.trade-risk {
  box-shadow: 0 0 0 2px rgba(232, 58, 58, 0.85), 0 2px 0 #0a0610;
}
.trade-warn {
  margin-top: 3px;
  padding: 2px 5px;
  border-radius: 5px;
  background: rgba(179, 36, 60, 0.85);
  border: 1px solid #ff8fa3;
  color: #ffe8ee;
  font-size: 0.6rem;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}
.trade-risk-mask {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 3, 10, 0.82);
}
.trade-risk-sheet {
  width: 100%;
  max-width: 330px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #241630, #120a1c);
  box-shadow: 0 0 0 2px rgba(232, 58, 58, 0.7), 0 4px 0 #0a0610, 0 0 24px rgba(232, 58, 58, 0.35);
  padding: 12px 14px 14px;
  text-align: center;
}
.trade-risk-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: #ff8fa3;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.trade-risk-body {
  margin: 7px 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: #dcd0e8;
  line-height: 1.5;
}
.trade-risk-body b { color: var(--neon-gold); }
.trade-risk-q {
  margin: 8px 0 0;
  font-size: 0.8rem;
  font-weight: 900;
  color: #fff;
}
.trade-risk-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.trade-risk-actions .btn { flex: 1 1 0; }

/* 節點抬頭 */
.of-node-head {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  flex: 0 0 auto;
}
.of-node-art {
  width: 74px;
  height: 92px;
  object-fit: cover;
  border-radius: 8px;
  border: 2.5px solid #0a0610;
  box-shadow: 0 0 0 1.5px rgba(255, 211, 106, 0.45);
  background: #0a0612;
}
.of-node-copy { min-width: 0; }
.of-node-name {
  font-size: 0.94rem;
  font-weight: 900;
  color: var(--neon-gold);
  letter-spacing: 0.03em;
  line-height: 1.25;
}
.of-node-desc {
  margin: 3px 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: #ddd0e8;
  line-height: 1.45;
}

/* 對白 */
.of-dialogue {
  flex: 0 0 auto;
  border-radius: 9px;
  border: 2px solid #0a0610;
  background: #12081cf5;
  padding: 6px 9px;
}
.of-dialogue .dlg-line {
  margin: 0 0 4px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #e8dcf0;
}
.of-dialogue .dlg-line:last-child { margin-bottom: 0; }
.of-dialogue .dlg-who { color: var(--neon-cyan); font-weight: 900; }

/* 三個選項 */
.of-choices {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.of-choice {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  padding: 7px 9px 8px;
  border-radius: 9px;
  border: 2.5px solid #0a0610;
  background: linear-gradient(180deg, #2a1a3a, #150b20);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 0 0 1.5px rgba(255, 45, 149, 0.35), 0 2px 0 #0a0610;
}
.of-choice:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px var(--neon-cyan), 0 1px 0 #0a0610; }
.of-choice-tag {
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--neon-pink);
}
.of-choice-text {
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
  color: #fff;
}
.of-choice-unknown {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* 歷程（可摺） */
.of-trail {
  flex: 0 0 auto;
  border-radius: 8px;
  border: 2px dashed rgba(45, 226, 255, 0.35);
  background: #0c0614aa;
  padding: 5px 8px;
  font-size: 0.68rem;
  color: var(--muted);
}
.of-trail summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--neon-cyan);
  list-style: none;
}
.of-trail summary::-webkit-details-marker { display: none; }
.of-trail ol { margin: 5px 0 0; padding-left: 0; list-style: none; }
.of-trail-item {
  display: flex;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 3px;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #ddd0e8;
}
.of-trail-step {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(45, 226, 255, 0.18);
  border: 1px solid rgba(45, 226, 255, 0.5);
  color: var(--neon-cyan);
  font-size: 0.54rem;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.of-note {
  margin: 0;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  color: #8d7a9c;
  text-align: center;
  letter-spacing: 0.02em;
}

/* 結局橫額（soft 畫面） */
.of-ending-banner {
  flex: 0 0 auto;
  border-radius: 10px;
  border: 3px solid #0a0610;
  background: linear-gradient(160deg, #ff4db8 0%, #6b3ad8 100%);
  box-shadow: 0 0 0 2px var(--neon-gold), 0 3px 0 #0a0610;
  padding: 7px 10px 8px;
  text-align: center;
}
.of-ending-kicker {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #ffe8a0;
}
.of-ending-name {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-shadow: 0 2px 0 #0a0610;
}

/* 故事包詳情：結局一覽 */
.of-ending-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 0 0 auto;
}
.of-ending-item {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  padding: 5px 8px;
  border-radius: 8px;
  border: 2px solid #0a0610;
  background: #150b20dd;
  box-shadow: inset 0 0 0 1px rgba(255, 45, 149, 0.18);
}
.of-ending-item.done {
  box-shadow: inset 0 0 0 1.5px rgba(255, 211, 106, 0.55);
  background: #1e1028ee;
}
.of-ending-mark {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  font-weight: 900;
  border: 1.5px solid #0a0610;
  background: #241630;
  color: var(--muted);
}
.of-ending-item.done .of-ending-mark {
  background: linear-gradient(180deg, #ffd36a, #c9a227);
  color: #0a0610;
}
.of-ending-body { min-width: 0; }
.of-ending-title {
  font-size: 0.74rem;
  font-weight: 900;
  color: var(--neon-gold);
  line-height: 1.3;
}
.of-ending-blurb {
  margin: 1px 0 0;
  font-size: 0.64rem;
  font-weight: 600;
  color: #c9b8d8;
  line-height: 1.4;
}
.of-chain-note {
  margin: 0 0 6px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
}

/* 橫屏：兩欄，選項橫排 */
@media (orientation: landscape) and (max-width: 1024px) {
  .office-node { padding: 6px 8px 8px; gap: 6px; }
  .of-node-art { width: 58px; height: 72px; }
  .of-node-name { font-size: 0.84rem; }
  .of-node-desc { font-size: 0.68rem; }
  .of-choices { flex-direction: row; gap: 5px; }
  .of-choice { flex: 1 1 0; padding: 5px 7px 6px; }
  .of-choice-text { font-size: 0.72rem; }
  .of-dialogue .dlg-line { font-size: 0.66rem; }
}

/* ===== 扭蛋機實圖（香港主題，透明底）：唔要白邊／灰底 ===== */
.gm-art.gm-art-photo {
  background: transparent !important;
  object-fit: contain;
  object-position: center center;
  /* 透明 PNG 已清乾淨，只留柔和霓虹光暈 */
  filter: drop-shadow(0 0 10px rgba(255, 45, 149, 0.28)) drop-shadow(0 0 22px rgba(45, 226, 255, 0.18));
  image-rendering: auto;
}
.gacha-machine.gm-has-art .gm-art-wrap {
  align-items: center;
  justify-content: center;
}

/* ===== 扭蛋機實圖：容器依圖片比例收緊，價錢牌貼住機底 ===== */
.gacha-machine.gm-has-art {
  width: auto;
  max-width: min(250px, 74%);
  min-width: 0;
  height: auto;
  max-height: none;
  flex: 0 1 auto;
  display: flex;
  align-items: stretch;
  margin: 0 auto 2px;
}
.gacha-machine.gm-has-art .gm-art-wrap {
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gacha-panel.phase-idle .gacha-machine.gm-has-art,
.gacha-panel.phase-coin .gacha-machine.gm-has-art,
.gacha-panel.phase-spin .gacha-machine.gm-has-art,
.gacha-panel.phase-egg_out .gacha-machine.gm-has-art {
  max-height: none;
  min-height: 0;
}
.gm-art.gm-art-photo {
  /* 用高度上限控制大小，闊度自動跟比例 → 唔會留空 */
  height: auto;
  width: auto;
  max-height: min(46vh, 400px);
  max-width: min(250px, 74vw);
  display: block;
}
@supports (height: 100dvh) {
  .gm-art.gm-art-photo { max-height: min(44dvh, 400px); }
}
.gacha-machine.gm-has-art .gm-price-board { margin-top: 4px; }

/* 橫屏：機身較矮，避免撐爆 */
@media (orientation: landscape) and (max-width: 1024px) {
  .gm-art.gm-art-photo { max-height: min(58vh, 300px); max-width: min(200px, 34vw); }
  .gacha-machine.gm-has-art { max-width: min(200px, 34vw); }
}

/* t365：分支鏈頂條（用分支自己的年齡，唔顯示人生 HUD） */
.of-hud {
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 14px;
  border-radius: 999px;
  border: 2.5px solid #0a0610;
  background: linear-gradient(180deg, #6b3ad8, #3a1a88);
  box-shadow: 0 0 0 1.5px rgba(255, 211, 106, 0.5), 0 2px 0 #0a0610;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== 差事頁（每日任務）優化 ===== */
.screen.bg-home.missions-screen {
  padding-bottom: 66px;
  gap: 5px;
}
/* 總進度條 */
.dm-summary {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 2px solid #0a0610;
  background: linear-gradient(180deg, rgba(40,24,64,0.95), rgba(18,12,32,0.96));
  box-shadow: 0 0 0 1px rgba(255,211,106,0.25);
}
.dm-sum-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--muted);
}
.dm-sum-head b { color: var(--neon-gold); font-size: 0.86rem; }
.dm-sum-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
  border: 1px solid #0a0610;
}
.dm-sum-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2de2ff, #ffd36a, #ff2d95);
  transition: width 0.3s ease;
}
/* 清單：佔滿剩餘高度、可滚動，唔會被底欄遮住 */
.dm-list {
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 2px 6px;
  max-height: none !important;
  -webkit-overflow-scrolling: touch;
}
.dm-row {
  padding: 9px 10px;
  gap: 8px;
  align-items: flex-start;
  flex-shrink: 0;
}
.dm-name {
  font-size: 0.86rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.dm-row.ready .dm-name::before { content: "★"; color: var(--neon-gold); font-size: 0.72rem; }
.dm-row.claimed .dm-name::before { content: "✓"; color: var(--neon-lime); font-size: 0.72rem; }
.dm-desc { font-size: 0.68rem; line-height: 1.3; margin-top: 1px; }
.dm-bar { margin-top: 5px; height: 5px; }
.dm-row.ready .dm-bar > span { background: linear-gradient(90deg, #ffd36a, #b8ff4a); }
.dm-meta { margin-top: 4px; gap: 4px 10px; font-size: 0.64rem; align-items: center; }
.dm-prog { font-variant-numeric: tabular-nums; }
.dm-reward { display: inline-flex; flex-wrap: wrap; gap: 3px; }
/* 獎勵小標籤 */
.dm-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  border: 1.5px solid #0a0610;
  line-height: 1.5;
}
.dm-chip.soul { background: rgba(255,45,149,0.22); color: #ffc2e2; }
.dm-chip.gold { background: rgba(255,211,106,0.22); color: #ffe6a8; }
.dm-chip.xp { background: rgba(45,226,255,0.2); color: #b7f2ff; }
.dm-chip.luck { background: rgba(184,255,74,0.2); color: #ddffb0; }
.dm-act { align-self: center; }
.dm-act .btn {
  padding: 4px 9px !important;
  font-size: 0.66rem !important;
  min-height: 0 !important;
  white-space: nowrap;
}
.dm-act .btn.gold { animation: dm-ready-pulse 1.6s ease-in-out infinite; }
@keyframes dm-ready-pulse {
  0%, 100% { box-shadow: 0 2px 0 #0a0610, 0 0 8px rgba(255,211,106,0.5); }
  50% { box-shadow: 0 2px 0 #0a0610, 0 0 18px rgba(255,211,106,0.95); }
}
/* 分類小標 */
.dm-group-label {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--neon-cyan);
  padding: 2px 2px 0;
  opacity: 0.9;
}

/* 橫屏：兩欄 */
@media (orientation: landscape) and (max-width: 1024px) {
  .dm-list { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .dm-row { flex: 1 1 calc(50% - 7px); min-width: 250px; }
  .dm-summary { padding: 4px 8px; }
}

/* 差事清單底部留白：最後一項唔會貼住底欄 */
.screen.bg-home.missions-screen .dm-list { padding-bottom: 12px !important; }
.screen.bg-home.missions-screen { padding-bottom: 72px; }

.dm-sum-note {
  font-size: 0.55rem;
  font-weight: 700;
  color: rgba(180,158,196,0.8);
  text-align: center;
  letter-spacing: 0.02em;
}

/* 聲望貨幣 */
.chip.fame {
  color: #d9b3ff;
  border-color: #7a4fb5;
  box-shadow: 0 0 10px rgba(184,120,255,0.3);
}
.chip.fame .dot { background: #b878ff; box-shadow: 0 0 8px #b878ff; }
.dm-chip.fame { background: rgba(184,120,255,0.22); color: #e3c8ff; }

/* ===== 茶記：聲望換特殊卡 ===== */
.screen.bg-soft.tea-screen { padding-bottom: 68px; gap: 5px; }
.tea-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px;
  overflow: hidden;
}
.tea-intro {
  margin: 0;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}
.tea-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-bottom: 8px;
}
.tea-card {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #2a1a3cf2, #12081cf2);
  box-shadow: 0 0 0 1px rgba(184,120,255,0.35), 0 3px 0 #0a0610;
  flex-shrink: 0;
}
.tea-card.can { box-shadow: 0 0 0 2px rgba(255,211,106,0.7), 0 0 14px rgba(184,120,255,0.35); }
.tea-card.owned { opacity: 0.6; filter: grayscale(0.4); }
.tea-art {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #0a0610;
  background: #0d0814;
}
.tea-art img { display: block; width: 100%; height: 76px; object-fit: cover; object-position: center top; }
.tea-badge {
  position: absolute; left: 3px; top: 3px;
  font-size: 0.5rem; font-weight: 900;
  padding: 1px 5px; border-radius: 4px;
  background: #2de2ff; color: #06202a; border: 1.5px solid #0a0610;
}
.tea-body { min-width: 0; }
.tea-name { font-size: 0.82rem; font-weight: 900; color: #fff; }
.tea-rare { font-size: 0.58rem; font-weight: 700; color: #c9a0ff; margin-top: 1px; }
.tea-blurb {
  margin: 3px 0 0; font-size: 0.58rem; line-height: 1.35; color: #c8b8d8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tea-price { margin-top: 4px; }
.tea-fame {
  display: inline-block;
  font-size: 0.62rem; font-weight: 900;
  color: #1a1020; background: linear-gradient(180deg, #e3c8ff, #b878ff);
  border: 2px solid #0a0610; border-radius: 6px; padding: 0 6px;
}
.tea-act { flex-shrink: 0; }
.tea-act .btn { padding: 4px 9px !important; font-size: 0.66rem !important; min-height: 0 !important; white-space: nowrap; }

@media (orientation: landscape) and (max-width: 1024px) {
  .tea-list { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
  .tea-card { flex: 1 1 calc(50% - 7px); min-width: 260px; grid-template-columns: 56px minmax(0,1fr) auto; }
  .tea-art img { height: 56px; }
}

/* ===== 茶記卡可點擊：問號提示 + 詳情彈窗 ===== */
.tea-card { cursor: pointer; transition: transform 0.08s ease, box-shadow 0.15s ease; }
.tea-card:active { transform: scale(0.995); }
.tea-card:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.tea-name { display: flex; align-items: center; gap: 5px; }
.tea-help-ico {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid #0a0610;
  background: var(--neon-cyan);
  color: #06202a;
  font-size: 0.52rem;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
}
.tea-tap-hint {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.56rem;
  color: var(--neon-cyan);
  opacity: 0.9;
}
.tea-detail-mask { z-index: 80; }
.tea-detail-artbox { width: 100%; height: auto; display: flex; align-items: center; justify-content: center; }
.tea-detail-artbox img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(68vh, 620px);
  object-fit: contain;
  object-position: center;
  display: block;
}
.tea-detail-rich .bc-skills { margin-top: 4px; }
.tea-detail-price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 8px;
}
.tea-detail-state { font-size: 0.62rem; font-weight: 800; color: var(--neon-lime); }
.tea-detail-buy {
  width: 100%;
  font-size: 0.82rem !important;
  padding: 8px 10px !important;
  min-height: 0 !important;
}

/* 橫屏：茶記詳情彈窗收緊圖片高度，確保說明＋按鈕可見 */
@media (orientation: landscape) and (max-width: 1024px) {
  .tea-detail-mask { padding: 8px 12px 10px; }
  .tea-detail-mask .album-detail-sheet {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    column-gap: 10px;
    max-height: 96%;
    padding: 8px 10px 8px;
  }
  .tea-detail-mask .album-detail-x { top: 4px; right: 4px; width: 22px; height: 22px; font-size: 0.9rem; }
  .tea-detail-mask .album-detail-top {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
    padding: 2px 26px 2px 0;
  }
  .tea-detail-mask .album-detail-stars { justify-content: flex-start; margin-bottom: 2px; }
  .tea-detail-mask .album-detail-name { padding: 2px 10px; font-size: 0.9rem; }
  .tea-detail-mask .album-detail-art {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 100%;
    max-height: 100%;
    margin: 0;
    align-self: start;
    /* t388：唔再鎖 3:4，改為完整顯示（contain），橫圖唔會被切 */
  }
  .tea-detail-mask .album-detail-body {
    grid-column: 2;
    grid-row: 2;
    margin: 4px 0 0;
    overflow-y: auto;
    min-height: 0;
  }
  .tea-detail-mask .tea-detail-price { grid-column: 2; grid-row: 3; margin: 6px 0 4px; justify-content: flex-start; }
  .tea-detail-mask .tea-detail-buy { grid-column: 2; grid-row: 4; }
  .tea-detail-mask .album-detail-foot { grid-column: 1 / -1; grid-row: 5; margin-top: 4px; }
}

/* 預設故事包標記 */
.pack-default-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1.5px solid #0a0610;
  background: var(--neon-gold);
  color: #1a1020;
  font-size: 0.52rem;
  font-weight: 900;
  vertical-align: middle;
}

/* ===================================================================
   t387：結果浮現 + 自動前進
   總導演：「戰鬥後、事件後才以浮現方式顯示，免按『繼續』或『確定』。」
   - .soft-reveal：結果內容浮現（fade + 上浮），逐項延遲，睇落似逐條彈出
   - .auto-bar：底部進度條，時間到自動前進；點畫面任何位置可即時跳過
   =================================================================== */

/* 結果內容浮現 */
.soft-reveal {
  animation: softRevealIn 0.46s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes softRevealIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* 結果條（已結算 + 獎勵 chips）遲一點浮現 */
.soft-reveal .soft-result-bar {
  animation: softRevealUp 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) 0.08s both;
}
/* 獎勵面板再遲一點 */
.soft-reveal .soft-panel {
  animation: softRevealUp 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) 0.18s both;
}
/* 戰鬥結果橫幅 */
.soft-reveal .result-banner {
  animation: softRevealPop 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes softRevealUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes softRevealPop {
  0%   { opacity: 0; transform: scale(0.86); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* t395：點擊繼續提示條（取代 t387 的自動倒數進度條） */
.auto-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
  margin: 0 auto 2px;
  width: auto;
  max-width: 100%;
  border-radius: 99px;
  border: 1.5px solid rgba(61, 255, 240, 0.32);
  background: rgba(61, 255, 240, 0.07);
  color: rgba(233, 220, 255, 0.8);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  animation: tapContinuePulse 2.4s ease-in-out infinite;
  /* soft-cta 係 column，要自己置中以保持藥丸形 */
  align-self: center;
  flex: 0 0 auto;
  box-sizing: border-box;
}
.auto-bar:active { transform: translateY(1px); }

/* 向下小箭頭（脈衝） */
.tap-continue-ico {
  font-size: 0.6rem;
  line-height: 1;
  color: rgba(61, 255, 240, 0.85);
  animation: tapContinueBounce 1.5s ease-in-out infinite;
}
@keyframes tapContinueBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(2px); opacity: 1; }
}
@keyframes tapContinuePulse {
  0%, 100% { border-color: rgba(61, 255, 240, 0.28); }
  50%      { border-color: rgba(61, 255, 240, 0.55); }
}

.auto-bar-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: rgba(233, 220, 255, 0.82);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* 舊有的進度條元素（已不再輸出，保留安全） */
.auto-bar-track { display: none; }

/* 尊重系統「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {
  .soft-reveal,
  .soft-reveal .soft-result-bar,
  .soft-reveal .soft-panel,
  .soft-reveal .result-banner {
    animation: none;
  }
}

/* 橫屏：進度條再矮一點，唔好擠壓 */
@media (orientation: landscape) and (max-width: 1024px) {
  .auto-bar { padding: 0; gap: 2px; }
  .auto-bar-track { height: 3px; width: min(180px, 48%); }
  .auto-bar-label { font-size: 0.54rem; }
}

/* ===================================================================
   t390：九龍城寨黑市賭檔（麻雀殘局 + 字花骰寶）
   風格：城寨三樓鐵閘後面，黃燈、木枱、煙味。
   同 .mg-arcade 一樣用「枱面」概念，但色調偏暖（黃／棗紅），唔用街機青。
   =================================================================== */

/* 枱面（沿用 mg-arcade 結構，換暖色） */
.mg-arcade.bm-table,
.mg-arcade.dice-table {
  background:
    radial-gradient(120% 78% at 50% 0%, rgba(255, 200, 90, 0.14), transparent 62%),
    radial-gradient(100% 70% at 50% 100%, rgba(190, 40, 60, 0.16), transparent 64%),
    linear-gradient(180deg, #241a12 0%, #160e0a 58%, #0b0604 100%);
  box-shadow:
    0 0 0 2px rgba(255, 200, 106, 0.26),
    0 6px 0 #0a0610,
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -28px 46px rgba(0, 0, 0, 0.62);
}
.mg-arcade.bm-table::after,
.mg-arcade.dice-table::after {
  background: linear-gradient(90deg, transparent, #ffcc6a, #c4304a, transparent);
  opacity: 0.7;
}
/* 賭檔枱面嘅 CRT 掃描線可以淡啲（唔係街機） */
.mg-arcade.bm-table::before,
.mg-arcade.dice-table::before {
  opacity: 0.22;
}

/* 頂條：模式 / 進度 / 剩餘 */
.bm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 236, 200, 0.86);
  white-space: nowrap;
}
.bm-mode {
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(255, 200, 106, 0.16);
  border: 1px solid rgba(255, 200, 106, 0.42);
  color: #ffcc6a;
}
.bm-left { color: rgba(255, 236, 200, 0.7); }

/* ---------------- 麻雀牌 ---------------- */
.mj-steps { display: flex; gap: 3px; align-items: center; }
.mj-step-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 236, 200, 0.24);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.mj-step-dot.used { background: rgba(255, 120, 140, 0.28); }

.mj-hand {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  padding: 4px 2px;
  flex: 0 0 auto;
  min-height: 0;
}
.mj-tile {
  appearance: none;
  border: 2px solid #20140c;
  border-radius: 5px;
  background: linear-gradient(180deg, #f6efdd 0%, #e2d5ba 62%, #cbb99a 100%);
  color: #1a1008;
  padding: 3px 1px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 0 #120a06, 0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  transition: transform 0.07s, box-shadow 0.12s;
  min-height: 44px;
  touch-action: manipulation;
}
.mj-tile:active { transform: translateY(2px); box-shadow: 0 0 0 #120a06; }
.mj-tile .mj-num { font-size: 0.92rem; font-weight: 900; letter-spacing: 0; }
.mj-tile .mj-suit { font-size: 0.62rem; font-weight: 900; opacity: 0.78; }
/* 萬／筒／條 用不同顏色區分（唔靠圖，靠色） */
.mj-tile[data-mj-tile] .mj-suit { color: #1a1008; }
.mj-tile.drawn {
  background: linear-gradient(180deg, #fff6c8 0%, #ffe08a 60%, #f0c45c 100%);
  box-shadow: 0 2px 0 #120a06, 0 0 0 2px rgba(255, 200, 106, 0.8) inset, 0 0 10px rgba(255, 200, 106, 0.5);
}
.mj-drawn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
  flex: 0 0 auto;
}
.mj-drawn-label { font-size: 0.6rem; font-weight: 900; color: #ffcc6a; letter-spacing: 0.06em; }
.mj-drawn .mj-tile { width: 46px; }
.mj-hint {
  margin: 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 236, 200, 0.55);
  text-align: center;
  line-height: 1.3;
  flex: 0 0 auto;
}
.mj-result { margin: 0 4px; }

/* ---------------- 骰寶 ---------------- */
.dice-table .dice-score { color: #ffcc6a; }
.dice-last {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 2px solid #20140c;
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.08), rgba(0, 0, 0, 0.35));
  flex: 0 0 auto;
}
.dice-last.empty {
  font-size: 0.66rem;
  font-weight: 800;
  color: rgba(255, 236, 200, 0.5);
  border-style: dashed;
}
.dice-last .dice-faces { font-size: 1.5rem; letter-spacing: 2px; line-height: 1; }
.dice-last .dice-sum { font-size: 1.12rem; font-weight: 900; color: #ffcc6a; }
.dice-last .dice-side {
  font-size: 0.7rem; font-weight: 900;
  padding: 2px 8px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.dice-last.big .dice-side { background: rgba(255, 120, 90, 0.28); color: #ffd2c0; }
.dice-last.small .dice-side { background: rgba(90, 200, 255, 0.26); color: #cbefff; }
.dice-last.triple .dice-side { background: rgba(255, 200, 106, 0.3); color: #ffe9b8; }

.dice-history {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px;
  flex: 0 0 auto;
}
.dice-hist {
  font-size: 0.56rem;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}
.dice-hist.big { color: #ffb8a0; border-color: rgba(255, 120, 90, 0.45); }
.dice-hist.small { color: #a8ddff; border-color: rgba(90, 200, 255, 0.45); }
.dice-hist.triple { color: #ffe9b8; border-color: rgba(255, 200, 106, 0.55); }
.dice-hist-empty { font-size: 0.58rem; font-weight: 700; color: rgba(255, 236, 200, 0.42); }
.dice-result { margin: 0 4px; }

/* 骰寶：大／細 兩粒大掣並排 */
.mt-cta { flex-direction: row !important; flex-wrap: wrap; justify-content: center; }
.mt-cta .btn { flex: 1 1 40%; min-width: 0; }
.mt-cta .auto-bar, .mt-cta .btn-abandon-compact { flex: 1 1 100%; }

/* 橫屏：牌再細一號，確保一屏睇完 */
@media (orientation: landscape) and (max-width: 1024px) {
  .mj-hand { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .mj-tile { min-height: 34px; padding: 2px 1px; }
  .mj-tile .mj-num { font-size: 0.78rem; }
  .mj-tile .mj-suit { font-size: 0.54rem; }
  .dice-last { padding: 4px; }
  .dice-last .dice-faces { font-size: 1.15rem; }
  .mj-hint { font-size: 0.54rem; }
}

/* t390：結果階段嘅麻雀牌鎖住（唔可以再點） */
.mj-tile.locked,
.mj-tile[disabled] {
  cursor: default;
  opacity: 0.62;
  filter: saturate(0.55);
  box-shadow: 0 2px 0 #120a06;
}
.mj-tile.locked:active { transform: none; }

/* ===================================================================
   t390：戰鬥卡殘頁（卡冊內）
   =================================================================== */
.shard-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 2px 5px;
  padding: 5px 9px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 200, 106, 0.42);
  background: linear-gradient(180deg, rgba(255, 200, 106, 0.14), rgba(120, 60, 20, 0.2));
  color: #ffe9b8;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  line-height: 1.25;
  flex: 0 0 auto;
}
.shard-banner.ready {
  border-color: rgba(255, 200, 106, 0.9);
  box-shadow: 0 0 10px rgba(255, 200, 106, 0.35);
}
.shard-banner.empty {
  opacity: 0.72;
  border-style: dashed;
}
.shard-banner b { color: #ffcc6a; }
.shard-go { color: var(--neon-cyan, #3dfff0); font-weight: 900; }
.shard-ico { font-size: 0.9rem; line-height: 1; }
.shard-text { flex: 1 1 auto; min-width: 0; }
.shard-arrow { color: rgba(255, 233, 184, 0.55); }

/* 兌換面板 */
.shard-sheet { max-width: 420px; }
.shard-note {
  margin: 0 0 8px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--muted, #a08ab8);
  line-height: 1.4;
}
.shard-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.shard-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 64px;
  gap: 8px;
  align-items: center;
  padding: 6px;
  border-radius: 10px;
  border: 1.5px solid #2a1c36;
  background: rgba(26, 16, 40, 0.8);
}
.shard-row.ready { border-color: rgba(255, 200, 106, 0.8); }
.shard-art {
  width: 46px; height: 61px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid #0a0610;
  display: block;
}
.shard-info { min-width: 0; }
.shard-name {
  font-size: 0.74rem; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.shard-bar {
  height: 5px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 2px;
}
.shard-bar > i {
  display: block; height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ffcc6a, #ff8a3d);
}
.shard-count { font-size: 0.6rem; font-weight: 800; color: rgba(255, 233, 184, 0.72); }
.shard-btn {
  font-size: 0.68rem !important;
  padding: 6px 4px !important;
  min-height: 0 !important;
}
.shard-empty { font-size: 0.7rem; color: var(--muted, #a08ab8); }

/* ===================================================================
   t392：殘頁道具圖（assets/shards/shard-item.jpg）
   來源圖 765×1024（3:4 直圖，仿古殘破紙 + 木桌底）
   - .shard-item-ico：橫幅上的小圖示（圓角、金邊）
   - .shard-pair：兌換面板「殘頁 → 卡」的對照
   - .shard-gain：結果頁「殘頁 ×N」連圖
   =================================================================== */

.shard-item-ico {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(255, 200, 106, 0.5);
  box-shadow: 0 0 6px rgba(255, 200, 106, 0.28);
  flex: 0 0 auto;
  display: block;
}

/* 兌換面板：殘頁圖 → 可換卡 */
.shard-pair {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.shard-pair .shard-art { width: 38px; height: 51px; }
.shard-pair .shard-art.shard-art-item {
  width: 34px;
  height: 45px;
  border-color: rgba(255, 200, 106, 0.55);
  box-shadow: 0 0 6px rgba(255, 200, 106, 0.3);
}
.shard-arrow-mid {
  font-size: 0.62rem;
  font-weight: 900;
  color: rgba(255, 233, 184, 0.6);
  line-height: 1;
}

/* 兌換面板 grid 要容納兩張圖 */
.shard-row {
  grid-template-columns: auto minmax(0, 1fr) 64px;
}

/* 結果頁「殘頁 ×N」連圖 */
.shard-gain {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--neon-cyan, #3dfff0);
  vertical-align: middle;
}
.shard-gain .shard-item-ico {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.shard-gain b { font-weight: 900; }

/* 橫屏：再細一號，唔好擠 */
@media (orientation: landscape) and (max-width: 1024px) {
  .shard-pair .shard-art { width: 30px; height: 40px; }
  .shard-pair .shard-art.shard-art-item { width: 27px; height: 36px; }
  .shard-item-ico { width: 17px; height: 17px; }
}

/* ===================================================================
   t397：送卡／抽卡三選一——顯示卡牌內容摘要
   總導演：「免費技能卡和免費戰鬥卡事件選擇，要顯示卡牌內容」
   =================================================================== */
.gift-card-desc {
  font-size: 0.58rem;
  line-height: 1.32;
  font-weight: 700;
  color: rgba(233, 220, 255, 0.72);
  margin: 2px 0 3px;
  /* 最多 3 行，超出省略（完整內容可長按睇） */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* 已收下／未揀的卡：摘要唔好搶眼 */
.gift-card.dimmed .gift-card-desc { opacity: 0.45; }
.gift-card.picked .gift-card-desc { color: rgba(255, 233, 184, 0.9); }

/* 送卡卡身可以高少少容納摘要 */
.shop-card.gift-card .shop-card-body { gap: 1px; }
.shop-card.gift-card { min-height: 0; }

/* 橫屏：摘要收成 2 行，避免擠爆 */
@media (orientation: landscape) and (max-width: 1024px) {
  .gift-card-desc {
    font-size: 0.52rem;
    -webkit-line-clamp: 2;
    margin: 1px 0 2px;
  }
}

/* ===================================================================
   t400：卡冊裝備「裝上／卸下」按鈕
   人生中途冇準備頁，玩家要喺卡冊換裝
   =================================================================== */
.album-gear-btn {
  width: 100%;
  font-size: 0.74rem !important;
  padding: 7px 10px !important;
  min-height: 0 !important;
  margin: 2px 0 4px;
}

/* ===================================================================
   t406：office_ballad 四拍敘事
   intro（進場短敘） → dialogue（分頁對白） → choose（選擇） → outcome（專屬後果）
   =================================================================== */

/* 進場短敘 */
.of-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
}
.of-intro-art {
  width: 100%;
  max-height: 34vh;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid #0a0610;
}
.of-intro-name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--neon-gold, #ffcc6a);
  letter-spacing: 0.04em;
}
.of-intro-desc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.62;
  color: #efe6f8;
}

/* 分頁對白 */
.of-dialogue-paged {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(26, 16, 40, 0.72);
  border: 1.5px solid #2a1c36;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.of-dialogue-paged .dlg-line {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
}
.of-dialogue-foot {
  margin-top: auto;
  text-align: right;
}
.of-page-no {
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(233, 220, 255, 0.5);
  letter-spacing: 0.06em;
}

/* 專屬後果 */
.of-outcome {
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(61, 255, 240, 0.45);
  background:
    linear-gradient(180deg, rgba(61, 255, 240, 0.1), rgba(10, 6, 18, 0.6));
  animation: ofOutcomeIn 0.42s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes ofOutcomeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.of-outcome-kicker {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--neon-cyan, #3dfff0);
  margin-bottom: 4px;
}
.of-outcome-choice {
  margin: 0 0 8px;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.4;
  color: #fff;
}
.of-outcome-body {
  font-size: 0.82rem;
  line-height: 1.7;
  color: #efe6f8;
  white-space: pre-wrap;
}

/* CTA 掣（分階段） */
.of-cta-main {
  width: 100%;
  margin: 0 0 4px;
}

/* 詳情頁未解鎖提示 */
.of-locked-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  margin: 4px 0 8px;
  border-radius: 10px;
  border: 1.5px dashed rgba(255, 200, 106, 0.4);
  background: rgba(255, 200, 106, 0.06);
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(255, 233, 184, 0.82);
}
.of-locked-ico { font-size: 1rem; line-height: 1.2; }

/* 結局卡：全屏停住 */
.of-ending-scroll { padding-bottom: 6px; }

/* t408（§2.5）：結局對白要有底板／安全區，唔可以裸叠街景被裁 */
.of-ending-dialogue {
  margin: 8px 4px;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 8, 20, 0.78);
  backdrop-filter: blur(2px);
}
.of-ending-dialogue .dlg-line {
  font-size: 0.93rem;
  line-height: 1.72;
  color: #f6f0ff;
}
.of-ending-dialogue .dlg-who { color: var(--neon-cyan, #3dfff0); }
.of-ending-voice {
  margin: 8px 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--neon-pink, #ff2d95);
  background: rgba(255, 45, 149, 0.08);
}
.of-ending-who {
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--neon-pink, #ff2d95);
  margin-bottom: 3px;
}
.of-ending-voice p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: #efe6f8;
}
.of-ending-ok {
  width: 100%;
  margin: 0 0 4px;
}
/* t408（§2.7）：說明故事包歲月獨立，避免玩家以為人生歲數被重置 */
.of-ending-note {
  margin: 0 2px 8px;
  font-size: 0.66rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(233, 220, 255, 0.62);
}

@media (orientation: landscape) and (max-width: 1024px) {
  .of-intro-art { max-height: 26vh; }
  .of-outcome-body { font-size: 0.76rem; line-height: 1.55; }
  .of-dialogue-paged { min-height: 70px; }
}

/* ===================================================================
 * t408（§2.1）輓歌 UI：收緊空白、加大字級
 *
 * 病徵：intro／dialogue／choose／outcome 大片空紫底，正文顯得細。
 * 做法：內容區改 min-height:auto + flex 收斂（唔再撐滿），
 *       正文／對白字級升一檔以上，padding 削減。
 * =================================================================== */

/* 內容區：貼內容，唔再為撐滿而留大片空底 */
.of-hud { flex: 0 0 auto; }
.office-node {
  flex: 1 1 auto;
  min-height: auto;
  max-height: 100%;
  gap: 10px;
  padding: 12px 12px 14px;
  /* 內容貼頂，多餘空間平均分到上下（唔會全部堆在下面） */
  justify-content: flex-start;
}

/* 進場短敘：字級明顯加大、圖片撐滿剩餘空間（唔留大片空底） */
.of-intro {
  gap: 9px;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.of-intro-art {
  flex: 1 1 auto;
  width: 100%;
  min-height: 120px;
  max-height: 46vh;
  object-fit: cover;
}
.of-intro-name {
  font-size: 1.24rem;
  line-height: 1.3;
}
.of-intro-desc {
  font-size: 0.99rem;
  line-height: 1.78;
  color: #f6f0ff;
}

/* 對白：加大、加行距，取消固定 min-height（唔好為空底撐高） */
.of-dialogue-paged {
  min-height: 0;
  padding: 12px 13px;
  gap: 10px;
}
.of-dialogue-paged .dlg-line {
  font-size: 0.96rem;
  line-height: 1.72;
}
.of-dialogue-paged .dlg-who {
  font-size: 0.9rem;
}
.of-page-no {
  font-size: 0.66rem;
  color: rgba(233, 220, 255, 0.62);
}

/* 選擇卡：加大可讀性 */
.of-choice { padding: 13px 13px 14px; }
.of-choice-tag { font-size: 0.62rem; }
.of-choice-text {
  font-size: 0.95rem;
  line-height: 1.5;
}
.of-choice-unknown { font-size: 0.68rem; }

/* 後果場：字級加大、減 padding */
.of-outcome { padding: 13px 14px 15px; }
.of-outcome-kicker { font-size: 0.68rem; }
.of-outcome-choice {
  font-size: 1.02rem;
  line-height: 1.45;
  margin-bottom: 9px;
}
.of-outcome-body {
  font-size: 0.99rem;
  line-height: 1.82;
  color: #f6f0ff;
}

/* t408（§2.4）：後果場顯示人生旗標（口碑／人情／疲勞／風險） */
.of-outcome-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.of-flag-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #d8f7ff;
  background: rgba(61, 255, 240, 0.11);
  border: 1px solid rgba(61, 255, 240, 0.34);
}

/* 「不設獎賞」提示：縮細並靠下，唔搶中央位置 */
.of-note {
  font-size: 0.58rem;
  opacity: 0.72;
  margin-top: auto;
  padding-top: 2px;
}

/* ===================================================================
 * t408（§1.3）命運後果場
 * =================================================================== */
.fate-result {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 11px 12px;
  border-radius: 12px;
  border: 2px solid rgba(61, 255, 240, 0.4);
  background: linear-gradient(180deg, rgba(61, 255, 240, 0.09), rgba(10, 6, 18, 0.62));
  animation: ofOutcomeIn 0.4s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
.fate-result-art {
  width: 100%;
  max-height: 26vh;
  object-fit: cover;
  border-radius: 9px;
  border: 2px solid #0a0610;
}
.fate-result-story {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #f6f0ff;
}
.fate-result-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.fate-result-bar .srb-ico { color: var(--neon-gold, #ffcc6a); }
.fate-result-bar .srb-text {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: rgba(233, 220, 255, 0.75);
}

/* 籌碼：負值用減益色（紅），唔用綠色劇透「好壞」但數字要睇得明 */
.srb-chip.attr.down {
  background: rgba(255, 77, 106, 0.16);
  border-color: rgba(255, 77, 106, 0.45);
  color: #ffb3c1;
}

/* ===================================================================
 * t408（§3.2）通用「事件經過」拍：過程＋可見結果，先撳繼續才過年
 * =================================================================== */
.eb-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 11px 12px 13px;
  border-radius: 12px;
  border: 3px solid #0a0610;
  background: linear-gradient(180deg, #1a1028f2, #100818f7);
  box-shadow: 0 0 0 2px rgba(45, 226, 255, 0.28), 0 3px 0 #0a0610;
}
.eb-art-frame {
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid #0a0610;
}
.eb-art {
  display: block;
  width: 100%;
  max-height: 30vh;
  object-fit: cover;
}
.eb-name {
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.32;
  color: var(--neon-gold, #ffcc6a);
  letter-spacing: 0.03em;
}
.eb-desc {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #f6f0ff;
}
.eb-dialogue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 10px;
  background: rgba(26, 16, 40, 0.72);
  border: 1.5px solid #2a1c36;
}
.eb-dialogue .dlg-line {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.7;
}
.eb-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.eb-result .srb-ico { color: var(--neon-gold, #ffcc6a); }
.eb-result .srb-text {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: rgba(233, 220, 255, 0.75);
}

/* HUD 短暫 +N 跳字（§1.3 第 4 點） */.hud-float {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--neon-gold, #ffcc6a);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  animation: hudFloatUp 1.1s ease-out both;
}
@keyframes hudFloatUp {
  0%   { opacity: 0; transform: translateY(6px) scale(0.94); }
  18%  { opacity: 1; transform: translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateY(-10px) scale(1); }
  100% { opacity: 0; transform: translateY(-22px) scale(0.98); }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .of-intro-art { max-height: 24vh; }
  .of-intro-desc { font-size: 0.9rem; line-height: 1.62; }
  .of-dialogue-paged .dlg-line { font-size: 0.88rem; line-height: 1.55; }
  .of-outcome-body { font-size: 0.9rem; line-height: 1.6; }
  .fate-result-art { max-height: 20vh; }
  .fate-result-story { font-size: 0.9rem; line-height: 1.62; }
}