:root {
    --red: #8A1B29;
    --red-2: #a62235;
    --red-dark: #68111d;
    --orange: #F39200;
    --green: #8DC63F;
    --blue: #0071BC;
    --bg: #f8fafc;
    --paper: #ffffff;
    --line: #e5eaf1;
    --text: #243042;
    --muted: #748094;
    --soft: #f2f6fb;
    --shadow: 0 18px 40px rgba(36,48,66,.10);
    --shadow-sm: 0 10px 24px rgba(36,48,66,.08);
    --radius: 18px;
    --radius-sm: 12px;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Noto Sans TC","Microsoft JhengHei",PingFangTC,"Helvetica Neue",Arial,sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 20% 0%, rgba(141,198,63,.10), transparent 26rem), radial-gradient(circle at 88% 4%, rgba(0,113,188,.10), transparent 22rem), var(--bg);
}

button, input, select, textarea {
    font: inherit
}

button {
    cursor: pointer
}

a {
    color: inherit
}

.app {
    min-height: 100vh
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    color: #fff;
    background: linear-gradient(135deg,var(--red-dark),var(--red));
    box-shadow: 0 14px 34px rgba(104,17,29,.24);
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 28px 12px;
    min-height: 74px;
    max-width: 1360px;
    margin: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.logo {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #fff;
    color: var(--red);
    font-weight: 900;
    letter-spacing: -.06em;
    box-shadow: inset 0 0 0 2px rgba(138,27,41,.08);
    flex: 0 0 auto;
}

.brand-title {
    min-width: 0
}

    .brand-title h1 {
        margin: 0;
        font-size: 1.17rem;
        line-height: 1.15;
        letter-spacing: .05em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .brand-title p {
        margin: .2rem 0 0;
        font-size: .78rem;
        color: rgba(255,255,255,.78);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

.top-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 0 0 auto
}

.slogan {
    text-align: right;
    font-weight: 700;
    font-size: .86rem;
    letter-spacing: .06em;
    color: rgba(255,255,255,.92);
    line-height: 1.55;
    white-space: nowrap
}

    .slogan span {
        color: #ffd79d
    }

.login-btn {
    border: 1px solid rgba(255,255,255,.52);
    background: rgba(255,255,255,.14);
    color: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 900;
    text-decoration: none;
    letter-spacing: .03em
}

    .login-btn:hover, .login-btn.active {
        background: #fff;
        color: var(--red)
    }

.nav-tabs {
    display: flex;
    gap: 0;
    max-width: 1360px;
    margin: auto;
    padding: 0 28px;
    overflow-x: auto;
    scrollbar-width: thin;
    background: rgba(255,255,255,.98);
    color: var(--text);
    border-radius: 18px 18px 0 0
}

.nav-btn {
    border: 0;
    background: transparent;
    color: #5a6474;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    padding: 13px 18px;
    font-weight: 700;
    border-bottom: 3px solid transparent;
    transition: .18s ease;
    text-decoration: none;
}

    .nav-btn:hover {
        background: #fff4f5;
        color: var(--red)
    }

    .nav-btn.active {
        color: var(--red);
        border-color: var(--red);
        background: #fff7f8
    }

.nav-icon {
    font-size: 1.08rem
}

main {
    max-width: 1360px;
    margin: 0 auto;
    padding: 24px 28px 54px
}

.view {
    display: none;
    animation: fade .25s ease both
}

    .view.active {
        display: block
    }

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(7px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.notice {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 18px;
    border: 1px solid #ffe4bd;
    border-left: 5px solid var(--orange);
    background: #fffaf2;
    border-radius: 14px;
    color: #7a4e0d;
    box-shadow: 0 6px 18px rgba(243,146,0,.08)
}

    .notice strong {
        color: #6b3b00
    }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
    background: #f0f4f8;
    color: #526077
}

    .pill.green {
        background: #eef9e5;
        color: #4f8c19
    }

    .pill.orange {
        background: #fff1dd;
        color: #ba6500
    }

    .pill.blue {
        background: #e9f4ff;
        color: #0061a2
    }

    .pill.red {
        background: #fff0f2;
        color: #b12b3f
    }

    .pill.gray {
        background: #edf1f6;
        color: #647085
    }

.dashboard-grid {
    display: grid;
    grid-template-columns: 360px minmax(0,1fr);
    gap: 22px;
    align-items: start
}

.panel-stack {
    display: grid;
    gap: 16px
}

.card {
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(229,234,241,.9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden
}

    .card.pad {
        padding: 20px
    }

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg,#fff,#fbfdff)
}

    .card-header h2, .card-header h3 {
        margin: 0;
        font-size: 1.02rem;
        letter-spacing: .03em
    }

    .card-header p {
        margin: 5px 0 0;
        color: var(--muted);
        font-size: .86rem
    }

.section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: .98rem;
    letter-spacing: .03em
}

    .section-title .mark {
        display: inline-grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 9px;
        background: #fff3e3;
        color: var(--orange);
        font-weight: 900
    }

.big-number {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 2px 0 12px
}

    .big-number strong {
        color: var(--red);
        font-size: 2rem;
        line-height: 1;
        letter-spacing: -.03em
    }

    .big-number span {
        color: var(--muted);
        font-weight: 700;
        margin-bottom: 3px
    }

.progress {
    width: 100%;
    height: 11px;
    border-radius: 999px;
    background: #e7ebf1;
    overflow: hidden;
    position: relative
}

    .progress > i {
        display: block;
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(90deg,var(--green),#b4de64);
        transition: width .75s ease
    }

    .progress.orange > i {
        background: linear-gradient(90deg,var(--orange),#ffc169)
    }

    .progress.blue > i {
        background: linear-gradient(90deg,var(--blue),#56a7dc)
    }
.goal-progress {
    height: 18px;
    background: #dde7ef;
    box-shadow: inset 0 1px 3px rgba(36,48,66,.16), 0 10px 22px rgba(55,152,214,.16)
}

    .goal-progress > i {
        position: relative;
        background: linear-gradient(90deg,#8cc63f,#f39200,#d23b4d,#3798d6);
        background-size: 220% 100%;
        animation: goalProgressFlow 2.4s linear infinite, goalProgressGlow 1.8s ease-in-out infinite alternate
    }

        .goal-progress > i:after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 45%,transparent 72%);
            animation: goalProgressSweep 1.5s ease-in-out infinite
        }

@keyframes goalProgressFlow {
    from {
        background-position: 0 0
    }

    to {
        background-position: 220% 0
    }
}

@keyframes goalProgressGlow {
    from {
        box-shadow: 0 0 0 rgba(55,152,214,0)
    }

    to {
        box-shadow: 0 0 18px rgba(55,152,214,.38)
    }
}

@keyframes goalProgressSweep {
    from {
        transform: translateX(-110%)
    }

    to {
        transform: translateX(110%)
    }
}

.progress-label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700
}
.reveal-number strong {
    color: #506076;
    font-size: 1.35rem;
    letter-spacing: 0
}

.reveal-label {
    justify-content: flex-start
}

.route-card {
    position: relative;
    padding: 19px 20px 18px;
    background: linear-gradient(135deg,#fff,#fffbf6)
}

    .route-card:before {
        content: "";
        position: absolute;
        inset: 18px;
        border: 2px dashed rgba(243,146,0,.46);
        border-radius: 16px;
        pointer-events: none
    }

.route-inner {
    position: relative;
    z-index: 1;
    padding: 4px 8px
}

.route-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px
}

    .route-title b {
        font-size: .95rem
    }

    .route-title span {
        color: var(--muted);
        font-size: .78rem;
        font-weight: 800
    }

.route-points {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 6px 0 10px
}

.route-point {
    padding: 10px 11px;
    border-radius: 12px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #ffe0b1;
    font-weight: 900;
    text-align: center
}

.route-arrow {
    color: var(--orange);
    font-size: 1.45rem;
    font-weight: 900
}

.route-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    color: #7e5a27;
    font-size: .82rem;
    font-weight: 800
}

.rank-mini {
    padding: 6px 20px 18px
}

.mini-row {
    display: grid;
    grid-template-columns: 30px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f6
}

    .mini-row:last-child {
        border-bottom: 0
    }

.medal {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    font-size: .76rem;
    font-weight: 900;
    background: #e8edf5;
    color: #637185
}

    .medal.gold {
        background: #fff2d2;
        color: #b36b00
    }

    .medal.silver {
        background: #eef2f7;
        color: #708092
    }

    .medal.bronze {
        background: #ffe3cf;
        color: #bd5b00
    }

.mini-row b {
    font-size: .9rem
}

.mini-row small {
    display: block;
    color: var(--muted);
    font-weight: 700;
    margin-top: 2px
}

.mini-row em {
    font-style: normal;
    color: var(--green);
    font-weight: 900
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.stat {
    background: linear-gradient(180deg,#f8fbff,#fff);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px
}

    .stat span {
        display: block;
        color: var(--muted);
        font-size: .78rem;
        font-weight: 800
    }

    .stat strong {
        display: block;
        margin-top: 4px;
        font-size: 1.28rem;
        color: var(--text)
    }

.map-card {
    min-height: 675px;
    position: relative;
    overflow: hidden
}

.map-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 20px 0
}

.legend {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 800
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px
}

.swatch {
    width: 28px;
    height: 6px;
    border-radius: 999px;
    background: #ccd4df
}

    .swatch.done {
        background: var(--green)
    }

    .swatch.now {
        background: var(--orange)
    }

    .swatch.future {
        background: #cfd7e2
    }

.map-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.map-canvas {
    margin: 18px 20px 22px;
    min-height: 600px;
    border-radius: 22px;
    background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.9), transparent 18%), radial-gradient(circle at 82% 12%, rgba(255, 255, 255, 0.75), transparent 16%), linear-gradient(180deg, #dff6ff 0%, #eef9ff 42%, #fff9f1 100%);
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
}

    .map-canvas:before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: rgba(255,255,255,.35);
        right: 3%;
        top: 8%;
        filter: blur(1px)
    }

.map-idle-text {
    position: absolute;
    top: 22px;
    left: 24px;
    z-index: 3;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 12px 28px rgba(80, 102, 128, .16);
    color: var(--text);
    font-size: clamp(1rem, 2vw, 1.45rem);
    font-weight: 900;
    pointer-events: none;
    animation: idleTextFloat 1.8s ease-in-out infinite;
}

    .map-idle-text span {
        display: inline-block;
        animation: idleTextDot 1.2s ease-in-out infinite;
    }

        .map-idle-text span:nth-child(2) {
            animation-delay: .16s;
        }

        .map-idle-text span:nth-child(3) {
            animation-delay: .32s;
        }

.taiwan-map {
    width: min(96%,760px);
    height: auto;
    margin-top: 112px; /* Keeps top-edge mascot text and frames inside the map card. */
    position: relative;
    z-index: 1;
    overflow: visible
}

.map-idle-mascot {
    position: absolute;
    left: 30%;
    top: 35%;
    z-index: 2;
    width: clamp(108px, 18vw, 190px);
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

@keyframes idleTextFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@keyframes idleTextDot {
    0%, 80%, 100% {
        opacity: .35;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.map-bg {
    filter: drop-shadow(0 18px 24px rgba(80,102,128,.14))
}

.route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

.route-done {
    stroke: var(--green)
}

.route-current {
    stroke: var(--orange);
    stroke-dasharray: 18 12;
    animation: dash 1.1s linear infinite
}

.route-future {
    stroke: #c8d2df;
    stroke-dasharray: 10 13
}

.route-air {
    stroke: #aebccc;
    stroke-dasharray: 9 13;
    fill: none;
    stroke-linecap: round
}
.route-current.route-air {
    stroke: var(--orange);
    stroke-dasharray: 9 13;
}

.route-guide {
    fill: none;
    stroke: rgba(255,255,255,.82);
    stroke-linecap: round;
    stroke-linejoin: round
}

.node .outer {
    fill: #fff;
    stroke: #9cadbf;
    stroke-width: 3
}

.node.done .outer {
    stroke: var(--green)
}

.node.current .outer {
    stroke: var(--orange)
}

.node .inner {
    fill: #9cadbf
}

.node.done .inner {
    fill: var(--green)
}

.node.current .inner {
    fill: var(--orange)
}

.node text {
    font-weight: 900;
    fill: #536072;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 5px;
    stroke-linejoin: round
}

.node.current text {
    fill: #a84b00
}

.node.done text {
    fill: #4d8519
}

.pulse {
    animation: pulse 1.5s ease-in-out infinite;
    transform-origin: center
}

.mascot-shadow {
    fill: rgba(36,48,66,.18)
}
.mascot-runner {
    pointer-events: none;
}

.mascot-sprite {
    filter: drop-shadow(0 12px 14px rgba(36,48,66,.24));
}

.mascot-runner.style-plane .mascot-sprite {
    filter: drop-shadow(0 13px 12px rgba(0,113,188,.22));
}

.mascot-runner.style-finish .mascot-sprite {
    filter: drop-shadow(0 12px 14px rgba(141,198,63,.26));
}

.finish-sparkle {
    fill: #f39200;
    stroke: #fff;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
}

.mascot-frame {
    opacity: 0;
    filter: drop-shadow(0 10px 14px rgba(36,48,66,.22))
}

    .mascot-frame.frame-1 {
        animation: frame1 .8s linear infinite
    }

    .mascot-frame.frame-2 {
        animation: frame2 .8s linear infinite
    }

    .mascot-frame.frame-3 {
        animation: frame3 .8s linear infinite
    }

    .mascot-frame.frame-4 {
        animation: frame4 .8s linear infinite
    }

@keyframes frame1 {
    0%,24.9% {
        opacity: 1
    }

    25%,100% {
        opacity: 0
    }
}

@keyframes frame2 {
    0%,24.9% {
        opacity: 0
    }

    25%,49.9% {
        opacity: 1
    }

    50%,100% {
        opacity: 0
    }
}

@keyframes frame3 {
    0%,49.9% {
        opacity: 0
    }

    50%,74.9% {
        opacity: 1
    }

    75%,100% {
        opacity: 0
    }
}

@keyframes frame4 {
    0%,74.9% {
        opacity: 0
    }

    75%,100% {
        opacity: 1
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: -30
    }
}

@keyframes pulse {
    0%,100% {
        opacity: .48;
        transform: scale(1)
    }

    50% {
        opacity: .16;
        transform: scale(1.75)
    }
}

.coord-helper {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    font-weight: 900;
    font-size: .78rem;
    color: #536072;
    box-shadow: var(--shadow-sm)
}

.map-summary {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 2;
    max-width: 320px;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(229,234,241,.9);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-sm)
}

    .map-summary h3 {
        margin: 0 0 8px;
        font-size: 1rem
    }

    .map-summary p {
        margin: 0;
        color: var(--muted);
        font-size: .86rem;
        line-height: 1.65
    }

.page-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    margin: 2px 0 18px
}

    .page-head h2 {
        margin: 0;
        font-size: 1.45rem;
        color: #192231;
        letter-spacing: .03em
    }

    .page-head p {
        margin: 7px 0 0;
        color: var(--muted)
    }

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

.btn {
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 900;
    background: #edf2f8;
    color: #425069;
    box-shadow: none;
    text-decoration: none;
    transition: .18s ease;
    text-align: center; /* �j������������r�m�� */
}

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 9px 18px rgba(36,48,66,.10)
    }

    .btn.primary {
        background: var(--red);
        color: #fff
    }

    .btn.orange {
        background: var(--orange);
        color: #fff
    }

    .btn.green {
        background: var(--green);
        color: #fff
    }

    .btn.blue {
        background: var(--blue);
        color: #fff
    }

    .btn.ghost {
        background: #fff;
        border: 1px solid var(--line)
    }

    .btn.danger {
        background: #fff0f2;
        color: #a52235
    }

    .btn.sm {
        padding: 7px 10px;
        font-size: .82rem;
        border-radius: 10px
    }

.tiles {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px
}

.tile {
    padding: 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden
}

    .tile:after {
        content: "";
        position: absolute;
        right: -30px;
        top: -30px;
        width: 92px;
        height: 92px;
        border-radius: 50%;
        background: rgba(141,198,63,.12)
    }

    .tile.orange:after {
        background: rgba(243,146,0,.13)
    }

    .tile.blue:after {
        background: rgba(0,113,188,.12)
    }

    .tile.red:after {
        background: rgba(138,27,41,.10)
    }

    .tile span {
        display: block;
        color: var(--muted);
        font-size: .82rem;
        font-weight: 800
    }

    .tile strong {
        display: block;
        margin-top: 8px;
        font-size: 1.55rem;
        letter-spacing: -.02em
    }

    .tile small {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-weight: 700
    }

.table-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden
}

.table-scroll {
    overflow: auto
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 820px
}

th, td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #edf1f6;
    vertical-align: middle
}

th {
    font-size: .82rem;
    color: #5e6a7e;
    background: #f7fafd;
    font-weight: 900;
    white-space: nowrap
}

td {
    font-size: .91rem;
    background: #fff
}

tbody tr:hover td {
    background: #fffdf9
}

tbody tr:last-child td {
    border-bottom: 0
}

.rank-no {
    font-weight: 900;
    font-size: 1.05rem;
    color: var(--red)
}

.center-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 900
}

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg,#fff3e4,#ffe0b2);
    display: grid;
    place-items: center;
    color: #b45e00;
    font-weight: 900;
    flex: 0 0 auto
}

    .avatar.green {
        background: #eef9e5;
        color: #52911c
    }

    .avatar.blue {
        background: #e8f4ff;
        color: #0061a2
    }

    .avatar.red {
        background: #fff0f3;
        color: #a52235
    }

.leader-progress {
    display: grid;
    grid-template-columns: minmax(90px,1fr) 48px;
    align-items: center;
    gap: 10px;
    min-width: 170px
}

    .leader-progress b {
        font-size: .83rem;
        color: #5b6577
    }

    .leader-progress .progress {
        height: 8px
    }

.center-progress-card {
    display: grid;
    grid-template-columns: minmax(180px,240px) minmax(0,1fr);
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm)
}

    .center-progress-card span {
        display: block;
        color: var(--muted);
        font-size: .82rem;
        font-weight: 800
    }

    .center-progress-card strong {
        display: block;
        margin-top: 4px;
        color: #192231;
        font-size: 1.05rem
    }

.center-progress-main {
    display: grid;
    gap: 10px
}

.center-progress-numbers {
    display: flex;
    align-items: baseline;
    gap: 8px
}

    .center-progress-numbers b {
        color: var(--blue);
        font-size: 1.35rem;
        line-height: 1
    }

    .center-progress-numbers span {
        color: var(--muted);
        font-weight: 800
    }

.center-progress-bar {
    grid-template-columns: minmax(120px,1fr) 58px;
    min-width: 0
}
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: end;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 16px
}

.field {
    display: grid;
    gap: 6px;
    min-width: 160px
}

    .field.grow {
        flex: 1;
        min-width: 220px
    }

    .field label {
        font-size: .8rem;
        color: #637085;
        font-weight: 900
    }

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 900;
    color: var(--muted)
}

    .checkbox-field input {
        width: auto;
        margin: 0
    }

input, select, textarea {
    width: 100%;
    border: 1px solid #dbe3ee;
    border-radius: 12px;
    padding: 10px 12px;
    background: #fff;
    color: var(--text);
    outline: none
}

    input:focus, select:focus, textarea:focus {
        border-color: rgba(0,113,188,.55);
        box-shadow: 0 0 0 4px rgba(0,113,188,.08)
    }

textarea {
    min-height: 100px;
    resize: vertical
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

    .form-grid .full {
        grid-column: 1/-1
    }

.upload-box {
    min-height: 210px;
    border: 2px dashed #ffc777;
    border-radius: 18px;
    background: linear-gradient(180deg,#fffaf3,#fff);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
    color: #8a5b19;
    transition: .18s ease
}

    .upload-box:hover {
        border-color: var(--orange);
        background: #fff8ed
    }

    .upload-box.drag-over {
        border-color: var(--blue);
        background: #f0f8ff
    }
    .upload-box .cloud {
        font-size: 2.8rem
    }

    .upload-box strong {
        display: block;
        margin: 8px 0 3px;
        font-size: 1.08rem
    }

    .upload-box small {
        display: block;
        color: #8a6b41;
        line-height: 1.6
    }

.image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px,1fr));
    gap: 12px;
    margin-top: 12px
}

.image-preview-item {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 8px
}

    .image-preview-item img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #edf1f6
    }
.two-col {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(340px,.95fr);
    gap: 18px;
    align-items: start
}

.phone-shot {
    width: 100%;
    max-width: 360px;
    margin: auto;
    background: #121826;
    border-radius: 30px;
    padding: 14px;
    box-shadow: 0 24px 48px rgba(18,24,38,.22)
}

.phone-screen {
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    min-height: 520px
}

.shot-top {
    padding: 18px;
    background: linear-gradient(135deg,#f7fbff,#eaf4ff);
    border-bottom: 1px solid #e7eef7
}

    .shot-top span {
        color: #718096;
        font-weight: 800;
        font-size: .8rem
    }

.shot-steps {
    text-align: center;
    padding: 32px 16px
}

    .shot-steps b {
        display: block;
        font-size: 3.3rem;
        color: #1d2939;
        letter-spacing: -.05em
    }

    .shot-steps span {
        color: #718096;
        font-weight: 900
    }

.shot-ring {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 22px auto;
    background: conic-gradient(var(--green) 0 74%,#e7edf5 74% 100%);
    display: grid;
    place-items: center
}

    .shot-ring:before {
        content: "?F?? 74%";
        display: grid;
        place-items: center;
        width: 122px;
        height: 122px;
        border-radius: 50%;
        background: #fff;
        font-weight: 900;
        color: var(--green)
    }

.shot-list {
    padding: 0 20px 24px
}

    .shot-list div {
        display: flex;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #edf1f6;
        color: #536072;
        font-weight: 800
    }

.review-layout {
    display: grid;
    grid-template-columns: minmax(300px,360px) minmax(0,1fr);
    gap: 18px;
    align-items: start
}

.review-list {
    display: grid;
    gap: 10px;
    align-self: start
}

.review-item {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: .18s;
    align-self: start
}

    .review-item:hover, .review-item.active {
        border-color: #ffc777;
        transform: translateY(-1px)
    }

    .review-item h3 {
        margin: 0 0 5px;
        font-size: .95rem
    }

    .review-item p {
        margin: 3px 0;
        color: #647085;
        font-size: .84rem;
        line-height: 1.38
    }

.review-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px
}

.proof-wrap {
    display: grid;
    grid-template-columns: minmax(260px,380px) minmax(0,1fr);
    gap: 18px;
    padding: 18px
}

.audit-box {
    background: #f8fbff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px
}

    .audit-box h3 {
        margin: 0 0 10px
    }

    .audit-box dl {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 10px 12px;
        margin: 0
    }

    .audit-box dt {
        color: var(--muted);
        font-weight: 900
    }

    .audit-box dd {
        margin: 0;
        font-weight: 900
    }

.admin-inline-form {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 12px;
    align-items: end;
    width: 100%
}

.filters {
    max-width: 100%;
    overflow: hidden
}

.filters .field {
    flex: 1 1 180px;
    max-width: 100%
}

.filters .btn,
.filters a.btn {
    flex: 0 0 auto;
    white-space: nowrap
}

.table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.table-actions form {
    margin: 0
}

.table-actions .btn,
.table-actions button {
    white-space: nowrap
}

.table-file-name {
    max-width: 260px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word
}

#admin-activityVideos table {
    min-width: 920px;
    table-layout: fixed
}

#admin-activityVideos th:nth-child(4),
#admin-activityVideos td:nth-child(4) {
/*    width: 28%*/
}

#admin-activityVideos th:last-child,
#admin-activityVideos td:last-child,
#admin-allRecords th:last-child,
#admin-allRecords td:last-child {
    width: 128px
}
.backend-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px
}

.subnav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

    .subnav .btn.active {
        background: var(--red);
        color: #fff
    }

.backend-section {
    display: none
}

    .backend-section.active {
        display: block
    }

.input-mini {
    max-width: 130px;
    padding: 8px 9px
}

.upload-window-input {
    min-width: 160px;
    max-width: 190px
}

.video-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px;
    background: #fff
}

.video-info {
    min-width: 0
}

.video-name {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-word
}

.video-remark {
    margin: 6px 0 0;
    color: var(--muted);
    font-weight: 700;
    overflow-wrap: anywhere
}

.video-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap
}

.video-actions form {
    margin: 0
}

.video-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #e9f4ff;
    color: var(--blue);
    display: grid;
    place-items: center;
    font-size: 1.5rem
}

.timeline {
    padding: 0;
    margin: 0;
    list-style: none
}

    .timeline li {
        position: relative;
        padding: 0 0 18px 30px
    }

        .timeline li:before {
            content: "";
            position: absolute;
            left: 8px;
            top: 4px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 0 4px #eef9e5
        }

        .timeline li:after {
            content: "";
            position: absolute;
            left: 12px;
            top: 18px;
            bottom: 2px;
            border-left: 2px dashed #d7dee9
        }

        .timeline li:last-child:after {
            display: none
        }

    .timeline b {
        display: block
    }

    .timeline span {
        display: block;
        color: var(--muted);
        font-size: .84rem;
        margin-top: 4px
    }

.login-panel {
    max-width: 560px;
    margin: 24px auto 0
}

.login-hero {
    display: grid;
    gap: 8px;
    text-align: center;
    margin-bottom: 18px
}

    .login-hero .logo {
        margin: auto;
        width: 56px;
        height: 56px
    }

.captcha-box {
    display: flex;
    align-items: center;
    min-height: 52px
}

    .captcha-box img {
        display: block;
        width: 150px;
        height: 48px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: #f8fafc
    }

.toast {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 50;
    background: #202938;
    color: #fff;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 18px 42px rgba(0,0,0,.22);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: .2s
}

    .toast.show {
        opacity: 1;
        transform: translateY(0)
    }

.modal {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.54);
    z-index: 45;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px
}

    .modal.show {
        display: flex
    }

.modal-card {
    width: min(820px,100%);
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 26px 80px rgba(0,0,0,.26);
    overflow: hidden
}

    .modal-card.sm {
        width: min(560px,100%)
    }

.modal-body {
    padding: 20px
}
    .modal-card.xl {
        width: min(1120px,100%);
        max-height: calc(100vh - 40px)
    }

.bulk-account-body {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(320px,.78fr);
    gap: 16px;
    align-items: stretch;
    height: min(70vh,720px);
    overflow: hidden
}

.bulk-pane {
    display: grid;
    grid-template-rows: auto auto minmax(0,1fr);
    gap: 12px;
    min-height: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #f8fbff;
    padding: 14px;
    min-width: 0
}

.bulk-pane.selected {
    background: #fffdfa
}

.bulk-pane.drag-over {
    border-color: var(--orange);
    box-shadow: inset 0 0 0 2px rgba(243,146,0,.18)
}

.bulk-search-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
    gap: 10px;
    align-items: end
}

.bulk-status {
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800
}

.bulk-list,
.bulk-selected-list {
    display: grid;
    align-content: start;
    gap: 10px;
    overflow: auto;
    min-height: 0;
    padding-right: 4px
}

.bulk-person,
.bulk-selected-person {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff
}

.bulk-person {
    cursor: grab
}

.bulk-person.disabled {
    cursor: not-allowed;
    opacity: .62;
    background: #f3f6fa
}

.bulk-person strong,
.bulk-selected-person strong {
    display: block;
    font-size: .95rem;
    color: #202938
}

.bulk-person span,
.bulk-selected-person span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 800
}

.bulk-selected-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px
}

.bulk-selected-head h4 {
    margin: 0;
    font-size: 1rem
}

.bulk-selected-head span {
    display: inline-block;
    margin-top: 4px;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 900
}

.bulk-selected-settings {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 10px
}

.bulk-empty {
    display: grid;
    place-items: center;
    min-height: 120px;
    color: var(--muted);
    font-weight: 900;
    border: 1px dashed #d6dfeb;
    border-radius: 12px;
    background: #fff
}

.bulk-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px
}

.close-x {
    border: 0;
    background: #fff;
    color: #5c6677;
    font-size: 1.2rem;
    border-radius: 10px;
    width: 36px;
    height: 36px
}

    .close-x:hover {
        background: #f2f5f9
    }

.empty-state {
    padding: 42px 18px;
    text-align: center;
    color: var(--muted)
}

    .empty-state b {
        display: block;
        color: var(--text);
        margin-bottom: 6px;
        font-size: 1.06rem
    }

.deco-band {
    height: 7px;
    background: linear-gradient(90deg,var(--red) 0 40%,var(--orange) 40% 62%,var(--green) 62% 82%,var(--blue) 82% 100%)
}

@media (max-width:920px) {
    #admin-activityVideos .table-scroll {
        overflow: visible
    }

    #admin-activityVideos table {
        min-width: 0;
        table-layout: auto
    }

    #admin-activityVideos table,
    #admin-activityVideos thead,
    #admin-activityVideos tbody,
    #admin-activityVideos tr,
    #admin-activityVideos th,
    #admin-activityVideos td {
        display: block;
        width: 100%
    }

    #admin-activityVideos thead {
        display: none
    }

    #admin-activityVideos tbody {
        display: grid;
        gap: 12px;
        padding: 12px;
        background: #f7fafd
    }

    #admin-activityVideos tr {
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow-sm)
    }

    #admin-activityVideos td {
        display: grid;
        grid-template-columns: 96px minmax(0,1fr);
        gap: 10px;
        align-items: start;
        padding: 10px 12px;
        border-bottom: 1px solid #edf1f6;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal
    }

    #admin-activityVideos td:last-child {
        border-bottom: 0;
        width: 100%
    }

    #admin-activityVideos td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .78rem;
        font-weight: 900;
        white-space: nowrap
    }

    #admin-activityVideos .table-file-name {
        max-width: none;
        overflow-wrap: anywhere;
        word-break: normal
    }

    #admin-activityVideos .table-actions {
        justify-content: flex-start
    }

    #admin-activityVideos th:last-child,
    #admin-activityVideos td:last-child {
        width: 100%
    }
}

@media (max-width:430px) {
    #admin-activityVideos td {
        grid-template-columns: 1fr;
        gap: 6px
    }

    #admin-activityVideos td::before {
        white-space: normal
    }

    #admin-activityVideos .table-file-name {
        line-height: 1.45
    }
}
@media (max-width:1120px) {
    .dashboard-grid, .two-col, .review-layout, .proof-wrap {
        grid-template-columns: 1fr
    }

    .map-card {
        min-height: 620px
    }

    .map-canvas {
        min-height: 550px;
    }

    .tiles {
        grid-template-columns: repeat(2,1fr)
    }

    .slogan {
        display: none
    }
}

@media (max-width:720px) {
    .hero {
        padding: 12px 16px;
        align-items: flex-start
    }

    .top-actions {
        gap: 8px
    }

    .nav-tabs {
        padding: 0 8px
    }

    .nav-btn {
        padding: 12px 14px
    }

    .brand-title h1 {
        font-size: 1rem
    }

    .brand-title p {
        font-size: .72rem
    }

    .login-btn {
        padding: 8px 12px
    }

    main {
        padding: 18px 14px 40px
    }

    .notice {
        align-items: flex-start;
        flex-direction: column
    }

    .dashboard-grid {
        gap: 14px
    }

    .card.pad {
        padding: 16px
    }

    .map-card {
        min-height: auto
    }

    .map-toolbar {
        padding: 16px 16px 0
    }

    .map-canvas {
        margin: 14px;
        min-height: 480px;
    }

    .taiwan-map {
        width: 112%;
        transform: translateX(-2%)
    }

    .map-summary {
        position: static;
        margin: 0 14px 14px;
        max-width: none
    }

    .coord-helper {
        left: 18px;
        right: auto
    }

    .form-grid, .tiles, .stat-grid {
        grid-template-columns: 1fr
    }

    .bulk-account-body,
    .bulk-search-grid,
    .bulk-selected-settings {
        grid-template-columns: 1fr
    }

    .bulk-account-body {
        max-height: calc(100vh - 170px);
        overflow: auto
    }

    .bulk-pane {
        min-height: 320px
    }

    .bulk-modal-actions {
        flex-direction: column
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column
    }

    .filters {
        align-items: stretch
    }
    .center-progress-card {
        grid-template-columns: 1fr
    }

    .field {
        min-width: 100%
    }


    .filters .field,
    .filters .btn,
    .filters a.btn {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%
    }

    .admin-inline-form {
        grid-template-columns: 1fr
    }

    .table-actions {
        flex-direction: column;
        align-items: stretch;
        min-width: 84px
    }

    .table-actions .btn,
    .table-actions button {
        width: 100%;
        text-align: center
    }

    .table-file-name {
        max-width: 260px
    }
    .proof-wrap {
        padding: 14px
    }

    .audit-box dl {
        grid-template-columns: 82px 1fr
    }


    #admin-accounts .table-scroll,
    #admin-allRecords .table-scroll,
    #admin-activityVideos .table-scroll {
        overflow: visible
    }

    #admin-accounts table,
    #admin-allRecords table,
    #admin-activityVideos table {
        min-width: 0;
        table-layout: auto
    }

    #admin-accounts table,
    #admin-accounts thead,
    #admin-accounts tbody,
    #admin-accounts tr,
    #admin-accounts th,
    #admin-accounts td,
    #admin-allRecords table,
    #admin-allRecords thead,
    #admin-allRecords tbody,
    #admin-allRecords tr,
    #admin-allRecords th,
    #admin-allRecords td,
    #admin-activityVideos table,
    #admin-activityVideos thead,
    #admin-activityVideos tbody,
    #admin-activityVideos tr,
    #admin-activityVideos th,
    #admin-activityVideos td {
        display: block;
        width: 100%
    }

    #admin-accounts thead,
    #admin-allRecords thead,
    #admin-activityVideos thead {
        display: none
    }

    #admin-accounts tbody,
    #admin-allRecords tbody,
    #admin-activityVideos tbody {
        display: grid;
        gap: 12px;
        padding: 12px;
        background: #f7fafd
    }

    #admin-accounts tr,
    #admin-allRecords tr,
    #admin-activityVideos tr {
        border: 1px solid var(--line);
        border-radius: 14px;
        overflow: hidden;
        background: #fff;
        box-shadow: var(--shadow-sm)
    }

    #admin-accounts td,
    #admin-allRecords td,
    #admin-activityVideos td {
        display: grid;
        grid-template-columns: 86px minmax(0,1fr);
        gap: 10px;
        align-items: start;
        padding: 10px 12px;
        border-bottom: 1px solid #edf1f6;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word
    }

    #admin-accounts td:last-child,
    #admin-allRecords td:last-child,
    #admin-activityVideos td:last-child {
        border-bottom: 0;
        width: 100%
    }

    #admin-accounts td::before,
    #admin-allRecords td::before,
    #admin-activityVideos td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .78rem;
        font-weight: 900;
        white-space: nowrap
    }

    #admin-accounts td[data-label="�ާ@"],
    #admin-allRecords td[data-label="�ާ@"],
    #admin-activityVideos td[data-label="�ާ@"] {
        grid-template-columns: 86px minmax(0,1fr)
    }

    #admin-accounts .table-actions,
    #admin-allRecords .table-actions,
    #admin-activityVideos .table-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-width: 0
    }

    #admin-accounts .table-actions .btn,
    #admin-accounts .table-actions button,
    #admin-allRecords .table-actions .btn,
    #admin-allRecords .table-actions button,
    #admin-activityVideos .table-actions .btn,
    #admin-activityVideos .table-actions button {
        width: auto;
        min-width: 72px
    }

    #admin-activityVideos th:last-child,
    #admin-activityVideos td:last-child,
    #admin-allRecords th:last-child,
    #admin-allRecords td:last-child {
        width: 100%
    }

    #admin-activityVideos td,
    #admin-activityVideos .table-file-name {
        word-break: normal
    }
    .toast {
        left: 14px;
        right: 14px;
        bottom: 14px
    }

    .big-number strong {
        font-size: 1.7rem
    }
}

@media print {
    .topbar, .notice, .actions, .filters, .subnav, .toast, .modal {
        display: none !important
    }

    main {
        max-width: none;
        padding: 0
    }

    .view {
        display: block !important;
        page-break-after: always
    }

    .card, .table-card, .tile {
        box-shadow: none
    }
}

/* ?N?????????P?]?B / ???I / ?~?q???????e?G???b???????A???K demo.css ?|?????s???S?????e?C */
.mascot-control-pill {
    white-space: nowrap;
}

.mascot-runner .mascot-run-frame,
.mascot-runner .mascot-finish-frame,
.mascot-runner .mascot-plane-frame {
    opacity: 0;
    pointer-events: none;
}

/* ???@?]?w???? run ?v???????e?????P???????? */
.mascot-runner.is-running .mascot-run-frame {
    animation: mascotRunSequence 0.72s steps(1, end) infinite;
}

    /* ???? 9 ?i???A?N 0.72 ???????A?C?i?????? 0.08 ?? (0.72s / 9 = 0.08s) */
    .mascot-runner.is-running .mascot-run-frame.run-1 {
        animation-delay: 0s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-2 {
        animation-delay: 0.08s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-3 {
        animation-delay: 0.16s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-4 {
        animation-delay: 0.24s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-5 {
        animation-delay: 0.32s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-6 {
        animation-delay: 0.40s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-7 {
        animation-delay: 0.48s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-8 {
        animation-delay: 0.56s;
    }

    .mascot-runner.is-running .mascot-run-frame.run-9 {
        animation-delay: 0.64s;
    }

.mascot-runner.is-finished .mascot-finish-frame.finish-1 {
    animation: mascotFinishFrame1 .64s steps(1,end) infinite;
}

.mascot-runner.is-finished .mascot-finish-frame.finish-2 {
    animation: mascotFinishFrame2 .64s steps(1,end) infinite;
}

/* 1. ???@?]?w???? plane ?v???????e???? */
/* 1. ???@?]?w???? plane ?v???????????e?????]???b???B???w animation-name?^ */
.mascot-runner.is-flight .mascot-plane-frame {
    animation-duration: 0.72s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

    /* 2. ?? 1 ~ 10 ?i???????U???{?????v?M?????????v???W?? */
    .mascot-runner.is-flight .mascot-plane-frame.plane-1 {
        animation-name: planeFrame1;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-2 {
        animation-name: planeFrame2;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-3 {
        animation-name: planeFrame3;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-4 {
        animation-name: planeFrame4;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-5 {
        animation-name: planeFrame5;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-6 {
        animation-name: planeFrame6;
    }
    /* ???????~???|???D */
    .mascot-runner.is-flight .mascot-plane-frame.plane-7 {
        animation-name: planeFrame7;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-8 {
        animation-name: planeFrame8;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-9 {
        animation-name: planeFrame9;
    }

    .mascot-runner.is-flight .mascot-plane-frame.plane-10 {
        animation-name: planeFrame10;
    }

/* 3. ?U?i?????M???????????????????]100% ???? 10 ?????^ */
@keyframes planeFrame1 {
    0%, 5% {
        opacity: 1;
    }

    5.01%, 100% {
        opacity: 0;
    }
}

/* ???? 2 ?i???????q 5.01% ?N?G?_?A?@???????? 20%?]?h?????_?l???????|?????^ */
@keyframes planeFrame2 {
    0%, 5% {
        opacity: 0;
    }

    5.01%, 20% {
        opacity: 1;
    }

    20.01%, 100% {
        opacity: 0;
    }
}

@keyframes planeFrame3 {
    0%, 20% {
        opacity: 0;
    }

    20.01%, 30% {
        opacity: 1;
    }

    30.01%, 100% {
        opacity: 0;
    }
}

@keyframes planeFrame4 {
    0%, 30% {
        opacity: 0;
    }

    30.01%, 40% {
        opacity: 1;
    }

    40.01%, 100% {
        opacity: 0;
    }
}

@keyframes planeFrame5 {
    0%, 40% {
        opacity: 0;
    }

    40.01%, 50% {
        opacity: 1;
    }

    50.01%, 100% {
        opacity: 0;
    }
}

@keyframes planeFrame6 {
    0%, 50% {
        opacity: 0;
    }

    50.01%, 60% {
        opacity: 1;
    }

    60.01%, 100% {
        opacity: 0;
    }
}

@keyframes planeFrame7 {
    0%, 60% {
        opacity: 0;
    }

    60.01%, 70% {
        opacity: 1;
    }

    70.01%, 100% {
        opacity: 0;
    }
}

@keyframes planeFrame8 {
    0%, 70% {
        opacity: 0;
    }

    70.01%, 80% {
        opacity: 1;
    }

    80.01%, 100% {
        opacity: 0;
    }
}
/* ???? 9 ?i???y?L???????? 5%?A?h?????? 10 ?i???b???I???|?????? */
@keyframes planeFrame9 {
    0%, 80% {
        opacity: 0;
    }

    80.01%, 95% {
        opacity: 1;
    }

    95.01%, 100% {
        opacity: 0;
    }
}

/* ?N?? 10 ?i?????G?_?????Y?u?A?u?b?????? 95.01% ~ 100% ???o */
@keyframes planeFrame10 {
    0%, 95% {
        opacity: 0;
    }

    95.01%, 100% {
        opacity: 1;
    }
}


.mascot-runner.style-run .mascot-shadow {
    opacity: .28;
}

.mascot-runner.style-finish .mascot-shadow {
    opacity: .32;
}

.mascot-runner.style-plane .mascot-shadow {
    opacity: .22;
    transform: scale(.86);
}

.mascot-runner .finish-sparkle {
    opacity: 0;
    animation: mascotSparkle .9s ease-in-out infinite;
}

    .mascot-runner .finish-sparkle:nth-child(2) {
        animation-delay: .2s;
    }

    .mascot-runner .finish-sparkle:nth-child(3) {
        animation-delay: .4s;
    }

.route-line.active-segment {
    stroke-width: 10;
}

@keyframes mascotRunSequence {
    0%, 11.11% {
        opacity: 1;
    }

    11.12%, 100% {
        opacity: 0;
    }
}

@keyframes mascotFinishFrame1 {
    0%,49.99% {
        opacity: 1
    }

    50%,100% {
        opacity: 0
    }
}

@keyframes mascotFinishFrame2 {
    0%,49.99% {
        opacity: 0
    }

    50%,100% {
        opacity: 1
    }
}

@keyframes mascotSparkle {
    0%,100% {
        opacity: 0;
        transform: scale(.72)
    }

    45% {
        opacity: 1;
        transform: scale(1.12)
    }
}