/* ==========================================================================
   CBON Stickers — 角色貼紙系統
   - 通用 API（.cbon-sticker + 尺寸/位置變體）供全站頁面使用
   - 首頁 index.html 採用 v2 設計：hero 吉祥物、跨邊貼紙、行內貼紙
   - pointer-events: none 確保不擋點擊
   - 響應式：手機縮小但仍可見；prefers-reduced-motion 停用動畫
   ========================================================================== */

.cbon-sticker {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 0;
    display: block;
    height: auto; /* 保持原圖比例，避免寬度被 clamp 覆寫後變形 */
    filter: drop-shadow(0 6px 16px rgba(15, 17, 38, 0.18));
    opacity: 0.95;
    will-change: transform;
}

/* 確保貼紙的父容器是相對定位，能讓絕對定位生效 */
.cbon-sticker-host {
    position: relative;
    overflow: hidden;
}

/* 內容層確保在貼紙之上 */
.cbon-sticker-host > *:not(.cbon-sticker) {
    position: relative;
    z-index: 1;
}

/* 通用尺寸 — clamp 確保不會過大或過小 */
.cbon-sticker--sm { width: clamp(72px, 12vw, 110px); }
.cbon-sticker--md { width: clamp(96px, 14vw, 150px); }
.cbon-sticker--lg { width: clamp(120px, 16vw, 200px); }
.cbon-sticker--xl { width: clamp(150px, 18vw, 240px); }

/* 位置變體 */
.cbon-sticker--top-right     { top: 12px;    right: 12px;   }
.cbon-sticker--top-left      { top: 12px;    left: 12px;    }
.cbon-sticker--bottom-right  { bottom: 12px; right: 12px;   }
.cbon-sticker--bottom-left   { bottom: 12px; left: 12px;    }
.cbon-sticker--center-right  { top: 50%;     right: 12px;   transform: translateY(-50%); }
.cbon-sticker--center-left   { top: 50%;     left: 12px;    transform: translateY(-50%); }

/* ==========================================================================
   響應式（通用頁面）：手機與平板縮小，避免擋內容
   ========================================================================== */

@media (max-width: 480px) {
    .cbon-sticker--xl { width: 64px;  }
    .cbon-sticker--lg { width: 56px;  }
    .cbon-sticker--md { width: 48px;  }
    .cbon-sticker--sm { width: 40px;  }
    .cbon-sticker { opacity: 0.85; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .cbon-sticker--xl { width: 110px; }
    .cbon-sticker--lg { width: 95px;  }
    .cbon-sticker--md { width: 80px;  }
    .cbon-sticker--sm { width: 65px;  }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .cbon-sticker--xl { width: 160px; }
    .cbon-sticker--lg { width: 130px; }
    .cbon-sticker--md { width: 105px; }
    .cbon-sticker--sm { width: 85px;  }
}

@media (min-width: 1200px) {
    .cbon-sticker--xl { width: 220px; }
    .cbon-sticker--lg { width: 180px; }
    .cbon-sticker--md { width: 150px; }
    .cbon-sticker--sm { width: 120px; }
}

/* ==========================================================================
   其他頁面微調（ai-chat / 商店 hero / codes / speedtest / hk-map / community）
   ========================================================================== */

/* ai-chat.html 歡迎區 */
.welcome-section { position: relative; overflow: visible; }
.welcome-section .cbon-sticker--top-right { top: -10px; right: -6px; }

/* esim-shop.html / recharge-shop.html hero-banner */
.hero-banner { position: relative; overflow: hidden; }
.hero-banner .cbon-sticker { opacity: 0.92; }

/* codes.html hero-panel */
.hero-panel { position: relative; overflow: hidden; }
.hero-panel .cbon-sticker--top-right { top: 12px; right: 12px; }
.hero-panel .cbon-sticker--bottom-right { bottom: 12px; right: 12px; opacity: 0.88; }

/* speedtest.html app 區 */
.app .cbon-sticker--top-right { top: 70px; right: 12px; }

/* hk-map.html top-bar/map-controls 區 */
.map-controls { position: relative; }
.map-controls .cbon-sticker--top-right { top: 8px; right: 12px; }

/* community.html topic-list 區 */
.main-content { position: relative; }
.main-content .cbon-sticker--top-right { top: 80px; right: 14px; }

/* ==========================================================================
   Fixed 變體：固定於視窗，不隨內容滾動（ai-chat / hk-map 使用）
   ========================================================================== */
.cbon-sticker--fixed {
    position: fixed;
    top: 80px;
    right: 12px;
    z-index: 50;
}

@media (max-width: 480px) {
    .cbon-sticker--fixed { width: 56px; top: 64px; right: 8px; opacity: 0.85; }
}

/* ==========================================================================
   首頁 index.html v2 — 吉祥物融入式設計
   1. hero-mascot：prize-data 成為 hero 排版的一部分（光暈 + 漂浮）
   2. edge 貼紙：橫跨版塊上緣，像真的貼紙貼在卡片邊上（微傾斜）
   3. inline 貼紙：直接排在標題列內，不佔位不遮擋
   ========================================================================== */

/* --- 1. Hero 吉祥物（PRIZE DATA）--- */
.hero-mascot-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-mascot-copy {
    min-width: 0;
}

.hero-mascot {
    position: relative;
    flex-shrink: 0;
    width: clamp(84px, 13vw, 148px);
}

/* 吉祥物背後的柔和光暈，讓貼紙融入 hero 底色 */
.hero-mascot::before {
    content: "";
    position: absolute;
    inset: 8% 2% 0;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%,
        var(--cbon-primary-100, #e0e7ff) 0%,
        var(--cbon-primary-50, #eef2ff) 55%,
        transparent 72%);
}

.hero-mascot img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(15, 17, 38, 0.2));
    animation: cbon-sticker-float 5s ease-in-out infinite;
}

@keyframes cbon-sticker-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-7px) rotate(1.5deg); }
}

/* --- 2. 跨邊貼紙（貼在版塊上緣，一半在外）--- */
.cbon-sticker--edge-tr,
.cbon-sticker--edge-tl,
.cbon-sticker--peel-tl {
    z-index: 2;
    opacity: 1;
    width: clamp(84px, 10vw, 116px);
}

.cbon-sticker--edge-tr { top: -32px; right: 10px; transform: rotate(5deg); }
.cbon-sticker--edge-tl { top: -32px; left: 10px;  transform: rotate(-5deg); }

/* 種植大師 banner 左上角（WIFI TURTLE），壓在圖片邊角上 */
.cbon-sticker--peel-tl {
    top: -12px;
    left: 10px;
    transform: rotate(-7deg);
    z-index: 3;
}

/* 較小尺寸變體（頁尾安全提醒用） */
.cbon-sticker--edge-sm { width: clamp(60px, 8vw, 92px); }

/* 跨邊貼紙需要宿主可見溢出（覆寫 .cbon-sticker-host 的 overflow: hidden） */
.section.cbon-sticker-host,
.section .shell.cbon-sticker-host,
.referral-cta.cbon-sticker-host,
.cbon-trust-badges.cbon-sticker-host,
.hero-feature-banner.cbon-sticker-host {
    overflow: visible;
}

/* 頁尾安全提醒：作為 SERVER TECHS 貼紙的定位宿主；右側留白避免貼紙壓字 */
.cbon-security-disclaimer {
    position: relative;
    padding-right: 108px;
}
@media (max-width: 480px) {
    .cbon-security-disclaimer { padding-right: 62px; }
}

/* --- 3. 行內貼紙（排在標題列，非絕對定位）--- */
.section-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cbon-sticker-inline {
    flex-shrink: 0;
    align-self: center;
    width: 52px;
    height: auto;
    transform: rotate(4deg);
    filter: drop-shadow(0 4px 10px rgba(15, 17, 38, 0.18));
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* --- 首頁貼紙響應式 --- */
@media (max-width: 480px) {
    .hero-mascot { width: 76px; }
    .hero-mascot-row { gap: 12px; }
    .cbon-sticker--edge-tr,
    .cbon-sticker--edge-tl { width: 62px; top: -20px; }
    .cbon-sticker--edge-tr { right: 8px; }
    .cbon-sticker--edge-tl { left: 8px; }
    .cbon-sticker--peel-tl { width: 60px; top: -10px; left: 8px; }
    .cbon-sticker--edge-sm { width: 50px; }
    .cbon-sticker-inline { width: 38px; }
    .cbon-trust-badges .cbon-sticker--edge-tr { width: 54px; top: -22px; }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hero-mascot { width: 100px; }
    .cbon-sticker--edge-tr,
    .cbon-sticker--edge-tl,
    .cbon-sticker--peel-tl { width: 86px; }
    .cbon-sticker--edge-sm { width: 66px; }
    .cbon-sticker-inline { width: 44px; }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .hero-mascot { width: 124px; }
    .cbon-sticker--edge-tr,
    .cbon-sticker--edge-tl,
    .cbon-sticker--peel-tl { width: 106px; }
    .cbon-sticker--edge-sm { width: 78px; }
    .cbon-sticker-inline { width: 48px; }
}

/* ==========================================================================
   減少動畫偏好：停用所有貼紙動畫
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cbon-sticker { transition: none; }
    .hero-mascot img { animation: none; }
}