/* =====================================================================
 * Customer-side modal default-hidden rule.
 * 桌機 /index.html 只載 styles-home.css 沒含 `.modal { display:none }`
 * (那條規則只在 admin styles.css 裡)。結果 4 個 #homeDrawConfirmModal /
 * #homeDrawActionModal / #homeDrawAlertModal / #homeVipTierModal markup
 * 直接 render 在頁面底部漏出文字「確認抽獎 / 抽獎結果 / 提醒...」。
 * 加 :not(.is-visible) 守住 — page load 時 hidden, JS 觸發加 .is-visible
 * 才顯示 + 跑進場動畫（同 admin styles.css c169r 規範）。
 * ===================================================================== */
.modal:not(.is-visible) {
  display: none !important;
}
.modal.is-visible {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 20;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: marine-modal-backdrop-fade 220ms ease-out;
}
@keyframes marine-modal-backdrop-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* draw-overlay 是抽獎動畫播放容器，預設也 hidden */
.draw-overlay:not(.is-visible) {
  display: none !important;
}

/* Logo enlargement: new 海洋尋寶賞 logo (寶箱+浪花+金字) needs more visual real estate.
   Default styles-home.css sets height:44px → looked tiny in topbar with new ornate logo.
   Bump to 72px desktop / 60px mobile so 3:2 logo (1536×1024) reads at proper size. */
body.galaxy.marine .brand-link__image {
  height: 72px !important;
  max-height: 72px;
  max-width: min(280px, 36vw);
}
@media (max-width: 720px) {
  body.galaxy.marine .brand-link__image {
    height: 60px !important;
    max-height: 60px;
    max-width: 50vw;
  }
}
/* Topbar height needs to grow to fit larger logo */
body.galaxy.marine .topbar.topbar--demo {
  min-height: 88px;
}
body.galaxy.marine .brand-link.logo {
  display: inline-flex;
  align-items: center;
  padding: 4px 0;
}

/* ============================================================
 * HERO CAROUSEL — full-width override
 * ============================================================
 * styles-home.css:26332 ships .home-hero-catalog as a 2-column
 * grid (73fr carousel + 27fr winners ticker aside). The marine
 * redesign removes the winners ticker — leaving 27% empty space
 * showing the dark BG. Flatten to single-column block so the
 * carousel takes 100% of main.page width.
 *
 * 2026-05-01 fix: user reported carousel only ~50% viewport with
 * large empty area to right (carouselRect.w=860 vs main.w=1280).
 * ============================================================ */
body.galaxy.marine .home-hero-catalog {
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
}
/* BUG #71 v9 BUG B fix: 合併原本拆兩個 block 的同 selector. 一個放
   寬度 (v33), 一個放 v8 移除 ::before/::after 後留下的 isolation/overflow.
   合一個方便維護, 屬性同時生效效果不變.

   - width:100% / max-width:100% / position:relative — v33 拉滿一半 grid
   - isolation:isolate + border-radius:20px — 給 hero-frame-overlay 跟
     SVG halo blur 一個正確的 stacking context
   - overflow:visible !important — 對齊手機 .dp-hero-carousel--v34, 不然
     base styles-home.css:27650 的 overflow:hidden 會裁掉 12px Gaussian halo */
body.galaxy.marine .home-hero-catalog__banner {
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  overflow: visible !important;
}
/* SVG inline 在 .hero-frame-overlay 內預設 overflow: hidden 把 halo blur 裁掉.
   讓 blur 可以擴出 SVG canvas (12px Gaussian) 視覺光暈才會明顯. */
body.galaxy.marine .home-hero-catalog .hero-frame-overlay svg {
  overflow: visible !important;
}
/* 確保 carousel slides + controls 在 rim 上但 sweep 之下.
   🚨 BUG #71 v7 (2026-05-09 condescending-goldberg): 必排除 .hero-frame-overlay
   不然這條 (specificity 0,3,1) 會贏過 styles-home.css 的
   .home-hero-catalog .hero-frame-overlay { position: absolute; inset: -2px }
   (specificity 0,2,0), 把 SVG halo overlay 強制變成 position: relative,
   塌成 0 height 沒在畫面上, user 看不到周圍光暈. 排除後 overlay 用自己的
   absolute + inset:-2px 對齊 banner, halo 才會擴出.
   血淚 v6: 我以為 overflow:hidden 是兇手, 拼命改 banner overflow + svg
   overflow, 沒抓到真兇. v7 抓到這一條才是真兇. */
body.galaxy.marine .home-hero-catalog__banner > *:not(.hero-frame-overlay) {
  position: relative;
  z-index: 2;
}
/* BUG #71 v8: reduce-motion guard 拿掉 — ::before/::after 已 v8 移除,
   guard 變 dead rule. SVG hero-frame-overlay 的 strokes 動畫由 SVG
   自己 SMIL/CSS animation 控制. */

/* 🚨 2026-05-01 v33: hero defaultPath 改回 marine-hero-desktop-2x.webp
 * (4 角色海洋寶藏 wide poster) — 之前 v32 改 seakuji-logo 結果跟 topbar
 * 重複，user 提醒「怎麼 hero 變成標題的圖檔」→ 移除 contain padding 加
 * 持，改回 cover 讓 wide artwork 撐滿 banner。 */

/* =====================================================================
 * marine-home.css — 海洋尋寶賞 desktop homepage overlay theme
 * v33 (2026-05-01) · Visual reference: dreamina-2026-04-29-3306 video
 *
 * Loads on /index.html AFTER styles-home.css + galaxy-theme.css.
 * Switches /index.html to marine-treasure aesthetic while leaving
 * other galaxy pages (customer-login, profile, etc.) untouched.
 *
 * Adds:
 *   - .home-marine-bg     full-page fixed BG layer (marine treasure painting)
 *   - .home-marine-hero   wide 4-character hero poster + overlay CTA
 *   - .home-marine-ticker live winner horizontal marquee
 *   - .home-marine-cats   6-icon nav grid
 *   - .home-marine-superprize 3-card row (gold-bordered center)
 *   - Topbar marine palette overrides
 *   - Mode-section grid overrides for marine cyan
 * ===================================================================== */

/* ============================================================
 * BODY + topbar palette overrides for marine
 * ============================================================ */
body.galaxy.marine {
  --bg:        #050a1c;
  --bg-deep:   #0a1633;
  --bg-mid:   #0f1e44;
  --bg-top:   #1a2966;
  --card:      rgba(15, 30, 68, 0.72);
  --card-hi:  rgba(20, 40, 88, 0.85);
  --ink:       #f0fdff;
  --muted:    rgba(240, 253, 255, 0.72);
  --accent:   #67e8f9;
  --accent-soft: rgba(103, 232, 249, 0.18);
  --accent-cyan: #22d3ee;
  --accent-gold: #fbbf24;
  --border:   rgba(103, 232, 249, 0.28);
  --line:     var(--border);
  --nebula:   linear-gradient(135deg, #22d3ee 0%, #67e8f9 50%, #a5f3fc 100%);

  --public-btn-primary-bg:     linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  --public-btn-primary-border: rgba(165, 243, 252, 0.55);
  --public-btn-primary-color:  #050a1c;
  --public-btn-primary-shadow: 0 16px 32px rgba(34, 211, 238, 0.45);
}

body.galaxy.marine,
body.galaxy.marine:has(.page.home-page--catalog) {
  background: transparent !important; /* let .home-marine-bg show through */
  background-color: #050a1c !important;
  /* R501li condescending-curie (2026-05-25): 修 PC 首頁背景消失 (田總報「背景壞掉」).
     根因: .home-marine-bg 是 position:fixed; z-index:-1 的子層, 但 body 自己有
     不透明 background-color #050a1c 且 body 不是 stacking context → 依 CSS 繪製
     順序, 負 z-index 子層在 root context 先畫, body 背景後畫蓋住它 → 海洋背景永遠
     被 #050a1c 蓋掉 (上面 L166 註解「let .home-marine-bg show through」的本意被
     L167 不透明 color 抵銷). 加 isolation:isolate 讓 body 成為 stacking context,
     z-index:-1 子層改在 body context 內、body 背景「之後」繪製 → 海洋背景顯示,
     #050a1c 退化為圖片載入失敗時的 fallback 底色. 純堆疊修正, 不動 layout.
     SENTINEL: r501li-marine-bg-isolation-fix */
  isolation: isolate;
}

/* Hide the legacy ocean-effects layer (its 16 bubbles + bg image) when marine
   theme is active; .home-marine-bg replaces it. */
body.galaxy.marine .ocean-effects { display: none !important; }

/* ============================================================
 * BACKGROUND LAYER — fixed full-page marine treasure painting
 * ============================================================ */
.home-marine-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.home-marine-bg__image {
  position: absolute;
  inset: 0;
  /* 🚨 2026-05-02 v33g: 加 3x retina 版本給 2K/4K + DPR 1.5+ 螢幕。
   * User 報告「2560×1440 螢幕看糊糊的」— root cause = 源圖只有 1536×1024，
   * upscale 1.5× 變糊。新 -3x.webp = 5120×3413 (lanczos3 upscale + sharpen)。
   * image-set() 讓瀏覽器按 DPR 挑：DPR<2 用 2x (380KB)，DPR≥2 用 3x (924KB)。
   * Fallback url() 給 image-set() 不支援的舊瀏覽器（IE / 老 Android）。 */
  /* R501ec angry-cartwright (2026-05-17): CF Image Transformations enabled
     ($5/mo Cloudflare Images Stream Starter Bundle). format=auto negotiates
     AVIF/WebP per browser at CF edge. Replaces R501dt/dv 5-URL image-set
     cascade — 1 source file, auto-resize + auto-format. Edge-cached.
     1x DPR → width=2560 from desktop-2x source.
     2x DPR retina → width=3840 from esrgan-3x source (higher fidelity downsize).
     Plain url() at top = fallback for engines without image-set support.
     SENTINEL: r501ec-marine-bg-cf-images */
  background-image: url("/cdn-cgi/image/width=2560,format=auto,quality=80/assets/home/marine-treasure-bg-desktop-2x.webp");
  background-image: image-set(
    url("/cdn-cgi/image/width=2560,format=auto,quality=80/assets/home/marine-treasure-bg-desktop-2x.webp") 1x,
    url("/cdn-cgi/image/width=3840,format=auto,quality=80/assets/home/marine-treasure-bg-desktop-esrgan-3x.webp") 2x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: home-marine-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes home-marine-drift {
  /* User reported BG looks soft — keyframe was scale 1.04→1.08 always
     upscaling. Now starts at 1:1 (scale 1.0) for max sharpness, only
     gentle 2% peak for "alive" feel. */
  0%   { transform: scale(1.0) translateY(0); }
  100% { transform: scale(1.02) translateY(-6px); }
}
.home-marine-bg__godrays {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 26% 70% at 30% 0%, rgba(103, 232, 249, 0.24), transparent 70%),
    radial-gradient(ellipse 30% 80% at 50% 0%, rgba(34, 211, 238, 0.28), transparent 70%),
    radial-gradient(ellipse 26% 70% at 72% 0%, rgba(103, 232, 249, 0.22), transparent 70%),
    linear-gradient(180deg, transparent 50%, rgba(5, 10, 28, 0.62) 100%);
  mix-blend-mode: screen;
  animation: home-godray-pulse 7s ease-in-out infinite;
}
@keyframes home-godray-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.0; }
}
.home-marine-bg__plankton {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.home-marine-bg__plankton span {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.95) 0%, rgba(34, 211, 238, 0.5) 60%, transparent 100%);
  box-shadow: 0 0 10px rgba(103, 232, 249, 0.85), 0 0 22px rgba(34, 211, 238, 0.55);
  opacity: 0;
  animation: home-plankton-drift 16s linear infinite;
}
.home-marine-bg__plankton span:nth-child(1)  { left: 6%;  bottom: 0; animation-delay: 0s; }
.home-marine-bg__plankton span:nth-child(2)  { left: 14%; bottom: 0; animation-delay: 1.5s; width: 4px; height: 4px; }
.home-marine-bg__plankton span:nth-child(3)  { left: 22%; bottom: 0; animation-delay: 3.0s; }
.home-marine-bg__plankton span:nth-child(4)  { left: 30%; bottom: 0; animation-delay: 4.5s; width: 6px; height: 6px; }
.home-marine-bg__plankton span:nth-child(5)  { left: 38%; bottom: 0; animation-delay: 6.0s; }
.home-marine-bg__plankton span:nth-child(6)  { left: 46%; bottom: 0; animation-delay: 7.5s; width: 4px; height: 4px; }
.home-marine-bg__plankton span:nth-child(7)  { left: 54%; bottom: 0; animation-delay: 9.0s; }
.home-marine-bg__plankton span:nth-child(8)  { left: 62%; bottom: 0; animation-delay: 10.5s; }
.home-marine-bg__plankton span:nth-child(9)  { left: 70%; bottom: 0; animation-delay: 12.0s; width: 6px; height: 6px; }
.home-marine-bg__plankton span:nth-child(10) { left: 78%; bottom: 0; animation-delay: 13.5s; }
.home-marine-bg__plankton span:nth-child(11) { left: 86%; bottom: 0; animation-delay: 15.0s; }
.home-marine-bg__plankton span:nth-child(12) { left: 94%; bottom: 0; animation-delay: 0.7s; width: 4px; height: 4px; }
@keyframes home-plankton-drift {
  0%   { transform: translateY(0) scale(0.3); opacity: 0; }
  10%  { opacity: 0.85; transform: translateY(-80px) scale(0.85); }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-marine-bg__image,
  .home-marine-bg__godrays,
  .home-marine-bg__plankton span { animation: none; }
  /* R355 flamboyant-bell (2026-05-12): 桌機即時中獎 ticker 32s marquee
     對 prefers-reduced-motion user (vestibular sensitivity) 仍持續 scroll
     可能引發暈眩. 手機 dp-ticker 已在 m/marine-theme.css reduced-motion
     block 加 animation: none, 桌機漏網. 同步補. */
  .home-marine-ticker__track-inner { animation: none; }
}

/* ============================================================
 * TOPBAR overrides — cyan accents
 * ============================================================ */
body.galaxy.marine .topbar {
  background:
    linear-gradient(180deg, rgba(10, 26, 62, 0.82) 0%, rgba(10, 26, 62, 0.45) 80%, transparent 100%);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid rgba(103, 232, 249, 0.32);
  box-shadow: 0 8px 24px rgba(5, 10, 28, 0.55);
}
body.galaxy.marine .brand-link__image {
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7))
    drop-shadow(0 0 14px rgba(103, 232, 249, 0.5));
}
body.galaxy.marine .nav a {
  color: rgba(240, 253, 255, 0.85);
  transition: color 200ms ease, text-shadow 200ms ease;
}
body.galaxy.marine .nav a:hover,
body.galaxy.marine .nav a.active {
  color: #67e8f9;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.65);
}

/* ============================================================
 * HERO — wide 4-character poster
 * ============================================================ */
.home-marine-hero {
  position: relative;
  display: block;
  margin: 16px auto 18px;
  /* IMPORTANT: width:100% needed because .home-marine-hero__poster is
     position:absolute (doesn't contribute to layout). Without explicit
     width, the container collapses to 2px wide and the hero disappears. */
  width: calc(100% - 24px);
  max-width: 1200px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, 0.32);
  box-shadow:
    0 16px 36px rgba(5, 10, 28, 0.65),
    inset 0 0 0 1px rgba(165, 243, 252, 0.16);
  /* R501s angry-cartwright (2026-05-15): unify desktop hero aspect-ratio to 16:9
     (was 3:2). Owner verbatim「照你建議」+「怎麼走最方便」— want admin upload 1
     image work perfectly on BOTH mobile (16:9) and desktop. Previous 3:2 desktop
     forced admin to plan for two different crop ratios. Now both 16:9 = single
     upload, perfect display, new cropper locked to 16:9 produces canonical asset.
     - 1536×864 image will fit perfectly (16:9 native)
     - existing 1536×1024 images get bottom-cropped by object-fit:cover (acceptable)
     - desktop hero becomes slightly shorter (less vertical real estate consumed) */
  aspect-ratio: 16 / 9;
  max-height: 720px;
}
.home-marine-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.home-marine-hero__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 36px 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 10, 28, 0.68) 60%, rgba(5, 10, 28, 0.92) 100%);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 10px;
}
.home-marine-hero__wordmark-zh {
  font-size: 46.2px;
  font-weight: 900;
  color: #f0fdff;
  letter-spacing: 0.22em;
  text-shadow:
    0 0 18px rgba(103, 232, 249, 0.85),
    0 3px 0 #0a1a3e,
    0 0 32px rgba(34, 211, 238, 0.75);
}
.home-marine-hero__wordmark-en {
  font-size: 14.3px;
  font-weight: 700;
  letter-spacing: 0.42em;
  color: rgba(165, 243, 252, 0.92);
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.6);
  margin-bottom: 4px;
}
.home-marine-hero__tagline {
  font-size: 15.4px;
  font-weight: 600;
  color: rgba(240, 253, 255, 0.92);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  margin: 0;
}
.home-marine-hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 28px 12px 22px;
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  border: 1px solid rgba(165, 243, 252, 0.62);
  border-radius: 999px;
  color: #050a1c;
  font-size: 16.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow:
    0 10px 28px rgba(34, 211, 238, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 5px rgba(34, 211, 238, 0.16);
  animation: home-cta-breathe 2.4s ease-in-out infinite;
  text-decoration: none;
}
@keyframes home-cta-breathe {
  0%, 100% { box-shadow: 0 10px 28px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 5px rgba(34, 211, 238, 0.16); }
  50%      { box-shadow: 0 14px 36px rgba(34, 211, 238, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 10px rgba(34, 211, 238, 0.22); }
}

/* ============================================================
 * LIVE WINNER TICKER
 * ============================================================ */
.home-marine-ticker {
  position: relative;
  /* v60-dirac: margin-top 12 → 32px 拉開跟 hero 外框 halo blur 的視覺重疊 */
  margin: 32px auto 18px;
  max-width: 1200px;
  padding: 10px 18px;
  background: linear-gradient(90deg, rgba(15, 30, 68, 0.78), rgba(10, 26, 62, 0.85));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(103, 232, 249, 0.24);
  border-radius: 999px;
  display: flex; align-items: center; gap: 12px;
  overflow: hidden;
  font-size: 14.3px;
  color: rgba(240, 253, 255, 0.92);
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(5, 10, 28, 0.45);
}
/* ============================================================
 * BUG P fix v9 (2026-05-09 condescending-goldberg): 對齊手機 v20x ticker
 * design — pill cards with prize image + tier badge + sparkle 🎉 + caption.
 * Reference: pages-upload/m/marine-theme.css 2510-2900 (v20x + v20z5).
 *
 * 之前桌機 .home-marine-ticker__item 是 plain inline-flex 純文字, mobile
 * 已經是 pill 卡片完整設計 (中獎囉 + 獲得 + tier 配色 + sparkle pulse +
 * light sweep). user 反映「排版/速度/模式都要跟手機一樣」.
 *
 * 跟手機一致 (只差 class prefix home-marine-ticker__ vs dp-ticker__).
 * ============================================================ */
.home-marine-ticker__item {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  min-height: 62px;
  background: linear-gradient(135deg, rgba(8, 18, 42, 0.95), rgba(15, 30, 68, 0.85));
  border: 1px solid rgba(116, 245, 255, 0.32);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(2, 8, 18, 0.5), inset 0 1px 0 rgba(116, 245, 255, 0.15);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}
/* sparkle 🎉 emoji left of pill */
.home-marine-ticker__sparkle {
  flex: 0 0 auto;
  font-size: 15.4px;
  position: relative;
  z-index: 2;
  animation: home-marine-ticker-sparkle 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
}
@keyframes home-marine-ticker-sparkle {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.18) rotate(8deg); }
}
/* prize image card (52×52) with tier-colored border */
.home-marine-ticker__pcard {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: rgba(8, 18, 42, 0.85);
  border: 1.5px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.45), inset 0 0 4px rgba(116, 245, 255, 0.25);
  overflow: hidden;
}
.home-marine-ticker__pcard .home-marine-ticker__prize-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 8px;
}
/* tier badge (top-right corner) */
.home-marine-ticker__tier {
  position: absolute;
  top: -4px;
  right: -4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* tier color variants (S/SR/SSR/神話=red, A/傳說=gold, B/史詩=purple, C/高級=blue, D/普通/N=gray) */
.home-marine-ticker__tier[data-tier="s"],
.home-marine-ticker__tier[data-tier="sr"],
.home-marine-ticker__tier[data-tier="ssr"],
.home-marine-ticker__tier[data-tier="神話"] {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.home-marine-ticker__tier[data-tier="a"],
.home-marine-ticker__tier[data-tier="傳說"] {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  color: #1f0f00;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.home-marine-ticker__tier[data-tier="b"],
.home-marine-ticker__tier[data-tier="史詩"] {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.home-marine-ticker__tier[data-tier="c"],
.home-marine-ticker__tier[data-tier="高級"] {
  background: linear-gradient(135deg, #67e8f9, #0891b2);
  color: #052e16;
  box-shadow: 0 0 8px rgba(103, 232, 249, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.home-marine-ticker__tier[data-tier="d"],
.home-marine-ticker__tier[data-tier="普通"],
.home-marine-ticker__tier[data-tier="n"] {
  background: linear-gradient(135deg, #94a3b8, #475569);
  box-shadow: 0 0 4px rgba(148, 163, 184, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* tier-specific pcard border 配對 */
.home-marine-ticker__pcard[data-tier="s"],
.home-marine-ticker__pcard[data-tier="sr"],
.home-marine-ticker__pcard[data-tier="ssr"],
.home-marine-ticker__pcard[data-tier="神話"] {
  border-color: rgba(239, 68, 68, 0.8);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55), 0 0 6px rgba(34, 211, 238, 0.4);
}
.home-marine-ticker__pcard[data-tier="b"],
.home-marine-ticker__pcard[data-tier="史詩"] {
  border-color: rgba(167, 139, 250, 0.8);
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.55), 0 0 6px rgba(34, 211, 238, 0.4);
}
/* caption (top: 玩家 中獎囉 / bot: 獲得 [品名]) */
.home-marine-ticker__caption {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
}
.home-marine-ticker__top {
  font-size: 14.3px;
  font-weight: 700;
  color: rgba(240, 253, 255, 0.85);
}
.home-marine-ticker__top strong {
  color: #fbbf24;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.home-marine-ticker__bot {
  font-size: 12.1px;
  font-weight: 600;
  color: rgba(165, 243, 252, 0.92);
}
.home-marine-ticker__bot em {
  font-style: normal;
  background: linear-gradient(135deg, #67e8f9, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 13.2px;
}
/* light sweep 動畫 (4.8s 間歇橫掃過 pill) */
.home-marine-ticker__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 49%,
    rgba(255, 255, 255, 0.04) 52%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: -120% 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  animation: home-marine-ticker-shine 4.8s linear infinite;
}
@keyframes home-marine-ticker-shine {
  0%, 60%   { background-position: -120% 0; }
  85%, 100% { background-position: 220% 0; }
}
/* 保留 avatar 樣式以防 fallback (mobile 不渲染 avatar 已從 markup 拿掉) */
.home-marine-ticker__avatar {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(103, 232, 249, 0.4);
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.35);
}
.home-marine-ticker__pulse {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  background: #ff4757;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 71, 87, 0.85);
  animation: home-dot-pulse 1.4s ease-in-out infinite;
}
@keyframes home-dot-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 rgba(255, 71, 87, 0.6); }
  50%      { transform: scale(1.18); box-shadow: 0 0 10px rgba(255, 71, 87, 0.85); }
}
.home-marine-ticker__label {
  flex: 0 0 auto;
  font-size: 13.2px;
  font-weight: 900;
  color: #ff4757;
  letter-spacing: 0.08em;
  padding: 0 10px 0 0;
  border-right: 1px solid rgba(103, 232, 249, 0.22);
  margin-right: 4px;
}
/* v60-fervent-shaw: outer clipper (fixed) + inner translator (animated)
   舊版 track 既是 flex item 又是 translating element → 動起來時 items
   會擠進左邊 label 區。改 track 變 overflow:hidden 的固定 clipper，內層
   wrapper 做動畫，items 不會再溢出到 label 上。 */
.home-marine-ticker__track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.home-marine-ticker__track-inner {
  display: inline-flex; gap: 10px;
  /* R300 hardcore-gould (2026-05-12): user verbatim「即時中獎的速度滑動太快
     我說的是網頁版的部分」. 96s → 9s (R300 era) → 32s (R300 final).
     R501c angry-cartwright (2026-05-15): user 再次「簡慢首頁的即時中獎速度」
     32s → 48s (再 +50%, ≈ 20 px/s, 對齊更慢更舒適的閱讀節奏).
     SENTINEL: marine-home-ticker-speed-r501c-angry-cartwright */
  animation: home-ticker-scroll 48s linear infinite;
  will-change: transform;
}
.home-marine-ticker__item em {
  font-style: normal;
  color: #67e8f9;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.55);
}
.home-marine-ticker__sep { color: rgba(103, 232, 249, 0.55); font-size: 12.1px; }
@keyframes home-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* R303 hardcore-gould (2026-05-12): hover 暫停 marquee — 標準 UX pattern, 讓
   user 看到感興趣的中獎名單可以 hover 細讀, 不用追逐文字. 32s 速度雖然舒服,
   仍有 user 想停下 inspect 特定戰績的情境. 移開 mouse → 恢復滑動. */
.home-marine-ticker:hover .home-marine-ticker__track-inner,
.home-marine-ticker:focus-within .home-marine-ticker__track-inner {
  animation-play-state: paused;
}
/* BUG #71 v9 BUG A fix: 移除 ticker reduce-motion guard.
   User 反映「即時中獎也完全不會動」(v5 改過但整批 revert, 此 bug 仍在).
   96s linear 緩慢水平 marquee 不是會引起暈眩的快速閃爍, 故不適用
   reduce-motion 壓制. 桌機 OS 開了 reduce-motion 也應該看到資訊流動. */

/* ============================================================
 * 6-ICON CATEGORY GRID
 * ============================================================ */
/* v3 (mtab-cinemagraph-v4): 7+ icons → 4-col grid auto-wrap.
   Owner mandate: 「兩排沒關係 可以靠緊一點密一點 1234 / 56試試看 未來還有
   78 我在填寫上去」 — current 7 orbs → row1: 4, row2: 3 (centered).
   Future-proof: 8 → 4+4, 9 → 4+4+1, etc. */
/* BUG #69 fix (2026-05-08 condescending-goldberg): user 反映「排列方式 特效
   動校都不見了」. 桌機 7 個 orbs 用 4-col 變 row1=4 + row2=3 left-aligned
   不對稱看起來破. 改用 7-col 單行 (桌機 ≥1024 寬度足夠), tablet 4-col,
   mobile 3-col. */
.home-marine-cats {
  margin: 0 auto 24px;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px 12px;
  padding: 0;
  justify-items: center;
}
@media (max-width: 1023px) {
  .home-marine-cats {
    grid-template-columns: repeat(4, 1fr);
    max-width: 720px;
  }
}
@media (max-width: 540px) {
  .home-marine-cats {
    grid-template-columns: repeat(3, 1fr);
    max-width: 100%;
  }
}
.home-marine-cat {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;                     /* slightly tighter (was 8px) */
  padding: 14px 8px 10px;       /* tighter padding (was 18 10 14) */
  width: 100%;
  background: linear-gradient(180deg, rgba(15, 30, 68, 0.55), rgba(10, 26, 62, 0.72));
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 16px;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 6px 18px rgba(5, 10, 28, 0.45), inset 0 1px 0 rgba(165, 243, 252, 0.1);
  transition: transform 200ms ease, box-shadow 240ms ease, border-color 200ms ease;
}
/* 7 orbs natural layout: row 1 = 1234, row 2 = 567 (left-aligned, dense).
   未來新增 8 = row 2 滿 5678; 9 = row 3 開始 9. */
.home-marine-cat:hover {
  transform: translateY(-2px);
  border-color: rgba(103, 232, 249, 0.55);
  box-shadow: 0 12px 32px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(165, 243, 252, 0.28);
}
/* R303 hardcore-gould (2026-05-12): :active tap feedback — mobile user 點按時
   微縮提供觸覺感, 對齊 cc1kuji 等大廠 mobile interaction pattern. */
.home-marine-cat:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}
/* keyboard user focus ring 對齊 hover 視覺 (Tab 鍵走到 orb 時看得到) */
.home-marine-cat:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.85);
  outline-offset: 4px;
  border-color: rgba(103, 232, 249, 0.55);
}

/* ============================================================
 * BUG #71 v3 (2026-05-09 condescending-goldberg): user verbatim
 *   「我看到按鈕被一個方框包住 我不喜歡這種感覺
 *    他應該就是單純這個按鈕的圖案」
 *
 * Reference: 手機板 .dp-mode-icon (pages-upload/m/marine-theme.css:1336)
 * 完全沒有 background / border / border-radius / box-shadow / overflow
 * — orbs 直接浮在 BG 上, 像水中漂浮的球體, 不像被裝在卡牌格子裡.
 *
 * 把 base .home-marine-cat 的卡片 chrome 對 .home-marine-cat--orb
 * 完全壓掉, 桌機 orbs 看起來跟手機 1:1 (浮 orb 無方框), hover 也只
 * 微抬 + 加 glow drop-shadow 不要再加 border / box-shadow.
 *
 * 還原 overflow: visible 後, halo + shimmer 可以自然超出 orb 範圍
 * 不被卡片邊界裁切.
 * ============================================================ */
/* ============================================================
 * BUG #71 v9 BUG C fix: 合併原本拆兩個 block 的 .home-marine-cat--orb
 * (chrome strip + bob 動畫合一個 rule).
 *
 * Source-of-truth reference: 手機板 .dp-mode-icon (m/marine-theme.css:1336)
 * 完全沒有 background / border / border-radius / box-shadow / overflow
 * — orbs 直接浮在 BG 上, 像水中漂浮的球體, 不像被裝在卡牌格子裡.
 *
 * 把 base .home-marine-cat 的卡片 chrome 對 .home-marine-cat--orb
 * 完全壓掉, 桌機 orbs 看起來跟手機 1:1 (浮 orb 無方框).
 *
 * 同時加 IDLE BOB (對應 mobile dp-mode-bob 3.4s translateY 0↔-5px)
 * 是讓 desktop 用戶第一眼就看到「會動」的關鍵層. Mobile 7 顆 orbs 都靠
 * 這個 + cinemagraph orb-life (rotation/scale/filter) 兩層 motion 才活.
 * ============================================================ */
.home-marine-cat.home-marine-cat--orb {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 8px 4px 6px;          /* tight, just enough for halo above + label below */
  animation: home-marine-orb-bob 3.4s ease-in-out infinite !important;
  will-change: transform;
}
@keyframes home-marine-orb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
.home-marine-cat.home-marine-cat--orb:hover {
  transform: translateY(-3px);
  border-color: transparent !important;
  box-shadow: none !important;
}
/* hover 把 icon glow 加強 (取代失去的 box-shadow 視覺回饋) */
.home-marine-cat.home-marine-cat--orb:hover .home-marine-cat__icon {
  filter:
    drop-shadow(0 6px 14px rgba(2, 8, 18, 0.55))
    drop-shadow(0 0 24px rgba(34, 211, 238, 0.85))
    saturate(1.2) brightness(1.08);
}
/* hover 把 halo opacity 加強 */
.home-marine-cat.home-marine-cat--orb:hover .home-marine-cat__halo {
  opacity: 1;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(34, 211, 238, 0.6) 0%,
    rgba(34, 211, 238, 0.25) 35%,
    transparent 65%
  );
}

/* ============================================================
 * BUG #71 v2 (2026-05-09 condescending-goldberg): 完全參考手機版
 * cinemagraph treatment 重做桌機 orbs.
 * Reference: pages-upload/m/marine-theme.css 1480-1638
 *   - dp-lord-orb-life 5.2s (rotate ±2° + scale + filter saturate/brightness/hue)
 *   - dp-lord-breathe 2.4s (radial cyan halo opacity 0.55↔1 scale 1↔1.1)
 *   - dp-lord-orb-caustic 7s (animated radial-gradient shimmer with @property)
 *
 * 跟手機 100% 一致的 cinemagraph orb 體驗. overflow:hidden 仍保留 (給卡牌
 * 邊界), 但 halo + 動畫已移到 orb 周邊不被裁切的範圍.
 * ============================================================ */

/* breathing cyan halo behind orb — 對應 mobile dp-mode-icon__media::before
   放大 + opacity 加強讓 desktop 大畫面下也明顯看得到. */
.home-marine-cat.home-marine-cat--orb .home-marine-cat__halo {
  position: absolute;
  /* center the halo around the icon (icon is 64px @ ~8px top padding) */
  top: 0;
  left: 50%;
  width: 110px;
  height: 110px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(34, 211, 238, 0.55) 0%,
    rgba(34, 211, 238, 0.22) 35%,
    transparent 65%
  );
  filter: blur(10px);
  opacity: 0.9;
  animation: home-marine-orb-breathe 2.4s ease-in-out infinite !important;
  will-change: transform, opacity;
}
@keyframes home-marine-orb-breathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(0.9); }
  50%      { opacity: 1.0;  transform: translateX(-50%) scale(1.25); }
}

/* orb icon — cinemagraph (rotate + scale + saturate/brightness/hue-rotate filter)
   對應 mobile dp-lord-orb-life. 振幅 ↑ 讓 desktop 大畫面下明顯看得到:
   - rotate ±2° → ±4°
   - scale 1↔1.05 → 1↔1.1
   - duration 5.2s → 4.2s (稍快)
   - 加 !important 強制贏過任何 cascade 干擾 */
.home-marine-cat.home-marine-cat--orb .home-marine-cat__icon {
  position: relative;
  z-index: 2;
  width: 64px; height: 64px;
  object-fit: contain;
  animation: home-marine-orb-life 4.2s ease-in-out infinite !important;
  will-change: transform, filter;
}
@keyframes home-marine-orb-life {
  0% {
    transform: rotate(-4deg) scale(1);
    filter:
      drop-shadow(0 4px 8px rgba(2, 8, 18, 0.45))
      drop-shadow(0 0 14px rgba(34, 211, 238, 0.55))
      saturate(1.05) brightness(1) hue-rotate(-8deg);
  }
  50% {
    transform: rotate(4deg) scale(1.1);
    filter:
      drop-shadow(0 8px 14px rgba(2, 8, 18, 0.55))
      drop-shadow(0 0 22px rgba(34, 211, 238, 0.75))
      saturate(1.18) brightness(1.08) hue-rotate(8deg);
  }
  100% {
    transform: rotate(-4deg) scale(1);
    filter:
      drop-shadow(0 4px 8px rgba(2, 8, 18, 0.45))
      drop-shadow(0 0 14px rgba(34, 211, 238, 0.55))
      saturate(1.05) brightness(1) hue-rotate(-8deg);
  }
}

/* caustic shimmer (water refraction light spot) — animated radial-gradient
   center via @property. 對應 mobile dp-lord-orb-caustic 7s */
@property --home-orb-shimmer-x { syntax: "<percentage>"; initial-value: 28%; inherits: false; }
@property --home-orb-shimmer-y { syntax: "<percentage>"; initial-value: 26%; inherits: false; }
@property --home-orb-shimmer-size { syntax: "<length>"; initial-value: 11px; inherits: false; }
.home-marine-cat--orb::after {
  content: "";
  position: absolute;
  /* match the icon area (inside .home-marine-cat 的 padding) */
  top: 8px;
  left: 50%;
  width: 64px;
  height: 64px;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    circle var(--home-orb-shimmer-size) at var(--home-orb-shimmer-x) var(--home-orb-shimmer-y),
    rgba(255, 255, 255, 0.55) 0%,
    rgba(180, 240, 255, 0.28) 35%,
    transparent 75%
  );
  mix-blend-mode: screen;
  animation: home-marine-orb-caustic 7s ease-in-out infinite;
  will-change: --home-orb-shimmer-x, --home-orb-shimmer-y;
}
@keyframes home-marine-orb-caustic {
  0%   { --home-orb-shimmer-x: 28%; --home-orb-shimmer-y: 26%; --home-orb-shimmer-size: 11px; }
  25%  { --home-orb-shimmer-x: 60%; --home-orb-shimmer-y: 32%; --home-orb-shimmer-size:  9px; }
  50%  { --home-orb-shimmer-x: 70%; --home-orb-shimmer-y: 65%; --home-orb-shimmer-size: 12px; }
  75%  { --home-orb-shimmer-x: 38%; --home-orb-shimmer-y: 72%; --home-orb-shimmer-size: 10px; }
  100% { --home-orb-shimmer-x: 28%; --home-orb-shimmer-y: 26%; --home-orb-shimmer-size: 11px; }
}

/* ============================================================
 * BUG #71 v9 BUG D fix: 領主賞 lord orb 在桌機加上手機版的 aura bubbles
 * (上升海洋氣泡光圈). 對應 mobile .dp-mode-icon--lord::before / ::after
 * (m/marine-theme.css:1579-1616). 之前桌機只有 cyan halo + cat-float,
 * 跟手機差太多 (手機 lord orb 有 9 顆 ring bubbles 從底部升起).
 *
 * .home-marine-cat--orb::after 已被 caustic shimmer 占用. lord 元素同時
 * 有 .home-marine-cat--orb 和 .home-marine-cat--lord 兩個 class 但 ::before
 * / ::after 一個元素只有一份 — 共用. 所以 lord aura 借 .home-marine-cat__halo
 * span 的 ::before / ::after 來掛 (halo span 自己沒用 pseudo).
 * 兩層 bubble 不同位置 + 不同 timing 形成持續上升的氣泡感.
 * ============================================================ */
.home-marine-cat--orb.home-marine-cat--lord .home-marine-cat__halo::before,
.home-marine-cat--orb.home-marine-cat--lord .home-marine-cat__halo::after {
  content: "";
  position: absolute;
  /* halo 是 110×110 (top:0 of container), lord aura 跟 halo 同 size 讓
     bubbles 從底部 (= 圖標下方) 上升, 經過 icon 區域往上消失. */
  inset: 0;
  pointer-events: none;
  z-index: 1; /* 在 halo (z=0) 之上, 但 icon (z=2) 之下 */
  background-repeat: no-repeat;
}
.home-marine-cat--orb.home-marine-cat--lord .home-marine-cat__halo::before {
  background-image:
    radial-gradient(circle 4px at 8% 100%,  transparent 0, transparent 50%, rgba(200, 245, 255, 0.95) 60%, rgba(116, 245, 255, 0.7) 80%, transparent 88%),
    radial-gradient(circle 3px at 25% 100%, transparent 0, transparent 45%, rgba(200, 245, 255, 1) 58%, rgba(103, 232, 249, 0.7) 80%, transparent 90%),
    radial-gradient(circle 5px at 50% 100%, transparent 0, transparent 55%, rgba(200, 245, 255, 0.95) 62%, rgba(116, 245, 255, 0.7) 80%, transparent 86%),
    radial-gradient(circle 3px at 78% 100%, transparent 0, transparent 45%, rgba(200, 245, 255, 1) 58%, rgba(103, 232, 249, 0.7) 80%, transparent 90%),
    radial-gradient(circle 4px at 95% 100%, transparent 0, transparent 50%, rgba(200, 245, 255, 0.95) 60%, rgba(116, 245, 255, 0.7) 80%, transparent 88%);
  animation: home-marine-lord-aura-rise 3.8s linear infinite;
}
.home-marine-cat--orb.home-marine-cat--lord .home-marine-cat__halo::after {
  background-image:
    radial-gradient(circle 3px at 15% 100%, transparent 0, transparent 45%, rgba(200, 245, 255, 1) 58%, rgba(103, 232, 249, 0.65) 80%, transparent 90%),
    radial-gradient(circle 5px at 38% 100%, transparent 0, transparent 55%, rgba(200, 245, 255, 0.95) 62%, rgba(116, 245, 255, 0.65) 80%, transparent 86%),
    radial-gradient(circle 4px at 65% 100%, transparent 0, transparent 50%, rgba(200, 245, 255, 0.95) 60%, rgba(103, 232, 249, 0.7) 80%, transparent 88%),
    radial-gradient(circle 3px at 88% 100%, transparent 0, transparent 45%, rgba(200, 245, 255, 1) 58%, rgba(116, 245, 255, 0.65) 80%, transparent 90%);
  animation: home-marine-lord-aura-rise 5.2s linear infinite;
  animation-delay: -2.1s;
}
@keyframes home-marine-lord-aura-rise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 0.85; }
  100% { transform: translateY(-100%); opacity: 0; }
}
/* lord 標題用金色漸層, 強化「最高等級」感, 對應手機 .dp-mode-icon--lord
   .dp-mode-icon__name (m/marine-theme.css:1617-1626) */
.home-marine-cat--orb.home-marine-cat--lord .home-marine-cat__label {
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 6px rgba(251, 191, 36, 0.45);
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* BUG F fix v9: 原 fallback rules .home-marine-cat:not(.home-marine-cat--orb)
   .home-marine-cat__halo / __icon 兩個 selector 永遠不 match (HTML 全部
   marine-cat 都帶 --orb 修飾, line 547+ 已經先攔截). 跟著 home-halo-breathe
   + home-cat-float 兩個 keyframes 也是 dead — 30 行 dead code 移除. 未來如果
   需要回來舊版 simple animation, 從 git history 恢復即可. */

/* NO reduce-motion guard for orbs — user 反映「手機會動 桌機不會動」.
   有可能桌機 OS 開了 reduce-motion 但手機沒, 兩邊體驗不一致.
   Cinemagraph orbs 是品牌視覺裝飾, 不是高頻閃爍/視差/縮放, 不會造成
   暈眩, 故不適用 reduce-motion 壓制. 真正會造成不適的動畫 (hero rim
   旋轉 + sweep) 已在 .home-hero-catalog__banner ::before/::after 的
   @media block 處理. */
.home-marine-cat__label {
  font-size: 15.4px;
  font-weight: 700;
  color: #f0fdff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.home-marine-cats > .home-marine-cat:nth-child(1) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(1) .home-marine-cat__halo { animation-delay: 0s; }
.home-marine-cats > .home-marine-cat:nth-child(2) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(2) .home-marine-cat__halo { animation-delay: 0.4s; }
.home-marine-cats > .home-marine-cat:nth-child(3) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(3) .home-marine-cat__halo { animation-delay: 0.8s; }
.home-marine-cats > .home-marine-cat:nth-child(4) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(4) .home-marine-cat__halo { animation-delay: 1.2s; }
.home-marine-cats > .home-marine-cat:nth-child(5) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(5) .home-marine-cat__halo { animation-delay: 1.6s; }
.home-marine-cats > .home-marine-cat:nth-child(6) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(6) .home-marine-cat__halo { animation-delay: 2.0s; }
.home-marine-cats > .home-marine-cat:nth-child(7) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(7) .home-marine-cat__halo { animation-delay: 2.4s; }
.home-marine-cats > .home-marine-cat:nth-child(8) .home-marine-cat__icon,
.home-marine-cats > .home-marine-cat:nth-child(8) .home-marine-cat__halo { animation-delay: 2.8s; }

/* ============================================================
 * SUPER PRIZE 3-CARD ROW
 * ============================================================ */
.home-marine-superprize {
  margin: 6px auto 28px;
  max-width: 1200px;
}
.home-marine-superprize__head {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 18px;
  margin-bottom: 16px;
}
.home-marine-superprize__glyph {
  font-size: 24.2px;
  color: #fbbf24;
  text-shadow:
    0 0 12px rgba(251, 191, 36, 0.85),
    0 0 22px rgba(251, 191, 36, 0.55);
  animation: home-star-rotate 6s linear infinite;
}
.home-marine-superprize__title {
  margin: 0;
  font-size: 26.4px;
  font-weight: 900;
  color: #fbbf24;
  letter-spacing: 0.22em;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.65), 0 2px 0 #0a1a3e;
}
@keyframes home-star-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.home-marine-superprize__row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  align-items: end;
}
.home-marine-superprize__card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 14px 18px;
  background: linear-gradient(180deg, rgba(15, 30, 68, 0.78), rgba(10, 26, 62, 0.92));
  border: 1px solid rgba(103, 232, 249, 0.32);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 200ms ease;
}
.home-marine-superprize__card:hover { transform: translateY(-3px); }
.home-marine-superprize__card--center {
  background: linear-gradient(180deg, rgba(40, 30, 12, 0.95), rgba(20, 14, 4, 0.98));
  border: 2px solid #fbbf24;
  box-shadow:
    0 12px 36px rgba(251, 191, 36, 0.32),
    inset 0 1px 0 rgba(254, 240, 138, 0.45),
    0 0 0 4px rgba(251, 191, 36, 0.18);
  transform: translateY(-10px);
}
.home-marine-superprize__hot {
  position: absolute;
  top: 8px; left: 8px;
  padding: 3px 10px 2px;
  background: linear-gradient(135deg, #ff4757 0%, #c30b25 100%);
  color: #fff;
  font-size: 12.1px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 4px 4px 4px 0;
  box-shadow: 0 3px 8px rgba(255, 71, 87, 0.55);
}
.home-marine-superprize__card--center .home-marine-superprize__hot {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%);
  color: #1a0e00;
}
.home-marine-superprize__media {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.55) 0%, rgba(15, 30, 68, 0.32) 60%, transparent 100%),
    linear-gradient(135deg, #0f1e44 0%, #050a1c 100%);
  border-radius: 12px;
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.home-marine-superprize__card--center .home-marine-superprize__media {
  background:
    radial-gradient(circle at 50% 40%, rgba(251, 191, 36, 0.42) 0%, rgba(40, 25, 4, 0.55) 55%, transparent 100%),
    linear-gradient(135deg, #2a1d05 0%, #0a0a0a 100%);
}
.home-marine-superprize__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 40%);
}
.home-marine-superprize__name {
  font-size: 17.6px;
  font-weight: 900;
  color: #f0fdff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  text-align: center;
  margin-bottom: 6px;
}
.home-marine-superprize__card--center .home-marine-superprize__name {
  font-size: 20.9px;
  color: #fde047;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.65), 0 1px 2px rgba(0, 0, 0, 0.85);
}
.home-marine-superprize__price {
  display: inline-block;
  padding: 4px 14px;
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  color: #050a1c;
  font-size: 16.5px;
  font-weight: 900;
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 3px 8px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.home-marine-superprize__card--center .home-marine-superprize__price {
  background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%);
  color: #1a0e00;
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* ============================================================
 * Mode-section grids — adapt to marine palette
 * ============================================================ */
body.galaxy.marine .home-mode-section {
  margin: 0 auto 24px;
  max-width: 1200px;
}
body.galaxy.marine .home-mode-head {
  background:
    linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(15, 30, 68, 0.78) 70%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(103, 232, 249, 0.32);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(165, 243, 252, 0.18);
}
body.galaxy.marine .home-mode-icon img {
  filter:
    drop-shadow(0 0 8px rgba(34, 211, 238, 0.65))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
body.galaxy.marine .home-mode-title {
  color: #f0fdff;
  font-size: 19.8px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(34, 211, 238, 0.42);
  flex: 1;
}
body.galaxy.marine .home-mode-more {
  color: #67e8f9;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  background: rgba(34, 211, 238, 0.18);
  border: 1px solid rgba(103, 232, 249, 0.42);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 14.3px;
}

/* ============================================================
 * Bottom mobile sticky CTA — restyle to marine
 * ============================================================ */
body.galaxy.marine .home-mobile-cta-bar {
  background:
    linear-gradient(180deg, rgba(10, 26, 62, 0.88) 0%, rgba(5, 10, 28, 0.98) 100%);
  border-top: 1px solid rgba(103, 232, 249, 0.42);
  box-shadow: 0 -10px 28px rgba(5, 10, 28, 0.65);
}
body.galaxy.marine .home-mobile-cta-link {
  color: rgba(240, 253, 255, 0.78);
}
body.galaxy.marine .home-mobile-cta-link-dot--icon img {
  filter:
    drop-shadow(0 0 6px rgba(34, 211, 238, 0.42))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
body.galaxy.marine .home-mobile-cta-primary {
  background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
  color: #050a1c;
  font-weight: 900;
  box-shadow:
    0 8px 22px rgba(34, 211, 238, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  animation: home-cta-breathe 2.4s ease-in-out infinite;
}


/* ============================================================
 * v60-fervent-shaw 桌機 hero podium — copy 自 m/marine-theme.css
 * (一番賞 / 領主賞 / 無盡塔 / RPG 闖關 共用 .dp-ichi-hero* class)
 * 桌機 viewport 寬, podium gap/padding 略寬鬆給桌機體感
 * ============================================================ */
.dp-ichi-hero {
  margin: 16px 0 22px;
  padding: 0 12px;
}
.dp-ichi-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 4px;
}
.dp-ichi-hero__title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.dp-ichi-hero__title-zh {
  font-size: 35.2px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
  letter-spacing: 0.05em;
}
.dp-ichi-hero__title-en {
  font-size: 17.6px;
  font-weight: 800;
  color: rgba(116, 245, 255, 0.85);
  letter-spacing: 0.32em;
}
/* v60-fervent-shaw v2: MORE 按鈕重新設計 — 海洋寶藏「金幣」風 (高對比)
   v1 cyan 文字跟 BG 太像看不清楚, 改成 PURE GOLD pill + 深棕黑字
   + 雙層 ring (內 gold + 外 cyan, 點綴海洋主題)
   selector 用 body.galaxy.marine 提高 specificity, override
   galaxy-theme.css 的 `body.galaxy a` rule (specificity 0,1,2) */
body.galaxy.marine .dp-ichi-hero__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 13.2px;
  font-weight: 900;
  letter-spacing: 0.22em;
  color: #1f0f00;
  text-decoration: none;
  background:
    linear-gradient(135deg, #fef3c7 0%, #fbbf24 35%, #f59e0b 80%, #d97706 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1.5px solid rgba(255, 222, 89, 0.9);
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.55),
    0 4px 16px rgba(245, 158, 11, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), 0 -1px 1px rgba(0, 0, 0, 0.15);
  transition: transform 220ms ease, box-shadow 260ms ease, background-position 420ms cubic-bezier(0.2,0.8,0.2,1);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
body.galaxy.marine .dp-ichi-hero__more::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: -100% 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: -1;
  animation: dp-ichi-more-shimmer 3.6s ease-in-out infinite;
}
@keyframes dp-ichi-more-shimmer {
  0%   { background-position: -100% 0; }
  60%  { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}
body.galaxy.marine .dp-ichi-hero__more:hover {
  transform: translateY(-1px) scale(1.04);
  background-position: 100% 50%;
  box-shadow:
    0 0 0 2px rgba(34, 211, 238, 0.8),
    0 12px 28px rgba(245, 158, 11, 0.7),
    0 6px 14px rgba(251, 191, 36, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
body.galaxy.marine .dp-ichi-hero__more > span:last-child {
  font-size: 16.5px;
  font-weight: 900;
  margin-left: -2px;
  transition: transform 220ms ease;
  color: #1f0f00;
}
body.galaxy.marine .dp-ichi-hero__more:hover > span:last-child {
  transform: translateX(4px);
}

/* viewport: coverflow style — center spotlight + 兩側 partial 預覽 */
.dp-ichi-hero__viewport {
  position: relative;
}
.dp-ichi-hero__row {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 14px 8px 22px;
  overflow: visible; /* 不捲軸，純 3-slot 固定 layout */
}

/* ── 卡片本體: coverflow 中心 spotlight ──
   width 40% + padding 30% 兩側 → 永遠看到「左 partial + 中 full + 右 partial」3 卡
   非 active 縮小變淡，active 放大發亮 (transform + opacity transition)  */
/* 卡片本體 — 共用樣式
   contain: layout style paint → 隔離卡片內變化不影響外部 (CLS 防護)
   transform GPU layer → 變化純 compositor，不觸發 reflow */
.dp-ichi-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(15, 30, 68, 0.85), rgba(10, 26, 62, 0.92));
  border: 1px solid rgba(116, 245, 255, 0.32);
  box-shadow:
    0 8px 18px rgba(2, 8, 18, 0.5),
    0 0 0 1px rgba(116, 245, 255, 0.12) inset;
  text-decoration: none;
  color: #f0fdff;
  isolation: isolate;
  overflow: hidden;
  contain: layout style paint;
  will-change: transform, opacity;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 360ms ease,
              box-shadow 360ms ease;
}
/* BUG S fix v9 (2026-05-09 condescending-goldberg): 上面 display: flex 蓋掉
   browser UA stylesheet 的 [hidden] { display: none } 預設.
   home-game-hero.js applySlots() 對 N < 5 的 podium section 設 el.hidden = true
   隱藏邊側卡, 但 CSS display:flex 沒讓位 → 邊側 placeholder 卡 (href="#")
   仍 visible. user 點擊就 reload 同頁 (annoying UX). 加 [hidden] override. */
.dp-ichi-hero__card[hidden] {
  display: none !important;
}

/* row 也加 contain 隔離 — 確保 row 內任何變化絕對不會影響 page scroll */
.dp-ichi-hero__row {
  contain: layout style;
}

/* 🎯 v60-fervent-shaw: N=1/2 池子 fallback layout
   N=1: 只有 center 卡, 置中且占大寬度 (~84%)
   N=2: hide left, center + right 居中 (center 大 ~58%, right ~32%)
   N=3+: default (.dp-ichi-hero__card--side 28% / --center 44%) */
.dp-ichi-hero__row[data-count="1"] {
  justify-content: center;
}
.dp-ichi-hero__row[data-count="1"] .dp-ichi-hero__card--center {
  flex: 0 0 84%;
}
.dp-ichi-hero__row[data-count="2"] {
  justify-content: center;
  gap: 10px;
}
.dp-ichi-hero__row[data-count="2"] .dp-ichi-hero__card--center {
  flex: 0 0 58%;
}
.dp-ichi-hero__row[data-count="2"] .dp-ichi-hero__card--side[data-pos="right"] {
  flex: 0 0 32%;
}

/* SIDE 卡 (left + right) — 28% 寬，縮小 + 透明 */
.dp-ichi-hero__card--side {
  flex: 0 0 28%;
  opacity: 0.7;
  transform: scale(0.92);
}

/* CENTER 卡 (spotlight) — 44% 寬，最大 + 強光暈 */
.dp-ichi-hero__card--center,
.dp-ichi-hero__card.is-active {
  flex: 0 0 44%;
  opacity: 1;
  transform: scale(1);
  z-index: 2;
  box-shadow:
    0 14px 32px rgba(2, 8, 18, 0.7),
    0 0 26px rgba(34, 211, 238, 0.45),
    0 0 0 1px rgba(116, 245, 255, 0.28) inset;
}
.dp-ichi-hero__card:active {
  transform: scale(0.83);
}
.dp-ichi-hero__card.is-active:active {
  transform: scale(0.98);
}

/* 非 center 光效弱化 — 強調中心 spotlight 對比 */
.dp-ichi-hero__card--side::before {
  opacity: 0.25 !important;
  filter: blur(4px);
}
.dp-ichi-hero__card--side::after {
  opacity: 0.3;
}

/* 光效 1: rim 旋轉光 (conic-gradient + rotate) */
.dp-ichi-hero__card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(116, 245, 255, 0.55) 60deg,
    transparent 130deg,
    rgba(34, 211, 238, 0.45) 220deg,
    transparent 300deg,
    rgba(251, 191, 36, 0.4) 340deg,
    transparent 360deg
  );
  filter: blur(6px);
  opacity: 0.6;
  animation: dp-ichi-rim 7s linear infinite;
}

/* 光效 2: 對角光線 sweep (mix-blend-mode: screen 加亮不蓋黑) */
.dp-ichi-hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    115deg,
    transparent 28%,
    rgba(255, 255, 255, 0.22) 46%,
    rgba(180, 240, 255, 0.12) 49%,
    rgba(255, 255, 255, 0.22) 52%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: -120% 0;
  mix-blend-mode: screen;
  animation: dp-ichi-sweep 4.6s ease-in-out infinite;
  animation-delay: 0.6s;
}

@keyframes dp-ichi-rim {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* BUG E fix v9: 原本這裡有第一個 @keyframes dp-ichi-sweep (4.6s 圓滑 sweep)
   被 line ~1500 的第二個 @keyframes dp-ichi-sweep (60s 3% duty 閃光) 覆蓋,
   是 dead code. Owner mandate (BUG #67 fix) 是後者, 移除前者保留後者.
   .dp-ichi-hero__card::after 的 animation 在 line ~1500 也用 !important
   override 成 60s linear, 跟新 keyframes timing 一致. */

/* media (商品圖) - 3-card grid: 用 1:1 square 圖更平衡 */
.dp-ichi-hero__media {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border-bottom: 1px solid rgba(116, 245, 255, 0.18);
}
.dp-ichi-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dp-ichi-hero__card:hover .dp-ichi-hero__media img,
.dp-ichi-hero__card:active .dp-ichi-hero__media img {
  transform: scale(1.06);
}

/* HOT badge - 縮小版 (3-card layout) */
.dp-ichi-hero__badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  padding: 2px 6px;
  font-size: 9.9px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5);
  pointer-events: none;
  transform: rotate(-6deg);
}

/* info 區 - 縮小版 (3-card layout) */
.dp-ichi-hero__info {
  position: relative;
  z-index: 1;
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dp-ichi-hero__name {
  font-size: 12.7px;
  font-weight: 700;
  color: #f0fdff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}
.dp-ichi-hero__price {
  font-size: 13.2px;
  font-weight: 700;
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
  letter-spacing: 0.02em;
}

/* sold-out */
.dp-ichi-hero__card--soldout {
  filter: grayscale(0.55) brightness(0.65);
}
.dp-ichi-hero__card--soldout::before,
.dp-ichi-hero__card--soldout::after {
  display: none;
}

/* 左右箭頭 */
.dp-ichi-hero__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 1px solid rgba(116, 245, 255, 0.4);
  border-radius: 50%;
  background: rgba(15, 30, 68, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(180, 240, 255, 0.95);
  font-size: 19.8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 4px 12px rgba(2, 8, 18, 0.5);
  transition: opacity 200ms ease, transform 200ms ease;
}
.dp-ichi-hero__nav:active {
  transform: translateY(-50%) scale(0.92);
}
.dp-ichi-hero__nav--prev { left: 4px; }
.dp-ichi-hero__nav--next { right: 4px; }

/* skeleton - 配合 coverflow layout */
.dp-ichi-hero__skel {
  flex: 0 0 40%;
  scroll-snap-align: center;
  aspect-ratio: 1 / 1.25;
  border-radius: 18px;
  background: linear-gradient(
    90deg,
    rgba(15, 30, 68, 0.5),
    rgba(20, 40, 88, 0.7),
    rgba(15, 30, 68, 0.5)
  );
  background-size: 200% 100%;
  animation: dp-ichi-skel-shimmer 1.6s linear infinite;
}
@keyframes dp-ichi-skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dp-ichi-hero__empty {
  flex: 1;
  padding: 28px 16px;
  text-align: center;
  color: rgba(180, 240, 255, 0.6);
  font-size: 14.3px;
  border: 1px dashed rgba(116, 245, 255, 0.25);
  border-radius: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .dp-ichi-hero__card::before,
  .dp-ichi-hero__card::after,
  .dp-ichi-hero__skel,
  .dp-ichi-hero__media img {
    animation: none;
    transition: none;
  }
}

/* ============================================================
 * v60-fervent-shaw 桌機 5-slot podium override
 * 桌機 viewport 寬, 改 far-left + left + center + right + far-right
 * spotlight (中突 30%, 兩側漸進縮 19% / 14%)
 * mobile 3-slot 28%/44%/28% 不受影響 (用 body.galaxy.marine 區隔)
 * ============================================================ */
body.galaxy.marine .dp-ichi-hero {
  margin: 24px auto 32px;
  padding: 0 16px;
  max-width: 1200px;
}
body.galaxy.marine .dp-ichi-hero__row {
  gap: 12px;
  padding: 18px 12px 28px;
}
body.galaxy.marine .dp-ichi-hero__card--far-side {
  flex: 0 0 14%;
  opacity: 0.42;
  transform: scale(0.8);
}
body.galaxy.marine .dp-ichi-hero__card--side {
  flex: 0 0 19%;
  opacity: 0.7;
  transform: scale(0.9);
}
body.galaxy.marine .dp-ichi-hero__card--center,
body.galaxy.marine .dp-ichi-hero__card.is-active {
  flex: 0 0 30%;
}

/* 桌機 N<5 自適應 layout: row 用 justify-content: center,
   hidden slot 不佔空間, 自動置中保持 spotlight 感 */
body.galaxy.marine .dp-ichi-hero__row[data-count="1"],
body.galaxy.marine .dp-ichi-hero__row[data-count="2"],
body.galaxy.marine .dp-ichi-hero__row[data-count="3"],
body.galaxy.marine .dp-ichi-hero__row[data-count="4"] {
  justify-content: center;
}
/* 桌機 N=1: center 50% (寬一點點 spotlight) */
body.galaxy.marine .dp-ichi-hero__row[data-count="1"] .dp-ichi-hero__card--center {
  flex: 0 0 50%;
}
/* 桌機 N=2: center 38% + right 24% */
body.galaxy.marine .dp-ichi-hero__row[data-count="2"] .dp-ichi-hero__card--center {
  flex: 0 0 38%;
}
body.galaxy.marine .dp-ichi-hero__row[data-count="2"] .dp-ichi-hero__card--side {
  flex: 0 0 24%;
}


/* v20t: 同 m/marine-theme.css 處理桌機 marine-home dp-ichi-hero__card sweep
   原問題: 「玻璃特效跟 MORE 一直循環播放」「不該循環那麼快」(owner audit)
   修法 (v20t): sweep 60s + 3% duty cycle (~1.8s 動 / 58s 靜); rim 60s linear

   BUG #67 fix (2026-05-08 condescending-goldberg): owner 後續反映「桌面那個
   HERO 旁邊的光圈特效好像不會動了」。60s rim 旋轉速度 6 deg/sec 幾乎察覺
   不到, 跟 v20t「降頻」目的一致但被解讀成「壞掉」。
   桌機改成 22s rim (16 deg/sec, 約 1/3 圈/min — 慢但明顯有動), 仍滿足
   v20t「不該循環那麼快」(原 7s 變 22s 是 3x 慢). sweep 維持 60s + 3%
   duty cycle (那個是亮閃, 60s 才不會 distract).
   mobile (m/marine-theme.css) 不動 — 小螢幕保持原 60s 較舒適. */
.dp-ichi-hero__card::after {
  animation: dp-ichi-sweep 60s linear infinite !important;
  animation-delay: 0.6s !important;
}
.dp-ichi-hero__card::before {
  animation: dp-ichi-rim 22s linear infinite !important;
}
@keyframes dp-ichi-sweep {
  0%   { background-position: -120% 0; }
  3%   { background-position: 220% 0; }
  100% { background-position: 220% 0; }
}

/* v20u: desktop 對應同一個 ticker fix */
.dp-ticker__track-inner {
  animation-duration: 22s !important;
}
.dp-ticker__prize-img {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 0 5px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(116, 245, 255, 0.5);
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.4);
  vertical-align: middle;
}

/* v20x: 桌機同步 ticker 重設計 (跟 mobile dp-ticker 同 class) */
.dp-ticker__item {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 5px;
  background: linear-gradient(135deg, rgba(8, 18, 42, 0.95), rgba(15, 30, 68, 0.85));
  border: 1px solid rgba(116, 245, 255, 0.32);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(2, 8, 18, 0.5), inset 0 1px 0 rgba(116, 245, 255, 0.15);
  font-weight: 700;
  white-space: nowrap;
}
.dp-ticker__pcard {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 9px;
  background: rgba(8, 18, 42, 0.85);
  border: 1.5px solid rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.45), inset 0 0 4px rgba(116, 245, 255, 0.25);
  overflow: hidden;
}
.dp-ticker__pcard .dp-ticker__prize-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 7px;
}
.dp-ticker__tier {
  position: absolute;
  top: -5px;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  border: 1.5px solid #fef2f2;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.dp-ticker__caption {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.dp-ticker__top {
  font-size: 13.2px;
  font-weight: 800;
  color: rgba(240, 253, 255, 0.95);
}
.dp-ticker__bot {
  font-size: 12.1px;
  font-weight: 600;
  color: rgba(165, 243, 252, 0.85);
}
.dp-ticker__bot em {
  font-style: normal;
  color: #fbbf24;
  font-weight: 800;
  text-shadow: 0 0 5px rgba(251, 191, 36, 0.5);
}

/* v20z2 desktop: ticker 加速 + 3D 立體玻璃 pill */
.dp-ticker__track-inner {
  animation-duration: 3s !important /* v20z8: 7s -> 3s, +120% */;
  gap: 12px !important;
}
.dp-ticker__item {
  background: linear-gradient(135deg,
    rgba(34, 211, 238, 0.18) 0%,
    rgba(8, 18, 42, 0.95) 30%,
    rgba(15, 30, 68, 0.92) 70%,
    rgba(34, 211, 238, 0.12) 100%) !important;
  border: 1px solid rgba(116, 245, 255, 0.42) !important;
  box-shadow:
    0 2px 6px rgba(2, 8, 18, 0.6),
    0 6px 18px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(116, 245, 255, 0.18) !important;
  position: relative;
  overflow: hidden;
}
.dp-ticker__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.10) 49%,
    rgba(255, 255, 255, 0.04) 52%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.dp-ticker__pcard {
  position: relative;
  z-index: 2;
  border: 2px solid rgba(251, 191, 36, 0.7) !important;
  box-shadow:
    0 0 12px rgba(251, 191, 36, 0.45),
    0 0 6px rgba(34, 211, 238, 0.4),
    inset 0 0 5px rgba(255, 255, 255, 0.1) !important;
}
.dp-ticker__caption {
  position: relative;
  z-index: 2;
}

/* v20z3: desktop ticker pill hover state */
.dp-ticker__item:hover {
  transform: translateY(-1px);
  border-color: rgba(116, 245, 255, 0.7) !important;
  box-shadow:
    0 4px 10px rgba(2, 8, 18, 0.65),
    0 8px 22px rgba(34, 211, 238, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(116, 245, 255, 0.28) !important;
}
.dp-ticker__item {
  transition: transform 200ms cubic-bezier(0.2, 0.9, 0.3, 1),
              border-color 220ms ease,
              box-shadow 220ms ease;
}

/* v20z5 desktop 同步 ticker UIUX upgrade */
.dp-ticker__item {
  padding: 6px 14px 6px 6px !important;
  gap: 11px !important;
  min-height: 68px;
}
.dp-ticker__sparkle {
  flex: 0 0 auto;
  font-size: 17.6px;
  position: relative;
  z-index: 2;
  animation: dp-ticker-sparkle 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
}
@keyframes dp-ticker-sparkle {
  0%, 100% { transform: scale(1) rotate(-3deg); }
  50%      { transform: scale(1.18) rotate(8deg); }
}
.dp-ticker__pcard {
  width: 56px !important;
  height: 56px !important;
}
.dp-ticker__top {
  font-size: 15.4px !important;
  font-weight: 700 !important;
  color: rgba(240, 253, 255, 0.88);
}
.dp-ticker__top strong {
  color: #fbbf24;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}
.dp-ticker__bot {
  font-size: 13.2px !important;
  color: rgba(165, 243, 252, 0.92);
}
.dp-ticker__bot em {
  font-style: normal;
  background: linear-gradient(135deg, #67e8f9, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  font-size: 14.3px;
}
.dp-ticker__tier[data-tier="s"],
.dp-ticker__tier[data-tier="sr"],
.dp-ticker__tier[data-tier="ssr"],
.dp-ticker__tier[data-tier="神話"] {
  background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7) !important;
}
.dp-ticker__tier[data-tier="a"],
.dp-ticker__tier[data-tier="傳說"] {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #1f0f00 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.7) !important;
}
.dp-ticker__tier[data-tier="b"],
.dp-ticker__tier[data-tier="史詩"] {
  background: linear-gradient(135deg, #a78bfa, #7c3aed) !important;
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.7) !important;
}
.dp-ticker__tier[data-tier="c"],
.dp-ticker__tier[data-tier="高級"] {
  background: linear-gradient(135deg, #67e8f9, #0891b2) !important;
  color: #052e16 !important;
}
.dp-ticker__pcard[data-tier="s"],
.dp-ticker__pcard[data-tier="sr"],
.dp-ticker__pcard[data-tier="ssr"],
.dp-ticker__pcard[data-tier="神話"] {
  border-color: rgba(239, 68, 68, 0.8) !important;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.55), 0 0 6px rgba(34, 211, 238, 0.4) !important;
}
.dp-ticker__pcard[data-tier="b"],
.dp-ticker__pcard[data-tier="史詩"] {
  border-color: rgba(167, 139, 250, 0.8) !important;
  box-shadow: 0 0 14px rgba(167, 139, 250, 0.55), 0 0 6px rgba(34, 211, 238, 0.4) !important;
}
.dp-ticker__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 49%,
    rgba(255, 255, 255, 0.04) 52%,
    transparent 70%);
  background-size: 220% 100%;
  background-position: -120% 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  animation: dp-ticker-shine 4.8s linear infinite;
}
@keyframes dp-ticker-shine {
  0%, 60%   { background-position: -120% 0; }
  85%, 100% { background-position: 220% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dp-ticker__item::after,
  .dp-ticker__sparkle { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-07): 桌機 /store marine 重設計
   只在 body.galaxy.marine 啟動 (避免影響非 marine theme 桌機頁)
   ───────────────────────────────────────────────────────────────────── */

/* 桌機 store topbar 加的 cart icon button (BUG #2/3 修) */
body.galaxy.marine .btn.btn-icon-only {
  width: 40px;
  height: 40px;
  padding: 6px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(103, 232, 249, 0.32);
  background: rgba(15, 30, 68, 0.55);
}
body.galaxy.marine .btn.btn-icon-only:hover {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(103, 232, 249, 0.55);
}
.btn-icon-only__icon {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.55));
}
.btn-icon-only__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: linear-gradient(180deg, #ff5470, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border: 1.5px solid #050a1c;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.55);
  pointer-events: none;
}
.btn-icon-only__badge[hidden] { display: none; }

/* btn 前綴 icon (我的訂單 / 前往購物車 button 前) */
.btn-icon-pre {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(103, 232, 249, 0.45));
}

/* 空狀態 icon (店裡無商品 / 搜尋無結果) — 桌機顯示更大 (96px) */
body.galaxy.marine img.store-empty-v2__icon {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  margin: 8px auto 14px;
  display: block;
  filter:
    drop-shadow(0 0 14px rgba(103, 232, 249, 0.45))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  opacity: 0.95;
}

/* 商城 hero icon 區塊 marine 對齊 (store-hero-heading__icon 是空 div, 暫不動) */

/* Phase 8: 「未指定首頁」分類 tab 從 emoji 📦 換成 marine placeholder-product
   icon (16-22px 顯示). store-category-tab__icon-img 是 inline img inside
   .store-category-tab__icon span. */
.store-category-tab__icon-img {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 3px rgba(103, 232, 249, 0.45));
}

/* v60-condescending-goldberg (2026-05-08): 購物車維護中 banner CSS 已清掉
   (Phase D-G 完整 multi-step flow 上線, banner 不再 render). */

/* dp-cart-empty — 空購物車狀態 marine icon + 文案 + actions */
/* default 隱藏 (沿用 .empty 既有規則), .is-visible class 才 show */
body.galaxy.marine .dp-cart-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
  background:
    linear-gradient(180deg, rgba(20, 42, 90, 0.55) 0%, rgba(15, 30, 68, 0.7) 100%);
  border: 1px dashed rgba(103, 232, 249, 0.28);
  border-radius: 18px;
}

body.galaxy.marine .dp-cart-empty.is-visible {
  display: flex;
}

body.galaxy.marine .dp-cart-empty__icon {
  width: 128px;
  height: 128px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 16px rgba(103, 232, 249, 0.45))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
  opacity: 0.9;
  margin-bottom: 4px;
}

body.galaxy.marine .dp-cart-empty h3 {
  margin: 0;
  font-size: 19.8px;
  font-weight: 800;
  color: #f0fdff;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(103, 232, 249, 0.45);
}

body.galaxy.marine .dp-cart-empty p {
  margin: 0;
  font-size: 15.4px;
  line-height: 1.6;
  color: rgba(207, 230, 255, 0.78);
  max-width: 360px;
}

body.galaxy.marine .dp-cart-empty__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

@media (max-width: 640px) {
  body.galaxy.marine .dp-cart-empty {
    padding: 36px 20px;
  }
  body.galaxy.marine .dp-cart-empty__icon {
    width: 96px;
    height: 96px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-07): BUG #9 修 — 訂單頁未登入 hint
   原本只一句「請先登入會員」沒視覺 + 沒 context, 加 marine icon + 文案
   ───────────────────────────────────────────────────────────────────── */
body.galaxy.marine .store-order-login-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.06), rgba(15, 30, 68, 0.45));
  border: 1px solid rgba(103, 232, 249, 0.22);
  max-width: 560px;
  margin: 24px auto;
}
.store-order-login-hint__icon {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: contain;
  margin-bottom: 18px;
  filter:
    drop-shadow(0 0 14px rgba(103, 232, 249, 0.5))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  opacity: 0.95;
}
body.galaxy.marine .store-order-login-hint h3 {
  margin: 0 0 10px;
  font-size: 19.8px;
  font-weight: 800;
  color: #f0fdff;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(103, 232, 249, 0.45);
}
body.galaxy.marine .store-order-login-hint p {
  margin: 0 0 18px;
  font-size: 14.9px;
  line-height: 1.65;
  color: rgba(203, 213, 225, 0.85);
}
.store-order-login-hint__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-07): Phase B — 商品卡 img lazy load
   原本用 CSS background-image 不能 loading="lazy", 改 <img> 可 lazy.
   BUG #10 解.
   ───────────────────────────────────────────────────────────────────── */
body.galaxy.marine .store-card-v2__media {
  position: relative;
  overflow: hidden;
}
.store-card-v2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: rgba(15, 30, 68, 0.4);
  transition: transform 280ms ease, filter 280ms ease;
}
.store-card-v2__img--placeholder {
  object-fit: contain;
  padding: 20%;
  filter:
    drop-shadow(0 0 8px rgba(103, 232, 249, 0.45))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  opacity: 0.85;
}
body.galaxy.marine .store-card-v2:hover .store-card-v2__img {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-07): Phase C — dp-cart-row 重設計
   購物車 row 對齊 MOO / 蝦皮 / 亞馬遜 UX 級別:
     - thumb 用 lazy-load img
     - 數量 stepper 改成 input + 兩個 button (可直接編輯)
     - 庫存 ≤5 顯示警告
     - mobile: 整個 row stack vertical
   Phase D-G 會接 multi-step checkout, 此處先讓 row 視覺上線 (banner 還在所以
   結帳功能仍 disabled).
   ───────────────────────────────────────────────────────────────────── */

body.galaxy.marine .store-cart-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.galaxy.marine .dp-cart-row {
  display: grid;
  grid-template-columns: 96px 1fr auto auto auto;
  grid-template-areas: "thumb main qty price remove";
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background:
    linear-gradient(180deg, rgba(20, 42, 90, 0.65) 0%, rgba(15, 30, 68, 0.78) 100%);
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.28);
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

body.galaxy.marine .dp-cart-row:hover {
  border-color: rgba(103, 232, 249, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(103, 232, 249, 0.18);
}

body.galaxy.marine .dp-cart-row__thumb {
  grid-area: thumb;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15, 30, 68, 0.55);
  border: 1px solid rgba(103, 232, 249, 0.18);
  position: relative;
  transition: border-color 220ms ease, transform 220ms ease;
}

body.galaxy.marine .dp-cart-row__thumb:hover {
  border-color: rgba(250, 204, 21, 0.48);
  transform: scale(1.02);
}

body.galaxy.marine .dp-cart-row__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms ease;
}

body.galaxy.marine .dp-cart-row__img--placeholder {
  object-fit: contain;
  padding: 18%;
  opacity: 0.7;
  filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.4));
}

body.galaxy.marine .dp-cart-row__main {
  grid-area: main;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body.galaxy.marine .dp-cart-row__title {
  margin: 0;
  font-size: 17.6px;
  font-weight: 700;
  line-height: 1.4;
  color: #f0f9ff;
  letter-spacing: 0.01em;
}

body.galaxy.marine .dp-cart-row__title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.galaxy.marine .dp-cart-row__title a:hover {
  color: #facc15;
  text-decoration: underline;
}

body.galaxy.marine .dp-cart-row__unit-price {
  margin: 0;
  font-size: 14.3px;
  color: rgba(207, 230, 255, 0.78);
  font-weight: 500;
}

body.galaxy.marine .dp-cart-row__stock {
  margin: 0;
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.galaxy.marine .dp-cart-row__stock.is-low {
  color: #facc15;
}

body.galaxy.marine .dp-cart-row__stock.is-out {
  color: #fb7185;
}

body.galaxy.marine .dp-cart-row__qty {
  grid-area: qty;
  display: inline-flex;
  align-items: stretch;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(103, 232, 249, 0.32);
  background: rgba(8, 20, 48, 0.55);
}

body.galaxy.marine .dp-cart-row__qty-btn {
  appearance: none;
  border: 0;
  background: rgba(20, 42, 90, 0.7);
  color: #67e8f9;
  font-size: 19.8px;
  font-weight: 700;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, color 160ms ease;
}

body.galaxy.marine .dp-cart-row__qty-btn:hover {
  background: rgba(103, 232, 249, 0.18);
  color: #facc15;
}

body.galaxy.marine .dp-cart-row__qty-btn:active {
  background: rgba(103, 232, 249, 0.28);
}

/* BUG #34 fix: qty=1 時 disable - button (防 silent remove);
   qty=stock 時 disable + button (防 over-stock) */
body.galaxy.marine .dp-cart-row__qty-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: rgba(20, 42, 90, 0.4);
  color: rgba(103, 232, 249, 0.55);
}

body.galaxy.marine .dp-cart-row__qty-btn:disabled:hover {
  background: rgba(20, 42, 90, 0.4);
  color: rgba(103, 232, 249, 0.55);
}

body.galaxy.marine .dp-cart-row__qty-input {
  appearance: textfield;
  -moz-appearance: textfield;
  border: 0;
  background: transparent;
  color: #f0f9ff;
  font-size: 15.4px;
  font-weight: 700;
  width: 48px;
  height: 36px;
  text-align: center;
  outline: none;
  border-left: 1px solid rgba(103, 232, 249, 0.2);
  border-right: 1px solid rgba(103, 232, 249, 0.2);
}

body.galaxy.marine .dp-cart-row__qty-input::-webkit-outer-spin-button,
body.galaxy.marine .dp-cart-row__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

body.galaxy.marine .dp-cart-row__qty-input:focus {
  background: rgba(103, 232, 249, 0.08);
}

/* BUG #21 a11y fix (2026-05-08): 鍵盤 user tab 走訪看不到 focus — 加 cyan focus-visible ring
   所有 dp-* interactive button + radio + checkbox */
body.galaxy.marine .dp-cart-row__qty-btn:focus-visible,
body.galaxy.marine .dp-cart-row__remove:focus-visible,
body.galaxy.marine .dp-cart-row__favorite:focus-visible,
body.galaxy.marine .dp-cart-head__bulk-btn:focus-visible,
body.galaxy.marine .dp-cart-summary-card__cta:focus-visible,
body.galaxy.marine .dp-cart-summary-card__refresh:focus-visible,
body.galaxy.marine .dp-progress__step-link:focus-visible,
body.galaxy.marine .dp-shipping-radio:focus-within,
body.galaxy.marine .dp-payment-option:focus-within,
body.galaxy.marine .dp-address-card:focus-within,
body.galaxy.marine .dp-address-card__action-btn:focus-visible,
body.galaxy.marine .dp-confirm-terms:focus-within,
body.galaxy.marine .dp-cart-row__select:focus-within,
body.galaxy.marine .dp-cart-head__select-all:focus-within {
  outline: 2px solid #67e8f9;
  outline-offset: 2px;
  box-shadow:
    0 0 0 4px rgba(103, 232, 249, 0.2),
    0 0 12px rgba(103, 232, 249, 0.4);
}

/* qty-input 跟 input 自身 focus, 不用 focus-within */
body.galaxy.marine .dp-cart-row__qty-input:focus-visible {
  outline: 2px solid #67e8f9;
  outline-offset: 2px;
}

body.galaxy.marine .dp-cart-row__price {
  grid-area: price;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 100px;
}

body.galaxy.marine .dp-cart-row__line-total {
  font-size: 19.8px;
  font-weight: 800;
  color: #facc15;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum" 1;
}

body.galaxy.marine .dp-cart-row__line-meta {
  font-size: 12.1px;
  color: rgba(207, 230, 255, 0.55);
  letter-spacing: 0.05em;
}

body.galaxy.marine .dp-cart-row__remove {
  grid-area: remove;
  appearance: none;
  border: 0;
  background: rgba(244, 63, 94, 0.12);
  color: #fda4af;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 19.8px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* BUG #38 fix: ::before invisible 44×44 hit area for ≥Apple HIG 44pt / Google 48dp */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.galaxy.marine .dp-cart-row__remove:hover {
  background: rgba(244, 63, 94, 0.28);
  color: #fff1f2;
  transform: scale(1.08);
}

/* mobile responsive (≤640px) — stack vertical
   BUG #50 fix (2026-05-08): 之前 grid-template-areas 沒定義 "select" + "favorite"
   兩個 area, 結果 .dp-cart-row__select 跟 .dp-cart-row__favorite 兩個 grid item
   被 auto-place 在隨機 cell, 排版亂掉. 用戶 verbatim「很亂」「跟網頁版不一樣」.

   mobile design (對齊蝦皮 / momo mobile cart row):
   - col 1: select checkbox (28px, span 全列)
   - col 2: thumb 80×80 (span row 1+2)
   - col 3: main (title/price/stock)
   - col 4: 右上 remove × button
   row 2: thumb 繼續 + qty stepper + price (右下)
   favorite ♥ button: hide (mobile 用商品頁加收藏更直覺, cart 不顯示).
*/
@media (max-width: 640px) {
  body.galaxy.marine .dp-cart-row {
    grid-template-columns: 28px 80px 1fr auto;
    grid-template-areas:
      "select thumb main   remove"
      "select thumb qty    price";
    gap: 10px 12px;
    padding: 14px;
  }

  body.galaxy.marine .dp-cart-row__thumb {
    width: 80px;
    height: 80px;
  }

  body.galaxy.marine .dp-cart-row__title {
    font-size: 16.5px;
  }

  body.galaxy.marine .dp-cart-row__qty {
    justify-self: start;
  }

  body.galaxy.marine .dp-cart-row__price {
    align-items: flex-end;
  }

  /* BUG #50: favorite ♥ button mobile 隱藏 (用商品頁加收藏更直覺, cart 簡潔) */
  body.galaxy.marine .dp-cart-row__favorite {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-07): Phase E — sticky summary 2-col
   desktop ≥1024px: cart rows 左 (1fr) + 結帳卡 sticky 右 (380px)
     對齊 MOO / 蝦皮 / 亞馬遜 standard pattern
   mobile <1024px: 單欄 stack (cart 在上, 結帳卡在下) — 維持現狀
   ───────────────────────────────────────────────────────────────────── */

body.galaxy.marine .store-cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

body.galaxy.marine .store-cart-layout__main {
  min-width: 0;
}

body.galaxy.marine .store-cart-layout__aside {
  min-width: 0;
}

body.galaxy.marine .store-cart-layout__aside .section {
  margin-top: 0;
}

@media (min-width: 1024px) {
  body.galaxy.marine .store-cart-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
  }

  body.galaxy.marine .store-cart-layout__aside {
    position: sticky;
    top: 88px; /* topbar (~64) + safe gap */
    align-self: start;
  }

  /* Phase E: 結帳卡 sticky 時的視覺強化 — cyan ring + soft glow */
  body.galaxy.marine .store-cart-layout__aside .store-checkout-card {
    border: 1px solid rgba(103, 232, 249, 0.32);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      0 8px 24px rgba(0, 0, 0, 0.35),
      0 0 0 1px rgba(103, 232, 249, 0.14);
  }
}

/* ─────────────────────────────────────────────────────────────────────
   BUG #51 fix (2026-05-08): /store/* 頁面用 body class="galaxy marine",
   不是 "store-marine". 所以 styles-customer.css 內的 store-marine topbar
   mobile rule 完全 NO match → 桌機 nav 全部擠在 mobile 視窗 → 破版.
   用戶 verbatim「手機版本點選進入購物車 還是很明顯不對 跟網頁版不一樣」.
   修法: 鏡像 styles-customer.css store-marine 的 topbar mobile rule, 改成
   target body.galaxy.marine. 涵蓋 cart / checkout / payment / confirm /
   orders / order-success 全 store 子頁 + /store/item.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  body.galaxy.marine .topbar {
    flex-wrap: wrap;
    padding: 8px 12px;
    min-height: auto;
  }
  body.galaxy.marine .topbar .nav {
    order: 3;
    width: 100%;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  body.galaxy.marine .topbar .nav::-webkit-scrollbar { display: none; }
  body.galaxy.marine .topbar .nav a {
    font-size: 14.3px;
    padding: 4px 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body.galaxy.marine .topbar-actions {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  body.galaxy.marine .topbar-actions .btn {
    padding: 6px 10px;
    font-size: 13.2px;
  }
  body.galaxy.marine .brand-link__image {
    max-height: 44px;
  }

  /* ─────────────────────────────────────────────────────────────────
     R210 hardcore-gould (2026-05-10): checkout transactional flow pages
     mobile clean-up. 用戶 verbatim「我點選立即結帳 好像還是沒有 M 版本?」
     根因: cart/checkout/payment/confirm/order-success 5 頁用桌機 topbar
     (6 項 mode nav + 3 ghost buttons), mobile 上即使 nav 變 scrollable
     橫向 row 仍佔一整列 + 視覺凌亂, 跟 /m/store clean dp-top 不一致.
     修法: 在這些「結帳進行中」頁隱藏 6-mode nav (用戶在交易 flow, 不需切
     換到 yifan/領主賞), 也精簡 topbar-actions, 對齊 /m/store mobile feel.
     注意: cart 頁保留 nav 因 user 可能想回去逛更多商品.
     ───────────────────────────────────────────────────────────────── */
  body.galaxy.marine:has(.dp-checkout-page) .topbar .nav,
  body.galaxy.marine:has(.dp-payment-page) .topbar .nav,
  body.galaxy.marine:has(.dp-confirm-page) .topbar .nav,
  body.galaxy.marine:has(.store-success-page) .topbar .nav {
    display: none;
  }
  /* 結帳流程 transactional pages: 也精簡 ghost buttons.
     保留: 「返回購物車」(改商品) + 「會員登入」(未登入時 critical).
     隱藏: 「我的訂單」(交易中不必要), 「topbar-cta 立即抽」. */
  body.galaxy.marine:has(.dp-checkout-page) .topbar-actions .btn[href="/store/orders"],
  body.galaxy.marine:has(.dp-payment-page) .topbar-actions .btn[href="/store/orders"],
  body.galaxy.marine:has(.dp-confirm-page) .topbar-actions .btn[href="/store/orders"],
  body.galaxy.marine:has(.store-success-page) .topbar-actions .btn[href="/store/cart"],
  body.galaxy.marine:has(.dp-checkout-page) .topbar-actions .topbar-cta,
  body.galaxy.marine:has(.dp-payment-page) .topbar-actions .topbar-cta,
  body.galaxy.marine:has(.dp-confirm-page) .topbar-actions .topbar-cta,
  body.galaxy.marine:has(.store-success-page) .topbar-actions .topbar-cta {
    display: none;
  }
  /* topbar 整體更緊湊在這 4 頁 — 給 main content 更多垂直空間 */
  body.galaxy.marine:has(.dp-checkout-page) .topbar,
  body.galaxy.marine:has(.dp-payment-page) .topbar,
  body.galaxy.marine:has(.dp-confirm-page) .topbar,
  body.galaxy.marine:has(.store-success-page) .topbar {
    padding: 6px 12px;
    min-height: 52px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   BUG #49 fix (2026-05-08): mobile sticky bottom CTA bar.
   問題: 手機版單欄 stack 時, 結帳卡 (店家摘要 + 前往結帳 button) 在所有商品
   row 的底下. 用戶必須 scroll 過所有 cart 商品才看得到總金額 + 結帳按鈕,
   UX 跟 momo / 蝦皮 / Amazon 都不對齊.
   修法: 加 .dp-cart-mobile-sticky position:fixed bottom 0, 顯示總金額 +
   前往結帳 CTA. 桌機 ≥1024px 隱藏 (sticky aside 已經做這件事).
   ───────────────────────────────────────────────────────────────────── */
.dp-cart-mobile-sticky {
  display: none;
}

@media (max-width: 1023px) {
  body.galaxy.marine .dp-cart-mobile-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: linear-gradient(180deg, rgba(15, 30, 68, 0.97), rgba(10, 22, 51, 0.99));
    border-top: 1px solid rgba(103, 232, 249, 0.36);
    box-shadow: 0 -8px 24px rgba(5, 10, 28, 0.6);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.galaxy.marine .dp-cart-mobile-sticky[hidden] {
    display: none;
  }

  body.galaxy.marine .dp-cart-mobile-sticky__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    max-width: 100%;
  }

  body.galaxy.marine .dp-cart-mobile-sticky__total {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  body.galaxy.marine .dp-cart-mobile-sticky__label {
    font-size: 11px;
    color: rgba(207, 230, 255, 0.6);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  body.galaxy.marine .dp-cart-mobile-sticky__amount {
    font-size: 22px;
    font-weight: 800;
    color: #facc15;
    font-feature-settings: "tnum" 1;
    line-height: 1.1;
  }

  body.galaxy.marine .dp-cart-mobile-sticky__cta {
    flex-shrink: 0;
    padding: 12px 26px;
    font-weight: 700;
    font-size: 16.5px;
    border-radius: 12px;
    min-height: 44px;
  }

  /* 防最後 cart row 被 sticky bar 蓋掉, padding 讓 page 底部留 80px 空間
     BUG #54 fix (2026-05-08): confirm 頁也用 sticky bar (BUG #52), 同樣需要
     底部 padding 防遮蔽.
     R204 hardcore-gould (2026-05-10): checkout / payment / order-success 三頁
     新加 mobile sticky bar (對齊 APP 化路線), 同款需要底部 padding. */
  body.galaxy.marine .store-cart-page,
  body.galaxy.marine .dp-confirm-page,
  body.galaxy.marine .dp-checkout-page,
  body.galaxy.marine .dp-payment-page,
  body.galaxy.marine .store-success-page {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* desktop ≥1280px: aside 拉寬到 420px 給更舒適 form padding */
@media (min-width: 1280px) {
  body.galaxy.marine .store-cart-layout {
    grid-template-columns: minmax(0, 1fr) 420px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-07): Phase F — cart head + select
   蝦皮級全選 head bar + per-row checkbox.
   - .dp-cart-head: 在 cart rows 上方, 全選 checkbox + 件數 + bulk-remove
   - .dp-cart-row__select: row 左側 checkbox (在 thumb 之前)
   - .dp-cart-row.is-selected: cyan border 強調已選
   ───────────────────────────────────────────────────────────────────── */

body.galaxy.marine .dp-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(20, 42, 90, 0.55) 0%, rgba(15, 30, 68, 0.7) 100%);
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 14px;
  margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.galaxy.marine .dp-cart-head__select-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15.4px;
  font-weight: 600;
  color: #cfe6ff;
  cursor: pointer;
  user-select: none;
}

body.galaxy.marine .dp-cart-head__select-all input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 20, 48, 0.5);
  cursor: pointer;
  display: inline-block;
  flex-shrink: 0;
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease;
}

body.galaxy.marine .dp-cart-head__select-all input[type="checkbox"]:checked,
body.galaxy.marine .dp-cart-row__select input[type="checkbox"]:checked {
  background: #22d3ee;
  border-color: #22d3ee;
}

body.galaxy.marine .dp-cart-head__select-all input[type="checkbox"]:checked::after,
body.galaxy.marine .dp-cart-row__select input[type="checkbox"]:checked + .dp-cart-row__select-mark {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a1a3e;
  font-size: 13.2px;
  font-weight: 800;
  line-height: 1;
}

body.galaxy.marine .dp-cart-head__select-all input[type="checkbox"]:indeterminate {
  background: #22d3ee;
  border-color: #22d3ee;
}

body.galaxy.marine .dp-cart-head__select-all input[type="checkbox"]:indeterminate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  right: 3px;
  height: 2px;
  background: #0a1a3e;
  transform: translateY(-50%);
  border-radius: 1px;
}

body.galaxy.marine .dp-cart-head__select-label {
  font-feature-settings: "tnum" 1;
}

body.galaxy.marine .dp-cart-head__bulk {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

body.galaxy.marine .dp-cart-head__bulk-btn {
  appearance: none;
  border: 1px solid rgba(244, 63, 94, 0.4);
  background: rgba(244, 63, 94, 0.12);
  color: #fda4af;
  font-size: 14.3px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

body.galaxy.marine .dp-cart-head__bulk-btn:hover:not(:disabled) {
  background: rgba(244, 63, 94, 0.25);
  border-color: rgba(244, 63, 94, 0.6);
  color: #fff1f2;
}

body.galaxy.marine .dp-cart-head__bulk-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* per-row checkbox (放在 thumb 左側, 用 grid-area 加進 dp-cart-row layout)
   Phase X3 (2026-05-08): 新增 favorite ♡ button column 在 remove × 旁邊
   BUG #56 fix (2026-05-08): 此 desktop rule 沒包 @media, source order 在
   BUG #50 fix (line 1996, 在 @media 640px 內) 之後. CSS cascade same
   specificity → 後者贏 → mobile 還是吃 7-col desktop grid, BUG #50 fix
   integration 不到. 修法: 加 @media (min-width: 641px) 把這 rule scope
   到桌機, mobile 才能讓 line 1996 (BUG #50) 接管. */
@media (min-width: 641px) {
  body.galaxy.marine .dp-cart-row {
    grid-template-columns: auto 96px 1fr auto auto auto auto;
    grid-template-areas: "select thumb main qty price favorite remove";
  }
}

body.galaxy.marine .dp-cart-row__favorite {
  grid-area: favorite;
  appearance: none;
  border: 0;
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 19.8px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* BUG #38 fix: ::before invisible 44×44 hit area for ≥Apple HIG 44pt / Google 48dp */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

body.galaxy.marine .dp-cart-row__favorite:hover {
  background: rgba(250, 204, 21, 0.28);
  color: #fef3c7;
  transform: scale(1.08);
}

/* BUG #38 fix: 擴大 cart row ♡ + × button 觸碰目標到 44×44px (Apple HIG)
   不改 visual size, 只用 ::before 透明覆蓋區擴大 hit area */
body.galaxy.marine .dp-cart-row__favorite::before,
body.galaxy.marine .dp-cart-row__remove::before {
  content: "";
  position: absolute;
  inset: -6px; /* 擴 6px 每側 = 32+12=44px tap target */
  border-radius: 50%;
  z-index: 1;
}

/* BUG #14 fix: 已收藏狀態 (♡ → ♥) 視覺 feedback */
body.galaxy.marine .dp-cart-row__favorite.is-favorited {
  background: rgba(250, 204, 21, 0.32);
  color: #facc15;
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.42),
    0 0 12px rgba(250, 204, 21, 0.4);
}

body.galaxy.marine .dp-cart-row__favorite.is-favorited:hover {
  transform: scale(1.05);
  background: rgba(250, 204, 21, 0.38);
}

/* bulk-favorite head bar variant (gold tone) */
body.galaxy.marine .dp-cart-head__bulk-btn--favorite {
  border-color: rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.12);
  color: #facc15;
}

body.galaxy.marine .dp-cart-head__bulk-btn--favorite:hover:not(:disabled) {
  background: rgba(250, 204, 21, 0.25);
  border-color: rgba(250, 204, 21, 0.65);
  color: #fef3c7;
}

body.galaxy.marine .dp-cart-row__select {
  grid-area: select;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

body.galaxy.marine .dp-cart-row__select input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 20, 48, 0.5);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color 160ms ease, border-color 160ms ease;
}

body.galaxy.marine .dp-cart-row__select-mark {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #0a1a3e;
  font-size: 13.2px;
  font-weight: 800;
  pointer-events: none;
}

body.galaxy.marine .dp-cart-row__select input[type="checkbox"]:checked + .dp-cart-row__select-mark {
  display: flex;
}

body.galaxy.marine .dp-cart-row.is-selected {
  border-color: rgba(103, 232, 249, 0.42);
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0%, rgba(20, 42, 90, 0.7) 100%);
}

/* BUG #55 fix (2026-05-08): 之前這個 @media block 跟 line 1996 同款 @media
   重複定義 .dp-cart-row, 因為 cascade 排在後面贏 → 把 line 1996 的 BUG #50
   fix 整個蓋掉. user 看到的還是舊 3-row 帶 favorite 的破版.
   修法: 此 block 拿掉 .dp-cart-row 的 grid-template 重新定義, 只保留
   .dp-cart-head 跟 .dp-cart-row__select 不衝突的 mobile 規則.
   .dp-cart-row 的 mobile grid 由 line 1996 (BUG #50) 唯一管. */
@media (max-width: 640px) {
  body.galaxy.marine .dp-cart-head {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
  }

  body.galaxy.marine .dp-cart-head__bulk-btn {
    font-size: 13.2px;
    padding: 6px 10px;
  }

  /* favorite mobile sizing 不用了 (BUG #50 整個 hide), 但 select 仍需要 align */
  body.galaxy.marine .dp-cart-row__select {
    align-self: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   v60-condescending-goldberg (2026-05-08): Phase G-prep — ProgressIndicator
   4-step flow 視覺指示器: 購物車 → 寄送 → 付款 → 確認
   - .is-active: cyan filled circle + cyan label (現在這步)
   - .is-completed: cyan ✓ filled (已完成)
   - .is-disabled: 灰色 outline + muted label (還沒做)
   - 連線 (.dp-progress__line): is-completed 全亮 cyan, 否則 dim
   mobile (≤640px): label 字體縮小, 整列 wrap-around 不要溢出
   ───────────────────────────────────────────────────────────────────── */

body.galaxy.marine .dp-progress {
  margin: 0 0 18px;
  padding: 0;
}

body.galaxy.marine .dp-progress__steps {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  list-style: none;
  padding: 16px 18px;
  margin: 0;
  background:
    linear-gradient(180deg, rgba(20, 42, 90, 0.55) 0%, rgba(15, 30, 68, 0.7) 100%);
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.galaxy.marine .dp-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 0 4px;
  min-width: 0;
}

body.galaxy.marine .dp-progress__circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(103, 232, 249, 0.4);
  background: rgba(8, 20, 48, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(207, 230, 255, 0.7);
  font-size: 14.3px;
  font-weight: 800;
  font-feature-settings: "tnum" 1;
  flex-shrink: 0;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

body.galaxy.marine .dp-progress__step.is-active .dp-progress__circle {
  background: linear-gradient(160deg, #22d3ee 0%, #67e8f9 100%);
  border-color: #67e8f9;
  color: #0a1a3e;
  box-shadow:
    0 0 0 4px rgba(103, 232, 249, 0.18),
    0 0 16px rgba(103, 232, 249, 0.45);
}

body.galaxy.marine .dp-progress__step.is-completed .dp-progress__circle {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(103, 232, 249, 0.7);
  color: #67e8f9;
}

body.galaxy.marine .dp-progress__step.is-disabled .dp-progress__circle {
  border-color: rgba(148, 163, 184, 0.3);
  color: rgba(148, 163, 184, 0.55);
}

body.galaxy.marine .dp-progress__label {
  font-size: 15.4px;
  font-weight: 600;
  color: rgba(207, 230, 255, 0.7);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 200ms ease;
}

body.galaxy.marine .dp-progress__step.is-active .dp-progress__label {
  color: #67e8f9;
}

body.galaxy.marine .dp-progress__step.is-completed .dp-progress__label {
  color: rgba(207, 230, 255, 0.9);
}

body.galaxy.marine .dp-progress__step.is-disabled .dp-progress__label {
  color: rgba(148, 163, 184, 0.55);
}

body.galaxy.marine .dp-progress__line {
  flex: 1 1 auto;
  height: 2px;
  min-width: 24px;
  background: linear-gradient(90deg, rgba(103, 232, 249, 0.42) 0%, rgba(148, 163, 184, 0.18) 100%);
  border-radius: 2px;
  margin: 0 8px;
}

/* line 是 completed 時全亮 cyan (用 nth-child trick — 因為 line 是 sibling 而不是 child) */
body.galaxy.marine .dp-progress__step.is-completed + .dp-progress__line {
  background: rgba(103, 232, 249, 0.55);
}

/* mobile (≤640px): label 縮小, gap 收緊, 但保持單列不 wrap (overflow-x scroll fallback) */
@media (max-width: 640px) {
  body.galaxy.marine .dp-progress__steps {
    padding: 12px 14px;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.galaxy.marine .dp-progress__steps::-webkit-scrollbar {
    display: none;
  }

  body.galaxy.marine .dp-progress__circle {
    width: 28px;
    height: 28px;
    font-size: 13.2px;
  }

  body.galaxy.marine .dp-progress__label {
    font-size: 13.2px;
  }

  body.galaxy.marine .dp-progress__line {
    min-width: 16px;
    margin: 0 4px;
  }
}

/* ProgressIndicator step-link (completed step 變可點回去 edit) */
body.galaxy.marine .dp-progress__step-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  padding: 2px 4px;
  margin: -2px -4px;
  transition: background-color 160ms ease;
}

body.galaxy.marine .dp-progress__step-link:hover {
  background: rgba(103, 232, 249, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────
   Phase D-G (2026-05-08): cart 摘要卡 + checkout/payment/confirm 頁
   ───────────────────────────────────────────────────────────────────── */

/* dp-cart-summary-card — cart 右側 sticky 摘要 (取代舊 shipping form 一坨) */
body.galaxy.marine .dp-cart-summary-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.galaxy.marine .dp-cart-summary-card .kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15.4px;
  color: rgba(207, 230, 255, 0.85);
  padding: 4px 0;
}

body.galaxy.marine .dp-cart-summary-card .kv-row strong {
  font-weight: 700;
  color: #f0f9ff;
  font-feature-settings: "tnum" 1;
}

body.galaxy.marine .dp-cart-summary-card__total {
  border-top: 1px dashed rgba(103, 232, 249, 0.25);
  padding-top: 12px !important;
  margin-top: 6px;
}

body.galaxy.marine .dp-cart-summary-card__total span {
  font-size: 16.5px;
  font-weight: 600;
}

body.galaxy.marine .dp-cart-summary-card__total strong {
  font-size: 24.2px;
  color: #facc15 !important;
}

body.galaxy.marine .dp-cart-summary-card__cta {
  margin-top: 10px;
  font-size: 17.6px;
  font-weight: 700;
  padding: 14px 16px;
}

body.galaxy.marine .dp-cart-summary-card__hint {
  margin: 0;
  font-size: 13.2px;
  color: rgba(148, 163, 184, 0.75);
  text-align: center;
  letter-spacing: 0.02em;
}

body.galaxy.marine .dp-cart-summary-card__refresh {
  margin-top: 8px;
  font-size: 14.3px;
  padding: 8px 14px;
}

/* dp-checkout-page / dp-payment-page / dp-confirm-page main */
body.galaxy.marine .dp-checkout-page,
body.galaxy.marine .dp-payment-page,
body.galaxy.marine .dp-confirm-page {
  position: relative;
  z-index: 1;
}

/* dp-checkout-card — main panel for checkout/payment/confirm */
body.galaxy.marine .dp-checkout-card {
  background:
    linear-gradient(180deg, rgba(20, 42, 90, 0.65) 0%, rgba(15, 30, 68, 0.78) 100%);
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.28);
}

body.galaxy.marine .dp-checkout-card h3 {
  font-size: 17.6px;
  font-weight: 700;
  color: #f0f9ff;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

body.galaxy.marine .dp-checkout-card h3:not(:first-child) {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(103, 232, 249, 0.18);
}

/* dp-shipping-methods radio cards */
body.galaxy.marine .dp-shipping-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

body.galaxy.marine .dp-shipping-radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(8, 20, 48, 0.4);
  border: 1px solid rgba(103, 232, 249, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

body.galaxy.marine .dp-shipping-radio:hover {
  border-color: rgba(103, 232, 249, 0.45);
}

body.galaxy.marine .dp-shipping-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 20, 48, 0.5);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.galaxy.marine .dp-shipping-radio input[type="radio"]:checked {
  border-color: #67e8f9;
  background: #22d3ee;
  box-shadow: 0 0 0 4px rgba(103, 232, 249, 0.2);
}

body.galaxy.marine .dp-shipping-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #0a1a3e;
}

body.galaxy.marine .dp-shipping-radio:has(input:checked) {
  border-color: rgba(103, 232, 249, 0.55);
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0%, rgba(8, 20, 48, 0.4) 100%);
}

body.galaxy.marine .dp-shipping-radio__title {
  font-size: 16.5px;
  font-weight: 700;
  color: #f0f9ff;
  margin-bottom: 3px;
}

body.galaxy.marine .dp-shipping-radio__desc {
  font-size: 13.2px;
  color: rgba(148, 163, 184, 0.85);
}

/* dp-shipping-form 用既有 store-shipping-form / input-inline 樣式 */

/* dp-address-list (saved addresses) */
body.galaxy.marine .dp-address-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px;
}

body.galaxy.marine .dp-address-list__empty {
  font-size: 14.3px;
  color: rgba(148, 163, 184, 0.75);
  margin: 0;
  padding: 12px 14px;
  background: rgba(8, 20, 48, 0.3);
  border: 1px dashed rgba(103, 232, 249, 0.18);
  border-radius: 10px;
}

/* Phase X1 (2026-05-08): dp-address-card 從 <label> 改 <div>(label+actions) 兩層 */
body.galaxy.marine .dp-address-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(8, 20, 48, 0.4);
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 12px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

body.galaxy.marine .dp-address-card:hover {
  border-color: rgba(103, 232, 249, 0.4);
}

body.galaxy.marine .dp-address-card.is-selected {
  border-color: #67e8f9;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.08) 0%, rgba(8, 20, 48, 0.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.32);
}

body.galaxy.marine .dp-address-card__select {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

body.galaxy.marine .dp-address-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px dashed rgba(103, 232, 249, 0.16);
  justify-content: flex-end;
}

body.galaxy.marine .dp-address-card__action-btn {
  appearance: none;
  background: rgba(103, 232, 249, 0.1);
  border: 1px solid rgba(103, 232, 249, 0.32);
  color: #67e8f9;
  font-size: 13.2px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

body.galaxy.marine .dp-address-card__action-btn:hover {
  background: rgba(103, 232, 249, 0.22);
  border-color: rgba(103, 232, 249, 0.55);
  color: #f0f9ff;
}

body.galaxy.marine .dp-address-card__action-btn--danger {
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(244, 63, 94, 0.4);
  color: #fda4af;
}

body.galaxy.marine .dp-address-card__action-btn--danger:hover {
  background: rgba(244, 63, 94, 0.25);
  border-color: rgba(244, 63, 94, 0.6);
  color: #fff1f2;
}

body.galaxy.marine .dp-address-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 20, 48, 0.5);
  flex-shrink: 0;
  margin-top: 4px;
  cursor: pointer;
  position: relative;
}

body.galaxy.marine .dp-address-card input[type="radio"]:checked {
  border-color: #67e8f9;
  background: #22d3ee;
}

body.galaxy.marine .dp-address-card input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #0a1a3e;
}

body.galaxy.marine .dp-address-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.galaxy.marine .dp-address-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.galaxy.marine .dp-address-card__name {
  font-size: 16.5px;
  font-weight: 700;
  color: #f0f9ff;
}

body.galaxy.marine .dp-address-card__default-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(250, 204, 21, 0.18);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.4);
  letter-spacing: 0.05em;
}

body.galaxy.marine .dp-address-card__phone,
body.galaxy.marine .dp-address-card__line {
  font-size: 14.3px;
  color: rgba(207, 230, 255, 0.78);
}

body.galaxy.marine .dp-address-card__zip {
  display: inline-block;
  margin-right: 6px;
  font-size: 12.1px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(103, 232, 249, 0.12);
  color: #67e8f9;
  letter-spacing: 0.04em;
}

/* dp-checkout-footer — back / next button row */
body.galaxy.marine .dp-checkout-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(103, 232, 249, 0.18);
}

body.galaxy.marine .dp-checkout-footer .btn.primary {
  padding: 12px 24px;
  font-size: 16.5px;
  font-weight: 700;
}

body.galaxy.marine .dp-checkout-footer--stack {
  flex-direction: column-reverse;
  gap: 10px;
  align-items: stretch;
}

body.galaxy.marine .dp-checkout-footer--stack .btn {
  width: 100%;
  text-align: center;
}

/* dp-payment-options (radio cards with icon) */
body.galaxy.marine .dp-payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.galaxy.marine .dp-payment-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(8, 20, 48, 0.4);
  border: 1px solid rgba(103, 232, 249, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
  position: relative;
}

body.galaxy.marine .dp-payment-option:hover:not(.is-disabled) {
  border-color: rgba(103, 232, 249, 0.45);
}

body.galaxy.marine .dp-payment-option.is-selected {
  border-color: #67e8f9;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.1) 0%, rgba(8, 20, 48, 0.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(103, 232, 249, 0.32);
}

body.galaxy.marine .dp-payment-option.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(15, 30, 68, 0.55);
}

body.galaxy.marine .dp-payment-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 20, 48, 0.5);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}

body.galaxy.marine .dp-payment-option input[type="radio"]:checked {
  border-color: #67e8f9;
  background: #22d3ee;
}

body.galaxy.marine .dp-payment-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #0a1a3e;
}

body.galaxy.marine .dp-payment-option__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-block;
  background: rgba(103, 232, 249, 0.1);
  border: 1px solid rgba(103, 232, 249, 0.2);
  flex-shrink: 0;
  /* <img> render — object-fit contain, padding 6px 讓 icon 不貼邊 */
  object-fit: contain;
  padding: 6px;
  /* fallback 給萬一還是 <div> emoji 的場景 */
  font-size: 24.2px;
  line-height: 32px;
  text-align: center;
}

body.galaxy.marine .dp-payment-option__body {
  flex: 1;
  min-width: 0;
}

body.galaxy.marine .dp-payment-option__title {
  font-size: 16.5px;
  font-weight: 700;
  color: #f0f9ff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.galaxy.marine .dp-payment-option__desc {
  font-size: 13.2px;
  color: rgba(148, 163, 184, 0.85);
  line-height: 1.45;
}

body.galaxy.marine .dp-payment-option__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(250, 204, 21, 0.18);
  color: #facc15;
  border: 1px solid rgba(250, 204, 21, 0.32);
  letter-spacing: 0.04em;
}

/* dp-confirm-page grid */
body.galaxy.marine .dp-confirm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 1024px) {
  body.galaxy.marine .dp-confirm-grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
  }

  body.galaxy.marine .dp-confirm-aside {
    position: sticky;
    top: 88px;
    align-self: start;
  }
}

body.galaxy.marine .dp-confirm-section {
  background:
    linear-gradient(180deg, rgba(20, 42, 90, 0.6) 0%, rgba(15, 30, 68, 0.72) 100%);
  border: 1px solid rgba(103, 232, 249, 0.2);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

body.galaxy.marine .dp-confirm-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

body.galaxy.marine .dp-confirm-section h3 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: #f0f9ff;
}

body.galaxy.marine .dp-confirm-section__edit {
  font-size: 14.3px;
  color: #67e8f9;
  text-decoration: none;
}

body.galaxy.marine .dp-confirm-section__edit:hover {
  text-decoration: underline;
  color: #facc15;
}

body.galaxy.marine .dp-confirm-mini-cart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.galaxy.marine .dp-confirm-mini-cart__row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}

body.galaxy.marine .dp-confirm-mini-cart__row + .dp-confirm-mini-cart__row {
  border-top: 1px dashed rgba(103, 232, 249, 0.14);
}

body.galaxy.marine .dp-confirm-mini-cart__thumb {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8, 20, 48, 0.4);
  border: 1px solid rgba(103, 232, 249, 0.16);
}

body.galaxy.marine .dp-confirm-mini-cart__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.galaxy.marine .dp-confirm-mini-cart__img--placeholder {
  object-fit: contain;
  padding: 14%;
  opacity: 0.7;
}

body.galaxy.marine .dp-confirm-mini-cart__title {
  font-size: 15.4px;
  font-weight: 600;
  color: #f0f9ff;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.galaxy.marine .dp-confirm-mini-cart__meta {
  font-size: 13.2px;
  color: rgba(148, 163, 184, 0.85);
}

body.galaxy.marine .dp-confirm-mini-cart__subtotal {
  font-weight: 700;
  color: #facc15;
  font-feature-settings: "tnum" 1;
}

body.galaxy.marine .dp-confirm-mini-cart__empty {
  margin: 0;
  font-size: 14.3px;
  color: rgba(148, 163, 184, 0.75);
  padding: 12px 0;
}

body.galaxy.marine .dp-confirm-shipping p,
body.galaxy.marine .dp-confirm-payment p {
  margin: 4px 0;
  font-size: 15.4px;
  color: rgba(207, 230, 255, 0.85);
}

body.galaxy.marine .dp-confirm-shipping__method {
  font-size: 14.3px;
  color: rgba(148, 163, 184, 0.85);
}

body.galaxy.marine .dp-confirm-shipping__method strong {
  color: #67e8f9;
}

body.galaxy.marine .dp-confirm-shipping__name {
  font-weight: 600;
  color: #f0f9ff !important;
}

body.galaxy.marine .dp-confirm-shipping__zip {
  display: inline-block;
  margin-right: 6px;
  font-size: 12.1px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(103, 232, 249, 0.12);
  color: #67e8f9;
  letter-spacing: 0.04em;
}

body.galaxy.marine .dp-confirm-payment__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.galaxy.marine .dp-confirm-payment__icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: inline-block;
  background: rgba(103, 232, 249, 0.1);
  border: 1px solid rgba(103, 232, 249, 0.2);
  flex-shrink: 0;
  /* <img> render — object-fit contain, 5px padding */
  object-fit: contain;
  padding: 5px;
  /* fallback 給 emoji 場景 (不應該出現 — payment.html / confirm.js 都已 <img>) */
  font-size: 22px;
  line-height: 30px;
  text-align: center;
}

body.galaxy.marine .dp-confirm-payment__title {
  font-size: 15.4px;
  font-weight: 700;
  color: #f0f9ff;
}

body.galaxy.marine .dp-confirm-payment__desc {
  font-size: 13.2px;
  color: rgba(148, 163, 184, 0.85);
}

body.galaxy.marine .dp-confirm-totals {
  background:
    linear-gradient(180deg, rgba(20, 42, 90, 0.65) 0%, rgba(15, 30, 68, 0.78) 100%);
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.28);
}

body.galaxy.marine .dp-confirm-totals h3 {
  margin: 0 0 8px;
  font-size: 17.6px;
  font-weight: 700;
  color: #f0f9ff;
}

body.galaxy.marine .dp-confirm-totals .kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15.4px;
  color: rgba(207, 230, 255, 0.85);
  padding: 4px 0;
}

body.galaxy.marine .dp-confirm-totals .kv-row strong {
  font-weight: 700;
  color: #f0f9ff;
  font-feature-settings: "tnum" 1;
}

body.galaxy.marine .dp-confirm-totals__divider {
  border: 0;
  border-top: 1px dashed rgba(103, 232, 249, 0.25);
  margin: 6px 0;
}

body.galaxy.marine .dp-confirm-totals__total span {
  font-size: 16.5px;
  font-weight: 600;
}

body.galaxy.marine .dp-confirm-totals__total strong {
  font-size: 24.2px;
  color: #facc15 !important;
}

body.galaxy.marine .dp-confirm-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.3px;
  color: rgba(207, 230, 255, 0.85);
  cursor: pointer;
  margin-top: 12px;
  padding: 10px;
  background: rgba(8, 20, 48, 0.4);
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: 10px;
}

body.galaxy.marine .dp-confirm-terms input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid rgba(103, 232, 249, 0.55);
  background: rgba(8, 20, 48, 0.5);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
}

body.galaxy.marine .dp-confirm-terms input[type="checkbox"]:checked {
  background: #22d3ee;
  border-color: #22d3ee;
}

body.galaxy.marine .dp-confirm-terms input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0a1a3e;
  font-size: 13.2px;
  font-weight: 800;
  line-height: 1;
}

body.galaxy.marine .dp-confirm-terms a {
  color: #67e8f9;
  text-decoration: none;
}

body.galaxy.marine .dp-confirm-terms a:hover {
  text-decoration: underline;
  color: #facc15;
}

/* mobile (≤640px) — checkout / payment / confirm 全部單欄 */
@media (max-width: 640px) {
  body.galaxy.marine .dp-checkout-card {
    padding: 18px 16px;
  }

  body.galaxy.marine .dp-shipping-methods {
    grid-template-columns: 1fr;
  }

  body.galaxy.marine .dp-checkout-footer {
    flex-direction: column-reverse;
    gap: 10px;
    align-items: stretch;
  }

  body.galaxy.marine .dp-checkout-footer .btn {
    width: 100%;
    text-align: center;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   Phase Y1 (2026-05-08): 入站 abandon cart banner
   /store 商城首頁顯示 — 提醒未結帳 cart 商品
   ───────────────────────────────────────────────────────────────────── */

body.galaxy.marine .dp-resume-cart-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  margin: 0 0 20px;
  background:
    linear-gradient(135deg, rgba(250, 204, 21, 0.18) 0%, rgba(34, 211, 238, 0.12) 100%);
  border: 1px solid rgba(250, 204, 21, 0.42);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(250, 204, 21, 0.18);
  /* a11y: hidden 屬性處理可見性, 不要 CSS display:none */
}

body.galaxy.marine .dp-resume-cart-banner[hidden] {
  display: none;
}

body.galaxy.marine .dp-resume-cart-banner__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(250, 204, 21, 0.55))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  flex-shrink: 0;
}

body.galaxy.marine .dp-resume-cart-banner__body {
  flex: 1;
  min-width: 0;
}

body.galaxy.marine .dp-resume-cart-banner__title {
  margin: 0 0 2px;
  font-size: 16.5px;
  font-weight: 800;
  color: #fef3c7;
  letter-spacing: 0.02em;
}

body.galaxy.marine .dp-resume-cart-banner__title #resumeCartCount {
  color: #facc15;
  font-size: 18.7px;
  font-feature-settings: "tnum" 1;
}

body.galaxy.marine .dp-resume-cart-banner__desc {
  margin: 0;
  font-size: 13.2px;
  color: rgba(207, 230, 255, 0.85);
}

body.galaxy.marine .dp-resume-cart-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

body.galaxy.marine .dp-resume-cart-banner__actions .btn.primary {
  padding: 10px 20px;
  font-size: 15.4px;
  font-weight: 700;
}

body.galaxy.marine .dp-resume-cart-banner__actions .btn.ghost {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 19.8px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 640px) {
  body.galaxy.marine .dp-resume-cart-banner {
    flex-wrap: wrap;
    padding: 12px 14px;
    gap: 12px;
  }
  body.galaxy.marine .dp-resume-cart-banner__icon {
    width: 44px;
    height: 44px;
  }
  body.galaxy.marine .dp-resume-cart-banner__body {
    flex: 1 1 calc(100% - 56px);
  }
  body.galaxy.marine .dp-resume-cart-banner__actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ============================================================================
 * R501dv angry-cartwright (2026-05-17): content-visibility for /index.html
 *   below-fold sections. Mirror pattern of R501dq (/item.html).
 *
 * Targets:
 *   .dp-ichi-hero[data-game-hero="ichi"]    — 一番賞 podium (~600px below fold)
 *   .home-marine-ticker                      — 即時中獎 marquee (~400px below)
 *   .footer--demo-shell                      — bottom legal footer (~3000px below)
 *
 * NOT targets:
 *   - dp-ichi-hero[endless/tower/rpg] — already `hidden` attr, browser skip paint
 *   - home-hero-catalog — above fold (LCP candidate)
 *   - home-marine-cats — above fold (orb row visible immediately)
 *
 * 影響: 桌機 /index.html scroll 流暢度 + 初始 layout/paint cycles 省.
 *
 * SENTINEL: r501dv-home-content-visibility
 * ============================================================================ */
/* R501dy: 撤掉 .home-marine-ticker 的 content-visibility — 跟 mobile dp-ticker
   同款 issue, intrinsic-size 跟實際 ticker 高度差太多 → CLS. ticker 通常在
   above-fold, 不需 content-visibility. SENTINEL: r501dy-ticker-content-visibility-revert */
body.galaxy.marine .dp-ichi-hero[data-game-hero="ichi"]:not([hidden]),
body.galaxy.marine .footer--demo-shell {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Component-level layout isolation — homepage orb row + ticker items */
body.galaxy.marine .home-marine-cat,
body.galaxy.marine .home-marine-ticker__pcard,
body.galaxy.marine .dp-ichi-hero__card {
  contain: layout paint style;
}