/* Pac Man Vermelho */ 
#ghost {
  position: relative;
  scale: 0.8;
}

#red {
  animation: upNDown infinite 0.5s;
  position: relative;
  width: 140px;
  height: 140px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(14, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-areas:
    "a1  a2  a3  a4  a5  top0  top0  top0  top0  a10 a11 a12 a13 a14"
    "b1  b2  b3  top1 top1 top1 top1 top1 top1 top1 top1 b12 b13 b14"
    "c1 c2 top2 top2 top2 top2 top2 top2 top2 top2 top2 top2 c13 c14"
    "d1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 d14"
    "e1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 e14"
    "f1 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 top3 f14"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4 top4"
    "st0 st0 an4 st1 an7 st2 an10 an10 st3 an13 st4 an16 st5 st5"
    "an1 an2 an3 an5 an6 an8 an9 an9 an11 an12 an14 an15 an17 an18";
}

@keyframes upNDown {
  0%,
  49% {
    transform: translateY(0px);
  }
  50%,
  100% {
    transform: translateY(-10px);
  }
}

#top0,
#top1,
#top2,
#top3,
#top4,
#st0,
#st1,
#st2,
#st3,
#st4,
#st5 {
  background-color: red;
}

#top0 {
  grid-area: top0;
}

#top1 {
  grid-area: top1;
}

#top2 {
  grid-area: top2;
}

#top3 {
  grid-area: top3;
}

#top4 {
  grid-area: top4;
}

#st0 {
  grid-area: st0;
}

#st1 {
  grid-area: st1;
}

#st2 {
  grid-area: st2;
}

#st3 {
  grid-area: st3;
}

#st4 {
  grid-area: st4;
}

#st5 {
  grid-area: st5;
}

#an1 {
  grid-area: an1;
  animation: flicker0 infinite 0.5s;
}

#an18 {
  grid-area: an18;
  animation: flicker0 infinite 0.5s;
}

#an2 {
  grid-area: an2;
  animation: flicker1 infinite 0.5s;
}

#an17 {
  grid-area: an17;
  animation: flicker1 infinite 0.5s;
}

#an3 {
  grid-area: an3;
  animation: flicker1 infinite 0.5s;
}

#an16 {
  grid-area: an16;
  animation: flicker1 infinite 0.5s;
}

#an4 {
  grid-area: an4;
  animation: flicker1 infinite 0.5s;
}

#an15 {
  grid-area: an15;
  animation: flicker1 infinite 0.5s;
}

#an6 {
  grid-area: an6;
  animation: flicker0 infinite 0.5s;
}

#an12 {
  grid-area: an12;
  animation: flicker0 infinite 0.5s;
}

#an7 {
  grid-area: an7;
  animation: flicker0 infinite 0.5s;
}

#an13 {
  grid-area: an13;
  animation: flicker0 infinite 0.5s;
}

#an9 {
  grid-area: an9;
  animation: flicker1 infinite 0.5s;
}

#an10 {
  grid-area: an10;
  animation: flicker1 infinite 0.5s;
}

#an8 {
  grid-area: an8;
  animation: flicker0 infinite 0.5s;
}

#an11 {
  grid-area: an11;
  animation: flicker0 infinite 0.5s;
}

@keyframes flicker0 {
  0%,
  49% {
    background-color: red;
  }
  50%,
  100% {
    background-color: transparent;
  }
}

@keyframes flicker1 {
  0%,
  49% {
    background-color: transparent;
  }
  50%,
  100% {
    background-color: red;
  }
}

#eye {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 10px;
}

#eye::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#eye1 {
  width: 40px;
  height: 50px;
  position: absolute;
  top: 30px;
  right: 30px;
}

#eye1::before {
  content: "";
  background-color: white;
  width: 20px;
  height: 50px;
  transform: translateX(10px);
  display: block;
  position: absolute;
}

#eye1::after {
  content: "";
  background-color: white;
  width: 40px;
  height: 30px;
  transform: translateY(10px);
  display: block;
  position: absolute;
}

#pupil {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  left: 10px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

#pupil1 {
  width: 20px;
  height: 20px;
  background-color: blue;
  position: absolute;
  top: 50px;
  right: 50px;
  z-index: 1;
  animation: eyesMovement infinite 3s;
}

@keyframes eyesMovement {
  0%,
  49% {
    transform: translateX(0px);
  }
  50%,
  99% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0px);
  }
}

#shadow {
  background-color: black;
  width: 140px;
  height: 140px;
  position: absolute;
  border-radius: 50%;
  transform: rotateX(80deg);
  filter: blur(20px);
  top: 80%;
  animation: shadowMovement infinite 0.5s;
}

@keyframes shadowMovement {
  0%,
  49% {
    opacity: 0.5;
  }
  50%,
  100% {
    opacity: 0.2;
  }
}










:root {
    --roxo: #8B2CF5;
    --amarelo: #FFD700;
    --cyan: #00D1FF;
    --preto: #0f0f0f;
}

/* ==========================================================================
   1. CONFIGURAÇÕES GERAIS
   ========================================================================== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--preto);
    color: white;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Fontes */
.font-fun { font-family: 'Luckiest Guy', cursive; letter-spacing: 2px; }
.font-geek { font-family: 'Bungee', cursive; }
.font-pixel { font-family: 'VT323', monospace; }

/* Tipografia Extra para HQ */
.text-stroke-black { -webkit-text-stroke: 2px #000; color: transparent; }
.text-shadow-comic { text-shadow: 3px 3px 0px #000, 6px 6px 0px var(--roxo); }

/* Utilitários de Corte (Clip-paths) */
[data-aos] { pointer-events: auto !important; opacity: 1 !important; transform: none !important; }
.section-cut-top { clip-path: polygon(0 3%, 100% 0%, 100% 100%, 0 100%); }
.section-cut-bottom { clip-path: polygon(0 0, 100% 0%, 100% 97%, 0 100%); }

/* ==========================================================================
   2. BOTÕES COM CLIQUE TÁTIL (NEO-BRUTALISMO)
   ========================================================================== */
.btn-comic {
    background-color: var(--amarelo); 
    color: black; 
    font-family: 'Bungee', cursive;
    padding: 12px 30px; 
    border: 3px solid black; 
    box-shadow: 6px 6px 0px black;
    transition: all 0.1s ease-in-out; 
    text-transform: uppercase; 
    display: inline-block; 
    transform: rotate(-1deg); 
}
.btn-comic:hover { 
    transform: translate(-2px, -2px) rotate(0deg); 
    box-shadow: 8px 8px 0px var(--cyan); 
}
.btn-comic:active { 
    transform: translate(4px, 4px); 
    box-shadow: 0px 0px 0px black; 
}

/* Nav Link Hover Effect */
.nav-link-hover { position: relative; }
.nav-link-hover::after {
    content: ''; position: absolute; width: 0%; height: 3px;
    bottom: -4px; left: 0; background-color: var(--cyan);
    transition: width 0.3s ease;
}
.nav-link-hover:hover::after { width: 100%; }

/* ==========================================================================
   3. ANIMAÇÕES GERAIS
   ========================================================================== */
@keyframes float { 
    0%, 100% { transform: translateY(0) rotate(-2deg); } 
    50% { transform: translateY(-10px) rotate(2deg); } 
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes scroll-sponsors { 
    0% { transform: translateX(0); } 
    100% { transform: translateX(-50%); } 
}
.sponsors-wrapper { 
    width: 100%; overflow: hidden; 
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); 
}
.sponsors-track { 
    display: flex; gap: 40px; width: max-content; 
    animation: scroll-sponsors 20s linear infinite; 
}
.sponsors-track:hover { animation-play-state: paused; }

/* ==========================================================================
   4. ARCADE DO INSTAGRAM (FLIPERAMA)
   ========================================================================== */
.arcade-station {
    background-color: #222;
    border: 6px solid black;
    border-radius: 20px 20px 0 0;
    box-shadow: 15px 15px 0px var(--roxo), inset 0 0 30px rgba(0,0,0,0.8);
    position: relative;
    z-index: 10;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.arcade-top-banner {
    background: repeating-linear-gradient(45deg, var(--roxo), var(--roxo) 10px, #6a00b0 10px, #6a00b0 20px);
    padding: 20px;
    text-align: center;
    border-bottom: 6px solid black;
    box-shadow: inset 0 -5px 15px rgba(0,0,0,0.5);
}

.arcade-body {
    display: flex;
    flex-direction: column;
    background: #111;
}

@media (min-width: 1024px) {
    .arcade-body { flex-direction: row; }
    .stats-panel { width: 300px; border-right: 6px solid black; border-bottom: none; }
}

.stats-panel {
    background: #000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

.led-score-box {
    background: #1a1a1a;
    border: 2px solid #333;
    padding: 10px;
    text-align: center;
    position: relative;
}

.led-label { color: #555; font-family: 'Bungee', cursive; font-size: 0.7rem; margin-bottom: 5px; display: block; }
.led-value { font-family: 'VT323', monospace; font-size: 2.5rem; line-height: 1; text-shadow: 0 0 8px currentColor; }

.screen-area {
    flex-grow: 1;
    padding: 20px;
    background: #222;
    position: relative;
}

.screen-bezel {
    background: #000; 
    border-radius: 20px;
    overflow: hidden;
    height: 450px;
    position: relative;
    box-shadow: inset 5px 5px 15px rgba(0,0,0,0.8);
}

@keyframes flicker {
    0% { opacity: 0.95; }
    100% { opacity: 1; }
}

.crt-lines {
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    background-size: 100% 4px, 3px 100%; 
    position: absolute; inset: 0; 
    pointer-events: none; 
    z-index: 20;
    animation: flicker 0.15s infinite;
}

.control-deck {
    background: #333;
    border-top: 6px solid black;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0 0 15px 15px;
}

.joystick-base { width: 60px; height: 60px; background: #111; border-radius: 50%; border: 3px solid #555; position: relative; box-shadow: 0 5px 0 black; }
.joystick-knob { width: 40px; height: 40px; background: #FF0000; border-radius: 50%; border: 2px solid black; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); box-shadow: inset -5px -5px 10px rgba(0,0,0,0.5); }
.arcade-button { width: 50px; height: 50px; border-radius: 50%; border: 3px solid black; cursor: pointer; box-shadow: 0 6px 0 black; transition: all 0.1s; display: flex; align-items: center; justify-content: center;}
.arcade-button:active { transform: translateY(6px); box-shadow: 0 0px 0 black; }
.ab-blue { background: radial-gradient(circle, var(--cyan) 40%, #0099cc 100%); } 
.ab-yellow { background: radial-gradient(circle, var(--amarelo) 40%, #ccaa00 100%); } 
.ab-green { background: radial-gradient(circle, #00ff00 40%, #00cc00 100%); }

/* ==========================================================================
   5. PAC-MAN & RANKING UI
   ========================================================================== */
.ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f4f4f4;
    padding: 10px 15px;
    border: 2px solid black;
    box-shadow: 3px 3px 0px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}
.ranking-item:hover {
    transform: scale(1.02) rotate(-1deg);
    background: var(--amarelo);
    box-shadow: 4px 4px 0px black;
}
.ranking-pos { color: var(--roxo); font-weight: bold; }
.ranking-name { color: black; font-weight: bold; }
.ranking-score { color: var(--cyan); text-shadow: 1px 1px 0px #000; }

.ranking-item.top-1 { background: black; color: white; box-shadow: 4px 4px 0px var(--amarelo); }
.ranking-item.top-1 .ranking-name { color: var(--amarelo); }

/* Ajuste específico para a tag Plantão Geek */
.bg-white.border-4.border-black.px-4.py-1.transform.-rotate-2.font-geek.mt-4.md\:mt-0 {
    color: black !important;
}