:root {
  color-scheme: light;
  --black: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #eef1f4;
  --silver: #313b46;
  --silver-2: #66717d;
  --white: #101820;
  --line: rgba(16, 24, 32, 0.11);
  --line-strong: rgba(16, 24, 32, 0.2);
  --red: #ef233c;
  --green: #55d98b;
  --amber: #ffca57;
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--black);
  color: var(--white);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 85% -20%, #dce2e8 0, transparent 34%), var(--black); }
button, input, select { font: inherit; }
button, select, input[type="date"] { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(2px); opacity: .38; }
.ambient-one { width: 460px; height: 460px; right: -260px; top: 220px; background: radial-gradient(circle, rgba(116,132,148,.12), transparent 66%); }
.ambient-two { width: 360px; height: 360px; left: -220px; bottom: 6%; background: radial-gradient(circle, rgba(114,128,142,.09), transparent 68%); }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--white); text-decoration: none; letter-spacing: -.03em; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 39px; color: #fff; background: linear-gradient(145deg,#313b46,#101820); font: 900 13px/1 Arial; clip-path: polygon(0 0,100% 0,88% 100%,0 100%); }
.brand > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: .9; font-style: italic; }
.brand strong { font-weight: 950; }
.brand em { color: var(--red); font: 900 11px/1.3 inherit; letter-spacing: .12em; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.private-badge { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--silver); font-size: 12px; }
.private-badge i, .status-filter i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(85,217,139,.1); }
.refresh-button { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 9px 13px; background: #fff; color: var(--white); box-shadow:0 4px 16px rgba(25,39,52,.06); }
.refresh-button:hover { border-color: #687481; background: #f1f3f5; }
.refresh-button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.refresh-button.loading svg { animation: spin .8s linear infinite; }

.view-nav { display:flex; align-items:center; gap:4px; height:58px; border-bottom:1px solid var(--line); }
.view-nav button { position:relative; height:100%; border:0; padding:0 22px; background:transparent; color:var(--silver-2); font-size:14px; font-weight:850; letter-spacing:.01em; }
.view-nav button span { margin-right:7px; color:#4f565f; font-size:9px; }
.view-nav button:hover { color:var(--white); }
.view-nav button.active { color:var(--white); }
.view-nav button.active::after { content:""; position:absolute; left:22px; right:22px; bottom:-1px; height:2px; background:var(--red); }
.view-nav button.active span { color:var(--red); }
.view-panel[hidden] { display:none !important; }

.hero { display: grid; grid-template-columns: 1.4fr .6fr; gap: 70px; align-items: end; padding: 72px 0 46px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--silver-2); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.eyebrow span { width: 28px; height: 2px; background: var(--red); }
h1 { margin: 0; max-width: 780px; font-size: clamp(44px, 7vw, 86px); line-height: .9; letter-spacing: -.067em; text-transform: uppercase; font-weight: 950; }
h1 b { color: transparent; -webkit-text-stroke: 1px #6f7a85; font-weight: inherit; }
.hero-copy { max-width: 620px; margin: 23px 0 0; color: var(--silver-2); line-height: 1.65; font-size: 15px; }
.date-panel { align-self: center; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg,#ffffff,#f1f3f5); box-shadow: 0 20px 60px rgba(25,39,52,.1); }
.date-panel label { display: block; margin-bottom: 8px; color: var(--silver-2); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.date-panel input { width: 100%; border: 0; border-bottom: 1px solid var(--line-strong); padding: 6px 0 15px; color: var(--white); background: transparent; font-size: 17px; font-weight: 750; color-scheme: light; }
.updated { display: flex; align-items: center; gap: 8px; margin-top: 15px; color: var(--silver); font-size: 12px; }
.updated > span:first-child { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(85,217,139,.09); }
.updated .error-dot { background: var(--red); box-shadow: 0 0 0 5px rgba(239,35,60,.1); }
.date-panel small { display: block; margin: 7px 0 0 15px; color: #626a73; font-size: 11px; }

.filters { position: sticky; z-index: 5; top: 10px; display: grid; grid-template-columns: minmax(210px,1fr) 210px auto; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); box-shadow: 0 16px 48px rgba(25,39,52,.1); }
.search-wrap { position: relative; }
.search-wrap svg { position: absolute; left: 13px; top: 50%; width: 18px; transform: translateY(-50%); fill: none; stroke: #78808a; stroke-width: 1.8; }
.search-wrap input, .filters select { width: 100%; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--white); }
.search-wrap input { padding: 0 12px 0 41px; cursor: text; }
.search-wrap input::placeholder { color: #676f79; }
.filters select { padding: 0 34px 0 12px; }
.status-filter { display: flex; gap: 5px; }
.status-filter button { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 76px; border: 0; border-radius: 9px; padding: 0 12px; background: transparent; color: var(--silver-2); font-size: 12px; font-weight: 700; }
.status-filter button:hover { color: var(--white); }
.status-filter button.active { background: linear-gradient(145deg,#27323d,#101820); color: #fff; }
.status-filter button.active i { background: #fff; box-shadow: none; }

.summary { display: grid; grid-template-columns: repeat(4,1fr); margin: 24px 0 64px; border-block: 1px solid var(--line); }
.summary article { display: flex; align-items: center; gap: 10px; padding: 17px 22px; border-right: 1px solid var(--line); }
.summary article:last-child { border: 0; }
.summary span { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.summary small { color: var(--silver-2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 20px; }
.section-heading p { margin: 0 0 7px; color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.section-heading h2 { margin: 0; font-size: clamp(25px,4vw,38px); letter-spacing: -.04em; }
.section-heading > span { color: var(--silver-2); font-size: 12px; }
.section-heading.compact { margin-top: 64px; }

.feature-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin:2px 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.feature-heading p { margin:0 0 7px; color:var(--red); font-size:10px; font-weight:900; letter-spacing:.18em; }
.feature-heading h2 { margin:0; font-size:clamp(34px,6vw,62px); line-height:1; letter-spacing:-.055em; text-transform:uppercase; }
.feature-heading > div > span { display:block; margin-top:12px; color:var(--silver-2); font-size:13px; }
.source-chip { flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:8px 11px; color:var(--silver-2); font-size:9px; font-weight:850; letter-spacing:.1em; }
.feature-loading { min-height:260px; padding:62px 20px; border:1px solid var(--line); border-radius:var(--radius); text-align:center; }
.feature-loading .skeleton { max-width:540px; margin:10px auto; }
.feature-loading p { margin-top:18px; color:var(--silver-2); font-size:12px; }

.standings-grid { display:grid; gap:38px; }
.standings-league { min-width:0; }
.league-heading { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.league-heading span { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line-strong); border-radius:50%; color:var(--silver); font-size:10px; font-weight:950; }
.league-heading h3 { margin:0; font-size:20px; letter-spacing:-.03em; }
.division-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.division-card { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:linear-gradient(155deg,#ffffff,#f2f4f6); box-shadow:0 10px 30px rgba(25,39,52,.06); }
.division-card h4 { margin:0; padding:14px 15px; border-bottom:1px solid var(--line); color:var(--silver); font-size:11px; letter-spacing:.09em; text-transform:uppercase; }
.division-table { width:100%; min-width:360px; border-collapse:collapse; }
.division-table th,.division-table td { position:static !important; padding:9px 7px; background:transparent !important; font-size:10px; }
.division-table th:first-child,.division-table td:first-child { width:23px; padding-left:12px; text-align:center; color:var(--silver-2); }
.division-table th:nth-child(2),.division-table td:nth-child(2) { text-align:left; }
.division-team { display:flex; align-items:center; gap:7px; min-width:0; }
.division-team img { width:22px; height:22px; object-fit:contain; }
.division-team strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.division-team.yankees strong { color:#101820; }
.division-team.yankees::after { content:"NYY"; margin-left:auto; padding:2px 4px; border-radius:3px; background:#101820; color:#fff; font-size:7px; font-weight:950; }
.gb-even { color:var(--green); font-weight:850; }

.latino-toolbar { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.country-menu { display:flex; flex-wrap:wrap; gap:7px; }
.country-menu button { border:1px solid var(--line); border-radius:999px; padding:9px 12px; background:#fff; color:var(--silver-2); font-size:11px; font-weight:760; }
.country-menu button:hover { color:var(--white); border-color:var(--line-strong); }
.country-menu button.active { border-color:transparent; background:linear-gradient(145deg,#27323d,#101820); color:#fff; }
.country-menu button.dynamic-country { border-style:dashed; }
#latinoRoleFilter { flex:0 0 210px; height:38px; border:1px solid var(--line); border-radius:10px; padding:0 10px; background:#fff; color:var(--white); font-size:11px; }
.latino-summary { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:24px; border-block:1px solid var(--line); }
.latino-summary div { display:flex; align-items:baseline; gap:8px; padding:15px 20px; border-right:1px solid var(--line); }
.latino-summary div:last-child { border:0; }
.latino-summary strong { font-size:23px; font-weight:950; }
.latino-summary span { color:var(--silver-2); font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.latinos-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.latino-card { position:relative; overflow:hidden; display:grid; grid-template-columns:76px minmax(0,1fr); gap:15px; min-height:138px; padding:16px; border:1px solid var(--line); border-radius:17px; background:radial-gradient(circle at 100% 0,rgba(128,143,158,.1),transparent 35%),linear-gradient(145deg,#ffffff,#f2f4f6); box-shadow:0 10px 30px rgba(25,39,52,.06); }
.latino-card.top-performer { border-color:rgba(255,202,87,.32); }
.latino-rank { position:absolute; right:13px; top:12px; color:rgba(16,24,32,.07); font-size:35px; font-weight:950; line-height:1; }
.latino-photo { position:relative; align-self:end; height:105px; border-radius:13px; background:linear-gradient(145deg,#242a31,#121519); }
.latino-photo img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:inherit; }
.latino-flag { position:absolute; left:-5px; bottom:-5px; display:grid; place-items:center; min-width:28px; height:28px; padding:0 5px; border:3px solid #fff; border-radius:50%; background:#eef1f4; font-size:15px; }
.latino-content { min-width:0; display:flex; flex-direction:column; justify-content:center; }
.latino-label { display:flex; align-items:center; gap:7px; margin-bottom:5px; color:var(--amber); font-size:8px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.latino-label.live { color:#ff6e7f; }
.latino-label i { width:5px; height:5px; border-radius:50%; background:currentColor; }
.latino-content h3 { overflow:hidden; margin:0; text-overflow:ellipsis; white-space:nowrap; font-size:18px; letter-spacing:-.03em; }
.latino-content > small { margin-top:3px; color:var(--silver-2); font-size:10px; }
.stat-lines { display:grid; gap:5px; margin-top:12px; }
.stat-line { display:flex; align-items:center; gap:8px; color:var(--silver); font-size:11px; }
.stat-line b { min-width:47px; color:#777f88; font-size:8px; letter-spacing:.09em; }
.stat-line strong { color:var(--white); }
.country-section { grid-column:1/-1; display:flex; align-items:center; gap:10px; margin:24px 0 0; }
.country-section:first-child { margin-top:0; }
.country-section span { font-size:21px; }
.country-section h3 { margin:0; font-size:17px; }
.country-section small { color:var(--silver-2); }

.games-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.game-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 288px; padding: 19px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg,#ffffff 0%,#f2f4f6 62%); box-shadow: 0 16px 40px rgba(25,39,52,.08); transition: transform .2s ease,border-color .2s ease; }
.game-card:hover { transform: translateY(-3px); border-color: rgba(224,229,235,.28); }
.game-card.yankees { border-color: rgba(25,52,79,.28); background: radial-gradient(circle at 100% 0,rgba(71,102,132,.11),transparent 34%),linear-gradient(155deg,#ffffff,#edf1f5 65%); }
.game-card.yankees::before { content:"YANKEES"; position:absolute; right:-8px; top:73px; color:rgba(16,24,32,.035); font-size:49px; font-weight:950; letter-spacing:-.08em; transform:rotate(-90deg) translateX(50%); transform-origin:right top; pointer-events:none; }
.card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; }
.game-status { display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.game-status::before { content:""; width:7px; height:7px; border-radius:50%; background:#6d747d; }
.game-status.live { color:#ff6e7f; }
.game-status.live::before { background:var(--red); box-shadow:0 0 0 4px rgba(239,35,60,.13); animation:pulse 1.7s ease infinite; }
.game-status.final { color:var(--silver); }
.game-status.preview { color:var(--amber); }
.game-status.preview::before { background:var(--amber); }
.inning { color:var(--silver-2); font-size:11px; }
.matchup { display:grid; gap:2px; }
.team-row { position:relative; z-index:1; display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:11px; align-items:center; min-height:60px; }
.team-logo { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.team-info { min-width:0; }
.team-info strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.team-info span { color:var(--silver-2); font-size:10px; }
.team-score { font-size:31px; font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
.team-row.winner .team-info strong,.team-row.winner .team-score { color:#101820; }
.team-row.loser { opacity:.57; }
.card-meta { display:flex; gap:8px; margin-top:10px; color:var(--silver-2); font-size:10px; }
.card-meta span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.boxscore-button { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; width:100%; margin-top:auto; border:1px solid var(--line); border-radius:11px; padding:11px 13px; background:#fff; color:var(--silver); font-size:12px; font-weight:750; }
.boxscore-button:hover { color:#101820; border-color:#656d77; }
.boxscore-button:disabled { cursor:wait; opacity:.6; }
.yankees-tag { color:#111418; background:linear-gradient(145deg,#edf0f3,#9ba3ac); padding:4px 7px; border-radius:5px; font-size:9px; font-weight:950; letter-spacing:.08em; }

.alert { margin-bottom:18px; padding:14px 16px; border:1px solid rgba(204,32,52,.25); border-radius:12px; background:rgba(239,35,60,.06); color:#a21d2e; font-size:13px; line-height:1.5; }
.empty-state { padding:64px 20px; border:1px dashed var(--line-strong); border-radius:var(--radius); text-align:center; }
.empty-state div { width:58px; height:58px; margin:0 auto 16px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--silver-2); font-size:12px; }
.empty-state h3 { margin:0 0 5px; }
.empty-state p { margin:0; color:var(--silver-2); font-size:13px; }
.player-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.player-hit { display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; }
.player-hit img { width:50px; height:50px; object-fit:cover; object-position:top; border-radius:10px; background:#1a1e23; }
.player-hit > div { min-width:0; flex:1; }
.player-hit strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-hit small { color:var(--silver-2); }
.player-line { margin-top:4px; color:var(--silver); font-size:11px; }

.footer { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:82px; padding-block:28px; border-top:1px solid var(--line); }
.footer div { display:flex; flex-direction:column; gap:4px; }
.footer strong { font-size:12px; }
.footer span { color:var(--silver-2); font-size:11px; }
.footer a { color:var(--silver); text-decoration:none; font-size:12px; }
.footer a:hover { color:#101820; }

.game-dialog { width:min(980px,calc(100% - 24px)); max-height:92vh; padding:0; border:1px solid var(--line-strong); border-radius:24px; background:#fff; color:#101820; box-shadow:0 35px 90px rgba(0,0,0,.35); }
.game-dialog::backdrop { background:rgba(0,0,0,.76); backdrop-filter:blur(8px); }
.dialog-shell { position:relative; padding:28px; }
.close-dialog { position:sticky; z-index:4; float:right; top:0; display:grid; place-items:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:#f0f2f4; color:#101820; font-size:25px; }
.dialog-header { padding-right:52px; }
.dialog-header p { margin:0 0 8px; color:var(--red); font-size:10px; font-weight:900; letter-spacing:.18em; }
.dialog-header h2 { margin:0; font-size:clamp(24px,5vw,42px); letter-spacing:-.05em; }
.dialog-header > span { display:block; margin-top:7px; color:var(--silver-2); font-size:12px; }
.dialog-tabs { display:flex; gap:7px; margin:24px 0 16px; }
.dialog-tabs button { border:1px solid var(--line); border-radius:9px; padding:9px 13px; background:#f5f6f8; color:var(--silver-2); font-size:12px; font-weight:800; }
.dialog-tabs button.active { color:#fff; background:#101820; }
.stats-panel { display:none; }
.stats-panel.active { display:block; }
.stat-team { margin-top:18px; }
.stat-team h3 { margin:0 0 9px; font-size:13px; letter-spacing:.03em; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; min-width:600px; border-collapse:collapse; font-size:12px; }
th,td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; }
th:first-child,td:first-child { position:sticky; left:0; text-align:left; background:#f7f8fa; }
th { color:var(--silver-2); background:#f0f2f4; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
tr:last-child td { border-bottom:0; }
.dialog-loading { padding:70px 20px; text-align:center; color:var(--silver-2); }
.dialog-loading .skeleton { margin:10px auto; }

.skeleton-card { pointer-events:none; }
.skeleton { border-radius:8px; background:linear-gradient(90deg,#e8ebee 20%,#f7f8fa 40%,#e8ebee 60%); background-size:220% 100%; animation:shimmer 1.2s ease infinite; }
.sk-short { width:32%; height:12px; margin-bottom:28px; }
.sk-line { width:100%; height:54px; margin-bottom:8px; }
.sk-button { width:100%; height:40px; margin-top:auto; }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { opacity:.38; } }
@keyframes shimmer { to { background-position:-220% 0; } }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; gap:28px; padding-top:54px; }
  .date-panel { max-width:430px; }
  .filters { grid-template-columns:1fr 190px; }
  .status-filter { grid-column:1/-1; }
  .status-filter button { flex:1; min-height:38px; }
  .games-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .division-grid { grid-template-columns:1fr; }
  .latino-toolbar { flex-direction:column; }
  #latinoRoleFilter { flex-basis:auto; width:100%; }
}

@media (max-width:620px) {
  .shell { width:min(100% - 24px,1180px); }
  .topbar { height:68px; }
  .view-nav { overflow-x:auto; height:52px; scrollbar-width:none; }
  .view-nav::-webkit-scrollbar { display:none; }
  .view-nav button { flex:0 0 auto; padding-inline:14px; }
  .view-nav button.active::after { left:14px; right:14px; }
  .private-badge { display:none; }
  .refresh-button span { display:none; }
  .refresh-button { padding:10px; }
  .hero { padding:43px 0 30px; }
  h1 { font-size:44px; }
  .hero-copy { font-size:13px; }
  .feature-heading { align-items:flex-start; flex-direction:column; gap:15px; }
  .feature-heading h2 { font-size:38px; }
  .filters { top:6px; grid-template-columns:1fr 46%; padding:7px; }
  .status-filter { overflow-x:auto; padding-bottom:1px; }
  .status-filter button { flex:0 0 auto; min-height:37px; }
  .summary { grid-template-columns:repeat(2,1fr); margin-bottom:48px; }
  .summary article:nth-child(2) { border-right:0; }
  .summary article:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .games-grid,.player-results { grid-template-columns:1fr; }
  .latino-summary { grid-template-columns:repeat(2,1fr); }
  .latino-summary div:nth-child(2) { border-right:0; }
  .latino-summary div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .latinos-results { grid-template-columns:1fr; }
  .country-menu { flex-wrap:nowrap; width:calc(100vw - 24px); overflow-x:auto; padding-bottom:5px; scrollbar-width:none; }
  .country-menu::-webkit-scrollbar { display:none; }
  .country-menu button { flex:0 0 auto; }
  .game-card { min-height:276px; }
  .footer { align-items:flex-start; flex-direction:column; }
  .dialog-shell { padding:19px 15px 22px; }
}