@media (max-width: 640px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    .shell,
    .wrap,
    .container,
    main,
    .main,
    .content,
    .page,
    .ranking-wrap {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .shell,
    .wrap,
    .container {
        padding-top: 12px !important;
        padding-bottom: 24px !important;
    }

    section,
    .section,
    .hero,
    .ranking,
    .info,
    .botoes,
    .premiacao-box {
        margin-top: 12px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .topbar,
    .top,
    .nav,
    .menu,
    .actions,
    .botoes,
    .section-head,
    .brand {
        gap: 8px !important;
    }

    .topbar,
    .top,
    .section-head {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .nav,
    .menu,
    .actions,
    .botoes {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .menu,
    .nav-links {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    .menu a,
    .nav-links a {
        align-items: center !important;
        display: inline-flex !important;
        justify-content: center !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .nav a,
    .menu a,
    .actions a,
    .actions button,
    .btn,
    button,
    input[type="submit"] {
        min-height: 38px !important;
        padding: 10px 12px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    h1 {
        font-size: clamp(30px, 14vw, 48px) !important;
        line-height: .95 !important;
        margin-bottom: 8px !important;
    }

    h2,
    .section-head h2 {
        font-size: clamp(24px, 10vw, 36px) !important;
        line-height: 1 !important;
    }

    h3 {
        font-size: 16px !important;
        line-height: 1.1 !important;
    }

    p,
    .lead,
    .desc,
    .sub {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .card,
    .panel,
    .event-panel,
    .info-panel,
    .admin-card,
    .form,
    .stat,
    .fact,
    .quick-link,
    .sponsor,
    .champion,
    .rank-card,
    .podio-card,
    .table-card {
        border-radius: 14px !important;
        padding: 12px !important;
    }

    .grid,
    .layout,
    .hall-layout,
    .grid-input {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .quick-grid,
    .sponsor-grid,
    .members,
    .stats,
    .facts,
    .info:not(.info-panel),
    .meta-grid,
    .steps,
    .dash-container,
    .fish-grid,
    .podium-wrapper,
    .lista-mini,
    .bets,
    .pesagens-grid,
    .torneio-cards {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .quick-link,
    .sponsor,
    .stat,
    .fact,
    .meta,
    .step,
    .dash-card,
    .fish-chip,
    .item-p,
    .bet,
    .pesagens-grid .card,
    .torneio-cards .item,
    .info .card,
    .member-card {
        min-height: 0 !important;
        padding: 9px !important;
    }

    .item-p,
    .bet,
    .torneio-cards .item {
        align-items: flex-start !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        margin-bottom: 0 !important;
    }

    .item-p > div,
    .bet > div {
        min-width: 0 !important;
        width: 100% !important;
    }

    .item-p img {
        height: 26px !important;
        width: 26px !important;
    }

    .quick-link strong,
    .card strong,
    .stat strong,
    .fact strong,
    .meta strong,
    .step span,
    .dash-card .value,
    .value-mid,
    .fish-chip strong,
    .member-body strong {
        font-size: clamp(12px, 3.5vw, 16px) !important;
        line-height: 1.05 !important;
    }

    .quick-link span,
    .card p,
    .stat span,
    .fact span,
    .meta small,
    .step b,
    .dash-card small,
    .fish-pos,
    .fish-chip small,
    .fish-chip em,
    .item-p span,
    .bet small,
    .torneio-cards .small,
    .travado,
    .member-body span {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .pesagens-grid .peso,
    .bet strong,
    .torneio-cards .item strong {
        font-size: 12px !important;
        line-height: 1.1 !important;
        overflow-wrap: anywhere !important;
    }

    .pesagens-grid .acoes,
    .torneio-cards .acoes {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .quick-menu {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .rank-list .list-row,
    .podium-wrapper {
        gap: 8px !important;
    }

    .official-live-layout,
    .official-main,
    .official-side,
    .ranking-hero,
    .rank-list,
    .podium-wrapper {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .podium-wrapper {
        align-items: stretch !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .podium-wrapper .podium-item {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        min-width: 0 !important;
        padding: 9px 6px 0 !important;
        text-align: center !important;
    }

    .podium-wrapper .podium-item.gold,
    .podium-wrapper .gold {
        order: 0 !important;
        transform: translateY(-9px) !important;
    }

    .podium-wrapper .podium-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }

    .podium-wrapper .p-name,
    .podium-wrapper .fish-toggle {
        font-size: 10px !important;
        justify-content: center !important;
        min-height: 32px !important;
        overflow-wrap: anywhere !important;
        padding: 6px 5px !important;
        text-align: center !important;
        white-space: normal !important;
        width: 100% !important;
    }

    .podium-wrapper .p-weight,
    .podium-wrapper .gold .p-weight {
        font-size: clamp(20px, 6.3vw, 28px) !important;
        line-height: 1 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .podium-wrapper .p-weight span {
        font-size: 9px !important;
    }

    .podium-wrapper .p-count {
        font-size: 9px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .podium-wrapper .winner-title,
    .podium-wrapper .crown-icon,
    .podium-wrapper .podium-base {
        display: none !important;
    }

    .podium-wrapper.has-open-fish {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .podium-wrapper.has-open-fish .podium-item,
    .podium-wrapper.has-open-fish .podium-item.gold,
    .podium-wrapper.has-open-fish .gold {
        transform: none !important;
    }

    .podium-wrapper.has-open-fish .podium-info {
        min-height: 0 !important;
    }

    .podium-wrapper.has-open-fish .fish-panel.is-open {
        margin-top: 10px !important;
        padding: 12px !important;
    }

    body.layout-clean .dash-container {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        margin-top: 16px !important;
    }

    body.layout-clean .dash-card .value,
    body.layout-clean .value-mid {
        font-size: clamp(18px, 5vw, 24px) !important;
    }

    body.layout-clean .dash-card small {
        font-size: 9px !important;
        letter-spacing: 0.4px !important;
    }

    body.layout-clean .official-live-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
    }

    body.layout-clean .rank-list {
        margin-top: 24px !important;
    }

    body.layout-clean .ranking-hero,
    body.layout-clean .rank-list,
    body.layout-clean .podium-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.layout-clean .hero-card {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    body.layout-clean .hero-title h1 {
        font-size: clamp(28px, 11vw, 44px) !important;
    }

    body.layout-clean .timer-card {
        min-height: 100px !important;
        padding: 12px !important;
    }

    body.layout-clean .timer-value {
        font-size: clamp(34px, 12vw, 52px) !important;
    }

    body.layout-clean .list-row {
        grid-template-columns: 54px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body.layout-clean .list-data {
        align-items: center !important;
        background: rgba(2, 6, 23, 0.22) !important;
        border: 1px solid rgba(125, 211, 252, 0.12) !important;
        flex-direction: row !important;
        grid-column: 1 / -1 !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;
        text-align: left !important;
    }

    body.layout-clean .official-side {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ranking mobile claro com contraste forte. */
    body.layout-clean .dash-card,
    body.layout-clean .dash-card .card-inner {
        color: #132238 !important;
    }

    body.layout-clean .dash-card small {
        color: #40566b !important;
        font-weight: 900 !important;
        opacity: 1 !important;
    }

    body.layout-clean .dash-card .value,
    body.layout-clean .value-mid {
        color: #0b5f87 !important;
        text-shadow: none !important;
    }

    body.layout-clean .dash-card .value span,
    body.layout-clean .value-mid span {
        color: #34495e !important;
    }

    body.layout-clean .sub-label-tag,
    body.layout-clean .sub-label-tag.gray {
        background: #dce8ef !important;
        color: #17283a !important;
        border: 1px solid #bfd0dc !important;
        opacity: 1 !important;
    }

    body.layout-clean .badge-total {
        background: #0877a8 !important;
        color: #ffffff !important;
    }

    body.layout-clean .mobile-standings-title {
        background: #082b4a !important;
        color: #ffffff !important;
    }

    body.layout-clean .mobile-standings-title strong {
        color: #ffffff !important;
    }

    body.layout-clean .mobile-standings-title span {
        color: #d4e5f2 !important;
    }

    body.layout-clean .mobile-standings-head {
        background: #dcebf5 !important;
        color: #29485e !important;
    }

    body.layout-clean .mobile-standing-row {
        background: #ffffff !important;
        color: #111827 !important;
    }

    body.layout-clean .mobile-standing-row.is-leader {
        background: #fffdf5 !important;
    }

    body.layout-clean .mobile-name,
    body.layout-clean .mobile-name .rank-name-main {
        color: #101827 !important;
        opacity: 1 !important;
    }

    body.layout-clean .mobile-name .rank-nickname {
        color: #075f8a !important;
        opacity: 1 !important;
    }

    body.layout-clean .mobile-qty {
        color: #344f63 !important;
    }

    body.layout-clean .mobile-total {
        color: #006d98 !important;
    }

    body.layout-clean .mobile-total small {
        color: #40576a !important;
    }

    body.layout-clean .mobile-diff {
        color: #9f2630 !important;
    }

    body.layout-clean .mobile-standing-row.is-leader .mobile-diff {
        color: #8a6800 !important;
    }

    body.layout-clean .mobile-standing-row .fish-panel {
        background: #eaf4f9 !important;
        border: 1px solid #abc8d8 !important;
    }

    body.layout-clean .mobile-standing-row .fish-title {
        color: #075f7d !important;
        opacity: 1 !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip {
        background: #ffffff !important;
        border: 1px solid #a9bfcc !important;
        box-shadow: 0 2px 5px rgba(32, 58, 76, 0.08) !important;
    }

    body.layout-clean .mobile-standing-row .fish-pos {
        color: #14708e !important;
        opacity: 1 !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip strong {
        color: #111827 !important;
        text-shadow: none !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip strong small,
    body.layout-clean .mobile-standing-row .fish-chip em {
        color: #536575 !important;
        opacity: 1 !important;
    }

    body.layout-clean .mobile-standing-row .fish-species-mini small {
        display: none !important;
    }

    body.layout-clean {
        background: #dceaf3 !important;
        background-image: linear-gradient(180deg, #d6e6f1 0%, #edf4f8 52%, #dceaf3 100%) !important;
    }

    body.layout-clean .dash-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.layout-clean .dash-container .dash-card:nth-child(1) { order: 1; }
    body.layout-clean .dash-container .dash-card:nth-child(3) { order: 2; }
    body.layout-clean .dash-container .dash-card:nth-child(4) { order: 3; }
    body.layout-clean .dash-container .dash-card:nth-child(5) { order: 4; }

    body.layout-clean .dash-container .dedao-card {
        display: block !important;
        grid-column: 1 / -1 !important;
        min-height: 0 !important;
        order: 5;
    }

    body.layout-clean .dedao-card .card-inner {
        align-items: center !important;
        display: grid !important;
        gap: 8px !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        padding: 10px 12px !important;
        text-align: left !important;
    }

    body.layout-clean .dedao-card .dedao-scroll {
        color: #8d2630 !important;
        margin: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.layout-clean .mobile-standing-row.is-first {
        background: #fff9df !important;
        border-left: 5px solid #e6b91f !important;
    }

    body.layout-clean .mobile-standing-row.is-second {
        background: #f2f6f9 !important;
        border-left: 5px solid #8ca5b5 !important;
    }

    body.layout-clean .mobile-standing-row.is-third {
        background: #fff2e8 !important;
        border-left: 5px solid #bd7445 !important;
    }

    body.layout-clean .mobile-standing-row.is-first .mobile-position {
        background: #e4b51b !important;
        font-size: 0 !important;
    }

    body.layout-clean .mobile-standing-row.is-second .mobile-position {
        background: #879dac !important;
        font-size: 0 !important;
    }

    body.layout-clean .mobile-standing-row.is-third .mobile-position {
        background: #b96d3d !important;
        font-size: 0 !important;
    }

    body.layout-clean .mobile-standing-row.is-first .mobile-position::before {
        content: "🥇";
        font-size: 18px;
    }

    body.layout-clean .mobile-standing-row.is-second .mobile-position::before {
        content: "🥈";
        font-size: 18px;
    }

    body.layout-clean .mobile-standing-row.is-third .mobile-position::before {
        content: "🥉";
        font-size: 18px;
    }

    body.layout-clean .mobile-standing-row .fish-panel {
        padding: 8px !important;
    }

    body.layout-clean .mobile-standing-row .fish-title {
        font-size: 9px !important;
        margin-bottom: 7px !important;
    }

    body.layout-clean .mobile-standing-row .fish-grid {
        gap: 6px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip {
        align-items: center !important;
        display: grid !important;
        gap: 1px 3px !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        min-width: 0 !important;
        padding: 6px 5px !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip strong {
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip em {
        font-size: 8px !important;
    }

    body.layout-clean .mobile-standing-row .fish-species-mini {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        margin-top: 2px !important;
    }

    body.layout-clean .mobile-standing-row .fish-species-mini img {
        height: 22px !important;
        object-fit: contain !important;
        width: 46px !important;
    }

    /* Ranking compacto para facilitar capturas de tela no celular. */
    body.layout-clean .ranking-hero {
        margin-top: 6px !important;
        padding: 0 6px !important;
    }

    body.layout-clean .hero-card {
        gap: 7px !important;
        padding: 10px !important;
    }

    body.layout-clean .hero-title h1 {
        font-size: clamp(23px, 8vw, 34px) !important;
    }

    body.layout-clean .hero-title small {
        font-size: 9px !important;
        margin-bottom: 5px !important;
    }

    body.layout-clean .hero-meta {
        gap: 5px !important;
        margin-top: 8px !important;
    }

    body.layout-clean .meta-pill {
        font-size: 8px !important;
        padding: 5px 6px !important;
    }

    body.layout-clean .timer-card {
        min-height: 76px !important;
        padding: 9px !important;
    }

    body.layout-clean .timer-label,
    body.layout-clean .timer-help {
        font-size: 9px !important;
    }

    body.layout-clean .timer-value {
        font-size: clamp(28px, 9vw, 40px) !important;
    }

    body.layout-clean .hall-of-fame-banner,
    body.layout-clean .live-banner {
        margin: 9px 6px !important;
        padding: 12px !important;
    }

    body.layout-clean .hall-of-fame-banner h2,
    body.layout-clean .live-banner h2 {
        font-size: 17px !important;
        margin: 4px 0 !important;
    }

    body.layout-clean .dash-container {
        gap: 7px !important;
        margin-top: 8px !important;
    }

    body.layout-clean .dash-card {
        min-height: 92px !important;
    }

    body.layout-clean .dash-card .card-inner {
        padding: 8px 6px !important;
    }

    body.layout-clean .dash-card small {
        font-size: 8px !important;
        line-height: 1.15 !important;
    }

    body.layout-clean .dash-card .value,
    body.layout-clean .value-mid {
        font-size: clamp(20px, 6vw, 27px) !important;
    }

    body.layout-clean .sub-label-tag,
    body.layout-clean .badge-total {
        font-size: 8px !important;
        margin-top: 3px !important;
        padding: 3px 7px !important;
    }

    body.layout-clean .dash-container .dedao-card {
        min-height: 42px !important;
    }

    body.layout-clean .dedao-card .card-inner {
        padding: 7px 9px !important;
    }

    body.layout-clean .dedao-card .dedao-scroll {
        font-size: 9px !important;
    }

    body.layout-clean .mobile-standings {
        border-radius: 11px !important;
        margin-top: 8px !important;
    }

    body.layout-clean .mobile-standings-title {
        padding: 10px 9px !important;
    }

    body.layout-clean .mobile-standings-title strong {
        font-size: 13px !important;
    }

    body.layout-clean .mobile-standings-title span {
        font-size: 8px !important;
    }

    body.layout-clean .mobile-standings-head {
        font-size: 8px !important;
        grid-template-columns: 25px minmax(0, 1fr) 27px 68px 47px !important;
        padding: 7px 8px !important;
    }

    body.layout-clean .mobile-standing-row {
        gap: 5px !important;
        grid-template-columns: 25px minmax(0, 1fr) 27px 68px 47px !important;
        min-height: 50px !important;
        padding: 6px 8px !important;
    }

    body.layout-clean .mobile-position {
        height: 25px !important;
        width: 25px !important;
    }

    body.layout-clean .mobile-standing-row.is-first .mobile-position::before,
    body.layout-clean .mobile-standing-row.is-second .mobile-position::before,
    body.layout-clean .mobile-standing-row.is-third .mobile-position::before {
        font-size: 15px !important;
    }

    body.layout-clean .mobile-name {
        font-size: 10px !important;
    }

    body.layout-clean .mobile-name .rank-nickname,
    body.layout-clean .mobile-diff {
        font-size: 7px !important;
    }

    body.layout-clean .mobile-qty {
        font-size: 10px !important;
    }

    body.layout-clean .mobile-total {
        font-size: 17px !important;
    }

    body.layout-clean .mobile-total small {
        font-size: 7px !important;
    }

    body.layout-clean .mobile-standing-row .fish-panel {
        padding: 6px !important;
    }

    body.layout-clean .mobile-standing-row .fish-grid {
        gap: 4px !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip {
        padding: 4px 3px !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip strong {
        font-size: 13px !important;
    }

    body.layout-clean .mobile-standing-row .fish-chip em,
    body.layout-clean .mobile-standing-row .fish-pos {
        font-size: 7px !important;
    }

    body.layout-clean .mobile-standing-row .fish-species-mini img {
        height: 18px !important;
        width: 38px !important;
    }

    .list-row {
        padding: 10px !important;
    }

    .hero {
        min-height: 0 !important;
    }

    .hero-content,
    .hero-body,
    .body {
        gap: 10px !important;
        padding: 14px !important;
    }

    .hero-img,
    .media {
        min-height: 180px !important;
    }

    img,
    video,
    iframe {
        max-width: 100% !important;
    }

    table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    th,
    td {
        padding: 8px !important;
        font-size: 12px !important;
    }

    input,
    select,
    textarea {
        min-height: 38px !important;
        padding: 10px 11px !important;
        font-size: 14px !important;
    }

    .podio,
    .podium,
    .podio-container,
    .podio-group {
        gap: 10px !important;
        margin-top: 18px !important;
        padding: 10px !important;
    }

    .sponsor img {
        height: 92px !important;
    }

    .gallery {
        gap: 7px !important;
    }

    .gallery img {
        height: 110px !important;
    }

    .footer {
        padding: 18px 0 24px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 420px) {
    .nav a,
    .menu a,
    .actions a,
    .actions button,
    .btn,
    button,
    input[type="submit"] {
        flex: 1 1 auto !important;
        text-align: center !important;
    }

    .champion {
        grid-template-columns: 52px minmax(0, 1fr) !important;
    }

    .champion img,
    .avatar-fallback {
        height: 52px !important;
        width: 52px !important;
    }

    .quick-grid,
    .sponsor-grid,
    .members,
    .stats,
    .facts,
    .info:not(.info-panel),
    .meta-grid,
    .steps,
    .dash-container,
    .fish-grid,
    .podium-wrapper,
    .lista-mini,
    .bets,
    .pesagens-grid,
    .torneio-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
}