/*
 * Inner pages (rankings, download, entrar, registrar, conta, erro): content cards under the
 * page head band, the download platform buttons, the install columns, the auth card styled
 * after the in-game login window and the account actions. Builds on site.css (tokens,
 * surfaces, .btn, .card, .card-dark, tables, forms, alerts).
 */

/* ---- Shared ---- */
/* Cards and blocks of a page, one under the other. */
.stack {
    display: grid;
    /* minmax(0, ...): a wide table scrolls inside its card instead of widening the column. */
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

.card-title {
    margin: 0 0 16px;
    font-size: 22px;
}

/* ---- Rankings: centered podium column, empty-table row ---- */
:is(#ranking-personagens, #ranking-guildas) :is(th, td):first-child:not(.empty) {
    width: 1%;
    text-align: center;
}

td.empty {
    color: var(--lead);
}

/* ---- Download: the platform buttons in a dark card ---- */
.dl-card {
    padding: 32px;
}

.dl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dl-platform {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 104px;
    padding: 20px 24px;
    text-decoration: none;
    background: var(--obs);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--red);
    border-radius: var(--radius);
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.dl-platform:hover {
    border-color: var(--gold);
    border-left-color: var(--red);
    transform: translateY(-2px);
}

/* After the hover rule: site.css's reduced-motion list loads first and would lose to it. */
@media (prefers-reduced-motion: reduce) {
    .dl-platform:hover {
        transform: none;
    }
}

.dl-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    color: var(--gold);
}

.dl-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.dl-label {
    font: 700 12px/1.2 var(--f-display);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--lead);
}

.dl-name {
    font: 700 28px/1 var(--f-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dl-size {
    font: 700 13px/1.3 var(--f-mono);
    color: var(--lead);
}

.dl-version {
    margin: 24px 0 0;
    font-size: 15px;
    color: var(--lead);
}

.dl-version span {
    font-family: var(--f-mono);
    font-weight: 700;
    color: #fff;
    overflow-wrap: anywhere;
}

.dl-sums {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--lead);
}

/* The hash wraps into two even lines of 32 characters instead of a narrow column. */
#pacotes .sha256 {
    display: inline-block;
    width: 33ch;
    white-space: normal;
}

/* ---- Download: install columns and requirements ---- */
.install h3 {
    font-size: 20px;
}

.install ol,
.install ul {
    margin: 0;
    padding-left: 22px;
}

.install li + li {
    margin-top: 10px;
}

.install li::marker {
    font-family: var(--f-display);
    font-weight: 700;
    color: var(--accent);
}

.install code {
    padding: 1px 6px;
    overflow-wrap: anywhere;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Requirements: each install command on its own line under the distribution's name. */
.cmds code {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 6px;
    padding: 6px 10px;
    line-height: 1.5;
}

/* ---- Auth card: the in-game login window (dark plate, gold hairline, title bar) ---- */
.auth-card {
    max-width: 480px;
    margin-inline: auto;
    padding: 0;
    /* Native controls (select arrow, autofill, scrollbars) drawn for a dark surface. */
    color-scheme: dark;
    box-shadow: 0 24px 48px -24px rgba(14, 18, 23, 0.6);
}

.auth-title {
    margin: 0;
    padding: 12px 24px;
    font: 700 14px/1.2 var(--f-display);
    letter-spacing: 0.24em;
    color: var(--gold);
    background: linear-gradient(180deg, rgba(233, 196, 106, 0.14), rgba(233, 196, 106, 0.04));
    border-bottom: 1px solid var(--hair-gold);
}

.auth-body {
    padding: 24px;
}

.auth-body > :first-child,
.auth-body form > label:first-of-type {
    margin-top: 0;
}

.auth-body form {
    margin: 0;
}

.auth-card .btn {
    width: 100%;
    margin-top: 24px;
}

.auth-note {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--lead);
}

.auth-foot {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--lead);
}

/* Room for the Turnstile widget (65 px high), so the button does not jump when it loads. */
.cf-turnstile {
    min-height: 65px;
    margin-top: 20px;
}

/* ---- Minha conta ---- */
.acct-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ---- Erro ---- */
.err-card {
    max-width: 640px;
}

#erro-mensagem {
    margin: 0 0 24px;
    font-size: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 699px) {
    .dl-card {
        padding: 20px;
    }

    .dl-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 479px) {
    .acct-actions .btn {
        flex: 1 1 100%;
    }

    .err-card .btn {
        width: 100%;
    }

    .auth-title {
        padding-inline: 16px;
    }

    /* 16 px padding leaves the 300 px Turnstile widget room at 360 px. */
    .auth-body {
        padding: 20px 16px;
    }

    .dl-platform {
        gap: 16px;
        padding: 16px;
    }
}