/* 机甲三国 · 军备画报 / shared visual language */
:root {
    --paper:#f0ecdf;
    --ink:#252820;
    --red:#c4472c;
    --muted:#727466;
    --line:#c8c6b8;
    --white:#faf8f0;
    --text-muted:#727466;
    --serif:'Songti SC','STSong','SimSun',serif
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:90px
}

body {
    margin:0;
    color:var(--ink);
    font-family:'PingFang SC','Microsoft YaHei',sans-serif;
    background:var(--paper)
}

a {
    color:inherit;
    text-decoration:none
}

button,input {
    font:inherit
}

button,a,input {
    -webkit-tap-highlight-color:transparent
}

button {
    cursor:pointer
}

img {
    max-width:100%;
    display:block
}

button:focus-visible,a:focus-visible {
    outline:3px solid var(--red);
    outline-offset:5px
}

input:focus {
    outline:2px solid var(--red);
    outline-offset:2px
}

::selection {
    background:var(--red);
    color:var(--white)
}

.paper {
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.035' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")
}

.shell {
    width:min(1320px,calc(100% - 96px));
    margin:auto
}

.site-header {
    border-bottom:1px solid var(--ink);
    position:relative;
    z-index:5
}

.nav {
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px
}

.brand-mark {
    width:42px;
    height:46px;
    background:var(--red);
    color:var(--paper);
    font-family:var(--serif);
    font-size:29px;
    display:grid;
    place-items:center;
    border:3px double var(--paper);
    outline:1px solid var(--red)
}

.brand strong {
    font-family:var(--serif);
    font-size:24px;
    letter-spacing:3px;
    display:block
}

.brand small {
    display:block;
    font:9px monospace;
    letter-spacing:2px;
    margin-top:3px
}

.nav-links {
    display:flex;
    align-items:center;
    gap:35px;
    font-size:13px
}

.nav-links a:hover,.text-link:hover {
    color:var(--red)
}

.nav-links a[aria-current=page] {
    color:var(--red)
}

.nav-launch {
    background:var(--ink);
    color:var(--paper)!important;
    padding:13px 22px
}

.nav-launch span {
    margin-left:20px
}

.micro {
    font:11px/1.6 monospace;
    letter-spacing:2px;
    text-transform:uppercase
}

.eyebrow {
    font-size:12px;
    letter-spacing:3px;
    display:flex;
    align-items:center;
    gap:12px
}

.eyebrow:before {
    content:'';
    width:7px;
    height:7px;
    background:var(--red)
}

.hero {
    position:relative;
    min-height:715px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--ink);
    isolation:isolate;
    overflow:hidden
}

.hero-copy {
    position:relative;
    z-index:2;
    width:54%;
    padding:60px 0 88px;
    pointer-events:none
}

.hero-copy a {
    pointer-events:auto
}

.hero h1 {
    font-family:var(--serif);
    font-weight:900;
    font-size:clamp(72px,7.8vw,116px);
    line-height:1.06;
    letter-spacing:-5px;
    margin:29px 0 26px
}

.hero h1 em {
    color:var(--red);
    font-style:normal
}

.hero-copy p {
    max-width:365px;
    line-height:1.9;
    font-size:14px;
    color:#66685c;
    margin:0 0 28px
}

.hero-actions {
    display:flex;
    align-items:center;
    gap:28px
}

.button {
    border:1px solid var(--ink);
    background:var(--ink);
    color:var(--paper);
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:18px 26px;
    font-size:14px;
    font-weight:600;
    transition:background .2s,transform .2s
}

.button.red {
    background:var(--red);
    border-color:var(--red)
}

.button:hover {
    background:#9d3823;
    transform:translateY(-2px)
}

.text-link {
    font-size:13px;
    border-bottom:1px solid currentColor;
    padding:6px 0
}

.hero-art {
    position:absolute;
    width:69%;
    height:100%;
    right:-15px;
    top:0;
    z-index:1
}

.sun {
    position:absolute;
    width:490px;
    height:490px;
    max-width:80%;
    aspect-ratio:1;
    background:var(--red);
    border-radius:50%;
    top:60px;
    right:50px;
    height:auto
}

.sun:after {
    content:'';
    position:absolute;
    inset:-16px;
    border:1px solid #c4472c66;
    border-radius:50%
}

.hero-art:after {
    content:'機';
    position:absolute;
    right:5px;
    top:15px;
    font-family:var(--serif);
    font-size:480px;
    color:var(--paper);
    opacity:.12;
    line-height:1;
    z-index:0
}

.hero-mecha {
    position:absolute;
    width:720px;
    max-width:none;
    right:8px;
    bottom:54px;
    z-index:1;
    filter:drop-shadow(10px 18px 0 #25282016)
}

.vertical-note {
    position:absolute;
    left:15%;
    top:49px;
    writing-mode:vertical-rl;
    font-size:12px;
    letter-spacing:7px;
    z-index:2
}

.art-caption {
    position:absolute;
    right:20px;
    bottom:60px;
    border-top:1px solid var(--ink);
    padding-top:10px;
    width:230px;
    display:flex;
    justify-content:space-between;
    font-size:11px;
    z-index:2
}

.hero-bottom {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    justify-content:space-between;
    padding:17px 0;
    font:10px monospace;
    letter-spacing:2px;
    border-top:1px solid var(--line);
    z-index:3
}

.stamp {
    position:absolute;
    left:49%;
    bottom:105px;
    transform:rotate(-12deg);
    width:66px;
    height:66px;
    border:3px double var(--red);
    color:var(--red);
    font-family:var(--serif);
    font-size:24px;
    line-height:1.1;
    padding:5px;
    text-align:center;
    z-index:3
}

.manifesto {
    display:flex;
    align-items:center;
    gap:40px;
    padding:34px 0;
    border-bottom:1px solid var(--line)
}

.manifesto .micro {
    color:var(--red);
    flex-shrink:0
}

.manifesto p {
    margin:0;
    font-family:var(--serif);
    font-size:24px;
    letter-spacing:2px
}

.manifesto span:last-child {
    margin-left:auto;
    font-size:30px
}

.section {
    padding:84px 0
}

.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:36px;
    gap:25px
}

.section-heading h2 {
    font:700 44px var(--serif);
    letter-spacing:2px;
    margin:9px 0 0
}

.section-heading p {
    font-size:13px;
    line-height:1.8;
    max-width:290px;
    color:var(--muted);
    margin:0
}

.roster {
    display:grid;
    grid-template-columns:1fr 1fr;
    border:1px solid var(--ink);
    min-height:470px
}

.roster-visual {
    position:relative;
    overflow:hidden;
    background:#dedfd1;
    min-height:470px
}

.roster-visual:before {
    content:'';
    position:absolute;
    inset:30px;
    border:1px solid #25282025;
    border-radius:50%
}

.roster-glyph {
    position:absolute;
    left:35px;
    top:20px;
    font:250px var(--serif);
    color:#25282014
}

.roster-visual img {
    width:500px;
    max-width:none;
    position:absolute;
    right:15px;
    bottom:0;
    transition:opacity .15s
}

.roster-label {
    position:absolute;
    top:24px;
    left:26px;
    z-index:2
}

.roster-details {
    padding:42px 46px;
    display:flex;
    flex-direction:column;
    background:#faf8f055
}

.roster-details .micro {
    color:var(--red)
}

.roster-details h3 {
    font:700 40px var(--serif);
    margin:22px 0 15px
}

.roster-details p {
    line-height:1.9;
    color:var(--muted);
    font-size:14px;
    max-width:380px;
    margin:0 0 25px
}

.tags {
    display:flex;
    gap:8px;
    flex-wrap:wrap
}

.tags span {
    padding:6px 11px;
    border:1px solid var(--line);
    font-size:11px
}

.roster-tabs {
    display:flex;
    gap:8px;
    margin-top:auto;
    padding-top:28px
}

.roster-tabs button {
    background:transparent;
    border:1px solid var(--line);
    width:49px;
    height:49px;
    font:16px monospace;
    color:var(--ink)
}

.roster-tabs button:hover,.roster-tabs button[aria-selected=true] {
    background:var(--red);
    border-color:var(--red);
    color:var(--paper)
}

.tactics {
    background:var(--ink);
    color:var(--paper);
    padding:75px 0
}

.tactics .section-heading p {
    color:#b4b6a6
}

.tactic-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid #727466
}

.tactic {
    padding:32px 32px 0 0;
    position:relative
}

.tactic+.tactic {
    border-left:1px solid #727466;
    padding-left:32px
}

.tactic .micro {
    color:#bcbba9
}

.tactic h3 {
    font:30px var(--serif);
    margin:24px 0 15px
}

.tactic p {
    font-size:13px;
    line-height:1.9;
    color:#bcbfb1;
    max-width:300px
}

.tactic img {
    height:90px;
    object-fit:contain;
    margin:27px 0 0 auto
}

.enlist {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:30px;
    padding:65px 0
}

.enlist h2 {
    font:700 42px var(--serif);
    margin:12px 0
}

.enlist p {
    font-size:14px;
    color:var(--muted)
}

.site-footer {
    border-top:1px solid var(--ink);
    padding:25px 0;
    font-size:11px;
    color:var(--muted)
}

.footer-content {
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap
}

.footer-content a:hover {
    color:var(--red)
}

/* Enrollment page: all scene styling disappears when the engine starts. */
body.login-active {
    min-height:100dvh
}

.login-scene {
    display:none
}

body.login-active .login-scene {
    display:block
}

.login-layout {
    min-height:calc(100dvh - 163px);
    display:grid;
    grid-template-columns:1.1fr 1fr;
    align-items:center;
    gap:65px;
    padding-top:45px;
    padding-bottom:45px
}

.login-illustration {
    position:relative;
    align-self:stretch;
    min-height:610px;
    overflow:hidden;
    border-right:1px solid var(--line)
}

.login-illustration h1 {
    position:relative;
    z-index:2;
    font:700 70px/1.15 var(--serif);
    margin:25px 0
}

.login-illustration h1 em {
    font-style:normal;
    color:var(--red)
}

.login-illustration .sun {
    width:360px;
    right:50px;
    top:185px
}

.login-illustration img {
    position:absolute;
    width:660px;
    max-width:none;
    bottom:0;
    right:15px
}

.login-illustration .micro:last-child {
    position:absolute;
    bottom:0;
    left:0;
    writing-mode:vertical-rl
}

.auth-container {
    width:100%;
    max-width:440px;
    margin:auto;
    transition:opacity .3s,transform .3s
}

.auth-topline {
    display:flex;
    justify-content:space-between;
    padding:0 0 20px;
    border-bottom:2px solid var(--ink);
    color:var(--muted)
}

.auth-title {
    font:700 36px var(--serif);
    margin:30px 0 10px
}

.auth-subtitle {
    font-size:13px;
    color:var(--muted);
    margin:0 0 28px
}

.field-label {
    display:block;
    font-size:12px;
    margin:18px 0 9px
}

.field-label span {
    font:10px monospace;
    color:var(--muted);
    margin-left:9px
}

.auth-input {
    width:100%;
    height:53px;
    border:1px solid var(--line);
    background:#faf8f08c;
    padding:0 15px;
    color:var(--ink);
    border-radius:0
}

.auth-input::placeholder {
    color:#86877b;
    font-size:13px
}

.auth-button {
    width:100%;
    margin:26px 0 16px;
    padding:17px;
    border:0;
    background:var(--red);
    color:var(--white);
    font-weight:600;
    display:flex;
    justify-content:space-between
}

.auth-button:hover {
    background:#a23823
}

.toggle-button {
    width:100%;
    padding:12px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:13px
}

.toggle-button:hover {
    color:var(--red)
}

.auth-foot {
    border-top:1px solid var(--line);
    margin-top:24px;
    padding-top:20px;
    font-size:11px;
    color:var(--muted);
    line-height:1.9;
    display:flex;
    gap:14px;
    align-items:center
}

.seal {
    border:2px solid var(--red);
    color:var(--red);
    padding:4px;
    font:18px var(--serif);
    flex-shrink:0
}

.error-message {
    color:var(--red);
    font-size:13px;
    min-height:20px;
    margin-top:8px;
    line-height:1.5
}

.page-footer {
    text-align:center;
    font-size:11px;
    color:var(--muted);
    padding:21px;
    border-top:1px solid var(--line)
}

.page-footer>div {
    display:inline-block;
    margin:0 9px
}

.loading-indicator {
    display:none;
    position:fixed;
    z-index:2000;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:var(--paper);
    border:1px solid var(--ink);
    padding:34px;
    text-align:center;
    box-shadow:0 0 0 100vmax #25282070;
    font-size:13px
}

.loading-spinner {
    border:2px solid var(--line);
    border-top-color:var(--red);
    border-radius:50%;
    width:30px;
    height:30px;
    margin:0 auto 15px;
    animation:spin 1s linear infinite
}

@keyframes spin {
    to {
        transform:rotate(360deg)
    }

}

body:not(.login-active).game-page {
    background:#000
}

.game-page:not(.login-active) .login-layout {
    display:contents
}

@media(min-width:1500px) {
    .hero {
        min-height:770px
    }

    .hero-mecha {
        width:800px
    }

    .sun {
        width:540px
    }

}

@media(max-width:1000px) {
    .shell {
        width:calc(100% - 48px)
    }

    .nav-links {
        gap:20px
    }

    .hero {
        min-height:650px
    }

    .hero h1 {
        font-size:84px
    }

    .hero-art {
        right:-60px
    }

    .hero-mecha {
        width:650px;
        right:15px;
        bottom:60px
    }

    .sun {
        right:25px;
        top:100px;
        width:410px
    }

    .hero-copy p {
        max-width:290px
    }

    .roster-visual img {
        right:-20px;
        width:500px
    }

    .roster-details {
        padding:32px
    }

    .login-layout {
        gap:30px
    }

    .login-illustration img {
        width:600px;
        right:-60px
    }

    .login-illustration h1 {
        font-size:58px
    }

    .login-illustration .sun {
        right:20px;
        width:280px
    }

}

@media(max-width:700px) {
    .shell {
        width:calc(100% - 36px)
    }

    .nav {
        min-height:74px;
        gap:15px
    }

    .brand strong {
        font-size:20px
    }

    .brand-mark {
        width:32px;
        height:37px;
        font-size:24px
    }

    .brand small {
        font-size:7px
    }

    .nav-links {
        gap:15px;
        font-size:12px
    }

    .nav-links .desktop-link {
        display:none
    }

    .nav-launch {
        padding:11px 14px
    }

    .nav-launch span {
        margin-left:10px
    }

    .hero {
        display:block;
        min-height:925px
    }

    .hero-copy {
        width:100%;
        padding:36px 0 0
    }

    .hero h1 {
        font-size:clamp(51px,16vw,72px);
        margin:25px 0 20px;
        letter-spacing:-3px
    }

    .hero-copy p {
        max-width:310px;
        font-size:13px;
        margin-bottom:22px
    }

    .hero-art {
        width:100%;
        height:470px;
        right:0;
        top:auto;
        bottom:55px
    }

    .sun {
        width:310px;
        right:20px;
        top:40px
    }

    .hero-mecha {
        width:520px;
        right:-5px;
        bottom:0
    }

    .vertical-note {
        left:0;
        top:30px;
        font-size:10px;
        letter-spacing:5px
    }

    .art-caption {
        bottom:4px;
        right:0;
        width:170px;
        font-size:10px
    }

    .hero-bottom {
        font-size:8px;
        letter-spacing:1px
    }

    .hero-bottom span:nth-child(2) {
        display:none
    }

    .stamp {
        left:10px;
        bottom:260px;
        width:56px;
        height:56px;
        font-size:20px
    }

    .manifesto {
        gap:17px;
        padding:25px 0
    }

    .manifesto p {
        font-size:17px;
        letter-spacing:0
    }

    .manifesto .micro {
        font-size:9px;
        letter-spacing:1px
    }

    .manifesto span:last-child {
        display:none
    }

    .section {
        padding:55px 0
    }

    .section-heading {
        display:block;
        margin-bottom:25px
    }

    .section-heading h2 {
        font-size:34px
    }

    .section-heading p {
        margin-top:16px
    }

    .roster {
        grid-template-columns:1fr
    }

    .roster-visual {
        min-height:350px
    }

    .roster-visual img {
        width:390px;
        right:10px
    }

    .roster-glyph {
        font-size:200px
    }

    .roster-details {
        padding:27px
    }

    .roster-details h3 {
        font-size:33px;
        margin:15px 0
    }

    .roster-details p {
        font-size:13px
    }

    .tactics {
        padding:50px 0
    }

    .tactic-grid {
        grid-template-columns:1fr
    }

    .tactic {
        padding:25px 100px 25px 0!important
    }

    .tactic+.tactic {
        border-left:0;
        border-top:1px solid #727466
    }

    .tactic h3 {
        font-size:25px;
        margin:13px 0
    }

    .tactic p {
        margin-bottom:0
    }

    .tactic img {
        position:absolute;
        right:0;
        top:50px;
        width:80px;
        height:80px;
        margin:0
    }

    .enlist {
        grid-template-columns:1fr;
        padding:44px 0;
        gap:17px
    }

    .enlist h2 {
        font-size:32px
    }

    .enlist .button {
        justify-self:start
    }

    .footer-content {
        font-size:10px;
        gap:12px
    }

    .login-layout {
        display:flex;
        flex-direction:column;
        gap:25px;
        padding-top:28px;
        padding-bottom:35px
    }

    .login-illustration {
        min-height:210px;
        width:100%;
        border-right:0;
        border-bottom:1px solid var(--line)
    }

    .login-illustration h1 {
        font-size:42px;
        margin-top:20px
    }

    .login-illustration .sun {
        width:155px;
        right:10px;
        top:30px
    }

    .login-illustration img {
        width:245px;
        right:-5px;
        bottom:0
    }

    .login-illustration .micro:last-child {
        display:none
    }

    .login-illustration .eyebrow {
        font-size:10px;
        letter-spacing:1px
    }

    .auth-container {
        max-width:440px
    }

    .auth-topline {
        padding-bottom:12px
    }

    .auth-title {
        margin-top:24px;
        font-size:32px
    }

    .auth-subtitle {
        margin-bottom:20px
    }

    .page-footer {
        font-size:10px;
        line-height:1.9
    }

    .page-footer>div {
        display:block
    }

    .login-scene .nav-links .text-link {
        font-size:11px
    }

    .auth-foot {
        margin-top:15px
    }

    .hero-actions {
        gap:23px
    }

    .button {
        gap:28px;
        padding:17px 23px
    }

}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }

    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }

}

/* Compact screens keep controls on one line without widening the document. */
.roster-details {
    min-width:0
}

.roster-tabs button {
    flex:1;
    min-width:0;
    max-width:49px;
    flex-shrink:1
}

.nav-launch,.brand small {
    white-space:nowrap
}

.brand-mark {
    flex-shrink:0
}

@media(max-width:380px) {
    .nav {
        gap:10px
    }

    .brand {
        gap:8px
    }

    .brand strong {
        font-size:18px;
        letter-spacing:2px
    }

    .brand small {
        font-size:6px;
        letter-spacing:1px
    }

    .nav-launch {
        font-size:11px;
        padding:11px 10px
    }

    .nav-launch span {
        margin-left:8px
    }

    .hero-actions {
        gap:16px
    }

    .hero-actions .button {
        font-size:12px;
        padding:15px 17px;
        gap:20px
    }

    .hero-actions .text-link {
        font-size:11px
    }

    .roster-details {
        padding:23px
    }

    .roster-tabs {
        gap:6px
    }

    .roster-tabs button {
        height:42px
    }

    .roster-details h3 {
        font-size:29px
    }

}

@media (max-width: 380px) {
    .section-heading h2 {
        font-size: 28px;
        letter-spacing: 1px;
    }
    .roster-details h3 {
        font-size: 25px;
    }
}