:root {
    --tg-bg: #ffffff;
    --tg-text: #111111;
    --tg-hint: #666666;
    --tg-link: #0a84ff;
    --tg-button: #0a84ff;
    --tg-button-text: #ffffff;
    --snake-size: 7rem;
    --snake-color: color-mix(in srgb, var(--tg-button), transparent 97%);
}


html[data-tg-theme="dark"] {
    --tg-bg: #17212b;
    --tg-text: #f5f6f7;
    --tg-hint: #9aa8b5;
    --tg-link: #66a7ff;
    --tg-button: #66a7ff;
    --tg-button-text: #111111;
}

* {
    --button-shadow: rgb(116, 116, 116);
    font-family: sans-serif;
}

html {
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
}


body {
    margin: 0;
    background: var(--tg-bg);
    color: var(--tg-text);
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    block-size: 100%;
    inline-size: 100%;
}

body.app-loading {
    opacity: 0;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--tg-bg);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity .35s ease;
}

body.app-entering::before {
    opacity: 1;
}

header {
    margin: 1rem;
    margin-block-start: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#icon {
    inline-size: 10rem;
    border-radius: 50%;
    display: block;
    margin-block-end: -1rem;
}

#title > h1 {
    font-family: sans-serif;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 600;
    color: var(--tg-link);
    font-weight: bolder;
    margin: 0;
}

#title > h1 > span {
    color: var(--tg-text);
}


a:link,
a:visited,
a:hover,
a:active {
    color: var(--tg-link);
    text-decoration: underline;
}

cap-widget {
    --cap-background: var(--tg-button);
    --cap-border-color: transparent;
    --cap-gap:1.2rem;
    --cap-color: var(--tg-button-text);
    --cap-border-radius: 12px;
    --cap-checkbox-size: 25px;
    --cap-checkbox-border: 2px solid var(--tg-button-text);
    --cap-checkbox-border-radius: 7px;
    --cap-checkbox-background: #ffffff;
    --cap-spinner-color: var(--tg-button-text);
    --cap-spinner-background-color: var(--tg-link);
    --cap-spinner-thickness: 3px;
    inline-size: 100%; /* 与 main.script.js 配合 */
}

cap-widget::part(attribution) {
    display: none;
}

/* cap-widget::part(captcha):hover {
    filter: brightness(0%)!important;
} */

#centerBox {
    margin: .3rem auto 0;
    inline-size: min(92vw, 440px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    max-inline-size: 24rem;
}

#centerBox>span {
    margin-block-end: 0.3rem;
    color: var(--tg-hint);
    text-align: center;
}

#appFooter {
    inline-size: 100%;
    margin-block-start: auto;
    padding: 0 0 0.9rem;
    display: flex;
    justify-content: center;
}

#notification {
    display: inline-block;
    font-size: small;
    min-block-size: 1.4em;
}

#notification.is-animating {
    animation: notification-fade-up .24s ease-out;
}


.snake-path {
    background-color: transparent;
    background-image:
        linear-gradient(135deg, var(--snake-color) 25%, transparent 25%),
        linear-gradient(225deg, var(--snake-color) 25%, transparent 25%),
        linear-gradient(45deg, var(--snake-color) 25%, transparent 25%),
        linear-gradient(315deg, var(--snake-color) 25%, transparent 25%);
    background-size: var(--snake-size) var(--snake-size);
    background-position: calc(var(--snake-size) * 0.5) 0, calc(var(--snake-size) * 0.5) 0, 0 0, 0 0;
    /* 应用动画：时间、线性过渡、无限循环 */
    animation: snake-move 2s linear infinite
}

@keyframes snake-move {
    from {
        background-position: calc(var(--snake-size) * 0.5) 0, calc(var(--snake-size) * 0.5) 0, 0 0, 0 0;
    }

    to {
        /* 让 X 轴或 Y 轴移动一个完整的单元格尺寸 (var(--snake-size))
           这里以水平向右移动为例
        */
        background-position:
            /* calc(var(--snake-size) * 1.5) 0,
            calc(var(--snake-size) * 1.5) 0,
            var(--snake-size) 0,
            var(--snake-size) 0; */
            calc(var(--snake-size) * 0.5) var(--snake-size),
            calc(var(--snake-size) * 0.5) var(--snake-size),
            0 var(--snake-size),
            0 var(--snake-size);
    }
}

@keyframes notification-fade-up {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

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

@media (prefers-reduced-motion: reduce) {
    body::before {
        transition: none;
    }

    body {
        transition: background-color .2s ease, color .2s ease;
    }

    #notification.is-animating {
        animation: none;
    }
}

#unsupport_input {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    margin-top: 8px;
    text-align: center;
    border: 1px solid var(--tg-hint, #ccc);
    border-radius: 12px;
    background-color: var(--tg-bg, #fff);
    color: var(--tg-text, #000);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}