/*
 * O Desafio entre amigos (20/10/2026), no corte da versão B aprovada pelo dono (canvas EjMvgMPmTWau6N9q8dSNct, fileira 6):
 * pouco texto, imagem, número e botão; o nome do time sempre ao lado do escudo; a logo nunca sobre imagem. Quem desenha é
 * public/js/novo/desafio.js; aqui só o visual.
 */
.ds-pagina { flex: 1; min-width: 0; display: flex; justify-content: center; padding: 16px 16px 96px; box-sizing: border-box; color: #fdf2e0; }
.ds-coluna { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 14px; }
.ds-carregando { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 48px 16px; color: #b9bec5; }
.ds-titulo { margin: 0; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 32px; line-height: 1; color: #fdf2e0; text-transform: uppercase; }
.ds-destaque { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; }
.ds-sub { margin: 0; font-size: 13px; color: #b9bec5; }
.ds-nota { margin: 0; font-size: 12px; color: #8f969d; text-align: center; }
.ds-cartao { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #1e2227; box-sizing: border-box; }
.ds-cartao.verde { background: #15241d; border: 1px solid #2f5c47; }
.ds-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-linha small { color: #8f969d; font-size: 12px; }
.ds-linha b { white-space: nowrap; }

/* Botões */
.ds-botao { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 16px; border-radius: 14px; border: none;
    background: #00ff88; color: #0f1114; font-weight: 800; font-size: 17px; text-decoration: none; cursor: pointer; font-family: inherit; box-sizing: border-box; }
.ds-botao:disabled { opacity: .5; cursor: default; }
.ds-botao.amarelo { background: #ffd43b; }
.ds-botao.escuro { background: #1e2227; color: #fdf2e0; border: 1px solid #3a424b; font-weight: 700; font-size: 15px; }
.ds-botao.pequeno { min-height: 44px; font-size: 14px; border-radius: 12px; }
.ds-botao img { width: 28px; height: 28px; }
.ds-botao span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.ds-botao span small { font-size: 11px; font-weight: 600; opacity: .8; }
.ds-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ds-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ds-quatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* Times: escudo e nome sempre juntos */
.ds-time { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.ds-time img { width: 32px; height: 32px; object-fit: contain; }
.ds-time .ds-sem-escudo { width: 32px; height: 32px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: #3a424b; color: #fdf2e0; }
.ds-time b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: .4px; text-transform: uppercase; color: #fdf2e0;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-time.grande img, .ds-time.grande .ds-sem-escudo { width: 44px; height: 44px; border-radius: 22px; }
.ds-faixa { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px; background: #0f1114; }
.ds-faixa .ds-hora { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 24px; color: #fdf2e0; text-transform: uppercase; }


/* Pessoas */
.ds-pessoa { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ds-pessoa img { width: 76px; height: 76px; border-radius: 38px; object-fit: cover; background: #1e2227; }
.ds-pessoa b { font-size: 14px; font-weight: 700; }
.ds-pessoa .ds-vazio { width: 76px; height: 76px; border-radius: 38px; border: 3px dashed #8f969d; display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 34px; color: #b9bec5; box-sizing: border-box; }
.ds-versus { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ds-meio { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ds-meio img { width: 84px; height: 84px; }
.ds-valor { white-space: nowrap; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 30px; line-height: 1; color: #ffd43b; }
.ds-numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ds-numero { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; background: #1e2227; text-align: center; }
.ds-numero.verde { background: #15241d; border: 1px solid #2f5c47; }
.ds-numero small { font-size: 11px; color: #8f969d; }
.ds-numero b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 24px; color: #fdf2e0; }
.ds-numero.verde b { color: #00ff88; }
.ds-numero b.vermelho { color: #ff4d5e; }
.ds-proposta { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: #1e2227; text-align: center; }
.ds-proposta .ds-destaque { font-size: 30px; line-height: 1; }
.ds-dicas { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; font-size: 12px; color: #8f969d; }

/* Criar */
.ds-jogo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #1e2227; }
.ds-jogo .ds-times { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ds-jogo .ds-time b { max-width: 96px; }
.ds-jogo > small { flex: none; text-align: center; }
.ds-jogo > a { flex: none; }
.ds-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.ds-chip { flex: none; height: 38px; padding: 0 14px; border-radius: 19px; border: 1px solid #3a424b; background: #1e2227; color: #b9bec5; font-size: 13px; cursor: pointer; font-family: inherit; }
.ds-chip.ativo { border: 2px solid #ffd43b; color: #fdf2e0; font-weight: 600; }
.ds-lado { min-height: 84px; border-radius: 12px; border: 1px solid #3a424b; background: #1e2227; color: #b9bec5; cursor: pointer; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; font-family: inherit; padding: 6px; }
.ds-lado.ativo { border: 2px solid #ffd43b; background: #15241d; color: #fdf2e0; }
.ds-lado img { width: 40px; height: 40px; object-fit: contain; }
.ds-lado b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: .4px; text-transform: uppercase; }
.ds-lado.texto b { font-size: 20px; }
.ds-vantagem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #15241d; border: 1px solid #2f5c47; }
.ds-vantagem .ds-destaque { font-size: 24px; line-height: 1.05; }
.ds-mais-menos { display: flex; align-items: center; gap: 6px; flex: none; }
.ds-mais-menos button { width: 36px; height: 36px; border-radius: 18px; border: 1px solid #3a424b; background: #0f1114; color: #fdf2e0; font-size: 18px; cursor: pointer; }
.ds-mais-menos button:disabled { opacity: .35; cursor: default; }
.ds-mais-menos small { font-size: 12px; color: #b9bec5; }
.ds-modo { display: flex; padding: 4px; background: #1e2227; border-radius: 12px; gap: 4px; }
.ds-modo button { flex: 1; height: 40px; border-radius: 9px; border: none; background: transparent; color: #b9bec5; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ds-modo button.ativo { background: #ffd43b; color: #0f1114; font-weight: 800; }
.ds-premio { min-height: 86px; border-radius: 12px; border: 1px solid #3a424b; background: #1e2227; color: #b9bec5; font-size: 12px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: inherit; padding: 4px; }
.ds-premio img { width: 44px; height: 44px; }
.ds-premio.ativo { border: 2px solid #ffd43b; background: #15241d; color: #fdf2e0; font-weight: 700; }
.ds-outro { display: flex; align-items: center; gap: 10px; }
.ds-outro input, .ds-campo { flex: 1; height: 46px; border-radius: 10px; border: 1px solid #3a424b; background: #0f1114; color: #fdf2e0; padding: 0 12px; font-size: 16px; font-family: inherit; box-sizing: border-box; }
.ds-chave { width: 52px; height: 30px; border-radius: 15px; border: none; background: #3a424b; position: relative; cursor: pointer; flex: none; }
.ds-chave::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 12px; background: #fdf2e0; transition: left .15s; }
.ds-chave.ligada { background: #00ff88; }
.ds-chave.ligada::after { left: 25px; }
.ds-erro { padding: 10px 12px; border-radius: 10px; background: rgba(255, 77, 94, .12); color: #ff8c97; font-size: 13px; }
.ds-erro:empty { display: none; }

/* Jogos do dia: a posição no topo do cartão */
.ds-posicao { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 700; color: #0f1114; background: #ffd43b; padding: 3px 8px; border-radius: 8px; }

/* Duelo e resultado */
.ds-placar { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 44px; line-height: 1; color: #fdf2e0; }
.ds-ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #ff4d5e; }
.ds-ao-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: #ff4d5e; }
.ds-raspar { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid #ffd43b; background: #15241d; min-height: 420px; }
.ds-raspar .ds-por-baixo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
    background-size: cover; background-position: center; }
.ds-raspar canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ds-raspar .ds-dica { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-size: 12px; color: #0f1114; font-weight: 700; pointer-events: none; }
.ds-frase { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 30px; line-height: 1.05; color: #fdf2e0; text-align: center;
    text-transform: uppercase; background: #0f1114; padding: 6px 12px; border-radius: 10px; }
.ds-selo { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: #0f1114; }
.ds-selo.verde { color: #00ff88; }
.ds-selo.vermelho { color: #ff4d5e; }
.ds-provocacoes { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-pedacos { display: flex; gap: 4px; }
.ds-pedacos i { flex: 1; height: 10px; border-radius: 5px; background: #3a424b; }
.ds-pedacos i.pego { background: #00ff88; }
.ds-contagem { width: 54px; height: 54px; border-radius: 27px; border: 3px solid #ffd43b; display: flex; align-items: center; justify-content: center; flex: none;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 20px; }

/* Meus, mascote e prateleira */
.ds-lista { display: flex; flex-direction: column; gap: 8px; }
a.fb-chip { text-decoration: none; }
.ds-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #1e2227; text-decoration: none; color: #fdf2e0; }
.ds-item img { width: 40px; height: 40px; border-radius: 20px; object-fit: cover; flex: none; }
.ds-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ds-item b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-item small { font-size: 12px; color: #8f969d; }
.ds-mascotes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ds-mascotes button { aspect-ratio: 1; border-radius: 12px; border: 1px solid #3a424b; background: #1e2227; padding: 0; overflow: hidden; cursor: pointer; }
.ds-mascotes button.ativo { border: 3px solid #ffd43b; }
.ds-mascotes img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-prateleira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ds-prateleira div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; text-align: center; }
.ds-prateleira img { width: 56px; height: 56px; }

/* Taxas */
.ds-tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: #1e2227; border-radius: 16px; overflow: hidden; font-size: 13px; }
.ds-tabela th, .ds-tabela td { padding: 12px 8px; text-align: center; border-top: 1px solid #262c33; }
.ds-tabela thead th { border-top: none; font-weight: 500; color: #b9bec5; font-size: 11px; }
.ds-tabela thead img { width: 40px; height: 40px; display: block; margin: 0 auto 2px; }
.ds-tabela td:first-child, .ds-tabela th:first-child { text-align: left; padding-left: 14px; color: #b9bec5; }
.ds-tabela .ds-destaque { font-size: 20px; }
.ds-verde { color: #00ff88; }
.ds-amarelo { color: #ffd43b; }
.ds-vermelho { color: #ff4d5e; }


/*
 * 21/10/2026 (pedido do dono: "a versão desktop está sem graça", "a página inicial merece uma explicação", "os desafios
 * sugeridos são sem graça, mal explicados e o botão de criar o próprio é discreto demais"): a arte da torcida, o início com
 * "Como funciona", os jogos do dia com o jogo escolhido ao lado, as sugestões explicadas e as telas de computador.
 */
.ds-titulo.grande { font-size: 44px; }
.ds-titulo.medio { font-size: 26px; }
.ds-subtitulo { margin: 0; font-size: 15px; font-weight: 800; color: #fdf2e0; display: flex; align-items: center; gap: 8px; }
.ds-subtitulo span { width: 24px; height: 24px; border-radius: 12px; background: #ffd43b; color: #0f1114; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.ds-lead { margin: 0; font-size: 15px; line-height: 1.45; color: #d6d9dd; }
.ds-ajuda { margin: 0; font-size: 12.5px; line-height: 1.4; color: #8f969d; }
.ds-link { color: #00ff88; font-size: 14px; font-weight: 700; text-decoration: none; }
.ds-secao { display: flex; flex-direction: column; gap: 14px; }
.ds-secao-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; }
.ds-secao-cabeca small { color: #8f969d; font-size: 12.5px; }
.ds-estreito { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ds-estreito.largo { max-width: 880px; }

/* A arte do duelo: o torcedor da casa à esquerda, o de fora espelhado à direita, o corte diagonal no meio (Torcida). */
.ds-duelo-arte { position: relative; overflow: hidden; background: #0f1114; aspect-ratio: 2 / 1; width: 100%; }
.ds-duelo-arte .ds-meia { position: absolute; top: 0; bottom: 0; width: 56%; overflow: hidden; }
.ds-duelo-arte .ds-meia.esq { left: 0; clip-path: polygon(0 0, 96.43% 0, 82.14% 100%, 0 100%); }
.ds-duelo-arte .ds-meia.dir { right: 0; clip-path: polygon(17.86% 0, 100% 0, 100% 100%, 3.57% 100%); }
.ds-duelo-arte .ds-meia img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
.ds-duelo-arte .ds-meia.dir img { transform: scaleX(-1); }
.ds-duelo-arte .ds-corte { position: absolute; inset: 0; background: #0f1114; clip-path: polygon(53.4% 0, 54.6% 0, 46.6% 100%, 45.4% 100%); }
.ds-duelo-arte .ds-posicao { z-index: 1; }

/* Topo do início */
.ds-heroi { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #15191d; border: 1px solid #262c33; }
.ds-heroi-arte img { display: block; width: 100%; height: 220px; object-fit: cover; object-position: 50% 45%; }
.ds-heroi-texto { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 20px; }
.ds-heroi-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-heroi-botoes .ds-botao { flex: 1 1 180px; }
.ds-fatos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: #b9bec5; }
.ds-fatos li::before { content: '✓'; color: #00ff88; font-weight: 800; margin-right: 6px; }
.ds-eu { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fdf2e0; align-self: flex-start; }
.ds-eu img { width: 40px; height: 40px; border-radius: 20px; background: #1e2227; }
.ds-eu small { color: #8f969d; font-size: 11px; }

/* Como funciona */
.ds-passos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.ds-passos li { display: flex; gap: 12px; align-items: center; background: #1e2227; border-radius: 16px; overflow: hidden; }
.ds-passos img { width: 124px; height: 100px; object-fit: cover; flex: none; }
.ds-passos li > div { padding: 10px 12px 10px 0; display: flex; flex-direction: column; gap: 4px; }
.ds-passos b { font-size: 15px; display: flex; gap: 8px; align-items: center; color: #fdf2e0; }
.ds-passos b span { width: 22px; height: 22px; border-radius: 11px; background: #ffd43b; color: #0f1114; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds-passos p { margin: 0; font-size: 13px; line-height: 1.4; color: #b9bec5; }
.ds-regras { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ds-regras li { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: #d6d9dd; background: #15191d; border: 1px solid #262c33; border-radius: 12px; padding: 8px 12px; }
.ds-regras img { width: 36px; height: 36px; flex: none; }

/* Os meus desafios */
.ds-meus { display: grid; gap: 14px; }
.ds-bloco-lista { display: flex; flex-direction: column; gap: 8px; }
.ds-bloco-lista + .ds-bloco-lista { margin-top: 12px; }

/* Jogos do dia */
.ds-cabeca-pagina { display: flex; flex-direction: column; gap: 10px; }
.ds-trilha { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ds-trilha li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #d6d9dd; background: #1e2227; border-radius: 999px; padding: 5px 12px 5px 5px; }
.ds-trilha b { width: 22px; height: 22px; border-radius: 11px; background: #00ff88; color: #0f1114; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ds-jogos { display: grid; gap: 14px; }
.ds-jogos-lista, .ds-grade-jogos { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ds-jogos-detalhe:empty { display: none; }
.ds-cartao-jogo { display: flex; flex-direction: column; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid #3a424b; background: #1e2227; cursor: pointer;
    text-align: left; color: inherit; text-decoration: none; font-family: inherit; }
.ds-cartao-jogo.ativo { border: 2px solid #ffd43b; }
.ds-cartao-jogo .ds-duelo-arte { aspect-ratio: 5 / 2; }
.ds-cartao-jogo-info { display: flex; flex-direction: column; gap: 4px; padding: 0 0 10px; min-width: 0; }
.ds-cartao-jogo .ds-faixa { background: transparent; padding: 8px 10px 2px; }
.ds-linha-info { display: flex; justify-content: space-between; gap: 8px; padding: 0 12px; font-size: 12px; color: #8f969d; }
.ds-linha-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-linha-info b { color: #ffd43b; white-space: nowrap; font-weight: 700; }
.ds-voltar { align-self: flex-start; background: none; border: none; color: #00ff88; font-size: 14px; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; }
.ds-detalhe { display: flex; flex-direction: column; gap: 14px; }
.ds-detalhe-topo { border-radius: 16px; overflow: hidden; background: #0f1114; }
.ds-detalhe-faixa { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #0f1114; padding: 8px 8px 10px; }
.ds-detalhe-faixa .ds-faixa { padding: 0; }
.ds-detalhe-faixa small { color: #8f969d; font-size: 12px; text-align: center; }
.ds-criar-grande { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px; background: #ffd43b; color: #0f1114; text-decoration: none; box-shadow: 0 5px 0 #b38f17; }
.ds-criar-grande img { width: 72px; height: 72px; flex: none; }
.ds-criar-grande div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.ds-criar-grande b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; }
.ds-criar-grande small { font-size: 13px; font-weight: 600; }
.ds-criar-grande > span { font-size: 30px; font-weight: 800; }

/* Desafios prontos */
.ds-sugestoes { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ds-sugestao { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: #1e2227; border: 1px solid #2c333b; }
.ds-sugestao header { display: flex; align-items: center; gap: 8px; }
.ds-sugestao header img { width: 32px; height: 32px; object-fit: contain; }
.ds-tipo { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #fdf2e0; }
.ds-modo-tag { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 8px; background: #15241d; color: #00ff88; white-space: nowrap; }
.ds-modo-tag.justo { background: #2b2412; color: #ffd43b; }
.ds-provocacao { margin: 0; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 25px; line-height: 1.05; text-transform: uppercase; color: #fdf2e0; }
.ds-lados-sug { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ds-lados-sug > div { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: #15191d; border: 1px solid #2c333b; min-width: 0; }
.ds-lados-sug .voce { border-color: #6b5a1c; background: #221e10; }
.ds-lados-sug small { font-size: 11px; color: #8f969d; text-transform: uppercase; letter-spacing: .3px; font-weight: 700; }
.ds-lados-sug b { font-size: 14px; line-height: 1.25; color: #fdf2e0; }
.ds-lados-sug span { font-size: 13px; color: #ffd43b; font-weight: 700; margin-top: auto; }
.ds-lados-sug .amigo span { color: #b9bec5; }
.ds-chance { display: flex; flex-direction: column; gap: 4px; }
.ds-chance-barra { height: 8px; border-radius: 4px; background: #3a424b; overflow: hidden; }
.ds-chance-barra i { display: block; height: 100%; background: #ffd43b; }
.ds-chance .ds-linha b { font-size: 12px; }
.ds-chance .ds-linha small { font-size: 11px; }
.ds-nota-modo { margin: 0; font-size: 12px; line-height: 1.35; color: #8f969d; }
.ds-sugestao footer { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid #2c333b; margin-top: auto; }
.ds-sugestao footer img { width: 44px; height: 44px; }
.ds-sugestao footer div { display: flex; flex-direction: column; flex: 1; }
.ds-sugestao footer small { font-size: 11px; color: #8f969d; }
.ds-sugestao footer b { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-style: italic; font-weight: 800; font-size: 26px; color: #00ff88; line-height: 1; }
.ds-sugestao footer .ds-botao { min-height: 44px; padding: 0 18px; }

/* Criar */
.ds-criar, .ds-criar-form, .ds-criar-resumo, .ds-passo-form { display: flex; flex-direction: column; gap: 14px; }
.ds-passo-form { gap: 10px; }
.ds-criar-resumo .ds-duelo-arte { display: none; border-radius: 14px; }

/* Duelo: duas colunas no computador */
.ds-dupla, .ds-dupla-a, .ds-dupla-b { display: flex; flex-direction: column; gap: 14px; }

@media (min-width: 640px) and (max-width: 1023px) {
    .ds-grade-jogos, .ds-jogos-lista, .ds-sugestoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-regras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    /* No celular o jogo escolhido toma o lugar da lista (com "← Jogos do dia"). */
    .com-jogo .ds-jogos-lista, .com-jogo .ds-cabeca-pagina { display: none; }
}
@media (min-width: 1024px) {
    .ds-pagina { padding: 28px 32px 96px; }
    .ds-coluna { max-width: 1180px; gap: 32px; }
    .ds-heroi { flex-direction: row-reverse; min-height: 380px; }
    .ds-heroi-arte { flex: 1.35; min-width: 0; }
    .ds-heroi-arte img { height: 100%; min-height: 380px; }
    .ds-heroi-texto { flex: 1; justify-content: center; padding: 36px; gap: 18px; }
    .ds-titulo.grande { font-size: 60px; }
    .ds-titulo.medio { font-size: 30px; }
    .ds-lead { font-size: 17px; }
    .ds-passos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .ds-passos li { flex-direction: column; align-items: stretch; }
    .ds-passos img { width: 100%; height: 170px; }
    .ds-passos li > div { padding: 6px 16px 18px; }
    .ds-regras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ds-meus { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 28px; }
    .ds-meus.so { grid-template-columns: 1fr; }
    .ds-grade-jogos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .ds-jogos { grid-template-columns: 400px minmax(0, 1fr); align-items: start; gap: 28px; }
    .ds-jogos-lista .ds-cartao-jogo { flex-direction: row; align-items: stretch; min-height: 96px; }
    .ds-jogos-lista .ds-cartao-jogo .ds-duelo-arte { width: 150px; aspect-ratio: auto; flex: none; }
    .ds-jogos-lista .ds-cartao-jogo-info { flex: 1; justify-content: center; padding: 6px 0 8px; }
    .ds-jogos-lista .ds-time b { max-width: 96px; }
    .ds-jogos-detalhe { position: sticky; top: 84px; }
    .ds-voltar { display: none; }
    .ds-detalhe-topo .ds-duelo-arte { aspect-ratio: 5 / 2; }
    .ds-sugestoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .ds-criar { flex-direction: row; align-items: flex-start; gap: 28px; }
    .ds-criar-form { flex: 1.25; min-width: 0; gap: 22px; }
    .ds-criar-resumo { flex: 1; min-width: 0; position: sticky; top: 84px; background: #15191d; border: 1px solid #262c33; border-radius: 20px; padding: 16px; }
    .ds-criar-resumo .ds-duelo-arte { display: block; }
    .ds-dupla { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .ds-dupla-b { position: sticky; top: 84px; background: #15191d; border: 1px solid #262c33; border-radius: 20px; padding: 18px; }
    .ds-mascotes { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}