/* =====================================================================
 * Seakuji arcade-layout preview — 海洋尋寶賞 style
 * Borrows the ARCADE LAYOUT STRUCTURE from reference but uses seakuji's
 * own ocean teal+gold palette + diver-boy mascot. NOT the other site's
 * purple/mascot branding.
 * Independent prefix .dp-* so it does not collide with /m/ (.h5-*)
 * or desktop (.home-*).
 * =====================================================================
 */

:root {
  /* Galaxy / Lumina dream palette — deep violet + pink + cyan nebula */
  --dp-bg-abyss:    #0a0520;  /* deepest midnight purple */
  --dp-bg-deep:     #140a36;
  --dp-bg-mid:      #231355;
  --dp-bg-teal:     #2f1d66;  /* top violet glow */
  --dp-teal:         #8ae5ff;  /* repurposed: cosmic cyan */
  --dp-teal-dark:    #5aa9e0;
  --dp-teal-deep:    #1c3864;
  --dp-navy:         #1b0f42;
  --dp-navy-dark:    #0a0520;
  --dp-gold:         #e9b8ff;  /* repurposed: pearl lavender */
  --dp-gold-deep:    #a476d8;
  --dp-coral:        #ff9be7;  /* repurposed: nebula pink */
  --dp-pink-new:     #ff9be7;
  --dp-bg:           #0a0520;
  --dp-bg-card:      rgba(35, 19, 85, 0.72);
  --dp-bg-soft:      rgba(35, 19, 85, 0.55);
  --dp-line:         rgba(196, 176, 255, 0.26);
  --dp-line-soft:    rgba(196, 176, 255, 0.16);
  --dp-ink:          #f6f2ff;
  --dp-ink-dim:      rgba(246, 242, 255, 0.78);
  --dp-ink-faint:    rgba(246, 242, 255, 0.52);
  --dp-tabbar-h:     calc(62px + env(safe-area-inset-bottom));
  --dp-radius-card:  14px;
  --dp-radius-pill:  999px;
  --dp-shadow-sm:    0 4px 14px rgba(32, 8, 60, 0.55);
  --dp-shadow-md:    0 10px 26px rgba(32, 8, 60, 0.65);
  /* Gold replaced by nebula gradient: pink → lavender → cyan */
  --dp-gold-line:    linear-gradient(135deg, #ff9be7 0%, #c4b0ff 45%, #8ae5ff 100%);
  --dp-nebula:       linear-gradient(135deg, #ff9be7 0%, #c4b0ff 50%, #8ae5ff 100%);
  --dp-font:         -apple-system, BlinkMacSystemFont, "Noto Sans TC",
                     "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--dp-bg-abyss);
}

/* 2026-05-01 Round 3 (c158): 從 html 拿掉 overflow-x: hidden 只留 body 不夠。
   `overflow-x: hidden` on body 仍會把 body 變 scroll container (因 implicit
   overflow-y: auto)，等於 html + body 兩個 scroll container 在搶 scroll root，
   iOS Safari 卡死。
   修法：用 `overflow-x: clip` (CSS3, iOS 16+) — 只剪不變 scroll container，
   不會跟 html scroll root 搶。降級 fallback 仍用 hidden 給老 browser。 */
html {
  overscroll-behavior-x: none;
}
body {
  overflow-x: hidden; /* fallback for iOS < 16 */
  overflow-x: clip;   /* iOS 16+ — 不變 scroll container */
  overscroll-behavior-x: none;
  max-width: 100%;
}

.dp-body {
  margin: 0; padding: 0;
  font-family: var(--dp-font);
  font-size: 14px;
  line-height: 1.4;
  color: var(--dp-ink);
  background:
    radial-gradient(ellipse 80% 50% at 50% -8%, rgba(59, 212, 232, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 40% at 85% 15%, rgba(255, 213, 110, 0.14), transparent 60%),
    linear-gradient(180deg,
      var(--dp-bg-teal)   0%,
      var(--dp-bg-mid)   20%,
      var(--dp-bg-deep)  55%,
      var(--dp-bg-abyss) 100%);
  background-color: var(--dp-bg-abyss);
  /* 2026-05-01: 拿掉 background-attachment: fixed — iOS Safari 經典 bug
     (Chromium / 雷電模擬器正常，但真 iPhone Safari 會直接卡死無法垂直滾動)。
     視覺上的「固定星空」由 .dp-sparkles (position: fixed) 自己 layer 提供，
     body bg gradient 拿掉 fixed 不影響觀感。 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* c158 (2026-05-01) Round 3: 拿掉 overscroll-behavior-y: none — iOS Safari
     對 body 同時 overflow-x: hidden + overscroll-behavior-y: none 處理有 bug，
     會把 body 當 scroll root 然後鎖死垂直 scroll。垂直 bounce 留給 iOS 預設
     行為比較安全。
     拿掉重複的 overflow-x: hidden（已在 body 那條 rule 裡用 clip 設定）。 */
  min-height: 100dvh;
  width: 100%;
}
.dp-status-bar { height: env(safe-area-inset-top); background: transparent; }
.dp-body a { color: inherit; text-decoration: none; }
.dp-body img { display: block; max-width: 100%; }
.dp-body button, .dp-body input { font-family: inherit; }

/* Floating star sparkles layer — purely decorative, non-blocking */
.dp-sparkles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.dp-star {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.6) 55%, transparent 100%);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.75),
              0 0 12px rgba(233, 184, 255, 0.5);
  opacity: 0;
  animation: dp-twinkle 6s ease-in-out infinite;
}
.dp-star--s  { width: 2px; height: 2px; opacity: 0.9; animation-duration: 4.5s; }
.dp-star--m  { width: 3px; height: 3px; animation-duration: 5.8s; }
.dp-star--l  { width: 5px; height: 5px; animation-duration: 7.2s; }
@keyframes dp-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.85); }
  50%      { opacity: 0.95; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .dp-star { animation: none; opacity: 0.4; }
}

/* ---- Top bar: brand + bell (no search, no drag) — slim ---- */
.dp-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px;
  background: linear-gradient(180deg, rgba(2, 12, 30, 0.78), rgba(6, 26, 55, 0.65));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 213, 110, 0.22);
  width: 100%;
}

.dp-brand {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: 10px;
  user-select: none;
}
/* Official seakuji wordmark (onereward_title_logo.png) — small, slim bar */
.dp-brand__wordmark {
  height: 30px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7))
          drop-shadow(0 0 10px rgba(233, 184, 255, 0.35));
}

.dp-bell {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(35, 19, 85, 0.6);
  border: 1px solid rgba(196, 176, 255, 0.35);
  font-size: 14px;
  color: var(--dp-coral);
  position: relative;
  cursor: pointer;
  padding: 0;
}

/* ---- Hero promo banner — galaxy nebula ---- */
.dp-hero {
  margin: 10px 14px 12px;
  border-radius: var(--dp-radius-card);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(196, 176, 255, 0.45), transparent 70%),
    radial-gradient(ellipse 60% 80% at 20% 100%, rgba(255, 155, 231, 0.28), transparent 70%),
    radial-gradient(ellipse 60% 80% at 85% 100%, rgba(138, 229, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #2f1d66 0%, #231355 55%, #140a36 100%);
  min-height: 160px;
  padding: 10px 10px 12px;
  display: block;
  text-align: center;
  border: 1px solid rgba(196, 176, 255, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(196, 176, 255, 0.35),
    0 8px 22px rgba(32, 8, 60, 0.45);
}
.dp-hero__chevrons-l,
.dp-hero__chevrons-r {
  position: absolute; top: 6px; font-weight: 900;
  color: #e9b8ff;
  font-size: 18px;
  letter-spacing: -2px;
  text-shadow: 0 1px 0 #a476d8, 0 0 8px rgba(233, 184, 255, 0.55);
  z-index: 2;
}
.dp-hero__chevrons-l { left: 10px; }
.dp-hero__chevrons-r { right: 10px; transform: scaleX(-1); }

.dp-hero__chara {
  display: block;
  margin: 2px auto 4px;
  width: 96px; height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 18px rgba(196, 176, 255, 0.48));
  position: relative;
  z-index: 0;
}

.dp-hero__title {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  text-shadow: -2px 0 0 #1b0f42, 0 -2px 0 #1b0f42, 2px 0 0 #1b0f42, 0 2px 0 #1b0f42,
               0 4px 0 #1b0f42, 0 0 14px rgba(196, 176, 255, 0.55);
  letter-spacing: 0.06em;
}
.dp-hero__title-arrow {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--dp-nebula);
  color: #231355;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  font-weight: 900;
  text-shadow: none;
  box-shadow:
    0 2px 10px rgba(233, 184, 255, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.dp-hero__sub {
  position: relative; z-index: 1;
  margin: 6px 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #f6f9fb;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---- Category row: 6 icons, horizontal scroll or even grid ---- */
.dp-cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  padding: 4px 6px 12px;
}
.dp-cat {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 1px 8px;
  transition: transform 160ms ease;
  position: relative;
  overflow: visible;
  min-width: 0;
}
.dp-cat:active { transform: scale(0.92); }

/* ---- Icon wrapper holds icon + pulse halo ---- */
.dp-cat__iconwrap {
  position: relative;
  width: 50px;
  height: 50px;
  display: block;
}
/* Pulsing nebula halo (pink → lavender → cyan) behind each icon */
.dp-cat__iconwrap::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%,
      rgba(255, 155, 231, 0.42) 0%,
      rgba(196, 176, 255, 0.24) 50%,
      transparent 75%),
    radial-gradient(circle at 75% 70%,
      rgba(138, 229, 255, 0.35) 0%,
      transparent 60%);
  filter: blur(5px);
  opacity: 0.8;
  animation: dp-halo-pulse 2.8s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
/* Gold ring ripple REMOVED per user request — only cyan halo pulse remains */
@keyframes dp-halo-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.94); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}

/* Gentle breathing float — 6 icons staggered */
.dp-cat__icon {
  position: relative;
  z-index: 1;
  width: 50px; height: 50px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(255, 155, 231, 0.45))
    drop-shadow(0 0 10px rgba(138, 229, 255, 0.32))
    drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6));
  animation: dp-cat-float 3.6s ease-in-out infinite;
  will-change: transform;
}
.dp-cat:nth-child(1) .dp-cat__icon,
.dp-cat:nth-child(1) .dp-cat__iconwrap::before { animation-delay: 0s; }
.dp-cat:nth-child(2) .dp-cat__icon,
.dp-cat:nth-child(2) .dp-cat__iconwrap::before { animation-delay: 0.35s; }
.dp-cat:nth-child(3) .dp-cat__icon,
.dp-cat:nth-child(3) .dp-cat__iconwrap::before { animation-delay: 0.7s; }
.dp-cat:nth-child(4) .dp-cat__icon,
.dp-cat:nth-child(4) .dp-cat__iconwrap::before { animation-delay: 1.05s; }
.dp-cat:nth-child(5) .dp-cat__icon,
.dp-cat:nth-child(5) .dp-cat__iconwrap::before { animation-delay: 1.4s; }
.dp-cat:nth-child(6) .dp-cat__icon,
.dp-cat:nth-child(6) .dp-cat__iconwrap::before { animation-delay: 1.75s; }

@keyframes dp-cat-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-4px) scale(1.04); }
}

/* Multi-bubble stream per cat — 3 bubbles at varying x/size/timing */
.dp-bubbles {
  position: absolute;
  left: 0; right: 0;
  bottom: 28px;
  height: 70px;
  pointer-events: none;
  z-index: 0;
}
.dp-bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(233, 184, 255, 0.55) 50%,
    rgba(196, 176, 255, 0.12) 100%);
  box-shadow:
    inset 0 0 3px rgba(255, 255, 255, 0.85),
    0 0 4px rgba(233, 184, 255, 0.45);
  opacity: 0;
  animation: dp-bubble-rise 4.2s ease-in infinite;
  will-change: transform, opacity;
}
.dp-bubble--1 { left: 28%; width: 7px; height: 7px; animation-delay: 0s;   animation-duration: 4.6s; }
.dp-bubble--2 { left: 54%; width: 4px; height: 4px; animation-delay: 1.2s; animation-duration: 5.4s; }
.dp-bubble--3 { left: 72%; width: 5px; height: 5px; animation-delay: 2.5s; animation-duration: 4.2s; }

.dp-cat:nth-child(2) .dp-bubble--1 { animation-delay: 0.6s; }
.dp-cat:nth-child(3) .dp-bubble--1 { animation-delay: 1.4s; }
.dp-cat:nth-child(4) .dp-bubble--1 { animation-delay: 2.1s; }
.dp-cat:nth-child(5) .dp-bubble--1 { animation-delay: 3.0s; }
.dp-cat:nth-child(6) .dp-bubble--1 { animation-delay: 3.8s; }

@keyframes dp-bubble-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.85; }
  80%  { opacity: 0.6; }
  100% { transform: translate(calc(-2px), -56px) scale(1.15); opacity: 0; }
}

/* Press burst — icon pops + cyan halo flashes when tapped */
.dp-cat:active .dp-cat__iconwrap::before { opacity: 1; transform: scale(1.25); transition: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .dp-cat__icon,
  .dp-cat__iconwrap::before,
  .dp-bubble { animation: none; }
}
.dp-cat__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--dp-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dp-cat__new {
  position: absolute;
  top: -2px; right: 2px;
  padding: 2px 7px 1px;
  background: var(--dp-pink-new);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  border-radius: 8px 8px 8px 0;
  box-shadow: 0 2px 4px rgba(255, 95, 107, 0.45);
  letter-spacing: 0.03em;
  z-index: 2;
}

/* ---- Winner carousel ---- */
.dp-winners {
  display: flex;
  gap: 8px;
  padding: 2px 14px 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.dp-winners::-webkit-scrollbar { display: none; }
.dp-winners { scrollbar-width: none; }

.dp-winner {
  flex: 0 0 60%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: linear-gradient(90deg, rgba(35, 19, 85, 0.92), rgba(20, 10, 54, 0.92));
  border-radius: 10px;
  color: #fff;
  min-height: 52px;
  border: 1px solid rgba(196, 176, 255, 0.32);
}
.dp-winner__img {
  flex: 0 0 auto;
  width: 56px; height: 40px;
  border-radius: 6px;
  background: #0a0520;
  object-fit: contain;
}
.dp-winner__body {
  flex: 1;
  display: flex; flex-direction: column;
  font-size: 10px;
}
.dp-winner__who {
  font-weight: 700;
  color: #f1faff;
  letter-spacing: 0.02em;
}
.dp-winner__who small { color: var(--dp-coral); margin-left: 4px; font-weight: 700; }
.dp-winner__what {
  margin-top: 2px;
  padding: 2px 6px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 900;
  background: var(--dp-nebula);
  color: #1b0f42;
  border-radius: 4px;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---- Section header: icon + title + more button ---- */
.dp-section {
  margin: 0 14px 10px;
}
.dp-section__head {
  display: flex; align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(180deg, rgba(35, 19, 85, 0.82), rgba(20, 10, 54, 0.82));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-radius: var(--dp-radius-card);
  border: 1px solid rgba(196, 176, 255, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.dp-section__head-icon {
  width: 22px; height: 22px;
  object-fit: contain;
}
.dp-section__head-title {
  flex: 1;
  font-size: 14px;
  font-weight: 900;
  color: var(--dp-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dp-section__more {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px 3px 10px;
  background: rgba(196, 176, 255, 0.14);
  border: 1px solid rgba(196, 176, 255, 0.4);
  border-radius: var(--dp-radius-pill);
  color: var(--dp-coral);
  display: inline-flex; align-items: center; gap: 2px;
}

/* ---- Pool grid: 4 columns tightly packed ---- */
.dp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px 0 4px;
}
.dp-card {
  position: relative;
  background: linear-gradient(180deg, rgba(35, 19, 85, 0.82), rgba(20, 10, 54, 0.82));
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(196, 176, 255, 0.28);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex; flex-direction: column;
  transition: transform 160ms ease;
}
.dp-card:active { transform: scale(0.96); }
.dp-card__media {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #231355, #0a0520);
  position: relative;
  overflow: hidden;
}
.dp-card__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.dp-card__tag {
  position: absolute;
  top: 4px; left: 4px;
  padding: 1px 6px;
  background: var(--dp-nebula);
  border-radius: 3px;
  font-size: 8px;
  font-weight: 900;
  color: #1b0f42;
  letter-spacing: 0.03em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.dp-card__price {
  padding: 4px 6px 6px;
  font-size: 14px;
  font-weight: 900;
  color: var(--dp-coral);
  letter-spacing: 0.02em;
}
.dp-card__price-old {
  margin-left: 4px;
  font-size: 11px;
  color: var(--dp-ink-faint);
  text-decoration: line-through;
  font-weight: 600;
}

/* Sold-out overlay — 2026-04-26: 改成跟桌面版一致的紅色印章 stamp 圖
   (data-image-slot="pool-overlay.sold-out")。原本的 ::after { content: "完售" }
   text-only 視覺已棄用。 */
.dp-card--soldout .dp-card__media::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(2, 12, 30, 0.55);
  z-index: 1;
}
/* 2026-04-26: 提高特異度蓋過 .dp-card__media img (width:100%;height:100%;
   object-fit:cover) — 不然 stamp 被當成卡圖填滿整個 media 容器並 cover-cropped。
   多加 .dp-card--soldout 父層讓 specificity 從 (0,1,0) 升到 (0,2,0)。 */
.dp-card--soldout .dp-card__soldout-stamp {
  position: absolute;
  top: 50%; left: 50%;
  width: 82%;
  max-width: 220px;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.5));
  pointer-events: none;
  user-select: none;
  z-index: 2;
}
.dp-card--soldout {
  filter: saturate(0.7);
}

/* Promo card variant */
.dp-card--promo .dp-card__media {
  background: linear-gradient(135deg, #ff9be7, #3a1f5d);
  display: flex; align-items: center; justify-content: center;
}
.dp-card__promo-badge {
  padding: 3px 10px;
  background: var(--dp-coral);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  border-radius: 4px;
  position: absolute;
  top: 6px; right: 6px;
  transform: rotate(8deg);
  box-shadow: 0 2px 4px rgba(255, 61, 107, 0.45);
}
.dp-card__promo-cta {
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}

/* ---- Footer spacer ---- */
.dp-footer-spacer { height: calc(var(--dp-tabbar-h) + 16px); }

/* ---- Bottom tabbar ---- */
.dp-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: var(--dp-tabbar-h);
  padding: 4px 0 env(safe-area-inset-bottom);
  background: linear-gradient(180deg,
    rgba(35, 19, 85, 0.88),
    rgba(10, 5, 32, 0.96));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(196, 176, 255, 0.42);
  box-shadow: 0 -10px 28px rgba(32, 8, 60, 0.55);
}
.dp-tabbar::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 155, 231, 0.7), rgba(138, 229, 255, 0.6), transparent);
  pointer-events: none;
}
.dp-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  color: rgba(241, 250, 255, 0.78);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.dp-tab__ico {
  font-size: 20px;
  line-height: 1;
}
.dp-tab__ico img {
  width: 26px; height: 26px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(255, 213, 110, 0.2))
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55));
}
.dp-tab--active {
  color: var(--dp-coral);
  text-shadow: 0 0 10px rgba(255, 155, 231, 0.55), 0 1px 2px rgba(0, 0, 0, 0.65);
}
.dp-tab--active .dp-tab__ico img {
  filter:
    drop-shadow(0 0 14px rgba(255, 155, 231, 0.72))
    drop-shadow(0 0 10px rgba(138, 229, 255, 0.4))
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

/* Desktop breakpoint: constrain width, center, keep ocean bg */
@media (min-width: 720px) {
  .dp-top, .dp-hero, .dp-cats, .dp-winners, .dp-section, .dp-tabbar {
    max-width: 720px; margin-left: auto; margin-right: auto;
  }
  .dp-tabbar { left: auto; right: auto; }
}

/* H5 public home polish pass, 2026-04-22 */
.dp-top {
  min-height: 58px;
  padding: 8px 16px 7px;
  background:
    linear-gradient(180deg, rgba(8, 22, 47, 0.96), rgba(8, 18, 42, 0.88) 78%, rgba(8, 18, 42, 0));
  backdrop-filter: blur(14px);
}

.dp-brand__wordmark {
  height: 38px;
  max-width: 220px;
}

.dp-bell {
  width: 42px;
  height: 42px;
  font-size: 18px;
}

.dp-hero {
  min-height: 178px;
  margin: 12px 14px 14px;
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(2, 8, 28, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dp-hero__chara {
  width: 104px;
  height: 104px;
  margin-top: 0;
}

.dp-hero__title {
  font-size: 30px;
  line-height: 1.02;
}

.dp-hero__sub {
  max-width: 320px;
  margin: 7px auto 0;
  font-size: 13px;
  line-height: 1.45;
}

.dp-cats {
  gap: 2px;
  padding: 6px 8px 14px;
}

.dp-cat__iconwrap,
.dp-cat__icon {
  width: 46px;
  height: 46px;
}

.dp-cat__label {
  font-size: 11px;
  line-height: 1.2;
}

.dp-winners {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  overflow: visible;
  padding: 0 14px 16px;
}

.dp-winner {
  min-width: 0;
  min-height: 62px;
  flex: none;
  padding: 8px 10px;
  border-radius: 14px;
}

.dp-winner__img {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
}

.dp-winner__body {
  min-width: 0;
}

.dp-winner__who,
.dp-winner__what {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dp-winner__what {
  display: block;
  padding: 2px 0;
  background: none;
  color: var(--dp-ink-dim);
  font-size: 12px;
}

.dp-section {
  margin-inline: 14px;
}

.dp-section__head {
  padding: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(76, 198, 255, 0.16), rgba(255, 139, 216, 0.12)),
    rgba(12, 22, 55, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dp-grid {
  /* v5 (mtab-cinemagraph-v5): mobile pool grid 2-col → 3-col per owner mandate
     「下方的排列現在是 2 個 2 個排列 你覺得改成 3 或 4 如何」.
     414px viewport - 24 padding - 12 gap×2 = ~118px/card with 3 col (vs ~92 with 4 — too cramped). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
}

.dp-card {
  min-width: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(28, 21, 68, 0.92), rgba(10, 20, 47, 0.9));
}

.dp-card__media {
  aspect-ratio: 1 / 1;
}

.dp-card__tag {
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 11px;
  white-space: nowrap;
}

.dp-card__body {
  display: grid;
  gap: 4px;
  padding: 8px 10px 10px;
}

.dp-card__title {
  min-height: 2.7em;
  color: var(--dp-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dp-card__meta {
  color: var(--dp-ink-dim);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.dp-card__body .dp-card__price {
  padding: 0;
  font-size: 18px;
  line-height: 1.05;
}

.dp-tabbar {
  min-height: calc(66px + env(safe-area-inset-bottom));
}

.dp-tab__ico img {
  width: 28px;
  height: 28px;
}

.dp-site-music-toggle {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.06)),
    rgba(14, 24, 56, 0.76);
  color: rgba(255, 255, 255, 0.72);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.dp-site-music-toggle.is-active {
  border-color: rgba(135, 226, 255, 0.82);
  background: linear-gradient(135deg, #79e4ff, #ffe36f);
  color: #0b1730;
}

.dp-site-music-toggle:active {
  transform: scale(0.96);
}

.dp-site-music-toggle:focus-visible {
  outline: 2px solid rgba(125, 211, 252, 0.82);
  outline-offset: 3px;
}

.dp-me-topbar .dp-site-music-toggle {
  margin-left: auto;
}