:root {
    --ink: #17221b;
    --muted: #69766e;
    --primary: #087443;
    --primary-dark: #045932;
    --primary-soft: #e4f4eb;
    --surface: rgba(255, 255, 255, .96);
    --line: #dfe7e1;
    --cream: #f5f2e8;
    --gold: #d3b451;
}

* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background: var(--cream) url("../img/bg.jpg") center / 620px auto fixed;
    font-family: Arial, Helvetica, sans-serif;
}

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; }
.login-card, .panel, .game-card, .empty-state {
    border: 1px solid rgba(8, 116, 67, .13);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 18px 50px rgba(23, 34, 27, .09);
}
.login-card { width: min(100%, 430px); padding: 38px; }
.brand-mark {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 999px;
    color: #fff;
    background: var(--primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
}

.logo-login {width: 100%; height: auto; display: flex; justify-content: center; align-items: center;}
.logo-login img{width: 350px;}

h1 { max-width: 760px; margin: 7px 0 10px; font-size: clamp(30px, 5vw, 48px); font-weight: 800; letter-spacing: -1.5px; }
h2 { margin-bottom: 20px; font-size: 20px; font-weight: 800; }
.eyebrow { margin: 18px 0 0; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.form-control { min-height: 44px; border-color: var(--line); border-radius: 10px; }
.form-control:focus, .team input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 116, 67, .13); outline: 0; }
.btn { min-height: 44px; border-radius: 10px; }
.btn-primary { border-color: var(--primary); background: var(--primary); font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { border-color: var(--primary-dark); background: var(--primary-dark); }

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 70px;
    padding: 0 max(20px, calc((100vw - 1080px) / 2));
    color: #fff;
    background: rgba(6, 63, 41, .98);
    box-shadow: 0 8px 22px rgba(6, 63, 41, .14);
}
.app-brand { display: flex; align-items: center; color: #fff; text-decoration: none; letter-spacing: 2px; }
.app-brand span { margin-left: 5px; color: var(--gold); font-size: 12px; }
nav { display: flex; align-self: stretch; gap: 6px; }
nav a { display: flex; align-items: center; padding: 0 14px; color: #b8d2c6; text-decoration: none; font-size: 14px; font-weight: 700; }
nav a:hover, nav a.active { color: #fff; background: rgba(255, 255, 255, .08); }
.user-menu { display: flex; align-items: center; gap: 14px; margin-left: auto; font-size: 14px; }
.user-menu a { display: grid; width: 40px; height: 40px; color: #fff; border-radius: 50%; place-items: center; text-decoration: none; font-size: 19px; }
.user-menu a:hover { background: rgba(255, 255, 255, .1); }

.app-shell { width: min(1080px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0; }
.hero, .page-heading { margin-bottom: 28px; }
.hero { padding: 6px 0 2px; text-align: center; }
.hero h1, .hero p { margin-right: auto; margin-left: auto; }
.hero p:last-child { max-width: 610px; margin-bottom: 0; color: var(--muted); }

.box_canarinho {width: 300px; height: auto; position: absolute; z-index: 10; margin-left: 390px; margin-top: -150px;}
.box_canarinho_palpites {width: 300px; height: auto; position: absolute; margin-left: 400px; margin-top: -110px;}

.games-grid {
    display: grid;
    width: 100%;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    grid-template-columns: 1fr;
    gap: 18px;
    z-index: 1;
}
.game-card {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,248,.96));
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.game-card-closed::before { background: #9ba7a1; }
.game-card:hover { border-color: rgba(8, 116, 67, .28); box-shadow: 0 20px 44px rgba(23, 34, 27, .13); transform: translateY(-2px); }
.game-meta { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 9px 12px; padding-left: 5px; color: var(--muted); font-size: 12px; }
.game-meta span { display: flex; align-items: center; gap: 6px; }
.game-place { justify-content: flex-end; text-align: right; }
.game-status { display: flex; width: fit-content; align-items: center; justify-content: center; gap: 6px; margin: 14px auto 0; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.game-status-open { color: var(--primary-dark); background: var(--primary-soft); }
.game-status-closed { color: #66716c; background: #edf0ee; }
.matchup { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; gap: 12px; min-height: 130px; padding: 18px 7%; font-size: 19px; text-align: center; }
.matchup-closed { grid-template-columns: 1fr auto 52px auto 1fr; }
.matchup-open { padding-bottom: 16px; }
.match-separator { display: grid; width: 42px; height: 42px; border-radius: 50%; color: #96a39d; background: #f0f5f2; place-items: center; font-size: 28px; font-weight: 300; }
.team { display: grid; justify-items: center; gap: 10px; }
.team strong { min-height: 22px; }
.team-name-score { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 28px; }
.team-name-score strong { min-height: 0; }
.closed-score { display: grid; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 8px 18px rgba(23, 34, 27, .1); place-items: center; font-size: 24px; font-weight: 900; }
.team-flag { width: 64px; height: 42px; border: 1px solid rgba(23, 34, 27, .14); border-radius: 8px; object-fit: cover; box-shadow: 0 7px 14px rgba(23, 34, 27, .12); }
.team input { width: 76px; height: 54px; border: 2px solid rgba(8, 116, 67, .18); border-radius: 16px; color: var(--ink); background: #fff; font-size: 24px; font-weight: 900; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 18px rgba(23, 34, 27, .06); }
.guess-form { display: flex; align-items: center; justify-content: flex-end; gap: 12px 16px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.82); flex-wrap: wrap; }
.guess-form .btn { padding-right: 18px; padding-left: 18px; box-shadow: 0 10px 18px rgba(8, 116, 67, .18); }
.guess-help { margin-right: auto; color: var(--muted); font-size: 13px; font-weight: 700; }
.guess-feedback { display: none; width: 100%; color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
.guess-feedback:not(:empty) { display: block; }
.guess-feedback-success { color: var(--primary-dark); }
.guess-feedback-error { color: #991b1b; }
.guess-closed { display: flex; align-items: center; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.official-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid rgba(8, 116, 67, .13); border-radius: 16px; background: linear-gradient(135deg, rgba(228, 244, 235, .9), rgba(255,255,255,.88)); }
.official-result span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.official-result strong { color: var(--ink); font-size: 22px; font-weight: 900; }
.official-result em { padding: 6px 10px; border-radius: 999px; color: var(--muted); background: #fff; font-size: 12px; font-style: normal; font-weight: 800; box-shadow: 0 8px 18px rgba(23, 34, 27, .08); }
.official-result-hit { color: var(--primary-dark) !important; background: var(--primary-soft) !important; }
.official-result-miss { color: #991b1b !important; background: #fee2e2 !important; }

.admin-layout { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: 18px; align-items: start; }
.panel { padding: 24px; }
.table { margin-bottom: 0; --bs-table-bg: transparent; }
.token-link { min-width: 300px; font-family: Consolas, Monaco, monospace; font-size: 12px; }
.empty-state { padding: 42px; color: var(--muted); text-align: center; }
.users-admin-layout { grid-template-columns: minmax(280px, 340px) 1fr; }
.users-list { min-width: 0; }
.user-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.user-admin-card { display: grid; gap: 15px; padding: 18px; border: 1px solid rgba(8, 116, 67, .13); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 34px rgba(23, 34, 27, .07); }
.user-admin-header { display: flex; align-items: center; gap: 13px; }
.user-admin-header h3 { margin: 0; overflow: hidden; font-size: 18px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.user-admin-header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.user-admin-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.user-admin-badges span { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.token-box { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.token-box .token-link { width: 100%; min-width: 0; }
.user-flags-form { display: grid; gap: 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.switch-row span { display: grid; gap: 2px; }
.switch-row strong { color: var(--ink); font-size: 14px; }
.switch-row small { color: var(--muted); font-size: 12px; }
.switch-row input[type="checkbox"] { width: 44px; height: 24px; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; }
.switch-row input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .55; }
.user-self-note { margin: 0; padding: 10px 12px; border-radius: 12px; color: #6e5200; background: rgba(211, 180, 81, .18); font-size: 12px; font-weight: 700; }
.game-admin-create { margin-bottom: 28px; }
.admin-section-title, .admin-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-section-title .eyebrow, .admin-list-heading .eyebrow { margin-top: 0; }
.admin-section-title h2, .admin-list-heading h2 { margin-bottom: 0; }
.admin-section-title i { color: var(--primary); font-size: 32px; }
.game-admin-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 14px; }
.game-admin-form label, .admin-game-edit label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-games-section { margin-top: 20px; }
.admin-games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 18px; }
.admin-game-card { border: 1px solid rgba(8, 116, 67, .13); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 34px rgba(23, 34, 27, .07); overflow: hidden; }
.admin-game-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(228, 244, 235, .9), rgba(255,255,255,.85)); }
.admin-game-date { color: var(--muted); font-size: 13px; font-weight: 700; }
.admin-game-status { padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.status-agendado { color: var(--primary-dark); background: var(--primary-soft); }
.status-finalizado { color: #604600; background: rgba(211, 180, 81, .24); }
.status-cancelado { color: #7f1d1d; background: #fee2e2; }
.admin-game-edit { display: grid; gap: 14px; padding: 18px; }
.admin-game-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; }
.admin-game-match strong { padding-bottom: 10px; color: var(--muted); font-size: 22px; font-weight: 400; }
.admin-game-fields { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 12px; }
.admin-game-actions { display: flex; justify-content: flex-end; }
.admin-game-delete { display: flex; justify-content: flex-end; padding: 0 18px 18px; }
.btn-outline-danger { border-color: #fecaca; color: #991b1b; background: #fff; font-weight: 700; }
.btn-outline-danger:hover, .btn-outline-danger:focus { border-color: #dc2626; color: #fff; background: #dc2626; }
.results-list { display: grid; gap: 16px; }
.result-card { display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; padding: 20px; border: 1px solid rgba(8, 116, 67, .13); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 34px rgba(23, 34, 27, .07); }
.result-summary { display: flex; align-items: center; gap: 16px; }
.result-summary h2 { margin: 5px 0 3px; font-size: 18px; }
.result-summary h2 span, .result-date, .result-summary small { color: var(--muted); }
.result-points { margin-left: auto; padding: 6px 9px; border-radius: 999px; color: var(--primary-dark); background: var(--primary-soft); font-size: 12px; font-weight: 700; }
.result-form { display: flex; align-items: end; gap: 10px; }
.result-form label { display: grid; justify-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.result-form input { width: 58px; height: 44px; border: 2px solid var(--line); border-radius: 10px; font-size: 18px; font-weight: 800; text-align: center; }
.result-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 116, 67, .13); outline: 0; }
.result-separator { padding-bottom: 10px; color: var(--muted); font-size: 22px; }
.reset-result-form { grid-column: 2; display: flex; justify-content: flex-end; }
.ranking-heading { text-align: center; }
.ranking-heading h1, .ranking-heading p { margin-right: auto; margin-left: auto; }
.ranking-heading img { display: block; width: min(200px, 52vw); height: auto; margin: 10px auto 4px; filter: drop-shadow(0 14px 22px rgba(125, 96, 0, .18)); }
.ranking-board { display: grid; width: min(100%, 760px); margin: 0 auto; gap: 14px; }
.rank-card { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid rgba(8, 116, 67, .12); border-radius: 18px; background: var(--surface); box-shadow: 0 12px 32px rgba(23, 34, 27, .07); }
.rank-card-podium { border-color: rgba(211, 180, 81, .38); background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,250,232,.96)); }
.rank-card-leader { position: relative; overflow: hidden; border-color: rgba(211, 180, 81, .65); background: radial-gradient(circle at top left, rgba(211, 180, 81, .35), transparent 34%), linear-gradient(135deg, #fffdf2, #ffffff 54%, #edf8f2); box-shadow: 0 22px 54px rgba(125, 96, 0, .18); }
.rank-card-leader::after { position: absolute; top: 14px; right: -34px; width: 130px; padding: 5px 0; color: #fff; background: linear-gradient(135deg, #b48a13, var(--gold)); content: "LIDER"; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-align: center; transform: rotate(35deg); }
.rank-position { display: grid; width: 48px; height: 48px; border-radius: 16px; color: var(--primary-dark); background: var(--primary-soft); place-items: center; font-size: 18px; font-weight: 900; }
.rank-card-podium .rank-position { color: #6e5200; background: rgba(211, 180, 81, .28); }
.rank-card-leader .rank-position { color: #fff; background: linear-gradient(135deg, #b48a13, var(--gold)); box-shadow: 0 8px 18px rgba(180, 138, 19, .3); }
.rank-card-leader .rank-score { color: #6e5200; background: rgba(211, 180, 81, .22); }
.rank-user { display: flex; align-items: center; min-width: 0; gap: 13px; }
.rank-avatar { display: grid; flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); place-items: center; font-weight: 900; }
.rank-user h2 { margin: 0; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.rank-stats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.rank-stats span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 999px; color: var(--muted); background: #f1f5f2; font-size: 12px; font-weight: 700; }
.rank-stats strong { color: var(--primary-dark); }
.rank-score { min-width: 98px; padding: 10px 14px; border-radius: 15px; color: var(--primary-dark); background: var(--primary-soft); text-align: center; }
.rank-score strong { display: block; font-size: 28px; line-height: 1; }
.rank-score span { font-size: 12px; font-weight: 700; text-transform: uppercase; }
.bets-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 18px; align-items: start; }
.bets-games-list { display: grid; gap: 12px; }
.bets-game-card { display: grid; gap: 5px; padding: 15px; border: 1px solid rgba(8, 116, 67, .13); border-radius: 16px; color: var(--ink); background: var(--surface); box-shadow: 0 10px 24px rgba(23, 34, 27, .06); text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.bets-game-card:hover, .bets-game-card.active { border-color: rgba(8, 116, 67, .36); color: var(--ink); transform: translateY(-1px); box-shadow: 0 16px 32px rgba(23, 34, 27, .1); }
.bets-game-card.active { background: linear-gradient(135deg, rgba(228, 244, 235, .95), #fff); }
.bets-game-date, .bets-game-card small { color: var(--muted); font-size: 12px; font-weight: 700; }
.bets-game-card strong { font-size: 15px; }
.bets-game-card strong span, .bets-details-header h2 span { color: var(--muted); font-weight: 400; }
.bets-details { min-height: 280px; }
.bets-details-header { padding: 18px; border: 1px solid rgba(8, 116, 67, .13); border-radius: 18px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,251,248,.96)); box-shadow: 0 12px 34px rgba(23, 34, 27, .07); }
.bets-details-header .eyebrow { margin-top: 0; }
.bets-details-header h2 { margin-bottom: 5px; }
.bets-details-header p:last-child { margin-bottom: 0; color: var(--muted); }
.bets-user-list { display: grid; gap: 12px; margin-top: 14px; }
.bets-user-card { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid rgba(8, 116, 67, .12); border-radius: 16px; background: var(--surface); box-shadow: 0 9px 22px rgba(23, 34, 27, .06); }
.bets-user-card.no-bet { opacity: .72; }
.bets-user-card h3 { margin: 0; font-size: 16px; font-weight: 800; }
.bets-user-card small { color: var(--muted); font-size: 12px; }
.bets-score { min-width: 74px; padding: 8px 12px; border-radius: 14px; color: var(--primary-dark); background: var(--primary-soft); text-align: center; }
.bets-score strong { font-size: 20px; }
.bets-score span { color: var(--muted); font-weight: 900; }
.bets-select-card { color: var(--ink); text-decoration: none; }
.bets-select-card:hover { color: var(--ink); }
.bets-select-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.82); font-size: 13px; font-weight: 800; }
.bets-select-footer strong { color: var(--primary-dark); white-space: nowrap; }
.bets-detail-top { width: min(100%, 500px); margin: 0 auto 14px; }
.back-button { border: 1px solid var(--line); color: var(--ink); background: #fff; font-weight: 800; }
.back-button:hover { border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.bets-selected-game { width: min(100%, 500px); margin: 0 auto 18px; }
.bets-selected-game + .bets-user-list { width: min(100%, 760px); margin-right: auto; margin-left: auto; }

@media (max-width: 760px) {
    body { background-size: 480px auto; }
    .app-header { flex-wrap: wrap; gap: 8px 16px; min-height: auto; padding: 12px 16px 0; }
    .logo-login img{width: 250px;}
    nav { order: 3; width: 100%; height: 44px; overflow-x: auto; }
    nav a { flex: 0 0 auto; padding: 0 11px; font-size: 13px; }
    .user-menu span { display: none; }
    .user-menu a { width: 36px; height: 36px; }
    .app-shell { width: min(100% - 24px, 620px); padding: 28px 0; }
    .hero { margin-bottom: 20px; }
    h1 { font-size: 32px; line-height: 1.05; }
    .hero { text-align: center; }
    .box_canarinho {width: 300px; height: auto; position: absolute; margin-left: 25px; margin-top: -155px;}
    .box_canarinho_palpites {width: 300px; height: auto; position: absolute; margin-left: 25px; margin-top: -80px;}
    .game-card { padding: 15px 14px 14px 17px; border-radius: 18px; }
    .game-card:hover { transform: none; }
    .game-meta { grid-template-columns: 1fr; gap: 7px; font-size: 12px; }
    .game-place { justify-content: flex-start; text-align: left; }
    .game-status { margin-top: 12px; padding: 6px 10px; }
    .matchup { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr); gap: 5px; min-height: 152px; padding: 16px 0; font-size: 15px; }
    .matchup-closed { grid-template-columns: minmax(0, 1fr) auto 30px auto minmax(0, 1fr); }
    .match-separator { width: 30px; height: 30px; font-size: 22px; }
    .team { gap: 8px; }
    .team strong { min-height: 36px; line-height: 18px; }
    .team-name-score { flex-direction: column; gap: 6px; min-height: 38px; }
    .team-name-score strong { min-height: auto; }
    .closed-score { min-width: 34px; height: 34px; padding: 0 8px; font-size: 20px; }
    .team-flag { width: 56px; height: 37px; }
    .team input { width: 68px; height: 50px; border-radius: 14px; font-size: 21px; }
    .guess-form { display: block; padding: 12px; }
    .guess-help { display: block; margin-bottom: 10px; font-size: 12px; }
    .guess-form .btn { width: 100%; }
    .guess-feedback:not(:empty) { display: block; margin-top: 9px; }
    .guess-closed { font-size: 13px; }
    .official-result { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 11px 12px; }
    .official-result strong { justify-self: end; font-size: 20px; }
    .official-result em { grid-column: 1 / -1; text-align: center; }
    .admin-layout { grid-template-columns: 1fr; }
    .panel { padding: 18px; }
    .users-admin-layout { grid-template-columns: 1fr; }
    .user-cards-grid { grid-template-columns: 1fr; }
    .switch-row { align-items: flex-start; }
    .game-admin-form { grid-template-columns: 1fr; }
    .admin-games-grid { grid-template-columns: 1fr; }
    .admin-game-match, .admin-game-fields { grid-template-columns: 1fr; }
    .admin-game-match strong { display: none; }
    .admin-game-actions, .admin-game-delete { display: grid; }
    .admin-game-actions .btn, .admin-game-delete .btn { width: 100%; }
    .result-card { grid-template-columns: 1fr; gap: 14px; padding: 16px; border-radius: 16px; }
    .result-summary { display: block; }
    .result-points { display: inline-block; margin-top: 9px; margin-left: 0; }
    .result-form { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; }
    .result-form .btn { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
    .reset-result-form { grid-column: 1; display: grid; }
    .reset-result-form .btn { width: 100%; }
    .ranking-heading { margin-bottom: 18px; text-align: center; }
    .ranking-heading .eyebrow { margin-top: 0; }
    .ranking-heading img { width: min(145px, 44vw); margin-top: 6px; margin-bottom: 2px; }
    .ranking-heading h1 { font-size: 28px; }
    .rank-card { grid-template-columns: 44px 1fr; gap: 10px; padding: 14px; }
    .rank-position { width: 40px; height: 40px; border-radius: 13px; font-size: 16px; }
    .rank-avatar { display: none; }
    .rank-user h2 { font-size: 16px; }
    .rank-stats { gap: 6px; }
    .rank-stats span { padding: 4px 7px; font-size: 11px; }
    .rank-score { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 6px; min-width: 0; padding: 9px; }
    .rank-score strong { font-size: 24px; }
    .bets-layout { grid-template-columns: 1fr; }
    .bets-games-list { grid-auto-flow: column; grid-auto-columns: minmax(230px, 78vw); overflow-x: auto; padding-bottom: 4px; }
    .bets-game-card:hover { transform: none; }
    .bets-details-header { padding: 16px; }
    .bets-user-card { grid-template-columns: 1fr auto; gap: 10px; }
    .bets-user-card .rank-avatar { display: none; }
    .bets-score { min-width: 66px; }
    .bets-select-footer { display: grid; gap: 5px; text-align: center; }
    .bets-detail-top, .bets-selected-game { width: 100%; }
}