:root {
    color-scheme: dark;
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    --app-width: 100vw;
    --app-height: 100vh;
    --app-left: 0px;
    --app-top: 0px;
}

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #050b16;
    overscroll-behavior: none;
}

body {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

#GameDiv {
    position: relative;
    width: var(--app-width);
    height: var(--app-height);
    overflow: hidden;
    background: #111827;
    box-shadow: none;
    transform-origin: top left;
}

body.is-mobile-portrait #GameDiv {
    position: fixed;
    left: var(--app-left);
    top: var(--app-top);
    width: var(--app-height);
    height: var(--app-width);
    transform: translateX(var(--app-width)) rotate(90deg);
}

#GameCanvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    visibility: hidden;
    outline: none;
}

#Cocos2dGameContainer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

#Cocos2dGameContainer canvas {
    width: 100% !important;
    height: 100% !important;
}

#splash {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff7d3;
    background: #1a1236 url("res/raw-assets/resources/textures/login/bg.png") center / cover no-repeat;
}

.splash-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(61,24,102,.12) 0, rgba(23,7,51,.3) 42%, rgba(6,5,23,.72) 100%),
        linear-gradient(180deg, rgba(26,18,61,.2), rgba(6,6,25,.35));
    box-shadow: inset 0 0 110px rgba(5,3,20,.65);
}

.splash-content {
    position: relative;
    z-index: 2;
    display: flex;
    width: min(660px, 82%);
    flex-direction: column;
    align-items: center;
    text-align: center;
    filter: drop-shadow(0 15px 18px rgba(9,3,25,.5));
}

.splash-ribbon {
    padding: 6px 22px;
    color: #ffedb0;
    border: 1px solid rgba(255,219,105,.72);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(91,27,124,.88), rgba(12,125,156,.85));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 16px rgba(34,6,61,.35);
    font-size: clamp(11px, 1.25vw, 15px);
    font-weight: 800;
    letter-spacing: .22em;
}

.splash-brand {
    margin-top: 9px;
    color: #fff0a0;
    font-size: clamp(43px, 7vw, 76px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .12em;
    -webkit-text-stroke: 2px #71300d;
    text-shadow: 0 5px 0 #92400e, 0 0 12px #ffb33a, 0 0 30px rgba(255,178,49,.68);
}

.splash-divider {
    display: grid;
    grid-template-columns: minmax(65px, 1fr) auto minmax(65px, 1fr);
    align-items: center;
    gap: 13px;
    width: min(440px, 88%);
    color: #ffe8a7;
    font-size: clamp(13px, 1.45vw, 18px);
    letter-spacing: .42em;
}

.splash-divider span {
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffdc72);
    box-shadow: 0 0 8px rgba(255,208,79,.6);
}

.splash-divider span:last-child { transform: scaleX(-1); }

.splash-cards {
    position: relative;
    width: 150px;
    height: 94px;
    margin: 9px 0 2px;
}

.splash-cards i {
    position: absolute;
    left: 50%;
    top: 5px;
    display: grid;
    width: 58px;
    height: 80px;
    place-items: center;
    color: #1c2757;
    border: 3px solid #fff6d2;
    border-radius: 9px;
    background: linear-gradient(145deg, #fffef6, #e9dab0);
    box-shadow: 0 5px 0 #7d3c12, 0 8px 15px rgba(8,3,21,.5), inset 0 0 0 1px rgba(133,70,12,.25);
    font: normal 900 31px/1 Georgia, serif;
    transform-origin: 50% 95%;
}

.splash-cards i:nth-child(1) { transform: translateX(-88%) rotate(-17deg); }
.splash-cards i:nth-child(2) { z-index: 2; transform: translateX(-50%); }
.splash-cards i:nth-child(3) { z-index: 1; color: #d72c39; transform: translateX(-12%) rotate(17deg); }

.splash-loading-title {
    margin: 1px 0 8px;
    color: #fff1c3;
    font-size: clamp(14px, 1.6vw, 19px);
    font-weight: 800;
    letter-spacing: .2em;
    text-shadow: 0 2px 4px rgba(0,0,0,.7);
}

.progress-wrap {
    display: grid;
    grid-template-columns: 1fr 52px;
    align-items: center;
    gap: 11px;
    width: min(530px, 88%);
    padding: 8px 10px 8px 13px;
    border: 2px solid #d7a642;
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(45,35,69,.96), rgba(14,12,34,.97));
    box-shadow: 0 4px 0 #74380d, inset 0 0 0 1px rgba(255,236,167,.2), 0 10px 24px rgba(5,2,18,.5);
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 13px;
    overflow: hidden;
    border: 1px solid rgba(255,222,119,.68);
    border-radius: 999px;
    background: rgba(3,5,20,.84);
    box-shadow: inset 0 2px 4px rgba(0,0,0,.75);
}

.progress-bar span {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #047da9, #19d6e9 55%, #a1f8ff);
    box-shadow: 0 0 10px rgba(55,229,244,.7), inset 0 2px 0 rgba(255,255,255,.45);
    transition: width .2s ease;
}

.progress-bar span::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.55) 42%, transparent 63%);
    animation: progressShine 1.45s linear infinite;
}

.progress-percent {
    color: #ffe28a;
    font-size: 14px;
    font-weight: 900;
    text-align: right;
    text-shadow: 0 0 7px rgba(255,193,44,.5);
}

.hint {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: #e4d7b4;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
}

.hint i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5be4f2;
    box-shadow: 0 0 7px #37d8e8;
    animation: loadDot 1.1s ease-in-out infinite;
}

.hint i:nth-of-type(2) { animation-delay: .14s; }
.hint i:nth-of-type(3) { animation-delay: .28s; }

.splash-foot {
    margin-top: 9px;
    color: rgba(255,239,197,.72);
    font-size: 11px;
    letter-spacing: .1em;
}

.splash-suit {
    position: absolute;
    z-index: 1;
    color: rgba(255,231,153,.09);
    font: 900 clamp(130px, 22vw, 280px)/1 Georgia, serif;
    text-shadow: 0 0 35px rgba(119,55,149,.28);
    animation: splashPulse 3.4s ease-in-out infinite;
}

.splash-suit-left { left: 2%; bottom: 3%; transform: rotate(-16deg); }
.splash-suit-right { right: 2%; top: 4%; color: rgba(255,114,129,.075); transform: rotate(14deg); animation-delay: -1.7s; }

@keyframes progressShine {
    from { transform: translateX(-110%); }
    to { transform: translateX(120%); }
}

@keyframes loadDot {
    0%, 100% { opacity: .35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes splashPulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.auth-layer {
    position: absolute;
    inset: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.6vh, 24px);
    background:
        radial-gradient(circle at 22% 48%, rgba(95, 38, 140, .16), transparent 34%),
        radial-gradient(circle at 78% 45%, rgba(0, 182, 218, .12), transparent 32%),
        linear-gradient(90deg, rgba(7, 5, 25, .52), rgba(20, 8, 42, .18) 48%, rgba(6, 7, 25, .5)),
        #1a1236 url("res/raw-assets/resources/textures/login/bg.png") center / cover no-repeat;
    transition: opacity .2s ease, visibility .2s ease;
}

.auth-layer.is-hidden {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.auth-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(350px, 1fr) minmax(390px, 448px);
    align-items: center;
    gap: clamp(28px, 4.5vw, 72px);
    width: min(1020px, 94%);
    max-height: 96%;
}

.auth-hero {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    color: #fff7cd;
    text-align: center;
    filter: drop-shadow(0 14px 18px rgba(14, 3, 30, .45));
}

.hero-ribbon {
    padding: 7px 24px;
    color: #fff2b5;
    border: 1px solid rgba(255, 224, 125, .72);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(87, 32, 116, .8), rgba(29, 116, 145, .8));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 5px 18px rgba(38,7,64,.28);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2em;
}

.hero-title {
    margin-top: 12px;
    color: #fff2a8;
    font-size: clamp(42px, 6.2vw, 72px);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: .1em;
    -webkit-text-stroke: 2px #71310f;
    text-shadow: 0 5px 0 #933f12, 0 0 12px #ffb94d, 0 0 30px rgba(255,179,55,.65);
}

.hero-rule {
    display: grid;
    grid-template-columns: minmax(54px, 1fr) auto minmax(54px, 1fr);
    align-items: center;
    gap: 12px;
    width: min(390px, 92%);
    margin: 8px 0 4px;
    color: #ffe6a0;
    font-size: 16px;
    letter-spacing: .45em;
}

.hero-rule span {
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd974);
    box-shadow: 0 0 8px rgba(255,210,92,.55);
}

.hero-rule span:last-child { transform: scaleX(-1); }

.hero-cards {
    position: relative;
    width: 215px;
    height: 134px;
    margin: 8px 0 0;
}

.hero-card {
    position: absolute;
    left: 50%;
    top: 8px;
    display: grid;
    width: 82px;
    height: 116px;
    place-items: center;
    color: #20203f;
    border: 4px solid #fff8d9;
    border-radius: 12px;
    background: linear-gradient(145deg, #fffdf3, #e9ddba);
    box-shadow: 0 8px 0 #8b4618, 0 12px 20px rgba(15,5,26,.5), inset 0 0 0 2px rgba(135,80,20,.22);
    font: normal 900 44px/1 Georgia, serif;
    transform-origin: 50% 95%;
}

.hero-card-left { transform: translateX(-85%) rotate(-17deg); }
.hero-card-middle { z-index: 2; color: #162a64; transform: translateX(-50%); }
.hero-card-right { z-index: 1; color: #d92e3a; transform: translateX(-15%) rotate(17deg); }

.hero-copy {
    margin: 7px 0 11px;
    color: #fff1c6;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 800;
    letter-spacing: .08em;
    text-shadow: 0 2px 4px rgba(0,0,0,.65);
}

.hero-feature {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.hero-feature span {
    padding: 5px 11px;
    color: #f8e9bc;
    border: 1px solid rgba(250,218,132,.45);
    border-radius: 7px;
    background: rgba(24, 13, 50, .54);
    font-size: 12px;
    font-weight: 700;
}

.auth-card {
    position: relative;
    width: 100%;
    max-height: 96%;
    padding: clamp(18px, 2.8vh, 27px) clamp(20px, 2.8vw, 30px) 17px;
    overflow: auto;
    color: #fff5d8;
    border: 3px solid #f8cf65;
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.14), transparent 24%),
        radial-gradient(circle at 86% 8%, rgba(99,59,150,.5), transparent 30%),
        linear-gradient(180deg, rgba(51,51,76,.98), rgba(25,20,48,.985));
    box-shadow:
        0 7px 0 #804511,
        0 17px 40px rgba(3,2,15,.62),
        inset 0 0 0 2px rgba(255,242,183,.22),
        inset 0 -14px 30px rgba(10,5,25,.35);
    scrollbar-width: thin;
    scrollbar-color: #d9a83d rgba(16,11,32,.5);
    touch-action: pan-y;
}

.auth-card::before,
.auth-card::after {
    position: absolute;
    top: 13px;
    width: 58px;
    height: 12px;
    content: "";
    border-top: 2px solid #ffdf85;
    border-bottom: 1px solid rgba(255,221,128,.5);
}

.auth-card::before { left: 16px; transform: skewX(-32deg); }
.auth-card::after { right: 16px; transform: skewX(32deg); }

.card-glow {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    border: 1px solid rgba(255,232,165,.2);
    border-radius: 16px;
}

.auth-heading {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 2px 0 13px;
    text-align: center;
}

.auth-title {
    color: #ffe681;
    font-size: clamp(25px, 4vh, 34px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .16em;
    -webkit-text-stroke: 1px #6a310a;
    text-shadow: 0 3px 0 #8f4311, 0 0 12px rgba(255,194,63,.45);
}

.auth-subtitle {
    margin-top: 4px;
    color: #d7caa8;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
}

.auth-crown {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e1ae43;
    font-size: 11px;
}

.auth-crown::before,
.auth-crown::after {
    width: 24px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, #d7a741);
}

.auth-crown:first-child { justify-content: flex-end; }
.auth-crown:last-child { transform: scaleX(-1); }

.auth-tabs {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 13px;
    padding: 4px;
    border: 1px solid rgba(236,199,100,.38);
    border-radius: 12px;
    background: rgba(11, 10, 29, .62);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.4);
}

.auth-tab, .auth-submit {
    position: relative;
    border: 1px solid #b98328;
    border-radius: 9px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
    overflow: hidden;
}

.auth-tab {
    min-height: 40px;
    color: #e9d9b0;
    background: linear-gradient(180deg, #4b435f, #2d2944);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 rgba(0,0,0,.45);
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
}

.auth-tab.is-active {
    color: #fff;
    border-color: #9af4ff;
    background: linear-gradient(180deg, #32d7e8, #0686b1 58%, #065c86);
    box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #063e60, 0 0 14px rgba(31,202,230,.26);
}

.auth-tab span,
.auth-submit span { position: relative; z-index: 1; }

.auth-tab::after,
.auth-submit::after {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 2px;
    height: 38%;
    content: "";
    border-radius: 999px;
    background: linear-gradient(rgba(255,255,255,.32), rgba(255,255,255,0));
    pointer-events: none;
}

.auth-form { display: grid; gap: 9px; }
.auth-form[hidden] { display: none; }

.auth-form label {
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 9px;
    color: #f5dfaa;
    font-size: 14px;
    font-weight: 800;
    text-shadow: 0 1px 2px rgba(0,0,0,.7);
}

.auth-form input {
    width: 100%;
    min-width: 0;
    height: 43px;
    padding: 0 13px;
    color: #fff9e8;
    caret-color: #61eafa;
    border: 2px solid #a86c28;
    border-radius: 10px;
    outline: none;
    background: linear-gradient(180deg, rgba(15,17,39,.96), rgba(29,22,53,.95));
    font: inherit;
    box-shadow: inset 0 2px 7px rgba(0,0,0,.56), 0 1px 0 rgba(255,231,159,.16);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.auth-form input::placeholder { color: #89839a; }

.auth-form input:focus {
    border-color: #4ee5f4;
    background: linear-gradient(180deg, rgba(16,27,51,.98), rgba(27,28,63,.98));
    box-shadow: inset 0 2px 7px rgba(0,0,0,.5), 0 0 0 3px rgba(55,215,235,.15), 0 0 13px rgba(38,209,231,.2);
}

.auth-submit {
    min-height: 51px;
    margin-top: 6px;
    color: #fff8d7;
    font-size: 20px;
    letter-spacing: .16em;
    border-color: #fff0a8;
    background: linear-gradient(180deg, #ffe078 0, #f5a924 47%, #d0730a 72%, #a84a05 100%);
    box-shadow: 0 5px 0 #6f2f08, inset 0 2px 0 rgba(255,255,255,.66), 0 0 18px rgba(244,150,25,.22);
    text-shadow: 0 2px 0 #7c3507, 0 0 4px rgba(88,31,2,.7);
}

.auth-submit:active { transform: translateY(3px); box-shadow: 0 2px 0 #784411; }
.auth-submit:disabled { cursor: wait; filter: grayscale(.45); opacity: .72; }

.auth-message {
    position: relative;
    min-height: 21px;
    margin-top: 9px;
    text-align: center;
    color: #c9bc9e;
    font-size: 13px;
    font-weight: 700;
}

.auth-message.is-error { color: #ff8585; text-shadow: 0 0 8px rgba(255,52,52,.25); }

.auth-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
    color: #8f89a1;
    font-size: 11px;
}

.auth-foot i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c79a3e;
    box-shadow: 0 0 6px #f3c35a;
}

#web-error {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 30;
    padding: 10px 14px;
    color: #fee2e2;
    border: 1px solid #ef4444;
    border-radius: 8px;
    background: rgba(127,29,29,.94);
    white-space: pre-wrap;
    cursor: pointer;
    user-select: none;
}

@media (max-width: 820px) {
    .auth-shell { display: block; width: min(448px, 91%); }
    .auth-hero { display: none; }
}

@media (max-height: 650px) {
    .auth-shell { grid-template-columns: minmax(290px, 1fr) minmax(365px, 425px); gap: 28px; }
    .hero-title { font-size: 48px; }
    .hero-cards { height: 108px; transform: scale(.82); margin: -2px 0; }
    .hero-copy { margin-top: 0; }
    .auth-card { padding: 15px 22px 12px; }
    .auth-heading { margin-bottom: 9px; }
    .auth-title { font-size: 26px; }
    .auth-subtitle { font-size: 11px; }
    .auth-tabs { margin-bottom: 9px; }
    .auth-form { gap: 6px; }
    .auth-form input { height: 37px; }
    .auth-submit { min-height: 43px; margin-top: 3px; }
    .auth-message { margin-top: 6px; }
}

@media (max-height: 520px) {
    .auth-hero { display: none; }
    .auth-layer { padding: 5px; }
    .auth-shell { display: block; width: min(520px, 94%); max-height: 98%; }
    .auth-card { padding: 8px 14px 7px; border-width: 2px; border-radius: 15px; }
    .auth-heading { margin: 0 0 4px; }
    .auth-subtitle, .auth-foot { display: none; }
    .auth-title { font-size: 20px; }
    .auth-tabs { margin-bottom: 5px; padding: 3px; }
    .auth-tab { min-height: 31px; }
    .auth-form { gap: 4px; }
    .auth-form label { grid-template-columns: 58px 1fr; gap: 6px; font-size: 12px; }
    .auth-form input { height: 33px; padding: 0 10px; }
    .auth-submit { min-height: 37px; margin-top: 2px; font-size: 17px; }
    .auth-message { min-height: 15px; margin-top: 3px; font-size: 11px; }
}