@charset "utf-8";
/*
 * CSS Document
 */

/*
 * Os 4 fantasmas usam o mesmo desenho; só a cor muda (--ghost-color).
 * Gerado a partir de um mapa 14 x 14 (cada div é um pixel de 2px).
 * Os olhos seguem a direção do movimento (classes up, down, left, right).
 */
.ghost {
	position: absolute;
	width: 28px;
	height: 28px;
	display: grid;
	grid-template-columns: repeat(14, 2px);
	grid-template-rows: repeat(14, 2px);
	--blink-delay: 0s;
}

/* Corpo */
.ghost > div:nth-child(6),
.ghost > div:nth-child(7),
.ghost > div:nth-child(8),
.ghost > div:nth-child(9),
.ghost > div:nth-child(18),
.ghost > div:nth-child(19),
.ghost > div:nth-child(20),
.ghost > div:nth-child(21),
.ghost > div:nth-child(22),
.ghost > div:nth-child(23),
.ghost > div:nth-child(24),
.ghost > div:nth-child(25),
.ghost > div:nth-child(31),
.ghost > div:nth-child(32),
.ghost > div:nth-child(33),
.ghost > div:nth-child(34),
.ghost > div:nth-child(35),
.ghost > div:nth-child(36),
.ghost > div:nth-child(37),
.ghost > div:nth-child(38),
.ghost > div:nth-child(39),
.ghost > div:nth-child(40),
.ghost > div:nth-child(44),
.ghost > div:nth-child(45),
.ghost > div:nth-child(46),
.ghost > div:nth-child(47),
.ghost > div:nth-child(48),
.ghost > div:nth-child(49),
.ghost > div:nth-child(50),
.ghost > div:nth-child(51),
.ghost > div:nth-child(52),
.ghost > div:nth-child(53),
.ghost > div:nth-child(54),
.ghost > div:nth-child(55),
.ghost > div:nth-child(58),
.ghost > div:nth-child(59),
.ghost > div:nth-child(60),
.ghost > div:nth-child(61),
.ghost > div:nth-child(62),
.ghost > div:nth-child(63),
.ghost > div:nth-child(64),
.ghost > div:nth-child(65),
.ghost > div:nth-child(66),
.ghost > div:nth-child(67),
.ghost > div:nth-child(68),
.ghost > div:nth-child(69),
.ghost > div:nth-child(72),
.ghost > div:nth-child(73),
.ghost > div:nth-child(74),
.ghost > div:nth-child(75),
.ghost > div:nth-child(76),
.ghost > div:nth-child(77),
.ghost > div:nth-child(78),
.ghost > div:nth-child(79),
.ghost > div:nth-child(80),
.ghost > div:nth-child(81),
.ghost > div:nth-child(82),
.ghost > div:nth-child(83),
.ghost > div:nth-child(85),
.ghost > div:nth-child(86),
.ghost > div:nth-child(87),
.ghost > div:nth-child(88),
.ghost > div:nth-child(89),
.ghost > div:nth-child(90),
.ghost > div:nth-child(91),
.ghost > div:nth-child(92),
.ghost > div:nth-child(93),
.ghost > div:nth-child(94),
.ghost > div:nth-child(95),
.ghost > div:nth-child(96),
.ghost > div:nth-child(97),
.ghost > div:nth-child(98),
.ghost > div:nth-child(99),
.ghost > div:nth-child(100),
.ghost > div:nth-child(101),
.ghost > div:nth-child(102),
.ghost > div:nth-child(103),
.ghost > div:nth-child(104),
.ghost > div:nth-child(105),
.ghost > div:nth-child(106),
.ghost > div:nth-child(107),
.ghost > div:nth-child(108),
.ghost > div:nth-child(109),
.ghost > div:nth-child(110),
.ghost > div:nth-child(111),
.ghost > div:nth-child(112),
.ghost > div:nth-child(113),
.ghost > div:nth-child(114),
.ghost > div:nth-child(115),
.ghost > div:nth-child(116),
.ghost > div:nth-child(117),
.ghost > div:nth-child(118),
.ghost > div:nth-child(119),
.ghost > div:nth-child(120),
.ghost > div:nth-child(121),
.ghost > div:nth-child(122),
.ghost > div:nth-child(123),
.ghost > div:nth-child(124),
.ghost > div:nth-child(125),
.ghost > div:nth-child(126),
.ghost > div:nth-child(127),
.ghost > div:nth-child(128),
.ghost > div:nth-child(129),
.ghost > div:nth-child(130),
.ghost > div:nth-child(131),
.ghost > div:nth-child(132),
.ghost > div:nth-child(133),
.ghost > div:nth-child(134),
.ghost > div:nth-child(135),
.ghost > div:nth-child(136),
.ghost > div:nth-child(137),
.ghost > div:nth-child(138),
.ghost > div:nth-child(139),
.ghost > div:nth-child(140),
.ghost > div:nth-child(141),
.ghost > div:nth-child(142),
.ghost > div:nth-child(143),
.ghost > div:nth-child(144),
.ghost > div:nth-child(145),
.ghost > div:nth-child(146),
.ghost > div:nth-child(147),
.ghost > div:nth-child(148),
.ghost > div:nth-child(149),
.ghost > div:nth-child(150),
.ghost > div:nth-child(151),
.ghost > div:nth-child(152),
.ghost > div:nth-child(153),
.ghost > div:nth-child(154),
.ghost > div:nth-child(155),
.ghost > div:nth-child(156),
.ghost > div:nth-child(157),
.ghost > div:nth-child(158),
.ghost > div:nth-child(159),
.ghost > div:nth-child(160),
.ghost > div:nth-child(161),
.ghost > div:nth-child(162),
.ghost > div:nth-child(163),
.ghost > div:nth-child(164),
.ghost > div:nth-child(165),
.ghost > div:nth-child(166),
.ghost > div:nth-child(167),
.ghost > div:nth-child(168),
.ghost > div:nth-child(169),
.ghost > div:nth-child(170),
.ghost > div:nth-child(172),
.ghost > div:nth-child(174),
.ghost > div:nth-child(177),
.ghost > div:nth-child(179),
.ghost > div:nth-child(181),
.ghost > div:nth-child(182) {
	background: var(--ghost-color);
}

/* Lençol: os dois quadros se alternam */
.ghost > div:nth-child(173),
.ghost > div:nth-child(178),
.ghost > div:nth-child(183),
.ghost > div:nth-child(187),
.ghost > div:nth-child(188),
.ghost > div:nth-child(191),
.ghost > div:nth-child(192),
.ghost > div:nth-child(196) {
	background: var(--ghost-color);
	animation: skirt-a 0.4s steps(1) infinite;
}

.ghost > div:nth-child(171),
.ghost > div:nth-child(175),
.ghost > div:nth-child(176),
.ghost > div:nth-child(180),
.ghost > div:nth-child(184),
.ghost > div:nth-child(185),
.ghost > div:nth-child(189),
.ghost > div:nth-child(190),
.ghost > div:nth-child(194),
.ghost > div:nth-child(195) {
	background: var(--ghost-color);
	animation: skirt-b 0.4s steps(1) infinite;
}

@keyframes skirt-a {
	0% { opacity: 1; }
	50% { opacity: 0; }
}

@keyframes skirt-b {
	0% { opacity: 0; }
	50% { opacity: 1; }
}

/*
 * Olhos: ao piscar, o branco e as pupilas viram corpo e o traço (‿) fica preto
 */
@keyframes blink-white {
	0% { background: white; }
	96% { background: var(--ghost-color); }
}

@keyframes blink-lid {
	0% { background: white; }
	96% { background: transparent; }
}

@keyframes blink-pupil {
	0% { background: transparent; }
	96% { background: var(--ghost-color); }
}

/* Olhando para a esquerda */
.ghost.left > div:nth-child(45),
.ghost.left > div:nth-child(46),
.ghost.left > div:nth-child(51),
.ghost.left > div:nth-child(52),
.ghost.left > div:nth-child(59),
.ghost.left > div:nth-child(60),
.ghost.left > div:nth-child(65),
.ghost.left > div:nth-child(66),
.ghost.left > div:nth-child(75),
.ghost.left > div:nth-child(81),
.ghost.left > div:nth-child(88),
.ghost.left > div:nth-child(89),
.ghost.left > div:nth-child(94),
.ghost.left > div:nth-child(95),
.ghost.left > div:nth-child(101),
.ghost.left > div:nth-child(102),
.ghost.left > div:nth-child(107),
.ghost.left > div:nth-child(108) {
	background: white;
	animation: blink-white 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.left > div:nth-child(58),
.ghost.left > div:nth-child(61),
.ghost.left > div:nth-child(64),
.ghost.left > div:nth-child(67),
.ghost.left > div:nth-child(74),
.ghost.left > div:nth-child(80) {
	background: white;
	animation: blink-lid 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.left > div:nth-child(72),
.ghost.left > div:nth-child(78),
.ghost.left > div:nth-child(86),
.ghost.left > div:nth-child(87),
.ghost.left > div:nth-child(92),
.ghost.left > div:nth-child(93) {
	background: transparent;
	animation: blink-pupil 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.left > div:nth-child(73),
.ghost.left > div:nth-child(79) {
	background: transparent;
}

/* Olhando para a direita */
.ghost.right > div:nth-child(47),
.ghost.right > div:nth-child(48),
.ghost.right > div:nth-child(53),
.ghost.right > div:nth-child(54),
.ghost.right > div:nth-child(61),
.ghost.right > div:nth-child(62),
.ghost.right > div:nth-child(67),
.ghost.right > div:nth-child(68),
.ghost.right > div:nth-child(74),
.ghost.right > div:nth-child(80),
.ghost.right > div:nth-child(88),
.ghost.right > div:nth-child(89),
.ghost.right > div:nth-child(94),
.ghost.right > div:nth-child(95),
.ghost.right > div:nth-child(103),
.ghost.right > div:nth-child(104),
.ghost.right > div:nth-child(109),
.ghost.right > div:nth-child(110) {
	background: white;
	animation: blink-white 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.right > div:nth-child(60),
.ghost.right > div:nth-child(63),
.ghost.right > div:nth-child(66),
.ghost.right > div:nth-child(69),
.ghost.right > div:nth-child(75),
.ghost.right > div:nth-child(81) {
	background: white;
	animation: blink-lid 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.right > div:nth-child(77),
.ghost.right > div:nth-child(83),
.ghost.right > div:nth-child(90),
.ghost.right > div:nth-child(91),
.ghost.right > div:nth-child(96),
.ghost.right > div:nth-child(97) {
	background: transparent;
	animation: blink-pupil 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.right > div:nth-child(76),
.ghost.right > div:nth-child(82) {
	background: transparent;
}

/* Olhando para cima */
.ghost.up > div:nth-child(59),
.ghost.up > div:nth-child(62),
.ghost.up > div:nth-child(65),
.ghost.up > div:nth-child(68),
.ghost.up > div:nth-child(73),
.ghost.up > div:nth-child(74),
.ghost.up > div:nth-child(75),
.ghost.up > div:nth-child(76),
.ghost.up > div:nth-child(79),
.ghost.up > div:nth-child(80),
.ghost.up > div:nth-child(81),
.ghost.up > div:nth-child(82),
.ghost.up > div:nth-child(88),
.ghost.up > div:nth-child(89),
.ghost.up > div:nth-child(94),
.ghost.up > div:nth-child(95) {
	background: white;
	animation: blink-white 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.up > div:nth-child(45),
.ghost.up > div:nth-child(48),
.ghost.up > div:nth-child(51),
.ghost.up > div:nth-child(54),
.ghost.up > div:nth-child(60),
.ghost.up > div:nth-child(61),
.ghost.up > div:nth-child(66),
.ghost.up > div:nth-child(67) {
	background: white;
	animation: blink-lid 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.up > div:nth-child(32),
.ghost.up > div:nth-child(33),
.ghost.up > div:nth-child(38),
.ghost.up > div:nth-child(39),
.ghost.up > div:nth-child(46),
.ghost.up > div:nth-child(47),
.ghost.up > div:nth-child(52),
.ghost.up > div:nth-child(53) {
	background: transparent;
	animation: blink-pupil 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

/* Olhando para baixo */
.ghost.down > div:nth-child(60),
.ghost.down > div:nth-child(61),
.ghost.down > div:nth-child(66),
.ghost.down > div:nth-child(67),
.ghost.down > div:nth-child(74),
.ghost.down > div:nth-child(75),
.ghost.down > div:nth-child(80),
.ghost.down > div:nth-child(81),
.ghost.down > div:nth-child(87),
.ghost.down > div:nth-child(90),
.ghost.down > div:nth-child(93),
.ghost.down > div:nth-child(96),
.ghost.down > div:nth-child(101),
.ghost.down > div:nth-child(104),
.ghost.down > div:nth-child(107),
.ghost.down > div:nth-child(110) {
	background: white;
	animation: blink-white 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.down > div:nth-child(73),
.ghost.down > div:nth-child(76),
.ghost.down > div:nth-child(79),
.ghost.down > div:nth-child(82),
.ghost.down > div:nth-child(88),
.ghost.down > div:nth-child(89),
.ghost.down > div:nth-child(94),
.ghost.down > div:nth-child(95) {
	background: white;
	animation: blink-lid 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

.ghost.down > div:nth-child(102),
.ghost.down > div:nth-child(103),
.ghost.down > div:nth-child(108),
.ghost.down > div:nth-child(109),
.ghost.down > div:nth-child(116),
.ghost.down > div:nth-child(117),
.ghost.down > div:nth-child(122),
.ghost.down > div:nth-child(123) {
	background: transparent;
	animation: blink-pupil 4s steps(1) infinite;
	animation-delay: var(--blink-delay);
}

/* Cores e momento da piscada de cada um */
.ghost.blinky { --ghost-color: #FE0002; }
.ghost.pinky  { --ghost-color: #FFA0A1; --blink-delay: -1.3s; }
.ghost.inky   { --ghost-color: #1BD8DA; --blink-delay: -2.1s; }
.ghost.clyde  { --ghost-color: #FF9000; --blink-delay: -3.2s; }

/* Assustado (depois da power pill) */
.ghost.frightened { --ghost-color: #2121DE; }
.ghost.frightened.flash { --ghost-color: #FFFFFF; }

/* Comido: sobram só os olhos voltando para casa (sem piscar nem lençol) */
.ghost.eaten { --ghost-color: transparent; }

.ghost.eaten > div {
	animation: none !important;
}