:root {
	color-scheme: light;
	--tinta: #1a1325;
	--papel: #fffaf0;
	--fundo: #fff4e2;
	--rosa: #ff4f8b;
	--turquesa: #19c3b4;
	--amarelo: #ffd23f;
	--roxo: #7b4dff;
	--laranja: #ff7a3d;
	--verde: #3bbf6a;
	--vermelho: #e63946;
	--muted: #6b5f86;
	--titulo: "Bangers", Impact, "Arial Black", sans-serif;
	--hq: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
	--contorno: -.05em -.05em 0 var(--tinta), .05em -.05em 0 var(--tinta), -.05em .05em 0 var(--tinta), .05em .05em 0 var(--tinta), 0 -.06em 0 var(--tinta), 0 .06em 0 var(--tinta), -.06em 0 0 var(--tinta), .06em 0 0 var(--tinta);
}

* {
	box-sizing: border-box
}

[hidden] {
	display: none !important
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--tinta);
	font-family: var(--hq);
	background-color: var(--fundo);
	/* confete musical */
	background-image:
		radial-gradient(#ff4f8b33 2px, transparent 2.5px),
		radial-gradient(#19c3b433 2px, transparent 2.5px);
	background-size: 34px 34px, 34px 34px;
	background-position: 0 0, 17px 17px;
}

a {
	color: inherit
}

/* ---------- topo ---------- */

.topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 12px max(16px, calc((100vw - 1040px) / 2));
	background: var(--turquesa);
	border-bottom: 4px solid var(--tinta);
}

.marca {
	font-family: var(--titulo);
	font-size: 26px;
	letter-spacing: .06em;
	text-decoration: none;
	color: #fff;
	text-shadow: var(--contorno), 3px 3px 0 var(--tinta);
}

.navegacao {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font: 700 15px var(--hq)
}

.navegacao a {
	text-decoration: none;
	border-bottom: 2px solid transparent
}

.navegacao a:hover,
.navegacao a[aria-current] {
	border-bottom-color: var(--tinta)
}

main {
	max-width: 1040px;
	margin: auto;
	padding: 32px 16px 72px
}

footer {
	text-align: center;
	padding: 26px 16px;
	font: 700 14px var(--hq);
	color: var(--muted);
	border-top: 3px solid var(--tinta);
	background: #fff8ec;
}

/* ---------- botões ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--titulo);
	font-size: 20px;
	letter-spacing: .05em;
	color: var(--tinta);
	background: var(--amarelo);
	border: 3px solid var(--tinta);
	border-radius: 14px;
	box-shadow: 4px 4px 0 var(--tinta);
	padding: 10px 18px;
	text-decoration: none;
	cursor: pointer;
	transition: transform .1s, box-shadow .1s;
}

.btn:hover {
	transform: translate(-1px, -2px);
	box-shadow: 5px 6px 0 var(--tinta)
}

.btn:active {
	transform: translate(3px, 3px);
	box-shadow: 1px 1px 0 var(--tinta)
}

.btn:disabled {
	opacity: .35;
	cursor: not-allowed;
	transform: none;
	box-shadow: 4px 4px 0 var(--tinta)
}

.btn.rosa {
	background: var(--rosa);
	color: #fff
}

.btn.branco {
	background: #fff
}

.btn:focus-visible,
.card:focus-visible,
.opcao:focus-visible,
.trilha button:focus-visible {
	outline: 4px solid var(--roxo);
	outline-offset: 3px
}

/* ---------- início do Groove ---------- */

.hero {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	background: #fff;
	border: 4px solid var(--tinta);
	border-radius: 22px;
	box-shadow: 10px 10px 0 var(--rosa), 14px 14px 0 var(--tinta);
	overflow: hidden;
}

.hero-texto {
	padding: clamp(22px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	background: #fff6d6;
}

.selo {
	font-family: var(--titulo);
	letter-spacing: .14em;
	font-size: 16px;
	color: #fff;
	background: var(--roxo);
	border: 3px solid var(--tinta);
	border-radius: 999px;
	padding: 5px 14px 3px;
	transform: rotate(-3deg);
	box-shadow: 3px 3px 0 var(--tinta);
}

.logo {
	font-family: var(--titulo);
	font-weight: normal;
	font-size: clamp(56px, 9vw, 104px);
	line-height: .88;
	letter-spacing: .02em;
	margin: 18px 0 20px;
	color: var(--rosa);
	text-shadow: var(--contorno), .1em .1em 0 var(--turquesa), .14em .14em 0 var(--tinta);
	transform: rotate(-2deg);
}

.hero-sub {
	font: 17px/1.5 var(--hq);
	margin: 16px 0 0;
	max-width: 36ch
}

.hero-arte {
	position: relative;
	min-height: 320px;
	border-left: 4px solid var(--tinta);
	overflow: hidden
}

.hero-arte svg,
.card-arte svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%
}

.secao {
	font-family: var(--titulo);
	font-weight: normal;
	font-size: 40px;
	letter-spacing: .04em;
	margin: 56px 0 22px;
	color: #fff;
	text-shadow: var(--contorno), 4px 4px 0 var(--roxo);
}

.lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 30px
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 4px solid var(--tinta);
	border-radius: 18px;
	box-shadow: 8px 8px 0 var(--turquesa), 11px 11px 0 var(--tinta);
	text-decoration: none;
	transform: rotate(-.8deg);
	transition: transform .2s;
	overflow: hidden;
}

.card:hover {
	transform: rotate(0) translateY(-6px)
}

.card-arte {
	position: relative;
	aspect-ratio: 4 / 3;
	border-bottom: 4px solid var(--tinta);
	background: var(--rosa);
	overflow: hidden
}

.card-num {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 10px;
	font-family: var(--titulo);
	font-size: 18px;
	letter-spacing: .06em;
	background: var(--amarelo);
	border: 3px solid var(--tinta);
	border-radius: 10px;
	padding: 3px 10px 1px;
	box-shadow: 3px 3px 0 var(--tinta);
}

.card-info {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1
}

.card h3 {
	font-family: var(--titulo);
	font-weight: normal;
	font-size: 32px;
	letter-spacing: .03em;
	margin: 0 0 4px
}

.card p {
	font: 16px/1.45 var(--hq);
	margin: 0 0 14px;
	color: #4a4060
}

.card-meta {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	font: 700 14px var(--hq);
	color: var(--muted)
}

.card-meta b {
	font-family: var(--titulo);
	font-weight: normal;
	font-size: 20px;
	color: var(--rosa);
	letter-spacing: .05em
}

/* ---------- leitor ---------- */

.leitor-topo {
	text-align: center;
	margin-bottom: 22px
}

.ep-num {
	display: block;
	font-family: var(--titulo);
	letter-spacing: .1em;
	color: var(--roxo);
	font-size: 18px;
	margin-bottom: 6px
}

.leitor-topo h1 {
	font-family: var(--titulo);
	font-weight: normal;
	font-size: clamp(34px, 6vw, 56px);
	letter-spacing: .03em;
	line-height: 1;
	margin: 0;
	color: var(--amarelo);
	text-shadow: var(--contorno), 4px 4px 0 var(--rosa), 6px 6px 0 var(--tinta);
}

.palco {
	max-width: 820px;
	margin: 0 auto;
	background: #fff;
	border: 4px solid var(--tinta);
	border-radius: 18px;
	box-shadow: 10px 10px 0 var(--turquesa), 14px 14px 0 var(--tinta);
	padding: clamp(10px, 2.2vw, 18px);
}

.quadro {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	border: 4px solid var(--tinta);
	border-radius: 10px;
	overflow: hidden;
	container-type: inline-size;
	background: #ffe3b8;
}

.quadro .arte,
.quadro .arte svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block
}

.quadro.entra-dir {
	animation: entraDir .38s cubic-bezier(.2, .8, .3, 1)
}

.quadro.entra-esq {
	animation: entraEsq .38s cubic-bezier(.2, .8, .3, 1)
}

/* balões: o mestre à esquerda; Trilo (e o pato) à direita */
.falas {
	position: absolute;
	top: 4%;
	left: 4%;
	right: 4%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	pointer-events: none;
}

.balao {
	position: relative;
	margin: 0;
	max-width: 64%;
	padding: .6em 1em;
	background: #fff;
	border: 3px solid var(--tinta);
	border-radius: 1.4em;
	font: 700 clamp(13px, 3.8cqw, 25px)/1.28 var(--hq);
	white-space: pre-line;
	box-shadow: 4px 4px 0 #0002;
	animation: balao .4s .1s both;
}

.balao:nth-child(2) {
	animation-delay: .5s
}

.balao:nth-child(3) {
	animation-delay: .9s
}

.balao.direita {
	align-self: flex-end
}

.balao.trilo {
	background: #ffefe4
}

.balao.pato {
	background: #fff6c2
}

.balao::before,
.balao::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: transparent;
}

.balao::before {
	left: 26px;
	bottom: -22px;
	border-width: 22px 22px 0 0;
	border-top-color: var(--tinta)
}

.balao::after {
	left: 29px;
	bottom: -15px;
	border-width: 15px 15px 0 0;
	border-top-color: #fff
}

.balao.trilo::after {
	border-top-color: #ffefe4
}

.balao.pato::after {
	border-top-color: #fff6c2
}

.balao.direita::before {
	left: auto;
	right: 26px;
	border-width: 22px 0 0 22px
}

.balao.direita::after {
	left: auto;
	right: 29px;
	border-width: 15px 0 0 15px
}

/* reação do mestre depois da resposta: balão que "pula" */
.balao.reacao {
	animation: reacao .5s cubic-bezier(.2, 1.6, .4, 1) both
}

.sfx {
	position: absolute;
	top: 44%;
	right: 5%;
	margin: 0;
	font-family: var(--titulo);
	font-size: clamp(22px, 8cqw, 60px);
	letter-spacing: .04em;
	color: #fff;
	text-shadow: var(--contorno), .09em .09em 0 var(--rosa), .13em .13em 0 var(--tinta);
	transform: rotate(-8deg);
	animation: pop .55s .35s cubic-bezier(.2, 1.6, .4, 1) both;
	pointer-events: none;
}

.carimbo {
	position: absolute;
	right: 4%;
	bottom: 5%;
	font-family: var(--titulo);
	font-size: clamp(18px, 6cqw, 40px);
	letter-spacing: .12em;
	color: var(--rosa);
	border: .1em solid var(--rosa);
	border-radius: .2em;
	padding: .04em .35em 0;
	background: #fffaf0e0;
	transform: rotate(-12deg);
	animation: carimbo .45s 1.2s both;
}

/* ---------- a brincadeira dos sons ---------- */

.desafio {
	max-width: 820px;
	margin: 24px auto 0;
	padding: 18px;
	background: #fff;
	border: 4px solid var(--tinta);
	border-radius: 18px;
	box-shadow: 6px 6px 0 var(--rosa), 9px 9px 0 var(--tinta);
	text-align: center;
}

.desafio-titulo {
	font-family: var(--titulo);
	font-size: 26px;
	letter-spacing: .05em;
	margin: 0 0 12px
}

.btn.ouvir {
	font-size: 28px;
	padding: 14px 30px;
	border-radius: 999px
}

.btn.ouvir.tocando {
	animation: pulsa .8s ease-in-out infinite
}

.som-status {
	min-height: 1.4em;
	margin: 12px 0 16px;
	font: 700 16px/1.4 var(--hq);
	color: var(--muted)
}

.som-status.erro {
	color: var(--vermelho)
}

.som-status code {
	font-size: 14px;
	background: #ffe9ec;
	padding: 1px 6px;
	border-radius: 6px
}

.opcoes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px
}

.opcao {
	min-height: 64px;
	font-family: var(--titulo);
	font-size: clamp(22px, 4vw, 28px);
	letter-spacing: .05em;
	color: var(--tinta);
	background: #fff6d6;
	border: 3px solid var(--tinta);
	border-radius: 16px;
	box-shadow: 4px 4px 0 var(--tinta);
	cursor: pointer;
	transition: transform .1s, background .2s, opacity .2s;
}

.opcao:hover:not(:disabled) {
	background: var(--amarelo);
	transform: translateY(-2px)
}

.opcao:disabled {
	cursor: default
}

.opcoes.bloqueadas .opcao:not(.certa):not(.errada) {
	opacity: .4
}

.opcoes.esperando .opcao {
	opacity: .45
}

.opcao.certa {
	background: #b8f5c9;
	animation: pulo .45s
}

.opcao.errada {
	background: #ffc2c8;
	animation: sacode .4s
}

.opcao.certa::after {
	content: " ✓"
}

.opcao.errada::after {
	content: " ✗"
}

/* ---------- navegação dos quadros ---------- */

.controles {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	max-width: 820px;
	margin: 26px auto 0
}

.contador {
	font-family: var(--titulo);
	font-size: 24px;
	letter-spacing: .06em;
	color: var(--roxo)
}

.trilha {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px
}

.trilha button {
	width: 16px;
	height: 16px;
	padding: 0;
	border: 2px solid var(--tinta);
	border-radius: 50%;
	background: #fff;
	cursor: pointer
}

.trilha button.atual {
	background: var(--rosa);
	transform: scale(1.3)
}

.trilha button:disabled {
	opacity: .3;
	cursor: not-allowed
}

.placar {
	max-width: 820px;
	margin: 26px auto 0;
	padding: 20px;
	text-align: center;
	background: var(--roxo);
	color: #fff;
	border: 4px solid var(--tinta);
	border-radius: 18px;
	box-shadow: 8px 8px 0 var(--tinta);
}

.placar-texto {
	font: 700 clamp(19px, 3vw, 24px)/1.4 var(--hq);
	margin: 0 0 16px
}

.placar-acoes {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px
}

/* ---------- animações ---------- */

@keyframes entraDir {
	from {
		opacity: 0;
		transform: translateX(44px) rotate(1deg)
	}
}

@keyframes entraEsq {
	from {
		opacity: 0;
		transform: translateX(-44px) rotate(-1deg)
	}
}

@keyframes balao {
	from {
		opacity: 0;
		transform: translateY(-10px) scale(.92)
	}
}

@keyframes reacao {
	from {
		opacity: 0;
		transform: scale(.6)
	}
}

@keyframes pop {
	from {
		opacity: 0;
		transform: rotate(-20deg) scale(.2)
	}

	to {
		opacity: 1;
		transform: rotate(-8deg) scale(1)
	}
}

@keyframes carimbo {
	from {
		opacity: 0;
		transform: rotate(-12deg) scale(2.4)
	}
}

@keyframes pulsa {
	50% {
		transform: scale(1.06)
	}
}

@keyframes pulo {
	40% {
		transform: translateY(-8px)
	}
}

@keyframes sacode {

	20%,
	60% {
		transform: translateX(-7px)
	}

	40%,
	80% {
		transform: translateX(7px)
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important
	}
}

/* ---------- celular ---------- */

@media (max-width: 720px) {
	.hero {
		grid-template-columns: 1fr
	}

	.hero-arte {
		order: -1;
		min-height: 0;
		aspect-ratio: 4 / 3;
		border-left: 0;
		border-bottom: 4px solid var(--tinta)
	}
}

@media (max-width: 560px) {

	/* quadro mais alto: o cenário continua pra cima e sobra espaço pros balões */
	.quadro {
		aspect-ratio: 4 / 5
	}

	.balao {
		max-width: 80%;
		font-size: 15px
	}

	.navegacao {
		font-size: 13px;
		gap: 4px 12px
	}

	.btn {
		font-size: 18px;
		padding: 9px 13px
	}

	.opcoes {
		gap: 10px
	}
}