/*
 * =========================================================
 * ZELO GAME CSS
 * Clean Rebuild
 * Version: 202607170842-css-clean-secret-bottom
 *
 * Notes:
 * - 已整理你目前貼上的 game.css
 * - 移除重複 result patch
 * - 移除重複 battle patch
 * - 移除重複 select background patch
 * - 保留目前最後有效的 result layout
 * - 新增選擇頁下方隱藏陀螺區
 * - 選擇頁允許往下滑動
 * =========================================================
 */


/*
 * =========================================================
 * ZELO GAME CSS
 * Clean Rebuild
 * Version: 202607281914-reward-result-scroll-fix1
 *
 * Notes:
 * - 已整理目前 game.css
 * - 保留目前最後有效的 result layout
 * - 新增結果頁獎勵 Banner 可下滑支援
 * - 新增獎勵卡片商品圖區域支援
 * - 修正獎勵文字與按鈕過暗問題
 * - 保留選擇頁下方隱藏陀螺區
 * - 選擇頁允許往下滑動
 * =========================================================
 */


/* =========================================================
   01. Root / Reset
   ========================================================= */

:root {
  --zg-app-width: 100vw;
  --zg-app-height: 100vh;
  --zg-safe-width: 100vw;

  --zg-home-bg-image: none;
  --zg-arena-bg-image: none;

  --zg-red: #e60012;
  --zg-red-light: #ff3b3b;
  --zg-red-dark: #a50010;

  --zg-blue: #1a8cff;
  --zg-blue-light: #57f2ff;

  --zg-green: #06c755;
  --zg-green-light: #8dffb8;

  --zg-gold: #ffd650;
  --zg-gold-light: #fff2a8;
  --zg-orange: #ff9f1c;

  --zg-purple: #9b5cff;
  --zg-cyan: #57f2ff;

  --zg-bg: #050611;
  --zg-panel: rgba(0, 0, 0, 0.3);
  --zg-card: rgba(255, 255, 255, 0.08);
  --zg-card-strong: rgba(255, 255, 255, 0.14);
  --zg-border: rgba(255, 255, 255, 0.14);

  --zg-text: #ffffff;
  --zg-muted: rgba(255, 255, 255, 0.72);
  --zg-dark: #111827;

  --zg-radius: 24px;
  --zg-shadow: 0 20px 60px rgba(0, 0, 0, 0.42);

  --zg-battle-top-size: 84px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0 !important;
  padding: 0 !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  min-height: 100% !important;

  overflow-x: hidden !important;

  background: #090612 !important;
  color: var(--zg-text) !important;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Noto Sans TC",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif !important;
}

html {
  height: auto !important;
}

body {
  min-height: 100% !important;

  background:
    radial-gradient(circle at 20% 10%, rgba(230, 0, 18, 0.22), transparent 32%),
    radial-gradient(circle at 86% 16%, rgba(87, 242, 255, 0.18), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(155, 92, 255, 0.22), transparent 42%),
    #050611 !important;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

img {
  max-width: 100%;
}

button,
[role="button"],
a {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   02. Shopify / Header / Menu Hide
   ========================================================= */

body[data-zg-screen] header,
body[data-zg-screen] nav,
body[data-zg-screen] .site-header,
body[data-zg-screen] .header,
body[data-zg-screen] .navbar,
body[data-zg-screen] .navigation,
body[data-zg-screen] .menu,
body[data-zg-screen] .drawer,
body[data-zg-screen] .drawer-menu,
body[data-zg-screen] .mobile-menu,
body[data-zg-screen] #menu,
body[data-zg-screen] #shopify-section-header,
body[data-zg-screen] .shopify-section-header,
body[data-zg-screen] .announcement-bar,
body[data-zg-screen] #shopify-section-announcement-bar,
body[data-zg-screen] .header-wrapper,
body[data-zg-screen] .shopify-section-group-header-group,
body:has(#zelo-liff-game) shopify-section[id*="header"],
body:has(#zelo-liff-game) #shopify-section-header,
body:has(#zelo-liff-game) header,
body:has(#zelo-liff-game) nav,
body:has(#zelo-liff-game) .header-wrapper,
body:has(#zelo-liff-game) .site-header,
body:has(#zelo-liff-game) sticky-header,
body:has(#zelo-liff-game) .announcement-bar,
body:has(#zelo-liff-game) #shopify-section-announcement-bar {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;

  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;

  overflow: hidden !important;
  opacity: 0 !important;
}

body[data-zg-screen],
body:has(#zelo-liff-game),
html {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body[data-zg-screen] main,
body[data-zg-screen] #MainContent,
body[data-zg-screen] .content-for-layout,
body[data-zg-screen] .page-width,
body[data-zg-screen] .shopify-section,
body[data-zg-screen] .template-page,
body[data-zg-screen] .page-container,
body:has(#zelo-liff-game) main,
body:has(#zelo-liff-game) #MainContent,
body:has(#zelo-liff-game) .content-for-layout {
  padding-top: 0 !important;
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
}


/* =========================================================
   03. App Fullscreen Shell
   ========================================================= */

body[data-zg-screen] {
  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  min-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #090612 !important;
}

#zelo-liff-game,
#zg-app,
#app,
.zg-app {
  isolation: isolate;
  color: var(--zg-text);
}

body[data-zg-screen] #zelo-liff-game,
#zelo-liff-game.zg-clean-root,
#zelo-liff-game.zg-app {
  position: fixed !important;
  inset: 0 auto auto 0 !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  background: #090612 !important;

  z-index: 999999 !important;
}

body[data-zg-screen] .zg-clean-root {
  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.zg-brand,
.zg-pill,
.zg-bg-logo,
.zg-fixed-logo {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}


/* ------------------------------
   Result Page Scroll Unlock
   結果頁解除固定高度，可往下滑
   ------------------------------ */

html.zg-result-scroll-unlock,
body.zg-result-scroll-unlock {
  height: auto !important;
  min-height: 100% !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] {
  height: auto !important;
  min-height: 100% !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  background: #090612 !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] #zelo-liff-game,
body.zg-result-scroll-unlock[data-zg-screen="result"] #zelo-liff-game.zg-clean-root,
body.zg-result-scroll-unlock[data-zg-screen="result"] #zelo-liff-game.zg-app {
  position: relative !important;
  inset: auto !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow-y: visible !important;
  overflow-x: hidden !important;

  z-index: 999999 !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] .zg-clean-root {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow-y: visible !important;
  overflow-x: hidden !important;
}


/* =========================================================
   04. Screens Common
   ========================================================= */

.zg-screen {
  position: relative !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding:
    max(16px, env(safe-area-inset-top, 0px))
    0
    max(18px, env(safe-area-inset-bottom, 0px)) !important;

  display: none !important;
  flex-direction: column !important;

  overflow-x: hidden !important;
  overflow-y: hidden !important;

  color: var(--zg-text) !important;

  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(255,45,85,0.22), transparent 34%),
    radial-gradient(circle at 86% 10%, rgba(0,210,255,0.18), transparent 36%),
    linear-gradient(160deg, #120617 0%, #06111e 58%, #050711 100%) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.zg-screen.active,
.zg-screen.is-active {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.zg-screen[hidden],
.zg-screen:not(.active):not(.is-active) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-zg-screen]:not([data-zg-screen="start"]):not([data-zg-screen="home"]) #screen-start,
body[data-zg-screen]:not([data-zg-screen="select"]) #screen-select,
body[data-zg-screen]:not([data-zg-screen="battle"]) #screen-battle,
body[data-zg-screen]:not([data-zg-screen="result"]) #screen-result {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.zg-main {
  position: relative !important;
  z-index: 3 !important;

  width: 100% !important;
  max-width: 860px !important;

  margin: 0 auto !important;
  padding: 28px 16px !important;

  flex: 1 1 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 18px !important;

  box-sizing: border-box !important;
}

.zg-bottom {
  position: relative !important;
  z-index: 5 !important;

  width: 100% !important;
  max-width: 860px !important;

  margin: 0 auto !important;
  padding:
    12px
    16px
    calc(12px + env(safe-area-inset-bottom, 0px)) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
}

.zg-topbar {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 50 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;

  min-height: 44px !important;
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
}

.zg-topbar-no-logo {
  justify-content: flex-end !important;
}


/* ------------------------------
   Result Screen Layout Override
   結果頁內容允許延伸，避免獎勵 Banner 被截斷
   ------------------------------ */

body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result,
body.zg-result-scroll-unlock[data-zg-screen="result"] .zg-screen-result,
body.zg-result-scroll-unlock[data-zg-screen="result"] .zg-result-screen {
  display: flex !important;
  flex-direction: column !important;

  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow-y: visible !important;
  overflow-x: hidden !important;

  padding-bottom: 190px !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result.zg-screen {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;

  overflow-y: visible !important;
  overflow-x: hidden !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-main,
body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-result-main,
body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-result-content,
body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-result-body,
body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-result-extra,
body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-result-panel,
body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-result-section {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow: visible !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-main {
  justify-content: flex-start !important;
  flex: 0 0 auto !important;

  padding-bottom: 18px !important;
}

body.zg-result-scroll-unlock[data-zg-screen="result"] #screen-result .zg-bottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding:
    12px
    16px
    calc(14px + env(safe-area-inset-bottom, 0px)) !important;

  z-index: 9999999 !important;

  background:
    linear-gradient(
      to top,
      rgba(5, 4, 14, 0.98) 0%,
      rgba(5, 4, 14, 0.86) 68%,
      rgba(5, 4, 14, 0) 100%
    ) !important;
}



/* =========================================================
   05. Buttons / Toast / Utilities
   ========================================================= */

.zg-btn,
.zg-small-btn,
.zg-top-card,
.zg-charge-btn,
[data-zg-action] {
  pointer-events: auto !important;
  cursor: pointer !important;

  position: relative !important;
  z-index: 20 !important;
}

.zg-btn {
  width: 100% !important;
  min-height: 54px !important;

  padding: 14px 18px !important;

  border: 0 !important;
  border-radius: 999px !important;

  font-size: 17px !important;
  font-weight: 1000 !important;

  color: #fff !important;

  box-shadow:
    0 14px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;

  transition:
    transform 0.12s ease,
    filter 0.12s ease,
    box-shadow 0.12s ease !important;
}

.zg-btn:active {
  transform: translateY(2px) scale(0.99) !important;
  filter: brightness(0.92) !important;
}

.zg-btn[disabled],
.zg-btn.is-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.zg-btn-red {
  background: linear-gradient(135deg, #ff3b3b, #e60012, #a50010) !important;
  color: #fff !important;
}

.zg-btn-blue {
  background: linear-gradient(135deg, #57f2ff, #1a8cff, #194cff) !important;
}

.zg-btn-green {
  background: linear-gradient(135deg, #8dffb8, #06c755, #00933d) !important;
}

.zg-btn-white {
  color: #111827 !important;
  background: linear-gradient(135deg, #fff, #e9eefb) !important;
}

.zg-btn-gold {
  color: #211200 !important;

  background: linear-gradient(135deg, #fff2a8, #ffd650, #ff9f1c) !important;

  box-shadow:
    0 12px 26px rgba(255, 160, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

.zg-btn-dark {
  background:
    linear-gradient(135deg, rgba(42,48,68,0.96), rgba(16,20,34,0.96)) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,0.18) !important;
}

.zg-btn-line {
  background: #06c755 !important;
  color: #fff !important;

  border-color: rgba(255,255,255,0.18) !important;

  box-shadow:
    0 8px 18px rgba(6,199,85,0.26),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

.zg-small-btn {
  min-height: 36px !important;

  padding: 0 16px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.24) !important;

  background: rgba(34,42,58,0.92) !important;

  color: #fff !important;

  font-weight: 900 !important;
  font-size: 13px !important;

  backdrop-filter: blur(10px) !important;
}

.zg-toast,
#zg-toast {
  position: fixed !important;

  left: 50% !important;
  bottom: max(22px, env(safe-area-inset-bottom, 0px)) !important;

  z-index: 9999999 !important;

  transform: translateX(-50%) !important;

  width: max-content !important;
  max-width: calc(100vw - 36px) !important;

  padding: 12px 16px !important;

  border-radius: 999px !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  text-align: center !important;

  background:
    linear-gradient(180deg, rgba(20,24,42,0.96), rgba(5,7,22,0.96)) !important;

  border: 1px solid rgba(255,255,255,0.18) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.zg-hidden {
  display: none !important;
}

.zg-muted {
  color: rgba(255,255,255,0.62) !important;
}

.zg-center {
  text-align: center !important;
}

.zg-nowrap {
  white-space: nowrap !important;
}

.zg-soft-card {
  border-radius: 22px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)) !important;

  border: 1px solid rgba(255,255,255,0.14) !important;

  box-shadow:
    0 14px 34px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.16) !important;
}

[data-zelo-duplicate-hidden="true"] {
  display: none !important;
}


/* =========================================================
   06. Final Width Guard
   ========================================================= */

html,
body,
#zelo-liff-game,
.zg-app {
  max-width: var(--zg-app-width, 100vw) !important;
  overflow-x: hidden !important;
}

#zelo-liff-game,
#zelo-liff-game *,
.zg-screen,
.zg-screen * {
  box-sizing: border-box;
}


/* =========================================================
   07. Home / Start / Poster / Video
   ========================================================= */

#screen-start.zg-home-bg-screen,
#screen-start {
  width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;

  overflow: hidden !important;

  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,40,80,0.2), transparent 36%),
    radial-gradient(circle at 85% 15%, rgba(0,190,255,0.16), transparent 34%),
    linear-gradient(rgba(10, 8, 18, 0.16), rgba(10, 8, 18, 0.62)),
    var(--zg-home-bg-image) !important;

  background-size:
    cover,
    cover,
    cover,
    cover !important;

  background-position:
    center center,
    center center,
    center center,
    center center !important;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat !important;

  background-color: #120914 !important;
}

.zg-hero {
  position: absolute !important;
  right: 24px !important;
  top: 70px !important;

  font-size: 90px !important;
  opacity: 0.24 !important;

  pointer-events: none !important;
}

.zg-title {
  margin: 28vh 0 12px !important;

  text-align: left !important;

  font-size: clamp(46px, 12vw, 76px) !important;
  line-height: 0.95 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.06em !important;

  text-shadow:
    0 5px 0 rgba(0, 0, 0, 0.34),
    0 0 28px rgba(230, 0, 18, 0.28) !important;
}

.zg-highlight {
  color: #ff304a !important;
}

.zg-subtitle,
.zg-desc {
  margin: 0 !important;

  text-align: left !important;

  color: var(--zg-muted) !important;

  font-size: 15px !important;
  line-height: 1.65 !important;
  font-weight: 650 !important;
}

.zg-step-title {
  margin: 44px 0 0 !important;

  text-align: center !important;

  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;
}


/* ------------------------------
   Home Poster
   ------------------------------ */

.zg-home-poster-screen {
  width: 100% !important;
  min-height: var(--zg-app-height, 100vh) !important;

  background: #000 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}

.zg-home-poster-main {
  width: 100% !important;

  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 12px 12px 86px !important;

  box-sizing: border-box !important;
}

.zg-home-poster-img {
  width: 100% !important;
  max-width: 430px !important;

  height: auto !important;
  max-height: calc(var(--zg-app-height, 100vh) - 108px) !important;

  object-fit: contain !important;

  display: block !important;

  border-radius: 14px !important;

  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.16),
    0 18px 48px rgba(0, 0, 0, 0.72),
    0 0 34px rgba(0, 210, 255, 0.34) !important;
}

.zg-home-poster-bottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;

  z-index: 30 !important;

  display: flex !important;
  justify-content: center !important;

  padding: 0 16px !important;

  pointer-events: none !important;
  box-sizing: border-box !important;
}

.zg-home-poster-start-btn {
  width: min(88vw, 360px) !important;

  pointer-events: auto !important;

  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}


/* ------------------------------
   Home Video
   ------------------------------ */

.zg-home-video-screen {
  position: relative !important;

  width: 100% !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;

  background: #000 !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.zg-home-video {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  background: #000 !important;

  z-index: 1 !important;

  pointer-events: none !important;
}

.zg-home-video-overlay {
  position: absolute !important;
  inset: 0 !important;

  z-index: 2 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.02) 0%,
      rgba(0, 0, 0, 0.04) 55%,
      rgba(0, 0, 0, 0.38) 100%
    ) !important;
}

.zg-home-video-bottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;

  z-index: 5 !important;

  display: flex !important;
  justify-content: center !important;

  padding: 0 16px !important;

  box-sizing: border-box !important;
  pointer-events: none !important;
}

.zg-home-video-start-btn {
  width: min(88vw, 360px) !important;

  pointer-events: auto !important;

  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
}

.zg-home-music-hint {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + 72px) !important;

  transform: translateX(-50%) !important;

  z-index: 6 !important;

  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  border-radius: 999px !important;

  padding: 8px 16px !important;

  color: #fff !important;

  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;

  background: rgba(0, 0, 0, 0.48) !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;

  box-shadow:
    0 0 18px rgba(0, 200, 255, 0.35),
    0 8px 24px rgba(0, 0, 0, 0.45) !important;

  cursor: pointer !important;
  pointer-events: auto !important;
}

.zg-home-music-hint.is-hidden {
  opacity: 0 !important;

  transform: translateX(-50%) translateY(8px) !important;

  pointer-events: none !important;

  transition:
    opacity 0.25s ease,
    transform 0.25s ease !important;
}


/* =========================================================
   08. Select Page Base
   ========================================================= */

#screen-select,
#screen-select * {
  color: #ffffff !important;
}

#screen-select {
  text-align: center !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;

  background:
    radial-gradient(circle at 18% 12%, rgba(255, 30, 72, 0.32), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(0, 218, 255, 0.28), transparent 34%),
    radial-gradient(circle at 48% 105%, rgba(255, 212, 64, 0.18), transparent 42%),
    linear-gradient(160deg, #170316 0%, #08152a 48%, #020711 100%) !important;
}

#screen-select.zg-screen,
#screen-select.zg-select-screen {
  justify-content: flex-start !important;
  isolation: isolate !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#screen-select .zg-topbar,
#screen-select .zg-small-btn[data-zg-action="home"] {
  display: none !important;
}

#screen-select .zg-main,
#screen-select .zg-select-main {
  width: 100% !important;
  max-width: 860px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding:
    max(34px, calc(env(safe-area-inset-top, 0px) + 28px))
    16px
    calc(132px + env(safe-area-inset-bottom, 0px)) !important;

  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  min-height: auto !important;
  height: auto !important;
  max-height: none !important;

  overflow: visible !important;

  position: relative !important;
  z-index: 3 !important;
}

#screen-select .zg-step-title {
  width: 100% !important;

  margin:
    0
    auto
    0 !important;

  text-align: center !important;

  color: #ffffff !important;

  font-size: 32px !important;
  line-height: 1.15 !important;
  font-weight: 1000 !important;

  text-shadow:
    0 0 10px rgba(255,255,255,0.32),
    0 0 20px rgba(255,48,74,0.18) !important;
}

#screen-select .zg-desc,
#screen-select .zg-subtitle {
  width: 100% !important;
  max-width: 720px !important;

  margin:
    8px
    auto
    0 !important;

  text-align: center !important;

  color: rgba(255,255,255,0.9) !important;

  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 800 !important;
}


/* =========================================================
   09. Select Bottom Button
   ========================================================= */

#screen-select .zg-bottom {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding:
    12px
    18px
    calc(18px + env(safe-area-inset-bottom, 0px)) !important;

  box-sizing: border-box !important;

  z-index: 80 !important;

  display: flex !important;
  flex-direction: column !important;

  background:
    linear-gradient(
      to top,
      rgba(5, 4, 14, 0.98) 0%,
      rgba(5, 4, 14, 0.82) 70%,
      rgba(5, 4, 14, 0) 100%
    ) !important;

  pointer-events: auto !important;
}

#screen-select .zg-bottom .zg-btn {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;

  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;

  position: relative !important;
  z-index: 81 !important;

  overflow: hidden !important;

  box-sizing: border-box !important;

  box-shadow:
    0 12px 30px rgba(255, 0, 28, 0.34),
    0 0 24px rgba(255, 38, 62, 0.26) !important;
}

#screen-select .zg-bottom .zg-btn::after {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255,255,255,0.22) 42%,
      transparent 58%
    ) !important;

  transform: translateX(-130%) !important;

  animation: zgSelectButtonShine 2.8s ease-in-out infinite !important;

  pointer-events: none !important;
}


/* =========================================================
   10. Select Original Top Cards
   ========================================================= */

#screen-select .zg-top-list {
  width: 100% !important;
  max-width: 720px !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;

  margin:
    18px
    auto
    0 !important;

  text-align: left !important;
}

#screen-select .zg-top-card {
  position: relative !important;

  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  align-items: center !important;
  gap: 14px !important;

  width: 100% !important;

  padding: 14px !important;

  border: 1px solid var(--zg-border) !important;
  border-radius: 22px !important;

  color: #fff !important;
  text-align: left !important;

  overflow: hidden !important;
  isolation: isolate !important;

  box-sizing: border-box !important;

  transform: translateZ(0) !important;

  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.06) !important;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

  transition:
    transform 220ms ease,
    filter 220ms ease,
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease !important;
}

#screen-select .zg-top-card::before,
#screen-select .zg-top-card::after {
  content: "" !important;

  position: absolute !important;
  inset: -40% !important;

  pointer-events: none !important;

  z-index: -1 !important;
  opacity: 0.32 !important;

  transform: translate3d(0, 0, 0) rotate(0deg) !important;

  animation: zgCardEnergyMove 7s linear infinite !important;

  transition:
    opacity 180ms ease,
    transform 180ms ease,
    filter 180ms ease !important;
}

#screen-select .zg-top-card::after {
  inset: -20% !important;
  opacity: 0.18 !important;
  animation-duration: 4.8s !important;
  animation-direction: reverse !important;
}

#screen-select .zg-top-card:hover,
#screen-select .zg-top-card:focus-visible,
#screen-select .zg-top-card.selected,
#screen-select .zg-top-card.active {
  transform: translateY(-3px) scale(1.015) !important;
  filter: saturate(1.18) brightness(1.08) !important;

  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.18),
    0 0 26px rgba(255, 255, 255, 0.22),
    0 18px 42px rgba(0, 0, 0, 0.4) !important;
}

#screen-select .zg-top-card.selected,
#screen-select .zg-top-card.active {
  border-color: rgba(255, 255, 255, 0.52) !important;
  outline: 3px solid rgba(255, 48, 74, 0.42) !important;
}

#screen-select .zg-top-card.selected::before,
#screen-select .zg-top-card.active::before {
  opacity: 0.55 !important;
  animation-duration: 4.8s !important;
}

#screen-select .zg-top-card.selected::after,
#screen-select .zg-top-card.active::after {
  opacity: 0.32 !important;
  animation-duration: 3.6s !important;
}


/* ------------------------------
   Type Card Colors
   ------------------------------ */

#screen-select .zg-top-card.attack {
  --c1: #e60012;
  --c2: #ffd45a;

  background:
    radial-gradient(circle at 16% 20%, rgba(255, 75, 30, 0.26), transparent 34%),
    radial-gradient(circle at 84% 80%, rgba(255, 180, 30, 0.16), transparent 34%),
    linear-gradient(160deg, rgba(86, 12, 16, 0.92), rgba(32, 16, 24, 0.92)) !important;
}

#screen-select .zg-top-card.attack::before {
  background:
    radial-gradient(circle at 18% 32%, rgba(255, 44, 44, 0.75), transparent 22%),
    conic-gradient(from 120deg, transparent, rgba(255, 35, 55, 0.45), rgba(255, 213, 71, 0.32), transparent) !important;
}

#screen-select .zg-top-card.attack::after {
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 18px,
      rgba(255, 230, 90, 0.12) 18px 20px,
      transparent 20px 34px
    ) !important;
}

#screen-select .zg-top-card.defense {
  --c1: #3fa9ff;
  --c2: #d8f1ff;

  background:
    radial-gradient(circle at 18% 18%, rgba(48, 170, 255, 0.24), transparent 34%),
    radial-gradient(circle at 84% 76%, rgba(210, 245, 255, 0.13), transparent 34%),
    linear-gradient(160deg, rgba(14, 38, 72, 0.94), rgba(14, 20, 36, 0.94)) !important;
}

#screen-select .zg-top-card.defense::before {
  background:
    radial-gradient(circle at 18% 50%, rgba(36, 198, 255, 0.64), transparent 26%),
    conic-gradient(from 40deg, transparent, rgba(75, 155, 255, 0.38), rgba(255,255,255,0.16), transparent) !important;
}

#screen-select .zg-top-card.defense::after {
  background:
    repeating-radial-gradient(
      circle at 22% 50%,
      rgba(130, 220, 255, 0.16) 0 2px,
      transparent 2px 18px
    ) !important;
}

#screen-select .zg-top-card.stamina {
  --c1: #06c755;
  --c2: #c7ffd9;

  background:
    radial-gradient(circle at 18% 20%, rgba(20, 255, 130, 0.22), transparent 34%),
    radial-gradient(circle at 82% 78%, rgba(190, 255, 120, 0.13), transparent 34%),
    linear-gradient(160deg, rgba(14, 60, 38, 0.94), rgba(12, 24, 24, 0.94)) !important;
}

#screen-select .zg-top-card.stamina::before {
  background:
    radial-gradient(circle at 20% 52%, rgba(24, 255, 130, 0.5), transparent 28%),
    conic-gradient(from 210deg, transparent, rgba(29, 210, 112, 0.36), rgba(160,255,180,0.16), transparent) !important;
}

#screen-select .zg-top-card.stamina::after {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 20px,
      rgba(96, 255, 160, 0.1) 20px 22px,
      transparent 22px 38px
    ) !important;
}

#screen-select .zg-top-card.balance {
  --c1: #9b5cff;
  --c2: #57f2ff;

  background:
    radial-gradient(circle at 18% 20%, rgba(170, 90, 255, 0.24), transparent 34%),
    radial-gradient(circle at 84% 78%, rgba(60, 230, 255, 0.18), transparent 34%),
    linear-gradient(160deg, rgba(48, 24, 82, 0.94), rgba(12, 22, 42, 0.94)) !important;
}

#screen-select .zg-top-card.balance::before {
  background:
    radial-gradient(circle at 20% 50%, rgba(174, 96, 255, 0.58), transparent 26%),
    conic-gradient(from 260deg, transparent, rgba(155, 92, 255, 0.36), rgba(80, 240, 255, 0.28), transparent) !important;
}

#screen-select .zg-top-card.balance::after {
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255,255,255,0.08) 0deg 8deg,
      transparent 8deg 22deg
    ) !important;
}


/* ------------------------------
   Top Icon / Content
   ------------------------------ */

#screen-select .zg-top-icon {
  position: relative !important;

  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;

  border-radius: 999px !important;

  overflow: visible !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  transform: translateZ(0) !important;

  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.32), transparent 24%),
    linear-gradient(145deg, var(--c1, #ff304a), var(--c2, #39f5ff)) !important;

  box-shadow:
    0 0 18px rgba(57,245,255,0.28),
    0 0 34px rgba(255,48,74,0.14),
    inset 0 0 14px rgba(255,255,255,0.22) !important;

  z-index: 2 !important;
}

#screen-select .zg-top-icon::before {
  content: "" !important;

  position: absolute !important;
  inset: -8px !important;

  border-radius: 999px !important;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,255,255,0.38),
      transparent,
      rgba(64,220,255,0.3),
      transparent
    ) !important;

  opacity: 0.48 !important;
  filter: blur(0.5px) !important;

  animation: zgTopIconRingSpin 3.6s linear infinite !important;

  z-index: -1 !important;
}

#screen-select .zg-top-icon::after {
  content: "" !important;

  position: absolute !important;
  inset: 4px !important;

  border-radius: inherit !important;

  box-shadow:
    inset 0 0 14px rgba(255,255,255,0.24),
    inset 0 0 28px rgba(0,0,0,0.34) !important;

  z-index: 4 !important;

  pointer-events: none !important;
}

#screen-select .zg-top-photo {
  position: relative !important;
  z-index: 3 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  display: block !important;

  border-radius: inherit !important;

  pointer-events: none !important;
  user-select: none !important;

  transform-origin: center center !important;

  transition:
    transform 240ms ease,
    filter 240ms ease,
    opacity 240ms ease !important;

  animation: zgTopPhotoIdle 5.2s ease-in-out infinite !important;

  will-change: transform, filter !important;
}

#screen-select .zg-top-card.selected .zg-top-photo,
#screen-select .zg-top-card.active .zg-top-photo {
  transform: scale(1.22) rotate(8deg) !important;

  filter:
    brightness(1.12)
    contrast(1.08)
    saturate(1.16)
    drop-shadow(0 0 12px rgba(255,255,255,0.72))
    drop-shadow(0 0 22px rgba(70,220,255,0.46)) !important;

  animation: zgTopPhotoSelected 1.2s ease-in-out infinite alternate !important;
}

#screen-select .zg-top-card.selected .zg-top-icon::before,
#screen-select .zg-top-card.active .zg-top-icon::before {
  opacity: 0.92 !important;
  animation-duration: 1.55s !important;
}

#screen-select .zg-top-content {
  position: relative !important;
  z-index: 2 !important;

  min-width: 0 !important;
}

#screen-select .zg-top-name {
  position: relative !important;
  z-index: 2 !important;

  color: #ffffff !important;

  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;
}

#screen-select .zg-top-type {
  position: relative !important;
  z-index: 2 !important;

  margin-top: 2px !important;

  color: rgba(255,255,255,0.78) !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
}

#screen-select .zg-stats {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;

  margin-top: 10px !important;
}

#screen-select .zg-stat {
  min-width: 0 !important;

  padding: 7px 5px !important;

  border-radius: 12px !important;

  background: rgba(0, 0, 0, 0.22) !important;

  text-align: center !important;
}

#screen-select .zg-stat span {
  display: block !important;

  color: rgba(255, 255, 255, 0.62) !important;

  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

#screen-select .zg-stat strong {
  display: block !important;

  margin-top: 1px !important;

  color: #fff35a !important;

  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;

  text-shadow: 0 0 10px rgba(255, 230, 90, 0.56) !important;
}


/* =========================================================
   11. Select Animations
   ========================================================= */

@keyframes zgSelectButtonShine {
  0% {
    transform: translateX(-130%);
  }

  45%,
  100% {
    transform: translateX(130%);
  }
}

@keyframes zgCardEnergyMove {
  0% {
    transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1);
  }

  50% {
    transform: translate3d(4%, 3%, 0) rotate(180deg) scale(1.08);
  }

  100% {
    transform: translate3d(-3%, -2%, 0) rotate(360deg) scale(1);
  }
}

@keyframes zgTopIconRingSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes zgTopPhotoIdle {
  0%,
  100% {
    transform: rotate(-2deg) scale(1);
  }

  50% {
    transform: rotate(3deg) scale(1.045);
  }
}

@keyframes zgTopPhotoSelected {
  0% {
    transform: scale(1.18) rotate(-6deg);
  }

  100% {
    transform: scale(1.3) rotate(8deg);
  }
}


/* =========================================================
   12. Select Mobile Base
   ========================================================= */

@media (max-width: 430px) {
  #screen-select .zg-main,
  #screen-select .zg-select-main {
    padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 22px)) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #screen-select .zg-step-title {
    font-size: 29px !important;
  }

  #screen-select .zg-desc,
  #screen-select .zg-subtitle {
    font-size: 14px !important;
  }

  #screen-select .zg-top-card {
    min-height: 102px !important;
    grid-template-columns: 70px 1fr !important;
    gap: 12px !important;

    padding: 14px !important;

    border-radius: 21px !important;
  }

  #screen-select .zg-top-icon {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important;

    font-size: 30px !important;
  }

  #screen-select .zg-top-name {
    font-size: 17px !important;
  }

  #screen-select .zg-stats {
    gap: 5px !important;
  }

  #screen-select .zg-stat {
    padding: 5px 4px !important;
  }

  #screen-select .zg-stat span {
    font-size: 9px !important;
  }

  #screen-select .zg-stat strong {
    font-size: 12px !important;
  }

  #screen-select .zg-bottom {
    padding-top: 10px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #screen-select .zg-bottom .zg-btn {
    min-height: 52px !important;
    height: 52px !important;
  }
}

@media (max-height: 760px) {
  #screen-select .zg-main,
  #screen-select .zg-select-main {
    padding-top: max(22px, calc(env(safe-area-inset-top, 0px) + 18px)) !important;
    padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #screen-select .zg-bottom {
    padding-top: 10px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #screen-select .zg-bottom .zg-btn {
    min-height: 52px !important;
    height: 52px !important;
  }
}

@supports (-webkit-touch-callout: none) {
  #screen-select .zg-bottom {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #screen-select .zg-main,
  #screen-select .zg-select-main {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* =========================================================
   13. Select Dynamic Background
   ========================================================= */

#screen-select .zg-select-bg {
  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  pointer-events: none !important;
  overflow: hidden !important;
}

#screen-select .zg-main,
#screen-select .zg-bottom {
  position: relative !important;
  z-index: 3 !important;
}


/* ------------------------------
   Background Orbs
   ------------------------------ */

#screen-select .zg-select-orb {
  position: absolute !important;

  width: 240px !important;
  height: 240px !important;

  border-radius: 999px !important;

  filter: blur(30px) !important;

  opacity: 0.56 !important;

  mix-blend-mode: screen !important;

  transform: translate3d(0, 0, 0) !important;

  animation: zgSelectOrbFloat 7s ease-in-out infinite alternate !important;

  will-change: transform, opacity !important;
}

#screen-select .zg-select-orb-red {
  left: -92px !important;
  top: 84px !important;

  background: rgba(255, 24, 64, 0.48) !important;
}

#screen-select .zg-select-orb-blue {
  right: -95px !important;
  top: 210px !important;

  background: rgba(0, 214, 255, 0.44) !important;

  animation-delay: -2.2s !important;
}

#screen-select .zg-select-orb-gold {
  left: 28% !important;
  bottom: -110px !important;

  background: rgba(255, 207, 64, 0.28) !important;

  animation-delay: -4.1s !important;
}


/* ------------------------------
   Background Grid
   ------------------------------ */

#screen-select .zg-select-grid {
  position: absolute !important;
  inset: 0 !important;

  opacity: 0.14 !important;

  background-image:
    linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px) !important;

  background-size: 34px 34px !important;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 16%,
      black 82%,
      transparent
    ) !important;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 16%,
      black 82%,
      transparent
    ) !important;

  animation: zgSelectGridMove 11s linear infinite !important;
}


/* ------------------------------
   Stars
   ------------------------------ */

#screen-select .zg-select-stars {
  position: absolute !important;
  inset: 0 !important;
}

#screen-select .zg-select-stars i {
  position: absolute !important;

  width: 3px !important;
  height: 3px !important;

  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.95) !important;

  box-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 16px rgba(95,220,255,0.82) !important;

  animation: zgSelectStarBlink 2.8s ease-in-out infinite !important;
}

#screen-select .zg-select-stars i:nth-child(1) {
  left: 10% !important;
  top: 17% !important;
  animation-delay: -0.2s !important;
}

#screen-select .zg-select-stars i:nth-child(2) {
  left: 34% !important;
  top: 11% !important;
  animation-delay: -1.1s !important;
}

#screen-select .zg-select-stars i:nth-child(3) {
  left: 75% !important;
  top: 16% !important;
  animation-delay: -0.7s !important;
}

#screen-select .zg-select-stars i:nth-child(4) {
  left: 90% !important;
  top: 35% !important;
  animation-delay: -1.8s !important;
}

#screen-select .zg-select-stars i:nth-child(5) {
  left: 15% !important;
  top: 43% !important;
  animation-delay: -2.1s !important;
}

#screen-select .zg-select-stars i:nth-child(6) {
  left: 52% !important;
  top: 32% !important;
  animation-delay: -0.9s !important;
}

#screen-select .zg-select-stars i:nth-child(7) {
  left: 66% !important;
  top: 60% !important;
  animation-delay: -1.6s !important;
}

#screen-select .zg-select-stars i:nth-child(8) {
  left: 25% !important;
  top: 74% !important;
  animation-delay: -2.5s !important;
}

#screen-select .zg-select-stars i:nth-child(9) {
  left: 82% !important;
  top: 82% !important;
  animation-delay: -0.4s !important;
}

#screen-select .zg-select-stars i:nth-child(10) {
  left: 43% !important;
  top: 88% !important;
  animation-delay: -1.3s !important;
}


/* ------------------------------
   Energy Rings
   ------------------------------ */

#screen-select .zg-select-energy-rings {
  position: absolute !important;
  inset: 0 !important;
}

#screen-select .zg-select-energy-rings i {
  position: absolute !important;

  width: 160px !important;
  height: 160px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(96, 226, 255, 0.22) !important;

  box-shadow:
    0 0 20px rgba(0, 210, 255, 0.18),
    inset 0 0 22px rgba(255, 255, 255, 0.08) !important;

  opacity: 0.52 !important;

  animation: zgSelectEnergyRing 5.8s ease-in-out infinite !important;
}

#screen-select .zg-select-energy-rings i:nth-child(1) {
  left: -44px !important;
  top: 30% !important;
}

#screen-select .zg-select-energy-rings i:nth-child(2) {
  right: -52px !important;
  top: 14% !important;

  animation-delay: -1.8s !important;

  border-color: rgba(255, 56, 96, 0.22) !important;
}

#screen-select .zg-select-energy-rings i:nth-child(3) {
  left: 36% !important;
  bottom: 8% !important;

  animation-delay: -3.1s !important;

  border-color: rgba(255, 218, 77, 0.2) !important;
}


/* ------------------------------
   Comets
   ------------------------------ */

#screen-select .zg-select-comets {
  position: absolute !important;
  inset: 0 !important;

  overflow: hidden !important;
}

#screen-select .zg-select-comets i {
  position: absolute !important;

  width: 86px !important;
  height: 2px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.85),
      transparent
    ) !important;

  box-shadow:
    0 0 14px rgba(255,255,255,0.55) !important;

  opacity: 0 !important;

  transform: rotate(-24deg) translate3d(0, 0, 0) !important;

  animation: zgSelectComet 4.8s linear infinite !important;
}

#screen-select .zg-select-comets i:nth-child(1) {
  left: -30% !important;
  top: 19% !important;

  animation-delay: -0.2s !important;
}

#screen-select .zg-select-comets i:nth-child(2) {
  left: -35% !important;
  top: 43% !important;

  animation-delay: -1.7s !important;
}

#screen-select .zg-select-comets i:nth-child(3) {
  left: -28% !important;
  top: 68% !important;

  animation-delay: -3.2s !important;
}

#screen-select .zg-select-comets i:nth-child(4) {
  left: -45% !important;
  top: 86% !important;

  animation-delay: -4.1s !important;
}


/* =========================================================
   14. Secret Tops Bottom Preview
   ========================================================= */

#screen-select .zg-secret-tops-preview {
  width: 100% !important;
  max-width: 760px !important;

  margin:
    18px
    auto
    0 !important;

  padding: 14px !important;

  border-radius: 24px !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.12), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.045)) !important;

  border: 1px solid rgba(255,255,255,0.13) !important;

  box-shadow:
    0 16px 34px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;

  box-sizing: border-box !important;

  position: relative !important;
  z-index: 4 !important;

  overflow: hidden !important;
  isolation: isolate !important;
}

#screen-select .zg-secret-tops-preview::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  border-radius: inherit !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(255,77,77,0.12),
      rgba(87,242,255,0.1),
      rgba(255,214,80,0.1)
    ) !important;

  opacity: 0.75 !important;

  z-index: 0 !important;
}


/* ------------------------------
   Secret Header
   ------------------------------ */

#screen-select .zg-secret-tops-head {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;

  margin-bottom: 12px !important;
}

#screen-select .zg-secret-tops-head > div {
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#screen-select .zg-secret-tops-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: fit-content !important;
  min-height: 22px !important;

  padding: 0 10px !important;

  border-radius: 999px !important;

  color: #111827 !important;

  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0.08em !important;

  background:
    linear-gradient(180deg, #ffffff, #ffd650) !important;

  box-shadow:
    0 0 14px rgba(255,214,80,0.35),
    inset 0 1px 0 rgba(255,255,255,0.8) !important;

  white-space: nowrap !important;
}

#screen-select .zg-secret-tops-head strong {
  color: #ffffff !important;

  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;

  letter-spacing: -0.02em !important;
}

#screen-select .zg-secret-tops-head p {
  margin: 0 !important;

  color: rgba(255,255,255,0.62) !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  text-align: right !important;

  white-space: nowrap !important;
}


/* ------------------------------
   Secret Grid
   ------------------------------ */

#screen-select .zg-secret-tops-list {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;

  width: 100% !important;
}


/* ------------------------------
   Secret Card Common
   ------------------------------ */

#screen-select .zg-secret-top-card {
  position: relative !important;

  min-width: 0 !important;
  min-height: 138px !important;

  padding: 12px 8px 10px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  border-radius: 20px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  border: 1px solid rgba(255,255,255,0.14) !important;

  box-shadow:
    inset 0 0 28px rgba(255,255,255,0.05),
    0 12px 24px rgba(0,0,0,0.28) !important;

  pointer-events: none !important;
}

#screen-select .zg-secret-top-card::before {
  content: "" !important;

  position: absolute !important;
  inset: -36% !important;

  z-index: -2 !important;

  opacity: 0.72 !important;

  animation: zgSecretTopAura 6s linear infinite !important;

  pointer-events: none !important;
}

#screen-select .zg-secret-top-card::after {
  content: "LOCKED" !important;

  position: absolute !important;
  right: 7px !important;
  top: 7px !important;

  z-index: 3 !important;

  padding: 3px 7px !important;

  border-radius: 999px !important;

  color: rgba(255,255,255,0.62) !important;

  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0.05em !important;

  background: rgba(0,0,0,0.22) !important;

  border: 1px solid rgba(255,255,255,0.12) !important;
}


/* ------------------------------
   Secret Card Colors
   ------------------------------ */

/* Secret A: Fire Red Orange */
#screen-select .zg-secret-top-card-a {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,225,120,0.2), transparent 32%),
    radial-gradient(circle at 20% 85%, rgba(255,62,62,0.28), transparent 42%),
    linear-gradient(180deg, rgba(88,16,18,0.96), rgba(20,5,8,0.96)) !important;
}

#screen-select .zg-secret-top-card-a::before {
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,61,61,0.5),
      transparent,
      rgba(255,170,36,0.42),
      transparent
    ) !important;
}

/* Secret B: Ice Cyan Blue */
#screen-select .zg-secret-top-card-b {
  background:
    radial-gradient(circle at 50% 20%, rgba(160,255,255,0.22), transparent 32%),
    radial-gradient(circle at 80% 80%, rgba(87,242,255,0.3), transparent 42%),
    linear-gradient(180deg, rgba(10,48,78,0.96), rgba(3,9,22,0.97)) !important;
}

#screen-select .zg-secret-top-card-b::before {
  background:
    conic-gradient(
      from 120deg,
      transparent,
      rgba(87,242,255,0.5),
      transparent,
      rgba(74,125,255,0.38),
      transparent
    ) !important;
}

/* Secret C: Thunder Purple Gold */
#screen-select .zg-secret-top-card-c {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,235,130,0.22), transparent 32%),
    radial-gradient(circle at 78% 82%, rgba(155,92,255,0.34), transparent 42%),
    linear-gradient(180deg, rgba(54,22,98,0.96), rgba(10,5,22,0.98)) !important;
}

#screen-select .zg-secret-top-card-c::before {
  background:
    conic-gradient(
      from 240deg,
      transparent,
      rgba(155,92,255,0.5),
      transparent,
      rgba(255,214,80,0.42),
      transparent
    ) !important;
}


/* ------------------------------
   Secret Shadow Top
   ------------------------------ */

#screen-select .zg-secret-top-shadow {
  width: 66px !important;
  height: 66px !important;

  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;

  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.14), transparent 22%),
    radial-gradient(circle at 50% 50%, #141722 0%, #06070c 56%, #000 100%) !important;

  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08),
    0 0 20px rgba(255,255,255,0.1),
    inset 0 0 22px rgba(0,0,0,0.96) !important;

  filter:
    grayscale(1)
    brightness(0.42)
    contrast(1.65) !important;
}

#screen-select .zg-secret-top-shadow::before {
  content: "" !important;

  position: absolute !important;
  inset: -7px !important;

  border-radius: inherit !important;

  z-index: -1 !important;

  opacity: 0.72 !important;

  animation: zgSecretTopRing 3s linear infinite !important;
}

#screen-select .zg-secret-top-card-a .zg-secret-top-shadow::before {
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,72,72,0.62),
      transparent,
      rgba(255,174,40,0.55),
      transparent
    ) !important;
}

#screen-select .zg-secret-top-card-b .zg-secret-top-shadow::before {
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(87,242,255,0.62),
      transparent,
      rgba(80,130,255,0.55),
      transparent
    ) !important;
}

#screen-select .zg-secret-top-card-c .zg-secret-top-shadow::before {
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(155,92,255,0.64),
      transparent,
      rgba(255,214,80,0.56),
      transparent
    ) !important;
}

#screen-select .zg-secret-top-shadow span {
  color: rgba(255,255,255,0.58) !important;

  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  text-shadow:
    0 0 14px rgba(255,255,255,0.22) !important;
}


/* ------------------------------
   Secret Text
   ------------------------------ */

#screen-select .zg-secret-top-info {
  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

#screen-select .zg-secret-top-info strong {
  display: block !important;

  width: 100% !important;

  color: rgba(255,255,255,0.94) !important;

  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;

  text-align: center !important;
  letter-spacing: 0.08em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-select .zg-secret-top-info span {
  display: block !important;

  width: 100% !important;

  margin-top: 4px !important;

  color: rgba(255,255,255,0.62) !important;

  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;

  text-align: center !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* =========================================================
   15. Select / Secret Animations
   ========================================================= */

@keyframes zgSelectOrbFloat {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.4;
  }

  100% {
    transform: translate3d(20px, -26px, 0) scale(1.12);
    opacity: 0.68;
  }
}

@keyframes zgSelectGridMove {
  0% {
    background-position: 0 0, 0 0;
  }

  100% {
    background-position: 0 68px, 68px 0;
  }
}

@keyframes zgSelectStarBlink {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

@keyframes zgSelectEnergyRing {
  0% {
    transform: scale(0.74) rotate(0deg);
    opacity: 0;
  }

  35% {
    opacity: 0.56;
  }

  100% {
    transform: scale(1.42) rotate(120deg);
    opacity: 0;
  }
}

@keyframes zgSelectComet {
  0% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(0, 0, 0);
  }

  12% {
    opacity: 0.82;
  }

  55% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(170vw, 70px, 0);
  }

  100% {
    opacity: 0;
    transform: rotate(-24deg) translate3d(170vw, 70px, 0);
  }
}

@keyframes zgSecretTopAura {
  0% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes zgSecretTopRing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* =========================================================
   16. Select Secret Mobile
   ========================================================= */

@media (max-width: 480px) {
  #screen-select .zg-select-orb {
    opacity: 0.46 !important;
    filter: blur(34px) !important;
  }

  #screen-select .zg-select-grid {
    opacity: 0.1 !important;
  }

  #screen-select .zg-select-comets i {
    width: 68px !important;
  }

  #screen-select .zg-top-card::before {
    opacity: 0.26 !important;
  }

  #screen-select .zg-top-card::after {
    opacity: 0.14 !important;
  }

  #screen-select .zg-top-card.selected::before,
  #screen-select .zg-top-card.active::before {
    opacity: 0.46 !important;
  }

  #screen-select .zg-top-card.selected .zg-top-photo,
  #screen-select .zg-top-card.active .zg-top-photo {
    transform: scale(1.2) rotate(8deg) !important;
  }
}

@media (max-width: 430px) {
  #screen-select .zg-secret-tops-preview {
    margin-top: 16px !important;
    padding: 12px !important;
    border-radius: 22px !important;
  }

  #screen-select .zg-secret-tops-head {
    align-items: flex-start !important;
    margin-bottom: 10px !important;
  }

  #screen-select .zg-secret-tops-head strong {
    font-size: 18px !important;
  }

  #screen-select .zg-secret-tops-head p {
    font-size: 11px !important;
  }

  #screen-select .zg-secret-tops-list {
    gap: 8px !important;
  }

  #screen-select .zg-secret-top-card {
    min-height: 120px !important;
    padding: 11px 5px 9px !important;
    border-radius: 18px !important;
  }

  #screen-select .zg-secret-top-shadow {
    width: 56px !important;
    height: 56px !important;
  }

  #screen-select .zg-secret-top-shadow span {
    font-size: 30px !important;
  }

  #screen-select .zg-secret-top-info strong {
    font-size: 18px !important;
  }

  #screen-select .zg-secret-top-info span {
    font-size: 10px !important;
  }
}

@media (max-height: 760px) {
  #screen-select .zg-secret-tops-preview {
    margin-top: 14px !important;
    padding: 10px !important;
  }

  #screen-select .zg-secret-tops-head {
    margin-bottom: 9px !important;
  }

  #screen-select .zg-secret-top-card {
    min-height: 110px !important;
    gap: 8px !important;
  }

  #screen-select .zg-secret-top-shadow {
    width: 52px !important;
    height: 52px !important;
  }

  #screen-select .zg-secret-top-info strong {
    font-size: 17px !important;
  }

  #screen-select .zg-secret-top-info span {
    font-size: 10px !important;
  }
}


/* =========================================================
   17. Select Scroll Force Guard
   ========================================================= */

body[data-zg-screen="select"] {
  overflow: hidden !important;
}

body[data-zg-screen="select"] #zelo-liff-game,
body[data-zg-screen="select"] .zg-clean-root {
  overflow: hidden !important;
}

body[data-zg-screen="select"] #screen-select {
  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

body[data-zg-screen="select"] #screen-select .zg-main,
body[data-zg-screen="select"] #screen-select .zg-select-main {
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
}


/* =========================================================
   18. Select Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #screen-select *,
  #screen-select *::before,
  #screen-select *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
/* =========================================================
   19. Battle Layout / Fullscreen Background
   ========================================================= */

body[data-zg-screen="battle"],
body[data-zg-screen="battle"] #zelo-liff-game,
body[data-zg-screen="battle"] #zelo-liff-game.zg-clean-root {
  background:
    radial-gradient(circle at 8% -10%, rgba(255, 40, 110, 0.28), transparent 36%),
    radial-gradient(circle at 92% -10%, rgba(0, 205, 255, 0.2), transparent 42%),
    radial-gradient(circle at 50% 38%, rgba(90, 70, 255, 0.12), transparent 52%),
    linear-gradient(180deg, #101a34 0%, #071124 38%, #030814 100%) !important;
}

#screen-battle,
#screen-battle.zg-screen,
#screen-battle.zg-battle-screen {
  position: relative !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
  isolation: isolate !important;

  color: #fff !important;

  background: transparent !important;
}

#screen-battle::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  pointer-events: none !important;

  background:
    radial-gradient(circle at 8% -10%, rgba(255, 40, 110, 0.28), transparent 36%),
    radial-gradient(circle at 92% -10%, rgba(0, 205, 255, 0.2), transparent 42%),
    radial-gradient(circle at 50% 38%, rgba(90, 70, 255, 0.12), transparent 52%),
    linear-gradient(180deg, #101a34 0%, #071124 38%, #030814 100%) !important;
}

#screen-battle .zg-battle-bg {
  position: absolute !important;
  inset: 0 !important;

  z-index: 0 !important;

  pointer-events: none !important;
  overflow: hidden !important;

  background:
    radial-gradient(circle at 8% -10%, rgba(255, 40, 110, 0.28), transparent 36%),
    radial-gradient(circle at 92% -10%, rgba(0, 205, 255, 0.2), transparent 42%),
    radial-gradient(circle at 50% 38%, rgba(90, 70, 255, 0.12), transparent 52%),
    linear-gradient(180deg, #101a34 0%, #071124 38%, #030814 100%) !important;
}

#screen-battle .zg-battle-bg-orb {
  position: absolute !important;

  width: 48vw !important;
  height: 48vw !important;

  min-width: 260px !important;
  min-height: 260px !important;

  border-radius: 999px !important;

  filter: blur(42px) !important;

  opacity: 0.55 !important;

  mix-blend-mode: screen !important;
}

#screen-battle .zg-battle-bg-orb-red {
  left: -18vw !important;
  top: -18vw !important;

  background: rgba(255, 38, 105, 0.58) !important;
}

#screen-battle .zg-battle-bg-orb-blue {
  right: -20vw !important;
  top: -14vw !important;

  background: rgba(0, 205, 255, 0.42) !important;
}

#screen-battle .zg-battle-bg-grid {
  position: absolute !important;
  inset: 0 !important;

  opacity: 0.24 !important;

  background:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px) !important;

  background-size: 72px 72px !important;

  mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.18) 70%,
      transparent
    ) !important;

  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.92),
      rgba(0,0,0,0.18) 70%,
      transparent
    ) !important;
}

#screen-battle .zg-battle-bg-vignette {
  position: absolute !important;
  inset: 0 !important;

  background:
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,0.34) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.38)) !important;
}

#screen-battle .zg-battle-main,
#screen-battle .zg-reference-layout,
#screen-battle .zg-hp-stage,
#screen-battle .zg-arena-wrap,
#screen-battle .zg-battle-panel,
#screen-battle .zg-battle-header {
  position: relative !important;
  z-index: 2 !important;
}


/* =========================================================
   20. Battle Header / Exit Hidden
   ========================================================= */

#screen-battle .zg-battle-header,
#screen-battle .zg-exit-btn,
#screen-battle .zg-floating-exit,
#screen-battle [data-zg-action="select"].zg-exit-btn,
#screen-battle [data-zg-action="select"].zg-small-btn {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* =========================================================
   21. Battle Main Grid
   ========================================================= */

#screen-battle .zg-battle-main {
  width: 100% !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  overflow: hidden !important;

  background: transparent !important;
}

#screen-battle .zg-reference-layout {
  width: 100% !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding: 0 !important;

  display: grid !important;
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto !important;

  gap: 0 !important;

  overflow: hidden !important;

  background: transparent !important;
}


/* =========================================================
   22. Battle HP / Commentary
   ========================================================= */

#screen-battle .zg-hp-stage {
  width: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;

  padding:
    max(14px, env(safe-area-inset-top, 0px))
    18px
    8px !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 8, 18, 0.16) 0%,
      rgba(3, 8, 18, 0.04) 70%,
      rgba(3, 8, 18, 0) 100%
    ) !important;

  border: 0 !important;
  box-shadow: none !important;

  box-sizing: border-box !important;
}

#screen-battle .zg-hp-stage::after {
  display: none !important;
  content: none !important;
}

#screen-battle .zg-hp-group {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;

  box-sizing: border-box !important;
}

#screen-battle .zg-hp-row {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 40px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 0 !important;

  color: #fff !important;

  font-size: 14px !important;
  font-weight: 900 !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#screen-battle .zg-hp-name {
  flex: 0 0 auto !important;

  min-width: 22px !important;

  color: #fff !important;

  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  text-align: center !important;
  white-space: nowrap !important;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

#screen-battle .zg-hp-text {
  display: none !important;
}

#screen-battle .zg-hp-avatar {
  position: relative !important;

  flex: 0 0 auto !important;

  width: 42px !important;
  height: 42px !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  background: rgba(8, 16, 31, 0.8) !important;

  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.13),
    0 0 18px rgba(0, 170, 255, 0.22) !important;

  z-index: 4 !important;
}

#screen-battle .zg-hp-avatar img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  display: block !important;
}

#screen-battle .zg-hp-avatar-player {
  margin-right: -8px !important;
}

#screen-battle .zg-hp-avatar-enemy {
  margin-left: -8px !important;
}

#screen-battle .zg-hp-bar {
  position: relative !important;

  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 25px !important;

  border-radius: 999px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 35%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(5, 16, 28, 0.95)) !important;

  border: 1px solid rgba(170, 245, 255, 0.32) !important;

  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.88),
    inset 0 2px 2px rgba(255, 255, 255, 0.14),
    0 0 10px rgba(0, 235, 255, 0.22),
    0 0 18px rgba(255, 80, 130, 0.1) !important;

  box-sizing: border-box !important;
}

#screen-battle .zg-hp-row:has(.zg-player-hp) .zg-hp-bar {
  border-color: rgba(80, 245, 255, 0.48) !important;

  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.88),
    inset 0 2px 2px rgba(255, 255, 255, 0.14),
    0 0 12px rgba(0, 235, 255, 0.38),
    0 0 24px rgba(0, 210, 170, 0.16) !important;
}

#screen-battle .zg-hp-row:has(.zg-enemy-hp) .zg-hp-bar {
  border-color: rgba(255, 120, 80, 0.46) !important;

  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.88),
    inset 0 2px 2px rgba(255, 255, 255, 0.14),
    0 0 12px rgba(255, 80, 60, 0.34),
    0 0 24px rgba(255, 210, 70, 0.14) !important;
}

#screen-battle .zg-hp-bar::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 3 !important;

  pointer-events: none !important;

  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(10% - 1px),
      rgba(255, 255, 255, 0.13) calc(10% - 1px),
      rgba(255, 255, 255, 0.13) 10%
    ) !important;

  opacity: 0.7 !important;
}

#screen-battle .zg-hp-fill {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;

  height: 100% !important;
  width: 100% !important;

  border-radius: inherit !important;

  transform-origin: left center !important;

  transition:
    width 180ms ease-out,
    filter 180ms ease-out,
    transform 180ms ease-out !important;
}

#screen-battle .zg-hp-fill::before {
  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  z-index: 2 !important;

  border-radius: inherit !important;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      rgba(255, 255, 255, 0.14) 28%,
      rgba(255, 255, 255, 0.42) 45%,
      rgba(255, 255, 255, 0.12) 62%,
      transparent 100%
    ) !important;

  transform: translateX(-120%) skewX(-18deg) !important;

  animation: zgEnergySweep 1.8s linear infinite !important;

  mix-blend-mode: screen !important;
}

#screen-battle .zg-hp-fill::after {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;

  height: 42% !important;

  z-index: 1 !important;

  border-radius: inherit !important;

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), transparent) !important;

  opacity: 0.8 !important;

  pointer-events: none !important;
}

#screen-battle .zg-player-hp,
#zg-player-hp {
  background:
    linear-gradient(90deg, #35eaff 0%, #16ffc8 48%, #00dc6d 100%) !important;

  box-shadow:
    0 0 14px rgba(0, 255, 210, 0.58),
    0 0 28px rgba(0, 225, 150, 0.2),
    inset 0 0 10px rgba(255, 255, 255, 0.16) !important;
}

#screen-battle .zg-enemy-hp,
#zg-enemy-hp {
  background:
    linear-gradient(90deg, #ff2932 0%, #ff7b31 52%, #ffe65a 100%) !important;

  box-shadow:
    0 0 14px rgba(255, 80, 50, 0.58),
    0 0 28px rgba(255, 180, 40, 0.22),
    inset 0 0 10px rgba(255, 255, 255, 0.14) !important;
}

#screen-battle .zg-hp-fill.zg-hp-hit-pulse,
#screen-battle .zg-hp-hit-pulse {
  animation: zgHpHitPulse 0.34s ease-out !important;
}

#screen-battle .zg-hp-fill.is-low {
  filter: brightness(1.2) saturate(1.25) !important;
}

#screen-battle .zg-hp-fill.is-critical {
  filter: brightness(1.45) saturate(1.65) !important;
  animation: zgCriticalEnergyPulse 0.42s ease-in-out infinite alternate !important;
}

#screen-battle .zg-hp-row-hit {
  animation: zgHpRowHit 0.36s ease-out !important;
}

#screen-battle .zg-hp-row-hit .zg-hp-bar,
#screen-battle .zg-hp-bar.zg-hp-bar-hit {
  animation: zgHpBarFrameFlash 0.38s ease-out !important;
}


/* Commentary */

#screen-battle .zg-commentary {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 38px !important;
  height: auto !important;

  margin: 0 6px 5px !important;
  padding: 8px 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;

  text-align: center !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.055)) !important;

  border: 1px solid rgba(255,255,255,0.08) !important;

  box-shadow: inset 0 0 18px rgba(255,255,255,0.03) !important;

  color: #fff !important;

  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 950 !important;
  letter-spacing: 0.6px !important;

  box-sizing: border-box !important;
}


/* =========================================================
   23. Battle Arena / Logo / Zones
   ========================================================= */

#screen-battle .zg-arena-wrap {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 4px 10px 5px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;

  background: transparent !important;

  box-sizing: border-box !important;
}

#screen-battle .zg-battle-box {
  position: relative !important;

  width: min(92vw, 520px) !important;
  height: min(92vw, 520px) !important;

  min-width: 280px !important;
  min-height: 280px !important;

  max-width: 560px !important;
  max-height: 560px !important;

  aspect-ratio: 1 / 1 !important;

  margin: 0 auto !important;

  border-radius: 24px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  contain: layout paint style !important;

  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,0.11), transparent 31%),
    radial-gradient(circle at 32% 38%, rgba(255, 50, 110, 0.18), transparent 43%),
    radial-gradient(circle at 70% 58%, rgba(0, 210, 255, 0.16), transparent 48%),
    linear-gradient(145deg, rgba(18, 20, 34, 0.94), rgba(4, 8, 20, 0.96) 72%) !important;

  border: 2px solid rgba(255, 68, 110, 0.28) !important;

  box-shadow:
    inset 0 0 56px rgba(255,255,255,0.045),
    inset 0 0 120px rgba(0,0,0,0.38),
    0 0 0 1px rgba(0, 220, 255, 0.15),
    0 14px 30px rgba(0,0,0,0.34) !important;

  box-sizing: border-box !important;
  transform: translateZ(0) !important;
}

#screen-battle .zg-battle-box::before {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: min(86vw, 82vh) !important;
  height: min(86vw, 82vh) !important;

  max-width: 560px !important;
  max-height: 560px !important;

  min-width: 300px !important;
  min-height: 300px !important;

  border-radius: 50% !important;

  transform: translate(-50%, -50%) !important;

  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.20), transparent 34%),
    radial-gradient(circle at 68% 45%, rgba(0, 215, 255, 0.22), transparent 48%),
    radial-gradient(circle at 32% 56%, rgba(255, 80, 130, 0.20), transparent 50%),
    radial-gradient(circle at center, rgba(255, 230, 120, 0.08), transparent 64%) !important;

  box-shadow:
    inset 0 0 68px rgba(255,255,255,0.08),
    inset 0 0 110px rgba(0,0,0,0.18),
    0 0 0 2px rgba(255, 225, 90, 0.16),
    0 0 58px rgba(0, 210, 255, 0.13) !important;

  z-index: 1 !important;

  pointer-events: none !important;
}

#screen-battle .zg-battle-box::after {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: min(78vw, 74vh) !important;
  height: min(78vw, 74vh) !important;

  max-width: 500px !important;
  max-height: 500px !important;

  min-width: 270px !important;
  min-height: 270px !important;

  border-radius: 50% !important;

  transform: translate(-50%, -50%) rotate(24deg) !important;

  border: 2px dashed rgba(255,255,255,0.16) !important;

  animation: zgArenaSpin 10s linear infinite !important;

  z-index: 2 !important;

  pointer-events: none !important;
}

#screen-battle .zg-arena-ring {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: min(88vw, 84vh) !important;
  height: min(88vw, 84vh) !important;

  max-width: 580px !important;
  max-height: 580px !important;

  min-width: 310px !important;
  min-height: 310px !important;

  border-radius: 50% !important;

  transform: translate(-50%, -50%) rotate(-18deg) !important;

  border: 2px solid rgba(255, 225, 90, 0.17) !important;

  box-shadow:
    0 0 24px rgba(255, 225, 90, 0.08),
    inset 0 0 34px rgba(255, 255, 255, 0.025) !important;

  z-index: 2 !important;

  pointer-events: none !important;
}

#screen-battle .zg-arena-logo-img {
  display: block !important;
  visibility: visible !important;

  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: min(58vw, 44vh) !important;
  max-width: 360px !important;
  min-width: 210px !important;
  height: auto !important;

  object-fit: contain !important;

  transform: translate(-50%, -50%) !important;

  opacity: 0.94 !important;

  z-index: 4 !important;

  pointer-events: none !important;
  user-select: none !important;

  filter:
    drop-shadow(0 12px 24px rgba(0,0,0,0.58))
    brightness(1.08)
    contrast(1.04) !important;
}

#screen-battle .zg-xtreme-zone {
  position: absolute !important;

  width: 28% !important;
  height: 28% !important;

  left: 50% !important;
  top: 50% !important;

  border-radius: 50% !important;

  transform: translate(-50%, -50%) !important;

  pointer-events: none !important;

  background:
    radial-gradient(circle, rgba(255, 214, 80, 0.14), transparent 62%) !important;

  border: 1px solid rgba(255, 214, 80, 0.22) !important;

  box-shadow:
    0 0 28px rgba(255, 214, 80, 0.12) !important;

  z-index: 4 !important;
}

#screen-battle .zg-pocket-zone {
  position: absolute !important;

  width: 58px !important;
  height: 58px !important;

  border-radius: 50% !important;

  pointer-events: none !important;

  background:
    radial-gradient(circle at center, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.08) 70%, transparent) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  z-index: 4 !important;
}

#screen-battle .zg-pocket-zone.p1 {
  left: 24px !important;
  top: 24px !important;
}

#screen-battle .zg-pocket-zone.p2 {
  right: 24px !important;
  top: 24px !important;
}

#screen-battle .zg-pocket-zone.p3 {
  left: 24px !important;
  bottom: 24px !important;
}

#screen-battle .zg-pocket-zone.p4 {
  right: 24px !important;
  bottom: 24px !important;
}


/* =========================================================
   24. Battle Tops / No Frame
   ========================================================= */

#screen-battle .zg-battle-top,
.zg-battle-top,
.zg-battle-top.attack,
.zg-battle-top.defense,
.zg-battle-top.stamina,
.zg-battle-top.balance,
.zg-player-top,
.zg-enemy-top {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: var(--zg-battle-top-size, 84px) !important;
  height: var(--zg-battle-top-size, 84px) !important;
  min-width: var(--zg-battle-top-size, 84px) !important;
  min-height: var(--zg-battle-top-size, 84px) !important;
  max-width: var(--zg-battle-top-size, 84px) !important;
  max-height: var(--zg-battle-top-size, 84px) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  pointer-events: none !important;

  z-index: 48 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  border-radius: 0 !important;
  overflow: visible !important;

  will-change: transform, left, top !important;
  backface-visibility: hidden !important;
  transform-style: flat !important;
}

.zg-battle-top::before,
.zg-battle-top::after,
.zg-player-top::before,
.zg-player-top::after,
.zg-enemy-top::before,
.zg-enemy-top::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

#screen-battle .zg-battle-top-photo,
.zg-battle-top-photo,
.zg-battle-top-photo-no-base {
  position: relative !important;

  z-index: 4 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  border-radius: 0 !important;

  pointer-events: none !important;
  user-select: none !important;

  filter:
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.48)) !important;
}

#screen-battle .zg-top-defeated,
#screen-battle .zg-defeated {
  opacity: 0.35 !important;
  filter: grayscale(0.8) brightness(0.65) !important;
}

#screen-battle .zg-top-winner {
  filter:
    drop-shadow(0 0 18px rgba(255,220,80,0.85))
    drop-shadow(0 0 34px rgba(255,80,80,0.55))
    drop-shadow(0 10px 16px rgba(0,0,0,0.48)) !important;
}

#screen-battle .win-pulse {
  animation: zgWinPulse 0.7s ease-in-out infinite !important;
}

#screen-battle .zg-top-wobble {
  animation: zgTopWobble 0.18s infinite !important;
}

#screen-battle .impact-squash {
  animation: zgImpactSquash 0.22s ease-out !important;
}

#screen-battle .zg-wall-rebound-top {
  animation: zgWallReboundTop 0.22s ease-out !important;
}

#screen-battle .zg-ground-grind {
  animation: zgGroundGrind 0.26s linear !important;
}


/* =========================================================
   25. Battle Panel / Charge
   ========================================================= */

#screen-battle .zg-battle-panel {
  flex: 0 0 auto !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  padding:
    0
    8px
    max(6px, env(safe-area-inset-bottom, 0px)) !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;

  position: relative !important;
  z-index: 4 !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 8, 18, 0) 0%,
      rgba(3, 8, 18, 0.48) 28%,
      rgba(3, 8, 18, 0.86) 100%
    ) !important;

  box-shadow: none !important;
  border: 0 !important;

  overflow: visible !important;

  box-sizing: border-box !important;
}

#screen-battle .zg-launch-row,
#screen-battle .zg-charge-layer {
  display: block !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  z-index: 40 !important;

  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;

  overflow: visible !important;

  pointer-events: auto !important;

  box-sizing: border-box !important;
}

#screen-battle .zg-launch-row::before,
#screen-battle .zg-launch-row::after {
  display: none !important;
  content: none !important;
}

#screen-battle .zg-external-top-photo,
#screen-battle .zg-launch-row > .zg-external-top-photo {
  display: none !important;
}

#screen-battle > .zg-charge-layer,
#screen-battle > .zg-charge-card,
#screen-battle .zg-battle-main > .zg-charge-layer,
#screen-battle .zg-battle-main > .zg-charge-card,
#screen-battle .zg-arena-wrap > .zg-charge-layer,
#screen-battle .zg-arena-wrap > .zg-charge-card,
#screen-battle .zg-battle-box > .zg-charge-layer,
#screen-battle .zg-battle-box > .zg-charge-card {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  overflow: hidden !important;
}

#screen-battle .zg-charge-card,
#screen-battle .zg-launch-row > .zg-charge-layer > .zg-charge-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;

  align-items: center !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;

  padding: 9px 16px 10px !important;
  gap: 7px !important;

  border-radius: 18px !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.12), transparent 44%),
    linear-gradient(180deg, rgba(30, 37, 64, 0.92), rgba(11, 16, 33, 0.95)) !important;

  border: 1px solid rgba(255,255,255,0.22) !important;

  box-shadow:
    inset 0 0 24px rgba(255,255,255,0.048),
    0 -6px 18px rgba(0,0,0,0.18),
    0 0 0 1px rgba(80, 120, 255, 0.08) !important;

  box-sizing: border-box !important;

  overflow: visible !important;

  pointer-events: auto !important;
}


/* Charge Head: support both DOM modes */

#screen-battle .zg-charge-card > .zg-charge-title {
  grid-row: 1 !important;
  grid-column: 1 !important;

  justify-self: start !important;
  align-self: center !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;

  text-align: left !important;

  color: #fff !important;

  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-battle .zg-charge-card > .zg-charge-subtitle {
  grid-row: 1 !important;
  grid-column: 2 !important;

  justify-self: end !important;
  align-self: center !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  min-height: 0 !important;

  text-align: right !important;

  color: rgba(255,255,255,0.78) !important;

  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-battle .zg-charge-head {
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

#screen-battle .zg-charge-head .zg-charge-title,
#screen-battle .zg-charge-head .zg-charge-subtitle {
  grid-row: auto !important;
  grid-column: auto !important;

  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1.15 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-battle .zg-charge-head .zg-charge-title {
  flex: 1 1 auto !important;

  text-align: left !important;

  font-size: 17px !important;
  font-weight: 950 !important;
}

#screen-battle .zg-charge-head .zg-charge-subtitle {
  flex: 0 1 auto !important;

  text-align: right !important;

  font-size: 13px !important;
  font-weight: 800 !important;

  color: rgba(255,255,255,0.78) !important;
}


/* Charge Meter */

#screen-battle .zg-charge-meter {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;

  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  min-height: 34px !important;
  height: auto !important;

  margin: 0 !important;
  padding-left: 0 !important;

  display: flex !important;
  align-items: center !important;

  box-sizing: border-box !important;

  overflow: visible !important;
}

#screen-battle .zg-charge-percent-badge {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;

  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

#screen-battle .zg-energy-shell {
  --zg-charge-pct: 0%;

  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;

  border-radius: 999px !important;

  overflow: hidden !important;
  isolation: isolate !important;

  box-sizing: border-box !important;

  background:
    linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
    rgba(5, 14, 22, 0.98) !important;

  border: 3px solid rgba(255,255,255,0.78) !important;

  box-shadow:
    inset 0 0 14px rgba(0,0,0,0.78),
    0 0 12px rgba(255,255,255,0.28),
    0 0 22px rgba(180, 90, 255, 0.34),
    0 0 30px rgba(0, 230, 255, 0.16) !important;
}

#screen-battle .zg-energy-shell::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;

  width: var(--zg-charge-pct) !important;
  min-width: 0 !important;
  max-width: 100% !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      #00e5ff 0%,
      #18ff7a 42%,
      #fff35a 72%,
      #ff9f1a 100%
    ) !important;

  box-shadow:
    0 0 14px rgba(0,229,255,0.72),
    0 0 22px rgba(255,230,80,0.55) !important;

  opacity: 1 !important;

  z-index: 3 !important;

  transition: width 38ms linear !important;

  pointer-events: none !important;
}

#screen-battle .zg-energy-shell::after {
  content: "" !important;

  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;

  width: var(--zg-charge-pct) !important;
  min-width: 0 !important;
  max-width: 100% !important;

  border-radius: 999px !important;

  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.34) 0 8px,
      rgba(255,255,255,0.03) 8px 16px
    ) !important;

  mix-blend-mode: screen !important;
  opacity: 0.55 !important;

  z-index: 4 !important;

  animation: zgEnergyHardStripe 520ms linear infinite !important;

  transition: width 38ms linear !important;

  pointer-events: none !important;
}

#screen-battle .zg-energy-fill,
#screen-battle .zg-energy-glow {
  display: none !important;
}

#screen-battle .zg-energy-track {
  position: absolute !important;
  inset: 0 !important;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.08) 0 1px,
      transparent 1px 28px
    ) !important;

  z-index: 5 !important;

  opacity: 0.48 !important;

  pointer-events: none !important;
}


/* Perfect / Over Zone */

#screen-battle .zg-energy-perfect-zone,
.zg-energy-perfect-zone {
  position: absolute !important;

  top: 0 !important;
  bottom: 0 !important;

  left: 87.5% !important;
  width: 3% !important;

  z-index: 6 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(80, 255, 120, 0.25),
      rgba(0, 255, 90, 0.95),
      rgba(180, 255, 120, 1),
      rgba(0, 255, 90, 0.95),
      rgba(80, 255, 120, 0.25)
    ) !important;

  box-shadow:
    0 0 8px rgba(0, 255, 90, 0.95),
    0 0 16px rgba(0, 255, 90, 0.75),
    0 0 28px rgba(130, 255, 90, 0.55),
    inset 0 0 10px rgba(220, 255, 180, 0.85) !important;

  border-left: 1px solid rgba(190, 255, 170, 0.95) !important;
  border-right: 1px solid rgba(190, 255, 170, 0.95) !important;

  opacity: 1 !important;
  mix-blend-mode: screen !important;

  animation: zgPerfectZoneNeonGreen 0.9s ease-in-out infinite alternate !important;
}

#screen-battle .zg-energy-over-zone {
  position: absolute !important;

  top: 0 !important;
  bottom: 0 !important;
  left: 91% !important;
  right: 0 !important;

  background: rgba(150,80,255,0.42) !important;

  z-index: 2 !important;

  pointer-events: none !important;
}

#screen-battle .zg-energy-cap {
  position: absolute !important;

  left: var(--zg-charge-pct, 0%) !important;
  top: 50% !important;

  width: 12px !important;
  height: 40px !important;

  border-radius: 999px !important;

  background: #fff !important;

  transform: translate(-50%, -50%) !important;

  box-shadow:
    0 0 12px rgba(255,255,255,0.8),
    0 0 20px rgba(255, 230, 120, 0.48) !important;

  z-index: 7 !important;

  pointer-events: none !important;

  transition:
    left 38ms linear,
    opacity 80ms linear !important;

  animation: zgEnergyCapPulse 420ms ease-in-out infinite !important;
}

#screen-battle .zg-energy-shell.zg-energy-hit {
  animation: zgEnergyHit 280ms ease-out !important;
}


/* Charge Button */

#screen-battle .zg-charge-btn {
  grid-row: 3 !important;
  grid-column: 1 / -1 !important;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  border-radius: 999px !important;
  border: 0 !important;

  background: linear-gradient(90deg, #fff29b, #ff9f1a) !important;

  color: #111 !important;

  font-weight: 1000 !important;
  font-size: 17px !important;
  line-height: 42px !important;

  touch-action: none !important;
  cursor: pointer !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  box-sizing: border-box !important;

  box-shadow:
    0 10px 20px rgba(255, 150, 30, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
}

#screen-battle .zg-charge-btn:active,
#screen-battle .zg-charge-btn.zg-charge-pressing {
  transform: scale(0.97) !important;

  filter: brightness(1.18) saturate(1.25) !important;

  box-shadow:
    0 0 18px rgba(255, 230, 120, 0.55),
    0 0 32px rgba(255, 140, 20, 0.32) !important;
}

#screen-battle .zg-charge-btn:disabled {
  opacity: 0.68 !important;
  filter: grayscale(0.18) !important;
}

#screen-battle .zg-charge-tip {
  display: none !important;
}


/* Charge Grade */

#screen-battle .zg-charge-layer[data-charge-grade="weak"] .zg-energy-shell::before {
  background:
    linear-gradient(90deg, #00e5ff, #18ff7a) !important;
}

#screen-battle .zg-charge-layer[data-charge-grade="good"] .zg-energy-shell::before {
  background:
    linear-gradient(90deg, #00e5ff, #18ff7a, #fff35a, #ffb22e) !important;
}

#screen-battle .zg-charge-layer[data-charge-grade="perfect"] .zg-energy-shell::before {
  background:
    linear-gradient(90deg, #00e5ff, #18ff7a, #fff35a, #ffffff, #ffd84a) !important;

  box-shadow:
    0 0 18px rgba(255,255,255,0.95),
    0 0 34px rgba(255,220,70,0.9) !important;
}

#screen-battle .zg-charge-layer[data-charge-grade="over"] .zg-energy-shell::before {
  background:
    linear-gradient(90deg, #ff3d7f, #b23dff, #4b27ff) !important;

  box-shadow:
    0 0 18px rgba(255,70,180,0.9),
    0 0 34px rgba(90,60,255,0.86) !important;
}


/* =========================================================
   26. Battle Responsive Base
   ========================================================= */

@media (max-width: 430px) {
  #screen-battle .zg-arena-wrap {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #screen-battle .zg-charge-card,
  #screen-battle .zg-launch-row > .zg-charge-layer > .zg-charge-card {
    padding: 8px 12px 9px !important;
    gap: 6px !important;
  }

  #screen-battle .zg-charge-card > .zg-charge-title,
  #screen-battle .zg-charge-head .zg-charge-title {
    font-size: 16px !important;
  }

  #screen-battle .zg-charge-card > .zg-charge-subtitle,
  #screen-battle .zg-charge-head .zg-charge-subtitle {
    font-size: 12px !important;
  }

  #screen-battle .zg-energy-shell {
    height: 30px !important;
    min-height: 30px !important;
  }

  #screen-battle .zg-energy-cap {
    height: 36px !important;
  }

  #screen-battle .zg-charge-btn {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    font-size: 15px !important;
  }
}

@media (max-height: 760px) {
  #screen-battle .zg-hp-stage {
    padding-top:
      max(10px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 6px !important;
  }

  #screen-battle .zg-commentary {
    min-height: 34px !important;
    padding: 7px 10px !important;
    font-size: 14px !important;
  }

  #screen-battle .zg-charge-card,
  #screen-battle .zg-launch-row > .zg-charge-layer > .zg-charge-card {
    padding: 7px 12px 8px !important;
    gap: 5px !important;
  }

  #screen-battle .zg-energy-shell {
    height: 30px !important;
    min-height: 30px !important;
  }

  #screen-battle .zg-energy-cap {
    height: 36px !important;
  }

  #screen-battle .zg-charge-btn {
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    font-size: 15px !important;
  }

  #screen-battle .zg-battle-box {
    width: min(86vw, 430px) !important;
    height: min(86vw, 430px) !important;
  }
}

@media (max-height: 680px) {
  #screen-battle .zg-commentary {
    display: none !important;
  }

  #screen-battle .zg-hp-row {
    min-height: 34px !important;
  }

  #screen-battle .zg-hp-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  #screen-battle .zg-hp-bar {
    height: 21px !important;
  }

  #screen-battle .zg-energy-shell {
    height: 26px !important;
    min-height: 26px !important;
  }

  #screen-battle .zg-energy-cap {
    height: 32px !important;
  }

  #screen-battle .zg-charge-btn {
    height: 34px !important;
    min-height: 34px !important;
    line-height: 34px !important;
    font-size: 14px !important;
  }

  #screen-battle .zg-battle-box {
    width: min(78vw, 360px) !important;
    height: min(78vw, 360px) !important;
  }
}
/* =========================================================
   27. Battle FX Base
   ========================================================= */

#screen-battle .zg-flash-overlay,
#screen-battle .zg-spark,
#screen-battle .zg-impact-ring,
#screen-battle .zg-metal-spark,
#screen-battle .zg-scratch,
#screen-battle .zg-launch-shockwave,
#screen-battle .zg-spin-afterimage,
#screen-battle .zg-impact-streak,
#screen-battle .zg-burst-piece,
#screen-battle .zg-wall-flash,
#screen-battle .zg-danger-vignette,
#screen-battle .zg-motion-trail,
#screen-battle .zg-stardust {
  pointer-events: none !important;
  will-change: transform, opacity !important;
  contain: layout paint style !important;
}


/* ------------------------------
   Flash / Danger
   ------------------------------ */

#screen-battle .zg-flash-overlay {
  position: absolute !important;
  inset: 0 !important;

  z-index: 70 !important;

  opacity: 0 !important;

  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.72), transparent 40%),
    linear-gradient(90deg, rgba(0, 230, 255, 0.22), rgba(255, 70, 110, 0.22)) !important;

  mix-blend-mode: screen !important;
}

#screen-battle .zg-flash-overlay.hit {
  animation: zgFlash 0.2s ease-out !important;
}

#screen-battle .zg-danger-vignette {
  position: absolute !important;
  inset: 0 !important;

  z-index: 45 !important;

  opacity: 0 !important;

  background:
    radial-gradient(circle at center, transparent 48%, rgba(230, 0, 18, 0.42)) !important;

  transition: opacity 0.18s ease !important;
}

#screen-battle .zg-danger-vignette.active {
  opacity: 1 !important;

  animation: zgDangerPulse 0.72s ease-in-out infinite !important;
}


/* ------------------------------
   Remove Orange Spark
   ------------------------------ */

#screen-battle .zg-spark,
#screen-battle .zg-metal-spark,
#screen-battle .zg-burst-piece {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}


/* ------------------------------
   Impact Rings
   ------------------------------ */

#screen-battle .zg-impact-ring,
#screen-battle .zg-launch-shockwave {
  position: absolute !important;

  width: 54px !important;
  height: 54px !important;

  border-radius: 999px !important;

  border: 3px solid rgba(255, 255, 255, 0.92) !important;

  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.9),
    0 0 34px rgba(0, 230, 255, 0.56),
    0 0 48px rgba(255, 70, 130, 0.28),
    inset 0 0 18px rgba(255, 255, 255, 0.24) !important;

  z-index: 64 !important;

  transform: translate(-50%, -50%) scale(0.28) !important;

  animation:
    zgImpactRingPhysical 0.72s cubic-bezier(0.12, 0.78, 0.18, 1) forwards !important;
}

#screen-battle .zg-launch-shockwave {
  width: 110px !important;
  height: 110px !important;

  border-color: rgba(180, 240, 255, 0.82) !important;

  box-shadow:
    0 0 22px rgba(0, 230, 255, 0.66),
    0 0 52px rgba(255, 255, 255, 0.3),
    inset 0 0 24px rgba(255, 255, 255, 0.18) !important;
}


/* ------------------------------
   Impact Streak / Wall Flash
   ------------------------------ */

#screen-battle .zg-impact-streak {
  position: absolute !important;

  width: 180px !important;
  height: 16px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 230, 255, 0.2) 18%,
      rgba(255,255,255,1) 44%,
      rgba(255, 255, 255, 0.78) 56%,
      rgba(255, 70, 130, 0.38) 76%,
      transparent 100%
    ) !important;

  filter:
    blur(0.2px)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.65))
    drop-shadow(0 0 18px rgba(0, 230, 255, 0.44)) !important;

  z-index: 66 !important;

  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0deg))
    scaleX(var(--scale, 1)) !important;

  animation: zgImpactStreakPhysical 0.46s ease-out forwards !important;
}

#screen-battle .zg-wall-flash {
  position: absolute !important;

  width: 110px !important;
  height: 26px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 230, 255, 0.28) 22%,
      rgba(255,255,255,0.96) 50%,
      rgba(120, 240, 255, 0.58) 74%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.64),
    0 0 34px rgba(0, 230, 255, 0.48) !important;

  z-index: 65 !important;

  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad))
    scale(var(--scale, 1)) !important;

  animation: zgWallFlashPhysical 0.56s ease-out forwards !important;
}


/* ------------------------------
   Trails / Afterimage / Scratch
   ------------------------------ */

#screen-battle .zg-motion-trail {
  position: absolute !important;

  z-index: 42 !important;

  opacity: 0.85 !important;

  height: max(20px, calc(var(--zg-battle-top-size, 84px) * 0.38)) !important;
  min-height: 20px !important;

  border-radius: 999px !important;

  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad))
    translateX(-18%) !important;

  transform-origin: center center !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 240, 255, 0.08) 10%,
      rgba(0, 240, 255, 0.48) 32%,
      rgba(255, 255, 255, 0.72) 58%,
      rgba(255, 80, 130, 0.5) 78%,
      transparent 100%
    ) !important;

  filter:
    blur(3px)
    drop-shadow(0 0 10px rgba(0, 240, 255, 0.42))
    drop-shadow(0 0 16px rgba(255, 80, 130, 0.22)) !important;

  mix-blend-mode: screen !important;

  animation: zgMotionTrailBoostFade 0.52s ease-out forwards !important;
}

#screen-battle .zg-player-trail {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 240, 255, 0.08) 10%,
      rgba(0, 240, 255, 0.62) 36%,
      rgba(255, 255, 255, 0.76) 62%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 18px rgba(0, 240, 255, 0.55),
    0 0 34px rgba(0, 170, 255, 0.28) !important;
}

#screen-battle .zg-enemy-trail {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 70, 70, 0.08) 10%,
      rgba(255, 70, 70, 0.62) 36%,
      rgba(255, 235, 150, 0.74) 62%,
      transparent 100%
    ) !important;

  box-shadow:
    0 0 18px rgba(255, 70, 70, 0.52),
    0 0 34px rgba(255, 170, 40, 0.24) !important;
}

#screen-battle .zg-spin-afterimage {
  position: absolute !important;

  border-radius: 999px !important;

  z-index: 38 !important;

  transform: translate(-50%, -50%) scale(1) !important;

  background:
    radial-gradient(circle, rgba(255,255,255,0.22), transparent 58%),
    conic-gradient(
      from 0deg,
      transparent,
      rgba(0, 235, 255, 0.48),
      transparent,
      rgba(255, 80, 130, 0.42),
      transparent
    ) !important;

  filter:
    blur(2.4px)
    drop-shadow(0 0 12px rgba(0, 230, 255, 0.38)) !important;

  opacity: 0.72 !important;

  animation: zgAfterimageBoostFade 0.62s ease-out forwards !important;
}

#screen-battle .zg-player-after {
  box-shadow: 0 0 22px rgba(0, 240, 255, 0.38) !important;
}

#screen-battle .zg-enemy-after {
  box-shadow: 0 0 22px rgba(255, 80, 50, 0.38) !important;
}

#screen-battle .zg-scratch {
  position: absolute !important;

  width: 62px !important;
  height: 8px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.42), rgba(0,220,255,0.28), transparent) !important;

  filter: blur(1px) !important;

  z-index: 35 !important;

  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad)) !important;

  animation: zgScratchFade 0.7s ease-out forwards !important;
}


/* =========================================================
   28. Battle Box State Animations
   ========================================================= */

#screen-battle .zg-battle-box.shake {
  animation: zgArenaShakePhysical 0.34s linear !important;
}

#screen-battle .zg-battle-box.big-shake,
#screen-battle .zg-battle-box.zg-collision-heavy {
  animation: zgArenaBigShakePhysical 0.48s cubic-bezier(0.16, 0.84, 0.22, 1) !important;
}

#screen-battle .zg-battle-box.punch {
  animation: zgPunch 0.2s ease-out !important;
}

#screen-battle .zg-battle-box.zg-collision-zoom {
  animation: zgCollisionZoomPhysical 0.34s ease-out !important;
}

#screen-battle .zg-battle-box.zg-launch-impact {
  animation: zgLaunchImpact 0.7s ease-out !important;
}

#screen-battle .zg-battle-box.zg-killcam {
  animation: zgKillCam 0.68s ease-out !important;
}

#screen-battle .zg-battle-box.zg-wall-rebound-box {
  animation: zgWallReboundBox 0.26s ease-out !important;
}

#screen-battle .zg-battle-box.zg-center-duel {
  animation: zgCenterDuel 0.9s ease-out !important;
}

#screen-battle .zg-battle-box.zg-over-finish {
  animation: zgOverFinish 0.62s ease-out !important;
}

#screen-battle .zg-battle-box.zg-xtreme-finish {
  animation: zgXtremeFinish 0.72s ease-out !important;
}

#screen-battle .zg-battle-box.zg-burst-finish {
  animation: zgBurstFinish 0.72s ease-out !important;
}

#screen-battle .zg-battle-box.zg-spin-finish {
  animation: zgSpinFinish 0.72s ease-out !important;
}


/* =========================================================
   29. Core Battle Keyframes
   ========================================================= */

@keyframes zgEnergySweep {
  0% {
    transform: translateX(-130%) skewX(-18deg);
  }

  100% {
    transform: translateX(130%) skewX(-18deg);
  }
}

@keyframes zgHpHitPulse {
  0% {
    filter: brightness(2) saturate(1.5);
    transform: scaleX(1.018);
  }

  45% {
    filter: brightness(1.45) saturate(1.28);
  }

  100% {
    filter: brightness(1) saturate(1);
    transform: scaleX(1);
  }
}

@keyframes zgCriticalEnergyPulse {
  from {
    opacity: 0.78;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.45),
      0 0 16px rgba(255, 70, 70, 0.45);
  }

  to {
    opacity: 1;
    box-shadow:
      0 0 18px rgba(255, 255, 255, 0.78),
      0 0 32px rgba(255, 70, 70, 0.72);
  }
}

@keyframes zgHpRowHit {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-4px);
  }

  42% {
    transform: translateX(4px);
  }

  64% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes zgHpBarFrameFlash {
  0% {
    border-color: rgba(255,255,255,0.95);
    box-shadow:
      inset 0 0 12px rgba(0, 0, 0, 0.88),
      0 0 18px rgba(255,255,255,0.82),
      0 0 34px rgba(0, 235, 255, 0.48),
      0 0 48px rgba(255, 80, 130, 0.3);
  }

  100% {
    border-color: rgba(170, 245, 255, 0.32);
    box-shadow:
      inset 0 0 12px rgba(0, 0, 0, 0.88),
      inset 0 2px 2px rgba(255, 255, 255, 0.14),
      0 0 10px rgba(0, 235, 255, 0.22),
      0 0 18px rgba(255, 80, 130, 0.1);
  }
}

@keyframes zgArenaSpin {
  to {
    transform: translate(-50%, -50%) rotate(384deg);
  }
}

@keyframes zgTopWobble {
  0%,
  100% {
    margin-left: -1px;
    margin-top: 0;
  }

  50% {
    margin-left: 1px;
    margin-top: 1px;
  }
}

@keyframes zgWinPulse {
  0%,
  100% {
    filter:
      drop-shadow(0 0 14px rgba(255,220,80,0.65))
      drop-shadow(0 10px 16px rgba(0,0,0,0.48));
  }

  50% {
    filter:
      drop-shadow(0 0 28px rgba(255,214,80,0.9))
      drop-shadow(0 0 44px rgba(255,80,80,0.55))
      drop-shadow(0 10px 16px rgba(0,0,0,0.48));
  }
}

@keyframes zgImpactSquash {
  0% {
    filter: brightness(1.55);
  }

  40% {
    filter: brightness(1.2);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes zgWallReboundTop {
  0% {
    filter: brightness(1.55);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes zgGroundGrind {
  0%,
  100% {
    margin-left: 0;
  }

  25% {
    margin-left: -2px;
  }

  75% {
    margin-left: 2px;
  }
}


/* =========================================================
   30. Charge Keyframes
   ========================================================= */

@keyframes zgEnergyHardStripe {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 28px 0;
  }
}

@keyframes zgPerfectZoneNeonGreen {
  from {
    filter: brightness(1.05) saturate(1.2);
    opacity: 0.82;
  }

  to {
    filter: brightness(1.55) saturate(1.8);
    opacity: 1;
  }
}

@keyframes zgEnergyCapPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 1;
  }
}

@keyframes zgEnergyHit {
  0% {
    filter: brightness(1.9) saturate(1.4);
    box-shadow:
      inset 0 0 14px rgba(0,0,0,0.78),
      0 0 18px rgba(255,255,255,0.72),
      0 0 28px rgba(255,80,80,0.52);
  }

  100% {
    filter: brightness(1) saturate(1);
  }
}


/* =========================================================
   31. FX Keyframes
   ========================================================= */

@keyframes zgFlash {
  0% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

@keyframes zgDangerPulse {
  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.72;
  }
}

@keyframes zgImpactRingPhysical {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.28);
    filter: brightness(1.5);
  }

  42% {
    opacity: 0.78;
    filter: brightness(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(4.2 * var(--scale, 1)));
    filter: brightness(1);
  }
}

@keyframes zgImpactStreakPhysical {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0deg))
      scaleX(0.18);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0deg))
      scaleX(calc(1.8 * var(--scale, 1)));
  }
}

@keyframes zgWallFlashPhysical {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(0.18);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(2.1);
  }
}

@keyframes zgMotionTrailBoostFade {
  0% {
    opacity: 0.95;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      translateX(-8%)
      scaleX(1.18);
  }

  55% {
    opacity: 0.68;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      translateX(-32%)
      scaleX(0.62);
  }
}

@keyframes zgAfterimageBoostFade {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1.03) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.52) rotate(110deg);
  }
}

@keyframes zgScratchFade {
  0% {
    opacity: 0.55;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(0.55);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(1.45);
  }
}


/* =========================================================
   32. Arena State Keyframes
   ========================================================= */




@keyframes zgArenaShakePhysical {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  18% {
    transform: translate3d(-3px, 2px, 0) scale(1.004);
  }

  36% {
    transform: translate3d(3px, -2px, 0) scale(1.006);
  }

  54% {
    transform: translate3d(-2px, -3px, 0) scale(1.004);
  }

  72% {
    transform: translate3d(2px, 3px, 0) scale(1.002);
  }
}

@keyframes zgArenaBigShakePhysical {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  14% {
    transform: translate3d(-6px, 4px, 0) scale(1.008);
  }

  28% {
    transform: translate3d(6px, -4px, 0) scale(1.014);
  }

  44% {
    transform: translate3d(-4px, -6px, 0) scale(1.01);
  }

  62% {
    transform: translate3d(4px, 5px, 0) scale(1.006);
  }

  80% {
    transform: translate3d(-2px, 2px, 0) scale(1.002);
  }
}

@keyframes zgPunch {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.985);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zgCollisionZoomPhysical {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  36% {
    transform: scale(1.024);
    filter: brightness(1.34) saturate(1.2);
  }

  68% {
    transform: scale(0.994);
    filter: brightness(1.08);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes zgLaunchImpact {
  0% {
    transform: scale(0.985);
    filter: brightness(1.35);
  }

  45% {
    transform: scale(1.018);
    filter: brightness(1.12);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes zgKillCam {
  0% {
    transform: scale(1);
    filter: contrast(1) brightness(1);
  }

  28% {
    transform: scale(1.035);
    filter: contrast(1.18) brightness(1.28);
  }

  46% {
    transform: scale(0.992);
    filter: contrast(1.05) brightness(0.96);
  }

  100% {
    transform: scale(1);
    filter: contrast(1) brightness(1);
  }
}

@keyframes zgWallReboundBox {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.012) rotate(-0.35deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

@keyframes zgCenterDuel {
  0% {
    filter: brightness(1);
  }

  40% {
    filter: brightness(1.35) saturate(1.3);
  }

  100% {
    filter: brightness(1);
  }
}

@keyframes zgOverFinish {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.04) rotate(0.5deg);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zgXtremeFinish {
  0% {
    transform: scale(1) rotate(0);
    filter: hue-rotate(0deg);
  }

  35% {
    transform: scale(1.05) rotate(-1deg);
    filter: hue-rotate(40deg) brightness(1.3);
  }

  70% {
    transform: scale(0.99) rotate(1deg);
    filter: hue-rotate(-30deg) brightness(1.1);
  }

  100% {
    transform: scale(1) rotate(0);
    filter: hue-rotate(0deg);
  }
}

@keyframes zgBurstFinish {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  38% {
    transform: scale(1.055);
    filter: brightness(1.5) saturate(1.5);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes zgSpinFinish {
  0% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.25) saturate(1.25);
  }

  100% {
    filter: brightness(1);
  }
}


/* =========================================================
   33. Performance Guard
   ========================================================= */

.zg-battle-top,
.zg-battle-top-photo {
  will-change: transform, left, top !important;
  backface-visibility: hidden !important;
  transform-style: flat !important;
}

.zg-motion-trail,
.zg-scratch,
.zg-impact-ring,
.zg-impact-streak,
.zg-launch-shockwave,
.zg-wall-flash,
.zg-stardust {
  pointer-events: none !important;
  will-change: transform, opacity !important;
  contain: layout paint style !important;
}

.zg-hp-fill,
.zg-energy-fill,
.zg-energy-glow,
.zg-energy-cap {
  will-change: width, transform, opacity !important;
}

.zg-flash-overlay {
  pointer-events: none !important;
  will-change: opacity !important;
}

.zelo-physics-canvas,
.zg-battle-canvas {
  pointer-events: none !important;
}

#screen-battle .zg-arena-ring,
#screen-battle .zg-flash-overlay,
#screen-battle .zg-xtreme-zone,
#screen-battle .zg-pocket-zone,
#screen-battle .zg-danger-vignette,
#screen-battle .zg-motion-trail,
#screen-battle .zg-spark,
#screen-battle .zg-impact-ring,
#screen-battle .zg-metal-spark,
#screen-battle .zg-scratch,
#screen-battle .zg-launch-shockwave,
#screen-battle .zg-spin-afterimage,
#screen-battle .zg-impact-streak,
#screen-battle .zg-burst-piece,
#screen-battle .zg-wall-flash {
  pointer-events: none !important;
}

#screen-battle .zg-energy-shell {
  --zg-charge-pct: 0%;

  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#screen-battle .zg-energy-shell::before,
#screen-battle .zg-energy-shell::after {
  width: var(--zg-charge-pct) !important;
}

#screen-battle .zg-energy-fill,
#screen-battle .zg-energy-glow {
  display: none !important;
}


/* Low performance mobile protection */
@media (max-width: 480px), (max-height: 760px) {
  .zg-motion-trail,
  .zg-scratch,
  .zg-stardust {
    display: none !important;
  }
}


/* =========================================================
   34. LIFF / iOS Safe Area
   ========================================================= */

#zelo-liff-game,
.zg-clean-root {
  height: var(--zg-app-height, 100dvh) !important;
  min-height: var(--zg-app-height, 100dvh) !important;
  max-height: var(--zg-app-height, 100dvh) !important;
  overflow: hidden !important;
}

.zg-screen {
  height: var(--zg-app-height, 100dvh) !important;
  min-height: var(--zg-app-height, 100dvh) !important;
  max-height: var(--zg-app-height, 100dvh) !important;
  box-sizing: border-box !important;
}

@supports (padding: max(0px)) {
  .zg-screen {
    padding-top: max(16px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  #screen-battle {
    padding: 0 !important;
  }

  .zg-toast,
  #zg-toast {
    bottom: max(22px, env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* =========================================================
   35. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  #screen-select .zg-top-card,
  #screen-select .zg-top-card::before,
  #screen-select .zg-top-card::after,
  #screen-select .zg-top-icon,
  #screen-select .zg-top-icon::before,
  #screen-select .zg-top-icon::after,
  #screen-select .zg-select-orb,
  #screen-select .zg-select-grid,
  #screen-select .zg-select-stars i,
  #screen-select .zg-select-energy-rings i,
  #screen-select .zg-select-comets i,
  #screen-select .zg-secret-top-card::before,
  #screen-select .zg-secret-top-shadow::before,
  #screen-battle .zg-hp-fill::before,
  #screen-battle .zg-battle-box::after,
  #screen-battle .zg-energy-shell::after {
    animation: none !important;
  }
}
/* =========================================================
   36. Result Page Final Layout
   ========================================================= */

#screen-result,
#screen-result.zg-screen,
#screen-result.zg-result-screen {
  position: relative !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  color: #fff !important;

  background:
    radial-gradient(circle at 20% 10%, rgba(255, 64, 64, 0.2), transparent 34%),
    radial-gradient(circle at 80% 18%, rgba(87, 242, 255, 0.16), transparent 36%),
    linear-gradient(180deg, #100513 0%, #07111f 52%, #030611 100%) !important;
}

#screen-result[hidden],
#screen-result:not(.active):not(.is-active) {
  display: none !important;
}

#screen-result.active,
#screen-result.is-active {
  display: flex !important;
}

#screen-result .zg-result-main {
  width: 100% !important;
  max-width: 430px !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--zg-app-height, 100vh) !important;

  margin: 0 auto !important;

  padding:
    calc(env(safe-area-inset-top, 0px) + 10px)
    14px
    calc(env(safe-area-inset-bottom, 0px) + 10px) !important;

  display: grid !important;
  grid-template-rows:
    minmax(170px, 23.5vh)
    auto
    1fr
    auto !important;

  gap: 8px !important;

  overflow: hidden !important;

  box-sizing: border-box !important;
}

#screen-result .zg-result-visual {
  position: relative !important;

  min-height: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}

#screen-result .zg-result-visual::before {
  content: "" !important;

  position: absolute !important;
  left: 50% !important;
  top: 52% !important;

  width: 230px !important;
  height: 230px !important;

  border-radius: 999px !important;

  transform: translate(-50%, -50%) !important;

  background:
    radial-gradient(circle, rgba(255,214,80,0.2), transparent 60%) !important;

  filter: blur(4px) !important;

  opacity: 0.8 !important;

  pointer-events: none !important;
}

#screen-result .zg-result-hero {
  position: relative !important;
  z-index: 2 !important;

  width: min(48vw, 190px) !important;
  height: min(48vw, 190px) !important;

  max-width: 190px !important;
  max-height: 190px !important;

  min-width: 130px !important;
  min-height: 130px !important;

  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.3), transparent 24%),
    linear-gradient(145deg, rgba(255,48,74,0.95), rgba(87,242,255,0.85)) !important;

  box-shadow:
    0 0 30px rgba(255,214,80,0.28),
    0 20px 54px rgba(0,0,0,0.45),
    inset 0 0 18px rgba(255,255,255,0.2) !important;
}

#screen-result .zg-result-hero::before {
  content: "" !important;

  position: absolute !important;
  inset: -12px !important;

  border-radius: inherit !important;

  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(255,255,255,0.45),
      transparent,
      rgba(255,214,80,0.45),
      transparent
    ) !important;

  animation: zgResultHeroRing 3.6s linear infinite !important;

  z-index: -1 !important;
}

#screen-result .zg-result-top-img {
  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;

  display: block !important;

  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,0.45))
    drop-shadow(0 0 18px rgba(255,255,255,0.32)) !important;

  animation: zgResultTopFloat 2.4s ease-in-out infinite alternate !important;
}


/* ------------------------------
   Result Text
   ------------------------------ */

#screen-result .zg-result-summary-text {
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  gap: 4px !important;

  transform: translateY(-14px) !important;
}

#screen-result .zg-result-title {
  margin: 0 !important;

  color: #ffffff !important;

  text-align: center !important;

  font-size: 44px !important;
  line-height: 0.95 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.055em !important;

  text-shadow:
    0 4px 0 rgba(0,0,0,0.28),
    0 0 20px rgba(255,214,80,0.24) !important;

  transform: translateY(-14px) !important;
}

#screen-result .zg-result-message {
  margin: 1px 0 0 !important;

  color: rgba(255,255,255,0.78) !important;

  text-align: center !important;

  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;

  transform: translateY(-14px) !important;
}


/* ------------------------------
   Result Scroll Content
   ------------------------------ */

#screen-result .zg-result-scroll {
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;

  padding:
    0
    1px
    4px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

#screen-result .zg-result-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#screen-result .zg-result-card,
#screen-result .zg-result-stats,
#screen-result .zg-coupon-card,
#screen-result .zg-invite-card,
#screen-result .zg-friend-rank-card {
  width: 100% !important;

  margin: 0 !important;
  padding: 10px 12px !important;

  border-radius: 18px !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055)) !important;

  border: 1px solid rgba(255,255,255,0.12) !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;

  box-sizing: border-box !important;
}

#screen-result .zg-result-card {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

#screen-result .zg-mini-stat {
  padding: 8px !important;

  border-radius: 14px !important;

  background: rgba(0,0,0,0.18) !important;

  text-align: center !important;
}

#screen-result .zg-mini-stat span {
  display: block !important;

  color: rgba(255,255,255,0.62) !important;

  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

#screen-result .zg-mini-stat strong {
  display: block !important;

  margin-top: 2px !important;

  color: #fff35a !important;

  font-size: 18px !important;
  line-height: 1.05 !important;
  font-weight: 1000 !important;

  text-shadow:
    0 0 10px rgba(255, 230, 90, 0.4) !important;
}


/* ------------------------------
   Result Stats List
   ------------------------------ */

#screen-result .zg-result-stats {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#screen-result .zg-stat-line {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;

  min-height: 24px !important;

  color: rgba(255,255,255,0.82) !important;

  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}

#screen-result .zg-stat-line strong {
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 1000 !important;
}


/* =========================================================
   37. Coupon / Invite
   ========================================================= */

#screen-result .zg-coupon-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  border-color: rgba(255,214,80,0.26) !important;

  background:
    radial-gradient(circle at 12% 50%, rgba(255,214,80,0.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)) !important;
}

#screen-result .zg-coupon-main {
  min-width: 0 !important;
}

#screen-result .zg-coupon-title {
  margin: 0 !important;

  color: #fff !important;

  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
}

#screen-result .zg-coupon-code {
  margin-top: 4px !important;

  color: #111827 !important;

  display: inline-flex !important;
  align-items: center !important;

  max-width: 100% !important;

  padding: 5px 8px !important;

  border-radius: 10px !important;

  background: linear-gradient(180deg, #fff6bd, #ffd650) !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: 0.08em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-result .zg-coupon-note,
#screen-result .zg-invite-note {
  margin: 4px 0 0 !important;

  color: rgba(255,255,255,0.62) !important;

  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 750 !important;
}

#screen-result .zg-copy-coupon-btn,
#screen-result .zg-invite-line-btn {
  flex: 0 0 auto !important;

  width: auto !important;
  min-width: 86px !important;
  min-height: 38px !important;

  padding: 0 12px !important;

  border-radius: 999px !important;
  border: 0 !important;

  color: #111827 !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  background: linear-gradient(135deg, #ffffff, #ffd650) !important;

  box-shadow:
    0 8px 18px rgba(255,214,80,0.22),
    inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

#screen-result .zg-invite-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  border-color: rgba(6,199,85,0.26) !important;

  background:
    radial-gradient(circle at 12% 50%, rgba(6,199,85,0.16), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.13), rgba(255,255,255,0.055)) !important;
}

#screen-result .zg-invite-title {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
}

#screen-result .zg-invite-line-btn {
  color: #fff !important;

  background:
    linear-gradient(135deg, #8dffb8, #06c755, #00933d) !important;

  box-shadow:
    0 8px 18px rgba(6,199,85,0.28),
    inset 0 1px 0 rgba(255,255,255,0.34) !important;
}


/* =========================================================
   38. Friend Rank
   ========================================================= */

#screen-result .zg-friend-rank-card {
  padding: 10px !important;
}

#screen-result .zg-friend-rank-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;

  margin-bottom: 8px !important;
}

#screen-result .zg-friend-rank-title {
  margin: 0 !important;

  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 1000 !important;
}

#screen-result .zg-friend-rank-subtitle {
  margin: 0 !important;

  color: rgba(255,255,255,0.58) !important;

  font-size: 10px !important;
  line-height: 1.15 !important;
  font-weight: 750 !important;

  text-align: right !important;
}

#screen-result .zg-friend-rank-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#screen-result .zg-friend-rank-empty {
  padding: 10px !important;

  border-radius: 14px !important;

  color: rgba(255,255,255,0.62) !important;

  text-align: center !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  background: rgba(0,0,0,0.18) !important;
}

#screen-result .zg-friend-rank-row {
  min-height: 42px !important;

  display: grid !important;
  grid-template-columns: 34px 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 6px 8px !important;

  border-radius: 14px !important;

  background: rgba(0,0,0,0.18) !important;

  border: 1px solid rgba(255,255,255,0.06) !important;

  box-sizing: border-box !important;
}

#screen-result .zg-friend-rank-row.is-me {
  background:
    linear-gradient(90deg, rgba(255,214,80,0.18), rgba(255,255,255,0.06)) !important;

  border-color: rgba(255,214,80,0.26) !important;
}

#screen-result .zg-friend-rank-no {
  color: #ffd650 !important;

  font-size: 12px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

#screen-result .zg-friend-rank-avatar {
  width: 34px !important;
  height: 34px !important;

  border-radius: 999px !important;

  overflow: hidden !important;

  background: rgba(255,255,255,0.12) !important;
}

#screen-result .zg-friend-rank-avatar img {
  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  display: block !important;
}

#screen-result .zg-friend-rank-name {
  min-width: 0 !important;

  color: #ffffff !important;

  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#screen-result .zg-friend-rank-score {
  color: #fff35a !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  white-space: nowrap !important;

  text-shadow:
    0 0 10px rgba(255,230,90,0.42) !important;
}


/* =========================================================
   39. Result Bottom 2x2 Buttons
   ========================================================= */

#screen-result .zg-result-bottom {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;

  box-sizing: border-box !important;
}

#screen-result .zg-result-bottom .zg-btn {
  min-width: 0 !important;

  width: 100% !important;
  min-height: 44px !important;
  height: 44px !important;

  padding: 0 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  white-space: nowrap !important;

  box-sizing: border-box !important;
}

#screen-result .zg-result-bottom .zg-btn:nth-child(3):last-child {
  grid-column: 1 / -1 !important;
}


/* =========================================================
   40. Result Animations
   ========================================================= */

@keyframes zgResultHeroRing {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes zgResultTopFloat {
  0% {
    transform: translateY(0) rotate(-4deg) scale(1);
  }

  100% {
    transform: translateY(-8px) rotate(5deg) scale(1.04);
  }
}


/* =========================================================
   41. Result Mobile / Height
   ========================================================= */

@media (max-height: 720px) {
  #screen-result .zg-result-main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;

    grid-template-rows:
      minmax(142px, 20.5vh)
      auto
      1fr
      auto !important;

    gap: 6px !important;
  }

  #screen-result .zg-result-hero {
    width: min(42vw, 156px) !important;
    height: min(42vw, 156px) !important;

    min-width: 112px !important;
    min-height: 112px !important;
  }

  #screen-result .zg-result-summary-text,
  #screen-result .zg-result-title,
  #screen-result .zg-result-message {
    transform: translateY(-12px) !important;
  }

  #screen-result .zg-result-title {
    font-size: 38px !important;
  }

  #screen-result .zg-result-message {
    font-size: 13px !important;
  }

  #screen-result .zg-result-card,
  #screen-result .zg-result-stats,
  #screen-result .zg-coupon-card,
  #screen-result .zg-invite-card,
  #screen-result .zg-friend-rank-card {
    padding: 8px 10px !important;
    border-radius: 16px !important;
  }

  #screen-result .zg-result-scroll {
    gap: 6px !important;
  }

  #screen-result .zg-result-bottom .zg-btn {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 12px !important;
  }
}

@media (min-height: 820px) {
  #screen-result .zg-result-summary-text,
  #screen-result .zg-result-title,
  #screen-result .zg-result-message {
    transform: translateY(-16px) !important;
  }
}

@media (max-width: 380px) {
  #screen-result .zg-result-main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #screen-result .zg-result-title {
    font-size: 40px !important;
  }

  #screen-result .zg-coupon-card,
  #screen-result .zg-invite-card {
    gap: 8px !important;
  }

  #screen-result .zg-copy-coupon-btn,
  #screen-result .zg-invite-line-btn {
    min-width: 78px !important;
    padding: 0 10px !important;
  }

  #screen-result .zg-result-bottom {
    gap: 7px !important;
  }

  #screen-result .zg-result-bottom .zg-btn {
    font-size: 12px !important;
  }
}


/* =========================================================
   42. Final Screen Guards
   ========================================================= */

body[data-zg-screen="result"] {
  overflow: hidden !important;
}

body[data-zg-screen="result"] #zelo-liff-game,
body[data-zg-screen="result"] .zg-clean-root {
  overflow: hidden !important;
}

body[data-zg-screen="result"] #screen-result {
  overflow: hidden !important;
}

body[data-zg-screen="result"] #screen-result .zg-result-scroll {
  overflow-y: auto !important;
}

body[data-zg-screen="select"] #screen-select {
  padding-bottom: 0 !important;
}

body[data-zg-screen="battle"] #screen-battle {
  padding: 0 !important;
}

body[data-zg-screen="result"] #screen-result {
  padding: 0 !important;
}

/*
 * =========================================================
 * SELECT PAGE FIXED BATTLE BUTTON
 * Version: 202607170904-select-fixed-battle-button
 * =========================================================
 */

/*
 * 選擇頁允許內容滑動，但底部按鈕固定不動
 */
body[data-zg-screen="select"] #zelo-liff-game,
body[data-zg-screen="select"] .zg-clean-root {
  overflow: hidden !important;
}

body[data-zg-screen="select"] #screen-select,
body[data-zg-screen="select"] .zg-select-screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  left: 0 !important;
  top: 0 !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/*
 * 只有內容區可以滑動
 * 底部預留按鈕高度，避免隱藏陀螺區被按鈕蓋住
 */
body[data-zg-screen="select"] .zg-select-screen .zg-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
  box-sizing: border-box !important;
}

/*
 * 底部按鈕固定不動
 */
body[data-zg-screen="select"] .zg-select-fixed-bottom,
body[data-zg-screen="select"] .zg-bottom {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;

  display: block !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 90 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

/*
 * 發射按鈕：單顆滿版，不橫排
 */
body[data-zg-screen="select"] .zg-select-battle-btn,
body[data-zg-screen="select"] .zg-bottom .zg-btn[data-zg-action="battle"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 54px !important;
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 18px !important;

  border-radius: 18px !important;
  box-sizing: border-box !important;

  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  pointer-events: auto !important;
  position: relative !important;
  z-index: 91 !important;
}

/*
 * 確保選擇頁底部只有單欄，不會變成橫排 grid
 */
body[data-zg-screen="select"] .zg-bottom {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  gap: 0 !important;
}

/*
 * =========================================================
 * SELECT SCROLL + FIXED BATTLE BUTTON
 * Version: 202607170910-select-scroll-secret-fixed
 * =========================================================
 */

body[data-zg-screen="select"],
body[data-zg-screen="select"] html {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body[data-zg-screen="select"] #zelo-liff-game,
body[data-zg-screen="select"] .zg-clean-root {
  overflow: hidden !important;
  touch-action: none !important;
}

body[data-zg-screen="select"] #screen-select,
body[data-zg-screen="select"] .zg-select-screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
  touch-action: none !important;
}

body[data-zg-screen="select"] .zg-select-screen .zg-main {
  position: relative !important;
  display: block !important;

  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;

  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px) !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

body[data-zg-screen="select"] .zg-select-fixed-bottom,
body[data-zg-screen="select"] .zg-bottom {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: block !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  gap: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 90 !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

body[data-zg-screen="select"] .zg-select-battle-btn,
body[data-zg-screen="select"] .zg-bottom .zg-btn[data-zg-action="battle"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: 54px !important;
  min-height: 54px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 18px !important;

  border-radius: 18px !important;
  box-sizing: border-box !important;

  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  pointer-events: auto !important;
  position: relative !important;
  z-index: 91 !important;
  touch-action: manipulation !important;
}
/*
 * =========================================================
 * RESULT PAGE VISUAL ONLY FIX
 * Version: 202607170917-result-visual-only-fixed
 *
 * 只修美術，不動版位：
 * - 修成功 / 失敗 badge 美術
 * - 修邀請獎勵區太黑
 * - 修好友排行榜區太黑
 * - 修排行榜列文字與背景
 * - 不改 grid-template / height / position
 * =========================================================
 */

/*
 * ---------------------------------------------------------
 * 1. 結果頁整體背景維持深色，但增加層次
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-result-screen,
body[data-zg-screen="result"] .zg-reward-result-screen,
body[data-zg-screen="result"] .zg-result-onepage-screen {
  background:
    radial-gradient(circle at 22% 0%, rgba(230, 0, 18, .30) 0%, rgba(230, 0, 18, .10) 28%, transparent 52%),
    radial-gradient(circle at 82% 10%, rgba(20, 160, 255, .22) 0%, rgba(20, 160, 255, .08) 30%, transparent 58%),
    linear-gradient(180deg, #101523 0%, #06101f 46%, #020914 100%) !important;
}

/*
 * ---------------------------------------------------------
 * 2. 修正「失敗 / 勝利」Badge 美術
 * 目前你截圖是黑方塊，這裡改回發光膠囊牌
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-result-badge-row {
  isolation: isolate !important;
}

body[data-zg-screen="result"] .zg-result-badge,
body[data-zg-screen="result"] #zg-result-badge {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: #ffffff !important;

  /*
   * 不動版位，只修外觀
   */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 42%, rgba(0,0,0,.20) 100%),
    linear-gradient(135deg, rgba(255,65,96,.95) 0%, rgba(115,28,64,.92) 48%, rgba(26,18,34,.96) 100%) !important;

  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 0 !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 18px rgba(255,60,100,.55),
    0 0 34px rgba(255,60,100,.22),
    0 10px 22px rgba(0,0,0,.42) !important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.48),
    0 0 12px rgba(255,255,255,.35) !important;

  overflow: visible !important;
}

/*
 * Badge 上下金屬光
 */
body[data-zg-screen="result"] .zg-result-badge::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 42% !important;

  background: linear-gradient(
    180deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.10) 62%,
    transparent 100%
  ) !important;

  pointer-events: none !important;
}

body[data-zg-screen="result"] .zg-result-badge::after {
  content: "" !important;
  position: absolute !important;
  left: -10px !important;
  right: -10px !important;
  top: 50% !important;

  height: 1px !important;

  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 18%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.55) 82%,
    transparent 100%
  ) !important;

  opacity: .65 !important;
  pointer-events: none !important;
}

/*
 * 勝利時改成金紅光
 */
body[data-zg-screen="result"][data-result="win"] .zg-result-badge,
body[data-zg-screen="result"] .zg-result-main.zg-result-win .zg-result-badge {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.16) 100%),
    linear-gradient(135deg, #fff06a 0%, #ff9f1c 40%, #e60012 100%) !important;

  color: #200a00 !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 20px rgba(255,214,64,.75),
    0 0 38px rgba(255,70,30,.32),
    0 10px 22px rgba(0,0,0,.42) !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.38),
    0 0 12px rgba(255,255,255,.34) !important;
}

/*
 * 失敗時改成紫紅光，不要純黑
 */
body[data-zg-screen="result"][data-result="lose"] .zg-result-badge,
body[data-zg-screen="result"] .zg-result-main.zg-result-lose .zg-result-badge {
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 42%, rgba(0,0,0,.18) 100%),
    linear-gradient(135deg, #ff4d6d 0%, #8f1d52 48%, #281426 100%) !important;

  color: #ffffff !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.12) inset,
    0 0 20px rgba(255,58,108,.62),
    0 0 40px rgba(255,58,108,.24),
    0 10px 22px rgba(0,0,0,.42) !important;
}

/*
 * 平手
 */
body[data-zg-screen="result"][data-result="draw"] .zg-result-badge,
body[data-zg-screen="result"] .zg-result-main.zg-result-draw .zg-result-badge {
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 42%, rgba(0,0,0,.18) 100%),
    linear-gradient(135deg, #57f2ff 0%, #2e7bff 52%, #1b1f48 100%) !important;

  color: #ffffff !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 20px rgba(87,242,255,.62),
    0 0 38px rgba(46,123,255,.26),
    0 10px 22px rgba(0,0,0,.42) !important;
}

/*
 * ---------------------------------------------------------
 * 3. 戰鬥摘要卡片不要全黑，補玻璃感
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-result-battle-summary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.025) 100%),
    radial-gradient(circle at 50% 34%, rgba(87,242,255,.18) 0%, transparent 42%),
    rgba(4, 12, 24, .28) !important;

  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 40px rgba(0,0,0,.12) !important;
}

/*
 * 結果標題光感
 */
body[data-zg-screen="result"] .zg-result-title {
  color: #ffffff !important;

  text-shadow:
    0 2px 8px rgba(0,0,0,.55),
    0 0 16px rgba(255,255,255,.18),
    0 0 28px rgba(87,242,255,.12) !important;
}

body[data-zg-screen="result"] .zg-result-message {
  color: rgba(255,255,255,.84) !important;

  text-shadow:
    0 1px 4px rgba(0,0,0,.45) !important;
}

/*
 * ---------------------------------------------------------
 * 4. 左右四個能量 / 轉速欄位不要太黑
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-mini-stat {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.035) 100%),
    rgba(9, 20, 36, .64) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 8px 18px rgba(0,0,0,.22),
    0 0 16px rgba(87,242,255,.07) !important;

  backdrop-filter: blur(10px) !important;
}

body[data-zg-screen="result"] .zg-mini-stat strong {
  color: #fff25a !important;

  text-shadow:
    0 0 10px rgba(255,242,90,.60),
    0 2px 4px rgba(0,0,0,.42) !important;
}

body[data-zg-screen="result"] .zg-mini-stat span {
  color: rgba(255,255,255,.82) !important;
}

/*
 * ---------------------------------------------------------
 * 5. 邀請獎勵卡太黑，改成玻璃藍紫卡
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-friend-onepage-card,
body[data-zg-screen="result"] #zg-friend-rank {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/*
 * 邀請獎勵區塊
 */
body[data-zg-screen="result"] .zg-invite-onepage-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.105) 0%, rgba(255,255,255,.035) 100%),
    radial-gradient(circle at 16% 20%, rgba(255,240,106,.16) 0%, transparent 34%),
    radial-gradient(circle at 86% 30%, rgba(87,242,255,.14) 0%, transparent 38%),
    rgba(7, 16, 31, .58) !important;

  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 28px rgba(0,0,0,.20),
    0 0 24px rgba(87,242,255,.05) !important;

  backdrop-filter: blur(10px) !important;

  color: #ffffff !important;
}

/*
 * 邀請獎勵文字
 */
body[data-zg-screen="result"] .zg-invite-onepage-title {
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-invite-onepage-status {
  color: #fff06a !important;
  opacity: 1 !important;

  text-shadow:
    0 0 10px rgba(255,240,106,.32) !important;
}

body[data-zg-screen="result"] .zg-invite-onepage-count,
body[data-zg-screen="result"] .zg-invite-onepage-rank {
  color: rgba(255,255,255,.86) !important;
  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-invite-onepage-count b {
  color: #57f2ff !important;

  text-shadow:
    0 0 10px rgba(87,242,255,.40) !important;
}

/*
 * 邀請進度節點
 */
body[data-zg-screen="result"] .zg-progress-node {
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-progress-node i {
  background:
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.04) 100%),
    rgba(9, 18, 34, .78) !important;

  border: 1px solid rgba(255,255,255,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 10px rgba(87,242,255,.12) !important;
}

body[data-zg-screen="result"] .zg-progress-node.is-active i {
  background:
    linear-gradient(180deg, #fff06a 0%, #ffb21c 100%) !important;

  color: #1b1000 !important;

  box-shadow:
    0 0 12px rgba(255,240,106,.55),
    0 0 22px rgba(255,178,28,.28) !important;
}

body[data-zg-screen="result"] .zg-progress-line {
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), rgba(87,242,255,.24), rgba(255,255,255,.14)) !important;

  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-progress-line.is-active {
  background:
    linear-gradient(90deg, #fff06a, #ffb21c) !important;

  box-shadow:
    0 0 10px rgba(255,240,106,.40) !important;
}

/*
 * ---------------------------------------------------------
 * 6. 好友排行榜卡片太黑，改成可讀玻璃卡
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-rank-scroll-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.028) 100%),
    radial-gradient(circle at 18% 0%, rgba(87,242,255,.09) 0%, transparent 34%),
    rgba(5, 14, 28, .46) !important;

  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 30px rgba(0,0,0,.16) !important;

  backdrop-filter: blur(10px) !important;
}

/*
 * 你截圖裡「好友排行榜」很暗，這裡強制白亮
 */
body[data-zg-screen="result"] .zg-rank-scroll-head,
body[data-zg-screen="result"] .zg-rank-scroll-head span {
  color: rgba(255,255,255,.90) !important;
  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-rank-title {
  color: #ffffff !important;
  opacity: 1 !important;

  text-shadow:
    0 0 12px rgba(87,242,255,.36),
    0 2px 6px rgba(0,0,0,.45) !important;
}

/*
 * 排行榜列：不要黑到融入背景
 */
body[data-zg-screen="result"] .zg-rank-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,.095) 0%, rgba(255,255,255,.028) 100%),
    rgba(9, 20, 38, .50) !important;

  border: 1px solid rgba(255,255,255,.095) !important;
  border-radius: 13px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 14px rgba(0,0,0,.12) !important;

  color: #ffffff !important;
  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-rank-item.is-me {
  background:
    linear-gradient(180deg, rgba(255,240,106,.16) 0%, rgba(255,255,255,.035) 100%),
    rgba(12, 24, 42, .58) !important;

  border-color: rgba(255,240,106,.22) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 18px rgba(255,240,106,.08),
    0 6px 14px rgba(0,0,0,.14) !important;
}

body[data-zg-screen="result"] .zg-rank-medal {
  color: #fff06a !important;
  opacity: 1 !important;

  text-shadow:
    0 0 10px rgba(255,240,106,.45) !important;
}

body[data-zg-screen="result"] .zg-rank-name,
body[data-zg-screen="result"] .zg-rank-score {
  color: #ffffff !important;
  opacity: 1 !important;

  text-shadow:
    0 1px 4px rgba(0,0,0,.45) !important;
}

body[data-zg-screen="result"] .zg-rank-me-badge {
  background: linear-gradient(180deg, #fff06a 0%, #ffb21c 100%) !important;
  color: #1a1000 !important;

  border: 0 !important;
  box-shadow:
    0 0 10px rgba(255,240,106,.35) !important;
}

/*
 * ---------------------------------------------------------
 * 7. 優惠券只微調美術，不動尺寸
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-coupon-ticket,
body[data-zg-screen="result"] #zg-coupon-card {
  background:
    radial-gradient(circle at left center, rgba(9,6,18,1) 0 10px, transparent 11px),
    radial-gradient(circle at right center, rgba(9,6,18,1) 0 10px, transparent 11px),
    linear-gradient(100deg, #fff8dc 0%, #ffe680 34%, #ffb21c 100%) !important;

  border: 1px solid rgba(255,255,255,.56) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 10px 28px rgba(0,0,0,.24),
    0 0 22px rgba(255,178,28,.16) !important;
}

body[data-zg-screen="result"] .zg-coupon-label,
body[data-zg-screen="result"] .zg-coupon-desc {
  color: #251400 !important;
  opacity: 1 !important;
}

body[data-zg-screen="result"] .zg-coupon-code,
body[data-zg-screen="result"] #zg-coupon-code {
  color: #101728 !important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.28) !important;
}

body[data-zg-screen="result"] .zg-coupon-copy {
  background:
    linear-gradient(180deg, #ffffff 0%, #fff4d1 100%) !important;

  color: #1e1200 !important;
  border: 0 !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 6px 16px rgba(0,0,0,.16) !important;
}

/*
 * ---------------------------------------------------------
 * 8. 底部按鈕只修光影，不動位置
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-result-actions .zg-btn {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 18px rgba(0,0,0,.24) !important;
}

body[data-zg-screen="result"] .zg-result-actions .zg-btn-red {
  background:
    linear-gradient(180deg, #ff3446 0%, #e60012 100%) !important;

  color: #ffffff !important;
}

body[data-zg-screen="result"] .zg-result-actions .zg-btn-line {
  background:
    linear-gradient(180deg, #18d96a 0%, #06c755 100%) !important;

  color: #ffffff !important;
}

body[data-zg-screen="result"] .zg-result-actions .zg-btn-blue {
  background:
    linear-gradient(180deg, #57d8ff 0%, #1f66ff 100%) !important;

  color: #ffffff !important;
}

body[data-zg-screen="result"] .zg-result-actions .zg-btn-light {
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 100%),
    #030914 !important;

  color: #ffffff !important;

  border: 1px solid rgba(255,255,255,.16) !important;
}

/*
 * ---------------------------------------------------------
 * 9. 防止舊版樣式把卡片 opacity 壓低
 * ---------------------------------------------------------
 */

body[data-zg-screen="result"] .zg-result-battle-summary,
body[data-zg-screen="result"] .zg-invite-onepage-card,
body[data-zg-screen="result"] .zg-rank-scroll-card,
body[data-zg-screen="result"] .zg-rank-item,
body[data-zg-screen="result"] .zg-rank-title,
body[data-zg-screen="result"] .zg-rank-name,
body[data-zg-screen="result"] .zg-rank-score,
body[data-zg-screen="result"] .zg-rank-medal {
  opacity: 1 !important;
  visibility: visible !important;
}

.zg-launch-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 95, 0.18), transparent 32%),
    rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(2px);
}

.zg-launch-countdown-text {
  font-size: clamp(92px, 28vw, 188px);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: -0.08em;
  color: #ffffff;
  text-shadow:
    0 0 14px rgba(255, 224, 95, 0.95),
    0 0 34px rgba(255, 45, 84, 0.75),
    0 18px 38px rgba(0, 0, 0, 0.55);
  transform: scale(0.78);
  opacity: 0;
}

.zg-launch-countdown-overlay.is-pop .zg-launch-countdown-text {
  animation: zgCountdownPop 0.68s cubic-bezier(.16, 1.18, .32, 1) both;
}

.zg-launch-countdown-overlay.is-go .zg-launch-countdown-text {
  color: #ffe05f;
  text-shadow:
    0 0 18px rgba(255, 224, 95, 1),
    0 0 44px rgba(6, 199, 85, 0.95),
    0 0 74px rgba(87, 242, 255, 0.75),
    0 18px 38px rgba(0, 0, 0, 0.55);
}

.zg-launch-countdown-overlay.is-done {
  opacity: 0;
  transition: opacity 0.28s ease;
}

@keyframes zgCountdownPop {
  0% {
    transform: scale(0.42) rotate(-8deg);
    opacity: 0;
    filter: blur(8px);
  }

  35% {
    transform: scale(1.18) rotate(2deg);
    opacity: 1;
    filter: blur(0);
  }

  72% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }

  100% {
    transform: scale(0.86) rotate(0);
    opacity: 0;
  }
}
/*
 * =========================================================
 * FINAL PATCH
 * Version: 202607171326-launch-countdown-auto-final
 * - select scroll stability
 * - launch countdown overlay priority
 * - battle launch button locked state
 * =========================================================
 */

/* Select: 修正無效 selector 的實際目標 */
body[data-zg-screen="select"] {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Select: 避免父層 touch-action none 造成 LIFF WebView 無法滑動 */
body[data-zg-screen="select"] #zelo-liff-game,
body[data-zg-screen="select"] .zg-clean-root {
  overflow: hidden !important;
  touch-action: pan-y !important;
}

/* Select: 內容區滑動，保留 flex 排版 */
body[data-zg-screen="select"] .zg-select-screen .zg-main,
body[data-zg-screen="select"] #screen-select .zg-main,
body[data-zg-screen="select"] #screen-select .zg-select-main {
  position: relative !important;

  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;

  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 150px) !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* Launch countdown: 非 battle 頁不顯示，避免殘留擋畫面 */
body:not([data-zg-screen="battle"]) .zg-launch-countdown-overlay {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Launch countdown: 提高層級，確保蓋過 toast / theme */
.zg-launch-countdown-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999999 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  pointer-events: auto !important;

  background:
    radial-gradient(circle at 50% 50%, rgba(255, 224, 95, 0.18), transparent 32%),
    rgba(0, 0, 0, 0.34) !important;

  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.zg-launch-countdown-text {
  font-size: clamp(92px, 28vw, 188px) !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  letter-spacing: -0.08em !important;

  color: #ffffff !important;

  text-shadow:
    0 0 14px rgba(255, 224, 95, 0.95),
    0 0 34px rgba(255, 45, 84, 0.75),
    0 18px 38px rgba(0, 0, 0, 0.55) !important;

  transform: scale(0.78) !important;
  opacity: 0 !important;
}

.zg-launch-countdown-overlay.is-pop .zg-launch-countdown-text {
  animation: zgCountdownPop 0.68s cubic-bezier(.16, 1.18, .32, 1) both !important;
}

.zg-launch-countdown-overlay.is-go .zg-launch-countdown-text {
  color: #ffe05f !important;

  text-shadow:
    0 0 18px rgba(255, 224, 95, 1),
    0 0 44px rgba(6, 199, 85, 0.95),
    0 0 74px rgba(87, 242, 255, 0.75),
    0 18px 38px rgba(0, 0, 0, 0.55) !important;
}

.zg-launch-countdown-overlay.is-done {
  opacity: 0 !important;
  transition: opacity 0.28s ease !important;
}

/* Battle launch button locked / ready visual */
#screen-battle .zg-charge-btn:disabled,
#screen-battle .zg-charge-btn.is-disabled,
#screen-battle .zg-charge-btn[data-launch-ready="false"] {
  opacity: 0.52 !important;
  filter: grayscale(0.35) brightness(0.85) !important;
  cursor: not-allowed !important;
}

#screen-battle .zg-charge-btn.is-ready,
#screen-battle .zg-charge-btn[data-launch-ready="true"] {
  opacity: 1 !important;
  filter: brightness(1.08) saturate(1.2) !important;

  box-shadow:
    0 0 18px rgba(255, 230, 120, 0.48),
    0 10px 20px rgba(255, 150, 30, 0.22),
    inset 0 2px 0 rgba(255, 255, 255, 0.6) !important;
}

/*
 * =========================================================
 * RESULT TOP ENERGY VISUAL PATCH
 * Version: 202607171402-result-top-energy-hud
 * - result top glowing slow spin
 * - neon green transparent HUD stats
 * =========================================================
 */

/* 結果頁上方陀螺舞台：建立能量光場 */
#screen-result .zg-result-top-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

/* 外層金綠能量環 */
#screen-result .zg-result-top-stage::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 112% !important;
  height: 112% !important;

  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;

  background:
    conic-gradient(
      from 0deg,
      rgba(255, 240, 145, 0.08),
      rgba(255, 215, 80, 0.62),
      rgba(6, 255, 142, 0.42),
      rgba(87, 242, 255, 0.32),
      rgba(255, 215, 80, 0.7),
      rgba(255, 240, 145, 0.08)
    ) !important;

  filter:
    blur(1px)
    drop-shadow(0 0 10px rgba(255, 224, 95, 0.78))
    drop-shadow(0 0 24px rgba(6, 255, 142, 0.42)) !important;

  opacity: 0.86 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  animation:
    zgResultEnergyRingSpin 9s linear infinite,
    zgResultEnergyPulse 2.8s ease-in-out infinite !important;
}

/* 內層擴散光暈 */
#screen-result .zg-result-top-stage::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 138% !important;
  height: 138% !important;

  transform: translate(-50%, -50%) !important;
  border-radius: 999px !important;

  background:
    radial-gradient(
      circle,
      rgba(255, 236, 128, 0.44) 0%,
      rgba(6, 255, 142, 0.2) 28%,
      rgba(87, 242, 255, 0.1) 46%,
      transparent 68%
    ) !important;

  filter: blur(10px) !important;
  opacity: 0.82 !important;
  z-index: -1 !important;
  pointer-events: none !important;

  animation: zgResultAuraBreath 3.4s ease-in-out infinite !important;
}

/* 結果頁陀螺本體：慢速旋轉 + 能量陰影 */
#screen-result #zg-result-top-image,
#screen-result .zg-result-top-image {
  position: relative !important;
  z-index: 2 !important;

  transform-origin: 50% 50% !important;

  filter:
    drop-shadow(0 0 10px rgba(255, 241, 150, 0.96))
    drop-shadow(0 0 26px rgba(255, 210, 60, 0.72))
    drop-shadow(0 0 42px rgba(6, 255, 142, 0.35))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.52)) !important;

  animation:
    zgResultTopSlowSpin 18s linear infinite,
    zgResultTopGlowBreath 2.9s ease-in-out infinite !important;

  will-change: transform, filter !important;
}

/* 勝利時更亮一點 */
#screen-result[data-result="win"] #zg-result-top-image,
#screen-result[data-result="win"] .zg-result-top-image {
  filter:
    drop-shadow(0 0 14px rgba(255, 244, 170, 1))
    drop-shadow(0 0 34px rgba(255, 214, 60, 0.92))
    drop-shadow(0 0 58px rgba(6, 255, 142, 0.48))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.52)) !important;
}

/* 失敗時保留能量感，但稍微冷一點 */
#screen-result[data-result="lose"] #zg-result-top-image,
#screen-result[data-result="lose"] .zg-result-top-image {
  filter:
    drop-shadow(0 0 10px rgba(255, 241, 150, 0.82))
    drop-shadow(0 0 24px rgba(255, 210, 60, 0.58))
    drop-shadow(0 0 38px rgba(87, 242, 255, 0.32))
    drop-shadow(0 18px 34px rgba(0, 0, 0, 0.52)) !important;
}

/* 上方左右數值區維持位置，但強化 HUD 感 */
#screen-result .zg-result-side-stats {
  position: relative !important;
  z-index: 5 !important;
}

/* 四個數值卡：透明螢光綠科技 HUD */
#screen-result .zg-result-stat-card {
  position: relative !important;
  overflow: hidden !important;

  background:
    linear-gradient(
      135deg,
      rgba(4, 255, 155, 0.22) 0%,
      rgba(5, 199, 85, 0.13) 42%,
      rgba(87, 242, 255, 0.1) 100%
    ) !important;

  border: 1px solid rgba(93, 255, 188, 0.72) !important;
  border-radius: 12px !important;

  box-shadow:
    0 0 0 1px rgba(6, 255, 142, 0.12),
    0 0 14px rgba(6, 255, 142, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 18px rgba(6, 255, 142, 0.12) !important;

  backdrop-filter: blur(9px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(9px) saturate(1.25) !important;
}

/* HUD 掃描線 */
#screen-result .zg-result-stat-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 48%,
      transparent 100%
    ) !important;

  transform: translateX(-120%) skewX(-18deg) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;

  animation: zgResultHudScan 3.6s ease-in-out infinite !important;
}

/* HUD 細網格 */
#screen-result .zg-result-stat-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background-image:
    linear-gradient(rgba(111, 255, 199, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 255, 199, 0.09) 1px, transparent 1px) !important;
  background-size: 8px 8px !important;

  opacity: 0.22 !important;
  pointer-events: none !important;
}

/* 數值卡標籤：科技小字 */
#screen-result .zg-result-stat-card span {
  position: relative !important;
  z-index: 2 !important;

  color: rgba(194, 255, 230, 0.86) !important;

  font-family:
    "DIN Alternate",
    "Rajdhani",
    "Orbitron",
    "Noto Sans TC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  text-shadow:
    0 0 6px rgba(6, 255, 142, 0.72),
    0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

/* 數值本體：明亮 HUD 數字 */
#screen-result .zg-result-stat-card strong {
  position: relative !important;
  z-index: 2 !important;

  color: #eafff6 !important;

  font-family:
    "DIN Condensed",
    "DIN Alternate",
    "Rajdhani",
    "Orbitron",
    "Noto Sans TC",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-size: 19px !important;
  font-weight: 1000 !important;
  letter-spacing: -0.035em !important;

  text-shadow:
    0 0 8px rgba(6, 255, 142, 0.95),
    0 0 18px rgba(87, 242, 255, 0.48),
    0 2px 4px rgba(0, 0, 0, 0.58) !important;
}

/* 能量為 0 時，不要整個死黑，改成警示科技紅 */
#screen-result .zg-result-stat-card:has(strong[id*="hp"]) strong {
  color: #f4fff9 !important;
}

/* 左右卡片錯位時也保持發光 */
#screen-result .zg-result-side-stats-left .zg-result-stat-card,
#screen-result .zg-result-side-stats-right .zg-result-stat-card {
  transform: translateZ(0) !important;
}

/*
 * Animations
 */
@keyframes zgResultTopSlowSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes zgResultTopGlowBreath {
  0%,
  100% {
    filter:
      drop-shadow(0 0 10px rgba(255, 241, 150, 0.86))
      drop-shadow(0 0 26px rgba(255, 210, 60, 0.62))
      drop-shadow(0 0 42px rgba(6, 255, 142, 0.28))
      drop-shadow(0 18px 34px rgba(0, 0, 0, 0.52));
  }

  50% {
    filter:
      drop-shadow(0 0 16px rgba(255, 248, 190, 1))
      drop-shadow(0 0 38px rgba(255, 224, 95, 0.88))
      drop-shadow(0 0 62px rgba(6, 255, 142, 0.52))
      drop-shadow(0 18px 34px rgba(0, 0, 0, 0.52));
  }
}

@keyframes zgResultEnergyRingSpin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }

  100% {
    transform: translate(-50%, -50%) rotate(-360deg) scale(1);
  }
}

@keyframes zgResultEnergyPulse {
  0%,
  100% {
    opacity: 0.66;
  }

  50% {
    opacity: 1;
  }
}

@keyframes zgResultAuraBreath {
  0%,
  100% {
    opacity: 0.56;
    transform: translate(-50%, -50%) scale(0.92);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes zgResultHudScan {
  0% {
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
  }

  18% {
    opacity: 0.55;
  }

  42% {
    transform: translateX(130%) skewX(-18deg);
    opacity: 0;
  }

  100% {
    transform: translateX(130%) skewX(-18deg);
    opacity: 0;
  }
}

/* 小螢幕微調，避免數字太擠 */
@media (max-width: 390px) {
  #screen-result .zg-result-stat-card strong {
    font-size: 17px !important;
  }

  #screen-result .zg-result-stat-card span {
    font-size: 8px !important;
  }
}

/*
 * =========================================================
 * SELECT PAGE SCREEN SCROLL FIX
 * Version: 202607171912-select-screen-scroll
 * - screen-select scrolls instead of .zg-main
 * - fix SECRET TOPS cannot scroll into view
 * =========================================================
 */

body[data-zg-screen="select"] {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* 避免 LIFF / iOS 父層 touch-action:none 鎖住滑動 */
body[data-zg-screen="select"] #zelo-liff-game,
body[data-zg-screen="select"] .zg-clean-root {
  overflow: hidden !important;
  touch-action: pan-y !important;
}

/* 改成 select screen 自己滑 */
body[data-zg-screen="select"] #screen-select,
body[data-zg-screen="select"] .zg-select-screen {
  position: fixed !important;
  inset: 0 auto auto 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;

  width: var(--zg-app-width, 100vw) !important;
  min-width: var(--zg-app-width, 100vw) !important;
  max-width: var(--zg-app-width, 100vw) !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: var(--zg-app-height, 100vh) !important;
  max-height: var(--zg-app-height, 100vh) !important;

  display: block !important;

  overflow-y: scroll !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;

  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 190px) !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* main 只作為內容容器，不再自己 scroll */
body[data-zg-screen="select"] #screen-select .zg-main,
body[data-zg-screen="select"] .zg-select-screen .zg-main {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: auto !important;
  max-height: none !important;

  flex: none !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;

  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: auto !important;
  touch-action: pan-y !important;

  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 190px) !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
  z-index: 5 !important;
}

/* 背景層不能吃滑動事件 */
body[data-zg-screen="select"] .zg-select-bg,
body[data-zg-screen="select"] .zg-select-orb,
body[data-zg-screen="select"] .zg-select-grid,
body[data-zg-screen="select"] .zg-select-stars {
  pointer-events: none !important;
}

/* SECRET TOPS 區域要完整進入 scroll flow */
body[data-zg-screen="select"] .zg-secret-tops-preview {
  display: block !important;
  position: relative !important;

  width: calc(100% - 24px) !important;
  max-width: 520px !important;

  margin: 28px auto 0 !important;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px) !important;

  box-sizing: border-box !important;
  z-index: 8 !important;
  pointer-events: auto !important;
}

/* 底部按鈕固定 */
body[data-zg-screen="select"] #screen-select .zg-bottom,
body[data-zg-screen="select"] .zg-select-screen .zg-bottom,
body[data-zg-screen="select"] .zg-select-fixed-bottom {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;

  width: auto !important;
  max-width: none !important;

  z-index: 90 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* 發射按鈕本體 */
body[data-zg-screen="select"] .zg-select-battle-btn,
body[data-zg-screen="select"] [data-zg-action="battle"] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  z-index: 91 !important;
}

.zg-secret-tops-preview {
  width: calc(100% - 24px);
  max-width: 520px;
  margin: 28px auto 0;
  padding: 18px 14px 120px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(20, 34, 44, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 18px 42px rgba(0, 0, 0, 0.35);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.zg-secret-tops-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.65;
  pointer-events: none;
}

.zg-secret-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.zg-secret-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 999px;
  color: #10131d;
  background: linear-gradient(180deg, #fff9c9, #ffd95c);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.18em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 18px rgba(255, 214, 82, 0.22);
}

.zg-secret-title {
  margin: 10px 0 0;
  color: #ffffff;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.zg-secret-note {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.zg-secret-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.zg-secret-top-card {
  position: relative;
  min-height: 120px;
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 26px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(circle at 24% 50%, rgba(255, 255, 255, 0.28), transparent 26%),
    linear-gradient(120deg, rgba(112, 75, 232, 0.88), rgba(22, 76, 128, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.zg-secret-top-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(255, 255, 255, 0.12),
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent,
      rgba(255, 255, 255, 0.12)
    );
  opacity: 0.45;
  pointer-events: none;
}

.zg-secret-top-card::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.zg-secret-top-fire {
  border-color: rgba(255, 98, 88, 0.65);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 235, 165, 0.35), transparent 28%),
    linear-gradient(120deg, rgba(153, 52, 30, 0.92), rgba(112, 23, 45, 0.9), rgba(28, 61, 91, 0.88));
}

.zg-secret-top-ice {
  border-color: rgba(90, 216, 255, 0.56);
  background:
    radial-gradient(circle at 18% 50%, rgba(202, 247, 255, 0.34), transparent 28%),
    linear-gradient(120deg, rgba(28, 137, 165, 0.92), rgba(14, 45, 82, 0.9), rgba(32, 93, 150, 0.88));
}

.zg-secret-top-thunder {
  border-color: rgba(180, 82, 255, 0.62);
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 240, 160, 0.28), transparent 28%),
    linear-gradient(120deg, rgba(87, 38, 147, 0.92), rgba(57, 23, 112, 0.9), rgba(28, 61, 91, 0.88));
}

.zg-secret-top-media {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zg-secret-top-orb {
  width: 88px;
  height: 88px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.06), transparent 20%),
    radial-gradient(circle at 50% 50%, #050505 0%, #000000 64%, rgba(255, 255, 255, 0.16) 65%, rgba(255, 255, 255, 0.02) 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.42),
    inset 0 0 0 10px rgba(0, 0, 0, 0.24);
}

.zg-secret-question {
  color: rgba(255, 255, 255, 0.24);
  font-size: 40px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 0.16);
}

.zg-secret-lock-badge {
  position: absolute;
  top: 4px;
  right: -4px;
  z-index: 4;
  padding: 5px 13px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.28);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.14em;
  backdrop-filter: blur(6px);
}

.zg-secret-top-info {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.zg-secret-top-name {
  color: #ffffff;
  font-size: 25px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.55);
}

.zg-secret-top-type {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 850;
}

.zg-secret-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.zg-secret-stat {
  min-width: 0;
  min-height: 46px;
  padding: 7px 4px 6px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: center;
}

.zg-secret-stat span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
}

.zg-secret-stat strong {
  display: block;
  margin-top: 4px;
  color: #fff34d;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
}

/*
 * 小螢幕微調。
 */
@media (max-width: 420px) {
  .zg-secret-tops-preview {
    width: calc(100% - 18px);
    padding: 16px 10px 120px;
    border-radius: 24px;
  }

  .zg-secret-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .zg-secret-note {
    margin: 0;
    white-space: normal;
  }

  .zg-secret-top-card {
    grid-template-columns: 96px 1fr;
    min-height: 112px;
    gap: 8px;
    padding: 12px 10px;
    border-radius: 22px;
  }

  .zg-secret-top-media {
    width: 92px;
    height: 86px;
  }

  .zg-secret-top-orb {
    width: 76px;
    height: 76px;
  }

  .zg-secret-question {
    font-size: 34px;
  }

  .zg-secret-top-name {
    font-size: 22px;
  }

  .zg-secret-top-type {
    font-size: 13px;
  }

  .zg-secret-stat-grid {
    gap: 5px;
    margin-top: 10px;
  }

  .zg-secret-stat {
    min-height: 40px;
    border-radius: 11px;
    padding: 6px 2px 5px;
  }

  .zg-secret-stat span {
    font-size: 10px;
  }

  .zg-secret-stat strong {
    font-size: 16px;
  }

  .zg-secret-lock-badge {
    right: -8px;
    font-size: 10px;
    padding: 4px 10px 3px;
  }
}

/*
 * ---------------------------------------------------------
 * Secret Tops - Match Selected Top Card Style
 * ---------------------------------------------------------
 */

/*
 * 外層區塊保留，但不要讓裡面卡片變成置中海報。
 */
.zg-secret-tops-preview {
  width: calc(100% - 24px) !important;
  max-width: 520px !important;
  margin: 28px auto 0 !important;
  padding: 24px 12px 150px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(118, 118, 136, 0.42), rgba(22, 42, 50, 0.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 20px 46px rgba(0, 0, 0, 0.32) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

.zg-secret-tops-preview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) !important;
  background-size: 34px 34px !important;
  opacity: 0.68 !important;
  pointer-events: none !important;
}

/*
 * 標題區置中即可。
 */
.zg-secret-head {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 0 22px !important;
  text-align: center !important;
}

.zg-secret-kicker {
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
}

.zg-secret-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 32px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.05em !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

.zg-secret-note {
  margin: 18px 0 0 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/*
 * 列表：每張是跟上方已選陀螺一樣的橫向卡。
 */
.zg-secret-list {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
}

/*
 * 關鍵：卡片本體模仿上方星環平衡型。
 * 左圖、右文字與能力值。
 */
.zg-secret-top-card {
  width: 100% !important;
  min-height: 126px !important;
  height: 126px !important;

  display: grid !important;
  grid-template-columns: 122px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-content: initial !important;
  column-gap: 12px !important;

  padding: 12px 14px !important;
  border-radius: 25px !important;
  border-width: 2px !important;
  border-style: solid !important;

  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  text-align: left !important;
  transform: none !important;
}

/*
 * 模仿上方卡片的放射線光暈。
 */
.zg-secret-top-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 17% 50%, rgba(255, 255, 255, 0.28), transparent 24%),
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(255, 255, 255, 0.09),
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent,
      rgba(255, 255, 255, 0.09)
    ) !important;
  opacity: 0.65 !important;
  pointer-events: none !important;
}

.zg-secret-top-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  pointer-events: none !important;
}

/*
 * 三種模板色。
 * 這裡是整張卡的背景色，不是舊版中央大橢圓。
 */
.zg-secret-top-card.zg-secret-top-fire {
  border-color: rgba(255, 95, 88, 0.72) !important;
  background:
    radial-gradient(circle at 14% 52%, rgba(255, 220, 150, 0.42), transparent 24%),
    linear-gradient(105deg, rgba(142, 45, 32, 0.96), rgba(88, 31, 56, 0.94), rgba(24, 69, 105, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(255, 52, 46, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

.zg-secret-top-card.zg-secret-top-ice {
  border-color: rgba(86, 215, 255, 0.72) !important;
  background:
    radial-gradient(circle at 14% 52%, rgba(210, 250, 255, 0.4), transparent 24%),
    linear-gradient(105deg, rgba(30, 142, 166, 0.96), rgba(15, 53, 92, 0.94), rgba(32, 93, 150, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(74, 217, 255, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

.zg-secret-top-card.zg-secret-top-thunder {
  border-color: rgba(183, 84, 255, 0.72) !important;
  background:
    radial-gradient(circle at 14% 52%, rgba(255, 235, 150, 0.34), transparent 24%),
    linear-gradient(105deg, rgba(94, 42, 154, 0.96), rgba(56, 27, 114, 0.94), rgba(24, 69, 105, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(176, 65, 255, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

/*
 * 左側圖像區：固定在左邊。
 */
.zg-secret-top-media {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: relative !important;
  z-index: 4 !important;

  width: 108px !important;
  height: 108px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  align-self: center !important;
  justify-self: center !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/*
 * 問號圓圖：像上方陀螺圖的位置。
 */
.zg-secret-top-orb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background:
    radial-gradient(circle at 42% 35%, rgba(255, 255, 255, 0.08), transparent 22%),
    radial-gradient(circle at 50% 50%, #050505 0%, #000000 60%, rgba(255, 255, 255, 0.12) 61%, rgba(255, 255, 255, 0.03) 100%) !important;

  box-shadow:
    inset 0 0 0 10px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.42) !important;

  margin: 0 !important;
  transform: none !important;
}

.zg-secret-question {
  display: block !important;
  color: rgba(255, 255, 255, 0.34) !important;
  font-size: 39px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/*
 * 只保留一個 LOCKED。
 * 這個放在左側圖像右上角。
 */
.zg-secret-lock-badge {
  position: absolute !important;
  top: 2px !important;
  right: -4px !important;
  z-index: 6 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 74px !important;
  height: 24px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(0, 0, 0, 0.32) !important;
  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;

  backdrop-filter: blur(6px) !important;
}

/*
 * 如果舊版額外 LOCKED 還存在，隱藏掉。
 * 你截圖左上角那個 LOCKED 通常就是舊元素。
 */
.zg-secret-top-card > .zg-secret-locked,
.zg-secret-top-card > .zg-secret-lock,
.zg-secret-top-card > .zg-secret-card-lock,
.zg-secret-top-card > .zg-secret-old-lock,
.zg-secret-top-card > .zg-lock-label,
.zg-secret-top-card > .zg-locked-label {
  display: none !important;
}

/*
 * 右側資訊區：像星環平衡型一樣靠左。
 */
.zg-secret-top-info {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: relative !important;
  z-index: 4 !important;

  min-width: 0 !important;
  width: 100% !important;
  height: auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;

  align-self: center !important;
  justify-self: stretch !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
  transform: none !important;
}

/*
 * 名稱與類型：跟上面一樣在右上。
 */
.zg-secret-top-name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;

  text-align: left !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.zg-secret-top-type {
  display: block !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;

  text-align: left !important;
}

/*
 * 能力值：跟上方星環平衡型一樣橫向四格。
 */
.zg-secret-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  grid-auto-flow: column !important;

  gap: 8px !important;
  width: 100% !important;

  margin: 13px 0 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}

.zg-secret-stat {
  min-width: 0 !important;
  min-height: 48px !important;
  height: 48px !important;

  padding: 6px 3px 5px !important;
  border-radius: 14px !important;

  background: rgba(0, 0, 0, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  box-sizing: border-box !important;
}

.zg-secret-stat span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  text-align: center !important;
}

.zg-secret-stat strong {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;

  color: #fff34d !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;

  text-align: center !important;
}

/*
 * 小螢幕版：仍然保持跟上方卡一樣的橫向。
 */
@media (max-width: 420px) {
  .zg-secret-tops-preview {
    width: calc(100% - 18px) !important;
    padding: 22px 10px 150px !important;
    border-radius: 24px !important;
  }

  .zg-secret-title {
    font-size: 31px !important;
  }

  .zg-secret-note {
    font-size: 18px !important;
  }

  .zg-secret-top-card {
    height: 122px !important;
    min-height: 122px !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 10px 10px !important;
    border-radius: 22px !important;
  }

  .zg-secret-top-media {
    width: 96px !important;
    height: 96px !important;
  }

  .zg-secret-top-orb {
    width: 78px !important;
    height: 78px !important;
  }

  .zg-secret-question {
    font-size: 34px !important;
  }

  .zg-secret-lock-badge {
    top: 2px !important;
    right: -6px !important;
    min-width: 66px !important;
    height: 22px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  .zg-secret-top-name {
    font-size: 21px !important;
  }

  .zg-secret-top-type {
    font-size: 12px !important;
  }

  .zg-secret-stat-grid {
    gap: 5px !important;
    margin-top: 10px !important;
  }

  .zg-secret-stat {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 5px 2px !important;
  }

  .zg-secret-stat span {
    font-size: 10px !important;
  }

  .zg-secret-stat strong {
    font-size: 16px !important;
  }
}

/*
 * ---------------------------------------------------------
 * Secret Tops Row Card - Match Selected Top Card
 * 新 class，避免舊 .zg-secret-top-card 樣式污染
 * ---------------------------------------------------------
 */

.zg-secret-row-list {
  position: relative !important;
  z-index: 5 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-sizing: border-box !important;
}

.zg-secret-row-card {
  width: 100% !important;
  height: 126px !important;
  min-height: 126px !important;
  max-height: 126px !important;

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  display: grid !important;
  grid-template-columns: 122px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  column-gap: 12px !important;

  padding: 12px 14px !important;
  box-sizing: border-box !important;

  border-radius: 26px !important;
  border-width: 2px !important;
  border-style: solid !important;

  text-align: left !important;
  transform: none !important;
}

.zg-secret-row-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.24), transparent 24%),
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(255, 255, 255, 0.08),
      transparent,
      rgba(255, 255, 255, 0.07),
      transparent,
      rgba(255, 255, 255, 0.08)
    ) !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
}

.zg-secret-row-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 6px !important;
  z-index: -1 !important;
  border-radius: 21px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  pointer-events: none !important;
}

/*
 * 火焰、冰霜、雷電模板色
 */
.zg-secret-row-card.zg-secret-row-fire {
  border-color: rgba(255, 96, 88, 0.74) !important;
  background:
    radial-gradient(circle at 13% 52%, rgba(255, 225, 150, 0.38), transparent 24%),
    linear-gradient(105deg, rgba(145, 45, 32, 0.96), rgba(89, 29, 55, 0.94), rgba(24, 70, 105, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(255, 52, 46, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

.zg-secret-row-card.zg-secret-row-ice {
  border-color: rgba(86, 216, 255, 0.74) !important;
  background:
    radial-gradient(circle at 13% 52%, rgba(215, 250, 255, 0.4), transparent 24%),
    linear-gradient(105deg, rgba(30, 142, 168, 0.96), rgba(15, 53, 92, 0.94), rgba(32, 93, 150, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(74, 217, 255, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

.zg-secret-row-card.zg-secret-row-thunder {
  border-color: rgba(183, 84, 255, 0.74) !important;
  background:
    radial-gradient(circle at 13% 52%, rgba(255, 236, 150, 0.34), transparent 24%),
    linear-gradient(105deg, rgba(94, 42, 154, 0.96), rgba(56, 27, 114, 0.94), rgba(24, 70, 105, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(176, 65, 255, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

/*
 * 左側問號圖，固定在左邊，不能置中到整張卡。
 */
.zg-secret-row-media {
  grid-column: 1 !important;
  grid-row: 1 !important;

  position: relative !important;
  z-index: 3 !important;

  width: 108px !important;
  height: 108px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  align-self: center !important;
  justify-self: center !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.zg-secret-row-orb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 999px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    radial-gradient(circle at 42% 35%, rgba(255, 255, 255, 0.08), transparent 22%),
    radial-gradient(circle at 50% 50%, #050505 0%, #000000 60%, rgba(255, 255, 255, 0.12) 61%, rgba(255, 255, 255, 0.03) 100%) !important;

  box-shadow:
    inset 0 0 0 10px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.42) !important;
}

.zg-secret-row-question {
  display: block !important;
  color: rgba(255, 255, 255, 0.36) !important;
  font-size: 39px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
}

/*
 * LOCKED 貼在左側圖像右上角。
 */
.zg-secret-row-lock {
  position: absolute !important;
  top: 2px !important;
  right: -4px !important;
  z-index: 4 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 74px !important;
  height: 24px !important;
  padding: 0 12px !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: rgba(0, 0, 0, 0.32) !important;
  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;

  backdrop-filter: blur(6px) !important;
}

/*
 * 右側資訊區。
 */
.zg-secret-row-info {
  grid-column: 2 !important;
  grid-row: 1 !important;

  position: relative !important;
  z-index: 3 !important;

  min-width: 0 !important;
  width: 100% !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;

  text-align: left !important;

  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.zg-secret-row-name {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;

  text-align: left !important;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
}

.zg-secret-row-type {
  display: block !important;
  margin: 3px 0 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;

  text-align: left !important;
}

/*
 * 能力值橫向四格，模仿上面已選陀螺。
 */
.zg-secret-row-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-template-rows: 1fr !important;
  gap: 8px !important;

  width: 100% !important;
  margin: 13px 0 0 !important;
  padding: 0 !important;
}

.zg-secret-row-stat {
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;

  padding: 6px 3px 5px !important;
  border-radius: 14px !important;

  background: rgba(0, 0, 0, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  box-sizing: border-box !important;
}

.zg-secret-row-stat span {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  text-align: center !important;
}

.zg-secret-row-stat strong {
  display: block !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;

  color: #fff34d !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;

  text-align: center !important;
}

/*
 * 手機寬度調整。
 */
@media (max-width: 420px) {
  .zg-secret-row-card {
    height: 122px !important;
    min-height: 122px !important;
    max-height: 122px !important;

    grid-template-columns: 104px minmax(0, 1fr) !important;
    column-gap: 9px !important;
    padding: 10px 10px !important;
    border-radius: 22px !important;
  }

  .zg-secret-row-media {
    width: 96px !important;
    height: 96px !important;
  }

  .zg-secret-row-orb {
    width: 78px !important;
    height: 78px !important;
  }

  .zg-secret-row-question {
    font-size: 34px !important;
  }

  .zg-secret-row-lock {
    top: 2px !important;
    right: -6px !important;
    min-width: 66px !important;
    height: 22px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  .zg-secret-row-name {
    font-size: 21px !important;
  }

  .zg-secret-row-type {
    font-size: 12px !important;
  }

  .zg-secret-row-stats {
    gap: 5px !important;
    margin-top: 10px !important;
  }

  .zg-secret-row-stat {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 11px !important;
    padding: 5px 2px !important;
  }

  .zg-secret-row-stat span {
    font-size: 10px !important;
  }

  .zg-secret-row-stat strong {
    font-size: 16px !important;
  }
}

/*
 * 隱藏陀螺圖片樣式
 */
.zg-secret-row-img {
  display: block !important;
  width: 108px !important;
  height: 108px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  filter:
    drop-shadow(0 8px 12px rgba(0, 0, 0, 0.38))
    saturate(1.05) !important;
  transform: none !important;
  pointer-events: none !important;
}
/*
 * 闇影系隱藏陀螺模板色
 */
.zg-secret-row-card.zg-secret-row-shadow {
  border-color: rgba(120, 92, 255, 0.76) !important;
  background:
    radial-gradient(circle at 13% 52%, rgba(190, 170, 255, 0.28), transparent 24%),
    linear-gradient(105deg, rgba(40, 34, 84, 0.96), rgba(30, 24, 58, 0.94), rgba(12, 44, 78, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 10px 26px rgba(120, 92, 255, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}

/*
 * 光耀系隱藏陀螺模板色
 */
.zg-secret-row-card.zg-secret-row-light {
  border-color: rgba(255, 225, 98, 0.78) !important;
  background:
    radial-gradient(circle at 13% 52%, rgba(255, 248, 190, 0.38), transparent 24%),
    linear-gradient(105deg, rgba(158, 114, 32, 0.96), rgba(78, 58, 92, 0.94), rgba(24, 70, 105, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 10px 26px rgba(255, 225, 98, 0.14),
    0 14px 32px rgba(0, 0, 0, 0.3) !important;
}


/*
/*
 * =========================================================
 * SELECT SECRET BOTTOM SPACE HARD FIX
 * Version: 202607201958-select-secret-bottom-hard-fix
 *
 * 修正：
 * - 第 5 顆光耀系下方空白過高
 * - 移除 screen / main / secret 區塊多重 padding-bottom
 * - 保留固定發射按鈕
 * =========================================================
 */

/*
 * 1. 選擇頁本體不要產生額外 scroll 空白
 */
body[data-zg-screen="select"] #screen-select,
body[data-zg-screen="select"] .zg-select-screen,
#screen-select.zg-screen,
#screen-select.zg-select-screen {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;

  height: var(--zg-app-height, 100vh) !important;
  min-height: 0 !important;
  max-height: var(--zg-app-height, 100vh) !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

/*
 * 2. 內容主區只保留按鈕高度，不要再用 150 / 190px
 */
body[data-zg-screen="select"] #screen-select .zg-main,
body[data-zg-screen="select"] #screen-select .zg-select-main,
body[data-zg-screen="select"] .zg-select-screen .zg-main,
body[data-zg-screen="select"] .zg-select-screen .zg-select-main,
#screen-select .zg-main,
#screen-select .zg-select-main {
  padding-top: max(28px, calc(env(safe-area-inset-top, 0px) + 22px)) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;

  /*
   * 這裡是關鍵。
   * 如果還覺得太高，改成 46px。
   */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 58px) !important;

  margin-bottom: 0 !important;

  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;

  overflow: visible !important;
}

/*
 * 3. 隱藏陀螺外框不要再有 120 / 150px 底部 padding
 */
body[data-zg-screen="select"] .zg-secret-tops-preview,
body[data-zg-screen="select"] #screen-select .zg-secret-tops-preview,
#screen-select .zg-secret-tops-preview,
.zg-secret-tops-preview {
  padding-top: 22px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-bottom: 14px !important;

  margin-top: 28px !important;
  margin-bottom: 0 !important;
}

/*
 * 4. 隱藏陀螺列表不要額外留底
 */
body[data-zg-screen="select"] .zg-secret-row-list,
body[data-zg-screen="select"] #screen-select .zg-secret-row-list,
#screen-select .zg-secret-row-list,
.zg-secret-row-list {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/*
 * 5. 最後一張光耀系卡片底下不要留 margin
 */
body[data-zg-screen="select"] .zg-secret-row-card:last-child,
body[data-zg-screen="select"] #screen-select .zg-secret-row-card:last-child,
#screen-select .zg-secret-row-card:last-child,
.zg-secret-row-card:last-child {
  margin-bottom: 0 !important;
}

/*
 * 6. 發射按鈕固定在底部，但不撐高頁面
 */
body[data-zg-screen="select"] #screen-select .zg-bottom,
body[data-zg-screen="select"] .zg-select-screen .zg-bottom,
body[data-zg-screen="select"] .zg-select-fixed-bottom,
#screen-select .zg-bottom {
  position: fixed !important;

  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;

  width: auto !important;
  max-width: none !important;

  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  z-index: 999 !important;
  pointer-events: auto !important;
}

/*
 * 7. 發射按鈕固定高度
 */
body[data-zg-screen="select"] #screen-select .zg-bottom .zg-btn,
body[data-zg-screen="select"] .zg-select-screen .zg-bottom .zg-btn,
body[data-zg-screen="select"] .zg-select-battle-btn,
body[data-zg-screen="select"] .zg-bottom .zg-btn[data-zg-action="battle"],
body[data-zg-screen="select"] [data-zg-action="battle"],
#screen-select .zg-bottom .zg-btn {
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 18px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 18px !important;
  box-sizing: border-box !important;
}

/*
 * 8. 防止舊版 .zg-select-content / panel 類別撐底
 */
body[data-zg-screen="select"] .zg-select-content,
body[data-zg-screen="select"] .zg-select-body,
body[data-zg-screen="select"] .zg-select-scroll,
body[data-zg-screen="select"] .zg-select-wrap,
body[data-zg-screen="select"] .zg-select-panel {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/*
 * =========================================================
 * SELECT SCROLL CLAMP CSS SUPPORT
 * Version: 202607202005-select-scroll-clamp-support
 * =========================================================
 */

body[data-zg-screen="select"] #screen-select,
body[data-zg-screen="select"] .zg-select-screen {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body[data-zg-screen="select"] #screen-select .zg-main,
body[data-zg-screen="select"] #screen-select .zg-select-main,
body[data-zg-screen="select"] .zg-select-screen .zg-main,
body[data-zg-screen="select"] .zg-select-screen .zg-select-main {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body[data-zg-screen="select"] .zg-secret-tops-preview,
#screen-select .zg-secret-tops-preview,
.zg-secret-tops-preview {
  padding-bottom: 14px !important;
  margin-bottom: 72px !important;
}

body[data-zg-screen="select"] .zg-secret-row-list,
#screen-select .zg-secret-row-list,
.zg-secret-row-list {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body[data-zg-screen="select"] .zg-secret-row-card:last-child,
#screen-select .zg-secret-row-card:last-child,
.zg-secret-row-card:last-child {
  margin-bottom: 0 !important;
}

/*
 * =========================================================
 * CHARGE BAR LOW LATENCY RENDER
 * Version: 202607202012-charge-bar-latency-fix
 * =========================================================
 */

.zg-energy-shell,
.zg-energy-fill,
.zg-energy-glow,
.zg-energy-cap {
  will-change: transform, left, width, opacity !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.zg-charge-btn {
  touch-action: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

.zg-charge-layer,
.zg-charge-card {
  contain: layout paint style;
}

/*
 * =========================================================
 * RESULT SCORE DISPLAY FIX
 * =========================================================
 */

#zg-result-message,
.zg-result-message {
  white-space: normal !important;
}

.zg-result-score-line {
  display: block !important;
  line-height: 1.45 !important;
}

.zg-result-score-line.is-plus {
  color: #7CFF8A !important;
  font-weight: 900 !important;
}

.zg-result-score-line.is-minus {
  color: #FF5A5A !important;
  font-weight: 900 !important;
}

/*
 * =========================================================
 * RESULT FRIEND RANK FINAL
 * Version: 202607202112-result-friend-rank-final
 *
 * 修正：
 * - 好友排行榜固定卡片樣式
 * - 支援可滑動
 * - 不影響結果頁外層滾動
 * - 避免舊版 .zg-friend-rank-row / .zg-rank-item 污染
 * =========================================================
 */

/*
 * 排行榜外層。
 */
#screen-result #zg-friend-rank,
#screen-result .zg-friend-rank,
#screen-result #zg-leaderboard,
#screen-result .zg-leaderboard {
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/*
 * 排行榜標題。
 */
#screen-result .zg-friend-rank-title {
  display: block !important;

  width: 100% !important;
  margin: 0 0 10px !important;

  color: #ffffff !important;

  text-align: center !important;

  font-size: 24px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.48),
    0 0 14px rgba(87, 242, 255, 0.28) !important;
}

/*
 * 載入中。
 */
#screen-result .zg-rank-loading {
  width: 100% !important;
  min-height: 92px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  color: rgba(255, 255, 255, 0.78) !important;

  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;

  text-align: center !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035)),
    rgba(7, 16, 31, 0.52) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

/*
 * 可滑動容器。
 *
 * 注意：
 * 如果你希望整個結果頁一起滑，這裡 max-height 可以降低。
 * 如果你希望排行榜自己滑，保留 overflow-y:auto。
 */
#screen-result .zg-rank-scroll {
  width: 100% !important;

  max-height: 300px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;

  padding-right: 2px !important;

  box-sizing: border-box !important;
}

/*
 * iOS/Chrome 隱藏 scrollbar。
 */
#screen-result .zg-rank-scroll::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

/*
 * 列表。
 */
#screen-result .zg-rank-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}

/*
 * 單列。
 */
#screen-result .zg-rank-row {
  display: grid !important;
  grid-template-columns: 42px 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;

  width: 100% !important;
  min-height: 72px !important;

  margin: 0 !important;
  padding: 12px 16px !important;

  box-sizing: border-box !important;

  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;

  background:
    linear-gradient(180deg, rgba(93, 108, 145, 0.55), rgba(48, 61, 92, 0.72)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.18) !important;

  color: #ffffff !important;
}

/*
 * 自己那一列。
 */
#screen-result .zg-rank-row.is-me {
  border-color: rgba(255, 230, 80, 0.68) !important;

  background:
    linear-gradient(180deg, rgba(108, 112, 132, 0.76), rgba(48, 58, 86, 0.86)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(255, 230, 80, 0.12),
    0 8px 20px rgba(0, 0, 0, 0.22) !important;
}

/*
 * 名次。
 */
#screen-result .zg-rank-no {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  border-radius: 999px !important;

  background: #ffe45c !important;
  color: #0f172a !important;

  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.46),
    0 4px 10px rgba(0, 0, 0, 0.18) !important;
}

/*
 * 頭像。
 */
#screen-result .zg-rank-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 36px !important;
  height: 36px !important;

  border-radius: 999px !important;
  overflow: hidden !important;

  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;

  box-sizing: border-box !important;
}

#screen-result .zg-rank-avatar-img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  border-radius: 999px !important;
}

#screen-result .zg-rank-avatar-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  color: #ffffff !important;

  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
}

/*
 * 名稱。
 */
#screen-result .zg-rank-name {
  min-width: 0 !important;

  color: #ffffff !important;

  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 1000 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.42) !important;
}

/*
 * 分數。
 */
#screen-result .zg-rank-score {
  color: #ffe45c !important;

  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  text-align: right !important;
  white-space: nowrap !important;

  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.35),
    0 0 12px rgba(255, 230, 80, 0.28) !important;
}

/*
 * 「我」標籤。
 */
#screen-result .zg-rank-me-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-left: 6px !important;
  padding: 2px 7px !important;

  border-radius: 999px !important;

  background: #ffe45c !important;
  color: #0f172a !important;

  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  vertical-align: middle !important;

  box-shadow:
    0 0 10px rgba(255, 230, 80, 0.28) !important;
}

/*
 * 防止舊排行榜 class 混進來影響新版。
 */
#screen-result .zg-rank-item,
#screen-result .zg-friend-rank-row {
  box-sizing: border-box !important;
}

/*
 * 小螢幕微調。
 */
@media (max-width: 390px) {
  #screen-result .zg-rank-row {
    grid-template-columns: 40px 36px minmax(0, 1fr) auto !important;
    column-gap: 8px !important;

    min-height: 68px !important;
    padding: 10px 12px !important;
  }

  #screen-result .zg-rank-no {
    width: 38px !important;
    height: 38px !important;
    font-size: 20px !important;
  }

  #screen-result .zg-rank-avatar {
    width: 34px !important;
    height: 34px !important;
  }

  #screen-result .zg-rank-name {
    font-size: 16px !important;
  }

  #screen-result .zg-rank-score {
    font-size: 20px !important;
  }
}

/*
 * =========================================================
 * FRIEND RANK MY SUMMARY
 * =========================================================
 */

#screen-result .zg-rank-my-summary {
  width: 100% !important;

  margin: 0 0 10px !important;
  padding: 8px 12px !important;

  border-radius: 999px !important;

  color: #0f172a !important;
  background: linear-gradient(180deg, #fff7a8, #ffe45c) !important;

  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 1000 !important;

  text-align: center !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 6px 14px rgba(0, 0, 0, 0.18),
    0 0 14px rgba(255, 230, 80, 0.2) !important;

  box-sizing: border-box !important;
}

/*
 * =========================================================
 * ZELO Result Mobile Layout Fix
 * 修正：
 * 1. 加分 / 總分不要同一行擠在一起
 * 2. 不要壓到票券
 * 3. 票券高度固定並保留間距
 * 4. 排行榜不要被壓扁
 * 5. 手機高度不足時整頁可上下捲動
 * =========================================================
 */

.zg-screen-result,
#zg-screen-result,
.zg-result-screen {
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.zg-result-main {
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 120px !important;
  box-sizing: border-box !important;
}

/*
 * 結果標題區
 */
#zg-result-title,
.zg-result-title {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  line-height: 1.18 !important;
}

/*
 * 分數訊息：
 * 強制每一行分開，不要壓在同一行。
 */
#zg-result-message,
.zg-result-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  width: 100% !important;
  margin: 0 auto 10px auto !important;
  padding: 0 12px !important;

  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#zg-result-message .zg-result-score-line,
.zg-result-message .zg-result-score-line {
  display: block !important;
  width: 100% !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

#zg-result-message .zg-result-score-line:first-child,
.zg-result-message .zg-result-score-line:first-child {
  color: #5cff91 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#zg-result-message .zg-result-score-line:last-child,
.zg-result-message .zg-result-score-line:last-child {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  opacity: 0.95 !important;
}

/*
 * 票券區：
 * 不要被上方文字壓到。
 */
#zg-coupon-card,
.zg-coupon-card {
  position: relative !important;
  z-index: 2 !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  margin: 10px auto 10px auto !important;
  padding: 16px 18px 20px 18px !important;

  min-height: 142px !important;
  height: auto !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#zg-coupon-label,
.zg-coupon-label {
  display: block !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: normal !important;
}

#zg-coupon-code,
.zg-coupon-code {
  display: block !important;
  margin: 0 auto 2px auto !important;
  line-height: 1.05 !important;
  font-size: 38px !important;
  font-weight: 1000 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#zg-coupon-desc,
.zg-coupon-desc {
  display: block !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.2 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: normal !important;
}

.zg-coupon-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 52px !important;
  height: auto !important;

  padding: 10px 12px !important;
  box-sizing: border-box !important;

  line-height: 1.25 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;

  white-space: normal !important;
}

/*
 * 好友排行榜：
 * 不要壓縮到只剩一半。
 */
#zg-friend-rank,
.zg-friend-rank,
#zg-leaderboard,
.zg-leaderboard {
  position: relative !important;
  z-index: 1 !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  margin: 10px auto 16px auto !important;
  padding: 16px 16px 18px 16px !important;

  min-height: 290px !important;
  max-height: none !important;
  height: auto !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

.zg-friend-rank-title {
  margin: 0 0 10px 0 !important;
  line-height: 1.2 !important;
  font-size: 28px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

.zg-rank-my-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 36px !important;

  margin: 0 0 12px 0 !important;
  padding: 6px 12px !important;

  line-height: 1.2 !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  text-align: center !important;

  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/*
 * 排行榜捲動區：
 * 手機上固定可視高度，不讓 row 被切掉。
 */
.zg-rank-scroll {
  width: 100% !important;

  min-height: 190px !important;
  max-height: 260px !important;
  height: auto !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding-right: 2px !important;
  box-sizing: border-box !important;
}

.zg-rank-list,
.zg-rank-classic-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;
}

/*
 * 排行 row：
 * 固定高度，避免文字壓在一起。
 */
.zg-rank-row,
.zg-rank-item,
.zg-rank-classic-item {
  display: grid !important;
  grid-template-columns: 44px 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;

  width: 100% !important;
  min-height: 62px !important;
  height: 62px !important;

  padding: 8px 12px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

.zg-rank-no,
.zg-rank-medal,
.zg-rank-classic-medal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

.zg-rank-avatar,
.zg-rank-classic-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  overflow: hidden !important;
}

.zg-rank-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.zg-rank-player,
.zg-rank-classic-player {
  min-width: 0 !important;
  overflow: hidden !important;
}

.zg-rank-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;

  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.zg-rank-name,
.zg-rank-classic-name {
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  line-height: 1.2 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.zg-rank-me-badge {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 24px !important;
  height: 20px !important;

  padding: 0 6px !important;
  border-radius: 999px !important;

  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.zg-rank-score,
.zg-rank-classic-score {
  flex: 0 0 auto !important;

  min-width: 48px !important;
  text-align: right !important;

  line-height: 1 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;

  white-space: nowrap !important;
}

/*
 * 底部按鈕：
 * 不要蓋住排行榜。
 */
.zg-result-actions,
.zg-result-buttons,
.zg-actions {
  position: relative !important;
  z-index: 3 !important;

  width: calc(100% - 22px) !important;
  max-width: 540px !important;

  margin: 10px auto 24px auto !important;
  padding-bottom: env(safe-area-inset-bottom) !important;

  box-sizing: border-box !important;
}

/*
 * 小高度手機專用：
 * 讓陀螺與票券稍微縮小，避免擠壓。
 */
@media screen and (max-height: 760px) {
  .zg-result-main {
    padding-top: 6px !important;
    padding-bottom: 130px !important;
  }

  #zg-result-top-image,
  .zg-result-top-image {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
  }

  #zg-result-title,
  .zg-result-title {
    font-size: 28px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  #zg-result-message .zg-result-score-line:first-child,
  .zg-result-message .zg-result-score-line:first-child {
    font-size: 17px !important;
  }

  #zg-result-message .zg-result-score-line:last-child,
  .zg-result-message .zg-result-score-line:last-child {
    font-size: 16px !important;
  }

  #zg-coupon-card,
  .zg-coupon-card {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    min-height: 132px !important;
  }

  #zg-coupon-code,
  .zg-coupon-code {
    font-size: 34px !important;
  }

  .zg-coupon-copy {
    min-height: 48px !important;
    font-size: 17px !important;
  }

  #zg-friend-rank,
  .zg-friend-rank,
  #zg-leaderboard,
  .zg-leaderboard {
    min-height: 270px !important;
    margin-top: 8px !important;
  }

  .zg-rank-scroll {
    min-height: 178px !important;
    max-height: 230px !important;
  }

  .zg-rank-row,
  .zg-rank-item,
  .zg-rank-classic-item {
    min-height: 58px !important;
    height: 58px !important;
  }
}

/*
 * =========================================================
 * ZELO Result Mobile Layout Fix
 * 修正：
 * 1. 加分 / 總分不要同一行擠在一起
 * 2. 不要壓到票券
 * 3. 票券高度固定並保留間距
 * 4. 排行榜不要被壓扁
 * 5. 手機高度不足時整頁可上下捲動
 * =========================================================
 */

.zg-screen-result,
#zg-screen-result,
.zg-result-screen {
  min-height: 100dvh !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.zg-result-main {
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
  padding-bottom: 120px !important;
  box-sizing: border-box !important;
}

/*
 * 結果標題區
 */
#zg-result-title,
.zg-result-title {
  margin-top: 8px !important;
  margin-bottom: 6px !important;
  line-height: 1.18 !important;
}

/*
 * 分數訊息：
 * 強制每一行分開，不要壓在同一行。
 */
#zg-result-message,
.zg-result-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;

  width: 100% !important;
  margin: 0 auto 10px auto !important;
  padding: 0 12px !important;

  line-height: 1.25 !important;
  white-space: normal !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

#zg-result-message .zg-result-score-line,
.zg-result-message .zg-result-score-line {
  display: block !important;
  width: 100% !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  text-align: center !important;
}

#zg-result-message .zg-result-score-line:first-child,
.zg-result-message .zg-result-score-line:first-child {
  color: #5cff91 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#zg-result-message .zg-result-score-line:last-child,
.zg-result-message .zg-result-score-line:last-child {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  opacity: 0.95 !important;
}

/*
 * 票券區：
 * 不要被上方文字壓到。
 */
#zg-coupon-card,
.zg-coupon-card {
  position: relative !important;
  z-index: 2 !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  margin: 10px auto 10px auto !important;
  padding: 16px 18px 20px 18px !important;

  min-height: 142px !important;
  height: auto !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

#zg-coupon-label,
.zg-coupon-label {
  display: block !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
  white-space: normal !important;
}

#zg-coupon-code,
.zg-coupon-code {
  display: block !important;
  margin: 0 auto 2px auto !important;
  line-height: 1.05 !important;
  font-size: 38px !important;
  font-weight: 1000 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#zg-coupon-desc,
.zg-coupon-desc {
  display: block !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.2 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
  white-space: normal !important;
}

.zg-coupon-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 52px !important;
  height: auto !important;

  padding: 10px 12px !important;
  box-sizing: border-box !important;

  line-height: 1.25 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-align: center !important;

  white-space: normal !important;
}

/*
 * 好友排行榜：
 * 不要壓縮到只剩一半。
 */
#zg-friend-rank,
.zg-friend-rank,
#zg-leaderboard,
.zg-leaderboard {
  position: relative !important;
  z-index: 1 !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  margin: 10px auto 16px auto !important;
  padding: 16px 16px 18px 16px !important;

  min-height: 290px !important;
  max-height: none !important;
  height: auto !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

.zg-friend-rank-title {
  margin: 0 0 10px 0 !important;
  line-height: 1.2 !important;
  font-size: 28px !important;
  font-weight: 1000 !important;
  text-align: center !important;
}

.zg-rank-my-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 36px !important;

  margin: 0 0 12px 0 !important;
  padding: 6px 12px !important;

  line-height: 1.2 !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  text-align: center !important;

  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/*
 * 排行榜捲動區：
 * 手機上固定可視高度，不讓 row 被切掉。
 */
.zg-rank-scroll {
  width: 100% !important;

  min-height: 190px !important;
  max-height: 260px !important;
  height: auto !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding-right: 2px !important;
  box-sizing: border-box !important;
}

.zg-rank-list,
.zg-rank-classic-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

  overflow: visible !important;
}

/*
 * 排行 row：
 * 固定高度，避免文字壓在一起。
 */
.zg-rank-row,
.zg-rank-item,
.zg-rank-classic-item {
  display: grid !important;
  grid-template-columns: 44px 42px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 8px !important;

  width: 100% !important;
  min-height: 62px !important;
  height: 62px !important;

  padding: 8px 12px !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
}

.zg-rank-no,
.zg-rank-medal,
.zg-rank-classic-medal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

.zg-rank-avatar,
.zg-rank-classic-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  overflow: hidden !important;
}

.zg-rank-avatar-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.zg-rank-player,
.zg-rank-classic-player {
  min-width: 0 !important;
  overflow: hidden !important;
}

.zg-rank-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;

  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.zg-rank-name,
.zg-rank-classic-name {
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  line-height: 1.2 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.zg-rank-me-badge {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 24px !important;
  height: 20px !important;

  padding: 0 6px !important;
  border-radius: 999px !important;

  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.zg-rank-score,
.zg-rank-classic-score {
  flex: 0 0 auto !important;

  min-width: 48px !important;
  text-align: right !important;

  line-height: 1 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;

  white-space: nowrap !important;
}

/*
 * 底部按鈕：
 * 不要蓋住排行榜。
 */
.zg-result-actions,
.zg-result-buttons,
.zg-actions {
  position: relative !important;
  z-index: 3 !important;

  width: calc(100% - 22px) !important;
  max-width: 540px !important;

  margin: 10px auto 24px auto !important;
  padding-bottom: env(safe-area-inset-bottom) !important;

  box-sizing: border-box !important;
}

/*
 * 小高度手機專用：
 * 讓陀螺與票券稍微縮小，避免擠壓。
 */
@media screen and (max-height: 760px) {
  .zg-result-main {
    padding-top: 6px !important;
    padding-bottom: 130px !important;
  }

  #zg-result-top-image,
  .zg-result-top-image {
    width: 150px !important;
    height: 150px !important;
    max-width: 150px !important;
    max-height: 150px !important;
  }

  #zg-result-title,
  .zg-result-title {
    font-size: 28px !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  #zg-result-message .zg-result-score-line:first-child,
  .zg-result-message .zg-result-score-line:first-child {
    font-size: 17px !important;
  }

  #zg-result-message .zg-result-score-line:last-child,
  .zg-result-message .zg-result-score-line:last-child {
    font-size: 16px !important;
  }

  #zg-coupon-card,
  .zg-coupon-card {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    min-height: 132px !important;
  }

  #zg-coupon-code,
  .zg-coupon-code {
    font-size: 34px !important;
  }

  .zg-coupon-copy {
    min-height: 48px !important;
    font-size: 17px !important;
  }

  #zg-friend-rank,
  .zg-friend-rank,
  #zg-leaderboard,
  .zg-leaderboard {
    min-height: 270px !important;
    margin-top: 8px !important;
  }

  .zg-rank-scroll {
    min-height: 178px !important;
    max-height: 230px !important;
  }

  .zg-rank-row,
  .zg-rank-item,
  .zg-rank-classic-item {
    min-height: 58px !important;
    height: 58px !important;
  }
}

/*
 * =========================================================
 * ZELO Result Layout Final Fix
 * 修正：
 * 1. 結果頁整頁可捲動
 * 2. 上方分數文字不壓到票券
 * 3. 票券內容不被裁切
 * 4. 排行榜不被壓縮
 * 5. 底部按鈕不蓋住排行榜
 * =========================================================
 */

html,
body {
  overflow-x: hidden !important;
}

.zg-screen-result,
#zg-screen-result,
.zg-result-screen,
.zg-screen.is-result,
.zg-screen[data-screen="result"] {
  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.zg-result-main,
#zg-result-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  height: auto !important;
  min-height: 100dvh !important;
  max-height: none !important;

  overflow: visible !important;

  padding-top: 12px !important;
  padding-bottom: 150px !important;

  box-sizing: border-box !important;
}

/*
 * 所有結果頁主要區塊都禁止被 flex 壓縮
 */
.zg-result-main > *,
#zg-result-main > *,
#zg-result-title,
#zg-result-message,
#zg-coupon-card,
#zg-friend-rank,
.zg-friend-rank,
#zg-leaderboard,
.zg-leaderboard,
.zg-result-actions,
.zg-result-buttons,
.zg-actions {
  flex-shrink: 0 !important;
}

/*
 * 陀螺圖
 */
#zg-result-top-image,
.zg-result-top-image {
  flex-shrink: 0 !important;
  display: block !important;

  width: 170px !important;
  height: 170px !important;
  max-width: 170px !important;
  max-height: 170px !important;

  margin: 0 auto 6px auto !important;

  object-fit: contain !important;
}

/*
 * 結果標題
 */
#zg-result-title,
.zg-result-title {
  display: block !important;

  width: 100% !important;
  margin: 4px auto 6px auto !important;
  padding: 0 12px !important;

  line-height: 1.18 !important;
  font-size: 30px !important;
  font-weight: 1000 !important;

  text-align: center !important;
  white-space: normal !important;

  box-sizing: border-box !important;
}

/*
 * 分數訊息：
 * 強制分兩行，並保留高度，不能壓到票券。
 */
#zg-result-message,
.zg-result-message {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 48px !important;
  height: auto !important;

  margin: 0 auto 12px auto !important;
  padding: 0 12px !important;

  line-height: 1.25 !important;
  text-align: center !important;
  white-space: normal !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

#zg-result-message .zg-result-score-line,
.zg-result-message .zg-result-score-line {
  display: block !important;

  width: 100% !important;
  min-height: 22px !important;

  line-height: 1.25 !important;
  text-align: center !important;
  white-space: nowrap !important;

  overflow: visible !important;
}

#zg-result-message .zg-result-score-line:first-child,
.zg-result-message .zg-result-score-line:first-child {
  color: #34ff8a !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

#zg-result-message .zg-result-score-line:last-child,
.zg-result-message .zg-result-score-line:last-child {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
}

/*
 * 票券卡片：
 * 加高，避免 ZELO500 被裁切。
 */
#zg-coupon-card,
.zg-coupon-card {
  position: relative !important;
  z-index: 2 !important;

  display: block !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  height: auto !important;
  min-height: 168px !important;
  max-height: none !important;

  margin: 0 auto 18px auto !important;
  padding: 18px 20px 20px 20px !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

#zg-coupon-label,
.zg-coupon-label {
  display: block !important;

  margin: 0 0 6px 0 !important;

  line-height: 1.25 !important;
  font-size: 15px !important;
  font-weight: 1000 !important;

  text-align: center !important;
  white-space: normal !important;

  overflow: visible !important;
}

#zg-coupon-code,
.zg-coupon-code {
  display: block !important;

  margin: 0 auto 4px auto !important;

  line-height: 1 !important;
  font-size: 38px !important;
  font-weight: 1000 !important;

  text-align: center !important;
  white-space: nowrap !important;

  overflow: visible !important;
}

#zg-coupon-desc,
.zg-coupon-desc {
  display: block !important;

  margin: 0 0 12px 0 !important;

  line-height: 1.25 !important;
  font-size: 13px !important;
  font-weight: 800 !important;

  text-align: center !important;
  white-space: normal !important;

  overflow: visible !important;
}

.zg-coupon-copy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 52px !important;
  height: auto !important;

  padding: 10px 12px !important;

  line-height: 1.25 !important;
  font-size: 18px !important;
  font-weight: 1000 !important;

  text-align: center !important;
  white-space: normal !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

/*
 * 排行榜容器：
 * 不允許壓扁。
 */
#zg-friend-rank,
.zg-friend-rank,
#zg-leaderboard,
.zg-leaderboard {
  position: relative !important;
  z-index: 1 !important;

  display: block !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  height: auto !important;
  min-height: 320px !important;
  max-height: none !important;

  margin: 0 auto 18px auto !important;
  padding: 18px 16px 18px 16px !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

.zg-friend-rank-title {
  display: block !important;

  margin: 0 0 12px 0 !important;

  line-height: 1.2 !important;
  font-size: 28px !important;
  font-weight: 1000 !important;

  text-align: center !important;
  white-space: nowrap !important;
}

.zg-rank-my-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 40px !important;
  height: auto !important;

  margin: 0 0 12px 0 !important;
  padding: 8px 12px !important;

  line-height: 1.2 !important;
  font-size: 15px !important;
  font-weight: 1000 !important;

  text-align: center !important;
  white-space: nowrap !important;

  box-sizing: border-box !important;
}

/*
 * 排行榜捲動區。
 */
.zg-rank-scroll {
  display: block !important;

  width: 100% !important;

  height: 210px !important;
  min-height: 210px !important;
  max-height: 210px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;

  padding-right: 2px !important;
  box-sizing: border-box !important;
}

.zg-rank-list,
.zg-rank-classic-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;

  width: 100% !important;
  height: auto !important;

  overflow: visible !important;
}

/*
 * 排行 row 固定高度，避免文字互壓。
 */
.zg-rank-row,
.zg-rank-item,
.zg-rank-classic-item {
  display: grid !important;
  grid-template-columns: 44px 38px minmax(0, 1fr) 58px !important;
  align-items: center !important;
  column-gap: 8px !important;

  width: 100% !important;

  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;

  padding: 8px 12px !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

.zg-rank-no,
.zg-rank-medal,
.zg-rank-classic-medal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;

  line-height: 1 !important;
  font-size: 18px !important;
  font-weight: 1000 !important;
}

.zg-rank-avatar,
.zg-rank-classic-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  overflow: hidden !important;
}

.zg-rank-avatar-img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;
  object-fit: cover !important;
}

.zg-rank-avatar-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  line-height: 1 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.zg-rank-player,
.zg-rank-classic-player {
  min-width: 0 !important;
  overflow: hidden !important;
}

.zg-rank-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;

  width: 100% !important;
  min-width: 0 !important;

  overflow: hidden !important;
}

.zg-rank-name,
.zg-rank-classic-name {
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  line-height: 1.2 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
}

.zg-rank-me-badge {
  flex: 0 0 auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-width: 24px !important;
  height: 20px !important;

  padding: 0 6px !important;
  border-radius: 999px !important;

  line-height: 1 !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  white-space: nowrap !important;
}

.zg-rank-score,
.zg-rank-classic-score {
  min-width: 58px !important;

  text-align: right !important;
  white-space: nowrap !important;

  line-height: 1 !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
}

/*
 * 底部按鈕不要固定蓋住排行榜。
 */
.zg-result-actions,
.zg-result-buttons,
.zg-actions {
  position: relative !important;
  z-index: 3 !important;

  width: calc(100% - 24px) !important;
  max-width: 540px !important;

  height: auto !important;
  min-height: 128px !important;

  margin: 0 auto 28px auto !important;
  padding-bottom: env(safe-area-inset-bottom) !important;

  box-sizing: border-box !important;
}

/*
 * 小高度手機。
 */
@media screen and (max-height: 760px) {
  .zg-result-main,
  #zg-result-main {
    padding-top: 8px !important;
    padding-bottom: 150px !important;
  }

  #zg-result-top-image,
  .zg-result-top-image {
    width: 145px !important;
    height: 145px !important;
    max-width: 145px !important;
    max-height: 145px !important;
    margin-bottom: 4px !important;
  }

  #zg-result-title,
  .zg-result-title {
    font-size: 28px !important;
    margin-top: 2px !important;
    margin-bottom: 4px !important;
  }

  #zg-result-message,
  .zg-result-message {
    min-height: 46px !important;
    margin-bottom: 12px !important;
  }

  #zg-result-message .zg-result-score-line:first-child,
  .zg-result-message .zg-result-score-line:first-child {
    font-size: 17px !important;
  }

  #zg-result-message .zg-result-score-line:last-child,
  .zg-result-message .zg-result-score-line:last-child {
    font-size: 16px !important;
  }

  #zg-coupon-card,
  .zg-coupon-card {
    min-height: 158px !important;
    margin-bottom: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 18px !important;
  }

  #zg-coupon-code,
  .zg-coupon-code {
    font-size: 34px !important;
  }

  .zg-coupon-copy {
    min-height: 50px !important;
    font-size: 17px !important;
  }

  #zg-friend-rank,
  .zg-friend-rank,
  #zg-leaderboard,
  .zg-leaderboard {
    min-height: 306px !important;
    padding-top: 16px !important;
  }

  .zg-rank-scroll {
    height: 198px !important;
    min-height: 198px !important;
    max-height: 198px !important;
  }

  .zg-rank-row,
  .zg-rank-item,
  .zg-rank-classic-item {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }
}

.zg-result-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #050816;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.zg-result-intro-overlay.is-leaving {
  opacity: 0;
}

.zg-result-intro-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: #050816;
  overflow: hidden;
}

.zg-result-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050816;
  display: block;
}

.zg-result-intro-skip {
  position: absolute;
  right: 16px;
  bottom: 22px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.zg-result-intro-skip:active {
  transform: scale(0.96);
}

.zg-result-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #050816;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.zg-result-intro-overlay.is-leaving {
  opacity: 0;
}

.zg-result-intro-inner {
  position: relative;
  width: 100%;
  height: 100%;
  background: #050816;
  overflow: hidden;
}

.zg-result-intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #050816;
  display: block;
}

.zg-result-intro-skip {
  position: absolute;
  right: 16px;
  bottom: 22px;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.zg-result-intro-skip:active {
  transform: scale(0.96);
}

/* =========================================================
   SECRET TOPS - SAME AS NORMAL TOP CARD / 5 LOCKED ITEMS
   ========================================================= */

#screen-select .zg-secret-tops-preview {
  width: calc(100% - 24px) !important;
  max-width: 520px !important;
  margin: 28px auto 0 !important;
  padding: 18px 0 calc(env(safe-area-inset-bottom, 0px) + 120px) !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 8 !important;
}

#screen-select .zg-secret-tops-head {
  width: 100% !important;
  margin: 0 0 12px !important;
  padding: 0 6px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px !important;
  box-sizing: border-box !important;
}

#screen-select .zg-secret-tops-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 22px !important;
  padding: 0 12px !important;
  margin: 0 0 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff6b8, #ffd94f) !important;
  color: #17120a !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(255, 210, 70, .28) !important;
}

#screen-select .zg-secret-tops-head strong {
  display: block !important;
  color: #fff !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
}

#screen-select .zg-secret-tops-head p {
  margin: 0 0 2px !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  text-align: right !important;
  max-width: 190px !important;
}

#screen-select .zg-secret-top-list {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

/* 讓隱藏陀螺沿用正常卡片，但禁止點擊 */
#screen-select .zg-secret-top-card {
  position: relative !important;
  width: 100% !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
  filter: none !important;
}

/* disabled 預設灰階要取消 */
#screen-select .zg-secret-top-card:disabled {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 鎖定遮罩，不蓋掉整張卡，只加暗角 */
#screen-select .zg-secret-top-card.is-locked::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.18)),
    radial-gradient(circle at 80% 50%, rgba(0,0,0,.18), transparent 42%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 內容要在遮罩上 */
#screen-select .zg-secret-top-card .zg-top-icon,
#screen-select .zg-secret-top-card .zg-top-content,
#screen-select .zg-secret-top-card .zg-secret-lock-badge {
  position: relative !important;
  z-index: 2 !important;
}

#screen-select .zg-secret-unlock-task {
  margin-top: 9px !important;
  padding: 8px 10px !important;
  border-radius: 12px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

#screen-select .zg-secret-lock-badge {
  position: absolute !important;
  right: 14px !important;
  top: 12px !important;
  min-height: 22px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.52) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff4b0 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

/* 小螢幕：任務文字不要太擠 */
@media (max-width: 390px) {
  #screen-select .zg-secret-unlock-task {
    font-size: 11px !important;
    padding: 7px 9px !important;
  }

  #screen-select .zg-secret-tops-head {
    align-items: flex-start !important;
  }

  #screen-select .zg-secret-tops-head p {
    max-width: 150px !important;
    font-size: 11px !important;
  }
}


/* =========================================================
   SECRET TOPS - EXACT SAME AS NORMAL TOP CARD
   Version: 202607210430
   ========================================================= */

/* 隱藏陀螺區外框 */
#screen-select .zg-secret-tops-preview {
  width: calc(100% - 24px) !important;
  max-width: 620px !important;
  margin: 28px auto 0 !important;
  padding: 22px 14px calc(env(safe-area-inset-bottom, 0px) + 76px) !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 8 !important;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
}

/* 標題區 */
#screen-select .zg-secret-tops-head {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 8px !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;

  box-sizing: border-box !important;
}

#screen-select .zg-secret-tops-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 28px !important;
  padding: 0 18px !important;
  margin: 0 0 12px !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff7a8, #ffe45c) !important;
  color: #151007 !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;

  box-shadow: 0 8px 18px rgba(255, 220, 80, .28) !important;
}

#screen-select .zg-secret-tops-head strong {
  display: block !important;
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
}

#screen-select .zg-secret-tops-head p {
  margin: 0 0 4px !important;
  max-width: 290px !important;

  color: rgba(255,255,255,.76) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: right !important;
}

/* 5 顆列表 */
#screen-select .zg-secret-top-list {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/*
 * 關鍵：
 * 不重新定義 zg-top-card 版型。
 * 只取消 disabled 灰階、取消點擊。
 */
#screen-select .zg-secret-top-card {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

#screen-select .zg-secret-top-card:disabled {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}


/* 黑影問號 */
#screen-select .zg-secret-shadow-photo span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 48px !important;
  height: 48px !important;

  border-radius: 999px !important;
  background: rgba(0,0,0,.42) !important;

  color: rgba(255,255,255,.42) !important;
  font-size: 30px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;

  text-shadow: 0 2px 10px rgba(0,0,0,.7) !important;
}

/* 數值問號 */
#screen-select .zg-secret-top-card .zg-stat strong {
  color: #fff34d !important;
}

/*
 * 解鎖任務：
 * 放在 stats 下面，但不改變上方原本版型。
 */
#screen-select .zg-secret-unlock-task {
  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  max-width: 100% !important;

  margin: 10px 0 0 !important;
  padding: 7px 12px !important;

  border-radius: 999px !important;
  background: rgba(0,0,0,.24) !important;
  border: 1px solid rgba(255,255,255,.13) !important;

  color: rgba(255,255,255,.86) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  box-sizing: border-box !important;
}

/* 最後一張不要多空白 */
#screen-select .zg-secret-top-list .zg-secret-top-card:last-child {
  margin-bottom: 0 !important;
}

/* 手機版 */
@media (max-width: 430px) {
  #screen-select .zg-secret-tops-preview {
    width: calc(100% - 24px) !important;
    padding: 20px 12px calc(env(safe-area-inset-bottom, 0px) + 68px) !important;
  }

  #screen-select .zg-secret-tops-head {
    margin-bottom: 14px !important;
    padding: 0 6px !important;
  }

  #screen-select .zg-secret-tops-kicker {
    min-height: 24px !important;
    padding: 0 14px !important;
    margin-bottom: 9px !important;
    font-size: 12px !important;
  }

  #screen-select .zg-secret-tops-head strong {
    font-size: 28px !important;
  }

  #screen-select .zg-secret-tops-head p {
    max-width: 190px !important;
    font-size: 13px !important;
  }

  #screen-select .zg-secret-top-list {
    gap: 12px !important;
  }

  #screen-select .zg-secret-unlock-task {
    margin-top: 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
  }

  #screen-select .zg-secret-shadow-photo span {
    width: 42px !important;
    height: 42px !important;
    font-size: 27px !important;
  }
}

/* =========================================================
   SECRET TOPS FINAL FIX - SAME LAYOUT AS NORMAL TOP CARD
   Version: 202607210445
   ========================================================= */

/* 外層區塊 */
#screen-select .zg-secret-tops-preview {
  width: calc(100% - 24px) !important;
  max-width: 620px !important;
  margin: 28px auto 0 !important;
  padding: 22px 14px calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 8 !important;

  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;

  overflow: visible !important;
}

/* 標題列 */
#screen-select .zg-secret-tops-head {
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 0 8px !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 14px !important;

  box-sizing: border-box !important;
}

/* SECRET TOPS 黃標 */
#screen-select .zg-secret-tops-kicker {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 28px !important;
  padding: 0 18px !important;
  margin: 0 0 12px !important;

  border-radius: 999px !important;
  background: linear-gradient(180deg, #fff7a8, #ffe45c) !important;
  color: #151007 !important;

  font-size: 14px !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  box-shadow: 0 8px 18px rgba(255, 220, 80, .28) !important;
}

/* 隱藏陀螺區標題：禁止斷成兩行 */
#screen-select .zg-secret-tops-head strong {
  display: block !important;
  color: #fff !important;
  font-size: 34px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.5) !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

/* 右側說明 */
#screen-select .zg-secret-tops-head p {
  margin: 0 0 4px !important;
  max-width: 290px !important;

  color: rgba(255,255,255,.76) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: right !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 5 顆列表 */
#screen-select .zg-secret-top-list {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;

  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;

  overflow: visible !important;
}

/* =========================================================
   隱藏卡片：強制跟正常 zg-top-card 一樣橫向
   ========================================================= */

#screen-select .zg-secret-top-card.zg-top-card {
  width: 100% !important;

  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;

  gap: 18px !important;

  /*
   * 因為多一行解鎖任務，所以比正常卡片稍微高一點。
   * 但版型仍然是同一種左圖右文。
   */
  min-height: 176px !important;
  height: auto !important;

  padding: 18px 22px !important;
  margin: 0 !important;

  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  text-align: left !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;

  cursor: default !important;
  pointer-events: none !important;
}

#screen-select .zg-secret-top-card.zg-top-card:disabled {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 不要讓任何舊的 absolute 圖片規則影響 */
#screen-select .zg-secret-top-card .zg-top-photo,
#screen-select .zg-secret-top-card .zg-secret-shadow-photo,
#screen-select .zg-secret-top-card .zg-secret-top-shadow {
  display: none !important;
}

/* =========================================================
   左側黑影區：固定在原本陀螺圖位置
   ========================================================= */

#screen-select .zg-secret-top-card .zg-secret-top-icon {
  width: 150px !important;
  height: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  overflow: visible !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

/* 黑影本體 */
#screen-select .zg-secret-top-card .zg-secret-shadow-disc {
  width: 124px !important;
  height: 124px !important;
  min-width: 124px !important;
  min-height: 124px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 999px !important;
  box-sizing: border-box !important;

  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.14), transparent 17%),
    radial-gradient(circle at 50% 54%, rgba(0,0,0,1) 0%, rgba(0,0,0,.97) 38%, rgba(0,0,0,.72) 59%, rgba(0,0,0,0) 75%) !important;

  box-shadow:
    0 0 0 5px rgba(255,255,255,.08),
    0 0 0 11px color-mix(in srgb, var(--c2, #57f2ff) 26%, transparent),
    0 0 30px rgba(0,0,0,.64),
    0 0 38px color-mix(in srgb, var(--c2, #57f2ff) 38%, transparent) !important;

  opacity: .98 !important;
}

/* 黑影問號 */
#screen-select .zg-secret-top-card .zg-secret-shadow-disc span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 54px !important;
  height: 54px !important;

  border-radius: 999px !important;
  background: rgba(0,0,0,.44) !important;

  color: rgba(255,255,255,.42) !important;
  font-size: 34px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;

  text-shadow: 0 2px 10px rgba(0,0,0,.72) !important;
}

/* =========================================================
   右側文字區：固定跟正常卡一樣
   ========================================================= */

#screen-select .zg-secret-top-card .zg-top-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  text-align: left !important;
  overflow: visible !important;
  z-index: 3 !important;
}

/* 名稱：禁止直排、禁止亂斷 */
#screen-select .zg-secret-top-card .zg-top-name {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 4px !important;
  padding: 0 !important;

  color: #fff !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-align: left !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 類型 */
#screen-select .zg-secret-top-card .zg-top-type {
  margin: 0 0 14px !important;
  padding: 0 !important;

  color: rgba(255,255,255,.88) !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1.1 !important;
  text-align: left !important;

  white-space: nowrap !important;
}

/* 數值區：強制橫排四格 */
#screen-select .zg-secret-top-card .zg-stats {
  width: 100% !important;
  max-width: 420px !important;

  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;

  margin: 0 !important;
  padding: 0 !important;

  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
  z-index: 3 !important;
}

/* 數值格 */
#screen-select .zg-secret-top-card .zg-stat {
  min-width: 0 !important;
  min-height: 56px !important;

  padding: 7px 7px !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 14px !important;
  background: rgba(0,0,0,.20) !important;

  text-align: center !important;
  box-sizing: border-box !important;
}

#screen-select .zg-secret-top-card .zg-stat span {
  display: block !important;
  margin: 0 0 3px !important;

  color: rgba(255,255,255,.78) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;

  white-space: nowrap !important;
}

#screen-select .zg-secret-top-card .zg-stat strong {
  display: block !important;

  color: #fff34d !important;
  font-size: 25px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  text-align: center !important;

  white-space: nowrap !important;
}

/* 解鎖任務：不裁切、放在數值下面 */
#screen-select .zg-secret-top-card .zg-secret-unlock-task {
  display: inline-flex !important;
  align-items: center !important;

  width: auto !important;
  max-width: 100% !important;

  margin: 12px 0 0 !important;
  padding: 8px 12px !important;

  border-radius: 999px !important;
  background: rgba(0,0,0,.24) !important;
  border: 1px solid rgba(255,255,255,.13) !important;

  color: rgba(255,255,255,.88) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  text-align: left !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  box-sizing: border-box !important;
}

/* 舊 LOCKED badge 強制隱藏，避免破壞版型 */
#screen-select .zg-secret-lock-badge {
  display: none !important;
}

/* 暗角遮罩 */
#screen-select .zg-secret-top-card.is-locked::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;

  background:
    radial-gradient(circle at 16% 50%, rgba(0,0,0,.04), transparent 38%),
    linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.16)) !important;

  pointer-events: none !important;
  z-index: 1 !important;
}

/* 內容壓在遮罩上 */
#screen-select .zg-secret-top-card .zg-secret-top-icon,
#screen-select .zg-secret-top-card .zg-top-content {
  position: relative !important;
  z-index: 3 !important;
}

/* 最後一張不要多空白 */
#screen-select .zg-secret-top-list .zg-secret-top-card:last-child {
  margin-bottom: 0 !important;
}

/* =========================================================
   手機寬度修正
   ========================================================= */

@media (max-width: 430px) {
  #screen-select .zg-secret-tops-preview {
    width: calc(100% - 24px) !important;
    padding: 20px 12px calc(env(safe-area-inset-bottom, 0px) + 68px) !important;
  }

  #screen-select .zg-secret-tops-head {
    align-items: flex-end !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    padding: 0 6px !important;
  }

  #screen-select .zg-secret-tops-kicker {
    min-height: 24px !important;
    padding: 0 14px !important;
    margin-bottom: 9px !important;
    font-size: 12px !important;
  }

  #screen-select .zg-secret-tops-head strong {
    font-size: 26px !important;
  }

  #screen-select .zg-secret-tops-head p {
    max-width: 190px !important;
    font-size: 12px !important;
  }

  #screen-select .zg-secret-top-list {
    gap: 12px !important;
  }

  #screen-select .zg-secret-top-card.zg-top-card {
    gap: 12px !important;
    min-height: 148px !important;
    padding: 14px 14px !important;
  }

  #screen-select .zg-secret-top-card .zg-secret-top-icon {
    width: 116px !important;
    height: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    flex-basis: 116px !important;
  }

  #screen-select .zg-secret-top-card .zg-secret-shadow-disc {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
  }

  #screen-select .zg-secret-top-card .zg-secret-shadow-disc span {
    width: 44px !important;
    height: 44px !important;
    font-size: 28px !important;
  }

  #screen-select .zg-secret-top-card .zg-top-name {
    font-size: 20px !important;
  }

  #screen-select .zg-secret-top-card .zg-top-type {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  #screen-select .zg-secret-top-card .zg-stats {
    max-width: 100% !important;
    gap: 6px !important;
  }

  #screen-select .zg-secret-top-card .zg-stat {
    min-height: 48px !important;
    padding: 6px 4px !important;
    border-radius: 12px !important;
  }

  #screen-select .zg-secret-top-card .zg-stat span {
    font-size: 10px !important;
  }

  #screen-select .zg-secret-top-card .zg-stat strong {
    font-size: 22px !important;
  }

  #screen-select .zg-secret-top-card .zg-secret-unlock-task {
    margin-top: 8px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   BATTLE CHARGE BUTTON HEIGHT FIX
   Version: 202607210455
   ========================================================= */

/* 蓄力區底部面板 */
#screen-battle .zg-launch-panel,
#screen-battle .zg-charge-panel,
#screen-battle .zg-battle-charge-panel,
.zg-launch-panel,
.zg-charge-panel,
.zg-battle-charge-panel {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
}

/* 蓄力按鈕：加高 */
#screen-battle .zg-charge-btn,
#screen-battle .zg-launch-charge-btn,
#screen-battle .zg-hold-btn,
#screen-battle [data-zg-action="charge"],
#screen-battle [data-zg-action="power"],
#screen-battle [data-zg-action="hold-charge"],
.zg-charge-btn,
.zg-launch-charge-btn,
.zg-hold-btn,
[data-zg-action="charge"],
[data-zg-action="power"],
[data-zg-action="hold-charge"] {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;

  padding: 0 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 22px !important;

  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
  touch-action: manipulation !important;
}

/* 按下時不要縮太小 */
#screen-battle .zg-charge-btn:active,
#screen-battle .zg-launch-charge-btn:active,
#screen-battle .zg-hold-btn:active,
#screen-battle [data-zg-action="charge"]:active,
#screen-battle [data-zg-action="power"]:active,
#screen-battle [data-zg-action="hold-charge"]:active {
  transform: translateY(1px) scale(.995) !important;
}

/* =========================================================
 * ZELO Collision Impact Enhancement
 * 不使用外部碰撞音效時，加強視覺打擊感
 * ========================================================= */

.zg-spark-burst {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 80;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--c1, #fff8a8),
      var(--c2, #ff3b17)
    );
  box-shadow:
    0 0 8px rgba(255, 226, 88, 0.95),
    0 0 18px rgba(255, 63, 20, 0.65);
  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad));
  animation:
    zgSparkBurstMove var(--life, 360ms) ease-out forwards;
}

@keyframes zgSparkBurstMove {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scale(1);
    filter: brightness(1.7);
  }

  70% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px))
      )
      rotate(calc(var(--rot, 0rad) + 150deg))
      scale(0.2);
    filter: brightness(0.8);
  }
}

.zg-metal-chip {
  position: absolute;
  display: block;
  pointer-events: none;
  z-index: 82;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #ffffff,
      #d8e9ff 35%,
      #7bd6ff 65%,
      #ffffff
    );
  box-shadow:
    0 0 7px rgba(180, 235, 255, 0.95),
    0 0 16px rgba(75, 190, 255, 0.55);
  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad));
  animation:
    zgMetalChipMove var(--life, 420ms) cubic-bezier(.12,.72,.22,1) forwards;
}

@keyframes zgMetalChipMove {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(1);
    filter: brightness(1.9);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--dx, 0px)),
        calc(-50% + var(--dy, 0px))
      )
      rotate(calc(var(--rot, 0rad) + 260deg))
      scaleX(0.25);
    filter: brightness(0.75);
  }
}

/* 重擊時場地短暫壓縮 */
.zg-battle-box.zg-collision-heavy {
  animation: zgCollisionHeavyPunch 430ms cubic-bezier(.12,.85,.24,1) both;
}

@keyframes zgCollisionHeavyPunch {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  16% {
    transform: scale(1.035);
    filter: brightness(1.45) contrast(1.15);
  }

  34% {
    transform: scale(0.985);
    filter: brightness(1.15) contrast(1.05);
  }

  58% {
    transform: scale(1.012);
    filter: brightness(1.08);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

/* 衝擊 streak 更明顯 */
.zg-impact-streak {
  box-shadow:
    0 0 10px rgba(255,255,255,.9),
    0 0 24px rgba(255,70,20,.65);
}

/* 衝擊環更厚 */
.zg-impact-ring {
  box-shadow:
    0 0 18px rgba(255,255,255,.75),
    0 0 38px rgba(255,68,24,.58),
    inset 0 0 18px rgba(255,255,255,.5);
}

/* =========================================================
 * ZELO BATTLE FX PATCH
 * 內建碰撞音效版：增強火花 / 打擊 / 殘影
 * ========================================================= */

.zg-spark,
.zg-metal-spark,
.zg-impact-ring,
.zg-impact-streak,
.zg-launch-shockwave,
.zg-spin-afterimage,
.zg-burst-piece,
.zg-wall-flash,
.zg-motion-trail,
.zg-scratch {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 70;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
}

.zg-spark {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0%, #fff06a 34%, #ff7a18 72%, transparent 100%);
  box-shadow:
    0 0 8px rgba(255, 240, 106, .95),
    0 0 18px rgba(255, 94, 24, .65);
  animation: zgSparkFly 420ms ease-out forwards;
}

@keyframes zgSparkFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
      scale(.25)
      rotate(var(--rot, 0deg));
  }
}

.zg-metal-spark {
  width: 38px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #fff, #fff06a, transparent);
  box-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 14px rgba(255,224,95,.7);
  transform-origin: 0 50%;
  animation: zgMetalSparkFly 360ms cubic-bezier(.16,.84,.32,1) forwards;
}

@keyframes zgMetalSparkFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(var(--scale, 1));
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
      rotate(var(--rot, 0rad))
      scaleX(.15);
  }
}

.zg-impact-ring {
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.9);
  box-shadow:
    0 0 18px rgba(255,255,255,.8),
    0 0 36px rgba(87,242,255,.55),
    inset 0 0 18px rgba(255,255,255,.45);
  animation: zgImpactRing 460ms ease-out forwards;
}

@keyframes zgImpactRing {
  0% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(.32);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(1.65 * var(--scale, 1)));
  }
}

.zg-impact-streak {
  width: 128px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), rgba(255,224,95,.8), transparent);
  filter: blur(.2px);
  box-shadow:
    0 0 14px rgba(255,255,255,.72),
    0 0 24px rgba(255,224,95,.42);
  animation: zgImpactStreak 340ms ease-out forwards;
}

@keyframes zgImpactStreak {
  0% {
    opacity: .9;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(.2) scaleY(var(--scale, 1));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scaleX(var(--scale, 1)) scaleY(.35);
  }
}

.zg-spin-afterimage {
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--c1, #57f2ff), transparent 25%);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c2, #fff06a), transparent 68%), transparent 62%),
    conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--c1, #57f2ff), transparent 22%), transparent);
  filter: blur(.4px);
  opacity: .45;
  animation: zgSpinAfterimage 260ms ease-out forwards;
}

@keyframes zgSpinAfterimage {
  0% {
    opacity: .42;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(.92);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--rot, 0deg) + 80deg)) scale(var(--scale, 1.18));
  }
}

.zg-burst-piece {
  width: 13px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--c1, #fff06a), var(--c2, #ff3b5c));
  box-shadow:
    0 0 10px rgba(255,255,255,.45),
    0 0 18px rgba(255,224,95,.35);
  animation: zgBurstPiece 780ms cubic-bezier(.16,.84,.32,1) forwards;
}

@keyframes zgBurstPiece {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--scale, 1)) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform:
      translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
      scale(.35)
      rotate(var(--rot, 180deg));
  }
}

.zg-wall-flash {
  width: 68px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(87,242,255,.95), transparent);
  box-shadow: 0 0 16px rgba(87,242,255,.7);
  animation: zgWallFlash 360ms ease-out forwards;
}

@keyframes zgWallFlash {
  0% {
    opacity: .9;
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(.4);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(calc(1.5 * var(--scale, 1)));
  }
}

.zg-motion-trail {
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1, #57f2ff), transparent 15%), transparent);
  filter: blur(.6px);
  transform-origin: 0 50%;
  animation: zgMotionTrail 240ms ease-out forwards;
  z-index: 42;
}

@keyframes zgMotionTrail {
  0% {
    opacity: .34;
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(.25);
  }
}

.zg-scratch {
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform-origin: 0 50%;
  animation: zgScratchFade 360ms ease-out forwards;
  z-index: 35;
}

@keyframes zgScratchFade {
  0% {
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(.45);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0rad)) scaleX(1.2);
  }
}

.zg-battle-box.zg-impact-punch {
  animation: zgImpactPunch 260ms cubic-bezier(.2,.9,.2,1);
}

@keyframes zgImpactPunch {
  0% { transform: scale(1); }
  35% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

.zg-battle-box.zg-collision-heavy {
  filter: saturate(1.22) contrast(1.08);
}

.zg-battle-box.big-shake {
  animation: zgBigShake 420ms cubic-bezier(.2,.8,.25,1);
}

@keyframes zgBigShake {
  0%, 100% { transform: translate3d(0,0,0); }
  12% { transform: translate3d(-5px, 3px, 0) rotate(-.4deg); }
  24% { transform: translate3d(6px, -4px, 0) rotate(.45deg); }
  36% { transform: translate3d(-4px, -3px, 0) rotate(-.35deg); }
  48% { transform: translate3d(4px, 3px, 0) rotate(.3deg); }
  60% { transform: translate3d(-3px, 2px, 0); }
  72% { transform: translate3d(2px, -2px, 0); }
}


/* =========================================================
 * ZELO BATTLE LIVE STATS
 * 對戰中即時能量 / 轉速顯示
 * ========================================================= */

.zg-battle-live-stats {
  width: 100%;
  max-width: 960px;
  margin: 10px auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 12px;
  box-sizing: border-box;
  pointer-events: none;
}

.zg-live-stat-card {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(95, 255, 198, .55);
  background:
    linear-gradient(180deg, rgba(27, 92, 85, .58), rgba(16, 50, 68, .56)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 22px
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 16px rgba(87, 242, 255, .16),
    0 0 18px rgba(80, 255, 173, .18);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #eaffff;
  text-shadow: 0 0 10px rgba(91, 255, 210, .7);
  overflow: hidden;
}

.zg-live-stat-card span {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  opacity: .82;
  letter-spacing: .03em;
}

.zg-live-stat-card strong {
  margin-top: 5px;
  font-size: 20px;
  line-height: 1;
  font-weight: 1000;
  color: #ffffff;
}

.zg-live-stat-card strong.is-low {
  color: #ffe05f;
  text-shadow: 0 0 12px rgba(255, 224, 95, .72);
}

.zg-live-stat-card strong.is-critical {
  color: #ff4b68;
  text-shadow: 0 0 14px rgba(255, 44, 92, .8);
  animation: zgLiveStatCritical 520ms ease-in-out infinite alternate;
}

@keyframes zgLiveStatCritical {
  from {
    transform: scale(1);
    filter: brightness(1);
  }

  to {
    transform: scale(1.08);
    filter: brightness(1.35);
  }
}

.zg-live-stat-player {
  border-color: rgba(87, 242, 255, .65);
}

.zg-live-stat-enemy {
  border-color: rgba(255, 104, 132, .55);
}

@media (max-width: 520px) {
  .zg-battle-live-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding: 0 8px;
  }

  .zg-live-stat-card {
    min-height: 40px;
    border-radius: 12px;
  }

  .zg-live-stat-card span {
    font-size: 11px;
  }

  .zg-live-stat-card strong {
    font-size: 18px;
  }
}
/* =========================================================
 * ZELO BATTLE LIVE STATS - SIDE LAYOUT
 * 對戰中即時能量 / 轉速：左右分組排版
 * ========================================================= */

#screen-battle .zg-battle-live-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
  justify-content: center !important;
  gap: 116px !important;

  width: 100% !important;
  max-width: 640px !important;

  margin: 12px auto 12px !important;
  padding: 0 42px !important;

  position: relative !important;
  z-index: 60 !important;

  box-sizing: border-box !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#screen-battle .zg-live-side {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
}

#screen-battle .zg-live-side-player {
  justify-self: end !important;
}

#screen-battle .zg-live-side-enemy {
  justify-self: start !important;
}

#screen-battle .zg-live-stat-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;

  border-radius: 14px !important;
  border: 1px solid rgba(95, 255, 198, .72) !important;

  background:
    linear-gradient(180deg, rgba(35, 108, 91, .64), rgba(18, 55, 69, .62)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.045) 0,
      rgba(255,255,255,.045) 1px,
      transparent 1px,
      transparent 22px
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 16px rgba(87, 242, 255, .18),
    0 0 20px rgba(80, 255, 173, .22) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;

  color: #eaffff !important;
  text-shadow: 0 0 10px rgba(91, 255, 210, .7) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

#screen-battle .zg-live-stat-card span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: .86 !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

#screen-battle .zg-live-stat-card strong {
  display: block !important;
  margin-top: 5px !important;

  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  color: #ffffff !important;
  white-space: nowrap !important;
}

#screen-battle .zg-live-stat-card strong.is-low {
  color: #ffe05f !important;
  text-shadow: 0 0 12px rgba(255, 224, 95, .72) !important;
}

#screen-battle .zg-live-stat-card strong.is-critical {
  color: #ff4b68 !important;
  text-shadow: 0 0 14px rgba(255, 44, 92, .8) !important;
  animation: zgLiveStatCritical 520ms ease-in-out infinite alternate !important;
}

#screen-battle .zg-live-stat-player {
  border-color: rgba(87, 242, 255, .72) !important;
}

#screen-battle .zg-live-stat-enemy {
  border-color: rgba(95, 255, 198, .72) !important;
}

@keyframes zgLiveStatCritical {
  from {
    transform: scale(1);
    filter: brightness(1);
  }

  to {
    transform: scale(1.08);
    filter: brightness(1.35);
  }
}

/*
 * 手機版：保持左右兩組，但縮小間距。
 */
@media (max-width: 520px) {
  #screen-battle .zg-battle-live-stats {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 116px !important;

    max-width: none !important;
    width: 100% !important;

    margin: 10px auto 12px !important;
    padding: 0 42px !important;
  }

  #screen-battle .zg-live-side {
    gap: 10px !important;
  }

  #screen-battle .zg-live-stat-card {
    height: 45px !important;
    min-height: 45px !important;
    border-radius: 13px !important;
  }

  #screen-battle .zg-live-stat-card span {
    font-size: 10px !important;
  }

  #screen-battle .zg-live-stat-card strong {
    font-size: 17px !important;
  }
}

@media (max-width: 390px) {
  #screen-battle .zg-battle-live-stats {
    gap: 88px !important;
    padding: 0 32px !important;
  }

  #screen-battle .zg-live-stat-card {
    height: 42px !important;
    min-height: 42px !important;
  }

  #screen-battle .zg-live-stat-card strong {
    font-size: 16px !important;
  }
}
/* =========================================================
 * ZELO BATTLE LIVE STATS - COMPACT SIDE GROUP
 * 我方一邊 / 敵方一邊，低高度橫向排版
 * ========================================================= */

#screen-battle .zg-battle-live-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;

  column-gap: 16px !important;
  row-gap: 0 !important;

  width: 100% !important;
  max-width: 980px !important;

  margin: 6px auto 8px !important;
  padding: 0 14px !important;

  position: relative !important;
  z-index: 60 !important;

  box-sizing: border-box !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/*
 * 左右兩組：
 * 每一組內部兩張卡橫向排列。
 */
#screen-battle .zg-live-side {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;

  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#screen-battle .zg-live-side-player {
  justify-self: stretch !important;
}

#screen-battle .zg-live-side-enemy {
  justify-self: stretch !important;
}

/*
 * 卡片降低高度，避免把戰鬥區往下擠。
 */
#screen-battle .zg-live-stat-card {
  width: 100% !important;
  min-width: 0 !important;

  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(95, 255, 198, .72) !important;

  background:
    linear-gradient(180deg, rgba(35, 108, 91, .58), rgba(18, 55, 69, .56)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 20px
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 10px rgba(87, 242, 255, .14),
    0 0 14px rgba(80, 255, 173, .16) !important;

  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;

  color: #eaffff !important;
  text-shadow: 0 0 8px rgba(91, 255, 210, .62) !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/*
 * 標題縮小。
 */
#screen-battle .zg-live-stat-card span {
  display: block !important;

  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;

  opacity: .86 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

/*
 * 數字縮小但保持醒目。
 */
#screen-battle .zg-live-stat-card strong {
  display: block !important;

  margin-top: 3px !important;

  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;

  color: #ffffff !important;
  white-space: nowrap !important;
}

#screen-battle .zg-live-stat-card strong.is-low {
  color: #ffe05f !important;
  text-shadow: 0 0 10px rgba(255, 224, 95, .72) !important;
}

#screen-battle .zg-live-stat-card strong.is-critical {
  color: #ff4b68 !important;
  text-shadow: 0 0 12px rgba(255, 44, 92, .8) !important;
  animation: zgLiveStatCritical 520ms ease-in-out infinite alternate !important;
}

#screen-battle .zg-live-stat-player {
  border-color: rgba(87, 242, 255, .68) !important;
}

#screen-battle .zg-live-stat-enemy {
  border-color: rgba(95, 255, 198, .68) !important;
}

@keyframes zgLiveStatCritical {
  from {
    transform: scale(1);
    filter: brightness(1);
  }

  to {
    transform: scale(1.06);
    filter: brightness(1.3);
  }
}

/*
 * 中等手機
 */
@media (max-width: 520px) {
  #screen-battle .zg-battle-live-stats {
    column-gap: 12px !important;
    margin: 5px auto 7px !important;
    padding: 0 10px !important;
  }

  #screen-battle .zg-live-side {
    gap: 6px !important;
  }

  #screen-battle .zg-live-stat-card {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 11px !important;
  }

  #screen-battle .zg-live-stat-card span {
    font-size: 8px !important;
  }

  #screen-battle .zg-live-stat-card strong {
    font-size: 15px !important;
    margin-top: 2px !important;
  }
}

/*
 * 小螢幕：仍保持我方一邊、敵方一邊。
 */
@media (max-width: 390px) {
  #screen-battle .zg-battle-live-stats {
    column-gap: 8px !important;
    padding: 0 7px !important;
  }

  #screen-battle .zg-live-side {
    gap: 5px !important;
  }

  #screen-battle .zg-live-stat-card {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  #screen-battle .zg-live-stat-card span {
    font-size: 7px !important;
  }

  #screen-battle .zg-live-stat-card strong {
    font-size: 14px !important;
  }
}


/* =========================================================
 * ZELO BATTLE LIVE STATS - COMPACT SIDE GROUP
 * 我方一邊 / 敵方一邊，低高度橫向排版
 * ========================================================= */

#screen-battle .zg-battle-live-stats {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 16px !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: 980px !important;
  margin: 6px auto 8px !important;
  padding: 0 14px !important;
  position: relative !important;
  z-index: 60 !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#screen-battle .zg-live-side {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#screen-battle .zg-live-stat-card {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(95, 255, 198, .72) !important;
  background:
    linear-gradient(180deg, rgba(35, 108, 91, .58), rgba(18, 55, 69, .56)),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0,
      rgba(255,255,255,.04) 1px,
      transparent 1px,
      transparent 20px
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 10px rgba(87, 242, 255, .14),
    0 0 14px rgba(80, 255, 173, .16) !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  color: #eaffff !important;
  text-shadow: 0 0 8px rgba(91, 255, 210, .62) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#screen-battle .zg-live-stat-card span {
  display: block !important;
  font-size: 9px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  opacity: .86 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

#screen-battle .zg-live-stat-card strong {
  display: block !important;
  margin-top: 3px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 1000 !important;
  color: #ffffff !important;
  white-space: nowrap !important;
}

#screen-battle .zg-live-stat-card strong.is-low {
  color: #ffe05f !important;
  text-shadow: 0 0 10px rgba(255, 224, 95, .72) !important;
}

#screen-battle .zg-live-stat-card strong.is-critical {
  color: #ff4b68 !important;
  text-shadow: 0 0 12px rgba(255, 44, 92, .8) !important;
  animation: zgLiveStatCritical 520ms ease-in-out infinite alternate !important;
}

#screen-battle .zg-live-stat-player {
  border-color: rgba(87, 242, 255, .68) !important;
}

#screen-battle .zg-live-stat-enemy {
  border-color: rgba(255, 104, 132, .68) !important;
}

@keyframes zgLiveStatCritical {
  from {
    transform: scale(1);
    filter: brightness(1);
  }

  to {
    transform: scale(1.06);
    filter: brightness(1.3);
  }
}

@media (max-width: 520px) {
  #screen-battle .zg-battle-live-stats {
    column-gap: 12px !important;
    margin: 5px auto 7px !important;
    padding: 0 10px !important;
  }

  #screen-battle .zg-live-side {
    gap: 6px !important;
  }

  #screen-battle .zg-live-stat-card {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 11px !important;
  }

  #screen-battle .zg-live-stat-card span {
    font-size: 8px !important;
  }

  #screen-battle .zg-live-stat-card strong {
    font-size: 15px !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 390px) {
  #screen-battle .zg-battle-live-stats {
    column-gap: 8px !important;
    padding: 0 7px !important;
  }

  #screen-battle .zg-live-side {
    gap: 5px !important;
  }

  #screen-battle .zg-live-stat-card {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  #screen-battle .zg-live-stat-card span {
    font-size: 7px !important;
  }

  #screen-battle .zg-live-stat-card strong {
    font-size: 14px !important;
  }
}

/*
 * =========================================================
 * BATTLE HP ENERGY GLOW PATCH
 * 我方 / 敵方能量發光與落後方紅色閃動
 * =========================================================
 */

/* 能量列基礎發光 */
.zg-hp-row {
  position: relative;
  isolation: isolate;
  transition:
    filter 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

/* 能量列背後光暈 */
.zg-hp-row::before {
  content: "";
  position: absolute;
  inset: -8px -10px;
  border-radius: 999px;
  opacity: 0.62;
  pointer-events: none;
  z-index: -1;
  filter: blur(12px);
  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}

/* 我方藍綠能量光 */
.zg-hp-player-row::before {
  background:
    radial-gradient(circle at 28% 50%,
      rgba(72, 242, 255, 0.55),
      rgba(6, 199, 85, 0.22) 45%,
      transparent 72%);
}

/* 敵方橘紫能量光 */
.zg-hp-enemy-row::before {
  background:
    radial-gradient(circle at 72% 50%,
      rgba(255, 70, 120, 0.46),
      rgba(155, 92, 255, 0.22) 45%,
      transparent 72%);
}

/* 能量條本身加強發光 */
.zg-hp-bar {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.12),
    0 0 16px rgba(87, 242, 255, 0.18);
}

.zg-hp-fill {
  position: relative;
  box-shadow:
    0 0 12px currentColor,
    0 0 24px rgba(255, 255, 255, 0.22);
}

/* 能量條掃光 */
.zg-hp-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.68) 45%,
      transparent 76%
    );
  transform: translateX(-120%);
  opacity: 0.65;
  animation: zgHpEnergySweep 1.45s linear infinite;
  pointer-events: none;
}

@keyframes zgHpEnergySweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(130%);
  }
}

/* 我方能量色 */
.zg-player-hp {
  color: #57f2ff;
  background:
    linear-gradient(90deg, #06c755, #57f2ff, #ffffff);
}

/* 敵方能量色 */
.zg-enemy-hp {
  color: #ff4b7b;
  background:
    linear-gradient(90deg, #ff315f, #ff9b35, #fff06a);
}

/* 落後方：整列紅色閃動 */
.zg-hp-row.is-losing-energy {
  animation: zgLosingEnergyRowPulse 0.46s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 8px rgba(255, 31, 72, 0.92))
    drop-shadow(0 0 18px rgba(255, 31, 72, 0.62));
}

.zg-hp-row.is-losing-energy::before {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 31, 72, 0.95),
      rgba(255, 0, 0, 0.45) 42%,
      transparent 76%);
  transform: scale(1.06);
}

.zg-hp-row.is-losing-energy .zg-hp-bar {
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, 0.18),
    0 0 18px rgba(255, 31, 72, 0.86),
    0 0 34px rgba(255, 31, 72, 0.48);
  border-color: rgba(255, 70, 90, 0.88);
}

.zg-hp-row.is-losing-energy .zg-hp-fill {
  background:
    linear-gradient(90deg, #6f0000, #ff1f48, #ff9cae);
  color: #ff1f48;
  box-shadow:
    0 0 14px rgba(255, 31, 72, 0.95),
    0 0 30px rgba(255, 31, 72, 0.6);
}

.zg-hp-row.is-losing-energy .zg-hp-text,
.zg-hp-row.is-losing-energy .zg-hp-name {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 31, 72, 0.95),
    0 0 16px rgba(255, 31, 72, 0.8);
}

@keyframes zgLosingEnergyRowPulse {
  0% {
    transform: translateZ(0) scale(1);
    opacity: 0.88;
  }

  100% {
    transform: translateZ(0) scale(1.018);
    opacity: 1;
  }
}

/* 優勢方：微亮，不閃太大 */
.zg-hp-row.is-winning-energy {
  filter:
    drop-shadow(0 0 6px rgba(87, 242, 255, 0.38));
}

.zg-hp-row.is-winning-energy::before {
  opacity: 0.72;
}

/* 低能量狀態 */
.zg-hp-row.is-low .zg-hp-bar,
.zg-hp-bar.is-low {
  box-shadow:
    inset 0 0 10px rgba(255, 255, 255, 0.13),
    0 0 16px rgba(255, 170, 30, 0.72);
}

/* 危急能量狀態 */
.zg-hp-row.is-critical {
  animation: zgCriticalEnergyPulse 0.34s ease-in-out infinite alternate;
}

.zg-hp-row.is-critical::before {
  opacity: 1;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 0, 42, 0.98),
      rgba(255, 90, 0, 0.48) 45%,
      transparent 78%);
}

.zg-hp-row.is-critical .zg-hp-fill,
.zg-hp-fill.is-critical {
  background:
    linear-gradient(90deg, #4b0000, #ff0035, #ffffff);
  color: #ff0035;
  box-shadow:
    0 0 18px rgba(255, 0, 53, 1),
    0 0 38px rgba(255, 0, 53, 0.7);
}

@keyframes zgCriticalEnergyPulse {
  0% {
    filter:
      drop-shadow(0 0 8px rgba(255, 0, 53, 0.72));
  }

  100% {
    filter:
      drop-shadow(0 0 16px rgba(255, 0, 53, 1))
      drop-shadow(0 0 30px rgba(255, 0, 53, 0.65));
  }
}

.zg-live-side {
  transition:
    filter 0.18s ease,
    transform 0.18s ease;
}

.zg-live-side.is-losing-energy {
  animation: zgLiveLosingEnergyPulse 0.46s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 8px rgba(255, 31, 72, 0.92))
    drop-shadow(0 0 18px rgba(255, 31, 72, 0.55));
}

.zg-live-side.is-losing-energy .zg-live-stat-card {
  border-color: rgba(255, 31, 72, 0.86);
  background:
    linear-gradient(180deg, rgba(255, 31, 72, 0.42), rgba(65, 0, 14, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 18px rgba(255,31,72,.58);
}

.zg-live-side.is-losing-energy strong {
  color: #fff;
  text-shadow:
    0 0 8px rgba(255, 31, 72, 1),
    0 0 16px rgba(255, 31, 72, .75);
}

@keyframes zgLiveLosingEnergyPulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.018);
    opacity: 1;
  }
}

/*
 * =========================================================
 * BATTLE LIVE STATS WARNING GLOW
 * 戰鬥即時數值：能量落後方紅色閃動
 * =========================================================
 */

.zg-battle-live-stats {
  position: relative;
  z-index: 60;
}

/* 左右兩組：你方 / 敵方 */
.zg-live-side {
  position: relative;
  transition:
    filter 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

/* 即時數值卡基礎發光 */
.zg-live-stat-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease,
    transform 0.18s ease;
}

/* 卡片內掃光 */
.zg-live-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.16) 45%,
      transparent 78%
    );

  transform: translateX(-120%);
  animation: zgLiveStatSweep 1.8s linear infinite;
}

@keyframes zgLiveStatSweep {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(130%);
  }
}

/* 你方卡片平常偏藍綠光 */
.zg-live-stat-player {
  border-color: rgba(87, 242, 255, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(87, 242, 255, 0.32),
    0 0 24px rgba(6, 199, 85, 0.14) !important;
}

/* 敵方卡片平常偏紅紫光 */
.zg-live-stat-enemy {
  border-color: rgba(255, 75, 123, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 12px rgba(255, 75, 123, 0.3),
    0 0 24px rgba(155, 92, 255, 0.14) !important;
}

/*
 * 能量落後方：整組閃紅光
 * 這會讓「你方能量 + 你方轉速」或「敵方能量 + 敵方轉速」一起閃。
 */
.zg-live-side.is-losing-energy {
  animation: zgLiveSideLosingPulse 0.42s ease-in-out infinite alternate;
  filter:
    drop-shadow(0 0 8px rgba(255, 0, 48, 0.95))
    drop-shadow(0 0 18px rgba(255, 0, 48, 0.7))
    drop-shadow(0 0 34px rgba(255, 0, 48, 0.42));
}

.zg-live-side.is-losing-energy .zg-live-stat-card {
  border-color: rgba(255, 28, 66, 1) !important;

  background:
    linear-gradient(
      180deg,
      rgba(120, 0, 24, 0.88),
      rgba(48, 0, 14, 0.94)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 18px rgba(255, 54, 86, 0.24),
    0 0 14px rgba(255, 0, 48, 0.9),
    0 0 30px rgba(255, 0, 48, 0.62),
    0 0 48px rgba(255, 0, 48, 0.35) !important;
}

/* 落後方：標題文字變紅光 */
.zg-live-side.is-losing-energy .zg-live-stat-card span {
  color: #ffb8c4 !important;
  text-shadow:
    0 0 6px rgba(255, 0, 48, 0.95),
    0 0 12px rgba(255, 0, 48, 0.65);
}

/* 落後方：百分比變紅 / 白紅發光 */
.zg-live-side.is-losing-energy .zg-live-stat-card strong {
  color: #ffffff !important;
  text-shadow:
    0 0 6px rgba(255, 0, 48, 1),
    0 0 14px rgba(255, 0, 48, 0.95),
    0 0 28px rgba(255, 0, 48, 0.72);
}

/* 落後方卡片掃光變紅 */
.zg-live-side.is-losing-energy .zg-live-stat-card::after {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 30%,
      rgba(255, 30, 70, 0.58) 50%,
      rgba(255, 255, 255, 0.1) 70%,
      transparent 100%
    );

  animation-duration: 0.8s;
}

/* 落後方整組脈衝 */
@keyframes zgLiveSideLosingPulse {
  0% {
    transform: scale(1);
    opacity: 0.88;
  }

  100% {
    transform: scale(1.025);
    opacity: 1;
  }
}

/*
 * 能量危急：單卡更劇烈閃動
 * 例如「你方能量 15% 以下」時，能量那張卡會更紅。
 */
.zg-live-stat-card.is-critical {
  animation: zgLiveCardCriticalPulse 0.28s ease-in-out infinite alternate;
  border-color: rgba(255, 0, 48, 1) !important;
}

.zg-live-stat-card.is-critical strong {
  color: #ffffff !important;
  text-shadow:
    0 0 8px rgba(255, 0, 48, 1),
    0 0 18px rgba(255, 0, 48, 0.95),
    0 0 32px rgba(255, 0, 48, 0.75);
}

@keyframes zgLiveCardCriticalPulse {
  0% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 0 16px rgba(255, 0, 48, 0.82),
      0 0 30px rgba(255, 0, 48, 0.52);
  }

  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 0 24px rgba(255, 0, 48, 1),
      0 0 52px rgba(255, 0, 48, 0.72);
  }
}

/* 優勢方微亮即可，不要搶落後方視覺 */
.zg-live-side.is-winning-energy {
  filter:
    drop-shadow(0 0 6px rgba(87, 242, 255, 0.25));
}

.zg-live-side.is-winning-energy .zg-live-stat-card {
  opacity: 0.96;
}

/* 平手 / 差距很小時恢復正常 */
.zg-live-side.is-energy-equal {
  filter: none;
}


/*
 * =========================================================
 * BATTLE TO RESULT VIDEO TRANSITION
 * 戰鬥結束銜接結果影片轉場
 * =========================================================
 */

.zg-battle-video-transition {
  position: fixed;
  inset: 0;
  z-index: 1000002;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 255, 255, 0.18),
      rgba(255, 0, 48, 0.22) 22%,
      rgba(10, 6, 20, 0.92) 62%,
      #000 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.04);
}

.zg-battle-video-transition.is-active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  animation: zgBattleVideoTransitionIn 0.42s ease-out both;
}

.zg-battle-video-transition.is-fadeout {
  visibility: visible;
  opacity: 0;
  transform: scale(1.035);
  animation: zgBattleVideoTransitionOut 0.42s ease-in both;
}

.zg-battle-video-transition-core {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(255, 224, 95, 0.78) 20%,
      rgba(255, 0, 48, 0.38) 42%,
      transparent 70%);
  filter: blur(8px);
  animation: zgBattleVideoTransitionCore 0.7s ease-in-out infinite alternate;
}

.zg-battle-video-transition-text {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: clamp(42px, 12vw, 96px);
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 10px rgba(255, 255, 255, 0.92),
    0 0 22px rgba(255, 0, 48, 0.9),
    0 0 46px rgba(255, 0, 48, 0.68);
  transform: skewX(-8deg);
}

@keyframes zgBattleVideoTransitionIn {
  0% {
    opacity: 0;
    transform: scale(1.14);
    filter: blur(8px);
  }

  65% {
    opacity: 1;
    transform: scale(0.985);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes zgBattleVideoTransitionOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(8px);
  }
}

@keyframes zgBattleVideoTransitionCore {
  0% {
    transform: scale(0.88) rotate(0deg);
    opacity: 0.72;
  }

  100% {
    transform: scale(1.18) rotate(18deg);
    opacity: 1;
  }
}

/* =========================================================
 * BOOSTED MOTION TRAIL / 強化陀螺拖尾
 * ========================================================= */

.zg-motion-trail {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 80px;
  height: 10px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 34;
  transform-origin: 100% 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad))
    scaleX(var(--trail-scale, 1));
  opacity: .38;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--c1, #00eaff) 20%, transparent) 14%,
      color-mix(in srgb, var(--c1, #00eaff) 72%, transparent) 45%,
      color-mix(in srgb, var(--c2, #fff06a) 88%, transparent) 76%,
      rgba(255,255,255,.96) 100%
    );
  filter:
    drop-shadow(0 0 8px var(--c1, #00eaff))
    drop-shadow(0 0 16px var(--c2, #fff06a));
  animation: zgMotionTrailBoostFade 360ms ease-out forwards;
  will-change: transform, opacity, filter;
}

.zg-motion-trail::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 78% 50%,
      color-mix(in srgb, var(--c2, #fff06a) 80%, transparent) 0%,
      color-mix(in srgb, var(--c1, #00eaff) 34%, transparent) 38%,
      transparent 76%
    );
  opacity: .72;
  filter: blur(8px);
}

.zg-motion-trail::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translateY(-50%);
  background:
    radial-gradient(
      circle,
      #fff 0%,
      var(--c2, #fff06a) 32%,
      var(--c1, #00eaff) 62%,
      transparent 76%
    );
  box-shadow:
    0 0 10px var(--c2, #fff06a),
    0 0 20px var(--c1, #00eaff);
  opacity: .9;
}

.zg-motion-trail-boost.layer-2 {
  z-index: 33;
  opacity: .28;
  filter:
    drop-shadow(0 0 7px var(--c1, #00eaff))
    drop-shadow(0 0 12px var(--c2, #fff06a));
}

.zg-motion-trail-boost.layer-3 {
  z-index: 32;
  opacity: .2;
  filter:
    drop-shadow(0 0 5px var(--c1, #00eaff))
    drop-shadow(0 0 9px var(--c2, #fff06a));
}

.zg-player-trail {
  --c1: var(--c1, #00eaff);
  --c2: var(--c2, #fff06a);
}

.zg-enemy-trail {
  --c1: var(--c1, #ff345f);
  --c2: var(--c2, #ffef7a);
}

.zg-motion-trail-orb {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 35;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  background:
    radial-gradient(
      circle,
      #fff 0%,
      var(--c2, #fff06a) 34%,
      var(--c1, #00eaff) 68%,
      transparent 78%
    );
  box-shadow:
    0 0 8px var(--c2, #fff06a),
    0 0 18px var(--c1, #00eaff),
    0 0 30px var(--c1, #00eaff);
  animation: zgMotionTrailOrbFade 360ms ease-out forwards;
  will-change: transform, opacity;
}

@keyframes zgMotionTrailBoostFade {
  0% {
    opacity: .68;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(calc(var(--trail-scale, 1) * 1.05))
      scaleY(1);
    filter:
      drop-shadow(0 0 10px var(--c1, #00eaff))
      drop-shadow(0 0 22px var(--c2, #fff06a));
  }

  58% {
    opacity: .34;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      scaleX(calc(var(--trail-scale, 1) * .72))
      scaleY(.42);
    filter:
      drop-shadow(0 0 4px var(--c1, #00eaff))
      drop-shadow(0 0 8px var(--c2, #fff06a));
  }
}

@keyframes zgMotionTrailOrbFade {
  0% {
    opacity: .95;
    transform: translate(-50%, -50%) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.45);
  }
}

/* =========================================================
 * XTREME DASH TRAIL / 爆衝拖尾
 * ========================================================= */

.zg-xtreme-dash-trail,
.zg-xtreme-dash-bolt,
.zg-xtreme-dash-orb,
.zg-xtreme-dash-shock,
.zg-xtreme-dash-flare {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

.zg-xtreme-dash-trail {
  z-index: 36;
  border-radius: 999px;
  transform-origin: 100% 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad))
    skewX(-12deg)
    scaleX(1);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,0) 8%,
      var(--c1, #00eaff) 36%,
      var(--c2, #fff06a) 68%,
      #fff 100%
    );
  opacity: .76;
  filter:
    drop-shadow(0 0 10px var(--c1, #00eaff))
    drop-shadow(0 0 22px var(--c2, #fff06a))
    drop-shadow(0 0 34px var(--c1, #00eaff));
  animation: zgXtremeDashTrail 430ms cubic-bezier(.16,.84,.28,1) forwards;
}

.zg-xtreme-dash-trail::before {
  content: "";
  position: absolute;
  inset: -12px -18px;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse at 78% 50%,
      rgba(255,255,255,.9) 0%,
      var(--c2, #fff06a) 22%,
      var(--c1, #00eaff) 48%,
      transparent 78%
    );
  opacity: .48;
  filter: blur(12px);
}

.zg-xtreme-dash-trail::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  transform: translateY(-50%);
  background:
    radial-gradient(
      circle,
      #fff 0%,
      var(--c2, #fff06a) 26%,
      var(--c1, #00eaff) 58%,
      transparent 76%
    );
  box-shadow:
    0 0 12px #fff,
    0 0 24px var(--c2, #fff06a),
    0 0 44px var(--c1, #00eaff);
  opacity: .95;
}

/* 閃電裂痕 */
.zg-xtreme-dash-bolt {
  z-index: 37;
  height: 4px;
  border-radius: 999px;
  transform-origin: 100% 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--rot, 0rad))
    skewX(-28deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--c1, #00eaff) 28%,
      #fff 58%,
      var(--c2, #fff06a) 78%,
      transparent 100%
    );
  opacity: .9;
  filter:
    drop-shadow(0 0 7px var(--c1, #00eaff))
    drop-shadow(0 0 14px var(--c2, #fff06a));
  animation: zgXtremeDashBolt 320ms ease-out forwards;
}

.zg-xtreme-dash-bolt::before,
.zg-xtreme-dash-bolt::after {
  content: "";
  position: absolute;
  right: 28%;
  top: 50%;
  width: 32%;
  height: 3px;
  border-radius: 999px;
  background: inherit;
  transform-origin: 100% 50%;
  filter: inherit;
}

.zg-xtreme-dash-bolt::before {
  transform: translateY(-50%) rotate(34deg);
}

.zg-xtreme-dash-bolt::after {
  transform: translateY(-50%) rotate(-29deg);
}

/* 尾端爆點 */
.zg-xtreme-dash-orb {
  z-index: 38;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle,
      #fff 0%,
      var(--c2, #fff06a) 28%,
      var(--c1, #00eaff) 62%,
      transparent 78%
    );
  box-shadow:
    0 0 10px #fff,
    0 0 22px var(--c2, #fff06a),
    0 0 42px var(--c1, #00eaff);
  animation: zgXtremeDashOrb 430ms ease-out forwards;
}

/* 陀螺身旁爆光 */
.zg-xtreme-dash-flare {
  z-index: 35;
  width: 74px;
  height: 74px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.72) 0%,
      var(--c2, #fff06a) 18%,
      var(--c1, #00eaff) 44%,
      transparent 72%
    );
  opacity: .48;
  filter:
    blur(3px)
    drop-shadow(0 0 16px var(--c1, #00eaff));
  animation: zgXtremeDashFlare 360ms ease-out forwards;
}

/* 極速震波 */
.zg-xtreme-dash-shock {
  z-index: 31;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  transform:
    translate(-50%, -50%)
    scale(var(--shock-scale, 1));
  border: 3px solid var(--c2, #fff06a);
  box-shadow:
    0 0 18px var(--c2, #fff06a),
    inset 0 0 18px var(--c1, #00eaff),
    0 0 42px var(--c1, #00eaff);
  opacity: .72;
  animation: zgXtremeDashShock 420ms ease-out forwards;
}

.zg-xtreme-dash-shock::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.82);
  opacity: .85;
}

/* 玩家 / 敵方可額外覆蓋 */
.zg-player-trail {
  --c1: var(--c1, #00eaff);
  --c2: var(--c2, #fff06a);
}

.zg-enemy-trail {
  --c1: var(--c1, #ff2b5f);
  --c2: var(--c2, #ffef7a);
}

@keyframes zgXtremeDashTrail {
  0% {
    opacity: .92;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      skewX(-14deg)
      scaleX(1.08)
      scaleY(1.12);
    filter:
      drop-shadow(0 0 12px #fff)
      drop-shadow(0 0 26px var(--c2, #fff06a))
      drop-shadow(0 0 46px var(--c1, #00eaff));
  }

  52% {
    opacity: .48;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      skewX(-8deg)
      scaleX(.58)
      scaleY(.42);
    filter:
      drop-shadow(0 0 5px var(--c1, #00eaff))
      drop-shadow(0 0 10px var(--c2, #fff06a));
  }
}

@keyframes zgXtremeDashBolt {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      skewX(-30deg)
      scaleX(1.05);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot, 0rad))
      skewX(-18deg)
      scaleX(.48)
      translateX(-16px);
  }
}

@keyframes zgXtremeDashOrb {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.25);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35);
  }
}

@keyframes zgXtremeDashFlare {
  0% {
    opacity: .58;
    transform: translate(-50%, -50%) scale(.62);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes zgXtremeDashShock {
  0% {
    opacity: .72;
    transform:
      translate(-50%, -50%)
      scale(calc(var(--shock-scale, 1) * .55));
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(calc(var(--shock-scale, 1) * 1.7));
  }
}

.zg-result-score-delta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 950;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.zg-result-score-delta.is-plus {
  color: #102414;
  background: linear-gradient(180deg, #7dff9c, #18d85f);
  box-shadow:
    0 0 14px rgba(24,216,95,.32),
    inset 0 1px 0 rgba(255,255,255,.45);
}

.zg-result-score-delta.is-minus {
  color: #fff;
  background: linear-gradient(180deg, #ff6d7e, #e6002d);
  box-shadow:
    0 0 16px rgba(230,0,45,.38),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.zg-result-score-delta.is-zero {
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.12);
}

.zg-result-current-score {
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-weight: 950;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

#screen-result .zg-result-actions {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
  z-index: 120 !important;
  pointer-events: auto !important;
}

#screen-result .zg-result-main {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
}

.zg-invite-mission-card {
  width: 100%;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,44,91,.92), rgba(25,34,76,.9));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 24px rgba(0,0,0,.24);
  box-sizing: border-box;
}

.zg-invite-mission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zg-invite-mission-title {
  color: rgba(255,255,255,.62);
  font-weight: 850;
}

.zg-invite-mission-status {
  color: #ffef75;
  font-weight: 950;
}

.zg-invite-mission-progress {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
}

.zg-invite-mission-line {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: rgba(91,104,166,.52);
  border-radius: 999px;
  overflow: hidden;
  z-index: 1;
}

.zg-invite-mission-line-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #58ec86, #ffe05f);
  border-radius: 999px;
  transition: width .28s ease;
}

.zg-invite-mission-node {
  position: relative;
  z-index: 2;
}

.zg-invite-mission-node.is-unlocked {
  background: linear-gradient(180deg, #fff27a, #f6b835) !important;
  color: #251b06 !important;
  box-shadow: 0 0 14px rgba(255,224,95,.35), inset 0 1px 0 rgba(255,255,255,.5) !important;
}


.zg-reward-banner-root {
  width: 100%;
  margin: 16px auto 28px;
}

.zg-reward-banner {
  margin: 18px auto 28px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(87, 242, 255, 0.25), transparent 34%),
    linear-gradient(135deg, rgba(12, 18, 38, 0.96), rgba(43, 12, 68, 0.94));
  border: 1px solid rgba(125, 246, 255, 0.32);
  box-shadow:
    0 0 24px rgba(87, 242, 255, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.06);
  color: #fff;
}

.zg-reward-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.zg-reward-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #57f2ff;
  font-weight: 800;
}

.zg-reward-header h3 {
  margin: 4px 0;
  font-size: 22px;
  line-height: 1.15;
}

.zg-reward-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.zg-reward-score-box {
  min-width: 92px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.zg-reward-score-box span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
}

.zg-reward-score-box strong {
  display: block;
  font-size: 26px;
  color: #ffd45a;
}

.zg-reward-score-box em {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-style: normal;
  color: #06c755;
  font-weight: 800;
}

.zg-reward-next {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 212, 90, 0.1);
  border: 1px solid rgba(255, 212, 90, 0.25);
}

.zg-reward-next span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.zg-reward-next strong {
  display: block;
  color: #ffd45a;
  margin-top: 2px;
}

.zg-reward-next em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}

.zg-reward-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.zg-reward-card {
  position: relative;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.zg-reward-card-available {
  border-color: rgba(6, 199, 85, 0.75);
  box-shadow: 0 0 18px rgba(6, 199, 85, 0.16);
}

.zg-reward-card-claimed {
  border-color: rgba(255, 212, 90, 0.75);
  box-shadow: 0 0 18px rgba(255, 212, 90, 0.15);
}

.zg-reward-card-locked {
  opacity: 0.72;
}

.zg-reward-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.zg-reward-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(87, 242, 255, 0.14);
  color: #57f2ff;
  font-size: 11px;
  font-weight: 800;
}

.zg-reward-points {
  color: #ffd45a;
  font-size: 12px;
  font-weight: 800;
}

.zg-reward-name {
  margin: 0 0 6px;
  font-size: 16px;
}

.zg-reward-desc {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.zg-reward-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 8px;
}

.zg-reward-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #06c755, #57f2ff);
  transition: width 0.25s ease;
}

.zg-reward-status {
  margin-bottom: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.zg-reward-code {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 13px;
}

.zg-reward-code strong {
  color: #ffd45a;
  letter-spacing: 0.08em;
}

.zg-reward-btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  color: #08111f;
  background: linear-gradient(135deg, #57f2ff, #ffd45a);
  cursor: pointer;
}

.zg-reward-btn-primary {
  background: linear-gradient(135deg, #06c755, #57f2ff);
}

.zg-reward-btn-claimed {
  background: linear-gradient(135deg, #ffd45a, #ff8a00);
  cursor: default;
}

.zg-reward-btn-disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.12);
}

@media (min-width: 720px) {
  .zg-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .zg-reward-header {
    align-items: stretch;
    flex-direction: column;
  }

  .zg-reward-score-box {
    width: 100%;
  }
}

html,
body {
  min-height: 100%;
}

body.zg-result-scroll-unlock,
body.zg-result-scroll-unlock html {
  overflow-y: auto !important;
  height: auto !important;
}

.zg-screen-result,
#zg-screen-result,
[data-screen="result"],
.zg-result-screen {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 150px !important;
}

.zg-result-main,
.zg-result-content,
.zg-result-body,
.zg-result-extra {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

.zg-reward-banner-root {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 18px auto 150px;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* =========================================================
   ZELO Result Scroll Unlock
   ========================================================= */

html.zg-result-scroll-unlock,
body.zg-result-scroll-unlock {
  overflow-y: auto !important;
  height: auto !important;
}

.zg-screen-result,
#zg-screen-result,
[data-screen="result"],
.zg-result-screen {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  -webkit-overflow-scrolling: touch !important;
  padding-bottom: 180px !important;
}

.zg-result-main,
.zg-result-content,
.zg-result-body,
.zg-result-extra,
.zg-result-panel,
.zg-result-section {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* =========================================================
   ZELO Reward Banner
   ========================================================= */

.zg-reward-banner-root {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 18px auto 180px;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

.zg-reward-banner {
  margin: 0 auto;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(87, 242, 255, 0.25), transparent 34%),
    linear-gradient(135deg, rgba(12, 18, 38, 0.98), rgba(46, 16, 75, 0.96));
  border: 1px solid rgba(125, 246, 255, 0.36);
  box-shadow:
    0 0 24px rgba(87, 242, 255, 0.18),
    inset 0 0 18px rgba(255, 255, 255, 0.06);
  color: #fff;
}

.zg-reward-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.zg-reward-kicker {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #57f2ff;
  font-weight: 900;
}

.zg-reward-header h3 {
  margin: 4px 0;
  font-size: 21px;
  line-height: 1.15;
  color: #ffffff;
  font-weight: 900;
}

.zg-reward-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.45;
}

.zg-reward-week-label {
  margin-top: 5px !important;
  color: #ffd45a !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.zg-reward-score-box {
  flex: 0 0 auto;
  min-width: 86px;
  padding: 9px 10px;
  border-radius: 17px;
  text-align: center;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.zg-reward-score-box span {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.74);
}

.zg-reward-score-box strong {
  display: block;
  font-size: 25px;
  line-height: 1.05;
  color: #ffd45a;
  text-shadow: 0 0 10px rgba(255, 212, 90, 0.24);
}

.zg-reward-score-box em {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-style: normal;
  color: #06c755;
  font-weight: 900;
}

.zg-reward-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.zg-reward-summary > div {
  padding: 9px 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
}

.zg-reward-summary span {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.zg-reward-summary strong {
  display: block;
  font-size: 12px;
  color: #ffffff;
  font-weight: 900;
}

.zg-reward-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.zg-reward-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.095);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
  overflow: hidden;
}

.zg-reward-card-available {
  border-color: rgba(6, 199, 85, 0.78) !important;
  box-shadow: 0 0 18px rgba(6, 199, 85, 0.16);
}

.zg-reward-card-claimed {
  border-color: rgba(255, 212, 90, 0.78) !important;
  box-shadow: 0 0 18px rgba(255, 212, 90, 0.16);
}

.zg-reward-card-locked {
  opacity: 0.9;
}

.zg-reward-product {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.zg-reward-product-image {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(87, 242, 255, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.zg-reward-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zg-reward-product-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 900;
}

.zg-reward-product-link-text {
  margin-top: 7px;
  padding: 5px 6px;
  border-radius: 999px;
  text-align: center;
  color: #57f2ff;
  background: rgba(87, 242, 255, 0.12);
  font-size: 10px;
  font-weight: 900;
}

.zg-reward-card-content {
  min-width: 0;
}

.zg-reward-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.zg-reward-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(87, 242, 255, 0.14);
  color: #57f2ff;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.zg-reward-limit {
  color: #ffd45a;
  font-size: 11px;
  font-weight: 900;
  text-align: right;
}

.zg-reward-name {
  margin: 0 0 5px;
  color: #ffffff !important;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.zg-reward-desc {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 11px;
  line-height: 1.45;
}

.zg-reward-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.zg-reward-meta-row span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 900;
}

.zg-reward-meta-row em {
  color: rgba(255, 212, 90, 0.9);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.zg-reward-progress {
  height: 7px;
  border-radius: 999px;
  margin-bottom: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.14);
}

.zg-reward-progress-bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #06c755, #57f2ff);
  transition: width 0.25s ease;
}

.zg-reward-status {
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 11px;
  line-height: 1.45;
}

.zg-reward-code {
  margin-bottom: 8px;
  padding: 7px 8px;
  border-radius: 11px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
}

.zg-reward-code strong {
  color: #ffd45a;
  letter-spacing: 0.06em;
}

.zg-reward-btn {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 9px 10px;
  font-size: 13px;
  font-weight: 900;
  color: #07111f;
  background: linear-gradient(135deg, #57f2ff, #ffd45a);
  cursor: pointer;
  text-shadow: none !important;
}

.zg-reward-btn-primary {
  color: #07111f !important;
  background: linear-gradient(135deg, #06c755, #57f2ff) !important;
  box-shadow: 0 0 18px rgba(6, 199, 85, 0.24);
}

.zg-reward-btn-claimed {
  color: #151006 !important;
  background: linear-gradient(135deg, #ffd45a, #ff8a00) !important;
  box-shadow: 0 0 18px rgba(255, 212, 90, 0.22);
  cursor: default;
}

.zg-reward-btn-disabled {
  color: rgba(255, 255, 255, 0.74) !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.17) !important;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .zg-reward-banner-root {
    padding-left: 8px;
    padding-right: 8px;
  }

  .zg-reward-banner {
    padding: 14px;
    border-radius: 22px;
  }

  .zg-reward-header {
    gap: 10px;
  }

  .zg-reward-score-box {
    min-width: 78px;
  }

  .zg-reward-summary {
    grid-template-columns: 1fr;
  }

  .zg-reward-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  .zg-reward-product-image {
    width: 88px;
    height: 88px;
  }

  .zg-reward-name {
    font-size: 14px;
  }

  .zg-reward-desc {
    font-size: 10.5px;
  }
}


#zelo-reward-banner,
.zg-reward-banner-root,
[data-zelo-reward-banner] {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 14px auto 24px;
  padding: 0 14px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  visibility: visible;
  opacity: 1;
}


#zelo-reward-banner .zg-reward-banner,
.zg-reward-banner-root .zg-reward-banner,
[data-zelo-reward-banner] .zg-reward-banner {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.zg-result-scroll-unlock {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100dvh;
  max-height: none !important;
  padding-bottom: 132px !important;
  -webkit-overflow-scrolling: touch;
}

/* Invite reward progress layout fix */
.zg-invite-reward,
.zg-invite-progress,
.zg-referral-progress,
.zg-invite-reward-card {
  box-sizing: border-box;
}

.zg-invite-reward {
  position: relative;
  width: 100%;
  margin: 18px auto 20px;
  padding: 22px 20px 26px;
  border-radius: 24px;
  overflow: hidden;
}

.zg-invite-reward-header,
.zg-invite-progress-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.zg-invite-reward-title,
.zg-invite-progress-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.88);
}

.zg-invite-reward-status,
.zg-invite-progress-status {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  color: #fff36d;
  white-space: nowrap;
}

.zg-invite-milestones,
.zg-invite-progress-steps,
.zg-referral-milestones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  padding: 12px 8px 6px;
}

.zg-invite-milestones::before,
.zg-invite-progress-steps::before,
.zg-referral-milestones::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 62px;
  height: 8px;
  border-radius: 999px;
  background: rgba(132, 152, 235, 0.42);
  z-index: 0;
}

.zg-invite-milestone,
.zg-invite-step,
.zg-referral-milestone {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 92px;
  padding: 14px 8px 12px;
  border-radius: 18px;
  background: rgba(86, 105, 174, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.zg-invite-milestone-icon,
.zg-invite-step-icon,
.zg-referral-milestone-icon {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 6px;
}

.zg-invite-milestone-count,
.zg-invite-step-count,
.zg-referral-milestone-count {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 4px;
}

.zg-invite-milestone-label,
.zg-invite-step-label,
.zg-referral-milestone-label {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.72);
  white-space: normal;
  word-break: keep-all;
}

/* Hide duplicated bottom labels if your old markup prints 1人/3人/5人 twice */
.zg-invite-milestone-extra,
.zg-invite-step-extra,
.zg-referral-milestone-extra,
.zg-invite-milestone small,
.zg-invite-step small,
.zg-referral-milestone small {
  display: none !important;
}

/* Invite reward progress v2 */
.zg-invite-reward {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 16px auto 20px;
  padding: 22px 20px 24px;
  border-radius: 24px;
  overflow: hidden;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 0% 0%, rgba(87, 242, 255, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(31, 44, 102, 0.96), rgba(24, 35, 78, 0.98));
  border: 1px solid rgba(114, 140, 255, 0.36);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.zg-invite-reward-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.zg-invite-reward-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
}

.zg-invite-reward-status {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 900;
  color: #fff36d;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(255, 243, 109, 0.22);
}

.zg-invite-progress-bar {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 112px;
  height: 8px;
  border-radius: 999px;
  background: rgba(132, 152, 235, 0.34);
  overflow: hidden;
  z-index: 0;
}

.zg-invite-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #27e6a2, #57f2ff);
  box-shadow: 0 0 16px rgba(87, 242, 255, 0.35);
}

.zg-invite-milestones {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  padding: 8px 4px 0;
}

.zg-invite-milestone {
  position: relative;
  min-width: 0;
  min-height: 96px;
  padding: 14px 8px 12px;
  border-radius: 18px;
  background: rgba(86, 105, 174, 0.76);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 8px 22px rgba(0, 0, 0, 0.12);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.zg-invite-milestone.is-unlocked {
  background:
    linear-gradient(135deg, rgba(39, 230, 162, 0.34), rgba(87, 242, 255, 0.22)),
    rgba(86, 105, 174, 0.76);
  border: 1px solid rgba(87, 242, 255, 0.34);
}

.zg-invite-milestone-icon {
  display: block;
  font-size: 18px;
  line-height: 1;
  margin-bottom: 7px;
}

.zg-invite-milestone-count {
  display: block;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 5px;
}

.zg-invite-milestone-label {
  display: block;
  font-size: 14px;
  line-height: 1.22;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.76);
  white-space: normal;
  word-break: keep-all;
}

.zg-invite-current-count {
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.68);
}

.zg-invite-current-count strong {
  color: #57f2ff;
  font-size: 16px;
}

/* Reward banner spacing fix */
#zelo-reward-banner,
.zg-reward-banner-root,
[data-zelo-reward-banner] {
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 14px auto 24px;
  padding: 0 14px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  visibility: visible;
  opacity: 1;
}

#zelo-reward-banner .zg-reward-banner,
.zg-reward-banner-root .zg-reward-banner,
[data-zelo-reward-banner] .zg-reward-banner {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.zg-result-scroll-unlock {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100dvh;
  max-height: none !important;
  padding-bottom: 132px !important;
  -webkit-overflow-scrolling: touch;
}


html body #zelo-liff-game #screen-battle .zg-battle-box,
html body #screen-battle .zg-battle-box,
body[data-zg-screen="battle"] #screen-battle .zg-battle-box {
  width: min(88vw, 460px) !important;
  height: min(88vw, 460px) !important;
  min-width: min(88vw, 460px) !important;
  min-height: min(88vw, 460px) !important;
  max-width: min(88vw, 460px) !important;
  max-height: min(88vw, 460px) !important;

  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  display: block !important;

  overflow: hidden !important;
  border-radius: 28px !important;

  background: #080b16 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* =========================================================
   ZELO Battle Arena Background Override
   新戰鬥盤背景修正版 v2
   目的：
   1. 移除舊底圖 / 舊圓形線條
   2. 只保留新版戰鬥盤圖片
   3. 放大新版戰鬥盤以貼合目前戰鬥圓形區域
   ========================================================= */

html body #zelo-liff-game #screen-battle .zg-battle-box,
html body #screen-battle .zg-battle-box,
body[data-zg-screen="battle"] #screen-battle .zg-battle-box {
  width: min(88vw, 460px) !important;
  height: min(88vw, 460px) !important;
  min-width: min(88vw, 460px) !important;
  min-height: min(88vw, 460px) !important;
  max-width: min(88vw, 460px) !important;
  max-height: min(88vw, 460px) !important;

  aspect-ratio: 1 / 1 !important;
  position: relative !important;
  display: block !important;

  overflow: hidden !important;
  border-radius: 28px !important;
  box-sizing: border-box !important;

  /*
   * 只使用新版戰鬥盤圖。
   * 122% = 放大背景圖，讓中間戰鬥盤更貼近目前圓形區域。
   * 如果還太小可改 126%。
   * 如果太大可改 116%。
   */
  background-color: transparent !important;
  background-image: url("https://cdn.shopify.com/s/files/1/0798/9844/4087/files/S.png?v=1785289063") !important;
  background-size: 122% 122% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  transform: none !important;
}

/* 移除 battle-box 自己的舊偽元素，避免舊底圖或舊圓形線條殘留 */
html body #zelo-liff-game #screen-battle .zg-battle-box::before,
html body #zelo-liff-game #screen-battle .zg-battle-box::after,
html body #screen-battle .zg-battle-box::before,
html body #screen-battle .zg-battle-box::after,
body[data-zg-screen="battle"] #screen-battle .zg-battle-box::before,
body[data-zg-screen="battle"] #screen-battle .zg-battle-box::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 隱藏原本 img，避免新圖變成左上角小圖 */
html body #zelo-liff-game #screen-battle .zg-arena-logo-img,
html body #screen-battle .zg-arena-logo-img,
body[data-zg-screen="battle"] #screen-battle .zg-arena-logo-img {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
 * 移除舊場地上層圓形線條。
 * 你截圖裡殘留的黃色大圓、虛線圓，
 * 很可能就是這層或它的偽元素。
 */
html body #zelo-liff-game #screen-battle .zg-arena-ring,
html body #screen-battle .zg-arena-ring,
body[data-zg-screen="battle"] #screen-battle .zg-arena-ring,
html body #zelo-liff-game #screen-battle .zg-arena-ring::before,
html body #zelo-liff-game #screen-battle .zg-arena-ring::after,
html body #screen-battle .zg-arena-ring::before,
html body #screen-battle .zg-arena-ring::after,
body[data-zg-screen="battle"] #screen-battle .zg-arena-ring::before,
body[data-zg-screen="battle"] #screen-battle .zg-arena-ring::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* 保留閃光特效 */
html body #zelo-liff-game #screen-battle .zg-flash-overlay,
html body #screen-battle .zg-flash-overlay,
body[data-zg-screen="battle"] #screen-battle .zg-flash-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 70 !important;
  pointer-events: none !important;
}

/* 陀螺一定要在背景上方 */
html body #zelo-liff-game #screen-battle .zg-battle-top,
html body #screen-battle .zg-battle-top,
body[data-zg-screen="battle"] #screen-battle .zg-battle-top {
  z-index: 46 !important;
}

html body #zelo-liff-game #screen-battle .zg-player-top,
html body #screen-battle .zg-player-top,
body[data-zg-screen="battle"] #screen-battle .zg-player-top {
  z-index: 47 !important;
}

/* =========================================================
 * RESULT ACTION BAR ALPHA FINAL OVERRIDE
 * Version: 202607291211-result-action-alpha-final
 *
 * 修正：
 * - 結果頁底部按鈕下方黑底太高
 * - 移除實心黑底感
 * - 改成低 alpha 漸層
 * - 降低 main 底部預留空間
 * ========================================================= */

/*
 * 1. 結果頁主內容底部不要留太高。
 * 原本 140px 會讓下方看起來像一整塊黑底。
 */
body[data-zg-screen="result"] #screen-result .zg-result-main,
#screen-result .zg-result-main {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 118px) !important;
}

/*
 * 小高度手機再壓低一點。
 */
@media screen and (max-height: 760px) {
  body[data-zg-screen="result"] #screen-result .zg-result-main,
  #screen-result .zg-result-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
  }
}

/*
 * 2. 結果頁底部按鈕區固定，但本體背景要透明。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-classic,
#screen-result .zg-result-actions,
#screen-result .zg-result-actions.zg-result-actions-classic {
  position: fixed !important;

  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px 12px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  z-index: 999999 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;

  isolation: isolate !important;
}

/*
 * 3. 用 before 做低 alpha 漸層。
 * 這個才是你要的「漸層 ALPHA」。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::before,
#screen-result .zg-result-actions::before {
  content: "" !important;

  position: absolute !important;

  left: -12px !important;
  right: -12px !important;

  /*
   * top 負值越小，黑霧越低。
   * 如果還覺得太高，改成 -18px。
   */
  top: -26px !important;

  bottom: calc(-8px - env(safe-area-inset-bottom, 0px)) !important;

  z-index: -1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(3, 6, 17, 0) 0%,
      rgba(3, 6, 17, 0.04) 18%,
      rgba(3, 6, 17, 0.12) 44%,
      rgba(3, 6, 17, 0.24) 72%,
      rgba(3, 6, 17, 0.34) 100%
    ) !important;

  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * 4. 關掉其他可能殘留的 after 黑遮罩。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::after,
#screen-result .zg-result-actions::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * 5. 按鈕本體維持在漸層上方。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-btn,
#screen-result .zg-result-actions .zg-btn {
  position: relative !important;
  z-index: 2 !important;

  width: 100% !important;
  min-width: 0 !important;

  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;

  margin: 0 !important;
  padding: 0 12px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 18px !important;

  font-size: 17px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;

  white-space: nowrap !important;

  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/*
 * 6. 如果有舊版 .zg-result-buttons / .zg-actions，
 * 在 result 頁不要讓它們產生額外黑底或 margin。
 */
body[data-zg-screen="result"] #screen-result .zg-result-buttons,
body[data-zg-screen="result"] #screen-result .zg-actions {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;

  box-shadow: none !important;
  border: 0 !important;

  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * 7. 結果頁背景底部不要太死黑，微微抬亮。
 */
body[data-zg-screen="result"] #screen-result,
#screen-result.zg-result-screen,
#screen-result.zg-screen {
  background:
    radial-gradient(circle at 50% 12%, rgba(108, 121, 170, 0.34), transparent 34%),
    radial-gradient(circle at 20% 4%, rgba(255, 64, 64, 0.12), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(87, 242, 255, 0.1), transparent 34%),
    linear-gradient(
      180deg,
      #17182a 0%,
      #101527 48%,
      #07111f 78%,
      #050b16 100%
    ) !important;
}




/* =========================================================
 * RESULT FULLSCREEN BACKGROUND FINAL
 * Version: 202607291224-result-fullscreen-bg
 *
 * 目的：
 * - 結果頁背景延伸到整個螢幕
 * - 底部按鈕後方不再出現實心黑底
 * - 用固定背景層取代區塊黑底
 * ========================================================= */

/*
 * 1. 結果頁建立獨立 stacking context。
 */
body[data-zg-screen="result"] #screen-result,
#screen-result.zg-result-screen,
#screen-result.zg-screen {
  position: relative !important;
  isolation: isolate !important;

  background: #07111f !important;

  overflow: hidden !important;
}

/*
 * 2. 全螢幕背景層。
 * 這層會鋪滿整個結果頁，包括底部按鈕後方。
 */
body[data-zg-screen="result"] #screen-result::before,
#screen-result.zg-result-screen::before,
#screen-result.zg-screen::before {
  content: "" !important;

  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  z-index: -2 !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 50% 6%, rgba(115, 128, 190, 0.52) 0%, rgba(115, 128, 190, 0.22) 24%, transparent 46%),
    radial-gradient(circle at 18% 0%, rgba(255, 74, 102, 0.18) 0%, transparent 34%),
    radial-gradient(circle at 84% 10%, rgba(87, 242, 255, 0.14) 0%, transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(35, 64, 120, 0.34) 0%, transparent 44%),
    linear-gradient(
      180deg,
      #17182a 0%,
      #11172a 36%,
      #0b1527 66%,
      #07111f 100%
    ) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/*
 * 3. 再加一層柔和暗角，避免全螢幕背景太平。
 */
body[data-zg-screen="result"] #screen-result::after,
#screen-result.zg-result-screen::after,
#screen-result.zg-screen::after {
  content: "" !important;

  position: fixed !important;
  inset: 0 !important;

  z-index: -1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.02) 48%,
      rgba(0, 0, 0, 0.08) 100%
    ) !important;
}

/*
 * 4. 結果頁主要內容透明，讓全螢幕背景露出。
 */
body[data-zg-screen="result"] #screen-result .zg-result-main,
#screen-result .zg-result-main,
.zg-result-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/*
 * 5. 結果頁所有大容器不要自己塞黑底。
 */
body[data-zg-screen="result"] .zg-result-screen,
body[data-zg-screen="result"] .zg-screen-result,
body[data-zg-screen="result"] .zg-result-content,
body[data-zg-screen="result"] .zg-result-body,
body[data-zg-screen="result"] .zg-result-extra,
body[data-zg-screen="result"] .zg-result-panel,
body[data-zg-screen="result"] .zg-result-section {
  background: transparent !important;
  background-color: transparent !important;
}

/*
 * 6. 底部按鈕容器透明。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions,
#screen-result .zg-result-actions,
.zg-result-actions {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  border: 0 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  isolation: isolate !important;
}

/*
 * 7. 底部只放非常低 alpha 的可讀性漸層。
 * 注意：這不是實心黑底。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::before,
#screen-result .zg-result-actions::before {
  content: "" !important;

  position: absolute !important;

  left: -12px !important;
  right: -12px !important;
  top: -20px !important;
  bottom: calc(-8px - env(safe-area-inset-bottom, 0px)) !important;

  z-index: -1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(7, 17, 31, 0) 0%,
      rgba(7, 17, 31, 0.04) 30%,
      rgba(7, 17, 31, 0.12) 68%,
      rgba(7, 17, 31, 0.20) 100%
    ) !important;

  box-shadow: none !important;
}

/*
 * 8. 關掉舊 after 遮罩。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::after,
#screen-result .zg-result-actions::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * 9. 降低底部預留空間，避免露出過大空白。
 */
body[data-zg-screen="result"] #screen-result .zg-result-main,
#screen-result .zg-result-main {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 116px) !important;
}

@media screen and (max-height: 760px) {
  body[data-zg-screen="result"] #screen-result .zg-result-main,
  #screen-result .zg-result-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 108px) !important;
  }
}

/* =========================================================
 * RESULT TRUE FULLSCREEN BACKGROUND HARD FIX
 * Version: 202607291224-result-bg-hard-fix
 *
 * 修正：
 * - 底部按鈕後方露出 #090612 / #030611 黑底
 * - 結果頁背景沒有延伸到 fixed actions 後方
 * - 統一 body / root / screen-result 背景
 * ========================================================= */

/*
 * 1. 結果頁所有父層都改成同一套背景。
 * 這一步很重要，因為底部黑色多半是父層露出。
 */
html:has(body[data-zg-screen="result"]),
body[data-zg-screen="result"],
body[data-zg-screen="result"] #zelo-liff-game,
body[data-zg-screen="result"] #zelo-liff-game.zg-clean-root,
body[data-zg-screen="result"] #zelo-liff-game.zg-app,
body[data-zg-screen="result"] .zg-clean-root {
  background:
    radial-gradient(circle at 50% 0%, rgba(117, 132, 190, 0.52) 0%, rgba(117, 132, 190, 0.22) 26%, transparent 48%),
    radial-gradient(circle at 20% 4%, rgba(255, 62, 110, 0.14) 0%, transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(87, 242, 255, 0.14) 0%, transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(38, 72, 132, 0.36) 0%, transparent 48%),
    linear-gradient(
      180deg,
      #171a2e 0%,
      #12182c 36%,
      #0d172a 64%,
      #091426 100%
    ) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/*
 * 2. 結果頁本體也用同一背景。
 * 不要只靠 ::before，因為某些 WebView 對 fixed pseudo-element 會怪。
 */
body[data-zg-screen="result"] #screen-result,
body[data-zg-screen="result"] #screen-result.zg-screen,
body[data-zg-screen="result"] #screen-result.zg-result-screen,
body[data-zg-screen="result"] .zg-result-screen,
body[data-zg-screen="result"] .zg-screen-result {
  position: relative !important;
  isolation: isolate !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(117, 132, 190, 0.52) 0%, rgba(117, 132, 190, 0.22) 26%, transparent 48%),
    radial-gradient(circle at 20% 4%, rgba(255, 62, 110, 0.14) 0%, transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(87, 242, 255, 0.14) 0%, transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(38, 72, 132, 0.36) 0%, transparent 48%),
    linear-gradient(
      180deg,
      #171a2e 0%,
      #12182c 36%,
      #0d172a 64%,
      #091426 100%
    ) !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  min-height: 100dvh !important;
}

/*
 * 3. 移除 result main 自己可能蓋的黑底。
 */
body[data-zg-screen="result"] #screen-result .zg-result-main,
body[data-zg-screen="result"] .zg-result-main,
#screen-result .zg-result-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  /*
   * 不要留 140 / 150px 那麼高。
   * 只保留按鈕高度 + safe area。
   */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 118px) !important;
}

/*
 * 4. 小高度手機底部再收一點。
 */
@media screen and (max-height: 760px) {
  body[data-zg-screen="result"] #screen-result .zg-result-main,
  body[data-zg-screen="result"] .zg-result-main,
  #screen-result .zg-result-main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 108px) !important;
  }
}

/*
 * 5. 所有結果頁內容容器透明。
 */
body[data-zg-screen="result"] .zg-result-content,
body[data-zg-screen="result"] .zg-result-body,
body[data-zg-screen="result"] .zg-result-extra,
body[data-zg-screen="result"] .zg-result-panel,
body[data-zg-screen="result"] .zg-result-section,
body[data-zg-screen="result"] .zg-result-scroll {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/*
 * 6. 底部按鈕區本體完全透明。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-classic,
body[data-zg-screen="result"] .zg-result-actions,
#screen-result .zg-result-actions {
  position: fixed !important;

  left: 12px !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  z-index: 999999 !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  isolation: isolate !important;
}

/*
 * 7. 底部只加一點點可讀性漸層。
 * 這個 top 不要太高，避免又變成黑底。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::before,
body[data-zg-screen="result"] .zg-result-actions::before,
#screen-result .zg-result-actions::before {
  content: "" !important;

  position: absolute !important;
  left: -12px !important;
  right: -12px !important;
  top: -14px !important;
  bottom: calc(-8px - env(safe-area-inset-bottom, 0px)) !important;

  z-index: -1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      180deg,
      rgba(9, 20, 38, 0) 0%,
      rgba(9, 20, 38, 0.03) 36%,
      rgba(9, 20, 38, 0.08) 70%,
      rgba(9, 20, 38, 0.14) 100%
    ) !important;

  box-shadow: none !important;
  opacity: 1 !important;
}

/*
 * 8. 關掉其他 after 黑遮罩。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::after,
body[data-zg-screen="result"] .zg-result-actions::after,
#screen-result .zg-result-actions::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/*
 * 9. 按鈕本體在最上層。
 */
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-btn,
body[data-zg-screen="result"] .zg-result-actions .zg-btn,
#screen-result .zg-result-actions .zg-btn {
  position: relative !important;
  z-index: 2 !important;
}


body[data-zg-screen="result"]::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 50% 100%, rgba(87, 242, 255, 0.22), transparent 46%),
    linear-gradient(180deg, rgba(20, 28, 52, 0.0), rgba(20, 42, 78, 0.34)) !important;
}

body[data-zg-screen="result"] #zelo-liff-game,
body[data-zg-screen="result"] #screen-result {
  position: relative !important;
  z-index: 1 !important;
}

/* =========================================================
 * RESULT ACTIONS NO OVERLAY FIX
 * Version: 202607291321-result-actions-no-overlay-final
 *
 * 目的：
 * - 保留底部 fixed buttons
 * - 保留按鈕高度與版型
 * - 移除 actions 本體背景
 * - 移除 before / after 黑霧遮罩
 * - 移除舊版底部 overlay 子元素
 * ========================================================= */

/* actions 本體完全透明 */
body[data-zg-screen="result"] #screen-result .zg-result-actions,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-alpha,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-classic,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-classic.zg-result-actions-alpha,
body[data-zg-screen="result"] .zg-result-actions,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-alpha,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-classic,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-classic.zg-result-actions-alpha,
#screen-result .zg-result-actions,
#screen-result .zg-result-actions.zg-result-actions-alpha,
#screen-result .zg-result-actions.zg-result-actions-classic,
#screen-result .zg-result-actions.zg-result-actions-classic.zg-result-actions-alpha {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  isolation: auto !important;
}

/* 關掉 actions 的 before / after 遮罩 */
body[data-zg-screen="result"] #screen-result .zg-result-actions::before,
body[data-zg-screen="result"] #screen-result .zg-result-actions::after,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-alpha::before,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-alpha::after,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-classic::before,
body[data-zg-screen="result"] #screen-result .zg-result-actions.zg-result-actions-classic::after,
body[data-zg-screen="result"] .zg-result-actions::before,
body[data-zg-screen="result"] .zg-result-actions::after,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-alpha::before,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-alpha::after,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-classic::before,
body[data-zg-screen="result"] .zg-result-actions.zg-result-actions-classic::after,
#screen-result .zg-result-actions::before,
#screen-result .zg-result-actions::after,
#screen-result .zg-result-actions.zg-result-actions-alpha::before,
#screen-result .zg-result-actions.zg-result-actions-alpha::after,
#screen-result .zg-result-actions.zg-result-actions-classic::before,
#screen-result .zg-result-actions.zg-result-actions-classic::after {
  display: none !important;
  content: none !important;

  opacity: 0 !important;
  visibility: hidden !important;

  pointer-events: none !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 關掉可能存在的舊版底部遮罩子元素 */
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-actions-bg,
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-actions-mask,
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-actions-overlay,
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-result-actions-bg,
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-result-actions-mask,
body[data-zg-screen="result"] #screen-result .zg-result-actions .zg-result-actions-overlay,
body[data-zg-screen="result"] .zg-result-actions .zg-actions-bg,
body[data-zg-screen="result"] .zg-result-actions .zg-actions-mask,
body[data-zg-screen="result"] .zg-result-actions .zg-actions-overlay,
body[data-zg-screen="result"] .zg-result-actions .zg-result-actions-bg,
body[data-zg-screen="result"] .zg-result-actions .zg-result-actions-mask,
body[data-zg-screen="result"] .zg-result-actions .zg-result-actions-overlay,
#screen-result .zg-result-actions .zg-actions-bg,
#screen-result .zg-result-actions .zg-actions-mask,
#screen-result .zg-result-actions .zg-actions-overlay,
#screen-result .zg-result-actions .zg-result-actions-bg,
#screen-result .zg-result-actions .zg-result-actions-mask,
#screen-result .zg-result-actions .zg-result-actions-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* 確保 main 不自己畫黑底，背景交給 #screen-result */
body[data-zg-screen="result"] #screen-result .zg-result-main,
body[data-zg-screen="result"] .zg-result-main,
#screen-result .zg-result-main {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* 隱藏結果頁 main scrollbar */
body[data-zg-screen="result"] #screen-result .zg-result-main,
body[data-zg-screen="result"] .zg-result-main,
#screen-result .zg-result-main {
  scrollbar-width: none !important;
}

body[data-zg-screen="result"] #screen-result .zg-result-main::-webkit-scrollbar,
body[data-zg-screen="result"] .zg-result-main::-webkit-scrollbar,
#screen-result .zg-result-main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* =========================================================
 * RESULT MAIN CLIP ABOVE ACTIONS FIX
 * Version: 202607291329-result-main-clip-above-actions
 *
 * 目的：
 * - main 不再渲染到 fixed bottom buttons 後面
 * - 移除底部按鈕位置的內容裁邊
 * ========================================================= */

body[data-zg-screen="result"] #screen-result {
  overflow: hidden !important;
}

body[data-zg-screen="result"] #screen-result .zg-result-main,
#screen-result .zg-result-main {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  scrollbar-width: none !important;
}

body[data-zg-screen="result"] #screen-result .zg-result-main::-webkit-scrollbar,
#screen-result .zg-result-main::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}


/* =========================================================
   ZELO Gacha Modal / 新井式迴轉抽籤器
   ========================================================= */

#zg-gacha-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.zg-gacha-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, .68) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.zg-gacha-panel {
  position: relative !important;
  width: min(560px, calc(100vw - 28px)) !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important;
  border-radius: 24px !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, #121b34 0%, #070d1d 100%) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,.55) !important;
  color: #fff !important;
  box-sizing: border-box !important;
}

.zg-gacha-close {
  position: sticky !important;
  top: 0 !important;
  margin-left: auto !important;
  display: flex !important;
  width: 38px !important;
  height: 38px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
  font-size: 25px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.zg-gacha-machine-header {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.zg-gacha-kicker {
  color: #57f2ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  margin-bottom: 6px !important;
}

.zg-gacha-machine-header h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
}

.zg-gacha-machine-header p {
  margin: 8px 0 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.zg-gacha-score {
  flex: 0 0 auto !important;
  min-width: 110px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  background: rgba(255,224,95,.14) !important;
  border: 1px solid rgba(255,224,95,.25) !important;
  text-align: right !important;
  box-sizing: border-box !important;
}

.zg-gacha-score span {
  display: block !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
}

.zg-gacha-score strong {
  display: block !important;
  color: #ffe05f !important;
  font-size: 28px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

.zg-gacha-machine-stage {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.12), transparent 40%),
    rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-sizing: border-box !important;
}

.zg-gacha-machine-glow {
  position: absolute !important;
  inset: -30% !important;
  opacity: .34 !important;
  pointer-events: none !important;
  filter: blur(18px) !important;
}

.zg-gacha-machine-bronze .zg-gacha-machine-glow {
  background: radial-gradient(circle, rgba(205,127,50,.72), transparent 42%) !important;
}

.zg-gacha-machine-silver .zg-gacha-machine-glow {
  background: radial-gradient(circle, rgba(210,225,240,.72), transparent 42%) !important;
}

.zg-gacha-machine-gold .zg-gacha-machine-glow {
  background: radial-gradient(circle, rgba(255,205,64,.78), transparent 42%) !important;
}

.zg-gacha-machine-media-wrap {
  position: relative !important;
  min-height: 210px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 14px !important;
  z-index: 1 !important;
}

.zg-gacha-machine-media {
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  max-height: 240px !important;
  object-fit: contain !important;
  border-radius: 18px !important;
}

.zg-gacha-machine-placeholder {
  position: relative !important;
  width: 220px !important;
  height: 230px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.zg-gacha-machine-orb {
  position: absolute !important;
  top: 0 !important;
  width: 150px !important;
  height: 150px !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.85), rgba(255,255,255,.18) 26%, transparent 27%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,.05)) !important;
  border: 2px solid rgba(255,255,255,.28) !important;
  box-shadow: inset 0 0 30px rgba(255,255,255,.16), 0 16px 45px rgba(0,0,0,.38) !important;
  z-index: 2 !important;
}

.zg-gacha-machine-body {
  position: relative !important;
  width: 170px !important;
  height: 150px !important;
  border-radius: 28px 28px 22px 22px !important;
  z-index: 3 !important;
  box-shadow: inset 0 8px 16px rgba(255,255,255,.2), 0 16px 32px rgba(0,0,0,.36) !important;
}

.zg-gacha-machine-bronze .zg-gacha-machine-body,
.zg-gacha-pool-banner-bronze .zg-gacha-pool-metal {
  background: linear-gradient(180deg, #e2a56d, #9a5425) !important;
  color: #2b1200 !important;
}

.zg-gacha-machine-silver .zg-gacha-machine-body,
.zg-gacha-pool-banner-silver .zg-gacha-pool-metal {
  background: linear-gradient(180deg, #ffffff, #aeb8c8) !important;
  color: #1a2435 !important;
}

.zg-gacha-machine-gold .zg-gacha-machine-body,
.zg-gacha-pool-banner-gold .zg-gacha-pool-metal {
  background: linear-gradient(180deg, #ffe88a, #d69a17) !important;
  color: #271700 !important;
}

.zg-gacha-machine-window {
  position: absolute !important;
  left: 50% !important;
  top: 35px !important;
  transform: translateX(-50%) !important;
  width: 92px !important;
  height: 58px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.25) !important;
  border: 2px solid rgba(255,255,255,.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 1000 !important;
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.45) !important;
}

.zg-gacha-machine-handle {
  position: absolute !important;
  right: -28px !important;
  top: 58px !important;
  width: 48px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #f5f5f5 !important;
  box-shadow: 0 5px 12px rgba(0,0,0,.28) !important;
}

.zg-gacha-machine-handle::after {
  content: "" !important;
  position: absolute !important;
  right: -12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.zg-gacha-machine-base {
  width: 210px !important;
  height: 42px !important;
  margin-top: -6px !important;
  border-radius: 18px 18px 28px 28px !important;
  background: linear-gradient(180deg, #2b344d, #111827) !important;
  box-shadow: 0 14px 25px rgba(0,0,0,.35) !important;
  z-index: 1 !important;
}

.zg-gacha-selected-info {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgba(0,0,0,.2) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

.zg-gacha-selected-badge {
  display: inline-flex !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(87,242,255,.14) !important;
  color: #57f2ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  margin-bottom: 7px !important;
}

.zg-gacha-selected-info h4 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
}

.zg-gacha-selected-info p {
  margin: 7px 0 0 !important;
  color: rgba(255,255,255,.72) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.zg-gacha-selected-cost {
  flex: 0 0 auto !important;
  min-width: 82px !important;
  text-align: right !important;
}

.zg-gacha-selected-cost span,
.zg-gacha-selected-cost em {
  display: block !important;
  color: rgba(255,255,255,.65) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.zg-gacha-selected-cost strong {
  display: block !important;
  color: #ffe05f !important;
  font-size: 34px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  margin: 4px 0 !important;
}

.zg-gacha-selected-preview {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 12px !important;
}

.zg-gacha-selected-preview span {
  display: inline-flex !important;
  padding: 6px 9px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

.zg-gacha-shake-btn {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  min-height: 50px !important;
  margin-top: 14px !important;
  border-radius: 16px !important;
  border: 0 !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
}

.zg-gacha-shake-btn.is-ready {
  background: linear-gradient(180deg, #ffe05f, #ff9f1c) !important;
  color: #241500 !important;
  box-shadow: 0 12px 22px rgba(255,159,28,.28) !important;
}

.zg-gacha-shake-btn.is-disabled {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.42) !important;
  cursor: not-allowed !important;
}

.zg-gacha-shake-btn.is-shaking {
  animation: zgGachaButtonShake .45s linear infinite !important;
}

.zg-gacha-pool-banner-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.zg-gacha-pool-banner {
  width: 100% !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  padding: 12px !important;
  background: rgba(255,255,255,.075) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

.zg-gacha-pool-banner.is-selected {
  border-color: rgba(255,224,95,.55) !important;
  box-shadow: 0 0 18px rgba(255,224,95,.15) !important;
  background: rgba(255,255,255,.115) !important;
}

.zg-gacha-pool-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.zg-gacha-pool-metal {
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  box-shadow: inset 0 5px 10px rgba(255,255,255,.35), 0 8px 16px rgba(0,0,0,.25) !important;
}

.zg-gacha-pool-banner-left strong {
  display: block !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  line-height: 1.15 !important;
}

.zg-gacha-pool-banner-left em {
  display: block !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  margin-top: 3px !important;
}

.zg-gacha-pool-banner-right {
  flex: 0 0 auto !important;
  text-align: right !important;
}

.zg-gacha-pool-banner-right span {
  display: block !important;
  color: #ffe05f !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  line-height: 1.1 !important;
}

.zg-gacha-pool-banner-right small {
  display: block !important;
  color: rgba(255,255,255,.62) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  margin-top: 3px !important;
}

@keyframes zgGachaButtonShake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

@media (max-width: 460px) {
  .zg-gacha-machine-header {
    flex-direction: column !important;
  }

  .zg-gacha-score {
    width: 100% !important;
    text-align: left !important;
  }

  .zg-gacha-selected-info {
    flex-direction: column !important;
  }

  .zg-gacha-selected-cost {
    text-align: left !important;
  }
}

/* =========================================================
   ZELO Gacha Drawing Animation / 搖籤動畫
   ========================================================= */

.zg-gacha-panel.is-drawing {
  pointer-events: none !important;
}

.zg-gacha-machine-stage.is-drawing {
  animation: zgGachaStagePulse 1.2s ease-in-out infinite !important;
}

.zg-gacha-machine-stage.is-drawing .zg-gacha-machine-placeholder {
  animation: zgGachaMachineShake .22s linear infinite !important;
}

.zg-gacha-machine-stage.is-drawing .zg-gacha-machine-orb {
  animation: zgGachaOrbSpin .7s linear infinite !important;
}

.zg-gacha-machine-stage.is-drawing .zg-gacha-machine-handle {
  transform-origin: left center !important;
  animation: zgGachaHandleTurn .35s linear infinite !important;
}

.zg-gacha-machine-stage.is-drawing .zg-gacha-machine-glow {
  opacity: .62 !important;
  animation: zgGachaGlowPulse .55s ease-in-out infinite alternate !important;
}

.zg-gacha-machine-stage.is-drawing .zg-gacha-selected-info,
.zg-gacha-machine-stage.is-drawing .zg-gacha-selected-preview {
  opacity: .58 !important;
}

.zg-gacha-machine-draw-media {
  animation: zgGachaDrawMediaPop .4s ease-out both !important;
}

@keyframes zgGachaMachineShake {
  0% {
    transform: translateX(0) rotate(0deg);
  }

  20% {
    transform: translateX(-4px) rotate(-2deg);
  }

  40% {
    transform: translateX(4px) rotate(2deg);
  }

  60% {
    transform: translateX(-3px) rotate(-1.5deg);
  }

  80% {
    transform: translateX(3px) rotate(1.5deg);
  }

  100% {
    transform: translateX(0) rotate(0deg);
  }
}

@keyframes zgGachaOrbSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.04);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes zgGachaHandleTurn {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(28deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes zgGachaGlowPulse {
  0% {
    opacity: .32;
    filter: blur(16px);
  }

  100% {
    opacity: .78;
    filter: blur(26px);
  }
}

@keyframes zgGachaStagePulse {
  0% {
    box-shadow: 0 0 0 rgba(255,224,95,0);
  }

  50% {
    box-shadow: 0 0 32px rgba(255,224,95,.18);
  }

  100% {
    box-shadow: 0 0 0 rgba(255,224,95,0);
  }
}

@keyframes zgGachaDrawMediaPop {
  0% {
    opacity: 0;
    transform: scale(.92);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================
   ZELO Gacha Custom Dialog
   ========================================================= */

.zg-gacha-dialog-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 224, 95, .16), transparent 34%),
    rgba(3, 8, 20, .72) !important;
  backdrop-filter: blur(10px) !important;
  animation: zgGachaDialogFadeIn .18s ease-out both !important;
}

.zg-gacha-dialog {
  width: min(420px, 100%) !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255, 224, 95, .34) !important;
  background:
    linear-gradient(145deg, rgba(18, 27, 50, .98), rgba(7, 12, 28, .98)) !important;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, .52),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  overflow: hidden !important;
  animation: zgGachaDialogPop .22s cubic-bezier(.2, .9, .25, 1.2) both !important;
}

.zg-gacha-dialog-head {
  padding: 22px 22px 10px !important;
}

.zg-gacha-dialog-kicker {
  margin-bottom: 8px !important;
  color: #55e6ff !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}

.zg-gacha-dialog-title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 23px !important;
  font-weight: 1000 !important;
  line-height: 1.18 !important;
}

.zg-gacha-dialog-body {
  padding: 0 22px 18px !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.zg-gacha-dialog-highlight {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 12px 0 2px !important;
  padding: 12px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255, 224, 95, .32) !important;
  background: rgba(255, 224, 95, .1) !important;
  color: #ffe05f !important;
  font-size: 24px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
}

.zg-gacha-dialog-actions {
  display: flex !important;
  gap: 10px !important;
  padding: 16px 18px 18px !important;
  background: rgba(255,255,255,.035) !important;
}

.zg-gacha-dialog-btn {
  flex: 1 !important;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 1000 !important;
  transition: transform .15s ease, filter .15s ease, opacity .15s ease !important;
}

.zg-gacha-dialog-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.04) !important;
}

.zg-gacha-dialog-btn:active {
  transform: translateY(1px) scale(.99) !important;
}

.zg-gacha-dialog-btn-secondary {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.82) !important;
}

.zg-gacha-dialog-btn-primary {
  background: linear-gradient(135deg, #ffe05f, #ff9e18) !important;
  color: #171008 !important;
  box-shadow: 0 10px 24px rgba(255, 169, 32, .28) !important;
}

.zg-gacha-dialog-btn-danger {
  background: linear-gradient(135deg, #ff5656, #d9001b) !important;
  color: #fff !important;
}

.zg-gacha-dialog-result-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  background: rgba(85, 230, 255, .1) !important;
  border: 1px solid rgba(85, 230, 255, .24) !important;
  color: #55e6ff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

@keyframes zgGachaDialogFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes zgGachaDialogPop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ZELO Gacha Dialog z-index hotfix */
#zg-gacha-dialog-backdrop.zg-gacha-dialog-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(3, 8, 20, .78) !important;
  backdrop-filter: blur(10px) !important;
}

#zg-gacha-dialog-backdrop .zg-gacha-dialog {
  position: relative !important;
  z-index: 2147483647 !important;
}

/* Gacha result animation: win / lose */
.zg-gacha-machine-result-media {
  animation: zgGachaResultPop 0.45s ease-out both;
}

.zg-gacha-machine-win-media {
  filter: drop-shadow(0 0 22px rgba(255, 224, 102, 0.75));
}

.zg-gacha-machine-lose-media {
  filter: grayscale(0.15) drop-shadow(0 0 14px rgba(148, 163, 184, 0.45));
  opacity: 0.92;
}

@keyframes zgGachaResultPop {
  0% {
    transform: scale(0.86) rotate(-2deg);
    opacity: 0.2;
  }

  60% {
    transform: scale(1.05) rotate(1deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* ---------------------------------------------------------
   隱藏陀螺兌換提示按鈕樣式
   --------------------------------------------------------- */
.zg-secret-redeem-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #58ec86, #04c855);
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 8px 18px rgba(4, 200, 85, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);

  /*
   * 卡片本身就是可點擊的 button，
   * 這裡設定 pointer-events: none，
   * 讓點擊事件正常往上傳遞給整張卡片，不被這個標籤攔截。
   */
  pointer-events: none;
}

/* ========================================================= 
   SECRET TOP CARD IMAGE FIX v2 / 隱藏陀螺圖片覆蓋修正（強化版）
   ========================================================= */

/* 用 article 標籤 + 完整 class 鏈路，拉高選擇器優先權 */
article.zg-top-card.zg-secret-top-card img.zg-top-photo.zg-secret-top-photo,
.zg-secret-top-list article.zg-top-card img.zg-secret-top-photo,
.zg-secret-top-card .zg-top-icon img.zg-secret-top-photo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center !important;

  z-index: 5 !important;
  pointer-events: none !important;

  border-radius: 999px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.zg-top-icon.zg-secret-top-icon {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  aspect-ratio: 1 / 1 !important;

  background: radial-gradient(
    circle at 35% 30%,
    var(--c1, #ff2b7a),
    var(--c2, #57f2ff)
  ) !important;

  border-radius: 999px !important;
}


/* ========================================================= 
   通用 Modal 彈窗系統樣式
   ========================================================= */

body.zg-modal-open {
  overflow: hidden !important;
}

.zg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);

  animation: zg-modal-fade-in 0.2s ease-out;
}

@keyframes zg-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.zg-modal {
  width: 100%;
  max-width: 420px;

  background: linear-gradient(180deg, #1a1f3a 0%, #0d1024 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;

  padding: 28px 24px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  animation: zg-modal-pop-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes zg-modal-pop-in {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.zg-modal-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5ce1e6;
  margin-bottom: 8px;
}

.zg-modal-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
  line-height: 1.4;
}

.zg-modal-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  margin: 0 0 16px;
}

.zg-modal-info-box {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;

  font-size: 14px;
  color: #ffd76a;
  font-weight: 600;
  line-height: 1.6;

  margin-bottom: 20px;
}

.zg-redeem-input {
  width: 100%;
  box-sizing: border-box;

  padding: 12px 14px;
  margin-bottom: 6px;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;

  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;

  outline: none;
  transition: border-color 0.15s;
}

.zg-redeem-input:focus {
  border-color: #5ce1e6;
}

.zg-redeem-input.zg-input-error {
  border-color: #ff6b6b;
}

.zg-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.zg-modal-btn-primary,
.zg-modal-btn-secondary {
  flex: 1;

  padding: 13px 16px;
  border: none;
  border-radius: 999px;

  font-size: 15px;
  font-weight: 700;
  cursor: pointer;

  transition: transform 0.1s, opacity 0.15s;
}

.zg-modal-btn-primary:active,
.zg-modal-btn-secondary:active {
  transform: scale(0.97);
}

.zg-modal-btn-primary {
  background: linear-gradient(135deg, #ffd76a, #ff9d3d);
  color: #1a1f3a;
}

.zg-modal-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.zg-secret-success .zg-modal-eyebrow {
  color: #6cff8a;
}

/* ========================================================= 
   隱藏陀螺卡片：兌換按鈕組
   ========================================================= */

.zg-secret-action-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

.zg-secret-info-btn,
.zg-secret-redeem-btn,
.zg-secret-select-btn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  cursor: pointer;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;

  padding: 11px 12px;
  border-radius: 10px;

  transition: transform 0.12s ease, opacity 0.15s ease, box-shadow 0.15s ease;

  white-space: nowrap;
}

.zg-secret-info-btn:active,
.zg-secret-redeem-btn:active,
.zg-secret-select-btn:active {
  transform: scale(0.96);
}

/* 「查看兌換方式」：次要按鈕，透明底 + 白色邊框 */
.zg-secret-info-btn {
  flex: 1;
  min-width: 0;

  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.92);

  position: relative;
}

/* ✅ 用 CSS 畫箭頭圖示，取代寫死在文字裡的 → */
.zg-secret-info-btn::after {
  content: "→";
  margin-left: 4px;
  display: inline-block;
  transition: transform 0.15s ease;
}

.zg-secret-info-btn:hover::after {
  transform: translateX(3px);
}

/* 「開始兌換」：主要按鈕，金色漸層底，更顯眼 */
.zg-secret-redeem-btn {
  flex: 1;
  min-width: 0;

  background: linear-gradient(135deg, #ffd76a 0%, #ff9d3d 100%);
  color: #3a1a00;

  box-shadow: 0 4px 14px rgba(255, 157, 61, 0.35);
}

.zg-secret-redeem-btn:hover {
  box-shadow: 0 6px 18px rgba(255, 157, 61, 0.5);
}

/* 「選擇上場 ✓」：已解鎖狀態的滿版按鈕 */
.zg-secret-select-btn {
  width: 100%;
  margin-top: 10px;

  padding: 13px 16px;
  border-radius: 999px;

  background: linear-gradient(135deg, #6cff8a 0%, #2ecc71 100%);
  color: #063b1a;

  font-size: 14px;
  box-shadow: 0 4px 14px rgba(46, 204, 113, 0.35);
}

.zg-secret-select-btn:hover {
  box-shadow: 0 6px 18px rgba(46, 204, 113, 0.5);
}

/* 手機版：字體與間距微調，避免擠壓變形 */
@media (max-width: 380px) {
  .zg-secret-info-btn,
  .zg-secret-redeem-btn {
    font-size: 12px;
    padding: 10px 8px;
  }
}


#zg-modal-root::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

#zg-modal-root {
  width: 90%;
  max-width: 420px;
}



dialog#zg-modal-root input,
dialog#zg-modal-root textarea {
  border: 1px solid #38bdf8 !important;  /* 換成您原本設計要的顏色 */
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border-radius: 8px;
}

dialog#zg-modal-root input:focus,
dialog#zg-modal-root textarea:focus {
  outline: none;
  border-color: #fbbf24 !important;  /* focus 時的強調色，可自行調整 */
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3);
}

/* =========================================================
   ZELO Gacha Embedded Panel / 結果頁內嵌抽獎機台
   只覆蓋外層定位，內部所有 class 沿用 .zg-gacha-panel 原樣式
   ========================================================= */

#zg-gacha-embedded-slot {
  width: 100% !important;
  margin: 18px auto 24px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 1 !important;
}

#zg-gacha-embedded-slot .zg-gacha-panel.zg-gacha-embed-panel {
  position: relative !important;
  width: 100% !important;
  max-width: 560px !important;
  margin: 0 auto !important;

  max-height: none !important;
  overflow-y: visible !important;

  box-sizing: border-box !important;
}

/* 內嵌版不需要關閉按鈕 */
#zg-gacha-embedded-slot .zg-gacha-close {
  display: none !important;
}

@media (max-width: 420px) {
  #zg-gacha-embedded-slot {
    padding: 0 8px !important;
  }
}


function injectWeeklyGachaStyles() {
  if (document.getElementById('zelo-weekly-gacha-style')) return;

  var style = document.createElement('style');
  style.id = 'zelo-weekly-gacha-style';
  style.textContent = `
    #zelo-weekly-gacha-container {
      width: 100%;
      max-width: 1080px;
      margin: 18px auto;
      padding: 0 12px;
      box-sizing: border-box;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }

    .zelo-weekly-panel {
      border-radius: 22px;
      background:
        radial-gradient(circle at top left, rgba(255,209,102,0.18), transparent 34%),
        linear-gradient(160deg, #171729, #10101c);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 12px 36px rgba(0,0,0,0.36);
      color: #fff;
      overflow: hidden;
      font-family: "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
    }

    .zelo-weekly-head {
      padding: 18px 18px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .zelo-weekly-title {
      font-size: 20px;
      font-weight: 900;
      letter-spacing: 0.02em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .zelo-weekly-subtitle {
      margin-top: 5px;
      font-size: 12.5px;
      color: rgba(255,255,255,0.66);
      line-height: 1.5;
    }

    .zelo-weekly-points {
      flex-shrink: 0;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,209,102,0.14);
      border: 1px solid rgba(255,209,102,0.32);
      color: #ffd166;
      font-size: 12.5px;
      font-weight: 900;
      white-space: nowrap;
    }

    .zelo-weekly-statusline {
      padding: 0 18px 14px;
      color: rgba(255,255,255,0.7);
      font-size: 12px;
      line-height: 1.5;
    }

    .zelo-weekly-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      padding: 16px;
    }

    .zelo-weekly-card {
      border-radius: 18px;
      padding: 15px;
      min-height: 268px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 22px rgba(0,0,0,0.32);
      text-shadow: 0 1px 3px rgba(0,0,0,0.5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .zelo-weekly-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 36%);
      pointer-events: none;
    }

    .zelo-weekly-card-inner {
      position: relative;
      z-index: 1;
    }

    .zelo-weekly-card.welfare {
      background: linear-gradient(160deg, #6e3d1f 0%, #a05a2c 52%, #3c1f0f 100%);
    }

    .zelo-weekly-card.accessory {
      background: linear-gradient(160deg, #4a5560 0%, #6d7a86 52%, #2f373f 100%);
    }

    .zelo-weekly-card.equipment {
      background: linear-gradient(160deg, #8a5a00 0%, #c98a12 52%, #4e3300 100%);
    }

    .zelo-weekly-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,0.34);
      font-size: 11.5px;
      font-weight: 900;
      margin-bottom: 9px;
    }

    .zelo-weekly-card-title {
      font-size: 20px;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .zelo-weekly-card-desc {
      font-size: 12.5px;
      color: rgba(255,255,255,0.82);
      margin-bottom: 10px;
      line-height: 1.4;
    }

    .zelo-weekly-state {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 900;
      background: rgba(0,0,0,0.28);
      margin-bottom: 10px;
      min-height: 36px;
    }

    .zelo-weekly-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
    }

    .zelo-weekly-state.can {
      background: rgba(26, 170, 96, 0.82);
    }

    .zelo-weekly-state.used {
      background: rgba(190, 52, 42, 0.86);
    }

    .zelo-weekly-state.locked {
      background: rgba(0,0,0,0.34);
      color: #ffe9a8;
    }

    .zelo-weekly-preview {
      display: flex;
      gap: 7px;
      margin: 10px 0 12px;
    }

    .zelo-weekly-prize {
      flex: 1;
      min-width: 0;
      background: rgba(0,0,0,0.26);
      border-radius: 11px;
      padding: 6px 5px;
      text-align: center;
    }

    .zelo-weekly-prize-img,
    .zelo-weekly-prize-ph {
      width: 100%;
      height: 54px;
      object-fit: cover;
      border-radius: 8px;
      background: rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
    }

    .zelo-weekly-prize-name {
      margin-top: 5px;
      font-size: 10.8px;
      font-weight: 900;
      line-height: 1.25;
      min-height: 28px;
    }

    .zelo-weekly-meta {
      display: grid;
      gap: 6px;
      margin-top: 8px;
      font-size: 12px;
      color: rgba(255,255,255,0.86);
    }

    .zelo-weekly-meta-row {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 9px;
      background: rgba(0,0,0,0.22);
      text-shadow: none;
    }

    .zelo-weekly-meta-row b {
      color: #fff;
    }

    .zelo-weekly-action {
      position: relative;
      z-index: 1;
      margin-top: 12px;
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .zelo-weekly-draw-btn {
      width: 100%;
      border: 0;
      border-radius: 999px;
      padding: 10px 12px;
      background: #fff;
      color: #222;
      font-size: 13.5px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,0.22);
    }

    .zelo-weekly-draw-btn:hover {
      background: #f2f2f2;
    }

    .zelo-weekly-draw-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .zelo-weekly-last {
      position: relative;
      z-index: 1;
      margin-top: 10px;
      padding: 9px 10px;
      border-radius: 11px;
      background: rgba(0,0,0,0.25);
      font-size: 11.5px;
      color: rgba(255,255,255,0.86);
      line-height: 1.5;
      text-shadow: none;
    }

    .zelo-weekly-loading,
    .zelo-weekly-error {
      padding: 22px;
      text-align: center;
      color: rgba(255,255,255,0.76);
      font-size: 13px;
      line-height: 1.6;
    }

    .zelo-weekly-error button {
      margin-top: 10px;
      border: 0;
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 900;
      cursor: pointer;
    }

    .zelo-weekly-toast {
      position: fixed;
      left: 50%;
      bottom: 22px;
      transform: translateX(-50%) translateY(80px);
      opacity: 0;
      z-index: 99999;
      max-width: min(92vw, 420px);
      background: #171717;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
      border-radius: 14px;
      padding: 12px 16px;
      font-size: 13.5px;
      line-height: 1.5;
      transition: all 0.26s ease;
    }

    .zelo-weekly-toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }

    @media (max-width: 860px) {
      .zelo-weekly-grid {
        grid-template-columns: 1fr;
      }

      .zelo-weekly-card {
        min-height: auto;
      }

      .zelo-weekly-head {
        flex-direction: column;
      }

      .zelo-weekly-points {
        align-self: flex-start;
      }

      .zelo-weekly-prize-img,
      .zelo-weekly-prize-ph {
        height: 64px;
      }
    }
  `;

  document.head.appendChild(style);
}


/* =========================================================
   ZELO 三獎池抽獎系統：LINE 邀請區 / Fallback 回饋樣式
   ========================================================= */

.zg-gacha-line-invite-box {
  margin-top: 12px !important;
  padding: 12px !important;
  background: rgba(0,0,0,.28) !important;
  border-radius: 12px !important;
  text-shadow: none !important;
}

.zg-gacha-invite-counter {
  font-size: 13px !important;
  font-weight: 950 !important;
  margin-bottom: 10px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #fff !important;
}

.zg-gacha-count-badge {
  background: rgba(255,255,255,.28) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 950 !important;
}

.zg-gacha-line-btn {
  width: 100% !important;
  background: #06C755 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 13px 10px !important;
  border-radius: 10px !important;
  font-weight: 1000 !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.zg-gacha-line-btn:hover {
  background: #05b34c !important;
}

.zg-gacha-line-btn:disabled {
  background: #555 !important;
  cursor: not-allowed !important;
  opacity: .8 !important;
}

.zg-gacha-invite-rule {
  font-size: 11px !important;
  opacity: .95 !important;
  margin-top: 9px !important;
  line-height: 1.6 !important;
  color: #ffe9a8 !important;
}

.zg-gacha-fallback-note {
  font-size: 12px !important;
  opacity: .96 !important;
  margin-top: 10px !important;
  font-style: italic !important;
  background: rgba(0,0,0,.26) !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.94) !important;
}
/* =========================================================
   ZELO 三獎池抽獎系統：狀態條
   ========================================================= */

.zg-gacha-weekly-status {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  padding: 10px 12px !important;
  border-radius: 9px !important;
  margin-bottom: 12px !important;
  text-shadow: none !important;
}

.zg-gacha-weekly-status.is-ok {
  background: rgba(30,150,90,.92) !important;
  color: #fff !important;
}

.zg-gacha-weekly-status.is-used {
  background: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.72) !important;
}

.zg-gacha-weekly-status.is-locked {
  background: rgba(0,0,0,.32) !important;
  color: #ffe9a8 !important;
}

.zg-gacha-status-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  flex: 0 0 auto !important;
}
/* =========================================================
   ZELO 三獎池抽獎系統：獎品圖片與佔位
   ========================================================= */

.zg-gacha-prize-thumb {
  flex: 1 !important;
  background: rgba(0,0,0,.3) !important;
  border-radius: 10px !important;
  padding: 6px !important;
  text-align: center !important;
  overflow: hidden !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.zg-gacha-prize-thumb img {
  width: 100% !important;
  height: 62px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  display: block !important;
  background: #fff !important;
}

.zg-gacha-placeholder-icon {
  width: 100% !important;
  height: 62px !important;
  border-radius: 6px !important;
  border: 1.5px dashed rgba(255,255,255,.7) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  color: rgba(255,255,255,.95) !important;
  line-height: 1.3 !important;
  padding: 2px !important;
  box-sizing: border-box !important;
}

.zg-gacha-placeholder-icon strong {
  font-size: 17px !important;
  line-height: 1 !important;
  margin-bottom: 3px !important;
}

.zg-gacha-prize-name {
  font-size: 11.5px !important;
  margin-top: 5px !important;
  font-weight: 950 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}

.zg-gacha-prize-pct {
  font-size: 11px !important;
  opacity: .95 !important;
  background: rgba(255,255,255,.2) !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  display: inline-block !important;
  margin-top: 3px !important;
}

/* =========================================================
   ZELO 三獎池：售罄 / 額外機會 / 隱藏機率
   ========================================================= */

.zg-gacha-weekly-status.is-soldout {
  background: rgba(0,0,0,.38) !important;
  color: #ffe1a6 !important;
}

.zg-gacha-weekly-status.is-bonus {
  background: rgba(80,120,180,.55) !important;
  color: #ffffff !important;
}

.zg-gacha-pool-card .zg-gacha-draw-btn:disabled {
  opacity: .65 !important;
  cursor: not-allowed !important;
}

.zg-gacha-prize-pct {
  display: none !important;
}


/* =========================================================
   ZELO 三獎池：LINE 邀請區低調版
   ========================================================= */

.zg-gacha-line-invite-box.is-secondary {
  margin-top: 12px !important;
  padding: 10px 12px !important;
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  text-shadow: none !important;
}

.zg-gacha-line-invite-box.is-secondary .zg-gacha-invite-counter {
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: rgba(255,255,255,.88) !important;
}

.zg-gacha-line-invite-box.is-secondary .zg-gacha-count-badge {
  background: rgba(255,255,255,.16) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.zg-gacha-extra-chance-text {
  font-size: 11.5px !important;
  color: rgba(255,255,255,.72) !important;
  margin-bottom: 7px !important;
}

.zg-gacha-line-btn.is-secondary {
  width: 100% !important;
  background: rgba(6,199,85,.12) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(6,199,85,.45) !important;
  padding: 9px 10px !important;
  border-radius: 8px !important;
  font-weight: 850 !important;
  font-size: 12.5px !important;
  cursor: pointer !important;
}

.zg-gacha-line-btn.is-secondary:hover {
  background: rgba(6,199,85,.2) !important;
}

.zg-gacha-line-btn.is-secondary:disabled {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.45) !important;
  cursor: not-allowed !important;
}

.zg-gacha-line-invite-box.is-secondary .zg-gacha-invite-rule {
  font-size: 10.5px !important;
  opacity: .78 !important;
  margin-top: 7px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,.68) !important;
}


/* =========================================================
   ZELO 三獎池：抽獎動畫 Modal
   ========================================================= */

.zg-gacha-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.62) !important;
  backdrop-filter: blur(5px) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.zg-gacha-modal.is-open {
  display: flex !important;
}

.zg-gacha-modal-panel {
  width: min(340px, 92vw) !important;
  background: linear-gradient(180deg, #242837, #121522) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
  padding: 24px 20px 20px !important;
  text-align: center !important;
  color: #fff !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.48) !important;
}

.zg-gacha-machine {
  width: 92px !important;
  height: 92px !important;
  margin: 0 auto 14px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, #ffd76a, #b56b00) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 8px rgba(255,215,106,.12) !important;
}

.zg-gacha-capsule {
  font-size: 42px !important;
  line-height: 1 !important;
}

.zg-gacha-modal.is-rolling .zg-gacha-capsule {
  animation: zgGachaShake .45s infinite linear !important;
}

.zg-gacha-modal.is-rolling .zg-gacha-machine {
  animation: zgGachaGlow 1s infinite alternate ease-in-out !important;
}

.zg-gacha-modal-title {
  font-size: 20px !important;
  font-weight: 1000 !important;
  margin-bottom: 8px !important;
}

.zg-gacha-modal-text {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,.82) !important;
}

.zg-gacha-modal-text strong {
  display: block !important;
  font-size: 18px !important;
  color: #ffd86b !important;
  margin: 6px 0 !important;
}

.zg-gacha-modal-text small {
  display: block !important;
  margin-top: 6px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.78) !important;
}

.zg-gacha-modal-close {
  margin-top: 16px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 11px 14px !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
  color: #191919 !important;
  background: #ffffff !important;
}

@keyframes zgGachaShake {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(12deg) scale(1.06);
  }

  50% {
    transform: rotate(-10deg) scale(.98);
  }

  75% {
    transform: rotate(8deg) scale(1.04);
  }

  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes zgGachaGlow {
  from {
    box-shadow:
      0 0 0 8px rgba(255,215,106,.12),
      0 0 18px rgba(255,215,106,.25);
  }

  to {
    box-shadow:
      0 0 0 12px rgba(255,215,106,.2),
      0 0 34px rgba(255,215,106,.55);
  }
}

.zg-gacha-video-wrap {
  display: none;
  width: 100%;
  margin: 0 auto 14px;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}

.zg-gacha-draw-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  background: #000;
}

.zg-gacha-modal.is-rolling .zg-gacha-video-wrap {
  display: block;
}

.zg-gacha-modal.is-rolling .zg-gacha-machine {
  display: none !important;
}



.zg-gacha-draw-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: cover;
  background: #000;
}

.zg-gacha-modal.is-rolling .zg-gacha-video-wrap {
  display: block;
}

.zg-gacha-modal.is-rolling .zg-gacha-machine {
  display: none !important;
}

}



/* =========================================================
   ZELO 三蛋抽獎專用 Modal，不使用舊版 #zg-gacha-modal
   ========================================================= */

.zg-three-gacha-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.68) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

.zg-three-gacha-modal.is-open {
  display: flex !important;
}

.zg-three-gacha-modal-panel {
  width: min(360px, 90vw) !important;
  border-radius: 22px !important;
  padding: 22px 20px 20px !important;
  background: linear-gradient(180deg, #262b3d, #121625) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.5) !important;
  color: #fff !important;
  text-align: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.zg-three-gacha-video-circle {
  width: 138px !important;
  height: 138px !important;
  margin: 0 auto 16px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  border: 9px solid rgba(255,204,64,.95) !important;
  box-shadow:
    0 0 0 8px rgba(255,204,64,.12),
    0 16px 34px rgba(0,0,0,.34) !important;
}

.zg-three-gacha-draw-video {
  width: 190px !important;
  height: 190px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.12) !important;
  background: #fff !important;
}

.zg-three-gacha-result-icon {
  width: 112px !important;
  height: 112px !important;
  margin: 0 auto 16px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 46px !important;
  line-height: 1 !important;
  background: radial-gradient(circle, #ffd45a, #e69812) !important;
  border: 9px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 0 0 8px rgba(255,204,64,.12),
    0 16px 34px rgba(0,0,0,.34) !important;
}

.zg-three-gacha-modal.is-rolling .zg-three-gacha-result-icon {
  display: none !important;
}

.zg-three-gacha-modal-title {
  font-size: 22px !important;
  font-weight: 1000 !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
  color: #fff !important;
}

.zg-three-gacha-modal-text {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255,255,255,.82) !important;
}

.zg-three-gacha-modal-text strong {
  display: block !important;
  margin: 4px 0 8px !important;
  font-size: 19px !important;
  font-weight: 1000 !important;
  color: #ffd86b !important;
}

.zg-three-gacha-modal-text small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.72) !important;
}

.zg-three-gacha-modal-close {
  display: block !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #171717 !important;
  font-size: 16px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  text-align: center !important;
  pointer-events: auto !important;
}

.zg-three-gacha-modal-close:active {
  transform: scale(.98) !important;
}


.zg-three-gacha-result-icon {
  display: none !important;
}

.zg-three-gacha-modal-title {
  margin-top: 6px !important;
}





#screen-result-video video,
#screen-result-video .zg-result-video,
#screen-result-video .zg-result-video-overlay,
#screen-result-video .result-video-overlay {
  pointer-events: none !important;
}

#zg-result-video-skip,
#screen-result-video .zg-result-video-skip,
#screen-result-video [data-action="skip-result-video"] {
  pointer-events: auto !important;
  position: fixed !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2147483647 !important;
  touch-action: manipulation !important;
}


/* =========================================================
   BATTLE BOX ARTIFACT HOTFIX
   目的：
   - 移除戰鬥中陀螺/技能特效外層方框
   - 保留圓形光效、圖片、動畫
   ========================================================= */

body[data-zg-screen="battle"] img,
body[data-zg-screen="battle"] canvas,
body[data-zg-screen="battle"] video,
body[data-zg-screen="battle"] .zg-battle-bey,
body[data-zg-screen="battle"] .zg-bey,
body[data-zg-screen="battle"] .bey,
body[data-zg-screen="battle"] .beyblade,
body[data-zg-screen="battle"] .player-bey,
body[data-zg-screen="battle"] .enemy-bey,
body[data-zg-screen="battle"] .zg-battle-effect,
body[data-zg-screen="battle"] .zg-skill-effect,
body[data-zg-screen="battle"] .skill-effect,
body[data-zg-screen="battle"] .collision-effect,
body[data-zg-screen="battle"] .attack-effect,
body[data-zg-screen="battle"] .effect-layer {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body[data-zg-screen="battle"] .zg-battle-bey,
body[data-zg-screen="battle"] .zg-bey,
body[data-zg-screen="battle"] .bey,
body[data-zg-screen="battle"] .beyblade,
body[data-zg-screen="battle"] .player-bey,
body[data-zg-screen="battle"] .enemy-bey {
  overflow: visible !important;
}

body[data-zg-screen="battle"] .zg-battle-bey img,
body[data-zg-screen="battle"] .zg-bey img,
body[data-zg-screen="battle"] .bey img,
body[data-zg-screen="battle"] .beyblade img,
body[data-zg-screen="battle"] .player-bey img,
body[data-zg-screen="battle"] .enemy-bey img {
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/*
 * 邊緣蓄能衝刺 —「極限衝擊」跳字特效
 */
.zg-rimcharge-callout {
  position: absolute;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fff2b8;
  text-shadow:
    0 0 6px rgba(255, 200, 60, 0.95),
    0 0 18px rgba(255, 120, 20, 0.85),
    0 2px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 9999;
  white-space: nowrap;
  will-change: transform, opacity;
  animation: zgRimChargeCalloutPop 0.95s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes zgRimChargeCalloutPop {
  0% {
    transform: translate(-50%, -50%) scale(0.3) rotate(-8deg);
    opacity: 0;
  }
  18% {
    transform: translate(-50%, -50%) scale(1.3) rotate(4deg);
    opacity: 1;
  }
  32% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -68%) scale(1.02) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -95%) scale(0.9) rotate(0deg);
    opacity: 0;
  }
}

/*
 * =========================================================
 * ZELO RESULT STAT CARD - 強制清除方框補丁
 * 解決 .zg-result-stat-card（我方/敵方能量、轉速卡片）
 * 出現非預期 border / box-shadow 方框的問題
 * =========================================================
 */
function installResultStatCardNoBorderPatch() {
  const styleId = "zg-result-stat-card-no-border-patch";

  let style = document.getElementById(styleId);

  if (!style) {
    style = document.createElement("style");
    style.id = styleId;
    document.head.appendChild(style);
  }

  style.textContent = `
    /*
     * 主要目標：.zg-result-stat-card 本體
     * 使用高特異性選擇器 + !important，
     * 確保覆蓋掉任何外部 CSS 檔案裡的 class 規則
     */
    #screen-result .zg-result-stat-card,
    #screen-result .zg-result-side-stats .zg-result-stat-card,
    #screen-result .zg-result-side-stats-left .zg-result-stat-card,
    #screen-result .zg-result-side-stats-right .zg-result-stat-card {
      border: 0 !important;
      border-width: 0 !important;
      border-style: none !important;
      border-color: transparent !important;

      box-shadow: none !important;
      outline: 0 !important;
      outline-style: none !important;

      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;

      filter: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /*
     * 偽元素也要清除。
     * 有些方框其實是用 ::before / ::after 畫出來的邊框，
     * 而不是直接寫在 border 屬性上。
     */
    #screen-result .zg-result-stat-card::before,
    #screen-result .zg-result-stat-card::after {
      display: none !important;
      content: none !important;

      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;

      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }

    /*
     * 內部文字元素（span / strong）也強制清除，
     * 避免子元素自己帶框線。
     */
    #screen-result .zg-result-stat-card span,
    #screen-result .zg-result-stat-card strong {
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      outline: 0 !important;
    }

    /*
     * 保險：side-stats 外層容器也清除，
     * 避免方框其實是掛在外層 wrapper 上。
     */
    #screen-result .zg-result-side-stats,
    #screen-result .zg-result-side-stats-left,
    #screen-result .zg-result-side-stats-right {
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      outline: 0 !important;
    }
  `;

  return style;
}


/*
 * =========================================================
 * Battle Burst Dash FX / 爆衝撞擊特效
 * =========================================================
 */

.zg-burst-flash {
  animation: zgBurstFlash 0.22s ease-out both;
}

@keyframes zgBurstFlash {
  0% {
    filter: brightness(1) saturate(1);
  }

  45% {
    filter: brightness(1.25) saturate(1.35);
  }

  100% {
    filter: brightness(1) saturate(1);
  }
}



function installZeloRoundAuraNoBoxPatch() {
  if (document.getElementById("zg-round-aura-no-box-patch")) return;

  const style = document.createElement("style");
  style.id = "zg-round-aura-no-box-patch";
  style.textContent = `
    .zg-top,
    .zg-battle-top,
    .zg-secret-top,
    .zg-top-el {
      border-radius: 999px !important;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      -webkit-tap-highlight-color: transparent !important;
    }

    .zg-top img,
    .zg-battle-top img,
    .zg-secret-top img,
    .zg-top-el img {
      border-radius: 999px !important;
      clip-path: circle(49% at 50% 50%) !important;
      -webkit-clip-path: circle(49% at 50% 50%) !important;
      background: transparent !important;
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
    }

    .zg-top-energy-aura {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: 118% !important;
      height: 118% !important;
      transform: translate(-50%, -50%) !important;
      border-radius: 999px !important;
      clip-path: circle(50% at 50% 50%) !important;
      -webkit-clip-path: circle(50% at 50% 50%) !important;
      pointer-events: none !important;
      z-index: -1 !important;
      background: radial-gradient(
        circle,
        var(--zg-aura-core, rgba(255,255,255,0.35)) 0%,
        var(--zg-aura-glow, rgba(90,220,255,0.45)) 38%,
        var(--zg-aura-shadow, rgba(90,220,255,0.18)) 62%,
        rgba(0,0,0,0) 74%
      ) !important;
      opacity: var(--zg-aura-opacity, 0.7) !important;
      filter: blur(var(--zg-aura-blur, 6px)) saturate(1.25) !important;
      mix-blend-mode: screen !important;
      box-shadow: none !important;
      outline: 0 !important;
      border: 0 !important;
    }

    .zg-top-energy-ring {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      width: 108% !important;
      height: 108% !important;
      transform: translate(-50%, -50%) !important;
      border-radius: 999px !important;
      clip-path: circle(50% at 50% 50%) !important;
      -webkit-clip-path: circle(50% at 50% 50%) !important;
      pointer-events: none !important;
      z-index: 2 !important;
      border: 2px solid var(--zg-aura-glow, rgba(90,220,255,0.8)) !important;
      opacity: var(--zg-ring-opacity, 0.65) !important;
      box-shadow:
        0 0 var(--zg-ring-glow, 10px) var(--zg-aura-glow, rgba(90,220,255,0.7)),
        inset 0 0 var(--zg-ring-inner, 8px) var(--zg-aura-shadow, rgba(90,220,255,0.35)) !important;
      background: transparent !important;
    }
  `;

  document.head.appendChild(style);
}


function installZeloRoundAuraNoBoxPatch() {
  if (document.getElementById("zg-round-aura-no-box-patch")) return;

  const style = document.createElement("style");
  style.id = "zg-round-aura-no-box-patch";

  style.textContent = `
    /*
     * =========================================================
     * Battle Top No Box Patch
     * 強制移除陀螺方框 / 方型光環
     * =========================================================
     */

    .zg-battle-top,
    .zg-player-top,
    .zg-enemy-top,
    .zg-secret-battle-top {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;

      border-radius: 999px !important;
      overflow: visible !important;

      pointer-events: none !important;
      box-sizing: border-box !important;
      isolation: isolate !important;

      -webkit-tap-highlight-color: transparent !important;
    }

    .zg-battle-top::before,
    .zg-battle-top::after,
    .zg-player-top::before,
    .zg-player-top::after,
    .zg-enemy-top::before,
    .zg-enemy-top::after,
    .zg-secret-battle-top::before,
    .zg-secret-battle-top::after {
      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    .zg-battle-top-photo,
    .zg-battle-top-photo-no-base,
    .zg-battle-top img,
    .zg-player-top img,
    .zg-enemy-top img,
    .zg-secret-battle-top img {
      display: block !important;

      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;

      object-fit: contain !important;

      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;

      border-radius: 999px !important;

      /*
       * 關鍵：裁掉圖片透明區外的方形底
       */
      clip-path: circle(49% at 50% 50%) !important;
      -webkit-clip-path: circle(49% at 50% 50%) !important;

      pointer-events: none !important;
      user-select: none !important;
      -webkit-user-drag: none !important;
    }

    /*
     * 圓形能量光環
     * 注意：這些光環層必須是圓形，不可以讓 body.el 自己 box-shadow
     */
    .zg-top-energy-aura {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;

      width: 126% !important;
      height: 126% !important;

      transform: translate(-50%, -50%) !important;

      border-radius: 999px !important;
      clip-path: circle(50% at 50% 50%) !important;
      -webkit-clip-path: circle(50% at 50% 50%) !important;

      pointer-events: none !important;
      z-index: -2 !important;

      border: 0 !important;
      outline: 0 !important;
      box-shadow: none !important;

      background:
        radial-gradient(
          circle,
          var(--zg-aura-core, rgba(255,255,255,0.36)) 0%,
          var(--zg-aura-glow, rgba(90,220,255,0.42)) 34%,
          var(--zg-aura-shadow, rgba(90,220,255,0.22)) 58%,
          rgba(0,0,0,0) 76%
        ) !important;

      opacity: var(--zg-aura-opacity, 0.72) !important;
      filter: blur(var(--zg-aura-blur, 7px)) saturate(1.25) !important;
      mix-blend-mode: screen !important;
    }

    .zg-top-energy-ring {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;

      width: 110% !important;
      height: 110% !important;

      transform: translate(-50%, -50%) !important;

      border-radius: 999px !important;
      clip-path: circle(50% at 50% 50%) !important;
      -webkit-clip-path: circle(50% at 50% 50%) !important;

      pointer-events: none !important;
      z-index: 3 !important;

      background: transparent !important;
      outline: 0 !important;

      border: 2px solid var(--zg-aura-glow, rgba(90,220,255,0.82)) !important;

      box-shadow:
        0 0 var(--zg-ring-glow, 14px) var(--zg-aura-glow, rgba(90,220,255,0.65)),
        inset 0 0 var(--zg-ring-inner, 8px) var(--zg-aura-shadow, rgba(90,220,255,0.35)) !important;

      opacity: var(--zg-ring-opacity, 0.68) !important;
      mix-blend-mode: screen !important;
    }
  `;

  document.head.appendChild(style);
}


/* =========================================================
   HARD KILL: 徹底清除舊版光環/圓圈系統
   放在整份 CSS 的最後面，確保優先權最高
   ========================================================= */
body[data-zg-screen="battle"] .zg-top-energy-aura,
body[data-zg-screen="battle"] .zg-top-energy-ring,
body[data-zg-screen="battle"] .zg-secret-dom-ring,
body[data-zg-screen="battle"] .zg-secret-dom-aura {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  pointer-events: none !important;
}
@keyframes zgSecretIdleBreath {
  0%   { transform: scale(0.94); filter: brightness(0.92); }
  100% { transform: scale(1.06); filter: brightness(1.18); }
}


@keyframes zgThunderFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}



 function createMotionTrail(body) {
  if (!body || !body.el || body.dead) return;

  const box = battleBox();
  if (!box) return;

  /*
   * lowFx 時仍保留少量拖尾，不完全關閉。
   */
  const fxGap = PERF.lowFx ? 260 : 95;

  if (!canFx(fxGap)) return;

  const speed = Math.hypot(body.vx || 0, body.vy || 0);
  const speedRatio = clamp(speed / PHY.maxSpeed, 0, 1);

  /*
   * 低速不生成拖尾，避免畫面太亂。
   */
  if (speedRatio < 0.24) return;

  const angle = Math.atan2(body.vy || 0, body.vx || 0);

  const c1 = body.top?.colorA || (body.side === "player" ? "#00eaff" : "#ff3b5c");
  const c2 = body.top?.colorB || (body.side === "player" ? "#fff06a" : "#ffef7a");

  /*
   * 速度越快，拖尾越長、越粗、越亮。
   */
  const baseLength = clamp(52 + speedRatio * 118, 52, 170);
  const baseThickness = clamp(7 + speedRatio * 12, 7, 19);

  /*
   * 高速時生成多層拖尾。
   */
  const layerCount = PERF.lowFx
    ? 1
    : speedRatio > 0.78
      ? 3
      : speedRatio > 0.48
        ? 2
        : 1;

  const frag = document.createDocumentFragment();

  /*
   * 優化重點：
   * 直接保留這次呼叫自己建立的節點參考，
   * 清除時不再用 querySelectorAll 重新掃描 box，
   * 避免高頻拖尾生成時重複 DOM 查詢，
   * 也避免同時間多批拖尾互相誤刪對方節點。
   */
  const created = [];

  fxAdd();

  for (let i = 0; i < layerCount; i += 1) {
    const trail = document.createElement("i");

    const layerRatio = 1 - i * 0.18;
    const sideOffset = (i - (layerCount - 1) / 2) * 7;

    /*
     * 拖尾中心點往陀螺反方向移動。
     */
    const length = baseLength * layerRatio;
    const thickness = baseThickness * layerRatio;

    const offset = body.r * 0.42 + length * 0.22 + i * 8;

    const normalX = -Math.sin(angle);
    const normalY = Math.cos(angle);

    const x =
      body.x -
      Math.cos(angle) * offset +
      normalX * sideOffset;

    const y =
      body.y -
      Math.sin(angle) * offset +
      normalY * sideOffset;

    trail.className =
      `zg-motion-trail zg-motion-trail-boost ${
        body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
      } layer-${i + 1}`;

    trail.style.left = `${x}px`;
    trail.style.top = `${y}px`;
    trail.style.width = `${length}px`;
    trail.style.height = `${thickness}px`;

    trail.style.setProperty("--rot", `${angle}rad`);
    trail.style.setProperty("--c1", c1);
    trail.style.setProperty("--c2", c2);
    trail.style.setProperty("--trail-speed", String(speedRatio));
    trail.style.setProperty("--trail-scale", String(clamp(0.85 + speedRatio * 0.45, 0.85, 1.3)));

    trail.style.opacity = String(
      clamp(0.2 + speedRatio * 0.42 - i * 0.08, 0.14, 0.62)
    );

    frag.appendChild(trail);
    created.push(trail);
  }

  /*
   * 高速時補一顆尾端能量粒子。
   */
  if (!PERF.lowFx && speedRatio > 0.58) {
    const orb = document.createElement("i");

    const orbOffset = body.r * 0.8 + baseLength * 0.74;

    const x = body.x - Math.cos(angle) * orbOffset;
    const y = body.y - Math.sin(angle) * orbOffset;

    orb.className =
      `zg-motion-trail-orb ${
        body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
      }`;

    orb.style.left = `${x}px`;
    orb.style.top = `${y}px`;
    orb.style.setProperty("--c1", c1);
    orb.style.setProperty("--c2", c2);
    orb.style.setProperty("--trail-speed", String(speedRatio));

    frag.appendChild(orb);
    created.push(orb);
  }

  box.appendChild(frag);

  setTimeout(() => {
    for (let i = 0; i < created.length; i += 1) {
      try {
        created[i].remove();
      } catch (error) {}
    }

    fxRemove();
  }, PERF.lowFx ? 280 : 360);
}



  function createScratchTrail(body) {
  if (PERF.lowFx) return;
  if (!body || body.dead) return;

  const box = battleBox();
  if (!box || !canFx(220)) return;

  const scratch = document.createElement("i");

  fxAdd();

  scratch.className = "zg-scratch";
  scratch.style.left = `${body.x}px`;
  scratch.style.top = `${body.y}px`;
  scratch.style.setProperty("--rot", `${Math.atan2(body.vy, body.vx)}rad`);
  scratch.style.opacity = String(0.18 + body.spinRatio * 0.26);

  box.appendChild(scratch);

  setTimeout(() => {
    try {
      scratch.remove();
    } catch (error) {}

    fxRemove();
  }, 360);
}

  function createXtremeDashTrail(body) {
  if (!body || !body.el || body.dead) return;

  const box = battleBox();
  if (!box) return;

  const t = now();

  /*
   * lowFx 直接跳過爆衝特效，避免手機卡頓。
   */
  if (PERF.lowFx) return;

  const speed = Math.hypot(body.vx || 0, body.vy || 0);
  const speedRatio = clamp(speed / PHY.maxSpeed, 0, 1);

  /*
   * 爆衝門檻。
   */
  if (speedRatio < 0.72) return;

  const gap = speedRatio > 0.9 ? 54 : 82;

  if (t - PERF.lastXtremeDashAt < gap) return;

  PERF.lastXtremeDashAt = t;

  const angle = Math.atan2(body.vy || 0, body.vx || 0);

  const c1 =
    body.top?.colorA ||
    (body.side === "player" ? "#00eaff" : "#ff2b5f");

  const c2 =
    body.top?.colorB ||
    (body.side === "player" ? "#fff06a" : "#ffef7a");

  const length = clamp(115 + speedRatio * 165, 115, 280);
  const thickness = clamp(10 + speedRatio * 14, 10, 24);

  const normalX = -Math.sin(angle);
  const normalY = Math.cos(angle);

  const baseOffset = body.r * 0.56 + length * 0.24;

  const baseX = body.x - Math.cos(angle) * baseOffset;
  const baseY = body.y - Math.sin(angle) * baseOffset;

  const frag = document.createDocumentFragment();

  /*
   * 優化重點：
   * 這個函式一次會產生 trail + 多個 bolt + orb + flare 共四種節點。
   * 原本清除時要對四種 class 各自做一次 querySelectorAll，
   * 現在改為直接收集自己建立的節點參考，
   * 清除時只需要一個迴圈即可，不再重新掃描 DOM，
   * 也避免同時間多批爆衝拖尾互相誤刪對方節點。
   */
  const created = [];

  fxAdd();

  /*
   * 主爆衝噴射軌跡。
   */
  const trail = document.createElement("i");

  trail.className =
    `zg-xtreme-dash-trail ${
      body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
    }`;

  trail.style.left = `${baseX}px`;
  trail.style.top = `${baseY}px`;
  trail.style.width = `${length}px`;
  trail.style.height = `${thickness}px`;
  trail.style.setProperty("--rot", `${angle}rad`);
  trail.style.setProperty("--c1", c1);
  trail.style.setProperty("--c2", c2);
  trail.style.setProperty("--dash-speed", String(speedRatio));

  frag.appendChild(trail);
  created.push(trail);

  /*
   * 兩側閃電裂痕。
   */
  const boltCount = speedRatio > 0.88 ? 4 : 3;

  for (let i = 0; i < boltCount; i += 1) {
    const bolt = document.createElement("i");

    const side = i % 2 === 0 ? 1 : -1;
    const sideOffset = side * rand(10, 28);
    const alongOffset = rand(-length * 0.28, length * 0.34);

    const x =
      baseX -
      Math.cos(angle) * alongOffset +
      normalX * sideOffset;

    const y =
      baseY -
      Math.sin(angle) * alongOffset +
      normalY * sideOffset;

    const boltLen = rand(42, 92) * clamp(speedRatio, 0.75, 1.1);

    bolt.className =
      `zg-xtreme-dash-bolt ${
        body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
      }`;

    bolt.style.left = `${x}px`;
    bolt.style.top = `${y}px`;
    bolt.style.width = `${boltLen}px`;
    bolt.style.setProperty(
      "--rot",
      `${angle + rand(-0.38, 0.38)}rad`
    );
    bolt.style.setProperty("--c1", c1);
    bolt.style.setProperty("--c2", c2);
    bolt.style.setProperty("--dash-side", String(side));

    frag.appendChild(bolt);
    created.push(bolt);
  }

  /*
   * 尾端爆點。
   */
  const orb = document.createElement("i");

  const orbOffset = body.r * 0.9 + length * 0.78;

  const orbX = body.x - Math.cos(angle) * orbOffset;
  const orbY = body.y - Math.sin(angle) * orbOffset;

  orb.className =
    `zg-xtreme-dash-orb ${
      body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
    }`;

  orb.style.left = `${orbX}px`;
  orb.style.top = `${orbY}px`;
  orb.style.setProperty("--c1", c1);
  orb.style.setProperty("--c2", c2);

  frag.appendChild(orb);
  created.push(orb);

  /*
   * 陀螺身旁瞬間 flare。
   */
  const flare = document.createElement("i");

  flare.className =
    `zg-xtreme-dash-flare ${
      body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
    }`;

  flare.style.left = `${body.x}px`;
  flare.style.top = `${body.y}px`;
  flare.style.setProperty("--c1", c1);
  flare.style.setProperty("--c2", c2);

  frag.appendChild(flare);
  created.push(flare);

  box.appendChild(frag);

  /*
   * 極高速時偶爾產生爆衝震波。
   */
  if (speedRatio > 0.88) {
    createXtremeDashShock(body, speedRatio);
  }

  setTimeout(() => {
    for (let i = 0; i < created.length; i += 1) {
      try {
        created[i].remove();
      } catch (error) {}
    }

    fxRemove();
  }, 430);
}



function createXtremeDashShock(body, speedRatio = 1) {
  if (!body || body.dead || PERF.lowFx) return;

  const box = battleBox();
  if (!box) return;

  const t = now();

  if (t - PERF.lastXtremeDashShockAt < 520) return;

  PERF.lastXtremeDashShockAt = t;

  const shock = document.createElement("i");

  fxAdd();

  shock.className =
    `zg-xtreme-dash-shock ${
      body.side === "player" ? "zg-player-trail" : "zg-enemy-trail"
    }`;

  shock.style.left = `${body.x}px`;
  shock.style.top = `${body.y}px`;
  shock.style.setProperty("--c1", body.top?.colorA || "#00eaff");
  shock.style.setProperty("--c2", body.top?.colorB || "#fff06a");
  shock.style.setProperty("--shock-scale", String(clamp(0.8 + speedRatio * 0.7, 1, 1.55)));

  box.appendChild(shock);

  /*
   * 畫面輕微震動。
   */
  try {
    restartClass(box, "zg-impact-punch", 180);
  } catch (error) {}

  try {
  if (Sound && typeof Sound.rail === "function") {
    Sound.rail(0.8 + speedRatio * 0.6);
  }
} catch (error) {}


  setTimeout(() => {
    try {
      shock.remove();
    } catch (error) {}

    fxRemove();
  }, 420);
}


  /*
   * ★ 新增：貼身激戰環境微震
   *
   * 依據雙方距離、速度、與蓄能狀態，
   * 產生持續性的輕微場景震動，
   * 強化「戰鬥正在白熱化」的臨場感。
   */
  try {
    const dx = enemy.x - player.x;
    const dy = enemy.y - player.y;
    const dist = Math.hypot(dx, dy);

    const combinedSpeed =
      Math.hypot(player.vx, player.vy) + Math.hypot(enemy.vx, enemy.vy);

    const combinedRimCharge =
      (player.rimCharge || 0) + (enemy.rimCharge || 0);

    const closeness = clamp(1 - dist / (arena.w * 0.5), 0, 1);
    const speedFactor = clamp(combinedSpeed / (PHY.maxSpeed * 2), 0, 1);

    const ambientPower =
      closeness * speedFactor * 0.55 + combinedRimCharge * 0.4;

    if (ambientPower > 0.05) {
      ArenaShake.trigger(ambientPower * 1.4, ambientPower * 0.4);
    }
  } catch (error) {}


    /*
   * ---------------------------------------------------------
   * HIT STOP / 重擊凍結格（防重複宣告安全版）
   * ---------------------------------------------------------
   * 用 if 檢查是否已經宣告過，
   * 就算不小心貼了兩次也不會噴 SyntaxError。
   */
  if (typeof window.__zgHitFreezeUntil === "undefined") {
    window.__zgHitFreezeUntil = 0;
  }

  function applyHitFreezeFrame(durationMs) {
    window.__zgHitFreezeUntil = Math.max(
      window.__zgHitFreezeUntil,
      now() + durationMs
    );
  }

  function isHitFreezeActive() {
    return now() < window.__zgHitFreezeUntil;
  }


  /*
   * ---------------------------------------------------------
   * ARENA SHAKE OVERRIDE / 場景震動系統（完整覆蓋版）
   * ---------------------------------------------------------
   * 直接覆蓋掉前面舊的 shakeArena() 定義。
   * （JS 規則：同一作用域內，後面宣告的 function 會蓋掉前面同名的）
   *
   * 特色：
   * - 震動強度可疊加，連續撞擊會越晃越大，不會互相打斷重置。
   * - 每幀隨機偏移 + 自然衰減，比固定 CSS keyframe 動畫更有手感。
   * - 同時內建觸發 Hit-Stop 凍結格，不需要另外去改
   *   battleLoop 或 resolveCollision 的內部程式碼。
   */
  const ArenaShake = (() => {
    let intensity = 0;
    let rotIntensity = 0;
    let running = false;

    const DECAY = 0.9;
    const MAX_INTENSITY = 36;
    const MAX_ROT = 3.6;

    function loop() {
      const box = battleBox();

      if (!box) {
        running = false;
        return;
      }

      if (intensity < 0.08 && rotIntensity < 0.02) {
        box.style.transform = "";
        intensity = 0;
        rotIntensity = 0;
        running = false;
        return;
      }

      const ox = (Math.random() * 2 - 1) * intensity;
      const oy = (Math.random() * 2 - 1) * intensity;
      const rot = (Math.random() * 2 - 1) * rotIntensity;

      box.style.transform = `translate(${ox.toFixed(2)}px, ${oy.toFixed(
        2
      )}px) rotate(${rot.toFixed(2)}deg)`;

      intensity *= DECAY;
      rotIntensity *= DECAY;

      requestAnimationFrame(loop);
    }

    function trigger(power, rotPower) {
      intensity = Math.min(intensity + power, MAX_INTENSITY);
      rotIntensity = Math.min(
        rotIntensity + (rotPower != null ? rotPower : power * 0.12),
        MAX_ROT
      );

      if (!running) {
        running = true;
        loop();
      }
    }

    return { trigger };
  })();

  /*
   * ★ 覆蓋：震動等級對照表 + 同步觸發 Hit-Stop 凍結格。
   * 數字越大晃動幅度越明顯，凍結時間也越長。
   */
  function shakeArena(kind = "shake") {
    const levels = {
      "tiny": { power: 3, freeze: 0 },
      "shake": { power: 9, freeze: 26 },
      "big-shake": { power: 17, freeze: 62 },
      "mega-shake": { power: 24, freeze: 92 },
      "xtreme-shake": { power: 32, freeze: 135 }
    };

    const conf = levels[kind] || levels["shake"];

    ArenaShake.trigger(conf.power);

    if (conf.freeze > 0) {
      applyHitFreezeFrame(conf.freeze);
    }
  }



  
  function flashArena(power = 1) {
  const box = battleBox();
  if (!box) return;

  const overlay = $(".zg-flash-overlay", box);
  if (!overlay) return;

  const p = clamp(power, 0.25, 1.8);

  overlay.style.setProperty("opacity", String(0.18 + p * 0.26), "important");
  overlay.style.setProperty("transition", "none", "important");

  requestAnimationFrame(() => {
    overlay.style.setProperty("transition", "opacity 260ms ease-out", "important");
    overlay.style.setProperty("opacity", "0", "important");
  });
}


/* =========================================================
 * ZELO V5 專屬軌跡殘光與特效樣式 (貼在 game.css 底部)
 * ========================================================= */

/* 軌跡殘光基礎樣式 */
.zg-motion-trail {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 0.85 !important;
  filter: blur(3px) !important;
  transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.3s ease-out !important;
  z-index: 8 !important;
}

/* 五大屬性拖尾殘光配色 */
.zg-trail-shadow {
  background: radial-gradient(circle, rgba(160,70,255,0.9) 0%, rgba(43,10,74,0.5) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(160,70,255,0.7) !important;
}
.zg-trail-light {
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,226,122,0.6) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,255,255,0.9) !important;
}
.zg-trail-fire {
  background: radial-gradient(circle, rgba(255,90,25,0.95) 0%, rgba(255,31,31,0.5) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,90,25,0.8) !important;
}
.zg-trail-ice {
  background: radial-gradient(circle, rgba(120,225,255,0.9) 0%, rgba(42,134,255,0.5) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(120,225,255,0.8) !important;
}
.zg-trail-thunder {
  background: radial-gradient(circle, rgba(255,245,90,0.95) 0%, rgba(140,225,255,0.6) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,245,90,0.9) !important;
}

/* =========================================================
 * ZELO V5 專屬軌跡殘光與特效樣式 (貼在 game.css 底部)
 * ========================================================= */

/* 軌跡殘光基礎樣式 */
.zg-motion-trail {
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
  transform: translate(-50%, -50%) scale(1) !important;
  opacity: 0.85 !important;
  filter: blur(3px) !important;
  transition: transform 0.3s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.3s ease-out !important;
  z-index: 8 !important;
}

/* 五大屬性拖尾殘光配色 */
.zg-trail-shadow {
  background: radial-gradient(circle, rgba(160,70,255,0.9) 0%, rgba(43,10,74,0.5) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(160,70,255,0.7) !important;
}
.zg-trail-light {
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,226,122,0.6) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,255,255,0.9) !important;
}
.zg-trail-fire {
  background: radial-gradient(circle, rgba(255,90,25,0.95) 0%, rgba(255,31,31,0.5) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,90,25,0.8) !important;
}
.zg-trail-ice {
  background: radial-gradient(circle, rgba(120,225,255,0.9) 0%, rgba(42,134,255,0.5) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(120,225,255,0.8) !important;
}
.zg-trail-thunder {
  background: radial-gradient(circle, rgba(255,245,90,0.95) 0%, rgba(140,225,255,0.6) 60%, transparent 100%) !important;
  box-shadow: 0 0 16px rgba(255,245,90,0.9) !important;
}

/* V5 碰撞特效動畫與容器 */
.zg-impact-wrap-v5 {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

.zg-impact-wrap-v5 div {
  position: absolute !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

@keyframes zgV5Shockwave {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
  50% { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@keyframes zgV5SharpSpike {
  0% { transform: rotate(var(--angle)) scaleX(0.1); opacity: 1; }
  100% { transform: rotate(var(--angle)) scaleX(1.5); opacity: 0; }
}
@keyframes zgV5ThunderBolt {
  0% { transform: rotate(var(--angle)) scaleX(0.1) skewY(0deg); opacity: 1; }
  50% { transform: rotate(var(--angle)) scaleX(0.8) skewY(15deg); opacity: 0.8; }
  100% { transform: rotate(var(--angle)) scaleX(1.6) skewY(-10deg); opacity: 0; }
}


/* =========================================================
 * ZELO V6 高質感碰撞與拖尾 CSS (請貼在 game.css 最底部)
 * ========================================================= */

/* 隱藏陀螺專屬拖尾殘光 */
.zg-motion-trail {
  border-radius: 50% !important;
  mix-blend-mode: screen !important;
  filter: blur(2px) !important;
  opacity: 0.75 !important;
  transition: transform 0.22s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.22s ease-out !important;
}

.zg-trail-shadow { background: radial-gradient(circle, rgba(160,70,255,0.95) 0%, rgba(43,10,74,0.4) 60%, transparent 100%) !important; }
.zg-trail-light { background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,226,122,0.5) 60%, transparent 100%) !important; }
.zg-trail-fire { background: radial-gradient(circle, rgba(255,90,25,1) 0%, rgba(255,31,31,0.4) 60%, transparent 100%) !important; }
.zg-trail-ice { background: radial-gradient(circle, rgba(120,225,255,0.95) 0%, rgba(42,134,255,0.4) 60%, transparent 100%) !important; }
.zg-trail-thunder { background: radial-gradient(circle, rgba(255,245,90,1) 0%, rgba(140,225,255,0.5) 60%, transparent 100%) !important; }

/* V6 粒子碰撞特效 */
.zg-spark-line-v6 {
  position: absolute !important;
  transform-origin: 0% 50% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ffffff 20%, var(--c1) 60%, transparent 100%) !important;
  filter: drop-shadow(0 0 4px var(--c1)) !important;
  animation: zgSparkFlyV6 0.28s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
}

.zg-ring-shockwave-v6 {
  position: absolute !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) scale(0.1) !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 15px var(--c1), inset 0 0 10px var(--c1) !important;
  opacity: 1 !important;
  animation: zgRingExpandV6 0.32s cubic-bezier(0.08, 0.8, 0.2, 1) forwards !important;
}

/* 防禦型陀螺圓形能量罩 */
.zg-defense-shield-v6 {
  position: absolute !important;
  border-radius: 50% !important;
  border: 3px double var(--c2) !important;
  background: radial-gradient(circle, transparent 50%, var(--c1) 85%, transparent 100%) !important;
  box-shadow: 0 0 25px var(--c1), inset 0 0 15px var(--c1) !important;
  opacity: 0.9 !important;
  transform: translate(-50%, -50%) scale(0.2) !important;
  animation: zgShieldBurstV6 0.38s cubic-bezier(0.1, 0.9, 0.25, 1) forwards !important;
}

@keyframes zgSparkFlyV6 {
  0% { transform: rotate(var(--angle)) scaleX(0.1); opacity: 1; }
  100% { transform: rotate(var(--angle)) scaleX(1.8); opacity: 0; }
}

@keyframes zgRingExpandV6 {
  0% { transform: translate(-50%, -50%) scale(0.1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}

@keyframes zgShieldBurstV6 {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0.9; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

.zg-gacha-reward-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background: rgba(255,255,255,.045);
}

.zg-gacha-reward-icon {
  flex: 0 0 auto;
  font-size: 28px;
  line-height: 1;
}

.zg-gacha-reward-main {
  min-width: 0;
  flex: 1 1 auto;
}

.zg-gacha-reward-name {
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.zg-gacha-reward-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 5px;
  color: #9ca8c2;
  font-size: 11px;
}

.zg-gacha-reward-detail {
  margin-top: 10px;
}

.zg-gacha-reward-code-label {
  color: #aab4ca;
  font-size: 10px;
  font-weight: 800;
}

.zg-gacha-reward-code {
  margin-top: 4px;
  color: #ffe083;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 1px;
  word-break: break-all;
}

.zg-gacha-reward-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.zg-gacha-copy-coupon,
.zg-gacha-download-coupon {
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.zg-gacha-copy-coupon {
  border: 1px solid #ffe083;
  background: rgba(255,224,131,.12);
  color: #ffe083;
}

.zg-gacha-download-coupon {
  border: 1px solid #57d7ff;
  background: rgba(87,215,255,.12);
  color: #57d7ff;
}

.zg-gacha-points-value {
  display: block;
  color: #ffe083;
  font-size: 15px;
  font-weight: 950;
}

.zg-gacha-points-redeemed {
  display: block;
  margin-top: 4px;
  color: #73f5a5;
  font-size: 11px;
  font-weight: 850;
}

.zg-gacha-physical-status {
  color: #d5dcf0;
  font-size: 11px;
  font-weight: 800;
}

.zg-gacha-code-pending {
  color: #ffce76;
  font-size: 11px;
}

.zg-gacha-reward-side {
  flex: 0 0 auto;
}

.zg-gacha-status-pill {
  display: inline-block;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.zg-gacha-status-pill.is-unused {
  background: rgba(62,227,135,.14);
  color: #73f5a5;
}

.zg-gacha-status-pill.is-used {
  background: rgba(146,158,185,.15);
  color: #b8c0d2;
}

.zg-gacha-status-pill.is-expired {
  background: rgba(255,83,111,.12);
  color: #ff8195;
}