.hero{
    position:relative;

    /* 65px 導覽列 + 42px 公告列 */
    height:calc(100dvh - 107px);
    min-height:0;

    display:flex;
    justify-content:center;
    align-items:stretch;

    padding:12px 24px;
    overflow:hidden;
}
.hero-bg{
    position:absolute;
    inset:0;
    background-image:url("../images/home-banner.jpg?v=999");
    background-size:cover;
    background-position:center;
    filter:blur(18px);
    transform:scale(1.15);
    opacity:.65;
    z-index:0;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("../images/home-banner.jpg?v=999") center top / contain no-repeat;
    z-index:1;
    pointer-events:none;
}

.hero-layout{
    position:relative;
    z-index:5;

    width:950px;
    max-width:100%;
    height:100%;
    min-height:0;

    display:grid;
    grid-template-columns:350px 420px;
    gap:30px;

    justify-content:center;
    align-items:start;
}

.hero-panel,
.chat-panel{
    width:100%;
    height:620px;
    min-height:0;

    background:rgba(0,0,0,.42);
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    padding:32px;

    box-sizing:border-box;
    overflow:hidden;

    box-shadow:0 0 45px rgba(0,0,0,.55);
    backdrop-filter:blur(4px);
}

.status{
    display:inline-block;
    padding:8px 16px;
    border:1px solid rgba(130,255,120,.5);
    border-radius:999px;
    background:rgba(80,255,120,.12);
    color:#a8ff72;
    margin-bottom:14px;
    font-size:14px;
}

.online-status{
    margin-bottom:18px;
    color:#fff;
    font-size:18px;
}

.online-number{
    color:#a8ff2a;
    font-weight:bold;
    font-size:28px;
}

.actions{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-bottom:24px;
}

.online-box h3{
    margin:0 0 12px;
    color:#ffb36b;
    text-align:center;
}

.player-list{
    list-style:none;
    padding:0;
    margin:0;
    max-height:320px;
    overflow-y:auto;
}

.player-list li{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:9px 12px;
    margin-bottom:7px;
    border-radius:10px;
    background:rgba(0,0,0,.28);
}

.player-name{
    color:#fff;
    font-weight:bold;
    text-shadow:0 1px 4px rgba(0,0,0,.9);
}

.badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.badge{
    font-size:12px;
    padding:4px 8px;
    border-radius:999px;
    font-weight:bold;
}

.badge.gm{
    color:#fff;
    background:#8c5cff;
}

.badge.god{
    color:#1b1000;
    background:#ffcc3d;
}

.empty{
    text-align:center;
    color:#ddd;
}

@media(max-width:900px){
    html,
    body{
        min-height:100%;
        overflow-x:hidden;
        overflow-y:auto;
    }

    .hero{
        height:auto;
        min-height:calc(100dvh - 103px);
        align-items:flex-start;
        padding:18px 14px 30px;
        overflow:visible;
    }

    .hero-layout{
        width:100%;
        height:auto;
        min-height:0;
        grid-template-columns:minmax(0, 1fr);
        grid-auto-rows:auto;
        gap:18px;
        align-items:start;
    }

    .hero-panel,
    .chat-panel{
        width:100%;
        height:auto;
        min-height:0;
        max-height:none;
        align-self:auto;
        overflow:visible;
        padding:22px;
    }


    .player-list{
        max-height:none;
        overflow:visible;
    }

    .actions{
        flex-direction:column;
    }

    .button{
        width:100%;
    }

    .player-list li{
        flex-direction:column;
        gap:8px;
    }
}


/* =========================================================
   首頁動態 Banner + 滾動公告
   ========================================================= */

/* ---------- 滾動公告 ---------- */

.announcement-bar{
    position:relative;
    z-index:40;
    height:42px;

    display:flex;
    align-items:center;
    gap:18px;
    padding:0 24px;

    overflow:hidden;

    background:#080808;

    border-top:1px solid rgba(255,179,107,.18);
    border-bottom:1px solid rgba(255,179,107,.18);

    box-shadow:
        0 6px 18px rgba(0,0,0,.45);
}

.announcement-label{
    flex:0 0 auto;
    color:#ffd27a;
    font-size:20px;
    font-weight:950;
    white-space:nowrap;
}

.announcement-window{
    position:relative;
    flex:1 1 auto;
    align-self:stretch;
    min-width:0;
    height:100%;
    overflow:hidden;
}

.announcement-track{
    position:absolute;
    top:50%;
    left:100%;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    gap:70px;

    width:max-content;
    white-space:nowrap;
}
.announcement-item{
    display:inline-block;
    color:#fff;
    font-size:20px;
    font-weight:800;
    white-space:nowrap;
}

.announcement-separator{
    flex:0 0 auto;
    color:#ffb36b;
    font-size:12px;
    opacity:.8;
}

.announcement-track:hover{
    opacity:.9;
}


/* ---------- Banner 本體的慢速呼吸 ---------- */

.hero::before{
    transform-origin:center center;
    animation:heroBreathing 14s ease-in-out infinite alternate;
    will-change:transform,filter;
}

@keyframes heroBreathing{
    from{
        transform:scale(1);
        filter:saturate(1) brightness(1);
    }
    to{
        transform:scale(1.018);
        filter:saturate(1.04) brightness(1.025);
    }
}

/* ---------- 櫻花 ---------- */

.sakura-layer{
    position:absolute !important;
    inset:0 !important;
    z-index:3 !important;
    display:block !important;
    overflow:hidden !important;
    pointer-events:none !important;
}

.sakura-petal{
    position:absolute !important;
    top:-50px !important;
    display:block !important;
    background:linear-gradient(
        135deg,
        #fff9fc 0%,
        #ffc6de 45%,
        #ff78ad 100%
    ) !important;
    border-radius:80% 20% 70% 30% !important;
    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.85))
        drop-shadow(0 0 6px rgba(255,105,170,.65));
    animation-name:sakuraFall !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
    will-change:transform;
}

@keyframes sakuraFall{
    0%{
        transform:
            translate3d(0,-60px,0)
            rotate(0deg);
        opacity:0;
    }

    8%{
        opacity:var(--petal-opacity,.85);
    }

    35%{
        transform:
            translate3d(
                var(--sakura-drift,40px),
                35vh,
                0
            )
            rotate(240deg);
    }

    70%{
        transform:
            translate3d(
                calc(var(--sakura-drift,40px) * -.6),
                75vh,
                0
            )
            rotate(520deg);
    }

    100%{
        transform:
            translate3d(
                var(--sakura-drift,40px),
                110vh,
                0
            )
            rotate(760deg);
        opacity:.12;
    }
}

/* ---------- 星光閃爍 ---------- */

.twinkle-layer{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}

.twinkle-star{
    position:absolute;
    width:4px;
    height:4px;
    border-radius:999px;
    background:#fff;
    box-shadow:
        0 0 5px #fff,
        0 0 11px rgba(255,226,135,.95);
    animation:twinkleStar ease-in-out infinite;
}

.twinkle-star::before,
.twinkle-star::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:rgba(255,255,255,.82);
    transform:translate(-50%,-50%);
}

.twinkle-star::before{
    width:1px;
    height:12px;
}

.twinkle-star::after{
    width:12px;
    height:1px;
}

@keyframes twinkleStar{
    0%,100%{
        opacity:.12;
        transform:scale(.55) rotate(0deg);
    }
    48%{
        opacity:.95;
        transform:scale(1.25) rotate(45deg);
    }
}

/* ---------- Banner 柔光掃過 ---------- */

.hero-light-sweep{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    overflow:hidden;
}

.hero-light-sweep::before{
    content:"";
    position:absolute;
    top:-25%;
    bottom:-25%;
    left:-35%;
    width:24%;
    transform:skewX(-18deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.12),
        rgba(255,236,188,.22),
        rgba(255,255,255,.1),
        transparent
    );
    filter:blur(8px);
    animation:heroLightSweep 9s ease-in-out infinite;
}

@keyframes heroLightSweep{
    0%,32%{
        left:-35%;
        opacity:0;
    }
    42%{
        opacity:.9;
    }
    68%{
        left:115%;
        opacity:.4;
    }
    100%{
        left:115%;
        opacity:0;
    }
}

/* ---------- 海面淡淡波光 ---------- */

.water-shimmer{
    position:absolute;
    z-index:2;
    pointer-events:none;
    left:43%;
    top:13%;
    width:28%;
    height:31%;
    border-radius:50%;
    opacity:.18;
    transform:rotate(-8deg);
    background:
        repeating-linear-gradient(
            165deg,
            transparent 0 12px,
            rgba(255,255,255,.55) 13px 14px,
            transparent 15px 24px
        );
    filter:blur(1px);
    mix-blend-mode:screen;
    animation:waterShimmer 7s linear infinite;
}

@keyframes waterShimmer{
    from{
        background-position:0 0;
        opacity:.08;
    }
    50%{
        opacity:.24;
    }
    to{
        background-position:85px 32px;
        opacity:.08;
    }
}

/* 功能面板保持在所有裝飾效果上方 */
.hero-layout{
    z-index:5 !important;
}

/* ---------- 響應式 ---------- */

@media(max-width:900px){
    .announcement-bar{
        padding:0 14px;
    }

    .announcement-label{
        display:none;
    }

    .announcement-track{
        gap:42px;
        animation-duration:23s;
    }

    .water-shimmer{
        left:38%;
        top:14%;
        width:38%;
    }
}


@media(max-width:520px){
    .hero{
        padding:12px 10px 24px;
    }

    .hero-panel,
    .chat-panel{
        border-radius:18px;
        padding:16px;
    }

    .announcement-bar{
        height:38px;
    }

    .announcement-item{
        font-size:13px;
    }
}

/* ===========================
   在線玩家右鍵管理選單
   =========================== */

.player-name{
    cursor:context-menu;
    user-select:none;
}

.player-context-menu{
    display:none;
    position:fixed;
    z-index:99999;

    min-width:180px;

    background:rgba(15,18,28,.98);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,.45);
}

.player-context-menu.show{
    display:block;
}

.context-player-name{
    padding:12px 14px;

    color:#ffd77a;
    font-weight:bold;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.03);
}

.context-menu-item{
    width:100%;

    padding:12px 14px;

    border:0;
    outline:0;

    text-align:left;

    color:#fff;
    background:transparent;

    cursor:pointer;

    transition:.15s;
}

.context-menu-item:hover{
    background:#3b82f6;
}

.context-menu-item.danger:hover{
    background:#dc2626;
}

.context-menu-item:disabled{
    opacity:.5;
    cursor:wait;
}