:root {
    --femj-green: #00953b;
    --mcr-green: #276800;
    --riichi-red: #b40000;
    --modality-accent: #444;
    --modality-surface: #f5f5f5;
    --footer-yellow: #ffca05;
    --page-text: #050505;
}

html {
    min-width: 320px;
}

/* Estilo común de enlaces de texto. Botones, pestañas y rankings pueden
   definir su propia apariencia mediante selectores específicos. */
a {
    color: #444;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--mcr-green);
}

a:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
}

body {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: var(--page-text);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

.landing-main {
    min-height: 0;
    display: flex;
    flex: 1 1 auto;
}

.landing-container {
    width: 75%;
    height: 100%;
    max-width: 1065px;
    min-height: 0;
    padding: min(12px, 1.5dvh) 15px min(21px, 2.5dvh);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.femj-logo {
    display: block;
    width: auto;
    max-width: min(66vw, 293px);
    max-height: 31dvh;
    min-height: 0;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    flex: 0 1 auto;
}

.ranking-access {
    width: 100%;
    margin-top: min(13.5px, 2dvh);
    flex: 0 0 auto;
}

.ranking-access h1 {
    max-width: 255px;
    margin: 0 auto;
    font-size: clamp(1.3125rem, min(6vw, 5dvh), 1.6875rem);
    font-weight: 800;
    line-height: 1.16;
    text-transform: uppercase;
}

.title-rule {
    width: 100%;
    height: 9px;
    margin: min(21px, 2.5dvh) auto min(26.25px, 3dvh);
    border-radius: 999px;
    background: var(--femj-green);
}

.ranking-row {
    gap: min(13.5px, 2dvh);
}

.ranking-column {
    width: 100%;
}

.ranking-button {
    min-height: clamp(44px, 5.8dvh, 49.5px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 15px;
    color: #fff;
    font-size: clamp(2.0625rem, min(10.5vw, 7dvh), 3.375rem);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: filter 160ms ease, transform 160ms ease;
}

.ranking-button:hover {
    color: #fff;
    filter: brightness(1.12);
}

.ranking-button:active {
    transform: translateY(1px);
}

.ranking-button:focus-visible,
.landing-secondary a:focus-visible,
.secondary-link:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 3px;
}

.ranking-button--mcr {
    background: var(--mcr-green);
}

.ranking-button--riichi {
    background: var(--riichi-red);
}

.landing-secondary {
    margin-top: min(28.5px, 3dvh);
}

.landing-secondary-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.landing-secondary-list li {
    max-width: 100%;
}

.landing-secondary a,
.secondary-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.35;
}

@media (min-width: 576px) {
    .landing-secondary-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 16px;
    }
}

.site-footer {
    flex: 0 0 auto;
    padding: min(16.5px, 1.8dvh) 18px;
    color: var(--page-text);
    text-align: center;
    background: var(--footer-yellow);
    font-size: clamp(0.8625rem, min(3.9vw, 2.4dvh), 1.0875rem);
    line-height: 1.35;
}

.site-version {
    margin-left: 0.35em;
    white-space: nowrap;
}

/* Tablet: 576 px - 991 px */
@media (min-width: 576px) and (max-width: 991.98px) {
    .landing-container {
        padding: min(16.5px, 2dvh) 25.5px min(39px, 4dvh);
    }

    .femj-logo {
        max-width: min(54vw, 427.5px);
        max-height: 35dvh;
    }

    .ranking-access {
        margin-top: min(28.5px, 3dvh);
    }

    .ranking-access h1 {
        max-width: none;
        font-size: clamp(1.575rem, min(3.75vw, 4.5dvh), 2.0625rem);
    }

    .title-rule {
        height: 8.25px;
        margin: min(16.5px, 2dvh) auto min(28.5px, 3dvh);
    }

    .ranking-row {
        gap: min(21px, 2.5dvh);
    }

    .ranking-column {
        width: calc(50% - 10.5px);
    }

    .ranking-button {
        min-height: clamp(44px, 6.5dvh, 64.5px);
        font-size: clamp(1.5rem, min(4.5vw, 5dvh), 2.4375rem);
    }


    .site-footer {
        padding: min(18px, 2dvh);
        font-size: 0.9375rem;
    }
}

/* Desktop: 992 px and above */
@media (min-width: 992px) {
    .landing-container {
        padding: min(18px, 2dvh) 18px min(54px, 5dvh);
    }

    .femj-logo {
        max-width: min(33.75vw, 487.5px);
        max-height: 37dvh;
    }

    .ranking-access {
        margin-top: min(66px, 6dvh);
    }

    .ranking-access h1 {
        max-width: none;
        font-size: clamp(1.725rem, min(2.025vw, 4dvh), 2.4375rem);
        line-height: 1.1;
    }

    .title-rule {
        height: 9px;
        margin: min(12px, 1.5dvh) auto min(34.5px, 3.5dvh);
    }

    .ranking-row {
        gap: min(60px, 6vw);
    }

    .ranking-column {
        width: calc(50% - 30px);
    }

    .ranking-button {
        min-height: clamp(44px, 7dvh, 74.25px);
        font-size: clamp(1.65rem, min(2.025vw, 4dvh), 2.325rem);
    }


    .site-footer {
        padding: min(20.25px, 2dvh) 18px;
        font-size: 1.125rem;
    }
}

/* Móviles en horizontal y ventanas especialmente bajas */
@media (orientation: landscape) and (max-height: 600px) {
    .femj-logo {
        max-height: 25dvh;
    }

    .ranking-row {
        flex-wrap: nowrap;
        gap: min(13.5px, 2vw);
    }

    .ranking-column {
        width: calc(50% - min(6.75px, 1vw));
    }

}

@media (prefers-reduced-motion: reduce) {
    .ranking-button {
        transition: none;
    }
}
.ranking-grade abbr[title],
.player-rating-number abbr[title] {
    text-decoration: none;
}

[data-modality="mcr"] { --modality-accent: var(--mcr-green); --modality-surface: #eff5eb; }
[data-modality="riichi"] { --modality-accent: var(--riichi-red); --modality-surface: #fff0ee; }