/* ------------------------------------------------------------------
 * PopupNotice 定制补丁。在 f.css 之后加载，只覆盖容器表现，不改 f.css 本体。
 * 同优先级下后加载者胜；需要压过 f.js 写的行内 style 时才用 !important。
 * ------------------------------------------------------------------ */

/* 头像位。不传 icon 时 f.js 已不再生成，这里兜底防止浏览器缓存了旧 f.js。 */
.myuki-gcard_icon {
    display: none !important;
}

/* 悬浮球。关闭就是关闭，不留残留入口。 */
.myuki-gcard_mini {
    display: none !important;
}

/* 发布者名字降为眉标：公告的主角是网址，不是发布者。
   左对齐是为了和正文共用同一条纵向轴线——居中的标题配左对齐的正文会让版面散掉。 */
.myuki-gcard_box .myuki-gcard_title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #6b7079;
    text-align: left;
    margin-bottom: 12px;
    animation: none;
    -webkit-animation: none;
}

/* 正文容器交还排版权给内容本身。 */
.myuki-gcard_box .myuki-gcard_info {
    margin: 0;
    color: inherit;
    text-align: left;
    animation: none;
    -webkit-animation: none;
}

.myuki-gcard_box {
    background-color: #fff;
    padding: 26px 30px 22px;
    border-radius: 18px;
}

/* 按钮区。f.css 给按钮 hover 挂了一条无限循环的彩虹渐变动画，
   在一个「看完就关」的提示上又吵又跑 CPU，这里换成安静的实心态。 */
.myuki-gcard_box .myuki-gcard_btn-list {
    margin-top: 16px;
    padding: 0;
}

.myuki-gcard_box .myuki-gcard_btn {
    font-size: 14px;
    border-radius: 10px;
    transition: background-color .15s ease, color .15s ease;
}

.myuki-gcard_box .myuki-gcard_btn:hover {
    background-image: none;
    animation: none;
    -webkit-animation: none;
}

.myuki-gcard_box .myuki-gcard_btn.btn-close {
    background-color: #fff4f8;
    color: #d6005f;
    border: none;
}

.myuki-gcard_box .myuki-gcard_btn.btn-close:hover {
    background-color: #ffe4ef;
    color: #d6005f;
}

.myuki-gcard_box.darkmode .myuki-gcard_btn.btn-close {
    background-color: #3a2b35;
    color: #ff9ec4;
}

/* 推广计划入口（帮助链接配置为 btn-primary 的行）：
   顶栏的推广大按钮已下线，公告弹窗是它的新家，用主题粉渐变把它做成按钮组的视觉第一位。 */
.myuki-gcard_box .myuki-gcard_btn.btn-primary {
    background-color: #ff5f93;
    background-image: linear-gradient(135deg, #ff5f93 0%, #ff82ad 100%);
    color: #fff;
    font-weight: 700;
    border: none;
}

.myuki-gcard_box .myuki-gcard_btn.btn-primary::before {
    content: "★ ";
}

.myuki-gcard_box .myuki-gcard_btn.btn-primary:hover {
    background-image: linear-gradient(135deg, #ef477c 0%, #ff6fa0 100%);
    box-shadow: 0 6px 16px rgba(255, 95, 147, 0.35);
    animation: none;
    -webkit-animation: none;
}

/* 键盘可达性：f.css 只做了 hover，补上可见的聚焦环。 */
.myuki-gcard_box a:focus-visible {
    outline: 2px solid #d6005f;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ------------------------------------------------------------------
 * 移动端。f.css 原来在 max-width:768px 下把弹窗写成
 *   width:80%; height:calc(100vh - 10%); overflow-y:scroll
 * 一条短公告被拉成满屏高的空盒，加上 32px 内边距后内容区只剩 248px，
 * 中文被迫每行 6-7 字。这里改成贴边留白 + 高度随内容。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
    .myuki-gcard_box {
        min-width: 0;
        width: calc(100% - 28px);
        /* 覆盖 f.js 写在元素上的行内 max-width */
        max-width: 420px !important;
        height: auto;
        max-height: calc(100vh - 40px);
        max-height: calc(100dvh - 40px);
        overflow-y: auto;
        padding: 22px 20px 18px;
        border-radius: 16px;
    }

    .myuki-gcard_box .myuki-gcard_title {
        margin-bottom: 14px;
    }
}

/* 尊重系统的「减少动态效果」设置。
   这里必须用「极短时长」而不是 animation:none —— f.js 的 close() 是靠监听
   animationend 才给遮罩加 .hidden 的，把动画整个去掉会导致事件永不触发，
   开了减少动态效果的用户将永远关不掉这个弹窗。 */
@media (prefers-reduced-motion: reduce) {

    .myuki-gcard_mask,
    .myuki-gcard_box,
    .myuki-gcard_box.closed,
    .myuki-gcard_title,
    .myuki-gcard_info,
    .myuki-gcard_btn {
        animation-duration: .01ms !important;
        -webkit-animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        -webkit-animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}