/* moongate-welcome.css v2 — cascade override for welcome-deck.css (/, /start, /login, /register, /choose-identity, /forgot-password, /reset-password, /complete-profile).
   「月门 / MOONGATE」 whole-site visual base, Wyns 2026-10-21. Loaded after welcome-deck.css + moongate.css; colour / font / radius / shadow only, no layout
   (Phase 2 exceptions, each commented below: the hub word size inside its fixed 92px circle and the .welcome-chosen box-sizing bug fix).
   The legacy --wd-* literals in welcome-deck.css are intentionally left in place (tests read them); this sheet re-values the names and restyles the consuming selectors. */

/* ---- legacy welcome tokens -> MOONGATE values (names unchanged, --wd-goban untouched) ---- */
:root {
    --wd-bg: var(--mg-ground);
    --wd-bg-mid: var(--mg-ground);
    --wd-surface: var(--mg-card);
    --wd-text: var(--mg-text);
    --wd-muted: var(--mg-muted);
    --wd-cyan: var(--mg-blue-text);
    --wd-cyan-2: var(--mg-blue);
    --wd-cyan-dim: var(--mg-blue-soft);
    --wd-line: var(--mg-glass-line);
    --wd-gold: var(--mg-gold-text);
    --wd-ink: #fff;
}

/* ---- ground, wash, lattice (stones stay exactly as welcome-deck.css paints them) ---- */
body.welcome-deck { background: var(--mg-ground); color: var(--mg-text); font-family: var(--mg-font-body); }
body.welcome-deck::before { background: var(--mg-ground-wash); }
body.welcome-deck::after {
    background-image:
        linear-gradient(rgba(120, 185, 255, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 185, 255, 0.09) 1px, transparent 1px);
}

/* ---- top bar ---- */
.welcome-deck__brand img { box-shadow: 0 0 0 1px var(--mg-blue-line), 0 0 24px rgba(46, 139, 255, 0.18); }
.welcome-deck__brand-name { font-family: var(--mg-font-display); font-weight: 700; letter-spacing: 0.08em; color: var(--mg-text); }
.welcome-deck__brand-name span { color: var(--mg-blue-text); }
.welcome-deck__brand-sub { color: var(--mg-muted); }
.welcome-deck .evo-lang-label { color: var(--mg-muted); }
.welcome-deck .evo-lang-select { background: var(--mg-slate); color: var(--mg-text); border-color: rgba(120, 185, 255, 0.22); border-radius: var(--mg-r-ctl); }
.welcome-deck .evo-lang-select:focus { outline: none; border-color: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-blue-soft); }

/* ---- hero: eyebrow / kicker / title / 棋魂 / lead ---- */
/* Phase 2 eyebrow: a new aria-hidden <span class="mg-eyebrow"> sibling placed before the kicker (unified-entry, welcome-start).
   Size / spacing come from .mg-eyebrow in moongate.css; this sheet only tints it gold and widens the tracking. */
.welcome-deck__main > .mg-eyebrow { color: var(--mg-gold-text); letter-spacing: 0.24em; }
.welcome-deck__kicker { color: var(--mg-blue-text); letter-spacing: 0.12em; }
.welcome-deck__title {
    font-family: var(--mg-font-display);
    font-weight: 700;
    color: var(--mg-text);
    text-shadow: 0 0 34px rgba(46, 139, 255, 0.28);
}
.welcome-deck__soul {
    background: linear-gradient(118deg, #5FAEFF 0%, #2E8BFF 36%, #8CC4FF 54%, #E3BE73 82%, #D4A857 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: #5FAEFF;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter:
        drop-shadow(0 0 5px rgba(46, 139, 255, 0.45))
        drop-shadow(0 0 12px rgba(46, 139, 255, 0.22));
}
/* Same keyframe name as welcome-deck.css: the later definition wins, so the pulse turns blue. */
@keyframes welcome-soul-glow {
    0%, 100% {
        filter:
            drop-shadow(0 0 5px rgba(46, 139, 255, 0.4))
            drop-shadow(0 0 11px rgba(46, 139, 255, 0.18));
    }
    50% {
        filter:
            drop-shadow(0 0 8px rgba(46, 139, 255, 0.55))
            drop-shadow(0 0 16px rgba(46, 139, 255, 0.28));
    }
}
.welcome-deck__lead { color: var(--mg-text-2); }

/* ---- identity map: 月门 hub ring, gold spine, glass cards with gold 01 02 03 ---- */
.welcome-map__hub {
    background:
        radial-gradient(circle at 35% 30%, rgba(46, 139, 255, 0.22), transparent 46%),
        var(--mg-slate);
    border-color: var(--mg-gold-line);
    box-shadow: 0 0 0 6px rgba(212, 168, 87, 0.06), 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(46, 139, 255, 0.14);
    color: var(--mg-gold-text);
    font-family: var(--mg-font-display);
    letter-spacing: 0.14em;
    /* Phase 2: the only font-size on a real element in this sheet. The hub is a fixed 92x92px circle
       (welcome-deck.css: width/height 92px, display:grid, place-items:center, aria-hidden) holding the single
       word EVOGO; at 18px Barlow Condensed 700 the word is ~55px wide, so it cannot reflow the circle, the spine
       or the cards, and no test reads .welcome-map__hub. Phase 1's 0.78rem condensed glyphs were illegible. */
    font-size: 18px;
}
.welcome-map__spine { background: linear-gradient(180deg, var(--mg-gold-line), rgba(212, 168, 87, 0.08)); }

.welcome-node {
    background: var(--mg-card);
    background-image: var(--mg-glass);
    border-color: var(--mg-glass-line);
    border-radius: var(--mg-r-card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--mg-glass-shadow);
}
.welcome-node:hover,
.welcome-node:focus-visible {
    border-color: rgba(120, 185, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(120, 185, 255, 0.25), 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 40px rgba(46, 139, 255, 0.18);
}
.welcome-node__port { border-color: var(--mg-glass-line); background: var(--mg-blue-soft-2); color: var(--mg-blue-text); }
.welcome-node__title { font-family: var(--mg-font-zh); color: var(--mg-text); }
.welcome-node__desc { color: var(--mg-text-2); }
.welcome-node__bubble {
    background: var(--mg-slate);
    border-color: var(--mg-blue-line);
    color: var(--mg-blue-text);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(46, 139, 255, 0.18);
}
.welcome-node__bubble::before { background: var(--mg-blue-soft); color: var(--mg-blue-text); }
.welcome-deck__tagline { color: var(--mg-muted); }

/* ---- /start: chosen-identity card (gold corner ornament drawn in the background, no extra markup) ---- */
.welcome-chosen {
    /* Phase 2 bug fix (pre-existing, whitelisted): welcome-deck.css sets width:min(440px,100%) + 22px padding + 1px
       border in content-box, so on phones the card is 46px wider than the shell and bleeds off both edges.
       border-box keeps it inside the shell and the same 440px as the .welcome-auth buttons below it on desktop. */
    box-sizing: border-box;
    background-color: var(--mg-card);
    background-image:
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        var(--mg-glass);
    background-repeat: no-repeat;
    background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, auto;
    background-position:
        left 6px top 6px, left 6px top 6px,
        right 6px top 6px, right 6px top 6px,
        left 6px bottom 6px, left 6px bottom 6px,
        right 6px bottom 6px, right 6px bottom 6px,
        0 0;
    border-color: var(--mg-glass-line);
    border-radius: var(--mg-r-card);
    box-shadow: var(--mg-glass-shadow);
}
.welcome-chosen__label { color: var(--mg-gold-text); font-weight: 600; }
.welcome-chosen h1 { font-family: var(--mg-font-zh); font-weight: 700; color: var(--mg-text); }
.welcome-chosen p { color: var(--mg-text-2); }
.welcome-auth a,
.welcome-change { border-radius: var(--mg-r-ctl); }
.welcome-auth__register {
    background: var(--mg-blue-grad);
    color: #fff;
    box-shadow: 0 8px 24px var(--mg-blue-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.welcome-auth__register:hover { background: linear-gradient(180deg, #4EA3FF, #2A7FEF); }
.welcome-auth__login { background: var(--mg-blue-soft-2); border-color: var(--mg-blue-line); color: var(--mg-text); }
.welcome-auth__login:hover { background: var(--mg-blue-soft); border-color: var(--mg-blue-text); }
.welcome-change { color: var(--mg-text-2); }
.welcome-change:hover { color: var(--mg-blue-text); }

/* ---- footer: gold hairline ---- */
.welcome-deck .legal-site-footer {
    border-top-color: transparent;
    border-image: linear-gradient(90deg, transparent, var(--mg-gold-line), transparent) 1;
}
.welcome-deck .legal-site-footer a { color: var(--mg-muted); }
.welcome-deck .legal-site-footer a:hover { color: var(--mg-blue-text); }
.welcome-deck .legal-site-footer__copy { color: var(--mg-muted); }

/* ---- auth pages: one glass card (blur allowed here only), MOONGATE inputs, blue CTA ---- */
.welcome-auth-card {
    background-color: rgba(10, 20, 40, 0.28);
    background-image:
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        linear-gradient(var(--mg-gold-corner), var(--mg-gold-corner)),
        var(--mg-glass);
    background-repeat: no-repeat;
    background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, auto;
    background-position:
        left 6px top 6px, left 6px top 6px,
        right 6px top 6px, right 6px top 6px,
        left 6px bottom 6px, left 6px bottom 6px,
        right 6px bottom 6px, right 6px bottom 6px,
        0 0;
    border-color: var(--mg-glass-line);
    border-radius: var(--mg-r-modal);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--mg-float-shadow);
}
/* Phase 2 eyebrow: aria-hidden <span class="mg-eyebrow"> sibling placed before the untouched <h1 class="evo-auth-title">
   (login SIGN IN / register CREATE ACCOUNT / choose-identity CHOOSE ROLE). Centred like the title, gold. */
.welcome-auth-card > .mg-eyebrow { color: var(--mg-gold-text); text-align: center; letter-spacing: 0.24em; }
.welcome-auth-page .evo-auth-title { font-family: var(--mg-font-zh); font-weight: 700; letter-spacing: 0; color: var(--mg-text); }
.welcome-auth-page .evo-auth-subtitle,
.welcome-auth-page .academy-welcome-line { color: var(--mg-text-2); }
.welcome-auth-page .evo-auth-prelaunch-note { color: var(--mg-gold-text); }
.welcome-auth-page .evo-field label { color: var(--mg-text-2); font-weight: 600; }
.welcome-auth-page .evo-input,
.welcome-auth-page .evo-select {
    background: var(--mg-slate);
    border-color: rgba(120, 185, 255, 0.22);
    border-radius: var(--mg-r-ctl);
    color: var(--mg-text);
    font-family: var(--mg-font-body);
    font-weight: 500;
}
.welcome-auth-page .evo-input::placeholder { color: var(--mg-muted); }
.welcome-auth-page .evo-select option { background: var(--mg-slate); color: var(--mg-text); }
.welcome-auth-page .evo-input:focus,
.welcome-auth-page .evo-select:focus { border-color: var(--mg-blue); box-shadow: 0 0 0 3px var(--mg-blue-soft); }
.welcome-auth-page .evo-field-hint,
.welcome-auth-page .evo-muted,
.welcome-auth-page .evo-divider { color: var(--mg-muted); }

.welcome-auth-page .evo-alert { border-radius: var(--mg-r-ctl); }
.welcome-auth-page .evo-alert-error { background: var(--mg-bad-soft); border-color: rgba(242, 109, 109, 0.45); color: var(--mg-bad); }
.welcome-auth-page .evo-alert-success { background: var(--mg-ok-soft); border-color: rgba(57, 194, 122, 0.4); color: var(--mg-ok); }
.welcome-auth-page .evo-alert-info { background: var(--mg-blue-soft-2); border-color: var(--mg-blue-line); color: var(--mg-blue-text); }

.welcome-auth-page .evo-btn { border-radius: var(--mg-r-ctl); font-family: var(--mg-font-body); font-weight: 700; }
.welcome-auth-page .evo-btn-primary,
.welcome-auth-page .evo-btn-solid,
.welcome-auth-page .evo-auth-submit--green {
    background: var(--mg-blue-grad);
    color: #fff;
    box-shadow: 0 8px 24px var(--mg-blue-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.welcome-auth-page .evo-btn-primary:hover:not(:disabled),
.welcome-auth-page .evo-btn-solid:hover:not(:disabled),
.welcome-auth-page .evo-auth-submit--green:hover:not(:disabled) { background: linear-gradient(180deg, #4EA3FF, #2A7FEF); }
.welcome-auth-page .evo-btn:focus-visible { outline: 2px solid var(--mg-blue-text); outline-offset: 2px; }

.welcome-auth-page .evo-auth-links a,
.welcome-auth-page .evo-cyan,
.welcome-auth-page .evo-auth-legal a { color: var(--mg-blue-text); }
.welcome-auth-page .evo-auth-links a:hover,
.welcome-auth-page .evo-cyan:hover,
.welcome-auth-page .evo-auth-legal a:hover { color: var(--mg-blue-hover); }
.welcome-auth-page .evo-auth-legal { color: var(--mg-muted); }

.welcome-auth-page .evo-radar-msg.ok { color: var(--mg-ok); }
.welcome-auth-page .evo-radar-msg.warn { color: var(--mg-warn); }
.welcome-auth-page .evo-radar-msg.err { color: var(--mg-bad); }

.welcome-auth-page .evo-phone-dial {
    background: var(--mg-blue-soft);
    border-color: rgba(120, 185, 255, 0.22);
    border-radius: var(--mg-r-ctl) 0 0 var(--mg-r-ctl);
    color: var(--mg-blue-text);
    font-family: var(--mg-font-body);
    font-variant-numeric: tabular-nums;
}
.welcome-auth-page .evo-phone-local { border-radius: 0 var(--mg-r-ctl) var(--mg-r-ctl) 0; }

.welcome-auth-page .evo-social-btn {
    background: var(--mg-blue-soft-2);
    border-color: var(--mg-blue-line);
    border-radius: var(--mg-r-ctl);
    color: var(--mg-text);
}
.welcome-auth-page .evo-social-btn:hover { background: var(--mg-blue-soft); border-color: var(--mg-blue-text); }
.welcome-auth-page .evo-social-indicator {
    background: var(--mg-blue-soft-2);
    border-color: var(--mg-blue-line);
    border-radius: var(--mg-r-ctl);
    color: var(--mg-text-2);
}
.welcome-auth-page .evo-social-indicator strong { color: var(--mg-text); }

/* ---- identity picker (register / choose-identity / complete-profile) ---- */
.welcome-auth-page .portal-id-picker__legend { color: var(--mg-text); font-family: var(--mg-font-zh); font-weight: 700; }
.welcome-auth-page .portal-id-picker__hint { color: var(--mg-text-2); }
.welcome-auth-page .portal-id-card {
    background: var(--mg-slate);
    border-color: var(--mg-slate-line);
    border-radius: var(--mg-r-card);
}
.welcome-auth-page .portal-id-card:hover { border-color: var(--mg-blue-line); background: var(--mg-blue-soft-2); }
.welcome-auth-page .portal-id-card.is-selected {
    border-color: var(--mg-blue);
    background: var(--mg-blue-soft);
    box-shadow: 0 0 0 3px var(--mg-blue-soft);
}
.welcome-auth-page .portal-id-card__title { color: var(--mg-text); font-family: var(--mg-font-zh); font-weight: 700; }
.welcome-auth-page .portal-id-card__desc { color: var(--mg-text-2); }
.welcome-auth-page .portal-id-chosen { background: var(--mg-blue-soft-2); border-color: var(--mg-blue-line); border-radius: var(--mg-r-card); }
.welcome-auth-page .portal-id-chosen__label { color: var(--mg-gold-text); font-weight: 600; }
.welcome-auth-page .portal-id-chosen__title { color: var(--mg-text); font-family: var(--mg-font-zh); font-weight: 700; }
.welcome-auth-page .portal-id-chosen__desc { color: var(--mg-text-2); }
.welcome-auth-page .portal-id-chosen__change { color: var(--mg-blue-text); }
.welcome-auth-page .portal-id-chosen__change:hover { color: var(--mg-blue-hover); }

/* ---- same breakpoints as welcome-deck.css so its phone radii do not win back ---- */
@media (max-width: 480px) {
    .welcome-auth-card { border-radius: var(--mg-r-modal); }
    .welcome-auth-page .evo-phone-dial { border-right-color: rgba(120, 185, 255, 0.22); border-radius: var(--mg-r-ctl); }
    .welcome-auth-page .evo-phone-local { border-radius: var(--mg-r-ctl); }
}

@media (forced-colors: active) {
    .welcome-node, .welcome-chosen, .welcome-auth-card, .welcome-auth-page .portal-id-card { border-color: CanvasText; }
}