/**
 * frost-border.css —— 游戏窗口边框结冰
 *
 * 由 js/frost-border.js 往 #myFlashBox 里注入 #frost-border 元素后生效。
 * 元素在所有版本都会创建，但 JS 会把它的 opacity 压到 0，平时完全看不见；
 * 只有触发时（聊天口令「冰天雪地」/「极度冰点」，或手动 MoleFrost.on()）才淡入。
 *
 * 兼容性说明：本项目要跑 Flash，目标浏览器多为老版 Chromium，因此这里刻意避开
 *   - inset 简写（Chrome 87+）      → 改用 top/right/bottom/left
 *   - background 简写里嵌 var()     → 改用 background-* 长写法
 * 只保留 opacity 上的 var()，并在前面留了不带 var 的兜底声明。
 *
 * 调整浓淡：用 MoleFrost.setLevel(0~1)。下面的 opacity 只是没 JS 时的兜底，
 *           JS 一跑就会写行内 opacity 盖掉它，改这里不生效。
 * 调整结冰进深：改 background-size 里那 4 条边的 px 值。
 */

#frost-border {
    --frost-level: 1;

    position: absolute;
    pointer-events: none;  /* 绝不拦截鼠标键盘，Flash 操作不受影响 */
    z-index: 60;           /* 在 particles 的 overlay(50)/frame(55) 之上——霜在“玻璃”最外层 */
    border-radius: 3px;

    opacity: 1;                      /* 兜底：老引擎不认下面那行就用这个 */
    opacity: var(--frost-level, 1);
    -webkit-transition: opacity .8s ease;
    transition: opacity .8s ease;
}

/* 霜花本体：四角霜团 + 边缘零星霜斑 + 四条边白雾，全部用渐变叠加，不依赖图片。
   图层顺序 = 先写的画在上面：角 > 斑 > 边雾。 */
#frost-border::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;

    background-image:
        /* 四角霜团（最厚，从角上往里爬） */
        radial-gradient(120px 92px at 0%   0%,   rgba(226, 244, 255, .62), rgba(226, 244, 255, 0) 70%),
        radial-gradient(118px 88px at 100% 0%,   rgba(226, 244, 255, .58), rgba(226, 244, 255, 0) 70%),
        radial-gradient(130px 96px at 0%   100%, rgba(226, 244, 255, .55), rgba(226, 244, 255, 0) 70%),
        radial-gradient(126px 94px at 100% 100%, rgba(226, 244, 255, .60), rgba(226, 244, 255, 0) 70%),

        /* 边缘零星霜斑：打破四条直线的规整感，看着才像自然结的霜 */
        radial-gradient(70px 34px at 28%  0%,   rgba(233, 247, 255, .42), rgba(233, 247, 255, 0) 72%),
        radial-gradient(56px 27px at 62%  0%,   rgba(233, 247, 255, .34), rgba(233, 247, 255, 0) 72%),
        radial-gradient(64px 30px at 41%  100%, rgba(233, 247, 255, .38), rgba(233, 247, 255, 0) 72%),
        radial-gradient(52px 26px at 78%  100%, rgba(233, 247, 255, .30), rgba(233, 247, 255, 0) 72%),
        radial-gradient(30px 66px at 0%   44%,  rgba(233, 247, 255, .36), rgba(233, 247, 255, 0) 72%),
        radial-gradient(28px 60px at 100% 67%,  rgba(233, 247, 255, .33), rgba(233, 247, 255, 0) 72%),

        /* 四条边的整体白雾 */
        linear-gradient(to bottom, rgba(214, 238, 255, .50), rgba(214, 238, 255, 0) 62%),
        linear-gradient(to top,    rgba(214, 238, 255, .46), rgba(214, 238, 255, 0) 62%),
        linear-gradient(to right,  rgba(214, 238, 255, .44), rgba(214, 238, 255, 0) 62%),
        linear-gradient(to left,   rgba(214, 238, 255, .44), rgba(214, 238, 255, 0) 62%);

    background-position:
        0 0, 0 0, 0 0, 0 0,
        0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
        center top, center bottom, left center, right center;

    /* 最后四个值 = 四条边的结冰进深，想加厚就调大 */
    background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 78px, 100% 70px, 62px 100%, 62px 100%;

    background-repeat: no-repeat;
}

/* 冰层厚度：一道细亮边 + 向内的冷色晕 */
#frost-border::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0  1px rgba(236, 250, 255, .70),
        inset 0 0 0  3px rgba(168, 214, 242, .26),
        inset 0 0 30px  rgba(150, 200, 232, .34),
        inset 0 0 72px  rgba(120, 178, 220, .18);
}

/* 全屏时画面大得多，边缘进深跟着放大，否则一圈霜会细得看不见 */
.browser-fullscreen #frost-border::before {
    background-size:
        100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%,
        100% 130px, 100% 120px, 150px 100%, 150px 100%;
}

@media (prefers-reduced-motion: reduce) {
    #frost-border {
        -webkit-transition: none;
        transition: none;
    }
}