@import '_content/Nosum.Wasm.Controls/Nosum.Wasm.Controls.3ydjnzfz6l.bundle.scp.css';

/* /Components/Account/AccountForm.razor.rz.scp.css */
.account-form[b-ofmsk5ty9i] {
    display: block;
    width: calc(var(--u) * 120);
    max-width: 100%;
}

.account-form[b-ofmsk5ty9i]  .game-stack {
    gap: calc(var(--u) * 2);
}

/* Registering has four fields: two columns, so the card is not taller than the window. */
.account-form.register[b-ofmsk5ty9i] {
    width: calc(var(--u) * 190);
}

.account-fields[b-ofmsk5ty9i] {
    display: grid;
    gap: calc(var(--u) * 2);
}

.account-form.register .account-fields[b-ofmsk5ty9i] {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 2) calc(var(--u) * 4);
}
/* /Components/Account/PasswordRecoveryForm.razor.rz.scp.css */
.account-form[b-hu25x8ehki] {
    display: block;
    width: calc(var(--u) * 120);
    max-width: 100%;
}

.account-form[b-hu25x8ehki]  .game-stack {
    gap: calc(var(--u) * 2);
}

.account-fields[b-hu25x8ehki] {
    display: grid;
    gap: calc(var(--u) * 2);
}
/* /Components/Account/StartScreen.razor.rz.scp.css */
/* The start screen: Cloudy_Ocean_BG.png (placeholder art, ADR-007) at the UI pixel, the horizon about 62% down, sky and sea colours for what is beyond the image. */
.start-screen[b-r0vxqye3yg] {
    position: fixed;
    inset: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: safe center;
    gap: calc(var(--u) * 2);
    padding: var(--nosum-gutter);
    overflow: auto;
    background-color: #00a2ff;
    background-image: url("_content/Nosum.Wasm.Controls/ui/Cloudy_Ocean_BG.png");
    background-repeat: no-repeat;
    background-size: calc(var(--u) * 1500) calc(var(--u) * 520);
    background-position: 50% calc(62vh - var(--u) * 345);
    image-rendering: pixelated;
}

/* Title: the UI font at 3 font pixels per u, cream with a brown outline and a hard shadow. */
.start-logo[b-r0vxqye3yg] {
    --logo-px: calc(var(--u) * 2);
    --logo-o: var(--u);

    margin: 0;
    font: 400 calc(var(--logo-px) * 12.5) / 1 var(--nosum-font);
    color: var(--nosum-cream);
    text-shadow:
        var(--logo-o) 0 0 var(--nosum-edge), calc(var(--logo-o) * -1) 0 0 var(--nosum-edge), 0 var(--logo-o) 0 var(--nosum-edge), 0 calc(var(--logo-o) * -1) 0 var(--nosum-edge),
        var(--logo-o) var(--logo-o) 0 var(--nosum-edge), calc(var(--logo-o) * -1) var(--logo-o) 0 var(--nosum-edge), var(--logo-o) calc(var(--logo-o) * -1) 0 var(--nosum-edge), calc(var(--logo-o) * -1) calc(var(--logo-o) * -1) 0 var(--nosum-edge),
        0 calc(var(--logo-o) * 3) 0 var(--nosum-edge), var(--logo-o) calc(var(--logo-o) * 3) 0 var(--nosum-edge), calc(var(--logo-o) * -1) calc(var(--logo-o) * 3) 0 var(--nosum-edge);
}

.start-tagline[b-r0vxqye3yg] {
    margin: 0 0 var(--nosum-gap-group);
    color: #fff;
    text-shadow: var(--tp) var(--tp) 0 var(--nosum-edge);
}

/* Short windows (a register form is tall): a smaller title. */
@media (max-height: 800px) {
    .start-logo[b-r0vxqye3yg] {
        --logo-px: calc(var(--tp) * 2);
        --logo-o: var(--tp);
    }
}