/* =====================================================================
   New-member onboarding (docs/onboarding.md): /welcome and /onboarding/*,
   plus the "next step" card on the member home page.
   Same family as the login/register cards: Eryndor behind, dark parchment
   card, gold accents. Pages use .ob-*; the home card uses .ob-next.
   ===================================================================== */

/* ---------- Page shell ---------- */

.ob-page {
    position: relative;
    min-height: calc(100dvh - 90px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    isolation: isolate;
    color: #f8f2df;
}

.ob-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 50% 8%, rgba(255, 216, 107, .16), transparent 32%), linear-gradient(180deg, rgba(7, 8, 11, .78), rgba(5, 6, 8, .94)), url('/images/EryndorFull-bg.jpg');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(.78);
}

.ob-loading {
    color: rgba(255, 255, 255, .7);
}

.ob-shell {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ob-card {
    width: min(100%, 560px);
    padding: 1.5rem 1.5rem 1.35rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 216, 128, .28);
    background: linear-gradient(180deg, rgba(33, 27, 19, .94), rgba(13, 12, 10, .96));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .5), 0 0 20px rgba(202, 162, 75, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ob-card-wide {
    width: min(100%, 720px);
}

/* ---------- Header ---------- */

.ob-header {
    text-align: center;
    margin-bottom: 1.4rem;
}

.ob-logo {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: .65rem;
    border: 1px solid rgba(255, 216, 128, .28);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .42), 0 0 12px rgba(255, 216, 107, .12);
}

.ob-eyebrow {
    width: fit-content;
    margin: 0 auto .45rem;
    padding: .25rem .65rem;
    color: #ffd86b;
    background: rgba(255, 216, 107, .10);
    border: 1px solid rgba(255, 216, 107, .22);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ob-title {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 5vw, 2.3rem);
    line-height: 1.05;
    font-weight: 900;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .55);
}

.ob-subtitle {
    max-width: 34rem;
    margin: .55rem auto 0;
    color: rgba(255, 255, 255, .78);
    font-size: .95rem;
    line-height: 1.45;
}

/* ---------- Messages ---------- */

.ob-error {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    color: #ffd0ca;
    background: rgba(120, 20, 20, .28);
    border: 1px solid rgba(255, 115, 115, .25);
    border-radius: 12px;
    font-weight: 700;
}

.ob-notice {
    margin: 0 0 1rem;
    padding: .75rem .9rem;
    color: #ffe9b0;
    background: rgba(255, 216, 107, .10);
    border: 1px solid rgba(255, 216, 107, .28);
    border-radius: 12px;
    font-weight: 600;
    line-height: 1.45;
}

/* ---------- Blocks, labels, inputs ---------- */

.ob-block {
    margin-bottom: 1.35rem;
}

.ob-label {
    display: block;
    margin: 0 0 .5rem;
    color: #ffe28d;
    font-size: 1.02rem;
    font-weight: 800;
}

.ob-input {
    width: 100%;
    min-height: 52px;
    padding: .6rem .9rem;
    color: #171109;
    background: #fff8ea;
    border: 1px solid rgba(120, 86, 30, .35);
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08), 0 3px 10px rgba(0, 0, 0, .10);
}

    .ob-input:focus {
        outline: none;
        background: #fffdf6;
        border-color: rgba(255, 216, 107, .9);
        box-shadow: 0 0 0 .2rem rgba(255, 216, 107, .22), 0 0 18px rgba(255, 216, 107, .16);
    }

.ob-hint {
    margin: .4rem 0 0;
    font-size: .85rem;
    font-weight: 700;
}

    .ob-hint.is-ok {
        color: #9fe8a7;
    }

    .ob-hint.is-bad {
        color: #ffb4a9;
    }

.ob-help {
    margin: .45rem 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: .84rem;
    line-height: 1.45;
}

.ob-locked {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem .95rem;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 226, 141, .22);
    border-radius: 14px;
}

.ob-locked-value {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 900;
}

.ob-locked-tag {
    color: rgba(255, 255, 255, .55);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---------- Selectable options (experience, platform) ---------- */

.ob-options {
    display: grid;
    gap: .6rem;
}

.ob-options-2 {
    grid-template-columns: 1fr 1fr;
}

.ob-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    width: 100%;
    padding: .8rem .95rem;
    text-align: left;
    color: rgba(255, 255, 255, .88);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .ob-option:hover,
    .ob-option:focus-visible {
        outline: none;
        border-color: rgba(255, 216, 107, .55);
        background: rgba(255, 216, 107, .08);
    }

    .ob-option.is-selected {
        color: #1a1205;
        background: linear-gradient(180deg, #ffe28d, #d9a536);
        border-color: transparent;
        box-shadow: 0 10px 22px rgba(220, 169, 63, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    .ob-option:disabled {
        cursor: default;
    }

.ob-option-title {
    font-size: 1rem;
    font-weight: 900;
}

.ob-option-blurb {
    font-size: .86rem;
    opacity: .85;
    line-height: 1.4;
}

.ob-option-tag {
    position: absolute;
    top: -.55rem;
    right: .8rem;
    padding: .15rem .55rem;
    color: #1a1205;
    background: #ffd86b;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ob-option.is-selected .ob-option-tag {
    background: #1a1205;
    color: #ffe28d;
}

/* The one expected answer, shown big and centered (platform step). */
.ob-option-hero {
    align-items: center;
    text-align: center;
    gap: .35rem;
    max-width: 420px;
    margin: .6rem auto 0;
    padding: 1.4rem 1.3rem 1.25rem;
    border-radius: 18px;
}

    .ob-option-hero .ob-option-title {
        font-size: 1.45rem;
    }

    .ob-option-hero .ob-option-blurb {
        font-size: .95rem;
        max-width: 30rem;
    }

    .ob-option-hero .ob-option-tag {
        right: 50%;
        transform: translateX(50%);
    }

    .ob-option-hero.is-dimmed {
        opacity: .55;
    }

.ob-option-icon {
    font-size: 2rem;
    color: #ffd86b;
    margin-bottom: .2rem;
}

.ob-option.is-selected .ob-option-icon {
    color: #1a1205;
}

.ob-notice-center {
    text-align: center;
    margin-top: .9rem;
}

/* The expected answer on the platform step: a panel, not a button (Continue is the action). */
.ob-hero-panel {
    position: relative;
    max-width: 440px;
    margin: .8rem auto 0;
    padding: 1.5rem 1.3rem 1.3rem;
    text-align: center;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 216, 107, .07);
    border: 1px solid rgba(255, 216, 107, .38);
    border-radius: 18px;
    box-shadow: 0 0 22px rgba(202, 162, 75, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.ob-hero-icon {
    display: block;
    font-size: 2.2rem;
    color: #ffd86b;
    margin-bottom: .35rem;
}

.ob-hero-title {
    margin: 0 0 .35rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
}

.ob-hero-blurb {
    max-width: 30rem;
    margin: 0 auto;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
    line-height: 1.5;
}

    .ob-hero-blurb + .ob-link-btn {
        margin-top: .6rem;
    }

.ob-foot-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .55rem;
}

.ob-btn-sm {
    min-height: 36px;
    padding: .35rem .85rem;
    font-size: .9rem;
}

.ob-btn-block {
    width: 100%;
    min-height: 50px;
    margin-top: .2rem;
}

/* A text link that is really a button (keeps the choice in Blazor state). */
.ob-link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: #ffe28d;
    font: inherit;
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
}

    .ob-link-btn:hover,
    .ob-link-btn:focus-visible {
        outline: none;
        color: #fff1bd;
    }

/* ---------- Content tiles (orientation) ---------- */

.ob-tiles {
    display: grid;
    gap: .75rem;
}

.ob-tile {
    display: block;
    padding: .9rem 1rem;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

    a.ob-tile:hover,
    a.ob-tile:focus-visible {
        outline: none;
        color: #fff;
        border-color: rgba(255, 216, 107, .55);
        background: rgba(255, 216, 107, .08);
        text-decoration: none;
    }

.ob-tile-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .2rem;
    color: #ffe28d;
    font-size: 1rem;
    font-weight: 900;
}

.ob-tile-blurb {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    opacity: .85;
}

.ob-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-top: .6rem;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, .45);
    border: 1px dashed rgba(255, 216, 107, .35);
}

    .ob-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.ob-video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    color: rgba(255, 226, 141, .8);
    font-weight: 800;
    letter-spacing: .04em;
}

    .ob-video-placeholder i {
        font-size: 2.2rem;
        opacity: .7;
    }

/* ---------- Rules and steps ---------- */

.ob-section {
    margin: 0 0 1.2rem;
    padding: .95rem 1rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 14px;
}

.ob-section-title {
    margin: 0 0 .5rem;
    color: #ffe28d;
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ob-list {
    margin: 0;
    padding-left: 1.2rem;
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    line-height: 1.5;
}

    .ob-list li + li {
        margin-top: .3rem;
    }

    .ob-list strong {
        color: #fff;
    }

.ob-section p:last-child {
    margin-bottom: 0;
}

/* ---------- Buttons ---------- */

.ob-continue {
    width: 100%;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    border: 0;
    border-radius: 999px;
    color: #1a1205;
    background: linear-gradient(180deg, #ffe28d, #d9a536);
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(220, 169, 63, .30), inset 0 1px 0 rgba(255, 255, 255, .62);
}

    .ob-continue:hover,
    .ob-continue:focus-visible {
        color: #120d04;
        background: linear-gradient(180deg, #ffebaa, #e1b14c);
        filter: brightness(1.03);
        text-decoration: none;
    }

    .ob-continue:disabled {
        opacity: .7;
        cursor: wait;
    }

    .ob-continue i {
        font-size: 1.5rem;
        line-height: 1;
    }

.ob-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 44px;
    padding: .55rem 1rem;
    color: #ffe28d;
    background: rgba(255, 226, 141, .08);
    border: 1px solid rgba(255, 226, 141, .22);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

    .ob-btn:hover,
    .ob-btn:focus-visible {
        outline: none;
        color: #fff1bd;
        background: rgba(255, 226, 141, .14);
        text-decoration: none;
    }

.ob-btn-discord {
    color: #fff;
    background: #5865f2;
    border-color: transparent;
}

    .ob-btn-discord:hover,
    .ob-btn-discord:focus-visible {
        color: #fff;
        background: #4752c4;
    }

.ob-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .8rem;
}

.ob-foot {
    margin: 1rem 0 0;
    text-align: center;
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
}

    .ob-foot a {
        color: #ffe28d;
        font-weight: 800;
        text-decoration: none;
    }

        .ob-foot a:hover,
        .ob-foot a:focus {
            color: #fff1bd;
            text-decoration: underline;
        }

.ob-small-link {
    font-size: .86rem;
}

/* ---------- Review status ---------- */

.ob-status {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 1.2rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 216, 107, .28);
    border-radius: 14px;
}

    .ob-status i {
        flex: 0 0 auto;
        font-size: 1.8rem;
        color: #ffd86b;
    }

    .ob-status.is-waiting {
        border-color: rgba(255, 150, 90, .5);
        background: rgba(255, 150, 90, .08);
    }

        .ob-status.is-waiting i {
            color: #ffb27a;
        }

.ob-status-title {
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
}

.ob-status-text {
    margin: .15rem 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    line-height: 1.45;
}

.ob-quote {
    margin: .6rem 0 0;
    padding: .7rem .9rem;
    color: rgba(255, 255, 255, .9);
    background: rgba(0, 0, 0, .3);
    border-left: 3px solid #ffb27a;
    border-radius: 8px;
    font-size: .9rem;
    white-space: pre-wrap;
}

/* ---------- Reading layout (welcome, steps, register): centered title, left-aligned content ---------- */

.ob-card-left {
    width: min(100%, 620px);
    padding: 2rem 2.1rem 1.8rem;
}

    .ob-card-left.ob-card-wide {
        width: min(100%, 740px);
    }

    /* One heading size and rhythm on every onboarding page; wraps into even lines on phones. */
    .ob-card-left .ob-header {
        text-align: center;
        margin: .25rem 0 1.3rem;
    }

    .ob-card-left .ob-title {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
        line-height: 1.12;
        text-wrap: balance;
    }

    .ob-card-left .ob-block {
        margin-bottom: 1.6rem;
    }

    .ob-card-left .ob-section {
        margin: 1.5rem 0;
    }

.ob-help-rule {
    display: block;
    margin-top: .15rem;
    color: rgba(255, 255, 255, .72);
    font-weight: 700;
}

/* ---------- Single-choice group (welcome experience question) ---------- */

.ob-fieldset {
    min-width: 0;
    margin: 0 0 1.6rem;
    padding: 0;
    border: 0;
}

    .ob-fieldset > legend.ob-label {
        float: none;
        width: auto;
        padding: 0;
        font-size: 1.02rem;
        line-height: inherit;
    }

/* The whole card is the <label>, so a click or tap anywhere picks it; the native radio inside keeps
   arrow-key and screen-reader behaviour. */
.ob-radio {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    width: 100%;
    margin: 0;
    padding: .85rem 1rem;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

    .ob-radio:hover {
        border-color: rgba(255, 216, 107, .45);
        background: rgba(255, 216, 107, .06);
    }

    .ob-radio.is-selected {
        border-color: #ffd86b;
        background: rgba(255, 216, 107, .09);
        box-shadow: inset 0 0 0 1px #ffd86b;
    }

    .ob-radio:has(.ob-radio-input:focus-visible) {
        outline: 2px solid #ffe28d;
        outline-offset: 3px;
    }

.ob-radio-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.ob-radio-mark {
    position: relative;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .12rem;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
}

    .ob-radio.is-selected .ob-radio-mark {
        border-color: #ffd86b;
    }

        .ob-radio.is-selected .ob-radio-mark::after {
            content: "";
            position: absolute;
            inset: 3px;
            border-radius: 50%;
            background: #ffd86b;
        }

.ob-radio-text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.ob-radio.is-selected .ob-option-title {
    color: #ffe28d;
}

/* ---------- Inline guidance ---------- */

.ob-inline-link {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* A setting the player changes somewhere else: emphasized guidance, not a control on this site. */
.ob-required {
    margin: .2rem 0 0;
    padding: .1rem 0 .1rem .85rem;
    color: rgba(255, 255, 255, .9);
    border-left: 3px solid #ffd86b;
    font-size: .98rem;
    line-height: 1.5;
}

    .ob-required strong {
        color: #ffe28d;
        font-weight: 900;
    }

.ob-required-sm {
    margin-top: .6rem;
    font-size: .88rem;
}

.ob-help-line-tight {
    margin-top: .9rem;
}

.ob-intro {
    margin: 0 0 .9rem;
    color: rgba(255, 255, 255, .86);
    font-size: 1.02rem;
    line-height: 1.6;
}

.ob-lead {
    margin: 1.4rem 0 .8rem;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
}

.ob-benefits {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: .6rem;
}

    .ob-benefits li {
        display: flex;
        align-items: baseline;
        gap: .7rem;
        color: rgba(255, 255, 255, .88);
        font-size: .98rem;
        line-height: 1.5;
    }

    .ob-benefits i {
        flex: 0 0 auto;
        color: #ffd86b;
        font-size: .95rem;
    }

/* A gold button sized to its label instead of the full card width. */
.ob-continue-auto {
    width: auto;
    padding: 0 1.5rem 0 1.7rem;
}

.ob-btn:disabled {
    opacity: .7;
    cursor: wait;
}

/* The quieter alternative under the main choice (D&D Beyond on step 2). */
.ob-alt {
    margin: 2rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ob-alt-title {
    margin: 0 0 .3rem;
    color: #ffe28d;
    font-size: 1.05rem;
    font-weight: 900;
}

.ob-alt-text {
    margin: 0 0 .85rem;
    color: rgba(255, 255, 255, .72);
    font-size: .95rem;
    line-height: 1.5;
}

/* A titled part of a step page, separated by space rather than boxes. */
.ob-step {
    margin: 1.8rem 0 0;
}

.ob-step-title {
    margin: 0 0 .35rem;
    color: #ffe28d;
    font-size: 1.2rem;
    font-weight: 900;
}

.ob-step-text {
    margin: 0 0 .8rem;
    color: rgba(255, 255, 255, .84);
    font-size: .97rem;
    line-height: 1.55;
}

.ob-step .ob-video {
    margin-top: 0;
}

.ob-step .ob-help {
    margin-top: .55rem;
}

.ob-ref {
    margin-top: .8rem;
}

/* Allowed & Modified Sources on the D&D Beyond path: a subtle gold accent. */
.ob-callout {
    margin: 1.2rem 0 0;
    padding: 1.05rem 1.15rem 1.15rem;
    background: rgba(255, 216, 107, .07);
    border: 1px solid rgba(255, 216, 107, .22);
    border-left: 4px solid #ffd86b;
    border-radius: 12px;
}

/* Expandable screenshot. */
.ob-shot {
    position: relative;
    display: block;
    width: 100%;
    margin: .2rem 0 0;
    padding: 0;
    overflow: hidden;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    cursor: zoom-in;
}

    .ob-shot img {
        display: block;
        width: 100%;
        height: auto;
    }

    .ob-shot:hover,
    .ob-shot:focus-visible {
        outline: none;
        border-color: rgba(255, 216, 107, .55);
    }

.ob-shot-hint {
    position: absolute;
    right: .6rem;
    bottom: .6rem;
    padding: .25rem .6rem;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.ob-shot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 160px;
    color: rgba(255, 226, 141, .8);
    border-style: dashed;
    border-color: rgba(255, 216, 107, .35);
    font-weight: 800;
    cursor: default;
}

    .ob-shot-placeholder i {
        font-size: 2rem;
        opacity: .7;
    }

/* A centered preview that keeps the whole image: scales down, never crops. */
.ob-figure {
    width: 100%;
    max-width: 480px;
    margin: 1.1rem auto 0;
}

    .ob-figure .ob-shot img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

.ob-figcaption {
    margin: .5rem 0 0;
    text-align: center;
    color: rgba(255, 255, 255, .62);
    font-size: .84rem;
    line-height: 1.4;
}

.ob-benefits-tight {
    margin-bottom: .9rem;
}

/* ---------- Dialog (D&D Beyond privacy confirm on register) ---------- */

.ob-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .72);
}

.ob-modal {
    position: relative;
    width: min(100%, 460px);
    padding: 1.7rem 1.6rem 1.3rem;
    color: #f8f2df;
    border-radius: 18px;
    border: 1px solid rgba(255, 216, 128, .35);
    background: linear-gradient(180deg, rgba(40, 32, 22, .98), rgba(16, 14, 11, .99));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 22px rgba(202, 162, 75, .16);
}

.ob-modal-title {
    margin: 0 2rem .5rem 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.2;
}

.ob-modal .ob-continue {
    margin-top: .6rem;
}

.ob-modal-secondary {
    margin-top: .7rem;
}

.ob-modal .ob-help:empty {
    display: none;
}

.ob-modal-close {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 38px;
    height: 38px;
    color: rgba(255, 255, 255, .8);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    cursor: pointer;
}

    .ob-modal-close:hover {
        color: #fff;
        background: rgba(255, 255, 255, .08);
    }

    .ob-modal-close:focus-visible,
    .ob-modal button:focus-visible,
    .ob-modal a:focus-visible {
        outline: 2px solid #ffe28d;
        outline-offset: 3px;
    }

.ob-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, .85);
    cursor: zoom-out;
}

    .ob-lightbox img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 10px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
    }

.ob-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    font-size: 1.3rem;
    cursor: pointer;
}

/* "Next" at the end of a step, with its note underneath. */
.ob-next-step {
    margin: 2.1rem 0 0;
    padding: 1.4rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.ob-foot-left {
    text-align: left;
}

/* From step 2 on: one understated help line into Discord. */
.ob-help-line {
    margin: 1.6rem 0 0;
    color: rgba(255, 255, 255, .62);
    font-size: .9rem;
}

    .ob-help-line a {
        color: #ffe28d;
        font-weight: 800;
        text-decoration: none;
    }

        .ob-help-line a:hover,
        .ob-help-line a:focus {
            color: #fff1bd;
            text-decoration: underline;
        }

/* ---------- Member-home next-step card ---------- */

.ob-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    color: #f8f2df;
    border-radius: 16px;
    border: 1px solid rgba(255, 216, 128, .35);
    background: linear-gradient(135deg, rgba(58, 44, 22, .96), rgba(24, 20, 14, .96));
    box-shadow: 0 14px 30px rgba(0, 0, 0, .4), 0 0 18px rgba(202, 162, 75, .18);
}

.ob-next-eyebrow {
    margin: 0 0 .25rem;
    color: #ffd86b;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ob-next-title {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
}

.ob-next-blurb {
    margin: .25rem 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .9rem;
    line-height: 1.4;
}

.ob-next-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 46px;
    padding: .55rem 1.15rem;
    color: #1a1205;
    background: linear-gradient(180deg, #ffe28d, #d9a536);
    border-radius: 999px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(220, 169, 63, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
    white-space: nowrap;
}

    .ob-next-cta:hover,
    .ob-next-cta:focus-visible {
        color: #120d04;
        background: linear-gradient(180deg, #ffebaa, #e1b14c);
        text-decoration: none;
    }

/* ---------- Member-home "Your guide" card (quieter sibling of .ob-next) ---------- */

.ob-guide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: .9rem 1.15rem;
    color: #f8f2df;
    border-radius: 16px;
    border: 1px solid rgba(255, 216, 128, .22);
    background: rgba(22, 25, 29, .92);
}

.ob-guide-title {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
}

.ob-guide-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .5rem 1.05rem;
    border: 1px solid rgba(255, 216, 128, .55);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

    .ob-guide-cta:hover,
    .ob-guide-cta:focus-visible {
        background: rgba(255, 216, 128, .12);
        text-decoration: none;
    }

@media (max-width: 575.98px) {
    .ob-guide {
        flex-direction: column;
        align-items: stretch;
    }

    .ob-guide-cta {
        justify-content: center;
    }
}

/* ---------- Links styled as buttons ---------- */

/* app.css forces `a { color: … !important; text-shadow }` site-wide, which turns gold buttons and
   links that are <a> elements cream with a heavy shadow. Put the onboarding colors back. */
.ob-page a.ob-continue,
.ob-page a.ob-continue:hover,
.ob-page a.ob-continue:focus-visible,
a.ob-next-cta,
a.ob-next-cta:hover,
a.ob-next-cta:focus-visible {
    color: #1a1205 !important;
    text-shadow: none;
}

a.ob-guide-cta,
a.ob-guide-cta:hover,
a.ob-guide-cta:focus-visible {
    color: #ffe28d !important;
    text-shadow: none;
}

.ob-page a.ob-btn,
.ob-modal a.ob-btn,
.ob-page .ob-foot a,
.ob-page .ob-help-line a,
.ob-page a.ob-small-link,
.ob-page a.ob-inline-link,
.ob-page a.ob-tile .ob-tile-title {
    color: #ffe28d !important;
    text-shadow: none;
}

    .ob-page a.ob-btn:hover,
    .ob-page a.ob-btn:focus-visible,
    .ob-modal a.ob-btn:hover,
    .ob-modal a.ob-btn:focus-visible,
    .ob-page .ob-foot a:hover,
    .ob-page .ob-help-line a:hover,
    .ob-page a.ob-inline-link:hover,
    .ob-page a.ob-small-link:hover {
        color: #fff1bd !important;
    }

.ob-page a.ob-tile {
    color: rgba(255, 255, 255, .9) !important;
    text-shadow: none;
}

.ob-page a.ob-btn-discord,
.ob-page a.ob-btn-discord:hover,
.ob-page a.ob-btn-discord:focus-visible {
    color: #fff !important;
}

/* ---------- Keyboard focus ---------- */

/* Hover styles above clear the default outline; keyboard users still get a clear ring. */
.ob-card a:focus-visible,
.ob-card button:focus-visible,
.ob-lightbox-close:focus-visible {
    outline: 2px solid #ffe28d;
    outline-offset: 3px;
}

/* ---------- Phones ---------- */

@media (max-width: 520px) {
    .ob-page {
        align-items: flex-start;
        min-height: calc(100dvh - 74px);
        padding: 1rem .75rem calc(2rem + env(safe-area-inset-bottom));
    }

    .ob-card,
    .ob-card-wide,
    .ob-card-left {
        padding: 1.15rem 1rem 1rem;
        border-radius: 18px;
    }

    .ob-continue-auto {
        width: 100%;
        padding: 0 1rem;
    }

    .ob-options-2 {
        grid-template-columns: 1fr;
    }

    .ob-next {
        flex-direction: column;
        align-items: stretch;
    }

    .ob-next-cta {
        justify-content: center;
    }
}