/* 首頁:依 Figma PC_0.0(1280×899)與 m_0.0(375×854)以固定畫布等比縮放 */
body.home {
    background: linear-gradient(rgba(249, 231, 211, .55), rgba(249, 231, 211, .55)), url("../images/home/paper.jpg") top left / 1280px 1280px #f9e7d3;
    color: #000;
    font-family: "Bpmf GenSen Rounded", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 700;
    overflow-x: hidden;
}

.home-main {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 55px);
    min-height: calc(100dvh - 55px);
}

.stage-wrap {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    max-width: 100%;
    width: calc(var(--w) * var(--k, 1) * 1px);
    height: calc(var(--h) * var(--k, 1) * 1px);
}

.stage-pc { --w: 1280; --h: 844; }
.stage-m  { --w: 375;  --h: 799; display: none; }

.stage {
    position: relative;
    width: calc(var(--w) * 1px);
    height: calc(var(--h) * 1px);
    transform: scale(var(--k, 1));
    transform-origin: 0 0;
}

@media (max-width: 799px) {
    .stage-pc { display: none; }
    .stage-m  { display: block; }
    .home-main { place-items: start center; }
}

.stage .abs { position: absolute; display: block; }
.stage img { max-width: none; }

/* 頁首元件 */
.award-btn {
    border: 0;
    background: url("../images/home/award-label.svg") no-repeat center / 100% 100%;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.county {
    color: #6b3e0c;
    line-height: 1.2;
    font-weight: 700;
}

.user-bar {
    position: absolute;
    color: #6b3e0c;
    font-size: 14px;
    text-align: right;
}
.user-bar a { color: #6b3e0c; }

/* 活動規則與開始按鈕 */
.rules { text-align: center; }
.rules h2 {
    margin: 0 0 4px;
    color: #d27309;
    font-weight: 800;
    line-height: 1.5;
}
.rules p {
    margin: 0;
    line-height: 1.5;
    font-weight: 700;
}

.start-btn {
    display: block;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}
.start-btn img { display: block; width: 100%; height: auto; }
.start-btn:hover { filter: brightness(1.06); }
.start-btn:active { transform: translateY(3px); }

/* 學校參與排行榜(桌機尺寸,手機以 scale 縮小) */
.rank-board {
    position: absolute;
    width: 312.6px;
    height: 251px;
}
.rank-board .rank-crown {
    position: absolute;
    left: 127px;
    top: 0;
    width: 58.7px;
    height: 45.5px;
    background: url("../images/home/crown.svg") no-repeat center / 100% 100%;
    z-index: 3;
}
.rank-board::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 62px;
    width: 267px;
    height: 189px;
    box-sizing: border-box;
    border: 8px solid #c17c47;
    border-radius: 12px;
    background: #fff;
}
.rank-ribbon {
    position: absolute;
    left: 0;
    top: 45px;
    width: 312.6px;
    height: 47.9px;
    background: url("../images/home/ribbon.svg") no-repeat center / 100% 100%;
    z-index: 2;
}
.rank-ribbon > span {
    position: absolute;
    left: 29px;
    top: 6px;
    color: #fff;
    font-size: 24.2px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.rank-board ol {
    position: absolute;
    left: 44px;
    top: 108px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
}
.rank-board li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 24.2px;
    line-height: 1.5;
    white-space: nowrap;
}
.rank-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.rank-no-1 { background-image: url("../images/home/rank-1.svg"); }
.rank-no-2 { background-image: url("../images/home/rank-2.svg"); }
.rank-no-3 { background-image: url("../images/home/rank-3.svg"); }
.rank-empty { color: #8a7e77; font-size: 20px !important; }

/* 首頁地圖:分層插畫,座標為地圖圖片內的 CSS px */
.hmap { overflow: visible; }
.hmap .art { position: absolute; pointer-events: none; max-width: none; }
.hmap span.art > img { position: absolute; display: block; max-width: none; }
.hm-tag {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ts) * 59.242px);
    height: calc(var(--ts) * 85.225px);
    padding: calc(var(--ts) * 10.393px);
    border: calc(var(--ts) * 2.079px) solid #6b3e0c;
    border-radius: calc(var(--ts) * 12.472px) calc(var(--ts) * 12.472px) calc(var(--ts) * 12.472px) 0;
    background: #fff;
    color: #6b3e0c;
}
.hm-tag.sq-br { border-radius: calc(var(--ts) * 12.472px) calc(var(--ts) * 12.472px) 0 calc(var(--ts) * 12.472px); }
.hm-tag span { width: 100%; font-size: calc(var(--ts) * 25.155px); font-weight: 700; line-height: 1.2; letter-spacing: calc(var(--ts) * -.7546px); word-break: break-all; }

/* ───── 桌機座標 ───── */
.stage-pc .logo { left: 30px; top: 30px; width: 128px; height: 66px; }
.stage-pc .award-btn { left: 1092px; top: 49px; width: 148px; height: 45px; padding-left: 14px; font-size: 20px; }
.stage-pc .user-bar { right: 40px; top: 102px; }
.stage-pc .county { left: 669px; top: 73px; font-size: 64px; }
.stage-pc .title { left: 91px; top: 161px; width: 502px; height: 304px; }
.stage-pc .hmap { left: 601.3px; top: 100px; width: 609.5px; height: 701px; }
.stage-pc .rank-board { left: 92px; top: 505px; }
.stage-pc .rules { left: 432px; top: 517px; width: 417px; }
.stage-pc .rules h2 { font-size: 24px; }
.stage-pc .rules p { font-size: 20px; letter-spacing: -.6px; }
.stage-pc .start-btn { width: 316px; margin-top: 20px; }
.stage-pc .dice { left: 800px; top: 622px; width: 136px; height: 105px; }

/* ───── 手機座標 ───── */
.stage-m .m-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 375px;
    height: 64px;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5d3b2;
}
.stage-m .m-header .logo { width: 98px; height: 50px; }
.stage-m .m-header .award-btn { width: 122px; height: 38px; padding-left: 4px; font-size: 16px; }
.stage-m .user-bar { right: 24px; top: 68px; font-size: 12px; }
.stage-m .title { left: 12px; top: 96px; width: 350px; height: 87px; }
.stage-m .rules { left: 24px; top: 196px; width: 327px; }
.stage-m .rules h2 { font-size: 16px; }
.stage-m .rules p { font-size: 16px; letter-spacing: -.48px; }
.stage-m .start-btn { width: 212.5px; margin-top: 10px; }
.stage-m .dice { left: 281px; top: 369px; width: 73px; height: 56px; }
.stage-m .county { left: 70px; top: 418px; font-size: 36px; }
.stage-m .hmap { left: 34.2px; top: 413px; width: 331.5px; height: 366px; }
.stage-m .rank-board { left: 12px; top: 622px; transform: scale(.5797); transform-origin: 0 0; }

/* ───── 動態效果 ───── */
/* 首次進入:黑板 → 地圖 → 鄉鎮標籤 → 巴士 → 活動規則、排行榜、骰子 → 開始挑戰按鈕 */
.stage .title { animation: mFadeUp .8s ease-out backwards; }
.stage .hmap { animation: mZoomIn .9s ease-out .5s backwards; }
.stage .county { animation: mFadeIn .9s ease-out .5s backwards; }
.stage .hm-tag { animation: mPop .5s ease-out calc(1.4s + var(--i) * .14s) backwards; }
.stage .art-bus { --bus-from: -90px; --bus-delay: 1.5s; }
.stage .rules { animation: mFadeUp .6s ease-out 2.3s backwards; }
.stage .rank-board { animation: mFadeUp .6s ease-out 2.55s backwards; }
.stage .dice { animation: mFadeUp .6s ease-out 2.8s backwards; }
.stage .start-btn { animation: mPop .55s ease-out 3.2s backwards; }

/* 持續循環:標題與皇冠每 5 秒閃一次光,光澤由左至右掃過 */
.rank-ribbon::after, .rank-crown::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) 90% 0 / 300% 100% no-repeat;
    -webkit-mask: var(--shine-mask) center / 100% 100% no-repeat;
    mask: var(--shine-mask) center / 100% 100% no-repeat;
    animation: mShine 5s ease-in-out 4s infinite;
}
.rank-ribbon { --shine-mask: url("../images/home/ribbon.svg"); }
.rank-crown { --shine-mask: url("../images/home/crown.svg"); }