<div class="flex justify-center items-center">
    <div class="fundo flex justify-center items-center">
        <a class="button button-play" onclick="visualizarStart()"></a>
        <a href="#" class="button button-config" onclick="visualizarConfig()">
            <img class="horario" src="/images/engrenagem.png">
        </a>
        <a href="#" class="button button-regras" onclick="visualizarRegras()">
            <img class="tremer" src="/images/regras.png">
        </a>
    </div>
</div>
<main class="flex justify-center items-center">
    <div class="play main_fundo" hidden>
        <%- include('../partials/menu_play.ejs') %>
    </div>
    <div class="config main_fundo" hidden>
        <p class="text-center text-2xl">Configurações</p>
        <div class="slides text-center">
            <div class="slider-wrapper">
                <p class="text-center text-xl mt-2">Moeda Inicial</p>
                <p class="text-center text-x mb-1">1000 ---- R$ ---- 5000</p>
                <input class="mb-3" type="range" name="dinheiro" min="1000" max="5000" step="500">
            </div>

            <div class="slider-wrapper">
                <p class="text-center text-xl mt-2">Musica</p>
                <input class="mb-3" type="range" name="volume-music" min="1" max="10" step="1">
            </div>

            <div class="slider-wrapper">
                <p class="text-center text-xl mt-2">Efeitos</p>
                <input class="mb-3" type="range" name="volume-effects" min="1" max="10" step="1">
            </div>

            <h3 class="mt-3 text-xl font-medium text-gray-900">Tema do tabuleiro:</h3>
            <ul class="grid gap-6 w-full md:grid-cols-2">
                <li>
                    <input type="radio" id="hosting-small" name="hosting" value="hosting-small" class="hidden peer" required>
                    <label for="hosting-small" class="inline-flex justify-between items-center p-5 w-full rounded-lg border border-gray-200 cursor-pointer dark:peer-checked:text-blue-500 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100">
                        <div class="block">
                            <div class="w-full text-lg font-semibold">Valores em Dolar $</div>
                            <div class="w-full">Tabuleiro Classico</div>
                        </div>
                        <svg aria-hidden="true" class="ml-3 w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </label>
                </li>
                <li>
                    <input type="radio" id="hosting-big" name="hosting" value="hosting-big" class="hidden peer">
                    <label for="hosting-big"
                        class="inline-flex justify-between items-center p-5 w-full rounded-lg border border-gray-200 cursor-pointer dark:peer-checked:text-blue-500 peer-checked:text-blue-600 hover:text-gray-600 hover:bg-gray-100">
                        <div class="block">
                            <div class="w-full text-lg font-semibold">Valores em Reais R$</div>
                            <div class="w-full">Tabuleiro com Locais de Niterói</div>
                        </div>
                        <svg aria-hidden="true" class="ml-3 w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
                            xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd"
                                d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
                                clip-rule="evenodd"></path>
                        </svg>
                    </label>
                </li>
            </ul>
        </div>

        <div class="text-center mt-10">
            <a href="" class="selecionar_peca bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded">Avançar</a>
        </div>
    </div>
    <div class="rules main_fundo" hidden>
        <%- include('../partials/rules.ejs') %>
    </div>
</main>