@font-face {
    font-family: AttanceWords;
    src: url('/fonts/games/cp-regular-2fed1725e4fba84fd3d0d701f577be18.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: AttanceWords;
    src: url('/fonts/games/cp-semibold-8ca08dd9c8d7bc46890658f8f563307c.woff2') format('woff2');
    font-weight: 600 800;
    font-display: swap;
}
.attance-account {
    max-width: 44rem;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 1rem;
    font: 1rem/1.55 AttanceWords, system-ui, sans-serif;
    color: var(--attance-ink);
}
.attance-account [hidden] { display: none !important; }
.attance-account h1, .attance-account h2, .attance-account h3 { font-family: inherit; font-weight: 600; text-wrap: balance; }
.account-intro h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.13; letter-spacing: -.025em; margin: 0 0 1rem; }
.account-intro p { color: var(--attance-muted); font-size: 1.12rem; margin: 0 0 1.75rem; }
.account-workspace { padding: 1.75rem; background: var(--attance-surface); border-radius: 16px; }
.account-workspace h2 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .75rem; }
.account-workspace p { margin: 0 0 1.2rem; }
.account-google-button { min-height: 44px; max-width: 100%; }
.account-google .account-field-note { margin-top: .75rem; }
.account-signin-divider { padding-top: 1.25rem; border-top: 1px solid var(--attance-control); color: var(--attance-muted); }
.account-google-link { margin: 1.75rem 0; padding-top: 1.5rem; border-top: 1px solid var(--attance-control); }
.account-google-link h3 { font-size: 1.125rem; }
.account-workspace form { margin: 1.5rem 0 0; }
.attance-account label { display: block; font-weight: 600; margin-bottom: .45rem; }
.attance-account :is(input, select) {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--attance-control);
    border-radius: 7px;
    background: var(--attance-canvas);
    color: var(--attance-ink);
    padding: .7rem .8rem;
    font: inherit;
    caret-color: var(--attance-action);
}
.attance-account :is(input, select):hover { border-color: var(--attance-action); }
.attance-account input[aria-invalid=true] { border-color: var(--attance-focus); }
.attance-account input::placeholder { color: var(--attance-muted); opacity: 1; }
.attance-account :is(button, input, select, a, [tabindex]):focus-visible { outline: 3px solid var(--attance-focus); outline-offset: 4px; }
.attance-account button, .attance-account a { -webkit-tap-highlight-color: transparent; }
.attance-account a { color: var(--attance-action); text-underline-offset: .2em; }
.attance-account a:hover { color: var(--attance-primary-hover); }
.attance-account .account-field-note { font-size: .88rem; color: var(--attance-muted); margin: .7rem 0 1.25rem; }
.account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .7rem 1.1rem;
    border: 1px solid var(--attance-control);
    border-radius: 7px;
    font: 600 1rem/1.3 AttanceWords, system-ui, sans-serif;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.account-button.primary, .attance-account a.account-button.primary { background: var(--attance-primary); color: var(--attance-primary-ink); border-color: var(--attance-primary); }
.account-button.primary:hover, .attance-account a.account-button.primary:hover { background: var(--attance-primary-hover); border-color: var(--attance-primary-hover); color: var(--attance-primary-ink); }
.account-button.secondary { background: var(--attance-raised); color: var(--attance-ink); }
.account-button.secondary:hover { background: var(--attance-selected); }
.attance-account button:disabled { cursor: wait; opacity: .6; }
.account-status { color: var(--attance-muted); }
.account-status:empty { display: none; }
.account-status[data-kind=error] { color: var(--attance-focus); padding-bottom: 1rem; border-bottom: 1px solid var(--attance-line); }
.account-status[data-kind=success] { color: var(--attance-action); }
.account-code-input { font-size: 1.65rem !important; font-variant-numeric: tabular-nums; max-width: 15rem; }
.account-code-actions { display: flex; flex-wrap: wrap; gap: .1rem 1.25rem; margin-top: 1rem; }
.account-text-button { padding: .6rem 0; min-height: 44px; border: 0; background: transparent; color: var(--attance-action); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.account-text-button:hover { color: var(--attance-primary-hover); }
.account-email-address { color: var(--attance-action); overflow-wrap: anywhere; }
.attance-account #account-code-recipient { overflow-wrap: anywhere; }
.account-profiles { border-top: 1px solid var(--attance-line); padding-top: 1.5rem; margin-top: 1.75rem; }
.account-profiles h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.account-profiles p { color: var(--attance-muted); }
.account-profiles select { margin-bottom: 1rem; }
.account-play-links { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.account-play-links > a:not(.account-button) { display: inline-flex; min-height: 44px; align-items: center; }
.account-sign-out { border-top: 1px solid var(--attance-line); margin-top: 1.75rem; padding-top: 1rem; }
.account-sign-out .account-field-note { margin: .2rem 0 0; }
.account-guest-note { border-top: 1px solid var(--attance-line); padding-top: 1.5rem; margin-top: 2rem; }
.account-guest-note h2 { font-size: 1.2rem; margin: 0 0 .65rem; }
.account-guest-note p { color: var(--attance-muted); margin-bottom: .6rem; }
.account-guest-note a { display: inline-flex; align-items: center; min-height: 44px; }
.account-privacy-link { margin-top: 1.5rem; font-size: .9rem; }
.account-privacy-link a { display: inline-flex; align-items: center; min-height: 44px; }
.account-privacy { max-width: 51rem; }
.account-privacy section { margin-top: 2rem; }
.account-privacy section h2 { font-size: 1.4rem; margin: 0 0 .8rem; }
.account-privacy section p { max-width: 72ch; color: var(--attance-muted); }
.account-privacy .account-privacy-link { border-top: 1px solid var(--attance-line); padding-top: 1rem; }
@media (max-width: 540px) {
    .attance-account { padding: 1.5rem 1rem .5rem; }
    .account-workspace { padding: 1.25rem; }
    .account-intro p { font-size: 1.02rem; }
    .account-workspace form > .account-button, .account-play-links > .account-button { width: 100%; }
}