.login-screen {
    background: #f0ede3 url('images/cover/background.webp') center center / cover no-repeat;
    color: #285957;
    isolation: isolate;
}
.cover-content {
    position: absolute;
    left: 9%;
    top: 30%;
    width: 39%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: coverArrive .7s ease-out both;
}
.cover-title {
    margin: 0;
    width: 100%;
    color: #285957;
    font: 400 clamp(64px, 6vw, 124px)/1.2 'GameTitle', 'STKaiti', 'KaiTi', serif;
    letter-spacing: .05em;
    white-space: nowrap;
}
.cover-subtitle {
    margin: 24px 0 37px 5px;
    color: #627c72;
    font: 400 clamp(16px, 1.1vw, 22px)/1.8 'GameBody', 'Microsoft YaHei', sans-serif;
    letter-spacing: .14em;
}
.login-screen .login-start-btn {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    flex: none;
    width: 198px;
    height: 55px;
    margin-left: 5px;
    padding: 0 24px;
    border: 1px solid #507772;
    border-radius: 5px 9px 5px 9px;
    background: #e3ebe2;
    color: #285957;
    font: 400 21px/1 'GameBody', 'Microsoft YaHei', sans-serif;
    letter-spacing: .1em;
    box-shadow: none;
    animation: none;
    filter: none;
    transition: transform .16s ease, background-color .16s ease;
}
.login-screen .login-start-btn:hover {
    transform: translateY(-2px);
    background-color: #d7e5da;
    animation: none;
    filter: none;
}
.login-screen .login-start-btn:active { transform: translateY(1px); }
.login-screen .login-start-btn:focus-visible { outline: 3px solid #b77d64; outline-offset: 5px; }
.cover-button-arrow { font: 400 23px/1 sans-serif; letter-spacing: 0; }
@keyframes coverArrive {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 1100px) and (min-width: 701px) {
    .cover-content { left: 8%; top: 27%; width: 40%; }
    .cover-subtitle { margin-top: 18px; margin-bottom: 26px; }
    .login-screen .login-start-btn { width: 175px; height: 49px; font-size: 18px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .login-screen { background-position: 67% center; }
    .login-screen::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(240,237,227,.95), rgba(240,237,227,.8) 36%, transparent 66%);
        z-index: -1;
        pointer-events: none;
    }
    .cover-content { top: 15%; left: 9%; width: 82%; max-width: 510px; }
    .cover-title { font-size: clamp(58px, 15vw, 92px); }
    .cover-subtitle { font-size: 18px; margin-top: 18px; margin-bottom: 26px; }
    .login-screen .login-start-btn { width: 180px; height: 51px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .cover-content { animation: none; }
    .login-screen .login-start-btn { transition: none; }
}

.cover-content { width: 39%; }
.cover-title { line-height: 1; white-space: normal; }
.cover-title-art {
    display: block;
    width: min(100%, 610px);
    height: auto;
    max-height: none;
}
.cover-subtitle { margin-top: 22px; margin-bottom: 32px; }
.login-screen .login-start-btn {
    display: block;
    width: clamp(210px, 13.8vw, 270px);
    height: auto;
    min-height: 48px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.cover-button-art { display: block; width: 100%; height: auto; pointer-events: none; }
.login-screen .login-start-btn:hover {
    background: transparent;
    filter: saturate(1.08);
    transform: translateY(-2px);
}
.login-screen .login-start-btn::after { display: none; }
@media (max-width: 1100px) and (min-width: 701px) {
    .login-screen .login-start-btn { width: 212px; height: auto; }
    .cover-subtitle { margin-top: 18px; margin-bottom: 25px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .cover-content { width: 82%; }
    .cover-title-art { width: 100%; }
    .login-screen .login-start-btn { width: 224px; height: auto; }
    .cover-subtitle { margin-top: 18px; margin-bottom: 25px; }
}

.cover-content { left: 7.5%; top: 26%; width: 44%; max-width: 850px; }
.cover-title-art { width: min(100%, 740px); }
.cover-subtitle { margin-top: 20px; margin-bottom: 28px; }
.cover-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.login-screen .cover-menu-btn {
    position: relative;
    display: block;
    flex: none;
    left: auto;
    top: auto;
    width: clamp(210px, 13.8vw, 270px);
    height: auto;
    min-height: 48px;
    margin-left: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transform: none;
    animation: none;
    filter: none;
    cursor: pointer;
    transition: transform .16s ease, filter .16s ease;
}
.login-screen .cover-menu-btn:hover:not(:disabled) { transform: translateY(-2px); filter: saturate(1.08); background: transparent; }
.login-screen .cover-menu-btn:active:not(:disabled) { transform: translateY(1px); }
.login-screen .cover-menu-btn:focus-visible { outline: 3px solid #b77d64; outline-offset: 5px; }
.login-screen .cover-menu-btn:disabled { opacity: .45; filter: saturate(.55); cursor: default; }
.login-screen .cover-menu-btn:disabled:hover { transform: none; }
.cover-save-status { margin: 13px 0 0 7px; color: #667b72; font: 400 14px/1.6 'GameBody', 'Microsoft YaHei', sans-serif; }
@media (max-width: 1100px) and (min-width: 701px) {
    .cover-content { left: 7%; top: 23%; width: 45%; }
    .login-screen .cover-menu-btn { width: 210px; }
    .cover-subtitle { margin-bottom: 23px; }
    .cover-actions { gap: 10px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .cover-content { left: 8%; top: 11%; width: 84%; }
    .cover-title-art { width: 100%; }
    .login-screen .cover-menu-btn { width: 220px; }
    .cover-actions { gap: 9px; }
    .cover-subtitle { margin-top: 15px; margin-bottom: 20px; }
    .cover-save-status { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .login-screen .cover-menu-btn { transition: none; } }



.login-screen { background: #f0ede3; overflow: hidden; }
.login-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(240,237,227,.22), rgba(240,237,227,.12) 40%, transparent 62%);
}
.cover-scene {
    position: absolute;
    inset: -12px;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(var(--cover-pan-x, 0px), var(--cover-pan-y, 0px), 0);
    transition: transform 1.4s cubic-bezier(.2,.7,.3,1);
}
.cover-scene-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: url('images/cover/background.webp') center center / cover no-repeat;
    animation: riverSceneDrift 18s ease-in-out infinite alternate;
    transform-origin: 70% 52%;
}
.cover-water { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cover-water path {
    fill: none;
    stroke: #f5f3de;
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0;
    animation: riverWaterLight 7.5s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
.cover-water path:nth-child(even) { stroke: #79a79d; stroke-width: 1.5; }
.cover-water ellipse {
    fill: none;
    stroke: #759e91;
    stroke-width: 1.1;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: riverRipple 8.5s ease-out infinite;
    animation-delay: var(--delay, 0s);
}
.cover-leaf-flight {
    position: absolute;
    left: var(--leaf-left);
    top: -7%;
    width: var(--leaf-size, 17px);
    opacity: 0;
    perspective: 300px;
    animation: willowLeafFall var(--leaf-duration, 14s) linear infinite;
    animation-delay: var(--leaf-delay, 0s);
    will-change: transform, opacity;
}
.cover-leaf-sway {
    width: 100%;
    animation: willowLeafSway var(--sway-duration, 4s) ease-in-out infinite;
    animation-delay: var(--leaf-delay, 0s);
    transform-origin: center 35%;
}
.cover-leaf {
    display: block;
    width: 100%;
    height: auto;
    fill: #8d9f75;
    animation: willowLeafTurn var(--flip-duration, 6s) linear infinite;
    animation-delay: var(--leaf-delay, 0s);
    transform-origin: center;
    backface-visibility: visible;
}
.cover-leaves {
    position: absolute;
    inset: 0;
}
.cover-leaves--river {
    clip-path: polygon(44% 0, 100% 0, 100% 14%, 78% 14%, 69% 30%, 63% 52%, 65% 100%, 42% 100%);
}
.cover-leaves--right {
    /* A separate right-hand corridor keeps leaves visible beside the character. */
    clip-path: polygon(82% 0, 100% 0, 100% 100%, 87% 100%, 89% 58%, 91% 30%, 87% 16%, 82% 16%);
}
.cover-leaf path { stroke: #72866b; stroke-width: .7; }
.cover-leaf-flight:nth-child(even) .cover-leaf { fill: #a1ad7d; }
.cover-leaf-flight:nth-child(3n) .cover-leaf { fill: #84a18a; }
.cover-content { z-index: 3; left: 5.8%; top: 19%; width: 52%; max-width: 1000px; }
.cover-title {
    position: relative;
    width: min(100%, 960px);
    transform-origin: center;
    animation: inkTitleFloat 5s ease-in-out 1.2s infinite;
}
.cover-title-art {
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 55%, transparent 100%);
    -webkit-mask-size: 240% 100%;
    mask-size: 240% 100%;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: inkTitleReveal 1.2s cubic-bezier(.2,.6,.25,1) both;
}
.cover-title::after { content: none; animation: none; }
.cover-actions { margin-top: 42px; gap: 20px; }
.cover-save-status[hidden] { display: none !important; }
#login-screen .cover-menu-btn {
    --tag-opacity: 1;
    animation: silkTagEntrance .65s cubic-bezier(.2,.8,.25,1) .95s backwards;
    transform-origin: 12% 50%;
    transition: transform .25s cubic-bezier(.2,.8,.25,1), filter .25s ease;
}
.login-screen #login-continue-btn { animation-delay: 1.15s; }
.cover-menu-btn .cover-button-art {
    transform-origin: 9% 50%;
    animation: silkTagSway 3.8s ease-in-out 1.6s infinite;
}
#login-continue-btn .cover-button-art { animation-duration: 4.3s; animation-delay: 2.2s; }
.login-screen .cover-menu-btn:disabled { --tag-opacity: .45; }
.login-screen #login-continue-btn:disabled {
    --tag-opacity: .45;
    opacity: .45;
    filter: grayscale(1);
    transition: none;
}
.cover-menu-btn:disabled .cover-button-art { animation: none; transform: none; }
.login-screen .cover-menu-btn:hover:not(:disabled) { transform: translate(8px, -2px) scale(1.06); filter: saturate(1.08) drop-shadow(0 5px 4px rgba(61,92,73,.16)); }
.login-screen .cover-menu-btn:active:not(:disabled) { transform: translate(2px, 1px) scale(.95); }
.cover-motion-paused .cover-scene-art,
.cover-motion-paused .cover-water *,
.cover-motion-paused .cover-leaf-flight,
.cover-motion-paused .cover-leaf-sway,
.cover-motion-paused .cover-leaf,
.cover-motion-paused .cover-title,
.cover-motion-paused .cover-title-art,
#login-screen.cover-motion-paused .cover-menu-btn,
.cover-motion-paused .cover-button-art { animation-play-state: paused; }
@keyframes riverSceneDrift {
    from { transform: translate3d(-2px, 0, 0) scale(1.012); }
    to { transform: translate3d(3px, -2px, 0) scale(1.018); }
}
@keyframes riverWaterLight {
    0%, 100% { opacity: 0; transform: translateX(-9px); }
    35% { opacity: .38; }
    70% { opacity: .16; transform: translateX(11px); }
}
@keyframes riverRipple {
    0% { opacity: 0; transform: scale(.45); }
    20% { opacity: .25; }
    80%, 100% { opacity: 0; transform: scale(1.65); }
}
@keyframes willowLeafFall {
    0% { opacity: 0; transform: translate3d(0, -20px, 0); }
    10% { opacity: var(--leaf-opacity, .6); }
    12% { transform: translate3d(var(--wind-early), 10vh, 0); }
    30% { transform: translate3d(var(--wind-mid), 31vh, 0); }
    55% { transform: translate3d(var(--wind-late), 60vh, 0); }
    85% { opacity: var(--leaf-opacity, .6); }
    100% { opacity: 0; transform: translate3d(var(--wind), 112vh, 0); }
}
@keyframes willowLeafSway {
    0%, 100% { transform: translateX(-9px) rotate(-24deg); }
    50% { transform: translateX(11px) rotate(29deg); }
}
@keyframes willowLeafTurn {
    0% { transform: rotateY(-20deg) rotateZ(-8deg); }
    25% { transform: rotateY(65deg) rotateZ(9deg); }
    50% { transform: rotateY(160deg) rotateZ(-4deg); }
    75% { transform: rotateY(250deg) rotateZ(11deg); }
    100% { transform: rotateY(340deg) rotateZ(-8deg); }
}
@keyframes inkTitleReveal {
    from { opacity: 0; transform: translateY(12px) scale(.96); -webkit-mask-position: 100% 0%; mask-position: 100% 0%; }
    to { opacity: 1; transform: translateY(0) scale(1); -webkit-mask-position: 0% 0%; mask-position: 0% 0%; }
}
@keyframes inkTitleFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.015); }
}
@keyframes silkTagEntrance {
    0% { opacity: 0; transform: translateX(-30px) rotate(-4deg) scale(.94); }
    72% { opacity: var(--tag-opacity); transform: translateX(3px) rotate(.8deg) scale(1.02); }
    100% { opacity: var(--tag-opacity); transform: none; }
}
@keyframes silkTagSway {
    0%, 100% { transform: translateY(0) rotate(-1.6deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}
@media (max-width: 1100px) and (min-width: 701px) {
    .cover-content { left: 5.8%; top: 17%; width: 52%; }
    .cover-actions { margin-top: 32px; }
}
@media (max-width: 700px) and (orientation: portrait) {
    .cover-content { left: 6%; top: 11%; width: 88%; }
    .cover-title { width: 100%; }
    .cover-scene-art { background-position: 67% center; }
    .login-screen::before { background: linear-gradient(180deg, rgba(240,237,227,.96), rgba(240,237,227,.75) 39%, transparent 70%); }
    .cover-leaf-flight { width: min(var(--leaf-size, 17px), 18px); }
    .cover-actions { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .cover-scene { transform: none; transition: none; }
    .cover-scene-art { animation: none; transform: scale(1.012); }
    .cover-water *, .cover-leaf-flight { animation: none; opacity: 0; }
    .cover-leaf, .cover-leaf-sway { animation: none; }
    .cover-title, .cover-title-art, .cover-menu-btn .cover-button-art { animation: none; transform: none; }
    .cover-title-art { -webkit-mask-image: none; mask-image: none; opacity: 1; }
    #login-screen .cover-menu-btn { animation: none; transition: none; }
    .login-screen .cover-menu-btn:hover:not(:disabled) { transform: none; }
}



.cover-video-stack { position:absolute; inset:0; z-index:0; }
.cover-video-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; }
#login-screen .cover-water,#login-screen .cover-leaves { z-index:1; }
.cover-video-static .cover-video-layer { visibility:hidden; }
.cover-video-static .cover-scene { transform:none; transition:none; }
.cover-video-static .cover-scene-art,.cover-video-static .cover-water *, .cover-video-static .cover-leaf-flight,.cover-video-static .cover-leaf-sway,.cover-video-static .cover-leaf { animation-play-state:paused; }