/* AwakeCraft — the account site.
   Deliberately tiny: no framework, no fonts, no images, no build step. One
   card in the middle of the screen, whichever route is showing. */

:root {
    color-scheme: dark;
    --stone: #14161c;
    --stone-raised: #1d212a;
    --stone-edge: #2c323f;
    --mythril: #8fd4e8;
    --mythril-dim: #5f9db0;
    --gold: #d9b45b;
    --ink: #e6e8ee;
    --ink-soft: #a5abbb;
    --bad: #e5806f;
    --good: #7fce9b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 24px;
    background: radial-gradient(ellipse at 50% -10%, #232838 0%, var(--stone) 60%);
    color: var(--ink);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
    width: 100%;
    max-width: 30rem;
    background: var(--stone-raised);
    border: 1px solid var(--stone-edge);
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 18px 50px rgb(0 0 0 / 45%);
}

.crest {
    display: block;
    width: 46px;
    height: 46px;
}

/* ---- shell: a header and a footer around whatever route is showing ---- */

header {
    width: 100%;
    max-width: 30rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.brand:hover span {
    color: var(--mythril);
}

nav a,
button.link {
    padding: 0;
    background: none;
    border: 0;
    color: var(--mythril);
    font: inherit;
    font-size: .9rem;
    text-decoration: none;
    cursor: pointer;
}

nav a:hover,
button.link:hover {
    color: #a6e0f0;
    text-decoration: underline;
}

footer {
    width: 100%;
    max-width: 30rem;
    color: var(--ink-soft);
    font-size: .8rem;
    text-align: center;
}

footer p {
    margin: 0;
}

/* keyboard-first, and invisible until it matters */
.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    padding: .5rem .8rem;
    background: var(--stone-raised);
    border: 1px solid var(--mythril);
    border-radius: 8px;
    color: var(--ink);
}

main:focus {
    outline: none;
}

/* ---- the signed-in facts list ---- */

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .4rem 1rem;
    margin: 0 0 1.25rem;
    font-size: .95rem;
}

.facts dt {
    color: var(--ink-soft);
}

.facts dd {
    margin: 0;
    word-break: break-word;
}

h1 {
    margin: 0 0 .25rem;
    text-align: center;
    font-size: 1.35rem;
    letter-spacing: .01em;
    color: var(--gold);
}

.sub {
    margin: 0 0 1.75rem;
    text-align: center;
    font-size: .9rem;
    color: var(--ink-soft);
}

label {
    display: block;
    margin-bottom: .35rem;
    font-size: .85rem;
    color: var(--ink-soft);
}

input[type="password"] {
    width: 100%;
    margin-bottom: 1rem;
    padding: .7rem .8rem;
    background: #10131a;
    border: 1px solid var(--stone-edge);
    border-radius: 8px;
    color: var(--ink);
    font-size: 1rem;
    font-family: inherit;
}

input[type="password"]:focus {
    outline: 2px solid var(--mythril-dim);
    outline-offset: 1px;
    border-color: transparent;
}

button {
    width: 100%;
    padding: .75rem 1rem;
    background: var(--mythril);
    border: 0;
    border-radius: 8px;
    color: #0d1014;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

button:hover:not(:disabled) {
    background: #a6e0f0;
}

button:disabled {
    opacity: .5;
    cursor: default;
}

.hint {
    margin: .9rem 0 0;
    font-size: .8rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Status panel — one element that swaps between working/ok/error. */
#status {
    margin-top: 1.25rem;
    padding: .85rem 1rem;
    border-radius: 8px;
    font-size: .92rem;
    border: 1px solid var(--stone-edge);
    background: #10131a;
}

#status:empty {
    display: none;
}

#status.ok {
    border-color: #2f5c42;
    color: var(--good);
}

#status.bad {
    border-color: #5c3630;
    color: var(--bad);
}

.center {
    text-align: center;
}

a {
    color: var(--mythril);
}

.spinner {
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .5em;
    border: 2px solid var(--mythril-dim);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    vertical-align: -.05em;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; }
}

/* The one command a player may have to type. Same inset surface as the
   password field, so an instruction reads as something to copy. */
code {
    padding: .12em .4em;
    background: #10131a;
    border: 1px solid var(--stone-edge);
    border-radius: 5px;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .85em;
    word-break: break-word;
}

/* the pair of choices on the front page, and the row under a sent mail */
.actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.cta {
    padding: .7rem 1.1rem;
    background: var(--mythril);
    border-radius: 8px;
    color: #0d1014;
    font-weight: 600;
    text-decoration: none;
}

.cta:hover {
    background: #a6e0f0;
}

.actions a:not(.cta),
.actions button.link {
    color: var(--mythril);
}

/* the Mojang notice: present, legible, and not shouting */
.legal {
    margin-top: .6rem;
    font-size: .7rem;
    letter-spacing: .02em;
    color: #6f7688;
    text-transform: uppercase;
}