/* ==========================================================================
 * /item-v2.css — Phase 1 mobile-first responsive shell for /item-v2.html
 *
 * v55fs (2026-04-30): First cut of the single-codebase responsive /item page.
 * - Mobile (≤719px): cosmic nebula hero + 4-col grid + bottom CTA bar
 *                    (匹配 /m/item.html 既有設計)
 * - Desktop (≥720px): hide mobile chrome, show legacy detail-hero/detail-side
 *                     (沿用 /styles.css 既有桌機 layout)
 *
 * Phase 2 將補滿桌機側的 polish；Phase 3 加 JS adapter 把 /item.js 既有
 * data flow mount 進新的 mobile sections (lineup / queue card / mobile prizes)。
 *
 * 跟 /m/item.css 同源 (mi-* → iv2-*) 但僅在 viewport ≤719px 啟用，避免
 * 桌機 layout 受到污染。
 * ========================================================================== */

/* ==========================================================================
 * Mobile-first base (apply to all viewports, override at desktop @media)
 * ========================================================================== */

.iv2-body {
  /* c119: CTA 還原 92px → padding 還原 232px */
  padding-bottom: calc(232px + env(safe-area-inset-bottom, 0px));
  /* ↑ 為底部 cta + queue 留位 */
}

/* c115 (2026-04-30): MOBILE LITE MODE — user 反應「閃 + 非常 LAG」。
   /item.html 重用桌機 14000 行 /item.js 含 16 個 setInterval + MutationObserver
   + 大量動畫，跟舊 H5 dedicated codebase 比起來太重。手機上強制全面靜態化:
   - 所有 transition / animation 強制 none
   - 所有 filter (drop-shadow / backdrop-filter) 拿掉 (GPU 重)
   - will-change / transform 不用
   - object-fit content-visibility 加 auto 讓離屏 section 不渲染 */
@media (max-width: 719px) {
  /* c128 (2026-04-30): 真兇 — galaxy-theme.css line 56-67 有
     `body.galaxy { background: 4-layer gradient fixed !important; background-attachment: fixed !important }`，
     用 !important 蓋 c111 的 item.css 移除。手機 scroll 時 4 層 viewport-sized
     radial-gradient 反覆重算 = flicker。c107-c127 16 個 deploy 從來沒查
     galaxy-theme.css，所以一直找不到。 */
  /* c132 (2026-04-30): c131 gradient on body 又閃 —
     真兇：c131 用 background-size: 100% 100% 把 gradient 拉伸到整個 body
     高度 (可能 4000-6000px)。Chrome 手機 URL bar 收合時 body 高度會變
     (e.g., 4000 → 4040)，gradient bitmap 必須重新拉伸 → repaint flicker。
     修法：用 FIXED PIXEL background-size (1400px)，body 高度怎麼變
     都不影響 gradient bitmap — 因為它是固定 1400px 不依賴 body height。
     gradient 不 repeat，下面用 background-color 補足。 */
  body.galaxy.iv2-body,
  body.galaxy.iv2-body:has(*),
  html body.galaxy.iv2-body {
    background-color: #20105a !important;
    background-image: linear-gradient(
      180deg,
      #5a2dab 0%,
      #3a1684 35%,
      #20105a 100%
    ) !important;
    background-size: 100% 1400px !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: 0 0 !important;
  }
  /* c133 (2026-04-30): User report「滑動時黑窗在畫面前密閃」—
     真兇：fixed/sticky 元素 (.iv2-top, .iv2-cta, .iv2-queue__head) 上有
     ALPHA GRADIENT (e.g., .iv2-cta 頂端 rgba(10,5,32,0) 全透明)，scroll
     時 fixed layer 跟 body 做 alpha-blend，每幀都要重 composite = 閃爍。
     c130 加了 background-color 但沒清掉 background-image 的 alpha gradient
     就是這層繼續 composite。
     修法：完全 nuke alpha gradient，用 SOLID background-image: none + 純色 bg。 */
  body.iv2-body .iv2-top {
    background: #0a0420 !important;
    background-image: none !important;
  }
  body.iv2-body .iv2-cta {
    background: #0a0420 !important;
    background-image: none !important;
  }
  body.iv2-body .iv2-queue__head {
    background: #1b0e44 !important;
    background-image: none !important;
  }
  /* c127 (2026-04-30): animation-duration: 0s ≠ disabled animation！瀏覽器
     會「無限快速跑 keyframes」每秒 fire 數百次 paint = 我們追了 c111-c126
     的 flicker 真兇。改成 animation: none 真的停。
     EXCEPT 跑馬燈 ticker — user 要求保留。.item-winners-marquee 走自己 CSS。 */
  body.iv2-body *:not([class*="winners-marquee"]):not([class*="winners-marquee"] *),
  body.iv2-body *::before,
  body.iv2-body *::after {
    animation: none !important;
    transition: none !important;
  }
  /* 跑馬燈例外 — 保留它的 CSS animation 跑 */
  body.iv2-body .item-winners-marquee,
  body.iv2-body .item-winners-marquee *,
  body.iv2-body .iv2-winners,
  body.iv2-body .iv2-winners * {
    animation: revert !important;
    transition: revert !important;
  }
  body.iv2-body .iv2-hero__triangle-edge,
  body.iv2-body .iv2-hero__lineup-item,
  body.iv2-body .iv2-fab,
  body.iv2-body .iv2-card__tier-label,
  body.iv2-body .iv2-hero__feature-tier {
    filter: none !important;
  }
  /* c118: 拿掉 content-visibility — 沒精準 contain-intrinsic-size 害
     scroll height 計算錯，user 反應「畫面無法往下」。LAG 已透過 c116
     setInterval throttle 解，content-visibility 副作用大於收益。 */
}

/* c111 (2026-04-30): 移除 background-attachment: fixed — 手機 Chrome
   滑動時持續重繪 viewport-sized 漸層 = 閃爍主因。改用 .iv2-body::before
   pseudo-element 做 fixed bg layer，跟 scroll 解耦。
   c109 brighter nebula 紫保留，只動 attachment 機制。 */
@media (max-width: 719px) {
  body.iv2-body {
    background: linear-gradient(180deg, #2d1670 0%, #160838 50%, #0a0420 100%);
    color: #e8d8ff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
    /* c113: 100vh → 100svh — Chrome 手機 URL 列收合時 100vh 持續變動 → body
       重新佈局 → 整頁 repaint = 整頁閃爍主因。100svh (small viewport height)
       是 fixed 值不會變。 */
    min-height: 100svh;
    overflow-x: hidden;
    /* c118: 拿掉 overscroll-behavior: contain — 部分 Android Chrome 把
       contain 解讀成「禁止過度滾動」連帶卡住正常 scroll。改 auto 預設 */
  }

  /* Hide desktop ambient orbs on mobile */
  body.iv2-body .bg-orb { display: none; }

  /* Hide legacy desktop chrome on mobile */
  body.iv2-body .iv2-legacy { display: none; }
  body.iv2-body .iv2-top__desktop-actions { display: none; }
  body.iv2-body .iv2-drawbar { display: none; }
  body.iv2-body .iv2-related,
  body.iv2-body .iv2-history { padding: 0 12px 16px; }

  /* c124 (2026-04-30): 強制 mobile 永遠不顯示 loader spinner — c123 JS 版
     有些 user 因 SW cache 沒拿到，CSS 強制隱藏不依賴 JS 是否載入新版。
     mobile-base.js 的 loadPool 會 fetch + render content；user 看到的是
     先 hero/title (HTML 已有)，content 補上來，比看 loader spinner 好。 */
  body.iv2-body #detailModeLoader,
  body.iv2-body.item-page--mode-pending #detailModeLoader {
    display: none !important;
  }
  /* 同樣強制移除 mode-pending 對 .detail 的 min-height: 860px 撐高 */
  body.iv2-body.item-page--mode-pending .detail {
    min-height: 0 !important;
  }

  /* Brand logo hidden on mobile — round buttons replace it */
  body.iv2-body .iv2-top__brand { display: none; }

  /* c138 (2026-04-30): 真兇「版面沒在中間」— .page 在 styles.css line 2897
     有桌機 padding (5vw) + gap (90px)，手機完全沒 override，所以 .iv2-page
     繼承到「左右 5vw 留空 + sections 之間 90px 巨大空隙」造成內容看起來
     被擠到一邊不在中間。修法：手機強制 padding 0 + gap 0，讓 iv2 sections
     用自己的 padding 控制邊距。 */
  body.iv2-body main.iv2-page,
  body.iv2-body .iv2-page.page {
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  /* c135 (2026-04-30): 真兇 — .draw-overlay 跟 .draw-handoff-flash 是
     fullscreen position:fixed 黑/白 backdrop，雖然 opacity:0 隱藏但仍在
     GPU compositor layer tree（含內部兩個 <video> 元素）。Scroll 時
     mobile Chrome 短暫掉幀 → 0.96 alpha 黑色 flash 閃過 = 用戶看到的
     「螢幕前面密閃」。c107-c134 從沒查 styles.css 內這些 overlay。
     修法：手機強制 display:none，.is-visible 出現時才用 display:flex
     重新加進 layer tree。掐掉 layer 即掐掉 flash 機會。 */
  .draw-overlay:not(.is-visible),
  .draw-handoff-flash:not(.is-visible) {
    display: none !important;
  }
  .gacha-stage:not(.is-visible) {
    display: none !important;
  }
}

/* c113: 直接 hide iv2-sparkles 在手機 — fixed full-screen overlay 是
   閃爍放大器。c111 動畫關了還是 fixed inset:0，body reflow 時跟著被
   repaint。乾脆 disable，視覺上幾乎不影響（背景已經有 nebula 漸層）。 */
.iv2-sparkles { display: none !important; }
@media (max-width: 719px) {
  .iv2-sparkles {
    display: none !important;
  }

  /* c112 (2026-04-30): 加 CSS containment + 移除 transition 修閃爍。
     - contain: layout paint = 告訴瀏覽器這些 section 互不影響，scroll 時
       單獨 paint 不需 cascade 計算其他 section
     - transition: none = scroll 時 element 重新進 viewport 不會觸發任何
       過渡動畫（lineup hover transform / queue chip 等）
     - 移除 hero lineup 的 transition: transform 0.3s ease，scroll 撞到
       sticky 元素的 hover state 時不會觸發 transform 動畫 = 不再閃 */
  /* c114: 拿掉 .iv2-hero 的 contain: paint — 會 clip drop-shadow 害
     lineup 圖看起來淡掉。其他 section 保留 contain: layout 即可（不 paint）。 */
  body.iv2-body .iv2-meta,
  body.iv2-body .iv2-tabs,
  body.iv2-body .iv2-prizes-grid,
  body.iv2-body .iv2-queue,
  body.iv2-body .iv2-cta {
    contain: layout;
  }
  body.iv2-body .iv2-hero__lineup-item,
  body.iv2-body .iv2-card,
  body.iv2-body .iv2-cta__btn {
    transition: none !important;
  }
}

/* ==========================================================================
 * Top toolbar (.iv2-top) — mobile mode
 * ========================================================================== */
@media (max-width: 719px) {
  .iv2-top {
    position: sticky;
    top: env(safe-area-inset-top, 0);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px 8px;
    /* c111: 移除 backdrop-filter blur(8px) — sticky topbar scroll 時每幀
       blur 重做 = 閃爍。改用更實心 gradient 取代 visual blur 效果 */
    background: linear-gradient(180deg, rgba(10, 5, 32, 0.96), rgba(10, 5, 32, 0.85) 70%, rgba(10, 5, 32, 0.4));
    border: 0;
    box-shadow: none;
  }
  .iv2-top__btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(196, 176, 255, 0.25);
    background: rgba(20, 10, 54, 0.78);
    color: #e8d8ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.18s ease, background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .iv2-top__btn:active { transform: scale(0.94); background: rgba(35, 19, 85, 0.95); }
  .iv2-top__back { margin-right: auto; }
  .iv2-top__cluster {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }
  .iv2-top__inv {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b9e63d, #5fa629);
    color: #0a1f00;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(95, 166, 41, 0.4);
    text-decoration: none;
    flex-shrink: 0;
  }
  .iv2-top__inv-label { letter-spacing: 0.1em; }
}

/* ==========================================================================
 * Hero — mobile podium + lineup
 * ========================================================================== */
@media (max-width: 719px) {
  .iv2-hero {
    position: relative;
    padding: 8px 16px 32px;
    margin-top: 8px;
  }
  /* c109 (2026-04-30): 加大 hero title 對齊 reference H5「遊戲機介面」氣場
     原本 18px 偏小看像桌機，reference 是 24-26px 大字 + 強漸層 + 強光暈。 */
  .iv2-hero__title {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-align: center;
    background: linear-gradient(135deg, #ff9be7, #c4b0ff, #8ae5ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 16px rgba(255, 155, 231, 0.5);
    line-height: 1.3;
  }
  .iv2-hero__tags {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 8px;
  }
  /* c110: revert stage 280px → 240px，c109 太高把 lineup 圖頂出視窗 */
  .iv2-hero__stage {
    position: relative;
    height: 240px;
    margin: 0 -16px;
    display: flex;
    align-items: end;
    justify-content: center;
  }
  .iv2-hero__triangle {
    position: absolute;
    inset: 20px 24px 12px;
    pointer-events: none;
    perspective: 800px;
  }
  .iv2-hero__triangle-edge {
    position: absolute;
    bottom: 18%;
    width: 50%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #ff9be7, #8ae5ff, transparent);
    opacity: 0.85;
    filter: drop-shadow(0 0 6px #ff9be7);
  }
  .iv2-hero__triangle-edge--left {
    left: 0;
    transform: rotate(-32deg);
    transform-origin: bottom right;
  }
  .iv2-hero__triangle-edge--right {
    right: 0;
    transform: rotate(32deg);
    transform-origin: bottom left;
  }
  .iv2-hero__triangle-floor {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) perspective(400px) rotateX(60deg);
    width: 88%;
    height: 56px;
    background:
      linear-gradient(180deg, rgba(196, 176, 255, 0.18), transparent),
      repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(138, 229, 255, 0.18) 11px, rgba(138, 229, 255, 0.18) 12px),
      repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(196, 176, 255, 0.14) 11px, rgba(196, 176, 255, 0.14) 12px);
    border-radius: 50%;
    opacity: 0.6;
  }
  .iv2-hero__lineup {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 0 24px;
    z-index: 2;
  }
  .iv2-hero__lineup-item {
    display: flex;
    align-items: end;
    justify-content: center;
    filter: drop-shadow(0 8px 14px rgba(255, 155, 231, 0.35));
    transition: transform 0.3s ease;
  }
  /* c119: 還原 c110 大小 — user 確認真機看起來「正常」，c118 縮小是
     誤判 LDPlayer 模擬器渲染為真實放大。真機跑這個 size 才有 mobile-native 感。 */
  .iv2-hero__lineup-item img {
    width: 84px;
    height: 84px;
    object-fit: contain;
  }
  .iv2-hero__lineup-item--featured img {
    width: 130px;
    height: 130px;
    filter: drop-shadow(0 10px 22px rgba(255, 155, 231, 0.5));
  }
  .iv2-hero__lineup-item--side img {
    width: 68px;
    height: 68px;
    opacity: 0.9;
  }
  /* c110: feature label 位置從 c109 的 14% 改回 18%，配合 stage 240px */
  .iv2-hero__feature {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  /* c109: tier label 大幅加大 + 漸層字 對齊 reference 「E賞」霓虹效果 */
  .iv2-hero__feature-tier {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.12em;
    background: linear-gradient(135deg, #b9e63d, #5fa629);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 0 12px rgba(185, 230, 61, 0.8));
    font-style: italic;
  }
  .iv2-hero__progress {
    margin-top: 12px;
  }
}

/* ==========================================================================
 * Meta bar — mobile (price + box info)
 * ========================================================================== */

/* c107: 強制覆蓋 styles.css 的 item-page--mode-pending 隱藏 mobile sections。
   原本: body.item-page.item-page--mode-pending 把 .detail-hero / .detail-grid
   visibility: hidden + max-height: 0；但 iv2-meta / iv2-tabs / iv2-prizes-grid
   不在那 selector 內，理論上不影響。實機測試 (LDPlayer 2026-04-30) drawn
   pool 61 mobile mode-pending 一直沒移除（可能 timer race / event order），
   導致 .detail 整段被 min-height: 860px 撐高但裡面 iv2-* 都看不到。
   c107 直接強制 iv2-* 顯示 unconditional + 加可視 debug border。 */
@media (max-width: 719px) {
  body.iv2-body.item-page--mode-pending .detail {
    min-height: 0 !important;
  }
  body.iv2-body .iv2-hero,
  body.iv2-body .iv2-meta,
  body.iv2-body .iv2-tabs,
  body.iv2-body .iv2-prizes-grid {
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* c108 (2026-04-30): 強制 queue 預設可見 (取代原本 [hidden] = display:none)
     讓 user 一進站就看到「請排隊 + 加入列隊」chip — 跟 reference H5 design 對齊。
     adapter.js 若 detailSideQueueBtn 不存在仍會 set hidden=true，但 user
     log out 狀態下仍能看到 placeholder。 */
  body.iv2-body .iv2-queue:not([hidden]) {
    display: block !important;
  }
}

@media (max-width: 719px) {
  .iv2-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px 8px;
  }
  .iv2-meta__price {
    font-size: 13px;
    color: #c4b0ff;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .iv2-meta__price strong {
    font-size: 22px;
    font-weight: 900;
    color: #ffae5c;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(255, 174, 92, 0.45);
    margin-right: 2px;
  }
  .iv2-meta__box-info {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #c4b0ff;
  }
  .iv2-meta__box-info[hidden] { display: none; }
  .iv2-meta__box-pos strong { color: #e8d8ff; font-weight: 800; font-size: 14px; }
  .iv2-meta__box-stock strong { color: #8ae5ff; font-weight: 800; font-size: 14px; }
  .iv2-meta__legacy { display: none; }
}

/* ==========================================================================
 * Box switch nav — mobile (3 pill buttons, only if multi-box)
 * ========================================================================== */
@media (max-width: 719px) {
  .iv2-boxnav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 4px 16px 14px;
  }
  .iv2-boxnav[hidden] { display: none; }
  .iv2-boxnav__arrow {
    height: 48px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1a1042, #0d0628);
    border: 1px solid rgba(196, 176, 255, 0.2);
    color: #e8d8ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .iv2-boxnav__arrow:active { transform: scale(0.96); }
  .iv2-boxnav__center {
    height: 56px;
    width: 88px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9be7, #c4b0ff, #8ae5ff);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #2a0419;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    position: relative;
    box-shadow:
      0 6px 18px rgba(255, 155, 231, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .iv2-boxnav__center:active { transform: scale(0.95); }
  .iv2-boxnav__icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    margin-top: -4px;
  }
  .iv2-boxnav__label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #2a0419;
    margin-top: -2px;
  }
}

/* ==========================================================================
 * Pool tabs (賞品 / 榜單 / 紀錄) — mobile-friendly pill row
 * ========================================================================== */
@media (max-width: 719px) {
  body.iv2-body .iv2-tabs {
    margin: 0 12px 8px;
    padding: 0;
  }
  body.iv2-body .iv2-tabs .pool-tabs__nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 4px;
    background: rgba(20, 10, 54, 0.7);
    border-radius: 999px;
    border: 1px solid rgba(196, 176, 255, 0.2);
    margin-bottom: 12px;
  }
  /* c109: tab 加大 38px → 46px + 字大一級 對齊 reference 粗壯 pill */
  body.iv2-body .iv2-tabs .pool-tabs__tab {
    appearance: none;
    height: 46px;
    border: 0;
    background: transparent;
    color: #c4b0ff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
  }
  body.iv2-body .iv2-tabs .pool-tabs__tab.is-active {
    background: linear-gradient(180deg, #f6f2ff, #d1c4ff);
    color: #2a0419;
    box-shadow: 0 4px 12px rgba(196, 176, 255, 0.45);
  }
  body.iv2-body .iv2-tabs .pool-tabs__tab-icon { display: none; }
  body.iv2-body .iv2-tabs .pool-tabs__panel-inner { padding: 0; }
}

/* ==========================================================================
 * Floating refresh FAB — mobile only
 * ========================================================================== */
.iv2-fab { display: none; }

@media (max-width: 719px) {
  .iv2-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(212px + env(safe-area-inset-bottom, 0px));
    z-index: 60;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    filter: drop-shadow(0 6px 18px rgba(138, 229, 255, 0.5));
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .iv2-fab:active { transform: scale(0.92) rotate(45deg); }
  .iv2-fab__icon { width: 50px; height: 50px; object-fit: contain; }
}

/* ==========================================================================
 * Bottom fixed CTA bar — mobile only (cosmic glassy hexagon-pill buttons)
 * ========================================================================== */
.iv2-cta { display: none; }

@media (max-width: 719px) {
  .iv2-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    /* c111: 用實心高不透明度漸層取代 backdrop-filter blur(8px) — blur 在
       scroll 時每幀重做高斯模糊 = 閃爍源。實心漸層 GPU 0 開銷。 */
    background: linear-gradient(180deg, rgba(10, 5, 32, 0) 0%, rgba(10, 5, 32, 0.95) 30%, rgba(10, 5, 32, 0.99) 100%);
  }
  /* c119: 還原 92px (c109 size) — 真機 ok，c118 縮回是誤判模擬器 artifact */
  .iv2-cta__btn {
    appearance: none;
    border: 0;
    height: 92px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff5d8f 0%, #d63d6c 60%, #b22a55 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    position: relative;
    box-shadow:
      0 8px 0 #5a0c25,
      0 14px 24px rgba(214, 61, 108, 0.55),
      inset 0 3px 0 rgba(255, 255, 255, 0.5),
      inset 0 -14px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
  }
  .iv2-cta__btn:active {
    transform: translateY(5px);
    box-shadow:
      0 3px 0 #5a0c25,
      0 6px 10px rgba(214, 61, 108, 0.5),
      inset 0 3px 0 rgba(255, 255, 255, 0.4),
      inset 0 -14px 18px rgba(0, 0, 0, 0.22);
  }
  .iv2-cta__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  /* c109: 字體加大 + 加粗 對齊 reference 大字感 */
  .iv2-cta__qty {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-style: italic;
    line-height: 1;
  }
  .iv2-cta__price {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }
  /* c109: 選籤按鈕也加大陰影 */
  .iv2-cta__btn--pick {
    background: linear-gradient(180deg, #ff9be7 0%, #d65fb0 60%, #a13a85 100%);
    box-shadow:
      0 8px 0 #5a0e4d,
      0 14px 24px rgba(214, 95, 176, 0.55),
      inset 0 3px 0 rgba(255, 255, 255, 0.5),
      inset 0 -14px 18px rgba(0, 0, 0, 0.22);
  }
  .iv2-cta__pick-label {
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }
}

/* ==========================================================================
 * Tiny phone tweak (≤360px)
 * ========================================================================== */
@media (max-width: 360px) {
  .iv2-cta__qty, .iv2-cta__pick-label { font-size: 18px; }
  .iv2-cta__btn { height: 70px; }
  .iv2-hero__title { font-size: 16px; }
}

/* ==========================================================================
 * Larger phones / small tablets (481-719px) — center container
 * ========================================================================== */
@media (min-width: 481px) and (max-width: 719px) {
  .iv2-body main.iv2-page {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* ==========================================================================
 * Desktop (≥720px) — hide all .iv2-* mobile chrome, use legacy desktop layout
 * ========================================================================== */
@media (min-width: 720px) {
  /* Hide mobile-only floating elements */
  .iv2-fab { display: none !important; }
  .iv2-cta { display: none !important; }
  .iv2-sparkles { display: none; }

  /* Hide mobile-first hero/meta/boxnav wrappers — desktop uses .iv2-legacy */
  .iv2-meta,
  .iv2-boxnav { display: none; }

  /* Keep the title visible on desktop too (lives in iv2-hero so /item.js's
     #detailTitle still works), but hide the cosmic podium stage that's
     mobile-only visual flair. */
  .iv2-hero {
    display: block;
    text-align: center;
    margin: 0 auto 16px;
    padding: 16px 0 0;
  }
  .iv2-hero__title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: none;
    -webkit-text-fill-color: initial;
    color: #f1f5f9;
    text-shadow: none;
  }
  .iv2-hero__tags {
    color: #94a3b8;
    font-size: 13px;
  }
  .iv2-hero__stage,
  .iv2-hero__progress { display: none; }

  /* Show legacy desktop layout (unhidden) */
  .iv2-legacy { display: block; }
  .iv2-legacy .detail-hero {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
    padding: 20px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    margin-bottom: 16px;
  }
  .iv2-legacy .detail-thumb {
    aspect-ratio: 1;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
  }
  .iv2-legacy .detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .iv2-legacy .detail-main { min-width: 0; }
  .iv2-legacy .detail-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .iv2-legacy .detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
  .iv2-legacy .detail-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 14px;
    padding: 16px;
  }

  /* Desktop topbar — mimic original /item.html .topbar */
  .iv2-top {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 24px;
    background: rgba(15, 23, 42, 0.92);
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    position: relative;
    backdrop-filter: blur(8px);
  }
  .iv2-top__back,
  .iv2-top__cluster,
  .iv2-top__inv { display: none !important; }
  .iv2-top__brand {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
  }
  .iv2-top__brand img { height: 40px; width: auto; display: block; }
  .iv2-top__desktop-actions {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    margin-left: auto;
  }

  /* drawBar visible on desktop */
  .iv2-drawbar { display: flex !important; }

  /* Reset main page padding for desktop (mobile had bottom-CTA reservation) */
  body.iv2-body { padding-bottom: 80px; }

  /* Page width container */
  .iv2-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 20px;
  }
}

/* ==========================================================================
 * Phase 1 placeholder — mobile board / record empty styles
 * ========================================================================== */
@media (max-width: 719px) {
  body.iv2-body .pool-tabs__panel-inner .form-hint {
    text-align: center;
    padding: 24px 16px;
    color: rgba(196, 176, 255, 0.7);
    font-size: 13px;
  }

  body.iv2-body .pool-board__cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
}

/* ==========================================================================
 * v55ga Phase 4 polish: Mobile 4-col prize grid (.iv2-prizes-grid)
 * Mounts via /item-adapter.js renderMobilePrizes() into #iv2Prizes.
 * Desktop hides this — uses /item.js's renderProbabilityPanels output.
 * ========================================================================== */
.iv2-prizes-grid { display: none; }

@media (max-width: 719px) {
  body.iv2-body .iv2-prizes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 12px 4px 0;
  }
  /* Hide desktop catalog panel mount on mobile — replaced by .iv2-prizes-grid */
  body.iv2-body #poolCatalogPanelMount { display: none; }

  .iv2-card {
    background: linear-gradient(180deg, #1f1352 0%, #14093a 100%);
    border-radius: 14px;
    border: 1px solid rgba(196, 176, 255, 0.16);
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .iv2-card__tier {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 8px 4px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
  }
  /* c109: tier label 加大 + 強發光 對齊 reference 「Last賞 / A賞 / B賞」霓虹漸層感 */
  .iv2-card__tier-label {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-style: italic;
    background: linear-gradient(135deg, #ff9be7, #c4b0ff, #8ae5ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.35);
    filter: drop-shadow(0 0 6px rgba(255, 155, 231, 0.55));
  }
  /* v9 (2026-05-04): 7 級獨立 gradient — 用戶投訴「S A 那邊都是金色欸」.
     之前 S+A 共用同一 selector 都金色, 拆獨立 + last 賞額外彩虹 + common
     灰色化 (avoid 跟 D teal 同色系) */
  .iv2-card[data-tier-rank="last"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #ffeb6b, #ff5cd6, #74f5ff);  /* radiant rainbow — 最終賞 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.6));
  }
  .iv2-card[data-tier-rank="s"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);  /* pure gold — S 賞 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-tier-rank="a"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #ff9128, #ef4444);  /* fiery red-orange — A 賞 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-tier-rank="b"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #c4b0ff, #a855f7);  /* purple — B 賞 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-tier-rank="c"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #8ae5ff, #3b82f6);  /* azure blue — C 賞 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-tier-rank="d"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #5eead4, #14b8a6);  /* teal — D 賞 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-tier-rank="common"] .iv2-card__tier-label,
  .iv2-card[data-tier-rank="default"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);  /* silver — 普通 */
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  /* v15 (2026-05-04): admin-set glow color override (per-level setting in
     /admin-levels). data-glow-color 跟 data-tier-rank 共存; data-glow-color
     specificity 比較高 (兩個 attribute selector) 所以 override tier-rank 的色.
     Owner mandate 跨 scope A:「他裡面也有等級」+ admin 後台 10 色 picker
     (gold/red/purple/blue/white/pink/orange/cyan/green) 對應 gradient.
     RAINBOW 故意 skip — owner mandate「彩虹光這個特效隱藏好了 卡片那個」.
     沒設 glow color (admin 沒選或舊資料) 走 fallback data-tier-rank 色. */
  .iv2-card[data-glow-color="gold"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="red"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="purple"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #c4b0ff, #a855f7);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="blue"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #60a5fa, #1d4ed8);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="white"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #f3f4f6, #d1d5db);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="pink"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #f9a8d4, #be185d);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="orange"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #fb923c, #c2410c);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="cyan"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #67e8f9, #0e7490);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .iv2-card[data-glow-color="green"] .iv2-card__tier-label {
    background: linear-gradient(135deg, #86efac, #15803d);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  /* rainbow 故意不定義 — admin 設了 rainbow 也 strip 成 ""，CSS 走 data-tier-rank
     fallback (依 tier 名稱字母套色). 「彩虹光特效隱藏」owner mandate. */

  .iv2-card__tier-prob {
    font-size: 9px;
    color: rgba(196, 176, 255, 0.7);
    font-weight: 700;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    margin-left: auto;
  }
  .iv2-card__media {
    position: relative;
    aspect-ratio: 1;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .iv2-card__media img {
    width: 86%;
    height: 86%;
    object-fit: contain;
  }
  .iv2-card__count {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 11px;
    font-weight: 800;
    color: rgba(196, 176, 255, 0.85);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  .iv2-card__name {
    font-size: 10px;
    color: rgba(196, 176, 255, 0.7);
    padding: 4px 6px 8px;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Tiny phones — drop to 3 cols */
@media (max-width: 360px) {
  body.iv2-body .iv2-prizes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ==========================================================================
 * v55ga Phase 4: Mobile queue card (.iv2-queue) above bottom CTA bar
 * Synced from #detailSideQueueBtn by /item-adapter.js
 * ========================================================================== */
.iv2-queue { display: none; }

@media (max-width: 719px) {
  .iv2-queue {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    z-index: 65;
    padding: 0 12px;
    pointer-events: none;
  }
  .iv2-queue[hidden] { display: none; }
  .iv2-queue__head {
    background: linear-gradient(135deg, rgba(20, 10, 54, 0.95), rgba(35, 19, 85, 0.92));
    border: 1px solid rgba(196, 176, 255, 0.25);
    border-radius: 14px;
    padding: 8px 8px 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    box-shadow: 0 8px 22px rgba(10, 5, 32, 0.55);
    /* c111: 移除 backdrop-filter blur(6px) — fixed queue chip scroll 時每幀
       blur 重做 = 閃爍。改用實心紫色 gradient 自帶 0.95+ 不透明度 */
  }
  .iv2-queue__chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b9a3ff, #c4b0ff);
    color: #2a0419;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    flex-shrink: 0;
  }
  .iv2-queue__chip[data-tone="success"] {
    background: linear-gradient(135deg, #b9e63d, #6cb02e);
  }
  .iv2-queue__chip[data-tone="warning"] {
    background: linear-gradient(135deg, #ffae5c, #d97706);
    color: #2a0419;
  }
  .iv2-queue__chip[data-tone="danger"] {
    background: linear-gradient(135deg, #ff5d8f, #b22a55);
    color: #fff;
  }
  .iv2-queue__sub {
    flex: 1;
    font-size: 11px;
    color: rgba(196, 176, 255, 0.75);
    letter-spacing: 0.02em;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .iv2-queue__sub strong { color: #e8d8ff; font-weight: 800; }
  .iv2-queue__cta {
    appearance: none;
    border: 0;
    height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b9e63d, #6cb02e);
    color: #0a1f00;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(108, 176, 46, 0.45);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
  }
  .iv2-queue__cta:active { transform: scale(0.96); }
  .iv2-queue__cta:disabled { opacity: 0.5; cursor: not-allowed; }
  .iv2-queue__cta[data-queue-state="active"] {
    background: linear-gradient(135deg, #ff9be7, #ff5d8f);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 93, 143, 0.5);
  }
  .iv2-queue__cta[data-queue-state="blocked"] {
    background: linear-gradient(135deg, #6b5fb0, #4a3d8a);
    color: #f6f2ff;
  }
}

/* ==========================================================================
 * c157 (2026-05-01): inline .dp-star rules from /m/arcade.css
 *
 * /item.html 的 mobile sparkle field (.iv2-sparkles span.dp-star) 是
 * 唯一從 /m/arcade.css (23KB) 用到的東西。其他 4000+ 行 .dp-* 規則都
 * 是 /m/index.html arcade theme 用的，不關 /item 的事。
 *
 * 把 20 行 dp-star 規則直接 inline，砍掉 <link href="/m/arcade.css">
 * 一個 render-blocking stylesheet (gzip 後 ~5KB) + 一個 HTTP request。
 * ========================================================================== */
.dp-star {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.6) 55%, transparent 100%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.75),
              0 0 12px rgba(233, 184, 255, 0.5);
  opacity: 0;
  animation: dp-twinkle 6s ease-in-out infinite;
}
.dp-star--s  { width: 2px; height: 2px; opacity: 0.9; animation-duration: 4.5s; }
.dp-star--m  { width: 3px; height: 3px; animation-duration: 5.8s; }
.dp-star--l  { width: 5px; height: 5px; animation-duration: 7.2s; }
@keyframes dp-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-star { animation: none; opacity: 0.4; }
}


/* 2026-05-02 v60l fix 1.A: endless 池隱藏 mobile #iv2Queue 排隊卡
   item-adapter.js MutationObserver 會把 .hidden = false，所以用 CSS
   !important 強制覆寫。endless 池 sidebar 有自己的「立即抽獎」按鈕，
   不需要這個 mobile queue mirror。 */
body.item-page--endless #iv2Queue {
  display: none !important;
}

/* v60zv: 公平性驗證行銷區塊（endless action section 內）
   marine 深海寶庫風 — 對齊首頁 #050a1c navy + #22d3ee cyan + #fbbf24 gold
   給客戶隨時查看當日機率 commit + HMAC seed + audit chain */
.detail-side__fairness-link {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 11px;
  padding: 11px 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
    linear-gradient(135deg, rgba(15, 30, 68, 0.78), rgba(10, 26, 62, 0.92));
  border: 1px solid rgba(103, 232, 249, 0.42);
  border-radius: 12px;
  color: #f0fdff;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 24px -8px rgba(34, 211, 238, 0.25);
  position: relative;
  overflow: hidden;
}
/* marine top hairline (matches homepage abyssal cards) */
.detail-side__fairness-link::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(92, 230, 255, 0), rgba(92, 230, 255, 0.72), rgba(92, 230, 255, 0));
  opacity: 0.72;
  pointer-events: none;
}
.detail-side__fairness-link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(103, 232, 249, 0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.detail-side__fairness-link:hover::before,
.detail-side__fairness-link:focus-visible::before {
  transform: translateX(100%);
}
.detail-side__fairness-link:hover,
.detail-side__fairness-link:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
    linear-gradient(135deg, rgba(20, 40, 88, 0.85), rgba(15, 36, 80, 0.95));
  border-color: rgba(103, 232, 249, 0.7);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px -8px rgba(34, 211, 238, 0.45);
}
.detail-side__fairness-link:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.7);
  outline-offset: 2px;
}
.detail-side__fairness-icon {
  font-size: 22px;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.55));
}
.detail-side__fairness-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.detail-side__fairness-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #67e8f9;
  letter-spacing: 0.02em;
}
.detail-side__fairness-sub {
  font-size: 11px;
  color: rgba(165, 243, 252, 0.85);
  line-height: 1.45;
}
.detail-side__fairness-arrow {
  flex: 0 0 auto;
  opacity: 0.85;
  font-size: 14px;
  color: #67e8f9;
}
@media (max-width: 480px) {
  .detail-side__fairness-icon { font-size: 20px; }
  .detail-side__fairness-title { font-size: 12.5px; }
  .detail-side__fairness-sub { font-size: 10.5px; }
}

/* v60zv: 「可驗證」trust pill — marine cyan，對齊首頁 */
.detail-side__queue-head-pill.is-verifiable {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(8, 145, 178, 0.18));
  border: 1px solid rgba(103, 232, 249, 0.55);
  color: #67e8f9;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* =============================================================================
 * 92-endless-item-marine.css
 *   Marine 深海寶庫風 override for /item endless pool pages
 *
 * Scope: body.item-page--endless ONLY — yifan / tower / RPG 不受影響。
 * 對齊 https://seakuji.com/ 首頁 marine palette:
 *   - BG base: #050a1c
 *   - Card: linear-gradient(180deg, rgba(15,30,68,.55), rgba(10,26,62,.72))
 *   - Border accent: rgba(103, 232, 249, 0.55) cyan
 *   - Primary: #22d3ee / #67e8f9
 *   - Accent: #fbbf24 gold
 *   - Top hairline: linear-gradient(90deg, transparent, rgba(92,230,255,.72), transparent)
 *
 * Owner: suspicious-margulis agent (領主賞 lord prize 含 admin 兩頁 + customer frontend)
 *   接班自 keen-hodgkin (2026-05-04 owner mandate scope expansion)
 * v60zw (2026-05-02 marine baseline)
 * v60zz (2026-05-04 polish + mobile @media query)
 * ============================================================================= */

/* ---------- 1. Body / Page background ---------- */
/* v60zx: 帶首頁的「marine 寶庫底圖」過來疊在底層 (對齊 home-marine-bg)
 * 用 ::before 圖層 + body radial gradient 雙層疊：
 *   ::before z=-2  → 寶庫圖 (380KB 2x / 924KB 3x retina)
 *   body bg z=-1  → 半透明 cyan/gold radial overlay 跟導航字保持對比
 *
 * Image source: 跟首頁同 image-asset slot (homepage.background.v1)
 * 預設 fallback: /assets/home/marine-treasure-bg-desktop-2x.webp
 */
body.item-page--endless {
  background:
    radial-gradient(80% 60% at 50% -8%, rgba(34, 211, 238, 0.18), rgba(0, 0, 0, 0) 70%),
    radial-gradient(70% 40% at 80% 15%, rgba(251, 191, 36, 0.10), rgba(0, 0, 0, 0) 65%),
    radial-gradient(60% 50% at 12% 88%, rgba(34, 211, 238, 0.12), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(6, 18, 35, 0.55) 0%, rgba(5, 10, 28, 0.78) 60%, rgba(3, 7, 20, 0.92) 100%) !important;
  background-attachment: fixed !important;
  position: relative;
  overflow-x: clip;  /* iOS Safari overflow-x scroll lock — 用 clip 不用 hidden */
}

/* 寶庫底圖 — z-index: -1 在所有內容後，但在 navy gradient overlay 後 */
body.item-page--endless::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('/assets/home/marine-treasure-bg-desktop-2x.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 飽和度降一點、稍暗，讓上層 cards / text 對比夠 */
  filter: brightness(0.65) saturate(1.05) blur(2px);
  pointer-events: none;
}

/* Retina 螢幕用 3x 高解析版（跟首頁一致）*/
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
  body.item-page--endless::before {
    background-image: url('/assets/home/marine-treasure-bg-desktop-esrgan-3x.webp');
  }
}

/* 海底光柱 (godrays) — 慢轉 conic gradient overlay 加靈氣 */
body.item-page--endless::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background: conic-gradient(
    from 30deg,
    transparent 0%,
    rgba(34, 211, 238, 0.06) 18%,
    transparent 36%,
    rgba(251, 191, 36, 0.04) 60%,
    transparent 78%,
    rgba(34, 211, 238, 0.05) 92%,
    transparent 100%
  );
  filter: blur(60px);
  animation: endless-item-godray 50s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes endless-item-godray {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.item-page--endless::after {
    animation: none;
  }
}

/* ---------- 2. Pool title (頁面正中大標) ---------- */
/* v60zw fix: 真實 selector 是 .iv2-hero__title (responsive item v55fz Phase 5)
 * v60zz: text-shadow 對齊首頁 hero halo (cyan + gold 雙層) */
body.item-page--endless .iv2-hero__title,
body.item-page--endless .iv2-hero__name {
  background: linear-gradient(135deg, #f0fdff 0%, #67e8f9 55%, #fbbf24 110%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  text-shadow:
    0 0 18px rgba(76, 230, 255, 0.28),
    0 0 36px rgba(251, 191, 36, 0.10) !important;
  letter-spacing: 0.01em;
}

/* 90-item-public-redesign.css 的 cyan→purple underline → cyan→gold marine */
body.item-page--endless .iv2-hero__title::after {
  background: linear-gradient(90deg,
    rgba(34, 211, 238, 0) 0%,
    rgba(34, 211, 238, 0.85) 30%,
    rgba(251, 191, 36, 0.85) 70%,
    rgba(251, 191, 36, 0) 100%) !important;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.55) !important;
}

/* Breadcrumb chips — kill cosmic purple, marine cyan/gold */
body.item-page--endless .breadcrumb,
body.item-page--endless .iv2-breadcrumb,
body.item-page--endless .iv2-crumb,
body.item-page--endless [class*="breadcrumb"] a,
body.item-page--endless [class*="breadcrumb"] span {
  color: rgba(165, 243, 252, 0.85) !important;
}
body.item-page--endless .iv2-crumb-current,
body.item-page--endless [class*="breadcrumb"] [aria-current="page"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(251, 191, 36, 0.10)) !important;
  border: 1px solid rgba(103, 232, 249, 0.42) !important;
  color: #67e8f9 !important;
}

/* ---------- 3. Detail card / panel border (showcase 大框 + 右側) ---------- */
body.item-page--endless .detail,
body.item-page--endless .detail-thumb,
body.item-page--endless .detail-side {
  border-color: rgba(103, 232, 249, 0.22) !important;
}

/* shell card 用 marine navy gradient */
body.item-page--endless .detail-side,
body.item-page--endless .detail-thumb {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%),
    linear-gradient(135deg, rgba(15, 30, 68, 0.78), rgba(10, 26, 62, 0.92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 12px 32px -12px rgba(1, 8, 18, 0.5) !important;
  position: relative;
}

/* marine top hairline (對齊首頁 sonar card) */
body.item-page--endless .detail-side::before,
body.item-page--endless .detail-thumb::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(92, 230, 255, 0), rgba(92, 230, 255, 0.55), rgba(92, 230, 255, 0));
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}

/* ---------- 4. Breadcrumb chip (top of page) ---------- */
body.item-page--endless .iv2-crumb,
body.item-page--endless .iv2-crumb a,
body.item-page--endless .iv2-crumb-current {
  background: rgba(10, 26, 62, 0.65) !important;
  border: 1px solid rgba(103, 232, 249, 0.25) !important;
  color: rgba(165, 243, 252, 0.92) !important;
  border-radius: 999px;
}

body.item-page--endless .iv2-crumb-current,
body.item-page--endless .iv2-crumb [aria-current="page"] {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(251, 191, 36, 0.10)) !important;
  border-color: rgba(103, 232, 249, 0.55) !important;
  color: #67e8f9 !important;
  font-weight: 700;
}

/* ---------- 5. Pills (領主賞 / 可驗證 / 單抽) ---------- */
body.item-page--endless .detail-side__queue-head-pill {
  background: rgba(10, 26, 62, 0.78) !important;
  border: 1px solid rgba(103, 232, 249, 0.32) !important;
  color: rgba(240, 253, 255, 0.92) !important;
}

body.item-page--endless .detail-side__queue-head-pill.is-endless {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(8, 145, 178, 0.18)) !important;
  border-color: rgba(103, 232, 249, 0.55) !important;
  color: #67e8f9 !important;
}

body.item-page--endless .detail-side__queue-head-pill.is-verifiable {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(8, 145, 178, 0.18)) !important;
  border-color: rgba(103, 232, 249, 0.55) !important;
  color: #67e8f9 !important;
}

/* "單抽 NT$ 25" price pill — marine gold accent */
body.item-page--endless .detail-side__queue-head-pill.is-price,
body.item-page--endless .detail-side__price-pill {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(245, 158, 11, 0.14)) !important;
  border-color: rgba(251, 191, 36, 0.55) !important;
  color: #fbbf24 !important;
}

/* ---------- 6. 「立即抽獎」big primary button ---------- */
/* v60zz: 加 gold accent — 上邊金色 hairline + bottom gold tint + hover gold rim */
body.item-page--endless .detail-side__queue-btn,
body.item-page--endless #detailSideEndlessBtn {
  position: relative;
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 50%, #0e7490 100%) !important;
  border: 1px solid rgba(103, 232, 249, 0.55) !important;
  color: #050a1c !important;
  font-weight: 800 !important;
  box-shadow:
    0 8px 22px -6px rgba(34, 211, 238, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
  overflow: hidden;
  isolation: isolate;
}
body.item-page--endless .detail-side__queue-btn::before,
body.item-page--endless #detailSideEndlessBtn::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.85), transparent);
  pointer-events: none;
  z-index: 1;
}
body.item-page--endless .detail-side__queue-btn::after,
body.item-page--endless #detailSideEndlessBtn::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  background: linear-gradient(180deg, transparent, rgba(251, 191, 36, 0.10));
  pointer-events: none;
  z-index: 0;
}
body.item-page--endless .detail-side__queue-btn:hover,
body.item-page--endless #detailSideEndlessBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow:
    0 12px 28px -6px rgba(34, 211, 238, 0.7),
    0 0 0 1px rgba(251, 191, 36, 0.45) inset,
    0 0 22px -4px rgba(251, 191, 36, 0.4) !important;
}
body.item-page--endless .detail-side__queue-btn-text {
  color: #050a1c !important;
  position: relative;
  z-index: 2;
}

/* ---------- 7. Tab buttons (獎品 / 榜單 / 記錄) ---------- */
body.item-page--endless .detail-tabs,
body.item-page--endless .detail-tab,
body.item-page--endless .iv2-tab,
body.item-page--endless [role="tablist"] {
  background: rgba(10, 26, 62, 0.55) !important;
  border: 1px solid rgba(103, 232, 249, 0.18) !important;
  border-radius: 14px;
}

body.item-page--endless [role="tab"],
body.item-page--endless .detail-tab,
body.item-page--endless .iv2-tab {
  background: transparent !important;
  color: rgba(165, 243, 252, 0.7) !important;
  border-radius: 10px;
}

body.item-page--endless [role="tab"][aria-selected="true"],
body.item-page--endless [role="tab"].is-active,
body.item-page--endless .detail-tab.is-active,
body.item-page--endless .iv2-tab.is-active {
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.22), rgba(8, 145, 178, 0.18)) !important;
  color: #67e8f9 !important;
  font-weight: 800;
  border: 1px solid rgba(103, 232, 249, 0.55) !important;
  box-shadow: 0 4px 14px -4px rgba(34, 211, 238, 0.4);
}

/* ---------- 8. Live winners ticker (即時中獎) — already cyan, just tighten ---------- */
/* v60zz: 加 .iv2-winners selector + 內文字色明確對齊首頁 home-marine-ticker */
body.item-page--endless .detail-side__winners,
body.item-page--endless .winners-ticker,
body.item-page--endless [data-winners-ticker],
body.item-page--endless .iv2-winners,
body.item-page--endless .item-winners-marquee {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 22%),
    linear-gradient(135deg, rgba(15, 30, 68, 0.6), rgba(10, 26, 62, 0.78)) !important;
  border: 1px solid rgba(103, 232, 249, 0.25) !important;
  overflow: hidden;
}
body.item-page--endless .detail-side__winners::before,
body.item-page--endless .winners-ticker::before,
body.item-page--endless [data-winners-ticker]::before,
body.item-page--endless .iv2-winners::before,
body.item-page--endless .item-winners-marquee::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(92, 230, 255, 0.55), transparent);
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}
body.item-page--endless .winners-ticker__name,
body.item-page--endless [data-winners-ticker] .ticker-name,
body.item-page--endless .iv2-winners__name,
body.item-page--endless .item-winners-marquee__name {
  color: #67e8f9 !important;
  font-weight: 700;
}
body.item-page--endless .winners-ticker__prize,
body.item-page--endless [data-winners-ticker] .ticker-prize,
body.item-page--endless .iv2-winners__prize,
body.item-page--endless .item-winners-marquee__prize {
  color: rgba(240, 253, 255, 0.92) !important;
}
body.item-page--endless .winners-ticker__sep,
body.item-page--endless [data-winners-ticker] .ticker-sep,
body.item-page--endless .iv2-winners__sep,
body.item-page--endless .item-winners-marquee__sep {
  color: rgba(251, 191, 36, 0.55) !important;
}

/* ---------- 9. Star icon top-right ---------- */
body.item-page--endless .star-toggle,
body.item-page--endless [data-watchlist-toggle],
body.item-page--endless .iv2-watchlist-btn {
  background: rgba(10, 26, 62, 0.65) !important;
  border: 1px solid rgba(103, 232, 249, 0.32) !important;
  color: #67e8f9 !important;
}
body.item-page--endless .star-toggle.is-active,
body.item-page--endless [data-watchlist-toggle][data-active="true"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.25), rgba(245, 158, 11, 0.18)) !important;
  border-color: rgba(251, 191, 36, 0.6) !important;
  color: #fbbf24 !important;
}

/* ---------- 10. Hint text 「領主賞獎品無限循環，不需排隊，隨時可抽」 ---------- */
body.item-page--endless .detail-side__queue-hint {
  color: rgba(165, 243, 252, 0.85) !important;
}
body.item-page--endless .detail-side__queue-hint strong {
  color: #fbbf24 !important;
}

/* ---------- 11. Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.item-page--endless {
    background-attachment: scroll !important;
  }
}

/* =============================================================================
 * 12. Mobile (≤720px) — v60zz suspicious-margulis 補手機端 marine 對齊
 *   /m/item.html 不存在；mobile 走同一支 /item.html via media query。
 *   - 收緊 padding / radius 讓螢幕利用率更好
 *   - hero 標題級距 / 行高調手機
 *   - 按鈕仍保留 gold rim 但縮小
 *   - ticker 字級稍縮
 *   - 取消 background-attachment: fixed 改 scroll（iOS Safari + 效能）
 * ============================================================================= */

@media (max-width: 720px) {
  body.item-page--endless {
    background-attachment: scroll !important;
  }

  /* Title: smaller + tighter line-height (iv2-hero is the real selector) */
  body.item-page--endless .iv2-hero__title,
  body.item-page--endless .iv2-hero__name {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.25 !important;
    text-shadow:
      0 0 12px rgba(76, 230, 255, 0.24),
      0 0 24px rgba(251, 191, 36, 0.08) !important;
  }

  /* Detail card: 縮小 radius 給手機 */
  body.item-page--endless .detail-side,
  body.item-page--endless .detail-thumb {
    border-radius: 16px !important;
  }

  /* Pills: 收緊 + wrap */
  body.item-page--endless .detail-side__queue-head,
  body.item-page--endless .detail-side__pills {
    flex-wrap: wrap;
    gap: 6px !important;
  }

  body.item-page--endless .detail-side__queue-head-pill,
  body.item-page--endless .detail-side__price-pill {
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 999px;
  }

  /* Big button: gold rim 維持但 padding 收 */
  body.item-page--endless .detail-side__queue-btn,
  body.item-page--endless #detailSideEndlessBtn {
    padding: 14px 18px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
  }

  /* Tab bar: scrollable horizontal */
  body.item-page--endless .detail-tabs,
  body.item-page--endless .iv2-tabs,
  body.item-page--endless [role="tablist"] {
    overflow-x: auto;
    gap: 4px;
    padding: 4px 6px !important;
  }

  body.item-page--endless [role="tab"],
  body.item-page--endless .detail-tab,
  body.item-page--endless .iv2-tab {
    flex-shrink: 0;
    padding: 7px 12px !important;
    font-size: 12.5px !important;
  }

  /* Winners ticker: 縮字體 */
  body.item-page--endless .detail-side__winners,
  body.item-page--endless .winners-ticker,
  body.item-page--endless [data-winners-ticker],
  body.item-page--endless .iv2-winners,
  body.item-page--endless .item-winners-marquee {
    font-size: 12px !important;
  }

  /* Breadcrumb: 收緊 */
  body.item-page--endless .iv2-crumb,
  body.item-page--endless .iv2-crumb a,
  body.item-page--endless .iv2-crumb-current {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
  }

  /* Body fixed image — disable on mobile（效能 + iOS Safari fixed 雷）*/
  body.item-page--endless::before {
    position: absolute;
    filter: brightness(0.55) saturate(1.05) blur(3px);
  }
}

/* =============================================================================
 * 13. Tablet (721-1024px) — gentle scaling
 * ============================================================================= */
@media (min-width: 721px) and (max-width: 1024px) {
  body.item-page--endless .iv2-hero__title,
  body.item-page--endless .iv2-hero__name {
    font-size: clamp(28px, 4vw, 36px) !important;
  }
}