/* The account tab. Phone-first like the rest, and every colour a partner theme token -
   the fallbacks are what it looks like before a theme loads, not a second design. */

.acct {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--wx-ground, #111);
    color: var(--wx-ink, #fff);
    font-family: var(--wx-font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}

.acct-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.acct-who {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.acct-name {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

.acct-contact {
    margin: 0;
    font-size: 0.9rem;
    color: var(--wx-muted, #cfcfcf);
}

.acct-contact i {
    width: 1.1em;
    color: var(--wx-muted-dim, #4a4a4a);
}

/* ---------- what you are holding ---------- */

.acct-avail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acct-avail h3,
.acct-address h3,
.acct-avatar h3,
.acct-claim h3 {
    margin: 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
}

/* A Profile section: the title, and Edit across from it - see ProfileSection. */
.acct-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

/* The address and the orders: a heading, a line of help, then the thing itself. */
.acct-address {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Two balances, two columns - three left a million points too narrow to fit. */
.acct-balances {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.acct-balance {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 8px;
    text-align: center;
}

.acct-balance-n {
    font-size: 1.35rem;
    line-height: 1;

}



/* ---------- claiming the account ---------- */

.acct-claim {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 14px;
}

.acct-claim.is-prompted {
    border-color: var(--wx-signal, #d4af37);
}

.acct-text {
    margin: 0;
    color: var(--wx-muted, #cfcfcf);
    font-size: 0.9rem;
    line-height: 1.5;
}

.acct-signin {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wx-input.is-dob {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    letter-spacing: 0.08em;
}

/* The code: six cells drawn under one invisible input (see AccountScreen). */
.acct-otp {
    position: relative;
}

.acct-otp-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* 16px, so iOS does not zoom the page when the field takes focus. */
    font-size: 16px;
    cursor: text;
}

.acct-otp-cells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.acct-otp-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: var(--wx-radius, 12px);
    background: var(--wx-ground, #111);
    color: var(--wx-ink, #fff);
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-size: 1.5rem;
    font-weight: 600;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.acct-otp-cell.is-active {
    border-color: var(--wx-signal, #d4af37);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wx-signal, #d4af37) 30%, transparent);
}

.acct-otp-input:disabled ~ .acct-otp-cells .acct-otp-cell {
    opacity: 0.6;
}

/* The two quiet ways out under the code and the password. */
/* One quiet way out now - the other identifier is Edit, beside where it was sent -
   so it sits in the middle. */
.acct-signin-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* "Code sent to f****@x.com" with Edit at the right-hand end of the same line. */
.acct-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.acct-label-row .wx-label { min-width: 0; overflow-wrap: anywhere; }
.acct-edit { flex: none; padding: 0; font-size: 0.8rem; }

/* A password with its eye. */
.acct-pw {
    position: relative;
    display: flex;
}

.acct-pw .wx-input {
    flex: 1;
    padding-right: 44px;
}

.acct-pw-eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    border: 0;
    background: none;
    color: var(--wx-muted, #9a9a9a);
    font-size: 1rem;
    cursor: pointer;
}

/* The small print under Continue: what a text commits somebody to. */
.acct-fine {
    margin: 2px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--wx-muted, #9a9a9a);
}

.acct-link { align-self: center; }

.acct-signout { align-self: flex-start; }

/* ---------- your look ---------- */

.acct-who {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.acct-avatar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
}

.acct-photo-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Which partner this is, and the way to a different one. A header rather than a section:
   it sits above the profile because it is about what the app is showing, not about the
   account below it. */
.acct-partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wx-line-soft, #232b36);
}

.acct-partners-who {
    color: var(--wx-muted, #cfcfcf);
    font-size: 0.9rem;
}

/* ── Age and state ─────────────────────────────────────────────────────────────
   The two facts the Official Rules turn on, asked on the account screen because it
   is where the games and the giveaways send somebody when they refuse. */
.acct-elig .wx-input { margin-bottom: 4px; }

/* The room's icon, in the primary colour. */
.acct-menu-row > .fas:first-child {
    width: 20px;
    text-align: center;
    color: var(--wx-signal, #d4af37);
}

/* The profile form. */
.acct-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acct-form-row {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a text input has a natural width of about twenty
       characters, and 1fr would not shrink a column below it - the first and last name
       side by side pushed the whole Profile page to 580px on a 390px phone. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

/* The code box. Codes are typed as printed - caps, dashes - so the field shows them
   that way. */
.acct-code {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wx-input.is-partner-code {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wx-input.is-partner-code::placeholder {
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
}

.acct-code a.wx-btn {
    text-decoration: none;
    text-align: center;
}


/* ---------- ways to earn ---------- */

/* The panel's one root: a grid of its own, and never a flex item that shrinks - the
   scrolling room is a flex column, and the lists inside hide their overflow. */
.earn {
    display: grid;
    gap: 4px;
    flex: none;
}

/* The same shape as a game's key (gamestage.css .gi-key), drawn here so the account
   page has it without the games' stylesheet: a hairline grid, the price in the data
   face and gold, a done row gone quiet. */
.earn-title {
    margin: 18px 0 0;
    font-family: var(--wx-font-display, inherit);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wx-ink, #fff);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.earn-title small {
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--wx-muted-dim, #6f6f6f);
    white-space: nowrap;
}

.earn-key {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1px;
    background: var(--wx-line, #2c2c2c);
    border: 1px solid var(--wx-line, #2c2c2c);
    border-radius: 8px;
    overflow: hidden;
}

.earn-key li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    background: var(--wx-surface-2, #151515);
    color: var(--wx-ink, #fff);
}

.earn-n {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.earn-n b { font-size: 0.9rem; font-weight: 600; }
.earn-n small { font-size: 0.78rem; color: var(--wx-muted, #9a9a9a); }

.earn-p {
    font-family: var(--wx-font-data, ui-monospace, Consolas, monospace);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.9rem;
}

.earn-key li:not(.is-spent) .earn-p[data-free="1"] { color: var(--wx-signal, #d4af37); }

.earn-key li.is-now {
    background: rgba(212, 175, 55, 0.14);
    box-shadow: inset 3px 0 0 var(--wx-signal, #d4af37);
}

.earn-key li.is-spent { opacity: 0.5; }

.earn-note { margin-top: 14px; }

.earn-group { display: grid; min-width: 0; }

/* The website's Ways to Earn page (is-wide): the lists in columns where the screen has
   room, the intro and the sign-in note across the top and foot. */
@media (min-width: 900px) {
    .earn.is-wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        align-items: start;
    }

    .earn.is-wide .earn-intro,
    .earn.is-wide .earn-note { grid-column: 1 / -1; }
}


/* ---------- the Profile room (ProfileRoom.razor) ---------- */

/* One column in the app and on a phone: the wrappers step aside and the room is the
   flex column it always was. */
.acct-profile,
.acct-profile-main,
.acct-profile-side { display: contents; }

.acct-credit b { color: var(--wx-ink, inherit); }

/* The website's upload is a label round a hidden file input, dressed as the button. */
.acct-upload { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.acct-upload.is-busy { opacity: 0.5; pointer-events: none; }

/* The website on a desktop: who they are on the left, their face and address on the
   right. */
@media (min-width: 900px) {
    .acct-profile.is-wide {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 48px;
        align-items: start;
    }

    .acct-profile.is-wide .acct-profile-main,
    .acct-profile.is-wide .acct-profile-side {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
    }

    .acct-profile.is-wide .acct-avatar { margin-top: 0; }
}


/* ---------- the hub on a wide website screen (AccountScreen Wide) ---------- */

.acct-hub-side,
.acct-hub-main { display: contents; }

@media (min-width: 900px) {
    .acct.is-wide { background: none; }

    .acct.is-wide .acct-scroll {
        display: grid;
        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
        overflow: visible;
        padding: 16px 0 8px;
    }

    .acct.is-wide .acct-hub-side,
    .acct.is-wide .acct-hub-main {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
    }

    /* The rooms as tiles: two across, the hairline between them the list's own. */
    .acct.is-wide .acct-menu:not(.is-nudge) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1px;
        background: var(--wx-line, #2c2c2c);
    }

    .acct.is-wide .acct-menu:not(.is-nudge) .acct-menu-row {
        padding: 22px 20px;
        border: 0;
        background: var(--wx-ground, #111);
    }

    .acct.is-wide .acct-menu:not(.is-nudge) .acct-menu-row:hover {
        background: var(--wx-surface, #1b1b1b);
    }

    .acct.is-wide .acct-signout { align-self: flex-start; }
}



/* Prizes: what they have won, and the claim form. One card per prize; the one waiting to
   be claimed carries the signal colour. See PrizesPanel. */
.prizes { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.prize-card {
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px;
}
.prize-card.is-open { border-color: var(--wx-signal, #d4af37); }
.prize-head { display: flex; gap: 12px; align-items: center; }
.prize-img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; }
.prize-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prize-what b { font-size: 1rem; color: var(--wx-ink, #fff); }
.prize-what small { color: var(--wx-muted, #9a9a9a); font-size: 0.8rem; }
.prize-due { color: var(--wx-signal, #d4af37); font-weight: 700; font-size: 0.85rem; margin-top: 2px; }
.prize-done { color: var(--wx-muted, #9a9a9a); font-size: 0.85rem; margin-top: 2px; }
.prize-go { align-self: stretch; }
.prize-form { display: flex; flex-direction: column; gap: 8px; }
.prize-doc {
    max-height: 260px; overflow-y: auto; padding: 12px 14px;
    border: 1px solid var(--wx-line, #2c2c2c); border-radius: 10px;
    background: var(--wx-ground, #111); color: var(--wx-ink, #fff);
    font-size: 0.82rem; line-height: 1.5;
}
.prize-doc h3 { margin: 0 0 8px; font-size: 0.95rem; }
.prize-doc p, .prize-doc ul { margin: 0 0 8px; }
.prize-doc ul { padding-left: 18px; }

.prizes.is-wide { max-width: 720px; }