/* =========================================================
   独立样式隔离
========================================================= */
#navy-zodiac-code-2026,
#navy-zodiac-code-2026 *,
#navy-zodiac-code-2026 *::before,
#navy-zodiac-code-2026 *::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#navy-zodiac-code-2026{
    --nzc-navy:#3a0710;
    --nzc-navy-light:#6b1220;
    --nzc-blue:#8f1d32;
    --nzc-cyan:#ff8fa3;
    --nzc-cyan-light:#ffd6dc;
    --nzc-gold:#ffd66b;
    --nzc-gold-dark:#b87812;
    --nzc-white:#ffffff;
    --nzc-red:#ff4c4c;
    --nzc-hit-red:#e71927;
    --nzc-hit-red-dark:#8c0710;
    --nzc-hit-gold:#ffe682;
    --nzc-hit-gold-light:#fff8cf;

    width:100%;
    max-width:720px;
    margin:8px auto;
    padding:5px;

    font-family:,"Adobe黑体","黑体","宋体",Arial;}


/* =========================================================
   主体外框
========================================================= */
#navy-zodiac-code-2026 .nzc-shell{
    position:relative;
    width:100%;
    overflow:hidden;
    padding:2px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(37,126,218,.38) 0%,
            rgba(58,7,16,.2) 36%,
            transparent 62%),
        linear-gradient(145deg,#170207 0%,#641426 48%,#21040b 100%);

    border:2px solid var(--nzc-gold);
    border-radius:15px;

    box-shadow:
        0 0 0 3px rgba(3,20,47,.95),
        0 0 0 4px rgba(255,214,107,.26),
        0 8px 18px rgba(0,0,0,.34),
        inset 0 0 18px rgba(255,80,110,.12);
}

/* 背景装饰网格 */
#navy-zodiac-code-2026 .nzc-shell::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;

    background-image:
        linear-gradient(rgba(255,120,140,.12) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,120,140,.12) 1px,transparent 1px);

    background-size:32px 32px;
}

/* 背景光晕 */
#navy-zodiac-code-2026 .nzc-shell::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-110px;
    top:-120px;
    border-radius:50%;
    pointer-events:none;

    background:radial-gradient(
        circle,
        rgba(255,120,140,.28) 0%,
        rgba(255,120,140,.08) 40%,
        transparent 70%
    );
}

/* =========================================================
   顶部标题
========================================================= */
#navy-zodiac-code-2026 .nzc-header{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:13px;
    padding:15px 10px 13px;

    background:
        linear-gradient(90deg,
            rgba(45,5,14,.92),
            rgba(130,25,48,.96),
            rgba(45,5,14,.92));

    border:1px solid rgba(255,214,107,.78);
    border-radius:12px;

    box-shadow:
        inset 0 0 18px rgba(255,120,140,.16),
        0 5px 13px rgba(0,0,0,.32);
}

#navy-zodiac-code-2026 .nzc-header::before,
#navy-zodiac-code-2026 .nzc-header::after{
    content:"";
    position:absolute;
    top:50%;
    width:16%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--nzc-gold),
        transparent
    );
}

#navy-zodiac-code-2026 .nzc-header::before{
    left:3%;
}

#navy-zodiac-code-2026 .nzc-header::after{
    right:3%;
}

#navy-zodiac-code-2026 .nzc-title{
    font-size:31px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:5px;

    color:var(--nzc-gold);

    text-shadow:
        0 2px 0 #714307,
        0 0 8px rgba(255,214,107,.78),
        0 0 18px rgba(255,120,140,.28);
}

#navy-zodiac-code-2026 .nzc-subtitle{
    margin-top:7px;
    font-size:15px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:3px;
    color:var(--nzc-cyan-light);
}

/* =========================================================
   资料卡片列表
========================================================= */
#navy-zodiac-code-2026 .nzc-list{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr;
    gap:11px;
}

/* 单期卡片 */
#navy-zodiac-code-2026 .nzc-card{
    position:relative;
    display:grid;
    grid-template-columns:1.28fr .72fr .72fr;
    align-items:center;
    min-height:112px;
    overflow:hidden;

    padding:11px 15px;

    background:
        linear-gradient(110deg,
            rgba(54,8,18,.98) 0%,
            rgba(105,18,36,.96) 50%,
            rgba(42,5,13,.98) 100%);

    border:1px solid rgba(255,150,160,.72);
    border-radius:13px;

    box-shadow:
        inset 0 0 12px rgba(255,90,110,.10),
        0 4px 10px rgba(0,0,0,.24);
}

/* 卡片左侧金色线 */
#navy-zodiac-code-2026 .nzc-card::before{
    content:"";
    position:absolute;
    left:0;
    top:12%;
    width:4px;
    height:76%;
    border-radius:0 5px 5px 0;

    background:linear-gradient(
        180deg,
        transparent,
        var(--nzc-gold),
        #fff2aa,
        var(--nzc-gold),
        transparent
    );

    box-shadow:0 0 12px rgba(255,214,107,.85);
}

/* 卡片背景斜光 */
#navy-zodiac-code-2026 .nzc-card::after{
    content:"";
    position:absolute;
    width:140px;
    height:260px;
    right:18%;
    top:-85px;
    transform:rotate(28deg);
    pointer-events:none;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.05),
        transparent
    );
}

/* =========================================================
   期数区域
========================================================= */
#navy-zodiac-code-2026 .nzc-period{
    position:relative;
    z-index:2;
    padding-left:7px;
}

#navy-zodiac-code-2026 .nzc-year{
    display:block;
    margin-bottom:5px;

    font-size:17px;
    line-height:1.2;
    font-weight:700;
    letter-spacing:1px;

    color:var(--nzc-cyan-light);
}

#navy-zodiac-code-2026 .nzc-period-number{
    display:inline-flex;
    align-items:center;
    padding:6px 13px;

    font-size:24px;
    line-height:1;
    font-weight:900;
    letter-spacing:2px;

    color:var(--nzc-gold);

    background:linear-gradient(
        90deg,
        rgba(255,214,107,.10),
        rgba(255,214,107,.2),
        rgba(255,214,107,.10)
    );

    border-left:3px solid var(--nzc-gold);
    border-right:3px solid var(--nzc-gold);
    border-radius:6px;

    text-shadow:
        0 1px 0 #523000,
        0 0 8px rgba(255,214,107,.55);
}

/* =========================================================
   炫酷圆圈
========================================================= */
#navy-zodiac-code-2026 .nzc-ring-wrap{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
}

/* 外部动态光圈 */
#navy-zodiac-code-2026 .nzc-ring{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;

    width:84px;
    height:84px;
    border-radius:50%;

    background:
        radial-gradient(circle at 35% 25%,
            rgba(255,255,255,.28),
            transparent 28%),
        radial-gradient(circle,
            #8b1e35 0%,
            #5a1020 60%,
            #21040b 100%);

    border:3px solid var(--nzc-gold);

    box-shadow:
        0 0 0 4px rgba(255,150,160,.10),
        0 0 9px rgba(255,80,110,.48),
        inset 0 0 9px rgba(0,0,0,.62);
}

/* 旋转虚线圆环 */
#navy-zodiac-code-2026 .nzc-ring::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:50%;

    border:2px dashed rgba(84,220,255,.82);
    opacity:.88;
}

/* 金色小光点 */
#navy-zodiac-code-2026 .nzc-ring::after{
    content:"";
    position:absolute;
    top:-10px;
    left:50%;
    width:9px;
    height:9px;
    border-radius:50%;

    background:#fff7bd;

    box-shadow:
        0 0 4px rgba(255,255,255,.85),
        0 0 8px rgba(255,214,107,.72);
}

/* 生肖圆圈 */
#navy-zodiac-code-2026 .nzc-zodiac{
    font-size:43px;
    line-height:1;
    font-weight:900;
    color:var(--nzc-gold);

    text-shadow:
        0 2px 0 #6b3f00,
        0 0 9px rgba(255,214,107,.66);
}

/* 号码圆圈 */
#navy-zodiac-code-2026 .nzc-code{
    font-family:Arial,"Microsoft YaHei",sans-serif;
    font-size:39px;
    line-height:1;
    font-weight:900;

    color:#ffffff;

    text-shadow:
        0 2px 0 #00132f,
        0 0 9px rgba(84,220,255,.96);
}

/* 第三个卡片使用不同光效 */
#navy-zodiac-code-2026 .nzc-card:nth-child(3) .nzc-ring{
    box-shadow:
        0 0 0 4px rgba(255,214,107,.10),
        0 0 9px rgba(255,214,107,.48),
        inset 0 0 9px rgba(0,0,0,.62);
}

/* =========================================================
   中奖号码升级：红金高亮（静态低负载）
========================================================= */
#navy-zodiac-code-2026 .nzc-card.is-winner{
    border-color:rgba(255,230,130,.92);
    background:
        linear-gradient(110deg,
            rgba(38,8,18,.98) 0%,
            rgba(91,14,28,.96) 50%,
            rgba(24,6,18,.98) 100%);
    box-shadow:
        inset 0 0 12px rgba(255,214,107,.10),
        0 4px 10px rgba(0,0,0,.25);
}

#navy-zodiac-code-2026 .nzc-ring.is-hit{
    background:
        radial-gradient(circle at 34% 24%,
            rgba(255,255,255,.72) 0 7%,
            transparent 8%),
        radial-gradient(circle,
            #ff5360 0%,
            var(--nzc-hit-red) 52%,
            var(--nzc-hit-red-dark) 100%);
    border-color:var(--nzc-hit-gold-light);
    box-shadow:
        0 0 0 4px rgba(255,230,130,.18),
        0 0 12px rgba(255,77,88,.58),
        inset 0 0 10px rgba(85,0,7,.58);
}

#navy-zodiac-code-2026 .nzc-ring.is-hit::before{
    border:2px solid var(--nzc-hit-gold);
    opacity:1;
}

#navy-zodiac-code-2026 .nzc-ring.is-hit::after{
    content:"中";
    top:-10px;
    right:-9px;
    left:auto;
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #fff5b7;
    background:linear-gradient(180deg,#fff3a4,#ffc73e);
    color:#a20b13;
    font-family:"KaiTi","STKaiti","楷体",serif;
    font-size:16px;
    font-weight:900;
    line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,.28);
}

#navy-zodiac-code-2026 .nzc-ring.is-hit .nzc-zodiac,
#navy-zodiac-code-2026 .nzc-ring.is-hit .nzc-code{
    color:#ffffff;
    text-shadow:
        0 2px 0 #76040b,
        0 0 5px rgba(255,238,158,.72);
}

/* =========================================================
   底部链接区域
========================================================= */
#navy-zodiac-code-2026 .nzc-action{
    position:relative;
    z-index:2;
    display:block;
    overflow:hidden;

    margin-top:13px;
    padding:14px 12px 13px;

    color:inherit;
    text-align:center;
    text-decoration:none;

    background:
        linear-gradient(105deg,
            #430813 0%,
            #9b1e38 45%,
            #701326 70%,
            #32050d 100%);

    border:2px solid var(--nzc-gold);
    border-radius:13px;

    box-shadow:
        0 0 8px rgba(255,120,140,.20),
        inset 0 0 10px rgba(255,150,160,.10),
        0 4px 10px rgba(0,0,0,.28);

    transition:
        transform .18s ease,
        border-color .18s ease;
}

#navy-zodiac-code-2026 .nzc-action:hover{
    transform:translateY(-2px);
    border-color:#fff2a2;

    box-shadow:
        0 0 21px rgba(84,220,255,.58),
        0 0 13px rgba(255,214,107,.32),
        inset 0 0 22px rgba(255,120,140,.16),
        0 9px 20px rgba(0,0,0,.4);
}

#navy-zodiac-code-2026 .nzc-action:active{
    transform:scale(.985);
}

/* 链接扫光 */
#navy-zodiac-code-2026 .nzc-action::before{
    content:"";
    position:absolute;
    top:-60%;
    left:-35%;
    width:24%;
    height:220%;
    transform:rotate(24deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.3),
        transparent
    );

    display:none;
}

#navy-zodiac-code-2026 .nzc-action-title{
    position:relative;
    z-index:2;
    display:block;

    margin-bottom:7px;

    font-size:22px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:2px;

    color:var(--nzc-gold);

    text-shadow:
        0 1px 0 #5d3600,
        0 0 8px rgba(255,214,107,.52);
}

#navy-zodiac-code-2026 .nzc-action-button{
    position:relative;
    z-index:2;
    display:inline-block;

    margin-bottom:8px;
    padding:7px 22px;

    font-size:20px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:2px;

    color:#04152f;

    background:linear-gradient(
        180deg,
        #f8ffff 0%,
        #8deaff 50%,
        #35bce5 100%
    );

    border:1px solid #d7f9ff;
    border-radius:30px;

    box-shadow:
        0 0 12px rgba(84,220,255,.88),
        inset 0 2px 3px rgba(255,255,255,.72);

    animation:none;
}

#navy-zodiac-code-2026 .nzc-action-line{
    position:relative;
    z-index:2;
    display:block;

    margin:3px 0;

    font-size:16px;
    line-height:1.45;
    font-weight:700;
    letter-spacing:1px;

    color:#e7faff;
}

#navy-zodiac-code-2026 .nzc-action-note{
    color:#9feaff;
    font-size:14px;
}

#navy-zodiac-code-2026 .nzc-app{
    position:relative;
    z-index:2;
    display:inline-block;

    margin-top:8px;
    padding:7px 19px;

    font-size:18px;
    line-height:1.25;
    font-weight:900;

    color:#ffffff;

    background:linear-gradient(90deg,#d4202f,#ff4c4c,#d4202f);
    border:1px solid #ffafb5;
    border-radius:7px;

    box-shadow:
        0 0 11px rgba(255,76,76,.62),
        inset 0 1px 2px rgba(255,255,255,.34);
}

/* ===============================
   高级动态生肖圈效果
=============================== */

/* 主圈呼吸光 */
#navy-zodiac-code-2026 .nzc-ring{
    animation:
        nzcPulse 2.8s infinite ease-in-out;
}


/* 外层虚线旋转 */
#navy-zodiac-code-2026 .nzc-ring::before{
    animation:
        nzcRotate 6s linear infinite;
}


/* 顶部光点绕圈 */
#navy-zodiac-code-2026 .nzc-ring::after{
    animation:
        nzcDotMove 3s linear infinite;
}


/* 命中红圈加强 */
#navy-zodiac-code-2026 .nzc-ring.is-hit{
    animation:
        nzcHitGlow 1.8s infinite ease-in-out;
}


/* 中字徽章跳动 */
#navy-zodiac-code-2026 .nzc-ring.is-hit::after{
    animation:
        nzcBadge 1.5s infinite ease-in-out;
}


/* 外圈旋转 */
@keyframes nzcRotate{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* 呼吸效果 */
@keyframes nzcPulse{

    0%,100%{
        transform:scale(1);
        filter:brightness(1);
    }

    50%{
        transform:scale(1.06);
        filter:brightness(1.25);
    }

}


/* 光点移动 */
@keyframes nzcDotMove{

    0%{
        transform:
        translateX(-50%)
        rotate(0deg);
    }

    50%{
        box-shadow:
        0 0 15px #fff,
        0 0 25px #ffd66b;
    }

    100%{
        transform:
        translateX(-50%)
        rotate(360deg);
    }

}


/* 中奖红圈发光 */
@keyframes nzcHitGlow{

    0%,100%{

        box-shadow:
        0 0 0 4px rgba(255,230,130,.18),
        0 0 12px rgba(255,77,88,.55),
        inset 0 0 10px rgba(85,0,7,.58);

    }


    50%{

        box-shadow:
        0 0 0 8px rgba(255,230,130,.25),
        0 0 30px rgba(255,80,90,.95),
        inset 0 0 18px rgba(255,220,100,.5);

    }

}


/* 中徽章动画 */
@keyframes nzcBadge{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

}


/* 手机减少动画保护 */
@media (prefers-reduced-motion:reduce){

#navy-zodiac-code-2026 .nzc-ring,
#navy-zodiac-code-2026 .nzc-ring::before,
#navy-zodiac-code-2026 .nzc-ring::after{
    animation:none;
}

}

/* =========================================================
   手机端适配
========================================================= */
@media screen and (max-width:620px){
    #navy-zodiac-code-2026{
        padding:3px;
    }

    #navy-zodiac-code-2026 .nzc-shell{
        padding:0px;
        border-radius:12px;
    }

    #navy-zodiac-code-2026 .nzc-header{
        padding:12px 6px 11px;
        margin-bottom:9px;
    }

    #navy-zodiac-code-2026 .nzc-title{
        font-size:25px;
        letter-spacing:3px;
    }

    #navy-zodiac-code-2026 .nzc-subtitle{
        font-size:13px;
        letter-spacing:1px;
    }

    #navy-zodiac-code-2026 .nzc-list{
        gap:8px;
    }

    #navy-zodiac-code-2026 .nzc-card{
        grid-template-columns:1.3fr .7fr .7fr;
        min-height:94px;
        padding:9px 7px;
    }

    #navy-zodiac-code-2026 .nzc-year{
        font-size:14px;
    }

    #navy-zodiac-code-2026 .nzc-period-number{
        padding:5px 8px;
        font-size:19px;
        letter-spacing:1px;
    }

    #navy-zodiac-code-2026 .nzc-ring{
        width:65px;
        height:65px;
        border-width:2px;
    }

    #navy-zodiac-code-2026 .nzc-ring::before{
        inset:-6px;
        border-width:1px;
    }

    #navy-zodiac-code-2026 .nzc-ring::after{
        width:7px;
        height:7px;
        top:-8px;
    }

    #navy-zodiac-code-2026 .nzc-zodiac{
        font-size:34px;
    }

    #navy-zodiac-code-2026 .nzc-code{
        font-size:30px;
    }

    #navy-zodiac-code-2026 .nzc-action{
        margin-top:10px;
        padding:12px 7px;
    }

    #navy-zodiac-code-2026 .nzc-action-title{
        font-size:18px;
        letter-spacing:1px;
    }

    #navy-zodiac-code-2026 .nzc-action-button{
        padding:6px 16px;
        font-size:17px;
    }

    #navy-zodiac-code-2026 .nzc-action-line{
        font-size:14px;
        letter-spacing:0;
    }

    #navy-zodiac-code-2026 .nzc-action-note{
        font-size:12px;
    }

    #navy-zodiac-code-2026 .nzc-app{
        font-size:16px;
        padding:6px 12px;
    }
    #navy-zodiac-code-2026 .nzc-ring.is-hit::after{
        top:-8px;
        right:-7px;
        width:22px;
        height:22px;
        font-size:13px;
    }
}

@media screen and (max-width:380px){
    #navy-zodiac-code-2026 .nzc-card{
        grid-template-columns:1.36fr .64fr .64fr;
        min-height:88px;
    }

    #navy-zodiac-code-2026 .nzc-title{
        font-size:22px;
    }

    #navy-zodiac-code-2026 .nzc-year{
        font-size:12px;
    }

    #navy-zodiac-code-2026 .nzc-period-number{
        font-size:17px;
    }

    #navy-zodiac-code-2026 .nzc-ring{
        width:57px;
        height:57px;
    }

    #navy-zodiac-code-2026 .nzc-zodiac{
        font-size:29px;
    }

    #navy-zodiac-code-2026 .nzc-code{
        font-size:26px;
    }
}

/* 减少动画模式 */
@media (prefers-reduced-motion:reduce){
    #navy-zodiac-code-2026 .nzc-ring::before,
    #navy-zodiac-code-2026 .nzc-action::before,
    #navy-zodiac-code-2026 .nzc-action-button{
        animation:none;
    }
}

/* =========================================================
   头部高级宫灯升级版
   独立隔离 不污染后台
========================================================= */

#navy-zodiac-code-2026 .nzc-header{
    position:relative;
    overflow:hidden;
}

#navy-zodiac-code-2026 .nzc-lantern{
    position:absolute;
    top:5px;
    width:58px;
    height:78px;
    z-index:5;
    animation:nzcLantern 3.5s ease-in-out infinite;
}

#navy-zodiac-code-2026 .nzc-lantern-left{
    left:12px;
}

#navy-zodiac-code-2026 .nzc-lantern-right{
    right:12px;
}

#navy-zodiac-code-2026 .nzc-lantern::before{
    content:"";
    position:absolute;
    left:9px;
    top:15px;
    width:40px;
    height:48px;
    border-radius:50%;
    background:
    radial-gradient(circle at 35% 25%,
    rgba(255,255,255,.8),
    transparent 18%),
    linear-gradient(180deg,
    #ffef9a 0%,
    #ff4040 25%,
    #c40018 70%,
    #72000c 100%);
    border:3px solid #ffd66b;
    box-shadow:
    0 0 10px #ffd66b,
    0 0 25px rgba(255,50,50,.85),
    inset 0 0 15px rgba(255,255,255,.35);
}

#navy-zodiac-code-2026 .nzc-lantern::after{
    content:"";
    position:absolute;
    left:18px;
    top:5px;
    width:22px;
    height:10px;
    border-radius:6px;
    background:
    linear-gradient(90deg,
    #b87812,
    #fff0a0,
    #b87812);
    box-shadow:
    0 67px 0 #ffd66b,
    0 0 8px #ffd66b;
}

#navy-zodiac-code-2026 .nzc-lantern span{
    position:absolute;
    left:26px;
    top:62px;
    width:7px;
    height:18px;
    background:
    linear-gradient(90deg,
    #ffd66b,
    #ff8c00,
    #ffd66b);
    border-radius:0 0 5px 5px;
    box-shadow:
    0 0 10px rgba(255,214,107,.95);
}

#navy-zodiac-code-2026 .nzc-lantern span::before{
    content:"福";
    position:absolute;
    left:-7px;
    top:-38px;
    width:21px;
    height:21px;
    font-size:16px;
    line-height:21px;
    text-align:center;
    font-family:"KaiTi","STKaiti","楷体";
    color:#ffe682;
    text-shadow:
    0 0 5px #fff,
    0 0 10px #ffd66b;
}

@keyframes nzcLantern{
    0%,100%{
        transform:rotate(-4deg);
    }
    50%{
        transform:rotate(4deg);
    }
}

@media screen and (max-width:620px){
    #navy-zodiac-code-2026 .nzc-lantern{
        transform:scale(.75);
        top:3px;
    }
    #navy-zodiac-code-2026 .nzc-lantern-left{
        left:0;
    }
    #navy-zodiac-code-2026 .nzc-lantern-right{
        right:0;
    }
}