/* The account tab. Phone-first like the rest, and every color 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;
    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;
}

/* The one box on the sign-in screen, lit before it is touched: a step up from the card in
   both light and dark themes, edged in the theme's accent, with an example inside. The
   ground color made it look like part of a page that was switched off (2026-10-19).
   The same look for every box somebody is meant to type in (.wx-input.is-ready in
   ui.css) and the code cells below (2026-10-27). */
.acct-id-input {
    background: color-mix(in srgb, var(--wx-ink, #fff) 7%, var(--wx-ground, #111));
    border-color: color-mix(in srgb, var(--wx-signal, #d4af37) 55%, var(--wx-line, #2c2c2c));
}

.acct-id-input::placeholder { opacity: 0.85; }

.acct-id-input:hover:not(:disabled) {
    border-color: var(--wx-signal, #d4af37);
}

.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: color-mix(in srgb, var(--wx-ink, #fff) 7%, var(--wx-ground, #111));
    border-color: color-mix(in srgb, var(--wx-signal, #d4af37) 55%, var(--wx-line, #2c2c2c));
    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-fine a { color: inherit; text-decoration: underline; }

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

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

/* Delete Account on the left in red, and Sign Out on the right in the accent, one line -
   the words colored, no outlines (Frank, 2026-10-27). */
.acct-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.acct-foot .acct-signout,
.acct-foot .acct-delete { align-self: auto; }

.acct-foot .wx-btn.is-quiet.acct-signout { color: var(--wx-signal, #d4af37); }

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

/* ---------- closing the account ---------- */

/* Quieter than Sign Out and under it. The stores require an account to be
   deletable from inside the app; nothing says it has to be the first thing the
   eye lands on. */
.acct-delete {
    align-self: flex-start;
    color: var(--wx-bad, #e5484d);
}

/* The headings inside the room - "You'll be removed from", "You'll lose". Small,
   because the lists under them are what is being read. */
.acct-subhead {
    margin: 14px 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
}

.acct-list {
    margin: 0;
    padding-left: 20px;
    color: var(--wx-muted, #cfcfcf);
    font-size: 0.9rem;
    line-height: 1.6;
}

.acct-list li { margin-bottom: 4px; }

/* Said in the text's own color rather than the muted one: it is the line that
   should stop somebody. */
.acct-text.is-warn { color: var(--wx-bad, #e5484d); }

/* Full width and apart from what is above it, so it is not reached by accident
   while reading. */
.acct-delete-go {
    margin-top: 16px;
    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. */
/* One wide button at the top of the account screen: whose app this is, and the way to
   another - the welcome screen, where Staff Sign In is too (Frank, 2026-10-27). Edged in
   the accent, so it reads as a button and not a label. */
.wx-btn.is-quiet.acct-partners { border: 2px solid var(--wx-signal, #d4af37); }

.acct-partners {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    height: auto;
    padding-block: 10px;
    text-align: center;
    white-space: normal;
}

.acct-partners-who { font-weight: 700; }

.acct-partners-how {
    color: var(--wx-muted, #cfcfcf);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── 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 color. */
.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; }


/* 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; }

/* The scroll box's rows keep their height and the box scrolls. Left to shrink, a group
   that clips (wx-group is overflow: hidden) was squeezed to what fit on the screen and
   cut off the account menu after Membership (2026-10-27). */
.acct-scroll > *,
.acct-hub-main > * { flex-shrink: 0; }

@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 color. 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; }

/* Winner Paperwork's W-9 kit, on a claimed prize (2026-10-08). */
.prize-w9 { display: grid; gap: 10px; margin-top: 4px; }
.prize-w9 .wx-btn { justify-self: start; }
.prize-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--wx-ink, #fff); line-height: 1.45; }
.prize-mailto { display: grid; margin: 6px 0 0; padding: 8px 12px; border-left: 3px solid var(--wx-signal, #d4af37); font-weight: 600; }

/* The two quiet links under the code box on the sign-in room. Small on purpose: they
   have to be there and findable, and they are not what the screen is for. */
.acct-policy-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: center;
    justify-content: center;
    margin: 12px 0 0;
    font-size: 0.78rem;
}

.acct-policy-links button {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    color: var(--wx-muted, #9a9a9a);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.acct-policy-links button:hover { color: var(--wx-ink, #fff); }

.acct-policy-links .sep { color: var(--wx-muted-dim, #6b6863); }

/* ---------- the sign-in sheet ---------- */

/* SignInSheet: the one sign-in, opened from any door (2026-10-23). The shared .wx-sheet
   with a title and an X on top; a form's width on a desktop. The "or" rule and the
   Google/Facebook buttons moved here from the sign-in page, which draws them too. */
.signin-sheet { max-width: 440px; }

@media (min-width: 640px) {
    .signin-sheet { width: min(440px, calc(100vw - 48px)); }
}

.signin-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.signin-sheet-title { margin: 0; font-size: 1.05rem; }

.signin-sheet-x {
    border: 0;
    background: transparent;
    color: var(--wx-muted, #9a9a9a);
    font-size: 1.1rem;
    padding: 6px;
    cursor: pointer;
}

.signin-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 12px;
    color: var(--wx-muted, #9a9a9a);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.signin-or::before,
.signin-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--wx-line, #2c2c2c);
}

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

.signin-social .fab {
    margin-right: 6px;
}

/* The Store Credits card on Profile: a line each - Member Discounts, Gift Cards, Refund
   Credits - the name on the left and the amount on the right (2026-10-27). */
.acct-credits { display: grid; gap: 6px; margin-top: 8px; }

.acct-credit-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.acct-credit-row b { color: var(--wx-ink, inherit); font-family: var(--wx-font-data, inherit); }
.acct-credit-note { font-size: 0.8rem; margin-top: -2px; }
.acct-credit-code { justify-self: start; }