body {
    margin: 0;
    padding: 0;
    font-family: 'Orbitron', sans-serif;
    color: #e2e2e2;
    background: #000;
    position: relative;
    overflow-x: hidden;
    background: url('/images/fundo.png') no-repeat center center fixed;
    background-size: cover;
  }
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(0,255,100,0.05) 1px, transparent 1px),
                linear-gradient(rgba(0,255,100,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    animation: gridMove 20s linear infinite;
    pointer-events: none;
  }
  @keyframes gridMove {
    from { background-position: 0 0, 0 0; }
    to { background-position: 100px 100px, 100px 100px; }
  }

  /* estilo da lista */
  ul li .name {
    font-weight: bold;
    color: #ffffff;
    font-size: 16px;
  }
  ul li .score {
    font-weight: bold;
    color: #fff200;
    font-size: 17px;
  }

  /* partículas */
  .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(0,255,180,0.7);
    border-radius: 50%;
    animation: floatParticle 12s linear infinite;
    pointer-events: none;
  }
  @keyframes floatParticle {
    0% { transform: translateY(100vh) scale(0.5); opacity: 0.8; }
    100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
  }

  header {
    background: rgba(0, 0, 0, 0.75);
    border-bottom: 3px solid #c41c00;
    text-align: center;
    padding: 2rem 1rem;
    box-shadow: 0 0 15px #000000aa;
  }

  header h1 {
    font-size: 2.8rem;
    color: #c41c00;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  nav a {
    color: #ddd;
    margin: 0 1rem;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
  }

  nav a:hover {
    color: #c41c00;
  }

  .hero {
    max-width: 1300px;
    margin: auto;
    padding: 3rem 2rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
  }

  main {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 70vh;
  }

  #ranking-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }

  .top-section {
    margin-bottom: 40px;
    background: rgba(10,10,10,0.9);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 0 25px #ff0000aa;
  }

  .top-section h2 {
    margin-bottom: 30px;
    color: #fafafa;
    font-size: 30px;
    letter-spacing: 2px;
    text-align: center;
    font-weight: bold;
  }

  ul { list-style: none; padding: 0; margin-top: 20px; }
  ul li {
    padding: 8px 10px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    color: #eeff00;
    font-size: 17px;
    font-weight: bold;
  }
  .rank { color: #ff0000; font-weight: bold; font-size: 20px; margin-top: 10px;}

  /* players top 3 */
  .top-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(0,0,0,0.3);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0,255,180,0.6), 0 0 30px rgba(0,255,180,0.3);
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
    border: 2px solid rgba(0,255,180,0.5);
    backdrop-filter: blur(8px);
    margin: 5px;
  }
  .top-player:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 0 25px rgba(0,255,180,0.8), 0 0 50px rgba(0,255,180,0.4);
    filter: brightness(1.2);
  }
  .top-player .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 4px solid;
    box-shadow: 0 0 15px rgba(0,255,180,0.7), 0 0 30px rgba(0,255,180,0.3);
    margin-bottom: 10px;
    animation: neonPulse 2s infinite alternate;
  }
  @keyframes neonPulse {
    0% { box-shadow: 0 0 15px #00ffb4, 0 0 30px #00ffb4; }
    50% { box-shadow: 0 0 25px #00ffd4, 0 0 50px #00ffd4; }
    100% { box-shadow: 0 0 15px #00ffb4, 0 0 30px #00ffb4; }
  }
  .top-player .position-number {
    font-size: 22px;
    font-weight: bold;
    color: #ccff00;
    margin-bottom: 5px;
  }
  .top-player .name {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px #000000,0 0 20px #000000;
  }
  .top-player .score {
    font-size: 19px;
    font-weight: bold;
    color: #eaff00;
    margin-top: 10px;
  }

  /* ordem do top 3 */
  #top-3-geral > .top-player:nth-child(1) { order: 2; }
  #top-3-geral > .top-player:nth-child(2) { order: 1; }
  #top-3-geral > .top-player:nth-child(3) { order: 3; }
  #top-3-tank > .top-player:nth-child(1) { order: 2; }
  #top-3-tank > .top-player:nth-child(2) { order: 1; }
  #top-3-tank > .top-player:nth-child(3) { order: 3; }
  #top-3-artilharia > .top-player:nth-child(1) { order: 2; }
  #top-3-artilharia > .top-player:nth-child(2) { order: 1; }
  #top-3-artilharia > .top-player:nth-child(3) { order: 3; }

  .top-player:nth-child(1)::after { content: "🥇"; position: absolute; top: -12px; right: -12px; font-size: 32px; text-shadow: 0 0 10px #FFD700,0 0 20px #FFD700; }
  .top-player:nth-child(2)::after { content: "🥈"; position: absolute; top: -10px; right: -10px; font-size: 28px; text-shadow: 0 0 8px #C0C0C0,0 0 15px #C0C0C0; }
  .top-player:nth-child(3)::after { content: "🥉"; position: absolute; top: -8px; right: -8px; font-size: 24px; text-shadow: 0 0 6px #CD7F32,0 0 12px #CD7F32; }

  /* contêineres */
  #top-3-geral,#top-3-tank,#top-3-artilharia,#top-3-mortes {
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
  }
  .ranking-geral-mortes { display:flex; gap:20px; align-items:stretch; }
  .ranking-geral-mortes .geral { flex:3; }
  #ranking-geral-wrapper { max-height:490px; overflow-y:auto; padding:15px; }
  .ranking-geral-mortes .mortes { flex:1; max-width:220px; background: rgba(15,15,15,0.9); padding:10px; border-radius:10px; box-shadow:0 0 15px #ff3c00aa; }

  /* NOVO: tanque + mortes lado a lado */
  .ranking-tank-mortes {
    display: flex;
    gap: 20px;
    align-items: stretch;
  }
  .ranking-tank-mortes .tank {
    flex: 3;
  }
  .ranking-tank-mortes .mortes {
    flex: 1;
    max-width: 250px;
    background: rgba(15,15,15,0.9);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 15px #ff3c00aa;
  }

  footer {
    background: #111;
    padding: 1.5rem;
    text-align: center;
    font-size: 14px;
    color: #888;
    border-top: 2px solid #ff3c00;
    box-shadow: 0 0 10px #ff3c00aa;
    position: relative;
    z-index: 10;
  }
  footer a { color: #ff3c00; margin: 0 0.5rem; text-decoration: none; }
  footer a:hover { color: #fff; }