html{scroll-behavior: smooth;}
 
 .parte-do-conteudo{
      font-family: Arial, Helvetica, sans-serif;
      background:#f4f7fb;
      color:#222;
      line-height:1.8;
    }

    .container{
      width:90%;
      max-width:1200px;
      margin:auto;
    }

    header{
      background:linear-gradient(135deg,#0f172a,#1e3a8a);
      color:#fff;
      padding:80px 20px;
      text-align:center;
    }

    header h1{
      font-size:48px;
      margin-bottom:20px;
    }

    header p{
      font-size:20px;
      max-width:900px;
      margin:auto;
    }

    nav{
      background:#111827;
      padding:15px;
      position:sticky;
      top:0;
      z-index:999;
    }

    nav ul{
      display:flex;
      flex-wrap:wrap;
      gap:15px;
      justify-content:center;
      list-style:none;
    }

    nav a{
      color:#fff;
      text-decoration:none;
      font-weight:bold;
      transition:0.3s;
    }

    nav a:hover{
      color:#60a5fa;
    }

    section{
      background:#fff;
      margin:30px 0;
      padding:40px;
      border-radius:14px;
      box-shadow:0 4px 14px rgba(0,0,0,0.08);
    }

    section h2{
      color:#1e3a8a;
      margin-bottom:20px;
      font-size:34px;
    }

    section h3{
      margin:25px 0 10px;
      color:#0f172a;
      font-size:26px;
    }

    section p{
      margin-bottom:20px;
      font-size:18px;
    }

    ul{
      margin-left:25px;
      margin-bottom:20px;
    }

    ul li{
      margin-bottom:10px;
      font-size:18px;
    }

    .highlight{
      background:#dbeafe;
      padding:20px;
      border-left:6px solid #2563eb;
      border-radius:8px;
      margin:25px 0;
    }

    .board{
      display:grid;
      grid-template-columns:repeat(3,120px);
      gap:10px;
      justify-content:center;
      margin:40px 0;
    }

    .cell{
      width:120px;
      height:120px;
      background:#eff6ff;
      border:3px solid #2563eb;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:60px;
      font-weight:bold;
      color:#1d4ed8;
      border-radius:10px;
    }

    table{
      width:100%;
      border-collapse:collapse;
      margin-top:20px;
    }

    table th,
    table td{
      border:1px solid #ddd;
      padding:15px;
      text-align:left;
      font-size:17px;
    }

    table th{
      background:#1e3a8a;
      color:#fff;
    }

    .faq-item{
      margin-bottom:30px;
    }

    .faq-item h4{
      color:#1e3a8a;
      margin-bottom:10px;
      font-size:22px;
    }

    footer{
      background:#0f172a;
      color:#fff;
      text-align:center;
      padding:40px 20px;
      margin-top:50px;
    }

    .cta{
      background:linear-gradient(135deg,#2563eb,#1d4ed8);
      color:#fff;
      padding:40px;
      border-radius:14px;
      text-align:center;
      margin-top:40px;
    }

    .cta h2{
      color:#fff;
      margin-bottom:20px;
    }

    .btn{
      display:inline-block;
      margin-top:20px;
      padding:15px 30px;
      background:#fff;
      color:#1d4ed8;
      text-decoration:none;
      font-weight:bold;
      border-radius:8px;
      transition:0.3s;
    }

    .btn:hover{
      background:#dbeafe;
    }

     
        
        
        
        
        
        /*Parte do jogo */
        :root {
            --cor-preto: #000000;
            --cor-vermelho: #CE1126;
            --cor-amarelo: #F9D616;
            --cor-branco: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .parte-do-jogo {
            background-color: var(--cor-preto);
            background-image: linear-gradient(135deg, var(--cor-preto) 25%, var(--cor-vermelho) 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--cor-branco);
        }

        h1 {
            margin-bottom: 20px;
            color: var(--cor-amarelo);
            text-transform: uppercase;
            letter-spacing: 2px;
            text-shadow: 2px 2px var(--cor-preto);
        }

        .parte-do-jogo h1{font-size: 1.6rem;}

        /* Painel de Pontuação */
        .placar {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            background: rgba(255, 255, 255, 0.1);
            padding: 15px 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(249, 214, 22, 0.3);
        }

        .pontos {
            text-align: center;
        }

        .pontos span {
            display: block;
            font-size: 24px;
            font-weight: bold;
            color: var(--cor-amarelo);
        }

        /* Tabuleiro */
        .tabuleiro {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            grid-template-rows: repeat(3, 100px);
            gap: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

        .celula {
            width: 100px;
            height: 100px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid var(--cor-amarelo);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .celula:hover {
            background: rgba(249, 214, 22, 0.2);
        }

        .celula.x { color: var(--cor-vermelho); }
        .celula.o { color: var(--cor-amarelo); }

        /* Mensagem de Vitória Especial */
        #msg-especial {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--cor-amarelo);
            color: var(--cor-preto);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            z-index: 100;
            box-shadow: 0 0 50px rgba(249, 214, 22, 0.5);
            animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes pop {
            from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        }

        .btn-reset {
            margin-top: 30px;
            padding: 10px 25px;
            background: var(--cor-amarelo);
            border: none;
            border-radius: 5px;
            font-weight: bold;
            cursor: pointer;
            text-transform: uppercase;
            transition: 0.3s;
        }

        .btn-reset:hover {
            transform: scale(1.1);
            background: var(--cor-branco);
        }
        .view-codigo{background-color: #ce1127a8; padding: 10px; display: none;}
        .view-codigo h2{font-size: 1.1rem;}

         @media(max-width:768px){

            .container{width: 100%;}

            header h1{
                font-size:34px;
            }

            section{
                padding:25px;
                width: 100%;
                border-radius: 0px;
                
            }
            .cta{border-radius: 0px;}

            .board{
                grid-template-columns:repeat(3,90px);
            }

            .cell{
                width:90px;
                height:90px;
                font-size:45px;
            }
        }
      

        @media (max-width: 500px) {
            #msg-especial { width: 96%;}
        }

        /* Responsividade */
        @media (max-width: 400px) {
            .tabuleiro {
                grid-template-columns: repeat(3, 80px);
                grid-template-rows: repeat(3, 80px);
            }
            .celula {
                width: 80px;
                height: 80px;
                font-size: 2.5rem;
            }
        }