#jogo-trilha { width: 100%; max-width: 500px; }
#trilha-start-screen .difficulty-options { display: flex; flex-direction: column; gap: 10px; }
.trilha-info-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; }
.info-pecas { display: flex; align-items: center; gap: 8px; }
.info-pecas.brancas::before { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--cor-borda); background-color: white; }
.info-pecas.pretas::before { content: ''; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--cor-borda); background-color: black; }
#status-trilha { font-weight: 700; color: var(--cor-principal-acao); text-align: center; }
#trilha-board { position: relative; width: 100%; aspect-ratio: 1 / 1; background-color: #e6b873; border: 5px solid #8b4513; border-radius: 10px; }
.trilha-ponto { position: absolute; width: 12%; height: 12%; background-color: #8b4513; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; z-index: 2; }
.trilha-ponto.pode-colocar:hover { background-color: #c88a3e; }
.peca { width: 80%; height: 80%; border-radius: 50%; position: absolute; top: 10%; left: 10%; transition: transform 0.2s; }
.peca.branca { background: radial-gradient(circle at 30% 30%, #fff, #ddd); box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
.peca.preta { background: radial-gradient(circle at 30% 30%, #444, #111); box-shadow: 0 2px 5px rgba(0,0,0,0.4); }
.peca.selecionada { transform: scale(1.2); box-shadow: 0 0 15px var(--cor-destaque); }
.peca.removivel:hover { border: 3px solid var(--cor-erro); cursor: crosshair; }
#trilha-svg-linhas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
#trilha-svg-linhas line { stroke: #654321; stroke-width: 5px; }