/* web/game/signin.css — the three doors into the game.
 *
 * There is a deliberate hierarchy here and it is the whole point of the screen:
 *
 *   DISCORD   the hero. Widest, brightest, branded, and first. It is where the
 *             game actually lives — trading, ranked and the vault all need it —
 *             so it gets the visual weight that says "this is the real one".
 *   GUEST     the hook. Same width so it reads as a genuine option rather than
 *             a footnote, but quiet: outlined, not filled. This is what gets
 *             somebody playing in four seconds instead of bouncing.
 *   GOOGLE    the alternative. Below a divider, compact, deliberately calm. It
 *             exists for people who will not make a Discord account, and it
 *             should not compete with the two above for attention.
 *
 * The old screen was inline styles on two different surfaces that had drifted
 * apart. One stylesheet, one component, both entry points.
 */

/* ── Shell ─────────────────────────────────────────────────────────────── */

.bn-si-root {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 90% 60% at 50% -10%, rgba(30, 62, 92, .55) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 50%, #071626 0%, #010a13 70%);
    font-family: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
    color: #cdd8e4;
    line-height: 1.55;
    animation: bn-si-fade .22s ease-out;
}

/* The modal form sits over the game rather than replacing it, so it darkens
   what is behind instead of painting a whole new sky. */
.bn-si-root.is-modal {
    background: rgba(1, 8, 15, .82);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

.bn-si-card {
    position: relative;
    width: 100%;
    max-width: 448px;
    padding: 34px 30px 26px;
    border-radius: 14px;
    border: 1px solid rgba(200, 170, 110, .26);
    background:
        linear-gradient(180deg, rgba(18, 38, 58, .96) 0%, rgba(7, 17, 29, .97) 55%);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .62),
        0 0 0 1px rgba(0, 0, 0, .35),
        inset 0 1px 0 rgba(240, 216, 144, .13);
    animation: bn-si-rise .28s cubic-bezier(.2, .8, .3, 1);
}

/* The card takes focus when the dialog opens (see signin-overlay.js) purely so
   screen readers announce it — it must never paint a ring for that. */
.bn-si-card:focus { outline: none; }

/* A single hairline of gold across the top edge — the game's own trim. */
.bn-si-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 216, 144, .75), transparent);
}

/* ── Header ────────────────────────────────────────────────────────────── */

.bn-si-eyebrow {
    font-size: .68rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #8b7a4e;
    text-align: center;
    margin-bottom: 10px;
}

.bn-si-title {
    margin: 0 0 6px;
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: 1.42rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: .02em;
    color: #f0d890;
    text-align: center;
    text-shadow: 0 2px 18px rgba(200, 170, 110, .28);
}

.bn-si-lede {
    margin: 0 0 22px;
    font-size: .89rem;
    color: #8fa3b8;
    text-align: center;
}

/* ── The doors ─────────────────────────────────────────────────────────── */

.bn-si-door {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-bottom: 11px;
    padding: 14px 16px;
    border-radius: 11px;
    border: 1px solid transparent;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease,
                background-color .16s ease, border-color .16s ease;
}

.bn-si-door:focus-visible {
    outline: 2px solid #f0d890;
    outline-offset: 3px;
}

.bn-si-door-ico {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

.bn-si-door-ico svg { display: block; }

.bn-si-door-txt { flex: 1 1 auto; min-width: 0; }

/* Both halves are block-level: they are two stacked lines, and left inline they
   run together into "CONTINUE WITH DISCORDOne click, no password…". */
.bn-si-door-name {
    display: block;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.bn-si-door-sub {
    display: block;
    margin-top: 3px;
    font-size: .81rem;
    line-height: 1.45;
    opacity: .82;
}

/* DISCORD — the hero. Brand blurple, lifted, and the only glowing thing here. */
.bn-si-door--discord {
    background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
    color: #fff;
    box-shadow: 0 8px 24px rgba(88, 101, 242, .34);
}
.bn-si-door--discord:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(88, 101, 242, .46);
    background: linear-gradient(135deg, #6b76f5 0%, #505bd4 100%);
}
.bn-si-door--discord:active { transform: translateY(0); }
.bn-si-door--discord .bn-si-door-sub { opacity: .88; }

/* GUEST — same footprint, outlined instead of filled. Present, not shouting. */
.bn-si-door--guest {
    background: rgba(200, 170, 110, .05);
    border-color: rgba(200, 170, 110, .34);
    color: #cdd8e4;
}
.bn-si-door--guest:hover {
    transform: translateY(-1px);
    background: rgba(200, 170, 110, .11);
    border-color: rgba(240, 216, 144, .6);
}
.bn-si-door--guest:active { transform: translateY(0); }
.bn-si-door--guest .bn-si-door-name { color: #f0d890; }
.bn-si-door--guest .bn-si-door-sub { color: #8fa3b8; opacity: 1; }

/* ── "or" divider ──────────────────────────────────────────────────────── */

.bn-si-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 2px 13px;
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #5b6b7c;
}
.bn-si-or::before,
.bn-si-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(200, 170, 110, .16);
}

/* GOOGLE — Google's own dark-theme button spec, which happens to be exactly
   the right amount of quiet against this background. Compact and centred so it
   reads as an alternative rather than a third headline. */
.bn-si-door--google {
    justify-content: center;
    gap: 11px;
    margin-bottom: 0;
    padding: 11px 16px;
    background: #131314;
    border-color: #5f6368;
    color: #e3e3e3;
}
.bn-si-door--google:hover {
    background: #1e1f20;
    border-color: #8e918f;
}
.bn-si-door--google .bn-si-door-ico { width: 18px; height: 18px; }
/* Don't let the label grow — it would shove the G to the far left and undo the
   centring this button depends on. */
.bn-si-door--google .bn-si-door-txt { flex: 0 0 auto; }
.bn-si-door--google .bn-si-door-name {
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

/* ── "Soon": a door that is drawn but not open yet ─────────────────────── */
/* The funnel only reads correctly if all three doors are visible, so a door
   whose server half hasn't shipped stays on screen and says so, rather than
   vanishing (which hides the roadmap) or staying live (which lies). The button
   carries `disabled`, so it is genuinely inert to click, tab and screen reader
   — the styling below only has to make that legible. */
/* Dim the CONTENTS, never the button. Opacity on the button would composite
   the whole subtree — including the "Soon" pill, which is the one thing that
   has to stay legible, since it is the explanation for the dimming. */
.bn-si-door.is-soon { cursor: default; }
.bn-si-door.is-soon .bn-si-door-ico { opacity: .5; filter: saturate(.5); }
.bn-si-door.is-soon .bn-si-door-name { opacity: .58; }
.bn-si-door.is-soon:hover {
    transform: none;
    background: #131314;
    border-color: #5f6368;
}

.bn-si-soon {
    flex: 0 0 auto;
    margin-left: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(200, 170, 110, .45);
    background: rgba(200, 170, 110, .12);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #f0d890;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

.bn-si-note {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(200, 170, 110, .14);
    font-size: .79rem;
    line-height: 1.5;
    color: #6d8299;
    text-align: center;
}
.bn-si-note b { color: #8b7a4e; font-weight: 700; }

.bn-si-dismiss {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 8px;
    background: none;
    border: 0;
    font: inherit;
    font-size: .82rem;
    color: #5b6b7c;
    cursor: pointer;
    transition: color .16s ease;
}
.bn-si-dismiss:hover { color: #9fb4c7; }
.bn-si-dismiss:focus-visible { outline: 2px solid #f0d890; outline-offset: 2px; }

/* ── Guest chip (persistent "this is device-only" reminder) ─────────────── */

.bn-si-chip {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid rgba(200, 170, 110, .42);
    background: rgba(3, 10, 18, .93);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
    font-family: 'Alegreya Sans', 'Segoe UI', system-ui, sans-serif;
    font-size: .76rem;
    letter-spacing: .03em;
    color: #c8aa6e;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .16s ease, transform .16s ease;
}
.bn-si-chip:hover {
    border-color: rgba(240, 216, 144, .8);
    transform: translateY(-1px);
}
.bn-si-chip b { color: #f0d890; }

/* ── Motion + small screens ────────────────────────────────────────────── */

@keyframes bn-si-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bn-si-rise {
    from { opacity: 0; transform: translateY(12px) scale(.985) }
    to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    .bn-si-root, .bn-si-card { animation: none; }
    .bn-si-door, .bn-si-chip { transition: none; }
    .bn-si-door:hover, .bn-si-chip:hover { transform: none; }
}

@media (max-width: 420px) {
    .bn-si-card { padding: 28px 20px 22px; border-radius: 12px; }
    .bn-si-title { font-size: 1.22rem; }
    .bn-si-door { padding: 13px 13px; gap: 11px; }
    .bn-si-door-sub { font-size: .78rem; }
    .bn-si-chip { left: 12px; right: 12px; bottom: 12px; justify-content: center; }
}