/* ===================================================================== * marine-theme.css — 海洋尋寶賞 (Marine Treasure Hunt) overlay theme * v33 (2026-05-01) · Visual reference: dreamina-2026-04-29-3306 video * * Applies on top of /m/arcade.css when . * Overrides: * - color palette (purple-pink galaxy → deep blue marine cyan) * - body bg (gradient → marine treasure painting + godrays) * - topbar (slim → ornate w/ 3 right-side icons) * - hero (text-only → 4-character poster + overlay CTA) * - sparkle layer (white stars → cyan dust + plankton particles) * - 6-icon nav (purple bubbles → cyan halo + breathing glow) * - tabbar (5-tab w/ breathing cyan glow on active) * Adds new sections: * - .dp-marine-bg → full-page fixed bg layer * - .dp-ticker → horizontal scrolling winner marquee * - .dp-superprize → 3-card row (center gold-bordered, side w/ HOT) * - .dp-top-icon → topbar action icon button * ===================================================================== */ /* ---- Palette overrides ---- */ .dp-body--marine { --dp-bg-abyss: #050a1c; --dp-bg-deep: #0a1633; --dp-bg-mid: #0f1e44; --dp-bg-teal: #1a2966; --dp-teal: #67e8f9; --dp-teal-bright: #22d3ee; --dp-teal-dark: #0891b2; --dp-teal-deep: #155e75; --dp-navy: #0a1a3e; --dp-navy-dark: #050a1c; --dp-gold: #fbbf24; --dp-gold-deep: #b8860b; --dp-gold-glow: #fde047; --dp-coral: #67e8f9; --dp-pink-new: #ff4757; /* RED HOT badge accent */ --dp-hot: #ff4757; --dp-bg: #050a1c; --dp-bg-card: rgba(15, 30, 68, 0.72); --dp-bg-soft: rgba(15, 30, 68, 0.55); --dp-line: rgba(103, 232, 249, 0.32); --dp-line-soft: rgba(103, 232, 249, 0.18); --dp-ink: #f0fdff; --dp-ink-dim: rgba(240, 253, 255, 0.78); --dp-ink-faint: rgba(240, 253, 255, 0.52); --dp-cyan-line: linear-gradient(135deg, #22d3ee 0%, #67e8f9 50%, #a5f3fc 100%); --dp-nebula: linear-gradient(135deg, #22d3ee 0%, #67e8f9 50%, #a5f3fc 100%); --dp-gold-line: linear-gradient(135deg, #b8860b 0%, #fbbf24 50%, #fde047 100%); } /* ---- Body bg: clear out the old purple gradient, marine BG layer takes over ---- */ .dp-body--marine { background: #050a1c; background-color: #050a1c; position: relative; z-index: 0; } /* hide the old sparkle white-star layer; we use .dp-marine-bg__plankton instead */ .dp-body--marine .dp-sparkles { display: none; } /* ============================================================ * BACKGROUND LAYER — fixed full-page marine treasure painting * + cyan godrays + drifting plankton particles * ============================================================ */ .dp-marine-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .dp-marine-bg__image { position: absolute; inset: 0; /* 🚨 2026-05-02 v33d: 不再 hardcode 路徑 + !important override！之前 catalog 只有 1 個 slot (homepage.background.v1 點 desktop-2x)，手機 CSS !important 寫死 mobile-2x 路徑來蓋過 image-assets-loader 注入的 desktop-2x → admin 換不到手機那張。現在 catalog 拆成 homepage.background.v1 (桌機) + .mobile (手機) 兩個 slot；HTML 改用 data-image-slot-bg="homepage.background.mobile"， image-assets-loader 自己注入 mobile defaultPath 或 admin override → admin 可換。 fallback 路徑（loader 還沒跑時）走預設 image-assets-loader 注入流程。 */ background-size: cover; background-position: center top; background-repeat: no-repeat; /* Slight zoom + drift to feel alive */ animation: dp-marine-drift 24s ease-in-out infinite alternate; will-change: transform; } @keyframes dp-marine-drift { /* User reported BG looks soft — was always upscaling 1.08–1.12×. Now starts at 1:1 for max sharpness, gentle 3% peak for "alive" feel. */ 0% { transform: scale(1.0) translateY(0); } 100% { transform: scale(1.03) translateY(-8px); } } /* Cyan god-ray streaks descending from top — pure CSS, additive */ .dp-marine-bg__godrays { position: absolute; inset: 0; background: /* primary central beam */ radial-gradient(ellipse 30% 60% at 50% 0%, rgba(103, 232, 249, 0.28), transparent 70%), /* off-center beams */ radial-gradient(ellipse 14% 50% at 28% 0%, rgba(34, 211, 238, 0.18), transparent 70%), radial-gradient(ellipse 14% 50% at 72% 0%, rgba(34, 211, 238, 0.18), transparent 70%), /* deep darken bottom for tabbar contrast */ linear-gradient(180deg, transparent 55%, rgba(5, 10, 28, 0.72) 100%); mix-blend-mode: screen; animation: dp-godray-pulse 6s ease-in-out infinite; } @keyframes dp-godray-pulse { 0%, 100% { opacity: 0.85; } 50% { opacity: 1.0; } } /* Plankton particle layer — 15 floating dots */ .dp-marine-bg__plankton { position: absolute; inset: 0; pointer-events: none; } .dp-marine-bg__plankton span { position: absolute; width: 4px; height: 4px; 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 8px rgba(103, 232, 249, 0.85), 0 0 16px rgba(34, 211, 238, 0.55); opacity: 0; animation: dp-plankton-drift 14s linear infinite; } .dp-marine-bg__plankton span:nth-child(1) { left: 8%; top: 100%; animation-delay: 0s; width: 3px; height: 3px; } .dp-marine-bg__plankton span:nth-child(2) { left: 22%; top: 100%; animation-delay: 1.4s; } .dp-marine-bg__plankton span:nth-child(3) { left: 36%; top: 100%; animation-delay: 2.8s; width: 5px; height: 5px; } .dp-marine-bg__plankton span:nth-child(4) { left: 50%; top: 100%; animation-delay: 4.2s; } .dp-marine-bg__plankton span:nth-child(5) { left: 64%; top: 100%; animation-delay: 5.6s; width: 3px; height: 3px; } .dp-marine-bg__plankton span:nth-child(6) { left: 78%; top: 100%; animation-delay: 7.0s; } .dp-marine-bg__plankton span:nth-child(7) { left: 92%; top: 100%; animation-delay: 8.4s; width: 5px; height: 5px; } .dp-marine-bg__plankton span:nth-child(8) { left: 14%; top: 100%; animation-delay: 9.8s; } .dp-marine-bg__plankton span:nth-child(9) { left: 28%; top: 100%; animation-delay: 11.2s; } .dp-marine-bg__plankton span:nth-child(10) { left: 42%; top: 100%; animation-delay: 12.6s; width: 4px; height: 4px; } .dp-marine-bg__plankton span:nth-child(11) { left: 56%; top: 100%; animation-delay: 0.7s; } .dp-marine-bg__plankton span:nth-child(12) { left: 70%; top: 100%; animation-delay: 2.1s; } .dp-marine-bg__plankton span:nth-child(13) { left: 84%; top: 100%; animation-delay: 3.5s; width: 3px; height: 3px; } .dp-marine-bg__plankton span:nth-child(14) { left: 6%; top: 100%; animation-delay: 4.9s; } .dp-marine-bg__plankton span:nth-child(15) { left: 96%; top: 100%; animation-delay: 6.3s; } @keyframes dp-plankton-drift { 0% { transform: translateY(0) scale(0.3); opacity: 0; } 10% { opacity: 0.85; transform: translateY(-50px) scale(0.85); } 90% { opacity: 0.75; } 100% { transform: translateY(-110vh) scale(1.1); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .dp-marine-bg__image, .dp-marine-bg__godrays, .dp-marine-bg__plankton span { animation: none; } } /* ============================================================ * R501bg angry-cartwright (2026-05-16): iOS Safari scroll-lock perf fix * * User report: 「手機完整載入頁面後就無法上下滑動」 * * 根因: /m/index.html 全螢幕 fixed bg 層 (z-index: -1) 堆了 3 個 GPU 重災區: * 1. .dp-marine-bg__image — 24s drift transform animation * 2. .dp-marine-bg__godrays — mix-blend-mode: screen + 6s pulse animation * ↑ mix-blend-mode 是 iOS Safari 文件記錄的 perf killer * 3. .dp-marine-bg__plankton × 15 spans — 14s linear infinite × 15 animations * * 加上 15 處 backdrop-filter blur 在 UI 卡, iOS Safari GPU compositor * 直接被 17+ 個 fixed 層 + 17 個動畫淹沒 → scroll repaint 排隊不及 → 卡死. * * Fix: 砍掉最耗 GPU 的 2 個 (godrays mix-blend + plankton 15→3): * - .dp-marine-bg__godrays: 拿掉 mix-blend-mode (改 normal composite) + * 拿掉 animation (改靜態 opacity) * - .dp-marine-bg__plankton: nth-child(n+4) hide (15 → 3 particles) * - .dp-marine-bg__image: 保留 24s drift (單一 transform, 影響小) * * 視覺差: godrays 還在但不發光融, plankton 從 15 顆減 3 顆. * 性能差: GPU layer 從 17+ 降到 3-5, scroll 應該流暢. * * SENTINEL: marine-bg-ios-scroll-perf-fix-r501bg * ============================================================ */ .dp-marine-bg__godrays { /* 拿掉 mix-blend-mode: screen — iOS Safari 主要 perf killer * normal composite (default) GPU 不需做 blend channel math */ mix-blend-mode: normal; /* 拿掉 6s pulse animation — 靜態仍有 godrays 視覺 * 16k iOS users 不會錯過這 ±15% opacity 變化 */ animation: none; opacity: 0.88; } /* 從 15 顆 plankton 減到 3 顆 — 4-15 隱藏 * GPU layer count 直接砍 80% (12 個 animation 不跑) */ .dp-marine-bg__plankton span:nth-child(n+4) { display: none; } /* ============================================================ * TOPBAR — slim glass + 3 right-side icons * ============================================================ */ .dp-body--marine .dp-top { background: linear-gradient(180deg, rgba(10, 26, 62, 0.78) 0%, rgba(10, 26, 62, 0.55) 70%, transparent 100%); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid rgba(103, 232, 249, 0.28); box-shadow: 0 8px 24px rgba(5, 10, 28, 0.55); } .dp-body--marine .dp-brand__wordmark { /* New 海洋尋寶賞 logo (寶箱+浪花+金字, 1536×1024 = 3:2). 老 height 38px 太小，新 logo composition 緊密看不清。Bump to 56px 顯示 84px 寬度，跟右側 topbar 元素視覺重量平衡。 */ height: 56px !important; max-height: 56px; max-width: 200px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(103, 232, 249, 0.55)); } .dp-body--marine .dp-top { /* Topbar 增高塞下 56px logo + 一些 padding */ min-height: 72px; padding: 8px 16px; } .dp-top__actions { display: flex; gap: 6px; align-items: center; } .dp-top-icon { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid rgba(103, 232, 249, 0.32); border-radius: 50%; background: linear-gradient(180deg, rgba(34, 211, 238, 0.14), rgba(15, 30, 68, 0.55)); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; padding: 5px; cursor: pointer; transition: transform 160ms ease, box-shadow 200ms ease; text-decoration: none; } .dp-top-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } .dp-top-icon:hover, .dp-top-icon:active { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34, 211, 238, 0.48), inset 0 1px 0 rgba(165, 243, 252, 0.45); } .dp-top-icon__dot { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: #ff4757; border-radius: 50%; border: 1.5px solid #050a1c; animation: dp-dot-pulse 1.6s ease-in-out infinite; } @keyframes dp-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 8px rgba(255, 71, 87, 0.85); } } .dp-top-icon--gem { /* Gem icon gets a slight gold-tinted hover */ border-color: rgba(251, 191, 36, 0.42); background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(15, 30, 68, 0.55)); } .dp-top-icon--gem img { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 4px rgba(103, 232, 249, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } /* Hide the legacy .dp-bell button when marine theme is active (replaced by .dp-top-icon) */ .dp-body--marine .dp-bell { display: none !important; } /* ============================================================ * HERO — 4-character poster with overlay text + CTA * ============================================================ */ .dp-hero--marine { position: relative; margin: 8px 12px 14px; border-radius: 22px; overflow: hidden; background: transparent; border: 1px solid rgba(103, 232, 249, 0.32); box-shadow: 0 12px 30px rgba(5, 10, 28, 0.65), inset 0 0 0 1px rgba(165, 243, 252, 0.18); min-height: 0; padding: 0; display: block; /* User reported「不小心弄成直的」— Figma reference + first-fold fit needs a wide banner (351×144 ratio in Figma). 2:3 portrait was eating 540px of mobile screen height and pushing everything below the fold. Switch to 3:2 wide; img srcset 也指向 desktop wide poster (1536×1024 / 2x = 2560×1707) 4 角色橫向排列剛好放在 banner 裡。 */ aspect-ratio: 3 / 2; max-height: 320px; } .dp-hero--marine .dp-hero__poster { width: 100%; height: 100%; object-fit: cover; display: block; } .dp-hero--marine .dp-hero__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 18px; background: linear-gradient(180deg, transparent 0%, rgba(5, 10, 28, 0.82) 70%, rgba(5, 10, 28, 0.96) 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; } .dp-hero__wordmark { display: flex; flex-direction: column; align-items: center; gap: 2px; } .dp-hero__wordmark-zh { font-size: 30.8px; font-weight: 900; color: #f0fdff; letter-spacing: 0.18em; text-shadow: 0 0 12px rgba(103, 232, 249, 0.85), 0 2px 0 #0a1a3e, 0 0 20px rgba(34, 211, 238, 0.7); } .dp-hero__wordmark-en { font-size: 11px; font-weight: 700; letter-spacing: 0.32em; color: rgba(165, 243, 252, 0.92); text-shadow: 0 0 6px rgba(34, 211, 238, 0.6); } .dp-hero__tagline { margin: 0; font-size: 13.2px; font-weight: 600; color: rgba(240, 253, 255, 0.92); letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } .dp-hero__cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px 10px 18px; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); border: 1px solid rgba(165, 243, 252, 0.62); border-radius: 999px; color: #050a1c; font-size: 15.4px; font-weight: 900; letter-spacing: 0.06em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); box-shadow: 0 8px 22px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(34, 211, 238, 0.16); animation: dp-cta-breathe 2.4s ease-in-out infinite; text-decoration: none; } .dp-hero__cta-glyph { font-size: 17.6px; color: #050a1c; text-shadow: 0 0 4px rgba(255, 255, 255, 0.6); } @keyframes dp-cta-breathe { 0%, 100% { box-shadow: 0 8px 22px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(34, 211, 238, 0.16); } 50% { box-shadow: 0 12px 30px rgba(34, 211, 238, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 0 0 8px rgba(34, 211, 238, 0.22); } } /* ============================================================ * LIVE WINNER TICKER — horizontal marquee * ============================================================ */ .dp-ticker { position: relative; /* v60-dirac: margin-top 0 → 18px 拉開 hero 外框 halo 重疊 */ margin: 18px 12px 14px; padding: 8px 12px; background: linear-gradient(90deg, rgba(15, 30, 68, 0.78), rgba(10, 26, 62, 0.85)); backdrop-filter: blur(10px); border: 1px solid rgba(103, 232, 249, 0.24); border-radius: 999px; display: flex; align-items: center; gap: 10px; overflow: hidden; font-size: 13.2px; color: rgba(240, 253, 255, 0.92); white-space: nowrap; box-shadow: 0 4px 14px rgba(5, 10, 28, 0.45); } /* v20-cleanup (2026-05-05): 消化 6 輪 ticker 改版累積的 dead CSS： - 移除 .dp-ticker__avatar (renderWinners 已不再渲染 avatar) - 移除 .dp-ticker__pulse / .dp-ticker__label (HTML scaffold 已移除) - 移除舊 inline-flex/gap:5px 的 base .dp-ticker__item (被 line 2557 v20x card-pill 蓋掉) - 移除舊 font-weight:600 / em 高亮 .dp-ticker__item (被 v20x v20z2 蓋掉) - 移除 .dp-ticker__sep (renderWinners 已不再 render 分隔點) - 合併 .dp-ticker__track-inner 3 段 cascade (28s base + 22s !important + 3s !important) 成單一 3s 規則，cleaner cascade */ .dp-ticker__track { flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative; } .dp-ticker__track-inner { display: inline-flex; gap: 10px; /* v60-condescending-goldberg (2026-05-07): 3s → 6s → 9s. R336 flamboyant-bell (2026-05-12): 9s → 16s. R501c angry-cartwright (2026-05-15): user「簡慢首頁的即時中獎速度」(桌機 + 手機都要慢). 桌機 32s → 48s, 手機 16s → 24s (同比例 +50%). SENTINEL: marine-mobile-ticker-speed-r501c-angry-cartwright */ animation: dp-ticker-scroll 24s linear infinite; will-change: transform; } @keyframes dp-ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .dp-ticker__track-inner { animation: none; } } /* ============================================================ * 6-ICON CATEGORY NAV — cyan halo + breathing glow * ============================================================ */ .dp-cats--marine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 4px 14px 16px; } .dp-body--marine .dp-cat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px 10px; background: linear-gradient(180deg, rgba(15, 30, 68, 0.52), rgba(10, 26, 62, 0.68)); border: 1px solid rgba(103, 232, 249, 0.22); border-radius: 18px; text-decoration: none; overflow: hidden; isolation: isolate; box-shadow: 0 4px 14px rgba(5, 10, 28, 0.45), inset 0 1px 0 rgba(165, 243, 252, 0.12); transition: transform 200ms ease, box-shadow 240ms ease; } .dp-body--marine .dp-cat:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(5, 10, 28, 0.55), inset 0 0 0 2px rgba(34, 211, 238, 0.55); } .dp-body--marine .dp-cat:hover { border-color: rgba(103, 232, 249, 0.55); box-shadow: 0 8px 22px rgba(34, 211, 238, 0.32), inset 0 1px 0 rgba(165, 243, 252, 0.28); } .dp-cat__halo { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.42) 0%, rgba(34, 211, 238, 0.12) 35%, transparent 65%); filter: blur(12px); z-index: -1; opacity: 0.7; animation: dp-halo-breathe 3.2s ease-in-out infinite; } @keyframes dp-halo-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 0.95; transform: scale(1.08); } } .dp-body--marine .dp-cat__iconwrap { position: relative; width: 56px; height: 56px; display: block; margin-bottom: 2px; } .dp-body--marine .dp-cat__iconwrap::before { display: none; } .dp-body--marine .dp-cat__icon { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.65)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45)); animation: dp-cat-float 3.6s ease-in-out infinite; will-change: transform; } .dp-body--marine .dp-cat__label { font-size: 14.3px; font-weight: 700; color: #f0fdff; letter-spacing: 0.04em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* Stagger float per card (1-6) */ .dp-cats--marine .dp-cat:nth-child(1) .dp-cat__icon { animation-delay: 0s; } .dp-cats--marine .dp-cat:nth-child(2) .dp-cat__icon { animation-delay: 0.4s; } .dp-cats--marine .dp-cat:nth-child(3) .dp-cat__icon { animation-delay: 0.8s; } .dp-cats--marine .dp-cat:nth-child(4) .dp-cat__icon { animation-delay: 1.2s; } .dp-cats--marine .dp-cat:nth-child(5) .dp-cat__icon { animation-delay: 1.6s; } .dp-cats--marine .dp-cat:nth-child(6) .dp-cat__icon { animation-delay: 2.0s; } .dp-cats--marine .dp-cat:nth-child(1) .dp-cat__halo { animation-delay: 0s; } .dp-cats--marine .dp-cat:nth-child(2) .dp-cat__halo { animation-delay: 0.4s; } .dp-cats--marine .dp-cat:nth-child(3) .dp-cat__halo { animation-delay: 0.8s; } .dp-cats--marine .dp-cat:nth-child(4) .dp-cat__halo { animation-delay: 1.2s; } .dp-cats--marine .dp-cat:nth-child(5) .dp-cat__halo { animation-delay: 1.6s; } .dp-cats--marine .dp-cat:nth-child(6) .dp-cat__halo { animation-delay: 2.0s; } /* Hide bubble decorations from old galaxy theme */ .dp-body--marine .dp-bubbles { display: none; } /* ============================================================ * SUPER PRIZE 3-CARD ROW * ============================================================ */ .dp-superprize { margin: 4px 12px 18px; } .dp-superprize__head { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px; margin-bottom: 12px; } .dp-superprize__head-glyph { font-size: 17.6px; color: #fbbf24; text-shadow: 0 0 10px rgba(251, 191, 36, 0.85), 0 0 18px rgba(251, 191, 36, 0.55); animation: dp-star-rotate 6s linear infinite; } .dp-superprize__head-title { margin: 0; font-size: 19.8px; font-weight: 900; color: #fbbf24; letter-spacing: 0.18em; text-shadow: 0 0 10px rgba(251, 191, 36, 0.65), 0 2px 0 #0a1a3e; } @keyframes dp-star-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .dp-superprize__row { display: grid; grid-template-columns: 1fr 1.35fr 1fr; gap: 8px; align-items: end; } .dp-superprize__card { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 6px 12px; 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: 14px; overflow: hidden; text-decoration: none; transition: transform 200ms ease; } .dp-superprize__card:active { transform: scale(0.97); } .dp-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 8px 24px rgba(251, 191, 36, 0.32), inset 0 1px 0 rgba(254, 240, 138, 0.45), 0 0 0 3px rgba(251, 191, 36, 0.18); transform: translateY(-6px); padding-top: 8px; padding-bottom: 14px; } .dp-superprize__hot { position: absolute; top: 6px; left: 6px; padding: 2px 8px 1px; background: linear-gradient(135deg, #ff4757 0%, #c30b25 100%); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.08em; border-radius: 4px 4px 4px 0; box-shadow: 0 2px 6px rgba(255, 71, 87, 0.55); z-index: 2; } .dp-superprize__card--center .dp-superprize__hot { background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%); color: #1a0e00; border-radius: 4px 4px 4px 0; } .dp-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: 10px; margin-bottom: 8px; position: relative; overflow: hidden; } .dp-superprize__card--center .dp-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%); } .dp-superprize__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18) 0%, transparent 40%); } .dp-superprize__name { font-size: 14.3px; 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: 4px; } .dp-superprize__card--center .dp-superprize__name { font-size: 16.5px; color: #fde047; text-shadow: 0 0 8px rgba(251, 191, 36, 0.65), 0 1px 2px rgba(0, 0, 0, 0.85); } .dp-superprize__price { display: inline-block; padding: 3px 10px; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); color: #050a1c; font-size: 14.3px; font-weight: 900; border-radius: 999px; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .dp-superprize__card--center .dp-superprize__price { background: linear-gradient(135deg, #fde047 0%, #fbbf24 100%); color: #1a0e00; box-shadow: 0 2px 8px rgba(251, 191, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.55); } /* ============================================================ * Section heads + grid (override) * ============================================================ */ .dp-body--marine .dp-section__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: 14px; padding: 10px 14px; box-shadow: inset 0 1px 0 rgba(165, 243, 252, 0.18); } .dp-body--marine .dp-section__head-icon { width: 24px; height: 24px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.65)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } .dp-body--marine .dp-section__head-title { color: #f0fdff; font-size: 16.5px; letter-spacing: 0.06em; text-shadow: 0 0 8px rgba(34, 211, 238, 0.42); } .dp-body--marine .dp-section__more { background: rgba(34, 211, 238, 0.18); border: 1px solid rgba(103, 232, 249, 0.42); color: #67e8f9; font-weight: 800; letter-spacing: 0.04em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } .dp-body--marine .dp-card { background: linear-gradient(180deg, rgba(15, 30, 68, 0.85), rgba(5, 10, 28, 0.92)); border: 1px solid rgba(103, 232, 249, 0.24); box-shadow: 0 4px 14px rgba(5, 10, 28, 0.55), inset 0 1px 0 rgba(165, 243, 252, 0.1); } .dp-body--marine .dp-card__tag { background: linear-gradient(135deg, #22d3ee 0%, #67e8f9 100%); color: #050a1c; text-shadow: none; } .dp-body--marine .dp-card__price { color: #67e8f9; } /* ============================================================ * BOTTOM TABBAR — 5 tabs with breathing cyan glow on active * ============================================================ */ .dp-body--marine .dp-tabbar, .dp-tabbar--marine { 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); } .dp-body--marine .dp-tabbar::before, .dp-tabbar--marine::before { background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.78), rgba(165, 243, 252, 0.85), rgba(34, 211, 238, 0.78), transparent); height: 1.5px; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.65)); } .dp-body--marine .dp-tab, .dp-tabbar--marine .dp-tab { color: rgba(240, 253, 255, 0.65); } .dp-body--marine .dp-tab__ico img, .dp-tabbar--marine .dp-tab__ico img { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.18)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55)); } .dp-body--marine .dp-tab--active, .dp-tabbar--marine .dp-tab--active { color: #67e8f9; text-shadow: 0 0 10px rgba(34, 211, 238, 0.85), 0 1px 2px rgba(0, 0, 0, 0.55); } .dp-body--marine .dp-tab--active .dp-tab__ico img, .dp-tabbar--marine .dp-tab--active .dp-tab__ico img { filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.85)) drop-shadow(0 0 8px rgba(165, 243, 252, 0.55)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5)); animation: dp-tab-breathe 2.4s ease-in-out infinite; } @keyframes dp-tab-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ============================================================ * Desktop breakpoint: constrain width * ============================================================ */ @media (min-width: 720px) { .dp-marine-bg__image { /* R501ec angry-cartwright (2026-05-17): CF Image Transformations for tablet/desktop viewing /m/index.html. Mobile viewport (≤720px) bg still injected by image-assets-loader.js with catalog defaultPath (loader-side CF wrapping requires cross-cutting refactor — Phase 2). SENTINEL: r501ec-m-marine-bg-cf-images */ background-image: url("/cdn-cgi/image/width=2560,format=auto,quality=80/assets/home/marine-treasure-bg-desktop-2x.webp"); } } /* ===================================================================== * v35 dreamina-aligned redesign — new sections * - .dp-top-mini / .dp-top-search (topbar 2 mini icons + search pill) * - .dp-characters / .dp-character (4-character portrait row) * - .dp-cta-banner / .dp-cta-chip (一抽即賞 / 五大玩法 banner + chips) * ===================================================================== */ /* ---- Topbar mini icons + search pill ---- */ .dp-top__actions--minimal { display: flex; gap: 6px; align-items: center; } .dp-top-mini { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid rgba(103, 232, 249, 0.32); border-radius: 50%; background: linear-gradient(180deg, rgba(34, 211, 238, 0.12), rgba(15, 30, 68, 0.55)); display: inline-flex; align-items: center; justify-content: center; padding: 5px; cursor: pointer; transition: transform 160ms ease, box-shadow 200ms ease; text-decoration: none; } .dp-top-mini img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } .dp-top-mini__dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; background: #ff4757; border-radius: 50%; border: 1.5px solid #050a1c; animation: dp-dot-pulse 1.6s ease-in-out infinite; } .dp-top-mini--gem { border-color: rgba(251, 191, 36, 0.42); background: linear-gradient(180deg, rgba(251, 191, 36, 0.18), rgba(15, 30, 68, 0.55)); } .dp-top-mini--gem img { filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) drop-shadow(0 0 4px rgba(103, 232, 249, 0.4)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } .dp-top-search { flex: 0 1 auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: #0049bc; font-size: 13.2px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; box-shadow: 0 0 6px rgba(165, 204, 255, 0.65), inset 0 0 2px #0049bc, 0 2px 6px rgba(5, 10, 28, 0.45); white-space: nowrap; } .dp-top-search svg { flex: 0 0 auto; color: #0049bc; } .dp-top-search:active { transform: scale(0.96); } /* ---- 4-character portrait row ---- */ .dp-characters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 12px 10px; } .dp-character { position: relative; display: flex; flex-direction: column; align-items: center; text-decoration: none; isolation: isolate; transition: transform 200ms ease; } .dp-character:active { transform: scale(0.95); } .dp-character__media { position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, rgba(28, 74, 226, 0.42) 21%, rgba(23, 185, 255, 0.78) 143%); border: 1px solid rgba(165, 243, 252, 0.62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 2px 2px 2px rgba(66, 224, 255, 0.62), inset -2px -3px 2px rgba(131, 162, 255, 0.42), 0 4px 14px rgba(5, 10, 28, 0.55); display: flex; align-items: center; justify-content: center; } .dp-character__media img { width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.65)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)); } .dp-character__name { margin-top: 6px; font-size: 13.2px; font-weight: 700; color: #f0fdff; letter-spacing: 0.06em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* ---- Hero carousel (admin-managed, 3 slides swipeable) ---- */ .dp-hero-carousel { position: relative; margin: 4px 12px 14px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(103, 232, 249, 0.42); box-shadow: 0 8px 24px rgba(5, 10, 28, 0.65), inset 0 0 0 1px rgba(165, 243, 252, 0.18); aspect-ratio: 16 / 9; max-height: 220px; } .dp-hero-carousel__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .dp-hero-carousel__track::-webkit-scrollbar { display: none; } .dp-hero-carousel__slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: block; text-decoration: none; position: relative; } .dp-hero-carousel__slide img { width: 100%; height: 100%; /* 🚨 2026-05-01 v33: 改回 cover — hero 預設 = wide marine artwork（4 角色海報）， * cover 才會撐滿 banner；之前 v32 用 contain 配 seakuji-logo（3:2）有 * 上下留白，現在 wide artwork 不需要那層 padding。 */ object-fit: cover; display: block; } .dp-hero-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: rgba(5, 10, 28, 0.55); border: 1px solid rgba(103, 232, 249, 0.42); border-radius: 50%; color: #67e8f9; font-size: 24.2px; font-weight: 700; line-height: 1; cursor: pointer; text-shadow: 0 0 6px rgba(34, 211, 238, 0.85); z-index: 2; padding: 0; transition: background 200ms ease; } .dp-hero-carousel__nav:active { background: rgba(34, 211, 238, 0.32); } .dp-hero-carousel__nav--prev { left: 6px; } .dp-hero-carousel__nav--next { right: 6px; } .dp-hero-carousel__dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 6px; z-index: 2; } .dp-hero-carousel__dot { width: 6px; height: 6px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0; transition: width 200ms ease, background 200ms ease; } .dp-hero-carousel__dot.is-active { width: 18px; background: #67e8f9; box-shadow: 0 0 6px rgba(34, 211, 238, 0.85); } /* ---- Hero CTA banner (一抽即賞 / 五大玩法全面解鎖) — DEPRECATED v36, replaced by carousel ---- */ .dp-cta-banner { position: relative; margin: 4px 12px 14px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(103, 232, 249, 0.42); box-shadow: 0 8px 24px rgba(5, 10, 28, 0.65), inset 0 0 0 1px rgba(165, 243, 252, 0.18); aspect-ratio: 16 / 9; max-height: 200px; } .dp-cta-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; /* dim BG so foreground text dominates */ filter: saturate(120%); } .dp-cta-banner__overlay { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 14px; gap: 12px; } .dp-cta-chip { display: flex; flex-direction: column; align-items: center; padding: 7px 10px; background: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%); border: 1px solid rgba(165, 243, 252, 0.62); border-radius: 14px; color: #050a1c; text-decoration: none; box-shadow: 0 4px 14px rgba(34, 211, 238, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55); animation: dp-cta-breathe 2.4s ease-in-out infinite; } .dp-cta-chip:active { transform: scale(0.96); } .dp-cta-chip__heading { font-size: 15.4px; font-weight: 900; letter-spacing: 0.04em; line-height: 1.2; } .dp-cta-chip__sub { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; opacity: 0.8; } .dp-cta-banner__center { display: flex; flex-direction: column; align-items: center; text-align: center; font-family: "PingFang TC", "Noto Sans TC", system-ui, sans-serif; text-shadow: 0 0 14px rgba(255, 215, 0, 0.85), 0 2px 0 #5d3a00, 0 0 6px rgba(255, 175, 0, 0.6); } .dp-cta-banner__title-zh { font-size: 19.8px; font-weight: 900; background: linear-gradient(180deg, #fff5b3 0%, #ffd76b 50%, #ffaa00 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.06em; line-height: 1; } .dp-cta-banner__chevrons { font-size: 11px; color: #67e8f9; letter-spacing: -0.05em; text-shadow: 0 0 4px rgba(34, 211, 238, 0.85); margin: 1px 0; -webkit-text-fill-color: #67e8f9; } .dp-cta-banner__title-sub { font-size: 12.1px; font-weight: 700; color: #ffaa00; letter-spacing: 0.08em; -webkit-text-fill-color: #ffaa00; } /* ===================================================================== * 🎨 v34 (2026-05-02) Figma redesign — /m/ 重排版 * 1. Topbar: logo + search-pill + bell（去掉 topup-gem） * 2. Hero carousel 移到 topbar 正下方 * 3. Winner pill 取代 multi-chip ticker * 4. 5 mode icons (取代 4 character row) + HOT badges 前 3 顆 * 5. Bottom tabbar 中央加凸起 mega CTA「開箱」(circular elevated) * ===================================================================== */ /* ─── 1. Topbar v34 (logo + search-pill + bell) ─── DEPRECATED, kept for fallback */ .dp-top--v34 { display: grid !important; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; padding: 8px 14px !important; } .dp-top--v34 .dp-brand { flex: 0 0 auto; } .dp-top--v34 .dp-brand__wordmark { height: 38px !important; width: auto; } .dp-top-search--v34 { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(15, 30, 68, 0.55); border: 1px solid rgba(103, 232, 249, 0.32); color: rgba(207, 250, 254, 0.85); text-decoration: none; -webkit-tap-highlight-color: transparent; } .dp-top-search--v34:active { background: rgba(15, 30, 68, 0.78); transform: scale(0.96); } /* ─── 1b. Topbar v35 (logo + 真實搜尋 + 音樂 + 鈴鐺 + 客服 v20w) ─── */ /* v20w: user 反映「客服按鈕進來上方 BAR 變成多一排」, grid 從 4 col 擴 5 col (logo / search / music / bell / support) + 縮小 padding / gap 防 overflow */ .dp-top--v35 { display: grid !important; grid-template-columns: auto 1fr auto auto auto; gap: 6px; align-items: center; padding: 6px 10px !important; } /* v20w: 窄手機 search 變窄(min-width:0) + icons shrink 一階, 5 個 icon 仍同行 */ .dp-top--v35 .dp-search--v35 { min-width: 0; } .dp-top--v35 .dp-top-icon { width: 36px !important; height: 36px !important; flex: 0 0 auto; } .dp-top--v35 .dp-brand { flex: 0 0 auto; } .dp-top--v35 .dp-brand__wordmark { height: 38px !important; width: auto; } .dp-search--v35 { position: relative; display: flex; align-items: center; height: 40px; padding: 0 8px 0 14px; border-radius: 999px; background: rgba(15, 30, 68, 0.55); border: 1px solid rgba(103, 232, 249, 0.32); gap: 10px; min-width: 0; } .dp-search--v35:focus-within { border-color: rgba(103, 232, 249, 0.7); background: rgba(15, 30, 68, 0.8); box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.18); } /* v35c: 14px icon 太小 + 太淡 → 看起來像污點。放大成 18px 加亮 cyan */ .dp-search__icon { flex: 0 0 auto; width: 18px !important; height: 18px !important; color: #67e8f9; stroke: #67e8f9; filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.45)); } .dp-search__input { flex: 1 1 0; min-width: 0; background: transparent; border: none; outline: none; color: #f0fdff; font-size: 15.4px; font-family: inherit; height: 100%; padding: 0; } .dp-search__input::placeholder { color: rgba(165, 243, 252, 0.5); } .dp-search__input::-webkit-search-cancel-button { -webkit-appearance: none; } .dp-search__dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; background: rgba(8, 18, 42, 0.96); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(103, 232, 249, 0.3); border-radius: 14px; padding: 6px; max-height: 320px; overflow-y: auto; box-shadow: 0 18px 38px rgba(2, 8, 18, 0.7); } .dp-search__dropdown[hidden] { display: none; } .dp-search__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: #e0f7fa; font-size: 14.3px; } .dp-search__row:hover, .dp-search__row:focus-visible { background: rgba(103, 232, 249, 0.12); outline: none; } .dp-search__row img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; background: rgba(2, 6, 23, 0.6); border: 1px solid rgba(103, 232, 249, 0.18); } .dp-search__row-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dp-search__row-meta { flex: 0 0 auto; font-size: 12.1px; color: rgba(165, 243, 252, 0.65); } .dp-search__empty, .dp-search__error { padding: 14px 12px; text-align: center; color: rgba(165, 243, 252, 0.7); font-size: 14.3px; } .dp-search__error { color: #fda4af; } /* shared icon button (music / bell) */ .dp-top-icon { position: relative; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(15, 30, 68, 0.55); border: 1px solid rgba(103, 232, 249, 0.32); color: rgba(207, 250, 254, 0.85); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 120ms ease, background 120ms ease; padding: 0; } .dp-top-icon:active { transform: scale(0.93); } .dp-top-icon:hover { background: rgba(15, 30, 68, 0.78); } .dp-top-icon__svg { display: inline-flex; align-items: center; justify-content: center; } .dp-top-icon__svg svg { display: block; filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.5)); /* R501bm: 傳統 SVG icon currentColor (替代 orb PNG) */ color: rgba(165, 243, 252, 0.92); fill: currentColor; } /* music ON state (playing) */ .dp-top-icon--music[data-music-state="on"] { background: linear-gradient(180deg, rgba(34, 211, 238, 0.32), rgba(15, 30, 68, 0.6)); border-color: rgba(103, 232, 249, 0.65); color: #67e8f9; } .dp-top-icon--music[data-music-state="on"] .dp-top-icon__svg svg { filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.85)); } .dp-top-icon__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ef4444; border: 1.5px solid #0a1a3e; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.5); } .dp-top-icon__badge[hidden] { display: none; } /* ─── 2. Hero carousel v34 — 圓角 + 16:9 比例優先 ─── */ .dp-hero-carousel--v34 { margin: 8px 12px 14px; border-radius: 18px; aspect-ratio: 16 / 9; height: auto; border: 1px solid rgba(103, 232, 249, 0.32); box-shadow: 0 18px 38px rgba(2, 8, 18, 0.5), 0 0 0 1px rgba(116, 245, 255, 0.12) inset; } .dp-hero-carousel--v34 .dp-hero-carousel__slide img { border-radius: 16px; } /* ─── 3. Winner pill — 單條 avatar + winner ─── */ .dp-winner-pill { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 8px 14px 8px 8px; border-radius: 999px; background: linear-gradient(90deg, rgba(15, 30, 68, 0.7) 0%, rgba(20, 50, 100, 0.5) 100%); border: 1px solid rgba(103, 232, 249, 0.28); color: rgba(240, 253, 255, 0.9); font-size: 14.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dp-winner-pill__avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(103, 232, 249, 0.55); background: rgba(2, 6, 23, 0.6); } .dp-winner-pill__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .dp-winner-pill__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .dp-winner-pill__text strong { color: #67e8f9; font-weight: 700; } .dp-winner-pill__text em { color: #fbbf24; font-style: normal; font-weight: 700; } /* ─── 4. 7+ mode icons grid (一翻賞/商城/福利池/市集/領主賞/無盡塔/RPG/...) ─── v3 (mtab-cinemagraph-v4): 1×7 → 4-col auto-wrap (row1=1234 row2=567 + future 78 來時自動填 row2 滿 + 9 開 row3). User mandate: 「兩排沒關係可以靠緊一點密一點 1234 / 56 試試看未來還有 78 我在填寫上去」 */ .dp-mode-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px; /* row gap 6px (between row1+row2) col gap 4px */ padding: 4px 8px 12px; } .dp-mode-icon { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; text-decoration: none; color: #f0fdff; -webkit-tap-highlight-color: transparent; transition: transform 160ms ease; } .dp-mode-icon:active { transform: scale(0.93); } .dp-mode-icon__media { position: relative; /* v3 (mtab-cinemagraph-v4): 4-col grid 後可以放大 orb (從 ~50px → ~64-72px) 因為一排只 4 顆而不是 7 顆，每格寬度 ~25vw 而不是 ~14vw。 clamp(56, 18vw, 76) 在 360-414px viewport 下得 ~64-74px 漂亮一點。 */ width: clamp(56px, 18vw, 76px); aspect-ratio: 1 / 1; height: auto; border-radius: 14px; background: radial-gradient(circle at 50% 30%, rgba(103, 232, 249, 0.22), transparent 70%), linear-gradient(180deg, rgba(20, 40, 88, 0.75) 0%, rgba(15, 30, 68, 0.6) 100%); border: 1px solid rgba(103, 232, 249, 0.42); box-shadow: 0 6px 14px rgba(2, 8, 18, 0.45), 0 0 0 1px rgba(116, 245, 255, 0.12) inset; display: flex; align-items: center; justify-content: center; overflow: hidden; } .dp-mode-icon__media img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); } .dp-mode-icon__name { /* R501m5 recursing-edison (2026-05-26): owner 希望模式標籤「放大一點」. 原 clamp(9.9px, 2.6vw, 13.2px) → bumped ~25% to clamp(12.5px, 3.2vw, 16.5px) */ font-size: clamp(12.5px, 3.2vw, 16.5px); font-weight: 600; color: #f0fdff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center; } .dp-mode-icon__hot { position: absolute; top: -2px; right: -2px; z-index: 2; 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.5); border-radius: 999px; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.5); pointer-events: none; /* slight tilt for energy */ transform: rotate(8deg); } /* ─── v60-fervent-shaw: 浮動泡泡 marine bubbles + idle bob 特效 ─── 背景：海底主題 + 浮動氣泡上升感。bubbles 用 ::before 多 radial-gradient layer 一起上升+淡出；icons 用 nth-child stagger 緩慢上下浮動；領主賞單獨加 cyan halo 標示首位 premium。 */ .dp-mode-row { position: relative; overflow: hidden; isolation: isolate; } /* v60-fervent-shaw v3: 環狀氣泡 (ring bubbles) — 透明中心 + cyan 邊框 + 透明外圍 3-stop radial-gradient 給每顆 bubble 真實氣泡輪廓，不是 fade-out blob */ .dp-mode-row::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle 5px at 8% 110%, transparent 0, transparent 55%, rgba(180, 240, 255, 0.9) 62%, rgba(116, 245, 255, 0.55) 78%, transparent 84%), radial-gradient(circle 8px at 22% 110%, transparent 0, transparent 60%, rgba(180, 240, 255, 0.85) 66%, rgba(103, 232, 249, 0.5) 80%, transparent 86%), radial-gradient(circle 4px at 35% 110%, transparent 0, transparent 50%, rgba(200, 245, 255, 0.95) 60%, rgba(116, 245, 255, 0.65) 80%, transparent 88%), radial-gradient(circle 7px at 48% 110%, transparent 0, transparent 58%, rgba(180, 240, 255, 0.85) 64%, rgba(103, 232, 249, 0.5) 78%, transparent 84%), radial-gradient(circle 5px at 62% 110%, transparent 0, transparent 55%, rgba(180, 240, 255, 0.9) 62%, rgba(116, 245, 255, 0.55) 78%, transparent 84%), radial-gradient(circle 8px at 78% 110%, transparent 0, transparent 60%, rgba(180, 240, 255, 0.85) 66%, rgba(103, 232, 249, 0.5) 80%, transparent 86%), radial-gradient(circle 4px at 92% 110%, transparent 0, transparent 50%, rgba(200, 245, 255, 0.95) 60%, rgba(116, 245, 255, 0.65) 80%, transparent 88%); background-repeat: no-repeat; animation: dp-bubbles-rise 7s linear infinite; } .dp-mode-row::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle 6px at 14% 110%, transparent 0, transparent 58%, rgba(180, 240, 255, 0.85) 64%, rgba(116, 245, 255, 0.55) 78%, transparent 84%), radial-gradient(circle 4px at 30% 110%, transparent 0, transparent 50%, rgba(200, 245, 255, 0.95) 60%, rgba(103, 232, 249, 0.6) 80%, transparent 88%), radial-gradient(circle 7px at 56% 110%, transparent 0, transparent 58%, rgba(180, 240, 255, 0.85) 64%, rgba(116, 245, 255, 0.5) 78%, transparent 84%), radial-gradient(circle 5px at 72% 110%, transparent 0, transparent 55%, rgba(180, 240, 255, 0.9) 62%, rgba(103, 232, 249, 0.55) 78%, transparent 84%), radial-gradient(circle 6px at 86% 110%, transparent 0, transparent 58%, rgba(180, 240, 255, 0.85) 64%, rgba(116, 245, 255, 0.55) 78%, transparent 84%); background-repeat: no-repeat; animation: dp-bubbles-rise 9s linear infinite; animation-delay: -3s; } @keyframes dp-bubbles-rise { 0% { transform: translateY(0); opacity: 0.0; } 10% { opacity: 1; } 85% { opacity: 0.9; } 100% { transform: translateY(-180%); opacity: 0; } } .dp-mode-icon { z-index: 1; } /* idle bob — 5 icons stagger */ .dp-mode-icon__media { animation: dp-mode-bob 3.4s ease-in-out infinite; will-change: transform; } .dp-mode-icon:nth-child(1) .dp-mode-icon__media { animation-delay: 0s; } .dp-mode-icon:nth-child(2) .dp-mode-icon__media { animation-delay: 0.45s; } .dp-mode-icon:nth-child(3) .dp-mode-icon__media { animation-delay: 0.9s; } .dp-mode-icon:nth-child(4) .dp-mode-icon__media { animation-delay: 1.35s; } .dp-mode-icon:nth-child(5) .dp-mode-icon__media { animation-delay: 1.8s; } .dp-mode-icon:nth-child(6) .dp-mode-icon__media { animation-delay: 2.25s; } .dp-mode-icon:nth-child(7) .dp-mode-icon__media { animation-delay: 2.7s; } .dp-mode-icon:nth-child(8) .dp-mode-icon__media { animation-delay: 3.15s; } @keyframes dp-mode-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* 領主賞 — sealed glass orb image 當主體，CSS frame 完全裸 image 本身就含 bubble + crown + 高光 + 折射，不需 frame border / bg */ .dp-mode-icon--orb .dp-mode-icon__media { border-radius: 50%; background: transparent !important; /* 沒有實心 frame */ border: none !important; /* 沒有環邊 */ box-shadow: none !important; /* 沒有 frame shadow */ overflow: visible; } .dp-mode-icon--orb .dp-mode-icon__media img { position: relative; z-index: 2; width: 100%; /* 88% → 100%，orb 填滿 frame */ height: 100%; /* clip-path 切圓 — 強制 drop-shadow 只跟圓形 alpha 走，避免 chroma-key 角落殘留 alpha 讓方形 halo 從 PNG 角落漏出來 */ clip-path: circle(50% at 50% 50%); -webkit-clip-path: circle(50% at 50% 50%); /* Cinemagraph 動畫: 晃動 + 呼吸 + 色相位移 — 靜圖也有「活」的感覺 */ animation: dp-lord-orb-life 5.2s ease-in-out infinite; will-change: transform, filter; } @keyframes dp-lord-orb-life { 0% { transform: rotate(-2deg) scale(1); /* v3: 收斂 drop-shadow (image 邊緣自己有 cyan rim，halo 太重會糊) + saturate(1.08) brightness(1.02) 讓 image 再濃一點 */ filter: drop-shadow(0 3px 6px rgba(2, 8, 18, 0.4)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.35)) saturate(1.05) brightness(1) hue-rotate(-6deg); } 50% { transform: rotate(2deg) scale(1.04); filter: drop-shadow(0 5px 10px rgba(2, 8, 18, 0.45)) drop-shadow(0 0 12px rgba(34, 211, 238, 0.5)) saturate(1.12) brightness(1.05) hue-rotate(6deg); } 100% { transform: rotate(-2deg) scale(1); filter: drop-shadow(0 3px 6px rgba(2, 8, 18, 0.4)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.35)) saturate(1.05) brightness(1) hue-rotate(-6deg); } } /* breathing cyan halo — 在 orb 後面的呼吸光，不是 ring frame */ .dp-mode-icon--orb .dp-mode-icon__media::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; background: radial-gradient( circle at 50% 50%, rgba(34, 211, 238, 0.28) 0%, rgba(34, 211, 238, 0.12) 35%, transparent 65% ); filter: blur(4px); animation: dp-lord-breathe 2.4s ease-in-out infinite; z-index: 0; } /* v60-fervent-shaw cinemagraph: animated caustic shimmer orb 表面的小高光點會緩慢飄移 — 模擬水流折射光點移動。靠 @property 註冊 percentage 變數讓 radial-gradient 中心可動畫。 mix-blend-mode: screen 加亮不蓋黑，crown 不被遮。 */ @property --lord-shimmer-x { syntax: ""; initial-value: 28%; inherits: false; } @property --lord-shimmer-y { syntax: ""; initial-value: 26%; inherits: false; } @property --lord-shimmer-size { syntax: ""; initial-value: 11px; inherits: false; } .dp-mode-icon--orb .dp-mode-icon__media::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 3; /* 高於 img (z=2)，浮在 orb 表面 */ background: radial-gradient( circle var(--lord-shimmer-size) at var(--lord-shimmer-x) var(--lord-shimmer-y), rgba(255, 255, 255, 0.6) 0%, rgba(180, 240, 255, 0.3) 35%, transparent 75% ); mix-blend-mode: screen; animation: dp-lord-orb-caustic 7s ease-in-out infinite; } @keyframes dp-lord-orb-caustic { 0% { --lord-shimmer-x: 28%; --lord-shimmer-y: 26%; --lord-shimmer-size: 11px; } 25% { --lord-shimmer-x: 60%; --lord-shimmer-y: 32%; --lord-shimmer-size: 9px; } 50% { --lord-shimmer-x: 70%; --lord-shimmer-y: 65%; --lord-shimmer-size: 12px; } 75% { --lord-shimmer-x: 38%; --lord-shimmer-y: 72%; --lord-shimmer-size: 10px; } 100% { --lord-shimmer-x: 28%; --lord-shimmer-y: 26%; --lord-shimmer-size: 11px; } } @keyframes dp-lord-breathe { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* 海洋氣泡 aura — 圍繞 icon 上升的環狀氣泡 (ring bubbles, not blob) */ .dp-mode-icon--lord::before { content: ""; position: absolute; top: -6px; left: -10px; right: -10px; height: 78px; /* 比 56px media 大，含氣泡上升空間 */ pointer-events: none; z-index: 0; 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%); background-repeat: no-repeat; animation: dp-lord-aura-rise 3.8s linear infinite; } .dp-mode-icon--lord::after { content: ""; position: absolute; top: -6px; left: -10px; right: -10px; height: 78px; pointer-events: none; z-index: 0; 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%); background-repeat: no-repeat; animation: dp-lord-aura-rise 5.2s linear infinite; animation-delay: -2.1s; } @keyframes dp-lord-aura-rise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 0.85; } 100% { transform: translateY(-100%); opacity: 0; } } .dp-mode-icon--lord .dp-mode-icon__name { position: relative; z-index: 1; 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; } .dp-mode-icon--lord .dp-mode-icon__hot { z-index: 3; /* 確保 HOT badge 不被 aura/ring 遮 */ } @media (prefers-reduced-motion: reduce) { .dp-mode-row::before, .dp-mode-row::after, .dp-mode-icon--lord::before, .dp-mode-icon--lord::after, .dp-mode-icon--orb .dp-mode-icon__media::before, .dp-mode-icon--orb .dp-mode-icon__media::after, .dp-mode-icon--orb .dp-mode-icon__media img, .dp-mode-icon__media { animation: none; } } /* ============================================================ * v60-fervent-shaw: 一番賞 HERO CAROUSEL 取代舊 SUPER PRIZE * 3 張光效卡 + 左右滑動 carousel * 光效: rim conic-gradient 旋轉 + diagonal sweep + media zoom * ============================================================ */ .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 { /* R501m5 recursing-edison (2026-05-26): 章節標題「一番賞」放大. 19.8 → 24.5px (~24%) */ font-size: 24.5px; font-weight: 800; 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 { /* R501m5: 「CHIBANSHO」副標一起放大. 12.1 → 14.5px */ font-size: 14.5px; font-weight: 700; color: rgba(116, 245, 255, 0.7); letter-spacing: 0.18em; } /* v60-fervent-shaw v2: MORE 按鈕重新設計 — 海洋寶藏「金幣」風 (高對比) v1 用 cyan 跟海洋 BG 撞色文字看不清楚, 改成 PURE GOLD pill + 深棕黑字 + 雙層 ring (內 gold + 外 cyan, 點綴海洋主題) */ .dp-ichi-hero__more { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-size: 12.1px; 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 14px 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.18); 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; } .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; } } .dp-ichi-hero__more:hover, .dp-ichi-hero__more:active { transform: translateY(-1px) scale(1.03); background-position: 100% 50%; box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.75), 0 8px 22px rgba(245, 158, 11, 0.65), 0 4px 12px rgba(251, 191, 36, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.7); } .dp-ichi-hero__more > span:last-child { font-size: 15.4px; font-weight: 900; margin-left: -2px; transition: transform 220ms ease; color: #1f0f00; } .dp-ichi-hero__more:hover > span:last-child, .dp-ichi-hero__more:active > span:last-child { transform: translateX(3px); } /* 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; } /* 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); } } @keyframes dp-ichi-sweep { 0%, 18% { background-position: -120% 0; } 60%, 100% { background-position: 220% 0; } } /* 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; } } /* ─── 5. Bottom tabbar v34 with center mega CTA ─── */ .dp-tabbar--v34 { display: grid !important; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: end; padding-top: 0 !important; /* keep base .dp-tabbar { position: fixed; bottom: 0; left:0; right:0; z-index:60 } from arcade.css */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; overflow: visible !important; } .dp-tabbar--v34 .dp-tab { padding-top: 8px; } /* CENTER ELEVATED CIRCULAR CTA */ .dp-tabbar__cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; margin: -28px 6px 0; padding-bottom: 6px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 160ms ease; } .dp-tabbar__cta:active { transform: scale(0.93); } .dp-tabbar__cta-circle { width: 64px; height: 64px; border-radius: 50%; /* v2 (mtab cinemagraph): swapped flat cyan radial bg → deep navy radial so the new cyan-tinted sealed orb img reads against contrast (the prior bg matched the orb's tint and made the orb invisible — only the interior chest silhouette was legible). */ background: radial-gradient(circle at 50% 35%, #1e3a8a 0%, #0b1223 70%, #050a1c 100%); border: 2px solid rgba(103, 232, 249, 0.78); box-shadow: 0 0 0 3px rgba(15, 30, 68, 0.85), 0 0 18px rgba(34, 211, 238, 0.55), 0 10px 24px rgba(2, 8, 18, 0.55), 0 4px 10px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; } .dp-tabbar__cta-circle::before { /* glowing halo behind */ content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(103, 232, 249, 0.45) 0%, transparent 65%); z-index: -1; pointer-events: none; animation: dp-cta-pulse 2.4s ease-in-out infinite; } @keyframes dp-cta-pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } } .dp-tabbar__cta-circle img { width: 78%; height: 78%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)); animation: dp-cta-orb-life 5.2s ease-in-out infinite; will-change: transform, filter; } /* Cinemagraph layer 1: orb breathing + sway + brightness drift on the img. Only on the center CTA — 4 side tabs stay static (skill design rule: 5+ animated icons in nav = noise + Android fps drop). */ @keyframes dp-cta-orb-life { 0%, 100% { transform: rotate(-1.2deg) scale(1) translateY(0); filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.55)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55)) brightness(1); } 50% { transform: rotate(1.2deg) scale(1.04) translateY(-1.5px); filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.85)) drop-shadow(0 0 6px rgba(167, 139, 250, 0.4)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55)) brightness(1.08); } } /* Cinemagraph layer 2: caustic surface drift on top of orb (mix-blend-mode lighten). */ .dp-tabbar__cta-circle::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(ellipse 30% 20% at 30% 28%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(ellipse 18% 14% at 70% 75%, rgba(167, 230, 255, 0.45), transparent 70%); mix-blend-mode: screen; opacity: 0.85; pointer-events: none; animation: dp-cta-caustic 7s ease-in-out infinite; } @keyframes dp-cta-caustic { 0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.55; } 33% { transform: translate(2px, -1px) rotate(2deg); opacity: 0.85; } 66% { transform: translate(-2px, 2px) rotate(-2deg); opacity: 0.7; } } /* Reduced-motion users get static premium icon (no animation noise). */ @media (prefers-reduced-motion: reduce) { .dp-tabbar__cta-circle img, .dp-tabbar__cta-circle::before, .dp-tabbar__cta-circle::after { animation: none !important; } } /* Static-tab subtle hover/active polish (4 side tabs only — they DON'T animate idle). */ .dp-tab .dp-tab__ico img { transition: filter 220ms ease, transform 220ms ease; } .dp-tab:active .dp-tab__ico img { transform: scale(0.92); } .dp-tab--active .dp-tab__ico img { transform: translateY(-1px); } .dp-tabbar__cta-label { font-size: 12.1px; font-weight: 700; color: #f0fdff; letter-spacing: 0.08em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); } /* iOS safe-area inset bottom — ensure mega CTA respects notch */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .dp-tabbar--v34 { padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important; } .dp-tabbar__cta { margin-bottom: env(safe-area-inset-bottom); } } /* ─── 6. UNLIMITED / 領主賞 horizontal scroll section ─── */ .dp-endless { margin: 0 0 18px; padding: 0 14px; } .dp-endless__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; padding: 0 2px; } .dp-endless__title { margin: 0; display: flex; align-items: baseline; gap: 8px; color: #f0fdff; font-size: 17.6px; font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .dp-endless__title-zh { font-size: 17.6px; } .dp-endless__title-en { font-size: 12.1px; font-weight: 600; color: rgba(103, 232, 249, 0.85); letter-spacing: 0.12em; } .dp-endless__more { display: inline-flex; align-items: center; gap: 4px; font-size: 13.2px; font-weight: 600; color: rgba(103, 232, 249, 0.9); text-decoration: none; -webkit-tap-highlight-color: transparent; } .dp-endless__more:active { transform: scale(0.95); } .dp-endless__viewport { position: relative; } .dp-endless__row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; } .dp-endless__row::-webkit-scrollbar { display: none; } .dp-endless__card { flex: 0 0 calc(33.333% - 7px); /* 3 cards visible per swipe */ min-width: 110px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: linear-gradient(180deg, rgba(15, 30, 68, 0.78) 0%, rgba(20, 40, 88, 0.62) 100%); border: 1px solid rgba(103, 232, 249, 0.32); border-radius: 14px; box-shadow: 0 6px 16px rgba(2, 8, 18, 0.45), 0 0 0 1px rgba(116, 245, 255, 0.1) inset; text-decoration: none; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; transition: transform 160ms ease; } .dp-endless__card:active { transform: scale(0.95); } .dp-endless__card--soldout { opacity: 0.55; } .dp-endless__media { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(34, 211, 238, 0.15), transparent 70%), linear-gradient(180deg, rgba(10, 22, 51, 0.7) 0%, rgba(5, 10, 28, 0.6) 100%); border: 1px solid rgba(103, 232, 249, 0.18); } .dp-endless__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .dp-endless__name { font-size: 12.1px; font-weight: 600; color: #f0fdff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); min-height: 28px; } .dp-endless__price { align-self: flex-start; padding: 3px 9px; font-size: 13.2px; font-weight: 700; color: #052e16; background: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%); border-radius: 999px; } /* Skeleton loading state */ .dp-endless__skel { flex: 0 0 calc(33.333% - 7px); min-width: 110px; aspect-ratio: 3 / 4; border-radius: 14px; background: linear-gradient(110deg, rgba(15, 30, 68, 0.55) 0%, rgba(34, 211, 238, 0.18) 50%, rgba(15, 30, 68, 0.55) 100%); background-size: 200% 100%; animation: dp-endless-skel-shimmer 1.4s ease-in-out infinite; scroll-snap-align: start; } @keyframes dp-endless-skel-shimmer { 0%, 100% { background-position: 200% 0; } 50% { background-position: -100% 0; } } /* Left / right nav arrows — overlay on viewport edges */ .dp-endless__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 32px; height: 32px; border-radius: 50%; background: rgba(5, 20, 34, 0.78); border: 1px solid rgba(103, 232, 249, 0.5); color: #67e8f9; font-size: 19.8px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(2, 8, 18, 0.6); transition: transform 160ms ease, background 160ms ease; -webkit-tap-highlight-color: transparent; } .dp-endless__nav:active { transform: translateY(-50%) scale(0.92); background: rgba(34, 211, 238, 0.4); } .dp-endless__nav--prev { left: -4px; } .dp-endless__nav--next { right: -4px; } /* ===================================================================== * v35f mobile Hero overlay frame * ===================================================================== */ .dp-hero-carousel--v34 { position: relative; overflow: visible !important; /* 讓邊框光暈可以微微外擴 */ } .dp-hero-carousel--v34 .dp-hero-frame-overlay { position: absolute; inset: -2px; pointer-events: none; z-index: 5; border-radius: 20px; } .dp-hero-carousel--v34 .dp-hero-frame-overlay > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .dp-hero-carousel--v34 .dp-hero-frame-overlay video, .dp-hero-carousel--v34 .dp-hero-frame-overlay img, .dp-hero-carousel--v34 .dp-hero-frame-overlay svg { object-fit: fill; display: block; } /* ============================================================ * v20l owner audit「下方的那個 BAR 上下佔用太多不合理可以縮一點 * 然後圖案跟文字大一點」 * 縮 tabbar 高度 + 放大 icon + 放大 text, 目視更合理: * - 總高度 62 → 54px (扣 -8px) * - icon 26 → 32px * - text 11 → 13px (font-weight 800 加重) * - padding/gap 收緊 (4 → 2 / 3 → 2) * 只 affect dp-tabbar (4 个 dp-tab + 1 個 cta), 不動 cta-circle 大小 * (圓鈕 64px 已平衡; 動 cta-circle 會牽動 ::before halo 等多層) */ /* v20m BUG FIX: 之前 v20l 把 tabbar 設 54px 導致 tab text bottom 1046 超出 tabbar bottom 1039 = 7px 文字被切。content 實 = pad-top 4 + icon 32 + gap 2 + text 18 + pad-bot 2 = 58, 加 tabbar pad-top 2 = 60 才剛好。 54 太緊, 60 是 minimum (content 60 = tabbar 60 沒 overflow), 維持比原 62-66 略矮。 */ /* v20n: 用戶反饋「BAR 還是太長而且有被切割」— 縮 tabbar 到 52px (vs 原 62-66, 縮 10-14px), icon 32→30 (略小但仍比原 26 大), text 13→12, line-height 1.1 + tighter padding/gap → 內容剛好塞 + 不切割。 */ /* v20p: user mandate 「下方 BAR 完整顯示文字+圖片 + 大一點 + 往下移動一點點」 - tabbar 70px (足夠塞下大 icon + 大 text + buffer + 下移空間) - icon 36 (vs 原 26-28, 大很多, 視覺顯眼) - text 14, line-height 1.15 (大於原 11) - justify-content: flex-end → content 推到 tabbar 底部 (達成「往下移動」) - padding-bottom 6 控制與底邊距離 (留呼吸空間) - padding-top 4 (頂部稍多, content 整體偏下) */ .dp-tabbar { height: calc(70px + env(safe-area-inset-bottom)); min-height: calc(70px + env(safe-area-inset-bottom)); padding: 4px 0 env(safe-area-inset-bottom); } .dp-tabbar--v34 .dp-tab { justify-content: flex-end; /* content 從 bottom 往上排, 達成「往下移動」 */ padding-top: 12px; /* v20p2 加大頂部 padding 把 icon 推下 */ padding-bottom: 6px; /* 底部呼吸 */ gap: 4px; /* icon ↔ text 距離 */ font-size: 15.4px; font-weight: 800; line-height: 1.15; letter-spacing: 0.02em; } .dp-tabbar--v34 .dp-tab > span:last-child { line-height: 1.1; } .dp-tab__ico img { width: 36px !important; height: 36px !important; } .dp-tabbar__cta-label { font-size: 13.2px; font-weight: 800; line-height: 1.1; } .dp-footer-spacer { height: calc(70px + 16px + env(safe-area-inset-bottom)); } /* v20q user audit「那個線可以稍微往下一點但是不要把按鈕吃掉」: .dp-tabbar::before 是 tabbar 頂的 gradient 裝飾線, 原 top:-1px (在 tabbar 邊上)。往下移到 top:6px (距 tabbar 頂 6px), 距 icon top 13px 還有 7px 空間 → 不吃 button。 */ .dp-tabbar.dp-tabbar--v34::before { top: 6px !important; } /* v20t owner audit「玻璃特效跟 MORE 還是一直循環播放」「不該循環那麼快」: 首頁 .dp-ichi-hero__card::after 原 dp-ichi-sweep 4.6s infinite (~3s 動 + 1.6s 靜) = 平均 60% 時間都在閃, 用戶感覺「一直循環」。 override: 60s linear infinite + keyframe 改成 0-3% 動 (~1.8s) + 97% 靜 (~58s)。配 dp-ichi-rim 也降頻 (7s → 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 60s linear infinite !important; } @keyframes dp-ichi-sweep { 0% { background-position: -120% 0; } 3% { background-position: 220% 0; } 100% { background-position: 220% 0; } } /* v20-cleanup (2026-05-05): v20u 22s !important duration override 已合併進 line 394 single rule (3s)。standalone .dp-ticker__prize-img (18px) 已被 .dp-ticker__pcard .dp-ticker__prize-img (line 2540, 100% fill) 蓋掉， renderWinners 永遠在 .pcard 內 render，所以 standalone 規則 dead。 */ /* v20u: 手機 topbar 聯絡客服 button (鈴鐺右邊) */ .dp-top-icon--support { text-decoration: none; } .dp-top-icon--support .dp-top-icon__svg img { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.4)); } /* ════════════════════════════════════════════════════════════ * v20x (crazy-ardinghelli): 即時中獎 ticker 重新設計 * user mandate「我希望採取這格式」 — ref 圖：暗色 pill 卡 + 大獎品圖 + 標 * * 結構: .dp-ticker__item > .dp-ticker__pcard (含 prize-img + tier badge) * + .dp-ticker__caption (top: 🎉 玩家中獎囉 / bot: 獲得 [品名]) * ════════════════════════════════════════════════════════════ */ .dp-ticker__item { display: inline-flex !important; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; 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: 44px; height: 44px; border-radius: 8px; 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: 6px; } .dp-ticker__tier { position: absolute; top: -4px; right: -4px; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px; font-size: 9.9px; font-weight: 900; letter-spacing: 0.04em; color: #fff; background: linear-gradient(135deg, #ef4444, #b91c1c); border: 1.5px solid #fef2f2; 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); } .dp-ticker__caption { display: inline-flex; flex-direction: column; gap: 1px; line-height: 1.15; } .dp-ticker__top { font-size: 12.1px; font-weight: 800; color: rgba(240, 253, 255, 0.95); } .dp-ticker__bot { font-size: 11px; 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); } /* v20-clean-orb-fix (2026-05-05): user「怎麼感覺有兩層 ICON」雙層成因有 3 個： 1. orb PNG 本身內外圈：外層薄薄 cyan rim glow halo + 內層 glass sphere 2. CSS 各 state 又疊 drop-shadow (OFF 加 black halo, ON 加 12px+6px cyan halo) 3. .dp-top-icon 容器 base bg + border 雖然 !important 蓋掉但 hover 時又出現修法： A. 容器全狀態 (default/hover/active) bg+border 全部 0 B. __svg span 變成 36×36 圓形 mask (overflow:hidden + border-radius:50%) 把 image 放大 (50×50 inside 36×36) 使 PNG 外層 halo 被 clip 掉，只露出 sphere 本體 C. 全部 drop-shadow 拿掉，让 PNG 自己的內部光做唯一 visual layer D. ON / OFF 用 brightness + saturate + opacity 區分 (不再加 drop-shadow) 結果：只剩單層球體圖，無雙圈視覺。 */ /* 2026-05-07 (crazy-ardinghelli) Option A v2: 完全跟桌機 .site-XXX-toggle 對齊。不用 base .dp-top-icon 的 cyan tint pill (容易跟桌機 pill 視覺不同), 改用桌機同款深暗藍 + 灰邊 pill 樣式。 */ .dp-top-icon--music, .dp-top-icon--bell, .dp-top-icon--support { background: rgba(15, 23, 42, 0.64) !important; border: 1px solid rgba(148, 163, 184, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-radius: 999px; overflow: visible; transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .dp-top-icon--music:hover, .dp-top-icon--bell:hover, .dp-top-icon--support:hover { border-color: rgba(56, 189, 248, 0.56) !important; background: rgba(14, 116, 144, 0.2) !important; } .dp-top-icon--music:active, .dp-top-icon--bell:active, .dp-top-icon--support:active { transform: scale(0.96); } /* 2026-05-06 crazy-ardinghelli: 之前用 clip mask (__svg overflow:hidden + IMG 50px 放大) 把 PNG 外圈 halo 切掉。但這造成 admin-image-settings 顯示全 PNG (256×256 完整有 halo) 跟 /m/ 顯示 cropped 36×36 內圈不符 → user 看到「admin 跟我手機顯示不一樣」。修法：拿掉 clip，直接 fit 36×36 完整 PNG。雖然外圈 halo 視覺上會出現「雙圈」，但跟 admin preview 一致，user 不會覺得圖被偷換。如果之後 halo 真的太干擾，再 regenerate 出沒外圈光暈的 orb（而不是用 clip 偽裝）。 */ /* 2026-05-07 (crazy-ardinghelli) Option A: IMG 28×28 跟桌機 .topbar img 一致。 .dp-top-icon base 38×38 + padding:5px = 28×28 inner area，剛好。 */ .dp-top-icon--music .dp-top-icon__svg, .dp-top-icon--bell .dp-top-icon__svg, .dp-top-icon--support .dp-top-icon__svg { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; position: relative; } .dp-top-icon--music img, .dp-top-icon--bell img, .dp-top-icon--support img { width: 28px !important; height: 28px !important; max-width: 28px; max-height: 28px; object-fit: contain; transition: transform 160ms ease, filter 200ms ease; filter: none; } .dp-top-icon--music:hover img, .dp-top-icon--bell:hover img, .dp-top-icon--support:hover img { filter: brightness(1.15) saturate(1.1); transform: scale(1.08); } /* 2026-05-07 (crazy-ardinghelli): 之前 OFF state 加 grayscale(0.7) + brightness(0.7) + opacity:0.55 把音樂 icon 弄得暗灰，跟鈴鐺/客服 cyan 玻璃球視覺差太多 (user 投訴「音樂跟其他兩顆不一樣」)。改跟桌機 / 一致：OFF state 維持滿色 cyan，只有 ON state 加 glow drop-shadow。 */ .dp-top-icon--music[data-music-state="on"] img { filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.8)) !important; } .dp-top-icon--music[data-music-state="off"] img, .dp-top-icon--music:not([data-music-state]) img { /* 維持滿色 cyan 玻璃球 — 跟 bell/support + 桌機 OFF 一致 */ filter: none !important; opacity: 1 !important; } /* music ON pulse ring 留在 button 容器 (非 __svg) 所以不會被 clip */ .dp-top-icon--music[data-music-state="on"]::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(103, 232, 249, 0.55); pointer-events: none; animation: dp-music-on-pulse 2s ease-in-out infinite; } @keyframes dp-music-on-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .dp-top-icon--music[data-music-state="on"]::after { animation: none; } } /* v20-cleanup (2026-05-05): - 移除 .dp-ticker__label/__pulse display:none hide rule (HTML scaffold 已乾淨清掉，不需要再 hide 不存在的元件) - 移除 .dp-ticker__track-inner 3s !important / gap !important 重複 override (已合併到 line 394) v20z2 user「速度可以再快一點然後包覆感立體一點好看一點 UIUX 強化」 .dp-ticker__item 3D glass pill 升級保留 (3 多層 inset shadow + 反光 highlight) */ .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: ticker pill hover/tap state — 加包覆感互動回饋 + 顏色 tier badge palette */ .dp-ticker__item:hover, .dp-ticker__item:active { 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; } /* tier 顏色按 badge 內容變 (S/SR/神話紅, A/傳說金, B/史詩紫, C/高級藍, D/普通灰) */ .dp-ticker__tier { text-transform: uppercase; } .dp-ticker__pcard:has(.dp-ticker__tier:is(:contains("S"), :contains("SR"), :contains("SSR"), :contains("神話"))) .dp-ticker__tier { background: linear-gradient(135deg, #ef4444, #b91c1c); } /* ════════════════════════════════════════════════════════════ * v20z5 user 「即時中獎畫面感覺不夠」 — UIUX major upgrade: * - pill 加大 (pcard 44→52, caption font 11/10→13/11, 整體高度 54→62) * - tier 顏色配色 (S/SR=red, A/傳說=gold, B/史詩=purple, C/高級=blue, * D/普通=gray, 神話=magenta, common 不顯示) * - 🎉 emoji sparkle 在每張 pill 左側 + pulse 動畫 * - light sweep 強化 (1.6s 間歇橫掃) * - tier badge 加大 + tier-specific glow color * ════════════════════════════════════════════════════════════ */ .dp-ticker__item { padding: 5px 12px 5px 5px !important; gap: 9px !important; min-height: 62px; } .dp-ticker__sparkle { flex: 0 0 auto; font-size: 15.4px; 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: 52px !important; height: 52px !important; border-radius: 10px !important; } .dp-ticker__pcard .dp-ticker__prize-img { border-radius: 8px; } .dp-ticker__top { font-size: 14.3px !important; font-weight: 700 !important; color: rgba(240, 253, 255, 0.85); } .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: 12.1px !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: 13.2px; } /* Tier badge palette — 配色 + glow */ .dp-ticker__tier { min-width: 22px !important; height: 18px !important; font-size: 11px !important; border: 1.5px solid rgba(255, 255, 255, 0.85) !important; } .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), 0 1px 4px rgba(0, 0, 0, 0.5) !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), 0 1px 4px rgba(0, 0, 0, 0.5) !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), 0 1px 4px rgba(0, 0, 0, 0.5) !important; } .dp-ticker__tier[data-tier="c"], .dp-ticker__tier[data-tier="高級"] { background: linear-gradient(135deg, #67e8f9, #0891b2) !important; color: #052e16 !important; box-shadow: 0 0 8px rgba(103, 232, 249, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5) !important; } .dp-ticker__tier[data-tier="d"], .dp-ticker__tier[data-tier="普通"], .dp-ticker__tier[data-tier="n"] { background: linear-gradient(135deg, #94a3b8, #475569) !important; box-shadow: 0 0 4px rgba(148, 163, 184, 0.5), 0 1px 4px rgba(0, 0, 0, 0.5) !important; } /* tier-specific pcard border 顏色配對 (取代原本的 gold default) */ .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; } /* Light sweep 動畫 (1.6s 間歇橫掃過 pill) */ .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): 通知 panel CSS 全套 /m/index.html 只載 arcade.css + marine-theme.css，沒載 styles-customer.css，所以 _frontend-src/styles/10a-chrome-nav.css 內的 .site-notification-panel* 規則打不到 — panel 沒 styling = position:absolute 預設定位到 body 底部 (y≈7883) = 用戶點 bell 看似「沒反應」(其實 panel 開了, 但在頁尾你滾不到的地方)。修法：把 _frontend-src/styles/10a-chrome-nav.css 的 panel 整套 CSS 放這裡。 ───────────────────────────────────────────────────────────────────── */ .site-notification-panel--mobile { position: fixed !important; top: 64px !important; right: 8px !important; left: auto !important; width: min(360px, calc(100vw - 16px)) !important; max-height: calc(100vh - 80px) !important; z-index: 1500 !important; } .site-notification-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(360px, calc(100vw - 32px)); max-height: min(480px, calc(100vh - 120px)); display: flex; flex-direction: column; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 16px; background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96)); box-shadow: 0 22px 50px rgba(2, 6, 23, 0.56), 0 0 0 1px rgba(56, 189, 248, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 1000; overflow: hidden; animation: site-notification-panel-in 0.18s ease-out; } .site-notification-panel[hidden] { display: none !important; } @keyframes site-notification-panel-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .site-notification-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid rgba(148, 163, 184, 0.18); } .site-notification-panel__title { font-size: 15.4px; font-weight: 700; color: #e2e8f0; letter-spacing: 0.05em; } .site-notification-panel__title-icon { width: 22px; height: 22px; max-width: 22px; max-height: 22px; margin-right: 8px; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.45)); } .site-notification-panel__close { width: 28px; height: 28px; border: none; background: transparent; color: rgba(226, 232, 240, 0.66); font-size: 24.2px; line-height: 1; cursor: pointer; border-radius: 999px; transition: background 0.16s ease, color 0.16s ease; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .site-notification-panel__close-icon { width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; pointer-events: none; transition: transform 0.16s ease, filter 0.16s ease; } .site-notification-panel__close:hover { color: #fff; background: rgba(148, 163, 184, 0.18); } .site-notification-panel__close:hover .site-notification-panel__close-icon { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55)); } .site-notification-panel__filters { display: flex; gap: 6px; padding: 8px 12px 10px; overflow-x: auto; border-bottom: 1px solid rgba(148, 163, 184, 0.1); scrollbar-width: thin; } .site-notification-panel__filters::-webkit-scrollbar { height: 6px; } .site-notification-panel__filters::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); border-radius: 3px; } .site-notification-chip { flex: 0 0 auto; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.24); background: rgba(15, 23, 42, 0.4); color: rgba(203, 213, 225, 0.78); font-size: 13.2px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; display: inline-flex; align-items: center; gap: 4px; } .site-notification-chip__icon { width: 16px; height: 16px; flex: 0 0 auto; pointer-events: none; } .site-notification-chip:hover { color: #fff; border-color: rgba(56, 189, 248, 0.5); background: rgba(14, 116, 144, 0.18); } .site-notification-chip.is-active { color: #07111f; border-color: rgba(125, 211, 252, 0.84); background: linear-gradient(135deg, #7dd3fc, #facc15); font-weight: 700; } .site-notification-panel__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 36px 16px; color: rgba(148, 163, 184, 0.78); } img.site-notification-panel__empty-icon { width: 56px; height: 56px; max-width: 56px; max-height: 56px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.35)); opacity: 0.92; } span.site-notification-panel__empty-icon { font-size: 35.2px; } .site-notification-panel__empty-text { font-size: 14.3px; } .site-notification-panel__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0; } .site-notification-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.1); color: #e2e8f0; text-decoration: none; transition: background 0.16s ease; cursor: pointer; } .site-notification-item:last-child { border-bottom: none; } .site-notification-item:hover { background: rgba(56, 189, 248, 0.08); } .site-notification-item.is-unread { background: rgba(56, 189, 248, 0.05); } .site-notification-item.is-unread::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; } .site-notification-item__icon { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-size: 19.8px; border-radius: 8px; background: rgba(148, 163, 184, 0.14); } .site-notification-item__icon.site-notification-item__icon--png { background: transparent !important; } .site-notification-item__icon--png img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } .site-notification-item__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; } .site-notification-item__title { font-size: 14.9px; font-weight: 700; color: #f1f5f9; line-height: 1.35; word-wrap: break-word; } .site-notification-item__desc { font-size: 13.8px; color: rgba(203, 213, 225, 0.82); line-height: 1.4; word-wrap: break-word; } .site-notification-item__time { font-size: 12.1px; color: rgba(148, 163, 184, 0.7); letter-spacing: 0.04em; } .site-notification-item__del { flex: 0 0 auto; width: 24px; height: 24px; border: none; border-radius: 50%; background: transparent; color: rgba(148, 163, 184, 0.6); font-size: 19.8px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease; display: inline-flex; align-items: center; justify-content: center; } .site-notification-item:hover .site-notification-item__del, .site-notification-item:focus-within .site-notification-item__del { opacity: 1; } .site-notification-item__del:hover { color: #fb7185; background: rgba(251, 113, 133, 0.14); } @media (hover: none) { .site-notification-item__del { opacity: 0.7; } } .site-notification-panel__view-all { display: block; text-align: center; padding: 10px 16px; font-size: 13.8px; font-weight: 600; color: #67e8f9; text-decoration: none; border-top: 1px solid rgba(148, 163, 184, 0.12); transition: background 0.15s ease, color 0.15s ease; } .site-notification-panel__view-all:hover { background: rgba(56, 189, 248, 0.08); color: #fff; } /* mountMobile 自動 inject .site-notification-toggle__dot 進 .dp-top-icon--bell, 但 mobile 已經有自己的 .dp-top-icon__badge (site-topbar.js wireBell 維護), 所以隱藏這個 dot 避免兩個 badge 同時顯示。 */ .dp-top-icon--bell .site-notification-toggle__dot { display: none !important; } /* ───────────────────────────────────────────────────────────────────── v60-condescending-goldberg (2026-05-07): 商城頁 marine 主題 /m/store.html 新增 (hero carousel + cart FAB) + 改造 (headline/action icon) 18 張 store icon 全部 dedicated marine 設計。 ───────────────────────────────────────────────────────────────────── */ /* Hero carousel — 跟 /m/index.html 共用同款 dp-hero-carousel--v34 系統, /m/index.html 已有完整 CSS 我這裡只加 store 特化 (略小邊距) */ .dp-store-main .dp-hero-carousel--v34 { margin-bottom: 16px; } /* Headline icon — 換成 PNG store.cart.icon */ .dp-store-headline__icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(103, 232, 249, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); } /* Action button icons (我的訂單 / 購物車) — 兩個 button 各自前綴 marine icon */ .dp-store-action__icon { width: 22px; height: 22px; max-width: 22px; max-height: 22px; object-fit: contain; margin-right: 6px; filter: drop-shadow(0 0 4px rgba(103, 232, 249, 0.45)); vertical-align: middle; } /* Filter trigger icon */ .dp-store-filter-trigger__icon { width: 18px; height: 18px; max-width: 18px; max-height: 18px; object-fit: contain; margin-right: 4px; filter: drop-shadow(0 0 3px rgba(103, 232, 249, 0.45)); vertical-align: middle; } /* 空狀態 — 換 emoji ⌕ 為 store.empty.search hero icon (256 顯示 88px) */ img.dp-store-empty__icon { width: 88px; height: 88px; max-width: 88px; max-height: 88px; object-fit: contain; margin: 12px auto 14px; display: block; filter: drop-shadow(0 0 12px rgba(103, 232, 249, 0.45)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.65)); opacity: 0.95; } /* Floating cart FAB — 跟首頁 .dp-bell-fab 同設計語言, 但放左側 (避右上鈴鐺 + 中間 mega CTA) 位置: tabbar (z:60) 上方 12px gap, 左側 12px right edge 留空給其他 fab */ .dp-store-cart-fab { position: fixed; left: 12px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(103, 232, 249, 0.42); background: radial-gradient(circle at 30% 25%, rgba(103, 232, 249, 0.36) 0%, rgba(15, 30, 68, 0.78) 70%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; padding: 8px; cursor: pointer; z-index: 55; transition: transform 200ms ease, box-shadow 220ms ease; box-shadow: 0 4px 16px rgba(34, 211, 238, 0.34), 0 0 0 1px rgba(165, 243, 252, 0.18); text-decoration: none; -webkit-tap-highlight-color: transparent; } .dp-store-cart-fab:active { transform: scale(0.92); } .dp-store-cart-fab:hover, .dp-store-cart-fab:focus-visible { box-shadow: 0 6px 22px rgba(34, 211, 238, 0.55), 0 0 0 2px rgba(165, 243, 252, 0.32); outline: none; } .dp-store-cart-fab__ico { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; } .dp-store-cart-fab__ico img { width: 100%; height: 100%; max-width: 32px; max-height: 32px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(103, 232, 249, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); pointer-events: none; } .dp-store-cart-fab__count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: linear-gradient(180deg, #ff5470, #ef4444); color: #fff; font-size: 12.1px; font-weight: 700; line-height: 20px; text-align: center; border: 2px solid #050a1c; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.55); pointer-events: none; } .dp-store-cart-fab__count[hidden] { display: none; } /* ============================================================================ * R501dv angry-cartwright (2026-05-17): content-visibility for /m/index.html * below-fold sections. Mobile mirror of R501dv desktop rules in marine-home.css. * * Targets: * .dp-ichi-hero[data-game-hero="ichi"] — 一番賞 podium (below mode-row) * .dp-ticker — winners marquee (just below carousel) * * Mobile contain-intrinsic-size 用 400px (mobile vertical space tighter than desktop). * * SENTINEL: r501dv-m-home-content-visibility * ============================================================================ */ /* R501dy angry-cartwright (2026-05-17): 撤掉 .dp-ticker 的 content-visibility. R501dv 加的 contain-intrinsic-size: 400px 跟實際 ticker 高度 (~50px) 差太多 → ticker render 後反向收縮 350px → CLS 0.227 巨大 layout shift. Lighthouse mobile CLS 從 0.05 預期 → 實測 0.3 因此規則. dp-ticker 緊接 carousel 下方, 通常在 fold 內, 不需 content-visibility. SENTINEL: r501dy-ticker-content-visibility-revert */ body.dp-body--marine .dp-ichi-hero[data-game-hero="ichi"]:not([hidden]) { content-visibility: auto; contain-intrinsic-size: auto 400px; } body.dp-body--marine .dp-mode-icon, body.dp-body--marine .dp-ticker__item, body.dp-body--marine .dp-ichi-hero__card { contain: layout paint style; }